@womp/kookie-ui 0.7.0 → 0.8.1

package/styles.css

@@ -21889,7 +21889,7 @@
           padding-inline-end: var(--base-menu-item-padding-right);
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
-  color: var(--gray-a10);
+  color: var(--gray-a11);
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
@@ -23691,75 +23691,64 @@
   height: var(--content-icon-size-3);
 }
 .rt-ShellRoot {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  --shell-inset-gap: var(--space-2);
+  --shell-rail-offset: 0px;
+  display: grid;
+  grid-template-areas: 'header header header header header' 'rail panel sidebar content inspector' 'bottom bottom bottom bottom bottom';
+  grid-template-columns: auto auto auto minmax(0, 1fr) auto;
+  grid-template-rows: auto minmax(0, 1fr) auto;
   width: 100%;
+  height: 100vh;
   overflow: hidden;
   -ms-scroll-chaining: none;
       overscroll-behavior: none;
   position: relative;
-}
-.rt-ShellRoot:not([style*='height']) {
-  height: 100vh;
+  isolation: isolate;
 }
 @supports (height: 100dvh) {
-  .rt-ShellRoot:not([style*='height']) {
+  .rt-ShellRoot {
     height: 100dvh;
   }
 }
+:root[data-rt-shell-lock] {
+  overflow: hidden;
+}
 .rt-ShellHeader {
-  position: sticky;
-  top: 0;
-  z-index: 50;
-  height: var(--shell-header-height, 64px);
-  min-height: var(--shell-header-height, 64px);
+  grid-area: header;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
+  height: var(--shell-header-height, 64px);
+  min-height: var(--shell-header-height, 64px);
+  position: relative;
+  z-index: 2;
 }
-.rt-ShellBody {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
-  -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
+.rt-ShellContent {
+  grid-area: content;
+  min-width: 0;
   min-height: 0;
-  overflow: hidden;
-  position: relative;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  padding-bottom: env(safe-area-inset-bottom, 0px);
   -ms-scroll-chaining: none;
       overscroll-behavior: contain;
+  isolation: isolate;
 }
-.rt-ShellLeft {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
-  -webkit-box-align: stretch;
-      -ms-flex-align: stretch;
-          align-items: stretch;
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
-  height: 100%;
-}
-.rt-ShellRail {
+.rt-ShellPane {
+  --rt-shell-position: initial;
+  --rt-shell-z: initial;
+  --rt-shell-row: initial;
+  --rt-shell-col: initial;
+  --rt-shell-surface: initial;
+  --rt-shell-shadow: initial;
+  --rt-shell-cap: initial;
+  --rt-shell-offset: initial;
+  --rt-shell-handle: initial;
+  --rt-shell-start: initial;
+  --rt-shell-thin: initial;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -23767,138 +23756,74 @@
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
-  height: 100%;
-  overflow: hidden;
-  position: relative;
-  z-index: 2;
+  min-width: 0;
+  min-height: 0;
+  overflow: visible;
+  position: var(--rt-shell-position, relative);
+  z-index: var(--rt-shell-z, 1);
+  background-color: var(--rt-shell-surface);
+  -webkit-box-shadow: var(--rt-shell-shadow, none);
+          box-shadow: var(--rt-shell-shadow, none);
 }
-.rt-ShellRail[data-mode='expanded'] {
-  width: var(--rail-size, 64px);
+.rt-ShellPane:has(> .rt-ShellResizer) {
+  z-index: var(--rt-shell-z, 2);
 }
-.rt-ShellRail[data-mode='collapsed'] {
-  width: 0px;
-  -webkit-transition: width 0s var(--motion-duration-small);
-  transition: width 0s var(--motion-duration-small);
+.rt-ShellPane:focus {
+  outline: none;
 }
-.rt-ShellRailContent {
-  position: absolute;
+.rt-ShellRail {
+  grid-row: var(--rt-shell-row, rail);
+  grid-column: var(--rt-shell-col, rail);
   inset-block: 0;
   inset-inline-start: 0;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  width: 100%;
-  height: 100%;
-  gap: var(--space-2);
-  opacity: 0;
-  pointer-events: none;
-  -webkit-transform: translateX(-100%);
-          transform: translateX(-100%);
-  -webkit-transition: opacity var(--motion-duration-small) var(--motion-ease-standard), -webkit-transform var(--motion-duration-small) var(--motion-ease-standard);
-  transition: opacity var(--motion-duration-small) var(--motion-ease-standard), -webkit-transform var(--motion-duration-small) var(--motion-ease-standard);
-  transition: transform var(--motion-duration-small) var(--motion-ease-standard), opacity var(--motion-duration-small) var(--motion-ease-standard);
-  transition: transform var(--motion-duration-small) var(--motion-ease-standard), opacity var(--motion-duration-small) var(--motion-ease-standard), -webkit-transform var(--motion-duration-small) var(--motion-ease-standard);
-}
-:where([dir='rtl']) .rt-ShellRailContent {
-  -webkit-transform: translateX(100%);
-          transform: translateX(100%);
+  inline-size: var(--rail-size, 64px);
+  max-inline-size: var(--rt-shell-cap, none);
 }
-.rt-ShellRailContent[data-visible] {
-  opacity: 1;
-  pointer-events: auto;
-  -webkit-transform: translateX(0);
-          transform: translateX(0);
+.rt-ShellPanel,
+.rt-ShellSidebar {
+  --rt-shell-start: var(--rt-shell-offset, 0px);
 }
 .rt-ShellPanel {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  height: 100%;
-  overflow: visible;
-  position: relative;
-  z-index: 1;
-}
-.rt-ShellPanel[data-visible] {
-  width: var(--panel-size, 288px);
-}
-.rt-ShellPanel:not([data-visible]) {
-  width: 0px;
-  -webkit-transition: width 0s var(--motion-duration-small);
-  transition: width 0s var(--motion-duration-small);
-}
-.rt-ShellPanelContent {
-  position: absolute;
+  grid-row: var(--rt-shell-row, panel);
+  grid-column: var(--rt-shell-col, panel);
   inset-block: 0;
-  inset-inline-start: 0;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  opacity: 0;
-  pointer-events: none;
-  -webkit-transform: translateX(-100%);
-          transform: translateX(-100%);
-  -webkit-transition: opacity var(--motion-duration-small) var(--motion-ease-standard), -webkit-transform var(--motion-duration-small) var(--motion-ease-standard);
-  transition: opacity var(--motion-duration-small) var(--motion-ease-standard), -webkit-transform var(--motion-duration-small) var(--motion-ease-standard);
-  transition: transform var(--motion-duration-small) var(--motion-ease-standard), opacity var(--motion-duration-small) var(--motion-ease-standard);
-  transition: transform var(--motion-duration-small) var(--motion-ease-standard), opacity var(--motion-duration-small) var(--motion-ease-standard), -webkit-transform var(--motion-duration-small) var(--motion-ease-standard);
-}
-:where([dir='rtl']) .rt-ShellPanelContent {
-  -webkit-transform: translateX(100%);
-          transform: translateX(100%);
-}
-.rt-ShellPanelContent[data-visible] {
-  opacity: 1;
-  pointer-events: auto;
-  -webkit-transform: translateX(0);
-          transform: translateX(0);
-}
-:where([dir='rtl']) .rt-ShellPanelContent[data-visible] {
-  -webkit-transform: translateX(0);
-          transform: translateX(0);
+  inset-inline-start: var(--rt-shell-offset, 0px);
+  inline-size: var(--panel-size, var(--panel-expanded-size, 288px));
+  max-inline-size: var(--rt-shell-cap, none);
 }
 .rt-ShellSidebar {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  height: 100%;
-  overflow: visible;
-  position: relative;
-  z-index: 1;
+  grid-row: var(--rt-shell-row, sidebar);
+  grid-column: var(--rt-shell-col, sidebar);
+  inset-block: 0;
+  inset-inline-start: var(--rt-shell-offset, 0px);
+  inline-size: var(--sidebar-size, var(--sidebar-expanded-size, 288px));
+  max-inline-size: var(--rt-shell-cap, none);
 }
-.rt-ShellSidebar[data-mode='expanded'] {
-  width: var(--sidebar-size, 288px);
+.rt-ShellSidebar[data-thin] {
+  inline-size: var(--sidebar-thin-size, 64px);
+  --rt-shell-thin: none;
 }
-.rt-ShellSidebar[data-mode='thin'] {
-  width: var(--sidebar-thin-size, 64px);
+.rt-ShellInspector {
+  grid-row: var(--rt-shell-row, inspector);
+  grid-column: var(--rt-shell-col, inspector);
+  inset-block: 0;
+  inset-inline-end: 0;
+  inline-size: var(--inspector-size, var(--inspector-expanded-size, 320px));
+  max-inline-size: var(--rt-shell-cap, none);
 }
-.rt-ShellSidebar[data-mode='collapsed'] {
-  width: 0px;
-  -webkit-transition: width 0s var(--motion-duration-small);
-  transition: width 0s var(--motion-duration-small);
+.rt-ShellBottom {
+  grid-row: var(--rt-shell-row, bottom);
+  grid-column: var(--rt-shell-col, bottom);
+  inset-inline: 0;
+  inset-block-end: 0;
+  block-size: var(--bottom-size, var(--bottom-expanded-size, 200px));
+  max-block-size: var(--rt-shell-cap, none);
 }
-.rt-ShellSidebarContent {
-  position: absolute;
-  inset-block: 0;
-  inset-inline-start: 0;
+.rt-ShellRailContent,
+.rt-ShellPanelContent,
+.rt-ShellSidebarContent,
+.rt-ShellInspectorContent,
+.rt-ShellBottomContent {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -23906,305 +23831,460 @@
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  opacity: 0;
-  pointer-events: none;
-  -webkit-transform: translateX(-100%);
-          transform: translateX(-100%);
-  -webkit-transition: opacity var(--motion-duration-small) var(--motion-ease-standard), -webkit-transform var(--motion-duration-small) var(--motion-ease-standard);
-  transition: opacity var(--motion-duration-small) var(--motion-ease-standard), -webkit-transform var(--motion-duration-small) var(--motion-ease-standard);
-  transition: transform var(--motion-duration-small) var(--motion-ease-standard), opacity var(--motion-duration-small) var(--motion-ease-standard);
-  transition: transform var(--motion-duration-small) var(--motion-ease-standard), opacity var(--motion-duration-small) var(--motion-ease-standard), -webkit-transform var(--motion-duration-small) var(--motion-ease-standard);
-}
-:where([dir='rtl']) .rt-ShellSidebarContent {
-  -webkit-transform: translateX(100%);
-          transform: translateX(100%);
-}
-.rt-ShellSidebar[data-mode='thin'] .rt-ShellResizer {
-  display: none;
-}
-.rt-ShellSidebarContent[data-visible] {
-  opacity: 1;
-  pointer-events: auto;
-  -webkit-transform: translateX(0);
-          transform: translateX(0);
-}
-.rt-ShellSidebarContent[data-phase='hiding'] {
-  opacity: 0;
-  -webkit-transition: opacity var(--motion-duration-small) var(--motion-ease-standard);
-  transition: opacity var(--motion-duration-small) var(--motion-ease-standard);
-}
-.rt-ShellSidebarContent[data-phase='resizing'] {
-  opacity: 0;
-}
-.rt-ShellSidebarContent[data-phase='showing'] {
-  opacity: 1;
-  -webkit-transition: opacity var(--motion-duration-small) var(--motion-ease-standard);
-  transition: opacity var(--motion-duration-small) var(--motion-ease-standard);
-}
-.rt-ShellSidebar[data-presentation='stacked'] {
-  position: absolute;
-  inset-block: 0;
-  inset-inline-start: 0;
-  z-index: 31;
-  -webkit-transform: translateX(-100%);
-          transform: translateX(-100%);
-  will-change: transform;
-  -webkit-transition: -webkit-transform var(--motion-duration-small) var(--motion-ease-standard), -webkit-box-shadow var(--motion-duration-small) var(--motion-ease-standard);
-  transition: -webkit-transform var(--motion-duration-small) var(--motion-ease-standard), -webkit-box-shadow var(--motion-duration-small) var(--motion-ease-standard);
-  transition: transform var(--motion-duration-small) var(--motion-ease-standard), box-shadow var(--motion-duration-small) var(--motion-ease-standard);
-  transition: transform var(--motion-duration-small) var(--motion-ease-standard), box-shadow var(--motion-duration-small) var(--motion-ease-standard), -webkit-transform var(--motion-duration-small) var(--motion-ease-standard), -webkit-box-shadow var(--motion-duration-small) var(--motion-ease-standard);
-  -webkit-box-shadow: 4px 0 12px -6px rgba(0, 0, 0, 0.2);
-          box-shadow: 4px 0 12px -6px rgba(0, 0, 0, 0.2);
-}
-.rt-ShellSidebar[data-presentation='stacked'][data-open] {
-  -webkit-transform: translateX(0);
-          transform: translateX(0);
-}
-.rt-ShellSidebar[data-presentation='stacked'][data-peek] {
-  -webkit-transform: translateX(0);
-          transform: translateX(0);
-}
-.rt-ShellContent {
   -webkit-box-flex: 1;
       -ms-flex: 1;
           flex: 1;
   min-width: 0;
-  height: 100%;
-  overflow: auto;
-  -webkit-overflow-scrolling: touch;
-  padding-bottom: env(safe-area-inset-bottom, 0px);
-  -ms-scroll-chaining: none;
-      overscroll-behavior: contain;
+  min-height: 0;
+  overflow: hidden;
 }
-.rt-ShellInspector {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  height: 100%;
-  overflow: visible;
-  position: relative;
-  z-index: 1;
+.rt-ShellRailContent {
+  gap: var(--space-2);
 }
-.rt-ShellInspector[data-mode='expanded'] {
-  width: var(--inspector-size, 320px);
+.rt-ShellPane[data-state='closed'] {
+  display: none;
 }
-.rt-ShellInspector[data-mode='collapsed'] {
-  width: 0px;
-  -webkit-transition: width 0s var(--motion-duration-small);
-  transition: width 0s var(--motion-duration-small);
+.rt-ShellPane[data-presentation='overlay'],
+.rt-ShellRail[data-presentation='overlay'] ~ .rt-ShellPanel[data-presentation-follows] {
+  --rt-shell-position: absolute;
+  --rt-shell-z: 6;
+  --rt-shell-row: 1 / -1;
+  --rt-shell-col: 1 / -1;
+  --rt-shell-surface: var(--color-panel-solid);
+  --rt-shell-shadow: var(--shadow-5);
+  --rt-shell-cap: calc(100% - var(--space-8) - var(--rt-shell-start, 0px));
+  --rt-shell-offset: var(--shell-rail-offset, 0px);
+  --rt-shell-handle: none;
+}
+.rt-ShellPane[data-presentation='stacked'],
+.rt-ShellRail[data-presentation='stacked'] ~ .rt-ShellPanel[data-presentation-follows] {
+  --rt-shell-position: absolute;
+  --rt-shell-z: 3;
+  --rt-shell-row: 2 / 3;
+  --rt-shell-col: 1 / -1;
+  --rt-shell-surface: var(--color-panel-solid);
+  --rt-shell-shadow: var(--shadow-4);
+  --rt-shell-cap: initial;
+  --rt-shell-offset: var(--shell-rail-offset, 0px);
+  --rt-shell-handle: initial;
+}
+.rt-ShellPane[data-state='auto'][data-auto='closed'] {
+  display: none;
 }
-.rt-ShellInspectorContent {
-  position: absolute;
-  inset-block: 0;
-  inset-inline-end: 0;
+.rt-ShellSidebar[data-state='auto'][data-auto='thin'] {
+  inline-size: var(--sidebar-thin-size, 64px);
+  --rt-shell-thin: none;
+}
+.rt-ShellPane[data-presentation-initial='fixed'],
+.rt-ShellRail[data-presentation-initial='fixed'] ~ .rt-ShellPanel[data-presentation-follows] {
+  --rt-shell-position: initial;
+  --rt-shell-z: initial;
+  --rt-shell-row: initial;
+  --rt-shell-col: initial;
+  --rt-shell-surface: initial;
+  --rt-shell-shadow: initial;
+  --rt-shell-cap: initial;
+  --rt-shell-offset: initial;
+  --rt-shell-handle: initial;
+}
+.rt-ShellPane[data-presentation-initial='overlay'],
+.rt-ShellRail[data-presentation-initial='overlay'] ~ .rt-ShellPanel[data-presentation-follows] {
+  --rt-shell-position: absolute;
+  --rt-shell-z: 6;
+  --rt-shell-row: 1 / -1;
+  --rt-shell-col: 1 / -1;
+  --rt-shell-surface: var(--color-panel-solid);
+  --rt-shell-shadow: var(--shadow-5);
+  --rt-shell-cap: calc(100% - var(--space-8) - var(--rt-shell-start, 0px));
+  --rt-shell-offset: var(--shell-rail-offset, 0px);
+  --rt-shell-handle: none;
+}
+.rt-ShellPane[data-presentation-initial='stacked'],
+.rt-ShellRail[data-presentation-initial='stacked'] ~ .rt-ShellPanel[data-presentation-follows] {
+  --rt-shell-position: absolute;
+  --rt-shell-z: 3;
+  --rt-shell-row: 2 / 3;
+  --rt-shell-col: 1 / -1;
+  --rt-shell-surface: var(--color-panel-solid);
+  --rt-shell-shadow: var(--shadow-4);
+  --rt-shell-cap: initial;
+  --rt-shell-offset: var(--shell-rail-offset, 0px);
+  --rt-shell-handle: initial;
+}
+.rt-ShellPane[data-state='auto'][data-auto-initial='closed'] {
+  display: none;
+}
+.rt-ShellPane[data-state='auto'][data-auto-initial='open'],
+.rt-ShellPane[data-state='auto'][data-auto-initial='thin'] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  opacity: 0;
-  pointer-events: none;
-  -webkit-transform: translateX(100%);
-          transform: translateX(100%);
-  -webkit-transition: opacity var(--motion-duration-small) var(--motion-ease-standard), -webkit-transform var(--motion-duration-small) var(--motion-ease-standard);
-  transition: opacity var(--motion-duration-small) var(--motion-ease-standard), -webkit-transform var(--motion-duration-small) var(--motion-ease-standard);
-  transition: transform var(--motion-duration-small) var(--motion-ease-standard), opacity var(--motion-duration-small) var(--motion-ease-standard);
-  transition: transform var(--motion-duration-small) var(--motion-ease-standard), opacity var(--motion-duration-small) var(--motion-ease-standard), -webkit-transform var(--motion-duration-small) var(--motion-ease-standard);
 }
-:where([dir='rtl']) .rt-ShellInspectorContent {
-  -webkit-transform: translateX(-100%);
-          transform: translateX(-100%);
+.rt-ShellSidebar[data-state='auto'][data-auto-initial='open'] {
+  inline-size: var(--sidebar-size, var(--sidebar-expanded-size, 288px));
+  --rt-shell-thin: initial;
 }
-.rt-ShellInspectorContent[data-visible] {
-  opacity: 1;
-  pointer-events: auto;
-  -webkit-transform: translateX(0);
-          transform: translateX(0);
+.rt-ShellSidebar[data-state='auto'][data-auto-initial='thin'] {
+  inline-size: var(--sidebar-thin-size, 64px);
+  --rt-shell-thin: none;
 }
-.rt-ShellBottom {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  width: 100%;
-  overflow: visible;
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
-  position: relative;
+@media (min-width: 520px) {
+  .rt-ShellPane[data-presentation-xs='fixed'],
+  .rt-ShellRail[data-presentation-xs='fixed'] ~ .rt-ShellPanel[data-presentation-follows] {
+    --rt-shell-position: initial;
+    --rt-shell-z: initial;
+    --rt-shell-row: initial;
+    --rt-shell-col: initial;
+    --rt-shell-surface: initial;
+    --rt-shell-shadow: initial;
+    --rt-shell-cap: initial;
+    --rt-shell-offset: initial;
+    --rt-shell-handle: initial;
+  }
+  .rt-ShellPane[data-presentation-xs='overlay'],
+  .rt-ShellRail[data-presentation-xs='overlay'] ~ .rt-ShellPanel[data-presentation-follows] {
+    --rt-shell-position: absolute;
+    --rt-shell-z: 6;
+    --rt-shell-row: 1 / -1;
+    --rt-shell-col: 1 / -1;
+    --rt-shell-surface: var(--color-panel-solid);
+    --rt-shell-shadow: var(--shadow-5);
+    --rt-shell-cap: calc(100% - var(--space-8) - var(--rt-shell-start, 0px));
+    --rt-shell-offset: var(--shell-rail-offset, 0px);
+    --rt-shell-handle: none;
+  }
+  .rt-ShellPane[data-presentation-xs='stacked'],
+  .rt-ShellRail[data-presentation-xs='stacked'] ~ .rt-ShellPanel[data-presentation-follows] {
+    --rt-shell-position: absolute;
+    --rt-shell-z: 3;
+    --rt-shell-row: 2 / 3;
+    --rt-shell-col: 1 / -1;
+    --rt-shell-surface: var(--color-panel-solid);
+    --rt-shell-shadow: var(--shadow-4);
+    --rt-shell-cap: initial;
+    --rt-shell-offset: var(--shell-rail-offset, 0px);
+    --rt-shell-handle: initial;
+  }
+  .rt-ShellPane[data-state='auto'][data-auto-xs='closed'] {
+    display: none;
+  }
+  .rt-ShellPane[data-state='auto'][data-auto-xs='open'],
+  .rt-ShellPane[data-state='auto'][data-auto-xs='thin'] {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+  }
+  .rt-ShellSidebar[data-state='auto'][data-auto-xs='open'] {
+    inline-size: var(--sidebar-size, var(--sidebar-expanded-size, 288px));
+    --rt-shell-thin: initial;
+  }
+  .rt-ShellSidebar[data-state='auto'][data-auto-xs='thin'] {
+    inline-size: var(--sidebar-thin-size, 64px);
+    --rt-shell-thin: none;
+  }
 }
-.rt-ShellBottom[data-mode='expanded'] {
-  height: var(--bottom-size, 200px);
+@media (min-width: 768px) {
+  .rt-ShellPane[data-presentation-sm='fixed'],
+  .rt-ShellRail[data-presentation-sm='fixed'] ~ .rt-ShellPanel[data-presentation-follows] {
+    --rt-shell-position: initial;
+    --rt-shell-z: initial;
+    --rt-shell-row: initial;
+    --rt-shell-col: initial;
+    --rt-shell-surface: initial;
+    --rt-shell-shadow: initial;
+    --rt-shell-cap: initial;
+    --rt-shell-offset: initial;
+    --rt-shell-handle: initial;
+  }
+  .rt-ShellPane[data-presentation-sm='overlay'],
+  .rt-ShellRail[data-presentation-sm='overlay'] ~ .rt-ShellPanel[data-presentation-follows] {
+    --rt-shell-position: absolute;
+    --rt-shell-z: 6;
+    --rt-shell-row: 1 / -1;
+    --rt-shell-col: 1 / -1;
+    --rt-shell-surface: var(--color-panel-solid);
+    --rt-shell-shadow: var(--shadow-5);
+    --rt-shell-cap: calc(100% - var(--space-8) - var(--rt-shell-start, 0px));
+    --rt-shell-offset: var(--shell-rail-offset, 0px);
+    --rt-shell-handle: none;
+  }
+  .rt-ShellPane[data-presentation-sm='stacked'],
+  .rt-ShellRail[data-presentation-sm='stacked'] ~ .rt-ShellPanel[data-presentation-follows] {
+    --rt-shell-position: absolute;
+    --rt-shell-z: 3;
+    --rt-shell-row: 2 / 3;
+    --rt-shell-col: 1 / -1;
+    --rt-shell-surface: var(--color-panel-solid);
+    --rt-shell-shadow: var(--shadow-4);
+    --rt-shell-cap: initial;
+    --rt-shell-offset: var(--shell-rail-offset, 0px);
+    --rt-shell-handle: initial;
+  }
+  .rt-ShellPane[data-state='auto'][data-auto-sm='closed'] {
+    display: none;
+  }
+  .rt-ShellPane[data-state='auto'][data-auto-sm='open'],
+  .rt-ShellPane[data-state='auto'][data-auto-sm='thin'] {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+  }
+  .rt-ShellSidebar[data-state='auto'][data-auto-sm='open'] {
+    inline-size: var(--sidebar-size, var(--sidebar-expanded-size, 288px));
+    --rt-shell-thin: initial;
+  }
+  .rt-ShellSidebar[data-state='auto'][data-auto-sm='thin'] {
+    inline-size: var(--sidebar-thin-size, 64px);
+    --rt-shell-thin: none;
+  }
 }
-.rt-ShellBottom[data-mode='collapsed'] {
-  height: 0px;
-  -webkit-transition: height 0s var(--motion-duration-small);
-  transition: height 0s var(--motion-duration-small);
+@media (min-width: 1024px) {
+  .rt-ShellPane[data-presentation-md='fixed'],
+  .rt-ShellRail[data-presentation-md='fixed'] ~ .rt-ShellPanel[data-presentation-follows] {
+    --rt-shell-position: initial;
+    --rt-shell-z: initial;
+    --rt-shell-row: initial;
+    --rt-shell-col: initial;
+    --rt-shell-surface: initial;
+    --rt-shell-shadow: initial;
+    --rt-shell-cap: initial;
+    --rt-shell-offset: initial;
+    --rt-shell-handle: initial;
+  }
+  .rt-ShellPane[data-presentation-md='overlay'],
+  .rt-ShellRail[data-presentation-md='overlay'] ~ .rt-ShellPanel[data-presentation-follows] {
+    --rt-shell-position: absolute;
+    --rt-shell-z: 6;
+    --rt-shell-row: 1 / -1;
+    --rt-shell-col: 1 / -1;
+    --rt-shell-surface: var(--color-panel-solid);
+    --rt-shell-shadow: var(--shadow-5);
+    --rt-shell-cap: calc(100% - var(--space-8) - var(--rt-shell-start, 0px));
+    --rt-shell-offset: var(--shell-rail-offset, 0px);
+    --rt-shell-handle: none;
+  }
+  .rt-ShellPane[data-presentation-md='stacked'],
+  .rt-ShellRail[data-presentation-md='stacked'] ~ .rt-ShellPanel[data-presentation-follows] {
+    --rt-shell-position: absolute;
+    --rt-shell-z: 3;
+    --rt-shell-row: 2 / 3;
+    --rt-shell-col: 1 / -1;
+    --rt-shell-surface: var(--color-panel-solid);
+    --rt-shell-shadow: var(--shadow-4);
+    --rt-shell-cap: initial;
+    --rt-shell-offset: var(--shell-rail-offset, 0px);
+    --rt-shell-handle: initial;
+  }
+  .rt-ShellPane[data-state='auto'][data-auto-md='closed'] {
+    display: none;
+  }
+  .rt-ShellPane[data-state='auto'][data-auto-md='open'],
+  .rt-ShellPane[data-state='auto'][data-auto-md='thin'] {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+  }
+  .rt-ShellSidebar[data-state='auto'][data-auto-md='open'] {
+    inline-size: var(--sidebar-size, var(--sidebar-expanded-size, 288px));
+    --rt-shell-thin: initial;
+  }
+  .rt-ShellSidebar[data-state='auto'][data-auto-md='thin'] {
+    inline-size: var(--sidebar-thin-size, 64px);
+    --rt-shell-thin: none;
+  }
 }
-.rt-ShellBottomContent {
-  position: absolute;
-  inset-inline: 0;
-  inset-block-end: 0;
+@media (min-width: 1280px) {
+  .rt-ShellPane[data-presentation-lg='fixed'],
+  .rt-ShellRail[data-presentation-lg='fixed'] ~ .rt-ShellPanel[data-presentation-follows] {
+    --rt-shell-position: initial;
+    --rt-shell-z: initial;
+    --rt-shell-row: initial;
+    --rt-shell-col: initial;
+    --rt-shell-surface: initial;
+    --rt-shell-shadow: initial;
+    --rt-shell-cap: initial;
+    --rt-shell-offset: initial;
+    --rt-shell-handle: initial;
+  }
+  .rt-ShellPane[data-presentation-lg='overlay'],
+  .rt-ShellRail[data-presentation-lg='overlay'] ~ .rt-ShellPanel[data-presentation-follows] {
+    --rt-shell-position: absolute;
+    --rt-shell-z: 6;
+    --rt-shell-row: 1 / -1;
+    --rt-shell-col: 1 / -1;
+    --rt-shell-surface: var(--color-panel-solid);
+    --rt-shell-shadow: var(--shadow-5);
+    --rt-shell-cap: calc(100% - var(--space-8) - var(--rt-shell-start, 0px));
+    --rt-shell-offset: var(--shell-rail-offset, 0px);
+    --rt-shell-handle: none;
+  }
+  .rt-ShellPane[data-presentation-lg='stacked'],
+  .rt-ShellRail[data-presentation-lg='stacked'] ~ .rt-ShellPanel[data-presentation-follows] {
+    --rt-shell-position: absolute;
+    --rt-shell-z: 3;
+    --rt-shell-row: 2 / 3;
+    --rt-shell-col: 1 / -1;
+    --rt-shell-surface: var(--color-panel-solid);
+    --rt-shell-shadow: var(--shadow-4);
+    --rt-shell-cap: initial;
+    --rt-shell-offset: var(--shell-rail-offset, 0px);
+    --rt-shell-handle: initial;
+  }
+  .rt-ShellPane[data-state='auto'][data-auto-lg='closed'] {
+    display: none;
+  }
+  .rt-ShellPane[data-state='auto'][data-auto-lg='open'],
+  .rt-ShellPane[data-state='auto'][data-auto-lg='thin'] {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+  }
+  .rt-ShellSidebar[data-state='auto'][data-auto-lg='open'] {
+    inline-size: var(--sidebar-size, var(--sidebar-expanded-size, 288px));
+    --rt-shell-thin: initial;
+  }
+  .rt-ShellSidebar[data-state='auto'][data-auto-lg='thin'] {
+    inline-size: var(--sidebar-thin-size, 64px);
+    --rt-shell-thin: none;
+  }
+}
+@media (min-width: 1640px) {
+  .rt-ShellPane[data-presentation-xl='fixed'],
+  .rt-ShellRail[data-presentation-xl='fixed'] ~ .rt-ShellPanel[data-presentation-follows] {
+    --rt-shell-position: initial;
+    --rt-shell-z: initial;
+    --rt-shell-row: initial;
+    --rt-shell-col: initial;
+    --rt-shell-surface: initial;
+    --rt-shell-shadow: initial;
+    --rt-shell-cap: initial;
+    --rt-shell-offset: initial;
+    --rt-shell-handle: initial;
+  }
+  .rt-ShellPane[data-presentation-xl='overlay'],
+  .rt-ShellRail[data-presentation-xl='overlay'] ~ .rt-ShellPanel[data-presentation-follows] {
+    --rt-shell-position: absolute;
+    --rt-shell-z: 6;
+    --rt-shell-row: 1 / -1;
+    --rt-shell-col: 1 / -1;
+    --rt-shell-surface: var(--color-panel-solid);
+    --rt-shell-shadow: var(--shadow-5);
+    --rt-shell-cap: calc(100% - var(--space-8) - var(--rt-shell-start, 0px));
+    --rt-shell-offset: var(--shell-rail-offset, 0px);
+    --rt-shell-handle: none;
+  }
+  .rt-ShellPane[data-presentation-xl='stacked'],
+  .rt-ShellRail[data-presentation-xl='stacked'] ~ .rt-ShellPanel[data-presentation-follows] {
+    --rt-shell-position: absolute;
+    --rt-shell-z: 3;
+    --rt-shell-row: 2 / 3;
+    --rt-shell-col: 1 / -1;
+    --rt-shell-surface: var(--color-panel-solid);
+    --rt-shell-shadow: var(--shadow-4);
+    --rt-shell-cap: initial;
+    --rt-shell-offset: var(--shell-rail-offset, 0px);
+    --rt-shell-handle: initial;
+  }
+  .rt-ShellPane[data-state='auto'][data-auto-xl='closed'] {
+    display: none;
+  }
+  .rt-ShellPane[data-state='auto'][data-auto-xl='open'],
+  .rt-ShellPane[data-state='auto'][data-auto-xl='thin'] {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+  }
+  .rt-ShellSidebar[data-state='auto'][data-auto-xl='open'] {
+    inline-size: var(--sidebar-size, var(--sidebar-expanded-size, 288px));
+    --rt-shell-thin: initial;
+  }
+  .rt-ShellSidebar[data-state='auto'][data-auto-xl='thin'] {
+    inline-size: var(--sidebar-thin-size, 64px);
+    --rt-shell-thin: none;
+  }
+}
+.rt-ShellPane[data-peek][data-state],
+.rt-ShellRail ~ .rt-ShellPanel[data-presentation-follows][data-peek][data-state] {
+  --rt-shell-position: absolute;
+  --rt-shell-z: 4;
+  --rt-shell-row: 2 / 3;
+  --rt-shell-col: 1 / -1;
+  --rt-shell-surface: var(--color-panel-solid);
+  --rt-shell-shadow: var(--shadow-4);
+  --rt-shell-offset: var(--shell-rail-offset, 0px);
+  --rt-shell-handle: none;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  opacity: 0;
-  pointer-events: none;
-  -webkit-transform: translateY(100%);
-          transform: translateY(100%);
-  -webkit-transition: opacity var(--motion-duration-small) var(--motion-ease-standard), -webkit-transform var(--motion-duration-small) var(--motion-ease-standard);
-  transition: opacity var(--motion-duration-small) var(--motion-ease-standard), -webkit-transform var(--motion-duration-small) var(--motion-ease-standard);
-  transition: transform var(--motion-duration-small) var(--motion-ease-standard), opacity var(--motion-duration-small) var(--motion-ease-standard);
-  transition: transform var(--motion-duration-small) var(--motion-ease-standard), opacity var(--motion-duration-small) var(--motion-ease-standard), -webkit-transform var(--motion-duration-small) var(--motion-ease-standard);
 }
-.rt-ShellBottomContent[data-visible] {
-  opacity: 1;
-  pointer-events: auto;
-  -webkit-transform: translateY(0);
-          transform: translateY(0);
-}
-.rt-ShellPanel[data-resizing],
-.rt-ShellSidebar[data-resizing],
-.rt-ShellInspector[data-resizing],
-.rt-ShellBottom[data-resizing] {
-  -webkit-transition: none !important;
-  transition: none !important;
-}
-.rt-ShellPanel:not([data-visible]) .rt-ShellResizer,
-.rt-ShellPanel[data-peek] .rt-ShellResizer {
-  display: none;
+.rt-ShellSidebar[data-peek][data-state] {
+  inline-size: var(--peek-sidebar-width, var(--sidebar-size, var(--sidebar-expanded-size, 288px)));
 }
-.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 {
+.rt-ShellScrim {
   display: none;
+  position: absolute;
+  inset: 0;
+  z-index: 5;
+  background-color: var(--color-overlay);
 }
-.rt-ShellBottom[data-mode='collapsed'] .rt-ShellBottomContent {
-  opacity: 0;
-  height: 0;
-  visibility: hidden;
-  -webkit-transition: opacity var(--motion-duration-small) var(--motion-ease-standard);
-  transition: opacity var(--motion-duration-small) var(--motion-ease-standard);
-}
-[data-presentation='overlay'] {
-  contain: style;
+.rt-ShellRoot[data-overlay-live] > .rt-ShellScrim {
+  display: block;
 }
-.rt-ShellLeft[data-presentation='stacked'] {
-  position: absolute;
-  inset-block: 0;
-  inset-inline-start: 0;
-  z-index: 30;
-  -webkit-transform: translateX(-100%);
-          transform: translateX(-100%);
-  will-change: transform;
-  -webkit-transition: -webkit-transform var(--motion-duration-small) var(--motion-ease-standard), -webkit-box-shadow var(--motion-duration-small) var(--motion-ease-standard);
-  transition: -webkit-transform var(--motion-duration-small) var(--motion-ease-standard), -webkit-box-shadow var(--motion-duration-small) var(--motion-ease-standard);
-  transition: transform var(--motion-duration-small) var(--motion-ease-standard), box-shadow var(--motion-duration-small) var(--motion-ease-standard);
-  transition: transform var(--motion-duration-small) var(--motion-ease-standard), box-shadow var(--motion-duration-small) var(--motion-ease-standard), -webkit-transform var(--motion-duration-small) var(--motion-ease-standard), -webkit-box-shadow var(--motion-duration-small) var(--motion-ease-standard);
-  -webkit-box-shadow: 4px 0 12px -6px rgba(0, 0, 0, 0.2);
-          box-shadow: 4px 0 12px -6px rgba(0, 0, 0, 0.2);
-}
-.rt-ShellLeft[data-presentation='stacked'][data-open] {
-  -webkit-transform: translateX(0);
-          transform: translateX(0);
-}
-.rt-ShellLeft[data-presentation='stacked'][data-peek] {
-  -webkit-transform: translateX(0);
-          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);
-  -webkit-transform: translateX(100%);
-          transform: translateX(100%);
-  -webkit-transition: -webkit-transform var(--motion-duration-small) var(--motion-ease-standard), -webkit-box-shadow var(--motion-duration-small) var(--motion-ease-standard);
-  transition: -webkit-transform var(--motion-duration-small) var(--motion-ease-standard), -webkit-box-shadow var(--motion-duration-small) var(--motion-ease-standard);
-  transition: transform var(--motion-duration-small) var(--motion-ease-standard), box-shadow var(--motion-duration-small) var(--motion-ease-standard);
-  transition: transform var(--motion-duration-small) var(--motion-ease-standard), box-shadow var(--motion-duration-small) var(--motion-ease-standard), -webkit-transform var(--motion-duration-small) var(--motion-ease-standard), -webkit-box-shadow var(--motion-duration-small) var(--motion-ease-standard);
-  -webkit-box-shadow: -4px 0 12px -6px rgba(0, 0, 0, 0.2);
-          box-shadow: -4px 0 12px -6px rgba(0, 0, 0, 0.2);
-}
-.rt-ShellInspector[data-presentation='stacked'][data-open] {
-  -webkit-transform: translateX(0);
-          transform: translateX(0);
-}
-.rt-ShellInspector[data-presentation='stacked'][data-peek] {
-  -webkit-transform: translateX(0);
-          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);
-  -webkit-transform: translateY(100%);
-          transform: translateY(100%);
-  -webkit-transition: -webkit-transform var(--motion-duration-small) var(--motion-ease-standard), -webkit-box-shadow var(--motion-duration-small) var(--motion-ease-standard);
-  transition: -webkit-transform var(--motion-duration-small) var(--motion-ease-standard), -webkit-box-shadow var(--motion-duration-small) var(--motion-ease-standard);
-  transition: transform var(--motion-duration-small) var(--motion-ease-standard), box-shadow var(--motion-duration-small) var(--motion-ease-standard);
-  transition: transform var(--motion-duration-small) var(--motion-ease-standard), box-shadow var(--motion-duration-small) var(--motion-ease-standard), -webkit-transform var(--motion-duration-small) var(--motion-ease-standard), -webkit-box-shadow var(--motion-duration-small) var(--motion-ease-standard);
-  -webkit-box-shadow: 0 -4px 12px -6px rgba(0, 0, 0, 0.2);
-          box-shadow: 0 -4px 12px -6px rgba(0, 0, 0, 0.2);
+.rt-ShellRoot[data-height='auto'] > .rt-ShellScrim,
+.rt-ShellRoot[data-height='auto'] > .rt-ShellPane[data-presentation='overlay'] {
+  position: fixed;
 }
-.rt-ShellBottom[data-presentation='stacked'][data-open] {
-  -webkit-transform: translateY(0);
-          transform: translateY(0);
+.rt-ShellRoot:has(> [data-inset])::before,
+.rt-ShellRoot[data-has-inset]::before {
+  content: '';
+  grid-row: 2;
+  grid-column: 1 / -1;
+  background: var(--gray-2);
 }
-.rt-ShellBottom[data-presentation='stacked'][data-peek] {
-  -webkit-transform: translateY(0);
-          transform: translateY(0);
+.rt-ShellPane[data-inset],
+.rt-ShellContent[data-inset] {
+  margin: var(--shell-inset-gap);
+  border-radius: var(--radius-surface-3);
+  background: var(--color-background);
+  -webkit-box-shadow: var(--shadow-2);
+          box-shadow: var(--shadow-2);
 }
-@media (prefers-reduced-motion: reduce) {
-  .rt-ShellRail,
-  .rt-ShellPanel,
-  .rt-ShellSidebar,
-  .rt-ShellInspector,
-  .rt-ShellBottom,
-  .rt-ShellRailContent,
-  .rt-ShellPanelContent,
-  .rt-ShellSidebarContent,
-  .rt-ShellInspectorContent,
-  .rt-ShellBottomContent {
-    -webkit-transition: none;
-    transition: none;
-  }
+.rt-ShellRoot:has(> .rt-ShellRail[data-inset][data-presentation='fixed'][data-mode]:not([data-mode='collapsed'])) > .rt-ShellPanel[data-inset][data-presentation='fixed'],
+.rt-ShellRoot:has(> .rt-ShellPanel[data-inset][data-presentation='fixed'][data-mode]:not([data-mode='collapsed'])) > .rt-ShellSidebar[data-inset][data-presentation='fixed'],
+.rt-ShellRoot:has(> .rt-ShellRail[data-inset][data-presentation='fixed'][data-mode]:not([data-mode='collapsed'])):not(
+    :has(> .rt-ShellPanel[data-presentation='fixed'][data-mode]:not([data-mode='collapsed']))
+  )
+  > .rt-ShellSidebar[data-inset][data-presentation='fixed'],
+.rt-ShellRoot:has(> .rt-ShellSidebar[data-inset][data-presentation='fixed'][data-mode]:not([data-mode='collapsed'])) > .rt-ShellContent[data-inset],
+.rt-ShellRoot:has(> .rt-ShellPanel[data-inset][data-presentation='fixed'][data-mode]:not([data-mode='collapsed'])):not(
+    :has(> .rt-ShellSidebar[data-presentation='fixed'][data-mode]:not([data-mode='collapsed']))
+  )
+  > .rt-ShellContent[data-inset],
+.rt-ShellRoot:has(> .rt-ShellRail[data-inset][data-presentation='fixed'][data-mode]:not([data-mode='collapsed'])):not(
+    :has(> .rt-ShellPanel[data-presentation='fixed'][data-mode]:not([data-mode='collapsed']), > .rt-ShellSidebar[data-presentation='fixed'][data-mode]:not([data-mode='collapsed']))
+  )
+  > .rt-ShellContent[data-inset],
+.rt-ShellRoot:has(> .rt-ShellContent[data-inset]) > .rt-ShellInspector[data-inset][data-presentation='fixed'] {
+  -webkit-margin-start: 0;
+          margin-inline-start: 0;
+}
+.rt-ShellRoot:has(
+    > .rt-ShellRail[data-inset][data-presentation='fixed'][data-mode]:not([data-mode='collapsed']),
+    > .rt-ShellPanel[data-inset][data-presentation='fixed'][data-mode]:not([data-mode='collapsed']),
+    > .rt-ShellSidebar[data-inset][data-presentation='fixed'][data-mode]:not([data-mode='collapsed']),
+    > .rt-ShellContent[data-inset],
+    > .rt-ShellInspector[data-inset][data-presentation='fixed'][data-mode]:not([data-mode='collapsed'])
+  )
+  > .rt-ShellBottom[data-inset] {
+  -webkit-margin-before: 0;
+          margin-block-start: 0;
 }
 .rt-ShellResizer {
   position: absolute;
   z-index: 1;
   background: transparent;
   --resizer-hit: var(--space-3);
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
+  display: var(--rt-shell-thin, var(--rt-shell-handle, flex));
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
@@ -24212,6 +24292,8 @@
       -ms-flex-pack: center;
           justify-content: center;
   overflow: visible;
+  -ms-touch-action: none;
+      touch-action: none;
 }
 .rt-ShellResizer[data-orientation='vertical'][data-edge='end'] {
   inset-block: 0;
@@ -24222,6 +24304,10 @@
   -webkit-transform: translateX(50%);
           transform: translateX(50%);
 }
+.rt-ShellResizer[data-orientation='vertical'][data-edge='end']:dir(rtl) {
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+}
 .rt-ShellResizer[data-orientation='vertical'][data-edge='start'] {
   inset-block: 0;
   inset-inline-start: 0;
@@ -24231,6 +24317,10 @@
   -webkit-transform: translateX(-50%);
           transform: translateX(-50%);
 }
+.rt-ShellResizer[data-orientation='vertical'][data-edge='start']:dir(rtl) {
+  -webkit-transform: translateX(50%);
+          transform: translateX(50%);
+}
 .rt-ShellResizer[data-orientation='horizontal'][data-edge='start'] {
   inset-inline: 0;
   inset-block-start: 0;
@@ -24245,79 +24335,34 @@
     --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] {
+.rt-ShellResizer::before {
+  content: '';
   position: absolute;
-  z-index: 40;
-}
-.rt-ShellRail[data-peek],
-.rt-ShellPanel[data-peek],
-.rt-ShellSidebar[data-peek] {
-  -webkit-box-shadow: 4px 0 8px -4px rgba(0, 0, 0, 0.15);
-          box-shadow: 4px 0 8px -4px rgba(0, 0, 0, 0.15);
+  background-color: transparent;
+  pointer-events: none;
 }
-.rt-ShellInspector[data-peek] {
-  -webkit-box-shadow: -4px 0 8px -4px rgba(0, 0, 0, 0.15);
-          box-shadow: -4px 0 8px -4px rgba(0, 0, 0, 0.15);
+.rt-ShellResizer[data-orientation='vertical']::before {
   inset-block: 0;
-  inset-inline-end: 0;
-  width: var(--inspector-size, 320px);
+  inset-inline-start: calc(50% - 1px);
+  inline-size: 2px;
 }
-.rt-ShellBottom[data-peek] {
-  -webkit-box-shadow: 0 -4px 8px -4px rgba(0, 0, 0, 0.15);
-          box-shadow: 0 -4px 8px -4px rgba(0, 0, 0, 0.15);
+.rt-ShellResizer[data-orientation='horizontal']::before {
   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;
-  -webkit-transition-delay: var(--motion-duration-small);
-          transition-delay: var(--motion-duration-small);
-}
-.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));
+  inset-block-start: calc(50% - 1px);
+  block-size: 2px;
 }
-.rt-ShellInspector[data-peek][data-mode='collapsed'] {
-  width: var(--inspector-size, 320px);
+.rt-ShellResizer:hover::before,
+.rt-ShellResizer[data-dragging]::before {
+  background-color: var(--gray-a6);
 }
-.rt-ShellBottom[data-peek][data-mode='collapsed'] {
-  height: var(--bottom-size, 200px);
+.rt-ShellResizer:focus-visible {
+  outline: none;
 }
-.rt-ShellBody[data-has-inset] {
-  background: var(--gray-2);
+.rt-ShellResizer:focus-visible::before {
+  background-color: var(--focus-8);
 }
-.rt-ShellLeft[data-inset],
-.rt-ShellSidebar[data-inset],
-.rt-ShellContent[data-inset],
-.rt-ShellInspector[data-inset],
-.rt-ShellBottom[data-inset] {
-  --shell-inset-gap: var(--space-2);
-  margin: var(--shell-inset-gap);
-  border-radius: var(--radius-surface-3);
-  background: var(--color-background);
-  -webkit-box-shadow: var(--shadow-2);
-          box-shadow: var(--shadow-2);
-  height: auto;
+.rt-ShellSidebar[data-thin] .rt-ShellResizer {
+  display: none;
 }
 .rt-SliderRoot {
   --slider-thumb-width: var(--space-3);