@kushagradhawan/kookie-ui 0.1.41 → 0.1.43

package/styles.css

@@ -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;
 }
@@ -16523,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;
@@ -16554,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;
@@ -16566,15 +16578,14 @@
   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;
 }
 .rt-SheetOverlay::before{
-  opacity: 1 !important;
   -webkit-backdrop-filter: var(--backdrop-filter-components) !important;
           backdrop-filter: var(--backdrop-filter-components) !important;
 }
@@ -16597,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;
@@ -18860,9 +18886,8 @@
   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;
@@ -18957,7 +18982,7 @@
   flex: 1;
   display: flex;
   flex-direction: column;
-  padding: var(--base-menu-content-padding);
+  padding-bottom: var(--base-menu-content-padding);
   box-sizing: border-box;
   list-style: none;
   margin: 0;
@@ -19110,8 +19135,8 @@
   padding-left: var(--space-2);
 }
 .rt-SidebarContent :where(.rt-BaseMenuItem){
-  margin-top: calc(var(--space-1) / 2);
-  margin-bottom: calc(var(--space-1) / 2);
+  margin-top: calc(var(--space-1) / 4);
+  margin-bottom: calc(var(--space-1) / 4);
 }
 :where(.rt-SidebarContainer.rt-layout-rail .rt-SidebarContent),
 .rt-ShellSidebarRail :where(.rt-SidebarContent),
@@ -19176,13 +19201,13 @@
   --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
   --backdrop-filter-components: blur(var(--backdrop-blur-components));
 }
-:where(.rt-SidebarRoot[data-type="floating"]) .rt-SidebarContainer:where(.rt-variant-outline){
+:where(.rt-SidebarRoot[data-type='floating']) .rt-SidebarContainer:where(.rt-variant-outline){
   box-shadow: inset 0 0 0 1px var(--gray-a6);
 }
-:where(.rt-SidebarRoot[data-type="sidebar"][data-side="left"]) .rt-SidebarContainer:where(.rt-variant-outline){
+:where(.rt-SidebarRoot[data-type='sidebar'][data-side='left']) .rt-SidebarContainer:where(.rt-variant-outline){
   box-shadow: inset -1px 0 0 0 var(--gray-a6);
 }
-:where(.rt-SidebarRoot[data-type="sidebar"][data-side="right"]) .rt-SidebarContainer:where(.rt-variant-outline){
+:where(.rt-SidebarRoot[data-type='sidebar'][data-side='right']) .rt-SidebarContainer:where(.rt-variant-outline){
   box-shadow: inset 1px 0 0 0 var(--gray-a6);
 }
 .rt-SidebarContainer:where(.rt-variant-ghost){
@@ -19234,22 +19259,22 @@
   --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
   --backdrop-filter-components: blur(var(--backdrop-blur-components));
 }
-:where(.rt-SidebarRoot[data-type="floating"]) .rt-SidebarContainer:where(.rt-variant-surface){
+:where(.rt-SidebarRoot[data-type='floating']) .rt-SidebarContainer:where(.rt-variant-surface){
   box-shadow: inset 0 0 0 1px var(--gray-6);
 }
-:where([data-panel-background='translucent']) :is(:where(.rt-SidebarRoot[data-type="floating"]) .rt-SidebarContainer:where(.rt-variant-surface)){
+:where([data-panel-background='translucent']) :is(:where(.rt-SidebarRoot[data-type='floating']) .rt-SidebarContainer:where(.rt-variant-surface)){
   box-shadow: inset 0 0 0 1px var(--gray-a6);
 }
-:where(.rt-SidebarRoot[data-type="sidebar"][data-side="left"]) .rt-SidebarContainer:where(.rt-variant-surface){
+:where(.rt-SidebarRoot[data-type='sidebar'][data-side='left']) .rt-SidebarContainer:where(.rt-variant-surface){
   box-shadow: inset -1px 0 0 0 var(--gray-6);
 }
-:where([data-panel-background='translucent']) :is(:where(.rt-SidebarRoot[data-type="sidebar"][data-side="left"]) .rt-SidebarContainer:where(.rt-variant-surface)){
+:where([data-panel-background='translucent']) :is(:where(.rt-SidebarRoot[data-type='sidebar'][data-side='left']) .rt-SidebarContainer:where(.rt-variant-surface)){
   box-shadow: inset -1px 0 0 0 var(--gray-a6);
 }
-:where(.rt-SidebarRoot[data-type="sidebar"][data-side="right"]) .rt-SidebarContainer:where(.rt-variant-surface){
+:where(.rt-SidebarRoot[data-type='sidebar'][data-side='right']) .rt-SidebarContainer:where(.rt-variant-surface){
   box-shadow: inset 1px 0 0 0 var(--gray-6);
 }
-:where([data-panel-background='translucent']) :is(:where(.rt-SidebarRoot[data-type="sidebar"][data-side="right"]) .rt-SidebarContainer:where(.rt-variant-surface)){
+:where([data-panel-background='translucent']) :is(:where(.rt-SidebarRoot[data-type='sidebar'][data-side='right']) .rt-SidebarContainer:where(.rt-variant-surface)){
   box-shadow: inset 1px 0 0 0 var(--gray-a6);
 }
 .rt-SidebarHeader:where(.rt-SidebarHeader--container){
@@ -19938,112 +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-ShellSidebarSingle{
+.rt-ShellSidebar[data-mode='thin'] .rt-ShellResizer{
+  display: none;
+}
+.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);
 }
-:where(.rt-ShellSidebarRail):not([data-visible]),
-:where(.rt-ShellSidebarPanel):not([data-visible]),
-:where(.rt-ShellSidebarSingle):not([data-visible]){
+.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;
+}
+.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%);
 }
-:where(.rt-SheetContent) :where(.rt-SidebarRoot){
-  height: 100%;
-  width: 100%;
+.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%);
 }
-:where(.rt-SheetContent) :where(.rt-SidebarContainer){
-  height: 100%;
-  width: 100%;
+@media (pointer: coarse) {
+  .rt-ShellResizer{
+    --resizer-hit: var(--space-6);
+  }
 }
-:where(.rt-SheetContent) :where(.rt-SidebarContent){
-  height: 100%;
-  width: 100%;
+.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);