@jsekulowicz/ds-components 0.12.0 → 0.13.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +70 -3
- package/dist/atoms/table/table-scroll-body.styles.d.ts +2 -0
- package/dist/atoms/table/table-scroll-body.styles.d.ts.map +1 -0
- package/dist/atoms/table/table-scroll-body.styles.js +64 -0
- package/dist/atoms/table/table-scroll-body.styles.js.map +1 -0
- package/dist/atoms/table/table.d.ts +3 -0
- package/dist/atoms/table/table.d.ts.map +1 -1
- package/dist/atoms/table/table.js +15 -1
- package/dist/atoms/table/table.js.map +1 -1
- package/dist/atoms/table/table.styles.d.ts.map +1 -1
- package/dist/atoms/table/table.styles.js +7 -2
- package/dist/atoms/table/table.styles.js.map +1 -1
- package/dist/molecules/dialog/dialog.d.ts.map +1 -1
- package/dist/molecules/dialog/dialog.js +2 -1
- package/dist/molecules/dialog/dialog.js.map +1 -1
- package/dist/molecules/dialog/dialog.styles.d.ts.map +1 -1
- package/dist/molecules/dialog/dialog.styles.js +5 -34
- package/dist/molecules/dialog/dialog.styles.js.map +1 -1
- package/dist/molecules/drawer/drawer.d.ts.map +1 -1
- package/dist/molecules/drawer/drawer.js +2 -1
- package/dist/molecules/drawer/drawer.js.map +1 -1
- package/dist/molecules/drawer/drawer.styles.d.ts.map +1 -1
- package/dist/molecules/drawer/drawer.styles.js +3 -29
- package/dist/molecules/drawer/drawer.styles.js.map +1 -1
- package/dist/shared/scroll-fade.styles.d.ts +2 -0
- package/dist/shared/scroll-fade.styles.d.ts.map +1 -0
- package/dist/shared/scroll-fade.styles.js +47 -0
- package/dist/shared/scroll-fade.styles.js.map +1 -0
- package/package.json +1 -1
package/custom-elements.json
CHANGED
|
@@ -845,6 +845,27 @@
|
|
|
845
845
|
}
|
|
846
846
|
]
|
|
847
847
|
},
|
|
848
|
+
{
|
|
849
|
+
"kind": "javascript-module",
|
|
850
|
+
"path": "src/shared/scroll-fade.styles.ts",
|
|
851
|
+
"declarations": [
|
|
852
|
+
{
|
|
853
|
+
"kind": "variable",
|
|
854
|
+
"name": "scrollFadeStyles",
|
|
855
|
+
"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); } } `"
|
|
856
|
+
}
|
|
857
|
+
],
|
|
858
|
+
"exports": [
|
|
859
|
+
{
|
|
860
|
+
"kind": "js",
|
|
861
|
+
"name": "scrollFadeStyles",
|
|
862
|
+
"declaration": {
|
|
863
|
+
"name": "scrollFadeStyles",
|
|
864
|
+
"module": "src/shared/scroll-fade.styles.ts"
|
|
865
|
+
}
|
|
866
|
+
}
|
|
867
|
+
]
|
|
868
|
+
},
|
|
848
869
|
{
|
|
849
870
|
"kind": "javascript-module",
|
|
850
871
|
"path": "src/shared/virtual-list.ts",
|
|
@@ -7417,6 +7438,27 @@
|
|
|
7417
7438
|
}
|
|
7418
7439
|
]
|
|
7419
7440
|
},
|
|
7441
|
+
{
|
|
7442
|
+
"kind": "javascript-module",
|
|
7443
|
+
"path": "src/atoms/table/table-scroll-body.styles.ts",
|
|
7444
|
+
"declarations": [
|
|
7445
|
+
{
|
|
7446
|
+
"kind": "variable",
|
|
7447
|
+
"name": "tableScrollBodyStyles",
|
|
7448
|
+
"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% ); } } `"
|
|
7449
|
+
}
|
|
7450
|
+
],
|
|
7451
|
+
"exports": [
|
|
7452
|
+
{
|
|
7453
|
+
"kind": "js",
|
|
7454
|
+
"name": "tableScrollBodyStyles",
|
|
7455
|
+
"declaration": {
|
|
7456
|
+
"name": "tableScrollBodyStyles",
|
|
7457
|
+
"module": "src/atoms/table/table-scroll-body.styles.ts"
|
|
7458
|
+
}
|
|
7459
|
+
}
|
|
7460
|
+
]
|
|
7461
|
+
},
|
|
7420
7462
|
{
|
|
7421
7463
|
"kind": "javascript-module",
|
|
7422
7464
|
"path": "src/atoms/table/table-skeleton.ts",
|
|
@@ -7596,7 +7638,7 @@
|
|
|
7596
7638
|
{
|
|
7597
7639
|
"kind": "variable",
|
|
7598
7640
|
"name": "tableStyles",
|
|
7599
|
-
"default": "css` :host { display: block; container-type: inline-size; width: 100%; color: var(--ds-color-fg); font-family: var(--ds-font-body); font-size: var(--ds-font-size-sm); } .toolbar { padding: var(--ds-space-3) 0; } .scroll { position: relative; width: 100%; overflow-x: auto; border: 1px solid var(--ds-color-border-subtle); border-radius: var(--ds-radius-md); background: var(--ds-color-bg); } table { width: 100%; border-collapse: collapse; text-align: left; } caption { caption-side: top; padding: var(--ds-space-3); color: var(--ds-color-fg-muted); text-align: left; } caption:empty { display: none; padding: 0; } thead th { background: var(--ds-color-bg-subtle); color: var(--ds-color-fg); font-weight: var(--ds-font-weight-medium); padding: var(--ds-space-3); border-bottom: 1px solid var(--ds-color-border); white-space: nowrap; } tbody td { padding: var(--ds-space-3); border-bottom: 1px solid var(--ds-color-border-subtle); vertical-align: middle; } tbody tr:last-child td { border-bottom: 0; } tbody tr:nth-child(even) td { background: var(--ds-color-bg-subtle); } .align-left { text-align: left; } .align-right { text-align: right; } .align-center { text-align: center; } tbody tr.clickable { cursor: pointer; outline: none; } tbody tr.clickable:hover td { background: var(--ds-color-bg-muted); } tbody tr.clickable:focus-visible { box-shadow: inset 0 0 0 2px var(--ds-color-focus); } .skeleton-table { min-width: 32rem; } .skeleton-label { display: none; } .loading { position: absolute; inset: 0; display: grid; place-items: center; min-height: 100%; background: color-mix(in srgb, var(--ds-color-bg) 78%, transparent); color: var(--ds-color-fg); pointer-events: auto; } .loading span { padding: var(--ds-space-2) var(--ds-space-3); border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-sm); background: var(--ds-color-bg); box-shadow: var(--ds-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.12)); font-weight: var(--ds-font-weight-medium); } .empty { padding: var(--ds-space-6); text-align: center; color: var(--ds-color-fg-muted); } .footer { padding: var(--ds-space-3) 0; } `"
|
|
7641
|
+
"default": "css` :host { display: block; container-type: inline-size; width: 100%; color: var(--ds-color-fg); font-family: var(--ds-font-body); font-size: var(--ds-font-size-sm); /* Header row height (used as the top scroll-fade offset in scroll-body mode). Single-line by construction; override to taste. */ --ds-table-header-height: calc(var(--ds-space-2) * 2 + var(--ds-font-size-sm) * 1.5 + 1px); } .toolbar { padding: var(--ds-space-3) 0; } .scroll { position: relative; width: 100%; overflow-x: auto; border: 1px solid var(--ds-color-border-subtle); border-radius: var(--ds-radius-md); background: var(--ds-color-bg); } table { width: 100%; border-collapse: collapse; text-align: left; } caption { caption-side: top; padding: var(--ds-space-3); color: var(--ds-color-fg-muted); text-align: left; } caption:empty { display: none; padding: 0; } thead th { background: var(--ds-color-bg-subtle); color: var(--ds-color-fg); font-weight: var(--ds-font-weight-medium); padding: var(--ds-space-2) var(--ds-space-3); border-bottom: 1px solid var(--ds-color-border); /* Headers never wrap, so the header row keeps a constant height (a long header widens its column / scrolls rather than growing taller). */ white-space: nowrap; } tbody td { padding: var(--ds-space-2) var(--ds-space-3); border-bottom: 1px solid var(--ds-color-border-subtle); vertical-align: middle; } tbody tr:last-child td { border-bottom: 0; } tbody tr:nth-child(even) td { background: var(--ds-color-bg-subtle); } .align-left { text-align: left; } .align-right { text-align: right; } .align-center { text-align: center; } tbody tr.clickable { cursor: pointer; outline: none; } tbody tr.clickable:hover td { background: var(--ds-color-bg-muted); } tbody tr.clickable:focus-visible { box-shadow: inset 0 0 0 2px var(--ds-color-focus); } .skeleton-table { min-width: 32rem; } .skeleton-label { display: none; } .loading { position: absolute; inset: 0; display: grid; place-items: center; min-height: 100%; background: color-mix(in srgb, var(--ds-color-bg) 78%, transparent); color: var(--ds-color-fg); pointer-events: auto; } .loading span { padding: var(--ds-space-2) var(--ds-space-3); border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-sm); background: var(--ds-color-bg); box-shadow: var(--ds-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.12)); font-weight: var(--ds-font-weight-medium); } .empty { padding: var(--ds-space-6); text-align: center; color: var(--ds-color-fg-muted); } .footer { padding: var(--ds-space-3) 0; } `"
|
|
7600
7642
|
}
|
|
7601
7643
|
],
|
|
7602
7644
|
"exports": [
|
|
@@ -7618,6 +7660,12 @@
|
|
|
7618
7660
|
"kind": "class",
|
|
7619
7661
|
"description": "",
|
|
7620
7662
|
"name": "DsTable",
|
|
7663
|
+
"cssProperties": [
|
|
7664
|
+
{
|
|
7665
|
+
"description": "Header row height; in scroll-body mode it pins the header and offsets the top scroll-fade below it. Defaults to a single line of header text.",
|
|
7666
|
+
"name": "--ds-table-header-height"
|
|
7667
|
+
}
|
|
7668
|
+
],
|
|
7621
7669
|
"cssParts": [
|
|
7622
7670
|
{
|
|
7623
7671
|
"description": "The internal `<table>` element.",
|
|
@@ -7778,6 +7826,16 @@
|
|
|
7778
7826
|
"attribute": "responsive",
|
|
7779
7827
|
"reflects": true
|
|
7780
7828
|
},
|
|
7829
|
+
{
|
|
7830
|
+
"kind": "field",
|
|
7831
|
+
"name": "scrollBody",
|
|
7832
|
+
"type": {
|
|
7833
|
+
"text": "boolean"
|
|
7834
|
+
},
|
|
7835
|
+
"default": "false",
|
|
7836
|
+
"attribute": "scroll-body",
|
|
7837
|
+
"reflects": true
|
|
7838
|
+
},
|
|
7781
7839
|
{
|
|
7782
7840
|
"kind": "field",
|
|
7783
7841
|
"name": "_hasCaption",
|
|
@@ -7952,6 +8010,15 @@
|
|
|
7952
8010
|
"default": "'stack'",
|
|
7953
8011
|
"fieldName": "responsive"
|
|
7954
8012
|
},
|
|
8013
|
+
{
|
|
8014
|
+
"description": "When set, the body scrolls under a pinned header (the footer slot stays pinned too). The scrollbar is hidden and overflow is signalled by top/bottom scroll-fades, matching ds-dialog/ds-drawer. Natural column widths are preserved; the host must be given a bounded height by its container.",
|
|
8015
|
+
"name": "scroll-body",
|
|
8016
|
+
"type": {
|
|
8017
|
+
"text": "boolean"
|
|
8018
|
+
},
|
|
8019
|
+
"default": "false",
|
|
8020
|
+
"fieldName": "scrollBody"
|
|
8021
|
+
},
|
|
7955
8022
|
{
|
|
7956
8023
|
"name": "clickable-rows",
|
|
7957
8024
|
"type": {
|
|
@@ -12494,7 +12561,7 @@
|
|
|
12494
12561
|
{
|
|
12495
12562
|
"kind": "variable",
|
|
12496
12563
|
"name": "dialogStyles",
|
|
12497
|
-
"default": "css`
|
|
12564
|
+
"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); } `"
|
|
12498
12565
|
}
|
|
12499
12566
|
],
|
|
12500
12567
|
"exports": [
|
|
@@ -12757,7 +12824,7 @@
|
|
|
12757
12824
|
{
|
|
12758
12825
|
"kind": "variable",
|
|
12759
12826
|
"name": "drawerStyles",
|
|
12760
|
-
"default": "css`
|
|
12827
|
+
"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); } `"
|
|
12761
12828
|
}
|
|
12762
12829
|
],
|
|
12763
12830
|
"exports": [
|
|
@@ -0,0 +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"}
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import { css, unsafeCSS } from 'lit';
|
|
2
|
+
import { breakpoint } from '@jsekulowicz/ds-tokens';
|
|
3
|
+
const mobileBreakpoint = unsafeCSS(breakpoint.sm);
|
|
4
|
+
// `scroll-body`: the body scrolls under a pinned header. The scrollbar is
|
|
5
|
+
// hidden and overflow is signalled by the shared scroll-driven fade (see
|
|
6
|
+
// shared/scroll-fade.styles). The header is pinned to a fixed
|
|
7
|
+
// `--ds-table-header-height`, and the top fade is offset by that same height so
|
|
8
|
+
// it dims the body just below the header rather than the header itself — no
|
|
9
|
+
// measurement needed. The fade depth is about half a row so the cue stays
|
|
10
|
+
// visible. Natural `table-layout: auto` column widths are preserved; the host
|
|
11
|
+
// needs a bounded height (e.g. `flex: 1` in a flex column).
|
|
12
|
+
export const tableScrollBodyStyles = css `
|
|
13
|
+
:host([scroll-body]) {
|
|
14
|
+
display: flex;
|
|
15
|
+
flex-direction: column;
|
|
16
|
+
min-height: 0;
|
|
17
|
+
}
|
|
18
|
+
:host([scroll-body]) .scroll {
|
|
19
|
+
flex: 1 1 auto;
|
|
20
|
+
min-height: 0;
|
|
21
|
+
overflow-y: auto;
|
|
22
|
+
/* No overscroll bounce — the rubber-band at the top/bottom looks glitchy
|
|
23
|
+
against the pinned header and the offset scroll-fade. */
|
|
24
|
+
overscroll-behavior: none;
|
|
25
|
+
scrollbar-width: none;
|
|
26
|
+
mask-image: linear-gradient(
|
|
27
|
+
to bottom,
|
|
28
|
+
rgb(0 0 0) 0,
|
|
29
|
+
rgb(0 0 0) var(--ds-table-header-height),
|
|
30
|
+
var(--ds-scroll-fade-top, rgb(0 0 0)) var(--ds-table-header-height),
|
|
31
|
+
rgb(0 0 0) calc(var(--ds-table-header-height) * 2),
|
|
32
|
+
rgb(0 0 0) calc(100% - var(--ds-table-header-height)),
|
|
33
|
+
var(--ds-scroll-fade-bottom, rgb(0 0 0)) 100%
|
|
34
|
+
);
|
|
35
|
+
animation: ds-scroll-fade linear;
|
|
36
|
+
animation-timeline: scroll(self);
|
|
37
|
+
}
|
|
38
|
+
:host([scroll-body]) .scroll::-webkit-scrollbar {
|
|
39
|
+
display: none;
|
|
40
|
+
}
|
|
41
|
+
:host([scroll-body]) thead th {
|
|
42
|
+
position: sticky;
|
|
43
|
+
top: 0;
|
|
44
|
+
z-index: 1;
|
|
45
|
+
box-sizing: border-box;
|
|
46
|
+
block-size: var(--ds-table-header-height);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
/* Stacked (mobile) layout hides the header and renders rows as cards, so the
|
|
50
|
+
top fade must NOT be offset by the header height — fade from the very top
|
|
51
|
+
like ds-dialog / ds-drawer. */
|
|
52
|
+
@container (max-width: ${mobileBreakpoint}) {
|
|
53
|
+
:host([scroll-body]:not([responsive='scroll'])) .scroll {
|
|
54
|
+
mask-image: linear-gradient(
|
|
55
|
+
to bottom,
|
|
56
|
+
var(--ds-scroll-fade-top, rgb(0 0 0)) 0,
|
|
57
|
+
rgb(0 0 0) var(--ds-table-header-height),
|
|
58
|
+
rgb(0 0 0) calc(100% - var(--ds-table-header-height)),
|
|
59
|
+
var(--ds-scroll-fade-bottom, rgb(0 0 0)) 100%
|
|
60
|
+
);
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
`;
|
|
64
|
+
//# sourceMappingURL=table-scroll-body.styles.js.map
|
|
@@ -0,0 +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"}
|
|
@@ -12,6 +12,8 @@ import type { TableColumn, TableResponsiveMode, TableRow, TableSortState } from
|
|
|
12
12
|
* @slot loading - Shown inside the loading overlay when `loading` is true.
|
|
13
13
|
* @slot header-{columnName} - Per-column header override (e.g. inject a ds-table-sort-button).
|
|
14
14
|
* @attr responsive - `stack` stacks cells on small screens; `scroll` preserves horizontal scrolling.
|
|
15
|
+
* @attr scroll-body - When set, the body scrolls under a pinned header (the footer slot stays pinned too). The scrollbar is hidden and overflow is signalled by top/bottom scroll-fades, matching ds-dialog/ds-drawer. Natural column widths are preserved; the host must be given a bounded height by its container.
|
|
16
|
+
* @cssprop --ds-table-header-height - Header row height; in scroll-body mode it pins the header and offsets the top scroll-fade below it. Defaults to a single line of header text.
|
|
15
17
|
* @event ds-row-click - Emitted when `clickable-rows` is set and a row is activated. Detail: `{ row, index }`.
|
|
16
18
|
* @csspart table - The internal `<table>` element.
|
|
17
19
|
* @csspart thead - The `<thead>` element.
|
|
@@ -39,6 +41,7 @@ export declare class DsTable<T extends TableRow = TableRow> extends DsElement {
|
|
|
39
41
|
skeletonColumns: number;
|
|
40
42
|
rowKey?: string;
|
|
41
43
|
responsive: TableResponsiveMode;
|
|
44
|
+
scrollBody: boolean;
|
|
42
45
|
private _hasCaption;
|
|
43
46
|
private _hasToolbar;
|
|
44
47
|
private _hasFooter;
|
|
@@ -1 +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;
|
|
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"}
|
|
@@ -11,6 +11,8 @@ import { DsElement } from '@jsekulowicz/ds-core';
|
|
|
11
11
|
import '../skeleton/define.js';
|
|
12
12
|
import { tableStyles } from './table.styles.js';
|
|
13
13
|
import { tableResponsiveStyles } from './table-responsive.styles.js';
|
|
14
|
+
import { tableScrollBodyStyles } from './table-scroll-body.styles.js';
|
|
15
|
+
import { scrollFadeStyles } from '../../shared/scroll-fade.styles.js';
|
|
14
16
|
import { renderTableSkeleton } from './table-skeleton.js';
|
|
15
17
|
import { renderTableBody, renderTableHeader } from './table-rendering.js';
|
|
16
18
|
const INTERACTIVE_TAGS = new Set([
|
|
@@ -36,6 +38,8 @@ const booleanAttributeConverter = {
|
|
|
36
38
|
* @slot loading - Shown inside the loading overlay when `loading` is true.
|
|
37
39
|
* @slot header-{columnName} - Per-column header override (e.g. inject a ds-table-sort-button).
|
|
38
40
|
* @attr responsive - `stack` stacks cells on small screens; `scroll` preserves horizontal scrolling.
|
|
41
|
+
* @attr scroll-body - When set, the body scrolls under a pinned header (the footer slot stays pinned too). The scrollbar is hidden and overflow is signalled by top/bottom scroll-fades, matching ds-dialog/ds-drawer. Natural column widths are preserved; the host must be given a bounded height by its container.
|
|
42
|
+
* @cssprop --ds-table-header-height - Header row height; in scroll-body mode it pins the header and offsets the top scroll-fade below it. Defaults to a single line of header text.
|
|
39
43
|
* @event ds-row-click - Emitted when `clickable-rows` is set and a row is activated. Detail: `{ row, index }`.
|
|
40
44
|
* @csspart table - The internal `<table>` element.
|
|
41
45
|
* @csspart thead - The `<thead>` element.
|
|
@@ -62,6 +66,7 @@ export class DsTable extends DsElement {
|
|
|
62
66
|
this.skeletonRows = 5;
|
|
63
67
|
this.skeletonColumns = 4;
|
|
64
68
|
this.responsive = 'stack';
|
|
69
|
+
this.scrollBody = false;
|
|
65
70
|
this._hasCaption = false;
|
|
66
71
|
this._hasToolbar = false;
|
|
67
72
|
this._hasFooter = false;
|
|
@@ -91,7 +96,13 @@ export class DsTable extends DsElement {
|
|
|
91
96
|
this.emit('ds-row-click', { detail: { row, index } });
|
|
92
97
|
};
|
|
93
98
|
}
|
|
94
|
-
static { this.styles = [
|
|
99
|
+
static { this.styles = [
|
|
100
|
+
...DsElement.styles,
|
|
101
|
+
tableStyles,
|
|
102
|
+
tableResponsiveStyles,
|
|
103
|
+
scrollFadeStyles,
|
|
104
|
+
tableScrollBodyStyles,
|
|
105
|
+
]; }
|
|
95
106
|
#slotObserver;
|
|
96
107
|
connectedCallback() {
|
|
97
108
|
super.connectedCallback();
|
|
@@ -233,6 +244,9 @@ __decorate([
|
|
|
233
244
|
__decorate([
|
|
234
245
|
property({ reflect: true })
|
|
235
246
|
], DsTable.prototype, "responsive", void 0);
|
|
247
|
+
__decorate([
|
|
248
|
+
property({ type: Boolean, reflect: true, attribute: 'scroll-body' })
|
|
249
|
+
], DsTable.prototype, "scrollBody", void 0);
|
|
236
250
|
__decorate([
|
|
237
251
|
state()
|
|
238
252
|
], DsTable.prototype, "_hasCaption", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table.js","sourceRoot":"","sources":["../../../src/atoms/table/table.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,uBAAuB,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAG1E,MAAM,gBAAgB,GAAG,IAAI,GAAG,CAAC;IAC/B,GAAG,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO;IACrD,WAAW,EAAE,SAAS,EAAE,aAAa,EAAE,UAAU,EAAE,WAAW;IAC9D,sBAAsB,EAAE,eAAe,EAAE,sBAAsB;IAC/D,qBAAqB;CACtB,CAAC,CAAC;AAEH,MAAM,wBAAwB,GAAG,IAAI,GAAG,CAAC,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC;AAEzD,SAAS,qBAAqB,CAAC,KAAoB;IACjD,OAAO,KAAK,KAAK,IAAI,IAAI,CAAC,wBAAwB,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC,CAAC;AACrF,CAAC;AAED,MAAM,yBAAyB,GAAG;IAChC,aAAa,EAAE,qBAAqB;CACrC,CAAC;AAEF
|
|
1
|
+
{"version":3,"file":"table.js","sourceRoot":"","sources":["../../../src/atoms/table/table.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/table/table.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"table.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/table/table.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,yBAuHvB,CAAC"}
|
|
@@ -7,6 +7,9 @@ export const tableStyles = css `
|
|
|
7
7
|
color: var(--ds-color-fg);
|
|
8
8
|
font-family: var(--ds-font-body);
|
|
9
9
|
font-size: var(--ds-font-size-sm);
|
|
10
|
+
/* Header row height (used as the top scroll-fade offset in scroll-body
|
|
11
|
+
mode). Single-line by construction; override to taste. */
|
|
12
|
+
--ds-table-header-height: calc(var(--ds-space-2) * 2 + var(--ds-font-size-sm) * 1.5 + 1px);
|
|
10
13
|
}
|
|
11
14
|
|
|
12
15
|
.toolbar {
|
|
@@ -43,13 +46,15 @@ export const tableStyles = css `
|
|
|
43
46
|
background: var(--ds-color-bg-subtle);
|
|
44
47
|
color: var(--ds-color-fg);
|
|
45
48
|
font-weight: var(--ds-font-weight-medium);
|
|
46
|
-
padding: var(--ds-space-3);
|
|
49
|
+
padding: var(--ds-space-2) var(--ds-space-3);
|
|
47
50
|
border-bottom: 1px solid var(--ds-color-border);
|
|
51
|
+
/* Headers never wrap, so the header row keeps a constant height (a long
|
|
52
|
+
header widens its column / scrolls rather than growing taller). */
|
|
48
53
|
white-space: nowrap;
|
|
49
54
|
}
|
|
50
55
|
|
|
51
56
|
tbody td {
|
|
52
|
-
padding: var(--ds-space-3);
|
|
57
|
+
padding: var(--ds-space-2) var(--ds-space-3);
|
|
53
58
|
border-bottom: 1px solid var(--ds-color-border-subtle);
|
|
54
59
|
vertical-align: middle;
|
|
55
60
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table.styles.js","sourceRoot":"","sources":["../../../src/atoms/table/table.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"table.styles.js","sourceRoot":"","sources":["../../../src/atoms/table/table.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuH7B,CAAC"}
|
|
@@ -1 +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;
|
|
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"}
|
|
@@ -12,6 +12,7 @@ import '../card/define.js';
|
|
|
12
12
|
import '../../atoms/button/define.js';
|
|
13
13
|
import '../../atoms/icon/icons/x-mark.js';
|
|
14
14
|
import { dialogStyles } from './dialog.styles.js';
|
|
15
|
+
import { scrollFadeStyles } from '../../shared/scroll-fade.styles.js';
|
|
15
16
|
/**
|
|
16
17
|
* @tag ds-dialog
|
|
17
18
|
* @summary Modal dialog built on the native `<dialog>` element. Header and footer are sticky; only the body scrolls.
|
|
@@ -56,7 +57,7 @@ export class DsDialog extends DsElement {
|
|
|
56
57
|
this.close();
|
|
57
58
|
};
|
|
58
59
|
}
|
|
59
|
-
static { this.styles = [...DsElement.styles, dialogStyles]; }
|
|
60
|
+
static { this.styles = [...DsElement.styles, scrollFadeStyles, dialogStyles]; }
|
|
60
61
|
show() {
|
|
61
62
|
this.open = true;
|
|
62
63
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../src/molecules/dialog/dialog.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAA4C,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,mBAAmB,CAAC;AAC3B,OAAO,8BAA8B,CAAC;AACtC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../src/molecules/dialog/dialog.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog.styles.d.ts","sourceRoot":"","sources":["../../../src/molecules/dialog/dialog.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,
|
|
1
|
+
{"version":3,"file":"dialog.styles.d.ts","sourceRoot":"","sources":["../../../src/molecules/dialog/dialog.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,yBAyGxB,CAAC"}
|
|
@@ -1,17 +1,5 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
2
|
export const dialogStyles = css `
|
|
3
|
-
/* @property registration so the scroll-driven keyframes can
|
|
4
|
-
interpolate these as colors. */
|
|
5
|
-
@property --ds-dialog-body-top-fade {
|
|
6
|
-
syntax: '<color>';
|
|
7
|
-
inherits: false;
|
|
8
|
-
initial-value: rgb(0 0 0);
|
|
9
|
-
}
|
|
10
|
-
@property --ds-dialog-body-bottom-fade {
|
|
11
|
-
syntax: '<color>';
|
|
12
|
-
inherits: false;
|
|
13
|
-
initial-value: rgb(0 0 0);
|
|
14
|
-
}
|
|
15
3
|
:host {
|
|
16
4
|
display: contents;
|
|
17
5
|
}
|
|
@@ -67,39 +55,22 @@ export const dialogStyles = css `
|
|
|
67
55
|
children paint outside the body's clip box. */
|
|
68
56
|
padding-inline: var(--ds-space-2);
|
|
69
57
|
margin-inline: calc(var(--ds-space-2) * -1);
|
|
70
|
-
/* Scrollbar hidden; overflow is signalled by the scroll-driven
|
|
71
|
-
fade
|
|
58
|
+
/* Scrollbar hidden; overflow is signalled by the shared scroll-driven
|
|
59
|
+
fade (see shared/scroll-fade.styles). */
|
|
72
60
|
scrollbar-width: none;
|
|
73
61
|
mask-image: linear-gradient(
|
|
74
62
|
to bottom,
|
|
75
|
-
var(--ds-
|
|
63
|
+
var(--ds-scroll-fade-top, rgb(0 0 0)) 0,
|
|
76
64
|
rgb(0 0 0) var(--ds-space-6),
|
|
77
65
|
rgb(0 0 0) calc(100% - var(--ds-space-6)),
|
|
78
|
-
var(--ds-
|
|
66
|
+
var(--ds-scroll-fade-bottom, rgb(0 0 0)) 100%
|
|
79
67
|
);
|
|
80
|
-
animation: ds-
|
|
68
|
+
animation: ds-scroll-fade linear;
|
|
81
69
|
animation-timeline: scroll(self);
|
|
82
70
|
}
|
|
83
71
|
ds-card::part(body)::-webkit-scrollbar {
|
|
84
72
|
display: none;
|
|
85
73
|
}
|
|
86
|
-
/* Top fade hidden at scroll-top, bottom fade hidden at scroll-end.
|
|
87
|
-
Near-instant flips at 0.001% / 99.999% keep the transitions
|
|
88
|
-
binary instead of interpolating across the scroll range. */
|
|
89
|
-
@keyframes ds-dialog-body-scroll-fade {
|
|
90
|
-
0% {
|
|
91
|
-
--ds-dialog-body-top-fade: rgb(0 0 0);
|
|
92
|
-
--ds-dialog-body-bottom-fade: rgb(0 0 0 / 0);
|
|
93
|
-
}
|
|
94
|
-
0.001%, 99.999% {
|
|
95
|
-
--ds-dialog-body-top-fade: rgb(0 0 0 / 0);
|
|
96
|
-
--ds-dialog-body-bottom-fade: rgb(0 0 0 / 0);
|
|
97
|
-
}
|
|
98
|
-
100% {
|
|
99
|
-
--ds-dialog-body-top-fade: rgb(0 0 0 / 0);
|
|
100
|
-
--ds-dialog-body-bottom-fade: rgb(0 0 0);
|
|
101
|
-
}
|
|
102
|
-
}
|
|
103
74
|
.title-row {
|
|
104
75
|
display: flex;
|
|
105
76
|
align-items: flex-start;
|
|
@@ -1 +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
|
|
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"}
|
|
@@ -1 +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;
|
|
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"}
|
|
@@ -12,6 +12,7 @@ import '../card/define.js';
|
|
|
12
12
|
import '../../atoms/button/define.js';
|
|
13
13
|
import '../../atoms/icon/icons/x-mark.js';
|
|
14
14
|
import { drawerStyles } from './drawer.styles.js';
|
|
15
|
+
import { scrollFadeStyles } from '../../shared/scroll-fade.styles.js';
|
|
15
16
|
/**
|
|
16
17
|
* @tag ds-drawer
|
|
17
18
|
* @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.
|
|
@@ -57,7 +58,7 @@ export class DsDrawer extends DsElement {
|
|
|
57
58
|
this.close();
|
|
58
59
|
};
|
|
59
60
|
}
|
|
60
|
-
static { this.styles = [...DsElement.styles, drawerStyles]; }
|
|
61
|
+
static { this.styles = [...DsElement.styles, scrollFadeStyles, drawerStyles]; }
|
|
61
62
|
show() {
|
|
62
63
|
this.open = true;
|
|
63
64
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"drawer.js","sourceRoot":"","sources":["../../../src/molecules/drawer/drawer.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAA4C,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,mBAAmB,CAAC;AAC3B,OAAO,8BAA8B,CAAC;AACtC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"drawer.js","sourceRoot":"","sources":["../../../src/molecules/drawer/drawer.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"drawer.styles.d.ts","sourceRoot":"","sources":["../../../src/molecules/drawer/drawer.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,
|
|
1
|
+
{"version":3,"file":"drawer.styles.d.ts","sourceRoot":"","sources":["../../../src/molecules/drawer/drawer.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,yBA8IxB,CAAC"}
|
|
@@ -1,17 +1,5 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
2
|
export const drawerStyles = css `
|
|
3
|
-
/* @property registration so the scroll-driven keyframes can
|
|
4
|
-
interpolate these as colors. */
|
|
5
|
-
@property --ds-drawer-body-top-fade {
|
|
6
|
-
syntax: '<color>';
|
|
7
|
-
inherits: false;
|
|
8
|
-
initial-value: rgb(0 0 0);
|
|
9
|
-
}
|
|
10
|
-
@property --ds-drawer-body-bottom-fade {
|
|
11
|
-
syntax: '<color>';
|
|
12
|
-
inherits: false;
|
|
13
|
-
initial-value: rgb(0 0 0);
|
|
14
|
-
}
|
|
15
3
|
:host {
|
|
16
4
|
display: contents;
|
|
17
5
|
}
|
|
@@ -104,31 +92,17 @@ export const drawerStyles = css `
|
|
|
104
92
|
scrollbar-width: none;
|
|
105
93
|
mask-image: linear-gradient(
|
|
106
94
|
to bottom,
|
|
107
|
-
var(--ds-
|
|
95
|
+
var(--ds-scroll-fade-top, rgb(0 0 0)) 0,
|
|
108
96
|
rgb(0 0 0) var(--ds-space-6),
|
|
109
97
|
rgb(0 0 0) calc(100% - var(--ds-space-6)),
|
|
110
|
-
var(--ds-
|
|
98
|
+
var(--ds-scroll-fade-bottom, rgb(0 0 0)) 100%
|
|
111
99
|
);
|
|
112
|
-
animation: ds-
|
|
100
|
+
animation: ds-scroll-fade linear;
|
|
113
101
|
animation-timeline: scroll(self);
|
|
114
102
|
}
|
|
115
103
|
ds-card::part(body)::-webkit-scrollbar {
|
|
116
104
|
display: none;
|
|
117
105
|
}
|
|
118
|
-
@keyframes ds-drawer-body-scroll-fade {
|
|
119
|
-
0% {
|
|
120
|
-
--ds-drawer-body-top-fade: rgb(0 0 0);
|
|
121
|
-
--ds-drawer-body-bottom-fade: rgb(0 0 0 / 0);
|
|
122
|
-
}
|
|
123
|
-
0.001%, 99.999% {
|
|
124
|
-
--ds-drawer-body-top-fade: rgb(0 0 0 / 0);
|
|
125
|
-
--ds-drawer-body-bottom-fade: rgb(0 0 0 / 0);
|
|
126
|
-
}
|
|
127
|
-
100% {
|
|
128
|
-
--ds-drawer-body-top-fade: rgb(0 0 0 / 0);
|
|
129
|
-
--ds-drawer-body-bottom-fade: rgb(0 0 0);
|
|
130
|
-
}
|
|
131
|
-
}
|
|
132
106
|
.title-row {
|
|
133
107
|
display: flex;
|
|
134
108
|
align-items: center;
|
|
@@ -1 +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
|
|
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"}
|
|
@@ -0,0 +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"}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { css } from 'lit';
|
|
2
|
+
// Shared scroll-driven fade. Registers the fade-colour custom properties and a
|
|
3
|
+
// keyframe that flips them while scrolling. The resting 0% keyframe paints NO
|
|
4
|
+
// fade: a scroll-progress timeline on a NON-scrollable container is meant to be
|
|
5
|
+
// inactive (so the fade stays hidden), but some engines instead clamp it to 0%
|
|
6
|
+
// — leaving a phantom bottom fade on content that doesn't actually scroll. By
|
|
7
|
+
// making 0% the no-fade state, a panel that fits its content never fades on any
|
|
8
|
+
// engine. The 100% (scrolled-to-bottom) keyframe still shows the top fade since
|
|
9
|
+
// that position is only reachable when the content really is scrollable. Add
|
|
10
|
+
// `scrollFadeStyles` to a component's styles, then on the scroll container:
|
|
11
|
+
// scrollbar-width: none;
|
|
12
|
+
// mask-image: linear-gradient(to bottom,
|
|
13
|
+
// var(--ds-scroll-fade-top, rgb(0 0 0)) ...,
|
|
14
|
+
// var(--ds-scroll-fade-bottom, rgb(0 0 0)) ...);
|
|
15
|
+
// animation: ds-scroll-fade linear;
|
|
16
|
+
// animation-timeline: scroll(self);
|
|
17
|
+
// and hide the WebKit scrollbar with `::-webkit-scrollbar { display: none }`.
|
|
18
|
+
// Used by ds-dialog, ds-drawer and ds-table (`scroll-body`).
|
|
19
|
+
export const scrollFadeStyles = css `
|
|
20
|
+
/* @property registration so the scroll-driven keyframe can interpolate the
|
|
21
|
+
fades as colours. Near-instant flips keep the transitions binary. */
|
|
22
|
+
@property --ds-scroll-fade-top {
|
|
23
|
+
syntax: '<color>';
|
|
24
|
+
inherits: false;
|
|
25
|
+
initial-value: rgb(0 0 0);
|
|
26
|
+
}
|
|
27
|
+
@property --ds-scroll-fade-bottom {
|
|
28
|
+
syntax: '<color>';
|
|
29
|
+
inherits: false;
|
|
30
|
+
initial-value: rgb(0 0 0);
|
|
31
|
+
}
|
|
32
|
+
@keyframes ds-scroll-fade {
|
|
33
|
+
0% {
|
|
34
|
+
--ds-scroll-fade-top: rgb(0 0 0);
|
|
35
|
+
--ds-scroll-fade-bottom: rgb(0 0 0);
|
|
36
|
+
}
|
|
37
|
+
0.001%, 99.999% {
|
|
38
|
+
--ds-scroll-fade-top: rgb(0 0 0 / 0);
|
|
39
|
+
--ds-scroll-fade-bottom: rgb(0 0 0 / 0);
|
|
40
|
+
}
|
|
41
|
+
100% {
|
|
42
|
+
--ds-scroll-fade-top: rgb(0 0 0 / 0);
|
|
43
|
+
--ds-scroll-fade-bottom: rgb(0 0 0);
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
`;
|
|
47
|
+
//# sourceMappingURL=scroll-fade.styles.js.map
|
|
@@ -0,0 +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"}
|
package/package.json
CHANGED