@xmesh/system-design 0.0.3 → 0.0.5

package/dist/lit/components/sidebar-item/index.styles.js

@@ -0,0 +1,147 @@
+// GENERATED by scripts/gen-styles.mjs — do not edit. Source: lit/components/sidebar-item/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 {
+/* ============================================================
+   <SidebarItem /> — chat-list row in the sidebar.
+
+   Two layouts share the same hover/active backgrounds:
+     row     — single-line: [dot] [title]   (sidebar-item.html)
+     stacked — single-line title in chat.html
+
+   Plus a collapsed variant that renders as a 4px stripe rail when the
+   sidebar is in icon-only mode.
+
+   Pairs with components/sidebar-item/index.jsx. The CSS lives on the
+   chat-shell \`surface\` (the warm dark "desk" / cream in light) and uses
+   \`on-surface*\` tokens accordingly.
+   ============================================================ */
+
+.sidebar-item {
+  cursor: pointer;
+  border-radius: 8px;
+  transition: background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
+}
+
+/* ---------- Layout: row ---------- */
+.sidebar-item--row {
+  display: flex;
+  align-items: center;
+  gap: var(--s-2-5);
+  padding: 9px var(--s-2-5);
+}
+.sidebar-item--row .sidebar-item__title {
+  font: 500 13px/1.2 var(--md-sys-typescale-body-large-font);
+  color: var(--md-sys-color-on-surface);
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+/* The dot in the row layout is a leading 8px circle; consumers
+   pass showDot to render it filled. The slot is always present so
+   titles align across rows. */
+.sidebar-item--row .sidebar-item__dot {
+  width: 8px; height: 8px;
+  border-radius: 999px;
+  background: transparent;
+  flex-shrink: 0;
+}
+.sidebar-item--row.has-dot .sidebar-item__dot {
+  background: var(--md-sys-color-primary);
+}
+
+/* ---------- Layout: stacked ---------- */
+.sidebar-item--stacked {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-0-5);
+  padding: var(--s-2) var(--s-2-5);
+}
+.sidebar-item--stacked .sidebar-item__title {
+  font: 500 13px/1.25 var(--md-sys-typescale-body-large-font);
+  color: var(--md-sys-color-on-surface);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ---------- Hover & active (shared across layouts) ----------
+   Hover and active were the same near-black surface-container-lowest, so
+   the two states read identically and reused the vanishing-bubble color.
+   The sidebar rides \`surface\` (the desk), so both states must be a step ABOVE
+   it to read — surface-container-low equals \`surface\` in dark and would vanish.
+   Ramp upward: desk → hover (surface-container) → active (surface-container-high,
+   the same raised family the user bubble / composer ride). */
+.sidebar-item:hover,
+.sidebar-item.is-hover {
+  background: var(--md-sys-color-surface-container);
+}
+.sidebar-item.is-active {
+  background: var(--md-sys-color-surface-container-high);
+}
+.sidebar-item:hover .sidebar-item__title,
+.sidebar-item.is-hover .sidebar-item__title,
+.sidebar-item.is-active .sidebar-item__title {
+  color: var(--md-sys-color-on-surface);
+}
+
+/* Dark theme — push the resting title color further into gray so the
+   active item's strong-ink title pops as the brighter, more-white state.
+   Light theme keeps the standard on-surface ramp (already reads as a clear
+   default → strong contrast there). */
+[data-theme="dark"] .sidebar-item:not(.is-active):not(.is-hover):not(:hover) .sidebar-item__title {
+  color: var(--md-sys-color-on-surface-variant);
+}
+
+/* ---------- Collapsed: 4px stripe rail ---------- */
+.sidebar-item--collapsed {
+  width: 24px;
+  height: 4px;
+  padding: 0;
+  border-radius: 2px;
+  background: var(--xm-color-on-surface-soft);
+  opacity: 0.35;
+  transition:
+    opacity 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);
+}
+.sidebar-item--collapsed:hover {
+  background: var(--md-sys-color-on-surface);
+  opacity: 0.6;
+}
+.sidebar-item--collapsed.is-active {
+  background: var(--md-sys-color-on-surface);
+  opacity: 0.85;
+  box-shadow: none;
+}
+.sidebar-item--collapsed > * { display: none; }
+
+/* ---------- Eyebrow: section header above a group of items ----------
+   Renders as an uppercase mono caption on the surface. No hover, no
+   active — it's a label, not a target. */
+.sidebar-item--eyebrow {
+  cursor: default;
+  padding: var(--s-3-5) var(--s-2-5) var(--s-1-5);
+  font:
+    var(--md-sys-typescale-label-small-weight)
+    var(--md-sys-typescale-label-small-size) /
+    var(--md-sys-typescale-label-small-line-height)
+    var(--md-sys-typescale-label-small-font);
+  color: var(--xm-color-on-surface-soft);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  font-family: var(--xm-typescale-mono-font);
+}
+.sidebar-item--eyebrow:hover { background: transparent; }
+
+}`);
+  sheets = [sheet];
+}
+export default sheets;

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

@@ -2,6 +2,7 @@ import { LitElement } from "lit";
 import type { TemplateResult } from "lit";
 export type SkeletonVariant = "line" | "block" | "circle";
 export declare class XmSkeleton extends LitElement {
+    static styles: CSSStyleSheet[];
     variant: SkeletonVariant;
     width: string;
     height: string;

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

@@ -39,7 +39,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
-const SKELETON_CSS = new URL("../skeleton/index.css", import.meta.url).href;
+import skeletonSheets from "./index.styles.js";
 let XmSkeleton = class XmSkeleton extends LitElement {
     constructor() {
         super(...arguments);
@@ -49,13 +49,15 @@ let XmSkeleton = class XmSkeleton extends LitElement {
         this.lines = 1;
         this.radius = "";
     }
+    // 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 = [...skeletonSheets]; }
     render() {
         const v = this.variant === "block" || this.variant === "circle"
             ? this.variant
             : "line";
         const cls = `skeleton skeleton--${v}`;
         return html `
-      <link rel="stylesheet" href="${SKELETON_CSS}" />
       <style>
         :host { display: block; }
         :host([hidden]) { display: none; }

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

@@ -0,0 +1,95 @@
+// GENERATED by scripts/gen-styles.mjs — do not edit. Source: lit/components/skeleton/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 {
+/* ============================================
+   Skeleton — gradient-free loading placeholder.
+
+   The pulse is a calm OPACITY animation on a neutral surface fill — a
+   color-mix between two surface-container tiers. There is NO shimmer /
+   sweep gradient anywhere (FR-147 / A10): the snackbar scrim is the
+   system's only sanctioned gradient. The animation honors
+   prefers-reduced-motion.
+
+   The fill is neutral chrome — no accent, no severity hue (AD-11). It
+   sits on the host surface family it's placed in; the surface-container
+   tiers read on both the desk and the inverse card stack, in both themes
+   (AD-13).
+
+   BEM block: \`skeleton\`. Registered in scripts/check-bem.sh STRICT_BLOCKS.
+   Elements: __shape (one placeholder), __line (a text line). Modifiers:
+   --line / --block / --circle.
+   ============================================ */
+
+.skeleton {
+  display: block;
+  width: 100%;
+}
+
+/* Line variant stacks its text lines with a consistent gap. */
+.skeleton--line {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-2);
+}
+
+.skeleton__shape {
+  display: block;
+  /* Neutral fill — a color-mix between two surface-container tiers. This is
+     a flat fill, NOT a gradient: there is no shimmer sweep, no linear- /
+     radial-gradient. The pulse comes from the opacity animation below. */
+  background: color-mix(
+    in oklch,
+    var(--md-sys-color-surface-container-high) 60%,
+    var(--md-sys-color-surface-container-highest)
+  );
+  border-radius: var(--md-sys-shape-corner-small);
+  /* Calm pulse: alternate opacity, slow tempo, standard easing. */
+  animation: skeleton-pulse var(--md-sys-motion-duration-extra-long2)
+    var(--md-sys-motion-easing-standard) infinite alternate;
+}
+
+/* A single text line — height from the body typescale, full width by default
+   (the element narrows the last line of a paragraph via inline width). */
+.skeleton__line {
+  height: 0.85em;
+  width: 100%;
+}
+
+/* Block — arbitrary rectangle (card / image placeholder). */
+.skeleton--block .skeleton__shape {
+  height: 120px;
+  border-radius: var(--md-sys-shape-corner-medium);
+}
+
+/* Circle — avatar / icon placeholder. */
+.skeleton--circle .skeleton__shape {
+  width: 40px;
+  height: 40px;
+  border-radius: var(--md-sys-shape-corner-full);
+}
+
+@keyframes skeleton-pulse {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0.45;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .skeleton__shape {
+    animation: none;
+  }
+}
+
+}`);
+  sheets = [sheet];
+}
+export default sheets;

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

@@ -1,6 +1,11 @@
 import type { PropertyValues, TemplateResult } from "lit";
 import { XmField } from "../field/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 XmSlider extends XmField {
+    static styles: CSSStyleSheet[];
     min: number;
     max: number;
     step: number;

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

@@ -33,8 +33,13 @@ 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 SLIDER_CSS = new URL("../slider/index.css", import.meta.url).href;
-const PRIMITIVES_CSS = new URL("../primitives/index.css", import.meta.url).href;
+import primitivesSheets from "../primitives/index.styles.js";
+import fieldSheets from "../field/index.styles.js";
+import sliderSheets 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 XmSlider = class XmSlider extends XmField {
     constructor() {
         super(...arguments);
@@ -105,6 +110,10 @@ let XmSlider = class XmSlider extends XmField {
                 this._commit();
         };
     }
+    // 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, ...sliderSheets]; }
     connectedCallback() {
         super.connectedCallback();
         // Seed the numeric value from the uncontrolled `value` attribute, snapping
@@ -199,8 +208,6 @@ let XmSlider = class XmSlider extends XmField {
         const ctrl = this.controlAria;
         const pct = `${(this._fraction * 100).toFixed(2)}%`;
         return html `
-      <link rel="stylesheet" href="${PRIMITIVES_CSS}" />
-      <link rel="stylesheet" href="${SLIDER_CSS}" />
       <style>
         :host {
           display: block;

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

@@ -0,0 +1,185 @@
+// GENERATED by scripts/gen-styles.mjs — do not edit. Source: lit/components/slider/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-slider — draggable range slider on XmField (Story 2.8).
+
+   Extends XmField for chrome but renders its own layout (the bordered text-field
+   box is wrong for a slider): a label row (label + optional value), a track row
+   (rail + active fill + thumb), and the helper/error row. State machinery
+   (disabled / form-association / focus / ARIA) is inherited; this file styles the
+   track, fill, thumb, label, and value.
+
+   Surface & ink (AD-13): the slider rides the inverse-surface card tier — label +
+   value are inverse-on-surface ink. The active (filled) portion + the thumb are
+   the single coral accent (--md-sys-color-primary). The inactive rail, track
+   height, and thumb size are --xm-slider-* extensions (AD-10). Coral = the filled
+   value, never severity (AD-11). The error string carries severity via the warn
+   icon + copy.
+
+   Motion (NFR-19): fill/thumb position is layout-driven; the focus ring + hover
+   transition short3 standard, no bounce.
+
+   BEM block: \`slider\`. Registered in scripts/check-bem.sh STRICT_BLOCKS.
+   ============================================ */
+
+.slider {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-2);
+  width: 100%;
+}
+
+/* ---------- Label row — field label + optional value ---------- */
+.slider__label-row {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--s-2);
+}
+.slider__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);
+}
+.slider__label-text {
+  letter-spacing: 0;
+}
+.slider__required {
+  color: var(--md-sys-color-primary);
+  font-weight: 700;
+  line-height: 1;
+}
+.slider__value {
+  color: var(--md-sys-color-inverse-on-surface);
+  font:
+    var(--md-sys-typescale-label-medium-weight)
+    var(--md-sys-typescale-label-medium-size) /
+    var(--md-sys-typescale-label-medium-line-height)
+    var(--md-sys-typescale-label-medium-font);
+  font-variant-numeric: tabular-nums;
+}
+
+/* ---------- Track — rail + active fill + thumb ---------- */
+.slider__track {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: var(--xm-slider-thumb-size);
+  /* Inset the interactive box by half a thumb so the thumb (positioned by its
+     center at left:fraction) never overflows the field width. The rail/fill and
+     the pointer math all share this same inset coordinate space. */
+  margin: 0 calc(var(--xm-slider-thumb-size) / 2);
+  cursor: pointer;
+  touch-action: none;
+}
+
+.slider__rail {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: var(--xm-slider-track-height);
+  border-radius: var(--md-sys-shape-corner-full);
+  background: var(--xm-slider-track-inactive);
+}
+
+.slider__fill {
+  position: absolute;
+  left: 0;
+  height: var(--xm-slider-track-height);
+  border-radius: var(--md-sys-shape-corner-full);
+  background: var(--md-sys-color-primary);
+}
+
+.slider__thumb {
+  position: absolute;
+  top: 50%;
+  width: var(--xm-slider-thumb-size);
+  height: var(--xm-slider-thumb-size);
+  margin-left: calc(var(--xm-slider-thumb-size) / -2);
+  transform: translateY(-50%);
+  border-radius: var(--md-sys-shape-corner-full);
+  background: var(--md-sys-color-primary);
+  box-shadow: var(--xm-slider-thumb-shadow);
+  outline: none;
+  cursor: grab;
+  transition: box-shadow var(--md-sys-motion-duration-short3)
+    var(--md-sys-motion-easing-standard);
+}
+.slider__thumb:active {
+  cursor: grabbing;
+}
+
+/* Focus ring — the canonical 3px coral halo on the thumb. */
+.slider__thumb:focus-visible {
+  box-shadow:
+    var(--xm-slider-thumb-shadow),
+    var(--xm-state-focus-ring);
+}
+
+/* ---------- Disabled — shared reduced emphasis ---------- */
+.slider--disabled .slider__track {
+  cursor: not-allowed;
+}
+.slider--disabled .slider__thumb {
+  cursor: not-allowed;
+  box-shadow: none;
+}
+.slider--disabled .slider__rail,
+.slider--disabled .slider__fill,
+.slider--disabled .slider__thumb {
+  opacity: 0.45;
+}
+.slider--disabled .slider__label,
+.slider--disabled .slider__value {
+  color: var(--xm-color-inverse-on-surface-disabled);
+}
+
+/* ---------- Helper / error message row ----------
+   Severity is the warn icon + copy, not a color (rule 3a). */
+.slider__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);
+}
+.slider__message--helper {
+  color: var(--xm-color-inverse-on-surface-muted);
+}
+.slider__message--error {
+  color: var(--md-sys-color-inverse-on-surface);
+}
+.slider__error-icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  margin-top: 1px;
+  color: var(--md-sys-color-inverse-on-surface);
+}
+.slider__message-text {
+  flex: 1;
+  min-width: 0;
+  text-wrap: pretty;
+}
+
+}`);
+  sheets = [sheet];
+}
+export default sheets;

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

@@ -10,7 +10,11 @@ export interface SnackPreset {
     secondaryLabel: string;
 }
 export declare const SNACK_PRESETS: Record<SnackKind, SnackPreset>;
-declare class XmSnackbar extends LitElement {
+/**
+ * @fires snackbar-dismiss - Fired when the snackbar is dismissed.
+ * @fires snackbar-primary - Fired when the snackbar's primary action is activated.
+ */
+export declare class XmSnackbar extends LitElement {
     kind: SnackKind;
     code: string;
     title: string;
@@ -30,4 +34,3 @@ declare global {
         "xm-snackbar": XmSnackbar;
     }
 }
-export {};

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

@@ -20,8 +20,8 @@
     snackbar-primary    — primary action clicked (Retry / Open settings)
     snackbar-dismiss    — secondary/dismiss action clicked
 
-  Light DOM. components/snackbar/index.css and components/primitives/index.css
-  must be loaded in the host page.
+  Light DOM. This module appends its stylesheets (snackbar + primitives) to
+  document.head on import.
 
   SNACK_PRESETS is also exported so previews can spread a preset onto
   the element via JS.
@@ -34,6 +34,19 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, html, svg, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
+import snackSheets from "./index.styles.js";
+import primSheets 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, so primitives is adopted exactly once across light-DOM components.
+// The CSS is wrapped in @layer components, so consumer overrides win (spine AD-2).
+if (typeof document !== "undefined") {
+    for (const sheet of [...primSheets, ...snackSheets]) {
+        if (!document.adoptedStyleSheets.includes(sheet)) {
+            document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
+        }
+    }
+}
 export const SNACK_PRESETS = {
     auth: {
         kind: "auth",
@@ -89,6 +102,10 @@ const RETRY_ICON = () => SHELL(13, 2, svg `
   <path d="M21 12a9 9 0 0 1-15.5 6.3L3 16" />
   <path d="M3 21v-5h5" />
 `);
+/**
+ * @fires snackbar-dismiss - Fired when the snackbar is dismissed.
+ * @fires snackbar-primary - Fired when the snackbar's primary action is activated.
+ */
 let XmSnackbar = class XmSnackbar extends LitElement {
     constructor() {
         super(...arguments);
@@ -193,3 +210,4 @@ __decorate([
 XmSnackbar = __decorate([
     customElement("xm-snackbar")
 ], XmSnackbar);
+export { XmSnackbar };