@kushagradhawan/kookie-ui 0.1.28 → 0.1.29

package/dist/esm/components/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/index.tsx"],
-  "sourcesContent": ["export { AccessibleIcon, type AccessibleIconProps } from './accessible-icon.js';\nexport * as AlertDialog from './alert-dialog.js';\nexport { AspectRatio, type AspectRatioProps } from './aspect-ratio.js';\nexport { Avatar, type AvatarProps } from './avatar.js';\nexport { Badge, type BadgeProps } from './badge.js';\nexport { Blockquote, type BlockquoteProps } from './blockquote.js';\nexport { Box, type BoxProps } from './box.js';\nexport { Button, type ButtonProps } from './button.js';\nexport * as Callout from './callout.js';\nexport { Card, type CardProps } from './card.js';\nexport * as CheckboxCards from './checkbox-cards.js';\nexport * as CheckboxGroup from './checkbox-group.js';\nexport { Checkbox, type CheckboxProps } from './checkbox.js';\nexport { Code, type CodeProps } from './code.js';\nexport { Container, type ContainerProps } from './container.js';\nexport * as ContextMenu from './context-menu.js';\nexport * as DataList from './data-list.js';\nexport * as Dialog from './dialog.js';\nexport * as DropdownMenu from './dropdown-menu.js';\nexport { Em, type EmProps } from './em.js';\nexport { Flex, type FlexProps } from './flex.js';\nexport { Grid, type GridProps } from './grid.js';\nexport { Heading, type HeadingProps } from './heading.js';\nexport * as HoverCard from './hover-card.js';\nexport { IconButton, type IconButtonProps } from './icon-button.js';\nexport {\n  type IconProps,\n  ChevronDownIcon,\n  ThickCheckIcon,\n  ThickChevronRightIcon,\n  ThickDividerHorizontalIcon,\n} from './icons.js';\nexport { Image, type ImageProps } from './image.js';\nexport { Inset, type InsetProps } from './inset.js';\nexport { Kbd, type KbdProps } from './kbd.js';\nexport { Link, type LinkProps } from './link.js';\nexport * as Popover from './popover.js';\nexport { Portal, type PortalProps } from './portal.js';\nexport { Progress, type ProgressProps } from './progress.js';\nexport { Quote, type QuoteProps } from './quote.js';\nexport * as RadioCards from './radio-cards.js';\nexport * as RadioGroup from './radio-group.js';\nexport { Radio, type RadioProps } from './radio.js';\nexport { Reset, type ResetProps } from './reset.js';\nexport { ScrollArea, type ScrollAreaProps } from './scroll-area.js';\nexport * as SegmentedControl from './segmented-control.js';\nexport { Section, type SectionProps } from './section.js';\nexport * as Select from './select.js';\nexport { Separator, type SeparatorProps } from './separator.js';\nexport { Skeleton, type SkeletonProps } from './skeleton.js';\nexport { Slider, type SliderProps } from './slider.js';\nexport { Slot, Slottable } from './slot.js';\nexport { Spinner, type SpinnerProps } from './spinner.js';\nexport { Strong, type StrongProps } from './strong.js';\nexport { Switch, type SwitchProps } from './switch.js';\nexport * as TabNav from './tab-nav.js';\nexport * as Table from './table.js';\nexport * as Tabs from './tabs.js';\nexport { TextArea, type TextAreaProps } from './text-area.js';\nexport * as TextField from './text-field.js';\nexport { Text, type TextProps } from './text.js';\nexport { ThemePanel, type ThemePanelProps } from './theme-panel.js';\nexport { Theme, ThemeContext, type ThemeProps, useThemeContext } from './theme.js';\nexport { ToggleButton, type ToggleButtonProps } from './toggle-button.js';\nexport { ToggleIconButton, type ToggleIconButtonProps } from './toggle-icon-button.js';\nexport { Tooltip, type TooltipProps } from './tooltip.js';\nexport { UserCard, type UserCardProps } from './user-card.js';\nexport { VisuallyHidden, type VisuallyHiddenProps } from './visually-hidden.js';\nexport * as Sidebar from './sidebar.js';\n"],
-  "mappings": "AAAA,OAAS,kBAAAA,MAAgD,uBACzD,UAAYC,MAAiB,oBAC7B,OAAS,eAAAC,MAA0C,oBACnD,OAAS,UAAAC,MAAgC,cACzC,OAAS,SAAAC,MAA8B,aACvC,OAAS,cAAAC,MAAwC,kBACjD,OAAS,OAAAC,MAA0B,WACnC,OAAS,UAAAC,MAAgC,cACzC,UAAYC,MAAa,eACzB,OAAS,QAAAC,MAA4B,YACrC,UAAYC,MAAmB,sBAC/B,UAAYC,MAAmB,sBAC/B,OAAS,YAAAC,MAAoC,gBAC7C,OAAS,QAAAC,MAA4B,YACrC,OAAS,aAAAC,MAAsC,iBAC/C,UAAYC,MAAiB,oBAC7B,UAAYC,MAAc,iBAC1B,UAAYC,MAAY,cACxB,UAAYC,MAAkB,qBAC9B,OAAS,MAAAC,MAAwB,UACjC,OAAS,QAAAC,MAA4B,YACrC,OAAS,QAAAC,MAA4B,YACrC,OAAS,WAAAC,MAAkC,eAC3C,UAAYC,MAAe,kBAC3B,OAAS,cAAAC,MAAwC,mBACjD,OAEE,mBAAAC,EACA,kBAAAC,EACA,yBAAAC,EACA,8BAAAC,MACK,aACP,OAAS,SAAAC,MAA8B,aACvC,OAAS,SAAAC,MAA8B,aACvC,OAAS,OAAAC,MAA0B,WACnC,OAAS,QAAAC,OAA4B,YACrC,UAAYC,OAAa,eACzB,OAAS,UAAAC,OAAgC,cACzC,OAAS,YAAAC,OAAoC,gBAC7C,OAAS,SAAAC,OAA8B,aACvC,UAAYC,OAAgB,mBAC5B,UAAYC,OAAgB,mBAC5B,OAAS,SAAAC,OAA8B,aACvC,OAAS,SAAAC,OAA8B,aACvC,OAAS,cAAAC,OAAwC,mBACjD,UAAYC,OAAsB,yBAClC,OAAS,WAAAC,OAAkC,eAC3C,UAAYC,OAAY,cACxB,OAAS,aAAAC,OAAsC,iBAC/C,OAAS,YAAAC,OAAoC,gBAC7C,OAAS,UAAAC,OAAgC,cACzC,OAAS,QAAAC,GAAM,aAAAC,OAAiB,YAChC,OAAS,WAAAC,OAAkC,eAC3C,OAAS,UAAAC,OAAgC,cACzC,OAAS,UAAAC,OAAgC,cACzC,UAAYC,OAAY,eACxB,UAAYC,OAAW,aACvB,UAAYC,OAAU,YACtB,OAAS,YAAAC,OAAoC,iBAC7C,UAAYC,OAAe,kBAC3B,OAAS,QAAAC,OAA4B,YACrC,OAAS,cAAAC,OAAwC,mBACjD,OAAS,SAAAC,GAAO,gBAAAC,GAA+B,mBAAAC,OAAuB,aACtE,OAAS,gBAAAC,OAA4C,qBACrD,OAAS,oBAAAC,OAAoD,0BAC7D,OAAS,WAAAC,OAAkC,eAC3C,OAAS,YAAAC,OAAoC,iBAC7C,OAAS,kBAAAC,OAAgD,uBACzD,UAAYC,OAAa",
-  "names": ["AccessibleIcon", "AlertDialog", "AspectRatio", "Avatar", "Badge", "Blockquote", "Box", "Button", "Callout", "Card", "CheckboxCards", "CheckboxGroup", "Checkbox", "Code", "Container", "ContextMenu", "DataList", "Dialog", "DropdownMenu", "Em", "Flex", "Grid", "Heading", "HoverCard", "IconButton", "ChevronDownIcon", "ThickCheckIcon", "ThickChevronRightIcon", "ThickDividerHorizontalIcon", "Image", "Inset", "Kbd", "Link", "Popover", "Portal", "Progress", "Quote", "RadioCards", "RadioGroup", "Radio", "Reset", "ScrollArea", "SegmentedControl", "Section", "Select", "Separator", "Skeleton", "Slider", "Slot", "Slottable", "Spinner", "Strong", "Switch", "TabNav", "Table", "Tabs", "TextArea", "TextField", "Text", "ThemePanel", "Theme", "ThemeContext", "useThemeContext", "ToggleButton", "ToggleIconButton", "Tooltip", "UserCard", "VisuallyHidden", "Sidebar"]
+  "sourcesContent": ["export { AccessibleIcon, type AccessibleIconProps } from './accessible-icon.js';\nexport * as Accordion from './accordion.js';\nexport * as AlertDialog from './alert-dialog.js';\nexport { AspectRatio, type AspectRatioProps } from './aspect-ratio.js';\nexport { Avatar, type AvatarProps } from './avatar.js';\nexport { Badge, type BadgeProps } from './badge.js';\nexport { Blockquote, type BlockquoteProps } from './blockquote.js';\nexport { Box, type BoxProps } from './box.js';\nexport { Button, type ButtonProps } from './button.js';\nexport * as Callout from './callout.js';\nexport { Card, type CardProps } from './card.js';\nexport * as CheckboxCards from './checkbox-cards.js';\nexport * as CheckboxGroup from './checkbox-group.js';\nexport { Checkbox, type CheckboxProps } from './checkbox.js';\nexport { Code, type CodeProps } from './code.js';\nexport { Container, type ContainerProps } from './container.js';\nexport * as ContextMenu from './context-menu.js';\nexport * as DataList from './data-list.js';\nexport * as Dialog from './dialog.js';\nexport * as DropdownMenu from './dropdown-menu.js';\nexport { Em, type EmProps } from './em.js';\nexport { Flex, type FlexProps } from './flex.js';\nexport { Grid, type GridProps } from './grid.js';\nexport { Heading, type HeadingProps } from './heading.js';\nexport * as HoverCard from './hover-card.js';\nexport { IconButton, type IconButtonProps } from './icon-button.js';\nexport {\n  type IconProps,\n  ChevronDownIcon,\n  ThickCheckIcon,\n  ThickChevronRightIcon,\n  ThickDividerHorizontalIcon,\n} from './icons.js';\nexport { Image, type ImageProps } from './image.js';\nexport { Inset, type InsetProps } from './inset.js';\nexport { Kbd, type KbdProps } from './kbd.js';\nexport { Link, type LinkProps } from './link.js';\nexport * as Popover from './popover.js';\nexport { Portal, type PortalProps } from './portal.js';\nexport { Progress, type ProgressProps } from './progress.js';\nexport { Quote, type QuoteProps } from './quote.js';\nexport * as RadioCards from './radio-cards.js';\nexport * as RadioGroup from './radio-group.js';\nexport { Radio, type RadioProps } from './radio.js';\nexport { Reset, type ResetProps } from './reset.js';\nexport { ScrollArea, type ScrollAreaProps } from './scroll-area.js';\nexport * as SegmentedControl from './segmented-control.js';\nexport { Section, type SectionProps } from './section.js';\nexport * as Select from './select.js';\nexport { Separator, type SeparatorProps } from './separator.js';\nexport { Skeleton, type SkeletonProps } from './skeleton.js';\nexport { Slider, type SliderProps } from './slider.js';\nexport { Slot, Slottable } from './slot.js';\nexport { Spinner, type SpinnerProps } from './spinner.js';\nexport { Strong, type StrongProps } from './strong.js';\nexport { Switch, type SwitchProps } from './switch.js';\nexport * as TabNav from './tab-nav.js';\nexport * as Table from './table.js';\nexport * as Tabs from './tabs.js';\nexport { TextArea, type TextAreaProps } from './text-area.js';\nexport * as TextField from './text-field.js';\nexport { Text, type TextProps } from './text.js';\nexport { ThemePanel, type ThemePanelProps } from './theme-panel.js';\nexport { Theme, ThemeContext, type ThemeProps, useThemeContext } from './theme.js';\nexport { ToggleButton, type ToggleButtonProps } from './toggle-button.js';\nexport { ToggleIconButton, type ToggleIconButtonProps } from './toggle-icon-button.js';\nexport { Tooltip, type TooltipProps } from './tooltip.js';\nexport { UserCard, type UserCardProps } from './user-card.js';\nexport { VisuallyHidden, type VisuallyHiddenProps } from './visually-hidden.js';\nexport * as Sidebar from './sidebar.js';\n"],
+  "mappings": "AAAA,OAAS,kBAAAA,MAAgD,uBACzD,UAAYC,MAAe,iBAC3B,UAAYC,MAAiB,oBAC7B,OAAS,eAAAC,MAA0C,oBACnD,OAAS,UAAAC,MAAgC,cACzC,OAAS,SAAAC,MAA8B,aACvC,OAAS,cAAAC,MAAwC,kBACjD,OAAS,OAAAC,MAA0B,WACnC,OAAS,UAAAC,MAAgC,cACzC,UAAYC,MAAa,eACzB,OAAS,QAAAC,MAA4B,YACrC,UAAYC,MAAmB,sBAC/B,UAAYC,MAAmB,sBAC/B,OAAS,YAAAC,MAAoC,gBAC7C,OAAS,QAAAC,MAA4B,YACrC,OAAS,aAAAC,MAAsC,iBAC/C,UAAYC,MAAiB,oBAC7B,UAAYC,MAAc,iBAC1B,UAAYC,MAAY,cACxB,UAAYC,MAAkB,qBAC9B,OAAS,MAAAC,MAAwB,UACjC,OAAS,QAAAC,MAA4B,YACrC,OAAS,QAAAC,MAA4B,YACrC,OAAS,WAAAC,MAAkC,eAC3C,UAAYC,MAAe,kBAC3B,OAAS,cAAAC,MAAwC,mBACjD,OAEE,mBAAAC,EACA,kBAAAC,EACA,yBAAAC,EACA,8BAAAC,MACK,aACP,OAAS,SAAAC,MAA8B,aACvC,OAAS,SAAAC,MAA8B,aACvC,OAAS,OAAAC,MAA0B,WACnC,OAAS,QAAAC,OAA4B,YACrC,UAAYC,OAAa,eACzB,OAAS,UAAAC,OAAgC,cACzC,OAAS,YAAAC,OAAoC,gBAC7C,OAAS,SAAAC,OAA8B,aACvC,UAAYC,OAAgB,mBAC5B,UAAYC,OAAgB,mBAC5B,OAAS,SAAAC,OAA8B,aACvC,OAAS,SAAAC,OAA8B,aACvC,OAAS,cAAAC,OAAwC,mBACjD,UAAYC,OAAsB,yBAClC,OAAS,WAAAC,OAAkC,eAC3C,UAAYC,OAAY,cACxB,OAAS,aAAAC,OAAsC,iBAC/C,OAAS,YAAAC,OAAoC,gBAC7C,OAAS,UAAAC,OAAgC,cACzC,OAAS,QAAAC,GAAM,aAAAC,OAAiB,YAChC,OAAS,WAAAC,OAAkC,eAC3C,OAAS,UAAAC,OAAgC,cACzC,OAAS,UAAAC,OAAgC,cACzC,UAAYC,OAAY,eACxB,UAAYC,OAAW,aACvB,UAAYC,OAAU,YACtB,OAAS,YAAAC,OAAoC,iBAC7C,UAAYC,OAAe,kBAC3B,OAAS,QAAAC,OAA4B,YACrC,OAAS,cAAAC,OAAwC,mBACjD,OAAS,SAAAC,GAAO,gBAAAC,GAA+B,mBAAAC,OAAuB,aACtE,OAAS,gBAAAC,OAA4C,qBACrD,OAAS,oBAAAC,OAAoD,0BAC7D,OAAS,WAAAC,OAAkC,eAC3C,OAAS,YAAAC,OAAoC,iBAC7C,OAAS,kBAAAC,OAAgD,uBACzD,UAAYC,OAAa",
+  "names": ["AccessibleIcon", "Accordion", "AlertDialog", "AspectRatio", "Avatar", "Badge", "Blockquote", "Box", "Button", "Callout", "Card", "CheckboxCards", "CheckboxGroup", "Checkbox", "Code", "Container", "ContextMenu", "DataList", "Dialog", "DropdownMenu", "Em", "Flex", "Grid", "Heading", "HoverCard", "IconButton", "ChevronDownIcon", "ThickCheckIcon", "ThickChevronRightIcon", "ThickDividerHorizontalIcon", "Image", "Inset", "Kbd", "Link", "Popover", "Portal", "Progress", "Quote", "RadioCards", "RadioGroup", "Radio", "Reset", "ScrollArea", "SegmentedControl", "Section", "Select", "Separator", "Skeleton", "Slider", "Slot", "Slottable", "Spinner", "Strong", "Switch", "TabNav", "Table", "Tabs", "TextArea", "TextField", "Text", "ThemePanel", "Theme", "ThemeContext", "useThemeContext", "ToggleButton", "ToggleIconButton", "Tooltip", "UserCard", "VisuallyHidden", "Sidebar"]
 }

package/dist/esm/helpers/extract-margin-props.d.ts

@@ -1,12 +1,12 @@
 import type { MarginProps } from '../props/margin.props.js';
 export declare function extractMarginProps<T extends MarginProps>(props: T): {
-    m: import("../props/prop-def.js").Responsive<import("../props/prop-def.js").Union<string, "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9">> | undefined;
-    mx: import("../props/prop-def.js").Responsive<import("../props/prop-def.js").Union<string, "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9">> | undefined;
-    my: import("../props/prop-def.js").Responsive<import("../props/prop-def.js").Union<string, "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9">> | undefined;
-    mt: import("../props/prop-def.js").Responsive<import("../props/prop-def.js").Union<string, "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9">> | undefined;
-    mr: import("../props/prop-def.js").Responsive<import("../props/prop-def.js").Union<string, "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9">> | undefined;
-    mb: import("../props/prop-def.js").Responsive<import("../props/prop-def.js").Union<string, "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9">> | undefined;
-    ml: import("../props/prop-def.js").Responsive<import("../props/prop-def.js").Union<string, "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9">> | undefined;
+    m: import("../props/prop-def.js").Responsive<import("../props/prop-def.js").Union<string, "1" | "2" | "3" | "4" | "0" | "5" | "6" | "7" | "8" | "9" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9">> | undefined;
+    mx: import("../props/prop-def.js").Responsive<import("../props/prop-def.js").Union<string, "1" | "2" | "3" | "4" | "0" | "5" | "6" | "7" | "8" | "9" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9">> | undefined;
+    my: import("../props/prop-def.js").Responsive<import("../props/prop-def.js").Union<string, "1" | "2" | "3" | "4" | "0" | "5" | "6" | "7" | "8" | "9" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9">> | undefined;
+    mt: import("../props/prop-def.js").Responsive<import("../props/prop-def.js").Union<string, "1" | "2" | "3" | "4" | "0" | "5" | "6" | "7" | "8" | "9" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9">> | undefined;
+    mr: import("../props/prop-def.js").Responsive<import("../props/prop-def.js").Union<string, "1" | "2" | "3" | "4" | "0" | "5" | "6" | "7" | "8" | "9" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9">> | undefined;
+    mb: import("../props/prop-def.js").Responsive<import("../props/prop-def.js").Union<string, "1" | "2" | "3" | "4" | "0" | "5" | "6" | "7" | "8" | "9" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9">> | undefined;
+    ml: import("../props/prop-def.js").Responsive<import("../props/prop-def.js").Union<string, "1" | "2" | "3" | "4" | "0" | "5" | "6" | "7" | "8" | "9" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9">> | undefined;
     rest: Omit<T, "m" | "ml" | "mr" | "mt" | "mb" | "mx" | "my">;
 };
 //# sourceMappingURL=extract-margin-props.d.ts.map

package/package.json

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

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);
+} 

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

@@ -0,0 +1,141 @@
+/* Base Sidebar Layout and Container Styles */
+
+/* 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;
+}
+
+/* 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;
+}
+
+/* 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 Footer */
+.rt-SidebarFooter {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  margin-top: auto;
+  border-radius: 0 0 var(--sidebar-base-border-radius) var(--sidebar-base-border-radius);
+}
+
+/* Sidebar Separator - ensure full width and proper spacing */
+.rt-SidebarSeparator {
+  width: 100%;
+  margin: var(--space-2) 0;
+}
+
+/* Responsive behavior */
+@media (max-width: 768px) {
+  .rt-SidebarRoot {
+    display: none;
+  }
+}