From 9fc78066f294ac6cd79e4405a9528d4a9de4a016 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Wed, 27 May 2026 10:31:00 -0700 Subject: [PATCH 1/4] feat(menu-toggle): migrate to Modular Ionic --- core/api.txt | 1 - core/src/components.d.ts | 8 -------- core/src/components/menu-toggle/menu-toggle.tsx | 5 ----- packages/angular/src/directives/proxies.ts | 4 ++-- packages/angular/standalone/src/directives/proxies.ts | 4 ++-- 5 files changed, 4 insertions(+), 18 deletions(-) diff --git a/core/api.txt b/core/api.txt index 618916e5be4..d2f8d2ecbc7 100644 --- a/core/api.txt +++ b/core/api.txt @@ -1722,7 +1722,6 @@ ion-menu-toggle,shadow ion-menu-toggle,prop,autoHide,boolean,true,false,false ion-menu-toggle,prop,menu,string | undefined,undefined,false,false ion-menu-toggle,prop,mode,"ios" | "md",undefined,false,false -ion-menu-toggle,prop,theme,"ios" | "md" | "ionic",undefined,false,false ion-modal,shadow ion-modal,prop,animated,boolean,true,false,false diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 1b7292c8df1..a5a588b858c 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -2325,10 +2325,6 @@ export namespace Components { * The mode determines the platform behaviors of the component. */ "mode"?: "ios" | "md"; - /** - * The theme determines the visual appearance of the component. - */ - "theme"?: "ios" | "md" | "ionic"; } interface IonModal { /** @@ -8345,10 +8341,6 @@ declare namespace LocalJSX { * The mode determines the platform behaviors of the component. */ "mode"?: "ios" | "md"; - /** - * The theme determines the visual appearance of the component. - */ - "theme"?: "ios" | "md" | "ionic"; } interface IonModal { /** diff --git a/core/src/components/menu-toggle/menu-toggle.tsx b/core/src/components/menu-toggle/menu-toggle.tsx index f3983889575..f9893b2e27c 100644 --- a/core/src/components/menu-toggle/menu-toggle.tsx +++ b/core/src/components/menu-toggle/menu-toggle.tsx @@ -2,13 +2,10 @@ import type { ComponentInterface } from '@stencil/core'; import { Component, Host, Listen, Prop, State, h } from '@stencil/core'; import { menuController } from '@utils/menu-controller'; -import { getIonTheme } from '../../global/ionic-global'; - import { updateVisibility } from './menu-toggle-util'; /** * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component. - * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component. * * @slot - Content is placed inside the toggle to act as the click target. */ @@ -53,7 +50,6 @@ export class MenuToggle implements ComponentInterface { }; render() { - const theme = getIonTheme(this); const hidden = this.autoHide && !this.visible; return ( @@ -61,7 +57,6 @@ export class MenuToggle implements ComponentInterface { onClick={this.onClick} aria-hidden={hidden ? 'true' : null} class={{ - [theme]: true, 'menu-toggle-hidden': hidden, }} > diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts index 1dd5491da67..b4328758f7f 100644 --- a/packages/angular/src/directives/proxies.ts +++ b/packages/angular/src/directives/proxies.ts @@ -1468,14 +1468,14 @@ export declare interface IonMenuButton extends Components.IonMenuButton {} @ProxyCmp({ - inputs: ['autoHide', 'menu', 'mode', 'theme'] + inputs: ['autoHide', 'menu', 'mode'] }) @Component({ selector: 'ion-menu-toggle', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['autoHide', 'menu', 'mode', 'theme'], + inputs: ['autoHide', 'menu', 'mode'], }) export class IonMenuToggle { protected el: HTMLIonMenuToggleElement; diff --git a/packages/angular/standalone/src/directives/proxies.ts b/packages/angular/standalone/src/directives/proxies.ts index d11f99cd10c..acbd76af6d7 100644 --- a/packages/angular/standalone/src/directives/proxies.ts +++ b/packages/angular/standalone/src/directives/proxies.ts @@ -1398,14 +1398,14 @@ export declare interface IonMenuButton extends Components.IonMenuButton {} @ProxyCmp({ defineCustomElementFn: defineIonMenuToggle, - inputs: ['autoHide', 'menu', 'mode', 'theme'] + inputs: ['autoHide', 'menu', 'mode'] }) @Component({ selector: 'ion-menu-toggle', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['autoHide', 'menu', 'mode', 'theme'], + inputs: ['autoHide', 'menu', 'mode'], standalone: true }) export class IonMenuToggle { From dd25c1b82057a834663991768081772943542a72 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Wed, 27 May 2026 10:34:07 -0700 Subject: [PATCH 2/4] docs(BREAKING): add menu toggle --- BREAKING.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/BREAKING.md b/BREAKING.md index 12fca9b9580..f50b2a403a8 100644 --- a/BREAKING.md +++ b/BREAKING.md @@ -24,6 +24,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver - [Grid](#version-9x-grid) - [Input Otp](#version-9x-input-otp) - [Item Divider](#version-9x-item-divider) + - [Menu Toggle](#version-9x-menu-toggle) - [Radio Group](#version-9x-radio-group) - [Spinner](#version-9x-spinner) - [Textarea](#version-9x-textarea) @@ -272,6 +273,16 @@ If you were targeting the internals of `ion-input-otp` in your CSS, you will nee - `--inner-padding-start` is replaced by `IonItemDivider.inner.padding.start` for global styles and `--ion-item-divider-inner-padding-start` for component-specific overrides. - Specific theme classes (e.g., `ion-item-divider.md`) are no longer supported. Style modifications based on the active theme must be implemented using theme tokens rather than direct class targeting. +

Menu Toggle

+ +The following breaking changes apply to `ion-menu-toggle`: + +1. Theme classes (`ion-menu-toggle.md`, `ion-menu-toggle.ios`) are no longer supported. + +
Theme classes
+ +Remove any instances that target the theme classes: `ion-menu-toggle.md`, `ion-menu-toggle.ios`. +

Radio Group

Converted `ion-radio-group` to use [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM). From 5aa3b846ba35436dbe6c80e8f0e076b41de8f620 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Wed, 27 May 2026 10:47:02 -0700 Subject: [PATCH 3/4] test(menu-toggle): update title tag --- core/src/components/menu-toggle/test/button/index.html | 2 +- core/src/components/menu-toggle/test/list/index.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/core/src/components/menu-toggle/test/button/index.html b/core/src/components/menu-toggle/test/button/index.html index 83a915d60f0..9c3a74c06ce 100644 --- a/core/src/components/menu-toggle/test/button/index.html +++ b/core/src/components/menu-toggle/test/button/index.html @@ -2,7 +2,7 @@ - Menu - Button + Menu Toggle - Button - Menu - List + Menu Toggle - List Date: Wed, 27 May 2026 11:09:28 -0700 Subject: [PATCH 4/4] fix(menu-toggle): prevent unhandled rejection in visibilityChanged --- core/src/components/menu-toggle/menu-toggle.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/core/src/components/menu-toggle/menu-toggle.tsx b/core/src/components/menu-toggle/menu-toggle.tsx index f9893b2e27c..4739504325f 100644 --- a/core/src/components/menu-toggle/menu-toggle.tsx +++ b/core/src/components/menu-toggle/menu-toggle.tsx @@ -42,7 +42,11 @@ export class MenuToggle implements ComponentInterface { @Listen('ionMenuChange', { target: 'body' }) @Listen('ionSplitPaneVisible', { target: 'body' }) async visibilityChanged() { - this.visible = await updateVisibility(this.menu); + try { + this.visible = await updateVisibility(this.menu); + } catch { + this.visible = false; + } } private onClick = () => {