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.
+
+
+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).
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..4739504325f 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.
*/
@@ -45,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 = () => {
@@ -53,7 +54,6 @@ export class MenuToggle implements ComponentInterface {
};
render() {
- const theme = getIonTheme(this);
const hidden = this.autoHide && !this.visible;
return (
@@ -61,7 +61,6 @@ export class MenuToggle implements ComponentInterface {
onClick={this.onClick}
aria-hidden={hidden ? 'true' : null}
class={{
- [theme]: true,
'menu-toggle-hidden': hidden,
}}
>
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
',
// 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 {