@ionic/core 8.7.16-dev.11769623699.1fe289a4 → 8.7.16-dev.11770318223.1177a6ea

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

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Build, Host, forceUpdate, h, writeTask, } from "@stencil/core";
-import { createNotchController, checkInvalidState } from "../../utils/forms/index";
+import { createNotchController, checkInvalidState, reportValidityToElementInternals } from "../../utils/forms/index";
 import { inheritAriaAttributes, debounceEvent, inheritAttributes, componentOnReady } from "../../utils/helpers";
 import { createSlotMutationController } from "../../utils/slot-mutation-controller";
 import { createColorClasses, hostContext } from "../../utils/theme";
@@ -15,6 +15,16 @@ import { getCounterText } from "../input/input.utils";
  * @slot label - The label text to associate with the textarea. Use the `labelPlacement` property to control where the label is placed relative to the textarea. Use this if you need to render a label with custom HTML. (EXPERIMENTAL)
  * @slot start - Content to display at the leading edge of the textarea. (EXPERIMENTAL)
  * @slot end - Content to display at the trailing edge of the textarea. (EXPERIMENTAL)
+ *
+ * @part wrapper - The clickable label element that wraps the entire form field (label text, slots, and native textarea).
+ * @part container - The inner wrapper element that directly contains the native textarea element.
+ * @part label - The label text describing the textarea.
+ * @part native - The native textarea element.
+ * @part supporting-text - Supporting text displayed beneath the textarea label.
+ * @part helper-text - Supporting text displayed beneath the textarea label when the textarea is valid.
+ * @part error-text - Supporting text displayed beneath the textarea label when the textarea is invalid and touched.
+ * @part counter - The character counter displayed when the counter property is set.
+ * @part bottom - The container element for helper text, error text, and counter.
  */
 export class Textarea {
     constructor() {
@@ -161,6 +171,12 @@ export class Textarea {
          */
         this.ionInput = debounce === undefined ? originalIonInput !== null && originalIonInput !== void 0 ? originalIonInput : ionInput : debounceEvent(ionInput, debounce);
     }
+    /**
+     * Update element internals when disabled prop changes
+     */
+    disabledChanged() {
+        this.updateElementInternals();
+    }
     /**
      * Update the native input element when the value changes
      */
@@ -170,8 +186,22 @@ export class Textarea {
         if (nativeInput && nativeInput.value !== value) {
             nativeInput.value = value;
         }
+        this.updateElementInternals();
         this.runAutoGrow();
     }
+    /**
+     * Update native input and element internals when required prop changes
+     */
+    requiredChanged() {
+        // Explicitly update the native element's required attribute to ensure
+        // browser validation works correctly when required changes dynamically.
+        // While the template binding should handle this, we need to update it
+        // synchronously for the browser's validation to recognize the change.
+        if (this.nativeInput) {
+            this.nativeInput.required = this.required;
+        }
+        this.updateElementInternals();
+    }
     /**
      * dir is a globally enumerated attribute.
      * As a result, creating these as properties
@@ -247,7 +277,14 @@ export class Textarea {
     }
     componentDidLoad() {
         this.originalIonInput = this.ionInput;
+        this.updateElementInternals();
         this.runAutoGrow();
+        // Override focus() to delegate to the native textarea.
+        // This is needed for Safari and Firefox which don't properly
+        // delegate focus when calling focus() directly on the host.
+        this.el.focus = () => {
+            this.setFocus();
+        };
     }
     componentDidRender() {
         var _a;
@@ -356,12 +393,43 @@ export class Textarea {
     getValue() {
         return this.value || '';
     }
+    /**
+     * Called when the form state is restored.
+     * Restores the component's value.
+     */
+    formStateRestoreCallback(value) {
+        this.value = value;
+    }
+    /**
+     * Called when the form is reset.
+     * Resets the component's value.
+     */
+    formResetCallback() {
+        this.value = '';
+    }
+    /**
+     * Updates the form value and reports validity state to the browser via
+     * ElementInternals. This should be called when the component loads, when
+     * the required prop changes, when the disabled prop changes, and when the value
+     * changes to ensure the form value stays in sync and validation state is updated.
+     */
+    updateElementInternals() {
+        // Disabled form controls should not be included in form data
+        // Pass null to setFormValue when disabled to exclude it from form submission
+        const value = this.disabled ? null : this.getValue();
+        // ElementInternals may not be fully available in test environments
+        // so we need to check if the method exists before calling it
+        if (typeof this.internals.setFormValue === 'function') {
+            this.internals.setFormValue(value);
+        }
+        reportValidityToElementInternals(this.nativeInput, this.internals);
+    }
     renderLabel() {
         const { label } = this;
         return (h("div", { class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !this.hasLabel,
-            } }, label === undefined ? h("slot", { name: "label" }) : h("div", { class: "label-text" }, label)));
+            }, part: "label" }, label === undefined ? h("slot", { name: "label" }) : h("div", { class: "label-text" }, label)));
     }
     /**
      * Gets any content passed into the `label` slot,
@@ -430,8 +498,8 @@ export class Textarea {
     renderHintText() {
         const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
         return [
-            h("div", { id: helperTextId, class: "helper-text", "aria-live": "polite" }, !isInvalid ? helperText : null),
-            h("div", { id: errorTextId, class: "error-text", role: "alert" }, isInvalid ? errorText : null),
+            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),
         ];
     }
     getHintTextID() {
@@ -449,7 +517,7 @@ export class Textarea {
         if (counter !== true || maxlength === undefined) {
             return;
         }
-        return h("div", { class: "counter" }, getCounterText(value, maxlength, counterFormatter));
+        return (h("div", { class: "counter", part: "counter" }, getCounterText(value, maxlength, counterFormatter)));
     }
     /**
      * Responsible for rendering helper text,
@@ -467,7 +535,7 @@ export class Textarea {
         if (!hasHintText && !hasCounter) {
             return;
         }
-        return (h("div", { class: "textarea-bottom" }, this.renderHintText(), this.renderCounter()));
+        return (h("div", { class: "textarea-bottom", part: "bottom" }, this.renderHintText(), this.renderCounter()));
     }
     render() {
         const { inputId, disabled, readonly, size, labelPlacement, el, hasFocus } = this;
@@ -497,7 +565,7 @@ export class Textarea {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (h(Host, { key: 'f361b0d612ea373b27f5daa3b0d86f5a87e3a347', class: createColorClasses(this.color, {
+        return (h(Host, { key: '5be3ab7c5adf5ef61d70aff916d233239cc3034e', class: createColorClasses(this.color, {
                 [theme]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -506,9 +574,10 @@ export class Textarea {
                 [`textarea-shape-${shape}`]: shape !== undefined,
                 [`textarea-size-${size}`]: true,
                 [`textarea-label-placement-${labelPlacement}`]: true,
+                'in-item': inItem,
                 'textarea-disabled': disabled,
                 'textarea-readonly': readonly,
-            }) }, h("label", { key: '56f39fa4c6ed77958165084bc07addcb4f4878fa', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: '14972dea04325a7dbdeae65fa22263b412f9f023', class: "textarea-wrapper-inner" }, 
+            }) }, h("label", { key: '7eb9826e9618606e1de74cb842c9236a2b5d0cb4', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick, part: "wrapper" }, this.renderLabelContainer(), h("div", { key: '5f0362d9f1f07f73b3d7d89d55fcb463ad0bc1da', class: "textarea-wrapper-inner" }, 
         /**
          * For the ionic theme, we render the outline container here
          * instead of higher up, so it can be positioned relative to
@@ -518,10 +587,12 @@ export class Textarea {
          * <label> element, ensuring that clicking the label text
          * focuses the textarea.
          */
-        theme === 'ionic' && fill === 'outline' && h("div", { key: '42c8c5948c86e9a0342fcb2e6b8dceff320dec82', class: "textarea-outline" }), h("div", { key: '75c3c69bb990b9e85765ee3825e3a49fd3bb3d7f', class: "start-slot-wrapper" }, h("slot", { key: '3d3459222c5572277f36af98d9156d64a0646461', name: "start" })), h("div", { key: '84bd1c9cb2b018e27c30af4bdba345674f2c3f18', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ key: '4c077fd2d1ebc85adc594dba46e9394201a4a150', 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: '7ce24ce1907d48437bf71a643e19534ec3a3a1c2', class: "end-slot-wrapper" }, h("slot", { key: 'ab613d63868ac280b6559511ec8e1bc61f208008', name: "end" }))), shouldRenderHighlight && h("div", { key: '47af23482b696315eec2849887326d2229391f80', class: "textarea-highlight" })), this.renderBottomContent()));
+        theme === 'ionic' && fill === 'outline' && h("div", { key: 'c8f68629935444bedaf41c8958e13fd1916a0871', class: "textarea-outline" }), h("div", { key: '56349914a8348214f9a663c768a3915fc70e21cd', class: "start-slot-wrapper" }, h("slot", { key: '8b399fd0f049f579f7af1183052614f459d52169', name: "start" })), h("div", { key: '5edec308a1ade5d4634ee5bae413e27a9f17e3cb', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el), part: "container" }, h("textarea", Object.assign({ key: 'ac792e9d46e30bb0fe72b6e8f57880ff5114dff6', class: "native-textarea", part: "native", 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: '02e2a10f1f8fd6e05f457320cb90fade56cf06a9', class: "end-slot-wrapper" }, h("slot", { key: '4314c344b0054cafcb65358451afa2dbef5bd8ef', name: "end" }))), shouldRenderHighlight && h("div", { key: '94e8b3639665cf9c068abfd681e7fa4c515307f4', class: "textarea-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-textarea"; }
-    static get encapsulation() { return "scoped"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get formAssociated() { return true; }
     static get originalStyleUrls() {
         return {
             "ios": ["textarea.ios.scss"],
@@ -832,7 +903,7 @@ export class Textarea {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "required",
                 "defaultValue": "false"
             },
@@ -1246,9 +1317,15 @@ export class Textarea {
         return [{
                 "propName": "debounce",
                 "methodName": "debounceChanged"
+            }, {
+                "propName": "disabled",
+                "methodName": "disabledChanged"
             }, {
                 "propName": "value",
                 "methodName": "valueChanged"
+            }, {
+                "propName": "required",
+                "methodName": "requiredChanged"
             }, {
                 "propName": "dir",
                 "methodName": "onDirChanged"
@@ -1263,5 +1340,6 @@ export class Textarea {
                 "passive": false
             }];
     }
+    static get attachInternalsMemberName() { return "internals"; }
 }
 let textareaIds = 0;

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

@@ -152,12 +152,12 @@
   background: initial;
 }
 
-:host-context(ion-item) {
+:host(.in-item) {
   align-self: baseline;
 }
 
-:host-context(ion-item)[slot=start],
-:host-context(ion-item)[slot=end] {
+:host(.in-item[slot=start]),
+:host(.in-item[slot=end]) {
   width: auto;
 }
 
@@ -334,6 +334,7 @@
   display: flex;
   width: 100%;
   min-height: inherit;
+  box-sizing: border-box;
 }
 
 :host(.ion-touched.ion-invalid) {
@@ -438,6 +439,10 @@
   overflow: hidden;
 }
 
+.textarea-outline {
+  box-sizing: border-box;
+}
+
 /**
  * If no label text is placed into the slot
  * then the element should be hidden otherwise
@@ -547,17 +552,6 @@
   opacity: 1;
 }
 
-/**
- * When the rows attribute is set, the textarea should not force a min-height,
- * but rather respect the natural height of the textarea. Specially when
- * rows is set to 1.
- */
-:host(.textarea-fill-outline.sc-ion-textarea-md-h[rows]),
-:host(.textarea-label-placement-stacked[rows]),
-:host(.textarea-label-placement-floating[rows]) {
-  min-height: auto;
-}
-
 .start-slot-wrapper,
 .end-slot-wrapper {
   display: flex;
@@ -1345,6 +1339,7 @@
 :host(.textarea-fill-outline) .textarea-outline-end {
   border-top: var(--border-width) var(--border-style) var(--border-color);
   border-bottom: var(--border-width) var(--border-style) var(--border-color);
+  box-sizing: border-box;
 }
 
 /**

package/dist/collection/components/thumbnail/thumbnail.js

@@ -10,9 +10,9 @@ import { getIonTheme } from "../../global/ionic-global";
 export class Thumbnail {
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: '670c8628ac609877cf628e7301223a43d808535b', class: {
+        return (h(Host, { key: '6053cf163155d4268dad4fc81ffc6bbc70d75659', class: {
                 [theme]: true,
-            } }, h("slot", { key: 'e766b13c6cf4167edfeda2d21654c1e778125955' })));
+            } }, h("slot", { key: 'b7afb5835bce7c7ed9e5cf44758bbe2d802e1271' })));
     }
     static get is() { return "ion-thumbnail"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/title/title.js

@@ -27,11 +27,11 @@ export class ToolbarTitle {
     render() {
         const theme = getIonTheme(this);
         const size = this.getSize();
-        return (h(Host, { key: '770c002757fc29f57277da78e25ac426346eaed9', class: createColorClasses(this.color, {
+        return (h(Host, { key: '8db3e5f9dbd8b1762a9919eaeef29c98649dfb25', class: createColorClasses(this.color, {
                 [theme]: true,
                 [`title-${size}`]: true,
                 'title-rtl': document.dir === 'rtl',
-            }) }, h("div", { key: 'fb2d65cc98575d310f9dbcf8d5b2b8a8d6f87e57', class: "toolbar-title" }, h("slot", { key: '73d0c525b1acde370a1460008e7c0145ae5d7e4b' }))));
+            }) }, h("div", { key: 'a31ebae2c494a51d2145eec69d0b1bc635108a01', class: "toolbar-title" }, h("slot", { key: 'f5975b44b3e3afbf98dcbdb53fc78447b49407b3' }))));
     }
     static get is() { return "ion-title"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/toast/toast.js

@@ -437,9 +437,9 @@ export class Toast {
         if (layout === 'stacked' && startButtons.length > 0 && endButtons.length > 0) {
             printIonWarning('[ion-toast] - This toast is using start and end buttons with the stacked toast layout. We recommend following the best practice of using either start or end buttons with the stacked toast layout.', el);
         }
-        return (h(Host, Object.assign({ key: '88e2d57b1de7194aa5e62eb9b4c7fe555b97060d', tabindex: "-1" }, this.htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '3f25e3c14197723e0c97edb71ddeeccb4f9143b3', tabindex: "-1" }, this.htmlAttributes, { style: {
                 zIndex: `${60000 + this.overlayIndex}`,
-            }, class: createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true, [theme]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent, [`toast-shape-${shape}`]: shape !== undefined, [`toast-hue-${hue}`]: hue !== undefined })), onIonToastWillDismiss: this.dispatchCancelHandler }), h("div", { key: 'f9764be0cddf6188cbf1cef202ddbcb805a093b3', class: wrapperClass }, h("div", { key: 'b202a52eac3d3087c11834e851d4e7e92e762399', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { key: '8009f48afeb838dcc9fc3b01c3e4062c1d323347', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { key: '2767dee244fa4576ec5163b274b89384692be753', class: "toast-content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
+            }, class: createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true, [theme]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent, [`toast-shape-${shape}`]: shape !== undefined, [`toast-hue-${hue}`]: hue !== undefined })), onIonToastWillDismiss: this.dispatchCancelHandler }), h("div", { key: 'cec09872b7e08429a62e5cb821e072fa6259e63a', class: wrapperClass }, h("div", { key: '8179d7a3c8b27536e37886a21293d1a6add60306', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { key: 'ef87a58440d914e4c55b8b3ecaac45f983f35daf', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { key: '56bca03e8501ad921cf2de37faace99a4f59cc71', class: "toast-content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
     }
     static get is() { return "ion-toast"; }
     static get encapsulation() { return "shadow"; }

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

@@ -338,7 +338,7 @@ export class Toggle {
         const rtl = isRTL(el) ? 'rtl' : 'ltr';
         const isIonicTheme = theme === 'ionic';
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (h(Host, { key: 'c622d6548e5249afefe43fe4a3eebfacc13c46e3', 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: 'b12951146a79d3839e6263e91e747398a0fa901d', 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, {
                 [theme]: true,
                 'in-item': hostContext('ion-item', el),
                 'toggle-activated': activated,
@@ -350,10 +350,10 @@ export class Toggle {
                 [`toggle-${rtl}`]: true,
                 'ion-activatable': isIonicTheme,
                 'ion-focusable': isIonicTheme,
-            }) }, h("label", { key: '5cb15fd4884ec35887859ba6db3609ef9e089f39', class: "toggle-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: '81b24cc830074850bf22f0fcd8bc4c6b0b95ae02', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, required: required }, inheritedAttributes)), h("div", { key: '4700c06a080895c5421b7c1cd139cbda61fcd2f1', class: {
+            }) }, h("label", { key: 'cf1d27243bf9bdd5bafaf6d86b76beb311b5e01c', class: "toggle-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: 'b3eb0f146836f5994c15bf1fd67a79f72b9414f7', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, required: required }, inheritedAttributes)), h("div", { key: '56ddcfd6452f30fd6b38d0fd85be3ec966aa120b', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: '5af5c0e3601736090cfed56c3c88e08193654561' }), this.renderHintText()), h("div", { key: 'f1004334510fea20be01f2170627fa1839f42be5', class: "native-wrapper" }, this.renderToggleControl()))));
+            }, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: '706e5b667ee242fb1afb3e4afa613f9798fbe25b' }), this.renderHintText()), h("div", { key: '255ccd7d60f7d78b4eba8d380b303a72093e9d16', class: "native-wrapper" }, this.renderToggleControl()))));
     }
     static get is() { return "ion-toggle"; }
     static get encapsulation() { return "shadow"; }

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

@@ -207,10 +207,10 @@ export class Toolbar {
         this.childrenStyles.forEach((style) => {
             Object.assign(childStyles, style);
         });
-        return (h(Host, { key: '2c88dcfd26c7d24aaf479d1d993b5562d3619f6b', class: Object.assign(Object.assign({}, createColorClasses(this.color, {
+        return (h(Host, { key: '6f52a5408379012843d0b93ac20c25b868e0211c', class: Object.assign(Object.assign({}, createColorClasses(this.color, {
                 [theme]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
-            })), childStyles) }, h("div", { key: 'b0ee3cb68417c5013d7dd61b5d57bce29f575bad', class: "toolbar-background", part: "background" }), h("div", { key: '0626d61b71f5d0ba1ee37508cffbd63034f7b292', class: "toolbar-container", part: "container" }, h("slot", { key: 'e7a540e310d55ec6a1b61bee70bb285a75a3f019', name: "start", onSlotchange: () => this.updateSlotClasses }), h("slot", { key: '0f9e4d832691123209abca302532825efe5f7c98', name: "secondary", onSlotchange: () => this.updateSlotClasses }), h("div", { key: 'ff8fa2ab1ed25ed95dc2a889e07d9f2e85b7245d', class: "toolbar-content", part: "content" }, h("slot", { key: '78cc3ba30a35a71f464f7256343e2a523740a8e9' })), h("slot", { key: 'db88e674acc2befc1d4e5f2c2b03b48dde54d12e', name: "primary", onSlotchange: () => this.updateSlotClasses }), h("slot", { key: 'd8fd9de870c5d77a139442d38565686121c68887', name: "end", onSlotchange: () => this.updateSlotClasses }))));
+            })), childStyles) }, h("div", { key: '8f79b04f7c26edb4d64b88d1e1a69ee6e4ab8773', class: "toolbar-background", part: "background" }), h("div", { key: '8a682653ea75f07fa583d9b7cf38850294e83448', class: "toolbar-container", part: "container" }, h("slot", { key: '1a4e3289bdc3802cbabdd99d4bd5ab45e10846d8', name: "start", onSlotchange: () => this.updateSlotClasses }), h("slot", { key: '5578aaf1d8bf6dba08ab4ac9ccd9b8d8fe6c8ff1', name: "secondary", onSlotchange: () => this.updateSlotClasses }), h("div", { key: 'd4ba11c8daf43ed164a9c89dafdd96c5d2b50a35', class: "toolbar-content", part: "content" }, h("slot", { key: '994952702fe18216044d10a96abbf9cf071612e3' })), h("slot", { key: '2e07d6585687764a0a24bbc1b2f456aec30bfea7', name: "primary", onSlotchange: () => this.updateSlotClasses }), h("slot", { key: 'ebcb8dcde1202d6ced4c251a3b78c30b1153849f', name: "end", onSlotchange: () => this.updateSlotClasses }))));
     }
     static get is() { return "ion-toolbar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -14,7 +14,7 @@ import { focusVisibleElement } from "./helpers";
  * Note: We need this distinction because `disabled="false"` is
  * valid usage for the disabled property on ion-button.
  */
-export const focusableQueryString = '[tabindex]:not([tabindex^="-"]):not([hidden]):not([disabled]), input:not([type=hidden]):not([tabindex^="-"]):not([hidden]):not([disabled]), textarea:not([tabindex^="-"]):not([hidden]):not([disabled]), button:not([tabindex^="-"]):not([hidden]):not([disabled]), select:not([tabindex^="-"]):not([hidden]):not([disabled]), ion-checkbox:not([tabindex^="-"]):not([hidden]):not([disabled]), ion-radio:not([tabindex^="-"]):not([hidden]):not([disabled]), .ion-focusable:not([tabindex^="-"]):not([hidden]):not([disabled]), .ion-focusable[disabled="false"]:not([tabindex^="-"]):not([hidden])';
+export const focusableQueryString = '[tabindex]:not([tabindex^="-"]):not([hidden]):not([disabled]), input:not([type=hidden]):not([tabindex^="-"]):not([hidden]):not([disabled]), textarea:not([tabindex^="-"]):not([hidden]):not([disabled]), button:not([tabindex^="-"]):not([hidden]):not([disabled]), select:not([tabindex^="-"]):not([hidden]):not([disabled]), ion-checkbox:not([tabindex^="-"]):not([hidden]):not([disabled]), ion-radio:not([tabindex^="-"]):not([hidden]):not([disabled]), ion-textarea:not([tabindex^="-"]):not([hidden]):not([disabled]), .ion-focusable:not([tabindex^="-"]):not([hidden]):not([disabled]), .ion-focusable[disabled="false"]:not([tabindex^="-"]):not([hidden])';
 /**
  * Focuses the first descendant in a context
  * that can receive focus. If none exists,
@@ -66,7 +66,18 @@ const focusElementInContext = (hostToFocus, fallbackElement) => {
     const shadowRoot = hostToFocus === null || hostToFocus === void 0 ? void 0 : hostToFocus.shadowRoot;
     if (shadowRoot) {
         // If there are no inner focusable elements, just focus the host element.
-        elementToFocus = shadowRoot.querySelector(focusableQueryString) || hostToFocus;
+        const innerFocusable = shadowRoot.querySelector(focusableQueryString);
+        // If the host has a setFocus() method, use it to delegate focus properly.
+        // This is needed for shadow DOM components like ion-textarea that override
+        // focus() to delegate to their inner native elements.
+        const hasSetFocus = typeof hostToFocus.setFocus === 'function';
+        if (innerFocusable && hasSetFocus) {
+            // Keep the host element so we can call setFocus() on it
+            elementToFocus = hostToFocus;
+        }
+        else {
+            elementToFocus = innerFocusable || hostToFocus;
+        }
     }
     if (elementToFocus) {
         const radioGroup = elementToFocus.closest('ion-radio-group');

package/dist/collection/utils/forms/validity.js

@@ -13,3 +13,34 @@ export const checkInvalidState = (el) => {
     const hasIonInvalid = el.classList.contains('ion-invalid');
     return hasIonTouched && hasIonInvalid;
 };
+export const getValidityFlags = (validity) => {
+    return {
+        badInput: validity.badInput,
+        customError: validity.customError,
+        patternMismatch: validity.patternMismatch,
+        rangeOverflow: validity.rangeOverflow,
+        rangeUnderflow: validity.rangeUnderflow,
+        stepMismatch: validity.stepMismatch,
+        tooLong: validity.tooLong,
+        tooShort: validity.tooShort,
+        typeMismatch: validity.typeMismatch,
+        valueMissing: validity.valueMissing,
+    };
+};
+/**
+ * Reports the validity state of a native form element to ElementInternals.
+ * This delegates to the native element's built-in validation, which automatically
+ * handles required, minlength, maxlength, and other constraints.
+ */
+export const reportValidityToElementInternals = (nativeElement, internals) => {
+    if (!(nativeElement === null || nativeElement === void 0 ? void 0 : nativeElement.validity)) {
+        return;
+    }
+    if (nativeElement.validity.valid) {
+        internals.setValidity({});
+    }
+    else {
+        const validityFlags = getValidityFlags(nativeElement.validity);
+        internals.setValidity(validityFlags, nativeElement.validationMessage, nativeElement);
+    }
+};

package/dist/collection/utils/helpers.js

@@ -225,10 +225,24 @@ export const focusVisibleElement = (el) => {
      * however, there are times when we need to manually control
      * this behavior so we call the `setFocus` method on ion-app
      * which will let us explicitly set the elements to focus.
+     *
+     * Note: The element passed to this function might be an inner
+     * focusable element (e.g., a native <button> inside ion-button's
+     * shadow root). If so, we need to find the host element that has
+     * the ion-focusable class to pass to setFocus.
      */
-    if (el.classList.contains('ion-focusable')) {
+    let elToFocus = el;
+    // If the element doesn't have ion-focusable, check if it's inside
+    // a shadow root and use the host element instead
+    if (!el.classList.contains('ion-focusable')) {
+        const rootNode = el.getRootNode();
+        if (rootNode instanceof ShadowRoot && rootNode.host instanceof HTMLElement) {
+            elToFocus = rootNode.host;
+        }
+    }
+    if (elToFocus.classList.contains('ion-focusable')) {
         const appRootSelector = config.get('appRootSelector', 'ion-app');
-        const app = el.closest(appRootSelector);
+        const app = elToFocus.closest(appRootSelector);
         if (app) {
             if (appRootSelector === 'ion-app') {
                 /**
@@ -237,7 +251,7 @@ export const focusVisibleElement = (el) => {
                  * focus-visible utility is attached to the app root
                  * and will handle setting focus on the correct element.
                  */
-                app.setFocus([el]);
+                app.setFocus([elToFocus]);
             }
             else {
                 /**
@@ -254,7 +268,7 @@ export const focusVisibleElement = (el) => {
                      * The focus-visible utility is used to set focus on an
                      * element that uses `ion-focusable`.
                      */
-                    focusElements([el]);
+                    focusElements([elToFocus]);
                 });
             }
         }

package/dist/collection/utils/overlays.js

@@ -319,6 +319,86 @@ const connectListeners = (doc) => {
         doc.addEventListener('focus', (ev) => {
             trapKeyboardFocus(ev, doc);
         }, true);
+        // Listen for keydown events to intercept Tab navigation.
+        // This is needed for Safari and Firefox which may skip focusable
+        // elements or allow focus to escape the overlay.
+        // It also ensures proper focus delegation for shadow DOM elements
+        // like ion-textarea.
+        doc.addEventListener('keydown', (ev) => {
+            var _a, _b, _c;
+            if (ev.key !== 'Tab' && ev.key !== 'Alt+Tab')
+                return;
+            const lastOverlay = getPresentedOverlay(doc, 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker-legacy,ion-popover');
+            if (!lastOverlay || lastOverlay.classList.contains(FOCUS_TRAP_DISABLE_CLASS))
+                return;
+            const activeElement = doc.activeElement;
+            if (activeElement === lastOverlay) {
+                ev.preventDefault();
+                focusFirstDescendant(lastOverlay);
+                return;
+            }
+            // Check if activeElement is inside the overlay (including shadow DOM)
+            const isInsideOverlay = activeElement
+                ? lastOverlay.contains(activeElement) ||
+                    (activeElement.getRootNode() instanceof ShadowRoot &&
+                        lastOverlay.contains(activeElement.getRootNode().host)) ||
+                    ((_b = (_a = lastOverlay.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(activeElement)) !== null && _b !== void 0 ? _b : false)
+                : false;
+            if (!isInsideOverlay)
+                return;
+            // Get all focusable elements from both light and shadow DOM
+            const allFocusable = [
+                ...lastOverlay.querySelectorAll(focusableQueryString),
+                ...(((_c = lastOverlay.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelectorAll(focusableQueryString)) || []),
+            ];
+            if (allFocusable.length === 0) {
+                ev.preventDefault();
+                return;
+            }
+            // Find current element's index (accounting for shadow DOM)
+            const currentIndex = activeElement
+                ? allFocusable.findIndex((el) => {
+                    var _a;
+                    if (el === activeElement)
+                        return true;
+                    if ((_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(activeElement))
+                        return true;
+                    const rootNode = activeElement.getRootNode();
+                    return rootNode instanceof ShadowRoot && rootNode.host === el;
+                })
+                : -1;
+            ev.preventDefault();
+            // Helper to focus an element, handling shadow DOM properly
+            const focusElement = (element) => {
+                const shadowRoot = element.shadowRoot;
+                if (shadowRoot) {
+                    const innerFocusable = shadowRoot.querySelector(focusableQueryString);
+                    if (innerFocusable && typeof element.setFocus !== 'function') {
+                        focusVisibleElement(innerFocusable);
+                        return;
+                    }
+                }
+                focusVisibleElement(element);
+            };
+            if (ev.shiftKey) {
+                // Shift+Tab: previous element, wrap to last if at first
+                if (currentIndex <= 0) {
+                    focusLastDescendant(lastOverlay);
+                }
+                else {
+                    focusElement(allFocusable[currentIndex - 1]);
+                }
+            }
+            else {
+                // Tab: next element, wrap to first if at last
+                if (currentIndex < 0 || currentIndex >= allFocusable.length - 1) {
+                    focusFirstDescendant(lastOverlay);
+                }
+                else {
+                    focusElement(allFocusable[currentIndex + 1]);
+                }
+            }
+        }, true);
         // handle back-button click
         doc.addEventListener('ionBackButton', (ev) => {
             const lastOverlay = getPresentedOverlay(doc);

package/dist/collection/utils/theme.js

@@ -1,8 +1,32 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
+/**
+ * Checks if an element has a parent matching the specified selector.
+ * This handles an element in both light DOM and shadow DOM contexts.
+ * @param selector The parent selector to check for (e.g., 'ion-datetime'
+ * or 'ion-toolbar[color]').
+ * @param el The element to check.
+ * @returns `true` if the element has a parent matching the specified selector,
+ * `false` otherwise.
+ */
 export const hostContext = (selector, el) => {
-    return el.closest(selector) !== null;
+    // Check the light DOM first
+    if (el.closest(selector) !== null) {
+        return true;
+    }
+    // For attribute or class selectors (e.g., 'ion-toolbar[color]' or
+    // 'ion-toolbar.ion-color') we can only check light DOM since tagName
+    // doesn't include attributes or classes.
+    if (selector.includes('[') || selector.includes('.')) {
+        return false;
+    }
+    // Check the shadow DOM by looking at the shadow root host and
+    // converting the selector to uppercase to compare with tagName
+    const upperCaseTagName = selector.toUpperCase();
+    const rootNode = el.getRootNode();
+    const shadowHost = rootNode instanceof ShadowRoot ? rootNode.host : null;
+    return (shadowHost === null || shadowHost === void 0 ? void 0 : shadowHost.tagName) === upperCaseTagName;
 };
 /**
  * Create the mode and color classes for the component based on the classes passed in