@ionic/core 8.3.4-dev.11730315987.18af6259 → 8.3.4-dev.11730395663.1a0f4848

package/components/ion-segment-button.js

@@ -34,6 +34,7 @@ const SegmentButton = /*@__PURE__*/ proxyCustomElement(class SegmentButton exten
             }
         };
         this.checked = false;
+        this.contentId = undefined;
         this.disabled = false;
         this.layout = 'icon-top';
         this.type = 'button';
@@ -49,6 +50,26 @@ const SegmentButton = /*@__PURE__*/ proxyCustomElement(class SegmentButton exten
             addEventListener(segmentEl, 'ionSelect', this.updateState);
             addEventListener(segmentEl, 'ionStyle', this.updateStyle);
         }
+        // Return if there is no contentId defined
+        if (!this.contentId)
+            return;
+        // Attempt to find the Segment Content by its contentId
+        const segmentContent = document.getElementById(this.contentId);
+        // If no associated Segment Content exists, log an error and return
+        if (!segmentContent) {
+            console.error(`Segment Button: Unable to find Segment Content with id="${this.contentId}".`);
+            return;
+        }
+        // Ensure the found element is a valid ION-SEGMENT-CONTENT
+        if (segmentContent.tagName !== 'ION-SEGMENT-CONTENT') {
+            console.error(`Segment Button: Element with id="${this.contentId}" is not an <ion-segment-content> element.`);
+            return;
+        }
+        // Prevent buttons from being disabled when associated with segment content
+        if (this.disabled) {
+            console.warn(`Segment Button: Segment buttons cannot be disabled when associated with an <ion-segment-content>.`);
+            this.disabled = false;
+        }
     }
     disconnectedCallback() {
         const segmentEl = this.segmentEl;
@@ -82,7 +103,7 @@ const SegmentButton = /*@__PURE__*/ proxyCustomElement(class SegmentButton exten
         const { checked, type, disabled, hasIcon, hasLabel, layout, segmentEl } = this;
         const mode = getIonMode(this);
         const hasSegmentColor = () => (segmentEl === null || segmentEl === void 0 ? void 0 : segmentEl.color) !== undefined;
-        return (h(Host, { key: '9b54e4841be5d0f4f2ee230a649bfbe01066c7c7', class: {
+        return (h(Host, { key: 'd50a5d5e2f6206e8523598f258d8217d2903f69b', class: {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
@@ -98,10 +119,7 @@ const SegmentButton = /*@__PURE__*/ proxyCustomElement(class SegmentButton exten
                 'ion-activatable': true,
                 'ion-activatable-instant': true,
                 'ion-focusable': true,
-            } }, h("button", Object.assign({ key: 'b97b964b5f3f1bf53e41ad2a1ad4853d5f956fe5', "aria-selected": checked ? 'true' : 'false', role: "tab", ref: (el) => (this.nativeEl = el), type: type, class: "button-native", part: "native", disabled: disabled }, this.inheritedAttributes), h("span", { key: '0eeb2616f7c5a7a7fc1e2e3bd34ab461de6179f4', class: "button-inner" }, h("slot", { key: '5ac8fafa2f23e30f8df63bfe236a9604cfb388ae' })), mode === 'md' && h("ion-ripple-effect", { key: '86032e9726e2b6437ffc34f59fcbe564616cc9ca' })), h("div", { key: '536b1da58dd2521be290707d6b1726831340cf9f', part: "indicator", class: {
-                'segment-button-indicator': true,
-                'segment-button-indicator-animated': true,
-            } }, h("div", { key: 'b43124415ebd77c87285791522c5afc26a137f96', part: "indicator-background", class: "segment-button-indicator-background" }))));
+            } }, h("button", Object.assign({ key: 'b4f6f145286ba8ab79669e11035b906daa85ae7e', "aria-selected": checked ? 'true' : 'false', role: "tab", ref: (el) => (this.nativeEl = el), type: type, class: "button-native", part: "native", disabled: disabled }, this.inheritedAttributes), h("span", { key: '67965996c9ffe70553875e00d3da0ae5b2b1d814', class: "button-inner" }, h("slot", { key: '5087988fe45a8fdf388ec44c395d0b745b207806' })), mode === 'md' && h("ion-ripple-effect", { key: 'b24858de0750bbc769b3183fac0077dfe817ba27' })), h("div", { key: '97b4359432acd1c9da0816360cd1df9472e183f7', part: "indicator", class: "segment-button-indicator segment-button-indicator-animated" }, h("div", { key: '0561738ea15b0986f4ed3d8276d5e6f2d13f7e51', part: "indicator-background", class: "segment-button-indicator-background" }))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -112,6 +130,7 @@ const SegmentButton = /*@__PURE__*/ proxyCustomElement(class SegmentButton exten
         md: IonSegmentButtonMdStyle0
     }; }
 }, [33, "ion-segment-button", {
+        "contentId": [513, "content-id"],
         "disabled": [1028],
         "layout": [1],
         "type": [1],

package/components/ion-segment-content.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface IonSegmentContent extends Components.IonSegmentContent, HTMLElement {}
+export const IonSegmentContent: {
+    prototype: IonSegmentContent;
+    new (): IonSegmentContent;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/ion-segment-content.js

@@ -0,0 +1,37 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+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%}";
+const IonSegmentContentStyle0 = segmentContentCss;
+
+const SegmentContent = /*@__PURE__*/ proxyCustomElement(class SegmentContent extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    render() {
+        return (h(Host, { key: '03684b2999ac64fe13e376fd7e7f279976e9d4f2' }, h("slot", { key: '143031075bf33ca19e7cfd76fc8a67b83ccaf11c' })));
+    }
+    static get style() { return IonSegmentContentStyle0; }
+}, [1, "ion-segment-content"]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ion-segment-content"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ion-segment-content":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SegmentContent);
+            }
+            break;
+    } });
+}
+
+const IonSegmentContent = SegmentContent;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonSegmentContent, defineCustomElement };

package/components/ion-segment-view.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface IonSegmentView extends Components.IonSegmentView, HTMLElement {}
+export const IonSegmentView: {
+    prototype: IonSegmentView;
+    new (): IonSegmentView;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/ion-segment-view.js

@@ -0,0 +1,140 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+const segmentViewIosCss = ":host{display:-ms-flexbox;display:flex;height:100%;overflow-x:scroll;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}:host::-webkit-scrollbar{display:none}:host(.segment-view-disabled){-ms-touch-action:none;touch-action:none;overflow-x:hidden}:host(.segment-view-scroll-disabled){pointer-events:none}:host(.segment-view-disabled){opacity:0.3}";
+const IonSegmentViewIosStyle0 = segmentViewIosCss;
+
+const segmentViewMdCss = ":host{display:-ms-flexbox;display:flex;height:100%;overflow-x:scroll;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}:host::-webkit-scrollbar{display:none}:host(.segment-view-disabled){-ms-touch-action:none;touch-action:none;overflow-x:hidden}:host(.segment-view-scroll-disabled){pointer-events:none}:host(.segment-view-disabled){opacity:0.3}";
+const IonSegmentViewMdStyle0 = segmentViewMdCss;
+
+const SegmentView = /*@__PURE__*/ proxyCustomElement(class SegmentView extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.ionSegmentViewScroll = createEvent(this, "ionSegmentViewScroll", 7);
+        this.scrollEndTimeout = null;
+        this.isTouching = false;
+        this.disabled = false;
+        this.isManualScroll = undefined;
+    }
+    handleScroll(ev) {
+        var _a;
+        const { scrollLeft, scrollWidth, clientWidth } = ev.target;
+        const scrollRatio = scrollLeft / (scrollWidth - clientWidth);
+        this.ionSegmentViewScroll.emit({
+            scrollRatio,
+            isManualScroll: (_a = this.isManualScroll) !== null && _a !== void 0 ? _a : true,
+        });
+        // Reset the timeout to check for scroll end
+        this.resetScrollEndTimeout();
+    }
+    /**
+     * Handle touch start event to know when the user is actively dragging the segment view.
+     */
+    handleScrollStart() {
+        if (this.scrollEndTimeout) {
+            clearTimeout(this.scrollEndTimeout);
+            this.scrollEndTimeout = null;
+        }
+        this.isTouching = true;
+    }
+    /**
+     * Handle touch end event to know when the user is no longer dragging the segment view.
+     */
+    handleTouchEnd() {
+        this.isTouching = false;
+    }
+    /**
+     * Reset the scroll end detection timer. This is called on every scroll event.
+     */
+    resetScrollEndTimeout() {
+        if (this.scrollEndTimeout) {
+            clearTimeout(this.scrollEndTimeout);
+            this.scrollEndTimeout = null;
+        }
+        this.scrollEndTimeout = setTimeout(() => {
+            this.checkForScrollEnd();
+        }, 
+        // Setting this to a lower value may result in inconsistencies in behavior
+        // across browsers (particularly Firefox).
+        // Ideally, all of this logic is removed once the scroll end event is
+        // supported on all browsers (https://caniuse.com/?search=scrollend)
+        100);
+    }
+    /**
+     * Check if the scroll has ended and the user is not actively touching.
+     * If the conditions are met (active content is enabled and no active touch),
+     * reset the scroll position and emit the scroll end event.
+     */
+    checkForScrollEnd() {
+        // Only emit scroll end event if the active content is not disabled and
+        // the user is not touching the segment view
+        if (!this.isTouching) {
+            this.isManualScroll = undefined;
+        }
+    }
+    /**
+     * @internal
+     *
+     * This method is used to programmatically set the displayed segment content
+     * in the segment view. Calling this method will update the `value` of the
+     * corresponding segment button.
+     *
+     * @param id: The id of the segment content to display.
+     * @param smoothScroll: Whether to animate the scroll transition.
+     */
+    async setContent(id, smoothScroll = true) {
+        const contents = this.getSegmentContents();
+        const index = contents.findIndex((content) => content.id === id);
+        if (index === -1)
+            return;
+        this.isManualScroll = false;
+        this.resetScrollEndTimeout();
+        const contentWidth = this.el.offsetWidth;
+        this.el.scrollTo({
+            top: 0,
+            left: index * contentWidth,
+            behavior: smoothScroll ? 'smooth' : 'instant',
+        });
+    }
+    getSegmentContents() {
+        return Array.from(this.el.querySelectorAll('ion-segment-content'));
+    }
+    render() {
+        const { disabled, isManualScroll } = this;
+        return (h(Host, { key: '9f4f11d31c4db776f077e59ae895b35dd4454717', class: {
+                'segment-view-disabled': disabled,
+                'segment-view-scroll-disabled': isManualScroll === false,
+            } }, h("slot", { key: 'ea58b21f031cee2ab2b70580f336deaefa364538' })));
+    }
+    get el() { return this; }
+    static get style() { return {
+        ios: IonSegmentViewIosStyle0,
+        md: IonSegmentViewMdStyle0
+    }; }
+}, [33, "ion-segment-view", {
+        "disabled": [4],
+        "isManualScroll": [32],
+        "setContent": [64]
+    }, [[1, "scroll", "handleScroll"], [1, "touchstart", "handleScrollStart"], [1, "touchend", "handleTouchEnd"]]]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ion-segment-view"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ion-segment-view":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SegmentView);
+            }
+            break;
+    } });
+}
+
+const IonSegmentView = SegmentView;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonSegmentView, defineCustomElement };

package/components/ion-segment.js

@@ -21,6 +21,7 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends HTMLEleme
         this.ionChange = createEvent(this, "ionChange", 7);
         this.ionSelect = createEvent(this, "ionSelect", 7);
         this.ionStyle = createEvent(this, "ionStyle", 7);
+        this.segmentViewEl = null;
         this.onClick = (ev) => {
             const current = ev.target;
             const previous = this.checked;
@@ -35,7 +36,13 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends HTMLEleme
             if (current !== previous) {
                 this.emitValueChange();
             }
-            if (this.scrollable || !this.swipeGesture) {
+            if (this.segmentViewEl) {
+                this.updateSegmentView();
+                if (this.scrollable && previous) {
+                    this.checkButton(previous, current);
+                }
+            }
+            else if (this.scrollable || !this.swipeGesture) {
                 if (previous) {
                     this.checkButton(previous, current);
                 }
@@ -91,19 +98,49 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends HTMLEleme
     swipeGestureChanged() {
         this.gestureChanged();
     }
-    valueChanged(value) {
+    valueChanged(value, oldValue) {
+        // Force a value to exist if we're using a segment view
+        if (this.segmentViewEl && value === undefined) {
+            this.value = this.getButtons()[0].value;
+            return;
+        }
+        if (oldValue !== undefined && value !== undefined) {
+            const buttons = this.getButtons();
+            const previous = buttons.find((button) => button.value === oldValue);
+            const current = buttons.find((button) => button.value === value);
+            if (previous && current) {
+                if (!this.segmentViewEl) {
+                    this.checkButton(previous, current);
+                }
+                else if (this.triggerScrollOnValueChange !== false) {
+                    this.updateSegmentView();
+                }
+            }
+        }
+        else if (value !== undefined && oldValue === undefined && this.segmentViewEl) {
+            this.updateSegmentView();
+        }
         /**
          * `ionSelect` is emitted every time the value changes (internal or external changes).
          * Used by `ion-segment-button` to determine if the button should be checked.
          */
         this.ionSelect.emit({ value });
-        this.scrollActiveButtonIntoView();
+        // The scroll listener should handle scrolling the active button into view as needed
+        if (!this.segmentViewEl) {
+            this.scrollActiveButtonIntoView();
+        }
+        this.triggerScrollOnValueChange = undefined;
     }
     disabledChanged() {
         this.gestureChanged();
-        const buttons = this.getButtons();
-        for (const button of buttons) {
-            button.disabled = this.disabled;
+        if (!this.segmentViewEl) {
+            const buttons = this.getButtons();
+            for (const button of buttons) {
+                button.disabled = this.disabled;
+            }
+        }
+        else {
+            this.segmentViewEl.disabled = this.disabled;
         }
     }
     gestureChanged() {
@@ -113,6 +150,10 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends HTMLEleme
     }
     connectedCallback() {
         this.emitStyle();
+        this.segmentViewEl = this.getSegmentView();
+    }
+    disconnectedCallback() {
+        this.segmentViewEl = null;
     }
     componentWillLoad() {
         this.emitStyle();
@@ -146,6 +187,9 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends HTMLEleme
         if (this.disabled) {
             this.disabledChanged();
         }
+        // Update segment view based on the initial value,
+        // but do not animate the scroll
+        this.updateSegmentView(false);
     }
     onStart(detail) {
         this.valueBeforeGesture = this.value;
@@ -162,6 +206,7 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends HTMLEleme
         if (value !== undefined) {
             if (this.valueBeforeGesture !== value) {
                 this.emitValueChange();
+                this.updateSegmentView();
             }
         }
         this.valueBeforeGesture = undefined;
@@ -189,12 +234,7 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends HTMLEleme
     setActivated(activated) {
         const buttons = this.getButtons();
         buttons.forEach((button) => {
-            if (activated) {
-                button.classList.add('segment-button-activated');
-            }
-            else {
-                button.classList.remove('segment-button-activated');
-            }
+            button.classList.toggle('segment-button-activated', activated);
         });
         this.activated = activated;
     }
@@ -245,6 +285,7 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends HTMLEleme
             currentIndicator.classList.add('segment-button-indicator-animated');
             // Remove the transform to slide the indicator back to the button clicked
             currentIndicator.style.setProperty('transform', '');
+            this.scrollActiveButtonIntoView(true);
         });
         this.value = current.value;
         this.setCheckedClasses();
@@ -260,6 +301,60 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends HTMLEleme
             buttons[next].classList.add('segment-button-after-checked');
         }
     }
+    getSegmentView() {
+        const buttons = this.getButtons();
+        // Get the first button with a contentId
+        const firstContentId = buttons.find((button) => button.contentId);
+        // Get the segment content with an id matching the button's contentId
+        const segmentContent = document.querySelector(`ion-segment-content[id="${firstContentId === null || firstContentId === void 0 ? void 0 : firstContentId.contentId}"]`);
+        // Return the segment view for that matching segment content
+        return segmentContent === null || segmentContent === void 0 ? void 0 : segmentContent.closest('ion-segment-view');
+    }
+    handleSegmentViewScroll(ev) {
+        const { scrollRatio, isManualScroll } = ev.detail;
+        if (!isManualScroll) {
+            return;
+        }
+        const dispatchedFrom = ev.target;
+        const segmentViewEl = this.segmentViewEl;
+        const segmentEl = this.el;
+        // Only update the indicator if the event was dispatched from the correct segment view
+        if (ev.composedPath().includes(segmentViewEl) || (dispatchedFrom === null || dispatchedFrom === void 0 ? void 0 : dispatchedFrom.contains(segmentEl))) {
+            const buttons = this.getButtons();
+            // If no buttons are found or there is no value set then do nothing
+            if (!buttons.length)
+                return;
+            const index = buttons.findIndex((button) => button.value === this.value);
+            const current = buttons[index];
+            const nextIndex = Math.round(scrollRatio * (buttons.length - 1));
+            if (this.lastNextIndex === undefined || this.lastNextIndex !== nextIndex) {
+                this.lastNextIndex = nextIndex;
+                this.triggerScrollOnValueChange = false;
+                this.checkButton(current, buttons[nextIndex]);
+                this.emitValueChange();
+            }
+        }
+    }
+    /**
+     * Finds the related segment view and sets its current content
+     * based on the selected segment button. This method
+     * should be called on initial load of the segment,
+     * after the gesture is completed (if dragging between segments)
+     * and when a segment button is clicked directly.
+     */
+    updateSegmentView(smoothScroll = true) {
+        const buttons = this.getButtons();
+        const button = buttons.find((btn) => btn.value === this.value);
+        // If the button does not have a contentId then there is
+        // no associated segment view to update
+        if (!(button === null || button === void 0 ? void 0 : button.contentId)) {
+            return;
+        }
+        const segmentView = this.segmentViewEl;
+        if (segmentView) {
+            segmentView.setContent(button.contentId, smoothScroll);
+        }
+    }
     scrollActiveButtonIntoView(smoothScroll = true) {
         const { scrollable, value, el } = this;
         if (scrollable) {
@@ -442,14 +537,14 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends HTMLEleme
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '1f50689291d24812e33145272f9a73c01e085383', role: "tablist", onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: '66bd7a565ba73540b3bbe56dd23b95e59bcef9bc', role: "tablist", onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'segment-activated': this.activated,
                 'segment-disabled': this.disabled,
                 'segment-scrollable': this.scrollable,
-            }) }, h("slot", { key: 'd3b90e1adabf0b923e41a36cd856dc0a5a3d041e', onSlotchange: this.onSlottedItemsChange })));
+            }) }, h("slot", { key: '782c521b1a33729b8eab1c4b879bc3f2ff48ae1b', onSlotchange: this.onSlottedItemsChange })));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -470,7 +565,7 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends HTMLEleme
         "value": [1032],
         "selectOnFocus": [4, "select-on-focus"],
         "activated": [32]
-    }, [[0, "keydown", "onKeyDown"]], {
+    }, [[16, "ionSegmentViewScroll", "handleSegmentViewScroll"], [0, "keydown", "onKeyDown"]], {
         "color": ["colorChanged"],
         "swipeGesture": ["swipeGestureChanged"],
         "value": ["valueChanged"],

package/components/ion-select-option.js

@@ -17,7 +17,7 @@ const SelectOption = /*@__PURE__*/ proxyCustomElement(class SelectOption extends
         this.value = undefined;
     }
     render() {
-        return h(Host, { key: 'b874cf2085770674ea56ce978c1e7c55d002b266', role: "option", id: this.inputId, class: getIonMode(this) });
+        return h(Host, { key: '2e6fa159464f04f6d8720f960141f67918bc7534', role: "option", id: this.inputId, class: getIonMode(this) });
     }
     get el() { return this; }
     static get style() { return IonSelectOptionStyle0; }

package/components/ion-select.js

@@ -638,7 +638,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: '66adece2b18fe49825ac12a28f3e7815b18f4558', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: '144dfa5c49549a74fe516c65b9b8104a477ac789', onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -654,7 +654,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: '39baea2f689358281a88ee99823f6ae0196bed08', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { key: '0cc64c4c86d9f9555c2a6485ad4fe54ebc051937', class: "select-wrapper-inner" }, h("slot", { key: '727faf66ffafc560338ed153fd71a644fdaa436a', name: "start" }), h("div", { key: '4b2167f408158a0bdf0b9f23ebbc38cf1ec3486d', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '7d84957672f9e467736d343ddc21f7eade33e469', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: 'ab1324b4b7e5c57082bdb954a24f63030c2ca480', class: "select-highlight" }))));
+            }) }, h("label", { key: '0edcfcbac575a9dccc77991531b6980d1caebf42', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { key: '348151d90cb093f5d21c7d4a834264ac4a312c40', class: "select-wrapper-inner" }, h("slot", { key: '8b7708c7f81217435c58276da0c08bba766d9500', name: "start" }), h("div", { key: '10c520a335da0a0d1cf40f9365597beb244d3b48', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '0f15c40a5495e98e29d2a21ba21e0bc6f1c0125a', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: 'c87faad2e5ebf7f9453397d7ede43abd64d21294', class: "select-highlight" }))));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/ion-skeleton-text.js

@@ -32,11 +32,11 @@ const SkeletonText = /*@__PURE__*/ proxyCustomElement(class SkeletonText extends
         const animated = this.animated && config.getBoolean('animated', true);
         const inMedia = hostContext('ion-avatar', this.el) || hostContext('ion-thumbnail', this.el);
         const mode = getIonMode(this);
-        return (h(Host, { key: '8a822ebe9b4e097bdb22765b3becc2949ebefbfb', class: {
+        return (h(Host, { key: 'fdfabf9364caf507450239b62be24f08873bd650', class: {
                 [mode]: true,
                 'skeleton-text-animated': animated,
                 'in-media': inMedia,
-            } }, h("span", { key: '6d85ce8c7561af1cfd5145c7224d08352d271a1c' }, "\u00A0")));
+            } }, h("span", { key: '3482c88dcc177547185ce87972afa064a542367d' }, "\u00A0")));
     }
     get el() { return this; }
     static get style() { return IonSkeletonTextStyle0; }

package/components/ion-split-pane.js

@@ -129,12 +129,12 @@ const SplitPane = /*@__PURE__*/ proxyCustomElement(class SplitPane extends HTMLE
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '4b1685044b3a9a80e001a543d8c854450c4d54d2', class: {
+        return (h(Host, { key: '1ca0b0299d03605bb358112ca56cbafbe58f00f5', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`split-pane-${mode}`]: true,
                 'split-pane-visible': this.visible,
-            } }, h("slot", { key: '4c3403788443770b356d671aeadabcf831623f46' })));
+            } }, h("slot", { key: 'abe231361727ae7fc63edd592a4490caac1909fb' })));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/ion-tab-bar.js

@@ -60,11 +60,11 @@ const TabBar = /*@__PURE__*/ proxyCustomElement(class TabBar extends HTMLElement
         const { color, translucent, keyboardVisible } = this;
         const mode = getIonMode(this);
         const shouldHide = keyboardVisible && this.el.getAttribute('slot') !== 'top';
-        return (h(Host, { key: '00ab2e0a72b41a18b2e01115138015106c0dd44a', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: 'a87fd2ea5df053705a37ea7ffec043e75c4a9907', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses(color, {
                 [mode]: true,
                 'tab-bar-translucent': translucent,
                 'tab-bar-hidden': shouldHide,
-            }) }, h("slot", { key: 'b57cd1a769232291d209c069c3ce7235f76b763b' })));
+            }) }, h("slot", { key: '81a6223299b6cab29d7ddced590e9152e2b3ded0' })));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/ion-tab-button.js

@@ -76,7 +76,7 @@ const TabButton = /*@__PURE__*/ proxyCustomElement(class TabButton extends HTMLE
             rel,
             target,
         };
-        return (h(Host, { key: '373a1dddbbe787ca4d0eb911ea44a514c82de241', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
+        return (h(Host, { key: '5976c45943ea7ea8e7c1a85fc9996de421439f08', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
                 [mode]: true,
                 'tab-selected': selected,
                 'tab-disabled': disabled,
@@ -88,7 +88,7 @@ const TabButton = /*@__PURE__*/ proxyCustomElement(class TabButton extends HTMLE
                 'ion-activatable': true,
                 'ion-selectable': true,
                 'ion-focusable': true,
-            } }, h("a", Object.assign({ key: 'be801e43c709675e2f4706fddb26c50875342b4e' }, attrs, { class: "button-native", part: "native", role: "tab", "aria-selected": selected ? 'true' : null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? '-1' : undefined }, inheritedAttributes), h("span", { key: 'b98aeff191a9d85f57f6cf3f47a8cefe1cd82f80', class: "button-inner" }, h("slot", { key: '2d672ec926d9446f9839405e91cfd65e6c693583' })), mode === 'md' && h("ion-ripple-effect", { key: '8cb8e7e39b2d16679c7855f7656b1380657415a1', type: "unbounded" }))));
+            } }, h("a", Object.assign({ key: '1db09d861b67ff292018fb4b0dc7b85bd4677eb8' }, attrs, { class: "button-native", part: "native", role: "tab", "aria-selected": selected ? 'true' : null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? '-1' : undefined }, inheritedAttributes), h("span", { key: '4381eafcb27e8c7bb0d86d4f115ceb0caf03b9b4', class: "button-inner" }, h("slot", { key: '1981135f6fbb88376c1bd923c55c70fe8b5c5159' })), mode === 'md' && h("ion-ripple-effect", { key: '0509bc7155d055d1ed710600e9cf4df135881491', type: "unbounded" }))));
     }
     get el() { return this; }
     static get style() { return {

package/components/ion-tab.js

@@ -55,10 +55,10 @@ const Tab = /*@__PURE__*/ proxyCustomElement(class Tab extends HTMLElement {
     }
     render() {
         const { tab, active, component } = this;
-        return (h(Host, { key: 'efde265064f6ef0080adf7a62d7364988900304c', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
+        return (h(Host, { key: 'cb75d0877979b3b8df8f7e1952bfa9677da1eaa5', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
                 'ion-page': component === undefined,
                 'tab-hidden': !active,
-            } }, h("slot", { key: 'e66fc4de857ffb7a78686bf41ecaae81f7b86cdb' })));
+            } }, h("slot", { key: '37fbb7b7a6b03eb93b1dacd2dc1025b78eb2aa6b' })));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/ion-tabs.js

@@ -150,7 +150,7 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
         return Array.from(this.el.querySelectorAll('ion-tab'));
     }
     render() {
-        return (h(Host, { key: '7c66ed6987f13190b66d5c205f2cf2d6e75e2ce4', onIonTabButtonClick: this.onTabClicked }, h("slot", { key: '57bc955794abbf4cb83760f4537ceca254e04266', name: "top" }), h("div", { key: 'b40cf45fb2c8257891e734901ce992946394cd4e', class: "tabs-inner" }, h("slot", { key: '690dc089bf85660d0cf8c415cb03239d1ddca66a' })), h("slot", { key: '9c49f441d74f0db2f77ebdff4d0c4d37c41f1a16', name: "bottom" })));
+        return (h(Host, { key: 'e01ccf6bfaccad094515be50e407399c733fc226', onIonTabButtonClick: this.onTabClicked }, h("slot", { key: '38d2d01dbfd8a08f01e6f0e27274b21d75424e37', name: "top" }), h("div", { key: '7e894f0f423e2d43e1c68daff5f9f6c442fad237', class: "tabs-inner" }, h("slot", { key: 'df16be529a0370a26d0adf850530b31607507c23' })), h("slot", { key: '44642e1cb24c3281c43db75fd69a32fe0defe40a', name: "bottom" })));
     }
     get el() { return this; }
     static get style() { return IonTabsStyle0; }

package/components/ion-text.js

@@ -17,9 +17,9 @@ const Text = /*@__PURE__*/ proxyCustomElement(class Text extends HTMLElement {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'b1179acfcabae40555440d14c05f8610802cd884', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'e134d70c04344b708a2ecf6253722781ad2ca826', class: createColorClasses(this.color, {
                 [mode]: true,
-            }) }, h("slot", { key: 'b240a6f543ed2d8b91b6584bb2834f1ecee8b606' })));
+            }) }, h("slot", { key: 'da79c760f7ebbcd007ce110439f05a62cb22eac8' })));
     }
     static get style() { return IonTextStyle0; }
 }, [1, "ion-text", {

package/components/ion-textarea.js

@@ -364,7 +364,7 @@ const Textarea = /*@__PURE__*/ proxyCustomElement(class Textarea extends HTMLEle
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (h(Host, { key: 'dd11d9187439e1b15791585a39490ab086c4bec9', class: createColorClasses(this.color, {
+        return (h(Host, { key: '8ce5e2f5ba3ac645f95f9b95922cfc2a7d3da459', class: createColorClasses(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -373,7 +373,7 @@ const Textarea = /*@__PURE__*/ proxyCustomElement(class Textarea extends HTMLEle
                 [`textarea-shape-${shape}`]: shape !== undefined,
                 [`textarea-label-placement-${labelPlacement}`]: true,
                 'textarea-disabled': disabled,
-            }) }, h("label", { key: '6c349e386e8b7834dc7ea01be6e217162869f5b3', class: "textarea-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: '2cfee57f35198e9d509ac8fe9d69705308b06e78', class: "textarea-wrapper-inner" }, h("div", { key: '969c6ae37f1940a83fbead95f621973281c9390e', class: "start-slot-wrapper" }, h("slot", { key: '17877837a5cf60069d3c683d9eb56c73c7d4c02e', name: "start" })), h("div", { key: 'd83136eab5b43dfa10685977c7b48868dde4743e', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ key: '43b17361dbbf65c0bca11e353a3e112b125d3067', class: "native-textarea", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value)), h("div", { key: '226ab7a01466bdfd30f425b7c6acbbf13514cc23', class: "end-slot-wrapper" }, h("slot", { key: '4341c8ace1a5694d8d86dccd5f72fca0e08f5f7d', name: "end" }))), shouldRenderHighlight && h("div", { key: '81ec5a64c111e2d04df50a8576695cf048352a1f', class: "textarea-highlight" })), this.renderBottomContent()));
+            }) }, h("label", { key: '746c40872c085d064f8f1e51580281c692626d5d', class: "textarea-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: '603f5e72ff1ee1deeaab7103f76cbc913663b4b4', class: "textarea-wrapper-inner" }, h("div", { key: '6185ed2a5ef3a5ea318a9fea16d38a24d522cb19', class: "start-slot-wrapper" }, h("slot", { key: '7376b204ca49c1468df12363298c449adcb149f1', name: "start" })), h("div", { key: '429183415690d7390acfaea6344e7b69c948f749', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ key: 'e7f00f1c2e5706832a80eb0a73e5b28eec428943', class: "native-textarea", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value)), h("div", { key: '6a82280cfbd2856a64b1078dd3ad94a62066494e', class: "end-slot-wrapper" }, h("slot", { key: '0a9543f5751e4fbf1039b247dfe0d437c3f9beed', name: "end" }))), shouldRenderHighlight && h("div", { key: 'b34296c968af3cdf46115ea7776af3a359c74734', class: "textarea-highlight" })), this.renderBottomContent()));
     }
     get el() { return this; }
     static get watchers() { return {