voyager-ionic-core 8.8.12 → 9.0.1

package/dist/collection/components/popover/utils.js

@@ -314,10 +314,9 @@ const focusItem = (item) => {
 export const isTriggerElement = (el) => el.hasAttribute('data-ion-popover-trigger');
 export const configureKeyboardInteraction = (popoverEl) => {
     const callback = async (ev) => {
-        var _a;
         const activeElement = document.activeElement;
         let items = [];
-        const targetTagName = (_a = ev.target) === null || _a === void 0 ? void 0 : _a.tagName;
+        const targetTagName = ev.target?.tagName;
         /**
          * Only handle custom keyboard interactions for the host popover element
          * and children ion-item elements.
@@ -338,7 +337,7 @@ export const configureKeyboardInteraction = (popoverEl) => {
             items = Array.from(popoverEl.querySelectorAll('ion-item:not(ion-popover ion-popover *):not([disabled])'));
             /* eslint-disable-next-line */
         }
-        catch (_b) { }
+        catch { }
         switch (ev.key) {
             /**
              * If we are in a child popover
@@ -421,7 +420,6 @@ export const configureKeyboardInteraction = (popoverEl) => {
  * and viewport dimensions.
  */
 export const getPopoverPosition = (isRTL, contentWidth, contentHeight, arrowWidth, arrowHeight, reference, side, align, defaultPosition, triggerEl, event) => {
-    var _a;
     let referenceCoordinates = {
         top: 0,
         left: 0,
@@ -466,8 +464,8 @@ export const getPopoverPosition = (isRTL, contentWidth, contentHeight, arrowWidt
              * as a whole.
              */
             const actualTriggerEl = (triggerEl ||
-                ((_a = customEv === null || customEv === void 0 ? void 0 : customEv.detail) === null || _a === void 0 ? void 0 : _a.ionShadowTarget) ||
-                (customEv === null || customEv === void 0 ? void 0 : customEv.target));
+                customEv?.detail?.ionShadowTarget ||
+                customEv?.target);
             if (!actualTriggerEl) {
                 return defaultPosition;
             }

package/dist/collection/components/progress-bar/progress-bar.js

@@ -43,7 +43,7 @@ export class ProgressBar {
         const mode = getIonMode(this);
         // If the progress is displayed as a solid bar.
         const progressSolid = buffer === 1;
-        return (h(Host, { key: 'c859e48f3d24a458239e36d925e5dc003ed07c6b', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses(color, {
+        return (h(Host, { key: 'd53d39a3e2c0198164a9face62d3775f357b6914', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses(color, {
                 [mode]: true,
                 [`progress-bar-${type}`]: true,
                 'progress-paused': paused,

package/dist/collection/components/radio/radio.ios.css

@@ -130,6 +130,17 @@ input {
   width: auto;
 }
 
+:host(.ion-focused) .radio-icon::after {
+  border-radius: var(--inner-border-radius);
+  display: block;
+  position: absolute;
+  width: 36px;
+  height: 36px;
+  background: var(--ion-color-primary-tint, #1a65eb);
+  content: "";
+  opacity: 0.2;
+}
+
 .radio-wrapper {
   display: flex;
   position: relative;
@@ -456,21 +467,6 @@ input {
   opacity: 0.3;
 }
 
-:host(.ion-focused) .radio-icon::after {
-  border-radius: var(--inner-border-radius);
-  top: -8px;
-  display: block;
-  position: absolute;
-  width: 36px;
-  height: 36px;
-  background: var(--ion-color-primary-tint, #1a65eb);
-  content: "";
-  opacity: 0.2;
-}
-:host(.ion-focused) .radio-icon::after {
-  inset-inline-start: -9px;
-}
-
 .native-wrapper .radio-icon {
   width: 0.9375rem;
   height: 1.5rem;

package/dist/collection/components/radio/radio.js

@@ -1,8 +1,8 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { Host, h } from "@stencil/core";
-import { isOptionSelected } from "../../utils/forms/index";
+import { Host, forceUpdate, h } from "@stencil/core";
+import { createItemMultipleInputsObserver, isOptionSelected } from "../../utils/forms/index";
 import { addEventListener, removeEventListener } from "../../utils/helpers";
 import { createColorClasses, hostContext } from "../../utils/theme";
 import { getIonMode } from "../../global/ionic-global";
@@ -64,7 +64,7 @@ export class Radio {
              * Otherwise, the checked state should always be set
              * to true because the checked state cannot be toggled.
              */
-            if (checked && (radioGroup === null || radioGroup === void 0 ? void 0 : radioGroup.allowEmptySelection)) {
+            if (checked && radioGroup?.allowEmptySelection) {
                 this.checked = false;
             }
             else {
@@ -118,6 +118,7 @@ export class Radio {
             this.updateState();
             addEventListener(radioGroup, 'ionValueChange', this.updateState);
         }
+        this.itemFocusObserver = createItemMultipleInputsObserver(this.el, () => forceUpdate(this));
     }
     disconnectedCallback() {
         const radioGroup = this.radioGroup;
@@ -125,6 +126,10 @@ export class Radio {
             removeEventListener(radioGroup, 'ionValueChange', this.updateState);
             this.radioGroup = null;
         }
+        if (this.itemFocusObserver) {
+            this.itemFocusObserver.disconnect();
+            this.itemFocusObserver = undefined;
+        }
     }
     get hasLabel() {
         return this.el.textContent !== '';
@@ -136,7 +141,8 @@ export class Radio {
         const { checked, disabled, color, el, justify, labelPlacement, hasLabel, buttonTabindex, alignment } = this;
         const mode = getIonMode(this);
         const inItem = hostContext('ion-item', el);
-        return (h(Host, { key: 'af5dc59ed528150872e907ed1036e3e2decba939', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
+        const inMultipleInputsItem = hostContext('ion-item.item-multiple-inputs', el);
+        return (h(Host, { key: 'ad7ac0bdc4d3216ecc19402e5b8d6f9e4d09334b', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
                 [mode]: true,
                 'in-item': inItem,
                 'radio-checked': checked,
@@ -144,13 +150,15 @@ export class Radio {
                 [`radio-justify-${justify}`]: justify !== undefined,
                 [`radio-alignment-${alignment}`]: alignment !== undefined,
                 [`radio-label-placement-${labelPlacement}`]: true,
-                // Focus and active styling should not apply when the radio is in an item
+                // A single-input item has the input cover and draws the indicator itself.
+                // A multi-input item has no cover, so each control draws its own. Active
+                // styling stays suppressed either way.
                 'ion-activatable': !inItem,
-                'ion-focusable': !inItem,
-            }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, h("label", { key: '1312aba3259a87fe23a6911cdfa477e309469c8b', class: "radio-wrapper" }, h("div", { key: 'b342aa27e240a300836d2a135658d346b95daf09', class: {
+                'ion-focusable': !inItem || inMultipleInputsItem,
+            }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, h("label", { key: '59c09125633120e2000447b8a3bc24c54490aa85', class: "radio-wrapper" }, h("div", { key: '1a98f3e0027deeac52647ba37aa9a99be0231966', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label" }, h("slot", { key: '0a4613d29aa783d1882cf889377f7e4fd4fea51d' })), h("div", { key: '191faea79dc4cd8befc4b873f5bd9f5af8ca2acc', class: "native-wrapper" }, this.renderRadioControl()))));
+            }, part: "label" }, h("slot", { key: '6a48e76ac8793d2aacebd3a8f193e3537272e5c2' })), h("div", { key: '68e4350bac8dad29c6b7a180560de2bb4dfc8c41', class: "native-wrapper" }, this.renderRadioControl()))));
     }
     static get is() { return "ion-radio"; }
     static get encapsulation() { return "shadow"; }
@@ -250,7 +258,7 @@ export class Radio {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "value"
             },
             "labelPlacement": {

package/dist/collection/components/radio/radio.md.css

@@ -130,6 +130,17 @@ input {
   width: auto;
 }
 
+:host(.ion-focused) .radio-icon::after {
+  border-radius: var(--inner-border-radius);
+  display: block;
+  position: absolute;
+  width: 36px;
+  height: 36px;
+  background: var(--ion-color-primary-tint, #1a65eb);
+  content: "";
+  opacity: 0.2;
+}
+
 .radio-wrapper {
   display: flex;
   position: relative;
@@ -477,17 +488,6 @@ input {
   opacity: 0.63;
 }
 
-:host(.ion-focused) .radio-icon::after {
-  border-radius: var(--inner-border-radius);
-  display: block;
-  position: absolute;
-  width: 36px;
-  height: 36px;
-  background: var(--ion-color-primary-tint, #1a65eb);
-  content: "";
-  opacity: 0.2;
-}
-
 .native-wrapper .radio-icon {
   width: 1.25rem;
   height: 1.25rem;

package/dist/collection/components/radio-group/radio-group.js

@@ -223,7 +223,7 @@ export class RadioGroup {
     /** @internal */
     async setFocus() {
         const radioToFocus = this.getRadios().find((r) => r.tabIndex !== -1);
-        radioToFocus === null || radioToFocus === void 0 ? void 0 : radioToFocus.setFocus();
+        radioToFocus?.setFocus();
     }
     /**
      * Renders the helper text or error text values
@@ -250,7 +250,7 @@ export class RadioGroup {
         const { label, labelId, el, name, value } = this;
         const mode = getIonMode(this);
         renderHiddenInput(true, el, name, value, false);
-        return (h(Host, { key: '377e4aa3a656cc84b742f9d7a7d4be65d20c69f5', role: "radiogroup", "aria-labelledby": label ? labelId : null, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick, class: mode }, this.renderHintText(), h("slot", { key: 'c3187a2497773b4f15cea3b413b036502bcec8c0' })));
+        return (h(Host, { key: '8d926a17e800adf0184274215c9689c96a8d6dfd', role: "radiogroup", "aria-labelledby": label ? labelId : null, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick, class: mode }, this.renderHintText(), h("slot", { key: '2ff891123d5971a581b70d0886d23a074358c2dc' })));
     }
     static get is() { return "ion-radio-group"; }
     static get originalStyleUrls() {

package/dist/collection/components/range/range.js

@@ -64,7 +64,9 @@ export class Range {
          */
         this.name = this.rangeId;
         /**
-         * Show two knobs.
+         * If `true`, the range shows two knobs and `value` is an object with `lower`
+         * and `upper` properties. If `false`, the range shows one knob and `value` is
+         * a number.
          */
         this.dualKnobs = false;
         /**
@@ -175,9 +177,9 @@ export class Range {
             const knobHandleA = this.el.shadowRoot.querySelector('.range-knob-handle-a');
             const knobHandleB = this.el.shadowRoot.querySelector('.range-knob-handle-b');
             const syncActivated = () => {
-                this.activatedKnob = (knobHandleA === null || knobHandleA === void 0 ? void 0 : knobHandleA.classList.contains('ion-activated'))
+                this.activatedKnob = knobHandleA?.classList.contains('ion-activated')
                     ? 'A'
-                    : (knobHandleB === null || knobHandleB === void 0 ? void 0 : knobHandleB.classList.contains('ion-activated'))
+                    : knobHandleB?.classList.contains('ion-activated')
                         ? 'B'
                         : undefined;
             };
@@ -243,8 +245,7 @@ export class Range {
             // Check if focus is moving to another knob within the same range
             // by delaying the reset to allow the new focus to register
             setTimeout(() => {
-                var _a;
-                const activeElement = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement;
+                const activeElement = this.el.shadowRoot?.activeElement;
                 const isStillFocusedOnKnob = activeElement && activeElement.classList.contains('range-knob-handle');
                 if (!isStillFocusedOnKnob) {
                     if (this.hasFocus) {
@@ -268,7 +269,12 @@ export class Range {
          * If debounce is undefined, we have to manually revert the ionInput emitter in case
          * debounce used to be set to a number. Otherwise, the event would stay debounced.
          */
-        this.ionInput = debounce === undefined ? originalIonInput !== null && originalIonInput !== void 0 ? originalIonInput : ionInput : debounceEvent(ionInput, debounce);
+        this.ionInput = debounce === undefined ? originalIonInput ?? ionInput : debounceEvent(ionInput, debounce);
+    }
+    dualKnobsChanged() {
+        if (!this.noUpdate) {
+            this.updateRatio();
+        }
     }
     minChanged(newValue) {
         if (!isSafeNumber(newValue)) {
@@ -341,7 +347,6 @@ export class Range {
         this.didLoad = true;
     }
     connectedCallback() {
-        var _a;
         this.updateRatio();
         this.debounceChanged();
         this.disabledChanged();
@@ -357,7 +362,7 @@ export class Range {
             this.setupActivatedObserver();
         }
         const ionContent = findClosestIonContent(this.el);
-        this.contentEl = (_a = ionContent === null || ionContent === void 0 ? void 0 : ionContent.querySelector('.ion-content-scroll-host')) !== null && _a !== void 0 ? _a : ionContent;
+        this.contentEl = ionContent?.querySelector('.ion-content-scroll-host') ?? ionContent;
     }
     disconnectedCallback() {
         if (this.gesture) {
@@ -370,8 +375,7 @@ export class Range {
         }
     }
     getValue() {
-        var _a;
-        const value = (_a = this.value) !== null && _a !== void 0 ? _a : 0;
+        const value = this.value ?? 0;
         if (this.dualKnobs) {
             if (typeof value === 'object') {
                 return value;
@@ -457,9 +461,8 @@ export class Range {
      * @param detail The details of the gesture or mouse event.
      */
     onEnd(detail) {
-        var _a;
         const { contentEl, initialContentScrollY } = this;
-        const currentX = (_a = detail.currentX) !== null && _a !== void 0 ? _a : detail.clientX;
+        const currentX = detail.currentX ?? detail.clientX;
         /**
          * The `pressedKnob` can be undefined if the user never
          * dragged the knob. They just tapped on the bar.
@@ -595,7 +598,6 @@ export class Range {
         return this.label !== undefined || this.el.querySelector('[slot="label"]') !== null;
     }
     renderRangeSlider() {
-        var _a;
         const { min, max, step, handleKeyboard, activatedKnob, focusedKnob, hoveredKnob, pressedKnob, disabled, pin, ratioLower, ratioUpper, pinFormatter, inheritedAttributes, } = this;
         let barStart = `${ratioLower * 100}%`;
         let barEnd = `${100 - ratioUpper * 100}%`;
@@ -612,7 +614,7 @@ export class Range {
              * When the value is less than the activeBarStart or the min value,
              * the knob will display at the start of the active bar.
              */
-            if (this.valA < ((_a = this.activeBarStart) !== null && _a !== void 0 ? _a : this.min)) {
+            if (this.valA < (this.activeBarStart ?? this.min)) {
                 /**
                  * Sets the bar positions relative to the upper and lower limits.
                  * Converts the ratio values into percentages, used as offsets for left/right styles.
@@ -760,7 +762,7 @@ export class Range {
          * Determine the name and position of the pressed knob to apply
          * Host classes for styling.
          */
-        const pressedKnobName = dualKnobs ? pressedKnob === null || pressedKnob === void 0 ? void 0 : pressedKnob.toLowerCase() : undefined;
+        const pressedKnobName = dualKnobs ? pressedKnob?.toLowerCase() : undefined;
         const pressedKnobPosition = dualKnobs && pressedKnob ? getKnobPosition(pressedKnob, this.ratioA, this.ratioB, dualKnobs) : undefined;
         /**
          * Determine if any knob is at the min or max value to
@@ -769,7 +771,7 @@ export class Range {
         const valueAtMin = dualKnobs ? this.valA === min || this.valB === min : this.valA === min;
         const valueAtMax = dualKnobs ? this.valA === max || this.valB === max : this.valA === max;
         renderHiddenInput(true, el, this.name, JSON.stringify(this.getValue()), disabled);
-        return (h(Host, { key: 'f8063d1234fb113fe55a7902845dd4b4da8b1edb', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses(this.color, {
+        return (h(Host, { key: '72f253ee1514b4c5874a6720c2f954fae7a7c4d4', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'range-disabled': disabled,
@@ -783,10 +785,10 @@ export class Range {
                 'range-item-end-adjustment': needsEndAdjustment,
                 'range-value-min': valueAtMin,
                 'range-value-max': valueAtMax,
-            }) }, h("label", { key: 'beead65ab01e3b18e4be59c0ee8ac6ebf32aad7c', class: "range-wrapper", id: "range-label" }, h("div", { key: '03633c689d9d2e4c50a2131bcd560329df49e314', class: {
+            }) }, h("label", { key: '9b96b83a6118ee2a79d8adbb0a58197470308179', class: "range-wrapper", id: "range-label" }, h("div", { key: 'c7b31a7c87c20857a26624bd94501df6420fceec', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label" }, label !== undefined ? h("div", { class: "label-text" }, label) : h("slot", { name: "label" })), h("div", { key: 'c066804263ab6ae7393f8dcc51184b7198844ffa', class: "native-wrapper" }, h("slot", { key: '7e8ea224d72b3e965dd948bee7e45c1a096b6899', name: "start" }), this.renderRangeSlider(), h("slot", { key: '21f242f6f60ff3adce6a2d90b2d4dac1ceaf6624', name: "end" })))));
+            }, part: "label" }, label !== undefined ? h("div", { class: "label-text" }, label) : h("slot", { name: "label" })), h("div", { key: '4ca15b9370097e140550489ff24979f3a959e65b', class: "native-wrapper" }, h("slot", { key: 'f110896c68741bad92239f98b6028cbe0ad5122f', name: "start" }), this.renderRangeSlider(), h("slot", { key: '5c4031c4403fa643ee2e11637b2420ddd8cbc4ce', name: "end" })))));
     }
     static get is() { return "ion-range"; }
     static get encapsulation() { return "shadow"; }
@@ -900,7 +902,7 @@ export class Range {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Show two knobs."
+                    "text": "If `true`, the range shows two knobs and `value` is an object with `lower`\nand `upper` properties. If `false`, the range shows one knob and `value` is\na number."
                 },
                 "getter": false,
                 "setter": false,
@@ -1277,6 +1279,9 @@ export class Range {
         return [{
                 "propName": "debounce",
                 "methodName": "debounceChanged"
+            }, {
+                "propName": "dualKnobs",
+                "methodName": "dualKnobsChanged"
             }, {
                 "propName": "min",
                 "methodName": "minChanged"

package/dist/collection/components/refresher/refresher.js

@@ -3,7 +3,7 @@
  */
 import { Host, h, readTask, writeTask } from "@stencil/core";
 import { getTimeGivenProgression } from "../../utils/animation/cubic-bezier";
-import { getScrollElement, ION_CONTENT_CLASS_SELECTOR, ION_CONTENT_ELEMENT_SELECTOR, printIonContentErrorMsg, } from "../../utils/content/index";
+import { findRefresherScrollHost, getScrollElement, ION_CONTENT_CLASS_SELECTOR, ION_CONTENT_ELEMENT_SELECTOR, printIonContentErrorMsg, } from "../../utils/content/index";
 import { clamp, componentOnReady, getElementRoot, raf, transitionEndAsync } from "../../utils/helpers";
 import { printIonError } from "../../utils/logging/index";
 import { ImpactStyle, hapticImpact } from "../../utils/native/haptic";
@@ -184,7 +184,7 @@ export class Refresher {
                          * when the refresh completes
                          */
                         const activeElement = document.activeElement;
-                        if ((activeElement === null || activeElement === void 0 ? void 0 : activeElement.blur) !== undefined) {
+                        if (activeElement?.blur !== undefined) {
                             activeElement.blur();
                         }
                         /**
@@ -203,7 +203,16 @@ export class Refresher {
             });
         };
         this.scrollEl.addEventListener('scroll', this.scrollListenerCallback);
-        this.gesture = (await import('../../utils/gesture')).createGesture({
+        const { createGesture } = await import('../../utils/gesture');
+        /**
+         * Awaiting the dynamic import yields to the event loop, so the component can
+         * disconnect before it resolves. disconnectedCallback clears scrollEl, so a
+         * missing scrollEl here means there is nothing left to attach a gesture to.
+         */
+        if (!this.scrollEl) {
+            return;
+        }
+        this.gesture = createGesture({
             el: this.scrollEl,
             gestureName: 'refresher',
             gesturePriority: 31,
@@ -263,7 +272,16 @@ export class Refresher {
                 refreshingCircle.style.setProperty('animation-delay', '-655ms');
             });
         }
-        this.gesture = (await import('../../utils/gesture')).createGesture({
+        const { createGesture } = await import('../../utils/gesture');
+        /**
+         * Awaiting the dynamic import yields to the event loop, so the component can
+         * disconnect before it resolves. disconnectedCallback clears scrollEl, so a
+         * missing scrollEl here means there is nothing left to attach a gesture to.
+         */
+        if (!this.scrollEl) {
+            return;
+        }
+        this.gesture = createGesture({
             el: this.scrollEl,
             gestureName: 'refresher',
             gesturePriority: 31,
@@ -360,11 +378,18 @@ export class Refresher {
     componentDidUpdate() {
         this.checkNativeRefresher();
     }
-    async connectedCallback() {
+    /**
+     * Validate the slot attribute before rendering, while the host still reflects the
+     * developer's original markup. `connectedCallback` is too early: in the custom
+     * elements build it runs during insertion, before frameworks such as React assign
+     * the slot.
+     */
+    componentWillLoad() {
         if (this.el.getAttribute('slot') !== 'fixed') {
             printIonError('[ion-refresher] - Make sure you use: <ion-refresher slot="fixed">');
-            return;
         }
+    }
+    async connectedCallback() {
         const contentEl = this.el.closest(ION_CONTENT_ELEMENT_SELECTOR);
         if (!contentEl) {
             printIonContentErrorMsg(this.el);
@@ -375,14 +400,14 @@ export class Refresher {
          * or the background content element.
          */
         componentOnReady(contentEl, async () => {
-            const customScrollTarget = contentEl.querySelector(ION_CONTENT_CLASS_SELECTOR);
+            const customScrollTarget = findRefresherScrollHost(contentEl);
             /**
              * Query the custom scroll target (if available), first. In refresher implementations,
              * the ion-refresher element will always be a direct child of ion-content (slot="fixed"). By
              * querying the custom scroll target first and falling back to the ion-content element,
              * the correct scroll element will be returned by the implementation.
              */
-            this.scrollEl = await getScrollElement(customScrollTarget !== null && customScrollTarget !== void 0 ? customScrollTarget : contentEl);
+            this.scrollEl = await getScrollElement(customScrollTarget ?? contentEl);
             /**
              * Query the background content element from the host ion-content element directly.
              */
@@ -397,7 +422,16 @@ export class Refresher {
                 this.setupNativeRefresher(contentEl);
             }
             else {
-                this.gesture = (await import('../../utils/gesture')).createGesture({
+                const { createGesture } = await import('../../utils/gesture');
+                /**
+                 * Awaiting the dynamic import yields to the event loop, so the component can
+                 * disconnect before it resolves. A disconnected contentEl means there is
+                 * nothing left to attach a gesture to.
+                 */
+                if (!contentEl.isConnected) {
+                    return;
+                }
+                this.gesture = createGesture({
                     el: contentEl,
                     gestureName: 'refresher',
                     gesturePriority: 31,
@@ -628,7 +662,7 @@ export class Refresher {
          * This ensures the view stays at the top after refresh completes.
          */
         const activeElement = document.activeElement;
-        if ((activeElement === null || activeElement === void 0 ? void 0 : activeElement.blur) !== undefined) {
+        if (activeElement?.blur !== undefined) {
             activeElement.blur();
         }
         // emit "refresh" because it was pulled down far enough
@@ -640,7 +674,6 @@ export class Refresher {
     close(state, delay) {
         // create fallback timer incase something goes wrong with transitionEnd event
         setTimeout(() => {
-            var _a;
             this.state = 1 /* RefresherState.Inactive */;
             this.progress = 0;
             this.didStart = false;
@@ -658,7 +691,7 @@ export class Refresher {
              * does not change when refreshing is complete.
              */
             if (this.contentFullscreen && this.backgroundContentEl) {
-                (_a = this.backgroundContentEl) === null || _a === void 0 ? void 0 : _a.style.removeProperty('--offset-top');
+                this.backgroundContentEl?.style.removeProperty('--offset-top');
             }
             this.ionPullEnd.emit({
                 reason: state === 32 /* RefresherState.Completing */ ? 'complete' : 'cancel',
@@ -699,9 +732,9 @@ export class Refresher {
         if (this.scrollEl) {
             const { overflow, overflowX, overflowY } = this.scrollEl.style;
             this.overflowStyles = {
-                overflow: overflow !== null && overflow !== void 0 ? overflow : '',
-                overflowX: overflowX !== null && overflowX !== void 0 ? overflowX : '',
-                overflowY: overflowY !== null && overflowY !== void 0 ? overflowY : '',
+                overflow: overflow ?? '',
+                overflowX: overflowX ?? '',
+                overflowY: overflowY ?? '',
             };
         }
     }
@@ -716,7 +749,7 @@ export class Refresher {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '80fa313b0d77161680836bdd6aa334d02c549b41', slot: "fixed", class: {
+        return (h(Host, { key: 'fd9c8e51155d56f12148e8eb547e45c05807b4b5', slot: "fixed", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`refresher-${mode}`]: true,

package/dist/collection/components/refresher-content/refresher-content.js

@@ -48,7 +48,7 @@ export class RefresherContent {
         const pullingIcon = this.pullingIcon;
         const hasSpinner = pullingIcon != null && SPINNERS[pullingIcon] !== undefined;
         const mode = getIonMode(this);
-        return (h(Host, { key: '4add42b9fdfded359d1b054d04c2c6ff48e028c8', class: mode }, h("div", { key: '45d4e4e0adfed7f96dd1849767aa2cde947de044', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (h("div", { key: '6bd6c8ef5bf6e10699eec3bd8646431bfe1077a0', class: "refresher-pulling-icon" }, h("div", { key: '852d20414da53352c8e58bc627e0fda38eff97cb', class: "spinner-arrow-container" }, h("ion-spinner", { key: '0dde3578a80cc4b77a07c4d1db1af80c7eb10c27', name: this.pullingIcon, paused: true }), mode === 'md' && this.pullingIcon === 'circular' && (h("div", { key: 'c71dbfcf416a19c30fed38f722ebf0358c2181dd', class: "arrow-container" }, h("ion-icon", { key: 'fa7c2cf624e7a9c41964e66cabc88c594da6d1fd', icon: caretBackSharp, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (h("div", { key: '3dd68c9968b421c379d1c4349ba619ee0a189c6d', class: "refresher-pulling-icon" }, h("ion-icon", { key: 'f83bceceae4fa8245f91939fb6db589a595e975b', icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), h("div", { key: '98e22ceb0f7883e871f815f6199f5cb313e2e086', class: "refresher-refreshing" }, this.refreshingSpinner && (h("div", { key: 'faabe8a9b61c02a00994ef978bb82b9ba4537214', class: "refresher-refreshing-icon" }, h("ion-spinner", { key: '029a0c073ee1a07f01211e12ba2abc985cf21ed7', name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
+        return (h(Host, { key: 'a1546008813bbcfa70f97e9b9025846ee0aed722', class: mode }, h("div", { key: '5422771d67fe201e22d4f9d7db6b685f3db5d99d', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (h("div", { key: '5c2b6dfc3f01b42586ea83380548d454b220a7ca', class: "refresher-pulling-icon" }, h("div", { key: '2c3799ca3f66960d7081c63c5a0840951f694baf', class: "spinner-arrow-container" }, h("ion-spinner", { key: '03f766a9b9354dcb8f6975757a9b882c2eb5cf4a', name: this.pullingIcon, paused: true }), mode === 'md' && this.pullingIcon === 'circular' && (h("div", { key: 'e5f4ba7c6a70adb71f8985af0e23aca07d7b005a', class: "arrow-container" }, h("ion-icon", { key: 'ddccbd9164ae8daa97178fc53b52f74f1fd298ef', icon: caretBackSharp, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (h("div", { key: '6fb742f47f9149fa6dc3daefe5aaa77f925da4bd', class: "refresher-pulling-icon" }, h("ion-icon", { key: '907657135eeac4c394be1eae4a659664a7bfacb0', icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), h("div", { key: 'fb3094b3ed7e100ab9641c3221770889088e27f3', class: "refresher-refreshing" }, this.refreshingSpinner && (h("div", { key: 'bc8078f94e7cea3cb6f03a09e98540f0e0b38721', class: "refresher-refreshing-icon" }, h("ion-spinner", { key: '8f39524f073aa828e941bcdd4d48e4d5dfc759c6', name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
     }
     static get is() { return "ion-refresher-content"; }
     static get properties() {

package/dist/collection/components/reorder/reorder.js

@@ -20,7 +20,7 @@ export class Reorder {
     render() {
         const mode = getIonMode(this);
         const reorderIcon = mode === 'ios' ? reorderThreeOutline : reorderTwoSharp;
-        return (h(Host, { key: 'b869db61ca6393cf1476f2111a66b387b567c6d1', class: mode }, h("slot", { key: 'a78edd1776835282b8b5c841377018f36c83296c' }, h("ion-icon", { key: '7fb067c47bbb9a7258e5063f028282cc097d0f94', icon: reorderIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
+        return (h(Host, { key: 'f278c473b4695a6a93565100e4fcaa7f9e3e9ff5', class: mode }, h("slot", { key: 'cc26b5ed297f68a0bea82e27e34a7fe945186f4e' }, h("ion-icon", { key: '696f5e4c2b09e64bd08abf0d0818b1554cd29737', icon: reorderIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
     }
     static get is() { return "ion-reorder"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/reorder-group/reorder-group.js

@@ -253,7 +253,7 @@ export class ReorderGroup {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '9527bbdedaab63d31f562c874a7332ea60c4b47b', class: {
+        return (h(Host, { key: '779332508f44409696b6bab80eda72f9b1d7869d', class: {
                 [mode]: true,
                 'reorder-enabled': !this.disabled,
                 'reorder-list-active': this.state !== 0 /* ReorderGroupState.Idle */,

package/dist/collection/components/ripple-effect/ripple-effect.js

@@ -68,7 +68,7 @@ export class RippleEffect {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '3b59cbb44741569a7350f9638b4392add673b6f1', role: "presentation", class: {
+        return (h(Host, { key: '371350cb76e98338ef7467191aaaf817b1298b3f', role: "presentation", class: {
                 [mode]: true,
                 unbounded: this.unbounded,
             } }));

package/dist/collection/components/route/route.js

@@ -67,7 +67,7 @@ export class Route {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Name of the component to load/select in the navigation outlet (`ion-tabs`, `ion-nav`)\nwhen the route matches.\n\nThe value of this property is not always the tagname of the component to load,\nin `ion-tabs` it actually refers to the name of the `ion-tab` to select."
+                    "text": "Name of the component to load/select in the navigation outlet (`ion-tabs`, `ion-router-outlet`)\nwhen the route matches.\n\nThe value of this property is not always the tagname of the component to load,\nin `ion-tabs` it actually refers to the name of the `ion-tab` to select."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/router/router.js

@@ -103,9 +103,8 @@ export class Router {
      * @param animation A custom animation to use for the transition.
      */
     async push(path, direction = 'forward', animation) {
-        var _a;
         if (path.startsWith('.')) {
-            const currentPath = (_a = this.previousPath) !== null && _a !== void 0 ? _a : '/';
+            const currentPath = this.previousPath ?? '/';
             // Convert currentPath to an URL by pre-pending a protocol and a host to resolve the relative path.
             const url = new URL(path, `https://host/${currentPath}`);
             path = url.pathname + url.search + url.hash;
@@ -176,11 +175,10 @@ export class Router {
         return this.writeNavStateRoot(this.getSegments(), ROUTER_INTENT_NONE);
     }
     historyDirection() {
-        var _a;
         const win = window;
         if (win.history.state === null) {
             this.state++;
-            win.history.replaceState(this.state, win.document.title, (_a = win.document.location) === null || _a === void 0 ? void 0 : _a.href);
+            win.history.replaceState(this.state, win.document.title, win.document.location?.href);
         }
         const state = win.history.state;
         const lastState = this.lastState;
@@ -254,14 +252,12 @@ export class Router {
         }
         const routes = readRoutes(this.el);
         const fromChain = findChainForSegments(from, routes);
-        // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
         const beforeLeaveHook = fromChain && fromChain[fromChain.length - 1].beforeLeave;
         const canLeave = beforeLeaveHook ? await beforeLeaveHook() : true;
         if (canLeave === false || typeof canLeave === 'object') {
             return canLeave;
         }
         const toChain = findChainForSegments(to, routes);
-        // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
         const beforeEnterHook = toChain && toChain[toChain.length - 1].beforeEnter;
         return beforeEnterHook ? beforeEnterHook() : true;
     }