@ionic/core 9.0.0 → 9.0.1-nightly.20260820

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

@@ -1,18 +1,18 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { r as registerInstance, c as createEvent, g as getElement, f as printIonWarning, h, d as Host } from './index-ChhhtsGZ.js';
-import { h as prepareOverlay, j as cleanupRootFocusTrapAccessibility, k as setOverlayId, e as present, n as focusFirstDescendant, f as dismiss, g as eventMethod, B as BACKDROP, F as FOCUS_TRAP_DISABLE_CLASS } from './overlays-CPmIs9Ls.js';
-import { C as CoreDelegate, a as attachComponent, d as detachComponent } from './framework-delegate-BHTU2Ip9.js';
-import { g as getElementRoot, r as raf, f as addEventListener, h as hasLazyBuild } from './helpers-CAGf8Wgp.js';
+import { r as registerInstance, c as createEvent, f as printIonWarning, h, d as Host, g as getElement } from './index-CKYcsw8f.js';
+import { B as BACKDROP, h as prepareOverlay, j as cleanupRootFocusTrapAccessibility, k as setOverlayId, e as present, n as focusFirstDescendant, f as dismiss, g as eventMethod, F as FOCUS_TRAP_DISABLE_CLASS } from './overlays-BpnIFlXI.js';
+import { C as CoreDelegate, a as attachComponent, d as detachComponent } from './framework-delegate-DaLWnISz.js';
+import { g as getElementRoot, r as raf, f as addEventListener, h as hasLazyBuild } from './helpers-BIgoInJU.js';
 import { c as createLockController } from './lock-controller-B-hirT0v.js';
-import { b as getIonMode, a as isPlatform } from './ionic-global-BVB7BrLT.js';
+import { b as getIonMode, a as isPlatform } from './ionic-global-lrowsHfi.js';
 import { g as getClassMap } from './theme-byZM6qHV.js';
-import { e as deepReady, w as waitForMount } from './index-WlteAIqz.js';
-import { c as createAnimation } from './animation-CGFdmGk9.js';
+import { e as deepReady, w as waitForMount } from './index-C8Dsa6li.js';
+import { c as createAnimation } from './animation-TxGPYeDn.js';
 import './index-ZjP4CjeZ.js';
-import './hardware-back-button-gLJHMX_F.js';
-import './gesture-controller-TXPDHL13.js';
+import './hardware-back-button-D8W4L0JP.js';
+import './gesture-controller-B_gJaBk0.js';
 import './dir-Dojwmvde.js';
 
 /**
@@ -1101,183 +1101,181 @@ const Popover = class {
         this.willDismissShorthand = createEvent(this, "willDismiss", 7);
         this.didDismissShorthand = createEvent(this, "didDismiss", 7);
         this.ionMount = createEvent(this, "ionMount", 7);
+        this.parentPopover = null;
+        this.coreDelegate = CoreDelegate();
+        this.lockController = createLockController();
+        this.inline = false;
+        this.focusDescendantOnPresent = false;
+        this.presented = false;
+        /** @internal */
+        this.hasController = false;
+        /**
+         * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
+         */
+        this.keyboardClose = true;
+        /**
+         * If `true`, the popover will be dismissed when the backdrop is clicked.
+         */
+        this.backdropDismiss = true;
+        /**
+         * If `true`, a backdrop will be displayed behind the popover.
+         * This property controls whether or not the backdrop
+         * darkens the screen when the popover is presented.
+         * It does not control whether or not the backdrop
+         * is active or present in the DOM.
+         */
+        this.showBackdrop = true;
+        /**
+         * If `true`, the popover will be translucent.
+         * Only applies when the mode is `"ios"` and the device supports
+         * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
+         */
+        this.translucent = false;
+        /**
+         * If `true`, the popover will animate.
+         */
+        this.animated = true;
+        /**
+         * Describes what kind of interaction with the trigger that
+         * should cause the popover to open. Does not apply when the `trigger`
+         * property is `undefined`.
+         * If `"click"`, the popover will be presented when the trigger is left clicked.
+         * If `"hover"`, the popover will be presented when a pointer hovers over the trigger.
+         * If `"context-menu"`, the popover will be presented when the trigger is right
+         * clicked on desktop and long pressed on mobile. This will also prevent your
+         * device's normal context menu from appearing.
+         */
+        this.triggerAction = 'click';
+        /**
+         * Describes how to calculate the popover width.
+         * If `"cover"`, the popover width will match the width of the trigger.
+         * If `"auto"`, the popover width will be set to a static default value.
+         */
+        this.size = 'auto';
+        /**
+         * If `true`, the popover will be automatically
+         * dismissed when the content has been clicked.
+         */
+        this.dismissOnSelect = false;
+        /**
+         * Describes what to position the popover relative to.
+         * If `"trigger"`, the popover will be positioned relative
+         * to the trigger button. If passing in an event, this is
+         * determined via event.target.
+         * If `"event"`, the popover will be positioned relative
+         * to the x/y coordinates of the trigger action. If passing
+         * in an event, this is determined via event.clientX and event.clientY.
+         */
+        this.reference = 'trigger';
+        /**
+         * Describes which side of the `reference` point to position
+         * the popover on. The `"start"` and `"end"` values are RTL-aware,
+         * and the `"left"` and `"right"` values are not.
+         */
+        this.side = 'bottom';
+        /**
+         * If `true`, the popover will display an arrow that points at the
+         * `reference` when running in `ios` mode. Does not apply in `md` mode.
+         */
+        this.arrow = true;
+        /**
+         * If `true`, the popover will open. If `false`, the popover will close.
+         * Use this if you need finer grained control over presentation, otherwise
+         * just use the popoverController or the `trigger` property.
+         * Note: `isOpen` will not automatically be set back to `false` when
+         * the popover dismisses. You will need to do that in your code.
+         */
+        this.isOpen = false;
+        /**
+         * @internal
+         *
+         * If `true` the popover will not register its own keyboard event handlers.
+         * This allows the contents of the popover to handle their own keyboard interactions.
+         *
+         * If `false`, the popover will register its own keyboard event handlers for
+         * navigating `ion-list` items within a popover (up/down/home/end/etc.).
+         * This will also cancel browser keyboard event bindings to prevent scroll
+         * behavior in a popover using a list of items.
+         */
+        this.keyboardEvents = false;
+        /**
+         * If `true`, focus will not be allowed to move outside of this overlay.
+         * If `false`, focus will be allowed to move outside of the overlay.
+         *
+         * In most scenarios this property should remain set to `true`. Setting
+         * this property to `false` can cause severe accessibility issues as users
+         * relying on assistive technologies may be able to move focus into
+         * a confusing state. We recommend only setting this to `false` when
+         * absolutely necessary.
+         *
+         * Developers may want to consider disabling focus trapping if this
+         * overlay presents a non-Ionic overlay from a 3rd party library.
+         * Developers would disable focus trapping on the Ionic overlay
+         * when presenting the 3rd party overlay and then re-enable
+         * focus trapping when dismissing the 3rd party overlay and moving
+         * focus back to the Ionic overlay.
+         */
+        this.focusTrap = true;
+        /**
+         * If `true`, the component passed into `ion-popover` will
+         * automatically be mounted when the popover is created. The
+         * component will remain mounted even when the popover is dismissed.
+         * However, the component will be destroyed when the popover is
+         * destroyed. This property is not reactive and should only be
+         * used when initially creating a popover.
+         *
+         * Note: This feature only applies to inline popovers in JavaScript
+         * frameworks such as Angular, React, and Vue.
+         */
+        this.keepContentsMounted = false;
+        this.onBackdropTap = () => {
+            this.dismiss(undefined, BACKDROP);
+        };
+        this.onLifecycle = (modalEvent) => {
+            const el = this.usersElement;
+            const name = LIFECYCLE_MAP[modalEvent.type];
+            if (el && name) {
+                const event = new CustomEvent(name, {
+                    bubbles: false,
+                    cancelable: false,
+                    detail: modalEvent.detail,
+                });
+                el.dispatchEvent(event);
+            }
+        };
+        this.configureTriggerInteraction = () => {
+            const { trigger, triggerAction, el, destroyTriggerInteraction } = this;
+            if (destroyTriggerInteraction) {
+                destroyTriggerInteraction();
+            }
+            if (trigger === undefined) {
+                return;
+            }
+            const triggerEl = (this.triggerEl = trigger !== undefined ? document.getElementById(trigger) : null);
+            if (!triggerEl) {
+                printIonWarning(`[ion-popover] - A trigger element with the ID "${trigger}" was not found in the DOM. The trigger element must be in the DOM when the "trigger" property is set on ion-popover.`, this.el);
+                return;
+            }
+            this.destroyTriggerInteraction = configureTriggerInteraction(triggerEl, triggerAction, el);
+        };
+        this.configureKeyboardInteraction = () => {
+            const { destroyKeyboardInteraction, el } = this;
+            if (destroyKeyboardInteraction) {
+                destroyKeyboardInteraction();
+            }
+            this.destroyKeyboardInteraction = configureKeyboardInteraction(el);
+        };
+        this.configureDismissInteraction = () => {
+            const { destroyDismissInteraction, parentPopover, triggerAction, triggerEl, el } = this;
+            if (!parentPopover || !triggerEl) {
+                return;
+            }
+            if (destroyDismissInteraction) {
+                destroyDismissInteraction();
+            }
+            this.destroyDismissInteraction = configureDismissInteraction(triggerEl, triggerAction, el, parentPopover);
+        };
     }
-    usersElement;
-    triggerEl;
-    parentPopover = null;
-    coreDelegate = CoreDelegate();
-    lockController = createLockController();
-    destroyTriggerInteraction;
-    destroyKeyboardInteraction;
-    destroyDismissInteraction;
-    headerResizeObserver;
-    inline = false;
-    workingDelegate;
-    focusDescendantOnPresent = false;
-    lastFocus;
-    presented = false;
-    get el() { return getElement(this); }
-    /** @internal */
-    hasController = false;
-    /** @internal */
-    delegate;
-    /** @internal */
-    overlayIndex;
-    /**
-     * Animation to use when the popover is presented.
-     */
-    enterAnimation;
-    /**
-     * Animation to use when the popover is dismissed.
-     */
-    leaveAnimation;
-    /**
-     * The component to display inside of the popover.
-     * You only need to use this if you are not using
-     * a JavaScript framework. Otherwise, you can just
-     * slot your component inside of `ion-popover`.
-     */
-    component;
-    /**
-     * The data to pass to the popover component.
-     * You only need to use this if you are not using
-     * a JavaScript framework. Otherwise, you can just
-     * set the props directly on your component.
-     */
-    componentProps;
-    /**
-     * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
-     */
-    keyboardClose = true;
-    /**
-     * Additional classes to apply for custom CSS. If multiple classes are
-     * provided they should be separated by spaces.
-     * @internal
-     */
-    cssClass;
-    /**
-     * If `true`, the popover will be dismissed when the backdrop is clicked.
-     */
-    backdropDismiss = true;
-    /**
-     * The event to pass to the popover animation.
-     */
-    event;
-    /**
-     * If `true`, a backdrop will be displayed behind the popover.
-     * This property controls whether or not the backdrop
-     * darkens the screen when the popover is presented.
-     * It does not control whether or not the backdrop
-     * is active or present in the DOM.
-     */
-    showBackdrop = true;
-    /**
-     * If `true`, the popover will be translucent.
-     * Only applies when the mode is `"ios"` and the device supports
-     * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
-     */
-    translucent = false;
-    /**
-     * If `true`, the popover will animate.
-     */
-    animated = true;
-    /**
-     * Additional attributes to pass to the popover.
-     */
-    htmlAttributes;
-    /**
-     * Describes what kind of interaction with the trigger that
-     * should cause the popover to open. Does not apply when the `trigger`
-     * property is `undefined`.
-     * If `"click"`, the popover will be presented when the trigger is left clicked.
-     * If `"hover"`, the popover will be presented when a pointer hovers over the trigger.
-     * If `"context-menu"`, the popover will be presented when the trigger is right
-     * clicked on desktop and long pressed on mobile. This will also prevent your
-     * device's normal context menu from appearing.
-     */
-    triggerAction = 'click';
-    /**
-     * An ID corresponding to the trigger element that
-     * causes the popover to open. Use the `trigger-action`
-     * property to customize the interaction that results in
-     * the popover opening.
-     */
-    trigger;
-    /**
-     * Describes how to calculate the popover width.
-     * If `"cover"`, the popover width will match the width of the trigger.
-     * If `"auto"`, the popover width will be set to a static default value.
-     */
-    size = 'auto';
-    /**
-     * If `true`, the popover will be automatically
-     * dismissed when the content has been clicked.
-     */
-    dismissOnSelect = false;
-    /**
-     * Describes what to position the popover relative to.
-     * If `"trigger"`, the popover will be positioned relative
-     * to the trigger button. If passing in an event, this is
-     * determined via event.target.
-     * If `"event"`, the popover will be positioned relative
-     * to the x/y coordinates of the trigger action. If passing
-     * in an event, this is determined via event.clientX and event.clientY.
-     */
-    reference = 'trigger';
-    /**
-     * Describes which side of the `reference` point to position
-     * the popover on. The `"start"` and `"end"` values are RTL-aware,
-     * and the `"left"` and `"right"` values are not.
-     */
-    side = 'bottom';
-    /**
-     * Describes how to align the popover content with the `reference` point.
-     * Defaults to `"center"` for `ios` mode, and `"start"` for `md` mode.
-     */
-    alignment;
-    /**
-     * If `true`, the popover will display an arrow that points at the
-     * `reference` when running in `ios` mode. Does not apply in `md` mode.
-     */
-    arrow = true;
-    /**
-     * If `true`, the popover will open. If `false`, the popover will close.
-     * Use this if you need finer grained control over presentation, otherwise
-     * just use the popoverController or the `trigger` property.
-     * Note: `isOpen` will not automatically be set back to `false` when
-     * the popover dismisses. You will need to do that in your code.
-     */
-    isOpen = false;
-    /**
-     * @internal
-     *
-     * If `true` the popover will not register its own keyboard event handlers.
-     * This allows the contents of the popover to handle their own keyboard interactions.
-     *
-     * If `false`, the popover will register its own keyboard event handlers for
-     * navigating `ion-list` items within a popover (up/down/home/end/etc.).
-     * This will also cancel browser keyboard event bindings to prevent scroll
-     * behavior in a popover using a list of items.
-     */
-    keyboardEvents = false;
-    /**
-     * If `true`, focus will not be allowed to move outside of this overlay.
-     * If `false`, focus will be allowed to move outside of the overlay.
-     *
-     * In most scenarios this property should remain set to `true`. Setting
-     * this property to `false` can cause severe accessibility issues as users
-     * relying on assistive technologies may be able to move focus into
-     * a confusing state. We recommend only setting this to `false` when
-     * absolutely necessary.
-     *
-     * Developers may want to consider disabling focus trapping if this
-     * overlay presents a non-Ionic overlay from a 3rd party library.
-     * Developers would disable focus trapping on the Ionic overlay
-     * when presenting the 3rd party overlay and then re-enable
-     * focus trapping when dismissing the 3rd party overlay and moving
-     * focus back to the Ionic overlay.
-     */
-    focusTrap = true;
     onTriggerChange() {
         this.configureTriggerInteraction();
     }
@@ -1289,66 +1287,6 @@ const Popover = class {
             this.dismiss();
         }
     }
-    /**
-     * If `true`, the component passed into `ion-popover` will
-     * automatically be mounted when the popover is created. The
-     * component will remain mounted even when the popover is dismissed.
-     * However, the component will be destroyed when the popover is
-     * destroyed. This property is not reactive and should only be
-     * used when initially creating a popover.
-     *
-     * Note: This feature only applies to inline popovers in JavaScript
-     * frameworks such as Angular, React, and Vue.
-     */
-    keepContentsMounted = false;
-    /**
-     * Emitted after the popover has presented.
-     */
-    didPresent;
-    /**
-     * Emitted before the popover has presented.
-     */
-    willPresent;
-    /**
-     * Emitted before the popover has dismissed.
-     */
-    willDismiss;
-    /**
-     * Emitted after the popover has dismissed.
-     */
-    didDismiss;
-    /**
-     * Emitted after the popover has presented.
-     * Shorthand for ionPopoverWillDismiss.
-     */
-    didPresentShorthand;
-    /**
-     * Emitted before the popover has presented.
-     * Shorthand for ionPopoverWillPresent.
-     */
-    willPresentShorthand;
-    /**
-     * Emitted before the popover has dismissed.
-     * Shorthand for ionPopoverWillDismiss.
-     */
-    willDismissShorthand;
-    /**
-     * Emitted after the popover has dismissed.
-     * Shorthand for ionPopoverDidDismiss.
-     */
-    didDismissShorthand;
-    /**
-     * Emitted before the popover has presented, but after the component
-     * has been mounted in the DOM.
-     * This event exists for ion-popover to resolve an issue with the
-     * popover and the lazy build, that the transition is unable to get
-     * the correct dimensions of the popover with auto sizing.
-     * This is not required for other overlays, since the existing
-     * overlay transitions are not effected by auto sizing content.
-     *
-     * @internal
-     */
-    ionMount;
     connectedCallback() {
         const { configureTriggerInteraction, el } = this;
         prepareOverlay(el);
@@ -1597,53 +1535,6 @@ const Popover = class {
     onWillDismiss() {
         return eventMethod(this.el, 'ionPopoverWillDismiss');
     }
-    onBackdropTap = () => {
-        this.dismiss(undefined, BACKDROP);
-    };
-    onLifecycle = (modalEvent) => {
-        const el = this.usersElement;
-        const name = LIFECYCLE_MAP[modalEvent.type];
-        if (el && name) {
-            const event = new CustomEvent(name, {
-                bubbles: false,
-                cancelable: false,
-                detail: modalEvent.detail,
-            });
-            el.dispatchEvent(event);
-        }
-    };
-    configureTriggerInteraction = () => {
-        const { trigger, triggerAction, el, destroyTriggerInteraction } = this;
-        if (destroyTriggerInteraction) {
-            destroyTriggerInteraction();
-        }
-        if (trigger === undefined) {
-            return;
-        }
-        const triggerEl = (this.triggerEl = trigger !== undefined ? document.getElementById(trigger) : null);
-        if (!triggerEl) {
-            printIonWarning(`[ion-popover] - A trigger element with the ID "${trigger}" was not found in the DOM. The trigger element must be in the DOM when the "trigger" property is set on ion-popover.`, this.el);
-            return;
-        }
-        this.destroyTriggerInteraction = configureTriggerInteraction(triggerEl, triggerAction, el);
-    };
-    configureKeyboardInteraction = () => {
-        const { destroyKeyboardInteraction, el } = this;
-        if (destroyKeyboardInteraction) {
-            destroyKeyboardInteraction();
-        }
-        this.destroyKeyboardInteraction = configureKeyboardInteraction(el);
-    };
-    configureDismissInteraction = () => {
-        const { destroyDismissInteraction, parentPopover, triggerAction, triggerEl, el } = this;
-        if (!parentPopover || !triggerEl) {
-            return;
-        }
-        if (destroyDismissInteraction) {
-            destroyDismissInteraction();
-        }
-        this.destroyDismissInteraction = configureDismissInteraction(triggerEl, triggerAction, el, parentPopover);
-    };
     render() {
         const mode = getIonMode(this);
         const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
@@ -1662,6 +1553,7 @@ const Popover = class {
                 'popover-nested': !!parentPopover,
             }, onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }, !parentPopover && h("ion-backdrop", { key: '79a8e851dbd22119e21ffb2f4709c555251045c8', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: 'c46c9f62c3ef3f902e23f27404eaa446a5d8cf88', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { key: '9fdcbbc4ea6c7bde74f646d48eb77296b2c9dd83', class: "popover-arrow", part: "arrow" }), h("div", { key: '138e56bb83462ebb0908edb522b45ecf94b82aeb', class: "popover-content", part: "content" }, h("slot", { key: 'daeefcf002e8d89e91d6e0faf7f63f75b68a2dbe' })))));
     }
+    get el() { return getElement(this); }
     static get watchers() { return {
         "trigger": [{
                 "onTriggerChange": 0

package/dist/esm/ion-progress-bar.entry.js

@@ -1,10 +1,10 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { r as registerInstance, e as config, h, d as Host } from './index-ChhhtsGZ.js';
-import { e as clamp } from './helpers-CAGf8Wgp.js';
+import { r as registerInstance, e as config, h, d as Host } from './index-CKYcsw8f.js';
+import { e as clamp } from './helpers-BIgoInJU.js';
 import { c as createColorClasses } from './theme-byZM6qHV.js';
-import { b as getIonMode } from './ionic-global-BVB7BrLT.js';
+import { b as getIonMode } from './ionic-global-lrowsHfi.js';
 import './dir-Dojwmvde.js';
 
 const progressBarIosCss = () => `:host{--background:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.3);--progress-background:var(--ion-color-primary, #0054e9);display:block;position:relative;width:100%;contain:strict;direction:ltr;overflow:hidden}.progress,.progress-indeterminate,.indeterminate-bar-primary,.indeterminate-bar-secondary,.progress-buffer-bar{left:0;right:0;top:0;bottom:0;position:absolute;width:100%;height:100%}.buffer-circles-container,.buffer-circles{left:0;right:0;top:0;bottom:0;position:absolute}.buffer-circles{right:-10px;left:-10px;}.progress,.progress-buffer-bar,.buffer-circles-container{-webkit-transform-origin:left top;transform-origin:left top;-webkit-transition:-webkit-transform 150ms linear;transition:-webkit-transform 150ms linear;transition:transform 150ms linear;transition:transform 150ms linear, -webkit-transform 150ms linear}.progress,.progress-indeterminate{background:var(--progress-background);z-index:2}.progress-buffer-bar{background:var(--background);z-index:1}.buffer-circles-container{overflow:hidden}.indeterminate-bar-primary{top:0;right:0;bottom:0;left:-145.166611%;-webkit-animation:primary-indeterminate-translate 2s infinite linear;animation:primary-indeterminate-translate 2s infinite linear}.indeterminate-bar-primary .progress-indeterminate{-webkit-animation:primary-indeterminate-scale 2s infinite linear;animation:primary-indeterminate-scale 2s infinite linear;-webkit-animation-play-state:inherit;animation-play-state:inherit}.indeterminate-bar-secondary{top:0;right:0;bottom:0;left:-54.888891%;-webkit-animation:secondary-indeterminate-translate 2s infinite linear;animation:secondary-indeterminate-translate 2s infinite linear}.indeterminate-bar-secondary .progress-indeterminate{-webkit-animation:secondary-indeterminate-scale 2s infinite linear;animation:secondary-indeterminate-scale 2s infinite linear;-webkit-animation-play-state:inherit;animation-play-state:inherit}.buffer-circles{background-image:radial-gradient(ellipse at center, var(--background) 0%, var(--background) 30%, transparent 30%);background-repeat:repeat-x;background-position:5px center;background-size:10px 10px;z-index:0;-webkit-animation:buffering 450ms infinite linear;animation:buffering 450ms infinite linear}:host(.progress-bar-reversed){-webkit-transform:scaleX(-1);transform:scaleX(-1)}:host(.progress-paused) .indeterminate-bar-secondary,:host(.progress-paused) .indeterminate-bar-primary,:host(.progress-paused) .buffer-circles{-webkit-animation-play-state:paused;animation-play-state:paused}:host(.ion-color) .buffer-circles{background-image:radial-gradient(ellipse at center, rgba(var(--ion-color-base-rgb), 0.3) 0%, rgba(var(--ion-color-base-rgb), 0.3) 30%, transparent 30%)}:host(.ion-color) .progress,:host(.ion-color) .progress-indeterminate{background:var(--ion-color-base)}@-webkit-keyframes primary-indeterminate-translate{0%{-webkit-transform:translateX(0);transform:translateX(0)}20%{-webkit-animation-timing-function:cubic-bezier(0.5, 0, 0.701732, 0.495819);animation-timing-function:cubic-bezier(0.5, 0, 0.701732, 0.495819);-webkit-transform:translateX(0);transform:translateX(0)}59.15%{-webkit-animation-timing-function:cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);animation-timing-function:cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);-webkit-transform:translateX(83.67142%);transform:translateX(83.67142%)}100%{-webkit-transform:translateX(200.611057%);transform:translateX(200.611057%)}}@keyframes primary-indeterminate-translate{0%{-webkit-transform:translateX(0);transform:translateX(0)}20%{-webkit-animation-timing-function:cubic-bezier(0.5, 0, 0.701732, 0.495819);animation-timing-function:cubic-bezier(0.5, 0, 0.701732, 0.495819);-webkit-transform:translateX(0);transform:translateX(0)}59.15%{-webkit-animation-timing-function:cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);animation-timing-function:cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);-webkit-transform:translateX(83.67142%);transform:translateX(83.67142%)}100%{-webkit-transform:translateX(200.611057%);transform:translateX(200.611057%)}}@-webkit-keyframes primary-indeterminate-scale{0%{-webkit-transform:scaleX(0.08);transform:scaleX(0.08)}36.65%{-webkit-animation-timing-function:cubic-bezier(0.334731, 0.12482, 0.785844, 1);animation-timing-function:cubic-bezier(0.334731, 0.12482, 0.785844, 1);-webkit-transform:scaleX(0.08);transform:scaleX(0.08)}69.15%{-webkit-animation-timing-function:cubic-bezier(0.06, 0.11, 0.6, 1);animation-timing-function:cubic-bezier(0.06, 0.11, 0.6, 1);-webkit-transform:scaleX(0.661479);transform:scaleX(0.661479)}100%{-webkit-transform:scaleX(0.08);transform:scaleX(0.08)}}@keyframes primary-indeterminate-scale{0%{-webkit-transform:scaleX(0.08);transform:scaleX(0.08)}36.65%{-webkit-animation-timing-function:cubic-bezier(0.334731, 0.12482, 0.785844, 1);animation-timing-function:cubic-bezier(0.334731, 0.12482, 0.785844, 1);-webkit-transform:scaleX(0.08);transform:scaleX(0.08)}69.15%{-webkit-animation-timing-function:cubic-bezier(0.06, 0.11, 0.6, 1);animation-timing-function:cubic-bezier(0.06, 0.11, 0.6, 1);-webkit-transform:scaleX(0.661479);transform:scaleX(0.661479)}100%{-webkit-transform:scaleX(0.08);transform:scaleX(0.08)}}@-webkit-keyframes secondary-indeterminate-translate{0%{-webkit-animation-timing-function:cubic-bezier(0.15, 0, 0.515058, 0.409685);animation-timing-function:cubic-bezier(0.15, 0, 0.515058, 0.409685);-webkit-transform:translateX(0);transform:translateX(0)}25%{-webkit-animation-timing-function:cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);animation-timing-function:cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);-webkit-transform:translateX(37.651913%);transform:translateX(37.651913%)}48.35%{-webkit-animation-timing-function:cubic-bezier(0.4, 0.627035, 0.6, 0.902026);animation-timing-function:cubic-bezier(0.4, 0.627035, 0.6, 0.902026);-webkit-transform:translateX(84.386165%);transform:translateX(84.386165%)}100%{-webkit-transform:translateX(160.277782%);transform:translateX(160.277782%)}}@keyframes secondary-indeterminate-translate{0%{-webkit-animation-timing-function:cubic-bezier(0.15, 0, 0.515058, 0.409685);animation-timing-function:cubic-bezier(0.15, 0, 0.515058, 0.409685);-webkit-transform:translateX(0);transform:translateX(0)}25%{-webkit-animation-timing-function:cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);animation-timing-function:cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);-webkit-transform:translateX(37.651913%);transform:translateX(37.651913%)}48.35%{-webkit-animation-timing-function:cubic-bezier(0.4, 0.627035, 0.6, 0.902026);animation-timing-function:cubic-bezier(0.4, 0.627035, 0.6, 0.902026);-webkit-transform:translateX(84.386165%);transform:translateX(84.386165%)}100%{-webkit-transform:translateX(160.277782%);transform:translateX(160.277782%)}}@-webkit-keyframes secondary-indeterminate-scale{0%{-webkit-animation-timing-function:cubic-bezier(0.205028, 0.057051, 0.57661, 0.453971);animation-timing-function:cubic-bezier(0.205028, 0.057051, 0.57661, 0.453971);-webkit-transform:scaleX(0.08);transform:scaleX(0.08)}19.15%{-webkit-animation-timing-function:cubic-bezier(0.152313, 0.196432, 0.648374, 1.004315);animation-timing-function:cubic-bezier(0.152313, 0.196432, 0.648374, 1.004315);-webkit-transform:scaleX(0.457104);transform:scaleX(0.457104)}44.15%{-webkit-animation-timing-function:cubic-bezier(0.257759, -0.003163, 0.211762, 1.38179);animation-timing-function:cubic-bezier(0.257759, -0.003163, 0.211762, 1.38179);-webkit-transform:scaleX(0.72796);transform:scaleX(0.72796)}100%{-webkit-transform:scaleX(0.08);transform:scaleX(0.08)}}@keyframes secondary-indeterminate-scale{0%{-webkit-animation-timing-function:cubic-bezier(0.205028, 0.057051, 0.57661, 0.453971);animation-timing-function:cubic-bezier(0.205028, 0.057051, 0.57661, 0.453971);-webkit-transform:scaleX(0.08);transform:scaleX(0.08)}19.15%{-webkit-animation-timing-function:cubic-bezier(0.152313, 0.196432, 0.648374, 1.004315);animation-timing-function:cubic-bezier(0.152313, 0.196432, 0.648374, 1.004315);-webkit-transform:scaleX(0.457104);transform:scaleX(0.457104)}44.15%{-webkit-animation-timing-function:cubic-bezier(0.257759, -0.003163, 0.211762, 1.38179);animation-timing-function:cubic-bezier(0.257759, -0.003163, 0.211762, 1.38179);-webkit-transform:scaleX(0.72796);transform:scaleX(0.72796)}100%{-webkit-transform:scaleX(0.08);transform:scaleX(0.08)}}@-webkit-keyframes buffering{to{-webkit-transform:translateX(-10px);transform:translateX(-10px)}}@keyframes buffering{to{-webkit-transform:translateX(-10px);transform:translateX(-10px)}}:host{border-radius:9999px;height:4px}:host(.progress-bar-solid){--background:var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6))}`;
@@ -14,33 +14,27 @@ const progressBarMdCss = () => `:host{--background:rgba(var(--ion-color-primary-
 const ProgressBar = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * The state of the progress bar, based on if the time the process takes is known or not.
+         * Default options are: `"determinate"` (no animation), `"indeterminate"` (animate from left to right).
+         */
+        this.type = 'determinate';
+        /**
+         * If true, reverse the progress bar direction.
+         */
+        this.reversed = false;
+        /**
+         * The value determines how much of the active bar should display when the
+         * `type` is `"determinate"`.
+         * The value should be between [0, 1].
+         */
+        this.value = 0;
+        /**
+         * If the buffer and value are smaller than 1, the buffer circles will show.
+         * The buffer should be between [0, 1].
+         */
+        this.buffer = 1;
     }
-    /**
-     * The state of the progress bar, based on if the time the process takes is known or not.
-     * Default options are: `"determinate"` (no animation), `"indeterminate"` (animate from left to right).
-     */
-    type = 'determinate';
-    /**
-     * If true, reverse the progress bar direction.
-     */
-    reversed = false;
-    /**
-     * The value determines how much of the active bar should display when the
-     * `type` is `"determinate"`.
-     * The value should be between [0, 1].
-     */
-    value = 0;
-    /**
-     * If the buffer and value are smaller than 1, the buffer circles will show.
-     * The buffer should be between [0, 1].
-     */
-    buffer = 1;
-    /**
-     * The color to use from your application's color palette.
-     * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
-     * For more information on colors, see [theming](/docs/theming/basics).
-     */
-    color;
     render() {
         const { color, type, reversed, value, buffer } = this;
         const paused = config.getBoolean('_testing');