@jsekulowicz/ds-components 0.11.1 → 0.11.3
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 +3 -3
- package/dist/atoms/checkbox/checkbox.styles.d.ts.map +1 -1
- package/dist/atoms/checkbox/checkbox.styles.js +5 -3
- package/dist/atoms/checkbox/checkbox.styles.js.map +1 -1
- package/dist/atoms/radio/radio.styles.d.ts.map +1 -1
- package/dist/atoms/radio/radio.styles.js +7 -5
- package/dist/atoms/radio/radio.styles.js.map +1 -1
- package/dist/molecules/drawer/drawer.styles.d.ts.map +1 -1
- package/dist/molecules/drawer/drawer.styles.js +8 -5
- package/dist/molecules/drawer/drawer.styles.js.map +1 -1
- package/package.json +1 -1
package/custom-elements.json
CHANGED
|
@@ -1899,7 +1899,7 @@
|
|
|
1899
1899
|
{
|
|
1900
1900
|
"kind": "variable",
|
|
1901
1901
|
"name": "checkboxStyles",
|
|
1902
|
-
"default": "css` :host { display: inline-flex; cursor: pointer; font-family: var(--ds-font-body); font-size: var(--ds-font-size-sm); color: var(--ds-color-fg); } :host([disabled]) { cursor: not-allowed; opacity: 0.5; } label { cursor: inherit; display: inline-flex; align-items: center; gap: var(--ds-space-2); } .box { width: 1rem; height: 1rem; border:
|
|
1902
|
+
"default": "css` :host { display: inline-flex; cursor: pointer; font-family: var(--ds-font-body); font-size: var(--ds-font-size-sm); color: var(--ds-color-fg); } :host([disabled]) { cursor: not-allowed; opacity: 0.5; } label { cursor: inherit; display: inline-flex; align-items: center; gap: var(--ds-space-2); line-height: 1; } .box { width: 1rem; height: 1rem; border: 2px solid var(--ds-color-border-strong); border-radius: var(--ds-radius-xs); background: var(--ds-color-bg); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background var(--ds-duration-fast) var(--ds-easing-standard), border-color var(--ds-duration-fast) var(--ds-easing-standard); } :host(:focus-within) .box { box-shadow: var(--ds-shadow-focus); } :host([checked]) .box, :host([indeterminate]) .box { background: var(--ds-color-accent); border-color: var(--ds-color-accent); } :host([invalid]) .box { border-color: var(--ds-color-danger); } .check { width: 1rem; height: 1rem; flex-shrink: 0; color: var(--ds-color-bg); visibility: hidden; opacity: 0; transition: opacity var(--ds-duration-fast) var(--ds-easing-standard); } :host([checked]) .check, :host([indeterminate]) .check { visibility: visible; opacity: 1; } input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } `"
|
|
1903
1903
|
}
|
|
1904
1904
|
],
|
|
1905
1905
|
"exports": [
|
|
@@ -4121,7 +4121,7 @@
|
|
|
4121
4121
|
{
|
|
4122
4122
|
"kind": "variable",
|
|
4123
4123
|
"name": "radioStyles",
|
|
4124
|
-
"default": "css` :host { display: inline-flex; align-items: center; gap: var(--ds-space-2); font-family: var(--ds-font-body); font-size: var(--ds-font-size-sm); color: var(--ds-color-fg); cursor: pointer; } :host([disabled]) { cursor: not-allowed; opacity: 0.5; } .dot { width:
|
|
4124
|
+
"default": "css` :host { display: inline-flex; align-items: center; gap: var(--ds-space-2); font-family: var(--ds-font-body); font-size: var(--ds-font-size-sm); color: var(--ds-color-fg); cursor: pointer; } :host([disabled]) { cursor: not-allowed; opacity: 0.5; } .dot { width: 1rem; height: 1rem; border: 2px solid var(--ds-color-border-strong); border-radius: 50%; background: var(--ds-color-bg); display: inline-flex; align-items: center; justify-content: center; transition: border-color var(--ds-duration-fast) var(--ds-easing-standard); flex-shrink: 0; } :host(:focus-within) .dot { box-shadow: var(--ds-shadow-focus); } .dot::after { content: ''; width: 0.5rem; height: 0.5rem; flex-shrink: 0; border-radius: 50%; background: var(--ds-color-accent); transform: scale(0); transition: transform var(--ds-duration-fast) var(--ds-easing-standard); } :host([checked]) .dot { border-color: var(--ds-color-accent); } :host([checked]) .dot::after { transform: scale(1); } input { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); } label { display: inline-flex; align-items: center; gap: var(--ds-space-2); cursor: inherit; line-height: 1; } `"
|
|
4125
4125
|
}
|
|
4126
4126
|
],
|
|
4127
4127
|
"exports": [
|
|
@@ -12552,7 +12552,7 @@
|
|
|
12552
12552
|
{
|
|
12553
12553
|
"kind": "variable",
|
|
12554
12554
|
"name": "drawerStyles",
|
|
12555
|
-
"default": "css` /* @property registration so the scroll-driven keyframes can interpolate these as colors. */ @property --ds-drawer-body-top-fade { syntax: '<color>'; inherits: false; initial-value: rgb(0 0 0); } @property --ds-drawer-body-bottom-fade { syntax: '<color>'; inherits: false; initial-value: rgb(0 0 0); } :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-
|
|
12555
|
+
"default": "css` /* @property registration so the scroll-driven keyframes can interpolate these as colors. */ @property --ds-drawer-body-top-fade { syntax: '<color>'; inherits: false; initial-value: rgb(0 0 0); } @property --ds-drawer-body-bottom-fade { syntax: '<color>'; inherits: false; initial-value: rgb(0 0 0); } :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-drawer-body-top-fade, 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-drawer-body-bottom-fade, rgb(0 0 0)) 100% ); animation: ds-drawer-body-scroll-fade linear; animation-timeline: scroll(self); } ds-card::part(body)::-webkit-scrollbar { display: none; } @keyframes ds-drawer-body-scroll-fade { 0% { --ds-drawer-body-top-fade: rgb(0 0 0); --ds-drawer-body-bottom-fade: rgb(0 0 0 / 0); } 0.001%, 99.999% { --ds-drawer-body-top-fade: rgb(0 0 0 / 0); --ds-drawer-body-bottom-fade: rgb(0 0 0 / 0); } 100% { --ds-drawer-body-top-fade: rgb(0 0 0 / 0); --ds-drawer-body-bottom-fade: rgb(0 0 0); } } .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); } `"
|
|
12556
12556
|
}
|
|
12557
12557
|
],
|
|
12558
12558
|
"exports": [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/checkbox/checkbox.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,
|
|
1
|
+
{"version":3,"file":"checkbox.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/checkbox/checkbox.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,yBAoE1B,CAAC"}
|
|
@@ -16,11 +16,12 @@ export const checkboxStyles = css `
|
|
|
16
16
|
display: inline-flex;
|
|
17
17
|
align-items: center;
|
|
18
18
|
gap: var(--ds-space-2);
|
|
19
|
+
line-height: 1;
|
|
19
20
|
}
|
|
20
21
|
.box {
|
|
21
22
|
width: 1rem;
|
|
22
23
|
height: 1rem;
|
|
23
|
-
border:
|
|
24
|
+
border: 2px solid var(--ds-color-border-strong);
|
|
24
25
|
border-radius: var(--ds-radius-xs);
|
|
25
26
|
background: var(--ds-color-bg);
|
|
26
27
|
display: inline-flex;
|
|
@@ -42,8 +43,9 @@ export const checkboxStyles = css `
|
|
|
42
43
|
border-color: var(--ds-color-danger);
|
|
43
44
|
}
|
|
44
45
|
.check {
|
|
45
|
-
width:
|
|
46
|
-
height:
|
|
46
|
+
width: 1rem;
|
|
47
|
+
height: 1rem;
|
|
48
|
+
flex-shrink: 0;
|
|
47
49
|
color: var(--ds-color-bg);
|
|
48
50
|
visibility: hidden;
|
|
49
51
|
opacity: 0;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.styles.js","sourceRoot":"","sources":["../../../src/atoms/checkbox/checkbox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"checkbox.styles.js","sourceRoot":"","sources":["../../../src/atoms/checkbox/checkbox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoEhC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/radio/radio.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"radio.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/radio/radio.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,yBA4DvB,CAAC"}
|
|
@@ -14,9 +14,9 @@ export const radioStyles = css `
|
|
|
14
14
|
opacity: 0.5;
|
|
15
15
|
}
|
|
16
16
|
.dot {
|
|
17
|
-
width:
|
|
18
|
-
height:
|
|
19
|
-
border:
|
|
17
|
+
width: 1rem;
|
|
18
|
+
height: 1rem;
|
|
19
|
+
border: 2px solid var(--ds-color-border-strong);
|
|
20
20
|
border-radius: 50%;
|
|
21
21
|
background: var(--ds-color-bg);
|
|
22
22
|
display: inline-flex;
|
|
@@ -30,8 +30,9 @@ export const radioStyles = css `
|
|
|
30
30
|
}
|
|
31
31
|
.dot::after {
|
|
32
32
|
content: '';
|
|
33
|
-
width: 0.
|
|
34
|
-
height: 0.
|
|
33
|
+
width: 0.5rem;
|
|
34
|
+
height: 0.5rem;
|
|
35
|
+
flex-shrink: 0;
|
|
35
36
|
border-radius: 50%;
|
|
36
37
|
background: var(--ds-color-accent);
|
|
37
38
|
transform: scale(0);
|
|
@@ -56,6 +57,7 @@ export const radioStyles = css `
|
|
|
56
57
|
align-items: center;
|
|
57
58
|
gap: var(--ds-space-2);
|
|
58
59
|
cursor: inherit;
|
|
60
|
+
line-height: 1;
|
|
59
61
|
}
|
|
60
62
|
`;
|
|
61
63
|
//# sourceMappingURL=radio.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio.styles.js","sourceRoot":"","sources":["../../../src/atoms/radio/radio.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"radio.styles.js","sourceRoot":"","sources":["../../../src/atoms/radio/radio.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4D7B,CAAC"}
|
|
@@ -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,yBAwKxB,CAAC"}
|
|
@@ -84,7 +84,9 @@ export const drawerStyles = css `
|
|
|
84
84
|
max-height: 100vh;
|
|
85
85
|
max-height: 100dvh;
|
|
86
86
|
box-shadow: none;
|
|
87
|
-
border
|
|
87
|
+
/* border: 0 not transparent — a 1px transparent border still fills
|
|
88
|
+
with the card's own background (background-clip: border-box). */
|
|
89
|
+
border: 0;
|
|
88
90
|
border-radius: 0;
|
|
89
91
|
gap: var(--ds-space-3);
|
|
90
92
|
padding: var(--ds-drawer-card-padding, var(--ds-space-6));
|
|
@@ -141,6 +143,11 @@ export const drawerStyles = css `
|
|
|
141
143
|
.title-text {
|
|
142
144
|
margin: 0;
|
|
143
145
|
flex: 1;
|
|
146
|
+
/* Flex-centre the slotted content; otherwise the h2's line-height
|
|
147
|
+
inflates the title-row height and content sits at the baseline. */
|
|
148
|
+
display: flex;
|
|
149
|
+
align-items: center;
|
|
150
|
+
line-height: 1;
|
|
144
151
|
font-family: var(--ds-font-display);
|
|
145
152
|
font-size: var(--ds-font-size-xl);
|
|
146
153
|
font-weight: var(--ds-font-weight-semibold);
|
|
@@ -151,10 +158,6 @@ export const drawerStyles = css `
|
|
|
151
158
|
margin: 0;
|
|
152
159
|
letter-spacing: inherit;
|
|
153
160
|
}
|
|
154
|
-
.close-btn {
|
|
155
|
-
margin-block-start: calc(var(--ds-space-3) * -1);
|
|
156
|
-
margin-inline-end: calc(var(--ds-space-3) * -1);
|
|
157
|
-
}
|
|
158
161
|
.close-btn::part(button) {
|
|
159
162
|
color: var(--ds-drawer-title-fg, inherit);
|
|
160
163
|
}
|
|
@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwK9B,CAAC"}
|
package/package.json
CHANGED