@xmesh/system-design 0.0.1

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

@@ -0,0 +1,85 @@
+/* ============================================
+   Table — static, semantic, hairline-ruled grid.
+
+   <xm-table> renders a real <table> in its shadow root. Borders are
+   1px --md-sys-color-outline-variant hairlines (no 2px, no heavy
+   elevation). The table sits on one surface family — surface* with
+   ink --md-sys-color-on-surface (AD-13). Header rows are
+   differentiated by the hairline rule + an optional surface-container
+   raise, never a status hue (AD-11).
+
+   Numeric cells right-align (text-align: end) with tabular figures so
+   columns of numbers line up; the number + unit carry a space (412 KB)
+   in the content (NFR-22 / UX-DR4).
+
+   Static only — sorting / paging live in xm-data-table (Epic 6).
+   ============================================ */
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  background: transparent;
+  color: var(--md-sys-color-on-surface);
+  font-family: var(--md-sys-typescale-body-medium-font);
+  font-size: var(--md-sys-typescale-body-medium-size);
+  line-height: var(--md-sys-typescale-body-medium-line-height);
+  /* A hairline frame around the whole grid. */
+  border: 1px solid var(--md-sys-color-outline-variant);
+}
+
+.table__caption {
+  caption-side: top;
+  text-align: start;
+  padding: 0 0 var(--s-2);
+  color: var(--md-sys-color-on-surface-variant);
+  font-family: var(--md-sys-typescale-label-large-font);
+  font-size: var(--md-sys-typescale-label-large-size);
+  font-weight: 500;
+}
+
+.table__head {
+  background: var(--md-sys-color-surface-container-low);
+}
+
+.table__header-cell {
+  text-align: start;
+  padding: var(--s-3) var(--s-4);
+  border-bottom: 1px solid var(--md-sys-color-outline-variant);
+  color: var(--md-sys-color-on-surface);
+  font-family: var(--md-sys-typescale-label-large-font);
+  font-size: var(--md-sys-typescale-label-medium-size);
+  font-weight: 600;
+  letter-spacing: 0;
+  white-space: nowrap;
+}
+
+.table__row + .table__row .table__cell {
+  border-top: 1px solid var(--md-sys-color-outline-variant);
+}
+
+.table__cell {
+  padding: var(--s-3) var(--s-4);
+  text-align: start;
+  vertical-align: middle;
+  color: var(--md-sys-color-on-surface);
+}
+
+/* Secondary ink for muted cells (e.g. timestamps). */
+.table__cell--muted {
+  color: var(--md-sys-color-on-surface-variant);
+}
+
+/* Numeric — right-aligned, tabular figures so digits line up. */
+.table__header-cell--numeric,
+.table__cell--numeric {
+  text-align: end;
+  font-variant-numeric: tabular-nums;
+  font-feature-settings: "tnum" 1;
+}
+
+/* Zebra is intentionally omitted — the hairline rule does the region
+   work (UX-DR10). A subtle row-hover keeps long tables scannable
+   without a status hue. */
+.table__row:hover .table__cell {
+  background: color-mix(in oklab, var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity), transparent);
+}

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

@@ -0,0 +1,25 @@
+import { LitElement } from "lit";
+import type { TemplateResult } from "lit";
+export interface TableColumn {
+    key: string;
+    label: string;
+    numeric?: boolean;
+    align?: "start" | "end";
+    muted?: boolean;
+}
+export type TableRow = Record<string, string | number>;
+declare class XmTable extends LitElement {
+    columns: TableColumn[];
+    rows: TableRow[];
+    caption: string;
+    willUpdate(changed: Map<string, unknown>): void;
+    private _isNumericCol;
+    render(): TemplateResult;
+    private _renderData;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "xm-table": XmTable;
+    }
+}
+export {};

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

@@ -0,0 +1,139 @@
+/*
+  table/index.ts — <xm-table>.
+
+  Static, semantic, hairline-ruled table. Renders a real <table> in
+  its shadow root. Two authoring modes:
+
+  1. Data-driven (preferred; this is the shape xm-data-table composes
+     in Epic 6):
+       const t = document.querySelector("xm-table");
+       t.columns = [
+         { key: "name",  label: "File name" },
+         { key: "type",  label: "Type" },
+         { key: "size",  label: "Size", numeric: true },
+       ];
+       t.rows = [
+         { name: "routing.yaml", type: "YAML", size: "8.4 KB" },
+         { name: "schema.json",  type: "JSON", size: "412 KB" },
+       ];
+     Or set columns/rows as JSON via the `columns` / `rows` attributes.
+
+  2. Slotted (escape hatch for fully bespoke markup): author your own
+     <table> structure inside the element; it is projected verbatim.
+
+  Column model: { key, label, numeric?, align?, muted? }.
+    numeric  → right-align + tabular figures (NFR-22). Put the unit in
+               the value with a space (e.g. "412 KB").
+    align    → "start" | "end" | explicit override of numeric default.
+    muted    → render the cell with secondary ink.
+
+  Static only — no sorting / paging (that's xm-data-table, Epic 6).
+  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, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+const TABLE_CSS = new URL("../table/index.css", import.meta.url).href;
+let XmTable = class XmTable extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.columns = [];
+        this.rows = [];
+        this.caption = "";
+    }
+    willUpdate(changed) {
+        // Allow declarative JSON in attributes for static HTML authoring. A malformed
+        // string must not throw out of the reactive update and break render — keep
+        // the prior value on a parse error.
+        if (changed.has("columns") && typeof this.columns === "string") {
+            try {
+                this.columns = JSON.parse(this.columns);
+            }
+            catch {
+                this.columns = changed.get("columns") ?? [];
+            }
+        }
+        if (changed.has("rows") && typeof this.rows === "string") {
+            try {
+                this.rows = JSON.parse(this.rows);
+            }
+            catch {
+                this.rows = changed.get("rows") ?? [];
+            }
+        }
+    }
+    _isNumericCol(col) {
+        if (col.align === "end")
+            return true;
+        if (col.align === "start")
+            return false;
+        return Boolean(col.numeric);
+    }
+    render() {
+        const dataMode = this.columns.length > 0;
+        return html `
+      <link rel="stylesheet" href="${TABLE_CSS}" />
+      <style>
+        :host {
+          display: block;
+        }
+        :host([hidden]) {
+          display: none;
+        }
+      </style>
+      ${dataMode ? this._renderData() : html `<slot></slot>`}
+    `;
+    }
+    _renderData() {
+        return html `
+      <table class="table" aria-label=${this.caption || nothing}>
+        ${this.caption
+            ? html `<caption class="table__caption">${this.caption}</caption>`
+            : nothing}
+        <thead class="table__head">
+          <tr class="table__row">
+            ${this.columns.map((col) => {
+            const numeric = this._isNumericCol(col);
+            const cls = `table__header-cell ${numeric ? "table__header-cell--numeric" : ""}`.trim();
+            return html `<th class="${cls}" scope="col">${col.label}</th>`;
+        })}
+          </tr>
+        </thead>
+        <tbody>
+          ${this.rows.map((row) => html `
+              <tr class="table__row">
+                ${this.columns.map((col) => {
+            const numeric = this._isNumericCol(col);
+            const cls = [
+                "table__cell",
+                numeric && "table__cell--numeric",
+                col.muted && "table__cell--muted",
+            ]
+                .filter(Boolean)
+                .join(" ");
+            return html `<td class="${cls}">${row[col.key] ?? ""}</td>`;
+        })}
+              </tr>
+            `)}
+        </tbody>
+      </table>
+    `;
+    }
+};
+__decorate([
+    property({ attribute: false })
+], XmTable.prototype, "columns", void 0);
+__decorate([
+    property({ attribute: false })
+], XmTable.prototype, "rows", void 0);
+__decorate([
+    property({ type: String })
+], XmTable.prototype, "caption", void 0);
+XmTable = __decorate([
+    customElement("xm-table")
+], XmTable);

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

@@ -0,0 +1,116 @@
+/* ============================================
+   <xm-tabs> / <xm-tab> / <xm-tab-panel> — tab strip.
+
+   Surface / ink (AD-13): a transparent strip tracing its host surface. On the
+   desk family the inactive tab ink is var(--md-sys-color-on-surface-variant)
+   and the active tab is var(--md-sys-color-on-surface). The active indicator
+   is the single coral accent var(--md-sys-color-primary). Hairline 1px
+   baseline rule. Indicator slide is short3 standard easing — no bounce.
+
+   xm-tab / xm-tab-panel are LIGHT-DOM hosts projected through this element's
+   slots, so they are styled with ::slotted(...). The active/disabled state
+   classes are added to the xm-tab HOST by xm-tabs.
+
+   BEM root block `tabs`; elements `__list` `__tab` `__label` `__indicator`
+   `__panels` `__panel`; modifiers `__tab--active` `__tab--disabled`,
+   size `--xs|sm|md|lg`.
+   ============================================ */
+
+.tabs {
+  display: block;
+}
+
+/* ---------- Tablist (the strip) ---------- */
+.tabs__list {
+  position: relative;
+  display: flex;
+  align-items: stretch;
+  gap: var(--s-1);
+  border-bottom: 1px solid var(--md-sys-color-outline-variant);
+}
+
+/* ---------- Tabs (slotted xm-tab hosts) ---------- */
+::slotted(xm-tab) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--s-2);
+  padding: var(--s-2) var(--s-3);
+  margin-bottom: -1px;
+  border: 0;
+  background: transparent;
+  color: var(--md-sys-color-on-surface-variant);
+  font-family: var(--md-sys-typescale-label-large-font);
+  font-weight: 600;
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  border-radius: var(--md-sys-shape-corner-small) var(--md-sys-shape-corner-small) 0 0;
+  transition:
+    color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
+    background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
+}
+::slotted(xm-tab:hover) {
+  color: var(--md-sys-color-on-surface);
+  background: color-mix(
+    in oklab,
+    var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity),
+    transparent
+  );
+}
+::slotted(xm-tab:focus) {
+  outline: none;
+}
+::slotted(xm-tab:focus-visible) {
+  outline: none;
+  box-shadow: var(--xm-state-focus-ring);
+}
+::slotted(.tabs__tab--active) {
+  color: var(--md-sys-color-on-surface);
+}
+::slotted(.tabs__tab--disabled) {
+  cursor: not-allowed;
+  color: var(--xm-color-on-surface-disabled);
+}
+::slotted(.tabs__tab--disabled:hover) {
+  background: transparent;
+  color: var(--xm-color-on-surface-disabled);
+}
+
+/* ---------- Sizes — one shared tab height per size ---------- */
+.tabs--xs ::slotted(xm-tab) { padding: var(--s-1) var(--s-2); font-size: var(--md-sys-typescale-label-small-size); }
+.tabs--sm ::slotted(xm-tab) { padding: var(--s-1) var(--s-3); font-size: var(--md-sys-typescale-body-small-size); }
+.tabs--md ::slotted(xm-tab) { padding: var(--s-2) var(--s-3); font-size: var(--md-sys-typescale-body-medium-size); }
+.tabs--lg ::slotted(xm-tab) { padding: var(--s-3) var(--s-4); font-size: var(--md-sys-typescale-title-small-size); }
+
+/* ---------- Coral active indicator (sliding underline) ---------- */
+.tabs__indicator {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 2px;
+  width: 0;
+  background: var(--md-sys-color-primary);
+  border-radius: var(--md-sys-shape-corner-full);
+  opacity: 0;
+  transform: translateX(0);
+  transition:
+    transform var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
+    width var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
+  pointer-events: none;
+}
+
+/* ---------- Panels ---------- */
+.tabs__panels {
+  padding-top: var(--s-4);
+}
+::slotted(xm-tab-panel) {
+  display: block;
+  color: var(--md-sys-color-on-surface);
+  font-family: var(--md-sys-typescale-body-medium-font);
+  font-size: var(--md-sys-typescale-body-medium-size);
+  line-height: var(--md-sys-typescale-body-medium-line-height);
+}
+::slotted(xm-tab-panel[hidden]) {
+  display: none;
+}

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

@@ -0,0 +1,49 @@
+import { LitElement } from "lit";
+import type { PropertyValues, TemplateResult } from "lit";
+type TabsSize = "xs" | "sm" | "md" | "lg";
+export interface TabsChangeDetail {
+    value: string;
+}
+declare class XmTab extends LitElement {
+    value: string;
+    disabled: boolean;
+    createRenderRoot(): HTMLElement | DocumentFragment;
+    connectedCallback(): void;
+    render(): TemplateResult;
+}
+declare class XmTabPanel extends LitElement {
+    value: string;
+    createRenderRoot(): HTMLElement | DocumentFragment;
+    connectedCallback(): void;
+    render(): TemplateResult;
+}
+declare class XmTabs extends LitElement {
+    value: string;
+    size: TabsSize;
+    private _list;
+    private _indicator;
+    private readonly _id;
+    private _activeValue;
+    render(): TemplateResult;
+    firstUpdated(): void;
+    protected updated(changed: PropertyValues<this>): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _onResize;
+    private get _tabs();
+    private get _panels();
+    private _enabledTabs;
+    private _sync;
+    private _positionIndicator;
+    private _activate;
+    private _onClick;
+    private _onKeydown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "xm-tabs": XmTabs;
+        "xm-tab": XmTab;
+        "xm-tab-panel": XmTabPanel;
+    }
+}
+export {};