@adia-ai/web-modules 0.6.6 → 0.6.8

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.
Files changed (62) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/README.md +15 -1
  3. package/chat/chat-shell/chat-shell.js +1 -1
  4. package/generative/index.d.ts +11 -0
  5. package/generative/index.js +45 -0
  6. package/package.json +28 -1
  7. package/chat/chat-composer/chat-composer.examples.html +0 -28
  8. package/chat/chat-composer/chat-composer.html +0 -43
  9. package/chat/chat-empty/chat-empty.examples.html +0 -34
  10. package/chat/chat-empty/chat-empty.html +0 -42
  11. package/chat/chat-header/chat-header.examples.html +0 -30
  12. package/chat/chat-header/chat-header.html +0 -42
  13. package/chat/chat-shell/chat-shell.examples.html +0 -126
  14. package/chat/chat-shell/chat-shell.html +0 -42
  15. package/chat/chat-sidebar/chat-sidebar.examples.html +0 -36
  16. package/chat/chat-sidebar/chat-sidebar.html +0 -43
  17. package/chat/chat-status/chat-status.examples.html +0 -29
  18. package/chat/chat-status/chat-status.html +0 -42
  19. package/chat/chat-thread/chat-thread.examples.html +0 -36
  20. package/chat/chat-thread/chat-thread.html +0 -43
  21. package/editor/editor-canvas/editor-canvas.examples.html +0 -65
  22. package/editor/editor-canvas/editor-canvas.html +0 -43
  23. package/editor/editor-canvas-empty/editor-canvas-empty.examples.html +0 -65
  24. package/editor/editor-canvas-empty/editor-canvas-empty.html +0 -42
  25. package/editor/editor-canvas-toolbar/editor-canvas-toolbar.examples.html +0 -56
  26. package/editor/editor-canvas-toolbar/editor-canvas-toolbar.html +0 -42
  27. package/editor/editor-shell/editor-shell.examples.html +0 -71
  28. package/editor/editor-shell/editor-shell.html +0 -42
  29. package/editor/editor-sidebar/editor-sidebar.examples.html +0 -65
  30. package/editor/editor-sidebar/editor-sidebar.html +0 -43
  31. package/editor/editor-statusbar/editor-statusbar.examples.html +0 -65
  32. package/editor/editor-statusbar/editor-statusbar.html +0 -42
  33. package/editor/editor-toolbar/editor-toolbar.examples.html +0 -65
  34. package/editor/editor-toolbar/editor-toolbar.html +0 -43
  35. package/shell/admin-command/admin-command.examples.html +0 -83
  36. package/shell/admin-command/admin-command.html +0 -42
  37. package/shell/admin-content/admin-content.examples.html +0 -33
  38. package/shell/admin-content/admin-content.html +0 -42
  39. package/shell/admin-page/admin-page.examples.html +0 -37
  40. package/shell/admin-page/admin-page.html +0 -42
  41. package/shell/admin-page-body/admin-page-body.examples.html +0 -34
  42. package/shell/admin-page-body/admin-page-body.html +0 -42
  43. package/shell/admin-page-header/admin-page-header.examples.html +0 -34
  44. package/shell/admin-page-header/admin-page-header.html +0 -42
  45. package/shell/admin-scroll/admin-scroll.examples.html +0 -31
  46. package/shell/admin-scroll/admin-scroll.html +0 -42
  47. package/shell/admin-shell/admin-shell.examples.html +0 -181
  48. package/shell/admin-shell/admin-shell.html +0 -46
  49. package/shell/admin-sidebar/admin-sidebar.examples.html +0 -76
  50. package/shell/admin-sidebar/admin-sidebar.html +0 -47
  51. package/shell/admin-statusbar/admin-statusbar.examples.html +0 -29
  52. package/shell/admin-statusbar/admin-statusbar.html +0 -42
  53. package/shell/admin-topbar/admin-topbar.examples.html +0 -31
  54. package/shell/admin-topbar/admin-topbar.html +0 -42
  55. package/simple/simple-content/simple-content.examples.html +0 -13
  56. package/simple/simple-content/simple-content.html +0 -42
  57. package/simple/simple-hero/simple-hero.examples.html +0 -33
  58. package/simple/simple-hero/simple-hero.html +0 -42
  59. package/simple/simple-shell/simple-shell.examples.html +0 -42
  60. package/simple/simple-shell/simple-shell.html +0 -42
  61. package/theme/theme-panel/theme-panel.examples.html +0 -112
  62. package/theme/theme-panel/theme-panel.html +0 -75
package/shell/admin-topbar/admin-topbar.examples.html DELETED
@@ -1,31 +0,0 @@
1
- <header>
2
- <div>
3
- <h1>Admin Topbar</h1>
4
- <div data-actions>
5
- <tag-ui size="sm">admin-topbar</tag-ui>
6
- <tag-ui size="sm" variant="ghost">CSS-only</tag-ui>
7
- </div>
8
- </div>
9
- <p>Module-tier shell top chrome bar. Provides icon + heading + description + action-clusters layout via slot vocabulary.</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>&lt;admin-shell&gt;</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>&lt;admin-shell&gt;</code>:</p>
20
- <code-ui language="html">&lt;admin-topbar&gt;
21
- &lt;icon-ui slot="icon" name="house"&gt;&lt;/icon-ui&gt;
22
- &lt;span slot="heading"&gt;Dashboard&lt;/span&gt;
23
- &lt;span slot="description"&gt;Workspace overview&lt;/span&gt;
24
- &lt;button-ui slot="action" variant="ghost"&gt;Settings&lt;/button-ui&gt;
25
- &lt;/admin-topbar&gt;</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>
package/shell/admin-topbar/admin-topbar.html DELETED
@@ -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 Topbar — 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-topbar.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-topbar.examples.html — ${err.message}</p>`;
37
- console.error('[admin-topbar.html]', err);
38
- }
39
- </script>
40
-
41
- </body>
42
- </html>
package/simple/simple-content/simple-content.examples.html DELETED
@@ -1,13 +0,0 @@
1
- <h1>simple-content — article body container</h1>
2
-
3
- <p>CSS-only structural child of <code>&lt;simple-shell&gt;</code>. Provides vertical rhythm and prose-friendly max-width.</p>
4
-
5
- <simple-shell style="border: 1px solid var(--a-border); border-radius: var(--a-radius-3); min-height: 50dvh;">
6
- <simple-content>
7
- <h1>Article body</h1>
8
- <p>simple-content is the main article surface. It applies token-correct vertical rhythm (the gap between children uses <code>--a-density-4</code>) and uses prose typography for paragraphs and headings.</p>
9
- <h2>Section heading</h2>
10
- <p>Headings cascade naturally. h1 / h2 / h3 receive heading colors via <code>--a-text-heading</code>.</p>
11
- <p>Body paragraphs use a prose line-height (<code>--a-line-height-prose</code>) for comfortable reading.</p>
12
- </simple-content>
13
- </simple-shell>
package/simple/simple-content/simple-content.html DELETED
@@ -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>Simple 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="../simple-shell/simple-shell.css">
11
- <link rel="stylesheet" href="../simple-content/simple-content.css">
12
- <link rel="stylesheet" href="../simple-hero/simple-hero.css">
13
- <link rel="stylesheet" href="../../../web-components/components/button/button.css">
14
-
15
- <script type="module" src="../simple-shell/simple-shell.js"></script>
16
- <script type="module" src="../../../web-components/components/button/button.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('./simple-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 simple-content.examples.html — ${err.message}</p>`;
37
- console.error('[simple-content.html]', err);
38
- }
39
- </script>
40
-
41
- </body>
42
- </html>
package/simple/simple-hero/simple-hero.examples.html DELETED
@@ -1,33 +0,0 @@
1
- <h1>simple-hero — hero strip for landing / error / splash pages</h1>
2
-
3
- <p>CSS-only. Three named slots: heading, lede, actions. Authors can omit any slot.</p>
4
-
5
- <h2>All three slots</h2>
6
-
7
- <simple-shell style="border: 1px solid var(--a-border); border-radius: var(--a-radius-3); min-height: 50dvh;">
8
- <simple-hero>
9
- <h1 slot="heading">Build with AdiaUI</h1>
10
- <p slot="lede">Zero dependencies. Production-ready primitives. LLM-native generative UI.</p>
11
- <div slot="actions">
12
- <button-ui variant="solid" color="accent">Get started</button-ui>
13
- <button-ui variant="outline">Read the docs</button-ui>
14
- </div>
15
- </simple-hero>
16
- </simple-shell>
17
-
18
- <h2>Heading + lede only</h2>
19
-
20
- <simple-shell style="border: 1px solid var(--a-border); border-radius: var(--a-radius-3); min-height: 40dvh;">
21
- <simple-hero>
22
- <h1 slot="heading">Thank you</h1>
23
- <p slot="lede">Your message has been received. We'll get back to you within 24 hours.</p>
24
- </simple-hero>
25
- </simple-shell>
26
-
27
- <h2>Heading only — minimal error page</h2>
28
-
29
- <simple-shell centered style="border: 1px solid var(--a-border); border-radius: var(--a-radius-3); min-height: 30dvh;">
30
- <simple-hero>
31
- <h1 slot="heading">Maintenance in progress</h1>
32
- </simple-hero>
33
- </simple-shell>
package/simple/simple-hero/simple-hero.html DELETED
@@ -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>Simple Hero — 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="../simple-shell/simple-shell.css">
11
- <link rel="stylesheet" href="../simple-content/simple-content.css">
12
- <link rel="stylesheet" href="../simple-hero/simple-hero.css">
13
- <link rel="stylesheet" href="../../../web-components/components/button/button.css">
14
-
15
- <script type="module" src="../simple-shell/simple-shell.js"></script>
16
- <script type="module" src="../../../web-components/components/button/button.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('./simple-hero.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 simple-hero.examples.html — ${err.message}</p>`;
37
- console.error('[simple-hero.html]', err);
38
- }
39
- </script>
40
-
41
- </body>
42
- </html>
package/simple/simple-shell/simple-shell.examples.html DELETED
@@ -1,42 +0,0 @@
1
- <h1>simple-shell — minimal shell for marketing / landing / error pages</h1>
2
-
3
- <p>The 4th cluster in the bespoke shell family per ADR-0023. Designed deliberately small (1 host + 2 CSS-only children) to demonstrate the pattern works for thin clusters without ceremony.</p>
4
-
5
- <h2>Default — top-aligned with hero + content</h2>
6
-
7
- <simple-shell style="border: 1px solid var(--a-border); border-radius: var(--a-radius-3); min-height: 60dvh; padding-block: var(--a-density-4);">
8
- <simple-hero>
9
- <h1 slot="heading">Welcome to AdiaUI</h1>
10
- <p slot="lede">A zero-dependency vanilla JS web component library for modern interfaces.</p>
11
- <div slot="actions">
12
- <button-ui variant="solid" color="accent">Get started</button-ui>
13
- <button-ui variant="ghost">View on GitHub</button-ui>
14
- </div>
15
- </simple-hero>
16
- <simple-content>
17
- <h2>Quick example</h2>
18
- <p>Drop primitives into any HTML page — no build tools needed.</p>
19
- <p>Components are framework-agnostic. Use them in vanilla HTML, React, Vue, Svelte, or anywhere else.</p>
20
- </simple-content>
21
- </simple-shell>
22
-
23
- <h2>[centered] — vertically centered content</h2>
24
-
25
- <simple-shell centered style="border: 1px solid var(--a-border); border-radius: var(--a-radius-3); min-height: 60dvh;">
26
- <simple-hero>
27
- <h1 slot="heading">404 — Page Not Found</h1>
28
- <p slot="lede">The page you're looking for doesn't exist or has been moved.</p>
29
- <div slot="actions">
30
- <button-ui variant="solid" color="accent">Back to home</button-ui>
31
- </div>
32
- </simple-hero>
33
- </simple-shell>
34
-
35
- <h2>[full-bleed] — drops the max-width constraint</h2>
36
-
37
- <simple-shell full-bleed style="border: 1px solid var(--a-border); border-radius: var(--a-radius-3); min-height: 40dvh; background: var(--a-canvas-0);">
38
- <simple-content>
39
- <h2>Full-bleed content</h2>
40
- <p>When [full-bleed] is set, children stretch to the viewport width instead of being bounded by the default max-width (~56rem). Use for hero sections that want edge-to-edge background, or marketing pages with full-width imagery.</p>
41
- </simple-content>
42
- </simple-shell>
package/simple/simple-shell/simple-shell.html DELETED
@@ -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>Simple Shell — 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="../simple-shell/simple-shell.css">
11
- <link rel="stylesheet" href="../simple-content/simple-content.css">
12
- <link rel="stylesheet" href="../simple-hero/simple-hero.css">
13
- <link rel="stylesheet" href="../../../web-components/components/button/button.css">
14
-
15
- <script type="module" src="../simple-shell/simple-shell.js"></script>
16
- <script type="module" src="../../../web-components/components/button/button.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('./simple-shell.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 simple-shell.examples.html — ${err.message}</p>`;
37
- console.error('[simple-shell.html]', err);
38
- }
39
- </script>
40
-
41
- </body>
42
- </html>
package/theme/theme-panel/theme-panel.examples.html DELETED
@@ -1,112 +0,0 @@
1
- <header>
2
- <div>
3
- <h1>Theme Panel</h1>
4
- <div data-actions>
5
- <tag-ui size="sm">theme-panel</tag-ui>
6
- </div>
7
- </div>
8
- <p>Module-tier appearance-preferences control surface — eight named themes, parametric density &amp; radius sliders, three presets, optional light/dark scheme toggle, and opt-in <code>localStorage</code> persistence. Drop into any <code>&lt;popover-ui slot="content"&gt;</code> in your shell's topbar.</p>
9
- </header>
10
-
11
- <section data-section>
12
- <h2 variant="section">Minimal — themes only</h2>
13
- <p data-note>Default theme grid. No sliders, no presets, no scheme toggle. Suitable for embedded demos where only theme swapping is offered.</p>
14
- <code-ui language="html">&lt;theme-panel&gt;&lt;/theme-panel&gt;</code-ui>
15
- <theme-panel></theme-panel>
16
- </section>
17
-
18
- <section data-section>
19
- <h2 variant="section">With parametric sliders</h2>
20
- <p data-note>Adds the density + radius slider block. Selecting a theme also reads the theme's computed knob values back into the sliders.</p>
21
- <code-ui language="html">&lt;theme-panel parametric&gt;&lt;/theme-panel&gt;</code-ui>
22
- <theme-panel parametric></theme-panel>
23
- </section>
24
-
25
- <section data-section>
26
- <h2 variant="section">Full panel — parametric + presets + scheme toggle</h2>
27
- <p data-note>The docs-shell configuration. Theme + scheme + parametric + presets, all surfaces visible. <code>persist</code> is set so refreshing the page restores your selections.</p>
28
- <code-ui language="html">&lt;theme-panel
29
- parametric
30
- presets
31
- scheme-toggle
32
- persist
33
- &gt;&lt;/theme-panel&gt;</code-ui>
34
- <theme-panel parametric presets scheme-toggle persist></theme-panel>
35
- </section>
36
-
37
- <section data-section>
38
- <h2 variant="section">Restricted theme list</h2>
39
- <p data-note>The <code>[themes]</code> attribute is tolerant — any space-separated list of slugs renders as buttons. Pass a subset to limit choices, or extend with custom slugs (you supply the matching CSS).</p>
40
- <code-ui language="html">&lt;theme-panel
41
- themes="default ocean midnight"
42
- parametric
43
- &gt;&lt;/theme-panel&gt;</code-ui>
44
- <theme-panel themes="default ocean midnight" parametric></theme-panel>
45
- </section>
46
-
47
- <section data-section>
48
- <h2 variant="section">Inside a popover (canonical composition)</h2>
49
- <p data-note>The usual shape — a palette-icon button trigger pops the panel from a topbar. This is how <code>site/</code> and <code>playgrounds/admin-shell/</code> consume the module.</p>
50
- <code-ui language="html">&lt;popover-ui placement="bottom-end"&gt;
51
- &lt;button-ui icon="palette" title="Choose theme" variant="ghost" size="sm" slot="trigger"&gt;&lt;/button-ui&gt;
52
- &lt;theme-panel slot="content" parametric presets scheme-toggle&gt;&lt;/theme-panel&gt;
53
- &lt;/popover-ui&gt;</code-ui>
54
- <popover-ui placement="bottom-end">
55
- <button-ui icon="palette" title="Choose theme" variant="ghost" size="sm" slot="trigger"></button-ui>
56
- <theme-panel slot="content" parametric presets scheme-toggle></theme-panel>
57
- </popover-ui>
58
- </section>
59
-
60
- <section data-section>
61
- <h2 variant="section">Scoped target — preview pane</h2>
62
- <p data-note>By default, the panel writes to <code>:root</code> (the <code>&lt;html&gt;</code> element). Pass <code>[target]</code> to scope theming to a region — useful for editor previews and component playgrounds.</p>
63
- <code-ui language="html">&lt;theme-panel target="#preview-pane" parametric&gt;&lt;/theme-panel&gt;
64
- &lt;div id="preview-pane"&gt;…preview content…&lt;/div&gt;</code-ui>
65
- <theme-panel target="#preview-pane" parametric></theme-panel>
66
- <div id="preview-pane" style="margin-top:var(--a-space-3); padding:var(--a-space-4); border:1px solid var(--a-border); border-radius:calc(var(--a-radius-2) * var(--a-radius-k, 1));">
67
- <strong>Preview pane</strong> — theming applied here only.
68
- </div>
69
- </section>
70
-
71
- <section data-section>
72
- <h2 variant="section">Attributes</h2>
73
- <table>
74
- <thead><tr><th>Attribute</th><th>Type</th><th>Default</th><th>Notes</th></tr></thead>
75
- <tbody>
76
- <tr><td><code>themes</code></td><td>string</td><td>8 named slugs</td><td>Space-separated theme slug list.</td></tr>
77
- <tr><td><code>parametric</code></td><td>boolean</td><td><code>false</code></td><td>Renders density + radius sliders.</td></tr>
78
- <tr><td><code>presets</code></td><td>boolean</td><td><code>false</code></td><td>Renders compact / reset / spacious row.</td></tr>
79
- <tr><td><code>scheme-toggle</code></td><td>boolean</td><td><code>false</code></td><td>Renders integrated light/dark switch.</td></tr>
80
- <tr><td><code>persist</code></td><td>boolean</td><td><code>false</code></td><td>Writes selections to localStorage.</td></tr>
81
- <tr><td><code>storage-prefix</code></td><td>string</td><td><code>adia-theme-</code></td><td>LS key namespace when persisting.</td></tr>
82
- <tr><td><code>target</code></td><td>string (selector)</td><td><code>:root</code></td><td>Element to receive writes.</td></tr>
83
- <tr><td><code>scheme</code></td><td>enum</td><td><code>auto</code></td><td><code>light</code> / <code>dark</code> / <code>auto</code>.</td></tr>
84
- </tbody>
85
- </table>
86
- </section>
87
-
88
- <section data-section>
89
- <h2 variant="section">Reflected state</h2>
90
- <p>Read-only externally; use <code>.apply()</code> to mutate. Style with <code>:has(theme-panel[active-scheme="dark"])</code>.</p>
91
- <table>
92
- <thead><tr><th>Attribute</th><th>Notes</th></tr></thead>
93
- <tbody>
94
- <tr><td><code>active-theme</code></td><td>Currently selected slug; empty for default.</td></tr>
95
- <tr><td><code>active-scheme</code></td><td>Resolved scheme (auto collapsed to light or dark).</td></tr>
96
- <tr><td><code>active-density</code></td><td>Current <code>--a-density</code> on target.</td></tr>
97
- <tr><td><code>active-radius</code></td><td>Current <code>--a-radius-k</code> on target.</td></tr>
98
- </tbody>
99
- </table>
100
- </section>
101
-
102
- <section data-section>
103
- <h2 variant="section">Events &amp; methods</h2>
104
- <table>
105
- <thead><tr><th>Surface</th><th>Shape</th><th>Notes</th></tr></thead>
106
- <tbody>
107
- <tr><td><code>theme-change</code> event</td><td><code>{ theme, scheme, density, radius, source }</code></td><td>Bubbles. <code>source</code> ∈ <code>theme | slider | preset | scheme | reset | programmatic</code>.</td></tr>
108
- <tr><td><code>.apply(partial)</code></td><td><code>(p: { theme?, scheme?, density?, radius? }) =&gt; void</code></td><td>Programmatic write; emits <code>theme-change</code> with <code>source: 'programmatic'</code>.</td></tr>
109
- <tr><td><code>.reset()</code></td><td><code>() =&gt; void</code></td><td>Clears all state; emits <code>theme-change</code> with <code>source: 'reset'</code>.</td></tr>
110
- </tbody>
111
- </table>
112
- </section>
package/theme/theme-panel/theme-panel.html DELETED
@@ -1,75 +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>Theme Panel — 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
- <link rel="stylesheet" href="../../../web-components/styles/themes.css">
12
-
13
- <!-- Primitive CSS used inside the panel -->
14
- <link rel="stylesheet" href="../../../web-components/components/button/button.css">
15
- <link rel="stylesheet" href="../../../web-components/components/popover/popover.css">
16
- <link rel="stylesheet" href="../../../web-components/components/slider/slider.css">
17
- <link rel="stylesheet" href="../../../web-components/components/field/field.css">
18
- <link rel="stylesheet" href="../../../web-components/components/divider/divider.css">
19
- <link rel="stylesheet" href="../../../web-components/components/text/text.css">
20
- <link rel="stylesheet" href="../../../web-components/components/segmented/segmented.css">
21
- <link rel="stylesheet" href="../../../web-components/components/segment/segment.css">
22
- <link rel="stylesheet" href="../../../web-components/components/icon/icon.css">
23
- <link rel="stylesheet" href="../../../web-components/components/code/code.css">
24
- <link rel="stylesheet" href="../../../web-components/components/tag/tag.css">
25
-
26
- <link rel="stylesheet" href="../segment/segment.css">
27
- <!-- Module CSS -->
28
- <link rel="stylesheet" href="./theme-panel.css">
29
-
30
- <!-- Primitive JS -->
31
- <script type="module" src="../../../web-components/components/button/button.js"></script>
32
- <script type="module" src="../../../web-components/components/popover/popover.js"></script>
33
- <script type="module" src="../../../web-components/components/slider/slider.js"></script>
34
- <script type="module" src="../../../web-components/components/field/field.js"></script>
35
- <script type="module" src="../../../web-components/components/divider/divider.js"></script>
36
- <script type="module" src="../../../web-components/components/text/text.js"></script>
37
- <script type="module" src="../../../web-components/components/segmented/segmented.js"></script>
38
- <script type="module" src="../../../web-components/components/icon/icon.js"></script>
39
- <script type="module" src="../../../web-components/components/code/code.js"></script>
40
- <script type="module" src="../../../web-components/components/tag/tag.js"></script>
41
-
42
- <script type="module" src="../segment/segment.js"></script>
43
- <!-- Module JS -->
44
- <script type="module" src="./theme-panel.js"></script>
45
-
46
- <style>
47
- :where(html, body) {
48
- margin: 0; min-height: 100vh;
49
- background: var(--a-bg);
50
- color: var(--a-fg);
51
- font-family: var(--a-font);
52
- }
53
- main { max-width: 960px; margin-inline: auto; padding: var(--a-space-6) var(--a-space-5); }
54
- </style>
55
- </head>
56
- <body>
57
-
58
- <main id="demo-root">
59
- <p>Loading examples…</p>
60
- </main>
61
-
62
- <script type="module">
63
- const root = document.getElementById('demo-root');
64
- try {
65
- const res = await fetch('./theme-panel.examples.html');
66
- if (!res.ok) throw new Error(`fetch failed (${res.status})`);
67
- root.innerHTML = await res.text();
68
- } catch (err) {
69
- root.innerHTML = `<p style="color:var(--a-danger-strong);">Failed to load theme-panel.examples.html — ${err.message}</p>`;
70
- console.error('[theme-panel.html]', err);
71
- }
72
- </script>
73
-
74
- </body>
75
- </html>