@ionic/core 8.7.18-dev.11770916502.174efd7f → 8.7.18-dev.11771365900.125bf49c

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

@@ -14,58 +14,6 @@ import './index-ZjP4CjeZ.js';
 import './hardware-back-button-CPLxO-Ev.js';
 import './gesture-controller-BTEOs1at.js';
 
-/**
- * Shared per-frame cache for safe-area insets. Avoids creating a temporary
- * DOM element and forcing a synchronous reflow on every call within the same
- * frame (e.g., multiple popovers presenting simultaneously). Invalidated
- * after the next animation frame so values stay fresh across orientation
- * changes and viewport resizes.
- */
-let cachedInsets = null;
-let cacheInvalidationScheduled = false;
-/**
- * Resolves the current --ion-safe-area-* CSS custom property values
- * to actual pixel numbers. A temporary element is needed because
- * getComputedStyle on :root returns the declared value of custom
- * properties (e.g. "env(safe-area-inset-top)") rather than a
- * resolved number. By assigning them to standard padding properties,
- * the browser resolves the value.
- *
- * Results are cached for the current frame to avoid repeated reflows.
- */
-const getSafeAreaInsets = (doc) => {
-    if (cachedInsets !== null) {
-        return cachedInsets;
-    }
-    if (doc.body === null) {
-        return { top: 0, bottom: 0, left: 0, right: 0 };
-    }
-    const el = doc.createElement('div');
-    el.style.cssText =
-        'position:fixed;visibility:hidden;pointer-events:none;top:0;left:0;' +
-            'padding-top:var(--ion-safe-area-top,0px);' +
-            'padding-bottom:var(--ion-safe-area-bottom,0px);' +
-            'padding-left:var(--ion-safe-area-left,0px);' +
-            'padding-right:var(--ion-safe-area-right,0px);';
-    doc.body.appendChild(el);
-    const style = getComputedStyle(el);
-    const insets = {
-        top: parseFloat(style.paddingTop) || 0,
-        bottom: parseFloat(style.paddingBottom) || 0,
-        left: parseFloat(style.paddingLeft) || 0,
-        right: parseFloat(style.paddingRight) || 0,
-    };
-    el.remove();
-    cachedInsets = insets;
-    if (!cacheInvalidationScheduled) {
-        cacheInvalidationScheduled = true;
-        raf(() => {
-            cachedInsets = null;
-            cacheInvalidationScheduled = false;
-        });
-    }
-    return insets;
-};
 /**
  * Returns the dimensions of the popover
  * arrow on `ios` mode. If arrow is disabled
@@ -701,10 +649,8 @@ const calculatePopoverCenterAlign = (side, triggerBoundingBox, contentWidth, con
  * Adjusts popover positioning coordinates
  * such that popover does not appear offscreen
  * or overlapping safe area bounds.
- *
- * @internal - This is not part of the public API.
  */
-const calculateWindowAdjustment = (side, coordTop, coordLeft, bodyPadding, bodyWidth, bodyHeight, contentWidth, contentHeight, safeArea, contentOriginX, contentOriginY, triggerCoordinates, coordArrowTop = 0, coordArrowLeft = 0, arrowHeight = 0) => {
+const calculateWindowAdjustment = (side, coordTop, coordLeft, bodyPadding, bodyWidth, bodyHeight, contentWidth, contentHeight, safeAreaMargin, contentOriginX, contentOriginY, triggerCoordinates, coordArrowTop = 0, coordArrowLeft = 0, arrowHeight = 0) => {
     let arrowTop = coordArrowTop;
     const arrowLeft = coordArrowLeft;
     let left = coordLeft;
@@ -714,19 +660,16 @@ const calculateWindowAdjustment = (side, coordTop, coordLeft, bodyPadding, bodyW
     let originY = contentOriginY;
     let checkSafeAreaLeft = false;
     let checkSafeAreaRight = false;
-    let checkSafeAreaTop = false;
-    let checkSafeAreaBottom = false;
     const triggerTop = triggerCoordinates
         ? triggerCoordinates.top + triggerCoordinates.height
         : bodyHeight / 2 - contentHeight / 2;
     const triggerHeight = triggerCoordinates ? triggerCoordinates.height : 0;
     let addPopoverBottomClass = false;
-    const hideArrow = false;
     /**
      * Adjust popover so it does not
      * go off the left of the screen.
      */
-    if (left < bodyPadding + safeArea.left) {
+    if (left < bodyPadding + safeAreaMargin) {
         left = bodyPadding;
         checkSafeAreaLeft = true;
         originX = 'left';
@@ -735,58 +678,41 @@ const calculateWindowAdjustment = (side, coordTop, coordLeft, bodyPadding, bodyW
          * go off the right of the screen.
          */
     }
-    else if (contentWidth + bodyPadding + left + safeArea.right > bodyWidth) {
+    else if (contentWidth + bodyPadding + left + safeAreaMargin > bodyWidth) {
         checkSafeAreaRight = true;
         left = bodyWidth - contentWidth - bodyPadding;
         originX = 'right';
     }
     /**
      * Adjust popover so it does not
-     * go off the bottom of the screen
-     * or overlap the bottom safe area.
+     * go off the top of the screen.
      * If popover is on the left or the right of
      * the trigger, then we should not adjust top
      * margins.
      */
-    if (triggerTop + triggerHeight + contentHeight > bodyHeight - safeArea.bottom &&
-        (side === 'top' || side === 'bottom')) {
-        /**
-         * Calculate where the popover top would be if flipped
-         * above the trigger. Check whether that position clears
-         * the top safe area with room for bodyPadding.
-         */
-        const idealFlipTop = triggerTop - contentHeight - triggerHeight - (arrowHeight - 1);
-        if (idealFlipTop >= safeArea.top + bodyPadding) {
+    if (triggerTop + triggerHeight + contentHeight > bodyHeight && (side === 'top' || side === 'bottom')) {
+        if (triggerTop - contentHeight > 0) {
             /**
-             * Popover fits above the trigger without overlapping
-             * the top safe area. Use the ideal position directly —
-             * no safe-area CSS vars needed since it clears both edges.
+             * While we strive to align the popover with the trigger
+             * on smaller screens this is not always possible. As a result,
+             * we adjust the popover up so that it does not hang
+             * off the bottom of the screen. However, we do not want to move
+             * the popover up so much that it goes off the top of the screen.
+             *
+             * We chose 12 here so that the popover position looks a bit nicer as
+             * it is not right up against the edge of the screen.
              */
-            top = idealFlipTop;
+            top = Math.max(12, triggerTop - contentHeight - triggerHeight - (arrowHeight - 1));
             arrowTop = top + contentHeight;
             originY = 'bottom';
             addPopoverBottomClass = true;
-        }
-        else {
             /**
-             * Can't flip above the trigger. Constrain the bottom
-             * edge while keeping the top near the trigger. This
-             * creates a scrollable area anchored to the trigger.
+             * If not enough room for popover to appear
+             * above trigger, then cut it off.
              */
+        }
+        else {
             bottom = bodyPadding;
-            checkSafeAreaBottom = true;
-            /**
-             * When the trigger is near the bottom of the screen,
-             * the calculated top may be at or past the bottom
-             * constraint, leaving zero visible height. In that
-             * case, pull top up to the top safe area so the
-             * popover fills the available space between safe areas.
-             */
-            const bottomEdge = bodyHeight - safeArea.bottom - bodyPadding;
-            if (top >= bottomEdge) {
-                top = safeArea.top + bodyPadding;
-                checkSafeAreaTop = true;
-            }
         }
     }
     return {
@@ -797,12 +723,9 @@ const calculateWindowAdjustment = (side, coordTop, coordLeft, bodyPadding, bodyW
         originY,
         checkSafeAreaLeft,
         checkSafeAreaRight,
-        checkSafeAreaTop,
-        checkSafeAreaBottom,
         arrowTop,
         arrowLeft,
         addPopoverBottomClass,
-        hideArrow,
     };
 };
 const shouldShowArrow = (side, didAdjustBounds = false, ev, trigger) => {
@@ -832,15 +755,6 @@ const shouldShowArrow = (side, didAdjustBounds = false, ev, trigger) => {
 };
 
 const POPOVER_IOS_BODY_PADDING = 5;
-/**
- * Minimum edge margin for iOS popovers ensures visual spacing from screen
- * edges on devices without safe areas (e.g., older iPhones without notches).
- * Previously this was a hardcoded `safeAreaMargin = 25` that served dual
- * purpose: safe-area avoidance AND visual spacing. Now that actual safe-area
- * insets are read dynamically, this floor preserves the visual spacing when
- * safe-area values are 0.
- */
-const POPOVER_IOS_MIN_EDGE_MARGIN = 25;
 /**
  * iOS Popover Enter Animation
  */
@@ -866,16 +780,8 @@ const iosEnterAnimation = (baseEl, opts) => {
     };
     const results = getPopoverPosition(isRTL, contentWidth, contentHeight, arrowWidth, arrowHeight, reference, side, align, defaultPosition, trigger, ev);
     const padding = size === 'cover' ? 0 : POPOVER_IOS_BODY_PADDING;
-    const rawSafeArea = getSafeAreaInsets(doc);
-    const safeArea = size === 'cover'
-        ? { top: 0, bottom: 0, left: 0, right: 0 }
-        : {
-            top: Math.max(rawSafeArea.top, POPOVER_IOS_MIN_EDGE_MARGIN),
-            bottom: Math.max(rawSafeArea.bottom, POPOVER_IOS_MIN_EDGE_MARGIN),
-            left: Math.max(rawSafeArea.left, POPOVER_IOS_MIN_EDGE_MARGIN),
-            right: Math.max(rawSafeArea.right, POPOVER_IOS_MIN_EDGE_MARGIN),
-        };
-    const { originX, originY, top, left, bottom, checkSafeAreaLeft, checkSafeAreaRight, checkSafeAreaTop, checkSafeAreaBottom, arrowTop, arrowLeft, addPopoverBottomClass} = calculateWindowAdjustment(side, results.top, results.left, padding, bodyWidth, bodyHeight, contentWidth, contentHeight, safeArea, results.originX, results.originY, results.referenceCoordinates, results.arrowTop, results.arrowLeft, arrowHeight);
+    const margin = size === 'cover' ? 0 : 25;
+    const { originX, originY, top, left, bottom, checkSafeAreaLeft, checkSafeAreaRight, arrowTop, arrowLeft, addPopoverBottomClass, } = calculateWindowAdjustment(side, results.top, results.left, padding, bodyWidth, bodyHeight, contentWidth, contentHeight, margin, results.originX, results.originY, results.referenceCoordinates, results.arrowTop, results.arrowLeft, arrowHeight);
     const baseAnimation = createAnimation();
     const backdropAnimation = createAnimation();
     const contentAnimation = createAnimation();
@@ -906,14 +812,10 @@ const iosEnterAnimation = (baseEl, opts) => {
             baseEl.classList.add('popover-bottom');
         }
         if (bottom !== undefined) {
-            let bottomValue = `${bottom}px`;
-            if (checkSafeAreaBottom) {
-                bottomValue = `${bottom}px + var(--ion-safe-area-bottom, 0px)`;
-            }
-            contentEl.style.setProperty('bottom', `calc(${bottomValue})`);
+            contentEl.style.setProperty('bottom', `${bottom}px`);
         }
-        const safeAreaLeft = ' + var(--ion-safe-area-left, 0px)';
-        const safeAreaRight = ' - var(--ion-safe-area-right, 0px)';
+        const safeAreaLeft = ' + var(--ion-safe-area-left, 0)';
+        const safeAreaRight = ' - var(--ion-safe-area-right, 0)';
         let leftValue = `${left}px`;
         if (checkSafeAreaLeft) {
             leftValue = `${left}px${safeAreaLeft}`;
@@ -921,11 +823,7 @@ const iosEnterAnimation = (baseEl, opts) => {
         if (checkSafeAreaRight) {
             leftValue = `${left}px${safeAreaRight}`;
         }
-        let topValue = `${top}px`;
-        if (checkSafeAreaTop) {
-            topValue = `${top}px + var(--ion-safe-area-top, 0px)`;
-        }
-        contentEl.style.setProperty('top', `calc(${topValue} + var(--offset-y, 0))`);
+        contentEl.style.setProperty('top', `calc(${top}px + var(--offset-y, 0))`);
         contentEl.style.setProperty('left', `calc(${leftValue} + var(--offset-x, 0))`);
         contentEl.style.setProperty('transform-origin', `${originY} ${originX}`);
         if (arrowEl !== null) {
@@ -1001,23 +899,7 @@ const mdEnterAnimation = (baseEl, opts) => {
     };
     const results = getPopoverPosition(isRTL, contentWidth, contentHeight, 0, 0, reference, side, align, defaultPosition, trigger, ev);
     const padding = size === 'cover' ? 0 : POPOVER_MD_BODY_PADDING;
-    // MD mode now applies safe-area insets (previously passed 0, ignoring all safe areas).
-    // This is needed for Android edge-to-edge (API 36+) where system bars overlap content.
-    const safeArea = size === 'cover' ? { top: 0, bottom: 0, left: 0, right: 0 } : getSafeAreaInsets(doc);
-    const { originX, originY, top, left, bottom, checkSafeAreaLeft, checkSafeAreaRight, checkSafeAreaTop, checkSafeAreaBottom, addPopoverBottomClass, } = calculateWindowAdjustment(side, results.top, results.left, padding, bodyWidth, bodyHeight, contentWidth, contentHeight, safeArea, results.originX, results.originY, results.referenceCoordinates);
-    const safeAreaLeftCalc = ' + var(--ion-safe-area-left, 0px)';
-    const safeAreaRightCalc = ' - var(--ion-safe-area-right, 0px)';
-    let leftValue = `${left}px`;
-    if (checkSafeAreaLeft) {
-        leftValue = `${left}px${safeAreaLeftCalc}`;
-    }
-    if (checkSafeAreaRight) {
-        leftValue = `${left}px${safeAreaRightCalc}`;
-    }
-    let topValue = `${top}px`;
-    if (checkSafeAreaTop) {
-        topValue = `${top}px + var(--ion-safe-area-top, 0px)`;
-    }
+    const { originX, originY, top, left, bottom } = calculateWindowAdjustment(side, results.top, results.left, padding, bodyWidth, bodyHeight, contentWidth, contentHeight, 0, results.originX, results.originY, results.referenceCoordinates);
     const baseAnimation = createAnimation();
     const backdropAnimation = createAnimation();
     const wrapperAnimation = createAnimation();
@@ -1034,17 +916,13 @@ const mdEnterAnimation = (baseEl, opts) => {
     contentAnimation
         .addElement(contentEl)
         .beforeStyles({
-        top: `calc(${topValue} + var(--offset-y, 0px))`,
-        left: `calc(${leftValue} + var(--offset-x, 0px))`,
+        top: `calc(${top}px + var(--offset-y, 0px))`,
+        left: `calc(${left}px + var(--offset-x, 0px))`,
         'transform-origin': `${originY} ${originX}`,
     })
         .beforeAddWrite(() => {
         if (bottom !== undefined) {
-            let bottomValue = `${bottom}px`;
-            if (checkSafeAreaBottom) {
-                bottomValue = `${bottom}px + var(--ion-safe-area-bottom, 0px)`;
-            }
-            contentEl.style.setProperty('bottom', `calc(${bottomValue})`);
+            contentEl.style.setProperty('bottom', `${bottom}px`);
         }
     })
         .fromTo('transform', 'scale(0.8)', 'scale(1)');
@@ -1056,7 +934,7 @@ const mdEnterAnimation = (baseEl, opts) => {
         if (size === 'cover') {
             baseEl.style.setProperty('--width', `${contentWidth}px`);
         }
-        if (addPopoverBottomClass) {
+        if (originY === 'bottom') {
             baseEl.classList.add('popover-bottom');
         }
     })
@@ -1542,9 +1420,9 @@ const Popover = class {
         const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
         const desktop = isPlatform('desktop');
         const enableArrow = arrow && !parentPopover;
-        return (h(Host, Object.assign({ key: '42863f748c93f709d433931d969230137b37d42d', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '2edd8333c630efbce59071f8a383e4326e928dbc', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && h("ion-backdrop", { key: '22b6d82178b52158b76ab3fd9a7dd738fd6e4bbf', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: 'b76335c64e992a964ed3fb91d17a992c3474b4cd', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { key: '018c846c32e7ff7fa010528e6b37a17e5f03c84c', class: "popover-arrow", part: "arrow" }), h("div", { key: '350c468c80052da3a07768bceab98fe159c35a43', class: "popover-content", part: "content" }, h("slot", { key: '686443c17ac9873d33905c1cdb67e6d6da675282' })))));
+            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && h("ion-backdrop", { key: 'aac4e68b08197534375e8ea3f8c9ea0c10ab2af4', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: 'b7f4ebf57d4148b32856b0075d286f454be8de5d', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { key: '607d94c28d73e8e957175a7c0f6e8a99ec4dcd53', class: "popover-arrow", part: "arrow" }), h("div", { key: '4366a5a5de550c09895e923f345583508e1ec30c', class: "popover-content", part: "content" }, h("slot", { key: 'eb7886fbc99c15b667b7d825d24f1c12d9380f03' })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ion-progress-bar.entry.js

@@ -40,7 +40,7 @@ const ProgressBar = class {
         const mode = getIonMode(this);
         // If the progress is displayed as a solid bar.
         const progressSolid = buffer === 1;
-        return (h(Host, { key: 'dc69693b5d2dcb2b6e4296d7cb85bc27507f3fa6', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses(color, {
+        return (h(Host, { key: 'c859e48f3d24a458239e36d925e5dc003ed07c6b', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses(color, {
                 [mode]: true,
                 [`progress-bar-${type}`]: true,
                 'progress-paused': paused,

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

@@ -136,7 +136,7 @@ const Radio = class {
         const { checked, disabled, color, el, justify, labelPlacement, hasLabel, buttonTabindex, alignment } = this;
         const mode = getIonMode(this);
         const inItem = hostContext('ion-item', el);
-        return (h(Host, { key: '3353b28172b7f837d4b38964169b5b5f4ba02788', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
+        return (h(Host, { key: 'af5dc59ed528150872e907ed1036e3e2decba939', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
                 [mode]: true,
                 'in-item': inItem,
                 'radio-checked': checked,
@@ -147,10 +147,10 @@ const Radio = class {
                 // Focus and active styling should not apply when the radio is in an item
                 'ion-activatable': !inItem,
                 'ion-focusable': !inItem,
-            }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, h("label", { key: '418a0a48366ff900e97da123abf665bbbda87fb7', class: "radio-wrapper" }, h("div", { key: '6e5acdd8c8f5d0ad26632a65396afef8094153d1', class: {
+            }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, h("label", { key: '1312aba3259a87fe23a6911cdfa477e309469c8b', class: "radio-wrapper" }, h("div", { key: 'b342aa27e240a300836d2a135658d346b95daf09', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label" }, h("slot", { key: '10b157162cd283d624153c747679609cf0bbf11e' })), h("div", { key: '4c45cca95cb105cd6df1025a26e3c045272184a0', class: "native-wrapper" }, this.renderRadioControl()))));
+            }, part: "label" }, h("slot", { key: '0a4613d29aa783d1882cf889377f7e4fd4fea51d' })), h("div", { key: '191faea79dc4cd8befc4b873f5bd9f5af8ca2acc', class: "native-wrapper" }, this.renderRadioControl()))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -403,7 +403,7 @@ const RadioGroup = class {
         const { label, labelId, el, name, value } = this;
         const mode = getIonMode(this);
         renderHiddenInput(true, el, name, value, false);
-        return (h(Host, { key: 'db593b3ed511e9395e3c7bfd91b787328692cd6d', role: "radiogroup", "aria-labelledby": label ? labelId : null, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick, class: mode }, this.renderHintText(), h("div", { key: '85045b45a0100a45f3b9a35d1c5a25ec63d525c4', class: "radio-group-wrapper" }, h("slot", { key: '53dacb87ce62398e78771fb2efaf839ab922d946' }))));
+        return (h(Host, { key: 'db593b3ed511e9395e3c7bfd91b787328692cd6d', role: "radiogroup", "aria-labelledby": label ? labelId : null, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick, class: mode }, this.renderHintText(), h("slot", { key: 'd683b01c1ba34fe843c4b320bce4661a117472a5' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -721,7 +721,7 @@ const Range = class {
         const needsEndAdjustment = inItem && !hasEndContent;
         const mode = getIonMode(this);
         renderHiddenInput(true, el, this.name, JSON.stringify(this.getValue()), disabled);
-        return (h(Host, { key: 'ef7b01f80515bcaeb2983934ad7f10a6bd5d13ec', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses(this.color, {
+        return (h(Host, { key: 'affcac4709096a48a5b4c1864b209b6352f6b078', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'range-disabled': disabled,
@@ -730,10 +730,10 @@ const Range = class {
                 [`range-label-placement-${labelPlacement}`]: true,
                 'range-item-start-adjustment': needsStartAdjustment,
                 'range-item-end-adjustment': needsEndAdjustment,
-            }) }, h("label", { key: 'fd8aa90a9d52be9da024b907e68858dae424449d', class: "range-wrapper", id: "range-label" }, h("div", { key: '2172b4f329c22017dd23475c80aac25ba6e753eb', class: {
+            }) }, h("label", { key: 'c7cf95fa831d10b17c137995d0a9e0cf84006a76', class: "range-wrapper", id: "range-label" }, h("div", { key: '5b8479c7939ae0f94a042c3aafd64316e4577d30', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label" }, label !== undefined ? h("div", { class: "label-text" }, label) : h("slot", { name: "label" })), h("div", { key: '3c318bf2ea0576646d4c010bf44573fd0f483186', class: "native-wrapper" }, h("slot", { key: '6586fd6fc96271e73f8a86c202d1913ad1a26f96', name: "start" }), this.renderRangeSlider(), h("slot", { key: '74ac0bc2d2cb66ef708bb729f88b6ecbc1b2155d', name: "end" })))));
+            }, part: "label" }, label !== undefined ? h("div", { class: "label-text" }, label) : h("slot", { name: "label" })), h("div", { key: '3c275d822b29a8008e044722e8b6bdabd3ecfad7', class: "native-wrapper" }, h("slot", { key: '03c849d0aa708914984ad57ca292bc5fc66ecad5', name: "start" }), this.renderRangeSlider(), h("slot", { key: '10ca7b8152cac00b45d8fa98ad91410f59fd176a', name: "end" })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -887,7 +887,7 @@ const Refresher = class {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '2d1bd880877b698604542ab2d602d38b9504d975', slot: "fixed", class: {
+        return (h(Host, { key: '06d61cc53260ce146dd6906cc96597e9baaa17cf', slot: "fixed", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`refresher-${mode}`]: true,
@@ -950,7 +950,7 @@ const RefresherContent = class {
         const pullingIcon = this.pullingIcon;
         const hasSpinner = pullingIcon != null && SPINNERS[pullingIcon] !== undefined;
         const mode = getIonMode(this);
-        return (h(Host, { key: 'e235f8a9a84070ece2e2066ced234a64663bfa1d', class: mode }, h("div", { key: '9121691818ddaa35801a5f442e144ac27686cf19', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (h("div", { key: 'c8d65d740f1575041bd3b752c789077927397fe4', class: "refresher-pulling-icon" }, h("div", { key: '309dd904977eaa788b09ea95b7fa4996a73bec5b', class: "spinner-arrow-container" }, h("ion-spinner", { key: 'a2a1480f67775d56ca7822e76be1e9f983bca2f9', name: this.pullingIcon, paused: true }), mode === 'md' && this.pullingIcon === 'circular' && (h("div", { key: '811d7e06d324bf4b6a18a31427a43e5177f3ae3a', class: "arrow-container" }, h("ion-icon", { key: '86cc48e2e8dc054ff6ff1299094da35b524be63d', icon: caretBackSharp, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (h("div", { key: '464ae097dbc95c18a2dd7dfd03f8489153dab719', class: "refresher-pulling-icon" }, h("ion-icon", { key: 'ed6875978b9035add562caa743a68353743d978f', icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), h("div", { key: 'aff891924e44354543fec484e5cde1ca92e69904', class: "refresher-refreshing" }, this.refreshingSpinner && (h("div", { key: '842d7ac4ff10a1058775493d62f31cbdcd34f7a0', class: "refresher-refreshing-icon" }, h("ion-spinner", { key: '8c3e6195501e7e78d5cde1e3ad1fef90fd4a953f', name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
+        return (h(Host, { key: '4add42b9fdfded359d1b054d04c2c6ff48e028c8', class: mode }, h("div", { key: '45d4e4e0adfed7f96dd1849767aa2cde947de044', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (h("div", { key: '6bd6c8ef5bf6e10699eec3bd8646431bfe1077a0', class: "refresher-pulling-icon" }, h("div", { key: '852d20414da53352c8e58bc627e0fda38eff97cb', class: "spinner-arrow-container" }, h("ion-spinner", { key: '0dde3578a80cc4b77a07c4d1db1af80c7eb10c27', name: this.pullingIcon, paused: true }), mode === 'md' && this.pullingIcon === 'circular' && (h("div", { key: 'c71dbfcf416a19c30fed38f722ebf0358c2181dd', class: "arrow-container" }, h("ion-icon", { key: 'fa7c2cf624e7a9c41964e66cabc88c594da6d1fd', icon: caretBackSharp, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (h("div", { key: '3dd68c9968b421c379d1c4349ba619ee0a189c6d', class: "refresher-pulling-icon" }, h("ion-icon", { key: 'f83bceceae4fa8245f91939fb6db589a595e975b', icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), h("div", { key: '98e22ceb0f7883e871f815f6199f5cb313e2e086', class: "refresher-refreshing" }, this.refreshingSpinner && (h("div", { key: 'faabe8a9b61c02a00994ef978bb82b9ba4537214', class: "refresher-refreshing-icon" }, h("ion-spinner", { key: '029a0c073ee1a07f01211e12ba2abc985cf21ed7', name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
     }
     get el() { return getElement(this); }
 };

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

@@ -30,7 +30,7 @@ const Reorder = class {
     render() {
         const mode = getIonMode(this);
         const reorderIcon = mode === 'ios' ? reorderThreeOutline : reorderTwoSharp;
-        return (h(Host, { key: 'e6807bb349725682e99e791ac65e729a360d64e8', class: mode }, h("slot", { key: '1c691cdbffa6427ba08dc12184c69559ed5d5506' }, h("ion-icon", { key: '8b4150302cdca475379582b2251737b5e74079b1', icon: reorderIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
+        return (h(Host, { key: 'b869db61ca6393cf1476f2111a66b387b567c6d1', class: mode }, h("slot", { key: 'a78edd1776835282b8b5c841377018f36c83296c' }, h("ion-icon", { key: '7fb067c47bbb9a7258e5063f028282cc097d0f94', icon: reorderIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
     }
     get el() { return getElement(this); }
 };
@@ -293,7 +293,7 @@ const ReorderGroup = class {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'b9641f3061d67fbfe68317b901ec33267046e073', class: {
+        return (h(Host, { key: '9527bbdedaab63d31f562c874a7332ea60c4b47b', class: {
                 [mode]: true,
                 'reorder-enabled': !this.disabled,
                 'reorder-list-active': this.state !== 0 /* ReorderGroupState.Idle */,

package/dist/esm/ion-ripple-effect.entry.js

@@ -72,7 +72,7 @@ const RippleEffect = class {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'ae9d3b1ed6773a9b9bb2267129f7e9af23b6c9fc', role: "presentation", class: {
+        return (h(Host, { key: '3b59cbb44741569a7350f9638b4392add673b6f1', role: "presentation", class: {
                 [mode]: true,
                 unbounded: this.unbounded,
             } }));

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

@@ -895,10 +895,10 @@ const RouterLink = class {
             rel: this.rel,
             target: this.target,
         };
-        return (h(Host, { key: 'd7f2affcde45c5fbb6cb46cd1c30008ee92a68c5', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: '8372835161d507c7b821b7536c55f912eb6ce704', onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'ion-activatable': true,
-            }) }, h("a", Object.assign({ key: 'babafae85ca5c6429958d383feff0493ff8cf33e' }, attrs), h("slot", { key: '50314e9555bbf6dffa0c50c3f763009dee59b10b' }))));
+            }) }, h("a", Object.assign({ key: '315966e14a17760f3f64197e8315200039787897' }, attrs), h("slot", { key: '95fc1697b884225e85e647dddcaa8f4af8b9a979' }))));
     }
 };
 RouterLink.style = routerLinkCss;

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

@@ -436,8 +436,8 @@ const Searchbar = class {
         const clearIcon = this.clearIcon || (mode === 'ios' ? closeCircle : closeSharp);
         const searchIcon = this.searchIcon || (mode === 'ios' ? searchOutline : searchSharp);
         const shouldShowCancelButton = this.shouldShowCancelButton();
-        const cancelButton = this.showCancelButton !== 'never' && (h("button", { key: '19e18775856db87daeb4b9e3d7bca0461915a0df', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: mode === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, h("div", { key: 'b3bbdcc033f3bd3441d619e4a252cef0dad4d07e', "aria-hidden": "true" }, mode === 'md' ? (h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
-        return (h(Host, { key: '074aa60e051bfb3225e87d44bbb6346c59c73574', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
+        const cancelButton = this.showCancelButton !== 'never' && (h("button", { key: 'bf574336a561a5bf66c771fb606a9b19adbecb68', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: mode === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, h("div", { key: '747ad4368bda5044198259d5bc8f7be9e472e5af', "aria-hidden": "true" }, mode === 'md' ? (h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
+        return (h(Host, { key: 'bcc5b33a2859903ba11bfc5c611c6a2aaa71d06b', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
                 [mode]: true,
                 'searchbar-animated': animated,
                 'searchbar-disabled': this.disabled,
@@ -447,14 +447,14 @@ const Searchbar = class {
                 'searchbar-has-focus': this.focused,
                 'searchbar-should-show-clear': this.shouldShowClearButton(),
                 'searchbar-should-show-cancel': this.shouldShowCancelButton(),
-            }) }, h("div", { key: '54f58a79fe36e85d9295157303f1be89c98bbdaf', class: "searchbar-input-container" }, h("input", Object.assign({ key: 'f991a37fcf54d26b7ad10d89084764e03d97b9de', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: autocapitalize === 'default' ? undefined : autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }, this.inheritedAttributes)), mode === 'md' && cancelButton, h("ion-icon", { key: '8b44dd90a3292c5cf872ef16a8520675f5673494', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), h("button", { key: '79d9cfed8f01268044f82811a35d323a12dca749', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
+            }) }, h("div", { key: 'ac0dbf5ddd9c4eb6d714f45c62c44ba3d0bf034d', class: "searchbar-input-container" }, h("input", Object.assign({ key: '4b9fdac1b0d5a7a68bf61a6beb00f166434d3e84', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: autocapitalize === 'default' ? undefined : autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }, this.inheritedAttributes)), mode === 'md' && cancelButton, h("ion-icon", { key: '32a889c48b3960560a3873061b4ac5a8a5ce532f', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), h("button", { key: '71222df691ef0b95008e619f755224d069ee9388', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: () => this.onClearInput(true) }, h("ion-icon", { key: 'aa3b9fa8a61f853236783ac7bcd0b113ea65ece2', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
+            }, onClick: () => this.onClearInput(true) }, h("ion-icon", { key: 'f1c8c0bd8fbb655085875731d3ece387dbe2967e', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -10,7 +10,7 @@ const SegmentContent = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: 'db6876f2aee7afa1ea8bc147337670faa68fae1c' }, h("slot", { key: 'bc05714a973a5655668679033f5809a1da6db8cc' })));
+        return (h(Host, { key: '665f41a854621f898eaf7ba9a49e77cc9326501e' }, h("slot", { key: '635aa57fbf6167dcd36fe8dc5dfc1c313637ac04' })));
     }
 };
 SegmentContent.style = segmentContentCss;

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

@@ -106,10 +106,10 @@ const SegmentView = class {
     }
     render() {
         const { disabled, isManualScroll } = this;
-        return (h(Host, { key: 'e180b67bb3143a5f4611fb358c037be6fc782a8f', class: {
+        return (h(Host, { key: '1c9bfce83967a93d63c225031a5cd688509d8fc8', class: {
                 'segment-view-disabled': disabled,
                 'segment-view-scroll-disabled': isManualScroll === false,
-            } }, h("slot", { key: '41c11d6a7406a10f5c64a2e73abfc072afd8fc73' })));
+            } }, h("slot", { key: '19fee034e76fffbdb5f622cb514037c00f9d55d5' })));
     }
     get el() { return getElement(this); }
 };

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

@@ -547,14 +547,14 @@ const Segment = class {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'e67ed512739cf2cfe657b0c44ebc3dfb1e9fbb79', role: "tablist", onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: '725cc37b25c539fa5e3ae8d90530ae33ededc3de', 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: '804d8acfcb9abfeeee38244b015fbc5c36330b9e', onSlotchange: this.onSlottedItemsChange })));
+            }) }, h("slot", { key: 'c51cf7ea50325866a9367d214e12bc3754870335', onSlotchange: this.onSlottedItemsChange })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -672,7 +672,7 @@ const SegmentButton = class {
         const { checked, type, disabled, hasIcon, hasLabel, layout, segmentEl } = this;
         const mode = getIonMode(this);
         const hasSegmentColor = () => (segmentEl === null || segmentEl === void 0 ? void 0 : segmentEl.color) !== undefined;
-        return (h(Host, { key: '26cb7ee90455bcaa6416125802d7e5729fa05b5b', class: {
+        return (h(Host, { key: 'f69e2a24198a7c57543dbe66902da039a6569c64', class: {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
@@ -688,7 +688,7 @@ const SegmentButton = class {
                 'ion-activatable': true,
                 'ion-activatable-instant': true,
                 'ion-focusable': true,
-            } }, h("button", Object.assign({ key: '75add37f11c107d1e2cfdb154e08004e9579e863', "aria-selected": checked ? 'true' : 'false', role: "tab", ref: (el) => (this.nativeEl = el), type: type, class: "button-native", part: "native", disabled: disabled }, this.inheritedAttributes), h("span", { key: '8e720d2a3e304903685bf09d226a64e944d78a22', class: "button-inner" }, h("slot", { key: 'c8e7b3ebf8f03042a1001155643b585283c73c65' })), mode === 'md' && h("ion-ripple-effect", { key: '3586ac317b8d82c92b0ccfbfae42f8778612321b' })), h("div", { key: '9cf93957da9e8dc333c8b05327bb903385b1c5f4', part: "indicator", class: "segment-button-indicator segment-button-indicator-animated" }, h("div", { key: 'd3b6f0b3860ec6896b46703f64ed1cc8c75612e3', part: "indicator-background", class: "segment-button-indicator-background" }))));
+            } }, h("button", Object.assign({ key: '0a6fea3a374074af19f7ece0ba3a7cf1e269ab6d', "aria-selected": checked ? 'true' : 'false', role: "tab", ref: (el) => (this.nativeEl = el), type: type, class: "button-native", part: "native", disabled: disabled }, this.inheritedAttributes), h("span", { key: '991018a38c59a6f3d76b2e952e5569c874d2c13e', class: "button-inner" }, h("slot", { key: '23c547c80108025027b913c7fcbec189286627a3' })), mode === 'md' && h("ion-ripple-effect", { key: '7faa9d06ab6aa7346d16b0b6808979759a79650c' })), h("div", { key: '0d61badf2c227dc38e20185b2b2bb590a5efa434', part: "indicator", class: "segment-button-indicator segment-button-indicator-animated" }, h("div", { key: 'a84035752b78491c344179d1e61d109fb4bd1cf1', part: "indicator-background", class: "segment-button-indicator-background" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -88,7 +88,7 @@ const SelectModal = class {
             } }, option.text))));
     }
     render() {
-        return (h(Host, { key: 'b6c0dec240b2e41985b15fdf4e5a6d3a145c1567', class: getIonMode(this) }, h("ion-header", { key: 'cd177e85ee0f62a60a3a708342d6ab6eb19a44dc' }, h("ion-toolbar", { key: 'aee8222a5a4daa540ad202b2e4cac1ef93d9558c' }, this.header !== undefined && h("ion-title", { key: '5f8fecc764d97bf840d3d4cfddeeccd118ab4436' }, this.header), h("ion-buttons", { key: '919033950d7c2b0101f96a9c9698219de9f568ea', slot: "end" }, h("ion-button", { key: '34b571cab6dced4bde555a077a21e91800829931', onClick: () => this.closeModal() }, "Close")))), h("ion-content", { key: '3c9153d26ba7a5a03d3b20fcd628d0c3031661a7' }, h("ion-list", { key: 'e00b222c071bc97c82ad1bba4db95a8a5c43ed6d' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
+        return (h(Host, { key: '5bffdb106e6f628dae2e2aeb9ee8008b5c547b3a', class: getIonMode(this) }, h("ion-header", { key: '4de1c33b0504372f8a0a26123e4e086080ee1ecb' }, h("ion-toolbar", { key: '5d55a67d1db4352c260e9e0457d5dac6110b6598' }, this.header !== undefined && h("ion-title", { key: '4f07fe8a9af8c9bd0852af2a9b95517d16356e50' }, this.header), h("ion-buttons", { key: 'ca676a34f7cd3dd6b465b0d803434c2e2c8536c5', slot: "end" }, h("ion-button", { key: '801ed63a357c7c9d354668851db65e5c1b0e1abe', onClick: () => this.closeModal() }, "Close")))), h("ion-content", { key: 'f3c239ec9d84b8ed7413ea9db6efa18e29aca285' }, h("ion-list", { key: '40c157e9abe477171a39ae7e6e1cd4ed08735cb4' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
     }
     get el() { return getElement(this); }
 };

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

@@ -787,7 +787,7 @@ const Select = class {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
-        return (h(Host, { key: 'd8026835993d0e6dce747098f741a06ae4e4f54d', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: '9f0a833ebc3df27a42146b07bcbb181c05f5e5c4', onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -805,7 +805,7 @@ const Select = class {
                 [`select-justify-${justify}`]: justifyEnabled,
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
-            }) }, h("label", { key: 'fcfb40209d6d07d49c7fdca4884b31abf6ac2567', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: 'f191664f2290c3890bde1156157c83a6ff17dbe2', class: "select-wrapper-inner" }, h("slot", { key: '317a28d1115b4214f291e228ce0fe6fc782e57d5', name: "start" }), h("div", { key: 'db68e18abd5ca3a1023d7c7b58bf89893ae18073', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '4274e042267c2234a198b0f65c89477898d08130', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: '2e2eb1ee2b2791e0683d9afb186fde6e938ca59c', class: "select-highlight" })), this.renderBottomContent()));
+            }) }, h("label", { key: '4b32396d8557c0d1cba13440a11e66b8eb7b13a9', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: 'd226cc8e30cd5202c235476cfa1632fc40bc609f', class: "select-wrapper-inner" }, h("slot", { key: 'df813ff3b7de518c70ea4fedd25bcb965607026d', name: "start" }), h("div", { key: '4a4e9348a136c598b7b08f80ecdcca268afec2d5', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: 'f168d8b42a1e193ad27d09e5f1553b231f0332e5', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: 'ec3deede22dd403cb16a08f532ae4809cf86a3e7', class: "select-highlight" })), this.renderBottomContent()));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -867,7 +867,7 @@ const SelectOption = class {
         this.disabled = false;
     }
     render() {
-        return h(Host, { key: '3a70eea9fa03a9acba582180761d18347c72acee', role: "option", id: this.inputId, class: getIonMode(this) });
+        return h(Host, { key: '824730b6c1e4f15b716e91b05840e890af5f1577', role: "option", id: this.inputId, class: getIonMode(this) });
     }
     get el() { return getElement(this); }
 };
@@ -972,7 +972,7 @@ const SelectPopover = class {
     render() {
         const { header, message, options, subHeader } = this;
         const hasSubHeaderOrMessage = subHeader !== undefined || message !== undefined;
-        return (h(Host, { key: 'ab931b49b59283825bd2afa3f7f995b0e6e05bef', class: getIonMode(this) }, h("ion-list", { key: '3bd12b67832607596b912a73d5b3ae9b954b244d' }, header !== undefined && h("ion-list-header", { key: '97da930246edf7423a039c030d40e3ff7a5148a3' }, header), hasSubHeaderOrMessage && (h("ion-item", { key: 'c579df6ea8fac07bb0c59d34c69b149656863224' }, h("ion-label", { key: 'af699c5f465710ccb13b8cf8e7be66f0e8acfad1', class: "ion-text-wrap" }, subHeader !== undefined && h("h3", { key: 'df9a936d42064b134e843c7229f314a2a3ec7e80' }, subHeader), message !== undefined && h("p", { key: '9c3ddad378df00f106afa94e9928cf68c17124dd' }, message)))), this.renderOptions(options))));
+        return (h(Host, { key: '0c9845a40d3fc392b0a7d64e2a6ed27d94bb7634', class: getIonMode(this) }, h("ion-list", { key: '84a30f6661b0f8c00e6fa199658ed2adbcf27358' }, header !== undefined && h("ion-list-header", { key: '13f5f56bbfbc06751fa516291a2da72629b60ece' }, header), hasSubHeaderOrMessage && (h("ion-item", { key: '3d39d18e720e798bbde334e79e6832091c7dfb81' }, h("ion-label", { key: 'd3051b0d140120b44bf5e79572f6f287e7cfb03a', class: "ion-text-wrap" }, subHeader !== undefined && h("h3", { key: 'b16805956f3316f8ec703c123b76f717488e8637' }, subHeader), message !== undefined && h("p", { key: '2215ac4ab4146a14e75a79192e319a8016286b5f' }, message)))), this.renderOptions(options))));
     }
     get el() { return getElement(this); }
 };

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

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