@jsekulowicz/ds-components 0.11.0 → 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 +2 -2
- package/dist/molecules/drawer/drawer.styles.d.ts.map +1 -1
- package/dist/molecules/drawer/drawer.styles.js +13 -7
- package/dist/molecules/drawer/drawer.styles.js.map +1 -1
- package/dist/templates/page-shell/page-shell.styles.d.ts.map +1 -1
- package/dist/templates/page-shell/page-shell.styles.js +3 -1
- package/dist/templates/page-shell/page-shell.styles.js.map +1 -1
- package/package.json +1 -1
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) { /*
|
|
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": [
|
|
@@ -14751,7 +14751,7 @@
|
|
|
14751
14751
|
{
|
|
14752
14752
|
"kind": "variable",
|
|
14753
14753
|
"name": "pageShellStyles",
|
|
14754
|
-
"default": "css` :host { --ds-page-shell-max-width: none; display: flex; flex-direction: column; position: relative; height: 100vh; height: 100dvh; overflow-x: clip; background: var(--ds-color-bg); color: var(--ds-color-fg); font-family: var(--ds-font-body); } header { position: sticky; top: 0; background: color-mix(in oklab, var(--ds-color-bg) 92%, transparent); backdrop-filter: blur(12px); z-index: var(--ds-z-index-sticky); } /* The header composes ds-top-bar; let the top-bar own height, padding, border-bottom, and layout. We just (a) make its background transparent so the sticky header's blurred bg shows through, and (b) constrain its inner brand + actions content to the same max-width as the shell-body below so the bar's brand left-aligns with the aside, and its actions right-align with the aside-end (or the right edge of main when no aside-end is slotted). */ .chrome { --ds-top-bar-bg: transparent; --ds-top-bar-content-max-width: var(--ds-page-shell-max-width); } /* Same treatment for a slotted ds-footer: cap its inner content to the shell-body's max-width so footer content aligns with the column above. Consumers who slot a non-ds-footer custom element can override the property themselves. */ ::slotted(ds-footer) { --ds-footer-content-max-width: var(--ds-page-shell-max-width); } footer { display: block; } .shell-body { flex: 1; width: 100%; max-width: var(--ds-page-shell-max-width); margin-inline: auto; display: grid; grid-template-columns: auto 1fr auto; min-height: 0; } :host([aside-empty]) .shell-body { grid-template-columns: 1fr auto; } :host([aside-end-empty]) .shell-body { grid-template-columns: auto 1fr; } :host([aside-empty][aside-end-empty]) .shell-body { grid-template-columns: 1fr; } aside { display: flex; overflow-x: clip; overflow-y: auto; overflow-clip-margin-inline: var(--ds-space-2); min-height: 0; scrollbar-color: var(--ds-color-fg-subtle) transparent; scrollbar-width: thin; /* No scrollbar-gutter reservation: the aside sits flush with its column edge so the consumer's <main> solely owns the gap. The scrollbar appears on demand when the aside genuinely overflows. */ } :host([aside-empty]) aside[part=\"aside\"], :host([aside-empty]) ds-drawer[part=\"aside\"] { display: none; } :host([aside-end-empty]) aside[part=\"aside-end\"] { display: none; } main { padding: var(--ds-space-5); overflow-x: clip; overflow-y: auto; overflow-clip-margin-inline: var(--ds-space-2); min-width: 0; min-height: 0; scrollbar-color: var(--ds-color-fg-subtle) transparent; scrollbar-width: thin; /* Reserve scrollbar gutters on both inline sides so the inline-start and inline-end visible empty bands stay equal in width whether the vertical scrollbar is present or not. */ scrollbar-gutter: stable both-edges; } @media (max-width: ${belowDesktopBreakpoint}) { main { padding-block: var(--ds-space-4); padding-inline: var(--ds-space-4); } } .menu-toggle { display: none; } .menu-toggle::part(button) { min-width: var(--ds-size-sm); width: var(--ds-size-sm); padding: 0; } :host([mobile-layout]) .menu-toggle { display: inline-flex; } :host([mobile-layout]) .shell-body { grid-template-columns: 1fr; } :host([mobile-layout]) aside[part=\"aside-end\"] { display: none; } :host([mobile-layout]) ds-drawer[part=\"aside\"] { /* Top-layer modal; don't reserve a grid column when closed. */ display: contents; --ds-drawer-card-padding: 0; --ds-drawer-title-padding: var(--ds-space-
|
|
14754
|
+
"default": "css` :host { --ds-page-shell-max-width: none; display: flex; flex-direction: column; position: relative; height: 100vh; height: 100dvh; overflow-x: clip; background: var(--ds-color-bg); color: var(--ds-color-fg); font-family: var(--ds-font-body); } header { position: sticky; top: 0; background: color-mix(in oklab, var(--ds-color-bg) 92%, transparent); backdrop-filter: blur(12px); z-index: var(--ds-z-index-sticky); } /* The header composes ds-top-bar; let the top-bar own height, padding, border-bottom, and layout. We just (a) make its background transparent so the sticky header's blurred bg shows through, and (b) constrain its inner brand + actions content to the same max-width as the shell-body below so the bar's brand left-aligns with the aside, and its actions right-align with the aside-end (or the right edge of main when no aside-end is slotted). */ .chrome { --ds-top-bar-bg: transparent; --ds-top-bar-content-max-width: var(--ds-page-shell-max-width); } /* Same treatment for a slotted ds-footer: cap its inner content to the shell-body's max-width so footer content aligns with the column above. Consumers who slot a non-ds-footer custom element can override the property themselves. */ ::slotted(ds-footer) { --ds-footer-content-max-width: var(--ds-page-shell-max-width); } footer { display: block; } .shell-body { flex: 1; width: 100%; max-width: var(--ds-page-shell-max-width); margin-inline: auto; display: grid; grid-template-columns: auto 1fr auto; min-height: 0; } :host([aside-empty]) .shell-body { grid-template-columns: 1fr auto; } :host([aside-end-empty]) .shell-body { grid-template-columns: auto 1fr; } :host([aside-empty][aside-end-empty]) .shell-body { grid-template-columns: 1fr; } aside { display: flex; overflow-x: clip; overflow-y: auto; overflow-clip-margin-inline: var(--ds-space-2); min-height: 0; scrollbar-color: var(--ds-color-fg-subtle) transparent; scrollbar-width: thin; /* No scrollbar-gutter reservation: the aside sits flush with its column edge so the consumer's <main> solely owns the gap. The scrollbar appears on demand when the aside genuinely overflows. */ } :host([aside-empty]) aside[part=\"aside\"], :host([aside-empty]) ds-drawer[part=\"aside\"] { display: none; } :host([aside-end-empty]) aside[part=\"aside-end\"] { display: none; } main { padding: var(--ds-space-5); overflow-x: clip; overflow-y: auto; overflow-clip-margin-inline: var(--ds-space-2); min-width: 0; min-height: 0; scrollbar-color: var(--ds-color-fg-subtle) transparent; scrollbar-width: thin; /* Reserve scrollbar gutters on both inline sides so the inline-start and inline-end visible empty bands stay equal in width whether the vertical scrollbar is present or not. */ scrollbar-gutter: stable both-edges; } @media (max-width: ${belowDesktopBreakpoint}) { main { padding-block: var(--ds-space-4); padding-inline: var(--ds-space-4); } } .menu-toggle { display: none; } .menu-toggle::part(button) { min-width: var(--ds-size-sm); width: var(--ds-size-sm); padding: 0; } :host([mobile-layout]) .menu-toggle { display: inline-flex; } :host([mobile-layout]) .shell-body { grid-template-columns: 1fr; } :host([mobile-layout]) aside[part=\"aside-end\"] { display: none; } :host([mobile-layout]) ds-drawer[part=\"aside\"] { /* Top-layer modal; don't reserve a grid column when closed. */ display: contents; --ds-drawer-card-padding: 0; /* Match ds-top-bar's 48px chrome height with inline-only padding. */ --ds-drawer-title-padding: 0 var(--ds-space-4); --ds-drawer-title-min-height: 48px; --ds-drawer-title-bg: var(--ds-page-shell-drawer-header-bg, transparent); --ds-drawer-title-fg: var(--ds-page-shell-drawer-header-fg, inherit); --ds-drawer-title-border-color: var(--ds-page-shell-drawer-header-border-color, transparent); } :host([mobile-layout]) ds-drawer[part=\"aside\"] ::slotted(ds-sidenav) { width: 100% !important; max-width: 100% !important; flex: 1 1 auto; min-width: 0; min-height: 0; height: auto !important; } `"
|
|
14755
14755
|
}
|
|
14756
14756
|
],
|
|
14757
14757
|
"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"}
|
|
@@ -77,12 +77,16 @@ export const drawerStyles = css `
|
|
|
77
77
|
min-width: 0;
|
|
78
78
|
}
|
|
79
79
|
ds-card::part(card) {
|
|
80
|
-
/*
|
|
81
|
-
ds-card's display:block host. */
|
|
80
|
+
/* Fill the dialog explicitly; percentage heights don't resolve
|
|
81
|
+
reliably through ds-card's display:block host. */
|
|
82
|
+
height: 100vh;
|
|
83
|
+
height: 100dvh;
|
|
82
84
|
max-height: 100vh;
|
|
83
85
|
max-height: 100dvh;
|
|
84
86
|
box-shadow: none;
|
|
85
|
-
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;
|
|
86
90
|
border-radius: 0;
|
|
87
91
|
gap: var(--ds-space-3);
|
|
88
92
|
padding: var(--ds-drawer-card-padding, var(--ds-space-6));
|
|
@@ -134,10 +138,16 @@ export const drawerStyles = css `
|
|
|
134
138
|
color: var(--ds-drawer-title-fg, inherit);
|
|
135
139
|
border-bottom: 1px solid var(--ds-drawer-title-border-color, transparent);
|
|
136
140
|
padding: var(--ds-drawer-title-padding, 0);
|
|
141
|
+
min-height: var(--ds-drawer-title-min-height, auto);
|
|
137
142
|
}
|
|
138
143
|
.title-text {
|
|
139
144
|
margin: 0;
|
|
140
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;
|
|
141
151
|
font-family: var(--ds-font-display);
|
|
142
152
|
font-size: var(--ds-font-size-xl);
|
|
143
153
|
font-weight: var(--ds-font-weight-semibold);
|
|
@@ -148,10 +158,6 @@ export const drawerStyles = css `
|
|
|
148
158
|
margin: 0;
|
|
149
159
|
letter-spacing: inherit;
|
|
150
160
|
}
|
|
151
|
-
.close-btn {
|
|
152
|
-
margin-block-start: calc(var(--ds-space-3) * -1);
|
|
153
|
-
margin-inline-end: calc(var(--ds-space-3) * -1);
|
|
154
|
-
}
|
|
155
161
|
.close-btn::part(button) {
|
|
156
162
|
color: var(--ds-drawer-title-fg, inherit);
|
|
157
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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"page-shell.styles.d.ts","sourceRoot":"","sources":["../../../src/templates/page-shell/page-shell.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,eAAe,
|
|
1
|
+
{"version":3,"file":"page-shell.styles.d.ts","sourceRoot":"","sources":["../../../src/templates/page-shell/page-shell.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,eAAe,yBAsJ3B,CAAC"}
|
|
@@ -136,7 +136,9 @@ export const pageShellStyles = css `
|
|
|
136
136
|
/* Top-layer modal; don't reserve a grid column when closed. */
|
|
137
137
|
display: contents;
|
|
138
138
|
--ds-drawer-card-padding: 0;
|
|
139
|
-
|
|
139
|
+
/* Match ds-top-bar's 48px chrome height with inline-only padding. */
|
|
140
|
+
--ds-drawer-title-padding: 0 var(--ds-space-4);
|
|
141
|
+
--ds-drawer-title-min-height: 48px;
|
|
140
142
|
--ds-drawer-title-bg: var(--ds-page-shell-drawer-header-bg, transparent);
|
|
141
143
|
--ds-drawer-title-fg: var(--ds-page-shell-drawer-header-fg, inherit);
|
|
142
144
|
--ds-drawer-title-border-color: var(--ds-page-shell-drawer-header-border-color, transparent);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"page-shell.styles.js","sourceRoot":"","sources":["../../../src/templates/page-shell/page-shell.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,MAAM,sBAAsB,GAAG,SAAS,CAAC,QAAQ,UAAU,CAAC,EAAE,YAAY,CAAC,CAAC;AAE5E,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBA0GX,sBAAsB
|
|
1
|
+
{"version":3,"file":"page-shell.styles.js","sourceRoot":"","sources":["../../../src/templates/page-shell/page-shell.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,MAAM,sBAAsB,GAAG,SAAS,CAAC,QAAQ,UAAU,CAAC,EAAE,YAAY,CAAC,CAAC;AAE5E,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBA0GX,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4C5C,CAAC"}
|
package/package.json
CHANGED