@amwaljs/checkout-button 0.3.1 → 0.3.2

package/dist/esm/ion-fab-button.entry.js

@@ -1,85 +1,85 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-93OyAGoo.js';
-import { k as inheritAriaAttributes } from './helpers-C6kqtbmV.js';
-import { h as hostContext, o as openURL, c as createColorClasses } from './theme-DiVJyqlX.js';
-import { h as close } from './index-C75BfBAE.js';
-import { g as getIonMode } from './ionic-global-DXXzPLPc.js';
+import { r as registerInstance, d as createEvent, h, H as Host, e as getElement } from './index-8cc94b11.js';
+import { i as inheritAriaAttributes } from './helpers-f0dcbd72.js';
+import { h as hostContext, o as openURL, c as createColorClasses } from './theme-35c700b7.js';
+import { i as close } from './index-afdf867c.js';
+import { g as getIonMode } from './ionic-global-0b7766cb.js';
 
-const fabButtonIosCss = () => `:host{--color-activated:var(--color);--color-focused:var(--color);--color-hover:var(--color);--background-hover:var(--ion-color-primary-contrast, #fff);--background-hover-opacity:.08;--transition:background-color, opacity 100ms linear;--ripple-color:currentColor;--border-radius:50%;--border-width:0;--border-style:none;--border-color:initial;--padding-top:0;--padding-end:0;--padding-bottom:0;--padding-start:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:block;width:56px;height:56px;font-size:14px;text-align:center;text-overflow:ellipsis;text-transform:none;white-space:nowrap;font-kerning:none}.button-native{border-radius:var(--border-radius);-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:block;position:relative;width:100%;height:100%;transform:var(--transform);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);outline:none;background:var(--background);background-clip:padding-box;color:var(--color);box-shadow:var(--box-shadow);contain:strict;cursor:pointer;overflow:hidden;z-index:0;appearance:none;box-sizing:border-box}::slotted(ion-icon){line-height:1}.button-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:"";opacity:0}.button-inner{left:0;right:0;top:0;display:flex;position:absolute;flex-flow:row nowrap;flex-shrink:0;align-items:center;justify-content:center;height:100%;transition:all ease-in-out 300ms;transition-property:transform, opacity;z-index:1}:host(.fab-button-disabled){cursor:default;opacity:0.5;pointer-events:none}@media (any-hover: hover){:host(:hover) .button-native{color:var(--color-hover)}:host(:hover) .button-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}}:host(.ion-focused) .button-native{color:var(--color-focused)}:host(.ion-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}:host(.ion-activated) .button-native{color:var(--color-activated)}:host(.ion-activated) .button-native::after{background:var(--background-activated);opacity:var(--background-activated-opacity)}::slotted(ion-icon){line-height:1}:host(.fab-button-small){-webkit-margin-start:8px;margin-inline-start:8px;-webkit-margin-end:8px;margin-inline-end:8px;margin-top:8px;margin-bottom:8px;width:40px;height:40px}.close-icon{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0;left:0;right:0;top:0;position:absolute;height:100%;transform:scale(0.4) rotateZ(-45deg);transition:all ease-in-out 300ms;transition-property:transform, opacity;font-size:var(--close-icon-font-size);opacity:0;z-index:1}:host(.fab-button-close-active) .close-icon{transform:scale(1) rotateZ(0deg);opacity:1}:host(.fab-button-close-active) .button-inner{transform:scale(0.4) rotateZ(45deg);opacity:0}ion-ripple-effect{color:var(--ripple-color)}@supports (backdrop-filter: blur(0)){:host(.fab-button-translucent) .button-native{backdrop-filter:var(--backdrop-filter)}}:host(.ion-color) .button-native{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host{--background:var(--ion-color-primary, #3880ff);--background-activated:var(--ion-color-primary-shade, #3171e0);--background-focused:var(--ion-color-primary-shade, #3171e0);--background-hover:var(--ion-color-primary-tint, #4c8dff);--background-activated-opacity:1;--background-focused-opacity:1;--background-hover-opacity:1;--color:var(--ion-color-primary-contrast, #fff);--box-shadow:0 4px 16px rgba(0, 0, 0, 0.12);--transition:0.2s transform cubic-bezier(0.25, 1.11, 0.78, 1.59);--close-icon-font-size:28px}:host(.ion-activated){--box-shadow:0 4px 16px rgba(0, 0, 0, 0.12);--transform:scale(1.1);--transition:0.2s transform ease-out}::slotted(ion-icon){font-size:28px}:host(.fab-button-in-list){--background:var(--ion-color-light, #f4f5f8);--background-activated:var(--ion-color-light-shade, #d7d8da);--background-focused:var(--background-activated);--background-hover:var(--ion-color-light-tint, #f5f6f9);--color:var(--ion-color-light-contrast, #000);--color-activated:var(--ion-color-light-contrast, #000);--color-focused:var(--color-activated);--transition:transform 200ms ease 10ms, opacity 200ms ease 10ms}:host(.fab-button-in-list) ::slotted(ion-icon){font-size:18px}:host(.ion-color.ion-focused) .button-native::after{background:var(--ion-color-shade)}:host(.ion-color.ion-focused) .button-native,:host(.ion-color.ion-activated) .button-native{color:var(--ion-color-contrast)}:host(.ion-color.ion-focused) .button-native::after,:host(.ion-color.ion-activated) .button-native::after{background:var(--ion-color-shade)}@media (any-hover: hover){:host(.ion-color:hover) .button-native{color:var(--ion-color-contrast)}:host(.ion-color:hover) .button-native::after{background:var(--ion-color-tint)}}@supports (backdrop-filter: blur(0)){:host(.fab-button-translucent){--background:rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.9);--background-hover:rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.8);--background-focused:rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.82);--backdrop-filter:saturate(180%) blur(20px)}:host(.fab-button-translucent-in-list){--background:rgba(var(--ion-color-light-rgb, 244, 245, 248), 0.9);--background-hover:rgba(var(--ion-color-light-rgb, 244, 245, 248), 0.8);--background-focused:rgba(var(--ion-color-light-rgb, 244, 245, 248), 0.82)}}@supports (backdrop-filter: blur(0)){@media (any-hover: hover){:host(.fab-button-translucent.ion-color:hover) .button-native{background:rgba(var(--ion-color-base-rgb), 0.8)}}:host(.ion-color.fab-button-translucent) .button-native{background:rgba(var(--ion-color-base-rgb), 0.9)}:host(.ion-color.ion-focused.fab-button-translucent) .button-native,:host(.ion-color.ion-activated.fab-button-translucent) .button-native{background:var(--ion-color-base)}}`;
+const fabButtonIosCss = ":host{--color-activated:var(--color);--color-focused:var(--color);--color-hover:var(--color);--background-hover:var(--ion-color-primary-contrast, #fff);--background-hover-opacity:.08;--transition:background-color, opacity 100ms linear;--ripple-color:currentColor;--border-radius:50%;--border-width:0;--border-style:none;--border-color:initial;--padding-top:0;--padding-end:0;--padding-bottom:0;--padding-start:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:block;width:56px;height:56px;font-size:14px;text-align:center;text-overflow:ellipsis;text-transform:none;white-space:nowrap;font-kerning:none}.button-native{border-radius:var(--border-radius);-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:block;position:relative;width:100%;height:100%;transform:var(--transform);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);outline:none;background:var(--background);background-clip:padding-box;color:var(--color);box-shadow:var(--box-shadow);contain:strict;cursor:pointer;overflow:hidden;z-index:0;appearance:none;box-sizing:border-box}::slotted(ion-icon){line-height:1}.button-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0}.button-inner{left:0;right:0;top:0;display:flex;position:absolute;flex-flow:row nowrap;flex-shrink:0;align-items:center;justify-content:center;height:100%;transition:all ease-in-out 300ms;transition-property:transform, opacity;z-index:1}:host(.fab-button-disabled){cursor:default;opacity:0.5;pointer-events:none}@media (any-hover: hover){:host(:hover) .button-native{color:var(--color-hover)}:host(:hover) .button-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}}:host(.ion-focused) .button-native{color:var(--color-focused)}:host(.ion-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}:host(.ion-activated) .button-native{color:var(--color-activated)}:host(.ion-activated) .button-native::after{background:var(--background-activated);opacity:var(--background-activated-opacity)}::slotted(ion-icon){line-height:1}:host(.fab-button-small){-webkit-margin-start:8px;margin-inline-start:8px;-webkit-margin-end:8px;margin-inline-end:8px;margin-top:8px;margin-bottom:8px;width:40px;height:40px}.close-icon{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0;left:0;right:0;top:0;position:absolute;height:100%;transform:scale(0.4) rotateZ(-45deg);transition:all ease-in-out 300ms;transition-property:transform, opacity;font-size:var(--close-icon-font-size);opacity:0;z-index:1}:host(.fab-button-close-active) .close-icon{transform:scale(1) rotateZ(0deg);opacity:1}:host(.fab-button-close-active) .button-inner{transform:scale(0.4) rotateZ(45deg);opacity:0}ion-ripple-effect{color:var(--ripple-color)}@supports (backdrop-filter: blur(0)){:host(.fab-button-translucent) .button-native{backdrop-filter:var(--backdrop-filter)}}:host(.ion-color) .button-native{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host{--background:var(--ion-color-primary, #3880ff);--background-activated:var(--ion-color-primary-shade, #3171e0);--background-focused:var(--ion-color-primary-shade, #3171e0);--background-hover:var(--ion-color-primary-tint, #4c8dff);--background-activated-opacity:1;--background-focused-opacity:1;--background-hover-opacity:1;--color:var(--ion-color-primary-contrast, #fff);--box-shadow:0 4px 16px rgba(0, 0, 0, 0.12);--transition:0.2s transform cubic-bezier(0.25, 1.11, 0.78, 1.59);--close-icon-font-size:28px}:host(.ion-activated){--box-shadow:0 4px 16px rgba(0, 0, 0, 0.12);--transform:scale(1.1);--transition:0.2s transform ease-out}::slotted(ion-icon){font-size:28px}:host(.fab-button-in-list){--background:var(--ion-color-light, #f4f5f8);--background-activated:var(--ion-color-light-shade, #d7d8da);--background-focused:var(--background-activated);--background-hover:var(--ion-color-light-tint, #f5f6f9);--color:var(--ion-color-light-contrast, #000);--color-activated:var(--ion-color-light-contrast, #000);--color-focused:var(--color-activated);--transition:transform 200ms ease 10ms, opacity 200ms ease 10ms}:host(.fab-button-in-list) ::slotted(ion-icon){font-size:18px}:host(.ion-color.ion-focused) .button-native::after{background:var(--ion-color-shade)}:host(.ion-color.ion-focused) .button-native,:host(.ion-color.ion-activated) .button-native{color:var(--ion-color-contrast)}:host(.ion-color.ion-focused) .button-native::after,:host(.ion-color.ion-activated) .button-native::after{background:var(--ion-color-shade)}@media (any-hover: hover){:host(.ion-color:hover) .button-native{color:var(--ion-color-contrast)}:host(.ion-color:hover) .button-native::after{background:var(--ion-color-tint)}}@supports (backdrop-filter: blur(0)){:host(.fab-button-translucent){--background:rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.9);--background-hover:rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.8);--background-focused:rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.82);--backdrop-filter:saturate(180%) blur(20px)}:host(.fab-button-translucent-in-list){--background:rgba(var(--ion-color-light-rgb, 244, 245, 248), 0.9);--background-hover:rgba(var(--ion-color-light-rgb, 244, 245, 248), 0.8);--background-focused:rgba(var(--ion-color-light-rgb, 244, 245, 248), 0.82)}}@supports (backdrop-filter: blur(0)){@media (any-hover: hover){:host(.fab-button-translucent.ion-color:hover) .button-native{background:rgba(var(--ion-color-base-rgb), 0.8)}}:host(.ion-color.fab-button-translucent) .button-native{background:rgba(var(--ion-color-base-rgb), 0.9)}:host(.ion-color.ion-focused.fab-button-translucent) .button-native,:host(.ion-color.ion-activated.fab-button-translucent) .button-native{background:var(--ion-color-base)}}";
 
-const fabButtonMdCss = () => `:host{--color-activated:var(--color);--color-focused:var(--color);--color-hover:var(--color);--background-hover:var(--ion-color-primary-contrast, #fff);--background-hover-opacity:.08;--transition:background-color, opacity 100ms linear;--ripple-color:currentColor;--border-radius:50%;--border-width:0;--border-style:none;--border-color:initial;--padding-top:0;--padding-end:0;--padding-bottom:0;--padding-start:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:block;width:56px;height:56px;font-size:14px;text-align:center;text-overflow:ellipsis;text-transform:none;white-space:nowrap;font-kerning:none}.button-native{border-radius:var(--border-radius);-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:block;position:relative;width:100%;height:100%;transform:var(--transform);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);outline:none;background:var(--background);background-clip:padding-box;color:var(--color);box-shadow:var(--box-shadow);contain:strict;cursor:pointer;overflow:hidden;z-index:0;appearance:none;box-sizing:border-box}::slotted(ion-icon){line-height:1}.button-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:"";opacity:0}.button-inner{left:0;right:0;top:0;display:flex;position:absolute;flex-flow:row nowrap;flex-shrink:0;align-items:center;justify-content:center;height:100%;transition:all ease-in-out 300ms;transition-property:transform, opacity;z-index:1}:host(.fab-button-disabled){cursor:default;opacity:0.5;pointer-events:none}@media (any-hover: hover){:host(:hover) .button-native{color:var(--color-hover)}:host(:hover) .button-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}}:host(.ion-focused) .button-native{color:var(--color-focused)}:host(.ion-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}:host(.ion-activated) .button-native{color:var(--color-activated)}:host(.ion-activated) .button-native::after{background:var(--background-activated);opacity:var(--background-activated-opacity)}::slotted(ion-icon){line-height:1}:host(.fab-button-small){-webkit-margin-start:8px;margin-inline-start:8px;-webkit-margin-end:8px;margin-inline-end:8px;margin-top:8px;margin-bottom:8px;width:40px;height:40px}.close-icon{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0;left:0;right:0;top:0;position:absolute;height:100%;transform:scale(0.4) rotateZ(-45deg);transition:all ease-in-out 300ms;transition-property:transform, opacity;font-size:var(--close-icon-font-size);opacity:0;z-index:1}:host(.fab-button-close-active) .close-icon{transform:scale(1) rotateZ(0deg);opacity:1}:host(.fab-button-close-active) .button-inner{transform:scale(0.4) rotateZ(45deg);opacity:0}ion-ripple-effect{color:var(--ripple-color)}@supports (backdrop-filter: blur(0)){:host(.fab-button-translucent) .button-native{backdrop-filter:var(--backdrop-filter)}}:host(.ion-color) .button-native{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host{--background:var(--ion-color-primary, #3880ff);--background-activated:transparent;--background-focused:currentColor;--background-hover:currentColor;--background-activated-opacity:0;--background-focused-opacity:.24;--background-hover-opacity:.08;--color:var(--ion-color-primary-contrast, #fff);--box-shadow:0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);--transition:box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1), color 280ms cubic-bezier(0.4, 0, 0.2, 1), opacity 15ms linear 30ms, transform 270ms cubic-bezier(0, 0, 0.2, 1) 0ms;--close-icon-font-size:24px}:host(.ion-activated){--box-shadow:0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 12px 17px 2px rgba(0, 0, 0, 0.14), 0 5px 22px 4px rgba(0, 0, 0, 0.12)}::slotted(ion-icon){font-size:24px}:host(.fab-button-in-list){--color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54);--color-activated:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54);--color-focused:var(--color-activated);--background:var(--ion-color-light, #f4f5f8);--background-activated:transparent;--background-focused:var(--ion-color-light-shade, #d7d8da);--background-hover:var(--ion-color-light-tint, #f5f6f9)}:host(.fab-button-in-list) ::slotted(ion-icon){font-size:18px}:host(.ion-color.ion-focused) .button-native{color:var(--ion-color-contrast)}:host(.ion-color.ion-focused) .button-native::after{background:var(--ion-color-contrast)}:host(.ion-color.ion-activated) .button-native{color:var(--ion-color-contrast)}:host(.ion-color.ion-activated) .button-native::after{background:transparent}@media (any-hover: hover){:host(.ion-color:hover) .button-native{color:var(--ion-color-contrast)}:host(.ion-color:hover) .button-native::after{background:var(--ion-color-contrast)}}`;
+const fabButtonMdCss = ":host{--color-activated:var(--color);--color-focused:var(--color);--color-hover:var(--color);--background-hover:var(--ion-color-primary-contrast, #fff);--background-hover-opacity:.08;--transition:background-color, opacity 100ms linear;--ripple-color:currentColor;--border-radius:50%;--border-width:0;--border-style:none;--border-color:initial;--padding-top:0;--padding-end:0;--padding-bottom:0;--padding-start:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:block;width:56px;height:56px;font-size:14px;text-align:center;text-overflow:ellipsis;text-transform:none;white-space:nowrap;font-kerning:none}.button-native{border-radius:var(--border-radius);-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:block;position:relative;width:100%;height:100%;transform:var(--transform);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);outline:none;background:var(--background);background-clip:padding-box;color:var(--color);box-shadow:var(--box-shadow);contain:strict;cursor:pointer;overflow:hidden;z-index:0;appearance:none;box-sizing:border-box}::slotted(ion-icon){line-height:1}.button-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0}.button-inner{left:0;right:0;top:0;display:flex;position:absolute;flex-flow:row nowrap;flex-shrink:0;align-items:center;justify-content:center;height:100%;transition:all ease-in-out 300ms;transition-property:transform, opacity;z-index:1}:host(.fab-button-disabled){cursor:default;opacity:0.5;pointer-events:none}@media (any-hover: hover){:host(:hover) .button-native{color:var(--color-hover)}:host(:hover) .button-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}}:host(.ion-focused) .button-native{color:var(--color-focused)}:host(.ion-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}:host(.ion-activated) .button-native{color:var(--color-activated)}:host(.ion-activated) .button-native::after{background:var(--background-activated);opacity:var(--background-activated-opacity)}::slotted(ion-icon){line-height:1}:host(.fab-button-small){-webkit-margin-start:8px;margin-inline-start:8px;-webkit-margin-end:8px;margin-inline-end:8px;margin-top:8px;margin-bottom:8px;width:40px;height:40px}.close-icon{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0;left:0;right:0;top:0;position:absolute;height:100%;transform:scale(0.4) rotateZ(-45deg);transition:all ease-in-out 300ms;transition-property:transform, opacity;font-size:var(--close-icon-font-size);opacity:0;z-index:1}:host(.fab-button-close-active) .close-icon{transform:scale(1) rotateZ(0deg);opacity:1}:host(.fab-button-close-active) .button-inner{transform:scale(0.4) rotateZ(45deg);opacity:0}ion-ripple-effect{color:var(--ripple-color)}@supports (backdrop-filter: blur(0)){:host(.fab-button-translucent) .button-native{backdrop-filter:var(--backdrop-filter)}}:host(.ion-color) .button-native{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host{--background:var(--ion-color-primary, #3880ff);--background-activated:transparent;--background-focused:currentColor;--background-hover:currentColor;--background-activated-opacity:0;--background-focused-opacity:.24;--background-hover-opacity:.08;--color:var(--ion-color-primary-contrast, #fff);--box-shadow:0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);--transition:box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1), color 280ms cubic-bezier(0.4, 0, 0.2, 1), opacity 15ms linear 30ms, transform 270ms cubic-bezier(0, 0, 0.2, 1) 0ms;--close-icon-font-size:24px}:host(.ion-activated){--box-shadow:0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 12px 17px 2px rgba(0, 0, 0, 0.14), 0 5px 22px 4px rgba(0, 0, 0, 0.12)}::slotted(ion-icon){font-size:24px}:host(.fab-button-in-list){--color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54);--color-activated:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54);--color-focused:var(--color-activated);--background:var(--ion-color-light, #f4f5f8);--background-activated:transparent;--background-focused:var(--ion-color-light-shade, #d7d8da);--background-hover:var(--ion-color-light-tint, #f5f6f9)}:host(.fab-button-in-list) ::slotted(ion-icon){font-size:18px}:host(.ion-color.ion-focused) .button-native{color:var(--ion-color-contrast)}:host(.ion-color.ion-focused) .button-native::after{background:var(--ion-color-contrast)}:host(.ion-color.ion-activated) .button-native{color:var(--ion-color-contrast)}:host(.ion-color.ion-activated) .button-native::after{background:transparent}@media (any-hover: hover){:host(.ion-color:hover) .button-native{color:var(--ion-color-contrast)}:host(.ion-color:hover) .button-native::after{background:var(--ion-color-contrast)}}";
 
 const FabButton = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.ionFocus = createEvent(this, "ionFocus", 7);
-        this.ionBlur = createEvent(this, "ionBlur", 7);
-        this.fab = null;
-        this.inheritedAttributes = {};
-        this.onFocus = () => {
-            this.ionFocus.emit();
-        };
-        this.onBlur = () => {
-            this.ionBlur.emit();
-        };
-        this.onClick = () => {
-            const { fab } = this;
-            if (!fab) {
-                return;
-            }
-            fab.toggle();
-        };
-        this.color = undefined;
-        this.activated = false;
-        this.disabled = false;
-        this.download = undefined;
-        this.href = undefined;
-        this.rel = undefined;
-        this.routerDirection = 'forward';
-        this.routerAnimation = undefined;
-        this.target = undefined;
-        this.show = false;
-        this.translucent = false;
-        this.type = 'button';
-        this.size = undefined;
-        this.closeIcon = close;
-    }
-    connectedCallback() {
-        this.fab = this.el.closest('ion-fab');
-    }
-    componentWillLoad() {
-        this.inheritedAttributes = inheritAriaAttributes(this.el);
-    }
-    render() {
-        const { el, disabled, color, href, activated, show, translucent, size, inheritedAttributes } = this;
-        const inList = hostContext('ion-fab-list', el);
-        const mode = getIonMode(this);
-        const TagType = href === undefined ? 'button' : 'a';
-        const attrs = TagType === 'button'
-            ? { type: this.type }
-            : {
-                download: this.download,
-                href,
-                rel: this.rel,
-                target: this.target,
-            };
-        return (h(Host, { key: '5b5e73a0236eabb3e994f0f33ee9ab6f75a12b24', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
-                [mode]: true,
-                'fab-button-in-list': inList,
-                'fab-button-translucent-in-list': inList && translucent,
-                'fab-button-close-active': activated,
-                'fab-button-show': show,
-                'fab-button-disabled': disabled,
-                'fab-button-translucent': translucent,
-                'ion-activatable': true,
-                'ion-focusable': true,
-                [`fab-button-${size}`]: size !== undefined,
-            }) }, h(TagType, Object.assign({ key: 'e3c85ff305b6790519543603401b85f294aabed1' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: (ev) => openURL(href, ev, this.routerDirection, this.routerAnimation) }, inheritedAttributes), h("ion-icon", { key: '39241f9fa051506717c8680e1b809dbf2e56f1a1', "aria-hidden": "true", icon: this.closeIcon, part: "close-icon", class: "close-icon", lazy: false }), h("span", { key: '03f0ec1c25352f3a5decb33ebc060b9043ab569e', class: "button-inner" }, h("slot", { key: '11c1a17bc0c54b840a96b96e03fffc23f0e64ff2' })), mode === 'md' && h("ion-ripple-effect", { key: '9b1642dba0beb3a22658ad0aead26b2ab57f0367' }))));
-    }
-    get el() { return getElement(this); }
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ionFocus = createEvent(this, "ionFocus", 7);
+    this.ionBlur = createEvent(this, "ionBlur", 7);
+    this.fab = null;
+    this.inheritedAttributes = {};
+    this.onFocus = () => {
+      this.ionFocus.emit();
+    };
+    this.onBlur = () => {
+      this.ionBlur.emit();
+    };
+    this.onClick = () => {
+      const { fab } = this;
+      if (!fab) {
+        return;
+      }
+      fab.toggle();
+    };
+    this.color = undefined;
+    this.activated = false;
+    this.disabled = false;
+    this.download = undefined;
+    this.href = undefined;
+    this.rel = undefined;
+    this.routerDirection = 'forward';
+    this.routerAnimation = undefined;
+    this.target = undefined;
+    this.show = false;
+    this.translucent = false;
+    this.type = 'button';
+    this.size = undefined;
+    this.closeIcon = close;
+  }
+  connectedCallback() {
+    this.fab = this.el.closest('ion-fab');
+  }
+  componentWillLoad() {
+    this.inheritedAttributes = inheritAriaAttributes(this.el);
+  }
+  render() {
+    const { el, disabled, color, href, activated, show, translucent, size, inheritedAttributes } = this;
+    const inList = hostContext('ion-fab-list', el);
+    const mode = getIonMode(this);
+    const TagType = href === undefined ? 'button' : 'a';
+    const attrs = TagType === 'button'
+      ? { type: this.type }
+      : {
+        download: this.download,
+        href,
+        rel: this.rel,
+        target: this.target,
+      };
+    return (h(Host, { key: '5b5e73a0236eabb3e994f0f33ee9ab6f75a12b24', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
+        [mode]: true,
+        'fab-button-in-list': inList,
+        'fab-button-translucent-in-list': inList && translucent,
+        'fab-button-close-active': activated,
+        'fab-button-show': show,
+        'fab-button-disabled': disabled,
+        'fab-button-translucent': translucent,
+        'ion-activatable': true,
+        'ion-focusable': true,
+        [`fab-button-${size}`]: size !== undefined,
+      }) }, h(TagType, Object.assign({ key: 'e3c85ff305b6790519543603401b85f294aabed1' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: (ev) => openURL(href, ev, this.routerDirection, this.routerAnimation) }, inheritedAttributes), h("ion-icon", { key: '39241f9fa051506717c8680e1b809dbf2e56f1a1', "aria-hidden": "true", icon: this.closeIcon, part: "close-icon", class: "close-icon", lazy: false }), h("span", { key: '03f0ec1c25352f3a5decb33ebc060b9043ab569e', class: "button-inner" }, h("slot", { key: '11c1a17bc0c54b840a96b96e03fffc23f0e64ff2' })), mode === 'md' && h("ion-ripple-effect", { key: '9b1642dba0beb3a22658ad0aead26b2ab57f0367' }))));
+  }
+  get el() { return getElement(this); }
 };
 FabButton.style = {
-    ios: fabButtonIosCss(),
-    md: fabButtonMdCss()
+  ios: fabButtonIosCss,
+  md: fabButtonMdCss
 };
 
 export { FabButton as ion_fab_button };

package/dist/esm/ion-fab-list.entry.js

@@ -1,37 +1,35 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-93OyAGoo.js';
-import { g as getIonMode } from './ionic-global-DXXzPLPc.js';
+import { r as registerInstance, h, H as Host, e as getElement } from './index-8cc94b11.js';
+import { g as getIonMode } from './ionic-global-0b7766cb.js';
 
-const fabListCss = () => `:host{margin-left:0;margin-right:0;margin-top:calc(100% + 10px);margin-bottom:calc(100% + 10px);display:none;position:absolute;top:0;flex-direction:column;align-items:center;min-width:56px;min-height:56px}:host(.fab-list-active){display:flex}::slotted(.fab-button-in-list){margin-left:0;margin-right:0;margin-top:8px;margin-bottom:8px;width:40px;height:40px;transform:scale(0);opacity:0;visibility:hidden}:host(.fab-list-side-top) ::slotted(.fab-button-in-list),:host(.fab-list-side-bottom) ::slotted(.fab-button-in-list){margin-left:0;margin-right:0;margin-top:5px;margin-bottom:5px}:host(.fab-list-side-start) ::slotted(.fab-button-in-list),:host(.fab-list-side-end) ::slotted(.fab-button-in-list){-webkit-margin-start:5px;margin-inline-start:5px;-webkit-margin-end:5px;margin-inline-end:5px;margin-top:0;margin-bottom:0}::slotted(.fab-button-in-list.fab-button-show){transform:scale(1);opacity:1;visibility:visible}:host(.fab-list-side-top){top:auto;bottom:0;flex-direction:column-reverse}:host(.fab-list-side-start){-webkit-margin-start:calc(100% + 10px);margin-inline-start:calc(100% + 10px);-webkit-margin-end:calc(100% + 10px);margin-inline-end:calc(100% + 10px);margin-top:0;margin-bottom:0;flex-direction:row-reverse}@supports (inset-inline-start: 0){:host(.fab-list-side-start){inset-inline-end:0}}@supports not (inset-inline-start: 0){:host(.fab-list-side-start){right:0}:host-context([dir=rtl]):host(.fab-list-side-start),:host-context([dir=rtl]).fab-list-side-start{left:unset;right:unset;left:0}@supports selector(:dir(rtl)){:host(.fab-list-side-start:dir(rtl)){left:unset;right:unset;left:0}}}:host(.fab-list-side-end){-webkit-margin-start:calc(100% + 10px);margin-inline-start:calc(100% + 10px);-webkit-margin-end:calc(100% + 10px);margin-inline-end:calc(100% + 10px);margin-top:0;margin-bottom:0;flex-direction:row}@supports (inset-inline-start: 0){:host(.fab-list-side-end){inset-inline-start:0}}@supports not (inset-inline-start: 0){:host(.fab-list-side-end){left:0}:host-context([dir=rtl]):host(.fab-list-side-end),:host-context([dir=rtl]).fab-list-side-end{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(.fab-list-side-end:dir(rtl)){left:unset;right:unset;right:0}}}`;
+const fabListCss = ":host{margin-left:0;margin-right:0;margin-top:calc(100% + 10px);margin-bottom:calc(100% + 10px);display:none;position:absolute;top:0;flex-direction:column;align-items:center;min-width:56px;min-height:56px}:host(.fab-list-active){display:flex}::slotted(.fab-button-in-list){margin-left:0;margin-right:0;margin-top:8px;margin-bottom:8px;width:40px;height:40px;transform:scale(0);opacity:0;visibility:hidden}:host(.fab-list-side-top) ::slotted(.fab-button-in-list),:host(.fab-list-side-bottom) ::slotted(.fab-button-in-list){margin-left:0;margin-right:0;margin-top:5px;margin-bottom:5px}:host(.fab-list-side-start) ::slotted(.fab-button-in-list),:host(.fab-list-side-end) ::slotted(.fab-button-in-list){-webkit-margin-start:5px;margin-inline-start:5px;-webkit-margin-end:5px;margin-inline-end:5px;margin-top:0;margin-bottom:0}::slotted(.fab-button-in-list.fab-button-show){transform:scale(1);opacity:1;visibility:visible}:host(.fab-list-side-top){top:auto;bottom:0;flex-direction:column-reverse}:host(.fab-list-side-start){-webkit-margin-start:calc(100% + 10px);margin-inline-start:calc(100% + 10px);-webkit-margin-end:calc(100% + 10px);margin-inline-end:calc(100% + 10px);margin-top:0;margin-bottom:0;flex-direction:row-reverse}@supports (inset-inline-start: 0){:host(.fab-list-side-start){inset-inline-end:0}}@supports not (inset-inline-start: 0){:host(.fab-list-side-start){right:0}:host-context([dir=rtl]):host(.fab-list-side-start),:host-context([dir=rtl]).fab-list-side-start{left:unset;right:unset;left:0}@supports selector(:dir(rtl)){:host(.fab-list-side-start:dir(rtl)){left:unset;right:unset;left:0}}}:host(.fab-list-side-end){-webkit-margin-start:calc(100% + 10px);margin-inline-start:calc(100% + 10px);-webkit-margin-end:calc(100% + 10px);margin-inline-end:calc(100% + 10px);margin-top:0;margin-bottom:0;flex-direction:row}@supports (inset-inline-start: 0){:host(.fab-list-side-end){inset-inline-start:0}}@supports not (inset-inline-start: 0){:host(.fab-list-side-end){left:0}:host-context([dir=rtl]):host(.fab-list-side-end),:host-context([dir=rtl]).fab-list-side-end{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(.fab-list-side-end:dir(rtl)){left:unset;right:unset;right:0}}}";
 
 const FabList = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.activated = false;
-        this.side = 'bottom';
-    }
-    activatedChanged(activated) {
-        const fabs = Array.from(this.el.querySelectorAll('ion-fab-button'));
-        // if showing the fabs add a timeout, else show immediately
-        const timeout = activated ? 30 : 0;
-        fabs.forEach((fab, i) => {
-            setTimeout(() => (fab.show = activated), i * timeout);
-        });
-    }
-    render() {
-        const mode = getIonMode(this);
-        return (h(Host, { key: '3de1b0db4eb0230d4d2954e4265ddeb3c930b4dc', class: {
-                [mode]: true,
-                'fab-list-active': this.activated,
-                [`fab-list-side-${this.side}`]: true,
-            } }, h("slot", { key: '970aac2239ad9ea2b6b6c3c3ea45a18c45b37df2' })));
-    }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "activated": [{
-                "activatedChanged": 0
-            }]
-    }; }
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.activated = false;
+    this.side = 'bottom';
+  }
+  activatedChanged(activated) {
+    const fabs = Array.from(this.el.querySelectorAll('ion-fab-button'));
+    // if showing the fabs add a timeout, else show immediately
+    const timeout = activated ? 30 : 0;
+    fabs.forEach((fab, i) => {
+      setTimeout(() => (fab.show = activated), i * timeout);
+    });
+  }
+  render() {
+    const mode = getIonMode(this);
+    return (h(Host, { key: '3de1b0db4eb0230d4d2954e4265ddeb3c930b4dc', class: {
+        [mode]: true,
+        'fab-list-active': this.activated,
+        [`fab-list-side-${this.side}`]: true,
+      } }, h("slot", { key: '970aac2239ad9ea2b6b6c3c3ea45a18c45b37df2' })));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "activated": ["activatedChanged"]
+  }; }
 };
-FabList.style = fabListCss();
+FabList.style = fabListCss;
 
 export { FabList as ion_fab_list };

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

@@ -1,67 +1,65 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-93OyAGoo.js';
-import { g as getIonMode } from './ionic-global-DXXzPLPc.js';
+import { r as registerInstance, h, H as Host, e as getElement } from './index-8cc94b11.js';
+import { g as getIonMode } from './ionic-global-0b7766cb.js';
 
-const fabCss = () => `:host{position:absolute;width:fit-content;height:fit-content;z-index:999}:host(.fab-horizontal-center){left:0px;right:0px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto}:host(.fab-horizontal-start){left:calc(10px + var(--ion-safe-area-left, 0px));}:host-context([dir=rtl]):host(.fab-horizontal-start),:host-context([dir=rtl]).fab-horizontal-start{right:calc(10px + var(--ion-safe-area-right, 0px));left:unset}@supports selector(:dir(rtl)){:host(.fab-horizontal-start:dir(rtl)){right:calc(10px + var(--ion-safe-area-right, 0px));left:unset}}:host(.fab-horizontal-end){right:calc(10px + var(--ion-safe-area-right, 0px));}:host-context([dir=rtl]):host(.fab-horizontal-end),:host-context([dir=rtl]).fab-horizontal-end{left:calc(10px + var(--ion-safe-area-left, 0px));right:unset}@supports selector(:dir(rtl)){:host(.fab-horizontal-end:dir(rtl)){left:calc(10px + var(--ion-safe-area-left, 0px));right:unset}}:host(.fab-vertical-top){top:10px}:host(.fab-vertical-top.fab-edge){top:0}:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-button){margin-top:-50%}:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-button.fab-button-small){margin-top:calc((-100% + 16px) / 2)}:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-list.fab-list-side-start),:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-list.fab-list-side-end){margin-top:-50%}:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-list.fab-list-side-top),:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-list.fab-list-side-bottom){margin-top:calc(50% + 10px)}:host(.fab-vertical-bottom){bottom:10px}:host(.fab-vertical-bottom.fab-edge){bottom:0}:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-button){margin-bottom:-50%}:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-button.fab-button-small){margin-bottom:calc((-100% + 16px) / 2)}:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-list.fab-list-side-start),:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-list.fab-list-side-end){margin-bottom:-50%}:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-list.fab-list-side-top),:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-list.fab-list-side-bottom){margin-bottom:calc(50% + 10px)}:host(.fab-vertical-center){top:0px;bottom:0px;margin-top:auto;margin-bottom:auto}`;
+const fabCss = ":host{position:absolute;width:fit-content;height:fit-content;z-index:999}:host(.fab-horizontal-center){left:0px;right:0px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto}:host(.fab-horizontal-start){left:calc(10px + var(--ion-safe-area-left, 0px));}:host-context([dir=rtl]):host(.fab-horizontal-start),:host-context([dir=rtl]).fab-horizontal-start{right:calc(10px + var(--ion-safe-area-right, 0px));left:unset}@supports selector(:dir(rtl)){:host(.fab-horizontal-start:dir(rtl)){right:calc(10px + var(--ion-safe-area-right, 0px));left:unset}}:host(.fab-horizontal-end){right:calc(10px + var(--ion-safe-area-right, 0px));}:host-context([dir=rtl]):host(.fab-horizontal-end),:host-context([dir=rtl]).fab-horizontal-end{left:calc(10px + var(--ion-safe-area-left, 0px));right:unset}@supports selector(:dir(rtl)){:host(.fab-horizontal-end:dir(rtl)){left:calc(10px + var(--ion-safe-area-left, 0px));right:unset}}:host(.fab-vertical-top){top:10px}:host(.fab-vertical-top.fab-edge){top:0}:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-button){margin-top:-50%}:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-button.fab-button-small){margin-top:calc((-100% + 16px) / 2)}:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-list.fab-list-side-start),:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-list.fab-list-side-end){margin-top:-50%}:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-list.fab-list-side-top),:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-list.fab-list-side-bottom){margin-top:calc(50% + 10px)}:host(.fab-vertical-bottom){bottom:10px}:host(.fab-vertical-bottom.fab-edge){bottom:0}:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-button){margin-bottom:-50%}:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-button.fab-button-small){margin-bottom:calc((-100% + 16px) / 2)}:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-list.fab-list-side-start),:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-list.fab-list-side-end){margin-bottom:-50%}:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-list.fab-list-side-top),:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-list.fab-list-side-bottom){margin-bottom:calc(50% + 10px)}:host(.fab-vertical-center){top:0px;bottom:0px;margin-top:auto;margin-bottom:auto}";
 
 const Fab = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.horizontal = undefined;
-        this.vertical = undefined;
-        this.edge = false;
-        this.activated = false;
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.horizontal = undefined;
+    this.vertical = undefined;
+    this.edge = false;
+    this.activated = false;
+  }
+  activatedChanged() {
+    const activated = this.activated;
+    const fab = this.getFab();
+    if (fab) {
+      fab.activated = activated;
     }
-    activatedChanged() {
-        const activated = this.activated;
-        const fab = this.getFab();
-        if (fab) {
-            fab.activated = activated;
-        }
-        Array.from(this.el.querySelectorAll('ion-fab-list')).forEach((list) => {
-            list.activated = activated;
-        });
+    Array.from(this.el.querySelectorAll('ion-fab-list')).forEach((list) => {
+      list.activated = activated;
+    });
+  }
+  componentDidLoad() {
+    if (this.activated) {
+      this.activatedChanged();
     }
-    componentDidLoad() {
-        if (this.activated) {
-            this.activatedChanged();
-        }
+  }
+  /**
+   * Close an active FAB list container.
+   */
+  async close() {
+    this.activated = false;
+  }
+  getFab() {
+    return this.el.querySelector('ion-fab-button');
+  }
+  /**
+   * Opens/Closes the FAB list container.
+   * @internal
+   */
+  async toggle() {
+    const hasList = !!this.el.querySelector('ion-fab-list');
+    if (hasList) {
+      this.activated = !this.activated;
     }
-    /**
-     * Close an active FAB list container.
-     */
-    async close() {
-        this.activated = false;
-    }
-    getFab() {
-        return this.el.querySelector('ion-fab-button');
-    }
-    /**
-     * Opens/Closes the FAB list container.
-     * @internal
-     */
-    async toggle() {
-        const hasList = !!this.el.querySelector('ion-fab-list');
-        if (hasList) {
-            this.activated = !this.activated;
-        }
-    }
-    render() {
-        const { horizontal, vertical, edge } = this;
-        const mode = getIonMode(this);
-        return (h(Host, { key: '71df1068c3a2739a69d3571c2fe9bdf401a252cb', class: {
-                [mode]: true,
-                [`fab-horizontal-${horizontal}`]: horizontal !== undefined,
-                [`fab-vertical-${vertical}`]: vertical !== undefined,
-                'fab-edge': edge,
-            } }, h("slot", { key: 'c3afd4a009d355d664f8c04057acf86196bda844' })));
-    }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "activated": [{
-                "activatedChanged": 0
-            }]
-    }; }
+  }
+  render() {
+    const { horizontal, vertical, edge } = this;
+    const mode = getIonMode(this);
+    return (h(Host, { key: '71df1068c3a2739a69d3571c2fe9bdf401a252cb', class: {
+        [mode]: true,
+        [`fab-horizontal-${horizontal}`]: horizontal !== undefined,
+        [`fab-vertical-${vertical}`]: vertical !== undefined,
+        'fab-edge': edge,
+      } }, h("slot", { key: 'c3afd4a009d355d664f8c04057acf86196bda844' })));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "activated": ["activatedChanged"]
+  }; }
 };
-Fab.style = fabCss();
+Fab.style = fabCss;
 
 export { Fab as ion_fab };

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

@@ -1,12 +1,12 @@
-import { a as readTask, w as writeTask, r as registerInstance, h, H as Host, g as getElement } from './index-93OyAGoo.js';
-import { b as findIonContent, p as printIonContentErrorMsg, g as getScrollElement } from './index-BMJhFU53.js';
-import { c as createKeyboardController } from './keyboard-controller-CqGCg8tB.js';
-import { g as getIonMode } from './ionic-global-DXXzPLPc.js';
-import { e as clamp } from './helpers-C6kqtbmV.js';
-import './index-D8d_89Nl.js';
-import './index-ZjP4CjeZ.js';
-import './keyboard-DgiyREKb.js';
-import './capacitor-CG3xQUND.js';
+import { f as readTask, w as writeTask, r as registerInstance, h, H as Host, e as getElement } from './index-8cc94b11.js';
+import { f as findIonContent, p as printIonContentErrorMsg, g as getScrollElement } from './index-5e663431.js';
+import { c as createKeyboardController } from './keyboard-controller-5a2f625f.js';
+import { g as getIonMode } from './ionic-global-0b7766cb.js';
+import { k as clamp } from './helpers-f0dcbd72.js';
+import './index-d9b41a43.js';
+import './index-fb97e55c.js';
+import './keyboard-1f073554.js';
+import './capacitor-ba4337da.js';
 
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
@@ -40,97 +40,97 @@ const handleFooterFade = (scrollEl, baseEl) => {
     });
 };
 
-const footerIosCss = () => `ion-footer{display:block;position:relative;order:1;width:100%;z-index:10}ion-footer.footer-toolbar-padding ion-toolbar:last-of-type{padding-bottom:var(--ion-safe-area-bottom, 0)}.footer-ios ion-toolbar:first-of-type{--border-width:0.55px 0 0}@supports (backdrop-filter: blur(0)){.footer-background{left:0;right:0;top:0;bottom:0;position:absolute;backdrop-filter:saturate(180%) blur(20px)}.footer-translucent-ios ion-toolbar{--opacity:.8}}.footer-ios.ion-no-border ion-toolbar:first-of-type{--border-width:0}.footer-collapse-fade ion-toolbar{--opacity-scale:inherit}`;
+const footerIosCss = "ion-footer{display:block;position:relative;order:1;width:100%;z-index:10}ion-footer.footer-toolbar-padding ion-toolbar:last-of-type{padding-bottom:var(--ion-safe-area-bottom, 0)}.footer-ios ion-toolbar:first-of-type{--border-width:0.55px 0 0}@supports (backdrop-filter: blur(0)){.footer-background{left:0;right:0;top:0;bottom:0;position:absolute;backdrop-filter:saturate(180%) blur(20px)}.footer-translucent-ios ion-toolbar{--opacity:.8}}.footer-ios.ion-no-border ion-toolbar:first-of-type{--border-width:0}.footer-collapse-fade ion-toolbar{--opacity-scale:inherit}";
 
-const footerMdCss = () => `ion-footer{display:block;position:relative;order:1;width:100%;z-index:10}ion-footer.footer-toolbar-padding ion-toolbar:last-of-type{padding-bottom:var(--ion-safe-area-bottom, 0)}.footer-md{box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12)}.footer-md.ion-no-border{box-shadow:none}`;
+const footerMdCss = "ion-footer{display:block;position:relative;order:1;width:100%;z-index:10}ion-footer.footer-toolbar-padding ion-toolbar:last-of-type{padding-bottom:var(--ion-safe-area-bottom, 0)}.footer-md{box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12)}.footer-md.ion-no-border{box-shadow:none}";
 
 const Footer = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.keyboardCtrl = null;
-        this.checkCollapsibleFooter = () => {
-            const mode = getIonMode(this);
-            if (mode !== 'ios') {
-                return;
-            }
-            const { collapse } = this;
-            const hasFade = collapse === 'fade';
-            this.destroyCollapsibleFooter();
-            if (hasFade) {
-                const pageEl = this.el.closest('ion-app,ion-page,.ion-page,page-inner');
-                const contentEl = pageEl ? findIonContent(pageEl) : null;
-                if (!contentEl) {
-                    printIonContentErrorMsg(this.el);
-                    return;
-                }
-                this.setupFadeFooter(contentEl);
-            }
-        };
-        this.setupFadeFooter = async (contentEl) => {
-            const scrollEl = (this.scrollEl = await getScrollElement(contentEl));
-            /**
-             * Handle fading of toolbars on scroll
-             */
-            this.contentScrollCallback = () => {
-                handleFooterFade(scrollEl, this.el);
-            };
-            scrollEl.addEventListener('scroll', this.contentScrollCallback);
-            handleFooterFade(scrollEl, this.el);
-        };
-        this.keyboardVisible = false;
-        this.collapse = undefined;
-        this.translucent = false;
-    }
-    componentDidLoad() {
-        this.checkCollapsibleFooter();
-    }
-    componentDidUpdate() {
-        this.checkCollapsibleFooter();
-    }
-    async connectedCallback() {
-        this.keyboardCtrl = await createKeyboardController(async (keyboardOpen, waitForResize) => {
-            /**
-             * If the keyboard is hiding, then we need to wait
-             * for the webview to resize. Otherwise, the footer
-             * will flicker before the webview resizes.
-             */
-            if (keyboardOpen === false && waitForResize !== undefined) {
-                await waitForResize;
-            }
-            this.keyboardVisible = keyboardOpen; // trigger re-render by updating state
-        });
-    }
-    disconnectedCallback() {
-        if (this.keyboardCtrl) {
-            this.keyboardCtrl.destroy();
-        }
-    }
-    destroyCollapsibleFooter() {
-        if (this.scrollEl && this.contentScrollCallback) {
-            this.scrollEl.removeEventListener('scroll', this.contentScrollCallback);
-            this.contentScrollCallback = undefined;
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.keyboardCtrl = null;
+    this.checkCollapsibleFooter = () => {
+      const mode = getIonMode(this);
+      if (mode !== 'ios') {
+        return;
+      }
+      const { collapse } = this;
+      const hasFade = collapse === 'fade';
+      this.destroyCollapsibleFooter();
+      if (hasFade) {
+        const pageEl = this.el.closest('ion-app,ion-page,.ion-page,page-inner');
+        const contentEl = pageEl ? findIonContent(pageEl) : null;
+        if (!contentEl) {
+          printIonContentErrorMsg(this.el);
+          return;
         }
+        this.setupFadeFooter(contentEl);
+      }
+    };
+    this.setupFadeFooter = async (contentEl) => {
+      const scrollEl = (this.scrollEl = await getScrollElement(contentEl));
+      /**
+       * Handle fading of toolbars on scroll
+       */
+      this.contentScrollCallback = () => {
+        handleFooterFade(scrollEl, this.el);
+      };
+      scrollEl.addEventListener('scroll', this.contentScrollCallback);
+      handleFooterFade(scrollEl, this.el);
+    };
+    this.keyboardVisible = false;
+    this.collapse = undefined;
+    this.translucent = false;
+  }
+  componentDidLoad() {
+    this.checkCollapsibleFooter();
+  }
+  componentDidUpdate() {
+    this.checkCollapsibleFooter();
+  }
+  async connectedCallback() {
+    this.keyboardCtrl = await createKeyboardController(async (keyboardOpen, waitForResize) => {
+      /**
+       * If the keyboard is hiding, then we need to wait
+       * for the webview to resize. Otherwise, the footer
+       * will flicker before the webview resizes.
+       */
+      if (keyboardOpen === false && waitForResize !== undefined) {
+        await waitForResize;
+      }
+      this.keyboardVisible = keyboardOpen; // trigger re-render by updating state
+    });
+  }
+  disconnectedCallback() {
+    if (this.keyboardCtrl) {
+      this.keyboardCtrl.destroy();
     }
-    render() {
-        const { translucent, collapse } = this;
-        const mode = getIonMode(this);
-        const tabs = this.el.closest('ion-tabs');
-        const tabBar = tabs === null || tabs === void 0 ? void 0 : tabs.querySelector(':scope > ion-tab-bar');
-        return (h(Host, { key: 'dd8fa96901e8a09759a9621b6513f0492b3a6197', role: "contentinfo", class: {
-                [mode]: true,
-                // Used internally for styling
-                [`footer-${mode}`]: true,
-                [`footer-translucent`]: translucent,
-                [`footer-translucent-${mode}`]: translucent,
-                ['footer-toolbar-padding']: !this.keyboardVisible && (!tabBar || tabBar.slot !== 'bottom'),
-                [`footer-collapse-${collapse}`]: collapse !== undefined,
-            } }, mode === 'ios' && translucent && h("div", { key: '0fbb4ebf8e3951ff399f843dc11aab37fc48f8b7', class: "footer-background" }), h("slot", { key: 'ecb14a65e3b6960670446c4428e3095b3231a3b0' })));
+  }
+  destroyCollapsibleFooter() {
+    if (this.scrollEl && this.contentScrollCallback) {
+      this.scrollEl.removeEventListener('scroll', this.contentScrollCallback);
+      this.contentScrollCallback = undefined;
     }
-    get el() { return getElement(this); }
+  }
+  render() {
+    const { translucent, collapse } = this;
+    const mode = getIonMode(this);
+    const tabs = this.el.closest('ion-tabs');
+    const tabBar = tabs === null || tabs === void 0 ? void 0 : tabs.querySelector(':scope > ion-tab-bar');
+    return (h(Host, { key: 'dd8fa96901e8a09759a9621b6513f0492b3a6197', role: "contentinfo", class: {
+        [mode]: true,
+        // Used internally for styling
+        [`footer-${mode}`]: true,
+        [`footer-translucent`]: translucent,
+        [`footer-translucent-${mode}`]: translucent,
+        ['footer-toolbar-padding']: !this.keyboardVisible && (!tabBar || tabBar.slot !== 'bottom'),
+        [`footer-collapse-${collapse}`]: collapse !== undefined,
+      } }, mode === 'ios' && translucent && h("div", { key: '0fbb4ebf8e3951ff399f843dc11aab37fc48f8b7', class: "footer-background" }), h("slot", { key: 'ecb14a65e3b6960670446c4428e3095b3231a3b0' })));
+  }
+  get el() { return getElement(this); }
 };
 Footer.style = {
-    ios: footerIosCss(),
-    md: footerMdCss()
+  ios: footerIosCss,
+  md: footerMdCss
 };
 
 export { Footer as ion_footer };