@iyulab/desktop-patterns 0.6.2 → 0.7.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/dist/components/page-header/dp-page-header.d.ts +19 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +7 -6
- package/dist/page-header.js +89 -0
- package/dist/sidebar.js +8 -5
- package/package.json +8 -3
- package/tokens.css +18 -3
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
/**
|
|
3
|
+
* The top of a page or of a detail pane: a small eyebrow naming where you are, the heading (an
|
|
4
|
+
* `<h2>`), a line describing it, and the page's own actions — ruled off from what follows. It
|
|
5
|
+
* stands on its own rather than being part of `dp-page`, so a pane inside a page can have one.
|
|
6
|
+
* Container-sized: the actions sit beside the heading when there is room and drop under it when not.
|
|
7
|
+
*/
|
|
8
|
+
export declare class DpPageHeader extends LitElement {
|
|
9
|
+
static styles: import('lit').CSSResult;
|
|
10
|
+
eyebrow: string;
|
|
11
|
+
heading: string;
|
|
12
|
+
description: string;
|
|
13
|
+
render(): import('lit-html').TemplateResult<1>;
|
|
14
|
+
}
|
|
15
|
+
declare global {
|
|
16
|
+
interface HTMLElementTagNameMap {
|
|
17
|
+
'dp-page-header': DpPageHeader;
|
|
18
|
+
}
|
|
19
|
+
}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export * from './breakpoints.js';
|
|
2
2
|
export * from './components/page/dp-page.js';
|
|
3
|
+
export * from './components/page-header/dp-page-header.js';
|
|
3
4
|
export * from './components/list-detail/dp-list-detail.js';
|
|
4
5
|
export * from './components/sidebar/dp-sidebar.js';
|
|
5
6
|
export * from './components/toolbar/dp-toolbar.js';
|
package/dist/index.js
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { desktopMedia as e, desktopMinWidth as t } from "./breakpoints.js";
|
|
2
2
|
import { DpPage as n } from "./page.js";
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
|
|
3
|
+
import { DpPageHeader as r } from "./page-header.js";
|
|
4
|
+
import { DpListDetail as i } from "./list-detail.js";
|
|
5
|
+
import { DpSidebar as a, DpSidebarActionEvent as o, DpSidebarActivateEvent as s, DpSidebarSelectEvent as c } from "./sidebar.js";
|
|
6
|
+
import { DpToolbar as l, DpToolbarToggleEvent as u } from "./toolbar.js";
|
|
7
|
+
import { DpShell as d, DpShellSidebarCloseEvent as f } from "./shell.js";
|
|
8
|
+
import { DpShortcutOverlay as p, DpShortcutOverlayDismissEvent as m } from "./shortcut-overlay.js";
|
|
9
|
+
export { i as DpListDetail, n as DpPage, r as DpPageHeader, d as DpShell, f as DpShellSidebarCloseEvent, p as DpShortcutOverlay, m as DpShortcutOverlayDismissEvent, a as DpSidebar, o as DpSidebarActionEvent, s as DpSidebarActivateEvent, c as DpSidebarSelectEvent, l as DpToolbar, u as DpToolbarToggleEvent, e as desktopMedia, t as desktopMinWidth };
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
import { t as e } from "./decorate-CafwLXg5.js";
|
|
2
|
+
import { LitElement as t, css as n, html as r, nothing as i } from "lit";
|
|
3
|
+
import { customElement as a, property as o } from "lit/decorators.js";
|
|
4
|
+
//#region src/components/page-header/dp-page-header.ts
|
|
5
|
+
var s = class extends t {
|
|
6
|
+
constructor(...e) {
|
|
7
|
+
super(...e), this.eyebrow = "", this.heading = "", this.description = "";
|
|
8
|
+
}
|
|
9
|
+
static {
|
|
10
|
+
this.styles = n`
|
|
11
|
+
:host {
|
|
12
|
+
display: block;
|
|
13
|
+
container-type: inline-size;
|
|
14
|
+
padding-bottom: var(--dc-space-4, 16px);
|
|
15
|
+
border-bottom: 1px solid var(--dc-page-rule, var(--dc-color-border, #e2e2e4));
|
|
16
|
+
font-family: var(--dc-font-family, system-ui, sans-serif);
|
|
17
|
+
}
|
|
18
|
+
.grid {
|
|
19
|
+
display: grid;
|
|
20
|
+
grid-template-columns: minmax(0, 1fr) auto;
|
|
21
|
+
column-gap: var(--dc-space-4, 16px);
|
|
22
|
+
row-gap: var(--dc-space-1, 4px);
|
|
23
|
+
align-items: center;
|
|
24
|
+
}
|
|
25
|
+
.eyebrow {
|
|
26
|
+
grid-column: 1 / -1;
|
|
27
|
+
font-size: var(--dc-page-eyebrow-size, var(--dc-font-size-xs, 11px));
|
|
28
|
+
font-weight: var(--dc-font-weight-semibold, 600);
|
|
29
|
+
letter-spacing: 0.04em;
|
|
30
|
+
color: var(--dc-page-eyebrow-color, var(--dc-color-accent-text, #1d4ed8));
|
|
31
|
+
}
|
|
32
|
+
.title {
|
|
33
|
+
grid-column: 1;
|
|
34
|
+
display: flex;
|
|
35
|
+
flex-wrap: wrap;
|
|
36
|
+
align-items: center;
|
|
37
|
+
gap: var(--dc-space-2, 8px);
|
|
38
|
+
min-width: 0;
|
|
39
|
+
}
|
|
40
|
+
h2 {
|
|
41
|
+
margin: 0;
|
|
42
|
+
font-size: var(--dc-page-title-size, var(--dc-font-size-2xl, 22px));
|
|
43
|
+
font-weight: var(--dc-page-title-weight, var(--dc-font-weight-bold, 700));
|
|
44
|
+
line-height: var(--dc-line-height-tight, 1.3);
|
|
45
|
+
color: var(--dc-color-text, #1a1a1e);
|
|
46
|
+
overflow-wrap: anywhere;
|
|
47
|
+
}
|
|
48
|
+
.description {
|
|
49
|
+
grid-column: 1;
|
|
50
|
+
margin: 0;
|
|
51
|
+
color: var(--dc-page-description-color, var(--dc-color-text-secondary, #55555c));
|
|
52
|
+
}
|
|
53
|
+
.actions {
|
|
54
|
+
grid-column: 2;
|
|
55
|
+
grid-row: 2 / span 2;
|
|
56
|
+
display: flex;
|
|
57
|
+
flex-wrap: wrap;
|
|
58
|
+
gap: var(--dc-space-2, 8px);
|
|
59
|
+
align-items: center;
|
|
60
|
+
justify-content: flex-end;
|
|
61
|
+
}
|
|
62
|
+
:host(:not([eyebrow])) .actions,
|
|
63
|
+
:host([eyebrow='']) .actions {
|
|
64
|
+
grid-row: 1 / span 2;
|
|
65
|
+
}
|
|
66
|
+
@container (max-width: 480px) {
|
|
67
|
+
.actions,
|
|
68
|
+
:host(:not([eyebrow])) .actions,
|
|
69
|
+
:host([eyebrow='']) .actions {
|
|
70
|
+
grid-column: 1;
|
|
71
|
+
grid-row: auto;
|
|
72
|
+
justify-content: flex-start;
|
|
73
|
+
margin-top: var(--dc-space-2, 8px);
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
`;
|
|
77
|
+
}
|
|
78
|
+
render() {
|
|
79
|
+
return r`<div class="grid">
|
|
80
|
+
${this.eyebrow ? r`<span class="eyebrow">${this.eyebrow}</span>` : i}
|
|
81
|
+
<div class="title"><h2 part="heading">${this.heading}</h2><slot name="heading-extra"></slot></div>
|
|
82
|
+
${this.description ? r`<p class="description">${this.description}</p>` : i}
|
|
83
|
+
<div class="actions"><slot name="actions"></slot></div>
|
|
84
|
+
</div>`;
|
|
85
|
+
}
|
|
86
|
+
};
|
|
87
|
+
e([o({ reflect: !0 })], s.prototype, "eyebrow", void 0), e([o()], s.prototype, "heading", void 0), e([o()], s.prototype, "description", void 0), s = e([a("dp-page-header")], s);
|
|
88
|
+
//#endregion
|
|
89
|
+
export { s as DpPageHeader };
|
package/dist/sidebar.js
CHANGED
|
@@ -36,7 +36,7 @@ var c = (e) => Array.isArray(e.items), l = class extends Event {
|
|
|
36
36
|
height: 100%;
|
|
37
37
|
box-sizing: border-box;
|
|
38
38
|
width: var(--dp-sidebar-width, 220px);
|
|
39
|
-
background: var(--dc-color-surface, #f7f7f8);
|
|
39
|
+
background: var(--dp-sidebar-bg, var(--dc-color-surface, #f7f7f8));
|
|
40
40
|
border-right: 1px solid var(--dc-color-border, #e2e2e4);
|
|
41
41
|
font-family: var(--dc-font-family, system-ui, sans-serif);
|
|
42
42
|
}
|
|
@@ -61,8 +61,6 @@ var c = (e) => Array.isArray(e.items), l = class extends Event {
|
|
|
61
61
|
font-size: var(--dc-font-size-xs, 11px);
|
|
62
62
|
font-weight: var(--dc-font-weight-medium, 500);
|
|
63
63
|
color: var(--dc-color-text-secondary, #55555c);
|
|
64
|
-
text-transform: uppercase;
|
|
65
|
-
letter-spacing: 0.02em;
|
|
66
64
|
}
|
|
67
65
|
nav {
|
|
68
66
|
flex: 1;
|
|
@@ -85,7 +83,7 @@ var c = (e) => Array.isArray(e.items), l = class extends Event {
|
|
|
85
83
|
gap: var(--dc-space-3, 12px);
|
|
86
84
|
padding: var(--dc-space-2, 8px) var(--dc-space-3, 12px);
|
|
87
85
|
font: inherit;
|
|
88
|
-
font-size: var(--dc-font-size-sm, 12px);
|
|
86
|
+
font-size: var(--dp-sidebar-item-size, var(--dc-font-size-sm, 12px));
|
|
89
87
|
color: var(--dc-color-text-secondary, #55555c);
|
|
90
88
|
text-align: left;
|
|
91
89
|
text-decoration: none;
|
|
@@ -115,13 +113,18 @@ var c = (e) => Array.isArray(e.items), l = class extends Event {
|
|
|
115
113
|
variant; falling back to the fill accent keeps every existing consumer
|
|
116
114
|
rendering exactly as before. */
|
|
117
115
|
.item[aria-current='page'] {
|
|
118
|
-
border-left-color: var(--dc-color-accent, #2563eb);
|
|
116
|
+
border-left-color: var(--dc-indicator-color, var(--dc-color-accent, #2563eb));
|
|
117
|
+
background: var(--dc-selection-bg, transparent);
|
|
119
118
|
color: var(--dc-color-accent-text, var(--dc-color-accent, #2563eb));
|
|
120
119
|
font-weight: var(--dc-font-weight-medium, 500);
|
|
121
120
|
}
|
|
122
121
|
.item:hover {
|
|
123
122
|
background: var(--dc-color-surface-hover, #ececed);
|
|
124
123
|
}
|
|
124
|
+
/* Declared after :hover so hovering the active item keeps its selection ground. */
|
|
125
|
+
.item[aria-current='page']:hover {
|
|
126
|
+
background: var(--dc-selection-bg, var(--dc-color-surface-hover, #ececed));
|
|
127
|
+
}
|
|
125
128
|
.item:focus-visible {
|
|
126
129
|
outline: 2px solid var(--dc-color-accent, #2563eb);
|
|
127
130
|
outline-offset: -2px;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@iyulab/desktop-patterns",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.7.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -35,6 +35,11 @@
|
|
|
35
35
|
"import": "./dist/page.js",
|
|
36
36
|
"default": "./dist/page.js"
|
|
37
37
|
},
|
|
38
|
+
"./page-header": {
|
|
39
|
+
"types": "./dist/components/page-header/dp-page-header.d.ts",
|
|
40
|
+
"import": "./dist/page-header.js",
|
|
41
|
+
"default": "./dist/page-header.js"
|
|
42
|
+
},
|
|
38
43
|
"./list-detail": {
|
|
39
44
|
"types": "./dist/components/list-detail/dp-list-detail.d.ts",
|
|
40
45
|
"import": "./dist/list-detail.js",
|
|
@@ -77,10 +82,10 @@
|
|
|
77
82
|
"lit": "^3.3.3"
|
|
78
83
|
},
|
|
79
84
|
"peerDependencies": {
|
|
80
|
-
"@iyulab/desktop-compact": "^0.2.0 || ^0.3.0 || ^0.4.0 || ^0.5.0 || ^0.6.0 || ^0.7.0 || ^0.8.0 || ^0.9.0"
|
|
85
|
+
"@iyulab/desktop-compact": "^0.2.0 || ^0.3.0 || ^0.4.0 || ^0.5.0 || ^0.6.0 || ^0.7.0 || ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0"
|
|
81
86
|
},
|
|
82
87
|
"devDependencies": {
|
|
83
|
-
"@iyulab/desktop-compact": "^0.
|
|
88
|
+
"@iyulab/desktop-compact": "^0.11.0",
|
|
84
89
|
"@open-wc/testing": "^5.0.0",
|
|
85
90
|
"@storybook/web-components": "^10.6.0",
|
|
86
91
|
"@storybook/web-components-vite": "^10.6.0",
|
package/tokens.css
CHANGED
|
@@ -2,11 +2,26 @@
|
|
|
2
2
|
* Structural tokens for @iyulab/desktop-patterns.
|
|
3
3
|
*
|
|
4
4
|
* This file adds ONLY the dimensions this layer introduces that
|
|
5
|
-
* @iyulab/desktop-compact has no concept of (sidebar/header sizing)
|
|
6
|
-
* spacing-scale, radius, and
|
|
7
|
-
*
|
|
5
|
+
* @iyulab/desktop-compact has no concept of (sidebar/header sizing), and
|
|
6
|
+
* declares the sidebar's two role tokens. Color, spacing-scale, radius, and
|
|
7
|
+
* typography tokens are NOT duplicated here — import
|
|
8
|
+
* @iyulab/desktop-compact/tokens.css alongside this file; every
|
|
8
9
|
* desktop-patterns component consumes --dc-* directly.
|
|
10
|
+
*
|
|
11
|
+
* The role tokens are declared with @property, never given a value at :root:
|
|
12
|
+
* a var() value set there would resolve at :root and stop following an app's
|
|
13
|
+
* subtree override of the base token it points to.
|
|
9
14
|
*/
|
|
15
|
+
/* dp-sidebar's ground. Unset, the sidebar uses var(--dc-color-surface, #f7f7f8). */
|
|
16
|
+
@property --dp-sidebar-bg {
|
|
17
|
+
syntax: '*';
|
|
18
|
+
inherits: true;
|
|
19
|
+
}
|
|
20
|
+
/* dp-sidebar's item text size. Unset, the sidebar uses var(--dc-font-size-sm, 12px). */
|
|
21
|
+
@property --dp-sidebar-item-size {
|
|
22
|
+
syntax: '*';
|
|
23
|
+
inherits: true;
|
|
24
|
+
}
|
|
10
25
|
:root {
|
|
11
26
|
--dp-sidebar-width: 220px;
|
|
12
27
|
--dp-sidebar-width-collapsed: 52px;
|