@xmesh/system-design 0.0.1

package/dist/lit/components/dialog/index.css

@@ -0,0 +1,124 @@
+/* ============================================
+   Dialog — a centered modal panel.
+
+   The panel chrome (inverse-surface fill, inverse-on-surface ink, hairline
+   border, corner-large radius, level5 elevation, the scrim ::backdrop, and the
+   centered modal positioning) is owned by the composed <xm-overlay> in the
+   `dialog` tier (modal mode). This file styles the panel's internal layout:
+   the header row + close control, the body, and the singular action row.
+
+   All ink is inverse-on-surface (AD-13) — the card-stack ink, matching the
+   theme-following panel surface (ADR 0006). Scrim is a flat alpha on
+   --md-sys-color-scrim (owned by the overlay); NO gradient (the snackbar scrim
+   is the only sanctioned one).
+
+   Entry/exit is opacity + a small translateY at short4 standard — no scale-in
+   reveal, no spring. The overlay owns the fade; this adds the lift.
+
+   BEM block: `dialog`. Registered in scripts/check-bem.sh STRICT_BLOCKS.
+   Elements: __head, __header, __close, __body, __actions. Modifier: --static.
+   ============================================ */
+
+.dialog {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-4);
+  min-width: 0;
+  color: var(--md-sys-color-inverse-on-surface);
+  padding: var(--s-5);
+  animation: dialog-in var(--md-sys-motion-duration-short4)
+    var(--md-sys-motion-easing-standard) both;
+}
+.dialog--static {
+  animation: none;
+}
+
+@keyframes dialog-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.dialog__head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--s-3);
+}
+.dialog__head.is-empty {
+  /* No header text — keep the close control but drop the title row height. */
+  justify-content: flex-end;
+}
+
+.dialog__header {
+  font-family: var(--md-sys-typescale-title-large-font);
+  font-size: var(--md-sys-typescale-title-large-size);
+  line-height: var(--md-sys-typescale-title-large-line-height);
+  font-weight: var(--md-sys-typescale-title-large-weight);
+  letter-spacing: var(--md-sys-typescale-title-large-tracking);
+  color: var(--md-sys-color-inverse-on-surface);
+  text-wrap: pretty;
+}
+
+.dialog__close {
+  appearance: none;
+  border: none;
+  background: transparent;
+  color: color-mix(
+    in oklch,
+    var(--md-sys-color-inverse-on-surface) 70%,
+    transparent
+  );
+  width: 32px;
+  height: 32px;
+  border-radius: var(--md-sys-shape-corner-small);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  margin: calc(-1 * var(--s-1)) calc(-1 * var(--s-1)) 0 0;
+  transition: background var(--md-sys-motion-duration-short3)
+    var(--md-sys-motion-easing-standard);
+}
+.dialog__close:hover {
+  background: color-mix(
+    in oklch,
+    var(--md-sys-color-inverse-on-surface) 10%,
+    transparent
+  );
+  color: var(--md-sys-color-inverse-on-surface);
+}
+.dialog__close:focus-visible {
+  outline: none;
+  box-shadow: var(--xm-state-focus-ring);
+}
+
+.dialog__body {
+  min-width: 0;
+  font-family: var(--md-sys-typescale-body-medium-font);
+  font-size: var(--md-sys-typescale-body-medium-size);
+  line-height: var(--md-sys-typescale-body-medium-line-height);
+  color: color-mix(
+    in oklch,
+    var(--md-sys-color-inverse-on-surface) 88%,
+    transparent
+  );
+  text-wrap: pretty;
+}
+
+.dialog__actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--s-2);
+  flex-wrap: wrap;
+}
+.dialog__actions.is-empty {
+  display: none;
+}

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

@@ -0,0 +1,24 @@
+import { LitElement } from "lit";
+import type { TemplateResult } from "lit";
+export declare class XmDialog extends LitElement {
+    open: boolean;
+    noScrimClose: boolean;
+    static: boolean;
+    label: string;
+    private _hasHeader;
+    private _hasAction;
+    private _overlay;
+    private readonly _headerId;
+    private _wasOpen;
+    render(): TemplateResult;
+    protected updated(): void;
+    private _onOverlayClose;
+    private _onCloseButton;
+    private _onHeaderSlot;
+    private _onActionSlot;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "xm-dialog": XmDialog;
+    }
+}

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

@@ -0,0 +1,199 @@
+/*
+  dialog/index.ts — <xm-dialog>, a centered modal dialog.
+
+  Composes the xm-overlay foundation (Story 1.4) for its scrim, modal stacking,
+  focus-trap, scroll-lock, and focus-restore — it does NOT hand-roll any of
+  these. The modal substrate is native <dialog>.showModal() (focus-trap +
+  background `inert` for free), surfaced through xm-overlay in the `dialog` tier
+  (the topmost tier: tooltip < menu < dialog). We drive the overlay through its
+  PUBLIC API only and never reach into its shadow root (AD-12).
+
+  Behaviour (FR-142 / FR-143):
+    • `open` is the single attribute controlling visibility — set it to show a
+      centered modal with a scrim; remove it to close
+    • Esc closes only this dialog (overlay's innermost-only handler
+      stopPropagations); closing also cascades-closes descendant popovers
+    • scrim-click closes by default, suppressed by `no-scrim-close`
+    • on close, focus restores to the trigger (delegated to the overlay)
+
+  Slots: `slot="header"` (title row → aria-labelledby), default (body), and the
+  singular `slot="action"` (trailing controls — one slot, many buttons; no
+  plural `actions`). Empty header/action rows collapse (alert's is-empty
+  pattern).
+
+  Event (AD-8): `close` — bare native-style name, bubbles + composed, structured
+  detail { reason }, fired on every close path.
+
+  Authoring:
+    <xm-dialog open>
+      <span slot="header">Delete this thread?</span>
+      This permanently removes the conversation and its artifacts.
+      <xm-button slot="action" variant="ghost">Cancel</xm-button>
+      <xm-button slot="action" variant="primary">Delete</xm-button>
+    </xm-dialog>
+
+  Properties:
+    open            boolean (reflect) — the single visibility control
+    no-scrim-close  boolean — a scrim click is a no-op (static backdrop)
+    static          boolean — preview-only, suppress entry animation
+    label           accessible name fallback when there is no header
+
+  Shadow DOM. Depends on xm-overlay + primitives (close icon) + tokens (AD-12).
+*/
+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;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, svg, nothing } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+const DIALOG_CSS = new URL("../dialog/index.css", import.meta.url).href;
+let dialogSeq = 0;
+const CLOSE_ICON = () => svg `
+  <svg width="18" height="18" viewBox="0 0 24 24" fill="none"
+       stroke="currentColor" stroke-width="2" stroke-linecap="round"
+       stroke-linejoin="round" class="ds-icon" aria-hidden="true">
+    <path d="M6 6l12 12M18 6L6 18" />
+  </svg>
+`;
+let XmDialog = class XmDialog extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.open = false;
+        this.noScrimClose = false;
+        this.static = false;
+        this.label = "";
+        this._hasHeader = false;
+        this._hasAction = false;
+        this._headerId = `xm-dialog-${++dialogSeq}-header`;
+        this._wasOpen = false;
+        this._onOverlayClose = (e) => {
+            const detail = e.detail;
+            // Static backdrop: a scrim click must be a no-op. The overlay already
+            // closed itself, so re-open synchronously to keep the modal up.
+            if (detail?.reason === "backdrop" && this.noScrimClose) {
+                const ov = this._overlay;
+                this._wasOpen = true;
+                this.open = true;
+                ov?.show();
+                return;
+            }
+            this._wasOpen = false;
+            if (this.open)
+                this.open = false;
+            this.dispatchEvent(new CustomEvent("close", {
+                bubbles: true,
+                composed: true,
+                detail: { reason: detail?.reason ?? "api" },
+            }));
+        };
+        this._onCloseButton = () => {
+            const ov = this._overlay;
+            if (ov?.open)
+                ov.hide("api");
+            else {
+                this.open = false;
+                this._wasOpen = false;
+                this.dispatchEvent(new CustomEvent("close", {
+                    bubbles: true,
+                    composed: true,
+                    detail: { reason: "api" },
+                }));
+            }
+        };
+        this._onHeaderSlot = (e) => {
+            const slot = e.target;
+            this._hasHeader = slot.assignedNodes({ flatten: true }).some((n) => {
+                if (n.nodeType === Node.TEXT_NODE)
+                    return !!n.textContent?.trim();
+                return n.nodeType === Node.ELEMENT_NODE;
+            });
+        };
+        this._onActionSlot = (e) => {
+            const slot = e.target;
+            this._hasAction = slot.assignedElements().length > 0;
+        };
+    }
+    render() {
+        const cls = `dialog${this.static ? " dialog--static" : ""}`;
+        return html `
+      <link rel="stylesheet" href="${DIALOG_CSS}" />
+      <style>
+        :host { display: contents; }
+      </style>
+      <xm-overlay
+        mode="modal"
+        tier="dialog"
+        label=${this.label || nothing}
+        @xm-overlay-close=${this._onOverlayClose}
+      >
+        <div
+          class="${cls}"
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby=${this._hasHeader ? this._headerId : nothing}
+          aria-label=${!this._hasHeader && this.label ? this.label : nothing}
+        >
+          <div class="dialog__head ${this._hasHeader ? "" : "is-empty"}">
+            <span class="dialog__header" id=${this._headerId}
+              ><slot name="header" @slotchange=${this._onHeaderSlot}></slot
+            ></span>
+            <button
+              type="button"
+              class="dialog__close"
+              aria-label="Close"
+              @click=${this._onCloseButton}
+            >
+              ${CLOSE_ICON()}
+            </button>
+          </div>
+          <div class="dialog__body"><slot></slot></div>
+          <div class="dialog__actions ${this._hasAction ? "" : "is-empty"}">
+            <slot name="action" @slotchange=${this._onActionSlot}></slot>
+          </div>
+        </div>
+      </xm-overlay>
+    `;
+    }
+    updated() {
+        // Drive the composed overlay from our single `open` control.
+        const ov = this._overlay;
+        if (!ov)
+            return;
+        if (this.open && !this._wasOpen) {
+            this._wasOpen = true;
+            ov.show();
+        }
+        else if (!this.open && this._wasOpen) {
+            this._wasOpen = false;
+            if (ov.open)
+                ov.hide("api");
+        }
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], XmDialog.prototype, "open", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "no-scrim-close" })
+], XmDialog.prototype, "noScrimClose", void 0);
+__decorate([
+    property({ type: Boolean })
+], XmDialog.prototype, "static", void 0);
+__decorate([
+    property({ type: String })
+], XmDialog.prototype, "label", void 0);
+__decorate([
+    state()
+], XmDialog.prototype, "_hasHeader", void 0);
+__decorate([
+    state()
+], XmDialog.prototype, "_hasAction", void 0);
+__decorate([
+    query("xm-overlay")
+], XmDialog.prototype, "_overlay", void 0);
+XmDialog = __decorate([
+    customElement("xm-dialog")
+], XmDialog);
+export { XmDialog };

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

@@ -0,0 +1,27 @@
+/* ============================================
+   <xm-divider> — standalone hairline rule.
+
+   Exactly 1px using --md-sys-color-outline-variant (the default hairline
+   weight; the same rule a card's header/footer split uses). Never 2px —
+   2px is reserved for the drag-active field state only. No thickness
+   variants, no status hue: a divider is always a neutral hairline that
+   traces its host surface and reads on both surface families (AD-13).
+
+   BEM: block `divider`; modifiers `--horizontal` / `--vertical`.
+   ============================================ */
+
+.divider {
+  background: var(--md-sys-color-outline-variant);
+  border: 0;
+}
+
+.divider--horizontal {
+  width: 100%;
+  height: 1px;
+}
+
+.divider--vertical {
+  width: 1px;
+  height: 100%;
+  min-height: 1em;
+}

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

@@ -0,0 +1,13 @@
+import { LitElement } from "lit";
+import type { TemplateResult } from "lit";
+type DividerOrientation = "horizontal" | "vertical";
+declare class XmDivider extends LitElement {
+    orientation: DividerOrientation;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "xm-divider": XmDivider;
+    }
+}
+export {};

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

@@ -0,0 +1,67 @@
+/*
+  divider/index.ts — <xm-divider>, the standalone hairline rule.
+
+  <xm-divider> — a 1px low-saturation separator. The standalone version of
+  the hairline rule that splits a card header from its body.
+
+  Authoring:
+    <xm-divider></xm-divider>                 horizontal (default)
+    <xm-divider orientation="vertical"></xm-divider>
+
+  Properties:
+    orientation   "horizontal" | "vertical"   (default "horizontal")
+
+  Surface / ink (AD-13): a divider is transparent except for its hairline.
+  It traces its host surface and reads as a neutral hairline against BOTH
+  surface families via the single --md-sys-color-outline-variant token,
+  which resolves per theme. Exactly 1px — 2px is a policy violation.
+
+  Shadow DOM; Lit from lit; sibling CSS resolved via
+  the built-file-relative new URL(...). BEM block `divider`.
+*/
+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;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+// Resolve CSS relative to the *built* file:
+// lit/build/components/divider/index.js → ../divider/index.css.
+const DIVIDER_CSS = new URL("../divider/index.css", import.meta.url).href;
+let XmDivider = class XmDivider extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.orientation = "horizontal";
+    }
+    render() {
+        const orientation = this.orientation === "vertical" ? "vertical" : "horizontal";
+        return html `
+      <link rel="stylesheet" href="${DIVIDER_CSS}" />
+      <style>
+        :host {
+          display: block;
+        }
+        :host([orientation="vertical"]) {
+          display: inline-block;
+          align-self: stretch;
+        }
+        :host([hidden]) {
+          display: none;
+        }
+      </style>
+      <div
+        class="divider divider--${orientation}"
+        role="separator"
+        aria-orientation="${orientation}"
+      ></div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String, reflect: true })
+], XmDivider.prototype, "orientation", void 0);
+XmDivider = __decorate([
+    customElement("xm-divider")
+], XmDivider);

package/dist/lit/components/empty-state/index.css

@@ -0,0 +1,69 @@
+/* ============================================
+   Empty state — the shared no-data placeholder.
+
+   A centered, stacked column: line icon · sentence-case headline ·
+   secondary copy · optional action. The component is TRANSPARENT and
+   traces its host surface (AD-13): every ink derives from the inherited
+   `color` (the host's on-* ink), never a hard-pinned surface token — so
+   it pairs correctly whether it sits on the desk (`surface*` → on-surface)
+   or on a card (`inverse-surface` → inverse-on-surface), in both themes.
+
+   No imagery, no illustration, no emoji, no gradient — the only graphic
+   is the Lucide-style line icon (currentColor, no fill).
+
+   BEM block: `empty-state`. Registered in scripts/check-bem.sh STRICT_BLOCKS.
+   ============================================ */
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  gap: var(--s-2);
+  padding: var(--s-8) var(--s-6);
+  /* Trace the host: inherit the on-* ink the host already set on the
+     surface this empty-state sits on. No surface fill of its own. */
+  color: inherit;
+}
+
+.empty-state__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: var(--s-1);
+  /* Icon reads as a quiet marker — softened from the host ink via the
+     inherited currentColor, not a hard-pinned token. */
+  color: color-mix(in oklab, currentColor 64%, transparent);
+}
+
+.empty-state__heading {
+  font-family: var(--md-sys-typescale-title-medium-font);
+  font-size: var(--md-sys-typescale-title-medium-size);
+  line-height: var(--md-sys-typescale-title-medium-line-height);
+  font-weight: var(--md-sys-typescale-title-medium-weight);
+  letter-spacing: var(--md-sys-typescale-title-medium-tracking);
+  color: currentColor;
+  text-wrap: balance;
+}
+.empty-state__heading.is-empty { display: none; }
+
+.empty-state__text {
+  max-width: 44ch;
+  font-family: var(--md-sys-typescale-body-medium-font);
+  font-size: var(--md-sys-typescale-body-medium-size);
+  line-height: var(--md-sys-typescale-body-medium-line-height);
+  /* Soft tier — derived from the host ink so it works on either surface
+     family. (on-surface-variant / inverse muted both read as ~70% ink.) */
+  color: color-mix(in oklab, currentColor 70%, transparent);
+  text-wrap: pretty;
+}
+.empty-state__text.is-empty { display: none; }
+
+.empty-state__action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: var(--s-3);
+}
+.empty-state__action.is-empty { display: none; }

package/dist/lit/components/empty-state/index.d.ts

@@ -0,0 +1,21 @@
+import { LitElement } from "lit";
+import type { TemplateResult } from "lit";
+export declare class XmEmptyState extends LitElement {
+    heading: string;
+    /** A primitives icon element name (e.g. "xm-search-icon"). Used only when no
+        slot="icon" content is supplied. */
+    icon: string;
+    private _hasIconSlot;
+    private _hasText;
+    private _hasAction;
+    render(): TemplateResult;
+    private _iconEl;
+    private _onIconSlot;
+    private _onDefaultSlot;
+    private _onActionSlot;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "xm-empty-state": XmEmptyState;
+    }
+}

package/dist/lit/components/empty-state/index.js

@@ -0,0 +1,123 @@
+/*
+  empty-state/index.ts — <xm-empty-state>, the shared no-data placeholder.
+
+  An empty view that reads as intentionally designed, not broken: a Lucide-style
+  line icon (from `primitives`, via slot or `icon` attribute), a sentence-case
+  headline, secondary copy (default slot), and an optional singular `slot="action"`
+  CTA. There is NO imagery / illustration / emoji — the only graphic is the line
+  icon, inked via currentColor from the host surface's on-* ink (AD-13).
+
+  This is the placeholder reused by xm-autocomplete (no-match, FR-120) and
+  xm-data-table (empty rows, FR-161); its API composes into both.
+
+  Authoring:
+    <xm-empty-state heading="No results found">
+      <xm-search-icon slot="icon" size="22"></xm-search-icon>
+      Try a different search term or clear the filters.
+      <xm-button slot="action" variant="outline" size="sm">Clear filters</xm-button>
+    </xm-empty-state>
+
+  Properties:
+    heading   short title string (sentence case)
+    icon      optional primitives icon NAME (e.g. "xm-search-icon"); used only
+              when no slot="icon" content is provided
+
+  Slots:
+    icon      a primitives line-icon (overrides the `icon` attribute)
+    default   secondary copy
+    action    single trailing CTA (collapses when empty, mirroring xm-alert)
+
+  Shadow DOM. Loads its sibling CSS via the built-file-relative new URL(...)
+  pattern. Depends only on `primitives` + tokens — no overlay (AD-12).
+*/
+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;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+const EMPTY_STATE_CSS = new URL("../empty-state/index.css", import.meta.url).href;
+let XmEmptyState = class XmEmptyState extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.heading = "";
+        /** A primitives icon element name (e.g. "xm-search-icon"). Used only when no
+            slot="icon" content is supplied. */
+        this.icon = "";
+        this._hasIconSlot = false;
+        this._hasText = false;
+        this._hasAction = false;
+        this._onIconSlot = (e) => {
+            const slot = e.target;
+            this._hasIconSlot = slot.assignedElements().length > 0;
+        };
+        this._onDefaultSlot = (e) => {
+            const slot = e.target;
+            const nodes = slot.assignedNodes({ flatten: true });
+            this._hasText = nodes.some((n) => {
+                if (n.nodeType === Node.TEXT_NODE)
+                    return !!n.textContent?.trim();
+                if (n.nodeType === Node.ELEMENT_NODE)
+                    return true;
+                return false;
+            });
+        };
+        this._onActionSlot = (e) => {
+            const slot = e.target;
+            this._hasAction = slot.assignedElements().length > 0;
+        };
+    }
+    render() {
+        const showFallbackIcon = !this._hasIconSlot && this.icon !== "";
+        return html `
+      <link rel="stylesheet" href="${EMPTY_STATE_CSS}" />
+      <style>
+        :host { display: block; }
+        :host([hidden]) { display: none; }
+      </style>
+      <div class="empty-state" role="status">
+        <span class="empty-state__icon" aria-hidden="true">
+          ${showFallbackIcon ? this._iconEl() : nothing}
+          <slot name="icon" @slotchange=${this._onIconSlot}></slot>
+        </span>
+        <span class="empty-state__heading ${this.heading ? "" : "is-empty"}"
+          >${this.heading}</span
+        >
+        <span class="empty-state__text ${this._hasText ? "" : "is-empty"}"
+          ><slot @slotchange=${this._onDefaultSlot}></slot
+        ></span>
+        <span class="empty-state__action ${this._hasAction ? "" : "is-empty"}"
+          ><slot name="action" @slotchange=${this._onActionSlot}></slot
+        ></span>
+      </div>
+    `;
+    }
+    // Render the named primitives icon by tag at 22px. The element inks via
+    // currentColor from .empty-state__icon, so no color is hard-pinned.
+    _iconEl() {
+        const el = document.createElement(this.icon);
+        el.setAttribute("size", "22");
+        return html `${el}`;
+    }
+};
+__decorate([
+    property({ type: String })
+], XmEmptyState.prototype, "heading", void 0);
+__decorate([
+    property({ type: String })
+], XmEmptyState.prototype, "icon", void 0);
+__decorate([
+    state()
+], XmEmptyState.prototype, "_hasIconSlot", void 0);
+__decorate([
+    state()
+], XmEmptyState.prototype, "_hasText", void 0);
+__decorate([
+    state()
+], XmEmptyState.prototype, "_hasAction", void 0);
+XmEmptyState = __decorate([
+    customElement("xm-empty-state")
+], XmEmptyState);
+export { XmEmptyState };