@womp/kookie-ui 0.28.0 → 0.28.1

package/components.css

@@ -10703,6 +10703,9 @@
       -ms-flex: 1;
           flex: 1;
 }
+.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;
@@ -10728,6 +10731,9 @@
       -ms-flex: 1;
           flex: 1;
 }
+:where(.kui-ShellScroll) + .kui-SidebarFooter:where(.kui-SidebarFooter--container:not([data-float])) {
+  padding-top: 0;
+}
 .kui-SidebarHeader :where(.kui-SidebarMenuButton),
 .kui-SidebarFooter :where(.kui-SidebarMenuButton) {
   display: -webkit-box;
@@ -10831,22 +10837,22 @@
   --sidebar-item-height: var(--control-height-3);
 }
 .kui-ShellPaneChrome:where(.kui-r-size-1) {
-  --sidebar-base-padding: var(--surface-p-1);
+  --sidebar-base-padding: var(--panel-p-1);
 }
 .kui-ShellPaneChrome:where(.kui-r-size-2) {
-  --sidebar-base-padding: var(--surface-p-2);
+  --sidebar-base-padding: var(--panel-p-2);
 }
 .kui-ShellPaneChrome:where(.kui-r-size-3) {
-  --sidebar-base-padding: var(--surface-p-3);
+  --sidebar-base-padding: var(--panel-p-3);
 }
 .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.kui-r-size-1) {
-  --base-menu-content-padding: var(--surface-p-1);
+  --base-menu-content-padding: var(--panel-p-1);
 }
 .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.kui-r-size-2) {
-  --base-menu-content-padding: var(--surface-p-2);
+  --base-menu-content-padding: var(--panel-p-2);
 }
 .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.kui-r-size-3) {
-  --base-menu-content-padding: var(--surface-p-3);
+  --base-menu-content-padding: var(--panel-p-3);
 }
 @media (min-width: 520px) {
   .kui-SidebarHeader:where(.xs\:kui-r-size-1),
@@ -10910,22 +10916,22 @@
     --sidebar-item-height: var(--control-height-3);
   }
   .kui-ShellPaneChrome:where(.xs\:kui-r-size-1) {
-    --sidebar-base-padding: var(--surface-p-1);
+    --sidebar-base-padding: var(--panel-p-1);
   }
   .kui-ShellPaneChrome:where(.xs\:kui-r-size-2) {
-    --sidebar-base-padding: var(--surface-p-2);
+    --sidebar-base-padding: var(--panel-p-2);
   }
   .kui-ShellPaneChrome:where(.xs\:kui-r-size-3) {
-    --sidebar-base-padding: var(--surface-p-3);
+    --sidebar-base-padding: var(--panel-p-3);
   }
   .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.xs\:kui-r-size-1) {
-    --base-menu-content-padding: var(--surface-p-1);
+    --base-menu-content-padding: var(--panel-p-1);
   }
   .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.xs\:kui-r-size-2) {
-    --base-menu-content-padding: var(--surface-p-2);
+    --base-menu-content-padding: var(--panel-p-2);
   }
   .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.xs\:kui-r-size-3) {
-    --base-menu-content-padding: var(--surface-p-3);
+    --base-menu-content-padding: var(--panel-p-3);
   }
 }
 @media (min-width: 768px) {
@@ -10990,22 +10996,22 @@
     --sidebar-item-height: var(--control-height-3);
   }
   .kui-ShellPaneChrome:where(.sm\:kui-r-size-1) {
-    --sidebar-base-padding: var(--surface-p-1);
+    --sidebar-base-padding: var(--panel-p-1);
   }
   .kui-ShellPaneChrome:where(.sm\:kui-r-size-2) {
-    --sidebar-base-padding: var(--surface-p-2);
+    --sidebar-base-padding: var(--panel-p-2);
   }
   .kui-ShellPaneChrome:where(.sm\:kui-r-size-3) {
-    --sidebar-base-padding: var(--surface-p-3);
+    --sidebar-base-padding: var(--panel-p-3);
   }
   .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.sm\:kui-r-size-1) {
-    --base-menu-content-padding: var(--surface-p-1);
+    --base-menu-content-padding: var(--panel-p-1);
   }
   .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.sm\:kui-r-size-2) {
-    --base-menu-content-padding: var(--surface-p-2);
+    --base-menu-content-padding: var(--panel-p-2);
   }
   .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.sm\:kui-r-size-3) {
-    --base-menu-content-padding: var(--surface-p-3);
+    --base-menu-content-padding: var(--panel-p-3);
   }
 }
 @media (min-width: 1024px) {
@@ -11070,22 +11076,22 @@
     --sidebar-item-height: var(--control-height-3);
   }
   .kui-ShellPaneChrome:where(.md\:kui-r-size-1) {
-    --sidebar-base-padding: var(--surface-p-1);
+    --sidebar-base-padding: var(--panel-p-1);
   }
   .kui-ShellPaneChrome:where(.md\:kui-r-size-2) {
-    --sidebar-base-padding: var(--surface-p-2);
+    --sidebar-base-padding: var(--panel-p-2);
   }
   .kui-ShellPaneChrome:where(.md\:kui-r-size-3) {
-    --sidebar-base-padding: var(--surface-p-3);
+    --sidebar-base-padding: var(--panel-p-3);
   }
   .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.md\:kui-r-size-1) {
-    --base-menu-content-padding: var(--surface-p-1);
+    --base-menu-content-padding: var(--panel-p-1);
   }
   .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.md\:kui-r-size-2) {
-    --base-menu-content-padding: var(--surface-p-2);
+    --base-menu-content-padding: var(--panel-p-2);
   }
   .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.md\:kui-r-size-3) {
-    --base-menu-content-padding: var(--surface-p-3);
+    --base-menu-content-padding: var(--panel-p-3);
   }
 }
 @media (min-width: 1280px) {
@@ -11150,22 +11156,22 @@
     --sidebar-item-height: var(--control-height-3);
   }
   .kui-ShellPaneChrome:where(.lg\:kui-r-size-1) {
-    --sidebar-base-padding: var(--surface-p-1);
+    --sidebar-base-padding: var(--panel-p-1);
   }
   .kui-ShellPaneChrome:where(.lg\:kui-r-size-2) {
-    --sidebar-base-padding: var(--surface-p-2);
+    --sidebar-base-padding: var(--panel-p-2);
   }
   .kui-ShellPaneChrome:where(.lg\:kui-r-size-3) {
-    --sidebar-base-padding: var(--surface-p-3);
+    --sidebar-base-padding: var(--panel-p-3);
   }
   .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.lg\:kui-r-size-1) {
-    --base-menu-content-padding: var(--surface-p-1);
+    --base-menu-content-padding: var(--panel-p-1);
   }
   .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.lg\:kui-r-size-2) {
-    --base-menu-content-padding: var(--surface-p-2);
+    --base-menu-content-padding: var(--panel-p-2);
   }
   .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.lg\:kui-r-size-3) {
-    --base-menu-content-padding: var(--surface-p-3);
+    --base-menu-content-padding: var(--panel-p-3);
   }
 }
 @media (min-width: 1640px) {
@@ -11230,22 +11236,22 @@
     --sidebar-item-height: var(--control-height-3);
   }
   .kui-ShellPaneChrome:where(.xl\:kui-r-size-1) {
-    --sidebar-base-padding: var(--surface-p-1);
+    --sidebar-base-padding: var(--panel-p-1);
   }
   .kui-ShellPaneChrome:where(.xl\:kui-r-size-2) {
-    --sidebar-base-padding: var(--surface-p-2);
+    --sidebar-base-padding: var(--panel-p-2);
   }
   .kui-ShellPaneChrome:where(.xl\:kui-r-size-3) {
-    --sidebar-base-padding: var(--surface-p-3);
+    --sidebar-base-padding: var(--panel-p-3);
   }
   .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.xl\:kui-r-size-1) {
-    --base-menu-content-padding: var(--surface-p-1);
+    --base-menu-content-padding: var(--panel-p-1);
   }
   .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.xl\:kui-r-size-2) {
-    --base-menu-content-padding: var(--surface-p-2);
+    --base-menu-content-padding: var(--panel-p-2);
   }
   .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.xl\:kui-r-size-3) {
-    --base-menu-content-padding: var(--surface-p-3);
+    --base-menu-content-padding: var(--panel-p-3);
   }
 }
 :is(.kui-SidebarHeader:where(.kui-menu-variant-soft),.kui-SidebarContent:where(.kui-menu-variant-soft),.kui-SidebarFooter:where(.kui-menu-variant-soft)) :where(.kui-SidebarMenuSubTrigger[data-state='open']) {
@@ -11825,7 +11831,7 @@
 .kui-ShellBottomContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-1)),
 .kui-ShellContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-1)) {
   --kui-pane-row-start: var(--control-height-1);
-  --kui-pane-pad-start: var(--surface-p-1);
+  --kui-pane-pad-start: var(--panel-p-1);
 }
 .kui-ShellRailContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-2)),
 .kui-ShellPanelContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-2)),
@@ -11834,7 +11840,7 @@
 .kui-ShellBottomContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-2)),
 .kui-ShellContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-2)) {
   --kui-pane-row-start: var(--control-height-2);
-  --kui-pane-pad-start: var(--surface-p-2);
+  --kui-pane-pad-start: var(--panel-p-2);
 }
 .kui-ShellRailContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-3)),
 .kui-ShellPanelContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-3)),
@@ -11843,7 +11849,7 @@
 .kui-ShellBottomContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-3)),
 .kui-ShellContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-3)) {
   --kui-pane-row-start: var(--control-height-3);
-  --kui-pane-pad-start: var(--surface-p-3);
+  --kui-pane-pad-start: var(--panel-p-3);
 }
 .kui-ShellRailContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-1)),
 .kui-ShellPanelContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-1)),
@@ -11852,7 +11858,7 @@
 .kui-ShellBottomContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-1)),
 .kui-ShellContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-1)) {
   --kui-pane-row-end: var(--control-height-1);
-  --kui-pane-pad-end: var(--surface-p-1);
+  --kui-pane-pad-end: var(--panel-p-1);
 }
 .kui-ShellRailContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-2)),
 .kui-ShellPanelContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-2)),
@@ -11861,7 +11867,7 @@
 .kui-ShellBottomContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-2)),
 .kui-ShellContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-2)) {
   --kui-pane-row-end: var(--control-height-2);
-  --kui-pane-pad-end: var(--surface-p-2);
+  --kui-pane-pad-end: var(--panel-p-2);
 }
 .kui-ShellRailContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-3)),
 .kui-ShellPanelContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-3)),
@@ -11870,7 +11876,7 @@
 .kui-ShellBottomContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-3)),
 .kui-ShellContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-3)) {
   --kui-pane-row-end: var(--control-height-3);
-  --kui-pane-pad-end: var(--surface-p-3);
+  --kui-pane-pad-end: var(--panel-p-3);
 }
 .kui-ShellRailContent:has(> .kui-ShellPaneHeader[data-float] > .kui-Toolbar:where(.kui-r-size-1)),
 .kui-ShellPanelContent:has(> .kui-ShellPaneHeader[data-float] > .kui-Toolbar:where(.kui-r-size-1)),

package/package.json

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

@@ -305,7 +305,7 @@
 
 /*
  * How tall the floating row is: one control row plus the row's padding on both sides, worked
- * out in CSS so the first paint is right. The padding is the pane's surface padding at the
+ * out in CSS so the first paint is right. The padding is the pane's panel padding at the
  * Shell's index, the same the row itself pads by. A Toolbar in the row publishes its own control
  * height as the band (one step above the Shell's when it states no size).
  */
@@ -316,7 +316,7 @@
 .kui-ShellBottomContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-1)),
 .kui-ShellContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-1)) {
   --kui-pane-row-start: var(--control-height-1);
-  --kui-pane-pad-start: var(--surface-p-1);
+  --kui-pane-pad-start: var(--panel-p-1);
 }
 .kui-ShellRailContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-2)),
 .kui-ShellPanelContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-2)),
@@ -325,7 +325,7 @@
 .kui-ShellBottomContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-2)),
 .kui-ShellContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-2)) {
   --kui-pane-row-start: var(--control-height-2);
-  --kui-pane-pad-start: var(--surface-p-2);
+  --kui-pane-pad-start: var(--panel-p-2);
 }
 .kui-ShellRailContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-3)),
 .kui-ShellPanelContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-3)),
@@ -334,7 +334,7 @@
 .kui-ShellBottomContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-3)),
 .kui-ShellContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-3)) {
   --kui-pane-row-start: var(--control-height-3);
-  --kui-pane-pad-start: var(--surface-p-3);
+  --kui-pane-pad-start: var(--panel-p-3);
 }
 .kui-ShellRailContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-1)),
 .kui-ShellPanelContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-1)),
@@ -343,7 +343,7 @@
 .kui-ShellBottomContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-1)),
 .kui-ShellContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-1)) {
   --kui-pane-row-end: var(--control-height-1);
-  --kui-pane-pad-end: var(--surface-p-1);
+  --kui-pane-pad-end: var(--panel-p-1);
 }
 .kui-ShellRailContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-2)),
 .kui-ShellPanelContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-2)),
@@ -352,7 +352,7 @@
 .kui-ShellBottomContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-2)),
 .kui-ShellContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-2)) {
   --kui-pane-row-end: var(--control-height-2);
-  --kui-pane-pad-end: var(--surface-p-2);
+  --kui-pane-pad-end: var(--panel-p-2);
 }
 .kui-ShellRailContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-3)),
 .kui-ShellPanelContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-3)),
@@ -361,7 +361,7 @@
 .kui-ShellBottomContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-3)),
 .kui-ShellContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-3)) {
   --kui-pane-row-end: var(--control-height-3);
-  --kui-pane-pad-end: var(--surface-p-3);
+  --kui-pane-pad-end: var(--panel-p-3);
 }
 .kui-ShellRailContent:has(> .kui-ShellPaneHeader[data-float] > .kui-Toolbar:where(.kui-r-size-1)),
 .kui-ShellPanelContent:has(> .kui-ShellPaneHeader[data-float] > .kui-Toolbar:where(.kui-r-size-1)),

package/src/components/sidebar.css

@@ -344,6 +344,12 @@
   }
 }
 
+/* A header or footer beside the pane's list shares one inset with it: the list already pads
+   by the same amount, so the row drops its padding on that side instead of doubling it. */
+.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;
@@ -363,6 +369,11 @@
   }
 }
 
+/* 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;
+}
+
 /* Header/Footer Menu Button Support */
 .kui-SidebarHeader :where(.kui-SidebarMenuButton),
 .kui-SidebarFooter :where(.kui-SidebarMenuButton) {
@@ -416,18 +427,20 @@
      TextField of size N, with the row family's pill padding, gap and icon box. Content is a
      BaseMenuContent, so it takes every other size value from base-menu.css. Header and
      Footer are not, so they restate base-menu's values here; keep the two in step. */
-  /* A Shell pane is a surface: its header, footer, search and scrolling list all pad by the
-     surface padding at the Shell's index, so every row and every control in the pane starts on
-     one line. The Rail is left out: its tiles keep their own tight padding (above). */
+  /* A Shell pane's header, footer, search and scrolling list all pad by the panel padding at
+     the Shell's index, so every row and every control in the pane starts on one line. Panel,
+     not surface: a pane is chrome that holds rows, like a menu, and a card's 24px around a
+     32px control row read as padded twice (docs/LOG.md, 2026-10-27). The Rail is left out:
+     its tiles keep their own tight padding (above). */
   .kui-ShellPaneChrome {
     &:where(.kui-r-size-1) {
-      --sidebar-base-padding: var(--surface-p-1);
+      --sidebar-base-padding: var(--panel-p-1);
     }
     &:where(.kui-r-size-2) {
-      --sidebar-base-padding: var(--surface-p-2);
+      --sidebar-base-padding: var(--panel-p-2);
     }
     &:where(.kui-r-size-3) {
-      --sidebar-base-padding: var(--surface-p-3);
+      --sidebar-base-padding: var(--panel-p-3);
     }
   }
 
@@ -435,13 +448,13 @@
   /* stylelint-disable selector-max-specificity */
   .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *) {
     &:where(.kui-r-size-1) {
-      --base-menu-content-padding: var(--surface-p-1);
+      --base-menu-content-padding: var(--panel-p-1);
     }
     &:where(.kui-r-size-2) {
-      --base-menu-content-padding: var(--surface-p-2);
+      --base-menu-content-padding: var(--panel-p-2);
     }
     &:where(.kui-r-size-3) {
-      --base-menu-content-padding: var(--surface-p-3);
+      --base-menu-content-padding: var(--panel-p-3);
     }
   }
   /* stylelint-enable selector-max-specificity */

package/styles.css

@@ -15846,6 +15846,9 @@
       -ms-flex: 1;
           flex: 1;
 }
+.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;
@@ -15871,6 +15874,9 @@
       -ms-flex: 1;
           flex: 1;
 }
+:where(.kui-ShellScroll) + .kui-SidebarFooter:where(.kui-SidebarFooter--container:not([data-float])) {
+  padding-top: 0;
+}
 .kui-SidebarHeader :where(.kui-SidebarMenuButton),
 .kui-SidebarFooter :where(.kui-SidebarMenuButton) {
   display: -webkit-box;
@@ -15974,22 +15980,22 @@
   --sidebar-item-height: var(--control-height-3);
 }
 .kui-ShellPaneChrome:where(.kui-r-size-1) {
-  --sidebar-base-padding: var(--surface-p-1);
+  --sidebar-base-padding: var(--panel-p-1);
 }
 .kui-ShellPaneChrome:where(.kui-r-size-2) {
-  --sidebar-base-padding: var(--surface-p-2);
+  --sidebar-base-padding: var(--panel-p-2);
 }
 .kui-ShellPaneChrome:where(.kui-r-size-3) {
-  --sidebar-base-padding: var(--surface-p-3);
+  --sidebar-base-padding: var(--panel-p-3);
 }
 .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.kui-r-size-1) {
-  --base-menu-content-padding: var(--surface-p-1);
+  --base-menu-content-padding: var(--panel-p-1);
 }
 .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.kui-r-size-2) {
-  --base-menu-content-padding: var(--surface-p-2);
+  --base-menu-content-padding: var(--panel-p-2);
 }
 .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.kui-r-size-3) {
-  --base-menu-content-padding: var(--surface-p-3);
+  --base-menu-content-padding: var(--panel-p-3);
 }
 @media (min-width: 520px) {
   .kui-SidebarHeader:where(.xs\:kui-r-size-1),
@@ -16053,22 +16059,22 @@
     --sidebar-item-height: var(--control-height-3);
   }
   .kui-ShellPaneChrome:where(.xs\:kui-r-size-1) {
-    --sidebar-base-padding: var(--surface-p-1);
+    --sidebar-base-padding: var(--panel-p-1);
   }
   .kui-ShellPaneChrome:where(.xs\:kui-r-size-2) {
-    --sidebar-base-padding: var(--surface-p-2);
+    --sidebar-base-padding: var(--panel-p-2);
   }
   .kui-ShellPaneChrome:where(.xs\:kui-r-size-3) {
-    --sidebar-base-padding: var(--surface-p-3);
+    --sidebar-base-padding: var(--panel-p-3);
   }
   .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.xs\:kui-r-size-1) {
-    --base-menu-content-padding: var(--surface-p-1);
+    --base-menu-content-padding: var(--panel-p-1);
   }
   .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.xs\:kui-r-size-2) {
-    --base-menu-content-padding: var(--surface-p-2);
+    --base-menu-content-padding: var(--panel-p-2);
   }
   .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.xs\:kui-r-size-3) {
-    --base-menu-content-padding: var(--surface-p-3);
+    --base-menu-content-padding: var(--panel-p-3);
   }
 }
 @media (min-width: 768px) {
@@ -16133,22 +16139,22 @@
     --sidebar-item-height: var(--control-height-3);
   }
   .kui-ShellPaneChrome:where(.sm\:kui-r-size-1) {
-    --sidebar-base-padding: var(--surface-p-1);
+    --sidebar-base-padding: var(--panel-p-1);
   }
   .kui-ShellPaneChrome:where(.sm\:kui-r-size-2) {
-    --sidebar-base-padding: var(--surface-p-2);
+    --sidebar-base-padding: var(--panel-p-2);
   }
   .kui-ShellPaneChrome:where(.sm\:kui-r-size-3) {
-    --sidebar-base-padding: var(--surface-p-3);
+    --sidebar-base-padding: var(--panel-p-3);
   }
   .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.sm\:kui-r-size-1) {
-    --base-menu-content-padding: var(--surface-p-1);
+    --base-menu-content-padding: var(--panel-p-1);
   }
   .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.sm\:kui-r-size-2) {
-    --base-menu-content-padding: var(--surface-p-2);
+    --base-menu-content-padding: var(--panel-p-2);
   }
   .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.sm\:kui-r-size-3) {
-    --base-menu-content-padding: var(--surface-p-3);
+    --base-menu-content-padding: var(--panel-p-3);
   }
 }
 @media (min-width: 1024px) {
@@ -16213,22 +16219,22 @@
     --sidebar-item-height: var(--control-height-3);
   }
   .kui-ShellPaneChrome:where(.md\:kui-r-size-1) {
-    --sidebar-base-padding: var(--surface-p-1);
+    --sidebar-base-padding: var(--panel-p-1);
   }
   .kui-ShellPaneChrome:where(.md\:kui-r-size-2) {
-    --sidebar-base-padding: var(--surface-p-2);
+    --sidebar-base-padding: var(--panel-p-2);
   }
   .kui-ShellPaneChrome:where(.md\:kui-r-size-3) {
-    --sidebar-base-padding: var(--surface-p-3);
+    --sidebar-base-padding: var(--panel-p-3);
   }
   .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.md\:kui-r-size-1) {
-    --base-menu-content-padding: var(--surface-p-1);
+    --base-menu-content-padding: var(--panel-p-1);
   }
   .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.md\:kui-r-size-2) {
-    --base-menu-content-padding: var(--surface-p-2);
+    --base-menu-content-padding: var(--panel-p-2);
   }
   .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.md\:kui-r-size-3) {
-    --base-menu-content-padding: var(--surface-p-3);
+    --base-menu-content-padding: var(--panel-p-3);
   }
 }
 @media (min-width: 1280px) {
@@ -16293,22 +16299,22 @@
     --sidebar-item-height: var(--control-height-3);
   }
   .kui-ShellPaneChrome:where(.lg\:kui-r-size-1) {
-    --sidebar-base-padding: var(--surface-p-1);
+    --sidebar-base-padding: var(--panel-p-1);
   }
   .kui-ShellPaneChrome:where(.lg\:kui-r-size-2) {
-    --sidebar-base-padding: var(--surface-p-2);
+    --sidebar-base-padding: var(--panel-p-2);
   }
   .kui-ShellPaneChrome:where(.lg\:kui-r-size-3) {
-    --sidebar-base-padding: var(--surface-p-3);
+    --sidebar-base-padding: var(--panel-p-3);
   }
   .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.lg\:kui-r-size-1) {
-    --base-menu-content-padding: var(--surface-p-1);
+    --base-menu-content-padding: var(--panel-p-1);
   }
   .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.lg\:kui-r-size-2) {
-    --base-menu-content-padding: var(--surface-p-2);
+    --base-menu-content-padding: var(--panel-p-2);
   }
   .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.lg\:kui-r-size-3) {
-    --base-menu-content-padding: var(--surface-p-3);
+    --base-menu-content-padding: var(--panel-p-3);
   }
 }
 @media (min-width: 1640px) {
@@ -16373,22 +16379,22 @@
     --sidebar-item-height: var(--control-height-3);
   }
   .kui-ShellPaneChrome:where(.xl\:kui-r-size-1) {
-    --sidebar-base-padding: var(--surface-p-1);
+    --sidebar-base-padding: var(--panel-p-1);
   }
   .kui-ShellPaneChrome:where(.xl\:kui-r-size-2) {
-    --sidebar-base-padding: var(--surface-p-2);
+    --sidebar-base-padding: var(--panel-p-2);
   }
   .kui-ShellPaneChrome:where(.xl\:kui-r-size-3) {
-    --sidebar-base-padding: var(--surface-p-3);
+    --sidebar-base-padding: var(--panel-p-3);
   }
   .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.xl\:kui-r-size-1) {
-    --base-menu-content-padding: var(--surface-p-1);
+    --base-menu-content-padding: var(--panel-p-1);
   }
   .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.xl\:kui-r-size-2) {
-    --base-menu-content-padding: var(--surface-p-2);
+    --base-menu-content-padding: var(--panel-p-2);
   }
   .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.xl\:kui-r-size-3) {
-    --base-menu-content-padding: var(--surface-p-3);
+    --base-menu-content-padding: var(--panel-p-3);
   }
 }
 :is(.kui-SidebarHeader:where(.kui-menu-variant-soft),.kui-SidebarContent:where(.kui-menu-variant-soft),.kui-SidebarFooter:where(.kui-menu-variant-soft)) :where(.kui-SidebarMenuSubTrigger[data-state='open']) {
@@ -16968,7 +16974,7 @@
 .kui-ShellBottomContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-1)),
 .kui-ShellContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-1)) {
   --kui-pane-row-start: var(--control-height-1);
-  --kui-pane-pad-start: var(--surface-p-1);
+  --kui-pane-pad-start: var(--panel-p-1);
 }
 .kui-ShellRailContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-2)),
 .kui-ShellPanelContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-2)),
@@ -16977,7 +16983,7 @@
 .kui-ShellBottomContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-2)),
 .kui-ShellContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-2)) {
   --kui-pane-row-start: var(--control-height-2);
-  --kui-pane-pad-start: var(--surface-p-2);
+  --kui-pane-pad-start: var(--panel-p-2);
 }
 .kui-ShellRailContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-3)),
 .kui-ShellPanelContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-3)),
@@ -16986,7 +16992,7 @@
 .kui-ShellBottomContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-3)),
 .kui-ShellContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-3)) {
   --kui-pane-row-start: var(--control-height-3);
-  --kui-pane-pad-start: var(--surface-p-3);
+  --kui-pane-pad-start: var(--panel-p-3);
 }
 .kui-ShellRailContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-1)),
 .kui-ShellPanelContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-1)),
@@ -16995,7 +17001,7 @@
 .kui-ShellBottomContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-1)),
 .kui-ShellContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-1)) {
   --kui-pane-row-end: var(--control-height-1);
-  --kui-pane-pad-end: var(--surface-p-1);
+  --kui-pane-pad-end: var(--panel-p-1);
 }
 .kui-ShellRailContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-2)),
 .kui-ShellPanelContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-2)),
@@ -17004,7 +17010,7 @@
 .kui-ShellBottomContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-2)),
 .kui-ShellContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-2)) {
   --kui-pane-row-end: var(--control-height-2);
-  --kui-pane-pad-end: var(--surface-p-2);
+  --kui-pane-pad-end: var(--panel-p-2);
 }
 .kui-ShellRailContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-3)),
 .kui-ShellPanelContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-3)),
@@ -17013,7 +17019,7 @@
 .kui-ShellBottomContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-3)),
 .kui-ShellContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-3)) {
   --kui-pane-row-end: var(--control-height-3);
-  --kui-pane-pad-end: var(--surface-p-3);
+  --kui-pane-pad-end: var(--panel-p-3);
 }
 .kui-ShellRailContent:has(> .kui-ShellPaneHeader[data-float] > .kui-Toolbar:where(.kui-r-size-1)),
 .kui-ShellPanelContent:has(> .kui-ShellPaneHeader[data-float] > .kui-Toolbar:where(.kui-r-size-1)),