@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,42 @@
|
|
|
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>
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
# Edit this file; run `npm run build:components` to regenerate a2ui.json.
|
|
2
|
+
$schema: ../../../../scripts/schemas/component.yaml.schema.json
|
|
3
|
+
name: SimpleHero
|
|
4
|
+
tag: simple-hero
|
|
5
|
+
component: SimpleHero
|
|
6
|
+
category: shells
|
|
7
|
+
version: 1
|
|
8
|
+
description: |
|
|
9
|
+
Module-tier hero strip for the top of marketing / landing / error
|
|
10
|
+
pages. CSS-only — no JS, no state. Three named slots (heading, lede,
|
|
11
|
+
actions) carry the canonical hero composition.
|
|
12
|
+
|
|
13
|
+
Sits inside <simple-shell> above <simple-content>. Companion to
|
|
14
|
+
<simple-content> per ADR-0023 bespoke shell-tier children.
|
|
15
|
+
|
|
16
|
+
props: {}
|
|
17
|
+
|
|
18
|
+
events: {}
|
|
19
|
+
|
|
20
|
+
slots:
|
|
21
|
+
heading:
|
|
22
|
+
description: Large display heading (h1) — the page title.
|
|
23
|
+
lede:
|
|
24
|
+
description: Lead paragraph below heading — short summary or CTA tagline.
|
|
25
|
+
actions:
|
|
26
|
+
description: Action row (button-ui, link-ui) for primary CTAs.
|
|
27
|
+
default:
|
|
28
|
+
description: Optional inline content if the named slots are insufficient.
|
|
29
|
+
|
|
30
|
+
states:
|
|
31
|
+
- name: idle
|
|
32
|
+
description: Default, visible.
|
|
33
|
+
|
|
34
|
+
traits: []
|
|
35
|
+
|
|
36
|
+
a2ui:
|
|
37
|
+
rules:
|
|
38
|
+
- >-
|
|
39
|
+
simple-hero is the optional top strip inside simple-shell. Use
|
|
40
|
+
for marketing splashes, error-page reassurance text, or single-
|
|
41
|
+
flow page intros. Always followed by <simple-content> for body.
|
|
42
|
+
|
|
43
|
+
keywords:
|
|
44
|
+
- simple-hero
|
|
45
|
+
- hero
|
|
46
|
+
- splash
|
|
47
|
+
- landing-hero
|
|
48
|
+
- marketing-hero
|
|
49
|
+
- intro
|
|
50
|
+
- page-title
|
|
51
|
+
|
|
52
|
+
synonyms:
|
|
53
|
+
simple-hero: [page-hero, splash-hero, landing-hero, intro-strip]
|
|
54
|
+
|
|
55
|
+
related:
|
|
56
|
+
- SimpleShell
|
|
57
|
+
- SimpleContent
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://json-schema.org/draft/2020-12/schema",
|
|
3
|
+
"$id": "https://adiaui.dev/a2ui/v0_9/components/SimpleShell.json",
|
|
4
|
+
"title": "SimpleShell",
|
|
5
|
+
"description": "Module-tier minimal shell for marketing / landing / error pages.\nBehavior-only orchestrator with two reflected attributes — [centered]\nfor vertical centering, [full-bleed] for dropping the max-width\nconstraint.\n\nThe 4th cluster in the bespoke shell family per ADR-0023, designed\ndeliberately small (1 host + 2 CSS-only children) to demonstrate\nthe pattern works without ceremony for thin clusters.\n\nUse cases: marketing splashes, error pages (404 / 500 / maintenance),\nthank-you pages, single-card flows (sign-in, password reset).\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
|
+
"centered": {
|
|
17
|
+
"description": "Reflected — vertically centers content in viewport.",
|
|
18
|
+
"type": "boolean",
|
|
19
|
+
"default": false
|
|
20
|
+
},
|
|
21
|
+
"component": {
|
|
22
|
+
"const": "SimpleShell"
|
|
23
|
+
},
|
|
24
|
+
"full-bleed": {
|
|
25
|
+
"description": "Reflected — drops the default max-width so content fills full viewport.",
|
|
26
|
+
"type": "boolean",
|
|
27
|
+
"default": false
|
|
28
|
+
}
|
|
29
|
+
},
|
|
30
|
+
"required": [
|
|
31
|
+
"component"
|
|
32
|
+
],
|
|
33
|
+
"unevaluatedProperties": false,
|
|
34
|
+
"x-adiaui": {
|
|
35
|
+
"anti_patterns": [],
|
|
36
|
+
"category": "shells",
|
|
37
|
+
"events": {},
|
|
38
|
+
"examples": [],
|
|
39
|
+
"keywords": [
|
|
40
|
+
"simple-shell",
|
|
41
|
+
"landing",
|
|
42
|
+
"marketing",
|
|
43
|
+
"error-page",
|
|
44
|
+
"splash",
|
|
45
|
+
"confirmation",
|
|
46
|
+
"minimal-shell"
|
|
47
|
+
],
|
|
48
|
+
"name": "SimpleShell",
|
|
49
|
+
"related": [
|
|
50
|
+
"SimpleHero",
|
|
51
|
+
"SimpleContent",
|
|
52
|
+
"AdminShell"
|
|
53
|
+
],
|
|
54
|
+
"slots": {
|
|
55
|
+
"default": {
|
|
56
|
+
"description": "Bespoke children (<simple-hero>, <simple-content>) compose here. The author owns layout order."
|
|
57
|
+
}
|
|
58
|
+
},
|
|
59
|
+
"states": [
|
|
60
|
+
{
|
|
61
|
+
"description": "Default layout — top-aligned, max-width container.",
|
|
62
|
+
"name": "idle"
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"description": "When [centered] is set — vertically centers the content stack.",
|
|
66
|
+
"name": "centered"
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
"description": "When [full-bleed] is set — drops max-width so content fills the viewport.",
|
|
70
|
+
"name": "full-bleed"
|
|
71
|
+
}
|
|
72
|
+
],
|
|
73
|
+
"synonyms": {
|
|
74
|
+
"simple-shell": [
|
|
75
|
+
"marketing-shell",
|
|
76
|
+
"landing-shell",
|
|
77
|
+
"minimal-shell",
|
|
78
|
+
"splash-shell",
|
|
79
|
+
"error-shell"
|
|
80
|
+
]
|
|
81
|
+
},
|
|
82
|
+
"tag": "simple-shell",
|
|
83
|
+
"tokens": {},
|
|
84
|
+
"traits": [],
|
|
85
|
+
"version": 1
|
|
86
|
+
}
|
|
87
|
+
}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
/* ═══════════════════════════════════════════════════════════════
|
|
2
|
+
simple-shell — Module CSS (minimal shell for marketing / landing / error pages)
|
|
3
|
+
|
|
4
|
+
Single-file CSS — simple-shell is deliberately minimal so all rules
|
|
5
|
+
live here rather than fanning out into layered files. If complexity
|
|
6
|
+
grows, split into css/simple-shell.{tokens,layout,bespoke}.css per
|
|
7
|
+
admin/chat/editor convention.
|
|
8
|
+
═══════════════════════════════════════════════════════════════ */
|
|
9
|
+
|
|
10
|
+
@scope (simple-shell) {
|
|
11
|
+
:scope {
|
|
12
|
+
display: flex;
|
|
13
|
+
flex-direction: column;
|
|
14
|
+
align-items: center;
|
|
15
|
+
box-sizing: border-box;
|
|
16
|
+
min-height: 100dvh;
|
|
17
|
+
width: 100%;
|
|
18
|
+
padding-inline: var(--a-density-4, 1.5rem);
|
|
19
|
+
padding-block: var(--a-density-6, 3rem);
|
|
20
|
+
gap: var(--a-density-4, 1.5rem);
|
|
21
|
+
background: var(--a-canvas-1);
|
|
22
|
+
color: var(--a-text);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
/* Vertically center when [centered] */
|
|
26
|
+
:scope[centered] {
|
|
27
|
+
justify-content: center;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
/* Children width: bounded by content max-width by default */
|
|
31
|
+
:scope > * {
|
|
32
|
+
width: 100%;
|
|
33
|
+
max-width: var(--a-content-max-width, 56rem);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
/* Full-bleed drops the max-width on children */
|
|
37
|
+
:scope[full-bleed] > * {
|
|
38
|
+
max-width: none;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
@@ -0,0 +1,42 @@
|
|
|
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>
|
|
@@ -0,0 +1,42 @@
|
|
|
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>
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { UIElement } from '../../../web-components/core/element.js';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* <simple-shell> — Minimal shell for marketing / landing / error pages.
|
|
5
|
+
*
|
|
6
|
+
* Behavior-only orchestrator. Reflects `[centered]` (vertical center)
|
|
7
|
+
* and `[full-bleed]` (drops max-width). No sidebars, no chrome bars,
|
|
8
|
+
* no command palette — deliberately minimal.
|
|
9
|
+
*
|
|
10
|
+
* Structure (bespoke shape, canonical since v0.4.1):
|
|
11
|
+
*
|
|
12
|
+
* <simple-shell centered>
|
|
13
|
+
* <simple-hero>
|
|
14
|
+
* <h1 slot="heading">Welcome</h1>
|
|
15
|
+
* <p slot="lede">Get started in seconds.</p>
|
|
16
|
+
* <div slot="actions"><button-ui>Sign up</button-ui></div>
|
|
17
|
+
* </simple-hero>
|
|
18
|
+
* <simple-content>
|
|
19
|
+
* <p>Body content goes here.</p>
|
|
20
|
+
* </simple-content>
|
|
21
|
+
* </simple-shell>
|
|
22
|
+
*
|
|
23
|
+
* Use cases:
|
|
24
|
+
* - Marketing splash pages
|
|
25
|
+
* - Error pages (404, 500, maintenance)
|
|
26
|
+
* - "Thank you" / confirmation pages
|
|
27
|
+
* - Single-card flows (sign-in, password reset)
|
|
28
|
+
*
|
|
29
|
+
* Per ADR-0023 + ADR-0024, simple-shell is the 4th cluster in the
|
|
30
|
+
* bespoke-shell-children family (after admin/chat/editor). Designed
|
|
31
|
+
* deliberately small to prove the pattern works for thin clusters
|
|
32
|
+
* without ceremony.
|
|
33
|
+
*/
|
|
34
|
+
class SimpleShell extends UIElement {
|
|
35
|
+
static properties = {
|
|
36
|
+
centered: { type: Boolean, default: false, reflect: true },
|
|
37
|
+
'full-bleed': { type: Boolean, default: false, reflect: true },
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
static template = () => null;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
if (!customElements.get('simple-shell')) {
|
|
44
|
+
customElements.define('simple-shell', SimpleShell);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
export { SimpleShell };
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
import { describe, it, expect, beforeEach } from 'vitest';
|
|
2
|
+
import '../../../web-components/core/element.js';
|
|
3
|
+
import './simple-shell.js';
|
|
4
|
+
|
|
5
|
+
const tick = () => new Promise((r) => queueMicrotask(r));
|
|
6
|
+
|
|
7
|
+
function mount(html) {
|
|
8
|
+
const wrap = document.createElement('div');
|
|
9
|
+
wrap.innerHTML = html;
|
|
10
|
+
document.body.appendChild(wrap);
|
|
11
|
+
return wrap.firstElementChild;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
beforeEach(() => {
|
|
15
|
+
document.body.innerHTML = '';
|
|
16
|
+
});
|
|
17
|
+
|
|
18
|
+
describe('simple-shell', () => {
|
|
19
|
+
it('registers simple-shell as a custom element', () => {
|
|
20
|
+
expect(customElements.get('simple-shell')).toBeDefined();
|
|
21
|
+
});
|
|
22
|
+
|
|
23
|
+
it('defaults to centered=false and full-bleed=false', () => {
|
|
24
|
+
const el = mount('<simple-shell></simple-shell>');
|
|
25
|
+
expect(el.hasAttribute('centered')).toBe(false);
|
|
26
|
+
expect(el.hasAttribute('full-bleed')).toBe(false);
|
|
27
|
+
});
|
|
28
|
+
|
|
29
|
+
it('honors initial [centered] attribute on connect', () => {
|
|
30
|
+
const el = mount('<simple-shell centered></simple-shell>');
|
|
31
|
+
expect(el.centered).toBe(true);
|
|
32
|
+
});
|
|
33
|
+
|
|
34
|
+
it('honors initial [full-bleed] attribute on connect', () => {
|
|
35
|
+
const el = mount('<simple-shell full-bleed></simple-shell>');
|
|
36
|
+
expect(el['full-bleed']).toBe(true);
|
|
37
|
+
});
|
|
38
|
+
|
|
39
|
+
it('reflects [centered] via property assignment', async () => {
|
|
40
|
+
const el = mount('<simple-shell></simple-shell>');
|
|
41
|
+
el.centered = true;
|
|
42
|
+
await tick();
|
|
43
|
+
expect(el.hasAttribute('centered')).toBe(true);
|
|
44
|
+
});
|
|
45
|
+
|
|
46
|
+
it('reflects [full-bleed] via property assignment', async () => {
|
|
47
|
+
const el = mount('<simple-shell></simple-shell>');
|
|
48
|
+
el['full-bleed'] = true;
|
|
49
|
+
await tick();
|
|
50
|
+
expect(el.hasAttribute('full-bleed')).toBe(true);
|
|
51
|
+
});
|
|
52
|
+
|
|
53
|
+
it('removes [centered] when set to false', async () => {
|
|
54
|
+
const el = mount('<simple-shell centered></simple-shell>');
|
|
55
|
+
el.centered = false;
|
|
56
|
+
await tick();
|
|
57
|
+
expect(el.hasAttribute('centered')).toBe(false);
|
|
58
|
+
});
|
|
59
|
+
|
|
60
|
+
it('stamps no HTML (behavior-only orchestrator)', () => {
|
|
61
|
+
const el = mount('<simple-shell></simple-shell>');
|
|
62
|
+
// Empty content + nothing stamped by the host
|
|
63
|
+
expect(el.children.length).toBe(0);
|
|
64
|
+
});
|
|
65
|
+
|
|
66
|
+
it('preserves authored slotted children', () => {
|
|
67
|
+
const el = mount(`
|
|
68
|
+
<simple-shell>
|
|
69
|
+
<simple-hero><h1 slot="heading">Hello</h1></simple-hero>
|
|
70
|
+
<simple-content><p>Body</p></simple-content>
|
|
71
|
+
</simple-shell>
|
|
72
|
+
`);
|
|
73
|
+
expect(el.querySelector('simple-hero')).toBeTruthy();
|
|
74
|
+
expect(el.querySelector('simple-content')).toBeTruthy();
|
|
75
|
+
expect(el.querySelector('[slot="heading"]')).toBeTruthy();
|
|
76
|
+
});
|
|
77
|
+
|
|
78
|
+
it('supports both [centered] and [full-bleed] simultaneously', () => {
|
|
79
|
+
const el = mount('<simple-shell centered full-bleed></simple-shell>');
|
|
80
|
+
expect(el.centered).toBe(true);
|
|
81
|
+
expect(el['full-bleed']).toBe(true);
|
|
82
|
+
});
|
|
83
|
+
});
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
# Edit this file; run `npm run build:components` to regenerate a2ui.json.
|
|
2
|
+
$schema: ../../../../scripts/schemas/component.yaml.schema.json
|
|
3
|
+
name: SimpleShell
|
|
4
|
+
tag: simple-shell
|
|
5
|
+
component: SimpleShell
|
|
6
|
+
category: shells
|
|
7
|
+
version: 1
|
|
8
|
+
description: |
|
|
9
|
+
Module-tier minimal shell for marketing / landing / error pages.
|
|
10
|
+
Behavior-only orchestrator with two reflected attributes — [centered]
|
|
11
|
+
for vertical centering, [full-bleed] for dropping the max-width
|
|
12
|
+
constraint.
|
|
13
|
+
|
|
14
|
+
The 4th cluster in the bespoke shell family per ADR-0023, designed
|
|
15
|
+
deliberately small (1 host + 2 CSS-only children) to demonstrate
|
|
16
|
+
the pattern works without ceremony for thin clusters.
|
|
17
|
+
|
|
18
|
+
Use cases: marketing splashes, error pages (404 / 500 / maintenance),
|
|
19
|
+
thank-you pages, single-card flows (sign-in, password reset).
|
|
20
|
+
|
|
21
|
+
props:
|
|
22
|
+
centered:
|
|
23
|
+
description: Reflected — vertically centers content in viewport.
|
|
24
|
+
type: boolean
|
|
25
|
+
default: false
|
|
26
|
+
reflect: true
|
|
27
|
+
full-bleed:
|
|
28
|
+
description: Reflected — drops the default max-width so content fills full viewport.
|
|
29
|
+
type: boolean
|
|
30
|
+
default: false
|
|
31
|
+
reflect: true
|
|
32
|
+
|
|
33
|
+
events: {}
|
|
34
|
+
|
|
35
|
+
slots:
|
|
36
|
+
default:
|
|
37
|
+
description: >-
|
|
38
|
+
Bespoke children (<simple-hero>, <simple-content>) compose here.
|
|
39
|
+
The author owns layout order.
|
|
40
|
+
|
|
41
|
+
states:
|
|
42
|
+
- name: idle
|
|
43
|
+
description: Default layout — top-aligned, max-width container.
|
|
44
|
+
- name: centered
|
|
45
|
+
description: When [centered] is set — vertically centers the content stack.
|
|
46
|
+
- name: full-bleed
|
|
47
|
+
description: When [full-bleed] is set — drops max-width so content fills the viewport.
|
|
48
|
+
|
|
49
|
+
traits: []
|
|
50
|
+
|
|
51
|
+
a2ui:
|
|
52
|
+
rules:
|
|
53
|
+
- >-
|
|
54
|
+
simple-shell is the bespoke shell for thin / minimal page surfaces.
|
|
55
|
+
Use when the page has no nav rail, no chrome bars, no command
|
|
56
|
+
palette. For full app surfaces use admin-shell; for chat surfaces
|
|
57
|
+
use chat-shell; for design tools use editor-shell.
|
|
58
|
+
- >-
|
|
59
|
+
Compose with <simple-hero> (optional top hero strip) and
|
|
60
|
+
<simple-content> (main article body). Both are CSS-only structural
|
|
61
|
+
children — no JS, no state.
|
|
62
|
+
|
|
63
|
+
keywords:
|
|
64
|
+
- simple-shell
|
|
65
|
+
- landing
|
|
66
|
+
- marketing
|
|
67
|
+
- error-page
|
|
68
|
+
- splash
|
|
69
|
+
- confirmation
|
|
70
|
+
- minimal-shell
|
|
71
|
+
|
|
72
|
+
synonyms:
|
|
73
|
+
simple-shell: [marketing-shell, landing-shell, minimal-shell, splash-shell, error-shell]
|
|
74
|
+
|
|
75
|
+
related:
|
|
76
|
+
- SimpleHero
|
|
77
|
+
- SimpleContent
|
|
78
|
+
- AdminShell
|
package/theme/index.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { ThemePanel } from './theme-panel/theme-panel.js';
|