@pod-os/elements 0.0.1 → 0.0.2-c322656

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

@@ -1,11 +1,11 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-82f710ea.js';
-import { c as config, g as getIonMode } from './ionic-global-fadc16f8.js';
-import { g as getTimeGivenProgression } from './cubic-bezier-ed243a9b.js';
-import { G as GESTURE_CONTROLLER } from './gesture-controller-604336b7.js';
-import { l as isEndSide, m as assert, c as clamp } from './helpers-dffac6f7.js';
-import { m as menuController } from './index-f910ce2c.js';
-import './hardware-back-button-508e48cf.js';
-import './animation-23699cc5.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-082b47ce.js';
+import { c as config, g as getIonMode } from './ionic-global-b8056dd2.js';
+import { g as getTimeGivenProgression } from './cubic-bezier-108b8579.js';
+import { G as GESTURE_CONTROLLER } from './gesture-controller-8f35af24.js';
+import { m as isEndSide, i as inheritAriaAttributes, n as assert, c as clamp } from './helpers-af16fc18.js';
+import { m as menuController } from './index-178a7a06.js';
+import './hardware-back-button-bb4c578a.js';
+import './animation-cb124ae5.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}";
 
@@ -15,6 +15,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) {
     registerInstance(this, hostRef);
@@ -27,6 +28,8 @@ const Menu = class {
     this.blocker = 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;
     /**
@@ -107,7 +110,7 @@ AFTER:
     this.sideChanged();
     // register this menu with the app's menu controller
     menuController._register(this);
-    this.gesture = (await import('./index-51ec9e66.js')).createGesture({
+    this.gesture = (await import('./index-3a1bd803.js')).createGesture({
       el: document,
       gestureName: 'menu-swipe',
       gesturePriority: 30,
@@ -121,6 +124,9 @@ AFTER:
     });
     this.updateState();
   }
+  componentWillLoad() {
+    this.inheritedAttributes = inheritAriaAttributes(this.el);
+  }
   async componentDidLoad() {
     this.ionMenuChange.emit({ disabled: this.disabled, open: this._isOpen });
     this.updateState();
@@ -154,6 +160,11 @@ AFTER:
       }
     }
   }
+  onKeydown(ev) {
+    if (ev.key === 'Escape') {
+      this.close();
+    }
+  }
   /**
    * Returns `true` is the menu is open.
    */
@@ -197,6 +208,62 @@ AFTER:
   setOpen(shouldOpen, animated = true) {
     return 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) {
@@ -341,6 +408,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);
     }
@@ -365,18 +441,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);
@@ -386,6 +488,8 @@ AFTER:
       }
       // emit close event
       this.ionDidClose.emit();
+      // undo focus trapping so multiple menus don't collide
+      document.removeEventListener('focus', this.handleFocus, true);
     }
   }
   updateState() {
@@ -411,9 +515,9 @@ AFTER:
     this.afterAnimation(false);
   }
   render() {
-    const { isEndSide, type, disabled, isPaneVisible } = this;
+    const { isEndSide, type, disabled, isPaneVisible, inheritedAttributes } = this;
     const mode = getIonMode(this);
-    return (h(Host, { role: "navigation", class: {
+    return (h(Host, { role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
         [mode]: true,
         [`menu-type-${type}`]: true,
         'menu-enabled': !disabled,

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

@@ -1,15 +1,15 @@
-import { r as registerInstance, c as createEvent, w as writeTask, h, H as Host, a as getElement } from './index-82f710ea.js';
-import { g as getIonMode, c as config } from './ionic-global-fadc16f8.js';
-import { a as attachComponent, d as detachComponent } from './framework-delegate-0a271c52.js';
-import { B as BACKDROP, a as prepareOverlay, p as present, c as activeAnimations, d as dismiss, e as eventMethod } from './overlays-6a09f1ef.js';
-import { g as getClassMap } from './theme-12606872.js';
-import { d as deepReady } from './index-db7c08b4.js';
-import { c as createAnimation } from './animation-23699cc5.js';
-import { g as getTimeGivenProgression } from './cubic-bezier-ed243a9b.js';
-import { createGesture } from './index-51ec9e66.js';
-import { c as clamp } from './helpers-dffac6f7.js';
-import './hardware-back-button-508e48cf.js';
-import './gesture-controller-604336b7.js';
+import { r as registerInstance, c as createEvent, w as writeTask, h, H as Host, a as getElement } from './index-082b47ce.js';
+import { g as getIonMode, c as config } from './ionic-global-b8056dd2.js';
+import { a as attachComponent, d as detachComponent } from './framework-delegate-ef487ffc.js';
+import { B as BACKDROP, a as prepareOverlay, p as present, c as activeAnimations, d as dismiss, e as eventMethod } from './overlays-423fcd0a.js';
+import { g as getClassMap } from './theme-d21826a7.js';
+import { d as deepReady } from './index-edb45c26.js';
+import { c as createAnimation } from './animation-cb124ae5.js';
+import { g as getTimeGivenProgression } from './cubic-bezier-108b8579.js';
+import { createGesture } from './index-3a1bd803.js';
+import { c as clamp } from './helpers-af16fc18.js';
+import './hardware-back-button-bb4c578a.js';
+import './gesture-controller-8f35af24.js';
 
 // Defaults for the card swipe animation
 const SwipeToCloseDefaults = {

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, a as getElement, H as Host } from './index-82f710ea.js';
+import { r as registerInstance, h, a as getElement, H as Host } from './index-082b47ce.js';
 
 const navLink = (el, routerDirection, component, componentProps, routerAnimation) => {
   const nav = el.closest('ion-nav');

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

@@ -1,9 +1,9 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-82f710ea.js';
-import { g as getIonMode, c as config } from './ionic-global-fadc16f8.js';
-import { g as getTimeGivenProgression } from './cubic-bezier-ed243a9b.js';
-import { m as assert } from './helpers-dffac6f7.js';
-import { l as lifecycle, t as transition, s as setPageHidden, L as LIFECYCLE_WILL_UNLOAD, a as LIFECYCLE_WILL_LEAVE, b as LIFECYCLE_DID_LEAVE } from './index-db7c08b4.js';
-import { a as attachComponent } from './framework-delegate-0a271c52.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-082b47ce.js';
+import { g as getIonMode, c as config } from './ionic-global-b8056dd2.js';
+import { g as getTimeGivenProgression } from './cubic-bezier-108b8579.js';
+import { n as assert } from './helpers-af16fc18.js';
+import { l as lifecycle, t as transition, s as setPageHidden, L as LIFECYCLE_WILL_UNLOAD, a as LIFECYCLE_WILL_LEAVE, b as LIFECYCLE_DID_LEAVE } from './index-edb45c26.js';
+import { a as attachComponent } from './framework-delegate-ef487ffc.js';
 
 const VIEW_STATE_NEW = 1;
 const VIEW_STATE_ATTACHED = 2;
@@ -140,7 +140,7 @@ const Nav = class {
   }
   async componentDidLoad() {
     this.rootChanged();
-    this.gesture = (await import('./swipe-back-5459ab3a.js')).createSwipeBackGesture(this.el, this.canStart.bind(this), this.onStart.bind(this), this.onMove.bind(this), this.onEnd.bind(this));
+    this.gesture = (await import('./swipe-back-7e655479.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/esm/ion-note.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host } from './index-82f710ea.js';
-import { g as getIonMode } from './ionic-global-fadc16f8.js';
-import { c as createColorClasses } from './theme-12606872.js';
+import { r as registerInstance, h, H as Host } from './index-082b47ce.js';
+import { g as getIonMode } from './ionic-global-b8056dd2.js';
+import { c as createColorClasses } from './theme-d21826a7.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/esm/ion-picker-column.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-82f710ea.js';
-import { g as getIonMode } from './ionic-global-fadc16f8.js';
-import { c as clamp } from './helpers-dffac6f7.js';
-import { b as hapticSelectionChanged, h as hapticSelectionEnd, a as hapticSelectionStart } from './haptic-67928174.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-082b47ce.js';
+import { g as getIonMode } from './ionic-global-b8056dd2.js';
+import { c as clamp } from './helpers-af16fc18.js';
+import { b as hapticSelectionChanged, h as hapticSelectionEnd, a as hapticSelectionStart } from './haptic-c424e670.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}";
 
@@ -31,7 +31,7 @@ const PickerColumnCmp = class {
     }
     this.rotateFactor = pickerRotateFactor;
     this.scaleFactor = pickerScaleFactor;
-    this.gesture = (await import('./index-51ec9e66.js')).createGesture({
+    this.gesture = (await import('./index-3a1bd803.js')).createGesture({
       el: this.el,
       gestureName: 'picker-swipe',
       gesturePriority: 100,

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

@@ -1,10 +1,10 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-82f710ea.js';
-import { g as getIonMode } from './ionic-global-fadc16f8.js';
-import { B as BACKDROP, i as isCancel, a as prepareOverlay, p as present, d as dismiss, e as eventMethod, s as safeCall } from './overlays-6a09f1ef.js';
-import { g as getClassMap } from './theme-12606872.js';
-import { c as createAnimation } from './animation-23699cc5.js';
-import './hardware-back-button-508e48cf.js';
-import './helpers-dffac6f7.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-082b47ce.js';
+import { g as getIonMode } from './ionic-global-b8056dd2.js';
+import { B as BACKDROP, i as isCancel, a as prepareOverlay, p as present, d as dismiss, e as eventMethod, s as safeCall } from './overlays-423fcd0a.js';
+import { g as getClassMap } from './theme-d21826a7.js';
+import { c as createAnimation } from './animation-cb124ae5.js';
+import './hardware-back-button-bb4c578a.js';
+import './helpers-af16fc18.js';
 
 /**
  * iOS Picker Enter Animation

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

@@ -1,12 +1,12 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-82f710ea.js';
-import { g as getIonMode } from './ionic-global-fadc16f8.js';
-import { a as attachComponent, d as detachComponent } from './framework-delegate-0a271c52.js';
-import { B as BACKDROP, a as prepareOverlay, p as present, d as dismiss, e as eventMethod } from './overlays-6a09f1ef.js';
-import { g as getClassMap } from './theme-12606872.js';
-import { d as deepReady } from './index-db7c08b4.js';
-import { c as createAnimation } from './animation-23699cc5.js';
-import './helpers-dffac6f7.js';
-import './hardware-back-button-508e48cf.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-082b47ce.js';
+import { g as getIonMode } from './ionic-global-b8056dd2.js';
+import { a as attachComponent, d as detachComponent } from './framework-delegate-ef487ffc.js';
+import { B as BACKDROP, a as prepareOverlay, p as present, d as dismiss, e as eventMethod } from './overlays-423fcd0a.js';
+import { g as getClassMap } from './theme-d21826a7.js';
+import { d as deepReady } from './index-edb45c26.js';
+import { c as createAnimation } from './animation-cb124ae5.js';
+import './helpers-af16fc18.js';
+import './hardware-back-button-bb4c578a.js';
 
 /**
  * iOS Popover Enter Animation
@@ -239,9 +239,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/esm/ion-range.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-82f710ea.js';
-import { g as getIonMode } from './ionic-global-fadc16f8.js';
-import { c as clamp, k as debounceEvent, i as inheritAttributes, e as getAriaLabel, f as renderHiddenInput } from './helpers-dffac6f7.js';
-import { c as createColorClasses, h as hostContext } from './theme-12606872.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-082b47ce.js';
+import { g as getIonMode } from './ionic-global-b8056dd2.js';
+import { c as clamp, k as debounceEvent, i as inheritAriaAttributes, e as getAriaLabel, f as renderHiddenInput } from './helpers-af16fc18.js';
+import { c as createColorClasses, h as hostContext } from './theme-d21826a7.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}";
 
@@ -87,7 +87,7 @@ const Range = class {
     this.setupGesture = async () => {
       const rangeSlider = this.rangeSlider;
       if (rangeSlider) {
-        this.gesture = (await import('./index-51ec9e66.js')).createGesture({
+        this.gesture = (await import('./index-3a1bd803.js')).createGesture({
           el: rangeSlider,
           gestureName: 'range',
           gesturePriority: 100,
@@ -161,7 +161,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 = inheritAttributes(this.el, ['aria-label']);
+    this.inheritedAttributes = inheritAriaAttributes(this.el);
   }
   componentDidLoad() {
     this.setupGesture();

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

@@ -1,7 +1,7 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-82f710ea.js';
-import { g as getIonMode, c as config, a as isPlatform } from './ionic-global-fadc16f8.js';
-import { s as sanitizeDOMString } from './index-cc97b114.js';
-import { S as SPINNERS } from './spinner-configs-9536fae2.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-082b47ce.js';
+import { g as getIonMode, c as config, a as isPlatform } from './ionic-global-b8056dd2.js';
+import { s as sanitizeDOMString } from './index-8d682224.js';
+import { S as SPINNERS } from './spinner-configs-aaf2a1a9.js';
 
 const RefresherContent = class {
   constructor(hostRef) {

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

@@ -1,9 +1,9 @@
-import { w as writeTask, r as registerInstance, c as createEvent, d as readTask, h, a as getElement, H as Host } from './index-82f710ea.js';
-import { a as isPlatform, g as getIonMode } from './ionic-global-fadc16f8.js';
-import { g as getTimeGivenProgression } from './cubic-bezier-ed243a9b.js';
-import { a as componentOnReady, c as clamp, g as getElementRoot, r as raf } from './helpers-dffac6f7.js';
-import { c as hapticImpact } from './haptic-67928174.js';
-import { c as createAnimation } from './animation-23699cc5.js';
+import { w as writeTask, r as registerInstance, c as createEvent, d as readTask, h, a as getElement, H as Host } from './index-082b47ce.js';
+import { a as isPlatform, g as getIonMode } from './ionic-global-b8056dd2.js';
+import { g as getTimeGivenProgression } from './cubic-bezier-108b8579.js';
+import { a as componentOnReady, c as clamp, g as getElementRoot, r as raf } from './helpers-af16fc18.js';
+import { c as hapticImpact } from './haptic-c424e670.js';
+import { c as createAnimation } from './animation-cb124ae5.js';
 
 const getRefresherAnimationType = (contentEl) => {
   const previousSibling = contentEl.previousElementSibling;
@@ -382,7 +382,7 @@ const Refresher = class {
       });
     };
     this.scrollEl.addEventListener('scroll', this.scrollListenerCallback);
-    this.gesture = (await import('./index-51ec9e66.js')).createGesture({
+    this.gesture = (await import('./index-3a1bd803.js')).createGesture({
       el: this.scrollEl,
       gestureName: 'refresher',
       gesturePriority: 31,
@@ -434,7 +434,7 @@ const Refresher = class {
         refreshingCircle.style.setProperty('animation-delay', '-655ms');
       });
     }
-    this.gesture = (await import('./index-51ec9e66.js')).createGesture({
+    this.gesture = (await import('./index-3a1bd803.js')).createGesture({
       el: this.scrollEl,
       gestureName: 'refresher',
       gesturePriority: 31,
@@ -539,7 +539,7 @@ const Refresher = class {
       this.setupNativeRefresher(contentEl);
     }
     else {
-      this.gesture = (await import('./index-51ec9e66.js')).createGesture({
+      this.gesture = (await import('./index-3a1bd803.js')).createGesture({
         el: contentEl,
         gestureName: 'refresher',
         gesturePriority: 31,

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, a as getElement, H as Host } from './index-82f710ea.js';
-import { g as getIonMode } from './ionic-global-fadc16f8.js';
-import { a as hapticSelectionStart, b as hapticSelectionChanged, h as hapticSelectionEnd } from './haptic-67928174.js';
+import { r as registerInstance, c as createEvent, h, a as getElement, H as Host } from './index-082b47ce.js';
+import { g as getIonMode } from './ionic-global-b8056dd2.js';
+import { a as hapticSelectionStart, b as hapticSelectionChanged, h as hapticSelectionEnd } from './haptic-c424e670.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)}";
 
@@ -31,7 +31,7 @@ const ReorderGroup = class {
     if (contentEl) {
       this.scrollEl = await contentEl.getScrollElement();
     }
-    this.gesture = (await import('./index-51ec9e66.js')).createGesture({
+    this.gesture = (await import('./index-3a1bd803.js')).createGesture({
       el: this.el,
       gestureName: 'reorder',
       gesturePriority: 110,

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-82f710ea.js';
-import { g as getIonMode } from './ionic-global-fadc16f8.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-082b47ce.js';
+import { g as getIonMode } from './ionic-global-b8056dd2.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/esm/ion-route-redirect.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent } from './index-82f710ea.js';
+import { r as registerInstance, c as createEvent } from './index-082b47ce.js';
 
 const RouteRedirect = class {
   constructor(hostRef) {

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent } from './index-82f710ea.js';
+import { r as registerInstance, c as createEvent } from './index-082b47ce.js';
 
 const Route = class {
   constructor(hostRef) {

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host } from './index-82f710ea.js';
-import { g as getIonMode } from './ionic-global-fadc16f8.js';
-import { o as openURL, c as createColorClasses } from './theme-12606872.js';
+import { r as registerInstance, h, H as Host } from './index-082b47ce.js';
+import { g as getIonMode } from './ionic-global-b8056dd2.js';
+import { o as openURL, c as createColorClasses } from './theme-d21826a7.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/esm/ion-router-outlet.entry.js

@@ -1,9 +1,9 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-82f710ea.js';
-import { g as getIonMode, c as config } from './ionic-global-fadc16f8.js';
-import { g as getTimeGivenProgression } from './cubic-bezier-ed243a9b.js';
-import { a as attachComponent, d as detachComponent } from './framework-delegate-0a271c52.js';
-import { t as transition } from './index-db7c08b4.js';
-import './helpers-dffac6f7.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-082b47ce.js';
+import { g as getIonMode, c as config } from './ionic-global-b8056dd2.js';
+import { g as getTimeGivenProgression } from './cubic-bezier-108b8579.js';
+import { a as attachComponent, d as detachComponent } from './framework-delegate-ef487ffc.js';
+import { t as transition } from './index-edb45c26.js';
+import './helpers-af16fc18.js';
 
 const routeOutletCss = ":host{left:0;right:0;top:0;bottom:0;position:absolute;contain:layout size style;overflow:hidden;z-index:0}";
 
@@ -35,7 +35,7 @@ const RouterOutlet = class {
         this.swipeHandler.onStart();
       }
     };
-    this.gesture = (await import('./swipe-back-5459ab3a.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 import('./swipe-back-7e655479.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;

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, a as getElement } from './index-82f710ea.js';
-import { a as componentOnReady, n as debounce } from './helpers-dffac6f7.js';
+import { r as registerInstance, c as createEvent, a as getElement } from './index-082b47ce.js';
+import { a as componentOnReady, o as debounce } from './helpers-af16fc18.js';
 
 const ROUTER_INTENT_NONE = 'root';
 const ROUTER_INTENT_FORWARD = 'forward';
@@ -224,13 +224,54 @@ const findRouteRedirect = (path, redirects) => {
 };
 const matchesIDs = (ids, chain) => {
   const len = Math.min(ids.length, chain.length);
-  let i = 0;
-  for (; i < len; i++) {
-    if (ids[i].toLowerCase() !== chain[i].id) {
+  let score = 0;
+  for (let i = 0; i < len; i++) {
+    const routeId = ids[i];
+    const routeChain = chain[i];
+    // Skip results where the route id does not match the chain at the same index
+    if (routeId.id.toLowerCase() !== routeChain.id) {
       break;
     }
+    if (routeId.params) {
+      const routeIdParams = Object.keys(routeId.params);
+      /**
+       * Only compare routes with the chain that have the same number of parameters.
+       */
+      if (routeIdParams.length === routeChain.path.length) {
+        /**
+         * Maps the route's params into a path based on the path variable names,
+         * to compare against the route chain format.
+         *
+         * Before:
+         * ```ts
+         * {
+         *  params: {
+         *    s1: 'a',
+         *    s2: 'b'
+         *  }
+         * }
+         * ```
+         *
+         * After:
+         * ```ts
+         * [':s1',':s2']
+         * ```
+         */
+        const pathWithParams = routeIdParams.map(key => `:${key}`);
+        for (let j = 0; j < pathWithParams.length; j++) {
+          // Skip results where the path variable is not a match
+          if (pathWithParams[j].toLowerCase() !== routeChain.path[j]) {
+            break;
+          }
+          // Weight path matches for the same index higher.
+          score++;
+        }
+      }
+    }
+    // Weight id matches
+    score++;
   }
-  return i;
+  return score;
 };
 const matchesPath = (inputPath, chain) => {
   const segments = new RouterSegments(inputPath);
@@ -285,9 +326,8 @@ const mergeParams = (a, b) => {
 const routerIDsToChain = (ids, chains) => {
   let match = null;
   let maxMatches = 0;
-  const plainIDs = ids.map(i => i.id);
   for (const chain of chains) {
-    const score = matchesIDs(plainIDs, chain);
+    const score = matchesIDs(ids, chain);
     if (score > maxMatches) {
       match = chain;
       maxMatches = score;