voyager-ionic-core 7.6.1 → 7.6.5

package/dist/cjs/{ionic-global-a4edbf03.js → ionic-global-c70c3fb5.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-const index = require('./index-50dcfe2f.js');
+const index = require('./index-71f41461.js');
 
 // TODO(FW-2832): types
 class Config {

package/dist/cjs/ionic.cjs.js

@@ -5,12 +5,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-50dcfe2f.js');
-const appGlobals = require('./app-globals-7def22c8.js');
-require('./ionic-global-a4edbf03.js');
+const index = require('./index-71f41461.js');
+const appGlobals = require('./app-globals-07127773.js');
+require('./ionic-global-c70c3fb5.js');
 
 /*
- Stencil Client Patch Browser v4.8.2 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.10.0 | MIT Licensed | https://stenciljs.com
  */
 const patchBrowser = () => {
     const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('ionic.cjs.js', document.baseURI).href));

package/dist/cjs/{ios.transition-b5353f3e.js → ios.transition-9624a175.js}

@@ -4,10 +4,10 @@
 'use strict';
 
 const animation = require('./animation-9b401d39.js');
-const index = require('./index-17ab7794.js');
+const index = require('./index-6bb6b651.js');
 require('./index-c8d52405.js');
 require('./helpers-76bb7efb.js');
-require('./index-50dcfe2f.js');
+require('./index-71f41461.js');
 
 const DURATION = 540;
 // TODO(FW-2832): types

package/dist/cjs/loader.cjs.js

@@ -5,9 +5,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-50dcfe2f.js');
-const appGlobals = require('./app-globals-7def22c8.js');
-require('./ionic-global-a4edbf03.js');
+const index = require('./index-71f41461.js');
+const appGlobals = require('./app-globals-07127773.js');
+require('./ionic-global-c70c3fb5.js');
 
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return undefined;

package/dist/cjs/{md.transition-67157dd9.js → md.transition-786baf9a.js}

@@ -4,10 +4,10 @@
 'use strict';
 
 const animation = require('./animation-9b401d39.js');
-const index = require('./index-17ab7794.js');
+const index = require('./index-6bb6b651.js');
 require('./index-c8d52405.js');
 require('./helpers-76bb7efb.js');
-require('./index-50dcfe2f.js');
+require('./index-71f41461.js');
 
 const mdTransitionAnimation = (_, opts) => {
     var _a, _b, _c;

package/dist/cjs/{overlays-e77cc023.js → overlays-4c97edb0.js}

@@ -4,7 +4,7 @@
 'use strict';
 
 const index = require('./index-c8d52405.js');
-const ionicGlobal = require('./ionic-global-a4edbf03.js');
+const ionicGlobal = require('./ionic-global-c70c3fb5.js');
 const frameworkDelegate = require('./framework-delegate-1c29b14a.js');
 const hardwareBackButton = require('./hardware-back-button-76833cac.js');
 const helpers = require('./helpers-76bb7efb.js');
@@ -413,7 +413,7 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
      * from returning focus as a result.
      */
     if (overlay.el.tagName !== 'ION-TOAST') {
-        focusPreviousElementOnDismiss(overlay.el);
+        focusPreviousElementOnDismissIfNeeded(overlay.el);
     }
     /**
      * If the focused element is already
@@ -435,7 +435,7 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
  * to where they were before they
  * opened the overlay.
  */
-const focusPreviousElementOnDismiss = async (overlayEl) => {
+const focusPreviousElementOnDismissIfNeeded = async (overlayEl) => {
     let previousElement = document.activeElement;
     if (!previousElement) {
         return;
@@ -446,7 +446,16 @@ const focusPreviousElementOnDismiss = async (overlayEl) => {
         previousElement = shadowRoot.querySelector(focusableQueryString) || previousElement;
     }
     await overlayEl.onDidDismiss();
-    previousElement.focus();
+    /**
+     * If the user has already removed focus
+     * from the overlay (For example, focusing
+     * a text box after tapping a button in an
+     * action sheet) then don't restore focus
+     * to previous element
+     */
+    if (document.activeElement === null || document.activeElement === document.body) {
+        previousElement.focus();
+    }
 };
 const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnimation, opts) => {
     var _a, _b;

package/dist/cjs/{status-tap-b5d77c08.js → status-tap-66296dcb.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-const index = require('./index-50dcfe2f.js');
+const index = require('./index-71f41461.js');
 const index$1 = require('./index-da15e99c.js');
 const helpers = require('./helpers-76bb7efb.js');
 require('./index-5915f9b3.js');

package/dist/collection/collection-manifest.json

@@ -94,8 +94,8 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.8.2",
-    "typescriptVersion": "5.2.2"
+    "version": "4.10.0",
+    "typescriptVersion": "5.3.3"
   },
   "collections": [
     {

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

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

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

@@ -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": {

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/back-button/back-button.js

@@ -74,7 +74,7 @@ export class BackButton {
         const ariaLabel = inheritedAttributes['aria-label'] || backButtonText || 'back';
         return (h(Host, { onClick: this.onClick, class: createColorClasses(color, {
                 [mode]: true,
-                button: true,
+                button: true, // ion-buttons target .button
                 'back-button-disabled': disabled,
                 'back-button-has-icon-only': hasIconOnly,
                 'in-toolbar': hostContext('ion-toolbar', this.el),

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

@@ -806,9 +806,11 @@ ion-picker-column-internal {
 
 /**
  * Day that is selected and is today
- * should have white color.
+ * should have base background color
+ * with contrast text.
  */
 :host .calendar-day.calendar-day-today.calendar-day-active {
+  background: var(--ion-color-base);
   color: var(--ion-color-contrast);
 }
 

package/dist/collection/components/datetime/datetime.js

@@ -1946,7 +1946,7 @@ export class Datetime {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "A callback used to format the header text that shows how many\ndates are selected. Only used if there are 0 or more than 1\nselected (i.e. unused for exactly 1). By default, the header\ntext is set to \"numberOfDates days\"."
+                    "text": "A callback used to format the header text that shows how many\ndates are selected. Only used if there are 0 or more than 1\nselected (i.e. unused for exactly 1). By default, the header\ntext is set to \"numberOfDates days\".\n\nSee https://ionicframework.com/docs/troubleshooting/runtime#accessing-this\nif you need to access `this` from within the callback."
                 }
             },
             "multiple": {
@@ -2293,8 +2293,9 @@ export class Datetime {
                 "complexType": {
                     "signature": "(closeOverlay?: boolean) => Promise<void>",
                     "parameters": [{
-                            "tags": [],
-                            "text": ""
+                            "name": "closeOverlay",
+                            "type": "boolean",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {
@@ -2313,8 +2314,9 @@ export class Datetime {
                 "complexType": {
                     "signature": "(startDate?: string) => Promise<void>",
                     "parameters": [{
-                            "tags": [],
-                            "text": ""
+                            "name": "startDate",
+                            "type": "string | undefined",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {
@@ -2333,8 +2335,9 @@ export class Datetime {
                 "complexType": {
                     "signature": "(closeOverlay?: boolean) => Promise<void>",
                     "parameters": [{
-                            "tags": [],
-                            "text": ""
+                            "name": "closeOverlay",
+                            "type": "boolean",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {

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

@@ -325,6 +325,35 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         });
     });
 });
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+    test.describe(title('datetime: today button rendering'), () => {
+        test('should render today button correctly when selected', async ({ page }) => {
+            test.info().annotations.push({
+                type: 'issue',
+                description: 'FW-5808',
+            });
+            await page.setContent(`
+        <ion-datetime presentation="date" value="2022-01-02"></ion-datetime>
+
+        <script>
+          const mockToday = '2022-01-02T16:22';
+          Date = class extends Date {
+            constructor(...args) {
+              if (args.length === 0) {
+                super(mockToday)
+              } else {
+                super(...args);
+              }
+            }
+          }
+        </script>
+      `, config);
+            const datetime = page.locator('ion-datetime');
+            await page.waitForSelector('.datetime-ready');
+            await expect(datetime.locator('.calendar-day-today')).toHaveScreenshot(screenshot(`datetime-today-calendar-button`));
+        });
+    });
+});
 /**
  * The calendar day highlight does not render
  * on iOS and has the same behavior across directions.

package/dist/collection/components/datetime/test/highlighted-dates/datetime.e2e.js

@@ -15,7 +15,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
             await datetime.evaluate((el) => {
                 el.highlightedDates = [
                     {
-                        date: '2023-01-01',
+                        date: '2023-01-01', // ensure selected date style overrides highlight
                         textColor: '#800080',
                         backgroundColor: '#ffc0cb',
                     },

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

@@ -308,13 +308,13 @@
   visibility: visible;
 }
 
-:host(.has-focus) {
+:host(.has-focus.legacy-input) {
   pointer-events: none;
 }
 
-:host(.has-focus) input,
-:host(.has-focus) a,
-:host(.has-focus) button {
+:host(.has-focus.legacy-input) input,
+:host(.has-focus.legacy-input) a,
+:host(.has-focus.legacy-input) button {
   pointer-events: auto;
 }
 
@@ -666,10 +666,12 @@
 
 ::slotted([slot=start]) {
   margin-inline-end: 16px;
+  margin-inline-start: 0;
 }
 
 ::slotted([slot=end]) {
   margin-inline-start: 16px;
+  margin-inline-end: 0;
 }
 
 /**
@@ -810,4 +812,22 @@
 :host(.legacy-input) .native-input[disabled],
 :host(.input-disabled) {
   opacity: 0.3;
+}
+
+/**
+ * Slotted buttons have a lot of default padding that can
+ * cause them to look misaligned from other pieces such
+ * as the control's label, especially when using a clear
+ * fill. We also make them circular to ensure that non-
+ * clear buttons and the focus/hover state on clear ones
+ * don't look too crowded.
+ */
+::slotted(ion-button[slot=start].button-has-icon-only),
+::slotted(ion-button[slot=end].button-has-icon-only) {
+  --border-radius: 50%;
+  --padding-start: 0;
+  --padding-end: 0;
+  --padding-top: 0;
+  --padding-bottom: 0;
+  aspect-ratio: 1;
 }

package/dist/collection/components/input/input.js

@@ -677,7 +677,7 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "A callback used to format the counter text.\nBy default the counter text is set to \"itemLength / maxLength\"."
+                    "text": "A callback used to format the counter text.\nBy default the counter text is set to \"itemLength / maxLength\".\n\nSee https://ionicframework.com/docs/troubleshooting/runtime#accessing-this\nif you need to access `this` from within the callback."
                 }
             },
             "debounce": {

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

@@ -308,13 +308,13 @@
   visibility: visible;
 }
 
-:host(.has-focus) {
+:host(.has-focus.legacy-input) {
   pointer-events: none;
 }
 
-:host(.has-focus) input,
-:host(.has-focus) a,
-:host(.has-focus) button {
+:host(.has-focus.legacy-input) input,
+:host(.has-focus.legacy-input) a,
+:host(.has-focus.legacy-input) button {
   pointer-events: auto;
 }
 
@@ -666,10 +666,12 @@
 
 ::slotted([slot=start]) {
   margin-inline-end: 16px;
+  margin-inline-start: 0;
 }
 
 ::slotted([slot=end]) {
   margin-inline-start: 16px;
+  margin-inline-end: 0;
 }
 
 /**
@@ -1422,4 +1424,23 @@
 
 :host(.input-shape-round) {
   --border-radius: 16px;
+}
+
+/**
+ * Slotted buttons have a lot of default padding that can
+ * cause them to look misaligned from other pieces such
+ * as the control's label, especially when using a clear
+ * fill. We also make them circular to ensure that non-
+ * clear buttons and the focus/hover state on clear ones
+ * don't look too crowded.
+ */
+::slotted(ion-button[slot=start].button-has-icon-only),
+::slotted(ion-button[slot=end].button-has-icon-only) {
+  --border-radius: 50%;
+  --padding-start: 8px;
+  --padding-end: 8px;
+  --padding-top: 8px;
+  --padding-bottom: 8px;
+  aspect-ratio: 1;
+  min-height: 40px;
 }

package/dist/collection/components/input/test/slot/input.e2e.js

@@ -9,7 +9,9 @@ configs().forEach(({ title, screenshot, config }) => {
             await page.setContent(`
           <ion-input label-placement="start" fill="solid" value="100" label="Weight" clear-input="true">
             <ion-icon slot="start" name="barbell" aria-hidden="true"></ion-icon>
-            <ion-label slot="end">lbs</ion-label>
+            <ion-button slot="end" aria-label="Show/hide password">
+              <ion-icon slot="icon-only" name="lock-closed" aria-hidden="true"></ion-icon>
+            </ion-button>
           </ion-input>
         `, config);
             const input = page.locator('ion-input');
@@ -19,7 +21,9 @@ configs().forEach(({ title, screenshot, config }) => {
             await page.setContent(`
           <ion-input label-placement="floating" fill="solid" value="100" label="Weight" clear-input="true">
             <ion-icon slot="start" name="barbell" aria-hidden="true"></ion-icon>
-            <ion-label slot="end">lbs</ion-label>
+            <ion-button slot="end" aria-label="Show/hide password">
+              <ion-icon slot="icon-only" name="lock-closed" aria-hidden="true"></ion-icon>
+            </ion-button>
           </ion-input>
         `, config);
             const input = page.locator('ion-input');

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

@@ -418,6 +418,12 @@ button, a {
 ::slotted(ion-label:not([slot=end])) {
   flex: 1;
   width: min-content;
+  /**
+   * We allow labels in the default
+   * slot to grow. However, we do not
+   * want them to grow indefinitely.
+   */
+  max-width: 100%;
 }
 
 :host(.item-input) {

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

@@ -418,6 +418,12 @@ button, a {
 ::slotted(ion-label:not([slot=end])) {
   flex: 1;
   width: min-content;
+  /**
+   * We allow labels in the default
+   * slot to grow. However, we do not
+   * want them to grow indefinitely.
+   */
+  max-width: 100%;
 }
 
 :host(.item-input) {

package/dist/collection/components/item-sliding/item-sliding.js

@@ -491,11 +491,9 @@ export class ItemSliding {
                 "complexType": {
                     "signature": "(side: Side | undefined) => Promise<void>",
                     "parameters": [{
-                            "tags": [{
-                                    "name": "param",
-                                    "text": "side The side of the options to open. If a side is not provided, it will open the first set of options it finds within the item."
-                                }],
-                            "text": "The side of the options to open. If a side is not provided, it will open the first set of options it finds within the item."
+                            "name": "side",
+                            "type": "Side | undefined",
+                            "docs": "The side of the options to open. If a side is not provided, it will open the first set of options it finds within the item."
                         }],
                     "references": {
                         "Promise": {