@ionic/core 7.7.2-dev.11707425083.192d8103 → 7.7.2-nightly.20240209

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;
@@ -114,20 +114,20 @@
 }
 
 :host(.button-solid) {
-  --background: var(--ion-color-primary, #0054e9);
+  --background: var(--ion-color-primary, #3880ff);
   --color: var(--ion-color-primary-contrast, #fff);
 }
 
 :host(.button-outline) {
-  --border-color: var(--ion-color-primary, #0054e9);
+  --border-color: var(--ion-color-primary, #3880ff);
   --background: transparent;
-  --color: var(--ion-color-primary, #0054e9);
+  --color: var(--ion-color-primary, #3880ff);
 }
 
 :host(.button-clear) {
   --border-width: 0;
   --background: transparent;
-  --color: var(--ion-color-primary, #0054e9);
+  --color: var(--ion-color-primary, #3880ff);
 }
 
 :host(.button-block) {
@@ -431,8 +431,8 @@ ion-ripple-effect {
   --border-style: solid;
   --box-shadow: none;
   --background-activated: transparent;
-  --background-focused: var(--ion-color-primary, #0054e9);
-  --background-hover: var(--ion-color-primary, #0054e9);
+  --background-focused: var(--ion-color-primary, #3880ff);
+  --background-hover: var(--ion-color-primary, #3880ff);
   --background-activated-opacity: 0;
   --background-focused-opacity: .12;
   --background-hover-opacity: .04;
@@ -444,8 +444,8 @@ ion-ripple-effect {
 
 :host(.button-clear) {
   --background-activated: transparent;
-  --background-focused: var(--ion-color-primary, #0054e9);
-  --background-hover: var(--ion-color-primary, #0054e9);
+  --background-focused: var(--ion-color-primary, #3880ff);
+  --background-hover: var(--ion-color-primary, #3880ff);
   --background-activated-opacity: 0;
   --background-focused-opacity: .12;
   --background-hover-opacity: .04;

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

@@ -1,56 +1,8 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import AxeBuilder from "@axe-core/playwright";
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
-    test.describe(title('button: a11y for ion-color()'), () => {
-        test('should not have accessibility violations', async ({ page }) => {
-            await page.setContent(`
-        <ion-button>Default</ion-button>
-        <ion-button fill="solid">Solid</ion-button>
-        <ion-button fill="outline">Outline</ion-button>
-        <ion-button fill="clear">Clear</ion-button>
-      `, config);
-            const results = await new AxeBuilder({ page }).analyze();
-            expect(results.violations).toEqual([]);
-        });
-        test('focused state should not have accessibility violations', async ({ page }) => {
-            await page.setContent(`
-        <ion-button class="ion-focused" fill="solid">Solid</ion-button>
-        <ion-button class="ion-focused" fill="outline">Outline</ion-button>
-        <ion-button class="ion-focused" fill="clear">Clear</ion-button>
-      `, config);
-            const results = await new AxeBuilder({ page }).analyze();
-            expect(results.violations).toEqual([]);
-        });
-        test('button in toolbar should not have accessibility violations', async ({ page }) => {
-            await page.setContent(`
-        <ion-toolbar>
-          <ion-button fill="outline" class="ion-activated">Start</ion-button>
-        </ion-toolbar>
-      `, config);
-            const results = await new AxeBuilder({ page }).analyze();
-            expect(results.violations).toEqual([]);
-        });
-    });
-});
-/**
- * Only ios mode uses ion-color() for the activated button state
- */
-configs({ directions: ['ltr'], modes: ['ios'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
-    test.describe(title('button: ios contrast'), () => {
-        test('activated state should not have accessibility violations', async ({ page }) => {
-            await page.setContent(`
-        <ion-button class="ion-activated" fill="solid">Solid</ion-button>
-        <ion-button class="ion-activated" fill="outline">Outline</ion-button>
-      `, config);
-            const results = await new AxeBuilder({ page }).analyze();
-            expect(results.violations).toEqual([]);
-        });
-    });
-});
 configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     test.describe(title('button: font scaling'), () => {
         test('should scale default button text on larger font sizes', async ({ page }) => {

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/checkbox/checkbox.ios.css

@@ -71,9 +71,10 @@
    * @prop --checkmark-color: Color of the checkbox checkmark when checked
    * @prop --checkmark-width: Stroke width of the checkbox checkmark
    */
-  --checkbox-background-checked: var(--ion-color-primary, #0054e9);
-  --border-color-checked: var(--ion-color-primary, #0054e9);
+  --checkbox-background-checked: var(--ion-color-primary, #3880ff);
+  --border-color-checked: var(--ion-color-primary, #3880ff);
   --checkmark-color: var(--ion-color-primary-contrast, #fff);
+  --checkmark-width: 1;
   --transition: none;
   display: inline-block;
   position: relative;
@@ -127,10 +128,28 @@
   align-items: center;
   opacity: 0;
 }
-:host(.legacy-checkbox) label {
-  inset-inline-start: 0;
+@supports (inset-inline-start: 0) {
+  :host(.legacy-checkbox) label {
+    inset-inline-start: 0;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  :host(.legacy-checkbox) label {
+    left: 0;
+  }
+  :host-context([dir=rtl]):host(.legacy-checkbox) label, :host-context([dir=rtl]).legacy-checkbox label {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    :host(.legacy-checkbox:dir(rtl)) label {
+      left: unset;
+      right: unset;
+      right: 0;
+    }
+  }
 }
-
 :host(.legacy-checkbox) label::-moz-focus-inner {
   border: 0;
 }
@@ -485,12 +504,11 @@ input {
  */
 :host {
   --border-radius: 50%;
-  --border-width: 0.125rem;
+  --border-width: 0.0625rem;
   --border-style: solid;
   --border-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.23);
   --checkbox-background: var(--ion-item-background, var(--ion-background-color, #fff));
-  --size: min(1.375rem, 55.836px);
-  --checkmark-width: 1.5px;
+  --size: min(1.625rem, 65.988px);
 }
 
 :host(.checkbox-disabled) {

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

@@ -71,9 +71,10 @@
    * @prop --checkmark-color: Color of the checkbox checkmark when checked
    * @prop --checkmark-width: Stroke width of the checkbox checkmark
    */
-  --checkbox-background-checked: var(--ion-color-primary, #0054e9);
-  --border-color-checked: var(--ion-color-primary, #0054e9);
+  --checkbox-background-checked: var(--ion-color-primary, #3880ff);
+  --border-color-checked: var(--ion-color-primary, #3880ff);
   --checkmark-color: var(--ion-color-primary-contrast, #fff);
+  --checkmark-width: 1;
   --transition: none;
   display: inline-block;
   position: relative;
@@ -127,10 +128,28 @@
   align-items: center;
   opacity: 0;
 }
-:host(.legacy-checkbox) label {
-  inset-inline-start: 0;
+@supports (inset-inline-start: 0) {
+  :host(.legacy-checkbox) label {
+    inset-inline-start: 0;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  :host(.legacy-checkbox) label {
+    left: 0;
+  }
+  :host-context([dir=rtl]):host(.legacy-checkbox) label, :host-context([dir=rtl]).legacy-checkbox label {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    :host(.legacy-checkbox:dir(rtl)) label {
+      left: unset;
+      right: unset;
+      right: 0;
+    }
+  }
 }
-
 :host(.legacy-checkbox) label::-moz-focus-inner {
   border: 0;
 }

package/dist/collection/components/checkbox/test/a11y/checkbox.e2e.js

@@ -4,19 +4,10 @@
 import AxeBuilder from "@axe-core/playwright";
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
     test.describe(title('checkbox: a11y'), () => {
         test('should not have accessibility violations', async ({ page }) => {
-            await page.setContent(`
-        <main>
-          <ion-checkbox>Label</ion-checkbox>
-          <ion-checkbox aria-label="my aria label"></ion-checkbox>
-          <ion-checkbox checked="true">Checked</ion-checkbox>
-          <ion-item>
-            <ion-checkbox>Checkbox in item</ion-checkbox>
-          </ion-item>
-        </main>
-      `, config);
+            await page.goto(`/src/components/checkbox/test/a11y`, config);
             const results = await new AxeBuilder({ page }).analyze();
             expect(results.violations).toEqual([]);
         });

package/dist/collection/components/checkbox/test/basic/checkbox.e2e.js

@@ -5,16 +5,6 @@ import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 configs().forEach(({ title, screenshot, config }) => {
     test.describe(title('checkbox: basic visual tests'), () => {
-        test('should not have visual regressions', async ({ page }) => {
-            await page.setContent(`
-        <div id="checkboxes">
-          <ion-checkbox>Unchecked</ion-checkbox>
-          <ion-checkbox checked>Checked</ion-checkbox>
-        </div>
-      `, config);
-            const checkboxes = page.locator('#checkboxes');
-            await expect(checkboxes).toHaveScreenshot(screenshot(`checkbox-basic`));
-        });
         test('should render custom checkmark-width correctly', async ({ page }) => {
             await page.setContent(`
         <ion-checkbox checked style="--checkmark-width: 7">Checkmark Width</ion-checkbox>

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

@@ -334,8 +334,9 @@ export class Content {
         const mode = getIonMode(this);
         const forceOverscroll = this.shouldForceOverscroll();
         const transitionShadow = mode === 'ios';
+        const TagType = isMainContent ? 'main' : 'div';
         this.resize();
-        return (h(Host, { key: 'c8df05bec11069ef219b64354b4ebfe8154735cc', role: isMainContent ? 'main' : undefined, class: createColorClasses(this.color, {
+        return (h(Host, { key: '65d85e1f7f85876a76eec79addc4bd9f697a5d84', class: createColorClasses(this.color, {
                 [mode]: true,
                 'content-sizing': hostContext('ion-popover', this.el),
                 overscroll: forceOverscroll,
@@ -343,12 +344,12 @@ export class Content {
             }), style: {
                 '--offset-top': `${this.cTop}px`,
                 '--offset-bottom': `${this.cBottom}px`,
-            } }, h("div", { key: '8fa0969fbdf7f75c6a43c05892e3f98be4027e76', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), h("div", { key: '117503b489a2f07bc2a75e52f9d964c829bedd2c', class: {
+            } }, h("div", { key: 'e2ac474a62cbc864772c497469100436f41289ff', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), h(TagType, { key: '567a4bc2bcb13adfd987b088f95ac4b20b789f2c', class: {
                 'inner-scroll': true,
                 'scroll-x': scrollX,
                 'scroll-y': scrollY,
                 overscroll: (scrollX || scrollY) && forceOverscroll,
-            }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, h("slot", { key: '788b7798d8f53a577c18b3311dfaf4f6cb77e257' })), transitionShadow ? (h("div", { class: "transition-effect" }, h("div", { class: "transition-cover" }), h("div", { class: "transition-shadow" }))) : null, h("slot", { key: '55c6c5176938501df056e05cf976e0eafa4f2b5b', name: "fixed" })));
+            }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, h("slot", { key: '13909f87dd9f49bf1664ad95038499da376b9480' })), transitionShadow ? (h("div", { class: "transition-effect" }, h("div", { class: "transition-cover" }), h("div", { class: "transition-shadow" }))) : null, h("slot", { key: '05b56c139e203cfd1e3dd08054e99328e97e9243', name: "fixed" })));
     }
     static get is() { return "ion-content"; }
     static get encapsulation() { return "shadow"; }

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) {
@@ -186,11 +197,33 @@
     visibility: hidden;
     pointer-events: none;
   }
-  :host(.show-month-and-year) .calendar-next-prev,
-  :host(.show-month-and-year) .calendar-days-of-week,
-  :host(.show-month-and-year) .calendar-body,
-  :host(.show-month-and-year) .datetime-time {
-    inset-inline-start: -99999px;
+  @supports (inset-inline-start: 0) {
+    :host(.show-month-and-year) .calendar-next-prev,
+    :host(.show-month-and-year) .calendar-days-of-week,
+    :host(.show-month-and-year) .calendar-body,
+    :host(.show-month-and-year) .datetime-time {
+      inset-inline-start: -99999px;
+    }
+  }
+  @supports not (inset-inline-start: 0) {
+    :host(.show-month-and-year) .calendar-next-prev,
+    :host(.show-month-and-year) .calendar-days-of-week,
+    :host(.show-month-and-year) .calendar-body,
+    :host(.show-month-and-year) .datetime-time {
+      left: -99999px;
+    }
+    :host-context([dir=rtl]):host(.show-month-and-year) .calendar-next-prev, :host-context([dir=rtl]).show-month-and-year .calendar-next-prev, :host-context([dir=rtl]):host(.show-month-and-year) .calendar-days-of-week, :host-context([dir=rtl]).show-month-and-year .calendar-days-of-week, :host-context([dir=rtl]):host(.show-month-and-year) .calendar-body, :host-context([dir=rtl]).show-month-and-year .calendar-body, :host-context([dir=rtl]):host(.show-month-and-year) .datetime-time, :host-context([dir=rtl]).show-month-and-year .datetime-time {
+      left: unset;
+      right: unset;
+      right: -99999px;
+    }
+    @supports selector(:dir(rtl)) {
+      :host(.show-month-and-year:dir(rtl)) .calendar-next-prev, :host(.show-month-and-year:dir(rtl)) .calendar-days-of-week, :host(.show-month-and-year:dir(rtl)) .calendar-body, :host(.show-month-and-year:dir(rtl)) .datetime-time {
+        left: unset;
+        right: unset;
+        right: -99999px;
+      }
+    }
   }
 }
 /**
@@ -284,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 {
@@ -467,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);
 }
 
 /**
@@ -591,8 +576,8 @@ ion-picker {
  * }
  */
 :host {
-  --background: var(--ion-color-light, #f6f8fc);
-  --background-rgb: var(--ion-color-light-rgb, 246, 248, 252);
+  --background: var(--ion-color-light, #ffffff);
+  --background-rgb: var(--ion-color-light-rgb);
   --title-color: var(--ion-color-step-600, #666666);
 }
 
@@ -621,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);
 }
@@ -815,7 +784,6 @@ ion-picker {
 
 .calendar-day.calendar-day-active {
   background: rgba(var(--ion-color-base-rgb), 0.2);
-  font-size: min(1.375rem, 35.2px);
 }
 
 /**