@kushagradhawan/kookie-ui 0.1.44 → 0.1.45

package/dist/esm/components/sidebar.props.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/sidebar.props.tsx"],
-  "sourcesContent": ["import { asChildPropDef } from '../props/as-child.prop.js';\nimport { colorPropDef } from '../props/color.prop.js';\nimport { highContrastPropDef } from '../props/high-contrast.prop.js';\n\nimport type { PropDef } from '../props/prop-def.js';\n\n// Re-export base menu props for sidebar menu components\nexport {\n  baseMenuContentPropDefs as sidebarContentPropDefs,\n  baseMenuItemPropDefs as sidebarItemPropDefs,\n  baseMenuCheckboxItemPropDefs as sidebarCheckboxItemPropDefs,\n  baseMenuRadioItemPropDefs as sidebarRadioItemPropDefs,\n} from './_internal/base-menu.props.js';\n\n// Sidebar container props\nconst sizes = ['1', '2'] as const;\nconst variants = ['soft', 'outline', 'surface', 'ghost'] as const;\nconst menuVariants = ['solid', 'soft'] as const;\nconst types = ['sidebar', 'floating'] as const;\nconst sides = ['left', 'right'] as const;\nconst collapsibleModes = ['offcanvas', 'icon', 'none'] as const;\nconst layouts = ['rail', 'panel'] as const;\n\nconst sidebarPropDefs = {\n  ...asChildPropDef,\n  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },\n  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'outline' },\n  menuVariant: {\n    type: 'enum',\n    className: 'rt-menu-variant',\n    values: menuVariants,\n    default: 'soft',\n  },\n  type: { type: 'enum', className: 'rt-type', values: types, default: 'sidebar' },\n  side: { type: 'enum', className: 'rt-side', values: sides, default: 'left' },\n  collapsible: {\n    type: 'enum',\n    className: 'rt-collapsible',\n    values: collapsibleModes,\n    default: 'offcanvas',\n  },\n  layout: { type: 'enum', className: 'rt-layout', values: layouts, default: undefined },\n  panelBackground: { type: 'enum', values: ['solid', 'translucent'], default: undefined },\n  ...colorPropDef,\n  ...highContrastPropDef,\n} satisfies {\n  size: PropDef<(typeof sizes)[number]>;\n  variant: PropDef<(typeof variants)[number]>;\n  menuVariant: PropDef<(typeof menuVariants)[number]>;\n  type: PropDef<(typeof types)[number]>;\n  side: PropDef<(typeof sides)[number]>;\n  collapsible: PropDef<(typeof collapsibleModes)[number]>;\n  layout: PropDef<(typeof layouts)[number]>;\n  panelBackground: PropDef<'solid' | 'translucent'>;\n};\n\nexport { sidebarPropDefs };\n"],
-  "mappings": "AAAA,OAAS,kBAAAA,MAAsB,4BAC/B,OAAS,gBAAAC,MAAoB,yBAC7B,OAAS,uBAAAC,MAA2B,iCAKpC,OAC6B,2BAA3BC,EACwB,wBAAxBC,EACgC,gCAAhCC,EAC6B,6BAA7BC,MACK,iCAGP,MAAMC,EAAQ,CAAC,IAAK,GAAG,EACjBC,EAAW,CAAC,OAAQ,UAAW,UAAW,OAAO,EACjDC,EAAe,CAAC,QAAS,MAAM,EAC/BC,EAAQ,CAAC,UAAW,UAAU,EAC9BC,EAAQ,CAAC,OAAQ,OAAO,EACxBC,EAAmB,CAAC,YAAa,OAAQ,MAAM,EAC/CC,EAAU,CAAC,OAAQ,OAAO,EAE1BC,EAAkB,CACtB,GAAGd,EACH,KAAM,CAAE,KAAM,OAAQ,UAAW,YAAa,OAAQO,EAAO,QAAS,IAAK,WAAY,EAAK,EAC5F,QAAS,CAAE,KAAM,OAAQ,UAAW,aAAc,OAAQC,EAAU,QAAS,SAAU,EACvF,YAAa,CACX,KAAM,OACN,UAAW,kBACX,OAAQC,EACR,QAAS,MACX,EACA,KAAM,CAAE,KAAM,OAAQ,UAAW,UAAW,OAAQC,EAAO,QAAS,SAAU,EAC9E,KAAM,CAAE,KAAM,OAAQ,UAAW,UAAW,OAAQC,EAAO,QAAS,MAAO,EAC3E,YAAa,CACX,KAAM,OACN,UAAW,iBACX,OAAQC,EACR,QAAS,WACX,EACA,OAAQ,CAAE,KAAM,OAAQ,UAAW,YAAa,OAAQC,EAAS,QAAS,MAAU,EACpF,gBAAiB,CAAE,KAAM,OAAQ,OAAQ,CAAC,QAAS,aAAa,EAAG,QAAS,MAAU,EACtF,GAAGZ,EACH,GAAGC,CACL",
+  "sourcesContent": ["import { asChildPropDef } from '../props/as-child.prop.js';\nimport { colorPropDef } from '../props/color.prop.js';\nimport { highContrastPropDef } from '../props/high-contrast.prop.js';\n\nimport type { PropDef } from '../props/prop-def.js';\n\n// Re-export base menu props for sidebar menu components\nexport {\n  baseMenuContentPropDefs as sidebarContentPropDefs,\n  baseMenuItemPropDefs as sidebarItemPropDefs,\n  baseMenuCheckboxItemPropDefs as sidebarCheckboxItemPropDefs,\n  baseMenuRadioItemPropDefs as sidebarRadioItemPropDefs,\n} from './_internal/base-menu.props.js';\n\n// Sidebar container props\nconst sizes = ['1', '2'] as const;\nconst variants = ['soft', 'outline', 'surface', 'ghost'] as const;\nconst menuVariants = ['solid', 'soft'] as const;\nconst types = ['sidebar'] as const;\nconst sides = ['left', 'right'] as const;\nconst collapsibleModes = ['offcanvas', 'icon', 'none'] as const;\nconst layouts = ['rail', 'panel'] as const;\n\nconst sidebarPropDefs = {\n  ...asChildPropDef,\n  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },\n  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'outline' },\n  menuVariant: {\n    type: 'enum',\n    className: 'rt-menu-variant',\n    values: menuVariants,\n    default: 'soft',\n  },\n  type: { type: 'enum', className: 'rt-type', values: types, default: 'sidebar' },\n  side: { type: 'enum', className: 'rt-side', values: sides, default: 'left' },\n  collapsible: {\n    type: 'enum',\n    className: 'rt-collapsible',\n    values: collapsibleModes,\n    default: 'offcanvas',\n  },\n  layout: { type: 'enum', className: 'rt-layout', values: layouts, default: undefined },\n  panelBackground: { type: 'enum', values: ['solid', 'translucent'], default: undefined },\n  ...colorPropDef,\n  ...highContrastPropDef,\n} satisfies {\n  size: PropDef<(typeof sizes)[number]>;\n  variant: PropDef<(typeof variants)[number]>;\n  menuVariant: PropDef<(typeof menuVariants)[number]>;\n  type: PropDef<(typeof types)[number]>;\n  side: PropDef<(typeof sides)[number]>;\n  collapsible: PropDef<(typeof collapsibleModes)[number]>;\n  layout: PropDef<(typeof layouts)[number]>;\n  panelBackground: PropDef<'solid' | 'translucent'>;\n};\n\nexport { sidebarPropDefs };\n"],
+  "mappings": "AAAA,OAAS,kBAAAA,MAAsB,4BAC/B,OAAS,gBAAAC,MAAoB,yBAC7B,OAAS,uBAAAC,MAA2B,iCAKpC,OAC6B,2BAA3BC,EACwB,wBAAxBC,EACgC,gCAAhCC,EAC6B,6BAA7BC,MACK,iCAGP,MAAMC,EAAQ,CAAC,IAAK,GAAG,EACjBC,EAAW,CAAC,OAAQ,UAAW,UAAW,OAAO,EACjDC,EAAe,CAAC,QAAS,MAAM,EAC/BC,EAAQ,CAAC,SAAS,EAClBC,EAAQ,CAAC,OAAQ,OAAO,EACxBC,EAAmB,CAAC,YAAa,OAAQ,MAAM,EAC/CC,EAAU,CAAC,OAAQ,OAAO,EAE1BC,EAAkB,CACtB,GAAGd,EACH,KAAM,CAAE,KAAM,OAAQ,UAAW,YAAa,OAAQO,EAAO,QAAS,IAAK,WAAY,EAAK,EAC5F,QAAS,CAAE,KAAM,OAAQ,UAAW,aAAc,OAAQC,EAAU,QAAS,SAAU,EACvF,YAAa,CACX,KAAM,OACN,UAAW,kBACX,OAAQC,EACR,QAAS,MACX,EACA,KAAM,CAAE,KAAM,OAAQ,UAAW,UAAW,OAAQC,EAAO,QAAS,SAAU,EAC9E,KAAM,CAAE,KAAM,OAAQ,UAAW,UAAW,OAAQC,EAAO,QAAS,MAAO,EAC3E,YAAa,CACX,KAAM,OACN,UAAW,iBACX,OAAQC,EACR,QAAS,WACX,EACA,OAAQ,CAAE,KAAM,OAAQ,UAAW,YAAa,OAAQC,EAAS,QAAS,MAAU,EACpF,gBAAiB,CAAE,KAAM,OAAQ,OAAQ,CAAC,QAAS,aAAa,EAAG,QAAS,MAAU,EACtF,GAAGZ,EACH,GAAGC,CACL",
   "names": ["asChildPropDef", "colorPropDef", "highContrastPropDef", "baseMenuContentPropDefs", "baseMenuItemPropDefs", "baseMenuCheckboxItemPropDefs", "baseMenuRadioItemPropDefs", "sizes", "variants", "menuVariants", "types", "sides", "collapsibleModes", "layouts", "sidebarPropDefs"]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kushagradhawan/kookie-ui",
-  "version": "0.1.44",
+  "version": "0.1.45",
   "description": "A modern React component library with beautiful design tokens, flexible theming, and comprehensive docs",
   "keywords": [
     "react",

package/schemas/base-button.json

@@ -279,6 +279,6 @@
   "title": "Base-button Component Props",
   "description": "Props schema for the base-button component in Kookie UI",
   "version": "1.0.0",
-  "generatedAt": "2025-09-10T07:32:12.386Z",
+  "generatedAt": "2025-09-10T11:43:38.640Z",
   "source": "Zod schema"
 }

package/schemas/button.json

@@ -530,6 +530,6 @@
   "title": "Button Component Props",
   "description": "Props schema for the button component in Kookie UI",
   "version": "1.0.0",
-  "generatedAt": "2025-09-10T07:32:12.390Z",
+  "generatedAt": "2025-09-10T11:43:38.645Z",
   "source": "Zod schema"
 }

package/schemas/icon-button.json

@@ -313,6 +313,6 @@
   "title": "Icon-button Component Props",
   "description": "Props schema for the icon-button component in Kookie UI",
   "version": "1.0.0",
-  "generatedAt": "2025-09-10T07:32:12.391Z",
+  "generatedAt": "2025-09-10T11:43:38.646Z",
   "source": "Zod schema"
 }

package/schemas/index.json

@@ -3,7 +3,7 @@
   "title": "Kookie UI Button Components",
   "description": "Complete JSON Schema collection for all button components in Kookie UI",
   "version": "1.0.0",
-  "generatedAt": "2025-09-10T07:32:12.394Z",
+  "generatedAt": "2025-09-10T11:43:38.648Z",
   "source": "Zod schemas",
   "components": {
     "base-button": {
@@ -287,7 +287,7 @@
       "title": "Base-button Component Props",
       "description": "Props schema for the base-button component in Kookie UI",
       "version": "1.0.0",
-      "generatedAt": "2025-09-10T07:32:12.386Z",
+      "generatedAt": "2025-09-10T11:43:38.640Z",
       "source": "Zod schema"
     },
     "button": {
@@ -822,7 +822,7 @@
       "title": "Button Component Props",
       "description": "Props schema for the button component in Kookie UI",
       "version": "1.0.0",
-      "generatedAt": "2025-09-10T07:32:12.390Z",
+      "generatedAt": "2025-09-10T11:43:38.645Z",
       "source": "Zod schema"
     },
     "icon-button": {
@@ -1140,7 +1140,7 @@
       "title": "Icon-button Component Props",
       "description": "Props schema for the icon-button component in Kookie UI",
       "version": "1.0.0",
-      "generatedAt": "2025-09-10T07:32:12.391Z",
+      "generatedAt": "2025-09-10T11:43:38.646Z",
       "source": "Zod schema"
     },
     "toggle-button": {
@@ -1683,7 +1683,7 @@
       "title": "Toggle-button Component Props",
       "description": "Props schema for the toggle-button component in Kookie UI",
       "version": "1.0.0",
-      "generatedAt": "2025-09-10T07:32:12.393Z",
+      "generatedAt": "2025-09-10T11:43:38.647Z",
       "source": "Zod schema"
     },
     "toggle-icon-button": {
@@ -2009,7 +2009,7 @@
       "title": "Toggle-icon-button Component Props",
       "description": "Props schema for the toggle-icon-button component in Kookie UI",
       "version": "1.0.0",
-      "generatedAt": "2025-09-10T07:32:12.394Z",
+      "generatedAt": "2025-09-10T11:43:38.648Z",
       "source": "Zod schema"
     }
   }

package/schemas/toggle-button.json

@@ -538,6 +538,6 @@
   "title": "Toggle-button Component Props",
   "description": "Props schema for the toggle-button component in Kookie UI",
   "version": "1.0.0",
-  "generatedAt": "2025-09-10T07:32:12.393Z",
+  "generatedAt": "2025-09-10T11:43:38.647Z",
   "source": "Zod schema"
 }

package/schemas/toggle-icon-button.json

@@ -321,6 +321,6 @@
   "title": "Toggle-icon-button Component Props",
   "description": "Props schema for the toggle-icon-button component in Kookie UI",
   "version": "1.0.0",
-  "generatedAt": "2025-09-10T07:32:12.394Z",
+  "generatedAt": "2025-09-10T11:43:38.648Z",
   "source": "Zod schema"
 }

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

@@ -1,4 +1,9 @@
-/* Base Sidebar Menu Styles */
+/*
+  Base Sidebar Menu Styles
+  - Extends Base Menu primitives for sidebar context
+  - Provides Sidebar menu structure: Menu, MenuItem, MenuButton, Sub* parts
+  - Relies on Base Menu tokens: --base-menu-*
+*/
 
 /* Sidebar Menu - based on rt-BaseMenuViewport */
 .rt-SidebarMenu {

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

@@ -1,4 +1,9 @@
-/* Base Sidebar Layout and Container Styles */
+/*
+  Base Sidebar Layout and Container Styles
+  - Slot containers: Root, Container, Header, Content, Footer, Separator
+  - No visual variants here; only structure and slot-level primitives
+  - Shared tokens defined/consumed: --sidebar-base-border-radius, etc.
+*/
 
 /* Sidebar Provider - handles positioning */
 .rt-SidebarProvider {
@@ -31,34 +36,6 @@
     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 */

package/src/components/shell.css

@@ -231,6 +231,28 @@
   transition: opacity var(--motion-duration-small) var(--motion-ease-standard);
 }
 
+/* Stacked Sidebar: left side, floating without reflow */
+.rt-ShellSidebar[data-presentation='stacked'] {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 0;
+  z-index: 31; /* between left and inspector; above content */
+  transform: translateX(-100%);
+  will-change: transform;
+  transition:
+    transform var(--motion-duration-small) var(--motion-ease-standard),
+    box-shadow var(--motion-duration-small) var(--motion-ease-standard);
+  box-shadow: 4px 0 12px -6px rgba(0, 0, 0, 0.2);
+}
+
+.rt-ShellSidebar[data-presentation='stacked'][data-open] {
+  transform: translateX(0);
+}
+
+.rt-ShellSidebar[data-presentation='stacked'][data-peek] {
+  transform: translateX(0);
+}
+
 /* Content - main work area (always required) */
 .rt-ShellContent {
   flex: 1;

package/src/components/shell.tsx

@@ -1577,6 +1577,7 @@ const Sidebar = React.forwardRef<
         data-mode={shell.sidebarMode}
         data-peek={shell.peekTarget === 'sidebar' || undefined}
         data-presentation={resolvedPresentation}
+        data-open={(isStacked && isContentVisible) || undefined}
         style={{
           ...style,
           ['--sidebar-size' as any]: `${expandedSize}px`,
@@ -2072,10 +2073,10 @@ interface TriggerProps extends React.ComponentPropsWithoutRef<'button'> {
   target: PaneTarget;
   action?: TriggerAction;
   /**
-   * If true, peeks the target on hover and clears on leave.
-   * If set to 'collapsed', only peeks when the target is currently collapsed (recommended).
+   * Whether to show peek preview on hover when the target pane is collapsed.
+   * Defaults to false.
    */
-  peekOnHover?: boolean | 'collapsed';
+  peekOnHover?: boolean;
 }
 
 const Trigger = React.forwardRef<HTMLButtonElement, TriggerProps>(
@@ -2132,12 +2133,9 @@ const Trigger = React.forwardRef<HTMLButtonElement, TriggerProps>(
     const handleMouseEnter = React.useCallback(
       (event: React.MouseEvent<HTMLButtonElement>) => {
         onMouseEnter?.(event);
-        if (!peekOnHover) return;
-        const shouldPeek = peekOnHover === 'collapsed' ? isCollapsed : true;
-        if (shouldPeek) {
-          // Use the actual target for peek behavior (not mapped to left)
-          shell.peekPane(target);
-        }
+        if (!peekOnHover || !isCollapsed) return;
+        // Use the actual target for peek behavior (not mapped to left)
+        shell.peekPane(target);
       },
       [onMouseEnter, peekOnHover, isCollapsed, shell, target],
     );

package/src/components/sidebar.css

@@ -1,3 +1,12 @@
+/*
+  Sidebar CSS (integration layer)
+  - Depends on Base Menu tokens/behavior
+  - Composes Sidebar container/layout + menu pieces
+  - Adds layout variants (rail/panel), sizes, and visual variants
+  - Non-breaking: organization and documentation only
+*/
+
+/* Imports: order matters → base tokens, container/layout, then menu parts */
 @import './_internal/base-menu.css';
 @import './_internal/base-sidebar.css';
 @import './_internal/base-sidebar-menu.css';
@@ -65,125 +74,70 @@
 
 /* Note: label styling omitted to avoid type-selector-specificity; use Text component for fine control */
 
-/* Container Variants */
-.rt-SidebarContainer:where(.rt-variant-outline) {
-  background-color: var(--color-panel);
-  backdrop-filter: var(--backdrop-filter-panel);
+/* Base variables and panel background support (mirrors Card pattern) */
+.rt-SidebarContainer {
+  --sidebar-border-width: 0px;
+  --sidebar-side-border-width: 0px;
+  --sidebar-background-color: transparent;
+  --sidebar-border-color: var(--gray-6);
+  transition: var(--transition-background-blur);
+  background-color: var(--sidebar-background-color);
 
-  /* Component-level overrides (higher specificity) - remap --color-panel */
-  &:where([data-panel-background='solid']) {
-    --color-panel: var(--color-panel-solid);
-    backdrop-filter: none;
-    --backdrop-filter-panel: none;
-    --backdrop-filter-components: none;
-  }
-
-  &:where([data-panel-background='translucent']) {
-    --color-panel: var(--color-panel-translucent);
+  /* Theme-level translucent override */
+  :where([data-panel-background='translucent']) & {
+    --sidebar-border-color: var(--gray-a6);
     backdrop-filter: var(--backdrop-filter-panel);
-    --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
   }
 
-  /* Floating sidebars get full inset border */
-  :where(.rt-SidebarRoot[data-type='floating']) & {
-    box-shadow: inset 0 0 0 1px var(--gray-a6);
+  /* Component-level overrides */
+  &:where([data-panel-background='solid']) {
+    backdrop-filter: none;
+    --backdrop-filter-panel: none;
   }
+}
 
-  /* 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-a6);
-  }
+/* Centralized borders: apply a consistent inset border; avoid context coupling */
+.rt-SidebarContainer {
+  /* Vertical-only borders (left & right), no top/bottom */
+  box-shadow:
+    inset var(--sidebar-side-border-width) 0 0 0 var(--sidebar-border-color),
+    inset calc(var(--sidebar-side-border-width) * -1) 0 0 0 var(--sidebar-border-color);
+}
 
-  :where(.rt-SidebarRoot[data-type='sidebar'][data-side='right']) & {
-    box-shadow: inset 1px 0 0 0 var(--gray-a6);
-  }
+/* Container Variants (variables only) */
+.rt-SidebarContainer:where(.rt-variant-outline) {
+  --sidebar-border-width: 1px;
+  --sidebar-side-border-width: 1px;
+  --sidebar-background-color: transparent;
 }
 
 .rt-SidebarContainer:where(.rt-variant-ghost) {
-  background-color: transparent;
-  backdrop-filter: none;
-  border: none;
+  --sidebar-border-width: 0px;
+  --sidebar-side-border-width: 0px;
+  --sidebar-background-color: transparent;
 }
 
 .rt-SidebarContainer:where(.rt-variant-soft) {
+  --sidebar-border-width: 0px;
+  --sidebar-side-border-width: 0px;
   /* Base state: solid colors for solid panels */
-  background-color: var(--gray-2);
+  --sidebar-background-color: var(--gray-2);
 
   /* Theme-level translucent override */
   :where([data-panel-background='translucent']) & {
-    background-color: color-mix(in srgb, var(--gray-a2), var(--gray-2) 60%);
-    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: color-mix(in srgb, var(--gray-a2), var(--gray-2) 60%);
-    backdrop-filter: var(--backdrop-filter-panel);
-    --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --sidebar-background-color: color-mix(in srgb, var(--gray-a2), var(--gray-2) 60%);
   }
 }
 
 .rt-SidebarContainer:where(.rt-variant-surface) {
-  /* Base state: neutral gray background (maintains sidebar neutrality) */
-  background-color: var(--gray-1);
+  --sidebar-border-width: 1px;
+  --sidebar-side-border-width: 1px;
+  /* Base state: neutral gray background */
+  --sidebar-background-color: var(--gray-1);
 
   /* Theme-level translucent override */
   :where([data-panel-background='translucent']) & {
-    background-color: color-mix(in srgb, var(--gray-a1), var(--gray-1) 60%);
-    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: color-mix(in srgb, var(--gray-a1), var(--gray-1) 60%);
-    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);
-    }
+    --sidebar-background-color: color-mix(in srgb, var(--gray-a1), var(--gray-1) 60%);
   }
 }
 
@@ -193,8 +147,8 @@
   flex-direction: row;
   align-items: center;
   gap: var(--space-2);
-  padding: var(--base-menu-content-padding);
-  min-height: var(--base-menu-item-height);
+  padding: var(--sidebar-base-padding);
+  min-height: var(--sidebar-item-height);
 
   /* Make MenuButtons expand to full width */
   & :where(.rt-SidebarMenuButton) {
@@ -207,8 +161,8 @@
   flex-direction: row;
   align-items: center;
   gap: var(--space-2);
-  padding: var(--base-menu-content-padding);
-  min-height: var(--base-menu-item-height);
+  padding: var(--sidebar-base-padding);
+  min-height: var(--sidebar-item-height);
 
   /* Make MenuButtons expand to full width */
   & :where(.rt-SidebarMenuButton) {
@@ -359,9 +313,11 @@
   .rt-SidebarContainer {
     &:where(.rt-r-size-1) {
       --sidebar-base-padding: var(--space-3);
+      --sidebar-item-height: var(--space-5);
     }
     &:where(.rt-r-size-2) {
       --sidebar-base-padding: var(--space-4);
+      --sidebar-item-height: var(--space-6);
     }
   }
 

package/src/components/sidebar.props.tsx

@@ -16,7 +16,7 @@ export {
 const sizes = ['1', '2'] as const;
 const variants = ['soft', 'outline', 'surface', 'ghost'] as const;
 const menuVariants = ['solid', 'soft'] as const;
-const types = ['sidebar', 'floating'] as const;
+const types = ['sidebar'] as const;
 const sides = ['left', 'right'] as const;
 const collapsibleModes = ['offcanvas', 'icon', 'none'] as const;
 const layouts = ['rail', 'panel'] as const;