@adia-ai/web-modules 0.4.0 → 0.4.2
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 +30 -0
- package/README.md +29 -15
- package/editor/editor-shell/css/editor-shell.bespoke.css +7 -0
- package/editor/editor-shell/css/editor-shell.layout.css +15 -4
- package/editor/editor-sidebar/editor-sidebar.js +14 -2
- package/index.js +2 -0
- package/package.json +10 -3
- package/shell/admin-shell/css/admin-shell.main.css +35 -0
- package/simple/index.js +2 -0
- package/simple/simple-content/simple-content.a2ui.json +67 -0
- package/simple/simple-content/simple-content.css +29 -0
- package/simple/simple-content/simple-content.examples.html +13 -0
- package/simple/simple-content/simple-content.html +42 -0
- package/simple/simple-content/simple-content.yaml +54 -0
- package/simple/simple-hero/simple-hero.a2ui.json +76 -0
- package/simple/simple-hero/simple-hero.css +45 -0
- package/simple/simple-hero/simple-hero.examples.html +33 -0
- package/simple/simple-hero/simple-hero.html +42 -0
- package/simple/simple-hero/simple-hero.yaml +57 -0
- package/simple/simple-shell/simple-shell.a2ui.json +87 -0
- package/simple/simple-shell/simple-shell.css +40 -0
- package/simple/simple-shell/simple-shell.examples.html +42 -0
- package/simple/simple-shell/simple-shell.html +42 -0
- package/simple/simple-shell/simple-shell.js +47 -0
- package/simple/simple-shell/simple-shell.test.js +83 -0
- package/simple/simple-shell/simple-shell.yaml +78 -0
- package/theme/index.js +1 -0
- package/theme/theme-panel/theme-panel.a2ui.json +173 -0
- package/theme/theme-panel/theme-panel.css +50 -0
- package/theme/theme-panel/theme-panel.examples.html +104 -0
- package/theme/theme-panel/theme-panel.html +73 -0
- package/theme/theme-panel/theme-panel.js +533 -0
- package/theme/theme-panel/theme-panel.test.js +274 -0
- package/theme/theme-panel/theme-panel.yaml +213 -0
|
@@ -0,0 +1,173 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://json-schema.org/draft/2020-12/schema",
|
|
3
|
+
"$id": "https://adiaui.dev/a2ui/v0_9/components/ThemePanel.json",
|
|
4
|
+
"title": "ThemePanel",
|
|
5
|
+
"description": "Module-tier appearance-preferences control surface. Owns the three knobs\nof the AdiaUI theming contract: [data-theme=<slug>] named themes,\n--a-density / --a-radius-k parametric overrides, and color-scheme\nlight/dark switching, plus optional localStorage persistence behind a\nsmall attribute API.\n\nDrops into any consumer's <popover-ui slot=\"content\"> (the canonical\ncomposition) or directly into a sidebar section. Eight named themes\nship by default; section visibility flips on/off via boolean attributes\n([parametric], [presets], [scheme-toggle]).\n\nPromoted from the duplicated <div id=\"theme-panel\"> block in site/ and\nplaygrounds/admin-shell/ — see docs/specs/theme-panel-module.md.\n",
|
|
6
|
+
"type": "object",
|
|
7
|
+
"allOf": [
|
|
8
|
+
{
|
|
9
|
+
"$ref": "common_types.json#/$defs/ComponentCommon"
|
|
10
|
+
},
|
|
11
|
+
{
|
|
12
|
+
"$ref": "common_types.json#/$defs/CatalogComponentCommon"
|
|
13
|
+
}
|
|
14
|
+
],
|
|
15
|
+
"properties": {
|
|
16
|
+
"active-density": {
|
|
17
|
+
"description": "Reflected — mirrors the current --a-density value on the target\nelement. Stringified number.\n",
|
|
18
|
+
"type": "string",
|
|
19
|
+
"default": ""
|
|
20
|
+
},
|
|
21
|
+
"active-radius": {
|
|
22
|
+
"description": "Reflected — mirrors the current --a-radius-k value on the target\nelement. Stringified number.\n",
|
|
23
|
+
"type": "string",
|
|
24
|
+
"default": ""
|
|
25
|
+
},
|
|
26
|
+
"active-scheme": {
|
|
27
|
+
"description": "Reflected — the resolved color-scheme (auto collapsed to a\nconcrete value). Either \"light\" or \"dark\".\n",
|
|
28
|
+
"type": "string",
|
|
29
|
+
"default": ""
|
|
30
|
+
},
|
|
31
|
+
"active-theme": {
|
|
32
|
+
"description": "Reflected — the currently selected theme slug. Empty string when\nunset (default theme). Read-only externally; use .apply({theme})\nto change.\n",
|
|
33
|
+
"type": "string",
|
|
34
|
+
"default": ""
|
|
35
|
+
},
|
|
36
|
+
"component": {
|
|
37
|
+
"const": "ThemePanel"
|
|
38
|
+
},
|
|
39
|
+
"parametric": {
|
|
40
|
+
"description": "Renders the density + radius slider block. Sliders bind to\n--a-density and --a-radius-k on the target element.\n",
|
|
41
|
+
"type": "boolean",
|
|
42
|
+
"default": false
|
|
43
|
+
},
|
|
44
|
+
"persist": {
|
|
45
|
+
"description": "Persists selections to localStorage. Defaults to ephemeral so\nplaygrounds and embedded demos do not silently mutate a user's\ndocs-shell preferences.\n",
|
|
46
|
+
"type": "boolean",
|
|
47
|
+
"default": false
|
|
48
|
+
},
|
|
49
|
+
"presets": {
|
|
50
|
+
"description": "Renders the compact / reset / spacious preset row. Each preset\napplies a (density, radius) pair; \"default\" also clears the\n[data-theme] attribute.\n",
|
|
51
|
+
"type": "boolean",
|
|
52
|
+
"default": false
|
|
53
|
+
},
|
|
54
|
+
"scheme": {
|
|
55
|
+
"description": "Initial color-scheme. \"auto\" follows prefers-color-scheme via a\nmatchMedia listener; user clicks on the scheme toggle promote to\nan explicit light or dark choice.\n",
|
|
56
|
+
"type": "string",
|
|
57
|
+
"enum": [
|
|
58
|
+
"light",
|
|
59
|
+
"dark",
|
|
60
|
+
"auto"
|
|
61
|
+
],
|
|
62
|
+
"default": "auto"
|
|
63
|
+
},
|
|
64
|
+
"scheme-toggle": {
|
|
65
|
+
"description": "Renders an integrated light/dark <segmented-ui> at the top of the\npanel. When absent, the panel omits scheme entirely — consumers\ncan still drive scheme via the .apply({scheme}) public method.\n",
|
|
66
|
+
"type": "boolean",
|
|
67
|
+
"default": false
|
|
68
|
+
},
|
|
69
|
+
"storage-prefix": {
|
|
70
|
+
"description": "Namespace for localStorage keys when [persist] is set. Four keys\nare written: {prefix}theme, {prefix}scheme, {prefix}density,\n{prefix}radius.\n",
|
|
71
|
+
"type": "string",
|
|
72
|
+
"default": "adia-theme-"
|
|
73
|
+
},
|
|
74
|
+
"target": {
|
|
75
|
+
"description": "CSS selector for the element that receives [data-theme] and\n--a-density / --a-radius-k writes. Defaults to :root (the\n<html> element). Scoped targets are useful for preview-pane\ndemos.\n",
|
|
76
|
+
"type": "string",
|
|
77
|
+
"default": ":root"
|
|
78
|
+
},
|
|
79
|
+
"themes": {
|
|
80
|
+
"description": "Space-separated list of theme slugs to render as buttons. Author\nmay restrict ([themes=\"default ocean\"]) or extend. Tolerant —\nunknown slugs render a button; clicking applies [data-theme=slug]\nregardless of whether themes.css has a matching block.\n",
|
|
81
|
+
"type": "string",
|
|
82
|
+
"default": "default ocean forest sunset lavender rose slate midnight"
|
|
83
|
+
}
|
|
84
|
+
},
|
|
85
|
+
"required": [
|
|
86
|
+
"component"
|
|
87
|
+
],
|
|
88
|
+
"unevaluatedProperties": false,
|
|
89
|
+
"x-adiaui": {
|
|
90
|
+
"anti_patterns": [],
|
|
91
|
+
"category": "layout",
|
|
92
|
+
"events": {
|
|
93
|
+
"theme-change": {
|
|
94
|
+
"description": "Bubbles when any user-visible state changes (theme click, slider\ninput, preset click, scheme flip, reset). One event per change.\nNo event on auto-rehydrate-from-storage at boot.\n",
|
|
95
|
+
"detail": {
|
|
96
|
+
"theme": "string",
|
|
97
|
+
"density": "number",
|
|
98
|
+
"radius": "number",
|
|
99
|
+
"scheme": "string",
|
|
100
|
+
"source": "string"
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
},
|
|
104
|
+
"examples": [],
|
|
105
|
+
"keywords": [
|
|
106
|
+
"theme",
|
|
107
|
+
"theme-panel",
|
|
108
|
+
"palette",
|
|
109
|
+
"density",
|
|
110
|
+
"radius",
|
|
111
|
+
"scheme",
|
|
112
|
+
"dark-mode",
|
|
113
|
+
"light-mode",
|
|
114
|
+
"color-scheme",
|
|
115
|
+
"preferences",
|
|
116
|
+
"settings",
|
|
117
|
+
"color",
|
|
118
|
+
"appearance",
|
|
119
|
+
"skin"
|
|
120
|
+
],
|
|
121
|
+
"name": "ThemePanel",
|
|
122
|
+
"related": [
|
|
123
|
+
"Popover",
|
|
124
|
+
"Button",
|
|
125
|
+
"Slider",
|
|
126
|
+
"Field",
|
|
127
|
+
"Divider",
|
|
128
|
+
"Text",
|
|
129
|
+
"Segmented",
|
|
130
|
+
"AdminShell"
|
|
131
|
+
],
|
|
132
|
+
"slots": {},
|
|
133
|
+
"states": [
|
|
134
|
+
{
|
|
135
|
+
"description": "Default — panel rendered, awaiting input.",
|
|
136
|
+
"name": "idle"
|
|
137
|
+
},
|
|
138
|
+
{
|
|
139
|
+
"description": "[persist] is set; selections write to localStorage under\n[storage-prefix].\n",
|
|
140
|
+
"attribute": "persist",
|
|
141
|
+
"name": "persisted"
|
|
142
|
+
},
|
|
143
|
+
{
|
|
144
|
+
"description": "[scheme=\"auto\"] and no user override this session; a\nprefers-color-scheme listener reapplies on system flip.\n",
|
|
145
|
+
"name": "scheme-auto"
|
|
146
|
+
}
|
|
147
|
+
],
|
|
148
|
+
"synonyms": {
|
|
149
|
+
"theme": [
|
|
150
|
+
"palette",
|
|
151
|
+
"skin",
|
|
152
|
+
"appearance"
|
|
153
|
+
],
|
|
154
|
+
"density": [
|
|
155
|
+
"compactness",
|
|
156
|
+
"spacing-scale"
|
|
157
|
+
],
|
|
158
|
+
"radius": [
|
|
159
|
+
"corner-roundness",
|
|
160
|
+
"border-radius"
|
|
161
|
+
],
|
|
162
|
+
"scheme": [
|
|
163
|
+
"mode",
|
|
164
|
+
"color-scheme",
|
|
165
|
+
"dark-mode"
|
|
166
|
+
]
|
|
167
|
+
},
|
|
168
|
+
"tag": "theme-panel",
|
|
169
|
+
"tokens": {},
|
|
170
|
+
"traits": [],
|
|
171
|
+
"version": 1
|
|
172
|
+
}
|
|
173
|
+
}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
/* ═══════════════════════════════════════════════════════════════
|
|
2
|
+
<theme-panel> — appearance-preferences control surface.
|
|
3
|
+
Replaces the inline style= attributes from the two consumers.
|
|
4
|
+
Two-block @scope pattern per component-token-contract.md.
|
|
5
|
+
Zero raw color values (repo hard rule); leans on global tokens.
|
|
6
|
+
═══════════════════════════════════════════════════════════════ */
|
|
7
|
+
|
|
8
|
+
/* ── 1. Token declarations ── */
|
|
9
|
+
|
|
10
|
+
theme-panel {
|
|
11
|
+
--theme-panel-gap: var(--a-space-3);
|
|
12
|
+
--theme-panel-pad: var(--a-space-3);
|
|
13
|
+
--theme-panel-min-width: 260px;
|
|
14
|
+
--theme-panel-row-gap: var(--a-space-1);
|
|
15
|
+
--theme-panel-preset-gap: var(--a-space-2);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
/* ── 2. Scoped layout ── */
|
|
19
|
+
|
|
20
|
+
@scope (theme-panel) {
|
|
21
|
+
:scope {
|
|
22
|
+
display: flex;
|
|
23
|
+
flex-direction: column;
|
|
24
|
+
gap: var(--theme-panel-gap);
|
|
25
|
+
padding: var(--theme-panel-pad);
|
|
26
|
+
min-width: var(--theme-panel-min-width);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
[part="scheme"] {
|
|
30
|
+
display: flex;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
[part="scheme"] > segmented-ui {
|
|
34
|
+
flex: 1;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
[part="themes"] {
|
|
38
|
+
display: flex;
|
|
39
|
+
gap: var(--theme-panel-row-gap);
|
|
40
|
+
flex-wrap: wrap;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
[part="presets"] {
|
|
44
|
+
display: flex;
|
|
45
|
+
gap: var(--theme-panel-preset-gap);
|
|
46
|
+
flex-wrap: wrap;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
/* field-ui already provides its own label + layout; nothing extra here */
|
|
50
|
+
}
|
|
@@ -0,0 +1,104 @@
|
|
|
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 & radius sliders, three presets, optional light/dark scheme toggle, and opt-in <code>localStorage</code> persistence. Drop into any <code><popover-ui slot="content"></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"><theme-panel></theme-panel></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"><theme-panel parametric></theme-panel></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"><theme-panel parametric presets scheme-toggle persist></theme-panel></code-ui>
|
|
29
|
+
<theme-panel parametric presets scheme-toggle persist></theme-panel>
|
|
30
|
+
</section>
|
|
31
|
+
|
|
32
|
+
<section data-section>
|
|
33
|
+
<h2 variant="section">Restricted theme list</h2>
|
|
34
|
+
<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>
|
|
35
|
+
<code-ui language="html"><theme-panel themes="default ocean midnight" parametric></theme-panel></code-ui>
|
|
36
|
+
<theme-panel themes="default ocean midnight" parametric></theme-panel>
|
|
37
|
+
</section>
|
|
38
|
+
|
|
39
|
+
<section data-section>
|
|
40
|
+
<h2 variant="section">Inside a popover (canonical composition)</h2>
|
|
41
|
+
<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>
|
|
42
|
+
<code-ui language="html"><popover-ui placement="bottom-end">
|
|
43
|
+
<button-ui icon="palette" variant="ghost" size="sm" slot="trigger"></button-ui>
|
|
44
|
+
<theme-panel slot="content" parametric presets scheme-toggle></theme-panel>
|
|
45
|
+
</popover-ui></code-ui>
|
|
46
|
+
<popover-ui placement="bottom-end">
|
|
47
|
+
<button-ui icon="palette" variant="ghost" size="sm" slot="trigger"></button-ui>
|
|
48
|
+
<theme-panel slot="content" parametric presets scheme-toggle></theme-panel>
|
|
49
|
+
</popover-ui>
|
|
50
|
+
</section>
|
|
51
|
+
|
|
52
|
+
<section data-section>
|
|
53
|
+
<h2 variant="section">Scoped target — preview pane</h2>
|
|
54
|
+
<p data-note>By default, the panel writes to <code>:root</code> (the <code><html></code> element). Pass <code>[target]</code> to scope theming to a region — useful for editor previews and component playgrounds.</p>
|
|
55
|
+
<code-ui language="html"><theme-panel target="#preview-pane" parametric></theme-panel>
|
|
56
|
+
<div id="preview-pane">…preview content…</div></code-ui>
|
|
57
|
+
<theme-panel target="#preview-pane" parametric></theme-panel>
|
|
58
|
+
<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));">
|
|
59
|
+
<strong>Preview pane</strong> — theming applied here only.
|
|
60
|
+
</div>
|
|
61
|
+
</section>
|
|
62
|
+
|
|
63
|
+
<section data-section>
|
|
64
|
+
<h2 variant="section">Attributes</h2>
|
|
65
|
+
<table>
|
|
66
|
+
<thead><tr><th>Attribute</th><th>Type</th><th>Default</th><th>Notes</th></tr></thead>
|
|
67
|
+
<tbody>
|
|
68
|
+
<tr><td><code>themes</code></td><td>string</td><td>8 named slugs</td><td>Space-separated theme slug list.</td></tr>
|
|
69
|
+
<tr><td><code>parametric</code></td><td>boolean</td><td><code>false</code></td><td>Renders density + radius sliders.</td></tr>
|
|
70
|
+
<tr><td><code>presets</code></td><td>boolean</td><td><code>false</code></td><td>Renders compact / reset / spacious row.</td></tr>
|
|
71
|
+
<tr><td><code>scheme-toggle</code></td><td>boolean</td><td><code>false</code></td><td>Renders integrated light/dark switch.</td></tr>
|
|
72
|
+
<tr><td><code>persist</code></td><td>boolean</td><td><code>false</code></td><td>Writes selections to localStorage.</td></tr>
|
|
73
|
+
<tr><td><code>storage-prefix</code></td><td>string</td><td><code>adia-theme-</code></td><td>LS key namespace when persisting.</td></tr>
|
|
74
|
+
<tr><td><code>target</code></td><td>string (selector)</td><td><code>:root</code></td><td>Element to receive writes.</td></tr>
|
|
75
|
+
<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>
|
|
76
|
+
</tbody>
|
|
77
|
+
</table>
|
|
78
|
+
</section>
|
|
79
|
+
|
|
80
|
+
<section data-section>
|
|
81
|
+
<h2 variant="section">Reflected state</h2>
|
|
82
|
+
<p>Read-only externally; use <code>.apply()</code> to mutate. Style with <code>:has(theme-panel[active-scheme="dark"])</code>.</p>
|
|
83
|
+
<table>
|
|
84
|
+
<thead><tr><th>Attribute</th><th>Notes</th></tr></thead>
|
|
85
|
+
<tbody>
|
|
86
|
+
<tr><td><code>active-theme</code></td><td>Currently selected slug; empty for default.</td></tr>
|
|
87
|
+
<tr><td><code>active-scheme</code></td><td>Resolved scheme (auto collapsed to light or dark).</td></tr>
|
|
88
|
+
<tr><td><code>active-density</code></td><td>Current <code>--a-density</code> on target.</td></tr>
|
|
89
|
+
<tr><td><code>active-radius</code></td><td>Current <code>--a-radius-k</code> on target.</td></tr>
|
|
90
|
+
</tbody>
|
|
91
|
+
</table>
|
|
92
|
+
</section>
|
|
93
|
+
|
|
94
|
+
<section data-section>
|
|
95
|
+
<h2 variant="section">Events & methods</h2>
|
|
96
|
+
<table>
|
|
97
|
+
<thead><tr><th>Surface</th><th>Shape</th><th>Notes</th></tr></thead>
|
|
98
|
+
<tbody>
|
|
99
|
+
<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>
|
|
100
|
+
<tr><td><code>.apply(partial)</code></td><td><code>(p: { theme?, scheme?, density?, radius? }) => void</code></td><td>Programmatic write; emits <code>theme-change</code> with <code>source: 'programmatic'</code>.</td></tr>
|
|
101
|
+
<tr><td><code>.reset()</code></td><td><code>() => void</code></td><td>Clears all state; emits <code>theme-change</code> with <code>source: 'reset'</code>.</td></tr>
|
|
102
|
+
</tbody>
|
|
103
|
+
</table>
|
|
104
|
+
</section>
|
|
@@ -0,0 +1,73 @@
|
|
|
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
|
+
<!-- Module CSS -->
|
|
27
|
+
<link rel="stylesheet" href="./theme-panel.css">
|
|
28
|
+
|
|
29
|
+
<!-- Primitive JS -->
|
|
30
|
+
<script type="module" src="../../../web-components/components/button/button.js"></script>
|
|
31
|
+
<script type="module" src="../../../web-components/components/popover/popover.js"></script>
|
|
32
|
+
<script type="module" src="../../../web-components/components/slider/slider.js"></script>
|
|
33
|
+
<script type="module" src="../../../web-components/components/field/field.js"></script>
|
|
34
|
+
<script type="module" src="../../../web-components/components/divider/divider.js"></script>
|
|
35
|
+
<script type="module" src="../../../web-components/components/text/text.js"></script>
|
|
36
|
+
<script type="module" src="../../../web-components/components/segmented/segmented.js"></script>
|
|
37
|
+
<script type="module" src="../../../web-components/components/icon/icon.js"></script>
|
|
38
|
+
<script type="module" src="../../../web-components/components/code/code.js"></script>
|
|
39
|
+
<script type="module" src="../../../web-components/components/tag/tag.js"></script>
|
|
40
|
+
|
|
41
|
+
<!-- Module JS -->
|
|
42
|
+
<script type="module" src="./theme-panel.js"></script>
|
|
43
|
+
|
|
44
|
+
<style>
|
|
45
|
+
:where(html, body) {
|
|
46
|
+
margin: 0; min-height: 100vh;
|
|
47
|
+
background: var(--a-bg);
|
|
48
|
+
color: var(--a-fg);
|
|
49
|
+
font-family: var(--a-font);
|
|
50
|
+
}
|
|
51
|
+
main { max-width: 960px; margin-inline: auto; padding: var(--a-space-6) var(--a-space-5); }
|
|
52
|
+
</style>
|
|
53
|
+
</head>
|
|
54
|
+
<body>
|
|
55
|
+
|
|
56
|
+
<main id="demo-root">
|
|
57
|
+
<p>Loading examples…</p>
|
|
58
|
+
</main>
|
|
59
|
+
|
|
60
|
+
<script type="module">
|
|
61
|
+
const root = document.getElementById('demo-root');
|
|
62
|
+
try {
|
|
63
|
+
const res = await fetch('./theme-panel.examples.html');
|
|
64
|
+
if (!res.ok) throw new Error(`fetch failed (${res.status})`);
|
|
65
|
+
root.innerHTML = await res.text();
|
|
66
|
+
} catch (err) {
|
|
67
|
+
root.innerHTML = `<p style="color:var(--a-danger-strong);">Failed to load theme-panel.examples.html — ${err.message}</p>`;
|
|
68
|
+
console.error('[theme-panel.html]', err);
|
|
69
|
+
}
|
|
70
|
+
</script>
|
|
71
|
+
|
|
72
|
+
</body>
|
|
73
|
+
</html>
|