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

package/hydrate/index.js

@@ -28586,6 +28586,7 @@ class Segment {
         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;
@@ -28600,7 +28601,13 @@ class Segment {
             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);
                 }
@@ -28656,19 +28663,49 @@ class Segment {
     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() {
@@ -28678,6 +28715,10 @@ class Segment {
     }
     connectedCallback() {
         this.emitStyle();
+        this.segmentViewEl = this.getSegmentView();
+    }
+    disconnectedCallback() {
+        this.segmentViewEl = null;
     }
     componentWillLoad() {
         this.emitStyle();
@@ -28711,6 +28752,9 @@ class Segment {
         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;
@@ -28727,6 +28771,7 @@ class Segment {
         if (value !== undefined) {
             if (this.valueBeforeGesture !== value) {
                 this.emitValueChange();
+                this.updateSegmentView();
             }
         }
         this.valueBeforeGesture = undefined;
@@ -28754,12 +28799,7 @@ class Segment {
     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;
     }
@@ -28810,6 +28850,7 @@ class Segment {
             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();
@@ -28825,6 +28866,60 @@ class Segment {
             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) {
@@ -29007,14 +29102,14 @@ class Segment {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '1f50689291d24812e33145272f9a73c01e085383', role: "tablist", onClick: this.onClick, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '66bd7a565ba73540b3bbe56dd23b95e59bcef9bc', role: "tablist", onClick: this.onClick, class: createColorClasses$1(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,
-            }) }, hAsync("slot", { key: 'd3b90e1adabf0b923e41a36cd856dc0a5a3d041e', onSlotchange: this.onSlottedItemsChange })));
+            }) }, hAsync("slot", { key: '782c521b1a33729b8eab1c4b879bc3f2ff48ae1b', onSlotchange: this.onSlottedItemsChange })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -29039,7 +29134,7 @@ class Segment {
             "selectOnFocus": [4, "select-on-focus"],
             "activated": [32]
         },
-        "$listeners$": [[0, "keydown", "onKeyDown"]],
+        "$listeners$": [[16, "ionSegmentViewScroll", "handleSegmentViewScroll"], [0, "keydown", "onKeyDown"]],
         "$lazyBundleId$": "-",
         "$attrsToReflect$": [["color", "color"]]
     }; }
@@ -29076,6 +29171,7 @@ class SegmentButton {
             }
         };
         this.checked = false;
+        this.contentId = undefined;
         this.disabled = false;
         this.layout = 'icon-top';
         this.type = 'button';
@@ -29091,6 +29187,26 @@ class SegmentButton {
             addEventListener$1(segmentEl, 'ionSelect', this.updateState);
             addEventListener$1(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;
@@ -29124,7 +29240,7 @@ class SegmentButton {
         const { checked, type, disabled, hasIcon, hasLabel, layout, segmentEl } = this;
         const mode = getIonMode$1(this);
         const hasSegmentColor = () => (segmentEl === null || segmentEl === void 0 ? void 0 : segmentEl.color) !== undefined;
-        return (hAsync(Host, { key: '9b54e4841be5d0f4f2ee230a649bfbe01066c7c7', class: {
+        return (hAsync(Host, { key: 'd50a5d5e2f6206e8523598f258d8217d2903f69b', class: {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
@@ -29140,10 +29256,7 @@ class SegmentButton {
                 'ion-activatable': true,
                 'ion-activatable-instant': true,
                 'ion-focusable': true,
-            } }, hAsync("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), hAsync("span", { key: '0eeb2616f7c5a7a7fc1e2e3bd34ab461de6179f4', class: "button-inner" }, hAsync("slot", { key: '5ac8fafa2f23e30f8df63bfe236a9604cfb388ae' })), mode === 'md' && hAsync("ion-ripple-effect", { key: '86032e9726e2b6437ffc34f59fcbe564616cc9ca' })), hAsync("div", { key: '536b1da58dd2521be290707d6b1726831340cf9f', part: "indicator", class: {
-                'segment-button-indicator': true,
-                'segment-button-indicator-animated': true,
-            } }, hAsync("div", { key: 'b43124415ebd77c87285791522c5afc26a137f96', part: "indicator-background", class: "segment-button-indicator-background" }))));
+            } }, hAsync("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), hAsync("span", { key: '67965996c9ffe70553875e00d3da0ae5b2b1d814', class: "button-inner" }, hAsync("slot", { key: '5087988fe45a8fdf388ec44c395d0b745b207806' })), mode === 'md' && hAsync("ion-ripple-effect", { key: 'b24858de0750bbc769b3183fac0077dfe817ba27' })), hAsync("div", { key: '97b4359432acd1c9da0816360cd1df9472e183f7', part: "indicator", class: "segment-button-indicator segment-button-indicator-animated" }, hAsync("div", { key: '0561738ea15b0986f4ed3d8276d5e6f2d13f7e51', part: "indicator-background", class: "segment-button-indicator-background" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -29157,6 +29270,7 @@ class SegmentButton {
         "$flags$": 41,
         "$tagName$": "ion-segment-button",
         "$members$": {
+            "contentId": [513, "content-id"],
             "disabled": [1028],
             "layout": [1],
             "type": [1],
@@ -29166,6 +29280,151 @@ class SegmentButton {
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
+        "$attrsToReflect$": [["contentId", "content-id"]]
+    }; }
+}
+
+const segmentContentCss = ":host{scroll-snap-align:center;scroll-snap-stop:always;-ms-flex-negative:0;flex-shrink:0;width:100%}";
+var IonSegmentContentStyle0 = segmentContentCss;
+
+class SegmentContent {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        return (hAsync(Host, { key: '03684b2999ac64fe13e376fd7e7f279976e9d4f2' }, hAsync("slot", { key: '143031075bf33ca19e7cfd76fc8a67b83ccaf11c' })));
+    }
+    static get style() { return IonSegmentContentStyle0; }
+    static get cmpMeta() { return {
+        "$flags$": 9,
+        "$tagName$": "ion-segment-content",
+        "$members$": undefined,
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": []
+    }; }
+}
+
+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}";
+var 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}";
+var IonSegmentViewMdStyle0 = segmentViewMdCss;
+
+class SegmentView {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        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 (hAsync(Host, { key: '9f4f11d31c4db776f077e59ae895b35dd4454717', class: {
+                'segment-view-disabled': disabled,
+                'segment-view-scroll-disabled': isManualScroll === false,
+            } }, hAsync("slot", { key: 'ea58b21f031cee2ab2b70580f336deaefa364538' })));
+    }
+    get el() { return getElement(this); }
+    static get style() { return {
+        ios: IonSegmentViewIosStyle0,
+        md: IonSegmentViewMdStyle0
+    }; }
+    static get cmpMeta() { return {
+        "$flags$": 41,
+        "$tagName$": "ion-segment-view",
+        "$members$": {
+            "disabled": [4],
+            "isManualScroll": [32],
+            "setContent": [64]
+        },
+        "$listeners$": [[1, "scroll", "handleScroll"], [1, "touchstart", "handleScrollStart"], [1, "touchend", "handleTouchEnd"]],
+        "$lazyBundleId$": "-",
         "$attrsToReflect$": []
     }; }
 }
@@ -29780,7 +30039,7 @@ class Select {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
-        return (hAsync(Host, { key: '66adece2b18fe49825ac12a28f3e7815b18f4558', onClick: this.onClick, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '144dfa5c49549a74fe516c65b9b8104a477ac789', onClick: this.onClick, class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -29796,7 +30055,7 @@ class Select {
                 [`select-justify-${justify}`]: justifyEnabled,
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
-            }) }, hAsync("label", { key: '39baea2f689358281a88ee99823f6ae0196bed08', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), hAsync("div", { key: '0cc64c4c86d9f9555c2a6485ad4fe54ebc051937', class: "select-wrapper-inner" }, hAsync("slot", { key: '727faf66ffafc560338ed153fd71a644fdaa436a', name: "start" }), hAsync("div", { key: '4b2167f408158a0bdf0b9f23ebbc38cf1ec3486d', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), hAsync("slot", { key: '7d84957672f9e467736d343ddc21f7eade33e469', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && hAsync("div", { key: 'ab1324b4b7e5c57082bdb954a24f63030c2ca480', class: "select-highlight" }))));
+            }) }, hAsync("label", { key: '0edcfcbac575a9dccc77991531b6980d1caebf42', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), hAsync("div", { key: '348151d90cb093f5d21c7d4a834264ac4a312c40', class: "select-wrapper-inner" }, hAsync("slot", { key: '8b7708c7f81217435c58276da0c08bba766d9500', name: "start" }), hAsync("div", { key: '10c520a335da0a0d1cf40f9365597beb244d3b48', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), hAsync("slot", { key: '0f15c40a5495e98e29d2a21ba21e0bc6f1c0125a', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && hAsync("div", { key: 'c87faad2e5ebf7f9453397d7ede43abd64d21294', class: "select-highlight" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -29956,7 +30215,7 @@ class SelectModal {
             } }, option.text))));
     }
     render() {
-        return (hAsync(Host, { key: '694a6d282f489b4997105f6e602777d4df90421a', class: getIonMode$1(this) }, hAsync("ion-header", { key: '50bdd9144222231817bbb9adbb8f7f43985fc786' }, hAsync("ion-toolbar", { key: '47c1a62e188c6b79e32fa42724fde91cf396bc8a' }, this.header !== undefined && hAsync("ion-title", { key: 'db2a5480ac0f710842108de116ac8218be409fdb' }, this.header), hAsync("ion-buttons", { key: '21ca4e72b6220b821c3bac890ec9a8aacab69c29', slot: "end" }, hAsync("ion-button", { key: 'f08b33ff0b82c04c8205e0186235acdaf8085733', onClick: () => this.closeModal() }, "Close")))), hAsync("ion-content", { key: 'c35d024bebda7250b44b2b0ff97c2778c815f1ca' }, hAsync("ion-list", { key: '027ad22799a82b49c03bc9d9f2779cdbe896f218' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
+        return (hAsync(Host, { key: 'f4b92f4fc3d646f9a327e43a9622abaf69659c28', class: getIonMode$1(this) }, hAsync("ion-header", { key: '11232ef496e7abd69e55cef988963a4869a7b01e' }, hAsync("ion-toolbar", { key: 'e7c41878691a504d44c658db02807867df542588' }, this.header !== undefined && hAsync("ion-title", { key: 'fcf9d33e0f3e0076ff14805de68848f9ef199cca' }, this.header), hAsync("ion-buttons", { key: '748a967ae0ce68bc2fd018a6b9ebe0e4b810f6ac', slot: "end" }, hAsync("ion-button", { key: 'f5e60791870b5085a31b7af70ed4bb3fb83eb185', onClick: () => this.closeModal() }, "Close")))), hAsync("ion-content", { key: '159797957b6f788a9b393d91864c18db34481c68' }, hAsync("ion-list", { key: '4124554fe8b2411637cbf02f08e50e0d8f804175' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -29989,7 +30248,7 @@ class SelectOption {
         this.value = undefined;
     }
     render() {
-        return hAsync(Host, { key: 'b874cf2085770674ea56ce978c1e7c55d002b266', role: "option", id: this.inputId, class: getIonMode$1(this) });
+        return hAsync(Host, { key: '2e6fa159464f04f6d8720f960141f67918bc7534', role: "option", id: this.inputId, class: getIonMode$1(this) });
     }
     get el() { return getElement(this); }
     static get style() { return IonSelectOptionStyle0; }
@@ -30109,7 +30368,7 @@ class SelectPopover {
     render() {
         const { header, message, options, subHeader } = this;
         const hasSubHeaderOrMessage = subHeader !== undefined || message !== undefined;
-        return (hAsync(Host, { key: '8baf834489a89d2e65554eb4241fe389a525f85c', class: getIonMode$1(this) }, hAsync("ion-list", { key: '2646cd1047a308c4cbb89c3a936f9a13c307221b' }, header !== undefined && hAsync("ion-list-header", { key: 'aec9975d382f9e97eb5b7bd036fbd08f645f6462' }, header), hasSubHeaderOrMessage && (hAsync("ion-item", { key: 'd9e3298ba2c289fdef7624e2cbddc247061d4d75' }, hAsync("ion-label", { key: '6f068afe5db73092638dff9d1d3f60cefd1d2599', class: "ion-text-wrap" }, subHeader !== undefined && hAsync("h3", { key: '4403c78b13c3e861d199f4e75cca2876cb058267' }, subHeader), message !== undefined && hAsync("p", { key: '6af680fd7ed7bf0c04baa63e7e9bc44ad2d7a057' }, message)))), this.renderOptions(options))));
+        return (hAsync(Host, { key: 'dd0990db4de4f175b176b27f35501dd1604ca400', class: getIonMode$1(this) }, hAsync("ion-list", { key: 'cea2bc3687b8b2490a2a9ff4a1e16cd34169558e' }, header !== undefined && hAsync("ion-list-header", { key: '194aebb53453c43f913daae45a1a3066a1708c4c' }, header), hasSubHeaderOrMessage && (hAsync("ion-item", { key: 'b706b07a3c63ad8104d2db413e210c735ec1bec9' }, hAsync("ion-label", { key: '6e52b5b4cf6b04ff3dd5671d64264233de4190d5', class: "ion-text-wrap" }, subHeader !== undefined && hAsync("h3", { key: '6ef4440d17f5db8c96c63b9aa5073f4fe4b8ad62' }, subHeader), message !== undefined && hAsync("p", { key: 'c7b3b76c30ecd606c0e985a0258c13d3a75756e7' }, message)))), this.renderOptions(options))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -30157,11 +30416,11 @@ class SkeletonText {
         const animated = this.animated && config.getBoolean('animated', true);
         const inMedia = hostContext('ion-avatar', this.el) || hostContext('ion-thumbnail', this.el);
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '8a822ebe9b4e097bdb22765b3becc2949ebefbfb', class: {
+        return (hAsync(Host, { key: 'fdfabf9364caf507450239b62be24f08873bd650', class: {
                 [mode]: true,
                 'skeleton-text-animated': animated,
                 'in-media': inMedia,
-            } }, hAsync("span", { key: '6d85ce8c7561af1cfd5145c7224d08352d271a1c' }, "\u00A0")));
+            } }, hAsync("span", { key: '3482c88dcc177547185ce87972afa064a542367d' }, "\u00A0")));
     }
     get el() { return getElement(this); }
     static get style() { return IonSkeletonTextStyle0; }
@@ -30214,7 +30473,7 @@ class Spinner {
                 svgs.push(buildLine(spinner, duration, i, spinner.lines));
             }
         }
-        return (hAsync(Host, { key: '1313eca457d022d1e5aed560b03d7f2c9eba31d3', class: createColorClasses$1(self.color, {
+        return (hAsync(Host, { key: '9d30ee9f5aa0dd0e220da07e75d05b8b2435224d', class: createColorClasses$1(self.color, {
                 [mode]: true,
                 [`spinner-${spinnerName}`]: true,
                 'spinner-paused': self.paused || config.getBoolean('_testing'),
@@ -30314,12 +30573,12 @@ class SplitPane {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '4b1685044b3a9a80e001a543d8c854450c4d54d2', class: {
+        return (hAsync(Host, { key: '1ca0b0299d03605bb358112ca56cbafbe58f00f5', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`split-pane-${mode}`]: true,
                 'split-pane-visible': this.visible,
-            } }, hAsync("slot", { key: '4c3403788443770b356d671aeadabcf831623f46' })));
+            } }, hAsync("slot", { key: 'abe231361727ae7fc63edd592a4490caac1909fb' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -30388,10 +30647,10 @@ class Tab {
     }
     render() {
         const { tab, active, component } = this;
-        return (hAsync(Host, { key: 'efde265064f6ef0080adf7a62d7364988900304c', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
+        return (hAsync(Host, { key: 'cb75d0877979b3b8df8f7e1952bfa9677da1eaa5', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
                 'ion-page': component === undefined,
                 'tab-hidden': !active,
-            } }, hAsync("slot", { key: 'e66fc4de857ffb7a78686bf41ecaae81f7b86cdb' })));
+            } }, hAsync("slot", { key: '37fbb7b7a6b03eb93b1dacd2dc1025b78eb2aa6b' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -30469,11 +30728,11 @@ class TabBar {
         const { color, translucent, keyboardVisible } = this;
         const mode = getIonMode$1(this);
         const shouldHide = keyboardVisible && this.el.getAttribute('slot') !== 'top';
-        return (hAsync(Host, { key: '00ab2e0a72b41a18b2e01115138015106c0dd44a', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: 'a87fd2ea5df053705a37ea7ffec043e75c4a9907', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses$1(color, {
                 [mode]: true,
                 'tab-bar-translucent': translucent,
                 'tab-bar-hidden': shouldHide,
-            }) }, hAsync("slot", { key: 'b57cd1a769232291d209c069c3ce7235f76b763b' })));
+            }) }, hAsync("slot", { key: '81a6223299b6cab29d7ddced590e9152e2b3ded0' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -30571,7 +30830,7 @@ class TabButton {
             rel,
             target,
         };
-        return (hAsync(Host, { key: '373a1dddbbe787ca4d0eb911ea44a514c82de241', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
+        return (hAsync(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,
@@ -30583,7 +30842,7 @@ class TabButton {
                 'ion-activatable': true,
                 'ion-selectable': true,
                 'ion-focusable': true,
-            } }, hAsync("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), hAsync("span", { key: 'b98aeff191a9d85f57f6cf3f47a8cefe1cd82f80', class: "button-inner" }, hAsync("slot", { key: '2d672ec926d9446f9839405e91cfd65e6c693583' })), mode === 'md' && hAsync("ion-ripple-effect", { key: '8cb8e7e39b2d16679c7855f7656b1380657415a1', type: "unbounded" }))));
+            } }, hAsync("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), hAsync("span", { key: '4381eafcb27e8c7bb0d86d4f115ceb0caf03b9b4', class: "button-inner" }, hAsync("slot", { key: '1981135f6fbb88376c1bd923c55c70fe8b5c5159' })), mode === 'md' && hAsync("ion-ripple-effect", { key: '0509bc7155d055d1ed710600e9cf4df135881491', type: "unbounded" }))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -30759,7 +31018,7 @@ class Tabs {
         return Array.from(this.el.querySelectorAll('ion-tab'));
     }
     render() {
-        return (hAsync(Host, { key: '7c66ed6987f13190b66d5c205f2cf2d6e75e2ce4', onIonTabButtonClick: this.onTabClicked }, hAsync("slot", { key: '57bc955794abbf4cb83760f4537ceca254e04266', name: "top" }), hAsync("div", { key: 'b40cf45fb2c8257891e734901ce992946394cd4e', class: "tabs-inner" }, hAsync("slot", { key: '690dc089bf85660d0cf8c415cb03239d1ddca66a' })), hAsync("slot", { key: '9c49f441d74f0db2f77ebdff4d0c4d37c41f1a16', name: "bottom" })));
+        return (hAsync(Host, { key: 'e01ccf6bfaccad094515be50e407399c733fc226', onIonTabButtonClick: this.onTabClicked }, hAsync("slot", { key: '38d2d01dbfd8a08f01e6f0e27274b21d75424e37', name: "top" }), hAsync("div", { key: '7e894f0f423e2d43e1c68daff5f9f6c442fad237', class: "tabs-inner" }, hAsync("slot", { key: 'df16be529a0370a26d0adf850530b31607507c23' })), hAsync("slot", { key: '44642e1cb24c3281c43db75fd69a32fe0defe40a', name: "bottom" })));
     }
     get el() { return getElement(this); }
     static get style() { return IonTabsStyle0; }
@@ -30801,9 +31060,9 @@ class Text {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'b1179acfcabae40555440d14c05f8610802cd884', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: 'e134d70c04344b708a2ecf6253722781ad2ca826', class: createColorClasses$1(this.color, {
                 [mode]: true,
-            }) }, hAsync("slot", { key: 'b240a6f543ed2d8b91b6584bb2834f1ecee8b606' })));
+            }) }, hAsync("slot", { key: 'da79c760f7ebbcd007ce110439f05a62cb22eac8' })));
     }
     static get style() { return IonTextStyle0; }
     static get cmpMeta() { return {
@@ -31170,7 +31429,7 @@ class Textarea {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (hAsync(Host, { key: 'dd11d9187439e1b15791585a39490ab086c4bec9', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '8ce5e2f5ba3ac645f95f9b95922cfc2a7d3da459', class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -31179,7 +31438,7 @@ class Textarea {
                 [`textarea-shape-${shape}`]: shape !== undefined,
                 [`textarea-label-placement-${labelPlacement}`]: true,
                 'textarea-disabled': disabled,
-            }) }, hAsync("label", { key: '6c349e386e8b7834dc7ea01be6e217162869f5b3', class: "textarea-wrapper", htmlFor: inputId }, this.renderLabelContainer(), hAsync("div", { key: '2cfee57f35198e9d509ac8fe9d69705308b06e78', class: "textarea-wrapper-inner" }, hAsync("div", { key: '969c6ae37f1940a83fbead95f621973281c9390e', class: "start-slot-wrapper" }, hAsync("slot", { key: '17877837a5cf60069d3c683d9eb56c73c7d4c02e', name: "start" })), hAsync("div", { key: 'd83136eab5b43dfa10685977c7b48868dde4743e', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, hAsync("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)), hAsync("div", { key: '226ab7a01466bdfd30f425b7c6acbbf13514cc23', class: "end-slot-wrapper" }, hAsync("slot", { key: '4341c8ace1a5694d8d86dccd5f72fca0e08f5f7d', name: "end" }))), shouldRenderHighlight && hAsync("div", { key: '81ec5a64c111e2d04df50a8576695cf048352a1f', class: "textarea-highlight" })), this.renderBottomContent()));
+            }) }, hAsync("label", { key: '746c40872c085d064f8f1e51580281c692626d5d', class: "textarea-wrapper", htmlFor: inputId }, this.renderLabelContainer(), hAsync("div", { key: '603f5e72ff1ee1deeaab7103f76cbc913663b4b4', class: "textarea-wrapper-inner" }, hAsync("div", { key: '6185ed2a5ef3a5ea318a9fea16d38a24d522cb19', class: "start-slot-wrapper" }, hAsync("slot", { key: '7376b204ca49c1468df12363298c449adcb149f1', name: "start" })), hAsync("div", { key: '429183415690d7390acfaea6344e7b69c948f749', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, hAsync("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)), hAsync("div", { key: '6a82280cfbd2856a64b1078dd3ad94a62066494e', class: "end-slot-wrapper" }, hAsync("slot", { key: '0a9543f5751e4fbf1039b247dfe0d437c3f9beed', name: "end" }))), shouldRenderHighlight && hAsync("div", { key: 'b34296c968af3cdf46115ea7776af3a359c74734', class: "textarea-highlight" })), this.renderBottomContent()));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -31241,7 +31500,7 @@ class Thumbnail {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: 'cfa86b1da66346d3e3080092344c1c11e7e773d5', class: getIonMode$1(this) }, hAsync("slot", { key: 'db5ed41c9a024cf9ecc7905e30ecf68bd6219f7d' })));
+        return (hAsync(Host, { key: 'cfa9aeb1d4fd624a9732c5230d29dd887e4b7771', class: getIonMode$1(this) }, hAsync("slot", { key: '29bc6e64063cba44e2643228df54394883933918' })));
     }
     static get style() { return IonThumbnailStyle0; }
     static get cmpMeta() { return {
@@ -32077,9 +32336,9 @@ class Toast {
         if (layout === 'stacked' && startButtons.length > 0 && endButtons.length > 0) {
             printIonWarning('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 (hAsync(Host, Object.assign({ key: '8a04b1456cd16d54905ab006600110322b94b42a', tabindex: "-1" }, this.htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: 'c05655ff06af8d0e48c2a85396b07ad942fa81b4', tabindex: "-1" }, this.htmlAttributes, { style: {
                 zIndex: `${60000 + this.overlayIndex}`,
-            }, class: createColorClasses$1(this.color, Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), hAsync("div", { key: 'f89bd416cc490790efb46f92f0c172b7f40a39d9', class: wrapperClass }, hAsync("div", { key: 'a12e4b4678f147d081cfeb7b2e3e2a32ce185e19', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (hAsync("ion-icon", { key: '00c796e53e9199cf785e44e998b40425acba8888', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), hAsync("div", { key: 'd7cd8e583198b71a81e2ad2520f2927f28258d2a', 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$1(this.color, Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), hAsync("div", { key: '9393ead4de1bf28529661d6f64049d34e18d725c', class: wrapperClass }, hAsync("div", { key: '3e9dd73c17c337849c3f26e8d0f395b3e5ee20a7', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (hAsync("ion-icon", { key: '5d15b18364301ad55e44e9f601014ac33181590b', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), hAsync("div", { key: 'f6dd164502637a882c5caf18445d8509b85ad6f9', 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')))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -32299,7 +32558,7 @@ class Toggle {
         const value = this.getValue();
         const rtl = isRTL$1(el) ? 'rtl' : 'ltr';
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (hAsync(Host, { key: '4e9013794a74f581b4f969ceadef4e53c920e9a6', onClick: this.onClick, class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: 'f52195ec3bc14c024647cb41319c32a4cd330e19', onClick: this.onClick, class: createColorClasses$1(color, {
                 [mode]: true,
                 'in-item': hostContext('ion-item', el),
                 'toggle-activated': activated,
@@ -32309,10 +32568,10 @@ class Toggle {
                 [`toggle-alignment-${alignment}`]: alignment !== undefined,
                 [`toggle-label-placement-${labelPlacement}`]: true,
                 [`toggle-${rtl}`]: true,
-            }) }, hAsync("label", { key: '24585bfe9c697e160b1d3d52522b43498d415a4d', class: "toggle-wrapper" }, hAsync("input", Object.assign({ key: '9d56368c0474c5741fa8768b5ea0c8ff3d8c2f27', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, this.inheritedAttributes)), hAsync("div", { key: 'd21d608eada02baf5b91c38d577805deaec5f9ef', class: {
+            }) }, hAsync("label", { key: 'f8b3a215ad85b2cee611ad63449b584e1640f27f', class: "toggle-wrapper" }, hAsync("input", Object.assign({ key: 'f387b1ea840737a9737917e516834c887be99c09', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, this.inheritedAttributes)), hAsync("div", { key: '936af880db59fe377cd2de9101eb28a1c4fb8914', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !this.hasLabel,
-            }, part: "label" }, hAsync("slot", { key: 'c4f2e790a73d583938d70d72b4708b31b8ad1035' })), hAsync("div", { key: 'ced527f5f74d3066bf022e8af31f9ea82aaa6c8c', class: "native-wrapper" }, this.renderToggleControl()))));
+            }, part: "label" }, hAsync("slot", { key: '80a6672e2e792c15011a9496dcd75363cdba31c6' })), hAsync("div", { key: '2b2b318b38ab27b194c0dab4cecd77d9d780f2ca', class: "native-wrapper" }, this.renderToggleControl()))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -32416,10 +32675,10 @@ class Toolbar {
         this.childrenStyles.forEach((value) => {
             Object.assign(childStyles, value);
         });
-        return (hAsync(Host, { key: 'd7721dc62e57aa43896fbe7894a0fb6230baac0e', class: Object.assign(Object.assign({}, childStyles), createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '462538a5ecd01baf3cde116c9f029aeda26c81be', class: Object.assign(Object.assign({}, childStyles), createColorClasses$1(this.color, {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
-            })) }, hAsync("div", { key: '39d556b276726b403b7a903471babea77b6068e3', class: "toolbar-background" }), hAsync("div", { key: 'adb179225a641f0e91011cc7f1a8853dd947149f', class: "toolbar-container" }, hAsync("slot", { key: '6d4e4a21846359ec9b9f17d532d9797ecb33ba97', name: "start" }), hAsync("slot", { key: 'b9f0a8b4b0ea3ddfd74b7512a307505ac5cfccf8', name: "secondary" }), hAsync("div", { key: '826b3ecc75b89c22cb02f7d202c983f0ee438964', class: "toolbar-content" }, hAsync("slot", { key: 'aa8d25d5b55b30da47db05a82a5c4cdc36012c83' })), hAsync("slot", { key: '67a7b7a6ad934b6ea022e1af8a78161388955d9e', name: "primary" }), hAsync("slot", { key: '265536d48c3c28c7af7026c1e97261cee543862e', name: "end" }))));
+            })) }, hAsync("div", { key: 'c0b4415d3b2472de643a9be7cb3b13b3b628621b', class: "toolbar-background" }), hAsync("div", { key: '0ccb8a2dbeaa28d8f9bed87629c0c097446690c2', class: "toolbar-container" }, hAsync("slot", { key: '3e726dac359e923df21d80301651f16063a3de20', name: "start" }), hAsync("slot", { key: 'cd799330b56a7f8833bc61bb2807aafb21846f71', name: "secondary" }), hAsync("div", { key: '395282e6ac8c53576922dcdb5f08c25d34638c86', class: "toolbar-content" }, hAsync("slot", { key: 'a437c60e4ba5aae65e55169ae82a6f379868ec1d' })), hAsync("slot", { key: '711af9b9d321a7b31ede924c9bdcad767aa9a1ca', name: "primary" }), hAsync("slot", { key: 'ecc02edeaf80a837890bcb08d5096df1e22a0b9a', name: "end" }))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -32469,11 +32728,11 @@ class ToolbarTitle {
     render() {
         const mode = getIonMode$1(this);
         const size = this.getSize();
-        return (hAsync(Host, { key: '06af912c5ce99e229ab8fc12ec6fce6e6930f759', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '7293d2ecd6262feb0d8d769effbb208230baed89', class: createColorClasses$1(this.color, {
                 [mode]: true,
                 [`title-${size}`]: true,
                 'title-rtl': document.dir === 'rtl',
-            }) }, hAsync("div", { key: 'f4079cafd93014478b86389e0ebc29be34e63476', class: "toolbar-title" }, hAsync("slot", { key: '910488c983dea9549f533360ba57b379d341a499' }))));
+            }) }, hAsync("div", { key: '086ec3a361ebdf6506846a8704b457cda3a6f897', class: "toolbar-title" }, hAsync("slot", { key: '59add7eb92b82d6832a8f0894f897c51fdf4f214' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -32574,6 +32833,8 @@ registerComponents([
   Searchbar,
   Segment,
   SegmentButton,
+  SegmentContent,
+  SegmentView,
   Select,
   SelectModal,
   SelectOption,