@ionic/core 7.6.2-dev.11702924017.193c825c → 7.6.2-dev.11702933439.181fa64e

package/dist/collection/components/action-sheet/action-sheet.js

@@ -192,7 +192,7 @@ export class ActionSheet {
             }, class: Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), h("ion-backdrop", { tappable: this.backdropDismiss }), h("div", { tabindex: "0" }), h("div", { class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { class: "action-sheet-container" }, h("div", { class: "action-sheet-group", ref: (el) => (this.groupEl = el) }, header !== undefined && (h("div", { id: headerID, class: {
                 'action-sheet-title': true,
                 'action-sheet-has-sub-title': this.subHeader !== undefined,
-            } }, header, this.subHeader && h("div", { class: "action-sheet-sub-title" }, this.subHeader))), buttons.map((b) => (h("button", Object.assign({}, b.htmlAttributes, { type: "button", id: b.id, class: buttonClass(b), onClick: () => this.buttonClick(b), disabled: b.disabled }), h("span", { class: "action-sheet-button-inner" }, b.icon && h("ion-icon", { icon: b.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" }), b.text), mode === 'md' && h("ion-ripple-effect", null))))), cancelButton && (h("div", { class: "action-sheet-group action-sheet-group-cancel" }, h("button", Object.assign({}, cancelButton.htmlAttributes, { type: "button", class: buttonClass(cancelButton), onClick: () => this.buttonClick(cancelButton), disabled: cancelButton.disabled }), h("span", { class: "action-sheet-button-inner" }, cancelButton.icon && (h("ion-icon", { icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && h("ion-ripple-effect", null)))))), h("div", { tabindex: "0" })));
+            } }, header, this.subHeader && h("div", { class: "action-sheet-sub-title" }, this.subHeader))), buttons.map((b) => (h("button", Object.assign({}, b.htmlAttributes, { type: "button", id: b.id, class: buttonClass(b), onClick: () => this.buttonClick(b) }), h("span", { class: "action-sheet-button-inner" }, b.icon && h("ion-icon", { icon: b.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" }), b.text), mode === 'md' && h("ion-ripple-effect", null))))), cancelButton && (h("div", { class: "action-sheet-group action-sheet-group-cancel" }, h("button", Object.assign({}, cancelButton.htmlAttributes, { type: "button", class: buttonClass(cancelButton), onClick: () => this.buttonClick(cancelButton) }), h("span", { class: "action-sheet-button-inner" }, cancelButton.icon && (h("ion-icon", { icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && h("ion-ripple-effect", null)))))), h("div", { tabindex: "0" })));
     }
     static get is() { return "ion-action-sheet"; }
     static get encapsulation() { return "scoped"; }
@@ -684,17 +684,13 @@ export class ActionSheet {
                 "complexType": {
                     "signature": "(data?: any, role?: string) => Promise<boolean>",
                     "parameters": [{
-                            "tags": [{
-                                    "name": "param",
-                                    "text": "data Any data to emit in the dismiss events."
-                                }],
-                            "text": "Any data to emit in the dismiss events."
+                            "name": "data",
+                            "type": "any",
+                            "docs": "Any data to emit in the dismiss events."
                         }, {
-                            "tags": [{
-                                    "name": "param",
-                                    "text": "role The role of the element that is dismissing the action sheet.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the action sheet.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
-                                }],
-                            "text": "The role of the element that is dismissing the action sheet.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the action sheet.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+                            "name": "role",
+                            "type": "string | undefined",
+                            "docs": "The role of the element that is dismissing the action sheet.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the action sheet.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
                         }],
                     "references": {
                         "Promise": {
@@ -781,5 +777,5 @@ export class ActionSheet {
     }
 }
 const buttonClass = (button) => {
-    return Object.assign({ 'action-sheet-button': true, 'ion-activatable': !button.disabled, 'ion-focusable': !button.disabled, [`action-sheet-${button.role}`]: button.role !== undefined }, getClassMap(button.cssClass));
+    return Object.assign({ 'action-sheet-button': true, 'ion-activatable': true, 'ion-focusable': true, [`action-sheet-${button.role}`]: button.role !== undefined }, getClassMap(button.cssClass));
 };

package/dist/collection/components/action-sheet/action-sheet.md.css

@@ -83,7 +83,6 @@
    * @prop --button-color-hover: Color of the action sheet button on hover
    * @prop --button-color-focused: Color of the action sheet button when tabbed to
    * @prop --button-color-selected: Color of the selected action sheet button
-   * @prop --button-color-disabled: Color of the selected action sheet button when disabled
    */
   --color: initial;
   --button-color-activated: var(--button-color);
@@ -144,11 +143,6 @@
   overflow: hidden;
 }
 
-.action-sheet-button:disabled {
-  color: var(--button-color-disabled);
-  opacity: 0.4;
-}
-
 .action-sheet-button-inner {
   display: flex;
   position: relative;
@@ -238,10 +232,10 @@
 }
 
 @media (any-hover: hover) {
-  .action-sheet-button:not(:disabled):hover {
+  .action-sheet-button:hover {
     color: var(--button-color-hover);
   }
-  .action-sheet-button:not(:disabled):hover::after {
+  .action-sheet-button:hover::after {
     background: var(--button-background-hover);
     opacity: var(--button-background-hover-opacity);
   }
@@ -314,7 +308,6 @@
   --button-background-focused: currentColor;
   --button-background-focused-opacity: .12;
   --button-color: var(--ion-color-step-850, #262626);
-  --button-color-disabled: var(--button-color);
   --color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54);
 }
 

package/dist/collection/components/action-sheet/test/basic/action-sheet-rendering.e2e.js

@@ -1,7 +1,6 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 import { ActionSheetFixture } from "./fixture";
 configs().forEach(({ config, screenshot, title }) => {
@@ -40,22 +39,3 @@ configs().forEach(({ config, screenshot, title }) => {
         });
     });
 });
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-    test.describe(title('action sheet: disabled buttons'), () => {
-        test('should render disabled button', async ({ page }) => {
-            await page.setContent(`
-        <ion-action-sheet></ion-action-sheet>
-        <script>
-          const actionSheet = document.querySelector('ion-action-sheet');
-          actionSheet.buttons = [
-            { text: 'Disabled', disabled: true },
-            { text: 'Cancel', role: 'cancel', disabled: true }
-          ];
-        </script>
-      `, config);
-            const actionSheet = page.locator('ion-action-sheet');
-            await actionSheet.evaluate((el) => el.present());
-            await expect(actionSheet).toHaveScreenshot(screenshot('action-sheet-disabled'));
-        });
-    });
-});

package/dist/collection/components/alert/alert.js

@@ -926,17 +926,13 @@ export class Alert {
                 "complexType": {
                     "signature": "(data?: any, role?: string) => Promise<boolean>",
                     "parameters": [{
-                            "tags": [{
-                                    "name": "param",
-                                    "text": "data Any data to emit in the dismiss events."
-                                }],
-                            "text": "Any data to emit in the dismiss events."
+                            "name": "data",
+                            "type": "any",
+                            "docs": "Any data to emit in the dismiss events."
                         }, {
-                            "tags": [{
-                                    "name": "param",
-                                    "text": "role The role of the element that is dismissing the alert.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the alert.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
-                                }],
-                            "text": "The role of the element that is dismissing the alert.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the alert.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+                            "name": "role",
+                            "type": "string | undefined",
+                            "docs": "The role of the element that is dismissing the alert.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the alert.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
                         }],
                     "references": {
                         "Promise": {

package/dist/collection/components/app/app.js

@@ -78,8 +78,9 @@ export class App {
                 "complexType": {
                     "signature": "(elements: HTMLElement[]) => Promise<void>",
                     "parameters": [{
-                            "tags": [],
-                            "text": ""
+                            "name": "elements",
+                            "type": "HTMLElement[]",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {

package/dist/collection/components/backdrop/backdrop.js

@@ -2,13 +2,25 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h } from "@stencil/core";
+import { GESTURE_CONTROLLER } from "../../utils/gesture/index";
 import { getIonMode } from "../../global/ionic-global";
 export class Backdrop {
     constructor() {
+        this.blocker = GESTURE_CONTROLLER.createBlocker({
+            disableScroll: true,
+        });
         this.visible = true;
         this.tappable = true;
         this.stopPropagation = true;
     }
+    connectedCallback() {
+        if (this.stopPropagation) {
+            this.blocker.block();
+        }
+    }
+    disconnectedCallback() {
+        this.blocker.unblock();
+    }
     onMouseDown(ev) {
         this.emitTap(ev);
     }

package/dist/collection/components/button/button.ios.css

@@ -100,7 +100,7 @@
   font-family: var(--ion-font-family, inherit);
   text-align: center;
   text-decoration: none;
-  white-space: normal;
+  white-space: nowrap;
   user-select: none;
   vertical-align: top;
   vertical-align: -webkit-baseline-middle;

package/dist/collection/components/button/button.md.css

@@ -100,7 +100,7 @@
   font-family: var(--ion-font-family, inherit);
   text-align: center;
   text-decoration: none;
-  white-space: normal;
+  white-space: nowrap;
   user-select: none;
   vertical-align: top;
   vertical-align: -webkit-baseline-middle;

package/dist/collection/components/button/test/wrap/button.e2e.js

@@ -6,29 +6,33 @@ import { configs, test } from "../../../../utils/test/playwright/index";
 configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     test.describe(title('button: wrap'), () => {
         test('should render button with long text', async ({ page }) => {
+            // TODO(FW-4599): remove ion-text-wrap class
             await page.setContent(`
-        <ion-button>This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
+        <ion-button class="ion-text-wrap">This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
       `, config);
             const button = page.locator('ion-button');
             await expect(button).toHaveScreenshot(screenshot(`button-wrap`));
         });
         test('should render small button with long text', async ({ page }) => {
+            // TODO(FW-4599): remove ion-text-wrap class
             await page.setContent(`
-        <ion-button size="small">This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
+        <ion-button class="ion-text-wrap" size="small">This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
       `, config);
             const button = page.locator('ion-button');
             await expect(button).toHaveScreenshot(screenshot(`button-wrap-small`));
         });
         test('should render large button with long text', async ({ page }) => {
+            // TODO(FW-4599): remove ion-text-wrap class
             await page.setContent(`
-        <ion-button size="large">This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
+        <ion-button class="ion-text-wrap" size="large">This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
       `, config);
             const button = page.locator('ion-button');
             await expect(button).toHaveScreenshot(screenshot(`button-wrap-large`));
         });
         test('should render button with long text and icons', async ({ page }) => {
+            // TODO(FW-4599): remove ion-text-wrap class
             await page.setContent(`
-        <ion-button>
+        <ion-button class="ion-text-wrap">
           <ion-icon slot="start" name="heart"></ion-icon>
           This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends
           <ion-icon slot="end" name="star"></ion-icon>
@@ -38,15 +42,17 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
             await expect(button).toHaveScreenshot(screenshot(`button-wrap-icons`));
         });
         test('should render block button with long text', async ({ page }) => {
+            // TODO(FW-4599): remove ion-text-wrap class
             await page.setContent(`
-        <ion-button expand="block">This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
+        <ion-button class="ion-text-wrap" expand="block">This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
       `, config);
             const button = page.locator('ion-button');
             await expect(button).toHaveScreenshot(screenshot(`button-wrap-block`));
         });
         test('should render block button with long text and icons', async ({ page }) => {
+            // TODO(FW-4599): remove ion-text-wrap class
             await page.setContent(`
-        <ion-button expand="block">
+        <ion-button class="ion-text-wrap" expand="block">
           <ion-icon slot="start" name="heart"></ion-icon>
           This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends
           <ion-icon slot="end" name="star"></ion-icon>
@@ -56,15 +62,17 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
             await expect(button).toHaveScreenshot(screenshot(`button-wrap-block-icons`));
         });
         test('should render full button with long text', async ({ page }) => {
+            // TODO(FW-4599): remove ion-text-wrap class
             await page.setContent(`
-        <ion-button expand="full">This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
+        <ion-button class="ion-text-wrap" expand="full">This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
       `, config);
             const button = page.locator('ion-button');
             await expect(button).toHaveScreenshot(screenshot(`button-wrap-full`));
         });
         test('should render full button with long text and icons', async ({ page }) => {
+            // TODO(FW-4599): remove ion-text-wrap class
             await page.setContent(`
-        <ion-button expand="full">
+        <ion-button class="ion-text-wrap" expand="full">
           <ion-icon slot="start" name="heart"></ion-icon>
           This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends
           <ion-icon slot="end" name="star"></ion-icon>
@@ -74,9 +82,10 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
             await expect(button).toHaveScreenshot(screenshot(`button-wrap-full-icons`));
         });
         test('should render an item button with long text', async ({ page }) => {
+            // TODO(FW-4599): remove ion-text-wrap class
             await page.setContent(`
         <ion-item>
-          <ion-button slot="end">
+          <ion-button class="ion-text-wrap" slot="end">
             This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends
           </ion-button>
         </ion-item>
@@ -85,9 +94,10 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
             await expect(item).toHaveScreenshot(screenshot(`button-wrap-item-button`));
         });
         test('should render an item button with long text and icons', async ({ page }) => {
+            // TODO(FW-4599): remove ion-text-wrap class
             await page.setContent(`
         <ion-item>
-          <ion-button slot="end">
+          <ion-button class="ion-text-wrap" slot="end">
             <ion-icon slot="start" name="heart"></ion-icon>
             This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends
             <ion-icon slot="end" name="star"></ion-icon>
@@ -98,10 +108,11 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
             await expect(item).toHaveScreenshot(screenshot(`button-wrap-item-button-icons`));
         });
         test('should render a list header button with long text', async ({ page }) => {
+            // TODO(FW-4599): remove ion-text-wrap class
             await page.setContent(`
         <ion-list-header>
           <ion-label>List Header</ion-label>
-          <ion-button>
+          <ion-button class="ion-text-wrap">
             This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends
           </ion-button>
         </ion-list-header>
@@ -110,10 +121,11 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
             await expect(listHeader).toHaveScreenshot(screenshot(`button-wrap-list-header-button`));
         });
         test('should render a toolbar button with long text', async ({ page }) => {
+            // TODO(FW-4599): remove ion-text-wrap class
             await page.setContent(`
         <ion-toolbar>
           <ion-buttons slot="end">
-            <ion-button>
+            <ion-button class="ion-text-wrap">
               This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends
             </ion-button>
           </ion-buttons>

package/dist/collection/components/content/content.css

@@ -97,6 +97,10 @@
   color: var(--ion-color-contrast);
 }
 
+:host(.outer-content) {
+  --background: var(--ion-color-step-50, #f2f2f2);
+}
+
 #background-content {
   left: 0px;
   right: 0px;

package/dist/collection/components/content/content.js

@@ -596,11 +596,9 @@ export class Content {
                 "complexType": {
                     "signature": "(duration?: number) => Promise<void>",
                     "parameters": [{
-                            "tags": [{
-                                    "name": "param",
-                                    "text": "duration The amount of time to take scrolling to the top. Defaults to `0`."
-                                }],
-                            "text": "The amount of time to take scrolling to the top. Defaults to `0`."
+                            "name": "duration",
+                            "type": "number",
+                            "docs": "The amount of time to take scrolling to the top. Defaults to `0`."
                         }],
                     "references": {
                         "Promise": {
@@ -622,11 +620,9 @@ export class Content {
                 "complexType": {
                     "signature": "(duration?: number) => Promise<void>",
                     "parameters": [{
-                            "tags": [{
-                                    "name": "param",
-                                    "text": "duration The amount of time to take scrolling to the bottom. Defaults to `0`."
-                                }],
-                            "text": "The amount of time to take scrolling to the bottom. Defaults to `0`."
+                            "name": "duration",
+                            "type": "number",
+                            "docs": "The amount of time to take scrolling to the bottom. Defaults to `0`."
                         }],
                     "references": {
                         "Promise": {
@@ -648,23 +644,17 @@ export class Content {
                 "complexType": {
                     "signature": "(x: number, y: number, duration: number) => Promise<void>",
                     "parameters": [{
-                            "tags": [{
-                                    "name": "param",
-                                    "text": "x The amount to scroll by on the horizontal axis."
-                                }],
-                            "text": "The amount to scroll by on the horizontal axis."
+                            "name": "x",
+                            "type": "number",
+                            "docs": "The amount to scroll by on the horizontal axis."
                         }, {
-                            "tags": [{
-                                    "name": "param",
-                                    "text": "y The amount to scroll by on the vertical axis."
-                                }],
-                            "text": "The amount to scroll by on the vertical axis."
+                            "name": "y",
+                            "type": "number",
+                            "docs": "The amount to scroll by on the vertical axis."
                         }, {
-                            "tags": [{
-                                    "name": "param",
-                                    "text": "duration The amount of time to take scrolling by that amount."
-                                }],
-                            "text": "The amount of time to take scrolling by that amount."
+                            "name": "duration",
+                            "type": "number",
+                            "docs": "The amount of time to take scrolling by that amount."
                         }],
                     "references": {
                         "Promise": {
@@ -692,23 +682,17 @@ export class Content {
                 "complexType": {
                     "signature": "(x: number | undefined | null, y: number | undefined | null, duration?: number) => Promise<void>",
                     "parameters": [{
-                            "tags": [{
-                                    "name": "param",
-                                    "text": "x The point to scroll to on the horizontal axis."
-                                }],
-                            "text": "The point to scroll to on the horizontal axis."
+                            "name": "x",
+                            "type": "number | null | undefined",
+                            "docs": "The point to scroll to on the horizontal axis."
                         }, {
-                            "tags": [{
-                                    "name": "param",
-                                    "text": "y The point to scroll to on the vertical axis."
-                                }],
-                            "text": "The point to scroll to on the vertical axis."
+                            "name": "y",
+                            "type": "number | null | undefined",
+                            "docs": "The point to scroll to on the vertical axis."
                         }, {
-                            "tags": [{
-                                    "name": "param",
-                                    "text": "duration The amount of time to take scrolling to that point. Defaults to `0`."
-                                }],
-                            "text": "The amount of time to take scrolling to that point. Defaults to `0`."
+                            "name": "duration",
+                            "type": "number",
+                            "docs": "The amount of time to take scrolling to that point. Defaults to `0`."
                         }],
                     "references": {
                         "Promise": {

package/dist/collection/components/datetime/datetime.ios.css

@@ -61,8 +61,6 @@
    *
    * @prop --wheel-highlight-background: The background of the highlight under the selected
    * item when using a wheel style layout, or in the month/year picker for grid style layouts.
-   * @prop --wheel-highlight-border-radius: The border radius of the highlight under the selected
-   * item when using a wheel style layout, or in the month/year picker for grid style layouts.
    * @prop --wheel-fade-background-rgb: The color of the gradient covering non-selected items
    * when using a wheel style layout, or in the month/year picker for grid style layouts. Must
    * be in RGB format, e.g. `255, 255, 255`.
@@ -73,6 +71,19 @@
   overflow: hidden;
 }
 
+/**
+ * When using the wheel picker to switch
+ * between months, sometimes the allowed
+ * dates may be filtered. As a result, it
+ * is possible to get a layout shift as
+ * the picker column will shrink to fit the
+ * widest item in the column. Setting a minimum
+ * width avoids this layout shifting.
+ */
+ion-picker-column-internal {
+  min-width: 26px;
+}
+
 :host(.datetime-size-fixed) {
   width: auto;
   height: auto;
@@ -83,7 +94,7 @@
 }
 
 /**
- * This ensures that the picker is appropriately
+ * This ensures that the picker is apppropriately
  * sized and never truncates the text.
  */
 :host(.datetime-size-fixed.datetime-prefer-wheel) {
@@ -306,8 +317,24 @@
   justify-content: space-between;
 }
 
+:host .calendar-action-buttons ion-item,
 :host .calendar-action-buttons ion-button {
-  --background: transparent;
+  --background: translucent;
+}
+
+:host .calendar-action-buttons ion-item ion-label {
+  display: flex;
+  align-items: center;
+  width: auto;
+}
+
+:host .calendar-action-buttons ion-item ion-icon {
+  -webkit-padding-start: 4px;
+  padding-inline-start: 4px;
+  -webkit-padding-end: 0;
+  padding-inline-end: 0;
+  padding-top: 0;
+  padding-bottom: 0;
 }
 
 :host .calendar-days-of-week {
@@ -489,72 +516,8 @@
   position: static;
 }
 
-:host(.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle {
-  color: var(--ion-color-base);
-}
-
-.calendar-month-year {
-  min-width: 0;
-}
-
-.calendar-month-year-toggle {
-  font-family: inherit;
-  font-size: inherit;
-  font-style: inherit;
-  font-weight: inherit;
-  letter-spacing: inherit;
-  text-decoration: inherit;
-  text-indent: inherit;
-  text-overflow: inherit;
-  text-transform: inherit;
-  text-align: inherit;
-  white-space: inherit;
-  color: inherit;
-  position: relative;
-  border: 0;
-  outline: none;
-  background: transparent;
-  cursor: pointer;
-  z-index: 1;
-}
-.calendar-month-year-toggle::after {
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  position: absolute;
-  content: "";
-  opacity: 0;
-  transition: opacity 15ms linear, background-color 15ms linear;
-  z-index: -1;
-}
-.calendar-month-year-toggle.ion-focused::after {
-  background: currentColor;
-}
-.calendar-month-year-toggle:disabled {
-  opacity: 0.3;
-  pointer-events: none;
-}
-
-.calendar-month-year-toggle ion-icon {
-  -webkit-padding-start: 4px;
-  padding-inline-start: 4px;
-  -webkit-padding-end: 0;
-  padding-inline-end: 0;
-  padding-top: 0;
-  padding-bottom: 0;
-  flex-shrink: 0;
-}
-
-.calendar-month-year-toggle #toggle-wrapper {
-  display: inline-flex;
-  align-items: center;
-}
-
-ion-picker {
-  --highlight-background: var(--wheel-highlight-background);
-  --highlight-border-radius: var(--wheel-highlight-border-radius);
-  --fade-background-rgb: var(--wheel-fade-background-rgb);
+:host(.show-month-and-year) .calendar-action-buttons ion-item {
+  --color: var(--ion-color-base);
 }
 
 /**
@@ -643,31 +606,15 @@ ion-picker {
   margin-top: 10px;
 }
 
-.calendar-month-year-toggle {
-  -webkit-padding-start: 16px;
-  padding-inline-start: 16px;
-  -webkit-padding-end: 16px;
-  padding-inline-end: 16px;
-  padding-top: 0px;
-  padding-bottom: 0px;
-  min-height: 44px;
+:host .calendar-action-buttons ion-item {
+  --padding-start: 16px;
+  --background-hover: transparent;
+  --background-activated: transparent;
   font-size: min(1rem, 25.6px);
   font-weight: 600;
 }
-.calendar-month-year-toggle.ion-focused::after {
-  opacity: 0.15;
-}
-
-.calendar-month-year-toggle #toggle-wrapper {
-  -webkit-margin-start: 0;
-  margin-inline-start: 0;
-  -webkit-margin-end: 8px;
-  margin-inline-end: 8px;
-  margin-top: 10px;
-  margin-bottom: 10px;
-}
 
-:host .calendar-action-buttons .calendar-month-year-toggle ion-icon,
+:host .calendar-action-buttons ion-item ion-icon,
 :host .calendar-action-buttons ion-buttons ion-button {
   color: var(--ion-color-base);
 }