@xmesh/system-design 0.0.4 → 0.0.6

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

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

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

@@ -39,7 +39,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
-const GROUP_CSS = new URL("../chip-group/index.css", import.meta.url).href;
+import chipGroupSheets from "./index.styles.js";
+/**
+ * @fires change - Fired on commit with the new value in `detail`.
+ */
 let XmChipGroup = class XmChipGroup extends LitElement {
     constructor() {
         super(...arguments);
@@ -100,6 +103,9 @@ let XmChipGroup = class XmChipGroup extends LitElement {
             this._updateRovingTabindex();
         };
     }
+    // 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 = [...chipGroupSheets]; }
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener("xm-chip-activate", this._onChipActivate);
@@ -145,7 +151,6 @@ let XmChipGroup = class XmChipGroup extends LitElement {
     }
     render() {
         return html `
-      <link rel="stylesheet" href="${GROUP_CSS}" />
       <style>
         :host {
           display: block;

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

@@ -0,0 +1,33 @@
+// GENERATED by scripts/gen-styles.mjs — do not edit. Source: lit/components/chip-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 {
+/* ============================================
+   Chip group — selection container for chips.
+
+   <xm-chip-group> lays slotted <xm-chip> children in a wrapping
+   row and owns selection (single by default, multi with \`multiple\`).
+   Layout only — the chips own all chrome. Sits on a surface* host,
+   so it adds no surface of its own.
+   ============================================ */
+
+.chip-group {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--s-2);
+  /* The group sits on a surface* host; establish on-surface as the
+     inherited ink so any chip that resolves currentColor against the
+     group reads correctly on the desk (AD-13). */
+  color: var(--md-sys-color-on-surface);
+}
+
+}`);
+  sheets = [sheet];
+}
+export default sheets;

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

@@ -1,6 +1,7 @@
 import { LitElement } from "lit";
 import type { TemplateResult } from "lit";
 export declare class XmCode extends LitElement {
+    static styles: CSSStyleSheet[];
     block: boolean;
     render(): TemplateResult;
 }

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

@@ -28,12 +28,15 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
-const CODE_CSS = new URL("../code/index.css", import.meta.url).href;
+import codeSheets from "./index.styles.js";
 let XmCode = class XmCode extends LitElement {
     constructor() {
         super(...arguments);
         this.block = false;
     }
+    // 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 = [...codeSheets]; }
     render() {
         const styleHost = html `
       <style>
@@ -48,13 +51,11 @@ let XmCode = class XmCode extends LitElement {
     `;
         if (this.block) {
             return html `
-        <link rel="stylesheet" href="${CODE_CSS}" />
         ${styleHost}
         <pre class="code code--block"><code><slot></slot></code></pre>
       `;
         }
         return html `
-      <link rel="stylesheet" href="${CODE_CSS}" />
       ${styleHost}
       <code class="code"><slot></slot></code>
     `;

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

@@ -0,0 +1,56 @@
+// GENERATED by scripts/gen-styles.mjs — do not edit. Source: lit/components/code/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 {
+/* ============================================
+   Code — inline / block code display primitive.
+
+   <xm-code> presents code verbatim using the JetBrains Mono
+   typescale (--xm-typescale-mono-*). Inline by default; the
+   \`block\` modifier wraps it in a <pre> for a small code block.
+
+   A recessed surface-container-* backplate raised off the host,
+   a hairline 1px outline-variant border, ink --md-sys-color-on-surface
+   matched to the backplate (AD-13). Presentational chrome — never a
+   status hue (AD-11).
+   ============================================ */
+
+.code {
+  box-sizing: border-box;
+  padding: 1px var(--s-2);
+  border: 1px solid var(--md-sys-color-outline-variant);
+  border-radius: var(--md-sys-shape-corner-extra-small);
+  background: var(--md-sys-color-surface-container-low);
+  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;
+}
+
+/* Block — recessed code panel. Wraps, scrolls horizontally if needed,
+   and uses the small corner + more padding of a panel rather than an
+   inline token. */
+.code--block {
+  display: block;
+  margin: 0;
+  padding: var(--s-3) var(--s-4);
+  border-radius: var(--md-sys-shape-corner-small);
+  background: var(--md-sys-color-surface-container-low);
+  white-space: pre;
+  overflow-x: auto;
+  tab-size: 2;
+}
+
+}`);
+  sheets = [sheet];
+}
+export default sheets;

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

@@ -12,6 +12,12 @@ export interface ComposerAttachment {
     pages?: number;
     dims?: string;
 }
+/**
+ * @fires attachments-change - Fired when the attachment set changes.
+ * @fires cancel - Fired when the action is cancelled.
+ * @fires send - Fired when the user sends the composed content.
+ * @fires value-change - Fired when the value changes (`detail.value`).
+ */
 export declare class XmComposer extends LitElement {
     initialValue: string;
     initialFocus: boolean;

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

@@ -36,17 +36,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 toolbar.
 import "../button/index.js";
+import composerSheets 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("../composer/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 [...composerSheets, ...primitivesSheets]) {
+        if (!document.adoptedStyleSheets.includes(sheet)) {
+            document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
+        }
     }
 }
 /* ---------- attachment helpers (verbatim from JSX) ---------- */
@@ -120,6 +119,12 @@ const I_CARET = (size = 12) => svg `
     <polyline points="6 9 12 15 18 9" />
   </svg>
 `;
+/**
+ * @fires attachments-change - Fired when the attachment set changes.
+ * @fires cancel - Fired when the action is cancelled.
+ * @fires send - Fired when the user sends the composed content.
+ * @fires value-change - Fired when the value changes (`detail.value`).
+ */
 let XmComposer = class XmComposer extends LitElement {
     constructor() {
         super(...arguments);