@womp/kookie-ui 0.35.1 → 0.35.2

package/components.css

@@ -947,7 +947,7 @@
   }
 }
 :where(.kui-AccordionTrigger:focus-visible) {
-  outline: var(--focus-outline-width) solid var(--focus-8);
+  outline: var(--focus-ring-width) solid var(--focus-8);
   outline-offset: var(--focus-outline-offset-inset);
 }
 .kui-AccordionContent {
@@ -1077,7 +1077,7 @@
     border: 1px solid CanvasText;
   }
   :where(.kui-AccordionTrigger:focus-visible) {
-    outline: 2px solid CanvasText;
+    outline: var(--focus-ring-width) solid CanvasText;
     outline-offset: 2px;
   }
   :where(.kui-AccordionItem:not(:last-child)) {
@@ -1389,8 +1389,8 @@
   cursor: pointer;
 }
 :is(.kui-AvatarRoot:where(button),.kui-AvatarRoot:where(a),.kui-AvatarRoot:where([role='button'])):where(:focus-visible) {
-  outline: var(--focus-outline-width) solid var(--focus-8);
-  outline-offset: var(--focus-outline-offset);
+  outline: var(--focus-ring-width) solid var(--focus-8);
+  outline-offset: var(--focus-ring-offset);
 }
 :is(.kui-AvatarRoot:where(button),.kui-AvatarRoot:where(a),.kui-AvatarRoot:where([role='button'])):where(:disabled),:is(.kui-AvatarRoot:where(button),.kui-AvatarRoot:where(a),.kui-AvatarRoot:where([role='button'])):where([data-disabled]) {
   cursor: default;
@@ -3484,7 +3484,7 @@
   background-color: var(--v-bg);
 }
 .kui-BaseCard:where(.kui-variant-outline,.kui-variant-soft,.kui-variant-surface):where(:focus-visible) {
-  outline: 2px solid var(--v-focus-color);
+  outline: var(--focus-ring-width) solid var(--v-focus-color);
   outline-offset: var(--v-focus-offset);
 }
 .kui-BaseCard:where(.kui-variant-outline,.kui-variant-soft,.kui-variant-surface):where(:focus-visible)::after {
@@ -3582,7 +3582,7 @@
   --v-focus-offset: -1px;
 }
 .kui-BaseCard:where(.kui-variant-ghost):where(:focus-visible) {
-  outline: 2px solid var(--v-focus-color);
+  outline: var(--focus-ring-width) solid var(--v-focus-color);
   outline-offset: var(--v-focus-offset);
 }
 @media (hover: hover) {
@@ -3647,7 +3647,7 @@
           box-shadow: none;
 }
 .kui-BaseCard:where(.kui-variant-raised):where(:focus-visible) {
-  outline: 2px solid var(--focus-8);
+  outline: var(--focus-ring-width) solid var(--focus-8);
   outline-offset: 2px;
 }
 @media (hover: hover) {
@@ -3729,7 +3729,7 @@
   --base-card-border-radius: var(--kui-sf-r);
 }
 .kui-Card:where(:focus-visible) {
-  outline: 2px solid var(--focus-8);
+  outline: var(--focus-ring-width) solid var(--focus-8);
   outline-offset: -1px;
 }
 .kui-Card:where(:focus-visible)::after {
@@ -4984,7 +4984,7 @@
 }
 @media (forced-colors: active) {
   .kui-BaseMenuItem:where(:focus-visible) {
-    outline: 2px solid Highlight;
+    outline: var(--focus-ring-width) solid Highlight;
     outline-offset: 2px;
   }
   .kui-BaseMenuContent:not(:where(.kui-SidebarContent)) {
@@ -5194,7 +5194,7 @@
 }
 @media (forced-colors: active) {
   .kui-CommandItem:where([data-selected='true']) {
-    outline: 2px solid Highlight;
+    outline: var(--focus-ring-width) solid Highlight;
     outline-offset: -2px;
   }
   .kui-CommandSearch {
@@ -5354,13 +5354,13 @@
 }
 @supports selector(:has(*)) {
   .kui-TextFieldRoot:where(:has(.kui-TextFieldInput:focus)) {
-    outline: 2px solid var(--text-field-focus-color);
+    outline: var(--focus-ring-width) solid var(--text-field-focus-color);
     outline-offset: -1px;
   }
 }
 @supports not selector(:has(*)) {
   .kui-TextFieldRoot:where(:focus-within) {
-    outline: 2px solid var(--text-field-focus-color);
+    outline: var(--focus-ring-width) solid var(--text-field-focus-color);
     outline-offset: -1px;
   }
 }
@@ -5423,7 +5423,7 @@
   }
 }
 .kui-TextFieldInput::-webkit-calendar-picker-indicator:where(:focus-visible) {
-  outline: 2px solid var(--text-field-focus-color);
+  outline: var(--focus-ring-width) solid var(--text-field-focus-color);
 }
 :is(.kui-TextFieldInput::-webkit-datetime-edit-ampm-field,.kui-TextFieldInput::-webkit-datetime-edit-day-field,.kui-TextFieldInput::-webkit-datetime-edit-hour-field,.kui-TextFieldInput::-webkit-datetime-edit-millisecond-field,.kui-TextFieldInput::-webkit-datetime-edit-minute-field,.kui-TextFieldInput::-webkit-datetime-edit-month-field,.kui-TextFieldInput::-webkit-datetime-edit-second-field,.kui-TextFieldInput::-webkit-datetime-edit-week-field,.kui-TextFieldInput::-webkit-datetime-edit-year-field):where(:focus) {
   background-color: var(--text-field-selection-color);
@@ -6724,7 +6724,7 @@
 }
 @media (forced-colors: active) {
   .kui-ComboboxItem:where([data-selected='true']) {
-    outline: 2px solid Highlight;
+    outline: var(--focus-ring-width) solid Highlight;
     outline-offset: -2px;
   }
 }
@@ -7177,10 +7177,10 @@
           box-shadow: inset 0 var(--raised-border-width) var(--black-a3), 0 0 0 var(--raised-border-width) var(--neutral-a7);
 }
 .kui-Kbd:where(.kui-variant-raised):where(:-moz-any-link,button):where(:focus-visible) {
-  outline: 2px solid var(--focus-8);
+  outline: var(--focus-ring-width) solid var(--focus-8);
 }
 .kui-Kbd:where(.kui-variant-raised):where(:any-link,button):where(:focus-visible) {
-  outline: 2px solid var(--focus-8);
+  outline: var(--focus-ring-width) solid var(--focus-8);
 }
 .kui-Kbd:where(.kui-variant-soft) {
   background-color: var(--neutral-a3);
@@ -7206,10 +7206,10 @@
   background-color: var(--neutral-a5);
 }
 .kui-Kbd:where(.kui-variant-soft):where(:-moz-any-link,button):where(:focus-visible) {
-  outline: 2px solid var(--focus-8);
+  outline: var(--focus-ring-width) solid var(--focus-8);
 }
 .kui-Kbd:where(.kui-variant-soft):where(:any-link,button):where(:focus-visible) {
-  outline: 2px solid var(--focus-8);
+  outline: var(--focus-ring-width) solid var(--focus-8);
 }
 .kui-Kbd:where(.kui-r-size-1) {
   font-size: var(--font-size-1);
@@ -8347,7 +8347,7 @@
   position: absolute;
   inset: 0;
   pointer-events: none;
-  outline: 2px solid var(--focus-8);
+  outline: var(--focus-ring-width) solid var(--focus-8);
   outline-offset: -2px;
 }
 :where(.kui-ScrollAreaRoot:has(> .kui-ScrollAreaScrollbar[data-orientation='horizontal'])) > .kui-ScrollAreaViewport {
@@ -9756,7 +9756,7 @@
   font-weight: var(--font-weight-medium);
 }
 .kui-SelectTrigger:where(:focus-visible) {
-  outline: var(--focus-outline-width) solid var(--focus-8);
+  outline: var(--focus-ring-width) solid var(--focus-8);
   outline-offset: var(--focus-outline-offset-inset);
 }
 .kui-SelectTriggerInner {
@@ -10215,7 +10215,7 @@
           box-shadow: var(--field-chrome);
 }
 .kui-SelectTrigger:where(.kui-variant-raised):where(:focus-visible) {
-  outline: 2px solid var(--focus-8);
+  outline: var(--focus-ring-width) solid var(--focus-8);
   outline-offset: 2px;
 }
 @media (hover: hover) {
@@ -10242,7 +10242,7 @@
   color: var(--accent-ink);
 }
 .kui-SelectTrigger:where(.kui-variant-soft):where(:focus-visible) {
-  outline: 2px solid var(--accent-8);
+  outline: var(--focus-ring-width) solid var(--accent-8);
   outline-offset: -1px;
 }
 @media (hover: hover) {
@@ -10280,7 +10280,7 @@
   }
 }
 .kui-SelectTrigger:where(.kui-variant-ghost):where(:focus-visible) {
-  outline: 2px solid var(--focus-8);
+  outline: var(--focus-ring-width) solid var(--focus-8);
   outline-offset: -1px;
 }
 .kui-SelectTrigger:where(.kui-variant-ghost):where([data-state='open']) {
@@ -10317,7 +10317,7 @@
           box-shadow: inset 0 0 0 1px var(--accent-8);
 }
 .kui-SelectTrigger:where(.kui-variant-outline):where(:focus-visible) {
-  outline: 2px solid var(--focus-8);
+  outline: var(--focus-ring-width) solid var(--focus-8);
   outline-offset: -1px;
 }
 .kui-SelectTrigger:where(.kui-variant-outline):where(:disabled) {
@@ -10355,7 +10355,7 @@
           box-shadow: inset 0 0 0 1px var(--accent-8);
 }
 .kui-SelectTrigger:where(.kui-variant-surface):where(:focus-visible) {
-  outline: 2px solid var(--focus-8);
+  outline: var(--focus-ring-width) solid var(--focus-8);
   outline-offset: -1px;
 }
 .kui-SelectTrigger:where(.kui-variant-surface):where(:disabled) {
@@ -10679,7 +10679,7 @@
   color: var(--accent-a12);
 }
 .kui-SidebarMenuButton:where(:focus-visible) {
-  outline: 2px solid var(--focus-8);
+  outline: var(--focus-ring-width) solid var(--focus-8);
   outline-offset: 2px;
 }
 .kui-SidebarMenuButton:where([data-accent-color]) {
@@ -11149,7 +11149,7 @@
           justify-content: flex-start;
 }
 :is(.kui-SidebarHeader :where(.kui-SidebarMenuButton),.kui-SidebarFooter :where(.kui-SidebarMenuButton)):where(:focus-visible) {
-  outline: 2px solid var(--focus-8);
+  outline: var(--focus-ring-width) solid var(--focus-8);
   outline-offset: 2px;
 }
 .kui-SidebarMenuSubTriggerIcon {
@@ -11886,7 +11886,7 @@
   }
 }
 .kui-SidebarSearchPopover .kui-SidebarMenuButton:where(:focus-visible) {
-  outline: 2px solid var(--focus-8);
+  outline: var(--focus-ring-width) solid var(--focus-8);
   outline-offset: -2px;
 }
 .kui-SidebarSearchPopover .kui-SidebarMenuButton[data-active] {
@@ -14712,7 +14712,7 @@
     background-color: Highlight;
   }
   .kui-BaseTabListTrigger:where(:focus-visible) :where(.kui-BaseTabListTriggerInner) {
-    outline: 2px solid Highlight;
+    outline: var(--focus-ring-width) solid Highlight;
     outline-offset: 2px;
   }
 }
@@ -14767,7 +14767,7 @@
   height: auto;
 }
 .kui-TextAreaRoot:where(:focus-within) {
-  outline: 2px solid var(--v-focus-color, var(--focus-8));
+  outline: var(--focus-ring-width) solid var(--v-focus-color, var(--focus-8));
   outline-offset: -1px;
 }
 .kui-TextAreaRoot::-moz-selection {
@@ -15669,7 +15669,7 @@
   background-color: var(--neutral-a4);
 }
 .kui-NavigatorLink:where(:focus-visible) {
-  outline: 2px solid var(--focus-8);
+  outline: var(--focus-ring-width) solid var(--focus-8);
   outline-offset: -2px;
 }
 .kui-Page {
@@ -15745,7 +15745,7 @@
   outline: none;
 }
 .kui-VirtualMenuRoot:where(:focus-visible) {
-  outline: 2px solid var(--focus-8);
+  outline: var(--focus-ring-width) solid var(--focus-8);
   outline-offset: -2px;
 }
 .kui-VirtualMenuViewport {
@@ -16505,7 +16505,7 @@
   }
 }
 .kui-ChatbarBox:where(.kui-variant-soft,.kui-variant-ghost,.kui-variant-outline,.kui-variant-surface):where(:focus-within) {
-  outline: 2px solid var(--v-focus-color, var(--focus-8));
+  outline: var(--focus-ring-width) solid var(--v-focus-color, var(--focus-8));
   outline-offset: -1px;
 }
 .kui-ChatbarBox:where(.kui-variant-outline, .kui-variant-surface) {
@@ -16550,7 +16550,7 @@
     border: 1px solid CanvasText;
   }
   .kui-ChatbarBox:where(.kui-variant-raised):where(:focus-within) {
-    outline: 2px solid Highlight;
+    outline: var(--focus-ring-width) solid Highlight;
     outline-offset: -1px;
   }
   .kui-ChatbarRoot:where([data-disabled]) .kui-ChatbarBox {
@@ -16708,7 +16708,7 @@
   outline: none;
 }
 .kui-MessageScrollerViewport:where(:focus-visible) {
-  outline: 2px solid var(--focus-8);
+  outline: var(--focus-ring-width) solid var(--focus-8);
   outline-offset: -2px;
 }
 .kui-MessageScrollerContent {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@womp/kookie-ui",
-  "version": "0.35.1",
+  "version": "0.35.2",
   "description": "Kookie UI v1: a React component library with design tokens, flexible theming, a full layout shell, and comprehensive documentation.",
   "keywords": [
     "react",

package/src/components/_internal/base-card.css

@@ -163,7 +163,7 @@
 
   /* Focus */
   &:where(:focus-visible) {
-    outline: 2px solid var(--v-focus-color);
+    outline: var(--focus-ring-width) solid var(--v-focus-color);
     outline-offset: var(--v-focus-offset);
 
     &::after {
@@ -273,7 +273,7 @@
 
   /* Focus */
   &:where(:focus-visible) {
-    outline: 2px solid var(--v-focus-color);
+    outline: var(--focus-ring-width) solid var(--v-focus-color);
     outline-offset: var(--v-focus-offset);
   }
 
@@ -338,7 +338,7 @@
   }
 
   &:where(:focus-visible) {
-    outline: 2px solid var(--focus-8);
+    outline: var(--focus-ring-width) solid var(--focus-8);
     outline-offset: 2px;
   }
 

package/src/components/_internal/base-menu.css

@@ -347,7 +347,7 @@
 /* Forced colors support */
 @media (forced-colors: active) {
   .kui-BaseMenuItem:where(:focus-visible) {
-    outline: 2px solid Highlight;
+    outline: var(--focus-ring-width) solid Highlight;
     outline-offset: 2px;
   }
 

package/src/components/_internal/base-sidebar-menu.css

@@ -66,7 +66,7 @@
 
   /* Focus state */
   &:where(:focus-visible) {
-    outline: 2px solid var(--focus-8);
+    outline: var(--focus-ring-width) solid var(--focus-8);
     outline-offset: 2px;
   }
 

package/src/components/_internal/base-tab-list.css

@@ -228,7 +228,7 @@
   }
 
   .kui-BaseTabListTrigger:where(:focus-visible) :where(.kui-BaseTabListTriggerInner) {
-    outline: 2px solid Highlight;
+    outline: var(--focus-ring-width) solid Highlight;
     outline-offset: 2px;
   }
 }

package/src/components/accordion.css

@@ -190,7 +190,7 @@
 
 /* Trigger focus states */
 :where(.kui-AccordionTrigger:focus-visible) {
-  outline: var(--focus-outline-width) solid var(--focus-8);
+  outline: var(--focus-ring-width) solid var(--focus-8);
   outline-offset: var(--focus-outline-offset-inset);
 }
 
@@ -246,7 +246,7 @@
   }
 
   :where(.kui-AccordionTrigger:focus-visible) {
-    outline: 2px solid CanvasText;
+    outline: var(--focus-ring-width) solid CanvasText;
     outline-offset: 2px;
   }
 

package/src/components/avatar.css

@@ -38,8 +38,8 @@
   cursor: pointer;
 
   &:where(:focus-visible) {
-    outline: var(--focus-outline-width) solid var(--focus-8);
-    outline-offset: var(--focus-outline-offset);
+    outline: var(--focus-ring-width) solid var(--focus-8);
+    outline-offset: var(--focus-ring-offset);
   }
 
   /* Disabled is a colour remap: the element still hit-tests, so the cursor stops promising a press. */

package/src/components/card.css

@@ -19,7 +19,7 @@
   --base-card-border-radius: var(--kui-sf-r);
 
   &:where(:focus-visible) {
-    outline: 2px solid var(--focus-8);
+    outline: var(--focus-ring-width) solid var(--focus-8);
     outline-offset: -1px;
 
     &::after {

package/src/components/chatbar.css

@@ -341,7 +341,7 @@
 
   /* Focus state - outline ring (raised has its own box-shadow ring) */
   &:where(:focus-within) {
-    outline: 2px solid var(--v-focus-color, var(--focus-8));
+    outline: var(--focus-ring-width) solid var(--v-focus-color, var(--focus-8));
     outline-offset: -1px;
   }
 }
@@ -417,7 +417,7 @@
     border: 1px solid CanvasText;
   }
   .kui-ChatbarBox:where(.kui-variant-raised):where(:focus-within) {
-    outline: 2px solid Highlight;
+    outline: var(--focus-ring-width) solid Highlight;
     outline-offset: -1px;
   }
   .kui-ChatbarRoot:where([data-disabled]) .kui-ChatbarBox {

package/src/components/combobox.css

@@ -124,7 +124,7 @@
 /* Items never take DOM focus, so the base menu :focus-visible rule never matches. */
 @media (forced-colors: active) {
   .kui-ComboboxItem:where([data-selected='true']) {
-    outline: 2px solid Highlight;
+    outline: var(--focus-ring-width) solid Highlight;
     outline-offset: -2px;
   }
 }

package/src/components/command.css

@@ -187,7 +187,7 @@
 
 @media (forced-colors: active) {
   .kui-CommandItem:where([data-selected='true']) {
-    outline: 2px solid Highlight;
+    outline: var(--focus-ring-width) solid Highlight;
     outline-offset: -2px;
   }
 

package/src/components/kbd.css

@@ -103,7 +103,7 @@
       box-shadow: inset 0 var(--raised-border-width) var(--black-a3), 0 0 0 var(--raised-border-width) var(--neutral-a7);
     }
     &:where(:focus-visible) {
-      outline: 2px solid var(--focus-8);
+      outline: var(--focus-ring-width) solid var(--focus-8);
     }
   }
 }
@@ -124,7 +124,7 @@
       background-color: var(--neutral-a5);
     }
     &:where(:focus-visible) {
-      outline: 2px solid var(--focus-8);
+      outline: var(--focus-ring-width) solid var(--focus-8);
     }
   }
 }

package/src/components/message-scroller.css

@@ -20,7 +20,7 @@
   outline: none;
 
   &:where(:focus-visible) {
-    outline: 2px solid var(--focus-8);
+    outline: var(--focus-ring-width) solid var(--focus-8);
     outline-offset: -2px;
   }
 }

package/src/components/navigator.css

@@ -80,6 +80,6 @@
 }
 
 .kui-NavigatorLink:where(:focus-visible) {
-  outline: 2px solid var(--focus-8);
+  outline: var(--focus-ring-width) solid var(--focus-8);
   outline-offset: -2px;
 }

package/src/components/scroll-area.css

@@ -60,7 +60,7 @@
     position: absolute;
     inset: 0;
     pointer-events: none;
-    outline: 2px solid var(--focus-8);
+    outline: var(--focus-ring-width) solid var(--focus-8);
     outline-offset: -2px;
   }
 }

package/src/components/select.css

@@ -21,7 +21,7 @@
   }
 
   &:where(:focus-visible) {
-    outline: var(--focus-outline-width) solid var(--focus-8);
+    outline: var(--focus-ring-width) solid var(--focus-8);
     outline-offset: var(--focus-outline-offset-inset);
   }
 }
@@ -203,7 +203,7 @@
   box-shadow: var(--field-chrome);
 
   &:where(:focus-visible) {
-    outline: 2px solid var(--focus-8);
+    outline: var(--focus-ring-width) solid var(--focus-8);
     outline-offset: 2px;
   }
 
@@ -240,7 +240,7 @@
   color: var(--accent-ink);
 
   &:where(:focus-visible) {
-    outline: 2px solid var(--accent-8);
+    outline: var(--focus-ring-width) solid var(--accent-8);
     outline-offset: -1px;
   }
 
@@ -293,7 +293,7 @@
   }
 
   &:where(:focus-visible) {
-    outline: 2px solid var(--focus-8);
+    outline: var(--focus-ring-width) solid var(--focus-8);
     outline-offset: -1px;
   }
 
@@ -336,7 +336,7 @@
   }
 
   &:where(:focus-visible) {
-    outline: 2px solid var(--focus-8);
+    outline: var(--focus-ring-width) solid var(--focus-8);
     outline-offset: -1px;
   }
 
@@ -380,7 +380,7 @@
   }
 
   &:where(:focus-visible) {
-    outline: 2px solid var(--focus-8);
+    outline: var(--focus-ring-width) solid var(--focus-8);
     outline-offset: -1px;
   }
 

package/src/components/sidebar.css

@@ -402,7 +402,7 @@
 
   /* Focus state */
   &:where(:focus-visible) {
-    outline: 2px solid var(--focus-8);
+    outline: var(--focus-ring-width) solid var(--focus-8);
     outline-offset: 2px;
   }
 
@@ -860,7 +860,7 @@
 /* Popover menu button focus (arrow-key navigation) */
 /* stylelint-disable-next-line selector-max-specificity */
 .kui-SidebarSearchPopover .kui-SidebarMenuButton:where(:focus-visible) {
-  outline: 2px solid var(--focus-8);
+  outline: var(--focus-ring-width) solid var(--focus-8);
   outline-offset: -2px;
 }
 

package/src/components/text-area.css

@@ -33,7 +33,7 @@
   isolation: isolate;
 
   &:where(:focus-within) {
-    outline: 2px solid var(--v-focus-color, var(--focus-8));
+    outline: var(--focus-ring-width) solid var(--v-focus-color, var(--focus-8));
     outline-offset: -1px;
   }
 

package/src/components/text-field.css

@@ -12,13 +12,13 @@
 
   @supports selector(:has(*)) {
     &:where(:has(.kui-TextFieldInput:focus)) {
-      outline: 2px solid var(--text-field-focus-color);
+      outline: var(--focus-ring-width) solid var(--text-field-focus-color);
       outline-offset: -1px;
     }
   }
   @supports not selector(:has(*)) {
     &:where(:focus-within) {
-      outline: 2px solid var(--text-field-focus-color);
+      outline: var(--focus-ring-width) solid var(--text-field-focus-color);
       outline-offset: -1px;
     }
   }
@@ -88,7 +88,7 @@
     }
   }
   &::-webkit-calendar-picker-indicator:where(:focus-visible) {
-    outline: 2px solid var(--text-field-focus-color);
+    outline: var(--focus-ring-width) solid var(--text-field-focus-color);
   }
 
   /* Remove focus ring from date fields and use the selection color */

package/src/components/virtual-menu.css

@@ -19,7 +19,7 @@
   outline: none;
 
   &:where(:focus-visible) {
-    outline: 2px solid var(--focus-8);
+    outline: var(--focus-ring-width) solid var(--focus-8);
     outline-offset: -2px;
   }
 }

package/src/styles/tokens/constants.css

@@ -100,9 +100,9 @@
   --component-gap-ghost-3: calc(var(--space-2) * 1.5);
   --component-gap-ghost-4: var(--space-3);
 
-  /* Focus outline constants */
-  --focus-outline-width: 2px;
-  --focus-outline-offset: 2px;
+  /* Older names for the focus ring, kept for apps that read them */
+  --focus-outline-width: var(--focus-ring-width);
+  --focus-outline-offset: var(--focus-ring-offset);
   --focus-outline-offset-inset: -1px;
 
   /* Component padding relationships */

package/styles.css

@@ -3370,8 +3370,8 @@
   --component-gap-ghost-2: calc(var(--space-2) * 1.5);
   --component-gap-ghost-3: calc(var(--space-2) * 1.5);
   --component-gap-ghost-4: var(--space-3);
-  --focus-outline-width: 2px;
-  --focus-outline-offset: 2px;
+  --focus-outline-width: var(--focus-ring-width);
+  --focus-outline-offset: var(--focus-ring-offset);
   --focus-outline-offset-inset: -1px;
   --padding-ratio-horizontal: 1.5;
   --color-page: white;
@@ -6117,7 +6117,7 @@
   }
 }
 :where(.kui-AccordionTrigger:focus-visible) {
-  outline: var(--focus-outline-width) solid var(--focus-8);
+  outline: var(--focus-ring-width) solid var(--focus-8);
   outline-offset: var(--focus-outline-offset-inset);
 }
 .kui-AccordionContent {
@@ -6247,7 +6247,7 @@
     border: 1px solid CanvasText;
   }
   :where(.kui-AccordionTrigger:focus-visible) {
-    outline: 2px solid CanvasText;
+    outline: var(--focus-ring-width) solid CanvasText;
     outline-offset: 2px;
   }
   :where(.kui-AccordionItem:not(:last-child)) {
@@ -6559,8 +6559,8 @@
   cursor: pointer;
 }
 :is(.kui-AvatarRoot:where(button),.kui-AvatarRoot:where(a),.kui-AvatarRoot:where([role='button'])):where(:focus-visible) {
-  outline: var(--focus-outline-width) solid var(--focus-8);
-  outline-offset: var(--focus-outline-offset);
+  outline: var(--focus-ring-width) solid var(--focus-8);
+  outline-offset: var(--focus-ring-offset);
 }
 :is(.kui-AvatarRoot:where(button),.kui-AvatarRoot:where(a),.kui-AvatarRoot:where([role='button'])):where(:disabled),:is(.kui-AvatarRoot:where(button),.kui-AvatarRoot:where(a),.kui-AvatarRoot:where([role='button'])):where([data-disabled]) {
   cursor: default;
@@ -8644,7 +8644,7 @@
   background-color: var(--v-bg);
 }
 .kui-BaseCard:where(.kui-variant-outline,.kui-variant-soft,.kui-variant-surface):where(:focus-visible) {
-  outline: 2px solid var(--v-focus-color);
+  outline: var(--focus-ring-width) solid var(--v-focus-color);
   outline-offset: var(--v-focus-offset);
 }
 .kui-BaseCard:where(.kui-variant-outline,.kui-variant-soft,.kui-variant-surface):where(:focus-visible)::after {
@@ -8742,7 +8742,7 @@
   --v-focus-offset: -1px;
 }
 .kui-BaseCard:where(.kui-variant-ghost):where(:focus-visible) {
-  outline: 2px solid var(--v-focus-color);
+  outline: var(--focus-ring-width) solid var(--v-focus-color);
   outline-offset: var(--v-focus-offset);
 }
 @media (hover: hover) {
@@ -8807,7 +8807,7 @@
           box-shadow: none;
 }
 .kui-BaseCard:where(.kui-variant-raised):where(:focus-visible) {
-  outline: 2px solid var(--focus-8);
+  outline: var(--focus-ring-width) solid var(--focus-8);
   outline-offset: 2px;
 }
 @media (hover: hover) {
@@ -8889,7 +8889,7 @@
   --base-card-border-radius: var(--kui-sf-r);
 }
 .kui-Card:where(:focus-visible) {
-  outline: 2px solid var(--focus-8);
+  outline: var(--focus-ring-width) solid var(--focus-8);
   outline-offset: -1px;
 }
 .kui-Card:where(:focus-visible)::after {
@@ -10144,7 +10144,7 @@
 }
 @media (forced-colors: active) {
   .kui-BaseMenuItem:where(:focus-visible) {
-    outline: 2px solid Highlight;
+    outline: var(--focus-ring-width) solid Highlight;
     outline-offset: 2px;
   }
   .kui-BaseMenuContent:not(:where(.kui-SidebarContent)) {
@@ -10354,7 +10354,7 @@
 }
 @media (forced-colors: active) {
   .kui-CommandItem:where([data-selected='true']) {
-    outline: 2px solid Highlight;
+    outline: var(--focus-ring-width) solid Highlight;
     outline-offset: -2px;
   }
   .kui-CommandSearch {
@@ -10514,13 +10514,13 @@
 }
 @supports selector(:has(*)) {
   .kui-TextFieldRoot:where(:has(.kui-TextFieldInput:focus)) {
-    outline: 2px solid var(--text-field-focus-color);
+    outline: var(--focus-ring-width) solid var(--text-field-focus-color);
     outline-offset: -1px;
   }
 }
 @supports not selector(:has(*)) {
   .kui-TextFieldRoot:where(:focus-within) {
-    outline: 2px solid var(--text-field-focus-color);
+    outline: var(--focus-ring-width) solid var(--text-field-focus-color);
     outline-offset: -1px;
   }
 }
@@ -10583,7 +10583,7 @@
   }
 }
 .kui-TextFieldInput::-webkit-calendar-picker-indicator:where(:focus-visible) {
-  outline: 2px solid var(--text-field-focus-color);
+  outline: var(--focus-ring-width) solid var(--text-field-focus-color);
 }
 :is(.kui-TextFieldInput::-webkit-datetime-edit-ampm-field,.kui-TextFieldInput::-webkit-datetime-edit-day-field,.kui-TextFieldInput::-webkit-datetime-edit-hour-field,.kui-TextFieldInput::-webkit-datetime-edit-millisecond-field,.kui-TextFieldInput::-webkit-datetime-edit-minute-field,.kui-TextFieldInput::-webkit-datetime-edit-month-field,.kui-TextFieldInput::-webkit-datetime-edit-second-field,.kui-TextFieldInput::-webkit-datetime-edit-week-field,.kui-TextFieldInput::-webkit-datetime-edit-year-field):where(:focus) {
   background-color: var(--text-field-selection-color);
@@ -11884,7 +11884,7 @@
 }
 @media (forced-colors: active) {
   .kui-ComboboxItem:where([data-selected='true']) {
-    outline: 2px solid Highlight;
+    outline: var(--focus-ring-width) solid Highlight;
     outline-offset: -2px;
   }
 }
@@ -12337,10 +12337,10 @@
           box-shadow: inset 0 var(--raised-border-width) var(--black-a3), 0 0 0 var(--raised-border-width) var(--neutral-a7);
 }
 .kui-Kbd:where(.kui-variant-raised):where(:-moz-any-link,button):where(:focus-visible) {
-  outline: 2px solid var(--focus-8);
+  outline: var(--focus-ring-width) solid var(--focus-8);
 }
 .kui-Kbd:where(.kui-variant-raised):where(:any-link,button):where(:focus-visible) {
-  outline: 2px solid var(--focus-8);
+  outline: var(--focus-ring-width) solid var(--focus-8);
 }
 .kui-Kbd:where(.kui-variant-soft) {
   background-color: var(--neutral-a3);
@@ -12366,10 +12366,10 @@
   background-color: var(--neutral-a5);
 }
 .kui-Kbd:where(.kui-variant-soft):where(:-moz-any-link,button):where(:focus-visible) {
-  outline: 2px solid var(--focus-8);
+  outline: var(--focus-ring-width) solid var(--focus-8);
 }
 .kui-Kbd:where(.kui-variant-soft):where(:any-link,button):where(:focus-visible) {
-  outline: 2px solid var(--focus-8);
+  outline: var(--focus-ring-width) solid var(--focus-8);
 }
 .kui-Kbd:where(.kui-r-size-1) {
   font-size: var(--font-size-1);
@@ -13493,7 +13493,7 @@
   position: absolute;
   inset: 0;
   pointer-events: none;
-  outline: 2px solid var(--focus-8);
+  outline: var(--focus-ring-width) solid var(--focus-8);
   outline-offset: -2px;
 }
 :where(.kui-ScrollAreaRoot:has(> .kui-ScrollAreaScrollbar[data-orientation='horizontal'])) > .kui-ScrollAreaViewport {
@@ -14902,7 +14902,7 @@
   font-weight: var(--font-weight-medium);
 }
 .kui-SelectTrigger:where(:focus-visible) {
-  outline: var(--focus-outline-width) solid var(--focus-8);
+  outline: var(--focus-ring-width) solid var(--focus-8);
   outline-offset: var(--focus-outline-offset-inset);
 }
 .kui-SelectTriggerInner {
@@ -15361,7 +15361,7 @@
           box-shadow: var(--field-chrome);
 }
 .kui-SelectTrigger:where(.kui-variant-raised):where(:focus-visible) {
-  outline: 2px solid var(--focus-8);
+  outline: var(--focus-ring-width) solid var(--focus-8);
   outline-offset: 2px;
 }
 @media (hover: hover) {
@@ -15388,7 +15388,7 @@
   color: var(--accent-ink);
 }
 .kui-SelectTrigger:where(.kui-variant-soft):where(:focus-visible) {
-  outline: 2px solid var(--accent-8);
+  outline: var(--focus-ring-width) solid var(--accent-8);
   outline-offset: -1px;
 }
 @media (hover: hover) {
@@ -15426,7 +15426,7 @@
   }
 }
 .kui-SelectTrigger:where(.kui-variant-ghost):where(:focus-visible) {
-  outline: 2px solid var(--focus-8);
+  outline: var(--focus-ring-width) solid var(--focus-8);
   outline-offset: -1px;
 }
 .kui-SelectTrigger:where(.kui-variant-ghost):where([data-state='open']) {
@@ -15463,7 +15463,7 @@
           box-shadow: inset 0 0 0 1px var(--accent-8);
 }
 .kui-SelectTrigger:where(.kui-variant-outline):where(:focus-visible) {
-  outline: 2px solid var(--focus-8);
+  outline: var(--focus-ring-width) solid var(--focus-8);
   outline-offset: -1px;
 }
 .kui-SelectTrigger:where(.kui-variant-outline):where(:disabled) {
@@ -15501,7 +15501,7 @@
           box-shadow: inset 0 0 0 1px var(--accent-8);
 }
 .kui-SelectTrigger:where(.kui-variant-surface):where(:focus-visible) {
-  outline: 2px solid var(--focus-8);
+  outline: var(--focus-ring-width) solid var(--focus-8);
   outline-offset: -1px;
 }
 .kui-SelectTrigger:where(.kui-variant-surface):where(:disabled) {
@@ -15825,7 +15825,7 @@
   color: var(--accent-a12);
 }
 .kui-SidebarMenuButton:where(:focus-visible) {
-  outline: 2px solid var(--focus-8);
+  outline: var(--focus-ring-width) solid var(--focus-8);
   outline-offset: 2px;
 }
 .kui-SidebarMenuButton:where([data-accent-color]) {
@@ -16295,7 +16295,7 @@
           justify-content: flex-start;
 }
 :is(.kui-SidebarHeader :where(.kui-SidebarMenuButton),.kui-SidebarFooter :where(.kui-SidebarMenuButton)):where(:focus-visible) {
-  outline: 2px solid var(--focus-8);
+  outline: var(--focus-ring-width) solid var(--focus-8);
   outline-offset: 2px;
 }
 .kui-SidebarMenuSubTriggerIcon {
@@ -17032,7 +17032,7 @@
   }
 }
 .kui-SidebarSearchPopover .kui-SidebarMenuButton:where(:focus-visible) {
-  outline: 2px solid var(--focus-8);
+  outline: var(--focus-ring-width) solid var(--focus-8);
   outline-offset: -2px;
 }
 .kui-SidebarSearchPopover .kui-SidebarMenuButton[data-active] {
@@ -19858,7 +19858,7 @@
     background-color: Highlight;
   }
   .kui-BaseTabListTrigger:where(:focus-visible) :where(.kui-BaseTabListTriggerInner) {
-    outline: 2px solid Highlight;
+    outline: var(--focus-ring-width) solid Highlight;
     outline-offset: 2px;
   }
 }
@@ -19913,7 +19913,7 @@
   height: auto;
 }
 .kui-TextAreaRoot:where(:focus-within) {
-  outline: 2px solid var(--v-focus-color, var(--focus-8));
+  outline: var(--focus-ring-width) solid var(--v-focus-color, var(--focus-8));
   outline-offset: -1px;
 }
 .kui-TextAreaRoot::-moz-selection {
@@ -20815,7 +20815,7 @@
   background-color: var(--neutral-a4);
 }
 .kui-NavigatorLink:where(:focus-visible) {
-  outline: 2px solid var(--focus-8);
+  outline: var(--focus-ring-width) solid var(--focus-8);
   outline-offset: -2px;
 }
 .kui-Page {
@@ -20891,7 +20891,7 @@
   outline: none;
 }
 .kui-VirtualMenuRoot:where(:focus-visible) {
-  outline: 2px solid var(--focus-8);
+  outline: var(--focus-ring-width) solid var(--focus-8);
   outline-offset: -2px;
 }
 .kui-VirtualMenuViewport {
@@ -21651,7 +21651,7 @@
   }
 }
 .kui-ChatbarBox:where(.kui-variant-soft,.kui-variant-ghost,.kui-variant-outline,.kui-variant-surface):where(:focus-within) {
-  outline: 2px solid var(--v-focus-color, var(--focus-8));
+  outline: var(--focus-ring-width) solid var(--v-focus-color, var(--focus-8));
   outline-offset: -1px;
 }
 .kui-ChatbarBox:where(.kui-variant-outline, .kui-variant-surface) {
@@ -21696,7 +21696,7 @@
     border: 1px solid CanvasText;
   }
   .kui-ChatbarBox:where(.kui-variant-raised):where(:focus-within) {
-    outline: 2px solid Highlight;
+    outline: var(--focus-ring-width) solid Highlight;
     outline-offset: -1px;
   }
   .kui-ChatbarRoot:where([data-disabled]) .kui-ChatbarBox {
@@ -21854,7 +21854,7 @@
   outline: none;
 }
 .kui-MessageScrollerViewport:where(:focus-visible) {
-  outline: 2px solid var(--focus-8);
+  outline: var(--focus-ring-width) solid var(--focus-8);
   outline-offset: -2px;
 }
 .kui-MessageScrollerContent {

package/tokens.css

@@ -3370,8 +3370,8 @@
   --component-gap-ghost-2: calc(var(--space-2) * 1.5);
   --component-gap-ghost-3: calc(var(--space-2) * 1.5);
   --component-gap-ghost-4: var(--space-3);
-  --focus-outline-width: 2px;
-  --focus-outline-offset: 2px;
+  --focus-outline-width: var(--focus-ring-width);
+  --focus-outline-offset: var(--focus-ring-offset);
   --focus-outline-offset-inset: -1px;
   --padding-ratio-horizontal: 1.5;
   --color-page: white;