@kushagradhawan/kookie-ui 0.1.40 → 0.1.42

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);
@@ -11514,10 +11543,10 @@
 }
 :where(.rt-SheetContent) {
     position: fixed !important;
-    width: var(--width, 90vw) !important;
-    max-width: var(--max-width, 100vw) !important;
-    height: 100vh !important;
-    max-height: 100vh !important;
+    width: var(--width, 90vw);
+    max-width: var(--max-width, 100vw);
+    height: 100vh;
+    max-height: 100vh;
     margin: 0 !important;
     border-radius: 0 !important;
     will-change: transform;
@@ -11545,9 +11574,9 @@
     left: 0 !important;
     right: 0 !important;
     bottom: auto !important;
-    width: auto !important;
-    max-width: none !important;
-    height: var(--height, 75vh) !important;
+    width: auto;
+    max-width: none;
+    height: var(--height, 75vh);
     margin: 0 !important;
     border-start-start-radius: 0;
     border-start-end-radius: 0;
@@ -11557,15 +11586,22 @@
     left: 0 !important;
     right: 0 !important;
     top: auto !important;
-    width: auto !important;
-    max-width: none !important;
-    height: var(--height, 75vh) !important;
+    width: auto;
+    max-width: none;
+    height: var(--height, 75vh);
     margin: 0 !important;
     border-end-start-radius: 0;
     border-end-end-radius: 0;
 }
-:where(.rt-SheetOverlay)::before {
-    opacity: 1;
+.rt-SheetOverlay::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-SheetOverlay::before {
+        -webkit-backdrop-filter: none !important;
+                backdrop-filter: none !important;
+    }
 }
 @media (prefers-reduced-motion: no-preference) {
     .rt-SheetContent:where([data-state='open']) {
@@ -11580,34 +11616,49 @@
         animation-fill-mode: both;
     }
     .rt-SheetContent:where([data-state='open'][data-side='start']) {
-        animation-name: rt-sheet-open-from-start, rt-fade-in !important;
+        animation-name: rt-sheet-open-from-start !important;
     }
     .rt-SheetContent:where([data-state='closed'][data-side='start']) {
-        animation-name: rt-sheet-close-to-start, rt-fade-out !important;
+        animation-name: rt-sheet-close-to-start !important;
+        animation-delay: var(--motion-duration-small);
     }
     .rt-SheetContent:where([data-state='open'][data-side='end']) {
-        animation-name: rt-sheet-open-from-end, rt-fade-in !important;
+        animation-name: rt-sheet-open-from-end !important;
     }
     .rt-SheetContent:where([data-state='closed'][data-side='end']) {
-        animation-name: rt-sheet-close-to-end, rt-fade-out !important;
+        animation-name: rt-sheet-close-to-end !important;
+        animation-delay: var(--motion-duration-small);
     }
     .rt-SheetContent:where([data-state='open'][data-side='top']) {
-        animation-name: rt-sheet-open-from-top, rt-fade-in !important;
+        animation-name: rt-sheet-open-from-top !important;
     }
     .rt-SheetContent:where([data-state='closed'][data-side='top']) {
-        animation-name: rt-sheet-close-to-top, rt-fade-out !important;
+        animation-name: rt-sheet-close-to-top !important;
+        animation-delay: var(--motion-duration-small);
     }
     .rt-SheetContent:where([data-state='open'][data-side='bottom']) {
-        animation-name: rt-sheet-open-from-bottom, rt-fade-in !important;
+        animation-name: rt-sheet-open-from-bottom !important;
     }
     .rt-SheetContent:where([data-state='closed'][data-side='bottom']) {
-        animation-name: rt-sheet-close-to-bottom, rt-fade-out !important;
+        animation-name: rt-sheet-close-to-bottom !important;
+        animation-delay: var(--motion-duration-small);
+    }
+    .rt-SheetContent:where([data-state='open']) > * {
+        opacity: 0;
+        animation: rt-fade-in var(--motion-duration-small) var(--motion-spring-snappy) both;
+        animation-delay: var(--motion-duration-medium);
+    }
+    .rt-SheetContent:where([data-state='closed']) > * {
+        animation: rt-fade-out var(--motion-duration-small) var(--motion-spring-snappy) both;
     }
 }
 @media (prefers-reduced-motion: reduce) {
     .rt-SheetContent {
         animation: none !important;
     }
+    .rt-SheetContent > * {
+        animation: none !important;
+    }
 }
 .rt-ScrollAreaRoot {
     display: flex;
@@ -13836,16 +13887,15 @@
         --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 {
-    --sidebar-width: 16rem;
     --sidebar-base-border-radius: 0;
-    width: var(--sidebar-width);
+    width: 100%;
     height: 100%;
     flex-shrink: 0;
     display: flex;
@@ -13857,7 +13907,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 +13915,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 +13982,7 @@
     margin: var(--space-2) 0;
 }
 @media (max-width: 768px) {
-    .rt-SidebarRoot {
+    .rt-SidebarRoot:not(:where(.rt-SheetContent .rt-SidebarRoot)) {
         display: none;
     }
 }
@@ -14921,100 +14971,406 @@
     color: var(--gray-11) !important;
 }
 .rt-ShellRoot {
-    inline-size: 100%;
     display: flex;
     flex-direction: column;
-    block-size: 100vh;
-    --shell-sidebar-rail-width: var(--space-9, 64px);
-    --shell-sidebar-panel-width: 288px;
-    --shell-sidebar-combined-width: calc(var(--shell-sidebar-rail-width) + var(--shell-sidebar-panel-width));
-    --shell-overlay-width: auto;
+    width: 100%;
+    overflow: hidden;
+}
+.rt-ShellRoot:not([style*='height']) {
+    height: 100vh;
 }
 @supports (height: 100dvh) {
-    .rt-ShellRoot {
-        block-size: 100dvh;
+    .rt-ShellRoot:not([style*='height']) {
+        height: 100dvh;
     }
 }
 .rt-ShellHeader {
     position: sticky;
     top: 0;
-    inset-inline: 0;
-    z-index: var(--shell-z-header, 10);
+    z-index: 50;
     height: var(--shell-header-height, 64px);
     min-height: var(--shell-header-height, 64px);
+    background-color: var(--color-panel);
     display: flex;
     align-items: center;
-    background-color: var(--color-panel);
+    flex-shrink: 0;
 }
 .rt-ShellBody {
     display: flex;
     flex-direction: row;
-    align-items: stretch;
-    inline-size: 100%;
-    flex: 1 1 auto;
-    block-size: auto;
-    min-block-size: 0;
-    min-inline-size: 0;
+    flex: 1;
+    min-height: 0;
     overflow: hidden;
+    position: relative;
 }
-.rt-ShellSidebar {
+.rt-ShellLeft {
     display: flex;
     flex-direction: row;
     align-items: stretch;
-    block-size: 100%;
-    min-block-size: 0;
+    flex-shrink: 0;
+    height: 100%;
 }
-.rt-ShellSidebarRail {
+.rt-ShellRail {
     display: flex;
     flex-direction: column;
-    align-items: center;
+    height: 100%;
+    background-color: var(--color-surface);
+    overflow: hidden;
+    transition: width var(--motion-duration-small) var(--motion-ease-standard);
+}
+.rt-ShellRail[data-mode='expanded'] {
+    width: var(--rail-size, 64px);
+}
+.rt-ShellRail[data-mode='collapsed'] {
+    width: 0px;
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+}
+.rt-ShellRailContent {
+    display: flex;
+    flex-direction: column;
+    width: var(--rail-size, 64px);
+    height: 100%;
+    padding: var(--space-2);
     gap: var(--space-2);
-    padding-block: var(--space-2);
-    block-size: 100%;
-    min-block-size: 0;
+    opacity: 0;
+    transition: opacity var(--motion-duration-small) var(--motion-ease-standard) var(--motion-duration-small);
+}
+.rt-ShellRailContent[data-visible] {
+    opacity: 1;
+}
+.rt-ShellRail[data-mode='collapsed'] .rt-ShellRailContent {
+    opacity: 0;
+    transition: opacity var(--motion-duration-small) var(--motion-ease-standard);
+}
+.rt-ShellPanel {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background-color: var(--color-panel);
+    overflow: visible;
+    position: relative;
+    z-index: 1;
+    transition: width var(--motion-duration-small) var(--motion-ease-standard);
+}
+.rt-ShellPanel[data-visible] {
+    width: var(--panel-size, 288px);
+}
+.rt-ShellPanel:not([data-visible]) {
+    width: 0px;
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: var(--peek-rail-width, var(--rail-size, 64px));
+}
+.rt-ShellPanelContent {
+    display: flex;
+    flex-direction: column;
+    width: var(--panel-size, 288px);
+    height: 100%;
     overflow: hidden;
     opacity: 0;
-    transition: inline-size var(--motion-duration-small) var(--motion-ease-standard), opacity var(--motion-duration-small) var(--motion-ease-standard) var(--motion-duration-small);
+    transition: opacity var(--motion-duration-small) var(--motion-ease-standard) var(--motion-duration-small);
 }
-.rt-ShellSidebarPanel {
-    display: block;
+.rt-ShellPanelContent[data-visible] {
+    opacity: 1;
+}
+.rt-ShellPanel:not([data-visible]) .rt-ShellPanelContent {
     opacity: 0;
-    transition: inline-size var(--motion-duration-small) var(--motion-ease-standard), opacity var(--motion-duration-small) var(--motion-ease-standard) var(--motion-duration-small);
-    block-size: 100%;
-    min-block-size: 0;
+    transition: opacity var(--motion-duration-small) var(--motion-ease-standard);
+}
+.rt-ShellSidebar {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background-color: var(--color-panel);
+    overflow: visible;
+    position: relative;
+    z-index: 1;
+    transition: width var(--motion-duration-small) var(--motion-ease-standard);
+}
+.rt-ShellSidebar[data-mode='expanded'] {
+    width: var(--sidebar-size, 288px);
+}
+.rt-ShellSidebar[data-mode='thin'] {
+    width: var(--sidebar-thin-size, 64px);
+}
+.rt-ShellSidebar[data-mode='thin'] .rt-ShellSidebarContent {
+    width: var(--sidebar-thin-size, 64px);
+}
+.rt-ShellSidebar[data-mode='collapsed'] {
+    width: 0px;
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+}
+.rt-ShellSidebarContent {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
     overflow: hidden;
+    opacity: 0;
+    transition: opacity var(--motion-duration-small) var(--motion-ease-standard) var(--motion-duration-small);
+}
+.rt-ShellSidebar[data-mode='thin'] .rt-ShellResizer {
+    display: none;
 }
-.rt-ShellSidebarSingle {
+.rt-ShellSidebarContent[data-visible] {
+    opacity: 1;
+}
+.rt-ShellSidebar[data-mode='collapsed'] .rt-ShellSidebarContent {
     opacity: 0;
-    transition: inline-size var(--motion-duration-small) var(--motion-ease-standard), opacity var(--motion-duration-small) var(--motion-ease-standard) var(--motion-duration-small);
-    block-size: 100%;
+    transition: opacity var(--motion-duration-small) var(--motion-ease-standard);
+}
+.rt-ShellContent {
+    flex: 1;
+    min-width: 0;
+    height: 100%;
+    overflow: auto;
+    background-color: var(--color-surface);
+}
+.rt-ShellInspector {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background-color: var(--color-panel);
+    overflow: visible;
+    position: relative;
+    z-index: 1;
+    transition: width var(--motion-duration-small) var(--motion-ease-standard);
+}
+.rt-ShellInspector[data-mode='expanded'] {
+    width: var(--inspector-size, 320px);
+}
+.rt-ShellInspector[data-mode='collapsed'] {
+    width: 0px;
+    position: absolute;
+    inset-block: 0;
+    inset-inline-end: 0;
+}
+.rt-ShellInspectorContent {
+    display: flex;
+    flex-direction: column;
+    width: var(--inspector-size, 320px);
+    height: 100%;
     overflow: hidden;
+    opacity: 0;
+    transition: opacity var(--motion-duration-small) var(--motion-ease-standard) var(--motion-duration-small);
+}
+.rt-ShellInspectorContent[data-visible] {
+    opacity: 1;
+}
+.rt-ShellInspector[data-mode='collapsed'] .rt-ShellInspectorContent {
+    opacity: 0;
+    transition: opacity var(--motion-duration-small) var(--motion-ease-standard);
+}
+.rt-ShellBottom {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    background-color: var(--color-panel);
+    overflow: visible;
+    flex-shrink: 0;
+    position: relative;
+    transition: height var(--motion-duration-small) var(--motion-ease-standard);
+}
+.rt-ShellBottom[data-mode='expanded'] {
+    height: var(--bottom-size, 200px);
+}
+.rt-ShellBottom[data-mode='collapsed'] {
+    height: 0px;
 }
-:where(.rt-ShellSidebarRail):not([data-visible]),
-:where(.rt-ShellSidebarPanel):not([data-visible]),
-:where(.rt-ShellSidebarSingle):not([data-visible]) {
+.rt-ShellBottomContent {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: var(--bottom-size, 200px);
+    overflow: hidden;
     opacity: 0;
-    transition: opacity var(--motion-duration-small) var(--motion-ease-standard), inline-size var(--motion-duration-small) var(--motion-ease-standard) var(--motion-duration-small);
+    transition: opacity var(--motion-duration-small) var(--motion-ease-standard) var(--motion-duration-small);
 }
-[data-visible] {
+.rt-ShellBottomContent[data-visible] {
     opacity: 1;
 }
+.rt-ShellPanel[data-resizing],
+.rt-ShellSidebar[data-resizing],
+.rt-ShellInspector[data-resizing],
+.rt-ShellBottom[data-resizing] {
+    transition: none !important;
+}
+.rt-ShellPanel:not([data-visible]) .rt-ShellResizer,
+.rt-ShellPanel[data-peek] .rt-ShellResizer {
+    display: none;
+}
+.rt-ShellInspector[data-mode='collapsed'] .rt-ShellResizer,
+.rt-ShellInspector[data-peek] .rt-ShellResizer,
+.rt-ShellBottom[data-mode='collapsed'] .rt-ShellResizer,
+.rt-ShellBottom[data-peek] .rt-ShellResizer,
+.rt-ShellSidebar[data-mode='collapsed'] .rt-ShellResizer,
+.rt-ShellSidebar[data-peek] .rt-ShellResizer {
+    display: none;
+}
+.rt-ShellBottom[data-mode='collapsed'] .rt-ShellBottomContent {
+    opacity: 0;
+    transition: opacity var(--motion-duration-small) var(--motion-ease-standard);
+}
+[data-presentation='overlay'] {
+    contain: style;
+}
+.rt-ShellLeft[data-presentation='stacked'] {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    z-index: 30;
+    transform: translateX(-100%);
+    will-change: transform;
+    transition: transform var(--motion-duration-small) var(--motion-ease-standard), box-shadow var(--motion-duration-small) var(--motion-ease-standard);
+    box-shadow: 4px 0 12px -6px rgba(0, 0, 0, 0.2);
+}
+.rt-ShellLeft[data-presentation='stacked'][data-open] {
+    transform: translateX(0);
+}
+.rt-ShellLeft[data-presentation='stacked'][data-peek] {
+    transform: translateX(0);
+}
+.rt-ShellInspector[data-presentation='stacked'] {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-end: 0;
+    z-index: 32;
+    width: var(--inspector-size, 320px);
+    transform: translateX(100%);
+    transition: transform var(--motion-duration-small) var(--motion-ease-standard), box-shadow var(--motion-duration-small) var(--motion-ease-standard);
+    box-shadow: -4px 0 12px -6px rgba(0, 0, 0, 0.2);
+}
+.rt-ShellInspector[data-presentation='stacked'][data-open] {
+    transform: translateX(0);
+}
+.rt-ShellInspector[data-presentation='stacked'][data-peek] {
+    transform: translateX(0);
+}
+.rt-ShellBottom[data-presentation='stacked'] {
+    position: absolute;
+    inset-inline: 0;
+    inset-block-end: 0;
+    z-index: 31;
+    height: var(--bottom-size, 200px);
+    transform: translateY(100%);
+    transition: transform var(--motion-duration-small) var(--motion-ease-standard), box-shadow var(--motion-duration-small) var(--motion-ease-standard);
+    box-shadow: 0 -4px 12px -6px rgba(0, 0, 0, 0.2);
+}
+.rt-ShellBottom[data-presentation='stacked'][data-open] {
+    transform: translateY(0);
+}
+.rt-ShellBottom[data-presentation='stacked'][data-peek] {
+    transform: translateY(0);
+}
 @media (prefers-reduced-motion: reduce) {
-    .rt-ShellSidebarRail,
-  .rt-ShellSidebarPanel,
-  .rt-ShellSidebarSingle {
+    .rt-ShellRail,
+  .rt-ShellPanel,
+  .rt-ShellSidebar,
+  .rt-ShellInspector,
+  .rt-ShellBottom,
+  .rt-ShellRailContent,
+  .rt-ShellPanelContent,
+  .rt-ShellSidebarContent,
+  .rt-ShellInspectorContent,
+  .rt-ShellBottomContent {
         transition: none;
     }
 }
-.rt-ShellContent {
-    flex: 1 1 auto;
+.rt-ShellResizer {
+    position: absolute;
+    z-index: 1;
+    background: transparent;
+    --resizer-hit: var(--space-3);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: visible;
+}
+.rt-ShellResizer[data-orientation='vertical'][data-edge='end'] {
+    inset-block: 0;
+    inset-inline-end: 0;
+    inline-size: var(--resizer-hit);
     block-size: 100%;
-    min-block-size: 0;
-    min-inline-size: 0;
-    overflow: auto;
+    cursor: col-resize;
+    transform: translateX(50%);
 }
-:where(.rt-SheetContent) :where(.rt-ShellSidebarPanel) {
-    transition: none !important;
+.rt-ShellResizer[data-orientation='vertical'][data-edge='start'] {
+    inset-block: 0;
+    inset-inline-start: 0;
+    inline-size: var(--resizer-hit);
+    block-size: 100%;
+    cursor: col-resize;
+    transform: translateX(-50%);
+}
+.rt-ShellResizer[data-orientation='horizontal'][data-edge='start'] {
+    inset-inline: 0;
+    inset-block-start: 0;
+    inline-size: 100%;
+    block-size: var(--resizer-hit);
+    cursor: row-resize;
+    transform: translateY(-50%);
+}
+@media (pointer: coarse) {
+    .rt-ShellResizer {
+        --resizer-hit: var(--space-6);
+    }
+}
+.rt-ShellRail[data-peek],
+.rt-ShellPanel[data-peek],
+.rt-ShellSidebar[data-peek],
+.rt-ShellInspector[data-peek],
+.rt-ShellBottom[data-peek] {
+    position: absolute;
+    z-index: 40;
+}
+.rt-ShellRail[data-peek],
+.rt-ShellPanel[data-peek],
+.rt-ShellSidebar[data-peek] {
+    box-shadow: 4px 0 8px -4px rgba(0, 0, 0, 0.15);
+}
+.rt-ShellInspector[data-peek] {
+    box-shadow: -4px 0 8px -4px rgba(0, 0, 0, 0.15);
+    inset-block: 0;
+    inset-inline-end: 0;
+    width: var(--inspector-size, 320px);
+}
+.rt-ShellBottom[data-peek] {
+    box-shadow: 0 -4px 8px -4px rgba(0, 0, 0, 0.15);
+    inset-inline: 0;
+    inset-block-end: 0;
+    height: var(--bottom-size, 200px);
+}
+.rt-ShellRail[data-peek] .rt-ShellRailContent,
+.rt-ShellPanel[data-peek] .rt-ShellPanelContent,
+.rt-ShellSidebar[data-peek] .rt-ShellSidebarContent,
+.rt-ShellInspector[data-peek] .rt-ShellInspectorContent,
+.rt-ShellBottom[data-peek] .rt-ShellBottomContent {
+    opacity: 1;
+}
+.rt-ShellRail[data-peek] {
+    inset-block: 0;
+    inset-inline-start: 0;
+    width: var(--rail-size, 64px);
+}
+.rt-ShellPanel[data-peek] {
+    inset-block: 0;
+    inset-inline-start: var(--peek-rail-width, var(--rail-size, 64px));
+    width: var(--panel-size, 288px);
+}
+.rt-ShellSidebar[data-peek] {
+    inset-block: 0;
+    inset-inline-start: 0;
+    width: var(--peek-sidebar-width, var(--sidebar-size, 288px));
+}
+.rt-ShellInspector[data-peek][data-mode='collapsed'] {
+    width: var(--inspector-size, 320px);
+}
+.rt-ShellBottom[data-peek][data-mode='collapsed'] {
+    height: var(--bottom-size, 200px);
 }
 .rt-SliderRoot {
     --slider-thumb-width: var(--space-3);