@ionic/core 8.8.19-dev.11786730389.1a1927bf → 8.8.19-dev.11786735826.1fad7c0a

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

@@ -3,12 +3,13 @@
  */
 import { Build, Host, h, forceUpdate } from "@stencil/core";
 import { ENABLE_HTML_CONTENT_DEFAULT } from "../../utils/config";
-import { compareOptions, createNotchController, isOptionSelected, checkInvalidState } from "../../utils/forms/index";
+import { compareOptions, createNotchController, createStartContainerController, isOptionSelected, checkInvalidState, } from "../../utils/forms/index";
 import { focusVisibleElement, renderHiddenInput, inheritAttributes } from "../../utils/helpers";
 import { printIonWarning } from "../../utils/logging/index";
 import { actionSheetController, alertController, popoverController, modalController } from "../../utils/overlays";
 import { isRTL } from "../../utils/rtl/index";
 import { reflectPropertiesToAttributes, sanitizeDOMTree } from "../../utils/sanitization/index";
+import { createSlotMutationController } from "../../utils/slot-mutation-controller";
 import { createColorClasses, hostContext } from "../../utils/theme";
 import { watchForOptions } from "../../utils/watch-options";
 import { caretDownSharp, chevronExpand } from "ionicons/icons";
@@ -32,7 +33,9 @@ import { getIonMode } from "../../global/ionic-global";
  * @part error-text - Supporting text displayed beneath the select when the select is invalid and touched.
  * @part bottom - The container element for helper text, error text, and counter.
  * @part wrapper - The clickable label element that wraps the entire form field (label text, slots, selected values or placeholder, and toggle icons).
- * @part inner - The inner element of the wrapper that manages the slots, selected values or placeholder, and toggle icons.
+ * @part start - The wrapper element for the content in the start slot.
+ * @part control - The wrapper element containing the label and native select control. When the label is not floating or stacked, this part also contains the dropdown icon.
+ * @part end - The wrapper element for the content in the end slot. When the label is floating or stacked, this part also contains the dropdown icon.
  */
 export class Select {
     inputId = `ion-sel-${selectIds++}`;
@@ -42,10 +45,13 @@ export class Select {
     focusEl;
     mutationO;
     inheritedAttributes = {};
+    slotMutationController;
     nativeWrapperEl;
     notchSpacerEl;
     validationObserver;
     notchController;
+    startContainerController;
+    startContainerEl;
     customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
     el;
     isExpanded = false;
@@ -256,7 +262,15 @@ export class Select {
     }
     async connectedCallback() {
         const { el } = this;
+        this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => {
+            this.startContainerController?.calculateStartContainerWidth();
+            forceUpdate(this);
+        });
         this.notchController = createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
+        this.startContainerController = createStartContainerController(el, () => this.startContainerEl, () => {
+            return Build.isBrowser && getIonMode(this) === 'md' && this.fill === 'outline';
+        });
+        this.startContainerController.calculateStartContainerWidth();
         this.updateOverlayOptions();
         this.emitStyle();
         this.mutationO = watchForOptions(this.el, 'ion-select-option', async () => {
@@ -328,10 +342,18 @@ export class Select {
             this.mutationO.disconnect();
             this.mutationO = undefined;
         }
+        if (this.slotMutationController) {
+            this.slotMutationController.destroy();
+            this.slotMutationController = undefined;
+        }
         if (this.notchController) {
             this.notchController.destroy();
             this.notchController = undefined;
         }
+        if (this.startContainerController) {
+            this.startContainerController.destroy();
+            this.startContainerController = undefined;
+        }
         // Clean up validation observer to prevent memory leaks.
         if (this.validationObserver) {
             this.validationObserver.disconnect();
@@ -839,6 +861,7 @@ export class Select {
     }
     componentDidRender() {
         this.notchController?.calculateNotchWidth();
+        this.startContainerController?.calculateStartContainerWidth();
     }
     /**
      * Gets any content passed into the `label` slot,
@@ -857,44 +880,24 @@ export class Select {
         return this.label !== undefined || this.labelSlot !== null;
     }
     /**
-     * Stops propagation when the label is clicked,
-     * otherwise, two clicks will be triggered.
+     * Stops propagation for re-dispatched clicks (when already expanded) to
+     * prevent double-click events. Allows initial button clicks (from keyboard
+     * or mouse) and slotted content clicks to propagate so event delegation
+     * works for parent handlers.
      */
     onLabelClick = (ev) => {
-        // Only stop propagation if the click was directly on the label
-        // and not on the input or other child elements
-        if (ev.target === ev.currentTarget) {
+        if (ev.target === this.focusEl && this.isExpanded) {
             ev.stopPropagation();
         }
     };
     /**
-     * Renders the border container
-     * when fill="outline".
+     * Renders the outline border with a notch for the label.
      */
-    renderLabelContainer() {
-        const mode = getIonMode(this);
-        const hasOutlineFill = mode === 'md' && this.fill === 'outline';
-        if (hasOutlineFill) {
-            /**
-             * The outline fill has a special outline
-             * that appears around the select and the label.
-             * Certain stacked and floating label placements cause the
-             * label to translate up and create a "cut out"
-             * inside of that border by using the notch-spacer element.
-             */
-            return [
-                h("div", { class: "select-outline-container" }, h("div", { class: "select-outline-start" }), h("div", { class: {
-                        'select-outline-notch': true,
-                        'select-outline-notch-hidden': !this.hasLabel,
-                    } }, h("div", { class: "notch-spacer", "aria-hidden": "true", ref: (el) => (this.notchSpacerEl = el) }, this.label)), h("div", { class: "select-outline-end" })),
-                this.renderLabel(),
-            ];
-        }
-        /**
-         * If not using the outline style,
-         * we can render just the label.
-         */
-        return this.renderLabel();
+    renderOutlineContainer() {
+        return (h("div", { class: "select-outline-container" }, h("div", { class: "select-outline-start" }), h("div", { class: {
+                'select-outline-notch': true,
+                'select-outline-notch-hidden': !this.hasLabel,
+            } }, h("div", { class: "notch-spacer", "aria-hidden": "true", ref: (el) => (this.notchSpacerEl = el) }, this.label)), h("div", { class: "select-outline-end" })));
     }
     /**
      * Wraps text nodes in the select text with span elements
@@ -1054,28 +1057,10 @@ export class Select {
         const inItem = hostContext('ion-item', this.el);
         const shouldRenderHighlight = mode === 'md' && fill !== 'outline' && !inItem;
         const hasValue = this.hasValue();
-        const hasStartEndSlots = el.querySelector('[slot="start"], [slot="end"]') !== null;
+        const hasOutlineFill = mode === 'md' && fill === 'outline';
         renderHiddenInput(true, el, name, parseValue(value), disabled);
-        /**
-         * If the label is stacked, it should always sit above the select.
-         * For floating labels, the label should move above the select if
-         * the select has a value, is open, or has anything in either
-         * the start or end slot.
-         *
-         * If there is content in the start slot, the label would overlap
-         * it if not forced to float. This is also applied to the end slot
-         * because with the default or solid fills, the select is not
-         * vertically centered in the container, but the label is. This
-         * causes the slots and label to appear vertically offset from each
-         * other when the label isn't floating above the input. This doesn't
-         * apply to the outline fill, but this was not accounted for to keep
-         * things consistent.
-         *
-         * TODO(FW-5592): Remove hasStartEndSlots condition
-         */
-        const labelShouldFloat = labelPlacement === 'stacked' ||
-            (labelPlacement === 'floating' && (hasValue || hasFocus || isExpanded || hasStartEndSlots));
-        return (h(Host, { key: 'e693afee7852c89be122b785230ed8fc9be5ba61', onClick: this.onClick, class: createColorClasses(this.color, {
+        const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || isExpanded));
+        return (h(Host, { key: '5d1e5bf46d0f204efdcb55cc42cfde52e6db304b', onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -1093,7 +1078,7 @@ export class Select {
                 [`select-justify-${justify}`]: justifyEnabled,
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
-            }) }, h("label", { key: 'd79647bd83cab506f01a4588f631b3982fa1c011', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick, part: "wrapper" }, this.renderLabelContainer(), h("div", { key: 'fa8d78b9ea041dc9e897643f22f33f38e645ce69', class: "select-wrapper-inner", part: "inner" }, h("slot", { key: '45666226a6898a538849bd3d3b89510bf689656f', name: "start" }), h("div", { key: '59f1f08109c4cda699cb2a9f2a6bce00a7fc4301', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '79b18fd4ca2af9528ff89c609ea20b3e727701e1', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: '0149f4ddb4ca1d1d2e2ca91b6cbec721d5c8aa9b', class: "select-highlight" })), this.renderBottomContent()));
+            }) }, h("label", { key: '15fd1f8e06510ae8472c621cf8cf90e51172e0be', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick, part: "wrapper" }, hasOutlineFill && this.renderOutlineContainer(), h("div", { key: '7964e3d9351671899793b117896acdda25ec24c4', class: "select-start", part: "start", ref: (el) => (this.startContainerEl = el) }, h("slot", { key: 'aa309ef155c4025acfd7ed5739b5221c85097b36', name: "start" })), h("div", { key: '23d5a9dfea64a9d81b0b36d9426b15bed98901b9', class: "select-control", part: "control" }, this.renderLabel(), h("div", { key: '810da9fbfa8771e09b5fb768d64e5f04858b5833', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox(), !hasFloatingOrStackedLabel && this.renderSelectIcon())), h("div", { key: 'bf1c04704326ecfa14cf2e49bb76d3fb45beb08d', class: "select-end", part: "end" }, hasFloatingOrStackedLabel && this.renderSelectIcon(), h("slot", { key: '76a8bcaeefdcaa908aebd820d93171b08165cee3', name: "end" })), shouldRenderHighlight && h("div", { key: '55a9c417a82323a44e16328fd62a634d9d7c558b', class: "select-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-select"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/select/select.md.css

@@ -202,33 +202,6 @@ button {
   color: inherit;
 }
 
-/**
- * The select icon should be centered with
- * the entire container not just the control
- * with floating/stacked labels.
- */
-:host(.select-label-placement-stacked) .select-icon,
-:host(.select-label-placement-floating) .select-icon {
-  position: absolute;
-  height: 100%;
-}
-
-/**
- * This positions the icon at the correct
- * edge of the component with LTR and RTL
- * text directions. The position mixin cannot be
- * used here because the icon is in the Shadow DOM.
- */
-: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 {
   flex: 1;
   min-width: 16px;
@@ -271,7 +244,7 @@ button {
   display: flex;
   position: relative;
   flex-grow: 1;
-  align-items: center;
+  align-items: stretch;
   justify-content: space-between;
   height: inherit;
   /**
@@ -297,21 +270,24 @@ button {
   transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.select-wrapper-inner {
+/**
+ * The control must inherit specific flex properties
+ * so that it will be placed properly when justify
+ * or label-placement are set on the host.
+ */
+.select-control {
   display: flex;
+  flex: 1;
+  flex-direction: inherit;
   align-items: center;
-  overflow: hidden;
-}
-
-:host(.select-label-placement-stacked) .select-wrapper-inner,
-:host(.select-label-placement-floating) .select-wrapper-inner {
+  justify-content: inherit;
   /**
-   * When using a stacked/floating label, the inner wrapper is
-   * stacked vertically under the label container. This line
-   * ensures that the inner wrapper fills all the remaining height
-   * of the component.
+   * The min-width is set to 0 to allow flex items to shrink below
+   * their content size. This enables the select text to collapse
+   * in width. We avoid overflow: hidden here because it will clip
+   * the floating label.
    */
-  flex-grow: 1;
+  min-width: 0;
 }
 
 :host(.ion-touched.ion-invalid) {
@@ -399,6 +375,12 @@ button {
    */
   display: flex;
   align-items: center;
+  /**
+   * Allows the label to shrink below its intrinsic content width.
+   * Without this the label keeps its full width and can push the
+   * select and end slot outside the wrapper.
+   */
+  min-width: 0;
   /**
    * Label text should not extend
    * beyond the bounds of the select.
@@ -417,6 +399,18 @@ button {
   pointer-events: none;
 }
 
+/**
+ * When start/end slots are added or removed, we temporarily
+ * disable the label transition to prevent the floating label
+ * from animating as its position is adjusted.
+ *
+ * This class is applied by the start container controller, so
+ * renaming it here requires renaming it there too.
+ */
+:host(.skip-label-transition) .label-text-wrapper {
+  transition: none;
+}
+
 /**
  * We need to use two elements instead of
  * one. The .label-text-wrapper is responsible
@@ -449,6 +443,13 @@ button {
 
 .native-wrapper {
   display: flex;
+  /**
+   * Give up space before the label does. Flexbox would otherwise take
+   * from both in proportion to their size and truncate the shorter
+   * label first. The factor is this large because the label truncates
+   * as soon as it loses any width at all, even a fraction of a pixel.
+   */
+  flex-shrink: 100000;
   align-items: center;
   /**
    * When the floating label appears on top of the
@@ -552,9 +553,16 @@ button {
  * down when the select is focused or has a value.
  *
  */
-:host(.select-label-placement-stacked) .select-wrapper,
-:host(.select-label-placement-floating) .select-wrapper {
+:host(.select-label-placement-stacked) .select-control,
+:host(.select-label-placement-floating) .select-control {
   flex-direction: column;
+  /**
+   * When using a stacked/floating label, the control is
+   * stacked vertically under the label container. This line
+   * ensures that the control fills all the remaining height
+   * of the component.
+   */
+  flex-grow: 1;
   align-items: start;
 }
 
@@ -579,17 +587,11 @@ button {
 }
 
 /**
- * Ensures the select does not
- * overlap the label.
- * Also ensure that the native wrapper
- * takes up the remaining available height and width.
+ * Ensures that the native wrapper takes up the
+ * remaining available height and width.
  */
 :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;
   flex-grow: 1;
   width: 100%;
 }
@@ -613,27 +615,16 @@ button {
  * The placeholder should be hidden when the label
  * is on top of the select. This prevents the label
  * from overlapping any placeholder value.
- *
- * TODO(FW-5592): Remove :not(.label-floating) piece
  */
-:host(.select-label-placement-floating:not(.label-floating)) .native-wrapper .select-placeholder {
+:host(.select-label-placement-floating) .native-wrapper .select-placeholder {
   opacity: 0;
 }
 
 /**
- * We don't use .label-floating here because that would
- * also include the case where the label is floating due
- * to content in the start/end slot. We want the opacity
- * to remain at the default in this case, since the select
- * isn't being actively interacted with.
- *
- * TODO(FW-5592): Change entire selector to:
- * :host(.label-floating.select-label-placement-floating) .native-wrapper .select-placeholder
+ * Show the placeholder when the label is floating.
  */
-:host(.select-expanded.select-label-placement-floating) .native-wrapper .select-placeholder,
-:host(.has-focus.select-label-placement-floating) .native-wrapper .select-placeholder,
-:host(.has-value.select-label-placement-floating) .native-wrapper .select-placeholder {
-  opacity: 1;
+:host(.label-floating.select-label-placement-floating) .native-wrapper .select-placeholder {
+  opacity: var(--placeholder-opacity);
 }
 
 /**
@@ -648,6 +639,14 @@ button {
   max-width: calc(100% / 0.75);
 }
 
+.select-start,
+.select-end {
+  display: flex;
+  position: relative;
+  flex-shrink: 0;
+  align-items: center;
+}
+
 ::slotted([slot=start]), ::slotted([slot=end]) {
   /**
    * Prevent the slots from shrinking when the label and/or
@@ -980,6 +979,14 @@ button {
   --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
+  /**
+   * The measured width of the start container, as a negative offset
+   * in LTR and a positive one in RTL. Written to the host by the
+   * start container controller, so renaming it here requires renaming
+   * it there too. Declared with a default so the label is positioned
+   * correctly before the first measurement runs.
+   */
+  --internal-start-container-adjustment: 0px;
   min-height: 56px;
 }
 
@@ -1049,10 +1056,11 @@ button {
 :host(.select-fill-outline.select-label-placement-floating) .label-text-wrapper {
   position: absolute;
   /**
-   * Label text should not extend
-   * beyond the bounds of the select.
+   * While resting this is the width of the select, which already
+   * excludes the start and end slots. Once the label floats the
+   * containing block becomes the wrapper and the rule below takes over.
    */
-  max-width: calc(100% - var(--padding-start) - var(--padding-end));
+  max-width: 100%;
 }
 
 /**
@@ -1065,11 +1073,20 @@ button {
   z-index: 1;
 }
 
+/**
+ * The resting label is positioned relative to the control so it can size to
+ * the space between the start and end slots. When floating, the label needs
+ * to escape the control and position itself relative to the wrapper instead.
+ */
+:host(.select-fill-outline:not(.label-floating)) .select-control {
+  position: relative;
+}
+
 /**
  * This makes the label sit above the select.
  */
 :host(.label-floating.select-fill-outline) .label-text-wrapper {
-  transform: translateY(-32%) scale(0.75);
+  transform: translate(var(--internal-start-container-adjustment, 0px), -32%) scale(0.75);
   margin-left: 0;
   margin-right: 0;
   margin-top: 0;
@@ -1164,16 +1181,10 @@ button {
 :host(.select-fill-outline) .select-outline-start {
   -webkit-border-start: var(--border-width) var(--border-style) var(--border-color);
   border-inline-start: var(--border-width) var(--border-style) var(--border-color);
-}
-
-:host(.select-fill-outline) .select-outline-start {
   border-start-start-radius: var(--border-radius);
   border-start-end-radius: 0px;
   border-end-end-radius: 0px;
   border-end-start-radius: var(--border-radius);
-}
-
-:host(.select-fill-outline) .select-outline-start {
   /**
    * There should be spacing between the translated text
    * and .select-outline-start. However, we can't add this
@@ -1188,16 +1199,10 @@ button {
 :host(.select-fill-outline) .select-outline-end {
   -webkit-border-end: var(--border-width) var(--border-style) var(--border-color);
   border-inline-end: var(--border-width) var(--border-style) var(--border-color);
-}
-
-:host(.select-fill-outline) .select-outline-end {
   border-start-start-radius: 0px;
   border-start-end-radius: var(--border-radius);
   border-end-end-radius: var(--border-radius);
   border-end-start-radius: 0px;
-}
-
-:host(.select-fill-outline) .select-outline-end {
   /**
    * The ending outline fragment
    * should take up the remaining free space.
@@ -1326,11 +1331,6 @@ button {
   --border-radius: 16px;
 }
 
-:host(.select-label-placement-stacked) .select-wrapper-inner,
-:host(.select-label-placement-floating) .select-wrapper-inner {
-  width: calc(100% - 0.8125rem - 4px);
-}
-
 :host(.select-disabled) {
   opacity: 0.38;
 }

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

@@ -144,7 +144,7 @@ export class SelectModal {
         });
     }
     render() {
-        return (h(Host, { key: '2cb1ae057b7a66f5d12c926f618f6b945f019803', class: getIonMode(this) }, h("ion-header", { key: 'e41f1c4ad1c71dcc927d210502d6366cea894a14' }, h("ion-toolbar", { key: '1a191dfc8980541469ee4d8996ba4de52cac1ac5' }, this.header !== undefined && h("ion-title", { key: '14ab9cb7d41d15b982c6ccd8ba6cee0e9cb528d9' }, this.header), h("ion-buttons", { key: '80451a2ed3a82138eb1575135cf2ebbd5e8f6e60', slot: "end" }, h("ion-button", { key: '01a315cd739569f3c0b23a4d243d52b69b63dfa7', onClick: () => this.closeModal() }, this.cancelText)))), h("ion-content", { key: 'd953101bae9a91f8108f7a5e411bb1e34338655d' }, h("ion-list", { key: '171a5668afc67b03d2ee87e91cf400b17541bc7f' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
+        return (h(Host, { key: '791e95b985dd4b135db17a25fc678e9f8b73c597', class: getIonMode(this) }, h("ion-header", { key: '697d18eef394c4c11c73afe69b9eadd1bad97d38' }, h("ion-toolbar", { key: '036968824ad8771020fe2b7604a6e72b73efc8ae' }, this.header !== undefined && h("ion-title", { key: '102e0346be83e879e733f9b410437b26216156aa' }, this.header), h("ion-buttons", { key: '436b997e990ce2f5e12e1651f8afc31ae231f7b0', slot: "end" }, h("ion-button", { key: 'ee4ddfd0612d33583aa0b93ebdb5257b10d4fda5', onClick: () => this.closeModal() }, this.cancelText)))), h("ion-content", { key: '38ea098f85ac69226e614e0a09f668e9209f7ea1' }, h("ion-list", { key: '20becc2537a1a027915fe0598203039ceb8ba4f3' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
     }
     static get is() { return "ion-select-modal"; }
     static get encapsulation() { return "scoped"; }

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

@@ -56,7 +56,7 @@ export class SelectOption {
      */
     justify;
     render() {
-        return h(Host, { key: '8b8bef0f5a55f18048708c34d3ea3ff0ff2f1d47', role: "option", id: this.inputId, class: getIonMode(this) });
+        return h(Host, { key: '01275b5a613c4b065b24e0d939f611f6ed1fc9ee', role: "option", id: this.inputId, class: getIonMode(this) });
     }
     static get is() { return "ion-select-option"; }
     static get encapsulation() { return "shadow"; }

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

@@ -179,7 +179,7 @@ export class SelectPopover {
     render() {
         const { header, message, options, subHeader } = this;
         const hasSubHeaderOrMessage = subHeader !== undefined || message !== undefined;
-        return (h(Host, { key: 'd0c107e0ca78955a3cfcd9f098a527fb35eff14d', class: getIonMode(this) }, h("ion-list", { key: '1e103312e22bf78d2201a0f88cc4fed789f62a2b' }, header !== undefined && h("ion-list-header", { key: '657439905dc480112ed8d7f8d4a01464724de2bd' }, header), hasSubHeaderOrMessage && (h("ion-item", { key: 'e0eaa0250bf233cf846adba5ddc141bf3430c2a8' }, h("ion-label", { key: 'ad1cff877f9d582fbc64f9049603146fd1a1a6f9', class: "ion-text-wrap" }, subHeader !== undefined && h("h3", { key: 'ead921d395b614a99c89a8ffe2a102a620f80767' }, subHeader), message !== undefined && h("p", { key: '3a47e7091528930f33324ccd04d6734217155244' }, message)))), this.renderOptions(options))));
+        return (h(Host, { key: '4b4ac4a4b6523147e7c1f5e29dd8043867f2baea', class: getIonMode(this) }, h("ion-list", { key: 'f700d3dc3ce68c20a4d981164b29262564097fb4' }, header !== undefined && h("ion-list-header", { key: '196bcd7963f13ef8bc46231545eee4cb8d526f5e' }, header), hasSubHeaderOrMessage && (h("ion-item", { key: 'bb108e0aa2409997df35f52cb67e58e55e0fd630' }, h("ion-label", { key: '59e8d9196ff976f3835766662654c0f085e58ec3', class: "ion-text-wrap" }, subHeader !== undefined && h("h3", { key: '532f75d7c129ffadca4e6cbb619a4427aaede65c' }, subHeader), message !== undefined && h("p", { key: 'fc42c91594b9001e983cb5e4176fc4c9bff0f708' }, message)))), this.renderOptions(options))));
     }
     static get is() { return "ion-select-popover"; }
     static get encapsulation() { return "scoped"; }

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

@@ -32,11 +32,11 @@ export class SkeletonText {
         const animated = this.animated && config.getBoolean('animated', true);
         const inMedia = hostContext('ion-avatar', this.el) || hostContext('ion-thumbnail', this.el);
         const mode = getIonMode(this);
-        return (h(Host, { key: '887d958d982345ce610730ab5c9ae35010430f75', class: {
+        return (h(Host, { key: '1114e5caf6419e9458db8256480b39e6989963b2', class: {
                 [mode]: true,
                 'skeleton-text-animated': animated,
                 'in-media': inMedia,
-            } }, h("span", { key: 'a184f4b9780a2aada0a16729109ac81436e9c9e1' }, "\u00A0")));
+            } }, h("span", { key: '9137cf837f163fc0653437fc003666cddac103b0' }, "\u00A0")));
     }
     static get is() { return "ion-skeleton-text"; }
     static get encapsulation() { return "shadow"; }

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

@@ -51,7 +51,7 @@ export class Spinner {
                 svgs.push(buildLine(spinner, duration, i, spinner.lines));
             }
         }
-        return (h(Host, { key: 'c35ebd01186e860acb9cac260193f0836424fdf4', class: createColorClasses(self.color, {
+        return (h(Host, { key: '87102ff9ea58b0ecde5d0978386374f7d0e9cf98', class: createColorClasses(self.color, {
                 [mode]: true,
                 [`spinner-${spinnerName}`]: true,
                 'spinner-paused': self.paused || config.getBoolean('_testing'),

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

@@ -138,12 +138,12 @@ export class SplitPane {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '694e989fafcfe2453e0a83b3cb736efaa1eb4fec', class: {
+        return (h(Host, { key: '652bc0965ae962dc36a67fd7129dacaa1ba8e551', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`split-pane-${mode}`]: true,
                 'split-pane-visible': this.visible,
-            } }, h("slot", { key: 'dde7e9382b62cc11971aa233cf98c2314ae4f720' })));
+            } }, h("slot", { key: '9eac85f4c4e33ec00e8e16e2679f5975d7652452' })));
     }
     static get is() { return "ion-split-pane"; }
     static get encapsulation() { return "shadow"; }

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

@@ -65,10 +65,10 @@ export class Tab {
     }
     render() {
         const { tab, active, component } = this;
-        return (h(Host, { key: 'b0c7c9eeb322d1c8a4b3e07a331b603a8028fa2f', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
+        return (h(Host, { key: '8ecbd7a85d3370ed8ed40561cd8134e71584d6aa', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
                 'ion-page': component === undefined,
                 'tab-hidden': !active,
-            } }, h("slot", { key: 'd22fc996eff4976c4b37405ed1dd7bcd90e32f2a' })));
+            } }, h("slot", { key: '8d6326d75812888e33fd09665b7e588e1e270df1' })));
     }
     static get is() { return "ion-tab"; }
     static get encapsulation() { return "shadow"; }

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

@@ -105,11 +105,11 @@ export class TabBar {
         const { color, translucent, keyboardVisible } = this;
         const mode = getIonMode(this);
         const shouldHide = keyboardVisible && this.el.getAttribute('slot') !== 'top';
-        return (h(Host, { key: '148f65df0818e9d220a9b46db74cb89ab94e62d2', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: '5c56cffd380df7720f3309af7cfca71500817678', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses(color, {
                 [mode]: true,
                 'tab-bar-translucent': translucent,
                 'tab-bar-hidden': shouldHide,
-            }) }, h("slot", { key: 'a64e235f3703662e2dd7a834f752cc5b1490adbc' })));
+            }) }, h("slot", { key: 'a98d3298320f864578e30e0fb79a2cc0cccb46d9' })));
     }
     static get is() { return "ion-tab-bar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -109,7 +109,7 @@ export class TabButton {
             rel,
             target,
         };
-        return (h(Host, { key: '1034b5a928ecec49bd8efec3730ea1b11a579cf3', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
+        return (h(Host, { key: '45bb7ffa6d8764202adc2c5c393748d4003e86fe', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
                 [mode]: true,
                 'tab-selected': selected,
                 'tab-disabled': disabled,
@@ -121,7 +121,7 @@ export class TabButton {
                 'ion-activatable': true,
                 'ion-selectable': true,
                 'ion-focusable': true,
-            } }, h("a", { key: '4cc8e695425956ffc7622af27c1b88a45f8a0c68', ...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: 'c529c166f557e1a5c744873c075b564c49786a2c', class: "button-inner" }, h("slot", { key: 'f832355934d80267cd6e81e58b9c5afce0b42907' })), mode === 'md' && h("ion-ripple-effect", { key: '90e79bdf38ba1cd89fca9ce63465e26a29b49316', type: "unbounded" }))));
+            } }, h("a", { key: '78c416609a2b86a6e7c5f217ffd2a6b9f80a5103', ...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: '62934156439ffd0ab86674b9cf89d9cfa0d3589c', class: "button-inner" }, h("slot", { key: '293ba8f5ef50373c4e6e492dcaa55b3d2aae8d2f' })), mode === 'md' && h("ion-ripple-effect", { key: '360b010afedcf17fc1f3ab6d192f0f8c7b1cf112', type: "unbounded" }))));
     }
     static get is() { return "ion-tab-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -175,7 +175,7 @@ export class Tabs {
         }
     };
     render() {
-        return (h(Host, { key: 'ba04a29fdd02d7c758cbaa98cfc589949872d832', onIonTabButtonClick: this.onTabClicked }, h("slot", { key: 'd5794140152e2c251e567eeb06afc392af74749d', name: "top" }), h("div", { key: '26fb83786637fe7288901fbbdb3694b8bc94329f', class: "tabs-inner" }, h("slot", { key: '60c663a8647e684455b533eaf5fa3908f9333ae9' })), h("slot", { key: '2d9f7d07c8cdc72f5df200fa71fa56a9dd822c4c', name: "bottom" })));
+        return (h(Host, { key: '7b8c6455e0673e343d0c759ed85e0d9970de3bb8', onIonTabButtonClick: this.onTabClicked }, h("slot", { key: '7d0d840ae03312ca22bcb694ffca738d6648218e', name: "top" }), h("div", { key: 'f336d903800af34af0d36adfc94223b940111e6a', class: "tabs-inner" }, h("slot", { key: '14656154959a24ae176eff20f6463043180d2eae' })), h("slot", { key: '2be4d114f058d24b0e70fb12cfb0eccd3d6e6a74', name: "bottom" })));
     }
     static get is() { return "ion-tabs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -16,9 +16,9 @@ export class Text {
     color;
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '41ed8da617ed0e07bbfe96e32a000e1c6503e24e', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'b6f604df1b7aa5705a5b9a458e669a6a921c02a1', class: createColorClasses(this.color, {
                 [mode]: true,
-            }) }, h("slot", { key: 'db8de04a2493537b3037f276b03abd92dfa56847' })));
+            }) }, h("slot", { key: '055d07b024a6554dfcf959fc8ed7b405e2730af2' })));
     }
     static get is() { return "ion-text"; }
     static get encapsulation() { return "shadow"; }