@ionic/core 8.3.5-nightly.20241104 → 8.4.1-dev.11730761110.1b046f37

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

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

package/components/ion-segment-content.js

@@ -0,0 +1,37 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const segmentContentCss = ":host{scroll-snap-align:center;scroll-snap-stop:always;-ms-flex-negative:0;flex-shrink:0;width:100%}";
+const IonSegmentContentStyle0 = segmentContentCss;
+
+const SegmentContent = /*@__PURE__*/ proxyCustomElement(class SegmentContent extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    render() {
+        return (h(Host, { key: '1f7f256fdeb7ec661c84f268b239ab21ef170629' }, h("slot", { key: 'c704cf3b4c13deeb612d8a8ffdccef65d62f0866' })));
+    }
+    static get style() { return IonSegmentContentStyle0; }
+}, [1, "ion-segment-content"]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ion-segment-content"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ion-segment-content":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SegmentContent);
+            }
+            break;
+    } });
+}
+
+const IonSegmentContent = SegmentContent;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonSegmentContent, defineCustomElement };

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

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

package/components/ion-segment-view.js

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

package/components/ion-segment.js

@@ -5,12 +5,15 @@ import { proxyCustomElement, HTMLElement, createEvent, writeTask, h, Host } from
 import { r as raf } from './helpers.js';
 import { i as isRTL } from './dir.js';
 import { c as createColorClasses, h as hostContext } from './theme.js';
-import { b as getIonMode } from './ionic-global.js';
+import { c as getIonTheme } from './ionic-global.js';
 
-const segmentIosCss = ":host{--ripple-color:currentColor;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:grid;grid-auto-columns:1fr;position:relative;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:center;justify-content:center;width:100%;background:var(--background);font-family:var(--ion-font-family, inherit);text-align:center;contain:paint;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host(.segment-scrollable){-ms-flex-pack:start;justify-content:start;width:auto;overflow-x:auto;grid-auto-columns:minmax(-webkit-min-content, 1fr);grid-auto-columns:minmax(min-content, 1fr)}:host(.segment-scrollable::-webkit-scrollbar){display:none}:host{--background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.065);border-radius:8px;overflow:hidden;z-index:0}:host(.ion-color){background:rgba(var(--ion-color-base-rgb), 0.065)}:host(.in-toolbar){-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0;width:auto}:host(.in-toolbar:not(.ion-color)){background:var(--ion-toolbar-segment-background, var(--background))}:host(.in-toolbar-color:not(.ion-color)){background:rgba(var(--ion-color-contrast-rgb), 0.11)}";
+const segmentIonicCss = ":host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:grid;grid-auto-columns:1fr;position:relative;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:center;justify-content:center;width:100%;background:var(--background);text-align:center;contain:paint;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host(.segment-scrollable){-ms-flex-pack:start;justify-content:start;width:auto;overflow-x:auto;grid-auto-columns:minmax(-webkit-min-content, 1fr);grid-auto-columns:minmax(min-content, 1fr)}:host(.segment-scrollable::-webkit-scrollbar){display:none}:host{--background:var(--ion-primitives-base-white, #ffffff)}";
+const IonSegmentIonicStyle0 = segmentIonicCss;
+
+const segmentIosCss = ":host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:grid;grid-auto-columns:1fr;position:relative;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:center;justify-content:center;width:100%;background:var(--background);text-align:center;contain:paint;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host(.segment-scrollable){-ms-flex-pack:start;justify-content:start;width:auto;overflow-x:auto;grid-auto-columns:minmax(-webkit-min-content, 1fr);grid-auto-columns:minmax(min-content, 1fr)}:host(.segment-scrollable::-webkit-scrollbar){display:none}:host{--ripple-color:currentColor;font-family:var(--ion-font-family, inherit)}:host{--background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.065);border-radius:8px;overflow:hidden;z-index:0}:host(.ion-color){background:rgba(var(--ion-color-base-rgb), 0.065)}:host(.in-toolbar){-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0;width:auto}:host(.in-toolbar:not(.ion-color)){background:var(--ion-toolbar-segment-background, var(--background))}:host(.in-toolbar-color:not(.ion-color)){background:rgba(var(--ion-color-contrast-rgb), 0.11)}";
 const IonSegmentIosStyle0 = segmentIosCss;
 
-const segmentMdCss = ":host{--ripple-color:currentColor;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:grid;grid-auto-columns:1fr;position:relative;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:center;justify-content:center;width:100%;background:var(--background);font-family:var(--ion-font-family, inherit);text-align:center;contain:paint;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host(.segment-scrollable){-ms-flex-pack:start;justify-content:start;width:auto;overflow-x:auto;grid-auto-columns:minmax(-webkit-min-content, 1fr);grid-auto-columns:minmax(min-content, 1fr)}:host(.segment-scrollable::-webkit-scrollbar){display:none}:host{--background:transparent;grid-auto-columns:minmax(auto, 360px)}:host(.in-toolbar){min-height:var(--min-height)}:host(.segment-scrollable) ::slotted(ion-segment-button){min-width:auto}";
+const segmentMdCss = ":host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:grid;grid-auto-columns:1fr;position:relative;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:center;justify-content:center;width:100%;background:var(--background);text-align:center;contain:paint;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host(.segment-scrollable){-ms-flex-pack:start;justify-content:start;width:auto;overflow-x:auto;grid-auto-columns:minmax(-webkit-min-content, 1fr);grid-auto-columns:minmax(min-content, 1fr)}:host(.segment-scrollable::-webkit-scrollbar){display:none}:host{--ripple-color:currentColor;font-family:var(--ion-font-family, inherit)}:host{--background:transparent;grid-auto-columns:minmax(auto, 360px)}:host(.in-toolbar){min-height:var(--min-height)}:host(.segment-scrollable) ::slotted(ion-segment-button){min-width:auto}";
 const IonSegmentMdStyle0 = segmentMdCss;
 
 const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends HTMLElement {
@@ -21,6 +24,7 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends HTMLEleme
         this.ionChange = createEvent(this, "ionChange", 7);
         this.ionSelect = createEvent(this, "ionSelect", 7);
         this.ionStyle = createEvent(this, "ionStyle", 7);
+        this.segmentViewEl = null;
         this.onClick = (ev) => {
             const current = ev.target;
             const previous = this.checked;
@@ -35,7 +39,13 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends HTMLEleme
             if (current !== previous) {
                 this.emitValueChange();
             }
-            if (this.scrollable || !this.swipeGesture) {
+            if (this.segmentViewEl) {
+                this.updateSegmentView();
+                if (this.scrollable && previous) {
+                    this.checkButton(previous, current);
+                }
+            }
+            else if (this.scrollable || !this.swipeGesture) {
                 if (previous) {
                     this.checkButton(previous, current);
                 }
@@ -91,19 +101,49 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends HTMLEleme
     swipeGestureChanged() {
         this.gestureChanged();
     }
-    valueChanged(value) {
+    valueChanged(value, oldValue) {
+        // Force a value to exist if we're using a segment view
+        if (this.segmentViewEl && value === undefined) {
+            this.value = this.getButtons()[0].value;
+            return;
+        }
+        if (oldValue !== undefined && value !== undefined) {
+            const buttons = this.getButtons();
+            const previous = buttons.find((button) => button.value === oldValue);
+            const current = buttons.find((button) => button.value === value);
+            if (previous && current) {
+                if (!this.segmentViewEl) {
+                    this.checkButton(previous, current);
+                }
+                else if (this.triggerScrollOnValueChange !== false) {
+                    this.updateSegmentView();
+                }
+            }
+        }
+        else if (value !== undefined && oldValue === undefined && this.segmentViewEl) {
+            this.updateSegmentView();
+        }
         /**
          * `ionSelect` is emitted every time the value changes (internal or external changes).
          * Used by `ion-segment-button` to determine if the button should be checked.
          */
         this.ionSelect.emit({ value });
-        this.scrollActiveButtonIntoView();
+        // The scroll listener should handle scrolling the active button into view as needed
+        if (!this.segmentViewEl) {
+            this.scrollActiveButtonIntoView();
+        }
+        this.triggerScrollOnValueChange = undefined;
     }
     disabledChanged() {
         this.gestureChanged();
-        const buttons = this.getButtons();
-        for (const button of buttons) {
-            button.disabled = this.disabled;
+        if (!this.segmentViewEl) {
+            const buttons = this.getButtons();
+            for (const button of buttons) {
+                button.disabled = this.disabled;
+            }
+        }
+        else {
+            this.segmentViewEl.disabled = this.disabled;
         }
     }
     gestureChanged() {
@@ -113,6 +153,10 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends HTMLEleme
     }
     connectedCallback() {
         this.emitStyle();
+        this.segmentViewEl = this.getSegmentView();
+    }
+    disconnectedCallback() {
+        this.segmentViewEl = null;
     }
     componentWillLoad() {
         this.emitStyle();
@@ -146,6 +190,9 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends HTMLEleme
         if (this.disabled) {
             this.disabledChanged();
         }
+        // Update segment view based on the initial value,
+        // but do not animate the scroll
+        this.updateSegmentView(false);
     }
     onStart(detail) {
         this.valueBeforeGesture = this.value;
@@ -162,6 +209,7 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends HTMLEleme
         if (value !== undefined) {
             if (this.valueBeforeGesture !== value) {
                 this.emitValueChange();
+                this.updateSegmentView();
             }
         }
         this.valueBeforeGesture = undefined;
@@ -189,12 +237,7 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends HTMLEleme
     setActivated(activated) {
         const buttons = this.getButtons();
         buttons.forEach((button) => {
-            if (activated) {
-                button.classList.add('segment-button-activated');
-            }
-            else {
-                button.classList.remove('segment-button-activated');
-            }
+            button.classList.toggle('segment-button-activated', activated);
         });
         this.activated = activated;
     }
@@ -245,6 +288,7 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends HTMLEleme
             currentIndicator.classList.add('segment-button-indicator-animated');
             // Remove the transform to slide the indicator back to the button clicked
             currentIndicator.style.setProperty('transform', '');
+            this.scrollActiveButtonIntoView(true);
         });
         this.value = current.value;
         this.setCheckedClasses();
@@ -260,6 +304,60 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends HTMLEleme
             buttons[next].classList.add('segment-button-after-checked');
         }
     }
+    getSegmentView() {
+        const buttons = this.getButtons();
+        // Get the first button with a contentId
+        const firstContentId = buttons.find((button) => button.contentId);
+        // Get the segment content with an id matching the button's contentId
+        const segmentContent = document.querySelector(`ion-segment-content[id="${firstContentId === null || firstContentId === void 0 ? void 0 : firstContentId.contentId}"]`);
+        // Return the segment view for that matching segment content
+        return segmentContent === null || segmentContent === void 0 ? void 0 : segmentContent.closest('ion-segment-view');
+    }
+    handleSegmentViewScroll(ev) {
+        const { scrollRatio, isManualScroll } = ev.detail;
+        if (!isManualScroll) {
+            return;
+        }
+        const dispatchedFrom = ev.target;
+        const segmentViewEl = this.segmentViewEl;
+        const segmentEl = this.el;
+        // Only update the indicator if the event was dispatched from the correct segment view
+        if (ev.composedPath().includes(segmentViewEl) || (dispatchedFrom === null || dispatchedFrom === void 0 ? void 0 : dispatchedFrom.contains(segmentEl))) {
+            const buttons = this.getButtons();
+            // If no buttons are found or there is no value set then do nothing
+            if (!buttons.length)
+                return;
+            const index = buttons.findIndex((button) => button.value === this.value);
+            const current = buttons[index];
+            const nextIndex = Math.round(scrollRatio * (buttons.length - 1));
+            if (this.lastNextIndex === undefined || this.lastNextIndex !== nextIndex) {
+                this.lastNextIndex = nextIndex;
+                this.triggerScrollOnValueChange = false;
+                this.checkButton(current, buttons[nextIndex]);
+                this.emitValueChange();
+            }
+        }
+    }
+    /**
+     * Finds the related segment view and sets its current content
+     * based on the selected segment button. This method
+     * should be called on initial load of the segment,
+     * after the gesture is completed (if dragging between segments)
+     * and when a segment button is clicked directly.
+     */
+    updateSegmentView(smoothScroll = true) {
+        const buttons = this.getButtons();
+        const button = buttons.find((btn) => btn.value === this.value);
+        // If the button does not have a contentId then there is
+        // no associated segment view to update
+        if (!(button === null || button === void 0 ? void 0 : button.contentId)) {
+            return;
+        }
+        const segmentView = this.segmentViewEl;
+        if (segmentView) {
+            segmentView.setContent(button.contentId, smoothScroll);
+        }
+    }
     scrollActiveButtonIntoView(smoothScroll = true) {
         const { scrollable, value, el } = this;
         if (scrollable) {
@@ -441,15 +539,15 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends HTMLEleme
         current.setFocus();
     }
     render() {
-        const mode = getIonMode(this);
-        return (h(Host, { key: 'f1f7103b4c298e037df850ac809a1a7c6e9987a7', role: "tablist", onClick: this.onClick, class: createColorClasses(this.color, {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '844dfde9cc22bbe24f63e97805d6bcbe5c48ce83', role: "tablist", onClick: this.onClick, class: createColorClasses(this.color, {
+                [theme]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'segment-activated': this.activated,
                 'segment-disabled': this.disabled,
                 'segment-scrollable': this.scrollable,
-            }) }, h("slot", { key: '6efdb318b13da8d21687084aa0761728fdf12579', onSlotchange: this.onSlottedItemsChange })));
+            }) }, h("slot", { key: '2318a0c7c054860e0a9b9259e91d0c823b2bdfcf', onSlotchange: this.onSlottedItemsChange })));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -459,6 +557,7 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends HTMLEleme
         "disabled": ["disabledChanged"]
     }; }
     static get style() { return {
+        ionic: IonSegmentIonicStyle0,
         ios: IonSegmentIosStyle0,
         md: IonSegmentMdStyle0
     }; }
@@ -470,7 +569,7 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends HTMLEleme
         "value": [1032],
         "selectOnFocus": [4, "select-on-focus"],
         "activated": [32]
-    }, [[0, "keydown", "onKeyDown"]], {
+    }, [[16, "ionSegmentViewScroll", "handleSegmentViewScroll"], [0, "keydown", "onKeyDown"]], {
         "color": ["colorChanged"],
         "swipeGesture": ["swipeGestureChanged"],
         "value": ["valueChanged"],

package/components/ion-select-modal.d.ts

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

package/components/ion-select-modal.js

@@ -0,0 +1,9 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { S as SelectModal, d as defineCustomElement$1 } from './select-modal.js';
+
+const IonSelectModal = SelectModal;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonSelectModal, defineCustomElement };

package/components/ion-select-option.js

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { b as getIonMode } from './ionic-global.js';
+import { c as getIonTheme } from './ionic-global.js';
 
 const selectOptionCss = ":host{display:none}";
 const IonSelectOptionStyle0 = selectOptionCss;
@@ -17,7 +17,10 @@ const SelectOption = /*@__PURE__*/ proxyCustomElement(class SelectOption extends
         this.value = undefined;
     }
     render() {
-        return h(Host, { key: 'ba5a9c695c53fe0802af11a49f4305a9b8f71773', role: "option", id: this.inputId, class: getIonMode(this) });
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '54487af48b0482f847f6e782434ef739cde0a73e', class: {
+                [theme]: true,
+            }, role: "option", id: this.inputId }));
     }
     get el() { return this; }
     static get style() { return IonSelectOptionStyle0; }