@xmesh/system-design 0.0.1

package/dist/lit/components/chip-group/index.css

@@ -0,0 +1,19 @@
+/* ============================================
+   Chip group — selection container for chips.
+
+   <xm-chip-group> lays slotted <xm-chip> children in a wrapping
+   row and owns selection (single by default, multi with `multiple`).
+   Layout only — the chips own all chrome. Sits on a surface* host,
+   so it adds no surface of its own.
+   ============================================ */
+
+.chip-group {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--s-2);
+  /* The group sits on a surface* host; establish on-surface as the
+     inherited ink so any chip that resolves currentColor against the
+     group reads correctly on the desk (AD-13). */
+  color: var(--md-sys-color-on-surface);
+}

package/dist/lit/components/chip-group/index.d.ts

@@ -0,0 +1,24 @@
+import { LitElement } from "lit";
+import type { TemplateResult } from "lit";
+type Primitive = string | number;
+declare class XmChipGroup extends LitElement {
+    multiple: boolean;
+    value: Primitive | Primitive[] | null;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    private _chips;
+    private _enabledChips;
+    private _syncValueFromChips;
+    private _onChipActivate;
+    private _onKeydown;
+    private _updateRovingTabindex;
+    render(): TemplateResult;
+    private _onSlot;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "xm-chip-group": XmChipGroup;
+    }
+}
+export {};

package/dist/lit/components/chip-group/index.js

@@ -0,0 +1,171 @@
+/*
+  chip-group/index.ts — <xm-chip-group>.
+
+  Selection owner for a set of <xm-chip> children. Single-select by
+  default; multi-select with `multiple`. Reads/sets each chip's public
+  `value` / `selected` properties only — never their shadow roots (AD-12).
+
+  Authoring:
+    <xm-chip-group name="filter">
+      <xm-chip value="all" selected>All</xm-chip>
+      <xm-chip value="open">Open</xm-chip>
+      <xm-chip value="closed">Closed</xm-chip>
+    </xm-chip-group>
+
+    <xm-chip-group multiple>
+      <xm-chip value="rest">REST</xm-chip>
+      <xm-chip value="graphql">GraphQL</xm-chip>
+    </xm-chip-group>
+
+  Properties:
+    multiple   boolean — allow more than one selected chip
+    value      string|number|Array — the current selection (reflected to
+               children on render); read it back from the change event
+
+  Events:
+    change   bubbles+composed. detail.value = single primitive (single-
+             select) | Array<primitive> (multi-select). The chip's `value`,
+             never the element (AD-8a).
+
+  Keyboard (roving focus, WAI-ARIA toolbar/listbox-ish): ←/→ move between
+  chips, Home/End jump to ends; the focused chip's own Enter/Space toggles.
+  Shadow DOM; Lit is a bare `import` (peer dep).
+*/
+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";
+const GROUP_CSS = new URL("../chip-group/index.css", import.meta.url).href;
+let XmChipGroup = class XmChipGroup extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.multiple = false;
+        this.value = null;
+        this._onChipActivate = (e) => {
+            const chip = e.target;
+            if (chip.tagName?.toLowerCase() !== "xm-chip")
+                return;
+            // Own the selection: stop the chip from self-toggling.
+            e.preventDefault();
+            if (chip.disabled)
+                return;
+            if (this.multiple) {
+                chip.selected = !chip.selected;
+            }
+            else {
+                const wasSelected = chip.selected;
+                this._chips().forEach((c) => (c.selected = c === chip ? !wasSelected : false));
+            }
+            this._syncValueFromChips();
+            this._updateRovingTabindex();
+            this.dispatchEvent(new CustomEvent("change", {
+                detail: { value: this.value },
+                bubbles: true,
+                composed: true,
+            }));
+        };
+        this._onKeydown = (e) => {
+            const k = e.key;
+            if (k !== "ArrowLeft" && k !== "ArrowRight" && k !== "Home" && k !== "End")
+                return;
+            const chips = this._enabledChips();
+            if (chips.length === 0)
+                return;
+            const active = e.target;
+            const idx = chips.indexOf(active);
+            if (idx === -1)
+                return;
+            e.preventDefault();
+            let next;
+            if (k === "Home")
+                next = 0;
+            else if (k === "End")
+                next = chips.length - 1;
+            else if (k === "ArrowRight")
+                next = (idx + 1) % chips.length;
+            else
+                next = (idx - 1 + chips.length) % chips.length;
+            const target = chips[next];
+            if (target) {
+                this._updateRovingTabindex(target);
+                target.focus();
+            }
+        };
+        this._onSlot = () => {
+            this._syncValueFromChips();
+            this._updateRovingTabindex();
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener("xm-chip-activate", this._onChipActivate);
+        this.addEventListener("keydown", this._onKeydown);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener("xm-chip-activate", this._onChipActivate);
+        this.removeEventListener("keydown", this._onKeydown);
+    }
+    firstUpdated() {
+        // Adopt the chips' initial `selected`/`value` state as the group value,
+        // then normalize roving tabindex.
+        this._syncValueFromChips();
+        this._updateRovingTabindex();
+    }
+    _chips() {
+        return [...this.children].filter((c) => c.tagName.toLowerCase() === "xm-chip");
+    }
+    _enabledChips() {
+        return this._chips().filter((c) => !c.disabled);
+    }
+    _syncValueFromChips() {
+        const selected = this._chips().filter((c) => c.selected);
+        if (this.multiple) {
+            this.value = selected.map((c) => c.value);
+        }
+        else {
+            // Single-select: keep at most one selected.
+            if (selected.length > 1) {
+                selected.slice(1).forEach((c) => (c.selected = false));
+            }
+            this.value = selected[0]?.value ?? null;
+        }
+    }
+    _updateRovingTabindex(focused) {
+        const chips = this._chips();
+        const enabled = this._enabledChips();
+        const tabStop = focused ?? enabled.find((c) => c.selected) ?? enabled[0] ?? null;
+        chips.forEach((c) => {
+            c.tabIndex = c === tabStop && !c.disabled ? 0 : -1;
+        });
+    }
+    render() {
+        return html `
+      <link rel="stylesheet" href="${GROUP_CSS}" />
+      <style>
+        :host {
+          display: block;
+        }
+        :host([hidden]) {
+          display: none;
+        }
+      </style>
+      <div class="chip-group" role="group">
+        <slot @slotchange=${this._onSlot}></slot>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], XmChipGroup.prototype, "multiple", void 0);
+__decorate([
+    property({ attribute: false })
+], XmChipGroup.prototype, "value", void 0);
+XmChipGroup = __decorate([
+    customElement("xm-chip-group")
+], XmChipGroup);

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

@@ -0,0 +1,42 @@
+/* ============================================
+   Code — inline / block code display primitive.
+
+   <xm-code> presents code verbatim using the JetBrains Mono
+   typescale (--xm-typescale-mono-*). Inline by default; the
+   `block` modifier wraps it in a <pre> for a small code block.
+
+   A recessed surface-container-* backplate raised off the host,
+   a hairline 1px outline-variant border, ink --md-sys-color-on-surface
+   matched to the backplate (AD-13). Presentational chrome — never a
+   status hue (AD-11).
+   ============================================ */
+
+.code {
+  box-sizing: border-box;
+  padding: 1px var(--s-2);
+  border: 1px solid var(--md-sys-color-outline-variant);
+  border-radius: var(--md-sys-shape-corner-extra-small);
+  background: var(--md-sys-color-surface-container-low);
+  color: var(--md-sys-color-on-surface);
+  font-family: var(--xm-typescale-mono-font);
+  font-size: var(--xm-typescale-mono-size);
+  font-weight: var(--xm-typescale-mono-weight);
+  line-height: var(--xm-typescale-mono-line-height);
+  letter-spacing: var(--xm-typescale-mono-tracking);
+  white-space: nowrap;
+  vertical-align: baseline;
+}
+
+/* Block — recessed code panel. Wraps, scrolls horizontally if needed,
+   and uses the small corner + more padding of a panel rather than an
+   inline token. */
+.code--block {
+  display: block;
+  margin: 0;
+  padding: var(--s-3) var(--s-4);
+  border-radius: var(--md-sys-shape-corner-small);
+  background: var(--md-sys-color-surface-container-low);
+  white-space: pre;
+  overflow-x: auto;
+  tab-size: 2;
+}

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

@@ -0,0 +1,12 @@
+import { LitElement } from "lit";
+import type { TemplateResult } from "lit";
+declare class XmCode extends LitElement {
+    block: boolean;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "xm-code": XmCode;
+    }
+}
+export {};

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

@@ -0,0 +1,68 @@
+/*
+  code/index.ts — <xm-code>.
+
+  Inline (default) or block code display primitive. Wraps its
+  default-slot content in a native <code> for semantics + copy/paste,
+  and renders it using the JetBrains Mono typescale. With `block`,
+  the <code> is wrapped in a <pre> for a small recessed code panel.
+
+  Authoring:
+    Set <xm-code>data-theme="dark"</xm-code> on the root.
+
+    <xm-code block>
+    routing:
+      planner: sonnet-4.7
+    </xm-code>
+
+  Properties:
+    block   boolean — render as a <pre><code> block panel
+
+  Presentational, non-interactive. Shadow DOM for <slot> projection;
+  Lit is a bare `import` (peer dep); CSS via <link> resolved relative to the built module.
+*/
+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";
+const CODE_CSS = new URL("../code/index.css", import.meta.url).href;
+let XmCode = class XmCode extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.block = false;
+    }
+    render() {
+        const styleHost = html `
+      <style>
+        :host {
+          display: ${this.block ? "block" : "inline"};
+          vertical-align: baseline;
+        }
+        :host([hidden]) {
+          display: none;
+        }
+      </style>
+    `;
+        if (this.block) {
+            return html `
+        <link rel="stylesheet" href="${CODE_CSS}" />
+        ${styleHost}
+        <pre class="code code--block"><code><slot></slot></code></pre>
+      `;
+        }
+        return html `
+      <link rel="stylesheet" href="${CODE_CSS}" />
+      ${styleHost}
+      <code class="code"><slot></slot></code>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], XmCode.prototype, "block", void 0);
+XmCode = __decorate([
+    customElement("xm-code")
+], XmCode);