@jsekulowicz/ds-components 0.9.9 → 0.9.11
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 +2 -2
- package/dist/molecules/card/card.styles.d.ts.map +1 -1
- package/dist/molecules/card/card.styles.js +9 -3
- package/dist/molecules/card/card.styles.js.map +1 -1
- package/dist/molecules/dialog/dialog.d.ts +2 -0
- package/dist/molecules/dialog/dialog.d.ts.map +1 -1
- package/dist/molecules/dialog/dialog.js +13 -12
- 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 +12 -16
- package/dist/molecules/dialog/dialog.styles.js.map +1 -1
- package/package.json +1 -1
package/custom-elements.json
CHANGED
|
@@ -10374,7 +10374,7 @@
|
|
|
10374
10374
|
{
|
|
10375
10375
|
"kind": "variable",
|
|
10376
10376
|
"name": "cardStyles",
|
|
10377
|
-
"default": "css` :host { display: block; container-type: inline-size; } .card { display: flex; flex-direction: column; gap: var(--ds-space-4); padding: var(--ds-space-6); border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-sm); background: var(--ds-color-bg); color: var(--ds-color-fg); transition: border-color var(--ds-duration-normal) var(--ds-easing-standard), transform var(--ds-duration-normal) var(--ds-easing-standard); } :host([elevation='sm']) .card { box-shadow: var(--ds-shadow-sm); } :host([elevation='md']) .card { box-shadow: var(--ds-shadow-md); } :host([interactive]) .card { cursor: pointer; } :host([interactive]) .card:hover { border-color: var(--ds-color-fg-subtle); transform: translateY(-1px); }
|
|
10377
|
+
"default": "css` :host { display: block; container-type: inline-size; } .card { display: flex; flex-direction: column; gap: var(--ds-space-4); padding: var(--ds-space-6); border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-sm); background: var(--ds-color-bg); color: var(--ds-color-fg); transition: border-color var(--ds-duration-normal) var(--ds-easing-standard), transform var(--ds-duration-normal) var(--ds-easing-standard); } :host([elevation='sm']) .card { box-shadow: var(--ds-shadow-sm); } :host([elevation='md']) .card { box-shadow: var(--ds-shadow-md); } :host([interactive]) .card { cursor: pointer; } :host([interactive]) .card:hover { border-color: var(--ds-color-fg-subtle); transform: translateY(-1px); } /* Body grows to fill leftover height so anything below it (.actions, footer) is anchored to the bottom of the card. When a parent grid/flex stretches several cards to a common height, this keeps their footers aligned even if the bodies are different lengths. Cards that aren't stretched (auto-height context) see no visual change — body still wraps its content. */ .body { flex: 1; } :host([orientation='horizontal']) .card { flex-direction: row; align-items: center; } @container (max-width: 360px) { :host([orientation='horizontal']) .card { flex-direction: column; align-items: stretch; } :host([orientation='horizontal']) .body { flex: unset; } } .header { display: flex; flex-direction: column; gap: var(--ds-space-1); } .actions { display: flex; justify-content: flex-start; } @media (max-width: ${belowTabletBreakpoint}) { .actions { justify-content: flex-end; } } [hidden] { display: none; } ::slotted([slot='actions']) { display: flex; gap: var(--ds-space-2); flex-wrap: wrap; } ::slotted([slot='title']) { 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); margin: 0; } ::slotted([slot='eyebrow']) { font-size: var(--ds-font-size-2xs); letter-spacing: var(--ds-letter-spacing-wide); text-transform: uppercase; color: var(--ds-color-accent); } `"
|
|
10378
10378
|
}
|
|
10379
10379
|
],
|
|
10380
10380
|
"exports": [
|
|
@@ -12289,7 +12289,7 @@
|
|
|
12289
12289
|
{
|
|
12290
12290
|
"kind": "variable",
|
|
12291
12291
|
"name": "dialogStyles",
|
|
12292
|
-
"default": "css` :host { display: contents; } dialog { padding: 0; border: 0; background: transparent; color: inherit; width: 100%; max-height: min(90vh, 720px); border-radius: var(--ds-radius-sm); box-shadow: var(--ds-shadow-md); overflow: visible; } :host([size='sm']) dialog { max-width: 400px; } :host([size='md']) dialog { max-width: 560px; } :host([size='lg']) dialog { max-width: 800px; } dialog::backdrop { background: rgb(15 23 42 / 0.55); backdrop-filter: blur(2px); } ds-card { height: 100%; } ds-card::part(card) { height: 100%; max-height: 100%; box-shadow: none; border-color: transparent; gap: var(--ds-space-3); } ds-card::part(body) { flex: 1; min-height: 0; overflow-y: auto; } .title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ds-space-3); } .title-text { margin: 0; flex: 1; font-family: var(--ds-font-display); font-size: var(--ds-font-size-xl); font-weight: var(--ds-font-weight-semibold); letter-spacing: var(--ds-letter-spacing-display); } /* Slotted heading tags (h1-h6, etc.) carry UA defaults that compound on top of .title-text — a bigger font-size and large vertical margins. Normalise them so 'Foo', '<h2 slot=\"title\">Foo</h2>' and '<span slot=\"title\">Foo</span>' all render identically. */ .title-text ::slotted(*) { font: inherit; margin: 0; letter-spacing: inherit; }
|
|
12292
|
+
"default": "css` :host { display: contents; } dialog { padding: 0; border: 0; background: transparent; color: inherit; width: 100%; max-height: min(90vh, 720px); border-radius: var(--ds-radius-sm); box-shadow: var(--ds-shadow-md); overflow: visible; } :host([size='sm']) dialog { max-width: 400px; } :host([size='md']) dialog { max-width: 560px; } :host([size='lg']) dialog { max-width: 800px; } dialog::backdrop { background: rgb(15 23 42 / 0.55); backdrop-filter: blur(2px); } ds-card { height: 100%; } ds-card::part(card) { height: 100%; max-height: 100%; box-shadow: none; border-color: transparent; gap: var(--ds-space-3); } ds-card::part(body) { flex: 1; min-height: 0; overflow-y: auto; /* The body's overflow:auto clips at the padding-box edge on both axes — that catches focus outlines, popover shadows and any ring decoration that extends a few pixels beyond a child's border-box. overflow-clip-margin lets those non-scrolling overflows escape without re-enabling scrolling. */ overflow-clip-margin: var(--ds-space-2); } .title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ds-space-3); } .title-text { margin: 0; flex: 1; font-family: var(--ds-font-display); font-size: var(--ds-font-size-xl); font-weight: var(--ds-font-weight-semibold); letter-spacing: var(--ds-letter-spacing-display); } /* Slotted heading tags (h1-h6, etc.) carry UA defaults that compound on top of .title-text — a bigger font-size and large vertical margins. Normalise them so 'Foo', '<h2 slot=\"title\">Foo</h2>' and '<span slot=\"title\">Foo</span>' all render identically. */ .title-text ::slotted(*) { font: inherit; margin: 0; letter-spacing: inherit; } /* Pull the close button up and to the right so it sits near the card's top-right corner instead of indented by ds-card's full ds-space-6 padding. Its own visual chrome (size, hover, focus ring, square shape) comes from ds-button. */ .close-btn { margin-block-start: calc(var(--ds-space-3) * -1); margin-inline-end: calc(var(--ds-space-3) * -1); } .footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--ds-space-2); } `"
|
|
12293
12293
|
}
|
|
12294
12294
|
],
|
|
12295
12295
|
"exports": [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card.styles.d.ts","sourceRoot":"","sources":["../../../src/molecules/card/card.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,UAAU,
|
|
1
|
+
{"version":3,"file":"card.styles.d.ts","sourceRoot":"","sources":["../../../src/molecules/card/card.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,UAAU,yBAuFtB,CAAC"}
|
|
@@ -31,13 +31,19 @@ export const cardStyles = css `
|
|
|
31
31
|
border-color: var(--ds-color-fg-subtle);
|
|
32
32
|
transform: translateY(-1px);
|
|
33
33
|
}
|
|
34
|
+
/* Body grows to fill leftover height so anything below it
|
|
35
|
+
(.actions, footer) is anchored to the bottom of the card. When a
|
|
36
|
+
parent grid/flex stretches several cards to a common height, this
|
|
37
|
+
keeps their footers aligned even if the bodies are different
|
|
38
|
+
lengths. Cards that aren't stretched (auto-height context) see no
|
|
39
|
+
visual change — body still wraps its content. */
|
|
40
|
+
.body {
|
|
41
|
+
flex: 1;
|
|
42
|
+
}
|
|
34
43
|
:host([orientation='horizontal']) .card {
|
|
35
44
|
flex-direction: row;
|
|
36
45
|
align-items: center;
|
|
37
46
|
}
|
|
38
|
-
:host([orientation='horizontal']) .body {
|
|
39
|
-
flex: 1;
|
|
40
|
-
}
|
|
41
47
|
@container (max-width: 360px) {
|
|
42
48
|
:host([orientation='horizontal']) .card {
|
|
43
49
|
flex-direction: column;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card.styles.js","sourceRoot":"","sources":["../../../src/molecules/card/card.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,MAAM,qBAAqB,GAAG,SAAS,CAAC,QAAQ,UAAU,CAAC,EAAE,YAAY,CAAC,CAAC;AAE3E,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"card.styles.js","sourceRoot":"","sources":["../../../src/molecules/card/card.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,MAAM,qBAAqB,GAAG,SAAS,CAAC,QAAQ,UAAU,CAAC,EAAE,YAAY,CAAC,CAAC;AAE3E,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBA6DN,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;CA0B3C,CAAC"}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { type PropertyValues, type TemplateResult } from 'lit';
|
|
2
2
|
import { DsElement } from '@jsekulowicz/ds-core';
|
|
3
3
|
import '../card/define.js';
|
|
4
|
+
import '../../atoms/button/define.js';
|
|
5
|
+
import '../../atoms/icon/icons/x-mark.js';
|
|
4
6
|
export type DialogSize = 'sm' | 'md' | 'lg';
|
|
5
7
|
/**
|
|
6
8
|
* @tag ds-dialog
|
|
@@ -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;
|
|
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;AAG1C,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5C;;;;;;;;;;;;;GAaG;AACH,qBAAa,QAAS,SAAQ,SAAS;;IACrC,OAAgB,MAAM,4BAAuC;IAEjB,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"}
|
|
@@ -9,6 +9,8 @@ import { property, query } from 'lit/decorators.js';
|
|
|
9
9
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
10
10
|
import { DsElement } from '@jsekulowicz/ds-core';
|
|
11
11
|
import '../card/define.js';
|
|
12
|
+
import '../../atoms/button/define.js';
|
|
13
|
+
import '../../atoms/icon/icons/x-mark.js';
|
|
12
14
|
import { dialogStyles } from './dialog.styles.js';
|
|
13
15
|
/**
|
|
14
16
|
* @tag ds-dialog
|
|
@@ -98,22 +100,21 @@ export class DsDialog extends DsElement {
|
|
|
98
100
|
<ds-card elevation="md" part="card">
|
|
99
101
|
<div slot="title" class="title-row">
|
|
100
102
|
<h2 id=${titleId} class="title-text"><slot name="title"></slot></h2>
|
|
101
|
-
<button
|
|
103
|
+
<ds-button
|
|
102
104
|
class="close-btn"
|
|
103
105
|
part="close-button"
|
|
104
|
-
|
|
105
|
-
|
|
106
|
+
variant="ghost"
|
|
107
|
+
size="sm"
|
|
108
|
+
square
|
|
109
|
+
label="Close"
|
|
106
110
|
@click=${this.#onCloseButtonClick}
|
|
107
111
|
>
|
|
108
|
-
<
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
/>
|
|
115
|
-
</svg>
|
|
116
|
-
</button>
|
|
112
|
+
<ds-icon
|
|
113
|
+
slot="leading"
|
|
114
|
+
name="x-mark"
|
|
115
|
+
size="2xl"
|
|
116
|
+
></ds-icon>
|
|
117
|
+
</ds-button>
|
|
117
118
|
</div>
|
|
118
119
|
<slot></slot>
|
|
119
120
|
<div slot="footer" class="footer"><slot name="footer"></slot></div>
|
|
@@ -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,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAIlD;;;;;;;;;;;;;GAaG;AACH,MAAM,OAAO,QAAS,SAAQ,SAAS;IAAvC;;QAG8C,SAAI,GAAG,KAAK,CAAC;QAC7C,UAAK,GAAG,EAAE,CAAC;QACqB,gBAAW,GAAG,IAAI,CAAC;QAClC,SAAI,GAAe,IAAI,CAAC;QA8BrD,qBAAgB,GAAG,CAAC,KAAiB,EAAQ,EAAE;YAC7C,IAAI,CAAC,IAAI,CAAC,WAAW;gBAAE,OAAO;YAC9B,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,SAAS;gBAAE,IAAI,CAAC,KAAK,EAAE,CAAC;QACpD,CAAC,CAAC;QAEF,cAAS,GAAG,CAAC,KAAY,EAAQ,EAAE;YACjC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;gBACtB,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,OAAO;YACT,CAAC;YACD,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;QAC3C,CAAC,CAAC;QAEF,mBAAc,GAAG,GAAS,EAAE;YAC1B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YAClB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;gBACpB,MAAM,EAAE,EAAE,WAAW,EAAE,IAAI,CAAC,SAAS,EAAE,WAAW,IAAI,EAAE,EAAE;aAC3D,CAAC,CAAC;QACL,CAAC,CAAC;QAEF,wBAAmB,GAAG,GAAS,EAAE;YAC/B,IAAI,CAAC,KAAK,EAAE,CAAC;QACf,CAAC,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,yBAsFxB,CAAC"}
|
|
@@ -41,6 +41,12 @@ export const dialogStyles = css `
|
|
|
41
41
|
flex: 1;
|
|
42
42
|
min-height: 0;
|
|
43
43
|
overflow-y: auto;
|
|
44
|
+
/* The body's overflow:auto clips at the padding-box edge on both
|
|
45
|
+
axes — that catches focus outlines, popover shadows and any
|
|
46
|
+
ring decoration that extends a few pixels beyond a child's
|
|
47
|
+
border-box. overflow-clip-margin lets those non-scrolling
|
|
48
|
+
overflows escape without re-enabling scrolling. */
|
|
49
|
+
overflow-clip-margin: var(--ds-space-2);
|
|
44
50
|
}
|
|
45
51
|
.title-row {
|
|
46
52
|
display: flex;
|
|
@@ -65,23 +71,13 @@ export const dialogStyles = css `
|
|
|
65
71
|
margin: 0;
|
|
66
72
|
letter-spacing: inherit;
|
|
67
73
|
}
|
|
74
|
+
/* Pull the close button up and to the right so it sits near the
|
|
75
|
+
card's top-right corner instead of indented by ds-card's full
|
|
76
|
+
ds-space-6 padding. Its own visual chrome (size, hover, focus
|
|
77
|
+
ring, square shape) comes from ds-button. */
|
|
68
78
|
.close-btn {
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
justify-content: center;
|
|
72
|
-
width: 32px;
|
|
73
|
-
height: 32px;
|
|
74
|
-
margin: calc(var(--ds-space-1) * -1);
|
|
75
|
-
border: 0;
|
|
76
|
-
border-radius: var(--ds-radius-sm);
|
|
77
|
-
background: transparent;
|
|
78
|
-
color: var(--ds-color-fg-subtle, var(--ds-color-fg));
|
|
79
|
-
cursor: pointer;
|
|
80
|
-
transition: background-color var(--ds-duration-fast) var(--ds-easing-standard);
|
|
81
|
-
}
|
|
82
|
-
.close-btn:hover {
|
|
83
|
-
background: var(--ds-color-bg-subtle, rgb(0 0 0 / 0.05));
|
|
84
|
-
color: var(--ds-color-fg);
|
|
79
|
+
margin-block-start: calc(var(--ds-space-3) * -1);
|
|
80
|
+
margin-inline-end: calc(var(--ds-space-3) * -1);
|
|
85
81
|
}
|
|
86
82
|
.footer {
|
|
87
83
|
display: flex;
|
|
@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsF9B,CAAC"}
|
package/package.json
CHANGED