@xmesh/system-design 0.0.2 → 0.0.3

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/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() {

package/dist/lit/index.d.ts

@@ -18,6 +18,7 @@ export * from "./components/chip-group/index.js";
 export * from "./components/code/index.js";
 export * from "./components/composer/index.js";
 export * from "./components/data-table/index.js";
+export * from "./components/date-range/index.js";
 export * from "./components/dialog/index.js";
 export * from "./components/divider/index.js";
 export * from "./components/empty-state/index.js";
@@ -33,6 +34,7 @@ export * from "./components/menu/index.js";
 export * from "./components/navigation-drawer/index.js";
 export * from "./components/overlay/index.js";
 export * from "./components/pagination/index.js";
+export * from "./components/popover/index.js";
 export * from "./components/progress/index.js";
 export * from "./components/radio-group/index.js";
 export * from "./components/select/index.js";

package/dist/lit/index.js

@@ -27,6 +27,7 @@ export * from "./components/chip-group/index.js";
 export * from "./components/code/index.js";
 export * from "./components/composer/index.js";
 export * from "./components/data-table/index.js";
+export * from "./components/date-range/index.js";
 export * from "./components/dialog/index.js";
 export * from "./components/divider/index.js";
 export * from "./components/empty-state/index.js";
@@ -42,6 +43,7 @@ export * from "./components/menu/index.js";
 export * from "./components/navigation-drawer/index.js";
 export * from "./components/overlay/index.js";
 export * from "./components/pagination/index.js";
+export * from "./components/popover/index.js";
 export * from "./components/progress/index.js";
 export * from "./components/radio-group/index.js";
 export * from "./components/select/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xmesh/system-design",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "private": false,
   "publishConfig": {
     "access": "public"