@jsekulowicz/ds-components 0.13.0 → 0.13.1

package/custom-elements.json

@@ -852,7 +852,7 @@
         {
           "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); } 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` /* @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); } } `"
         }
       ],
       "exports": [
@@ -7445,7 +7445,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); } `"
+          "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% ); } } `"
         }
       ],
       "exports": [

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":"AAUA,eAAO,MAAM,qBAAqB,yBAoCjC,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,yBAmDjC,CAAC"}

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

@@ -1,4 +1,6 @@
-import { css } from 'lit';
+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
@@ -43,5 +45,20 @@ export const tableScrollBodyStyles = css `
     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%
+      );
+    }
+  }
 `;
 //# sourceMappingURL=table-scroll-body.styles.js.map

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,MAAM,KAAK,CAAC;AAE1B,0EAA0E;AAC1E,yEAAyE;AACzE,8DAA8D;AAC9D,gFAAgF;AAChF,4EAA4E;AAC5E,0EAA0E;AAC1E,8EAA8E;AAC9E,4DAA4D;AAC5D,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCvC,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,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"}

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":"AAcA,eAAO,MAAM,gBAAgB,yBA2B5B,CAAC"}
+{"version":3,"file":"scroll-fade.styles.d.ts","sourceRoot":"","sources":["../../src/shared/scroll-fade.styles.ts"],"names":[],"mappings":"AAmBA,eAAO,MAAM,gBAAgB,yBA2B5B,CAAC"}

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

@@ -1,7 +1,12 @@
 import { css } from 'lit';
 // Shared scroll-driven fade. Registers the fade-colour custom properties and a
-// keyframe that flips them at the scroll extremes — top fade hidden at
-// scroll-top, bottom fade hidden at scroll-end, both visible in between. Add
+// 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,
@@ -27,7 +32,7 @@ export const scrollFadeStyles = css `
   @keyframes ds-scroll-fade {
     0% {
       --ds-scroll-fade-top: rgb(0 0 0);
-      --ds-scroll-fade-bottom: rgb(0 0 0 / 0);
+      --ds-scroll-fade-bottom: rgb(0 0 0);
     }
     0.001%, 99.999% {
       --ds-scroll-fade-top: rgb(0 0 0 / 0);

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,uEAAuE;AACvE,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,+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"}

package/package.json

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