@adia-ai/web-modules 0.6.6 → 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 +14 -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,43 +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>Editor Sidebar — 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="../editor-shell/editor-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="../editor-shell/editor-shell.js"></script>
|
|
15
|
-
<script type="module" src="./editor-sidebar.js"></script>
|
|
16
|
-
<script type="module" src="../../../web-components/components/code/code.js"></script>
|
|
17
|
-
<script type="module" src="../../../web-components/components/tag/tag.js"></script>
|
|
18
|
-
|
|
19
|
-
<style>
|
|
20
|
-
:where(html, body) { margin: 0; min-height: 100vh; background: var(--a-bg); color: var(--a-fg); font-family: var(--a-font); }
|
|
21
|
-
main { max-width: 960px; margin-inline: auto; padding: var(--a-space-6) var(--a-space-5); }
|
|
22
|
-
</style>
|
|
23
|
-
</head>
|
|
24
|
-
<body>
|
|
25
|
-
|
|
26
|
-
<main id="demo-root">
|
|
27
|
-
<p>Loading examples…</p>
|
|
28
|
-
</main>
|
|
29
|
-
|
|
30
|
-
<script type="module">
|
|
31
|
-
const root = document.getElementById('demo-root');
|
|
32
|
-
try {
|
|
33
|
-
const res = await fetch('./editor-sidebar.examples.html');
|
|
34
|
-
if (!res.ok) throw new Error(`fetch failed (${res.status})`);
|
|
35
|
-
root.innerHTML = await res.text();
|
|
36
|
-
} catch (err) {
|
|
37
|
-
root.innerHTML = `<p style="color:var(--a-danger-strong);">Failed to load editor-sidebar.examples.html — ${err.message}</p>`;
|
|
38
|
-
console.error('[editor-sidebar.html]', err);
|
|
39
|
-
}
|
|
40
|
-
</script>
|
|
41
|
-
|
|
42
|
-
</body>
|
|
43
|
-
</html>
|
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
<header>
|
|
2
|
-
<div>
|
|
3
|
-
<h1>Editor Statusbar</h1>
|
|
4
|
-
<div data-actions>
|
|
5
|
-
<tag-ui size="sm">editor-statusbar</tag-ui>
|
|
6
|
-
<tag-ui size="sm" variant="ghost">CSS-only</tag-ui>
|
|
7
|
-
</div>
|
|
8
|
-
</div>
|
|
9
|
-
<p>Module-tier editor statusbar — bottom chrome bar. CSS-only.</p>
|
|
10
|
-
</header>
|
|
11
|
-
|
|
12
|
-
<section data-section>
|
|
13
|
-
<h2 variant="section">Role</h2>
|
|
14
|
-
<p>Per <a href="../../../../.brain/adrs/0023-bespoke-shell-tier-children.md">ADR-0023</a>, the editor cluster's bespoke family — <code><editor-shell></code> (host), <code><editor-toolbar></code>, <code><editor-canvas></code>, <code><editor-sidebar></code> (JS-bearing) + <code><editor-statusbar></code>, <code><editor-canvas-empty></code> (CSS-only). Confirms the family pattern is canonical across 3 archetypes (admin/chat/editor).</p>
|
|
15
|
-
</section>
|
|
16
|
-
|
|
17
|
-
<section data-section>
|
|
18
|
-
<h2 variant="section">Composition</h2>
|
|
19
|
-
<p>Typical placement inside <code><editor-shell></code>:</p>
|
|
20
|
-
<code-ui language="html"><editor-shell>
|
|
21
|
-
<editor-toolbar>
|
|
22
|
-
<span slot="title">Untitled.fig</span>
|
|
23
|
-
<button-ui slot="action" icon="gear"></button-ui>
|
|
24
|
-
</editor-toolbar>
|
|
25
|
-
|
|
26
|
-
<editor-sidebar slot="leading" collapsible>
|
|
27
|
-
<pane-ui resizable>
|
|
28
|
-
<header>Navigator</header>
|
|
29
|
-
<section>…layers…</section>
|
|
30
|
-
</pane-ui>
|
|
31
|
-
</editor-sidebar>
|
|
32
|
-
|
|
33
|
-
<editor-canvas>
|
|
34
|
-
<editor-canvas-empty>
|
|
35
|
-
<empty-state-ui icon="square" heading="New document" description="Drop content to begin."></empty-state-ui>
|
|
36
|
-
</editor-canvas-empty>
|
|
37
|
-
</editor-canvas>
|
|
38
|
-
|
|
39
|
-
<editor-sidebar slot="trailing" collapsible>
|
|
40
|
-
<pane-ui resizable>
|
|
41
|
-
<header>Inspector</header>
|
|
42
|
-
<section>…properties…</section>
|
|
43
|
-
</pane-ui>
|
|
44
|
-
</editor-sidebar>
|
|
45
|
-
|
|
46
|
-
<editor-statusbar>
|
|
47
|
-
<span slot="status">Saved</span>
|
|
48
|
-
<span slot="zoom">100%</span>
|
|
49
|
-
</editor-statusbar>
|
|
50
|
-
</editor-shell></code-ui>
|
|
51
|
-
</section>
|
|
52
|
-
|
|
53
|
-
<section data-section>
|
|
54
|
-
<h2 variant="section">State as attribute</h2>
|
|
55
|
-
<code-ui language="css">/* Hide all chrome in focus mode */
|
|
56
|
-
editor-shell[focus-mode] :is(editor-toolbar, editor-statusbar, editor-sidebar) {
|
|
57
|
-
display: none;
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
/* Visual treatment for empty canvas */
|
|
61
|
-
editor-canvas[empty] { /* placeholder UI */ }
|
|
62
|
-
|
|
63
|
-
/* Highlight focused canvas */
|
|
64
|
-
editor-canvas[focused] { outline: 2px solid var(--a-accent); }</code-ui>
|
|
65
|
-
</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>Editor 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="../editor-shell/editor-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="../editor-shell/editor-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('./editor-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 editor-statusbar.examples.html — ${err.message}</p>`;
|
|
37
|
-
console.error('[editor-statusbar.html]', err);
|
|
38
|
-
}
|
|
39
|
-
</script>
|
|
40
|
-
|
|
41
|
-
</body>
|
|
42
|
-
</html>
|
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
<header>
|
|
2
|
-
<div>
|
|
3
|
-
<h1>Editor Toolbar</h1>
|
|
4
|
-
<div data-actions>
|
|
5
|
-
<tag-ui size="sm">editor-toolbar</tag-ui>
|
|
6
|
-
<tag-ui size="sm" variant="ghost">JS-bearing</tag-ui>
|
|
7
|
-
</div>
|
|
8
|
-
</div>
|
|
9
|
-
<p>Module-tier editor toolbar — replaces legacy <header> chrome bar. Click-bubble for [data-toolbar-action] buttons + [full-screen] reflected attribute.</p>
|
|
10
|
-
</header>
|
|
11
|
-
|
|
12
|
-
<section data-section>
|
|
13
|
-
<h2 variant="section">Role</h2>
|
|
14
|
-
<p>Per <a href="../../../../.brain/adrs/0023-bespoke-shell-tier-children.md">ADR-0023</a>, the editor cluster's bespoke family — <code><editor-shell></code> (host), <code><editor-toolbar></code>, <code><editor-canvas></code>, <code><editor-sidebar></code> (JS-bearing) + <code><editor-statusbar></code>, <code><editor-canvas-empty></code> (CSS-only). Confirms the family pattern is canonical across 3 archetypes (admin/chat/editor).</p>
|
|
15
|
-
</section>
|
|
16
|
-
|
|
17
|
-
<section data-section>
|
|
18
|
-
<h2 variant="section">Composition</h2>
|
|
19
|
-
<p>Typical placement inside <code><editor-shell></code>:</p>
|
|
20
|
-
<code-ui language="html"><editor-shell>
|
|
21
|
-
<editor-toolbar>
|
|
22
|
-
<span slot="title">Untitled.fig</span>
|
|
23
|
-
<button-ui slot="action" icon="gear"></button-ui>
|
|
24
|
-
</editor-toolbar>
|
|
25
|
-
|
|
26
|
-
<editor-sidebar slot="leading" collapsible>
|
|
27
|
-
<pane-ui resizable>
|
|
28
|
-
<header>Navigator</header>
|
|
29
|
-
<section>…layers…</section>
|
|
30
|
-
</pane-ui>
|
|
31
|
-
</editor-sidebar>
|
|
32
|
-
|
|
33
|
-
<editor-canvas>
|
|
34
|
-
<editor-canvas-empty>
|
|
35
|
-
<empty-state-ui icon="square" heading="New document" description="Drop content to begin."></empty-state-ui>
|
|
36
|
-
</editor-canvas-empty>
|
|
37
|
-
</editor-canvas>
|
|
38
|
-
|
|
39
|
-
<editor-sidebar slot="trailing" collapsible>
|
|
40
|
-
<pane-ui resizable>
|
|
41
|
-
<header>Inspector</header>
|
|
42
|
-
<section>…properties…</section>
|
|
43
|
-
</pane-ui>
|
|
44
|
-
</editor-sidebar>
|
|
45
|
-
|
|
46
|
-
<editor-statusbar>
|
|
47
|
-
<span slot="status">Saved</span>
|
|
48
|
-
<span slot="zoom">100%</span>
|
|
49
|
-
</editor-statusbar>
|
|
50
|
-
</editor-shell></code-ui>
|
|
51
|
-
</section>
|
|
52
|
-
|
|
53
|
-
<section data-section>
|
|
54
|
-
<h2 variant="section">State as attribute</h2>
|
|
55
|
-
<code-ui language="css">/* Hide all chrome in focus mode */
|
|
56
|
-
editor-shell[focus-mode] :is(editor-toolbar, editor-statusbar, editor-sidebar) {
|
|
57
|
-
display: none;
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
/* Visual treatment for empty canvas */
|
|
61
|
-
editor-canvas[empty] { /* placeholder UI */ }
|
|
62
|
-
|
|
63
|
-
/* Highlight focused canvas */
|
|
64
|
-
editor-canvas[focused] { outline: 2px solid var(--a-accent); }</code-ui>
|
|
65
|
-
</section>
|
|
@@ -1,43 +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>Editor Toolbar — 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="../editor-shell/editor-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="../editor-shell/editor-shell.js"></script>
|
|
15
|
-
<script type="module" src="./editor-toolbar.js"></script>
|
|
16
|
-
<script type="module" src="../../../web-components/components/code/code.js"></script>
|
|
17
|
-
<script type="module" src="../../../web-components/components/tag/tag.js"></script>
|
|
18
|
-
|
|
19
|
-
<style>
|
|
20
|
-
:where(html, body) { margin: 0; min-height: 100vh; background: var(--a-bg); color: var(--a-fg); font-family: var(--a-font); }
|
|
21
|
-
main { max-width: 960px; margin-inline: auto; padding: var(--a-space-6) var(--a-space-5); }
|
|
22
|
-
</style>
|
|
23
|
-
</head>
|
|
24
|
-
<body>
|
|
25
|
-
|
|
26
|
-
<main id="demo-root">
|
|
27
|
-
<p>Loading examples…</p>
|
|
28
|
-
</main>
|
|
29
|
-
|
|
30
|
-
<script type="module">
|
|
31
|
-
const root = document.getElementById('demo-root');
|
|
32
|
-
try {
|
|
33
|
-
const res = await fetch('./editor-toolbar.examples.html');
|
|
34
|
-
if (!res.ok) throw new Error(`fetch failed (${res.status})`);
|
|
35
|
-
root.innerHTML = await res.text();
|
|
36
|
-
} catch (err) {
|
|
37
|
-
root.innerHTML = `<p style="color:var(--a-danger-strong);">Failed to load editor-toolbar.examples.html — ${err.message}</p>`;
|
|
38
|
-
console.error('[editor-toolbar.html]', err);
|
|
39
|
-
}
|
|
40
|
-
</script>
|
|
41
|
-
|
|
42
|
-
</body>
|
|
43
|
-
</html>
|
|
@@ -1,83 +0,0 @@
|
|
|
1
|
-
<header>
|
|
2
|
-
<div>
|
|
3
|
-
<h1>Admin Command</h1>
|
|
4
|
-
<div data-actions>
|
|
5
|
-
<tag-ui size="sm">admin-command</tag-ui>
|
|
6
|
-
</div>
|
|
7
|
-
</div>
|
|
8
|
-
<p>Module-tier command palette wrapper — wraps a native <code><dialog></code> and the inner <code><command-ui></code>. Owns the keyboard shortcut listener, focus management, and dismiss handlers. Reflects <code>[open]</code>.</p>
|
|
9
|
-
</header>
|
|
10
|
-
|
|
11
|
-
<section data-section>
|
|
12
|
-
<h2 variant="section">Basic shape</h2>
|
|
13
|
-
<p data-note>Place <code><admin-command></code> as a direct child of <code><admin-shell></code>. The host wires <code>[data-command-trigger]</code> elements to <code>.show()</code> via lookup; you don't reach across siblings.</p>
|
|
14
|
-
<code-ui language="html"><admin-shell>
|
|
15
|
-
…sidebars + content…
|
|
16
|
-
|
|
17
|
-
<admin-command>
|
|
18
|
-
<command-ui placeholder="Search…"></command-ui>
|
|
19
|
-
</admin-command>
|
|
20
|
-
</admin-shell></code-ui>
|
|
21
|
-
</section>
|
|
22
|
-
|
|
23
|
-
<section data-section>
|
|
24
|
-
<h2 variant="section">Keyboard shortcut</h2>
|
|
25
|
-
<table>
|
|
26
|
-
<thead><tr><th>Value</th><th>Behavior</th></tr></thead>
|
|
27
|
-
<tbody>
|
|
28
|
-
<tr><td><code>both</code> (default)</td><td>Responds to Cmd+K (mac) AND Ctrl+K (other platforms) — the AdiaUI cross-platform convention.</td></tr>
|
|
29
|
-
<tr><td><code>cmd+k</code></td><td>Responds only when <code>metaKey</code> is held.</td></tr>
|
|
30
|
-
<tr><td><code>ctrl+k</code></td><td>Responds only when <code>ctrlKey</code> is held.</td></tr>
|
|
31
|
-
<tr><td><code>[no-shortcut]</code></td><td>Disables the keyboard listener entirely. Use when the host wires its own shortcut handling.</td></tr>
|
|
32
|
-
</tbody>
|
|
33
|
-
</table>
|
|
34
|
-
</section>
|
|
35
|
-
|
|
36
|
-
<section data-section>
|
|
37
|
-
<h2 variant="section">State as attribute</h2>
|
|
38
|
-
<table>
|
|
39
|
-
<thead><tr><th>Attribute</th><th>When set</th><th>Use for</th></tr></thead>
|
|
40
|
-
<tbody>
|
|
41
|
-
<tr><td><code>open</code></td><td>Dialog is showing</td><td>CSS <code>:has(admin-command[open])</code>; JS <code>.hasAttribute('open')</code>; programmatic round-trip via <code>.toggle()</code></td></tr>
|
|
42
|
-
</tbody>
|
|
43
|
-
</table>
|
|
44
|
-
<p>The <code>[open]</code> attribute is synced both ways — programmatic <code>.show()</code> sets it, native dialog close (esc key, backdrop click) clears it.</p>
|
|
45
|
-
</section>
|
|
46
|
-
|
|
47
|
-
<section data-section>
|
|
48
|
-
<h2 variant="section">Public methods</h2>
|
|
49
|
-
<table>
|
|
50
|
-
<thead><tr><th>Method</th><th>Effect</th></tr></thead>
|
|
51
|
-
<tbody>
|
|
52
|
-
<tr><td><code>.show()</code></td><td>Open via <code>showModal()</code>; focus the inner <code>command-ui</code>; clear its value.</td></tr>
|
|
53
|
-
<tr><td><code>.hide()</code></td><td>Close the dialog; clear inner palette state.</td></tr>
|
|
54
|
-
<tr><td><code>.toggle()</code></td><td>Flip open state. Returns the new <code>open</code> value.</td></tr>
|
|
55
|
-
</tbody>
|
|
56
|
-
</table>
|
|
57
|
-
</section>
|
|
58
|
-
|
|
59
|
-
<section data-section>
|
|
60
|
-
<h2 variant="section">Events</h2>
|
|
61
|
-
<table>
|
|
62
|
-
<thead><tr><th>Event</th><th>Detail</th></tr></thead>
|
|
63
|
-
<tbody>
|
|
64
|
-
<tr><td><code>command-select</code></td><td>Forwarded from the inner <code>command-ui</code> when an option is chosen. Detail mirrors the inner event's detail.</td></tr>
|
|
65
|
-
</tbody>
|
|
66
|
-
</table>
|
|
67
|
-
</section>
|
|
68
|
-
|
|
69
|
-
<section data-section>
|
|
70
|
-
<h2 variant="section">Trigger wiring</h2>
|
|
71
|
-
<p>Triggers (any element with <code>[data-command-trigger]</code>) live anywhere in the shell — typically a search row in the leading sidebar. The host (<code><admin-shell></code>) finds the inner <code><admin-command></code> on connect and wires every trigger's click to <code>command.show()</code>.</p>
|
|
72
|
-
<code-ui language="html"><admin-shell>
|
|
73
|
-
<admin-sidebar slot="leading">
|
|
74
|
-
<nav-ui>
|
|
75
|
-
<nav-item-ui data-command-trigger icon="magnifying-glass">Search</nav-item-ui>
|
|
76
|
-
</nav-ui>
|
|
77
|
-
</admin-sidebar>
|
|
78
|
-
|
|
79
|
-
<admin-command>
|
|
80
|
-
<command-ui placeholder="Search…"></command-ui>
|
|
81
|
-
</admin-command>
|
|
82
|
-
</admin-shell></code-ui>
|
|
83
|
-
</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 Command — 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-command.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-command.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-command.examples.html — ${err.message}</p>`;
|
|
37
|
-
console.error('[admin-command.html]', err);
|
|
38
|
-
}
|
|
39
|
-
</script>
|
|
40
|
-
|
|
41
|
-
</body>
|
|
42
|
-
</html>
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
<header>
|
|
2
|
-
<div>
|
|
3
|
-
<h1>Admin Content</h1>
|
|
4
|
-
<div data-actions>
|
|
5
|
-
<tag-ui size="sm">admin-content</tag-ui>
|
|
6
|
-
<tag-ui size="sm" variant="ghost">CSS-only</tag-ui>
|
|
7
|
-
</div>
|
|
8
|
-
</div>
|
|
9
|
-
<p>Module-tier shell main-column container. CSS-only. Sits inside <admin-shell> as the center column between leading and trailing sidebars.</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-shell>
|
|
21
|
-
<admin-sidebar slot="leading">…</admin-sidebar>
|
|
22
|
-
<admin-content>
|
|
23
|
-
<admin-topbar slot="header">…</admin-topbar>
|
|
24
|
-
<admin-scroll>…</admin-scroll>
|
|
25
|
-
<admin-statusbar slot="footer">…</admin-statusbar>
|
|
26
|
-
</admin-content>
|
|
27
|
-
</admin-shell></code-ui>
|
|
28
|
-
</section>
|
|
29
|
-
|
|
30
|
-
<section data-section>
|
|
31
|
-
<h2 variant="section">Slot vocabulary</h2>
|
|
32
|
-
<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>
|
|
33
|
-
</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 Content — 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-content.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-content.examples.html — ${err.message}</p>`;
|
|
37
|
-
console.error('[admin-content.html]', err);
|
|
38
|
-
}
|
|
39
|
-
</script>
|
|
40
|
-
|
|
41
|
-
</body>
|
|
42
|
-
</html>
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
<header>
|
|
2
|
-
<div>
|
|
3
|
-
<h1>Admin Page</h1>
|
|
4
|
-
<div data-actions>
|
|
5
|
-
<tag-ui size="sm">admin-page</tag-ui>
|
|
6
|
-
<tag-ui size="sm" variant="ghost">CSS-only</tag-ui>
|
|
7
|
-
</div>
|
|
8
|
-
</div>
|
|
9
|
-
<p>Module-tier page wrapper. Provides the page-content named container query.</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-scroll>
|
|
21
|
-
<admin-page>
|
|
22
|
-
<admin-page-header>
|
|
23
|
-
<header-ui>
|
|
24
|
-
<span slot="heading">Page Title</span>
|
|
25
|
-
</header-ui>
|
|
26
|
-
</admin-page-header>
|
|
27
|
-
<admin-page-body>
|
|
28
|
-
<section-ui>…content…</section-ui>
|
|
29
|
-
</admin-page-body>
|
|
30
|
-
</admin-page>
|
|
31
|
-
</admin-scroll></code-ui>
|
|
32
|
-
</section>
|
|
33
|
-
|
|
34
|
-
<section data-section>
|
|
35
|
-
<h2 variant="section">Slot vocabulary</h2>
|
|
36
|
-
<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>
|
|
37
|
-
</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 — 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.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.examples.html — ${err.message}</p>`;
|
|
37
|
-
console.error('[admin-page.html]', err);
|
|
38
|
-
}
|
|
39
|
-
</script>
|
|
40
|
-
|
|
41
|
-
</body>
|
|
42
|
-
</html>
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
<header>
|
|
2
|
-
<div>
|
|
3
|
-
<h1>Admin Page Body</h1>
|
|
4
|
-
<div data-actions>
|
|
5
|
-
<tag-ui size="sm">admin-page-body</tag-ui>
|
|
6
|
-
<tag-ui size="sm" variant="ghost">CSS-only</tag-ui>
|
|
7
|
-
</div>
|
|
8
|
-
</div>
|
|
9
|
-
<p>Module-tier page-body band. Centered body 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>…</admin-page-header>
|
|
22
|
-
<admin-page-body>
|
|
23
|
-
<section-ui>
|
|
24
|
-
<h1>Heading</h1>
|
|
25
|
-
<p>Body content…</p>
|
|
26
|
-
</section-ui>
|
|
27
|
-
</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 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>
|