@ionic/core 8.7.3-dev.11755622775.1fc05815 → 8.7.3-dev.11755697669.1be2024b

package/dist/collection/components/textarea/textarea.js

@@ -37,10 +37,6 @@ export class Textarea {
          * is applied in both cases.
          */
         this.hasFocus = false;
-        /**
-         * Track validation state for proper aria-live announcements
-         */
-        this.isInvalid = false;
         /**
          * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
          * Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
@@ -187,31 +183,10 @@ export class Textarea {
             this.el.click();
         }
     }
-    /**
-     * Checks if the textarea is in an invalid state based on validation classes
-     */
-    checkValidationState() {
-        return this.el.classList.contains('ion-touched') && this.el.classList.contains('ion-invalid');
-    }
     connectedCallback() {
         const { el } = this;
         this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => forceUpdate(this));
         this.notchController = createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
-        // Watch for class changes to update validation state
-        if (Build.isBrowser && typeof MutationObserver !== 'undefined') {
-            this.validationObserver = new MutationObserver(() => {
-                const newIsInvalid = this.checkValidationState();
-                if (this.isInvalid !== newIsInvalid) {
-                    this.isInvalid = newIsInvalid;
-                }
-            });
-            this.validationObserver.observe(el, {
-                attributes: true,
-                attributeFilter: ['class'],
-            });
-        }
-        // Always set initial state
-        this.isInvalid = this.checkValidationState();
         this.debounceChanged();
         if (Build.isBrowser) {
             document.dispatchEvent(new CustomEvent('ionInputDidLoad', {
@@ -233,11 +208,6 @@ export class Textarea {
             this.notchController.destroy();
             this.notchController = undefined;
         }
-        // Clean up validation observer to prevent memory leaks
-        if (this.validationObserver) {
-            this.validationObserver.disconnect();
-            this.validationObserver = undefined;
-        }
     }
     componentWillLoad() {
         this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes(this.el, ['data-form-type', 'title', 'tabindex', 'dir']));
@@ -415,8 +385,8 @@ export class Textarea {
         ];
     }
     getHintTextID() {
-        const { isInvalid, helperText, errorText, helperTextId, errorTextId } = this;
-        if (isInvalid && errorText) {
+        const { el, helperText, errorText, helperTextId, errorTextId } = this;
+        if (el.classList.contains('ion-touched') && el.classList.contains('ion-invalid') && errorText) {
             return errorTextId;
         }
         if (helperText) {
@@ -475,7 +445,7 @@ export class Textarea {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (h(Host, { key: 'de258335fde7fa934cf3bd58c469525440457468', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'd9f2ede0107987fc42c99e310cd2336bad5a5755', class: createColorClasses(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -484,7 +454,7 @@ export class Textarea {
                 [`textarea-shape-${shape}`]: shape !== undefined,
                 [`textarea-label-placement-${labelPlacement}`]: true,
                 'textarea-disabled': disabled,
-            }) }, h("label", { key: '79fc87122871d45316b1c5fd0a467bf85351e804', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: '2375888a47557b41ea3b3bf8eae1fd3f2a4032bd', class: "textarea-wrapper-inner" }, h("div", { key: 'c5af683527a870bd85256b6de8a7d216283403dd', class: "start-slot-wrapper" }, h("slot", { key: 'd972e5784403c5cc6ed067ae578ce23ff8303e1e', name: "start" })), h("div", { key: '1092067609d912a76a8679767611e4ca3e071c6f', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ key: 'cd23a4bad4d5b460830340009d24d0618f14fd73', class: "native-textarea", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined }, this.inheritedAttributes), value)), h("div", { key: 'c91a5456f4490ef8699f2e44b4a6c64f6084f5fd', class: "end-slot-wrapper" }, h("slot", { key: 'b71ba7ba0d74091e81784432dcffa832b66f3f25', name: "end" }))), shouldRenderHighlight && h("div", { key: '757c3287e1cea5ee851227407685a437f8408c54', class: "textarea-highlight" })), this.renderBottomContent()));
+            }) }, h("label", { key: '9de598b95237462bb3bccffaefe83afbb43554b8', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: 'e33c426c6541d723ccc246bb404c03687726ff83', class: "textarea-wrapper-inner" }, h("div", { key: '521e11af9d54d281b0a2b1c25bcfc6f742c18296', class: "start-slot-wrapper" }, h("slot", { key: '515523f6ca3ce0e5dd08f3275c21a190fb1ca177', name: "start" })), h("div", { key: '916e01e00de8400ae00ef06bc1fb62d8be2eee08', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ key: '810271e6532d90e27dab1fcb26546113c1ce9cb0', class: "native-textarea", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId }, this.inheritedAttributes), value)), h("div", { key: '80aca9ea9546dca9d38efd291a6b0be384bb6978', class: "end-slot-wrapper" }, h("slot", { key: '407fab16c66a9f4a542369bfecc0d9afa0065977', name: "end" }))), shouldRenderHighlight && h("div", { key: 'f00523a6698fac8a1996e04303487bef01d10f25', class: "textarea-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-textarea"; }
     static get encapsulation() { return "scoped"; }
@@ -1055,8 +1025,7 @@ export class Textarea {
     }
     static get states() {
         return {
-            "hasFocus": {},
-            "isInvalid": {}
+            "hasFocus": {}
         };
     }
     static get events() {

package/dist/collection/utils/overlays.js

@@ -418,16 +418,20 @@ export const setRootAriaHidden = (hidden = false) => {
     }
     if (hidden) {
         viewContainer.setAttribute('aria-hidden', 'true');
+        viewContainer.setAttribute('inert', '');
     }
     else {
         viewContainer.removeAttribute('aria-hidden');
+        viewContainer.removeAttribute('inert');
     }
 };
 export const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts) => {
-    var _a, _b;
+    var _a, _b, _c;
     if (overlay.presented) {
         return;
     }
+    console.log("presenting overlay...");
+    (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.blur();
     /**
      * Due to accessibility guidelines, toasts do not have
      * focus traps.
@@ -443,7 +447,7 @@ export const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation
     hideAnimatingOverlayFromScreenReaders(overlay.el);
     overlay.presented = true;
     overlay.willPresent.emit();
-    (_a = overlay.willPresentShorthand) === null || _a === void 0 ? void 0 : _a.emit();
+    (_b = overlay.willPresentShorthand) === null || _b === void 0 ? void 0 : _b.emit();
     const mode = getIonMode(overlay);
     // get the user's animation fn if one was provided
     const animationBuilder = overlay.enterAnimation
@@ -452,7 +456,7 @@ export const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation
     const completed = await overlayAnimation(overlay, animationBuilder, overlay.el, opts);
     if (completed) {
         overlay.didPresent.emit();
-        (_b = overlay.didPresentShorthand) === null || _b === void 0 ? void 0 : _b.emit();
+        (_c = overlay.didPresentShorthand) === null || _c === void 0 ? void 0 : _c.emit();
     }
     /**
      * When an overlay that steals focus
@@ -487,6 +491,7 @@ export const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation
      * screen readers.
      */
     overlay.el.removeAttribute('aria-hidden');
+    overlay.el.removeAttribute('inert');
 };
 /**
  * When an overlay component is dismissed,
@@ -538,10 +543,11 @@ const restoreElementFocus = async (overlayEl) => {
     }
 };
 export const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnimation, opts) => {
-    var _a, _b;
+    var _a, _b, _c;
     if (!overlay.presented) {
         return false;
     }
+    (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.blur();
     const presentedOverlays = doc !== undefined ? getPresentedOverlays(doc) : [];
     /**
      * For accessibility, toasts lack focus traps and don't receive
@@ -575,7 +581,7 @@ export const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLe
         // Overlay contents should not be clickable during dismiss
         overlay.el.style.setProperty('pointer-events', 'none');
         overlay.willDismiss.emit({ data, role });
-        (_a = overlay.willDismissShorthand) === null || _a === void 0 ? void 0 : _a.emit({ data, role });
+        (_b = overlay.willDismissShorthand) === null || _b === void 0 ? void 0 : _b.emit({ data, role });
         const mode = getIonMode(overlay);
         const animationBuilder = overlay.leaveAnimation
             ? overlay.leaveAnimation
@@ -585,7 +591,7 @@ export const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLe
             await overlayAnimation(overlay, animationBuilder, overlay.el, opts);
         }
         overlay.didDismiss.emit({ data, role });
-        (_b = overlay.didDismissShorthand) === null || _b === void 0 ? void 0 : _b.emit({ data, role });
+        (_c = overlay.didDismissShorthand) === null || _c === void 0 ? void 0 : _c.emit({ data, role });
         // Get a reference to all animations currently assigned to this overlay
         // Then tear them down to return the overlay to its initial visual state
         const animations = activeAnimations.get(overlay) || [];
@@ -835,6 +841,7 @@ const hideAnimatingOverlayFromScreenReaders = (overlay) => {
          * This is done at the end of the `present` method.
          */
         overlay.setAttribute('aria-hidden', 'true');
+        overlay.setAttribute('inert', '');
     }
 };
 /**
@@ -862,6 +869,7 @@ const hideUnderlyingOverlaysFromScreenReaders = (newTopMostOverlay) => {
          */
         if (nextPresentedOverlay.hasAttribute('aria-hidden') || nextPresentedOverlay.tagName !== 'ION-TOAST') {
             presentedOverlay.setAttribute('aria-hidden', 'true');
+            presentedOverlay.setAttribute('inert', '');
         }
     }
 };
@@ -883,6 +891,7 @@ const revealOverlaysToScreenReaders = () => {
          * overlay too so focus can move there since focus is never automatically moved to the Toast.
          */
         currentOverlay.removeAttribute('aria-hidden');
+        currentOverlay.removeAttribute('inert');
         /**
          * If we found a non-Toast element then we can just remove aria-hidden and stop searching entirely
          * since this overlay should always receive focus. As a result, all underlying overlays should still

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-08-19T17:01:13",
+  "timestamp": "2025-08-20T13:49:31",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.36.2",

package/dist/esm/index.js

@@ -13,7 +13,7 @@ export { L as LogLevel } from './index-4DxY6_gG.js';
 export { I as IonicSafeString, g as getMode, s as setupConfig } from './config-Dx_6wPIJ.js';
 export { o as openURL } from './theme-DiVJyqlX.js';
 export { m as menuController } from './index-CXSTcaAW.js';
-export { b as actionSheetController, a as alertController, l as loadingController, m as modalController, p as pickerController, c as popoverController, t as toastController } from './overlays-ZX_4-t_r.js';
+export { b as actionSheetController, a as alertController, l as loadingController, m as modalController, p as pickerController, c as popoverController, t as toastController } from './overlays-C14Rvrme.js';
 import './index-ZjP4CjeZ.js';
 import './gesture-controller-BTEOs1at.js';
 import './hardware-back-button-Dhbd-23H.js';

package/dist/esm/ion-action-sheet.entry.js

@@ -5,7 +5,7 @@ import { r as registerInstance, c as createEvent, a as readTask, h, d as Host, g
 import { c as createButtonActiveGesture } from './button-active-DBUPuLNw.js';
 import { r as raf } from './helpers-8KSQQGQy.js';
 import { c as createLockController } from './lock-controller-B-hirT0v.js';
-import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, f as present, g as dismiss, h as eventMethod, s as safeCall, j as prepareOverlay, k as setOverlayId } from './overlays-ZX_4-t_r.js';
+import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, f as present, g as dismiss, h as eventMethod, s as safeCall, j as prepareOverlay, k as setOverlayId } from './overlays-C14Rvrme.js';
 import { g as getClassMap } from './theme-DiVJyqlX.js';
 import { b as getIonMode } from './ionic-global-CTSyufhF.js';
 import { c as createAnimation } from './animation-BvhAtgca.js';

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

@@ -6,7 +6,7 @@ import { E as ENABLE_HTML_CONTENT_DEFAULT, a as sanitizeDOMString } from './conf
 import { c as createButtonActiveGesture } from './button-active-DBUPuLNw.js';
 import { r as raf } from './helpers-8KSQQGQy.js';
 import { c as createLockController } from './lock-controller-B-hirT0v.js';
-import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays-ZX_4-t_r.js';
+import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays-C14Rvrme.js';
 import { g as getClassMap } from './theme-DiVJyqlX.js';
 import { b as getIonMode } from './ionic-global-CTSyufhF.js';
 import { c as createAnimation } from './animation-BvhAtgca.js';

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

@@ -4,13 +4,13 @@
 import { j as printIonError, f as printIonWarning, r as registerInstance, c as createEvent, w as writeTask, h, d as Host, g as getElement } from './index-4DxY6_gG.js';
 import { startFocusVisible } from './focus-visible-BmVRXR1y.js';
 import { r as raf, g as getElementRoot, a as renderHiddenInput, e as clamp } from './helpers-8KSQQGQy.js';
+import { F as FOCUS_TRAP_DISABLE_CLASS, d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays-C14Rvrme.js';
 import { i as isRTL } from './dir-C53feagD.js';
 import { c as createColorClasses, g as getClassMap } from './theme-DiVJyqlX.js';
 import { l as chevronDown, o as caretUpSharp, p as chevronForward, q as caretDownSharp, c as chevronBack } from './index-DV3sJJW8.js';
 import { b as getIonMode } from './ionic-global-CTSyufhF.js';
 import { i as isBefore, a as isAfter, g as getPreviousMonth, b as getNextMonth, c as isSameDay, d as getDay, e as generateDayAriaLabel, v as validateParts, f as getPartsFromCalendarDay, h as getNextYear, j as getPreviousYear, k as getEndOfWeek, l as getStartOfWeek, m as getPreviousDay, n as getNextDay, o as getPreviousWeek, p as getNextWeek, q as parseMinParts, r as parseMaxParts, s as parseDate, w as warnIfValueOutOfBounds, t as parseAmPm, u as clampDate, x as convertToArrayOfNumbers, y as convertDataToISO, z as getToday, A as getClosestValidDate, B as generateMonths, C as getNumDaysInMonth, D as getCombinedDateColumnData, E as getMonthColumnData, F as getDayColumnData, G as getYearColumnData, H as isMonthFirstLocale, I as getTimeColumnsData, J as isLocaleDayPeriodRTL, K as calculateHourFromAMPM, L as getDaysOfWeek, M as getMonthAndYear, N as getDaysOfMonth, O as getHourCycle, P as getLocalizedTime, Q as getLocalizedDateTime, R as formatValue } from './data-CKHMWxfe.js';
 import { c as createLockController } from './lock-controller-B-hirT0v.js';
-import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays-ZX_4-t_r.js';
 import { c as createAnimation } from './animation-BvhAtgca.js';
 import { a as hapticSelectionChanged, h as hapticSelectionEnd, b as hapticSelectionStart } from './haptic-DzAMWJuk.js';
 import './index-ZjP4CjeZ.js';
@@ -1299,7 +1299,7 @@ const Datetime = class {
         const renderArray = forcePresentation === 'time-date'
             ? [this.renderTimePickerColumns(forcePresentation), this.renderDatePickerColumns(forcePresentation)]
             : [this.renderDatePickerColumns(forcePresentation), this.renderTimePickerColumns(forcePresentation)];
-        return h("ion-picker", null, renderArray);
+        return h("ion-picker", { class: FOCUS_TRAP_DISABLE_CLASS }, renderArray);
     }
     renderDatePickerColumns(forcePresentation) {
         return forcePresentation === 'date-time' || forcePresentation === 'time-date'
@@ -1856,7 +1856,7 @@ const Datetime = class {
         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: 'f35cf200ff05d33074576e3d2754d3b2a0735b96', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
+        return (h(Host, { key: '57492534800ea059a7c2bbd9f0059cc0b75ae8d2', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
                 [mode]: true,
                 ['datetime-readonly']: readonly,
                 ['datetime-disabled']: disabled,
@@ -1866,7 +1866,7 @@ const Datetime = class {
                 [`datetime-size-${size}`]: true,
                 [`datetime-prefer-wheel`]: hasWheelVariant,
                 [`datetime-grid`]: isGridStyle,
-            })) }, h("div", { key: '859e9354a12bfa58ac3f964c2e66839f17071c00', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
+            })) }, h("div", { key: '97dac5e5195635ac0bc5fb472b9d09e5c3c6bbc3', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -42,10 +42,6 @@ const Input = class {
          * is applied in both cases.
          */
         this.hasFocus = false;
-        /**
-         * Track validation state for proper aria-live announcements
-         */
-        this.isInvalid = false;
         /**
          * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
          * Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
@@ -230,31 +226,10 @@ const Input = class {
     componentWillLoad() {
         this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes(this.el, ['tabindex', 'title', 'data-form-type', 'dir']));
     }
-    /**
-     * Checks if the input is in an invalid state based on validation classes
-     */
-    checkValidationState() {
-        return this.el.classList.contains('ion-touched') && this.el.classList.contains('ion-invalid');
-    }
     connectedCallback() {
         const { el } = this;
         this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => forceUpdate(this));
         this.notchController = createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
-        // Watch for class changes to update validation state
-        if (typeof MutationObserver !== 'undefined') {
-            this.validationObserver = new MutationObserver(() => {
-                const newIsInvalid = this.checkValidationState();
-                if (this.isInvalid !== newIsInvalid) {
-                    this.isInvalid = newIsInvalid;
-                }
-            });
-            this.validationObserver.observe(el, {
-                attributes: true,
-                attributeFilter: ['class'],
-            });
-        }
-        // Always set initial state
-        this.isInvalid = this.checkValidationState();
         this.debounceChanged();
         {
             document.dispatchEvent(new CustomEvent('ionInputDidLoad', {
@@ -291,11 +266,6 @@ const Input = class {
             this.notchController.destroy();
             this.notchController = undefined;
         }
-        // Clean up validation observer to prevent memory leaks
-        if (this.validationObserver) {
-            this.validationObserver.disconnect();
-            this.validationObserver = undefined;
-        }
     }
     /**
      * Sets focus on the native `input` in `ion-input`. Use this method instead of the global
@@ -404,8 +374,8 @@ const Input = class {
         ];
     }
     getHintTextID() {
-        const { isInvalid, helperText, errorText, helperTextId, errorTextId } = this;
-        if (isInvalid && errorText) {
+        const { el, helperText, errorText, helperTextId, errorTextId } = this;
+        if (el.classList.contains('ion-touched') && el.classList.contains('ion-invalid') && errorText) {
             return errorTextId;
         }
         if (helperText) {
@@ -518,7 +488,7 @@ const Input = class {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (h(Host, { key: '1b0cffa910aef4eac24438bf3158e51905e70788', class: createColorClasses(this.color, {
+        return (h(Host, { key: '41b2526627e7d2773a80f011b123284203a71ca0', class: createColorClasses(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -529,14 +499,14 @@ const Input = class {
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 'input-disabled': disabled,
-            }) }, h("label", { key: '24411a6cc190e2054015bca5e2827b96c65bba17', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: '7fa7a7f6d2778e6efbebc6f2671d8a63048f76a8', class: "native-wrapper", onClick: this.onLabelClick }, h("slot", { key: '14f489e6026967ee1b2eee1519bad4230f028489', name: "start" }), h("input", Object.assign({ key: 'd0f5b756394aced0831e80e91313a417bda37e6f', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (h("button", { key: '3e37003927082bbbfce4b3396a263969aa2289fc', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
+            }) }, h("label", { key: '9ab078363e32528102b441ad1791d83f86fdcbdc', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: 'e34b594980ec62e4c618e827fadf7669a39ad0d8', class: "native-wrapper", onClick: this.onLabelClick }, h("slot", { key: '12dc04ead5502e9e5736240e918bf9331bf7b5d9', name: "start" }), h("input", Object.assign({ key: 'df356eb4ced23109b2c0242f36dc043aba8782d6', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (h("button", { key: 'f79f68cabcd4ea99419331174a377827db0c0741', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: this.clearTextInput }, h("ion-icon", { key: '269ccdfd95a8a5b39bf0587b1494b4badd5c65b3', "aria-hidden": "true", icon: clearIconData }))), h("slot", { key: '5d93a350194c4197c01c5d54f50060e7f527f065', name: "end" })), shouldRenderHighlight && h("div", { key: 'fbdd13d41b37aa1e4608ba2535f7b833748eae3f', class: "input-highlight" })), this.renderBottomContent()));
+            }, onClick: this.clearTextInput }, h("ion-icon", { key: '237ec07ec2e10f08818a332bb596578c2c49f770', "aria-hidden": "true", icon: clearIconData }))), h("slot", { key: '1f0a3624aa3e8dc3c307a6762230ab698768a5e5', name: "end" })), shouldRenderHighlight && h("div", { key: '8a8cbb82695a722a0010b53dd0b1f1f97534a20b', class: "input-highlight" })), this.renderBottomContent()));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -5,7 +5,7 @@ import { r as registerInstance, c as createEvent, e as config, h, d as Host, g a
 import { E as ENABLE_HTML_CONTENT_DEFAULT, a as sanitizeDOMString } from './config-Dx_6wPIJ.js';
 import { r as raf } from './helpers-8KSQQGQy.js';
 import { c as createLockController } from './lock-controller-B-hirT0v.js';
-import { d as createDelegateController, e as createTriggerController, B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod } from './overlays-ZX_4-t_r.js';
+import { d as createDelegateController, e as createTriggerController, B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod } from './overlays-C14Rvrme.js';
 import { g as getClassMap } from './theme-DiVJyqlX.js';
 import { b as getIonMode } from './ionic-global-CTSyufhF.js';
 import { c as createAnimation } from './animation-BvhAtgca.js';

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

@@ -3,7 +3,7 @@
  */
 import { r as registerInstance, c as createEvent, e as config, j as printIonError, h, d as Host, g as getElement } from './index-4DxY6_gG.js';
 import { g as getTimeGivenProgression } from './cubic-bezier-hHmYLOfE.js';
-import { o as getPresentedOverlay, B as BACKDROP, n as focusFirstDescendant, q as focusLastDescendant, G as GESTURE } from './overlays-ZX_4-t_r.js';
+import { o as getPresentedOverlay, B as BACKDROP, n as focusFirstDescendant, q as focusLastDescendant, G as GESTURE } from './overlays-C14Rvrme.js';
 import { G as GESTURE_CONTROLLER } from './gesture-controller-BTEOs1at.js';
 import { shouldUseCloseWatcher } from './hardware-back-button-Dhbd-23H.js';
 import { o as isEndSide, i as inheritAriaAttributes, l as assert, e as clamp } from './helpers-8KSQQGQy.js';

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

@@ -7,7 +7,7 @@ import { C as CoreDelegate, a as attachComponent, d as detachComponent } from '.
 import { e as clamp, g as getElementRoot, r as raf, b as inheritAttributes, h as hasLazyBuild } from './helpers-8KSQQGQy.js';
 import { c as createLockController } from './lock-controller-B-hirT0v.js';
 import { g as getCapacitor } from './capacitor-CFERIeaU.js';
-import { G as GESTURE, O as OVERLAY_GESTURE_PRIORITY, F as FOCUS_TRAP_DISABLE_CLASS, e as createTriggerController, B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod } from './overlays-ZX_4-t_r.js';
+import { G as GESTURE, O as OVERLAY_GESTURE_PRIORITY, F as FOCUS_TRAP_DISABLE_CLASS, e as createTriggerController, B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod } from './overlays-C14Rvrme.js';
 import { g as getClassMap } from './theme-DiVJyqlX.js';
 import { e as deepReady, w as waitForMount } from './index-Dp7GXH1z.js';
 import { b as getIonMode } from './ionic-global-CTSyufhF.js';

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

@@ -6,9 +6,9 @@ import { b as inheritAttributes } from './helpers-8KSQQGQy.js';
 import { c as createColorClasses } from './theme-DiVJyqlX.js';
 import { b as getIonMode } from './ionic-global-CTSyufhF.js';
 
-const pickerColumnOptionIosCss = "button{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden}:host(.option-disabled){opacity:0.4}:host(.option-disabled) button{cursor:default}";
+const pickerColumnOptionIosCss = ".picker-column-option-button{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden}:host(.option-disabled){opacity:0.4}:host(.option-disabled) .picker-column-option-button{cursor:default}";
 
-const pickerColumnOptionMdCss = "button{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden}:host(.option-disabled){opacity:0.4}:host(.option-disabled) button{cursor:default}:host(.option-active){color:var(--ion-color-base)}";
+const pickerColumnOptionMdCss = ".picker-column-option-button{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden}:host(.option-disabled){opacity:0.4}:host(.option-disabled) .picker-column-option-button{cursor:default}:host(.option-active){color:var(--ion-color-base)}";
 
 const PickerColumnOption = class {
     constructor(hostRef) {
@@ -100,7 +100,7 @@ const PickerColumnOption = class {
         return (h(Host, { key: 'f816729941aabcb31ddfdce3ffe2e2139030d715', class: createColorClasses(color, {
                 [mode]: true,
                 ['option-disabled']: disabled,
-            }) }, h("button", { key: '48dff7833bb60fc8331cd353a0885e6affa683d1', tabindex: "-1", "aria-label": ariaLabel, disabled: disabled, onClick: () => this.onClick() }, h("slot", { key: 'f9224d0e7b7aa6c05b29abfdcfe0f30ad6ee3141' }))));
+            }) }, h("div", { key: 'd942de84fd14d7dc06b1e5cf4f7920d1dc3c6371', class: 'picker-column-option-button', role: "button", "aria-label": ariaLabel, onClick: () => this.onClick() }, h("slot", { key: 'b0df5717b42209e649097209a01476e1a66f5c5c' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -408,23 +408,6 @@ const PickerColumn = class {
             var _a;
             return el ? (_a = el.getAttribute('aria-label')) !== null && _a !== void 0 ? _a : el.innerText : '';
         };
-        /**
-         * Render an element that overlays the column. This element is for assistive
-         * tech to allow users to navigate the column up/down. This element should receive
-         * focus as it listens for synthesized keyboard events as required by the
-         * slider role: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role
-         */
-        this.renderAssistiveFocusable = () => {
-            const { activeItem } = this;
-            const valueText = this.getOptionValueText(activeItem);
-            /**
-             * When using the picker, the valuetext provides important context that valuenow
-             * does not. Additionally, using non-zero valuemin/valuemax values can cause
-             * WebKit to incorrectly announce numeric valuetext values (such as a year
-             * like "2024") as percentages: https://bugs.webkit.org/show_bug.cgi?id=273126
-             */
-            return (h("div", { ref: (el) => (this.assistiveFocusable = el), class: "assistive-focusable", role: "slider", tabindex: this.disabled ? undefined : 0, "aria-label": this.ariaLabel, "aria-valuemin": 0, "aria-valuemax": 0, "aria-valuenow": 0, "aria-valuetext": valueText, "aria-orientation": "vertical", onKeyDown: (ev) => this.onKeyDown(ev) }));
-        };
     }
     ariaLabelChanged(newValue) {
         this.ariaLabel = newValue;
@@ -565,33 +548,14 @@ const PickerColumn = class {
     render() {
         const { color, disabled, isActive, numericInput } = this;
         const mode = getIonMode(this);
-        return (h(Host, { key: 'ea0280355b2f87895bf7dddd289ccf473aa759f3', class: createColorClasses(color, {
+        return (h(Host, { key: 'db903fd415f8a2d91994dececca481c1af8ba6a9', class: createColorClasses(color, {
                 [mode]: true,
                 ['picker-column-active']: isActive,
                 ['picker-column-numeric-input']: numericInput,
                 ['picker-column-disabled']: disabled,
-            }) }, this.renderAssistiveFocusable(), h("slot", { key: '482992131cdeb85b1f61430d7fe1322a16345769', name: "prefix" }), h("div", { key: '43f7f80d621d411ef366b3ca1396299e8c9a0c97', "aria-hidden": "true", class: "picker-opts", ref: (el) => {
+            }) }, h("slot", { key: '02ce9e1dd7df91afcd50b06416552bcffb5dec98', name: "prefix" }), h("div", { key: '6dfd7d2429bec19244a6b1afb4448121963a031b', class: "picker-opts", ref: (el) => {
                 this.scrollEl = el;
-            },
-            /**
-             * When an element has an overlay scroll style and
-             * a fixed height, Firefox will focus the scrollable
-             * container if the content exceeds the container's
-             * dimensions.
-             *
-             * This causes keyboard navigation to focus to this
-             * element instead of going to the next element in
-             * the tab order.
-             *
-             * The desired behavior is for the user to be able to
-             * focus the assistive focusable element and tab to
-             * the next element in the tab order. Instead of tabbing
-             * to this element.
-             *
-             * To prevent this, we set the tabIndex to -1. This
-             * will match the behavior of the other browsers.
-             */
-            tabIndex: -1 }, h("div", { key: '13a9ee686132af32240710730765de4c0003a9e8', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'dbccba4920833cfcebe9b0fc763458ec3053705a', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '682b43f83a5ea2e46067457f3af118535e111edb', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("slot", { key: 'd27e1e1dc0504b2f4627a29912a05bb91e8e413a' }), h("div", { key: '61c948dbb9cf7469aed3018542bc0954211585ba', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'cf46c277fbee65e35ff44ce0d53ce12aa9cbf9db', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'bbc0e2d491d3f836ab849493ade2f7fa6ad9244e', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), h("slot", { key: 'd25cbbe14b2914fe7b878d43b4e3f4a8c8177d24', name: "suffix" })));
+            }, role: "slider", tabindex: this.disabled ? undefined : 0, "aria-label": this.ariaLabel, "aria-valuemin": 0, "aria-valuemax": 0, "aria-valuenow": 0, "aria-valuetext": this.getOptionValueText(this.activeItem), "aria-orientation": "vertical", onKeyDown: (ev) => this.onKeyDown(ev) }, h("div", { key: 'e30ce0b9cefbfe4d4441fa33acf595da31855c3f', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '8be2bd293c12c6ba720d9b31d0d561a96f42e97d', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '8afdcddddabbf646fbb55cb0ba4448309a2c1dd9', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("slot", { key: '6aa0dacc34d6848575ad5b122b9046982308ca43' }), h("div", { key: '92ec8a357414c1b779b11d1dd18fb87a7ee63982', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'b89457cb74b5907c25594ff6720ac54ca537e933', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '5bbc92e6bc24de08e39873bf08c5b668373ac0f8', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), h("slot", { key: 'd7bf2b519214f0f3576a4ca79844ad97827dd97f', name: "suffix" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { r as registerInstance, c as createEvent, f as printIonWarning, h, d as Host, g as getElement } from './index-4DxY6_gG.js';
-import { B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, n as focusFirstDescendant, g as dismiss, h as eventMethod, F as FOCUS_TRAP_DISABLE_CLASS } from './overlays-ZX_4-t_r.js';
+import { B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, n as focusFirstDescendant, g as dismiss, h as eventMethod, F as FOCUS_TRAP_DISABLE_CLASS } from './overlays-C14Rvrme.js';
 import { C as CoreDelegate, a as attachComponent, d as detachComponent } from './framework-delegate-BLEBgH06.js';
 import { g as getElementRoot, r as raf, f as addEventListener, h as hasLazyBuild } from './helpers-8KSQQGQy.js';
 import { c as createLockController } from './lock-controller-B-hirT0v.js';

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

@@ -3,7 +3,7 @@
  */
 import { r as registerInstance, h, i as forceUpdate, d as Host, g as getElement } from './index-4DxY6_gG.js';
 import { b as getIonMode } from './ionic-global-CTSyufhF.js';
-import { s as safeCall } from './overlays-ZX_4-t_r.js';
+import { s as safeCall } from './overlays-C14Rvrme.js';
 import { g as getClassMap } from './theme-DiVJyqlX.js';
 import './index-ZjP4CjeZ.js';
 import './helpers-8KSQQGQy.js';

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

@@ -5,7 +5,7 @@ import { r as registerInstance, c as createEvent, f as printIonWarning, h, d as
 import { c as createNotchController } from './notch-controller-lb417-kU.js';
 import { i as isOptionSelected, c as compareOptions } from './compare-with-utils-sObYyvOy.js';
 import { b as inheritAttributes, a as renderHiddenInput, n as focusVisibleElement } from './helpers-8KSQQGQy.js';
-import { c as popoverController, b as actionSheetController, a as alertController, m as modalController, s as safeCall } from './overlays-ZX_4-t_r.js';
+import { c as popoverController, b as actionSheetController, a as alertController, m as modalController, s as safeCall } from './overlays-C14Rvrme.js';
 import { i as isRTL } from './dir-C53feagD.js';
 import { h as hostContext, c as createColorClasses, g as getClassMap } from './theme-DiVJyqlX.js';
 import { w as watchForOptions } from './watch-options-Dtdm8lKC.js';

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

@@ -40,10 +40,6 @@ const Textarea = class {
          * is applied in both cases.
          */
         this.hasFocus = false;
-        /**
-         * Track validation state for proper aria-live announcements
-         */
-        this.isInvalid = false;
         /**
          * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
          * Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
@@ -190,31 +186,10 @@ const Textarea = class {
             this.el.click();
         }
     }
-    /**
-     * Checks if the textarea is in an invalid state based on validation classes
-     */
-    checkValidationState() {
-        return this.el.classList.contains('ion-touched') && this.el.classList.contains('ion-invalid');
-    }
     connectedCallback() {
         const { el } = this;
         this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => forceUpdate(this));
         this.notchController = createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
-        // Watch for class changes to update validation state
-        if (typeof MutationObserver !== 'undefined') {
-            this.validationObserver = new MutationObserver(() => {
-                const newIsInvalid = this.checkValidationState();
-                if (this.isInvalid !== newIsInvalid) {
-                    this.isInvalid = newIsInvalid;
-                }
-            });
-            this.validationObserver.observe(el, {
-                attributes: true,
-                attributeFilter: ['class'],
-            });
-        }
-        // Always set initial state
-        this.isInvalid = this.checkValidationState();
         this.debounceChanged();
         {
             document.dispatchEvent(new CustomEvent('ionInputDidLoad', {
@@ -236,11 +211,6 @@ const Textarea = class {
             this.notchController.destroy();
             this.notchController = undefined;
         }
-        // Clean up validation observer to prevent memory leaks
-        if (this.validationObserver) {
-            this.validationObserver.disconnect();
-            this.validationObserver = undefined;
-        }
     }
     componentWillLoad() {
         this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes(this.el, ['data-form-type', 'title', 'tabindex', 'dir']));
@@ -418,8 +388,8 @@ const Textarea = class {
         ];
     }
     getHintTextID() {
-        const { isInvalid, helperText, errorText, helperTextId, errorTextId } = this;
-        if (isInvalid && errorText) {
+        const { el, helperText, errorText, helperTextId, errorTextId } = this;
+        if (el.classList.contains('ion-touched') && el.classList.contains('ion-invalid') && errorText) {
             return errorTextId;
         }
         if (helperText) {
@@ -478,7 +448,7 @@ const Textarea = class {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (h(Host, { key: 'de258335fde7fa934cf3bd58c469525440457468', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'd9f2ede0107987fc42c99e310cd2336bad5a5755', class: createColorClasses(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -487,7 +457,7 @@ const Textarea = class {
                 [`textarea-shape-${shape}`]: shape !== undefined,
                 [`textarea-label-placement-${labelPlacement}`]: true,
                 'textarea-disabled': disabled,
-            }) }, h("label", { key: '79fc87122871d45316b1c5fd0a467bf85351e804', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: '2375888a47557b41ea3b3bf8eae1fd3f2a4032bd', class: "textarea-wrapper-inner" }, h("div", { key: 'c5af683527a870bd85256b6de8a7d216283403dd', class: "start-slot-wrapper" }, h("slot", { key: 'd972e5784403c5cc6ed067ae578ce23ff8303e1e', name: "start" })), h("div", { key: '1092067609d912a76a8679767611e4ca3e071c6f', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ key: 'cd23a4bad4d5b460830340009d24d0618f14fd73', class: "native-textarea", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined }, this.inheritedAttributes), value)), h("div", { key: 'c91a5456f4490ef8699f2e44b4a6c64f6084f5fd', class: "end-slot-wrapper" }, h("slot", { key: 'b71ba7ba0d74091e81784432dcffa832b66f3f25', name: "end" }))), shouldRenderHighlight && h("div", { key: '757c3287e1cea5ee851227407685a437f8408c54', class: "textarea-highlight" })), this.renderBottomContent()));
+            }) }, h("label", { key: '9de598b95237462bb3bccffaefe83afbb43554b8', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: 'e33c426c6541d723ccc246bb404c03687726ff83', class: "textarea-wrapper-inner" }, h("div", { key: '521e11af9d54d281b0a2b1c25bcfc6f742c18296', class: "start-slot-wrapper" }, h("slot", { key: '515523f6ca3ce0e5dd08f3275c21a190fb1ca177', name: "start" })), h("div", { key: '916e01e00de8400ae00ef06bc1fb62d8be2eee08', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ key: '810271e6532d90e27dab1fcb26546113c1ce9cb0', class: "native-textarea", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId }, this.inheritedAttributes), value)), h("div", { key: '80aca9ea9546dca9d38efd291a6b0be384bb6978', class: "end-slot-wrapper" }, h("slot", { key: '407fab16c66a9f4a542369bfecc0d9afa0065977', name: "end" }))), shouldRenderHighlight && h("div", { key: 'f00523a6698fac8a1996e04303487bef01d10f25', class: "textarea-highlight" })), this.renderBottomContent()));
     }
     get el() { return getElement(this); }
     static get watchers() { return {