voyager-ionic-core 8.6.1 → 8.7.2

package/dist/collection/components/range/range.js

@@ -174,6 +174,45 @@ export class Range {
                 this.ionFocus.emit();
             }
         };
+        this.onKnobFocus = (knob) => {
+            if (!this.hasFocus) {
+                this.hasFocus = true;
+                this.ionFocus.emit();
+            }
+            // Manually manage ion-focused class for dual knobs
+            if (this.dualKnobs && this.el.shadowRoot) {
+                const knobA = this.el.shadowRoot.querySelector('.range-knob-a');
+                const knobB = this.el.shadowRoot.querySelector('.range-knob-b');
+                // Remove ion-focused from both knobs first
+                knobA === null || knobA === void 0 ? void 0 : knobA.classList.remove('ion-focused');
+                knobB === null || knobB === void 0 ? void 0 : knobB.classList.remove('ion-focused');
+                // Add ion-focused only to the focused knob
+                const focusedKnobEl = knob === 'A' ? knobA : knobB;
+                focusedKnobEl === null || focusedKnobEl === void 0 ? void 0 : focusedKnobEl.classList.add('ion-focused');
+            }
+        };
+        this.onKnobBlur = () => {
+            // Check if focus is moving to another knob within the same range
+            // by delaying the reset to allow the new focus to register
+            setTimeout(() => {
+                var _a;
+                const activeElement = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement;
+                const isStillFocusedOnKnob = activeElement && activeElement.classList.contains('range-knob-handle');
+                if (!isStillFocusedOnKnob) {
+                    if (this.hasFocus) {
+                        this.hasFocus = false;
+                        this.ionBlur.emit();
+                    }
+                    // Remove ion-focused from both knobs when focus leaves the range
+                    if (this.dualKnobs && this.el.shadowRoot) {
+                        const knobA = this.el.shadowRoot.querySelector('.range-knob-a');
+                        const knobB = this.el.shadowRoot.querySelector('.range-knob-b');
+                        knobA === null || knobA === void 0 ? void 0 : knobA.classList.remove('ion-focused');
+                        knobB === null || knobB === void 0 ? void 0 : knobB.classList.remove('ion-focused');
+                    }
+                }
+            }, 0);
+        };
     }
     debounceChanged() {
         const { ionInput, debounce, originalIonInput } = this;
@@ -606,6 +645,8 @@ export class Range {
             min,
             max,
             inheritedAttributes,
+            onKnobFocus: this.onKnobFocus,
+            onKnobBlur: this.onKnobBlur,
         }), this.dualKnobs &&
             renderKnob(rtl, {
                 knob: 'B',
@@ -619,6 +660,8 @@ export class Range {
                 min,
                 max,
                 inheritedAttributes,
+                onKnobFocus: this.onKnobFocus,
+                onKnobBlur: this.onKnobBlur,
             })));
     }
     render() {
@@ -638,7 +681,7 @@ export class Range {
         const needsEndAdjustment = inItem && !hasEndContent;
         const mode = getIonMode(this);
         renderHiddenInput(true, el, this.name, JSON.stringify(this.getValue()), disabled);
-        return (h(Host, { key: '124909954930d95f353e8593fd967de1486b0315', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses(this.color, {
+        return (h(Host, { key: 'ef7b01f80515bcaeb2983934ad7f10a6bd5d13ec', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'range-disabled': disabled,
@@ -647,10 +690,10 @@ export class Range {
                 [`range-label-placement-${labelPlacement}`]: true,
                 'range-item-start-adjustment': needsStartAdjustment,
                 'range-item-end-adjustment': needsEndAdjustment,
-            }) }, h("label", { key: '0af177a2ba5869d3441c4b3f393835218807a418', class: "range-wrapper", id: "range-label" }, h("div", { key: '4d834224b9c834e88497f58af4339348cec9ca1c', class: {
+            }) }, h("label", { key: 'fd8aa90a9d52be9da024b907e68858dae424449d', class: "range-wrapper", id: "range-label" }, h("div", { key: '2172b4f329c22017dd23475c80aac25ba6e753eb', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label" }, label !== undefined ? h("div", { class: "label-text" }, label) : h("slot", { name: "label" })), h("div", { key: '797d39ac73610f6d81d0b99d71982f98f2a66c88', class: "native-wrapper" }, h("slot", { key: '88824589cac5bb2134c30bed067ed11f6e81d887', name: "start" }), this.renderRangeSlider(), h("slot", { key: '7207a1164b272f56634435f7bff9114fb5d9f085', name: "end" })))));
+            }, part: "label" }, label !== undefined ? h("div", { class: "label-text" }, label) : h("slot", { name: "label" })), h("div", { key: '3c318bf2ea0576646d4c010bf44573fd0f483186', class: "native-wrapper" }, h("slot", { key: '6586fd6fc96271e73f8a86c202d1913ad1a26f96', name: "start" }), this.renderRangeSlider(), h("slot", { key: '74ac0bc2d2cb66ef708bb729f88b6ecbc1b2155d', name: "end" })))));
     }
     static get is() { return "ion-range"; }
     static get encapsulation() { return "shadow"; }
@@ -1153,7 +1196,7 @@ export class Range {
             }];
     }
 }
-const renderKnob = (rtl, { knob, value, ratio, min, max, disabled, pressed, pin, handleKeyboard, pinFormatter, inheritedAttributes }) => {
+const renderKnob = (rtl, { knob, value, ratio, min, max, disabled, pressed, pin, handleKeyboard, pinFormatter, inheritedAttributes, onKnobFocus, onKnobBlur, }) => {
     const start = rtl ? 'right' : 'left';
     const knobStyle = () => {
         const style = {};
@@ -1174,7 +1217,7 @@ const renderKnob = (rtl, { knob, value, ratio, min, max, disabled, pressed, pin,
                 ev.preventDefault();
                 ev.stopPropagation();
             }
-        }, class: {
+        }, onFocus: () => onKnobFocus(knob), onBlur: onKnobBlur, class: {
             'range-knob-handle': true,
             'range-knob-a': knob === 'A',
             'range-knob-b': knob === 'B',

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

@@ -53,7 +53,7 @@ export class ReorderGroup {
         }
     }
     /**
-     * Completes the reorder operation. Must be called by the `ionItemReorder` event.
+     * Completes the reorder operation. Must be called by the `ionReorderEnd` event.
      *
      * If a list of items is passed, the list will be reordered and returned in the
      * proper order.
@@ -90,7 +90,7 @@ export class ReorderGroup {
         const heights = this.cachedHeights;
         heights.length = 0;
         const el = this.el;
-        const children = el.children;
+        const children = el.__children || el.children;
         if (!children || children.length === 0) {
             return;
         }
@@ -120,6 +120,7 @@ export class ReorderGroup {
         this.state = 1 /* ReorderGroupState.Active */;
         item.classList.add(ITEM_REORDER_SELECTED);
         hapticSelectionStart();
+        this.ionReorderStart.emit();
     }
     onMove(ev) {
         const selectedItem = this.selectedItemEl;
@@ -134,6 +135,7 @@ export class ReorderGroup {
         const currentY = Math.max(top, Math.min(ev.currentY, bottom));
         const deltaY = scroll + currentY - ev.startY;
         const normalizedY = currentY - top;
+        const fromIndex = this.lastToIndex;
         const toIndex = this.itemIndexForTop(normalizedY);
         if (toIndex !== this.lastToIndex) {
             const fromIndex = indexForItem(selectedItem);
@@ -143,6 +145,10 @@ export class ReorderGroup {
         }
         // Update selected item position
         selectedItem.style.transform = `translateY(${deltaY}px)`;
+        this.ionReorderMove.emit({
+            from: fromIndex,
+            to: toIndex,
+        });
     }
     onEnd() {
         const selectedItemEl = this.selectedItemEl;
@@ -157,6 +163,7 @@ export class ReorderGroup {
             this.completeReorder();
         }
         else {
+            // TODO(FW-6590): Remove this once the deprecated event is removed
             this.ionItemReorder.emit({
                 from: fromIndex,
                 to: toIndex,
@@ -164,11 +171,16 @@ export class ReorderGroup {
             });
         }
         hapticSelectionEnd();
+        this.ionReorderEnd.emit({
+            from: fromIndex,
+            to: toIndex,
+            complete: this.completeReorder.bind(this),
+        });
     }
     completeReorder(listOrReorder) {
         const selectedItemEl = this.selectedItemEl;
         if (selectedItemEl && this.state === 2 /* ReorderGroupState.Complete */) {
-            const children = this.el.children;
+            const children = this.el.__children || this.el.children;
             const len = children.length;
             const toIndex = this.lastToIndex;
             const fromIndex = indexForItem(selectedItemEl);
@@ -210,7 +222,7 @@ export class ReorderGroup {
     /********* DOM WRITE ********* */
     reorderMove(fromIndex, toIndex) {
         const itemHeight = this.selectedItemHeight;
-        const children = this.el.children;
+        const children = this.el.__children || this.el.children;
         for (let i = 0; i < children.length; i++) {
             const style = children[i].style;
             let value = '';
@@ -241,7 +253,7 @@ export class ReorderGroup {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'f30613b361c5c3095b7928a92fb4b1e8d6eff600', class: {
+        return (h(Host, { key: 'b9641f3061d67fbfe68317b901ec33267046e073', class: {
                 [mode]: true,
                 'reorder-enabled': !this.disabled,
                 'reorder-list-active': this.state !== 0 /* ReorderGroupState.Idle */,
@@ -295,8 +307,11 @@ export class ReorderGroup {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Event that needs to be listened to in order to complete the reorder action.\nOnce the event has been emitted, the `complete()` method then needs\nto be called in order to finalize the reorder action."
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use `ionReorderEnd` instead. If you are accessing\n`event.detail.from` or `event.detail.to` and relying on them\nbeing different you should now add checks as they are always emitted\nin `ionReorderEnd`, even when they are the same."
+                        }],
+                    "text": "Event that needs to be listened to in order to complete the reorder action."
                 },
                 "complexType": {
                     "original": "ItemReorderEventDetail",
@@ -309,6 +324,63 @@ export class ReorderGroup {
                         }
                     }
                 }
+            }, {
+                "method": "ionReorderStart",
+                "name": "ionReorderStart",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event that is emitted when the reorder gesture starts."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "ionReorderMove",
+                "name": "ionReorderMove",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event that is emitted as the reorder gesture moves."
+                },
+                "complexType": {
+                    "original": "ReorderMoveEventDetail",
+                    "resolved": "ReorderMoveEventDetail",
+                    "references": {
+                        "ReorderMoveEventDetail": {
+                            "location": "import",
+                            "path": "./reorder-group-interface",
+                            "id": "src/components/reorder-group/reorder-group-interface.ts::ReorderMoveEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "ionReorderEnd",
+                "name": "ionReorderEnd",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event that is emitted when the reorder gesture ends.\nThe from and to properties are always available, regardless of\nif the reorder gesture moved the item. If the item did not change\nfrom its start position, the from and to properties will be the same.\nOnce the event has been emitted, the `complete()` method then needs\nto be called in order to finalize the reorder action."
+                },
+                "complexType": {
+                    "original": "ReorderEndEventDetail",
+                    "resolved": "ReorderEndEventDetail",
+                    "references": {
+                        "ReorderEndEventDetail": {
+                            "location": "import",
+                            "path": "./reorder-group-interface",
+                            "id": "src/components/reorder-group/reorder-group-interface.ts::ReorderEndEventDetail"
+                        }
+                    }
+                }
             }];
     }
     static get methods() {
@@ -330,7 +402,7 @@ export class ReorderGroup {
                     "return": "Promise<any>"
                 },
                 "docs": {
-                    "text": "Completes the reorder operation. Must be called by the `ionItemReorder` event.\n\nIf a list of items is passed, the list will be reordered and returned in the\nproper order.\n\nIf no parameters are passed or if `true` is passed in, the reorder will complete\nand the item will remain in the position it was dragged to. If `false` is passed,\nthe reorder will complete and the item will bounce back to its original position.",
+                    "text": "Completes the reorder operation. Must be called by the `ionReorderEnd` event.\n\nIf a list of items is passed, the list will be reordered and returned in the\nproper order.\n\nIf no parameters are passed or if `true` is passed in, the reorder will complete\nand the item will remain in the position it was dragged to. If `false` is passed,\nthe reorder will complete and the item will bounce back to its original position.",
                     "tags": [{
                             "name": "param",
                             "text": "listOrReorder A list of items to be sorted and returned in the new order or a\nboolean of whether or not the reorder should reposition the item."

package/dist/collection/components/router/router.js

@@ -90,6 +90,7 @@ export class Router {
      *
      * @param path The path to navigate to.
      * @param direction The direction of the animation. Defaults to `"forward"`.
+     * @param animation A custom animation to use for the transition.
      */
     async push(path, direction = 'forward', animation) {
         var _a;
@@ -411,7 +412,7 @@ export class Router {
                         }, {
                             "name": "animation",
                             "type": "AnimationBuilder | undefined",
-                            "docs": ""
+                            "docs": "A custom animation to use for the transition."
                         }],
                     "references": {
                         "Promise": {
@@ -439,6 +440,9 @@ export class Router {
                         }, {
                             "name": "param",
                             "text": "direction The direction of the animation. Defaults to `\"forward\"`."
+                        }, {
+                            "name": "param",
+                            "text": "animation A custom animation to use for the transition."
                         }]
                 }
             },

package/dist/collection/components/searchbar/searchbar.js

@@ -247,10 +247,8 @@ export class Searchbar {
     /**
      * Sets focus on the native `input` in `ion-searchbar`. Use this method instead of the global
      * `input.focus()`.
-     *
      * Developers who wish to focus an input when a page enters
      * should call `setFocus()` in the `ionViewDidEnter()` lifecycle method.
-     *
      * Developers who wish to focus an input when an overlay is presented
      * should call `setFocus` after `didPresent` has resolved.
      *
@@ -429,8 +427,8 @@ export class Searchbar {
         const clearIcon = this.clearIcon || (mode === 'ios' ? closeCircle : closeSharp);
         const searchIcon = this.searchIcon || (mode === 'ios' ? searchOutline : searchSharp);
         const shouldShowCancelButton = this.shouldShowCancelButton();
-        const cancelButton = this.showCancelButton !== 'never' && (h("button", { key: '5835c36fcb0b52aec956538202a783f6c194d853', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: mode === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, h("div", { key: '85df41676bed611467bd4df0002b08baee4f539c', "aria-hidden": "true" }, mode === 'md' ? (h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
-        return (h(Host, { key: 'e1e30cdd79f9f54d5f2d27501012358bc46880e5', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
+        const cancelButton = this.showCancelButton !== 'never' && (h("button", { key: '19e18775856db87daeb4b9e3d7bca0461915a0df', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: mode === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, h("div", { key: 'b3bbdcc033f3bd3441d619e4a252cef0dad4d07e', "aria-hidden": "true" }, mode === 'md' ? (h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
+        return (h(Host, { key: '074aa60e051bfb3225e87d44bbb6346c59c73574', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
                 [mode]: true,
                 'searchbar-animated': animated,
                 'searchbar-disabled': this.disabled,
@@ -440,14 +438,14 @@ export class Searchbar {
                 'searchbar-has-focus': this.focused,
                 'searchbar-should-show-clear': this.shouldShowClearButton(),
                 'searchbar-should-show-cancel': this.shouldShowCancelButton(),
-            }) }, h("div", { key: '7e9db147282a35bb1e3c9c6125b9a044e81ddde5', class: "searchbar-input-container" }, h("input", Object.assign({ key: '02f08da21326b78d6cd249d54deab96fd8472ba8', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: autocapitalize === 'default' ? undefined : autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }, this.inheritedAttributes)), mode === 'md' && cancelButton, h("ion-icon", { key: '048b00348456bd827ae734491c46a67bfb146227', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), h("button", { key: '71f64339bbfd54ebd26a0946c8ee9d726cd89c04', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
+            }) }, h("div", { key: '54f58a79fe36e85d9295157303f1be89c98bbdaf', class: "searchbar-input-container" }, h("input", Object.assign({ key: 'f991a37fcf54d26b7ad10d89084764e03d97b9de', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: autocapitalize === 'default' ? undefined : autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }, this.inheritedAttributes)), mode === 'md' && cancelButton, h("ion-icon", { key: '8b44dd90a3292c5cf872ef16a8520675f5673494', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), h("button", { key: '79d9cfed8f01268044f82811a35d323a12dca749', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: () => this.onClearInput(true) }, h("ion-icon", { key: '9b1a177b21951c1c95897a468b34bb7bbd63d137', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
+            }, onClick: () => this.onClearInput(true) }, h("ion-icon", { key: 'aa3b9fa8a61f853236783ac7bcd0b113ea65ece2', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
     }
     static get is() { return "ion-searchbar"; }
     static get encapsulation() { return "scoped"; }
@@ -1061,7 +1059,7 @@ export class Searchbar {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Sets focus on the native `input` in `ion-searchbar`. Use this method instead of the global\n`input.focus()`.\n\nDevelopers who wish to focus an input when a page enters\nshould call `setFocus()` in the `ionViewDidEnter()` lifecycle method.\n\nDevelopers who wish to focus an input when an overlay is presented\nshould call `setFocus` after `didPresent` has resolved.\n\nSee [managing focus](/docs/developing/managing-focus) for more information.",
+                    "text": "Sets focus on the native `input` in `ion-searchbar`. Use this method instead of the global\n`input.focus()`.\nDevelopers who wish to focus an input when a page enters\nshould call `setFocus()` in the `ionViewDidEnter()` lifecycle method.\nDevelopers who wish to focus an input when an overlay is presented\nshould call `setFocus` after `didPresent` has resolved.\n\nSee [managing focus](/docs/developing/managing-focus) for more information.",
                     "tags": []
                 }
             },

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

@@ -3,6 +3,7 @@
   scroll-snap-stop: always;
   flex-shrink: 0;
   width: 100%;
+  min-height: 1px;
   overflow-y: scroll;
   /* Hide scrollbar in Firefox */
   scrollbar-width: none;

package/dist/collection/components/select/select.js

@@ -216,7 +216,7 @@ export class Select {
         const scrollSelectedIntoView = () => {
             const indexOfSelected = this.childOpts.findIndex((o) => o.value === this.value);
             if (indexOfSelected > -1) {
-                const selectedItem = overlay.querySelector(`.select-interface-option:nth-child(${indexOfSelected + 1})`);
+                const selectedItem = overlay.querySelector(`.select-interface-option:nth-of-type(${indexOfSelected + 1})`);
                 if (selectedItem) {
                     /**
                      * Browsers such as Firefox do not
@@ -782,7 +782,7 @@ export class Select {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
-        return (h(Host, { key: 'e33253af9b9daa14460c7c259fb138b4d2b875ae', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: 'c03fb65e8fc9f9aab295e07b282377d57d910519', onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -800,7 +800,7 @@ export class Select {
                 [`select-justify-${justify}`]: justifyEnabled,
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
-            }) }, h("label", { key: '03303b7131c77a78a933e8e496e7251b6b5c485b', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: '9037674db6a0adc189e887c9048f817d5afdf635', class: "select-wrapper-inner" }, h("slot", { key: '7c9226c838ba4bcf5bc0b234fa1613ce335cf73d', name: "start" }), h("div", { key: 'a7432c3efb5c65f88a5e4b0d35c5a433fa4e949d', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '028e683df26a8f573d7670da76e0ad26d21c83e0', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: '20341bcae3753048ce905d2aceffa5351a0db125', class: "select-highlight" })), this.renderBottomContent()));
+            }) }, h("label", { key: '0d0c8ec55269adcac625f2899a547f4e7f3e3741', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: 'f6dfc93c0e23cbe75a2947abde67d842db2dad78', class: "select-wrapper-inner" }, h("slot", { key: '957bfadf9f101f519091419a362d3abdc2be66f6', name: "start" }), h("div", { key: 'ca349202a484e7f2e884533fd330f0b136754f7d', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: 'f0e62a6533ff1c8f62bd2d27f60b23385c4fa9ed', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: 'fb840d46bafafb09898ebeebbe8c181906a3d8a2', class: "select-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-select"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tabs/tabs.js

@@ -51,7 +51,24 @@ export class Tabs {
     componentWillRender() {
         const tabBar = this.el.querySelector('ion-tab-bar');
         if (tabBar) {
-            const tab = this.selectedTab ? this.selectedTab.tab : undefined;
+            let tab = this.selectedTab ? this.selectedTab.tab : undefined;
+            // Fallback: if no selectedTab is set but we're using router mode,
+            // determine the active tab from the current URL. This works around
+            // timing issues in React Router integration where setRouteId may not
+            // be called in time for the initial render.
+            // TODO(FW-6724): Remove this with React Router upgrade
+            if (!tab && this.useRouter && typeof window !== 'undefined') {
+                const currentPath = window.location.pathname;
+                const tabButtons = this.el.querySelectorAll('ion-tab-button');
+                // Look for a tab button that matches the current path pattern
+                for (const tabButton of tabButtons) {
+                    const tabId = tabButton.getAttribute('tab');
+                    if (tabId && currentPath.includes(tabId)) {
+                        tab = tabId;
+                        break;
+                    }
+                }
+            }
             tabBar.selectedTab = tab;
         }
     }
@@ -146,7 +163,7 @@ export class Tabs {
         return Array.from(this.el.querySelectorAll('ion-tab'));
     }
     render() {
-        return (h(Host, { key: '73ecd3294ca6c78ce6d8b6a7e5b6ccb11d84ada4', onIonTabButtonClick: this.onTabClicked }, h("slot", { key: '09661b26f07a3069a58e76ea4dceb9a6acbf365d', name: "top" }), h("div", { key: 'db50d59fad8f9b11873b695fc548f3cfe4aceb6a', class: "tabs-inner" }, h("slot", { key: '02694dde2d8381f48fc06dd9e79798c4bd540ccd' })), h("slot", { key: '92c4661a5f3fa1c08c964fab7c422c1a2a03d3d8', name: "bottom" })));
+        return (h(Host, { key: '6dd1d17cc5a7aff4b910303006b4478080ca97af', onIonTabButtonClick: this.onTabClicked }, h("slot", { key: 'db54a692d1a825498a116f090eb305f7cceceb5a', name: "top" }), h("div", { key: 'e1b7d49ba7032e9071de2029695254e2a8303be9', class: "tabs-inner" }, h("slot", { key: '4c3b58d5292c8c834e7532c51de0861068943d79' })), h("slot", { key: 'dd59c0b9b217dfbfb0fccdbc6896b593278549cc', name: "bottom" })));
     }
     static get is() { return "ion-tabs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/toast/toast.js

@@ -239,16 +239,15 @@ export class Toast {
     }
     /**
      * Dismiss the toast overlay after it has been presented.
+     * This is a no-op if the overlay has not been presented yet. If you want
+     * to remove an overlay from the DOM that was never presented, use the
+     * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
      *
      * @param data Any data to emit in the dismiss events.
      * @param role The role of the element that is dismissing the toast.
      * This can be useful in a button handler for determining which button was
      * clicked to dismiss the toast.
-     * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
-     *
-     * This is a no-op if the overlay has not been presented yet. If you want
-     * to remove an overlay from the DOM that was never presented, use the
-     * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
+     * Some examples include: `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
      */
     async dismiss(data, role) {
         var _a, _b;
@@ -416,9 +415,9 @@ export class Toast {
         if (layout === 'stacked' && startButtons.length > 0 && endButtons.length > 0) {
             printIonWarning('[ion-toast] - This toast is using start and end buttons with the stacked toast layout. We recommend following the best practice of using either start or end buttons with the stacked toast layout.', el);
         }
-        return (h(Host, Object.assign({ key: '425be734aee0eeef281ab1609a9f982ce8b5e852', tabindex: "-1" }, this.htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: 'd1ecd90c87700aad4685e230cdd430aa286b8791', tabindex: "-1" }, this.htmlAttributes, { style: {
                 zIndex: `${60000 + this.overlayIndex}`,
-            }, class: createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), h("div", { key: '7c3ad1a8df9e21fc30fc179c7edebeabcf3c6874', class: wrapperClass }, h("div", { key: 'f950c21e8d7bf92653e0bd52e820ed6b84fa8cf5', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { key: '0266241927dbe16799adb57f9fc11bd5372877b2', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { key: '9ef4b87bad672af6a5b693af61375564daf1eeeb', class: "toast-content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
+            }, class: createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), h("div", { key: '4bfc863417324de69e222054d5cf9c452038b41e', class: wrapperClass }, h("div", { key: '3417940afec0392e81b7d54c7cb00f3ab6c30d47', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { key: '6bf878fbc85c01e1e5faa9d97d46255a6511a952', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { key: '54b500348a9c37660c3aff37436d9188e4374947', class: "toast-content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
     }
     static get is() { return "ion-toast"; }
     static get encapsulation() { return "shadow"; }
@@ -1113,7 +1112,7 @@ export class Toast {
                         }, {
                             "name": "role",
                             "type": "string | undefined",
-                            "docs": "The role of the element that is dismissing the toast.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the toast.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`.\n\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method."
+                            "docs": "The role of the element that is dismissing the toast.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the toast.\nSome examples include: `\"cancel\"`, `\"destructive\"`, `\"selected\"`, and `\"backdrop\"`."
                         }],
                     "references": {
                         "Promise": {
@@ -1129,13 +1128,13 @@ export class Toast {
                     "return": "Promise<boolean>"
                 },
                 "docs": {
-                    "text": "Dismiss the toast overlay after it has been presented.",
+                    "text": "Dismiss the toast overlay after it has been presented.\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.",
                     "tags": [{
                             "name": "param",
                             "text": "data Any data to emit in the dismiss events."
                         }, {
                             "name": "param",
-                            "text": "role The role of the element that is dismissing the toast.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the toast.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`.\n\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method."
+                            "text": "role The role of the element that is dismissing the toast.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the toast.\nSome examples include: `\"cancel\"`, `\"destructive\"`, `\"selected\"`, and `\"backdrop\"`."
                         }]
                 }
             },

package/dist/collection/utils/test/playwright/page/utils/set-content.js

@@ -30,6 +30,24 @@ export const setContent = async (page, html, testInfo, options) => {
         palette = options.palette;
     }
     const baseUrl = process.env.PLAYWRIGHT_TEST_BASE_URL;
+    // The Ionic bundle is included locally by default unless the test
+    // config passes in the importIonicFromCDN option. This is useful
+    // when testing with the CDN version of Ionic.
+    let ionicCSSImports = `
+    <link href="${baseUrl}/css/ionic.bundle.css" rel="stylesheet" />
+  `;
+    let ionicJSImports = `
+    <script type="module" src="${baseUrl}/dist/ionic/ionic.esm.js"></script>
+  `;
+    if (options === null || options === void 0 ? void 0 : options.importIonicFromCDN) {
+        ionicCSSImports = `
+      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />
+    `;
+        ionicJSImports = `
+      <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
+      <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
+    `;
+    }
     const output = `
     <!DOCTYPE html>
     <html dir="${direction}" lang="en">
@@ -37,11 +55,11 @@ export const setContent = async (page, html, testInfo, options) => {
         <title>Ionic Playwright Test</title>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
-        <link href="${baseUrl}/css/ionic.bundle.css" rel="stylesheet" />
+        ${ionicCSSImports}
         <link href="${baseUrl}/scripts/testing/styles.css" rel="stylesheet" />
         ${palette !== 'light' ? `<link href="${baseUrl}/css/palettes/${palette}.always.css" rel="stylesheet" />` : ''}
         <script src="${baseUrl}/scripts/testing/scripts.js"></script>
-        <script type="module" src="${baseUrl}/dist/ionic/ionic.esm.js"></script>
+        ${ionicJSImports}
         <script>
           window.Ionic = {
             config: {