@kushagradhawan/kookie-ui 0.7.0 → 0.8.1

package/components.css

@@ -16772,7 +16772,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;
@@ -18574,75 +18574,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;
@@ -18650,138 +18639,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;
@@ -18789,305 +18714,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;
+    }
+}
+@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='expanded'] {
-    height: var(--bottom-size, 200px);
+@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-ShellBottom[data-mode='collapsed'] {
-    height: 0px;
-    -webkit-transition: height 0s var(--motion-duration-small);
-    transition: height 0s var(--motion-duration-small);
+@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;
+    }
 }
-.rt-ShellBottomContent {
-    position: absolute;
-    inset-inline: 0;
-    inset-block-end: 0;
+@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;
@@ -19095,6 +19175,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;
@@ -19105,6 +19187,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;
@@ -19114,6 +19200,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;
@@ -19128,79 +19218,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);