@xmesh/system-design 0.0.1

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

@@ -0,0 +1,82 @@
+/*
+  grid/index.ts — <xm-grid>, the column grid layout primitive.
+
+  <xm-grid> — an N-column (default 12) CSS grid. Slotted children are grid
+  items: the <slot> is layout-transparent, so a child lays out as if it were a
+  direct child of the grid container (same mechanism as xm-chip-group's flex).
+
+  A child spans columns by setting the inline custom property --xm-col-span on
+  ITSELF (default 1). The grid reads it via ::slotted(*) — zero JS, arbitrary N,
+  shadow-safe (custom properties inherit across the shadow boundary). Optional
+  --xm-col-start places a child explicitly.
+
+  Authoring:
+    <xm-grid columns="12" gap="md">
+      <div style="--xm-col-span: 8">main</div>
+      <div style="--xm-col-span: 4">aside</div>
+      <div>defaults to span 1</div>
+    </xm-grid>
+
+  Properties:
+    columns   number of equal tracks               (default 12, clamped ≥ 1)
+    gap       "none" | "xs" | "sm" | "md" | "lg" | "xl"  (default "md")
+              → --xm-gutter-* (aliases the --s-N scale)
+
+  Below --xm-breakpoint-sm (520px) the grid collapses to a single column — see
+  index.css (the literal is repeated there because @media can't read var();
+  docs/adr/0001).
+
+  Shadow DOM; Lit from lit; sibling CSS via the
+  built-file-relative new URL(...). BEM block `grid`.
+*/
+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/grid/index.js → ../grid/index.css.
+const GRID_CSS = new URL("../grid/index.css", import.meta.url).href;
+const GAPS = ["none", "xs", "sm", "md", "lg", "xl"];
+let XmGrid = class XmGrid extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.columns = 12;
+        this.gap = "md";
+    }
+    render() {
+        const gap = GAPS.includes(this.gap) ? this.gap : "md";
+        const columns = Number.isFinite(this.columns) && this.columns >= 1
+            ? Math.floor(this.columns)
+            : 12;
+        return html `
+      <link rel="stylesheet" href="${GRID_CSS}" />
+      <style>
+        :host {
+          display: block;
+        }
+        :host([hidden]) {
+          display: none;
+        }
+      </style>
+      <div
+        class="grid grid--gap-${gap}"
+        style="--xm-grid-columns: ${columns}"
+      >
+        <slot></slot>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Number, reflect: true })
+], XmGrid.prototype, "columns", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], XmGrid.prototype, "gap", void 0);
+XmGrid = __decorate([
+    customElement("xm-grid")
+], XmGrid);

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

@@ -0,0 +1,35 @@
+/* ============================================
+   Kbd — inline keyboard-key token (key-cap).
+
+   <xm-kbd> presents a shortcut key (⌘, Enter, K) as a small
+   key-cap pill. Mono typescale (--xm-typescale-mono-*), a
+   surface-container-* backplate raised off the host surface, a
+   hairline 1px outline-variant border, and a subtle bottom edge
+   so it reads as a physical key. Ink is --md-sys-color-on-surface
+   to match the surface-container backplate (AD-13). Presentational
+   chrome — never a status hue (AD-11).
+   ============================================ */
+
+.kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-width: 20px;
+  padding: var(--s-0-5) var(--s-2);
+  border: 1px solid var(--md-sys-color-outline-variant);
+  /* Subtle bottom edge so the cap reads as a key, not a flat chip.
+     Hairline-respecting: the border stays 1px; this is an inset rim,
+     not a heavier border. */
+  border-bottom-width: 2px;
+  border-radius: var(--md-sys-shape-corner-extra-small);
+  background: var(--md-sys-color-surface-container-high);
+  color: var(--md-sys-color-on-surface);
+  font-family: var(--xm-typescale-mono-font);
+  font-size: var(--xm-typescale-mono-size);
+  font-weight: var(--xm-typescale-mono-weight);
+  line-height: var(--xm-typescale-mono-line-height);
+  letter-spacing: var(--xm-typescale-mono-tracking);
+  white-space: nowrap;
+  vertical-align: baseline;
+}

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

@@ -0,0 +1,11 @@
+import { LitElement } from "lit";
+import type { TemplateResult } from "lit";
+declare class XmKbd extends LitElement {
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "xm-kbd": XmKbd;
+    }
+}
+export {};

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

@@ -0,0 +1,43 @@
+/*
+  kbd/index.ts — <xm-kbd>.
+
+  Inline keyboard-key display primitive. Wraps its default-slot
+  content in a native <kbd> for semantics and renders it as a small
+  key-cap token using the JetBrains Mono typescale.
+
+  Authoring:
+    Press <xm-kbd>⌘</xm-kbd> <xm-kbd>K</xm-kbd> to open the palette.
+
+  Presentational, non-interactive — no focus ring. Shadow DOM for
+  <slot> projection; Lit is a bare `import` (peer dep); CSS via <link> resolved
+  relative to the built module (mirrors button/index.ts).
+*/
+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 } from "lit/decorators.js";
+const KBD_CSS = new URL("../kbd/index.css", import.meta.url).href;
+let XmKbd = class XmKbd extends LitElement {
+    render() {
+        return html `
+      <link rel="stylesheet" href="${KBD_CSS}" />
+      <style>
+        :host {
+          display: inline-flex;
+          vertical-align: baseline;
+        }
+        :host([hidden]) {
+          display: none;
+        }
+      </style>
+      <kbd class="kbd"><slot></slot></kbd>
+    `;
+    }
+};
+XmKbd = __decorate([
+    customElement("xm-kbd")
+], XmKbd);

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

@@ -0,0 +1,15 @@
+/* ============================================
+   List — vertical collection of <xm-list-item> rows.
+
+   Layout owner for a stack of rows. Sits on the surface* desk family
+   (AD-13) — establishes on-surface as the inherited ink so rows read
+   correctly on the desk. The rows own all chrome; the list owns the
+   rhythm, ARIA role, and (when interactive) keyboard selection.
+   ============================================ */
+
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-1);
+  color: var(--md-sys-color-on-surface);
+}

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

@@ -0,0 +1,28 @@
+import { LitElement } from "lit";
+import type { TemplateResult } from "lit";
+type Primitive = string | number;
+declare class XmList extends LitElement {
+    interactive: boolean;
+    selectable: boolean;
+    value: Primitive | null;
+    private get _isInteractive();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    private _items;
+    private _enabledItems;
+    private _applyItems;
+    private _updateRovingTabindex;
+    private _select;
+    private _itemFromEvent;
+    private _onClick;
+    private _onKeydown;
+    private _onSlot;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "xm-list": XmList;
+    }
+}
+export {};

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

@@ -0,0 +1,188 @@
+/*
+  list/index.ts — <xm-list>.
+
+  Vertical collection of <xm-list-item> rows. Two modes:
+
+  - Presentational (default): role="list", items role="listitem". No
+    selection, no keyboard navigation — just a ruled stack.
+  - Interactive (`interactive` / `selectable`): the WAI-ARIA listbox
+    pattern — role="listbox", items role="option" + aria-selected, a
+    single tab stop (roving tabindex), ↑/↓ to move, Home/End to ends,
+    Enter/Space to select, disabled items skipped. Single-select.
+
+  Authoring:
+    <xm-list interactive aria-label="Workspaces">
+      <xm-list-item value="a" selected>Acme</xm-list-item>
+      <xm-list-item value="b">Globex</xm-list-item>
+      <xm-list-item value="c" disabled>Archived</xm-list-item>
+    </xm-list>
+
+  Properties:
+    interactive  boolean       — listbox selection + keyboard nav
+    selectable   boolean       — alias of interactive
+    value        string|number — current selection (reflected to items)
+
+  Events:
+    change   bubbles+composed. detail.value = the selected item's
+             primitive `value` (single), never the element (AD-8a).
+
+  Reads/sets only public item properties (value/selected/disabled) —
+  never their shadow roots (AD-12). Shadow DOM; Lit is a bare `import` (peer dep).
+*/
+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";
+const LIST_CSS = new URL("../list/index.css", import.meta.url).href;
+let XmList = class XmList extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.interactive = false;
+        this.selectable = false;
+        this.value = null;
+        this._onClick = (e) => {
+            if (!this._isInteractive)
+                return;
+            const item = this._itemFromEvent(e.composedPath()[0]);
+            if (item)
+                this._select(item);
+        };
+        this._onKeydown = (e) => {
+            if (!this._isInteractive)
+                return;
+            const k = e.key;
+            const items = this._enabledItems();
+            if (items.length === 0)
+                return;
+            const active = this._itemFromEvent(e.composedPath()[0]);
+            if (k === "Enter" || k === " ") {
+                if (active) {
+                    e.preventDefault();
+                    this._select(active);
+                }
+                return;
+            }
+            if (k !== "ArrowUp" && k !== "ArrowDown" && k !== "Home" && k !== "End")
+                return;
+            e.preventDefault();
+            const idx = active ? items.indexOf(active) : -1;
+            let next;
+            if (k === "Home")
+                next = 0;
+            else if (k === "End")
+                next = items.length - 1;
+            else if (k === "ArrowDown")
+                next = idx < 0 ? 0 : (idx + 1) % items.length;
+            else
+                next = idx < 0 ? items.length - 1 : (idx - 1 + items.length) % items.length;
+            const target = items[next];
+            if (target) {
+                this._updateRovingTabindex(target);
+                target.focus();
+            }
+        };
+        this._onSlot = () => {
+            this._applyItems();
+        };
+    }
+    get _isInteractive() {
+        return this.interactive || this.selectable;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener("click", this._onClick);
+        this.addEventListener("keydown", this._onKeydown);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener("click", this._onClick);
+        this.removeEventListener("keydown", this._onKeydown);
+    }
+    firstUpdated() {
+        this._applyItems();
+    }
+    _items() {
+        return [...this.children].filter((c) => c.tagName.toLowerCase() === "xm-list-item");
+    }
+    _enabledItems() {
+        return this._items().filter((c) => !c.disabled);
+    }
+    _applyItems() {
+        const items = this._items();
+        const interactive = this._isInteractive;
+        const selected = items.find((c) => c.selected) ?? null;
+        if (interactive)
+            this.value = selected?.value ?? null;
+        items.forEach((el) => {
+            el.setAttribute("role", interactive ? "option" : "listitem");
+            if (interactive) {
+                el.setAttribute("aria-selected", el.selected ? "true" : "false");
+                if (el.disabled)
+                    el.setAttribute("aria-disabled", "true");
+                else
+                    el.removeAttribute("aria-disabled");
+            }
+            else {
+                el.removeAttribute("aria-selected");
+            }
+        });
+        if (interactive)
+            this._updateRovingTabindex(selected ?? this._enabledItems()[0] ?? undefined);
+    }
+    _updateRovingTabindex(focused) {
+        const items = this._items();
+        const enabled = this._enabledItems();
+        const tabStop = focused ?? enabled.find((c) => c.selected) ?? enabled[0] ?? null;
+        items.forEach((c) => {
+            c.tabIndex = c === tabStop && !c.disabled ? 0 : -1;
+        });
+    }
+    _select(item) {
+        if (item.disabled)
+            return;
+        this._items().forEach((c) => (c.selected = c === item));
+        this._applyItems();
+        this.dispatchEvent(new CustomEvent("change", {
+            detail: { value: item.value },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    _itemFromEvent(target) {
+        const el = target;
+        const item = el?.closest("xm-list-item");
+        return item && item.parentElement === this ? item : null;
+    }
+    render() {
+        return html `
+      <link rel="stylesheet" href="${LIST_CSS}" />
+      <style>
+        :host {
+          display: block;
+        }
+        :host([hidden]) {
+          display: none;
+        }
+      </style>
+      <div class="list" role=${this._isInteractive ? "listbox" : "list"}>
+        <slot @slotchange=${this._onSlot}></slot>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], XmList.prototype, "interactive", void 0);
+__decorate([
+    property({ type: Boolean })
+], XmList.prototype, "selectable", void 0);
+__decorate([
+    property({ attribute: false })
+], XmList.prototype, "value", void 0);
+XmList = __decorate([
+    customElement("xm-list")
+], XmList);

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

@@ -0,0 +1,119 @@
+/* ============================================
+   List item — a row in <xm-list>.
+
+   Generalizes the shipped <xm-sidebar-item> desk-row pattern (FR-156):
+   8px radius, surface-container-lowest hover/active, short3 background
+   transition, on-surface / on-surface-variant ink — into a reusable
+   surface* row with leading / body (title + optional secondary) /
+   trailing slots.
+
+   Lives on the surface* desk family (AD-13): primary ink
+   --md-sys-color-on-surface, secondary --md-sys-color-on-surface-variant.
+   Selected adds a coral leading indicator + a soft selected background;
+   selection is conveyed by the indicator + aria-selected, never by color
+   alone (NFR-15). State changes are real token swaps, not filter/opacity.
+   ============================================ */
+
+.list-item {
+  display: flex;
+  align-items: center;
+  gap: var(--s-3);
+  padding: var(--s-2) var(--s-3);
+  border-radius: var(--md-sys-shape-corner-small);
+  color: var(--md-sys-color-on-surface);
+  cursor: pointer;
+  position: relative;
+  transition:
+    background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
+    color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
+}
+.list-item:focus { outline: none; }
+
+/* ---------- Hover / active (shared with sidebar-item) ---------- */
+.list-item:hover,
+.list-item.is-hover {
+  background: var(--md-sys-color-surface-container-lowest);
+}
+
+/* ---------- Selected — coral leading indicator + soft fill ---------- */
+.list-item--selected {
+  background: var(--md-sys-color-surface-container-low);
+}
+.list-item--selected::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 3px;
+  height: 60%;
+  border-radius: var(--md-sys-shape-corner-full);
+  background: var(--md-sys-color-primary);
+}
+.list-item--selected .list-item__title {
+  color: var(--md-sys-color-on-surface);
+}
+
+/* ---------- Disabled — reduced emphasis, no hover ---------- */
+.list-item--disabled {
+  cursor: not-allowed;
+  color: var(--xm-color-on-surface-disabled);
+}
+.list-item--disabled:hover,
+.list-item--disabled.is-hover {
+  background: transparent;
+}
+
+/* ---------- Leading / body / trailing ---------- */
+.list-item__leading {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--md-sys-color-on-surface-variant);
+}
+.list-item__leading.is-empty { display: none; }
+
+.list-item__body {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.list-item__title {
+  font-family: var(--md-sys-typescale-title-small-font);
+  font-size: var(--md-sys-typescale-title-small-size);
+  font-weight: 500;
+  line-height: 1.25;
+  color: var(--md-sys-color-on-surface);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.list-item__secondary {
+  font-family: var(--md-sys-typescale-body-medium-font);
+  font-size: var(--md-sys-typescale-body-medium-size);
+  line-height: 1.35;
+  color: var(--md-sys-color-on-surface-variant);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.list-item__secondary.is-empty { display: none; }
+
+.list-item__trailing {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--md-sys-color-on-surface-variant);
+}
+.list-item__trailing.is-empty { display: none; }
+
+/* Dark theme — like sidebar-item, push the resting title into gray so a
+   hovered/selected row's brighter title pops as the active state. */
+[data-theme="dark"] .list-item:not(.list-item--selected):not(:hover):not(.is-hover) .list-item__title {
+  color: var(--md-sys-color-on-surface-variant);
+}

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

@@ -0,0 +1,20 @@
+import { LitElement } from "lit";
+import type { TemplateResult } from "lit";
+declare class XmListItem extends LitElement {
+    value: string;
+    selected: boolean;
+    disabled: boolean;
+    secondary: string;
+    private _mo;
+    private _hasSlot;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _onSlot;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "xm-list-item": XmListItem;
+    }
+}
+export {};

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

@@ -0,0 +1,127 @@
+/*
+  list-item/index.ts — <xm-list-item>.
+
+  A row in <xm-list>. Generalizes the shipped <xm-sidebar-item> desk-row
+  pattern into a reusable shadow-DOM row with leading / body / trailing
+  regions. The body holds a primary title (default slot) and an optional
+  secondary line (`secondary` attribute or slot="secondary").
+
+  Authoring:
+    <xm-list-item value="threads" secondary="14 open">
+      <svg slot="leading">…</svg>
+      Threads
+      <span slot="trailing">⌘1</span>
+    </xm-list-item>
+
+  Properties:
+    value      string|number — the item's identity (list emits this)
+    selected   boolean       — selected row (coral leading indicator)
+    disabled   boolean       — non-interactive, reduced emphasis
+    secondary  string        — secondary line text (or use slot="secondary")
+
+  Focus model: the host element is the focus target so a parent <xm-list>
+  drives roving tabindex without crossing the shadow boundary (AD-12). The
+  list sets role (listitem | option) + aria-selected on the host; Enter/Space
+  and click activate. Shadow DOM; Lit is a bare `import` (peer dep).
+*/
+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";
+const ITEM_CSS = new URL("../list-item/index.css", import.meta.url).href;
+let XmListItem = class XmListItem extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.value = "";
+        this.selected = false;
+        this.disabled = false;
+        this.secondary = "";
+        this._mo = null;
+        this._onSlot = () => {
+            this.requestUpdate();
+        };
+    }
+    _hasSlot(name) {
+        for (const node of this.childNodes) {
+            if (node.nodeType === Node.ELEMENT_NODE &&
+                node.getAttribute("slot") === name) {
+                return true;
+            }
+        }
+        return false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this._mo) {
+            this._mo = new MutationObserver(() => this.requestUpdate());
+            this._mo.observe(this, { childList: true, characterData: true, subtree: true });
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._mo?.disconnect();
+        this._mo = null;
+    }
+    render() {
+        const cls = [
+            "list-item",
+            this.selected && "list-item--selected",
+            this.disabled && "list-item--disabled",
+        ]
+            .filter(Boolean)
+            .join(" ");
+        const hasLeading = this._hasSlot("leading");
+        const hasTrailing = this._hasSlot("trailing");
+        const hasSecondary = this.secondary || this._hasSlot("secondary");
+        return html `
+      <link rel="stylesheet" href="${ITEM_CSS}" />
+      <style>
+        :host {
+          display: block;
+          outline: none;
+        }
+        :host([hidden]) {
+          display: none;
+        }
+        :host(:focus-visible) .list-item {
+          box-shadow: var(--xm-state-focus-ring);
+        }
+      </style>
+      <div class="${cls}">
+        <span class="list-item__leading ${hasLeading ? "" : "is-empty"}"
+          ><slot name="leading" @slotchange=${this._onSlot}></slot
+        ></span>
+        <span class="list-item__body">
+          <span class="list-item__title"><slot></slot></span>
+          <span class="list-item__secondary ${hasSecondary ? "" : "is-empty"}">
+            ${this.secondary
+            ? this.secondary
+            : html `<slot name="secondary" @slotchange=${this._onSlot}></slot>`}
+          </span>
+        </span>
+        <span class="list-item__trailing ${hasTrailing ? "" : "is-empty"}"
+          ><slot name="trailing" @slotchange=${this._onSlot}></slot
+        ></span>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], XmListItem.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], XmListItem.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], XmListItem.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], XmListItem.prototype, "secondary", void 0);
+XmListItem = __decorate([
+    customElement("xm-list-item")
+], XmListItem);