@xmesh/system-design 0.0.1

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

@@ -0,0 +1,342 @@
+/* ============================================
+   <Button /> — shared chrome and variants
+
+   Pairs with components/button/index.jsx. Variants are BEM modifiers:
+     .btn--primary / .btn--secondary / .btn--outline / .btn--ghost
+     .btn--danger / .btn--ghost-accent / .btn--ghost-outline
+     .btn--ghost.btn--danger        ghost-danger compound (two orthogonal
+                                    modifiers; severity carried by icon
+                                    + label, not color).
+
+   Sizes are an orthogonal modifier:
+     .btn--xs   22px height, 11px text   (toolbar chrome on dark surfaces)
+     .btn--sm   26px height, 12px text
+     .btn--md   32px height, 13px text   (default)
+     .btn--lg   42px height, 14px text
+
+   Dark-surface variants (paired with the same neutral chrome but using the
+   canvas ink palette + canvas borders) — for buttons that sit on canvas,
+   sidebar, composer, or bubble surfaces:
+     .btn--outline-canvas        hairline border, transparent fill
+     .btn--ghost-canvas          borderless, soft hover fill
+     .btn--ghost-accent-canvas   accent-tinted ghost on dark
+
+   Forced-state helpers (.is-hover / .is-focus / .is-active) preview
+   pseudo-class visuals in design canvases without requiring real
+   keyboard/mouse focus.
+   ============================================ */
+
+/* ---------- Shared chrome ---------- */
+.btn {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--s-1-5);
+  font-family: var(--md-sys-typescale-label-large-font);
+  line-height: 1;
+  user-select: none;
+  white-space: nowrap;
+  cursor: pointer;
+  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),
+    border-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
+    box-shadow var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
+}
+.btn svg { flex-shrink: 0; }
+.btn:focus { outline: none; }
+.btn:focus-visible,
+.btn.is-focus {
+  outline: none;
+  box-shadow: var(--xm-state-focus-ring);
+}
+
+/* ---------- Sizes ---------- */
+.btn--xs { padding: 3px 7px;   font: 600 11px/1 var(--md-sys-typescale-label-large-font); border-radius: 5px; gap: var(--s-1); }
+.btn--sm { padding: 5px var(--s-2-5);  font: 600 12px/1 var(--md-sys-typescale-label-large-font); border-radius: 6px; }
+.btn--md { padding: 9px var(--s-3-5);  font: 600 13px/1 var(--md-sys-typescale-label-large-font); border-radius: var(--md-sys-shape-corner-button); }
+.btn--lg { padding: var(--s-3) var(--s-4-5); font: 600 14px/1 var(--md-sys-typescale-label-large-font); border-radius: var(--md-sys-shape-corner-button); }
+
+/* ---------- Variants ---------- */
+
+/* primary — accent fill, the workhorse CTA. Uses --xm-color-primary-fill
+   (a darker coral) rather than --md-sys-color-primary so white-on-fill
+   clears WCAG AA; the lighter primary role stays for accent text/border. */
+.btn--primary {
+  border: 1px solid var(--xm-color-primary-pressed);
+  background: var(--xm-color-primary-fill);
+  color: var(--md-sys-color-on-primary);
+  box-shadow: var(--md-sys-elevation-level0);
+}
+.btn--primary:hover,
+.btn--primary.is-hover { background: var(--xm-color-primary-pressed); }
+.btn--primary:active,
+.btn--primary.is-active { box-shadow: var(--xm-elevation-pressed); transform: translateY(1px); }
+
+/* secondary — solid neutral, used for non-destructive secondary CTAs */
+.btn--secondary {
+  border: 1px solid var(--md-sys-color-secondary);
+  background: var(--md-sys-color-secondary);
+  color: var(--md-sys-color-on-secondary);
+}
+.btn--secondary:hover,
+.btn--secondary.is-hover {
+  background: color-mix(in oklab, var(--md-sys-color-on-secondary) var(--md-sys-state-hover-state-layer-opacity), var(--md-sys-color-secondary));
+}
+
+/* outline — bordered card, used for cancel / pair-actions */
+.btn--outline {
+  border: 1px solid var(--md-sys-color-outline-variant);
+  background: var(--md-sys-color-inverse-surface);
+  color: var(--md-sys-color-inverse-on-surface);
+}
+.btn--outline:hover,
+.btn--outline.is-hover {
+  background: color-mix(in oklab, var(--md-sys-color-inverse-on-surface) var(--md-sys-state-hover-state-layer-opacity), var(--md-sys-color-inverse-surface));
+  border-color: var(--md-sys-color-outline);
+}
+.btn--outline:focus-visible,
+.btn--outline.is-focus { border-color: var(--md-sys-color-primary); }
+
+/* ghost — transparent, sits on the dark canvas (sidebar, top bar) */
+.btn--ghost {
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--md-sys-color-on-surface);
+}
+.btn--ghost:hover,
+.btn--ghost.is-hover {
+  background: color-mix(in oklab, var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity), transparent);
+  color: var(--md-sys-color-on-surface);
+}
+/* ghost selected — used by toggle/tab buttons. Persistent fill + hairline
+   to stand out next to inactive siblings in a segmented group. */
+.btn--ghost.is-active {
+  background: var(--md-sys-color-surface-container-lowest);
+  border-color: var(--md-sys-color-outline);
+  color: var(--md-sys-color-on-surface);
+}
+
+/* ghost-danger — neutral ghost; severity carried by trash/x icon + label.
+   Composes with .btn--ghost: <button class="btn btn--ghost btn--danger"> */
+.btn--ghost.btn--danger {
+  color: var(--md-sys-color-on-surface);
+  border-color: var(--md-sys-color-outline);
+}
+.btn--ghost.btn--danger:hover,
+.btn--ghost.btn--danger.is-hover {
+  background: var(--md-sys-color-surface-container-lowest);
+  color: var(--md-sys-color-on-surface);
+}
+
+/* ghost-outline — transparent fill + hairline border on card surfaces.
+   Sits between .btn--outline (filled card) and .btn--ghost (no chrome):
+   the rest border outlines the affordance without lifting it onto a new
+   surface. Used when a ghost needs a quiet anchor in busy layouts
+   (toolbars on cards, secondary actions next to a primary CTA). */
+.btn--ghost-outline {
+  border: 1px solid var(--md-sys-color-outline-variant);
+  background: transparent;
+  color: var(--md-sys-color-inverse-on-surface);
+}
+.btn--ghost-outline:hover,
+.btn--ghost-outline.is-hover {
+  background: color-mix(in oklab, var(--md-sys-color-inverse-on-surface) var(--md-sys-state-hover-state-layer-opacity), var(--md-sys-color-inverse-surface));
+  border-color: var(--md-sys-color-outline);
+}
+.btn--ghost-outline:focus-visible,
+.btn--ghost-outline.is-focus { border-color: var(--md-sys-color-primary); }
+
+/* ghost-accent — accent-tinted secondary, used by file pills etc. One tone,
+   not a stack — written as a single hyphenated modifier per BEM. The resting
+   fill is the accent wash over the card; since the card tier is theme-following
+   (ADR 0006) that wash is dark in dark theme, so the resting ink is the card's
+   inverse-on-surface (light there). On hover the fill becomes the full coral
+   primary-container, so the ink steps to on-primary-container (dark). */
+.btn--ghost-accent {
+  border-color: color-mix(in oklab, var(--md-sys-color-primary-container) 80%, transparent);
+  color: var(--md-sys-color-inverse-on-surface);
+  background: color-mix(in oklch, var(--md-sys-color-primary-container) 30%, var(--md-sys-color-inverse-surface));
+}
+.btn--ghost-accent:hover,
+.btn--ghost-accent.is-hover {
+  background: var(--md-sys-color-primary-container);
+  border-color: var(--md-sys-color-primary);
+  color: var(--md-sys-color-on-primary-container);
+}
+
+/* outline-canvas — hairline + transparent fill, canvas ink palette.
+   Used by artifact "Download" pills inside bubbles, and any outline action
+   that sits on canvas / composer / sidebar surfaces. */
+.btn--outline-canvas {
+  border: 1px solid color-mix(in oklab, var(--md-sys-color-on-surface) 32%, transparent);
+  background: transparent;
+  color: var(--md-sys-color-on-surface);
+}
+.btn--outline-canvas:hover,
+.btn--outline-canvas.is-hover {
+  background: color-mix(in oklab, var(--md-sys-color-on-surface) 10%, transparent);
+  border-color: var(--xm-color-on-surface-soft);
+}
+.btn--outline-canvas:focus-visible,
+.btn--outline-canvas.is-focus { border-color: var(--md-sys-color-primary); }
+
+/* ghost-canvas — borderless toolbar chrome on dark surfaces. Mirrors
+   .btn--ghost but uses the canvas ink palette and the composer/canvas
+   hover fill so it works consistently across composer, bubble actions,
+   and chat hover toolbars. */
+.btn--ghost-canvas {
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--md-sys-color-on-surface);
+}
+.btn--ghost-canvas:hover,
+.btn--ghost-canvas.is-hover {
+  background: color-mix(in oklab, var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity), transparent);
+  color: var(--md-sys-color-on-surface);
+}
+.btn--ghost-canvas.is-active {
+  background: var(--md-sys-color-surface-container-lowest);
+  border-color: var(--md-sys-color-outline);
+  color: var(--md-sys-color-on-surface);
+}
+
+/* ghost-accent-canvas — accent-tinted ghost on dark surfaces. */
+.btn--ghost-accent-canvas {
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--md-sys-color-primary);
+}
+.btn--ghost-accent-canvas:hover,
+.btn--ghost-accent-canvas.is-hover {
+  background: color-mix(in oklab, var(--md-sys-color-primary) 14%, transparent);
+  color: var(--xm-color-primary-pressed);
+}
+
+/* danger — neutral solid; destructive intent expressed by trash icon + label.
+   Rides the surface family (surface-container-high), so the ink is on-surface
+   (rule 7a). Hover darkens within the surface ramp rather than jumping to the
+   card tier, keeping the ink anchored to one surface family. */
+.btn--danger {
+  border: 1px solid var(--md-sys-color-outline);
+  background: var(--md-sys-color-surface-container-high);
+  color: var(--md-sys-color-on-surface);
+}
+.btn--danger:hover,
+.btn--danger.is-hover {
+  background: var(--md-sys-color-surface-container-highest);
+  border-color: var(--md-sys-color-on-surface);
+}
+.btn--danger:focus-visible,
+.btn--danger.is-focus {
+  box-shadow: var(--xm-state-focus-ring);
+}
+
+/* ---------- Icon-only ---------- */
+/* Square chip variant. Composes with any tone: pass an iconLeft and
+   no children, or use .btn__icon directly. Sizes are square. */
+.btn--icon-only {
+  padding: 0;
+  gap: 0;
+}
+.btn--icon-only.btn--xs { width: 22px; height: 22px; }
+.btn--icon-only.btn--sm { width: 28px; height: 28px; }
+.btn--icon-only.btn--md { width: 32px; height: 32px; }
+.btn--icon-only.btn--lg { width: 38px; height: 38px; }
+
+/* ---------- Full-width ---------- */
+/* Stretches the button to fill its container. The label hugs the leading
+   edge (next to icon-left) and `margin-inline-end: auto` pushes any
+   icon-right slot (e.g. a kbd hint) to the trailing edge. */
+.btn--full-width {
+  width: 100%;
+}
+.btn--full-width .btn__label {
+  margin-inline-end: auto;
+  text-align: start;
+}
+
+/* ---------- Disabled / loading ----------
+   No blanket opacity: dimming the whole control fades ink AND surface
+   together and drops the label below WCAG AA (POLICIES 7a). Instead each
+   variant swaps to a validated disabled ink (filled variants also flatten
+   to the disabled container) so the label stays legible. */
+.btn[disabled],
+.btn[aria-busy="true"],
+.btn.is-disabled {
+  cursor: not-allowed;
+  box-shadow: none;
+}
+/* filled variants — flatten fill to the disabled container + muted ink */
+.btn--primary[disabled],   .btn--primary.is-disabled,
+.btn--secondary[disabled], .btn--secondary.is-disabled,
+.btn--danger[disabled],    .btn--danger.is-disabled {
+  background: var(--xm-state-disabled-container);
+  border-color: var(--md-sys-color-outline-variant);
+  color: var(--xm-color-on-surface-disabled);
+}
+/* surface-ink variants (ghost / outline-canvas / ghost-canvas on the canvas) */
+.btn--ghost[disabled],         .btn--ghost.is-disabled,
+.btn--ghost-canvas[disabled],  .btn--ghost-canvas.is-disabled,
+.btn--ghost-accent-canvas[disabled], .btn--ghost-accent-canvas.is-disabled,
+.btn--outline-canvas[disabled], .btn--outline-canvas.is-disabled {
+  color: var(--xm-color-on-surface-disabled);
+}
+/* card-ink variants (outline / ghost-outline / ghost-accent on the card tier) */
+.btn--outline[disabled],       .btn--outline.is-disabled,
+.btn--ghost-outline[disabled], .btn--ghost-outline.is-disabled,
+.btn--ghost-accent[disabled],  .btn--ghost-accent.is-disabled {
+  color: var(--xm-color-inverse-on-surface-disabled);
+}
+.btn[disabled]:hover,
+.btn[aria-busy="true"]:hover,
+.btn.is-disabled:hover {
+  filter: none;
+  transform: none;
+}
+/* Disabled :hover is a no-op — hold the disabled fill/ink set above so
+   hovering a disabled control doesn't restore the enabled (and contrast-
+   failing) appearance. */
+.btn--primary[disabled]:hover,   .btn--primary.is-disabled:hover,
+.btn--secondary[disabled]:hover, .btn--secondary.is-disabled:hover,
+.btn--danger[disabled]:hover,    .btn--danger.is-disabled:hover {
+  background: var(--xm-state-disabled-container);
+  border-color: var(--md-sys-color-outline-variant);
+  color: var(--xm-color-on-surface-disabled);
+}
+.btn--ghost[disabled]:hover,         .btn--ghost.is-disabled:hover,
+.btn--ghost-canvas[disabled]:hover,  .btn--ghost-canvas.is-disabled:hover,
+.btn--outline-canvas[disabled]:hover, .btn--outline-canvas.is-disabled:hover,
+.btn--ghost-accent-canvas[disabled]:hover, .btn--ghost-accent-canvas.is-disabled:hover {
+  background: transparent;
+  color: var(--xm-color-on-surface-disabled);
+}
+.btn--outline[disabled]:hover,       .btn--outline.is-disabled:hover,
+.btn--ghost-outline[disabled]:hover, .btn--ghost-outline.is-disabled:hover,
+.btn--ghost-accent[disabled]:hover,  .btn--ghost-accent.is-disabled:hover {
+  background: var(--md-sys-color-inverse-surface);
+  border-color: var(--md-sys-color-outline-variant);
+  color: var(--xm-color-inverse-on-surface-disabled);
+}
+
+/* ---------- Inner slots ---------- */
+.btn__icon { display: inline-flex; align-items: center; }
+.btn__label { display: inline-block; }
+
+/* ---------- Loading spinner ---------- */
+.btn__spinner {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border: 1.6px solid currentColor;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: btn-spin 0.7s linear infinite;
+  flex-shrink: 0;
+  opacity: 0.85;
+}
+@keyframes btn-spin {
+  to { transform: rotate(360deg); }
+}

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

@@ -0,0 +1,32 @@
+import { LitElement } from "lit";
+import type { TemplateResult } from "lit";
+type ButtonVariant = "primary" | "secondary" | "outline" | "ghost" | "ghost-accent" | "ghost-outline" | "outline-canvas" | "ghost-canvas" | "ghost-accent-canvas";
+type ButtonSize = "xs" | "sm" | "md" | "lg";
+type ButtonType = "button" | "submit" | "reset";
+type ForceState = "hover" | "active" | "focus" | null;
+declare class XmButton extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    variant: ButtonVariant;
+    size: ButtonSize;
+    iconOnly: boolean;
+    fullWidth: boolean;
+    /** Persistent active/selected state — used by toggle/tab buttons. Reuses
+        the same .is-active visual the design canvases trigger via forceState. */
+    selected: boolean;
+    type: ButtonType;
+    disabled: boolean;
+    loading: boolean;
+    forceState: ForceState;
+    private _mo;
+    render(): TemplateResult;
+    private _slotEmpty;
+    private _onSlot;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "xm-button": XmButton;
+    }
+}
+export {};

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

@@ -0,0 +1,202 @@
+/*
+  button/index.ts — Lit port of components/button/index.jsx.
+
+  <xm-button> — unified button primitive for the chat surface.
+
+  Authoring:
+    <xm-button variant="primary" size="md">
+      <svg slot="icon-left">…</svg>
+      Send message
+      <svg slot="icon-right">…</svg>
+    </xm-button>
+
+  This component uses **shadow DOM** because Lit's <slot> projection
+  only works there. The existing components/button/index.css is loaded
+  inside the shadow root via <link>, which gives identical visuals to
+  the React version while allowing native slot composition. The design
+  tokens (--c-*, --t-*, --r-*, --e-*, --m-*) cascade through the shadow
+  boundary as inherited CSS custom properties, so theme switching keeps
+  working without any extra wiring.
+
+  Properties:
+    variant       primary | secondary | outline | ghost | ghost-accent
+                  | ghost-outline | outline-canvas | ghost-canvas
+                  | ghost-accent-canvas
+    size          xs | sm | md | lg                         (default md)
+    iconOnly      boolean — square chip; only the default slot is shown
+    type          button | submit | reset
+    disabled      boolean
+    loading       boolean — disables and swaps content for a spinner
+    forceState    null | hover | active | focus — preview pseudo-classes
+*/
+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 VARIANT_CLASS = {
+    primary: "btn--primary",
+    secondary: "btn--secondary",
+    outline: "btn--outline",
+    ghost: "btn--ghost",
+    "ghost-accent": "btn--ghost-accent",
+    "ghost-outline": "btn--ghost-outline",
+    "outline-canvas": "btn--outline-canvas",
+    "ghost-canvas": "btn--ghost-canvas",
+    "ghost-accent-canvas": "btn--ghost-accent-canvas",
+};
+// Resolve CSS path relative to this module so the previews can sit at
+// any depth without the component caring (e.g. lit/preview/buttons.html
+// → ../components/button/index.css).
+//
+// Paths are computed from the *built* file location:
+// `lit/build/components/button/index.js` — 3 levels of `..` to reach
+// `lit/`, then into `components/`. The .ts source under
+// `lit/components/button/` is never loaded by the browser; only the
+// tsc-emitted .js is.
+const BTN_CSS = new URL("../button/index.css", import.meta.url).href;
+const PRIMITIVES_CSS = new URL("../primitives/index.css", import.meta.url).href;
+let XmButton = class XmButton extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.variant = "primary";
+        this.size = "md";
+        this.iconOnly = false;
+        this.fullWidth = false;
+        /** Persistent active/selected state — used by toggle/tab buttons. Reuses
+            the same .is-active visual the design canvases trigger via forceState. */
+        this.selected = false;
+        this.type = "button";
+        this.disabled = false;
+        this.loading = false;
+        this.forceState = null;
+        this._mo = null;
+        this._onSlot = () => {
+            this.requestUpdate();
+        };
+    }
+    // Forward focus to the inner native <button>. Required for Enter/Space
+    // to fire a click when the host is focused via tabindex (used by toggle
+    // and tab buttons that receive focus on the host element).
+    static { this.shadowRootOptions = {
+        ...LitElement.shadowRootOptions,
+        delegatesFocus: true,
+    }; }
+    render() {
+        const variantClass = VARIANT_CLASS[this.variant] ?? VARIANT_CLASS.primary;
+        const sizeClass = `btn--${this.size}`;
+        const iconOnlyClass = this.iconOnly ? "btn--icon-only" : "";
+        const fullWidthClass = this.fullWidth ? "btn--full-width" : "";
+        const stateClass = this.selected ? "is-active" :
+            this.forceState === "hover" ? "is-hover" :
+                this.forceState === "active" ? "is-active" :
+                    this.forceState === "focus" ? "is-focus" : "";
+        const cls = `btn ${variantClass} ${sizeClass} ${iconOnlyClass} ${fullWidthClass} ${stateClass}`
+            .replace(/\s+/g, " ")
+            .trim();
+        const isDisabled = this.disabled || this.loading;
+        let body;
+        if (this.loading) {
+            body = html `<span class="ds-spinner btn__spinner"
+                        role="status" aria-label="Loading"
+                        style="width:14px;height:14px"></span>`;
+        }
+        else if (this.iconOnly) {
+            body = html `<slot></slot>`;
+        }
+        else {
+            body = html `
+        <span class="btn__icon btn__icon--left ${this._slotEmpty("icon-left") ? "is-empty" : ""}"
+              ><slot name="icon-left" @slotchange=${this._onSlot}></slot></span>
+        <span class="btn__label ${this._slotEmpty(null) ? "is-empty" : ""}"
+              ><slot @slotchange=${this._onSlot}></slot></span>
+        <span class="btn__icon btn__icon--right ${this._slotEmpty("icon-right") ? "is-empty" : ""}"
+              ><slot name="icon-right" @slotchange=${this._onSlot}></slot></span>
+      `;
+        }
+        return html `
+      <link rel="stylesheet" href="${PRIMITIVES_CSS}">
+      <link rel="stylesheet" href="${BTN_CSS}">
+      <style>
+        :host { display: inline-block; }
+        :host([full-width]) { display: block; }
+        :host([hidden]) { display: none; }
+        /* Hide empty slot wrappers so the .btn flexbox gap doesn't leave
+           phantom space when iconLeft/iconRight isn't authored. Mirrors
+           the JSX which simply doesn't render those <span>s. */
+        .btn__icon.is-empty,
+        .btn__label.is-empty { display: none; }
+      </style>
+      <button
+        type="${this.type}"
+        ?disabled=${isDisabled}
+        aria-busy=${this.loading ? "true" : nothing}
+        class="${cls}"
+      >
+        ${body}
+      </button>
+    `;
+    }
+    _slotEmpty(name) {
+        // Read directly from light-DOM children (the authored content).
+        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 })
+], XmButton.prototype, "variant", void 0);
+__decorate([
+    property({ type: String })
+], XmButton.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "icon-only" })
+], XmButton.prototype, "iconOnly", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "full-width" })
+], XmButton.prototype, "fullWidth", void 0);
+__decorate([
+    property({ type: Boolean })
+], XmButton.prototype, "selected", void 0);
+__decorate([
+    property({ type: String })
+], XmButton.prototype, "type", void 0);
+__decorate([
+    property({ type: Boolean })
+], XmButton.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], XmButton.prototype, "loading", void 0);
+__decorate([
+    property({ type: String, attribute: "force-state" })
+], XmButton.prototype, "forceState", void 0);
+XmButton = __decorate([
+    customElement("xm-button")
+], XmButton);

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

@@ -0,0 +1,99 @@
+/* ============================================
+   <xm-card> — general-purpose containment surface.
+
+   Surface / ink (AD-13; ADR 0006): the CARD-STACK family — background
+   var(--md-sys-color-inverse-surface), ink var(--md-sys-color-inverse-on-surface).
+   The card tier is theme-following: a lifted dark surface in dark theme, white
+   in light; the ink follows (light on the dark card, dark on the white one).
+
+   Spec (DESIGN components.card): 1px outline-variant border, 14px medium
+   corner, level2 elevation (1px brightening top edge + soft 24px drop).
+   Header / footer split from the body by a 1px rule — not padding alone.
+   Header padding 22px 24px 14px; footer 14px 24px 18px.
+
+   BEM: block `card`; elements `__header` `__body` `__footer`
+   `__footer-content` `__action`; modifiers `--elevation-0..5`, `--xs|sm|md|lg`.
+   ============================================ */
+
+.card {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  background: var(--md-sys-color-inverse-surface);
+  color: var(--md-sys-color-inverse-on-surface);
+  border: 1px solid var(--md-sys-color-outline-variant);
+  border-radius: var(--md-sys-shape-corner-medium);
+  box-shadow: var(--md-sys-elevation-level2);
+  overflow: hidden;
+}
+
+/* ---------- Elevation ---------- */
+.card--elevation-0 { box-shadow: var(--md-sys-elevation-level0); }
+.card--elevation-1 { box-shadow: var(--md-sys-elevation-level1); }
+.card--elevation-2 { box-shadow: var(--md-sys-elevation-level2); }
+.card--elevation-3 { box-shadow: var(--md-sys-elevation-level3); }
+.card--elevation-4 { box-shadow: var(--md-sys-elevation-level4); }
+.card--elevation-5 { box-shadow: var(--md-sys-elevation-level5); }
+
+/* ---------- Header ---------- */
+.card__header {
+  display: flex;
+  align-items: center;
+  gap: var(--s-2);
+  padding: var(--s-5) var(--s-6) var(--s-3);
+  border-bottom: 1px solid var(--md-sys-color-outline-variant);
+  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-inverse-on-surface);
+}
+.card__header.is-empty {
+  display: none;
+}
+
+/* ---------- Body ---------- */
+.card__body {
+  flex: 1 1 auto;
+  padding: var(--s-5) var(--s-6);
+  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);
+  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
+  color: var(--md-sys-color-inverse-on-surface);
+}
+
+/* ---------- Footer ---------- */
+.card__footer {
+  display: flex;
+  align-items: center;
+  gap: var(--s-3);
+  padding: var(--s-3) var(--s-6) var(--s-4);
+  border-top: 1px solid var(--md-sys-color-outline-variant);
+}
+.card__footer.is-empty {
+  display: none;
+}
+.card__footer-content {
+  flex: 1 1 auto;
+  min-width: 0;
+  font-size: var(--md-sys-typescale-body-small-size);
+  line-height: var(--md-sys-typescale-body-small-line-height);
+  color: var(--xm-color-inverse-on-surface-muted);
+}
+.card__footer-content.is-empty {
+  display: none;
+}
+
+/* ---------- Action (singular trailing region in the footer) ---------- */
+.card__action {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-2);
+  flex-shrink: 0;
+  margin-inline-start: auto;
+}
+.card__action.is-empty {
+  display: none;
+}