@womp/kookie-ui 0.35.1 → 0.35.3

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

@@ -49,12 +49,7 @@
 }
 
 /* Size-specific vertical padding for thin mode buttons */
-:where(.kui-ShellRailContent :is(.kui-SidebarContent, .kui-ShellPaneHeader, .kui-ShellPaneFooter).kui-r-size-1) :where(.kui-SidebarMenuButton, .kui-SidebarMenuSubTrigger) {
-  padding-top: var(--space-2) !important;
-  padding-bottom: var(--space-2) !important;
-}
-
-:where(.kui-ShellRailContent :is(.kui-SidebarContent, .kui-ShellPaneHeader, .kui-ShellPaneFooter).kui-r-size-2) :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;
 }
@@ -64,112 +59,34 @@
   padding-bottom: var(--space-3) !important;
 }
 
-/* Consolidated thin mode size blocks */
-:where(.kui-ShellRailContent :is(.kui-SidebarContent, .kui-ShellPaneHeader, .kui-ShellPaneFooter).kui-r-size-1) {
+/* Row padding and the label's clipping, the same at every size */
+:where(.kui-ShellRailContent :is(.kui-SidebarContent, .kui-ShellPaneHeader, .kui-ShellPaneFooter):is(.kui-r-size-1, .kui-r-size-2, .kui-r-size-3)) {
   /* Horizontal padding tokens to free space for text */
   --base-menu-item-padding-left: var(--space-2) !important;
   --base-menu-item-padding-right: var(--space-2) !important;
   /* Unify vertical padding via tokens (used by BaseMenuItem) */
   --base-menu-item-padding-y: var(--space-3) !important;
 
-  /* Override BaseMenu left padding resets */
-  &:where(:not(:has(.kui-BaseMenuCheckboxItem, .kui-BaseMenuRadioItem))) {
-    --base-menu-item-padding-left: var(--space-2) !important;
-  }
-  &:where(:has(.kui-BaseMenuCheckboxItem, .kui-BaseMenuRadioItem)) {
-    --base-menu-item-padding-left: var(--space-2) !important;
-  }
-
-  /* Button and subtrigger layout */
   :where(.kui-SidebarMenuButton, .kui-SidebarMenuSubTrigger) {
-    justify-content: center;
-    align-items: center;
-    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;
   }
-
-  /* Icon sizing */
-  /* stylelint-disable-next-line selector-max-type */
-  :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(:not(:has(.kui-BaseMenuCheckboxItem, .kui-BaseMenuRadioItem))) {
-    --base-menu-item-padding-left: var(--space-2) !important;
-  }
-  &:where(:has(.kui-BaseMenuCheckboxItem, .kui-BaseMenuRadioItem)) {
-    --base-menu-item-padding-left: var(--space-2) !important;
-  }
-
-  :where(.kui-SidebarMenuButton, .kui-SidebarMenuSubTrigger) {
-    justify-content: center;
-    align-items: center;
-    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;
-  }
-
-  /* stylelint-disable-next-line selector-max-type */
-  :where(.kui-SidebarMenuButton, .kui-SidebarMenuSubTrigger) :where(svg) {
-    width: var(--content-icon-size-4);
-    height: var(--content-icon-size-4);
-  }
+/* Icon size: the one line that differs by size */
+/* stylelint-disable-next-line selector-max-type */
+: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-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(:not(:has(.kui-BaseMenuCheckboxItem, .kui-BaseMenuRadioItem))) {
-    --base-menu-item-padding-left: var(--space-2) !important;
-  }
-  &:where(:has(.kui-BaseMenuCheckboxItem, .kui-BaseMenuRadioItem)) {
-    --base-menu-item-padding-left: var(--space-2) !important;
-  }
-
-  :where(.kui-SidebarMenuButton, .kui-SidebarMenuSubTrigger) {
-    justify-content: center;
-    align-items: center;
-    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;
-  }
-
-  /* stylelint-disable-next-line selector-max-type */
-  :where(.kui-SidebarMenuButton, .kui-SidebarMenuSubTrigger) :where(svg) {
-    width: var(--content-icon-size-4);
-    height: var(--content-icon-size-4);
-  }
+/* stylelint-disable-next-line selector-max-type */
+: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);
 }
 
 /* Ellipsis on root child content when using asChild (e.g., Next.js Link) */
@@ -292,21 +209,8 @@
   background-color: var(--accent-3);
 }
 
-/* Solid variant icon wrapper states in thin mode */
-: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;
-}
-
-/* Hide submenu chevrons in rail */
-:where(.kui-ShellRailContent .kui-SidebarMenuSubTriggerIcon),
-:where(.kui-ShellRailContent .kui-BaseMenuSubTriggerIcon) {
+/* A Rail shows the icon and its label only: no badge, shortcut, group label or chevron */
+:where(.kui-ShellRailContent) :where(.kui-SidebarMenuBadge, .kui-SidebarMenuShortcut, .kui-Chip, .kui-Kbd, .kui-SidebarGroupLabel, .kui-SidebarMenuSubTriggerIcon, .kui-BaseMenuSubTriggerIcon) {
   display: none !important;
 }
 
@@ -325,7 +229,8 @@
 /* Base variables and panel background support (mirrors Card pattern) */
 /* Centralized borders: apply a consistent inset border; avoid context coupling */
 /* Container Variants (variables only) *//* Header/Footer Layout Utilities */
-.kui-SidebarHeader:where(.kui-SidebarHeader--container) {
+.kui-SidebarHeader:where(.kui-SidebarHeader--container),
+.kui-SidebarFooter:where(.kui-SidebarFooter--container) {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -338,7 +243,7 @@
     flex: 1;
   }
 
-  /* A Toolbar fills the header, so its leading and trailing groups sit at the two ends. */
+  /* A Toolbar fills the row, so its leading and trailing groups sit at the two ends. */
   & > :where(.kui-Toolbar) {
     flex: 1;
   }
@@ -349,26 +254,6 @@
 .kui-SidebarHeader:where(.kui-SidebarHeader--container:not([data-float]):has(+ .kui-ShellScroll)) {
   padding-bottom: 0;
 }
-
-.kui-SidebarFooter:where(.kui-SidebarFooter--container) {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: var(--space-3);
-  padding: var(--sidebar-base-padding);
-  min-height: var(--sidebar-item-height);
-
-  /* Make MenuButtons expand to full width */
-  & :where(.kui-SidebarMenuButton) {
-    flex: 1;
-  }
-
-  /* A Toolbar fills the footer, so its leading and trailing groups sit at the two ends. */
-  & > :where(.kui-Toolbar) {
-    flex: 1;
-  }
-}
-
 /* Second half of the shared inset above; after the footer's own padding, at its specificity. */
 :where(.kui-ShellScroll) + .kui-SidebarFooter:where(.kui-SidebarFooter--container:not([data-float])) {
   padding-top: 0;
@@ -402,7 +287,7 @@
 
   /* Focus state */
   &:where(:focus-visible) {
-    outline: 2px solid var(--focus-8);
+    outline: var(--focus-ring-width) solid var(--focus-8);
     outline-offset: 2px;
   }
 
@@ -680,9 +565,9 @@
   padding: var(--space-3);
 }
 
-/* Expanded mode: inline input wrapper */
+/* The field's box, inline in a pane and inside the Rail's popover */
 /* stylelint-disable-next-line selector-max-specificity */
-.kui-SidebarSearch--expanded .kui-SidebarSearchInputWrapper {
+:is(.kui-SidebarSearch--expanded, .kui-SidebarSearchPopover) .kui-SidebarSearchInputWrapper {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -693,7 +578,7 @@
 }
 
 /* stylelint-disable-next-line selector-max-specificity */
-.kui-SidebarSearch--expanded .kui-SidebarSearchInputWrapper:focus-within {
+:is(.kui-SidebarSearch--expanded, .kui-SidebarSearchPopover) .kui-SidebarSearchInputWrapper:focus-within {
   box-shadow: inset 0 0 0 1px var(--accent-a7);
 }
 
@@ -720,12 +605,7 @@
 }
 
 /* Size-specific vertical padding for thin search trigger */
-: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;
 }
@@ -744,13 +624,7 @@
 }
 
 /* stylelint-disable-next-line selector-max-type, selector-max-specificity */
-.kui-ShellRailContent.kui-r-size-2 .kui-SidebarSearchTrigger svg {
-  width: var(--content-icon-size-3);
-  height: var(--content-icon-size-3);
-}
-
-/* stylelint-disable-next-line selector-max-type, selector-max-specificity */
-.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);
 }
@@ -812,23 +686,6 @@
   --base-menu-line-height: var(--line-height-2);
   --base-menu-letter-spacing: var(--letter-spacing-2);
 }
-
-/* stylelint-disable-next-line selector-max-specificity */
-.kui-SidebarSearchPopover .kui-SidebarSearchInputWrapper {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: var(--space-3);
-  background-color: var(--neutral-a3);
-  border-radius: var(--radius-2);
-  padding: var(--space-2) var(--space-3);
-}
-
-/* stylelint-disable-next-line selector-max-specificity */
-.kui-SidebarSearchPopover .kui-SidebarSearchInputWrapper:focus-within {
-  box-shadow: inset 0 0 0 1px var(--accent-a7);
-}
-
 /* Popover menu list reset */
 /* stylelint-disable-next-line selector-max-specificity */
 .kui-SidebarSearchPopover .kui-SidebarMenu {
@@ -860,7 +717,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;
 }
 
@@ -872,15 +729,6 @@
   font-weight: var(--font-weight-medium);
 }
 
-/* Popover menu label truncation */
-/* stylelint-disable-next-line selector-max-specificity */
-.kui-SidebarSearchPopover .kui-SidebarMenuLabel {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 /* Search icon */
 .kui-SidebarSearchIcon {
   flex-shrink: 0;

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 */