@kushagradhawan/kookie-ui 0.1.39 → 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

@@ -4935,7 +4935,18 @@
             backdrop-filter: var(--backdrop-filter-panel);
     --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
 }
-:where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-BaseCard::before {
+:where(
+        .rt-PopoverContent,
+        .rt-BaseDialogContent,
+        .rt-BaseMenuContent,
+        .rt-DropdownMenuContent,
+        .rt-ContextMenuContent,
+        .rt-AlertDialogContent,
+        .rt-HoverCardContent,
+        .rt-TooltipContent,
+        .rt-Card
+      )
+      .rt-BaseCard::before {
     -webkit-backdrop-filter: none !important;
             backdrop-filter: none !important;
 }
@@ -5294,7 +5305,11 @@
             backdrop-filter: none;
     --backdrop-filter-panel: none;
 }
-:where(.rt-BaseCard[data-panel-background='translucent'], .rt-BaseCard[data-material='translucent']) .rt-BaseCard:where(.rt-variant-classic)::before {
+:where(
+        .rt-BaseCard[data-panel-background='translucent'],
+        .rt-BaseCard[data-material='translucent']
+      )
+      .rt-BaseCard:where(.rt-variant-classic)::before {
     -webkit-backdrop-filter: var(--backdrop-filter-panel);
             backdrop-filter: var(--backdrop-filter-panel);
     --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
@@ -5319,13 +5334,18 @@
         -webkit-backdrop-filter: var(--backdrop-filter-panel);
                 backdrop-filter: var(--backdrop-filter-panel);
     }
-    :where(.rt-BaseCard[data-panel-background='solid'], .rt-BaseCard[data-material='solid']) .rt-BaseCard:where(.rt-variant-classic):where(:any-link, button, label):where(:hover)::before {
+    :where(.rt-BaseCard[data-panel-background='solid'], .rt-BaseCard[data-material='solid'])
+            .rt-BaseCard:where(.rt-variant-classic):where(:any-link, button, label):where(:hover)::before {
         background-color: var(--gray-2);
         -webkit-backdrop-filter: none;
                 backdrop-filter: none;
         --backdrop-filter-panel: none;
     }
-    :where(.rt-BaseCard[data-panel-background='translucent'], .rt-BaseCard[data-material='translucent']) .rt-BaseCard:where(.rt-variant-classic):where(:any-link, button, label):where(:hover)::before {
+    :where(
+              .rt-BaseCard[data-panel-background='translucent'],
+              .rt-BaseCard[data-material='translucent']
+            )
+            .rt-BaseCard:where(.rt-variant-classic):where(:any-link, button, label):where(:hover)::before {
         background-color: color-mix(in srgb, var(--gray-a2), var(--gray-2) 60%);
         -webkit-backdrop-filter: var(--backdrop-filter-panel);
                 backdrop-filter: var(--backdrop-filter-panel);
@@ -5353,7 +5373,11 @@
             backdrop-filter: none;
     --backdrop-filter-panel: none;
 }
-:where(.rt-BaseCard[data-panel-background='translucent'], .rt-BaseCard[data-material='translucent']) .rt-BaseCard:where(.rt-variant-classic):where(:any-link, button, label):where([data-state='open'])::before {
+:where(
+            .rt-BaseCard[data-panel-background='translucent'],
+            .rt-BaseCard[data-material='translucent']
+          )
+          .rt-BaseCard:where(.rt-variant-classic):where(:any-link, button, label):where([data-state='open'])::before {
     background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
     -webkit-backdrop-filter: var(--backdrop-filter-panel);
             backdrop-filter: var(--backdrop-filter-panel);
@@ -5379,7 +5403,11 @@
             backdrop-filter: none;
     --backdrop-filter-panel: none;
 }
-:where(.rt-BaseCard[data-panel-background='translucent'], .rt-BaseCard[data-material='translucent']) .rt-BaseCard:where(.rt-variant-classic):where(:any-link, button, label):where(:active:not([data-state='open']))::before {
+:where(
+            .rt-BaseCard[data-panel-background='translucent'],
+            .rt-BaseCard[data-material='translucent']
+          )
+          .rt-BaseCard:where(.rt-variant-classic):where(:any-link, button, label):where(:active:not([data-state='open']))::before {
     background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
     -webkit-backdrop-filter: var(--backdrop-filter-panel);
             backdrop-filter: var(--backdrop-filter-panel);
@@ -5446,7 +5474,18 @@
                 backdrop-filter: var(--backdrop-filter-panel);
         --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
     }
-    :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-BaseCard:where(.rt-variant-ghost):where(:any-link, button, label):where(:hover) {
+    :where(
+            .rt-PopoverContent,
+            .rt-BaseDialogContent,
+            .rt-BaseMenuContent,
+            .rt-DropdownMenuContent,
+            .rt-ContextMenuContent,
+            .rt-AlertDialogContent,
+            .rt-HoverCardContent,
+            .rt-TooltipContent,
+            .rt-Card
+          )
+          .rt-BaseCard:where(.rt-variant-ghost):where(:any-link, button, label):where(:hover) {
         -webkit-backdrop-filter: none !important;
                 backdrop-filter: none !important;
     }
@@ -5474,7 +5513,18 @@
             backdrop-filter: var(--backdrop-filter-panel);
     --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
 }
-:where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-BaseCard:where(.rt-variant-ghost):where(:any-link, button, label):where([data-state='open']) {
+:where(
+          .rt-PopoverContent,
+          .rt-BaseDialogContent,
+          .rt-BaseMenuContent,
+          .rt-DropdownMenuContent,
+          .rt-ContextMenuContent,
+          .rt-AlertDialogContent,
+          .rt-HoverCardContent,
+          .rt-TooltipContent,
+          .rt-Card
+        )
+        .rt-BaseCard:where(.rt-variant-ghost):where(:any-link, button, label):where([data-state='open']) {
     -webkit-backdrop-filter: none !important;
             backdrop-filter: none !important;
 }
@@ -5501,7 +5551,18 @@
             backdrop-filter: var(--backdrop-filter-panel);
     --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
 }
-:where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-BaseCard:where(.rt-variant-ghost):where(:any-link, button, label):where(:active:not([data-state='open'])) {
+:where(
+          .rt-PopoverContent,
+          .rt-BaseDialogContent,
+          .rt-BaseMenuContent,
+          .rt-DropdownMenuContent,
+          .rt-ContextMenuContent,
+          .rt-AlertDialogContent,
+          .rt-HoverCardContent,
+          .rt-TooltipContent,
+          .rt-Card
+        )
+        .rt-BaseCard:where(.rt-variant-ghost):where(:any-link, button, label):where(:active:not([data-state='open'])) {
     -webkit-backdrop-filter: none !important;
             backdrop-filter: none !important;
 }
@@ -5515,16 +5576,16 @@
 }
 .rt-BaseCard:where(.rt-variant-soft) {
     --card-border-width: 0px;
-    --card-background-color: var(--gray-3);
+    --card-background-color: var(--gray-2);
 }
 :where([data-panel-background='translucent'], [data-material='translucent']) .rt-BaseCard:where(.rt-variant-soft) {
-    --card-background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
+    --card-background-color: color-mix(in srgb, var(--gray-a2), var(--gray-2) 60%);
 }
 .rt-BaseCard:where(.rt-variant-soft):where([data-panel-background='solid'], [data-material='solid']) {
-    --card-background-color: var(--gray-3);
+    --card-background-color: var(--gray-2);
 }
 .rt-BaseCard:where(.rt-variant-soft):where([data-panel-background='translucent'], [data-material='translucent']) {
-    --card-background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
+    --card-background-color: color-mix(in srgb, var(--gray-a2), var(--gray-2) 60%);
 }
 .rt-BaseCard:where(.rt-variant-soft)::before {
     background-color: var(--card-background-color);
@@ -5538,7 +5599,11 @@
             backdrop-filter: none;
     --backdrop-filter-panel: none;
 }
-:where(.rt-BaseCard[data-panel-background='translucent'], .rt-BaseCard[data-material='translucent']) .rt-BaseCard:where(.rt-variant-soft)::before {
+:where(
+        .rt-BaseCard[data-panel-background='translucent'],
+        .rt-BaseCard[data-material='translucent']
+      )
+      .rt-BaseCard:where(.rt-variant-soft)::before {
     -webkit-backdrop-filter: var(--backdrop-filter-panel);
             backdrop-filter: var(--backdrop-filter-panel);
     --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
@@ -5561,19 +5626,35 @@
         -webkit-backdrop-filter: var(--backdrop-filter-panel);
                 backdrop-filter: var(--backdrop-filter-panel);
     }
-    :where(.rt-BaseCard[data-panel-background='solid'], .rt-BaseCard[data-material='solid']) .rt-BaseCard:where(.rt-variant-soft):where(:any-link, button, label):where(:hover)::before {
+    :where(.rt-BaseCard[data-panel-background='solid'], .rt-BaseCard[data-material='solid'])
+            .rt-BaseCard:where(.rt-variant-soft):where(:any-link, button, label):where(:hover)::before {
         background-color: var(--gray-3);
         -webkit-backdrop-filter: none;
                 backdrop-filter: none;
         --backdrop-filter-panel: none;
     }
-    :where(.rt-BaseCard[data-panel-background='translucent'], .rt-BaseCard[data-material='translucent']) .rt-BaseCard:where(.rt-variant-soft):where(:any-link, button, label):where(:hover)::before {
+    :where(
+              .rt-BaseCard[data-panel-background='translucent'],
+              .rt-BaseCard[data-material='translucent']
+            )
+            .rt-BaseCard:where(.rt-variant-soft):where(:any-link, button, label):where(:hover)::before {
         background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
         -webkit-backdrop-filter: var(--backdrop-filter-panel);
                 backdrop-filter: var(--backdrop-filter-panel);
         --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
     }
-    :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-BaseCard:where(.rt-variant-soft):where(:any-link, button, label):where(:hover)::before {
+    :where(
+              .rt-PopoverContent,
+              .rt-BaseDialogContent,
+              .rt-BaseMenuContent,
+              .rt-DropdownMenuContent,
+              .rt-ContextMenuContent,
+              .rt-AlertDialogContent,
+              .rt-HoverCardContent,
+              .rt-TooltipContent,
+              .rt-Card
+            )
+            .rt-BaseCard:where(.rt-variant-soft):where(:any-link, button, label):where(:hover)::before {
         -webkit-backdrop-filter: none !important;
                 backdrop-filter: none !important;
     }
@@ -5592,32 +5673,51 @@
             backdrop-filter: none;
     --backdrop-filter-panel: none;
 }
-:where(.rt-BaseCard[data-panel-background='translucent'], .rt-BaseCard[data-material='translucent']) .rt-BaseCard:where(.rt-variant-soft):where(:any-link, button, label):where([data-state='open'])::before {
+:where(
+            .rt-BaseCard[data-panel-background='translucent'],
+            .rt-BaseCard[data-material='translucent']
+          )
+          .rt-BaseCard:where(.rt-variant-soft):where(:any-link, button, label):where([data-state='open'])::before {
     background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
     -webkit-backdrop-filter: var(--backdrop-filter-panel);
             backdrop-filter: var(--backdrop-filter-panel);
     --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
 }
-:where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-BaseCard:where(.rt-variant-soft):where(:any-link, button, label):where([data-state='open'])::before {
+:where(
+            .rt-PopoverContent,
+            .rt-BaseDialogContent,
+            .rt-BaseMenuContent,
+            .rt-DropdownMenuContent,
+            .rt-ContextMenuContent,
+            .rt-AlertDialogContent,
+            .rt-HoverCardContent,
+            .rt-TooltipContent,
+            .rt-Card
+          )
+          .rt-BaseCard:where(.rt-variant-soft):where(:any-link, button, label):where([data-state='open'])::before {
     -webkit-backdrop-filter: none !important;
             backdrop-filter: none !important;
 }
 .rt-BaseCard:where(.rt-variant-soft):where(:any-link, button, label):where(:active:not([data-state='open']))::before {
-    background-color: var(--gray-4);
+    background-color: var(--gray-3);
 }
 :where([data-panel-background='translucent'], [data-material='translucent']) .rt-BaseCard:where(.rt-variant-soft):where(:any-link, button, label):where(:active:not([data-state='open']))::before {
-    background-color: color-mix(in srgb, var(--gray-a4), var(--gray-4) 60%);
+    background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
     -webkit-backdrop-filter: var(--backdrop-filter-panel);
             backdrop-filter: var(--backdrop-filter-panel);
 }
 :where(.rt-BaseCard[data-panel-background='solid'], .rt-BaseCard[data-material='solid']) .rt-BaseCard:where(.rt-variant-soft):where(:any-link, button, label):where(:active:not([data-state='open']))::before {
-    background-color: var(--gray-4);
+    background-color: var(--gray-3);
     -webkit-backdrop-filter: none;
             backdrop-filter: none;
     --backdrop-filter-panel: none;
 }
-:where(.rt-BaseCard[data-panel-background='translucent'], .rt-BaseCard[data-material='translucent']) .rt-BaseCard:where(.rt-variant-soft):where(:any-link, button, label):where(:active:not([data-state='open']))::before {
-    background-color: color-mix(in srgb, var(--gray-a4), var(--gray-4) 60%);
+:where(
+            .rt-BaseCard[data-panel-background='translucent'],
+            .rt-BaseCard[data-material='translucent']
+          )
+          .rt-BaseCard:where(.rt-variant-soft):where(:any-link, button, label):where(:active:not([data-state='open']))::before {
+    background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
     -webkit-backdrop-filter: var(--backdrop-filter-panel);
             backdrop-filter: var(--backdrop-filter-panel);
     --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
@@ -5652,7 +5752,11 @@
             backdrop-filter: none;
     --backdrop-filter-panel: none;
 }
-:where(.rt-BaseCard[data-panel-background='translucent'], .rt-BaseCard[data-material='translucent']) .rt-BaseCard:where(.rt-variant-surface)::before {
+:where(
+        .rt-BaseCard[data-panel-background='translucent'],
+        .rt-BaseCard[data-material='translucent']
+      )
+      .rt-BaseCard:where(.rt-variant-surface)::before {
     -webkit-backdrop-filter: var(--backdrop-filter-panel);
             backdrop-filter: var(--backdrop-filter-panel);
     --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
@@ -5682,13 +5786,18 @@
         -webkit-backdrop-filter: var(--backdrop-filter-panel);
                 backdrop-filter: var(--backdrop-filter-panel);
     }
-    :where(.rt-BaseCard[data-panel-background='solid'], .rt-BaseCard[data-material='solid']) .rt-BaseCard:where(.rt-variant-surface):where(:any-link, button, label):where(:hover)::before {
+    :where(.rt-BaseCard[data-panel-background='solid'], .rt-BaseCard[data-material='solid'])
+            .rt-BaseCard:where(.rt-variant-surface):where(:any-link, button, label):where(:hover)::before {
         background-color: var(--gray-2);
         -webkit-backdrop-filter: none;
                 backdrop-filter: none;
         --backdrop-filter-panel: none;
     }
-    :where(.rt-BaseCard[data-panel-background='translucent'], .rt-BaseCard[data-material='translucent']) .rt-BaseCard:where(.rt-variant-surface):where(:any-link, button, label):where(:hover)::before {
+    :where(
+              .rt-BaseCard[data-panel-background='translucent'],
+              .rt-BaseCard[data-material='translucent']
+            )
+            .rt-BaseCard:where(.rt-variant-surface):where(:any-link, button, label):where(:hover)::before {
         background-color: color-mix(in srgb, var(--gray-a2), var(--gray-2) 60%);
         -webkit-backdrop-filter: var(--backdrop-filter-panel);
                 backdrop-filter: var(--backdrop-filter-panel);
@@ -5715,7 +5824,11 @@
             backdrop-filter: none;
     --backdrop-filter-panel: none;
 }
-:where(.rt-BaseCard[data-panel-background='translucent'], .rt-BaseCard[data-material='translucent']) .rt-BaseCard:where(.rt-variant-surface):where(:any-link, button, label):where([data-state='open'])::before {
+:where(
+            .rt-BaseCard[data-panel-background='translucent'],
+            .rt-BaseCard[data-material='translucent']
+          )
+          .rt-BaseCard:where(.rt-variant-surface):where(:any-link, button, label):where([data-state='open'])::before {
     background-color: color-mix(in srgb, var(--gray-a2), var(--gray-2) 60%);
     -webkit-backdrop-filter: var(--backdrop-filter-panel);
             backdrop-filter: var(--backdrop-filter-panel);
@@ -5741,7 +5854,11 @@
             backdrop-filter: none;
     --backdrop-filter-panel: none;
 }
-:where(.rt-BaseCard[data-panel-background='translucent'], .rt-BaseCard[data-material='translucent']) .rt-BaseCard:where(.rt-variant-surface):where(:any-link, button, label):where(:active:not([data-state='open']))::before {
+:where(
+            .rt-BaseCard[data-panel-background='translucent'],
+            .rt-BaseCard[data-material='translucent']
+          )
+          .rt-BaseCard:where(.rt-variant-surface):where(:any-link, button, label):where(:active:not([data-state='open']))::before {
     background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
     -webkit-backdrop-filter: var(--backdrop-filter-panel);
             backdrop-filter: var(--backdrop-filter-panel);
@@ -6804,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) {
@@ -6943,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);
@@ -6978,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);
@@ -7013,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);
@@ -7049,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);
@@ -7084,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);
@@ -7119,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);
@@ -7156,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);
@@ -7191,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);
@@ -7226,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);
@@ -7263,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);
@@ -7298,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);
@@ -7333,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);
@@ -7370,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);
@@ -7405,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);
@@ -7440,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);
@@ -7477,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);
@@ -7512,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);
@@ -7547,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);
@@ -7566,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) {
@@ -8322,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);
@@ -11447,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']) {
@@ -13719,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 {
@@ -13740,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));
@@ -13748,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 {
@@ -13815,7 +13969,7 @@
     margin: var(--space-2) 0;
 }
 @media (max-width: 768px) {
-    .rt-SidebarRoot {
+    .rt-SidebarRoot:not(:where(.rt-SheetContent .rt-SidebarRoot)) {
         display: none;
     }
 }
@@ -13889,7 +14043,7 @@
 .rt-SidebarMenuSubTrigger :where(.rt-SidebarMenuSubTriggerIcon) {
     transition: transform var(--motion-duration-micro) var(--motion-ease-standard);
 }
-.rt-SidebarMenuSubTrigger:where([data-state="open"]) :where(.rt-SidebarMenuSubTriggerIcon) {
+.rt-SidebarMenuSubTrigger:where([data-state='open']) :where(.rt-SidebarMenuSubTriggerIcon) {
     transform: rotate(90deg);
 }
 .rt-SidebarMenuSubContent {
@@ -13898,10 +14052,10 @@
 .rt-SidebarMenuSubContent:where(:focus-within) {
     overflow: visible;
 }
-.rt-SidebarMenuSubContent:where([data-state="open"]) {
+.rt-SidebarMenuSubContent:where([data-state='open']) {
     animation: rt-sidebar-slide-down var(--motion-duration-small) var(--motion-ease-standard);
 }
-.rt-SidebarMenuSubContent:where([data-state="closed"]) {
+.rt-SidebarMenuSubContent:where([data-state='closed']) {
     animation: rt-sidebar-slide-up var(--motion-duration-small) var(--motion-ease-standard);
 }
 @keyframes rt-sidebar-slide-down {
@@ -14823,7 +14977,8 @@
     top: 0;
     inset-inline: 0;
     z-index: var(--shell-z-header, 10);
-    block-size: var(--shell-header-height, 64px);
+    height: var(--shell-header-height, 64px);
+    min-height: var(--shell-header-height, 64px);
     display: flex;
     align-items: center;
     background-color: var(--color-panel);
@@ -14898,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);
@@ -16219,6 +16386,9 @@
     --scrollarea-scrollbar-horizontal-margin-left: 0;
     --scrollarea-scrollbar-horizontal-margin-right: 0;
 }
+.rt-TableRoot:where(.rt-variant-ghost) :where(.rt-TableBody) :where(.rt-TableRow:last-child) {
+    --table-row-box-shadow: none;
+}
 .rt-TabsContent {
     position: relative;
     outline: 0;

package/dist/cjs/components/shell.d.ts

@@ -68,6 +68,8 @@ interface ShellRootProps extends React.ComponentPropsWithoutRef<'div'> {
     onToolChange?: (id: string | null) => void;
     activeContext?: string | null;
     onContextChange?: (id: string | null) => void;
+    /** Custom cycling order for single-markup sidebars. Defaults to ['panel', 'rail', 'collapsed'] */
+    singleViewCycle?: SingleView[];
 }
 declare const Root: React.ForwardRefExoticComponent<ShellRootProps & React.RefAttributes<HTMLDivElement>>;
 /** Props for `Shell.Header`. Sticky by default and respects `--shell-header-height`. */