@jsekulowicz/ds-components 0.3.0 → 0.3.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
|
@@ -13821,7 +13821,7 @@
|
|
|
13821
13821
|
{
|
|
13822
13822
|
"kind": "variable",
|
|
13823
13823
|
"name": "pageShellStyles",
|
|
13824
|
-
"default": "css` :host { --ds-page-shell-max-width: 90rem; display: flex; flex-direction: column; position: relative; min-height: 100vh; overflow-x: clip; background: var(--ds-color-bg); color: var(--ds-color-fg); font-family: var(--ds-font-body); } header { border-bottom: 1px solid var(--ds-color-border); padding: var(--ds-space-2)
|
|
13824
|
+
"default": "css` :host { --ds-page-shell-max-width: 90rem; display: flex; flex-direction: column; position: relative; min-height: 100vh; overflow-x: clip; background: var(--ds-color-bg); color: var(--ds-color-fg); font-family: var(--ds-font-body); } header { border-bottom: 1px solid var(--ds-color-border); padding: var(--ds-space-2) 0; 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); } footer { border-top: 1px solid var(--ds-color-border); padding: var(--ds-space-2) 0; } :host([footer-empty]) footer { padding: 0; border-top: 0; } .shell-inner { width: 100%; max-width: var(--ds-page-shell-max-width); margin-inline: auto; padding-inline: var(--ds-space-5); } .shell-inner--header { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-3); } .shell-body { flex: 1; width: 100%; max-width: var(--ds-page-shell-max-width); margin-inline: auto; display: grid; grid-template-columns: auto 1fr; min-height: 0; } :host([aside-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; scrollbar-gutter: stable; } :host([aside-empty]) aside, :host([aside-empty]) .mobile-backdrop { display: none; } main { padding: var(--ds-space-5); overflow-y: auto; min-height: 0; scrollbar-color: var(--ds-color-fg-subtle) transparent; scrollbar-width: thin; } .brand { font-family: var(--ds-font-display); font-size: var(--ds-font-size-lg); letter-spacing: var(--ds-letter-spacing-display); } .menu-toggle { display: inline-flex; } .mobile-backdrop { display: none; } .drawer-header { display: none; } .drawer-close { display: none; } .menu-toggle::part(button), .drawer-close::part(button) { min-width: var(--ds-size-sm); width: var(--ds-size-sm); padding: 0; } :host(:not([mobile-layout])) .menu-toggle { display: none; } :host([mobile-layout]) .shell-body { grid-template-columns: 1fr; } :host([mobile-layout]) .brand { flex: 1; } :host([mobile-layout]) 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 { transform: translateX(0); } :host([mobile-layout]) .drawer-header { display: flex; align-items: center; padding: var(--ds-space-2) var(--ds-space-2) 0; } :host([mobile-layout]) .drawer-close { display: inline-flex; margin: 0; } :host([mobile-layout]) 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); } `"
|
|
13825
13825
|
}
|
|
13826
13826
|
],
|
|
13827
13827
|
"exports": [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"page-shell.styles.d.ts","sourceRoot":"","sources":["../../../src/templates/page-shell/page-shell.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,
|
|
1
|
+
{"version":3,"file":"page-shell.styles.d.ts","sourceRoot":"","sources":["../../../src/templates/page-shell/page-shell.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,yBAuK3B,CAAC"}
|
|
@@ -15,7 +15,7 @@ export const pageShellStyles = css `
|
|
|
15
15
|
|
|
16
16
|
header {
|
|
17
17
|
border-bottom: 1px solid var(--ds-color-border);
|
|
18
|
-
padding: var(--ds-space-2)
|
|
18
|
+
padding: var(--ds-space-2) 0;
|
|
19
19
|
position: sticky;
|
|
20
20
|
top: 0;
|
|
21
21
|
background: color-mix(in oklab, var(--ds-color-bg) 92%, transparent);
|
|
@@ -25,7 +25,7 @@ export const pageShellStyles = css `
|
|
|
25
25
|
|
|
26
26
|
footer {
|
|
27
27
|
border-top: 1px solid var(--ds-color-border);
|
|
28
|
-
padding: var(--ds-space-2)
|
|
28
|
+
padding: var(--ds-space-2) 0;
|
|
29
29
|
}
|
|
30
30
|
|
|
31
31
|
:host([footer-empty]) footer {
|
|
@@ -37,6 +37,7 @@ export const pageShellStyles = css `
|
|
|
37
37
|
width: 100%;
|
|
38
38
|
max-width: var(--ds-page-shell-max-width);
|
|
39
39
|
margin-inline: auto;
|
|
40
|
+
padding-inline: var(--ds-space-5);
|
|
40
41
|
}
|
|
41
42
|
|
|
42
43
|
.shell-inner--header {
|
|
@@ -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;AAE1B,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,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuKjC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jsekulowicz/ds-components",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.1",
|
|
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.3.
|
|
385
|
-
"@jsekulowicz/ds-tokens": "0.3.
|
|
384
|
+
"@jsekulowicz/ds-core": "0.3.1",
|
|
385
|
+
"@jsekulowicz/ds-tokens": "0.3.1"
|
|
386
386
|
},
|
|
387
387
|
"devDependencies": {
|
|
388
388
|
"heroicons": "2.2.0",
|