@xmesh/system-design 0.0.1

package/dist/lit/components/alert/index.css

@@ -0,0 +1,201 @@
+/* ============================================
+   Alert — inline notification banner.
+
+   Lightweight inline surface for notice/warning/success/critical
+   context. Sits between snackbar (modal-ish backend-error tunnel)
+   and a plain message: the host drops it inline in a chat thread,
+   a settings pane, or any content surface.
+
+   Severity is communicated by the icon glyph and copy ONLY — every
+   variant uses the same neutral surface and ink. `--md-sys-color-error*`
+   is forbidden in components (POLICIES.md rule 3a); status pastels
+   are not part of this design system.
+
+   Grid:
+     icon · body · action-slot · close
+   The icon column and close column are auto-sized; the body fills.
+   ============================================ */
+
+.alert {
+  /* Component-local vars — neutral surface, border, and ink for every
+     severity (matches the rest of the design system). Severity carries
+     hue ONLY on the icon and its chip — this is the targeted exception
+     to the "no hue for severity" rule, scoped tightly so the alert
+     reads as chrome with a glanceable severity marker, not a loud
+     full-banner tint. Defaults are info; .alert--{severity} swaps the
+     icon vars. */
+  --alert-bg: var(--md-sys-color-surface-container-high);
+  --alert-border: var(--md-sys-color-outline-variant);
+  --alert-ink: var(--md-sys-color-on-surface);
+  --alert-ink-soft: var(--md-sys-color-on-surface-variant);
+  --alert-icon-ink: var(--xm-alert-info-ink);
+  --alert-icon-chip: var(--xm-alert-info-chip);
+
+  position: relative;
+  display: grid;
+  grid-template-columns: auto 1fr auto auto;
+  align-items: center;
+  gap: var(--s-3);
+  width: 100%;
+  padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4);
+  background: var(--alert-bg);
+  border: 1px solid var(--alert-border);
+  border-radius: var(--md-sys-shape-corner-medium);
+  color: var(--alert-ink);
+  font-family: var(--md-sys-typescale-body-medium-font);
+  animation: alert-in var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard) both;
+}
+.alert--static { animation: none; }
+
+@keyframes alert-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Severity modifiers — swap ONLY the icon's ink and chip. Surface,
+   border, and body text stay neutral. */
+.alert--info {
+  --alert-icon-ink: var(--xm-alert-info-ink);
+  --alert-icon-chip: var(--xm-alert-info-chip);
+}
+.alert--success {
+  --alert-icon-ink: var(--xm-alert-success-ink);
+  --alert-icon-chip: var(--xm-alert-success-chip);
+}
+.alert--warning {
+  --alert-icon-ink: var(--xm-alert-warning-ink);
+  --alert-icon-chip: var(--xm-alert-warning-chip);
+}
+.alert--critical {
+  --alert-icon-ink: var(--xm-alert-critical-ink);
+  --alert-icon-chip: var(--xm-alert-critical-chip);
+}
+
+/* ── Prominent / banner modifier (Story 4.6) ───────────────────────────
+   A high-importance, persistent layout. Changes PROMINENCE / LAYOUT ONLY:
+   wider full-width feel, larger padding, a left severity accent rail, and a
+   larger icon chip — while the body surface stays NEUTRAL and the per-severity
+   hue stays scoped to the icon chip + ink + the rail (the same --alert-icon-*
+   mechanism, the sole sanctioned severity-hue exception). No new severity
+   hues, no --md-sys-color-error*, no full-banner tint. The contract (severity
+   model, slots, events) is unchanged. */
+.alert--prominent {
+  padding: var(--s-5) var(--s-5) var(--s-5) var(--s-6);
+  border-radius: var(--md-sys-shape-corner-large);
+  /* The left severity rail — a hairline-respecting accent band drawn from the
+     per-severity chip, scoped to the edge so the body reads neutral. 3px is a
+     decorative rail, not a border (borders stay hairline; 2px is focus/drag). */
+  border-left: 3px solid var(--alert-icon-chip);
+  column-gap: var(--s-4);
+}
+.alert--prominent .alert__icon {
+  width: 40px;
+  height: 40px;
+  align-self: start;
+}
+.alert--prominent .alert__heading {
+  font-size: var(--md-sys-typescale-body-large-size);
+}
+.alert--prominent .alert__text {
+  font-size: var(--md-sys-typescale-body-medium-size);
+}
+/* In the banner layout the action drops below the body so the message has the
+   full row width — a persistent banner reads as a block, not a one-liner. */
+.alert--prominent .alert__action {
+  grid-column: 2 / 3;
+  grid-row: 2;
+  justify-content: flex-start;
+  margin-top: var(--s-1);
+}
+
+.alert__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--md-sys-shape-corner-small);
+  /* Per-severity tint chip behind the glyph — the ONLY hued region in
+     the alert. Sits on top of the neutral alert surface. */
+  background: color-mix(in oklab, var(--alert-icon-chip) 38%, transparent);
+  color: var(--alert-icon-ink);
+  flex-shrink: 0;
+}
+
+.alert__body {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-0-5);
+}
+.alert__heading {
+  font-size: var(--md-sys-typescale-body-medium-size);
+  font-weight: 600;
+  color: var(--alert-ink);
+  /* Heading wraps when narrow rather than truncating — alerts are read,
+     not glanced at like snackbars. */
+  text-wrap: pretty;
+}
+.alert__text {
+  font-size: var(--md-sys-typescale-body-medium-size);
+  line-height: 1.45;
+  color: var(--alert-ink-soft);
+  text-wrap: pretty;
+}
+.alert__text.is-empty { display: none; }
+.alert__heading.is-empty { display: none; }
+
+.alert__action {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+.alert__action.is-empty { display: none; }
+
+.alert__close {
+  appearance: none;
+  border: none;
+  background: transparent;
+  color: var(--alert-ink-soft);
+  width: 28px;
+  height: 28px;
+  border-radius: var(--md-sys-shape-corner-small);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition:
+    background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
+    color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
+  flex-shrink: 0;
+}
+.alert__close:hover {
+  background: color-mix(in oklab, var(--alert-ink) 10%, transparent);
+  color: var(--alert-ink);
+}
+.alert__close:focus-visible {
+  outline: none;
+  box-shadow: var(--xm-state-focus-ring);
+}
+
+/* Compact: when the row gets narrow, drop the action below the body
+   so nothing wraps awkwardly. The dismiss stays inline. The 520px literal
+   mirrors --xm-breakpoint-sm (styles/_layout.css) — @media can't read the
+   token (docs/adr/0001), so the literal is the source-of-truth's echo. */
+@media (max-width: 520px) {
+  .alert {
+    grid-template-columns: auto 1fr auto;
+    grid-template-rows: auto auto;
+    row-gap: var(--s-2);
+  }
+  .alert__action {
+    grid-column: 2 / -1;
+    justify-content: flex-end;
+  }
+}

package/dist/lit/components/alert/index.d.ts

@@ -0,0 +1,25 @@
+import { LitElement } from "lit";
+import type { TemplateResult } from "lit";
+type AlertSeverity = "info" | "success" | "warning" | "critical";
+type AlertVariant = "inline" | "banner";
+declare class XmAlert extends LitElement {
+    severity: AlertSeverity;
+    heading: string;
+    dismissible: boolean;
+    static: boolean;
+    prominent: boolean;
+    variant: AlertVariant;
+    private _hasBodyText;
+    private _hasAction;
+    render(): TemplateResult;
+    private _onDefaultSlot;
+    private _onActionSlot;
+    private _onActionClick;
+    private _onDismiss;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "xm-alert": XmAlert;
+    }
+}
+export {};

package/dist/lit/components/alert/index.js

@@ -0,0 +1,191 @@
+/*
+  alert/index.ts — inline notification banner.
+
+  <xm-alert> — lightweight banner for notice / warning / success /
+  critical context. Sits inline in any content surface.
+
+  Authoring:
+    <xm-alert severity="warning" heading="Rate limit approaching" dismissible>
+      You've used 80% of your monthly quota.
+      <xm-button slot="action" variant="ghost" size="sm">View usage</xm-button>
+    </xm-alert>
+
+  Properties:
+    severity      "info" | "success" | "warning" | "critical"   (default "info")
+    heading       short title string (sentence case)
+    dismissible   boolean — render the trailing × close button
+    static        boolean — preview-only, suppresses entry animation
+    prominent     boolean — high-importance persistent BANNER layout. Changes
+                  PROMINENCE / LAYOUT ONLY (full-width feel, larger padding, a
+                  left severity accent rail, stacked action). It does NOT change
+                  the severity model, add severities, rename slots/events, or
+                  fork the API — the per-severity --xm-alert-* hue stays scoped
+                  to the icon chip + ink exactly as the inline alert. `variant`
+                  is an alias: variant="banner" === prominent.
+    variant       "inline" | "banner" (default "inline"); "banner" === prominent
+
+  Slots:
+    default       — body copy
+    action        — single trailing control (typically <xm-button variant="ghost">)
+
+  Events:
+    alert-dismiss — fired when × is clicked
+    alert-action  — fired when any element in the action slot fires click
+
+  Shadow DOM. Loads components/alert/index.css inside the shadow root via
+  <link> using the same path-resolution pattern as <xm-button>. Severity
+  is communicated by the icon glyph only — every variant uses the same
+  neutral surface and ink (POLICIES.md rule 3a forbids `--md-sys-color-error*`).
+*/
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, svg, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+// Resolve CSS path relative to the *built* file location:
+// `lit/build/components/alert/index.js` — 3 levels up reach `lit/`,
+// then into `components/`. Mirrors button/index.ts.
+const ALERT_CSS = new URL("../alert/index.css", import.meta.url).href;
+const SHELL = (paths, size = 18, strokeWidth = 1.8) => svg `
+  <svg width="${size}" height="${size}" viewBox="0 0 24 24"
+       fill="none" stroke="currentColor" stroke-width="${strokeWidth}"
+       stroke-linecap="round" stroke-linejoin="round" class="ds-icon">
+    ${paths}
+  </svg>
+`;
+const SEVERITY_ICON = {
+    info: () => SHELL(svg `
+    <circle cx="12" cy="12" r="9" />
+    <path d="M12 11v5" />
+    <path d="M12 8h.01" />
+  `),
+    success: () => SHELL(svg `
+    <circle cx="12" cy="12" r="9" />
+    <polyline points="8.5 12.5 11 15 15.5 9.5" />
+  `),
+    warning: () => SHELL(svg `
+    <path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
+    <path d="M12 9v4" />
+    <path d="M12 17h.01" />
+  `, 18, 2),
+    critical: () => SHELL(svg `
+    <polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86" />
+    <path d="M9 9l6 6M15 9l-6 6" />
+  `, 18, 2),
+};
+const CLOSE_ICON = () => SHELL(svg `
+  <path d="M6 6l12 12M18 6L6 18" />
+`, 14, 2);
+const SEVERITY_LABEL = {
+    info: "Information",
+    success: "Success",
+    warning: "Warning",
+    critical: "Critical",
+};
+let XmAlert = class XmAlert extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.severity = "info";
+        this.heading = "";
+        this.dismissible = false;
+        this.static = false;
+        this.prominent = false;
+        this.variant = "inline";
+        this._hasBodyText = true;
+        this._hasAction = false;
+        this._onDefaultSlot = (e) => {
+            const slot = e.target;
+            const nodes = slot.assignedNodes({ flatten: true });
+            const has = nodes.some((n) => {
+                if (n.nodeType === Node.TEXT_NODE)
+                    return !!n.textContent?.trim();
+                if (n.nodeType === Node.ELEMENT_NODE)
+                    return true;
+                return false;
+            });
+            if (has !== this._hasBodyText) {
+                this._hasBodyText = has;
+                this.requestUpdate();
+            }
+        };
+        this._onActionSlot = (e) => {
+            const slot = e.target;
+            const has = slot.assignedElements().length > 0;
+            if (has !== this._hasAction) {
+                this._hasAction = has;
+                this.requestUpdate();
+            }
+        };
+        this._onActionClick = () => {
+            this.dispatchEvent(new CustomEvent("alert-action", { bubbles: true, composed: true }));
+        };
+        this._onDismiss = () => {
+            this.dispatchEvent(new CustomEvent("alert-dismiss", { bubbles: true, composed: true }));
+        };
+    }
+    render() {
+        const sev = this.severity === "success" || this.severity === "warning" || this.severity === "critical"
+            ? this.severity
+            : "info";
+        const isProminent = this.prominent || this.variant === "banner";
+        const cls = `alert alert--${sev}${this.static ? " alert--static" : ""}${isProminent ? " alert--prominent" : ""}`;
+        return html `
+      <link rel="stylesheet" href="${ALERT_CSS}">
+      <style>
+        :host { display: block; }
+        :host([hidden]) { display: none; }
+      </style>
+      <div
+        class="${cls}"
+        role="${sev === "critical" || sev === "warning" ? "alert" : "status"}"
+        aria-label="${SEVERITY_LABEL[sev]}"
+      >
+        <span class="alert__icon" aria-hidden="true">${SEVERITY_ICON[sev]()}</span>
+        <div class="alert__body">
+          <span class="alert__heading ${this.heading ? "" : "is-empty"}">${this.heading}</span>
+          <span class="alert__text ${this._hasBodyText ? "" : "is-empty"}"
+            ><slot @slotchange=${this._onDefaultSlot}></slot></span>
+        </div>
+        <span class="alert__action ${this._hasAction ? "" : "is-empty"}"
+          ><slot
+            name="action"
+            @slotchange=${this._onActionSlot}
+            @click=${this._onActionClick}
+          ></slot></span>
+        ${this.dismissible
+            ? html `
+            <button
+              type="button"
+              class="alert__close"
+              aria-label="Dismiss"
+              @click=${this._onDismiss}
+            >${CLOSE_ICON()}</button>`
+            : nothing}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], XmAlert.prototype, "severity", void 0);
+__decorate([
+    property({ type: String })
+], XmAlert.prototype, "heading", void 0);
+__decorate([
+    property({ type: Boolean })
+], XmAlert.prototype, "dismissible", void 0);
+__decorate([
+    property({ type: Boolean })
+], XmAlert.prototype, "static", void 0);
+__decorate([
+    property({ type: Boolean })
+], XmAlert.prototype, "prominent", void 0);
+__decorate([
+    property({ type: String })
+], XmAlert.prototype, "variant", void 0);
+XmAlert = __decorate([
+    customElement("xm-alert")
+], XmAlert);

package/dist/lit/components/app-bar/index.css

@@ -0,0 +1,80 @@
+/* ============================================
+   <xm-app-bar> — screen header on the desk surface.
+
+   Surface / ink (AD-13): the app bar belongs to the DESK family —
+   background var(--md-sys-color-surface), title ink var(--md-sys-color-on-surface),
+   secondary var(--md-sys-color-on-surface-variant). NOT the inverse-surface ink
+   used by cards / drawers.
+
+   Hairline: a single 1px bottom border (--md-sys-color-outline-variant).
+   Never 2px.
+
+   BEM: block `app-bar`; elements `__leading` `__title` `__action`;
+   modifiers `--xs|--sm|--md|--lg`. Sticky is driven from :host([sticky]).
+   ============================================ */
+
+.app-bar {
+  display: flex;
+  align-items: center;
+  gap: var(--s-3);
+  box-sizing: border-box;
+  width: 100%;
+  padding: 0 var(--s-4);
+  background: var(--md-sys-color-surface);
+  color: var(--md-sys-color-on-surface);
+  border-bottom: 1px solid var(--md-sys-color-outline-variant);
+}
+
+/* ---------- Sizes — one shared bar height per size ---------- */
+.app-bar--xs { min-height: 40px; }
+.app-bar--sm { min-height: 48px; }
+.app-bar--md { min-height: 56px; }
+.app-bar--lg { min-height: 64px; }
+
+/* ---------- Leading ---------- */
+.app-bar__leading {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-2);
+  flex-shrink: 0;
+}
+.app-bar__leading.is-empty {
+  display: none;
+}
+
+/* ---------- Title ---------- */
+.app-bar__title {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--s-2);
+  font-family: var(--md-sys-typescale-title-medium-font);
+  font-size: var(--md-sys-typescale-title-medium-size);
+  line-height: var(--md-sys-typescale-title-medium-line-height);
+  font-weight: var(--md-sys-typescale-title-medium-weight);
+  letter-spacing: var(--md-sys-typescale-title-medium-tracking);
+  color: var(--md-sys-color-on-surface);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+/* ---------- Action (singular trailing region) ---------- */
+.app-bar__action {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-2);
+  flex-shrink: 0;
+  margin-inline-start: auto;
+}
+.app-bar__action.is-empty {
+  display: none;
+}
+
+/* ---------- Sticky ---------- */
+:host([sticky]) .app-bar {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}

package/dist/lit/components/app-bar/index.d.ts

@@ -0,0 +1,19 @@
+import { LitElement } from "lit";
+import type { TemplateResult } from "lit";
+type AppBarSize = "xs" | "sm" | "md" | "lg";
+declare class XmAppBar extends LitElement {
+    size: AppBarSize;
+    sticky: boolean;
+    private _mo;
+    render(): TemplateResult;
+    private _slotEmpty;
+    private _onSlot;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "xm-app-bar": XmAppBar;
+    }
+}
+export {};

package/dist/lit/components/app-bar/index.js

@@ -0,0 +1,120 @@
+/*
+  app-bar/index.ts — <xm-app-bar>, the screen header.
+
+  <xm-app-bar> — a top bar with leading, title, and trailing-action regions.
+  Belongs to the DESK surface family (surface*), unlike the card / drawer
+  (inverse-surface). Title ink is on-surface — a mismatched inverse ink is a
+  dark-on-dark bug one theme hides (AD-13).
+
+  Authoring:
+    <xm-app-bar size="md" sticky>
+      <xm-button slot="leading" variant="ghost" icon-only>…</xm-button>
+      Routing pipeline
+      <xm-button slot="action" variant="ghost" size="sm">Share</xm-button>
+      <xm-button slot="action" variant="primary" size="sm">Run</xm-button>
+    </xm-app-bar>
+
+  Properties:
+    size      "xs" | "sm" | "md" | "lg"   (default "md") — shared bar height
+    sticky    boolean (reflected) — position: sticky; top: 0
+
+  Slots:
+    leading   leading region (menu toggle / brand)
+    default   title (sentence case; tech identifiers stay caps)
+    action    SINGULAR trailing-action region (multiple buttons as children)
+
+  Shadow DOM; Lit from lit; sibling CSS via the
+  built-file-relative new URL(...). BEM block `app-bar`.
+*/
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+// Resolve CSS relative to the *built* file:
+// lit/build/components/app-bar/index.js → ../app-bar/index.css.
+const APP_BAR_CSS = new URL("../app-bar/index.css", import.meta.url).href;
+let XmAppBar = class XmAppBar extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.size = "md";
+        this.sticky = false;
+        this._mo = null;
+        this._onSlot = () => {
+            this.requestUpdate();
+        };
+    }
+    render() {
+        const size = ["xs", "sm", "md", "lg"].includes(this.size)
+            ? this.size
+            : "md";
+        const leadingEmpty = this._slotEmpty("leading");
+        const actionEmpty = this._slotEmpty("action");
+        return html `
+      <link rel="stylesheet" href="${APP_BAR_CSS}" />
+      <style>
+        :host {
+          display: block;
+        }
+        :host([hidden]) {
+          display: none;
+        }
+      </style>
+      <header class="app-bar app-bar--${size}">
+        <div class="app-bar__leading ${leadingEmpty ? "is-empty" : ""}">
+          <slot name="leading" @slotchange=${this._onSlot}></slot>
+        </div>
+        <div class="app-bar__title">
+          <slot @slotchange=${this._onSlot}></slot>
+        </div>
+        <div class="app-bar__action ${actionEmpty ? "is-empty" : ""}">
+          <slot name="action" @slotchange=${this._onSlot}></slot>
+        </div>
+      </header>
+    `;
+    }
+    _slotEmpty(name) {
+        for (const node of this.childNodes) {
+            if (node.nodeType === Node.ELEMENT_NODE) {
+                const slotName = node.getAttribute("slot");
+                const target = name || null;
+                const matches = (target === null && !slotName) || slotName === target;
+                if (matches)
+                    return false;
+            }
+            else if (node.nodeType === Node.TEXT_NODE && !name) {
+                if (node.textContent?.trim())
+                    return false;
+            }
+        }
+        return true;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this._mo) {
+            this._mo = new MutationObserver(() => this.requestUpdate());
+            this._mo.observe(this, {
+                childList: true,
+                characterData: true,
+                subtree: true,
+            });
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._mo?.disconnect();
+        this._mo = null;
+    }
+};
+__decorate([
+    property({ type: String })
+], XmAppBar.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], XmAppBar.prototype, "sticky", void 0);
+XmAppBar = __decorate([
+    customElement("xm-app-bar")
+], XmAppBar);