@ionic/core 8.2.3-dev.11720020551.1b35ace4 → 8.2.3-dev.11721064272.19e3ddfd

package/dist/collection/components/segment-view/segment-view.js

@@ -0,0 +1,81 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { Host, h } from "@stencil/core";
+import { addEventListener } from "../../utils/helpers";
+export class SegmentView {
+    constructor() {
+        this.segmentEl = null;
+        this.updateSection = () => {
+            const { segmentEl } = this;
+            if (segmentEl) {
+                const value = segmentEl.value;
+                const index = this.getSegmentButtonIndexWithValue(value);
+                this.setSection(index);
+            }
+        };
+        this.setSection = (index) => {
+            const sectionWidth = this.el.offsetWidth;
+            this.el.scrollTo({
+                top: 0,
+                left: index * sectionWidth,
+                behavior: 'smooth',
+            });
+        };
+    }
+    segmentViewScroll(ev) {
+        const { segmentEl } = this;
+        const atSnappingPoint = ev.target.scrollLeft % ev.target.offsetWidth === 0;
+        if (atSnappingPoint) {
+            const index = Math.round(ev.target.scrollLeft / ev.target.offsetWidth);
+            const segmentButton = this.getSegmentButtonAtIndex(index);
+            if (segmentEl) {
+                segmentEl.value = segmentButton.value;
+            }
+        }
+    }
+    connectedCallback() {
+        const segmentEl = (this.segmentEl = document.querySelector(`ion-segment[view=${this.el.id}]`));
+        if (segmentEl) {
+            addEventListener(segmentEl, 'ionChange', this.updateSection);
+        }
+    }
+    getSegmentButtons() {
+        const { segmentEl } = this;
+        if (!segmentEl) {
+            return [];
+        }
+        return Array.from(segmentEl.querySelectorAll('ion-segment-button'));
+    }
+    getSegmentButtonAtIndex(index) {
+        return this.getSegmentButtons()[index];
+    }
+    getSegmentButtonIndexWithValue(value) {
+        return this.getSegmentButtons().findIndex((b) => b.value === value);
+    }
+    render() {
+        return (h(Host, { key: '3a5d905041b663c7e533c5361472fdaad65d0e46' }, h("slot", { key: 'd4a6c6942afa53c22c7edf03275a0fb4ad7cbeb1' })));
+    }
+    static get is() { return "ion-segment-view"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["segment-view.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["segment-view.css"]
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "scroll",
+                "method": "segmentViewScroll",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }];
+    }
+}

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

@@ -669,7 +669,7 @@ export class Select {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
-        return (h(Host, { key: '50a843952ba75a266cb2690e3bac68c7bbb8ba95', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: '63114b245835e18e63ab6b791713e1c34c2a91d3', onClick: this.onClick, class: createColorClasses(this.color, {
                 [theme]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -685,7 +685,7 @@ export class Select {
                 [`select-justify-${justify}`]: justifyEnabled,
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
-            }) }, h("label", { key: '617e8b1ee3636c35e8262748028c5c9b53349ab8', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { key: '0b5a7126bcb30203986c5a0ed9f2f41f25501ace', class: "select-wrapper-inner" }, h("slot", { key: '0e35013e26f58f04f7eb9228cb270991e5b755ae', name: "start" }), h("div", { key: 'cf131b61e7907f63a1ce32dd931a9753ae290807', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '0adb8f7cdd610dfe67e1a363180e99322f5a6343', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: 'd9d2954141a517296483c22eac4b143c4096e1c5', class: "select-highlight" }))));
+            }) }, h("label", { key: 'dd7f90e38fd21cb0ce2cb26c588ff1318a3b4e03', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { key: '946a1f025be4a63e1b7f9243d1e089e204f7e2c4', class: "select-wrapper-inner" }, h("slot", { key: '4ab1ffe6511e37ec148768edd41ba26ca59dc0a2', name: "start" }), h("div", { key: 'bc949b66207c31b4f412e1a0480c779bdb20ab99', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '3ce8d8bdf08ba900ae12f4ed51bcc693e9eb5f7c', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: 'ad3f883b723354327602b93208913dcfae218e2f', class: "select-highlight" }))));
     }
     static get is() { return "ion-select"; }
     static get encapsulation() { return "shadow"; }

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

@@ -15,7 +15,7 @@ export class SelectOption {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: '1a977b2d7953ecbddf216c5b68d47104dda07bce', class: {
+        return (h(Host, { key: '9c119de67b396ed5a1cd5efa40034a1b10313f1b', class: {
                 [theme]: true,
             }, role: "option", id: this.inputId }));
     }

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

@@ -106,9 +106,9 @@ export class SelectPopover {
         const { header, message, options, subHeader } = this;
         const hasSubHeaderOrMessage = subHeader !== undefined || message !== undefined;
         const theme = getIonTheme(this);
-        return (h(Host, { key: '6ac9472c819c6631cd64ad8810256dd03fde120b', class: {
+        return (h(Host, { key: '499511498ca8be82086bb06e2b27ce33bffc1ddb', class: {
                 [theme]: true,
-            } }, h("ion-list", { key: 'b485896c38c080bc42f92e962440cd3b8308e728' }, header !== undefined && h("ion-list-header", { key: '6a1df70265a4b9feec9521d5f946994345456925' }, header), hasSubHeaderOrMessage && (h("ion-item", { key: 'c4ecbcaa2c56c1cb900e039cbfe36c2fae03f2ac' }, h("ion-label", { key: 'e310d3445c6abfffb4ff00a1aec97dd09c94e1d3', class: "ion-text-wrap" }, subHeader !== undefined && h("h3", { key: '9a6ffdfd9df8aea92290caf317d855b262ac8998' }, subHeader), message !== undefined && h("p", { key: 'b5ca3c716d69e6a2c013df3fa3436b92953c4296' }, message)))), this.renderOptions(options))));
+            } }, h("ion-list", { key: '278f6bc1feeede9f02728971f322aa63f806321e' }, header !== undefined && h("ion-list-header", { key: 'ae4b4d8d73b7d353ac11e26dab35d001b7bfd2bf' }, header), hasSubHeaderOrMessage && (h("ion-item", { key: '79e6641ab2dbbd08811ddcf8f346b0f18e3f0454' }, h("ion-label", { key: '53788eacd7384c4f24c727cd9312da3a57ccc67b', class: "ion-text-wrap" }, subHeader !== undefined && h("h3", { key: '0f028877e1fb89b66c22f5963bc57257d34f653d' }, subHeader), message !== undefined && h("p", { key: 'ff3b24d1bddacf963d9e1c287e65b71c97bb95b9' }, message)))), this.renderOptions(options))));
     }
     static get is() { return "ion-select-popover"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/skeleton-text/skeleton-text.js

@@ -29,11 +29,11 @@ export class SkeletonText {
         const animated = this.animated && config.getBoolean('animated', true);
         const inMedia = hostContext('ion-avatar', this.el) || hostContext('ion-thumbnail', this.el);
         const theme = getIonTheme(this);
-        return (h(Host, { key: '20170a23455836848210459749d9ba6a6eaaff53', class: {
+        return (h(Host, { key: 'f788545e591fdd0d1b3b61ad5e97b02d2d7e46f4', class: {
                 [theme]: true,
                 'skeleton-text-animated': animated,
                 'in-media': inMedia,
-            } }, h("span", { key: '96a9a18da286285abb647e7b69a4832cbe59b3b8' }, "\u00A0")));
+            } }, h("span", { key: '4f62ad7f8851d4111c60e7f7b28edcbb7067125c' }, "\u00A0")));
     }
     static get is() { return "ion-skeleton-text"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spinner/spinner.js

@@ -43,7 +43,7 @@ export class Spinner {
                 svgs.push(buildLine(spinner, duration, i, spinner.lines));
             }
         }
-        return (h(Host, { key: '577bf2a998c801edc32a1d515fc930c471567e71', class: createColorClasses(self.color, {
+        return (h(Host, { key: '5cb7fe35a97d06ec56f83facd294847b51cbc7af', class: createColorClasses(self.color, {
                 [theme]: true,
                 [`spinner-${spinnerName}`]: true,
                 'spinner-paused': self.paused || config.getBoolean('_testing'),

package/dist/collection/components/split-pane/split-pane.js

@@ -122,12 +122,12 @@ export class SplitPane {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: 'f2090ca1bf3210b4ba6e20adafbc6f5839704cdd', class: {
+        return (h(Host, { key: 'a52854c638f501f9464c3d1d4c30bee020fd781e', class: {
                 [theme]: true,
                 // Used internally for styling
                 [`split-pane-${theme}`]: true,
                 'split-pane-visible': this.visible,
-            } }, h("slot", { key: '3ecadb0aa95e4b7799b34122afe25d028bba8710' })));
+            } }, h("slot", { key: 'b2164b195c5811dda3d855c47f1bb59975172329' })));
     }
     static get is() { return "ion-split-pane"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tab/tab.js

@@ -52,10 +52,10 @@ export class Tab {
     }
     render() {
         const { tab, active, component } = this;
-        return (h(Host, { key: '91a0d6e7f70446804044b06eaf22e6fe0eb14510', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
+        return (h(Host, { key: '121affd326db55663c47d9c917e64e863f909028', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
                 'ion-page': component === undefined,
                 'tab-hidden': !active,
-            } }, h("slot", { key: '6bb7036c2a8a149212b5afdc0a34c6131efd1aee' })));
+            } }, h("slot", { key: '8c80289c7e745a8a07692565519b9b13eb56ff19' })));
     }
     static get is() { return "ion-tab"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tab-bar/tab-bar.js

@@ -52,11 +52,11 @@ export class TabBar {
         const { color, translucent, keyboardVisible } = this;
         const theme = getIonTheme(this);
         const shouldHide = keyboardVisible && this.el.getAttribute('slot') !== 'top';
-        return (h(Host, { key: 'a17e0599a93095bd47d519336fda9ceeda3029d1', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: 'cf965ce80081170fd2200e7368c69cd6ccdada5d', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses(color, {
                 [theme]: true,
                 'tab-bar-translucent': translucent,
                 'tab-bar-hidden': shouldHide,
-            }) }, h("slot", { key: '7c1f1abe56e8a0f3f24d3479dd6c839aaf90c7be' })));
+            }) }, h("slot", { key: '94538a393f7cf1000f4c476a4afdc73b7d593f32' })));
     }
     static get is() { return "ion-tab-bar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -71,7 +71,7 @@ export class TabButton {
             rel,
             target,
         };
-        return (h(Host, { key: '9d7ead0ffeaea5d99e3aa357bff6c5ac64fa1f26', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
+        return (h(Host, { key: 'c5d5a400c9e489dca8f69a474e9d2f7321181352', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
                 [theme]: true,
                 'tab-selected': selected,
                 'tab-disabled': disabled,
@@ -83,7 +83,7 @@ export class TabButton {
                 'ion-activatable': true,
                 'ion-selectable': true,
                 'ion-focusable': true,
-            } }, h("a", Object.assign({ key: 'fa0e9730e8b396d83df43a97b41067bbc6b195c2' }, 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: '70b80731de0115a7720de8f0e1f16bac4eb326c3', class: "button-inner" }, h("slot", { key: '3abf65a17ef45a00ae54909b3301f68117a04575' })), theme === 'md' && h("ion-ripple-effect", { key: 'becf3d93675dc8943dc16fc27d204b5c1ad00817', type: "unbounded" }))));
+            } }, h("a", Object.assign({ key: '7c8ebc51f564778ebd07615b06466e9250539682' }, 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: '0ec2cb0c616c612af1a97338b5b774196c7498e5', class: "button-inner" }, h("slot", { key: '84ba9e4c88466da0ae7c71de19f9896c9e4e93ef' })), theme === 'md' && h("ion-ripple-effect", { key: '647c96627b7f8339d72c36ca01320677b8b7839c', type: "unbounded" }))));
     }
     static get is() { return "ion-tab-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -138,7 +138,7 @@ export class Tabs {
         return Array.from(this.el.querySelectorAll('ion-tab'));
     }
     render() {
-        return (h(Host, { key: 'b38aa13e0115484aa4201c438956ba598671c7f7', onIonTabButtonClick: this.onTabClicked }, h("slot", { key: '47c5aead7a4caf5a496a020e2c4bcac2f5b4082a', name: "top" }), h("div", { key: '839c4cf7b8adbf3263b6e8b94963fe41ba7b1b35', class: "tabs-inner" }, h("slot", { key: '74d33c76bb578a3eddc6a2bfc833018b912b2947' })), h("slot", { key: '45919fcd3ba83ab5d3a928ec83ca14039dde68e2', name: "bottom" })));
+        return (h(Host, { key: 'ba731d1538baa664111266c5f9bc3311fe02f9b7', onIonTabButtonClick: this.onTabClicked }, h("slot", { key: '51f8ca87cd096a8e638a0b15d4fbab5aa730f5fa', name: "top" }), h("div", { key: 'e608434927bb5aac108027a4ce9389a0d930e1c2', class: "tabs-inner" }, h("slot", { key: '2922d0e28afc21fda97f2b29a8b5222d9782a6b4' })), h("slot", { key: 'f42306887fc30a816c961fea6cb609375eb56875', name: "bottom" })));
     }
     static get is() { return "ion-tabs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/text/text.js

@@ -14,9 +14,9 @@ export class Text {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: '1d7afeee75e183280309a1300a919eb6b554226c', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'e1398a44433bb39074bd1c03a157968fde144dbd', class: createColorClasses(this.color, {
                 [theme]: true,
-            }) }, h("slot", { key: '5083935a5010701514fb18576912eabb738bb862' })));
+            }) }, h("slot", { key: '1c26cfb6121b165c9129fad3e98ae8a373949721' })));
     }
     static get is() { return "ion-text"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/textarea/textarea.js

@@ -360,7 +360,7 @@ export class Textarea {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (h(Host, { key: '911726b3af25343ca7ba3084a00f6f70d10c11ed', class: createColorClasses(this.color, {
+        return (h(Host, { key: '35aa08db103e5deb78d957cab4b927f6b75cfa0d', class: createColorClasses(this.color, {
                 [theme]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -369,7 +369,7 @@ export class Textarea {
                 [`textarea-shape-${shape}`]: shape !== undefined,
                 [`textarea-label-placement-${labelPlacement}`]: true,
                 'textarea-disabled': disabled,
-            }) }, h("label", { key: '6f5f1633788b266b919c4bf9da1598fe3e33d9c0', class: "textarea-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: 'bc04ce5f1174737a931c45f8851ba5a2b96e3f88', class: "textarea-wrapper-inner" }, h("div", { key: 'fa8552e1782232e56d7ff0ad69cd77f5bdff1dd8', class: "start-slot-wrapper" }, h("slot", { key: '96f59a916db5d3d386f5d87bfe5490b55bc39573', name: "start" })), h("div", { key: '7b0bab61d53d051bc0bfd8b7da99e9d8bc28d7d0', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ key: '162f9bafda1156f8b370e108a2acc76540b69f9a', 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: '00f6074ba777a9c4410267a41ac3303c30be4b43', class: "end-slot-wrapper" }, h("slot", { key: '633af4fbfbbada66b4755ead8f1fe8ec412530b7', name: "end" }))), shouldRenderHighlight && h("div", { key: '04e74015f00c89279f23a13cc8f67944f8c9d336', class: "textarea-highlight" })), this.renderBottomContent()));
+            }) }, h("label", { key: '088fd6d57899f9b1595712c7a63642e9877f5e00', class: "textarea-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: '3f1ab81e9c4a7a286f985fa7f6f30dca5f26833b', class: "textarea-wrapper-inner" }, h("div", { key: '4afa68f18bb62b32138a91d903c75672d9a8a9ba', class: "start-slot-wrapper" }, h("slot", { key: '635fa7a5c9754654a3d7f012d33fc12cbe9fd0cf', name: "start" })), h("div", { key: '0895b08cb759a157783a38f423c04967ec8c0ce1', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ key: 'ec1ebe99508fbce9897c870d5e74239a32dfba91', 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: '411186d7c420c386233296edcbc9afd1d3de03a7', class: "end-slot-wrapper" }, h("slot", { key: 'b37cd68f0dc3f310cd78107d6f61933ba0e27d83', name: "end" }))), shouldRenderHighlight && h("div", { key: '43c7ae2f1e797701d9dbfd905d40320bb0f40e89', class: "textarea-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-textarea"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/thumbnail/thumbnail.js

@@ -10,9 +10,9 @@ import { getIonTheme } from "../../global/ionic-global";
 export class Thumbnail {
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: '8911848dc9edd536023c8a68e51752b751e3f0ab', class: {
+        return (h(Host, { key: '43ea61d750f53e8f3623df191eb3795a59599e40', class: {
                 [theme]: true,
-            } }, h("slot", { key: 'aaa7d7010d4050eebaed490b3ef7e641b076607c' })));
+            } }, h("slot", { key: 'feaecfa188c84b219d61ff99296b34c7ab26ec66' })));
     }
     static get is() { return "ion-thumbnail"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/title/title.js

@@ -31,11 +31,11 @@ export class ToolbarTitle {
     render() {
         const theme = getIonTheme(this);
         const size = this.getSize();
-        return (h(Host, { key: '67f00e2664322d0a5df32e093c7e227fc6f16c98', class: createColorClasses(this.color, {
+        return (h(Host, { key: '2312208012fcc0021511e9f83a797f0efecc95d7', class: createColorClasses(this.color, {
                 [theme]: true,
                 [`title-${size}`]: true,
                 'title-rtl': document.dir === 'rtl',
-            }) }, h("div", { key: 'cfc8295c9c599a9a61ea794b30169fdd574708f1', class: "toolbar-title" }, h("slot", { key: '2065458af3ed39d230c935332e7ff9c9d2d20e78' }))));
+            }) }, h("div", { key: '0d5cb6cb7065aa70a299061ebd1d7be04f0c5d22', class: "toolbar-title" }, h("slot", { key: '9f95add2dda42160f45137f7ebd8df0f3c3f1a69' }))));
     }
     static get is() { return "ion-title"; }
     static get encapsulation() { return "shadow"; }

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

@@ -390,9 +390,9 @@ export 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 (h(Host, Object.assign({ key: 'cb84d6f739571bc4193840fb790caa5bb5d86570', tabindex: "-1" }, this.htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: 'c479651c07a43bc57908af9c40ebd096cf37b055', tabindex: "-1" }, this.htmlAttributes, { style: {
                 zIndex: `${60000 + this.overlayIndex}`,
-            }, class: createColorClasses(this.color, Object.assign(Object.assign({ [theme]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), h("div", { key: '2d9d8ce5d886779f406410197df2a6244032c012', class: wrapperClass }, h("div", { key: '3a64cc8e864daf97f13c94416a544a80738273ba', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { key: 'c1461d577adabfb1244be84d5bc433c256a86a38', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { key: '5a4cfe8b8fe74fa550468183b3f43294827b800f', class: "toast-content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
+            }, class: createColorClasses(this.color, Object.assign(Object.assign({ [theme]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), h("div", { key: 'd4939b5d4f3ffee11ad3167387fbcf5d65107ddc', class: wrapperClass }, h("div", { key: 'bea0d04b6c936b61d0a8df70eb147f2792b7dadd', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { key: 'ea29fdcf23d8b915bb3c294bff094743e3e06e82', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { key: 'c0092793067bbc2cd5b7e538ccdc82aacd424fe1', class: "toast-content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
     }
     static get is() { return "ion-toast"; }
     static get encapsulation() { return "shadow"; }

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

@@ -207,7 +207,7 @@ export class Toggle {
         const value = this.getValue();
         const rtl = isRTL(el) ? 'rtl' : 'ltr';
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (h(Host, { key: '06f5bc54f99b5f27f0d67a6934aea6bb671ec440', onClick: this.onClick, class: createColorClasses(color, {
+        return (h(Host, { key: 'aa9dc67384dc4be027ac562730e899f4315fdcfc', onClick: this.onClick, class: createColorClasses(color, {
                 [theme]: true,
                 'in-item': hostContext('ion-item', el),
                 'toggle-activated': activated,
@@ -217,10 +217,10 @@ export class Toggle {
                 [`toggle-alignment-${alignment}`]: true,
                 [`toggle-label-placement-${labelPlacement}`]: true,
                 [`toggle-${rtl}`]: true,
-            }) }, h("label", { key: '7831cd36159ce5fc9d854ebecb597ae3c659a1c1', class: "toggle-wrapper" }, h("input", Object.assign({ key: '11ea2c3830239223c8b570216ca84109155d7776', 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)), h("div", { key: '5ae16c5503913089ca9ec268cf4db8a7745460b6', class: {
+            }) }, h("label", { key: 'f154b73f5def7cc59a9d5f355eece52c57e5b493', class: "toggle-wrapper" }, h("input", Object.assign({ key: 'a1c4864c94a8f28a0d2e018ae35275125674cfa6', 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)), h("div", { key: '074b23eb8020c8318aeb8747c5bcef7e0ee235bb', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !this.hasLabel,
-            }, part: "label" }, h("slot", { key: '8787021fe340347d6ae44c22959f387f03b871e0' })), h("div", { key: '7ac6cf4bfeb41fc0e8ff9fa2e55571234ab07d03', class: "native-wrapper" }, this.renderToggleControl()))));
+            }, part: "label" }, h("slot", { key: '94d49b13cf0a4fa6fd0177931217446661691bc0' })), h("div", { key: 'c4468059e95a4f6342c60ccaaf3956e45a9b13cc', class: "native-wrapper" }, this.renderToggleControl()))));
     }
     static get is() { return "ion-toggle"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/toolbar/toolbar.js

@@ -63,10 +63,10 @@ export class Toolbar {
         this.childrenStyles.forEach((value) => {
             Object.assign(childStyles, value);
         });
-        return (h(Host, { key: '958f4b7dd7edd7e14188ede019a3ec83955047e7', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
+        return (h(Host, { key: '301c7915c8331f4b00cf929068083102ec85a75d', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
                 [theme]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
-            })) }, h("div", { key: '13c34671af2a47ee2d13c3348d87590696fe2043', class: "toolbar-background" }), h("div", { key: '00cb26c46ab564017c5b59133082966487f3268a', class: "toolbar-container" }, h("slot", { key: 'a9c5fc777ff5eab4ef91d7c9b274a53012280f35', name: "start" }), h("slot", { key: 'a5a4e11b5d5847ff167ae95b86cd3625d482e257', name: "secondary" }), h("div", { key: 'e9f06b74b6aa933363aa0b671216b37300cc660c', class: "toolbar-content" }, h("slot", { key: '05929530a64a6d497ef5bc69dbc42adc11c9694f' })), h("slot", { key: 'f03445495cd36c54a7a43b47ab47169c53d9d15b', name: "primary" }), h("slot", { key: 'd8a60db04c290933462b517cc6627500bd9ebe34', name: "end" }))));
+            })) }, h("div", { key: 'fa60782795f4c50a2bf6fe85799439ee4469c51f', class: "toolbar-background" }), h("div", { key: 'd22e03c135a3360b796c9149018888a176d05a7e', class: "toolbar-container" }, h("slot", { key: 'e97e52fd2426ef4fdddcad9202a5331c4d1ef6b7', name: "start" }), h("slot", { key: '1f82aa2d95a17ab478d13ade7ae52da227de2bfc', name: "secondary" }), h("div", { key: 'e7698f82a464a9c863bd3a602d396a14d987bad0', class: "toolbar-content" }, h("slot", { key: '215f4fcd1cae042da6e2d5ef9832d9857db1b7c6' })), h("slot", { key: '962027f724f2a3ba009dcb218f71bbc97fb6927a', name: "primary" }), h("slot", { key: '5d7d1a5132501a436a82e267d660ec7feea96012', name: "end" }))));
     }
     static get is() { return "ion-toolbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2024-07-03T15:32:11",
+  "timestamp": "2024-07-15T17:27:24",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.18.3",
@@ -31904,6 +31904,48 @@
         ]
       }
     },
+    {
+      "filePath": "src/components/segment-content/segment-content.tsx",
+      "encapsulation": "shadow",
+      "tag": "ion-segment-content",
+      "docs": "",
+      "docsTags": [],
+      "usage": {},
+      "props": [],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {}
+    },
+    {
+      "filePath": "src/components/segment-view/segment-view.tsx",
+      "encapsulation": "shadow",
+      "tag": "ion-segment-view",
+      "docs": "",
+      "docsTags": [],
+      "usage": {},
+      "props": [],
+      "methods": [],
+      "events": [],
+      "listeners": [
+        {
+          "event": "scroll",
+          "capture": false,
+          "passive": true
+        }
+      ],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {}
+    },
     {
       "filePath": "src/components/select/select.tsx",
       "encapsulation": "shadow",

package/dist/esm/ion-app_8.entry.js

@@ -1230,11 +1230,11 @@ const ToolbarTitle = class {
     render() {
         const theme = getIonTheme(this);
         const size = this.getSize();
-        return (h(Host, { key: '67f00e2664322d0a5df32e093c7e227fc6f16c98', class: createColorClasses(this.color, {
+        return (h(Host, { key: '2312208012fcc0021511e9f83a797f0efecc95d7', class: createColorClasses(this.color, {
                 [theme]: true,
                 [`title-${size}`]: true,
                 'title-rtl': document.dir === 'rtl',
-            }) }, h("div", { key: 'cfc8295c9c599a9a61ea794b30169fdd574708f1', class: "toolbar-title" }, h("slot", { key: '2065458af3ed39d230c935332e7ff9c9d2d20e78' }))));
+            }) }, h("div", { key: '0d5cb6cb7065aa70a299061ebd1d7be04f0c5d22', class: "toolbar-title" }, h("slot", { key: '9f95add2dda42160f45137f7ebd8df0f3c3f1a69' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -1306,10 +1306,10 @@ const Toolbar = class {
         this.childrenStyles.forEach((value) => {
             Object.assign(childStyles, value);
         });
-        return (h(Host, { key: '958f4b7dd7edd7e14188ede019a3ec83955047e7', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
+        return (h(Host, { key: '301c7915c8331f4b00cf929068083102ec85a75d', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
                 [theme]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
-            })) }, h("div", { key: '13c34671af2a47ee2d13c3348d87590696fe2043', class: "toolbar-background" }), h("div", { key: '00cb26c46ab564017c5b59133082966487f3268a', class: "toolbar-container" }, h("slot", { key: 'a9c5fc777ff5eab4ef91d7c9b274a53012280f35', name: "start" }), h("slot", { key: 'a5a4e11b5d5847ff167ae95b86cd3625d482e257', name: "secondary" }), h("div", { key: 'e9f06b74b6aa933363aa0b671216b37300cc660c', class: "toolbar-content" }, h("slot", { key: '05929530a64a6d497ef5bc69dbc42adc11c9694f' })), h("slot", { key: 'f03445495cd36c54a7a43b47ab47169c53d9d15b', name: "primary" }), h("slot", { key: 'd8a60db04c290933462b517cc6627500bd9ebe34', name: "end" }))));
+            })) }, h("div", { key: 'fa60782795f4c50a2bf6fe85799439ee4469c51f', class: "toolbar-background" }), h("div", { key: 'd22e03c135a3360b796c9149018888a176d05a7e', class: "toolbar-container" }, h("slot", { key: 'e97e52fd2426ef4fdddcad9202a5331c4d1ef6b7', name: "start" }), h("slot", { key: '1f82aa2d95a17ab478d13ade7ae52da227de2bfc', name: "secondary" }), h("div", { key: 'e7698f82a464a9c863bd3a602d396a14d987bad0', class: "toolbar-content" }, h("slot", { key: '215f4fcd1cae042da6e2d5ef9832d9857db1b7c6' })), h("slot", { key: '962027f724f2a3ba009dcb218f71bbc97fb6927a', name: "primary" }), h("slot", { key: '5d7d1a5132501a436a82e267d660ec7feea96012', name: "end" }))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/ion-avatar_3.entry.js

@@ -136,9 +136,9 @@ const Thumbnail = class {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: '8911848dc9edd536023c8a68e51752b751e3f0ab', class: {
+        return (h(Host, { key: '43ea61d750f53e8f3623df191eb3795a59599e40', class: {
                 [theme]: true,
-            } }, h("slot", { key: 'aaa7d7010d4050eebaed490b3ef7e641b076607c' })));
+            } }, h("slot", { key: 'feaecfa188c84b219d61ff99296b34c7ab26ec66' })));
     }
 };
 Thumbnail.style = IonThumbnailStyle0;

package/dist/esm/ion-checkbox.entry.js

@@ -6,7 +6,7 @@ import { i as inheritAriaAttributes, d as renderHiddenInput } from './helpers-da
 import { c as createColorClasses, h as hostContext } from './theme-01f3f29c.js';
 import { d as getIonTheme } from './ionic-global-be8fa30a.js';
 
-const checkboxIonicCss = ":host{--border-width:var(--ionic-border-size-025, 1px);--border-style:var(--ionic-border-style-solid, solid);--border-color:var(--ionic-color-neutral-800, #626262);--checkmark-width:3;--focus-ring-color:var(--ionic-state-focus-1, #9ec4fd);--focus-ring-width:var(--ionic-border-size-050, 2px);--focus-ring-offset:var(--ionic-space-050, 2px);--size:var(--ionic-scale-600, 24px);--checkbox-background-checked:var(--ionic-color-primary-base, #105cef);--border-color-checked:var(--ionic-color-primary-base, #105cef);--checkmark-color:var(--ionic-color-base-white, #ffffff);--transition:none;display:inline-block;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2}:host::after{right:0;left:0;top:50%;position:absolute;height:100%;min-height:var(--ionic-scale-1200, 48px);-webkit-transform:translateY(-50%);transform:translateY(-50%);content:\"\";cursor:pointer;z-index:1}:host .native-wrapper{position:relative}:host(.in-item){-ms-flex:1 1 0px;flex:1 1 0;width:100%;height:100%}:host([slot=start]),:host([slot=end]){-ms-flex:initial;flex:initial;width:auto}.checkbox-wrapper{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;height:inherit;cursor:inherit}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item) .label-text-wrapper{margin-top:var(--ionic-space-250, 10px);margin-bottom:var(--ionic-space-250, 10px)}:host(.in-item.checkbox-label-placement-stacked) .label-text-wrapper{margin-top:var(--ionic-space-250, 10px);margin-bottom:var(--ionic-space-400, 16px)}:host(.in-item.checkbox-label-placement-stacked) .native-wrapper{margin-bottom:var(--ionic-space-250, 10px)}.label-text-wrapper-hidden{display:none}input{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;opacity:0;overflow:hidden;clip:rect(0 0 0 0);-webkit-appearance:none;-moz-appearance:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.checkbox-icon{border-radius:var(--border-radius);position:relative;width:var(--size);height:var(--size);-webkit-transition:var(--transition);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--checkbox-background);-webkit-box-sizing:border-box;box-sizing:border-box}.checkbox-icon path{fill:var(--checkmark-color);opacity:0}:host(.checkbox-justify-space-between) .checkbox-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.checkbox-justify-start) .checkbox-wrapper{-ms-flex-pack:start;justify-content:start}:host(.checkbox-justify-end) .checkbox-wrapper{-ms-flex-pack:end;justify-content:end}:host(.checkbox-alignment-start) .checkbox-wrapper{-ms-flex-align:start;align-items:start}:host(.checkbox-alignment-center) .checkbox-wrapper{-ms-flex-align:center;align-items:center}:host(.checkbox-label-placement-start) .checkbox-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.checkbox-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:var(--ionic-space-400, 16px);margin-inline-end:var(--ionic-space-400, 16px)}:host(.checkbox-label-placement-end) .checkbox-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.checkbox-label-placement-end) .label-text-wrapper{-webkit-margin-start:var(--ionic-space-400, 16px);margin-inline-start:var(--ionic-space-400, 16px);-webkit-margin-end:0;margin-inline-end:0}:host(.checkbox-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:var(--ionic-space-400, 16px);margin-inline-end:var(--ionic-space-400, 16px)}:host(.checkbox-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.checkbox-label-placement-stacked) .checkbox-wrapper{-ms-flex-direction:column;flex-direction:column}:host(.checkbox-label-placement-stacked) .label-text-wrapper{-webkit-transform:scale(0.75);transform:scale(0.75);margin-left:0;margin-right:0;margin-bottom:var(--ionic-space-400, 16px);max-width:133.3333333333%}:host(.checkbox-size-small){--size:var(--ionic-scale-400, 16px)}:host(.checkbox-checked) .checkbox-icon,:host(.checkbox-indeterminate) .checkbox-icon{border-color:var(--border-color-checked);background:var(--checkbox-background-checked)}:host(.checkbox-checked) .checkbox-icon path,:host(.checkbox-indeterminate) .checkbox-icon path{opacity:1}:host(.ion-invalid){--focus-ring-color:var(--ionic-state-focus-2, #ffafaf)}:host(.ion-invalid) .checkbox-icon{border-color:var(--ionic-color-danger-800, #bf2222)}:host(.checkbox-disabled){pointer-events:none}:host(.checkbox-disabled) .native-wrapper:after{right:0;left:0;top:0;bottom:0;position:absolute;background-color:var(--ionic-state-disabled, rgba(255, 255, 255, 0.6));content:\"\";pointer-events:none}:host(.checkbox-disabled) .checkbox-icon{border-color:var(--ionic-color-neutral-800, #626262);background-color:var(--ionic-state-disabled, rgba(255, 255, 255, 0.6))}:host(.checkbox-disabled.checkbox-checked) .checkbox-icon{border-width:var(--ionic-border-size-0, 0px);background-color:var(--ionic-color-primary-base, #105cef)}@media (any-hover: hover){:host(:hover) .checkbox-icon{background-color:var(--ionic-color-neutral-100, #f1f1f1)}:host(:hover.checkbox-checked) .checkbox-icon,:host(:hover.checkbox-indeterminate) .checkbox-icon{background-color:var(--ionic-color-primary-800, #0f54da)}}:host(.ion-focused:not(.checkbox-disabled)) .checkbox-icon{outline:var(--focus-ring-width) var(--ionic-border-style-solid, solid) var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}:host(.ion-activated) .checkbox-icon{background-color:var(--ionic-color-neutral-200, #e7e7e7)}:host(.ion-activated.checkbox-checked) .checkbox-icon,:host(.ion-activated.checkbox-indeterminate) .checkbox-icon{background-color:var(--ionic-color-primary-900, #0d4bc3)}:host(.checkbox-shape-soft){--border-radius:var(--ionic-border-radius-100, 4px)}:host(.checkbox-size-small.checkbox-shape-soft){--border-radius:var(--ionic-border-radius-050, 2px)}:host(.checkbox-shape-rectangular){--border-radius:var(--ionic-border-radius-0, 0px)}.checkbox-wrapper{min-height:var(--ionic-scale-1200, 48px)}";
+const checkboxIonicCss = ":host{--border-width:var(--ionic-border-size-025, 1px);--border-style:var(--ionic-border-style-solid, solid);--border-color:var(--ionic-color-neutral-800, #626262);--checkmark-width:var(--ionic-scale-400, 16px);--checkmark-height:var(--checkmark-width);--focus-ring-color:var(--ionic-state-focus-1, #9ec4fd);--focus-ring-width:var(--ionic-border-size-050, 2px);--focus-ring-offset:var(--ionic-space-050, 2px);--size:var(--ionic-scale-600, 24px);--checkbox-background-checked:var(--ionic-color-primary-base, #105cef);--border-color-checked:var(--ionic-color-primary-base, #105cef);--checkmark-color:var(--ionic-color-base-white, #ffffff);--transition:none;display:inline-block;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2}:host::after{right:0;left:0;top:50%;position:absolute;height:100%;min-height:var(--ionic-scale-1200, 48px);-webkit-transform:translateY(-50%);transform:translateY(-50%);content:\"\";cursor:pointer;z-index:1}:host .native-wrapper{position:relative}:host(.in-item){-ms-flex:1 1 0px;flex:1 1 0;width:100%;height:100%}:host([slot=start]),:host([slot=end]){-ms-flex:initial;flex:initial;width:auto}.checkbox-wrapper{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;height:inherit;cursor:inherit}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item) .label-text-wrapper{margin-top:var(--ionic-space-250, 10px);margin-bottom:var(--ionic-space-250, 10px)}:host(.in-item.checkbox-label-placement-stacked) .label-text-wrapper{margin-top:var(--ionic-space-250, 10px);margin-bottom:var(--ionic-space-400, 16px)}:host(.in-item.checkbox-label-placement-stacked) .native-wrapper{margin-bottom:var(--ionic-space-250, 10px)}.label-text-wrapper-hidden{display:none}input{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;opacity:0;overflow:hidden;clip:rect(0 0 0 0);-webkit-appearance:none;-moz-appearance:none}.native-wrapper{border-radius:var(--border-radius);display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:var(--size);height:var(--size);-webkit-transition:var(--transition);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--checkbox-background);-webkit-box-sizing:border-box;box-sizing:border-box}.checkbox-icon{position:relative;width:var(--checkmark-width);height:var(--checkmark-height)}.checkbox-icon path{fill:var(--checkmark-color);opacity:0}:host(.checkbox-justify-space-between) .checkbox-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.checkbox-justify-start) .checkbox-wrapper{-ms-flex-pack:start;justify-content:start}:host(.checkbox-justify-end) .checkbox-wrapper{-ms-flex-pack:end;justify-content:end}:host(.checkbox-alignment-start) .checkbox-wrapper{-ms-flex-align:start;align-items:start}:host(.checkbox-alignment-center) .checkbox-wrapper{-ms-flex-align:center;align-items:center}:host(.checkbox-label-placement-start) .checkbox-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.checkbox-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:var(--ionic-space-400, 16px);margin-inline-end:var(--ionic-space-400, 16px)}:host(.checkbox-label-placement-end) .checkbox-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.checkbox-label-placement-end) .label-text-wrapper{-webkit-margin-start:var(--ionic-space-400, 16px);margin-inline-start:var(--ionic-space-400, 16px);-webkit-margin-end:0;margin-inline-end:0}:host(.checkbox-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:var(--ionic-space-400, 16px);margin-inline-end:var(--ionic-space-400, 16px)}:host(.checkbox-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.checkbox-label-placement-stacked) .checkbox-wrapper{-ms-flex-direction:column;flex-direction:column}:host(.checkbox-label-placement-stacked) .label-text-wrapper{-webkit-transform:scale(0.75);transform:scale(0.75);margin-left:0;margin-right:0;margin-bottom:var(--ionic-space-400, 16px);max-width:133.3333333333%}:host(.checkbox-size-small){--size:var(--ionic-scale-400, 16px)}:host(.checkbox-checked) .native-wrapper,:host(.checkbox-indeterminate) .native-wrapper{border-color:var(--border-color-checked);background:var(--checkbox-background-checked)}:host(.checkbox-checked) .checkbox-icon path,:host(.checkbox-indeterminate) .checkbox-icon path{opacity:1}:host(.ion-invalid){--focus-ring-color:var(--ionic-state-focus-2, #ffafaf)}:host(.ion-invalid) .native-wrapper{border-color:var(--ionic-color-danger-800, #bf2222)}:host(.checkbox-disabled){pointer-events:none}:host(.checkbox-disabled) .native-wrapper:after{right:0;left:0;top:0;bottom:0;position:absolute;background-color:var(--ionic-state-disabled, rgba(255, 255, 255, 0.6));content:\"\";pointer-events:none;right:unset;left:unset;top:unset;bottom:unset;width:inherit;height:inherit}:host(.checkbox-disabled) .native-wrapper{border-color:var(--ionic-color-neutral-800, #626262);background-color:var(--ionic-state-disabled, rgba(255, 255, 255, 0.6))}:host(.checkbox-disabled.checkbox-checked) .native-wrapper{border-width:var(--ionic-border-size-0, 0px);background-color:var(--ionic-color-primary-base, #105cef)}@media (any-hover: hover){:host(:hover) .native-wrapper{background-color:var(--ionic-color-neutral-100, #f1f1f1)}:host(:hover.checkbox-checked) .native-wrapper,:host(:hover.checkbox-indeterminate) .native-wrapper{background-color:var(--ionic-color-primary-800, #0f54da)}}:host(.ion-focused:not(.checkbox-disabled)) .native-wrapper{outline:var(--focus-ring-width) var(--ionic-border-style-solid, solid) var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}:host(.ion-activated) .native-wrapper{background-color:var(--ionic-color-neutral-200, #e7e7e7)}:host(.ion-activated.checkbox-checked) .native-wrapper,:host(.ion-activated.checkbox-indeterminate) .native-wrapper{background-color:var(--ionic-color-primary-900, #0d4bc3)}:host(.checkbox-shape-soft){--border-radius:var(--ionic-border-radius-100, 4px)}:host(.checkbox-size-small.checkbox-shape-soft){--border-radius:var(--ionic-border-radius-050, 2px)}:host(.checkbox-shape-rectangular){--border-radius:var(--ionic-border-radius-0, 0px)}.checkbox-wrapper{min-height:var(--ionic-scale-1200, 48px)}";
 const IonCheckboxIonicStyle0 = checkboxIonicCss;
 
 const checkboxIosCss = ":host{--checkbox-background-checked:var(--ion-color-primary, #0054e9);--border-color-checked:var(--ion-color-primary, #0054e9);--checkmark-color:var(--ion-color-primary-contrast, #fff);--transition:none;display:inline-block;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2}:host(.in-item){-ms-flex:1 1 0px;flex:1 1 0;width:100%;height:100%}:host([slot=start]),:host([slot=end]){-ms-flex:initial;flex:initial;width:auto}:host(.ion-color){--checkbox-background-checked:var(--ion-color-base);--border-color-checked:var(--ion-color-base);--checkmark-color:var(--ion-color-contrast)}.checkbox-wrapper{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;height:inherit;cursor:inherit}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item) .label-text-wrapper{margin-top:10px;margin-bottom:10px}:host(.in-item.checkbox-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.checkbox-label-placement-stacked) .native-wrapper{margin-bottom:10px}.label-text-wrapper-hidden{display:none}input{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;opacity:0;overflow:hidden;clip:rect(0 0 0 0);-webkit-appearance:none;-moz-appearance:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.checkbox-icon{border-radius:var(--border-radius);position:relative;width:var(--size);height:var(--size);-webkit-transition:var(--transition);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--checkbox-background);-webkit-box-sizing:border-box;box-sizing:border-box}.checkbox-icon path{fill:none;stroke:var(--checkmark-color);stroke-width:var(--checkmark-width);opacity:0}:host(.checkbox-justify-space-between) .checkbox-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.checkbox-justify-start) .checkbox-wrapper{-ms-flex-pack:start;justify-content:start}:host(.checkbox-justify-end) .checkbox-wrapper{-ms-flex-pack:end;justify-content:end}:host(.checkbox-alignment-start) .checkbox-wrapper{-ms-flex-align:start;align-items:start}:host(.checkbox-alignment-center) .checkbox-wrapper{-ms-flex-align:center;align-items:center}:host(.checkbox-label-placement-start) .checkbox-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.checkbox-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.checkbox-label-placement-end) .checkbox-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.checkbox-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.checkbox-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.checkbox-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.checkbox-label-placement-stacked) .checkbox-wrapper{-ms-flex-direction:column;flex-direction:column}:host(.checkbox-label-placement-stacked) .label-text-wrapper{-webkit-transform:scale(0.75);transform:scale(0.75);margin-left:0;margin-right:0;margin-bottom:16px;max-width:calc(100% / 0.75)}:host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]):host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper,:host-context([dir=rtl]).checkbox-label-placement-stacked.checkbox-alignment-start .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.checkbox-label-placement-stacked.checkbox-alignment-start:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper{-webkit-transform-origin:center top;transform-origin:center top}:host-context([dir=rtl]):host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper,:host-context([dir=rtl]).checkbox-label-placement-stacked.checkbox-alignment-center .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){:host(.checkbox-label-placement-stacked.checkbox-alignment-center:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}}:host(.checkbox-checked) .checkbox-icon,:host(.checkbox-indeterminate) .checkbox-icon{border-color:var(--border-color-checked);background:var(--checkbox-background-checked)}:host(.checkbox-checked) .checkbox-icon path,:host(.checkbox-indeterminate) .checkbox-icon path{opacity:1}:host(.checkbox-disabled){pointer-events:none}:host{--border-radius:50%;--border-width:0.125rem;--border-style:solid;--border-color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.23);--checkbox-background:var(--ion-item-background, var(--ion-background-color, #fff));--size:min(1.375rem, 55.836px);--checkmark-width:1.5px}:host(.checkbox-disabled){opacity:0.3}";

package/dist/esm/ion-item_8.entry.js

@@ -534,11 +534,11 @@ const SkeletonText = class {
         const animated = this.animated && config.getBoolean('animated', true);
         const inMedia = hostContext('ion-avatar', this.el) || hostContext('ion-thumbnail', this.el);
         const theme = getIonTheme(this);
-        return (h(Host, { key: '20170a23455836848210459749d9ba6a6eaaff53', class: {
+        return (h(Host, { key: 'f788545e591fdd0d1b3b61ad5e97b02d2d7e46f4', class: {
                 [theme]: true,
                 'skeleton-text-animated': animated,
                 'in-media': inMedia,
-            } }, h("span", { key: '96a9a18da286285abb647e7b69a4832cbe59b3b8' }, "\u00A0")));
+            } }, h("span", { key: '4f62ad7f8851d4111c60e7f7b28edcbb7067125c' }, "\u00A0")));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/ion-segment-content.entry.js

@@ -0,0 +1,20 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { r as registerInstance, h, i as Host, g as getElement } from './index-3321c202.js';
+
+const segmentContentCss = ":host{scroll-snap-align:center;-ms-flex-negative:0;flex-shrink:0;width:100%}";
+const IonSegmentContentStyle0 = segmentContentCss;
+
+const SegmentContent = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        return (h(Host, { key: '0b3b79ccf751ca783b40e061e096ae985fab878d' }, h("slot", { key: '857f85e248e9ebe402d5b29503a76e1aad574ae7' })));
+    }
+    get el() { return getElement(this); }
+};
+SegmentContent.style = IonSegmentContentStyle0;
+
+export { SegmentContent as ion_segment_content };

package/dist/esm/ion-segment-view.entry.js

@@ -0,0 +1,68 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { r as registerInstance, h, i as Host, g as getElement } from './index-3321c202.js';
+import { a as addEventListener } from './helpers-da915de8.js';
+
+const segmentViewCss = ":host{display:-ms-flexbox;display:flex;grid-column:1/-1;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}";
+const IonSegmentViewStyle0 = segmentViewCss;
+
+const SegmentView = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.segmentEl = null;
+        this.updateSection = () => {
+            const { segmentEl } = this;
+            if (segmentEl) {
+                const value = segmentEl.value;
+                const index = this.getSegmentButtonIndexWithValue(value);
+                this.setSection(index);
+            }
+        };
+        this.setSection = (index) => {
+            const sectionWidth = this.el.offsetWidth;
+            this.el.scrollTo({
+                top: 0,
+                left: index * sectionWidth,
+                behavior: 'smooth',
+            });
+        };
+    }
+    segmentViewScroll(ev) {
+        const { segmentEl } = this;
+        const atSnappingPoint = ev.target.scrollLeft % ev.target.offsetWidth === 0;
+        if (atSnappingPoint) {
+            const index = Math.round(ev.target.scrollLeft / ev.target.offsetWidth);
+            const segmentButton = this.getSegmentButtonAtIndex(index);
+            if (segmentEl) {
+                segmentEl.value = segmentButton.value;
+            }
+        }
+    }
+    connectedCallback() {
+        const segmentEl = (this.segmentEl = document.querySelector(`ion-segment[view=${this.el.id}]`));
+        if (segmentEl) {
+            addEventListener(segmentEl, 'ionChange', this.updateSection);
+        }
+    }
+    getSegmentButtons() {
+        const { segmentEl } = this;
+        if (!segmentEl) {
+            return [];
+        }
+        return Array.from(segmentEl.querySelectorAll('ion-segment-button'));
+    }
+    getSegmentButtonAtIndex(index) {
+        return this.getSegmentButtons()[index];
+    }
+    getSegmentButtonIndexWithValue(value) {
+        return this.getSegmentButtons().findIndex((b) => b.value === value);
+    }
+    render() {
+        return (h(Host, { key: '3a5d905041b663c7e533c5361472fdaad65d0e46' }, h("slot", { key: 'd4a6c6942afa53c22c7edf03275a0fb4ad7cbeb1' })));
+    }
+    get el() { return getElement(this); }
+};
+SegmentView.style = IonSegmentViewStyle0;
+
+export { SegmentView as ion_segment_view };