@adia-ai/web-modules 0.3.3 → 0.3.5

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 (88) hide show
  1. package/CHANGELOG.md +60 -0
  2. package/chat/chat-composer/chat-composer.a2ui.json +94 -0
  3. package/chat/chat-composer/chat-composer.examples.html +28 -0
  4. package/chat/chat-composer/chat-composer.html +43 -0
  5. package/chat/chat-composer/chat-composer.js +107 -0
  6. package/chat/chat-composer/chat-composer.test.js +112 -0
  7. package/chat/chat-composer/chat-composer.yaml +91 -0
  8. package/chat/chat-empty/chat-empty.a2ui.json +68 -0
  9. package/chat/chat-empty/chat-empty.examples.html +34 -0
  10. package/chat/chat-empty/chat-empty.html +42 -0
  11. package/chat/chat-empty/chat-empty.yaml +58 -0
  12. package/chat/chat-header/chat-header.a2ui.json +77 -0
  13. package/chat/chat-header/chat-header.examples.html +30 -0
  14. package/chat/chat-header/chat-header.html +42 -0
  15. package/chat/chat-header/chat-header.yaml +68 -0
  16. package/chat/chat-shell/chat-shell.css +1 -0
  17. package/chat/chat-shell/chat-shell.examples.html +126 -0
  18. package/chat/chat-shell/chat-shell.html +42 -0
  19. package/chat/chat-shell/chat-shell.js +35 -7
  20. package/chat/chat-shell/css/chat-shell.bespoke.css +196 -0
  21. package/chat/chat-sidebar/chat-sidebar.a2ui.json +136 -0
  22. package/chat/chat-sidebar/chat-sidebar.examples.html +36 -0
  23. package/chat/chat-sidebar/chat-sidebar.html +43 -0
  24. package/chat/chat-sidebar/chat-sidebar.js +227 -0
  25. package/chat/chat-sidebar/chat-sidebar.test.js +110 -0
  26. package/chat/chat-sidebar/chat-sidebar.yaml +140 -0
  27. package/chat/chat-status/chat-status.a2ui.json +63 -0
  28. package/chat/chat-status/chat-status.examples.html +29 -0
  29. package/chat/chat-status/chat-status.html +42 -0
  30. package/chat/chat-status/chat-status.yaml +52 -0
  31. package/chat/chat-thread/chat-thread.a2ui.json +91 -0
  32. package/chat/chat-thread/chat-thread.examples.html +36 -0
  33. package/chat/chat-thread/chat-thread.html +43 -0
  34. package/chat/chat-thread/chat-thread.js +106 -0
  35. package/chat/chat-thread/chat-thread.test.js +82 -0
  36. package/chat/chat-thread/chat-thread.yaml +89 -0
  37. package/chat/index.js +3 -0
  38. package/editor/editor-shell/editor-shell.examples.html +71 -0
  39. package/editor/editor-shell/editor-shell.html +42 -0
  40. package/package.json +1 -1
  41. package/shell/admin-command/admin-command.a2ui.json +102 -0
  42. package/shell/admin-command/admin-command.examples.html +83 -0
  43. package/shell/admin-command/admin-command.html +42 -0
  44. package/shell/admin-command/admin-command.js +161 -0
  45. package/shell/admin-command/admin-command.test.js +115 -0
  46. package/shell/admin-command/admin-command.yaml +102 -0
  47. package/shell/admin-content/admin-content.a2ui.json +73 -0
  48. package/shell/admin-content/admin-content.examples.html +33 -0
  49. package/shell/admin-content/admin-content.html +42 -0
  50. package/shell/admin-content/admin-content.yaml +63 -0
  51. package/shell/admin-page/admin-page.a2ui.json +74 -0
  52. package/shell/admin-page/admin-page.examples.html +37 -0
  53. package/shell/admin-page/admin-page.html +42 -0
  54. package/shell/admin-page/admin-page.yaml +61 -0
  55. package/shell/admin-page-body/admin-page-body.a2ui.json +62 -0
  56. package/shell/admin-page-body/admin-page-body.examples.html +34 -0
  57. package/shell/admin-page-body/admin-page-body.html +42 -0
  58. package/shell/admin-page-body/admin-page-body.yaml +49 -0
  59. package/shell/admin-page-header/admin-page-header.a2ui.json +62 -0
  60. package/shell/admin-page-header/admin-page-header.examples.html +34 -0
  61. package/shell/admin-page-header/admin-page-header.html +42 -0
  62. package/shell/admin-page-header/admin-page-header.yaml +47 -0
  63. package/shell/admin-scroll/admin-scroll.a2ui.json +62 -0
  64. package/shell/admin-scroll/admin-scroll.examples.html +31 -0
  65. package/shell/admin-scroll/admin-scroll.html +42 -0
  66. package/shell/admin-scroll/admin-scroll.yaml +51 -0
  67. package/shell/admin-shell/admin-shell.a2ui.json +0 -10
  68. package/shell/admin-shell/admin-shell.css +1 -0
  69. package/shell/admin-shell/admin-shell.examples.html +61 -5
  70. package/shell/admin-shell/admin-shell.js +165 -121
  71. package/shell/admin-shell/admin-shell.yaml +6 -6
  72. package/shell/admin-shell/css/admin-shell.bespoke.css +198 -0
  73. package/shell/admin-shell/css/admin-shell.tokens.css +10 -0
  74. package/shell/admin-sidebar/admin-sidebar.a2ui.json +138 -0
  75. package/shell/admin-sidebar/admin-sidebar.examples.html +76 -0
  76. package/shell/admin-sidebar/admin-sidebar.html +47 -0
  77. package/shell/admin-sidebar/admin-sidebar.js +227 -0
  78. package/shell/admin-sidebar/admin-sidebar.test.js +123 -0
  79. package/shell/admin-sidebar/admin-sidebar.yaml +140 -0
  80. package/shell/admin-statusbar/admin-statusbar.a2ui.json +81 -0
  81. package/shell/admin-statusbar/admin-statusbar.examples.html +29 -0
  82. package/shell/admin-statusbar/admin-statusbar.html +42 -0
  83. package/shell/admin-statusbar/admin-statusbar.yaml +68 -0
  84. package/shell/admin-topbar/admin-topbar.a2ui.json +83 -0
  85. package/shell/admin-topbar/admin-topbar.examples.html +31 -0
  86. package/shell/admin-topbar/admin-topbar.html +42 -0
  87. package/shell/admin-topbar/admin-topbar.yaml +75 -0
  88. package/shell/index.js +2 -0
package/shell/admin-page/admin-page.examples.html ADDED
@@ -0,0 +1,37 @@
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>&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-scroll&gt;
21
+ &lt;admin-page&gt;
22
+ &lt;admin-page-header&gt;
23
+ &lt;header-ui&gt;
24
+ &lt;span slot="heading"&gt;Page Title&lt;/span&gt;
25
+ &lt;/header-ui&gt;
26
+ &lt;/admin-page-header&gt;
27
+ &lt;admin-page-body&gt;
28
+ &lt;section-ui&gt;…content…&lt;/section-ui&gt;
29
+ &lt;/admin-page-body&gt;
30
+ &lt;/admin-page&gt;
31
+ &lt;/admin-scroll&gt;</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>
package/shell/admin-page/admin-page.html ADDED
@@ -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>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>
package/shell/admin-page/admin-page.yaml ADDED
@@ -0,0 +1,61 @@
1
+ # Edit this file; run `npm run build:components` to regenerate a2ui.json.
2
+ $schema: ../../../../scripts/schemas/component.yaml.schema.json
3
+ name: AdminPage
4
+ tag: admin-page
5
+ component: AdminPage
6
+ category: layout
7
+ version: 1
8
+ description: |
9
+ Module-tier page wrapper. CSS-only — no behavior, no JS. Provides
10
+ the page-content-root container query (named `page-content`) so
11
+ descendants can adapt to available content width (sidebars expanded
12
+ vs collapsed) instead of viewport width. Stamps the sticky-band
13
+ layout: <admin-page-header> + <admin-page-body> + optional footer.
14
+
15
+ Replaces the legacy <article data-content-root> shape per ADR-0023.
16
+
17
+ props: {}
18
+
19
+ events: {}
20
+
21
+ slots:
22
+ default:
23
+ description: >-
24
+ Default — typically <admin-page-header> + <admin-page-body>.
25
+ header:
26
+ description: >-
27
+ Sticky top band (alternate slot for the header band).
28
+ body:
29
+ description: >-
30
+ Centered reading column (alternate slot for the body band).
31
+ footer:
32
+ description: >-
33
+ Sticky bottom band.
34
+
35
+ states:
36
+ - name: idle
37
+ description: Default, the only state.
38
+
39
+ traits: []
40
+
41
+ a2ui:
42
+ rules:
43
+ - >-
44
+ admin-page is the bespoke replacement for <article data-content-root>.
45
+ Provides the page-content named container query so descendants
46
+ can use @container page-content (max-width: 720px) etc.
47
+
48
+ keywords:
49
+ - admin-page
50
+ - page-content
51
+ - container-query-host
52
+
53
+ synonyms:
54
+ page-content: [content-area, content-root, document-region]
55
+
56
+ related:
57
+ - AdminShell
58
+ - AdminContent
59
+ - AdminScroll
60
+ - AdminPageHeader
61
+ - AdminPageBody
package/shell/admin-page-body/admin-page-body.a2ui.json ADDED
@@ -0,0 +1,62 @@
1
+ {
2
+ "$schema": "https://json-schema.org/draft/2020-12/schema",
3
+ "$id": "https://adiaui.dev/a2ui/v0_9/components/AdminPageBody.json",
4
+ "title": "AdminPageBody",
5
+ "description": "Module-tier page-body band. CSS-only — no behavior, no JS.\nScrollable centered body inside <admin-page>. Owns full-width\nscroll sizing; wraps an inner <section-ui> or raw <section> for\nthe centered reading column.\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
+ "component": {
17
+ "const": "AdminPageBody"
18
+ }
19
+ },
20
+ "required": [
21
+ "component"
22
+ ],
23
+ "unevaluatedProperties": false,
24
+ "x-adiaui": {
25
+ "anti_patterns": [],
26
+ "category": "layout",
27
+ "events": {},
28
+ "examples": [],
29
+ "keywords": [
30
+ "admin-page-body",
31
+ "page-body",
32
+ "centered-body"
33
+ ],
34
+ "name": "AdminPageBody",
35
+ "related": [
36
+ "AdminPage",
37
+ "AdminPageHeader",
38
+ "Section"
39
+ ],
40
+ "slots": {
41
+ "default": {
42
+ "description": "Default — typically <section-ui> or <section> with the page content. Full-bleed content (iframes, split panes) can sit directly here to opt out of the centered column."
43
+ }
44
+ },
45
+ "states": [
46
+ {
47
+ "description": "Default, the only state.",
48
+ "name": "idle"
49
+ }
50
+ ],
51
+ "synonyms": {
52
+ "page-body": [
53
+ "content-body",
54
+ "document-body"
55
+ ]
56
+ },
57
+ "tag": "admin-page-body",
58
+ "tokens": {},
59
+ "traits": [],
60
+ "version": 1
61
+ }
62
+ }
package/shell/admin-page-body/admin-page-body.examples.html ADDED
@@ -0,0 +1,34 @@
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>&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-page&gt;
21
+ &lt;admin-page-header&gt;…&lt;/admin-page-header&gt;
22
+ &lt;admin-page-body&gt;
23
+ &lt;section-ui&gt;
24
+ &lt;h1&gt;Heading&lt;/h1&gt;
25
+ &lt;p&gt;Body content…&lt;/p&gt;
26
+ &lt;/section-ui&gt;
27
+ &lt;/admin-page-body&gt;
28
+ &lt;/admin-page&gt;</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>
package/shell/admin-page-body/admin-page-body.html ADDED
@@ -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>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>
package/shell/admin-page-body/admin-page-body.yaml ADDED
@@ -0,0 +1,49 @@
1
+ # Edit this file; run `npm run build:components` to regenerate a2ui.json.
2
+ $schema: ../../../../scripts/schemas/component.yaml.schema.json
3
+ name: AdminPageBody
4
+ tag: admin-page-body
5
+ component: AdminPageBody
6
+ category: layout
7
+ version: 1
8
+ description: |
9
+ Module-tier page-body band. CSS-only — no behavior, no JS.
10
+ Scrollable centered body inside <admin-page>. Owns full-width
11
+ scroll sizing; wraps an inner <section-ui> or raw <section> for
12
+ the centered reading column.
13
+
14
+ props: {}
15
+
16
+ events: {}
17
+
18
+ slots:
19
+ default:
20
+ description: >-
21
+ Default — typically <section-ui> or <section> with the page
22
+ content. Full-bleed content (iframes, split panes) can sit
23
+ directly here to opt out of the centered column.
24
+
25
+ states:
26
+ - name: idle
27
+ description: Default, the only state.
28
+
29
+ traits: []
30
+
31
+ a2ui:
32
+ rules:
33
+ - >-
34
+ admin-page-body is the centered body band of <admin-page>.
35
+ Wraps an inner <section-ui> for centered reading-column
36
+ rhythm; can host full-bleed content directly to opt out.
37
+
38
+ keywords:
39
+ - admin-page-body
40
+ - page-body
41
+ - centered-body
42
+
43
+ synonyms:
44
+ page-body: [content-body, document-body]
45
+
46
+ related:
47
+ - AdminPage
48
+ - AdminPageHeader
49
+ - Section
package/shell/admin-page-header/admin-page-header.a2ui.json ADDED
@@ -0,0 +1,62 @@
1
+ {
2
+ "$schema": "https://json-schema.org/draft/2020-12/schema",
3
+ "$id": "https://adiaui.dev/a2ui/v0_9/components/AdminPageHeader.json",
4
+ "title": "AdminPageHeader",
5
+ "description": "Module-tier page-header band. CSS-only — no behavior, no JS.\nSticky top band inside <admin-page>. Owns full-width concerns\n(sticky position, border-bottom, background); wraps an inner\n<header-ui> or raw <header> for the centered reading column\n(max-width, gutter, rhythm).\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
+ "component": {
17
+ "const": "AdminPageHeader"
18
+ }
19
+ },
20
+ "required": [
21
+ "component"
22
+ ],
23
+ "unevaluatedProperties": false,
24
+ "x-adiaui": {
25
+ "anti_patterns": [],
26
+ "category": "layout",
27
+ "events": {},
28
+ "examples": [],
29
+ "keywords": [
30
+ "admin-page-header",
31
+ "sticky-header",
32
+ "page-band"
33
+ ],
34
+ "name": "AdminPageHeader",
35
+ "related": [
36
+ "AdminPage",
37
+ "AdminPageBody",
38
+ "Header"
39
+ ],
40
+ "slots": {
41
+ "default": {
42
+ "description": "Default — typically <header-ui> or <header> with title + actions."
43
+ }
44
+ },
45
+ "states": [
46
+ {
47
+ "description": "Default, the only state.",
48
+ "name": "idle"
49
+ }
50
+ ],
51
+ "synonyms": {
52
+ "sticky-header": [
53
+ "page-titlebar",
54
+ "top-band"
55
+ ]
56
+ },
57
+ "tag": "admin-page-header",
58
+ "tokens": {},
59
+ "traits": [],
60
+ "version": 1
61
+ }
62
+ }
package/shell/admin-page-header/admin-page-header.examples.html ADDED
@@ -0,0 +1,34 @@
1
+ <header>
2
+ <div>
3
+ <h1>Admin Page Header</h1>
4
+ <div data-actions>
5
+ <tag-ui size="sm">admin-page-header</tag-ui>
6
+ <tag-ui size="sm" variant="ghost">CSS-only</tag-ui>
7
+ </div>
8
+ </div>
9
+ <p>Module-tier page-header band. Sticky top band inside <admin-page>.</p>
10
+ </header>
11
+
12
+ <section data-section>
13
+ <h2 variant="section">Role</h2>
14
+ <p>This is a CSS-only structural stub — no JavaScript, no behavior. The shell host (<code>&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-page&gt;
21
+ &lt;admin-page-header&gt;
22
+ &lt;header-ui&gt;
23
+ &lt;span slot="heading"&gt;Page Title&lt;/span&gt;
24
+ &lt;tab-list-ui slot="action"&gt;…tabs…&lt;/tab-list-ui&gt;
25
+ &lt;/header-ui&gt;
26
+ &lt;/admin-page-header&gt;
27
+ &lt;admin-page-body&gt;…&lt;/admin-page-body&gt;
28
+ &lt;/admin-page&gt;</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>
package/shell/admin-page-header/admin-page-header.html ADDED
@@ -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>Admin Page Header — AdiaUI</title>
7
+
8
+ <link rel="stylesheet" href="../../../web-components/styles/resets.css">
9
+ <link rel="stylesheet" href="../../../web-components/styles/tokens.css">
10
+ <link rel="stylesheet" href="../admin-shell/admin-shell.css">
11
+ <link rel="stylesheet" href="../../../web-components/components/code/code.css">
12
+ <link rel="stylesheet" href="../../../web-components/components/tag/tag.css">
13
+
14
+ <script type="module" src="../admin-shell/admin-shell.js"></script>
15
+ <script type="module" src="../../../web-components/components/code/code.js"></script>
16
+ <script type="module" src="../../../web-components/components/tag/tag.js"></script>
17
+
18
+ <style>
19
+ :where(html, body) { margin: 0; min-height: 100vh; background: var(--a-bg); color: var(--a-fg); font-family: var(--a-font); }
20
+ main { max-width: 960px; margin-inline: auto; padding: var(--a-space-6) var(--a-space-5); }
21
+ </style>
22
+ </head>
23
+ <body>
24
+
25
+ <main id="demo-root">
26
+ <p>Loading examples…</p>
27
+ </main>
28
+
29
+ <script type="module">
30
+ const root = document.getElementById('demo-root');
31
+ try {
32
+ const res = await fetch('./admin-page-header.examples.html');
33
+ if (!res.ok) throw new Error(`fetch failed (${res.status})`);
34
+ root.innerHTML = await res.text();
35
+ } catch (err) {
36
+ root.innerHTML = `<p style="color:var(--a-danger-strong);">Failed to load admin-page-header.examples.html — ${err.message}</p>`;
37
+ console.error('[admin-page-header.html]', err);
38
+ }
39
+ </script>
40
+
41
+ </body>
42
+ </html>
package/shell/admin-page-header/admin-page-header.yaml ADDED
@@ -0,0 +1,47 @@
1
+ # Edit this file; run `npm run build:components` to regenerate a2ui.json.
2
+ $schema: ../../../../scripts/schemas/component.yaml.schema.json
3
+ name: AdminPageHeader
4
+ tag: admin-page-header
5
+ component: AdminPageHeader
6
+ category: layout
7
+ version: 1
8
+ description: |
9
+ Module-tier page-header band. CSS-only — no behavior, no JS.
10
+ Sticky top band inside <admin-page>. Owns full-width concerns
11
+ (sticky position, border-bottom, background); wraps an inner
12
+ <header-ui> or raw <header> for the centered reading column
13
+ (max-width, gutter, rhythm).
14
+
15
+ props: {}
16
+
17
+ events: {}
18
+
19
+ slots:
20
+ default:
21
+ description: >-
22
+ Default — typically <header-ui> or <header> with title + actions.
23
+
24
+ states:
25
+ - name: idle
26
+ description: Default, the only state.
27
+
28
+ traits: []
29
+
30
+ a2ui:
31
+ rules:
32
+ - >-
33
+ admin-page-header is the sticky top band of <admin-page>.
34
+ Wraps an inner <header-ui> for centered reading-column rhythm.
35
+
36
+ keywords:
37
+ - admin-page-header
38
+ - sticky-header
39
+ - page-band
40
+
41
+ synonyms:
42
+ sticky-header: [page-titlebar, top-band]
43
+
44
+ related:
45
+ - AdminPage
46
+ - AdminPageBody
47
+ - Header
package/shell/admin-scroll/admin-scroll.a2ui.json ADDED
@@ -0,0 +1,62 @@
1
+ {
2
+ "$schema": "https://json-schema.org/draft/2020-12/schema",
3
+ "$id": "https://adiaui.dev/a2ui/v0_9/components/AdminScroll.json",
4
+ "title": "AdminScroll",
5
+ "description": "Module-tier shell scroll surface. CSS-only — no behavior, no JS.\nSits inside <admin-content> as the central scrollable region.\nSingle-axis scroll (vertical), scroll-contained so wheel/touch\nevents don't propagate to the document.\n\nReplaces the legacy <section> child of <main> at shell-tier per\nADR-0023.\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
+ "component": {
17
+ "const": "AdminScroll"
18
+ }
19
+ },
20
+ "required": [
21
+ "component"
22
+ ],
23
+ "unevaluatedProperties": false,
24
+ "x-adiaui": {
25
+ "anti_patterns": [],
26
+ "category": "layout",
27
+ "events": {},
28
+ "examples": [],
29
+ "keywords": [
30
+ "admin-scroll",
31
+ "scroll-region",
32
+ "scroll-container"
33
+ ],
34
+ "name": "AdminScroll",
35
+ "related": [
36
+ "AdminShell",
37
+ "AdminContent",
38
+ "AdminPage"
39
+ ],
40
+ "slots": {
41
+ "default": {
42
+ "description": "Scrollable content — typically <admin-page> wrapping the page-tier sticky bands + body."
43
+ }
44
+ },
45
+ "states": [
46
+ {
47
+ "description": "Default, the only state.",
48
+ "name": "idle"
49
+ }
50
+ ],
51
+ "synonyms": {
52
+ "scroll-region": [
53
+ "scroll-area",
54
+ "viewport-content"
55
+ ]
56
+ },
57
+ "tag": "admin-scroll",
58
+ "tokens": {},
59
+ "traits": [],
60
+ "version": 1
61
+ }
62
+ }
package/shell/admin-scroll/admin-scroll.examples.html ADDED
@@ -0,0 +1,31 @@
1
+ <header>
2
+ <div>
3
+ <h1>Admin Scroll</h1>
4
+ <div data-actions>
5
+ <tag-ui size="sm">admin-scroll</tag-ui>
6
+ <tag-ui size="sm" variant="ghost">CSS-only</tag-ui>
7
+ </div>
8
+ </div>
9
+ <p>Module-tier shell scroll surface. Single-axis vertical scroll, contained.</p>
10
+ </header>
11
+
12
+ <section data-section>
13
+ <h2 variant="section">Role</h2>
14
+ <p>This is a CSS-only structural stub — no JavaScript, no behavior. The shell host (<code>&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-content&gt;
21
+ &lt;admin-topbar slot="header"&gt;…&lt;/admin-topbar&gt;
22
+ &lt;admin-scroll&gt;
23
+ &lt;admin-page&gt;…&lt;/admin-page&gt;
24
+ &lt;/admin-scroll&gt;
25
+ &lt;/admin-content&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-scroll/admin-scroll.html ADDED
@@ -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>Admin Scroll — AdiaUI</title>
7
+
8
+ <link rel="stylesheet" href="../../../web-components/styles/resets.css">
9
+ <link rel="stylesheet" href="../../../web-components/styles/tokens.css">
10
+ <link rel="stylesheet" href="../admin-shell/admin-shell.css">
11
+ <link rel="stylesheet" href="../../../web-components/components/code/code.css">
12
+ <link rel="stylesheet" href="../../../web-components/components/tag/tag.css">
13
+
14
+ <script type="module" src="../admin-shell/admin-shell.js"></script>
15
+ <script type="module" src="../../../web-components/components/code/code.js"></script>
16
+ <script type="module" src="../../../web-components/components/tag/tag.js"></script>
17
+
18
+ <style>
19
+ :where(html, body) { margin: 0; min-height: 100vh; background: var(--a-bg); color: var(--a-fg); font-family: var(--a-font); }
20
+ main { max-width: 960px; margin-inline: auto; padding: var(--a-space-6) var(--a-space-5); }
21
+ </style>
22
+ </head>
23
+ <body>
24
+
25
+ <main id="demo-root">
26
+ <p>Loading examples…</p>
27
+ </main>
28
+
29
+ <script type="module">
30
+ const root = document.getElementById('demo-root');
31
+ try {
32
+ const res = await fetch('./admin-scroll.examples.html');
33
+ if (!res.ok) throw new Error(`fetch failed (${res.status})`);
34
+ root.innerHTML = await res.text();
35
+ } catch (err) {
36
+ root.innerHTML = `<p style="color:var(--a-danger-strong);">Failed to load admin-scroll.examples.html — ${err.message}</p>`;
37
+ console.error('[admin-scroll.html]', err);
38
+ }
39
+ </script>
40
+
41
+ </body>
42
+ </html>