@womp/kookie-ui 0.35.1 → 0.35.3

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]) {
@@ -10819,117 +10819,31 @@
   margin-top: 1px;
   margin-bottom: 1px;
 }
-:where(.kui-ShellRailContent :is(.kui-SidebarContent, .kui-ShellPaneHeader, .kui-ShellPaneFooter).kui-r-size-1) :where(.kui-SidebarMenuButton, .kui-SidebarMenuSubTrigger) {
+:where(.kui-ShellRailContent :is(.kui-SidebarContent, .kui-ShellPaneHeader, .kui-ShellPaneFooter):is(.kui-r-size-1, .kui-r-size-2)) :where(.kui-SidebarMenuButton, .kui-SidebarMenuSubTrigger) {
   padding-top: var(--space-2) !important;
   padding-bottom: var(--space-2) !important;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  gap: var(--space-2);
-  text-align: center;
-  font-size: var(--font-size-1);
-  line-height: var(--line-height-1);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-  min-width: 0;
-}
-:where(.kui-ShellRailContent :is(.kui-SidebarContent, .kui-ShellPaneHeader, .kui-ShellPaneFooter).kui-r-size-2) :where(.kui-SidebarMenuButton, .kui-SidebarMenuSubTrigger) {
-  padding-top: var(--space-2) !important;
-  padding-bottom: var(--space-2) !important;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  gap: var(--space-2);
-  text-align: center;
-  font-size: var(--font-size-1);
-  line-height: var(--line-height-1);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-  min-width: 0;
 }
 :where(.kui-ShellRailContent :is(.kui-SidebarContent, .kui-ShellPaneHeader, .kui-ShellPaneFooter).kui-r-size-3) :where(.kui-SidebarMenuButton, .kui-SidebarMenuSubTrigger) {
   padding-top: var(--space-3) !important;
   padding-bottom: var(--space-3) !important;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  gap: var(--space-2);
-  text-align: center;
-  font-size: var(--font-size-1);
-  line-height: var(--line-height-1);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-  min-width: 0;
 }
-:where(.kui-ShellRailContent :is(.kui-SidebarContent, .kui-ShellPaneHeader, .kui-ShellPaneFooter).kui-r-size-1) {
+:where(.kui-ShellRailContent :is(.kui-SidebarContent, .kui-ShellPaneHeader, .kui-ShellPaneFooter):is(.kui-r-size-1, .kui-r-size-2, .kui-r-size-3)) {
   --base-menu-item-padding-left: var(--space-2) !important;
   --base-menu-item-padding-right: var(--space-2) !important;
   --base-menu-item-padding-y: var(--space-3) !important;
 }
-:where(.kui-ShellRailContent :is(.kui-SidebarContent,.kui-ShellPaneHeader,.kui-ShellPaneFooter).kui-r-size-1):where(:not(:has(.kui-BaseMenuCheckboxItem,.kui-BaseMenuRadioItem))) {
-  --base-menu-item-padding-left: var(--space-2) !important;
-}
-:where(.kui-ShellRailContent :is(.kui-SidebarContent,.kui-ShellPaneHeader,.kui-ShellPaneFooter).kui-r-size-1):where(:has(.kui-BaseMenuCheckboxItem,.kui-BaseMenuRadioItem)) {
-  --base-menu-item-padding-left: var(--space-2) !important;
+:where(.kui-ShellRailContent :is(.kui-SidebarContent,.kui-ShellPaneHeader,.kui-ShellPaneFooter):is(.kui-r-size-1,.kui-r-size-2,.kui-r-size-3)) :where(.kui-SidebarMenuButton,.kui-SidebarMenuSubTrigger) {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  min-width: 0;
 }
-:where(.kui-ShellRailContent :is(.kui-SidebarContent,.kui-ShellPaneHeader,.kui-ShellPaneFooter).kui-r-size-1) :where(.kui-SidebarMenuButton,.kui-SidebarMenuSubTrigger) :where(svg) {
+:where(.kui-ShellRailContent :is(.kui-SidebarContent, .kui-ShellPaneHeader, .kui-ShellPaneFooter).kui-r-size-1) :where(.kui-SidebarMenuButton, .kui-SidebarMenuSubTrigger) :where(svg) {
   width: var(--content-icon-size-3);
   height: var(--content-icon-size-3);
 }
-:where(.kui-ShellRailContent :is(.kui-SidebarContent, .kui-ShellPaneHeader, .kui-ShellPaneFooter).kui-r-size-2) {
-  --base-menu-item-padding-left: var(--space-2) !important;
-  --base-menu-item-padding-right: var(--space-2) !important;
-  --base-menu-item-padding-y: var(--space-3) !important;
-}
-:where(.kui-ShellRailContent :is(.kui-SidebarContent,.kui-ShellPaneHeader,.kui-ShellPaneFooter).kui-r-size-2):where(:not(:has(.kui-BaseMenuCheckboxItem,.kui-BaseMenuRadioItem))) {
-  --base-menu-item-padding-left: var(--space-2) !important;
-}
-:where(.kui-ShellRailContent :is(.kui-SidebarContent,.kui-ShellPaneHeader,.kui-ShellPaneFooter).kui-r-size-2):where(:has(.kui-BaseMenuCheckboxItem,.kui-BaseMenuRadioItem)) {
-  --base-menu-item-padding-left: var(--space-2) !important;
-}
-:where(.kui-ShellRailContent :is(.kui-SidebarContent,.kui-ShellPaneHeader,.kui-ShellPaneFooter).kui-r-size-2) :where(.kui-SidebarMenuButton,.kui-SidebarMenuSubTrigger) :where(svg) {
-  width: var(--content-icon-size-4);
-  height: var(--content-icon-size-4);
-}
-:where(.kui-ShellRailContent :is(.kui-SidebarContent, .kui-ShellPaneHeader, .kui-ShellPaneFooter).kui-r-size-3) {
-  --base-menu-item-padding-left: var(--space-2) !important;
-  --base-menu-item-padding-right: var(--space-2) !important;
-  --base-menu-item-padding-y: var(--space-3) !important;
-}
-:where(.kui-ShellRailContent :is(.kui-SidebarContent,.kui-ShellPaneHeader,.kui-ShellPaneFooter).kui-r-size-3):where(:not(:has(.kui-BaseMenuCheckboxItem,.kui-BaseMenuRadioItem))) {
-  --base-menu-item-padding-left: var(--space-2) !important;
-}
-:where(.kui-ShellRailContent :is(.kui-SidebarContent,.kui-ShellPaneHeader,.kui-ShellPaneFooter).kui-r-size-3):where(:has(.kui-BaseMenuCheckboxItem,.kui-BaseMenuRadioItem)) {
-  --base-menu-item-padding-left: var(--space-2) !important;
-}
-:where(.kui-ShellRailContent :is(.kui-SidebarContent,.kui-ShellPaneHeader,.kui-ShellPaneFooter).kui-r-size-3) :where(.kui-SidebarMenuButton,.kui-SidebarMenuSubTrigger) :where(svg) {
+:where(.kui-ShellRailContent :is(.kui-SidebarContent, .kui-ShellPaneHeader, .kui-ShellPaneFooter):is(.kui-r-size-2, .kui-r-size-3)) :where(.kui-SidebarMenuButton, .kui-SidebarMenuSubTrigger) :where(svg) {
   width: var(--content-icon-size-4);
   height: var(--content-icon-size-4);
 }
@@ -11040,17 +10954,7 @@
 :where(.kui-ShellRailContent :is(.kui-SidebarContent, .kui-ShellPaneHeader, .kui-ShellPaneFooter).kui-menu-variant-soft .kui-SidebarMenuButton[data-active] .kui-SidebarMenuIconWrapper) {
   background-color: var(--accent-3);
 }
-:where(.kui-ShellRailContent .kui-SidebarMenuBadge),
-:where(.kui-ShellRailContent .kui-SidebarMenuShortcut),
-:where(.kui-ShellRailContent .kui-Chip),
-:where(.kui-ShellRailContent .kui-Kbd) {
-  display: none !important;
-}
-:where(.kui-ShellRailContent .kui-SidebarGroupLabel) {
-  display: none !important;
-}
-:where(.kui-ShellRailContent .kui-SidebarMenuSubTriggerIcon),
-:where(.kui-ShellRailContent .kui-BaseMenuSubTriggerIcon) {
+:where(.kui-ShellRailContent) :where(.kui-SidebarMenuBadge, .kui-SidebarMenuShortcut, .kui-Chip, .kui-Kbd, .kui-SidebarGroupLabel, .kui-SidebarMenuSubTriggerIcon, .kui-BaseMenuSubTriggerIcon) {
   display: none !important;
 }
 .kui-SidebarMenuLabel {
@@ -11059,7 +10963,8 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.kui-SidebarHeader:where(.kui-SidebarHeader--container) {
+.kui-SidebarHeader:where(.kui-SidebarHeader--container),
+.kui-SidebarFooter:where(.kui-SidebarFooter--container) {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -11074,12 +10979,12 @@
   padding: var(--sidebar-base-padding);
   min-height: var(--sidebar-item-height);
 }
-.kui-SidebarHeader:where(.kui-SidebarHeader--container) :where(.kui-SidebarMenuButton) {
+:is(.kui-SidebarHeader:where(.kui-SidebarHeader--container),.kui-SidebarFooter:where(.kui-SidebarFooter--container)) :where(.kui-SidebarMenuButton) {
   -webkit-box-flex: 1;
       -ms-flex: 1;
           flex: 1;
 }
-.kui-SidebarHeader:where(.kui-SidebarHeader--container) > :where(.kui-Toolbar) {
+:is(.kui-SidebarHeader:where(.kui-SidebarHeader--container),.kui-SidebarFooter:where(.kui-SidebarFooter--container)) > :where(.kui-Toolbar) {
   -webkit-box-flex: 1;
       -ms-flex: 1;
           flex: 1;
@@ -11087,31 +10992,6 @@
 .kui-SidebarHeader:where(.kui-SidebarHeader--container:not([data-float]):has(+ .kui-ShellScroll)) {
   padding-bottom: 0;
 }
-.kui-SidebarFooter:where(.kui-SidebarFooter--container) {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  gap: var(--space-3);
-  padding: var(--sidebar-base-padding);
-  min-height: var(--sidebar-item-height);
-}
-.kui-SidebarFooter:where(.kui-SidebarFooter--container) :where(.kui-SidebarMenuButton) {
-  -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
-}
-.kui-SidebarFooter:where(.kui-SidebarFooter--container) > :where(.kui-Toolbar) {
-  -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
-}
 :where(.kui-ShellScroll) + .kui-SidebarFooter:where(.kui-SidebarFooter--container:not([data-float])) {
   padding-top: 0;
 }
@@ -11149,7 +11029,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 {
@@ -11727,7 +11607,7 @@
 :where(.kui-ShellRailContent) .kui-SidebarSearch {
   padding: var(--space-3);
 }
-.kui-SidebarSearch--expanded .kui-SidebarSearchInputWrapper {
+:is(.kui-SidebarSearch--expanded, .kui-SidebarSearchPopover) .kui-SidebarSearchInputWrapper {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -11743,7 +11623,7 @@
   border-radius: var(--radius-2);
   padding: var(--space-2) var(--space-3);
 }
-.kui-SidebarSearch--expanded .kui-SidebarSearchInputWrapper:focus-within {
+:is(.kui-SidebarSearch--expanded, .kui-SidebarSearchPopover) .kui-SidebarSearchInputWrapper:focus-within {
   -webkit-box-shadow: inset 0 0 0 1px var(--accent-a7);
           box-shadow: inset 0 0 0 1px var(--accent-a7);
 }
@@ -11777,11 +11657,7 @@
   margin-top: 1px;
   margin-bottom: 1px;
 }
-:where(.kui-ShellRailContent.kui-r-size-1) :where(.kui-SidebarSearchTrigger) {
-  padding-top: var(--space-2) !important;
-  padding-bottom: var(--space-2) !important;
-}
-:where(.kui-ShellRailContent.kui-r-size-2) :where(.kui-SidebarSearchTrigger) {
+:where(.kui-ShellRailContent:is(.kui-r-size-1, .kui-r-size-2)) :where(.kui-SidebarSearchTrigger) {
   padding-top: var(--space-2) !important;
   padding-bottom: var(--space-2) !important;
 }
@@ -11793,11 +11669,7 @@
   width: var(--content-icon-size-2);
   height: var(--content-icon-size-2);
 }
-.kui-ShellRailContent.kui-r-size-2 .kui-SidebarSearchTrigger svg {
-  width: var(--content-icon-size-3);
-  height: var(--content-icon-size-3);
-}
-.kui-ShellRailContent.kui-r-size-3 .kui-SidebarSearchTrigger svg {
+.kui-ShellRailContent:is(.kui-r-size-2, .kui-r-size-3) .kui-SidebarSearchTrigger svg {
   width: var(--content-icon-size-3);
   height: var(--content-icon-size-3);
 }
@@ -11847,26 +11719,6 @@
   --base-menu-line-height: var(--line-height-2);
   --base-menu-letter-spacing: var(--letter-spacing-2);
 }
-.kui-SidebarSearchPopover .kui-SidebarSearchInputWrapper {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  gap: var(--space-3);
-  background-color: var(--neutral-a3);
-  border-radius: var(--radius-2);
-  padding: var(--space-2) var(--space-3);
-}
-.kui-SidebarSearchPopover .kui-SidebarSearchInputWrapper:focus-within {
-  -webkit-box-shadow: inset 0 0 0 1px var(--accent-a7);
-          box-shadow: inset 0 0 0 1px var(--accent-a7);
-}
 .kui-SidebarSearchPopover .kui-SidebarMenu {
   list-style: none;
   margin: 0;
@@ -11886,7 +11738,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] {
@@ -11894,12 +11746,6 @@
   color: var(--accent-a12);
   font-weight: var(--font-weight-medium);
 }
-.kui-SidebarSearchPopover .kui-SidebarMenuLabel {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
 .kui-SidebarSearchIcon {
   -ms-flex-negative: 0;
       flex-shrink: 0;
@@ -14712,7 +14558,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 +14613,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 +15515,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 +15591,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 +16351,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 +16396,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 +16554,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.3",
   "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 {