@adia-ai/web-modules 0.6.4 → 0.6.7
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/CHANGELOG.md +22 -0
- package/generative/index.d.ts +11 -0
- package/generative/index.js +45 -0
- package/package.json +28 -1
- package/chat/chat-composer/chat-composer.examples.html +0 -28
- package/chat/chat-composer/chat-composer.html +0 -43
- package/chat/chat-empty/chat-empty.examples.html +0 -34
- package/chat/chat-empty/chat-empty.html +0 -42
- package/chat/chat-header/chat-header.examples.html +0 -30
- package/chat/chat-header/chat-header.html +0 -42
- package/chat/chat-shell/chat-shell.examples.html +0 -126
- package/chat/chat-shell/chat-shell.html +0 -42
- package/chat/chat-sidebar/chat-sidebar.examples.html +0 -36
- package/chat/chat-sidebar/chat-sidebar.html +0 -43
- package/chat/chat-status/chat-status.examples.html +0 -29
- package/chat/chat-status/chat-status.html +0 -42
- package/chat/chat-thread/chat-thread.examples.html +0 -36
- package/chat/chat-thread/chat-thread.html +0 -43
- package/editor/editor-canvas/editor-canvas.examples.html +0 -65
- package/editor/editor-canvas/editor-canvas.html +0 -43
- package/editor/editor-canvas-empty/editor-canvas-empty.examples.html +0 -65
- package/editor/editor-canvas-empty/editor-canvas-empty.html +0 -42
- package/editor/editor-canvas-toolbar/editor-canvas-toolbar.examples.html +0 -56
- package/editor/editor-canvas-toolbar/editor-canvas-toolbar.html +0 -42
- package/editor/editor-shell/editor-shell.examples.html +0 -71
- package/editor/editor-shell/editor-shell.html +0 -42
- package/editor/editor-sidebar/editor-sidebar.examples.html +0 -65
- package/editor/editor-sidebar/editor-sidebar.html +0 -43
- package/editor/editor-statusbar/editor-statusbar.examples.html +0 -65
- package/editor/editor-statusbar/editor-statusbar.html +0 -42
- package/editor/editor-toolbar/editor-toolbar.examples.html +0 -65
- package/editor/editor-toolbar/editor-toolbar.html +0 -43
- package/shell/admin-command/admin-command.examples.html +0 -83
- package/shell/admin-command/admin-command.html +0 -42
- package/shell/admin-content/admin-content.examples.html +0 -33
- package/shell/admin-content/admin-content.html +0 -42
- package/shell/admin-page/admin-page.examples.html +0 -37
- package/shell/admin-page/admin-page.html +0 -42
- package/shell/admin-page-body/admin-page-body.examples.html +0 -34
- package/shell/admin-page-body/admin-page-body.html +0 -42
- package/shell/admin-page-header/admin-page-header.examples.html +0 -34
- package/shell/admin-page-header/admin-page-header.html +0 -42
- package/shell/admin-scroll/admin-scroll.examples.html +0 -31
- package/shell/admin-scroll/admin-scroll.html +0 -42
- package/shell/admin-shell/admin-shell.examples.html +0 -181
- package/shell/admin-shell/admin-shell.html +0 -46
- package/shell/admin-sidebar/admin-sidebar.examples.html +0 -76
- package/shell/admin-sidebar/admin-sidebar.html +0 -47
- package/shell/admin-statusbar/admin-statusbar.examples.html +0 -29
- package/shell/admin-statusbar/admin-statusbar.html +0 -42
- package/shell/admin-topbar/admin-topbar.examples.html +0 -31
- package/shell/admin-topbar/admin-topbar.html +0 -42
- package/simple/simple-content/simple-content.examples.html +0 -13
- package/simple/simple-content/simple-content.html +0 -42
- package/simple/simple-hero/simple-hero.examples.html +0 -33
- package/simple/simple-hero/simple-hero.html +0 -42
- package/simple/simple-shell/simple-shell.examples.html +0 -42
- package/simple/simple-shell/simple-shell.html +0 -42
- package/theme/theme-panel/theme-panel.examples.html +0 -112
- package/theme/theme-panel/theme-panel.html +0 -75
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en" data-theme="auto">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
6
|
-
<title>Admin Page Body — AdiaUI</title>
|
|
7
|
-
|
|
8
|
-
<link rel="stylesheet" href="../../../web-components/styles/resets.css">
|
|
9
|
-
<link rel="stylesheet" href="../../../web-components/styles/tokens.css">
|
|
10
|
-
<link rel="stylesheet" href="../admin-shell/admin-shell.css">
|
|
11
|
-
<link rel="stylesheet" href="../../../web-components/components/code/code.css">
|
|
12
|
-
<link rel="stylesheet" href="../../../web-components/components/tag/tag.css">
|
|
13
|
-
|
|
14
|
-
<script type="module" src="../admin-shell/admin-shell.js"></script>
|
|
15
|
-
<script type="module" src="../../../web-components/components/code/code.js"></script>
|
|
16
|
-
<script type="module" src="../../../web-components/components/tag/tag.js"></script>
|
|
17
|
-
|
|
18
|
-
<style>
|
|
19
|
-
:where(html, body) { margin: 0; min-height: 100vh; background: var(--a-bg); color: var(--a-fg); font-family: var(--a-font); }
|
|
20
|
-
main { max-width: 960px; margin-inline: auto; padding: var(--a-space-6) var(--a-space-5); }
|
|
21
|
-
</style>
|
|
22
|
-
</head>
|
|
23
|
-
<body>
|
|
24
|
-
|
|
25
|
-
<main id="demo-root">
|
|
26
|
-
<p>Loading examples…</p>
|
|
27
|
-
</main>
|
|
28
|
-
|
|
29
|
-
<script type="module">
|
|
30
|
-
const root = document.getElementById('demo-root');
|
|
31
|
-
try {
|
|
32
|
-
const res = await fetch('./admin-page-body.examples.html');
|
|
33
|
-
if (!res.ok) throw new Error(`fetch failed (${res.status})`);
|
|
34
|
-
root.innerHTML = await res.text();
|
|
35
|
-
} catch (err) {
|
|
36
|
-
root.innerHTML = `<p style="color:var(--a-danger-strong);">Failed to load admin-page-body.examples.html — ${err.message}</p>`;
|
|
37
|
-
console.error('[admin-page-body.html]', err);
|
|
38
|
-
}
|
|
39
|
-
</script>
|
|
40
|
-
|
|
41
|
-
</body>
|
|
42
|
-
</html>
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
<header>
|
|
2
|
-
<div>
|
|
3
|
-
<h1>Admin Page Header</h1>
|
|
4
|
-
<div data-actions>
|
|
5
|
-
<tag-ui size="sm">admin-page-header</tag-ui>
|
|
6
|
-
<tag-ui size="sm" variant="ghost">CSS-only</tag-ui>
|
|
7
|
-
</div>
|
|
8
|
-
</div>
|
|
9
|
-
<p>Module-tier page-header band. Sticky top band inside <admin-page>.</p>
|
|
10
|
-
</header>
|
|
11
|
-
|
|
12
|
-
<section data-section>
|
|
13
|
-
<h2 variant="section">Role</h2>
|
|
14
|
-
<p>This is a CSS-only structural stub — no JavaScript, no behavior. The shell host (<code><admin-shell></code>) styles it via tag-presence. Authors compose it with sibling bespoke children to express semantic shell-tier structure.</p>
|
|
15
|
-
</section>
|
|
16
|
-
|
|
17
|
-
<section data-section>
|
|
18
|
-
<h2 variant="section">Composition</h2>
|
|
19
|
-
<p>Typical placement inside <code><admin-shell></code>:</p>
|
|
20
|
-
<code-ui language="html"><admin-page>
|
|
21
|
-
<admin-page-header>
|
|
22
|
-
<header-ui>
|
|
23
|
-
<span slot="heading">Page Title</span>
|
|
24
|
-
<tab-list-ui slot="action">…tabs…</tab-list-ui>
|
|
25
|
-
</header-ui>
|
|
26
|
-
</admin-page-header>
|
|
27
|
-
<admin-page-body>…</admin-page-body>
|
|
28
|
-
</admin-page></code-ui>
|
|
29
|
-
</section>
|
|
30
|
-
|
|
31
|
-
<section data-section>
|
|
32
|
-
<h2 variant="section">Slot vocabulary</h2>
|
|
33
|
-
<p>See the <a href="../admin-shell/admin-shell.html"><code>admin-shell</code></a> demo for the full composition pattern. CSS-only stubs declare slot intent; the parent shell handles layout.</p>
|
|
34
|
-
</section>
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en" data-theme="auto">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
6
|
-
<title>Admin Page Header — AdiaUI</title>
|
|
7
|
-
|
|
8
|
-
<link rel="stylesheet" href="../../../web-components/styles/resets.css">
|
|
9
|
-
<link rel="stylesheet" href="../../../web-components/styles/tokens.css">
|
|
10
|
-
<link rel="stylesheet" href="../admin-shell/admin-shell.css">
|
|
11
|
-
<link rel="stylesheet" href="../../../web-components/components/code/code.css">
|
|
12
|
-
<link rel="stylesheet" href="../../../web-components/components/tag/tag.css">
|
|
13
|
-
|
|
14
|
-
<script type="module" src="../admin-shell/admin-shell.js"></script>
|
|
15
|
-
<script type="module" src="../../../web-components/components/code/code.js"></script>
|
|
16
|
-
<script type="module" src="../../../web-components/components/tag/tag.js"></script>
|
|
17
|
-
|
|
18
|
-
<style>
|
|
19
|
-
:where(html, body) { margin: 0; min-height: 100vh; background: var(--a-bg); color: var(--a-fg); font-family: var(--a-font); }
|
|
20
|
-
main { max-width: 960px; margin-inline: auto; padding: var(--a-space-6) var(--a-space-5); }
|
|
21
|
-
</style>
|
|
22
|
-
</head>
|
|
23
|
-
<body>
|
|
24
|
-
|
|
25
|
-
<main id="demo-root">
|
|
26
|
-
<p>Loading examples…</p>
|
|
27
|
-
</main>
|
|
28
|
-
|
|
29
|
-
<script type="module">
|
|
30
|
-
const root = document.getElementById('demo-root');
|
|
31
|
-
try {
|
|
32
|
-
const res = await fetch('./admin-page-header.examples.html');
|
|
33
|
-
if (!res.ok) throw new Error(`fetch failed (${res.status})`);
|
|
34
|
-
root.innerHTML = await res.text();
|
|
35
|
-
} catch (err) {
|
|
36
|
-
root.innerHTML = `<p style="color:var(--a-danger-strong);">Failed to load admin-page-header.examples.html — ${err.message}</p>`;
|
|
37
|
-
console.error('[admin-page-header.html]', err);
|
|
38
|
-
}
|
|
39
|
-
</script>
|
|
40
|
-
|
|
41
|
-
</body>
|
|
42
|
-
</html>
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
<header>
|
|
2
|
-
<div>
|
|
3
|
-
<h1>Admin Scroll</h1>
|
|
4
|
-
<div data-actions>
|
|
5
|
-
<tag-ui size="sm">admin-scroll</tag-ui>
|
|
6
|
-
<tag-ui size="sm" variant="ghost">CSS-only</tag-ui>
|
|
7
|
-
</div>
|
|
8
|
-
</div>
|
|
9
|
-
<p>Module-tier shell scroll surface. Single-axis vertical scroll, contained.</p>
|
|
10
|
-
</header>
|
|
11
|
-
|
|
12
|
-
<section data-section>
|
|
13
|
-
<h2 variant="section">Role</h2>
|
|
14
|
-
<p>This is a CSS-only structural stub — no JavaScript, no behavior. The shell host (<code><admin-shell></code>) styles it via tag-presence. Authors compose it with sibling bespoke children to express semantic shell-tier structure.</p>
|
|
15
|
-
</section>
|
|
16
|
-
|
|
17
|
-
<section data-section>
|
|
18
|
-
<h2 variant="section">Composition</h2>
|
|
19
|
-
<p>Typical placement inside <code><admin-shell></code>:</p>
|
|
20
|
-
<code-ui language="html"><admin-content>
|
|
21
|
-
<admin-topbar slot="header">…</admin-topbar>
|
|
22
|
-
<admin-scroll>
|
|
23
|
-
<admin-page>…</admin-page>
|
|
24
|
-
</admin-scroll>
|
|
25
|
-
</admin-content></code-ui>
|
|
26
|
-
</section>
|
|
27
|
-
|
|
28
|
-
<section data-section>
|
|
29
|
-
<h2 variant="section">Slot vocabulary</h2>
|
|
30
|
-
<p>See the <a href="../admin-shell/admin-shell.html"><code>admin-shell</code></a> demo for the full composition pattern. CSS-only stubs declare slot intent; the parent shell handles layout.</p>
|
|
31
|
-
</section>
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en" data-theme="auto">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
6
|
-
<title>Admin Scroll — AdiaUI</title>
|
|
7
|
-
|
|
8
|
-
<link rel="stylesheet" href="../../../web-components/styles/resets.css">
|
|
9
|
-
<link rel="stylesheet" href="../../../web-components/styles/tokens.css">
|
|
10
|
-
<link rel="stylesheet" href="../admin-shell/admin-shell.css">
|
|
11
|
-
<link rel="stylesheet" href="../../../web-components/components/code/code.css">
|
|
12
|
-
<link rel="stylesheet" href="../../../web-components/components/tag/tag.css">
|
|
13
|
-
|
|
14
|
-
<script type="module" src="../admin-shell/admin-shell.js"></script>
|
|
15
|
-
<script type="module" src="../../../web-components/components/code/code.js"></script>
|
|
16
|
-
<script type="module" src="../../../web-components/components/tag/tag.js"></script>
|
|
17
|
-
|
|
18
|
-
<style>
|
|
19
|
-
:where(html, body) { margin: 0; min-height: 100vh; background: var(--a-bg); color: var(--a-fg); font-family: var(--a-font); }
|
|
20
|
-
main { max-width: 960px; margin-inline: auto; padding: var(--a-space-6) var(--a-space-5); }
|
|
21
|
-
</style>
|
|
22
|
-
</head>
|
|
23
|
-
<body>
|
|
24
|
-
|
|
25
|
-
<main id="demo-root">
|
|
26
|
-
<p>Loading examples…</p>
|
|
27
|
-
</main>
|
|
28
|
-
|
|
29
|
-
<script type="module">
|
|
30
|
-
const root = document.getElementById('demo-root');
|
|
31
|
-
try {
|
|
32
|
-
const res = await fetch('./admin-scroll.examples.html');
|
|
33
|
-
if (!res.ok) throw new Error(`fetch failed (${res.status})`);
|
|
34
|
-
root.innerHTML = await res.text();
|
|
35
|
-
} catch (err) {
|
|
36
|
-
root.innerHTML = `<p style="color:var(--a-danger-strong);">Failed to load admin-scroll.examples.html — ${err.message}</p>`;
|
|
37
|
-
console.error('[admin-scroll.html]', err);
|
|
38
|
-
}
|
|
39
|
-
</script>
|
|
40
|
-
|
|
41
|
-
</body>
|
|
42
|
-
</html>
|
|
@@ -1,181 +0,0 @@
|
|
|
1
|
-
<header>
|
|
2
|
-
<div>
|
|
3
|
-
<h1>Admin Shell</h1>
|
|
4
|
-
<div data-actions>
|
|
5
|
-
<tag-ui size="sm">admin-shell</tag-ui>
|
|
6
|
-
</div>
|
|
7
|
-
</div>
|
|
8
|
-
<p>Behavior-only application shell. Wires sidebar toggles, resize handles, a Cmd+K command palette, and a ResizeObserver that drives responsive sidebar collapse. The shell binds interactions; the consumer supplies the DOM. The docs site you're reading runs inside one.</p>
|
|
9
|
-
</header>
|
|
10
|
-
|
|
11
|
-
<section data-section>
|
|
12
|
-
<h2 variant="section">Basic shape (legacy)</h2>
|
|
13
|
-
<p data-note>Author supplies the DOM (sidebars + main column + optional command dialog); the shell binds the interactions. This is the original raw-HTML authoring shape — still fully supported.</p>
|
|
14
|
-
<code-ui language="html"><admin-shell mode="rounded">
|
|
15
|
-
<aside data-sidebar="leading">
|
|
16
|
-
<header>…</header>
|
|
17
|
-
<section>
|
|
18
|
-
<nav-ui>…</nav-ui>
|
|
19
|
-
</section>
|
|
20
|
-
<footer>…</footer>
|
|
21
|
-
<div data-resize></div>
|
|
22
|
-
</aside>
|
|
23
|
-
|
|
24
|
-
<main>
|
|
25
|
-
<header>
|
|
26
|
-
<button-ui data-sidebar-toggle="leading" icon="sidebar" variant="ghost" size="sm"></button-ui>
|
|
27
|
-
<breadcrumb-ui>…</breadcrumb-ui>
|
|
28
|
-
</header>
|
|
29
|
-
<section>
|
|
30
|
-
<router-ui></router-ui>
|
|
31
|
-
</section>
|
|
32
|
-
<footer>
|
|
33
|
-
<span>Footer</span>
|
|
34
|
-
</footer>
|
|
35
|
-
</main>
|
|
36
|
-
|
|
37
|
-
<dialog data-command>
|
|
38
|
-
<command-ui placeholder="Search..."></command-ui>
|
|
39
|
-
</dialog>
|
|
40
|
-
</admin-shell></code-ui>
|
|
41
|
-
</section>
|
|
42
|
-
|
|
43
|
-
<section data-section>
|
|
44
|
-
<h2 variant="section">Basic shape (bespoke — recommended)</h2>
|
|
45
|
-
<p data-note>The bespoke shape uses module-namespaced custom elements (<code><admin-sidebar></code>, <code><admin-content></code>, etc.) per <a href="../../../../.brain/adrs/0023-bespoke-shell-tier-children.md">ADR-0023</a>. Each child owns its own behavior + state attributes; queryable from outside via <code>:has(admin-sidebar[collapsed])</code>.</p>
|
|
46
|
-
<code-ui language="html"><admin-shell mode="rounded">
|
|
47
|
-
<admin-sidebar slot="leading" resizable collapsible>
|
|
48
|
-
<admin-topbar slot="header">
|
|
49
|
-
<span slot="heading">Workspace</span>
|
|
50
|
-
</admin-topbar>
|
|
51
|
-
<nav-ui>…</nav-ui>
|
|
52
|
-
<admin-statusbar slot="footer">
|
|
53
|
-
<span>User</span>
|
|
54
|
-
</admin-statusbar>
|
|
55
|
-
<div data-resize></div>
|
|
56
|
-
</admin-sidebar>
|
|
57
|
-
|
|
58
|
-
<admin-content>
|
|
59
|
-
<admin-topbar slot="header">
|
|
60
|
-
<button-ui data-sidebar-toggle="leading" icon="sidebar" variant="ghost" size="sm"></button-ui>
|
|
61
|
-
<breadcrumb-ui slot="heading">…</breadcrumb-ui>
|
|
62
|
-
</admin-topbar>
|
|
63
|
-
<admin-scroll>
|
|
64
|
-
<admin-page>
|
|
65
|
-
<admin-page-header>
|
|
66
|
-
<header-ui><span slot="heading">Page Title</span></header-ui>
|
|
67
|
-
</admin-page-header>
|
|
68
|
-
<admin-page-body>
|
|
69
|
-
<section-ui>…content…</section-ui>
|
|
70
|
-
</admin-page-body>
|
|
71
|
-
</admin-page>
|
|
72
|
-
</admin-scroll>
|
|
73
|
-
<admin-statusbar slot="footer">
|
|
74
|
-
<span>Status</span>
|
|
75
|
-
</admin-statusbar>
|
|
76
|
-
</admin-content>
|
|
77
|
-
|
|
78
|
-
<admin-command>
|
|
79
|
-
<command-ui placeholder="Search..."></command-ui>
|
|
80
|
-
</admin-command>
|
|
81
|
-
</admin-shell></code-ui>
|
|
82
|
-
</section>
|
|
83
|
-
|
|
84
|
-
<section data-section>
|
|
85
|
-
<h2 variant="section">State as attribute</h2>
|
|
86
|
-
<p>Every queryable state is reflected on the relevant child element. Style cross-cuts via <code>:has()</code>:</p>
|
|
87
|
-
<code-ui language="css">/* Theme tweak when leading sidebar is collapsed */
|
|
88
|
-
admin-shell:has(admin-sidebar[slot="leading"][collapsed]) admin-content {
|
|
89
|
-
/* … */
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
/* Show focus indicator while command palette is open */
|
|
93
|
-
admin-shell:has(admin-command[open]) {
|
|
94
|
-
/* … */
|
|
95
|
-
}</code-ui>
|
|
96
|
-
<p data-note>JS reads the same attribute: <code>shell.querySelector('admin-sidebar[slot="leading"]').hasAttribute('collapsed')</code>. No threshold math, no <code>getBoundingClientRect</code>.</p>
|
|
97
|
-
</section>
|
|
98
|
-
|
|
99
|
-
<section data-section>
|
|
100
|
-
<h2 variant="section">Properties</h2>
|
|
101
|
-
<table>
|
|
102
|
-
<thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Description</th></tr></thead>
|
|
103
|
-
<tbody>
|
|
104
|
-
<tr><td><code>mode</code></td><td>string</td><td>—</td><td>Layout variant: <code>rounded</code> (softens edges), <code>borderless</code> (removes outer chrome). Empty is the default bordered surface. Multiple values allowed (e.g. <code>"rounded borderless"</code>).</td></tr>
|
|
105
|
-
</tbody>
|
|
106
|
-
</table>
|
|
107
|
-
</section>
|
|
108
|
-
|
|
109
|
-
<section data-section>
|
|
110
|
-
<h2 variant="section">Behavior wiring</h2>
|
|
111
|
-
<table>
|
|
112
|
-
<thead><tr><th>Affordance</th><th>Author markup</th><th>What the shell does</th></tr></thead>
|
|
113
|
-
<tbody>
|
|
114
|
-
<tr><td>Sidebar toggle</td><td><code>[data-sidebar-toggle="leading"]</code> / <code>[data-sidebar-toggle="trailing"]</code></td><td>Click flips <code>[collapsed]</code> on the corresponding sidebar. Persists in <code>localStorage</code>.</td></tr>
|
|
115
|
-
<tr><td>Sidebar resize</td><td><code><div data-resize></div></code> inside the sidebar</td><td>Pointer-drag resizes the aside; bounded by <code>--page-sidebar-min-width</code> / <code>--page-sidebar-max-width</code> CSS custom properties. Snaps below threshold to collapsed.</td></tr>
|
|
116
|
-
<tr><td>Command palette</td><td><code><dialog data-command></code> as a child of the shell</td><td><code>Cmd+K</code> / <code>Ctrl+K</code> calls <code>showModal()</code> on the inner dialog. Forwards <code>command-select</code> events from the inner <code><command-ui></code>.</td></tr>
|
|
117
|
-
<tr><td>Responsive collapse</td><td>(automatic)</td><td>ResizeObserver collapses sidebars when viewport drops below the breakpoint; restores on widen.</td></tr>
|
|
118
|
-
</tbody>
|
|
119
|
-
</table>
|
|
120
|
-
</section>
|
|
121
|
-
|
|
122
|
-
<section data-section>
|
|
123
|
-
<h2 variant="section">Events</h2>
|
|
124
|
-
<table>
|
|
125
|
-
<thead><tr><th>Event</th><th>Detail</th><th>Fires when</th></tr></thead>
|
|
126
|
-
<tbody>
|
|
127
|
-
<tr><td><code>sidebar-toggle</code></td><td><code>{ sidebar, expanded }</code></td><td>A sidebar is collapsed or expanded (toggle button, snap, or programmatic).</td></tr>
|
|
128
|
-
<tr><td><code>sidebar-resize</code></td><td><code>{ sidebar, width }</code></td><td>As a sidebar is dragged. Debounced on the trailing edge.</td></tr>
|
|
129
|
-
<tr><td><code>command-select</code></td><td><code>{ value }</code></td><td>Forwarded from the inner command palette when an option is chosen.</td></tr>
|
|
130
|
-
</tbody>
|
|
131
|
-
</table>
|
|
132
|
-
</section>
|
|
133
|
-
|
|
134
|
-
<section data-section>
|
|
135
|
-
<h2 variant="section">JS API</h2>
|
|
136
|
-
<code-ui language="js">const shell = document.querySelector('admin-shell');
|
|
137
|
-
|
|
138
|
-
shell.toggleLeading(); // collapse / expand the leading sidebar
|
|
139
|
-
shell.toggleTrailing(); // collapse / expand the trailing sidebar
|
|
140
|
-
shell.openCommand(); // open the Cmd+K dialog
|
|
141
|
-
shell.closeCommand(); // close it</code-ui>
|
|
142
|
-
</section>
|
|
143
|
-
|
|
144
|
-
<section data-section>
|
|
145
|
-
<h2 variant="section">Slot vocabulary inside the shell</h2>
|
|
146
|
-
<p>
|
|
147
|
-
Both authoring shapes are valid simultaneously. The legacy
|
|
148
|
-
raw-HTML form (<code>aside[data-sidebar]</code>,
|
|
149
|
-
<code>main > header</code>, etc.) keeps working unchanged;
|
|
150
|
-
consumers can also use the
|
|
151
|
-
<a href="/site/components/aside">aside-ui</a> /
|
|
152
|
-
<a href="/site/components/header">header-ui</a> /
|
|
153
|
-
<a href="/site/components/section">section-ui</a> /
|
|
154
|
-
<a href="/site/components/footer">footer-ui</a> slot vocabulary.
|
|
155
|
-
Both render identically — the shell's CSS lifts each structural
|
|
156
|
-
selector into <code>:is(legacy, slot-ui)</code> form, and the JS-
|
|
157
|
-
side wiring (<code>#sidebarName</code>) reads from either
|
|
158
|
-
<code>data-sidebar</code> or <code>slot</code>. See
|
|
159
|
-
<a href="/site/reference/decisions">ADR-0011</a> for the migration
|
|
160
|
-
rationale.
|
|
161
|
-
</p>
|
|
162
|
-
<code-ui language="html"><!-- Slot-vocabulary equivalent of the structure shown above -->
|
|
163
|
-
<admin-shell mode="rounded">
|
|
164
|
-
<aside-ui slot="leading">
|
|
165
|
-
<header-ui>…</header-ui>
|
|
166
|
-
<section-ui>
|
|
167
|
-
<nav-ui>…</nav-ui>
|
|
168
|
-
</section-ui>
|
|
169
|
-
<footer-ui>…</footer-ui>
|
|
170
|
-
<div data-resize></div>
|
|
171
|
-
</aside-ui>
|
|
172
|
-
|
|
173
|
-
<main>
|
|
174
|
-
<header-ui>…</header-ui>
|
|
175
|
-
<section-ui>
|
|
176
|
-
<router-ui></router-ui>
|
|
177
|
-
</section-ui>
|
|
178
|
-
<footer-ui>…</footer-ui>
|
|
179
|
-
</main>
|
|
180
|
-
</admin-shell></code-ui>
|
|
181
|
-
</section>
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en" data-theme="auto">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
6
|
-
<title>Admin Shell — AdiaUI</title>
|
|
7
|
-
|
|
8
|
-
<!-- Token base -->
|
|
9
|
-
<link rel="stylesheet" href="../../../web-components/styles/resets.css">
|
|
10
|
-
<link rel="stylesheet" href="../../../web-components/styles/tokens.css">
|
|
11
|
-
|
|
12
|
-
<!-- Component CSS -->
|
|
13
|
-
<link rel="stylesheet" href="./admin-shell.css">
|
|
14
|
-
<link rel="stylesheet" href="../../../web-components/components/code/code.css">
|
|
15
|
-
<link rel="stylesheet" href="../../../web-components/components/tag/tag.css">
|
|
16
|
-
|
|
17
|
-
<!-- Component JS -->
|
|
18
|
-
<script type="module" src="./admin-shell.js"></script>
|
|
19
|
-
<script type="module" src="../../../web-components/components/code/code.js"></script>
|
|
20
|
-
<script type="module" src="../../../web-components/components/tag/tag.js"></script>
|
|
21
|
-
|
|
22
|
-
<style>
|
|
23
|
-
:where(html, body) { margin: 0; min-height: 100vh; background: var(--a-bg); color: var(--a-fg); font-family: var(--a-font); }
|
|
24
|
-
main { max-width: 960px; margin-inline: auto; padding: var(--a-space-6) var(--a-space-5); }
|
|
25
|
-
</style>
|
|
26
|
-
</head>
|
|
27
|
-
<body>
|
|
28
|
-
|
|
29
|
-
<main id="demo-root">
|
|
30
|
-
<p>Loading examples…</p>
|
|
31
|
-
</main>
|
|
32
|
-
|
|
33
|
-
<script type="module">
|
|
34
|
-
const root = document.getElementById('demo-root');
|
|
35
|
-
try {
|
|
36
|
-
const res = await fetch('./admin-shell.examples.html');
|
|
37
|
-
if (!res.ok) throw new Error(`fetch failed (${res.status})`);
|
|
38
|
-
root.innerHTML = await res.text();
|
|
39
|
-
} catch (err) {
|
|
40
|
-
root.innerHTML = `<p style="color:var(--a-danger-strong);">Failed to load admin-shell.examples.html — ${err.message}</p>`;
|
|
41
|
-
console.error('[admin-shell.html]', err);
|
|
42
|
-
}
|
|
43
|
-
</script>
|
|
44
|
-
|
|
45
|
-
</body>
|
|
46
|
-
</html>
|
|
@@ -1,76 +0,0 @@
|
|
|
1
|
-
<header>
|
|
2
|
-
<div>
|
|
3
|
-
<h1>Admin Sidebar</h1>
|
|
4
|
-
<div data-actions>
|
|
5
|
-
<tag-ui size="sm">admin-sidebar</tag-ui>
|
|
6
|
-
</div>
|
|
7
|
-
</div>
|
|
8
|
-
<p>Module-tier shell sidebar — owns resize, snap-to-collapsed, persistence, and the <code>[collapsed]</code> reflected attribute. Sits inside <code><admin-shell></code> as <code>slot="leading"</code> or <code>slot="trailing"</code>. Authors compose chrome bars + content inside via slot vocabulary.</p>
|
|
9
|
-
</header>
|
|
10
|
-
|
|
11
|
-
<section data-section>
|
|
12
|
-
<h2 variant="section">Basic shape</h2>
|
|
13
|
-
<p data-note>Drop into <code><admin-shell></code> as a slotted child. Add <code>resizable</code> to wire the drag handle, <code>collapsible</code> to wire programmatic collapse.</p>
|
|
14
|
-
<code-ui language="html"><admin-sidebar slot="leading" resizable collapsible>
|
|
15
|
-
<admin-topbar slot="header">…</admin-topbar>
|
|
16
|
-
<nav-ui>…</nav-ui>
|
|
17
|
-
<admin-statusbar slot="footer">…</admin-statusbar>
|
|
18
|
-
<div data-resize></div>
|
|
19
|
-
</admin-sidebar></code-ui>
|
|
20
|
-
</section>
|
|
21
|
-
|
|
22
|
-
<section data-section>
|
|
23
|
-
<h2 variant="section">State as attribute</h2>
|
|
24
|
-
<p>The sidebar reflects its state on the element itself — no <code>data-*</code> proxy attributes, no threshold math from the outside.</p>
|
|
25
|
-
<table>
|
|
26
|
-
<thead><tr><th>Attribute</th><th>When set</th><th>Use for</th></tr></thead>
|
|
27
|
-
<tbody>
|
|
28
|
-
<tr><td><code>collapsed</code></td><td>Width is at or below 96px (snap floor)</td><td>CSS <code>:has(admin-sidebar[collapsed])</code> selectors; JS <code>.hasAttribute('collapsed')</code></td></tr>
|
|
29
|
-
<tr><td><code>resizing</code></td><td>Active pointer-drag</td><td>Suppress transitions during drag</td></tr>
|
|
30
|
-
</tbody>
|
|
31
|
-
</table>
|
|
32
|
-
<p data-note>The reflection is round-tripped — set <code>collapsed</code> programmatically and the sidebar will width-snap; release the attribute and it expands to the previously-saved width.</p>
|
|
33
|
-
</section>
|
|
34
|
-
|
|
35
|
-
<section data-section>
|
|
36
|
-
<h2 variant="section">Public methods</h2>
|
|
37
|
-
<table>
|
|
38
|
-
<thead><tr><th>Method</th><th>Effect</th></tr></thead>
|
|
39
|
-
<tbody>
|
|
40
|
-
<tr><td><code>.toggle()</code></td><td>Flip collapsed state. Returns the new <code>collapsed</code> value.</td></tr>
|
|
41
|
-
<tr><td><code>.collapse()</code></td><td>Force collapsed (idempotent if already collapsed).</td></tr>
|
|
42
|
-
<tr><td><code>.expand()</code></td><td>Restore the previous expanded width.</td></tr>
|
|
43
|
-
</tbody>
|
|
44
|
-
</table>
|
|
45
|
-
</section>
|
|
46
|
-
|
|
47
|
-
<section data-section>
|
|
48
|
-
<h2 variant="section">Events</h2>
|
|
49
|
-
<table>
|
|
50
|
-
<thead><tr><th>Event</th><th>Detail</th></tr></thead>
|
|
51
|
-
<tbody>
|
|
52
|
-
<tr><td><code>sidebar-toggle</code></td><td><code>{ name, expanded }</code> — bubbles when collapsed/expanded</td></tr>
|
|
53
|
-
<tr><td><code>sidebar-resize</code></td><td><code>{ name, width }</code> — bubbles after a pointer-drag releases</td></tr>
|
|
54
|
-
</tbody>
|
|
55
|
-
</table>
|
|
56
|
-
</section>
|
|
57
|
-
|
|
58
|
-
<section data-section>
|
|
59
|
-
<h2 variant="section">Properties</h2>
|
|
60
|
-
<table>
|
|
61
|
-
<thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Description</th></tr></thead>
|
|
62
|
-
<tbody>
|
|
63
|
-
<tr><td><code>resizable</code></td><td>boolean</td><td><code>false</code></td><td>Opts in to drag-to-resize. Author supplies a child <code>[data-resize]</code> element.</td></tr>
|
|
64
|
-
<tr><td><code>collapsible</code></td><td>boolean</td><td><code>false</code></td><td>Opts in to <code>.toggle()</code>/<code>.collapse()</code>/<code>.expand()</code>.</td></tr>
|
|
65
|
-
<tr><td><code>name</code></td><td>string</td><td>(slot value)</td><td>localStorage namespace override.</td></tr>
|
|
66
|
-
<tr><td><code>min-width</code></td><td>string</td><td>(CSS min-width)</td><td>Override for the snap-floor width.</td></tr>
|
|
67
|
-
<tr><td><code>collapsed</code></td><td>boolean</td><td>—</td><td>Reflected — set when width ≤ 96px.</td></tr>
|
|
68
|
-
<tr><td><code>resizing</code></td><td>boolean</td><td>—</td><td>Reflected — set during active drag.</td></tr>
|
|
69
|
-
</tbody>
|
|
70
|
-
</table>
|
|
71
|
-
</section>
|
|
72
|
-
|
|
73
|
-
<section data-section>
|
|
74
|
-
<h2 variant="section">Persistence</h2>
|
|
75
|
-
<p>Width is saved to <code>localStorage</code> on every drag release + every toggle, under the key <code>adia-sidebar-{name}</code> (where <code>name</code> defaults to the slot value). On reconnect, the saved width is restored — the “previous expanded width” tracker preserves the user's preferred expanded size across collapse cycles.</p>
|
|
76
|
-
</section>
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en" data-theme="auto">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
6
|
-
<title>Admin Sidebar — AdiaUI</title>
|
|
7
|
-
|
|
8
|
-
<!-- Token base -->
|
|
9
|
-
<link rel="stylesheet" href="../../../web-components/styles/resets.css">
|
|
10
|
-
<link rel="stylesheet" href="../../../web-components/styles/tokens.css">
|
|
11
|
-
|
|
12
|
-
<!-- Component CSS — admin-sidebar inherits from admin-shell tokens
|
|
13
|
-
when nested inside one; standalone styling below for the demo. -->
|
|
14
|
-
<link rel="stylesheet" href="../admin-shell/admin-shell.css">
|
|
15
|
-
<link rel="stylesheet" href="../../../web-components/components/code/code.css">
|
|
16
|
-
<link rel="stylesheet" href="../../../web-components/components/tag/tag.css">
|
|
17
|
-
|
|
18
|
-
<!-- Component JS -->
|
|
19
|
-
<script type="module" src="./admin-sidebar.js"></script>
|
|
20
|
-
<script type="module" src="../../../web-components/components/code/code.js"></script>
|
|
21
|
-
<script type="module" src="../../../web-components/components/tag/tag.js"></script>
|
|
22
|
-
|
|
23
|
-
<style>
|
|
24
|
-
:where(html, body) { margin: 0; min-height: 100vh; background: var(--a-bg); color: var(--a-fg); font-family: var(--a-font); }
|
|
25
|
-
main { max-width: 960px; margin-inline: auto; padding: var(--a-space-6) var(--a-space-5); }
|
|
26
|
-
</style>
|
|
27
|
-
</head>
|
|
28
|
-
<body>
|
|
29
|
-
|
|
30
|
-
<main id="demo-root">
|
|
31
|
-
<p>Loading examples…</p>
|
|
32
|
-
</main>
|
|
33
|
-
|
|
34
|
-
<script type="module">
|
|
35
|
-
const root = document.getElementById('demo-root');
|
|
36
|
-
try {
|
|
37
|
-
const res = await fetch('./admin-sidebar.examples.html');
|
|
38
|
-
if (!res.ok) throw new Error(`fetch failed (${res.status})`);
|
|
39
|
-
root.innerHTML = await res.text();
|
|
40
|
-
} catch (err) {
|
|
41
|
-
root.innerHTML = `<p style="color:var(--a-danger-strong);">Failed to load admin-sidebar.examples.html — ${err.message}</p>`;
|
|
42
|
-
console.error('[admin-sidebar.html]', err);
|
|
43
|
-
}
|
|
44
|
-
</script>
|
|
45
|
-
|
|
46
|
-
</body>
|
|
47
|
-
</html>
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
<header>
|
|
2
|
-
<div>
|
|
3
|
-
<h1>Admin Statusbar</h1>
|
|
4
|
-
<div data-actions>
|
|
5
|
-
<tag-ui size="sm">admin-statusbar</tag-ui>
|
|
6
|
-
<tag-ui size="sm" variant="ghost">CSS-only</tag-ui>
|
|
7
|
-
</div>
|
|
8
|
-
</div>
|
|
9
|
-
<p>Module-tier shell bottom chrome bar. Same shape as admin-topbar; conventionally read-only status.</p>
|
|
10
|
-
</header>
|
|
11
|
-
|
|
12
|
-
<section data-section>
|
|
13
|
-
<h2 variant="section">Role</h2>
|
|
14
|
-
<p>This is a CSS-only structural stub — no JavaScript, no behavior. The shell host (<code><admin-shell></code>) styles it via tag-presence. Authors compose it with sibling bespoke children to express semantic shell-tier structure.</p>
|
|
15
|
-
</section>
|
|
16
|
-
|
|
17
|
-
<section data-section>
|
|
18
|
-
<h2 variant="section">Composition</h2>
|
|
19
|
-
<p>Typical placement inside <code><admin-shell></code>:</p>
|
|
20
|
-
<code-ui language="html"><admin-statusbar>
|
|
21
|
-
<icon-ui slot="icon" name="check-circle"></icon-ui>
|
|
22
|
-
<span>Synced just now · 12 changes</span>
|
|
23
|
-
</admin-statusbar></code-ui>
|
|
24
|
-
</section>
|
|
25
|
-
|
|
26
|
-
<section data-section>
|
|
27
|
-
<h2 variant="section">Slot vocabulary</h2>
|
|
28
|
-
<p>See the <a href="../admin-shell/admin-shell.html"><code>admin-shell</code></a> demo for the full composition pattern. CSS-only stubs declare slot intent; the parent shell handles layout.</p>
|
|
29
|
-
</section>
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en" data-theme="auto">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
6
|
-
<title>Admin Statusbar — AdiaUI</title>
|
|
7
|
-
|
|
8
|
-
<link rel="stylesheet" href="../../../web-components/styles/resets.css">
|
|
9
|
-
<link rel="stylesheet" href="../../../web-components/styles/tokens.css">
|
|
10
|
-
<link rel="stylesheet" href="../admin-shell/admin-shell.css">
|
|
11
|
-
<link rel="stylesheet" href="../../../web-components/components/code/code.css">
|
|
12
|
-
<link rel="stylesheet" href="../../../web-components/components/tag/tag.css">
|
|
13
|
-
|
|
14
|
-
<script type="module" src="../admin-shell/admin-shell.js"></script>
|
|
15
|
-
<script type="module" src="../../../web-components/components/code/code.js"></script>
|
|
16
|
-
<script type="module" src="../../../web-components/components/tag/tag.js"></script>
|
|
17
|
-
|
|
18
|
-
<style>
|
|
19
|
-
:where(html, body) { margin: 0; min-height: 100vh; background: var(--a-bg); color: var(--a-fg); font-family: var(--a-font); }
|
|
20
|
-
main { max-width: 960px; margin-inline: auto; padding: var(--a-space-6) var(--a-space-5); }
|
|
21
|
-
</style>
|
|
22
|
-
</head>
|
|
23
|
-
<body>
|
|
24
|
-
|
|
25
|
-
<main id="demo-root">
|
|
26
|
-
<p>Loading examples…</p>
|
|
27
|
-
</main>
|
|
28
|
-
|
|
29
|
-
<script type="module">
|
|
30
|
-
const root = document.getElementById('demo-root');
|
|
31
|
-
try {
|
|
32
|
-
const res = await fetch('./admin-statusbar.examples.html');
|
|
33
|
-
if (!res.ok) throw new Error(`fetch failed (${res.status})`);
|
|
34
|
-
root.innerHTML = await res.text();
|
|
35
|
-
} catch (err) {
|
|
36
|
-
root.innerHTML = `<p style="color:var(--a-danger-strong);">Failed to load admin-statusbar.examples.html — ${err.message}</p>`;
|
|
37
|
-
console.error('[admin-statusbar.html]', err);
|
|
38
|
-
}
|
|
39
|
-
</script>
|
|
40
|
-
|
|
41
|
-
</body>
|
|
42
|
-
</html>
|