@ionic/core 9.0.3-dev.11788456135.1ab1d6cd → 9.0.3-dev.11790116791.11c9cd1e

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

@@ -455,10 +455,6 @@
   overflow: hidden;
 }
 
-.textarea-outline {
-  box-sizing: border-box;
-}
-
 /**
  * If no label text is placed into the slot
  * then the element should be hidden otherwise

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

@@ -25,6 +25,9 @@ import { getCounterText } from "../input/input.utils";
  * @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.
+ * @part start - The wrapper element for the content in the start slot.
+ * @part control - The wrapper element containing the label and the native textarea. The `"ionic"` theme flattens this wrapper, so it cannot be given a box of its own there.
+ * @part end - The wrapper element for the content in the end slot.
  */
 export class Textarea {
     constructor() {
@@ -528,32 +531,24 @@ export class Textarea {
         const { inputId, disabled } = this;
         return (h("textarea", { 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 }, this.getValue()));
     }
-    /**
-     * The ionic theme keeps the label above a field box that wraps the slots and
-     * the textarea, so the label can size independently of the slotted content.
-     */
     renderStartContainer() {
-        return (h("div", { key: "start", class: "textarea-start", ref: (el) => (this.startContainerEl = el) }, h("slot", { name: "start" })));
+        return (h("div", { key: "start", class: "textarea-start", part: "start", ref: (el) => (this.startContainerEl = el) }, h("slot", { name: "start" })));
     }
     renderEndContainer() {
-        return (h("div", { key: "end", class: "textarea-end" }, h("slot", { name: "end" })));
-    }
-    renderIonicField() {
-        return [
-            this.renderLabel(),
-            h("div", { key: "inner", class: "textarea-wrapper-inner" }, this.getFill() === 'outline' && h("div", { key: "outline", class: "textarea-outline" }), this.renderStartContainer(), h("div", { key: "control", class: "textarea-control" }, h("div", { class: "native-wrapper", ref: (el) => (this.textareaWrapper = el), part: "container" }, this.renderNativeTextarea())), this.renderEndContainer()),
-        ];
+        return (h("div", { key: "end", class: "textarea-end", part: "end" }, h("slot", { name: "end" })));
     }
     /**
-     * The ios and md themes nest the label alongside the textarea so a floating
-     * label can escape the control and clear the start and end slots.
+     * Every theme renders the same label and control structure, aside from the md
+     * outline container below. The label is nested alongside the textarea so the
+     * ios and md floating label can escape the control and clear the start and
+     * end slots. The ionic theme lifts it outside the field with grid instead.
      */
-    renderNativeField() {
+    renderField() {
         const hasOutlineFill = getIonTheme(this) === 'md' && this.getFill() === 'outline';
         return [
             hasOutlineFill && this.renderOutlineContainer(),
             this.renderStartContainer(),
-            h("div", { key: "control", class: "textarea-control" }, this.renderLabel(), h("div", { class: "native-wrapper", ref: (el) => (this.textareaWrapper = el), part: "container" }, this.renderNativeTextarea())),
+            h("div", { key: "control", class: "textarea-control", part: "control" }, this.renderLabel(), h("div", { class: "native-wrapper", ref: (el) => (this.textareaWrapper = el), part: "container" }, this.renderNativeTextarea())),
             this.renderEndContainer(),
         ];
     }
@@ -616,7 +611,7 @@ export class Textarea {
          * the textarea has a value or is focused.
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus));
-        return (h(Host, { key: 'd577d18d209f4e9cee1c2addb78ab0c2e57effdf', class: createColorClasses(this.color, {
+        return (h(Host, { key: '696d649f4d05739857823887be65ae9252ba77dc', class: createColorClasses(this.color, {
                 [theme]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -628,7 +623,7 @@ export class Textarea {
                 'in-item': inItem,
                 'textarea-disabled': disabled,
                 'textarea-readonly': readonly,
-            }) }, h("label", { key: '188cff345aec306354bd7a9fabc1411d607139e3', class: "textarea-wrapper", htmlFor: inputId, onMouseDown: this.onLabelPointerDown, onClick: this.onLabelClick, part: "wrapper" }, theme === 'ionic' ? this.renderIonicField() : this.renderNativeField(), shouldRenderHighlight && h("div", { key: '13ef56def9848498f77c3c388be4abe0ea2aa38c', class: "textarea-highlight" })), this.renderBottomContent()));
+            }) }, h("label", { key: '61e64a211779e73def2b5d55a19dfc2f76463968', class: "textarea-wrapper", htmlFor: inputId, onMouseDown: this.onLabelPointerDown, onClick: this.onLabelClick, part: "wrapper" }, this.renderField(), shouldRenderHighlight && h("div", { key: '4ada5405635e1155e6b750ed797fd1ab82e6b314', class: "textarea-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-textarea"; }
     static get encapsulation() { return "shadow"; }

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

@@ -455,10 +455,6 @@
   overflow: hidden;
 }
 
-.textarea-outline {
-  box-sizing: border-box;
-}
-
 /**
  * If no label text is placed into the slot
  * then the element should be hidden otherwise

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

@@ -107,21 +107,19 @@
 }
 
 :host {
+  font-family: var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");
   font-size: var(--token-font-size-450, 1.125rem);
   font-weight: var(--token-font-weight-medium, 500);
-  letter-spacing: var(--token-font-letter-spacing-0, 0%);
-  line-height: var(--token-font-line-height-700, var(--token-scale-700, 28px));
-  text-decoration: none;
-  text-transform: none;
+  letter-spacing: var(--token-font-letter-spacing-0, 0);
+  line-height: var(--token-font-line-height-700, 1.75rem);
   box-sizing: border-box;
   pointer-events: none;
 }
 
 :host(.title-large) {
+  font-family: var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");
   font-size: var(--token-font-size-700, 1.75rem);
   font-weight: var(--token-font-weight-medium, 500);
-  letter-spacing: var(--token-font-letter-spacing-0, 0%);
-  line-height: var(--token-font-line-height-900, var(--token-scale-900, 36px));
-  text-decoration: none;
-  text-transform: none;
+  letter-spacing: var(--token-font-letter-spacing-0, 0);
+  line-height: var(--token-font-line-height-900, 2.25rem);
 }

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

@@ -235,16 +235,15 @@
   }
 }
 :host {
-  --box-shadow: var(--token-elevation-4, 0px 3px 12px 0px rgba(0, 0, 0, 0.12), 0px 15px 48px 0px rgba(0, 0, 0, 0.18));
+  --box-shadow: var(--token-elevation-4, var(--token-shadow-offset-0, 0px) var(--token-shadow-offset-15, 15px) var(--token-shadow-blur-48, 48px) var(--token-shadow-spread-0, 0px) var(--token-shadow-7, rgba(0, 0, 0, 0.1803921569)), var(--token-shadow-offset-0, 0px) var(--token-shadow-offset-3, 3px) var(--token-shadow-blur-12, 12px) var(--token-shadow-spread-0, 0px) var(--token-shadow-5, rgba(0, 0, 0, 0.1215686275)));
   --max-width: 343px;
   --start: var(--token-space-200, var(--token-scale-200, 8px));
   --end: var(--token-space-200, var(--token-scale-200, 8px));
+  font-family: var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");
   font-size: var(--token-font-size-350, 0.875rem);
   font-weight: var(--token-font-weight-medium, 500);
-  letter-spacing: var(--token-font-letter-spacing-0, 0%);
-  line-height: var(--token-font-line-height-600, var(--token-scale-600, 24px));
-  text-decoration: none;
-  text-transform: none;
+  letter-spacing: var(--token-font-letter-spacing-0, 0);
+  line-height: var(--token-font-line-height-600, 1.5rem);
   z-index: 1001;
 }
 
@@ -302,12 +301,11 @@
 }
 
 .toast-header {
+  font-family: var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");
   font-size: var(--token-font-size-450, 1.125rem);
   font-weight: var(--token-font-weight-medium, 500);
-  letter-spacing: var(--token-font-letter-spacing-0, 0%);
-  line-height: var(--token-font-line-height-700, var(--token-scale-700, 28px));
-  text-decoration: none;
-  text-transform: none;
+  letter-spacing: var(--token-font-letter-spacing-0, 0);
+  line-height: var(--token-font-line-height-700, 1.75rem);
 }
 
 .toast-layout-baseline .toast-button-group-start {
@@ -333,12 +331,11 @@
 }
 
 .toast-button {
+  font-family: var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");
   font-size: var(--token-font-size-350, 0.875rem);
   font-weight: var(--token-font-weight-regular, 400);
-  letter-spacing: var(--token-font-letter-spacing-0, 0%);
-  line-height: var(--token-font-line-height-600, var(--token-scale-600, 24px));
-  text-decoration: none;
-  text-transform: none;
+  letter-spacing: var(--token-font-letter-spacing-0, 0);
+  line-height: var(--token-font-line-height-600, 1.5rem);
   padding-left: 0;
   padding-right: 0;
   padding-top: 0;
@@ -362,8 +359,8 @@
 }
 
 :host(.toast-hue-bold) {
-  --background: var(--token-bg-neutral-boldest-default, var(--token-primitives-neutral-1200, #242424));
-  --background-activated: var(--token-bg-neutral-boldest-press, var(--token-primitives-base-black, #111111));
+  --background: var(--token-bg-neutral-boldest-default, var(--token-primitives-neutral-1200, #242528));
+  --background-activated: var(--token-bg-neutral-boldest-press, var(--token-primitives-base-black, #131518));
   --color: var(--token-text-inverse, var(--token-primitives-base-white, #ffffff));
   --button-color: var(--token-text-inverse, var(--token-primitives-base-white, #ffffff));
 }
@@ -379,13 +376,13 @@
 
 :host(.toast-hue-subtle) {
   --background: var(--token-bg-neutral-subtlest-default, var(--token-primitives-base-white, #ffffff));
-  --background-activated: var(--token-bg-neutral-subtlest-press, var(--token-primitives-neutral-200, #eae9e9));
-  --color: var(--token-text-default, var(--token-primitives-neutral-1200, #242424));
-  --button-color: var(--token-text-link-default, var(--token-semantics-primary-900, var(--token-primitives-blue-900, #0d4bc3)));
+  --background-activated: var(--token-bg-neutral-subtlest-press, var(--token-primitives-neutral-200, #ebeef2));
+  --color: var(--token-text-default, var(--token-primitives-neutral-1200, #242528));
+  --button-color: var(--token-text-link-default, var(--token-semantics-primary-800, var(--token-primitives-blue-800, #0f54da)));
 }
 
 :host(.toast-hue-subtle) .toast-button-cancel {
-  color: var(--token-icon-subtlest, var(--token-primitives-neutral-800, #626262));
+  color: var(--token-icon-subtlest, var(--token-primitives-neutral-800, #6c727a));
 }
 
 :host(.toast-hue-subtle.ion-color) .toast-wrapper {

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

@@ -370,10 +370,10 @@ input {
 }
 
 :host {
-  --track-background: var(--token-primitives-neutral-500, #a2a2a2);
+  --track-background: var(--token-primitives-neutral-500, #9fa5ad);
   --track-background-checked: var(--ion-color-primary, var(--token-bg-primary-base-default, var(--token-semantics-primary-base, var(--token-semantics-primary-700, var(--token-primitives-blue-700, #105cef)))));
   --border-radius: var(--token-border-radius-full, 999px);
-  --focus-ring-color: var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));
+  --focus-ring-color: var(--token-border-focus-default, var(--token-semantics-primary-400, var(--token-primitives-blue-400, #b5c0f7)));
   --focus-ring-width: var(--token-border-size-050, var(--token-scale-050, 2px));
   --handle-background: var(--token-bg-surface-default, var(--token-primitives-base-white, #ffffff));
   --handle-background-checked: var(--token-bg-surface-default, var(--token-primitives-base-white, #ffffff));
@@ -384,12 +384,11 @@ input {
   --handle-spacing: var(--token-space-050, var(--token-scale-050, 2px));
   --handle-transition: transform 300ms, width 120ms ease-in-out 80ms, left 110ms ease-in-out 80ms,
     right 110ms ease-in-out 80ms;
+  font-family: var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");
   font-size: var(--token-font-size-350, 0.875rem);
   font-weight: var(--token-font-weight-regular, 400);
-  letter-spacing: var(--token-font-letter-spacing-0, 0%);
-  line-height: var(--token-font-line-height-600, var(--token-scale-600, 24px));
-  text-decoration: none;
-  text-transform: none;
+  letter-spacing: var(--token-font-letter-spacing-0, 0);
+  line-height: var(--token-font-line-height-600, 1.5rem);
   z-index: 2;
 }
 
@@ -413,24 +412,23 @@ input {
 }
 
 .toggle-bottom {
+  font-family: var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");
   font-size: var(--token-font-size-300, 0.75rem);
   font-weight: var(--token-font-weight-medium, 500);
-  letter-spacing: var(--token-font-letter-spacing-0, 0%);
-  line-height: var(--token-font-line-height-500, var(--token-scale-500, 20px));
-  text-decoration: none;
-  text-transform: none;
+  letter-spacing: var(--token-font-letter-spacing-0, 0);
+  line-height: var(--token-font-line-height-500, 1.25rem);
 }
 
 .toggle-bottom .error-text {
-  color: var(--token-text-danger, var(--token-semantics-danger-900, var(--token-primitives-red-900, #991b1b)));
+  color: var(--token-text-danger, var(--token-semantics-danger-800, var(--token-primitives-red-800, #d2002b)));
 }
 
 .toggle-bottom .helper-text {
-  color: var(--token-text-subtlest, var(--token-primitives-neutral-800, #626262));
+  color: var(--token-text-subtlest, var(--token-primitives-neutral-800, #6c727a));
 }
 
 :host(.ion-focused) .toggle-icon {
-  outline: var(--focus-ring-width) var(--token-border-style-solid, solid) var(--focus-ring-color);
+  outline: var(--focus-ring-width) solid var(--focus-ring-color);
   outline-offset: var(--focus-ring-width);
 }
 
@@ -439,7 +437,7 @@ input {
 }
 
 :host(.ion-activated) .toggle-icon {
-  background: var(--token-bg-neutral-base-press, var(--token-primitives-neutral-700, #777777));
+  background: var(--token-bg-neutral-base-press, var(--token-primitives-neutral-500, #9fa5ad));
 }
 
 :host(.ion-activated.toggle-checked) .toggle-icon {
@@ -462,7 +460,7 @@ input {
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--token-text-default, var(--token-primitives-neutral-1200, #242424));
+  color: var(--token-text-default, var(--token-primitives-neutral-1200, #242528));
 }
 
 .toggle-inner .toggle-switch-icon {
@@ -488,7 +486,7 @@ input {
   margin-inline-start: 0;
   -webkit-margin-end: var(--token-space-400, var(--token-scale-400, 16px));
   margin-inline-end: var(--token-space-400, var(--token-scale-400, 16px));
-  color: var(--token-text-default, var(--token-primitives-neutral-1200, #242424));
+  color: var(--token-text-default, var(--token-primitives-neutral-1200, #242528));
 }
 
 /**

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

@@ -1,8 +1,6 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import checkRegular from "@phosphor-icons/core/assets/regular/check.svg";
-import minusRegular from "@phosphor-icons/core/assets/regular/minus.svg";
 import { Build, Host, forceUpdate, h } from "@stencil/core";
 import { checkInvalidState, createItemMultipleInputsObserver } from "../../utils/forms/index";
 import { renderHiddenInput, inheritAriaAttributes } from "../../utils/helpers";
@@ -249,22 +247,17 @@ export class Toggle {
     setFocus() {
         this.el.focus();
     }
+    /**
+     * Get the default icon to use for the checked icon based on the theme.
+     */
     get toggleDefaultCheckedIcon() {
-        // Determine the theme and map to default icons
+        // Determine the theme and map to the default icon
         const theme = getIonTheme(this);
-        const defaultIcons = {
-            ios: removeOutline,
-            ionic: checkRegular,
-            md: checkmarkOutline,
-        };
-        // Get the default icon based on the theme, falling back to 'md' icon if necessary
-        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-        // Return the default icon
-        return defaultIcon;
+        return theme === 'ios' ? removeOutline : checkmarkOutline;
     }
     /**
      * Get the icon to use for the checked icon.
-     * Otherwise, use the icon set in the config.
+     * Use the icon set in the config.
      * If no icon is set in the config, use the default icon.
      */
     get toggleCheckedIcon() {
@@ -272,20 +265,13 @@ export class Toggle {
     }
     /**
      * Get the icon to use for the unchecked icon.
-     * Otherwise, use the icon set in the config.
+     * Use the icon set in the config.
      * If no icon is set in the config, use the default icon.
      */
     get toggleUncheckedIcon() {
-        // Determine the theme and map to default icons
+        // Determine the theme and map to the default icon
         const theme = getIonTheme(this);
-        const defaultIcons = {
-            ios: ellipseOutline,
-            ionic: minusRegular,
-            md: removeOutline,
-        };
-        // Get the default icon based on the theme, falling back to 'md' icon if necessary
-        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-        // Return the configured toggle unchecked icon or the default icon
+        const defaultIcon = theme === 'ios' ? ellipseOutline : removeOutline;
         return config.get('toggleUncheckedIcon', defaultIcon);
     }
     renderOnOffSwitchLabels(checked) {
@@ -354,7 +340,7 @@ export class Toggle {
         // The attributes are matched too because the class needs the item to render.
         const inClickableItem = hostContext('ion-item.ion-activatable, ion-item[button], ion-item[href]', el);
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (h(Host, { key: 'f3252e2c92ba027748413620748d479b8c865805', 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: '030fcdcc6074a283de193a04b4c52a9dda2a89b3', 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': inItem,
                 // `ion-focusable` has to stay on because it is what makes the item focusable.
@@ -369,10 +355,10 @@ export class Toggle {
                 [`toggle-label-placement-${labelPlacement}`]: true,
                 [`toggle-${rtl}`]: true,
                 'ion-activatable': isIonicTheme,
-            }) }, h("label", { key: '29c8cb1ad33e2e5d982fa19f2ebcfa7b328f3be7', class: "toggle-wrapper", htmlFor: inputId }, h("input", { key: '8aefbd4f2be1d1cbe5350200aa0ff321370ff101', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, required: required, ...inheritedAttributes }), h("div", { key: '4bbf765fed7eb016cbd560cf1bd8cd4e32a28f20', class: {
+            }) }, h("label", { key: '1d7d4f534661093ea5ea7c885ca7ba355983ff88', class: "toggle-wrapper", htmlFor: inputId }, h("input", { key: '43de25ac1c815db634915c302c934d0827b32b4c', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, required: required, ...inheritedAttributes }), h("div", { key: '9ed1fd6cd5b912b25628a2e2c29f0d758e0a7a24', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: 'fbfd9fef85b53219b52b0736a7aa510877d52c78' }), this.renderHintText()), h("div", { key: 'b84836acce007f477c2a9c6dfaace3856068b58e', class: "native-wrapper" }, this.renderToggleControl()))));
+            }, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: '0b7834f1e125d8a9c0acc7577f344812ccaf52fe' }), this.renderHintText()), h("div", { key: '16bebe3d305cccbfcf4d85eb16ac3fe94ae2c59c', class: "native-wrapper" }, this.renderToggleControl()))));
     }
     static get is() { return "ion-toggle"; }
     static get encapsulation() { return "shadow"; }

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

@@ -160,7 +160,7 @@
  */
 :host {
   --background: var(--token-bg-surface-default, var(--token-primitives-base-white, #ffffff));
-  --color: var(--token-text-default, var(--token-primitives-neutral-1200, #242424));
+  --color: var(--token-text-default, var(--token-primitives-neutral-1200, #242528));
   --border-color: currentColor;
   --padding-top: var(--token-space-200, var(--token-scale-200, 8px));
   --padding-bottom: var(--token-space-200, var(--token-scale-200, 8px));

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

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { focusVisibleElement } from "./helpers";
+import { focusRedirectedElement } from "./helpers";
 /**
  * This query string selects elements that
  * are eligible to receive focus. We select
@@ -85,7 +85,7 @@ const focusElementInContext = (hostToFocus, fallbackElement) => {
             radioGroup.setFocus();
         }
         else {
-            focusVisibleElement(elementToFocus);
+            focusRedirectedElement(elementToFocus);
         }
     }
     else {

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

@@ -39,9 +39,36 @@ export const focusElements = (elements) => {
     const focusVisible = getOrInitFocusVisibleUtility();
     focusVisible.setFocus(elements);
 };
+/**
+ * Reports whether the most recent interaction on the page was keyboard-driven.
+ *
+ * Check this before drawing the keyboard focus indicator programmatically.
+ *
+ * @returns `true` while the user is navigating with a keyboard, and before the
+ * first interaction on the page.
+ */
+export const isKeyboardMode = () => getOrInitFocusVisibleUtility().isKeyboardMode();
+/**
+ * Watches how the user is interacting with the page and marks the focused
+ * element with `ion-focused`, so the keyboard focus indicator is only drawn
+ * while the user navigates with a keyboard.
+ *
+ * @param rootEl Scopes the utility to this element's shadow root, so it only
+ * reacts to interactions inside it. Omit it to listen on the document.
+ * @returns `setFocus` to mark elements focused programmatically, and `destroy`
+ * to detach the listeners.
+ */
 export const startFocusVisible = (rootEl) => {
     let currentFocus = [];
+    /*
+     * Starts as `true` so an element focused before the user has interacted,
+     * such as one focused on page load, still draws an indicator.
+     */
     let keyboardMode = true;
+    /*
+     * `ref` is where the listeners go and `root` is the element focus falls back
+     * to once it leaves everything inside `ref`.
+     */
     const ref = rootEl ? rootEl.shadowRoot : document;
     const root = rootEl ? rootEl : document.body;
     const setFocus = (elements) => {
@@ -53,12 +80,24 @@ export const startFocusVisible = (rootEl) => {
         keyboardMode = false;
         setFocus([]);
     };
+    /*
+     * Only the keys that move focus keep the indicator on. Any other key means
+     * the user is typing into the focused element rather than navigating, so the
+     * indicator is dropped.
+     */
     const onKeydown = (ev) => {
         keyboardMode = FOCUS_KEYS.includes(ev.key);
         if (!keyboardMode) {
             setFocus([]);
         }
     };
+    /*
+     * The indicator does not always belong to the element that took focus. The
+     * composed path is walked so every `ion-focusable` ancestor is marked too,
+     * which is how an `ion-item` draws the indicator for a checkbox slotted into
+     * it, since a checkbox in an item drops the class itself. The composed path
+     * is used because it reaches hosts across shadow boundaries.
+     */
     const onFocusin = (ev) => {
         if (keyboardMode && ev.composedPath !== undefined) {
             const toFocus = ev.composedPath().filter((el) => {
@@ -71,18 +110,27 @@ export const startFocusVisible = (rootEl) => {
             setFocus(toFocus);
         }
     };
+    /*
+     * Focus landing back on `root` means it left every focusable element, so
+     * nothing should stay marked. Focus moving between elements is left alone
+     * because `onFocusin` marks the new one.
+     */
     const onFocusout = () => {
         if (ref.activeElement === root) {
             setFocus([]);
         }
     };
-    ref.addEventListener('keydown', onKeydown);
+    /*
+     * Capture phase, so the mode is current for the overlay focus trap, which
+     * intercepts Tab in its own capture listener.
+     */
+    ref.addEventListener('keydown', onKeydown, true);
     ref.addEventListener('focusin', onFocusin);
     ref.addEventListener('focusout', onFocusout);
     ref.addEventListener('touchstart', pointerDown, { passive: true });
     ref.addEventListener('mousedown', pointerDown);
     const destroy = () => {
-        ref.removeEventListener('keydown', onKeydown);
+        ref.removeEventListener('keydown', onKeydown, true);
         ref.removeEventListener('focusin', onFocusin);
         ref.removeEventListener('focusout', onFocusout);
         ref.removeEventListener('touchstart', pointerDown);
@@ -91,5 +139,6 @@ export const startFocusVisible = (rootEl) => {
     return {
         destroy,
         setFocus,
+        isKeyboardMode: () => keyboardMode,
     };
 };

package/dist/collection/utils/helpers.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { focusElements } from "./focus-visible";
+import { focusElements, isKeyboardMode } from "./focus-visible";
 import { printIonError } from "./logging/index";
 import { isRTL } from "./rtl/index";
 import { config } from "../global/config";
@@ -275,6 +275,20 @@ export const focusVisibleElement = (el) => {
         }
     }
 };
+/**
+ * Focuses an element a focus trap is redirecting focus to. Only draws the
+ * keyboard focus indicator when the user is navigating with a keyboard, so a
+ * redirect caused by a tap or click does not leave the element looking as
+ * though it was tabbed to.
+ */
+export const focusRedirectedElement = (el) => {
+    if (isKeyboardMode()) {
+        focusVisibleElement(el);
+    }
+    else {
+        el.focus();
+    }
+};
 /**
  * Clears the keyboard focus ring (`ion-focused`) that the focus-visible
  * utility may have applied to elements during a programmatic focus.

package/dist/collection/utils/overlays.js

@@ -10,7 +10,7 @@ import { getIonMode, getIonTheme } from "../global/ionic-global";
 import { CoreDelegate } from "./framework-delegate";
 import { BACKDROP_NO_SCROLL } from "./gesture/gesture-controller";
 import { OVERLAY_BACK_BUTTON_PRIORITY } from "./hardware-back-button";
-import { addEventListener, componentOnReady, focusVisibleElement, getElementRoot, removeEventListener, } from "./helpers";
+import { addEventListener, componentOnReady, focusRedirectedElement, focusVisibleElement, getElementRoot, removeEventListener, } from "./helpers";
 let lastOverlayIndex = 0;
 let lastId = 0;
 export const activeAnimations = new WeakMap();
@@ -230,7 +230,7 @@ const focusElementInOverlay = (hostToFocus, overlay) => {
         elementToFocus = shadowRoot.querySelector(focusableQueryString) || hostToFocus;
     }
     if (elementToFocus) {
-        focusVisibleElement(elementToFocus);
+        focusRedirectedElement(elementToFocus);
     }
     else {
         // Focus overlay instead of letting focus escape

package/dist/collection/utils/test/playwright/field-geometry.js

@@ -0,0 +1,34 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+/**
+ * These tracks are adjacent with no gap, so the edges are meant to be equal.
+ * Engines round fractional track origins differently, and a real ordering
+ * regression moves a cell by a whole track, so a pixel of slack is safe.
+ */
+const EDGE_TOLERANCE = 1;
+/**
+ * Asserts that a form field's start slot, control and end slot occupy one row,
+ * in inline order.
+ *
+ * The ionic theme lays these out as grid columns. An invalid column template is
+ * dropped silently, and the cells then auto-place into a row each, so checking
+ * that they share a row is what catches it.
+ *
+ * @param host The form field element.
+ * @param prefix The component's cell-class prefix: `input`, `select` or `textarea`.
+ */
+export const expectFieldCellsShareARow = async (host, prefix) => {
+    const start = await host.locator(`.${prefix}-start`).boundingBox();
+    const native = await host.locator('.native-wrapper').boundingBox();
+    const end = await host.locator(`.${prefix}-end`).boundingBox();
+    expect(native).not.toBeNull();
+    for (const cell of [start, end]) {
+        expect(cell).not.toBeNull();
+        expect(cell.y).toBeLessThan(native.y + native.height);
+        expect(native.y).toBeLessThan(cell.y + cell.height);
+    }
+    expect(native.x).toBeGreaterThan(start.x + start.width - EDGE_TOLERANCE);
+    expect(end.x).toBeGreaterThan(native.x + native.width - EDGE_TOLERANCE);
+};

package/dist/collection/utils/test/playwright/index.js

@@ -11,3 +11,4 @@ export * from './matchers';
 export * from './viewports';
 export * from './generator';
 export * from './detach-reattach';
+export * from './field-geometry';