@kushagradhawan/kookie-ui 0.1.26 → 0.1.28

package/src/components/sidebar.css

@@ -75,7 +75,7 @@
   flex: 1;
 }
 
-.rt-SidebarContainer:where(.rt-variant-surface) {
+.rt-SidebarContainer:where(.rt-variant-outline) {
   background-color: var(--color-panel);
   backdrop-filter: var(--backdrop-filter-panel);
   
@@ -303,7 +303,7 @@
   border: none;
   width: 100%;
   text-align: left;
-  border-radius: var(--radius-2); /* Will be overridden by size-specific radius */
+  /* No default border radius - inherited from size-specific rules */
 
   /* Transitions - inherit from base menu */
   transition: var(--transition-menu);
@@ -580,9 +580,6 @@
   }
 }
 
-.rt-SidebarGroupContent {
-  /* No styling - purely semantic container */
-}
 
 /***************************************************************************************************
  *                                                                                                 *
@@ -627,6 +624,7 @@
       line-height: var(--line-height-1);
       letter-spacing: var(--letter-spacing-1);
       border-radius: var(--radius-1);
+      font-weight: var(--font-weight-medium); /* Add this line */
 
       /* stylelint-disable-next-line selector-max-type */
       & :where(svg) {
@@ -652,6 +650,8 @@
       line-height: var(--line-height-2);
       letter-spacing: var(--letter-spacing-2);
       border-radius: var(--radius-2);
+      font-weight: var(--font-weight-medium); /* Add this line */
+
 
       /* stylelint-disable-next-line selector-max-type */
       & :where(svg) {
@@ -710,15 +710,65 @@
       --backdrop-filter-components: blur(var(--backdrop-blur-components));
     }
   }
-}
+  &: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);
+    }
 
-/* Floating shadows - only for ghost variant */
-.rt-SidebarContainer:where(.rt-variant-ghost) {
-  :where(.rt-SidebarRoot[data-type="floating"]) & {
-    box-shadow: var(--shadow-4);
+    /* 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);
+      
+      /* 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);
+      
+      /* 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);
+      
+      /* Theme-level translucent override */
+      :where([data-panel-background='translucent']) & {
+        box-shadow: inset 1px 0 0 0 var(--gray-a6);
+      }
+    }
   }
 }
 
+/* Ghost variant should have no shadows or background - it's truly transparent */
+
 /* Menu Button Variants - Independent of Container */
 
 /* Menu Variant: Solid - EXACT match to base menu */
@@ -975,75 +1025,233 @@
   }
 }
 
-/* Ensure menu items inherit proper theming and spacing for sidebar */
+/* Add balanced spacing for sidebar menu items while preserving base menu border radius */
 .rt-SidebarContent :where(.rt-BaseMenuItem) {
-  border-radius: var(--radius-2);
-  margin-bottom: var(--space-1);
+  margin-top: calc(var(--space-1) / 2);
+  margin-bottom: calc(var(--space-1) / 2);
 }
 
-/* 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                        */
+  /* ------------------------------------------------------------------------------------------ */
+
+  /* Compute usable label width based on sidebar icon width minus menu and item paddings */
+  &: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 */
+
+  /* Size-specific overrides no longer needed – allow full width */
+  /* The general label/span rules below already handle ellipsis and overflow */
+  
+  /* 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 +1261,17 @@
   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;
-}
+/* Ghost sidebars have no shadows or background, so no special overflow handling needed */
 
-/* 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;

package/src/components/sidebar.props.tsx

@@ -14,7 +14,7 @@ export {
 
 // Sidebar container props
 const sizes = ['1', '2'] as const;
-const variants = ['soft', 'surface', 'ghost'] as const;
+const variants = ['soft', 'outline', 'surface', 'ghost'] as const;
 const menuVariants = ['solid', 'soft'] as const;
 const types = ['sidebar', 'floating'] as const;
 const sides = ['left', 'right'] as const;
@@ -23,7 +23,7 @@ const collapsibleModes = ['offcanvas', 'icon', 'none'] as const;
 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: 'surface' },
+  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'outline' },
   menuVariant: {
     type: 'enum',
     className: 'rt-menu-variant',

package/src/components/sidebar.tsx

@@ -40,7 +40,7 @@ type SidebarContextProps = {
   toggleSidebar: () => void;
   side: 'left' | 'right';
   type: 'sidebar' | 'floating';
-  variant: 'soft' | 'surface' | 'ghost';
+  variant: 'soft' | 'outline' | 'surface' | 'ghost';
   menuVariant: 'solid' | 'soft';
   collapsible: 'offcanvas' | 'icon' | 'none';
   size: '1' | '2';
@@ -298,7 +298,7 @@ const SidebarContent = React.forwardRef<HTMLDivElement, SidebarContentProps>(
     } = context || {};
 
     return (
-      <ScrollArea type="auto">
+      <ScrollArea type="hover">
         <div
           {...props}
           ref={forwardedRef}

package/src/props/layout.props.ts

@@ -10,6 +10,8 @@ const positionValues = ['static', 'relative', 'absolute', 'fixed', 'sticky'] as
 const positionEdgeValues = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '-1', '-2', '-3', '-4', '-5', '-6', '-7', '-8', '-9'] as const;
 const flexShrinkValues = ['0', '1'] as const;
 const flexGrowValues = ['0', '1'] as const;
+const alignSelfValues = ['start', 'center', 'end', 'baseline', 'stretch'] as const;
+const justifySelfValues = ['start', 'center', 'end', 'baseline', 'stretch'] as const;
 
 const layoutPropDefs = {
   ...paddingPropDefs,
@@ -358,6 +360,40 @@ const layoutPropDefs = {
     customProperties: ['--grid-row-end'],
     responsive: true,
   },
+  /**
+   * Sets the CSS **align-self** property.
+   * Supports a subset of the corresponding CSS values and responsive objects.
+   *
+   * @example
+   * alignSelf="center"
+   * alignSelf={{ sm: 'start', lg: 'center' }}
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/align-self
+   */
+  alignSelf: {
+    type: 'enum',
+    className: 'rt-r-as',
+    values: alignSelfValues,
+    responsive: true,
+  },
+  /**
+   * Sets the CSS **justify-self** property.
+   * Supports a subset of the corresponding CSS values and responsive objects.
+   *
+   * @example
+   * justifySelf="center"
+   * justifySelf={{ sm: 'start', lg: 'center' }}
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self
+   */
+  justifySelf: {
+    type: 'enum',
+    className: 'rt-r-js',
+    values: justifySelfValues,
+    responsive: true,
+  },
 } satisfies {
   position: PropDef<(typeof positionValues)[number]>;
   inset: PropDef<(typeof positionEdgeValues)[number]>;
@@ -378,6 +414,8 @@ const layoutPropDefs = {
   gridRowStart: PropDef<string>;
   gridRowEnd: PropDef<string>;
   gridArea: PropDef<string>;
+  alignSelf: PropDef<(typeof alignSelfValues)[number]>;
+  justifySelf: PropDef<(typeof justifySelfValues)[number]>;
 };
 
 // Use all of the imported prop defs to ensure that JSDoc works

package/src/styles/tokens/radius.css

@@ -1,5 +1,5 @@
 [data-radius] {
-  --radius-1: calc(8px * var(--scaling) * var(--radius-factor));
+  --radius-1: calc(7px * var(--scaling) * var(--radius-factor));
   --radius-2: calc(10px * var(--scaling) * var(--radius-factor));
   --radius-3: calc(12px * var(--scaling) * var(--radius-factor));
   --radius-4: calc(14px * var(--scaling) * var(--radius-factor));

package/src/styles/utilities/align-content.css

@@ -0,0 +1,33 @@
+@breakpoints {
+  .rt-r-ac-start {
+    align-content: start;
+  }
+
+  .rt-r-ac-center {
+    align-content: center;
+  }
+
+  .rt-r-ac-end {
+    align-content: end;
+  }
+
+  .rt-r-ac-baseline {
+    align-content: baseline;
+  }
+
+  .rt-r-ac-stretch {
+    align-content: stretch;
+  }
+
+  .rt-r-ac-space-between {
+    align-content: space-between;
+  }
+
+  .rt-r-ac-space-around {
+    align-content: space-around;
+  }
+
+  .rt-r-ac-space-evenly {
+    align-content: space-evenly;
+  }
+}

package/src/styles/utilities/align-self.css

@@ -1,6 +1,6 @@
 @breakpoints {
   .rt-r-as-start {
-    align-self: flex-start;
+    align-self: start;
   }
 
   .rt-r-as-center {
@@ -8,7 +8,7 @@
   }
 
   .rt-r-as-end {
-    align-self: flex-end;
+    align-self: end;
   }
 
   .rt-r-as-baseline {

package/src/styles/utilities/justify-items.css

@@ -0,0 +1,21 @@
+@breakpoints {
+  .rt-r-ji-start {
+    justify-items: start;
+  }
+
+  .rt-r-ji-center {
+    justify-items: center;
+  }
+
+  .rt-r-ji-end {
+    justify-items: end;
+  }
+
+  .rt-r-ji-baseline {
+    justify-items: baseline;
+  }
+
+  .rt-r-ji-stretch {
+    justify-items: stretch;
+  }
+}

package/src/styles/utilities/justify-self.css

@@ -0,0 +1,21 @@
+@breakpoints {
+  .rt-r-js-start {
+    justify-self: start;
+  }
+
+  .rt-r-js-center {
+    justify-self: center;
+  }
+
+  .rt-r-js-end {
+    justify-self: end;
+  }
+
+  .rt-r-js-baseline {
+    justify-self: baseline;
+  }
+
+  .rt-r-js-stretch {
+    justify-self: stretch;
+  }
+}

package/src/styles/utilities/layout.css

@@ -1,5 +1,6 @@
 @import '../breakpoints.css';
 
+@import './align-content.css';
 @import './align-items.css';
 @import './align-self.css';
 @import './display.css';
@@ -25,6 +26,8 @@
 @import './max-height.css';
 @import './inset.css';
 @import './justify-content.css';
+@import './justify-items.css';
+@import './justify-self.css';
 @import './margin.css';
 @import './overflow.css';
 @import './padding.css';