@jsekulowicz/ds-components 0.4.0 → 0.5.0
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 +530 -495
- package/dist/atoms/icon/icon.d.ts +1 -1
- package/dist/atoms/icon/icon.d.ts.map +1 -1
- package/dist/atoms/icon/icon.js +4 -3
- package/dist/atoms/icon/icon.js.map +1 -1
- package/dist/atoms/icon/icon.styles.d.ts.map +1 -1
- package/dist/atoms/icon/icon.styles.js +8 -0
- package/dist/atoms/icon/icon.styles.js.map +1 -1
- package/dist/organisms/footer/footer.styles.d.ts.map +1 -1
- package/dist/organisms/footer/footer.styles.js +6 -1
- package/dist/organisms/footer/footer.styles.js.map +1 -1
- package/dist/organisms/navbar/navbar.js +1 -1
- package/dist/organisms/navbar/navbar.styles.d.ts.map +1 -1
- package/dist/organisms/navbar/navbar.styles.js +7 -1
- package/dist/organisms/navbar/navbar.styles.js.map +1 -1
- package/dist/templates/page-shell/page-shell.d.ts +4 -1
- package/dist/templates/page-shell/page-shell.d.ts.map +1 -1
- package/dist/templates/page-shell/page-shell.js +34 -4
- package/dist/templates/page-shell/page-shell.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 +45 -8
- package/dist/templates/page-shell/page-shell.styles.js.map +1 -1
- package/package.json +3 -3
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { type TemplateResult } from 'lit';
|
|
2
2
|
import { DsElement } from '@jsekulowicz/ds-core';
|
|
3
|
-
export type IconSize = 'sm' | 'md' | 'lg';
|
|
3
|
+
export type IconSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
|
|
4
4
|
export declare function registerIcon(name: string, svgMarkup: string): void;
|
|
5
5
|
export declare function getIcon(name: string): string | undefined;
|
|
6
6
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../src/atoms/icon/icon.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../src/atoms/icon/icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,cAAc,EAA0B,MAAM,KAAK,CAAC;AAI7E,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAGjD,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;AAIzD,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,IAAI,CAElE;AAED,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAExD;AAED;;;;GAIG;AACH,qBAAa,MAAO,SAAQ,SAAS;IACnC,OAAgB,MAAM,4BAAqC;IAE/C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACE,IAAI,EAAE,QAAQ,CAAQ;IAC1C,OAAO,CAAC,GAAG,CAAkC;IAE7C,UAAU,IAAI,IAAI;IAclB,MAAM,IAAI,cAAc;CAWlC"}
|
package/dist/atoms/icon/icon.js
CHANGED
|
@@ -4,8 +4,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
4
4
|
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
5
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
6
|
};
|
|
7
|
-
import { html,
|
|
7
|
+
import { html, svg } from 'lit';
|
|
8
8
|
import { property, state } from 'lit/decorators.js';
|
|
9
|
+
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
9
10
|
import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
|
|
10
11
|
import { DsElement } from '@jsekulowicz/ds-core';
|
|
11
12
|
import { iconStyles } from './icon.styles.js';
|
|
@@ -45,9 +46,9 @@ export class DsIcon extends DsElement {
|
|
|
45
46
|
const ariaHidden = this.label ? 'false' : 'true';
|
|
46
47
|
const role = this.label ? 'img' : undefined;
|
|
47
48
|
return html `<span
|
|
48
|
-
role=${role
|
|
49
|
+
role=${ifDefined(role)}
|
|
49
50
|
aria-hidden=${ariaHidden}
|
|
50
|
-
aria-label=${this.label
|
|
51
|
+
aria-label=${ifDefined(this.label)}
|
|
51
52
|
>
|
|
52
53
|
${this.svg ? this.svg : html `<slot></slot>`}
|
|
53
54
|
</span>`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/atoms/icon/icon.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,
|
|
1
|
+
{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/atoms/icon/icon.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAA+C,MAAM,KAAK,CAAC;AAC7E,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAI9C,MAAM,QAAQ,GAAG,IAAI,GAAG,EAAkB,CAAC;AAE3C,MAAM,UAAU,YAAY,CAAC,IAAY,EAAE,SAAiB;IAC1D,QAAQ,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;AAChC,CAAC;AAED,MAAM,UAAU,OAAO,CAAC,IAAY;IAClC,OAAO,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;AAC5B,CAAC;AAED;;;;GAIG;AACH,MAAM,OAAO,MAAO,SAAQ,SAAS;IAArC;;QAK+B,SAAI,GAAa,IAAI,CAAC;QAClC,QAAG,GAA6B,IAAI,CAAC;IA2BxD,CAAC;aAhCiB,WAAM,GAAG,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,UAAU,CAAC,AAApC,CAAqC;IAOlD,UAAU;QACjB,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACf,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC;YAChB,OAAO;QACT,CAAC;QACD,MAAM,MAAM,GAAG,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACvC,IAAI,CAAC,MAAM,EAAE,CAAC;YACZ,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC;YAChB,OAAO,CAAC,IAAI,CAAC,4BAA4B,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC;YACvD,OAAO;QACT,CAAC;QACD,IAAI,CAAC,GAAG,GAAG,GAAG,CAAA,GAAG,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC;IACvC,CAAC;IAEQ,MAAM;QACb,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC;QACjD,MAAM,IAAI,GAAsB,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC;QAC/D,OAAO,IAAI,CAAA;aACF,SAAS,CAAC,IAAI,CAAC;oBACR,UAAU;mBACX,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;;QAEhC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAA,eAAe;YACrC,CAAC;IACX,CAAC;;AA7BW;IAAX,QAAQ,EAAE;oCAAe;AACd;IAAX,QAAQ,EAAE;qCAAgB;AACE;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oCAAuB;AAClC;IAAhB,KAAK,EAAE;mCAA8C"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/icon/icon.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,
|
|
1
|
+
{"version":3,"file":"icon.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/icon/icon.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,yBA8BtB,CAAC"}
|
|
@@ -16,6 +16,14 @@ export const iconStyles = css `
|
|
|
16
16
|
width: 1.25em;
|
|
17
17
|
height: 1.25em;
|
|
18
18
|
}
|
|
19
|
+
:host([size='xl']) {
|
|
20
|
+
width: 1.25rem;
|
|
21
|
+
height: 1.25rem;
|
|
22
|
+
}
|
|
23
|
+
:host([size='2xl']) {
|
|
24
|
+
width: 1.5rem;
|
|
25
|
+
height: 1.5rem;
|
|
26
|
+
}
|
|
19
27
|
svg {
|
|
20
28
|
width: 100%;
|
|
21
29
|
height: 100%;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon.styles.js","sourceRoot":"","sources":["../../../src/atoms/icon/icon.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"icon.styles.js","sourceRoot":"","sources":["../../../src/atoms/icon/icon.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8B5B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"footer.styles.d.ts","sourceRoot":"","sources":["../../../src/organisms/footer/footer.styles.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"footer.styles.d.ts","sourceRoot":"","sources":["../../../src/organisms/footer/footer.styles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,YAAY,yBA4CxB,CAAC"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { css, unsafeCSS } from 'lit';
|
|
2
2
|
import { breakpoint } from '@jsekulowicz/ds-tokens';
|
|
3
3
|
const mobileBreakpoint = unsafeCSS(breakpoint.sm);
|
|
4
|
+
const belowDesktopBreakpoint = unsafeCSS(`calc(${breakpoint.lg} - 0.02px)`);
|
|
4
5
|
export const footerStyles = css `
|
|
5
6
|
:host {
|
|
6
7
|
display: block;
|
|
@@ -32,7 +33,6 @@ export const footerStyles = css `
|
|
|
32
33
|
@container (max-width: ${mobileBreakpoint}) {
|
|
33
34
|
footer {
|
|
34
35
|
gap: var(--ds-space-2);
|
|
35
|
-
padding: var(--ds-space-2) var(--ds-space-4);
|
|
36
36
|
font-size: var(--ds-font-size-xs);
|
|
37
37
|
}
|
|
38
38
|
.start,
|
|
@@ -41,5 +41,10 @@ export const footerStyles = css `
|
|
|
41
41
|
gap: var(--ds-space-2);
|
|
42
42
|
}
|
|
43
43
|
}
|
|
44
|
+
@media (max-width: ${belowDesktopBreakpoint}) {
|
|
45
|
+
footer {
|
|
46
|
+
padding-inline: var(--ds-space-4);
|
|
47
|
+
}
|
|
48
|
+
}
|
|
44
49
|
`;
|
|
45
50
|
//# sourceMappingURL=footer.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"footer.styles.js","sourceRoot":"","sources":["../../../src/organisms/footer/footer.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,MAAM,gBAAgB,GAAG,SAAS,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"footer.styles.js","sourceRoot":"","sources":["../../../src/organisms/footer/footer.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,MAAM,gBAAgB,GAAG,SAAS,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;AAClD,MAAM,sBAAsB,GAAG,SAAS,CAAC,QAAQ,UAAU,CAAC,EAAE,YAAY,CAAC,CAAC;AAE5E,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BA4BJ,gBAAgB;;;;;;;;;;;uBAWpB,sBAAsB;;;;;CAK5C,CAAC"}
|
|
@@ -68,7 +68,7 @@ export class DsNavbar extends DsElement {
|
|
|
68
68
|
aria-controls=${menuId}
|
|
69
69
|
@click=${this.#onToggle}
|
|
70
70
|
>
|
|
71
|
-
<ds-icon name=${iconName} size="
|
|
71
|
+
<ds-icon name=${iconName} size="xl"></ds-icon>
|
|
72
72
|
</button>
|
|
73
73
|
<div class="menu" part="menu" id=${menuId} role="list">
|
|
74
74
|
<slot></slot>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"navbar.styles.d.ts","sourceRoot":"","sources":["../../../src/organisms/navbar/navbar.styles.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"navbar.styles.d.ts","sourceRoot":"","sources":["../../../src/organisms/navbar/navbar.styles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,YAAY,yBAoFxB,CAAC"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { css, unsafeCSS } from 'lit';
|
|
2
2
|
import { breakpoint } from '@jsekulowicz/ds-tokens';
|
|
3
3
|
const tabletBreakpoint = unsafeCSS(breakpoint.md);
|
|
4
|
+
const belowDesktopBreakpoint = unsafeCSS(`calc(${breakpoint.lg} - 0.02px)`);
|
|
4
5
|
export const navbarStyles = css `
|
|
5
6
|
:host {
|
|
6
7
|
display: block;
|
|
@@ -11,7 +12,7 @@ export const navbarStyles = css `
|
|
|
11
12
|
display: flex;
|
|
12
13
|
align-items: center;
|
|
13
14
|
gap: var(--ds-space-4);
|
|
14
|
-
padding: var(--ds-space-3) var(--ds-space-
|
|
15
|
+
padding: var(--ds-space-3) var(--ds-space-5);
|
|
15
16
|
background: var(--ds-color-bg);
|
|
16
17
|
border-bottom: 1px solid var(--ds-color-border);
|
|
17
18
|
font-family: var(--ds-font-body);
|
|
@@ -80,5 +81,10 @@ export const navbarStyles = css `
|
|
|
80
81
|
display: flex;
|
|
81
82
|
}
|
|
82
83
|
}
|
|
84
|
+
@media (max-width: ${belowDesktopBreakpoint}) {
|
|
85
|
+
nav {
|
|
86
|
+
padding-inline: var(--ds-space-4);
|
|
87
|
+
}
|
|
88
|
+
}
|
|
83
89
|
`;
|
|
84
90
|
//# sourceMappingURL=navbar.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"navbar.styles.js","sourceRoot":"","sources":["../../../src/organisms/navbar/navbar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,MAAM,gBAAgB,GAAG,SAAS,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"navbar.styles.js","sourceRoot":"","sources":["../../../src/organisms/navbar/navbar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,MAAM,gBAAgB,GAAG,SAAS,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;AAClD,MAAM,sBAAsB,GAAG,SAAS,CAAC,QAAQ,UAAU,CAAC,EAAE,YAAY,CAAC,CAAC;AAE5E,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAmDJ,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBA4BpB,sBAAsB;;;;;CAK5C,CAAC"}
|
|
@@ -9,7 +9,8 @@ import '../../atoms/icon/icons/x-mark.js';
|
|
|
9
9
|
* @summary Application frame: header + aside + main + optional footer with responsive collapse.
|
|
10
10
|
* @slot brand - Top-left brand/logo.
|
|
11
11
|
* @slot header-actions - Top-right actions.
|
|
12
|
-
* @slot aside -
|
|
12
|
+
* @slot aside - Primary side navigation (inline-start). When empty, the column and hamburger toggle are not rendered.
|
|
13
|
+
* @slot aside-end - Secondary side region (inline-end), e.g. table of contents, contextual help. Hidden on mobile.
|
|
13
14
|
* @slot default - Main content.
|
|
14
15
|
* @slot footer - Footer content.
|
|
15
16
|
* @cssprop --ds-page-shell-max-width - Outer cap for the shell's content column. Header inner
|
|
@@ -21,8 +22,10 @@ export declare class DsPageShell extends DsElement {
|
|
|
21
22
|
static styles: import("lit").CSSResult[];
|
|
22
23
|
brand: string;
|
|
23
24
|
menuLabel: string;
|
|
25
|
+
endLabel: string;
|
|
24
26
|
private _mobileNavOpen;
|
|
25
27
|
private _hasAside;
|
|
28
|
+
private _hasAsideEnd;
|
|
26
29
|
private _hasFooter;
|
|
27
30
|
connectedCallback(): void;
|
|
28
31
|
disconnectedCallback(): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"page-shell.d.ts","sourceRoot":"","sources":["../../../src/templates/page-shell/page-shell.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEhD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjD,OAAO,8BAA8B,CAAC;AACtC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,kCAAkC,CAAC;AAE1C
|
|
1
|
+
{"version":3,"file":"page-shell.d.ts","sourceRoot":"","sources":["../../../src/templates/page-shell/page-shell.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEhD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjD,OAAO,8BAA8B,CAAC;AACtC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,kCAAkC,CAAC;AAE1C;;;;;;;;;;;;GAYG;AACH,qBAAa,WAAY,SAAQ,SAAS;;IACxC,OAAgB,MAAM,4BAA0C;IAEpD,KAAK,SAAM;IACgB,SAAS,SAAqB;IAC/B,QAAQ,SAA0B;IAC/D,OAAO,CAAC,cAAc,CAAS;IAC/B,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,UAAU,CAAS;IAI3B,iBAAiB,IAAI,IAAI;IAuBzB,oBAAoB,IAAI,IAAI;IAS5B,YAAY,IAAI,IAAI;IAkFpB,MAAM,IAAI,cAAc;CAuElC"}
|
|
@@ -17,7 +17,8 @@ import '../../atoms/icon/icons/x-mark.js';
|
|
|
17
17
|
* @summary Application frame: header + aside + main + optional footer with responsive collapse.
|
|
18
18
|
* @slot brand - Top-left brand/logo.
|
|
19
19
|
* @slot header-actions - Top-right actions.
|
|
20
|
-
* @slot aside -
|
|
20
|
+
* @slot aside - Primary side navigation (inline-start). When empty, the column and hamburger toggle are not rendered.
|
|
21
|
+
* @slot aside-end - Secondary side region (inline-end), e.g. table of contents, contextual help. Hidden on mobile.
|
|
21
22
|
* @slot default - Main content.
|
|
22
23
|
* @slot footer - Footer content.
|
|
23
24
|
* @cssprop --ds-page-shell-max-width - Outer cap for the shell's content column. Header inner
|
|
@@ -29,17 +30,22 @@ export class DsPageShell extends DsElement {
|
|
|
29
30
|
super(...arguments);
|
|
30
31
|
this.brand = '';
|
|
31
32
|
this.menuLabel = 'Navigation menu';
|
|
33
|
+
this.endLabel = 'Secondary navigation';
|
|
32
34
|
this._mobileNavOpen = false;
|
|
33
35
|
this._hasAside = false;
|
|
36
|
+
this._hasAsideEnd = false;
|
|
34
37
|
this._hasFooter = false;
|
|
35
38
|
this.#resizeObserver = null;
|
|
36
39
|
this.#slotObserver = null;
|
|
37
40
|
this.#syncSlotPresence = () => {
|
|
38
41
|
const aside = this.shadowRoot?.querySelector('slot[name="aside"]');
|
|
42
|
+
const asideEnd = this.shadowRoot?.querySelector('slot[name="aside-end"]');
|
|
39
43
|
const footer = this.shadowRoot?.querySelector('slot[name="footer"]');
|
|
40
44
|
this._hasAside = hasNamedSlotContent(this, 'aside', aside);
|
|
45
|
+
this._hasAsideEnd = hasNamedSlotContent(this, 'aside-end', asideEnd);
|
|
41
46
|
this._hasFooter = hasNamedSlotContent(this, 'footer', footer);
|
|
42
47
|
this.toggleAttribute('aside-empty', !this._hasAside);
|
|
48
|
+
this.toggleAttribute('aside-end-empty', !this._hasAsideEnd);
|
|
43
49
|
this.toggleAttribute('footer-empty', !this._hasFooter);
|
|
44
50
|
};
|
|
45
51
|
this.#syncLayout = (width) => {
|
|
@@ -86,6 +92,11 @@ export class DsPageShell extends DsElement {
|
|
|
86
92
|
this._hasAside = hasAssignedContent(slot);
|
|
87
93
|
this.toggleAttribute('aside-empty', !this._hasAside);
|
|
88
94
|
};
|
|
95
|
+
this.#onAsideEndSlotChange = (event) => {
|
|
96
|
+
const slot = event.target;
|
|
97
|
+
this._hasAsideEnd = hasAssignedContent(slot);
|
|
98
|
+
this.toggleAttribute('aside-end-empty', !this._hasAsideEnd);
|
|
99
|
+
};
|
|
89
100
|
this.#onFooterSlotChange = (event) => {
|
|
90
101
|
const slot = event.target;
|
|
91
102
|
this._hasFooter = hasAssignedContent(slot);
|
|
@@ -136,6 +147,7 @@ export class DsPageShell extends DsElement {
|
|
|
136
147
|
#closeMobileNav;
|
|
137
148
|
#onAsideClick;
|
|
138
149
|
#onAsideSlotChange;
|
|
150
|
+
#onAsideEndSlotChange;
|
|
139
151
|
#onFooterSlotChange;
|
|
140
152
|
render() {
|
|
141
153
|
const menuIcon = this._mobileNavOpen ? 'x-mark' : 'bars-3';
|
|
@@ -154,7 +166,7 @@ export class DsPageShell extends DsElement {
|
|
|
154
166
|
aria-controls="mobile-aside"
|
|
155
167
|
@click=${this.#toggleMobileNav}
|
|
156
168
|
>
|
|
157
|
-
<ds-icon slot="leading" name=${menuIcon} size="
|
|
169
|
+
<ds-icon slot="leading" name=${menuIcon} size="xl"></ds-icon>
|
|
158
170
|
</ds-button>`
|
|
159
171
|
: null}
|
|
160
172
|
<div class="brand">
|
|
@@ -171,7 +183,12 @@ export class DsPageShell extends DsElement {
|
|
|
171
183
|
@click=${this.#closeMobileNav}
|
|
172
184
|
></button>
|
|
173
185
|
<div class="shell-body" part="body">
|
|
174
|
-
<aside
|
|
186
|
+
<aside
|
|
187
|
+
id="mobile-aside"
|
|
188
|
+
part="aside"
|
|
189
|
+
aria-label=${this.menuLabel}
|
|
190
|
+
@click=${this.#onAsideClick}
|
|
191
|
+
>
|
|
175
192
|
<div class="drawer-header">
|
|
176
193
|
<ds-button
|
|
177
194
|
class="drawer-close"
|
|
@@ -181,7 +198,7 @@ export class DsPageShell extends DsElement {
|
|
|
181
198
|
aria-label="Close navigation"
|
|
182
199
|
@click=${this.#closeMobileNav}
|
|
183
200
|
>
|
|
184
|
-
<ds-icon slot="leading" name="x-mark" size="
|
|
201
|
+
<ds-icon slot="leading" name="x-mark" size="xl"></ds-icon>
|
|
185
202
|
</ds-button>
|
|
186
203
|
</div>
|
|
187
204
|
<slot name="aside" @slotchange=${this.#onAsideSlotChange}></slot>
|
|
@@ -189,6 +206,13 @@ export class DsPageShell extends DsElement {
|
|
|
189
206
|
<main part="main">
|
|
190
207
|
<slot></slot>
|
|
191
208
|
</main>
|
|
209
|
+
<aside
|
|
210
|
+
part="aside-end"
|
|
211
|
+
aria-label=${this.endLabel}
|
|
212
|
+
?hidden=${!this._hasAsideEnd}
|
|
213
|
+
>
|
|
214
|
+
<slot name="aside-end" @slotchange=${this.#onAsideEndSlotChange}></slot>
|
|
215
|
+
</aside>
|
|
192
216
|
</div>
|
|
193
217
|
${hasFooter
|
|
194
218
|
? html `<footer part="footer">
|
|
@@ -203,12 +227,18 @@ __decorate([
|
|
|
203
227
|
__decorate([
|
|
204
228
|
property({ attribute: 'menu-label' })
|
|
205
229
|
], DsPageShell.prototype, "menuLabel", void 0);
|
|
230
|
+
__decorate([
|
|
231
|
+
property({ attribute: 'end-label' })
|
|
232
|
+
], DsPageShell.prototype, "endLabel", void 0);
|
|
206
233
|
__decorate([
|
|
207
234
|
state()
|
|
208
235
|
], DsPageShell.prototype, "_mobileNavOpen", void 0);
|
|
209
236
|
__decorate([
|
|
210
237
|
state()
|
|
211
238
|
], DsPageShell.prototype, "_hasAside", void 0);
|
|
239
|
+
__decorate([
|
|
240
|
+
state()
|
|
241
|
+
], DsPageShell.prototype, "_hasAsideEnd", void 0);
|
|
212
242
|
__decorate([
|
|
213
243
|
state()
|
|
214
244
|
], DsPageShell.prototype, "_hasFooter", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"page-shell.js","sourceRoot":"","sources":["../../../src/templates/page-shell/page-shell.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,8BAA8B,CAAC;AACtC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,kCAAkC,CAAC;AAE1C
|
|
1
|
+
{"version":3,"file":"page-shell.js","sourceRoot":"","sources":["../../../src/templates/page-shell/page-shell.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"page-shell.styles.d.ts","sourceRoot":"","sources":["../../../src/templates/page-shell/page-shell.styles.ts"],"names":[],"mappings":"
|
|
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,yBAoM3B,CAAC"}
|
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
import { css } from 'lit';
|
|
1
|
+
import { css, unsafeCSS } from 'lit';
|
|
2
|
+
import { breakpoint } from '@jsekulowicz/ds-tokens';
|
|
3
|
+
const belowDesktopBreakpoint = unsafeCSS(`calc(${breakpoint.lg} - 0.02px)`);
|
|
2
4
|
export const pageShellStyles = css `
|
|
3
5
|
:host {
|
|
4
6
|
--ds-page-shell-max-width: 90rem;
|
|
@@ -47,11 +49,19 @@ export const pageShellStyles = css `
|
|
|
47
49
|
max-width: var(--ds-page-shell-max-width);
|
|
48
50
|
margin-inline: auto;
|
|
49
51
|
display: grid;
|
|
50
|
-
grid-template-columns: auto 1fr;
|
|
52
|
+
grid-template-columns: auto 1fr auto;
|
|
51
53
|
min-height: 0;
|
|
52
54
|
}
|
|
53
55
|
|
|
54
56
|
:host([aside-empty]) .shell-body {
|
|
57
|
+
grid-template-columns: 1fr auto;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
:host([aside-end-empty]) .shell-body {
|
|
61
|
+
grid-template-columns: auto 1fr;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
:host([aside-empty][aside-end-empty]) .shell-body {
|
|
55
65
|
grid-template-columns: 1fr;
|
|
56
66
|
}
|
|
57
67
|
|
|
@@ -62,20 +72,42 @@ export const pageShellStyles = css `
|
|
|
62
72
|
min-height: 0;
|
|
63
73
|
scrollbar-color: var(--ds-color-fg-subtle) transparent;
|
|
64
74
|
scrollbar-width: thin;
|
|
65
|
-
scrollbar-gutter:
|
|
75
|
+
/* No scrollbar-gutter reservation: the aside sits flush with its column
|
|
76
|
+
edge so the consumer's <main> solely owns the gap. The scrollbar
|
|
77
|
+
appears on demand when the aside genuinely overflows. */
|
|
66
78
|
}
|
|
67
79
|
|
|
68
|
-
:host([aside-empty]) aside,
|
|
80
|
+
:host([aside-empty]) aside[part="aside"],
|
|
69
81
|
:host([aside-empty]) .mobile-backdrop {
|
|
70
82
|
display: none;
|
|
71
83
|
}
|
|
72
84
|
|
|
85
|
+
:host([aside-end-empty]) aside[part="aside-end"] {
|
|
86
|
+
display: none;
|
|
87
|
+
}
|
|
88
|
+
|
|
73
89
|
main {
|
|
74
90
|
padding: var(--ds-space-5);
|
|
75
|
-
overflow
|
|
91
|
+
overflow: auto;
|
|
92
|
+
min-width: 0;
|
|
76
93
|
min-height: 0;
|
|
77
94
|
scrollbar-color: var(--ds-color-fg-subtle) transparent;
|
|
78
95
|
scrollbar-width: thin;
|
|
96
|
+
/* Reserve scrollbar gutters on both inline sides so the horizontal
|
|
97
|
+
content position stays symmetric whether the vertical scrollbar is
|
|
98
|
+
present or not. Without this, an overflowing main has its content
|
|
99
|
+
pushed inward on the inline-end side only (asymmetric margins). */
|
|
100
|
+
scrollbar-gutter: stable both-edges;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
@media (max-width: ${belowDesktopBreakpoint}) {
|
|
104
|
+
.shell-inner {
|
|
105
|
+
padding-inline: var(--ds-space-4);
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
main {
|
|
109
|
+
padding: var(--ds-space-4) var(--ds-space-2);
|
|
110
|
+
}
|
|
79
111
|
}
|
|
80
112
|
|
|
81
113
|
.brand {
|
|
@@ -110,10 +142,15 @@ export const pageShellStyles = css `
|
|
|
110
142
|
:host([mobile-layout]) .shell-body {
|
|
111
143
|
grid-template-columns: 1fr;
|
|
112
144
|
}
|
|
145
|
+
:host([mobile-layout]) aside[part="aside-end"] {
|
|
146
|
+
/* Secondary inline-end region is not surfaced in the mobile drawer in v1.
|
|
147
|
+
Consumers can opt back in by overriding via ::part(aside-end). */
|
|
148
|
+
display: none;
|
|
149
|
+
}
|
|
113
150
|
:host([mobile-layout]) .brand {
|
|
114
151
|
flex: 1;
|
|
115
152
|
}
|
|
116
|
-
:host([mobile-layout]) aside {
|
|
153
|
+
:host([mobile-layout]) aside[part="aside"] {
|
|
117
154
|
position: absolute;
|
|
118
155
|
top: 0;
|
|
119
156
|
left: 0;
|
|
@@ -130,7 +167,7 @@ export const pageShellStyles = css `
|
|
|
130
167
|
overflow: hidden;
|
|
131
168
|
box-sizing: border-box;
|
|
132
169
|
}
|
|
133
|
-
:host([mobile-layout][data-mobile-nav-open]) aside {
|
|
170
|
+
:host([mobile-layout][data-mobile-nav-open]) aside[part="aside"] {
|
|
134
171
|
transform: translateX(0);
|
|
135
172
|
}
|
|
136
173
|
:host([mobile-layout]) .drawer-header {
|
|
@@ -142,7 +179,7 @@ export const pageShellStyles = css `
|
|
|
142
179
|
display: inline-flex;
|
|
143
180
|
margin: 0;
|
|
144
181
|
}
|
|
145
|
-
:host([mobile-layout]) aside ::slotted(ds-sidenav) {
|
|
182
|
+
:host([mobile-layout]) aside[part="aside"] ::slotted(ds-sidenav) {
|
|
146
183
|
width: 100% !important;
|
|
147
184
|
max-width: 100% !important;
|
|
148
185
|
flex: 1 1 auto;
|
|
@@ -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,MAAM,KAAK,CAAC;
|
|
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAmGX,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiG5C,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jsekulowicz/ds-components",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.5.0",
|
|
4
4
|
"description": "Lit web components for the Design System Library (atoms, molecules, organisms, templates, pages).",
|
|
5
5
|
"license": "UNLICENSED",
|
|
6
6
|
"repository": {
|
|
@@ -381,8 +381,8 @@
|
|
|
381
381
|
],
|
|
382
382
|
"dependencies": {
|
|
383
383
|
"lit": "^3.2.1",
|
|
384
|
-
"@jsekulowicz/ds-core": "0.
|
|
385
|
-
"@jsekulowicz/ds-tokens": "0.
|
|
384
|
+
"@jsekulowicz/ds-core": "0.5.0",
|
|
385
|
+
"@jsekulowicz/ds-tokens": "0.5.0"
|
|
386
386
|
},
|
|
387
387
|
"devDependencies": {
|
|
388
388
|
"heroicons": "2.2.0",
|