@xmesh/system-design 0.0.3 → 0.0.5

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

@@ -0,0 +1,99 @@
+// GENERATED by scripts/gen-styles.mjs — do not edit. Source: lit/components/table/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 {
+/* ============================================
+   Table — static, semantic, hairline-ruled grid.
+
+   <xm-table> renders a real <table> in its shadow root. Borders are
+   1px --md-sys-color-outline-variant hairlines (no 2px, no heavy
+   elevation). The table sits on one surface family — surface* with
+   ink --md-sys-color-on-surface (AD-13). Header rows are
+   differentiated by the hairline rule + an optional surface-container
+   raise, never a status hue (AD-11).
+
+   Numeric cells right-align (text-align: end) with tabular figures so
+   columns of numbers line up; the number + unit carry a space (412 KB)
+   in the content (NFR-22 / UX-DR4).
+
+   Static only — sorting / paging live in xm-data-table (Epic 6).
+   ============================================ */
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  background: transparent;
+  color: var(--md-sys-color-on-surface);
+  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);
+  /* A hairline frame around the whole grid. */
+  border: 1px solid var(--md-sys-color-outline-variant);
+}
+
+.table__caption {
+  caption-side: top;
+  text-align: start;
+  padding: 0 0 var(--s-2);
+  color: var(--md-sys-color-on-surface-variant);
+  font-family: var(--md-sys-typescale-label-large-font);
+  font-size: var(--md-sys-typescale-label-large-size);
+  font-weight: 500;
+}
+
+.table__head {
+  background: var(--md-sys-color-surface-container-low);
+}
+
+.table__header-cell {
+  text-align: start;
+  padding: var(--s-3) var(--s-4);
+  border-bottom: 1px solid var(--md-sys-color-outline-variant);
+  color: var(--md-sys-color-on-surface);
+  font-family: var(--md-sys-typescale-label-large-font);
+  font-size: var(--md-sys-typescale-label-medium-size);
+  font-weight: 600;
+  letter-spacing: 0;
+  white-space: nowrap;
+}
+
+.table__row + .table__row .table__cell {
+  border-top: 1px solid var(--md-sys-color-outline-variant);
+}
+
+.table__cell {
+  padding: var(--s-3) var(--s-4);
+  text-align: start;
+  vertical-align: middle;
+  color: var(--md-sys-color-on-surface);
+}
+
+/* Secondary ink for muted cells (e.g. timestamps). */
+.table__cell--muted {
+  color: var(--md-sys-color-on-surface-variant);
+}
+
+/* Numeric — right-aligned, tabular figures so digits line up. */
+.table__header-cell--numeric,
+.table__cell--numeric {
+  text-align: end;
+  font-variant-numeric: tabular-nums;
+  font-feature-settings: "tnum" 1;
+}
+
+/* Zebra is intentionally omitted — the hairline rule does the region
+   work (UX-DR10). A subtle row-hover keeps long tables scannable
+   without a status hue. */
+.table__row:hover .table__cell {
+  background: color-mix(in oklab, var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity), transparent);
+}
+
+}`);
+  sheets = [sheet];
+}
+export default sheets;

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

@@ -4,20 +4,24 @@ type TabsSize = "xs" | "sm" | "md" | "lg";
 export interface TabsChangeDetail {
     value: string;
 }
-declare class XmTab extends LitElement {
+/**
+ * @fires change - Fired on commit with the new value in `detail`.
+ */
+export declare class XmTab extends LitElement {
     value: string;
     disabled: boolean;
     createRenderRoot(): HTMLElement | DocumentFragment;
     connectedCallback(): void;
     render(): TemplateResult;
 }
-declare class XmTabPanel extends LitElement {
+export declare class XmTabPanel extends LitElement {
     value: string;
     createRenderRoot(): HTMLElement | DocumentFragment;
     connectedCallback(): void;
     render(): TemplateResult;
 }
-declare class XmTabs extends LitElement {
+export declare class XmTabs extends LitElement {
+    static styles: CSSStyleSheet[];
     value: string;
     size: TabsSize;
     private _list;

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

@@ -47,13 +47,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, html } from "lit";
 import { customElement, property, query } from "lit/decorators.js";
-// Resolve CSS relative to the *built* file:
-// lit/build/components/tabs/index.js → ../tabs/index.css.
-const TABS_CSS = new URL("../tabs/index.css", import.meta.url).href;
+import tabsSheets from "./index.styles.js";
 let tabsSeq = 0;
 /* ─────────────────────────────────────────────────────────────
    <xm-tab> — one tab. Light DOM: the host is the role="tab" target.
    ─────────────────────────────────────────────────────────────*/
+/**
+ * @fires change - Fired on commit with the new value in `detail`.
+ */
 let XmTab = class XmTab extends LitElement {
     constructor() {
         super(...arguments);
@@ -85,6 +86,7 @@ __decorate([
 XmTab = __decorate([
     customElement("xm-tab")
 ], XmTab);
+export { XmTab };
 /* ─────────────────────────────────────────────────────────────
    <xm-tab-panel> — one panel. Light DOM: the host is role="tabpanel".
    ─────────────────────────────────────────────────────────────*/
@@ -111,6 +113,7 @@ __decorate([
 XmTabPanel = __decorate([
     customElement("xm-tab-panel")
 ], XmTabPanel);
+export { XmTabPanel };
 /* ─────────────────────────────────────────────────────────────
    <xm-tabs> — the tablist container.
    ─────────────────────────────────────────────────────────────*/
@@ -207,12 +210,15 @@ let XmTabs = class XmTabs extends LitElement {
                 this._activate(next.value);
         };
     }
+    // Adopted from the build-generated sheet (gen-styles.mjs) — no runtime URL
+    // fetch (ADR 0012). Includes the ::slotted(xm-tab) rules that style the
+    // light-DOM <xm-tab> / <xm-tab-panel> children.
+    static { this.styles = [...tabsSheets]; }
     render() {
         const size = ["xs", "sm", "md", "lg"].includes(this.size)
             ? this.size
             : "md";
         return html `
-      <link rel="stylesheet" href="${TABS_CSS}" />
       <style>
         :host {
           display: block;
@@ -318,3 +324,4 @@ __decorate([
 XmTabs = __decorate([
     customElement("xm-tabs")
 ], XmTabs);
+export { XmTabs };

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

@@ -0,0 +1,130 @@
+// GENERATED by scripts/gen-styles.mjs — do not edit. Source: lit/components/tabs/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-tabs> / <xm-tab> / <xm-tab-panel> — tab strip.
+
+   Surface / ink (AD-13): a transparent strip tracing its host surface. On the
+   desk family the inactive tab ink is var(--md-sys-color-on-surface-variant)
+   and the active tab is var(--md-sys-color-on-surface). The active indicator
+   is the single coral accent var(--md-sys-color-primary). Hairline 1px
+   baseline rule. Indicator slide is short3 standard easing — no bounce.
+
+   xm-tab / xm-tab-panel are LIGHT-DOM hosts projected through this element's
+   slots, so they are styled with ::slotted(...). The active/disabled state
+   classes are added to the xm-tab HOST by xm-tabs.
+
+   BEM root block \`tabs\`; elements \`__list\` \`__tab\` \`__label\` \`__indicator\`
+   \`__panels\` \`__panel\`; modifiers \`__tab--active\` \`__tab--disabled\`,
+   size \`--xs|sm|md|lg\`.
+   ============================================ */
+
+.tabs {
+  display: block;
+}
+
+/* ---------- Tablist (the strip) ---------- */
+.tabs__list {
+  position: relative;
+  display: flex;
+  align-items: stretch;
+  gap: var(--s-1);
+  border-bottom: 1px solid var(--md-sys-color-outline-variant);
+}
+
+/* ---------- Tabs (slotted xm-tab hosts) ---------- */
+::slotted(xm-tab) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--s-2);
+  padding: var(--s-2) var(--s-3);
+  margin-bottom: -1px;
+  border: 0;
+  background: transparent;
+  color: var(--md-sys-color-on-surface-variant);
+  font-family: var(--md-sys-typescale-label-large-font);
+  font-weight: 600;
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  border-radius: var(--md-sys-shape-corner-small) var(--md-sys-shape-corner-small) 0 0;
+  transition:
+    color 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);
+}
+::slotted(xm-tab:hover) {
+  color: var(--md-sys-color-on-surface);
+  background: color-mix(
+    in oklab,
+    var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity),
+    transparent
+  );
+}
+::slotted(xm-tab:focus) {
+  outline: none;
+}
+::slotted(xm-tab:focus-visible) {
+  outline: none;
+  box-shadow: var(--xm-state-focus-ring);
+}
+::slotted(.tabs__tab--active) {
+  color: var(--md-sys-color-on-surface);
+}
+::slotted(.tabs__tab--disabled) {
+  cursor: not-allowed;
+  color: var(--xm-color-on-surface-disabled);
+}
+::slotted(.tabs__tab--disabled:hover) {
+  background: transparent;
+  color: var(--xm-color-on-surface-disabled);
+}
+
+/* ---------- Sizes — one shared tab height per size ---------- */
+.tabs--xs ::slotted(xm-tab) { padding: var(--s-1) var(--s-2); font-size: var(--md-sys-typescale-label-small-size); }
+.tabs--sm ::slotted(xm-tab) { padding: var(--s-1) var(--s-3); font-size: var(--md-sys-typescale-body-small-size); }
+.tabs--md ::slotted(xm-tab) { padding: var(--s-2) var(--s-3); font-size: var(--md-sys-typescale-body-medium-size); }
+.tabs--lg ::slotted(xm-tab) { padding: var(--s-3) var(--s-4); font-size: var(--md-sys-typescale-title-small-size); }
+
+/* ---------- Coral active indicator (sliding underline) ---------- */
+.tabs__indicator {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 2px;
+  width: 0;
+  background: var(--md-sys-color-primary);
+  border-radius: var(--md-sys-shape-corner-full);
+  opacity: 0;
+  transform: translateX(0);
+  transition:
+    transform var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
+    width var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
+  pointer-events: none;
+}
+
+/* ---------- Panels ---------- */
+.tabs__panels {
+  padding-top: var(--s-4);
+}
+::slotted(xm-tab-panel) {
+  display: block;
+  color: var(--md-sys-color-on-surface);
+  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);
+}
+::slotted(xm-tab-panel[hidden]) {
+  display: none;
+}
+
+}`);
+  sheets = [sheet];
+}
+export default sheets;

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

@@ -2,6 +2,7 @@ import type { TemplateResult } from "lit";
 import { XmField } from "../field/index.js";
 export type TextFieldType = "text" | "email" | "password" | "number" | "search" | "url" | "tel";
 export declare class XmTextField extends XmField {
+    static styles: CSSStyleSheet[];
     /** Native input type — single-line text variants only. */
     type: TextFieldType;
     /** Native placeholder — shown when the live value is empty. */

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

@@ -42,9 +42,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { XmField } from "../field/index.js";
+import primitivesSheets from "../primitives/index.styles.js";
+import fieldSheets from "../field/index.styles.js";
+import textFieldSheets from "./index.styles.js";
 // Resolve CSS relative to the *built* file:
 // lit/build/components/text-field/index.js → ../text-field/index.css.
-const TEXT_FIELD_CSS = new URL("../text-field/index.css", import.meta.url).href;
 let XmTextField = class XmTextField extends XmField {
     constructor() {
         super(...arguments);
@@ -59,10 +61,13 @@ let XmTextField = class XmTextField extends XmField {
             this.emitChange(e.target.value);
         };
     }
+    // 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, ...textFieldSheets]; }
     renderControl() {
         const a = this.controlAria;
         return html `
-      <link rel="stylesheet" href="${TEXT_FIELD_CSS}" />
       <span class="text-field__lead">
         <slot name="icon-left"></slot>
         <slot name="prefix"></slot>

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

@@ -0,0 +1,104 @@
+// GENERATED by scripts/gen-styles.mjs — do not edit. Source: lit/components/text-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 {
+/* ============================================
+   xm-text-field — concrete control for XmField (Story 2.1).
+
+   The chrome (surface, border, radius, height, focus ring, label, helper/
+   error row, disabled/readonly) is owned by the XmField base — see
+   field/index.css. The native <input> rendered by this subclass is already
+   styled by the base's \`.field__control input\` rule (transparent, borderless,
+   full-bleed, inherits ink + type). So THIS file owns only the leading/trailing
+   affordance rails: the icon-left / icon-right slots and the prefix / suffix
+   inline units that flank the input inside the shared control wrapper.
+
+   Surface/ink: the field sits on the inverse-surface card tier, so all ink here
+   is inverse-on-surface (icons) or inverse-on-surface-muted (prefix/suffix
+   units) — matching the host surface (AD-13). No error color: severity is the base's
+   icon + copy in the message row (AD-11). Tokens only (AD-1).
+
+   BEM block: \`text-field\`. Registered in scripts/check-bem.sh STRICT_BLOCKS.
+   ============================================ */
+
+/* ---------- Leading / trailing rails ----------
+   Flex children of the base's .field__control row, sitting on either side of
+   the input. Each collapses to zero width when its slots are empty, so the
+   input keeps its native edge padding when no affordance is authored. The
+   icon↔text gap rides the --s-N spacing scale to match the shared chrome. */
+.text-field__lead,
+.text-field__trail {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-2);
+  flex-shrink: 0;
+  color: var(--md-sys-color-inverse-on-surface);
+}
+
+/* Empty rails contribute no inset — the inner pad-collapse below removes the
+   matching input padding so a field with no affordance looks untouched. */
+.text-field__lead:not(:has(*)),
+.text-field__trail:not(:has(*)) {
+  display: none;
+}
+
+/* When a leading rail is present it owns the leading inset; the input drops its
+   own left pad so the icon/prefix sits at the wrapper edge inset, and text
+   follows the rail's gap. Mirror on the trailing side. */
+.text-field__lead {
+  padding-left: var(--s-3);
+}
+.text-field__trail {
+  padding-right: var(--s-3);
+}
+.text-field__lead:not(:has(*)) + .text-field__input {
+  padding-left: var(--s-3);
+}
+
+/* ---------- Prefix / suffix inline units ----------
+   Static affordances like \`$\` or \`KB\` — quieter than the live value, so they
+   take the muted inverse ink. Slotted content inherits this via the rail color +
+   ::slotted override. */
+.text-field__lead ::slotted([slot="prefix"]),
+.text-field__trail ::slotted([slot="suffix"]) {
+  color: var(--xm-color-inverse-on-surface-muted);
+  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);
+  white-space: nowrap;
+}
+
+/* Icons inherit currentColor from the rail (inverse-on-surface), matching the
+   host card surface — never an accent or error hue. */
+.text-field__lead ::slotted([slot="icon-left"]),
+.text-field__trail ::slotted([slot="icon-right"]) {
+  display: inline-flex;
+  align-items: center;
+  color: inherit;
+}
+
+/* The input flexes to fill the gap between the rails. Its transparent /
+   borderless / type styling comes from the base; the rails set the inset, so
+   when a rail is present the input loses the matching native edge pad. */
+.text-field__input {
+  flex: 1;
+  min-width: 0;
+}
+.text-field__lead:has(*) + .text-field__input {
+  padding-left: var(--s-2);
+}
+.text-field__input:has(+ .text-field__trail:has(*)) {
+  padding-right: var(--s-2);
+}
+
+}`);
+  sheets = [sheet];
+}
+export default sheets;

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

@@ -1,6 +1,7 @@
 import type { PropertyValues, TemplateResult } from "lit";
 import { XmField } from "../field/index.js";
 export declare class XmTextarea extends XmField {
+    static styles: CSSStyleSheet[];
     /** Initial visible height in text rows. */
     rows: number;
     /** Native placeholder — shown when the live value is empty. */

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

@@ -38,7 +38,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, nothing } from "lit";
 import { customElement, property, query } from "lit/decorators.js";
 import { XmField } from "../field/index.js";
-const TEXTAREA_CSS = new URL("../textarea/index.css", import.meta.url).href;
+import primitivesSheets from "../primitives/index.styles.js";
+import fieldSheets from "../field/index.styles.js";
+import textareaSheets from "./index.styles.js";
 let XmTextarea = class XmTextarea extends XmField {
     constructor() {
         super(...arguments);
@@ -59,6 +61,10 @@ let XmTextarea = class XmTextarea extends XmField {
             this.emitChange(e.target.value);
         };
     }
+    // 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, ...textareaSheets]; }
     updated(changed) {
         super.updated?.(changed);
         if (this.autoGrow)
@@ -84,7 +90,6 @@ let XmTextarea = class XmTextarea extends XmField {
         const a = this.controlAria;
         const controlCls = `textarea__control${this.autoGrow ? " textarea__control--auto-grow" : ""}`;
         return html `
-      <link rel="stylesheet" href="${TEXTAREA_CSS}" />
       <textarea
         class="${controlCls}"
         id=${a.id}

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

@@ -0,0 +1,69 @@
+// GENERATED by scripts/gen-styles.mjs — do not edit. Source: lit/components/textarea/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-textarea — multi-line concrete control for XmField (Story 2.2).
+
+   The chrome (surface, border, radius, focus ring, label, helper/error row,
+   disabled/readonly) is owned by the XmField base — see field/index.css. The
+   only delta from xm-text-field is the multi-line <textarea>: it is taller
+   than one control row, so the control wrapper must stop vertically centering
+   its child and let the textarea own its own block size.
+
+   The native <textarea> rendered here is already styled transparent /
+   borderless / full-bleed / inherits-ink by the base's \`.field__control
+   textarea\` rule. So THIS file only:
+     • un-centers the control wrapper for a multi-row box,
+     • sets the textarea's own vertical padding + resize behavior,
+     • caps the auto-grow height.
+
+   Surface/ink: rides the inverse-surface card tier — ink is inverse-on-surface,
+   placeholder is on-surface-variant (matching the host surface, AD-13). No
+   error color — severity is the base's icon + copy (AD-11). Tokens only (AD-1).
+
+   BEM block: \`textarea\`. Registered in scripts/check-bem.sh STRICT_BLOCKS.
+   ============================================ */
+
+/* The control wrapper centers a single-line input; a textarea needs the box to
+   start at the top and stretch, so the field-level control wrapper is realigned
+   when it hosts this block. Scoped under the block so it never leaks to other
+   fields. */
+.textarea {
+  display: block;
+  width: 100%;
+}
+
+/* The native <textarea> — already transparent/borderless/inheriting via the
+   base rule. Here we own the multi-line geometry: top-aligned text, vertical
+   pad on the --s-N scale, and the resize affordance. */
+.textarea__control {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  /* Override the base \`.field__control textarea { height: 100% }\` rule — a
+     textarea owns its own block size from \`rows\` / scrollHeight, not the
+     single-line wrapper height. */
+  height: auto;
+  align-self: stretch;
+  padding: var(--s-2) var(--s-3);
+  resize: vertical;
+  line-height: var(--md-sys-typescale-body-large-line-height);
+}
+
+/* Auto-grow disables the manual resize handle — the box tracks its content up
+   to the capped max-height instead. */
+.textarea__control--auto-grow {
+  resize: none;
+  overflow-y: auto;
+}
+
+}`);
+  sheets = [sheet];
+}
+export default sheets;

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

@@ -2,6 +2,7 @@ import { LitElement } from "lit";
 import type { TemplateResult } from "lit";
 import type { OverlayPlacement } from "../overlay/index.js";
 export declare class XmTooltip extends LitElement {
+    static styles: CSSStyleSheet[];
     text: string;
     placement: OverlayPlacement;
     openDelay: number;

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

@@ -46,7 +46,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators.js";
-const TOOLTIP_CSS = new URL("../tooltip/index.css", import.meta.url).href;
+import tooltipSheets from "./index.styles.js";
 let tooltipSeq = 0;
 let XmTooltip = class XmTooltip extends LitElement {
     constructor() {
@@ -92,13 +92,15 @@ let XmTooltip = class XmTooltip 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 = [...tooltipSheets]; }
     disconnectedCallback() {
         super.disconnectedCallback();
         window.clearTimeout(this._showTimer);
     }
     render() {
         return html `
-      <link rel="stylesheet" href="${TOOLTIP_CSS}" />
       <style>
         :host { display: inline-flex; }
       </style>

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

@@ -0,0 +1,51 @@
+// GENERATED by scripts/gen-styles.mjs — do not edit. Source: lit/components/tooltip/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 {
+/* ============================================
+   Tooltip — a small anchored contextual label.
+
+   The surface chrome (inverse-surface fill, inverse-on-surface ink, hairline
+   border, level3 elevation, small radius, edge-flip) is owned by the composed
+   <xm-overlay> in the \`tooltip\` tier — this file styles only the LABEL the
+   tooltip projects into the overlay, plus the trigger wrapper.
+
+   The label is a neutral, sentence-cased description — NO severity color, no
+   per-severity hue (AD-11). The ink is inverse-on-surface, inherited from the
+   overlay surface; it is restated here so the label reads correctly even if the
+   cascade is interrupted.
+
+   Motion (short3 fade/translate) is owned by the overlay's open transition.
+
+   BEM block: \`tooltip\`. Registered in scripts/check-bem.sh STRICT_BLOCKS.
+   Elements: __trigger (the anchored control wrapper), __label (the copy).
+   ============================================ */
+
+.tooltip__trigger {
+  display: inline-flex;
+  align-items: center;
+}
+
+.tooltip__label {
+  display: block;
+  max-width: 240px;
+  /* Compact label scale; sentence case enforced by content, no transform. */
+  font-family: var(--md-sys-typescale-body-small-font);
+  font-size: var(--md-sys-typescale-body-small-size);
+  line-height: var(--md-sys-typescale-body-small-line-height);
+  letter-spacing: var(--md-sys-typescale-body-small-tracking);
+  /* Neutral popover-stack ink (matches the overlay surface). */
+  color: var(--md-sys-color-inverse-on-surface);
+  padding: var(--s-1) var(--s-2);
+  text-wrap: pretty;
+}
+
+}`);
+  sheets = [sheet];
+}
+export default sheets;

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

@@ -19,7 +19,13 @@ export interface ValidationPreset extends ValidationError {
 }
 export declare const VALIDATION_TITLE: Record<ValidationCode, string>;
 export declare const VALIDATION_PRESETS: Record<ValidationCode, ValidationPreset>;
-declare class XmFileValidationBlock extends LitElement {
+/**
+ * @fires file-pick - Fired when the user requests to pick a file.
+ * @fires file-drop - Fired when a file is dropped (`detail.file`).
+ * @fires copy-path - Fired when the file path is copied (`detail.path`).
+ * @fires error-dismiss - Fired when the validation error is dismissed.
+ */
+export declare class XmFileValidationBlock extends LitElement {
     state: ValidationState;
     file: ValidationFile | null;
     error: ValidationError | null;
@@ -42,4 +48,3 @@ declare global {
         "xm-file-validation-block": XmFileValidationBlock;
     }
 }
-export {};