@xmesh/system-design 0.0.3 → 0.0.4

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

@@ -2,7 +2,7 @@ import { LitElement } from "lit";
 import type { TemplateResult } from "lit";
 type AlertSeverity = "info" | "success" | "warning" | "critical";
 type AlertVariant = "inline" | "banner";
-declare class XmAlert extends LitElement {
+export declare class XmAlert extends LitElement {
     severity: AlertSeverity;
     heading: string;
     dismissible: boolean;

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

@@ -189,3 +189,4 @@ __decorate([
 XmAlert = __decorate([
     customElement("xm-alert")
 ], XmAlert);
+export { XmAlert };

package/dist/lit/components/app-bar/index.d.ts

@@ -1,7 +1,7 @@
 import { LitElement } from "lit";
 import type { TemplateResult } from "lit";
 type AppBarSize = "xs" | "sm" | "md" | "lg";
-declare class XmAppBar extends LitElement {
+export declare class XmAppBar extends LitElement {
     size: AppBarSize;
     sticky: boolean;
     private _mo;

package/dist/lit/components/app-bar/index.js

@@ -118,3 +118,4 @@ __decorate([
 XmAppBar = __decorate([
     customElement("xm-app-bar")
 ], XmAppBar);
+export { XmAppBar };

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

@@ -2,7 +2,7 @@ import { LitElement } from "lit";
 import type { TemplateResult } from "lit";
 import "../button/index.js";
 type ArtifactView = "preview" | "code";
-declare class XmArtifact extends LitElement {
+export declare class XmArtifact extends LitElement {
     title: string;
     sub: string[] | null;
     subCsv: string;

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

@@ -29,8 +29,8 @@
     refresh
     close
 
-  Light DOM. components/artifact/index.css + components/button/index.css +
-  components/primitives/index.css must be loaded in the host page.
+  Light DOM. This module appends its stylesheets (artifact + primitives) to
+  document.head on import; <xm-button> brings its own CSS via its shadow root.
 */
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -42,6 +42,19 @@ 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 head toolbar.
 import "../button/index.js";
+if (typeof document !== "undefined") {
+    for (const href of [
+        new URL("../artifact/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);
+    }
+}
 const ICON_EYE = (size = 14) => svg `
   <svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none"
        stroke="currentColor" stroke-width="1.8" stroke-linecap="round"
@@ -292,3 +305,4 @@ __decorate([
 XmArtifact = __decorate([
     customElement("xm-artifact")
 ], XmArtifact);
+export { XmArtifact };

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

@@ -1,7 +1,7 @@
 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 {
     title: string;
     name: string;
     initials: string;

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

@@ -110,3 +110,4 @@ __decorate([
 XmAvatar = __decorate([
     customElement("xm-avatar")
 ], XmAvatar);
+export { XmAvatar };

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

@@ -1,7 +1,7 @@
 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 {
     max: number;
     size: AvatarSize;
     private _overflow;

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

@@ -95,3 +95,4 @@ __decorate([
 XmAvatarGroup = __decorate([
     customElement("xm-avatar-group")
 ], XmAvatarGroup);
+export { XmAvatarGroup };

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

@@ -1,6 +1,6 @@
 import { LitElement } from "lit";
 import type { TemplateResult } from "lit";
-declare class XmBadge extends LitElement {
+export declare class XmBadge extends LitElement {
     count: number | null;
     dot: boolean;
     max: number;
@@ -15,4 +15,3 @@ declare global {
         "xm-badge": XmBadge;
     }
 }
-export {};

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

@@ -113,3 +113,4 @@ __decorate([
 XmBadge = __decorate([
     customElement("xm-badge")
 ], XmBadge);
+export { XmBadge };

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,18 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
+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);
+    }
+}
 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 +71,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 +127,4 @@ __decorate([
 XmBrandMark = __decorate([
     customElement("xm-brand-mark")
 ], XmBrandMark);
+export { XmBrandMark };

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

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

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

@@ -102,3 +102,4 @@ __decorate([
 XmBreadcrumbs = __decorate([
     customElement("xm-breadcrumbs")
 ], XmBreadcrumbs);
+export { XmBreadcrumbs };

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

@@ -16,14 +16,14 @@ export interface BubbleArtifact {
 declare class LightElement extends LitElement {
     createRenderRoot(): HTMLElement | DocumentFragment;
 }
-declare class XmBubbleGroup extends LightElement {
+export declare class XmBubbleGroup extends LightElement {
     variant: BubbleVariant;
     private _authoredChildren;
     connectedCallback(): void;
     render(): TemplateResult;
     updated(): void;
 }
-declare class XmBubble extends LightElement {
+export declare class XmBubble extends LightElement {
     variant: BubbleVariant;
     attachments: BubbleAttachment[];
     artifact: BubbleArtifact | null;
@@ -39,7 +39,7 @@ declare class XmBubble extends LightElement {
     render(): TemplateResult;
     updated(): void;
 }
-declare class XmBubbleActions extends LightElement {
+export declare class XmBubbleActions extends LightElement {
     ts: string;
     ariaLabel: string;
     private _authored;
@@ -54,7 +54,7 @@ declare class XmBubbleActions extends LightElement {
     render(): TemplateResult;
     updated(): void;
 }
-declare class XmArtifactChip extends LightElement {
+export declare class XmArtifactChip extends LightElement {
     artifact: BubbleArtifact | null;
     download: boolean;
     private _open;

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

@@ -36,6 +36,20 @@ import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { customElement, property } from "lit/decorators.js";
 // Register <xm-button> for the artifact "Download" action below.
 import "../button/index.js";
+if (typeof document !== "undefined") {
+    for (const href of [
+        new URL("../bubble/index.css", import.meta.url).href,
+        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);
+    }
+}
 class LightElement extends LitElement {
     createRenderRoot() {
         return this;
@@ -143,6 +157,7 @@ __decorate([
 XmBubbleGroup = __decorate([
     customElement("xm-bubble-group")
 ], XmBubbleGroup);
+export { XmBubbleGroup };
 /* ─────────────────────────────────────────────────────────────
    <xm-bubble> — the message body.
 
@@ -349,6 +364,7 @@ __decorate([
 XmBubble = __decorate([
     customElement("xm-bubble")
 ], XmBubble);
+export { XmBubble };
 /* ─────────────────────────────────────────────────────────────
    <xm-bubble-actions> — hover-reveal toolbar.
 
@@ -530,6 +546,7 @@ __decorate([
 XmBubbleActions = __decorate([
     customElement("xm-bubble-actions")
 ], XmBubbleActions);
+export { XmBubbleActions };
 /* ─────────────────────────────────────────────────────────────
    <xm-artifact-chip> — standalone chip for surfaces other than
    xm-bubble (e.g. snackbar, drawer). xm-bubble renders the same
@@ -615,3 +632,4 @@ __decorate([
 XmArtifactChip = __decorate([
     customElement("xm-artifact-chip")
 ], XmArtifactChip);
+export { XmArtifactChip };

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

@@ -4,7 +4,7 @@ type ButtonVariant = "primary" | "secondary" | "outline" | "ghost" | "ghost-acce
 type ButtonSize = "xs" | "sm" | "md" | "lg";
 type ButtonType = "button" | "submit" | "reset";
 type ForceState = "hover" | "active" | "focus" | null;
-declare class XmButton extends LitElement {
+export declare class XmButton extends LitElement {
     static shadowRootOptions: ShadowRootInit;
     variant: ButtonVariant;
     size: ButtonSize;

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

@@ -200,3 +200,4 @@ __decorate([
 XmButton = __decorate([
     customElement("xm-button")
 ], XmButton);
+export { XmButton };

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

@@ -2,7 +2,7 @@ import { LitElement } from "lit";
 import type { TemplateResult } from "lit";
 type CardSize = "xs" | "sm" | "md" | "lg";
 type CardElevation = 0 | 1 | 2 | 3 | 4 | 5;
-declare class XmCard extends LitElement {
+export declare class XmCard extends LitElement {
     elevation: CardElevation;
     size: CardSize;
     private _mo;

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

@@ -131,3 +131,4 @@ __decorate([
 XmCard = __decorate([
     customElement("xm-card")
 ], XmCard);
+export { XmCard };

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

@@ -25,7 +25,7 @@ export interface ThreadMessage {
     atts?: BubbleAttachment[];
     artifact?: BubbleArtifact | null;
 }
-declare class XmChatShell extends LitElement {
+export declare class XmChatShell extends LitElement {
     conversations: ConversationGroup[];
     thread: ThreadMessage[];
     processing: boolean;
@@ -71,4 +71,3 @@ declare global {
         "xm-chat-shell": XmChatShell;
     }
 }
-export {};

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

@@ -31,8 +31,8 @@
                      (opens the artifact slot).
     artifact-close
 
-  Light DOM. Loads the entire palette of dependent stylesheets at the
-  preview level. Composes the previously-ported xm-* elements.
+  Light DOM. This module and the xm-* elements it composes each append their
+  own stylesheets to document.head on import; nothing extra is needed.
 */
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -52,6 +52,19 @@ import "../sidebar-item/index.js";
 import "../bubble/index.js";
 import "../composer/index.js";
 import "../artifact/index.js";
+if (typeof document !== "undefined") {
+    for (const href of [
+        new URL("../chat/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);
+    }
+}
 /* ---------- Inline icon SVG fragments (used in topbar / sidebar chrome) */
 const I_PANEL = (size = 16) => svg `
   <svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none"
@@ -587,3 +600,4 @@ __decorate([
 XmChatShell = __decorate([
     customElement("xm-chat-shell")
 ], XmChatShell);
+export { XmChatShell };

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

@@ -1,6 +1,6 @@
 import type { TemplateResult } from "lit";
 import { XmField } from "../field/index.js";
-declare class XmCheckbox extends XmField {
+export declare class XmCheckbox extends XmField {
     /** Indeterminate (mixed) state — shows the dash mark on the coral fill and
         reports aria-checked="mixed". Cleared on the first user toggle. */
     indeterminate: boolean;
@@ -18,4 +18,3 @@ declare global {
         "xm-checkbox": XmCheckbox;
     }
 }
-export {};

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

@@ -136,3 +136,4 @@ __decorate([
 XmCheckbox = __decorate([
     customElement("xm-checkbox")
 ], XmCheckbox);
+export { XmCheckbox };

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

@@ -2,7 +2,7 @@ import { LitElement } from "lit";
 import type { TemplateResult } from "lit";
 type ChipSize = "xs" | "sm" | "md" | "lg";
 type ChipCategory = "get" | "post" | "put" | "delete" | "patch" | "yml" | "json" | "";
-declare class XmChip extends LitElement {
+export declare class XmChip extends LitElement {
     value: string;
     size: ChipSize;
     selected: boolean;

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

@@ -228,3 +228,4 @@ __decorate([
 XmChip = __decorate([
     customElement("xm-chip")
 ], XmChip);
+export { XmChip };

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

@@ -1,7 +1,7 @@
 import { LitElement } from "lit";
 import type { TemplateResult } from "lit";
 type Primitive = string | number;
-declare class XmChipGroup extends LitElement {
+export declare class XmChipGroup extends LitElement {
     multiple: boolean;
     value: Primitive | Primitive[] | null;
     connectedCallback(): void;

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

@@ -169,3 +169,4 @@ __decorate([
 XmChipGroup = __decorate([
     customElement("xm-chip-group")
 ], XmChipGroup);
+export { XmChipGroup };

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

@@ -1,6 +1,6 @@
 import { LitElement } from "lit";
 import type { TemplateResult } from "lit";
-declare class XmCode extends LitElement {
+export declare class XmCode extends LitElement {
     block: boolean;
     render(): TemplateResult;
 }
@@ -9,4 +9,3 @@ declare global {
         "xm-code": XmCode;
     }
 }
-export {};

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

@@ -66,3 +66,4 @@ __decorate([
 XmCode = __decorate([
     customElement("xm-code")
 ], XmCode);
+export { XmCode };

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

@@ -12,7 +12,7 @@ export interface ComposerAttachment {
     pages?: number;
     dims?: string;
 }
-declare class XmComposer extends LitElement {
+export declare class XmComposer extends LitElement {
     initialValue: string;
     initialFocus: boolean;
     processing: boolean;
@@ -64,4 +64,3 @@ declare global {
         "xm-composer": XmComposer;
     }
 }
-export {};

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

@@ -36,6 +36,19 @@ 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";
+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);
+    }
+}
 /* ---------- attachment helpers (verbatim from JSX) ---------- */
 const STRIP_LIMIT = 10;
 const HARD_CAP = 50;
@@ -711,3 +724,4 @@ __decorate([
 XmComposer = __decorate([
     customElement("xm-composer")
 ], XmComposer);
+export { XmComposer };

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

@@ -1,7 +1,7 @@
 import { LitElement } from "lit";
 import type { TemplateResult } from "lit";
 type DividerOrientation = "horizontal" | "vertical";
-declare class XmDivider extends LitElement {
+export declare class XmDivider extends LitElement {
     orientation: DividerOrientation;
     render(): TemplateResult;
 }

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

@@ -65,3 +65,4 @@ __decorate([
 XmDivider = __decorate([
     customElement("xm-divider")
 ], XmDivider);
+export { XmDivider };

package/dist/lit/components/expansion-panel/index.d.ts

@@ -1,6 +1,6 @@
 import { LitElement } from "lit";
 import type { TemplateResult } from "lit";
-declare class XmExpansionPanel extends LitElement {
+export declare class XmExpansionPanel extends LitElement {
     open: boolean;
     heading: string;
     disabled: boolean;
@@ -19,4 +19,3 @@ declare global {
         "xm-expansion-panel": XmExpansionPanel;
     }
 }
-export {};

package/dist/lit/components/expansion-panel/index.js

@@ -172,3 +172,4 @@ __decorate([
 XmExpansionPanel = __decorate([
     customElement("xm-expansion-panel")
 ], XmExpansionPanel);
+export { XmExpansionPanel };

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

@@ -1,7 +1,7 @@
 import { LitElement } from "lit";
 import type { TemplateResult } from "lit";
 type GridGap = "none" | "xs" | "sm" | "md" | "lg" | "xl";
-declare class XmGrid extends LitElement {
+export declare class XmGrid extends LitElement {
     columns: number;
     gap: GridGap;
     render(): TemplateResult;

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

@@ -80,3 +80,4 @@ __decorate([
 XmGrid = __decorate([
     customElement("xm-grid")
 ], XmGrid);
+export { XmGrid };

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

@@ -1,6 +1,6 @@
 import { LitElement } from "lit";
 import type { TemplateResult } from "lit";
-declare class XmKbd extends LitElement {
+export declare class XmKbd extends LitElement {
     render(): TemplateResult;
 }
 declare global {
@@ -8,4 +8,3 @@ declare global {
         "xm-kbd": XmKbd;
     }
 }
-export {};

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

@@ -41,3 +41,4 @@ let XmKbd = class XmKbd extends LitElement {
 XmKbd = __decorate([
     customElement("xm-kbd")
 ], XmKbd);
+export { XmKbd };

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

@@ -1,7 +1,7 @@
 import { LitElement } from "lit";
 import type { TemplateResult } from "lit";
 type Primitive = string | number;
-declare class XmList extends LitElement {
+export declare class XmList extends LitElement {
     interactive: boolean;
     selectable: boolean;
     value: Primitive | null;

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

@@ -186,3 +186,4 @@ __decorate([
 XmList = __decorate([
     customElement("xm-list")
 ], XmList);
+export { XmList };

package/dist/lit/components/list-item/index.d.ts

@@ -1,6 +1,6 @@
 import { LitElement } from "lit";
 import type { TemplateResult } from "lit";
-declare class XmListItem extends LitElement {
+export declare class XmListItem extends LitElement {
     value: string;
     selected: boolean;
     disabled: boolean;
@@ -17,4 +17,3 @@ declare global {
         "xm-list-item": XmListItem;
     }
 }
-export {};

package/dist/lit/components/list-item/index.js

@@ -125,3 +125,4 @@ __decorate([
 XmListItem = __decorate([
     customElement("xm-list-item")
 ], XmListItem);
+export { XmListItem };

package/dist/lit/components/navigation-drawer/index.d.ts

@@ -1,6 +1,6 @@
 import { LitElement } from "lit";
 import type { PropertyValues, TemplateResult } from "lit";
-declare class XmNavigationDrawer extends LitElement {
+export declare class XmNavigationDrawer extends LitElement {
     static shadowRootOptions: ShadowRootInit;
     open: boolean;
     collapsed: boolean;
@@ -26,4 +26,3 @@ declare global {
         "xm-navigation-drawer": XmNavigationDrawer;
     }
 }
-export {};

package/dist/lit/components/navigation-drawer/index.js

@@ -216,3 +216,4 @@ __decorate([
 XmNavigationDrawer = __decorate([
     customElement("xm-navigation-drawer")
 ], XmNavigationDrawer);
+export { XmNavigationDrawer };

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

@@ -4,7 +4,7 @@ type PaginationSize = "xs" | "sm" | "md" | "lg";
 export interface PaginationPageChangeDetail {
     page: number;
 }
-declare class XmPagination extends LitElement {
+export declare class XmPagination extends LitElement {
     page: number;
     total: number;
     siblings: number;

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

@@ -182,3 +182,4 @@ __decorate([
 XmPagination = __decorate([
     customElement("xm-pagination")
 ], XmPagination);
+export { XmPagination };

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

@@ -3,7 +3,7 @@ import type { TemplateResult } from "lit";
 declare class LightElement extends LitElement {
     createRenderRoot(): HTMLElement | DocumentFragment;
 }
-declare class XmIcon extends LightElement {
+export declare class XmIcon extends LightElement {
     size: number;
     viewBox: string;
     strokeWidth: number;
@@ -11,7 +11,7 @@ declare class XmIcon extends LightElement {
     title: string;
     render(): TemplateResult;
 }
-declare class XmSpinner extends LightElement {
+export declare class XmSpinner extends LightElement {
     size: number;
     className: string;
     render(): TemplateResult;

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

@@ -22,6 +22,18 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, html, svg, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
+if (typeof document !== "undefined") {
+    for (const href of [
+        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);
+    }
+}
 class LightElement extends LitElement {
     createRenderRoot() {
         return this;
@@ -84,6 +96,7 @@ __decorate([
 XmIcon = __decorate([
     customElement("xm-icon")
 ], XmIcon);
+export { XmIcon };
 /* ─────────────────────────────────────────────────────────────
    <xm-spinner> — circular indeterminate spinner. Used by Button
    for the loading state. Mirrors Spinner({ size }) in the JSX:
@@ -116,6 +129,7 @@ __decorate([
 XmSpinner = __decorate([
     customElement("xm-spinner")
 ], XmSpinner);
+export { XmSpinner };
 const namedIcon = (tag, defaults, paths) => {
     class NamedIcon extends LightElement {
         constructor() {

package/dist/lit/components/sidebar-item/index.d.ts

@@ -1,7 +1,7 @@
 import { LitElement } from "lit";
 import type { TemplateResult } from "lit";
 type SidebarLayout = "row" | "stacked";
-declare class XmSidebarItem extends LitElement {
+export declare class XmSidebarItem extends LitElement {
     title: string;
     layout: SidebarLayout;
     active: boolean;

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

@@ -26,6 +26,18 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
+if (typeof document !== "undefined") {
+    for (const href of [
+        new URL("../sidebar-item/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);
+    }
+}
 let XmSidebarItem = class XmSidebarItem extends LitElement {
     constructor() {
         super(...arguments);
@@ -103,3 +115,4 @@ __decorate([
 XmSidebarItem = __decorate([
     customElement("xm-sidebar-item")
 ], XmSidebarItem);
+export { XmSidebarItem };

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

@@ -10,7 +10,7 @@ export interface SnackPreset {
     secondaryLabel: string;
 }
 export declare const SNACK_PRESETS: Record<SnackKind, SnackPreset>;
-declare class XmSnackbar extends LitElement {
+export declare class XmSnackbar extends LitElement {
     kind: SnackKind;
     code: string;
     title: string;
@@ -30,4 +30,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";
+if (typeof document !== "undefined") {
+    for (const href of [
+        new URL("../snackbar/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);
+    }
+}
 export const SNACK_PRESETS = {
     auth: {
         kind: "auth",
@@ -193,3 +206,4 @@ __decorate([
 XmSnackbar = __decorate([
     customElement("xm-snackbar")
 ], XmSnackbar);
+export { XmSnackbar };

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

@@ -4,7 +4,7 @@ type StackDirection = "vertical" | "horizontal";
 type StackGap = "none" | "xs" | "sm" | "md" | "lg" | "xl";
 type StackAlign = "start" | "center" | "end" | "stretch";
 type StackJustify = "start" | "center" | "end" | "between";
-declare class XmStack extends LitElement {
+export declare class XmStack extends LitElement {
     direction: StackDirection;
     gap: StackGap;
     align: StackAlign;

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

@@ -101,3 +101,4 @@ __decorate([
 XmStack = __decorate([
     customElement("xm-stack")
 ], XmStack);
+export { XmStack };

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

@@ -8,7 +8,7 @@ export interface TableColumn {
     muted?: boolean;
 }
 export type TableRow = Record<string, string | number>;
-declare class XmTable extends LitElement {
+export declare class XmTable extends LitElement {
     columns: TableColumn[];
     rows: TableRow[];
     caption: string;
@@ -22,4 +22,3 @@ declare global {
         "xm-table": XmTable;
     }
 }
-export {};

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

@@ -132,3 +132,4 @@ __decorate([
 XmTable = __decorate([
     customElement("xm-table")
 ], XmTable);
+export { XmTable };

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

@@ -4,20 +4,20 @@ type TabsSize = "xs" | "sm" | "md" | "lg";
 export interface TabsChangeDetail {
     value: string;
 }
-declare class XmTab extends LitElement {
+export declare class XmTab extends LitElement {
     value: string;
     disabled: boolean;
     createRenderRoot(): HTMLElement | DocumentFragment;
     connectedCallback(): void;
     render(): TemplateResult;
 }
-declare class XmTabPanel extends LitElement {
+export declare class XmTabPanel extends LitElement {
     value: string;
     createRenderRoot(): HTMLElement | DocumentFragment;
     connectedCallback(): void;
     render(): TemplateResult;
 }
-declare class XmTabs extends LitElement {
+export declare class XmTabs extends LitElement {
     value: string;
     size: TabsSize;
     private _list;

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

@@ -85,6 +85,7 @@ __decorate([
 XmTab = __decorate([
     customElement("xm-tab")
 ], XmTab);
+export { XmTab };
 /* ─────────────────────────────────────────────────────────────
    <xm-tab-panel> — one panel. Light DOM: the host is role="tabpanel".
    ─────────────────────────────────────────────────────────────*/
@@ -111,6 +112,7 @@ __decorate([
 XmTabPanel = __decorate([
     customElement("xm-tab-panel")
 ], XmTabPanel);
+export { XmTabPanel };
 /* ─────────────────────────────────────────────────────────────
    <xm-tabs> — the tablist container.
    ─────────────────────────────────────────────────────────────*/
@@ -318,3 +320,4 @@ __decorate([
 XmTabs = __decorate([
     customElement("xm-tabs")
 ], XmTabs);
+export { XmTabs };

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

@@ -19,7 +19,7 @@ export interface ValidationPreset extends ValidationError {
 }
 export declare const VALIDATION_TITLE: Record<ValidationCode, string>;
 export declare const VALIDATION_PRESETS: Record<ValidationCode, ValidationPreset>;
-declare class XmFileValidationBlock extends LitElement {
+export declare class XmFileValidationBlock extends LitElement {
     state: ValidationState;
     file: ValidationFile | null;
     error: ValidationError | null;
@@ -42,4 +42,3 @@ declare global {
         "xm-file-validation-block": XmFileValidationBlock;
     }
 }
-export {};

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

@@ -20,7 +20,8 @@
     error-dismiss
     copy-path      — detail: { path }
 
-  Light DOM. components/validation/index.css must be loaded in the host page.
+  Light DOM. This module appends its stylesheets (validation + primitives) to
+  document.head on import.
 
   VALIDATION_PRESETS and VALIDATION_TITLE are also exported for reuse.
 */
@@ -32,6 +33,19 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, html, svg, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
+if (typeof document !== "undefined") {
+    for (const href of [
+        new URL("../validation/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);
+    }
+}
 export const VALIDATION_TITLE = {
     size: "File too large",
     ext: "Wrong file type",
@@ -316,3 +330,4 @@ __decorate([
 XmFileValidationBlock = __decorate([
     customElement("xm-file-validation-block")
 ], XmFileValidationBlock);
+export { XmFileValidationBlock };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xmesh/system-design",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "private": false,
   "publishConfig": {
     "access": "public"