@jsekulowicz/ds-components 0.7.0 → 0.7.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 +40 -3
- package/dist/atoms/nav-item/nav-control.styles.d.ts +2 -0
- package/dist/atoms/nav-item/nav-control.styles.d.ts.map +1 -0
- package/dist/atoms/nav-item/nav-control.styles.js +86 -0
- package/dist/atoms/nav-item/nav-control.styles.js.map +1 -0
- package/dist/atoms/nav-item/nav-group.d.ts.map +1 -1
- package/dist/atoms/nav-item/nav-group.js +14 -5
- package/dist/atoms/nav-item/nav-group.js.map +1 -1
- package/dist/atoms/nav-item/nav-group.styles.d.ts +1 -1
- package/dist/atoms/nav-item/nav-group.styles.d.ts.map +1 -1
- package/dist/atoms/nav-item/nav-group.styles.js +11 -60
- package/dist/atoms/nav-item/nav-group.styles.js.map +1 -1
- package/dist/atoms/nav-item/nav-item.d.ts.map +1 -1
- package/dist/atoms/nav-item/nav-item.js +3 -3
- package/dist/atoms/nav-item/nav-item.js.map +1 -1
- package/dist/atoms/nav-item/nav-item.styles.d.ts +1 -1
- package/dist/atoms/nav-item/nav-item.styles.d.ts.map +1 -1
- package/dist/atoms/nav-item/nav-item.styles.js +6 -81
- package/dist/atoms/nav-item/nav-item.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 +2 -1
- package/dist/templates/page-shell/page-shell.styles.js.map +1 -1
- package/package.json +3 -3
package/custom-elements.json
CHANGED
|
@@ -3583,6 +3583,27 @@
|
|
|
3583
3583
|
}
|
|
3584
3584
|
]
|
|
3585
3585
|
},
|
|
3586
|
+
{
|
|
3587
|
+
"kind": "javascript-module",
|
|
3588
|
+
"path": "src/atoms/nav-item/nav-control.styles.ts",
|
|
3589
|
+
"declarations": [
|
|
3590
|
+
{
|
|
3591
|
+
"kind": "variable",
|
|
3592
|
+
"name": "navControlStyles",
|
|
3593
|
+
"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-1); 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([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; } `"
|
|
3594
|
+
}
|
|
3595
|
+
],
|
|
3596
|
+
"exports": [
|
|
3597
|
+
{
|
|
3598
|
+
"kind": "js",
|
|
3599
|
+
"name": "navControlStyles",
|
|
3600
|
+
"declaration": {
|
|
3601
|
+
"name": "navControlStyles",
|
|
3602
|
+
"module": "src/atoms/nav-item/nav-control.styles.ts"
|
|
3603
|
+
}
|
|
3604
|
+
}
|
|
3605
|
+
]
|
|
3606
|
+
},
|
|
3586
3607
|
{
|
|
3587
3608
|
"kind": "javascript-module",
|
|
3588
3609
|
"path": "src/atoms/nav-item/nav-group.styles.ts",
|
|
@@ -3590,7 +3611,10 @@
|
|
|
3590
3611
|
{
|
|
3591
3612
|
"kind": "variable",
|
|
3592
3613
|
"name": "navGroupStyles",
|
|
3593
|
-
"
|
|
3614
|
+
"type": {
|
|
3615
|
+
"text": "array"
|
|
3616
|
+
},
|
|
3617
|
+
"default": "[ navControlStyles, css` .heading { width: 100%; } .label { flex: 1; } .heading[disabled] { cursor: default; } .chevron { display: inline-flex; flex: none; transition: transform var(--ds-duration-fast) var(--ds-easing-standard); } .chevron svg { width: 1rem; height: 1rem; } :host([expanded]) .chevron { transform: rotate(180deg); } .items { display: flex; flex-direction: column; gap: var(--ds-space-1); padding-left: var(--ds-space-2); } .items[hidden] { display: none; } :host([compact]) .label { clip-path: inset(50%); height: 1px; width: 1px; position: absolute; } :host([compact]) .heading { gap: var(--ds-space-1); } :host([compact]) .chevron svg { width: 0.75rem; height: 0.75rem; } :host([compact]) .items { padding-left: 0; } .icon-probe { display: none; } `, ]"
|
|
3594
3618
|
}
|
|
3595
3619
|
],
|
|
3596
3620
|
"exports": [
|
|
@@ -3714,6 +3738,16 @@
|
|
|
3714
3738
|
"name": "#onHeadingClick",
|
|
3715
3739
|
"privacy": "private"
|
|
3716
3740
|
},
|
|
3741
|
+
{
|
|
3742
|
+
"kind": "method",
|
|
3743
|
+
"name": "#renderIcon",
|
|
3744
|
+
"privacy": "private",
|
|
3745
|
+
"return": {
|
|
3746
|
+
"type": {
|
|
3747
|
+
"text": "TemplateResult"
|
|
3748
|
+
}
|
|
3749
|
+
}
|
|
3750
|
+
},
|
|
3717
3751
|
{
|
|
3718
3752
|
"kind": "method",
|
|
3719
3753
|
"name": "#renderHeading",
|
|
@@ -3792,7 +3826,10 @@
|
|
|
3792
3826
|
{
|
|
3793
3827
|
"kind": "variable",
|
|
3794
3828
|
"name": "navItemStyles",
|
|
3795
|
-
"
|
|
3829
|
+
"type": {
|
|
3830
|
+
"text": "array"
|
|
3831
|
+
},
|
|
3832
|
+
"default": "[ navControlStyles, css` :host([current]) .link { background: var(--ds-color-accent-subtle); color: var(--ds-color-accent-active); } :host([disabled]) .link { color: var(--ds-color-fg-subtle); cursor: not-allowed; } `, ]"
|
|
3796
3833
|
}
|
|
3797
3834
|
],
|
|
3798
3835
|
"exports": [
|
|
@@ -13833,7 +13870,7 @@
|
|
|
13833
13870
|
{
|
|
13834
13871
|
"kind": "variable",
|
|
13835
13872
|
"name": "pageShellStyles",
|
|
13836
|
-
"default": "css` :host { --ds-page-shell-max-width: 90rem; display: flex; flex-direction: column; position: relative;
|
|
13873
|
+
"default": "css` :host { --ds-page-shell-max-width: 90rem; 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; 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]) .mobile-backdrop { display: none; } :host([aside-end-empty]) aside[part=\"aside-end\"] { display: none; } main { padding: var(--ds-space-5); overflow: auto; 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), .drawer-close::part(button) { min-width: var(--ds-size-sm); width: var(--ds-size-sm); padding: 0; } :host([mobile-layout]) .menu-toggle { display: inline-flex; } .mobile-backdrop { display: none; } .drawer-header { display: none; } .drawer-brand { display: none; } .drawer-close { display: none; } :host([mobile-layout]) .shell-body { grid-template-columns: 1fr; } :host([mobile-layout]) aside[part=\"aside-end\"] { /* Secondary inline-end region is not surfaced in the mobile drawer in v1. Consumers can opt back in by overriding via ::part(aside-end). */ display: none; } :host([mobile-layout]) aside[part=\"aside\"] { position: absolute; top: 0; left: 0; width: 16rem; display: flex; flex-direction: column; height: 100%; background: var(--ds-color-bg); border-right: 0; z-index: var(--ds-z-index-modal); transform: translateX(-100%); transition: transform var(--ds-duration-slow) var(--ds-easing-standard); scrollbar-gutter: auto; overflow: hidden; box-sizing: border-box; } :host([mobile-layout][data-mobile-nav-open]) aside[part=\"aside\"] { transform: translateX(0); } :host([mobile-layout]) .drawer-header { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-3); padding: var(--ds-space-2) var(--ds-space-4); } :host([mobile-layout]) .drawer-brand { display: inline-flex; align-items: center; flex: 1; min-width: 0; font-family: var(--ds-font-display); font-size: var(--ds-font-size-lg); letter-spacing: var(--ds-letter-spacing-display); } :host([mobile-layout]) slot[name='drawer-brand']::slotted(*) { max-width: 100%; } :host([mobile-layout]) .drawer-close { display: inline-flex; flex: 0 0 auto; margin: 0; } :host([mobile-layout]) aside[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; } :host([mobile-layout][data-mobile-nav-open]) .mobile-backdrop { display: block; position: absolute; inset: 0; border: 0; margin: 0; padding: 0; background: color-mix(in oklab, var(--ds-color-fg) 26%, transparent); z-index: var(--ds-z-index-overlay); } `"
|
|
13837
13874
|
}
|
|
13838
13875
|
],
|
|
13839
13876
|
"exports": [
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"nav-control.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/nav-item/nav-control.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,yBAmF5B,CAAC"}
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
import { css } from 'lit';
|
|
2
|
+
export const navControlStyles = css `
|
|
3
|
+
:host {
|
|
4
|
+
display: block;
|
|
5
|
+
}
|
|
6
|
+
:host([compact]) .nav-control {
|
|
7
|
+
height: var(--ds-sidenav-item-compact-size);
|
|
8
|
+
width: var(--ds-sidenav-item-compact-size);
|
|
9
|
+
}
|
|
10
|
+
.nav-control {
|
|
11
|
+
display: inline-flex;
|
|
12
|
+
align-items: center;
|
|
13
|
+
box-sizing: border-box;
|
|
14
|
+
height: var(--ds-sidenav-item-height);
|
|
15
|
+
gap: var(--ds-space-1);
|
|
16
|
+
padding: var(--ds-space-2) var(--ds-space-3);
|
|
17
|
+
border: 0;
|
|
18
|
+
border-radius: var(--ds-radius-sm);
|
|
19
|
+
background: transparent;
|
|
20
|
+
color: var(--ds-color-fg-muted);
|
|
21
|
+
font-family: var(--ds-font-body);
|
|
22
|
+
font-size: var(--ds-font-size-sm);
|
|
23
|
+
font-weight: var(--ds-font-weight-medium);
|
|
24
|
+
text-align: left;
|
|
25
|
+
text-decoration: none;
|
|
26
|
+
cursor: pointer;
|
|
27
|
+
transition:
|
|
28
|
+
background var(--ds-duration-fast) var(--ds-easing-standard),
|
|
29
|
+
color var(--ds-duration-fast) var(--ds-easing-standard),
|
|
30
|
+
padding var(--ds-duration-slow) var(--ds-easing-standard);
|
|
31
|
+
}
|
|
32
|
+
.nav-control:hover:not(:disabled):not([aria-disabled='true']) {
|
|
33
|
+
background: var(--ds-color-bg-subtle);
|
|
34
|
+
color: var(--ds-color-fg);
|
|
35
|
+
}
|
|
36
|
+
.nav-control:focus-visible {
|
|
37
|
+
box-shadow: var(--ds-shadow-focus);
|
|
38
|
+
}
|
|
39
|
+
.icon {
|
|
40
|
+
display: inline-flex;
|
|
41
|
+
flex: none;
|
|
42
|
+
}
|
|
43
|
+
.icon[hidden] {
|
|
44
|
+
display: none;
|
|
45
|
+
}
|
|
46
|
+
.label {
|
|
47
|
+
display: inline-flex;
|
|
48
|
+
min-width: 0;
|
|
49
|
+
overflow: hidden;
|
|
50
|
+
white-space: nowrap;
|
|
51
|
+
max-width: 20rem;
|
|
52
|
+
opacity: 1;
|
|
53
|
+
transition:
|
|
54
|
+
max-width var(--ds-duration-slow) var(--ds-easing-standard),
|
|
55
|
+
opacity var(--ds-duration-fast) var(--ds-easing-standard);
|
|
56
|
+
}
|
|
57
|
+
:host-context(ds-sidenav) {
|
|
58
|
+
display: block;
|
|
59
|
+
}
|
|
60
|
+
:host-context(ds-sidenav) .nav-control {
|
|
61
|
+
display: flex;
|
|
62
|
+
width: 100%;
|
|
63
|
+
}
|
|
64
|
+
:host([compact]) .label {
|
|
65
|
+
max-width: 0;
|
|
66
|
+
opacity: 0;
|
|
67
|
+
}
|
|
68
|
+
:host([compact]) .nav-control {
|
|
69
|
+
justify-content: center;
|
|
70
|
+
padding: var(--ds-space-2);
|
|
71
|
+
gap: 0;
|
|
72
|
+
}
|
|
73
|
+
.tooltip-wrapper {
|
|
74
|
+
display: block;
|
|
75
|
+
width: 100%;
|
|
76
|
+
}
|
|
77
|
+
:host([compact]) .tooltip-wrapper {
|
|
78
|
+
display: flex;
|
|
79
|
+
justify-content: center;
|
|
80
|
+
}
|
|
81
|
+
:host([compact]) .tooltip-wrapper::part(anchor) {
|
|
82
|
+
display: inline-flex;
|
|
83
|
+
width: auto;
|
|
84
|
+
}
|
|
85
|
+
`;
|
|
86
|
+
//# sourceMappingURL=nav-control.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"nav-control.styles.js","sourceRoot":"","sources":["../../../src/atoms/nav-item/nav-control.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmFlC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nav-group.d.ts","sourceRoot":"","sources":["../../../src/atoms/nav-item/nav-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAErE,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjD,OAAO,sBAAsB,CAAC;AAI9B;;;;;;;;;GASG;AACH,qBAAa,UAAW,SAAQ,SAAS;;IACvC,OAAgB,MAAM,
|
|
1
|
+
{"version":3,"file":"nav-group.d.ts","sourceRoot":"","sources":["../../../src/atoms/nav-item/nav-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAErE,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjD,OAAO,sBAAsB,CAAC;AAI9B;;;;;;;;;GASG;AACH,qBAAa,UAAW,SAAQ,SAAS;;IACvC,OAAgB,MAAM,4BAA4C;IAEtD,KAAK,SAAM;IACqB,QAAQ,UAAS;IAChC,WAAW,UAAQ;IACJ,OAAO,UAAS;IAEnD,OAAO,CAAC,QAAQ,CAAS;IAEzB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAiFtC,MAAM,IAAI,cAAc;CA2BlC"}
|
|
@@ -40,7 +40,7 @@ export class DsNavGroup extends DsElement {
|
|
|
40
40
|
this.emit('ds-group-toggle', { detail: { expanded: this.expanded } });
|
|
41
41
|
};
|
|
42
42
|
}
|
|
43
|
-
static { this.styles = [...DsElement.styles, navGroupStyles]; }
|
|
43
|
+
static { this.styles = [...DsElement.styles, ...navGroupStyles]; }
|
|
44
44
|
updated(changed) {
|
|
45
45
|
if (changed.has('compact') || changed.has('_hasIcon')) {
|
|
46
46
|
this.#warnIfMissingIcon();
|
|
@@ -60,12 +60,23 @@ export class DsNavGroup extends DsElement {
|
|
|
60
60
|
}
|
|
61
61
|
#onIconSlotChange;
|
|
62
62
|
#onHeadingClick;
|
|
63
|
+
#renderIcon() {
|
|
64
|
+
const iconSlot = html `<slot name="icon" @slotchange=${this.#onIconSlotChange}></slot>`;
|
|
65
|
+
if (this._hasIcon) {
|
|
66
|
+
return html `<span class="icon" part="icon">${iconSlot}</span>`;
|
|
67
|
+
}
|
|
68
|
+
return html `<slot
|
|
69
|
+
class="icon-probe"
|
|
70
|
+
name="icon"
|
|
71
|
+
@slotchange=${this.#onIconSlotChange}
|
|
72
|
+
></slot>`;
|
|
73
|
+
}
|
|
63
74
|
#renderHeading() {
|
|
64
75
|
const headingId = `${this.uid}-heading`;
|
|
65
76
|
const itemsId = `${this.uid}-items`;
|
|
66
77
|
const isOpen = !this.collapsible || this.expanded;
|
|
67
78
|
return html `<button
|
|
68
|
-
class="heading"
|
|
79
|
+
class="heading nav-control"
|
|
69
80
|
part="heading"
|
|
70
81
|
id=${headingId}
|
|
71
82
|
type="button"
|
|
@@ -75,9 +86,7 @@ export class DsNavGroup extends DsElement {
|
|
|
75
86
|
?disabled=${!this.collapsible}
|
|
76
87
|
@click=${this.#onHeadingClick}
|
|
77
88
|
>
|
|
78
|
-
|
|
79
|
-
<slot name="icon" @slotchange=${this.#onIconSlotChange}></slot>
|
|
80
|
-
</span>
|
|
89
|
+
${this.#renderIcon()}
|
|
81
90
|
<span class="label">${this.label}</span>
|
|
82
91
|
${this.collapsible
|
|
83
92
|
? html `<span class="chevron" part="chevron" aria-hidden="true">
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nav-group.js","sourceRoot":"","sources":["../../../src/atoms/nav-item/nav-group.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAA4C,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,sBAAsB,CAAC;AAE9B,MAAM,sBAAsB,GAAG,IAAI,CAAC;AAEpC;;;;;;;;;GASG;AACH,MAAM,OAAO,UAAW,SAAQ,SAAS;IAAzC;;QAGc,UAAK,GAAG,EAAE,CAAC;QACqB,aAAQ,GAAG,KAAK,CAAC;QAChC,gBAAW,GAAG,IAAI,CAAC;QACJ,YAAO,GAAG,KAAK,CAAC;QAE3C,aAAQ,GAAG,KAAK,CAAC;QA0BlC,sBAAiB,GAAG,GAAS,EAAE;YAC7B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACxC,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC5B,CAAC,CAAC;QAEF,oBAAe,GAAG,GAAS,EAAE;YAC3B,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;gBACtB,OAAO;YACT,CAAC;YACD,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;YAC/B,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,EAAE,MAAM,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;QACxE,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"nav-group.js","sourceRoot":"","sources":["../../../src/atoms/nav-item/nav-group.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export declare const navGroupStyles: import("lit").CSSResult;
|
|
1
|
+
export declare const navGroupStyles: import("lit").CSSResult[];
|
|
2
2
|
//# sourceMappingURL=nav-group.styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nav-group.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/nav-item/nav-group.styles.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"nav-group.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/nav-item/nav-group.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,cAAc,2BAqD1B,CAAC"}
|
|
@@ -1,53 +1,16 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
:host([compact]) {
|
|
7
|
-
.heading {
|
|
8
|
-
height: var(--ds-sidenav-item-compact-size);
|
|
9
|
-
width: var(--ds-sidenav-item-compact-size);
|
|
10
|
-
}
|
|
11
|
-
}
|
|
2
|
+
import { navControlStyles } from './nav-control.styles.js';
|
|
3
|
+
export const navGroupStyles = [
|
|
4
|
+
navControlStyles,
|
|
5
|
+
css `
|
|
12
6
|
.heading {
|
|
13
|
-
display: flex;
|
|
14
|
-
align-items: center;
|
|
15
|
-
gap: var(--ds-space-2);
|
|
16
7
|
width: 100%;
|
|
17
|
-
height: var(--ds-sidenav-item-height);
|
|
18
|
-
padding: var(--ds-space-2) var(--ds-space-3);
|
|
19
|
-
border: none;
|
|
20
|
-
background: transparent;
|
|
21
|
-
border-radius: var(--ds-radius-sm);
|
|
22
|
-
color: var(--ds-color-fg-subtle);
|
|
23
|
-
font-family: var(--ds-font-body);
|
|
24
|
-
font-size: var(--ds-font-size-2xs);
|
|
25
|
-
font-weight: var(--ds-font-weight-semibold);
|
|
26
|
-
letter-spacing: var(--ds-letter-spacing-wide);
|
|
27
|
-
text-transform: uppercase;
|
|
28
|
-
text-align: left;
|
|
29
|
-
cursor: pointer;
|
|
30
|
-
}
|
|
31
|
-
.heading[disabled] {
|
|
32
|
-
cursor: default;
|
|
33
|
-
}
|
|
34
|
-
.heading:hover:not([disabled]) {
|
|
35
|
-
color: var(--ds-color-fg);
|
|
36
|
-
}
|
|
37
|
-
.heading:focus-visible {
|
|
38
|
-
box-shadow: var(--ds-shadow-focus);
|
|
39
|
-
}
|
|
40
|
-
.icon {
|
|
41
|
-
display: inline-flex;
|
|
42
|
-
flex: none;
|
|
43
|
-
}
|
|
44
|
-
.icon[hidden] {
|
|
45
|
-
display: none;
|
|
46
8
|
}
|
|
47
9
|
.label {
|
|
48
10
|
flex: 1;
|
|
49
|
-
|
|
50
|
-
|
|
11
|
+
}
|
|
12
|
+
.heading[disabled] {
|
|
13
|
+
cursor: default;
|
|
51
14
|
}
|
|
52
15
|
.chevron {
|
|
53
16
|
display: inline-flex;
|
|
@@ -74,14 +37,10 @@ export const navGroupStyles = css `
|
|
|
74
37
|
clip-path: inset(50%);
|
|
75
38
|
height: 1px;
|
|
76
39
|
width: 1px;
|
|
77
|
-
overflow: hidden;
|
|
78
|
-
white-space: nowrap;
|
|
79
40
|
position: absolute;
|
|
80
41
|
}
|
|
81
42
|
:host([compact]) .heading {
|
|
82
|
-
justify-content: center;
|
|
83
43
|
gap: var(--ds-space-1);
|
|
84
|
-
padding: var(--ds-space-2);
|
|
85
44
|
}
|
|
86
45
|
:host([compact]) .chevron svg {
|
|
87
46
|
width: 0.75rem;
|
|
@@ -90,17 +49,9 @@ export const navGroupStyles = css `
|
|
|
90
49
|
:host([compact]) .items {
|
|
91
50
|
padding-left: 0;
|
|
92
51
|
}
|
|
93
|
-
.
|
|
94
|
-
display:
|
|
95
|
-
width: 100%;
|
|
96
|
-
}
|
|
97
|
-
:host([compact]) .tooltip-wrapper {
|
|
98
|
-
display: flex;
|
|
99
|
-
justify-content: center;
|
|
100
|
-
}
|
|
101
|
-
:host([compact]) .tooltip-wrapper::part(anchor) {
|
|
102
|
-
display: inline-flex;
|
|
103
|
-
width: auto;
|
|
52
|
+
.icon-probe {
|
|
53
|
+
display: none;
|
|
104
54
|
}
|
|
105
|
-
|
|
55
|
+
`,
|
|
56
|
+
];
|
|
106
57
|
//# sourceMappingURL=nav-group.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nav-group.styles.js","sourceRoot":"","sources":["../../../src/atoms/nav-item/nav-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"nav-group.styles.js","sourceRoot":"","sources":["../../../src/atoms/nav-item/nav-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE3D,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,gBAAgB;IAChB,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkDJ;CACA,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nav-item.d.ts","sourceRoot":"","sources":["../../../src/atoms/nav-item/nav-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE9E,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjD,OAAO,sBAAsB,CAAC;AAI9B;;;;;;;;GAQG;AACH,qBAAa,SAAU,SAAQ,SAAS;;IACtC,OAAgB,MAAM,
|
|
1
|
+
{"version":3,"file":"nav-item.d.ts","sourceRoot":"","sources":["../../../src/atoms/nav-item/nav-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE9E,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjD,OAAO,sBAAsB,CAAC;AAI9B;;;;;;;;GAQG;AACH,qBAAa,SAAU,SAAQ,SAAS;;IACtC,OAAgB,MAAM,4BAA2C;IAErD,IAAI,SAAM;IACV,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;IACjD,GAAG,CAAC,EAAE,MAAM,CAAC;IACmB,OAAO,UAAS;IAChB,QAAQ,UAAS;IACjB,OAAO,UAAS;IAEnD,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,UAAU,CAAM;IAExB,iBAAiB,IAAI,IAAI;IAKzB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAsEtC,MAAM,IAAI,cAAc;CAclC"}
|
|
@@ -41,7 +41,7 @@ export class DsNavItem extends DsElement {
|
|
|
41
41
|
.trim();
|
|
42
42
|
};
|
|
43
43
|
}
|
|
44
|
-
static { this.styles = [...DsElement.styles, navItemStyles]; }
|
|
44
|
+
static { this.styles = [...DsElement.styles, ...navItemStyles]; }
|
|
45
45
|
connectedCallback() {
|
|
46
46
|
super.connectedCallback();
|
|
47
47
|
this.setAttribute('role', 'listitem');
|
|
@@ -76,7 +76,7 @@ export class DsNavItem extends DsElement {
|
|
|
76
76
|
#renderLink() {
|
|
77
77
|
if (this.disabled) {
|
|
78
78
|
return html `<span
|
|
79
|
-
class="link"
|
|
79
|
+
class="link nav-control"
|
|
80
80
|
part="link"
|
|
81
81
|
aria-disabled="true"
|
|
82
82
|
aria-label=${this.compact && this._labelText ? this._labelText : nothing}
|
|
@@ -84,7 +84,7 @@ export class DsNavItem extends DsElement {
|
|
|
84
84
|
>`;
|
|
85
85
|
}
|
|
86
86
|
return html `<a
|
|
87
|
-
class="link"
|
|
87
|
+
class="link nav-control"
|
|
88
88
|
part="link"
|
|
89
89
|
href=${this.href}
|
|
90
90
|
target=${this.target ?? nothing}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nav-item.js","sourceRoot":"","sources":["../../../src/atoms/nav-item/nav-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAA4C,MAAM,KAAK,CAAC;AAC9E,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,sBAAsB,CAAC;AAE9B,MAAM,sBAAsB,GAAG,IAAI,CAAC;AAEpC;;;;;;;;GAQG;AACH,MAAM,OAAO,SAAU,SAAQ,SAAS;IAAxC;;QAGc,SAAI,GAAG,EAAE,CAAC;QAGsB,YAAO,GAAG,KAAK,CAAC;QAChB,aAAQ,GAAG,KAAK,CAAC;QACjB,YAAO,GAAG,KAAK,CAAC;QAE3C,aAAQ,GAAG,KAAK,CAAC;QACjB,eAAU,GAAG,EAAE,CAAC;QA+BjC,sBAAiB,GAAG,GAAS,EAAE;YAC7B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACxC,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC5B,CAAC,CAAC;QAEF,uBAAkB,GAAG,CAAC,CAAQ,EAAQ,EAAE;YACtC,MAAM,IAAI,GAAG,CAAC,CAAC,MAAyB,CAAC;YACzC,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;YACpD,IAAI,CAAC,UAAU,GAAG,KAAK;iBACpB,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,WAAW,IAAI,EAAE,CAAC;iBAC/B,IAAI,CAAC,EAAE,CAAC;iBACR,IAAI,EAAE,CAAC;QACZ,CAAC,CAAC;IAgDJ,CAAC;aArGiB,WAAM,GAAG,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,aAAa,CAAC,
|
|
1
|
+
{"version":3,"file":"nav-item.js","sourceRoot":"","sources":["../../../src/atoms/nav-item/nav-item.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export declare const navItemStyles: import("lit").CSSResult;
|
|
1
|
+
export declare const navItemStyles: import("lit").CSSResult[];
|
|
2
2
|
//# sourceMappingURL=nav-item.styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nav-item.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/nav-item/nav-item.styles.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"nav-item.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/nav-item/nav-item.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,aAAa,2BAYzB,CAAC"}
|
|
@@ -1,38 +1,8 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
:host([compact]) {
|
|
7
|
-
.link {
|
|
8
|
-
height: var(--ds-sidenav-item-compact-size);
|
|
9
|
-
width: var(--ds-sidenav-item-compact-size);
|
|
10
|
-
}
|
|
11
|
-
}
|
|
12
|
-
.link {
|
|
13
|
-
display: inline-flex;
|
|
14
|
-
align-items: center;
|
|
15
|
-
height: var(--ds-sidenav-item-height);
|
|
16
|
-
gap: var(--ds-space-1);
|
|
17
|
-
padding: var(--ds-space-2) var(--ds-space-3);
|
|
18
|
-
border-radius: var(--ds-radius-sm);
|
|
19
|
-
color: var(--ds-color-fg-muted);
|
|
20
|
-
font-family: var(--ds-font-body);
|
|
21
|
-
font-size: var(--ds-font-size-sm);
|
|
22
|
-
font-weight: var(--ds-font-weight-medium);
|
|
23
|
-
text-decoration: none;
|
|
24
|
-
transition:
|
|
25
|
-
background var(--ds-duration-fast) var(--ds-easing-standard),
|
|
26
|
-
color var(--ds-duration-fast) var(--ds-easing-standard),
|
|
27
|
-
padding var(--ds-duration-slow) var(--ds-easing-standard);
|
|
28
|
-
}
|
|
29
|
-
.link:hover {
|
|
30
|
-
background: var(--ds-color-bg-subtle);
|
|
31
|
-
color: var(--ds-color-fg);
|
|
32
|
-
}
|
|
33
|
-
.link:focus-visible {
|
|
34
|
-
box-shadow: var(--ds-shadow-focus);
|
|
35
|
-
}
|
|
2
|
+
import { navControlStyles } from './nav-control.styles.js';
|
|
3
|
+
export const navItemStyles = [
|
|
4
|
+
navControlStyles,
|
|
5
|
+
css `
|
|
36
6
|
:host([current]) .link {
|
|
37
7
|
background: var(--ds-color-accent-subtle);
|
|
38
8
|
color: var(--ds-color-accent-active);
|
|
@@ -41,51 +11,6 @@ export const navItemStyles = css `
|
|
|
41
11
|
color: var(--ds-color-fg-subtle);
|
|
42
12
|
cursor: not-allowed;
|
|
43
13
|
}
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
flex: none;
|
|
47
|
-
}
|
|
48
|
-
.icon[hidden] {
|
|
49
|
-
display: none;
|
|
50
|
-
}
|
|
51
|
-
.label {
|
|
52
|
-
display: inline-flex;
|
|
53
|
-
min-width: 0;
|
|
54
|
-
overflow: hidden;
|
|
55
|
-
white-space: nowrap;
|
|
56
|
-
max-width: 20rem;
|
|
57
|
-
opacity: 1;
|
|
58
|
-
transition:
|
|
59
|
-
max-width var(--ds-duration-slow) var(--ds-easing-standard),
|
|
60
|
-
opacity var(--ds-duration-fast) var(--ds-easing-standard);
|
|
61
|
-
}
|
|
62
|
-
:host-context(ds-sidenav) {
|
|
63
|
-
display: block;
|
|
64
|
-
}
|
|
65
|
-
:host-context(ds-sidenav) .link {
|
|
66
|
-
display: flex;
|
|
67
|
-
width: 100%;
|
|
68
|
-
}
|
|
69
|
-
:host([compact]) .label {
|
|
70
|
-
max-width: 0;
|
|
71
|
-
opacity: 0;
|
|
72
|
-
}
|
|
73
|
-
:host([compact]) .link {
|
|
74
|
-
justify-content: center;
|
|
75
|
-
padding: var(--ds-space-2);
|
|
76
|
-
gap: 0;
|
|
77
|
-
}
|
|
78
|
-
.tooltip-wrapper {
|
|
79
|
-
display: block;
|
|
80
|
-
width: 100%;
|
|
81
|
-
}
|
|
82
|
-
:host([compact]) .tooltip-wrapper {
|
|
83
|
-
display: flex;
|
|
84
|
-
justify-content: center;
|
|
85
|
-
}
|
|
86
|
-
:host([compact]) .tooltip-wrapper::part(anchor) {
|
|
87
|
-
display: inline-flex;
|
|
88
|
-
width: auto;
|
|
89
|
-
}
|
|
90
|
-
`;
|
|
14
|
+
`,
|
|
15
|
+
];
|
|
91
16
|
//# sourceMappingURL=nav-item.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nav-item.styles.js","sourceRoot":"","sources":["../../../src/atoms/nav-item/nav-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"nav-item.styles.js","sourceRoot":"","sources":["../../../src/atoms/nav-item/nav-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE3D,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,gBAAgB;IAChB,GAAG,CAAA;;;;;;;;;CASJ;CACA,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,yBA8M3B,CAAC"}
|
|
@@ -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
|
|
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAuGX,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuG5C,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jsekulowicz/ds-components",
|
|
3
|
-
"version": "0.7.
|
|
3
|
+
"version": "0.7.2",
|
|
4
4
|
"description": "Lit web components for the Design System Library (atoms, molecules, organisms, templates, pages).",
|
|
5
5
|
"license": "UNLICENSED",
|
|
6
6
|
"repository": {
|
|
@@ -385,8 +385,8 @@
|
|
|
385
385
|
],
|
|
386
386
|
"dependencies": {
|
|
387
387
|
"lit": "^3.2.1",
|
|
388
|
-
"@jsekulowicz/ds-
|
|
389
|
-
"@jsekulowicz/ds-
|
|
388
|
+
"@jsekulowicz/ds-tokens": "0.5.0",
|
|
389
|
+
"@jsekulowicz/ds-core": "0.5.0"
|
|
390
390
|
},
|
|
391
391
|
"devDependencies": {
|
|
392
392
|
"heroicons": "2.2.0",
|