@xmesh/system-design 0.0.3 → 0.0.5

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

@@ -0,0 +1,159 @@
+// GENERATED by scripts/gen-styles.mjs — do not edit. Source: lit/components/chip/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 — compact label pill (tag / filter / category).
+
+   <xm-chip> is a transparent pill that sits on a surface* host, so
+   default ink is --md-sys-color-on-surface (AD-13). Selected flips
+   to the coral primary-container fill + on-primary-container ink —
+   the selected-pill pattern (UX-DR3), never a status hue (AD-11).
+   Removable chips carry a trailing x. A category chip may take a
+   saturated background ONLY via the --xm-method-* / --xm-ext-* sets
+   (category, never severity); --md-sys-color-error* is forbidden.
+
+   Sizes share the canonical xs|sm|md|lg axis (AD-9).
+   ============================================ */
+
+.chip {
+  --chip-height: 28px;
+  --chip-pad-x: var(--s-3);
+  --chip-font: var(--md-sys-typescale-label-medium-size);
+  --chip-gap: var(--s-1);
+
+  display: inline-flex;
+  align-items: center;
+  gap: var(--chip-gap);
+  box-sizing: border-box;
+  height: var(--chip-height);
+  padding: 0 var(--chip-pad-x);
+  border: 1px solid var(--md-sys-color-outline-variant);
+  border-radius: var(--md-sys-shape-corner-full);
+  background: transparent;
+  color: var(--md-sys-color-on-surface);
+  font-family: var(--md-sys-typescale-label-medium-font);
+  font-size: var(--chip-font);
+  font-weight: 500;
+  line-height: 1;
+  letter-spacing: 0;
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  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),
+    border-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
+}
+/* The host element owns focus (role=button + tabindex on <xm-chip>) so the
+   3px ring is applied via :host(:focus-visible) .chip in the component's
+   inline <style>. The forced-state helper still previews it. */
+.chip.is-focus {
+  box-shadow: var(--xm-state-focus-ring);
+}
+.chip:hover,
+.chip.is-hover {
+  background: color-mix(in oklab, var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity), transparent);
+  border-color: var(--md-sys-color-outline);
+}
+
+/* ---------- Selected — coral selected-pill ---------- */
+.chip--selected {
+  border-color: color-mix(in oklab, var(--md-sys-color-primary) 60%, transparent);
+  background: var(--md-sys-color-primary-container);
+  color: var(--md-sys-color-on-primary-container);
+}
+.chip--selected:hover,
+.chip--selected.is-hover {
+  background: var(--md-sys-color-primary-container);
+  border-color: var(--md-sys-color-primary);
+}
+
+/* ---------- Category — saturated ONLY for category (AD-11) ---------- */
+.chip--category-get    { background: var(--xm-method-get-bg);    color: var(--xm-method-get-ink);    border-color: transparent; }
+.chip--category-post   { background: var(--xm-method-post-bg);   color: var(--xm-method-post-ink);   border-color: transparent; }
+.chip--category-put    { background: var(--xm-method-put-bg);    color: var(--xm-method-put-ink);    border-color: transparent; }
+.chip--category-delete { background: var(--xm-method-delete-bg); color: var(--xm-method-delete-ink); border-color: transparent; }
+.chip--category-patch  { background: var(--xm-method-patch-bg);  color: var(--xm-method-patch-ink);  border-color: transparent; }
+.chip--category-yml    { background: var(--xm-ext-yml-bg);       color: var(--xm-ext-yml-ink);       border-color: transparent; }
+.chip--category-json   { background: var(--xm-ext-json-bg);      color: var(--xm-ext-json-ink);      border-color: transparent; }
+/* Category chips don't change hue on hover — the hue IS the meaning. */
+.chip--category-get:hover, .chip--category-get.is-hover,
+.chip--category-post:hover, .chip--category-post.is-hover,
+.chip--category-put:hover, .chip--category-put.is-hover,
+.chip--category-delete:hover, .chip--category-delete.is-hover,
+.chip--category-patch:hover, .chip--category-patch.is-hover,
+.chip--category-yml:hover, .chip--category-yml.is-hover,
+.chip--category-json:hover, .chip--category-json.is-hover {
+  filter: none;
+  border-color: transparent;
+}
+
+/* ---------- Disabled — shared reduced-emphasis ---------- */
+.chip--disabled {
+  cursor: not-allowed;
+  color: var(--xm-color-on-surface-disabled);
+  border-color: var(--md-sys-color-outline-variant);
+}
+.chip--disabled:hover,
+.chip--disabled.is-hover {
+  background: transparent;
+  border-color: var(--md-sys-color-outline-variant);
+}
+.chip--selected.chip--disabled:hover {
+  background: var(--md-sys-color-primary-container);
+}
+
+/* ---------- Sizes ---------- */
+.chip--xs { --chip-height: 22px; --chip-pad-x: var(--s-2); --chip-font: var(--md-sys-typescale-label-small-size);  --chip-gap: 3px; }
+.chip--sm { --chip-height: 24px; --chip-pad-x: var(--s-2); --chip-font: var(--md-sys-typescale-label-small-size); }
+.chip--md { --chip-height: 28px; --chip-pad-x: var(--s-3); --chip-font: var(--md-sys-typescale-label-medium-size); }
+.chip--lg { --chip-height: 34px; --chip-pad-x: var(--s-4); --chip-font: var(--md-sys-typescale-label-large-size); }
+
+/* ---------- Inner elements ---------- */
+.chip__icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+.chip__icon.is-empty { display: none; }
+
+.chip__label {
+  display: inline-block;
+}
+
+.chip__remove {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  margin-left: var(--s-0-5);
+  margin-right: -2px;
+  padding: 0;
+  border: none;
+  border-radius: var(--md-sys-shape-corner-full);
+  background: transparent;
+  color: currentColor;
+  cursor: pointer;
+  transition: background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
+}
+.chip__remove:hover {
+  background: color-mix(in oklab, currentColor 18%, transparent);
+}
+.chip__remove:focus-visible {
+  outline: none;
+  box-shadow: var(--xm-state-focus-ring);
+}
+
+}`);
+  sheets = [sheet];
+}
+export default sheets;

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;
-declare class XmChipGroup extends LitElement {
+/**
+ * @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;
@@ -169,3 +174,4 @@ __decorate([
 XmChipGroup = __decorate([
     customElement("xm-chip-group")
 ], XmChipGroup);
+export { XmChipGroup };

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";
-declare class XmCode extends LitElement {
+export declare class XmCode extends LitElement {
+    static styles: CSSStyleSheet[];
     block: boolean;
     render(): TemplateResult;
 }
@@ -9,4 +10,3 @@ declare global {
         "xm-code": XmCode;
     }
 }
-export {};

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>
     `;
@@ -66,3 +67,4 @@ __decorate([
 XmCode = __decorate([
     customElement("xm-code")
 ], XmCode);
+export { XmCode };

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,7 +12,13 @@ export interface ComposerAttachment {
     pages?: number;
     dims?: string;
 }
-declare class XmComposer extends LitElement {
+/**
+ * @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;
     processing: boolean;
@@ -64,4 +70,3 @@ declare global {
         "xm-composer": XmComposer;
     }
 }
-export {};

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

@@ -36,6 +36,18 @@ 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 sheet of [...composerSheets, ...primitivesSheets]) {
+        if (!document.adoptedStyleSheets.includes(sheet)) {
+            document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
+        }
+    }
+}
 /* ---------- attachment helpers (verbatim from JSX) ---------- */
 const STRIP_LIMIT = 10;
 const HARD_CAP = 50;
@@ -107,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);
@@ -711,3 +729,4 @@ __decorate([
 XmComposer = __decorate([
     customElement("xm-composer")
 ], XmComposer);
+export { XmComposer };