@sigmela/router 0.2.7 → 0.3.0

package/lib/module/styles.css

@@ -3,6 +3,7 @@
   width: 100%;
   display: flex;
   position: relative;
+  height: 100vh;
   height: 100dvh;
   overflow: hidden;
 }
@@ -18,11 +19,14 @@
   /* Base transition for opening screen */
   transition:
     transform var(--stack-transition-time, 300ms)
-      cubic-bezier(0.22, 0.61, 0.36, 1),
-    filter var(--stack-transition-time, 300ms)
       cubic-bezier(0.22, 0.61, 0.36, 1);
 }
 
+/* will-change hint for animating stacks */
+.screen-stack[data-animation="true"] > .screen-stack-item {
+  will-change: transform;
+}
+
 /* Inner container for regular screen */
 .stack-screen-container {
   display: flex;
@@ -72,38 +76,24 @@
 
 /* Overlay on enter — fade in via transition */
 .screen-stack-item.modal.transition-entering > .stack-modal-overlay,
-.screen-stack-item.modal.phase-active.transition-preEnter > .stack-modal-overlay,
 .screen-stack-item.modal-right.transition-entering > .stack-modal-overlay,
-.screen-stack-item.modal-right.phase-active.transition-preEnter > .stack-modal-overlay,
 .screen-stack-item.contained-modal.transition-entering > .stack-modal-overlay,
-.screen-stack-item.contained-modal.phase-active.transition-preEnter > .stack-modal-overlay,
 .screen-stack-item.fullscreen-modal.transition-entering > .stack-modal-overlay,
-.screen-stack-item.fullscreen-modal.phase-active.transition-preEnter > .stack-modal-overlay,
 .screen-stack-item.formsheet.transition-entering > .stack-modal-overlay,
-.screen-stack-item.formsheet.phase-active.transition-preEnter > .stack-modal-overlay,
 .screen-stack-item.pagesheet.transition-entering > .stack-modal-overlay,
-.screen-stack-item.pagesheet.phase-active.transition-preEnter > .stack-modal-overlay,
-.screen-stack-item.sheet.transition-entering > .stack-modal-overlay,
-.screen-stack-item.sheet.phase-active.transition-preEnter > .stack-modal-overlay {
+.screen-stack-item.sheet.transition-entering > .stack-modal-overlay {
   background: rgba(0, 0, 0, 0.5);
   pointer-events: none;
   opacity: 0.5;
 }
 
 /* For modal-like in active / entered states — fully visible */
-.screen-stack-item.modal.phase-active > .stack-modal-overlay,
 .screen-stack-item.modal.transition-entered > .stack-modal-overlay,
-.screen-stack-item.modal-right.phase-active > .stack-modal-overlay,
 .screen-stack-item.modal-right.transition-entered > .stack-modal-overlay,
-.screen-stack-item.contained-modal.phase-active > .stack-modal-overlay,
 .screen-stack-item.contained-modal.transition-entered > .stack-modal-overlay,
-.screen-stack-item.fullscreen-modal.phase-active > .stack-modal-overlay,
 .screen-stack-item.fullscreen-modal.transition-entered > .stack-modal-overlay,
-.screen-stack-item.formsheet.phase-active > .stack-modal-overlay,
 .screen-stack-item.formsheet.transition-entered > .stack-modal-overlay,
-.screen-stack-item.pagesheet.phase-active > .stack-modal-overlay,
 .screen-stack-item.pagesheet.transition-entered > .stack-modal-overlay,
-.screen-stack-item.sheet.phase-active > .stack-modal-overlay,
 .screen-stack-item.sheet.transition-entered > .stack-modal-overlay {
   opacity: 0.5;
   background: rgba(0, 0, 0, 0.5);
@@ -166,7 +156,6 @@
 /* Overridden via animation classes (push-enter, pop-enter, etc.) */
 .screen-stack > .screen-stack-item.phase-active.transition-entered:not(.push-enter):not(.pop-enter):not(.modal):not(.sheet) {
   transform: translateX(0);
-  filter: none;
 }
 
 /* Background (inactive) — visible, but without interactions */
@@ -203,11 +192,10 @@
 
 /* ==================== PUSH ANIMATIONS ==================== */
 
-/* Forward navigation (push) — opening screen 300ms */
+/* Forward navigation (push) — opening screen */
 .screen-stack-item.push.push-enter {
   transition:
-    transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1),
-    filter 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
+    transform var(--stack-transition-time, 300ms) cubic-bezier(0.22, 0.61, 0.36, 1);
 }
 
 /* PUSH ENTER - regular screen enters from right */
@@ -230,8 +218,7 @@
 .screen-stack-item.pagesheet.push-background {
   transform: translateX(-25%) !important;
   transition:
-    transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1),
-    filter 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
+    transform var(--stack-transition-time, 300ms) cubic-bezier(0.22, 0.61, 0.36, 1);
 }
 
 /* POP BACKGROUND - background screen on pop stays at -25% */
@@ -244,15 +231,13 @@
 .screen-stack-item.pagesheet.pop-background {
   transform: translateX(-25%) !important;
   /* Don't set transition, so element stays in place without animation */
-  filter: none;
 }
 
-/* Backward navigation (pop) — closing screen 300ms */
+/* Backward navigation (pop) — closing screen */
 /* IMPORTANT: transition is set on element with pop-exit */
 .screen-stack-item.push.pop-exit {
   transition:
-    transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1),
-    filter 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
+    transform var(--stack-transition-time, 300ms) cubic-bezier(0.22, 0.61, 0.36, 1);
 }
 
 /* POP EXIT - top screen exits to right */
@@ -261,7 +246,6 @@
 .screen-stack-item.push.pop-exit.phase-exiting,
 .screen-stack-item.push.pop-exit.transition-exiting {
   transform: translateX(100%);
-  filter: none;
 }
 
 /* POP ENTER - screen returns to center from -25% */
@@ -270,28 +254,25 @@
 /* Simplified approach as in old version: phase-active simply becomes 0 */
 .screen-stack-item.push.pop-enter {
   transition:
-    transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1),
-    filter 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
+    transform var(--stack-transition-time, 300ms) cubic-bezier(0.22, 0.61, 0.36, 1);
 }
 
 /* Active element on pop simply in center (0) - final state */
-/* As in old version: .phase-active on pop → transform: translateX(0) */
+/* As in old version: .phase-active on pop -> transform: translateX(0) */
 .screen-stack-item.push.pop-enter.phase-active,
 .screen-stack-item.push.pop-enter.phase-active.transition-entered {
   transform: translateX(0);
-  filter: none;
 }
 
 /* ==================== MODAL STACK: don't move background ==================== */
 
 /* If there's a modal on top — don't move previous screen and don't dim it,
    overlay is responsible for dimming. */
-.screen-stack:has(> .screen-stack-item.modal.phase-active)
+.screen-stack[data-has-active-modal="true"]
   > .screen-stack-item.push.phase-inactive,
-.screen-stack:has(> .screen-stack-item.modal.phase-active)
+.screen-stack[data-has-active-modal="true"]
   > .screen-stack-item.push.phase-inactive.transition-entered {
   transform: translate3d(0, 0, 0) !important;
-  filter: none;
 }
 
 /* ==================== MOBILE MODAL (<= 639px) — bottom sheet ==================== */
@@ -306,19 +287,17 @@
     border-top-right-radius: 38px;
     align-self: flex-end; /* align to bottom edge of parent */
     overflow: hidden;
-    background: #fff; /* or var(--modal-bg) */
+    background: var(--modal-bg, #fff);
 
     transform: translateY(0);
     transition:
-      transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1),
-      filter 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
+      transform var(--stack-transition-time, 300ms) cubic-bezier(0.22, 0.61, 0.36, 1);
   }
 
   /* MODAL ENTER - modal enters (bottom to top) */
   .screen-stack-item.modal.modal-enter.transition-preEnter .stack-modal-container,
   .screen-stack-item.modal-right.modal-right-enter.transition-preEnter .stack-modal-container {
     transform: translateY(100%);
-    filter: none;
   }
 
   .screen-stack-item.modal.modal-enter.transition-entering .stack-modal-container,
@@ -326,17 +305,14 @@
   .screen-stack-item.modal-right.modal-right-enter.transition-entering .stack-modal-container,
   .screen-stack-item.modal-right.modal-right-enter.transition-entered .stack-modal-container {
     transform: translateY(0);
-    filter: none;
   }
 
   /* MODAL EXIT - modal closes (exits downward) */
   .screen-stack-item.modal.modal-exit.transition-exiting .stack-modal-container,
   .screen-stack-item.modal-right.modal-right-exit.transition-exiting .stack-modal-container {
     transform: translateY(100%);
-    filter: none;
     transition:
-      transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1),
-      filter 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
+      transform var(--stack-transition-time, 300ms) cubic-bezier(0.22, 0.61, 0.36, 1);
   }
 
   /* SHEET - sheet styles for mobile version */
@@ -348,33 +324,28 @@
     border-top-right-radius: 38px;
     align-self: flex-end;
     overflow: hidden;
-    background: #fff;
+    background: var(--modal-bg, #fff);
 
     transform: translateY(0);
     transition:
-      transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1),
-      filter 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
+      transform var(--stack-transition-time, 300ms) cubic-bezier(0.22, 0.61, 0.36, 1);
   }
 
   /* SHEET ENTER - sheet enters (bottom to top) */
   .screen-stack-item.sheet.sheet-enter.transition-preEnter .stack-modal-container {
     transform: translateY(100%);
-    filter: none;
   }
 
   .screen-stack-item.sheet.sheet-enter.transition-entering .stack-modal-container,
   .screen-stack-item.sheet.sheet-enter.transition-entered .stack-modal-container {
     transform: translateY(0);
-    filter: none;
   }
 
   /* SHEET EXIT - sheet closes */
   .screen-stack-item.sheet.sheet-exit.transition-exiting .stack-modal-container {
     transform: translateY(100%);
-    filter: none;
     transition:
-      transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1),
-      filter 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
+      transform var(--stack-transition-time, 300ms) cubic-bezier(0.22, 0.61, 0.36, 1);
   }
 }
 
@@ -389,12 +360,11 @@
     margin: auto; /* center in parent */
     border-radius: 38px;
     overflow: hidden;
-    background: #fff;
+    background: var(--modal-bg, #fff);
 
     transform: translateY(0);
     transition:
-      transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1),
-      filter 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
+      transform var(--stack-transition-time, 300ms) cubic-bezier(0.22, 0.61, 0.36, 1);
   }
 
   /* Center the modal container using flexbox on parent */
@@ -407,22 +377,18 @@
   /* MODAL ENTER - modal enters (bottom to center) */
   .screen-stack-item.modal.modal-enter.transition-preEnter .stack-modal-container {
     transform: translateY(100vh);
-    filter: none;
   }
 
   .screen-stack-item.modal.modal-enter.transition-entering .stack-modal-container,
   .screen-stack-item.modal.modal-enter.transition-entered .stack-modal-container {
     transform: translateY(0);
-    filter: none;
   }
 
   /* MODAL EXIT - modal closes (exits downward) */
   .screen-stack-item.modal.modal-exit.transition-exiting .stack-modal-container {
     transform: translateY(100vh);
-    filter: none;
     transition:
-      transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1),
-      filter 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
+      transform var(--stack-transition-time, 300ms) cubic-bezier(0.22, 0.61, 0.36, 1);
   }
 
   /* ==================== MODAL-RIGHT — slide from right (previous modal behavior) ==================== */
@@ -436,40 +402,34 @@
     margin-left: auto; /* align to right edge */
     border-radius: 16px;
     overflow: hidden;
-    background: #fff;
+    background: var(--modal-bg, #fff);
 
     transform: translateX(0);
     transition:
-      transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1),
-      filter 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
+      transform var(--stack-transition-time, 300ms) cubic-bezier(0.22, 0.61, 0.36, 1);
   }
 
   /* MODAL-RIGHT ENTER - modal enters (right to left) */
   .screen-stack-item.modal-right.modal-right-enter.transition-preEnter .stack-modal-container {
     transform: translateX(100%);
-    filter: none;
   }
 
   .screen-stack-item.modal-right.modal-right-enter.transition-entering .stack-modal-container,
   .screen-stack-item.modal-right.modal-right-enter.transition-entered .stack-modal-container {
     transform: translateX(0);
-    filter: none;
   }
 
   /* MODAL-RIGHT EXIT - modal closes (exits to right) */
   .screen-stack-item.modal-right.modal-right-exit.transition-exiting .stack-modal-container {
     transform: translateX(100%);
-    filter: none;
     transition:
-      transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1),
-      filter 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
+      transform var(--stack-transition-time, 300ms) cubic-bezier(0.22, 0.61, 0.36, 1);
   }
 
   /* SHEET ENTER - sheet enters (right to left) */
   .screen-stack-item.sheet.sheet-enter.transition-preEnter
     .stack-modal-container {
     transform: translateX(100%);
-    filter: none;
   }
 
   .screen-stack-item.sheet.sheet-enter.transition-entering
@@ -477,30 +437,22 @@
   .screen-stack-item.sheet.sheet-enter.transition-entered
     .stack-modal-container {
     transform: translateX(0);
-    filter: none;
   }
 
   /* SHEET EXIT - sheet closes */
   .screen-stack-item.sheet.sheet-exit.transition-exiting
     .stack-modal-container {
     transform: translateX(100%);
-    filter: none;
     transition:
-      transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1),
-      filter 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
+      transform var(--stack-transition-time, 300ms) cubic-bezier(0.22, 0.61, 0.36, 1);
   }
 
   /* Background screens under modal — don't move, don't dim (overlay does this) */
-  .screen-stack:has(> .screen-stack-item.modal.phase-active)
-    > .screen-stack-item.push.phase-inactive,
-  .screen-stack:has(> .screen-stack-item.modal.phase-active)
-    > .screen-stack-item.push.phase-inactive.transition-entered,
-  .screen-stack:has(> .screen-stack-item.modal-right.phase-active)
+  .screen-stack[data-has-active-modal="true"]
     > .screen-stack-item.push.phase-inactive,
-  .screen-stack:has(> .screen-stack-item.modal-right.phase-active)
+  .screen-stack[data-has-active-modal="true"]
     > .screen-stack-item.push.phase-inactive.transition-entered {
     transform: translate3d(0, 0, 0) !important;
-    filter: none;
   }
 }
 
@@ -508,10 +460,9 @@
 
 /* Inactive screens (background stack elements)
    Background elements on pop get animationType: pop-background and stay at -25%
-   (except modal case, there we override via :has) */
+   (except modal case, there we override via data-has-active-modal) */
 .screen-stack > .screen-stack-item.phase-inactive:not(.push-background):not(.pop-background):not(.pop-enter):not(.pop-exit):not(.modal):not(.sheet) {
   /* Don't set transform explicitly - element will preserve previous position */
-  filter: none;
 }
 
 /* ==================== SPECIAL CASES ==================== */
@@ -527,7 +478,6 @@
 .screen-stack-item.no-animate.pop-background {
   transform: translate3d(0, 0, 0) !important;
   transition: none !important;
-  filter: none !important;
 }
 
 /* NONE - no animation (initial mount) */
@@ -535,7 +485,6 @@
 .screen-stack-item.none:not(.pop-background) {
   transform: translate3d(0, 0, 0) !important;
   transition: none !important;
-  filter: none !important;
 }
 
 
@@ -544,13 +493,14 @@
   display: flex;
   flex-direction: column;
   flex: 1 1 auto;
+  min-height: 100vh;
   min-height: 100dvh;
   position: relative;
 }
 
 .tab-stacks-container > .screen-stack,
 .tab-stacks-container > .split-view-container {
-  padding-bottom: calc(73px + env(safe-area-inset-bottom)); 
+  padding-bottom: calc(73px + env(safe-area-inset-bottom));
 }
 
 .tab-bar {
@@ -565,22 +515,7 @@
   /* Used by active indicator (set inline in RenderTabBar.web.tsx) */
   --tabbar-tabs-count: 1;
   --tabbar-active-index: 0;
-}
-
-.tab-bar-blur-overlay {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: calc(73px + 16px + env(safe-area-inset-bottom));
-  backdrop-filter: blur(20px) saturate(180%);
-  background-color: rgba(255, 255, 255, 0.05);
-  /* -webkit-backdrop-filter: blur(20px) saturate(180%); */
-  pointer-events: none;
-  z-index: 99;
-}
 
-.tab-bar {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -596,6 +531,19 @@
   z-index: 100;
 }
 
+.tab-bar-blur-overlay {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: calc(73px + 16px + env(safe-area-inset-bottom));
+  backdrop-filter: blur(20px) saturate(180%);
+  background-color: rgba(255, 255, 255, 0.05);
+  /* -webkit-backdrop-filter: blur(20px) saturate(180%); */
+  pointer-events: none;
+  z-index: 99;
+}
+
 .tab-bar-inner {
   position: relative;
   display: flex;
@@ -604,8 +552,6 @@
   border-radius: var(--tabbar-radius);
   overflow: hidden;
   isolation: isolate;
-  width: 100%;
-  max-width: 100%;
 }
 
 .tab-bar-glass {
@@ -683,6 +629,7 @@
 }
 
 .tab-item:hover:not(.active) {
+  background: rgba(10, 10, 10, 0.06);
   background: color-mix(in srgb, #0a0a0a 6%, transparent);
 }
 
@@ -690,12 +637,13 @@
   transform: scale(0.98);
 }
 
-.tab-item:focus {
+.tab-item:focus:not(:focus-visible) {
   outline: none;
 }
 
 .tab-item:focus-visible {
   box-shadow:
+    0 0 0 2px rgba(0, 0, 0, 0.4),
     0 0 0 2px color-mix(in srgb, currentColor 40%, transparent),
     0 10px 28px rgba(0, 0, 0, 0.12);
 }
@@ -744,8 +692,8 @@
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
 }
 
-/* ==================== MOBILE TAB BAR (<= 640px) — iOS-like floating glass pill ==================== */
-@media (max-width: 640px) {
+/* ==================== MOBILE TAB BAR (<= 639px) — iOS-like floating glass pill ==================== */
+@media (max-width: 639px) {
   .tab-bar-inner {
     max-width: 560px;
     margin: 0 auto;
@@ -775,12 +723,13 @@
   }
 
   .tab-item:hover:not(.active) {
+    background: rgba(255, 255, 255, 0.22);
     background: color-mix(in srgb, #ffffff 22%, transparent);
   }
 }
 
-/* ==================== DESKTOP TAB BAR (>= 641px) ==================== */
-@media (min-width: 641px) {
+/* ==================== DESKTOP TAB BAR (>= 640px) ==================== */
+@media (min-width: 640px) {
   .tab-stacks-container {
     flex-direction: row;
   }
@@ -894,7 +843,9 @@
 .split-view-container {
   position: relative;
   display: block; /* narrow by default; wide enabled via injected @media rule */
+  height: 100vh;
   height: 100dvh;
+  min-height: 100vh;
   min-height: 100dvh;
   width: 100%;
   overflow: hidden;
@@ -926,6 +877,7 @@
   display: none;
 }
 
+
 .split-view-container:has(.split-view-secondary:has(.screen-stack-item.phase-active)) .split-view-primary,
 .split-view-container:has(.split-view-secondary:has(.screen-stack-item.phase-exiting)) .split-view-primary,
 .split-view-container:has(.split-view-secondary:has(.screen-stack-item.transition-entering)) .split-view-primary,
@@ -959,3 +911,192 @@
     flex: 1 1 auto;
   }
 }
+
+/* ==================== DRAWER ==================== */
+
+.drawer-container {
+  --drawer-bg: #ffffff;
+  --drawer-width: 280px;
+  --drawer-transition: 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
+
+  display: flex;
+  flex-direction: row;
+  flex: 1 1 auto;
+  min-height: 100dvh;
+  position: relative;
+  overflow: hidden;
+}
+
+.drawer-sidebar {
+  display: flex;
+  flex-direction: column;
+  width: var(--drawer-width);
+  flex-shrink: 0;
+  background: var(--drawer-bg);
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 12px 0 0 0;
+}
+
+.drawer-sidebar-content {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 0;
+}
+
+.drawer-main {
+  flex: 1 1 auto;
+  min-width: 0;
+  position: relative;
+}
+
+.drawer-overlay {
+  display: none;
+}
+
+/* Drawer item — identical to desktop TabBar .tab-item */
+.drawer-item {
+  appearance: none;
+  background: transparent;
+  border: 0;
+  margin: 0 12px;
+  margin-bottom: 4px;
+  padding: 0 12px;
+  height: 44px;
+  color: inherit;
+  display: flex;
+  flex: 0 0 auto;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  cursor: pointer;
+  border-radius: 10px;
+  transition: background-color 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
+}
+
+.drawer-item.active {
+  background: var(--backgroundTertiaryTrans, rgba(201, 204, 209, 0.32));
+}
+
+.drawer-item:hover:not(.active) {
+  background: color-mix(in srgb, #0a0a0a 6%, transparent);
+}
+
+.drawer-item:active {
+  transform: none;
+}
+
+.drawer-item:focus {
+  outline: none;
+}
+
+.drawer-item:focus-visible {
+  box-shadow:
+    0 0 0 2px color-mix(in srgb, currentColor 40%, transparent),
+    0 10px 28px rgba(0, 0, 0, 0.12);
+}
+
+.drawer-item-icon {
+  width: 24px;
+  height: 24px;
+  padding-right: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.drawer-item-icon > * {
+  width: 24px;
+  height: 24px;
+  display: block;
+  object-fit: contain;
+}
+
+.drawer-item-label {
+  flex: 1;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 600;
+  text-align: left;
+  padding-right: 3px;
+  white-space: nowrap;
+}
+
+.drawer-item-badge {
+  position: static;
+  transform: none;
+  margin-left: auto;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 6px;
+  border-radius: 9999px;
+  background-color: #dc3545;
+  color: #fff;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 18px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+}
+
+/* ==================== MOBILE DRAWER (<= 640px) ==================== */
+@media (max-width: 640px) {
+  .drawer-container {
+    overflow: hidden;
+  }
+
+  .drawer-sidebar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    z-index: 101;
+    transform: translateX(calc(-1 * var(--drawer-width)));
+    transition: transform var(--drawer-transition);
+  }
+
+  .drawer-main {
+    width: 100%;
+    transition: transform var(--drawer-transition);
+  }
+
+  .drawer-overlay {
+    display: block;
+    position: absolute;
+    inset: 0;
+    z-index: 100;
+    background: rgba(0, 0, 0, 0);
+    opacity: 0;
+    pointer-events: none;
+    transition:
+      opacity var(--drawer-transition),
+      background var(--drawer-transition);
+  }
+
+  /* Open state */
+  .drawer-container[data-drawer-open='true'] .drawer-sidebar {
+    transform: translateX(0);
+  }
+
+  .drawer-container[data-drawer-open='true'] .drawer-main {
+    transform: translateX(var(--drawer-width));
+  }
+
+  .drawer-container[data-drawer-open='true'] .drawer-overlay {
+    opacity: 1;
+    background: rgba(0, 0, 0, 0.3);
+    pointer-events: auto;
+  }
+}
+
+/* ==================== DESKTOP DRAWER (>= 641px) ==================== */
+@media (min-width: 641px) {
+  /* On desktop, drawer is always visible — data-drawer-open is irrelevant */
+  .drawer-sidebar {
+    border-right: 1px solid rgba(0, 0, 0, 0.08);
+  }
+}