@ionic/core 7.6.2-dev.11702957417.1622fcc0 → 7.6.2-dev.11704390532.1202188d

package/dist/collection/collection-manifest.json

@@ -24,8 +24,8 @@
     "components/col/col.js",
     "components/content/content.js",
     "components/datetime/datetime.js",
-    "components/picker-column-internal/picker-column-internal.js",
-    "components/picker-internal/picker-internal.js",
+    "components/picker-column/picker-column.js",
+    "components/picker/picker.js",
     "components/datetime-button/datetime-button.js",
     "components/fab/fab.js",
     "components/fab-button/fab-button.js",
@@ -55,8 +55,9 @@
     "components/nav/nav.js",
     "components/nav-link/nav-link.js",
     "components/note/note.js",
-    "components/picker/picker.js",
-    "components/picker-column/picker-column.js",
+    "components/picker-column-option/picker-column-option.js",
+    "components/picker-legacy/picker.js",
+    "components/picker-legacy-column/picker-column.js",
     "components/popover/popover.js",
     "components/progress-bar/progress-bar.js",
     "components/range/range.js",
@@ -94,7 +95,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.9.0",
+    "version": "4.8.2",
     "typescriptVersion": "5.2.2"
   },
   "collections": [
@@ -287,8 +288,8 @@
     {
       "components": [
         "ion-datetime",
-        "ion-picker",
-        "ion-picker-column"
+        "ion-picker-legacy",
+        "ion-picker-legacy-column"
       ]
     },
     {

package/dist/collection/components/accordion-group/accordion-group.js

@@ -382,13 +382,11 @@ export class AccordionGroup {
                 "complexType": {
                     "signature": "(accordionValue: string | undefined, accordionExpand: boolean) => Promise<void>",
                     "parameters": [{
-                            "name": "accordionValue",
-                            "type": "string | undefined",
-                            "docs": ""
+                            "tags": [],
+                            "text": ""
                         }, {
-                            "name": "accordionExpand",
-                            "type": "boolean",
-                            "docs": ""
+                            "tags": [],
+                            "text": ""
                         }],
                     "references": {
                         "Promise": {

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

@@ -684,13 +684,17 @@ export class ActionSheet {
                 "complexType": {
                     "signature": "(data?: any, role?: string) => Promise<boolean>",
                     "parameters": [{
-                            "name": "data",
-                            "type": "any",
-                            "docs": "Any data to emit in the dismiss events."
+                            "tags": [{
+                                    "name": "param",
+                                    "text": "data Any data to emit in the dismiss events."
+                                }],
+                            "text": "Any data to emit in the dismiss events."
                         }, {
-                            "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\"`."
+                            "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\"`."
                         }],
                     "references": {
                         "Promise": {

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

@@ -926,13 +926,17 @@ export class Alert {
                 "complexType": {
                     "signature": "(data?: any, role?: string) => Promise<boolean>",
                     "parameters": [{
-                            "name": "data",
-                            "type": "any",
-                            "docs": "Any data to emit in the dismiss events."
+                            "tags": [{
+                                    "name": "param",
+                                    "text": "data Any data to emit in the dismiss events."
+                                }],
+                            "text": "Any data to emit in the dismiss events."
                         }, {
-                            "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\"`."
+                            "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\"`."
                         }],
                     "references": {
                         "Promise": {

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

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

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

@@ -2,25 +2,13 @@
  * (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: nowrap;
+  white-space: normal;
   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: nowrap;
+  white-space: normal;
   user-select: none;
   vertical-align: top;
   vertical-align: -webkit-baseline-middle;

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

@@ -6,33 +6,29 @@ 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 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-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>
       `, 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 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>
+        <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>
       `, 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 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>
+        <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>
       `, 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 class="ion-text-wrap">
+        <ion-button>
           <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>
@@ -42,17 +38,15 @@ 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 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>
+        <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>
       `, 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 class="ion-text-wrap" expand="block">
+        <ion-button 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>
@@ -62,17 +56,15 @@ 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 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>
+        <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>
       `, 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 class="ion-text-wrap" expand="full">
+        <ion-button 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>
@@ -82,10 +74,9 @@ 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 class="ion-text-wrap" slot="end">
+          <ion-button 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>
@@ -94,10 +85,9 @@ 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 class="ion-text-wrap" slot="end">
+          <ion-button 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>
@@ -108,11 +98,10 @@ 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 class="ion-text-wrap">
+          <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-list-header>
@@ -121,11 +110,10 @@ 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 class="ion-text-wrap">
+            <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-buttons>

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

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

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

@@ -61,6 +61,8 @@
    *
    * @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`.
@@ -71,19 +73,6 @@
   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;
@@ -94,7 +83,7 @@ ion-picker-column-internal {
 }
 
 /**
- * This ensures that the picker is apppropriately
+ * This ensures that the picker is appropriately
  * sized and never truncates the text.
  */
 :host(.datetime-size-fixed.datetime-prefer-wheel) {
@@ -317,24 +306,8 @@ ion-picker-column-internal {
   justify-content: space-between;
 }
 
-:host .calendar-action-buttons ion-item,
 :host .calendar-action-buttons ion-button {
-  --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;
+  --background: transparent;
 }
 
 :host .calendar-days-of-week {
@@ -516,8 +489,72 @@ ion-picker-column-internal {
   position: static;
 }
 
-:host(.show-month-and-year) .calendar-action-buttons ion-item {
-  --color: var(--ion-color-base);
+: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);
 }
 
 /**
@@ -606,15 +643,31 @@ ion-picker-column-internal {
   margin-top: 10px;
 }
 
-:host .calendar-action-buttons ion-item {
-  --padding-start: 16px;
-  --background-hover: transparent;
-  --background-activated: transparent;
+.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;
   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 ion-item ion-icon,
+:host .calendar-action-buttons .calendar-month-year-toggle ion-icon,
 :host .calendar-action-buttons ion-buttons ion-button {
   color: var(--ion-color-base);
 }