voyager-ionic-core 8.0.0-beta.2 → 8.0.0-rc.0

package/components/animation.js

@@ -2,39 +2,8 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { w as win } from './index5.js';
-import { r as raf } from './helpers.js';
 
 let animationPrefix;
-/**
- * Web Animations requires hyphenated CSS properties
- * to be written in camelCase when animating
- */
-const processKeyframes = (keyframes) => {
-    keyframes.forEach((keyframe) => {
-        for (const key in keyframe) {
-            // eslint-disable-next-line no-prototype-builtins
-            if (keyframe.hasOwnProperty(key)) {
-                const value = keyframe[key];
-                if (key === 'easing') {
-                    const newKey = 'animation-timing-function';
-                    keyframe[newKey] = value;
-                    delete keyframe[key];
-                }
-                else {
-                    const newKey = convertCamelCaseToHypen(key);
-                    if (newKey !== key) {
-                        keyframe[newKey] = value;
-                        delete keyframe[key];
-                    }
-                }
-            }
-        }
-    });
-    return keyframes;
-};
-const convertCamelCaseToHypen = (str) => {
-    return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
-};
 const getAnimationPrefix = (el) => {
     if (animationPrefix === undefined) {
         const supportsUnprefixed = el.style.animationName !== undefined;
@@ -47,78 +16,6 @@ const setStyleProperty = (element, propertyName, value) => {
     const prefix = propertyName.startsWith('animation') ? getAnimationPrefix(element) : '';
     element.style.setProperty(prefix + propertyName, value);
 };
-const removeStyleProperty = (element, propertyName) => {
-    const prefix = propertyName.startsWith('animation') ? getAnimationPrefix(element) : '';
-    element.style.removeProperty(prefix + propertyName);
-};
-const animationEnd = (el, callback) => {
-    let unRegTrans;
-    const opts = { passive: true };
-    const unregister = () => {
-        if (unRegTrans) {
-            unRegTrans();
-        }
-    };
-    const onTransitionEnd = (ev) => {
-        if (el === ev.target) {
-            unregister();
-            callback(ev);
-        }
-    };
-    if (el) {
-        el.addEventListener('webkitAnimationEnd', onTransitionEnd, opts);
-        el.addEventListener('animationend', onTransitionEnd, opts);
-        unRegTrans = () => {
-            el.removeEventListener('webkitAnimationEnd', onTransitionEnd, opts);
-            el.removeEventListener('animationend', onTransitionEnd, opts);
-        };
-    }
-    return unregister;
-};
-// TODO(FW-2832): type
-const generateKeyframeRules = (keyframes = []) => {
-    return keyframes
-        .map((keyframe) => {
-        const offset = keyframe.offset;
-        const frameString = [];
-        for (const property in keyframe) {
-            // eslint-disable-next-line no-prototype-builtins
-            if (keyframe.hasOwnProperty(property) && property !== 'offset') {
-                frameString.push(`${property}: ${keyframe[property]};`);
-            }
-        }
-        return `${offset * 100}% { ${frameString.join(' ')} }`;
-    })
-        .join(' ');
-};
-const keyframeIds = [];
-const generateKeyframeName = (keyframeRules) => {
-    let index = keyframeIds.indexOf(keyframeRules);
-    if (index < 0) {
-        index = keyframeIds.push(keyframeRules) - 1;
-    }
-    return `ion-animation-${index}`;
-};
-const getStyleContainer = (element) => {
-    // getRootNode is not always available in SSR environments.
-    // TODO(FW-2832): types
-    const rootNode = element.getRootNode !== undefined ? element.getRootNode() : element;
-    return rootNode.head || rootNode;
-};
-const createKeyframeStylesheet = (keyframeName, keyframeRules, element) => {
-    var _a;
-    const styleContainer = getStyleContainer(element);
-    const keyframePrefix = getAnimationPrefix(element);
-    const existingStylesheet = styleContainer.querySelector('#' + keyframeName);
-    if (existingStylesheet) {
-        return existingStylesheet;
-    }
-    const stylesheet = ((_a = element.ownerDocument) !== null && _a !== void 0 ? _a : document).createElement('style');
-    stylesheet.id = keyframeName;
-    stylesheet.textContent = `@${keyframePrefix}keyframes ${keyframeName} { ${keyframeRules} } @${keyframePrefix}keyframes ${keyframeName}-alt { ${keyframeRules} }`;
-    styleContainer.appendChild(stylesheet);
-    return stylesheet;
-};
 const addClassToArray = (classes = [], className) => {
     if (className !== undefined) {
         const classNameToAppend = Array.isArray(className) ? className : [className];
@@ -146,14 +43,12 @@ const createAnimation = (animationId) => {
     let numAnimationsRunning = 0;
     let shouldForceLinearEasing = false;
     let shouldForceSyncPlayback = false;
-    let cssAnimationsTimerFallback;
     let forceDirectionValue;
     let forceDurationValue;
     let forceDelayValue;
     let willComplete = true;
     let finished = false;
     let shouldCalculateNumAnimations = true;
-    let keyframeName;
     let ani;
     let paused = false;
     const id = animationId;
@@ -170,10 +65,16 @@ const createAnimation = (animationId) => {
     const webAnimations = [];
     const supportsAnimationEffect = typeof AnimationEffect === 'function' ||
         (win !== undefined && typeof win.AnimationEffect === 'function');
+    /**
+     * This is a feature detection for Web Animations.
+     *
+     * Certain environments such as emulated browser environments for testing,
+     * do not support Web Animations. As a result, we need to check for support
+     * and provide a fallback to test certain functionality related to Web Animations.
+     */
     const supportsWebAnimations = typeof Element === 'function' &&
         typeof Element.prototype.animate === 'function' &&
         supportsAnimationEffect;
-    const ANIMATION_END_FALLBACK_PADDING_MS = 100;
     const getWebAnimations = () => {
         return webAnimations;
     };
@@ -261,21 +162,6 @@ const createAnimation = (animationId) => {
             });
             webAnimations.length = 0;
         }
-        else {
-            const elementsArray = elements.slice();
-            raf(() => {
-                elementsArray.forEach((element) => {
-                    removeStyleProperty(element, 'animation-name');
-                    removeStyleProperty(element, 'animation-duration');
-                    removeStyleProperty(element, 'animation-timing-function');
-                    removeStyleProperty(element, 'animation-iteration-count');
-                    removeStyleProperty(element, 'animation-delay');
-                    removeStyleProperty(element, 'animation-play-state');
-                    removeStyleProperty(element, 'animation-fill-mode');
-                    removeStyleProperty(element, 'animation-direction');
-                });
-            });
-        }
     };
     /**
      * Removes the animation's stylesheets
@@ -533,9 +419,6 @@ const createAnimation = (animationId) => {
                 }
             });
         }
-        else {
-            initializeCSSAnimation();
-        }
     };
     /**
      * Run all "before" animation hooks.
@@ -565,7 +448,6 @@ const createAnimation = (animationId) => {
      * Run all "after" animation hooks.
      */
     const afterAnimation = () => {
-        clearCSSAnimationsTimeout();
         // Runs all after read callbacks
         _afterAddReadFunctions.forEach((callback) => callback());
         // Runs all after write callbacks
@@ -621,32 +503,6 @@ const createAnimation = (animationId) => {
             }
         }
     };
-    const initializeCSSAnimation = (toggleAnimationName = true) => {
-        cleanUpStyleSheets();
-        const processedKeyframes = processKeyframes(_keyframes);
-        elements.forEach((element) => {
-            if (processedKeyframes.length > 0) {
-                const keyframeRules = generateKeyframeRules(processedKeyframes);
-                keyframeName = animationId !== undefined ? animationId : generateKeyframeName(keyframeRules);
-                const stylesheet = createKeyframeStylesheet(keyframeName, keyframeRules, element);
-                stylesheets.push(stylesheet);
-                setStyleProperty(element, 'animation-duration', `${getDuration()}ms`);
-                setStyleProperty(element, 'animation-timing-function', getEasing());
-                setStyleProperty(element, 'animation-delay', `${getDelay()}ms`);
-                setStyleProperty(element, 'animation-fill-mode', getFill());
-                setStyleProperty(element, 'animation-direction', getDirection());
-                const iterationsCount = getIterations() === Infinity ? 'infinite' : getIterations().toString();
-                setStyleProperty(element, 'animation-iteration-count', iterationsCount);
-                setStyleProperty(element, 'animation-play-state', 'paused');
-                if (toggleAnimationName) {
-                    setStyleProperty(element, 'animation-name', `${stylesheet.id}-alt`);
-                }
-                raf(() => {
-                    setStyleProperty(element, 'animation-name', stylesheet.id || null);
-                });
-            }
-        });
-    };
     const initializeWebAnimation = () => {
         elements.forEach((element) => {
             const animation = element.animate(_keyframes, {
@@ -667,15 +523,12 @@ const createAnimation = (animationId) => {
             };
         }
     };
-    const initializeAnimation = (toggleAnimationName = true) => {
+    const initializeAnimation = () => {
         beforeAnimation();
         if (_keyframes.length > 0) {
             if (supportsWebAnimations) {
                 initializeWebAnimation();
             }
-            else {
-                initializeCSSAnimation(toggleAnimationName);
-            }
         }
         initialized = true;
     };
@@ -688,15 +541,6 @@ const createAnimation = (animationId) => {
                 animation.pause();
             });
         }
-        else {
-            const animationDuration = `-${getDuration() * step}ms`;
-            elements.forEach((element) => {
-                if (_keyframes.length > 0) {
-                    setStyleProperty(element, 'animation-delay', animationDuration);
-                    setStyleProperty(element, 'animation-play-state', 'paused');
-                }
-            });
-        }
     };
     const updateWebAnimation = (step) => {
         webAnimations.forEach((animation) => {
@@ -713,26 +557,6 @@ const createAnimation = (animationId) => {
             setAnimationStep(step);
         }
     };
-    const updateCSSAnimation = (toggleAnimationName = true, step) => {
-        raf(() => {
-            elements.forEach((element) => {
-                setStyleProperty(element, 'animation-name', keyframeName || null);
-                setStyleProperty(element, 'animation-duration', `${getDuration()}ms`);
-                setStyleProperty(element, 'animation-timing-function', getEasing());
-                setStyleProperty(element, 'animation-delay', step !== undefined ? `-${step * getDuration()}ms` : `${getDelay()}ms`);
-                setStyleProperty(element, 'animation-fill-mode', getFill() || null);
-                setStyleProperty(element, 'animation-direction', getDirection() || null);
-                const iterationsCount = getIterations() === Infinity ? 'infinite' : getIterations().toString();
-                setStyleProperty(element, 'animation-iteration-count', iterationsCount);
-                if (toggleAnimationName) {
-                    setStyleProperty(element, 'animation-name', `${keyframeName}-alt`);
-                }
-                raf(() => {
-                    setStyleProperty(element, 'animation-name', keyframeName || null);
-                });
-            });
-        });
-    };
     const update = (deep = false, toggleAnimationName = true, step) => {
         if (deep) {
             childAnimations.forEach((animation) => {
@@ -742,9 +566,6 @@ const createAnimation = (animationId) => {
         if (supportsWebAnimations) {
             updateWebAnimation(step);
         }
-        else {
-            updateCSSAnimation(toggleAnimationName, step);
-        }
         return ani;
     };
     const progressStart = (forceLinearEasing = false, step) => {
@@ -827,67 +648,8 @@ const createAnimation = (animationId) => {
         pauseAnimation();
         return ani;
     };
-    const onAnimationEndFallback = () => {
-        cssAnimationsTimerFallback = undefined;
-        animationFinish();
-    };
-    const clearCSSAnimationsTimeout = () => {
-        if (cssAnimationsTimerFallback) {
-            clearTimeout(cssAnimationsTimerFallback);
-        }
-    };
     const playCSSAnimations = () => {
-        clearCSSAnimationsTimeout();
-        raf(() => {
-            elements.forEach((element) => {
-                if (_keyframes.length > 0) {
-                    setStyleProperty(element, 'animation-play-state', 'running');
-                }
-            });
-        });
-        if (_keyframes.length === 0 || elements.length === 0) {
-            animationFinish();
-        }
-        else {
-            /**
-             * This is a catchall in the event that a CSS Animation did not finish.
-             * The Web Animations API has mechanisms in place for preventing this.
-             * CSS Animations will not fire an `animationend` event
-             * for elements with `display: none`. The Web Animations API
-             * accounts for this, but using raw CSS Animations requires
-             * this workaround.
-             */
-            const animationDelay = getDelay() || 0;
-            const animationDuration = getDuration() || 0;
-            const animationIterations = getIterations() || 1;
-            // No need to set a timeout when animation has infinite iterations
-            if (isFinite(animationIterations)) {
-                cssAnimationsTimerFallback = setTimeout(onAnimationEndFallback, animationDelay + animationDuration * animationIterations + ANIMATION_END_FALLBACK_PADDING_MS);
-            }
-            animationEnd(elements[0], () => {
-                clearCSSAnimationsTimeout();
-                /**
-                 * Ensure that clean up
-                 * is always done a frame
-                 * before the onFinish handlers
-                 * are fired. Otherwise, there
-                 * may be flickering if a new
-                 * animation is started on the same
-                 * element too quickly
-                 */
-                raf(() => {
-                    clearCSSAnimationPlayState();
-                    raf(animationFinish);
-                });
-            });
-        }
-    };
-    const clearCSSAnimationPlayState = () => {
-        elements.forEach((element) => {
-            removeStyleProperty(element, 'animation-duration');
-            removeStyleProperty(element, 'animation-delay');
-            removeStyleProperty(element, 'animation-play-state');
-        });
+        animationFinish();
     };
     const playWebAnimations = () => {
         webAnimations.forEach((animation) => {
@@ -902,9 +664,6 @@ const createAnimation = (animationId) => {
             setAnimationStep(0);
             updateWebAnimation();
         }
-        else {
-            updateCSSAnimation();
-        }
     };
     const play = (opts) => {
         return new Promise((resolve) => {

package/components/button.js

@@ -8,10 +8,10 @@ import { o as openURL, c as createColorClasses, h as hostContext } from './theme
 import { b as getIonMode } from './ionic-global.js';
 import { d as defineCustomElement$1 } from './ripple-effect.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;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:top;vertical-align:-webkit-baseline-middle;-webkit-font-kerning:none;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:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;width:100%;height:100%;min-height:inherit;-webkit-transition:var(--transition);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;-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);contain:layout style;cursor:pointer;opacity:var(--opacity);overflow:var(--overflow);z-index:0;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none}.button-native::-moz-focus-inner{border:0}.button-inner{display:-ms-flexbox;display:flex;position:relative;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;z-index:1}::slotted([slot=start]),::slotted([slot=end]){-ms-flex-negative:0;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}::slotted(ion-icon[slot=icon-only]){font-size:1.8em}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(.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))}: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-has-icon-only){--padding-top:0;--padding-bottom:0}:host(.button-round){--border-radius:64px;--padding-top:0;--padding-start:26px;--padding-end:26px;--padding-bottom:0}:host(.button-strong){font-weight:600}: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)}";
+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;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:top;vertical-align:-webkit-baseline-middle;-webkit-font-kerning:none;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:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;width:100%;height:100%;min-height:inherit;-webkit-transition:var(--transition);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;-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);contain:layout style;cursor:pointer;opacity:var(--opacity);overflow:var(--overflow);z-index:0;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none}.button-native::-moz-focus-inner{border:0}.button-inner{display:-ms-flexbox;display:flex;position:relative;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;z-index:1}::slotted([slot=start]),::slotted([slot=end]){-ms-flex-negative:0;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(.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))}: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:1.125em}: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:1.4em}: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:1em}: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)}";
 const IonButtonIosStyle0 = buttonIosCss;
 
-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;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:top;vertical-align:-webkit-baseline-middle;-webkit-font-kerning:none;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:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;width:100%;height:100%;min-height:inherit;-webkit-transition:var(--transition);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;-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);contain:layout style;cursor:pointer;opacity:var(--opacity);overflow:var(--overflow);z-index:0;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none}.button-native::-moz-focus-inner{border:0}.button-inner{display:-ms-flexbox;display:flex;position:relative;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;z-index:1}::slotted([slot=start]),::slotted([slot=end]){-ms-flex-negative:0;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}::slotted(ion-icon[slot=icon-only]){font-size:1.8em}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(.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))}: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),\n                background-color 15ms linear,\n                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:64px;--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-has-icon-only){--padding-top:0;--padding-bottom:0}:host(.button-strong){font-weight:bold}::slotted(ion-icon[slot=icon-only]){padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}: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)}}";
+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;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:top;vertical-align:-webkit-baseline-middle;-webkit-font-kerning:none;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:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;width:100%;height:100%;min-height:inherit;-webkit-transition:var(--transition);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;-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);contain:layout style;cursor:pointer;opacity:var(--opacity);overflow:var(--overflow);z-index:0;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none}.button-native::-moz-focus-inner{border:0}.button-inner{display:-ms-flexbox;display:flex;position:relative;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;z-index:1}::slotted([slot=start]),::slotted([slot=end]){-ms-flex-negative:0;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(.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))}: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),\n                background-color 15ms linear,\n                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:1.6em}: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:1.23em}: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:1.4em}: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)}}";
 const IonButtonMdStyle0 = buttonMdCss;
 
 const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement {
@@ -42,6 +42,18 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
         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;
+        };
+        this.isCircle = false;
         this.color = undefined;
         this.buttonType = 'button';
         this.disabled = false;
@@ -202,7 +214,7 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
         {
             type !== 'button' && this.renderHiddenButton();
         }
-        return (h(Host, { key: 'cb5af107c877f0c1926045acfd4f6922f7dbcb8d', onClick: this.handleClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: 'e926c8ca019c15a5fdf5ac95632f78d8b791fba0', onClick: this.handleClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
                 [mode]: true,
                 [buttonType]: true,
                 [`${buttonType}-${expand}`]: expand !== undefined,
@@ -217,7 +229,7 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
                 'button-disabled': disabled,
                 'ion-activatable': true,
                 'ion-focusable': true,
-            }) }, h(TagType, Object.assign({ key: 'bc4c5e6a17fa90e172e56bd481ba24c69419dd1a' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), h("span", { key: 'f1eac679bcdf2b40177f920025a49705f726bf0c', class: "button-inner" }, h("slot", { key: '19aa897289923c8e7d16a354f9acac312f0641ea', name: "icon-only" }), h("slot", { key: '0a321ca359f631a2c8708566b3f1b936fe9a4d00', name: "start" }), h("slot", { key: '9ec1b7197ec1b4d858338f45433f6bfa46b81a3d' }), h("slot", { key: 'e632fd3b918ec94e119a5e766371886072292d75', name: "end" })), mode === 'md' && h("ion-ripple-effect", { type: this.rippleType }))));
+            }) }, h(TagType, Object.assign({ key: 'e964fd7945ff046464a98e6148256b8bb12b07a8' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), h("span", { key: '5eac1c991616ead47b6b7f5ab095dc25831633ad', class: "button-inner" }, h("slot", { key: '8383cfaa82e50dddff7dfe82ca6e1bcb3328871b', name: "icon-only", onSlotchange: this.slotChanged }), h("slot", { key: '423445d26533850b86171095f431caab437ff4f3', name: "start" }), h("slot", { key: 'dcbdc7c3f827e01b8e3792272b72a13e2d99c179' }), h("slot", { key: '9c345224e1d415cfa96460f94626d9bcf49d3829', name: "end" })), mode === 'md' && h("ion-ripple-effect", { type: this.rippleType }))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -243,7 +255,8 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
         "strong": [4],
         "target": [1],
         "type": [1],
-        "form": [1]
+        "form": [1],
+        "isCircle": [32]
     }, undefined, {
         "disabled": ["disabledChanged"]
     }]);

package/components/haptic.js

@@ -47,12 +47,6 @@ var NotificationType;
 })(NotificationType || (NotificationType = {}));
 const HapticEngine = {
     getEngine() {
-        const tapticEngine = window.TapticEngine;
-        if (tapticEngine) {
-            // Cordova
-            // TODO FW-4707 - Remove this in Ionic 8
-            return tapticEngine;
-        }
         const capacitor = getCapacitor();
         if (capacitor === null || capacitor === void 0 ? void 0 : capacitor.isPluginAvailable('Haptics')) {
             // Capacitor
@@ -81,85 +75,43 @@ const HapticEngine = {
         }
         return true;
     },
-    isCordova() {
-        return window.TapticEngine !== undefined;
-    },
-    isCapacitor() {
-        return getCapacitor() !== undefined;
-    },
     impact(options) {
         const engine = this.getEngine();
         if (!engine) {
             return;
         }
-        /**
-         * To provide backwards compatibility with Cordova apps,
-         * we convert the style to lowercase.
-         *
-         * TODO: FW-4707 - Remove this in Ionic 8
-         */
-        const style = this.isCapacitor() ? options.style : options.style.toLowerCase();
-        engine.impact({ style });
+        engine.impact({ style: options.style });
     },
     notification(options) {
         const engine = this.getEngine();
         if (!engine) {
             return;
         }
-        /**
-         * To provide backwards compatibility with Cordova apps,
-         * we convert the style to lowercase.
-         *
-         * TODO: FW-4707 - Remove this in Ionic 8
-         */
-        const type = this.isCapacitor() ? options.type : options.type.toLowerCase();
-        engine.notification({ type });
+        engine.notification({ type: options.type });
     },
     selection() {
-        /**
-         * To provide backwards compatibility with Cordova apps,
-         * we convert the style to lowercase.
-         *
-         * TODO: FW-4707 - Remove this in Ionic 8
-         */
-        const style = this.isCapacitor() ? ImpactStyle.Light : 'light';
-        this.impact({ style });
+        this.impact({ style: ImpactStyle.Light });
     },
     selectionStart() {
         const engine = this.getEngine();
         if (!engine) {
             return;
         }
-        if (this.isCapacitor()) {
-            engine.selectionStart();
-        }
-        else {
-            engine.gestureSelectionStart();
-        }
+        engine.selectionStart();
     },
     selectionChanged() {
         const engine = this.getEngine();
         if (!engine) {
             return;
         }
-        if (this.isCapacitor()) {
-            engine.selectionChanged();
-        }
-        else {
-            engine.gestureSelectionChanged();
-        }
+        engine.selectionChanged();
     },
     selectionEnd() {
         const engine = this.getEngine();
         if (!engine) {
             return;
         }
-        if (this.isCapacitor()) {
-            engine.selectionEnd();
-        }
-        else {
-            engine.gestureSelectionEnd();
-        }
+        engine.selectionEnd();
     },
 };
 /**