@ionic/core 8.4.2-dev.11739468652.1ae78967 → 8.4.2-dev.11741080979.1715cc06

package/dist/collection/components/app/app.js

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h } from "@stencil/core";
-import { getOrInitFocusVisibleUtility } from "../../utils/focus-visible";
+import { focusElements } from "../../utils/focus-visible";
 import { config } from "../../global/config";
 import { getIonTheme } from "../../global/ionic-global";
 /**
@@ -18,14 +18,19 @@ export class App {
      * a result of another user action. (Ex: We focus the first element
      * inside of a popover when the user presents it, but the popover is not always
      * presented as a result of keyboard action.)
+     *
+     * @param elements - The elements to set focus on.
      */
     async setFocus(elements) {
-        const focusVisible = getOrInitFocusVisibleUtility();
-        focusVisible.setFocus(elements);
+        /**
+         * The focus-visible utility is used to set focus on an
+         * element that uses `ion-focusable`.
+         */
+        focusElements(elements);
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: '109f9e80230b5f7dfab0714ed18be1162c589c04', class: {
+        return (h(Host, { key: '25667e21b2fffa03ccf013044c340e96bd7faad9', class: {
                 [theme]: true,
                 'ion-page': true,
                 'force-statusbar-padding': config.getBoolean('_forceStatusbarPadding'),
@@ -50,7 +55,7 @@ export class App {
                     "parameters": [{
                             "name": "elements",
                             "type": "HTMLElement[]",
-                            "docs": ""
+                            "docs": "- The elements to set focus on."
                         }],
                     "references": {
                         "Promise": {
@@ -66,7 +71,10 @@ export class App {
                 },
                 "docs": {
                     "text": "Used to set focus on an element that uses `ion-focusable`.\nDo not use this if focusing the element as a result of a keyboard\nevent as the focus utility should handle this for us. This method\nshould be used when we want to programmatically focus an element as\na result of another user action. (Ex: We focus the first element\ninside of a popover when the user presents it, but the popover is not always\npresented as a result of keyboard action.)",
-                    "tags": []
+                    "tags": [{
+                            "name": "param",
+                            "text": "elements - The elements to set focus on."
+                        }]
                 }
             }
         };

package/dist/collection/components/avatar/avatar.ionic.css

@@ -128,6 +128,7 @@ Do not edit directly, this file was auto-generated.
    */
   border-radius: var(--border-radius);
   display: block;
+  position: relative;
 }
 
 ::slotted(ion-img),
@@ -265,4 +266,20 @@ Do not edit directly, this file was auto-generated.
 :host(.avatar-xlarge) ::slotted(ion-icon) {
   width: var(--ion-scale-1000, 40px);
   height: var(--ion-scale-1000, 40px);
+}
+
+:host ::slotted(ion-badge.badge-vertical-top:empty) {
+  transform: translate(var(--ion-scale-050, 2px), calc(var(--ion-scale-050, 2px) * -1));
+}
+
+:host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-top:empty) {
+  transform: translate(var(--ion-scale-100, 4px), calc(var(--ion-scale-100, 4px) * -1));
+}
+
+:host ::slotted(ion-badge.badge-vertical-bottom:empty) {
+  transform: translate(0, var(--ion-scale-100, 4px));
+}
+
+:host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-bottom:empty) {
+  transform: translate(var(--ion-scale-100, 4px), calc(var(--ion-scale-100, 4px)));
 }

package/dist/collection/components/avatar/avatar.ios.css

@@ -65,6 +65,7 @@
    */
   border-radius: var(--border-radius);
   display: block;
+  position: relative;
 }
 
 ::slotted(ion-img),

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

@@ -65,6 +65,7 @@
    */
   border-radius: var(--border-radius);
   display: block;
+  position: relative;
 }
 
 ::slotted(ion-img),
@@ -141,4 +142,12 @@
   --border-radius: 50%;
   width: 64px;
   height: 64px;
+}
+
+::slotted(ion-badge.badge-vertical-top:empty) {
+  transform: translate(-50%, 50%);
+}
+
+::slotted(ion-badge.badge-vertical-bottom:empty) {
+  transform: translateX(-100%);
 }

package/dist/collection/components/backdrop/backdrop.ionic.css

@@ -147,5 +147,4 @@ Do not edit directly, this file was auto-generated.
 
 :host {
   background-color: rgba(var(--ion-primitives-base-black-rgb, 17, 17, 17), 0.7);
-  backdrop-filter: blur(2px);
 }

package/dist/collection/components/badge/badge.ionic.css

@@ -156,8 +156,19 @@ Do not edit directly, this file was auto-generated.
   color: var(--ion-color-contrast);
 }
 
-:host(:empty) {
-  display: none;
+:host([vertical]) {
+  position: absolute;
+}
+:host([vertical]) {
+  inset-inline-end: 0;
+}
+
+:host(:empty.badge-vertical-top) {
+  top: 0;
+}
+
+:host(:empty.badge-vertical-bottom) {
+  bottom: 0;
 }
 
 :host {
@@ -204,6 +215,11 @@ Do not edit directly, this file was auto-generated.
   line-height: var(--ion-font-line-height-400, 16px);
 }
 
+:host(.badge-xxsmall) ::slotted(ion-icon) {
+  width: var(--ion-scale-300, 12px);
+  height: var(--ion-scale-300, 12px);
+}
+
 /* Extra Small Badge */
 :host(.badge-xsmall) {
   --padding-start: var(--ion-space-100, 4px);
@@ -214,6 +230,11 @@ Do not edit directly, this file was auto-generated.
   line-height: var(--ion-font-line-height-600, 24px);
 }
 
+:host(.badge-xsmall) ::slotted(ion-icon) {
+  width: var(--ion-scale-400, 16px);
+  height: var(--ion-scale-400, 16px);
+}
+
 /* Small Badge */
 :host(.badge-small) {
   --padding-start: var(--ion-space-100, 4px);
@@ -224,6 +245,11 @@ Do not edit directly, this file was auto-generated.
   line-height: var(--ion-font-line-height-600, 24px);
 }
 
+:host(.badge-small) ::slotted(ion-icon) {
+  width: var(--ion-scale-500, 20px);
+  height: var(--ion-scale-500, 20px);
+}
+
 /* Medium Badge */
 :host(.badge-medium) {
   min-width: var(--ion-scale-1000, 40px);
@@ -232,6 +258,11 @@ Do not edit directly, this file was auto-generated.
   line-height: var(--ion-font-line-height-700, 28px);
 }
 
+:host(.badge-medium) ::slotted(ion-icon) {
+  width: var(--ion-scale-600, 24px);
+  height: var(--ion-scale-600, 24px);
+}
+
 /* Large Badge */
 :host(.badge-large) {
   min-width: var(--ion-scale-1200, 48px);
@@ -240,10 +271,43 @@ Do not edit directly, this file was auto-generated.
   line-height: var(--ion-font-line-height-700, 28px);
 }
 
+:host(.badge-large) ::slotted(ion-icon) {
+  width: var(--ion-scale-800, 32px);
+  height: var(--ion-scale-800, 32px);
+}
+
 /* Extra Large Badge */
 :host(.badge-xlarge) {
   min-width: var(--ion-scale-1400, 56px);
   height: var(--ion-scale-1400, 56px);
   font-size: var(--ion-font-size-550, 1.375rem);
   line-height: var(--ion-font-line-height-700, 28px);
+}
+
+:host(.badge-xlarge) ::slotted(ion-icon) {
+  width: var(--ion-scale-1000, 40px);
+  height: var(--ion-scale-1000, 40px);
+}
+
+:host(:empty) {
+  --padding-start: 0;
+  --padding-end: 0;
+}
+
+/* sm */
+:host(.badge-small:empty) {
+  min-width: var(--ion-scale-200, 8px);
+  height: var(--ion-scale-200, 8px);
+}
+
+/* md */
+:host(.badge-medium:empty) {
+  min-width: var(--ion-scale-300, 12px);
+  height: var(--ion-scale-300, 12px);
+}
+
+/* lg */
+:host(.badge-large:empty) {
+  min-width: var(--ion-scale-400, 16px);
+  height: var(--ion-scale-400, 16px);
 }

package/dist/collection/components/badge/badge.ios.css

@@ -154,8 +154,19 @@
   color: var(--ion-color-contrast);
 }
 
-:host(:empty) {
-  display: none;
+:host([vertical]) {
+  position: absolute;
+}
+:host([vertical]) {
+  inset-inline-end: 0;
+}
+
+:host(:empty.badge-vertical-top) {
+  top: 0;
+}
+
+:host(:empty.badge-vertical-bottom) {
+  bottom: 0;
 }
 
 /**
@@ -197,6 +208,16 @@
   font-family: var(--ion-font-family, inherit);
 }
 
+:host(:empty) {
+  --padding-start: 0;
+  --padding-end: 0;
+  --padding-bottom: 0;
+  --padding-top: 0;
+  border-radius: 999px;
+  width: 10px;
+  height: 10px;
+}
+
 /**
  * Convert a pixels given value into rem
  * 

package/dist/collection/components/badge/badge.js

@@ -13,6 +13,7 @@ export class Badge {
         this.color = undefined;
         this.shape = undefined;
         this.size = undefined;
+        this.vertical = undefined;
     }
     getShape() {
         const theme = getIonTheme(this);
@@ -42,11 +43,12 @@ export class Badge {
         const shape = this.getShape();
         const size = this.getSize();
         const theme = getIonTheme(this);
-        return (h(Host, { key: '81deb3e063e9a3af5059ddbdfdc0a24fce4031c6', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'aebcad9a9d4e650344cc855085ab30c376f9b367', class: createColorClasses(this.color, {
                 [theme]: true,
                 [`badge-${shape}`]: shape !== undefined,
                 [`badge-${size}`]: size !== undefined,
-            }) }, h("slot", { key: 'e398740a75207679e3eff7bf7510cc0409aaf351' })));
+                [`badge-vertical-${this.vertical}`]: this.vertical !== undefined,
+            }) }, h("slot", { key: 'b62bca8ec3666dce3283573497b7c4306ecc7fc4' })));
     }
     static get is() { return "ion-badge"; }
     static get encapsulation() { return "shadow"; }
@@ -122,6 +124,23 @@ export class Badge {
                 },
                 "attribute": "size",
                 "reflect": false
+            },
+            "vertical": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'top' | 'bottom'",
+                    "resolved": "\"bottom\" | \"top\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to `\"top\"` to position the badge on top right absolute position of the parent element.\nSet to `\"bottom\"` to position the badge on bottom right absolute position of the parent element."
+                },
+                "attribute": "vertical",
+                "reflect": false
             }
         };
     }

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

@@ -154,8 +154,19 @@
   color: var(--ion-color-contrast);
 }
 
-:host(:empty) {
-  display: none;
+:host([vertical]) {
+  position: absolute;
+}
+:host([vertical]) {
+  inset-inline-end: 0;
+}
+
+:host(:empty.badge-vertical-top) {
+  top: 0;
+}
+
+:host(:empty.badge-vertical-bottom) {
+  bottom: 0;
 }
 
 /**
@@ -197,6 +208,16 @@
   font-family: var(--ion-font-family, inherit);
 }
 
+:host(:empty) {
+  --padding-start: 0;
+  --padding-end: 0;
+  --padding-bottom: 0;
+  --padding-top: 0;
+  border-radius: 999px;
+  width: 10px;
+  height: 10px;
+}
+
 /**
  * Convert a pixels given value into rem
  * 

package/dist/collection/components/searchbar/searchbar.ionic.css

@@ -342,4 +342,16 @@ Do not edit directly, this file was auto-generated.
   --placeholder-color: var(--ion-primitives-neutral-500, #a2a2a2);
   cursor: default;
   pointer-events: none;
+}
+
+:host(.searchbar-shape-soft) {
+  --border-radius: var(--ion-border-radius-200, 8px);
+}
+
+:host(.searchbar-shape-round) {
+  --border-radius: var(--ion-border-radius-400, 16px);
+}
+
+:host(.searchbar-shape-rectangular) {
+  --border-radius: var(--ion-border-radius-0, 0px);
 }

package/dist/collection/components/searchbar/searchbar.js

@@ -141,6 +141,7 @@ export class Searchbar {
         this.spellcheck = false;
         this.type = 'search';
         this.value = '';
+        this.shape = undefined;
     }
     /**
      * lang and dir are globally enumerated attributes.
@@ -375,6 +376,18 @@ export class Searchbar {
         }
         return true;
     }
+    getShape() {
+        const theme = getIonTheme(this);
+        const { shape } = this;
+        // TODO(ROU-11677): Remove theme check when shapes are defined for all themes.
+        if (theme !== 'ionic') {
+            return undefined;
+        }
+        if (shape === undefined) {
+            return 'round';
+        }
+        return shape;
+    }
     /**
      * Get the icon to use for the clear icon.
      * If an icon is set on the component, use that.
@@ -449,8 +462,9 @@ export class Searchbar {
         const animated = this.animated && config.getBoolean('animated', true);
         const theme = getIonTheme(this);
         const shouldShowCancelButton = this.shouldShowCancelButton();
-        const cancelButton = this.showCancelButton !== 'never' && (h("button", { key: '3301b510959fa5a426230175f5b61b4ead9bcfbb', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: theme === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, h("div", { key: 'cb3a77783c75bbc78acdc7df9c75abcc415188d9', "aria-hidden": "true" }, theme === 'md' || theme === 'ionic' ? (h("ion-icon", { "aria-hidden": "true", icon: searchbarCancelIcon, lazy: false })) : (cancelButtonText))));
-        return (h(Host, { key: '33fdf75d5f7ce578cfbb7c4befa816c2b30469ac', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
+        const shape = this.getShape();
+        const cancelButton = this.showCancelButton !== 'never' && (h("button", { key: 'd7382dd39f5699330fa1c981cd252a903029d1b5', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: theme === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, h("div", { key: '3b3c4a16c23d7406be4eda6076deca41e79e196d', "aria-hidden": "true" }, theme === 'md' || theme === 'ionic' ? (h("ion-icon", { "aria-hidden": "true", icon: searchbarCancelIcon, lazy: false })) : (cancelButtonText))));
+        return (h(Host, { key: '4890a1478e7e1ff0a85d5e6ca2214c50aee96777', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
                 [theme]: true,
                 'searchbar-animated': animated,
                 'searchbar-disabled': this.disabled,
@@ -460,14 +474,15 @@ export class Searchbar {
                 'searchbar-has-focus': this.focused,
                 'searchbar-should-show-clear': this.shouldShowClearButton(),
                 'searchbar-should-show-cancel': this.shouldShowCancelButton(),
-            }) }, h("div", { key: '8a5accb217a1efccc1cd417cef8b95996e277c07', class: "searchbar-input-container" }, h("input", Object.assign({ key: 'dccb39de2157490b1e937c9a2737edb55b7001e6', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: autocapitalize === 'default' ? undefined : autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }, this.inheritedAttributes)), (theme === 'md' || theme === 'ionic') && cancelButton, h("ion-icon", { key: 'e85d30887e0b8eb264f86f682362882f4d14bf61', "aria-hidden": "true", icon: searchbarSearchIcon, lazy: false, class: "searchbar-search-icon" }), h("button", { key: '73aeda33d35e499a7f9edbb550707f2d5a234110', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
+                [`searchbar-shape-${shape}`]: shape !== undefined,
+            }) }, h("div", { key: 'e2b95c0f77605f8d1e9b3f8b971d07fba72cb794', class: "searchbar-input-container" }, h("input", Object.assign({ key: '6dd8ff97d0ef85190addbd20a1093d22fecf9a80', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: autocapitalize === 'default' ? undefined : autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }, this.inheritedAttributes)), (theme === 'md' || theme === 'ionic') && cancelButton, h("ion-icon", { key: '626aefedcd35c36bd9a697b5f5bdbaec4f0142eb', "aria-hidden": "true", icon: searchbarSearchIcon, lazy: false, class: "searchbar-search-icon" }), h("button", { key: '9996031c9eeba745d37b6600b6594f69c4808842', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: () => this.onClearInput(true) }, h("ion-icon", { key: '9c9c376352470fc45877f1b89dfecf2c5ca2cc71', "aria-hidden": "true", icon: searchbarClearIcon, lazy: false, class: "searchbar-clear-icon" }))), theme === 'ios' && cancelButton));
+            }, onClick: () => this.onClearInput(true) }, h("ion-icon", { key: '403a5866e82ca6be91101a1719c3ad2f273a652f', "aria-hidden": "true", icon: searchbarClearIcon, lazy: false, class: "searchbar-clear-icon" }))), theme === 'ios' && cancelButton));
     }
     static get is() { return "ion-searchbar"; }
     static get encapsulation() { return "scoped"; }
@@ -885,6 +900,23 @@ export class Searchbar {
                 "attribute": "value",
                 "reflect": false,
                 "defaultValue": "''"
+            },
+            "shape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'soft' | 'round' | 'rectangular'",
+                    "resolved": "\"rectangular\" | \"round\" | \"soft\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to `\"soft\"` for a searchbar with slightly rounded corners,\n`\"round\"` for a searchbar with fully rounded corners,\nor `\"rectangular\"` for a searchbar without rounded corners.\nDefaults to `\"round\"` for the ionic theme, and `undefined` for all other themes."
+                },
+                "attribute": "shape",
+                "reflect": false
             }
         };
     }

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

@@ -688,9 +688,10 @@ Do not edit directly, this file was auto-generated.
 }
 
 :host {
+  --border-color: var(--ion-primitives-neutral-500, #a2a2a2);
   --color: var(--ion-primitives-neutral-1200, #242424);
-  --highlight-color-valid: var(--ion-semantics-success-base, #1ba433);
-  --highlight-color-invalid: var(--ion-semantics-danger-base, #e52929);
+  --highlight-color-valid: var(--ion-semantics-success-900, #126f23);
+  --highlight-color-invalid: var(--ion-semantics-danger-800, #bf2222);
   --placeholder-color: var(--ion-primitives-neutral-800, #626262);
   --placeholder-opacity: 1;
   --background: var(--ion-primitives-base-white, #ffffff);
@@ -831,4 +832,26 @@ ion-icon {
 
 :host(.has-focus) .textarea-highlight {
   transform: scale(1);
+}
+
+@media (any-hover: hover) {
+  :host(:hover) {
+    --border-color: var(--ion-primitives-neutral-600, #8c8c8c);
+  }
+}
+:host(.textarea-disabled) {
+  --color: var(--ion-primitives-neutral-500, #a2a2a2);
+  --background: var(--ion-primitives-neutral-100, #f5f5f5);
+  --border-color: var(--ion-primitives-neutral-300, #cfcfcf);
+  --placeholder-color: var(--ion-primitives-neutral-500, #a2a2a2);
+}
+
+:host(.textarea-disabled:not(.ion-valid)) .textarea-bottom .helper-text,
+:host(.textarea-disabled) .textarea-bottom .counter,
+:host(.textarea-disabled) .label-text-wrapper {
+  color: var(--ion-primitives-neutral-500, #a2a2a2);
+}
+
+:host(.textarea-readonly) {
+  --background: var(--ion-primitives-neutral-100, #f5f5f5);
 }

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

@@ -368,7 +368,7 @@ export class Textarea {
         return (h("div", { class: "textarea-bottom" }, this.renderHintText(), this.renderCounter()));
     }
     render() {
-        const { inputId, disabled, size, labelPlacement, el, hasFocus } = this;
+        const { inputId, disabled, readonly, size, labelPlacement, el, hasFocus } = this;
         const fill = this.getFill();
         const theme = getIonTheme(this);
         const shape = this.getShape();
@@ -395,7 +395,7 @@ export class Textarea {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (h(Host, { key: '0c64093fe8b1124af96330e35c735d36103f6133', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'bc1de868d3b58707859e453186cc9312dab38405', class: createColorClasses(this.color, {
                 [theme]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -405,7 +405,8 @@ export class Textarea {
                 [`textarea-size-${size}`]: true,
                 [`textarea-label-placement-${labelPlacement}`]: true,
                 'textarea-disabled': disabled,
-            }) }, h("label", { key: '7ca96cdc0b58932272d208ea1b9d554d9db0151c', class: "textarea-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: 'e472effc5b40c04d37c97421337086c6ddae16c1', class: "textarea-wrapper-inner" }, 
+                'textarea-readonly': readonly,
+            }) }, h("label", { key: '4d82bc767dff5bd28efd2bb13dd5e65cc50ab410', class: "textarea-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: 'ebc6391ad58294b01fb5e6fd6d21496250bed484', 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
@@ -415,7 +416,7 @@ export class Textarea {
          * <label> element, ensuring that clicking the label text
          * focuses the textarea.
          */
-        theme === 'ionic' && fill === 'outline' && h("div", { key: '2a172754f2568a2001702e524592449cce0e1fbd', class: "textarea-outline" }), h("div", { key: '4ad0f5714813ccb56b2efd583ee32ad434086e2b', class: "start-slot-wrapper" }, h("slot", { key: '266638dfbd113c3f3fe22dbe824071c1fc68d835', name: "start" })), h("div", { key: '11de61ccac26e403ee69bab51c32d0097333099a', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ key: 'f4844e3b4134f354d3c5a5689aa47bc1cf9dc155', 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: 'a874e2c52de68ebfe6d47d0e624a206d103fb87c', class: "end-slot-wrapper" }, h("slot", { key: '3ce4674e89a63f1c58cabb3822f2fc3d90408ba9', name: "end" }))), shouldRenderHighlight && h("div", { key: '9f64eeb8afbdd151f7302d701da5725b5f897b40', class: "textarea-highlight" })), this.renderBottomContent()));
+        theme === 'ionic' && fill === 'outline' && h("div", { key: 'cfab00504ef4b268a8e3c446d00c8c06ddbc3699', class: "textarea-outline" }), h("div", { key: '7387ddde6cb4316c4f34c642f0ddb6e8ad27c9ce', class: "start-slot-wrapper" }, h("slot", { key: '0d4e4ff1f4957677538e0f5230146f5605592d4e', name: "start" })), h("div", { key: '09e1ae9084976374347adddf7197f256b02ccd41', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ key: 'cd4afa93446db0761ee10acdc356c06c24f5699f', 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: '4eccbe7ee70c1ec967e3e64c19ffe796415f65a5', class: "end-slot-wrapper" }, h("slot", { key: '4d6c3da0b28183d6398fab4afd29fff7ae7083b3', name: "end" }))), shouldRenderHighlight && h("div", { key: '33267aa7e8388de28a33317ba1ac98929f32b48e', class: "textarea-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-textarea"; }
     static get encapsulation() { return "scoped"; }

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

@@ -24,6 +24,21 @@ export const getOrInitFocusVisibleUtility = () => {
     }
     return focusVisibleUtility;
 };
+/**
+ * Used to set focus on an element that uses `ion-focusable`.
+ * Do not use this if focusing the element as a result of a keyboard
+ * event as the focus utility should handle this for us. This method
+ * should be used when we want to programmatically focus an element as
+ * a result of another user action. (Ex: We focus the first element
+ * inside of a popover when the user presents it, but the popover is not always
+ * presented as a result of keyboard action.)
+ *
+ * @param elements - The elements to set focus on.
+ */
+export const focusElements = (elements) => {
+    const focusVisible = getOrInitFocusVisibleUtility();
+    focusVisible.setFocus(elements);
+};
 export const startFocusVisible = (rootEl) => {
     let currentFocus = [];
     let keyboardMode = true;

package/dist/collection/utils/helpers.js

@@ -1,6 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
+import { focusElements } from "./focus-visible";
 import { config } from "../global/config";
 export const transitionEndAsync = (el, expectedDuration = 0) => {
     return new Promise((resolve) => {
@@ -231,6 +232,17 @@ export const raf = (h) => {
 export const hasShadowDom = (el) => {
     return !!el.shadowRoot && !!el.attachShadow;
 };
+/**
+ * Focuses a given element while ensuring proper focus management
+ * within the Ionic framework. If the element is marked as `ion-focusable`,
+ * this function will delegate focus handling to `ion-app` or manually
+ * apply focus when a custom app root is used.
+ *
+ * This function helps maintain accessibility and expected focus behavior
+ * in both standard and custom root environments.
+ *
+ * @param el - The element to focus.
+ */
 export const focusVisibleElement = (el) => {
     el.focus();
     /**
@@ -245,7 +257,33 @@ export const focusVisibleElement = (el) => {
         const appRootSelector = config.get('appRootSelector', 'ion-app');
         const app = el.closest(appRootSelector);
         if (app) {
-            app.setFocus([el]);
+            if (appRootSelector === 'ion-app') {
+                /**
+                 * If the app root is the default, then it will be
+                 * in charge of setting focus. This is because the
+                 * focus-visible utility is attached to the app root
+                 * and will handle setting focus on the correct element.
+                 */
+                app.setFocus([el]);
+            }
+            else {
+                /**
+                 * When using a custom app root selector, the focus-visible
+                 * utility is not available to manage focus automatically.
+                 * If we set focus immediately, the element may not be fully
+                 * rendered or interactive, especially if it was just added
+                 * to the DOM. Using requestAnimationFrame ensures that focus
+                 * is applied on the next frame, allowing the DOM to settle
+                 * before changing focus.
+                 */
+                requestAnimationFrame(() => {
+                    /**
+                     * The focus-visible utility is used to set focus on an
+                     * element that uses `ion-focusable`.
+                     */
+                    focusElements([el]);
+                });
+            }
         }
     }
 };