@ionic/core 8.8.17 → 8.8.18-dev.11786108988.1fd94742

package/dist/collection/components/toggle/toggle.js

@@ -24,117 +24,108 @@ import { getIonMode } from "../../global/ionic-global";
  * @part error-text - Supporting text displayed beneath the toggle label when the toggle is invalid and touched.
  */
 export class Toggle {
-    constructor() {
-        this.inputId = `ion-tg-${toggleIds++}`;
-        this.inputLabelId = `${this.inputId}-lbl`;
-        this.helperTextId = `${this.inputId}-helper-text`;
-        this.errorTextId = `${this.inputId}-error-text`;
-        this.lastDrag = 0;
-        this.inheritedAttributes = {};
-        this.didLoad = false;
-        this.activated = false;
-        /**
-         * Track validation state for proper aria-live announcements.
-         */
-        this.isInvalid = false;
-        /**
-         * The name of the control, which is submitted with the form data.
-         */
-        this.name = this.inputId;
-        /**
-         * If `true`, the toggle is selected.
-         */
-        this.checked = false;
-        /**
-         * If `true`, the user cannot interact with the toggle.
-         */
-        this.disabled = false;
-        /**
-         * The value of the toggle does not mean if it's checked or not, use the `checked`
-         * property for that.
-         *
-         * The value of a toggle is analogous to the value of a `<input type="checkbox">`,
-         * it's only used when the toggle participates in a native `<form>`.
-         */
-        this.value = 'on';
-        /**
-         * Enables the on/off accessibility switch labels within the toggle.
-         */
-        this.enableOnOffLabels = config.get('toggleOnOffLabels');
-        /**
-         * Where to place the label relative to the input.
-         * `"start"`: The label will appear to the left of the toggle in LTR and to the right in RTL.
-         * `"end"`: The label will appear to the right of the toggle in LTR and to the left in RTL.
-         * `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
-         * `"stacked"`: The label will appear above the toggle regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
-         */
-        this.labelPlacement = 'start';
-        /**
-         * If true, screen readers will announce it as a required field. This property
-         * works only for accessibility purposes, it will not prevent the form from
-         * submitting if the value is invalid.
-         */
-        this.required = false;
-        this.setupGesture = async () => {
-            const { toggleTrack } = this;
-            if (toggleTrack) {
-                this.gesture = (await import('../../utils/gesture')).createGesture({
-                    el: toggleTrack,
-                    gestureName: 'toggle',
-                    gesturePriority: 100,
-                    threshold: 5,
-                    passive: false,
-                    onStart: () => this.onStart(),
-                    onMove: (ev) => this.onMove(ev),
-                    onEnd: (ev) => this.onEnd(ev),
-                });
-                this.disabledChanged();
-            }
-        };
-        this.onKeyDown = (ev) => {
-            if (ev.key === ' ') {
-                ev.preventDefault();
-                if (!this.disabled) {
-                    this.toggleChecked();
-                }
-            }
-        };
-        this.onClick = (ev) => {
-            /**
-             * The haptics for the toggle on tap is
-             * an iOS-only feature. As such, it should
-             * only trigger on iOS.
-             */
-            const enableHaptics = isPlatform('ios');
-            if (this.disabled) {
-                return;
-            }
-            ev.preventDefault();
-            if (this.lastDrag + 300 < Date.now()) {
-                this.toggleChecked();
-                enableHaptics && hapticSelection();
-            }
-        };
-        /**
-         * Stops propagation when the display label is clicked,
-         * otherwise, two clicks will be triggered.
-         */
-        this.onDivLabelClick = (ev) => {
-            ev.stopPropagation();
-        };
-        this.onFocus = () => {
-            this.ionFocus.emit();
-        };
-        this.onBlur = () => {
-            this.ionBlur.emit();
-        };
-        this.getSwitchLabelIcon = (mode, checked) => {
-            if (mode === 'md') {
-                return checked ? checkmarkOutline : removeOutline;
-            }
-            return checked ? removeOutline : ellipseOutline;
-        };
-    }
+    inputId = `ion-tg-${toggleIds++}`;
+    inputLabelId = `${this.inputId}-lbl`;
+    helperTextId = `${this.inputId}-helper-text`;
+    errorTextId = `${this.inputId}-error-text`;
+    gesture;
+    lastDrag = 0;
+    inheritedAttributes = {};
+    toggleTrack;
+    didLoad = false;
+    validationObserver;
+    itemFocusObserver;
+    el;
+    activated = false;
+    /**
+     * Track validation state for proper aria-live announcements.
+     */
+    isInvalid = false;
+    hintTextId;
+    /**
+     * The color to use from your application's color palette.
+     * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+     * For more information on colors, see [theming](/docs/theming/basics).
+     */
+    color;
+    /**
+     * The name of the control, which is submitted with the form data.
+     */
+    name = this.inputId;
+    /**
+     * If `true`, the toggle is selected.
+     */
+    checked = false;
+    /**
+     * If `true`, the user cannot interact with the toggle.
+     */
+    disabled = false;
+    /**
+     * Text that is placed under the toggle label and displayed when an error is detected.
+     */
+    errorText;
+    /**
+     * Text that is placed under the toggle label and displayed when no error is detected.
+     */
+    helperText;
+    /**
+     * The value of the toggle does not mean if it's checked or not, use the `checked`
+     * property for that.
+     *
+     * The value of a toggle is analogous to the value of a `<input type="checkbox">`,
+     * it's only used when the toggle participates in a native `<form>`.
+     */
+    value = 'on';
+    /**
+     * Enables the on/off accessibility switch labels within the toggle.
+     */
+    enableOnOffLabels = config.get('toggleOnOffLabels');
+    /**
+     * Where to place the label relative to the input.
+     * `"start"`: The label will appear to the left of the toggle in LTR and to the right in RTL.
+     * `"end"`: The label will appear to the right of the toggle in LTR and to the left in RTL.
+     * `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+     * `"stacked"`: The label will appear above the toggle regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
+     */
+    labelPlacement = 'start';
+    /**
+     * How to pack the label and toggle within a line.
+     * `"start"`: The label and toggle will appear on the left in LTR and
+     * on the right in RTL.
+     * `"end"`: The label and toggle will appear on the right in LTR and
+     * on the left in RTL.
+     * `"space-between"`: The label and toggle will appear on opposite
+     * ends of the line with space between the two elements.
+     * Setting this property will change the toggle `display` to `block`.
+     */
+    justify;
+    /**
+     * How to control the alignment of the toggle and label on the cross axis.
+     * `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL.
+     * `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
+     * Setting this property will change the toggle `display` to `block`.
+     */
+    alignment;
+    /**
+     * If true, screen readers will announce it as a required field. This property
+     * works only for accessibility purposes, it will not prevent the form from
+     * submitting if the value is invalid.
+     */
+    required = false;
+    /**
+     * Emitted when the user switches the toggle on or off.
+     *
+     * This event will not emit when programmatically setting the `checked` property.
+     */
+    ionChange;
+    /**
+     * Emitted when the toggle has focus.
+     */
+    ionFocus;
+    /**
+     * Emitted when the toggle loses focus.
+     */
+    ionBlur;
     disabledChanged() {
         if (this.gesture) {
             this.gesture.enable(!this.disabled);
@@ -205,6 +196,22 @@ export class Toggle {
         this.setupGesture();
         this.didLoad = true;
     }
+    setupGesture = async () => {
+        const { toggleTrack } = this;
+        if (toggleTrack) {
+            this.gesture = (await import('../../utils/gesture')).createGesture({
+                el: toggleTrack,
+                gestureName: 'toggle',
+                gesturePriority: 100,
+                threshold: 5,
+                passive: false,
+                onStart: () => this.onStart(),
+                onMove: (ev) => this.onMove(ev),
+                onEnd: (ev) => this.onEnd(ev),
+            });
+            this.disabledChanged();
+        }
+    };
     disconnectedCallback() {
         if (this.gesture) {
             this.gesture.destroy();
@@ -221,7 +228,9 @@ export class Toggle {
         }
     }
     componentWillLoad() {
-        this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
+        this.inheritedAttributes = {
+            ...inheritAriaAttributes(this.el),
+        };
         this.hintTextId = this.getHintTextId();
     }
     onStart() {
@@ -247,6 +256,49 @@ export class Toggle {
     setFocus() {
         this.el.focus();
     }
+    onKeyDown = (ev) => {
+        if (ev.key === ' ') {
+            ev.preventDefault();
+            if (!this.disabled) {
+                this.toggleChecked();
+            }
+        }
+    };
+    onClick = (ev) => {
+        /**
+         * The haptics for the toggle on tap is
+         * an iOS-only feature. As such, it should
+         * only trigger on iOS.
+         */
+        const enableHaptics = isPlatform('ios');
+        if (this.disabled) {
+            return;
+        }
+        ev.preventDefault();
+        if (this.lastDrag + 300 < Date.now()) {
+            this.toggleChecked();
+            enableHaptics && hapticSelection();
+        }
+    };
+    /**
+     * Stops propagation when the display label is clicked,
+     * otherwise, two clicks will be triggered.
+     */
+    onDivLabelClick = (ev) => {
+        ev.stopPropagation();
+    };
+    onFocus = () => {
+        this.ionFocus.emit();
+    };
+    onBlur = () => {
+        this.ionBlur.emit();
+    };
+    getSwitchLabelIcon = (mode, checked) => {
+        if (mode === 'md') {
+            return checked ? checkmarkOutline : removeOutline;
+        }
+        return checked ? removeOutline : ellipseOutline;
+    };
     renderOnOffSwitchLabels(mode, checked) {
         const icon = this.getSwitchLabelIcon(mode, checked);
         return (h("ion-icon", { class: {
@@ -301,7 +353,7 @@ export class Toggle {
         // The attributes are matched too because the class needs the item to render.
         const inClickableItem = hostContext('ion-item.ion-activatable, ion-item[button], ion-item[href]', el);
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (h(Host, { key: 'e2fb9e7fb497511a8f763895fab34f20d5f8cb9e', role: "switch", "aria-checked": `${checked}`, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick, "aria-labelledby": hasLabel ? inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, "aria-required": required ? 'true' : undefined, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, class: createColorClasses(color, {
+        return (h(Host, { key: 'ec5ce11209c70083c0b2ef1ea54de3033cfa7e89', role: "switch", "aria-checked": `${checked}`, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick, "aria-labelledby": hasLabel ? inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, "aria-required": required ? 'true' : undefined, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, class: createColorClasses(color, {
                 [mode]: true,
                 'in-item': inItem,
                 // `ion-focusable` has to stay on because it is what makes the item focusable.
@@ -315,10 +367,10 @@ export class Toggle {
                 [`toggle-alignment-${alignment}`]: alignment !== undefined,
                 [`toggle-label-placement-${labelPlacement}`]: true,
                 [`toggle-${rtl}`]: true,
-            }) }, h("label", { key: 'ab95b2af493f6352abefbc8661b112796ed12035', class: "toggle-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: 'f5a96b8f56787d67fa4ed2c29a089cd2fa02cb00', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, required: required }, inheritedAttributes)), h("div", { key: '3bdabb3c25ec4417b0e968bae12f7365a77acb65', class: {
+            }) }, h("label", { key: '95c1c7abd546ed2703d493acb967cf93e056a376', class: "toggle-wrapper", htmlFor: inputId }, h("input", { key: '7a206f525a4d340d94c668d6fc3b1f585cd97683', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, required: required, ...inheritedAttributes }), h("div", { key: '62c2a365f980d46c2d7eaf1cbd19498d5813e1b1', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: '3de9890950b5066173d49a6d615e415d286e4aa5' }), this.renderHintText()), h("div", { key: 'de233f83efd106d043b31cceb5eb9a6e5758d032', class: "native-wrapper" }, this.renderToggleControl()))));
+            }, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: 'f352f834790e1e9581ecb107f9a8aaaeb101fae5' }), this.renderHintText()), h("div", { key: 'f086ba9e31e9842ec438bb3226927faf9d0a7ea9', class: "native-wrapper" }, this.renderToggleControl()))));
     }
     static get is() { return "ion-toggle"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/toolbar/toolbar.js

@@ -18,9 +18,14 @@ import { getIonMode } from "../../global/ionic-global";
  * @part content - The container for the default slot, wrapping content provided without a named slot.
  */
 export class Toolbar {
-    constructor() {
-        this.childrenStyles = new Map();
-    }
+    childrenStyles = new Map();
+    el;
+    /**
+     * The color to use from your application's color palette.
+     * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+     * For more information on colors, see [theming](/docs/theming/basics).
+     */
+    color;
     componentWillLoad() {
         const buttons = Array.from(this.el.querySelectorAll('ion-buttons'));
         const firstButtons = buttons.find((button) => {
@@ -65,10 +70,13 @@ export class Toolbar {
         this.childrenStyles.forEach((value) => {
             Object.assign(childStyles, value);
         });
-        return (h(Host, { key: 'b849db2863778dee6c5a251bffa1b3a657aeb036', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
-                [mode]: true,
-                'in-toolbar': hostContext('ion-toolbar', this.el),
-            })) }, h("div", { key: '67f5bba9c4f527c3f35bfe1313a2b85741f9b246', class: "toolbar-background", part: "background" }), h("div", { key: '085e8c68f056e5b0deb9d1606431fbeb45dae8e5', class: "toolbar-container", part: "container" }, h("slot", { key: '15227c79c3baf883fd8c43fdb7e1313453933c79', name: "start" }), h("slot", { key: '0b8a7f7e685aa31c80d9bc03446ccc3a9d07e0e8', name: "secondary" }), h("div", { key: '57e4628c1fa89df79dd80456259db961bb691404', class: "toolbar-content", part: "content" }, h("slot", { key: '82c2f6e1acf8d96db259bd8baf295881801edbd5' })), h("slot", { key: 'b2d4afb15214199f206c0a5e08b581e4c9c2f58a', name: "primary" }), h("slot", { key: 'bfb909a0c472f8834046c2ea23bef2f562167ad3', name: "end" }))));
+        return (h(Host, { key: '40bad6fa7e94262438da4bbe037dcf8a5fa2df22', class: {
+                ...childStyles,
+                ...createColorClasses(this.color, {
+                    [mode]: true,
+                    'in-toolbar': hostContext('ion-toolbar', this.el),
+                }),
+            } }, h("div", { key: 'df44c9f0fe3958116ab860b0dad79c53b89f6c59', class: "toolbar-background", part: "background" }), h("div", { key: '2169ffa576875b8d5624211cc0b4bf86191562bc', class: "toolbar-container", part: "container" }, h("slot", { key: 'c8910dcf1ce98ab427fd89c3396a67c2a75bdd07', name: "start" }), h("slot", { key: '05da24d5ef96b9eebd83b534ce02c1f7bcd06680', name: "secondary" }), h("div", { key: '090fea1541e7e2b6ad74a6ded4eadffdb471ccce', class: "toolbar-content", part: "content" }, h("slot", { key: '507e143f92f6fa59ff23d94026411fa2c74f2f8e' })), h("slot", { key: 'f79fdee472e657e26a910cb89d7551943e40e440', name: "primary" }), h("slot", { key: 'dd40fe9ed490cf4346c642e195fdb524dc6cc4f5', name: "end" }))));
     }
     static get is() { return "ion-toolbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/global/config.js

@@ -3,9 +3,7 @@
  */
 // TODO(FW-2832): types
 export class Config {
-    constructor() {
-        this.m = new Map();
-    }
+    m = new Map();
     reset(configObj) {
         this.m = new Map(Object.entries(configObj));
     }
@@ -37,7 +35,7 @@ export const configFromSession = (win) => {
         const configStr = win.sessionStorage.getItem(IONIC_SESSION_KEY);
         return configStr !== null ? JSON.parse(configStr) : {};
     }
-    catch (e) {
+    catch {
         return {};
     }
 };
@@ -45,7 +43,7 @@ export const saveConfig = (win, c) => {
     try {
         win.sessionStorage.setItem(IONIC_SESSION_KEY, JSON.stringify(c));
     }
-    catch (e) {
+    catch {
         return;
     }
 };
@@ -59,7 +57,7 @@ export const configFromURL = (win) => {
         try {
             return [decodeURIComponent(key), decodeURIComponent(value)];
         }
-        catch (e) {
+        catch {
             return ['', ''];
         }
     })

package/dist/collection/global/ionic-global.js

@@ -19,7 +19,13 @@ export const initialize = (userConfig = {}) => {
     const Ionic = (win.Ionic = win.Ionic || {});
     // create the Ionic.config from raw config object (if it exists)
     // and convert Ionic.config into a ConfigApi that has a get() fn
-    const configObj = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, configFromSession(win)), { persistConfig: false }), Ionic.config), configFromURL(win)), userConfig);
+    const configObj = {
+        ...configFromSession(win),
+        persistConfig: false,
+        ...Ionic.config,
+        ...configFromURL(win),
+        ...userConfig,
+    };
     config.reset(configObj);
     if (config.getBoolean('persistConfig')) {
         saveConfig(win, configObj);
@@ -37,7 +43,7 @@ export const initialize = (userConfig = {}) => {
     if (config.getBoolean('_testing')) {
         config.set('animated', false);
     }
-    const isIonicElement = (elm) => { var _a; return (_a = elm.tagName) === null || _a === void 0 ? void 0 : _a.startsWith('ION-'); };
+    const isIonicElement = (elm) => elm.tagName?.startsWith('ION-');
     const isAllowedIonicModeValue = (elmMode) => ['ios', 'md'].includes(elmMode);
     setMode((elm) => {
         while (elm) {

package/dist/collection/index.js

@@ -17,5 +17,5 @@ export { getMode, setupConfig } from './utils/config';
 export { openURL } from './utils/theme';
 export { LIFECYCLE_WILL_ENTER, LIFECYCLE_DID_ENTER, LIFECYCLE_WILL_LEAVE, LIFECYCLE_DID_LEAVE, LIFECYCLE_WILL_UNLOAD, } from './components/nav/constants';
 export { menuController } from './utils/menu-controller';
-export { alertController, actionSheetController, modalController, loadingController, pickerController, popoverController, toastController, } from './utils/overlays';
+export { alertController, actionSheetController, modalController, loadingController, popoverController, toastController, } from './utils/overlays';
 export { IonicSlides } from './components/slides/IonicSlides';

package/dist/collection/utils/animation/animation.js

@@ -122,7 +122,7 @@ export const createAnimation = (animationId) => {
         return ani;
     };
     const onFinish = (callback, opts) => {
-        const callbacks = (opts === null || opts === void 0 ? void 0 : opts.oneTimeCallback) ? onFinishOneTimeCallbacks : onFinishCallbacks;
+        const callbacks = opts?.oneTimeCallback ? onFinishOneTimeCallbacks : onFinishCallbacks;
         callbacks.push({ c: callback, o: opts });
         return ani;
     };
@@ -155,7 +155,7 @@ export const createAnimation = (animationId) => {
              * for another animation to have already
              * cleaned up a particular stylesheet
              */
-            if (stylesheet === null || stylesheet === void 0 ? void 0 : stylesheet.parentNode) {
+            if (stylesheet?.parentNode) {
                 stylesheet.parentNode.removeChild(stylesheet);
             }
         });
@@ -655,7 +655,7 @@ export const createAnimation = (animationId) => {
     };
     const play = (opts) => {
         return new Promise((resolve) => {
-            if (opts === null || opts === void 0 ? void 0 : opts.sync) {
+            if (opts?.sync) {
                 shouldForceSyncPlayback = true;
                 onFinish(() => (shouldForceSyncPlayback = false), { oneTimeCallback: true });
             }

package/dist/collection/utils/config.js

@@ -4,18 +4,19 @@
 export const setupConfig = (config) => {
     const win = window;
     const Ionic = win.Ionic;
-    // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
     if (Ionic && Ionic.config && Ionic.config.constructor.name !== 'Object') {
         return;
     }
     win.Ionic = win.Ionic || {};
-    win.Ionic.config = Object.assign(Object.assign({}, win.Ionic.config), config);
+    win.Ionic.config = {
+        ...win.Ionic.config,
+        ...config,
+    };
     return win.Ionic.config;
 };
 export const getMode = () => {
-    var _a;
     const win = window;
-    const config = (_a = win === null || win === void 0 ? void 0 : win.Ionic) === null || _a === void 0 ? void 0 : _a.config;
+    const config = win?.Ionic?.config;
     if (config) {
         if (config.mode) {
             return config.mode;

package/dist/collection/utils/focus-controller/index.js

@@ -36,7 +36,7 @@ export const createFocusController = () => {
          */
         if (focusManagerEnabled) {
             const activeEl = document.activeElement;
-            if (activeEl !== null && (referenceEl === null || referenceEl === void 0 ? void 0 : referenceEl.contains(activeEl))) {
+            if (activeEl !== null && referenceEl?.contains(activeEl)) {
                 activeEl.setAttribute(LAST_FOCUS, 'true');
             }
         }

package/dist/collection/utils/focus-trap.js

@@ -27,7 +27,7 @@ export const focusableQueryString = '[tabindex]:not([tabindex^="-"]):not([hidden
  */
 export const focusFirstDescendant = (ref, fallbackElement) => {
     const firstInput = ref.querySelector(focusableQueryString);
-    focusElementInContext(firstInput, fallbackElement !== null && fallbackElement !== void 0 ? fallbackElement : ref);
+    focusElementInContext(firstInput, fallbackElement ?? ref);
 };
 /**
  * Focuses the last descendant in a context
@@ -42,7 +42,7 @@ export const focusFirstDescendant = (ref, fallbackElement) => {
 export const focusLastDescendant = (ref, fallbackElement) => {
     const inputs = Array.from(ref.querySelectorAll(focusableQueryString));
     const lastInput = inputs.length > 0 ? inputs[inputs.length - 1] : null;
-    focusElementInContext(lastInput, fallbackElement !== null && fallbackElement !== void 0 ? fallbackElement : ref);
+    focusElementInContext(lastInput, fallbackElement ?? ref);
 };
 /**
  * Focuses a particular element in a context. If the element
@@ -63,7 +63,7 @@ export const focusLastDescendant = (ref, fallbackElement) => {
  */
 const focusElementInContext = (hostToFocus, fallbackElement) => {
     let elementToFocus = hostToFocus;
-    const shadowRoot = hostToFocus === null || hostToFocus === void 0 ? void 0 : hostToFocus.shadowRoot;
+    const shadowRoot = hostToFocus?.shadowRoot;
     if (shadowRoot) {
         // If there are no inner focusable elements, just focus the host element.
         elementToFocus = shadowRoot.querySelector(focusableQueryString) || hostToFocus;

package/dist/collection/utils/framework-delegate.js

@@ -4,14 +4,13 @@
 import { componentOnReady } from "./helpers";
 // TODO(FW-2832): types
 export const attachComponent = async (delegate, container, component, cssClasses, componentProps, inline) => {
-    var _a;
     if (delegate) {
         return delegate.attachViewToDom(container, component, componentProps, cssClasses);
     }
     if (!inline && typeof component !== 'string' && !(component instanceof HTMLElement)) {
         throw new Error('framework delegate is missing');
     }
-    const el = typeof component === 'string' ? (_a = container.ownerDocument) === null || _a === void 0 ? void 0 : _a.createElement(component) : component;
+    const el = typeof component === 'string' ? container.ownerDocument?.createElement(component) : component;
     if (cssClasses) {
         cssClasses.forEach((c) => el.classList.add(c));
     }
@@ -36,7 +35,6 @@ export const CoreDelegate = () => {
     let BaseComponent;
     let Reference;
     const attachViewToDom = async (parentElement, userComponent, userComponentProps = {}, cssClasses = []) => {
-        var _a, _b;
         BaseComponent = parentElement;
         let ChildComponent;
         /**
@@ -49,7 +47,7 @@ export const CoreDelegate = () => {
              * the element otherwise just get a reference
              * to the component.
              */
-            const el = typeof userComponent === 'string' ? (_a = BaseComponent.ownerDocument) === null || _a === void 0 ? void 0 : _a.createElement(userComponent) : userComponent;
+            const el = typeof userComponent === 'string' ? BaseComponent.ownerDocument?.createElement(userComponent) : userComponent;
             /**
              * Add any css classes passed in
              * via the cssClasses prop on the overlay.
@@ -81,7 +79,7 @@ export const CoreDelegate = () => {
                  * that the overlay has not been presented yet and we need
                  * to create the containing element with the specified classes.
                  */
-                const el = (_b = BaseComponent.ownerDocument) === null || _b === void 0 ? void 0 : _b.createElement('div');
+                const el = BaseComponent.ownerDocument?.createElement('div');
                 // Add a class to track if the root element was created by the delegate.
                 el.classList.add('ion-delegate-host');
                 cssClasses.forEach((c) => el.classList.add(c));
@@ -121,7 +119,7 @@ export const CoreDelegate = () => {
          * in the event that a modal or popover is presented
          * with no child content.
          */
-        return ChildComponent !== null && ChildComponent !== void 0 ? ChildComponent : BaseComponent;
+        return ChildComponent ?? BaseComponent;
     };
     const removeViewFromDom = () => {
         /**

package/dist/collection/utils/gesture/gesture-controller.js

@@ -2,18 +2,16 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 class GestureController {
-    constructor() {
-        this.gestureId = 0;
-        this.requestedStart = new Map();
-        this.disabledGestures = new Map();
-        this.disabledScroll = new Set();
-    }
+    gestureId = 0;
+    requestedStart = new Map();
+    disabledGestures = new Map();
+    disabledScroll = new Set();
+    capturedId;
     /**
      * Creates a gesture delegate based on the GestureConfig passed
      */
     createGesture(config) {
-        var _a;
-        return new GestureDelegate(this, this.newID(), config.name, (_a = config.priority) !== null && _a !== void 0 ? _a : 0, !!config.disableScroll);
+        return new GestureDelegate(this, this.newID(), config.name, config.priority ?? 0, !!config.disableScroll);
     }
     /**
      * Creates a blocker that will block any other gesture events from firing. Set in the ion-gesture component.
@@ -109,6 +107,11 @@ class GestureController {
     }
 }
 class GestureDelegate {
+    id;
+    name;
+    disableScroll;
+    ctrl;
+    priority;
     constructor(ctrl, id, name, priority, disableScroll) {
         this.id = id;
         this.name = name;
@@ -152,6 +155,10 @@ class GestureDelegate {
     }
 }
 class BlockerDelegate {
+    id;
+    disable;
+    disableScroll;
+    ctrl;
     constructor(ctrl, id, disable, disableScroll) {
         this.id = id;
         this.disable = disable;