@kushagradhawan/kookie-ui 0.1.40 → 0.1.41

package/README.md

@@ -102,7 +102,7 @@ npm install @kushagradhawan/kookie-ui@latest
 
 Since Kookie UI maintains API compatibility with Radix UI Themes, you can refer to the comprehensive [Radix UI Themes documentation](https://radix-ui.com/themes/docs) for component usage, props, and examples.
 
-For Kookie UI specific changes and enhancements, see our [GitHub repository](https://github.com/kushagradhawan/HelloKookie).
+For Kookie UI specific changes and enhancements, see our [GitHub repository](https://github.com/kushagradhawan/kookie-ui).
 
 ## License
 
@@ -112,9 +112,9 @@ This project is a fork of [Radix UI Themes](https://github.com/radix-ui/themes).
 
 ## Contributing
 
-Contributions are welcome! Please see our [contributing guidelines](https://github.com/kushagradhawan/HelloKookie/blob/main/CONTRIBUTING.md) for details.
+Contributions are welcome! Please see our [contributing guidelines](https://github.com/kushagradhawan/kookie-ui/blob/main/CONTRIBUTING.md) for details.
 
 ## Support
 
-- [GitHub Issues](https://github.com/kushagradhawan/HelloKookie/issues)
-- [Discussions](https://github.com/kushagradhawan/HelloKookie/discussions)
+- [GitHub Issues](https://github.com/kushagradhawan/kookie-ui/issues)
+- [Discussions](https://github.com/kushagradhawan/kookie-ui/discussions)

package/components.css

@@ -6921,7 +6921,7 @@
     contain: paint;
     isolation: isolate;
 }
-.rt-BaseMenuContent:where([data-state="open"]) {
+.rt-BaseMenuContent:where([data-state='open']) {
     will-change: transform, opacity;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -7060,6 +7060,7 @@
     font-size: var(--font-size-1);
     line-height: var(--line-height-1);
     letter-spacing: var(--letter-spacing-1);
+    padding-left: calc(var(--base-menu-item-padding-left) + var(--component-gap-2));
 }
 .rt-BaseMenuContent:where(.rt-r-size-1) :where(.rt-BaseMenuItemIndicatorIcon, .rt-BaseMenuSubTriggerIcon) {
     width: var(--indicator-icon-size-1);
@@ -7095,6 +7096,7 @@
     font-size: var(--font-size-2);
     line-height: var(--line-height-2);
     letter-spacing: var(--letter-spacing-2);
+    padding-left: calc(var(--base-menu-item-padding-left) + var(--component-gap-3));
 }
 .rt-BaseMenuContent:where(.rt-r-size-2) :where(.rt-BaseMenuItemIndicatorIcon, .rt-BaseMenuSubTriggerIcon) {
     width: var(--indicator-icon-size-2);
@@ -7130,6 +7132,7 @@
     font-size: var(--font-size-2);
     line-height: var(--line-height-2);
     letter-spacing: var(--letter-spacing-2);
+    padding-left: calc(var(--base-menu-item-padding-left) + var(--component-gap-4));
 }
 .rt-BaseMenuContent:where(.rt-r-size-3) :where(.rt-BaseMenuItemIndicatorIcon, .rt-BaseMenuSubTriggerIcon) {
     width: var(--indicator-icon-size-2);
@@ -7166,6 +7169,7 @@
         font-size: var(--font-size-1);
         line-height: var(--line-height-1);
         letter-spacing: var(--letter-spacing-1);
+        padding-left: calc(var(--base-menu-item-padding-left) + var(--component-gap-2));
     }
     .rt-BaseMenuContent:where(.xs\:rt-r-size-1) :where(.rt-BaseMenuItemIndicatorIcon, .rt-BaseMenuSubTriggerIcon) {
         width: var(--indicator-icon-size-1);
@@ -7201,6 +7205,7 @@
         font-size: var(--font-size-2);
         line-height: var(--line-height-2);
         letter-spacing: var(--letter-spacing-2);
+        padding-left: calc(var(--base-menu-item-padding-left) + var(--component-gap-3));
     }
     .rt-BaseMenuContent:where(.xs\:rt-r-size-2) :where(.rt-BaseMenuItemIndicatorIcon, .rt-BaseMenuSubTriggerIcon) {
         width: var(--indicator-icon-size-2);
@@ -7236,6 +7241,7 @@
         font-size: var(--font-size-2);
         line-height: var(--line-height-2);
         letter-spacing: var(--letter-spacing-2);
+        padding-left: calc(var(--base-menu-item-padding-left) + var(--component-gap-4));
     }
     .rt-BaseMenuContent:where(.xs\:rt-r-size-3) :where(.rt-BaseMenuItemIndicatorIcon, .rt-BaseMenuSubTriggerIcon) {
         width: var(--indicator-icon-size-2);
@@ -7273,6 +7279,7 @@
         font-size: var(--font-size-1);
         line-height: var(--line-height-1);
         letter-spacing: var(--letter-spacing-1);
+        padding-left: calc(var(--base-menu-item-padding-left) + var(--component-gap-2));
     }
     .rt-BaseMenuContent:where(.sm\:rt-r-size-1) :where(.rt-BaseMenuItemIndicatorIcon, .rt-BaseMenuSubTriggerIcon) {
         width: var(--indicator-icon-size-1);
@@ -7308,6 +7315,7 @@
         font-size: var(--font-size-2);
         line-height: var(--line-height-2);
         letter-spacing: var(--letter-spacing-2);
+        padding-left: calc(var(--base-menu-item-padding-left) + var(--component-gap-3));
     }
     .rt-BaseMenuContent:where(.sm\:rt-r-size-2) :where(.rt-BaseMenuItemIndicatorIcon, .rt-BaseMenuSubTriggerIcon) {
         width: var(--indicator-icon-size-2);
@@ -7343,6 +7351,7 @@
         font-size: var(--font-size-2);
         line-height: var(--line-height-2);
         letter-spacing: var(--letter-spacing-2);
+        padding-left: calc(var(--base-menu-item-padding-left) + var(--component-gap-4));
     }
     .rt-BaseMenuContent:where(.sm\:rt-r-size-3) :where(.rt-BaseMenuItemIndicatorIcon, .rt-BaseMenuSubTriggerIcon) {
         width: var(--indicator-icon-size-2);
@@ -7380,6 +7389,7 @@
         font-size: var(--font-size-1);
         line-height: var(--line-height-1);
         letter-spacing: var(--letter-spacing-1);
+        padding-left: calc(var(--base-menu-item-padding-left) + var(--component-gap-2));
     }
     .rt-BaseMenuContent:where(.md\:rt-r-size-1) :where(.rt-BaseMenuItemIndicatorIcon, .rt-BaseMenuSubTriggerIcon) {
         width: var(--indicator-icon-size-1);
@@ -7415,6 +7425,7 @@
         font-size: var(--font-size-2);
         line-height: var(--line-height-2);
         letter-spacing: var(--letter-spacing-2);
+        padding-left: calc(var(--base-menu-item-padding-left) + var(--component-gap-3));
     }
     .rt-BaseMenuContent:where(.md\:rt-r-size-2) :where(.rt-BaseMenuItemIndicatorIcon, .rt-BaseMenuSubTriggerIcon) {
         width: var(--indicator-icon-size-2);
@@ -7450,6 +7461,7 @@
         font-size: var(--font-size-2);
         line-height: var(--line-height-2);
         letter-spacing: var(--letter-spacing-2);
+        padding-left: calc(var(--base-menu-item-padding-left) + var(--component-gap-4));
     }
     .rt-BaseMenuContent:where(.md\:rt-r-size-3) :where(.rt-BaseMenuItemIndicatorIcon, .rt-BaseMenuSubTriggerIcon) {
         width: var(--indicator-icon-size-2);
@@ -7487,6 +7499,7 @@
         font-size: var(--font-size-1);
         line-height: var(--line-height-1);
         letter-spacing: var(--letter-spacing-1);
+        padding-left: calc(var(--base-menu-item-padding-left) + var(--component-gap-2));
     }
     .rt-BaseMenuContent:where(.lg\:rt-r-size-1) :where(.rt-BaseMenuItemIndicatorIcon, .rt-BaseMenuSubTriggerIcon) {
         width: var(--indicator-icon-size-1);
@@ -7522,6 +7535,7 @@
         font-size: var(--font-size-2);
         line-height: var(--line-height-2);
         letter-spacing: var(--letter-spacing-2);
+        padding-left: calc(var(--base-menu-item-padding-left) + var(--component-gap-3));
     }
     .rt-BaseMenuContent:where(.lg\:rt-r-size-2) :where(.rt-BaseMenuItemIndicatorIcon, .rt-BaseMenuSubTriggerIcon) {
         width: var(--indicator-icon-size-2);
@@ -7557,6 +7571,7 @@
         font-size: var(--font-size-2);
         line-height: var(--line-height-2);
         letter-spacing: var(--letter-spacing-2);
+        padding-left: calc(var(--base-menu-item-padding-left) + var(--component-gap-4));
     }
     .rt-BaseMenuContent:where(.lg\:rt-r-size-3) :where(.rt-BaseMenuItemIndicatorIcon, .rt-BaseMenuSubTriggerIcon) {
         width: var(--indicator-icon-size-2);
@@ -7594,6 +7609,7 @@
         font-size: var(--font-size-1);
         line-height: var(--line-height-1);
         letter-spacing: var(--letter-spacing-1);
+        padding-left: calc(var(--base-menu-item-padding-left) + var(--component-gap-2));
     }
     .rt-BaseMenuContent:where(.xl\:rt-r-size-1) :where(.rt-BaseMenuItemIndicatorIcon, .rt-BaseMenuSubTriggerIcon) {
         width: var(--indicator-icon-size-1);
@@ -7629,6 +7645,7 @@
         font-size: var(--font-size-2);
         line-height: var(--line-height-2);
         letter-spacing: var(--letter-spacing-2);
+        padding-left: calc(var(--base-menu-item-padding-left) + var(--component-gap-3));
     }
     .rt-BaseMenuContent:where(.xl\:rt-r-size-2) :where(.rt-BaseMenuItemIndicatorIcon, .rt-BaseMenuSubTriggerIcon) {
         width: var(--indicator-icon-size-2);
@@ -7664,6 +7681,7 @@
         font-size: var(--font-size-2);
         line-height: var(--line-height-2);
         letter-spacing: var(--letter-spacing-2);
+        padding-left: calc(var(--base-menu-item-padding-left) + var(--component-gap-4));
     }
     .rt-BaseMenuContent:where(.xl\:rt-r-size-3) :where(.rt-BaseMenuItemIndicatorIcon, .rt-BaseMenuSubTriggerIcon) {
         width: var(--indicator-icon-size-2);
@@ -7683,7 +7701,8 @@
     color: var(--gray-a8);
     cursor: default;
 }
-.rt-BaseMenuItem :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']:not(.rt-Badge)) {
+.rt-BaseMenuItem
+  :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']:not(.rt-Badge)) {
     color: var(--gray-a10);
 }
 .rt-BaseMenuItem:where([data-disabled], [data-highlighted]) :where(.rt-BaseMenuShortcut), .rt-BaseMenuSubTrigger:where([data-state='open']) :where(.rt-BaseMenuShortcut) {
@@ -8439,6 +8458,16 @@
         --leading-trim-end: var(--data-list-leading-trim-end);
     }
 }
+.rt-DialogOverlay::before {
+    -webkit-backdrop-filter: var(--backdrop-filter-components) !important;
+            backdrop-filter: var(--backdrop-filter-components) !important;
+}
+@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
+    .rt-DialogOverlay::before {
+        -webkit-backdrop-filter: none !important;
+                backdrop-filter: none !important;
+    }
+}
 .rt-DropdownMenuContent {
     max-height: var(--radix-dropdown-menu-content-available-height);
     transform-origin: var(--radix-dropdown-menu-content-transform-origin);
@@ -11564,8 +11593,16 @@
     border-end-start-radius: 0;
     border-end-end-radius: 0;
 }
-:where(.rt-SheetOverlay)::before {
-    opacity: 1;
+.rt-SheetOverlay::before {
+    opacity: 1 !important;
+    -webkit-backdrop-filter: var(--backdrop-filter-components) !important;
+            backdrop-filter: var(--backdrop-filter-components) !important;
+}
+@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
+    .rt-SheetOverlay::before {
+        -webkit-backdrop-filter: none !important;
+                backdrop-filter: none !important;
+    }
 }
 @media (prefers-reduced-motion: no-preference) {
     .rt-SheetContent:where([data-state='open']) {
@@ -13836,10 +13873,10 @@
         --separator-size: 100%;
     }
 }
-.rt-SidebarProvider:where([data-side="left"]) {
+.rt-SidebarProvider:where([data-side='left']) {
     order: -1;
 }
-.rt-SidebarProvider:where([data-side="right"]) {
+.rt-SidebarProvider:where([data-side='right']) {
     order: 999;
 }
 .rt-SidebarRoot {
@@ -13857,7 +13894,7 @@
     flex: 1;
     height: 100%;
 }
-.rt-SidebarRoot:where([data-type="floating"]) {
+.rt-SidebarRoot:where([data-type='floating']) {
     border-radius: var(--sidebar-base-border-radius);
     margin: var(--space-2);
     height: calc(100% - var(--space-4));
@@ -13865,13 +13902,13 @@
     position: relative;
     --sidebar-base-border-radius: var(--radius-5);
 }
-.rt-SidebarRoot:where([data-type="floating"]) :where(.radix-themes) {
+.rt-SidebarRoot:where([data-type='floating']) :where(.radix-themes) {
     border-radius: inherit;
 }
-.rt-SidebarRoot:where([data-type="floating"]):where(.rt-r-size-1) {
+.rt-SidebarRoot:where([data-type='floating']):where(.rt-r-size-1) {
     --sidebar-base-border-radius: var(--radius-5);
 }
-.rt-SidebarRoot:where([data-type="floating"]):where(.rt-r-size-2) {
+.rt-SidebarRoot:where([data-type='floating']):where(.rt-r-size-2) {
     --sidebar-base-border-radius: var(--radius-6);
 }
 .rt-SidebarContainer {
@@ -13932,7 +13969,7 @@
     margin: var(--space-2) 0;
 }
 @media (max-width: 768px) {
-    .rt-SidebarRoot {
+    .rt-SidebarRoot:not(:where(.rt-SheetContent .rt-SidebarRoot)) {
         display: none;
     }
 }
@@ -15016,6 +15053,18 @@
 :where(.rt-SheetContent) :where(.rt-ShellSidebarPanel) {
     transition: none !important;
 }
+:where(.rt-SheetContent) :where(.rt-SidebarRoot) {
+    height: 100%;
+    width: 100%;
+}
+:where(.rt-SheetContent) :where(.rt-SidebarContainer) {
+    height: 100%;
+    width: 100%;
+}
+:where(.rt-SheetContent) :where(.rt-SidebarContent) {
+    height: 100%;
+    width: 100%;
+}
 .rt-SliderRoot {
     --slider-thumb-width: var(--space-3);
     --slider-thumb-height: var(--space-2);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kushagradhawan/kookie-ui",
-  "version": "0.1.40",
+  "version": "0.1.41",
   "description": "A modern React component library with beautiful design tokens, flexible theming, and comprehensive docs",
   "keywords": [
     "react",
@@ -160,12 +160,12 @@
     "typescript": "^5.7.2",
     "typescript-eslint": "^8.18.1"
   },
-  "homepage": "https://github.com/kushagradhawan/HelloKookie",
+  "homepage": "https://github.com/kushagradhawan/kookie-ui",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/kushagradhawan/HelloKookie.git"
+    "url": "git+https://github.com/kushagradhawan/kookie-ui.git"
   },
   "bugs": {
-    "url": "https://github.com/kushagradhawan/HelloKookie/issues"
+    "url": "https://github.com/kushagradhawan/kookie-ui/issues"
   }
 }

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

@@ -8,18 +8,18 @@
   flex-direction: column;
   box-sizing: border-box;
   overflow: hidden;
-  
+
   background-color: var(--color-panel);
   backdrop-filter: var(--backdrop-filter-panel);
   box-shadow: var(--shadow-5);
   transition: var(--transition-background-blur);
-  
+
   /* GPU optimization: limit paint scope and prevent backdrop-filter layering */
   contain: paint;
   isolation: isolate;
 
   /* Optimize backdrop-filter performance during animations */
-  &:where([data-state="open"]) {
+  &:where([data-state='open']) {
     will-change: transform, opacity;
   }
 
@@ -188,6 +188,7 @@
         font-size: var(--font-size-1);
         line-height: var(--line-height-1);
         letter-spacing: var(--letter-spacing-1);
+        padding-left: calc(var(--base-menu-item-padding-left) + var(--component-gap-2));
       }
 
       & :where(.rt-BaseMenuItemIndicatorIcon, .rt-BaseMenuSubTriggerIcon) {
@@ -231,6 +232,7 @@
         font-size: var(--font-size-2);
         line-height: var(--line-height-2);
         letter-spacing: var(--letter-spacing-2);
+        padding-left: calc(var(--base-menu-item-padding-left) + var(--component-gap-3));
       }
 
       & :where(.rt-BaseMenuItemIndicatorIcon, .rt-BaseMenuSubTriggerIcon) {
@@ -274,6 +276,7 @@
         font-size: var(--font-size-2);
         line-height: var(--line-height-2);
         letter-spacing: var(--letter-spacing-2);
+        padding-left: calc(var(--base-menu-item-padding-left) + var(--component-gap-4));
       }
 
       & :where(.rt-BaseMenuItemIndicatorIcon, .rt-BaseMenuSubTriggerIcon) {
@@ -308,7 +311,8 @@
 }
 
 /* Ensure gray text appears muted in non-highlighted state */
-.rt-BaseMenuItem :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']:not(.rt-Badge)) {
+.rt-BaseMenuItem
+  :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']:not(.rt-Badge)) {
   color: var(--gray-a10);
 }
 .rt-BaseMenuItem:where([data-disabled], [data-highlighted]),
@@ -326,23 +330,27 @@
 .rt-BaseMenuContent:where(.rt-variant-solid, .rt-variant-soft) {
   & :where(.rt-BaseMenuSubTrigger) {
     transition: var(--transition-menu);
-    
+
     /* Enhanced reduced motion support */
     @media (prefers-reduced-motion: reduce) {
       transition: none;
       backdrop-filter: none; /* Remove backdrop effects for motion-sensitive users */
     }
-    
+
     /* Remove backdrop-filter transitions in translucent mode to prevent flickering */
     :where([data-panel-background='translucent']) & {
-      transition: background var(--motion-duration-micro) var(--motion-ease-standard), color var(--motion-duration-small) var(--motion-ease-standard);
+      transition:
+        background var(--motion-duration-micro) var(--motion-ease-standard),
+        color var(--motion-duration-small) var(--motion-ease-standard);
     }
   }
-  
+
   & :where(.rt-BaseMenuItem) {
     /* Remove backdrop-filter transitions in translucent mode to prevent flickering */
     :where([data-panel-background='translucent']) & {
-      transition: background var(--motion-duration-micro) var(--motion-ease-standard), color var(--motion-duration-small) var(--motion-ease-standard);
+      transition:
+        background var(--motion-duration-micro) var(--motion-ease-standard),
+        color var(--motion-duration-small) var(--motion-ease-standard);
     }
   }
 }
@@ -352,7 +360,7 @@
   & :where(.rt-BaseMenuSubTrigger[data-state='open']) {
     /* Base state: solid gray for solid panels */
     background-color: var(--gray-3);
-    
+
     /* Theme-level translucent override */
     :where([data-panel-background='translucent']) & {
       background-color: var(--gray-a3);
@@ -371,7 +379,7 @@
       /* No backdrop-filter here to prevent double-blur with container */
     }
   }
-  
+
   & :where(.rt-BaseMenuItem[data-highlighted]) {
     background-color: var(--accent-9);
     color: var(--accent-contrast);
@@ -390,7 +398,7 @@
       color: inherit !important;
     }
   }
-  
+
   &:where(.rt-high-contrast) {
     & :where(.rt-BaseMenuItem[data-highlighted]) {
       background-color: var(--accent-12);
@@ -431,7 +439,7 @@
   & :where(.rt-BaseMenuSubTrigger[data-state='open']) {
     /* Base state: solid accent for solid panels */
     background-color: var(--accent-3);
-    
+
     /* Theme-level translucent override */
     :where([data-panel-background='translucent']) & {
       background-color: var(--accent-a3);
@@ -450,11 +458,11 @@
       /* No backdrop-filter here to prevent double-blur with container */
     }
   }
-  
+
   & :where(.rt-BaseMenuItem[data-highlighted]) {
     /* Base state: solid accent for solid panels */
     background-color: var(--accent-4);
-    
+
     /* Theme-level translucent override */
     :where([data-panel-background='translucent']) & {
       background-color: var(--accent-a4);
@@ -486,11 +494,11 @@
     outline: 2px solid Highlight;
     outline-offset: 2px;
   }
-  
+
   .rt-BaseMenuContent {
     border: 1px solid CanvasText;
   }
-  
+
   .rt-BaseMenuSeparator {
     background-color: CanvasText;
   }

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

@@ -3,12 +3,12 @@
 /* Sidebar Provider - handles positioning */
 .rt-SidebarProvider {
   /* Positioning based on side */
-  &:where([data-side="left"]) {
+  &: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"]) {
+
+  &:where([data-side='right']) {
     /* Position on the right side */
     order: 999; /* Push to end in flex container */
   }
@@ -18,7 +18,7 @@
 .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;
@@ -34,13 +34,13 @@
   }
 
   /* Floating type - ONLY visual changes */
-  &:where([data-type="floating"]) {
+  &: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;
@@ -49,14 +49,14 @@
 }
 
 /* Set border radius for floating sidebars based on size - set on the root where it's used */
-.rt-SidebarRoot:where([data-type="floating"]) {
+.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);
   }
@@ -133,9 +133,9 @@
   margin: var(--space-2) 0;
 }
 
-/* Responsive behavior */
+/* Responsive behavior - only hide when not in Sheet overlay mode */
 @media (max-width: 768px) {
-  .rt-SidebarRoot {
+  .rt-SidebarRoot:not(:where(.rt-SheetContent .rt-SidebarRoot)) {
     display: none;
   }
-} 
+}

package/src/components/dialog.css

@@ -1 +1,13 @@
 @import './_internal/base-dialog.css';
+
+/* Add blur effect to Dialog overlay */
+.rt-DialogOverlay::before {
+  backdrop-filter: var(--backdrop-filter-components) !important;
+}
+
+/* Safari backdrop-filter fallback */
+@supports not (backdrop-filter: blur(1px)) {
+  .rt-DialogOverlay::before {
+    backdrop-filter: none !important;
+  }
+}

package/src/components/sheet.css

@@ -55,7 +55,17 @@
 }
 
 /* Overlay adjustments: avoid double-fade jank from base dialog */
-:where(.rt-SheetOverlay)::before { opacity: 1; }
+.rt-SheetOverlay::before {
+  opacity: 1 !important;
+  backdrop-filter: var(--backdrop-filter-components) !important;
+}
+
+/* Safari backdrop-filter fallback */
+@supports not (backdrop-filter: blur(1px)) {
+  .rt-SheetOverlay::before {
+    backdrop-filter: none !important;
+  }
+}
 
 @media (prefers-reduced-motion: no-preference) {
   /* Override base dialog animations specifically for Sheet */
@@ -72,19 +82,37 @@
     animation-fill-mode: both;
   }
 
-  .rt-SheetContent:where([data-state='open'][data-side='start']) { animation-name: rt-sheet-open-from-start, rt-fade-in !important; }
-  .rt-SheetContent:where([data-state='closed'][data-side='start']) { animation-name: rt-sheet-close-to-start, rt-fade-out !important; }
+  .rt-SheetContent:where([data-state='open'][data-side='start']) {
+    animation-name: rt-sheet-open-from-start, rt-fade-in !important;
+  }
+  .rt-SheetContent:where([data-state='closed'][data-side='start']) {
+    animation-name: rt-sheet-close-to-start, rt-fade-out !important;
+  }
 
-  .rt-SheetContent:where([data-state='open'][data-side='end']) { animation-name: rt-sheet-open-from-end, rt-fade-in !important; }
-  .rt-SheetContent:where([data-state='closed'][data-side='end']) { animation-name: rt-sheet-close-to-end, rt-fade-out !important; }
+  .rt-SheetContent:where([data-state='open'][data-side='end']) {
+    animation-name: rt-sheet-open-from-end, rt-fade-in !important;
+  }
+  .rt-SheetContent:where([data-state='closed'][data-side='end']) {
+    animation-name: rt-sheet-close-to-end, rt-fade-out !important;
+  }
 
-  .rt-SheetContent:where([data-state='open'][data-side='top']) { animation-name: rt-sheet-open-from-top, rt-fade-in !important; }
-  .rt-SheetContent:where([data-state='closed'][data-side='top']) { animation-name: rt-sheet-close-to-top, rt-fade-out !important; }
+  .rt-SheetContent:where([data-state='open'][data-side='top']) {
+    animation-name: rt-sheet-open-from-top, rt-fade-in !important;
+  }
+  .rt-SheetContent:where([data-state='closed'][data-side='top']) {
+    animation-name: rt-sheet-close-to-top, rt-fade-out !important;
+  }
 
-  .rt-SheetContent:where([data-state='open'][data-side='bottom']) { animation-name: rt-sheet-open-from-bottom, rt-fade-in !important; }
-  .rt-SheetContent:where([data-state='closed'][data-side='bottom']) { animation-name: rt-sheet-close-to-bottom, rt-fade-out !important; }
+  .rt-SheetContent:where([data-state='open'][data-side='bottom']) {
+    animation-name: rt-sheet-open-from-bottom, rt-fade-in !important;
+  }
+  .rt-SheetContent:where([data-state='closed'][data-side='bottom']) {
+    animation-name: rt-sheet-close-to-bottom, rt-fade-out !important;
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .rt-SheetContent { animation: none !important; }
+  .rt-SheetContent {
+    animation: none !important;
+  }
 }

package/src/components/shell.css

@@ -137,3 +137,19 @@
 :where(.rt-SheetContent) :where(.rt-ShellSidebarPanel) {
   transition: none !important;
 }
+
+/* Overlay mode: ensure sidebar content has proper styling when rendered in Sheet */
+:where(.rt-SheetContent) :where(.rt-SidebarRoot) {
+  height: 100%;
+  width: 100%;
+}
+
+:where(.rt-SheetContent) :where(.rt-SidebarContainer) {
+  height: 100%;
+  width: 100%;
+}
+
+:where(.rt-SheetContent) :where(.rt-SidebarContent) {
+  height: 100%;
+  width: 100%;
+}

package/src/styles/tokens/cursor.css

@@ -3,7 +3,7 @@
   --cursor-checkbox: default;
   --cursor-disabled: not-allowed;
   --cursor-link: pointer;
-  --cursor-menu-item: default;
+  --cursor-menu-item: pointer;
   --cursor-radio: default;
   --cursor-slider-thumb: default;
   --cursor-slider-thumb-active: default;

package/styles.css

@@ -71,7 +71,7 @@
   --cursor-checkbox: default;
   --cursor-disabled: not-allowed;
   --cursor-link: pointer;
-  --cursor-menu-item: default;
+  --cursor-menu-item: pointer;
   --cursor-radio: default;
   --cursor-slider-thumb: default;
   --cursor-slider-thumb-active: default;
@@ -11901,7 +11901,7 @@
   contain: paint;
   isolation: isolate;
 }
-.rt-BaseMenuContent:where([data-state="open"]){
+.rt-BaseMenuContent:where([data-state='open']){
   will-change: transform, opacity;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -12040,6 +12040,7 @@
   font-size: var(--font-size-1);
   line-height: var(--line-height-1);
   letter-spacing: var(--letter-spacing-1);
+  padding-left: calc(var(--base-menu-item-padding-left) + var(--component-gap-2));
 }
 .rt-BaseMenuContent:where(.rt-r-size-1) :where(.rt-BaseMenuItemIndicatorIcon, .rt-BaseMenuSubTriggerIcon){
   width: var(--indicator-icon-size-1);
@@ -12075,6 +12076,7 @@
   font-size: var(--font-size-2);
   line-height: var(--line-height-2);
   letter-spacing: var(--letter-spacing-2);
+  padding-left: calc(var(--base-menu-item-padding-left) + var(--component-gap-3));
 }
 .rt-BaseMenuContent:where(.rt-r-size-2) :where(.rt-BaseMenuItemIndicatorIcon, .rt-BaseMenuSubTriggerIcon){
   width: var(--indicator-icon-size-2);
@@ -12110,6 +12112,7 @@
   font-size: var(--font-size-2);
   line-height: var(--line-height-2);
   letter-spacing: var(--letter-spacing-2);
+  padding-left: calc(var(--base-menu-item-padding-left) + var(--component-gap-4));
 }
 .rt-BaseMenuContent:where(.rt-r-size-3) :where(.rt-BaseMenuItemIndicatorIcon, .rt-BaseMenuSubTriggerIcon){
   width: var(--indicator-icon-size-2);
@@ -12146,6 +12149,7 @@
     font-size: var(--font-size-1);
     line-height: var(--line-height-1);
     letter-spacing: var(--letter-spacing-1);
+    padding-left: calc(var(--base-menu-item-padding-left) + var(--component-gap-2));
   }
   .rt-BaseMenuContent:where(.xs\:rt-r-size-1) :where(.rt-BaseMenuItemIndicatorIcon, .rt-BaseMenuSubTriggerIcon){
     width: var(--indicator-icon-size-1);
@@ -12181,6 +12185,7 @@
     font-size: var(--font-size-2);
     line-height: var(--line-height-2);
     letter-spacing: var(--letter-spacing-2);
+    padding-left: calc(var(--base-menu-item-padding-left) + var(--component-gap-3));
   }
   .rt-BaseMenuContent:where(.xs\:rt-r-size-2) :where(.rt-BaseMenuItemIndicatorIcon, .rt-BaseMenuSubTriggerIcon){
     width: var(--indicator-icon-size-2);
@@ -12216,6 +12221,7 @@
     font-size: var(--font-size-2);
     line-height: var(--line-height-2);
     letter-spacing: var(--letter-spacing-2);
+    padding-left: calc(var(--base-menu-item-padding-left) + var(--component-gap-4));
   }
   .rt-BaseMenuContent:where(.xs\:rt-r-size-3) :where(.rt-BaseMenuItemIndicatorIcon, .rt-BaseMenuSubTriggerIcon){
     width: var(--indicator-icon-size-2);
@@ -12253,6 +12259,7 @@
     font-size: var(--font-size-1);
     line-height: var(--line-height-1);
     letter-spacing: var(--letter-spacing-1);
+    padding-left: calc(var(--base-menu-item-padding-left) + var(--component-gap-2));
   }
   .rt-BaseMenuContent:where(.sm\:rt-r-size-1) :where(.rt-BaseMenuItemIndicatorIcon, .rt-BaseMenuSubTriggerIcon){
     width: var(--indicator-icon-size-1);
@@ -12288,6 +12295,7 @@
     font-size: var(--font-size-2);
     line-height: var(--line-height-2);
     letter-spacing: var(--letter-spacing-2);
+    padding-left: calc(var(--base-menu-item-padding-left) + var(--component-gap-3));
   }
   .rt-BaseMenuContent:where(.sm\:rt-r-size-2) :where(.rt-BaseMenuItemIndicatorIcon, .rt-BaseMenuSubTriggerIcon){
     width: var(--indicator-icon-size-2);
@@ -12323,6 +12331,7 @@
     font-size: var(--font-size-2);
     line-height: var(--line-height-2);
     letter-spacing: var(--letter-spacing-2);
+    padding-left: calc(var(--base-menu-item-padding-left) + var(--component-gap-4));
   }
   .rt-BaseMenuContent:where(.sm\:rt-r-size-3) :where(.rt-BaseMenuItemIndicatorIcon, .rt-BaseMenuSubTriggerIcon){
     width: var(--indicator-icon-size-2);
@@ -12360,6 +12369,7 @@
     font-size: var(--font-size-1);
     line-height: var(--line-height-1);
     letter-spacing: var(--letter-spacing-1);
+    padding-left: calc(var(--base-menu-item-padding-left) + var(--component-gap-2));
   }
   .rt-BaseMenuContent:where(.md\:rt-r-size-1) :where(.rt-BaseMenuItemIndicatorIcon, .rt-BaseMenuSubTriggerIcon){
     width: var(--indicator-icon-size-1);
@@ -12395,6 +12405,7 @@
     font-size: var(--font-size-2);
     line-height: var(--line-height-2);
     letter-spacing: var(--letter-spacing-2);
+    padding-left: calc(var(--base-menu-item-padding-left) + var(--component-gap-3));
   }
   .rt-BaseMenuContent:where(.md\:rt-r-size-2) :where(.rt-BaseMenuItemIndicatorIcon, .rt-BaseMenuSubTriggerIcon){
     width: var(--indicator-icon-size-2);
@@ -12430,6 +12441,7 @@
     font-size: var(--font-size-2);
     line-height: var(--line-height-2);
     letter-spacing: var(--letter-spacing-2);
+    padding-left: calc(var(--base-menu-item-padding-left) + var(--component-gap-4));
   }
   .rt-BaseMenuContent:where(.md\:rt-r-size-3) :where(.rt-BaseMenuItemIndicatorIcon, .rt-BaseMenuSubTriggerIcon){
     width: var(--indicator-icon-size-2);
@@ -12467,6 +12479,7 @@
     font-size: var(--font-size-1);
     line-height: var(--line-height-1);
     letter-spacing: var(--letter-spacing-1);
+    padding-left: calc(var(--base-menu-item-padding-left) + var(--component-gap-2));
   }
   .rt-BaseMenuContent:where(.lg\:rt-r-size-1) :where(.rt-BaseMenuItemIndicatorIcon, .rt-BaseMenuSubTriggerIcon){
     width: var(--indicator-icon-size-1);
@@ -12502,6 +12515,7 @@
     font-size: var(--font-size-2);
     line-height: var(--line-height-2);
     letter-spacing: var(--letter-spacing-2);
+    padding-left: calc(var(--base-menu-item-padding-left) + var(--component-gap-3));
   }
   .rt-BaseMenuContent:where(.lg\:rt-r-size-2) :where(.rt-BaseMenuItemIndicatorIcon, .rt-BaseMenuSubTriggerIcon){
     width: var(--indicator-icon-size-2);
@@ -12537,6 +12551,7 @@
     font-size: var(--font-size-2);
     line-height: var(--line-height-2);
     letter-spacing: var(--letter-spacing-2);
+    padding-left: calc(var(--base-menu-item-padding-left) + var(--component-gap-4));
   }
   .rt-BaseMenuContent:where(.lg\:rt-r-size-3) :where(.rt-BaseMenuItemIndicatorIcon, .rt-BaseMenuSubTriggerIcon){
     width: var(--indicator-icon-size-2);
@@ -12574,6 +12589,7 @@
     font-size: var(--font-size-1);
     line-height: var(--line-height-1);
     letter-spacing: var(--letter-spacing-1);
+    padding-left: calc(var(--base-menu-item-padding-left) + var(--component-gap-2));
   }
   .rt-BaseMenuContent:where(.xl\:rt-r-size-1) :where(.rt-BaseMenuItemIndicatorIcon, .rt-BaseMenuSubTriggerIcon){
     width: var(--indicator-icon-size-1);
@@ -12609,6 +12625,7 @@
     font-size: var(--font-size-2);
     line-height: var(--line-height-2);
     letter-spacing: var(--letter-spacing-2);
+    padding-left: calc(var(--base-menu-item-padding-left) + var(--component-gap-3));
   }
   .rt-BaseMenuContent:where(.xl\:rt-r-size-2) :where(.rt-BaseMenuItemIndicatorIcon, .rt-BaseMenuSubTriggerIcon){
     width: var(--indicator-icon-size-2);
@@ -12644,6 +12661,7 @@
     font-size: var(--font-size-2);
     line-height: var(--line-height-2);
     letter-spacing: var(--letter-spacing-2);
+    padding-left: calc(var(--base-menu-item-padding-left) + var(--component-gap-4));
   }
   .rt-BaseMenuContent:where(.xl\:rt-r-size-3) :where(.rt-BaseMenuItemIndicatorIcon, .rt-BaseMenuSubTriggerIcon){
     width: var(--indicator-icon-size-2);
@@ -12663,7 +12681,8 @@
   color: var(--gray-a8);
   cursor: default;
 }
-.rt-BaseMenuItem :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']:not(.rt-Badge)){
+.rt-BaseMenuItem
+  :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']:not(.rt-Badge)){
   color: var(--gray-a10);
 }
 .rt-BaseMenuItem:where([data-disabled], [data-highlighted]) :where(.rt-BaseMenuShortcut), .rt-BaseMenuSubTrigger:where([data-state='open']) :where(.rt-BaseMenuShortcut){
@@ -13419,6 +13438,16 @@
     --leading-trim-end: var(--data-list-leading-trim-end);
   }
 }
+.rt-DialogOverlay::before{
+  -webkit-backdrop-filter: var(--backdrop-filter-components) !important;
+          backdrop-filter: var(--backdrop-filter-components) !important;
+}
+@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
+  .rt-DialogOverlay::before{
+    -webkit-backdrop-filter: none !important;
+            backdrop-filter: none !important;
+  }
+}
 .rt-DropdownMenuContent{
   max-height: var(--radix-dropdown-menu-content-available-height);
   transform-origin: var(--radix-dropdown-menu-content-transform-origin);
@@ -16544,8 +16573,16 @@
   border-end-start-radius: 0;
   border-end-end-radius: 0;
 }
-:where(.rt-SheetOverlay)::before{
-  opacity: 1;
+.rt-SheetOverlay::before{
+  opacity: 1 !important;
+  -webkit-backdrop-filter: var(--backdrop-filter-components) !important;
+          backdrop-filter: var(--backdrop-filter-components) !important;
+}
+@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
+  .rt-SheetOverlay::before{
+    -webkit-backdrop-filter: none !important;
+            backdrop-filter: none !important;
+  }
 }
 @media (prefers-reduced-motion: no-preference) {
   .rt-SheetContent:where([data-state='open']){
@@ -18816,10 +18853,10 @@
     --separator-size: 100%;
   }
 }
-.rt-SidebarProvider:where([data-side="left"]){
+.rt-SidebarProvider:where([data-side='left']){
   order: -1;
 }
-.rt-SidebarProvider:where([data-side="right"]){
+.rt-SidebarProvider:where([data-side='right']){
   order: 999;
 }
 .rt-SidebarRoot{
@@ -18837,7 +18874,7 @@
   flex: 1;
   height: 100%;
 }
-.rt-SidebarRoot:where([data-type="floating"]){
+.rt-SidebarRoot:where([data-type='floating']){
   border-radius: var(--sidebar-base-border-radius);
   margin: var(--space-2);
   height: calc(100% - var(--space-4));
@@ -18845,13 +18882,13 @@
   position: relative;
   --sidebar-base-border-radius: var(--radius-5);
 }
-.rt-SidebarRoot:where([data-type="floating"]) :where(.radix-themes){
+.rt-SidebarRoot:where([data-type='floating']) :where(.radix-themes){
   border-radius: inherit;
 }
-.rt-SidebarRoot:where([data-type="floating"]):where(.rt-r-size-1){
+.rt-SidebarRoot:where([data-type='floating']):where(.rt-r-size-1){
   --sidebar-base-border-radius: var(--radius-5);
 }
-.rt-SidebarRoot:where([data-type="floating"]):where(.rt-r-size-2){
+.rt-SidebarRoot:where([data-type='floating']):where(.rt-r-size-2){
   --sidebar-base-border-radius: var(--radius-6);
 }
 .rt-SidebarContainer{
@@ -18912,7 +18949,7 @@
   margin: var(--space-2) 0;
 }
 @media (max-width: 768px) {
-  .rt-SidebarRoot{
+  .rt-SidebarRoot:not(:where(.rt-SheetContent .rt-SidebarRoot)){
     display: none;
   }
 }
@@ -19996,6 +20033,18 @@
 :where(.rt-SheetContent) :where(.rt-ShellSidebarPanel){
   transition: none !important;
 }
+:where(.rt-SheetContent) :where(.rt-SidebarRoot){
+  height: 100%;
+  width: 100%;
+}
+:where(.rt-SheetContent) :where(.rt-SidebarContainer){
+  height: 100%;
+  width: 100%;
+}
+:where(.rt-SheetContent) :where(.rt-SidebarContent){
+  height: 100%;
+  width: 100%;
+}
 .rt-SliderRoot{
   --slider-thumb-width: var(--space-3);
   --slider-thumb-height: var(--space-2);

package/tokens/base.css

@@ -1110,7 +1110,7 @@
   --cursor-checkbox: default;
   --cursor-disabled: not-allowed;
   --cursor-link: pointer;
-  --cursor-menu-item: default;
+  --cursor-menu-item: pointer;
   --cursor-radio: default;
   --cursor-slider-thumb: default;
   --cursor-slider-thumb-active: default;

package/tokens.css

@@ -4492,7 +4492,7 @@
   --cursor-checkbox: default;
   --cursor-disabled: not-allowed;
   --cursor-link: pointer;
-  --cursor-menu-item: default;
+  --cursor-menu-item: pointer;
   --cursor-radio: default;
   --cursor-slider-thumb: default;
   --cursor-slider-thumb-active: default;