@xmesh/system-design 0.0.4 → 0.0.5

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

@@ -0,0 +1,185 @@
+// GENERATED by scripts/gen-styles.mjs — do not edit. Source: lit/components/autocomplete/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-autocomplete — filtering select for XmField (Story 2.4).
+
+   Same composition as xm-select: XmField (chrome) + xm-overlay (anchored
+   listbox). This file styles ONLY the bespoke parts — the text-input control
+   row + chevron, the option rows + match highlight, and the inline no-match
+   empty-state. Positioning / elevation of the panel surface is owned by
+   xm-overlay.
+
+   Surface & ink (AD-13): control + panel ride the inverse-surface card tier →
+   inverse-on-surface ink, on-surface-variant placeholder. The SELECTED option
+   tints coral primary-container + on-primary-container ink. The match highlight
+   carries coral ink AND an underline so the cue survives grayscale — color is
+   never the sole carrier (NFR-15). Coral = selection / match, never severity
+   (AD-11).
+
+   BEM block: \`autocomplete\`. Registered in scripts/check-bem.sh STRICT_BLOCKS.
+   ============================================ */
+
+/* ---------- Control row — text input + chevron in the field wrapper ---------- */
+.autocomplete__control {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+  width: 100%;
+  height: 100%;
+}
+
+/* The native <input> is already transparent / full-bleed via the base
+   \`.field__control input\` rule; here only the trailing chevron needs room. */
+.autocomplete__input {
+  flex: 1;
+  min-width: 0;
+}
+
+.autocomplete__chevron {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  padding-right: var(--s-3);
+  color: var(--md-sys-color-inverse-on-surface);
+  transition: transform var(--md-sys-motion-duration-short3)
+    var(--md-sys-motion-easing-standard);
+}
+.autocomplete__chevron--open {
+  transform: rotate(180deg);
+}
+
+/* ---------- Listbox panel content (inside the overlay) ---------- */
+.autocomplete__listbox {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-0-5);
+  min-width: 220px;
+  max-height: 320px;
+  overflow-y: auto;
+}
+
+.autocomplete__option {
+  display: flex;
+  align-items: center;
+  gap: var(--s-2);
+  padding: var(--s-2) var(--s-3);
+  border-radius: var(--md-sys-shape-corner-small);
+  color: var(--md-sys-color-inverse-on-surface);
+  font:
+    var(--md-sys-typescale-body-medium-weight)
+    var(--md-sys-typescale-body-medium-size) /
+    var(--md-sys-typescale-body-medium-line-height)
+    var(--md-sys-typescale-body-medium-font);
+  cursor: pointer;
+  user-select: none;
+}
+.autocomplete__option-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.autocomplete__option-check {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--md-sys-color-primary);
+}
+
+/* Match highlight — coral ink + underline (dual cue, NFR-15). Background stays
+   transparent so it reads on both the panel ink and the selected coral tint. */
+.autocomplete__mark {
+  background: transparent;
+  color: var(--md-sys-color-primary);
+  font-weight: 600;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+/* Active (keyboard / hover) — MD3 state layer over the panel ink. */
+.autocomplete__option--active {
+  background: color-mix(
+    in oklab,
+    var(--md-sys-color-inverse-on-surface)
+      var(--md-sys-state-hover-state-layer-opacity),
+    transparent
+  );
+}
+
+/* Selected — coral primary-container tint + paired ink (AD-13). */
+.autocomplete__option--selected {
+  background: var(--md-sys-color-primary-container);
+  color: var(--md-sys-color-on-primary-container);
+}
+.autocomplete__option--selected .autocomplete__option-check {
+  color: var(--md-sys-color-on-primary-container);
+}
+.autocomplete__option--selected .autocomplete__mark {
+  color: var(--md-sys-color-on-primary-container);
+}
+.autocomplete__option--selected.autocomplete__option--active {
+  background: color-mix(
+    in oklab,
+    var(--md-sys-color-on-primary-container)
+      var(--md-sys-state-hover-state-layer-opacity),
+    var(--md-sys-color-primary-container)
+  );
+}
+
+.autocomplete__option--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* ---------- No-match empty-state (inline; → xm-empty-state in Epic 4) ---------- */
+.autocomplete__empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: var(--s-1);
+  padding: var(--s-5) var(--s-4);
+  min-width: 220px;
+}
+.autocomplete__empty-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: var(--s-1);
+  color: var(--xm-color-inverse-on-surface-muted);
+}
+.autocomplete__empty-title {
+  margin: 0;
+  color: var(--md-sys-color-inverse-on-surface);
+  font:
+    var(--md-sys-typescale-title-small-weight)
+    var(--md-sys-typescale-title-small-size) /
+    var(--md-sys-typescale-title-small-line-height)
+    var(--md-sys-typescale-title-small-font);
+}
+.autocomplete__empty-copy {
+  margin: 0;
+  color: var(--xm-color-inverse-on-surface-muted);
+  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);
+}
+
+}`);
+  sheets = [sheet];
+}
+export default sheets;

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

@@ -2,6 +2,7 @@ import { LitElement } from "lit";
 import type { TemplateResult } from "lit";
 type AvatarSize = "xs" | "sm" | "md" | "lg";
 export declare class XmAvatar extends LitElement {
+    static styles: CSSStyleSheet[];
     title: string;
     name: string;
     initials: string;

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

@@ -27,7 +27,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
-const AVATAR_CSS = new URL("../avatar/index.css", import.meta.url).href;
+import avatarSheets from "./index.styles.js";
 const deriveInitials = (name) => {
     const parts = name.trim().split(/\s+/).filter(Boolean);
     if (parts.length === 0)
@@ -47,6 +47,9 @@ let XmAvatar = class XmAvatar extends LitElement {
         this.src = "";
         this.size = "md";
     }
+    // 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 = [...avatarSheets]; }
     get _initials() {
         return (this.initials || deriveInitials(this.name)).toUpperCase();
     }
@@ -75,7 +78,6 @@ let XmAvatar = class XmAvatar extends LitElement {
       `;
         }
         return html `
-      <link rel="stylesheet" href="${AVATAR_CSS}" />
       <style>
         :host {
           display: inline-flex;

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

@@ -0,0 +1,76 @@
+// GENERATED by scripts/gen-styles.mjs — do not edit. Source: lit/components/avatar/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 {
+/* ============================================
+   Avatar — circular identity token.
+
+   <xm-avatar> renders a circular identity chip: initials first,
+   then a Lucide-style person line-icon fallback, with an optional
+   image. No imagery is ever required (UX-DR8). The chip is an
+   opaque raise of the desk — it sits on a surface-container-* tier
+   (NOT a third surface family) with ink --md-sys-color-on-surface
+   matched to that backplate (AD-13). No gradient, no status hue.
+
+   Sizes share the canonical xs|sm|md|lg axis so an avatar lines up
+   with a same-size button / list row (AD-9).
+   ============================================ */
+
+.avatar {
+  --avatar-size: 32px;
+  --avatar-font: var(--md-sys-typescale-label-large-size);
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: var(--avatar-size);
+  height: var(--avatar-size);
+  flex-shrink: 0;
+  border-radius: var(--md-sys-shape-corner-full);
+  border: 1px solid var(--md-sys-color-outline-variant);
+  background: var(--md-sys-color-surface-container-high);
+  color: var(--md-sys-color-on-surface);
+  overflow: hidden;
+  user-select: none;
+}
+
+.avatar__initials {
+  font-family: var(--md-sys-typescale-label-large-font);
+  font-size: var(--avatar-font);
+  font-weight: 600;
+  line-height: 1;
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+
+.avatar__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--md-sys-color-on-surface-variant);
+}
+
+.avatar__img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+/* ---------- Sizes — one diameter per shared size axis ---------- */
+.avatar--xs { --avatar-size: 22px; --avatar-font: var(--md-sys-typescale-label-small-size); }
+.avatar--sm { --avatar-size: 28px; --avatar-font: var(--md-sys-typescale-label-medium-size); }
+.avatar--md { --avatar-size: 32px; --avatar-font: var(--md-sys-typescale-label-large-size); }
+.avatar--lg { --avatar-size: 40px; --avatar-font: var(--md-sys-typescale-title-small-size); }
+
+}`);
+  sheets = [sheet];
+}
+export default sheets;

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

@@ -2,6 +2,7 @@ import { LitElement } from "lit";
 import type { TemplateResult } from "lit";
 type AvatarSize = "xs" | "sm" | "md" | "lg";
 export declare class XmAvatarGroup extends LitElement {
+    static styles: CSSStyleSheet[];
     max: number;
     size: AvatarSize;
     private _overflow;

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

@@ -30,7 +30,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
-const GROUP_CSS = new URL("../avatar-group/index.css", import.meta.url).href;
+import avatarGroupSheets from "./index.styles.js";
 let XmAvatarGroup = class XmAvatarGroup extends LitElement {
     constructor() {
         super(...arguments);
@@ -41,6 +41,9 @@ let XmAvatarGroup = class XmAvatarGroup extends LitElement {
             this._applyChildren();
         };
     }
+    // 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 = [...avatarGroupSheets]; }
     updated() {
         this._applyChildren();
     }
@@ -60,7 +63,6 @@ let XmAvatarGroup = class XmAvatarGroup extends LitElement {
     render() {
         const cls = `avatar-group avatar-group--${this.size}`;
         return html `
-      <link rel="stylesheet" href="${GROUP_CSS}" />
       <style>
         :host {
           display: inline-flex;

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

@@ -0,0 +1,74 @@
+// GENERATED by scripts/gen-styles.mjs — do not edit. Source: lit/components/avatar-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 {
+/* ============================================
+   Avatar group — overlapped stack with +N overflow.
+
+   <xm-avatar-group> lays slotted <xm-avatar> children in an
+   overlapped row (consistent negative offset) and, past \`max\`,
+   renders a neutral "+N" overflow token in the same circular
+   avatar shape. The overflow ink is the plain on-surface neutral
+   — never coral, never a status hue (AD-11). Each avatar keeps a
+   thin ring so the stack reads as discrete chips, not a blob.
+   ============================================ */
+
+.avatar-group {
+  --avatar-group-overlap: 8px;
+  --avatar-group-size: 32px;
+  --avatar-group-font: var(--md-sys-typescale-label-large-size);
+
+  display: inline-flex;
+  align-items: center;
+}
+
+/* The ring + overlap on each stacked avatar. ::slotted reaches the
+   light-DOM <xm-avatar> children; the ring uses the host surface so
+   the chips separate cleanly on whatever desk tier they sit on. */
+.avatar-group ::slotted(xm-avatar) {
+  margin-left: calc(var(--avatar-group-overlap) * -1);
+  border-radius: var(--md-sys-shape-corner-full);
+  box-shadow: 0 0 0 2px var(--md-sys-color-surface);
+}
+.avatar-group ::slotted(xm-avatar:first-child) {
+  margin-left: 0;
+}
+
+/* +N overflow token — same circle, neutral surface ink. */
+.avatar-group__overflow {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: var(--avatar-group-size);
+  height: var(--avatar-group-size);
+  margin-left: calc(var(--avatar-group-overlap) * -1);
+  flex-shrink: 0;
+  border-radius: var(--md-sys-shape-corner-full);
+  border: 1px solid var(--md-sys-color-outline-variant);
+  box-shadow: 0 0 0 2px var(--md-sys-color-surface);
+  background: var(--md-sys-color-surface-container-highest);
+  color: var(--md-sys-color-on-surface-variant);
+  font-family: var(--md-sys-typescale-label-large-font);
+  font-size: var(--avatar-group-font);
+  font-weight: 600;
+  line-height: 1;
+  letter-spacing: 0;
+  white-space: nowrap;
+}
+
+/* ---------- Sizes — match xm-avatar diameters + scale overlap ---------- */
+.avatar-group--xs { --avatar-group-size: 22px; --avatar-group-font: var(--md-sys-typescale-label-small-size);  --avatar-group-overlap: 6px; }
+.avatar-group--sm { --avatar-group-size: 28px; --avatar-group-font: var(--md-sys-typescale-label-medium-size); --avatar-group-overlap: 7px; }
+.avatar-group--md { --avatar-group-size: 32px; --avatar-group-font: var(--md-sys-typescale-label-large-size);  --avatar-group-overlap: 8px; }
+.avatar-group--lg { --avatar-group-size: 40px; --avatar-group-font: var(--md-sys-typescale-title-small-size);  --avatar-group-overlap: 10px; }
+
+}`);
+  sheets = [sheet];
+}
+export default sheets;

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

@@ -1,6 +1,7 @@
 import { LitElement } from "lit";
 import type { TemplateResult } from "lit";
 export declare class XmBadge extends LitElement {
+    static styles: CSSStyleSheet[];
     count: number | null;
     dot: boolean;
     max: number;

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

@@ -37,7 +37,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
-const BADGE_CSS = new URL("../badge/index.css", import.meta.url).href;
+import badgeSheets from "./index.styles.js";
 let XmBadge = class XmBadge extends LitElement {
     constructor() {
         super(...arguments);
@@ -46,6 +46,9 @@ let XmBadge = class XmBadge extends LitElement {
         this.max = 99;
         this.label = "";
     }
+    // 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 = [...badgeSheets]; }
     get _hasCount() {
         return typeof this.count === "number" && this.count > 0;
     }
@@ -82,7 +85,6 @@ let XmBadge = class XmBadge extends LitElement {
           >`
             : nothing;
         return html `
-      <link rel="stylesheet" href="${BADGE_CSS}" />
       <style>
         :host {
           display: inline-flex;

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

@@ -0,0 +1,86 @@
+// GENERATED by scripts/gen-styles.mjs — do not edit. Source: lit/components/badge/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 {
+/* ============================================
+   Badge — small count / dot anchored to a child.
+
+   <xm-badge> floats a coral count or a minimal dot at the
+   top-right corner of whatever it wraps (an icon button, an
+   avatar, a label). The coral fill (--md-sys-color-primary /
+   --md-sys-color-on-primary) means "count / attention" — the
+   same functional coral as a selected pill or the active-tab
+   indicator. It is NEVER a severity palette and never references
+   --md-sys-color-error*. Severity is communicated by icon + copy
+   elsewhere, never by this badge's hue.
+
+   The badge paints its own coral surface, so it pairs primary
+   with on-primary independent of the host's surface family
+   (AD-13) — it stays legible floating over any surface.
+   ============================================ */
+
+.badge {
+  position: relative;
+  display: inline-flex;
+}
+
+/* The wrapper the badged child projects into. Establishes the
+   positioning context for the absolutely-placed count/dot. */
+.badge__anchor {
+  display: inline-flex;
+}
+
+/* Shared corner-floated chip — both count and dot inherit this. */
+.badge__count {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: translate(35%, -35%);
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 var(--s-1);
+  border-radius: var(--md-sys-shape-corner-full);
+  /* Hairline halo so the chip separates from a same-hued host
+     (e.g. a coral primary button) without a hard border. */
+  border: 1px solid var(--md-sys-color-surface);
+  background: var(--xm-color-primary-fill);
+  color: var(--md-sys-color-on-primary);
+  font-family: var(--md-sys-typescale-label-small-font);
+  font-size: var(--md-sys-typescale-label-small-size);
+  font-weight: var(--md-sys-typescale-label-small-weight);
+  line-height: 1;
+  letter-spacing: var(--md-sys-typescale-label-small-tracking);
+  white-space: nowrap;
+}
+
+/* Dot — no count, just a presence marker. Collapses to a small
+   circle in the same corner. */
+.badge--dot .badge__count {
+  min-width: 0;
+  width: 10px;
+  height: 10px;
+  padding: 0;
+}
+
+/* Standalone badge (no anchored child) — drops the absolute
+   positioning so the chip flows inline beside text. */
+.badge--standalone .badge__count {
+  position: static;
+  transform: none;
+  border: none;
+}
+
+}`);
+  sheets = [sheet];
+}
+export default sheets;

package/dist/lit/components/brand-mark/index.js

@@ -23,16 +23,15 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
+import brandMarkSheets from "./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("../brand-mark/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 [...brandMarkSheets]) {
+        if (!document.adoptedStyleSheets.includes(sheet)) {
+            document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
+        }
     }
 }
 const DEFAULT_TAGLINE = "Smart-routing AI chat. The mark is an X-mesh — four nodes routing to a single hub through the letterform itself.";

package/dist/lit/components/brand-mark/index.styles.js

@@ -0,0 +1,123 @@
+// GENERATED by scripts/gen-styles.mjs — do not edit. Source: lit/components/brand-mark/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 {
+/* ============================================================
+   <BrandMark /> — xmesh logo lockup.
+
+   Owns the canonical brand glyph (three nodes routing to a single
+   hub) and the wordmark. Three sizes:
+     sm — 28px chip · sidebar header
+     md — 40px chip · generic placement
+     lg — 96px chip · brand showcase / about pages
+
+   Pairs with components/brand-mark/index.jsx. The glyph is a single SVG
+   that renders at any size — only the chip dimensions change.
+   ============================================================ */
+
+.brand-mark {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-2-5);
+  min-width: 0;
+  color: var(--md-sys-color-on-surface);
+}
+
+.brand-mark__chip {
+  flex-shrink: 0;
+  border-radius: 7px;
+  background: transparent;
+  color: var(--md-sys-color-on-surface);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.brand-mark__info {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-1);
+  min-width: 0;
+}
+
+.brand-mark__wordmark {
+  font: 500 15px/1 var(--md-sys-typescale-display-large-font);
+  letter-spacing: -0.01em;
+  text-transform: uppercase;
+  color: var(--md-sys-color-on-surface);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.brand-mark__tagline {
+  font: 400 13px/1.5 var(--md-sys-typescale-body-large-font);
+  color: var(--xm-color-on-surface-soft);
+  max-width: 360px;
+}
+
+/* ---------- Sizes ---------- */
+.brand-mark--sm {
+  gap: var(--s-1);
+}
+.brand-mark--sm .brand-mark__chip {
+  width: 24px; height: 24px;
+  border-radius: 6px;
+}
+.brand-mark--sm .brand-mark__chip svg { width: 20px; height: 20px; }
+
+.brand-mark--md {
+  gap: var(--s-3-5);
+}
+.brand-mark--md .brand-mark__chip {
+  width: 40px; height: 40px;
+  border-radius: 10px;
+}
+.brand-mark--md .brand-mark__chip svg { width: 24px; height: 24px; }
+.brand-mark--md .brand-mark__wordmark { font-size: 20px; }
+
+.brand-mark--lg {
+  gap: var(--s-8);
+}
+.brand-mark--lg .brand-mark__chip {
+  width: 96px; height: 96px;
+  border-radius: 22px;
+}
+.brand-mark--lg .brand-mark__chip svg { width: 60px; height: 60px; }
+.brand-mark--lg .brand-mark__wordmark {
+  font: 600 34px/1 var(--md-sys-typescale-body-large-font);
+  letter-spacing: -0.02em;
+}
+
+/* ---------- Wordmark-only (no glyph) ----------
+   The serif-driven brand wordmark used in the chat sidebar header
+   and editorial brand placements. Display family + medium weight.
+   Sizes scale with the wrapper modifier (--sm | --md | --lg). */
+.brand-mark--wordmark-only { gap: 0; }
+.brand-mark--wordmark-only .brand-mark__wordmark {
+  font:
+    var(--xm-typescale-wordmark-weight)
+    var(--xm-typescale-wordmark-size) /
+    var(--xm-typescale-wordmark-line-height)
+    var(--xm-typescale-wordmark-font);
+  letter-spacing: var(--xm-typescale-wordmark-tracking);
+  text-transform: none;
+  color: var(--md-sys-color-inverse-on-surface);
+}
+.brand-mark--wordmark-only.brand-mark--sm .brand-mark__wordmark { font-size: 16px; }
+.brand-mark--wordmark-only.brand-mark--md .brand-mark__wordmark { font-size: 18px; }
+.brand-mark--wordmark-only.brand-mark--lg .brand-mark__wordmark {
+  font-size: 28px;
+  font-weight: 400;
+  letter-spacing: -0.02em;
+}
+
+}`);
+  sheets = [sheet];
+}
+export default sheets;

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

@@ -6,6 +6,7 @@ export interface BreadcrumbItem {
 }
 type BreadcrumbSeparator = "chevron" | "slash";
 export declare class XmBreadcrumbs extends LitElement {
+    static styles: CSSStyleSheet[];
     items: BreadcrumbItem[];
     separator: BreadcrumbSeparator;
     render(): TemplateResult;