@xmesh/system-design 0.0.4 → 0.0.6

package/dist/lit/components/empty-state/index.styles.js

@@ -0,0 +1,83 @@
+// GENERATED by scripts/gen-styles.mjs — do not edit. Source: lit/components/empty-state/index.css
+// SSR-safe: constructable stylesheets need the DOM, so in a non-DOM context
+// (Node/SSR import) this exports [] instead of throwing. The CSS self-declares
+// the @layer order so the override contract holds even without ./base (AD-2).
+let sheets = [];
+if (typeof CSSStyleSheet !== "undefined") {
+  const sheet = new CSSStyleSheet();
+  sheet.replaceSync(`@layer reset, base, tokens, components, utilities;
+@layer components {
+/* ============================================
+   Empty state — the shared no-data placeholder.
+
+   A centered, stacked column: line icon · sentence-case headline ·
+   secondary copy · optional action. The component is TRANSPARENT and
+   traces its host surface (AD-13): every ink derives from the inherited
+   \`color\` (the host's on-* ink), never a hard-pinned surface token — so
+   it pairs correctly whether it sits on the desk (\`surface*\` → on-surface)
+   or on a card (\`inverse-surface\` → inverse-on-surface), in both themes.
+
+   No imagery, no illustration, no emoji, no gradient — the only graphic
+   is the Lucide-style line icon (currentColor, no fill).
+
+   BEM block: \`empty-state\`. Registered in scripts/check-bem.sh STRICT_BLOCKS.
+   ============================================ */
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  gap: var(--s-2);
+  padding: var(--s-8) var(--s-6);
+  /* Trace the host: inherit the on-* ink the host already set on the
+     surface this empty-state sits on. No surface fill of its own. */
+  color: inherit;
+}
+
+.empty-state__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: var(--s-1);
+  /* Icon reads as a quiet marker — softened from the host ink via the
+     inherited currentColor, not a hard-pinned token. */
+  color: color-mix(in oklab, currentColor 64%, transparent);
+}
+
+.empty-state__heading {
+  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: currentColor;
+  text-wrap: balance;
+}
+.empty-state__heading.is-empty { display: none; }
+
+.empty-state__text {
+  max-width: 44ch;
+  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);
+  /* Soft tier — derived from the host ink so it works on either surface
+     family. (on-surface-variant / inverse muted both read as ~70% ink.) */
+  color: color-mix(in oklab, currentColor 70%, transparent);
+  text-wrap: pretty;
+}
+.empty-state__text.is-empty { display: none; }
+
+.empty-state__action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: var(--s-3);
+}
+.empty-state__action.is-empty { display: none; }
+
+}`);
+  sheets = [sheet];
+}
+export default sheets;

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

@@ -1,6 +1,11 @@
 import { LitElement } from "lit";
 import type { TemplateResult } from "lit";
+/**
+ * @fires change - Fired on commit with the new value in `detail`.
+ * @fires xm-expansion-panel-open - Coordination event (on document) so sibling panels close in single-open mode.
+ */
 export declare class XmExpansionPanel extends LitElement {
+    static styles: CSSStyleSheet[];
     open: boolean;
     heading: string;
     disabled: boolean;

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

@@ -41,9 +41,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
-const PANEL_CSS = new URL("../expansion-panel/index.css", import.meta.url).href;
+import expansionPanelSheets from "./index.styles.js";
 const COORDINATION_EVENT = "xm-expansion-panel-open";
 let panelInstance = 0;
+/**
+ * @fires change - Fired on commit with the new value in `detail`.
+ * @fires xm-expansion-panel-open - Coordination event (on document) so sibling panels close in single-open mode.
+ */
 let XmExpansionPanel = class XmExpansionPanel extends LitElement {
     constructor() {
         super(...arguments);
@@ -66,6 +70,9 @@ let XmExpansionPanel = class XmExpansionPanel extends LitElement {
             this._toggle();
         };
     }
+    // Adopted from the build-generated sheets (scripts/gen-styles.mjs) — no
+    // runtime URL fetch (ADR 0012). Cascade order preserved from the old <link>s.
+    static { this.styles = [...expansionPanelSheets]; }
     connectedCallback() {
         super.connectedCallback();
         // Single-open coordination: listen on the document for sibling opens of
@@ -102,7 +109,6 @@ let XmExpansionPanel = class XmExpansionPanel extends LitElement {
         const headerId = `${this._uid}-header`;
         const bodyId = `${this._uid}-body`;
         return html `
-      <link rel="stylesheet" href="${PANEL_CSS}" />
       <style>
         :host {
           display: block;

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

@@ -0,0 +1,134 @@
+// GENERATED by scripts/gen-styles.mjs — do not edit. Source: lit/components/expansion-panel/index.css
+// SSR-safe: constructable stylesheets need the DOM, so in a non-DOM context
+// (Node/SSR import) this exports [] instead of throwing. The CSS self-declares
+// the @layer order so the override contract holds even without ./base (AD-2).
+let sheets = [];
+if (typeof CSSStyleSheet !== "undefined") {
+  const sheet = new CSSStyleSheet();
+  sheet.replaceSync(`@layer reset, base, tokens, components, utilities;
+@layer components {
+/* ============================================
+   Expansion panel — collapsible disclosure with a rotating chevron.
+
+   <xm-expansion-panel> is a framed disclosure: a header button +
+   a collapsible body. The chevron rotates short4 / standard easing
+   on toggle (no spring, bounce, or scale-in; NFR-19).
+
+   Sits on one surface family (AD-13): surface-container-low frame,
+   ink --md-sys-color-on-surface, hairline 1px outline-variant
+   separators. No severity hue (AD-11). The chevron inherits ink via
+   currentColor.
+   ============================================ */
+
+.expansion-panel {
+  display: block;
+  border: 1px solid var(--md-sys-color-outline-variant);
+  border-radius: var(--md-sys-shape-corner-medium);
+  background: var(--md-sys-color-surface-container-low);
+  color: var(--md-sys-color-on-surface);
+  overflow: hidden;
+}
+
+.expansion-panel__header {
+  appearance: none;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: var(--s-3);
+  box-sizing: border-box;
+  padding: var(--s-3) var(--s-4);
+  border: none;
+  background: transparent;
+  color: var(--md-sys-color-on-surface);
+  text-align: start;
+  cursor: pointer;
+  font-family: var(--md-sys-typescale-title-small-font);
+  font-size: var(--md-sys-typescale-title-small-size);
+  font-weight: 500;
+  line-height: 1.3;
+  transition: background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
+}
+.expansion-panel__header:hover {
+  background: color-mix(in oklab, var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity), transparent);
+}
+.expansion-panel__header:focus { outline: none; }
+/* Inset focus ring so the accent halo stays inside the frame's rounded clip
+   rather than being cut off by overflow: hidden. Same 3px weight + coral
+   primary-container as --xm-state-focus-ring, just drawn inset. */
+.expansion-panel__header:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 3px var(--md-sys-color-primary-container);
+}
+
+.expansion-panel__heading {
+  flex: 1;
+  min-width: 0;
+}
+
+.expansion-panel__chevron {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--md-sys-color-on-surface-variant);
+  transition: transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
+}
+.expansion-panel--open .expansion-panel__chevron {
+  transform: rotate(180deg);
+}
+
+/* Body — hidden when collapsed. A hairline separates it from the header
+   only while open. */
+/* Animated reveal: the body is a 1-row grid that transitions 1fr→0fr; the inner
+   wrapper has min-height:0 + overflow:hidden so the auto-height content can be
+   clipped to zero. This animates a content-sized body (which a plain
+   height/max-height can't) with short4 standard easing — no spring/scale. */
+.expansion-panel__body {
+  display: grid;
+  grid-template-rows: 1fr;
+  border-top: 1px solid var(--md-sys-color-outline-variant);
+  color: var(--md-sys-color-on-surface-variant);
+  font-family: var(--md-sys-typescale-body-large-font);
+  font-size: var(--md-sys-typescale-body-large-size);
+  line-height: var(--md-sys-typescale-body-large-line-height);
+  transition:
+    grid-template-rows var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
+    border-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
+}
+.expansion-panel__body-inner {
+  min-height: 0;
+  overflow: hidden;
+  padding: var(--s-3) var(--s-4) var(--s-4);
+}
+.expansion-panel__body.is-collapsed {
+  grid-template-rows: 0fr;
+  border-top-color: transparent;
+}
+.expansion-panel__body.is-collapsed .expansion-panel__body-inner {
+  /* Drop the vertical padding while collapsed so it doesn't hold the row open. */
+  padding-block: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .expansion-panel__body {
+    transition: none;
+  }
+}
+
+/* Disabled — shared reduced emphasis, non-interactive. The chevron carries its
+   own color, so mute it too or it stays at full emphasis on a disabled panel. */
+.expansion-panel--disabled .expansion-panel__header {
+  cursor: not-allowed;
+  color: var(--xm-color-on-surface-disabled);
+}
+.expansion-panel--disabled .expansion-panel__chevron {
+  color: var(--xm-color-on-surface-disabled);
+}
+.expansion-panel--disabled .expansion-panel__header:hover {
+  background: transparent;
+}
+
+}`);
+  sheets = [sheet];
+}
+export default sheets;

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

@@ -14,8 +14,12 @@ export interface FieldControlAria {
  *
  * Subclasses register with `@customElement("xm-<name>")`; XmField itself is
  * never registered (it is not a usable element on its own).
+ *
+ * @fires input - Fired on each edit with the current value in `detail` (inherited by every field).
+ * @fires change - Fired on commit with the new value in `detail` (inherited by every field).
  */
 export declare abstract class XmField extends LitElement {
+    static styles: CSSStyleSheet[];
     static formAssociated: boolean;
     static shadowRootOptions: ShadowRootInit;
     label: string;

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

@@ -47,18 +47,25 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, html, nothing } from "lit";
 import { property, state } from "lit/decorators.js";
+import primitivesSheets from "../primitives/index.styles.js";
+import fieldSheets from "./index.styles.js";
 // Resolve CSS relative to the *built* file:
 // lit/build/components/field/index.js → ../field/index.css.
-const FIELD_CSS = new URL("../field/index.css", import.meta.url).href;
-const PRIMITIVES_CSS = new URL("../primitives/index.css", import.meta.url).href;
 let fieldIdSeq = 0;
 /**
  * Abstract chrome + lifecycle base for every xmesh form field.
  *
  * Subclasses register with `@customElement("xm-<name>")`; XmField itself is
  * never registered (it is not a usable element on its own).
+ *
+ * @fires input - Fired on each edit with the current value in `detail` (inherited by every field).
+ * @fires change - Fired on commit with the new value in `detail` (inherited by every field).
  */
 export class XmField extends LitElement {
+    // Adopted from build-generated sheets (gen-styles.mjs) — no runtime URL
+    // fetch (ADR 0012). Lit static styles don't merge on override, so subclasses
+    // re-include the chrome (primitives + field) sheets.
+    static { this.styles = [...primitivesSheets, ...fieldSheets]; }
     // The contract xm-form (AD-6a / AD-12) reads against: a real form-associated
     // custom element. Subclasses inherit this automatically.
     static { this.formAssociated = true; }
@@ -276,8 +283,6 @@ export class XmField extends LitElement {
         const helperText = this.isError ? this.error : this.helper;
         const ctrl = this.controlAria;
         return html `
-      <link rel="stylesheet" href="${PRIMITIVES_CSS}" />
-      <link rel="stylesheet" href="${FIELD_CSS}" />
       <style>
         :host {
           display: block;

package/dist/lit/components/field/index.styles.js

@@ -0,0 +1,237 @@
+// GENERATED by scripts/gen-styles.mjs — do not edit. Source: lit/components/field/index.css
+// SSR-safe: constructable stylesheets need the DOM, so in a non-DOM context
+// (Node/SSR import) this exports [] instead of throwing. The CSS self-declares
+// the @layer order so the override contract holds even without ./base (AD-2).
+let sheets = [];
+if (typeof CSSStyleSheet !== "undefined") {
+  const sheet = new CSSStyleSheet();
+  sheet.replaceSync(`@layer reset, base, tokens, components, utilities;
+@layer components {
+/* ============================================
+   XmField — abstract form-field chrome.
+
+   The base renders label / control wrapper / helper-or-error row; the
+   subclass drops only its concrete control into the control wrapper
+   (AD-7). One shared control height per \`size\` so a field lines up beside
+   a button of the same size (NFR-22). Surface is the card tier
+   (inverse-surface) with inverse-on-surface ink (AD-13). Severity is the
+   error icon + copy in the message row — never an error color, never a red
+   field (AD-11 / rule 3a).
+
+   Sizes mirror the button height ramp so fields snap to buttons:
+     .field--xs   22px control
+     .field--sm   26px control
+     .field--md   32px control   (default)
+     .field--lg   42px control
+
+   BEM block: \`field\`. Registered in scripts/check-bem.sh STRICT_BLOCKS.
+   ============================================ */
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-2);
+  width: 100%;
+}
+
+/* ---------- Label row ---------- */
+.field__label {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-1);
+  color: var(--md-sys-color-inverse-on-surface);
+  font:
+    var(--md-sys-typescale-label-large-weight)
+    var(--md-sys-typescale-label-large-size) /
+    var(--md-sys-typescale-label-large-line-height)
+    var(--md-sys-typescale-label-large-font);
+  cursor: default;
+}
+.field__label-text {
+  letter-spacing: 0;
+}
+.field__required {
+  color: var(--md-sys-color-primary);
+  font-weight: 700;
+  line-height: 1;
+}
+
+/* ---------- Control wrapper ----------
+   The wrapper carries the shared chrome: surface, border, radius, height,
+   focus ring. The concrete control (slotted or shadow-rendered by the
+   subclass) sits inside and inherits ink + type. */
+.field__control {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid var(--md-sys-color-outline-variant);
+  border-radius: var(--md-sys-shape-corner-button);
+  background: var(--md-sys-color-inverse-surface);
+  color: var(--md-sys-color-inverse-on-surface);
+  font:
+    var(--md-sys-typescale-body-large-weight)
+    var(--md-sys-typescale-body-large-size) /
+    var(--md-sys-typescale-body-large-line-height)
+    var(--md-sys-typescale-body-large-font);
+  transition:
+    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),
+    background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
+}
+.field__control:hover {
+  border-color: var(--md-sys-color-outline);
+}
+
+/* Focus — ring is the canonical visualization; outline suppressed. The wrapper
+   reacts to KEYBOARD focus of the inner control via :has(:focus-visible) so the
+   coral ring shows on tab-in but not on a plain pointer click (matches the
+   :focus-visible intent in the spec while still reacting to the slotted/native
+   control nested inside the wrapper). */
+.field__control:has(:focus-visible) {
+  outline: none;
+  border-color: var(--md-sys-color-primary);
+  box-shadow: var(--xm-state-focus-ring);
+}
+
+/* Style whatever native control a subclass slots OR shadow-renders so the
+   chrome owns the box and the control is a transparent, borderless,
+   full-bleed inner. Two selector sets are required: ::slotted() matches a
+   light-DOM \`slot="control"\` child; the scoped descendant set matches a
+   control a subclass renders into shadow DOM via renderControl(). Without
+   the descendant set a UA-default input fill shows through (a dark box on
+   the light card surface) — the surface/ink foot-gun. */
+.field__control ::slotted(input),
+.field__control ::slotted(textarea),
+.field__control ::slotted(select),
+.field__control input,
+.field__control textarea,
+.field__control select {
+  flex: 1;
+  min-width: 0;
+  width: 100%;
+  appearance: none;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  padding: 0 var(--s-3);
+  height: 100%;
+  box-sizing: border-box;
+}
+.field__control ::slotted(input)::placeholder,
+.field__control ::slotted(textarea)::placeholder,
+.field__control input::placeholder,
+.field__control textarea::placeholder {
+  color: var(--xm-color-inverse-on-surface-muted);
+}
+
+/* ---------- Sizes — shared control height ---------- */
+.field--xs .field__control { min-height: 22px; }
+.field--sm .field__control { min-height: 26px; }
+.field--md .field__control { min-height: 32px; }
+.field--lg .field__control { min-height: 42px; }
+
+.field--xs .field__control ::slotted(input),
+.field--xs .field__control ::slotted(select) { padding: 0 var(--s-2); }
+
+/* ---------- Loading ----------
+   The control region is swapped for the spinner; the wrapper keeps its box
+   so the field height does not jump (AD-9a). */
+.field__loading {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  height: 100%;
+  padding: 0 var(--s-3);
+  color: var(--xm-color-inverse-on-surface-muted);
+}
+.field--loading .field__control {
+  cursor: progress;
+}
+
+/* ---------- Disabled ----------
+   Shared reduced emphasis, cursor, reverted hover; never an error color. */
+.field--disabled {
+  cursor: not-allowed;
+}
+/* No opacity on the control: it would dim the VALUE text (which inherits
+   .field__control's color) below AA. Swap the ink to the disabled token so
+   the value stays legible; the box is muted by its border + container. */
+.field--disabled .field__control {
+  cursor: not-allowed;
+  color: var(--xm-color-inverse-on-surface-disabled);
+  box-shadow: none;
+}
+.field--disabled .field__control:hover {
+  border-color: var(--md-sys-color-outline-variant);
+}
+.field--disabled .field__control ::slotted(input)::placeholder,
+.field--disabled .field__control ::slotted(textarea)::placeholder,
+.field--disabled .field__control input::placeholder,
+.field--disabled .field__control textarea::placeholder {
+  color: var(--xm-color-inverse-on-surface-disabled);
+}
+.field--disabled .field__label {
+  color: var(--xm-color-inverse-on-surface-disabled);
+}
+
+/* ---------- Readonly ----------
+   Value visible but not editable; still focusable. Stays on the card
+   (inverse-surface) family — a faint inverse-on-surface wash over the same
+   surface reads as inert without swapping in the desk surface family. */
+.field--readonly .field__control {
+  background: color-mix(
+    in oklab,
+    var(--md-sys-color-inverse-on-surface) 5%,
+    var(--md-sys-color-inverse-surface)
+  );
+  border-color: var(--md-sys-color-outline-variant);
+}
+.field--readonly .field__control:hover {
+  border-color: var(--md-sys-color-outline-variant);
+}
+
+/* ---------- Helper / error message row ----------
+   Severity is icon + copy. The error keeps the same ink as the helper —
+   the icon and string carry the severity, not a color (AD-11 / rule 3a). */
+.field__message {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--s-1);
+  min-height: 1em;
+  font:
+    var(--md-sys-typescale-body-small-weight)
+    var(--md-sys-typescale-body-small-size) /
+    var(--md-sys-typescale-body-small-line-height)
+    var(--md-sys-typescale-body-small-font);
+}
+.field__message--helper {
+  color: var(--xm-color-inverse-on-surface-muted);
+}
+.field__message--error {
+  color: var(--md-sys-color-inverse-on-surface);
+}
+.field__message--empty {
+  min-height: 0;
+}
+.field__error-icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  margin-top: 1px;
+  color: var(--md-sys-color-inverse-on-surface);
+}
+.field__message-text {
+  flex: 1;
+  min-width: 0;
+  text-wrap: pretty;
+}
+
+}`);
+  sheets = [sheet];
+}
+export default sheets;

package/dist/lit/components/file-input/index.d.ts

@@ -1,6 +1,10 @@
 import type { TemplateResult } from "lit";
 import { XmField } from "../field/index.js";
+/**
+ * @fires change - Fired on commit with the new value in `detail`.
+ */
 export declare class XmFileInput extends XmField {
+    static styles: CSSStyleSheet[];
     /** Native accept filter (e.g. ".yml,.json,image/*"). */
     accept: string;
     /** Allow selecting more than one file. */

package/dist/lit/components/file-input/index.js

@@ -30,8 +30,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, nothing } from "lit";
 import { customElement, property, state, query } from "lit/decorators.js";
 import { XmField } from "../field/index.js";
-const FILE_INPUT_CSS = new URL("../file-input/index.css", import.meta.url).href;
-const PRIMITIVES_CSS = new URL("../primitives/index.css", import.meta.url).href;
+import primitivesSheets from "../primitives/index.styles.js";
+import fieldSheets from "../field/index.styles.js";
+import fileInputSheets from "./index.styles.js";
 /** Format bytes as `B` / `KB` / `MB` with one space before the unit (UX-DR4).
     Decimal units (1 KB = 1000 B) — matches the file-size convention users see in
     macOS / browsers, so a 412000-byte file reads "412 KB". */
@@ -44,6 +45,9 @@ function formatBytes(bytes) {
     const mb = kb / 1000;
     return `${mb < 10 ? mb.toFixed(1) : Math.round(mb)} MB`;
 }
+/**
+ * @fires change - Fired on commit with the new value in `detail`.
+ */
 let XmFileInput = class XmFileInput extends XmField {
     constructor() {
         super(...arguments);
@@ -96,6 +100,10 @@ let XmFileInput = class XmFileInput extends XmField {
             this._setFiles(this.multiple ? picked : picked.slice(0, 1));
         };
     }
+    // Adopted from build-generated sheets (gen-styles.mjs) — no runtime URL
+    // fetch (ADR 0012). Lit static styles don't merge on override, so subclasses
+    // re-include the chrome (primitives + field) sheets.
+    static { this.styles = [...primitivesSheets, ...fieldSheets, ...fileInputSheets]; }
     /** Public read contract (AD-6a) — the selected files. */
     get files() {
         return this._files;
@@ -165,8 +173,6 @@ let XmFileInput = class XmFileInput extends XmField {
         const helperText = this.isError ? this.error : this.helper;
         const ctrl = this.controlAria;
         return html `
-      <link rel="stylesheet" href="${PRIMITIVES_CSS}" />
-      <link rel="stylesheet" href="${FILE_INPUT_CSS}" />
       <style>
         :host {
           display: block;