@xmesh/system-design 0.0.4 → 0.0.5

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

@@ -2,7 +2,12 @@ import { LitElement } from "lit";
 import type { TemplateResult } from "lit";
 type AlertSeverity = "info" | "success" | "warning" | "critical";
 type AlertVariant = "inline" | "banner";
+/**
+ * @fires alert-action - Fired when the alert's action is activated.
+ * @fires alert-dismiss - Fired when the alert is dismissed.
+ */
 export declare class XmAlert extends LitElement {
+    static styles: CSSStyleSheet[];
     severity: AlertSeverity;
     heading: string;
     dismissible: boolean;

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

@@ -45,10 +45,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, html, svg, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
+import alertSheets from "./index.styles.js";
 // Resolve CSS path relative to the *built* file location:
 // `lit/build/components/alert/index.js` — 3 levels up reach `lit/`,
 // then into `components/`. Mirrors button/index.ts.
-const ALERT_CSS = new URL("../alert/index.css", import.meta.url).href;
 const SHELL = (paths, size = 18, strokeWidth = 1.8) => svg `
   <svg width="${size}" height="${size}" viewBox="0 0 24 24"
        fill="none" stroke="currentColor" stroke-width="${strokeWidth}"
@@ -85,6 +85,10 @@ const SEVERITY_LABEL = {
     warning: "Warning",
     critical: "Critical",
 };
+/**
+ * @fires alert-action - Fired when the alert's action is activated.
+ * @fires alert-dismiss - Fired when the alert is dismissed.
+ */
 let XmAlert = class XmAlert extends LitElement {
     constructor() {
         super(...arguments);
@@ -126,6 +130,9 @@ let XmAlert = class XmAlert extends LitElement {
             this.dispatchEvent(new CustomEvent("alert-dismiss", { bubbles: true, composed: true }));
         };
     }
+    // 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 = [...alertSheets]; }
     render() {
         const sev = this.severity === "success" || this.severity === "warning" || this.severity === "critical"
             ? this.severity
@@ -133,7 +140,6 @@ let XmAlert = class XmAlert extends LitElement {
         const isProminent = this.prominent || this.variant === "banner";
         const cls = `alert alert--${sev}${this.static ? " alert--static" : ""}${isProminent ? " alert--prominent" : ""}`;
         return html `
-      <link rel="stylesheet" href="${ALERT_CSS}">
       <style>
         :host { display: block; }
         :host([hidden]) { display: none; }

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

@@ -0,0 +1,215 @@
+// GENERATED by scripts/gen-styles.mjs — do not edit. Source: lit/components/alert/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 {
+/* ============================================
+   Alert — inline notification banner.
+
+   Lightweight inline surface for notice/warning/success/critical
+   context. Sits between snackbar (modal-ish backend-error tunnel)
+   and a plain message: the host drops it inline in a chat thread,
+   a settings pane, or any content surface.
+
+   Severity is communicated by the icon glyph and copy ONLY — every
+   variant uses the same neutral surface and ink. \`--md-sys-color-error*\`
+   is forbidden in components (POLICIES.md rule 3a); status pastels
+   are not part of this design system.
+
+   Grid:
+     icon · body · action-slot · close
+   The icon column and close column are auto-sized; the body fills.
+   ============================================ */
+
+.alert {
+  /* Component-local vars — neutral surface, border, and ink for every
+     severity (matches the rest of the design system). Severity carries
+     hue ONLY on the icon and its chip — this is the targeted exception
+     to the "no hue for severity" rule, scoped tightly so the alert
+     reads as chrome with a glanceable severity marker, not a loud
+     full-banner tint. Defaults are info; .alert--{severity} swaps the
+     icon vars. */
+  --alert-bg: var(--md-sys-color-surface-container-high);
+  --alert-border: var(--md-sys-color-outline-variant);
+  --alert-ink: var(--md-sys-color-on-surface);
+  --alert-ink-soft: var(--md-sys-color-on-surface-variant);
+  --alert-icon-ink: var(--xm-alert-info-ink);
+  --alert-icon-chip: var(--xm-alert-info-chip);
+
+  position: relative;
+  display: grid;
+  grid-template-columns: auto 1fr auto auto;
+  align-items: center;
+  gap: var(--s-3);
+  width: 100%;
+  padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4);
+  background: var(--alert-bg);
+  border: 1px solid var(--alert-border);
+  border-radius: var(--md-sys-shape-corner-medium);
+  color: var(--alert-ink);
+  font-family: var(--md-sys-typescale-body-medium-font);
+  animation: alert-in var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard) both;
+}
+.alert--static { animation: none; }
+
+@keyframes alert-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Severity modifiers — swap ONLY the icon's ink and chip. Surface,
+   border, and body text stay neutral. */
+.alert--info {
+  --alert-icon-ink: var(--xm-alert-info-ink);
+  --alert-icon-chip: var(--xm-alert-info-chip);
+}
+.alert--success {
+  --alert-icon-ink: var(--xm-alert-success-ink);
+  --alert-icon-chip: var(--xm-alert-success-chip);
+}
+.alert--warning {
+  --alert-icon-ink: var(--xm-alert-warning-ink);
+  --alert-icon-chip: var(--xm-alert-warning-chip);
+}
+.alert--critical {
+  --alert-icon-ink: var(--xm-alert-critical-ink);
+  --alert-icon-chip: var(--xm-alert-critical-chip);
+}
+
+/* ── Prominent / banner modifier (Story 4.6) ───────────────────────────
+   A high-importance, persistent layout. Changes PROMINENCE / LAYOUT ONLY:
+   wider full-width feel, larger padding, a left severity accent rail, and a
+   larger icon chip — while the body surface stays NEUTRAL and the per-severity
+   hue stays scoped to the icon chip + ink + the rail (the same --alert-icon-*
+   mechanism, the sole sanctioned severity-hue exception). No new severity
+   hues, no --md-sys-color-error*, no full-banner tint. The contract (severity
+   model, slots, events) is unchanged. */
+.alert--prominent {
+  padding: var(--s-5) var(--s-5) var(--s-5) var(--s-6);
+  border-radius: var(--md-sys-shape-corner-large);
+  /* The left severity rail — a hairline-respecting accent band drawn from the
+     per-severity chip, scoped to the edge so the body reads neutral. 3px is a
+     decorative rail, not a border (borders stay hairline; 2px is focus/drag). */
+  border-left: 3px solid var(--alert-icon-chip);
+  column-gap: var(--s-4);
+}
+.alert--prominent .alert__icon {
+  width: 40px;
+  height: 40px;
+  align-self: start;
+}
+.alert--prominent .alert__heading {
+  font-size: var(--md-sys-typescale-body-large-size);
+}
+.alert--prominent .alert__text {
+  font-size: var(--md-sys-typescale-body-medium-size);
+}
+/* In the banner layout the action drops below the body so the message has the
+   full row width — a persistent banner reads as a block, not a one-liner. */
+.alert--prominent .alert__action {
+  grid-column: 2 / 3;
+  grid-row: 2;
+  justify-content: flex-start;
+  margin-top: var(--s-1);
+}
+
+.alert__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--md-sys-shape-corner-small);
+  /* Per-severity tint chip behind the glyph — the ONLY hued region in
+     the alert. Sits on top of the neutral alert surface. */
+  background: color-mix(in oklab, var(--alert-icon-chip) 38%, transparent);
+  color: var(--alert-icon-ink);
+  flex-shrink: 0;
+}
+
+.alert__body {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-0-5);
+}
+.alert__heading {
+  font-size: var(--md-sys-typescale-body-medium-size);
+  font-weight: 600;
+  color: var(--alert-ink);
+  /* Heading wraps when narrow rather than truncating — alerts are read,
+     not glanced at like snackbars. */
+  text-wrap: pretty;
+}
+.alert__text {
+  font-size: var(--md-sys-typescale-body-medium-size);
+  line-height: 1.45;
+  color: var(--alert-ink-soft);
+  text-wrap: pretty;
+}
+.alert__text.is-empty { display: none; }
+.alert__heading.is-empty { display: none; }
+
+.alert__action {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+.alert__action.is-empty { display: none; }
+
+.alert__close {
+  appearance: none;
+  border: none;
+  background: transparent;
+  color: var(--alert-ink-soft);
+  width: 28px;
+  height: 28px;
+  border-radius: var(--md-sys-shape-corner-small);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition:
+    background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
+    color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
+  flex-shrink: 0;
+}
+.alert__close:hover {
+  background: color-mix(in oklab, var(--alert-ink) 10%, transparent);
+  color: var(--alert-ink);
+}
+.alert__close:focus-visible {
+  outline: none;
+  box-shadow: var(--xm-state-focus-ring);
+}
+
+/* Compact: when the row gets narrow, drop the action below the body
+   so nothing wraps awkwardly. The dismiss stays inline. The 520px literal
+   mirrors --xm-breakpoint-sm (styles/_layout.css) — @media can't read the
+   token (docs/adr/0001), so the literal is the source-of-truth's echo. */
+@media (max-width: 520px) {
+  .alert {
+    grid-template-columns: auto 1fr auto;
+    grid-template-rows: auto auto;
+    row-gap: var(--s-2);
+  }
+  .alert__action {
+    grid-column: 2 / -1;
+    justify-content: flex-end;
+  }
+}
+
+}`);
+  sheets = [sheet];
+}
+export default sheets;

package/dist/lit/components/app-bar/index.d.ts

@@ -2,6 +2,7 @@ import { LitElement } from "lit";
 import type { TemplateResult } from "lit";
 type AppBarSize = "xs" | "sm" | "md" | "lg";
 export declare class XmAppBar extends LitElement {
+    static styles: CSSStyleSheet[];
     size: AppBarSize;
     sticky: boolean;
     private _mo;

package/dist/lit/components/app-bar/index.js

@@ -34,9 +34,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
+import appBarSheets from "./index.styles.js";
 // Resolve CSS relative to the *built* file:
 // lit/build/components/app-bar/index.js → ../app-bar/index.css.
-const APP_BAR_CSS = new URL("../app-bar/index.css", import.meta.url).href;
 let XmAppBar = class XmAppBar extends LitElement {
     constructor() {
         super(...arguments);
@@ -47,6 +47,9 @@ let XmAppBar = class XmAppBar 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 = [...appBarSheets]; }
     render() {
         const size = ["xs", "sm", "md", "lg"].includes(this.size)
             ? this.size
@@ -54,7 +57,6 @@ let XmAppBar = class XmAppBar extends LitElement {
         const leadingEmpty = this._slotEmpty("leading");
         const actionEmpty = this._slotEmpty("action");
         return html `
-      <link rel="stylesheet" href="${APP_BAR_CSS}" />
       <style>
         :host {
           display: block;

package/dist/lit/components/app-bar/index.styles.js

@@ -0,0 +1,94 @@
+// GENERATED by scripts/gen-styles.mjs — do not edit. Source: lit/components/app-bar/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-app-bar> — screen header on the desk surface.
+
+   Surface / ink (AD-13): the app bar belongs to the DESK family —
+   background var(--md-sys-color-surface), title ink var(--md-sys-color-on-surface),
+   secondary var(--md-sys-color-on-surface-variant). NOT the inverse-surface ink
+   used by cards / drawers.
+
+   Hairline: a single 1px bottom border (--md-sys-color-outline-variant).
+   Never 2px.
+
+   BEM: block \`app-bar\`; elements \`__leading\` \`__title\` \`__action\`;
+   modifiers \`--xs|--sm|--md|--lg\`. Sticky is driven from :host([sticky]).
+   ============================================ */
+
+.app-bar {
+  display: flex;
+  align-items: center;
+  gap: var(--s-3);
+  box-sizing: border-box;
+  width: 100%;
+  padding: 0 var(--s-4);
+  background: var(--md-sys-color-surface);
+  color: var(--md-sys-color-on-surface);
+  border-bottom: 1px solid var(--md-sys-color-outline-variant);
+}
+
+/* ---------- Sizes — one shared bar height per size ---------- */
+.app-bar--xs { min-height: 40px; }
+.app-bar--sm { min-height: 48px; }
+.app-bar--md { min-height: 56px; }
+.app-bar--lg { min-height: 64px; }
+
+/* ---------- Leading ---------- */
+.app-bar__leading {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-2);
+  flex-shrink: 0;
+}
+.app-bar__leading.is-empty {
+  display: none;
+}
+
+/* ---------- Title ---------- */
+.app-bar__title {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--s-2);
+  font-family: var(--md-sys-typescale-title-medium-font);
+  font-size: var(--md-sys-typescale-title-medium-size);
+  line-height: var(--md-sys-typescale-title-medium-line-height);
+  font-weight: var(--md-sys-typescale-title-medium-weight);
+  letter-spacing: var(--md-sys-typescale-title-medium-tracking);
+  color: var(--md-sys-color-on-surface);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+/* ---------- Action (singular trailing region) ---------- */
+.app-bar__action {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-2);
+  flex-shrink: 0;
+  margin-inline-start: auto;
+}
+.app-bar__action.is-empty {
+  display: none;
+}
+
+/* ---------- Sticky ---------- */
+:host([sticky]) .app-bar {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+}`);
+  sheets = [sheet];
+}
+export default sheets;

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

@@ -2,6 +2,11 @@ import { LitElement } from "lit";
 import type { TemplateResult } from "lit";
 import "../button/index.js";
 type ArtifactView = "preview" | "code";
+/**
+ * @fires close - Fired when the element requests to close.
+ * @fires refresh - Fired when a refresh is requested.
+ * @fires view-change - Fired when the active view changes.
+ */
 export declare class XmArtifact extends LitElement {
     title: string;
     sub: string[] | null;

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

@@ -42,17 +42,16 @@ import { LitElement, html, svg, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 // Side-effect import: registers <xm-button> for use in the head toolbar.
 import "../button/index.js";
+import artifactSheets from "./index.styles.js";
+import primitivesSheets from "../primitives/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("../artifact/index.css", import.meta.url).href,
-        new URL("../primitives/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 [...artifactSheets, ...primitivesSheets]) {
+        if (!document.adoptedStyleSheets.includes(sheet)) {
+            document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
+        }
     }
 }
 const ICON_EYE = (size = 14) => svg `
@@ -87,6 +86,11 @@ const ICON_CLOSE = () => svg `
   </svg>
 `;
 let artifactInstance = 0;
+/**
+ * @fires close - Fired when the element requests to close.
+ * @fires refresh - Fired when a refresh is requested.
+ * @fires view-change - Fired when the active view changes.
+ */
 let XmArtifact = class XmArtifact extends LitElement {
     constructor() {
         super(...arguments);

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

@@ -0,0 +1,180 @@
+// GENERATED by scripts/gen-styles.mjs — do not edit. Source: lit/components/artifact/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 {
+/* ============================================
+   Artifact — Claude-style side-panel viewer.
+
+   Canvas-surface panel that lives in the artifact
+   column of chat.html, or standalone in
+   preview/artifact.html. Header (provider chip +
+   segmented eye/code toggle + title/sub +
+   action cluster) over a scrollable body.
+
+   The panel rides \`surface-container-high\` in both
+   themes — same family as the chat shell's sidebar/
+   topbar. Surface-rooted means text tokens come
+   from \`on-surface*\` (POLICIES rule 7a). The
+   primitives flip in light theme via
+   _primitives.css, so a single set of rules covers
+   both modes. Mirrors the .bubble.bot pattern.
+   ============================================ */
+
+.artifact {
+  background: var(--md-sys-color-surface-container-high);
+  border: 0;
+  border-left: 1px solid var(--md-sys-color-outline);
+  border-radius: 0;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+  color: var(--md-sys-color-on-surface);
+}
+
+/* ---------- Head ----------
+   Padding + min-height match preview/chat.html \`.top\` so the chat
+   topbar and artifact head render at identical heights when both
+   are visible. */
+.artifact__head {
+  display: flex;
+  align-items: center;
+  gap: var(--s-3);
+  padding: var(--s-3) var(--s-5);
+  min-height: 56px;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  /* Hairline seam so the header reads as a band over the body instead of
+     floating; outline-variant is the soft internal divider weight. */
+  border-bottom: 1px solid var(--md-sys-color-outline-variant);
+}
+
+.artifact__head-left {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-2);
+  flex-shrink: 0;
+}
+
+.artifact__head-mid {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-1);
+  min-width: 0;
+  flex: 1;
+}
+
+.artifact__head-right {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-1-5);
+  flex-shrink: 0;
+}
+
+.artifact__title {
+  font: 600 15px/1.2 var(--md-sys-typescale-body-large-font);
+  color: var(--md-sys-color-on-surface);
+  letter-spacing: -0.01em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.artifact__sub {
+  font: 400 11px/1 var(--xm-typescale-mono-font);
+  color: var(--xm-color-on-surface-soft);
+  font-feature-settings: "tnum";
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-1-5);
+  flex-wrap: nowrap;
+  white-space: nowrap;
+}
+.artifact__sub > span { white-space: nowrap; }
+/* Inline middot dividers come from the .ds-sep primitive (primitives/index.css);
+   no per-component override needed. */
+
+/* ---------- View toggle (eye / code) ---------- */
+.artifact__view-toggle {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--s-0-5);
+  background: color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
+  border-radius: 8px;
+  gap: var(--s-0-5);
+}
+
+/* ---------- Body ---------- */
+.artifact__body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  scrollbar-gutter: stable;
+  /* Horizontal inset matches .artifact__head (--s-5) so the title and the
+     first line of body copy share one left edge. */
+  padding: var(--s-5) var(--s-5) var(--s-6);
+  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);
+  color: var(--md-sys-color-on-surface);
+}
+
+.artifact__body :where(h1, h2, h3, h4) {
+  color: var(--md-sys-color-on-surface);
+  letter-spacing: -0.01em;
+  margin: var(--s-4-5) 0 var(--s-2);
+}
+.artifact__body h1 { font: 600 20px/1.25 var(--md-sys-typescale-body-large-font); }
+.artifact__body h2 { font: 600 16px/1.3  var(--md-sys-typescale-body-large-font); }
+.artifact__body h3 { font: 600 14px/1.3  var(--md-sys-typescale-body-large-font); }
+.artifact__body :where(h1, h2, h3, h4):first-child { margin-top: 0; }
+
+.artifact__body p { margin: 0 0 var(--s-3); }
+.artifact__body ul,
+.artifact__body ol { margin: 0 0 var(--s-3); padding-left: var(--s-5-5); }
+.artifact__body li { margin: var(--s-1) 0; }
+.artifact__body strong { color: var(--md-sys-color-on-surface); font-weight: 600; }
+.artifact__body em { font-style: italic; color: var(--md-sys-color-on-surface); }
+.artifact__body code {
+  font: 500 12.5px/1.4 var(--xm-typescale-mono-font);
+  padding: 0;
+  background: transparent;
+  color: var(--md-sys-color-on-surface);
+}
+
+.artifact__body pre {
+  font: 500 12.5px/1.55 var(--xm-typescale-mono-font);
+  color: var(--md-sys-color-on-surface);
+  background: color-mix(in oklab, var(--md-sys-color-on-surface) 6%, transparent);
+  border: 1px solid color-mix(in oklab, var(--md-sys-color-on-surface) 10%, transparent);
+  border-radius: var(--md-sys-shape-corner-extra-small);
+  padding: var(--s-3) var(--s-4);
+  margin: var(--s-3) 0;
+  white-space: pre-wrap;
+  overflow-x: auto;
+  font-feature-settings: "tnum";
+}
+.artifact__body pre code {
+  font: inherit;
+  color: inherit;
+}
+
+.artifact__body blockquote {
+  margin: var(--s-3) 0;
+  padding-left: var(--s-3);
+  border-left: 2px solid color-mix(in oklab, var(--md-sys-color-on-surface) 30%, transparent);
+  color: var(--xm-color-on-surface-soft);
+  font-style: italic;
+}
+
+}`);
+  sheets = [sheet];
+}
+export default sheets;

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

@@ -2,7 +2,12 @@ import type { PropertyValues, TemplateResult } from "lit";
 import { XmField } from "../field/index.js";
 import type { SelectOption } from "../select/index.js";
 import type { XmOverlay } from "../overlay/index.js";
+/**
+ * @fires change - Fired on commit with the new value in `detail`.
+ * @fires input - Fired on each edit with the current value in `detail`.
+ */
 export declare class XmAutocomplete extends XmField {
+    static styles: CSSStyleSheet[];
     /** Shared option model — `{ label, value, disabled? }` (AD-8a). */
     options: SelectOption[];
     /** Native placeholder shown when the query is empty. */

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

@@ -37,7 +37,13 @@ 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 AUTOCOMPLETE_CSS = new URL("../autocomplete/index.css", import.meta.url).href;
+import primitivesSheets from "../primitives/index.styles.js";
+import fieldSheets from "../field/index.styles.js";
+import autocompleteSheets from "./index.styles.js";
+/**
+ * @fires change - Fired on commit with the new value in `detail`.
+ * @fires input - Fired on each edit with the current value in `detail`.
+ */
 let XmAutocomplete = class XmAutocomplete extends XmField {
     constructor() {
         super(...arguments);
@@ -123,6 +129,10 @@ let XmAutocomplete = class XmAutocomplete extends XmField {
             }
         };
     }
+    // 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, ...autocompleteSheets]; }
     connectedCallback() {
         super.connectedCallback();
         if (this.initialValue !== "" && this._selectedValue === null) {
@@ -245,7 +255,6 @@ let XmAutocomplete = class XmAutocomplete extends XmField {
             ? `${a.id}-opt-${this._activeIndex}`
             : nothing;
         return html `
-      <link rel="stylesheet" href="${AUTOCOMPLETE_CSS}" />
       <div class="autocomplete__control">
         <input
           class="autocomplete__input"