@amwaljs/checkout-button 0.2.9 → 0.3.0

package/dist/components/p-Dw849bTq.js

@@ -1,305 +0,0 @@
-import { p as proxyCustomElement, H, c as createEvent, i as forceUpdate, f as printIonWarning, h, e as Host, t as transformTag } from './p-abe_AkUW.js';
-import { h as hasShadowDom, i as inheritAriaAttributes } from './p-CBE-1aIM.js';
-import { o as openURL, c as createColorClasses, h as hostContext } from './p-DiVJyqlX.js';
-import { g as getIonMode } from './p-DEAe7QEa.js';
-import { d as defineCustomElement$1 } from './p-DskTArru.js';
-
-const buttonIosCss = () => `:host{--overflow:hidden;--ripple-color:currentColor;--border-width:initial;--border-color:initial;--border-style:initial;--color-activated:var(--color);--color-focused:var(--color);--color-hover:var(--color);--box-shadow:none;display:inline-block;width:auto;color:var(--color);font-family:var(--ion-font-family, inherit);text-align:center;text-decoration:none;white-space:normal;user-select:none;vertical-align:top;vertical-align:-webkit-baseline-middle;font-kerning:none}:host(.button-disabled){cursor:default;opacity:0.5;pointer-events:none}:host(.button-solid){--background:var(--ion-color-primary, #0054e9);--color:var(--ion-color-primary-contrast, #fff)}:host(.button-outline){--border-color:var(--ion-color-primary, #0054e9);--background:transparent;--color:var(--ion-color-primary, #0054e9)}:host(.button-clear){--border-width:0;--background:transparent;--color:var(--ion-color-primary, #0054e9)}:host(.button-block){display:block}:host(.button-block) .button-native{margin-left:0;margin-right:0;width:100%;clear:both;contain:content}:host(.button-block) .button-native::after{clear:both}:host(.button-full){display:block}:host(.button-full) .button-native{margin-left:0;margin-right:0;width:100%;contain:content}:host(.button-full:not(.button-round)) .button-native{border-radius:0;border-right-width:0;border-left-width:0}.button-native{border-radius:var(--border-radius);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-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);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;display:flex;position:relative;align-items:center;width:100%;height:100%;min-height:inherit;transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);outline:none;background:var(--background);line-height:1;box-shadow:var(--box-shadow);contain:layout style;cursor:pointer;opacity:var(--opacity);overflow:var(--overflow);z-index:0;box-sizing:border-box;appearance:none}.button-native::-moz-focus-inner{border:0}.button-inner{display:flex;position:relative;flex-flow:row nowrap;flex-shrink:0;align-items:center;justify-content:center;width:100%;height:100%;z-index:1}::slotted([slot=start]),::slotted([slot=end]){flex-shrink:0}::slotted(ion-icon){font-size:1.35em;pointer-events:none}::slotted(ion-icon[slot=start]){-webkit-margin-start:-0.3em;margin-inline-start:-0.3em;-webkit-margin-end:0.3em;margin-inline-end:0.3em;margin-top:0;margin-bottom:0}::slotted(ion-icon[slot=end]){-webkit-margin-start:0.3em;margin-inline-start:0.3em;-webkit-margin-end:-0.2em;margin-inline-end:-0.2em;margin-top:0;margin-bottom:0}ion-ripple-effect{color:var(--ripple-color)}.button-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:"";opacity:0}:host(.ion-focused){color:var(--color-focused)}:host(.ion-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}@media (any-hover: hover){:host(:hover){color:var(--color-hover)}:host(:hover) .button-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}}:host(.ion-activated){color:var(--color-activated)}:host(.ion-activated) .button-native::after{background:var(--background-activated);opacity:var(--background-activated-opacity)}:host(.button-solid.ion-color) .button-native{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.button-outline.ion-color) .button-native{border-color:var(--ion-color-base);background:transparent;color:var(--ion-color-base)}:host(.button-clear.ion-color) .button-native{background:transparent;color:var(--ion-color-base)}:host(.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native{color:var(--ion-toolbar-color, var(--color))}:host(.button-outline.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native{border-color:var(--ion-toolbar-color, var(--color, var(--border-color)))}:host(.button-solid.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native{background:var(--ion-toolbar-color, var(--background));color:var(--ion-toolbar-background, var(--color))}:host{--border-radius:14px;--padding-top:13px;--padding-bottom:13px;--padding-start:1em;--padding-end:1em;--transition:background-color, opacity 100ms linear;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px;margin-top:4px;margin-bottom:4px;min-height:3.1em;font-size:min(1rem, 48px);font-weight:500;letter-spacing:0}:host(.button-solid){--background-activated:var(--ion-color-primary-shade, #004acd);--background-focused:var(--ion-color-primary-shade, #004acd);--background-hover:var(--ion-color-primary-tint, #1a65eb);--background-activated-opacity:1;--background-focused-opacity:1;--background-hover-opacity:1}:host(.button-outline){--border-radius:14px;--border-width:1px;--border-style:solid;--background-activated:var(--ion-color-primary, #0054e9);--background-focused:var(--ion-color-primary, #0054e9);--background-hover:transparent;--background-focused-opacity:.1;--color-activated:var(--ion-color-primary-contrast, #fff)}:host(.button-clear){--background-activated:transparent;--background-activated-opacity:0;--background-focused:var(--ion-color-primary, #0054e9);--background-hover:transparent;--background-focused-opacity:.1;font-size:min(1.0625rem, 51px);font-weight:normal}:host(.in-buttons){font-size:clamp(17px, 1.0625rem, 21.08px);font-weight:400}:host(.button-large){--border-radius:16px;--padding-top:17px;--padding-start:1em;--padding-end:1em;--padding-bottom:17px;min-height:3.1em;font-size:min(1.25rem, 60px)}:host(.button-small){--border-radius:6px;--padding-top:4px;--padding-start:0.9em;--padding-end:0.9em;--padding-bottom:4px;min-height:2.1em;font-size:min(0.8125rem, 39px)}:host(.button-round){--border-radius:999px;--padding-top:0;--padding-start:26px;--padding-end:26px;--padding-bottom:0}:host(.button-strong){font-weight:600}:host(.button-has-icon-only){--padding-top:0;--padding-bottom:var(--padding-top);--padding-end:var(--padding-top);--padding-start:var(--padding-end);min-width:clamp(30px, 2.125em, 60px);min-height:clamp(30px, 2.125em, 60px)}::slotted(ion-icon[slot=icon-only]){font-size:clamp(15.12px, 1.125em, 43.02px)}:host(.button-small.button-has-icon-only){min-width:clamp(23px, 2.16em, 54px);min-height:clamp(23px, 2.16em, 54px)}:host(.button-small) ::slotted(ion-icon[slot=icon-only]){font-size:clamp(12.1394px, 1.308125em, 40.1856px)}:host(.button-large.button-has-icon-only){min-width:clamp(46px, 2.5em, 78px);min-height:clamp(46px, 2.5em, 78px)}:host(.button-large) ::slotted(ion-icon[slot=icon-only]){font-size:clamp(15.12px, 0.9em, 43.056px)}:host(.button-outline.ion-focused.ion-color) .button-native,:host(.button-clear.ion-focused.ion-color) .button-native{color:var(--ion-color-base)}:host(.button-outline.ion-focused.ion-color) .button-native::after,:host(.button-clear.ion-focused.ion-color) .button-native::after{background:var(--ion-color-base)}:host(.button-solid.ion-color.ion-focused) .button-native::after{background:var(--ion-color-shade)}@media (any-hover: hover){:host(.button-clear:not(.ion-activated):hover),:host(.button-outline:not(.ion-activated):hover){opacity:0.6}:host(.button-clear.ion-color:hover) .button-native,:host(.button-outline.ion-color:hover) .button-native{color:var(--ion-color-base)}:host(.button-clear.ion-color:hover) .button-native::after,:host(.button-outline.ion-color:hover) .button-native::after{background:transparent}:host(.button-solid.ion-color:hover) .button-native::after{background:var(--ion-color-tint)}:host(:hover.button-solid.in-toolbar:not(.ion-color):not(.in-toolbar-color):not(.ion-activated)) .button-native::after{background:#fff;opacity:0.1}}:host(.button-clear.ion-activated){opacity:0.4}:host(.button-outline.ion-activated.ion-color) .button-native{color:var(--ion-color-contrast)}:host(.button-outline.ion-activated.ion-color) .button-native::after{background:var(--ion-color-base)}:host(.button-solid.ion-color.ion-activated) .button-native::after{background:var(--ion-color-shade)}:host(.button-outline.ion-activated.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native{background:var(--ion-toolbar-color, var(--color));color:var(--ion-toolbar-background, var(--background), var(--ion-color-primary-contrast, #fff))}`;
-
-const buttonMdCss = () => `:host{--overflow:hidden;--ripple-color:currentColor;--border-width:initial;--border-color:initial;--border-style:initial;--color-activated:var(--color);--color-focused:var(--color);--color-hover:var(--color);--box-shadow:none;display:inline-block;width:auto;color:var(--color);font-family:var(--ion-font-family, inherit);text-align:center;text-decoration:none;white-space:normal;user-select:none;vertical-align:top;vertical-align:-webkit-baseline-middle;font-kerning:none}:host(.button-disabled){cursor:default;opacity:0.5;pointer-events:none}:host(.button-solid){--background:var(--ion-color-primary, #0054e9);--color:var(--ion-color-primary-contrast, #fff)}:host(.button-outline){--border-color:var(--ion-color-primary, #0054e9);--background:transparent;--color:var(--ion-color-primary, #0054e9)}:host(.button-clear){--border-width:0;--background:transparent;--color:var(--ion-color-primary, #0054e9)}:host(.button-block){display:block}:host(.button-block) .button-native{margin-left:0;margin-right:0;width:100%;clear:both;contain:content}:host(.button-block) .button-native::after{clear:both}:host(.button-full){display:block}:host(.button-full) .button-native{margin-left:0;margin-right:0;width:100%;contain:content}:host(.button-full:not(.button-round)) .button-native{border-radius:0;border-right-width:0;border-left-width:0}.button-native{border-radius:var(--border-radius);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-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);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;display:flex;position:relative;align-items:center;width:100%;height:100%;min-height:inherit;transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);outline:none;background:var(--background);line-height:1;box-shadow:var(--box-shadow);contain:layout style;cursor:pointer;opacity:var(--opacity);overflow:var(--overflow);z-index:0;box-sizing:border-box;appearance:none}.button-native::-moz-focus-inner{border:0}.button-inner{display:flex;position:relative;flex-flow:row nowrap;flex-shrink:0;align-items:center;justify-content:center;width:100%;height:100%;z-index:1}::slotted([slot=start]),::slotted([slot=end]){flex-shrink:0}::slotted(ion-icon){font-size:1.35em;pointer-events:none}::slotted(ion-icon[slot=start]){-webkit-margin-start:-0.3em;margin-inline-start:-0.3em;-webkit-margin-end:0.3em;margin-inline-end:0.3em;margin-top:0;margin-bottom:0}::slotted(ion-icon[slot=end]){-webkit-margin-start:0.3em;margin-inline-start:0.3em;-webkit-margin-end:-0.2em;margin-inline-end:-0.2em;margin-top:0;margin-bottom:0}ion-ripple-effect{color:var(--ripple-color)}.button-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:"";opacity:0}:host(.ion-focused){color:var(--color-focused)}:host(.ion-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}@media (any-hover: hover){:host(:hover){color:var(--color-hover)}:host(:hover) .button-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}}:host(.ion-activated){color:var(--color-activated)}:host(.ion-activated) .button-native::after{background:var(--background-activated);opacity:var(--background-activated-opacity)}:host(.button-solid.ion-color) .button-native{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.button-outline.ion-color) .button-native{border-color:var(--ion-color-base);background:transparent;color:var(--ion-color-base)}:host(.button-clear.ion-color) .button-native{background:transparent;color:var(--ion-color-base)}:host(.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native{color:var(--ion-toolbar-color, var(--color))}:host(.button-outline.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native{border-color:var(--ion-toolbar-color, var(--color, var(--border-color)))}:host(.button-solid.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native{background:var(--ion-toolbar-color, var(--background));color:var(--ion-toolbar-background, var(--color))}:host{--border-radius:4px;--padding-top:8px;--padding-bottom:8px;--padding-start:1.1em;--padding-end:1.1em;--transition:box-shadow 280ms cubic-bezier(.4, 0, .2, 1),
-                background-color 15ms linear,
-                color 15ms linear;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px;margin-top:4px;margin-bottom:4px;min-height:36px;font-size:0.875rem;font-weight:500;letter-spacing:0.06em;text-transform:uppercase}:host(.button-solid){--background-activated:transparent;--background-hover:var(--ion-color-primary-contrast, #fff);--background-focused:var(--ion-color-primary-contrast, #fff);--background-activated-opacity:0;--background-focused-opacity:.24;--background-hover-opacity:.08;--box-shadow:0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)}:host(.button-solid.ion-activated){--box-shadow:0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12)}:host(.button-outline){--border-width:2px;--border-style:solid;--box-shadow:none;--background-activated:transparent;--background-focused:var(--ion-color-primary, #0054e9);--background-hover:var(--ion-color-primary, #0054e9);--background-activated-opacity:0;--background-focused-opacity:.12;--background-hover-opacity:.04}:host(.button-outline.ion-activated.ion-color) .button-native{background:transparent}:host(.button-clear){--background-activated:transparent;--background-focused:var(--ion-color-primary, #0054e9);--background-hover:var(--ion-color-primary, #0054e9);--background-activated-opacity:0;--background-focused-opacity:.12;--background-hover-opacity:.04}:host(.button-round){--border-radius:999px;--padding-top:0;--padding-start:26px;--padding-end:26px;--padding-bottom:0}:host(.button-large){--padding-top:14px;--padding-start:1em;--padding-end:1em;--padding-bottom:14px;min-height:2.8em;font-size:1.25rem}:host(.button-small){--padding-top:4px;--padding-start:0.9em;--padding-end:0.9em;--padding-bottom:4px;min-height:2.1em;font-size:0.8125rem}:host(.button-strong){font-weight:bold}:host(.button-has-icon-only){--padding-top:0;--padding-bottom:var(--padding-top);--padding-end:var(--padding-top);--padding-start:var(--padding-end);min-width:clamp(30px, 2.86em, 60px);min-height:clamp(30px, 2.86em, 60px)}::slotted(ion-icon[slot=icon-only]){font-size:clamp(15.104px, 1.6em, 43.008px)}:host(.button-small.button-has-icon-only){min-width:clamp(23px, 2.16em, 54px);min-height:clamp(23px, 2.16em, 54px)}:host(.button-small) ::slotted(ion-icon[slot=icon-only]){font-size:clamp(13.002px, 1.23125em, 40.385px)}:host(.button-large.button-has-icon-only){min-width:clamp(46px, 2.5em, 78px);min-height:clamp(46px, 2.5em, 78px)}:host(.button-large) ::slotted(ion-icon[slot=icon-only]){font-size:clamp(15.008px, 1.4em, 43.008px)}:host(.button-solid.ion-color.ion-focused) .button-native::after{background:var(--ion-color-contrast)}:host(.button-clear.ion-color.ion-focused) .button-native::after,:host(.button-outline.ion-color.ion-focused) .button-native::after{background:var(--ion-color-base)}@media (any-hover: hover){:host(.button-solid.ion-color:hover) .button-native::after{background:var(--ion-color-contrast)}:host(.button-clear.ion-color:hover) .button-native::after,:host(.button-outline.ion-color:hover) .button-native::after{background:var(--ion-color-base)}}:host(.button-outline.ion-activated.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native{background:var(--ion-toolbar-background, var(--color));color:var(--ion-toolbar-color, var(--background), var(--ion-color-primary-contrast, #fff))}`;
-
-const Button = /*@__PURE__*/ proxyCustomElement(class Button extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.ionFocus = createEvent(this, "ionFocus", 7);
-        this.ionBlur = createEvent(this, "ionBlur", 7);
-        this.inItem = false;
-        this.inListHeader = false;
-        this.inToolbar = false;
-        this.formButtonEl = null;
-        this.formEl = null;
-        this.inheritedAttributes = {};
-        /**
-         * If `true`, the button only has an icon.
-         */
-        this.isCircle = false;
-        /**
-         * The type of button.
-         */
-        this.buttonType = 'button';
-        /**
-         * If `true`, the user cannot interact with the button.
-         */
-        this.disabled = false;
-        /**
-         * When using a router, it specifies the transition direction when navigating to
-         * another page using `href`.
-         */
-        this.routerDirection = 'forward';
-        /**
-         * If `true`, activates a button with a heavier font weight.
-         */
-        this.strong = false;
-        /**
-         * The type of the button.
-         */
-        this.type = 'button';
-        this.handleClick = (ev) => {
-            const { el } = this;
-            if (this.type === 'button') {
-                openURL(this.href, ev, this.routerDirection, this.routerAnimation);
-            }
-            else if (hasShadowDom(el)) {
-                this.submitForm(ev);
-            }
-        };
-        this.onFocus = () => {
-            this.ionFocus.emit();
-        };
-        this.onBlur = () => {
-            this.ionBlur.emit();
-        };
-        this.slotChanged = () => {
-            /**
-             * Ensures that the 'has-icon-only' class is properly added
-             * or removed from `ion-button` when manipulating the
-             * `icon-only` slot.
-             *
-             * Without this, the 'has-icon-only' class is only checked
-             * or added when `ion-button` component first renders.
-             */
-            this.isCircle = this.hasIconOnly;
-        };
-    }
-    disabledChanged() {
-        const { disabled } = this;
-        if (this.formButtonEl) {
-            this.formButtonEl.disabled = disabled;
-        }
-    }
-    /**
-     * This component is used within the `ion-input-password-toggle` component
-     * to toggle the visibility of the password input.
-     * These attributes need to update based on the state of the password input.
-     * Otherwise, the values will be stale.
-     *
-     * @param newValue
-     * @param _oldValue
-     * @param propName
-     */
-    onAriaChanged(newValue, _oldValue, propName) {
-        this.inheritedAttributes = Object.assign(Object.assign({}, this.inheritedAttributes), { [propName]: newValue });
-        forceUpdate(this);
-    }
-    /**
-     * This is responsible for rendering a hidden native
-     * button element inside the associated form. This allows
-     * users to submit a form by pressing "Enter" when a text
-     * field inside of the form is focused. The native button
-     * rendered inside of `ion-button` is in the Shadow DOM
-     * and therefore does not participate in form submission
-     * which is why the following code is necessary.
-     */
-    renderHiddenButton() {
-        const formEl = (this.formEl = this.findForm());
-        if (formEl) {
-            const { formButtonEl } = this;
-            /**
-             * If the form already has a rendered form button
-             * then do not append a new one again.
-             */
-            if (formButtonEl !== null && formEl.contains(formButtonEl)) {
-                return;
-            }
-            // Create a hidden native button inside of the form
-            const newFormButtonEl = (this.formButtonEl = document.createElement('button'));
-            newFormButtonEl.type = this.type;
-            newFormButtonEl.style.display = 'none';
-            // Only submit if the button is not disabled.
-            newFormButtonEl.disabled = this.disabled;
-            formEl.appendChild(newFormButtonEl);
-        }
-    }
-    componentWillLoad() {
-        this.inToolbar = !!this.el.closest('ion-buttons');
-        this.inListHeader = !!this.el.closest('ion-list-header');
-        this.inItem = !!this.el.closest('ion-item') || !!this.el.closest('ion-item-divider');
-        this.inheritedAttributes = inheritAriaAttributes(this.el);
-    }
-    get hasIconOnly() {
-        return !!this.el.querySelector('[slot="icon-only"]');
-    }
-    get rippleType() {
-        const hasClearFill = this.fill === undefined || this.fill === 'clear';
-        // If the button is in a toolbar, has a clear fill (which is the default)
-        // and only has an icon we use the unbounded "circular" ripple effect
-        if (hasClearFill && this.hasIconOnly && this.inToolbar) {
-            return 'unbounded';
-        }
-        return 'bounded';
-    }
-    /**
-     * Finds the form element based on the provided `form` selector
-     * or element reference provided.
-     */
-    findForm() {
-        const { form } = this;
-        if (form instanceof HTMLFormElement) {
-            return form;
-        }
-        if (typeof form === 'string') {
-            // Check if the string provided is a form id.
-            const el = document.getElementById(form);
-            if (el) {
-                if (el instanceof HTMLFormElement) {
-                    return el;
-                }
-                else {
-                    /**
-                     * The developer specified a string for the form attribute, but the
-                     * element with that id is not a form element.
-                     */
-                    printIonWarning(`[ion-button] - Form with selector: "#${form}" could not be found. Verify that the id is attached to a <form> element.`, this.el);
-                    return null;
-                }
-            }
-            else {
-                /**
-                 * The developer specified a string for the form attribute, but the
-                 * element with that id could not be found in the DOM.
-                 */
-                printIonWarning(`[ion-button] - Form with selector: "#${form}" could not be found. Verify that the id is correct and the form is rendered in the DOM.`, this.el);
-                return null;
-            }
-        }
-        if (form !== undefined) {
-            /**
-             * The developer specified a HTMLElement for the form attribute,
-             * but the element is not a HTMLFormElement.
-             * This will also catch if the developer tries to pass in null
-             * as the form attribute.
-             */
-            printIonWarning(`[ion-button] - The provided "form" element is invalid. Verify that the form is a HTMLFormElement and rendered in the DOM.`, this.el);
-            return null;
-        }
-        /**
-         * If the form element is not set, the button may be inside
-         * of a form element. Query the closest form element to the button.
-         */
-        return this.el.closest('form');
-    }
-    submitForm(ev) {
-        // this button wants to specifically submit a form
-        // climb up the dom to see if we're in a <form>
-        // and if so, then use JS to submit it
-        if (this.formEl && this.formButtonEl) {
-            ev.preventDefault();
-            this.formButtonEl.click();
-        }
-    }
-    render() {
-        const mode = getIonMode(this);
-        const { buttonType, type, disabled, rel, target, size, href, color, expand, hasIconOnly, shape, strong, inheritedAttributes, } = this;
-        const finalSize = size === undefined && this.inItem ? 'small' : size;
-        const TagType = href === undefined ? 'button' : 'a';
-        const attrs = TagType === 'button'
-            ? { type }
-            : {
-                download: this.download,
-                href,
-                rel,
-                target,
-            };
-        let fill = this.fill;
-        if (fill === undefined) {
-            fill = this.inToolbar || this.inListHeader ? 'clear' : 'solid';
-        }
-        /**
-         * We call renderHiddenButton in the render function to account
-         * for any properties being set async. For example, changing the
-         * "type" prop from "button" to "submit" after the component has
-         * loaded would warrant the hidden button being added to the
-         * associated form.
-         */
-        {
-            type !== 'button' && this.renderHiddenButton();
-        }
-        return (h(Host, { key: 'ed82ea53705523f9afc5f1a9addff44cc6424f27', onClick: this.handleClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
-                [mode]: true,
-                [buttonType]: true,
-                [`${buttonType}-${expand}`]: expand !== undefined,
-                [`${buttonType}-${finalSize}`]: finalSize !== undefined,
-                [`${buttonType}-${shape}`]: shape !== undefined,
-                [`${buttonType}-${fill}`]: true,
-                [`${buttonType}-strong`]: strong,
-                'in-toolbar': hostContext('ion-toolbar', this.el),
-                'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
-                'in-buttons': hostContext('ion-buttons', this.el),
-                'button-has-icon-only': hasIconOnly,
-                'button-disabled': disabled,
-                'ion-activatable': true,
-                'ion-focusable': true,
-            }) }, h(TagType, Object.assign({ key: 'fadec13053469dd0405bbbc61b70ced568aa4826' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), h("span", { key: '6bf0e5144fb1148002e88038522402b789689d2c', class: "button-inner" }, h("slot", { key: '25da0ca155cfa9e2754842c34f4fd09f576ac2d2', name: "icon-only", onSlotchange: this.slotChanged }), h("slot", { key: '51414065bb11953ec9d818f8d9353589bc9072c5', name: "start" }), h("slot", { key: 'c9b5f8842aeabd20628df2f4600f1257ea913d8d' }), h("slot", { key: '478dd3671c7be1909fc84e672f0fa8dfe6082263', name: "end" })), mode === 'md' && h("ion-ripple-effect", { key: 'e1d55f85a55144d743f58a5914cd116cb065fa8c', type: this.rippleType }))));
-    }
-    get el() { return this; }
-    static get watchers() { return {
-        "disabled": ["disabledChanged"],
-        "aria-checked": ["onAriaChanged"],
-        "aria-label": ["onAriaChanged"]
-    }; }
-    static get style() { return {
-        ios: buttonIosCss(),
-        md: buttonMdCss()
-    }; }
-}, [289, "ion-button", {
-        "color": [513],
-        "buttonType": [1025, "button-type"],
-        "disabled": [516],
-        "expand": [513],
-        "fill": [1537],
-        "routerDirection": [1, "router-direction"],
-        "routerAnimation": [16],
-        "download": [1],
-        "href": [1],
-        "rel": [1],
-        "shape": [513],
-        "size": [513],
-        "strong": [4],
-        "target": [1],
-        "type": [1],
-        "form": [1],
-        "isCircle": [32]
-    }, undefined, {
-        "disabled": ["disabledChanged"],
-        "aria-checked": ["onAriaChanged"],
-        "aria-label": ["onAriaChanged"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["ion-button", "ion-ripple-effect"];
-    components.forEach(tagName => { switch (tagName) {
-        case "ion-button":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), Button);
-            }
-            break;
-        case "ion-ripple-effect":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { Button as B, defineCustomElement as d };
-//# sourceMappingURL=p-Dw849bTq.js.map
-
-//# sourceMappingURL=p-Dw849bTq.js.map

package/dist/components/p-Dw849bTq.js.map

@@ -1 +0,0 @@
-{"file":"p-Dw849bTq.js","mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,MAAM,CAAC,ghRAAghR,CAAC;;ACA7iR,MAAM,WAAW,GAAG,MAAM,CAAC;AAC3B;AACA,61GAA61G,CAAC;;MCgBj1G,MAAM,iBAAAA,kBAAA,CAAA,MAAA,MAAA,SAAAC,CAAA,CAAA;AACf,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;;AACI,QAAA,IAAI,CAAC,MAAM,GAAG,KAAK;AACnB,QAAA,IAAI,CAAC,YAAY,GAAG,KAAK;AACzB,QAAA,IAAI,CAAC,SAAS,GAAG,KAAK;AACtB,QAAA,IAAI,CAAC,YAAY,GAAG,IAAI;AACxB,QAAA,IAAI,CAAC,MAAM,GAAG,IAAI;AAClB,QAAA,IAAI,CAAC,mBAAmB,GAAG,EAAE;AAC7B;;AAEG;AACH,QAAA,IAAI,CAAC,QAAQ,GAAG,KAAK;AACrB;;AAEG;AACH,QAAA,IAAI,CAAC,UAAU,GAAG,QAAQ;AAC1B;;AAEG;AACH,QAAA,IAAI,CAAC,QAAQ,GAAG,KAAK;AACrB;;;AAGG;AACH,QAAA,IAAI,CAAC,eAAe,GAAG,SAAS;AAChC;;AAEG;AACH,QAAA,IAAI,CAAC,MAAM,GAAG,KAAK;AACnB;;AAEG;AACH,QAAA,IAAI,CAAC,IAAI,GAAG,QAAQ;AACpB,QAAA,IAAI,CAAC,WAAW,GAAG,CAAC,EAAE,KAAI;AACtB,YAAA,MAAM,EAAE,EAAE,EAAE,GAAG,IAAI;AACnB,YAAA,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;AACxB,gBAAA,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,EAAE,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,eAAe,CAAC;;AAEjE,iBAAA,IAAI,YAAY,CAAC,EAAE,CAAC,EAAE;AACvB,gBAAA,IAAI,CAAC,UAAU,CAAC,EAAE,CAAC;;AAE3B,SAAC;AACD,QAAA,IAAI,CAAC,OAAO,GAAG,MAAK;AAChB,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE;AACxB,SAAC;AACD,QAAA,IAAI,CAAC,MAAM,GAAG,MAAK;AACf,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;AACvB,SAAC;AACD,QAAA,IAAI,CAAC,WAAW,GAAG,MAAK;AACpB;;;;;;;AAOG;AACH,YAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW;AACpC,SAAC;AACJ;IACD,eAAe,GAAA;AACX,QAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI;AACzB,QAAA,IAAI,IAAI,CAAC,YAAY,EAAE;AACnB,YAAA,IAAI,CAAC,YAAY,CAAC,QAAQ,GAAG,QAAQ;;;AAG7C;;;;;;;;;AASG;AACH,IAAA,aAAa,CAAC,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAA;QACvC,IAAI,CAAC,mBAAmB,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,IAAI,CAAC,mBAAmB,CAAC,EAAE,EAAE,CAAC,QAAQ,GAAG,QAAQ,EAAE,CAAC;QAC/G,WAAW,CAAC,IAAI,CAAC;;AAErB;;;;;;;;AAQG;IACH,kBAAkB,GAAA;AACd,QAAA,MAAM,MAAM,IAAI,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC9C,IAAI,MAAM,EAAE;AACR,YAAA,MAAM,EAAE,YAAY,EAAE,GAAG,IAAI;AAC7B;;;AAGG;YACH,IAAI,YAAY,KAAK,IAAI,IAAI,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE;gBACxD;;;AAGJ,YAAA,MAAM,eAAe,IAAI,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;AAC9E,YAAA,eAAe,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI;AAChC,YAAA,eAAe,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM;;AAEtC,YAAA,eAAe,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ;AACxC,YAAA,MAAM,CAAC,WAAW,CAAC,eAAe,CAAC;;;IAG3C,iBAAiB,GAAA;AACb,QAAA,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,aAAa,CAAC;AACjD,QAAA,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,iBAAiB,CAAC;QACxD,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,kBAAkB,CAAC;QACpF,IAAI,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC;;AAE7D,IAAA,IAAI,WAAW,GAAA;QACX,OAAO,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,oBAAoB,CAAC;;AAExD,IAAA,IAAI,UAAU,GAAA;AACV,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO;;;QAGrE,IAAI,YAAY,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,SAAS,EAAE;AACpD,YAAA,OAAO,WAAW;;AAEtB,QAAA,OAAO,SAAS;;AAEpB;;;AAGG;IACH,QAAQ,GAAA;AACJ,QAAA,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI;AACrB,QAAA,IAAI,IAAI,YAAY,eAAe,EAAE;AACjC,YAAA,OAAO,IAAI;;AAEf,QAAA,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;;YAE1B,MAAM,EAAE,GAAG,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC;YACxC,IAAI,EAAE,EAAE;AACJ,gBAAA,IAAI,EAAE,YAAY,eAAe,EAAE;AAC/B,oBAAA,OAAO,EAAE;;qBAER;AACD;;;AAGG;oBACH,eAAe,CAAC,wCAAwC,IAAI,CAAA,yEAAA,CAA2E,EAAE,IAAI,CAAC,EAAE,CAAC;AACjJ,oBAAA,OAAO,IAAI;;;iBAGd;AACD;;;AAGG;gBACH,eAAe,CAAC,wCAAwC,IAAI,CAAA,wFAAA,CAA0F,EAAE,IAAI,CAAC,EAAE,CAAC;AAChK,gBAAA,OAAO,IAAI;;;AAGnB,QAAA,IAAI,IAAI,KAAK,SAAS,EAAE;AACpB;;;;;AAKG;AACH,YAAA,eAAe,CAAC,CAA2H,yHAAA,CAAA,EAAE,IAAI,CAAC,EAAE,CAAC;AACrJ,YAAA,OAAO,IAAI;;AAEf;;;AAGG;QACH,OAAO,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC;;AAElC,IAAA,UAAU,CAAC,EAAE,EAAA;;;;QAIT,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,YAAY,EAAE;YAClC,EAAE,CAAC,cAAc,EAAE;AACnB,YAAA,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE;;;IAGjC,MAAM,GAAA;AACF,QAAA,MAAM,IAAI,GAAG,UAAU,CAAC,IAAI,CAAC;AAC7B,QAAA,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,EAAE,mBAAmB,GAAG,GAAG,IAAI;AACrI,QAAA,MAAM,SAAS,GAAG,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,GAAG,OAAO,GAAG,IAAI;AACpE,QAAA,MAAM,OAAO,GAAG,IAAI,KAAK,SAAS,GAAG,QAAQ,GAAG,GAAG;AACnD,QAAA,MAAM,KAAK,GAAG,OAAO,KAAK;cACpB,EAAE,IAAI;AACR,cAAE;gBACE,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,IAAI;gBACJ,GAAG;gBACH,MAAM;aACT;AACL,QAAA,IAAI,IAAI,GAAG,IAAI,CAAC,IAAI;AACpB,QAAA,IAAI,IAAI,KAAK,SAAS,EAAE;AACpB,YAAA,IAAI,GAAG,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,YAAY,GAAG,OAAO,GAAG,OAAO;;AAElE;;;;;;AAMG;QACH;AACI,YAAA,IAAI,KAAK,QAAQ,IAAI,IAAI,CAAC,kBAAkB,EAAE;;AAElD,QAAA,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,eAAe,EAAE,QAAQ,GAAG,MAAM,GAAG,IAAI,EAAE,KAAK,EAAE,kBAAkB,CAAC,KAAK,EAAE;gBAClK,CAAC,IAAI,GAAG,IAAI;gBACZ,CAAC,UAAU,GAAG,IAAI;gBAClB,CAAC,CAAA,EAAG,UAAU,CAAI,CAAA,EAAA,MAAM,EAAE,GAAG,MAAM,KAAK,SAAS;gBACjD,CAAC,CAAA,EAAG,UAAU,CAAI,CAAA,EAAA,SAAS,EAAE,GAAG,SAAS,KAAK,SAAS;gBACvD,CAAC,CAAA,EAAG,UAAU,CAAI,CAAA,EAAA,KAAK,EAAE,GAAG,KAAK,KAAK,SAAS;AAC/C,gBAAA,CAAC,GAAG,UAAU,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,GAAG,IAAI;AAC/B,gBAAA,CAAC,CAAG,EAAA,UAAU,CAAS,OAAA,CAAA,GAAG,MAAM;gBAChC,YAAY,EAAE,WAAW,CAAC,aAAa,EAAE,IAAI,CAAC,EAAE,CAAC;gBACjD,kBAAkB,EAAE,WAAW,CAAC,oBAAoB,EAAE,IAAI,CAAC,EAAE,CAAC;gBAC9D,YAAY,EAAE,WAAW,CAAC,aAAa,EAAE,IAAI,CAAC,EAAE,CAAC;AACjD,gBAAA,sBAAsB,EAAE,WAAW;AACnC,gBAAA,iBAAiB,EAAE,QAAQ;AAC3B,gBAAA,iBAAiB,EAAE,IAAI;AACvB,gBAAA,eAAe,EAAE,IAAI;AACxB,aAAA,CAAC,EAAE,EAAE,CAAC,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,GAAG,EAAE,0CAA0C,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,eAAe,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,mBAAmB,CAAC,EAAE,CAAC,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,KAAK,EAAE,cAAc,EAAE,EAAE,CAAC,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,IAAI,EAAE,WAAW,EAAE,YAAY,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC,EAAE,CAAC,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,CAAC,EAAE,CAAC,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,EAAE,IAAI,KAAK,IAAI,IAAI,CAAC,CAAC,mBAAmB,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,IAAI,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["node_modules/@ionic/core/dist/collection/components/button/button.ios.css?tag=ion-button&mode=ios&encapsulation=shadow","node_modules/@ionic/core/dist/collection/components/button/button.md.css?tag=ion-button&mode=md&encapsulation=shadow","node_modules/@ionic/core/dist/collection/components/button/button.js"],"sourcesContent":["/**\n * Convert a font size to a dynamic font size.\n * Fonts that participate in Dynamic Type should use\n * dynamic font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param unit (optional) - The unit to convert to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a maximum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a minimum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * maximum and minimum font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * A heuristic that applies CSS to tablet\n * viewports.\n *\n * Usage:\n * @include tablet-viewport() {\n *   :host {\n *     background-color: green;\n *   }\n * }\n */\n/**\n * A heuristic that applies CSS to mobile\n * viewports (i.e. phones, not tablets).\n *\n * Usage:\n * @include mobile-viewport() {\n *   :host {\n *     background-color: blue;\n *   }\n * }\n */\n:host {\n  /**\n   * @prop --background: Background of the button\n   * @prop --background-activated: Background of the button when pressed. Note: setting this will interfere with the Material Design ripple.\n   * @prop --background-activated-opacity: Opacity of the button when pressed\n   * @prop --background-focused: Background of the button when focused with the tab key\n   * @prop --background-focused-opacity: Opacity of the button when focused with the tab key\n   * @prop --background-hover: Background of the button on hover\n   * @prop --background-hover-opacity: Opacity of the background on hover\n   *\n   * @prop --color: Text color of the button\n   * @prop --color-activated: Text color of the button when pressed\n   * @prop --color-focused: Text color of the button when focused with the tab key\n   * @prop --color-hover: Text color of the button when hover\n   *\n   * @prop --transition: Transition of the button\n   *\n   * @prop --border-radius: Border radius of the button\n   * @prop --border-width: Border width of the button\n   * @prop --border-style: Border style of the button\n   * @prop --border-color: Border color of the button\n   *\n   * @prop --ripple-color: Color of the button ripple effect\n   *\n   * @prop --box-shadow: Box shadow of the button\n   * @prop --opacity: Opacity of the button\n   *\n   * @prop --padding-top: Top padding of the button\n   * @prop --padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button\n   * @prop --padding-bottom: Bottom padding of the button\n   * @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button\n   */\n  --overflow: hidden;\n  --ripple-color: currentColor;\n  --border-width: initial;\n  --border-color: initial;\n  --border-style: initial;\n  --color-activated: var(--color);\n  --color-focused: var(--color);\n  --color-hover: var(--color);\n  --box-shadow: none;\n  display: inline-block;\n  width: auto;\n  color: var(--color);\n  font-family: var(--ion-font-family, inherit);\n  text-align: center;\n  text-decoration: none;\n  white-space: normal;\n  user-select: none;\n  vertical-align: top;\n  vertical-align: -webkit-baseline-middle;\n  font-kerning: none;\n}\n\n:host(.button-disabled) {\n  cursor: default;\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n:host(.button-solid) {\n  --background: var(--ion-color-primary, #0054e9);\n  --color: var(--ion-color-primary-contrast, #fff);\n}\n\n:host(.button-outline) {\n  --border-color: var(--ion-color-primary, #0054e9);\n  --background: transparent;\n  --color: var(--ion-color-primary, #0054e9);\n}\n\n:host(.button-clear) {\n  --border-width: 0;\n  --background: transparent;\n  --color: var(--ion-color-primary, #0054e9);\n}\n\n:host(.button-block) {\n  display: block;\n}\n\n:host(.button-block) .button-native {\n  margin-left: 0;\n  margin-right: 0;\n  width: 100%;\n  clear: both;\n  contain: content;\n}\n\n:host(.button-block) .button-native::after {\n  clear: both;\n}\n\n:host(.button-full) {\n  display: block;\n}\n\n:host(.button-full) .button-native {\n  margin-left: 0;\n  margin-right: 0;\n  width: 100%;\n  contain: content;\n}\n\n:host(.button-full:not(.button-round)) .button-native {\n  border-radius: 0;\n  border-right-width: 0;\n  border-left-width: 0;\n}\n\n.button-native {\n  border-radius: var(--border-radius);\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  margin-left: 0;\n  margin-right: 0;\n  margin-top: 0;\n  margin-bottom: 0;\n  -webkit-padding-start: var(--padding-start);\n  padding-inline-start: var(--padding-start);\n  -webkit-padding-end: var(--padding-end);\n  padding-inline-end: var(--padding-end);\n  padding-top: var(--padding-top);\n  padding-bottom: var(--padding-bottom);\n  font-family: inherit;\n  font-size: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-indent: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n  display: flex;\n  position: relative;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  min-height: inherit;\n  transition: var(--transition);\n  border-width: var(--border-width);\n  border-style: var(--border-style);\n  border-color: var(--border-color);\n  outline: none;\n  background: var(--background);\n  line-height: 1;\n  box-shadow: var(--box-shadow);\n  contain: layout style;\n  cursor: pointer;\n  opacity: var(--opacity);\n  overflow: var(--overflow);\n  z-index: 0;\n  box-sizing: border-box;\n  appearance: none;\n}\n\n.button-native::-moz-focus-inner {\n  border: 0;\n}\n\n.button-inner {\n  display: flex;\n  position: relative;\n  flex-flow: row nowrap;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  z-index: 1;\n}\n\n::slotted([slot=start]),\n::slotted([slot=end]) {\n  flex-shrink: 0;\n}\n\n::slotted(ion-icon) {\n  font-size: 1.35em;\n  pointer-events: none;\n}\n\n::slotted(ion-icon[slot=start]) {\n  -webkit-margin-start: -0.3em;\n  margin-inline-start: -0.3em;\n  -webkit-margin-end: 0.3em;\n  margin-inline-end: 0.3em;\n  margin-top: 0;\n  margin-bottom: 0;\n}\n\n::slotted(ion-icon[slot=end]) {\n  -webkit-margin-start: 0.3em;\n  margin-inline-start: 0.3em;\n  -webkit-margin-end: -0.2em;\n  margin-inline-end: -0.2em;\n  margin-top: 0;\n  margin-bottom: 0;\n}\n\nion-ripple-effect {\n  color: var(--ripple-color);\n}\n\n.button-native::after {\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  position: absolute;\n  content: \"\";\n  opacity: 0;\n}\n\n:host(.ion-focused) {\n  color: var(--color-focused);\n}\n\n:host(.ion-focused) .button-native::after {\n  background: var(--background-focused);\n  opacity: var(--background-focused-opacity);\n}\n\n@media (any-hover: hover) {\n  :host(:hover) {\n    color: var(--color-hover);\n  }\n  :host(:hover) .button-native::after {\n    background: var(--background-hover);\n    opacity: var(--background-hover-opacity);\n  }\n}\n:host(.ion-activated) {\n  color: var(--color-activated);\n}\n\n:host(.ion-activated) .button-native::after {\n  background: var(--background-activated);\n  opacity: var(--background-activated-opacity);\n}\n\n:host(.button-solid.ion-color) .button-native {\n  background: var(--ion-color-base);\n  color: var(--ion-color-contrast);\n}\n\n:host(.button-outline.ion-color) .button-native {\n  border-color: var(--ion-color-base);\n  background: transparent;\n  color: var(--ion-color-base);\n}\n\n:host(.button-clear.ion-color) .button-native {\n  background: transparent;\n  color: var(--ion-color-base);\n}\n\n:host(.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {\n  color: var(--ion-toolbar-color, var(--color));\n}\n\n:host(.button-outline.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {\n  border-color: var(--ion-toolbar-color, var(--color, var(--border-color)));\n}\n\n:host(.button-solid.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {\n  background: var(--ion-toolbar-color, var(--background));\n  color: var(--ion-toolbar-background, var(--color));\n}\n\n/**\n * Convert a font size to a dynamic font size.\n * Fonts that participate in Dynamic Type should use\n * dynamic font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param unit (optional) - The unit to convert to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a maximum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a minimum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * maximum and minimum font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * A heuristic that applies CSS to tablet\n * viewports.\n *\n * Usage:\n * @include tablet-viewport() {\n *   :host {\n *     background-color: green;\n *   }\n * }\n */\n/**\n * A heuristic that applies CSS to mobile\n * viewports (i.e. phones, not tablets).\n *\n * Usage:\n * @include mobile-viewport() {\n *   :host {\n *     background-color: blue;\n *   }\n * }\n */\n/**\n * Convert a font size to a dynamic font size.\n * Fonts that participate in Dynamic Type should use\n * dynamic font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param unit (optional) - The unit to convert to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a maximum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a minimum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * maximum and minimum font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * A heuristic that applies CSS to tablet\n * viewports.\n *\n * Usage:\n * @include tablet-viewport() {\n *   :host {\n *     background-color: green;\n *   }\n * }\n */\n/**\n * A heuristic that applies CSS to mobile\n * viewports (i.e. phones, not tablets).\n *\n * Usage:\n * @include mobile-viewport() {\n *   :host {\n *     background-color: blue;\n *   }\n * }\n */\n:host {\n  --border-radius: 14px;\n  --padding-top: 13px;\n  --padding-bottom: 13px;\n  --padding-start: 1em;\n  --padding-end: 1em;\n  --transition: background-color, opacity 100ms linear;\n  -webkit-margin-start: 2px;\n  margin-inline-start: 2px;\n  -webkit-margin-end: 2px;\n  margin-inline-end: 2px;\n  margin-top: 4px;\n  margin-bottom: 4px;\n  min-height: 3.1em;\n  font-size: min(1rem, 48px);\n  font-weight: 500;\n  letter-spacing: 0;\n}\n\n:host(.button-solid) {\n  --background-activated: var(--ion-color-primary-shade, #004acd);\n  --background-focused: var(--ion-color-primary-shade, #004acd);\n  --background-hover: var(--ion-color-primary-tint, #1a65eb);\n  --background-activated-opacity: 1;\n  --background-focused-opacity: 1;\n  --background-hover-opacity: 1;\n}\n\n:host(.button-outline) {\n  --border-radius: 14px;\n  --border-width: 1px;\n  --border-style: solid;\n  --background-activated: var(--ion-color-primary, #0054e9);\n  --background-focused: var(--ion-color-primary, #0054e9);\n  --background-hover: transparent;\n  --background-focused-opacity: .1;\n  --color-activated: var(--ion-color-primary-contrast, #fff);\n}\n\n:host(.button-clear) {\n  --background-activated: transparent;\n  --background-activated-opacity: 0;\n  --background-focused: var(--ion-color-primary, #0054e9);\n  --background-hover: transparent;\n  --background-focused-opacity: .1;\n  font-size: min(1.0625rem, 51px);\n  font-weight: normal;\n}\n\n/**\n * The default buttons in a toolbar\n * have a different font size/weight\n * than buttons outside of a toolbar on iOS.\n * However, we still want the \"size\"/\"strong\"\n * properties to be usable in a toolbar, so we add\n * the .in-buttons selector such that we\n * can add the different font size/weight in a toolbar\n * but still let \"size\"/\"strong\" override it.\n */\n:host(.in-buttons) {\n  font-size: clamp(17px, 1.0625rem, 21.08px);\n  font-weight: 400;\n}\n\n:host(.button-large) {\n  --border-radius: 16px;\n  --padding-top: 17px;\n  --padding-start: 1em;\n  --padding-end: 1em;\n  --padding-bottom: 17px;\n  min-height: 3.1em;\n  font-size: min(1.25rem, 60px);\n}\n\n:host(.button-small) {\n  --border-radius: 6px;\n  --padding-top: 4px;\n  --padding-start: 0.9em;\n  --padding-end: 0.9em;\n  --padding-bottom: 4px;\n  min-height: 2.1em;\n  font-size: min(0.8125rem, 39px);\n}\n\n:host(.button-round) {\n  --border-radius: 999px;\n  --padding-top: 0;\n  --padding-start: 26px;\n  --padding-end: 26px;\n  --padding-bottom: 0;\n}\n\n:host(.button-strong) {\n  font-weight: 600;\n}\n\n:host(.button-has-icon-only) {\n  --padding-top: 0;\n  --padding-bottom: var(--padding-top);\n  --padding-end: var(--padding-top);\n  --padding-start: var(--padding-end);\n  min-width: clamp(30px, 2.125em, 60px);\n  min-height: clamp(30px, 2.125em, 60px);\n}\n\n::slotted(ion-icon[slot=icon-only]) {\n  /**\n    * The values were provided through a native iOS app.\n    * min font size: 15px, default font size: 18px, max font size: 43px\n    *\n    * Since the `ion-button` uses `rem` for the font size, we can't\n    * just pass the desired icon font size in `em` to the `\n    * dynamic-font-clamp`. Instead, we need to adjust the base size \n    * to account for the ion-button` font size.\n    *\n    * For example, if the default font size of `ion-button` is 16px\n    * (derived from rem), then the base size can use the default font\n    * size of the icon.\n    */\n  font-size: clamp(15.12px, 1.125em, 43.02px);\n}\n\n:host(.button-small.button-has-icon-only) {\n  min-width: clamp(23px, 2.16em, 54px);\n  min-height: clamp(23px, 2.16em, 54px);\n}\n\n:host(.button-small) ::slotted(ion-icon[slot=icon-only]) {\n  /**\n    * The values were provided through a native iOS app.\n    * min font size: 12px, default font size: 17px, max font size: 40px\n    *\n    * Since the `ion-button` uses `rem` for the font size, we can't\n    * just pass the desired icon font size in `em` to the `\n    * dynamic-font-clamp`. Instead, we need to adjust the base size \n    * to account for the ion-button` font size.\n    *\n    * For example, if the default font size of `ion-button` is 13px\n    * (derived from rem) and the default font size of the icon is\n    * 17px, then the base size would need to be increased.\n    */\n  font-size: clamp(12.1394px, 1.308125em, 40.1856px);\n}\n\n:host(.button-large.button-has-icon-only) {\n  min-width: clamp(46px, 2.5em, 78px);\n  min-height: clamp(46px, 2.5em, 78px);\n}\n\n:host(.button-large) ::slotted(ion-icon[slot=icon-only]) {\n  /**\n    * The values were provided through a native iOS app.\n    * min font size: 15px, default font size: 18px, max font size: 43px\n    *\n    * Since the `ion-button` uses `rem` for the font size, we can't\n    * just pass the desired icon font size in `em` to the `\n    * dynamic-font-clamp`. Instead, we need to adjust the base size \n    * to account for the ion-button` font size.\n    *\n    * For example, if the default font size of `ion-button` is 20px\n    * (derived from rem) and the default font size of the icon is\n    * 18px, then the base size would need to be decreased.\n    */\n  font-size: clamp(15.12px, 0.9em, 43.056px);\n}\n\n:host(.button-outline.ion-focused.ion-color) .button-native,\n:host(.button-clear.ion-focused.ion-color) .button-native {\n  color: var(--ion-color-base);\n}\n:host(.button-outline.ion-focused.ion-color) .button-native::after,\n:host(.button-clear.ion-focused.ion-color) .button-native::after {\n  background: var(--ion-color-base);\n}\n\n:host(.button-solid.ion-color.ion-focused) .button-native::after {\n  background: var(--ion-color-shade);\n}\n\n@media (any-hover: hover) {\n  :host(.button-clear:not(.ion-activated):hover),\n  :host(.button-outline:not(.ion-activated):hover) {\n    opacity: 0.6;\n  }\n  :host(.button-clear.ion-color:hover) .button-native,\n  :host(.button-outline.ion-color:hover) .button-native {\n    color: var(--ion-color-base);\n  }\n  :host(.button-clear.ion-color:hover) .button-native::after,\n  :host(.button-outline.ion-color:hover) .button-native::after {\n    background: transparent;\n  }\n  :host(.button-solid.ion-color:hover) .button-native::after {\n    background: var(--ion-color-tint);\n  }\n  :host(:hover.button-solid.in-toolbar:not(.ion-color):not(.in-toolbar-color):not(.ion-activated)) .button-native::after {\n    background: #fff;\n    opacity: 0.1;\n  }\n}\n:host(.button-clear.ion-activated) {\n  opacity: 0.4;\n}\n\n:host(.button-outline.ion-activated.ion-color) .button-native {\n  color: var(--ion-color-contrast);\n}\n:host(.button-outline.ion-activated.ion-color) .button-native::after {\n  background: var(--ion-color-base);\n}\n\n:host(.button-solid.ion-color.ion-activated) .button-native::after {\n  background: var(--ion-color-shade);\n}\n\n:host(.button-outline.ion-activated.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {\n  background: var(--ion-toolbar-color, var(--color));\n  color: var(--ion-toolbar-background, var(--background), var(--ion-color-primary-contrast, #fff));\n}","/**\n * Convert a font size to a dynamic font size.\n * Fonts that participate in Dynamic Type should use\n * dynamic font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param unit (optional) - The unit to convert to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a maximum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a minimum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * maximum and minimum font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * A heuristic that applies CSS to tablet\n * viewports.\n *\n * Usage:\n * @include tablet-viewport() {\n *   :host {\n *     background-color: green;\n *   }\n * }\n */\n/**\n * A heuristic that applies CSS to mobile\n * viewports (i.e. phones, not tablets).\n *\n * Usage:\n * @include mobile-viewport() {\n *   :host {\n *     background-color: blue;\n *   }\n * }\n */\n:host {\n  /**\n   * @prop --background: Background of the button\n   * @prop --background-activated: Background of the button when pressed. Note: setting this will interfere with the Material Design ripple.\n   * @prop --background-activated-opacity: Opacity of the button when pressed\n   * @prop --background-focused: Background of the button when focused with the tab key\n   * @prop --background-focused-opacity: Opacity of the button when focused with the tab key\n   * @prop --background-hover: Background of the button on hover\n   * @prop --background-hover-opacity: Opacity of the background on hover\n   *\n   * @prop --color: Text color of the button\n   * @prop --color-activated: Text color of the button when pressed\n   * @prop --color-focused: Text color of the button when focused with the tab key\n   * @prop --color-hover: Text color of the button when hover\n   *\n   * @prop --transition: Transition of the button\n   *\n   * @prop --border-radius: Border radius of the button\n   * @prop --border-width: Border width of the button\n   * @prop --border-style: Border style of the button\n   * @prop --border-color: Border color of the button\n   *\n   * @prop --ripple-color: Color of the button ripple effect\n   *\n   * @prop --box-shadow: Box shadow of the button\n   * @prop --opacity: Opacity of the button\n   *\n   * @prop --padding-top: Top padding of the button\n   * @prop --padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button\n   * @prop --padding-bottom: Bottom padding of the button\n   * @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button\n   */\n  --overflow: hidden;\n  --ripple-color: currentColor;\n  --border-width: initial;\n  --border-color: initial;\n  --border-style: initial;\n  --color-activated: var(--color);\n  --color-focused: var(--color);\n  --color-hover: var(--color);\n  --box-shadow: none;\n  display: inline-block;\n  width: auto;\n  color: var(--color);\n  font-family: var(--ion-font-family, inherit);\n  text-align: center;\n  text-decoration: none;\n  white-space: normal;\n  user-select: none;\n  vertical-align: top;\n  vertical-align: -webkit-baseline-middle;\n  font-kerning: none;\n}\n\n:host(.button-disabled) {\n  cursor: default;\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n:host(.button-solid) {\n  --background: var(--ion-color-primary, #0054e9);\n  --color: var(--ion-color-primary-contrast, #fff);\n}\n\n:host(.button-outline) {\n  --border-color: var(--ion-color-primary, #0054e9);\n  --background: transparent;\n  --color: var(--ion-color-primary, #0054e9);\n}\n\n:host(.button-clear) {\n  --border-width: 0;\n  --background: transparent;\n  --color: var(--ion-color-primary, #0054e9);\n}\n\n:host(.button-block) {\n  display: block;\n}\n\n:host(.button-block) .button-native {\n  margin-left: 0;\n  margin-right: 0;\n  width: 100%;\n  clear: both;\n  contain: content;\n}\n\n:host(.button-block) .button-native::after {\n  clear: both;\n}\n\n:host(.button-full) {\n  display: block;\n}\n\n:host(.button-full) .button-native {\n  margin-left: 0;\n  margin-right: 0;\n  width: 100%;\n  contain: content;\n}\n\n:host(.button-full:not(.button-round)) .button-native {\n  border-radius: 0;\n  border-right-width: 0;\n  border-left-width: 0;\n}\n\n.button-native {\n  border-radius: var(--border-radius);\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  margin-left: 0;\n  margin-right: 0;\n  margin-top: 0;\n  margin-bottom: 0;\n  -webkit-padding-start: var(--padding-start);\n  padding-inline-start: var(--padding-start);\n  -webkit-padding-end: var(--padding-end);\n  padding-inline-end: var(--padding-end);\n  padding-top: var(--padding-top);\n  padding-bottom: var(--padding-bottom);\n  font-family: inherit;\n  font-size: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-indent: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n  display: flex;\n  position: relative;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  min-height: inherit;\n  transition: var(--transition);\n  border-width: var(--border-width);\n  border-style: var(--border-style);\n  border-color: var(--border-color);\n  outline: none;\n  background: var(--background);\n  line-height: 1;\n  box-shadow: var(--box-shadow);\n  contain: layout style;\n  cursor: pointer;\n  opacity: var(--opacity);\n  overflow: var(--overflow);\n  z-index: 0;\n  box-sizing: border-box;\n  appearance: none;\n}\n\n.button-native::-moz-focus-inner {\n  border: 0;\n}\n\n.button-inner {\n  display: flex;\n  position: relative;\n  flex-flow: row nowrap;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  z-index: 1;\n}\n\n::slotted([slot=start]),\n::slotted([slot=end]) {\n  flex-shrink: 0;\n}\n\n::slotted(ion-icon) {\n  font-size: 1.35em;\n  pointer-events: none;\n}\n\n::slotted(ion-icon[slot=start]) {\n  -webkit-margin-start: -0.3em;\n  margin-inline-start: -0.3em;\n  -webkit-margin-end: 0.3em;\n  margin-inline-end: 0.3em;\n  margin-top: 0;\n  margin-bottom: 0;\n}\n\n::slotted(ion-icon[slot=end]) {\n  -webkit-margin-start: 0.3em;\n  margin-inline-start: 0.3em;\n  -webkit-margin-end: -0.2em;\n  margin-inline-end: -0.2em;\n  margin-top: 0;\n  margin-bottom: 0;\n}\n\nion-ripple-effect {\n  color: var(--ripple-color);\n}\n\n.button-native::after {\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  position: absolute;\n  content: \"\";\n  opacity: 0;\n}\n\n:host(.ion-focused) {\n  color: var(--color-focused);\n}\n\n:host(.ion-focused) .button-native::after {\n  background: var(--background-focused);\n  opacity: var(--background-focused-opacity);\n}\n\n@media (any-hover: hover) {\n  :host(:hover) {\n    color: var(--color-hover);\n  }\n  :host(:hover) .button-native::after {\n    background: var(--background-hover);\n    opacity: var(--background-hover-opacity);\n  }\n}\n:host(.ion-activated) {\n  color: var(--color-activated);\n}\n\n:host(.ion-activated) .button-native::after {\n  background: var(--background-activated);\n  opacity: var(--background-activated-opacity);\n}\n\n:host(.button-solid.ion-color) .button-native {\n  background: var(--ion-color-base);\n  color: var(--ion-color-contrast);\n}\n\n:host(.button-outline.ion-color) .button-native {\n  border-color: var(--ion-color-base);\n  background: transparent;\n  color: var(--ion-color-base);\n}\n\n:host(.button-clear.ion-color) .button-native {\n  background: transparent;\n  color: var(--ion-color-base);\n}\n\n:host(.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {\n  color: var(--ion-toolbar-color, var(--color));\n}\n\n:host(.button-outline.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {\n  border-color: var(--ion-toolbar-color, var(--color, var(--border-color)));\n}\n\n:host(.button-solid.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {\n  background: var(--ion-toolbar-color, var(--background));\n  color: var(--ion-toolbar-background, var(--color));\n}\n\n/**\n * Convert a font size to a dynamic font size.\n * Fonts that participate in Dynamic Type should use\n * dynamic font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param unit (optional) - The unit to convert to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a maximum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a minimum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * maximum and minimum font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * A heuristic that applies CSS to tablet\n * viewports.\n *\n * Usage:\n * @include tablet-viewport() {\n *   :host {\n *     background-color: green;\n *   }\n * }\n */\n/**\n * A heuristic that applies CSS to mobile\n * viewports (i.e. phones, not tablets).\n *\n * Usage:\n * @include mobile-viewport() {\n *   :host {\n *     background-color: blue;\n *   }\n * }\n */\n:host {\n  --border-radius: 4px;\n  --padding-top: 8px;\n  --padding-bottom: 8px;\n  --padding-start: 1.1em;\n  --padding-end: 1.1em;\n  --transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1),\n                background-color 15ms linear,\n                color 15ms linear;\n  -webkit-margin-start: 2px;\n  margin-inline-start: 2px;\n  -webkit-margin-end: 2px;\n  margin-inline-end: 2px;\n  margin-top: 4px;\n  margin-bottom: 4px;\n  min-height: 36px;\n  font-size: 0.875rem;\n  font-weight: 500;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n}\n\n:host(.button-solid) {\n  --background-activated: transparent;\n  --background-hover: var(--ion-color-primary-contrast, #fff);\n  --background-focused: var(--ion-color-primary-contrast, #fff);\n  --background-activated-opacity: 0;\n  --background-focused-opacity: .24;\n  --background-hover-opacity: .08;\n  --box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);\n}\n\n:host(.button-solid.ion-activated) {\n  --box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);\n}\n\n:host(.button-outline) {\n  --border-width: 2px;\n  --border-style: solid;\n  --box-shadow: none;\n  --background-activated: transparent;\n  --background-focused: var(--ion-color-primary, #0054e9);\n  --background-hover: var(--ion-color-primary, #0054e9);\n  --background-activated-opacity: 0;\n  --background-focused-opacity: .12;\n  --background-hover-opacity: .04;\n}\n\n:host(.button-outline.ion-activated.ion-color) .button-native {\n  background: transparent;\n}\n\n:host(.button-clear) {\n  --background-activated: transparent;\n  --background-focused: var(--ion-color-primary, #0054e9);\n  --background-hover: var(--ion-color-primary, #0054e9);\n  --background-activated-opacity: 0;\n  --background-focused-opacity: .12;\n  --background-hover-opacity: .04;\n}\n\n:host(.button-round) {\n  --border-radius: 999px;\n  --padding-top: 0;\n  --padding-start: 26px;\n  --padding-end: 26px;\n  --padding-bottom: 0;\n}\n\n:host(.button-large) {\n  --padding-top: 14px;\n  --padding-start: 1em;\n  --padding-end: 1em;\n  --padding-bottom: 14px;\n  min-height: 2.8em;\n  font-size: 1.25rem;\n}\n\n:host(.button-small) {\n  --padding-top: 4px;\n  --padding-start: 0.9em;\n  --padding-end: 0.9em;\n  --padding-bottom: 4px;\n  min-height: 2.1em;\n  font-size: 0.8125rem;\n}\n\n:host(.button-strong) {\n  font-weight: bold;\n}\n\n:host(.button-has-icon-only) {\n  --padding-top: 0;\n  --padding-bottom: var(--padding-top);\n  --padding-end: var(--padding-top);\n  --padding-start: var(--padding-end);\n  min-width: clamp(30px, 2.86em, 60px);\n  min-height: clamp(30px, 2.86em, 60px);\n}\n\n::slotted(ion-icon[slot=icon-only]) {\n  /**\n    * The values were provided through MD design,\n    * large and small are based on the iOS sizes.\n    * min font size: 15px, default font size: 22.4px, max font size: 43px\n    *\n    * Since the `ion-button` uses `rem` for the font size, we can't\n    * just pass the desired icon font size in `em` to the `\n    * dynamic-font-clamp`. Instead, we need to adjust the base size \n    * to account for the ion-button` font size.\n    *\n    * For example, if the default font size of `ion-button` is 14px\n    * (derived from rem) and the default font size of the icon is\n    * 22.4px, then the base size would need to be increased.\n    */\n  font-size: clamp(15.104px, 1.6em, 43.008px);\n}\n\n:host(.button-small.button-has-icon-only) {\n  min-width: clamp(23px, 2.16em, 54px);\n  min-height: clamp(23px, 2.16em, 54px);\n}\n\n:host(.button-small) ::slotted(ion-icon[slot=icon-only]) {\n  /**\n    * The values were provided through MD design,\n    * large and small are based on the iOS sizes.\n    * min font size: 12px, default font size: 16px, max font size: 40px\n    *\n    * Since the `ion-button` uses `rem` for the font size, we can't\n    * just pass the desired icon font size in `em` to the `\n    * dynamic-font-clamp`. Instead, we need to adjust the base size \n    * to account for the ion-button` font size.\n    *\n    * For example, if the default font size of `ion-button` is 13px\n    * (derived from rem) and the default font size of the icon is\n    * 16px, then the base size would need to be increased.\n    */\n  font-size: clamp(13.002px, 1.23125em, 40.385px);\n}\n\n:host(.button-large.button-has-icon-only) {\n  min-width: clamp(46px, 2.5em, 78px);\n  min-height: clamp(46px, 2.5em, 78px);\n}\n\n:host(.button-large) ::slotted(ion-icon[slot=icon-only]) {\n  /**\n    * The values were provided through MD design,\n    * large and small are based on the iOS sizes.\n    * min font size: 15px, default font size: 28px, max font size: 43px\n    *\n    * Since the `ion-button` uses `rem` for the font size, we can't\n    * just pass the desired icon font size in `em` to the `\n    * dynamic-font-clamp`. Instead, we need to adjust the base size \n    * to account for the ion-button` font size.\n    *\n    * For example, if the default font size of `ion-button` is 20px\n    * (derived from rem) and the default font size of the icon is\n    * 28px, then the base size would need to be increased.\n    */\n  font-size: clamp(15.008px, 1.4em, 43.008px);\n}\n\n/**\n * Only allow overriding of opacity here\n * as developers should not be overriding\n * colors when using the color prop.\n */\n:host(.button-solid.ion-color.ion-focused) .button-native::after {\n  background: var(--ion-color-contrast);\n}\n\n:host(.button-clear.ion-color.ion-focused) .button-native::after,\n:host(.button-outline.ion-color.ion-focused) .button-native::after {\n  background: var(--ion-color-base);\n}\n\n@media (any-hover: hover) {\n  :host(.button-solid.ion-color:hover) .button-native::after {\n    background: var(--ion-color-contrast);\n  }\n  :host(.button-clear.ion-color:hover) .button-native::after,\n  :host(.button-outline.ion-color:hover) .button-native::after {\n    background: var(--ion-color-base);\n  }\n}\n:host(.button-outline.ion-activated.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {\n  background: var(--ion-toolbar-background, var(--color));\n  color: var(--ion-toolbar-color, var(--background), var(--ion-color-primary-contrast, #fff));\n}","/*!\n * (C) Ionic http://ionicframework.com - MIT License\n */\nimport { Host, forceUpdate, h } from \"@stencil/core\";\nimport { inheritAriaAttributes, hasShadowDom } from \"../../utils/helpers\";\nimport { printIonWarning } from \"../../utils/logging/index\";\nimport { createColorClasses, hostContext, openURL } from \"../../utils/theme\";\nimport { getIonMode } from \"../../global/ionic-global\";\n/**\n * @virtualProp {\"ios\" | \"md\"} mode - The mode determines which platform styles to use.\n *\n * @slot - Content is placed between the named slots if provided without a slot.\n * @slot icon-only - Should be used on an icon in a button that has no text.\n * @slot start - Content is placed to the left of the button text in LTR, and to the right in RTL.\n * @slot end - Content is placed to the right of the button text in LTR, and to the left in RTL.\n *\n * @part native - The native HTML button or anchor element that wraps all child elements.\n */\nexport class Button {\n    constructor() {\n        this.inItem = false;\n        this.inListHeader = false;\n        this.inToolbar = false;\n        this.formButtonEl = null;\n        this.formEl = null;\n        this.inheritedAttributes = {};\n        /**\n         * If `true`, the button only has an icon.\n         */\n        this.isCircle = false;\n        /**\n         * The type of button.\n         */\n        this.buttonType = 'button';\n        /**\n         * If `true`, the user cannot interact with the button.\n         */\n        this.disabled = false;\n        /**\n         * When using a router, it specifies the transition direction when navigating to\n         * another page using `href`.\n         */\n        this.routerDirection = 'forward';\n        /**\n         * If `true`, activates a button with a heavier font weight.\n         */\n        this.strong = false;\n        /**\n         * The type of the button.\n         */\n        this.type = 'button';\n        this.handleClick = (ev) => {\n            const { el } = this;\n            if (this.type === 'button') {\n                openURL(this.href, ev, this.routerDirection, this.routerAnimation);\n            }\n            else if (hasShadowDom(el)) {\n                this.submitForm(ev);\n            }\n        };\n        this.onFocus = () => {\n            this.ionFocus.emit();\n        };\n        this.onBlur = () => {\n            this.ionBlur.emit();\n        };\n        this.slotChanged = () => {\n            /**\n             * Ensures that the 'has-icon-only' class is properly added\n             * or removed from `ion-button` when manipulating the\n             * `icon-only` slot.\n             *\n             * Without this, the 'has-icon-only' class is only checked\n             * or added when `ion-button` component first renders.\n             */\n            this.isCircle = this.hasIconOnly;\n        };\n    }\n    disabledChanged() {\n        const { disabled } = this;\n        if (this.formButtonEl) {\n            this.formButtonEl.disabled = disabled;\n        }\n    }\n    /**\n     * This component is used within the `ion-input-password-toggle` component\n     * to toggle the visibility of the password input.\n     * These attributes need to update based on the state of the password input.\n     * Otherwise, the values will be stale.\n     *\n     * @param newValue\n     * @param _oldValue\n     * @param propName\n     */\n    onAriaChanged(newValue, _oldValue, propName) {\n        this.inheritedAttributes = Object.assign(Object.assign({}, this.inheritedAttributes), { [propName]: newValue });\n        forceUpdate(this);\n    }\n    /**\n     * This is responsible for rendering a hidden native\n     * button element inside the associated form. This allows\n     * users to submit a form by pressing \"Enter\" when a text\n     * field inside of the form is focused. The native button\n     * rendered inside of `ion-button` is in the Shadow DOM\n     * and therefore does not participate in form submission\n     * which is why the following code is necessary.\n     */\n    renderHiddenButton() {\n        const formEl = (this.formEl = this.findForm());\n        if (formEl) {\n            const { formButtonEl } = this;\n            /**\n             * If the form already has a rendered form button\n             * then do not append a new one again.\n             */\n            if (formButtonEl !== null && formEl.contains(formButtonEl)) {\n                return;\n            }\n            // Create a hidden native button inside of the form\n            const newFormButtonEl = (this.formButtonEl = document.createElement('button'));\n            newFormButtonEl.type = this.type;\n            newFormButtonEl.style.display = 'none';\n            // Only submit if the button is not disabled.\n            newFormButtonEl.disabled = this.disabled;\n            formEl.appendChild(newFormButtonEl);\n        }\n    }\n    componentWillLoad() {\n        this.inToolbar = !!this.el.closest('ion-buttons');\n        this.inListHeader = !!this.el.closest('ion-list-header');\n        this.inItem = !!this.el.closest('ion-item') || !!this.el.closest('ion-item-divider');\n        this.inheritedAttributes = inheritAriaAttributes(this.el);\n    }\n    get hasIconOnly() {\n        return !!this.el.querySelector('[slot=\"icon-only\"]');\n    }\n    get rippleType() {\n        const hasClearFill = this.fill === undefined || this.fill === 'clear';\n        // If the button is in a toolbar, has a clear fill (which is the default)\n        // and only has an icon we use the unbounded \"circular\" ripple effect\n        if (hasClearFill && this.hasIconOnly && this.inToolbar) {\n            return 'unbounded';\n        }\n        return 'bounded';\n    }\n    /**\n     * Finds the form element based on the provided `form` selector\n     * or element reference provided.\n     */\n    findForm() {\n        const { form } = this;\n        if (form instanceof HTMLFormElement) {\n            return form;\n        }\n        if (typeof form === 'string') {\n            // Check if the string provided is a form id.\n            const el = document.getElementById(form);\n            if (el) {\n                if (el instanceof HTMLFormElement) {\n                    return el;\n                }\n                else {\n                    /**\n                     * The developer specified a string for the form attribute, but the\n                     * element with that id is not a form element.\n                     */\n                    printIonWarning(`[ion-button] - Form with selector: \"#${form}\" could not be found. Verify that the id is attached to a <form> element.`, this.el);\n                    return null;\n                }\n            }\n            else {\n                /**\n                 * The developer specified a string for the form attribute, but the\n                 * element with that id could not be found in the DOM.\n                 */\n                printIonWarning(`[ion-button] - Form with selector: \"#${form}\" could not be found. Verify that the id is correct and the form is rendered in the DOM.`, this.el);\n                return null;\n            }\n        }\n        if (form !== undefined) {\n            /**\n             * The developer specified a HTMLElement for the form attribute,\n             * but the element is not a HTMLFormElement.\n             * This will also catch if the developer tries to pass in null\n             * as the form attribute.\n             */\n            printIonWarning(`[ion-button] - The provided \"form\" element is invalid. Verify that the form is a HTMLFormElement and rendered in the DOM.`, this.el);\n            return null;\n        }\n        /**\n         * If the form element is not set, the button may be inside\n         * of a form element. Query the closest form element to the button.\n         */\n        return this.el.closest('form');\n    }\n    submitForm(ev) {\n        // this button wants to specifically submit a form\n        // climb up the dom to see if we're in a <form>\n        // and if so, then use JS to submit it\n        if (this.formEl && this.formButtonEl) {\n            ev.preventDefault();\n            this.formButtonEl.click();\n        }\n    }\n    render() {\n        const mode = getIonMode(this);\n        const { buttonType, type, disabled, rel, target, size, href, color, expand, hasIconOnly, shape, strong, inheritedAttributes, } = this;\n        const finalSize = size === undefined && this.inItem ? 'small' : size;\n        const TagType = href === undefined ? 'button' : 'a';\n        const attrs = TagType === 'button'\n            ? { type }\n            : {\n                download: this.download,\n                href,\n                rel,\n                target,\n            };\n        let fill = this.fill;\n        if (fill === undefined) {\n            fill = this.inToolbar || this.inListHeader ? 'clear' : 'solid';\n        }\n        /**\n         * We call renderHiddenButton in the render function to account\n         * for any properties being set async. For example, changing the\n         * \"type\" prop from \"button\" to \"submit\" after the component has\n         * loaded would warrant the hidden button being added to the\n         * associated form.\n         */\n        {\n            type !== 'button' && this.renderHiddenButton();\n        }\n        return (h(Host, { key: 'ed82ea53705523f9afc5f1a9addff44cc6424f27', onClick: this.handleClick, \"aria-disabled\": disabled ? 'true' : null, class: createColorClasses(color, {\n                [mode]: true,\n                [buttonType]: true,\n                [`${buttonType}-${expand}`]: expand !== undefined,\n                [`${buttonType}-${finalSize}`]: finalSize !== undefined,\n                [`${buttonType}-${shape}`]: shape !== undefined,\n                [`${buttonType}-${fill}`]: true,\n                [`${buttonType}-strong`]: strong,\n                'in-toolbar': hostContext('ion-toolbar', this.el),\n                'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),\n                'in-buttons': hostContext('ion-buttons', this.el),\n                'button-has-icon-only': hasIconOnly,\n                'button-disabled': disabled,\n                'ion-activatable': true,\n                'ion-focusable': true,\n            }) }, h(TagType, Object.assign({ key: 'fadec13053469dd0405bbbc61b70ced568aa4826' }, attrs, { class: \"button-native\", part: \"native\", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), h(\"span\", { key: '6bf0e5144fb1148002e88038522402b789689d2c', class: \"button-inner\" }, h(\"slot\", { key: '25da0ca155cfa9e2754842c34f4fd09f576ac2d2', name: \"icon-only\", onSlotchange: this.slotChanged }), h(\"slot\", { key: '51414065bb11953ec9d818f8d9353589bc9072c5', name: \"start\" }), h(\"slot\", { key: 'c9b5f8842aeabd20628df2f4600f1257ea913d8d' }), h(\"slot\", { key: '478dd3671c7be1909fc84e672f0fa8dfe6082263', name: \"end\" })), mode === 'md' && h(\"ion-ripple-effect\", { key: 'e1d55f85a55144d743f58a5914cd116cb065fa8c', type: this.rippleType }))));\n    }\n    static get is() { return \"ion-button\"; }\n    static get encapsulation() { return \"shadow\"; }\n    static get originalStyleUrls() {\n        return {\n            \"ios\": [\"button.ios.scss\"],\n            \"md\": [\"button.md.scss\"]\n        };\n    }\n    static get styleUrls() {\n        return {\n            \"ios\": [\"button.ios.css\"],\n            \"md\": [\"button.md.css\"]\n        };\n    }\n    static get properties() {\n        return {\n            \"color\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"Color\",\n                    \"resolved\": \"\\\"danger\\\" | \\\"dark\\\" | \\\"light\\\" | \\\"medium\\\" | \\\"primary\\\" | \\\"secondary\\\" | \\\"success\\\" | \\\"tertiary\\\" | \\\"warning\\\" | string & Record<never, never> | undefined\",\n                    \"references\": {\n                        \"Color\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../interface\",\n                            \"id\": \"src/interface.d.ts::Color\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The color to use from your application's color palette.\\nDefault options are: `\\\"primary\\\"`, `\\\"secondary\\\"`, `\\\"tertiary\\\"`, `\\\"success\\\"`, `\\\"warning\\\"`, `\\\"danger\\\"`, `\\\"light\\\"`, `\\\"medium\\\"`, and `\\\"dark\\\"`.\\nFor more information on colors, see [theming](/docs/theming/basics).\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"reflect\": true,\n                \"attribute\": \"color\"\n            },\n            \"buttonType\": {\n                \"type\": \"string\",\n                \"mutable\": true,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The type of button.\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"reflect\": false,\n                \"attribute\": \"button-type\",\n                \"defaultValue\": \"'button'\"\n            },\n            \"disabled\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"If `true`, the user cannot interact with the button.\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"reflect\": true,\n                \"attribute\": \"disabled\",\n                \"defaultValue\": \"false\"\n            },\n            \"expand\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"'full' | 'block'\",\n                    \"resolved\": \"\\\"block\\\" | \\\"full\\\" | undefined\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Set to `\\\"block\\\"` for a full-width button or to `\\\"full\\\"` for a full-width button\\nwith square corners and no left or right borders.\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"reflect\": true,\n                \"attribute\": \"expand\"\n            },\n            \"fill\": {\n                \"type\": \"string\",\n                \"mutable\": true,\n                \"complexType\": {\n                    \"original\": \"'clear' | 'outline' | 'solid' | 'default'\",\n                    \"resolved\": \"\\\"clear\\\" | \\\"default\\\" | \\\"outline\\\" | \\\"solid\\\" | undefined\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Set to `\\\"clear\\\"` for a transparent button that resembles a flat button, to `\\\"outline\\\"`\\nfor a transparent button with a border, or to `\\\"solid\\\"` for a button with a filled background.\\nThe default fill is `\\\"solid\\\"` except inside of a toolbar, where the default is `\\\"clear\\\"`.\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"reflect\": true,\n                \"attribute\": \"fill\"\n            },\n            \"routerDirection\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"RouterDirection\",\n                    \"resolved\": \"\\\"back\\\" | \\\"forward\\\" | \\\"root\\\"\",\n                    \"references\": {\n                        \"RouterDirection\": {\n                            \"location\": \"import\",\n                            \"path\": \"../router/utils/interface\",\n                            \"id\": \"src/components/router/utils/interface.ts::RouterDirection\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"When using a router, it specifies the transition direction when navigating to\\nanother page using `href`.\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"reflect\": false,\n                \"attribute\": \"router-direction\",\n                \"defaultValue\": \"'forward'\"\n            },\n            \"routerAnimation\": {\n                \"type\": \"unknown\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"AnimationBuilder | undefined\",\n                    \"resolved\": \"((baseEl: any, opts?: any) => Animation) | undefined\",\n                    \"references\": {\n                        \"AnimationBuilder\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../interface\",\n                            \"id\": \"src/interface.d.ts::AnimationBuilder\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"When using a router, it specifies the transition animation when navigating to\\nanother page using `href`.\"\n                },\n                \"getter\": false,\n                \"setter\": false\n            },\n            \"download\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string | undefined\",\n                    \"resolved\": \"string | undefined\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"This attribute instructs browsers to download a URL instead of navigating to\\nit, so the user will be prompted to save it as a local file. If the attribute\\nhas a value, it is used as the pre-filled file name in the Save prompt\\n(the user can still change the file name if they want).\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"reflect\": false,\n                \"attribute\": \"download\"\n            },\n            \"href\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string | undefined\",\n                    \"resolved\": \"string | undefined\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Contains a URL or a URL fragment that the hyperlink points to.\\nIf this property is set, an anchor tag will be rendered.\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"reflect\": false,\n                \"attribute\": \"href\"\n            },\n            \"rel\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string | undefined\",\n                    \"resolved\": \"string | undefined\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Specifies the relationship of the target object to the link object.\\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"reflect\": false,\n                \"attribute\": \"rel\"\n            },\n            \"shape\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"'round'\",\n                    \"resolved\": \"\\\"round\\\" | undefined\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Set to `\\\"round\\\"` for a button with more rounded corners.\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"reflect\": true,\n                \"attribute\": \"shape\"\n            },\n            \"size\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"'small' | 'default' | 'large'\",\n                    \"resolved\": \"\\\"default\\\" | \\\"large\\\" | \\\"small\\\" | undefined\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Set to `\\\"small\\\"` for a button with less height and padding, to `\\\"default\\\"`\\nfor a button with the default height and padding, or to `\\\"large\\\"` for a button\\nwith more height and padding. By default the size is unset, unless the button\\nis inside of an item, where the size is `\\\"small\\\"` by default. Set the size to\\n`\\\"default\\\"` inside of an item to make it a standard size button.\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"reflect\": true,\n                \"attribute\": \"size\"\n            },\n            \"strong\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"If `true`, activates a button with a heavier font weight.\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"reflect\": false,\n                \"attribute\": \"strong\",\n                \"defaultValue\": \"false\"\n            },\n            \"target\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string | undefined\",\n                    \"resolved\": \"string | undefined\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Specifies where to display the linked URL.\\nOnly applies when an `href` is provided.\\nSpecial keywords: `\\\"_blank\\\"`, `\\\"_self\\\"`, `\\\"_parent\\\"`, `\\\"_top\\\"`.\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"reflect\": false,\n                \"attribute\": \"target\"\n            },\n            \"type\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"'submit' | 'reset' | 'button'\",\n                    \"resolved\": \"\\\"button\\\" | \\\"reset\\\" | \\\"submit\\\"\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The type of the button.\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"reflect\": false,\n                \"attribute\": \"type\",\n                \"defaultValue\": \"'button'\"\n            },\n            \"form\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string | HTMLFormElement\",\n                    \"resolved\": \"HTMLFormElement | string | undefined\",\n                    \"references\": {\n                        \"HTMLFormElement\": {\n                            \"location\": \"global\",\n                            \"id\": \"global::HTMLFormElement\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The HTML form element or form element id. Used to submit a form when the button is not a child of the form.\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"reflect\": false,\n                \"attribute\": \"form\"\n            }\n        };\n    }\n    static get states() {\n        return {\n            \"isCircle\": {}\n        };\n    }\n    static get events() {\n        return [{\n                \"method\": \"ionFocus\",\n                \"name\": \"ionFocus\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Emitted when the button has focus.\"\n                },\n                \"complexType\": {\n                    \"original\": \"void\",\n                    \"resolved\": \"void\",\n                    \"references\": {}\n                }\n            }, {\n                \"method\": \"ionBlur\",\n                \"name\": \"ionBlur\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Emitted when the button loses focus.\"\n                },\n                \"complexType\": {\n                    \"original\": \"void\",\n                    \"resolved\": \"void\",\n                    \"references\": {}\n                }\n            }];\n    }\n    static get elementRef() { return \"el\"; }\n    static get watchers() {\n        return [{\n                \"propName\": \"disabled\",\n                \"methodName\": \"disabledChanged\"\n            }, {\n                \"propName\": \"aria-checked\",\n                \"methodName\": \"onAriaChanged\"\n            }, {\n                \"propName\": \"aria-label\",\n                \"methodName\": \"onAriaChanged\"\n            }];\n    }\n}\n"],"version":3}