@jsekulowicz/ds-components 0.19.0 → 0.19.1
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
|
@@ -3897,7 +3897,7 @@
|
|
|
3897
3897
|
{
|
|
3898
3898
|
"kind": "variable",
|
|
3899
3899
|
"name": "navControlStyles",
|
|
3900
|
-
"default": "css` :host { display: block; } :host([compact]) .nav-control { height: var(--ds-sidenav-item-compact-size); width: var(--ds-sidenav-item-compact-size); } .nav-control { display: inline-flex; align-items: center; box-sizing: border-box; height: var(--ds-sidenav-item-height); gap: var(--ds-space-2); padding: var(--ds-space-2) var(--ds-space-3); border: 0; border-radius: var(--ds-radius-sm); background: transparent; color: var(--ds-color-fg-muted); font-family: var(--ds-font-body); font-size: var(--ds-font-size-sm); font-weight: var(--ds-font-weight-medium); text-align: left; text-decoration: none; cursor: pointer; transition: background var(--ds-duration-fast) var(--ds-easing-standard), color var(--ds-duration-fast) var(--ds-easing-standard), padding var(--ds-duration-slow) var(--ds-easing-standard); } .nav-control:hover:not(:disabled):not([aria-disabled='true']) { background: var(--ds-color-bg-subtle); color: var(--ds-color-fg); } .nav-control:focus-visible { box-shadow: var(--ds-shadow-focus); } .icon { display: inline-flex; flex: none; } .icon[hidden] { display: none; } .label { display: inline-flex; min-width: 0; overflow: hidden; white-space: nowrap; max-width: 20rem; opacity: 1; transition: max-width var(--ds-duration-slow) var(--ds-easing-standard), opacity var(--ds-duration-fast) var(--ds-easing-standard); } :host-context(ds-sidenav) { display: block; } :host-context(ds-sidenav) .nav-control { display: flex; width: 100%; } :host([role='listitem']
|
|
3900
|
+
"default": "css` :host { display: block; } :host([compact]) .nav-control { height: var(--ds-sidenav-item-compact-size); width: var(--ds-sidenav-item-compact-size); } .nav-control { display: inline-flex; align-items: center; box-sizing: border-box; height: var(--ds-sidenav-item-height); gap: var(--ds-space-2); padding: var(--ds-space-2) var(--ds-space-3); border: 0; border-radius: var(--ds-radius-sm); background: transparent; color: var(--ds-color-fg-muted); font-family: var(--ds-font-body); font-size: var(--ds-font-size-sm); font-weight: var(--ds-font-weight-medium); text-align: left; text-decoration: none; cursor: pointer; transition: background var(--ds-duration-fast) var(--ds-easing-standard), color var(--ds-duration-fast) var(--ds-easing-standard), padding var(--ds-duration-slow) var(--ds-easing-standard); } .nav-control:hover:not(:disabled):not([aria-disabled='true']) { background: var(--ds-color-bg-subtle); color: var(--ds-color-fg); } .nav-control:focus-visible { box-shadow: var(--ds-shadow-focus); } .icon { display: inline-flex; flex: none; } .icon[hidden] { display: none; } .label { display: inline-flex; min-width: 0; overflow: hidden; white-space: nowrap; max-width: 20rem; opacity: 1; transition: max-width var(--ds-duration-slow) var(--ds-easing-standard), opacity var(--ds-duration-fast) var(--ds-easing-standard); } :host-context(ds-sidenav) { display: block; } :host-context(ds-sidenav) .nav-control { display: flex; width: 100%; } :host([role='listitem']:not([compact])):host-context(ds-nav-group) .nav-control { display: flex; width: 100%; padding-inline-start: var(--ds-space-5); } :host([compact]) .label { max-width: 0; opacity: 0; } :host([compact]) .nav-control { justify-content: center; padding: var(--ds-space-2); gap: 0; } .tooltip-wrapper { display: block; width: 100%; } :host([compact]) .tooltip-wrapper { display: flex; justify-content: center; } :host([compact]) .tooltip-wrapper::part(anchor) { display: inline-flex; width: auto; } `"
|
|
3901
3901
|
}
|
|
3902
3902
|
],
|
|
3903
3903
|
"exports": [
|
|
@@ -15725,7 +15725,7 @@
|
|
|
15725
15725
|
{
|
|
15726
15726
|
"kind": "variable",
|
|
15727
15727
|
"name": "pageShellStyles",
|
|
15728
|
-
"default": "css` :host { --ds-page-shell-max-width: none; --ds-page-shell-aside-toggle-clearance: calc(var(--ds-size-sm) / 2); 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 minmax(0, 1fr) auto; min-height: 0; } .presence-slot { display: none; } .aside-start-cluster, .aside-end-cluster { display: grid; grid-template-columns: 1fr; position: relative; min-width: 0; min-height: 0; transition: grid-template-columns var(--ds-duration-slow) var(--ds-easing-standard); } .aside-start-cluster { grid-column: 1; border-inline-end: 1px solid var(--ds-color-border); } .aside-end-cluster { grid-column: 3; border-inline-start: 1px solid var(--ds-color-border); } main { grid-column: 2; } aside { display: flex; box-sizing: border-box; overflow-x: clip; overflow-y: auto; overflow-clip-margin-inline: var(--ds-space-2); min-width: 0; min-height: 0; --ds-scroll-fade-depth: var(--ds-space-12, 3rem); scrollbar-width: none; mask-image: var(--ds-scroll-fade-mask); transition: opacity var(--ds-duration-slow) var(--ds-easing-standard); } aside::-webkit-scrollbar { display: none; } :host([aside-toggle]) aside[part=\"aside\"] { padding-inline-end: var(--ds-page-shell-aside-toggle-clearance); } :host([aside-end-toggle]) aside[part=\"aside-end\"] { padding-inline-start: var(--ds-page-shell-aside-toggle-clearance); } :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; } aside[hidden] { display: none; } /* Collapsing to 0fr animates the grid track from its content width to zero without measuring it in JS; the aside clips via overflow + min-width: 0. The cluster keeps a small min-width so the toggle button that straddles its edge never touches the viewport edge. */ :host([aside-state='hidden']) .aside-start-cluster, :host([aside-end-state='hidden']) .aside-end-cluster { grid-template-columns: 0fr; min-width: calc(var(--ds-size-sm) / 2 + var(--ds-space-2)); } :host([aside-state='hidden']) aside[part=\"aside\"], :host([aside-end-state='hidden']) aside[part=\"aside-end\"] { padding-inline: 0; opacity: 0; pointer-events: none; } :host([aside-state='compact']) aside[part=\"aside\"] ::slotted(ds-sidenav) { width: var(--ds-sidenav-collapsed-width, var(--ds-space-14, 3.5rem)) !important; } @media (prefers-reduced-motion: reduce) { .aside-start-cluster, .aside-end-cluster, aside { transition: none; } } .aside-toggle-rail { position: absolute; inset-block-start: var(--ds-space-
|
|
15728
|
+
"default": "css` :host { --ds-page-shell-max-width: none; --ds-page-shell-aside-toggle-clearance: calc(var(--ds-size-sm) / 2); 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 minmax(0, 1fr) auto; min-height: 0; } .presence-slot { display: none; } .aside-start-cluster, .aside-end-cluster { display: grid; grid-template-columns: 1fr; position: relative; min-width: 0; min-height: 0; transition: grid-template-columns var(--ds-duration-slow) var(--ds-easing-standard); } .aside-start-cluster { grid-column: 1; border-inline-end: 1px solid var(--ds-color-border); } .aside-end-cluster { grid-column: 3; border-inline-start: 1px solid var(--ds-color-border); } main { grid-column: 2; } aside { display: flex; box-sizing: border-box; overflow-x: clip; overflow-y: auto; overflow-clip-margin-inline: var(--ds-space-2); min-width: 0; min-height: 0; --ds-scroll-fade-depth: var(--ds-space-12, 3rem); scrollbar-width: none; mask-image: var(--ds-scroll-fade-mask); transition: opacity var(--ds-duration-slow) var(--ds-easing-standard); } aside::-webkit-scrollbar { display: none; } :host([aside-toggle]) aside[part=\"aside\"] { padding-inline-end: var(--ds-page-shell-aside-toggle-clearance); } :host([aside-end-toggle]) aside[part=\"aside-end\"] { padding-inline-start: var(--ds-page-shell-aside-toggle-clearance); } :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; } aside[hidden] { display: none; } /* Collapsing to 0fr animates the grid track from its content width to zero without measuring it in JS; the aside clips via overflow + min-width: 0. The cluster keeps a small min-width so the toggle button that straddles its edge never touches the viewport edge. */ :host([aside-state='hidden']) .aside-start-cluster, :host([aside-end-state='hidden']) .aside-end-cluster { grid-template-columns: 0fr; min-width: calc(var(--ds-size-sm) / 2 + var(--ds-space-2)); } :host([aside-state='hidden']) aside[part=\"aside\"], :host([aside-end-state='hidden']) aside[part=\"aside-end\"] { padding-inline: 0; opacity: 0; pointer-events: none; } :host([aside-state='compact']) aside[part=\"aside\"] ::slotted(ds-sidenav) { width: var(--ds-sidenav-collapsed-width, var(--ds-space-14, 3.5rem)) !important; } @media (prefers-reduced-motion: reduce) { .aside-start-cluster, .aside-end-cluster, aside { transition: none; } } .aside-toggle-rail { position: absolute; inset-block-start: var(--ds-space-4); z-index: 1; width: var(--ds-size-sm); min-width: var(--ds-size-sm); height: var(--ds-size-sm); } .aside-toggle-start-rail { inset-inline-end: calc(var(--ds-size-sm) / -2); } .aside-toggle-end-rail { inset-inline-start: calc(var(--ds-size-sm) / -2); } .aside-toggle::part(button) { flex-shrink: 0; background: var(--ds-color-bg); border-color: var(--ds-color-border); } .aside-toggle:hover::part(button) { background: var(--ds-color-bg-subtle); } 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]) main { grid-column: 1; } :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; } `"
|
|
15729
15729
|
}
|
|
15730
15730
|
],
|
|
15731
15731
|
"exports": [
|
|
@@ -61,7 +61,7 @@ export const navControlStyles = css `
|
|
|
61
61
|
display: flex;
|
|
62
62
|
width: 100%;
|
|
63
63
|
}
|
|
64
|
-
:host([role='listitem']
|
|
64
|
+
:host([role='listitem']:not([compact])):host-context(ds-nav-group) .nav-control {
|
|
65
65
|
display: flex;
|
|
66
66
|
width: 100%;
|
|
67
67
|
padding-inline-start: var(--ds-space-5);
|
|
@@ -158,7 +158,7 @@ export const pageShellStyles = css `
|
|
|
158
158
|
|
|
159
159
|
.aside-toggle-rail {
|
|
160
160
|
position: absolute;
|
|
161
|
-
inset-block-start: var(--ds-space-
|
|
161
|
+
inset-block-start: var(--ds-space-4);
|
|
162
162
|
z-index: 1;
|
|
163
163
|
width: var(--ds-size-sm);
|
|
164
164
|
min-width: var(--ds-size-sm);
|
package/package.json
CHANGED