@jsekulowicz/ds-components 0.13.1 → 0.13.3

package/custom-elements.json

@@ -845,6 +845,150 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/shared/scroll-fade-controller.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "ScrollFadeController",
+          "members": [
+            {
+              "kind": "field",
+              "name": "#getScroller",
+              "privacy": "private",
+              "type": {
+                "text": "() => HTMLElement | null | undefined"
+              },
+              "default": "getScroller"
+            },
+            {
+              "kind": "field",
+              "name": "#scroller",
+              "privacy": "private",
+              "type": {
+                "text": "HTMLElement | null"
+              },
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "#resize",
+              "privacy": "private",
+              "type": {
+                "text": "ResizeObserver | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#mutation",
+              "privacy": "private",
+              "type": {
+                "text": "MutationObserver | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#frame",
+              "privacy": "private",
+              "type": {
+                "text": "number"
+              },
+              "default": "0"
+            },
+            {
+              "kind": "method",
+              "name": "hostConnected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "hostUpdated",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "hostDisconnected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "#tryAttach",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "attempt",
+                  "default": "0"
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "#detach",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#onScroll",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "#schedule",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "#update",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ScrollFadeController",
+          "declaration": {
+            "name": "ScrollFadeController",
+            "module": "src/shared/scroll-fade-controller.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/shared/scroll-fade.styles.ts",
@@ -852,7 +996,12 @@
         {
           "kind": "variable",
           "name": "scrollFadeStyles",
-          "default": "css` /* @property registration so the scroll-driven keyframe can interpolate the fades as colours. Near-instant flips keep the transitions binary. */ @property --ds-scroll-fade-top { syntax: '<color>'; inherits: false; initial-value: rgb(0 0 0); } @property --ds-scroll-fade-bottom { syntax: '<color>'; inherits: false; initial-value: rgb(0 0 0); } @keyframes ds-scroll-fade { 0% { --ds-scroll-fade-top: rgb(0 0 0); --ds-scroll-fade-bottom: rgb(0 0 0); } 0.001%, 99.999% { --ds-scroll-fade-top: rgb(0 0 0 / 0); --ds-scroll-fade-bottom: rgb(0 0 0 / 0); } 100% { --ds-scroll-fade-top: rgb(0 0 0 / 0); --ds-scroll-fade-bottom: rgb(0 0 0); } } `"
+          "default": "css` ds-card::part(body), .scroll { --ds-scroll-fade-mask: linear-gradient( to bottom, rgb(0 0 0) 0, rgb(0 0 0) var(--ds-scroll-fade-offset, 0px), var(--ds-scroll-fade-top, rgb(0 0 0)) var(--ds-scroll-fade-offset, 0px), rgb(0 0 0) calc(var(--ds-scroll-fade-offset, 0px) + var(--ds-scroll-fade-depth, var(--ds-space-8))), rgb(0 0 0) calc(100% - var(--ds-scroll-fade-depth, var(--ds-space-8))), var(--ds-scroll-fade-bottom, rgb(0 0 0)) 100% ); } `"
+        },
+        {
+          "kind": "variable",
+          "name": "cardBodyScrollFadeStyles",
+          "default": "css` 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: var(--ds-scroll-fade-mask); } ds-card::part(body)::-webkit-scrollbar { display: none; } `"
         }
       ],
       "exports": [
@@ -863,6 +1012,14 @@
             "name": "scrollFadeStyles",
             "module": "src/shared/scroll-fade.styles.ts"
           }
+        },
+        {
+          "kind": "js",
+          "name": "cardBodyScrollFadeStyles",
+          "declaration": {
+            "name": "cardBodyScrollFadeStyles",
+            "module": "src/shared/scroll-fade.styles.ts"
+          }
         }
       ]
     },
@@ -7445,7 +7602,7 @@
         {
           "kind": "variable",
           "name": "tableScrollBodyStyles",
-          "default": "css` :host([scroll-body]) { display: flex; flex-direction: column; min-height: 0; } :host([scroll-body]) .scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; /* No overscroll bounce — the rubber-band at the top/bottom looks glitchy against the pinned header and the offset scroll-fade. */ overscroll-behavior: none; scrollbar-width: none; mask-image: linear-gradient( to bottom, rgb(0 0 0) 0, rgb(0 0 0) var(--ds-table-header-height), var(--ds-scroll-fade-top, rgb(0 0 0)) var(--ds-table-header-height), rgb(0 0 0) calc(var(--ds-table-header-height) * 2), rgb(0 0 0) calc(100% - var(--ds-table-header-height)), var(--ds-scroll-fade-bottom, rgb(0 0 0)) 100% ); animation: ds-scroll-fade linear; animation-timeline: scroll(self); } :host([scroll-body]) .scroll::-webkit-scrollbar { display: none; } :host([scroll-body]) thead th { position: sticky; top: 0; z-index: 1; box-sizing: border-box; block-size: var(--ds-table-header-height); } /* Stacked (mobile) layout hides the header and renders rows as cards, so the top fade must NOT be offset by the header height — fade from the very top like ds-dialog / ds-drawer. */ @container (max-width: ${mobileBreakpoint}) { :host([scroll-body]:not([responsive='scroll'])) .scroll { mask-image: linear-gradient( to bottom, var(--ds-scroll-fade-top, rgb(0 0 0)) 0, rgb(0 0 0) var(--ds-table-header-height), rgb(0 0 0) calc(100% - var(--ds-table-header-height)), var(--ds-scroll-fade-bottom, rgb(0 0 0)) 100% ); } } `"
+          "default": "css` :host([scroll-body]) { display: flex; flex-direction: column; min-height: 0; } :host([scroll-body]) .scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; /* No overscroll bounce — the rubber-band at the top/bottom looks glitchy against the pinned header and the offset scroll-fade. */ overscroll-behavior: none; scrollbar-width: none; /* Shared scroll-fade mask (driven by ScrollFadeController), offset below the sticky header so it dims the body rather than the header. */ --ds-scroll-fade-offset: var(--ds-table-header-height); mask-image: var(--ds-scroll-fade-mask); } :host([scroll-body]) .scroll::-webkit-scrollbar { display: none; } :host([scroll-body]) thead th { position: sticky; top: 0; z-index: 1; box-sizing: border-box; block-size: var(--ds-table-header-height); } /* Stacked (mobile) layout hides the header and renders rows as cards, so the top fade must NOT be offset by the header height — fade from the very top like ds-dialog / ds-drawer. */ @container (max-width: ${mobileBreakpoint}) { :host([scroll-body]:not([responsive='scroll'])) .scroll { --ds-scroll-fade-offset: 0px; } } `"
         }
       ],
       "exports": [
@@ -7863,6 +8020,13 @@
               "privacy": "private",
               "default": "false"
             },
+            {
+              "kind": "field",
+              "name": "_scrollFade",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new ScrollFadeController( this, () => this.shadowRoot?.querySelector('.scroll') as HTMLElement | null, )"
+            },
             {
               "kind": "field",
               "name": "#slotObserver",
@@ -12561,7 +12725,7 @@
         {
           "kind": "variable",
           "name": "dialogStyles",
-          "default": "css` :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 shared scroll-driven fade (see shared/scroll-fade.styles). */ scrollbar-width: none; mask-image: linear-gradient( to bottom, var(--ds-scroll-fade-top, 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-scroll-fade-bottom, rgb(0 0 0)) 100% ); animation: ds-scroll-fade linear; animation-timeline: scroll(self); } ds-card::part(body)::-webkit-scrollbar { display: none; } .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); } `"
+          "default": "css` :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); } /* The scrolling body (ds-card::part(body)) + its scroll fade come from the shared cardBodyScrollFadeStyles. */ .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": [
@@ -12663,6 +12827,13 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "_scrollFade",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new ScrollFadeController( this, () => (this.shadowRoot ?.querySelector('ds-card') ?.shadowRoot?.querySelector('[part~=\"body\"]') as HTMLElement | null) ?? null, )"
+            },
             {
               "kind": "method",
               "name": "show",
@@ -12824,7 +12995,7 @@
         {
           "kind": "variable",
           "name": "drawerStyles",
-          "default": "css` :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) { /* Fill the dialog explicitly; percentage heights don't resolve reliably through ds-card's display:block host. */ height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; box-shadow: none; /* border: 0 not transparent — a 1px transparent border still fills with the card's own background (background-clip: border-box). */ border: 0; 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-scroll-fade-top, 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-scroll-fade-bottom, rgb(0 0 0)) 100% ); animation: ds-scroll-fade linear; animation-timeline: scroll(self); } ds-card::part(body)::-webkit-scrollbar { display: none; } .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); min-height: var(--ds-drawer-title-min-height, auto); } .title-text { margin: 0; flex: 1; /* Flex-centre the slotted content; otherwise the h2's line-height inflates the title-row height and content sits at the baseline. */ display: flex; align-items: center; line-height: 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::part(button) { color: var(--ds-drawer-title-fg, inherit); } .footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--ds-space-2); } `"
+          "default": "css` :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) { /* Fill the dialog explicitly; percentage heights don't resolve reliably through ds-card's display:block host. */ height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; box-shadow: none; /* border: 0 not transparent — a 1px transparent border still fills with the card's own background (background-clip: border-box). */ border: 0; border-radius: 0; gap: var(--ds-space-3); padding: var(--ds-drawer-card-padding, var(--ds-space-6)); } /* The scrolling body (ds-card::part(body)) + its scroll fade come from the shared cardBodyScrollFadeStyles. */ .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); min-height: var(--ds-drawer-title-min-height, auto); } .title-text { margin: 0; flex: 1; /* Flex-centre the slotted content; otherwise the h2's line-height inflates the title-row height and content sits at the baseline. */ display: flex; align-items: center; line-height: 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::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": [
@@ -12936,6 +13107,13 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "_scrollFade",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new ScrollFadeController( this, () => (this.shadowRoot ?.querySelector('ds-card') ?.shadowRoot?.querySelector('[part~=\"body\"]') as HTMLElement | null) ?? null, )"
+            },
             {
               "kind": "method",
               "name": "show",

package/dist/atoms/table/table-scroll-body.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-scroll-body.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/table/table-scroll-body.styles.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,qBAAqB,yBAmDjC,CAAC"}
+{"version":3,"file":"table-scroll-body.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/table/table-scroll-body.styles.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,qBAAqB,yBAsCjC,CAAC"}

package/dist/atoms/table/table-scroll-body.styles.js

@@ -2,12 +2,12 @@ import { css, unsafeCSS } from 'lit';
 import { breakpoint } from '@jsekulowicz/ds-tokens';
 const mobileBreakpoint = unsafeCSS(breakpoint.sm);
 // `scroll-body`: the body scrolls under a pinned header. The scrollbar is
-// hidden and overflow is signalled by the shared scroll-driven fade (see
-// shared/scroll-fade.styles). The header is pinned to a fixed
-// `--ds-table-header-height`, and the top fade is offset by that same height so
-// it dims the body just below the header rather than the header itself — no
-// measurement needed. The fade depth is about half a row so the cue stays
-// visible. Natural `table-layout: auto` column widths are preserved; the host
+// hidden and overflow is signalled by the shared scroll-fade mask (see
+// shared/scroll-fade.styles), whose edges are driven by ScrollFadeController.
+// The header is pinned to a fixed `--ds-table-header-height`, and the top fade
+// is offset by that same height (via `--ds-scroll-fade-offset`) so it dims the
+// body just below the header rather than the header itself — no measurement
+// needed. Natural `table-layout: auto` column widths are preserved; the host
 // needs a bounded height (e.g. `flex: 1` in a flex column).
 export const tableScrollBodyStyles = css `
   :host([scroll-body]) {
@@ -23,17 +23,10 @@ export const tableScrollBodyStyles = css `
        against the pinned header and the offset scroll-fade. */
     overscroll-behavior: none;
     scrollbar-width: none;
-    mask-image: linear-gradient(
-      to bottom,
-      rgb(0 0 0) 0,
-      rgb(0 0 0) var(--ds-table-header-height),
-      var(--ds-scroll-fade-top, rgb(0 0 0)) var(--ds-table-header-height),
-      rgb(0 0 0) calc(var(--ds-table-header-height) * 2),
-      rgb(0 0 0) calc(100% - var(--ds-table-header-height)),
-      var(--ds-scroll-fade-bottom, rgb(0 0 0)) 100%
-    );
-    animation: ds-scroll-fade linear;
-    animation-timeline: scroll(self);
+    /* Shared scroll-fade mask (driven by ScrollFadeController), offset below
+       the sticky header so it dims the body rather than the header. */
+    --ds-scroll-fade-offset: var(--ds-table-header-height);
+    mask-image: var(--ds-scroll-fade-mask);
   }
   :host([scroll-body]) .scroll::-webkit-scrollbar {
     display: none;
@@ -51,13 +44,7 @@ export const tableScrollBodyStyles = css `
      like ds-dialog / ds-drawer. */
   @container (max-width: ${mobileBreakpoint}) {
     :host([scroll-body]:not([responsive='scroll'])) .scroll {
-      mask-image: linear-gradient(
-        to bottom,
-        var(--ds-scroll-fade-top, rgb(0 0 0)) 0,
-        rgb(0 0 0) var(--ds-table-header-height),
-        rgb(0 0 0) calc(100% - var(--ds-table-header-height)),
-        var(--ds-scroll-fade-bottom, rgb(0 0 0)) 100%
-      );
+      --ds-scroll-fade-offset: 0px;
     }
   }
 `;

package/dist/atoms/table/table-scroll-body.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-scroll-body.styles.js","sourceRoot":"","sources":["../../../src/atoms/table/table-scroll-body.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,MAAM,gBAAgB,GAAG,SAAS,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;AAElD,0EAA0E;AAC1E,yEAAyE;AACzE,8DAA8D;AAC9D,gFAAgF;AAChF,4EAA4E;AAC5E,0EAA0E;AAC1E,8EAA8E;AAC9E,4DAA4D;AAC5D,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAwCb,gBAAgB;;;;;;;;;;;CAW1C,CAAC"}
+{"version":3,"file":"table-scroll-body.styles.js","sourceRoot":"","sources":["../../../src/atoms/table/table-scroll-body.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,MAAM,gBAAgB,GAAG,SAAS,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;AAElD,0EAA0E;AAC1E,uEAAuE;AACvE,8EAA8E;AAC9E,+EAA+E;AAC/E,+EAA+E;AAC/E,4EAA4E;AAC5E,6EAA6E;AAC7E,4DAA4D;AAC5D,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAiCb,gBAAgB;;;;;CAK1C,CAAC"}

package/dist/atoms/table/table.d.ts

@@ -45,6 +45,7 @@ export declare class DsTable<T extends TableRow = TableRow> extends DsElement {
     private _hasCaption;
     private _hasToolbar;
     private _hasFooter;
+    private readonly _scrollFade;
     connectedCallback(): void;
     disconnectedCallback(): void;
     render(): TemplateResult;

package/dist/atoms/table/table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../src/atoms/table/table.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGhD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,uBAAuB,CAAC;AAO/B,OAAO,KAAK,EAAE,WAAW,EAAE,mBAAmB,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAmB7F;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,qBAAa,OAAO,CAAC,CAAC,SAAS,QAAQ,GAAG,QAAQ,CAAE,SAAQ,SAAS;;IACnE,OAAgB,MAAM,4BAMpB;IAE8B,IAAI,EAAE,SAAS,CAAC,EAAE,CAAM;IACxB,OAAO,EAAE,SAAS,WAAW,CAAC,CAAC,CAAC,EAAE,CAAM;IACxC,SAAS,EAAE,cAAc,GAAG,IAAI,CAAQ;IACC,aAAa,UAAS;IAC3C,OAAO,UAAS;IACZ,YAAY,SAAK;IACd,eAAe,SAAK;IAC3C,MAAM,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,mBAAmB,CAAW;IACD,UAAU,UAAS;IAChF,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,UAAU,CAAS;IAI3B,iBAAiB,IAAI,IAAI;IAYzB,oBAAoB,IAAI,IAAI;IA6H5B,MAAM,IAAI,cAAc;CAUlC"}
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../src/atoms/table/table.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGhD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,uBAAuB,CAAC;AAQ/B,OAAO,KAAK,EAAE,WAAW,EAAE,mBAAmB,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAmB7F;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,qBAAa,OAAO,CAAC,CAAC,SAAS,QAAQ,GAAG,QAAQ,CAAE,SAAQ,SAAS;;IACnE,OAAgB,MAAM,4BAMpB;IAE8B,IAAI,EAAE,SAAS,CAAC,EAAE,CAAM;IACxB,OAAO,EAAE,SAAS,WAAW,CAAC,CAAC,CAAC,EAAE,CAAM;IACxC,SAAS,EAAE,cAAc,GAAG,IAAI,CAAQ;IACC,aAAa,UAAS;IAC3C,OAAO,UAAS;IACZ,YAAY,SAAK;IACd,eAAe,SAAK;IAC3C,MAAM,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,mBAAmB,CAAW;IACD,UAAU,UAAS;IAChF,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,UAAU,CAAS;IAEpC,OAAO,CAAC,QAAQ,CAAC,WAAW,CAG1B;IAIO,iBAAiB,IAAI,IAAI;IAYzB,oBAAoB,IAAI,IAAI;IA6H5B,MAAM,IAAI,cAAc;CAUlC"}

package/dist/atoms/table/table.js

@@ -13,6 +13,7 @@ import { tableStyles } from './table.styles.js';
 import { tableResponsiveStyles } from './table-responsive.styles.js';
 import { tableScrollBodyStyles } from './table-scroll-body.styles.js';
 import { scrollFadeStyles } from '../../shared/scroll-fade.styles.js';
+import { ScrollFadeController } from '../../shared/scroll-fade-controller.js';
 import { renderTableSkeleton } from './table-skeleton.js';
 import { renderTableBody, renderTableHeader } from './table-rendering.js';
 const INTERACTIVE_TAGS = new Set([
@@ -70,6 +71,7 @@ export class DsTable extends DsElement {
         this._hasCaption = false;
         this._hasToolbar = false;
         this._hasFooter = false;
+        this._scrollFade = new ScrollFadeController(this, () => this.shadowRoot?.querySelector('.scroll'));
         this.#slotObserver = null;
         this.#syncSlotPresence = () => {
             this._hasCaption = this.querySelector('[slot="caption"]') !== null;

package/dist/atoms/table/table.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.js","sourceRoot":"","sources":["../../../src/atoms/table/table.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"table.js","sourceRoot":"","sources":["../../../src/atoms/table/table.ts"],"names":[],"mappings":"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"}

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

@@ -26,6 +26,7 @@ export declare class DsDialog extends DsElement {
     dismissible: boolean;
     size: DialogSize;
     private _dialogEl?;
+    private readonly _scrollFade;
     show(): void;
     close(returnValue?: string): void;
     updated(changed: PropertyValues): void;

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

@@ -1 +1 @@
-{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/molecules/dialog/dialog.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;AAI1C,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5C;;;;;;;;;;;;;GAaG;AACH,qBAAa,QAAS,SAAQ,SAAS;;IACrC,OAAgB,MAAM,4BAAyD;IAEnC,IAAI,UAAS;IAC7C,KAAK,SAAM;IACqB,WAAW,UAAQ;IAClC,IAAI,EAAE,UAAU,CAAQ;IAEpC,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"}
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/molecules/dialog/dialog.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;AAK1C,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5C;;;;;;;;;;;;;GAaG;AACH,qBAAa,QAAS,SAAQ,SAAS;;IACrC,OAAgB,MAAM,4BAKpB;IAE0C,IAAI,UAAS;IAC7C,KAAK,SAAM;IACqB,WAAW,UAAQ;IAClC,IAAI,EAAE,UAAU,CAAQ;IAEpC,OAAO,CAAC,SAAS,CAAC,CAAoB;IAEvD,OAAO,CAAC,QAAQ,CAAC,WAAW,CAM1B;IAEF,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"}

package/dist/molecules/dialog/dialog.js

@@ -12,7 +12,8 @@ import '../card/define.js';
 import '../../atoms/button/define.js';
 import '../../atoms/icon/icons/x-mark.js';
 import { dialogStyles } from './dialog.styles.js';
-import { scrollFadeStyles } from '../../shared/scroll-fade.styles.js';
+import { cardBodyScrollFadeStyles, scrollFadeStyles } from '../../shared/scroll-fade.styles.js';
+import { ScrollFadeController } from '../../shared/scroll-fade-controller.js';
 /**
  * @tag ds-dialog
  * @summary Modal dialog built on the native `<dialog>` element. Header and footer are sticky; only the body scrolls.
@@ -34,6 +35,9 @@ export class DsDialog extends DsElement {
         this.label = '';
         this.dismissible = true;
         this.size = 'md';
+        this._scrollFade = new ScrollFadeController(this, () => this.shadowRoot
+            ?.querySelector('ds-card')
+            ?.shadowRoot?.querySelector('[part~="body"]') ?? null);
         this.#onBackdropClick = (event) => {
             if (!this.dismissible)
                 return;
@@ -57,7 +61,12 @@ export class DsDialog extends DsElement {
             this.close();
         };
     }
-    static { this.styles = [...DsElement.styles, scrollFadeStyles, dialogStyles]; }
+    static { this.styles = [
+        ...DsElement.styles,
+        scrollFadeStyles,
+        cardBodyScrollFadeStyles,
+        dialogStyles,
+    ]; }
     show() {
         this.open = true;
     }

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

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../src/molecules/dialog/dialog.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../src/molecules/dialog/dialog.ts"],"names":[],"mappings":"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"}

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

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

@@ -45,32 +45,8 @@ export const dialogStyles = css `
     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 shared scroll-driven
-       fade (see shared/scroll-fade.styles). */
-    scrollbar-width: none;
-    mask-image: linear-gradient(
-      to bottom,
-      var(--ds-scroll-fade-top, 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-scroll-fade-bottom, rgb(0 0 0)) 100%
-    );
-    animation: ds-scroll-fade linear;
-    animation-timeline: scroll(self);
-  }
-  ds-card::part(body)::-webkit-scrollbar {
-    display: none;
-  }
+  /* The scrolling body (ds-card::part(body)) + its scroll fade come from the
+     shared cardBodyScrollFadeStyles. */
   .title-row {
     display: flex;
     align-items: flex-start;

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyG9B,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiF9B,CAAC"}

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

@@ -28,6 +28,7 @@ export declare class DsDrawer extends DsElement {
     size: DrawerSize;
     side: DrawerSide;
     private _dialogEl?;
+    private readonly _scrollFade;
     show(): void;
     close(returnValue?: string): void;
     updated(changed: PropertyValues): void;

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

@@ -1 +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;AAI1C,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,4BAAyD;IAEnC,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"}
+{"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;AAK1C,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,4BAKpB;IAE0C,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,OAAO,CAAC,QAAQ,CAAC,WAAW,CAM1B;IAEF,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"}

package/dist/molecules/drawer/drawer.js

@@ -12,7 +12,8 @@ import '../card/define.js';
 import '../../atoms/button/define.js';
 import '../../atoms/icon/icons/x-mark.js';
 import { drawerStyles } from './drawer.styles.js';
-import { scrollFadeStyles } from '../../shared/scroll-fade.styles.js';
+import { cardBodyScrollFadeStyles, scrollFadeStyles } from '../../shared/scroll-fade.styles.js';
+import { ScrollFadeController } from '../../shared/scroll-fade-controller.js';
 /**
  * @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.
@@ -35,6 +36,9 @@ export class DsDrawer extends DsElement {
         this.dismissible = true;
         this.size = 'sm';
         this.side = 'start';
+        this._scrollFade = new ScrollFadeController(this, () => this.shadowRoot
+            ?.querySelector('ds-card')
+            ?.shadowRoot?.querySelector('[part~="body"]') ?? null);
         this.#onBackdropClick = (event) => {
             if (!this.dismissible)
                 return;
@@ -58,7 +62,12 @@ export class DsDrawer extends DsElement {
             this.close();
         };
     }
-    static { this.styles = [...DsElement.styles, scrollFadeStyles, drawerStyles]; }
+    static { this.styles = [
+        ...DsElement.styles,
+        scrollFadeStyles,
+        cardBodyScrollFadeStyles,
+        drawerStyles,
+    ]; }
     show() {
         this.open = true;
     }

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

@@ -1 +1 @@
-{"version":3,"file":"drawer.js","sourceRoot":"","sources":["../../../src/molecules/drawer/drawer.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"drawer.js","sourceRoot":"","sources":["../../../src/molecules/drawer/drawer.ts"],"names":[],"mappings":"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"}

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

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

@@ -79,30 +79,8 @@ export const drawerStyles = css `
     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-scroll-fade-top, 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-scroll-fade-bottom, rgb(0 0 0)) 100%
-    );
-    animation: ds-scroll-fade linear;
-    animation-timeline: scroll(self);
-  }
-  ds-card::part(body)::-webkit-scrollbar {
-    display: none;
-  }
+  /* The scrolling body (ds-card::part(body)) + its scroll fade come from the
+     shared cardBodyScrollFadeStyles. */
   .title-row {
     display: flex;
     align-items: center;

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8I9B,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwH9B,CAAC"}

package/dist/shared/scroll-fade-controller.d.ts

@@ -0,0 +1,9 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+export declare class ScrollFadeController implements ReactiveController {
+    #private;
+    constructor(host: ReactiveControllerHost, getScroller: () => HTMLElement | null | undefined);
+    hostConnected(): void;
+    hostUpdated(): void;
+    hostDisconnected(): void;
+}
+//# sourceMappingURL=scroll-fade-controller.d.ts.map

package/dist/shared/scroll-fade-controller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-fade-controller.d.ts","sourceRoot":"","sources":["../../src/shared/scroll-fade-controller.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,KAAK,CAAC;AAetE,qBAAa,oBAAqB,YAAW,kBAAkB;;gBAOjD,IAAI,EAAE,sBAAsB,EAAE,WAAW,EAAE,MAAM,WAAW,GAAG,IAAI,GAAG,SAAS;IAK3F,aAAa,IAAI,IAAI;IAIrB,WAAW,IAAI,IAAI;IAInB,gBAAgB,IAAI,IAAI;CA+DzB"}

package/dist/shared/scroll-fade-controller.js

@@ -0,0 +1,92 @@
+// Drives the `--ds-scroll-fade-top` / `--ds-scroll-fade-bottom` custom
+// properties on a scroll container from its REAL scroll state, so the
+// mask-fade (see the consuming component's styles) shows:
+//   • the bottom edge fading while there is more content below,
+//   • the top edge fading once content has scrolled above,
+//   • and NOTHING when the content fits (not scrollable).
+// This replaces `animation-timeline: scroll(self)`, which some engines park at
+// an extreme keyframe on non-scrollable content (painting a phantom fade). It
+// recomputes on scroll, on resize (ResizeObserver) and on content changes
+// (MutationObserver), all rAF-throttled.
+const OPAQUE = 'rgb(0 0 0)';
+const CLEAR = 'rgb(0 0 0 / 0)';
+export class ScrollFadeController {
+    #getScroller;
+    #scroller = null;
+    #resize;
+    #mutation;
+    #frame = 0;
+    constructor(host, getScroller) {
+        this.#getScroller = getScroller;
+        host.addController(this);
+    }
+    hostConnected() {
+        this.#tryAttach();
+    }
+    hostUpdated() {
+        this.#tryAttach();
+    }
+    hostDisconnected() {
+        this.#detach();
+    }
+    #tryAttach(attempt = 0) {
+        const el = this.#getScroller();
+        if (el && el === this.#scroller) {
+            this.#schedule();
+            return;
+        }
+        if (!el) {
+            // The scroller may live in a nested shadow root that hasn't rendered yet.
+            if (attempt < 10)
+                requestAnimationFrame(() => this.#tryAttach(attempt + 1));
+            return;
+        }
+        this.#detach();
+        this.#scroller = el;
+        el.addEventListener('scroll', this.#onScroll, { passive: true });
+        if (typeof ResizeObserver !== 'undefined') {
+            this.#resize = new ResizeObserver(this.#onScroll);
+            this.#resize.observe(el);
+            if (el.firstElementChild)
+                this.#resize.observe(el.firstElementChild);
+        }
+        if (typeof MutationObserver !== 'undefined') {
+            this.#mutation = new MutationObserver(this.#onScroll);
+            this.#mutation.observe(el, { childList: true, subtree: true, characterData: true });
+        }
+        this.#schedule();
+    }
+    #detach() {
+        this.#scroller?.removeEventListener('scroll', this.#onScroll);
+        this.#resize?.disconnect();
+        this.#mutation?.disconnect();
+        this.#resize = undefined;
+        this.#mutation = undefined;
+        this.#scroller = null;
+        if (this.#frame) {
+            cancelAnimationFrame(this.#frame);
+            this.#frame = 0;
+        }
+    }
+    #onScroll = () => this.#schedule();
+    #schedule() {
+        if (this.#frame)
+            return;
+        this.#frame = requestAnimationFrame(() => {
+            this.#frame = 0;
+            this.#update();
+        });
+    }
+    #update() {
+        const el = this.#scroller;
+        if (!el || !el.isConnected)
+            return;
+        const max = el.scrollHeight - el.clientHeight;
+        const scrollable = max > 1;
+        const atTop = el.scrollTop <= 1;
+        const atBottom = el.scrollTop >= max - 1;
+        el.style.setProperty('--ds-scroll-fade-top', scrollable && !atTop ? CLEAR : OPAQUE);
+        el.style.setProperty('--ds-scroll-fade-bottom', scrollable && !atBottom ? CLEAR : OPAQUE);
+    }
+}
+//# sourceMappingURL=scroll-fade-controller.js.map

package/dist/shared/scroll-fade-controller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-fade-controller.js","sourceRoot":"","sources":["../../src/shared/scroll-fade-controller.ts"],"names":[],"mappings":"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"}

package/dist/shared/scroll-fade.styles.d.ts

@@ -1,2 +1,3 @@
 export declare const scrollFadeStyles: import("lit").CSSResult;
+export declare const cardBodyScrollFadeStyles: import("lit").CSSResult;
 //# sourceMappingURL=scroll-fade.styles.d.ts.map

package/dist/shared/scroll-fade.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-fade.styles.d.ts","sourceRoot":"","sources":["../../src/shared/scroll-fade.styles.ts"],"names":[],"mappings":"AAmBA,eAAO,MAAM,gBAAgB,yBA2B5B,CAAC"}
+{"version":3,"file":"scroll-fade.styles.d.ts","sourceRoot":"","sources":["../../src/shared/scroll-fade.styles.ts"],"names":[],"mappings":"AAcA,eAAO,MAAM,gBAAgB,yBAc5B,CAAC;AAIF,eAAO,MAAM,wBAAwB,yBAiBpC,CAAC"}

package/dist/shared/scroll-fade.styles.js

@@ -1,47 +1,49 @@
 import { css } from 'lit';
-// Shared scroll-driven fade. Registers the fade-colour custom properties and a
-// keyframe that flips them while scrolling. The resting 0% keyframe paints NO
-// fade: a scroll-progress timeline on a NON-scrollable container is meant to be
-// inactive (so the fade stays hidden), but some engines instead clamp it to 0%
-// — leaving a phantom bottom fade on content that doesn't actually scroll. By
-// making 0% the no-fade state, a panel that fits its content never fades on any
-// engine. The 100% (scrolled-to-bottom) keyframe still shows the top fade since
-// that position is only reachable when the content really is scrollable. Add
-// `scrollFadeStyles` to a component's styles, then on the scroll container:
-//   scrollbar-width: none;
-//   mask-image: linear-gradient(to bottom,
-//     var(--ds-scroll-fade-top, rgb(0 0 0)) ...,
-//     var(--ds-scroll-fade-bottom, rgb(0 0 0)) ...);
-//   animation: ds-scroll-fade linear;
-//   animation-timeline: scroll(self);
-// and hide the WebKit scrollbar with `::-webkit-scrollbar { display: none }`.
-// Used by ds-dialog, ds-drawer and ds-table (`scroll-body`).
+// Shared scroll fade. The fade colours (`--ds-scroll-fade-top` /
+// `--ds-scroll-fade-bottom`) are set per scroll position by
+// `ScrollFadeController`. The gradient is exposed as `--ds-scroll-fade-mask`
+// so any scroll container can apply it with `mask-image: var(--ds-scroll-fade-mask)`.
+//
+// IMPORTANT: the gradient must be DECLARED on the scroll container itself, not
+// on :host — a custom property resolves its inner var()s against the element it
+// is declared on, and the controller sets the fade colours on the scroller. So
+// this rule targets the two scroller selectors directly (a component only
+// matches its own one). `--ds-scroll-fade-depth` tunes the fade size and
+// `--ds-scroll-fade-offset` shifts the top fade past a sticky header; both
+// inherit, so a host can override them.
 export const scrollFadeStyles = css `
-  /* @property registration so the scroll-driven keyframe can interpolate the
-     fades as colours. Near-instant flips keep the transitions binary. */
-  @property --ds-scroll-fade-top {
-    syntax: '<color>';
-    inherits: false;
-    initial-value: rgb(0 0 0);
+  ds-card::part(body),
+  .scroll {
+    --ds-scroll-fade-mask: linear-gradient(
+      to bottom,
+      rgb(0 0 0) 0,
+      rgb(0 0 0) var(--ds-scroll-fade-offset, 0px),
+      var(--ds-scroll-fade-top, rgb(0 0 0)) var(--ds-scroll-fade-offset, 0px),
+      rgb(0 0 0)
+        calc(var(--ds-scroll-fade-offset, 0px) + var(--ds-scroll-fade-depth, var(--ds-space-8))),
+      rgb(0 0 0) calc(100% - var(--ds-scroll-fade-depth, var(--ds-space-8))),
+      var(--ds-scroll-fade-bottom, rgb(0 0 0)) 100%
+    );
   }
-  @property --ds-scroll-fade-bottom {
-    syntax: '<color>';
-    inherits: false;
-    initial-value: rgb(0 0 0);
+`;
+// The scrolling body shared by the ds-card-based panels (ds-dialog, ds-drawer):
+// identical flex / overflow / inline padding plus the masked scroll fade.
+export const cardBodyScrollFadeStyles = css `
+  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: var(--ds-scroll-fade-mask);
   }
-  @keyframes ds-scroll-fade {
-    0% {
-      --ds-scroll-fade-top: rgb(0 0 0);
-      --ds-scroll-fade-bottom: rgb(0 0 0);
-    }
-    0.001%, 99.999% {
-      --ds-scroll-fade-top: rgb(0 0 0 / 0);
-      --ds-scroll-fade-bottom: rgb(0 0 0 / 0);
-    }
-    100% {
-      --ds-scroll-fade-top: rgb(0 0 0 / 0);
-      --ds-scroll-fade-bottom: rgb(0 0 0);
-    }
+  ds-card::part(body)::-webkit-scrollbar {
+    display: none;
   }
 `;
 //# sourceMappingURL=scroll-fade.styles.js.map

package/dist/shared/scroll-fade.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-fade.styles.js","sourceRoot":"","sources":["../../src/shared/scroll-fade.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,+EAA+E;AAC/E,8EAA8E;AAC9E,gFAAgF;AAChF,+EAA+E;AAC/E,8EAA8E;AAC9E,gFAAgF;AAChF,gFAAgF;AAChF,6EAA6E;AAC7E,4EAA4E;AAC5E,2BAA2B;AAC3B,2CAA2C;AAC3C,iDAAiD;AACjD,qDAAqD;AACrD,sCAAsC;AACtC,sCAAsC;AACtC,8EAA8E;AAC9E,6DAA6D;AAC7D,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BlC,CAAC"}
+{"version":3,"file":"scroll-fade.styles.js","sourceRoot":"","sources":["../../src/shared/scroll-fade.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,iEAAiE;AACjE,4DAA4D;AAC5D,6EAA6E;AAC7E,sFAAsF;AACtF,EAAE;AACF,+EAA+E;AAC/E,gFAAgF;AAChF,+EAA+E;AAC/E,0EAA0E;AAC1E,yEAAyE;AACzE,2EAA2E;AAC3E,wCAAwC;AACxC,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;CAclC,CAAC;AAEF,gFAAgF;AAChF,0EAA0E;AAC1E,MAAM,CAAC,MAAM,wBAAwB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;CAiB1C,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsekulowicz/ds-components",
-  "version": "0.13.1",
+  "version": "0.13.3",
   "description": "Lit web components for the Design System Library (atoms, molecules, organisms, templates, pages).",
   "license": "UNLICENSED",
   "repository": {