@kushagradhawan/kookie-ui 0.1.28 → 0.1.30

package/src/components/_internal/base-radio.css

@@ -15,6 +15,27 @@
   border-radius: var(--skeleton-radius);
   --skeleton-radius-override: 100%;
 
+
+  /* Theme-level translucent override */
+  :where([data-panel-background='translucent'], [data-material='translucent']) & {
+    backdrop-filter: var(--backdrop-filter-components);
+    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+  }
+
+  /* Prevent backdrop-filter stacking with parents */
+  isolation: isolate;
+
+  /* Component-level overrides */
+  &:where([data-panel-background='solid'], [data-material='solid']) {
+    backdrop-filter: none;
+    --backdrop-filter-components: none;
+  }
+  
+  &:where([data-panel-background='translucent'], [data-material='translucent']) {
+    backdrop-filter: var(--backdrop-filter-components);
+    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+  }
+
   &:where(:disabled, [data-disabled]) {
     cursor: var(--cursor-disabled);
   }
@@ -81,11 +102,12 @@
 
 .rt-BaseRadioRoot:where(.rt-variant-solid) {
   &:where(:not(:checked), [data-state='unchecked'])::before {
-    background-color: var(--color-surface);
-    box-shadow: inset 0 0 0 1px var(--gray-a7);
+    background-color: transparent;
+    box-shadow: inset 0 0 0 1px var(--accent-9);
   }
   &:where(:checked, [data-state='checked'])::before {
-    background-color: var(--accent-indicator);
+    background-color: var(--accent-9);
+    box-shadow: inset 0 0 0 1px var(--accent-9);
   }
   &::after {
     background-color: var(--accent-contrast);
@@ -94,9 +116,10 @@
   &:where(.rt-high-contrast) {
     &:where(:checked, [data-state='checked'])::before {
       background-color: var(--accent-12);
+      box-shadow: inset 0 0 0 1px var(--accent-12);
     }
     &::after {
-      background-color: var(--accent-1);
+      background-color: var(--gray-1);
     }
   }
 
@@ -116,64 +139,50 @@
   top: var(--classic-elevation-offset);
   
   &:where(:not(:checked), [data-state='unchecked'])::before {
-    background-color: var(--accent-2);
-    /* prettier-ignore */
-    box-shadow:
-      inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--accent-a2),
-      inset 0 var(--classic-border-width) var(--white-a12),
-      inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--accent-a2),
-      inset 0 calc(-1 * var(--classic-border-width)) var(--accent-a6),
-      0 0 0 var(--classic-border-width) var(--accent-a5),
-      0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--accent-a7);
-  }
-  
-  :where(.dark, .dark-theme) &,
-  :where(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) & {
-    &:where(:not(:checked), [data-state='unchecked'])::before {
-      /* prettier-ignore */
-      box-shadow:
-        inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--accent-a3),
-        inset 0 var(--classic-border-width) var(--accent-a11),
-        inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--accent-a2),
-        inset 0 calc(-2 * var(--classic-border-width)) var(--black-a11),
-        0 0 0 var(--classic-border-width-thick) var(--accent-a7),
-        0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--black-a12);
+    color: var(--accent-a11);
+    background-color: var(--color-surface-solid);
+    box-shadow: var(--shadow-2);
+
+    /* Theme-level translucent override */
+    :where([data-panel-background='translucent'], [data-material='translucent']) & {
+      background-color: var(--color-surface-translucent);
+    }
+
+    /* Component-level overrides (higher specificity) */
+    &:where([data-panel-background='solid'], [data-material='solid']) {
+      background-color: var(--color-surface-solid);
+    }
+
+    &:where([data-panel-background='translucent'], [data-material='translucent']) {
+      background-color: var(--color-surface-translucent);
     }
   }
   
   &:where(:checked, [data-state='checked'])::before {
     background-color: var(--accent-3);
-    /* prettier-ignore */
-    box-shadow:
-      inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--accent-a2),
-      inset 0 var(--classic-border-width) var(--white-a12),
-      inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--accent-a2),
-      inset 0 calc(-1 * var(--classic-border-width)) var(--accent-a6),
-      0 0 0 var(--classic-border-width) var(--accent-a5),
-      0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--accent-a7);
+    box-shadow: var(--shadow-1);
+
+    /* Theme-level translucent override */
+    :where([data-panel-background='translucent'], [data-material='translucent']) & {
+      background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
+    }
+
+    /* Component-level overrides (higher specificity) */
+    &:where([data-panel-background='solid'], [data-material='solid']) {
+      background-color: var(--accent-3);
+    }
+
+    &:where([data-panel-background='translucent'], [data-material='translucent']) {
+      background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
+    }
   }
   &::after {
     background-color: var(--accent-a11);
   }
-  
-  :where(.dark, .dark-theme) &,
-  :where(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) & {
-    &:where(:checked, [data-state='checked'])::before {
-      background-color: var(--accent-3);
-      /* prettier-ignore */
-      box-shadow:
-        inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--accent-a3),
-        inset 0 var(--classic-border-width) var(--accent-a11),
-        inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--accent-a2),
-        inset 0 calc(-2 * var(--classic-border-width)) var(--black-a11),
-        0 0 0 var(--classic-border-width-thick) var(--accent-a7),
-        0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--black-a12);
-    }
-  }
 
   &:where(.rt-high-contrast) {
     &::after {
-      background-color: var(--accent-12);
+      color: var(--accent-12);
     }
   }
 
@@ -181,7 +190,22 @@
     top: calc(var(--classic-elevation-offset) + var(--classic-active-padding-offset-1));
     
     &::before {
-      box-shadow: inset 0 var(--classic-border-width) var(--black-a3), 0 0 0 var(--classic-border-width) var(--accent-a7);
+      background-color: var(--accent-3);
+      box-shadow: var(--shadow-1);
+
+      /* Theme-level translucent override for active */
+      :where([data-panel-background='translucent'], [data-material='translucent']) & {
+        background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
+      }
+
+      /* Component-level overrides for active */
+      &:where([data-panel-background='solid'], [data-material='solid']) {
+        background-color: var(--accent-3);
+      }
+
+      &:where([data-panel-background='translucent'], [data-material='translucent']) {
+        background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
+      }
     }
   }
 
@@ -202,7 +226,21 @@
 
 .rt-BaseRadioRoot:where(.rt-variant-soft) {
   &::before {
-    background-color: var(--accent-a4);
+    background-color: var(--accent-3);
+
+    /* Theme-level translucent override */
+    :where([data-panel-background='translucent'], [data-material='translucent']) & {
+      background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
+    }
+
+    /* Component-level overrides (higher specificity) */
+    &:where([data-panel-background='solid'], [data-material='solid']) {
+      background-color: var(--accent-3);
+    }
+
+    &:where([data-panel-background='translucent'], [data-material='translucent']) {
+      background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
+    }
   }
   &::after {
     background-color: var(--accent-a11);
@@ -226,3 +264,135 @@
     background-color: var(--gray-a8);
   }
 }
+
+
+
+/* outline */
+
+.rt-BaseRadioRoot:where(.rt-variant-outline) {
+  &:where(:not(:checked), [data-state='unchecked'])::before {
+    box-shadow: inset 0 0 0 1px var(--accent-6);
+    color: var(--accent-11);
+
+    /* Theme-level translucent override */
+    :where([data-panel-background='translucent'], [data-material='translucent']) & {
+      box-shadow: inset 0 0 0 1px var(--accent-a6);
+      color: var(--accent-a11);
+    }
+
+    /* Component-level overrides (higher specificity) */
+    &:where([data-panel-background='solid'], [data-material='solid']) {
+      box-shadow: inset 0 0 0 1px var(--accent-6);
+      color: var(--accent-11);
+    }
+
+    &:where([data-panel-background='translucent'], [data-material='translucent']) {
+      box-shadow: inset 0 0 0 1px var(--accent-a6);
+      color: var(--accent-a11);
+    }
+  }
+
+  &:where(:checked, [data-state='checked'])::before {
+    background-color: var(--accent-2);
+    box-shadow: inset 0 0 0 1px var(--accent-7);
+
+    /* Theme-level translucent override */
+    :where([data-panel-background='translucent'], [data-material='translucent']) & {
+      background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
+      box-shadow: inset 0 0 0 1px var(--accent-a7);
+    }
+
+    /* Component-level overrides (higher specificity) */
+    &:where([data-panel-background='solid'], [data-material='solid']) {
+      background-color: var(--accent-2);
+      box-shadow: inset 0 0 0 1px var(--accent-7);
+    }
+
+    &:where([data-panel-background='translucent'], [data-material='translucent']) {
+      background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
+      box-shadow: inset 0 0 0 1px var(--accent-a7);
+    }
+  }
+  &::after {
+    background-color: var(--accent-a11);
+  }
+
+  &:where(.rt-high-contrast) {
+    &::after {
+      background-color: var(--accent-12);
+    }
+  }
+
+  &:where(:disabled, [data-disabled])::before {
+    box-shadow: inset 0 0 0 1px var(--gray-a7);
+    background-color: transparent;
+  }
+  &:where(:disabled, [data-disabled])::after {
+    background-color: var(--gray-a8);
+  }
+}
+
+/* surface */
+
+.rt-BaseRadioRoot:where(.rt-variant-surface) {
+  &:where(:not(:checked), [data-state='unchecked'])::before {
+    background-color: var(--accent-2);
+    box-shadow: inset 0 0 0 1px var(--accent-6);
+
+    /* Theme-level translucent override */
+    :where([data-panel-background='translucent'], [data-material='translucent']) & {
+      background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
+      box-shadow: inset 0 0 0 1px var(--accent-a6);
+    }
+
+    /* Component-level overrides (higher specificity) */
+    &:where([data-panel-background='solid'], [data-material='solid']) {
+      background-color: var(--accent-2);
+      box-shadow: inset 0 0 0 1px var(--accent-6);
+    }
+
+    &:where([data-panel-background='translucent'], [data-material='translucent']) {
+      background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
+      box-shadow: inset 0 0 0 1px var(--accent-a6);
+    }
+  }
+
+  &:where(:checked, [data-state='checked'])::before {
+    background-color: var(--accent-3);
+    box-shadow: inset 0 0 0 1px var(--accent-8);
+
+    /* Theme-level translucent override */
+    :where([data-panel-background='translucent'], [data-material='translucent']) & {
+      background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
+      box-shadow: inset 0 0 0 1px var(--accent-a8);
+    }
+
+    /* Component-level overrides (higher specificity) */
+    &:where([data-panel-background='solid'], [data-material='solid']) {
+      background-color: var(--accent-3);
+      box-shadow: inset 0 0 0 1px var(--accent-8);
+    }
+
+    &:where([data-panel-background='translucent'], [data-material='translucent']) {
+      background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
+      box-shadow: inset 0 0 0 1px var(--accent-a8);
+    }
+  }
+  &::after {
+    background-color: var(--accent-a11);
+  }
+
+  &:where(.rt-high-contrast) {
+    &::after {
+      background-color: var(--accent-12);
+    }
+  }
+
+  &:where(:disabled, [data-disabled])::before {
+    box-shadow: inset 0 0 0 1px var(--gray-a6);
+    background-color: var(--gray-a2);
+  }
+  &:where(:disabled, [data-disabled])::after {
+    background-color: var(--gray-a8);
+  }
+}

package/src/components/_internal/base-radio.props.ts

@@ -4,16 +4,19 @@ import { highContrastPropDef } from '../../props/high-contrast.prop.js';
 import type { PropDef } from '../../props/prop-def.js';
 
 const sizes = ['1', '2', '3'] as const;
-const variants = ['classic', 'solid', 'soft'] as const;
+const variants = ['classic', 'solid', 'soft', 'outline', 'surface'] as const;
+const materials = ['solid', 'translucent'] as const;
 
 const baseRadioPropDefs = {
   size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
   variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'solid' },
+  material: { type: 'enum', values: materials, default: undefined },
   ...colorPropDef,
   ...highContrastPropDef,
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;
   variant: PropDef<(typeof variants)[number]>;
+  material: PropDef<(typeof materials)[number] | undefined>;
 };
 
 export { baseRadioPropDefs };

package/src/components/_internal/base-sidebar-menu.css

@@ -0,0 +1,223 @@
+/* Base Sidebar Menu Styles */
+
+/* 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);
+  }
+}
+
+/* Sidebar Menu Item */
+.rt-SidebarMenuItem {
+  list-style: none;
+}
+
+/* Sidebar Menu Button - inherit from BaseMenuItem */
+.rt-SidebarMenuButton {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2); /* Will be overridden by size-specific gap */
+  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;
+  scroll-margin: var(--base-menu-content-padding) 0;
+  background: none;
+  border: none;
+  width: 100%;
+  text-align: left;
+  /* No default border radius - inherited from size-specific rules */
+
+  /* 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);
+  }
+
+  /* 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);
+}
+
+/* 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);
+  }
+}
+
+/* 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);
+}
+
+/* Add balanced spacing for sidebar menu items while preserving base menu border radius */
+.rt-SidebarContent :where(.rt-BaseMenuItem) {
+  margin-top: calc(var(--space-1) / 2);
+  margin-bottom: calc(var(--space-1) / 2);
+}