voyager-ionic-core 7.6.3 → 7.7.0

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

@@ -232,25 +232,9 @@ ion-list.list-inset {
   border-radius: 2px;
 }
 
-/**
- * These selectors ensure the first item in the list
- * has the correct radius.
- * We need to consider the following scenarios:
- 1. The first item in a list as long as it is not the only item.
- 2. The item in the first item-sliding in a list.
- * Note that we do not select "ion-item-sliding ion-item:first-of-type"
- * because that will cause the borders to disappear on
- * items in an item-sliding when the item is the first
- * element in the item-sliding container.
- */
-.list-md.list-inset ion-item:not(:only-of-type):first-of-type,
-.list-md.list-inset ion-item-sliding:first-of-type ion-item {
-  --border-radius: 2px 2px 0 0;
-}
-
 /**
  * These selectors ensure the last item in the list
- * has the correct radius and border.
+ * has the correct border.
  * We need to consider the following scenarios:
  1. The last item in a list as long as it is not the only item.
  2. The item in the last item-sliding in a list.
@@ -261,21 +245,17 @@ ion-list.list-inset {
  */
 .list-md.list-inset ion-item:not(:only-of-type):last-of-type,
 .list-md.list-inset ion-item-sliding:last-of-type ion-item {
-  --border-radius: 0 0 2px 2px;
   --border-width: 0;
   --inner-border-width: 0;
 }
 
 /**
- * The only item in a list should have a border radius
- * on all corners.
  * We target :only-child instead of :only-of-type
  * otherwise borders will disappear on items inside of
  * ion-item-sliding because the item will be the only
  * one of its type inside of the ion-item-sliding group.
  */
 .list-md.list-inset ion-item:only-child {
-  --border-radius: 2px;
   --border-width: 0;
   --inner-border-width: 0;
 }

package/dist/collection/components/list-header/list-header.js

@@ -15,10 +15,10 @@ export class ListHeader {
     render() {
         const { lines } = this;
         const mode = getIonMode(this);
-        return (h(Host, { class: createColorClasses(this.color, {
+        return (h(Host, { key: '1b832a6882307d40fe4afc9a95a5db4fbdff60a3', class: createColorClasses(this.color, {
                 [mode]: true,
                 [`list-header-lines-${lines}`]: lines !== undefined,
-            }) }, h("div", { class: "list-header-inner" }, h("slot", null))));
+            }) }, h("div", { key: 'a53a3f05727b510d1b912c10c92a4aa58f4fe860', class: "list-header-inner" }, h("slot", { key: '9377dee83f050b2cb2c5b7c5d106668cc81d8f90' }))));
     }
     static get is() { return "ion-list-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/loading/loading.js

@@ -154,9 +154,9 @@ export class Loading {
          * Otherwise, don't set aria-labelledby.
          */
         const ariaLabelledBy = message !== undefined ? msgId : null;
-        return (h(Host, Object.assign({ role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '81295894ca6e047124918420f2483c092ebf91b9', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${40000 + this.overlayIndex}`,
-            }, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), h("ion-backdrop", { visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { tabindex: "0" }), h("div", { class: "loading-wrapper ion-overlay-wrapper" }, spinner && (h("div", { class: "loading-spinner" }, h("ion-spinner", { name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), h("div", { tabindex: "0" })));
+            }, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), h("ion-backdrop", { key: 'db9fbd946cf3eb03c3a70f2e71c49ab233df1879', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: 'd27b03de0b450c0668d4b4077d76bc5b283f03cf', tabindex: "0" }), h("div", { key: '7112719ddd487365c1e36fc4dec32aac888dbb52', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (h("div", { class: "loading-spinner" }, h("ion-spinner", { name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), h("div", { key: '5715dd7dae209ae58e5557cb60f3ae514752b822', tabindex: "0" })));
     }
     static get is() { return "ion-loading"; }
     static get encapsulation() { return "scoped"; }
@@ -674,17 +674,13 @@ export class Loading {
                 "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 loading.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the loading.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
-                                }],
-                            "text": "The role of the element that is dismissing the loading.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the loading.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+                            "name": "role",
+                            "type": "string | undefined",
+                            "docs": "The role of the element that is dismissing the loading.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the loading.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
                         }],
                     "references": {
                         "Promise": {

package/dist/collection/components/menu/menu.js

@@ -4,6 +4,7 @@
 import { Build, Host, h } from "@stencil/core";
 import { getTimeGivenProgression } from "../../utils/animation/cubic-bezier";
 import { GESTURE_CONTROLLER } from "../../utils/gesture/index";
+import { shoudUseCloseWatcher } from "../../utils/hardware-back-button";
 import { inheritAriaAttributes, assert, clamp, isEndSide as isEnd } from "../../utils/helpers";
 import { menuController } from "../../utils/menu-controller/index";
 import { getPresentedOverlay } from "../../utils/overlays";
@@ -595,13 +596,18 @@ export class Menu {
     render() {
         const { type, disabled, isPaneVisible, inheritedAttributes, side } = this;
         const mode = getIonMode(this);
-        return (h(Host, { role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
+        /**
+         * If the Close Watcher is enabled then
+         * the ionBackButton listener in the menu controller
+         * will handle closing the menu when Escape is pressed.
+         */
+        return (h(Host, { key: 'be7145625a30951e5cc26646f6121ee4fa4c910f', onKeyDown: shoudUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
                 [mode]: true,
                 [`menu-type-${type}`]: true,
                 'menu-enabled': !disabled,
                 [`menu-side-${side}`]: true,
                 'menu-pane-visible': isPaneVisible,
-            } }, h("div", { class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", null)), h("ion-backdrop", { ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
+            } }, h("div", { key: 'ecd6e0641ed67691db270190801f7be365a2d121', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", { key: 'aea3780e259f2b3ea84697a509bb7f13fa9531e9' })), h("ion-backdrop", { key: 'be3253506a34c4c00eb1814621c674196b72db46', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
     }
     static get is() { return "ion-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -883,8 +889,9 @@ export class Menu {
                 "complexType": {
                     "signature": "(animated?: boolean) => Promise<boolean>",
                     "parameters": [{
-                            "tags": [],
-                            "text": ""
+                            "name": "animated",
+                            "type": "boolean",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {
@@ -903,8 +910,9 @@ export class Menu {
                 "complexType": {
                     "signature": "(animated?: boolean) => Promise<boolean>",
                     "parameters": [{
-                            "tags": [],
-                            "text": ""
+                            "name": "animated",
+                            "type": "boolean",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {
@@ -923,8 +931,9 @@ export class Menu {
                 "complexType": {
                     "signature": "(animated?: boolean) => Promise<boolean>",
                     "parameters": [{
-                            "tags": [],
-                            "text": ""
+                            "name": "animated",
+                            "type": "boolean",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {
@@ -943,11 +952,13 @@ export class Menu {
                 "complexType": {
                     "signature": "(shouldOpen: boolean, animated?: boolean) => Promise<boolean>",
                     "parameters": [{
-                            "tags": [],
-                            "text": ""
+                            "name": "shouldOpen",
+                            "type": "boolean",
+                            "docs": ""
                         }, {
-                            "tags": [],
-                            "text": ""
+                            "name": "animated",
+                            "type": "boolean",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {
@@ -993,12 +1004,6 @@ export class Menu {
                 "target": undefined,
                 "capture": true,
                 "passive": false
-            }, {
-                "name": "keydown",
-                "method": "onKeydown",
-                "target": undefined,
-                "capture": false,
-                "passive": false
             }];
     }
 }

package/dist/collection/components/menu-button/menu-button.js

@@ -46,16 +46,16 @@ export class MenuButton {
             type: this.type,
         };
         const ariaLabel = inheritedAttributes['aria-label'] || 'menu';
-        return (h(Host, { onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: '2fd7130b8d28695162f7efebbd2131e5e9e4f330', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, class: createColorClasses(color, {
                 [mode]: true,
-                button: true,
+                button: true, // ion-buttons target .button
                 'menu-button-hidden': hidden,
                 'menu-button-disabled': disabled,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'ion-activatable': true,
                 'ion-focusable': true,
-            }) }, h("button", Object.assign({}, attrs, { disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }), h("span", { class: "button-inner" }, h("slot", null, h("ion-icon", { part: "icon", icon: menuIcon, mode: mode, lazy: false, "aria-hidden": "true" }))), mode === 'md' && h("ion-ripple-effect", { type: "unbounded" }))));
+            }) }, h("button", Object.assign({ key: 'fa6b1fb9291df812b04065b4b0ebdfd28e5217eb' }, attrs, { disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }), h("span", { key: '88106a08070ebff7457c581301efe649829aded2', class: "button-inner" }, h("slot", { key: 'e3edfb89e5705b2c08c66f3d3452457667de3657' }, h("ion-icon", { key: '24678e9c3bb2f1f3db113a2ae0ec93e407a7de0c', part: "icon", icon: menuIcon, mode: mode, lazy: false, "aria-hidden": "true" }))), mode === 'md' && h("ion-ripple-effect", { type: "unbounded" }))));
     }
     static get is() { return "ion-menu-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/menu-toggle/menu-toggle.js

@@ -26,10 +26,10 @@ export class MenuToggle {
     render() {
         const mode = getIonMode(this);
         const hidden = this.autoHide && !this.visible;
-        return (h(Host, { onClick: this.onClick, "aria-hidden": hidden ? 'true' : null, class: {
+        return (h(Host, { key: '5b75baade530bf9e7ed9165a5db3e513975e22f2', onClick: this.onClick, "aria-hidden": hidden ? 'true' : null, class: {
                 [mode]: true,
                 'menu-toggle-hidden': hidden,
-            } }, h("slot", null)));
+            } }, h("slot", { key: '65dea458274b685125c22af54aa153cf4977113c' })));
     }
     static get is() { return "ion-menu-toggle"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/modal/modal.js

@@ -528,19 +528,18 @@ export class Modal {
         const mode = getIonMode(this);
         const isCardModal = presentingElement !== undefined && mode === 'ios';
         const isHandleCycle = handleBehavior === 'cycle';
-        return (h(Host, Object.assign({ "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '8c163f4f59429227cab3a1cafb5612994939a629', "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle }), h("ion-backdrop", { ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { class: "modal-shadow" }), h("div", Object.assign({
+            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle }), h("ion-backdrop", { key: '6908bdf9462d940eff6607b626a499eedc66dc9c', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { class: "modal-shadow" }), h("div", Object.assign({ key: 'ac224394e19b9e8c7dd902f2836fa25787663455',
             /*
               role and aria-modal must be used on the
               same element. They must also be set inside the
               shadow DOM otherwise ion-button will not be highlighted
               when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
             */
-            role: "dialog"
-        }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { class: "modal-handle",
+            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { class: "modal-handle",
             // Prevents the handle from receiving keyboard focus when it does not cycle
-            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle" })), h("slot", null))));
+            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle" })), h("slot", { key: '9c3c5ec797b6415110a3275c6ff33277291a6e21' }))));
     }
     static get is() { return "ion-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -1229,17 +1228,13 @@ export class Modal {
                 "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 modal. For example, 'cancel' or 'backdrop'."
-                                }],
-                            "text": "The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'."
+                            "name": "role",
+                            "type": "string | undefined",
+                            "docs": "The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'."
                         }],
                     "references": {
                         "Promise": {
@@ -1320,8 +1315,9 @@ export class Modal {
                 "complexType": {
                     "signature": "(breakpoint: number) => Promise<void>",
                     "parameters": [{
-                            "tags": [],
-                            "text": ""
+                            "name": "breakpoint",
+                            "type": "number",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {

package/dist/collection/components/modal/test/sheet/modal.e2e.js

@@ -40,7 +40,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
             const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
             await page.click('#backdrop-inactive');
             await ionModalDidPresent.next();
-            const input = page.locator('#root-input input').first();
+            const input = page.locator('#root-input').first();
             await input.click();
             await expect(input).toBeFocused();
         });

package/dist/collection/components/modal/test/standalone/modal.e2e.js

@@ -13,7 +13,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
             const modal = page.locator('ion-modal');
             await modal.evaluate((el) => el.dismiss());
             await ionModalDidDismiss.next();
-            await page.waitForSelector('ion-modal', { state: 'detached' });
+            await page.locator('ion-modal').waitFor({ state: 'detached' });
         });
     });
 });