@kushagradhawan/kookie-ui 0.1.27 → 0.1.29

package/src/components/sidebar.css

@@ -1,81 +1,9 @@
 @import './_internal/base-menu.css';
+@import './_internal/base-sidebar.css';
+@import './_internal/base-sidebar-menu.css';
 
-/* Sidebar Provider - handles positioning */
-.rt-SidebarProvider {
-  /* Positioning based on side */
-  &:where([data-side="left"]) {
-    /* Left side is default - no additional positioning needed */
-    order: -1; /* Ensure it appears first in flex container */
-  }
-  
-  &:where([data-side="right"]) {
-    /* Position on the right side */
-    order: 999; /* Push to end in flex container */
-  }
-}
-
-/* Sidebar Root Container */
-.rt-SidebarRoot {
-  --sidebar-width: 16rem; /* Fixed width */
-  --sidebar-base-border-radius: 0; /* Default to no radius */
-  
-  width: var(--sidebar-width);
-  height: 100%;
-  flex-shrink: 0;
-  display: flex;
-  flex-direction: column;
-
-  /* Make sure Theme wrapper also participates in flex layout */
-  & :where(.radix-themes) {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    height: 100%;
-  }
-
-  /* Floating type - ONLY visual changes */
-  &:where([data-type="floating"]) {
-    border-radius: var(--sidebar-base-border-radius);
-    margin: var(--space-2);
-    height: calc(100% - var(--space-4));
-    overflow: visible; /* Ensure shadow is not clipped */
-    position: relative; /* Ensure proper stacking context for floating sidebars */
-    
-    /* Ensure Theme wrapper has proper border radius in floating mode */
-    & :where(.radix-themes) {
-      border-radius: inherit;
-    }
-  }
-}
-
-/* Set border radius for floating sidebars based on size - set on the root where it's used */
-.rt-SidebarRoot:where([data-type="floating"]) {
-  /* Default radius for floating sidebars */
-  --sidebar-base-border-radius: var(--radius-5);
-  
-  &:where(.rt-r-size-1) {
-    --sidebar-base-border-radius: var(--radius-5);
-  }
-  
-  &:where(.rt-r-size-2) {
-    --sidebar-base-border-radius: var(--radius-6);
-  }
-}
-
-/* Sidebar Container */
-.rt-SidebarContainer {
-  --sidebar-base-border-radius: 0; /* Default to no radius */
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  width: 100%;
-  background-color: var(--color-panel);
-  backdrop-filter: var(--backdrop-filter-panel);
-  border-radius: inherit;
-  flex: 1;
-}
-
-.rt-SidebarContainer:where(.rt-variant-surface) {
+/* Container Variants */
+.rt-SidebarContainer:where(.rt-variant-outline) {
   background-color: var(--color-panel);
   backdrop-filter: var(--backdrop-filter-panel);
   
@@ -109,59 +37,94 @@
   }
 }
 
-/* Sidebar Header */
-.rt-SidebarHeader {
-  display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-  border-radius: var(--sidebar-base-border-radius) var(--sidebar-base-border-radius) 0 0;
+.rt-SidebarContainer:where(.rt-variant-ghost) {
+  background-color: transparent;
+  backdrop-filter: none;
+  border: none;
+}
+
+.rt-SidebarContainer:where(.rt-variant-soft) {
+  /* Use solid gray for solid panels, alpha gray for translucent panels */
+  background-color: var(--gray-2);
   
-  /* Support for SidebarMenuButton inside header */
-  & :where(.rt-SidebarMenuButton) {
-    /* Inherit all base MenuButton styles */
-    display: flex;
-    align-items: center;
-    gap: var(--space-2);
-    min-height: var(--base-menu-item-height);
-    padding-top: var(--base-menu-item-padding-y);
-    padding-bottom: var(--base-menu-item-padding-y);
-    padding-left: var(--base-menu-item-padding-left);
-    padding-right: var(--base-menu-item-padding-right);
-    box-sizing: border-box;
-    position: relative;
-    outline: none;
-    background: none;
-    border: none;
-    width: 100%;
-    text-align: left;
-    cursor: var(--cursor-menu-item);
-    user-select: none;
-    
-    /* Header-specific styling */
-    justify-content: flex-start;
-    border-radius: var(--sidebar-base-border-radius) var(--sidebar-base-border-radius) 0 0;
-    
-    /* Transitions */
-    transition: background var(--duration-2) var(--ease-1), 
-                box-shadow var(--duration-2) var(--ease-1),
-                filter var(--duration-2) var(--ease-1);
+  /* Theme-level translucent override */
+  :where([data-panel-background='translucent']) & {
+    background-color: var(--gray-a2);
+    backdrop-filter: var(--backdrop-filter-panel);
+  }
+
+  /* Component-level overrides (higher specificity) */
+  &:where([data-panel-background='solid']) {
+    background-color: var(--gray-2);
+    backdrop-filter: none;
+    --backdrop-filter-components: none;
+  }
+
+  &:where([data-panel-background='translucent']) {
+    background-color: var(--gray-a2);
+    backdrop-filter: var(--backdrop-filter-panel);
+    --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
+    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+  }
+}
+
+.rt-SidebarContainer:where(.rt-variant-surface) {
+  /* Base state: neutral gray background (maintains sidebar neutrality) */
+  background-color: var(--gray-1);
+  
+  /* Theme-level translucent override */
+  :where([data-panel-background='translucent']) & {
+    background-color: var(--gray-a1);
+    backdrop-filter: var(--backdrop-filter-panel);
+  }
+
+  /* Component-level overrides (higher specificity) */
+  &:where([data-panel-background='solid']) {
+    background-color: var(--gray-1);
+    backdrop-filter: none;
+    --backdrop-filter-panel: none;
+    --backdrop-filter-components: none;
+  }
+
+  &:where([data-panel-background='translucent']) {
+    background-color: var(--gray-a1);
+    backdrop-filter: var(--backdrop-filter-panel);
+    --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
+    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+  }
+  
+  /* Inset border like Card surface variant */
+  /* Floating sidebars get full inset border */
+  :where(.rt-SidebarRoot[data-type="floating"]) & {
+    box-shadow: inset 0 0 0 1px var(--gray-6);
     
-    /* Note: Hover/active states are handled by menu variants */
+    /* Theme-level translucent override */
+    :where([data-panel-background='translucent']) & {
+      box-shadow: inset 0 0 0 1px var(--gray-a6);
+    }
+  }
+  
+  /* Non-floating sidebars get border only on the content-facing side */
+  :where(.rt-SidebarRoot[data-type="sidebar"][data-side="left"]) & {
+    box-shadow: inset -1px 0 0 0 var(--gray-6);
     
-    /* Focus state */
-    &:where(:focus-visible) {
-      outline: 2px solid var(--focus-8);
-      outline-offset: 2px;
+    /* Theme-level translucent override */
+    :where([data-panel-background='translucent']) & {
+      box-shadow: inset -1px 0 0 0 var(--gray-a6);
     }
+  }
+  
+  :where(.rt-SidebarRoot[data-type="sidebar"][data-side="right"]) & {
+    box-shadow: inset 1px 0 0 0 var(--gray-6);
     
-    /* Reduced motion support */
-    @media (prefers-reduced-motion: reduce) {
-      transition: none;
+    /* Theme-level translucent override */
+    :where([data-panel-background='translucent']) & {
+      box-shadow: inset 1px 0 0 0 var(--gray-a6);
     }
   }
 }
 
-/* Header container variant - default flex container */
+/* Header/Footer Layout Utilities */
 .rt-SidebarHeader:where(.rt-SidebarHeader--container) {
   display: flex;
   flex-direction: row;
@@ -176,120 +139,56 @@
   }
 }
 
-/* Flex utilities for header layouts */
-.rt-SidebarHeader:where(.rt-flex-row) {
+.rt-SidebarFooter:where(.rt-SidebarFooter--container) {
+  display: flex;
   flex-direction: row;
-}
-
-.rt-SidebarHeader:where(.rt-flex-col) {
-  flex-direction: column;
-}
-
-.rt-SidebarHeader:where(.rt-items-center) {
   align-items: center;
-}
-
-.rt-SidebarHeader:where(.rt-items-start) {
-  align-items: flex-start;
-}
-
-.rt-SidebarHeader:where(.rt-items-end) {
-  align-items: flex-end;
-}
-
-.rt-SidebarHeader:where(.rt-justify-between) {
-  justify-content: space-between;
-}
-
-.rt-SidebarHeader:where(.rt-justify-center) {
-  justify-content: center;
-}
-
-.rt-SidebarHeader:where(.rt-justify-start) {
-  justify-content: flex-start;
-}
-
-.rt-SidebarHeader:where(.rt-justify-end) {
-  justify-content: flex-end;
-}
-
-.rt-SidebarHeader:where(.rt-gap-1) {
-  gap: var(--space-1);
-}
-
-.rt-SidebarHeader:where(.rt-gap-2) {
   gap: var(--space-2);
-}
-
-.rt-SidebarHeader:where(.rt-gap-3) {
-  gap: var(--space-3);
-}
-
-.rt-SidebarHeader:where(.rt-gap-4) {
-  gap: var(--space-4);
-}
-
-/* Sidebar Content - based on rt-BaseMenuContent */
-.rt-SidebarContent {
-  --scrollarea-scrollbar-vertical-margin-top: var(--base-menu-content-padding);
-  --scrollarea-scrollbar-vertical-margin-bottom: var(--base-menu-content-padding);
-  --scrollarea-scrollbar-horizontal-margin-left: var(--base-menu-content-padding);
-  --scrollarea-scrollbar-horizontal-margin-right: var(--base-menu-content-padding);
-
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  box-sizing: border-box;
-  min-height: 0; /* Critical for flex children to shrink */
-
-  /* Override base menu styling that's not appropriate for sidebars */
-  background-color: transparent !important;
-  backdrop-filter: none !important;
-  box-shadow: none !important;
-  border-radius: 0 !important;
-
-  /* Ensure ScrollArea takes full height within SidebarContent */
-  & :where(.rt-ScrollAreaRoot) {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    min-height: 0;
-  }
-
-  & :where(.rt-ScrollAreaViewport) {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    min-height: 0;
-  }
-}
-
-/* Sidebar Menu - based on rt-BaseMenuViewport */
-.rt-SidebarMenu {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
   padding: var(--base-menu-content-padding);
-  box-sizing: border-box;
-  list-style: none;
-  margin: 0;
-  min-height: 0;
-
-  :where(.rt-SidebarContent:has(.rt-ScrollAreaScrollbar[data-orientation='vertical'])) & {
-    padding-right: var(--space-3);
+  min-height: var(--base-menu-item-height);
+  
+  /* Make MenuButtons expand to full width */
+  & :where(.rt-SidebarMenuButton) {
+    flex: 1;
   }
 }
 
-/* Sidebar Menu Item */
-.rt-SidebarMenuItem {
-  list-style: none;
-}
-
-/* Sidebar Menu Button - inherit from BaseMenuItem */
-.rt-SidebarMenuButton {
+/* Flex utilities for header/footer layouts */
+.rt-SidebarHeader:where(.rt-flex-row) { flex-direction: row; }
+.rt-SidebarHeader:where(.rt-flex-col) { flex-direction: column; }
+.rt-SidebarHeader:where(.rt-items-center) { align-items: center; }
+.rt-SidebarHeader:where(.rt-items-start) { align-items: flex-start; }
+.rt-SidebarHeader:where(.rt-items-end) { align-items: flex-end; }
+.rt-SidebarHeader:where(.rt-justify-between) { justify-content: space-between; }
+.rt-SidebarHeader:where(.rt-justify-center) { justify-content: center; }
+.rt-SidebarHeader:where(.rt-justify-start) { justify-content: flex-start; }
+.rt-SidebarHeader:where(.rt-justify-end) { justify-content: flex-end; }
+.rt-SidebarHeader:where(.rt-gap-1) { gap: var(--space-1); }
+.rt-SidebarHeader:where(.rt-gap-2) { gap: var(--space-2); }
+.rt-SidebarHeader:where(.rt-gap-3) { gap: var(--space-3); }
+.rt-SidebarHeader:where(.rt-gap-4) { gap: var(--space-4); }
+
+.rt-SidebarFooter:where(.rt-flex-row) { flex-direction: row; }
+.rt-SidebarFooter:where(.rt-flex-col) { flex-direction: column; }
+.rt-SidebarFooter:where(.rt-items-center) { align-items: center; }
+.rt-SidebarFooter:where(.rt-items-start) { align-items: flex-start; }
+.rt-SidebarFooter:where(.rt-items-end) { align-items: flex-end; }
+.rt-SidebarFooter:where(.rt-justify-between) { justify-content: space-between; }
+.rt-SidebarFooter:where(.rt-justify-center) { justify-content: center; }
+.rt-SidebarFooter:where(.rt-justify-start) { justify-content: flex-start; }
+.rt-SidebarFooter:where(.rt-justify-end) { justify-content: flex-end; }
+.rt-SidebarFooter:where(.rt-gap-1) { gap: var(--space-1); }
+.rt-SidebarFooter:where(.rt-gap-2) { gap: var(--space-2); }
+.rt-SidebarFooter:where(.rt-gap-3) { gap: var(--space-3); }
+.rt-SidebarFooter:where(.rt-gap-4) { gap: var(--space-4); }
+
+/* Header/Footer Menu Button Support */
+.rt-SidebarHeader :where(.rt-SidebarMenuButton),
+.rt-SidebarFooter :where(.rt-SidebarMenuButton) {
+  /* Inherit all base MenuButton styles */
   display: flex;
   align-items: center;
-  gap: var(--space-2); /* Will be overridden by size-specific gap */
+  gap: var(--space-2);
   min-height: var(--base-menu-item-height);
   padding-top: var(--base-menu-item-padding-y);
   padding-bottom: var(--base-menu-item-padding-y);
@@ -298,290 +197,39 @@
   box-sizing: border-box;
   position: relative;
   outline: none;
-  scroll-margin: var(--base-menu-content-padding) 0;
   background: none;
   border: none;
   width: 100%;
   text-align: left;
-  border-radius: var(--radius-2); /* Will be overridden by size-specific radius */
-
-  /* Transitions - inherit from base menu */
-  transition: var(--transition-menu);
-
-  /* Fix sticky text highlighting after selection in Firefox */
-  user-select: none;
-
-  /* Cursors */
   cursor: var(--cursor-menu-item);
-  &:where([data-disabled]) {
-    cursor: default;
-    color: var(--gray-a8);
-  }
-
-  /* Active navigation state - always accent-based */
-  &:where([data-active], .rt-active) {
-    background-color: var(--accent-a3);
-    color: var(--accent-a12);
-  }
-
+  user-select: none;
+  
+  /* Header/Footer-specific styling */
+  justify-content: flex-start;
+  
+  /* Transitions */
+  transition: background var(--duration-2) var(--ease-1), 
+              box-shadow var(--duration-2) var(--ease-1),
+              filter var(--duration-2) var(--ease-1);
+  
   /* Focus state */
   &:where(:focus-visible) {
     outline: 2px solid var(--focus-8);
     outline-offset: 2px;
   }
-
-  /* Accent color support */
-  &:where([data-accent-color]) {
-    color: var(--accent-a11);
-  }
-
-  /* Gray text support - inherit from base menu */
-  & :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']:not(.rt-Badge)) {
-    color: var(--gray-a10);
-  }
-
-  /* Ensure shortcuts inherit color in disabled/highlighted/active states */
-  &:where([data-disabled], [data-highlighted], [data-active]) {
-    & :where(.rt-SidebarMenuShortcut) {
-      color: inherit;
-    }
-  }
-
+  
   /* Reduced motion support */
   @media (prefers-reduced-motion: reduce) {
     transition: none;
   }
 }
 
-/* Sidebar Menu Sub Components - Radix Accordion */
-.rt-SidebarMenuSubTrigger {
-  justify-content: space-between;
-}
-
-/* Accordion trigger icon rotation */
-.rt-SidebarMenuSubTrigger {
-  & :where(.rt-SidebarMenuSubTriggerIcon) {
-    transition: transform 0.2s ease;
-  }
-  
-  &:where([data-state="open"]) :where(.rt-SidebarMenuSubTriggerIcon) {
-    transform: rotate(90deg);
-  }
-}
-
-.rt-SidebarMenuSubContent {
-  overflow: hidden;
-  
-  /* Allow focus outlines to show */
-  &:where(:focus-within) {
-    overflow: visible;
-  }
-  
-  /* Radix Accordion animation support */
-  &:where([data-state="open"]) {
-    animation: rt-sidebar-slide-down 200ms ease-out;
-  }
-  
-  &:where([data-state="closed"]) {
-    animation: rt-sidebar-slide-up 200ms ease-out;
-  }
-}
-
-@keyframes rt-sidebar-slide-down {
-  from {
-    height: 0;
-  }
-  to {
-    height: var(--radix-accordion-content-height);
-  }
-}
-
-@keyframes rt-sidebar-slide-up {
-  from {
-    height: var(--radix-accordion-content-height);
-  }
-  to {
-    height: 0;
-  }
-}
-
-.rt-SidebarMenuSubList {
-  padding-left: var(--space-4);
-  border-left: 1px solid var(--gray-a5);
-  margin-left: var(--space-3);
-}
-
-/* Sub-menu items have consistent heights based on size - match dropdown menu exactly */
-:where(.rt-SidebarContent.rt-r-size-1) :where(.rt-SidebarMenuSubList) .rt-SidebarMenuButton {
-  padding-left: var(--space-3);
-  padding-top: calc(var(--space-1) * 0.75);
-  padding-bottom: calc(var(--space-1) * 0.75);
-  min-height: var(--space-5); /* 20px */
-  font-size: var(--font-size-1);
-}
-
-:where(.rt-SidebarContent.rt-r-size-2) :where(.rt-SidebarMenuSubList) .rt-SidebarMenuButton {
-  padding-left: var(--space-3);
-  padding-top: var(--space-1);
-  padding-bottom: var(--space-1);
-  min-height: var(--space-6); /* 24px */
-  font-size: var(--font-size-2);
+.rt-SidebarHeader :where(.rt-SidebarMenuButton) {
+  border-radius: var(--sidebar-base-border-radius) var(--sidebar-base-border-radius) 0 0;
 }
 
-/* Sidebar Footer */
-.rt-SidebarFooter {
-  display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-  margin-top: auto;
+.rt-SidebarFooter :where(.rt-SidebarMenuButton) {
   border-radius: 0 0 var(--sidebar-base-border-radius) var(--sidebar-base-border-radius);
-  
-  /* Support for SidebarMenuButton inside footer */
-  & :where(.rt-SidebarMenuButton) {
-    /* Inherit all base MenuButton styles */
-    display: flex;
-    align-items: center;
-    gap: var(--space-2);
-    min-height: var(--base-menu-item-height);
-    padding-top: var(--base-menu-item-padding-y);
-    padding-bottom: var(--base-menu-item-padding-y);
-    padding-left: var(--base-menu-item-padding-left);
-    padding-right: var(--base-menu-item-padding-right);
-    box-sizing: border-box;
-    position: relative;
-    outline: none;
-    background: none;
-    border: none;
-    width: 100%;
-    text-align: left;
-    cursor: var(--cursor-menu-item);
-    user-select: none;
-    
-    /* Footer-specific styling */
-    justify-content: flex-start;
-    border-radius: 0 0 var(--sidebar-base-border-radius) var(--sidebar-base-border-radius);
-    
-    /* Transitions */
-    transition: background var(--duration-2) var(--ease-1), 
-                box-shadow var(--duration-2) var(--ease-1),
-                filter var(--duration-2) var(--ease-1);
-    
-    /* Note: Hover/active states are handled by menu variants */
-    
-    /* Focus state */
-    &:where(:focus-visible) {
-      outline: 2px solid var(--focus-8);
-      outline-offset: 2px;
-    }
-    
-    /* Reduced motion support */
-    @media (prefers-reduced-motion: reduce) {
-      transition: none;
-    }
-  }
-}
-
-/* Footer container variant - default flex container */
-.rt-SidebarFooter:where(.rt-SidebarFooter--container) {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: var(--space-2);
-  padding: var(--base-menu-content-padding);
-  min-height: var(--base-menu-item-height);
-  
-  /* Make MenuButtons expand to full width */
-  & :where(.rt-SidebarMenuButton) {
-    flex: 1;
-  }
-}
-
-/* Flex utilities for footer layouts */
-.rt-SidebarFooter:where(.rt-flex-row) {
-  flex-direction: row;
-}
-
-.rt-SidebarFooter:where(.rt-flex-col) {
-  flex-direction: column;
-}
-
-.rt-SidebarFooter:where(.rt-items-center) {
-  align-items: center;
-}
-
-.rt-SidebarFooter:where(.rt-items-start) {
-  align-items: flex-start;
-}
-
-.rt-SidebarFooter:where(.rt-items-end) {
-  align-items: flex-end;
-}
-
-.rt-SidebarFooter:where(.rt-justify-between) {
-  justify-content: space-between;
-}
-
-.rt-SidebarFooter:where(.rt-justify-center) {
-  justify-content: center;
-}
-
-.rt-SidebarFooter:where(.rt-justify-start) {
-  justify-content: flex-start;
-}
-
-.rt-SidebarFooter:where(.rt-justify-end) {
-  justify-content: flex-end;
-}
-
-.rt-SidebarFooter:where(.rt-gap-1) {
-  gap: var(--space-1);
-}
-
-.rt-SidebarFooter:where(.rt-gap-2) {
-  gap: var(--space-2);
-}
-
-.rt-SidebarFooter:where(.rt-gap-3) {
-  gap: var(--space-3);
-}
-
-.rt-SidebarFooter:where(.rt-gap-4) {
-  gap: var(--space-4);
-}
-
-/* Sidebar Separator - ensure full width and proper spacing */
-.rt-SidebarSeparator {
-  width: 100%;
-  margin: var(--space-2) 0;
-}
-
-/* Sidebar Group Components - identical to base menu */
-.rt-SidebarGroup {
-  /* No styling - purely semantic like BaseMenuGroup */
-}
-
-.rt-SidebarGroupLabel {
-  /* Inherit all BaseMenuLabel styles */
-  display: flex;
-  align-items: center;
-  min-height: var(--base-menu-item-height);
-  padding-top: var(--base-menu-item-padding-y);
-  padding-bottom: var(--base-menu-item-padding-y);
-  padding-left: var(--base-menu-item-padding-left);
-  padding-right: var(--base-menu-item-padding-right);
-  box-sizing: border-box;
-  color: var(--gray-a10);
-  user-select: none;
-  cursor: default;
-
-  /* Add margin-top when following menu items - identical to BaseMenuLabel */
-  :where(.rt-SidebarMenuItem) + & {
-    margin-top: var(--space-2);
-  }
-}
-
-.rt-SidebarGroupContent {
-  /* No styling - purely semantic container */
 }
 
 /***************************************************************************************************
@@ -627,6 +275,7 @@
       line-height: var(--line-height-1);
       letter-spacing: var(--letter-spacing-1);
       border-radius: var(--radius-1);
+      font-weight: var(--font-weight-medium);
 
       /* stylelint-disable-next-line selector-max-type */
       & :where(svg) {
@@ -652,6 +301,7 @@
       line-height: var(--line-height-2);
       letter-spacing: var(--letter-spacing-2);
       border-radius: var(--radius-2);
+      font-weight: var(--font-weight-medium);
 
       /* stylelint-disable-next-line selector-max-type */
       & :where(svg) {
@@ -669,58 +319,14 @@
       margin-left: auto;
     }
   }
-
-
 }
 
 /***************************************************************************************************
  *                                                                                                 *
- * VARIANTS                                                                                        *
+ * MENU VARIANTS                                                                                   *
  *                                                                                                 *
  ***************************************************************************************************/
 
-/* Sidebar Container Variants */
-.rt-SidebarContainer {
-  &:where(.rt-variant-ghost) {
-    background-color: transparent;
-    backdrop-filter: none;
-    border: none;
-  }
-  &:where(.rt-variant-soft) {
-    /* Use solid gray for solid panels, alpha gray for translucent panels */
-    background-color: var(--gray-2);
-    
-    /* Theme-level translucent override */
-    :where([data-panel-background='translucent']) & {
-      background-color: var(--gray-a2);
-      backdrop-filter: var(--backdrop-filter-panel);
-    }
-
-    /* Component-level overrides (higher specificity) */
-    &:where([data-panel-background='solid']) {
-      background-color: var(--gray-2);
-      backdrop-filter: none;
-      --backdrop-filter-components: none;
-    }
-
-    &:where([data-panel-background='translucent']) {
-      background-color: var(--gray-a2);
-      backdrop-filter: var(--backdrop-filter-panel);
-      --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
-      --backdrop-filter-components: blur(var(--backdrop-blur-components));
-    }
-  }
-}
-
-/* Floating shadows - only for ghost variant */
-.rt-SidebarContainer:where(.rt-variant-ghost) {
-  :where(.rt-SidebarRoot[data-type="floating"]) & {
-    box-shadow: var(--shadow-4);
-  }
-}
-
-/* Menu Button Variants - Independent of Container */
-
 /* Menu Variant: Solid - EXACT match to base menu */
 .rt-SidebarHeader:where(.rt-menu-variant-solid),
 .rt-SidebarContent:where(.rt-menu-variant-solid),
@@ -788,6 +394,12 @@
     & :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-contrast) !important;
+      background-color: var(--accent-12) !important;
+    }
   }
 
   /* Active navigation state for solid variant - same as highlighted */
@@ -803,6 +415,12 @@
     & :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-contrast) !important;
+      background-color: var(--accent-12) !important;
+    }
   }
 
   /* High contrast support for solid variant - EXACT match to base menu */
@@ -825,6 +443,12 @@
         color: inherit !important;
       }
 
+      /* FIX: High contrast badge styling */
+      & :where(.rt-Badge) {
+        color: var(--accent-1) !important;
+        background-color: var(--accent-9) !important;
+      }
+
       &:where([data-accent-color]) {
         background-color: var(--accent-9);
         color: var(--accent-contrast);
@@ -836,6 +460,11 @@
         & :where([data-accent-color='gray']:not(.rt-Badge)) {
           color: inherit !important;
         }
+
+        & :where(.rt-Badge) {
+          color: var(--accent-contrast) !important;
+          background-color: var(--accent-12) !important;
+        }
       }
     }
 
@@ -851,6 +480,11 @@
         color: inherit !important;
       }
 
+      & :where(.rt-Badge) {
+        color: var(--accent-1) !important;
+        background-color: var(--accent-9) !important;
+      }
+
       &:where([data-accent-color]) {
         background-color: var(--accent-9);
         color: var(--accent-contrast);
@@ -862,6 +496,11 @@
         & :where([data-accent-color='gray']:not(.rt-Badge)) {
           color: inherit !important;
         }
+
+        & :where(.rt-Badge) {
+          color: var(--accent-contrast) !important;
+          background-color: var(--accent-12) !important;
+        }
       }
     }
   }
@@ -975,75 +614,225 @@
   }
 }
 
-/* Ensure menu items inherit proper theming and spacing for sidebar */
-.rt-SidebarContent :where(.rt-BaseMenuItem) {
-  border-radius: var(--radius-2);
-  margin-bottom: var(--space-1);
-}
+/***************************************************************************************************
+ *                                                                                                 *
+ * COLLAPSIBLE BEHAVIOR                                                                            *
+ *                                                                                                 *
+ ***************************************************************************************************/
 
-/* Collapsible behavior - INSTANT TOGGLE APPROACH */
+/* Collapsible behavior - ICON-ONLY MODE APPROACH */
 .rt-SidebarRoot:where([data-collapsible="icon"]) {
   /* No transitions - instant state changes for better UX */
   transition: none;
-  overflow: hidden; /* Prevent content from spilling out when width is 0 */
+  overflow: visible; /* Allow content to be visible */
   flex-shrink: 0; /* Don't let flex container shrink this */
 }
 
-/* Exception: floating ghost sidebars need visible overflow for shadows */
-.rt-SidebarContainer:where(.rt-variant-ghost[data-collapsible="icon"][data-type="floating"]) {
-  overflow: visible !important; /* Allow shadows to show - override the hidden overflow */
+/* Icon-only width - size-specific space tokens */
+:where(.radix-themes) {
+  --sidebar-icon-width-1: calc(var(--space-9) + var(--space-1)); /* Size 1: 36px */
+  --sidebar-icon-width-2: calc(var(--space-9) + var(--space-3)); /* Size 2: 76px */
 }
 
-/* Collapsed state - instant width change, no layout escape */
+/* Icon-only collapsed state - show narrow sidebar with icons only */
 .rt-SidebarRoot:where([data-collapsible="icon"][data-state="collapsed"]) {
-  width: 0;
-  min-width: 0; /* Allow width to go to 0 */
-  opacity: 0; /* Hide content for accessibility */
-  pointer-events: none; /* Disable interactions */
-  /* Keep in layout flow - no position changes */
+  opacity: 1; /* Keep visible */
+  pointer-events: auto; /* Keep interactive */
+  
+  /* Size-specific widths */
+  &:where(.rt-r-size-1) {
+    width: var(--sidebar-icon-width-1);
+    min-width: var(--sidebar-icon-width-1);
+  }
+  
+  &:where(.rt-r-size-2) {
+    width: var(--sidebar-icon-width-2);
+    min-width: var(--sidebar-icon-width-2);
+  }
 }
 
-/* Expanded state */
+/* Expanded state - full width */
 .rt-SidebarRoot:where([data-collapsible="icon"][data-state="expanded"]) {
   width: var(--sidebar-width);
-  min-width: var(--sidebar-width); /* Prevent shrinking */
+  min-width: var(--sidebar-width);
   opacity: 1;
   pointer-events: auto;
 }
 
-/* Container locking for stable layouts */
+/* Container sizing for icon mode */
+.rt-SidebarContainer:where([data-collapsible="icon"]) {
+  /* Allow dynamic width based on state */
+  width: 100%;
+  min-width: 0;
+  flex-shrink: 0;
+}
+
+/* Content adjustments for icon mode */
+.rt-SidebarContent:where([data-collapsible="icon"]) {
+  /* Allow content to shrink in icon mode */
+  width: 100%;
+  min-width: 0;
+  flex-shrink: 0;
+}
+
+/* Hide text content in collapsed icon mode */
 .rt-SidebarRoot:where([data-collapsible="icon"][data-state="collapsed"]) {
-  /* Ensure the collapsed sidebar doesn't affect sibling layout */
-  flex-basis: 0;
-  width: 0;
+  /* Style menu buttons for icon-only mode */
+  & :where(.rt-SidebarMenuButton) {
+    justify-content: center;
+    flex-direction: column;
+    padding: var(--space-2) var(--space-1);
+    gap: var(--space-1);
+    min-height: auto;
+    
+    /* Show text spans as small labels under icons */
+    /* stylelint-disable-next-line selector-max-type */
+    & :where(span) {
+      display: block;
+      font-size: var(--font-size-0);
+      line-height: var(--line-height-0);
+      color: var(--gray-a10);
+      text-align: center;
+      font-weight: var(--font-weight-medium);
+      max-width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  /* Dynamic width calculation for labels inside collapsed icon sidebar */
+  &:where(.rt-r-size-1) {
+    /* Group labels (no button padding) */
+    --sidebar-group-label-width: calc(var(--sidebar-icon-width-1) - (var(--space-2) * 2));
+    /* Button labels (inside menu buttons, subtract button padding) */
+    --sidebar-button-label-width: calc(var(--sidebar-group-label-width) - (var(--space-1) * 2));
+  }
+
+  &:where(.rt-r-size-2) {
+    --sidebar-group-label-width: calc(var(--sidebar-icon-width-2) - (var(--space-2) * 2));
+    --sidebar-button-label-width: calc(var(--sidebar-group-label-width) - (var(--space-1) * 2));
+  }
+ 
+  /* Apply the computed width to both group labels and the spans inside icon buttons */
+  & :where(.rt-SidebarGroupLabel) {
+    max-width: var(--sidebar-group-label-width);
+  }
+ 
+  /* stylelint-disable-next-line selector-max-type */
+  & :where(.rt-SidebarMenuButton span) {
+    max-width: var(--sidebar-button-label-width);
+    min-width: 0; /* allow shrinking */
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--gray-a12);
+    font-weight: var(--font-weight-medium);
+  }
+
+  /* stylelint-disable selector-max-type, selector-max-specificity */
+  &.rt-menu-variant-solid :where(.rt-SidebarMenuButton[data-highlighted] span),
+  &.rt-menu-variant-solid :where(.rt-SidebarMenuButton[data-active] span) {
+    color: var(--accent-contrast) !important;
+  }
+  /* stylelint-enable selector-max-type, selector-max-specificity */
+  
+  /* Show group labels as small text instead of separators */
+  :where(.rt-SidebarGroupLabel) {
+    /* Use block display to make text-overflow ellipsis work reliably */
+    display: block;
+    text-align: center;
+    min-width: 0;
+    min-height: auto; /* Remove inherited min-height constraint */
+    max-width: var(--sidebar-group-label-width);
+    font-size: var(--font-size-0);
+    line-height: var(--line-height-0);
+    color: var(--gray-a9);
+    font-weight: var(--font-weight-medium);
+    padding: var(--space-1) var(--space-1);
+    margin: var(--space-2) 0 var(--space-1) 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    
+    /* Hide label for the first group if you prefer */
+    :where(.rt-SidebarGroup:first-child) & {
+      margin-top: 0;
+    }
+  }
+  
+  /* Hide badges and shortcuts */
+  :where(.rt-SidebarMenuBadge),
+  :where(.rt-SidebarMenuShortcut) {
+    display: none;
+  }
+  
+  /* Keep sub-menu trigger icons hidden in icon mode, but preserve accordion functionality */
+  :where(.rt-SidebarMenuSubTriggerIcon) {
+    display: none;
+  }
+  
+  /* Remove nested styling from sub-menu list to make items look like top-level */
+  :where(.rt-SidebarMenuSubList) {
+    padding-left: 0; /* Remove indentation */
+    border-left: none; /* Remove border */
+    margin-left: 0; /* Remove margin */
+  }
+  
+  /* Tighter menu padding for icon-only mode */
+  :where(.rt-SidebarMenu) {
+    padding: var(--space-2);
+  }
 }
 
-.rt-SidebarRoot:where([data-collapsible="icon"][data-state="expanded"]) {
-  flex-basis: var(--sidebar-width);
-  width: var(--sidebar-width);
+/* Icon size remapping for collapsed state - make icons more prominent */
+.rt-SidebarRoot:where([data-collapsible="icon"][data-state="collapsed"]) {
+  /* Size 1 → use much larger icons (size 3 equivalent) */
+  &:where(.rt-r-size-1) {
+    /* stylelint-disable-next-line selector-max-type */
+    & :where(.rt-SidebarMenuButton svg) {
+      width: var(--content-icon-size-2) !important;  /* ~19px instead of ~14px */
+      height: var(--content-icon-size-2) !important;
+      color: currentColor !important; /* Ensure icon color is visible */
+    }
+  }
+  
+  /* Size 2 → use largest icons (size 4 equivalent) */
+  &:where(.rt-r-size-2) {
+    /* stylelint-disable-next-line selector-max-type */
+    & :where(.rt-SidebarMenuButton svg) {
+      width: var(--content-icon-size-3) !important;  /* 20px instead of 16px */
+      height: var(--content-icon-size-3) !important;
+      color: currentColor !important; /* Ensure icon color is visible */
+    }
+  }
 }
 
-/* Floating sidebars: Similar approach but can fully hide */
+/* Floating sidebars in icon mode */
 .rt-SidebarRoot:where([data-collapsible="icon"][data-type="floating"]) {
   /* Same instant approach */
   transition: none;
-  overflow: hidden; /* Default: prevent spillover */
+  overflow: visible; /* Allow content to be visible outside container */
   flex-shrink: 0;
 }
 
-/* Exception: floating ghost sidebars need visible overflow for shadows */
-.rt-SidebarRoot:where([data-collapsible="icon"][data-type="floating"]:has(.rt-variant-ghost)) {
-  overflow: visible; /* Allow shadows to show */
-}
-
-/* Collapsed state - instant width change, no layout escape */
-.rt-SidebarRoot:where([data-collapsible="icon"][data-state="collapsed"]) {
-  width: 0;
-  min-width: 0;
-  opacity: 0;
-  pointer-events: none;
-  /* For floating, we can add margin to create visual separation when expanded */
-  margin: 0;
+/* Floating collapsed state */
+.rt-SidebarRoot:where([data-collapsible="icon"][data-type="floating"][data-state="collapsed"]) {
+  opacity: 1;
+  pointer-events: auto;
+  /* Keep floating margins but adjust for smaller width */
+  margin: var(--space-2);
+  
+  /* Size-specific widths */
+  &:where(.rt-r-size-1) {
+    width: var(--sidebar-icon-width-1);
+    min-width: var(--sidebar-icon-width-1);
+  }
+  
+  &:where(.rt-r-size-2) {
+    width: var(--sidebar-icon-width-2);
+    min-width: var(--sidebar-icon-width-2);
+  }
 }
 
 .rt-SidebarRoot:where([data-collapsible="icon"][data-type="floating"][data-state="expanded"]) {
@@ -1053,31 +842,15 @@
   pointer-events: auto;
   /* Restore floating margins */
   margin: var(--space-2);
-  /* Remove the width override - let margin work naturally */
-}
-
-/* Content protection - prevent internal reflow */
-.rt-SidebarContainer:where([data-collapsible="icon"]) {
-  /* Lock the content size to prevent internal shifting */
-  width: var(--sidebar-width);
-  min-width: var(--sidebar-width);
-  flex-shrink: 0;
-}
-
-.rt-SidebarContent:where([data-collapsible="icon"]) {
-  /* Prevent content from reflowing */
-  width: 100%;
-  min-width: var(--sidebar-width);
-  flex-shrink: 0;
 }
 
-/* Mobile responsive behavior - hide completely */
+/* Mobile responsive behavior - hide completely on mobile regardless of icon mode */
 @media (max-width: 768px) {
-  .rt-SidebarRoot {
+  .rt-SidebarRoot:where([data-collapsible="icon"]) {
     display: none;
   }
   
-  .rt-SidebarRoot:where([data-state="expanded"]) {
+  .rt-SidebarRoot:where([data-collapsible="icon"][data-state="expanded"]) {
     display: flex;
     position: fixed;
     top: 0;
@@ -1094,38 +867,4 @@
   .rt-SidebarRoot:where([data-collapsible="icon"]) {
     transition: none;
   }
-}
-
-/* Responsive behavior */
-@media (max-width: 768px) {
-  .rt-SidebarRoot {
-    display: none;
-  }
-}
-
-/* Reduce right padding on menu buttons with trailing elements */
-.rt-SidebarMenuButton:where(:has(.rt-SidebarMenuShortcut, .rt-SidebarMenuBadge)) {
-  /* Use base menu padding tokens */
-  :where(.rt-SidebarContent.rt-r-size-1) & {
-    padding-right: var(--base-menu-item-padding-y); /* Matches top/bottom padding */
-  }
-  
-  :where(.rt-SidebarContent.rt-r-size-2) & {
-    padding-right: var(--base-menu-item-padding-y); /* Matches top/bottom padding */
-  }
-}
-
-.rt-SidebarMenuShortcut {
-  display: flex;
-  align-items: center;
-  margin-left: auto;
-  padding-left: var(--space-4);
-  color: var(--gray-a11);
-}
-
-.rt-SidebarMenuBadge {
-  display: flex;
-  align-items: center;
-  margin-left: auto;
-  padding-left: var(--space-2);
 }