@womp/kookie-ui 0.13.3 → 0.14.1

package/src/components/sidebar.css

@@ -19,16 +19,21 @@
 */
 
 /* Rail Layout Styling */
-:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent) {
+/* A Rail's header and footer pad like its rows, and their buttons are tiles too. */
+:where(.rt-ShellRailContent .rt-ShellPaneChrome) {
+  --sidebar-base-padding: var(--space-2) !important;
+}
+
+:where(:is(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent, .rt-ShellRailContent :is(.rt-SidebarContent, .rt-ShellPaneHeader, .rt-ShellPaneFooter))) {
   padding: var(--space-2);
 }
 
-:where(.rt-SidebarContainer[data-presentation='thin'] .rt-BaseMenuViewport) {
+:where(:is(.rt-SidebarContainer[data-presentation='thin'], .rt-ShellRailContent) .rt-BaseMenuViewport) {
   padding: var(--space-2) !important;
 }
 
 /* Enforce vertical stack and compact typography for all buttons in thin mode */
-:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent) :where(.rt-SidebarMenuButton, .rt-SidebarMenuSubTrigger) {
+:where(:is(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent, .rt-ShellRailContent :is(.rt-SidebarContent, .rt-ShellPaneHeader, .rt-ShellPaneFooter))) :where(.rt-SidebarMenuButton, .rt-SidebarMenuSubTrigger) {
   justify-content: center !important;
   align-items: center !important;
   flex-direction: column !important;
@@ -44,23 +49,23 @@
 }
 
 /* Size-specific vertical padding for thin mode buttons */
-:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-1) :where(.rt-SidebarMenuButton, .rt-SidebarMenuSubTrigger) {
+:where(:is(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-1, .rt-ShellRailContent :is(.rt-SidebarContent, .rt-ShellPaneHeader, .rt-ShellPaneFooter).rt-r-size-1)) :where(.rt-SidebarMenuButton, .rt-SidebarMenuSubTrigger) {
   padding-top: var(--space-1) !important;
   padding-bottom: var(--space-1) !important;
 }
 
-:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-2) :where(.rt-SidebarMenuButton, .rt-SidebarMenuSubTrigger) {
+:where(:is(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-2, .rt-ShellRailContent :is(.rt-SidebarContent, .rt-ShellPaneHeader, .rt-ShellPaneFooter).rt-r-size-2)) :where(.rt-SidebarMenuButton, .rt-SidebarMenuSubTrigger) {
   padding-top: var(--space-1) !important;
   padding-bottom: var(--space-1) !important;
 }
 
-:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-3) :where(.rt-SidebarMenuButton, .rt-SidebarMenuSubTrigger) {
+:where(:is(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-3, .rt-ShellRailContent :is(.rt-SidebarContent, .rt-ShellPaneHeader, .rt-ShellPaneFooter).rt-r-size-3)) :where(.rt-SidebarMenuButton, .rt-SidebarMenuSubTrigger) {
   padding-top: var(--space-2) !important;
   padding-bottom: var(--space-2) !important;
 }
 
 /* Consolidated thin mode size blocks */
-:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-1) {
+:where(:is(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-1, .rt-ShellRailContent :is(.rt-SidebarContent, .rt-ShellPaneHeader, .rt-ShellPaneFooter).rt-r-size-1)) {
   /* Horizontal padding tokens to free space for text */
   --base-menu-item-padding-left: var(--space-1) !important;
   --base-menu-item-padding-right: var(--space-1) !important;
@@ -99,7 +104,7 @@
   }
 }
 
-:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-2) {
+:where(:is(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-2, .rt-ShellRailContent :is(.rt-SidebarContent, .rt-ShellPaneHeader, .rt-ShellPaneFooter).rt-r-size-2)) {
   --base-menu-item-padding-left: var(--space-1) !important;
   --base-menu-item-padding-right: var(--space-1) !important;
   --base-menu-item-padding-y: var(--space-2) !important;
@@ -133,7 +138,7 @@
   }
 }
 
-:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-3) {
+:where(:is(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-3, .rt-ShellRailContent :is(.rt-SidebarContent, .rt-ShellPaneHeader, .rt-ShellPaneFooter).rt-r-size-3)) {
   --base-menu-item-padding-left: var(--space-1) !important;
   --base-menu-item-padding-right: var(--space-1) !important;
   --base-menu-item-padding-y: var(--space-2) !important;
@@ -168,7 +173,7 @@
 }
 
 /* Ellipsis on root child content when using asChild (e.g., Next.js Link) */
-:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuButton > *) {
+:where(:is(.rt-SidebarContainer[data-presentation='thin'], .rt-ShellRailContent) .rt-SidebarMenuButton > *) {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -180,7 +185,7 @@
 }
 
 /* Ensure submenu trigger asChild containers also stack vertically */
-:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuSubTrigger > *) {
+:where(:is(.rt-SidebarContainer[data-presentation='thin'], .rt-ShellRailContent) .rt-SidebarMenuSubTrigger > *) {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -189,12 +194,12 @@
 }
 
 /* stylelint-disable-next-line selector-max-type */
-:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuButton > * > svg) {
+:where(:is(.rt-SidebarContainer[data-presentation='thin'], .rt-ShellRailContent) .rt-SidebarMenuButton > * > svg) {
   flex-shrink: 0;
 }
 
 /* Ensure submenu anchors also truncate */
-:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuSubContent .rt-SidebarMenuButton > *) {
+:where(:is(.rt-SidebarContainer[data-presentation='thin'], .rt-ShellRailContent) .rt-SidebarMenuSubContent .rt-SidebarMenuButton > *) {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -207,13 +212,13 @@
 
 /* Ensure icons remain visible at their token sizes in thin mode */
 /* stylelint-disable-next-line selector-max-type */
-:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuButton) :where(svg) {
+:where(:is(.rt-SidebarContainer[data-presentation='thin'], .rt-ShellRailContent) .rt-SidebarMenuButton) :where(svg) {
   /* svg size is already controlled by tokens; this ensures layout stability */
   display: block;
 }
 
 /* Icon wrapper for thin mode - receives hover/active background */
-:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuIconWrapper) {
+:where(:is(.rt-SidebarContainer[data-presentation='thin'], .rt-ShellRailContent) .rt-SidebarMenuIconWrapper) {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -228,25 +233,25 @@
 
 /* Size-specific icon wrapper padding */
 /* stylelint-disable-next-line selector-max-specificity */
-.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-1 .rt-SidebarMenuIconWrapper {
+:is(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-1, .rt-ShellRailContent :is(.rt-SidebarContent, .rt-ShellPaneHeader, .rt-ShellPaneFooter).rt-r-size-1) .rt-SidebarMenuIconWrapper {
   padding: var(--space-2) var(--space-2);
   border-radius: var(--radius-pill-1);
 }
 
 /* stylelint-disable-next-line selector-max-specificity */
-.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-2 .rt-SidebarMenuIconWrapper {
+:is(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-2, .rt-ShellRailContent :is(.rt-SidebarContent, .rt-ShellPaneHeader, .rt-ShellPaneFooter).rt-r-size-2) .rt-SidebarMenuIconWrapper {
   padding: var(--space-2);
   border-radius: var(--radius-pill-2);
 }
 
 /* stylelint-disable-next-line selector-max-specificity */
-.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-3 .rt-SidebarMenuIconWrapper {
+:is(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-3, .rt-ShellRailContent :is(.rt-SidebarContent, .rt-ShellPaneHeader, .rt-ShellPaneFooter).rt-r-size-3) .rt-SidebarMenuIconWrapper {
   padding: var(--space-3);
   border-radius: var(--radius-pill-3);
 }
 
 /* Label styling in thin mode - outside the background area */
-:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuButton .rt-SidebarMenuLabel) {
+:where(:is(.rt-SidebarContainer[data-presentation='thin'], .rt-ShellRailContent) .rt-SidebarMenuButton .rt-SidebarMenuLabel) {
   display: block;
   max-width: 100%;
   min-width: 0;
@@ -260,100 +265,100 @@
 }
 
 /* Active label gets accent color and medium weight */
-:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuButton[data-active] .rt-SidebarMenuLabel) {
+:where(:is(.rt-SidebarContainer[data-presentation='thin'], .rt-ShellRailContent) .rt-SidebarMenuButton[data-active] .rt-SidebarMenuLabel) {
   color: var(--accent-ink);
   font-weight: var(--font-weight-medium);
 }
 
 /* Highlighted label gets slightly darker color */
-:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuButton:where([data-highlighted]):not([data-disabled]) .rt-SidebarMenuLabel) {
+:where(:is(.rt-SidebarContainer[data-presentation='thin'], .rt-ShellRailContent) .rt-SidebarMenuButton:where([data-highlighted]):not([data-disabled]) .rt-SidebarMenuLabel) {
   color: var(--accent-ink);
 }
 
 @media (hover: hover) {
-  :where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuButton:where(:hover):not([data-disabled]) .rt-SidebarMenuLabel) {
+  :where(:is(.rt-SidebarContainer[data-presentation='thin'], .rt-ShellRailContent) .rt-SidebarMenuButton:where(:hover):not([data-disabled]) .rt-SidebarMenuLabel) {
     color: var(--accent-ink);
   }
 }
 
 /* Remove background from button itself in thin mode - styles are on icon wrapper */
-:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuButton:where([data-highlighted]):not([data-disabled])), :where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuButton[data-active]) {
+:where(:is(.rt-SidebarContainer[data-presentation='thin'], .rt-ShellRailContent) .rt-SidebarMenuButton:where([data-highlighted]):not([data-disabled])), :where(:is(.rt-SidebarContainer[data-presentation='thin'], .rt-ShellRailContent) .rt-SidebarMenuButton[data-active]) {
   background-color: transparent !important;
 }
 
 @media (hover: hover) {
-  :where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuButton:where(:hover):not([data-disabled])) {
+  :where(:is(.rt-SidebarContainer[data-presentation='thin'], .rt-ShellRailContent) .rt-SidebarMenuButton:where(:hover):not([data-disabled])) {
     background-color: transparent !important;
   }
 }
 
 /* Soft variant icon wrapper states in thin mode */
-:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-menu-variant-soft .rt-SidebarMenuButton:where([data-highlighted]):not([data-disabled]) .rt-SidebarMenuIconWrapper) {
+:where(:is(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent, .rt-ShellRailContent :is(.rt-SidebarContent, .rt-ShellPaneHeader, .rt-ShellPaneFooter)).rt-menu-variant-soft .rt-SidebarMenuButton:where([data-highlighted]):not([data-disabled]) .rt-SidebarMenuIconWrapper) {
   background-color: var(--accent-4);
 }
 
 @media (hover: hover) {
-  :where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-menu-variant-soft .rt-SidebarMenuButton:where(:hover):not([data-disabled]) .rt-SidebarMenuIconWrapper) {
+  :where(:is(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent, .rt-ShellRailContent :is(.rt-SidebarContent, .rt-ShellPaneHeader, .rt-ShellPaneFooter)).rt-menu-variant-soft .rt-SidebarMenuButton:where(:hover):not([data-disabled]) .rt-SidebarMenuIconWrapper) {
     background-color: var(--accent-4);
   }
 }
 
-:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-menu-variant-soft .rt-SidebarMenuButton[data-active] .rt-SidebarMenuIconWrapper) {
+:where(:is(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent, .rt-ShellRailContent :is(.rt-SidebarContent, .rt-ShellPaneHeader, .rt-ShellPaneFooter)).rt-menu-variant-soft .rt-SidebarMenuButton[data-active] .rt-SidebarMenuIconWrapper) {
   background-color: var(--accent-3);
 }
 
 /* Translucent panel support for soft variant */
-:where([data-panel-background='translucent']) :where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-menu-variant-soft .rt-SidebarMenuButton:where([data-highlighted]):not([data-disabled]) .rt-SidebarMenuIconWrapper) {
+:where([data-panel-background='translucent']) :where(:is(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent, .rt-ShellRailContent :is(.rt-SidebarContent, .rt-ShellPaneHeader, .rt-ShellPaneFooter)).rt-menu-variant-soft .rt-SidebarMenuButton:where([data-highlighted]):not([data-disabled]) .rt-SidebarMenuIconWrapper) {
   background-color: var(--accent-a4);
 }
 
 @media (hover: hover) {
-  :where([data-panel-background='translucent']) :where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-menu-variant-soft .rt-SidebarMenuButton:where(:hover):not([data-disabled]) .rt-SidebarMenuIconWrapper) {
+  :where([data-panel-background='translucent']) :where(:is(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent, .rt-ShellRailContent :is(.rt-SidebarContent, .rt-ShellPaneHeader, .rt-ShellPaneFooter)).rt-menu-variant-soft .rt-SidebarMenuButton:where(:hover):not([data-disabled]) .rt-SidebarMenuIconWrapper) {
     background-color: var(--accent-a4);
   }
 }
 
-:where([data-panel-background='translucent']) :where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-menu-variant-soft .rt-SidebarMenuButton[data-active] .rt-SidebarMenuIconWrapper) {
+:where([data-panel-background='translucent']) :where(:is(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent, .rt-ShellRailContent :is(.rt-SidebarContent, .rt-ShellPaneHeader, .rt-ShellPaneFooter)).rt-menu-variant-soft .rt-SidebarMenuButton[data-active] .rt-SidebarMenuIconWrapper) {
   background-color: var(--accent-a3);
 }
 
 /* Solid variant icon wrapper states in thin mode */
-:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-menu-variant-solid .rt-SidebarMenuButton:where([data-highlighted]):not([data-disabled]) .rt-SidebarMenuIconWrapper) {
+:where(:is(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent, .rt-ShellRailContent :is(.rt-SidebarContent, .rt-ShellPaneHeader, .rt-ShellPaneFooter)).rt-menu-variant-solid .rt-SidebarMenuButton:where([data-highlighted]):not([data-disabled]) .rt-SidebarMenuIconWrapper) {
   background-color: var(--accent-solid);
   color: var(--accent-solid-contrast);
 }
 
 @media (hover: hover) {
-  :where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-menu-variant-solid .rt-SidebarMenuButton:where(:hover):not([data-disabled]) .rt-SidebarMenuIconWrapper) {
+  :where(:is(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent, .rt-ShellRailContent :is(.rt-SidebarContent, .rt-ShellPaneHeader, .rt-ShellPaneFooter)).rt-menu-variant-solid .rt-SidebarMenuButton:where(:hover):not([data-disabled]) .rt-SidebarMenuIconWrapper) {
     background-color: var(--accent-solid);
     color: var(--accent-solid-contrast);
   }
 }
 
-:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-menu-variant-solid .rt-SidebarMenuButton[data-active] .rt-SidebarMenuIconWrapper) {
+:where(:is(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent, .rt-ShellRailContent :is(.rt-SidebarContent, .rt-ShellPaneHeader, .rt-ShellPaneFooter)).rt-menu-variant-solid .rt-SidebarMenuButton[data-active] .rt-SidebarMenuIconWrapper) {
   background-color: var(--accent-solid);
   color: var(--accent-solid-contrast);
 }
 
-:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuBadge),
-:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuShortcut),
-:where(.rt-SidebarContainer[data-presentation='thin'] .rt-Badge),
-:where(.rt-SidebarContainer[data-presentation='thin'] .rt-Kbd) {
+:where(:is(.rt-SidebarContainer[data-presentation='thin'], .rt-ShellRailContent) .rt-SidebarMenuBadge),
+:where(:is(.rt-SidebarContainer[data-presentation='thin'], .rt-ShellRailContent) .rt-SidebarMenuShortcut),
+:where(:is(.rt-SidebarContainer[data-presentation='thin'], .rt-ShellRailContent) .rt-Badge),
+:where(:is(.rt-SidebarContainer[data-presentation='thin'], .rt-ShellRailContent) .rt-Kbd) {
   display: none !important;
 }
 
-:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarGroupLabel) {
+:where(:is(.rt-SidebarContainer[data-presentation='thin'], .rt-ShellRailContent) .rt-SidebarGroupLabel) {
   display: none !important;
 }
 
 /* Hide submenu chevrons and flatten sublists in rail */
-:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuSubTriggerIcon),
-:where(.rt-SidebarContainer[data-presentation='thin'] .rt-BaseMenuSubTriggerIcon) {
+:where(:is(.rt-SidebarContainer[data-presentation='thin'], .rt-ShellRailContent) .rt-SidebarMenuSubTriggerIcon),
+:where(:is(.rt-SidebarContainer[data-presentation='thin'], .rt-ShellRailContent) .rt-BaseMenuSubTriggerIcon) {
   display: none !important;
 }
 
-:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuSubList),
-:where(.rt-SidebarContainer[data-presentation='thin'] .rt-BaseMenuSubList) {
+:where(:is(.rt-SidebarContainer[data-presentation='thin'], .rt-ShellRailContent) .rt-SidebarMenuSubList),
+:where(:is(.rt-SidebarContainer[data-presentation='thin'], .rt-ShellRailContent) .rt-BaseMenuSubList) {
   padding-left: 0 !important;
   margin-left: 0 !important;
   border-left: 0 !important;
@@ -364,14 +369,14 @@
 }
 
 /* Also remove any decorative rule on the submenu list in thin mode */
-:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuSubList::before),
-:where(.rt-SidebarContainer[data-presentation='thin'] .rt-BaseMenuSubList::before) {
+:where(:is(.rt-SidebarContainer[data-presentation='thin'], .rt-ShellRailContent) .rt-SidebarMenuSubList::before),
+:where(:is(.rt-SidebarContainer[data-presentation='thin'], .rt-ShellRailContent) .rt-BaseMenuSubList::before) {
   content: none !important;
   display: none !important;
 }
 
 /* Ensure the Accordion content wrapper doesn't add indentation */
-:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuSubContent) {
+:where(:is(.rt-SidebarContainer[data-presentation='thin'], .rt-ShellRailContent) .rt-SidebarMenuSubContent) {
   padding-left: 0 !important;
   margin-left: 0 !important;
   border-left: 0 !important;
@@ -386,7 +391,7 @@
 /* (intentionally no ::before) */
 
 /* Ensure submenu buttons also truncate */
-:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuSubContent .rt-SidebarMenuButton) {
+:where(:is(.rt-SidebarContainer[data-presentation='thin'], .rt-ShellRailContent) .rt-SidebarMenuSubContent .rt-SidebarMenuButton) {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -659,6 +664,17 @@
     }
   }
 
+  /* In a Shell pane, the header, footer and search pad by the rows' own inset, so every row
+     and every control in the pane starts on one line. */
+  .rt-ShellPaneChrome {
+    &:where(.rt-r-size-1) {
+      --sidebar-base-padding: var(--space-2);
+    }
+    &:where(.rt-r-size-2, .rt-r-size-3) {
+      --sidebar-base-padding: var(--space-3);
+    }
+  }
+
   .rt-SidebarHeader:where(.rt-r-size-1),
   .rt-SidebarFooter:where(.rt-r-size-1) {
     --base-menu-content-padding: var(--space-2);
@@ -1032,6 +1048,113 @@
   }
 }
 
+/* Rows use the soft highlight. When the system asks for more contrast, they take the solid one. */
+@media (prefers-contrast: more) {
+  .rt-SidebarHeader:where(.rt-menu-variant-soft),
+  .rt-SidebarContent:where(.rt-menu-variant-soft),
+  .rt-SidebarFooter:where(.rt-menu-variant-soft) {
+    /* Sub-trigger open state - match base menu */
+    & :where(.rt-SidebarMenuSubTrigger[data-state='open']) {
+      /* Base state: solid gray for solid panels */
+      background-color: var(--gray-3);
+
+      /* Theme-level translucent override */
+      :where([data-panel-background='translucent']) & {
+        background-color: var(--gray-a3);
+      }
+
+      /* Component-level overrides (higher specificity) */
+      &:where([data-panel-background='solid']) {
+        background-color: var(--gray-3);
+        backdrop-filter: none;
+        --backdrop-filter-components: none;
+      }
+
+      &:where([data-panel-background='translucent']) {
+        background-color: var(--gray-a3);
+      }
+    }
+
+    /* Hover/highlighted state for solid variant - EXACT match to base menu */
+    & :where(.rt-SidebarMenuButton:where([data-highlighted]):not([data-disabled])) {
+      background-color: var(--accent-solid);
+      color: var(--accent-solid-contrast);
+
+      & :where(.rt-BaseMenuSubTriggerIcon) {
+        color: var(--accent-solid-contrast);
+      }
+
+      /* Force all text elements to inherit hover color, including those with color="gray" */
+      & :where(.rt-Text) {
+        color: inherit !important;
+      }
+
+      /* Also target any element with data-accent-color="gray" */
+      & :where([data-accent-color='gray']:not(.rt-Badge)) {
+        color: inherit !important;
+      }
+
+      /* FIX: Ensure badges maintain their own styling and don't inherit hover colors */
+      & :where(.rt-Badge) {
+        color: var(--accent-solid-badge-contrast) !important;
+        background-color: var(--accent-solid-badge) !important;
+      }
+    }
+
+
+    /* Active navigation state for solid variant - same as highlighted */
+    & :where(.rt-SidebarMenuButton[data-active]) {
+      background-color: var(--accent-solid);
+      color: var(--accent-solid-contrast);
+      font-weight: var(--font-weight-medium);
+
+      /* Force all text elements to inherit active color */
+      & :where(.rt-Text) {
+        color: inherit !important;
+      }
+
+      & :where([data-accent-color='gray']:not(.rt-Badge)) {
+        color: inherit !important;
+      }
+
+      /* FIX: Ensure badges maintain their own styling and don't inherit active colors */
+      & :where(.rt-Badge) {
+        color: var(--accent-solid-badge-contrast) !important;
+        background-color: var(--accent-solid-badge) !important;
+      }
+    }
+  }
+}
+
+@media (prefers-contrast: more) and (hover: hover) {
+  .rt-SidebarHeader:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton:where(:hover):not([data-disabled])),
+  .rt-SidebarContent:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton:where(:hover):not([data-disabled])),
+  .rt-SidebarFooter:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton:where(:hover):not([data-disabled])) {
+    background-color: var(--accent-solid);
+    color: var(--accent-solid-contrast);
+
+    & :where(.rt-BaseMenuSubTriggerIcon) {
+      color: var(--accent-solid-contrast);
+    }
+
+    /* Force all text elements to inherit hover color, including those with color="gray" */
+    & :where(.rt-Text) {
+      color: inherit !important;
+    }
+
+    /* Also target any element with data-accent-color="gray" */
+    & :where([data-accent-color='gray']:not(.rt-Badge)) {
+      color: inherit !important;
+    }
+
+    /* FIX: Ensure badges maintain their own styling and don't inherit hover colors */
+    & :where(.rt-Badge) {
+      color: var(--accent-solid-badge-contrast) !important;
+      background-color: var(--accent-solid-badge) !important;
+    }
+    }
+}
+
 /* Removed old icon-only collapsed mode rules in favor of Shell rail mode */
 
 /* ===== Sidebar Search ===== */
@@ -1042,7 +1165,7 @@
 }
 
 /* Thin mode: compact padding to match content area */
-:where(.rt-SidebarContainer[data-presentation='thin']) .rt-SidebarSearch {
+:where(:is(.rt-SidebarContainer[data-presentation='thin'], .rt-ShellRailContent)) .rt-SidebarSearch {
   padding: var(--space-2);
 }
 
@@ -1072,7 +1195,7 @@
 
 /* Thin mode: search trigger layout (mirrors Content-scoped menu button rules) */
 /* Uses !important to override base .rt-SidebarMenuButton specificity, matching the existing thin mode pattern */
-:where(.rt-SidebarContainer[data-presentation='thin']) :where(.rt-SidebarSearchTrigger) {
+:where(:is(.rt-SidebarContainer[data-presentation='thin'], .rt-ShellRailContent)) :where(.rt-SidebarSearchTrigger) {
   justify-content: center !important;
   align-items: center !important;
   flex-direction: column !important;
@@ -1087,17 +1210,17 @@
 }
 
 /* Size-specific vertical padding for thin search trigger */
-:where(.rt-SidebarContainer[data-presentation='thin'].rt-r-size-1) :where(.rt-SidebarSearchTrigger) {
+:where(:is(.rt-SidebarContainer[data-presentation='thin'].rt-r-size-1, .rt-ShellRailContent.rt-r-size-1)) :where(.rt-SidebarSearchTrigger) {
   padding-top: var(--space-1) !important;
   padding-bottom: var(--space-1) !important;
 }
 
-:where(.rt-SidebarContainer[data-presentation='thin'].rt-r-size-2) :where(.rt-SidebarSearchTrigger) {
+:where(:is(.rt-SidebarContainer[data-presentation='thin'].rt-r-size-2, .rt-ShellRailContent.rt-r-size-2)) :where(.rt-SidebarSearchTrigger) {
   padding-top: var(--space-1) !important;
   padding-bottom: var(--space-1) !important;
 }
 
-:where(.rt-SidebarContainer[data-presentation='thin'].rt-r-size-3) :where(.rt-SidebarSearchTrigger) {
+:where(:is(.rt-SidebarContainer[data-presentation='thin'].rt-r-size-3, .rt-ShellRailContent.rt-r-size-3)) :where(.rt-SidebarSearchTrigger) {
   padding-top: var(--space-2) !important;
   padding-bottom: var(--space-2) !important;
 }
@@ -1105,69 +1228,69 @@
 /* Size-specific icon sizing for thin search trigger */
 /* Matches the effective icon size of other menu buttons (expanded-mode rules win on specificity) */
 /* stylelint-disable-next-line selector-max-type, selector-max-specificity */
-.rt-SidebarContainer[data-presentation='thin'].rt-r-size-1 .rt-SidebarSearchTrigger svg {
+:is(.rt-SidebarContainer[data-presentation='thin'].rt-r-size-1, .rt-ShellRailContent.rt-r-size-1) .rt-SidebarSearchTrigger svg {
   width: var(--content-icon-size-2);
   height: var(--content-icon-size-2);
 }
 
 /* stylelint-disable-next-line selector-max-type, selector-max-specificity */
-.rt-SidebarContainer[data-presentation='thin'].rt-r-size-2 .rt-SidebarSearchTrigger svg {
+:is(.rt-SidebarContainer[data-presentation='thin'].rt-r-size-2, .rt-ShellRailContent.rt-r-size-2) .rt-SidebarSearchTrigger svg {
   width: var(--content-icon-size-3);
   height: var(--content-icon-size-3);
 }
 
 /* stylelint-disable-next-line selector-max-type, selector-max-specificity */
-.rt-SidebarContainer[data-presentation='thin'].rt-r-size-3 .rt-SidebarSearchTrigger svg {
+:is(.rt-SidebarContainer[data-presentation='thin'].rt-r-size-3, .rt-ShellRailContent.rt-r-size-3) .rt-SidebarSearchTrigger svg {
   width: var(--content-icon-size-3);
   height: var(--content-icon-size-3);
 }
 
 /* Remove hover background from thin trigger button itself (styles live on icon wrapper) */
-:where(.rt-SidebarContainer[data-presentation='thin']) :where(.rt-SidebarSearchTrigger:where([data-state='open'])) {
+:where(:is(.rt-SidebarContainer[data-presentation='thin'], .rt-ShellRailContent)) :where(.rt-SidebarSearchTrigger:where([data-state='open'])) {
   background-color: transparent !important;
 }
 
 @media (hover: hover) {
-  :where(.rt-SidebarContainer[data-presentation='thin']) :where(.rt-SidebarSearchTrigger:where(:hover)) {
+  :where(:is(.rt-SidebarContainer[data-presentation='thin'], .rt-ShellRailContent)) :where(.rt-SidebarSearchTrigger:where(:hover)) {
     background-color: transparent !important;
   }
 }
 
 /* Search trigger icon wrapper - size-specific padding (mirrors Content-scoped rules) */
 /* stylelint-disable-next-line selector-max-specificity */
-.rt-SidebarContainer[data-presentation='thin'].rt-r-size-1 .rt-SidebarSearchTrigger .rt-SidebarMenuIconWrapper {
+:is(.rt-SidebarContainer[data-presentation='thin'].rt-r-size-1, .rt-ShellRailContent.rt-r-size-1) .rt-SidebarSearchTrigger .rt-SidebarMenuIconWrapper {
   padding: var(--space-2) var(--space-2);
   border-radius: var(--radius-pill-1);
 }
 
 /* stylelint-disable-next-line selector-max-specificity */
-.rt-SidebarContainer[data-presentation='thin'].rt-r-size-2 .rt-SidebarSearchTrigger .rt-SidebarMenuIconWrapper {
+:is(.rt-SidebarContainer[data-presentation='thin'].rt-r-size-2, .rt-ShellRailContent.rt-r-size-2) .rt-SidebarSearchTrigger .rt-SidebarMenuIconWrapper {
   padding: var(--space-2);
   border-radius: var(--radius-pill-2);
 }
 
 /* stylelint-disable-next-line selector-max-specificity */
-.rt-SidebarContainer[data-presentation='thin'].rt-r-size-3 .rt-SidebarSearchTrigger .rt-SidebarMenuIconWrapper {
+:is(.rt-SidebarContainer[data-presentation='thin'].rt-r-size-3, .rt-ShellRailContent.rt-r-size-3) .rt-SidebarSearchTrigger .rt-SidebarMenuIconWrapper {
   padding: var(--space-3);
   border-radius: var(--radius-pill-3);
 }
 
 /* Search trigger icon wrapper hover (soft variant) */
 @media (hover: hover) {
-  :where(.rt-SidebarContainer[data-presentation='thin'].rt-menu-variant-soft) :where(.rt-SidebarSearchTrigger:where(:hover):not([data-disabled]) .rt-SidebarMenuIconWrapper) {
+  :where(:is(.rt-SidebarContainer[data-presentation='thin'], .rt-ShellRailContent).rt-menu-variant-soft) :where(.rt-SidebarSearchTrigger:where(:hover):not([data-disabled]) .rt-SidebarMenuIconWrapper) {
     background-color: var(--accent-4);
   }
 }
 
 @media (hover: hover) {
-  :where([data-panel-background='translucent']) :where(.rt-SidebarContainer[data-presentation='thin'].rt-menu-variant-soft) :where(.rt-SidebarSearchTrigger:where(:hover):not([data-disabled]) .rt-SidebarMenuIconWrapper) {
+  :where([data-panel-background='translucent']) :where(:is(.rt-SidebarContainer[data-presentation='thin'], .rt-ShellRailContent).rt-menu-variant-soft) :where(.rt-SidebarSearchTrigger:where(:hover):not([data-disabled]) .rt-SidebarMenuIconWrapper) {
     background-color: var(--accent-a4);
   }
 }
 
 /* Search trigger icon wrapper hover (solid variant) */
 @media (hover: hover) {
-  :where(.rt-SidebarContainer[data-presentation='thin'].rt-menu-variant-solid) :where(.rt-SidebarSearchTrigger:where(:hover):not([data-disabled]) .rt-SidebarMenuIconWrapper) {
+  :where(:is(.rt-SidebarContainer[data-presentation='thin'], .rt-ShellRailContent).rt-menu-variant-solid) :where(.rt-SidebarSearchTrigger:where(:hover):not([data-disabled]) .rt-SidebarMenuIconWrapper) {
     background-color: var(--accent-solid);
     color: var(--accent-solid-contrast);
   }

package/src/components/sidebar.props.tsx

@@ -24,6 +24,7 @@ const sidebarPropDefs = {
   ...asChildPropDef,
   size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
   variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'outline' },
+  /** @deprecated Removed in 0.15.0. Rows use the soft highlight, and the solid one under `prefers-contrast: more`. */
   menuVariant: {
     type: 'enum',
     className: 'rt-menu-variant',

package/src/components/sidebar.tsx

@@ -16,6 +16,8 @@ import { ThickChevronRightIcon } from './icons.js';
 import { extractProps } from '../helpers/extract-props.js';
 import { Kbd } from './kbd.js';
 import { Badge } from './badge.js';
+import { SidebarVisualContext, useSidebarVisual } from './_internal/pane-chrome.js';
+import { warnDeprecated } from '../helpers/warn-deprecated.js';
 
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 import type { GetPropDefTypes } from '../props/prop-def.js';
@@ -30,18 +32,6 @@ type BadgeConfig = {
   radius?: BadgeProps['radius'];
 };
 
-// Internal presentational context (not exported) for size/menu variant
-type SidebarVisualContextValue = {
-  size: '1' | '2' | '3';
-  menuVariant: 'solid' | 'soft';
-  presentation?: 'thin' | 'expanded';
-  color?: string;
-};
-const SidebarVisualContext = React.createContext<SidebarVisualContextValue | null>(null);
-function useSidebarVisual() {
-  return React.useContext(SidebarVisualContext);
-}
-
 // Sidebar is now independent of Shell - no integration needed
 
 // Main Sidebar component
@@ -55,8 +45,18 @@ interface SidebarProps extends ComponentPropsWithout<'div', RemovedProps>, Sideb
   presentation?: 'thin' | 'expanded';
 }
 
+/** @deprecated Removed in 0.15.0. Put the menu parts in `Shell.Sidebar`. */
 const Sidebar = React.forwardRef<HTMLDivElement, SidebarProps>((props, forwardedRef) => {
   const themeContext = useThemeContext();
+  warnDeprecated(
+    'Sidebar.Root is deprecated and will be removed in 0.15.0. Put the Sidebar menu parts in Shell.Sidebar, between Shell.PaneHeader, Shell.Scroll and Shell.PaneFooter.',
+  );
+  if (props.menuVariant !== undefined) {
+    warnDeprecated('`menuVariant` on Sidebar.Root is deprecated and will be removed in 0.15.0. Rows use the soft highlight, and the solid one under prefers-contrast: more.');
+  }
+  if (props.presentation === 'thin' || props.layout === 'rail') {
+    warnDeprecated('Sidebar thin mode is deprecated and will be removed in 0.15.0. Put the rows in Shell.Rail, which draws them as tiles.');
+  }
 
   const {
     size = sidebarPropDefs.size.default,
@@ -110,8 +110,10 @@ interface SidebarContentProps extends React.ComponentPropsWithoutRef<'div'> {
   'aria-label'?: string;
 }
 
+/** @deprecated Removed in 0.15.0. Use `Shell.Scroll`. */
 const SidebarContent = React.forwardRef<HTMLDivElement, SidebarContentProps>(
   ({ className, children, role = 'navigation', 'aria-label': ariaLabel = 'Main navigation', id, ...props }, forwardedRef) => {
+    warnDeprecated('Sidebar.Content is deprecated and will be removed in 0.15.0. Use Shell.Scroll inside Shell.Sidebar.');
     const visual = useSidebarVisual();
     const size = visual?.size ?? '2';
     const menuVariant = visual?.menuVariant ?? 'soft';
@@ -143,7 +145,9 @@ interface SidebarHeaderProps extends React.ComponentPropsWithoutRef<'div'> {
   asContainer?: boolean;
 }
 
+/** @deprecated Removed in 0.15.0. Use `Shell.PaneHeader`. */
 const SidebarHeader = React.forwardRef<HTMLDivElement, SidebarHeaderProps>(({ className, asContainer = true, ...props }, forwardedRef) => {
+    warnDeprecated('Sidebar.Header is deprecated and will be removed in 0.15.0. Use Shell.PaneHeader inside Shell.Sidebar.');
   const visual = useSidebarVisual();
   const size = visual?.size ?? '2';
   const menuVariant = visual?.menuVariant ?? 'soft';
@@ -175,7 +179,9 @@ interface SidebarFooterProps extends React.ComponentPropsWithoutRef<'div'> {
   asContainer?: boolean;
 }
 
+/** @deprecated Removed in 0.15.0. Use `Shell.PaneFooter`. */
 const SidebarFooter = React.forwardRef<HTMLDivElement, SidebarFooterProps>(({ className, asContainer = true, ...props }, forwardedRef) => {
+    warnDeprecated('Sidebar.Footer is deprecated and will be removed in 0.15.0. Use Shell.PaneFooter inside Shell.Sidebar.');
   const visual = useSidebarVisual();
   const size = visual?.size ?? '2';
   const menuVariant = visual?.menuVariant ?? 'soft';
@@ -758,7 +764,7 @@ const SidebarSearch = React.forwardRef<HTMLDivElement, SidebarSearchProps>(
 
     // Expanded mode: inline input
     return (
-      <div {...props} ref={forwardedRef} className={classNames('rt-SidebarSearch', 'rt-SidebarSearch--expanded', className)} role="search">
+      <div {...props} ref={forwardedRef} className={classNames('rt-SidebarSearch', 'rt-SidebarSearch--expanded', 'rt-ShellPaneChrome', `rt-r-size-${visual?.size ?? '2'}`, className)} role="search">
         <div className="rt-SidebarSearchInputWrapper">
           <SearchIcon className="rt-SidebarSearchIcon" />
           <input