voyager-ionic-core 8.3.3 → 8.4.0

package/components/ion-segment.js

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

package/components/ion-select-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

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

package/components/ion-select.js

@@ -3,27 +3,35 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host, forceUpdate } from '@stencil/core/internal/client';
 import { c as createNotchController } from './notch-controller.js';
-import { i as isOptionSelected, c as compareOptions, d as defineCustomElement$5 } from './radio.js';
+import { i as isOptionSelected, c as compareOptions, d as defineCustomElement$8 } from './radio.js';
 import { d as inheritAttributes, f as focusVisibleElement, e as renderHiddenInput } from './helpers.js';
-import { c as popoverController, b as actionSheetController, a as alertController } from './overlays.js';
+import { c as popoverController, b as actionSheetController, a as alertController, m as modalController } from './overlays.js';
 import { i as isRTL } from './dir.js';
 import { h as hostContext, c as createColorClasses } from './theme.js';
 import { w as watchForOptions } from './watch-options.js';
 import { v as chevronExpand, h as caretDownSharp } from './index7.js';
 import { b as getIonMode } from './ionic-global.js';
-import { d as defineCustomElement$f } from './action-sheet.js';
-import { d as defineCustomElement$e } from './alert.js';
-import { d as defineCustomElement$d } from './backdrop.js';
-import { d as defineCustomElement$c } from './checkbox.js';
-import { d as defineCustomElement$b } from './icon.js';
-import { d as defineCustomElement$a } from './item.js';
-import { d as defineCustomElement$9 } from './label.js';
-import { d as defineCustomElement$8 } from './list.js';
-import { d as defineCustomElement$7 } from './list-header.js';
-import { d as defineCustomElement$6 } from './popover.js';
-import { d as defineCustomElement$4 } from './radio-group.js';
-import { d as defineCustomElement$3 } from './ripple-effect.js';
-import { d as defineCustomElement$2 } from './select-popover.js';
+import { d as defineCustomElement$n } from './action-sheet.js';
+import { d as defineCustomElement$m } from './alert.js';
+import { d as defineCustomElement$l } from './backdrop.js';
+import { d as defineCustomElement$k } from './button.js';
+import { d as defineCustomElement$j } from './buttons.js';
+import { d as defineCustomElement$i } from './checkbox.js';
+import { d as defineCustomElement$h } from './content.js';
+import { d as defineCustomElement$g } from './header.js';
+import { d as defineCustomElement$f } from './icon.js';
+import { d as defineCustomElement$e } from './item.js';
+import { d as defineCustomElement$d } from './label.js';
+import { d as defineCustomElement$c } from './list.js';
+import { d as defineCustomElement$b } from './list-header.js';
+import { d as defineCustomElement$a } from './modal.js';
+import { d as defineCustomElement$9 } from './popover.js';
+import { d as defineCustomElement$7 } from './radio-group.js';
+import { d as defineCustomElement$6 } from './ripple-effect.js';
+import { d as defineCustomElement$5 } from './select-modal.js';
+import { d as defineCustomElement$4 } from './select-popover.js';
+import { d as defineCustomElement$3 } from './title.js';
+import { d as defineCustomElement$2 } from './toolbar.js';
 
 const selectIosCss = ":host{--padding-top:0px;--padding-end:0px;--padding-bottom:0px;--padding-start:0px;--placeholder-color:currentColor;--placeholder-opacity:var(--ion-placeholder-opacity, 0.6);--background:transparent;--border-style:solid;--highlight-color-focused:var(--ion-color-primary, #0054e9);--highlight-color-valid:var(--ion-color-success, #2dd55b);--highlight-color-invalid:var(--ion-color-danger, #c5000f);--highlight-color:var(--highlight-color-focused);display:block;position:relative;width:100%;min-height:44px;font-family:var(--ion-font-family, inherit);white-space:nowrap;cursor:pointer;z-index:2}:host(.select-label-placement-floating),:host(.select-label-placement-stacked){min-height:56px}:host(.ion-color){--highlight-color-focused:var(--ion-color-base)}:host(.in-item){-ms-flex:1 1 0px;flex:1 1 0}:host(.select-disabled){pointer-events:none}:host(.ion-focused) button{border:2px solid #5e9ed6}:host([slot=start]),:host([slot=end]){-ms-flex:initial;flex:initial;width:auto}.select-placeholder{color:var(--placeholder-color);opacity:var(--placeholder-opacity)}button{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}.select-icon{-webkit-margin-start:4px;margin-inline-start:4px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0;position:relative;-ms-flex-negative:0;flex-shrink:0}:host(.in-item-color) .select-icon{color:inherit}:host(.select-label-placement-stacked) .select-icon,:host(.select-label-placement-floating) .select-icon{position:absolute;height:100%}:host(.select-ltr.select-label-placement-stacked) .select-icon,:host(.select-ltr.select-label-placement-floating) .select-icon{right:var(--padding-end, 0)}:host(.select-rtl.select-label-placement-stacked) .select-icon,:host(.select-rtl.select-label-placement-floating) .select-icon{left:var(--padding-start, 0)}.select-text{-ms-flex:1;flex:1;min-width:16px;font-size:inherit;text-overflow:ellipsis;white-space:inherit;overflow:hidden}.select-wrapper{-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);border-radius:var(--border-radius);display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:inherit;min-height:inherit;-webkit-transition:background-color 15ms linear;transition:background-color 15ms linear;background:var(--background);line-height:normal;cursor:inherit;-webkit-box-sizing:border-box;box-sizing:border-box}.select-wrapper .select-placeholder{-webkit-transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)}.select-wrapper-inner{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;overflow:hidden}:host(.select-label-placement-stacked) .select-wrapper-inner,:host(.select-label-placement-floating) .select-wrapper-inner{-ms-flex-positive:1;flex-grow:1}:host(.ion-touched.ion-invalid){--highlight-color:var(--highlight-color-invalid)}:host(.ion-valid){--highlight-color:var(--highlight-color-valid)}.label-text-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;max-width:200px;-webkit-transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);pointer-events:none}.label-text,::slotted([slot=label]){text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.label-text-wrapper-hidden,.select-outline-notch-hidden{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);overflow:hidden}:host(.select-justify-space-between) .select-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.select-justify-start) .select-wrapper{-ms-flex-pack:start;justify-content:start}:host(.select-justify-end) .select-wrapper{-ms-flex-pack:end;justify-content:end}:host(.select-label-placement-start) .select-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.select-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}:host(.select-label-placement-end) .select-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.select-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0}:host(.select-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}:host(.select-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.select-label-placement-stacked) .select-wrapper,:host(.select-label-placement-floating) .select-wrapper{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:start}:host(.select-label-placement-stacked) .label-text-wrapper,:host(.select-label-placement-floating) .label-text-wrapper{max-width:100%}:host(.select-ltr.select-label-placement-stacked) .label-text-wrapper,:host(.select-ltr.select-label-placement-floating) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host(.select-rtl.select-label-placement-stacked) .label-text-wrapper,:host(.select-rtl.select-label-placement-floating) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}:host(.select-label-placement-stacked) .native-wrapper,:host(.select-label-placement-floating) .native-wrapper{margin-left:0;margin-right:0;margin-top:1px;margin-bottom:0;-ms-flex-positive:1;flex-grow:1;width:100%}:host(.select-label-placement-floating) .label-text-wrapper{-webkit-transform:translateY(100%) scale(1);transform:translateY(100%) scale(1)}:host(.select-label-placement-floating:not(.label-floating)) .native-wrapper .select-placeholder{opacity:0}:host(.select-expanded.select-label-placement-floating) .native-wrapper .select-placeholder,:host(.ion-focused.select-label-placement-floating) .native-wrapper .select-placeholder,:host(.has-value.select-label-placement-floating) .native-wrapper .select-placeholder{opacity:1}:host(.label-floating) .label-text-wrapper{-webkit-transform:translateY(50%) scale(0.75);transform:translateY(50%) scale(0.75);max-width:calc(100% / 0.75)}::slotted([slot=start]),::slotted([slot=end]){-ms-flex-negative:0;flex-shrink:0}::slotted([slot=start]:last-of-type){-webkit-margin-end:16px;margin-inline-end:16px;-webkit-margin-start:0;margin-inline-start:0}::slotted([slot=end]:first-of-type){-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host{--highlight-height:0px}.select-icon{width:1.125rem;height:1.125rem;color:var(--ion-color-step-650, var(--ion-text-color-step-350, #595959))}:host(.select-label-placement-stacked) .select-wrapper-inner,:host(.select-label-placement-floating) .select-wrapper-inner{width:calc(100% - 1.125rem - 4px)}:host(.select-disabled){opacity:0.3}::slotted(ion-button[slot=start].button-has-icon-only),::slotted(ion-button[slot=end].button-has-icon-only){--border-radius:50%;--padding-start:0;--padding-end:0;--padding-top:0;--padding-bottom:0;aspect-ratio:1}";
 const IonSelectIosStyle0 = selectIosCss;
@@ -176,13 +184,12 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
             this.setFocus();
         });
         await overlay.present();
-        // focus selected option for popovers
-        if (this.interface === 'popover') {
-            const indexOfSelected = this.childOpts.map((o) => o.value).indexOf(this.value);
+        // focus selected option for popovers and modals
+        if (this.interface === 'popover' || this.interface === 'modal') {
+            const indexOfSelected = this.childOpts.findIndex((o) => o.value === this.value);
             if (indexOfSelected > -1) {
                 const selectedItem = overlay.querySelector(`.select-interface-option:nth-child(${indexOfSelected + 1})`);
                 if (selectedItem) {
-                    focusVisibleElement(selectedItem);
                     /**
                      * Browsers such as Firefox do not
                      * correctly delegate focus when manually
@@ -196,8 +203,11 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
                      */
                     const interactiveEl = selectedItem.querySelector('ion-radio, ion-checkbox');
                     if (interactiveEl) {
-                        interactiveEl.focus();
+                        // Needs to be called before `focusVisibleElement` to prevent issue with focus event bubbling
+                        // and removing `ion-focused` style
+                        interactiveEl.setFocus();
                     }
+                    focusVisibleElement(selectedItem);
                 }
             }
             else {
@@ -206,11 +216,14 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
                  */
                 const firstEnabledOption = overlay.querySelector('ion-radio:not(.radio-disabled), ion-checkbox:not(.checkbox-disabled)');
                 if (firstEnabledOption) {
-                    focusVisibleElement(firstEnabledOption.closest('ion-item'));
                     /**
                      * Focus the option for the same reason as we do above.
+                     *
+                     * Needs to be called before `focusVisibleElement` to prevent issue with focus event bubbling
+                     * and removing `ion-focused` style
                      */
-                    firstEnabledOption.focus();
+                    firstEnabledOption.setFocus();
+                    focusVisibleElement(firstEnabledOption.closest('ion-item'));
                 }
             }
         }
@@ -232,6 +245,9 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
         if (selectInterface === 'popover') {
             return this.openPopover(ev);
         }
+        if (selectInterface === 'modal') {
+            return this.openModal();
+        }
         return this.openAlert();
     }
     updateOverlayOptions() {
@@ -248,7 +264,13 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
             case 'popover':
                 const popover = overlay.querySelector('ion-select-popover');
                 if (popover) {
-                    popover.options = this.createPopoverOptions(childOpts, value);
+                    popover.options = this.createOverlaySelectOptions(childOpts, value);
+                }
+                break;
+            case 'modal':
+                const modal = overlay.querySelector('ion-select-modal');
+                if (modal) {
+                    modal.options = this.createOverlaySelectOptions(childOpts, value);
                 }
                 break;
             case 'alert':
@@ -303,7 +325,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
         });
         return alertInputs;
     }
-    createPopoverOptions(data, selectValue) {
+    createOverlaySelectOptions(data, selectValue) {
         const popoverOptions = data.map((option) => {
             const value = getOptionValue(option);
             // Remove hydrated before copying over classes
@@ -363,7 +385,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
                 message: interfaceOptions.message,
                 multiple,
                 value,
-                options: this.createPopoverOptions(this.childOpts, value),
+                options: this.createOverlaySelectOptions(this.childOpts, value),
             } });
         return popoverController.create(popoverOpts);
     }
@@ -398,6 +420,17 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
             ] });
         return alertController.create(alertOpts);
     }
+    openModal() {
+        const { multiple, value, interfaceOptions } = this;
+        const mode = getIonMode(this);
+        const modalOpts = Object.assign(Object.assign({}, interfaceOptions), { mode, cssClass: ['select-modal', interfaceOptions.cssClass], component: 'ion-select-modal', componentProps: {
+                header: interfaceOptions.header,
+                multiple,
+                value,
+                options: this.createOverlaySelectOptions(this.childOpts, value),
+            } });
+        return modalController.create(modalOpts);
+    }
     /**
      * Close the select interface.
      */
@@ -605,7 +638,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
-        return (h(Host, { key: '73c571c1f8468e1c3f4fe02fbbb33ba9cbc8e989', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: '144dfa5c49549a74fe516c65b9b8104a477ac789', onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -621,7 +654,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
                 [`select-justify-${justify}`]: justifyEnabled,
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
-            }) }, h("label", { key: '2b08538cba0b9f747541d57ac18fb6a1ea658878', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { key: '33f54373bcb02c72a9d0af2efffebc27ee2c69fe', class: "select-wrapper-inner" }, h("slot", { key: 'd1c93aec99dc1cd6410f93309cef615fe04b541b', name: "start" }), h("div", { key: '493d1a3cad9565516f855bef75685b020785ffd3', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '353a3ee5635f8a8f3be411efd6caef6c2ad74a89', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: 'fd5f85555db02affe954f9f4f2876ac8fe676234', class: "select-highlight" }))));
+            }) }, h("label", { key: '0edcfcbac575a9dccc77991531b6980d1caebf42', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { key: '348151d90cb093f5d21c7d4a834264ac4a312c40', class: "select-wrapper-inner" }, h("slot", { key: '8b7708c7f81217435c58276da0c08bba766d9500', name: "start" }), h("div", { key: '10c520a335da0a0d1cf40f9365597beb244d3b48', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '0f15c40a5495e98e29d2a21ba21e0bc6f1c0125a', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: 'c87faad2e5ebf7f9453397d7ede43abd64d21294', class: "select-highlight" }))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -701,7 +734,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["ion-select", "ion-action-sheet", "ion-alert", "ion-backdrop", "ion-checkbox", "ion-icon", "ion-item", "ion-label", "ion-list", "ion-list-header", "ion-popover", "ion-radio", "ion-radio-group", "ion-ripple-effect", "ion-select-popover"];
+    const components = ["ion-select", "ion-action-sheet", "ion-alert", "ion-backdrop", "ion-button", "ion-buttons", "ion-checkbox", "ion-content", "ion-header", "ion-icon", "ion-item", "ion-label", "ion-list", "ion-list-header", "ion-modal", "ion-popover", "ion-radio", "ion-radio-group", "ion-ripple-effect", "ion-select-modal", "ion-select-popover", "ion-title", "ion-toolbar"];
     components.forEach(tagName => { switch (tagName) {
         case "ion-select":
             if (!customElements.get(tagName)) {
@@ -710,70 +743,110 @@ function defineCustomElement$1() {
             break;
         case "ion-action-sheet":
             if (!customElements.get(tagName)) {
-                defineCustomElement$f();
+                defineCustomElement$n();
             }
             break;
         case "ion-alert":
             if (!customElements.get(tagName)) {
-                defineCustomElement$e();
+                defineCustomElement$m();
             }
             break;
         case "ion-backdrop":
             if (!customElements.get(tagName)) {
-                defineCustomElement$d();
+                defineCustomElement$l();
+            }
+            break;
+        case "ion-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$k();
+            }
+            break;
+        case "ion-buttons":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$j();
             }
             break;
         case "ion-checkbox":
             if (!customElements.get(tagName)) {
-                defineCustomElement$c();
+                defineCustomElement$i();
+            }
+            break;
+        case "ion-content":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$h();
+            }
+            break;
+        case "ion-header":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$g();
             }
             break;
         case "ion-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$b();
+                defineCustomElement$f();
             }
             break;
         case "ion-item":
             if (!customElements.get(tagName)) {
-                defineCustomElement$a();
+                defineCustomElement$e();
             }
             break;
         case "ion-label":
             if (!customElements.get(tagName)) {
-                defineCustomElement$9();
+                defineCustomElement$d();
             }
             break;
         case "ion-list":
             if (!customElements.get(tagName)) {
-                defineCustomElement$8();
+                defineCustomElement$c();
             }
             break;
         case "ion-list-header":
             if (!customElements.get(tagName)) {
-                defineCustomElement$7();
+                defineCustomElement$b();
+            }
+            break;
+        case "ion-modal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
             }
             break;
         case "ion-popover":
             if (!customElements.get(tagName)) {
-                defineCustomElement$6();
+                defineCustomElement$9();
             }
             break;
         case "ion-radio":
             if (!customElements.get(tagName)) {
-                defineCustomElement$5();
+                defineCustomElement$8();
             }
             break;
         case "ion-radio-group":
             if (!customElements.get(tagName)) {
-                defineCustomElement$4();
+                defineCustomElement$7();
             }
             break;
         case "ion-ripple-effect":
             if (!customElements.get(tagName)) {
-                defineCustomElement$3();
+                defineCustomElement$6();
+            }
+            break;
+        case "ion-select-modal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
             }
             break;
         case "ion-select-popover":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "ion-title":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ion-toolbar":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }

package/components/ion-skeleton-text.js

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

package/components/ion-split-pane.js

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

package/components/ion-tab-bar.js

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

package/components/ion-tab-button.js

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