@jsekulowicz/ds-components 0.11.1 → 0.11.2
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
|
@@ -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":"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