@ionic/core 9.0.3-dev.11790016799.1e269b7a → 9.0.3-dev.11790116791.11c9cd1e

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

@@ -555,7 +555,7 @@
 
 :host(.textarea-fill-outline) {
   --border-width: var(--token-border-size-025, var(--token-scale-025, 1px));
-  --border-color: var(--token-border-input-default, var(--token-primitives-neutral-600, #8c8c8c));
+  --border-color: var(--token-border-input-default, var(--token-primitives-neutral-400, #d0d7df));
 }
 
 /**
@@ -572,14 +572,14 @@
 }
 
 :host(.textarea-fill-outline.textarea-readonly) {
-  --border-color: var(--token-border-input-default, var(--token-primitives-neutral-600, #8c8c8c));
+  --border-color: var(--token-border-input-default, var(--token-primitives-neutral-400, #d0d7df));
   --border-width: var(--token-border-size-025, var(--token-scale-025, 1px));
 }
 
 :host(.textarea-fill-solid) {
-  --border-color: var(--token-bg-input-bold-default, var(--token-primitives-neutral-200, #eae9e9));
+  --border-color: var(--token-bg-input-bold-default, var(--token-primitives-neutral-200, #ebeef2));
   --border-width: var(--token-border-size-050, var(--token-scale-050, 2px));
-  --background: var(--token-bg-input-bold-default, var(--token-primitives-neutral-200, #eae9e9));
+  --background: var(--token-bg-input-bold-default, var(--token-primitives-neutral-200, #ebeef2));
 }
 
 :host(.textarea-fill-solid) .textarea-bottom {
@@ -587,7 +587,7 @@
 }
 
 :host(.textarea-fill-solid.has-focus) {
-  --border-color: var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));
+  --border-color: var(--token-border-focus-default, var(--token-semantics-primary-400, var(--token-primitives-blue-400, #b5c0f7)));
 }
 
 :host(.textarea-fill-solid.has-focus.ion-valid),
@@ -597,35 +597,34 @@
 }
 
 :host(.textarea-fill-solid.textarea-readonly) {
-  --background: var(--token-bg-input-bold-read-only, var(--token-primitives-neutral-300, #e0e0e0));
-  --border-color: var(--token-bg-input-bold-read-only, var(--token-primitives-neutral-300, #e0e0e0));
+  --background: var(--token-bg-input-bold-read-only, var(--token-primitives-neutral-300, #e6eaee));
+  --border-color: var(--token-bg-input-bold-read-only, var(--token-primitives-neutral-300, #e6eaee));
 }
 
 :host(.textarea-fill-solid.textarea-readonly.ion-invalid) {
-  --border-color: rgba(var(--token-semantics-danger-base-rgb, 229, 41, 41), 0.6);
+  --border-color: rgba(var(--token-semantics-danger-base-rgb, 224, 36, 58), 0.6);
 }
 
 :host(.textarea-fill-solid.textarea-disabled) {
-  --background: var(--token-bg-input-bold-disabled, var(--token-primitives-neutral-300, #e0e0e0));
-  --border-color: var(--token-bg-input-bold-disabled, var(--token-primitives-neutral-300, #e0e0e0));
+  --background: var(--token-bg-input-bold-disabled, var(--token-primitives-neutral-300, #e6eaee));
+  --border-color: var(--token-bg-input-bold-disabled, var(--token-primitives-neutral-300, #e6eaee));
 }
 
 :host {
-  --border-color: var(--token-border-input-default, var(--token-primitives-neutral-600, #8c8c8c));
-  --color: var(--token-text-default, var(--token-primitives-neutral-1200, #242424));
-  --highlight-color-valid: var(--token-text-success, var(--token-semantics-success-900, var(--token-primitives-green-900, #126f23)));
-  --highlight-color-invalid: var(--token-semantics-danger-800, var(--token-primitives-red-800, #bf2222));
+  --border-color: var(--token-border-input-default, var(--token-primitives-neutral-400, #d0d7df));
+  --color: var(--token-text-default, var(--token-primitives-neutral-1200, #242528));
+  --highlight-color-valid: var(--token-text-success, var(--token-semantics-success-900, var(--token-primitives-green-900, #037046)));
+  --highlight-color-invalid: var(--token-semantics-danger-800, var(--token-primitives-red-800, #d2002b));
   --highlight-color-focused: 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)))));
-  --placeholder-color: var(--token-text-subtlest, var(--token-primitives-neutral-800, #626262));
+  --placeholder-color: var(--token-text-subtlest, var(--token-primitives-neutral-800, #6c727a));
   --placeholder-opacity: 1;
   --background: var(--token-bg-surface-default, var(--token-primitives-base-white, #ffffff));
   --padding-bottom: 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-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);
 }
 
 :host(.ion-color) {
@@ -671,15 +670,15 @@
 }
 
 :host(.textarea-shape-soft) {
-  --border-radius: var(--token-soft-xl, var(--token-border-radius-200, var(--token-scale-200, 8px)));
+  --border-radius: var(--token-shape-soft-xl, 12px);
 }
 
 :host(.textarea-shape-round) {
-  --border-radius: var(--token-round-xl, var(--token-border-radius-400, var(--token-scale-400, 16px)));
+  --border-radius: var(--token-shape-round-xl, 16px);
 }
 
 :host(.textarea-shape-rectangular) {
-  --border-radius: var(--token-rectangular-xl, var(--token-border-radius-0, var(--token-scale-0, 0px)));
+  --border-radius: var(--token-shape-rectangular-xl, 0px);
 }
 
 :host([auto-grow]) .native-wrapper {
@@ -862,21 +861,20 @@
   -webkit-padding-end: var(--padding-end);
   padding-inline-end: var(--padding-end);
   padding-top: var(--token-space-100, var(--token-scale-100, 4px));
+  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);
 }
 
 .textarea-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)));
 }
 
 .textarea-bottom .helper-text,
 .textarea-bottom .counter {
-  color: var(--token-text-subtlest, var(--token-primitives-neutral-800, #626262));
+  color: var(--token-text-subtlest, var(--token-primitives-neutral-800, #6c727a));
 }
 
 :host(.has-focus.ion-valid) .helper-text {
@@ -884,19 +882,18 @@
 }
 
 .label-text-wrapper {
+  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);
   padding-left: 0;
   padding-right: 0;
   padding-top: var(--padding-top);
   padding-bottom: var(--padding-bottom);
   max-width: var(--token-scale-5000, 200px);
   transition: color var(--token-transition-time-150, 150ms) var(--token-transition-curve-expressive, cubic-bezier(0.4, 0, 0.2, 1)), transform var(--token-transition-time-150, 150ms) var(--token-transition-curve-expressive, cubic-bezier(0.4, 0, 0.2, 1));
-  color: var(--token-text-subtle, var(--token-primitives-neutral-1000, #3b3b3b));
+  color: var(--token-text-subtle, var(--token-primitives-neutral-1000, #383e45));
 }
 
 :host(.label-floating) .label-text-wrapper {
@@ -945,7 +942,7 @@ ion-icon {
 }
 
 :host(.has-focus) {
-  --border-color: var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));
+  --border-color: var(--token-border-focus-default, var(--token-semantics-primary-400, var(--token-primitives-blue-400, #b5c0f7)));
   --border-width: var(--token-border-size-050, var(--token-scale-050, 2px));
 }
 
@@ -955,28 +952,28 @@ ion-icon {
 
 @media (any-hover: hover) {
   :host(:hover) {
-    --border-color: var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));
+    --border-color: var(--token-border-focus-default, var(--token-semantics-primary-400, var(--token-primitives-blue-400, #b5c0f7)));
   }
 }
 :host(.textarea-disabled) {
-  --color: var(--token-text-disabled, var(--token-primitives-neutral-500, #a2a2a2));
-  --background: var(--token-bg-input-disabled, var(--token-primitives-neutral-100, #f3f3f3));
-  --border-color: var(--token-border-disabled, var(--token-primitives-neutral-300, #e0e0e0));
-  --placeholder-color: var(--token-text-disabled, var(--token-primitives-neutral-500, #a2a2a2));
+  --color: var(--token-text-disabled, var(--token-primitives-neutral-500, #9fa5ad));
+  --background: var(--token-bg-input-disabled, var(--token-primitives-neutral-100, #f6f7fa));
+  --border-color: var(--token-border-disabled, var(--token-primitives-neutral-300, #e6eaee));
+  --placeholder-color: var(--token-text-disabled, var(--token-primitives-neutral-500, #9fa5ad));
 }
 
 :host(.textarea-disabled:not(.ion-valid)) .textarea-bottom .helper-text,
 :host(.textarea-disabled) .textarea-bottom .counter,
 :host(.textarea-disabled) .label-text-wrapper {
-  color: var(--token-text-disabled, var(--token-primitives-neutral-500, #a2a2a2));
+  color: var(--token-text-disabled, var(--token-primitives-neutral-500, #9fa5ad));
 }
 
 :host(.textarea-disabled.has-focus.ion-valid) {
-  --border-color: rgba(var(--token-semantics-success-base-rgb, 27, 164, 51), 0.6);
+  --border-color: rgba(var(--token-semantics-success-base-rgb, 74, 174, 131), 0.6);
 }
 
 :host(.textarea-disabled.ion-touched.ion-invalid) {
-  --border-color: rgba(var(--token-semantics-danger-base-rgb, 229, 41, 41), 0.6);
+  --border-color: rgba(var(--token-semantics-danger-base-rgb, 224, 36, 58), 0.6);
 }
 
 :host(.textarea-disabled.ion-color) {
@@ -989,5 +986,5 @@ ion-icon {
 }
 
 :host(.textarea-readonly) {
-  --background: var(--token-bg-input-read-only, var(--token-primitives-neutral-100, #f3f3f3));
+  --background: var(--token-bg-input-read-only, var(--token-primitives-neutral-100, #f6f7fa));
 }

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/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/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-09-21T18:55:32",
+  "timestamp": "2026-09-22T22:41:53",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.44.2",

package/dist/esm/{animation-DXpoXT3G.js → animation-CSQV6dzD.js}

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { j as printIonError } from './index-jsOqXOKf.js';
-import { w as win } from './ionic-global-oK2heABF.js';
+import { w as win } from './ionic-global-DPSBlusf.js';
 
 let animationPrefix;
 const getAnimationPrefix = (el) => {

package/dist/esm/{app-globals-gnMsODWu.js → app-globals-PWSz-l_N.js}

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { i as initialize } from './ionic-global-oK2heABF.js';
+import { i as initialize } from './ionic-global-DPSBlusf.js';
 
 const appGlobalScript = initialize || (() => {});
 const globalScripts = appGlobalScript;

package/dist/esm/{button-active-DtDlu9-d.js → button-active-C57xZQjg.js}

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { w as writeTask } from './index-jsOqXOKf.js';
-import { h as hapticSelectionEnd, a as hapticSelectionChanged, b as hapticSelectionStart } from './haptic-Dal3yCq6.js';
+import { h as hapticSelectionEnd, a as hapticSelectionChanged, b as hapticSelectionStart } from './haptic-PEF9NVXM.js';
 import { createGesture } from './index-BmLuEdV7.js';
 
 const createButtonActiveGesture = (el, isButton) => {

package/dist/esm/{capacitor-CMyaZHxy.js → capacitor-DBIFQa2o.js}

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { w as win } from './ionic-global-oK2heABF.js';
+import { w as win } from './ionic-global-DPSBlusf.js';
 
 const getCapacitor = () => {
     if (win !== undefined) {

package/dist/esm/{clear-button-press-controller-CWOPHFBc.js → clear-button-press-controller-Dd5_yhOF.js}

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { d as doc } from './ionic-global-oK2heABF.js';
+import { d as doc } from './ionic-global-DPSBlusf.js';
 
 /**
  * Tracks an in-flight press on a clear button so a blur landing mid-press can't