@inchurch/matcha-theme 21.4.0 → 22.1.0

package/components/matcha-drawer.scss

@@ -1,376 +1,376 @@
-@use "sass:map";
-
-// =============================================================================
-// matcha-drawer.scss — Drawer / Sidenav (over, push, side)
-// =============================================================================
-
-// ── Animations ──────────────────────────────────────────────────────────────
-
-@keyframes matcha-drawer-backdrop-in {
-    from { opacity: 0; }
-    to   { opacity: 1; }
-}
-
-@keyframes matcha-drawer-backdrop-out {
-    from { opacity: 1; }
-    to   { opacity: 0; }
-}
-
-// Shake feedback — disparado quando ESC/backdrop click são bloqueados por
-// disableClose=true. Sinaliza visualmente que a ação foi capturada mas
-// bloqueada (em vez de silent fail).
-@keyframes matcha-drawer-shake {
-    0%, 100% { transform: translate3d(0, 0, 0); }
-    20%      { transform: translate3d(-8px, 0, 0); }
-    40%      { transform: translate3d(8px, 0, 0); }
-    60%      { transform: translate3d(-4px, 0, 0); }
-    80%      { transform: translate3d(4px, 0, 0); }
-}
-
-@media (prefers-reduced-motion: reduce) {
-    matcha-drawer,
-    .matcha-drawer-backdrop,
-    matcha-drawer-content {
-        animation: none !important;
-        transition: none !important;
-    }
-}
-
-// ── Forced colors (Windows High Contrast) ──
-// rgba/blur/shadow somem; usar Canvas/CanvasText/SelectedItem.
-@media (forced-colors: active) {
-    matcha-drawer {
-        border: 1px solid CanvasText !important;
-        background: Canvas !important;
-        box-shadow: none !important;
-    }
-
-    .matcha-drawer-backdrop {
-        background: rgba(0, 0, 0, 0.7) !important;
-        backdrop-filter: none !important;
-    }
-
-    matcha-drawer:focus-visible {
-        outline: 2px solid CanvasText !important;
-    }
-}
-
-// ── Reduced transparency ──
-// Backdrop blur 4px → solid 85% pra usuários com dificuldade de ler sobre blur.
-@media (prefers-reduced-transparency: reduce) {
-    .matcha-drawer-backdrop {
-        background: rgba(0, 0, 0, 0.85) !important;
-        backdrop-filter: none !important;
-    }
-}
-
-// ── Print ──
-// Drawer + chrome flutuante somem em impressão.
-@media print {
-    matcha-drawer,
-    .matcha-drawer-backdrop {
-        display: none !important;
-    }
-
-    matcha-drawer-content {
-        margin: 0 !important;
-    }
-}
-
-// =============================================================================
-// Theme mixin
-// =============================================================================
-
-@mixin matcha-drawer-theme($theme) {
-
-    // ── Container ──
-    matcha-drawer-container {
-        display: block;
-        position: relative;
-        z-index: 1;
-        box-sizing: border-box;
-        -webkit-overflow-scrolling: touch;
-        overflow: hidden;
-        background-color: var(--matcha-color-bg);
-        color: var(--matcha-color-fg);
-    }
-
-    // ── Backdrop ──
-    .matcha-drawer-backdrop {
-        position: absolute;
-        inset: 0;
-        z-index: 3;
-        display: block;
-        visibility: hidden;
-        cursor: pointer;
-        // Figma matcha/overlay Type=Drawer: scrim 30% + blur 4px
-        background-color: var(--matcha-scrim-drawer, rgba(0, 0, 0, 0.3));
-        backdrop-filter: blur(var(--matcha-scrim-drawer-blur, 4px));
-        opacity: 0;
-        transition: opacity var(--matcha-duration-normal, 200ms) ease,
-                    visibility var(--matcha-duration-normal, 200ms) ease;
-    }
-
-    // Backdrop visible
-    matcha-drawer-container.matcha-drawer-container-has-open .matcha-drawer-backdrop {
-        visibility: visible;
-        opacity: 1;
-    }
-
-    // ── Content container ──
-    .matcha-drawer-content-container {
-        position: relative;
-        z-index: 0;
-        display: block;
-        height: 100%;
-        overflow: auto;
-    }
-
-    // ── Drawer ──
-    matcha-drawer {
-        display: flex;
-        flex-direction: column;
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        // Default position=start ancora à esquerda. End/bottom override via .matcha-drawer-end/.matcha-drawer-bottom.
-        // Sem o explícito, layouts que usam o drawer dentro de containers flexíveis renderizam fora da posição esperada.
-        left: 0;
-        z-index: 10;
-        outline: 0;
-        box-sizing: border-box;
-        // Drawer raiz não scrolla — só o body slot scrolla (overflow-y:auto).
-        // Header/footer são flex-shrink:0 e ficam fixos.
-        overflow: hidden;
-        // Defensivo: drawer nunca extrapola viewport mesmo com [width] absurdo.
-        max-width: 100vw;
-        transform: translate3d(-100%, 0, 0);
-        visibility: hidden;
-        // Width inclusa pra animar resize dinâmico (responsive token, [width] bound).
-        transition: transform var(--matcha-duration-normal, 200ms) cubic-bezier(0.16, 1, 0.3, 1),
-                    visibility var(--matcha-duration-normal, 200ms) ease,
-                    width var(--matcha-duration-normal, 200ms) cubic-bezier(0.16, 1, 0.3, 1);
-        background-color: var(--matcha-color-surface);
-        color: var(--matcha-color-fg);
-        pointer-events: auto;
-
-        // Shadow inline (3 stacked) — Figma DSV3 spec exato pro drawer.
-        // Não usa --matcha-shadow-3 token porque o Figma drawer também usa inline
-        // (não bound a um effect style). Side/push modes removem via override.
-        box-shadow:
-            0 0 1px rgba(0, 0, 0, 0.08),
-            0 4px 16px rgba(0, 0, 0, 0.12),
-            0 16px 48px rgba(0, 0, 0, 0.16);
-
-        // Borda da edge só aparece no dark (var = 0/transparent no light, sem mudar layout).
-        border-right: var(--matcha-drawer-border);
-
-        // Position end (right) — overrides left:0 default
-        &.matcha-drawer-end {
-            left: auto;
-            right: 0;
-            transform: translate3d(100%, 0, 0);
-
-            border-right: 0 solid transparent;
-            border-left: var(--matcha-drawer-border);
-        }
-
-        // Position bottom (bottom sheet)
-        &.matcha-drawer-bottom {
-            top: auto;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            width: 100%;
-            // 90% do container (relative ao matcha-drawer-container parent).
-            // Em produção (container = viewport via 100vh), == 90vh efetivo.
-            // Em playground/embed (container 360px), == 324px e respeita o frame.
-            // min() com fallback 90vh garante comportamento se parent for auto.
-            max-height: min(90vh, 90%);
-            border-radius: var(--matcha-radius-xl, 16px) var(--matcha-radius-xl, 16px) 0 0;
-            transform: translate3d(0, 100%, 0);
-
-            border-right: 0 solid transparent;
-            border-top: var(--matcha-drawer-border);
-
-            // safe-area-inset-bottom — iPhone X+ home indicator não cobre footer.
-            // Aplicado no slot footer porque é onde botões/CTAs ficam.
-            .matcha-drawer__slot--footer {
-                padding-block-end: max(var(--drawer-pad-y), env(safe-area-inset-bottom, var(--drawer-pad-y)));
-            }
-        }
-
-        // ── Drag handle (bottom sheet drag-to-dismiss) ──
-        // Real elemento (não pseudo) pra capturar pointer events. Renderiza só
-        // em position=bottom. 32×4 visual + 32×24 hit area via pad pra touch.
-        .matcha-drawer__handle {
-            display: none;
-            flex-shrink: 0;
-            width: 100%;
-            padding: var(--matcha-space-100, 8px) 0;
-            cursor: grab;
-            touch-action: none; // bloqueia scroll-pan vertical default no handle
-            user-select: none;
-
-            &::before {
-                content: '';
-                display: block;
-                width: 32px;
-                height: 4px;
-                margin: 0 auto;
-                border-radius: var(--matcha-radius-sm, 2px);
-                background: var(--matcha-color-hint, var(--matcha-color-text-muted));
-                opacity: 0.3;
-            }
-
-            &:active {
-                cursor: grabbing;
-
-                &::before { opacity: 0.5; }
-            }
-        }
-
-        &.matcha-drawer-bottom .matcha-drawer__handle {
-            display: block;
-        }
-
-        // Drag em andamento — desabilita transition pra seguir o dedo 1:1.
-        &.matcha-drawer--dragging {
-            transition: none !important;
-        }
-
-        // Opened state
-        &.matcha-drawer-opened {
-            transform: translate3d(0, 0, 0);
-            visibility: visible;
-        }
-
-        // Mode: over — floats above content with shadow
-        &.matcha-drawer-over {
-            z-index: 15;
-        }
-
-        // Mode: side — fixed, no shadow, border via surface-border token (DSV3 canônico).
-        &.matcha-drawer-side {
-            z-index: 10;
-            border-right: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border, var(--matcha-color-border));
-            box-shadow: none;
-
-            &.matcha-drawer-end {
-                border-right: none;
-                border-left: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border, var(--matcha-color-border));
-            }
-        }
-
-        // Mode: push — pushes content, border only.
-        &.matcha-drawer-push {
-            border-right: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border, var(--matcha-color-border));
-            box-shadow: none;
-
-            &.matcha-drawer-end {
-                border-right: none;
-                border-left: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border, var(--matcha-color-border));
-            }
-        }
-
-        // Shake state — feedback visual quando ESC/backdrop bloqueados por disableClose.
-        // Animation roda 400ms, sobrepondo o transform: translate3d(0,0,0) do .matcha-drawer-opened.
-        // Após terminar, transform volta pro estado .matcha-drawer-opened normal.
-        &.matcha-drawer-shake {
-            animation: matcha-drawer-shake 400ms ease-in-out;
-        }
-
-        // ── Slot architecture (header / body / footer) ──
-        //
-        // CSS vars (consumer override sem !important):
-        //   --drawer-pad-x / --drawer-pad-y → padding uniforme de cada slot
-        //   --drawer-divider                → border entre slots (default mostra)
-        //
-        // Cada slot tem padding UNIFORME (não asymmetric). Header e footer
-        // ganham border-bottom/top respectivamente — separação visual clara
-        // sem depender de gaps assimétricos. Pattern canônico Material/Antd.
-        //
-        // Defaults simétricos 20/20 (calibração 2026-05-08): alinha com card md
-        // e segue padrão DS moderno (Material 16, shadcn 24, Notion 16 — 20 é o
-        // sweet spot). Antes era 24/20 assimétrico — quirky e sem motivo claro.
-        --drawer-pad-x: var(--matcha-space-250, 20px);
-        --drawer-pad-y: var(--matcha-space-250, 20px);
-        --drawer-divider: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border, rgba(255, 255, 255, 0.12));
-
-        .matcha-drawer__slot {
-            display: flex;
-            flex-direction: column;
-            min-width: 0;
-
-            // Hide vazio (Chrome 105+/Safari 15.4+/FF 121+).
-            &:not(:has(*)) {
-                display: none;
-            }
-        }
-
-        // Header — fixo no topo (não scrolla com body). Border-bottom separa do body.
-        // Elemento projetado pelo consumer recebe flex row via `> *`.
-        .matcha-drawer__slot--header {
-            flex: 0 0 auto;
-            padding: var(--drawer-pad-y) var(--drawer-pad-x);
-            border-bottom: var(--drawer-divider);
-            color: var(--matcha-color-fg);
-
-            > * {
-                display: flex;
-                flex-direction: row;
-                align-items: center;
-                justify-content: space-between;
-                gap: var(--matcha-space-150, 12px);
-                width: 100%;
-                min-width: 0;
-            }
-        }
-
-        // Body — cresce e scrolla quando overflow.
-        .matcha-drawer__slot--body {
-            flex: 1 1 auto;
-            overflow-y: auto;
-            overflow-x: hidden;
-            padding: var(--drawer-pad-y) var(--drawer-pad-x);
-            color: var(--matcha-color-fg);
-            -webkit-overflow-scrolling: touch;
-            gap: var(--matcha-space-150, 12px);
-        }
-
-        // Footer — fixo no bottom. Border-top separa do body.
-        .matcha-drawer__slot--footer {
-            flex: 0 0 auto;
-            padding: var(--drawer-pad-y) var(--drawer-pad-x);
-            border-top: var(--drawer-divider);
-
-            > * {
-                display: flex;
-                flex-direction: row;
-                align-items: center;
-                justify-content: flex-end;
-                gap: var(--matcha-space-150, 12px);
-                width: 100%;
-                min-width: 0;
-                flex-wrap: wrap;
-            }
-        }
-    }
-
-
-    // ── Drawer content (main page) ──
-    matcha-drawer-content {
-        position: relative;
-        z-index: 1;
-        display: block;
-        height: 100%;
-        overflow: auto;
-        transition: margin var(--matcha-duration-normal, 200ms) cubic-bezier(0.16, 1, 0.3, 1);
-    }
-
-    // ── Focus ring ──
-    matcha-drawer:focus-visible {
-        outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent);
-        outline-offset: var(--matcha-state-focus-ring-offset, 2px);
-    }
-}
+@use "sass:map";
+
+// =============================================================================
+// matcha-drawer.scss — Drawer / Sidenav (over, push, side)
+// =============================================================================
+
+// ── Animations ──────────────────────────────────────────────────────────────
+
+@keyframes matcha-drawer-backdrop-in {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+
+@keyframes matcha-drawer-backdrop-out {
+    from { opacity: 1; }
+    to   { opacity: 0; }
+}
+
+// Shake feedback — disparado quando ESC/backdrop click são bloqueados por
+// disableClose=true. Sinaliza visualmente que a ação foi capturada mas
+// bloqueada (em vez de silent fail).
+@keyframes matcha-drawer-shake {
+    0%, 100% { transform: translate3d(0, 0, 0); }
+    20%      { transform: translate3d(-8px, 0, 0); }
+    40%      { transform: translate3d(8px, 0, 0); }
+    60%      { transform: translate3d(-4px, 0, 0); }
+    80%      { transform: translate3d(4px, 0, 0); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    matcha-drawer,
+    .matcha-drawer-backdrop,
+    matcha-drawer-content {
+        animation: none !important;
+        transition: none !important;
+    }
+}
+
+// ── Forced colors (Windows High Contrast) ──
+// rgba/blur/shadow somem; usar Canvas/CanvasText/SelectedItem.
+@media (forced-colors: active) {
+    matcha-drawer {
+        border: 1px solid CanvasText !important;
+        background: Canvas !important;
+        box-shadow: none !important;
+    }
+
+    .matcha-drawer-backdrop {
+        background: rgba(0, 0, 0, 0.7) !important;
+        backdrop-filter: none !important;
+    }
+
+    matcha-drawer:focus-visible {
+        outline: 2px solid CanvasText !important;
+    }
+}
+
+// ── Reduced transparency ──
+// Backdrop blur 4px → solid 85% pra usuários com dificuldade de ler sobre blur.
+@media (prefers-reduced-transparency: reduce) {
+    .matcha-drawer-backdrop {
+        background: rgba(0, 0, 0, 0.85) !important;
+        backdrop-filter: none !important;
+    }
+}
+
+// ── Print ──
+// Drawer + chrome flutuante somem em impressão.
+@media print {
+    matcha-drawer,
+    .matcha-drawer-backdrop {
+        display: none !important;
+    }
+
+    matcha-drawer-content {
+        margin: 0 !important;
+    }
+}
+
+// =============================================================================
+// Theme mixin
+// =============================================================================
+
+@mixin matcha-drawer-theme($theme) {
+
+    // ── Container ──
+    matcha-drawer-container {
+        display: block;
+        position: relative;
+        z-index: 1;
+        box-sizing: border-box;
+        -webkit-overflow-scrolling: touch;
+        overflow: hidden;
+        background-color: var(--matcha-color-bg);
+        color: var(--matcha-color-fg);
+    }
+
+    // ── Backdrop ──
+    .matcha-drawer-backdrop {
+        position: absolute;
+        inset: 0;
+        z-index: 3;
+        display: block;
+        visibility: hidden;
+        cursor: pointer;
+        // Figma matcha/overlay Type=Drawer: scrim 30% + blur 4px
+        background-color: var(--matcha-scrim-drawer, rgba(0, 0, 0, 0.3));
+        backdrop-filter: blur(var(--matcha-scrim-drawer-blur, 4px));
+        opacity: 0;
+        transition: opacity var(--matcha-duration-normal, 200ms) ease,
+                    visibility var(--matcha-duration-normal, 200ms) ease;
+    }
+
+    // Backdrop visible
+    matcha-drawer-container.matcha-drawer-container-has-open .matcha-drawer-backdrop {
+        visibility: visible;
+        opacity: 1;
+    }
+
+    // ── Content container ──
+    .matcha-drawer-content-container {
+        position: relative;
+        z-index: 0;
+        display: block;
+        height: 100%;
+        overflow: auto;
+    }
+
+    // ── Drawer ──
+    matcha-drawer {
+        display: flex;
+        flex-direction: column;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        // Default position=start ancora à esquerda. End/bottom override via .matcha-drawer-end/.matcha-drawer-bottom.
+        // Sem o explícito, layouts que usam o drawer dentro de containers flexíveis renderizam fora da posição esperada.
+        left: 0;
+        z-index: 10;
+        outline: 0;
+        box-sizing: border-box;
+        // Drawer raiz não scrolla — só o body slot scrolla (overflow-y:auto).
+        // Header/footer são flex-shrink:0 e ficam fixos.
+        overflow: hidden;
+        // Defensivo: drawer nunca extrapola viewport mesmo com [width] absurdo.
+        max-width: 100vw;
+        transform: translate3d(-100%, 0, 0);
+        visibility: hidden;
+        // Width inclusa pra animar resize dinâmico (responsive token, [width] bound).
+        transition: transform var(--matcha-duration-normal, 200ms) cubic-bezier(0.16, 1, 0.3, 1),
+                    visibility var(--matcha-duration-normal, 200ms) ease,
+                    width var(--matcha-duration-normal, 200ms) cubic-bezier(0.16, 1, 0.3, 1);
+        background-color: var(--matcha-color-surface);
+        color: var(--matcha-color-fg);
+        pointer-events: auto;
+
+        // Shadow inline (3 stacked) — Figma DSV3 spec exato pro drawer.
+        // Não usa --matcha-shadow-3 token porque o Figma drawer também usa inline
+        // (não bound a um effect style). Side/push modes removem via override.
+        box-shadow:
+            0 0 1px rgba(0, 0, 0, 0.08),
+            0 4px 16px rgba(0, 0, 0, 0.12),
+            0 16px 48px rgba(0, 0, 0, 0.16);
+
+        // Borda da edge só aparece no dark (var = 0/transparent no light, sem mudar layout).
+        border-right: var(--matcha-drawer-border);
+
+        // Position end (right) — overrides left:0 default
+        &.matcha-drawer-end {
+            left: auto;
+            right: 0;
+            transform: translate3d(100%, 0, 0);
+
+            border-right: 0 solid transparent;
+            border-left: var(--matcha-drawer-border);
+        }
+
+        // Position bottom (bottom sheet)
+        &.matcha-drawer-bottom {
+            top: auto;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            width: 100%;
+            // 90% do container (relative ao matcha-drawer-container parent).
+            // Em produção (container = viewport via 100vh), == 90vh efetivo.
+            // Em playground/embed (container 360px), == 324px e respeita o frame.
+            // min() com fallback 90vh garante comportamento se parent for auto.
+            max-height: min(90vh, 90%);
+            border-radius: var(--matcha-radius-xl, 16px) var(--matcha-radius-xl, 16px) 0 0;
+            transform: translate3d(0, 100%, 0);
+
+            border-right: 0 solid transparent;
+            border-top: var(--matcha-drawer-border);
+
+            // safe-area-inset-bottom — iPhone X+ home indicator não cobre footer.
+            // Aplicado no slot footer porque é onde botões/CTAs ficam.
+            .matcha-drawer__slot--footer {
+                padding-block-end: max(var(--drawer-pad-y), env(safe-area-inset-bottom, var(--drawer-pad-y)));
+            }
+        }
+
+        // ── Drag handle (bottom sheet drag-to-dismiss) ──
+        // Real elemento (não pseudo) pra capturar pointer events. Renderiza só
+        // em position=bottom. 32×4 visual + 32×24 hit area via pad pra touch.
+        .matcha-drawer__handle {
+            display: none;
+            flex-shrink: 0;
+            width: 100%;
+            padding: var(--matcha-space-100, 8px) 0;
+            cursor: grab;
+            touch-action: none; // bloqueia scroll-pan vertical default no handle
+            user-select: none;
+
+            &::before {
+                content: '';
+                display: block;
+                width: 32px;
+                height: 4px;
+                margin: 0 auto;
+                border-radius: var(--matcha-radius-sm, 2px);
+                background: var(--matcha-color-hint, var(--matcha-color-text-muted));
+                opacity: 0.3;
+            }
+
+            &:active {
+                cursor: grabbing;
+
+                &::before { opacity: 0.5; }
+            }
+        }
+
+        &.matcha-drawer-bottom .matcha-drawer__handle {
+            display: block;
+        }
+
+        // Drag em andamento — desabilita transition pra seguir o dedo 1:1.
+        &.matcha-drawer--dragging {
+            transition: none !important;
+        }
+
+        // Opened state
+        &.matcha-drawer-opened {
+            transform: translate3d(0, 0, 0);
+            visibility: visible;
+        }
+
+        // Mode: over — floats above content with shadow
+        &.matcha-drawer-over {
+            z-index: 15;
+        }
+
+        // Mode: side — fixed, no shadow, border via surface-border token (DSV3 canônico).
+        &.matcha-drawer-side {
+            z-index: 10;
+            border-right: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border, var(--matcha-color-border));
+            box-shadow: none;
+
+            &.matcha-drawer-end {
+                border-right: none;
+                border-left: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border, var(--matcha-color-border));
+            }
+        }
+
+        // Mode: push — pushes content, border only.
+        &.matcha-drawer-push {
+            border-right: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border, var(--matcha-color-border));
+            box-shadow: none;
+
+            &.matcha-drawer-end {
+                border-right: none;
+                border-left: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border, var(--matcha-color-border));
+            }
+        }
+
+        // Shake state — feedback visual quando ESC/backdrop bloqueados por disableClose.
+        // Animation roda 400ms, sobrepondo o transform: translate3d(0,0,0) do .matcha-drawer-opened.
+        // Após terminar, transform volta pro estado .matcha-drawer-opened normal.
+        &.matcha-drawer-shake {
+            animation: matcha-drawer-shake 400ms ease-in-out;
+        }
+
+        // ── Slot architecture (header / body / footer) ──
+        //
+        // CSS vars (consumer override sem !important):
+        //   --drawer-pad-x / --drawer-pad-y → padding uniforme de cada slot
+        //   --drawer-divider                → border entre slots (default mostra)
+        //
+        // Cada slot tem padding UNIFORME (não asymmetric). Header e footer
+        // ganham border-bottom/top respectivamente — separação visual clara
+        // sem depender de gaps assimétricos. Pattern canônico Material/Antd.
+        //
+        // Defaults simétricos 20/20 (calibração 2026-05-08): alinha com card md
+        // e segue padrão DS moderno (Material 16, shadcn 24, Notion 16 — 20 é o
+        // sweet spot). Antes era 24/20 assimétrico — quirky e sem motivo claro.
+        --drawer-pad-x: var(--matcha-space-250, 20px);
+        --drawer-pad-y: var(--matcha-space-250, 20px);
+        --drawer-divider: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border, rgba(255, 255, 255, 0.12));
+
+        .matcha-drawer__slot {
+            display: flex;
+            flex-direction: column;
+            min-width: 0;
+
+            // Hide vazio (Chrome 105+/Safari 15.4+/FF 121+).
+            &:not(:has(*)) {
+                display: none;
+            }
+        }
+
+        // Header — fixo no topo (não scrolla com body). Border-bottom separa do body.
+        // Elemento projetado pelo consumer recebe flex row via `> *`.
+        .matcha-drawer__slot--header {
+            flex: 0 0 auto;
+            padding: var(--drawer-pad-y) var(--drawer-pad-x);
+            border-bottom: var(--drawer-divider);
+            color: var(--matcha-color-fg);
+
+            > * {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                justify-content: space-between;
+                gap: var(--matcha-space-150, 12px);
+                width: 100%;
+                min-width: 0;
+            }
+        }
+
+        // Body — cresce e scrolla quando overflow.
+        .matcha-drawer__slot--body {
+            flex: 1 1 auto;
+            overflow-y: auto;
+            overflow-x: hidden;
+            padding: var(--drawer-pad-y) var(--drawer-pad-x);
+            color: var(--matcha-color-fg);
+            -webkit-overflow-scrolling: touch;
+            gap: var(--matcha-space-150, 12px);
+        }
+
+        // Footer — fixo no bottom. Border-top separa do body.
+        .matcha-drawer__slot--footer {
+            flex: 0 0 auto;
+            padding: var(--drawer-pad-y) var(--drawer-pad-x);
+            border-top: var(--drawer-divider);
+
+            > * {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                justify-content: flex-end;
+                gap: var(--matcha-space-150, 12px);
+                width: 100%;
+                min-width: 0;
+                flex-wrap: wrap;
+            }
+        }
+    }
+
+
+    // ── Drawer content (main page) ──
+    matcha-drawer-content {
+        position: relative;
+        z-index: 1;
+        display: block;
+        height: 100%;
+        overflow: auto;
+        transition: margin var(--matcha-duration-normal, 200ms) cubic-bezier(0.16, 1, 0.3, 1);
+    }
+
+    // ── Focus ring ──
+    matcha-drawer:focus-visible {
+        outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent);
+        outline-offset: var(--matcha-state-focus-ring-offset, 2px);
+    }
+}