voyager-ionic-core 8.6.1 → 8.7.2

package/components/ion-menu.js

@@ -244,7 +244,7 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
         return Promise.resolve(this._isOpen);
     }
     /**
-     * Returns `true` is the menu is active.
+     * Returns `true` if the menu is active.
      *
      * A menu is active when it can be opened or closed, meaning it's enabled
      * and it's not part of a `ion-split-pane`.
@@ -255,6 +255,10 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
     /**
      * Opens the menu. If the menu is already open or it can't be opened,
      * it returns `false`.
+     *
+     * @param animated If `true`, the menu will animate when opening.
+     * If `false`, the menu will open instantly without animation.
+     * Defaults to `true`.
      */
     open(animated = true) {
         return this.setOpen(true, animated);
@@ -262,20 +266,38 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
     /**
      * Closes the menu. If the menu is already closed or it can't be closed,
      * it returns `false`.
+     *
+     * @param animated If `true`, the menu will animate when closing. If `false`,
+     * the menu will close instantly without animation. Defaults to `true`.
+     * @param role The role of the element that is closing the menu.
+     * This can be useful in a button handler for determining which button was
+     * clicked to close the menu. Some examples include:
+     * `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
      */
     close(animated = true, role) {
         return this.setOpen(false, animated, role);
     }
     /**
-     * Toggles the menu. If the menu is already open, it will try to close, otherwise it will try to open it.
+     * Toggles the menu. If the menu is already open, it will try to close,
+     * otherwise it will try to open it.
      * If the operation can't be completed successfully, it returns `false`.
+     *
+     * @param animated If `true`, the menu will animate when opening/closing.
+     * If `false`, the menu will open/close instantly without animation.
+     * Defaults to `true`.
      */
     toggle(animated = true) {
         return this.setOpen(!this._isOpen, animated);
     }
     /**
-     * Opens or closes the button.
+     * Opens or closes the menu.
      * If the operation can't be completed successfully, it returns `false`.
+     *
+     * @param shouldOpen If `true`, the menu will open. If `false`, the menu
+     * will close.
+     * @param animated If `true`, the menu will animate when opening/closing.
+     * If `false`, the menu will open/close instantly without animation.
+     * @param role The role of the element that is closing the menu.
      */
     setOpen(shouldOpen, animated = true, role) {
         return menuController._setOpen(this, shouldOpen, animated, role);
@@ -640,14 +662,14 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
          * the ionBackButton listener in the menu controller
          * will handle closing the menu when Escape is pressed.
          */
-        return (h(Host, { key: '9e4ae9476a76781f1d228395c9af9e1c39ec82bb', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
+        return (h(Host, { key: 'a5c75aa40a34530b56ee3b98d706a5ac5ae300de', onKeyDown: shouldUseCloseWatcher() ? 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,
                 'split-pane-side': hostContext('ion-split-pane', el),
-            } }, h("div", { key: 'c6153589d872ac7e3fdf5eedfdb858eb64ccd713', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", { key: '9994aac4b22f17db34c9b8b2aa56b8710b9df645' })), h("ion-backdrop", { key: 'f09ac30cc4dd2dcb10628965e659dae5a23baf98', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
+            } }, h("div", { key: '3f5f70acd4d3ed6bb445122f4f01d73db738a75f', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", { key: '3161326c9330e7f7441299c428b87a91b31a83e9' })), h("ion-backdrop", { key: '917b50f38489bdf03d0c642af8b4e4e172c7dc4c', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -660,7 +682,7 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
         ios: menuIosCss,
         md: menuMdCss
     }; }
-}, [33, "ion-menu", {
+}, [289, "ion-menu", {
         "contentId": [513, "content-id"],
         "menuId": [513, "menu-id"],
         "type": [1025],

package/components/ion-nav-link.js

@@ -39,7 +39,7 @@ const NavLink = /*@__PURE__*/ proxyCustomElement(class NavLink extends HTMLEleme
         return h(Host, { key: '6dbb1ad4f351e9215375aac11ab9b53762e07a08', onClick: this.onClick });
     }
     get el() { return this; }
-}, [0, "ion-nav-link", {
+}, [256, "ion-nav-link", {
         "component": [1],
         "componentProps": [16, "component-props"],
         "routerDirection": [1, "router-direction"],

package/components/ion-nav.js

@@ -910,7 +910,7 @@ const Nav = /*@__PURE__*/ proxyCustomElement(class Nav extends HTMLElement {
         "root": ["rootChanged"]
     }; }
     static get style() { return navCss; }
-}, [1, "ion-nav", {
+}, [257, "ion-nav", {
         "delegate": [16],
         "swipeGesture": [1028, "swipe-gesture"],
         "animated": [4],

package/components/ion-note.js

@@ -25,7 +25,7 @@ const Note = /*@__PURE__*/ proxyCustomElement(class Note extends HTMLElement {
         ios: noteIosCss,
         md: noteMdCss
     }; }
-}, [33, "ion-note", {
+}, [289, "ion-note", {
         "color": [513]
     }]);
 function defineCustomElement$1() {

package/components/ion-picker-legacy.js

@@ -278,7 +278,7 @@ const Picker = /*@__PURE__*/ proxyCustomElement(class Picker extends HTMLElement
         ios: pickerIosCss,
         md: pickerMdCss
     }; }
-}, [34, "ion-picker-legacy", {
+}, [290, "ion-picker-legacy", {
         "overlayIndex": [2, "overlay-index"],
         "delegate": [16],
         "hasController": [4, "has-controller"],

package/components/ion-progress-bar.js

@@ -55,7 +55,7 @@ const ProgressBar = /*@__PURE__*/ proxyCustomElement(class ProgressBar extends H
         ios: progressBarIosCss,
         md: progressBarMdCss
     }; }
-}, [33, "ion-progress-bar", {
+}, [289, "ion-progress-bar", {
         "type": [1],
         "reversed": [4],
         "value": [2],
@@ -77,6 +77,7 @@ const renderProgress = (value, buffer) => {
          * When finalBuffer === 1, we use display: none
          * instead of removing the element to avoid flickering.
          */
+        // TODO(FW-6697): change `ion-hide` class to `ion-display-none` or another class
         h("div", { class: { 'buffer-circles-container': true, 'ion-hide': finalBuffer === 1 }, style: { transform: `translateX(${finalBuffer * 100}%)` } }, h("div", { class: "buffer-circles-container", style: { transform: `translateX(-${finalBuffer * 100}%)` } }, h("div", { part: "stream", class: "buffer-circles" }))),
         h("div", { part: "track", class: "progress-buffer-bar", style: { transform: `scaleX(${finalBuffer})` } }),
     ];

package/components/ion-range.js

@@ -217,6 +217,45 @@ const Range = /*@__PURE__*/ proxyCustomElement(class Range extends HTMLElement {
                 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;
@@ -649,6 +688,8 @@ const Range = /*@__PURE__*/ proxyCustomElement(class Range extends HTMLElement {
             min,
             max,
             inheritedAttributes,
+            onKnobFocus: this.onKnobFocus,
+            onKnobBlur: this.onKnobBlur,
         }), this.dualKnobs &&
             renderKnob(rtl, {
                 knob: 'B',
@@ -662,6 +703,8 @@ const Range = /*@__PURE__*/ proxyCustomElement(class Range extends HTMLElement {
                 min,
                 max,
                 inheritedAttributes,
+                onKnobFocus: this.onKnobFocus,
+                onKnobBlur: this.onKnobBlur,
             })));
     }
     render() {
@@ -681,7 +724,7 @@ const Range = /*@__PURE__*/ proxyCustomElement(class Range extends HTMLElement {
         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,
@@ -690,10 +733,10 @@ const Range = /*@__PURE__*/ proxyCustomElement(class Range extends HTMLElement {
                 [`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" })))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -709,7 +752,7 @@ const Range = /*@__PURE__*/ proxyCustomElement(class Range extends HTMLElement {
         ios: rangeIosCss,
         md: rangeMdCss
     }; }
-}, [33, "ion-range", {
+}, [289, "ion-range", {
         "color": [513],
         "debounce": [2],
         "name": [1],
@@ -738,7 +781,7 @@ const Range = /*@__PURE__*/ proxyCustomElement(class Range extends HTMLElement {
         "disabled": ["disabledChanged"],
         "value": ["valueChanged"]
     }]);
-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 = {};
@@ -759,7 +802,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/components/ion-refresher-content.js

@@ -54,7 +54,7 @@ const RefresherContent = /*@__PURE__*/ proxyCustomElement(class RefresherContent
         return (h(Host, { key: 'e235f8a9a84070ece2e2066ced234a64663bfa1d', class: mode }, h("div", { key: '9121691818ddaa35801a5f442e144ac27686cf19', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (h("div", { key: 'c8d65d740f1575041bd3b752c789077927397fe4', class: "refresher-pulling-icon" }, h("div", { key: '309dd904977eaa788b09ea95b7fa4996a73bec5b', class: "spinner-arrow-container" }, h("ion-spinner", { key: 'a2a1480f67775d56ca7822e76be1e9f983bca2f9', name: this.pullingIcon, paused: true }), mode === 'md' && this.pullingIcon === 'circular' && (h("div", { key: '811d7e06d324bf4b6a18a31427a43e5177f3ae3a', class: "arrow-container" }, h("ion-icon", { key: '86cc48e2e8dc054ff6ff1299094da35b524be63d', icon: caretBackSharp, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (h("div", { key: '464ae097dbc95c18a2dd7dfd03f8489153dab719', class: "refresher-pulling-icon" }, h("ion-icon", { key: 'ed6875978b9035add562caa743a68353743d978f', icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), h("div", { key: 'aff891924e44354543fec484e5cde1ca92e69904', class: "refresher-refreshing" }, this.refreshingSpinner && (h("div", { key: '842d7ac4ff10a1058775493d62f31cbdcd34f7a0', class: "refresher-refreshing-icon" }, h("ion-spinner", { key: '8c3e6195501e7e78d5cde1e3ad1fef90fd4a953f', name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
     }
     get el() { return this; }
-}, [0, "ion-refresher-content", {
+}, [256, "ion-refresher-content", {
         "pullingIcon": [1025, "pulling-icon"],
         "pullingText": [1, "pulling-text"],
         "refreshingSpinner": [1025, "refreshing-spinner"],

package/components/ion-refresher.js

@@ -700,7 +700,7 @@ const Refresher = /*@__PURE__*/ proxyCustomElement(class Refresher extends HTMLE
         ios: refresherIosCss,
         md: refresherMdCss
     }; }
-}, [32, "ion-refresher", {
+}, [288, "ion-refresher", {
         "pullMin": [2, "pull-min"],
         "pullMax": [2, "pull-max"],
         "closeDuration": [1, "close-duration"],

package/components/ion-reorder-group.js

@@ -14,6 +14,9 @@ const ReorderGroup = /*@__PURE__*/ proxyCustomElement(class ReorderGroup extends
         super();
         this.__registerHost();
         this.ionItemReorder = createEvent(this, "ionItemReorder", 7);
+        this.ionReorderStart = createEvent(this, "ionReorderStart", 7);
+        this.ionReorderMove = createEvent(this, "ionReorderMove", 7);
+        this.ionReorderEnd = createEvent(this, "ionReorderEnd", 7);
         this.lastToIndex = -1;
         this.cachedHeights = [];
         this.scrollElTop = 0;
@@ -59,7 +62,7 @@ const ReorderGroup = /*@__PURE__*/ proxyCustomElement(class ReorderGroup extends
         }
     }
     /**
-     * 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.
@@ -96,7 +99,7 @@ const ReorderGroup = /*@__PURE__*/ proxyCustomElement(class ReorderGroup extends
         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;
         }
@@ -126,6 +129,7 @@ const ReorderGroup = /*@__PURE__*/ proxyCustomElement(class ReorderGroup extends
         this.state = 1 /* ReorderGroupState.Active */;
         item.classList.add(ITEM_REORDER_SELECTED);
         hapticSelectionStart();
+        this.ionReorderStart.emit();
     }
     onMove(ev) {
         const selectedItem = this.selectedItemEl;
@@ -140,6 +144,7 @@ const ReorderGroup = /*@__PURE__*/ proxyCustomElement(class ReorderGroup extends
         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);
@@ -149,6 +154,10 @@ const ReorderGroup = /*@__PURE__*/ proxyCustomElement(class ReorderGroup extends
         }
         // Update selected item position
         selectedItem.style.transform = `translateY(${deltaY}px)`;
+        this.ionReorderMove.emit({
+            from: fromIndex,
+            to: toIndex,
+        });
     }
     onEnd() {
         const selectedItemEl = this.selectedItemEl;
@@ -163,6 +172,7 @@ const ReorderGroup = /*@__PURE__*/ proxyCustomElement(class ReorderGroup extends
             this.completeReorder();
         }
         else {
+            // TODO(FW-6590): Remove this once the deprecated event is removed
             this.ionItemReorder.emit({
                 from: fromIndex,
                 to: toIndex,
@@ -170,11 +180,16 @@ const ReorderGroup = /*@__PURE__*/ proxyCustomElement(class ReorderGroup extends
             });
         }
         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);
@@ -216,7 +231,7 @@ const ReorderGroup = /*@__PURE__*/ proxyCustomElement(class ReorderGroup extends
     /********* 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 = '';
@@ -247,7 +262,7 @@ const ReorderGroup = /*@__PURE__*/ proxyCustomElement(class ReorderGroup extends
     }
     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 */,
@@ -258,7 +273,7 @@ const ReorderGroup = /*@__PURE__*/ proxyCustomElement(class ReorderGroup extends
         "disabled": ["disabledChanged"]
     }; }
     static get style() { return reorderGroupCss; }
-}, [0, "ion-reorder-group", {
+}, [256, "ion-reorder-group", {
         "disabled": [4],
         "state": [32],
         "complete": [64]

package/components/ion-reorder.js

@@ -35,7 +35,7 @@ const Reorder = /*@__PURE__*/ proxyCustomElement(class Reorder extends HTMLEleme
         ios: reorderIosCss,
         md: reorderMdCss
     }; }
-}, [33, "ion-reorder", undefined, [[2, "click", "onClick"]]]);
+}, [289, "ion-reorder", undefined, [[2, "click", "onClick"]]]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;

package/components/ion-router-link.js

@@ -34,7 +34,7 @@ const RouterLink = /*@__PURE__*/ proxyCustomElement(class RouterLink extends HTM
             }) }, h("a", Object.assign({ key: 'babafae85ca5c6429958d383feff0493ff8cf33e' }, attrs), h("slot", { key: '50314e9555bbf6dffa0c50c3f763009dee59b10b' }))));
     }
     static get style() { return routerLinkCss; }
-}, [1, "ion-router-link", {
+}, [257, "ion-router-link", {
         "color": [513],
         "href": [1],
         "rel": [1],

package/components/ion-router-outlet.js

@@ -197,7 +197,7 @@ const RouterOutlet = /*@__PURE__*/ proxyCustomElement(class RouterOutlet extends
         "swipeHandler": ["swipeHandlerChanged"]
     }; }
     static get style() { return routerOutletCss; }
-}, [1, "ion-router-outlet", {
+}, [257, "ion-router-outlet", {
         "mode": [1025],
         "delegate": [16],
         "animated": [4],

package/components/ion-router.js

@@ -616,6 +616,7 @@ const Router = /*@__PURE__*/ proxyCustomElement(class Router extends HTMLElement
      *
      * @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;

package/components/ion-row.js

@@ -16,7 +16,7 @@ const Row = /*@__PURE__*/ proxyCustomElement(class Row extends HTMLElement {
         return (h(Host, { key: '65592a79621bd8f75f9566db3e8c05a4b8fc6048', class: getIonMode(this) }, h("slot", { key: '56f09784db7a0299c9ce76dfcede185b295251ff' })));
     }
     static get style() { return rowCss; }
-}, [1, "ion-row"]);
+}, [257, "ion-row"]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;

package/components/ion-searchbar.js

@@ -259,10 +259,8 @@ const Searchbar = /*@__PURE__*/ proxyCustomElement(class Searchbar extends HTMLE
     /**
      * 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.
      *
@@ -441,8 +439,8 @@ const Searchbar = /*@__PURE__*/ proxyCustomElement(class Searchbar extends HTMLE
         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,
@@ -452,14 +450,14 @@ const Searchbar = /*@__PURE__*/ proxyCustomElement(class Searchbar extends HTMLE
                 '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));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -473,7 +471,7 @@ const Searchbar = /*@__PURE__*/ proxyCustomElement(class Searchbar extends HTMLE
         ios: searchbarIosCss,
         md: searchbarMdCss
     }; }
-}, [34, "ion-searchbar", {
+}, [290, "ion-searchbar", {
         "color": [513],
         "animated": [4],
         "autocapitalize": [1],

package/components/ion-segment-button.js

@@ -139,7 +139,7 @@ const SegmentButton = /*@__PURE__*/ proxyCustomElement(class SegmentButton exten
         ios: segmentButtonIosCss,
         md: segmentButtonMdCss
     }; }
-}, [33, "ion-segment-button", {
+}, [289, "ion-segment-button", {
         "contentId": [513, "content-id"],
         "disabled": [1028],
         "layout": [1],

package/components/ion-segment-content.js

@@ -3,7 +3,7 @@
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const segmentContentCss = ":host{scroll-snap-align:center;scroll-snap-stop:always;-ms-flex-negative:0;flex-shrink:0;width:100%;overflow-y:scroll;scrollbar-width:none;-ms-overflow-style:none;}:host::-webkit-scrollbar{display:none}";
+const segmentContentCss = ":host{scroll-snap-align:center;scroll-snap-stop:always;-ms-flex-negative:0;flex-shrink:0;width:100%;min-height:1px;overflow-y:scroll;scrollbar-width:none;-ms-overflow-style:none;}:host::-webkit-scrollbar{display:none}";
 
 const SegmentContent = /*@__PURE__*/ proxyCustomElement(class SegmentContent extends HTMLElement {
     constructor() {
@@ -15,7 +15,7 @@ const SegmentContent = /*@__PURE__*/ proxyCustomElement(class SegmentContent ext
         return (h(Host, { key: 'db6876f2aee7afa1ea8bc147337670faa68fae1c' }, h("slot", { key: 'bc05714a973a5655668679033f5809a1da6db8cc' })));
     }
     static get style() { return segmentContentCss; }
-}, [1, "ion-segment-content"]);
+}, [257, "ion-segment-content"]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;

package/components/ion-segment-view.js

@@ -115,7 +115,7 @@ const SegmentView = /*@__PURE__*/ proxyCustomElement(class SegmentView extends H
         ios: segmentViewIosCss,
         md: segmentViewMdCss
     }; }
-}, [33, "ion-segment-view", {
+}, [289, "ion-segment-view", {
         "disabled": [4],
         "isManualScroll": [32],
         "setContent": [64]

package/components/ion-segment.js

@@ -569,7 +569,7 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends HTMLEleme
         ios: segmentIosCss,
         md: segmentMdCss
     }; }
-}, [33, "ion-segment", {
+}, [289, "ion-segment", {
         "color": [513],
         "disabled": [4],
         "scrollable": [4],

package/components/ion-select-option.js

@@ -22,7 +22,7 @@ const SelectOption = /*@__PURE__*/ proxyCustomElement(class SelectOption extends
     }
     get el() { return this; }
     static get style() { return selectOptionCss; }
-}, [1, "ion-select-option", {
+}, [257, "ion-select-option", {
         "disabled": [4],
         "value": [8]
     }]);

package/components/ion-select.js

@@ -235,7 +235,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
         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
@@ -755,7 +755,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
          * 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),
@@ -773,7 +773,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
                 [`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()));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -786,7 +786,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
         ios: selectIosCss,
         md: selectMdCss
     }; }
-}, [33, "ion-select", {
+}, [289, "ion-select", {
         "cancelText": [1, "cancel-text"],
         "color": [513],
         "compareWith": [1, "compare-with"],

package/components/ion-skeleton-text.js

@@ -43,7 +43,7 @@ const SkeletonText = /*@__PURE__*/ proxyCustomElement(class SkeletonText extends
     }
     get el() { return this; }
     static get style() { return skeletonTextCss; }
-}, [1, "ion-skeleton-text", {
+}, [257, "ion-skeleton-text", {
         "animated": [4]
     }]);
 function defineCustomElement$1() {

package/components/ion-split-pane.js

@@ -152,7 +152,7 @@ const SplitPane = /*@__PURE__*/ proxyCustomElement(class SplitPane extends HTMLE
         ios: splitPaneIosCss,
         md: splitPaneMdCss
     }; }
-}, [33, "ion-split-pane", {
+}, [289, "ion-split-pane", {
         "contentId": [513, "content-id"],
         "disabled": [4],
         "when": [8],

package/components/ion-tab-bar.js

@@ -75,7 +75,7 @@ const TabBar = /*@__PURE__*/ proxyCustomElement(class TabBar extends HTMLElement
         ios: tabBarIosCss,
         md: tabBarMdCss
     }; }
-}, [33, "ion-tab-bar", {
+}, [289, "ion-tab-bar", {
         "color": [513],
         "selectedTab": [1, "selected-tab"],
         "translucent": [4],

package/components/ion-tab-button.js

@@ -94,7 +94,7 @@ const TabButton = /*@__PURE__*/ proxyCustomElement(class TabButton extends HTMLE
         ios: tabButtonIosCss,
         md: tabButtonMdCss
     }; }
-}, [33, "ion-tab-button", {
+}, [289, "ion-tab-button", {
         "disabled": [4],
         "download": [1],
         "href": [1],