@jsekulowicz/ds-components 0.9.13 → 0.10.0

package/custom-elements.json

@@ -12289,7 +12289,7 @@
         {
           "kind": "variable",
           "name": "dialogStyles",
-          "default": "css` :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; } :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); backdrop-filter: blur(2px); } ds-card { height: 100%; } 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; padding-inline: var(--ds-space-2); margin-inline: calc(var(--ds-space-2) * -1); } .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` /* 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); } `"
         }
       ],
       "exports": [
@@ -12530,6 +12530,295 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/molecules/drawer/define.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "ds-drawer",
+          "declaration": {
+            "name": "DsDrawer",
+            "module": "/src/molecules/drawer/drawer.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/molecules/drawer/drawer.styles.ts",
+      "declarations": [
+        {
+          "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); } `"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "drawerStyles",
+          "declaration": {
+            "name": "drawerStyles",
+            "module": "src/molecules/drawer/drawer.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/molecules/drawer/drawer.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "DsDrawer",
+          "cssParts": [
+            {
+              "description": "The native `<dialog>` element.",
+              "name": "dialog"
+            },
+            {
+              "description": "The inner `ds-card` container.",
+              "name": "card"
+            },
+            {
+              "description": "The scrolling body region (forwarded from `ds-card`).",
+              "name": "body"
+            },
+            {
+              "description": "The header close button.",
+              "name": "close-button"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Heading content rendered in the header row.",
+              "name": "title"
+            },
+            {
+              "description": "Body content. Scrolls when it overflows.",
+              "name": "default"
+            },
+            {
+              "description": "Footer content, typically `<ds-button>` actions.",
+              "name": "footer"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "open",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "dismissible",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "attribute": "dismissible",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "DrawerSize"
+              },
+              "default": "'sm'",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "side",
+              "type": {
+                "text": "DrawerSide"
+              },
+              "default": "'start'",
+              "attribute": "side",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "_dialogEl",
+              "type": {
+                "text": "HTMLDialogElement | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "show",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "close",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "returnValue",
+                  "optional": true,
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "#onBackdropClick",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "#onCancel",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "#onNativeClose",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "#onCloseButtonClick",
+              "privacy": "private"
+            }
+          ],
+          "events": [
+            {
+              "description": "Fires after the drawer opens.",
+              "name": "ds-open"
+            },
+            {
+              "description": "Fires after the drawer closes. Detail: `{ returnValue: string }`.",
+              "name": "ds-close"
+            },
+            {
+              "description": "Fires when the drawer is dismissed via Escape or backdrop click.",
+              "name": "ds-cancel"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "open"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "label"
+            },
+            {
+              "name": "dismissible",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "fieldName": "dismissible"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "DrawerSize"
+              },
+              "default": "'sm'",
+              "fieldName": "size"
+            },
+            {
+              "name": "side",
+              "type": {
+                "text": "DrawerSide"
+              },
+              "default": "'start'",
+              "fieldName": "side"
+            }
+          ],
+          "superclass": {
+            "name": "DsElement",
+            "package": "@jsekulowicz/ds-core"
+          },
+          "tagName": "ds-drawer",
+          "customElement": true,
+          "summary": "Edge-anchored modal panel built on the native `<dialog>` element. Slides in from the inline start or end with a sticky header (title + close) and a scrolling body."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "DsDrawer",
+          "declaration": {
+            "name": "DsDrawer",
+            "module": "src/molecules/drawer/drawer.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/molecules/drawer/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "DsDrawer",
+          "declaration": {
+            "name": "DsDrawer",
+            "module": "./drawer.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "DrawerSize",
+          "declaration": {
+            "name": "DrawerSize",
+            "module": "./drawer.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "DrawerSide",
+          "declaration": {
+            "name": "DrawerSide",
+            "module": "./drawer.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/molecules/menu-button/define.ts",
@@ -14462,7 +14751,7 @@
         {
           "kind": "variable",
           "name": "pageShellStyles",
-          "default": "css` :host { --ds-page-shell-max-width: 90rem; 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]) .mobile-backdrop { 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), .drawer-close::part(button) { min-width: var(--ds-size-sm); width: var(--ds-size-sm); padding: 0; } :host([mobile-layout]) .menu-toggle { display: inline-flex; } .mobile-backdrop { display: none; } .drawer-header { display: none; } .drawer-brand { display: none; } .drawer-close { display: none; } :host([mobile-layout]) .shell-body { grid-template-columns: 1fr; } :host([mobile-layout]) aside[part=\"aside-end\"] { /* Secondary inline-end region is not surfaced in the mobile drawer in v1. Consumers can opt back in by overriding via ::part(aside-end). */ display: none; } :host([mobile-layout]) aside[part=\"aside\"] { position: absolute; top: 0; left: 0; width: 16rem; display: flex; flex-direction: column; height: 100%; background: var(--ds-color-bg); border-right: 0; z-index: var(--ds-z-index-modal); transform: translateX(-100%); transition: transform var(--ds-duration-slow) var(--ds-easing-standard); scrollbar-gutter: auto; overflow: hidden; box-sizing: border-box; } :host([mobile-layout][data-mobile-nav-open]) aside[part=\"aside\"] { transform: translateX(0); } :host([mobile-layout]) .drawer-header { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-3); padding: var(--ds-space-2) var(--ds-space-4); } :host([mobile-layout]) .drawer-brand { display: inline-flex; align-items: center; flex: 1; min-width: 0; font-family: var(--ds-font-display); font-size: var(--ds-font-size-lg); letter-spacing: var(--ds-letter-spacing-display); } :host([mobile-layout]) slot[name='drawer-brand']::slotted(*) { max-width: 100%; } :host([mobile-layout]) .drawer-close { display: inline-flex; flex: 0 0 auto; margin: 0; } :host([mobile-layout]) aside[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; } :host([mobile-layout][data-mobile-nav-open]) .mobile-backdrop { display: block; position: absolute; inset: 0; border: 0; margin: 0; padding: 0; background: color-mix(in oklab, var(--ds-color-fg) 26%, transparent); z-index: var(--ds-z-index-overlay); } `"
+          "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; } `"
         }
       ],
       "exports": [
@@ -14486,7 +14775,7 @@
           "name": "DsPageShell",
           "cssProperties": [
             {
-              "description": "Outer cap for the shell's content column. Header inner content and the aside + main row centre at this width and align vertically. Defaults to `90rem` (1440px). Header chrome remains full-bleed.",
+              "description": "Outer cap for the shell's content column. Header inner content and the aside + main row centre at this width and align vertically. Defaults to `none`. Header chrome remains full-bleed.",
               "name": "--ds-page-shell-max-width"
             }
           ],
@@ -14496,7 +14785,7 @@
               "name": "brand"
             },
             {
-              "description": "Brand/logo shown at the start of the mobile navigation drawer.",
+              "description": "Brand/logo shown in the mobile navigation drawer's title row. Falls back to the `brand` prop.",
               "name": "drawer-brand"
             },
             {
@@ -14504,7 +14793,7 @@
               "name": "header-actions"
             },
             {
-              "description": "Primary side navigation (inline-start). When empty, the column and hamburger toggle are not rendered.",
+              "description": "Primary side navigation (inline-start). On mobile, rendered inside a `ds-drawer` opened by the hamburger toggle. When empty, the column and hamburger toggle are not rendered.",
               "name": "aside"
             },
             {
@@ -14548,6 +14837,15 @@
               "default": "'Secondary navigation'",
               "attribute": "end-label"
             },
+            {
+              "kind": "field",
+              "name": "_mobileLayout",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
             {
               "kind": "field",
               "name": "_mobileNavOpen",
@@ -14612,11 +14910,6 @@
               "name": "#syncLayout",
               "privacy": "private"
             },
-            {
-              "kind": "field",
-              "name": "#onDocumentKeydown",
-              "privacy": "private"
-            },
             {
               "kind": "field",
               "name": "#setMobileNav",
@@ -14651,6 +14944,26 @@
               "kind": "field",
               "name": "#onFooterSlotChange",
               "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "#renderDesktopAside",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "#renderMobileAside",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
+              }
             }
           ],
           "attributes": [

package/dist/define.d.ts

@@ -20,6 +20,7 @@ import './atoms/nav-item/define.js';
 import './atoms/menu/define.js';
 import './molecules/card/define.js';
 import './molecules/dialog/define.js';
+import './molecules/drawer/define.js';
 import './molecules/toast/define.js';
 import './molecules/color-picker/define.js';
 import './molecules/menu-button/define.js';

package/dist/define.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"define.d.ts","sourceRoot":"","sources":["../src/define.ts"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAC;AAClC,OAAO,2BAA2B,CAAC;AACnC,OAAO,yBAAyB,CAAC;AACjC,OAAO,4BAA4B,CAAC;AACpC,OAAO,2BAA2B,CAAC;AACnC,OAAO,wBAAwB,CAAC;AAChC,OAAO,wBAAwB,CAAC;AAChC,OAAO,wBAAwB,CAAC;AAChC,OAAO,8BAA8B,CAAC;AACtC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,yBAAyB,CAAC;AACjC,OAAO,+BAA+B,CAAC;AACvC,OAAO,0BAA0B,CAAC;AAClC,OAAO,qCAAqC,CAAC;AAC7C,OAAO,wBAAwB,CAAC;AAChC,OAAO,yBAAyB,CAAC;AACjC,OAAO,8BAA8B,CAAC;AACtC,OAAO,4BAA4B,CAAC;AACpC,OAAO,wBAAwB,CAAC;AAChC,OAAO,4BAA4B,CAAC;AACpC,OAAO,8BAA8B,CAAC;AACtC,OAAO,6BAA6B,CAAC;AACrC,OAAO,oCAAoC,CAAC;AAC5C,OAAO,mCAAmC,CAAC;AAC3C,OAAO,iCAAiC,CAAC;AACzC,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,+BAA+B,CAAC;AACvC,OAAO,+BAA+B,CAAC;AACvC,OAAO,8BAA8B,CAAC;AACtC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,iCAAiC,CAAC"}
+{"version":3,"file":"define.d.ts","sourceRoot":"","sources":["../src/define.ts"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAC;AAClC,OAAO,2BAA2B,CAAC;AACnC,OAAO,yBAAyB,CAAC;AACjC,OAAO,4BAA4B,CAAC;AACpC,OAAO,2BAA2B,CAAC;AACnC,OAAO,wBAAwB,CAAC;AAChC,OAAO,wBAAwB,CAAC;AAChC,OAAO,wBAAwB,CAAC;AAChC,OAAO,8BAA8B,CAAC;AACtC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,yBAAyB,CAAC;AACjC,OAAO,+BAA+B,CAAC;AACvC,OAAO,0BAA0B,CAAC;AAClC,OAAO,qCAAqC,CAAC;AAC7C,OAAO,wBAAwB,CAAC;AAChC,OAAO,yBAAyB,CAAC;AACjC,OAAO,8BAA8B,CAAC;AACtC,OAAO,4BAA4B,CAAC;AACpC,OAAO,wBAAwB,CAAC;AAChC,OAAO,4BAA4B,CAAC;AACpC,OAAO,8BAA8B,CAAC;AACtC,OAAO,8BAA8B,CAAC;AACtC,OAAO,6BAA6B,CAAC;AACrC,OAAO,oCAAoC,CAAC;AAC5C,OAAO,mCAAmC,CAAC;AAC3C,OAAO,iCAAiC,CAAC;AACzC,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,+BAA+B,CAAC;AACvC,OAAO,+BAA+B,CAAC;AACvC,OAAO,8BAA8B,CAAC;AACtC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,iCAAiC,CAAC"}

package/dist/define.js

@@ -20,6 +20,7 @@ import './atoms/nav-item/define.js';
 import './atoms/menu/define.js';
 import './molecules/card/define.js';
 import './molecules/dialog/define.js';
+import './molecules/drawer/define.js';
 import './molecules/toast/define.js';
 import './molecules/color-picker/define.js';
 import './molecules/menu-button/define.js';

package/dist/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","sourceRoot":"","sources":["../src/define.ts"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAC;AAClC,OAAO,2BAA2B,CAAC;AACnC,OAAO,yBAAyB,CAAC;AACjC,OAAO,4BAA4B,CAAC;AACpC,OAAO,2BAA2B,CAAC;AACnC,OAAO,wBAAwB,CAAC;AAChC,OAAO,wBAAwB,CAAC;AAChC,OAAO,wBAAwB,CAAC;AAChC,OAAO,8BAA8B,CAAC;AACtC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,yBAAyB,CAAC;AACjC,OAAO,+BAA+B,CAAC;AACvC,OAAO,0BAA0B,CAAC;AAClC,OAAO,qCAAqC,CAAC;AAC7C,OAAO,wBAAwB,CAAC;AAChC,OAAO,yBAAyB,CAAC;AACjC,OAAO,8BAA8B,CAAC;AACtC,OAAO,4BAA4B,CAAC;AACpC,OAAO,wBAAwB,CAAC;AAChC,OAAO,4BAA4B,CAAC;AACpC,OAAO,8BAA8B,CAAC;AACtC,OAAO,6BAA6B,CAAC;AACrC,OAAO,oCAAoC,CAAC;AAC5C,OAAO,mCAAmC,CAAC;AAC3C,OAAO,iCAAiC,CAAC;AACzC,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,+BAA+B,CAAC;AACvC,OAAO,+BAA+B,CAAC;AACvC,OAAO,8BAA8B,CAAC;AACtC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,iCAAiC,CAAC"}
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../src/define.ts"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAC;AAClC,OAAO,2BAA2B,CAAC;AACnC,OAAO,yBAAyB,CAAC;AACjC,OAAO,4BAA4B,CAAC;AACpC,OAAO,2BAA2B,CAAC;AACnC,OAAO,wBAAwB,CAAC;AAChC,OAAO,wBAAwB,CAAC;AAChC,OAAO,wBAAwB,CAAC;AAChC,OAAO,8BAA8B,CAAC;AACtC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,yBAAyB,CAAC;AACjC,OAAO,+BAA+B,CAAC;AACvC,OAAO,0BAA0B,CAAC;AAClC,OAAO,qCAAqC,CAAC;AAC7C,OAAO,wBAAwB,CAAC;AAChC,OAAO,yBAAyB,CAAC;AACjC,OAAO,8BAA8B,CAAC;AACtC,OAAO,4BAA4B,CAAC;AACpC,OAAO,wBAAwB,CAAC;AAChC,OAAO,4BAA4B,CAAC;AACpC,OAAO,8BAA8B,CAAC;AACtC,OAAO,8BAA8B,CAAC;AACtC,OAAO,6BAA6B,CAAC;AACrC,OAAO,oCAAoC,CAAC;AAC5C,OAAO,mCAAmC,CAAC;AAC3C,OAAO,iCAAiC,CAAC;AACzC,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,+BAA+B,CAAC;AACvC,OAAO,+BAA+B,CAAC;AACvC,OAAO,8BAA8B,CAAC;AACtC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,iCAAiC,CAAC"}

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,yBAmFxB,CAAC"}
+{"version":3,"file":"dialog.styles.d.ts","sourceRoot":"","sources":["../../../src/molecules/dialog/dialog.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,yBAyJxB,CAAC"}

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

@@ -1,5 +1,17 @@
 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 --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;
   }
@@ -14,6 +26,18 @@ export const dialogStyles = css `
     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;
   }
@@ -25,10 +49,11 @@ export const dialogStyles = css `
   }
   dialog::backdrop {
     background: rgb(15 23 42 / 0.55);
-    backdrop-filter: blur(2px);
   }
   ds-card {
-    height: 100%;
+    flex: 1;
+    min-height: 0;
+    min-width: 0;
   }
   ds-card::part(card) {
     height: 100%;
@@ -42,8 +67,53 @@ 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;
     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;

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmF9B,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyJ9B,CAAC"}

package/dist/molecules/drawer/define.d.ts

@@ -0,0 +1,8 @@
+import { DsDrawer } from './drawer.js';
+import '../card/define.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'ds-drawer': DsDrawer;
+    }
+}
+//# sourceMappingURL=define.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"define.d.ts","sourceRoot":"","sources":["../../../src/molecules/drawer/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,mBAAmB,CAAC;AAM3B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/molecules/drawer/define.js

@@ -0,0 +1,6 @@
+import { DsDrawer } from './drawer.js';
+import '../card/define.js';
+if (!customElements.get('ds-drawer')) {
+    customElements.define('ds-drawer', DsDrawer);
+}
+//# sourceMappingURL=define.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/molecules/drawer/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,mBAAmB,CAAC;AAE3B,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC;IACrC,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;AAC/C,CAAC"}

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

@@ -0,0 +1,37 @@
+import { type PropertyValues, type TemplateResult } from 'lit';
+import { DsElement } from '@jsekulowicz/ds-core';
+import '../card/define.js';
+import '../../atoms/button/define.js';
+import '../../atoms/icon/icons/x-mark.js';
+export type DrawerSize = 'sm' | 'md' | 'lg';
+export type DrawerSide = 'start' | 'end';
+/**
+ * @tag ds-drawer
+ * @summary Edge-anchored modal panel built on the native `<dialog>` element. Slides in from the inline start or end with a sticky header (title + close) and a scrolling body.
+ * @slot title - Heading content rendered in the header row.
+ * @slot default - Body content. Scrolls when it overflows.
+ * @slot footer - Footer content, typically `<ds-button>` actions.
+ * @csspart dialog - The native `<dialog>` element.
+ * @csspart card - The inner `ds-card` container.
+ * @csspart body - The scrolling body region (forwarded from `ds-card`).
+ * @csspart close-button - The header close button.
+ * @event ds-open - Fires after the drawer opens.
+ * @event ds-close - Fires after the drawer closes. Detail: `{ returnValue: string }`.
+ * @event ds-cancel - Fires when the drawer is dismissed via Escape or backdrop click.
+ */
+export declare class DsDrawer extends DsElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    open: boolean;
+    label: string;
+    dismissible: boolean;
+    size: DrawerSize;
+    side: DrawerSide;
+    private _dialogEl?;
+    show(): void;
+    close(returnValue?: string): void;
+    updated(changed: PropertyValues): void;
+    disconnectedCallback(): void;
+    render(): TemplateResult;
+}
+//# sourceMappingURL=drawer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../src/molecules/drawer/drawer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGrE,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,mBAAmB,CAAC;AAC3B,OAAO,8BAA8B,CAAC;AACtC,OAAO,kCAAkC,CAAC;AAG1C,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC5C,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,KAAK,CAAC;AAEzC;;;;;;;;;;;;;GAaG;AACH,qBAAa,QAAS,SAAQ,SAAS;;IACrC,OAAgB,MAAM,4BAAuC;IAEjB,IAAI,UAAS;IAC7C,KAAK,SAAM;IACqB,WAAW,UAAQ;IAClC,IAAI,EAAE,UAAU,CAAQ;IACxB,IAAI,EAAE,UAAU,CAAW;IAEvC,OAAO,CAAC,SAAS,CAAC,CAAoB;IAEvD,IAAI,IAAI,IAAI;IAIZ,KAAK,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI;IAOxB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAUtC,oBAAoB,IAAI,IAAI;IA6B5B,MAAM,IAAI,cAAc;CAmClC"}