@xmesh/system-design 0.0.2 → 0.0.4

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

@@ -1,7 +1,7 @@
 import { LitElement } from "lit";
 import type { TemplateResult } from "lit";
 type DividerOrientation = "horizontal" | "vertical";
-declare class XmDivider extends LitElement {
+export declare class XmDivider extends LitElement {
     orientation: DividerOrientation;
     render(): TemplateResult;
 }

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

@@ -65,3 +65,4 @@ __decorate([
 XmDivider = __decorate([
     customElement("xm-divider")
 ], XmDivider);
+export { XmDivider };

package/dist/lit/components/expansion-panel/index.d.ts

@@ -1,6 +1,6 @@
 import { LitElement } from "lit";
 import type { TemplateResult } from "lit";
-declare class XmExpansionPanel extends LitElement {
+export declare class XmExpansionPanel extends LitElement {
     open: boolean;
     heading: string;
     disabled: boolean;
@@ -19,4 +19,3 @@ declare global {
         "xm-expansion-panel": XmExpansionPanel;
     }
 }
-export {};

package/dist/lit/components/expansion-panel/index.js

@@ -172,3 +172,4 @@ __decorate([
 XmExpansionPanel = __decorate([
     customElement("xm-expansion-panel")
 ], XmExpansionPanel);
+export { XmExpansionPanel };

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

@@ -1,7 +1,7 @@
 import { LitElement } from "lit";
 import type { TemplateResult } from "lit";
 type GridGap = "none" | "xs" | "sm" | "md" | "lg" | "xl";
-declare class XmGrid extends LitElement {
+export declare class XmGrid extends LitElement {
     columns: number;
     gap: GridGap;
     render(): TemplateResult;

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

@@ -80,3 +80,4 @@ __decorate([
 XmGrid = __decorate([
     customElement("xm-grid")
 ], XmGrid);
+export { XmGrid };

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

@@ -1,6 +1,6 @@
 import { LitElement } from "lit";
 import type { TemplateResult } from "lit";
-declare class XmKbd extends LitElement {
+export declare class XmKbd extends LitElement {
     render(): TemplateResult;
 }
 declare global {
@@ -8,4 +8,3 @@ declare global {
         "xm-kbd": XmKbd;
     }
 }
-export {};

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

@@ -41,3 +41,4 @@ let XmKbd = class XmKbd extends LitElement {
 XmKbd = __decorate([
     customElement("xm-kbd")
 ], XmKbd);
+export { XmKbd };

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

@@ -1,7 +1,7 @@
 import { LitElement } from "lit";
 import type { TemplateResult } from "lit";
 type Primitive = string | number;
-declare class XmList extends LitElement {
+export declare class XmList extends LitElement {
     interactive: boolean;
     selectable: boolean;
     value: Primitive | null;

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

@@ -186,3 +186,4 @@ __decorate([
 XmList = __decorate([
     customElement("xm-list")
 ], XmList);
+export { XmList };

package/dist/lit/components/list-item/index.d.ts

@@ -1,6 +1,6 @@
 import { LitElement } from "lit";
 import type { TemplateResult } from "lit";
-declare class XmListItem extends LitElement {
+export declare class XmListItem extends LitElement {
     value: string;
     selected: boolean;
     disabled: boolean;
@@ -17,4 +17,3 @@ declare global {
         "xm-list-item": XmListItem;
     }
 }
-export {};

package/dist/lit/components/list-item/index.js

@@ -125,3 +125,4 @@ __decorate([
 XmListItem = __decorate([
     customElement("xm-list-item")
 ], XmListItem);
+export { XmListItem };

package/dist/lit/components/navigation-drawer/index.d.ts

@@ -1,6 +1,6 @@
 import { LitElement } from "lit";
 import type { PropertyValues, TemplateResult } from "lit";
-declare class XmNavigationDrawer extends LitElement {
+export declare class XmNavigationDrawer extends LitElement {
     static shadowRootOptions: ShadowRootInit;
     open: boolean;
     collapsed: boolean;
@@ -26,4 +26,3 @@ declare global {
         "xm-navigation-drawer": XmNavigationDrawer;
     }
 }
-export {};

package/dist/lit/components/navigation-drawer/index.js

@@ -216,3 +216,4 @@ __decorate([
 XmNavigationDrawer = __decorate([
     customElement("xm-navigation-drawer")
 ], XmNavigationDrawer);
+export { XmNavigationDrawer };

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

@@ -4,7 +4,7 @@ type PaginationSize = "xs" | "sm" | "md" | "lg";
 export interface PaginationPageChangeDetail {
     page: number;
 }
-declare class XmPagination extends LitElement {
+export declare class XmPagination extends LitElement {
     page: number;
     total: number;
     siblings: number;

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

@@ -182,3 +182,4 @@ __decorate([
 XmPagination = __decorate([
     customElement("xm-pagination")
 ], XmPagination);
+export { XmPagination };

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

@@ -0,0 +1,34 @@
+/* ============================================
+   Popover — a click-triggered anchored panel of arbitrary content.
+
+   The popover surface chrome (inverse-surface fill, inverse-on-surface ink,
+   hairline border, level3 elevation, edge-flip, open/close motion) is owned by
+   the composed <xm-overlay> in the `menu` tier. This file styles only the
+   trigger wrapper and the content panel that rides inside the overlay body.
+
+   All ink is inverse-on-surface (AD-13) — the popover/card stack ink. The panel
+   is role="dialog" and receives initial focus, so its focus outline is
+   suppressed (the moved-in focus is the affordance, not a ring on the box).
+
+   BEM block: `popover`. Registered in scripts/check-bem.sh STRICT_BLOCKS.
+   Elements: popover__trigger, popover__panel.
+   ============================================ */
+
+.popover__trigger {
+  display: inline-flex;
+  align-items: center;
+}
+
+.popover__panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-2);
+  min-width: 180px;
+  color: var(--md-sys-color-inverse-on-surface);
+}
+
+/* role="dialog" + tabindex=-1: we move focus here on open, so the box itself
+   never shows a focus ring — interactive children own their own focus states. */
+.popover__panel:focus {
+  outline: none;
+}

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

@@ -0,0 +1,29 @@
+import { LitElement } from "lit";
+import type { TemplateResult } from "lit";
+import type { OverlayPlacement } from "../overlay/index.js";
+export declare class XmPopover extends LitElement {
+    open: boolean;
+    placement: OverlayPlacement;
+    label: string;
+    private _overlay;
+    private _panel;
+    private _triggerWrap;
+    private readonly _panelId;
+    private _closeReason;
+    private _wasOpen;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): TemplateResult;
+    private _onTriggerClick;
+    private _onDocPointer;
+    private _onOverlayClose;
+    private _requestClose;
+    protected updated(changed: Map<string, unknown>): void;
+    private get _triggerEl();
+    private _wireTriggerAria;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "xm-popover": XmPopover;
+    }
+}

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

@@ -0,0 +1,204 @@
+/*
+  popover/index.ts — <xm-popover>, a click-triggered anchored panel of
+  arbitrary content.
+
+  The generalized sibling of <xm-menu>: where the menu projects a list of
+  <xm-menu-item> children and owns the APG `menu` roving model, the popover
+  projects ANY content (a column toggle list, a small form, a filter panel) and
+  leaves interaction to that content. Both compose the same xm-overlay
+  foundation (Story 1.4) for anchored positioning, top-layer stacking, Esc
+  dismissal, and focus-restore — neither hand-rolls z-index or anchoring math.
+  We drive the overlay through its PUBLIC API only (mode / tier / placement /
+  .anchor / .opener / show / hide / xm-overlay-close) and never reach into its
+  shadow root (AD-12).
+
+  Behaviour:
+    • clicking the trigger opens an anchored panel; clicking it again, clicking
+      outside, or Esc closes it
+    • the panel is role="dialog" and takes initial focus on open; focus
+      restores to the trigger on close (delegated to the overlay via .opener)
+    • outside-click dismiss is owned here: the overlay runs popover="manual"
+      (no native light-dismiss) so a click whose composed path excludes this
+      host closes the panel
+
+  Events (AD-8 / AD-8a, tier (b) — component-specific signals):
+    xm-popover-open   detail: {}
+    xm-popover-close  detail: { reason }   reason ∈ "trigger"|"outside"|"overlay"
+    both bubbles:true, composed:true.
+
+  Authoring:
+    <xm-popover placement="bottom-end" label="Columns">
+      <xm-button slot="trigger" variant="ghost" size="sm">Columns</xm-button>
+      <div class="my-panel">…arbitrary content…</div>
+    </xm-popover>
+
+  Shadow DOM. Depends on xm-overlay + tokens (AD-12). Lit is a bare `import`.
+*/
+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, query } from "lit/decorators.js";
+const POPOVER_CSS = new URL("../popover/index.css", import.meta.url).href;
+let popoverSeq = 0;
+let XmPopover = class XmPopover extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.open = false;
+        this.placement = "bottom-start";
+        this.label = "";
+        this._panelId = `xm-popover-${++popoverSeq}`;
+        this._closeReason = "api";
+        this._wasOpen = false;
+        // ── Open / close ──────────────────────────────────────────────────────
+        this._onTriggerClick = () => {
+            if (this.open)
+                this._requestClose("trigger");
+            else
+                this.open = true;
+        };
+        this._onDocPointer = (e) => {
+            if (!this.open)
+                return;
+            if (!e.composedPath().includes(this))
+                this._requestClose("outside");
+        };
+        this._onOverlayClose = () => {
+            // Overlay self-dismissed (Esc); reflect it into our state. updated() owns
+            // the single overlay hide + xm-popover-close emission.
+            if (this.open)
+                this._requestClose("escape");
+        };
+        this._wireTriggerAria = (e) => {
+            const slot = e.target;
+            const el = slot.assignedElements()[0];
+            if (el) {
+                el.setAttribute("aria-haspopup", "dialog");
+                el.setAttribute("aria-expanded", this.open ? "true" : "false");
+                el.setAttribute("aria-controls", this._panelId);
+            }
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener("pointerdown", this._onDocPointer, true);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener("pointerdown", this._onDocPointer, true);
+    }
+    render() {
+        return html `
+      <link rel="stylesheet" href="${POPOVER_CSS}" />
+      <style>
+        :host { display: inline-flex; }
+      </style>
+      <span class="popover__trigger" @click=${this._onTriggerClick}>
+        <slot name="trigger" @slotchange=${this._wireTriggerAria}></slot>
+      </span>
+
+      <xm-overlay
+        mode="non-modal"
+        tier="menu"
+        placement=${this.placement}
+        label=${this.label || "Popover"}
+        @xm-overlay-close=${this._onOverlayClose}
+      >
+        <div
+          class="popover__panel"
+          id=${this._panelId}
+          role="dialog"
+          aria-label=${this.label || "Popover"}
+          tabindex="-1"
+        >
+          <slot></slot>
+        </div>
+      </xm-overlay>
+    `;
+    }
+    // Record the reason and flip `open`; the actual overlay hide + the single
+    // xm-popover-close emission happen in updated(), so every close path
+    // (trigger, outside, Esc, programmatic open=false) is one code path that
+    // fires exactly once.
+    _requestClose(reason) {
+        if (!this.open)
+            return;
+        this._closeReason = reason;
+        this.open = false;
+    }
+    updated(changed) {
+        if (!changed.has("open"))
+            return;
+        const ov = this._overlay;
+        const trigger = this._triggerEl;
+        if (this.open) {
+            if (ov && trigger) {
+                ov.anchor = trigger;
+                ov.opener = trigger;
+                ov.show();
+                // Land focus in the panel so the content is reachable; the overlay
+                // restores focus to the trigger on close.
+                requestAnimationFrame(() => {
+                    if (this.open)
+                        this._panel?.focus();
+                });
+            }
+            this._wasOpen = true;
+            this.dispatchEvent(new CustomEvent("xm-popover-open", {
+                bubbles: true,
+                composed: true,
+                detail: {},
+            }));
+        }
+        else {
+            if (ov?.open)
+                ov.hide("api");
+            // Guard the initial render (open=false from the start) so it never emits
+            // a phantom close; only a real open→close transition fires the event.
+            if (this._wasOpen) {
+                this._wasOpen = false;
+                this.dispatchEvent(new CustomEvent("xm-popover-close", {
+                    bubbles: true,
+                    composed: true,
+                    detail: { reason: this._closeReason },
+                }));
+            }
+            this._closeReason = "api";
+        }
+        if (trigger) {
+            trigger.setAttribute("aria-expanded", this.open ? "true" : "false");
+        }
+    }
+    // Prefer the slotted trigger; fall back to the wrapper so an `open` set before
+    // the trigger element is assigned still anchors + shows (no stuck state with
+    // aria-expanded="true" and no panel).
+    get _triggerEl() {
+        const slot = this.renderRoot.querySelector('slot[name="trigger"]');
+        return (slot?.assignedElements()[0] ?? this._triggerWrap ?? null);
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], XmPopover.prototype, "open", void 0);
+__decorate([
+    property({ type: String })
+], XmPopover.prototype, "placement", void 0);
+__decorate([
+    property({ type: String })
+], XmPopover.prototype, "label", void 0);
+__decorate([
+    query("xm-overlay")
+], XmPopover.prototype, "_overlay", void 0);
+__decorate([
+    query(".popover__panel")
+], XmPopover.prototype, "_panel", void 0);
+__decorate([
+    query(".popover__trigger")
+], XmPopover.prototype, "_triggerWrap", void 0);
+XmPopover = __decorate([
+    customElement("xm-popover")
+], XmPopover);
+export { XmPopover };

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

@@ -3,7 +3,7 @@ import type { TemplateResult } from "lit";
 declare class LightElement extends LitElement {
     createRenderRoot(): HTMLElement | DocumentFragment;
 }
-declare class XmIcon extends LightElement {
+export declare class XmIcon extends LightElement {
     size: number;
     viewBox: string;
     strokeWidth: number;
@@ -11,7 +11,7 @@ declare class XmIcon extends LightElement {
     title: string;
     render(): TemplateResult;
 }
-declare class XmSpinner extends LightElement {
+export declare class XmSpinner extends LightElement {
     size: number;
     className: string;
     render(): TemplateResult;

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

@@ -22,6 +22,18 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, html, svg, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
+if (typeof document !== "undefined") {
+    for (const href of [
+        new URL("../primitives/index.css", import.meta.url).href,
+    ]) {
+        if (document.querySelector(`link[rel="stylesheet"][href="${href}"]`))
+            continue;
+        const link = document.createElement("link");
+        link.rel = "stylesheet";
+        link.href = href;
+        document.head.appendChild(link);
+    }
+}
 class LightElement extends LitElement {
     createRenderRoot() {
         return this;
@@ -84,6 +96,7 @@ __decorate([
 XmIcon = __decorate([
     customElement("xm-icon")
 ], XmIcon);
+export { XmIcon };
 /* ─────────────────────────────────────────────────────────────
    <xm-spinner> — circular indeterminate spinner. Used by Button
    for the loading state. Mirrors Spinner({ size }) in the JSX:
@@ -116,6 +129,7 @@ __decorate([
 XmSpinner = __decorate([
     customElement("xm-spinner")
 ], XmSpinner);
+export { XmSpinner };
 const namedIcon = (tag, defaults, paths) => {
     class NamedIcon extends LightElement {
         constructor() {

package/dist/lit/components/sidebar-item/index.d.ts

@@ -1,7 +1,7 @@
 import { LitElement } from "lit";
 import type { TemplateResult } from "lit";
 type SidebarLayout = "row" | "stacked";
-declare class XmSidebarItem extends LitElement {
+export declare class XmSidebarItem extends LitElement {
     title: string;
     layout: SidebarLayout;
     active: boolean;

package/dist/lit/components/sidebar-item/index.js

@@ -26,6 +26,18 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
+if (typeof document !== "undefined") {
+    for (const href of [
+        new URL("../sidebar-item/index.css", import.meta.url).href,
+    ]) {
+        if (document.querySelector(`link[rel="stylesheet"][href="${href}"]`))
+            continue;
+        const link = document.createElement("link");
+        link.rel = "stylesheet";
+        link.href = href;
+        document.head.appendChild(link);
+    }
+}
 let XmSidebarItem = class XmSidebarItem extends LitElement {
     constructor() {
         super(...arguments);
@@ -103,3 +115,4 @@ __decorate([
 XmSidebarItem = __decorate([
     customElement("xm-sidebar-item")
 ], XmSidebarItem);
+export { XmSidebarItem };

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

@@ -10,7 +10,7 @@ export interface SnackPreset {
     secondaryLabel: string;
 }
 export declare const SNACK_PRESETS: Record<SnackKind, SnackPreset>;
-declare class XmSnackbar extends LitElement {
+export declare class XmSnackbar extends LitElement {
     kind: SnackKind;
     code: string;
     title: string;
@@ -30,4 +30,3 @@ declare global {
         "xm-snackbar": XmSnackbar;
     }
 }
-export {};

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

@@ -20,8 +20,8 @@
     snackbar-primary    — primary action clicked (Retry / Open settings)
     snackbar-dismiss    — secondary/dismiss action clicked
 
-  Light DOM. components/snackbar/index.css and components/primitives/index.css
-  must be loaded in the host page.
+  Light DOM. This module appends its stylesheets (snackbar + primitives) to
+  document.head on import.
 
   SNACK_PRESETS is also exported so previews can spread a preset onto
   the element via JS.
@@ -34,6 +34,19 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, html, svg, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
+if (typeof document !== "undefined") {
+    for (const href of [
+        new URL("../snackbar/index.css", import.meta.url).href,
+        new URL("../primitives/index.css", import.meta.url).href,
+    ]) {
+        if (document.querySelector(`link[rel="stylesheet"][href="${href}"]`))
+            continue;
+        const link = document.createElement("link");
+        link.rel = "stylesheet";
+        link.href = href;
+        document.head.appendChild(link);
+    }
+}
 export const SNACK_PRESETS = {
     auth: {
         kind: "auth",
@@ -193,3 +206,4 @@ __decorate([
 XmSnackbar = __decorate([
     customElement("xm-snackbar")
 ], XmSnackbar);
+export { XmSnackbar };

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

@@ -4,7 +4,7 @@ type StackDirection = "vertical" | "horizontal";
 type StackGap = "none" | "xs" | "sm" | "md" | "lg" | "xl";
 type StackAlign = "start" | "center" | "end" | "stretch";
 type StackJustify = "start" | "center" | "end" | "between";
-declare class XmStack extends LitElement {
+export declare class XmStack extends LitElement {
     direction: StackDirection;
     gap: StackGap;
     align: StackAlign;

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

@@ -101,3 +101,4 @@ __decorate([
 XmStack = __decorate([
     customElement("xm-stack")
 ], XmStack);
+export { XmStack };

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

@@ -8,7 +8,7 @@ export interface TableColumn {
     muted?: boolean;
 }
 export type TableRow = Record<string, string | number>;
-declare class XmTable extends LitElement {
+export declare class XmTable extends LitElement {
     columns: TableColumn[];
     rows: TableRow[];
     caption: string;
@@ -22,4 +22,3 @@ declare global {
         "xm-table": XmTable;
     }
 }
-export {};

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

@@ -2,10 +2,9 @@
   table/index.ts — <xm-table>.
 
   Static, semantic, hairline-ruled table. Renders a real <table> in
-  its shadow root. Two authoring modes:
+  its shadow root from a data-driven { columns, rows } model (the
+  shape xm-data-table composes in Epic 6):
 
-  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" },
@@ -16,10 +15,7 @@
          { 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.
+  Or set columns/rows as JSON via the `columns` / `rows` attributes.
 
   Column model: { key, label, numeric?, align?, muted? }.
     numeric  → right-align + tabular figures (NFR-22). Put the unit in
@@ -75,7 +71,6 @@ let XmTable = class XmTable extends LitElement {
         return Boolean(col.numeric);
     }
     render() {
-        const dataMode = this.columns.length > 0;
         return html `
       <link rel="stylesheet" href="${TABLE_CSS}" />
       <style>
@@ -86,7 +81,7 @@ let XmTable = class XmTable extends LitElement {
           display: none;
         }
       </style>
-      ${dataMode ? this._renderData() : html `<slot></slot>`}
+      ${this._renderData()}
     `;
     }
     _renderData() {
@@ -137,3 +132,4 @@ __decorate([
 XmTable = __decorate([
     customElement("xm-table")
 ], XmTable);
+export { XmTable };

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

@@ -4,20 +4,20 @@ type TabsSize = "xs" | "sm" | "md" | "lg";
 export interface TabsChangeDetail {
     value: string;
 }
-declare class XmTab extends LitElement {
+export declare class XmTab extends LitElement {
     value: string;
     disabled: boolean;
     createRenderRoot(): HTMLElement | DocumentFragment;
     connectedCallback(): void;
     render(): TemplateResult;
 }
-declare class XmTabPanel extends LitElement {
+export declare class XmTabPanel extends LitElement {
     value: string;
     createRenderRoot(): HTMLElement | DocumentFragment;
     connectedCallback(): void;
     render(): TemplateResult;
 }
-declare class XmTabs extends LitElement {
+export declare class XmTabs extends LitElement {
     value: string;
     size: TabsSize;
     private _list;