voyager-ionic-core 8.7.9 → 8.7.11

package/components/checkbox.js

@@ -1,8 +1,9 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, Build, h, Host } from '@stencil/core/internal/client';
 import { i as inheritAriaAttributes, e as renderHiddenInput } from './helpers.js';
+import { c as checkInvalidState } from './validity.js';
 import { c as createColorClasses, h as hostContext } from './theme.js';
 import { b as getIonMode } from './ionic-global.js';
 
@@ -63,6 +64,10 @@ const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends HTMLEle
          * submitting if the value is invalid.
          */
         this.required = false;
+        /**
+         * Track validation state for proper aria-live announcements.
+         */
+        this.isInvalid = false;
         /**
          * Sets the checked property and emits
          * the ionChange event. Use this to update the
@@ -109,16 +114,63 @@ const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends HTMLEle
             ev.stopPropagation();
         };
     }
+    connectedCallback() {
+        const { el } = this;
+        // Watch for class changes to update validation state.
+        if (Build.isBrowser && typeof MutationObserver !== 'undefined') {
+            this.validationObserver = new MutationObserver(() => {
+                const newIsInvalid = checkInvalidState(el);
+                if (this.isInvalid !== newIsInvalid) {
+                    this.isInvalid = newIsInvalid;
+                    /**
+                     * Screen readers tend to announce changes
+                     * to `aria-describedby` when the attribute
+                     * is changed during a blur event for a
+                     * native form control.
+                     * However, the announcement can be spotty
+                     * when using a non-native form control
+                     * and `forceUpdate()`.
+                     * This is due to `forceUpdate()` internally
+                     * rescheduling the DOM update to a lower
+                     * priority queue regardless if it's called
+                     * inside a Promise or not, thus causing
+                     * the screen reader to potentially miss the
+                     * change.
+                     * By using a State variable inside a Promise,
+                     * it guarantees a re-render immediately at
+                     * a higher priority.
+                     */
+                    Promise.resolve().then(() => {
+                        this.hintTextId = this.getHintTextId();
+                    });
+                }
+            });
+            this.validationObserver.observe(el, {
+                attributes: true,
+                attributeFilter: ['class'],
+            });
+        }
+        // Always set initial state
+        this.isInvalid = checkInvalidState(el);
+    }
     componentWillLoad() {
         this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
+        this.hintTextId = this.getHintTextId();
+    }
+    disconnectedCallback() {
+        // Clean up validation observer to prevent memory leaks.
+        if (this.validationObserver) {
+            this.validationObserver.disconnect();
+            this.validationObserver = undefined;
+        }
     }
     /** @internal */
     async setFocus() {
         this.el.focus();
     }
-    getHintTextID() {
-        const { el, helperText, errorText, helperTextId, errorTextId } = this;
-        if (el.classList.contains('ion-touched') && el.classList.contains('ion-invalid') && errorText) {
+    getHintTextId() {
+        const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
+        if (isInvalid && errorText) {
             return errorTextId;
         }
         if (helperText) {
@@ -131,7 +183,7 @@ const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends HTMLEle
      * This element should only be rendered if hint text is set.
      */
     renderHintText() {
-        const { helperText, errorText, helperTextId, errorTextId } = this;
+        const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
         /**
          * undefined and empty string values should
          * be treated as not having helper/error text.
@@ -140,7 +192,7 @@ const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends HTMLEle
         if (!hasHintText) {
             return;
         }
-        return (h("div", { class: "checkbox-bottom" }, h("div", { id: helperTextId, class: "helper-text", part: "supporting-text helper-text" }, helperText), h("div", { id: errorTextId, class: "error-text", part: "supporting-text error-text" }, errorText)));
+        return (h("div", { class: "checkbox-bottom" }, h("div", { id: helperTextId, class: "helper-text", part: "supporting-text helper-text", "aria-live": "polite" }, !isInvalid ? helperText : null), h("div", { id: errorTextId, class: "error-text", part: "supporting-text error-text", role: "alert" }, isInvalid ? errorText : null)));
     }
     render() {
         const { color, checked, disabled, el, getSVGPath, indeterminate, inheritedAttributes, inputId, justify, labelPlacement, name, value, alignment, required, } = this;
@@ -150,7 +202,7 @@ const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends HTMLEle
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
         // The host element must have a checkbox role to ensure proper VoiceOver
         // support in Safari for accessibility.
-        return (h(Host, { key: 'ee2e02d28f9d15a1ec746609f7e9559444f621e5', role: "checkbox", "aria-checked": indeterminate ? 'mixed' : `${checked}`, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId, "aria-labelledby": hasLabelContent ? this.inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
+        return (h(Host, { key: 'ae0fbd4b21accbac132e6b85c513512ad9179394', role: "checkbox", "aria-checked": indeterminate ? 'mixed' : `${checked}`, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, "aria-labelledby": hasLabelContent ? this.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, onClick: this.onClick, class: createColorClasses(color, {
                 [mode]: true,
                 'in-item': hostContext('ion-item', el),
                 'checkbox-checked': checked,
@@ -160,10 +212,10 @@ const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends HTMLEle
                 [`checkbox-justify-${justify}`]: justify !== undefined,
                 [`checkbox-alignment-${alignment}`]: alignment !== undefined,
                 [`checkbox-label-placement-${labelPlacement}`]: true,
-            }) }, h("label", { key: '84d4c33da0348dc65ad36fb0fafd48be366dcf3b', class: "checkbox-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: '427db69a3ab8a17aa0867519c90f585b8930406b', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, required: required }, inheritedAttributes)), h("div", { key: '9dda7024b3a4f1ee55351f783f9a10f9b4ad0d12', class: {
+            }) }, h("label", { key: '7a3d7f3c27dde514f2dbf2e34f4629fad33ec3bf', class: "checkbox-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: '4130d77ddf034271fecccda14e101a5a809921b6', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, required: required }, inheritedAttributes)), h("div", { key: '5daa74f4e62b0947e37764762524001ee42609d9', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabelContent,
-            }, part: "label", id: this.inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: 'f9d1d545ffd4164b650808241b51ea1bedc6a42c' }), this.renderHintText()), h("div", { key: 'a96d61ac324864228f14caa0e9f2c0d15418882e', class: "native-wrapper" }, h("svg", { key: '64ff3e4d87e190601811ef64323edec18d510cd1', class: "checkbox-icon", viewBox: "0 0 24 24", part: "container", "aria-hidden": "true" }, path)))));
+            }, part: "label", id: this.inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: '23ff66138f8c3a2f56f39113fc842d54b2f7952a' }), this.renderHintText()), h("div", { key: 'ab914d9623c19fc46821d5e62db92f1192ebbe7e', class: "native-wrapper" }, h("svg", { key: '66e3f4f5dcaa9756fb0e9452299954f9ed3dcb7b', class: "checkbox-icon", viewBox: "0 0 24 24", part: "container", "aria-hidden": "true" }, path)))));
     }
     getSVGPath(mode, indeterminate) {
         let path = indeterminate ? (h("path", { d: "M6 12L18 12", part: "mark" })) : (h("path", { d: "M5.9,12.5l3.8,3.8l8.8-8.8", part: "mark" }));
@@ -190,6 +242,8 @@ const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends HTMLEle
         "justify": [1],
         "alignment": [1],
         "required": [4],
+        "isInvalid": [32],
+        "hintTextId": [32],
         "setFocus": [64]
     }]);
 let checkboxIds = 0;

package/components/ion-datetime.js

@@ -790,6 +790,28 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
                 destroyKeyboardMO();
             }
         };
+        /**
+         * TODO(FW-6931): Remove this fallback upon solving the root cause
+         * Fallback to ensure the datetime becomes ready even if
+         * IntersectionObserver never reports it as intersecting.
+         *
+         * This is primarily used in environments where the observer
+         * might not fire as expected, such as when running under
+         * synthetic tests that stub IntersectionObserver.
+         */
+        this.ensureReadyIfVisible = () => {
+            if (this.el.classList.contains('datetime-ready')) {
+                return;
+            }
+            const rect = this.el.getBoundingClientRect();
+            if (rect.width === 0 || rect.height === 0) {
+                return;
+            }
+            this.initializeListeners();
+            writeTask(() => {
+                this.el.classList.add('datetime-ready');
+            });
+        };
         this.processValue = (value) => {
             const hasValue = value !== null && value !== undefined && value !== '' && (!Array.isArray(value) || value.length > 0);
             const valueToProcess = hasValue ? parseDate(value) : this.defaultParts;
@@ -1107,6 +1129,17 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
          * triggering the `hiddenIO` observer below.
          */
         raf(() => visibleIO === null || visibleIO === void 0 ? void 0 : visibleIO.observe(intersectionTrackerRef));
+        /**
+         * TODO(FW-6931): Remove this fallback upon solving the root cause
+         * Fallback: If IntersectionObserver never reports that the
+         * datetime is visible but the host clearly has layout, ensure
+         * we still initialize listeners and mark the component as ready.
+         *
+         * We schedule this after everything has had a chance to run.
+         */
+        setTimeout(() => {
+            this.ensureReadyIfVisible();
+        }, 100);
         /**
          * We need to clean up listeners when the datetime is hidden
          * in a popover/modal so that we can properly scroll containers
@@ -1862,7 +1895,7 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
         const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
         const hasWheelVariant = hasDatePresentation && preferWheel;
         renderHiddenInput(true, el, name, formatValue(value), disabled);
-        return (h(Host, { key: '57492534800ea059a7c2bbd9f0059cc0b75ae8d2', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
+        return (h(Host, { key: 'efdbc0922670a841bc667ceac392cdc1dedffd01', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
                 [mode]: true,
                 ['datetime-readonly']: readonly,
                 ['datetime-disabled']: disabled,
@@ -1872,7 +1905,7 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
                 [`datetime-size-${size}`]: true,
                 [`datetime-prefer-wheel`]: hasWheelVariant,
                 [`datetime-grid`]: isGridStyle,
-            })) }, h("div", { key: '97dac5e5195635ac0bc5fb472b9d09e5c3c6bbc3', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
+            })) }, h("div", { key: '3f8bb75fcb0baff55182ef3aa1b535eacc58d81f', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/ion-input.js

@@ -2,7 +2,8 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, Build, h, Host } from '@stencil/core/internal/client';
-import { c as createNotchController, a as checkInvalidState } from './validity.js';
+import { c as createNotchController } from './notch-controller.js';
+import { c as checkInvalidState } from './validity.js';
 import { l as debounceEvent, i as inheritAriaAttributes, d as inheritAttributes, c as componentOnReady } from './helpers.js';
 import { c as createSlotMutationController, g as getCounterText } from './input.utils.js';
 import { h as hostContext, c as createColorClasses } from './theme.js';

package/components/ion-select.js

@@ -2,8 +2,9 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { proxyCustomElement, HTMLElement, createEvent, Build, h, Host, forceUpdate } from '@stencil/core/internal/client';
-import { c as createNotchController, a as checkInvalidState } from './validity.js';
+import { c as createNotchController } from './notch-controller.js';
 import { i as isOptionSelected, d as defineCustomElement$8, c as compareOptions } from './radio.js';
+import { c as checkInvalidState } from './validity.js';
 import { d as inheritAttributes, e as renderHiddenInput, h as focusVisibleElement } from './helpers.js';
 import { p as printIonWarning } from './index4.js';
 import { c as popoverController, b as actionSheetController, a as alertController, m as modalController } from './overlays.js';
@@ -223,7 +224,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
                      * a higher priority.
                      */
                     Promise.resolve().then(() => {
-                        this.hintTextID = this.getHintTextID();
+                        this.hintTextId = this.getHintTextId();
                     });
                 }
             });
@@ -237,7 +238,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
     }
     componentWillLoad() {
         this.inheritedAttributes = inheritAttributes(this.el, ['aria-label']);
-        this.hintTextID = this.getHintTextID();
+        this.hintTextId = this.getHintTextId();
     }
     componentDidLoad() {
         /**
@@ -736,9 +737,9 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
     }
     renderListbox() {
         const { disabled, inputId, isExpanded, required } = this;
-        return (h("button", { disabled: disabled, id: inputId, "aria-label": this.ariaLabel, "aria-haspopup": "dialog", "aria-expanded": `${isExpanded}`, "aria-describedby": this.hintTextID, "aria-invalid": this.isInvalid ? 'true' : undefined, "aria-required": `${required}`, onFocus: this.onFocus, onBlur: this.onBlur, ref: (focusEl) => (this.focusEl = focusEl) }));
+        return (h("button", { disabled: disabled, id: inputId, "aria-label": this.ariaLabel, "aria-haspopup": "dialog", "aria-expanded": `${isExpanded}`, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, "aria-required": `${required}`, onFocus: this.onFocus, onBlur: this.onBlur, ref: (focusEl) => (this.focusEl = focusEl) }));
     }
-    getHintTextID() {
+    getHintTextId() {
         const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
         if (isInvalid && errorText) {
             return errorTextId;
@@ -860,7 +861,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
         "isExpanded": [32],
         "hasFocus": [32],
         "isInvalid": [32],
-        "hintTextID": [32],
+        "hintTextId": [32],
         "open": [64]
     }, undefined, {
         "disabled": ["styleChanged"],

package/components/ion-textarea.js

@@ -2,7 +2,8 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, Build, writeTask, h, Host } from '@stencil/core/internal/client';
-import { c as createNotchController, a as checkInvalidState } from './validity.js';
+import { c as createNotchController } from './notch-controller.js';
+import { c as checkInvalidState } from './validity.js';
 import { l as debounceEvent, i as inheritAriaAttributes, d as inheritAttributes, c as componentOnReady } from './helpers.js';
 import { c as createSlotMutationController, g as getCounterText } from './input.utils.js';
 import { h as hostContext, c as createColorClasses } from './theme.js';

package/components/ion-toggle.js

@@ -1,8 +1,9 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, Build, h, Host } from '@stencil/core/internal/client';
 import { i as inheritAriaAttributes, e as renderHiddenInput } from './helpers.js';
+import { c as checkInvalidState } from './validity.js';
 import { d as hapticSelection } from './haptic.js';
 import { a as isPlatform, b as getIonMode } from './ionic-global.js';
 import { i as isRTL } from './dir.js';
@@ -33,6 +34,10 @@ const Toggle = /*@__PURE__*/ proxyCustomElement(class Toggle extends HTMLElement
         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.
          */
@@ -146,15 +151,52 @@ const Toggle = /*@__PURE__*/ proxyCustomElement(class Toggle extends HTMLElement
         });
     }
     async connectedCallback() {
+        const { didLoad, el } = this;
         /**
          * If we have not yet rendered
          * ion-toggle, then toggleTrack is not defined.
          * But if we are moving ion-toggle via appendChild,
          * then toggleTrack will be defined.
          */
-        if (this.didLoad) {
+        if (didLoad) {
             this.setupGesture();
         }
+        // Watch for class changes to update validation state.
+        if (Build.isBrowser && typeof MutationObserver !== 'undefined') {
+            this.validationObserver = new MutationObserver(() => {
+                const newIsInvalid = checkInvalidState(el);
+                if (this.isInvalid !== newIsInvalid) {
+                    this.isInvalid = newIsInvalid;
+                    /**
+                     * Screen readers tend to announce changes
+                     * to `aria-describedby` when the attribute
+                     * is changed during a blur event for a
+                     * native form control.
+                     * However, the announcement can be spotty
+                     * when using a non-native form control
+                     * and `forceUpdate()`.
+                     * This is due to `forceUpdate()` internally
+                     * rescheduling the DOM update to a lower
+                     * priority queue regardless if it's called
+                     * inside a Promise or not, thus causing
+                     * the screen reader to potentially miss the
+                     * change.
+                     * By using a State variable inside a Promise,
+                     * it guarantees a re-render immediately at
+                     * a higher priority.
+                     */
+                    Promise.resolve().then(() => {
+                        this.hintTextId = this.getHintTextId();
+                    });
+                }
+            });
+            this.validationObserver.observe(el, {
+                attributes: true,
+                attributeFilter: ['class'],
+            });
+        }
+        // Always set initial state
+        this.isInvalid = checkInvalidState(el);
     }
     componentDidLoad() {
         this.setupGesture();
@@ -165,9 +207,15 @@ const Toggle = /*@__PURE__*/ proxyCustomElement(class Toggle extends HTMLElement
             this.gesture.destroy();
             this.gesture = undefined;
         }
+        // Clean up validation observer to prevent memory leaks.
+        if (this.validationObserver) {
+            this.validationObserver.disconnect();
+            this.validationObserver = undefined;
+        }
     }
     componentWillLoad() {
         this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
+        this.hintTextId = this.getHintTextId();
     }
     onStart() {
         this.activated = true;
@@ -208,9 +256,9 @@ const Toggle = /*@__PURE__*/ proxyCustomElement(class Toggle extends HTMLElement
     get hasLabel() {
         return this.el.textContent !== '';
     }
-    getHintTextID() {
-        const { el, helperText, errorText, helperTextId, errorTextId } = this;
-        if (el.classList.contains('ion-touched') && el.classList.contains('ion-invalid') && errorText) {
+    getHintTextId() {
+        const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
+        if (isInvalid && errorText) {
             return errorTextId;
         }
         if (helperText) {
@@ -223,7 +271,7 @@ const Toggle = /*@__PURE__*/ proxyCustomElement(class Toggle extends HTMLElement
      * This element should only be rendered if hint text is set.
      */
     renderHintText() {
-        const { helperText, errorText, helperTextId, errorTextId } = this;
+        const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
         /**
          * undefined and empty string values should
          * be treated as not having helper/error text.
@@ -232,15 +280,15 @@ const Toggle = /*@__PURE__*/ proxyCustomElement(class Toggle extends HTMLElement
         if (!hasHintText) {
             return;
         }
-        return (h("div", { class: "toggle-bottom" }, h("div", { id: helperTextId, class: "helper-text", part: "supporting-text helper-text" }, helperText), h("div", { id: errorTextId, class: "error-text", part: "supporting-text error-text" }, errorText)));
+        return (h("div", { class: "toggle-bottom" }, h("div", { id: helperTextId, class: "helper-text", part: "supporting-text helper-text", "aria-live": "polite" }, !isInvalid ? helperText : null), h("div", { id: errorTextId, class: "error-text", part: "supporting-text error-text", role: "alert" }, isInvalid ? errorText : null)));
     }
     render() {
-        const { activated, alignment, checked, color, disabled, el, errorTextId, hasLabel, inheritedAttributes, inputId, inputLabelId, justify, labelPlacement, name, required, } = this;
+        const { activated, alignment, checked, color, disabled, el, hasLabel, inheritedAttributes, inputId, inputLabelId, justify, labelPlacement, name, required, } = this;
         const mode = getIonMode(this);
         const value = this.getValue();
         const rtl = isRTL(el) ? 'rtl' : 'ltr';
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (h(Host, { key: '17bbbc8d229868e5c872b2bc5a3faf579780c5e0', role: "switch", "aria-checked": `${checked}`, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === errorTextId, onClick: this.onClick, "aria-labelledby": hasLabel ? inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, class: createColorClasses(color, {
+        return (h(Host, { key: 'f569148edd89ee041a4719ffc4733c16b05229bd', 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': hostContext('ion-item', el),
                 'toggle-activated': activated,
@@ -250,10 +298,10 @@ const Toggle = /*@__PURE__*/ proxyCustomElement(class Toggle extends HTMLElement
                 [`toggle-alignment-${alignment}`]: alignment !== undefined,
                 [`toggle-label-placement-${labelPlacement}`]: true,
                 [`toggle-${rtl}`]: true,
-            }) }, h("label", { key: '673625b62a2c909e95dccb642c91312967a6cd1c', class: "toggle-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: '7dc3f357b4708116663970047765da9f8f845bf0', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, required: required }, inheritedAttributes)), h("div", { key: '8f1c6a182031e8cbc6727e5f4ac0e00ad4247447', class: {
+            }) }, h("label", { key: '3027f2ac4be6de422a14486d847fbee77f615db1', class: "toggle-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: '4b0304c9e879e432b80184b4e5de37d55c11b436', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, required: required }, inheritedAttributes)), h("div", { key: '8ef265ec942e7f01ff31cbb202ed146c6bf94e02', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: '8322b9d54dc7edeb4e16fefcde9f7ebca8d5c3e1' }), this.renderHintText()), h("div", { key: 'fe6984143db817a7b3020a3f57cf5418fc3dcc0e', class: "native-wrapper" }, this.renderToggleControl()))));
+            }, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: '7b162b7dd27199cca2a4c995276a18b9f8e44aaf' }), this.renderHintText()), h("div", { key: 'd13c34bd42fca01cc73ddb4ea7e471b33a282a3e', class: "native-wrapper" }, this.renderToggleControl()))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -276,7 +324,9 @@ const Toggle = /*@__PURE__*/ proxyCustomElement(class Toggle extends HTMLElement
         "justify": [1],
         "alignment": [1],
         "required": [4],
-        "activated": [32]
+        "activated": [32],
+        "isInvalid": [32],
+        "hintTextId": [32]
     }, undefined, {
         "disabled": ["disabledChanged"]
     }]);

package/components/notch-controller.js

@@ -0,0 +1,153 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { w as win } from './index9.js';
+import { r as raf } from './helpers.js';
+
+/**
+ * A utility to calculate the size of an outline notch
+ * width relative to the content passed. This is used in
+ * components such as `ion-select` with `fill="outline"`
+ * where we need to pass slotted HTML content. This is not
+ * needed when rendering plaintext content because we can
+ * render the plaintext again hidden with `opacity: 0` inside
+ * of the notch. As a result we can rely on the intrinsic size
+ * of the element to correctly compute the notch width. We
+ * cannot do this with slotted content because we cannot project
+ * it into 2 places at once.
+ *
+ * @internal
+ * @param el: The host element
+ * @param getNotchSpacerEl: A function that returns a reference to the notch spacer element inside of the component template.
+ * @param getLabelSlot: A function that returns a reference to the slotted content.
+ */
+const createNotchController = (el, getNotchSpacerEl, getLabelSlot) => {
+    let notchVisibilityIO;
+    const needsExplicitNotchWidth = () => {
+        const notchSpacerEl = getNotchSpacerEl();
+        if (
+        /**
+         * If the notch is not being used
+         * then we do not need to set the notch width.
+         */
+        notchSpacerEl === undefined ||
+            /**
+             * If either the label property is being
+             * used or the label slot is not defined,
+             * then we do not need to estimate the notch width.
+             */
+            el.label !== undefined ||
+            getLabelSlot() === null) {
+            return false;
+        }
+        return true;
+    };
+    const calculateNotchWidth = () => {
+        if (needsExplicitNotchWidth()) {
+            /**
+             * Run this the frame after
+             * the browser has re-painted the host element.
+             * Otherwise, the label element may have a width
+             * of 0 and the IntersectionObserver will be used.
+             */
+            raf(() => {
+                setNotchWidth();
+            });
+        }
+    };
+    /**
+     * When using a label prop we can render
+     * the label value inside of the notch and
+     * let the browser calculate the size of the notch.
+     * However, we cannot render the label slot in multiple
+     * places so we need to manually calculate the notch dimension
+     * based on the size of the slotted content.
+     *
+     * This function should only be used to set the notch width
+     * on slotted label content. The notch width for label prop
+     * content is automatically calculated based on the
+     * intrinsic size of the label text.
+     */
+    const setNotchWidth = () => {
+        const notchSpacerEl = getNotchSpacerEl();
+        if (notchSpacerEl === undefined) {
+            return;
+        }
+        if (!needsExplicitNotchWidth()) {
+            notchSpacerEl.style.removeProperty('width');
+            return;
+        }
+        const width = getLabelSlot().scrollWidth;
+        if (
+        /**
+         * If the computed width of the label is 0
+         * and notchSpacerEl's offsetParent is null
+         * then that means the element is hidden.
+         * As a result, we need to wait for the element
+         * to become visible before setting the notch width.
+         *
+         * We do not check el.offsetParent because
+         * that can be null if the host element has
+         * position: fixed applied to it.
+         * notchSpacerEl does not have position: fixed.
+         */
+        width === 0 &&
+            notchSpacerEl.offsetParent === null &&
+            win !== undefined &&
+            'IntersectionObserver' in win) {
+            /**
+             * If there is an IO already attached
+             * then that will update the notch
+             * once the element becomes visible.
+             * As a result, there is no need to create
+             * another one.
+             */
+            if (notchVisibilityIO !== undefined) {
+                return;
+            }
+            const io = (notchVisibilityIO = new IntersectionObserver((ev) => {
+                /**
+                 * If the element is visible then we
+                 * can try setting the notch width again.
+                 */
+                if (ev[0].intersectionRatio === 1) {
+                    setNotchWidth();
+                    io.disconnect();
+                    notchVisibilityIO = undefined;
+                }
+            }, 
+            /**
+             * Set the root to be the host element
+             * This causes the IO callback
+             * to be fired in WebKit as soon as the element
+             * is visible. If we used the default root value
+             * then WebKit would only fire the IO callback
+             * after any animations (such as a modal transition)
+             * finished, and there would potentially be a flicker.
+             */
+            { threshold: 0.01, root: el }));
+            io.observe(notchSpacerEl);
+            return;
+        }
+        /**
+         * If the element is visible then we can set the notch width.
+         * The notch is only visible when the label is scaled,
+         * which is why we multiply the width by 0.75 as this is
+         * the same amount the label element is scaled by in the host CSS.
+         * (See $form-control-label-stacked-scale in ionic.globals.scss).
+         */
+        notchSpacerEl.style.setProperty('width', `${width * 0.75}px`);
+    };
+    const destroy = () => {
+        if (notchVisibilityIO) {
+            notchVisibilityIO.disconnect();
+            notchVisibilityIO = undefined;
+        }
+    };
+    return {
+        calculateNotchWidth,
+        destroy,
+    };
+};
+
+export { createNotchController as c };