@jsekulowicz/ds-components 0.13.2 → 0.14.0

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":"AAcA,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,42 +1,49 @@
 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
-// `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);
-    }
-    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,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,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.2",
+  "version": "0.14.0",
   "description": "Lit web components for the Design System Library (atoms, molecules, organisms, templates, pages).",
   "license": "UNLICENSED",
   "repository": {
@@ -48,6 +48,13 @@
     "./button/define": {
       "import": "./dist/atoms/button/define.js"
     },
+    "./segmented-control": {
+      "types": "./dist/atoms/segmented-control/index.d.ts",
+      "import": "./dist/atoms/segmented-control/index.js"
+    },
+    "./segmented-control/define": {
+      "import": "./dist/atoms/segmented-control/define.js"
+    },
     "./tooltip": {
       "types": "./dist/atoms/tooltip/index.d.ts",
       "import": "./dist/atoms/tooltip/index.js"
@@ -329,7 +336,7 @@
   "dependencies": {
     "lit": "^3.2.1",
     "@jsekulowicz/ds-core": "0.5.0",
-    "@jsekulowicz/ds-tokens": "0.5.0"
+    "@jsekulowicz/ds-tokens": "0.14.0"
   },
   "devDependencies": {
     "heroicons": "2.2.0",