@xmesh/system-design 0.0.3 → 0.0.5

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

@@ -0,0 +1,271 @@
+// GENERATED by scripts/gen-styles.mjs — do not edit. Source: lit/components/file-input/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-file-input — generic file picker / dropzone on XmField (Story 2.9).
+
+   Extends XmField for chrome but renders its own layout: a label row, a dropzone
+   surface (the focusable button), the selected-file rows, and the helper/error
+   row. State machinery (disabled / form-association / focus / ARIA) is inherited;
+   this file styles the dropzone, file rows, and the byte-size text.
+
+   Surface & ink (AD-13): the dropzone rides the inverse-surface card tier —
+   primary copy is inverse-on-surface, the secondary hint + size are the muted
+   tier. The icon takes the card ink.
+
+   Borders: the dropzone is a hairline 1px (outline-variant → outline on hover).
+   The DRAG-ACTIVE state is the ONE place a 2px border is allowed — 2px solid the
+   coral --md-sys-color-primary, with the focus-ring halo. Coral here signals the
+   live drop target, never severity (AD-11). Errors are the warn icon + copy.
+
+   BEM block: \`file-input\`. Registered in scripts/check-bem.sh STRICT_BLOCKS.
+   ============================================ */
+
+.file-input {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-2);
+  width: 100%;
+}
+
+/* ---------- Label ---------- */
+.file-input__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);
+}
+.file-input__label-text {
+  letter-spacing: 0;
+}
+.file-input__required {
+  color: var(--md-sys-color-primary);
+  font-weight: 700;
+  line-height: 1;
+}
+
+/* ---------- Hidden native input — kept out of layout + tab order ---------- */
+.file-input__native {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ---------- Dropzone — the focusable button surface ---------- */
+.file-input__dropzone {
+  display: flex;
+  align-items: center;
+  gap: var(--s-3);
+  box-sizing: border-box;
+  padding: var(--s-4) var(--s-4);
+  /* Hairline + a 1px transparent inset so the box does not jump when the
+     drag-active 2px border lands (the inset absorbs the extra 1px). */
+  border: 1px solid var(--md-sys-color-outline-variant);
+  outline: 1px solid transparent;
+  outline-offset: -2px;
+  border-radius: var(--md-sys-shape-corner-button);
+  background: var(--md-sys-color-inverse-surface);
+  color: var(--md-sys-color-inverse-on-surface);
+  cursor: pointer;
+  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);
+}
+.file-input__dropzone:hover {
+  border-color: var(--md-sys-color-outline);
+}
+.file-input__dropzone:focus-visible {
+  outline: none;
+  border-color: var(--md-sys-color-primary);
+  box-shadow: var(--xm-state-focus-ring);
+}
+
+.file-input__icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--md-sys-color-inverse-on-surface);
+}
+.file-input__copy {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+}
+.file-input__primary {
+  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);
+}
+.file-input__secondary {
+  color: var(--xm-color-inverse-on-surface-muted);
+  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);
+}
+
+/* ---------- Drag-active — the ONLY 2px border in the system ---------- */
+.file-input--drag-active .file-input__dropzone {
+  border: 2px solid var(--md-sys-color-primary);
+  box-shadow: var(--xm-state-focus-ring);
+}
+
+/* ---------- Selected-file rows — raised level1 cards ---------- */
+.file-input__files {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-2);
+}
+.file-input__file {
+  display: flex;
+  align-items: center;
+  gap: var(--s-2);
+  box-sizing: border-box;
+  padding: var(--s-2) var(--s-3);
+  border: 1px solid var(--md-sys-color-outline-variant);
+  border-radius: var(--md-sys-shape-corner-small);
+  background: var(--md-sys-color-inverse-surface);
+  box-shadow: var(--md-sys-elevation-level1);
+}
+.file-input__file-icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--md-sys-color-inverse-on-surface);
+}
+.file-input__file-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  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);
+}
+.file-input__file-size {
+  flex-shrink: 0;
+  color: var(--xm-color-inverse-on-surface-muted);
+  font:
+    var(--xm-typescale-mono-weight)
+    var(--xm-typescale-mono-size) /
+    var(--xm-typescale-mono-line-height)
+    var(--xm-typescale-mono-font);
+}
+.file-input__remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: none;
+  border-radius: var(--md-sys-shape-corner-full);
+  background: transparent;
+  color: var(--xm-color-inverse-on-surface-muted);
+  cursor: pointer;
+  transition: background var(--md-sys-motion-duration-short3)
+    var(--md-sys-motion-easing-standard);
+}
+.file-input__remove:hover {
+  background: color-mix(
+    in oklab,
+    var(--md-sys-color-inverse-on-surface)
+      var(--md-sys-state-hover-state-layer-opacity),
+    transparent
+  );
+  color: var(--md-sys-color-inverse-on-surface);
+}
+.file-input__remove:focus-visible {
+  outline: none;
+  box-shadow: var(--xm-state-focus-ring);
+}
+
+/* ---------- Disabled — reduced emphasis ----------
+   No opacity (it would dim the copy below AA). The dropzone children
+   (__primary / __secondary / __icon) each set their own color, so the swap
+   must target them directly — they do NOT inherit a color set on __dropzone.
+   A muted container fill restores the visual "disabled" cue the opacity used
+   to give. */
+.file-input--disabled .file-input__dropzone {
+  cursor: not-allowed;
+  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);
+}
+.file-input--disabled .file-input__dropzone:hover {
+  border-color: var(--md-sys-color-outline-variant);
+}
+.file-input--disabled .file-input__primary,
+.file-input--disabled .file-input__secondary,
+.file-input--disabled .file-input__icon {
+  color: var(--xm-color-inverse-on-surface-disabled);
+}
+.file-input--disabled .file-input__label {
+  color: var(--xm-color-inverse-on-surface-disabled);
+}
+
+/* ---------- Helper / error message row ----------
+   Severity is the warn icon + copy, not a color (rule 3a). */
+.file-input__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);
+}
+.file-input__message--helper {
+  color: var(--xm-color-inverse-on-surface-muted);
+}
+.file-input__message--error {
+  color: var(--md-sys-color-inverse-on-surface);
+}
+.file-input__error-icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  margin-top: 1px;
+  color: var(--md-sys-color-inverse-on-surface);
+}
+.file-input__message-text {
+  flex: 1;
+  min-width: 0;
+  text-wrap: pretty;
+}
+
+}`);
+  sheets = [sheet];
+}
+export default sheets;

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

@@ -4,7 +4,11 @@ export interface FormResult {
     valid: boolean;
     values: Record<string, unknown>;
 }
+/**
+ * @fires submit - Fired when the form is submitted with its values in `detail`.
+ */
 export declare class XmForm extends LitElement {
+    static styles: CSSStyleSheet[];
     disabled: boolean;
     readonly: boolean;
     /** Each touched child's OWN readonly, snapshotted before the form ever sets it,

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

@@ -32,7 +32,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
-const FORM_CSS = new URL("../form/index.css", import.meta.url).href;
+import formSheets from "./index.styles.js";
+/**
+ * @fires submit - Fired when the form is submitted with its values in `detail`.
+ */
 let XmForm = class XmForm extends LitElement {
     constructor() {
         super(...arguments);
@@ -68,6 +71,9 @@ let XmForm = class XmForm extends LitElement {
             this.submit();
         };
     }
+    // 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 = [...formSheets]; }
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener("submit", this._onChildSubmit);
@@ -164,7 +170,6 @@ let XmForm = class XmForm extends LitElement {
     }
     render() {
         return html `
-      <link rel="stylesheet" href="${FORM_CSS}" />
       <style>
         :host {
           display: block;

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

@@ -0,0 +1,43 @@
+// GENERATED by scripts/gen-styles.mjs — do not edit. Source: lit/components/form/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-form — field aggregator / orchestrator (Story 2.10).
+
+   Layout-only chrome: a vertical stack of slotted fields with consistent --s-N
+   gaps so fields of the same \`size\` align (NFR-22). xm-form has NO surface of
+   its own and no bespoke color tokens — each child renders its own XmField
+   chrome, which the form must never restyle (AD-7 / AD-12).
+
+   BEM block: \`form\`. Registered in scripts/check-bem.sh STRICT_BLOCKS.
+   ============================================ */
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-5);
+}
+
+/* The slotted action row (a button or button group) sits at the foot of the
+   stack; authors mark it with slot="actions" if they want it grouped + set off
+   from the fields by a single hairline (the system's 1px rule — no surface, just
+   a divider). Default flow already stacks it under the last field. */
+.form ::slotted([slot="actions"]) {
+  display: flex;
+  gap: var(--s-3);
+  align-items: center;
+  margin-top: var(--s-2);
+  padding-top: var(--s-4);
+  border-top: 1px solid var(--md-sys-color-outline-variant);
+}
+
+}`);
+  sheets = [sheet];
+}
+export default sheets;

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

@@ -1,7 +1,8 @@
 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 {
+    static styles: CSSStyleSheet[];
     columns: number;
     gap: GridGap;
     render(): TemplateResult;

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

@@ -37,9 +37,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
+import gridSheets from "./index.styles.js";
 // Resolve CSS relative to the *built* file:
 // lit/build/components/grid/index.js → ../grid/index.css.
-const GRID_CSS = new URL("../grid/index.css", import.meta.url).href;
 const GAPS = ["none", "xs", "sm", "md", "lg", "xl"];
 let XmGrid = class XmGrid extends LitElement {
     constructor() {
@@ -47,13 +47,15 @@ let XmGrid = class XmGrid extends LitElement {
         this.columns = 12;
         this.gap = "md";
     }
+    // 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 = [...gridSheets]; }
     render() {
         const gap = GAPS.includes(this.gap) ? this.gap : "md";
         const columns = Number.isFinite(this.columns) && this.columns >= 1
             ? Math.floor(this.columns)
             : 12;
         return html `
-      <link rel="stylesheet" href="${GRID_CSS}" />
       <style>
         :host {
           display: block;
@@ -80,3 +82,4 @@ __decorate([
 XmGrid = __decorate([
     customElement("xm-grid")
 ], XmGrid);
+export { XmGrid };

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

@@ -0,0 +1,67 @@
+// GENERATED by scripts/gen-styles.mjs — do not edit. Source: lit/components/grid/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-grid> — N-column (default 12) layout grid.
+
+   Slotted children are grid items (the <slot> is layout-transparent,
+   like xm-chip-group). A child spans N columns by setting the inline
+   custom property --xm-col-span on itself; default span is 1.
+   Optional --xm-col-start for explicit placement. Gutter via
+   gap="…" → --xm-gutter-* (the --s-N-aliased layout tier).
+
+   Below --xm-breakpoint-sm (520px) the grid collapses to a single
+   column. NOTE: the 520px literal is repeated in the @media below
+   because @media cannot read var(--xm-breakpoint-sm); the token in
+   styles/_layout.css is the source of truth (docs/adr/0001).
+
+   BEM block \`grid\`; modifiers --gap-*. Registered in
+   scripts/check-bem.sh STRICT_BLOCKS.
+   ============================================ */
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(var(--xm-grid-columns, 12), minmax(0, 1fr));
+  gap: var(--xm-gutter-md);
+  /* Inherited ink so currentColor in slotted content reads on the desk
+     surface (AD-13) — also satisfies the --md-sys-* token gate. */
+  color: var(--md-sys-color-on-surface);
+}
+
+.grid--gap-none { gap: var(--xm-gutter-none); }
+.grid--gap-xs   { gap: var(--xm-gutter-xs); }
+.grid--gap-sm   { gap: var(--xm-gutter-sm); }
+.grid--gap-md   { gap: var(--xm-gutter-md); }
+.grid--gap-lg   { gap: var(--xm-gutter-lg); }
+.grid--gap-xl   { gap: var(--xm-gutter-xl); }
+
+/* Per-child placement, authored as inline custom properties on the child.
+   minmax(0, 1fr) + min-width: 0 keeps a wide / unbreakable child from
+   blowing its track out instead of honouring the span. */
+.grid ::slotted(*) {
+  grid-column: var(--xm-col-start, auto) / span var(--xm-col-span, 1);
+  min-width: 0;
+}
+
+/* Compact: collapse to one column. The 520px literal mirrors
+   --xm-breakpoint-sm (styles/_layout.css); @media can't read the token
+   (docs/adr/0001). */
+@media (max-width: 520px) {
+  .grid {
+    grid-template-columns: 1fr;
+  }
+  .grid ::slotted(*) {
+    grid-column: auto;
+  }
+}
+
+}`);
+  sheets = [sheet];
+}
+export default sheets;

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

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

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

@@ -20,11 +20,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, html } from "lit";
 import { customElement } from "lit/decorators.js";
-const KBD_CSS = new URL("../kbd/index.css", import.meta.url).href;
+import kbdSheets from "./index.styles.js";
 let XmKbd = class XmKbd extends LitElement {
+    // 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 = [...kbdSheets]; }
     render() {
         return html `
-      <link rel="stylesheet" href="${KBD_CSS}" />
       <style>
         :host {
           display: inline-flex;
@@ -41,3 +43,4 @@ let XmKbd = class XmKbd extends LitElement {
 XmKbd = __decorate([
     customElement("xm-kbd")
 ], XmKbd);
+export { XmKbd };

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

@@ -0,0 +1,49 @@
+// GENERATED by scripts/gen-styles.mjs — do not edit. Source: lit/components/kbd/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 {
+/* ============================================
+   Kbd — inline keyboard-key token (key-cap).
+
+   <xm-kbd> presents a shortcut key (⌘, Enter, K) as a small
+   key-cap pill. Mono typescale (--xm-typescale-mono-*), a
+   surface-container-* backplate raised off the host surface, a
+   hairline 1px outline-variant border, and a subtle bottom edge
+   so it reads as a physical key. Ink is --md-sys-color-on-surface
+   to match the surface-container backplate (AD-13). Presentational
+   chrome — never a status hue (AD-11).
+   ============================================ */
+
+.kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-width: 20px;
+  padding: var(--s-0-5) var(--s-2);
+  border: 1px solid var(--md-sys-color-outline-variant);
+  /* Subtle bottom edge so the cap reads as a key, not a flat chip.
+     Hairline-respecting: the border stays 1px; this is an inset rim,
+     not a heavier border. */
+  border-bottom-width: 2px;
+  border-radius: var(--md-sys-shape-corner-extra-small);
+  background: var(--md-sys-color-surface-container-high);
+  color: var(--md-sys-color-on-surface);
+  font-family: var(--xm-typescale-mono-font);
+  font-size: var(--xm-typescale-mono-size);
+  font-weight: var(--xm-typescale-mono-weight);
+  line-height: var(--xm-typescale-mono-line-height);
+  letter-spacing: var(--xm-typescale-mono-tracking);
+  white-space: nowrap;
+  vertical-align: baseline;
+}
+
+}`);
+  sheets = [sheet];
+}
+export default sheets;

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

@@ -1,7 +1,11 @@
 import { LitElement } from "lit";
 import type { TemplateResult } from "lit";
 type Primitive = string | number;
-declare class XmList extends LitElement {
+/**
+ * @fires change - Fired on commit with the new value in `detail`.
+ */
+export declare class XmList extends LitElement {
+    static styles: CSSStyleSheet[];
     interactive: boolean;
     selectable: boolean;
     value: Primitive | null;

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

@@ -37,7 +37,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
-const LIST_CSS = new URL("../list/index.css", import.meta.url).href;
+import listSheets from "./index.styles.js";
+/**
+ * @fires change - Fired on commit with the new value in `detail`.
+ */
 let XmList = class XmList extends LitElement {
     constructor() {
         super(...arguments);
@@ -89,6 +92,9 @@ let XmList = class XmList extends LitElement {
             this._applyItems();
         };
     }
+    // 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 = [...listSheets]; }
     get _isInteractive() {
         return this.interactive || this.selectable;
     }
@@ -159,7 +165,6 @@ let XmList = class XmList extends LitElement {
     }
     render() {
         return html `
-      <link rel="stylesheet" href="${LIST_CSS}" />
       <style>
         :host {
           display: block;
@@ -186,3 +191,4 @@ __decorate([
 XmList = __decorate([
     customElement("xm-list")
 ], XmList);
+export { XmList };

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

@@ -0,0 +1,29 @@
+// GENERATED by scripts/gen-styles.mjs — do not edit. Source: lit/components/list/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 {
+/* ============================================
+   List — vertical collection of <xm-list-item> rows.
+
+   Layout owner for a stack of rows. Sits on the surface* desk family
+   (AD-13) — establishes on-surface as the inherited ink so rows read
+   correctly on the desk. The rows own all chrome; the list owns the
+   rhythm, ARIA role, and (when interactive) keyboard selection.
+   ============================================ */
+
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-1);
+  color: var(--md-sys-color-on-surface);
+}
+
+}`);
+  sheets = [sheet];
+}
+export default sheets;

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

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

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

@@ -32,7 +32,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
-const ITEM_CSS = new URL("../list-item/index.css", import.meta.url).href;
+import listItemSheets from "./index.styles.js";
 let XmListItem = class XmListItem extends LitElement {
     constructor() {
         super(...arguments);
@@ -45,6 +45,9 @@ let XmListItem = class XmListItem extends LitElement {
             this.requestUpdate();
         };
     }
+    // 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 = [...listItemSheets]; }
     _hasSlot(name) {
         for (const node of this.childNodes) {
             if (node.nodeType === Node.ELEMENT_NODE &&
@@ -78,7 +81,6 @@ let XmListItem = class XmListItem extends LitElement {
         const hasTrailing = this._hasSlot("trailing");
         const hasSecondary = this.secondary || this._hasSlot("secondary");
         return html `
-      <link rel="stylesheet" href="${ITEM_CSS}" />
       <style>
         :host {
           display: block;
@@ -125,3 +127,4 @@ __decorate([
 XmListItem = __decorate([
     customElement("xm-list-item")
 ], XmListItem);
+export { XmListItem };