feat(menu-toggle): migrate to Modular Ionic

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.
 
+<h4 id="version-9x-menu-toggle">Menu Toggle</h4>
+
+The following breaking changes apply to `ion-menu-toggle`:
+
+1. Theme classes (`ion-menu-toggle.md`, `ion-menu-toggle.ios`) are no longer supported.
+
+<h5>Theme classes</h5>
+
+Remove any instances that target the theme classes: `ion-menu-toggle.md`, `ion-menu-toggle.ios`.
+
 <h4 id="version-9x-radio-group">Radio Group</h4>
 
 Converted `ion-radio-group` to use [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM).

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

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 {
         /**

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,23 +42,25 @@ 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 = () => {
     return menuController.toggle(this.menu);
   };
 
   render() {
-    const theme = getIonTheme(this);
     const hidden = this.autoHide && !this.visible;
 
     return (
       <Host
         onClick={this.onClick}
         aria-hidden={hidden ? 'true' : null}
         class={{
-          [theme]: true,
           'menu-toggle-hidden': hidden,
         }}
       >

core/src/components/menu-toggle/test/button/index.html

@@ -2,7 +2,7 @@
 <html lang="en" dir="ltr">
   <head>
     <meta charset="UTF-8" />
-    <title>Menu - Button</title>
+    <title>Menu Toggle - Button</title>
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"

core/src/components/menu-toggle/test/list/index.html

@@ -2,7 +2,7 @@
 <html lang="en" dir="ltr">
   <head>
     <meta charset="UTF-8" />
-    <title>Menu - List</title>
+    <title>Menu Toggle - List</title>
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"

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: '<ng-content></ng-content>',
   // 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;

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: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['autoHide', 'menu', 'mode', 'theme'],
+  inputs: ['autoHide', 'menu', 'mode'],
   standalone: true
 })
 export class IonMenuToggle {