@adia-ai/web-modules 0.3.3 → 0.3.4

package/shell/admin-statusbar/admin-statusbar.yaml

@@ -0,0 +1,68 @@
+# Edit this file; run `npm run build:components` to regenerate a2ui.json.
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: AdminStatusbar
+tag: admin-statusbar
+component: AdminStatusbar
+category: layout
+version: 1
+description: |
+  Module-tier shell bottom chrome bar. CSS-only — no behavior, no JS.
+  Same shape as <admin-topbar> (icon + heading + description + action
+  clusters via slot vocabulary), conventionally used for read-only
+  status — connection state, sync indicator, footer metadata.
+
+  Replaces legacy <footer-ui> usage at shell-tier. Both still work per
+  ADR-0023 backwards-compat.
+
+props: {}
+
+events: {}
+
+slots:
+  default:
+    description: >-
+      Default content — status text or inline children.
+  icon:
+    description: >-
+      Leading glyph (icon-ui or img).
+  heading:
+    description: >-
+      Primary label.
+  description:
+    description: >-
+      Secondary metadata.
+  action:
+    description: >-
+      Trailing control cluster.
+  action-leading:
+    description: >-
+      Leading control cluster.
+
+states:
+  - name: idle
+    description: Default, the only state.
+
+traits: []
+
+a2ui:
+  rules:
+    - >-
+      admin-statusbar replaces <footer-ui> at shell-tier. Same slot
+      vocabulary as <admin-topbar>; visual treatment differs (the
+      shell css applies a top-border instead of bottom).
+
+keywords:
+  - admin-statusbar
+  - statusbar
+  - footer-bar
+  - app-footer
+  - status-line
+
+synonyms:
+  statusbar: [status-line, footer-bar, app-footer]
+
+related:
+  - AdminShell
+  - AdminContent
+  - AdminTopbar
+  - Footer

package/shell/admin-topbar/admin-topbar.a2ui.json

@@ -0,0 +1,83 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/AdminTopbar.json",
+  "title": "AdminTopbar",
+  "description": "Module-tier shell top chrome bar. CSS-only — no behavior, no JS.\nSits at the top of <admin-content>, <admin-sidebar>, or any chrome\nregion. Provides the canonical icon + heading + description +\naction-clusters layout via slot vocabulary.\n\nReplaces the legacy <header-ui> usage at shell-tier. Both still work\nper ADR-0023 backwards-compat; new code should prefer <admin-topbar>\nfor shell-tier chrome bars (use <header-ui> for primitive containers\nlike Card / Drawer / Modal).\n",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "AdminTopbar"
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "layout",
+    "events": {},
+    "examples": [],
+    "keywords": [
+      "admin-topbar",
+      "topbar",
+      "chrome-bar",
+      "app-header",
+      "shell-header"
+    ],
+    "name": "AdminTopbar",
+    "related": [
+      "AdminShell",
+      "AdminContent",
+      "AdminSidebar",
+      "AdminStatusbar",
+      "Header"
+    ],
+    "slots": {
+      "description": {
+        "description": "Secondary metadata. Muted + smaller font."
+      },
+      "default": {
+        "description": "Default content — typically a breadcrumb, page title, or ad-hoc inline children. Use named slots for canonical clusters."
+      },
+      "action": {
+        "description": "Trailing control cluster (buttons, menus, etc.). The first [slot=\"action\"] child pushes itself + siblings to the end; subsequent siblings flow with gap."
+      },
+      "action-leading": {
+        "description": "Leading control cluster (back button, menu trigger, etc.). Pairs with [slot=\"action\"] for dual-cluster chrome."
+      },
+      "heading": {
+        "description": "Primary label. Medium-weight + strong fg."
+      },
+      "icon": {
+        "description": "Leading glyph (icon-ui or img). Muted color, flex-aligned."
+      }
+    },
+    "states": [
+      {
+        "description": "Default, the only state.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {
+      "topbar": [
+        "appbar",
+        "app-header",
+        "header-bar",
+        "navbar"
+      ]
+    },
+    "tag": "admin-topbar",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

package/shell/admin-topbar/admin-topbar.examples.html

@@ -0,0 +1,31 @@
+<header>
+    <div>
+      <h1>Admin Topbar</h1>
+      <div data-actions>
+        <tag-ui size="sm">admin-topbar</tag-ui>
+        <tag-ui size="sm" variant="ghost">CSS-only</tag-ui>
+      </div>
+    </div>
+    <p>Module-tier shell top chrome bar. Provides icon + heading + description + action-clusters layout via slot vocabulary.</p>
+  </header>
+
+<section data-section>
+  <h2 variant="section">Role</h2>
+  <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>
+</section>
+
+<section data-section>
+  <h2 variant="section">Composition</h2>
+  <p>Typical placement inside <code>&lt;admin-shell&gt;</code>:</p>
+  <code-ui language="html">&lt;admin-topbar&gt;
+  &lt;icon-ui slot="icon" name="house"&gt;&lt;/icon-ui&gt;
+  &lt;span slot="heading"&gt;Dashboard&lt;/span&gt;
+  &lt;span slot="description"&gt;Workspace overview&lt;/span&gt;
+  &lt;button-ui slot="action" variant="ghost"&gt;Settings&lt;/button-ui&gt;
+&lt;/admin-topbar&gt;</code-ui>
+</section>
+
+<section data-section>
+  <h2 variant="section">Slot vocabulary</h2>
+  <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>
+</section>

package/shell/admin-topbar/admin-topbar.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="auto">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Admin Topbar — AdiaUI</title>
+
+  <link rel="stylesheet" href="../../../web-components/styles/resets.css">
+  <link rel="stylesheet" href="../../../web-components/styles/tokens.css">
+  <link rel="stylesheet" href="../admin-shell/admin-shell.css">
+  <link rel="stylesheet" href="../../../web-components/components/code/code.css">
+  <link rel="stylesheet" href="../../../web-components/components/tag/tag.css">
+
+  <script type="module" src="../admin-shell/admin-shell.js"></script>
+  <script type="module" src="../../../web-components/components/code/code.js"></script>
+  <script type="module" src="../../../web-components/components/tag/tag.js"></script>
+
+  <style>
+    :where(html, body) { margin: 0; min-height: 100vh; background: var(--a-bg); color: var(--a-fg); font-family: var(--a-font); }
+    main { max-width: 960px; margin-inline: auto; padding: var(--a-space-6) var(--a-space-5); }
+  </style>
+</head>
+<body>
+
+  <main id="demo-root">
+    <p>Loading examples…</p>
+  </main>
+
+  <script type="module">
+    const root = document.getElementById('demo-root');
+    try {
+      const res = await fetch('./admin-topbar.examples.html');
+      if (!res.ok) throw new Error(`fetch failed (${res.status})`);
+      root.innerHTML = await res.text();
+    } catch (err) {
+      root.innerHTML = `<p style="color:var(--a-danger-strong);">Failed to load admin-topbar.examples.html — ${err.message}</p>`;
+      console.error('[admin-topbar.html]', err);
+    }
+  </script>
+
+</body>
+</html>

package/shell/admin-topbar/admin-topbar.yaml

@@ -0,0 +1,75 @@
+# Edit this file; run `npm run build:components` to regenerate a2ui.json.
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: AdminTopbar
+tag: admin-topbar
+component: AdminTopbar
+category: layout
+version: 1
+description: |
+  Module-tier shell top chrome bar. CSS-only — no behavior, no JS.
+  Sits at the top of <admin-content>, <admin-sidebar>, or any chrome
+  region. Provides the canonical icon + heading + description +
+  action-clusters layout via slot vocabulary.
+
+  Replaces the legacy <header-ui> usage at shell-tier. Both still work
+  per ADR-0023 backwards-compat; new code should prefer <admin-topbar>
+  for shell-tier chrome bars (use <header-ui> for primitive containers
+  like Card / Drawer / Modal).
+
+props: {}
+
+events: {}
+
+slots:
+  default:
+    description: >-
+      Default content — typically a breadcrumb, page title, or
+      ad-hoc inline children. Use named slots for canonical clusters.
+  icon:
+    description: >-
+      Leading glyph (icon-ui or img). Muted color, flex-aligned.
+  heading:
+    description: >-
+      Primary label. Medium-weight + strong fg.
+  description:
+    description: >-
+      Secondary metadata. Muted + smaller font.
+  action:
+    description: >-
+      Trailing control cluster (buttons, menus, etc.). The first
+      [slot="action"] child pushes itself + siblings to the end;
+      subsequent siblings flow with gap.
+  action-leading:
+    description: >-
+      Leading control cluster (back button, menu trigger, etc.).
+      Pairs with [slot="action"] for dual-cluster chrome.
+
+states:
+  - name: idle
+    description: Default, the only state.
+
+traits: []
+
+a2ui:
+  rules:
+    - >-
+      admin-topbar replaces <header-ui> at shell-tier — use it for
+      chrome bars inside admin-shell, admin-content, admin-sidebar.
+      Use <header-ui> for primitive containers (Card / Drawer / Modal).
+
+keywords:
+  - admin-topbar
+  - topbar
+  - chrome-bar
+  - app-header
+  - shell-header
+
+synonyms:
+  topbar: [appbar, app-header, header-bar, navbar]
+
+related:
+  - AdminShell
+  - AdminContent
+  - AdminSidebar
+  - AdminStatusbar
+  - Header

package/shell/index.js

@@ -1 +1,3 @@
 export { AdminShell } from './admin-shell/admin-shell.js';
+export { AdminSidebar } from './admin-sidebar/admin-sidebar.js';
+export { AdminCommand } from './admin-command/admin-command.js';