@womp/kookie-ui 0.35.2 → 0.35.3

package/components.css

@@ -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;
 }
@@ -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;
@@ -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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@womp/kookie-ui",
-  "version": "0.35.2",
+  "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/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;
@@ -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 {
@@ -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/styles.css

@@ -15965,117 +15965,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);
 }
@@ -16186,17 +16100,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 {
@@ -16205,7 +16109,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;
@@ -16220,12 +16125,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;
@@ -16233,31 +16138,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;
 }
@@ -16873,7 +16753,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;
@@ -16889,7 +16769,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);
 }
@@ -16923,11 +16803,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;
 }
@@ -16939,11 +16815,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);
 }
@@ -16993,26 +16865,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;
@@ -17040,12 +16892,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;