@kushagradhawan/kookie-ui 0.1.40 → 0.1.42

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;
@@ -190,6 +190,8 @@
   --letter-spacing-8: -0.01em;
   --letter-spacing-9: -0.025em;
   --default-font-family: var(--font-inter, 'Inter'), -apple-system, BlinkMacSystemFont, 'Segoe UI (Custom)', Roboto, 'Helvetica Neue', 'Open Sans (Custom)', system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  --default-font-family-sans: var(--font-inter, 'Inter'), -apple-system, BlinkMacSystemFont, 'Segoe UI (Custom)', Roboto, 'Helvetica Neue', 'Open Sans (Custom)', system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  --default-font-family-mono: var(--font-mono);
   --default-font-size: var(--font-size-3);
   --default-font-style: normal;
   --default-font-weight: var(--font-weight-regular);
@@ -4987,6 +4989,16 @@
   descent-override: 22%;
   src: local('Consolas Bold Italic');
 }
+[data-font-family='sans']{
+  --default-font-family: var(--default-font-family-sans);
+  --heading-font-family: var(--default-font-family-sans);
+  --strong-font-family: var(--default-font-family-sans);
+}
+[data-font-family='mono']{
+  --default-font-family: var(--default-font-family-mono);
+  --heading-font-family: var(--default-font-family-mono);
+  --strong-font-family: var(--default-font-family-mono);
+}
 [data-blur='none']{
   --blur-factor: 0;
 }
@@ -11901,7 +11913,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 +12052,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 +12088,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 +12124,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 +12161,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 +12197,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 +12233,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 +12271,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 +12307,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 +12343,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 +12381,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 +12417,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 +12453,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 +12491,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 +12527,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 +12563,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 +12601,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 +12637,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 +12673,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 +12693,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 +13450,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);
@@ -16494,10 +16535,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;
@@ -16525,9 +16566,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;
@@ -16537,15 +16578,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']){
@@ -16560,34 +16608,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;
@@ -18816,16 +18879,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;
@@ -18837,7 +18899,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 +18907,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 +18974,7 @@
   margin: var(--space-2) 0;
 }
 @media (max-width: 768px) {
-  .rt-SidebarRoot{
+  .rt-SidebarRoot:not(:where(.rt-SheetContent .rt-SidebarRoot)){
     display: none;
   }
 }
@@ -19901,100 +19963,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-ShellSidebarContent[data-visible]{
+  opacity: 1;
 }
-.rt-ShellSidebarSingle{
+.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;
 }
-:where(.rt-ShellSidebarRail):not([data-visible]),
-:where(.rt-ShellSidebarPanel):not([data-visible]),
-:where(.rt-ShellSidebarSingle):not([data-visible]){
+.rt-ShellInspector[data-mode='collapsed'] .rt-ShellInspectorContent{
   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);
+}
+.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);
 }
-[data-visible]{
+.rt-ShellBottom[data-mode='collapsed']{
+  height: 0px;
+}
+.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) var(--motion-duration-small);
+}
+.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);