@amwaljs/checkout-button 0.3.0 → 0.3.2

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

@@ -1,1910 +0,0 @@
-import { r as registerInstance, h, H as Host, d as createEvent, g as getElement, e as readTask, o as forceUpdate, w as writeTask } from './index-xxOnfNPU.js';
-import { g as getIonMode, a as isPlatform } from './ionic-global-BbOE2Sur.js';
-import { j as inheritAriaAttributes, m as renderHiddenInput, h as hasLazyBuild, c as componentOnReady, a as clamp, i as inheritAttributes, r as raf, b as addEventListener, d as removeEventListener } from './helpers-BuFc0hrS.js';
-import { c as checkInvalidState } from './validity-DJztqcrH.js';
-import { c as createColorClasses, h as hostContext, o as openURL } from './theme-DiVJyqlX.js';
-import { i as isRTL } from './dir-C53feagD.js';
-import { g as getScrollElement, b as findIonContent, p as printIonContentErrorMsg } from './index-Ul_idjjE.js';
-import { y as chevronForward } from './index-BmlsNFZH.js';
-import { i as isOptionSelected } from './compare-with-utils-sObYyvOy.js';
-
-const buttonsIosCss = () => `.sc-ion-buttons-ios-h{display:flex;align-items:center;transform:translateZ(0);z-index:99}.sc-ion-buttons-ios-s ion-button{--padding-top:0;--padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}.sc-ion-buttons-ios-s ion-button{--padding-top:3px;--padding-bottom:3px;--padding-start:5px;--padding-end:5px;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px;min-height:32px}.sc-ion-buttons-ios-s .button-has-icon-only{--padding-top:0;--padding-bottom:0}.sc-ion-buttons-ios-s ion-button:not(.button-round){--border-radius:4px}.sc-ion-buttons-ios-h.ion-color.sc-ion-buttons-ios-s .button,.ion-color .sc-ion-buttons-ios-h.sc-ion-buttons-ios-s .button{--color:initial;--border-color:initial;--background-focused:var(--ion-color-contrast)}.sc-ion-buttons-ios-h.ion-color.sc-ion-buttons-ios-s .button-solid,.ion-color .sc-ion-buttons-ios-h.sc-ion-buttons-ios-s .button-solid{--background:var(--ion-color-contrast);--background-focused:#000;--background-focused-opacity:.12;--background-activated:#000;--background-activated-opacity:.12;--background-hover:var(--ion-color-base);--background-hover-opacity:0.45;--color:var(--ion-color-base);--color-focused:var(--ion-color-base)}.sc-ion-buttons-ios-h.ion-color.sc-ion-buttons-ios-s .button-clear,.ion-color .sc-ion-buttons-ios-h.sc-ion-buttons-ios-s .button-clear{--color-activated:var(--ion-color-contrast);--color-focused:var(--ion-color-contrast)}.sc-ion-buttons-ios-h.ion-color.sc-ion-buttons-ios-s .button-outline,.ion-color .sc-ion-buttons-ios-h.sc-ion-buttons-ios-s .button-outline{--color-activated:var(--ion-color-base);--color-focused:var(--ion-color-contrast);--background-activated:var(--ion-color-contrast)}.sc-ion-buttons-ios-s .button-clear,.sc-ion-buttons-ios-s .button-outline{--background-activated:transparent;--background-focused:currentColor;--background-hover:transparent}.sc-ion-buttons-ios-s .button-solid:not(.ion-color){--background-focused:#000;--background-focused-opacity:.12;--background-activated:#000;--background-activated-opacity:.12}.sc-ion-buttons-ios-s ion-icon[slot=start]{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-margin-end:0.3em;margin-inline-end:0.3em;font-size:1.41em;line-height:0.67}.sc-ion-buttons-ios-s ion-icon[slot=end]{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-margin-start:0.4em;margin-inline-start:0.4em;font-size:1.41em;line-height:0.67}.sc-ion-buttons-ios-s ion-icon[slot=icon-only]{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;font-size:1.65em;line-height:0.67}`;
-
-const buttonsMdCss = () => `.sc-ion-buttons-md-h{display:flex;align-items:center;transform:translateZ(0);z-index:99}.sc-ion-buttons-md-s ion-button{--padding-top:0;--padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}.sc-ion-buttons-md-s ion-button{--padding-top:3px;--padding-bottom:3px;--padding-start:8px;--padding-end:8px;--box-shadow:none;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px;min-height:32px}.sc-ion-buttons-md-s .button-has-icon-only{--padding-top:0;--padding-bottom:0}.sc-ion-buttons-md-s ion-button:not(.button-round){--border-radius:2px}.sc-ion-buttons-md-h.ion-color.sc-ion-buttons-md-s .button,.ion-color .sc-ion-buttons-md-h.sc-ion-buttons-md-s .button{--color:initial;--color-focused:var(--ion-color-contrast);--color-hover:var(--ion-color-contrast);--background-activated:transparent;--background-focused:var(--ion-color-contrast);--background-hover:var(--ion-color-contrast)}.sc-ion-buttons-md-h.ion-color.sc-ion-buttons-md-s .button-solid,.ion-color .sc-ion-buttons-md-h.sc-ion-buttons-md-s .button-solid{--background:var(--ion-color-contrast);--background-activated:transparent;--background-focused:var(--ion-color-shade);--background-hover:var(--ion-color-base);--color:var(--ion-color-base);--color-focused:var(--ion-color-base);--color-hover:var(--ion-color-base)}.sc-ion-buttons-md-h.ion-color.sc-ion-buttons-md-s .button-outline,.ion-color .sc-ion-buttons-md-h.sc-ion-buttons-md-s .button-outline{--border-color:var(--ion-color-contrast)}.sc-ion-buttons-md-s .button-has-icon-only.button-clear{--padding-top:12px;--padding-end:12px;--padding-bottom:12px;--padding-start:12px;--border-radius:50%;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;width:3rem;height:3rem}.sc-ion-buttons-md-s .button{--background-hover:currentColor}.sc-ion-buttons-md-s .button-solid{--color:var(--ion-toolbar-background, var(--ion-background-color, #fff));--background:var(--ion-toolbar-color, var(--ion-text-color, #424242));--background-activated:transparent;--background-focused:currentColor}.sc-ion-buttons-md-s .button-outline{--color:initial;--background:transparent;--background-activated:transparent;--background-focused:currentColor;--background-hover:currentColor;--border-color:currentColor}.sc-ion-buttons-md-s .button-clear{--color:initial;--background:transparent;--background-activated:transparent;--background-focused:currentColor;--background-hover:currentColor}.sc-ion-buttons-md-s ion-icon[slot=start]{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-margin-end:0.3em;margin-inline-end:0.3em;font-size:1.4em}.sc-ion-buttons-md-s ion-icon[slot=end]{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-margin-start:0.4em;margin-inline-start:0.4em;font-size:1.4em}.sc-ion-buttons-md-s ion-icon[slot=icon-only]{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;font-size:1.8em}`;
-
-const Buttons = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        /**
-         * If true, buttons will disappear when its
-         * parent toolbar has fully collapsed if the toolbar
-         * is not the first toolbar. If the toolbar is the
-         * first toolbar, the buttons will be hidden and will
-         * only be shown once all toolbars have fully collapsed.
-         *
-         * Only applies in `ios` mode with `collapse` set to
-         * `true` on `ion-header`.
-         *
-         * Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)
-         */
-        this.collapse = false;
-    }
-    render() {
-        const mode = getIonMode(this);
-        return (h(Host, { key: '58c1fc5eb867d0731c63549b1ccb3ec3bbbe6e1b', class: {
-                [mode]: true,
-                ['buttons-collapse']: this.collapse,
-            } }, h("slot", { key: '0c8f95b9840c8fa0c4e50be84c5159620a3eb5c8' })));
-    }
-};
-Buttons.style = {
-    ios: buttonsIosCss(),
-    md: buttonsMdCss()
-};
-
-const checkboxIosCss = () => `:host{--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;user-select:none;z-index:2}:host(.in-item){flex:1 1 0;width:100%;height:100%}:host([slot=start]),:host([slot=end]){flex:initial;width:auto}:host(.ion-color){--checkbox-background-checked:var(--ion-color-base);--border-color-checked:var(--ion-color-base);--checkmark-color:var(--ion-color-contrast)}.checkbox-wrapper{display:flex;flex-grow:1;align-items:center;justify-content:space-between;height:inherit;cursor:inherit}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item) .label-text-wrapper,:host(.in-item:not(.checkbox-label-placement-stacked):not([slot])) .native-wrapper{margin-top:10px;margin-bottom:10px}:host(.in-item.checkbox-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.checkbox-label-placement-stacked) .native-wrapper{margin-bottom:10px}.label-text-wrapper-hidden{display:none}input{display:none}.native-wrapper{display:flex;align-items:center}.checkbox-icon{border-radius:var(--border-radius);position:relative;width:var(--size);height:var(--size);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--checkbox-background);box-sizing:border-box}.checkbox-icon path{fill:none;stroke:var(--checkmark-color);stroke-width:var(--checkmark-width);opacity:0}.checkbox-bottom{padding-top:4px;display:flex;justify-content:space-between;font-size:0.75rem;white-space:normal}:host(.checkbox-label-placement-stacked) .checkbox-bottom{font-size:1rem}.checkbox-bottom .error-text{display:none;color:var(--ion-color-danger, #c5000f)}.checkbox-bottom .helper-text{display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}:host(.ion-touched.ion-invalid) .checkbox-bottom .error-text{display:block}:host(.ion-touched.ion-invalid) .checkbox-bottom .helper-text{display:none}:host(.checkbox-label-placement-start) .checkbox-wrapper{flex-direction:row}:host(.checkbox-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.checkbox-label-placement-end) .checkbox-wrapper{flex-direction:row-reverse;justify-content:start}:host(.checkbox-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.checkbox-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.checkbox-label-placement-fixed) .label-text-wrapper{flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.checkbox-label-placement-stacked) .checkbox-wrapper{flex-direction:column;text-align:center}:host(.checkbox-label-placement-stacked) .label-text-wrapper{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{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{transform-origin:right top}@supports selector(:dir(rtl)){:host(.checkbox-label-placement-stacked.checkbox-alignment-start:dir(rtl)) .label-text-wrapper{transform-origin:right top}}:host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper{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{transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){:host(.checkbox-label-placement-stacked.checkbox-alignment-center:dir(rtl)) .label-text-wrapper{transform-origin:calc(100% - center) top}}:host(.checkbox-justify-space-between) .checkbox-wrapper{justify-content:space-between}:host(.checkbox-justify-start) .checkbox-wrapper{justify-content:start}:host(.checkbox-justify-end) .checkbox-wrapper{justify-content:end}:host(.checkbox-alignment-start) .checkbox-wrapper{align-items:start}:host(.checkbox-alignment-center) .checkbox-wrapper{align-items:center}:host(.checkbox-justify-space-between),:host(.checkbox-justify-start),:host(.checkbox-justify-end),:host(.checkbox-alignment-start),:host(.checkbox-alignment-center){display:block}:host(.checkbox-checked) .checkbox-icon,:host(.checkbox-indeterminate) .checkbox-icon{border-color:var(--border-color-checked);background:var(--checkbox-background-checked)}:host(.checkbox-checked) .checkbox-icon path,:host(.checkbox-indeterminate) .checkbox-icon path{opacity:1}:host(.checkbox-disabled){pointer-events:none}:host{--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){opacity:0.3}`;
-
-const checkboxMdCss = () => `:host{--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;user-select:none;z-index:2}:host(.in-item){flex:1 1 0;width:100%;height:100%}:host([slot=start]),:host([slot=end]){flex:initial;width:auto}:host(.ion-color){--checkbox-background-checked:var(--ion-color-base);--border-color-checked:var(--ion-color-base);--checkmark-color:var(--ion-color-contrast)}.checkbox-wrapper{display:flex;flex-grow:1;align-items:center;justify-content:space-between;height:inherit;cursor:inherit}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item) .label-text-wrapper,:host(.in-item:not(.checkbox-label-placement-stacked):not([slot])) .native-wrapper{margin-top:10px;margin-bottom:10px}:host(.in-item.checkbox-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.checkbox-label-placement-stacked) .native-wrapper{margin-bottom:10px}.label-text-wrapper-hidden{display:none}input{display:none}.native-wrapper{display:flex;align-items:center}.checkbox-icon{border-radius:var(--border-radius);position:relative;width:var(--size);height:var(--size);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--checkbox-background);box-sizing:border-box}.checkbox-icon path{fill:none;stroke:var(--checkmark-color);stroke-width:var(--checkmark-width);opacity:0}.checkbox-bottom{padding-top:4px;display:flex;justify-content:space-between;font-size:0.75rem;white-space:normal}:host(.checkbox-label-placement-stacked) .checkbox-bottom{font-size:1rem}.checkbox-bottom .error-text{display:none;color:var(--ion-color-danger, #c5000f)}.checkbox-bottom .helper-text{display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}:host(.ion-touched.ion-invalid) .checkbox-bottom .error-text{display:block}:host(.ion-touched.ion-invalid) .checkbox-bottom .helper-text{display:none}:host(.checkbox-label-placement-start) .checkbox-wrapper{flex-direction:row}:host(.checkbox-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.checkbox-label-placement-end) .checkbox-wrapper{flex-direction:row-reverse;justify-content:start}:host(.checkbox-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.checkbox-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.checkbox-label-placement-fixed) .label-text-wrapper{flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.checkbox-label-placement-stacked) .checkbox-wrapper{flex-direction:column;text-align:center}:host(.checkbox-label-placement-stacked) .label-text-wrapper{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{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{transform-origin:right top}@supports selector(:dir(rtl)){:host(.checkbox-label-placement-stacked.checkbox-alignment-start:dir(rtl)) .label-text-wrapper{transform-origin:right top}}:host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper{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{transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){:host(.checkbox-label-placement-stacked.checkbox-alignment-center:dir(rtl)) .label-text-wrapper{transform-origin:calc(100% - center) top}}:host(.checkbox-justify-space-between) .checkbox-wrapper{justify-content:space-between}:host(.checkbox-justify-start) .checkbox-wrapper{justify-content:start}:host(.checkbox-justify-end) .checkbox-wrapper{justify-content:end}:host(.checkbox-alignment-start) .checkbox-wrapper{align-items:start}:host(.checkbox-alignment-center) .checkbox-wrapper{align-items:center}:host(.checkbox-justify-space-between),:host(.checkbox-justify-start),:host(.checkbox-justify-end),:host(.checkbox-alignment-start),:host(.checkbox-alignment-center){display:block}:host(.checkbox-checked) .checkbox-icon,:host(.checkbox-indeterminate) .checkbox-icon{border-color:var(--border-color-checked);background:var(--checkbox-background-checked)}:host(.checkbox-checked) .checkbox-icon path,:host(.checkbox-indeterminate) .checkbox-icon path{opacity:1}:host(.checkbox-disabled){pointer-events:none}:host{--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{stroke-dasharray:30;stroke-dashoffset:30}:host(.checkbox-checked) .checkbox-icon path,:host(.checkbox-indeterminate) .checkbox-icon path{stroke-dashoffset:0;transition:stroke-dashoffset 90ms linear 90ms}:host(.checkbox-disabled) .label-text-wrapper{opacity:0.38}:host(.checkbox-disabled) .native-wrapper{opacity:0.63}`;
-
-const Checkbox = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.ionChange = createEvent(this, "ionChange", 7);
-        this.ionFocus = createEvent(this, "ionFocus", 7);
-        this.ionBlur = createEvent(this, "ionBlur", 7);
-        this.inputId = `ion-cb-${checkboxIds++}`;
-        this.inputLabelId = `${this.inputId}-lbl`;
-        this.helperTextId = `${this.inputId}-helper-text`;
-        this.errorTextId = `${this.inputId}-error-text`;
-        this.inheritedAttributes = {};
-        /**
-         * The name of the control, which is submitted with the form data.
-         */
-        this.name = this.inputId;
-        /**
-         * If `true`, the checkbox is selected.
-         */
-        this.checked = false;
-        /**
-         * If `true`, the checkbox will visually appear as indeterminate.
-         */
-        this.indeterminate = false;
-        /**
-         * If `true`, the user cannot interact with the checkbox.
-         */
-        this.disabled = false;
-        /**
-         * The value of the checkbox does not mean if it's checked or not, use the `checked`
-         * property for that.
-         *
-         * The value of a checkbox is analogous to the value of an `<input type="checkbox">`,
-         * it's only used when the checkbox participates in a native `<form>`.
-         */
-        this.value = 'on';
-        /**
-         * Where to place the label relative to the checkbox.
-         * `"start"`: The label will appear to the left of the checkbox in LTR and to the right in RTL.
-         * `"end"`: The label will appear to the right of the checkbox in LTR and to the left in RTL.
-         * `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
-         * `"stacked"`: The label will appear above the checkbox regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
-         */
-        this.labelPlacement = 'start';
-        /**
-         * If true, screen readers will announce it as a required field. This property
-         * works only for accessibility purposes, it will not prevent the form from
-         * submitting if the value is invalid.
-         */
-        this.required = false;
-        /**
-         * Track validation state for proper aria-live announcements.
-         */
-        this.isInvalid = false;
-        /**
-         * Sets the checked property and emits
-         * the ionChange event. Use this to update the
-         * checked state in response to user-generated
-         * actions such as a click.
-         */
-        this.setChecked = (state) => {
-            const isChecked = (this.checked = state);
-            this.ionChange.emit({
-                checked: isChecked,
-                value: this.value,
-            });
-        };
-        this.toggleChecked = (ev) => {
-            ev.preventDefault();
-            this.setChecked(!this.checked);
-            this.indeterminate = false;
-        };
-        this.onFocus = () => {
-            this.ionFocus.emit();
-        };
-        this.onBlur = () => {
-            this.ionBlur.emit();
-        };
-        this.onKeyDown = (ev) => {
-            if (ev.key === ' ') {
-                ev.preventDefault();
-                if (!this.disabled) {
-                    this.toggleChecked(ev);
-                }
-            }
-        };
-        this.onClick = (ev) => {
-            if (this.disabled) {
-                return;
-            }
-            this.toggleChecked(ev);
-        };
-        /**
-         * Stops propagation when the display label is clicked,
-         * otherwise, two clicks will be triggered.
-         */
-        this.onDivLabelClick = (ev) => {
-            ev.stopPropagation();
-        };
-    }
-    connectedCallback() {
-        const { el } = this;
-        // Watch for class changes to update validation state.
-        if (typeof MutationObserver !== 'undefined') {
-            this.validationObserver = new MutationObserver(() => {
-                const newIsInvalid = checkInvalidState(el);
-                if (this.isInvalid !== newIsInvalid) {
-                    this.isInvalid = newIsInvalid;
-                    /**
-                     * Screen readers tend to announce changes
-                     * to `aria-describedby` when the attribute
-                     * is changed during a blur event for a
-                     * native form control.
-                     * However, the announcement can be spotty
-                     * when using a non-native form control
-                     * and `forceUpdate()`.
-                     * This is due to `forceUpdate()` internally
-                     * rescheduling the DOM update to a lower
-                     * priority queue regardless if it's called
-                     * inside a Promise or not, thus causing
-                     * the screen reader to potentially miss the
-                     * change.
-                     * By using a State variable inside a Promise,
-                     * it guarantees a re-render immediately at
-                     * a higher priority.
-                     */
-                    Promise.resolve().then(() => {
-                        this.hintTextId = this.getHintTextId();
-                    });
-                }
-            });
-            this.validationObserver.observe(el, {
-                attributes: true,
-                attributeFilter: ['class'],
-            });
-        }
-        // Always set initial state
-        this.isInvalid = checkInvalidState(el);
-    }
-    componentWillLoad() {
-        this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
-        this.hintTextId = this.getHintTextId();
-    }
-    disconnectedCallback() {
-        // Clean up validation observer to prevent memory leaks.
-        if (this.validationObserver) {
-            this.validationObserver.disconnect();
-            this.validationObserver = undefined;
-        }
-    }
-    /** @internal */
-    async setFocus() {
-        this.el.focus();
-    }
-    getHintTextId() {
-        const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
-        if (isInvalid && errorText) {
-            return errorTextId;
-        }
-        if (helperText) {
-            return helperTextId;
-        }
-        return undefined;
-    }
-    /**
-     * Responsible for rendering helper text and error text.
-     * This element should only be rendered if hint text is set.
-     */
-    renderHintText() {
-        const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
-        /**
-         * undefined and empty string values should
-         * be treated as not having helper/error text.
-         */
-        const hasHintText = !!helperText || !!errorText;
-        if (!hasHintText) {
-            return;
-        }
-        return (h("div", { class: "checkbox-bottom" }, h("div", { id: helperTextId, class: "helper-text", part: "supporting-text helper-text", "aria-live": "polite" }, !isInvalid ? helperText : null), h("div", { id: errorTextId, class: "error-text", part: "supporting-text error-text", role: "alert" }, isInvalid ? errorText : null)));
-    }
-    render() {
-        const { color, checked, disabled, el, getSVGPath, indeterminate, inheritedAttributes, inputId, justify, labelPlacement, name, value, alignment, required, } = this;
-        const mode = getIonMode(this);
-        const path = getSVGPath(mode, indeterminate);
-        const hasLabelContent = el.textContent !== '';
-        renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        // The host element must have a checkbox role to ensure proper VoiceOver
-        // support in Safari for accessibility.
-        return (h(Host, { key: 'ae0fbd4b21accbac132e6b85c513512ad9179394', role: "checkbox", "aria-checked": indeterminate ? 'mixed' : `${checked}`, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, "aria-labelledby": hasLabelContent ? this.inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, "aria-required": required ? 'true' : undefined, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
-                [mode]: true,
-                'in-item': hostContext('ion-item', el),
-                'checkbox-checked': checked,
-                'checkbox-disabled': disabled,
-                'checkbox-indeterminate': indeterminate,
-                interactive: true,
-                [`checkbox-justify-${justify}`]: justify !== undefined,
-                [`checkbox-alignment-${alignment}`]: alignment !== undefined,
-                [`checkbox-label-placement-${labelPlacement}`]: true,
-            }) }, h("label", { key: '7a3d7f3c27dde514f2dbf2e34f4629fad33ec3bf', class: "checkbox-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: '4130d77ddf034271fecccda14e101a5a809921b6', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, required: required }, inheritedAttributes)), h("div", { key: '5daa74f4e62b0947e37764762524001ee42609d9', class: {
-                'label-text-wrapper': true,
-                'label-text-wrapper-hidden': !hasLabelContent,
-            }, part: "label", id: this.inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: '23ff66138f8c3a2f56f39113fc842d54b2f7952a' }), this.renderHintText()), h("div", { key: 'ab914d9623c19fc46821d5e62db92f1192ebbe7e', class: "native-wrapper" }, h("svg", { key: '66e3f4f5dcaa9756fb0e9452299954f9ed3dcb7b', class: "checkbox-icon", viewBox: "0 0 24 24", part: "container", "aria-hidden": "true" }, path)))));
-    }
-    getSVGPath(mode, indeterminate) {
-        let path = indeterminate ? (h("path", { d: "M6 12L18 12", part: "mark" })) : (h("path", { d: "M5.9,12.5l3.8,3.8l8.8-8.8", part: "mark" }));
-        if (mode === 'md') {
-            path = indeterminate ? (h("path", { d: "M2 12H22", part: "mark" })) : (h("path", { d: "M1.73,12.91 8.1,19.28 22.79,4.59", part: "mark" }));
-        }
-        return path;
-    }
-    get el() { return getElement(this); }
-};
-let checkboxIds = 0;
-Checkbox.style = {
-    ios: checkboxIosCss(),
-    md: checkboxMdCss()
-};
-
-const contentCss = () => `:host{--background:var(--ion-background-color, #fff);--color:var(--ion-text-color, #000);--padding-top:0px;--padding-bottom:0px;--padding-start:0px;--padding-end:0px;--keyboard-offset:0px;--offset-top:0px;--offset-bottom:0px;--overflow:auto;display:block;position:relative;flex:1;width:100%;height:100%;margin:0 !important;padding:0 !important;font-family:var(--ion-font-family, inherit);contain:size style}:host(.ion-color) .inner-scroll{background:var(--ion-color-base);color:var(--ion-color-contrast)}#background-content{left:0px;right:0px;top:calc(var(--offset-top) * -1);bottom:calc(var(--offset-bottom) * -1);position:absolute;background:var(--background)}.inner-scroll{left:0px;right:0px;top:calc(var(--offset-top) * -1);bottom:calc(var(--offset-bottom) * -1);-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:calc(var(--padding-top) + var(--offset-top));padding-bottom:calc(var(--padding-bottom) + var(--keyboard-offset) + var(--offset-bottom));position:absolute;color:var(--color);box-sizing:border-box;overflow:hidden;touch-action:pan-x pan-y pinch-zoom}.scroll-y,.scroll-x{-webkit-overflow-scrolling:touch;z-index:0;will-change:scroll-position}.scroll-y{overflow-y:var(--overflow);overscroll-behavior-y:contain}.scroll-x{overflow-x:var(--overflow);overscroll-behavior-x:contain}.overscroll::before,.overscroll::after{position:absolute;width:1px;height:1px;content:""}.overscroll::before{bottom:-1px}.overscroll::after{top:-1px}:host(.content-sizing){display:flex;flex-direction:column;min-height:0;contain:none}:host(.content-sizing) .inner-scroll{position:relative;top:0;bottom:0;margin-top:calc(var(--offset-top) * -1);margin-bottom:calc(var(--offset-bottom) * -1)}.transition-effect{display:none;position:absolute;width:100%;height:100vh;opacity:0;pointer-events:none}:host(.content-ltr) .transition-effect{left:-100%;}:host(.content-rtl) .transition-effect{right:-100%;}.transition-cover{position:absolute;right:0;width:100%;height:100%;background:black;opacity:0.1}.transition-shadow{display:block;position:absolute;width:100%;height:100%;box-shadow:inset -9px 0 9px 0 rgba(0, 0, 100, 0.03)}:host(.content-ltr) .transition-shadow{right:0;}:host(.content-rtl) .transition-shadow{left:0;transform:scaleX(-1)}::slotted([slot=fixed]){position:absolute;transform:translateZ(0)}`;
-
-const Content = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.ionScrollStart = createEvent(this, "ionScrollStart", 7);
-        this.ionScroll = createEvent(this, "ionScroll", 7);
-        this.ionScrollEnd = createEvent(this, "ionScrollEnd", 7);
-        this.watchDog = null;
-        this.isScrolling = false;
-        this.lastScroll = 0;
-        this.queued = false;
-        this.cTop = -1;
-        this.cBottom = -1;
-        this.isMainContent = true;
-        this.resizeTimeout = null;
-        this.inheritedAttributes = {};
-        this.tabsElement = null;
-        // Detail is used in a hot loop in the scroll event, by allocating it here
-        // V8 will be able to inline any read/write to it since it's a monomorphic class.
-        // https://mrale.ph/blog/2015/01/11/whats-up-with-monomorphism.html
-        this.detail = {
-            scrollTop: 0,
-            scrollLeft: 0,
-            type: 'scroll',
-            event: undefined,
-            startX: 0,
-            startY: 0,
-            startTime: 0,
-            currentX: 0,
-            currentY: 0,
-            velocityX: 0,
-            velocityY: 0,
-            deltaX: 0,
-            deltaY: 0,
-            currentTime: 0,
-            data: undefined,
-            isScrolling: true,
-        };
-        /**
-         * If `true`, the content will scroll behind the headers
-         * and footers. This effect can easily be seen by setting the toolbar
-         * to transparent.
-         */
-        this.fullscreen = false;
-        /**
-         * Controls where the fixed content is placed relative to the main content
-         * in the DOM. This can be used to control the order in which fixed elements
-         * receive keyboard focus.
-         * For example, if a FAB in the fixed slot should receive keyboard focus before
-         * the main page content, set this property to `'before'`.
-         */
-        this.fixedSlotPlacement = 'after';
-        /**
-         * If you want to enable the content scrolling in the X axis, set this property to `true`.
-         */
-        this.scrollX = false;
-        /**
-         * If you want to disable the content scrolling in the Y axis, set this property to `false`.
-         */
-        this.scrollY = true;
-        /**
-         * Because of performance reasons, ionScroll events are disabled by default, in order to enable them
-         * and start listening from (ionScroll), set this property to `true`.
-         */
-        this.scrollEvents = false;
-    }
-    componentWillLoad() {
-        this.inheritedAttributes = inheritAriaAttributes(this.el);
-    }
-    connectedCallback() {
-        this.isMainContent = this.el.closest('ion-menu, ion-popover, ion-modal') === null;
-        /**
-         * The fullscreen content offsets need to be
-         * computed after the tab bar has loaded. Since
-         * lazy evaluation means components are not hydrated
-         * at the same time, we need to wait for the ionTabBarLoaded
-         * event to fire. This does not impact dist-custom-elements
-         * because there is no hydration there.
-         */
-        if (hasLazyBuild(this.el)) {
-            /**
-             * We need to cache the reference to the tabs.
-             * If just the content is unmounted then we won't
-             * be able to query for the closest tabs on disconnectedCallback
-             * since the content has been removed from the DOM tree.
-             */
-            const closestTabs = (this.tabsElement = this.el.closest('ion-tabs'));
-            if (closestTabs !== null) {
-                /**
-                 * When adding and removing the event listener
-                 * we need to make sure we pass the same function reference
-                 * otherwise the event listener will not be removed properly.
-                 * We can't only pass `this.resize` because "this" in the function
-                 * context becomes a reference to IonTabs instead of IonContent.
-                 *
-                 * Additionally, we listen for ionTabBarLoaded on the IonTabs
-                 * instance rather than the IonTabBar instance. It's possible for
-                 * a tab bar to be conditionally rendered/mounted. Since ionTabBarLoaded
-                 * bubbles, we can catch any instances of child tab bars loading by listening
-                 * on IonTabs.
-                 */
-                this.tabsLoadCallback = () => this.resize();
-                closestTabs.addEventListener('ionTabBarLoaded', this.tabsLoadCallback);
-            }
-        }
-    }
-    disconnectedCallback() {
-        this.onScrollEnd();
-        if (hasLazyBuild(this.el)) {
-            /**
-             * The event listener and tabs caches need to
-             * be cleared otherwise this will create a memory
-             * leak where the IonTabs instance can never be
-             * garbage collected.
-             */
-            const { tabsElement, tabsLoadCallback } = this;
-            if (tabsElement !== null && tabsLoadCallback !== undefined) {
-                tabsElement.removeEventListener('ionTabBarLoaded', tabsLoadCallback);
-            }
-            this.tabsElement = null;
-            this.tabsLoadCallback = undefined;
-        }
-    }
-    /**
-     * Rotating certain devices can update
-     * the safe area insets. As a result,
-     * the fullscreen feature on ion-content
-     * needs to be recalculated.
-     *
-     * We listen for "resize" because we
-     * do not care what the orientation of
-     * the device is. Other APIs
-     * such as ScreenOrientation or
-     * the deviceorientation event must have
-     * permission from the user first whereas
-     * the "resize" event does not.
-     *
-     * We also throttle the callback to minimize
-     * thrashing when quickly resizing a window.
-     */
-    onResize() {
-        if (this.resizeTimeout) {
-            clearTimeout(this.resizeTimeout);
-            this.resizeTimeout = null;
-        }
-        this.resizeTimeout = setTimeout(() => {
-            /**
-             * Resize should only happen
-             * if the content is visible.
-             * When the content is hidden
-             * then offsetParent will be null.
-             */
-            if (this.el.offsetParent === null) {
-                return;
-            }
-            this.resize();
-        }, 100);
-    }
-    shouldForceOverscroll() {
-        const { forceOverscroll } = this;
-        const mode = getIonMode(this);
-        return forceOverscroll === undefined ? mode === 'ios' && isPlatform('ios') : forceOverscroll;
-    }
-    resize() {
-        /**
-         * Only force update if the component is rendered in a browser context.
-         * Using `forceUpdate` in a server context with pre-rendering can lead to an infinite loop.
-         * The `hydrateDocument` function in `@stencil/core` will render the `ion-content`, but
-         * `forceUpdate` will trigger another render, locking up the server.
-         *
-         * TODO: Remove if STENCIL-834 determines Stencil will account for this.
-         */
-        {
-            if (this.fullscreen) {
-                readTask(() => this.readDimensions());
-            }
-            else if (this.cTop !== 0 || this.cBottom !== 0) {
-                this.cTop = this.cBottom = 0;
-                forceUpdate(this);
-            }
-        }
-    }
-    /**
-     * Recalculate content dimensions. Called by overlays (e.g., popover) when
-     * sibling elements like headers or footers have finished rendering and their
-     * heights are available, ensuring accurate offset-top calculations.
-     * @internal
-     */
-    async recalculateDimensions() {
-        readTask(() => this.readDimensions());
-    }
-    readDimensions() {
-        const page = getPageElement(this.el);
-        const top = Math.max(this.el.offsetTop, 0);
-        const bottom = Math.max(page.offsetHeight - top - this.el.offsetHeight, 0);
-        const dirty = top !== this.cTop || bottom !== this.cBottom;
-        if (dirty) {
-            this.cTop = top;
-            this.cBottom = bottom;
-            forceUpdate(this);
-        }
-    }
-    onScroll(ev) {
-        const timeStamp = Date.now();
-        const shouldStart = !this.isScrolling;
-        this.lastScroll = timeStamp;
-        if (shouldStart) {
-            this.onScrollStart();
-        }
-        if (!this.queued && this.scrollEvents) {
-            this.queued = true;
-            readTask((ts) => {
-                this.queued = false;
-                this.detail.event = ev;
-                updateScrollDetail(this.detail, this.scrollEl, ts, shouldStart);
-                this.ionScroll.emit(this.detail);
-            });
-        }
-    }
-    /**
-     * Get the element where the actual scrolling takes place.
-     * This element can be used to subscribe to `scroll` events or manually modify
-     * `scrollTop`. However, it's recommended to use the API provided by `ion-content`:
-     *
-     * i.e. Using `ionScroll`, `ionScrollStart`, `ionScrollEnd` for scrolling events
-     * and `scrollToPoint()` to scroll the content into a certain point.
-     */
-    async getScrollElement() {
-        /**
-         * If this gets called in certain early lifecycle hooks (ex: Vue onMounted),
-         * scrollEl won't be defined yet with the custom elements build, so wait for it to load in.
-         */
-        if (!this.scrollEl) {
-            await new Promise((resolve) => componentOnReady(this.el, resolve));
-        }
-        return Promise.resolve(this.scrollEl);
-    }
-    /**
-     * Returns the background content element.
-     * @internal
-     */
-    async getBackgroundElement() {
-        if (!this.backgroundContentEl) {
-            await new Promise((resolve) => componentOnReady(this.el, resolve));
-        }
-        return Promise.resolve(this.backgroundContentEl);
-    }
-    /**
-     * Scroll to the top of the component.
-     *
-     * @param duration The amount of time to take scrolling to the top. Defaults to `0`.
-     */
-    scrollToTop(duration = 0) {
-        return this.scrollToPoint(undefined, 0, duration);
-    }
-    /**
-     * Scroll to the bottom of the component.
-     *
-     * @param duration The amount of time to take scrolling to the bottom. Defaults to `0`.
-     */
-    async scrollToBottom(duration = 0) {
-        const scrollEl = await this.getScrollElement();
-        const y = scrollEl.scrollHeight - scrollEl.clientHeight;
-        return this.scrollToPoint(undefined, y, duration);
-    }
-    /**
-     * Scroll by a specified X/Y distance in the component.
-     *
-     * @param x The amount to scroll by on the horizontal axis.
-     * @param y The amount to scroll by on the vertical axis.
-     * @param duration The amount of time to take scrolling by that amount.
-     */
-    async scrollByPoint(x, y, duration) {
-        const scrollEl = await this.getScrollElement();
-        return this.scrollToPoint(x + scrollEl.scrollLeft, y + scrollEl.scrollTop, duration);
-    }
-    /**
-     * Scroll to a specified X/Y location in the component.
-     *
-     * @param x The point to scroll to on the horizontal axis.
-     * @param y The point to scroll to on the vertical axis.
-     * @param duration The amount of time to take scrolling to that point. Defaults to `0`.
-     */
-    async scrollToPoint(x, y, duration = 0) {
-        const el = await this.getScrollElement();
-        if (duration < 32) {
-            if (y != null) {
-                el.scrollTop = y;
-            }
-            if (x != null) {
-                el.scrollLeft = x;
-            }
-            return;
-        }
-        let resolve;
-        let startTime = 0;
-        const promise = new Promise((r) => (resolve = r));
-        const fromY = el.scrollTop;
-        const fromX = el.scrollLeft;
-        const deltaY = y != null ? y - fromY : 0;
-        const deltaX = x != null ? x - fromX : 0;
-        // scroll loop
-        const step = (timeStamp) => {
-            const linearTime = Math.min(1, (timeStamp - startTime) / duration) - 1;
-            const easedT = Math.pow(linearTime, 3) + 1;
-            if (deltaY !== 0) {
-                el.scrollTop = Math.floor(easedT * deltaY + fromY);
-            }
-            if (deltaX !== 0) {
-                el.scrollLeft = Math.floor(easedT * deltaX + fromX);
-            }
-            if (easedT < 1) {
-                // do not use DomController here
-                // must use nativeRaf in order to fire in the next frame
-                requestAnimationFrame(step);
-            }
-            else {
-                resolve();
-            }
-        };
-        // chill out for a frame first
-        requestAnimationFrame((ts) => {
-            startTime = ts;
-            step(ts);
-        });
-        return promise;
-    }
-    onScrollStart() {
-        this.isScrolling = true;
-        this.ionScrollStart.emit({
-            isScrolling: true,
-        });
-        if (this.watchDog) {
-            clearInterval(this.watchDog);
-        }
-        // watchdog
-        this.watchDog = setInterval(() => {
-            if (this.lastScroll < Date.now() - 120) {
-                this.onScrollEnd();
-            }
-        }, 100);
-    }
-    onScrollEnd() {
-        if (this.watchDog)
-            clearInterval(this.watchDog);
-        this.watchDog = null;
-        if (this.isScrolling) {
-            this.isScrolling = false;
-            this.ionScrollEnd.emit({
-                isScrolling: false,
-            });
-        }
-    }
-    render() {
-        const { fixedSlotPlacement, inheritedAttributes, isMainContent, scrollX, scrollY, el } = this;
-        const rtl = isRTL(el) ? 'rtl' : 'ltr';
-        const mode = getIonMode(this);
-        const forceOverscroll = this.shouldForceOverscroll();
-        const transitionShadow = mode === 'ios';
-        this.resize();
-        return (h(Host, Object.assign({ key: 'cd8781f848d8dc926fe66f43d43c49564425a507', role: isMainContent ? 'main' : undefined, class: createColorClasses(this.color, {
-                [mode]: true,
-                'content-sizing': hostContext('ion-popover', this.el),
-                overscroll: forceOverscroll,
-                [`content-${rtl}`]: true,
-            }), style: {
-                '--offset-top': `${this.cTop}px`,
-                '--offset-bottom': `${this.cBottom}px`,
-            } }, inheritedAttributes), h("div", { key: '95b112d7cae30f22ef778ceffb88edb4d941c170', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? h("slot", { name: "fixed" }) : null, h("div", { key: '2fdfcbc39fb66f11b6191911f2941c660f4c12e5', 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" }, h("slot", { key: '6bc77e0054ec8e21635a7f2abfe0ca46e0962e03' })), transitionShadow ? (h("div", { class: "transition-effect" }, h("div", { class: "transition-cover" }), h("div", { class: "transition-shadow" }))) : null, fixedSlotPlacement === 'after' ? h("slot", { name: "fixed" }) : null));
-    }
-    get el() { return getElement(this); }
-};
-const getParentElement = (el) => {
-    var _a;
-    if (el.parentElement) {
-        // normal element with a parent element
-        return el.parentElement;
-    }
-    if ((_a = el.parentNode) === null || _a === void 0 ? void 0 : _a.host) {
-        // shadow dom's document fragment
-        return el.parentNode.host;
-    }
-    return null;
-};
-const getPageElement = (el) => {
-    const tabs = el.closest('ion-tabs');
-    if (tabs) {
-        return tabs;
-    }
-    /**
-     * If we're in a popover, we need to use its wrapper so we can account for space
-     * between the popover and the edges of the screen. But if the popover contains
-     * its own page element, we should use that instead.
-     */
-    const page = el.closest('ion-app, ion-page, .ion-page, page-inner, .popover-content');
-    if (page) {
-        return page;
-    }
-    return getParentElement(el);
-};
-// ******** DOM READ ****************
-const updateScrollDetail = (detail, el, timestamp, shouldStart) => {
-    const prevX = detail.currentX;
-    const prevY = detail.currentY;
-    const prevT = detail.currentTime;
-    const currentX = el.scrollLeft;
-    const currentY = el.scrollTop;
-    const timeDelta = timestamp - prevT;
-    if (shouldStart) {
-        // remember the start positions
-        detail.startTime = timestamp;
-        detail.startX = currentX;
-        detail.startY = currentY;
-        detail.velocityX = detail.velocityY = 0;
-    }
-    detail.currentTime = timestamp;
-    detail.currentX = detail.scrollLeft = currentX;
-    detail.currentY = detail.scrollTop = currentY;
-    detail.deltaX = currentX - detail.startX;
-    detail.deltaY = currentY - detail.startY;
-    if (timeDelta > 0 && timeDelta < 100) {
-        const velocityX = (currentX - prevX) / timeDelta;
-        const velocityY = (currentY - prevY) / timeDelta;
-        detail.velocityX = velocityX * 0.7 + detail.velocityX * 0.3;
-        detail.velocityY = velocityY * 0.7 + detail.velocityY * 0.3;
-    }
-};
-Content.style = contentCss();
-
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-const TRANSITION = 'all 0.2s ease-in-out';
-const ROLE_NONE = 'none';
-const ROLE_BANNER = 'banner';
-const cloneElement = (tagName) => {
-    const getCachedEl = document.querySelector(`${tagName}.ion-cloned-element`);
-    if (getCachedEl !== null) {
-        return getCachedEl;
-    }
-    const clonedEl = document.createElement(tagName);
-    clonedEl.classList.add('ion-cloned-element');
-    clonedEl.style.setProperty('display', 'none');
-    document.body.appendChild(clonedEl);
-    return clonedEl;
-};
-const createHeaderIndex = (headerEl) => {
-    if (!headerEl) {
-        return;
-    }
-    const toolbars = headerEl.querySelectorAll('ion-toolbar');
-    return {
-        el: headerEl,
-        toolbars: Array.from(toolbars).map((toolbar) => {
-            const ionTitleEl = toolbar.querySelector('ion-title');
-            return {
-                el: toolbar,
-                background: toolbar.shadowRoot.querySelector('.toolbar-background'),
-                ionTitleEl,
-                innerTitleEl: ionTitleEl ? ionTitleEl.shadowRoot.querySelector('.toolbar-title') : null,
-                ionButtonsEl: Array.from(toolbar.querySelectorAll('ion-buttons')),
-            };
-        }),
-    };
-};
-const handleContentScroll = (scrollEl, scrollHeaderIndex, contentEl) => {
-    readTask(() => {
-        const scrollTop = scrollEl.scrollTop;
-        const scale = clamp(1, 1 + -scrollTop / 500, 1.1);
-        // Native refresher should not cause titles to scale
-        const nativeRefresher = contentEl.querySelector('ion-refresher.refresher-native');
-        if (nativeRefresher === null) {
-            writeTask(() => {
-                scaleLargeTitles(scrollHeaderIndex.toolbars, scale);
-            });
-        }
-    });
-};
-const setToolbarBackgroundOpacity = (headerEl, opacity) => {
-    /**
-     * Fading in the backdrop opacity
-     * should happen after the large title
-     * has collapsed, so it is handled
-     * by handleHeaderFade()
-     */
-    if (headerEl.collapse === 'fade') {
-        return;
-    }
-    if (opacity === undefined) {
-        headerEl.style.removeProperty('--opacity-scale');
-    }
-    else {
-        headerEl.style.setProperty('--opacity-scale', opacity.toString());
-    }
-};
-const handleToolbarBorderIntersection = (ev, mainHeaderIndex, scrollTop) => {
-    if (!ev[0].isIntersecting) {
-        return;
-    }
-    /**
-     * There is a bug in Safari where overflow scrolling on a non-body element
-     * does not always reset the scrollTop position to 0 when letting go. It will
-     * set to 1 once the rubber band effect has ended. This causes the background to
-     * appear slightly on certain app setups.
-     *
-     * Additionally, we check if user is rubber banding (scrolling is negative)
-     * as this can mean they are using pull to refresh. Once the refresher starts,
-     * the content is transformed which can cause the intersection observer to erroneously
-     * fire here as well.
-     */
-    const scale = ev[0].intersectionRatio > 0.9 || scrollTop <= 0 ? 0 : ((1 - ev[0].intersectionRatio) * 100) / 75;
-    setToolbarBackgroundOpacity(mainHeaderIndex.el, scale === 1 ? undefined : scale);
-};
-/**
- * If toolbars are intersecting, hide the scrollable toolbar content
- * and show the primary toolbar content. If the toolbars are not intersecting,
- * hide the primary toolbar content and show the scrollable toolbar content
- */
-const handleToolbarIntersection = (ev, // TODO(FW-2832): type (IntersectionObserverEntry[] triggers errors which should be sorted)
-mainHeaderIndex, scrollHeaderIndex, scrollEl) => {
-    writeTask(() => {
-        const scrollTop = scrollEl.scrollTop;
-        handleToolbarBorderIntersection(ev, mainHeaderIndex, scrollTop);
-        const event = ev[0];
-        const intersection = event.intersectionRect;
-        const intersectionArea = intersection.width * intersection.height;
-        const rootArea = event.rootBounds.width * event.rootBounds.height;
-        const isPageHidden = intersectionArea === 0 && rootArea === 0;
-        const leftDiff = Math.abs(intersection.left - event.boundingClientRect.left);
-        const rightDiff = Math.abs(intersection.right - event.boundingClientRect.right);
-        const isPageTransitioning = intersectionArea > 0 && (leftDiff >= 5 || rightDiff >= 5);
-        if (isPageHidden || isPageTransitioning) {
-            return;
-        }
-        if (event.isIntersecting) {
-            setHeaderActive(mainHeaderIndex, false);
-            setHeaderActive(scrollHeaderIndex);
-        }
-        else {
-            /**
-             * There is a bug with IntersectionObserver on Safari
-             * where `event.isIntersecting === false` when cancelling
-             * a swipe to go back gesture. Checking the intersection
-             * x, y, width, and height provides a workaround. This bug
-             * does not happen when using Safari + Web Animations,
-             * only Safari + CSS Animations.
-             */
-            const hasValidIntersection = (intersection.x === 0 && intersection.y === 0) || (intersection.width !== 0 && intersection.height !== 0);
-            if (hasValidIntersection && scrollTop > 0) {
-                setHeaderActive(mainHeaderIndex);
-                setHeaderActive(scrollHeaderIndex, false);
-                setToolbarBackgroundOpacity(mainHeaderIndex.el);
-            }
-        }
-    });
-};
-const setHeaderActive = (headerIndex, active = true) => {
-    const headerEl = headerIndex.el;
-    const toolbars = headerIndex.toolbars;
-    const ionTitles = toolbars.map((toolbar) => toolbar.ionTitleEl);
-    if (active) {
-        headerEl.setAttribute('role', ROLE_BANNER);
-        headerEl.classList.remove('header-collapse-condense-inactive');
-        ionTitles.forEach((ionTitle) => {
-            if (ionTitle) {
-                ionTitle.removeAttribute('aria-hidden');
-            }
-        });
-    }
-    else {
-        /**
-         * There can only be one banner landmark per page.
-         * By default, all ion-headers have the banner role.
-         * This causes an accessibility issue when using a
-         * condensed header since there are two ion-headers
-         * on the page at once (active and inactive).
-         * To solve this, the role needs to be toggled
-         * based on which header is active.
-         */
-        headerEl.setAttribute('role', ROLE_NONE);
-        headerEl.classList.add('header-collapse-condense-inactive');
-        /**
-         * The small title should only be accessed by screen readers
-         * when the large title collapses into the small title due
-         * to scrolling.
-         *
-         * Originally, the header was given `aria-hidden="true"`
-         * but this caused issues with screen readers not being
-         * able to access any focusable elements within the header.
-         */
-        ionTitles.forEach((ionTitle) => {
-            if (ionTitle) {
-                ionTitle.setAttribute('aria-hidden', 'true');
-            }
-        });
-    }
-};
-const scaleLargeTitles = (toolbars = [], scale = 1, transition = false) => {
-    toolbars.forEach((toolbar) => {
-        const ionTitle = toolbar.ionTitleEl;
-        const titleDiv = toolbar.innerTitleEl;
-        if (!ionTitle || ionTitle.size !== 'large') {
-            return;
-        }
-        titleDiv.style.transition = transition ? TRANSITION : '';
-        titleDiv.style.transform = `scale3d(${scale}, ${scale}, 1)`;
-    });
-};
-const handleHeaderFade = (scrollEl, baseEl, condenseHeader) => {
-    readTask(() => {
-        const scrollTop = scrollEl.scrollTop;
-        const baseElHeight = baseEl.clientHeight;
-        const fadeStart = condenseHeader ? condenseHeader.clientHeight : 0;
-        /**
-         * If we are using fade header with a condense
-         * header, then the toolbar backgrounds should
-         * not begin to fade in until the condense
-         * header has fully collapsed.
-         *
-         * Additionally, the main content should not
-         * overflow out of the container until the
-         * condense header has fully collapsed. When
-         * using just the condense header the content
-         * should overflow out of the container.
-         */
-        if (condenseHeader !== null && scrollTop < fadeStart) {
-            baseEl.style.setProperty('--opacity-scale', '0');
-            scrollEl.style.setProperty('clip-path', `inset(${baseElHeight}px 0px 0px 0px)`);
-            return;
-        }
-        const distanceToStart = scrollTop - fadeStart;
-        const fadeDuration = 10;
-        const scale = clamp(0, distanceToStart / fadeDuration, 1);
-        writeTask(() => {
-            scrollEl.style.removeProperty('clip-path');
-            baseEl.style.setProperty('--opacity-scale', scale.toString());
-        });
-    });
-};
-/**
- * Get the role type for the ion-header.
- *
- * @param isInsideMenu If ion-header is inside ion-menu.
- * @param isCondensed If ion-header has collapse="condense".
- * @param mode The current mode.
- * @returns 'none' if inside ion-menu or if condensed in md
- * mode, otherwise 'banner'.
- */
-const getRoleType = (isInsideMenu, isCondensed, mode) => {
-    // If the header is inside a menu, it should not have the banner role.
-    if (isInsideMenu) {
-        return ROLE_NONE;
-    }
-    /**
-     * Only apply role="none" to `md` mode condensed headers
-     * since the large header is never shown.
-     */
-    if (isCondensed && mode === 'md') {
-        return ROLE_NONE;
-    }
-    // Default to banner role.
-    return ROLE_BANNER;
-};
-
-const headerIosCss = () => `ion-header{display:block;position:relative;order:-1;width:100%;z-index:10}ion-header ion-toolbar:first-of-type{padding-top:var(--ion-safe-area-top, 0)}.header-ios ion-toolbar:last-of-type{--border-width:0 0 0.55px}@supports (backdrop-filter: blur(0)){.header-background{left:0;right:0;top:0;bottom:0;position:absolute;backdrop-filter:saturate(180%) blur(20px)}.header-translucent-ios ion-toolbar{--opacity:.8}.header-collapse-condense-inactive .header-background{backdrop-filter:blur(20px)}}.header-ios.ion-no-border ion-toolbar:last-of-type{--border-width:0}.header-collapse-fade ion-toolbar{--opacity-scale:inherit}.header-collapse-fade.header-transitioning ion-toolbar{--background:transparent;--border-style:none}.header-collapse-condense{z-index:9}.header-collapse-condense ion-toolbar{position:sticky;top:0}.header-collapse-condense ion-toolbar:first-of-type{padding-top:0px;z-index:1}.header-collapse-condense ion-toolbar{z-index:0}.header-collapse-condense ion-toolbar:last-of-type{--border-width:0px}.header-collapse-condense ion-toolbar ion-searchbar{padding-top:0px;padding-bottom:13px}.header-collapse-main{--opacity-scale:1}.header-collapse-main ion-toolbar{--opacity-scale:inherit}.header-collapse-main ion-toolbar.in-toolbar ion-title,.header-collapse-main ion-toolbar.in-toolbar ion-buttons{transition:all 0.2s ease-in-out}.header-collapse-condense ion-toolbar,.header-collapse-condense-inactive.header-transitioning:not(.header-collapse-condense) ion-toolbar{--background:var(--ion-background-color, #fff)}.header-collapse-condense-inactive.header-transitioning:not(.header-collapse-condense) ion-toolbar{--border-style:none;--opacity-scale:1}.header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-title,.header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-buttons.buttons-collapse{opacity:0;pointer-events:none}.header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-title,.header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-buttons.buttons-collapse{visibility:hidden}ion-header.header-ios:not(.header-collapse-main):has(~ion-content ion-header.header-ios[collapse=condense],~ion-content ion-header.header-ios.header-collapse-condense){opacity:0}`;
-
-const headerMdCss = () => `ion-header{display:block;position:relative;order:-1;width:100%;z-index:10}ion-header ion-toolbar:first-of-type{padding-top:var(--ion-safe-area-top, 0)}.header-md{box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12)}.header-md.header-collapse-condense{display:none}.header-md.ion-no-border{box-shadow:none}`;
-
-const Header = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.inheritedAttributes = {};
-        /**
-         * If `true`, the header will be translucent.
-         * Only applies when the mode is `"ios"` and the device supports
-         * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
-         *
-         * Note: In order to scroll content behind the header, the `fullscreen`
-         * attribute needs to be set on the content.
-         */
-        this.translucent = false;
-        this.setupFadeHeader = async (contentEl, condenseHeader) => {
-            const scrollEl = (this.scrollEl = await getScrollElement(contentEl));
-            /**
-             * Handle fading of toolbars on scroll
-             */
-            this.contentScrollCallback = () => {
-                handleHeaderFade(this.scrollEl, this.el, condenseHeader);
-            };
-            scrollEl.addEventListener('scroll', this.contentScrollCallback);
-            handleHeaderFade(this.scrollEl, this.el, condenseHeader);
-        };
-    }
-    componentWillLoad() {
-        this.inheritedAttributes = inheritAriaAttributes(this.el);
-    }
-    componentDidLoad() {
-        this.checkCollapsibleHeader();
-    }
-    componentDidUpdate() {
-        this.checkCollapsibleHeader();
-    }
-    disconnectedCallback() {
-        this.destroyCollapsibleHeader();
-    }
-    async checkCollapsibleHeader() {
-        const mode = getIonMode(this);
-        if (mode !== 'ios') {
-            return;
-        }
-        const { collapse } = this;
-        const hasCondense = collapse === 'condense';
-        const hasFade = collapse === 'fade';
-        this.destroyCollapsibleHeader();
-        if (hasCondense) {
-            const pageEl = this.el.closest('ion-app,ion-page,.ion-page,page-inner');
-            const contentEl = pageEl ? findIonContent(pageEl) : null;
-            // Cloned elements are always needed in iOS transition
-            writeTask(() => {
-                const title = cloneElement('ion-title');
-                title.size = 'large';
-                cloneElement('ion-back-button');
-            });
-            await this.setupCondenseHeader(contentEl, pageEl);
-        }
-        else if (hasFade) {
-            const pageEl = this.el.closest('ion-app,ion-page,.ion-page,page-inner');
-            const contentEl = pageEl ? findIonContent(pageEl) : null;
-            if (!contentEl) {
-                printIonContentErrorMsg(this.el);
-                return;
-            }
-            const condenseHeader = contentEl.querySelector('ion-header[collapse="condense"]');
-            await this.setupFadeHeader(contentEl, condenseHeader);
-        }
-    }
-    destroyCollapsibleHeader() {
-        if (this.intersectionObserver) {
-            this.intersectionObserver.disconnect();
-            this.intersectionObserver = undefined;
-        }
-        if (this.scrollEl && this.contentScrollCallback) {
-            this.scrollEl.removeEventListener('scroll', this.contentScrollCallback);
-            this.contentScrollCallback = undefined;
-        }
-        if (this.collapsibleMainHeader) {
-            this.collapsibleMainHeader.classList.remove('header-collapse-main');
-            this.collapsibleMainHeader = undefined;
-        }
-    }
-    async setupCondenseHeader(contentEl, pageEl) {
-        if (!contentEl || !pageEl) {
-            printIonContentErrorMsg(this.el);
-            return;
-        }
-        if (typeof IntersectionObserver === 'undefined') {
-            return;
-        }
-        this.scrollEl = await getScrollElement(contentEl);
-        const headers = pageEl.querySelectorAll('ion-header');
-        this.collapsibleMainHeader = Array.from(headers).find((header) => header.collapse !== 'condense');
-        if (!this.collapsibleMainHeader) {
-            return;
-        }
-        const mainHeaderIndex = createHeaderIndex(this.collapsibleMainHeader);
-        const scrollHeaderIndex = createHeaderIndex(this.el);
-        if (!mainHeaderIndex || !scrollHeaderIndex) {
-            return;
-        }
-        setHeaderActive(mainHeaderIndex, false);
-        setToolbarBackgroundOpacity(mainHeaderIndex.el, 0);
-        /**
-         * Handle interaction between toolbar collapse and
-         * showing/hiding content in the primary ion-header
-         * as well as progressively showing/hiding the main header
-         * border as the top-most toolbar collapses or expands.
-         */
-        const toolbarIntersection = (ev) => {
-            handleToolbarIntersection(ev, mainHeaderIndex, scrollHeaderIndex, this.scrollEl);
-        };
-        this.intersectionObserver = new IntersectionObserver(toolbarIntersection, {
-            root: contentEl,
-            threshold: [0.25, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1],
-        });
-        this.intersectionObserver.observe(scrollHeaderIndex.toolbars[scrollHeaderIndex.toolbars.length - 1].el);
-        /**
-         * Handle scaling of large iOS titles and
-         * showing/hiding border on last toolbar
-         * in primary header
-         */
-        this.contentScrollCallback = () => {
-            handleContentScroll(this.scrollEl, scrollHeaderIndex, contentEl);
-        };
-        this.scrollEl.addEventListener('scroll', this.contentScrollCallback);
-        writeTask(() => {
-            if (this.collapsibleMainHeader !== undefined) {
-                this.collapsibleMainHeader.classList.add('header-collapse-main');
-            }
-        });
-    }
-    render() {
-        const { translucent, inheritedAttributes } = this;
-        const mode = getIonMode(this);
-        const collapse = this.collapse || 'none';
-        const isCondensed = collapse === 'condense';
-        // banner role must be at top level, so remove role if inside a menu
-        const roleType = getRoleType(hostContext('ion-menu', this.el), isCondensed, mode);
-        return (h(Host, Object.assign({ key: '863c4568cd7b8c0ec55109f193bbbaed68a1346e', 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 && h("div", { key: '25c3bdce328b0b35607d154c8b8374679313d881', class: "header-background" }), h("slot", { key: 'b44fab0a9be7920b9650da26117c783e751e1702' })));
-    }
-    get el() { return getElement(this); }
-};
-Header.style = {
-    ios: headerIosCss(),
-    md: headerMdCss()
-};
-
-const itemIosCss = () => `:host{--border-radius:0px;--border-width:0px;--border-style:solid;--padding-top:0px;--padding-bottom:0px;--padding-end:0px;--padding-start:0px;--inner-border-width:0px;--inner-padding-top:0px;--inner-padding-bottom:0px;--inner-padding-start:0px;--inner-padding-end:0px;--inner-box-shadow:none;--detail-icon-color:initial;--detail-icon-font-size:1.25em;--detail-icon-opacity:0.25;--color-activated:var(--color);--color-focused:var(--color);--color-hover:var(--color);--ripple-color:currentColor;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;position:relative;align-items:center;justify-content:space-between;outline:none;color:var(--color);font-family:var(--ion-font-family, inherit);text-align:initial;text-decoration:none;overflow:hidden;box-sizing:border-box}:host(.ion-color) .item-native{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.ion-color) .item-native,:host(.ion-color) .item-inner{border-color:var(--ion-color-shade)}:host(.ion-activated) .item-native{color:var(--color-activated)}:host(.ion-activated) .item-native::after{background:var(--background-activated);opacity:var(--background-activated-opacity)}:host(.ion-color.ion-activated) .item-native{color:var(--ion-color-contrast)}:host(.ion-focused) .item-native{color:var(--color-focused)}:host(.ion-focused) .item-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}:host(.ion-color.ion-focused) .item-native{color:var(--ion-color-contrast)}:host(.ion-color.ion-focused) .item-native::after{background:var(--ion-color-contrast)}@media (any-hover: hover){:host(.ion-activatable:not(.ion-focused):hover) .item-native{color:var(--color-hover)}:host(.ion-activatable:not(.ion-focused):hover) .item-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}:host(.ion-color.ion-activatable:not(.ion-focused):hover) .item-native{color:var(--ion-color-contrast)}:host(.ion-color.ion-activatable:not(.ion-focused):hover) .item-native::after{background:var(--ion-color-contrast)}}:host(.item-control-needs-pointer-cursor){cursor:pointer}:host(.item-interactive-disabled:not(.item-multiple-inputs)){cursor:default;pointer-events:none}:host(.item-disabled){cursor:default;opacity:0.3;pointer-events:none}.item-native{border-radius:var(--border-radius);margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-right:var(--padding-end);padding-left:calc(var(--padding-start) + var(--ion-safe-area-left, 0px));display:flex;position:relative;align-items:inherit;justify-content:inherit;width:100%;min-height:var(--min-height);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);outline:none;background:var(--background);overflow:inherit;z-index:1;box-sizing:border-box}:host-context([dir=rtl]) .item-native{padding-right:calc(var(--padding-start) + var(--ion-safe-area-right, 0px));padding-left:var(--padding-end)}[dir=rtl] .item-native{padding-right:calc(var(--padding-start) + var(--ion-safe-area-right, 0px));padding-left:var(--padding-end)}@supports selector(:dir(rtl)){.item-native:dir(rtl){padding-right:calc(var(--padding-start) + var(--ion-safe-area-right, 0px));padding-left:var(--padding-end)}}.item-native::-moz-focus-inner{border:0}.item-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:"";opacity:0;transition:var(--transition);z-index:-1}button,a{cursor:pointer;user-select:none;-webkit-user-drag:none}.item-inner{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-top:var(--inner-padding-top);padding-bottom:var(--inner-padding-bottom);padding-right:calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end));padding-left:var(--inner-padding-start);display:flex;position:relative;flex:1;flex-direction:inherit;align-items:inherit;align-self:stretch;min-height:inherit;border-width:var(--inner-border-width);border-style:var(--border-style);border-color:var(--border-color);box-shadow:var(--inner-box-shadow);overflow:inherit;box-sizing:border-box}:host-context([dir=rtl]) .item-inner{padding-right:var(--inner-padding-start);padding-left:calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-end))}[dir=rtl] .item-inner{padding-right:var(--inner-padding-start);padding-left:calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-end))}@supports selector(:dir(rtl)){.item-inner:dir(rtl){padding-right:var(--inner-padding-start);padding-left:calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-end))}}.item-detail-icon{-webkit-margin-start:calc(var(--inner-padding-end) / 2);margin-inline-start:calc(var(--inner-padding-end) / 2);-webkit-margin-end:-6px;margin-inline-end:-6px;color:var(--detail-icon-color);font-size:var(--detail-icon-font-size);opacity:var(--detail-icon-opacity)}::slotted(ion-icon){font-size:1.6em}::slotted(ion-button){--margin-top:0;--margin-bottom:0;--margin-start:0;--margin-end:0;z-index:1}::slotted(ion-label:not([slot=end])){flex:1;width:min-content;max-width:100%}:host(.item-input){align-items:center}.input-wrapper{display:flex;flex:1;flex-direction:inherit;align-items:inherit;align-self:stretch;text-overflow:ellipsis;overflow:inherit;box-sizing:border-box}:host(.item-label-stacked),:host(.item-label-floating){align-items:start}:host(.item-label-stacked) .input-wrapper,:host(.item-label-floating) .input-wrapper{flex:1;flex-direction:column}:host(.item-multiple-inputs) ::slotted(ion-checkbox),:host(.item-multiple-inputs) ::slotted(ion-datetime),:host(.item-multiple-inputs) ::slotted(ion-radio){position:relative}:host(.item-textarea){align-items:stretch}::slotted(ion-reorder[slot]){margin-top:0;margin-bottom:0}ion-ripple-effect{color:var(--ripple-color)}:host{--min-height:44px;--transition:background-color 200ms linear, opacity 200ms linear;--padding-start:16px;--inner-padding-end:16px;--inner-border-width:0px 0px 0.55px 0px;--background:var(--ion-item-background, var(--ion-background-color, #fff));--background-activated:var(--ion-text-color, #000);--background-focused:var(--ion-text-color, #000);--background-hover:currentColor;--background-activated-opacity:.12;--background-focused-opacity:.15;--background-hover-opacity:.04;--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));--color:var(--ion-item-color, var(--ion-text-color, #000));font-size:1rem}:host(.ion-activated){--transition:none}:host(.ion-color.ion-focused) .item-native::after{background:#000;opacity:0.15}:host(.ion-color.ion-activated) .item-native::after{background:#000;opacity:0.12}:host(.item-lines-full){--border-width:0px 0px 0.55px 0px}:host(.item-lines-inset){--inner-border-width:0px 0px 0.55px 0px}:host(.item-lines-inset),:host(.item-lines-none){--border-width:0px}:host(.item-lines-full),:host(.item-lines-none){--inner-border-width:0px}::slotted([slot=start]){-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:2px;margin-bottom:2px}::slotted(ion-icon[slot=start]),::slotted(ion-icon[slot=end]){margin-top:7px;margin-bottom:7px}::slotted(ion-toggle[slot=start]),::slotted(ion-toggle[slot=end]){margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}:host(.item-label-stacked) ::slotted([slot=end]),:host(.item-label-floating) ::slotted([slot=end]){margin-top:7px;margin-bottom:7px}::slotted(.button-small){--padding-top:1px;--padding-bottom:1px;--padding-start:.5em;--padding-end:.5em;min-height:24px;font-size:0.8125rem}::slotted(ion-avatar){width:36px;height:36px}::slotted(ion-thumbnail){--size:56px}::slotted(ion-avatar[slot=end]),::slotted(ion-thumbnail[slot=end]){-webkit-margin-start:8px;margin-inline-start:8px;-webkit-margin-end:8px;margin-inline-end:8px;margin-top:8px;margin-bottom:8px}:host(.item-radio) ::slotted(ion-label),:host(.item-toggle) ::slotted(ion-label){-webkit-margin-start:0px;margin-inline-start:0px}::slotted(ion-label){-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:8px;margin-inline-end:8px;margin-top:10px;margin-bottom:10px}:host(.item-label-floating),:host(.item-label-stacked){--min-height:68px}`;
-
-const itemMdCss = () => `:host{--border-radius:0px;--border-width:0px;--border-style:solid;--padding-top:0px;--padding-bottom:0px;--padding-end:0px;--padding-start:0px;--inner-border-width:0px;--inner-padding-top:0px;--inner-padding-bottom:0px;--inner-padding-start:0px;--inner-padding-end:0px;--inner-box-shadow:none;--detail-icon-color:initial;--detail-icon-font-size:1.25em;--detail-icon-opacity:0.25;--color-activated:var(--color);--color-focused:var(--color);--color-hover:var(--color);--ripple-color:currentColor;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;position:relative;align-items:center;justify-content:space-between;outline:none;color:var(--color);font-family:var(--ion-font-family, inherit);text-align:initial;text-decoration:none;overflow:hidden;box-sizing:border-box}:host(.ion-color) .item-native{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.ion-color) .item-native,:host(.ion-color) .item-inner{border-color:var(--ion-color-shade)}:host(.ion-activated) .item-native{color:var(--color-activated)}:host(.ion-activated) .item-native::after{background:var(--background-activated);opacity:var(--background-activated-opacity)}:host(.ion-color.ion-activated) .item-native{color:var(--ion-color-contrast)}:host(.ion-focused) .item-native{color:var(--color-focused)}:host(.ion-focused) .item-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}:host(.ion-color.ion-focused) .item-native{color:var(--ion-color-contrast)}:host(.ion-color.ion-focused) .item-native::after{background:var(--ion-color-contrast)}@media (any-hover: hover){:host(.ion-activatable:not(.ion-focused):hover) .item-native{color:var(--color-hover)}:host(.ion-activatable:not(.ion-focused):hover) .item-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}:host(.ion-color.ion-activatable:not(.ion-focused):hover) .item-native{color:var(--ion-color-contrast)}:host(.ion-color.ion-activatable:not(.ion-focused):hover) .item-native::after{background:var(--ion-color-contrast)}}:host(.item-control-needs-pointer-cursor){cursor:pointer}:host(.item-interactive-disabled:not(.item-multiple-inputs)){cursor:default;pointer-events:none}:host(.item-disabled){cursor:default;opacity:0.3;pointer-events:none}.item-native{border-radius:var(--border-radius);margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-right:var(--padding-end);padding-left:calc(var(--padding-start) + var(--ion-safe-area-left, 0px));display:flex;position:relative;align-items:inherit;justify-content:inherit;width:100%;min-height:var(--min-height);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);outline:none;background:var(--background);overflow:inherit;z-index:1;box-sizing:border-box}:host-context([dir=rtl]) .item-native{padding-right:calc(var(--padding-start) + var(--ion-safe-area-right, 0px));padding-left:var(--padding-end)}[dir=rtl] .item-native{padding-right:calc(var(--padding-start) + var(--ion-safe-area-right, 0px));padding-left:var(--padding-end)}@supports selector(:dir(rtl)){.item-native:dir(rtl){padding-right:calc(var(--padding-start) + var(--ion-safe-area-right, 0px));padding-left:var(--padding-end)}}.item-native::-moz-focus-inner{border:0}.item-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:"";opacity:0;transition:var(--transition);z-index:-1}button,a{cursor:pointer;user-select:none;-webkit-user-drag:none}.item-inner{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-top:var(--inner-padding-top);padding-bottom:var(--inner-padding-bottom);padding-right:calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end));padding-left:var(--inner-padding-start);display:flex;position:relative;flex:1;flex-direction:inherit;align-items:inherit;align-self:stretch;min-height:inherit;border-width:var(--inner-border-width);border-style:var(--border-style);border-color:var(--border-color);box-shadow:var(--inner-box-shadow);overflow:inherit;box-sizing:border-box}:host-context([dir=rtl]) .item-inner{padding-right:var(--inner-padding-start);padding-left:calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-end))}[dir=rtl] .item-inner{padding-right:var(--inner-padding-start);padding-left:calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-end))}@supports selector(:dir(rtl)){.item-inner:dir(rtl){padding-right:var(--inner-padding-start);padding-left:calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-end))}}.item-detail-icon{-webkit-margin-start:calc(var(--inner-padding-end) / 2);margin-inline-start:calc(var(--inner-padding-end) / 2);-webkit-margin-end:-6px;margin-inline-end:-6px;color:var(--detail-icon-color);font-size:var(--detail-icon-font-size);opacity:var(--detail-icon-opacity)}::slotted(ion-icon){font-size:1.6em}::slotted(ion-button){--margin-top:0;--margin-bottom:0;--margin-start:0;--margin-end:0;z-index:1}::slotted(ion-label:not([slot=end])){flex:1;width:min-content;max-width:100%}:host(.item-input){align-items:center}.input-wrapper{display:flex;flex:1;flex-direction:inherit;align-items:inherit;align-self:stretch;text-overflow:ellipsis;overflow:inherit;box-sizing:border-box}:host(.item-label-stacked),:host(.item-label-floating){align-items:start}:host(.item-label-stacked) .input-wrapper,:host(.item-label-floating) .input-wrapper{flex:1;flex-direction:column}:host(.item-multiple-inputs) ::slotted(ion-checkbox),:host(.item-multiple-inputs) ::slotted(ion-datetime),:host(.item-multiple-inputs) ::slotted(ion-radio){position:relative}:host(.item-textarea){align-items:stretch}::slotted(ion-reorder[slot]){margin-top:0;margin-bottom:0}ion-ripple-effect{color:var(--ripple-color)}:host{--min-height:48px;--background:var(--ion-item-background, var(--ion-background-color, #fff));--background-activated:transparent;--background-focused:currentColor;--background-hover:currentColor;--background-activated-opacity:0;--background-focused-opacity:.12;--background-hover-opacity:.04;--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13)))));--color:var(--ion-item-color, var(--ion-text-color, #000));--transition:opacity 15ms linear, background-color 15ms linear;--padding-start:16px;--inner-padding-end:16px;--inner-border-width:0 0 1px 0;font-size:1rem;font-weight:normal;text-transform:none}:host(.ion-color.ion-activated) .item-native::after{background:transparent}:host(.item-interactive){--border-width:0 0 1px 0;--inner-border-width:0}:host(.item-lines-full){--border-width:0 0 1px 0}:host(.item-lines-inset){--inner-border-width:0 0 1px 0}:host(.item-lines-inset),:host(.item-lines-none){--border-width:0}:host(.item-lines-full),:host(.item-lines-none){--inner-border-width:0}:host(.item-multi-line) ::slotted([slot=start]),:host(.item-multi-line) ::slotted([slot=end]){margin-top:16px;margin-bottom:16px;align-self:flex-start}::slotted([slot=start]){-webkit-margin-end:16px;margin-inline-end:16px}::slotted([slot=end]){-webkit-margin-start:16px;margin-inline-start:16px}::slotted(ion-icon){color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54);font-size:1.5em}:host(.ion-color) ::slotted(ion-icon){color:var(--ion-color-contrast)}::slotted(ion-icon[slot]){margin-top:12px;margin-bottom:12px}::slotted(ion-icon[slot=start]){-webkit-margin-end:32px;margin-inline-end:32px}::slotted(ion-icon[slot=end]){-webkit-margin-start:16px;margin-inline-start:16px}::slotted(ion-toggle[slot=start]),::slotted(ion-toggle[slot=end]){margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}::slotted(ion-note){margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;align-self:flex-start;font-size:0.6875rem}::slotted(ion-note[slot]){padding-left:0;padding-right:0;padding-top:18px;padding-bottom:10px}::slotted(ion-avatar){width:40px;height:40px}::slotted(ion-thumbnail){--size:56px}::slotted(ion-avatar),::slotted(ion-thumbnail){margin-top:8px;margin-bottom:8px}::slotted(ion-avatar[slot=start]),::slotted(ion-thumbnail[slot=start]){-webkit-margin-end:16px;margin-inline-end:16px}::slotted(ion-avatar[slot=end]),::slotted(ion-thumbnail[slot=end]){-webkit-margin-start:16px;margin-inline-start:16px}::slotted(ion-label){margin-left:0;margin-right:0;margin-top:10px;margin-bottom:10px}:host(.item-label-stacked) ::slotted([slot=end]),:host(.item-label-floating) ::slotted([slot=end]){margin-top:7px;margin-bottom:7px}:host(.item-toggle) ::slotted(ion-label),:host(.item-radio) ::slotted(ion-label){-webkit-margin-start:0;margin-inline-start:0}::slotted(.button-small){--padding-top:2px;--padding-bottom:2px;--padding-start:.6em;--padding-end:.6em;min-height:25px;font-size:0.75rem}:host(.item-label-floating),:host(.item-label-stacked){--min-height:55px}:host(.ion-focused:not(.ion-color)) ::slotted(.label-stacked),:host(.ion-focused:not(.ion-color)) ::slotted(.label-floating),:host(.item-has-focus:not(.ion-color)) ::slotted(.label-stacked),:host(.item-has-focus:not(.ion-color)) ::slotted(.label-floating){color:var(--ion-color-primary, #0054e9)}`;
-
-const Item = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.labelColorStyles = {};
-        this.itemStyles = new Map();
-        this.inheritedAriaAttributes = {};
-        this.multipleInputs = false;
-        this.focusable = true;
-        this.isInteractive = false;
-        /**
-         * If `true`, a button tag will be rendered and the item will be tappable.
-         */
-        this.button = false;
-        /**
-         * The icon to use when `detail` is set to `true`.
-         */
-        this.detailIcon = chevronForward;
-        /**
-         * If `true`, the user cannot interact with the item.
-         */
-        this.disabled = false;
-        /**
-         * When using a router, it specifies the transition direction when navigating to
-         * another page using `href`.
-         */
-        this.routerDirection = 'forward';
-        /**
-         * The type of the button. Only used when an `onclick` or `button` property is present.
-         */
-        this.type = 'button';
-        // slot change listener updates state to reflect how/if item should be interactive
-        this.updateInteractivityOnSlotChange = () => {
-            this.setIsInteractive();
-            this.setMultipleInputs();
-        };
-    }
-    buttonChanged() {
-        // Update the focusable option when the button option is changed
-        this.focusable = this.isFocusable();
-    }
-    labelColorChanged(ev) {
-        const { color } = this;
-        // There will be a conflict with item color if
-        // we apply the label color to item, so we ignore
-        // the label color if the user sets a color on item
-        if (color === undefined) {
-            this.labelColorStyles = ev.detail;
-        }
-    }
-    itemStyle(ev) {
-        ev.stopPropagation();
-        const tagName = ev.target.tagName;
-        const updatedStyles = ev.detail;
-        const newStyles = {};
-        const childStyles = this.itemStyles.get(tagName) || {};
-        let hasStyleChange = false;
-        Object.keys(updatedStyles).forEach((key) => {
-            if (updatedStyles[key]) {
-                const itemKey = `item-${key}`;
-                if (!childStyles[itemKey]) {
-                    hasStyleChange = true;
-                }
-                newStyles[itemKey] = true;
-            }
-        });
-        if (!hasStyleChange && Object.keys(newStyles).length !== Object.keys(childStyles).length) {
-            hasStyleChange = true;
-        }
-        if (hasStyleChange) {
-            this.itemStyles.set(tagName, newStyles);
-            forceUpdate(this);
-        }
-    }
-    connectedCallback() {
-        this.hasStartEl();
-    }
-    componentWillLoad() {
-        this.inheritedAriaAttributes = inheritAttributes(this.el, ['aria-label']);
-    }
-    componentDidLoad() {
-        raf(() => {
-            this.setMultipleInputs();
-            this.setIsInteractive();
-            this.focusable = this.isFocusable();
-        });
-    }
-    totalNestedInputs() {
-        // The following elements have a clickable cover that is relative to the entire item
-        const covers = this.el.querySelectorAll('ion-checkbox, ion-datetime, ion-select, ion-radio');
-        // The following elements can accept focus alongside the previous elements
-        // therefore if these elements are also a child of item, we don't want the
-        // input cover on top of those interfering with their clicks
-        const inputs = this.el.querySelectorAll('ion-input, ion-range, ion-searchbar, ion-segment, ion-textarea, ion-toggle');
-        // The following elements should also stay clickable when an input with cover is present
-        const clickables = this.el.querySelectorAll('ion-router-link, ion-button, a, button');
-        return {
-            covers,
-            inputs,
-            clickables,
-        };
-    }
-    // If the item contains multiple clickable elements and/or inputs, then the item
-    // should not have a clickable input cover over the entire item to prevent
-    // interfering with their individual click events
-    setMultipleInputs() {
-        const { covers, inputs, clickables } = this.totalNestedInputs();
-        // Check for multiple inputs to change the position of the input cover to relative
-        // for all of the covered inputs above
-        this.multipleInputs =
-            covers.length + inputs.length > 1 ||
-                covers.length + clickables.length > 1 ||
-                (covers.length > 0 && this.isClickable());
-    }
-    setIsInteractive() {
-        // If item contains any interactive children, set isInteractive to `true`
-        const { covers, inputs, clickables } = this.totalNestedInputs();
-        this.isInteractive = covers.length > 0 || inputs.length > 0 || clickables.length > 0;
-    }
-    // If the item contains an input including a checkbox, datetime, select, or radio
-    // then the item will have a clickable input cover that covers the item
-    // that should get the hover, focused and activated states UNLESS it has multiple
-    // inputs, then those need to individually get each click
-    hasCover() {
-        const inputs = this.el.querySelectorAll('ion-checkbox, ion-datetime, ion-select, ion-radio');
-        return inputs.length === 1 && !this.multipleInputs;
-    }
-    // If the item has an href or button property it will render a native
-    // anchor or button that is clickable
-    isClickable() {
-        return this.href !== undefined || this.button;
-    }
-    canActivate() {
-        return this.isClickable() || this.hasCover();
-    }
-    isFocusable() {
-        const focusableChild = this.el.querySelector('.ion-focusable');
-        return this.canActivate() || focusableChild !== null;
-    }
-    hasStartEl() {
-        const startEl = this.el.querySelector('[slot="start"]');
-        if (startEl !== null) {
-            this.el.classList.add('item-has-start-slot');
-        }
-    }
-    getFirstInteractive() {
-        const controls = this.el.querySelectorAll('ion-toggle:not([disabled]), ion-checkbox:not([disabled]), ion-radio:not([disabled]), ion-select:not([disabled]), ion-input:not([disabled]), ion-textarea:not([disabled])');
-        return controls[0];
-    }
-    render() {
-        const { detail, detailIcon, download, labelColorStyles, lines, disabled, href, rel, target, routerAnimation, routerDirection, inheritedAriaAttributes, multipleInputs, } = this;
-        const childStyles = {};
-        const mode = getIonMode(this);
-        const clickable = this.isClickable();
-        const canActivate = this.canActivate();
-        const TagType = clickable ? (href === undefined ? 'button' : 'a') : 'div';
-        const attrs = TagType === 'button'
-            ? { type: this.type }
-            : {
-                download,
-                href,
-                rel,
-                target,
-            };
-        let clickFn = {};
-        const firstInteractive = this.getFirstInteractive();
-        // Only set onClick if the item is clickable to prevent screen
-        // readers from reading all items as clickable
-        if (clickable || (firstInteractive !== undefined && !multipleInputs)) {
-            clickFn = {
-                onClick: (ev) => {
-                    if (clickable) {
-                        openURL(href, ev, routerDirection, routerAnimation);
-                    }
-                    if (firstInteractive !== undefined && !multipleInputs) {
-                        const path = ev.composedPath();
-                        const target = path[0];
-                        if (ev.isTrusted) {
-                            /**
-                             * Dispatches a click event to the first interactive element,
-                             * when it is the result of a user clicking on the item.
-                             *
-                             * We check if the click target is in the shadow root,
-                             * which means the user clicked on the .item-native or
-                             * .item-inner padding.
-                             */
-                            const clickedWithinShadowRoot = this.el.shadowRoot.contains(target);
-                            if (clickedWithinShadowRoot) {
-                                /**
-                                 * For input/textarea clicking the padding should focus the
-                                 * text field (thus making it editable). For everything else,
-                                 * we want to click the control so it activates.
-                                 */
-                                if (firstInteractive.tagName === 'ION-INPUT' || firstInteractive.tagName === 'ION-TEXTAREA') {
-                                    firstInteractive.setFocus();
-                                }
-                                firstInteractive.click();
-                                /**
-                                 * Stop the item event from being triggered
-                                 * as the firstInteractive click event will also
-                                 * trigger the item click event.
-                                 */
-                                ev.stopImmediatePropagation();
-                            }
-                        }
-                    }
-                },
-            };
-        }
-        const showDetail = detail !== undefined ? detail : mode === 'ios' && clickable;
-        this.itemStyles.forEach((value) => {
-            Object.assign(childStyles, value);
-        });
-        const ariaDisabled = disabled || childStyles['item-interactive-disabled'] ? 'true' : null;
-        const inList = hostContext('ion-list', this.el) && !hostContext('ion-radio-group', this.el);
-        /**
-         * Inputs and textareas do not need to show a cursor pointer.
-         * However, other form controls such as checkboxes and radios do.
-         */
-        const firstInteractiveNeedsPointerCursor = firstInteractive !== undefined && !['ION-INPUT', 'ION-TEXTAREA'].includes(firstInteractive.tagName);
-        return (h(Host, { key: '24b59935bd8db8b0b7f940582455a42b82cbf762', "aria-disabled": ariaDisabled, class: Object.assign(Object.assign(Object.assign({}, childStyles), labelColorStyles), createColorClasses(this.color, {
-                item: true,
-                [mode]: true,
-                'item-lines-default': lines === undefined,
-                [`item-lines-${lines}`]: lines !== undefined,
-                'item-control-needs-pointer-cursor': firstInteractiveNeedsPointerCursor,
-                'item-disabled': disabled,
-                'in-list': inList,
-                'item-multiple-inputs': this.multipleInputs,
-                'ion-activatable': canActivate,
-                'ion-focusable': this.focusable,
-                'item-rtl': document.dir === 'rtl',
-            })), role: inList ? 'listitem' : null }, h(TagType, Object.assign({ key: 'fd77b6e5f3eb2e1857a0cdd45562d71eabd30255' }, attrs, inheritedAriaAttributes, { class: "item-native", part: "native", disabled: disabled }, clickFn), h("slot", { key: '8824ac8395aafa3d63c92f2128e947cac8393ac4', name: "start", onSlotchange: this.updateInteractivityOnSlotChange }), h("div", { key: '5c9127e388a432687766d86a9db91fd1663abf03', class: "item-inner" }, h("div", { key: '9dc2d2f58c4067c0143b3963334c346c3c7f77df', class: "input-wrapper" }, h("slot", { key: '8377d9e56dc4b1913f1346111b706e7f14c24d30', onSlotchange: this.updateInteractivityOnSlotChange })), h("slot", { key: 'bc771e106174f4a84ee12e92d14df81ad7ed177d', name: "end", onSlotchange: this.updateInteractivityOnSlotChange }), showDetail && (h("ion-icon", { key: '45336d121a097cbf71ee8a3f6b554745ba5e0bbf', icon: detailIcon, lazy: false, class: "item-detail-icon", part: "detail-icon", "aria-hidden": "true", "flip-rtl": detailIcon === chevronForward }))), canActivate && mode === 'md' && h("ion-ripple-effect", { key: '197e244ae3bffebfa6ac9bfe7658d12e1af0ecb1' }))));
-    }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "button": [{
-                "buttonChanged": 0
-            }]
-    }; }
-};
-Item.style = {
-    ios: itemIosCss(),
-    md: itemMdCss()
-};
-
-const listIosCss = () => `ion-list{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;display:block;contain:content;list-style-type:none}ion-list.list-inset{transform:translateZ(0);overflow:hidden}.list-ios{background:var(--ion-item-background, var(--ion-background-color, #fff))}.list-ios.list-inset{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:16px;margin-bottom:16px;border-radius:10px}.list-ios.list-inset ion-item:only-child,.list-ios.list-inset ion-item:not(:only-of-type):last-of-type,.list-ios.list-inset ion-item-sliding:last-of-type ion-item{--border-width:0;--inner-border-width:0}.list-ios.list-inset+ion-list.list-inset{margin-top:0}.list-ios-lines-none .item-lines-default{--inner-border-width:0px;--border-width:0px}.list-ios-lines-full .item-lines-default{--inner-border-width:0px;--border-width:0 0 0.55px 0}.list-ios-lines-inset .item-lines-default{--inner-border-width:0 0 0.55px 0;--border-width:0px}ion-card .list-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}`;
-
-const listMdCss = () => `ion-list{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;display:block;contain:content;list-style-type:none}ion-list.list-inset{transform:translateZ(0);overflow:hidden}.list-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:8px;padding-bottom:8px;background:var(--ion-item-background, var(--ion-background-color, #fff))}.list-md>.input:last-child::after{inset-inline-start:0}.list-md.list-inset{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:16px;margin-bottom:16px;border-radius:2px}.list-md.list-inset ion-item:not(:only-of-type):last-of-type,.list-md.list-inset ion-item-sliding:last-of-type ion-item{--border-width:0;--inner-border-width:0}.list-md.list-inset ion-item:only-child{--border-width:0;--inner-border-width:0}.list-md.list-inset+ion-list.list-inset{margin-top:0}.list-md-lines-none .item-lines-default{--inner-border-width:0px;--border-width:0px}.list-md-lines-full .item-lines-default{--inner-border-width:0px;--border-width:0 0 1px 0}.list-md-lines-inset .item-lines-default{--inner-border-width:0 0 1px 0;--border-width:0px}ion-card .list-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}`;
-
-const List = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        /**
-         * If `true`, the list will have margin around it and rounded corners.
-         */
-        this.inset = false;
-    }
-    /**
-     * If `ion-item-sliding` are used inside the list, this method closes
-     * any open sliding item.
-     *
-     * Returns `true` if an actual `ion-item-sliding` is closed.
-     */
-    async closeSlidingItems() {
-        const item = this.el.querySelector('ion-item-sliding');
-        if (item === null || item === void 0 ? void 0 : item.closeOpened) {
-            return item.closeOpened();
-        }
-        return false;
-    }
-    render() {
-        const mode = getIonMode(this);
-        const { lines, inset } = this;
-        return (h(Host, { key: '7f9943751542d2cbd49a4ad3f28e16d9949f70d4', role: "list", class: {
-                [mode]: true,
-                // Used internally for styling
-                [`list-${mode}`]: true,
-                'list-inset': inset,
-                [`list-lines-${lines}`]: lines !== undefined,
-                [`list-${mode}-lines-${lines}`]: lines !== undefined,
-            } }));
-    }
-    get el() { return getElement(this); }
-};
-List.style = {
-    ios: listIosCss(),
-    md: listMdCss()
-};
-
-const radioIosCss = () => `:host{--inner-border-radius:50%;display:inline-block;position:relative;max-width:100%;min-height:inherit;cursor:pointer;user-select:none;z-index:2;box-sizing:border-box}:host(.radio-disabled){pointer-events:none}.radio-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%;contain:layout size style}.radio-icon,.radio-inner{box-sizing:border-box}input{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}:host(:focus){outline:none}:host(.in-item){flex:1 1 0;width:100%;height:100%}:host([slot=start]),:host([slot=end]){flex:initial;width:auto}.radio-wrapper{display:flex;position:relative;flex-grow:1;align-items:center;justify-content:space-between;height:inherit;min-height:inherit;cursor:inherit}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item) .label-text-wrapper{margin-top:10px;margin-bottom:10px}:host(.in-item.radio-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.radio-label-placement-stacked) .native-wrapper{margin-bottom:10px}.label-text-wrapper-hidden{display:none}.native-wrapper{display:flex;align-items:center}:host(.radio-justify-space-between) .radio-wrapper{justify-content:space-between}:host(.radio-justify-start) .radio-wrapper{justify-content:start}:host(.radio-justify-end) .radio-wrapper{justify-content:end}:host(.radio-alignment-start) .radio-wrapper{align-items:start}:host(.radio-alignment-center) .radio-wrapper{align-items:center}:host(.radio-justify-space-between),:host(.radio-justify-start),:host(.radio-justify-end),:host(.radio-alignment-start),:host(.radio-alignment-center){display:block}:host(.radio-label-placement-start) .radio-wrapper{flex-direction:row}:host(.radio-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.radio-label-placement-end) .radio-wrapper{flex-direction:row-reverse}:host(.radio-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.radio-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.radio-label-placement-fixed) .label-text-wrapper{flex:0 0 100px;width:100px;min-width:100px}:host(.radio-label-placement-stacked) .radio-wrapper{flex-direction:column}:host(.radio-label-placement-stacked) .label-text-wrapper{transform:scale(0.75);margin-left:0;margin-right:0;margin-bottom:16px;max-width:calc(100% / 0.75)}:host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper{transform-origin:left top}:host-context([dir=rtl]):host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper,:host-context([dir=rtl]).radio-label-placement-stacked.radio-alignment-start .label-text-wrapper{transform-origin:right top}@supports selector(:dir(rtl)){:host(.radio-label-placement-stacked.radio-alignment-start:dir(rtl)) .label-text-wrapper{transform-origin:right top}}:host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper{transform-origin:center top}:host-context([dir=rtl]):host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper,:host-context([dir=rtl]).radio-label-placement-stacked.radio-alignment-center .label-text-wrapper{transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){:host(.radio-label-placement-stacked.radio-alignment-center:dir(rtl)) .label-text-wrapper{transform-origin:calc(100% - center) top}}:host{--color-checked:var(--ion-color-primary, #0054e9)}:host(.ion-color.radio-checked) .radio-inner{border-color:var(--ion-color-base)}.item-radio.item-ios ion-label{-webkit-margin-start:0;margin-inline-start:0}.radio-inner{width:33%;height:50%}:host(.radio-checked) .radio-inner{transform:rotate(45deg);border-width:0.125rem;border-top-width:0;border-left-width:0;border-style:solid;border-color:var(--color-checked)}:host(.radio-disabled){opacity:0.3}:host(.ion-focused) .radio-icon::after{border-radius:var(--inner-border-radius);top:-8px;display:block;position:absolute;width:36px;height:36px;background:var(--ion-color-primary-tint, #1a65eb);content:"";opacity:0.2}:host(.ion-focused) .radio-icon::after{inset-inline-start:-9px}.native-wrapper .radio-icon{width:0.9375rem;height:1.5rem}`;
-
-const radioMdCss = () => `:host{--inner-border-radius:50%;display:inline-block;position:relative;max-width:100%;min-height:inherit;cursor:pointer;user-select:none;z-index:2;box-sizing:border-box}:host(.radio-disabled){pointer-events:none}.radio-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%;contain:layout size style}.radio-icon,.radio-inner{box-sizing:border-box}input{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}:host(:focus){outline:none}:host(.in-item){flex:1 1 0;width:100%;height:100%}:host([slot=start]),:host([slot=end]){flex:initial;width:auto}.radio-wrapper{display:flex;position:relative;flex-grow:1;align-items:center;justify-content:space-between;height:inherit;min-height:inherit;cursor:inherit}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item) .label-text-wrapper{margin-top:10px;margin-bottom:10px}:host(.in-item.radio-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.radio-label-placement-stacked) .native-wrapper{margin-bottom:10px}.label-text-wrapper-hidden{display:none}.native-wrapper{display:flex;align-items:center}:host(.radio-justify-space-between) .radio-wrapper{justify-content:space-between}:host(.radio-justify-start) .radio-wrapper{justify-content:start}:host(.radio-justify-end) .radio-wrapper{justify-content:end}:host(.radio-alignment-start) .radio-wrapper{align-items:start}:host(.radio-alignment-center) .radio-wrapper{align-items:center}:host(.radio-justify-space-between),:host(.radio-justify-start),:host(.radio-justify-end),:host(.radio-alignment-start),:host(.radio-alignment-center){display:block}:host(.radio-label-placement-start) .radio-wrapper{flex-direction:row}:host(.radio-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.radio-label-placement-end) .radio-wrapper{flex-direction:row-reverse}:host(.radio-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.radio-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.radio-label-placement-fixed) .label-text-wrapper{flex:0 0 100px;width:100px;min-width:100px}:host(.radio-label-placement-stacked) .radio-wrapper{flex-direction:column}:host(.radio-label-placement-stacked) .label-text-wrapper{transform:scale(0.75);margin-left:0;margin-right:0;margin-bottom:16px;max-width:calc(100% / 0.75)}:host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper{transform-origin:left top}:host-context([dir=rtl]):host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper,:host-context([dir=rtl]).radio-label-placement-stacked.radio-alignment-start .label-text-wrapper{transform-origin:right top}@supports selector(:dir(rtl)){:host(.radio-label-placement-stacked.radio-alignment-start:dir(rtl)) .label-text-wrapper{transform-origin:right top}}:host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper{transform-origin:center top}:host-context([dir=rtl]):host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper,:host-context([dir=rtl]).radio-label-placement-stacked.radio-alignment-center .label-text-wrapper{transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){:host(.radio-label-placement-stacked.radio-alignment-center:dir(rtl)) .label-text-wrapper{transform-origin:calc(100% - center) top}}:host{--color:rgb(var(--ion-text-color-rgb, 0, 0, 0), 0.6);--color-checked:var(--ion-color-primary, #0054e9);--border-width:0.125rem;--border-style:solid;--border-radius:50%}:host(.ion-color) .radio-inner{background:var(--ion-color-base)}:host(.ion-color.radio-checked) .radio-icon{border-color:var(--ion-color-base)}.radio-icon{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;border-radius:var(--border-radius);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--color)}.radio-inner{border-radius:var(--inner-border-radius);width:calc(50% + var(--border-width));height:calc(50% + var(--border-width));transform:scale3d(0, 0, 0);transition:transform 280ms cubic-bezier(0.4, 0, 0.2, 1);background:var(--color-checked)}:host(.radio-checked) .radio-icon{border-color:var(--color-checked)}:host(.radio-checked) .radio-inner{transform:scale3d(1, 1, 1)}:host(.radio-disabled) .label-text-wrapper{opacity:0.38}:host(.radio-disabled) .native-wrapper{opacity:0.63}:host(.ion-focused) .radio-icon::after{border-radius:var(--inner-border-radius);display:block;position:absolute;width:36px;height:36px;background:var(--ion-color-primary-tint, #1a65eb);content:"";opacity:0.2}.native-wrapper .radio-icon{width:1.25rem;height:1.25rem}`;
-
-const Radio = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.ionFocus = createEvent(this, "ionFocus", 7);
-        this.ionBlur = createEvent(this, "ionBlur", 7);
-        this.inputId = `ion-rb-${radioButtonIds++}`;
-        this.radioGroup = null;
-        /**
-         * If `true`, the radio is selected.
-         */
-        this.checked = false;
-        /**
-         * The tabindex of the radio button.
-         * @internal
-         */
-        this.buttonTabindex = -1;
-        /**
-         * The name of the control, which is submitted with the form data.
-         */
-        this.name = this.inputId;
-        /**
-         * If `true`, the user cannot interact with the radio.
-         */
-        this.disabled = false;
-        /**
-         * Where to place the label relative to the radio.
-         * `"start"`: The label will appear to the left of the radio in LTR and to the right in RTL.
-         * `"end"`: The label will appear to the right of the radio in LTR and to the left in RTL.
-         * `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
-         * `"stacked"`: The label will appear above the radio regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
-         */
-        this.labelPlacement = 'start';
-        this.updateState = () => {
-            if (this.radioGroup) {
-                const { compareWith, value: radioGroupValue } = this.radioGroup;
-                this.checked = isOptionSelected(radioGroupValue, this.value, compareWith);
-            }
-        };
-        this.onClick = () => {
-            const { radioGroup, checked, disabled } = this;
-            if (disabled) {
-                return;
-            }
-            /**
-             * The modern control does not use a native input
-             * inside of the radio host, so we cannot rely on the
-             * ev.preventDefault() behavior above. If the radio
-             * is checked and the parent radio group allows for empty
-             * selection, then we can set the checked state to false.
-             * Otherwise, the checked state should always be set
-             * to true because the checked state cannot be toggled.
-             */
-            if (checked && (radioGroup === null || radioGroup === void 0 ? void 0 : radioGroup.allowEmptySelection)) {
-                this.checked = false;
-            }
-            else {
-                this.checked = true;
-            }
-        };
-        this.onFocus = () => {
-            this.ionFocus.emit();
-        };
-        this.onBlur = () => {
-            this.ionBlur.emit();
-        };
-    }
-    valueChanged() {
-        /**
-         * The new value of the radio may
-         * match the radio group's value,
-         * so we see if it should be checked.
-         */
-        this.updateState();
-    }
-    componentDidLoad() {
-        /**
-         * The value may be `undefined` if it
-         * gets set before the radio is
-         * rendered. This ensures that the radio
-         * is checked if the value matches. This
-         * happens most often when Angular is
-         * rendering the radio.
-         */
-        this.updateState();
-    }
-    /** @internal */
-    async setFocus(ev) {
-        if (ev !== undefined) {
-            ev.stopPropagation();
-            ev.preventDefault();
-        }
-        this.el.focus();
-    }
-    /** @internal */
-    async setButtonTabindex(value) {
-        this.buttonTabindex = value;
-    }
-    connectedCallback() {
-        if (this.value === undefined) {
-            this.value = this.inputId;
-        }
-        const radioGroup = (this.radioGroup = this.el.closest('ion-radio-group'));
-        if (radioGroup) {
-            this.updateState();
-            addEventListener(radioGroup, 'ionValueChange', this.updateState);
-        }
-    }
-    disconnectedCallback() {
-        const radioGroup = this.radioGroup;
-        if (radioGroup) {
-            removeEventListener(radioGroup, 'ionValueChange', this.updateState);
-            this.radioGroup = null;
-        }
-    }
-    get hasLabel() {
-        return this.el.textContent !== '';
-    }
-    renderRadioControl() {
-        return (h("div", { class: "radio-icon", part: "container" }, h("div", { class: "radio-inner", part: "mark" }), h("div", { class: "radio-ripple" })));
-    }
-    render() {
-        const { checked, disabled, color, el, justify, labelPlacement, hasLabel, buttonTabindex, alignment } = this;
-        const mode = getIonMode(this);
-        const inItem = hostContext('ion-item', el);
-        return (h(Host, { key: '3353b28172b7f837d4b38964169b5b5f4ba02788', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
-                [mode]: true,
-                'in-item': inItem,
-                'radio-checked': checked,
-                'radio-disabled': disabled,
-                [`radio-justify-${justify}`]: justify !== undefined,
-                [`radio-alignment-${alignment}`]: alignment !== undefined,
-                [`radio-label-placement-${labelPlacement}`]: true,
-                // Focus and active styling should not apply when the radio is in an item
-                'ion-activatable': !inItem,
-                'ion-focusable': !inItem,
-            }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, h("label", { key: '418a0a48366ff900e97da123abf665bbbda87fb7', class: "radio-wrapper" }, h("div", { key: '6e5acdd8c8f5d0ad26632a65396afef8094153d1', class: {
-                'label-text-wrapper': true,
-                'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label" }, h("slot", { key: '10b157162cd283d624153c747679609cf0bbf11e' })), h("div", { key: '4c45cca95cb105cd6df1025a26e3c045272184a0', class: "native-wrapper" }, this.renderRadioControl()))));
-    }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "value": [{
-                "valueChanged": 0
-            }]
-    }; }
-};
-let radioButtonIds = 0;
-Radio.style = {
-    ios: radioIosCss(),
-    md: radioMdCss()
-};
-
-const radioGroupIosCss = () => `ion-radio-group{vertical-align:top}.radio-group-wrapper{display:inline}.radio-group-top{line-height:1.5}.radio-group-top .error-text{display:none;color:var(--ion-color-danger, #c5000f)}.radio-group-top .helper-text{display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}.ion-touched.ion-invalid .radio-group-top .error-text{display:block}.ion-touched.ion-invalid .radio-group-top .helper-text{display:none}ion-list .radio-group-top{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px}`;
-
-const radioGroupMdCss = () => `ion-radio-group{vertical-align:top}.radio-group-wrapper{display:inline}.radio-group-top{line-height:1.5}.radio-group-top .error-text{display:none;color:var(--ion-color-danger, #c5000f)}.radio-group-top .helper-text{display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}.ion-touched.ion-invalid .radio-group-top .error-text{display:block}.ion-touched.ion-invalid .radio-group-top .helper-text{display:none}ion-list .radio-group-top{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px}`;
-
-const RadioGroup = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.ionChange = createEvent(this, "ionChange", 7);
-        this.ionValueChange = createEvent(this, "ionValueChange", 7);
-        this.inputId = `ion-rg-${radioGroupIds++}`;
-        this.helperTextId = `${this.inputId}-helper-text`;
-        this.errorTextId = `${this.inputId}-error-text`;
-        this.labelId = `${this.inputId}-lbl`;
-        /**
-         * Track validation state for proper aria-live announcements.
-         */
-        this.isInvalid = false;
-        /**
-         * If `true`, the radios can be deselected.
-         */
-        this.allowEmptySelection = false;
-        /**
-         * The name of the control, which is submitted with the form data.
-         */
-        this.name = this.inputId;
-        this.setRadioTabindex = (value) => {
-            const radios = this.getRadios();
-            // Get the first radio that is not disabled and the checked one
-            const first = radios.find((radio) => !radio.disabled);
-            const checked = radios.find((radio) => radio.value === value && !radio.disabled);
-            if (!first && !checked) {
-                return;
-            }
-            // If an enabled checked radio exists, set it to be the focusable radio
-            // otherwise we default to focus the first radio
-            const focusable = checked || first;
-            for (const radio of radios) {
-                const tabindex = radio === focusable ? 0 : -1;
-                radio.setButtonTabindex(tabindex);
-            }
-        };
-        this.onClick = (ev) => {
-            ev.preventDefault();
-            /**
-             * The Radio Group component mandates that only one radio button
-             * within the group can be selected at any given time. Since `ion-radio`
-             * is a shadow DOM component, it cannot natively perform this behavior
-             * using the `name` attribute.
-             */
-            const selectedRadio = ev.target && ev.target.closest('ion-radio');
-            /**
-             * Our current disabled prop definition causes Stencil to mark it
-             * as optional. While this is not desired, fixing this behavior
-             * in Stencil is a significant breaking change, so this effort is
-             * being de-risked in STENCIL-917. Until then, we compromise
-             * here by checking for falsy `disabled` values instead of strictly
-             * checking `disabled === false`.
-             */
-            if (selectedRadio && !selectedRadio.disabled) {
-                const currentValue = this.value;
-                const newValue = selectedRadio.value;
-                if (newValue !== currentValue) {
-                    this.value = newValue;
-                    this.emitValueChange(ev);
-                }
-                else if (this.allowEmptySelection) {
-                    this.value = undefined;
-                    this.emitValueChange(ev);
-                }
-            }
-        };
-    }
-    valueChanged(value) {
-        this.setRadioTabindex(value);
-        this.ionValueChange.emit({ value });
-    }
-    componentDidLoad() {
-        /**
-         * There's an issue when assigning a value to the radio group
-         * within the Angular primary content (rendering within the
-         * app component template). When the template is isolated to a route,
-         * the value is assigned correctly.
-         * To address this issue, we need to ensure that the watcher is
-         * called after the component has finished loading,
-         * allowing the emit to be dispatched correctly.
-         */
-        this.valueChanged(this.value);
-    }
-    async connectedCallback() {
-        // Get the list header if it exists and set the id
-        // this is used to set aria-labelledby
-        const header = this.el.querySelector('ion-list-header') || this.el.querySelector('ion-item-divider');
-        if (header) {
-            const label = (this.label = header.querySelector('ion-label'));
-            if (label) {
-                this.labelId = label.id = this.name + '-lbl';
-            }
-        }
-        // Watch for class changes to update validation state.
-        if (typeof MutationObserver !== 'undefined') {
-            this.validationObserver = new MutationObserver(() => {
-                const newIsInvalid = checkInvalidState(this.el);
-                if (this.isInvalid !== newIsInvalid) {
-                    this.isInvalid = newIsInvalid;
-                    /**
-                     * Screen readers tend to announce changes
-                     * to `aria-describedby` when the attribute
-                     * is changed during a blur event for a
-                     * native form control.
-                     * However, the announcement can be spotty
-                     * when using a non-native form control
-                     * and `forceUpdate()`.
-                     * This is due to `forceUpdate()` internally
-                     * rescheduling the DOM update to a lower
-                     * priority queue regardless if it's called
-                     * inside a Promise or not, thus causing
-                     * the screen reader to potentially miss the
-                     * change.
-                     * By using a State variable inside a Promise,
-                     * it guarantees a re-render immediately at
-                     * a higher priority.
-                     */
-                    Promise.resolve().then(() => {
-                        this.hintTextId = this.getHintTextId();
-                    });
-                }
-            });
-            this.validationObserver.observe(this.el, {
-                attributes: true,
-                attributeFilter: ['class'],
-            });
-        }
-        // Always set initial state
-        this.isInvalid = checkInvalidState(this.el);
-    }
-    componentWillLoad() {
-        this.hintTextId = this.getHintTextId();
-    }
-    disconnectedCallback() {
-        // Clean up validation observer to prevent memory leaks.
-        if (this.validationObserver) {
-            this.validationObserver.disconnect();
-            this.validationObserver = undefined;
-        }
-    }
-    getRadios() {
-        return Array.from(this.el.querySelectorAll('ion-radio'));
-    }
-    /**
-     * Emits an `ionChange` event.
-     *
-     * This API should be called for user committed changes.
-     * This API should not be used for external value changes.
-     */
-    emitValueChange(event) {
-        const { value } = this;
-        this.ionChange.emit({ value, event });
-    }
-    onKeydown(ev) {
-        // We don't want the value to automatically change/emit when the radio group is part of a select interface
-        // as this will cause the interface to close when navigating through the radio group options
-        const inSelectInterface = !!this.el.closest('ion-select-popover') || !!this.el.closest('ion-select-modal');
-        if (ev.target && !this.el.contains(ev.target)) {
-            return;
-        }
-        // Get all radios inside of the radio group and then
-        // filter out disabled radios since we need to skip those
-        const radios = this.getRadios().filter((radio) => !radio.disabled);
-        // Only move the radio if the current focus is in the radio group
-        if (ev.target && radios.includes(ev.target)) {
-            const index = radios.findIndex((radio) => radio === ev.target);
-            const current = radios[index];
-            let next;
-            // If hitting arrow down or arrow right, move to the next radio
-            // If we're on the last radio, move to the first radio
-            if (['ArrowDown', 'ArrowRight'].includes(ev.key)) {
-                next = index === radios.length - 1 ? radios[0] : radios[index + 1];
-            }
-            // If hitting arrow up or arrow left, move to the previous radio
-            // If we're on the first radio, move to the last radio
-            if (['ArrowUp', 'ArrowLeft'].includes(ev.key)) {
-                next = index === 0 ? radios[radios.length - 1] : radios[index - 1];
-            }
-            if (next && radios.includes(next)) {
-                next.setFocus(ev);
-                if (!inSelectInterface) {
-                    this.value = next.value;
-                    this.emitValueChange(ev);
-                }
-            }
-            // Update the radio group value when a user presses the
-            // space bar on top of a selected radio
-            if ([' '].includes(ev.key)) {
-                const previousValue = this.value;
-                this.value = this.allowEmptySelection && this.value !== undefined ? undefined : current.value;
-                if (previousValue !== this.value || this.allowEmptySelection) {
-                    /**
-                     * Value change should only be emitted if the value is different,
-                     * such as selecting a new radio with the space bar or if
-                     * the radio group allows for empty selection and the user
-                     * is deselecting a checked radio.
-                     */
-                    this.emitValueChange(ev);
-                }
-                // Prevent browsers from jumping
-                // to the bottom of the screen
-                ev.preventDefault();
-            }
-        }
-    }
-    /** @internal */
-    async setFocus() {
-        const radioToFocus = this.getRadios().find((r) => r.tabIndex !== -1);
-        radioToFocus === null || radioToFocus === void 0 ? void 0 : radioToFocus.setFocus();
-    }
-    /**
-     * Renders the helper text or error text values
-     */
-    renderHintText() {
-        const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
-        const hasHintText = !!helperText || !!errorText;
-        if (!hasHintText) {
-            return;
-        }
-        return (h("div", { class: "radio-group-top" }, h("div", { id: helperTextId, class: "helper-text", "aria-live": "polite" }, !isInvalid ? helperText : null), h("div", { id: errorTextId, class: "error-text", role: "alert" }, isInvalid ? errorText : null)));
-    }
-    getHintTextId() {
-        const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
-        if (isInvalid && errorText) {
-            return errorTextId;
-        }
-        if (helperText) {
-            return helperTextId;
-        }
-        return undefined;
-    }
-    render() {
-        const { label, labelId, el, name, value } = this;
-        const mode = getIonMode(this);
-        renderHiddenInput(true, el, name, value, false);
-        return (h(Host, { key: 'db593b3ed511e9395e3c7bfd91b787328692cd6d', role: "radiogroup", "aria-labelledby": label ? labelId : null, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick, class: mode }, this.renderHintText(), h("div", { key: '85045b45a0100a45f3b9a35d1c5a25ec63d525c4', class: "radio-group-wrapper" }, h("slot", { key: '53dacb87ce62398e78771fb2efaf839ab922d946' }))));
-    }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "value": [{
-                "valueChanged": 0
-            }]
-    }; }
-};
-let radioGroupIds = 0;
-RadioGroup.style = {
-    ios: radioGroupIosCss(),
-    md: radioGroupMdCss()
-};
-
-const titleIosCss = () => `:host{--color:initial;display:flex;flex:1;align-items:center;transform:translateZ(0);color:var(--color)}:host(.ion-color){color:var(--ion-color-base)}.toolbar-title{display:block;width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;pointer-events:auto}:host(.title-small) .toolbar-title{white-space:normal}:host{top:0;-webkit-padding-start:90px;padding-inline-start:90px;-webkit-padding-end:90px;padding-inline-end:90px;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);position:absolute;width:100%;height:100%;transform:translateZ(0);font-size:min(1.0625rem, 20.4px);font-weight:600;text-align:center;box-sizing:border-box;pointer-events:none}:host{inset-inline-start:0}:host(.title-small){-webkit-padding-start:9px;padding-inline-start:9px;-webkit-padding-end:9px;padding-inline-end:9px;padding-top:6px;padding-bottom:16px;position:relative;font-size:min(0.8125rem, 23.4px);font-weight:normal}:host(.title-large){-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:2px;padding-bottom:4px;transform-origin:left center;position:static;align-items:flex-end;min-width:100%;font-size:min(2.125rem, 61.2px);font-weight:700;text-align:start}:host(.title-large.title-rtl){transform-origin:right center}:host(.title-large.ion-cloned-element){--color:var(--ion-text-color, #000);font-family:var(--ion-font-family)}:host(.title-large) .toolbar-title{transform-origin:inherit;width:auto}:host-context([dir=rtl]):host(.title-large) .toolbar-title,:host-context([dir=rtl]).title-large .toolbar-title{transform-origin:calc(100% - inherit)}@supports selector(:dir(rtl)){:host(.title-large:dir(rtl)) .toolbar-title{transform-origin:calc(100% - inherit)}}`;
-
-const titleMdCss = () => `:host{--color:initial;display:flex;flex:1;align-items:center;transform:translateZ(0);color:var(--color)}:host(.ion-color){color:var(--ion-color-base)}.toolbar-title{display:block;width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;pointer-events:auto}:host(.title-small) .toolbar-title{white-space:normal}:host{-webkit-padding-start:20px;padding-inline-start:20px;-webkit-padding-end:20px;padding-inline-end:20px;padding-top:0;padding-bottom:0;font-size:1.25rem;font-weight:500;letter-spacing:0.0125em}:host(.title-small){width:100%;height:100%;font-size:0.9375rem;font-weight:normal}`;
-
-const ToolbarTitle = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.ionStyle = createEvent(this, "ionStyle", 7);
-    }
-    sizeChanged() {
-        this.emitStyle();
-    }
-    connectedCallback() {
-        this.emitStyle();
-    }
-    emitStyle() {
-        const size = this.getSize();
-        this.ionStyle.emit({
-            [`title-${size}`]: true,
-        });
-    }
-    getSize() {
-        return this.size !== undefined ? this.size : 'default';
-    }
-    render() {
-        const mode = getIonMode(this);
-        const size = this.getSize();
-        return (h(Host, { key: 'e599c0bf1b0817df3fa8360bdcd6d787f751c371', class: createColorClasses(this.color, {
-                [mode]: true,
-                [`title-${size}`]: true,
-                'title-rtl': document.dir === 'rtl',
-            }) }, h("div", { key: '6e7eee9047d6759876bb31d7305b76efc7c4338c', class: "toolbar-title" }, h("slot", { key: 'bf790eb4c83dd0af4f2fd1f85ab4af5819f46ff4' }))));
-    }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "size": [{
-                "sizeChanged": 0
-            }]
-    }; }
-};
-ToolbarTitle.style = {
-    ios: titleIosCss(),
-    md: titleMdCss()
-};
-
-const toolbarIosCss = () => `:host{--border-width:0;--border-style:solid;--opacity:1;--opacity-scale:1;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;position:relative;width:100%;padding-right:var(--ion-safe-area-right);padding-left:var(--ion-safe-area-left);color:var(--color);font-family:var(--ion-font-family, inherit);contain:content;z-index:10;box-sizing:border-box}:host(.ion-color){color:var(--ion-color-contrast)}:host(.ion-color) .toolbar-background{background:var(--ion-color-base)}.toolbar-container{-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:flex;position:relative;flex-direction:row;align-items:center;justify-content:space-between;width:100%;min-height:var(--min-height);contain:content;overflow:hidden;z-index:10;box-sizing:border-box}.toolbar-background{left:0;right:0;top:0;bottom:0;position:absolute;transform:translateZ(0);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);contain:strict;opacity:calc(var(--opacity) * var(--opacity-scale));z-index:-1;pointer-events:none}::slotted(ion-progress-bar){left:0;right:0;bottom:0;position:absolute}:host{--background:var(--ion-toolbar-background, var(--ion-color-step-50, var(--ion-background-color-step-50, #f7f7f7)));--color:var(--ion-toolbar-color, var(--ion-text-color, #000));--border-color:var(--ion-toolbar-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.2)))));--padding-top:3px;--padding-bottom:3px;--padding-start:4px;--padding-end:4px;--min-height:44px}.toolbar-content{flex:1;order:4;min-width:0}:host(.toolbar-segment) .toolbar-content{display:inline-flex}:host(.toolbar-searchbar) .toolbar-container{padding-top:0;padding-bottom:0}:host(.toolbar-searchbar) ::slotted(*){align-self:start}:host(.toolbar-searchbar) ::slotted(ion-chip){margin-top:3px}::slotted(ion-buttons){min-height:38px}::slotted([slot=start]){order:2}::slotted([slot=secondary]){order:3}::slotted([slot=primary]){order:5;text-align:end}::slotted([slot=end]){order:6;text-align:end}:host(.toolbar-title-large) .toolbar-container{flex-wrap:wrap;align-items:flex-start}:host(.toolbar-title-large) .toolbar-content ion-title{flex:1;order:8;min-width:100%}`;
-
-const toolbarMdCss = () => `:host{--border-width:0;--border-style:solid;--opacity:1;--opacity-scale:1;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;position:relative;width:100%;padding-right:var(--ion-safe-area-right);padding-left:var(--ion-safe-area-left);color:var(--color);font-family:var(--ion-font-family, inherit);contain:content;z-index:10;box-sizing:border-box}:host(.ion-color){color:var(--ion-color-contrast)}:host(.ion-color) .toolbar-background{background:var(--ion-color-base)}.toolbar-container{-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:flex;position:relative;flex-direction:row;align-items:center;justify-content:space-between;width:100%;min-height:var(--min-height);contain:content;overflow:hidden;z-index:10;box-sizing:border-box}.toolbar-background{left:0;right:0;top:0;bottom:0;position:absolute;transform:translateZ(0);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);contain:strict;opacity:calc(var(--opacity) * var(--opacity-scale));z-index:-1;pointer-events:none}::slotted(ion-progress-bar){left:0;right:0;bottom:0;position:absolute}:host{--background:var(--ion-toolbar-background, var(--ion-background-color, #fff));--color:var(--ion-toolbar-color, var(--ion-text-color, #424242));--border-color:var(--ion-toolbar-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, #c1c4cd))));--padding-top:0;--padding-bottom:0;--padding-start:0;--padding-end:0;--min-height:56px}.toolbar-content{flex:1;order:3;min-width:0;max-width:100%}::slotted(.buttons-first-slot){-webkit-margin-start:4px;margin-inline-start:4px}::slotted(.buttons-last-slot){-webkit-margin-end:4px;margin-inline-end:4px}::slotted([slot=start]){order:2}::slotted([slot=secondary]){order:4}::slotted([slot=primary]){order:5;text-align:end}::slotted([slot=end]){order:6;text-align:end}`;
-
-const Toolbar = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.childrenStyles = new Map();
-    }
-    componentWillLoad() {
-        const buttons = Array.from(this.el.querySelectorAll('ion-buttons'));
-        const firstButtons = buttons.find((button) => {
-            return button.slot === 'start';
-        });
-        if (firstButtons) {
-            firstButtons.classList.add('buttons-first-slot');
-        }
-        const buttonsReversed = buttons.reverse();
-        const lastButtons = buttonsReversed.find((button) => button.slot === 'end') ||
-            buttonsReversed.find((button) => button.slot === 'primary') ||
-            buttonsReversed.find((button) => button.slot === 'secondary');
-        if (lastButtons) {
-            lastButtons.classList.add('buttons-last-slot');
-        }
-    }
-    childrenStyle(ev) {
-        ev.stopPropagation();
-        const tagName = ev.target.tagName;
-        const updatedStyles = ev.detail;
-        const newStyles = {};
-        const childStyles = this.childrenStyles.get(tagName) || {};
-        let hasStyleChange = false;
-        Object.keys(updatedStyles).forEach((key) => {
-            const childKey = `toolbar-${key}`;
-            const newValue = updatedStyles[key];
-            if (newValue !== childStyles[childKey]) {
-                hasStyleChange = true;
-            }
-            if (newValue) {
-                newStyles[childKey] = true;
-            }
-        });
-        if (hasStyleChange) {
-            this.childrenStyles.set(tagName, newStyles);
-            forceUpdate(this);
-        }
-    }
-    render() {
-        const mode = getIonMode(this);
-        const childStyles = {};
-        this.childrenStyles.forEach((value) => {
-            Object.assign(childStyles, value);
-        });
-        return (h(Host, { key: 'f6c4f669a6a61c5eac4cbb5ea0aa97c48ae5bd46', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
-                [mode]: true,
-                'in-toolbar': hostContext('ion-toolbar', this.el),
-            })) }, h("div", { key: '9c81742ffa02de9ba7417025b077d05e67305074', class: "toolbar-background", part: "background" }), h("div", { key: '5fc96d166fa47894a062e41541a9beee38078a36', class: "toolbar-container", part: "container" }, h("slot", { key: 'b62c0d9d59a70176bdbf769aec6090d7a166853b', name: "start" }), h("slot", { key: 'd01d3cc2c50e5aaa49c345b209fe8dbdf3d48131', name: "secondary" }), h("div", { key: '3aaa3a2810aedd38c37eb616158ec7b9638528fc', class: "toolbar-content", part: "content" }, h("slot", { key: '357246690f8d5e1cc3ca369611d4845a79edf610' })), h("slot", { key: '06ed3cca4f7ebff4a54cd877dad3cc925ccf9f75', name: "primary" }), h("slot", { key: 'e453d43d14a26b0d72f41e1b81a554bab8ece811', name: "end" }))));
-    }
-    get el() { return getElement(this); }
-};
-Toolbar.style = {
-    ios: toolbarIosCss(),
-    md: toolbarMdCss()
-};
-
-export { Buttons as ion_buttons, Checkbox as ion_checkbox, Content as ion_content, Header as ion_header, Item as ion_item, List as ion_list, Radio as ion_radio, RadioGroup as ion_radio_group, ToolbarTitle as ion_title, Toolbar as ion_toolbar };