@jsekulowicz/ds-components 0.10.0 → 0.11.0

package/custom-elements.json

@@ -12289,7 +12289,7 @@
         {
           "kind": "variable",
           "name": "dialogStyles",
-          "default": "css` /* Interpolatable colors so the scroll-driven keyframes can crossfade the gradient stops instead of jumping between values. */ @property --ds-dialog-body-top-fade { syntax: '<color>'; inherits: false; initial-value: rgb(0 0 0); } @property --ds-dialog-body-bottom-fade { syntax: '<color>'; inherits: false; initial-value: rgb(0 0 0); } :host { display: contents; } dialog { padding: 0; border: 0; background: transparent; color: inherit; width: 100%; max-height: min(90vh, 720px); border-radius: var(--ds-radius-sm); box-shadow: var(--ds-shadow-md); overflow: visible; } /* Scope flex-column to the open state so the UA's display:none keeps the closed dialog out of layout. Without this scope, our display:flex wins unconditionally and the closed dialog renders inline alongside its opener. The flex column itself is needed so ds-card resolves a definite height from the dialog's max-height cap (percentages only resolve against an explicit parent height, not max-height) — otherwise the body never gets a height to scroll against on short viewports. */ dialog[open] { display: flex; flex-direction: column; } :host([size='sm']) dialog { max-width: 400px; } :host([size='md']) dialog { max-width: 560px; } :host([size='lg']) dialog { max-width: 800px; } dialog::backdrop { background: rgb(15 23 42 / 0.55); } ds-card { flex: 1; min-height: 0; min-width: 0; } ds-card::part(card) { height: 100%; max-height: 100%; box-shadow: none; border-color: transparent; gap: var(--ds-space-3); } ds-card::part(body) { flex: 1; min-height: 0; overflow-x: clip; overflow-y: auto; /* Don't chain scroll up to the page when the body reaches its top/bottom boundary or has no overflow. The dialog/drawer is modal — the page behind it shouldn't twitch when the user wheel-scrolls inside the modal. */ overscroll-behavior: contain; padding-inline: var(--ds-space-2); margin-inline: calc(var(--ds-space-2) * -1); /* Hide the native scrollbar. Overflow is indicated by a fade mask at the top and bottom of the scrollport, driven by an actual scroll-progress timeline so the fades only appear when there's content to scroll into / out of view. No padding-block buffer is needed — the top fade stays opaque (no fade) at scroll-top and only switches to transparent (fade visible) once the user has scrolled even one pixel; mirror for the bottom. */ scrollbar-width: none; mask-image: linear-gradient( to bottom, var(--ds-dialog-body-top-fade, rgb(0 0 0)) 0, rgb(0 0 0) var(--ds-space-6), rgb(0 0 0) calc(100% - var(--ds-space-6)), var(--ds-dialog-body-bottom-fade, rgb(0 0 0)) 100% ); animation: ds-dialog-body-scroll-fade linear; animation-timeline: scroll(self); } ds-card::part(body)::-webkit-scrollbar { display: none; } @keyframes ds-dialog-body-scroll-fade { /* At scroll-top: keep the top stop opaque (no fade above), reveal the bottom fade so the user knows there's more below. The two near-instant transitions at 0.001% and 99.999% flip each stop on / off as soon as scroll actually progresses, so the fades are binary (present / absent), not interpolated as the user drags through the range. */ 0% { --ds-dialog-body-top-fade: rgb(0 0 0); --ds-dialog-body-bottom-fade: rgb(0 0 0 / 0); } 0.001%, 99.999% { --ds-dialog-body-top-fade: rgb(0 0 0 / 0); --ds-dialog-body-bottom-fade: rgb(0 0 0 / 0); } 100% { --ds-dialog-body-top-fade: rgb(0 0 0 / 0); --ds-dialog-body-bottom-fade: rgb(0 0 0); } } .title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ds-space-3); } .title-text { margin: 0; flex: 1; font-family: var(--ds-font-display); font-size: var(--ds-font-size-xl); font-weight: var(--ds-font-weight-semibold); letter-spacing: var(--ds-letter-spacing-display); } /* Slotted heading tags (h1-h6, etc.) carry UA defaults that compound on top of .title-text — a bigger font-size and large vertical margins. Normalise them so 'Foo', '<h2 slot=\"title\">Foo</h2>' and '<span slot=\"title\">Foo</span>' all render identically. */ .title-text ::slotted(*) { font: inherit; margin: 0; letter-spacing: inherit; } /* Pull the close button up and to the right so it sits near the card's top-right corner instead of indented by ds-card's full ds-space-6 padding. Its own visual chrome (size, hover, focus ring, square shape) comes from ds-button. */ .close-btn { margin-block-start: calc(var(--ds-space-3) * -1); margin-inline-end: calc(var(--ds-space-3) * -1); } .footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--ds-space-2); } `"
+          "default": "css` /* @property registration so the scroll-driven keyframes can interpolate these as colors. */ @property --ds-dialog-body-top-fade { syntax: '<color>'; inherits: false; initial-value: rgb(0 0 0); } @property --ds-dialog-body-bottom-fade { syntax: '<color>'; inherits: false; initial-value: rgb(0 0 0); } :host { display: contents; } dialog { padding: 0; border: 0; background: transparent; color: inherit; width: calc(100% - var(--ds-space-4)); max-height: min(90vh, 720px); border-radius: var(--ds-radius-sm); box-shadow: var(--ds-shadow-md); overflow: visible; } /* Scope to [open] so closed dialogs stay display:none per UA. */ dialog[open] { display: flex; flex-direction: column; } :host([size='sm']) dialog { max-width: 400px; } :host([size='md']) dialog { max-width: 560px; } :host([size='lg']) dialog { max-width: 800px; } dialog::backdrop { background: rgb(15 23 42 / 0.55); } ds-card { flex: 1; min-height: 0; min-width: 0; } ds-card::part(card) { /* Match the dialog's cap explicitly; percentage heights don't resolve reliably through ds-card's display:block host, so body scroll breaks when content overflows. */ max-height: min(90vh, 720px); box-shadow: none; border-color: transparent; gap: var(--ds-space-3); } ds-card::part(body) { flex: 1; min-height: 0; overflow-x: clip; overflow-y: auto; overscroll-behavior: contain; /* Inline padding + negative margin lets focus rings on full-width children paint outside the body's clip box. */ padding-inline: var(--ds-space-2); margin-inline: calc(var(--ds-space-2) * -1); /* Scrollbar hidden; overflow is signalled by the scroll-driven fade mask defined in the keyframes below. */ scrollbar-width: none; mask-image: linear-gradient( to bottom, var(--ds-dialog-body-top-fade, rgb(0 0 0)) 0, rgb(0 0 0) var(--ds-space-6), rgb(0 0 0) calc(100% - var(--ds-space-6)), var(--ds-dialog-body-bottom-fade, rgb(0 0 0)) 100% ); animation: ds-dialog-body-scroll-fade linear; animation-timeline: scroll(self); } ds-card::part(body)::-webkit-scrollbar { display: none; } /* Top fade hidden at scroll-top, bottom fade hidden at scroll-end. Near-instant flips at 0.001% / 99.999% keep the transitions binary instead of interpolating across the scroll range. */ @keyframes ds-dialog-body-scroll-fade { 0% { --ds-dialog-body-top-fade: rgb(0 0 0); --ds-dialog-body-bottom-fade: rgb(0 0 0 / 0); } 0.001%, 99.999% { --ds-dialog-body-top-fade: rgb(0 0 0 / 0); --ds-dialog-body-bottom-fade: rgb(0 0 0 / 0); } 100% { --ds-dialog-body-top-fade: rgb(0 0 0 / 0); --ds-dialog-body-bottom-fade: rgb(0 0 0); } } .title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ds-space-3); } .title-text { margin: 0; flex: 1; font-family: var(--ds-font-display); font-size: var(--ds-font-size-xl); font-weight: var(--ds-font-weight-semibold); letter-spacing: var(--ds-letter-spacing-display); } /* Normalise slotted headings (h1-h6) so UA defaults don't compound with .title-text styles. */ .title-text ::slotted(*) { font: inherit; margin: 0; letter-spacing: inherit; } /* Pull the close button toward the card's top-right corner; the card's own padding would otherwise indent it. */ .close-btn { margin-block-start: calc(var(--ds-space-3) * -1); margin-inline-end: calc(var(--ds-space-3) * -1); } .footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--ds-space-2); } `"
         }
       ],
       "exports": [
@@ -12552,7 +12552,7 @@
         {
           "kind": "variable",
           "name": "drawerStyles",
-          "default": "css` /* Interpolatable colors so the scroll-driven keyframes can crossfade the gradient stops instead of jumping between values. */ @property --ds-drawer-body-top-fade { syntax: '<color>'; inherits: false; initial-value: rgb(0 0 0); } @property --ds-drawer-body-bottom-fade { syntax: '<color>'; inherits: false; initial-value: rgb(0 0 0); } :host { display: contents; } dialog { padding: 0; border: 0; background: transparent; color: inherit; box-shadow: var(--ds-shadow-lg); overflow: visible; height: 100vh; height: 100dvh; max-height: 100%; /* Slide in on open, slide out on close. allow-discrete lets the display/overlay properties (which can't normally transition) hold their open values for the duration. */ transition: transform var(--ds-duration-slow) var(--ds-easing-standard), display var(--ds-duration-slow) allow-discrete, overlay var(--ds-duration-slow) allow-discrete; } /* Scope flex-column to the open state so the UA's display:none keeps the closed dialog out of layout. Same fix and rationale as ds-dialog — the flex column is needed for the body's height cap to propagate, but unscoped it makes the closed drawer render inline alongside its opener. */ dialog[open] { display: flex; flex-direction: column; } :host([side='start']) dialog { margin: 0; margin-inline-end: auto; transform: translateX(-100%); } :host([side='end']) dialog { margin: 0; margin-inline-start: auto; transform: translateX(100%); } :host([side='start']) dialog[open], :host([side='end']) dialog[open] { transform: translateX(0); } @starting-style { :host([side='start']) dialog[open] { transform: translateX(-100%); } :host([side='end']) dialog[open] { transform: translateX(100%); } } :host([size='sm']) dialog { width: min(20rem, 90vw); } :host([size='md']) dialog { width: min(24rem, 90vw); } :host([size='lg']) dialog { width: min(28rem, 90vw); } dialog::backdrop { background: rgb(15 23 42 / 0.55); } ds-card { flex: 1; min-height: 0; min-width: 0; } ds-card::part(card) { height: 100%; max-height: 100%; box-shadow: none; border-color: transparent; border-radius: 0; gap: var(--ds-space-3); } ds-card::part(body) { flex: 1; min-height: 0; overflow-x: clip; overflow-y: auto; /* Don't chain scroll up to the page when the body reaches its top/bottom boundary or has no overflow. Same rationale as ds-dialog — modal surfaces shouldn't let scroll leak through. */ overscroll-behavior: contain; padding-inline: var(--ds-space-2); margin-inline: calc(var(--ds-space-2) * -1); /* Same scroll-driven fade trick as ds-dialog — see comments there. No padding-block buffer; the fades only kick in once there's actual scroll progress to drive them. */ scrollbar-width: none; mask-image: linear-gradient( to bottom, var(--ds-drawer-body-top-fade, rgb(0 0 0)) 0, rgb(0 0 0) var(--ds-space-6), rgb(0 0 0) calc(100% - var(--ds-space-6)), var(--ds-drawer-body-bottom-fade, rgb(0 0 0)) 100% ); animation: ds-drawer-body-scroll-fade linear; animation-timeline: scroll(self); } ds-card::part(body)::-webkit-scrollbar { display: none; } @keyframes ds-drawer-body-scroll-fade { 0% { --ds-drawer-body-top-fade: rgb(0 0 0); --ds-drawer-body-bottom-fade: rgb(0 0 0 / 0); } 0.001%, 99.999% { --ds-drawer-body-top-fade: rgb(0 0 0 / 0); --ds-drawer-body-bottom-fade: rgb(0 0 0 / 0); } 100% { --ds-drawer-body-top-fade: rgb(0 0 0 / 0); --ds-drawer-body-bottom-fade: rgb(0 0 0); } } .title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ds-space-3); } .title-text { margin: 0; flex: 1; font-family: var(--ds-font-display); font-size: var(--ds-font-size-xl); font-weight: var(--ds-font-weight-semibold); letter-spacing: var(--ds-letter-spacing-display); } .title-text ::slotted(*) { font: inherit; margin: 0; letter-spacing: inherit; } .close-btn { margin-block-start: calc(var(--ds-space-3) * -1); margin-inline-end: calc(var(--ds-space-3) * -1); } .footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--ds-space-2); } `"
+          "default": "css` /* @property registration so the scroll-driven keyframes can interpolate these as colors. */ @property --ds-drawer-body-top-fade { syntax: '<color>'; inherits: false; initial-value: rgb(0 0 0); } @property --ds-drawer-body-bottom-fade { syntax: '<color>'; inherits: false; initial-value: rgb(0 0 0); } :host { display: contents; } dialog { padding: 0; border: 0; background: transparent; color: inherit; box-shadow: var(--ds-shadow-lg); overflow: visible; height: 100vh; height: 100dvh; max-height: 100%; /* allow-discrete lets display/overlay hold their open values for the slide-in / slide-out duration. */ transition: transform var(--ds-duration-slow) var(--ds-easing-standard), display var(--ds-duration-slow) allow-discrete, overlay var(--ds-duration-slow) allow-discrete; } /* Scope to [open] so closed dialogs stay display:none per UA. */ dialog[open] { display: flex; flex-direction: column; } :host([side='start']) dialog { margin: 0; margin-inline-end: auto; transform: translateX(-100%); } :host([side='end']) dialog { margin: 0; margin-inline-start: auto; transform: translateX(100%); } :host([side='start']) dialog[open], :host([side='end']) dialog[open] { transform: translateX(0); } @starting-style { :host([side='start']) dialog[open] { transform: translateX(-100%); } :host([side='end']) dialog[open] { transform: translateX(100%); } } :host([size='sm']) dialog { width: min(20rem, 90vw); } :host([size='md']) dialog { width: min(24rem, 90vw); } :host([size='lg']) dialog { width: min(28rem, 90vw); } dialog::backdrop { background: rgb(15 23 42 / 0.55); } ds-card { flex: 1; min-height: 0; min-width: 0; } ds-card::part(card) { /* Explicit cap; percentage heights don't resolve reliably through ds-card's display:block host. */ max-height: 100vh; max-height: 100dvh; box-shadow: none; border-color: transparent; border-radius: 0; gap: var(--ds-space-3); padding: var(--ds-drawer-card-padding, var(--ds-space-6)); } ds-card::part(body) { flex: 1; min-height: 0; overflow-x: clip; overflow-y: auto; overscroll-behavior: contain; /* Inline padding + negative margin lets focus rings on full-width children paint outside the body's clip box. */ padding-inline: var(--ds-space-2); margin-inline: calc(var(--ds-space-2) * -1); scrollbar-width: none; mask-image: linear-gradient( to bottom, var(--ds-drawer-body-top-fade, rgb(0 0 0)) 0, rgb(0 0 0) var(--ds-space-6), rgb(0 0 0) calc(100% - var(--ds-space-6)), var(--ds-drawer-body-bottom-fade, rgb(0 0 0)) 100% ); animation: ds-drawer-body-scroll-fade linear; animation-timeline: scroll(self); } ds-card::part(body)::-webkit-scrollbar { display: none; } @keyframes ds-drawer-body-scroll-fade { 0% { --ds-drawer-body-top-fade: rgb(0 0 0); --ds-drawer-body-bottom-fade: rgb(0 0 0 / 0); } 0.001%, 99.999% { --ds-drawer-body-top-fade: rgb(0 0 0 / 0); --ds-drawer-body-bottom-fade: rgb(0 0 0 / 0); } 100% { --ds-drawer-body-top-fade: rgb(0 0 0 / 0); --ds-drawer-body-bottom-fade: rgb(0 0 0); } } .title-row { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-3); background: var(--ds-drawer-title-bg, transparent); color: var(--ds-drawer-title-fg, inherit); border-bottom: 1px solid var(--ds-drawer-title-border-color, transparent); padding: var(--ds-drawer-title-padding, 0); } .title-text { margin: 0; flex: 1; font-family: var(--ds-font-display); font-size: var(--ds-font-size-xl); font-weight: var(--ds-font-weight-semibold); letter-spacing: var(--ds-letter-spacing-display); } .title-text ::slotted(*) { font: inherit; margin: 0; letter-spacing: inherit; } .close-btn { margin-block-start: calc(var(--ds-space-3) * -1); margin-inline-end: calc(var(--ds-space-3) * -1); } .close-btn::part(button) { color: var(--ds-drawer-title-fg, inherit); } .footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--ds-space-2); } `"
         }
       ],
       "exports": [
@@ -14751,7 +14751,7 @@
         {
           "kind": "variable",
           "name": "pageShellStyles",
-          "default": "css` :host { --ds-page-shell-max-width: none; display: flex; flex-direction: column; position: relative; height: 100vh; height: 100dvh; overflow-x: clip; background: var(--ds-color-bg); color: var(--ds-color-fg); font-family: var(--ds-font-body); } header { position: sticky; top: 0; background: color-mix(in oklab, var(--ds-color-bg) 92%, transparent); backdrop-filter: blur(12px); z-index: var(--ds-z-index-sticky); } /* The header composes ds-top-bar; let the top-bar own height, padding, border-bottom, and layout. We just (a) make its background transparent so the sticky header's blurred bg shows through, and (b) constrain its inner brand + actions content to the same max-width as the shell-body below so the bar's brand left-aligns with the aside, and its actions right-align with the aside-end (or the right edge of main when no aside-end is slotted). */ .chrome { --ds-top-bar-bg: transparent; --ds-top-bar-content-max-width: var(--ds-page-shell-max-width); } /* Same treatment for a slotted ds-footer: cap its inner content to the shell-body's max-width so footer content aligns with the column above. Consumers who slot a non-ds-footer custom element can override the property themselves. */ ::slotted(ds-footer) { --ds-footer-content-max-width: var(--ds-page-shell-max-width); } footer { display: block; } .shell-body { flex: 1; width: 100%; max-width: var(--ds-page-shell-max-width); margin-inline: auto; display: grid; grid-template-columns: auto 1fr auto; min-height: 0; } :host([aside-empty]) .shell-body { grid-template-columns: 1fr auto; } :host([aside-end-empty]) .shell-body { grid-template-columns: auto 1fr; } :host([aside-empty][aside-end-empty]) .shell-body { grid-template-columns: 1fr; } aside { display: flex; overflow-x: clip; overflow-y: auto; overflow-clip-margin-inline: var(--ds-space-2); min-height: 0; scrollbar-color: var(--ds-color-fg-subtle) transparent; scrollbar-width: thin; /* No scrollbar-gutter reservation: the aside sits flush with its column edge so the consumer's <main> solely owns the gap. The scrollbar appears on demand when the aside genuinely overflows. */ } :host([aside-empty]) aside[part=\"aside\"], :host([aside-empty]) ds-drawer[part=\"aside\"] { display: none; } :host([aside-end-empty]) aside[part=\"aside-end\"] { display: none; } main { padding: var(--ds-space-5); overflow-x: clip; overflow-y: auto; overflow-clip-margin-inline: var(--ds-space-2); min-width: 0; min-height: 0; scrollbar-color: var(--ds-color-fg-subtle) transparent; scrollbar-width: thin; /* Reserve scrollbar gutters on both inline sides so the inline-start and inline-end visible empty bands stay equal in width whether the vertical scrollbar is present or not. */ scrollbar-gutter: stable both-edges; } @media (max-width: ${belowDesktopBreakpoint}) { main { padding-block: var(--ds-space-4); padding-inline: var(--ds-space-4); } } .menu-toggle { display: none; } .menu-toggle::part(button) { min-width: var(--ds-size-sm); width: var(--ds-size-sm); padding: 0; } :host([mobile-layout]) .menu-toggle { display: inline-flex; } /* In mobile layout the inline-start column collapses — the drawer overlays in the top layer (via ds-drawer's native <dialog>) so it doesn't take grid space — and the inline-end column hides since v1 doesn't surface it in the drawer. */ :host([mobile-layout]) .shell-body { grid-template-columns: 1fr; } :host([mobile-layout]) aside[part=\"aside-end\"] { display: none; } :host([mobile-layout]) ds-drawer[part=\"aside\"] { /* ds-drawer is a top-layer modal; remove it from the grid so it doesn't reserve a column when closed. */ display: contents; } :host([mobile-layout]) ds-drawer[part=\"aside\"] ::slotted(ds-sidenav) { width: 100% !important; max-width: 100% !important; flex: 1 1 auto; min-width: 0; min-height: 0; height: auto !important; } `"
+          "default": "css` :host { --ds-page-shell-max-width: none; display: flex; flex-direction: column; position: relative; height: 100vh; height: 100dvh; overflow-x: clip; background: var(--ds-color-bg); color: var(--ds-color-fg); font-family: var(--ds-font-body); } header { position: sticky; top: 0; background: color-mix(in oklab, var(--ds-color-bg) 92%, transparent); backdrop-filter: blur(12px); z-index: var(--ds-z-index-sticky); } /* The header composes ds-top-bar; let the top-bar own height, padding, border-bottom, and layout. We just (a) make its background transparent so the sticky header's blurred bg shows through, and (b) constrain its inner brand + actions content to the same max-width as the shell-body below so the bar's brand left-aligns with the aside, and its actions right-align with the aside-end (or the right edge of main when no aside-end is slotted). */ .chrome { --ds-top-bar-bg: transparent; --ds-top-bar-content-max-width: var(--ds-page-shell-max-width); } /* Same treatment for a slotted ds-footer: cap its inner content to the shell-body's max-width so footer content aligns with the column above. Consumers who slot a non-ds-footer custom element can override the property themselves. */ ::slotted(ds-footer) { --ds-footer-content-max-width: var(--ds-page-shell-max-width); } footer { display: block; } .shell-body { flex: 1; width: 100%; max-width: var(--ds-page-shell-max-width); margin-inline: auto; display: grid; grid-template-columns: auto 1fr auto; min-height: 0; } :host([aside-empty]) .shell-body { grid-template-columns: 1fr auto; } :host([aside-end-empty]) .shell-body { grid-template-columns: auto 1fr; } :host([aside-empty][aside-end-empty]) .shell-body { grid-template-columns: 1fr; } aside { display: flex; overflow-x: clip; overflow-y: auto; overflow-clip-margin-inline: var(--ds-space-2); min-height: 0; scrollbar-color: var(--ds-color-fg-subtle) transparent; scrollbar-width: thin; /* No scrollbar-gutter reservation: the aside sits flush with its column edge so the consumer's <main> solely owns the gap. The scrollbar appears on demand when the aside genuinely overflows. */ } :host([aside-empty]) aside[part=\"aside\"], :host([aside-empty]) ds-drawer[part=\"aside\"] { display: none; } :host([aside-end-empty]) aside[part=\"aside-end\"] { display: none; } main { padding: var(--ds-space-5); overflow-x: clip; overflow-y: auto; overflow-clip-margin-inline: var(--ds-space-2); min-width: 0; min-height: 0; scrollbar-color: var(--ds-color-fg-subtle) transparent; scrollbar-width: thin; /* Reserve scrollbar gutters on both inline sides so the inline-start and inline-end visible empty bands stay equal in width whether the vertical scrollbar is present or not. */ scrollbar-gutter: stable both-edges; } @media (max-width: ${belowDesktopBreakpoint}) { main { padding-block: var(--ds-space-4); padding-inline: var(--ds-space-4); } } .menu-toggle { display: none; } .menu-toggle::part(button) { min-width: var(--ds-size-sm); width: var(--ds-size-sm); padding: 0; } :host([mobile-layout]) .menu-toggle { display: inline-flex; } :host([mobile-layout]) .shell-body { grid-template-columns: 1fr; } :host([mobile-layout]) aside[part=\"aside-end\"] { display: none; } :host([mobile-layout]) ds-drawer[part=\"aside\"] { /* Top-layer modal; don't reserve a grid column when closed. */ display: contents; --ds-drawer-card-padding: 0; --ds-drawer-title-padding: var(--ds-space-3) var(--ds-space-4); --ds-drawer-title-bg: var(--ds-page-shell-drawer-header-bg, transparent); --ds-drawer-title-fg: var(--ds-page-shell-drawer-header-fg, inherit); --ds-drawer-title-border-color: var(--ds-page-shell-drawer-header-border-color, transparent); } :host([mobile-layout]) ds-drawer[part=\"aside\"] ::slotted(ds-sidenav) { width: 100% !important; max-width: 100% !important; flex: 1 1 auto; min-width: 0; min-height: 0; height: auto !important; } `"
         }
       ],
       "exports": [

package/dist/molecules/dialog/dialog.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.styles.d.ts","sourceRoot":"","sources":["../../../src/molecules/dialog/dialog.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,yBAyJxB,CAAC"}
+{"version":3,"file":"dialog.styles.d.ts","sourceRoot":"","sources":["../../../src/molecules/dialog/dialog.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,yBAsIxB,CAAC"}

package/dist/molecules/dialog/dialog.styles.js

@@ -1,7 +1,7 @@
 import { css } from 'lit';
 export const dialogStyles = css `
-  /* Interpolatable colors so the scroll-driven keyframes can crossfade
-     the gradient stops instead of jumping between values. */
+  /* @property registration so the scroll-driven keyframes can
+     interpolate these as colors. */
   @property --ds-dialog-body-top-fade {
     syntax: '<color>';
     inherits: false;
@@ -20,20 +20,13 @@ export const dialogStyles = css `
     border: 0;
     background: transparent;
     color: inherit;
-    width: 100%;
+    width: calc(100% - var(--ds-space-4));
     max-height: min(90vh, 720px);
     border-radius: var(--ds-radius-sm);
     box-shadow: var(--ds-shadow-md);
     overflow: visible;
   }
-  /* Scope flex-column to the open state so the UA's display:none
-     keeps the closed dialog out of layout. Without this scope, our
-     display:flex wins unconditionally and the closed dialog renders
-     inline alongside its opener. The flex column itself is needed so
-     ds-card resolves a definite height from the dialog's max-height
-     cap (percentages only resolve against an explicit parent height,
-     not max-height) — otherwise the body never gets a height to
-     scroll against on short viewports. */
+  /* Scope to [open] so closed dialogs stay display:none per UA. */
   dialog[open] {
     display: flex;
     flex-direction: column;
@@ -56,8 +49,10 @@ export const dialogStyles = css `
     min-width: 0;
   }
   ds-card::part(card) {
-    height: 100%;
-    max-height: 100%;
+    /* Match the dialog's cap explicitly; percentage heights don't
+       resolve reliably through ds-card's display:block host, so body
+       scroll breaks when content overflows. */
+    max-height: min(90vh, 720px);
     box-shadow: none;
     border-color: transparent;
     gap: var(--ds-space-3);
@@ -67,20 +62,13 @@ export const dialogStyles = css `
     min-height: 0;
     overflow-x: clip;
     overflow-y: auto;
-    /* Don't chain scroll up to the page when the body reaches its
-       top/bottom boundary or has no overflow. The dialog/drawer is
-       modal — the page behind it shouldn't twitch when the user
-       wheel-scrolls inside the modal. */
     overscroll-behavior: contain;
+    /* Inline padding + negative margin lets focus rings on full-width
+       children paint outside the body's clip box. */
     padding-inline: var(--ds-space-2);
     margin-inline: calc(var(--ds-space-2) * -1);
-    /* Hide the native scrollbar. Overflow is indicated by a fade mask
-       at the top and bottom of the scrollport, driven by an actual
-       scroll-progress timeline so the fades only appear when there's
-       content to scroll into / out of view. No padding-block buffer
-       is needed — the top fade stays opaque (no fade) at scroll-top
-       and only switches to transparent (fade visible) once the user
-       has scrolled even one pixel; mirror for the bottom. */
+    /* Scrollbar hidden; overflow is signalled by the scroll-driven
+       fade mask defined in the keyframes below. */
     scrollbar-width: none;
     mask-image: linear-gradient(
       to bottom,
@@ -95,13 +83,10 @@ export const dialogStyles = css `
   ds-card::part(body)::-webkit-scrollbar {
     display: none;
   }
+  /* Top fade hidden at scroll-top, bottom fade hidden at scroll-end.
+     Near-instant flips at 0.001% / 99.999% keep the transitions
+     binary instead of interpolating across the scroll range. */
   @keyframes ds-dialog-body-scroll-fade {
-    /* At scroll-top: keep the top stop opaque (no fade above), reveal
-       the bottom fade so the user knows there's more below. The two
-       near-instant transitions at 0.001% and 99.999% flip each stop
-       on / off as soon as scroll actually progresses, so the fades
-       are binary (present / absent), not interpolated as the user
-       drags through the range. */
     0% {
       --ds-dialog-body-top-fade: rgb(0 0 0);
       --ds-dialog-body-bottom-fade: rgb(0 0 0 / 0);
@@ -129,19 +114,15 @@ export const dialogStyles = css `
     font-weight: var(--ds-font-weight-semibold);
     letter-spacing: var(--ds-letter-spacing-display);
   }
-  /* Slotted heading tags (h1-h6, etc.) carry UA defaults that
-     compound on top of .title-text — a bigger font-size and large
-     vertical margins. Normalise them so 'Foo', '<h2 slot="title">Foo</h2>'
-     and '<span slot="title">Foo</span>' all render identically. */
+  /* Normalise slotted headings (h1-h6) so UA defaults don't compound
+     with .title-text styles. */
   .title-text ::slotted(*) {
     font: inherit;
     margin: 0;
     letter-spacing: inherit;
   }
-  /* Pull the close button up and to the right so it sits near the
-     card's top-right corner instead of indented by ds-card's full
-     ds-space-6 padding. Its own visual chrome (size, hover, focus
-     ring, square shape) comes from ds-button. */
+  /* Pull the close button toward the card's top-right corner; the
+     card's own padding would otherwise indent it. */
   .close-btn {
     margin-block-start: calc(var(--ds-space-3) * -1);
     margin-inline-end: calc(var(--ds-space-3) * -1);

package/dist/molecules/dialog/dialog.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.styles.js","sourceRoot":"","sources":["../../../src/molecules/dialog/dialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyJ9B,CAAC"}
+{"version":3,"file":"dialog.styles.js","sourceRoot":"","sources":["../../../src/molecules/dialog/dialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsI9B,CAAC"}

package/dist/molecules/drawer/drawer.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.styles.d.ts","sourceRoot":"","sources":["../../../src/molecules/drawer/drawer.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,yBAiKxB,CAAC"}
+{"version":3,"file":"drawer.styles.d.ts","sourceRoot":"","sources":["../../../src/molecules/drawer/drawer.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,yBAkKxB,CAAC"}

package/dist/molecules/drawer/drawer.styles.js

@@ -1,7 +1,7 @@
 import { css } from 'lit';
 export const drawerStyles = css `
-  /* Interpolatable colors so the scroll-driven keyframes can crossfade
-     the gradient stops instead of jumping between values. */
+  /* @property registration so the scroll-driven keyframes can
+     interpolate these as colors. */
   @property --ds-drawer-body-top-fade {
     syntax: '<color>';
     inherits: false;
@@ -25,19 +25,14 @@ export const drawerStyles = css `
     height: 100vh;
     height: 100dvh;
     max-height: 100%;
-    /* Slide in on open, slide out on close. allow-discrete lets the
-       display/overlay properties (which can't normally transition)
-       hold their open values for the duration. */
+    /* allow-discrete lets display/overlay hold their open values for
+       the slide-in / slide-out duration. */
     transition:
       transform var(--ds-duration-slow) var(--ds-easing-standard),
       display var(--ds-duration-slow) allow-discrete,
       overlay var(--ds-duration-slow) allow-discrete;
   }
-  /* Scope flex-column to the open state so the UA's display:none
-     keeps the closed dialog out of layout. Same fix and rationale as
-     ds-dialog — the flex column is needed for the body's height cap to
-     propagate, but unscoped it makes the closed drawer render inline
-     alongside its opener. */
+  /* Scope to [open] so closed dialogs stay display:none per UA. */
   dialog[open] {
     display: flex;
     flex-direction: column;
@@ -82,27 +77,26 @@ export const drawerStyles = css `
     min-width: 0;
   }
   ds-card::part(card) {
-    height: 100%;
-    max-height: 100%;
+    /* Explicit cap; percentage heights don't resolve reliably through
+       ds-card's display:block host. */
+    max-height: 100vh;
+    max-height: 100dvh;
     box-shadow: none;
     border-color: transparent;
     border-radius: 0;
     gap: var(--ds-space-3);
+    padding: var(--ds-drawer-card-padding, var(--ds-space-6));
   }
   ds-card::part(body) {
     flex: 1;
     min-height: 0;
     overflow-x: clip;
     overflow-y: auto;
-    /* Don't chain scroll up to the page when the body reaches its
-       top/bottom boundary or has no overflow. Same rationale as
-       ds-dialog — modal surfaces shouldn't let scroll leak through. */
     overscroll-behavior: contain;
+    /* Inline padding + negative margin lets focus rings on full-width
+       children paint outside the body's clip box. */
     padding-inline: var(--ds-space-2);
     margin-inline: calc(var(--ds-space-2) * -1);
-    /* Same scroll-driven fade trick as ds-dialog — see comments
-       there. No padding-block buffer; the fades only kick in once
-       there's actual scroll progress to drive them. */
     scrollbar-width: none;
     mask-image: linear-gradient(
       to bottom,
@@ -133,9 +127,13 @@ export const drawerStyles = css `
   }
   .title-row {
     display: flex;
-    align-items: flex-start;
+    align-items: center;
     justify-content: space-between;
     gap: var(--ds-space-3);
+    background: var(--ds-drawer-title-bg, transparent);
+    color: var(--ds-drawer-title-fg, inherit);
+    border-bottom: 1px solid var(--ds-drawer-title-border-color, transparent);
+    padding: var(--ds-drawer-title-padding, 0);
   }
   .title-text {
     margin: 0;
@@ -154,6 +152,9 @@ export const drawerStyles = css `
     margin-block-start: calc(var(--ds-space-3) * -1);
     margin-inline-end: calc(var(--ds-space-3) * -1);
   }
+  .close-btn::part(button) {
+    color: var(--ds-drawer-title-fg, inherit);
+  }
   .footer {
     display: flex;
     flex-wrap: wrap;

package/dist/molecules/drawer/drawer.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.styles.js","sourceRoot":"","sources":["../../../src/molecules/drawer/drawer.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiK9B,CAAC"}
+{"version":3,"file":"drawer.styles.js","sourceRoot":"","sources":["../../../src/molecules/drawer/drawer.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkK9B,CAAC"}

package/dist/templates/page-shell/page-shell.styles.js

@@ -126,10 +126,6 @@ export const pageShellStyles = css `
     display: inline-flex;
   }
 
-  /* In mobile layout the inline-start column collapses — the drawer
-     overlays in the top layer (via ds-drawer's native <dialog>) so it
-     doesn't take grid space — and the inline-end column hides since
-     v1 doesn't surface it in the drawer. */
   :host([mobile-layout]) .shell-body {
     grid-template-columns: 1fr;
   }
@@ -137,9 +133,13 @@ export const pageShellStyles = css `
     display: none;
   }
   :host([mobile-layout]) ds-drawer[part="aside"] {
-    /* ds-drawer is a top-layer modal; remove it from the grid so it
-       doesn't reserve a column when closed. */
+    /* Top-layer modal; don't reserve a grid column when closed. */
     display: contents;
+    --ds-drawer-card-padding: 0;
+    --ds-drawer-title-padding: var(--ds-space-3) var(--ds-space-4);
+    --ds-drawer-title-bg: var(--ds-page-shell-drawer-header-bg, transparent);
+    --ds-drawer-title-fg: var(--ds-page-shell-drawer-header-fg, inherit);
+    --ds-drawer-title-border-color: var(--ds-page-shell-drawer-header-border-color, transparent);
   }
   :host([mobile-layout]) ds-drawer[part="aside"] ::slotted(ds-sidenav) {
     width: 100% !important;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsekulowicz/ds-components",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "Lit web components for the Design System Library (atoms, molecules, organisms, templates, pages).",
   "license": "UNLICENSED",
   "repository": {
@@ -321,8 +321,8 @@
   ],
   "dependencies": {
     "lit": "^3.2.1",
-    "@jsekulowicz/ds-tokens": "0.5.0",
-    "@jsekulowicz/ds-core": "0.5.0"
+    "@jsekulowicz/ds-core": "0.5.0",
+    "@jsekulowicz/ds-tokens": "0.5.0"
   },
   "devDependencies": {
     "heroicons": "2.2.0",