@xmesh/system-design 0.0.4 → 0.0.6

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

@@ -0,0 +1,157 @@
+// GENERATED by scripts/gen-styles.mjs — do not edit. Source: lit/components/progress/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 {
+/* ============================================
+   Progress — linear + circular, determinate + indeterminate.
+
+   The indicator (linear fill / circular arc / sweep) is the ONE coral
+   accent: var(--md-sys-color-primary). The unfilled track is a neutral
+   surface tier that reads on both surface families and both themes
+   (AD-1, UX-DR3, AD-13). Progress is display-only chrome — never a
+   severity hue.
+
+   The circular indeterminate spin ALIGNS with primitives' <xm-spinner>
+   motion: one rotation source at 0.7s linear infinite (matching
+   @keyframes ds-spin). We do NOT introduce a second rotation speed.
+
+   BEM block: \`progress\`. Registered in scripts/check-bem.sh STRICT_BLOCKS.
+   Elements: __track, __fill, __ring, __ring-svg, __ring-track,
+   __ring-indicator, __label. Modifiers: --linear / --circular /
+   --indeterminate / --xs / --sm / --md / --lg.
+   ============================================ */
+
+.progress {
+  --progress-color: var(--md-sys-color-primary);
+  --progress-track: var(--md-sys-color-surface-container-highest);
+  /* Linear track thickness per size (set by the size modifiers). */
+  --progress-thickness: 6px;
+  /* Circular ring diameter per size. */
+  --progress-ring-size: 32px;
+  display: inline-flex;
+  align-items: center;
+}
+
+/* ---------- Size axis ---------- */
+.progress--xs { --progress-thickness: 3px; --progress-ring-size: 18px; }
+.progress--sm { --progress-thickness: 4px; --progress-ring-size: 24px; }
+.progress--md { --progress-thickness: 6px; --progress-ring-size: 32px; }
+.progress--lg { --progress-thickness: 8px; --progress-ring-size: 44px; }
+
+/* ---------- Linear ---------- */
+.progress--linear {
+  display: block;
+  width: 100%;
+}
+
+.progress__track {
+  display: block;
+  position: relative;
+  width: 100%;
+  height: var(--progress-thickness);
+  background: var(--progress-track);
+  border-radius: var(--md-sys-shape-corner-full);
+  overflow: hidden;
+}
+
+.progress__fill {
+  display: block;
+  height: 100%;
+  width: 0;
+  background: var(--progress-color);
+  border-radius: var(--md-sys-shape-corner-full);
+  /* Determinate value changes ease at short4 standard. */
+  transition: width var(--md-sys-motion-duration-short4)
+    var(--md-sys-motion-easing-standard);
+}
+
+/* Linear indeterminate — a fixed-width sweep travelling the track. Opacity /
+   translate only; no gradient. */
+.progress--linear.progress--indeterminate .progress__fill {
+  width: 40%;
+  transition: none;
+  animation: progress-sweep var(--md-sys-motion-duration-extra-long2)
+    var(--md-sys-motion-easing-standard) infinite;
+}
+
+@keyframes progress-sweep {
+  from {
+    transform: translateX(-110%);
+  }
+  to {
+    transform: translateX(260%);
+  }
+}
+
+/* ---------- Circular ---------- */
+.progress--circular {
+  display: inline-flex;
+}
+
+.progress__ring {
+  display: inline-flex;
+  width: var(--progress-ring-size);
+  height: var(--progress-ring-size);
+}
+
+.progress__ring-svg {
+  width: 100%;
+  height: 100%;
+  /* Start the determinate arc at 12 o'clock. */
+  transform: rotate(-90deg);
+}
+
+.progress__ring-track {
+  stroke: var(--progress-track);
+}
+
+.progress__ring-indicator {
+  stroke: var(--progress-color);
+  /* Determinate arc grows smoothly at short4 standard. */
+  transition: stroke-dashoffset var(--md-sys-motion-duration-short4)
+    var(--md-sys-motion-easing-standard);
+}
+
+/* Circular indeterminate — rotate the whole svg at the spinner's tempo:
+   0.7s linear infinite (aligned with @keyframes ds-spin). One spin source. */
+.progress--circular.progress--indeterminate .progress__ring-svg {
+  transform: none;
+  transform-origin: center;
+  animation: progress-spin 0.7s linear infinite;
+}
+.progress--circular.progress--indeterminate .progress__ring-indicator {
+  transition: none;
+}
+
+@keyframes progress-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* ---------- Value caption ---------- */
+.progress__label {
+  margin-left: var(--s-2);
+  font-family: var(--md-sys-typescale-label-medium-font);
+  font-size: var(--md-sys-typescale-label-medium-size);
+  line-height: var(--md-sys-typescale-label-medium-line-height);
+  color: currentColor;
+  font-variant-numeric: tabular-nums;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .progress--indeterminate .progress__fill,
+  .progress--circular.progress--indeterminate .progress__ring-svg {
+    animation-duration: var(--md-sys-motion-duration-extra-long4);
+  }
+}
+
+}`);
+  sheets = [sheet];
+}
+export default sheets;

package/dist/lit/components/radio-group/index.d.ts

@@ -1,7 +1,11 @@
 import { LitElement } from "lit";
 import type { PropertyValues, TemplateResult } from "lit";
 import { XmField } from "../field/index.js";
+/**
+ * @fires change - Fired on commit with the new value in `detail`.
+ */
 export declare class XmRadio extends LitElement {
+    static styles: CSSStyleSheet[];
     /** The primitive value this radio contributes to the group when selected. */
     value: string;
     /** Own disabled — OR'd with the group's disabled by the group. */
@@ -14,6 +18,7 @@ export declare class XmRadio extends LitElement {
     render(): TemplateResult;
 }
 export declare class XmRadioGroup extends XmField {
+    static styles: CSSStyleSheet[];
     private get _radios();
     private get _enabledRadios();
     connectedCallback(): void;

package/dist/lit/components/radio-group/index.js

@@ -36,9 +36,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { LitElement, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { XmField } from "../field/index.js";
-const RADIO_CSS = new URL("../radio-group/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 radioGroupSheets from "./index.styles.js";
 /* ── <xm-radio> — selectable, presentational child ──────────────────── */
+/**
+ * @fires change - Fired on commit with the new value in `detail`.
+ */
 let XmRadio = class XmRadio extends LitElement {
     constructor() {
         super(...arguments);
@@ -51,6 +55,8 @@ let XmRadio = class XmRadio extends LitElement {
         /** Effective disabled the group computes (group OR own). */
         this.groupDisabled = false;
     }
+    // Adopted from build-generated sheets (gen-styles.mjs) — no runtime URL fetch.
+    static { this.styles = [...primitivesSheets, ...radioGroupSheets]; }
     get effectiveDisabled() {
         return this.disabled || this.groupDisabled;
     }
@@ -63,8 +69,6 @@ let XmRadio = class XmRadio extends LitElement {
             .filter(Boolean)
             .join(" ");
         return html `
-      <link rel="stylesheet" href="${PRIMITIVES_CSS}" />
-      <link rel="stylesheet" href="${RADIO_CSS}" />
       <style>
         :host {
           display: inline-flex;
@@ -158,6 +162,8 @@ let XmRadioGroup = class XmRadioGroup extends XmField {
             }
         };
     }
+    // XmField static styles don't merge on override — re-include chrome + own.
+    static { this.styles = [...primitivesSheets, ...fieldSheets, ...radioGroupSheets]; }
     get _radios() {
         return Array.from(this.querySelectorAll("xm-radio"));
     }
@@ -232,8 +238,6 @@ let XmRadioGroup = class XmRadioGroup 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="${RADIO_CSS}" />
       <style>
         :host {
           display: block;

package/dist/lit/components/radio-group/index.styles.js

@@ -0,0 +1,192 @@
+// GENERATED by scripts/gen-styles.mjs — do not edit. Source: lit/components/radio-group/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 {
+/* ============================================
+   xm-radio-group + xm-radio — single-choice group (Story 2.6).
+
+   Two BEM blocks in one file (multi-element component, AD-4):
+     • \`radio-group\` — the form-associated value owner (extends XmField). Lays
+       out the group label, the radiogroup options column, and the helper/error
+       row. Chrome semantics (disabled / error) mirror the field family.
+     • \`radio\` — a selectable, presentational child: the hairline circle + coral
+       dot + label. Value/selection/disabled are driven by the group.
+
+   Surface & ink (AD-13): both ride the inverse-surface card tier — label + radio
+   text are inverse-on-surface ink; the circle hairline is outline-variant. The
+   SELECTED radio fills its dot + ring with the single coral accent
+   (--md-sys-color-primary). Coral = selection only, never severity (AD-11). The
+   error string in the message row carries severity via the warn icon + copy.
+
+   BEM blocks: \`radio-group\` and \`radio\`. Both registered in
+   scripts/check-bem.sh STRICT_BLOCKS.
+   ============================================ */
+
+/* ──────────────── radio-group block ──────────────── */
+.radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-2);
+  width: 100%;
+}
+
+.radio-group__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);
+}
+.radio-group__label-text {
+  letter-spacing: 0;
+}
+.radio-group__required {
+  color: var(--md-sys-color-primary);
+  font-weight: 700;
+  line-height: 1;
+}
+
+.radio-group__options {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-2);
+}
+
+.radio-group__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);
+}
+.radio-group__message--helper {
+  color: var(--xm-color-inverse-on-surface-muted);
+}
+.radio-group__message--error {
+  color: var(--md-sys-color-inverse-on-surface);
+}
+.radio-group__error-icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  margin-top: 1px;
+  color: var(--md-sys-color-inverse-on-surface);
+}
+.radio-group__message-text {
+  flex: 1;
+  min-width: 0;
+  text-wrap: pretty;
+}
+
+/* ──────────────── radio block ──────────────── */
+/* Focus ring lives on the host (the focusable element) — the inner circle gets
+   the coral halo when the host is focus-visible. */
+:host(:focus-visible) {
+  outline: none;
+}
+:host(:focus-visible) .radio__circle {
+  border-color: var(--md-sys-color-primary);
+  box-shadow: var(--xm-state-focus-ring);
+}
+
+.radio {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-2);
+  cursor: pointer;
+  user-select: none;
+}
+
+.radio__circle {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  border: 1px solid var(--md-sys-color-outline-variant);
+  border-radius: var(--md-sys-shape-corner-full);
+  background: transparent;
+  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);
+}
+.radio:hover .radio__circle {
+  border-color: var(--md-sys-color-outline);
+}
+
+/* The inner dot — hidden until selected, then coral. Fades in (opacity), not a
+   scale-in reveal (POLICIES.md rule 8: no scale-in). */
+.radio__dot {
+  width: 10px;
+  height: 10px;
+  border-radius: var(--md-sys-shape-corner-full);
+  background: var(--md-sys-color-primary);
+  opacity: 0;
+  transition: opacity var(--md-sys-motion-duration-short3)
+    var(--md-sys-motion-easing-standard);
+}
+
+.radio__label {
+  color: var(--md-sys-color-inverse-on-surface);
+  font:
+    var(--md-sys-typescale-body-medium-weight)
+    var(--md-sys-typescale-body-medium-size) /
+    var(--md-sys-typescale-body-medium-line-height)
+    var(--md-sys-typescale-body-medium-font);
+  letter-spacing: 0;
+}
+
+/* Selected — coral ring + visible dot. */
+.radio--checked .radio__circle {
+  border-color: var(--md-sys-color-primary);
+}
+.radio--checked .radio__dot {
+  opacity: 1;
+}
+.radio--checked:hover .radio__circle {
+  border-color: var(--md-sys-color-primary);
+}
+
+/* Disabled — reduced emphasis, hover reverted, no pointer. */
+.radio--disabled {
+  cursor: not-allowed;
+}
+.radio--disabled .radio__circle {
+  opacity: 0.45;
+  box-shadow: none;
+}
+.radio--disabled .radio__label {
+  color: var(--xm-color-inverse-on-surface-disabled);
+}
+.radio--disabled:hover .radio__circle {
+  border-color: var(--md-sys-color-outline-variant);
+}
+.radio--disabled.radio--checked:hover .radio__circle {
+  border-color: var(--md-sys-color-primary);
+}
+
+/* Group disabled cascades to the option text + label. */
+.radio-group--disabled .radio-group__label {
+  color: var(--xm-color-inverse-on-surface-disabled);
+}
+
+}`);
+  sheets = [sheet];
+}
+export default sheets;

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

@@ -6,7 +6,11 @@ export interface SelectOption {
     value: string | number;
     disabled?: boolean;
 }
+/**
+ * @fires change - Fired on commit with the new value in `detail`.
+ */
 export declare class XmSelect extends XmField {
+    static styles: CSSStyleSheet[];
     /** The option model — `{ label, value, disabled? }` shared across
         select / autocomplete / radio-group so one host handler is safe. */
     options: SelectOption[];

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

@@ -35,7 +35,12 @@ 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 SELECT_CSS = new URL("../select/index.css", import.meta.url).href;
+import primitivesSheets from "../primitives/index.styles.js";
+import fieldSheets from "../field/index.styles.js";
+import selectSheets from "./index.styles.js";
+/**
+ * @fires change - Fired on commit with the new value in `detail`.
+ */
 let XmSelect = class XmSelect extends XmField {
     constructor() {
         super(...arguments);
@@ -90,6 +95,10 @@ let XmSelect = class XmSelect extends XmField {
             this._onListKeydown(e);
         };
     }
+    // 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, ...selectSheets]; }
     connectedCallback() {
         super.connectedCallback();
         // Seed the selection from the uncontrolled `value` attribute (AD-6).
@@ -281,7 +290,6 @@ let XmSelect = class XmSelect extends XmField {
             ? `${a.id}-opt-${this._activeIndex}`
             : nothing;
         return html `
-      <link rel="stylesheet" href="${SELECT_CSS}" />
       <button
         type="button"
         class="select__control"

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

@@ -0,0 +1,165 @@
+// GENERATED by scripts/gen-styles.mjs — do not edit. Source: lit/components/select/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 {
+/* ============================================
+   xm-select — single-select dropdown for XmField (Story 2.3).
+
+   Composes XmField (chrome) + xm-overlay (anchored listbox). This file styles
+   ONLY the bespoke parts: the closed control (a full-bleed <button> inside the
+   base's .field__control wrapper), the chevron, and the listbox panel content
+   projected into the overlay. Positioning / elevation of the panel surface is
+   owned by xm-overlay; here we style the option rows inside it.
+
+   Surface & ink (AD-13):
+     • Closed control rides the inverse-surface card tier → inverse-on-surface
+       ink, inverse-on-surface-muted for the placeholder.
+     • The listbox rows sit on the overlay's inverse-surface panel → ink stays
+       inverse-on-surface; hover uses the MD3 state layer.
+     • The SELECTED option tints with the coral primary-container and pairs
+       on-primary-container ink (matching that surface). Coral = selection only,
+       never severity (AD-11).
+
+   BEM block: \`select\`. Registered in scripts/check-bem.sh STRICT_BLOCKS.
+   ============================================ */
+
+/* ---------- Closed control — full-bleed button in the field wrapper ---------- */
+.select__control {
+  display: flex;
+  align-items: center;
+  gap: var(--s-2);
+  flex: 1;
+  min-width: 0;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  appearance: none;
+  border: none;
+  outline: none;
+  background: transparent;
+  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);
+  padding: 0 var(--s-3);
+  text-align: left;
+  cursor: pointer;
+}
+.select__control:disabled {
+  cursor: not-allowed;
+}
+
+/* ---------- Value / placeholder ---------- */
+.select__value {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.select__value--placeholder {
+  color: var(--xm-color-inverse-on-surface-muted);
+}
+
+/* ---------- Chevron — rotates on open (short3, standard) ---------- */
+.select__chevron {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--md-sys-color-inverse-on-surface);
+  transition: transform var(--md-sys-motion-duration-short3)
+    var(--md-sys-motion-easing-standard);
+}
+.select__chevron--open {
+  transform: rotate(180deg);
+}
+
+/* ---------- Listbox panel content (inside the overlay) ---------- */
+.select__listbox {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-0-5);
+  min-width: 180px;
+  max-height: 320px;
+  overflow-y: auto;
+}
+
+/* ---------- Option rows ---------- */
+.select__option {
+  display: flex;
+  align-items: center;
+  gap: var(--s-2);
+  padding: var(--s-2) var(--s-3);
+  border-radius: var(--md-sys-shape-corner-small);
+  color: var(--md-sys-color-inverse-on-surface);
+  font:
+    var(--md-sys-typescale-body-medium-weight)
+    var(--md-sys-typescale-body-medium-size) /
+    var(--md-sys-typescale-body-medium-line-height)
+    var(--md-sys-typescale-body-medium-font);
+  cursor: pointer;
+  user-select: none;
+}
+.select__option-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.select__option-check {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--md-sys-color-primary);
+}
+
+/* Active (keyboard / pointer hover) — the MD3 state layer over the panel ink. */
+.select__option--active {
+  background: color-mix(
+    in oklab,
+    var(--md-sys-color-inverse-on-surface)
+      var(--md-sys-state-hover-state-layer-opacity),
+    transparent
+  );
+}
+
+/* Selected — coral primary-container tint + on-primary-container ink (AD-13). */
+.select__option--selected {
+  background: var(--md-sys-color-primary-container);
+  color: var(--md-sys-color-on-primary-container);
+}
+.select__option--selected .select__option-check {
+  color: var(--md-sys-color-on-primary-container);
+}
+/* Selected AND active — keep the coral identity, lift slightly via the state
+   layer so the keyboard focus is still legible on the tint. */
+.select__option--selected.select__option--active {
+  background: color-mix(
+    in oklab,
+    var(--md-sys-color-on-primary-container)
+      var(--md-sys-state-hover-state-layer-opacity),
+    var(--md-sys-color-primary-container)
+  );
+}
+
+/* Disabled option — reduced emphasis, no pointer. */
+.select__option--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+}`);
+  sheets = [sheet];
+}
+export default sheets;

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

@@ -26,16 +26,15 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
+import sidebarItemSheets from "./index.styles.js";
+// Light DOM: adopt the build-generated sheets into the document — no runtime
+// URL fetch (ADR 0012). Deduped by sheet identity (the generated modules are
+// singletons); the CSS is wrapped in @layer components (spine AD-2).
 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);
+    for (const sheet of [...sidebarItemSheets]) {
+        if (!document.adoptedStyleSheets.includes(sheet)) {
+            document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
+        }
     }
 }
 let XmSidebarItem = class XmSidebarItem extends LitElement {