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

package/components/ion-thumbnail.js

@@ -14,7 +14,7 @@ const Thumbnail = /*@__PURE__*/ proxyCustomElement(class Thumbnail extends HTMLE
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: 'cfa86b1da66346d3e3080092344c1c11e7e773d5', class: getIonMode(this) }, h("slot", { key: 'db5ed41c9a024cf9ecc7905e30ecf68bd6219f7d' })));
+        return (h(Host, { key: 'cfa9aeb1d4fd624a9732c5230d29dd887e4b7771', class: getIonMode(this) }, h("slot", { key: '29bc6e64063cba44e2643228df54394883933918' })));
     }
     static get style() { return IonThumbnailStyle0; }
 }, [1, "ion-thumbnail"]);

package/components/ion-toast.js

@@ -831,9 +831,9 @@ const Toast = /*@__PURE__*/ proxyCustomElement(class Toast extends HTMLElement {
         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: '8a04b1456cd16d54905ab006600110322b94b42a', tabindex: "-1" }, this.htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: 'c05655ff06af8d0e48c2a85396b07ad942fa81b4', tabindex: "-1" }, this.htmlAttributes, { style: {
                 zIndex: `${60000 + this.overlayIndex}`,
-            }, class: createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), h("div", { key: 'f89bd416cc490790efb46f92f0c172b7f40a39d9', class: wrapperClass }, h("div", { key: 'a12e4b4678f147d081cfeb7b2e3e2a32ce185e19', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { key: '00c796e53e9199cf785e44e998b40425acba8888', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("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(this.color, Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), h("div", { key: '9393ead4de1bf28529661d6f64049d34e18d725c', class: wrapperClass }, h("div", { key: '3e9dd73c17c337849c3f26e8d0f395b3e5ee20a7', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { key: '5d15b18364301ad55e44e9f601014ac33181590b', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("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 this; }
     static get watchers() { return {

package/components/ion-toggle.js

@@ -161,7 +161,7 @@ const Toggle = /*@__PURE__*/ proxyCustomElement(class Toggle extends HTMLElement
         const value = this.getValue();
         const rtl = isRTL(el) ? 'rtl' : 'ltr';
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (h(Host, { key: '4e9013794a74f581b4f969ceadef4e53c920e9a6', onClick: this.onClick, class: createColorClasses(color, {
+        return (h(Host, { key: 'f52195ec3bc14c024647cb41319c32a4cd330e19', onClick: this.onClick, class: createColorClasses(color, {
                 [mode]: true,
                 'in-item': hostContext('ion-item', el),
                 'toggle-activated': activated,
@@ -171,10 +171,10 @@ const Toggle = /*@__PURE__*/ proxyCustomElement(class Toggle extends HTMLElement
                 [`toggle-alignment-${alignment}`]: alignment !== undefined,
                 [`toggle-label-placement-${labelPlacement}`]: true,
                 [`toggle-${rtl}`]: true,
-            }) }, h("label", { key: '24585bfe9c697e160b1d3d52522b43498d415a4d', class: "toggle-wrapper" }, h("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)), h("div", { key: 'd21d608eada02baf5b91c38d577805deaec5f9ef', class: {
+            }) }, h("label", { key: 'f8b3a215ad85b2cee611ad63449b584e1640f27f', class: "toggle-wrapper" }, h("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)), h("div", { key: '936af880db59fe377cd2de9101eb28a1c4fb8914', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !this.hasLabel,
-            }, part: "label" }, h("slot", { key: 'c4f2e790a73d583938d70d72b4708b31b8ad1035' })), h("div", { key: 'ced527f5f74d3066bf022e8af31f9ea82aaa6c8c', class: "native-wrapper" }, this.renderToggleControl()))));
+            }, part: "label" }, h("slot", { key: '80a6672e2e792c15011a9496dcd75363cdba31c6' })), h("div", { key: '2b2b318b38ab27b194c0dab4cecd77d9d780f2ca', class: "native-wrapper" }, this.renderToggleControl()))));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/select-modal.js

@@ -102,7 +102,7 @@ const SelectModal = /*@__PURE__*/ proxyCustomElement(class SelectModal extends H
             } }, option.text))));
     }
     render() {
-        return (h(Host, { key: '694a6d282f489b4997105f6e602777d4df90421a', class: getIonMode(this) }, h("ion-header", { key: '50bdd9144222231817bbb9adbb8f7f43985fc786' }, h("ion-toolbar", { key: '47c1a62e188c6b79e32fa42724fde91cf396bc8a' }, this.header !== undefined && h("ion-title", { key: 'db2a5480ac0f710842108de116ac8218be409fdb' }, this.header), h("ion-buttons", { key: '21ca4e72b6220b821c3bac890ec9a8aacab69c29', slot: "end" }, h("ion-button", { key: 'f08b33ff0b82c04c8205e0186235acdaf8085733', onClick: () => this.closeModal() }, "Close")))), h("ion-content", { key: 'c35d024bebda7250b44b2b0ff97c2778c815f1ca' }, h("ion-list", { key: '027ad22799a82b49c03bc9d9f2779cdbe896f218' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
+        return (h(Host, { key: 'f4b92f4fc3d646f9a327e43a9622abaf69659c28', class: getIonMode(this) }, h("ion-header", { key: '11232ef496e7abd69e55cef988963a4869a7b01e' }, h("ion-toolbar", { key: 'e7c41878691a504d44c658db02807867df542588' }, this.header !== undefined && h("ion-title", { key: 'fcf9d33e0f3e0076ff14805de68848f9ef199cca' }, this.header), h("ion-buttons", { key: '748a967ae0ce68bc2fd018a6b9ebe0e4b810f6ac', slot: "end" }, h("ion-button", { key: 'f5e60791870b5085a31b7af70ed4bb3fb83eb185', onClick: () => this.closeModal() }, "Close")))), h("ion-content", { key: '159797957b6f788a9b393d91864c18db34481c68' }, h("ion-list", { key: '4124554fe8b2411637cbf02f08e50e0d8f804175' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
     }
     get el() { return this; }
     static get style() { return {

package/components/select-popover.js

@@ -117,7 +117,7 @@ const SelectPopover = /*@__PURE__*/ proxyCustomElement(class SelectPopover exten
     render() {
         const { header, message, options, subHeader } = this;
         const hasSubHeaderOrMessage = subHeader !== undefined || message !== undefined;
-        return (h(Host, { key: '8baf834489a89d2e65554eb4241fe389a525f85c', class: getIonMode(this) }, h("ion-list", { key: '2646cd1047a308c4cbb89c3a936f9a13c307221b' }, header !== undefined && h("ion-list-header", { key: 'aec9975d382f9e97eb5b7bd036fbd08f645f6462' }, header), hasSubHeaderOrMessage && (h("ion-item", { key: 'd9e3298ba2c289fdef7624e2cbddc247061d4d75' }, h("ion-label", { key: '6f068afe5db73092638dff9d1d3f60cefd1d2599', class: "ion-text-wrap" }, subHeader !== undefined && h("h3", { key: '4403c78b13c3e861d199f4e75cca2876cb058267' }, subHeader), message !== undefined && h("p", { key: '6af680fd7ed7bf0c04baa63e7e9bc44ad2d7a057' }, message)))), this.renderOptions(options))));
+        return (h(Host, { key: 'dd0990db4de4f175b176b27f35501dd1604ca400', class: getIonMode(this) }, h("ion-list", { key: 'cea2bc3687b8b2490a2a9ff4a1e16cd34169558e' }, header !== undefined && h("ion-list-header", { key: '194aebb53453c43f913daae45a1a3066a1708c4c' }, header), hasSubHeaderOrMessage && (h("ion-item", { key: 'b706b07a3c63ad8104d2db413e210c735ec1bec9' }, h("ion-label", { key: '6e52b5b4cf6b04ff3dd5671d64264233de4190d5', class: "ion-text-wrap" }, subHeader !== undefined && h("h3", { key: '6ef4440d17f5db8c96c63b9aa5073f4fe4b8ad62' }, subHeader), message !== undefined && h("p", { key: 'c7b3b76c30ecd606c0e985a0258c13d3a75756e7' }, message)))), this.renderOptions(options))));
     }
     get el() { return this; }
     static get style() { return {

package/components/spinner.js

@@ -185,7 +185,7 @@ const Spinner = /*@__PURE__*/ proxyCustomElement(class Spinner extends HTMLEleme
                 svgs.push(buildLine(spinner, duration, i, spinner.lines));
             }
         }
-        return (h(Host, { key: '1313eca457d022d1e5aed560b03d7f2c9eba31d3', class: createColorClasses(self.color, {
+        return (h(Host, { key: '9d30ee9f5aa0dd0e220da07e75d05b8b2435224d', class: createColorClasses(self.color, {
                 [mode]: true,
                 [`spinner-${spinnerName}`]: true,
                 'spinner-paused': self.paused || config.getBoolean('_testing'),

package/components/title.js

@@ -38,11 +38,11 @@ const ToolbarTitle = /*@__PURE__*/ proxyCustomElement(class ToolbarTitle extends
     render() {
         const mode = getIonMode(this);
         const size = this.getSize();
-        return (h(Host, { key: '06af912c5ce99e229ab8fc12ec6fce6e6930f759', class: createColorClasses(this.color, {
+        return (h(Host, { key: '7293d2ecd6262feb0d8d769effbb208230baed89', class: createColorClasses(this.color, {
                 [mode]: true,
                 [`title-${size}`]: true,
                 'title-rtl': document.dir === 'rtl',
-            }) }, h("div", { key: 'f4079cafd93014478b86389e0ebc29be34e63476', class: "toolbar-title" }, h("slot", { key: '910488c983dea9549f533360ba57b379d341a499' }))));
+            }) }, h("div", { key: '086ec3a361ebdf6506846a8704b457cda3a6f897', class: "toolbar-title" }, h("slot", { key: '59add7eb92b82d6832a8f0894f897c51fdf4f214' }))));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/toolbar.js

@@ -63,10 +63,10 @@ const Toolbar = /*@__PURE__*/ proxyCustomElement(class Toolbar extends HTMLEleme
         this.childrenStyles.forEach((value) => {
             Object.assign(childStyles, value);
         });
-        return (h(Host, { key: 'd7721dc62e57aa43896fbe7894a0fb6230baac0e', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
+        return (h(Host, { key: '462538a5ecd01baf3cde116c9f029aeda26c81be', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
-            })) }, h("div", { key: '39d556b276726b403b7a903471babea77b6068e3', class: "toolbar-background" }), h("div", { key: 'adb179225a641f0e91011cc7f1a8853dd947149f', class: "toolbar-container" }, h("slot", { key: '6d4e4a21846359ec9b9f17d532d9797ecb33ba97', name: "start" }), h("slot", { key: 'b9f0a8b4b0ea3ddfd74b7512a307505ac5cfccf8', name: "secondary" }), h("div", { key: '826b3ecc75b89c22cb02f7d202c983f0ee438964', class: "toolbar-content" }, h("slot", { key: 'aa8d25d5b55b30da47db05a82a5c4cdc36012c83' })), h("slot", { key: '67a7b7a6ad934b6ea022e1af8a78161388955d9e', name: "primary" }), h("slot", { key: '265536d48c3c28c7af7026c1e97261cee543862e', name: "end" }))));
+            })) }, h("div", { key: 'c0b4415d3b2472de643a9be7cb3b13b3b628621b', class: "toolbar-background" }), h("div", { key: '0ccb8a2dbeaa28d8f9bed87629c0c097446690c2', class: "toolbar-container" }, h("slot", { key: '3e726dac359e923df21d80301651f16063a3de20', name: "start" }), h("slot", { key: 'cd799330b56a7f8833bc61bb2807aafb21846f71', name: "secondary" }), h("div", { key: '395282e6ac8c53576922dcdb5f08c25d34638c86', class: "toolbar-content" }, h("slot", { key: 'a437c60e4ba5aae65e55169ae82a6f379868ec1d' })), h("slot", { key: '711af9b9d321a7b31ede924c9bdcad767aa9a1ca', name: "primary" }), h("slot", { key: 'ecc02edeaf80a837890bcb08d5096df1e22a0b9a', name: "end" }))));
     }
     get el() { return this; }
     static get style() { return {

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

@@ -1221,11 +1221,11 @@ const ToolbarTitle = class {
     render() {
         const mode = ionicGlobal.getIonMode(this);
         const size = this.getSize();
-        return (index.h(index.Host, { key: '06af912c5ce99e229ab8fc12ec6fce6e6930f759', class: theme.createColorClasses(this.color, {
+        return (index.h(index.Host, { key: '7293d2ecd6262feb0d8d769effbb208230baed89', class: theme.createColorClasses(this.color, {
                 [mode]: true,
                 [`title-${size}`]: true,
                 'title-rtl': document.dir === 'rtl',
-            }) }, index.h("div", { key: 'f4079cafd93014478b86389e0ebc29be34e63476', class: "toolbar-title" }, index.h("slot", { key: '910488c983dea9549f533360ba57b379d341a499' }))));
+            }) }, index.h("div", { key: '086ec3a361ebdf6506846a8704b457cda3a6f897', class: "toolbar-title" }, index.h("slot", { key: '59add7eb92b82d6832a8f0894f897c51fdf4f214' }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -1293,10 +1293,10 @@ const Toolbar = class {
         this.childrenStyles.forEach((value) => {
             Object.assign(childStyles, value);
         });
-        return (index.h(index.Host, { key: 'd7721dc62e57aa43896fbe7894a0fb6230baac0e', class: Object.assign(Object.assign({}, childStyles), theme.createColorClasses(this.color, {
+        return (index.h(index.Host, { key: '462538a5ecd01baf3cde116c9f029aeda26c81be', class: Object.assign(Object.assign({}, childStyles), theme.createColorClasses(this.color, {
                 [mode]: true,
                 'in-toolbar': theme.hostContext('ion-toolbar', this.el),
-            })) }, index.h("div", { key: '39d556b276726b403b7a903471babea77b6068e3', class: "toolbar-background" }), index.h("div", { key: 'adb179225a641f0e91011cc7f1a8853dd947149f', class: "toolbar-container" }, index.h("slot", { key: '6d4e4a21846359ec9b9f17d532d9797ecb33ba97', name: "start" }), index.h("slot", { key: 'b9f0a8b4b0ea3ddfd74b7512a307505ac5cfccf8', name: "secondary" }), index.h("div", { key: '826b3ecc75b89c22cb02f7d202c983f0ee438964', class: "toolbar-content" }, index.h("slot", { key: 'aa8d25d5b55b30da47db05a82a5c4cdc36012c83' })), index.h("slot", { key: '67a7b7a6ad934b6ea022e1af8a78161388955d9e', name: "primary" }), index.h("slot", { key: '265536d48c3c28c7af7026c1e97261cee543862e', name: "end" }))));
+            })) }, index.h("div", { key: 'c0b4415d3b2472de643a9be7cb3b13b3b628621b', class: "toolbar-background" }), index.h("div", { key: '0ccb8a2dbeaa28d8f9bed87629c0c097446690c2', class: "toolbar-container" }, index.h("slot", { key: '3e726dac359e923df21d80301651f16063a3de20', name: "start" }), index.h("slot", { key: 'cd799330b56a7f8833bc61bb2807aafb21846f71', name: "secondary" }), index.h("div", { key: '395282e6ac8c53576922dcdb5f08c25d34638c86', class: "toolbar-content" }, index.h("slot", { key: 'a437c60e4ba5aae65e55169ae82a6f379868ec1d' })), index.h("slot", { key: '711af9b9d321a7b31ede924c9bdcad767aa9a1ca', name: "primary" }), index.h("slot", { key: 'ecc02edeaf80a837890bcb08d5096df1e22a0b9a', name: "end" }))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -59,7 +59,7 @@ const Thumbnail = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'cfa86b1da66346d3e3080092344c1c11e7e773d5', class: ionicGlobal.getIonMode(this) }, index.h("slot", { key: 'db5ed41c9a024cf9ecc7905e30ecf68bd6219f7d' })));
+        return (index.h(index.Host, { key: 'cfa9aeb1d4fd624a9732c5230d29dd887e4b7771', class: ionicGlobal.getIonMode(this) }, index.h("slot", { key: '29bc6e64063cba44e2643228df54394883933918' })));
     }
 };
 Thumbnail.style = IonThumbnailStyle0;

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

@@ -474,11 +474,11 @@ const SkeletonText = class {
         const animated = this.animated && ionicGlobal.config.getBoolean('animated', true);
         const inMedia = theme.hostContext('ion-avatar', this.el) || theme.hostContext('ion-thumbnail', this.el);
         const mode = ionicGlobal.getIonMode(this);
-        return (index.h(index.Host, { key: '8a822ebe9b4e097bdb22765b3becc2949ebefbfb', class: {
+        return (index.h(index.Host, { key: 'fdfabf9364caf507450239b62be24f08873bd650', class: {
                 [mode]: true,
                 'skeleton-text-animated': animated,
                 'in-media': inMedia,
-            } }, index.h("span", { key: '6d85ce8c7561af1cfd5145c7224d08352d271a1c' }, "\u00A0")));
+            } }, index.h("span", { key: '3482c88dcc177547185ce87972afa064a542367d' }, "\u00A0")));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -0,0 +1,23 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-73f75efb.js');
+
+const segmentContentCss = ":host{scroll-snap-align:center;scroll-snap-stop:always;-ms-flex-negative:0;flex-shrink:0;width:100%}";
+const IonSegmentContentStyle0 = segmentContentCss;
+
+const SegmentContent = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h(index.Host, { key: '03684b2999ac64fe13e376fd7e7f279976e9d4f2' }, index.h("slot", { key: '143031075bf33ca19e7cfd76fc8a67b83ccaf11c' })));
+    }
+};
+SegmentContent.style = IonSegmentContentStyle0;
+
+exports.ion_segment_content = SegmentContent;

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

@@ -0,0 +1,122 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-73f75efb.js');
+
+const segmentViewIosCss = ":host{display:-ms-flexbox;display:flex;height:100%;overflow-x:scroll;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}:host::-webkit-scrollbar{display:none}:host(.segment-view-disabled){-ms-touch-action:none;touch-action:none;overflow-x:hidden}:host(.segment-view-scroll-disabled){pointer-events:none}:host(.segment-view-disabled){opacity:0.3}";
+const IonSegmentViewIosStyle0 = segmentViewIosCss;
+
+const segmentViewMdCss = ":host{display:-ms-flexbox;display:flex;height:100%;overflow-x:scroll;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}:host::-webkit-scrollbar{display:none}:host(.segment-view-disabled){-ms-touch-action:none;touch-action:none;overflow-x:hidden}:host(.segment-view-scroll-disabled){pointer-events:none}:host(.segment-view-disabled){opacity:0.3}";
+const IonSegmentViewMdStyle0 = segmentViewMdCss;
+
+const SegmentView = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.ionSegmentViewScroll = index.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 (index.h(index.Host, { key: '9f4f11d31c4db776f077e59ae895b35dd4454717', class: {
+                'segment-view-disabled': disabled,
+                'segment-view-scroll-disabled': isManualScroll === false,
+            } }, index.h("slot", { key: 'ea58b21f031cee2ab2b70580f336deaefa364538' })));
+    }
+    get el() { return index.getElement(this); }
+};
+SegmentView.style = {
+    ios: IonSegmentViewIosStyle0,
+    md: IonSegmentViewMdStyle0
+};
+
+exports.ion_segment_view = SegmentView;

package/dist/cjs/ion-segment_2.cjs.entry.js

@@ -23,6 +23,7 @@ const Segment = class {
         this.ionChange = index.createEvent(this, "ionChange", 7);
         this.ionSelect = index.createEvent(this, "ionSelect", 7);
         this.ionStyle = index.createEvent(this, "ionStyle", 7);
+        this.segmentViewEl = null;
         this.onClick = (ev) => {
             const current = ev.target;
             const previous = this.checked;
@@ -37,7 +38,13 @@ const Segment = class {
             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);
                 }
@@ -93,19 +100,49 @@ const Segment = class {
     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() {
@@ -115,6 +152,10 @@ const Segment = class {
     }
     connectedCallback() {
         this.emitStyle();
+        this.segmentViewEl = this.getSegmentView();
+    }
+    disconnectedCallback() {
+        this.segmentViewEl = null;
     }
     componentWillLoad() {
         this.emitStyle();
@@ -148,6 +189,9 @@ const Segment = class {
         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;
@@ -164,6 +208,7 @@ const Segment = class {
         if (value !== undefined) {
             if (this.valueBeforeGesture !== value) {
                 this.emitValueChange();
+                this.updateSegmentView();
             }
         }
         this.valueBeforeGesture = undefined;
@@ -191,12 +236,7 @@ const Segment = class {
     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;
     }
@@ -247,6 +287,7 @@ const Segment = class {
             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();
@@ -262,6 +303,60 @@ const Segment = class {
             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) {
@@ -444,14 +539,14 @@ const Segment = class {
     }
     render() {
         const mode = ionicGlobal.getIonMode(this);
-        return (index.h(index.Host, { key: '1f50689291d24812e33145272f9a73c01e085383', role: "tablist", onClick: this.onClick, class: theme.createColorClasses(this.color, {
+        return (index.h(index.Host, { key: '66bd7a565ba73540b3bbe56dd23b95e59bcef9bc', role: "tablist", onClick: this.onClick, class: theme.createColorClasses(this.color, {
                 [mode]: true,
                 'in-toolbar': theme.hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': theme.hostContext('ion-toolbar[color]', this.el),
                 'segment-activated': this.activated,
                 'segment-disabled': this.disabled,
                 'segment-scrollable': this.scrollable,
-            }) }, index.h("slot", { key: 'd3b90e1adabf0b923e41a36cd856dc0a5a3d041e', onSlotchange: this.onSlottedItemsChange })));
+            }) }, index.h("slot", { key: '782c521b1a33729b8eab1c4b879bc3f2ff48ae1b', onSlotchange: this.onSlottedItemsChange })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -491,6 +586,7 @@ const SegmentButton = class {
             }
         };
         this.checked = false;
+        this.contentId = undefined;
         this.disabled = false;
         this.layout = 'icon-top';
         this.type = 'button';
@@ -506,6 +602,26 @@ const SegmentButton = class {
             helpers.addEventListener(segmentEl, 'ionSelect', this.updateState);
             helpers.addEventListener(segmentEl, 'ionStyle', this.updateStyle);
         }
+        // Return if there is no contentId defined
+        if (!this.contentId)
+            return;
+        // Attempt to find the Segment Content by its contentId
+        const segmentContent = document.getElementById(this.contentId);
+        // If no associated Segment Content exists, log an error and return
+        if (!segmentContent) {
+            console.error(`Segment Button: Unable to find Segment Content with id="${this.contentId}".`);
+            return;
+        }
+        // Ensure the found element is a valid ION-SEGMENT-CONTENT
+        if (segmentContent.tagName !== 'ION-SEGMENT-CONTENT') {
+            console.error(`Segment Button: Element with id="${this.contentId}" is not an <ion-segment-content> element.`);
+            return;
+        }
+        // Prevent buttons from being disabled when associated with segment content
+        if (this.disabled) {
+            console.warn(`Segment Button: Segment buttons cannot be disabled when associated with an <ion-segment-content>.`);
+            this.disabled = false;
+        }
     }
     disconnectedCallback() {
         const segmentEl = this.segmentEl;
@@ -539,7 +655,7 @@ const SegmentButton = class {
         const { checked, type, disabled, hasIcon, hasLabel, layout, segmentEl } = this;
         const mode = ionicGlobal.getIonMode(this);
         const hasSegmentColor = () => (segmentEl === null || segmentEl === void 0 ? void 0 : segmentEl.color) !== undefined;
-        return (index.h(index.Host, { key: '9b54e4841be5d0f4f2ee230a649bfbe01066c7c7', class: {
+        return (index.h(index.Host, { key: 'd50a5d5e2f6206e8523598f258d8217d2903f69b', class: {
                 [mode]: true,
                 'in-toolbar': theme.hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': theme.hostContext('ion-toolbar[color]', this.el),
@@ -555,10 +671,7 @@ const SegmentButton = class {
                 'ion-activatable': true,
                 'ion-activatable-instant': true,
                 'ion-focusable': true,
-            } }, index.h("button", Object.assign({ key: 'b97b964b5f3f1bf53e41ad2a1ad4853d5f956fe5', "aria-selected": checked ? 'true' : 'false', role: "tab", ref: (el) => (this.nativeEl = el), type: type, class: "button-native", part: "native", disabled: disabled }, this.inheritedAttributes), index.h("span", { key: '0eeb2616f7c5a7a7fc1e2e3bd34ab461de6179f4', class: "button-inner" }, index.h("slot", { key: '5ac8fafa2f23e30f8df63bfe236a9604cfb388ae' })), mode === 'md' && index.h("ion-ripple-effect", { key: '86032e9726e2b6437ffc34f59fcbe564616cc9ca' })), index.h("div", { key: '536b1da58dd2521be290707d6b1726831340cf9f', part: "indicator", class: {
-                'segment-button-indicator': true,
-                'segment-button-indicator-animated': true,
-            } }, index.h("div", { key: 'b43124415ebd77c87285791522c5afc26a137f96', part: "indicator-background", class: "segment-button-indicator-background" }))));
+            } }, index.h("button", Object.assign({ key: 'b4f6f145286ba8ab79669e11035b906daa85ae7e', "aria-selected": checked ? 'true' : 'false', role: "tab", ref: (el) => (this.nativeEl = el), type: type, class: "button-native", part: "native", disabled: disabled }, this.inheritedAttributes), index.h("span", { key: '67965996c9ffe70553875e00d3da0ae5b2b1d814', class: "button-inner" }, index.h("slot", { key: '5087988fe45a8fdf388ec44c395d0b745b207806' })), mode === 'md' && index.h("ion-ripple-effect", { key: 'b24858de0750bbc769b3183fac0077dfe817ba27' })), index.h("div", { key: '97b4359432acd1c9da0816360cd1df9472e183f7', part: "indicator", class: "segment-button-indicator segment-button-indicator-animated" }, index.h("div", { key: '0561738ea15b0986f4ed3d8276d5e6f2d13f7e51', part: "indicator-background", class: "segment-button-indicator-background" }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ion-select-modal.cjs.entry.js

@@ -98,7 +98,7 @@ const SelectModal = class {
             } }, option.text))));
     }
     render() {
-        return (index.h(index.Host, { key: '694a6d282f489b4997105f6e602777d4df90421a', class: ionicGlobal.getIonMode(this) }, index.h("ion-header", { key: '50bdd9144222231817bbb9adbb8f7f43985fc786' }, index.h("ion-toolbar", { key: '47c1a62e188c6b79e32fa42724fde91cf396bc8a' }, this.header !== undefined && index.h("ion-title", { key: 'db2a5480ac0f710842108de116ac8218be409fdb' }, this.header), index.h("ion-buttons", { key: '21ca4e72b6220b821c3bac890ec9a8aacab69c29', slot: "end" }, index.h("ion-button", { key: 'f08b33ff0b82c04c8205e0186235acdaf8085733', onClick: () => this.closeModal() }, "Close")))), index.h("ion-content", { key: 'c35d024bebda7250b44b2b0ff97c2778c815f1ca' }, index.h("ion-list", { key: '027ad22799a82b49c03bc9d9f2779cdbe896f218' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
+        return (index.h(index.Host, { key: 'f4b92f4fc3d646f9a327e43a9622abaf69659c28', class: ionicGlobal.getIonMode(this) }, index.h("ion-header", { key: '11232ef496e7abd69e55cef988963a4869a7b01e' }, index.h("ion-toolbar", { key: 'e7c41878691a504d44c658db02807867df542588' }, this.header !== undefined && index.h("ion-title", { key: 'fcf9d33e0f3e0076ff14805de68848f9ef199cca' }, this.header), index.h("ion-buttons", { key: '748a967ae0ce68bc2fd018a6b9ebe0e4b810f6ac', slot: "end" }, index.h("ion-button", { key: 'f5e60791870b5085a31b7af70ed4bb3fb83eb185', onClick: () => this.closeModal() }, "Close")))), index.h("ion-content", { key: '159797957b6f788a9b393d91864c18db34481c68' }, index.h("ion-list", { key: '4124554fe8b2411637cbf02f08e50e0d8f804175' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
     }
     get el() { return index.getElement(this); }
 };