@ionic/core 8.8.19 → 8.8.20-dev.11787158518.168a2fea

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: '148d15040257b05b3769da5a2439d051e357cbba', 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: '0dbc40adc87e2ab4bdcd9a9fef43393484174c18', class: "toggle-wrapper", htmlFor: inputId }, h("input", { key: '92dee565687fc9a883f97091ead1bbb51df43779', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, required: required, ...inheritedAttributes }), h("div", { key: 'f057bc57714b26e84226ee931e09212b86dba69f', 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: '345efb5ce20f8124d1e74877b4943edf82fe2f8e' }), this.renderHintText()), h("div", { key: 'fc1a7fb6b65064307fbe0a50178559a52d6aedb7', 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: 'c16803dc4eae9972ef19bf43aa74b94feb4fd4c1', class: {
+                ...childStyles,
+                ...createColorClasses(this.color, {
+                    [mode]: true,
+                    'in-toolbar': hostContext('ion-toolbar', this.el),
+                }),
+            } }, h("div", { key: '20e3f85844c94b8399c245d2df125e6ab678d681', class: "toolbar-background", part: "background" }), h("div", { key: '12f09e324e8d9130b9d30c493106b500233fb016', class: "toolbar-container", part: "container" }, h("slot", { key: '6da0fe99ee0c4d7c969712e2908a4e7e6be5ed2c', name: "start" }), h("slot", { key: '177c346d6dcabb7857d810cda7d25c6dde32e6e2', name: "secondary" }), h("div", { key: '8c921b415940c71bf4c1a2c5c6887f36ad1afd16', class: "toolbar-content", part: "content" }, h("slot", { key: '1f2976b80d967bd51e86ed1357b363271d655df2' })), h("slot", { key: '0f7618044a7e8b0d9b715a8e208070f7ef2ee4c8', name: "primary" }), h("slot", { key: '125c393197e0660a3c2638dd4628c41ef7e05f19', 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/forms/index.js

@@ -2,6 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 export * from './notch-controller';
+export * from './start-container-controller';
 export * from './compare-with-utils';
 export * from './item-multiple-inputs';
 export * from './validity';