@womp/kookie-ui 0.27.1 → 0.28.1

package/components.css

@@ -4601,7 +4601,7 @@
   --base-menu-font-size: var(--font-size-1);
   --base-menu-line-height: var(--line-height-1);
   --base-menu-letter-spacing: var(--letter-spacing-1);
-  border-radius: var(--radius-surface-1);
+  border-radius: var(--radius-panel-1);
 }
 .kui-BaseMenuContent:where(.kui-r-size-2) {
   --base-menu-content-padding: var(--panel-p-2);
@@ -4615,7 +4615,7 @@
   --base-menu-font-size: var(--font-size-2);
   --base-menu-line-height: var(--line-height-2);
   --base-menu-letter-spacing: var(--letter-spacing-2);
-  border-radius: var(--radius-surface-2);
+  border-radius: var(--radius-panel-2);
 }
 .kui-BaseMenuContent:where(.kui-r-size-3) {
   --base-menu-content-padding: var(--panel-p-3);
@@ -4629,7 +4629,7 @@
   --base-menu-font-size: var(--font-size-3);
   --base-menu-line-height: var(--line-height-3);
   --base-menu-letter-spacing: var(--letter-spacing-3);
-  border-radius: var(--radius-surface-3);
+  border-radius: var(--radius-panel-3);
 }
 .kui-BaseMenuContent:where(.kui-r-size-4) {
   --base-menu-content-padding: var(--panel-p-4);
@@ -4643,7 +4643,7 @@
   --base-menu-font-size: var(--font-size-4);
   --base-menu-line-height: var(--line-height-4);
   --base-menu-letter-spacing: var(--letter-spacing-4);
-  border-radius: var(--radius-surface-4);
+  border-radius: var(--radius-panel-4);
 }
 @media (min-width: 520px) {
   .kui-BaseMenuContent:where(.xs\:kui-r-size-1) {
@@ -4658,7 +4658,7 @@
     --base-menu-font-size: var(--font-size-1);
     --base-menu-line-height: var(--line-height-1);
     --base-menu-letter-spacing: var(--letter-spacing-1);
-    border-radius: var(--radius-surface-1);
+    border-radius: var(--radius-panel-1);
   }
   .kui-BaseMenuContent:where(.xs\:kui-r-size-2) {
     --base-menu-content-padding: var(--panel-p-2);
@@ -4672,7 +4672,7 @@
     --base-menu-font-size: var(--font-size-2);
     --base-menu-line-height: var(--line-height-2);
     --base-menu-letter-spacing: var(--letter-spacing-2);
-    border-radius: var(--radius-surface-2);
+    border-radius: var(--radius-panel-2);
   }
   .kui-BaseMenuContent:where(.xs\:kui-r-size-3) {
     --base-menu-content-padding: var(--panel-p-3);
@@ -4686,7 +4686,7 @@
     --base-menu-font-size: var(--font-size-3);
     --base-menu-line-height: var(--line-height-3);
     --base-menu-letter-spacing: var(--letter-spacing-3);
-    border-radius: var(--radius-surface-3);
+    border-radius: var(--radius-panel-3);
   }
   .kui-BaseMenuContent:where(.xs\:kui-r-size-4) {
     --base-menu-content-padding: var(--panel-p-4);
@@ -4700,7 +4700,7 @@
     --base-menu-font-size: var(--font-size-4);
     --base-menu-line-height: var(--line-height-4);
     --base-menu-letter-spacing: var(--letter-spacing-4);
-    border-radius: var(--radius-surface-4);
+    border-radius: var(--radius-panel-4);
   }
 }
 @media (min-width: 768px) {
@@ -4716,7 +4716,7 @@
     --base-menu-font-size: var(--font-size-1);
     --base-menu-line-height: var(--line-height-1);
     --base-menu-letter-spacing: var(--letter-spacing-1);
-    border-radius: var(--radius-surface-1);
+    border-radius: var(--radius-panel-1);
   }
   .kui-BaseMenuContent:where(.sm\:kui-r-size-2) {
     --base-menu-content-padding: var(--panel-p-2);
@@ -4730,7 +4730,7 @@
     --base-menu-font-size: var(--font-size-2);
     --base-menu-line-height: var(--line-height-2);
     --base-menu-letter-spacing: var(--letter-spacing-2);
-    border-radius: var(--radius-surface-2);
+    border-radius: var(--radius-panel-2);
   }
   .kui-BaseMenuContent:where(.sm\:kui-r-size-3) {
     --base-menu-content-padding: var(--panel-p-3);
@@ -4744,7 +4744,7 @@
     --base-menu-font-size: var(--font-size-3);
     --base-menu-line-height: var(--line-height-3);
     --base-menu-letter-spacing: var(--letter-spacing-3);
-    border-radius: var(--radius-surface-3);
+    border-radius: var(--radius-panel-3);
   }
   .kui-BaseMenuContent:where(.sm\:kui-r-size-4) {
     --base-menu-content-padding: var(--panel-p-4);
@@ -4758,7 +4758,7 @@
     --base-menu-font-size: var(--font-size-4);
     --base-menu-line-height: var(--line-height-4);
     --base-menu-letter-spacing: var(--letter-spacing-4);
-    border-radius: var(--radius-surface-4);
+    border-radius: var(--radius-panel-4);
   }
 }
 @media (min-width: 1024px) {
@@ -4774,7 +4774,7 @@
     --base-menu-font-size: var(--font-size-1);
     --base-menu-line-height: var(--line-height-1);
     --base-menu-letter-spacing: var(--letter-spacing-1);
-    border-radius: var(--radius-surface-1);
+    border-radius: var(--radius-panel-1);
   }
   .kui-BaseMenuContent:where(.md\:kui-r-size-2) {
     --base-menu-content-padding: var(--panel-p-2);
@@ -4788,7 +4788,7 @@
     --base-menu-font-size: var(--font-size-2);
     --base-menu-line-height: var(--line-height-2);
     --base-menu-letter-spacing: var(--letter-spacing-2);
-    border-radius: var(--radius-surface-2);
+    border-radius: var(--radius-panel-2);
   }
   .kui-BaseMenuContent:where(.md\:kui-r-size-3) {
     --base-menu-content-padding: var(--panel-p-3);
@@ -4802,7 +4802,7 @@
     --base-menu-font-size: var(--font-size-3);
     --base-menu-line-height: var(--line-height-3);
     --base-menu-letter-spacing: var(--letter-spacing-3);
-    border-radius: var(--radius-surface-3);
+    border-radius: var(--radius-panel-3);
   }
   .kui-BaseMenuContent:where(.md\:kui-r-size-4) {
     --base-menu-content-padding: var(--panel-p-4);
@@ -4816,7 +4816,7 @@
     --base-menu-font-size: var(--font-size-4);
     --base-menu-line-height: var(--line-height-4);
     --base-menu-letter-spacing: var(--letter-spacing-4);
-    border-radius: var(--radius-surface-4);
+    border-radius: var(--radius-panel-4);
   }
 }
 @media (min-width: 1280px) {
@@ -4832,7 +4832,7 @@
     --base-menu-font-size: var(--font-size-1);
     --base-menu-line-height: var(--line-height-1);
     --base-menu-letter-spacing: var(--letter-spacing-1);
-    border-radius: var(--radius-surface-1);
+    border-radius: var(--radius-panel-1);
   }
   .kui-BaseMenuContent:where(.lg\:kui-r-size-2) {
     --base-menu-content-padding: var(--panel-p-2);
@@ -4846,7 +4846,7 @@
     --base-menu-font-size: var(--font-size-2);
     --base-menu-line-height: var(--line-height-2);
     --base-menu-letter-spacing: var(--letter-spacing-2);
-    border-radius: var(--radius-surface-2);
+    border-radius: var(--radius-panel-2);
   }
   .kui-BaseMenuContent:where(.lg\:kui-r-size-3) {
     --base-menu-content-padding: var(--panel-p-3);
@@ -4860,7 +4860,7 @@
     --base-menu-font-size: var(--font-size-3);
     --base-menu-line-height: var(--line-height-3);
     --base-menu-letter-spacing: var(--letter-spacing-3);
-    border-radius: var(--radius-surface-3);
+    border-radius: var(--radius-panel-3);
   }
   .kui-BaseMenuContent:where(.lg\:kui-r-size-4) {
     --base-menu-content-padding: var(--panel-p-4);
@@ -4874,7 +4874,7 @@
     --base-menu-font-size: var(--font-size-4);
     --base-menu-line-height: var(--line-height-4);
     --base-menu-letter-spacing: var(--letter-spacing-4);
-    border-radius: var(--radius-surface-4);
+    border-radius: var(--radius-panel-4);
   }
 }
 @media (min-width: 1640px) {
@@ -4890,7 +4890,7 @@
     --base-menu-font-size: var(--font-size-1);
     --base-menu-line-height: var(--line-height-1);
     --base-menu-letter-spacing: var(--letter-spacing-1);
-    border-radius: var(--radius-surface-1);
+    border-radius: var(--radius-panel-1);
   }
   .kui-BaseMenuContent:where(.xl\:kui-r-size-2) {
     --base-menu-content-padding: var(--panel-p-2);
@@ -4904,7 +4904,7 @@
     --base-menu-font-size: var(--font-size-2);
     --base-menu-line-height: var(--line-height-2);
     --base-menu-letter-spacing: var(--letter-spacing-2);
-    border-radius: var(--radius-surface-2);
+    border-radius: var(--radius-panel-2);
   }
   .kui-BaseMenuContent:where(.xl\:kui-r-size-3) {
     --base-menu-content-padding: var(--panel-p-3);
@@ -4918,7 +4918,7 @@
     --base-menu-font-size: var(--font-size-3);
     --base-menu-line-height: var(--line-height-3);
     --base-menu-letter-spacing: var(--letter-spacing-3);
-    border-radius: var(--radius-surface-3);
+    border-radius: var(--radius-panel-3);
   }
   .kui-BaseMenuContent:where(.xl\:kui-r-size-4) {
     --base-menu-content-padding: var(--panel-p-4);
@@ -4932,7 +4932,7 @@
     --base-menu-font-size: var(--font-size-4);
     --base-menu-line-height: var(--line-height-4);
     --base-menu-letter-spacing: var(--letter-spacing-4);
-    border-radius: var(--radius-surface-4);
+    border-radius: var(--radius-panel-4);
   }
 }
 .kui-BaseMenuItem:where([data-accent-color]) {
@@ -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.27.1",
+  "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/_internal/base-menu.css

@@ -208,7 +208,7 @@
       --base-menu-font-size: var(--font-size-1);
       --base-menu-line-height: var(--line-height-1);
       --base-menu-letter-spacing: var(--letter-spacing-1);
-      border-radius: var(--radius-surface-1);
+      border-radius: var(--radius-panel-1);
     }
 
     &:where(.kui-r-size-2) {
@@ -223,7 +223,7 @@
       --base-menu-font-size: var(--font-size-2);
       --base-menu-line-height: var(--line-height-2);
       --base-menu-letter-spacing: var(--letter-spacing-2);
-      border-radius: var(--radius-surface-2);
+      border-radius: var(--radius-panel-2);
     }
 
     &:where(.kui-r-size-3) {
@@ -238,7 +238,7 @@
       --base-menu-font-size: var(--font-size-3);
       --base-menu-line-height: var(--line-height-3);
       --base-menu-letter-spacing: var(--letter-spacing-3);
-      border-radius: var(--radius-surface-3);
+      border-radius: var(--radius-panel-3);
     }
 
     &:where(.kui-r-size-4) {
@@ -253,7 +253,7 @@
       --base-menu-font-size: var(--font-size-4);
       --base-menu-line-height: var(--line-height-4);
       --base-menu-letter-spacing: var(--letter-spacing-4);
-      border-radius: var(--radius-surface-4);
+      border-radius: var(--radius-panel-4);
     }
   }
 }

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