@pod-os/elements 0.0.1 → 0.0.2-c322656

package/dist/cjs/ion-menu.cjs.entry.js

@@ -2,14 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6bf2cd3d.js');
-const ionicGlobal = require('./ionic-global-167e590d.js');
-const cubicBezier = require('./cubic-bezier-24e309bf.js');
-const gestureController = require('./gesture-controller-e824cfb3.js');
-const helpers = require('./helpers-ff618d5e.js');
-const index$1 = require('./index-5663f42c.js');
-require('./hardware-back-button-ca468aae.js');
-require('./animation-bd89cfc5.js');
+const index = require('./index-0aae2825.js');
+const ionicGlobal = require('./ionic-global-a6599940.js');
+const cubicBezier = require('./cubic-bezier-dcb7bfef.js');
+const gestureController = require('./gesture-controller-fbbe9a65.js');
+const helpers = require('./helpers-398ced09.js');
+const index$1 = require('./index-b8164b0b.js');
+require('./hardware-back-button-01027575.js');
+require('./animation-5840e4df.js');
 
 const menuIosCss = ":host{--width:304px;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--background:var(--ion-background-color, #fff);left:0;right:0;top:0;bottom:0;display:none;position:absolute;contain:strict}:host(.show-menu){display:block}.menu-inner{left:0;right:auto;top:0;bottom:0;transform:translate3d(-9999px,  0,  0);display:flex;position:absolute;flex-direction:column;justify-content:space-between;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);background:var(--background);contain:strict}[dir=rtl] .menu-inner,:host-context([dir=rtl]) .menu-inner{left:unset;right:unset;left:auto;right:0}[dir=rtl] .menu-inner,:host-context([dir=rtl]) .menu-inner{transform:translate3d(calc(-1 * -9999px),  0,  0)}:host(.menu-side-start) .menu-inner{--ion-safe-area-right:0px;right:auto;left:0}:host(.menu-side-end) .menu-inner{--ion-safe-area-left:0px;right:0;left:auto;}ion-backdrop{display:none;opacity:0.01;z-index:-1}@media (max-width: 340px){.menu-inner{--width:264px}}:host(.menu-type-reveal){z-index:0}:host(.menu-type-reveal.show-menu) .menu-inner{transform:translate3d(0,  0,  0)}:host(.menu-type-overlay){z-index:1000}:host(.menu-type-overlay) .show-backdrop{display:block;cursor:pointer}:host(.menu-pane-visible){width:var(--width);min-width:var(--min-width);max-width:var(--max-width)}:host(.menu-pane-visible) .menu-inner{left:0;right:0;width:auto;transform:none !important;box-shadow:none !important}:host(.menu-pane-visible) ion-backdrop{display:hidden !important;}:host(.menu-type-push){z-index:1000}:host(.menu-type-push) .show-backdrop{display:block}";
 
@@ -19,6 +19,7 @@ const iosEasing = 'cubic-bezier(0.32,0.72,0,1)';
 const mdEasing = 'cubic-bezier(0.0,0.0,0.2,1)';
 const iosEasingReverse = 'cubic-bezier(1, 0, 0.68, 0.28)';
 const mdEasingReverse = 'cubic-bezier(0.4, 0, 0.6, 1)';
+const focusableQueryString = '[tabindex]:not([tabindex^="-"]), input:not([type=hidden]):not([tabindex^="-"]), textarea:not([tabindex^="-"]), button:not([tabindex^="-"]), select:not([tabindex^="-"]), .ion-focusable:not([tabindex^="-"])';
 const Menu = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
@@ -31,6 +32,8 @@ const Menu = class {
     this.blocker = gestureController.GESTURE_CONTROLLER.createBlocker({ disableScroll: true });
     this.isAnimating = false;
     this._isOpen = false;
+    this.inheritedAttributes = {};
+    this.handleFocus = (ev) => this.trapKeyboardFocus(ev, document);
     this.isPaneVisible = false;
     this.isEndSide = false;
     /**
@@ -111,7 +114,7 @@ AFTER:
     this.sideChanged();
     // register this menu with the app's menu controller
     index$1.menuController._register(this);
-    this.gesture = (await Promise.resolve().then(function () { return require('./index-5571e89c.js'); })).createGesture({
+    this.gesture = (await Promise.resolve().then(function () { return require('./index-d01d9183.js'); })).createGesture({
       el: document,
       gestureName: 'menu-swipe',
       gesturePriority: 30,
@@ -125,6 +128,9 @@ AFTER:
     });
     this.updateState();
   }
+  componentWillLoad() {
+    this.inheritedAttributes = helpers.inheritAriaAttributes(this.el);
+  }
   async componentDidLoad() {
     this.ionMenuChange.emit({ disabled: this.disabled, open: this._isOpen });
     this.updateState();
@@ -158,6 +164,11 @@ AFTER:
       }
     }
   }
+  onKeydown(ev) {
+    if (ev.key === 'Escape') {
+      this.close();
+    }
+  }
   /**
    * Returns `true` is the menu is open.
    */
@@ -201,6 +212,62 @@ AFTER:
   setOpen(shouldOpen, animated = true) {
     return index$1.menuController._setOpen(this, shouldOpen, animated);
   }
+  focusFirstDescendant() {
+    const { el } = this;
+    const firstInput = el.querySelector(focusableQueryString);
+    if (firstInput) {
+      firstInput.focus();
+    }
+    else {
+      el.focus();
+    }
+  }
+  focusLastDescendant() {
+    const { el } = this;
+    const inputs = Array.from(el.querySelectorAll(focusableQueryString));
+    const lastInput = inputs.length > 0 ? inputs[inputs.length - 1] : null;
+    if (lastInput) {
+      lastInput.focus();
+    }
+    else {
+      el.focus();
+    }
+  }
+  trapKeyboardFocus(ev, doc) {
+    const target = ev.target;
+    if (!target) {
+      return;
+    }
+    /**
+     * If the target is inside the menu contents, let the browser
+     * focus as normal and keep a log of the last focused element.
+     */
+    if (this.el.contains(target)) {
+      this.lastFocus = target;
+    }
+    else {
+      /**
+       * Otherwise, we are about to have focus go out of the menu.
+       * Wrap the focus to either the first or last element.
+       */
+      /**
+       * Once we call `focusFirstDescendant`, another focus event
+       * will fire, which will cause `lastFocus` to be updated
+       * before we can run the code after that. We cache the value
+       * here to avoid that.
+       */
+      this.focusFirstDescendant();
+      /**
+       * If the cached last focused element is the same as the now-
+       * active element, that means the user was on the first element
+       * already and pressed Shift + Tab, so we need to wrap to the
+       * last descendant.
+       */
+      if (this.lastFocus === doc.activeElement) {
+        this.focusLastDescendant();
+      }
+    }
+  }
   async _setOpen(shouldOpen, animated = true) {
     // If the menu is disabled or it is currently being animated, let's do nothing
     if (!this._isActive() || this.isAnimating || shouldOpen === this._isOpen) {
@@ -345,6 +412,15 @@ AFTER:
     // this places the menu into the correct location before it animates in
     // this css class doesn't actually kick off any animations
     this.el.classList.add(SHOW_MENU);
+    /**
+     * We add a tabindex here so that focus trapping
+     * still works even if the menu does not have
+     * any focusable elements slotted inside. The
+     * focus trapping utility will fallback to focusing
+     * the menu so focus does not leave when the menu
+     * is open.
+     */
+    this.el.setAttribute('tabindex', '0');
     if (this.backdropEl) {
       this.backdropEl.classList.add(SHOW_BACKDROP);
     }
@@ -369,18 +445,44 @@ AFTER:
       this.blocker.unblock();
     }
     if (isOpen) {
-      // add css class
+      // add css class and hide content behind menu from screen readers
       if (this.contentEl) {
         this.contentEl.classList.add(MENU_CONTENT_OPEN);
+        /**
+         * When the menu is open and overlaying the main
+         * content, the main content should not be announced
+         * by the screenreader as the menu is the main
+         * focus. This is useful with screenreaders that have
+         * "read from top" gestures that read the entire
+         * page from top to bottom when activated.
+         */
+        this.contentEl.setAttribute('aria-hidden', 'true');
       }
       // emit open event
       this.ionDidOpen.emit();
+      // focus menu content for screen readers
+      if (this.menuInnerEl) {
+        this.focusFirstDescendant();
+      }
+      // setup focus trapping
+      document.addEventListener('focus', this.handleFocus, true);
     }
     else {
-      // remove css classes
+      // remove css classes and unhide content from screen readers
       this.el.classList.remove(SHOW_MENU);
+      /**
+       * Remove tabindex from the menu component
+       * so that is cannot be tabbed to.
+       */
+      this.el.removeAttribute('tabindex');
       if (this.contentEl) {
         this.contentEl.classList.remove(MENU_CONTENT_OPEN);
+        /**
+         * Remove aria-hidden so screen readers
+         * can announce the main content again
+         * now that the menu is not the main focus.
+         */
+        this.contentEl.removeAttribute('aria-hidden');
       }
       if (this.backdropEl) {
         this.backdropEl.classList.remove(SHOW_BACKDROP);
@@ -390,6 +492,8 @@ AFTER:
       }
       // emit close event
       this.ionDidClose.emit();
+      // undo focus trapping so multiple menus don't collide
+      document.removeEventListener('focus', this.handleFocus, true);
     }
   }
   updateState() {
@@ -415,9 +519,9 @@ AFTER:
     this.afterAnimation(false);
   }
   render() {
-    const { isEndSide, type, disabled, isPaneVisible } = this;
+    const { isEndSide, type, disabled, isPaneVisible, inheritedAttributes } = this;
     const mode = ionicGlobal.getIonMode(this);
-    return (index.h(index.Host, { role: "navigation", class: {
+    return (index.h(index.Host, { role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
         [mode]: true,
         [`menu-type-${type}`]: true,
         'menu-enabled': !disabled,

package/dist/cjs/ion-modal.cjs.entry.js

@@ -2,18 +2,18 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index$1 = require('./index-6bf2cd3d.js');
-const ionicGlobal = require('./ionic-global-167e590d.js');
-const frameworkDelegate = require('./framework-delegate-0a2d58a6.js');
-const overlays = require('./overlays-0c3389b6.js');
-const theme = require('./theme-98ccfc24.js');
-const index$2 = require('./index-b29012b2.js');
-const animation = require('./animation-bd89cfc5.js');
-const cubicBezier = require('./cubic-bezier-24e309bf.js');
-const index = require('./index-5571e89c.js');
-const helpers = require('./helpers-ff618d5e.js');
-require('./hardware-back-button-ca468aae.js');
-require('./gesture-controller-e824cfb3.js');
+const index$1 = require('./index-0aae2825.js');
+const ionicGlobal = require('./ionic-global-a6599940.js');
+const frameworkDelegate = require('./framework-delegate-c45292a3.js');
+const overlays = require('./overlays-7d879e64.js');
+const theme = require('./theme-2259d0f5.js');
+const index$2 = require('./index-fdf96391.js');
+const animation = require('./animation-5840e4df.js');
+const cubicBezier = require('./cubic-bezier-dcb7bfef.js');
+const index = require('./index-d01d9183.js');
+const helpers = require('./helpers-398ced09.js');
+require('./hardware-back-button-01027575.js');
+require('./gesture-controller-fbbe9a65.js');
 
 // Defaults for the card swipe animation
 const SwipeToCloseDefaults = {

package/dist/cjs/ion-nav-link.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6bf2cd3d.js');
+const index = require('./index-0aae2825.js');
 
 const navLink = (el, routerDirection, component, componentProps, routerAnimation) => {
   const nav = el.closest('ion-nav');

package/dist/cjs/ion-nav.cjs.entry.js

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6bf2cd3d.js');
-const ionicGlobal = require('./ionic-global-167e590d.js');
-const cubicBezier = require('./cubic-bezier-24e309bf.js');
-const helpers = require('./helpers-ff618d5e.js');
-const index$1 = require('./index-b29012b2.js');
-const frameworkDelegate = require('./framework-delegate-0a2d58a6.js');
+const index = require('./index-0aae2825.js');
+const ionicGlobal = require('./ionic-global-a6599940.js');
+const cubicBezier = require('./cubic-bezier-dcb7bfef.js');
+const helpers = require('./helpers-398ced09.js');
+const index$1 = require('./index-fdf96391.js');
+const frameworkDelegate = require('./framework-delegate-c45292a3.js');
 
 const VIEW_STATE_NEW = 1;
 const VIEW_STATE_ATTACHED = 2;
@@ -144,7 +144,7 @@ const Nav = class {
   }
   async componentDidLoad() {
     this.rootChanged();
-    this.gesture = (await Promise.resolve().then(function () { return require('./swipe-back-a15422cc.js'); })).createSwipeBackGesture(this.el, this.canStart.bind(this), this.onStart.bind(this), this.onMove.bind(this), this.onEnd.bind(this));
+    this.gesture = (await Promise.resolve().then(function () { return require('./swipe-back-c4a778df.js'); })).createSwipeBackGesture(this.el, this.canStart.bind(this), this.onStart.bind(this), this.onMove.bind(this), this.onEnd.bind(this));
     this.swipeGestureChanged();
   }
   disconnectedCallback() {

package/dist/cjs/ion-note.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6bf2cd3d.js');
-const ionicGlobal = require('./ionic-global-167e590d.js');
-const theme = require('./theme-98ccfc24.js');
+const index = require('./index-0aae2825.js');
+const ionicGlobal = require('./ionic-global-a6599940.js');
+const theme = require('./theme-2259d0f5.js');
 
 const noteIosCss = ":host{color:var(--color);font-family:var(--ion-font-family, inherit);box-sizing:border-box}:host(.ion-color){color:var(--ion-color-base)}:host{--color:var(--ion-color-step-350, #a6a6a6)}";
 

package/dist/cjs/ion-picker-column.cjs.entry.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6bf2cd3d.js');
-const ionicGlobal = require('./ionic-global-167e590d.js');
-const helpers = require('./helpers-ff618d5e.js');
-const haptic = require('./haptic-415dac5b.js');
+const index = require('./index-0aae2825.js');
+const ionicGlobal = require('./ionic-global-a6599940.js');
+const helpers = require('./helpers-398ced09.js');
+const haptic = require('./haptic-09e73337.js');
 
 const pickerColumnIosCss = ".picker-col{display:flex;position:relative;flex:1;justify-content:center;height:100%;box-sizing:content-box;contain:content}.picker-opts{position:relative;flex:1;max-width:100%}.picker-opt{left:0;top:0;display:block;position:absolute;width:100%;border:0;text-align:center;text-overflow:ellipsis;white-space:nowrap;contain:strict;overflow:hidden;will-change:transform}[dir=rtl] .picker-opt,:host-context([dir=rtl]) .picker-opt{left:unset;right:unset;right:0}.picker-opt.picker-opt-disabled{pointer-events:none}.picker-opt-disabled{opacity:0}.picker-opts-left{justify-content:flex-start}.picker-opts-right{justify-content:flex-end}.picker-opt:active,.picker-opt:focus{outline:none}.picker-prefix{position:relative;flex:1;text-align:end;white-space:nowrap}.picker-suffix{position:relative;flex:1;text-align:start;white-space:nowrap}.picker-col{padding-left:4px;padding-right:4px;padding-top:0;padding-bottom:0;transform-style:preserve-3d}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.picker-col{padding-left:unset;padding-right:unset;-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px}}.picker-prefix,.picker-suffix,.picker-opts{top:77px;transform-style:preserve-3d;color:inherit;font-size:20px;line-height:42px;pointer-events:none}.picker-opt{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;transform-origin:center center;height:46px;transform-style:preserve-3d;transition-timing-function:ease-out;background:transparent;color:inherit;font-size:20px;line-height:42px;backface-visibility:hidden;pointer-events:auto}[dir=rtl] .picker-opt,:host-context([dir=rtl]) .picker-opt{transform-origin:calc(100% - center) center}";
 
@@ -35,7 +35,7 @@ const PickerColumnCmp = class {
     }
     this.rotateFactor = pickerRotateFactor;
     this.scaleFactor = pickerScaleFactor;
-    this.gesture = (await Promise.resolve().then(function () { return require('./index-5571e89c.js'); })).createGesture({
+    this.gesture = (await Promise.resolve().then(function () { return require('./index-d01d9183.js'); })).createGesture({
       el: this.el,
       gestureName: 'picker-swipe',
       gesturePriority: 100,

package/dist/cjs/ion-picker.cjs.entry.js

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6bf2cd3d.js');
-const ionicGlobal = require('./ionic-global-167e590d.js');
-const overlays = require('./overlays-0c3389b6.js');
-const theme = require('./theme-98ccfc24.js');
-const animation = require('./animation-bd89cfc5.js');
-require('./hardware-back-button-ca468aae.js');
-require('./helpers-ff618d5e.js');
+const index = require('./index-0aae2825.js');
+const ionicGlobal = require('./ionic-global-a6599940.js');
+const overlays = require('./overlays-7d879e64.js');
+const theme = require('./theme-2259d0f5.js');
+const animation = require('./animation-5840e4df.js');
+require('./hardware-back-button-01027575.js');
+require('./helpers-398ced09.js');
 
 /**
  * iOS Picker Enter Animation

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

@@ -2,15 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6bf2cd3d.js');
-const ionicGlobal = require('./ionic-global-167e590d.js');
-const frameworkDelegate = require('./framework-delegate-0a2d58a6.js');
-const overlays = require('./overlays-0c3389b6.js');
-const theme = require('./theme-98ccfc24.js');
-const index$1 = require('./index-b29012b2.js');
-const animation = require('./animation-bd89cfc5.js');
-require('./helpers-ff618d5e.js');
-require('./hardware-back-button-ca468aae.js');
+const index = require('./index-0aae2825.js');
+const ionicGlobal = require('./ionic-global-a6599940.js');
+const frameworkDelegate = require('./framework-delegate-c45292a3.js');
+const overlays = require('./overlays-7d879e64.js');
+const theme = require('./theme-2259d0f5.js');
+const index$1 = require('./index-fdf96391.js');
+const animation = require('./animation-5840e4df.js');
+require('./helpers-398ced09.js');
+require('./hardware-back-button-01027575.js');
 
 /**
  * iOS Popover Enter Animation
@@ -243,9 +243,9 @@ const mdLeaveAnimation = (baseEl) => {
     .addAnimation([backdropAnimation, wrapperAnimation]);
 };
 
-const popoverIosCss = ".sc-ion-popover-ios-h{--background:var(--ion-background-color, #fff);--min-width:0;--min-height:0;--max-width:auto;--height:auto;left:0;right:0;top:0;bottom:0;display:flex;position:fixed;align-items:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);z-index:1001}.overlay-hidden.sc-ion-popover-ios-h{display:none}.popover-wrapper.sc-ion-popover-ios{opacity:0;z-index:10}.popover-content.sc-ion-popover-ios{display:flex;position:absolute;flex-direction:column;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);background:var(--background);box-shadow:var(--box-shadow);overflow:auto;z-index:10}.popover-viewport.sc-ion-popover-ios{--ion-safe-area-top:0px;--ion-safe-area-right:0px;--ion-safe-area-bottom:0px;--ion-safe-area-left:0px}.sc-ion-popover-ios-h{--width:200px;--max-height:90%;--box-shadow:none;--backdrop-opacity:var(--ion-backdrop-opacity, 0.08)}.popover-content.sc-ion-popover-ios{border-radius:10px}.popover-arrow.sc-ion-popover-ios{display:block;position:absolute;width:20px;height:10px;overflow:hidden}.popover-arrow.sc-ion-popover-ios::after{left:3px;top:3px;border-radius:3px;position:absolute;width:14px;height:14px;transform:rotate(45deg);background:var(--background);content:\"\";z-index:10}[dir=rtl].sc-ion-popover-ios .popover-arrow.sc-ion-popover-ios::after,[dir=rtl].sc-ion-popover-ios-h .popover-arrow.sc-ion-popover-ios::after,[dir=rtl] .sc-ion-popover-ios-h .popover-arrow.sc-ion-popover-ios::after{left:unset;right:unset;right:3px}.popover-bottom.sc-ion-popover-ios-h .popover-arrow.sc-ion-popover-ios{top:auto;bottom:-10px}.popover-bottom.sc-ion-popover-ios-h .popover-arrow.sc-ion-popover-ios::after{top:-6px}@supports (backdrop-filter: blur(0)){.popover-translucent.sc-ion-popover-ios-h .popover-content.sc-ion-popover-ios,.popover-translucent.sc-ion-popover-ios-h .popover-arrow.sc-ion-popover-ios::after{background:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8);backdrop-filter:saturate(180%) blur(20px)}}";
+const popoverIosCss = ".sc-ion-popover-ios-h{--background:var(--ion-background-color, #fff);--min-width:0;--min-height:0;--max-width:auto;--height:auto;left:0;right:0;top:0;bottom:0;display:flex;position:fixed;align-items:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);z-index:1001}.overlay-hidden.sc-ion-popover-ios-h{display:none}.popover-wrapper.sc-ion-popover-ios{opacity:0;z-index:10}.popover-content.sc-ion-popover-ios{display:flex;position:absolute;flex-direction:column;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);background:var(--background);box-shadow:var(--box-shadow);overflow:auto;z-index:10}.popover-viewport.sc-ion-popover-ios{--ion-safe-area-top:0px;--ion-safe-area-right:0px;--ion-safe-area-bottom:0px;--ion-safe-area-left:0px;display:flex;flex-direction:column;overflow:hidden}.sc-ion-popover-ios-h{--width:200px;--max-height:90%;--box-shadow:none;--backdrop-opacity:var(--ion-backdrop-opacity, 0.08)}.popover-content.sc-ion-popover-ios{border-radius:10px}.popover-arrow.sc-ion-popover-ios{display:block;position:absolute;width:20px;height:10px;overflow:hidden}.popover-arrow.sc-ion-popover-ios::after{left:3px;top:3px;border-radius:3px;position:absolute;width:14px;height:14px;transform:rotate(45deg);background:var(--background);content:\"\";z-index:10}[dir=rtl].sc-ion-popover-ios .popover-arrow.sc-ion-popover-ios::after,[dir=rtl].sc-ion-popover-ios-h .popover-arrow.sc-ion-popover-ios::after,[dir=rtl] .sc-ion-popover-ios-h .popover-arrow.sc-ion-popover-ios::after{left:unset;right:unset;right:3px}.popover-bottom.sc-ion-popover-ios-h .popover-arrow.sc-ion-popover-ios{top:auto;bottom:-10px}.popover-bottom.sc-ion-popover-ios-h .popover-arrow.sc-ion-popover-ios::after{top:-6px}@supports (backdrop-filter: blur(0)){.popover-translucent.sc-ion-popover-ios-h .popover-content.sc-ion-popover-ios,.popover-translucent.sc-ion-popover-ios-h .popover-arrow.sc-ion-popover-ios::after{background:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8);backdrop-filter:saturate(180%) blur(20px)}}";
 
-const popoverMdCss = ".sc-ion-popover-md-h{--background:var(--ion-background-color, #fff);--min-width:0;--min-height:0;--max-width:auto;--height:auto;left:0;right:0;top:0;bottom:0;display:flex;position:fixed;align-items:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);z-index:1001}.overlay-hidden.sc-ion-popover-md-h{display:none}.popover-wrapper.sc-ion-popover-md{opacity:0;z-index:10}.popover-content.sc-ion-popover-md{display:flex;position:absolute;flex-direction:column;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);background:var(--background);box-shadow:var(--box-shadow);overflow:auto;z-index:10}.popover-viewport.sc-ion-popover-md{--ion-safe-area-top:0px;--ion-safe-area-right:0px;--ion-safe-area-bottom:0px;--ion-safe-area-left:0px}.sc-ion-popover-md-h{--width:250px;--max-height:90%;--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);--backdrop-opacity:var(--ion-backdrop-opacity, 0.32)}.popover-content.sc-ion-popover-md{border-radius:4px;transform-origin:left top}[dir=rtl].sc-ion-popover-md .popover-content.sc-ion-popover-md,[dir=rtl].sc-ion-popover-md-h .popover-content.sc-ion-popover-md,[dir=rtl] .sc-ion-popover-md-h .popover-content.sc-ion-popover-md{transform-origin:right top}.popover-viewport.sc-ion-popover-md{transition-delay:100ms}";
+const popoverMdCss = ".sc-ion-popover-md-h{--background:var(--ion-background-color, #fff);--min-width:0;--min-height:0;--max-width:auto;--height:auto;left:0;right:0;top:0;bottom:0;display:flex;position:fixed;align-items:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);z-index:1001}.overlay-hidden.sc-ion-popover-md-h{display:none}.popover-wrapper.sc-ion-popover-md{opacity:0;z-index:10}.popover-content.sc-ion-popover-md{display:flex;position:absolute;flex-direction:column;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);background:var(--background);box-shadow:var(--box-shadow);overflow:auto;z-index:10}.popover-viewport.sc-ion-popover-md{--ion-safe-area-top:0px;--ion-safe-area-right:0px;--ion-safe-area-bottom:0px;--ion-safe-area-left:0px;display:flex;flex-direction:column;overflow:hidden}.sc-ion-popover-md-h{--width:250px;--max-height:90%;--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);--backdrop-opacity:var(--ion-backdrop-opacity, 0.32)}.popover-content.sc-ion-popover-md{border-radius:4px;transform-origin:left top}[dir=rtl].sc-ion-popover-md .popover-content.sc-ion-popover-md,[dir=rtl].sc-ion-popover-md-h .popover-content.sc-ion-popover-md,[dir=rtl] .sc-ion-popover-md-h .popover-content.sc-ion-popover-md{transform-origin:right top}.popover-viewport.sc-ion-popover-md{transition-delay:100ms}";
 
 const Popover = class {
   constructor(hostRef) {

package/dist/cjs/ion-range.cjs.entry.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6bf2cd3d.js');
-const ionicGlobal = require('./ionic-global-167e590d.js');
-const helpers = require('./helpers-ff618d5e.js');
-const theme = require('./theme-98ccfc24.js');
+const index = require('./index-0aae2825.js');
+const ionicGlobal = require('./ionic-global-a6599940.js');
+const helpers = require('./helpers-398ced09.js');
+const theme = require('./theme-2259d0f5.js');
 
 const rangeIosCss = ":host{--knob-handle-size:calc(var(--knob-size) * 2);display:flex;position:relative;flex:3;align-items:center;font-family:var(--ion-font-family, inherit);user-select:none;z-index:2}:host(.range-disabled){pointer-events:none}::slotted(ion-label){flex:initial}::slotted(ion-icon[slot]){font-size:24px}.range-slider{position:relative;flex:1;width:100%;height:var(--height);contain:size layout style;cursor:grab;touch-action:pan-y}:host(.range-pressed) .range-slider{cursor:grabbing}.range-pin{position:absolute;background:var(--ion-color-base);color:var(--ion-color-contrast);text-align:center;box-sizing:border-box}.range-knob-handle{left:0;top:calc((var(--height) - var(--knob-handle-size)) / 2);margin-left:calc(0px - var(--knob-handle-size) / 2);position:absolute;width:var(--knob-handle-size);height:var(--knob-handle-size);text-align:center}[dir=rtl] .range-knob-handle,:host-context([dir=rtl]) .range-knob-handle{left:unset;right:unset;right:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.range-knob-handle{margin-left:unset;-webkit-margin-start:calc(0px - var(--knob-handle-size) / 2);margin-inline-start:calc(0px - var(--knob-handle-size) / 2)}}[dir=rtl] .range-knob-handle,:host-context([dir=rtl]) .range-knob-handle{left:unset}.range-knob-handle:active,.range-knob-handle:focus{outline:none}.range-bar{border-radius:var(--bar-border-radius);left:0;top:calc((var(--height) - var(--bar-height)) / 2);position:absolute;width:100%;height:var(--bar-height);background:var(--bar-background);pointer-events:none}[dir=rtl] .range-bar,:host-context([dir=rtl]) .range-bar{left:unset;right:unset;right:0}[dir=rtl] .range-bar,:host-context([dir=rtl]) .range-bar{left:unset}.range-knob{border-radius:var(--knob-border-radius);left:calc(50% - var(--knob-size) / 2);top:calc(50% - var(--knob-size) / 2);position:absolute;width:var(--knob-size);height:var(--knob-size);background:var(--knob-background);box-shadow:var(--knob-box-shadow);z-index:2;pointer-events:none}[dir=rtl] .range-knob,:host-context([dir=rtl]) .range-knob{left:unset;right:unset;right:calc(50% - var(--knob-size) / 2)}[dir=rtl] .range-knob,:host-context([dir=rtl]) .range-knob{left:unset}:host(.range-pressed) .range-bar-active{will-change:left, right}:host(.in-item){width:100%}:host(.in-item) ::slotted(ion-label){align-self:center}:host{--knob-border-radius:50%;--knob-background:#ffffff;--knob-box-shadow:0 3px 1px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.13), 0 0 0 1px rgba(0, 0, 0, 0.02);--knob-size:28px;--bar-height:2px;--bar-background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.1);--bar-background-active:var(--ion-color-primary, #3880ff);--bar-border-radius:0;--height:42px;padding-left:16px;padding-right:16px;padding-top:8px;padding-bottom:8px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px}}:host(.ion-color) .range-bar-active,:host(.ion-color) .range-tick-active{background:var(--ion-color-base)}::slotted([slot=start]){margin-left:0;margin-right:16px;margin-top:0;margin-bottom:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted([slot=start]){margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}}::slotted([slot=end]){margin-left:16px;margin-right:0;margin-top:0;margin-bottom:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted([slot=end]){margin-left:unset;margin-right:unset;-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}}:host(.range-has-pin){padding-top:20px}.range-bar-active{bottom:0;width:auto;background:var(--bar-background-active)}.range-tick{margin-left:-1px;border-radius:0;position:absolute;top:18px;width:2px;height:8px;background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.1);pointer-events:none}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.range-tick{margin-left:unset;-webkit-margin-start:-1px;margin-inline-start:-1px}}.range-tick-active{background:var(--bar-background-active)}.range-pin{transform:translate3d(0,  28px,  0) scale(0.01);padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px;display:inline-block;position:relative;top:-20px;min-width:28px;transition:transform 120ms ease;background:transparent;color:var(--ion-text-color, #000);font-size:12px;text-align:center}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.range-pin{padding-left:unset;padding-right:unset;-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px}}.range-knob-pressed .range-pin{transform:translate3d(0,  0,  0) scale(1)}:host(.range-disabled){opacity:0.5}";
 
@@ -91,7 +91,7 @@ const Range = class {
     this.setupGesture = async () => {
       const rangeSlider = this.rangeSlider;
       if (rangeSlider) {
-        this.gesture = (await Promise.resolve().then(function () { return require('./index-5571e89c.js'); })).createGesture({
+        this.gesture = (await Promise.resolve().then(function () { return require('./index-d01d9183.js'); })).createGesture({
           el: rangeSlider,
           gestureName: 'range',
           gesturePriority: 100,
@@ -165,7 +165,7 @@ const Range = class {
      * not assign the default incrementing ID.
      */
     this.rangeId = (this.el.hasAttribute('id')) ? this.el.getAttribute('id') : `ion-r-${rangeIds++}`;
-    this.inheritedAttributes = helpers.inheritAttributes(this.el, ['aria-label']);
+    this.inheritedAttributes = helpers.inheritAriaAttributes(this.el);
   }
   componentDidLoad() {
     this.setupGesture();

package/dist/cjs/ion-refresher-content.cjs.entry.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6bf2cd3d.js');
-const ionicGlobal = require('./ionic-global-167e590d.js');
-const index$1 = require('./index-427d03fb.js');
-const spinnerConfigs = require('./spinner-configs-559523fd.js');
+const index = require('./index-0aae2825.js');
+const ionicGlobal = require('./ionic-global-a6599940.js');
+const index$1 = require('./index-6bbae9b1.js');
+const spinnerConfigs = require('./spinner-configs-fb16b986.js');
 
 const RefresherContent = class {
   constructor(hostRef) {

package/dist/cjs/ion-refresher.cjs.entry.js

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6bf2cd3d.js');
-const ionicGlobal = require('./ionic-global-167e590d.js');
-const cubicBezier = require('./cubic-bezier-24e309bf.js');
-const helpers = require('./helpers-ff618d5e.js');
-const haptic = require('./haptic-415dac5b.js');
-const animation = require('./animation-bd89cfc5.js');
+const index = require('./index-0aae2825.js');
+const ionicGlobal = require('./ionic-global-a6599940.js');
+const cubicBezier = require('./cubic-bezier-dcb7bfef.js');
+const helpers = require('./helpers-398ced09.js');
+const haptic = require('./haptic-09e73337.js');
+const animation = require('./animation-5840e4df.js');
 
 const getRefresherAnimationType = (contentEl) => {
   const previousSibling = contentEl.previousElementSibling;
@@ -386,7 +386,7 @@ const Refresher = class {
       });
     };
     this.scrollEl.addEventListener('scroll', this.scrollListenerCallback);
-    this.gesture = (await Promise.resolve().then(function () { return require('./index-5571e89c.js'); })).createGesture({
+    this.gesture = (await Promise.resolve().then(function () { return require('./index-d01d9183.js'); })).createGesture({
       el: this.scrollEl,
       gestureName: 'refresher',
       gesturePriority: 31,
@@ -438,7 +438,7 @@ const Refresher = class {
         refreshingCircle.style.setProperty('animation-delay', '-655ms');
       });
     }
-    this.gesture = (await Promise.resolve().then(function () { return require('./index-5571e89c.js'); })).createGesture({
+    this.gesture = (await Promise.resolve().then(function () { return require('./index-d01d9183.js'); })).createGesture({
       el: this.scrollEl,
       gestureName: 'refresher',
       gesturePriority: 31,
@@ -543,7 +543,7 @@ const Refresher = class {
       this.setupNativeRefresher(contentEl);
     }
     else {
-      this.gesture = (await Promise.resolve().then(function () { return require('./index-5571e89c.js'); })).createGesture({
+      this.gesture = (await Promise.resolve().then(function () { return require('./index-d01d9183.js'); })).createGesture({
         el: contentEl,
         gestureName: 'refresher',
         gesturePriority: 31,

package/dist/cjs/ion-reorder-group.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6bf2cd3d.js');
-const ionicGlobal = require('./ionic-global-167e590d.js');
-const haptic = require('./haptic-415dac5b.js');
+const index = require('./index-0aae2825.js');
+const ionicGlobal = require('./ionic-global-a6599940.js');
+const haptic = require('./haptic-09e73337.js');
 
 const reorderGroupCss = ".reorder-list-active>*{transition:transform 300ms;will-change:transform}.reorder-enabled{user-select:none}.reorder-enabled ion-reorder{display:block;cursor:grab;pointer-events:all;touch-action:none}.reorder-selected,.reorder-selected ion-reorder{cursor:grabbing}.reorder-selected{position:relative;transition:none !important;box-shadow:0 0 10px rgba(0, 0, 0, 0.4);opacity:0.8;z-index:100}.reorder-visible ion-reorder .reorder-icon{transform:translate3d(0,  0,  0)}";
 
@@ -35,7 +35,7 @@ const ReorderGroup = class {
     if (contentEl) {
       this.scrollEl = await contentEl.getScrollElement();
     }
-    this.gesture = (await Promise.resolve().then(function () { return require('./index-5571e89c.js'); })).createGesture({
+    this.gesture = (await Promise.resolve().then(function () { return require('./index-d01d9183.js'); })).createGesture({
       el: this.el,
       gestureName: 'reorder',
       gesturePriority: 110,

package/dist/cjs/ion-reorder.cjs.entry.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6bf2cd3d.js');
-const ionicGlobal = require('./ionic-global-167e590d.js');
+const index = require('./index-0aae2825.js');
+const ionicGlobal = require('./ionic-global-a6599940.js');
 
 const reorderIosCss = ":host([slot]){display:none;line-height:0;z-index:100}.reorder-icon{display:block;font-size:22px}.reorder-icon{font-size:34px;opacity:0.4}";
 

package/dist/cjs/ion-route-redirect.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6bf2cd3d.js');
+const index = require('./index-0aae2825.js');
 
 const RouteRedirect = class {
   constructor(hostRef) {

package/dist/cjs/ion-route.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6bf2cd3d.js');
+const index = require('./index-0aae2825.js');
 
 const Route = class {
   constructor(hostRef) {

package/dist/cjs/ion-router-link.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6bf2cd3d.js');
-const ionicGlobal = require('./ionic-global-167e590d.js');
-const theme = require('./theme-98ccfc24.js');
+const index = require('./index-0aae2825.js');
+const ionicGlobal = require('./ionic-global-a6599940.js');
+const theme = require('./theme-2259d0f5.js');
 
 const routerLinkCss = ":host{--background:transparent;--color:var(--ion-color-primary, #3880ff);background:var(--background);color:var(--color)}:host(.ion-color){color:var(--ion-color-base)}a{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}";
 

package/dist/cjs/ion-router-outlet.cjs.entry.js

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6bf2cd3d.js');
-const ionicGlobal = require('./ionic-global-167e590d.js');
-const cubicBezier = require('./cubic-bezier-24e309bf.js');
-const frameworkDelegate = require('./framework-delegate-0a2d58a6.js');
-const index$1 = require('./index-b29012b2.js');
-require('./helpers-ff618d5e.js');
+const index = require('./index-0aae2825.js');
+const ionicGlobal = require('./ionic-global-a6599940.js');
+const cubicBezier = require('./cubic-bezier-dcb7bfef.js');
+const frameworkDelegate = require('./framework-delegate-c45292a3.js');
+const index$1 = require('./index-fdf96391.js');
+require('./helpers-398ced09.js');
 
 const routeOutletCss = ":host{left:0;right:0;top:0;bottom:0;position:absolute;contain:layout size style;overflow:hidden;z-index:0}";
 
@@ -39,7 +39,7 @@ const RouterOutlet = class {
         this.swipeHandler.onStart();
       }
     };
-    this.gesture = (await Promise.resolve().then(function () { return require('./swipe-back-a15422cc.js'); })).createSwipeBackGesture(this.el, () => !this.gestureOrAnimationInProgress && !!this.swipeHandler && this.swipeHandler.canStart(), () => onStart(), step => this.ani && this.ani.progressStep(step), (shouldComplete, step, dur) => {
+    this.gesture = (await Promise.resolve().then(function () { return require('./swipe-back-c4a778df.js'); })).createSwipeBackGesture(this.el, () => !this.gestureOrAnimationInProgress && !!this.swipeHandler && this.swipeHandler.canStart(), () => onStart(), step => this.ani && this.ani.progressStep(step), (shouldComplete, step, dur) => {
       if (this.ani) {
         this.ani.onFinish(() => {
           this.gestureOrAnimationInProgress = false;