@jsekulowicz/ds-components 0.9.10 → 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
CHANGED
|
@@ -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; } /* 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); } `"
|
|
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":"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;
|
|
@@ -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