@xmesh/system-design 0.0.3 → 0.0.5

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"

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

@@ -1,7 +1,8 @@
 import { LitElement } from "lit";
 import type { TemplateResult } from "lit";
 type AvatarSize = "xs" | "sm" | "md" | "lg";
-declare class XmAvatar extends LitElement {
+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;
@@ -110,3 +112,4 @@ __decorate([
 XmAvatar = __decorate([
     customElement("xm-avatar")
 ], XmAvatar);
+export { XmAvatar };

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

@@ -1,7 +1,8 @@
 import { LitElement } from "lit";
 import type { TemplateResult } from "lit";
 type AvatarSize = "xs" | "sm" | "md" | "lg";
-declare class XmAvatarGroup extends LitElement {
+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;
@@ -95,3 +97,4 @@ __decorate([
 XmAvatarGroup = __decorate([
     customElement("xm-avatar-group")
 ], XmAvatarGroup);
+export { XmAvatarGroup };

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";
-declare class XmBadge extends LitElement {
+export declare class XmBadge extends LitElement {
+    static styles: CSSStyleSheet[];
     count: number | null;
     dot: boolean;
     max: number;
@@ -15,4 +16,3 @@ declare global {
         "xm-badge": XmBadge;
     }
 }
-export {};

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;
@@ -113,3 +115,4 @@ __decorate([
 XmBadge = __decorate([
     customElement("xm-badge")
 ], XmBadge);
+export { XmBadge };

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.d.ts

@@ -4,10 +4,10 @@ type BrandSize = "sm" | "md" | "lg";
 declare class LightElement extends LitElement {
     createRenderRoot(): HTMLElement | DocumentFragment;
 }
-declare class XmBrandGlyph extends LightElement {
+export declare class XmBrandGlyph extends LightElement {
     render(): TemplateResult;
 }
-declare class XmBrandMark extends LightElement {
+export declare class XmBrandMark extends LightElement {
     size: BrandSize;
     showGlyph: boolean;
     showWordmark: boolean;

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

@@ -23,6 +23,17 @@ 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 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.";
 class LightElement extends LitElement {
     createRenderRoot() {
@@ -59,6 +70,7 @@ let XmBrandGlyph = class XmBrandGlyph extends LightElement {
 XmBrandGlyph = __decorate([
     customElement("xm-brand-glyph")
 ], XmBrandGlyph);
+export { XmBrandGlyph };
 let XmBrandMark = class XmBrandMark extends LightElement {
     constructor() {
         super(...arguments);
@@ -114,3 +126,4 @@ __decorate([
 XmBrandMark = __decorate([
     customElement("xm-brand-mark")
 ], XmBrandMark);
+export { XmBrandMark };