@ionic/core 7.7.2-dev.11707932366.16baf005 → 7.7.2-dev.11708036667.1fa730de

package/hydrate/index.js

@@ -13766,251 +13766,10 @@ class CardTitle {
     }; }
 }
 
-/**
- * Creates a controller that tracks whether a form control is using the legacy or modern syntax. This should be removed when the legacy form control syntax is removed.
- *
- * @internal
- * @prop el: The Ionic form component to reference
- */
-const createLegacyFormController = (el) => {
-    const controlEl = el;
-    let legacyControl;
-    const hasLegacyControl = () => {
-        if (legacyControl === undefined) {
-            /**
-             * Detect if developers are using the legacy form control syntax
-             * so a deprecation warning is logged. This warning can be disabled
-             * by either using the new `label` property or setting `aria-label`
-             * on the control.
-             * Alternatively, components that use a slot for the label
-             * can check to see if the component has slotted text
-             * in the light DOM.
-             */
-            const hasLabelProp = controlEl.label !== undefined || hasLabelSlot(controlEl);
-            const hasAriaLabelAttribute = controlEl.hasAttribute('aria-label') ||
-                // Shadow DOM form controls cannot use aria-labelledby
-                (controlEl.hasAttribute('aria-labelledby') && controlEl.shadowRoot === null);
-            const legacyItemLabel = findItemLabel(controlEl);
-            /**
-             * Developers can manually opt-out of the modern form markup
-             * by setting `legacy="true"` on components.
-             */
-            legacyControl =
-                controlEl.legacy === true || (!hasLabelProp && !hasAriaLabelAttribute && legacyItemLabel !== null);
-        }
-        return legacyControl;
-    };
-    return { hasLegacyControl };
-};
-const hasLabelSlot = (controlEl) => {
-    /**
-     * Components that have a named label slot
-     * also have other slots, so we need to query for
-     * anything that is explicitly passed to slot="label"
-     */
-    if (NAMED_LABEL_SLOT_COMPONENTS.includes(controlEl.tagName) && controlEl.querySelector('[slot="label"]') !== null) {
-        return true;
-    }
-    /**
-     * Components that have an unnamed slot for the label
-     * have no other slots, so we can check the textContent
-     * of the element.
-     */
-    if (UNNAMED_LABEL_SLOT_COMPONENTS.includes(controlEl.tagName) && controlEl.textContent !== '') {
-        return true;
-    }
-    return false;
-};
-const NAMED_LABEL_SLOT_COMPONENTS = ['ION-INPUT', 'ION-TEXTAREA', 'ION-SELECT', 'ION-RANGE'];
-const UNNAMED_LABEL_SLOT_COMPONENTS = ['ION-TOGGLE', 'ION-CHECKBOX', 'ION-RADIO'];
-
-/**
- * A utility to calculate the size of an outline notch
- * width relative to the content passed. This is used in
- * components such as `ion-select` with `fill="outline"`
- * where we need to pass slotted HTML content. This is not
- * needed when rendering plaintext content because we can
- * render the plaintext again hidden with `opacity: 0` inside
- * of the notch. As a result we can rely on the intrinsic size
- * of the element to correctly compute the notch width. We
- * cannot do this with slotted content because we cannot project
- * it into 2 places at once.
- *
- * @internal
- * @param el: The host element
- * @param getNotchSpacerEl: A function that returns a reference to the notch spacer element inside of the component template.
- * @param getLabelSlot: A function that returns a reference to the slotted content.
- */
-const createNotchController = (el, getNotchSpacerEl, getLabelSlot) => {
-    let notchVisibilityIO;
-    const needsExplicitNotchWidth = () => {
-        const notchSpacerEl = getNotchSpacerEl();
-        if (
-        /**
-         * If the notch is not being used
-         * then we do not need to set the notch width.
-         */
-        notchSpacerEl === undefined ||
-            /**
-             * If either the label property is being
-             * used or the label slot is not defined,
-             * then we do not need to estimate the notch width.
-             */
-            el.label !== undefined ||
-            getLabelSlot() === null) {
-            return false;
-        }
-        return true;
-    };
-    const calculateNotchWidth = () => {
-        if (needsExplicitNotchWidth()) {
-            /**
-             * Run this the frame after
-             * the browser has re-painted the host element.
-             * Otherwise, the label element may have a width
-             * of 0 and the IntersectionObserver will be used.
-             */
-            raf(() => {
-                setNotchWidth();
-            });
-        }
-    };
-    /**
-     * When using a label prop we can render
-     * the label value inside of the notch and
-     * let the browser calculate the size of the notch.
-     * However, we cannot render the label slot in multiple
-     * places so we need to manually calculate the notch dimension
-     * based on the size of the slotted content.
-     *
-     * This function should only be used to set the notch width
-     * on slotted label content. The notch width for label prop
-     * content is automatically calculated based on the
-     * intrinsic size of the label text.
-     */
-    const setNotchWidth = () => {
-        const notchSpacerEl = getNotchSpacerEl();
-        if (notchSpacerEl === undefined) {
-            return;
-        }
-        if (!needsExplicitNotchWidth()) {
-            notchSpacerEl.style.removeProperty('width');
-            return;
-        }
-        const width = getLabelSlot().scrollWidth;
-        if (
-        /**
-         * If the computed width of the label is 0
-         * and notchSpacerEl's offsetParent is null
-         * then that means the element is hidden.
-         * As a result, we need to wait for the element
-         * to become visible before setting the notch width.
-         *
-         * We do not check el.offsetParent because
-         * that can be null if the host element has
-         * position: fixed applied to it.
-         * notchSpacerEl does not have position: fixed.
-         */
-        width === 0 &&
-            notchSpacerEl.offsetParent === null &&
-            win$1 !== undefined &&
-            'IntersectionObserver' in win$1) {
-            /**
-             * If there is an IO already attached
-             * then that will update the notch
-             * once the element becomes visible.
-             * As a result, there is no need to create
-             * another one.
-             */
-            if (notchVisibilityIO !== undefined) {
-                return;
-            }
-            const io = (notchVisibilityIO = new IntersectionObserver((ev) => {
-                /**
-                 * If the element is visible then we
-                 * can try setting the notch width again.
-                 */
-                if (ev[0].intersectionRatio === 1) {
-                    setNotchWidth();
-                    io.disconnect();
-                    notchVisibilityIO = undefined;
-                }
-            }, 
-            /**
-             * Set the root to be the host element
-             * This causes the IO callback
-             * to be fired in WebKit as soon as the element
-             * is visible. If we used the default root value
-             * then WebKit would only fire the IO callback
-             * after any animations (such as a modal transition)
-             * finished, and there would potentially be a flicker.
-             */
-            { threshold: 0.01, root: el }));
-            io.observe(notchSpacerEl);
-            return;
-        }
-        /**
-         * If the element is visible then we can set the notch width.
-         * The notch is only visible when the label is scaled,
-         * which is why we multiply the width by 0.75 as this is
-         * the same amount the label element is scaled by in the host CSS.
-         * (See $form-control-label-stacked-scale in ionic.globals.scss).
-         */
-        notchSpacerEl.style.setProperty('width', `${width * 0.75}px`);
-    };
-    const destroy = () => {
-        if (notchVisibilityIO) {
-            notchVisibilityIO.disconnect();
-            notchVisibilityIO = undefined;
-        }
-    };
-    return {
-        calculateNotchWidth,
-        destroy,
-    };
-};
-
-/**
- * Uses the compareWith param to compare two values to determine if they are equal.
- *
- * @param currentValue The current value of the control.
- * @param compareValue The value to compare against.
- * @param compareWith The function or property name to use to compare values.
- */
-const compareOptions = (currentValue, compareValue, compareWith) => {
-    if (typeof compareWith === 'function') {
-        return compareWith(currentValue, compareValue);
-    }
-    else if (typeof compareWith === 'string') {
-        return currentValue[compareWith] === compareValue[compareWith];
-    }
-    else {
-        return Array.isArray(compareValue) ? compareValue.includes(currentValue) : currentValue === compareValue;
-    }
-};
-/**
- * Compares a value against the current value(s) to determine if it is selected.
- *
- * @param currentValue The current value of the control.
- * @param compareValue The value to compare against.
- * @param compareWith The function or property name to use to compare values.
- */
-const isOptionSelected = (currentValue, compareValue, compareWith) => {
-    if (currentValue === undefined) {
-        return false;
-    }
-    if (Array.isArray(currentValue)) {
-        return currentValue.some((val) => compareOptions(val, compareValue, compareWith));
-    }
-    else {
-        return compareOptions(currentValue, compareValue, compareWith);
-    }
-};
-
-const checkboxIosCss = "/*!@:host*/.sc-ion-checkbox-ios-h{--checkbox-background-checked:var(--ion-color-primary, #0054e9);--border-color-checked:var(--ion-color-primary, #0054e9);--checkmark-color:var(--ion-color-primary-contrast, #fff);--transition:none;display:inline-block;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2}/*!@:host(.in-item)*/.in-item.sc-ion-checkbox-ios-h{width:100%;height:100%}/*!@:host([slot=start]:not(.legacy-checkbox)),\n:host([slot=end]:not(.legacy-checkbox))*/[slot=start].sc-ion-checkbox-ios-h:not(.legacy-checkbox),[slot=end].sc-ion-checkbox-ios-h:not(.legacy-checkbox){width:auto}/*!@:host(.legacy-checkbox)*/.legacy-checkbox.sc-ion-checkbox-ios-h{width:var(--size);height:var(--size)}/*!@:host(.ion-color)*/.ion-color.sc-ion-checkbox-ios-h{--checkbox-background-checked:var(--ion-color-base);--border-color-checked:var(--ion-color-base);--checkmark-color:var(--ion-color-contrast)}/*!@:host(.legacy-checkbox) label*/.legacy-checkbox.sc-ion-checkbox-ios-h label.sc-ion-checkbox-ios{top:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;position:absolute;width:100%;height:100%;border:0;background:transparent;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;opacity:0}/*!@:host(.legacy-checkbox) label*/.legacy-checkbox.sc-ion-checkbox-ios-h label.sc-ion-checkbox-ios{inset-inline-start:0}/*!@:host(.legacy-checkbox) label::-moz-focus-inner*/.legacy-checkbox.sc-ion-checkbox-ios-h label.sc-ion-checkbox-ios::-moz-focus-inner{border:0}/*!@.checkbox-wrapper*/.checkbox-wrapper.sc-ion-checkbox-ios{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;height:inherit;cursor:inherit}/*!@.label-text-wrapper*/.label-text-wrapper.sc-ion-checkbox-ios{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}/*!@:host(.in-item:not(.legacy-checkbox)) .label-text-wrapper*/.in-item.sc-ion-checkbox-ios-h:not(.legacy-checkbox) .label-text-wrapper.sc-ion-checkbox-ios{margin-top:10px;margin-bottom:10px}/*!@:host(.in-item.checkbox-label-placement-stacked) .label-text-wrapper*/.in-item.checkbox-label-placement-stacked.sc-ion-checkbox-ios-h .label-text-wrapper.sc-ion-checkbox-ios{margin-top:10px;margin-bottom:16px}/*!@:host(.in-item.checkbox-label-placement-stacked) .native-wrapper*/.in-item.checkbox-label-placement-stacked.sc-ion-checkbox-ios-h .native-wrapper.sc-ion-checkbox-ios{margin-bottom:10px}/*!@.label-text-wrapper-hidden*/.label-text-wrapper-hidden.sc-ion-checkbox-ios{display:none}/*!@input*/input.sc-ion-checkbox-ios{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}/*!@.native-wrapper*/.native-wrapper.sc-ion-checkbox-ios{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}/*!@.checkbox-icon*/.checkbox-icon.sc-ion-checkbox-ios{border-radius:var(--border-radius);position:relative;-webkit-transition:var(--transition);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--checkbox-background);-webkit-box-sizing:border-box;box-sizing:border-box}/*!@:host(.legacy-checkbox) .checkbox-icon*/.legacy-checkbox.sc-ion-checkbox-ios-h .checkbox-icon.sc-ion-checkbox-ios{display:block;width:100%;height:100%}/*!@:host(:not(.legacy-checkbox)) .checkbox-icon*/.sc-ion-checkbox-ios-h:not(.legacy-checkbox) .checkbox-icon.sc-ion-checkbox-ios{width:var(--size);height:var(--size)}/*!@.checkbox-icon path*/.checkbox-icon.sc-ion-checkbox-ios path.sc-ion-checkbox-ios{fill:none;stroke:var(--checkmark-color);stroke-width:var(--checkmark-width);opacity:0}/*!@:host(.checkbox-justify-space-between) .checkbox-wrapper*/.checkbox-justify-space-between.sc-ion-checkbox-ios-h .checkbox-wrapper.sc-ion-checkbox-ios{-ms-flex-pack:justify;justify-content:space-between}/*!@:host(.checkbox-justify-start) .checkbox-wrapper*/.checkbox-justify-start.sc-ion-checkbox-ios-h .checkbox-wrapper.sc-ion-checkbox-ios{-ms-flex-pack:start;justify-content:start}/*!@:host(.checkbox-justify-end) .checkbox-wrapper*/.checkbox-justify-end.sc-ion-checkbox-ios-h .checkbox-wrapper.sc-ion-checkbox-ios{-ms-flex-pack:end;justify-content:end}/*!@:host(.checkbox-alignment-start) .checkbox-wrapper*/.checkbox-alignment-start.sc-ion-checkbox-ios-h .checkbox-wrapper.sc-ion-checkbox-ios{-ms-flex-align:start;align-items:start}/*!@:host(.checkbox-alignment-center) .checkbox-wrapper*/.checkbox-alignment-center.sc-ion-checkbox-ios-h .checkbox-wrapper.sc-ion-checkbox-ios{-ms-flex-align:center;align-items:center}/*!@:host(.checkbox-label-placement-start) .checkbox-wrapper*/.checkbox-label-placement-start.sc-ion-checkbox-ios-h .checkbox-wrapper.sc-ion-checkbox-ios{-ms-flex-direction:row;flex-direction:row}/*!@:host(.checkbox-label-placement-start) .label-text-wrapper*/.checkbox-label-placement-start.sc-ion-checkbox-ios-h .label-text-wrapper.sc-ion-checkbox-ios{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}/*!@:host(.checkbox-label-placement-end) .checkbox-wrapper*/.checkbox-label-placement-end.sc-ion-checkbox-ios-h .checkbox-wrapper.sc-ion-checkbox-ios{-ms-flex-direction:row-reverse;flex-direction:row-reverse}/*!@:host(.checkbox-label-placement-end) .label-text-wrapper*/.checkbox-label-placement-end.sc-ion-checkbox-ios-h .label-text-wrapper.sc-ion-checkbox-ios{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}/*!@:host(.checkbox-label-placement-fixed) .label-text-wrapper*/.checkbox-label-placement-fixed.sc-ion-checkbox-ios-h .label-text-wrapper.sc-ion-checkbox-ios{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}/*!@:host(.checkbox-label-placement-fixed) .label-text-wrapper*/.checkbox-label-placement-fixed.sc-ion-checkbox-ios-h .label-text-wrapper.sc-ion-checkbox-ios{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}/*!@:host(.checkbox-label-placement-stacked) .checkbox-wrapper*/.checkbox-label-placement-stacked.sc-ion-checkbox-ios-h .checkbox-wrapper.sc-ion-checkbox-ios{-ms-flex-direction:column;flex-direction:column}/*!@:host(.checkbox-label-placement-stacked) .label-text-wrapper*/.checkbox-label-placement-stacked.sc-ion-checkbox-ios-h .label-text-wrapper.sc-ion-checkbox-ios{-webkit-transform:scale(0.75);transform:scale(0.75);margin-left:0;margin-right:0;margin-bottom:16px;max-width:calc(100% / 0.75)}/*!@:host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper*/.checkbox-label-placement-stacked.checkbox-alignment-start.sc-ion-checkbox-ios-h .label-text-wrapper.sc-ion-checkbox-ios{-webkit-transform-origin:left top;transform-origin:left top}/*!@:host-context([dir=rtl]):host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper, :host-context([dir=rtl]).checkbox-label-placement-stacked.checkbox-alignment-start .label-text-wrapper*/[dir=rtl].sc-ion-checkbox-ios-h -no-combinator.checkbox-label-placement-stacked.checkbox-alignment-start.sc-ion-checkbox-ios-h .label-text-wrapper.sc-ion-checkbox-ios,[dir=rtl] .sc-ion-checkbox-ios-h -no-combinator.checkbox-label-placement-stacked.checkbox-alignment-start.sc-ion-checkbox-ios-h .label-text-wrapper.sc-ion-checkbox-ios,[dir=rtl].checkbox-label-placement-stacked.checkbox-alignment-start.sc-ion-checkbox-ios-h .label-text-wrapper.sc-ion-checkbox-ios,[dir=rtl] .checkbox-label-placement-stacked.checkbox-alignment-start.sc-ion-checkbox-ios-h .label-text-wrapper.sc-ion-checkbox-ios{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){/*!@:host(.checkbox-label-placement-stacked.checkbox-alignment-start:dir(rtl)) .label-text-wrapper*/.checkbox-label-placement-stacked.checkbox-alignment-start.sc-ion-checkbox-ios-h:dir(rtl) .label-text-wrapper.sc-ion-checkbox-ios{-webkit-transform-origin:right top;transform-origin:right top}}/*!@:host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper*/.checkbox-label-placement-stacked.checkbox-alignment-center.sc-ion-checkbox-ios-h .label-text-wrapper.sc-ion-checkbox-ios{-webkit-transform-origin:center top;transform-origin:center top}/*!@:host-context([dir=rtl]):host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper, :host-context([dir=rtl]).checkbox-label-placement-stacked.checkbox-alignment-center .label-text-wrapper*/[dir=rtl].sc-ion-checkbox-ios-h -no-combinator.checkbox-label-placement-stacked.checkbox-alignment-center.sc-ion-checkbox-ios-h .label-text-wrapper.sc-ion-checkbox-ios,[dir=rtl] .sc-ion-checkbox-ios-h -no-combinator.checkbox-label-placement-stacked.checkbox-alignment-center.sc-ion-checkbox-ios-h .label-text-wrapper.sc-ion-checkbox-ios,[dir=rtl].checkbox-label-placement-stacked.checkbox-alignment-center.sc-ion-checkbox-ios-h .label-text-wrapper.sc-ion-checkbox-ios,[dir=rtl] .checkbox-label-placement-stacked.checkbox-alignment-center.sc-ion-checkbox-ios-h .label-text-wrapper.sc-ion-checkbox-ios{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){/*!@:host(.checkbox-label-placement-stacked.checkbox-alignment-center:dir(rtl)) .label-text-wrapper*/.checkbox-label-placement-stacked.checkbox-alignment-center.sc-ion-checkbox-ios-h:dir(rtl) .label-text-wrapper.sc-ion-checkbox-ios{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}}/*!@:host(.checkbox-checked) .checkbox-icon,\n:host(.checkbox-indeterminate) .checkbox-icon*/.checkbox-checked.sc-ion-checkbox-ios-h .checkbox-icon.sc-ion-checkbox-ios,.checkbox-indeterminate.sc-ion-checkbox-ios-h .checkbox-icon.sc-ion-checkbox-ios{border-color:var(--border-color-checked);background:var(--checkbox-background-checked)}/*!@:host(.checkbox-checked) .checkbox-icon path,\n:host(.checkbox-indeterminate) .checkbox-icon path*/.checkbox-checked.sc-ion-checkbox-ios-h .checkbox-icon.sc-ion-checkbox-ios path.sc-ion-checkbox-ios,.checkbox-indeterminate.sc-ion-checkbox-ios-h .checkbox-icon.sc-ion-checkbox-ios path.sc-ion-checkbox-ios{opacity:1}/*!@:host(.checkbox-disabled)*/.checkbox-disabled.sc-ion-checkbox-ios-h{pointer-events:none}/*!@:host*/.sc-ion-checkbox-ios-h{--border-radius:50%;--border-width:0.125rem;--border-style:solid;--border-color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.23);--checkbox-background:var(--ion-item-background, var(--ion-background-color, #fff));--size:min(1.375rem, 55.836px);--checkmark-width:1.5px}/*!@:host(.checkbox-disabled)*/.checkbox-disabled.sc-ion-checkbox-ios-h{opacity:0.3}/*!@:host(.in-item.legacy-checkbox)*/.in-item.legacy-checkbox.sc-ion-checkbox-ios-h{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:8px;margin-inline-end:8px;margin-top:10px;margin-bottom:9px;display:block;position:static}/*!@:host(.in-item.legacy-checkbox[slot=start])*/.in-item.legacy-checkbox[slot=start].sc-ion-checkbox-ios-h{-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:8px;margin-bottom:8px}";
+const checkboxIosCss = "/*!@:host*/.sc-ion-checkbox-ios-h{--checkbox-background-checked:var(--ion-color-primary, #0054e9);--border-color-checked:var(--ion-color-primary, #0054e9);--checkmark-color:var(--ion-color-primary-contrast, #fff);--transition:none;display:inline-block;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2}/*!@:host(.in-item)*/.in-item.sc-ion-checkbox-ios-h{width:100%;height:100%}/*!@:host([slot=start]),\n:host([slot=end])*/[slot=start].sc-ion-checkbox-ios-h,[slot=end].sc-ion-checkbox-ios-h{width:auto}/*!@:host(.ion-color)*/.ion-color.sc-ion-checkbox-ios-h{--checkbox-background-checked:var(--ion-color-base);--border-color-checked:var(--ion-color-base);--checkmark-color:var(--ion-color-contrast)}/*!@.checkbox-wrapper*/.checkbox-wrapper.sc-ion-checkbox-ios{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;height:inherit;cursor:inherit}/*!@.label-text-wrapper*/.label-text-wrapper.sc-ion-checkbox-ios{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}/*!@:host(.in-item) .label-text-wrapper*/.in-item.sc-ion-checkbox-ios-h .label-text-wrapper.sc-ion-checkbox-ios{margin-top:10px;margin-bottom:10px}/*!@:host(.in-item.checkbox-label-placement-stacked) .label-text-wrapper*/.in-item.checkbox-label-placement-stacked.sc-ion-checkbox-ios-h .label-text-wrapper.sc-ion-checkbox-ios{margin-top:10px;margin-bottom:16px}/*!@:host(.in-item.checkbox-label-placement-stacked) .native-wrapper*/.in-item.checkbox-label-placement-stacked.sc-ion-checkbox-ios-h .native-wrapper.sc-ion-checkbox-ios{margin-bottom:10px}/*!@.label-text-wrapper-hidden*/.label-text-wrapper-hidden.sc-ion-checkbox-ios{display:none}/*!@input*/input.sc-ion-checkbox-ios{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}/*!@.native-wrapper*/.native-wrapper.sc-ion-checkbox-ios{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}/*!@.checkbox-icon*/.checkbox-icon.sc-ion-checkbox-ios{border-radius:var(--border-radius);position:relative;width:var(--size);height:var(--size);-webkit-transition:var(--transition);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--checkbox-background);-webkit-box-sizing:border-box;box-sizing:border-box}/*!@.checkbox-icon path*/.checkbox-icon.sc-ion-checkbox-ios path.sc-ion-checkbox-ios{fill:none;stroke:var(--checkmark-color);stroke-width:var(--checkmark-width);opacity:0}/*!@:host(.checkbox-justify-space-between) .checkbox-wrapper*/.checkbox-justify-space-between.sc-ion-checkbox-ios-h .checkbox-wrapper.sc-ion-checkbox-ios{-ms-flex-pack:justify;justify-content:space-between}/*!@:host(.checkbox-justify-start) .checkbox-wrapper*/.checkbox-justify-start.sc-ion-checkbox-ios-h .checkbox-wrapper.sc-ion-checkbox-ios{-ms-flex-pack:start;justify-content:start}/*!@:host(.checkbox-justify-end) .checkbox-wrapper*/.checkbox-justify-end.sc-ion-checkbox-ios-h .checkbox-wrapper.sc-ion-checkbox-ios{-ms-flex-pack:end;justify-content:end}/*!@:host(.checkbox-alignment-start) .checkbox-wrapper*/.checkbox-alignment-start.sc-ion-checkbox-ios-h .checkbox-wrapper.sc-ion-checkbox-ios{-ms-flex-align:start;align-items:start}/*!@:host(.checkbox-alignment-center) .checkbox-wrapper*/.checkbox-alignment-center.sc-ion-checkbox-ios-h .checkbox-wrapper.sc-ion-checkbox-ios{-ms-flex-align:center;align-items:center}/*!@:host(.checkbox-label-placement-start) .checkbox-wrapper*/.checkbox-label-placement-start.sc-ion-checkbox-ios-h .checkbox-wrapper.sc-ion-checkbox-ios{-ms-flex-direction:row;flex-direction:row}/*!@:host(.checkbox-label-placement-start) .label-text-wrapper*/.checkbox-label-placement-start.sc-ion-checkbox-ios-h .label-text-wrapper.sc-ion-checkbox-ios{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}/*!@:host(.checkbox-label-placement-end) .checkbox-wrapper*/.checkbox-label-placement-end.sc-ion-checkbox-ios-h .checkbox-wrapper.sc-ion-checkbox-ios{-ms-flex-direction:row-reverse;flex-direction:row-reverse}/*!@:host(.checkbox-label-placement-end) .label-text-wrapper*/.checkbox-label-placement-end.sc-ion-checkbox-ios-h .label-text-wrapper.sc-ion-checkbox-ios{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}/*!@:host(.checkbox-label-placement-fixed) .label-text-wrapper*/.checkbox-label-placement-fixed.sc-ion-checkbox-ios-h .label-text-wrapper.sc-ion-checkbox-ios{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}/*!@:host(.checkbox-label-placement-fixed) .label-text-wrapper*/.checkbox-label-placement-fixed.sc-ion-checkbox-ios-h .label-text-wrapper.sc-ion-checkbox-ios{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}/*!@:host(.checkbox-label-placement-stacked) .checkbox-wrapper*/.checkbox-label-placement-stacked.sc-ion-checkbox-ios-h .checkbox-wrapper.sc-ion-checkbox-ios{-ms-flex-direction:column;flex-direction:column}/*!@:host(.checkbox-label-placement-stacked) .label-text-wrapper*/.checkbox-label-placement-stacked.sc-ion-checkbox-ios-h .label-text-wrapper.sc-ion-checkbox-ios{-webkit-transform:scale(0.75);transform:scale(0.75);margin-left:0;margin-right:0;margin-bottom:16px;max-width:calc(100% / 0.75)}/*!@:host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper*/.checkbox-label-placement-stacked.checkbox-alignment-start.sc-ion-checkbox-ios-h .label-text-wrapper.sc-ion-checkbox-ios{-webkit-transform-origin:left top;transform-origin:left top}/*!@:host-context([dir=rtl]):host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper, :host-context([dir=rtl]).checkbox-label-placement-stacked.checkbox-alignment-start .label-text-wrapper*/[dir=rtl].sc-ion-checkbox-ios-h -no-combinator.checkbox-label-placement-stacked.checkbox-alignment-start.sc-ion-checkbox-ios-h .label-text-wrapper.sc-ion-checkbox-ios,[dir=rtl] .sc-ion-checkbox-ios-h -no-combinator.checkbox-label-placement-stacked.checkbox-alignment-start.sc-ion-checkbox-ios-h .label-text-wrapper.sc-ion-checkbox-ios,[dir=rtl].checkbox-label-placement-stacked.checkbox-alignment-start.sc-ion-checkbox-ios-h .label-text-wrapper.sc-ion-checkbox-ios,[dir=rtl] .checkbox-label-placement-stacked.checkbox-alignment-start.sc-ion-checkbox-ios-h .label-text-wrapper.sc-ion-checkbox-ios{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){/*!@:host(.checkbox-label-placement-stacked.checkbox-alignment-start:dir(rtl)) .label-text-wrapper*/.checkbox-label-placement-stacked.checkbox-alignment-start.sc-ion-checkbox-ios-h:dir(rtl) .label-text-wrapper.sc-ion-checkbox-ios{-webkit-transform-origin:right top;transform-origin:right top}}/*!@:host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper*/.checkbox-label-placement-stacked.checkbox-alignment-center.sc-ion-checkbox-ios-h .label-text-wrapper.sc-ion-checkbox-ios{-webkit-transform-origin:center top;transform-origin:center top}/*!@:host-context([dir=rtl]):host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper, :host-context([dir=rtl]).checkbox-label-placement-stacked.checkbox-alignment-center .label-text-wrapper*/[dir=rtl].sc-ion-checkbox-ios-h -no-combinator.checkbox-label-placement-stacked.checkbox-alignment-center.sc-ion-checkbox-ios-h .label-text-wrapper.sc-ion-checkbox-ios,[dir=rtl] .sc-ion-checkbox-ios-h -no-combinator.checkbox-label-placement-stacked.checkbox-alignment-center.sc-ion-checkbox-ios-h .label-text-wrapper.sc-ion-checkbox-ios,[dir=rtl].checkbox-label-placement-stacked.checkbox-alignment-center.sc-ion-checkbox-ios-h .label-text-wrapper.sc-ion-checkbox-ios,[dir=rtl] .checkbox-label-placement-stacked.checkbox-alignment-center.sc-ion-checkbox-ios-h .label-text-wrapper.sc-ion-checkbox-ios{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){/*!@:host(.checkbox-label-placement-stacked.checkbox-alignment-center:dir(rtl)) .label-text-wrapper*/.checkbox-label-placement-stacked.checkbox-alignment-center.sc-ion-checkbox-ios-h:dir(rtl) .label-text-wrapper.sc-ion-checkbox-ios{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}}/*!@:host(.checkbox-checked) .checkbox-icon,\n:host(.checkbox-indeterminate) .checkbox-icon*/.checkbox-checked.sc-ion-checkbox-ios-h .checkbox-icon.sc-ion-checkbox-ios,.checkbox-indeterminate.sc-ion-checkbox-ios-h .checkbox-icon.sc-ion-checkbox-ios{border-color:var(--border-color-checked);background:var(--checkbox-background-checked)}/*!@:host(.checkbox-checked) .checkbox-icon path,\n:host(.checkbox-indeterminate) .checkbox-icon path*/.checkbox-checked.sc-ion-checkbox-ios-h .checkbox-icon.sc-ion-checkbox-ios path.sc-ion-checkbox-ios,.checkbox-indeterminate.sc-ion-checkbox-ios-h .checkbox-icon.sc-ion-checkbox-ios path.sc-ion-checkbox-ios{opacity:1}/*!@:host(.checkbox-disabled)*/.checkbox-disabled.sc-ion-checkbox-ios-h{pointer-events:none}/*!@:host*/.sc-ion-checkbox-ios-h{--border-radius:50%;--border-width:0.125rem;--border-style:solid;--border-color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.23);--checkbox-background:var(--ion-item-background, var(--ion-background-color, #fff));--size:min(1.375rem, 55.836px);--checkmark-width:1.5px}/*!@:host(.checkbox-disabled)*/.checkbox-disabled.sc-ion-checkbox-ios-h{opacity:0.3}";
 var IonCheckboxIosStyle0 = checkboxIosCss;
 
-const checkboxMdCss = "/*!@:host*/.sc-ion-checkbox-md-h{--checkbox-background-checked:var(--ion-color-primary, #0054e9);--border-color-checked:var(--ion-color-primary, #0054e9);--checkmark-color:var(--ion-color-primary-contrast, #fff);--transition:none;display:inline-block;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2}/*!@:host(.in-item)*/.in-item.sc-ion-checkbox-md-h{width:100%;height:100%}/*!@:host([slot=start]:not(.legacy-checkbox)),\n:host([slot=end]:not(.legacy-checkbox))*/[slot=start].sc-ion-checkbox-md-h:not(.legacy-checkbox),[slot=end].sc-ion-checkbox-md-h:not(.legacy-checkbox){width:auto}/*!@:host(.legacy-checkbox)*/.legacy-checkbox.sc-ion-checkbox-md-h{width:var(--size);height:var(--size)}/*!@:host(.ion-color)*/.ion-color.sc-ion-checkbox-md-h{--checkbox-background-checked:var(--ion-color-base);--border-color-checked:var(--ion-color-base);--checkmark-color:var(--ion-color-contrast)}/*!@:host(.legacy-checkbox) label*/.legacy-checkbox.sc-ion-checkbox-md-h label.sc-ion-checkbox-md{top:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;position:absolute;width:100%;height:100%;border:0;background:transparent;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;opacity:0}/*!@:host(.legacy-checkbox) label*/.legacy-checkbox.sc-ion-checkbox-md-h label.sc-ion-checkbox-md{inset-inline-start:0}/*!@:host(.legacy-checkbox) label::-moz-focus-inner*/.legacy-checkbox.sc-ion-checkbox-md-h label.sc-ion-checkbox-md::-moz-focus-inner{border:0}/*!@.checkbox-wrapper*/.checkbox-wrapper.sc-ion-checkbox-md{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;height:inherit;cursor:inherit}/*!@.label-text-wrapper*/.label-text-wrapper.sc-ion-checkbox-md{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}/*!@:host(.in-item:not(.legacy-checkbox)) .label-text-wrapper*/.in-item.sc-ion-checkbox-md-h:not(.legacy-checkbox) .label-text-wrapper.sc-ion-checkbox-md{margin-top:10px;margin-bottom:10px}/*!@:host(.in-item.checkbox-label-placement-stacked) .label-text-wrapper*/.in-item.checkbox-label-placement-stacked.sc-ion-checkbox-md-h .label-text-wrapper.sc-ion-checkbox-md{margin-top:10px;margin-bottom:16px}/*!@:host(.in-item.checkbox-label-placement-stacked) .native-wrapper*/.in-item.checkbox-label-placement-stacked.sc-ion-checkbox-md-h .native-wrapper.sc-ion-checkbox-md{margin-bottom:10px}/*!@.label-text-wrapper-hidden*/.label-text-wrapper-hidden.sc-ion-checkbox-md{display:none}/*!@input*/input.sc-ion-checkbox-md{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}/*!@.native-wrapper*/.native-wrapper.sc-ion-checkbox-md{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}/*!@.checkbox-icon*/.checkbox-icon.sc-ion-checkbox-md{border-radius:var(--border-radius);position:relative;-webkit-transition:var(--transition);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--checkbox-background);-webkit-box-sizing:border-box;box-sizing:border-box}/*!@:host(.legacy-checkbox) .checkbox-icon*/.legacy-checkbox.sc-ion-checkbox-md-h .checkbox-icon.sc-ion-checkbox-md{display:block;width:100%;height:100%}/*!@:host(:not(.legacy-checkbox)) .checkbox-icon*/.sc-ion-checkbox-md-h:not(.legacy-checkbox) .checkbox-icon.sc-ion-checkbox-md{width:var(--size);height:var(--size)}/*!@.checkbox-icon path*/.checkbox-icon.sc-ion-checkbox-md path.sc-ion-checkbox-md{fill:none;stroke:var(--checkmark-color);stroke-width:var(--checkmark-width);opacity:0}/*!@:host(.checkbox-justify-space-between) .checkbox-wrapper*/.checkbox-justify-space-between.sc-ion-checkbox-md-h .checkbox-wrapper.sc-ion-checkbox-md{-ms-flex-pack:justify;justify-content:space-between}/*!@:host(.checkbox-justify-start) .checkbox-wrapper*/.checkbox-justify-start.sc-ion-checkbox-md-h .checkbox-wrapper.sc-ion-checkbox-md{-ms-flex-pack:start;justify-content:start}/*!@:host(.checkbox-justify-end) .checkbox-wrapper*/.checkbox-justify-end.sc-ion-checkbox-md-h .checkbox-wrapper.sc-ion-checkbox-md{-ms-flex-pack:end;justify-content:end}/*!@:host(.checkbox-alignment-start) .checkbox-wrapper*/.checkbox-alignment-start.sc-ion-checkbox-md-h .checkbox-wrapper.sc-ion-checkbox-md{-ms-flex-align:start;align-items:start}/*!@:host(.checkbox-alignment-center) .checkbox-wrapper*/.checkbox-alignment-center.sc-ion-checkbox-md-h .checkbox-wrapper.sc-ion-checkbox-md{-ms-flex-align:center;align-items:center}/*!@:host(.checkbox-label-placement-start) .checkbox-wrapper*/.checkbox-label-placement-start.sc-ion-checkbox-md-h .checkbox-wrapper.sc-ion-checkbox-md{-ms-flex-direction:row;flex-direction:row}/*!@:host(.checkbox-label-placement-start) .label-text-wrapper*/.checkbox-label-placement-start.sc-ion-checkbox-md-h .label-text-wrapper.sc-ion-checkbox-md{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}/*!@:host(.checkbox-label-placement-end) .checkbox-wrapper*/.checkbox-label-placement-end.sc-ion-checkbox-md-h .checkbox-wrapper.sc-ion-checkbox-md{-ms-flex-direction:row-reverse;flex-direction:row-reverse}/*!@:host(.checkbox-label-placement-end) .label-text-wrapper*/.checkbox-label-placement-end.sc-ion-checkbox-md-h .label-text-wrapper.sc-ion-checkbox-md{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}/*!@:host(.checkbox-label-placement-fixed) .label-text-wrapper*/.checkbox-label-placement-fixed.sc-ion-checkbox-md-h .label-text-wrapper.sc-ion-checkbox-md{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}/*!@:host(.checkbox-label-placement-fixed) .label-text-wrapper*/.checkbox-label-placement-fixed.sc-ion-checkbox-md-h .label-text-wrapper.sc-ion-checkbox-md{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}/*!@:host(.checkbox-label-placement-stacked) .checkbox-wrapper*/.checkbox-label-placement-stacked.sc-ion-checkbox-md-h .checkbox-wrapper.sc-ion-checkbox-md{-ms-flex-direction:column;flex-direction:column}/*!@:host(.checkbox-label-placement-stacked) .label-text-wrapper*/.checkbox-label-placement-stacked.sc-ion-checkbox-md-h .label-text-wrapper.sc-ion-checkbox-md{-webkit-transform:scale(0.75);transform:scale(0.75);margin-left:0;margin-right:0;margin-bottom:16px;max-width:calc(100% / 0.75)}/*!@:host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper*/.checkbox-label-placement-stacked.checkbox-alignment-start.sc-ion-checkbox-md-h .label-text-wrapper.sc-ion-checkbox-md{-webkit-transform-origin:left top;transform-origin:left top}/*!@:host-context([dir=rtl]):host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper, :host-context([dir=rtl]).checkbox-label-placement-stacked.checkbox-alignment-start .label-text-wrapper*/[dir=rtl].sc-ion-checkbox-md-h -no-combinator.checkbox-label-placement-stacked.checkbox-alignment-start.sc-ion-checkbox-md-h .label-text-wrapper.sc-ion-checkbox-md,[dir=rtl] .sc-ion-checkbox-md-h -no-combinator.checkbox-label-placement-stacked.checkbox-alignment-start.sc-ion-checkbox-md-h .label-text-wrapper.sc-ion-checkbox-md,[dir=rtl].checkbox-label-placement-stacked.checkbox-alignment-start.sc-ion-checkbox-md-h .label-text-wrapper.sc-ion-checkbox-md,[dir=rtl] .checkbox-label-placement-stacked.checkbox-alignment-start.sc-ion-checkbox-md-h .label-text-wrapper.sc-ion-checkbox-md{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){/*!@:host(.checkbox-label-placement-stacked.checkbox-alignment-start:dir(rtl)) .label-text-wrapper*/.checkbox-label-placement-stacked.checkbox-alignment-start.sc-ion-checkbox-md-h:dir(rtl) .label-text-wrapper.sc-ion-checkbox-md{-webkit-transform-origin:right top;transform-origin:right top}}/*!@:host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper*/.checkbox-label-placement-stacked.checkbox-alignment-center.sc-ion-checkbox-md-h .label-text-wrapper.sc-ion-checkbox-md{-webkit-transform-origin:center top;transform-origin:center top}/*!@:host-context([dir=rtl]):host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper, :host-context([dir=rtl]).checkbox-label-placement-stacked.checkbox-alignment-center .label-text-wrapper*/[dir=rtl].sc-ion-checkbox-md-h -no-combinator.checkbox-label-placement-stacked.checkbox-alignment-center.sc-ion-checkbox-md-h .label-text-wrapper.sc-ion-checkbox-md,[dir=rtl] .sc-ion-checkbox-md-h -no-combinator.checkbox-label-placement-stacked.checkbox-alignment-center.sc-ion-checkbox-md-h .label-text-wrapper.sc-ion-checkbox-md,[dir=rtl].checkbox-label-placement-stacked.checkbox-alignment-center.sc-ion-checkbox-md-h .label-text-wrapper.sc-ion-checkbox-md,[dir=rtl] .checkbox-label-placement-stacked.checkbox-alignment-center.sc-ion-checkbox-md-h .label-text-wrapper.sc-ion-checkbox-md{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){/*!@:host(.checkbox-label-placement-stacked.checkbox-alignment-center:dir(rtl)) .label-text-wrapper*/.checkbox-label-placement-stacked.checkbox-alignment-center.sc-ion-checkbox-md-h:dir(rtl) .label-text-wrapper.sc-ion-checkbox-md{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}}/*!@:host(.checkbox-checked) .checkbox-icon,\n:host(.checkbox-indeterminate) .checkbox-icon*/.checkbox-checked.sc-ion-checkbox-md-h .checkbox-icon.sc-ion-checkbox-md,.checkbox-indeterminate.sc-ion-checkbox-md-h .checkbox-icon.sc-ion-checkbox-md{border-color:var(--border-color-checked);background:var(--checkbox-background-checked)}/*!@:host(.checkbox-checked) .checkbox-icon path,\n:host(.checkbox-indeterminate) .checkbox-icon path*/.checkbox-checked.sc-ion-checkbox-md-h .checkbox-icon.sc-ion-checkbox-md path.sc-ion-checkbox-md,.checkbox-indeterminate.sc-ion-checkbox-md-h .checkbox-icon.sc-ion-checkbox-md path.sc-ion-checkbox-md{opacity:1}/*!@:host(.checkbox-disabled)*/.checkbox-disabled.sc-ion-checkbox-md-h{pointer-events:none}/*!@:host*/.sc-ion-checkbox-md-h{--border-radius:calc(var(--size) * .125);--border-width:2px;--border-style:solid;--border-color:rgb(var(--ion-text-color-rgb, 0, 0, 0), 0.6);--checkmark-width:3;--checkbox-background:var(--ion-item-background, var(--ion-background-color, #fff));--transition:background 180ms cubic-bezier(0.4, 0, 0.2, 1);--size:18px}/*!@.checkbox-icon path*/.checkbox-icon.sc-ion-checkbox-md path.sc-ion-checkbox-md{stroke-dasharray:30;stroke-dashoffset:30}/*!@:host(.checkbox-checked) .checkbox-icon path,\n:host(.checkbox-indeterminate) .checkbox-icon path*/.checkbox-checked.sc-ion-checkbox-md-h .checkbox-icon.sc-ion-checkbox-md path.sc-ion-checkbox-md,.checkbox-indeterminate.sc-ion-checkbox-md-h .checkbox-icon.sc-ion-checkbox-md path.sc-ion-checkbox-md{stroke-dashoffset:0;-webkit-transition:stroke-dashoffset 90ms linear 90ms;transition:stroke-dashoffset 90ms linear 90ms}/*!@:host(.legacy-checkbox.checkbox-disabled),\n:host(.checkbox-disabled) .label-text-wrapper*/.legacy-checkbox.checkbox-disabled.sc-ion-checkbox-md-h,.checkbox-disabled.sc-ion-checkbox-md-h .label-text-wrapper.sc-ion-checkbox-md{opacity:0.38}/*!@:host(.checkbox-disabled) .native-wrapper*/.checkbox-disabled.sc-ion-checkbox-md-h .native-wrapper.sc-ion-checkbox-md{opacity:0.63}/*!@:host(.in-item.legacy-checkbox)*/.in-item.legacy-checkbox.sc-ion-checkbox-md-h{margin-left:0;margin-right:0;margin-top:18px;margin-bottom:18px;display:block;position:static}/*!@:host(.in-item.legacy-checkbox[slot=start])*/.in-item.legacy-checkbox[slot=start].sc-ion-checkbox-md-h{-webkit-margin-start:4px;margin-inline-start:4px;-webkit-margin-end:36px;margin-inline-end:36px;margin-top:18px;margin-bottom:18px}";
+const checkboxMdCss = "/*!@:host*/.sc-ion-checkbox-md-h{--checkbox-background-checked:var(--ion-color-primary, #0054e9);--border-color-checked:var(--ion-color-primary, #0054e9);--checkmark-color:var(--ion-color-primary-contrast, #fff);--transition:none;display:inline-block;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2}/*!@:host(.in-item)*/.in-item.sc-ion-checkbox-md-h{width:100%;height:100%}/*!@:host([slot=start]),\n:host([slot=end])*/[slot=start].sc-ion-checkbox-md-h,[slot=end].sc-ion-checkbox-md-h{width:auto}/*!@:host(.ion-color)*/.ion-color.sc-ion-checkbox-md-h{--checkbox-background-checked:var(--ion-color-base);--border-color-checked:var(--ion-color-base);--checkmark-color:var(--ion-color-contrast)}/*!@.checkbox-wrapper*/.checkbox-wrapper.sc-ion-checkbox-md{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;height:inherit;cursor:inherit}/*!@.label-text-wrapper*/.label-text-wrapper.sc-ion-checkbox-md{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}/*!@:host(.in-item) .label-text-wrapper*/.in-item.sc-ion-checkbox-md-h .label-text-wrapper.sc-ion-checkbox-md{margin-top:10px;margin-bottom:10px}/*!@:host(.in-item.checkbox-label-placement-stacked) .label-text-wrapper*/.in-item.checkbox-label-placement-stacked.sc-ion-checkbox-md-h .label-text-wrapper.sc-ion-checkbox-md{margin-top:10px;margin-bottom:16px}/*!@:host(.in-item.checkbox-label-placement-stacked) .native-wrapper*/.in-item.checkbox-label-placement-stacked.sc-ion-checkbox-md-h .native-wrapper.sc-ion-checkbox-md{margin-bottom:10px}/*!@.label-text-wrapper-hidden*/.label-text-wrapper-hidden.sc-ion-checkbox-md{display:none}/*!@input*/input.sc-ion-checkbox-md{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}/*!@.native-wrapper*/.native-wrapper.sc-ion-checkbox-md{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}/*!@.checkbox-icon*/.checkbox-icon.sc-ion-checkbox-md{border-radius:var(--border-radius);position:relative;width:var(--size);height:var(--size);-webkit-transition:var(--transition);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--checkbox-background);-webkit-box-sizing:border-box;box-sizing:border-box}/*!@.checkbox-icon path*/.checkbox-icon.sc-ion-checkbox-md path.sc-ion-checkbox-md{fill:none;stroke:var(--checkmark-color);stroke-width:var(--checkmark-width);opacity:0}/*!@:host(.checkbox-justify-space-between) .checkbox-wrapper*/.checkbox-justify-space-between.sc-ion-checkbox-md-h .checkbox-wrapper.sc-ion-checkbox-md{-ms-flex-pack:justify;justify-content:space-between}/*!@:host(.checkbox-justify-start) .checkbox-wrapper*/.checkbox-justify-start.sc-ion-checkbox-md-h .checkbox-wrapper.sc-ion-checkbox-md{-ms-flex-pack:start;justify-content:start}/*!@:host(.checkbox-justify-end) .checkbox-wrapper*/.checkbox-justify-end.sc-ion-checkbox-md-h .checkbox-wrapper.sc-ion-checkbox-md{-ms-flex-pack:end;justify-content:end}/*!@:host(.checkbox-alignment-start) .checkbox-wrapper*/.checkbox-alignment-start.sc-ion-checkbox-md-h .checkbox-wrapper.sc-ion-checkbox-md{-ms-flex-align:start;align-items:start}/*!@:host(.checkbox-alignment-center) .checkbox-wrapper*/.checkbox-alignment-center.sc-ion-checkbox-md-h .checkbox-wrapper.sc-ion-checkbox-md{-ms-flex-align:center;align-items:center}/*!@:host(.checkbox-label-placement-start) .checkbox-wrapper*/.checkbox-label-placement-start.sc-ion-checkbox-md-h .checkbox-wrapper.sc-ion-checkbox-md{-ms-flex-direction:row;flex-direction:row}/*!@:host(.checkbox-label-placement-start) .label-text-wrapper*/.checkbox-label-placement-start.sc-ion-checkbox-md-h .label-text-wrapper.sc-ion-checkbox-md{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}/*!@:host(.checkbox-label-placement-end) .checkbox-wrapper*/.checkbox-label-placement-end.sc-ion-checkbox-md-h .checkbox-wrapper.sc-ion-checkbox-md{-ms-flex-direction:row-reverse;flex-direction:row-reverse}/*!@:host(.checkbox-label-placement-end) .label-text-wrapper*/.checkbox-label-placement-end.sc-ion-checkbox-md-h .label-text-wrapper.sc-ion-checkbox-md{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}/*!@:host(.checkbox-label-placement-fixed) .label-text-wrapper*/.checkbox-label-placement-fixed.sc-ion-checkbox-md-h .label-text-wrapper.sc-ion-checkbox-md{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}/*!@:host(.checkbox-label-placement-fixed) .label-text-wrapper*/.checkbox-label-placement-fixed.sc-ion-checkbox-md-h .label-text-wrapper.sc-ion-checkbox-md{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}/*!@:host(.checkbox-label-placement-stacked) .checkbox-wrapper*/.checkbox-label-placement-stacked.sc-ion-checkbox-md-h .checkbox-wrapper.sc-ion-checkbox-md{-ms-flex-direction:column;flex-direction:column}/*!@:host(.checkbox-label-placement-stacked) .label-text-wrapper*/.checkbox-label-placement-stacked.sc-ion-checkbox-md-h .label-text-wrapper.sc-ion-checkbox-md{-webkit-transform:scale(0.75);transform:scale(0.75);margin-left:0;margin-right:0;margin-bottom:16px;max-width:calc(100% / 0.75)}/*!@:host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper*/.checkbox-label-placement-stacked.checkbox-alignment-start.sc-ion-checkbox-md-h .label-text-wrapper.sc-ion-checkbox-md{-webkit-transform-origin:left top;transform-origin:left top}/*!@:host-context([dir=rtl]):host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper, :host-context([dir=rtl]).checkbox-label-placement-stacked.checkbox-alignment-start .label-text-wrapper*/[dir=rtl].sc-ion-checkbox-md-h -no-combinator.checkbox-label-placement-stacked.checkbox-alignment-start.sc-ion-checkbox-md-h .label-text-wrapper.sc-ion-checkbox-md,[dir=rtl] .sc-ion-checkbox-md-h -no-combinator.checkbox-label-placement-stacked.checkbox-alignment-start.sc-ion-checkbox-md-h .label-text-wrapper.sc-ion-checkbox-md,[dir=rtl].checkbox-label-placement-stacked.checkbox-alignment-start.sc-ion-checkbox-md-h .label-text-wrapper.sc-ion-checkbox-md,[dir=rtl] .checkbox-label-placement-stacked.checkbox-alignment-start.sc-ion-checkbox-md-h .label-text-wrapper.sc-ion-checkbox-md{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){/*!@:host(.checkbox-label-placement-stacked.checkbox-alignment-start:dir(rtl)) .label-text-wrapper*/.checkbox-label-placement-stacked.checkbox-alignment-start.sc-ion-checkbox-md-h:dir(rtl) .label-text-wrapper.sc-ion-checkbox-md{-webkit-transform-origin:right top;transform-origin:right top}}/*!@:host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper*/.checkbox-label-placement-stacked.checkbox-alignment-center.sc-ion-checkbox-md-h .label-text-wrapper.sc-ion-checkbox-md{-webkit-transform-origin:center top;transform-origin:center top}/*!@:host-context([dir=rtl]):host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper, :host-context([dir=rtl]).checkbox-label-placement-stacked.checkbox-alignment-center .label-text-wrapper*/[dir=rtl].sc-ion-checkbox-md-h -no-combinator.checkbox-label-placement-stacked.checkbox-alignment-center.sc-ion-checkbox-md-h .label-text-wrapper.sc-ion-checkbox-md,[dir=rtl] .sc-ion-checkbox-md-h -no-combinator.checkbox-label-placement-stacked.checkbox-alignment-center.sc-ion-checkbox-md-h .label-text-wrapper.sc-ion-checkbox-md,[dir=rtl].checkbox-label-placement-stacked.checkbox-alignment-center.sc-ion-checkbox-md-h .label-text-wrapper.sc-ion-checkbox-md,[dir=rtl] .checkbox-label-placement-stacked.checkbox-alignment-center.sc-ion-checkbox-md-h .label-text-wrapper.sc-ion-checkbox-md{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){/*!@:host(.checkbox-label-placement-stacked.checkbox-alignment-center:dir(rtl)) .label-text-wrapper*/.checkbox-label-placement-stacked.checkbox-alignment-center.sc-ion-checkbox-md-h:dir(rtl) .label-text-wrapper.sc-ion-checkbox-md{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}}/*!@:host(.checkbox-checked) .checkbox-icon,\n:host(.checkbox-indeterminate) .checkbox-icon*/.checkbox-checked.sc-ion-checkbox-md-h .checkbox-icon.sc-ion-checkbox-md,.checkbox-indeterminate.sc-ion-checkbox-md-h .checkbox-icon.sc-ion-checkbox-md{border-color:var(--border-color-checked);background:var(--checkbox-background-checked)}/*!@:host(.checkbox-checked) .checkbox-icon path,\n:host(.checkbox-indeterminate) .checkbox-icon path*/.checkbox-checked.sc-ion-checkbox-md-h .checkbox-icon.sc-ion-checkbox-md path.sc-ion-checkbox-md,.checkbox-indeterminate.sc-ion-checkbox-md-h .checkbox-icon.sc-ion-checkbox-md path.sc-ion-checkbox-md{opacity:1}/*!@:host(.checkbox-disabled)*/.checkbox-disabled.sc-ion-checkbox-md-h{pointer-events:none}/*!@:host*/.sc-ion-checkbox-md-h{--border-radius:calc(var(--size) * .125);--border-width:2px;--border-style:solid;--border-color:rgb(var(--ion-text-color-rgb, 0, 0, 0), 0.6);--checkmark-width:3;--checkbox-background:var(--ion-item-background, var(--ion-background-color, #fff));--transition:background 180ms cubic-bezier(0.4, 0, 0.2, 1);--size:18px}/*!@.checkbox-icon path*/.checkbox-icon.sc-ion-checkbox-md path.sc-ion-checkbox-md{stroke-dasharray:30;stroke-dashoffset:30}/*!@:host(.checkbox-checked) .checkbox-icon path,\n:host(.checkbox-indeterminate) .checkbox-icon path*/.checkbox-checked.sc-ion-checkbox-md-h .checkbox-icon.sc-ion-checkbox-md path.sc-ion-checkbox-md,.checkbox-indeterminate.sc-ion-checkbox-md-h .checkbox-icon.sc-ion-checkbox-md path.sc-ion-checkbox-md{stroke-dashoffset:0;-webkit-transition:stroke-dashoffset 90ms linear 90ms;transition:stroke-dashoffset 90ms linear 90ms}/*!@:host(.checkbox-disabled) .label-text-wrapper*/.checkbox-disabled.sc-ion-checkbox-md-h .label-text-wrapper.sc-ion-checkbox-md{opacity:0.38}/*!@:host(.checkbox-disabled) .native-wrapper*/.checkbox-disabled.sc-ion-checkbox-md-h .native-wrapper.sc-ion-checkbox-md{opacity:0.63}";
 var IonCheckboxMdStyle0 = checkboxMdCss;
 
 /**
@@ -14028,12 +13787,8 @@ class Checkbox {
         this.ionChange = createEvent(this, "ionChange", 7);
         this.ionFocus = createEvent(this, "ionFocus", 7);
         this.ionBlur = createEvent(this, "ionBlur", 7);
-        this.ionStyle = createEvent(this, "ionStyle", 7);
         this.inputId = `ion-cb-${checkboxIds++}`;
         this.inheritedAttributes = {};
-        // TODO(FW-3100): remove this
-        // This flag ensures we log the deprecation warning at most once.
-        this.hasLoggedDeprecationWarning = false;
         /**
          * Sets the checked property and emits
          * the ionChange event. Use this to update the
@@ -14074,49 +13829,21 @@ class Checkbox {
         this.labelPlacement = 'start';
         this.justify = 'space-between';
         this.alignment = 'center';
-        this.legacy = undefined;
-    }
-    connectedCallback() {
-        this.legacyFormController = createLegacyFormController(this.el); // TODO(FW-3100): remove this
     }
     componentWillLoad() {
-        this.emitStyle();
-        // TODO(FW-3100): remove check
-        if (!this.legacyFormController.hasLegacyControl()) {
-            this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
-        }
-    }
-    styleChanged() {
-        this.emitStyle();
-    }
-    emitStyle() {
-        const style = {
-            'interactive-disabled': this.disabled,
-            // TODO(FW-3100): remove this
-            legacy: !!this.legacy,
-        };
-        // TODO(FW-3100): remove this
-        if (this.legacyFormController.hasLegacyControl()) {
-            style['checkbox-checked'] = this.checked;
-        }
-        this.ionStyle.emit(style);
+        this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
     }
     setFocus() {
         if (this.focusEl) {
             this.focusEl.focus();
         }
     }
-    // TODO(FW-3100): run contents of renderCheckbox directly instead
     render() {
-        const { legacyFormController } = this;
-        return legacyFormController.hasLegacyControl() ? this.renderLegacyCheckbox() : this.renderCheckbox();
-    }
-    renderCheckbox() {
         const { color, checked, disabled, el, getSVGPath, indeterminate, inheritedAttributes, inputId, justify, labelPlacement, name, value, alignment, } = this;
         const mode = getIonMode$1(this);
         const path = getSVGPath(mode, indeterminate);
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (hAsync(Host, { class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: 'be30606f48a3adf62eddc68b7d7f908d0c46f96d', class: createColorClasses$1(color, {
                 [mode]: true,
                 'in-item': hostContext('ion-item', el),
                 'checkbox-checked': checked,
@@ -14126,40 +13853,10 @@ class Checkbox {
                 [`checkbox-justify-${justify}`]: true,
                 [`checkbox-alignment-${alignment}`]: true,
                 [`checkbox-label-placement-${labelPlacement}`]: true,
-            }), onClick: this.onClick }, hAsync("label", { class: "checkbox-wrapper" }, hAsync("input", Object.assign({ type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, inheritedAttributes)), hAsync("div", { class: {
+            }), onClick: this.onClick }, hAsync("label", { key: '96c3f85a0ae6970743f6965d614033426cf2b163', class: "checkbox-wrapper" }, hAsync("input", Object.assign({ key: 'd998089218bcb6065228095e38af936eebfa3780', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, inheritedAttributes)), hAsync("div", { key: 'f2374957e47eec899aa2ca49ede4cfdf8397fc18', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': el.textContent === '',
-            }, part: "label" }, hAsync("slot", null)), hAsync("div", { class: "native-wrapper" }, hAsync("svg", { class: "checkbox-icon", viewBox: "0 0 24 24", part: "container" }, path)))));
-    }
-    // TODO(FW-3100): remove this
-    renderLegacyCheckbox() {
-        if (!this.hasLoggedDeprecationWarning) {
-            printIonWarning(`ion-checkbox now requires providing a label with either the default slot or the "aria-label" attribute. To migrate, remove any usage of "ion-label" and pass the label text to either the component or the "aria-label" attribute.
-
-Example: <ion-checkbox>Label</ion-checkbox>
-Example with aria-label: <ion-checkbox aria-label="Label"></ion-checkbox>
-
-Developers can use the "legacy" property to continue using the legacy form markup. This property will be removed in an upcoming major release of Ionic where this form control will use the modern form markup.`, this.el);
-            if (this.legacy) {
-                printIonWarning(`ion-checkbox is being used with the "legacy" property enabled which will forcibly enable the legacy form markup. This property will be removed in an upcoming major release of Ionic where this form control will use the modern form markup.
-Developers can dismiss this warning by removing their usage of the "legacy" property and using the new checkbox syntax.`, this.el);
-            }
-            this.hasLoggedDeprecationWarning = true;
-        }
-        const { color, checked, disabled, el, getSVGPath, indeterminate, inputId, name, value } = this;
-        const mode = getIonMode$1(this);
-        const { label, labelId, labelText } = getAriaLabel(el, inputId);
-        const path = getSVGPath(mode, indeterminate);
-        renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (hAsync(Host, { "aria-labelledby": label ? labelId : null, "aria-checked": `${checked}`, "aria-hidden": disabled ? 'true' : null, role: "checkbox", class: createColorClasses$1(color, {
-                [mode]: true,
-                'in-item': hostContext('ion-item', el),
-                'checkbox-checked': checked,
-                'checkbox-disabled': disabled,
-                'checkbox-indeterminate': indeterminate,
-                'legacy-checkbox': true,
-                interactive: true,
-            }), onClick: this.onClick }, hAsync("svg", { class: "checkbox-icon", viewBox: "0 0 24 24", part: "container" }, path), hAsync("label", { htmlFor: inputId }, labelText), hAsync("input", { type: "checkbox", "aria-checked": `${checked}`, disabled: disabled, id: inputId, onChange: this.toggleChecked, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) })));
+            }, part: "label" }, hAsync("slot", { key: '3bd6bc289c26e96cc0b4a8b39154fec1d02ba426' })), hAsync("div", { key: '30397663226d628859d3814f9dc53ee4aad57de5', class: "native-wrapper" }, hAsync("svg", { key: '53374f787677adfdb3b693ead3f8d86412127c10', class: "checkbox-icon", viewBox: "0 0 24 24", part: "container" }, path)))));
     }
     getSVGPath(mode, indeterminate) {
         let path = indeterminate ? (hAsync("path", { d: "M6 12L18 12", part: "mark" })) : (hAsync("path", { d: "M5.9,12.5l3.8,3.8l8.8-8.8", part: "mark" }));
@@ -14169,10 +13866,6 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
         return path;
     }
     get el() { return getElement(this); }
-    static get watchers() { return {
-        "checked": ["styleChanged"],
-        "disabled": ["styleChanged"]
-    }; }
     static get style() { return {
         ios: IonCheckboxIosStyle0,
         md: IonCheckboxMdStyle0
@@ -14189,8 +13882,7 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
             "value": [8],
             "labelPlacement": [1, "label-placement"],
             "justify": [1],
-            "alignment": [1],
-            "legacy": [4]
+            "alignment": [1]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -14217,12 +13909,12 @@ class Chip {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'eca7cc616c0c9dd2ab28efd41e203fa094880e9e', "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '4c8c83eefc650c00f2c515937df63094f9468bbd', "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'chip-outline': this.outline,
                 'chip-disabled': this.disabled,
                 'ion-activatable': true,
-            }) }, hAsync("slot", { key: 'b64c9067132791f73a8434c37d5a335fb2d96f74' }), mode === 'md' && hAsync("ion-ripple-effect", null)));
+            }) }, hAsync("slot", { key: '5a94dafd29f2ea7255ba2d4fa173f5eff92146aa' }), mode === 'md' && hAsync("ion-ripple-effect", null)));
     }
     static get style() { return {
         ios: IonChipIosStyle0,
@@ -14373,9 +14065,9 @@ class Col {
     render() {
         const isRTL = document.dir === 'rtl';
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'c186972dd12d10a4600975c326f20666fed96abf', class: {
+        return (hAsync(Host, { key: '8bb465c85b64001d6613e8b38cd4f4fd2b4c4a90', class: {
                 [mode]: true,
-            }, style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, hAsync("slot", { key: '54cc8bd92f94cfd30d9f3e8e59e0f0dc38abfd63' })));
+            }, style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, hAsync("slot", { key: 'fe9f9ce55c86771638413457a0d5dcd9dce29217' })));
     }
     static get style() { return IonColStyle0; }
     static get cmpMeta() { return {
@@ -14744,7 +14436,7 @@ class Content {
         const forceOverscroll = this.shouldForceOverscroll();
         const transitionShadow = mode === 'ios';
         this.resize();
-        return (hAsync(Host, { key: 'c8df05bec11069ef219b64354b4ebfe8154735cc', role: isMainContent ? 'main' : undefined, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '5b6d5c2b8b91ac84dcdf6cf6178a8f7fb970ca00', role: isMainContent ? 'main' : undefined, class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'content-sizing': hostContext('ion-popover', this.el),
                 overscroll: forceOverscroll,
@@ -14752,12 +14444,12 @@ class Content {
             }), style: {
                 '--offset-top': `${this.cTop}px`,
                 '--offset-bottom': `${this.cBottom}px`,
-            } }, hAsync("div", { key: '8fa0969fbdf7f75c6a43c05892e3f98be4027e76', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), hAsync("div", { key: '117503b489a2f07bc2a75e52f9d964c829bedd2c', class: {
+            } }, hAsync("div", { key: '4fa58c187e2c2f7f3bc365f485dd80dc0c059d8b', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), hAsync("div", { key: 'f595d0d59e0957acdebd0b16ae79e88da8ed973d', class: {
                 'inner-scroll': true,
                 'scroll-x': scrollX,
                 'scroll-y': scrollY,
                 overscroll: (scrollX || scrollY) && forceOverscroll,
-            }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, hAsync("slot", { key: '788b7798d8f53a577c18b3311dfaf4f6cb77e257' })), transitionShadow ? (hAsync("div", { class: "transition-effect" }, hAsync("div", { class: "transition-cover" }), hAsync("div", { class: "transition-shadow" }))) : null, hAsync("slot", { key: '55c6c5176938501df056e05cf976e0eafa4f2b5b', name: "fixed" })));
+            }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, hAsync("slot", { key: '1aceb64f45d13574ea1e20c0885191ced5a0b961' })), transitionShadow ? (hAsync("div", { class: "transition-effect" }, hAsync("div", { class: "transition-cover" }), hAsync("div", { class: "transition-shadow" }))) : null, hAsync("slot", { key: 'd6c4f4d9001da024ec652358f7ae880db75d3a4e', name: "fixed" })));
     }
     get el() { return getElement(this); }
     static get style() { return IonContentStyle0; }
@@ -18233,7 +17925,7 @@ class Datetime {
         const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
         const hasWheelVariant = hasDatePresentation && preferWheel;
         renderHiddenInput(true, el, name, formatValue(value), disabled);
-        return (hAsync(Host, { key: '62013b69f916fecf05906bb016d48912526a3d54', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses$1(color, {
+        return (hAsync(Host, { key: '2e5ff577327018558a145cff23f03661c2d19c41', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses$1(color, {
                 [mode]: true,
                 ['datetime-readonly']: readonly,
                 ['datetime-disabled']: disabled,
@@ -18645,7 +18337,7 @@ class DatetimeButton {
     render() {
         const { color, dateText, timeText, selectedButton, datetimeActive, disabled } = this;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'c1ceeee6a920f8c6d43d3d8ede88a6c31a2241d8', class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: 'cff9c4cbabf76a415b3785e9fa6cc682fddcec54', class: createColorClasses$1(color, {
                 [mode]: true,
                 [`${selectedButton}-active`]: datetimeActive,
                 ['datetime-button-disabled']: disabled,
@@ -18723,12 +18415,12 @@ class Fab {
     render() {
         const { horizontal, vertical, edge } = this;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '1a7b685098508c4eebff449775de7db5bce6937a', class: {
+        return (hAsync(Host, { key: '295e4b79449ff102d54b4a415487a26144a47839', class: {
                 [mode]: true,
                 [`fab-horizontal-${horizontal}`]: horizontal !== undefined,
                 [`fab-vertical-${vertical}`]: vertical !== undefined,
                 'fab-edge': edge,
-            } }, hAsync("slot", { key: 'd4c27f0307292cf443bfefe064f72827b0193508' })));
+            } }, hAsync("slot", { key: 'a41871eb5d0a8c6315ba7012cef0e4dfc1126c9d' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -18818,7 +18510,7 @@ class FabButton {
                 rel: this.rel,
                 target: this.target,
             };
-        return (hAsync(Host, { key: '46827ed444d314218e02138c7f790418637d95d0', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: 'bfc553a86d54b665039512e93c83865232431e61', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses$1(color, {
                 [mode]: true,
                 'fab-button-in-list': inList,
                 'fab-button-translucent-in-list': inList && translucent,
@@ -18829,7 +18521,7 @@ class FabButton {
                 'ion-activatable': true,
                 'ion-focusable': true,
                 [`fab-button-${size}`]: size !== undefined,
-            }) }, hAsync(TagType, Object.assign({ key: '05ab8562306b3af9a68e5f97f2815653f4ec4f86' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: (ev) => openURL(href, ev, this.routerDirection, this.routerAnimation) }, inheritedAttributes), hAsync("ion-icon", { key: '315b62c5dcee8a27a3e4e572e9a9f76be9bf9f76', "aria-hidden": "true", icon: this.closeIcon, part: "close-icon", class: "close-icon", lazy: false }), hAsync("span", { key: '63b69cde22a13813ffa50d8f688f538a36372953', class: "button-inner" }, hAsync("slot", { key: '39c1e85c385b36cbb31a8da8cc721cd5aa389009' })), mode === 'md' && hAsync("ion-ripple-effect", null))));
+            }) }, hAsync(TagType, Object.assign({ key: '08821f166159c1c0c08a936f8db0cc5b8c121b6b' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: (ev) => openURL(href, ev, this.routerDirection, this.routerAnimation) }, inheritedAttributes), hAsync("ion-icon", { key: '5b369ce677bb08c2972489be8abad035f2074fee', "aria-hidden": "true", icon: this.closeIcon, part: "close-icon", class: "close-icon", lazy: false }), hAsync("span", { key: '6b61a3242e6d6ec49e157fe6c7a64b8445e6de3b', class: "button-inner" }, hAsync("slot", { key: 'f6450e5caabb8becd48425547246b6edf96eb4f8' })), mode === 'md' && hAsync("ion-ripple-effect", null))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -18880,11 +18572,11 @@ class FabList {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '62bfbad01d821663c6d50f63b3dc02ba2754faf0', class: {
+        return (hAsync(Host, { key: '8eca9c8c4f7febe3e0b44604a3854480f5f9e697', class: {
                 [mode]: true,
                 'fab-list-active': this.activated,
                 [`fab-list-side-${this.side}`]: true,
-            } }, hAsync("slot", { key: '2eec0c8415c1e4a43d7f11d26874c952a9f02046' })));
+            } }, hAsync("slot", { key: '3be8055bbf0dbb928d712e950f6184bd173a2d1e' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -19336,7 +19028,7 @@ class Footer {
         const mode = getIonMode$1(this);
         const tabs = this.el.closest('ion-tabs');
         const tabBar = tabs === null || tabs === void 0 ? void 0 : tabs.querySelector(':scope > ion-tab-bar');
-        return (hAsync(Host, { key: '67ca25d2340178624b1858c7f8109013e5376934', role: "contentinfo", class: {
+        return (hAsync(Host, { key: 'c86a1139e5004bb523b2ec02ff3056bb392070d8', role: "contentinfo", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`footer-${mode}`]: true,
@@ -19344,7 +19036,7 @@ class Footer {
                 [`footer-translucent-${mode}`]: translucent,
                 ['footer-toolbar-padding']: !this.keyboardVisible && (!tabBar || tabBar.slot !== 'bottom'),
                 [`footer-collapse-${collapse}`]: collapse !== undefined,
-            } }, mode === 'ios' && translucent && hAsync("div", { class: "footer-background" }), hAsync("slot", { key: 'e35b1c0c474fa0d80b6f6c0248db2b43d0903c0f' })));
+            } }, mode === 'ios' && translucent && hAsync("div", { class: "footer-background" }), hAsync("slot", { key: '6869e534facaf074883643403c8fb03bb2f0dbc5' })));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -19375,10 +19067,10 @@ class Grid {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'fdcfd1ac3b1d609c91edc514e1207447cceaf8f7', class: {
+        return (hAsync(Host, { key: '6d46d3693c8af7e805cb438dd654485a152e7e40', class: {
                 [mode]: true,
                 'grid-fixed': this.fixed,
-            } }, hAsync("slot", { key: 'a0660b629d05c03a8385003ade6cd0db75075987' })));
+            } }, hAsync("slot", { key: '7f57ee35524880aeb96d081dd8125460156196b3' })));
     }
     static get style() { return IonGridStyle0; }
     static get cmpMeta() { return {
@@ -19709,14 +19401,14 @@ class Header {
         const collapse = this.collapse || 'none';
         // banner role must be at top level, so remove role if inside a menu
         const roleType = hostContext('ion-menu', this.el) ? 'none' : 'banner';
-        return (hAsync(Host, Object.assign({ key: '5546d07e3b83695335698a7707d37a298da38b72', role: roleType, class: {
+        return (hAsync(Host, Object.assign({ key: 'ab8eb272f275b7802e224c21c166124092fa917b', role: roleType, class: {
                 [mode]: true,
                 // Used internally for styling
                 [`header-${mode}`]: true,
                 [`header-translucent`]: this.translucent,
                 [`header-collapse-${collapse}`]: true,
                 [`header-translucent-${mode}`]: this.translucent,
-            } }, inheritedAttributes), mode === 'ios' && translucent && hAsync("div", { class: "header-background" }), hAsync("slot", { key: '7f701a4b57b2888fbcce9b839a3bc5c9d1240e2a' })));
+            } }, inheritedAttributes), mode === 'ios' && translucent && hAsync("div", { class: "header-background" }), hAsync("slot", { key: '52409e455c10a25419c4cbd9ed2346dfecb36537' })));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -19995,7 +19687,7 @@ class Img {
     render() {
         const { loadSrc, alt, onLoad, loadError, inheritedAttributes } = this;
         const { draggable } = inheritedAttributes;
-        return (hAsync(Host, { key: 'b1ceee3a85c5092af386fb50ac8972c040ece6b7', class: getIonMode$1(this) }, hAsync("img", { key: '722d81aaceb392f9bfde078a9054b579f51dceda', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
+        return (hAsync(Host, { key: 'ff933e2b7e586c71bc695ad9e1475c2ef48a1632', class: getIonMode$1(this) }, hAsync("img", { key: '60fea471b6665abe92678c7c9ab15c3e12195582', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -20185,101 +19877,284 @@ class InfiniteScroll {
         else {
             this.didFire = false;
         }
-    }
-    canStart() {
-        return !this.disabled && !this.isBusy && !!this.scrollEl && !this.isLoading;
-    }
-    enableScrollEvents(shouldListen) {
-        if (this.scrollEl) {
-            if (shouldListen) {
-                this.scrollEl.addEventListener('scroll', this.onScroll);
-            }
-            else {
-                this.scrollEl.removeEventListener('scroll', this.onScroll);
-            }
+    }
+    canStart() {
+        return !this.disabled && !this.isBusy && !!this.scrollEl && !this.isLoading;
+    }
+    enableScrollEvents(shouldListen) {
+        if (this.scrollEl) {
+            if (shouldListen) {
+                this.scrollEl.addEventListener('scroll', this.onScroll);
+            }
+            else {
+                this.scrollEl.removeEventListener('scroll', this.onScroll);
+            }
+        }
+    }
+    render() {
+        const mode = getIonMode$1(this);
+        const disabled = this.disabled;
+        return (hAsync(Host, { key: 'd9348b091bc02b744b7599207192994a31bf5044', class: {
+                [mode]: true,
+                'infinite-scroll-loading': this.isLoading,
+                'infinite-scroll-enabled': !disabled,
+            } }));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "threshold": ["thresholdChanged"],
+        "disabled": ["disabledChanged"]
+    }; }
+    static get style() { return IonInfiniteScrollStyle0; }
+    static get cmpMeta() { return {
+        "$flags$": 0,
+        "$tagName$": "ion-infinite-scroll",
+        "$members$": {
+            "threshold": [1],
+            "disabled": [4],
+            "position": [1],
+            "isLoading": [32],
+            "complete": [64]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": []
+    }; }
+}
+
+const infiniteScrollContentIosCss = "ion-infinite-scroll-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;min-height:84px;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.infinite-loading{margin-left:0;margin-right:0;margin-top:0;margin-bottom:32px;display:none;width:100%}.infinite-loading-text{-webkit-margin-start:32px;margin-inline-start:32px;-webkit-margin-end:32px;margin-inline-end:32px;margin-top:4px;margin-bottom:0}.infinite-scroll-loading ion-infinite-scroll-content>.infinite-loading{display:block}.infinite-scroll-content-ios .infinite-loading-text{color:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))}.infinite-scroll-content-ios .infinite-loading-spinner .spinner-lines-ios line,.infinite-scroll-content-ios .infinite-loading-spinner .spinner-lines-small-ios line,.infinite-scroll-content-ios .infinite-loading-spinner .spinner-crescent circle{stroke:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))}.infinite-scroll-content-ios .infinite-loading-spinner .spinner-bubbles circle,.infinite-scroll-content-ios .infinite-loading-spinner .spinner-circles circle,.infinite-scroll-content-ios .infinite-loading-spinner .spinner-dots circle{fill:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))}";
+var IonInfiniteScrollContentIosStyle0 = infiniteScrollContentIosCss;
+
+const infiniteScrollContentMdCss = "ion-infinite-scroll-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;min-height:84px;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.infinite-loading{margin-left:0;margin-right:0;margin-top:0;margin-bottom:32px;display:none;width:100%}.infinite-loading-text{-webkit-margin-start:32px;margin-inline-start:32px;-webkit-margin-end:32px;margin-inline-end:32px;margin-top:4px;margin-bottom:0}.infinite-scroll-loading ion-infinite-scroll-content>.infinite-loading{display:block}.infinite-scroll-content-md .infinite-loading-text{color:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))}.infinite-scroll-content-md .infinite-loading-spinner .spinner-lines-md line,.infinite-scroll-content-md .infinite-loading-spinner .spinner-lines-small-md line,.infinite-scroll-content-md .infinite-loading-spinner .spinner-crescent circle{stroke:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))}.infinite-scroll-content-md .infinite-loading-spinner .spinner-bubbles circle,.infinite-scroll-content-md .infinite-loading-spinner .spinner-circles circle,.infinite-scroll-content-md .infinite-loading-spinner .spinner-dots circle{fill:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))}";
+var IonInfiniteScrollContentMdStyle0 = infiniteScrollContentMdCss;
+
+class InfiniteScrollContent {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
+        this.loadingSpinner = undefined;
+        this.loadingText = undefined;
+    }
+    componentDidLoad() {
+        if (this.loadingSpinner === undefined) {
+            const mode = getIonMode$1(this);
+            this.loadingSpinner = config.get('infiniteLoadingSpinner', config.get('spinner', mode === 'ios' ? 'lines' : 'crescent'));
+        }
+    }
+    renderLoadingText() {
+        const { customHTMLEnabled, loadingText } = this;
+        if (customHTMLEnabled) {
+            return hAsync("div", { class: "infinite-loading-text", innerHTML: sanitizeDOMString(loadingText) });
+        }
+        return hAsync("div", { class: "infinite-loading-text" }, this.loadingText);
+    }
+    render() {
+        const mode = getIonMode$1(this);
+        return (hAsync(Host, { key: '6c13188d977ef82db9281e0bc3e6d43438ad2335', class: {
+                [mode]: true,
+                // Used internally for styling
+                [`infinite-scroll-content-${mode}`]: true,
+            } }, hAsync("div", { key: '41b5087e22d03c928d00be4e1845e711409c807d', class: "infinite-loading" }, this.loadingSpinner && (hAsync("div", { class: "infinite-loading-spinner" }, hAsync("ion-spinner", { name: this.loadingSpinner }))), this.loadingText !== undefined && this.renderLoadingText())));
+    }
+    static get style() { return {
+        ios: IonInfiniteScrollContentIosStyle0,
+        md: IonInfiniteScrollContentMdStyle0
+    }; }
+    static get cmpMeta() { return {
+        "$flags$": 32,
+        "$tagName$": "ion-infinite-scroll-content",
+        "$members$": {
+            "loadingSpinner": [1025, "loading-spinner"],
+            "loadingText": [1, "loading-text"]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": []
+    }; }
+}
+
+/**
+ * A utility to calculate the size of an outline notch
+ * width relative to the content passed. This is used in
+ * components such as `ion-select` with `fill="outline"`
+ * where we need to pass slotted HTML content. This is not
+ * needed when rendering plaintext content because we can
+ * render the plaintext again hidden with `opacity: 0` inside
+ * of the notch. As a result we can rely on the intrinsic size
+ * of the element to correctly compute the notch width. We
+ * cannot do this with slotted content because we cannot project
+ * it into 2 places at once.
+ *
+ * @internal
+ * @param el: The host element
+ * @param getNotchSpacerEl: A function that returns a reference to the notch spacer element inside of the component template.
+ * @param getLabelSlot: A function that returns a reference to the slotted content.
+ */
+const createNotchController = (el, getNotchSpacerEl, getLabelSlot) => {
+    let notchVisibilityIO;
+    const needsExplicitNotchWidth = () => {
+        const notchSpacerEl = getNotchSpacerEl();
+        if (
+        /**
+         * If the notch is not being used
+         * then we do not need to set the notch width.
+         */
+        notchSpacerEl === undefined ||
+            /**
+             * If either the label property is being
+             * used or the label slot is not defined,
+             * then we do not need to estimate the notch width.
+             */
+            el.label !== undefined ||
+            getLabelSlot() === null) {
+            return false;
+        }
+        return true;
+    };
+    const calculateNotchWidth = () => {
+        if (needsExplicitNotchWidth()) {
+            /**
+             * Run this the frame after
+             * the browser has re-painted the host element.
+             * Otherwise, the label element may have a width
+             * of 0 and the IntersectionObserver will be used.
+             */
+            raf(() => {
+                setNotchWidth();
+            });
+        }
+    };
+    /**
+     * When using a label prop we can render
+     * the label value inside of the notch and
+     * let the browser calculate the size of the notch.
+     * However, we cannot render the label slot in multiple
+     * places so we need to manually calculate the notch dimension
+     * based on the size of the slotted content.
+     *
+     * This function should only be used to set the notch width
+     * on slotted label content. The notch width for label prop
+     * content is automatically calculated based on the
+     * intrinsic size of the label text.
+     */
+    const setNotchWidth = () => {
+        const notchSpacerEl = getNotchSpacerEl();
+        if (notchSpacerEl === undefined) {
+            return;
+        }
+        if (!needsExplicitNotchWidth()) {
+            notchSpacerEl.style.removeProperty('width');
+            return;
+        }
+        const width = getLabelSlot().scrollWidth;
+        if (
+        /**
+         * If the computed width of the label is 0
+         * and notchSpacerEl's offsetParent is null
+         * then that means the element is hidden.
+         * As a result, we need to wait for the element
+         * to become visible before setting the notch width.
+         *
+         * We do not check el.offsetParent because
+         * that can be null if the host element has
+         * position: fixed applied to it.
+         * notchSpacerEl does not have position: fixed.
+         */
+        width === 0 &&
+            notchSpacerEl.offsetParent === null &&
+            win$1 !== undefined &&
+            'IntersectionObserver' in win$1) {
+            /**
+             * If there is an IO already attached
+             * then that will update the notch
+             * once the element becomes visible.
+             * As a result, there is no need to create
+             * another one.
+             */
+            if (notchVisibilityIO !== undefined) {
+                return;
+            }
+            const io = (notchVisibilityIO = new IntersectionObserver((ev) => {
+                /**
+                 * If the element is visible then we
+                 * can try setting the notch width again.
+                 */
+                if (ev[0].intersectionRatio === 1) {
+                    setNotchWidth();
+                    io.disconnect();
+                    notchVisibilityIO = undefined;
+                }
+            }, 
+            /**
+             * Set the root to be the host element
+             * This causes the IO callback
+             * to be fired in WebKit as soon as the element
+             * is visible. If we used the default root value
+             * then WebKit would only fire the IO callback
+             * after any animations (such as a modal transition)
+             * finished, and there would potentially be a flicker.
+             */
+            { threshold: 0.01, root: el }));
+            io.observe(notchSpacerEl);
+            return;
+        }
+        /**
+         * If the element is visible then we can set the notch width.
+         * The notch is only visible when the label is scaled,
+         * which is why we multiply the width by 0.75 as this is
+         * the same amount the label element is scaled by in the host CSS.
+         * (See $form-control-label-stacked-scale in ionic.globals.scss).
+         */
+        notchSpacerEl.style.setProperty('width', `${width * 0.75}px`);
+    };
+    const destroy = () => {
+        if (notchVisibilityIO) {
+            notchVisibilityIO.disconnect();
+            notchVisibilityIO = undefined;
         }
+    };
+    return {
+        calculateNotchWidth,
+        destroy,
+    };
+};
+
+/**
+ * Uses the compareWith param to compare two values to determine if they are equal.
+ *
+ * @param currentValue The current value of the control.
+ * @param compareValue The value to compare against.
+ * @param compareWith The function or property name to use to compare values.
+ */
+const compareOptions = (currentValue, compareValue, compareWith) => {
+    if (typeof compareWith === 'function') {
+        return compareWith(currentValue, compareValue);
     }
-    render() {
-        const mode = getIonMode$1(this);
-        const disabled = this.disabled;
-        return (hAsync(Host, { key: '118757d9470756d66434331fc0180d31ac158e06', class: {
-                [mode]: true,
-                'infinite-scroll-loading': this.isLoading,
-                'infinite-scroll-enabled': !disabled,
-            } }));
+    else if (typeof compareWith === 'string') {
+        return currentValue[compareWith] === compareValue[compareWith];
     }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "threshold": ["thresholdChanged"],
-        "disabled": ["disabledChanged"]
-    }; }
-    static get style() { return IonInfiniteScrollStyle0; }
-    static get cmpMeta() { return {
-        "$flags$": 0,
-        "$tagName$": "ion-infinite-scroll",
-        "$members$": {
-            "threshold": [1],
-            "disabled": [4],
-            "position": [1],
-            "isLoading": [32],
-            "complete": [64]
-        },
-        "$listeners$": undefined,
-        "$lazyBundleId$": "-",
-        "$attrsToReflect$": []
-    }; }
-}
-
-const infiniteScrollContentIosCss = "ion-infinite-scroll-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;min-height:84px;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.infinite-loading{margin-left:0;margin-right:0;margin-top:0;margin-bottom:32px;display:none;width:100%}.infinite-loading-text{-webkit-margin-start:32px;margin-inline-start:32px;-webkit-margin-end:32px;margin-inline-end:32px;margin-top:4px;margin-bottom:0}.infinite-scroll-loading ion-infinite-scroll-content>.infinite-loading{display:block}.infinite-scroll-content-ios .infinite-loading-text{color:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))}.infinite-scroll-content-ios .infinite-loading-spinner .spinner-lines-ios line,.infinite-scroll-content-ios .infinite-loading-spinner .spinner-lines-small-ios line,.infinite-scroll-content-ios .infinite-loading-spinner .spinner-crescent circle{stroke:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))}.infinite-scroll-content-ios .infinite-loading-spinner .spinner-bubbles circle,.infinite-scroll-content-ios .infinite-loading-spinner .spinner-circles circle,.infinite-scroll-content-ios .infinite-loading-spinner .spinner-dots circle{fill:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))}";
-var IonInfiniteScrollContentIosStyle0 = infiniteScrollContentIosCss;
-
-const infiniteScrollContentMdCss = "ion-infinite-scroll-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;min-height:84px;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.infinite-loading{margin-left:0;margin-right:0;margin-top:0;margin-bottom:32px;display:none;width:100%}.infinite-loading-text{-webkit-margin-start:32px;margin-inline-start:32px;-webkit-margin-end:32px;margin-inline-end:32px;margin-top:4px;margin-bottom:0}.infinite-scroll-loading ion-infinite-scroll-content>.infinite-loading{display:block}.infinite-scroll-content-md .infinite-loading-text{color:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))}.infinite-scroll-content-md .infinite-loading-spinner .spinner-lines-md line,.infinite-scroll-content-md .infinite-loading-spinner .spinner-lines-small-md line,.infinite-scroll-content-md .infinite-loading-spinner .spinner-crescent circle{stroke:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))}.infinite-scroll-content-md .infinite-loading-spinner .spinner-bubbles circle,.infinite-scroll-content-md .infinite-loading-spinner .spinner-circles circle,.infinite-scroll-content-md .infinite-loading-spinner .spinner-dots circle{fill:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))}";
-var IonInfiniteScrollContentMdStyle0 = infiniteScrollContentMdCss;
-
-class InfiniteScrollContent {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
-        this.loadingSpinner = undefined;
-        this.loadingText = undefined;
+    else {
+        return Array.isArray(compareValue) ? compareValue.includes(currentValue) : currentValue === compareValue;
     }
-    componentDidLoad() {
-        if (this.loadingSpinner === undefined) {
-            const mode = getIonMode$1(this);
-            this.loadingSpinner = config.get('infiniteLoadingSpinner', config.get('spinner', mode === 'ios' ? 'lines' : 'crescent'));
-        }
+};
+/**
+ * Compares a value against the current value(s) to determine if it is selected.
+ *
+ * @param currentValue The current value of the control.
+ * @param compareValue The value to compare against.
+ * @param compareWith The function or property name to use to compare values.
+ */
+const isOptionSelected = (currentValue, compareValue, compareWith) => {
+    if (currentValue === undefined) {
+        return false;
     }
-    renderLoadingText() {
-        const { customHTMLEnabled, loadingText } = this;
-        if (customHTMLEnabled) {
-            return hAsync("div", { class: "infinite-loading-text", innerHTML: sanitizeDOMString(loadingText) });
-        }
-        return hAsync("div", { class: "infinite-loading-text" }, this.loadingText);
+    if (Array.isArray(currentValue)) {
+        return currentValue.some((val) => compareOptions(val, compareValue, compareWith));
     }
-    render() {
-        const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '0ffeaebe071c7ffe8aabacf89382f402804de44c', class: {
-                [mode]: true,
-                // Used internally for styling
-                [`infinite-scroll-content-${mode}`]: true,
-            } }, hAsync("div", { key: '30a3bac66ac8230b9352223f90eb7fed56071732', class: "infinite-loading" }, this.loadingSpinner && (hAsync("div", { class: "infinite-loading-spinner" }, hAsync("ion-spinner", { name: this.loadingSpinner }))), this.loadingText !== undefined && this.renderLoadingText())));
+    else {
+        return compareOptions(currentValue, compareValue, compareWith);
     }
-    static get style() { return {
-        ios: IonInfiniteScrollContentIosStyle0,
-        md: IonInfiniteScrollContentMdStyle0
-    }; }
-    static get cmpMeta() { return {
-        "$flags$": 32,
-        "$tagName$": "ion-infinite-scroll-content",
-        "$members$": {
-            "loadingSpinner": [1025, "loading-spinner"],
-            "loadingText": [1, "loading-text"]
-        },
-        "$listeners$": undefined,
-        "$lazyBundleId$": "-",
-        "$attrsToReflect$": []
-    }; }
-}
+};
 
 /**
  * Used to update a scoped component that uses emulated slots. This fires when
@@ -20778,7 +20653,7 @@ class Input {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (hAsync(Host, { key: '40fe183aac83458bbd0cb356d539b56303b3a30f', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '7194f43a5bf2b46c67fac2eb32d8a76156ebd17f', class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -20789,14 +20664,14 @@ class Input {
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 'input-disabled': disabled,
-            }) }, hAsync("label", { key: 'faeb8ffc71552fdf438861819acebb8b77e424d0', class: "input-wrapper", htmlFor: inputId }, this.renderLabelContainer(), hAsync("div", { key: '335a71f75bf3a66501ae9112fe9142429c43a5e2', class: "native-wrapper" }, hAsync("slot", { key: '15b2affe724d6d94a47c7181b136aea8f7e66780', name: "start" }), hAsync("input", Object.assign({ key: 'd6eb3b380a5849552d102161f3ea80d5eaf5fdac', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (hAsync("button", { "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
+            }) }, hAsync("label", { key: 'c4e3dbcad69cd08ecd73bf7268936f010eb657e8', class: "input-wrapper", htmlFor: inputId }, this.renderLabelContainer(), hAsync("div", { key: '1a001341f7f57139a1b8cba8bc4eb6b0f589f3b7', class: "native-wrapper" }, hAsync("slot", { key: '9f2448b80c62ba7e5a63237d42d0a9003a321507', name: "start" }), hAsync("input", Object.assign({ key: 'b4d8b49412cb2b205813b5b534bdff754ba8168a', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (hAsync("button", { "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: this.clearTextInput }, hAsync("ion-icon", { "aria-hidden": "true", icon: mode === 'ios' ? closeCircle : closeSharp }))), hAsync("slot", { key: 'd7141ff9c868aa96a7f03e21c99e73871dcd52c1', name: "end" })), shouldRenderHighlight && hAsync("div", { class: "input-highlight" })), this.renderBottomContent()));
+            }, onClick: this.clearTextInput }, hAsync("ion-icon", { "aria-hidden": "true", icon: mode === 'ios' ? closeCircle : closeSharp }))), hAsync("slot", { key: 'f337b842a5cdbcb5db724fb036c8634580dd4464', name: "end" })), shouldRenderHighlight && hAsync("div", { class: "input-highlight" })), this.renderBottomContent()));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -21187,11 +21062,11 @@ class ItemDivider {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '3da2ad5f619a5003648574f815a97af8ddd8a09e', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '18d1b78568247bfbf0b0274971b752ace7531f58', class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'item-divider-sticky': this.sticky,
                 item: true,
-            }) }, hAsync("slot", { key: '5bef01ba4fd05517125abdcf6e2d63b74a3a1725', name: "start" }), hAsync("div", { key: 'db8cfce712acb3cd303cdee6971cabc455ff38f2', class: "item-divider-inner" }, hAsync("div", { key: '0ea5790fc725888c7a1e0c1054dfdf466dd841bf', class: "item-divider-wrapper" }, hAsync("slot", { key: 'a6a8ce179cd57e991e477a3d187bfa4500e94ab6' })), hAsync("slot", { key: 'a0ccbd9a3ca373e495cfcba8bf495821c9325e53', name: "end" }))));
+            }) }, hAsync("slot", { key: 'cbf5fe1a9f4233a303d2366d1fc032d7c445f5c7', name: "start" }), hAsync("div", { key: 'ca2608689325a350b23eb026053dd588ea3004e9', class: "item-divider-inner" }, hAsync("div", { key: '00af1d58d5fc7995754a5266534cdf989a3294eb', class: "item-divider-wrapper" }, hAsync("slot", { key: 'bfa2547fe8de49dcfbfccaeb46736182e514ffbc' })), hAsync("slot", { key: '650dd1153d211eb992e69ff7e98c381cf0555e25', name: "end" }))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -21223,7 +21098,7 @@ class ItemGroup {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'a3bd7971d409607123ba93edc009d12ad507b5d8', role: "group", class: {
+        return (hAsync(Host, { key: '2443d9e64c1867a9582a2965ed9ac78263965d70', role: "group", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`item-group-${mode}`]: true,
@@ -21291,12 +21166,12 @@ class ItemOption {
                 href: this.href,
                 target: this.target,
             };
-        return (hAsync(Host, { key: '76305b4872c9c123371f5a73b10147c0e5bd54a2', onClick: this.onClick, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '85fe8f529ab0673f1ddba299473690590a1bca88', onClick: this.onClick, class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'item-option-disabled': disabled,
                 'item-option-expandable': expandable,
                 'ion-activatable': true,
-            }) }, hAsync(TagType, Object.assign({ key: '57ee6daad58885a12e55d1249972accc3ee86c3f' }, attrs, { class: "button-native", part: "native", disabled: disabled }), hAsync("span", { key: '23a540ecdb6c807f9e1233b2a8d6e07a44824020', class: "button-inner" }, hAsync("slot", { key: 'd4eb8c79743bbb4fe4ac70016852e3dbc3453b92', name: "top" }), hAsync("div", { key: '8a47d77983dcb2e3966d28561c926d369d4fabc1', class: "horizontal-wrapper" }, hAsync("slot", { key: '1c33018344f0506fa168469e0da3493f4708a979', name: "start" }), hAsync("slot", { key: '695abb1073cb6364efb240e55886212131cc8d32', name: "icon-only" }), hAsync("slot", { key: '78e48b583eed63db749d88fc715e67ce5ad96840' }), hAsync("slot", { key: '7a5f0d31d8c41e87d5d25c30cef5561c994d2186', name: "end" })), hAsync("slot", { key: 'f42ec936824d320b25f57ca34ab3c0ee62a665ab', name: "bottom" })), mode === 'md' && hAsync("ion-ripple-effect", null))));
+            }) }, hAsync(TagType, Object.assign({ key: 'cde9bca980cb5589204017d80483baab0996586e' }, attrs, { class: "button-native", part: "native", disabled: disabled }), hAsync("span", { key: 'e2b7886b53b0b85d81fbfd9209c2989673cdb863', class: "button-inner" }, hAsync("slot", { key: 'eaf089857ff0a22d3a9c12574596002e32a28c75', name: "top" }), hAsync("div", { key: '12f5d46fe5b8b5d2a5d2bd9e4782376c5af86f1c', class: "horizontal-wrapper" }, hAsync("slot", { key: 'ba6d89b7c7f9470f73e17808f90d578fbcceba48', name: "start" }), hAsync("slot", { key: '22ad963dd37ae40c03a5723c3e3b05970f40d871', name: "icon-only" }), hAsync("slot", { key: 'a1596a1961b5757828fafaa9edf9da3381482ff3' }), hAsync("slot", { key: 'ad0d2b50de279a712e18985ce9aceda7b5d45712', name: "end" })), hAsync("slot", { key: '2940933c947f7e2d9875f0fb980aff392d5ea7fa', name: "bottom" })), mode === 'md' && hAsync("ion-ripple-effect", null))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -21343,7 +21218,7 @@ class ItemOptions {
     render() {
         const mode = getIonMode$1(this);
         const isEnd = isEndSide(this.side);
-        return (hAsync(Host, { key: '012edb4ea825e53b3385cb5995f57c660caacfa0', class: {
+        return (hAsync(Host, { key: 'ac0cec6a2ea83c9633c10bce379ffdcc99221b52', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`item-options-${mode}`]: true,
@@ -21805,7 +21680,7 @@ class ItemSliding {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '5963df2d68cfc9367b432fd047f87e884e4a07e6', class: {
+        return (hAsync(Host, { key: 'ae9da267d130e2875b2d854952b70daa739effd8', class: {
                 [mode]: true,
                 'item-sliding-active-slide': this.state !== 2 /* SlidingState.Disabled */,
                 'item-sliding-active-options-end': (this.state & 8 /* SlidingState.End */) !== 0,
@@ -21914,7 +21789,7 @@ class Label {
     render() {
         const position = this.position;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'adec21387ca76c7028dc93d457e97fa9d3822818', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '6820fe45a0aa73dca665a43f588f952e94c194c7', class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 [`label-${position}`]: position !== undefined,
@@ -21976,7 +21851,7 @@ class List {
     render() {
         const mode = getIonMode$1(this);
         const { lines, inset } = this;
-        return (hAsync(Host, { key: '9f21919ff516e4fb8b334301f09f52a90014b619', role: "list", class: {
+        return (hAsync(Host, { key: '9a0eab31e53ae22dbfa7aa58d779d3976797ea08', role: "list", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`list-${mode}`]: true,
@@ -22022,10 +21897,10 @@ class ListHeader {
     render() {
         const { lines } = this;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'a9c5da433e6185d089f019cb181adb133d7482c2', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '7b0de2d26ec09f11740ad55bba5e4d2f52623b58', class: createColorClasses$1(this.color, {
                 [mode]: true,
                 [`list-header-lines-${lines}`]: lines !== undefined,
-            }) }, hAsync("div", { key: '5dc58c39c4a4825835406468b2c51f9b4fa6b4b4', class: "list-header-inner" }, hAsync("slot", { key: '8881828c2fa11afb591eef7ab8e5f31131a884e1' }))));
+            }) }, hAsync("div", { key: '86cbae45e24ce7607b011cd3cd1ae82e741a111c', class: "list-header-inner" }, hAsync("slot", { key: 'a276c0540cd1bdd907b01620d5bfb9c996c08b90' }))));
     }
     static get style() { return {
         ios: IonListHeaderIosStyle0,
@@ -22287,9 +22162,9 @@ class Loading {
          * Otherwise, don't set aria-labelledby.
          */
         const ariaLabelledBy = message !== undefined ? msgId : null;
-        return (hAsync(Host, Object.assign({ key: '5d2364831dd5043902091255027bc9c2297b9563', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: 'e193afb8350415a30c7413db67cd81c73a394ae8', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${40000 + this.overlayIndex}`,
-            }, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), hAsync("ion-backdrop", { key: '7b2427f72d47d04cd7f9abc7204652b71e4d4298', visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { key: 'b701990fcb545f78c2ccb236822ce8c96ad4120d', tabindex: "0" }), hAsync("div", { key: '3d04466f9f19b92c4fe23848e06342cfd8b81968', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (hAsync("div", { class: "loading-spinner" }, hAsync("ion-spinner", { name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), hAsync("div", { key: '276cd44f424ac9b1e1b20f91a03fd7a4fd3f6f44', tabindex: "0" })));
+            }, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), hAsync("ion-backdrop", { key: '38d87e39091690da9927c324ab5a3f6f31755b4e', visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { key: '5a2aa46cb02fd82e56a4e7c1de27349ddab9b413', tabindex: "0" }), hAsync("div", { key: 'ef6ae86e511375ddebc03f242ae4f8952f35c530', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (hAsync("div", { class: "loading-spinner" }, hAsync("ion-spinner", { name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), hAsync("div", { key: 'da6fe0cb92d92622eb85b7edccd185c8869415e7', tabindex: "0" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -23291,14 +23166,14 @@ class Menu {
          * the ionBackButton listener in the menu controller
          * will handle closing the menu when Escape is pressed.
          */
-        return (hAsync(Host, { key: '6e19b85484a90586654e246b405dce9e04a9775c', onKeyDown: shoudUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
+        return (hAsync(Host, { key: 'c47b00136d61d7d705efadd4d2d06b87b18747a3', onKeyDown: shoudUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
                 [mode]: true,
                 [`menu-type-${type}`]: true,
                 'menu-enabled': !disabled,
                 [`menu-side-${side}`]: true,
                 'menu-pane-visible': isPaneVisible,
                 'split-pane-side': hostContext('ion-split-pane', el),
-            } }, hAsync("div", { key: '7d6a3e953e7672ba8f2c1589cdc74d5b03dbbe5a', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, hAsync("slot", { key: '0a7838ed4b96822ccac6c8208d1c593d55f655db' })), hAsync("ion-backdrop", { key: '28cb687d95991a2d84be7c2bf7d5d9074737363f', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
+            } }, hAsync("div", { key: '829d5332be865b5aab6435e6a7c8872c7fb89b52', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, hAsync("slot", { key: '5b47ee5da8238ec15d7371606cfbc3d384588ebb' })), hAsync("ion-backdrop", { key: '58bc53f971865fd1615f267cd0259584b3045486', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -23401,7 +23276,7 @@ class MenuButton {
             type: this.type,
         };
         const ariaLabel = inheritedAttributes['aria-label'] || 'menu';
-        return (hAsync(Host, { key: '1d32df4ca693234c0c70c3612663404a09c81d24', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: '3cdbc04925c8c62ac65763fe83efdfffda0a16fa', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, class: createColorClasses$1(color, {
                 [mode]: true,
                 button: true, // ion-buttons target .button
                 'menu-button-hidden': hidden,
@@ -23410,7 +23285,7 @@ class MenuButton {
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'ion-activatable': true,
                 'ion-focusable': true,
-            }) }, hAsync("button", Object.assign({ key: '8fe883b3b429eed4bdaae7c111233b2f733e185f' }, attrs, { disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }), hAsync("span", { key: '9e9bcddcabe55a5f674c997d27ca5b83f473efc5', class: "button-inner" }, hAsync("slot", { key: '8bc82bebc02041e25cbac7978b44a897a3dd8ecd' }, hAsync("ion-icon", { key: 'bc39727bccfb722662f01020e878bdf827460352', part: "icon", icon: menuIcon, mode: mode, lazy: false, "aria-hidden": "true" }))), mode === 'md' && hAsync("ion-ripple-effect", { type: "unbounded" }))));
+            }) }, hAsync("button", Object.assign({ key: '63db22c49359bf77fa344f5a13b733570ff088a4' }, attrs, { disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }), hAsync("span", { key: '011af3fa930dd888f7f4aca24ba294d23b2ceba7', class: "button-inner" }, hAsync("slot", { key: 'dc75fd2f1f3d42eb30aefd9cd3ef137d6c8a515a' }, hAsync("ion-icon", { key: '55cfdc7df1eab0bdc386e2a5c90be87be56a000a', part: "icon", icon: menuIcon, mode: mode, lazy: false, "aria-hidden": "true" }))), mode === 'md' && hAsync("ion-ripple-effect", { type: "unbounded" }))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -23459,10 +23334,10 @@ class MenuToggle {
     render() {
         const mode = getIonMode$1(this);
         const hidden = this.autoHide && !this.visible;
-        return (hAsync(Host, { key: '3ad627ff07ef341638c57706fe62326bd0c93a98', onClick: this.onClick, "aria-hidden": hidden ? 'true' : null, class: {
+        return (hAsync(Host, { key: 'fa7f54b6264dd2110f4cda34aaa6ea7ec4f5040f', onClick: this.onClick, "aria-hidden": hidden ? 'true' : null, class: {
                 [mode]: true,
                 'menu-toggle-hidden': hidden,
-            } }, hAsync("slot", { key: '07996ebbef7d40aa1787a95ea49e81b07391a15e' })));
+            } }, hAsync("slot", { key: '6e1701d21f439cabd9f83607c500eb6111162447' })));
     }
     static get style() { return IonMenuToggleStyle0; }
     static get cmpMeta() { return {
@@ -23536,9 +23411,23 @@ const transition = (opts) => {
         });
     });
 };
+const LAST_FOCUS = 'ion-last-focus';
 const beforeTransition = (opts) => {
     const enteringEl = opts.enteringEl;
     const leavingEl = opts.leavingEl;
+    const focusManagerEnabled = config.get('experimentalFocusManagerPriority', false);
+    /**
+     * When going back to a previously visited page
+     * focus should typically be moved back to the
+     * element that was last focused when the user
+     * was on this view.
+     */
+    if (focusManagerEnabled) {
+        const activeEl = document.activeElement;
+        if (activeEl !== null && (leavingEl === null || leavingEl === void 0 ? void 0 : leavingEl.contains(activeEl))) {
+            activeEl.setAttribute(LAST_FOCUS, 'true');
+        }
+    }
     setZIndex(enteringEl, leavingEl, opts.direction);
     if (opts.showGoBack) {
         enteringEl.classList.add('can-go-back');
@@ -23564,6 +23453,24 @@ const runTransition = async (opts) => {
     const ani = animationBuilder && Build.isBrowser ? animation(animationBuilder, opts) : noAnimation(opts); // fast path for no animation
     return ani;
 };
+/**
+ * Moves focus to a specified element.
+ * Note that we do not remove the tabindex
+ * because that can result in an unintentional
+ * blur. Non-focusables can't be focused, so the
+ * body will get focused again.
+ */
+const moveFocus = (el) => {
+    el.tabIndex = -1;
+    el.focus();
+};
+/**
+ * Elements that are hidden using `display: none` should
+ * not be focused even if they are present in the DOM.
+ */
+const isVisible = (el) => {
+    return el.offsetParent !== null;
+};
 const afterTransition = (opts) => {
     const enteringEl = opts.enteringEl;
     const leavingEl = opts.leavingEl;
@@ -23573,6 +23480,69 @@ const afterTransition = (opts) => {
         leavingEl.classList.remove('ion-page-invisible');
         leavingEl.style.removeProperty('pointer-events');
     }
+    const focusManagerPriorities = config.get('experimentalFocusManagerPriority', false);
+    if (Array.isArray(focusManagerPriorities) && !enteringEl.contains(document.activeElement)) {
+        /**
+         * When going back to a previously visited view
+         * focus should always be moved back to the element
+         * that the user was last focused on when they were on this view.
+         */
+        const lastFocus = enteringEl.querySelector(`[${LAST_FOCUS}]`);
+        if (lastFocus && isVisible(lastFocus)) {
+            moveFocus(lastFocus);
+            return;
+        }
+        for (const priority of focusManagerPriorities) {
+            switch (priority) {
+                case 'content':
+                    /**
+                     * If no level one heading exists then we should at least focus the
+                     * header so focus starts at the top of the page.
+                     */
+                    const content = enteringEl.querySelector('main, [role="main"]');
+                    if (content && isVisible(content)) {
+                        moveFocus(content);
+                        return;
+                    }
+                    break;
+                case 'heading':
+                    /**
+                     * If no last focus exists then we should prefer to focus
+                     * level one headings. We do not prioritize the header yet
+                     * because the header can have non-title elements such as
+                     * a back button which is not necessarily helpful
+                     * to focus first.
+                     */
+                    const headingOne = enteringEl.querySelector('h1, [role="heading"][aria-level="1"]');
+                    if (headingOne && isVisible(headingOne)) {
+                        moveFocus(headingOne);
+                        return;
+                    }
+                    break;
+                case 'banner':
+                    /**
+                     * If no level one heading exists then we should at least focus the
+                     * header so focus starts at the top of the page.
+                     */
+                    const header = enteringEl.querySelector('header, [role="banner"]');
+                    if (header && isVisible(header)) {
+                        moveFocus(header);
+                        return;
+                    }
+                    break;
+                default:
+                    printIonWarning(`Unrecognized focus manager priority value ${priority}`);
+                    break;
+            }
+        }
+        /**
+         * If there is no header then focus the page
+         * so focus at least moves to the correct view.
+         * The browser will then determine where within the
+         * page to move focus to.
+         */
+        moveFocus(enteringEl);
+    }
 };
 const getAnimationBuilder = async (opts) => {
     if (!opts.leavingEl || !opts.animated || opts.duration === 0) {
@@ -23605,7 +23575,16 @@ const animation = async (animationBuilder, opts) => {
 const noAnimation = async (opts) => {
     const enteringEl = opts.enteringEl;
     const leavingEl = opts.leavingEl;
-    await waitForReady(opts, false);
+    const focusManagerEnabled = config.get('experimentalFocusManagerPriority', false);
+    /**
+     * If the focus manager is enabled then we
+     * need to wait for Ionic components to be rendered
+     * otherwise the correct component to focus may not
+     * be focused because it is still hidden.
+     * However, if the manager is not enabled
+     * then there's no need to wait since there will be no animation.
+     */
+    await waitForReady(opts, focusManagerEnabled);
     fireWillEvents(enteringEl, leavingEl);
     fireDidEvents(enteringEl, leavingEl);
     return {
@@ -25286,9 +25265,9 @@ class Modal {
         const mode = getIonMode$1(this);
         const isCardModal = presentingElement !== undefined && mode === 'ios';
         const isHandleCycle = handleBehavior === 'cycle';
-        return (hAsync(Host, Object.assign({ key: 'f4bdd3d7d25d19b1210baf5544b243e466269dbb', "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: 'd5619b83430689b05282ea7507b8027fbef2cdc5', "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle }), hAsync("ion-backdrop", { key: 'f894b40577b1c13edca0bcb16a6f9381afc45dc8', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && hAsync("div", { class: "modal-shadow" }), hAsync("div", Object.assign({ key: '5bcf69fee6c963fb86af23e7c04b7e0fb232dec1',
+            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle }), hAsync("ion-backdrop", { key: 'db27a855c1a123d634b81f3176807d1aedc0deb8', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && hAsync("div", { class: "modal-shadow" }), hAsync("div", Object.assign({ key: '6756bb8872a5f5abba75ed00e2f66e987f7ad0ed',
             /*
               role and aria-modal must be used on the
               same element. They must also be set inside the
@@ -25297,7 +25276,7 @@ class Modal {
             */
             role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (hAsync("button", { class: "modal-handle",
             // Prevents the handle from receiving keyboard focus when it does not cycle
-            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle" })), hAsync("slot", { key: '28b8bf957fb2dc4ca33362e61658802a01da7aa5' }))));
+            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle" })), hAsync("slot", { key: '72dac7b1071ba85cd039eaa811de95cbdd9dd50e' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -26245,7 +26224,7 @@ class Nav {
         }
     }
     render() {
-        return hAsync("slot", { key: '028761c76160108a3fce9a47445d463966c80453' });
+        return hAsync("slot", { key: 'a86e551f86509bd65200393785e4000dbb37154a' });
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -26318,7 +26297,7 @@ class NavLink {
         this.routerAnimation = undefined;
     }
     render() {
-        return hAsync(Host, { key: 'cdb5666c031c04912fea52ef73e6b18df3881555', onClick: this.onClick });
+        return hAsync(Host, { key: '7b6b746a0e945a48b308eec2dcd9893daf00bca1', onClick: this.onClick });
     }
     get el() { return getElement(this); }
     static get cmpMeta() { return {
@@ -26352,9 +26331,9 @@ class Note {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '99db21e5e1eb52bf3ec58e3d52ee49aee3a2f12f', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '83fbede35bbb772419d68f6ad398aab0e00b9f61', class: createColorClasses$1(this.color, {
                 [mode]: true,
-            }) }, hAsync("slot", { key: 'e9f370f4b622cafd4452a2de81e0f2f6833f6483' })));
+            }) }, hAsync("slot", { key: 'c4060ce2439e96a5ac8763843579b7956a90032f' })));
     }
     static get style() { return {
         ios: IonNoteIosStyle0,
@@ -26851,7 +26830,7 @@ class Picker$1 {
         this.emitInputModeChange();
     }
     render() {
-        return (hAsync(Host, { key: '69a87b004f01d3c85818c24550d71ab8b1217574', onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, hAsync("input", { key: '42f208ad6693b223150d175855a4e3a940fcbf8a', "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", onKeyDown: (ev) => {
+        return (hAsync(Host, { key: '56b1421dee69c5aa7521b70199f047f4033c0a94', onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, hAsync("input", { key: '6956b6ee5debbad88e90d8b307833a4c112cabfb', "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", onKeyDown: (ev) => {
                 var _a;
                 /**
                  * The "Enter" key represents
@@ -26866,7 +26845,7 @@ class Picker$1 {
                 if (ev.key === 'Enter') {
                     (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.blur();
                 }
-            }, ref: (el) => (this.inputEl = el), onInput: () => this.onInputChange(), onBlur: () => this.exitInputMode() }), hAsync("div", { key: 'c3a20925dae51059cdbce7c3aa78789591de36e9', class: "picker-before" }), hAsync("div", { key: '0a949c776a3c5d83feb7eca32ec85f6e26aab1b8', class: "picker-after" }), hAsync("div", { key: '80e96a86a89bc223faf65badf66a56c971c846aa', class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), hAsync("slot", { key: '5110775b45ddf3ad8cce397b910063fdea173409' })));
+            }, ref: (el) => (this.inputEl = el), onInput: () => this.onInputChange(), onBlur: () => this.exitInputMode() }), hAsync("div", { key: 'b6acaac9ed883ab1db90a09f7ef3c15feb8fa38b', class: "picker-before" }), hAsync("div", { key: '76a49ca1b135f5fdd31a6230053af1f58d0d7dd1', class: "picker-after" }), hAsync("div", { key: '1e265527d12ffd6dc005133ac7fcfc2a1e02c7c3', class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), hAsync("slot", { key: '828077cb8f6a8061d3509aca018d7b06d3e98130' })));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -27106,11 +27085,11 @@ class Picker {
     render() {
         const { htmlAttributes } = this;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, Object.assign({ key: 'b1b2f0d491fc0b59041d144be8870169b10e8529', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: '285d317ac7974e6c74003f5f5ebef0e1e09a1872', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
             }, class: Object.assign({ [mode]: true,
                 // Used internally for styling
-                [`picker-${mode}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), hAsync("ion-backdrop", { key: '30206f6cb8bf78e77d70b1a5a55c98816e4b26c9', visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { key: '81caa516d1979547b8f445b37c5c7df0ca7df4f7', tabindex: "0" }), hAsync("div", { key: '8e9dc143b08d001e10782623285982731dfae340', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, hAsync("div", { key: '1a4a575aeab5e1a7141017d8320904fd845d1194', class: "picker-toolbar" }, this.buttons.map((b) => (hAsync("div", { class: buttonWrapperClass(b) }, hAsync("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass$1(b) }, b.text))))), hAsync("div", { key: '05ce738087ecc977dcb17a5df36a6a24b2d2f62c', class: "picker-columns" }, hAsync("div", { key: '8854060f78d134d112a9df3eb69f0e487c5b335c', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => hAsync("ion-picker-legacy-column", { col: c })), hAsync("div", { key: '8ebe4bbc2ddd3bb67342d74fe9a1c91b6decff0c', class: "picker-below-highlight" }))), hAsync("div", { key: '0080733df3680cf199cd6c9a05d2a91a0a72785c', tabindex: "0" })));
+                [`picker-${mode}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), hAsync("ion-backdrop", { key: 'fea748f9be58118b5d44a4ec951d8b269a6ef4ff', visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { key: '331c557b055b3fd3e1bd0ebed18045881a4202bf', tabindex: "0" }), hAsync("div", { key: '721efa169849e204d021abfaca6ba8d3f2314192', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, hAsync("div", { key: 'dddc0d894e246eb9d68621ed8cb1635b767367a7', class: "picker-toolbar" }, this.buttons.map((b) => (hAsync("div", { class: buttonWrapperClass(b) }, hAsync("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass$1(b) }, b.text))))), hAsync("div", { key: '6ddbfc93dc0fae1f152c5bfbed11c71120e1a90d', class: "picker-columns" }, hAsync("div", { key: '48cae995a7ef7e15e815b8513d0d00b18f909b31', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => hAsync("ion-picker-legacy-column", { col: c })), hAsync("div", { key: '801a673e5dd04c56e195d1285b56c69b97300d3a', class: "picker-below-highlight" }))), hAsync("div", { key: '7caa3cf1d94226184d9f7ab857962a80b53a3638', tabindex: "0" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -27524,14 +27503,14 @@ class PickerColumn {
     render() {
         const { color, disabled, isActive, numericInput } = this;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '4803f7215ee2272e74d76b562553098dc4e2f0bc', class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: '22dcc8dc9bc8c6035cba9f8825f231797464c652', class: createColorClasses$1(color, {
                 [mode]: true,
                 ['picker-column-active']: isActive,
                 ['picker-column-numeric-input']: numericInput,
                 ['picker-column-disabled']: disabled,
-            }) }, hAsync("slot", { key: 'f486e4903f7818021c8d02e3251300ef0bd64e7f', name: "prefix" }), hAsync("div", { key: '3f0f2c4e77b1bd55b425235fa428c95c793d65ba', class: "picker-opts", tabindex: disabled ? undefined : 0, ref: (el) => {
+            }) }, hAsync("slot", { key: 'e93c2d8ea862e2d84ae9338ad2cbec0eea2230f8', name: "prefix" }), hAsync("div", { key: 'a981c29b3cd9456b7f2523d1daa4d1797d389f03', class: "picker-opts", tabindex: disabled ? undefined : 0, ref: (el) => {
                 this.scrollEl = el;
-            } }, hAsync("div", { key: '84a373222f1e2084312de67781bdf72f6b40a9e9', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: '948311d8ea52ff1ead1e52c27a2d959164cb9b67', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: '7cf18267fda32b762bf20f7213810bc800136a4f', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("slot", { key: 'c068963fd65ea1eb70e2fc3dc8125c6b4deff68d' }), hAsync("div", { key: '63442e50269c3266c907d525e66782c8e753af60', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: '4f18258bd9f1822725420208491315b970d19aff', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: '5d1d3e37d88872284a756ab63078943f732d2293', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), hAsync("slot", { key: '7c68b8237cc1a3954d174df34aa3ab2797466a38', name: "suffix" })));
+            } }, hAsync("div", { key: 'd80da940ecb2d8cea236ef9c74da1871a7ab6248', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: '2b05ef9d4116ca7940c3b61454517c02ee40bf9e', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: 'a557a7fb595d3bec5e0bd76b10f73cdc93b17bff', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("slot", { key: '4934b827a0b11dfcb2cb9a49740076609ab86f59' }), hAsync("div", { key: 'f89592da27eb54e88e9a977aa4ecd9dc4d8e211d', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: '87c0cf79ce3b88c2328256ee6895612327653009', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: '24e96271c3e7468cc3cc5a6f3e384740c4fd9988', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), hAsync("slot", { key: '2ed210e571787a88c06d7538cb7082875e85fb28', name: "suffix" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -27896,9 +27875,9 @@ class PickerColumnCmp {
     render() {
         const col = this.col;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'e842db5f435d9f36ef0842ddcafa3e6d56cc520c', class: Object.assign({ [mode]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, getClassMap(col.cssClass)), style: {
+        return (hAsync(Host, { key: '0337ac8379be177501b8d61f0ac0f68ecbb8344d', class: Object.assign({ [mode]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, getClassMap(col.cssClass)), style: {
                 'max-width': this.col.columnWidth,
-            } }, col.prefix && (hAsync("div", { class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), hAsync("div", { key: 'd83fd959cd305d29cd290f3aefef6798e5513dfb', class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (hAsync("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (hAsync("div", { class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
+            } }, col.prefix && (hAsync("div", { class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), hAsync("div", { key: '013ba8ea1c2fe4fe717386b9cc87484913c234f7', class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (hAsync("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (hAsync("div", { class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -28002,10 +27981,10 @@ class PickerColumnOption {
     render() {
         const { color, disabled, ariaLabel } = this;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '0102aba4c6c362a08545215d1506bffff3f342d5', class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: '1d5358c019c01ca429ddb514b9f9b67a3c89f652', class: createColorClasses$1(color, {
                 [mode]: true,
                 ['option-disabled']: disabled,
-            }) }, hAsync("button", { key: '4307265b10685818fecfdf6dcbd8a4664577a6f3', tabindex: "-1", "aria-label": ariaLabel, disabled: disabled, onClick: () => this.onClick() }, hAsync("slot", { key: '086f60906f81fed1f6631c411eb339c3ec489e6c' }))));
+            }) }, hAsync("button", { key: 'c86794a15b61062a886c6f5113723ccd98238e9f', tabindex: "-1", "aria-label": ariaLabel, disabled: disabled, onClick: () => this.onClick() }, hAsync("slot", { key: 'ab7f80cacdd39b5aedf7d2cc8eddc6288093629a' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -29313,9 +29292,9 @@ class Popover {
         const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes } = this;
         const desktop = isPlatform('desktop');
         const enableArrow = arrow && !parentPopover;
-        return (hAsync(Host, Object.assign({ key: '5c65659c22a8190ac3f7488fe97b8fe3545bb32a', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: '6b555de5f10a00551cd14a8065ffee388c6e218a', "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, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && hAsync("ion-backdrop", { tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), hAsync("div", { key: '6055fc5309dadb56d6c17f0a1cb19631e6e5731e', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && hAsync("div", { class: "popover-arrow", part: "arrow" }), hAsync("div", { key: '71f67c60fee7a29c2883c0350f19493793527be9', class: "popover-content", part: "content" }, hAsync("slot", { key: '8fdf91d4c5ae7db8be34bfd03f703b613c73d64f' })))));
+            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && hAsync("ion-backdrop", { tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), hAsync("div", { key: 'ecf8280d3119a3e7104ff10bdaebbe3a4a7d1579', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && hAsync("div", { class: "popover-arrow", part: "arrow" }), hAsync("div", { key: '0701cb732704fe84255c78114f61a19b7e431a17', class: "popover-content", part: "content" }, hAsync("slot", { key: '213fdc42677814157aa573855e6db4c4a0052161' })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -29406,7 +29385,7 @@ class ProgressBar {
         const mode = getIonMode$1(this);
         // If the progress is displayed as a solid bar.
         const progressSolid = buffer === 1;
-        return (hAsync(Host, { key: '56492aa6ed11b803c68a3cc3dbe65871b77af53a', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: '78a32304c7164cb78145a91be7bb9b86ecd11b66', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses$1(color, {
                 [mode]: true,
                 [`progress-bar-${type}`]: true,
                 'progress-paused': paused,
@@ -29563,7 +29542,7 @@ class Radio {
         const { checked, disabled, color, el, justify, labelPlacement, hasLabel, buttonTabindex, alignment } = this;
         const mode = getIonMode$1(this);
         const inItem = hostContext('ion-item', el);
-        return (hAsync(Host, { key: '5ec600f0eb6e0fb1843d1c9960bd4632a162f2de', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: '46bb0202f75b6cc81df10de71fbe971dc4dcaa68', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses$1(color, {
                 [mode]: true,
                 'in-item': inItem,
                 'radio-checked': checked,
@@ -29574,10 +29553,10 @@ class Radio {
                 // 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 }, hAsync("label", { key: '4da2ed7feadcad1ede7c32a0c6a9558339221ef8', class: "radio-wrapper" }, hAsync("div", { key: '2190f49a40c13bfc3033fa26d7532a1469dffeae', class: {
+            }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, hAsync("label", { key: '55061e8cc857752d963c9e4a65f46727f5c2cd9d', class: "radio-wrapper" }, hAsync("div", { key: '589fd41fccd0e6d007e7bc502067f3f2447e4b80', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label" }, hAsync("slot", { key: 'a0678ee1668f618492d54b2bff3f95927fbfb53d' })), hAsync("div", { key: '93eb5e7188f4dd4490d1194a4017ea5546567ea0', class: "native-wrapper" }, this.renderRadioControl()))));
+            }, part: "label" }, hAsync("slot", { key: '0076f1f3b64c1a0cf2bc511424956a63d6cf2db9' })), hAsync("div", { key: '1505a84e6dc8715f8fcb19ce94fab79e624a0622', class: "native-wrapper" }, this.renderRadioControl()))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -29762,7 +29741,7 @@ class RadioGroup {
         const { label, labelId, el, name, value } = this;
         const mode = getIonMode$1(this);
         renderHiddenInput(true, el, name, value, false);
-        return hAsync(Host, { key: 'a8b4c4531f129467641e0916471c9bc95d0706da', role: "radiogroup", "aria-labelledby": label ? labelId : null, onClick: this.onClick, class: mode });
+        return hAsync(Host, { key: '3d43aa6696c5293b49fc44cf91e3e41c4f4d12df', role: "radiogroup", "aria-labelledby": label ? labelId : null, onClick: this.onClick, class: mode });
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -29826,10 +29805,10 @@ function roundToMaxDecimalPlaces(n, ...references) {
     return Number(n.toFixed(maxPlaces));
 }
 
-const rangeIosCss = "/*!@:host*/.sc-ion-range-ios-h{--knob-handle-size:calc(var(--knob-size) * 2);display:-ms-flexbox;display:flex;position:relative;-ms-flex:3;flex:3;-ms-flex-align:center;align-items:center;font-family:var(--ion-font-family, inherit);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2}/*!@:host(.range-disabled)*/.range-disabled.sc-ion-range-ios-h{pointer-events:none}/*!@::slotted(ion-label)*/.sc-ion-range-ios-s>ion-label{-ms-flex:initial;flex:initial}/*!@::slotted(ion-icon[slot])*/.sc-ion-range-ios-s>ion-icon[slot]{font-size:24px}/*!@.range-slider*/.range-slider.sc-ion-range-ios{position:relative;-ms-flex:1;flex:1;width:100%;height:var(--height);contain:size layout style;cursor:-webkit-grab;cursor:grab;-ms-touch-action:pan-y;touch-action:pan-y}/*!@:host(.range-pressed) .range-slider*/.range-pressed.sc-ion-range-ios-h .range-slider.sc-ion-range-ios{cursor:-webkit-grabbing;cursor:grabbing}/*!@.range-pin*/.range-pin.sc-ion-range-ios{position:absolute;background:var(--ion-color-base);color:var(--ion-color-contrast);text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box}/*!@.range-knob-handle*/.range-knob-handle.sc-ion-range-ios{top:calc((var(--height) - var(--knob-handle-size)) / 2);-webkit-margin-start:calc(0px - var(--knob-handle-size) / 2);margin-inline-start:calc(0px - var(--knob-handle-size) / 2);display:-ms-flexbox;display:flex;position:absolute;-ms-flex-pack:center;justify-content:center;width:var(--knob-handle-size);height:var(--knob-handle-size);text-align:center}/*!@.range-knob-handle*/.range-knob-handle.sc-ion-range-ios{inset-inline-start:0}/*!@:host-context([dir=rtl]) .range-knob-handle*/[dir=rtl].sc-ion-range-ios-h .range-knob-handle.sc-ion-range-ios,[dir=rtl] .sc-ion-range-ios-h .range-knob-handle.sc-ion-range-ios{left:unset}/*!@[dir=rtl] .range-knob-handle*/[dir=rtl].sc-ion-range-ios .range-knob-handle.sc-ion-range-ios{left:unset}@supports selector(:dir(rtl)){/*!@.range-knob-handle:dir(rtl)*/.range-knob-handle.sc-ion-range-ios:dir(rtl){left:unset}}/*!@.range-knob-handle:active, .range-knob-handle:focus*/.range-knob-handle.sc-ion-range-ios:active,.range-knob-handle.sc-ion-range-ios:focus{outline:none}/*!@.range-bar-container*/.range-bar-container.sc-ion-range-ios{border-radius:var(--bar-border-radius);top:calc((var(--height) - var(--bar-height)) / 2);position:absolute;width:100%;height:var(--bar-height)}/*!@.range-bar-container*/.range-bar-container.sc-ion-range-ios{inset-inline-start:0}/*!@:host-context([dir=rtl]) .range-bar-container*/[dir=rtl].sc-ion-range-ios-h .range-bar-container.sc-ion-range-ios,[dir=rtl] .sc-ion-range-ios-h .range-bar-container.sc-ion-range-ios{left:unset}/*!@[dir=rtl] .range-bar-container*/[dir=rtl].sc-ion-range-ios .range-bar-container.sc-ion-range-ios{left:unset}@supports selector(:dir(rtl)){/*!@.range-bar-container:dir(rtl)*/.range-bar-container.sc-ion-range-ios:dir(rtl){left:unset}}/*!@.range-bar*/.range-bar.sc-ion-range-ios{border-radius:var(--bar-border-radius);position:absolute;width:100%;height:var(--bar-height);background:var(--bar-background);pointer-events:none}/*!@.range-knob*/.range-knob.sc-ion-range-ios{border-radius:var(--knob-border-radius);top:calc(50% - var(--knob-size) / 2);position:absolute;width:var(--knob-size);height:var(--knob-size);background:var(--knob-background);-webkit-box-shadow:var(--knob-box-shadow);box-shadow:var(--knob-box-shadow);z-index:2;pointer-events:none}/*!@.range-knob*/.range-knob.sc-ion-range-ios{inset-inline-start:calc(50% - var(--knob-size) / 2)}/*!@:host-context([dir=rtl]) .range-knob*/[dir=rtl].sc-ion-range-ios-h .range-knob.sc-ion-range-ios,[dir=rtl] .sc-ion-range-ios-h .range-knob.sc-ion-range-ios{left:unset}/*!@[dir=rtl] .range-knob*/[dir=rtl].sc-ion-range-ios .range-knob.sc-ion-range-ios{left:unset}@supports selector(:dir(rtl)){/*!@.range-knob:dir(rtl)*/.range-knob.sc-ion-range-ios:dir(rtl){left:unset}}/*!@:host(.range-pressed) .range-bar-active*/.range-pressed.sc-ion-range-ios-h .range-bar-active.sc-ion-range-ios{will-change:left, right}/*!@:host(.in-item)*/.in-item.sc-ion-range-ios-h{width:100%}/*!@:host([slot=start]),\n:host([slot=end])*/[slot=start].sc-ion-range-ios-h,[slot=end].sc-ion-range-ios-h{width:auto}/*!@:host(.in-item) ::slotted(ion-label)*/.sc-ion-range-ios-h.in-item .sc-ion-range-ios-s>ion-label{-ms-flex-item-align:center;align-self:center}/*!@.range-wrapper*/.range-wrapper.sc-ion-range-ios{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;height:inherit}/*!@::slotted([slot=label])*/.sc-ion-range-ios-s>[slot=label]{max-width:200px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}/*!@.label-text-wrapper-hidden*/.label-text-wrapper-hidden.sc-ion-range-ios{display:none}/*!@.native-wrapper*/.native-wrapper.sc-ion-range-ios{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center}/*!@:host(.range-label-placement-start) .range-wrapper*/.range-label-placement-start.sc-ion-range-ios-h .range-wrapper.sc-ion-range-ios{-ms-flex-direction:row;flex-direction:row}/*!@:host(.range-label-placement-start) .label-text-wrapper*/.range-label-placement-start.sc-ion-range-ios-h .label-text-wrapper.sc-ion-range-ios{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}/*!@:host(.range-label-placement-end) .range-wrapper*/.range-label-placement-end.sc-ion-range-ios-h .range-wrapper.sc-ion-range-ios{-ms-flex-direction:row-reverse;flex-direction:row-reverse}/*!@:host(.range-label-placement-end) .label-text-wrapper*/.range-label-placement-end.sc-ion-range-ios-h .label-text-wrapper.sc-ion-range-ios{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0}/*!@:host(.range-label-placement-fixed) .label-text-wrapper*/.range-label-placement-fixed.sc-ion-range-ios-h .label-text-wrapper.sc-ion-range-ios{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}/*!@:host(.range-label-placement-fixed) .label-text-wrapper*/.range-label-placement-fixed.sc-ion-range-ios-h .label-text-wrapper.sc-ion-range-ios{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}/*!@:host(.range-label-placement-stacked) .range-wrapper*/.range-label-placement-stacked.sc-ion-range-ios-h .range-wrapper.sc-ion-range-ios{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:stretch;align-items:stretch}/*!@:host(.range-label-placement-stacked) .label-text-wrapper*/.range-label-placement-stacked.sc-ion-range-ios-h .label-text-wrapper.sc-ion-range-ios{-webkit-transform-origin:left top;transform-origin:left top;-webkit-transform:scale(0.75);transform:scale(0.75);margin-left:0;margin-right:0;margin-bottom:16px;max-width:calc(100% / 0.75)}/*!@:host-context([dir=rtl]):host(.range-label-placement-stacked) .label-text-wrapper, :host-context([dir=rtl]).range-label-placement-stacked .label-text-wrapper*/[dir=rtl].sc-ion-range-ios-h -no-combinator.range-label-placement-stacked.sc-ion-range-ios-h .label-text-wrapper.sc-ion-range-ios,[dir=rtl] .sc-ion-range-ios-h -no-combinator.range-label-placement-stacked.sc-ion-range-ios-h .label-text-wrapper.sc-ion-range-ios,[dir=rtl].range-label-placement-stacked.sc-ion-range-ios-h .label-text-wrapper.sc-ion-range-ios,[dir=rtl] .range-label-placement-stacked.sc-ion-range-ios-h .label-text-wrapper.sc-ion-range-ios{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){/*!@:host(.range-label-placement-stacked:dir(rtl)) .label-text-wrapper*/.range-label-placement-stacked.sc-ion-range-ios-h:dir(rtl) .label-text-wrapper.sc-ion-range-ios{-webkit-transform-origin:right top;transform-origin:right top}}/*!@:host(.in-item.range-label-placement-stacked) .label-text-wrapper*/.in-item.range-label-placement-stacked.sc-ion-range-ios-h .label-text-wrapper.sc-ion-range-ios{margin-top:10px;margin-bottom:16px}/*!@:host(.in-item.range-label-placement-stacked) .native-wrapper*/.in-item.range-label-placement-stacked.sc-ion-range-ios-h .native-wrapper.sc-ion-range-ios{margin-bottom:0px}/*!@:host*/.sc-ion-range-ios-h{--knob-border-radius:50%;--knob-background:#ffffff;--knob-box-shadow:0px 0.5px 4px rgba(0, 0, 0, 0.12), 0px 6px 13px rgba(0, 0, 0, 0.12);--knob-size:26px;--bar-height:4px;--bar-background:var(--ion-color-step-900, var(--ion-background-color-step-900, #e6e6e6));--bar-background-active:var(--ion-color-primary, #0054e9);--bar-border-radius:2px;--height:42px}/*!@:host(.legacy-range)*/.legacy-range.sc-ion-range-ios-h{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:8px;padding-bottom:8px}/*!@:host(.range-item-start-adjustment)*/.range-item-start-adjustment.sc-ion-range-ios-h{-webkit-padding-start:24px;padding-inline-start:24px}/*!@:host(.range-item-end-adjustment)*/.range-item-end-adjustment.sc-ion-range-ios-h{-webkit-padding-end:24px;padding-inline-end:24px}/*!@:host(.ion-color) .range-bar-active,\n:host(.ion-color) .range-tick-active*/.ion-color.sc-ion-range-ios-h .range-bar-active.sc-ion-range-ios,.ion-color.sc-ion-range-ios-h .range-tick-active.sc-ion-range-ios{background:var(--ion-color-base)}/*!@::slotted([slot=start])*/.sc-ion-range-ios-s>[slot=start]{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}/*!@::slotted([slot=end])*/.sc-ion-range-ios-s>[slot=end]{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0}/*!@:host(.range-has-pin:not(.range-label-placement-stacked))*/.range-has-pin.sc-ion-range-ios-h:not(.range-label-placement-stacked){padding-top:calc(8px + 0.75rem)}/*!@:host(.range-has-pin.range-label-placement-stacked) .label-text-wrapper*/.range-has-pin.range-label-placement-stacked.sc-ion-range-ios-h .label-text-wrapper.sc-ion-range-ios{margin-bottom:calc(8px + 0.75rem)}/*!@.range-bar-active*/.range-bar-active.sc-ion-range-ios{bottom:0;width:auto;background:var(--bar-background-active)}/*!@.range-bar-active.has-ticks*/.range-bar-active.has-ticks.sc-ion-range-ios{border-radius:0;-webkit-margin-start:-2px;margin-inline-start:-2px;-webkit-margin-end:-2px;margin-inline-end:-2px}/*!@.range-tick*/.range-tick.sc-ion-range-ios{-webkit-margin-start:-2px;margin-inline-start:-2px;border-radius:0;position:absolute;top:17px;width:4px;height:8px;background:var(--ion-color-step-900, var(--ion-background-color-step-900, #e6e6e6));pointer-events:none}/*!@.range-tick-active*/.range-tick-active.sc-ion-range-ios{background:var(--bar-background-active)}/*!@.range-pin*/.range-pin.sc-ion-range-ios{-webkit-transform:translate3d(0,  100%,  0) scale(0.01);transform:translate3d(0,  100%,  0) scale(0.01);-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:8px;padding-bottom:8px;min-width:28px;-webkit-transition:-webkit-transform 120ms ease;transition:-webkit-transform 120ms ease;transition:transform 120ms ease;transition:transform 120ms ease, -webkit-transform 120ms ease;background:transparent;color:var(--ion-text-color, #000);font-size:0.75rem;text-align:center}/*!@.range-knob-pressed .range-pin,\n.range-knob-handle.ion-focused .range-pin*/.range-knob-pressed.sc-ion-range-ios .range-pin.sc-ion-range-ios,.range-knob-handle.ion-focused.sc-ion-range-ios .range-pin.sc-ion-range-ios{-webkit-transform:translate3d(0, calc(-100% + 11px), 0) scale(1);transform:translate3d(0, calc(-100% + 11px), 0) scale(1)}/*!@:host(.range-disabled)*/.range-disabled.sc-ion-range-ios-h{opacity:0.3}";
+const rangeIosCss = "/*!@:host*/.sc-ion-range-ios-h{--knob-handle-size:calc(var(--knob-size) * 2);display:-ms-flexbox;display:flex;position:relative;-ms-flex:3;flex:3;-ms-flex-align:center;align-items:center;font-family:var(--ion-font-family, inherit);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2}/*!@:host(.range-disabled)*/.range-disabled.sc-ion-range-ios-h{pointer-events:none}/*!@::slotted(ion-label)*/.sc-ion-range-ios-s>ion-label{-ms-flex:initial;flex:initial}/*!@::slotted(ion-icon[slot])*/.sc-ion-range-ios-s>ion-icon[slot]{font-size:24px}/*!@.range-slider*/.range-slider.sc-ion-range-ios{position:relative;-ms-flex:1;flex:1;width:100%;height:var(--height);contain:size layout style;cursor:-webkit-grab;cursor:grab;-ms-touch-action:pan-y;touch-action:pan-y}/*!@:host(.range-pressed) .range-slider*/.range-pressed.sc-ion-range-ios-h .range-slider.sc-ion-range-ios{cursor:-webkit-grabbing;cursor:grabbing}/*!@.range-pin*/.range-pin.sc-ion-range-ios{position:absolute;background:var(--ion-color-base);color:var(--ion-color-contrast);text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box}/*!@.range-knob-handle*/.range-knob-handle.sc-ion-range-ios{top:calc((var(--height) - var(--knob-handle-size)) / 2);-webkit-margin-start:calc(0px - var(--knob-handle-size) / 2);margin-inline-start:calc(0px - var(--knob-handle-size) / 2);display:-ms-flexbox;display:flex;position:absolute;-ms-flex-pack:center;justify-content:center;width:var(--knob-handle-size);height:var(--knob-handle-size);text-align:center}/*!@.range-knob-handle*/.range-knob-handle.sc-ion-range-ios{inset-inline-start:0}/*!@:host-context([dir=rtl]) .range-knob-handle*/[dir=rtl].sc-ion-range-ios-h .range-knob-handle.sc-ion-range-ios,[dir=rtl] .sc-ion-range-ios-h .range-knob-handle.sc-ion-range-ios{left:unset}/*!@[dir=rtl] .range-knob-handle*/[dir=rtl].sc-ion-range-ios .range-knob-handle.sc-ion-range-ios{left:unset}@supports selector(:dir(rtl)){/*!@.range-knob-handle:dir(rtl)*/.range-knob-handle.sc-ion-range-ios:dir(rtl){left:unset}}/*!@.range-knob-handle:active, .range-knob-handle:focus*/.range-knob-handle.sc-ion-range-ios:active,.range-knob-handle.sc-ion-range-ios:focus{outline:none}/*!@.range-bar-container*/.range-bar-container.sc-ion-range-ios{border-radius:var(--bar-border-radius);top:calc((var(--height) - var(--bar-height)) / 2);position:absolute;width:100%;height:var(--bar-height)}/*!@.range-bar-container*/.range-bar-container.sc-ion-range-ios{inset-inline-start:0}/*!@:host-context([dir=rtl]) .range-bar-container*/[dir=rtl].sc-ion-range-ios-h .range-bar-container.sc-ion-range-ios,[dir=rtl] .sc-ion-range-ios-h .range-bar-container.sc-ion-range-ios{left:unset}/*!@[dir=rtl] .range-bar-container*/[dir=rtl].sc-ion-range-ios .range-bar-container.sc-ion-range-ios{left:unset}@supports selector(:dir(rtl)){/*!@.range-bar-container:dir(rtl)*/.range-bar-container.sc-ion-range-ios:dir(rtl){left:unset}}/*!@.range-bar*/.range-bar.sc-ion-range-ios{border-radius:var(--bar-border-radius);position:absolute;width:100%;height:var(--bar-height);background:var(--bar-background);pointer-events:none}/*!@.range-knob*/.range-knob.sc-ion-range-ios{border-radius:var(--knob-border-radius);top:calc(50% - var(--knob-size) / 2);position:absolute;width:var(--knob-size);height:var(--knob-size);background:var(--knob-background);-webkit-box-shadow:var(--knob-box-shadow);box-shadow:var(--knob-box-shadow);z-index:2;pointer-events:none}/*!@.range-knob*/.range-knob.sc-ion-range-ios{inset-inline-start:calc(50% - var(--knob-size) / 2)}/*!@:host-context([dir=rtl]) .range-knob*/[dir=rtl].sc-ion-range-ios-h .range-knob.sc-ion-range-ios,[dir=rtl] .sc-ion-range-ios-h .range-knob.sc-ion-range-ios{left:unset}/*!@[dir=rtl] .range-knob*/[dir=rtl].sc-ion-range-ios .range-knob.sc-ion-range-ios{left:unset}@supports selector(:dir(rtl)){/*!@.range-knob:dir(rtl)*/.range-knob.sc-ion-range-ios:dir(rtl){left:unset}}/*!@:host(.range-pressed) .range-bar-active*/.range-pressed.sc-ion-range-ios-h .range-bar-active.sc-ion-range-ios{will-change:left, right}/*!@:host(.in-item)*/.in-item.sc-ion-range-ios-h{width:100%}/*!@:host([slot=start]),\n:host([slot=end])*/[slot=start].sc-ion-range-ios-h,[slot=end].sc-ion-range-ios-h{width:auto}/*!@:host(.in-item) ::slotted(ion-label)*/.sc-ion-range-ios-h.in-item .sc-ion-range-ios-s>ion-label{-ms-flex-item-align:center;align-self:center}/*!@.range-wrapper*/.range-wrapper.sc-ion-range-ios{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;height:inherit}/*!@::slotted([slot=label])*/.sc-ion-range-ios-s>[slot=label]{max-width:200px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}/*!@.label-text-wrapper-hidden*/.label-text-wrapper-hidden.sc-ion-range-ios{display:none}/*!@.native-wrapper*/.native-wrapper.sc-ion-range-ios{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center}/*!@:host(.range-label-placement-start) .range-wrapper*/.range-label-placement-start.sc-ion-range-ios-h .range-wrapper.sc-ion-range-ios{-ms-flex-direction:row;flex-direction:row}/*!@:host(.range-label-placement-start) .label-text-wrapper*/.range-label-placement-start.sc-ion-range-ios-h .label-text-wrapper.sc-ion-range-ios{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}/*!@:host(.range-label-placement-end) .range-wrapper*/.range-label-placement-end.sc-ion-range-ios-h .range-wrapper.sc-ion-range-ios{-ms-flex-direction:row-reverse;flex-direction:row-reverse}/*!@:host(.range-label-placement-end) .label-text-wrapper*/.range-label-placement-end.sc-ion-range-ios-h .label-text-wrapper.sc-ion-range-ios{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0}/*!@:host(.range-label-placement-fixed) .label-text-wrapper*/.range-label-placement-fixed.sc-ion-range-ios-h .label-text-wrapper.sc-ion-range-ios{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}/*!@:host(.range-label-placement-fixed) .label-text-wrapper*/.range-label-placement-fixed.sc-ion-range-ios-h .label-text-wrapper.sc-ion-range-ios{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}/*!@:host(.range-label-placement-stacked) .range-wrapper*/.range-label-placement-stacked.sc-ion-range-ios-h .range-wrapper.sc-ion-range-ios{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:stretch;align-items:stretch}/*!@:host(.range-label-placement-stacked) .label-text-wrapper*/.range-label-placement-stacked.sc-ion-range-ios-h .label-text-wrapper.sc-ion-range-ios{-webkit-transform-origin:left top;transform-origin:left top;-webkit-transform:scale(0.75);transform:scale(0.75);margin-left:0;margin-right:0;margin-bottom:16px;max-width:calc(100% / 0.75)}/*!@:host-context([dir=rtl]):host(.range-label-placement-stacked) .label-text-wrapper, :host-context([dir=rtl]).range-label-placement-stacked .label-text-wrapper*/[dir=rtl].sc-ion-range-ios-h -no-combinator.range-label-placement-stacked.sc-ion-range-ios-h .label-text-wrapper.sc-ion-range-ios,[dir=rtl] .sc-ion-range-ios-h -no-combinator.range-label-placement-stacked.sc-ion-range-ios-h .label-text-wrapper.sc-ion-range-ios,[dir=rtl].range-label-placement-stacked.sc-ion-range-ios-h .label-text-wrapper.sc-ion-range-ios,[dir=rtl] .range-label-placement-stacked.sc-ion-range-ios-h .label-text-wrapper.sc-ion-range-ios{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){/*!@:host(.range-label-placement-stacked:dir(rtl)) .label-text-wrapper*/.range-label-placement-stacked.sc-ion-range-ios-h:dir(rtl) .label-text-wrapper.sc-ion-range-ios{-webkit-transform-origin:right top;transform-origin:right top}}/*!@:host(.in-item.range-label-placement-stacked) .label-text-wrapper*/.in-item.range-label-placement-stacked.sc-ion-range-ios-h .label-text-wrapper.sc-ion-range-ios{margin-top:10px;margin-bottom:16px}/*!@:host(.in-item.range-label-placement-stacked) .native-wrapper*/.in-item.range-label-placement-stacked.sc-ion-range-ios-h .native-wrapper.sc-ion-range-ios{margin-bottom:0px}/*!@:host*/.sc-ion-range-ios-h{--knob-border-radius:50%;--knob-background:#ffffff;--knob-box-shadow:0px 0.5px 4px rgba(0, 0, 0, 0.12), 0px 6px 13px rgba(0, 0, 0, 0.12);--knob-size:26px;--bar-height:4px;--bar-background:var(--ion-color-step-900, var(--ion-background-color-step-900, #e6e6e6));--bar-background-active:var(--ion-color-primary, #0054e9);--bar-border-radius:2px;--height:42px}/*!@:host(.range-item-start-adjustment)*/.range-item-start-adjustment.sc-ion-range-ios-h{-webkit-padding-start:24px;padding-inline-start:24px}/*!@:host(.range-item-end-adjustment)*/.range-item-end-adjustment.sc-ion-range-ios-h{-webkit-padding-end:24px;padding-inline-end:24px}/*!@:host(.ion-color) .range-bar-active,\n:host(.ion-color) .range-tick-active*/.ion-color.sc-ion-range-ios-h .range-bar-active.sc-ion-range-ios,.ion-color.sc-ion-range-ios-h .range-tick-active.sc-ion-range-ios{background:var(--ion-color-base)}/*!@::slotted([slot=start])*/.sc-ion-range-ios-s>[slot=start]{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}/*!@::slotted([slot=end])*/.sc-ion-range-ios-s>[slot=end]{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0}/*!@:host(.range-has-pin:not(.range-label-placement-stacked))*/.range-has-pin.sc-ion-range-ios-h:not(.range-label-placement-stacked){padding-top:calc(8px + 0.75rem)}/*!@:host(.range-has-pin.range-label-placement-stacked) .label-text-wrapper*/.range-has-pin.range-label-placement-stacked.sc-ion-range-ios-h .label-text-wrapper.sc-ion-range-ios{margin-bottom:calc(8px + 0.75rem)}/*!@.range-bar-active*/.range-bar-active.sc-ion-range-ios{bottom:0;width:auto;background:var(--bar-background-active)}/*!@.range-bar-active.has-ticks*/.range-bar-active.has-ticks.sc-ion-range-ios{border-radius:0;-webkit-margin-start:-2px;margin-inline-start:-2px;-webkit-margin-end:-2px;margin-inline-end:-2px}/*!@.range-tick*/.range-tick.sc-ion-range-ios{-webkit-margin-start:-2px;margin-inline-start:-2px;border-radius:0;position:absolute;top:17px;width:4px;height:8px;background:var(--ion-color-step-900, var(--ion-background-color-step-900, #e6e6e6));pointer-events:none}/*!@.range-tick-active*/.range-tick-active.sc-ion-range-ios{background:var(--bar-background-active)}/*!@.range-pin*/.range-pin.sc-ion-range-ios{-webkit-transform:translate3d(0,  100%,  0) scale(0.01);transform:translate3d(0,  100%,  0) scale(0.01);-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:8px;padding-bottom:8px;min-width:28px;-webkit-transition:-webkit-transform 120ms ease;transition:-webkit-transform 120ms ease;transition:transform 120ms ease;transition:transform 120ms ease, -webkit-transform 120ms ease;background:transparent;color:var(--ion-text-color, #000);font-size:0.75rem;text-align:center}/*!@.range-knob-pressed .range-pin,\n.range-knob-handle.ion-focused .range-pin*/.range-knob-pressed.sc-ion-range-ios .range-pin.sc-ion-range-ios,.range-knob-handle.ion-focused.sc-ion-range-ios .range-pin.sc-ion-range-ios{-webkit-transform:translate3d(0, calc(-100% + 11px), 0) scale(1);transform:translate3d(0, calc(-100% + 11px), 0) scale(1)}/*!@:host(.range-disabled)*/.range-disabled.sc-ion-range-ios-h{opacity:0.3}";
 var IonRangeIosStyle0 = rangeIosCss;
 
-const rangeMdCss = "/*!@:host*/.sc-ion-range-md-h{--knob-handle-size:calc(var(--knob-size) * 2);display:-ms-flexbox;display:flex;position:relative;-ms-flex:3;flex:3;-ms-flex-align:center;align-items:center;font-family:var(--ion-font-family, inherit);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2}/*!@:host(.range-disabled)*/.range-disabled.sc-ion-range-md-h{pointer-events:none}/*!@::slotted(ion-label)*/.sc-ion-range-md-s>ion-label{-ms-flex:initial;flex:initial}/*!@::slotted(ion-icon[slot])*/.sc-ion-range-md-s>ion-icon[slot]{font-size:24px}/*!@.range-slider*/.range-slider.sc-ion-range-md{position:relative;-ms-flex:1;flex:1;width:100%;height:var(--height);contain:size layout style;cursor:-webkit-grab;cursor:grab;-ms-touch-action:pan-y;touch-action:pan-y}/*!@:host(.range-pressed) .range-slider*/.range-pressed.sc-ion-range-md-h .range-slider.sc-ion-range-md{cursor:-webkit-grabbing;cursor:grabbing}/*!@.range-pin*/.range-pin.sc-ion-range-md{position:absolute;background:var(--ion-color-base);color:var(--ion-color-contrast);text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box}/*!@.range-knob-handle*/.range-knob-handle.sc-ion-range-md{top:calc((var(--height) - var(--knob-handle-size)) / 2);-webkit-margin-start:calc(0px - var(--knob-handle-size) / 2);margin-inline-start:calc(0px - var(--knob-handle-size) / 2);display:-ms-flexbox;display:flex;position:absolute;-ms-flex-pack:center;justify-content:center;width:var(--knob-handle-size);height:var(--knob-handle-size);text-align:center}/*!@.range-knob-handle*/.range-knob-handle.sc-ion-range-md{inset-inline-start:0}/*!@:host-context([dir=rtl]) .range-knob-handle*/[dir=rtl].sc-ion-range-md-h .range-knob-handle.sc-ion-range-md,[dir=rtl] .sc-ion-range-md-h .range-knob-handle.sc-ion-range-md{left:unset}/*!@[dir=rtl] .range-knob-handle*/[dir=rtl].sc-ion-range-md .range-knob-handle.sc-ion-range-md{left:unset}@supports selector(:dir(rtl)){/*!@.range-knob-handle:dir(rtl)*/.range-knob-handle.sc-ion-range-md:dir(rtl){left:unset}}/*!@.range-knob-handle:active, .range-knob-handle:focus*/.range-knob-handle.sc-ion-range-md:active,.range-knob-handle.sc-ion-range-md:focus{outline:none}/*!@.range-bar-container*/.range-bar-container.sc-ion-range-md{border-radius:var(--bar-border-radius);top:calc((var(--height) - var(--bar-height)) / 2);position:absolute;width:100%;height:var(--bar-height)}/*!@.range-bar-container*/.range-bar-container.sc-ion-range-md{inset-inline-start:0}/*!@:host-context([dir=rtl]) .range-bar-container*/[dir=rtl].sc-ion-range-md-h .range-bar-container.sc-ion-range-md,[dir=rtl] .sc-ion-range-md-h .range-bar-container.sc-ion-range-md{left:unset}/*!@[dir=rtl] .range-bar-container*/[dir=rtl].sc-ion-range-md .range-bar-container.sc-ion-range-md{left:unset}@supports selector(:dir(rtl)){/*!@.range-bar-container:dir(rtl)*/.range-bar-container.sc-ion-range-md:dir(rtl){left:unset}}/*!@.range-bar*/.range-bar.sc-ion-range-md{border-radius:var(--bar-border-radius);position:absolute;width:100%;height:var(--bar-height);background:var(--bar-background);pointer-events:none}/*!@.range-knob*/.range-knob.sc-ion-range-md{border-radius:var(--knob-border-radius);top:calc(50% - var(--knob-size) / 2);position:absolute;width:var(--knob-size);height:var(--knob-size);background:var(--knob-background);-webkit-box-shadow:var(--knob-box-shadow);box-shadow:var(--knob-box-shadow);z-index:2;pointer-events:none}/*!@.range-knob*/.range-knob.sc-ion-range-md{inset-inline-start:calc(50% - var(--knob-size) / 2)}/*!@:host-context([dir=rtl]) .range-knob*/[dir=rtl].sc-ion-range-md-h .range-knob.sc-ion-range-md,[dir=rtl] .sc-ion-range-md-h .range-knob.sc-ion-range-md{left:unset}/*!@[dir=rtl] .range-knob*/[dir=rtl].sc-ion-range-md .range-knob.sc-ion-range-md{left:unset}@supports selector(:dir(rtl)){/*!@.range-knob:dir(rtl)*/.range-knob.sc-ion-range-md:dir(rtl){left:unset}}/*!@:host(.range-pressed) .range-bar-active*/.range-pressed.sc-ion-range-md-h .range-bar-active.sc-ion-range-md{will-change:left, right}/*!@:host(.in-item)*/.in-item.sc-ion-range-md-h{width:100%}/*!@:host([slot=start]),\n:host([slot=end])*/[slot=start].sc-ion-range-md-h,[slot=end].sc-ion-range-md-h{width:auto}/*!@:host(.in-item) ::slotted(ion-label)*/.sc-ion-range-md-h.in-item .sc-ion-range-md-s>ion-label{-ms-flex-item-align:center;align-self:center}/*!@.range-wrapper*/.range-wrapper.sc-ion-range-md{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;height:inherit}/*!@::slotted([slot=label])*/.sc-ion-range-md-s>[slot=label]{max-width:200px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}/*!@.label-text-wrapper-hidden*/.label-text-wrapper-hidden.sc-ion-range-md{display:none}/*!@.native-wrapper*/.native-wrapper.sc-ion-range-md{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center}/*!@:host(.range-label-placement-start) .range-wrapper*/.range-label-placement-start.sc-ion-range-md-h .range-wrapper.sc-ion-range-md{-ms-flex-direction:row;flex-direction:row}/*!@:host(.range-label-placement-start) .label-text-wrapper*/.range-label-placement-start.sc-ion-range-md-h .label-text-wrapper.sc-ion-range-md{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}/*!@:host(.range-label-placement-end) .range-wrapper*/.range-label-placement-end.sc-ion-range-md-h .range-wrapper.sc-ion-range-md{-ms-flex-direction:row-reverse;flex-direction:row-reverse}/*!@:host(.range-label-placement-end) .label-text-wrapper*/.range-label-placement-end.sc-ion-range-md-h .label-text-wrapper.sc-ion-range-md{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0}/*!@:host(.range-label-placement-fixed) .label-text-wrapper*/.range-label-placement-fixed.sc-ion-range-md-h .label-text-wrapper.sc-ion-range-md{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}/*!@:host(.range-label-placement-fixed) .label-text-wrapper*/.range-label-placement-fixed.sc-ion-range-md-h .label-text-wrapper.sc-ion-range-md{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}/*!@:host(.range-label-placement-stacked) .range-wrapper*/.range-label-placement-stacked.sc-ion-range-md-h .range-wrapper.sc-ion-range-md{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:stretch;align-items:stretch}/*!@:host(.range-label-placement-stacked) .label-text-wrapper*/.range-label-placement-stacked.sc-ion-range-md-h .label-text-wrapper.sc-ion-range-md{-webkit-transform-origin:left top;transform-origin:left top;-webkit-transform:scale(0.75);transform:scale(0.75);margin-left:0;margin-right:0;margin-bottom:16px;max-width:calc(100% / 0.75)}/*!@:host-context([dir=rtl]):host(.range-label-placement-stacked) .label-text-wrapper, :host-context([dir=rtl]).range-label-placement-stacked .label-text-wrapper*/[dir=rtl].sc-ion-range-md-h -no-combinator.range-label-placement-stacked.sc-ion-range-md-h .label-text-wrapper.sc-ion-range-md,[dir=rtl] .sc-ion-range-md-h -no-combinator.range-label-placement-stacked.sc-ion-range-md-h .label-text-wrapper.sc-ion-range-md,[dir=rtl].range-label-placement-stacked.sc-ion-range-md-h .label-text-wrapper.sc-ion-range-md,[dir=rtl] .range-label-placement-stacked.sc-ion-range-md-h .label-text-wrapper.sc-ion-range-md{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){/*!@:host(.range-label-placement-stacked:dir(rtl)) .label-text-wrapper*/.range-label-placement-stacked.sc-ion-range-md-h:dir(rtl) .label-text-wrapper.sc-ion-range-md{-webkit-transform-origin:right top;transform-origin:right top}}/*!@:host(.in-item.range-label-placement-stacked) .label-text-wrapper*/.in-item.range-label-placement-stacked.sc-ion-range-md-h .label-text-wrapper.sc-ion-range-md{margin-top:10px;margin-bottom:16px}/*!@:host(.in-item.range-label-placement-stacked) .native-wrapper*/.in-item.range-label-placement-stacked.sc-ion-range-md-h .native-wrapper.sc-ion-range-md{margin-bottom:0px}/*!@:host*/.sc-ion-range-md-h{--knob-border-radius:50%;--knob-background:var(--bar-background-active);--knob-box-shadow:none;--knob-size:18px;--bar-height:2px;--bar-background:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.26);--bar-background-active:var(--ion-color-primary, #0054e9);--bar-border-radius:0;--height:42px;--pin-background:var(--ion-color-primary, #0054e9);--pin-color:var(--ion-color-primary-contrast, #fff)}/*!@:host(.legacy-range) ::slotted([slot=label])*/.sc-ion-range-md-h.legacy-range .sc-ion-range-md-s>[slot=label]{font-size:initial}/*!@:host(:not(.legacy-range)) ::slotted(:not(ion-icon)[slot=start]),\n:host(:not(.legacy-range)) ::slotted(:not(ion-icon)[slot=end]),\n:host(:not(.legacy-range)) .native-wrapper*/.sc-ion-range-md-h:not(.legacy-range) .sc-ion-range-md-s>:not(ion-icon)[slot=start],.sc-ion-range-md-h:not(.legacy-range).sc-ion-range-md-s>:not(ion-icon)[slot=end],.sc-ion-range-md-h:not(.legacy-range) .sc-ion-range-md-s>:not(ion-icon)[slot=end],.sc-ion-range-md-h:not(.legacy-range) .native-wrapper.sc-ion-range-md{font-size:0.75rem}/*!@:host(.legacy-range)*/.legacy-range.sc-ion-range-md-h{-webkit-padding-start:14px;padding-inline-start:14px;-webkit-padding-end:14px;padding-inline-end:14px;padding-top:8px;padding-bottom:8px;font-size:0.75rem}/*!@:host(.range-item-start-adjustment)*/.range-item-start-adjustment.sc-ion-range-md-h{-webkit-padding-start:18px;padding-inline-start:18px}/*!@:host(.range-item-end-adjustment)*/.range-item-end-adjustment.sc-ion-range-md-h{-webkit-padding-end:18px;padding-inline-end:18px}/*!@:host(.ion-color) .range-bar*/.ion-color.sc-ion-range-md-h .range-bar.sc-ion-range-md{background:rgba(var(--ion-color-base-rgb), 0.26)}/*!@:host(.ion-color) .range-bar-active,\n:host(.ion-color) .range-knob,\n:host(.ion-color) .range-knob::before,\n:host(.ion-color) .range-pin,\n:host(.ion-color) .range-pin::before,\n:host(.ion-color) .range-tick*/.ion-color.sc-ion-range-md-h .range-bar-active.sc-ion-range-md,.ion-color.sc-ion-range-md-h .range-knob.sc-ion-range-md,.ion-color.sc-ion-range-md-h .range-knob.sc-ion-range-md::before,.ion-color.sc-ion-range-md-h .range-pin.sc-ion-range-md,.ion-color.sc-ion-range-md-h .range-pin.sc-ion-range-md::before,.ion-color.sc-ion-range-md-h .range-tick.sc-ion-range-md{background:var(--ion-color-base);color:var(--ion-color-contrast)}/*!@::slotted([slot=start])*/.sc-ion-range-md-s>[slot=start]{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:14px;margin-inline-end:14px;margin-top:0;margin-bottom:0}/*!@::slotted([slot=end])*/.sc-ion-range-md-s>[slot=end]{-webkit-margin-start:14px;margin-inline-start:14px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0}/*!@:host(.range-has-pin:not(.range-label-placement-stacked))*/.range-has-pin.sc-ion-range-md-h:not(.range-label-placement-stacked){padding-top:1.75rem}/*!@:host(.range-has-pin.range-label-placement-stacked) .label-text-wrapper*/.range-has-pin.range-label-placement-stacked.sc-ion-range-md-h .label-text-wrapper.sc-ion-range-md{margin-bottom:1.75rem}/*!@.range-bar-active*/.range-bar-active.sc-ion-range-md{bottom:0;width:auto;background:var(--bar-background-active)}/*!@.range-knob*/.range-knob.sc-ion-range-md{-webkit-transform:scale(0.67);transform:scale(0.67);-webkit-transition-duration:120ms;transition-duration:120ms;-webkit-transition-property:background-color, border, -webkit-transform;transition-property:background-color, border, -webkit-transform;transition-property:transform, background-color, border;transition-property:transform, background-color, border, -webkit-transform;-webkit-transition-timing-function:ease;transition-timing-function:ease;z-index:2}/*!@.range-knob::before*/.range-knob.sc-ion-range-md::before{border-radius:50%;position:absolute;width:var(--knob-size);height:var(--knob-size);-webkit-transform:scale(1);transform:scale(1);-webkit-transition:0.267s cubic-bezier(0, 0, 0.58, 1);transition:0.267s cubic-bezier(0, 0, 0.58, 1);background:var(--knob-background);content:\"\";opacity:0.13;pointer-events:none}/*!@.range-knob::before*/.range-knob.sc-ion-range-md::before{inset-inline-start:0}/*!@.range-tick*/.range-tick.sc-ion-range-md{position:absolute;top:calc((var(--height) - var(--bar-height)) / 2);width:var(--bar-height);height:var(--bar-height);background:var(--bar-background-active);z-index:1;pointer-events:none}/*!@.range-tick-active*/.range-tick-active.sc-ion-range-md{background:transparent}/*!@.range-pin*/.range-pin.sc-ion-range-md{padding-left:0;padding-right:0;padding-top:8px;padding-bottom:8px;border-radius:50%;-webkit-transform:translate3d(0,  0,  0) scale(0.01);transform:translate3d(0,  0,  0) scale(0.01);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:1.75rem;height:1.75rem;-webkit-transition:background 120ms ease, -webkit-transform 120ms ease;transition:background 120ms ease, -webkit-transform 120ms ease;transition:transform 120ms ease, background 120ms ease;transition:transform 120ms ease, background 120ms ease, -webkit-transform 120ms ease;background:var(--pin-background);color:var(--pin-color)}/*!@.range-pin::before*/.range-pin.sc-ion-range-md::before{bottom:-1px;-webkit-margin-start:-13px;margin-inline-start:-13px;border-radius:50% 50% 50% 0;position:absolute;width:26px;height:26px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transition:background 120ms ease;transition:background 120ms ease;background:var(--pin-background);content:\"\";z-index:-1}/*!@.range-pin::before*/.range-pin.sc-ion-range-md::before{inset-inline-start:50%}/*!@:host-context([dir=rtl]) .range-pin::before*/[dir=rtl].sc-ion-range-md-h .range-pin.sc-ion-range-md::before,[dir=rtl] .sc-ion-range-md-h .range-pin.sc-ion-range-md::before{left:unset}/*!@[dir=rtl] .range-pin::before*/[dir=rtl].sc-ion-range-md .range-pin.sc-ion-range-md::before{left:unset}@supports selector(:dir(rtl)){/*!@.range-pin::before:dir(rtl)*/.range-pin.sc-ion-range-md::before:dir(rtl){left:unset}}/*!@.range-knob-pressed .range-pin,\n.range-knob-handle.ion-focused .range-pin*/.range-knob-pressed.sc-ion-range-md .range-pin.sc-ion-range-md,.range-knob-handle.ion-focused.sc-ion-range-md .range-pin.sc-ion-range-md{-webkit-transform:translate3d(0, calc(-100% + 4px), 0) scale(1);transform:translate3d(0, calc(-100% + 4px), 0) scale(1)}@media (any-hover: hover){/*!@.range-knob-handle:hover .range-knob:before*/.range-knob-handle.sc-ion-range-md:hover .range-knob.sc-ion-range-md:before{-webkit-transform:scale(2);transform:scale(2);opacity:0.13}}/*!@.range-knob-handle.ion-activated .range-knob:before, .range-knob-handle.ion-focused .range-knob:before, .range-knob-handle.range-knob-pressed .range-knob:before*/.range-knob-handle.ion-activated.sc-ion-range-md .range-knob.sc-ion-range-md:before,.range-knob-handle.ion-focused.sc-ion-range-md .range-knob.sc-ion-range-md:before,.range-knob-handle.range-knob-pressed.sc-ion-range-md .range-knob.sc-ion-range-md:before{-webkit-transform:scale(2);transform:scale(2)}/*!@.range-knob-handle.ion-focused .range-knob::before*/.range-knob-handle.ion-focused.sc-ion-range-md .range-knob.sc-ion-range-md::before{opacity:0.13}/*!@.range-knob-handle.ion-activated .range-knob::before, .range-knob-handle.range-knob-pressed .range-knob::before*/.range-knob-handle.ion-activated.sc-ion-range-md .range-knob.sc-ion-range-md::before,.range-knob-handle.range-knob-pressed.sc-ion-range-md .range-knob.sc-ion-range-md::before{opacity:0.25}/*!@:host(:not(.range-has-pin)) .range-knob-pressed .range-knob,\n:host(:not(.range-has-pin)) .range-knob-handle.ion-focused .range-knob*/.sc-ion-range-md-h:not(.range-has-pin) .range-knob-pressed.sc-ion-range-md .range-knob.sc-ion-range-md,.sc-ion-range-md-h:not(.range-has-pin) .range-knob-handle.ion-focused.sc-ion-range-md .range-knob.sc-ion-range-md{-webkit-transform:scale(1);transform:scale(1)}/*!@:host(.range-disabled) .range-bar-active,\n:host(.range-disabled) .range-bar,\n:host(.range-disabled) .range-tick*/.range-disabled.sc-ion-range-md-h .range-bar-active.sc-ion-range-md,.range-disabled.sc-ion-range-md-h .range-bar.sc-ion-range-md,.range-disabled.sc-ion-range-md-h .range-tick.sc-ion-range-md{background-color:var(--ion-color-step-250, var(--ion-background-color-step-250, #bfbfbf))}/*!@:host(.range-disabled) .range-knob*/.range-disabled.sc-ion-range-md-h .range-knob.sc-ion-range-md{-webkit-transform:scale(0.55);transform:scale(0.55);outline:5px solid #fff;background-color:var(--ion-color-step-250, var(--ion-background-color-step-250, #bfbfbf))}/*!@:host(.range-disabled) .label-text-wrapper,\n:host(.range-disabled) ::slotted([slot=start]),\n:host(.range-disabled) ::slotted([slot=end])*/.range-disabled.sc-ion-range-md-h .label-text-wrapper.sc-ion-range-md,.sc-ion-range-md-h.range-disabled.sc-ion-range-md-s>[slot=start],.sc-ion-range-md-h.range-disabled .sc-ion-range-md-s>[slot=start],.sc-ion-range-md-h.range-disabled.sc-ion-range-md-s>[slot=end],.sc-ion-range-md-h.range-disabled .sc-ion-range-md-s>[slot=end]{opacity:0.38}";
+const rangeMdCss = "/*!@:host*/.sc-ion-range-md-h{--knob-handle-size:calc(var(--knob-size) * 2);display:-ms-flexbox;display:flex;position:relative;-ms-flex:3;flex:3;-ms-flex-align:center;align-items:center;font-family:var(--ion-font-family, inherit);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2}/*!@:host(.range-disabled)*/.range-disabled.sc-ion-range-md-h{pointer-events:none}/*!@::slotted(ion-label)*/.sc-ion-range-md-s>ion-label{-ms-flex:initial;flex:initial}/*!@::slotted(ion-icon[slot])*/.sc-ion-range-md-s>ion-icon[slot]{font-size:24px}/*!@.range-slider*/.range-slider.sc-ion-range-md{position:relative;-ms-flex:1;flex:1;width:100%;height:var(--height);contain:size layout style;cursor:-webkit-grab;cursor:grab;-ms-touch-action:pan-y;touch-action:pan-y}/*!@:host(.range-pressed) .range-slider*/.range-pressed.sc-ion-range-md-h .range-slider.sc-ion-range-md{cursor:-webkit-grabbing;cursor:grabbing}/*!@.range-pin*/.range-pin.sc-ion-range-md{position:absolute;background:var(--ion-color-base);color:var(--ion-color-contrast);text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box}/*!@.range-knob-handle*/.range-knob-handle.sc-ion-range-md{top:calc((var(--height) - var(--knob-handle-size)) / 2);-webkit-margin-start:calc(0px - var(--knob-handle-size) / 2);margin-inline-start:calc(0px - var(--knob-handle-size) / 2);display:-ms-flexbox;display:flex;position:absolute;-ms-flex-pack:center;justify-content:center;width:var(--knob-handle-size);height:var(--knob-handle-size);text-align:center}/*!@.range-knob-handle*/.range-knob-handle.sc-ion-range-md{inset-inline-start:0}/*!@:host-context([dir=rtl]) .range-knob-handle*/[dir=rtl].sc-ion-range-md-h .range-knob-handle.sc-ion-range-md,[dir=rtl] .sc-ion-range-md-h .range-knob-handle.sc-ion-range-md{left:unset}/*!@[dir=rtl] .range-knob-handle*/[dir=rtl].sc-ion-range-md .range-knob-handle.sc-ion-range-md{left:unset}@supports selector(:dir(rtl)){/*!@.range-knob-handle:dir(rtl)*/.range-knob-handle.sc-ion-range-md:dir(rtl){left:unset}}/*!@.range-knob-handle:active, .range-knob-handle:focus*/.range-knob-handle.sc-ion-range-md:active,.range-knob-handle.sc-ion-range-md:focus{outline:none}/*!@.range-bar-container*/.range-bar-container.sc-ion-range-md{border-radius:var(--bar-border-radius);top:calc((var(--height) - var(--bar-height)) / 2);position:absolute;width:100%;height:var(--bar-height)}/*!@.range-bar-container*/.range-bar-container.sc-ion-range-md{inset-inline-start:0}/*!@:host-context([dir=rtl]) .range-bar-container*/[dir=rtl].sc-ion-range-md-h .range-bar-container.sc-ion-range-md,[dir=rtl] .sc-ion-range-md-h .range-bar-container.sc-ion-range-md{left:unset}/*!@[dir=rtl] .range-bar-container*/[dir=rtl].sc-ion-range-md .range-bar-container.sc-ion-range-md{left:unset}@supports selector(:dir(rtl)){/*!@.range-bar-container:dir(rtl)*/.range-bar-container.sc-ion-range-md:dir(rtl){left:unset}}/*!@.range-bar*/.range-bar.sc-ion-range-md{border-radius:var(--bar-border-radius);position:absolute;width:100%;height:var(--bar-height);background:var(--bar-background);pointer-events:none}/*!@.range-knob*/.range-knob.sc-ion-range-md{border-radius:var(--knob-border-radius);top:calc(50% - var(--knob-size) / 2);position:absolute;width:var(--knob-size);height:var(--knob-size);background:var(--knob-background);-webkit-box-shadow:var(--knob-box-shadow);box-shadow:var(--knob-box-shadow);z-index:2;pointer-events:none}/*!@.range-knob*/.range-knob.sc-ion-range-md{inset-inline-start:calc(50% - var(--knob-size) / 2)}/*!@:host-context([dir=rtl]) .range-knob*/[dir=rtl].sc-ion-range-md-h .range-knob.sc-ion-range-md,[dir=rtl] .sc-ion-range-md-h .range-knob.sc-ion-range-md{left:unset}/*!@[dir=rtl] .range-knob*/[dir=rtl].sc-ion-range-md .range-knob.sc-ion-range-md{left:unset}@supports selector(:dir(rtl)){/*!@.range-knob:dir(rtl)*/.range-knob.sc-ion-range-md:dir(rtl){left:unset}}/*!@:host(.range-pressed) .range-bar-active*/.range-pressed.sc-ion-range-md-h .range-bar-active.sc-ion-range-md{will-change:left, right}/*!@:host(.in-item)*/.in-item.sc-ion-range-md-h{width:100%}/*!@:host([slot=start]),\n:host([slot=end])*/[slot=start].sc-ion-range-md-h,[slot=end].sc-ion-range-md-h{width:auto}/*!@:host(.in-item) ::slotted(ion-label)*/.sc-ion-range-md-h.in-item .sc-ion-range-md-s>ion-label{-ms-flex-item-align:center;align-self:center}/*!@.range-wrapper*/.range-wrapper.sc-ion-range-md{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;height:inherit}/*!@::slotted([slot=label])*/.sc-ion-range-md-s>[slot=label]{max-width:200px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}/*!@.label-text-wrapper-hidden*/.label-text-wrapper-hidden.sc-ion-range-md{display:none}/*!@.native-wrapper*/.native-wrapper.sc-ion-range-md{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center}/*!@:host(.range-label-placement-start) .range-wrapper*/.range-label-placement-start.sc-ion-range-md-h .range-wrapper.sc-ion-range-md{-ms-flex-direction:row;flex-direction:row}/*!@:host(.range-label-placement-start) .label-text-wrapper*/.range-label-placement-start.sc-ion-range-md-h .label-text-wrapper.sc-ion-range-md{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}/*!@:host(.range-label-placement-end) .range-wrapper*/.range-label-placement-end.sc-ion-range-md-h .range-wrapper.sc-ion-range-md{-ms-flex-direction:row-reverse;flex-direction:row-reverse}/*!@:host(.range-label-placement-end) .label-text-wrapper*/.range-label-placement-end.sc-ion-range-md-h .label-text-wrapper.sc-ion-range-md{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0}/*!@:host(.range-label-placement-fixed) .label-text-wrapper*/.range-label-placement-fixed.sc-ion-range-md-h .label-text-wrapper.sc-ion-range-md{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}/*!@:host(.range-label-placement-fixed) .label-text-wrapper*/.range-label-placement-fixed.sc-ion-range-md-h .label-text-wrapper.sc-ion-range-md{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}/*!@:host(.range-label-placement-stacked) .range-wrapper*/.range-label-placement-stacked.sc-ion-range-md-h .range-wrapper.sc-ion-range-md{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:stretch;align-items:stretch}/*!@:host(.range-label-placement-stacked) .label-text-wrapper*/.range-label-placement-stacked.sc-ion-range-md-h .label-text-wrapper.sc-ion-range-md{-webkit-transform-origin:left top;transform-origin:left top;-webkit-transform:scale(0.75);transform:scale(0.75);margin-left:0;margin-right:0;margin-bottom:16px;max-width:calc(100% / 0.75)}/*!@:host-context([dir=rtl]):host(.range-label-placement-stacked) .label-text-wrapper, :host-context([dir=rtl]).range-label-placement-stacked .label-text-wrapper*/[dir=rtl].sc-ion-range-md-h -no-combinator.range-label-placement-stacked.sc-ion-range-md-h .label-text-wrapper.sc-ion-range-md,[dir=rtl] .sc-ion-range-md-h -no-combinator.range-label-placement-stacked.sc-ion-range-md-h .label-text-wrapper.sc-ion-range-md,[dir=rtl].range-label-placement-stacked.sc-ion-range-md-h .label-text-wrapper.sc-ion-range-md,[dir=rtl] .range-label-placement-stacked.sc-ion-range-md-h .label-text-wrapper.sc-ion-range-md{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){/*!@:host(.range-label-placement-stacked:dir(rtl)) .label-text-wrapper*/.range-label-placement-stacked.sc-ion-range-md-h:dir(rtl) .label-text-wrapper.sc-ion-range-md{-webkit-transform-origin:right top;transform-origin:right top}}/*!@:host(.in-item.range-label-placement-stacked) .label-text-wrapper*/.in-item.range-label-placement-stacked.sc-ion-range-md-h .label-text-wrapper.sc-ion-range-md{margin-top:10px;margin-bottom:16px}/*!@:host(.in-item.range-label-placement-stacked) .native-wrapper*/.in-item.range-label-placement-stacked.sc-ion-range-md-h .native-wrapper.sc-ion-range-md{margin-bottom:0px}/*!@:host*/.sc-ion-range-md-h{--knob-border-radius:50%;--knob-background:var(--bar-background-active);--knob-box-shadow:none;--knob-size:18px;--bar-height:2px;--bar-background:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.26);--bar-background-active:var(--ion-color-primary, #0054e9);--bar-border-radius:0;--height:42px;--pin-background:var(--ion-color-primary, #0054e9);--pin-color:var(--ion-color-primary-contrast, #fff)}/*!@::slotted(:not(ion-icon)[slot=start]),\n::slotted(:not(ion-icon)[slot=end]),\n.native-wrapper*/.sc-ion-range-md-s>:not(ion-icon)[slot=start],.sc-ion-range-md-s>:not(ion-icon)[slot=end],.native-wrapper.sc-ion-range-md{font-size:0.75rem}/*!@:host(.range-item-start-adjustment)*/.range-item-start-adjustment.sc-ion-range-md-h{-webkit-padding-start:18px;padding-inline-start:18px}/*!@:host(.range-item-end-adjustment)*/.range-item-end-adjustment.sc-ion-range-md-h{-webkit-padding-end:18px;padding-inline-end:18px}/*!@:host(.ion-color) .range-bar*/.ion-color.sc-ion-range-md-h .range-bar.sc-ion-range-md{background:rgba(var(--ion-color-base-rgb), 0.26)}/*!@:host(.ion-color) .range-bar-active,\n:host(.ion-color) .range-knob,\n:host(.ion-color) .range-knob::before,\n:host(.ion-color) .range-pin,\n:host(.ion-color) .range-pin::before,\n:host(.ion-color) .range-tick*/.ion-color.sc-ion-range-md-h .range-bar-active.sc-ion-range-md,.ion-color.sc-ion-range-md-h .range-knob.sc-ion-range-md,.ion-color.sc-ion-range-md-h .range-knob.sc-ion-range-md::before,.ion-color.sc-ion-range-md-h .range-pin.sc-ion-range-md,.ion-color.sc-ion-range-md-h .range-pin.sc-ion-range-md::before,.ion-color.sc-ion-range-md-h .range-tick.sc-ion-range-md{background:var(--ion-color-base);color:var(--ion-color-contrast)}/*!@::slotted([slot=start])*/.sc-ion-range-md-s>[slot=start]{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:14px;margin-inline-end:14px;margin-top:0;margin-bottom:0}/*!@::slotted([slot=end])*/.sc-ion-range-md-s>[slot=end]{-webkit-margin-start:14px;margin-inline-start:14px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0}/*!@:host(.range-has-pin:not(.range-label-placement-stacked))*/.range-has-pin.sc-ion-range-md-h:not(.range-label-placement-stacked){padding-top:1.75rem}/*!@:host(.range-has-pin.range-label-placement-stacked) .label-text-wrapper*/.range-has-pin.range-label-placement-stacked.sc-ion-range-md-h .label-text-wrapper.sc-ion-range-md{margin-bottom:1.75rem}/*!@.range-bar-active*/.range-bar-active.sc-ion-range-md{bottom:0;width:auto;background:var(--bar-background-active)}/*!@.range-knob*/.range-knob.sc-ion-range-md{-webkit-transform:scale(0.67);transform:scale(0.67);-webkit-transition-duration:120ms;transition-duration:120ms;-webkit-transition-property:background-color, border, -webkit-transform;transition-property:background-color, border, -webkit-transform;transition-property:transform, background-color, border;transition-property:transform, background-color, border, -webkit-transform;-webkit-transition-timing-function:ease;transition-timing-function:ease;z-index:2}/*!@.range-knob::before*/.range-knob.sc-ion-range-md::before{border-radius:50%;position:absolute;width:var(--knob-size);height:var(--knob-size);-webkit-transform:scale(1);transform:scale(1);-webkit-transition:0.267s cubic-bezier(0, 0, 0.58, 1);transition:0.267s cubic-bezier(0, 0, 0.58, 1);background:var(--knob-background);content:\"\";opacity:0.13;pointer-events:none}/*!@.range-knob::before*/.range-knob.sc-ion-range-md::before{inset-inline-start:0}/*!@.range-tick*/.range-tick.sc-ion-range-md{position:absolute;top:calc((var(--height) - var(--bar-height)) / 2);width:var(--bar-height);height:var(--bar-height);background:var(--bar-background-active);z-index:1;pointer-events:none}/*!@.range-tick-active*/.range-tick-active.sc-ion-range-md{background:transparent}/*!@.range-pin*/.range-pin.sc-ion-range-md{padding-left:0;padding-right:0;padding-top:8px;padding-bottom:8px;border-radius:50%;-webkit-transform:translate3d(0,  0,  0) scale(0.01);transform:translate3d(0,  0,  0) scale(0.01);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:1.75rem;height:1.75rem;-webkit-transition:background 120ms ease, -webkit-transform 120ms ease;transition:background 120ms ease, -webkit-transform 120ms ease;transition:transform 120ms ease, background 120ms ease;transition:transform 120ms ease, background 120ms ease, -webkit-transform 120ms ease;background:var(--pin-background);color:var(--pin-color)}/*!@.range-pin::before*/.range-pin.sc-ion-range-md::before{bottom:-1px;-webkit-margin-start:-13px;margin-inline-start:-13px;border-radius:50% 50% 50% 0;position:absolute;width:26px;height:26px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transition:background 120ms ease;transition:background 120ms ease;background:var(--pin-background);content:\"\";z-index:-1}/*!@.range-pin::before*/.range-pin.sc-ion-range-md::before{inset-inline-start:50%}/*!@:host-context([dir=rtl]) .range-pin::before*/[dir=rtl].sc-ion-range-md-h .range-pin.sc-ion-range-md::before,[dir=rtl] .sc-ion-range-md-h .range-pin.sc-ion-range-md::before{left:unset}/*!@[dir=rtl] .range-pin::before*/[dir=rtl].sc-ion-range-md .range-pin.sc-ion-range-md::before{left:unset}@supports selector(:dir(rtl)){/*!@.range-pin::before:dir(rtl)*/.range-pin.sc-ion-range-md::before:dir(rtl){left:unset}}/*!@.range-knob-pressed .range-pin,\n.range-knob-handle.ion-focused .range-pin*/.range-knob-pressed.sc-ion-range-md .range-pin.sc-ion-range-md,.range-knob-handle.ion-focused.sc-ion-range-md .range-pin.sc-ion-range-md{-webkit-transform:translate3d(0, calc(-100% + 4px), 0) scale(1);transform:translate3d(0, calc(-100% + 4px), 0) scale(1)}@media (any-hover: hover){/*!@.range-knob-handle:hover .range-knob:before*/.range-knob-handle.sc-ion-range-md:hover .range-knob.sc-ion-range-md:before{-webkit-transform:scale(2);transform:scale(2);opacity:0.13}}/*!@.range-knob-handle.ion-activated .range-knob:before, .range-knob-handle.ion-focused .range-knob:before, .range-knob-handle.range-knob-pressed .range-knob:before*/.range-knob-handle.ion-activated.sc-ion-range-md .range-knob.sc-ion-range-md:before,.range-knob-handle.ion-focused.sc-ion-range-md .range-knob.sc-ion-range-md:before,.range-knob-handle.range-knob-pressed.sc-ion-range-md .range-knob.sc-ion-range-md:before{-webkit-transform:scale(2);transform:scale(2)}/*!@.range-knob-handle.ion-focused .range-knob::before*/.range-knob-handle.ion-focused.sc-ion-range-md .range-knob.sc-ion-range-md::before{opacity:0.13}/*!@.range-knob-handle.ion-activated .range-knob::before, .range-knob-handle.range-knob-pressed .range-knob::before*/.range-knob-handle.ion-activated.sc-ion-range-md .range-knob.sc-ion-range-md::before,.range-knob-handle.range-knob-pressed.sc-ion-range-md .range-knob.sc-ion-range-md::before{opacity:0.25}/*!@:host(:not(.range-has-pin)) .range-knob-pressed .range-knob,\n:host(:not(.range-has-pin)) .range-knob-handle.ion-focused .range-knob*/.sc-ion-range-md-h:not(.range-has-pin) .range-knob-pressed.sc-ion-range-md .range-knob.sc-ion-range-md,.sc-ion-range-md-h:not(.range-has-pin) .range-knob-handle.ion-focused.sc-ion-range-md .range-knob.sc-ion-range-md{-webkit-transform:scale(1);transform:scale(1)}/*!@:host(.range-disabled) .range-bar-active,\n:host(.range-disabled) .range-bar,\n:host(.range-disabled) .range-tick*/.range-disabled.sc-ion-range-md-h .range-bar-active.sc-ion-range-md,.range-disabled.sc-ion-range-md-h .range-bar.sc-ion-range-md,.range-disabled.sc-ion-range-md-h .range-tick.sc-ion-range-md{background-color:var(--ion-color-step-250, var(--ion-background-color-step-250, #bfbfbf))}/*!@:host(.range-disabled) .range-knob*/.range-disabled.sc-ion-range-md-h .range-knob.sc-ion-range-md{-webkit-transform:scale(0.55);transform:scale(0.55);outline:5px solid #fff;background-color:var(--ion-color-step-250, var(--ion-background-color-step-250, #bfbfbf))}/*!@:host(.range-disabled) .label-text-wrapper,\n:host(.range-disabled) ::slotted([slot=start]),\n:host(.range-disabled) ::slotted([slot=end])*/.range-disabled.sc-ion-range-md-h .label-text-wrapper.sc-ion-range-md,.sc-ion-range-md-h.range-disabled.sc-ion-range-md-s>[slot=start],.sc-ion-range-md-h.range-disabled .sc-ion-range-md-s>[slot=start],.sc-ion-range-md-h.range-disabled.sc-ion-range-md-s>[slot=end],.sc-ion-range-md-h.range-disabled .sc-ion-range-md-s>[slot=end]{opacity:0.38}";
 var IonRangeMdStyle0 = rangeMdCss;
 
 // TODO(FW-2832): types
@@ -29853,7 +29832,6 @@ class Range {
         registerInstance(this, hostRef);
         this.ionChange = createEvent(this, "ionChange", 7);
         this.ionInput = createEvent(this, "ionInput", 7);
-        this.ionStyle = createEvent(this, "ionStyle", 7);
         this.ionFocus = createEvent(this, "ionFocus", 7);
         this.ionBlur = createEvent(this, "ionBlur", 7);
         this.ionKnobMoveStart = createEvent(this, "ionKnobMoveStart", 7);
@@ -29865,8 +29843,6 @@ class Range {
         this.inheritedAttributes = {};
         this.contentEl = null;
         this.initialContentScrollY = true;
-        // This flag ensures we log the deprecation warning at most once.
-        this.hasLoggedDeprecationWarning = false;
         this.clampBounds = (value) => {
             return clamp(this.min, value, this.max);
         };
@@ -29919,14 +29895,12 @@ class Range {
             if (this.hasFocus) {
                 this.hasFocus = false;
                 this.ionBlur.emit();
-                this.emitStyle();
             }
         };
         this.onFocus = () => {
             if (!this.hasFocus) {
                 this.hasFocus = true;
                 this.ionFocus.emit();
-                this.emitStyle();
             }
         };
         this.ratioA = 0;
@@ -29948,7 +29922,6 @@ class Range {
         this.disabled = false;
         this.value = 0;
         this.labelPlacement = 'start';
-        this.legacy = undefined;
     }
     debounceChanged() {
         const { ionInput, debounce, originalIonInput } = this;
@@ -29985,7 +29958,6 @@ class Range {
         if (this.gesture) {
             this.gesture.enable(!this.disabled);
         }
-        this.emitStyle();
     }
     valueChanged() {
         if (!this.noUpdate) {
@@ -30009,8 +29981,6 @@ class Range {
         this.didLoad = true;
     }
     connectedCallback() {
-        const { el } = this;
-        this.legacyFormController = createLegacyFormController(el);
         this.updateRatio();
         this.debounceChanged();
         this.disabledChanged();
@@ -30051,17 +30021,6 @@ class Range {
             return value;
         }
     }
-    // TODO FW-2997 remove this
-    emitStyle() {
-        if (this.legacyFormController.hasLegacyControl()) {
-            this.ionStyle.emit({
-                interactive: true,
-                'interactive-disabled': this.disabled,
-                // TODO(FW-2997): remove this
-                legacy: !!this.legacy,
-            });
-        }
-    }
     /**
      * Emits an `ionChange` event.
      *
@@ -30178,34 +30137,6 @@ class Range {
             }
         }
     }
-    // TODO FW-2997 remove this
-    renderLegacyRange() {
-        if (!this.hasLoggedDeprecationWarning) {
-            printIonWarning(`ion-range now requires providing a label with either the label slot or the "aria-label" attribute. To migrate, remove any usage of "ion-label" and pass the label text to either the component or the "aria-label" attribute.
-
-Example: <ion-range><div slot="label">Volume</div></ion-range>
-Example with aria-label: <ion-range aria-label="Volume"></ion-range>
-
-Developers can use the "legacy" property to continue using the legacy form markup. This property will be removed in an upcoming major release of Ionic where this form control will use the modern form markup.`, this.el);
-            if (this.legacy) {
-                printIonWarning(`ion-range is being used with the "legacy" property enabled which will forcibly enable the legacy form markup. This property will be removed in an upcoming major release of Ionic where this form control will use the modern form markup.
-
-Developers can dismiss this warning by removing their usage of the "legacy" property and using the new range syntax.`, this.el);
-            }
-            this.hasLoggedDeprecationWarning = true;
-        }
-        const { el, pressedKnob, disabled, pin, rangeId } = this;
-        const mode = getIonMode$1(this);
-        renderHiddenInput(true, el, this.name, JSON.stringify(this.getValue()), disabled);
-        return (hAsync(Host, { onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses$1(this.color, {
-                [mode]: true,
-                'in-item': hostContext('ion-item', el),
-                'range-disabled': disabled,
-                'range-pressed': pressedKnob !== undefined,
-                'range-has-pin': pin,
-                'legacy-range': true,
-            }) }, hAsync("slot", { name: "start" }), this.renderRangeSlider(), hAsync("slot", { name: "end" })));
-    }
     /**
      * Returns true if content was passed to the "start" slot
      */
@@ -30218,37 +30149,6 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
     get hasEndSlotContent() {
         return this.el.querySelector('[slot="end"]') !== null;
     }
-    renderRange() {
-        const { disabled, el, hasLabel, rangeId, pin, pressedKnob, labelPlacement, label } = this;
-        const inItem = hostContext('ion-item', el);
-        /**
-         * If there is no start content then the knob at
-         * the min value will be cut off by the item margin.
-         */
-        const hasStartContent = (hasLabel && (labelPlacement === 'start' || labelPlacement === 'fixed')) || this.hasStartSlotContent;
-        const needsStartAdjustment = inItem && !hasStartContent;
-        /**
-         * If there is no end content then the knob at
-         * the max value will be cut off by the item margin.
-         */
-        const hasEndContent = (hasLabel && labelPlacement === 'end') || this.hasEndSlotContent;
-        const needsEndAdjustment = inItem && !hasEndContent;
-        const mode = getIonMode$1(this);
-        renderHiddenInput(true, el, this.name, JSON.stringify(this.getValue()), disabled);
-        return (hAsync(Host, { onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses$1(this.color, {
-                [mode]: true,
-                'in-item': inItem,
-                'range-disabled': disabled,
-                'range-pressed': pressedKnob !== undefined,
-                'range-has-pin': pin,
-                [`range-label-placement-${labelPlacement}`]: true,
-                'range-item-start-adjustment': needsStartAdjustment,
-                'range-item-end-adjustment': needsEndAdjustment,
-            }) }, hAsync("label", { class: "range-wrapper", id: "range-label" }, hAsync("div", { class: {
-                'label-text-wrapper': true,
-                'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label" }, label !== undefined ? hAsync("div", { class: "label-text" }, label) : hAsync("slot", { name: "label" })), hAsync("div", { class: "native-wrapper" }, hAsync("slot", { name: "start" }), this.renderRangeSlider(), hAsync("slot", { name: "end" })))));
-    }
     get hasLabel() {
         return this.label !== undefined || this.el.querySelector('[slot="label"]') !== null;
     }
@@ -30324,7 +30224,7 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
             }
         }
         let labelledBy;
-        if (!this.legacyFormController.hasLegacyControl() && this.hasLabel) {
+        if (this.hasLabel) {
             labelledBy = 'range-label';
         }
         return (hAsync("div", { class: "range-slider", ref: (rangeEl) => (this.rangeSlider = rangeEl) }, ticks.map((tick) => (hAsync("div", { style: tickStyle(tick), role: "presentation", class: {
@@ -30364,8 +30264,35 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
             })));
     }
     render() {
-        const { legacyFormController } = this;
-        return legacyFormController.hasLegacyControl() ? this.renderLegacyRange() : this.renderRange();
+        const { disabled, el, hasLabel, rangeId, pin, pressedKnob, labelPlacement, label } = this;
+        const inItem = hostContext('ion-item', el);
+        /**
+         * If there is no start content then the knob at
+         * the min value will be cut off by the item margin.
+         */
+        const hasStartContent = (hasLabel && (labelPlacement === 'start' || labelPlacement === 'fixed')) || this.hasStartSlotContent;
+        const needsStartAdjustment = inItem && !hasStartContent;
+        /**
+         * If there is no end content then the knob at
+         * the max value will be cut off by the item margin.
+         */
+        const hasEndContent = (hasLabel && labelPlacement === 'end') || this.hasEndSlotContent;
+        const needsEndAdjustment = inItem && !hasEndContent;
+        const mode = getIonMode$1(this);
+        renderHiddenInput(true, el, this.name, JSON.stringify(this.getValue()), disabled);
+        return (hAsync(Host, { key: 'ff8dbbb4e0c8b9802408a40fa0d93528ec730a9f', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses$1(this.color, {
+                [mode]: true,
+                'in-item': inItem,
+                'range-disabled': disabled,
+                'range-pressed': pressedKnob !== undefined,
+                'range-has-pin': pin,
+                [`range-label-placement-${labelPlacement}`]: true,
+                'range-item-start-adjustment': needsStartAdjustment,
+                'range-item-end-adjustment': needsEndAdjustment,
+            }) }, hAsync("label", { key: '2164b0ec67215d7791d795a1f6274b595ad74d80', class: "range-wrapper", id: "range-label" }, hAsync("div", { key: '717346e2bcfb29a3a5ef39b5fec226d484aa1f46', class: {
+                'label-text-wrapper': true,
+                'label-text-wrapper-hidden': !hasLabel,
+            }, part: "label" }, label !== undefined ? hAsync("div", { class: "label-text" }, label) : hAsync("slot", { name: "label" })), hAsync("div", { key: 'a6ffff056ab81a45f1a0b38fa42031c51ceabb52', class: "native-wrapper" }, hAsync("slot", { key: 'df3f155a9886cc62d3f0d23467c406c52cd3e082', name: "start" }), this.renderRangeSlider(), hAsync("slot", { key: '3fab316ecdff317c07010a204d89e85af12d347e', name: "end" })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -30400,7 +30327,6 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
             "disabled": [4],
             "value": [1026],
             "labelPlacement": [1, "label-placement"],
-            "legacy": [4],
             "ratioA": [32],
             "ratioB": [32],
             "pressedKnob": [32]
@@ -31238,7 +31164,7 @@ class Refresher {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '611c1aaa015716565349c3f60f724ff29f77fab8', slot: "fixed", class: {
+        return (hAsync(Host, { key: '460d903daa65f5549f4f75de63d185d82b9df1bc', slot: "fixed", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`refresher-${mode}`]: true,
@@ -31466,7 +31392,7 @@ class RefresherContent {
         const pullingIcon = this.pullingIcon;
         const hasSpinner = pullingIcon != null && SPINNERS[pullingIcon] !== undefined;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '041777c4d84d60a5ad208a259da18f08ad1925e1', class: mode }, hAsync("div", { key: 'e4e9a10b7ca06de8c200f70129c1e7453ba29bf1', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (hAsync("div", { class: "refresher-pulling-icon" }, hAsync("div", { class: "spinner-arrow-container" }, hAsync("ion-spinner", { name: this.pullingIcon, paused: true }), mode === 'md' && this.pullingIcon === 'circular' && (hAsync("div", { class: "arrow-container" }, hAsync("ion-icon", { icon: caretBackSharp, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (hAsync("div", { class: "refresher-pulling-icon" }, hAsync("ion-icon", { icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), hAsync("div", { key: '10845bafc245a14164514705c9f76d7ad8287720', class: "refresher-refreshing" }, this.refreshingSpinner && (hAsync("div", { class: "refresher-refreshing-icon" }, hAsync("ion-spinner", { name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
+        return (hAsync(Host, { key: 'bd4122ec149c1ea6c43d5b6dfd7932569bfd8d7e', class: mode }, hAsync("div", { key: '492113883e1ed465fd6b35a8e700b29a8bbb2baf', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (hAsync("div", { class: "refresher-pulling-icon" }, hAsync("div", { class: "spinner-arrow-container" }, hAsync("ion-spinner", { name: this.pullingIcon, paused: true }), mode === 'md' && this.pullingIcon === 'circular' && (hAsync("div", { class: "arrow-container" }, hAsync("ion-icon", { icon: caretBackSharp, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (hAsync("div", { class: "refresher-pulling-icon" }, hAsync("ion-icon", { icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), hAsync("div", { key: '402b0e02cfee42358c4fd690b60c8eb39386569f', class: "refresher-refreshing" }, this.refreshingSpinner && (hAsync("div", { class: "refresher-refreshing-icon" }, hAsync("ion-spinner", { name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
     }
     get el() { return getElement(this); }
     static get cmpMeta() { return {
@@ -31509,7 +31435,7 @@ class Reorder {
     render() {
         const mode = getIonMode$1(this);
         const reorderIcon = mode === 'ios' ? reorderThreeOutline : reorderTwoSharp;
-        return (hAsync(Host, { key: '960d485e6a035eef6957cf7f47bf60b596332d6c', class: mode }, hAsync("slot", { key: '53e2b08d941c744058ffd89d4d0b10a94601c1ff' }, hAsync("ion-icon", { key: '4847e220d738e33f6f9160e49715a7b2fa51072f', icon: reorderIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
+        return (hAsync(Host, { key: '268c3575bdc5ca591e11442a744119028f17ae85', class: mode }, hAsync("slot", { key: '4767aef1d57921060541cd38b0a62ef2d8b3267b' }, hAsync("ion-icon", { key: 'ad5f972dc2449cdd7aba92b06e7f0d2539e9a202', icon: reorderIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -31763,7 +31689,7 @@ class ReorderGroup {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '9bcdd2c0b0c412ea21ee8742ec3d6f1a2cd64413', class: {
+        return (hAsync(Host, { key: '3131c13e939242f1a4e10b4fcee028440b1a04c3', class: {
                 [mode]: true,
                 'reorder-enabled': !this.disabled,
                 'reorder-list-active': this.state !== 0 /* ReorderGroupState.Idle */,
@@ -31871,7 +31797,7 @@ class RippleEffect {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '7c6cd289101ba3964f150fe455aecc730dfd899f', role: "presentation", class: {
+        return (hAsync(Host, { key: '42d95cc2382286e3bc5d68603f8292eb57ba10f5', role: "presentation", class: {
                 [mode]: true,
                 unbounded: this.unbounded,
             } }));
@@ -32813,10 +32739,10 @@ class RouterLink {
             rel: this.rel,
             target: this.target,
         };
-        return (hAsync(Host, { key: 'ea1491e4baaaafb12934cd0cb8e7344fcfbefa2a', onClick: this.onClick, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '64a8781a0e92ddc14e03a60ac3da7f21dd59a2af', onClick: this.onClick, class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'ion-activatable': true,
-            }) }, hAsync("a", Object.assign({ key: '814e74fd1ee318937b4b9e5c56487ebc854d1ce6' }, attrs), hAsync("slot", { key: '79c0d37d19e592684d54bcdb5c438c3d98d9632c' }))));
+            }) }, hAsync("a", Object.assign({ key: 'e2da87e62410c9ada5810f95ab1b9d6c489703a0' }, attrs), hAsync("slot", { key: '201854747f5c867c8f6fadea20ef29b1d221f9db' }))));
     }
     static get style() { return IonRouterLinkStyle0; }
     static get cmpMeta() { return {
@@ -33011,7 +32937,7 @@ class RouterOutlet {
         return true;
     }
     render() {
-        return hAsync("slot", { key: '7006d7db12a87150429ee768824620ba0a44ae1e' });
+        return hAsync("slot", { key: 'b90c776f7924a88b1b36befe7e6f8943fc20dfe3' });
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -33045,7 +32971,7 @@ class Row {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: '0060231104a3ad08a7616f483195bab224029726', class: getIonMode$1(this) }, hAsync("slot", { key: '57289b0c8106bc8ae8c4225c4a7e712d73241d9d' })));
+        return (hAsync(Host, { key: 'e52c499804f7bebc1c4ab8fb69ef1b452eae58c1', class: getIonMode$1(this) }, hAsync("slot", { key: '7808e8156601912e0192fe0b74bdedda2c359e1c' })));
     }
     static get style() { return IonRowStyle0; }
     static get cmpMeta() { return {
@@ -33419,8 +33345,8 @@ class Searchbar {
         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' && (hAsync("button", { key: '3b4670a0e15a1b7a1adb8b17518731fb666b7007', "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" }, hAsync("div", { key: '0514ed9dcb4bf98ab878b0788ece339c2307d67d', "aria-hidden": "true" }, mode === 'md' ? (hAsync("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
-        return (hAsync(Host, { key: '6a1d77da20bd9902747b145e3f1cb1ba0b1afe5c', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses$1(this.color, {
+        const cancelButton = this.showCancelButton !== 'never' && (hAsync("button", { key: 'd219b739da043f04358e5646c9d206d5f39d1b86', "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" }, hAsync("div", { key: 'fa93932c72571e76d5845e15a4d96291591cec61', "aria-hidden": "true" }, mode === 'md' ? (hAsync("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
+        return (hAsync(Host, { key: '72fed78006b21e3e4bc3af31a4eb4545fd3b69da', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'searchbar-animated': animated,
                 'searchbar-disabled': this.disabled,
@@ -33430,14 +33356,14 @@ class Searchbar {
                 'searchbar-has-focus': this.focused,
                 'searchbar-should-show-clear': this.shouldShowClearButton(),
                 'searchbar-should-show-cancel': this.shouldShowCancelButton(),
-            }) }, hAsync("div", { key: 'fb365cbfd23cfa047854efbf83f69efa7196ef73', class: "searchbar-input-container" }, hAsync("input", { key: '3db178da572b2da7aed9382405358b3c8cfe1d40', "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, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }), mode === 'md' && cancelButton, hAsync("ion-icon", { key: '888d67bfc0ac63e64747b28349678bd4171e85f4', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), hAsync("button", { key: '09a64ff7f38ccb87156d234715812bb36cb288f8', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
+            }) }, hAsync("div", { key: 'b392694fa344f9316c5ca15560f49b03d149d9a1', class: "searchbar-input-container" }, hAsync("input", { key: '998a7ab915a20bc952c6b4be645870b6291576b7', "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, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }), mode === 'md' && cancelButton, hAsync("ion-icon", { key: 'fa6f3463a1941368e3cf4eaf7059cf5518d1daeb', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), hAsync("button", { key: 'e6200807543cfb4a685a6ad0481eb2dc5cab38df', "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) }, hAsync("ion-icon", { key: 'ecf12749fba8ce387e03f2775c107456b2ca2ba3', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
+            }, onClick: () => this.onClearInput(true) }, hAsync("ion-icon", { key: '983f4f65730913c5ff93baed855d694983f72e12', "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 {
@@ -33906,14 +33832,14 @@ class Segment {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '78c660f7c6182c75e01f6173c906d03d12ffc9c9', role: "tablist", onClick: this.onClick, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: 'a0b1480e0f95ed9647871c749dbd93ef7ce5b28e', role: "tablist", onClick: this.onClick, class: createColorClasses$1(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,
-            }) }, hAsync("slot", { key: '935b25eb031f16f88aae96d776d13258daea363d' })));
+            }) }, hAsync("slot", { key: '01b9559e574b1b194e6010295cd9bea4b6aeab1b' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -34023,7 +33949,7 @@ class SegmentButton {
         const { checked, type, disabled, hasIcon, hasLabel, layout, segmentEl } = this;
         const mode = getIonMode$1(this);
         const hasSegmentColor = () => (segmentEl === null || segmentEl === void 0 ? void 0 : segmentEl.color) !== undefined;
-        return (hAsync(Host, { key: '441d6ce48b75fdbf636c5ef590d394d85dd5f1fb', class: {
+        return (hAsync(Host, { key: 'fc2262b4b1cb0c3e38b3de672910543211779b98', class: {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
@@ -34039,10 +33965,10 @@ class SegmentButton {
                 'ion-activatable': true,
                 'ion-activatable-instant': true,
                 'ion-focusable': true,
-            } }, hAsync("button", Object.assign({ key: '349d04e943613892352aa277849f8fec2e2ca0d3', "aria-selected": checked ? 'true' : 'false', role: "tab", ref: (el) => (this.nativeEl = el), type: type, class: "button-native", part: "native", disabled: disabled }, this.inheritedAttributes), hAsync("span", { key: '8ce33e12fe0fc8378fd723ba861bf7b77b0dd874', class: "button-inner" }, hAsync("slot", { key: '17eadfd6daa7d5eaeb8863e30b36558927758c61' })), mode === 'md' && hAsync("ion-ripple-effect", null)), hAsync("div", { key: '656a488bcae60d5aeb85846867d633ce22277aeb', part: "indicator", class: {
+            } }, hAsync("button", Object.assign({ key: 'd73ffb0e52b86e41fff7aafac8bd77073b494b28', "aria-selected": checked ? 'true' : 'false', role: "tab", ref: (el) => (this.nativeEl = el), type: type, class: "button-native", part: "native", disabled: disabled }, this.inheritedAttributes), hAsync("span", { key: 'a3d76c3191a508f47782f17602d814920dc26694', class: "button-inner" }, hAsync("slot", { key: 'ae6479c5eec1e0f4077066a6b0ca06c13af0847f' })), mode === 'md' && hAsync("ion-ripple-effect", null)), hAsync("div", { key: '593a4ec0d186520485073dc2fcdf23899924399b', part: "indicator", class: {
                 'segment-button-indicator': true,
                 'segment-button-indicator-animated': true,
-            } }, hAsync("div", { key: '352557a8aad38acc58e74f84b6aea8eda845650a', part: "indicator-background", class: "segment-button-indicator-background" }))));
+            } }, hAsync("div", { key: 'cfbd0d89a928cce0130da46b2be406c03ab3cddb', part: "indicator-background", class: "segment-button-indicator-background" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -34641,7 +34567,7 @@ class Select {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
-        return (hAsync(Host, { key: '1c6a81db77f9bd20ba9c6da5a71a3b0f36b3bb6b', onClick: this.onClick, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '55ce46dd2138cf8f964245542c780fbccb1b3a58', onClick: this.onClick, class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -34657,7 +34583,7 @@ class Select {
                 [`select-justify-${justify}`]: justifyEnabled,
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
-            }) }, hAsync("label", { key: 'a1de0296549e209659677e2838cdfdacf3228c99', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), hAsync("div", { key: 'e3efd9b71f1b802b7785b49573ab20efc7e87500', class: "select-wrapper-inner" }, hAsync("slot", { key: '7b8e026aa1c7aeca549b48237c12aba2b8e307c7', name: "start" }), hAsync("div", { key: 'e47186a1aa13d7590f5628088a4415a7b620e3c2', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), hAsync("slot", { key: '441b5076f2e2fbca46f32d1f01c403cba1934b55', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && hAsync("div", { class: "select-highlight" }))));
+            }) }, hAsync("label", { key: '41b640595034c59e2044a080f36edc92639fc3df', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), hAsync("div", { key: '52cd7d7813835f77782d2205970de898ab04922f', class: "select-wrapper-inner" }, hAsync("slot", { key: 'eca1ab2e4fcd336e4ac0a7d92cf1f9430222c603', name: "start" }), hAsync("div", { key: '0d8ea4e0135cd9d3b066f30ab3a3b84b1c97138c', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), hAsync("slot", { key: 'e6959eb1c5688c8a7e54fbc78fa6823042fcc31a', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && hAsync("div", { class: "select-highlight" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -34748,7 +34674,7 @@ class SelectOption {
         this.value = undefined;
     }
     render() {
-        return hAsync(Host, { key: '6edad0b52da16621ce55335d732bac1e27e485dc', role: "option", id: this.inputId, class: getIonMode$1(this) });
+        return hAsync(Host, { key: 'e46b062b71c143792bb74527ba4980e02edc14b3', role: "option", id: this.inputId, class: getIonMode$1(this) });
     }
     get el() { return getElement(this); }
     static get style() { return IonSelectOptionStyle0; }
@@ -34868,7 +34794,7 @@ class SelectPopover {
     render() {
         const { header, message, options, subHeader } = this;
         const hasSubHeaderOrMessage = subHeader !== undefined || message !== undefined;
-        return (hAsync(Host, { key: '4ef1871f74e2ba6a5bd16d2c407d73edffb87f1f', class: getIonMode$1(this) }, hAsync("ion-list", { key: '7e8e5f1e129be79f0bcd09bcaca6c09606ea0195' }, header !== undefined && hAsync("ion-list-header", null, header), hasSubHeaderOrMessage && (hAsync("ion-item", null, hAsync("ion-label", { class: "ion-text-wrap" }, subHeader !== undefined && hAsync("h3", null, subHeader), message !== undefined && hAsync("p", null, message)))), this.renderOptions(options))));
+        return (hAsync(Host, { key: '07c094ea0b8ba353f6147a912eedc3c75719fd4e', class: getIonMode$1(this) }, hAsync("ion-list", { key: '4d110e3e036bbfecc418d0e37fc9bc4ec0c18674' }, header !== undefined && hAsync("ion-list-header", null, header), hasSubHeaderOrMessage && (hAsync("ion-item", null, hAsync("ion-label", { class: "ion-text-wrap" }, subHeader !== undefined && hAsync("h3", null, subHeader), message !== undefined && hAsync("p", null, message)))), this.renderOptions(options))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -34916,11 +34842,11 @@ 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$1(this);
-        return (hAsync(Host, { key: '8e398fb1d49ec076737c3c7cac58765fee3267b1', class: {
+        return (hAsync(Host, { key: 'e0a84e5017cde072087d5580dd370bbd36106f99', class: {
                 [mode]: true,
                 'skeleton-text-animated': animated,
                 'in-media': inMedia,
-            } }, hAsync("span", { key: '1fff010f1dfdc2c0985f419299a89cd4d498c340' }, "\u00A0")));
+            } }, hAsync("span", { key: '3274a42e3fd4f1b9fb285f4b982416e1f68ac766' }, "\u00A0")));
     }
     get el() { return getElement(this); }
     static get style() { return IonSkeletonTextStyle0; }
@@ -34973,7 +34899,7 @@ class Spinner {
                 svgs.push(buildLine(spinner, duration, i, spinner.lines));
             }
         }
-        return (hAsync(Host, { key: '93010f0f8636c369faa896a36b47779c7f9aa363', class: createColorClasses$1(self.color, {
+        return (hAsync(Host, { key: 'bfb8b93a58da60686f6a1e6b8a5e0d1b7dea1f5d', class: createColorClasses$1(self.color, {
                 [mode]: true,
                 [`spinner-${spinnerName}`]: true,
                 'spinner-paused': self.paused || config.getBoolean('_testing'),
@@ -35073,12 +34999,12 @@ class SplitPane {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '0db6318902ee7c95d5ded58299bb07a25388bf5c', class: {
+        return (hAsync(Host, { key: 'ea58eb10f1e0040f8b193684085dcf0b6fb70736', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`split-pane-${mode}`]: true,
                 'split-pane-visible': this.visible,
-            } }, hAsync("slot", { key: '504c0e4cc42840a4349c7a59eb111844d97d0bf2' })));
+            } }, hAsync("slot", { key: '568992064ae695fb4de01aef59d6f6e3359e1e0f' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -35147,10 +35073,10 @@ class Tab {
     }
     render() {
         const { tab, active, component } = this;
-        return (hAsync(Host, { key: '4861b1addcdb41b9953a440bfa24b8f2c8b4e70d', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
+        return (hAsync(Host, { key: 'e67484767fa4aab6bc90db390a90eb5e24e51f14', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
                 'ion-page': component === undefined,
                 'tab-hidden': !active,
-            } }, hAsync("slot", { key: 'd23c525cd5a1480ffd40542b637e673c6d0dd934' })));
+            } }, hAsync("slot", { key: 'ad6523d5a128d457d09e88739f8218cdf16152de' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -35228,11 +35154,11 @@ class TabBar {
         const { color, translucent, keyboardVisible } = this;
         const mode = getIonMode$1(this);
         const shouldHide = keyboardVisible && this.el.getAttribute('slot') !== 'top';
-        return (hAsync(Host, { key: '8173f126d617337f8b46df105d0bce9ddc68b515', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: '2d30e75e19d86a1eb65cff8ddab0cb059f59b224', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses$1(color, {
                 [mode]: true,
                 'tab-bar-translucent': translucent,
                 'tab-bar-hidden': shouldHide,
-            }) }, hAsync("slot", { key: '348c9126898f7403dee1fff6a63f7b8bebdea035' })));
+            }) }, hAsync("slot", { key: '5b739f1bbe21c887b7810383edd2f67143ac086e' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -35330,7 +35256,7 @@ class TabButton {
             rel,
             target,
         };
-        return (hAsync(Host, { key: '1a3c381bb81e1c0dfcdfb2e58e1fe74c2c7a56ac', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
+        return (hAsync(Host, { key: 'b37743b20b93c27ffb0094b35545292533f9d30f', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
                 [mode]: true,
                 'tab-selected': selected,
                 'tab-disabled': disabled,
@@ -35342,7 +35268,7 @@ class TabButton {
                 'ion-activatable': true,
                 'ion-selectable': true,
                 'ion-focusable': true,
-            } }, hAsync("a", Object.assign({ key: 'f12a66bc4f869a25d203a042757ecb331cb1598c' }, attrs, { class: "button-native", part: "native", role: "tab", "aria-selected": selected ? 'true' : null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? '-1' : undefined }, inheritedAttributes), hAsync("span", { key: 'e7a5bdec004ae80cc479911ad2aab1e4decff3bc', class: "button-inner" }, hAsync("slot", { key: '07f1d1704fdf3ef45da4b698eaec1164b3fc0bf4' })), mode === 'md' && hAsync("ion-ripple-effect", { type: "unbounded" }))));
+            } }, hAsync("a", Object.assign({ key: '7dd2b3aaa96f64a8b7411730ed8b201466a97162' }, attrs, { class: "button-native", part: "native", role: "tab", "aria-selected": selected ? 'true' : null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? '-1' : undefined }, inheritedAttributes), hAsync("span", { key: 'cb328541793b6aa469d5d3bff662d2efa56dc977', class: "button-inner" }, hAsync("slot", { key: '904a1b063f481ac86d5bea967a375addc9c96471' })), mode === 'md' && hAsync("ion-ripple-effect", { type: "unbounded" }))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -35508,7 +35434,7 @@ class Tabs {
         return Array.from(this.el.querySelectorAll('ion-tab'));
     }
     render() {
-        return (hAsync(Host, { key: '27416d233c9b2b14498f7d77cd809b26a37da75b', onIonTabButtonClick: this.onTabClicked }, hAsync("slot", { key: '19f237ba72e75f5bb7fbe35bee7e91a19566a724', name: "top" }), hAsync("div", { key: '01143ca8a853eec525311c9f9fa521867f06f767', class: "tabs-inner" }, hAsync("slot", { key: '790f8c417135a64e6ee4c8fa5ad309d6d0cd00de' })), hAsync("slot", { key: '016959a52e07dcff0b86e7db0794e2d1747b3609', name: "bottom" })));
+        return (hAsync(Host, { key: 'e2cac6a2e54514f31cfe65692e34e88d530b204f', onIonTabButtonClick: this.onTabClicked }, hAsync("slot", { key: '53bc64f37aebb9a68c6e2db2c89ec6d39cd64bbd', name: "top" }), hAsync("div", { key: '72f4f0ae53518631d6c1b6276da3f63147c28cfc', class: "tabs-inner" }, hAsync("slot", { key: '79f1eece652cf00a3dd8359b68e68059816ff704' })), hAsync("slot", { key: '3fbaf52447720ee14c7db06f2bf71a92093847f4', name: "bottom" })));
     }
     get el() { return getElement(this); }
     static get style() { return IonTabsStyle0; }
@@ -35550,9 +35476,9 @@ class Text {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '03c3424a63ff7c436d73f759c6e5a30133e1871f', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '9b5decc6dfca4fbaf0fe42696a9833ffee269a7d', class: createColorClasses$1(this.color, {
                 [mode]: true,
-            }) }, hAsync("slot", { key: '0c6c873cf28a093dd45441dff7c3a5b382bc2a9b' })));
+            }) }, hAsync("slot", { key: '5b822dcc0f6255819cec7626d0c0f7f9873aaab9' })));
     }
     static get style() { return IonTextStyle0; }
     static get cmpMeta() { return {
@@ -35920,7 +35846,7 @@ class Textarea {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (hAsync(Host, { key: '1994b7a16356fc5fcaead042588ceaafcb80a894', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '3adbec7986ecb5a274ecf341b938432c3d04705a', class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -35929,7 +35855,7 @@ class Textarea {
                 [`textarea-shape-${shape}`]: shape !== undefined,
                 [`textarea-label-placement-${labelPlacement}`]: true,
                 'textarea-disabled': disabled,
-            }) }, hAsync("label", { key: 'e7b8610e92ceebe19fd1d17c80134acb5d4f52d1', class: "textarea-wrapper", htmlFor: inputId }, this.renderLabelContainer(), hAsync("div", { key: '522308f0d38c481b56ed99f43fc7c3747f9c1263', class: "textarea-wrapper-inner" }, hAsync("div", { key: '0e65d62e91815cbb954d3a286813ed75b4dc1500', class: "start-slot-wrapper" }, hAsync("slot", { key: 'e88f83ec1c62c7e9d97837dc9fdcc6f30be6dacc', name: "start" })), hAsync("div", { key: '4d26c34c2468acfd962c6a4a73ad6057342aef44', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, hAsync("textarea", Object.assign({ key: 'e6135e0a61fb5eb2b4f8f7da70ee49a28567c954', class: "native-textarea", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value)), hAsync("div", { key: '1946c844cdbeefb989b1a4033050a851b367084f', class: "end-slot-wrapper" }, hAsync("slot", { key: 'ac34fa1edaddb8b377310a2ce88fa651a6e73d3c', name: "end" }))), shouldRenderHighlight && hAsync("div", { class: "textarea-highlight" })), this.renderBottomContent()));
+            }) }, hAsync("label", { key: '9df12985193c4fa6a277b71bcac668d7e61f02ac', class: "textarea-wrapper", htmlFor: inputId }, this.renderLabelContainer(), hAsync("div", { key: 'b39ac1d580d3bcaad8cc028e703960cd2277fa10', class: "textarea-wrapper-inner" }, hAsync("div", { key: 'b2d6971c51683fe67121c4d0e4ac8e17723fa59d', class: "start-slot-wrapper" }, hAsync("slot", { key: 'b229d482a4ff208858dffc6ff3a5ad661a2a7288', name: "start" })), hAsync("div", { key: 'b2d2770afa7012f055463df6a302bed685b46107', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, hAsync("textarea", Object.assign({ key: 'a18150f8d381e0569f6d71867451ce8176157521', class: "native-textarea", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value)), hAsync("div", { key: 'f20f6e5c9b339cff4bdd7bffe59afd27b05ce8b9', class: "end-slot-wrapper" }, hAsync("slot", { key: '64a10ebdb4a89ec1c3d34c29e8c9403d3d788f3b', name: "end" }))), shouldRenderHighlight && hAsync("div", { class: "textarea-highlight" })), this.renderBottomContent()));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -35991,7 +35917,7 @@ class Thumbnail {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: 'a68f3a4857f63f4cf06ec89932e9dc4c434d4a9b', class: getIonMode$1(this) }, hAsync("slot", { key: 'fd132f56a3ba8928d32d952b27ceb342a0e59aed' })));
+        return (hAsync(Host, { key: '68bac4e80f5d27131690fd20dfabff2618743206', class: getIonMode$1(this) }, hAsync("slot", { key: '89f46a686288428391cdfaef3384824751ae3d05' })));
     }
     static get style() { return IonThumbnailStyle0; }
     static get cmpMeta() { return {
@@ -36820,9 +36746,9 @@ class Toast {
         if (layout === 'stacked' && startButtons.length > 0 && endButtons.length > 0) {
             printIonWarning('This toast is using start and end buttons with the stacked toast layout. We recommend following the best practice of using either start or end buttons with the stacked toast layout.', el);
         }
-        return (hAsync(Host, Object.assign({ key: '9575ee7d0195f7f2a95486d4b193beb58d966941', tabindex: "-1" }, this.htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: '883ac055d9c73336b8912bdf25e18d16cc6b81fe', tabindex: "-1" }, this.htmlAttributes, { style: {
                 zIndex: `${60000 + this.overlayIndex}`,
-            }, class: createColorClasses$1(this.color, Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), hAsync("div", { key: 'cf152835fe8d8cc499214443b5fa23bf5ef076a1', class: wrapperClass }, hAsync("div", { key: 'c0d331df574399e541fcefb3987777692be10e6c', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (hAsync("ion-icon", { class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), hAsync("div", { key: '3d6ffa739935f5c92d81ccaccb673cb46b794472', class: "toast-content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
+            }, class: createColorClasses$1(this.color, Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), hAsync("div", { key: 'b34cc9f7cfa69a8d9ce343686aa14d0d0c174e97', class: wrapperClass }, hAsync("div", { key: '08ff305e319454116f24a4d354c50949905411d6', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (hAsync("ion-icon", { class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), hAsync("div", { key: '854f71fc8a2ed078626011b07ee599cd17312a86', class: "toast-content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -37042,7 +36968,7 @@ class Toggle {
         const value = this.getValue();
         const rtl = isRTL$1(el) ? 'rtl' : 'ltr';
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (hAsync(Host, { key: '1ff490557ae9f695646fab73f4e8eb5479c39194', onClick: this.onClick, class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: '3c0acc5498682a610e7a6f095590ad79391e1ba4', onClick: this.onClick, class: createColorClasses$1(color, {
                 [mode]: true,
                 'in-item': hostContext('ion-item', el),
                 'toggle-activated': activated,
@@ -37052,10 +36978,10 @@ class Toggle {
                 [`toggle-alignment-${alignment}`]: true,
                 [`toggle-label-placement-${labelPlacement}`]: true,
                 [`toggle-${rtl}`]: true,
-            }) }, hAsync("label", { key: '9ef2ac21e677ef8e06e6265578e84c65268e2f73', class: "toggle-wrapper" }, hAsync("input", Object.assign({ key: 'c39eb29126454211a99be4fad6e421dcdebdae71', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, this.inheritedAttributes)), hAsync("div", { key: '379d33ef5714e1d69aa7dd4a6fd2576647e768ad', class: {
+            }) }, hAsync("label", { key: '68133afe76d290ebcb8f05883a27875529f0bfff', class: "toggle-wrapper" }, hAsync("input", Object.assign({ key: 'abd6aad2a3e62fbffb80d5c3dbdc57182bc97fab', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, this.inheritedAttributes)), hAsync("div", { key: '8e70ddd2b4daada4bf16e85e56df9078116933f9', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !this.hasLabel,
-            }, part: "label" }, hAsync("slot", { key: '7dc7e14558361468d5d842e4235b18e09bdd3805' })), hAsync("div", { key: 'ac1cd965163dff435d76db51c69b2285770a1ea0', class: "native-wrapper" }, this.renderToggleControl()))));
+            }, part: "label" }, hAsync("slot", { key: 'eae25cdeefe1e6589f06b3a2568522e74cf44d66' })), hAsync("div", { key: 'df9adddd1d8d73c8a23e1e91261d84c876ac5935', class: "native-wrapper" }, this.renderToggleControl()))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -37159,10 +37085,10 @@ class Toolbar {
         this.childrenStyles.forEach((value) => {
             Object.assign(childStyles, value);
         });
-        return (hAsync(Host, { key: 'da75d7f5702b0afe180387f65ce9e7f9c8309ccc', class: Object.assign(Object.assign({}, childStyles), createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: 'f72d6a7ed20c88ba15d64050acfc20f320569862', class: Object.assign(Object.assign({}, childStyles), createColorClasses$1(this.color, {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
-            })) }, hAsync("div", { key: '9c443426f88e2f9be54267ed47f4383c4dfeec7b', class: "toolbar-background" }), hAsync("div", { key: '7c316762df2b307121d6dc596cb3cde9e38242dd', class: "toolbar-container" }, hAsync("slot", { key: '96d29f9768ef136c5f60f69e669e19c44ef9cc05', name: "start" }), hAsync("slot", { key: '5192bf9c9b4c4e4d2025a0e10708360514d42d2b', name: "secondary" }), hAsync("div", { key: '7ba4288f9a2fb6c4e31b22ff9c385252a2827abf', class: "toolbar-content" }, hAsync("slot", { key: 'ad4ffe0ef333456b1369f57952a367b786d9e148' })), hAsync("slot", { key: '633735d0fb620d828e98b1c1eebfd0985a09db6c', name: "primary" }), hAsync("slot", { key: '91af4b9c44e897ecc974a8cc2725791e1939367f', name: "end" }))));
+            })) }, hAsync("div", { key: 'ccf18eea9756ca56ca828b05bd3f86cf8a32e24c', class: "toolbar-background" }), hAsync("div", { key: '1fa699d8e17f57b42a52d47a1bdb793f2cbbfe5d', class: "toolbar-container" }, hAsync("slot", { key: 'ef4d877bad0918eefdc67fa7aa258024a58d26ef', name: "start" }), hAsync("slot", { key: '41858db7a8d58c9165952c9336731d621ec3c2b8', name: "secondary" }), hAsync("div", { key: '577770b9346b48a0fa1412cbdbd9393d553d2286', class: "toolbar-content" }, hAsync("slot", { key: 'ae47b29e1f7d2c3dde7a170c9737b48f075139c2' })), hAsync("slot", { key: 'cfbf7879daf1a38fee434335abff936d8f3690e0', name: "primary" }), hAsync("slot", { key: 'ed3a66248f43e0749f6aef9fb78ea4f5034c0774', name: "end" }))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -37212,11 +37138,11 @@ class ToolbarTitle {
     render() {
         const mode = getIonMode$1(this);
         const size = this.getSize();
-        return (hAsync(Host, { key: 'bb4edf1ed209af94f6db20de9a7523c3500f6e32', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '53fb524f6763307bd0a1f077ada8e9ee82c865c0', class: createColorClasses$1(this.color, {
                 [mode]: true,
                 [`title-${size}`]: true,
                 'title-rtl': document.dir === 'rtl',
-            }) }, hAsync("div", { key: 'd5857d84670a792aa74096a2efe03c3f17b98417', class: "toolbar-title" }, hAsync("slot", { key: '596f3361b3182df48fbc14ef57c11702fac12cd1' }))));
+            }) }, hAsync("div", { key: '5957214d78b666fd0ba988c3f4cc18368a92deac', class: "toolbar-title" }, hAsync("slot", { key: '444b2019e079d5ed6decbfc4db488757fcf70094' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {