@xmesh/system-design 0.0.1

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

@@ -0,0 +1,126 @@
+/* ============================================
+   xm-checkbox — toggle field built on XmField.
+
+   A compact, inline toggle: the box sits BESIDE the label (toggle layout),
+   not above it like the bordered text-field chrome. State machinery
+   (disabled / focus / form-association / change event) is inherited from
+   XmField; this file only styles the box, the mark, and the label row.
+
+   Surface & ink: the checkbox rides the card tier shared by every XmField
+   sibling — ink is --md-sys-color-inverse-on-surface, the box hairline is
+   --md-sys-color-outline-variant. Selected (checked OR indeterminate) fills
+   the box with the single coral accent (--md-sys-color-primary) and paints
+   the mark in --md-sys-color-on-primary. Coral signals selection only —
+   never severity (AD-11 / rule 3a). The error string in the message row
+   carries severity via copy, not color.
+
+   BEM block: `checkbox`. Registered in scripts/check-bem.sh STRICT_BLOCKS.
+   ============================================ */
+
+.checkbox {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--s-1);
+}
+
+/* ---------- Control row — box + label, the focusable target ---------- */
+.checkbox__control {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-2);
+  cursor: pointer;
+  user-select: none;
+  border-radius: var(--md-sys-shape-corner-extra-small);
+  outline: none;
+}
+
+/* ---------- Box — the 18px square that holds the mark ---------- */
+.checkbox__box {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  border: 1px solid var(--md-sys-color-outline-variant);
+  border-radius: var(--md-sys-shape-corner-extra-small);
+  background: transparent;
+  color: var(--md-sys-color-on-primary);
+  transition:
+    background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
+    border-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
+    box-shadow var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
+}
+
+.checkbox__control:hover .checkbox__box {
+  border-color: var(--md-sys-color-outline);
+}
+
+/* Focus ring — the canonical 3px coral halo, never a hard-coded width. */
+.checkbox__control:focus-visible .checkbox__box {
+  border-color: var(--md-sys-color-primary);
+  box-shadow: var(--xm-state-focus-ring);
+}
+
+/* ---------- Mark — primitives check / indeterminate icon ---------- */
+.checkbox__mark {
+  display: inline-flex;
+  color: var(--md-sys-color-on-primary);
+}
+
+/* ---------- Label ---------- */
+.checkbox__label {
+  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);
+  letter-spacing: 0;
+}
+
+/* ---------- Selected — checked OR indeterminate ---------- */
+.checkbox--selected .checkbox__box {
+  background: var(--md-sys-color-primary);
+  border-color: var(--md-sys-color-primary);
+}
+.checkbox--selected .checkbox__control:hover .checkbox__box {
+  border-color: var(--md-sys-color-primary);
+}
+
+/* ---------- Disabled — shared reduced emphasis; hover reverted ---------- */
+.checkbox--disabled .checkbox__control {
+  cursor: not-allowed;
+}
+.checkbox--disabled .checkbox__box {
+  opacity: 0.45;
+  box-shadow: none;
+}
+.checkbox--disabled .checkbox__label {
+  color: var(--xm-color-inverse-on-surface-disabled);
+}
+.checkbox--disabled .checkbox__control:hover .checkbox__box {
+  border-color: var(--md-sys-color-outline-variant);
+}
+.checkbox--disabled.checkbox--selected .checkbox__control:hover .checkbox__box {
+  border-color: var(--md-sys-color-primary);
+}
+
+/* ---------- Helper / error message row ----------
+   Severity is copy, not color — the error keeps the helper ink (rule 3a). */
+.checkbox__message {
+  padding-left: calc(var(--s-4-5) + var(--s-2));
+  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);
+}
+.checkbox__message--helper {
+  color: var(--xm-color-inverse-on-surface-muted);
+}
+.checkbox__message--error {
+  color: var(--md-sys-color-inverse-on-surface);
+}

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

@@ -0,0 +1,21 @@
+import type { TemplateResult } from "lit";
+import { XmField } from "../field/index.js";
+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;
+    /** A checkbox submits checked-state ("on"/null), not text — declare it a
+        toggle so the form value is correct from first paint, before any user
+        interaction (the base seeds `_checked` from the `checked` attribute and
+        `isToggle` routes it through the checkbox form-value branch). */
+    protected get isToggle(): boolean;
+    private _handleToggle;
+    private _onKeydown;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "xm-checkbox": XmCheckbox;
+    }
+}
+export {};

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

@@ -0,0 +1,138 @@
+/*
+  checkbox/index.ts — <xm-checkbox>, a toggle field built on XmField.
+
+  Story 2.5. A labeled, tri-state checkbox: checked · indeterminate ·
+  disabled, with a default-slot label. Selected (checked or indeterminate)
+  paints the box coral (--md-sys-color-primary) and the mark in
+  --md-sys-color-on-primary. Severity is never relevant here — coral is
+  used only for the selected state (AD-11 / UX-DR3).
+
+  Why this overrides render() instead of renderControl(): a checkbox is a
+  TOGGLE field — the label sits BESIDE the control, not above it on its own
+  row. XmField.render() lays out label-row / bordered-control-wrapper /
+  helper-row, which is the text-field chrome and wrong for a compact toggle.
+  So the subclass renders the inline box+mark+label row itself, but reuses
+  ALL of the base's state machinery: effectiveDisabled / nonInteractive,
+  the emitToggle helper (which owns live _checked state, the form value, and
+  the bubbling+composed `change` with detail.checked), the controlAria hooks,
+  and the helper/error message row. Nothing about disabled/focus/form-
+  association is re-implemented.
+
+  Authoring:
+    <xm-checkbox checked>Email me about replies</xm-checkbox>
+    <xm-checkbox indeterminate>Select all</xm-checkbox>
+    <xm-checkbox disabled>Locked option</xm-checkbox>
+
+  Shadow DOM (Lit <slot> projection needs it). Lit is a bare `import` (peer dep). The sibling index.css + primitives CSS are <link>ed inside
+  the shadow root, resolved from the *built* file location.
+*/
+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 { html, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { XmField } from "../field/index.js";
+const CHECKBOX_CSS = new URL("../checkbox/index.css", import.meta.url).href;
+const PRIMITIVES_CSS = new URL("../primitives/index.css", import.meta.url).href;
+let XmCheckbox = class XmCheckbox extends XmField {
+    constructor() {
+        super(...arguments);
+        /** Indeterminate (mixed) state — shows the dash mark on the coral fill and
+            reports aria-checked="mixed". Cleared on the first user toggle. */
+        this.indeterminate = false;
+        this._handleToggle = () => {
+            if (this.nonInteractive)
+                return;
+            const next = this.indeterminate ? true : !this._checked;
+            this.indeterminate = false;
+            this.emitToggle(next);
+        };
+        this._onKeydown = (event) => {
+            if (event.key === " " || event.key === "Spacebar") {
+                event.preventDefault();
+                this._handleToggle();
+            }
+        };
+    }
+    /** A checkbox submits checked-state ("on"/null), not text — declare it a
+        toggle so the form value is correct from first paint, before any user
+        interaction (the base seeds `_checked` from the `checked` attribute and
+        `isToggle` routes it through the checkbox form-value branch). */
+    get isToggle() {
+        return true;
+    }
+    render() {
+        const selected = this._checked || this.indeterminate;
+        const cls = [
+            "checkbox",
+            selected ? "checkbox--selected" : "",
+            this.effectiveDisabled ? "checkbox--disabled" : "",
+            this.isError ? "checkbox--error" : "",
+        ]
+            .filter(Boolean)
+            .join(" ");
+        const ariaChecked = this.indeterminate ? "mixed" : String(this._checked);
+        const helperText = this.isError ? this.error : this.helper;
+        const ctrl = this.controlAria;
+        return html `
+      <link rel="stylesheet" href="${PRIMITIVES_CSS}" />
+      <link rel="stylesheet" href="${CHECKBOX_CSS}" />
+      <style>
+        :host {
+          display: inline-block;
+        }
+        :host([hidden]) {
+          display: none;
+        }
+      </style>
+      <div class="${cls}">
+        <div
+          class="checkbox__control"
+          id="${ctrl.id}"
+          role="checkbox"
+          aria-checked="${ariaChecked}"
+          aria-describedby="${helperText ? ctrl.describedBy : nothing}"
+          aria-invalid="${ctrl.invalid ?? nothing}"
+          aria-required="${ctrl.required ?? nothing}"
+          aria-disabled="${this.effectiveDisabled ? "true" : nothing}"
+          tabindex="${this.effectiveDisabled ? -1 : 0}"
+          @click=${this._handleToggle}
+          @keydown=${this._onKeydown}
+        >
+          <span class="checkbox__box" aria-hidden="true">
+            ${this.indeterminate
+            ? html `<xm-indeterminate-icon
+                  class="checkbox__mark"
+                  size="14"
+                ></xm-indeterminate-icon>`
+            : this._checked
+                ? html `<xm-check-icon class="checkbox__mark" size="14"></xm-check-icon>`
+                : nothing}
+          </span>
+          <span class="checkbox__label"><slot></slot></span>
+        </div>
+
+        ${helperText
+            ? html `<div
+              class="checkbox__message ${this.isError
+                ? "checkbox__message--error"
+                : "checkbox__message--helper"}"
+              id="${ctrl.describedBy}"
+              role=${this.isError ? "alert" : nothing}
+            >
+              ${helperText}
+            </div>`
+            : nothing}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], XmCheckbox.prototype, "indeterminate", void 0);
+XmCheckbox = __decorate([
+    customElement("xm-checkbox")
+], XmCheckbox);

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

@@ -0,0 +1,145 @@
+/* ============================================
+   Chip — compact label pill (tag / filter / category).
+
+   <xm-chip> is a transparent pill that sits on a surface* host, so
+   default ink is --md-sys-color-on-surface (AD-13). Selected flips
+   to the coral primary-container fill + on-primary-container ink —
+   the selected-pill pattern (UX-DR3), never a status hue (AD-11).
+   Removable chips carry a trailing x. A category chip may take a
+   saturated background ONLY via the --xm-method-* / --xm-ext-* sets
+   (category, never severity); --md-sys-color-error* is forbidden.
+
+   Sizes share the canonical xs|sm|md|lg axis (AD-9).
+   ============================================ */
+
+.chip {
+  --chip-height: 28px;
+  --chip-pad-x: var(--s-3);
+  --chip-font: var(--md-sys-typescale-label-medium-size);
+  --chip-gap: var(--s-1);
+
+  display: inline-flex;
+  align-items: center;
+  gap: var(--chip-gap);
+  box-sizing: border-box;
+  height: var(--chip-height);
+  padding: 0 var(--chip-pad-x);
+  border: 1px solid var(--md-sys-color-outline-variant);
+  border-radius: var(--md-sys-shape-corner-full);
+  background: transparent;
+  color: var(--md-sys-color-on-surface);
+  font-family: var(--md-sys-typescale-label-medium-font);
+  font-size: var(--chip-font);
+  font-weight: 500;
+  line-height: 1;
+  letter-spacing: 0;
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  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),
+    border-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
+}
+/* The host element owns focus (role=button + tabindex on <xm-chip>) so the
+   3px ring is applied via :host(:focus-visible) .chip in the component's
+   inline <style>. The forced-state helper still previews it. */
+.chip.is-focus {
+  box-shadow: var(--xm-state-focus-ring);
+}
+.chip:hover,
+.chip.is-hover {
+  background: color-mix(in oklab, var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity), transparent);
+  border-color: var(--md-sys-color-outline);
+}
+
+/* ---------- Selected — coral selected-pill ---------- */
+.chip--selected {
+  border-color: color-mix(in oklab, var(--md-sys-color-primary) 60%, transparent);
+  background: var(--md-sys-color-primary-container);
+  color: var(--md-sys-color-on-primary-container);
+}
+.chip--selected:hover,
+.chip--selected.is-hover {
+  background: var(--md-sys-color-primary-container);
+  border-color: var(--md-sys-color-primary);
+}
+
+/* ---------- Category — saturated ONLY for category (AD-11) ---------- */
+.chip--category-get    { background: var(--xm-method-get-bg);    color: var(--xm-method-get-ink);    border-color: transparent; }
+.chip--category-post   { background: var(--xm-method-post-bg);   color: var(--xm-method-post-ink);   border-color: transparent; }
+.chip--category-put    { background: var(--xm-method-put-bg);    color: var(--xm-method-put-ink);    border-color: transparent; }
+.chip--category-delete { background: var(--xm-method-delete-bg); color: var(--xm-method-delete-ink); border-color: transparent; }
+.chip--category-patch  { background: var(--xm-method-patch-bg);  color: var(--xm-method-patch-ink);  border-color: transparent; }
+.chip--category-yml    { background: var(--xm-ext-yml-bg);       color: var(--xm-ext-yml-ink);       border-color: transparent; }
+.chip--category-json   { background: var(--xm-ext-json-bg);      color: var(--xm-ext-json-ink);      border-color: transparent; }
+/* Category chips don't change hue on hover — the hue IS the meaning. */
+.chip--category-get:hover, .chip--category-get.is-hover,
+.chip--category-post:hover, .chip--category-post.is-hover,
+.chip--category-put:hover, .chip--category-put.is-hover,
+.chip--category-delete:hover, .chip--category-delete.is-hover,
+.chip--category-patch:hover, .chip--category-patch.is-hover,
+.chip--category-yml:hover, .chip--category-yml.is-hover,
+.chip--category-json:hover, .chip--category-json.is-hover {
+  filter: none;
+  border-color: transparent;
+}
+
+/* ---------- Disabled — shared reduced-emphasis ---------- */
+.chip--disabled {
+  cursor: not-allowed;
+  color: var(--xm-color-on-surface-disabled);
+  border-color: var(--md-sys-color-outline-variant);
+}
+.chip--disabled:hover,
+.chip--disabled.is-hover {
+  background: transparent;
+  border-color: var(--md-sys-color-outline-variant);
+}
+.chip--selected.chip--disabled:hover {
+  background: var(--md-sys-color-primary-container);
+}
+
+/* ---------- Sizes ---------- */
+.chip--xs { --chip-height: 22px; --chip-pad-x: var(--s-2); --chip-font: var(--md-sys-typescale-label-small-size);  --chip-gap: 3px; }
+.chip--sm { --chip-height: 24px; --chip-pad-x: var(--s-2); --chip-font: var(--md-sys-typescale-label-small-size); }
+.chip--md { --chip-height: 28px; --chip-pad-x: var(--s-3); --chip-font: var(--md-sys-typescale-label-medium-size); }
+.chip--lg { --chip-height: 34px; --chip-pad-x: var(--s-4); --chip-font: var(--md-sys-typescale-label-large-size); }
+
+/* ---------- Inner elements ---------- */
+.chip__icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+.chip__icon.is-empty { display: none; }
+
+.chip__label {
+  display: inline-block;
+}
+
+.chip__remove {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  margin-left: var(--s-0-5);
+  margin-right: -2px;
+  padding: 0;
+  border: none;
+  border-radius: var(--md-sys-shape-corner-full);
+  background: transparent;
+  color: currentColor;
+  cursor: pointer;
+  transition: background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
+}
+.chip__remove:hover {
+  background: color-mix(in oklab, currentColor 18%, transparent);
+}
+.chip__remove:focus-visible {
+  outline: none;
+  box-shadow: var(--xm-state-focus-ring);
+}

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

@@ -0,0 +1,30 @@
+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 {
+    value: string;
+    size: ChipSize;
+    selected: boolean;
+    removable: boolean;
+    disabled: boolean;
+    category: ChipCategory;
+    private _mo;
+    private get _labelText();
+    private get _hasIconLeft();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(): void;
+    private _onSlot;
+    private _activate;
+    private _onHostClick;
+    private _onHostKeydown;
+    private _onRemove;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "xm-chip": XmChip;
+    }
+}
+export {};

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

@@ -0,0 +1,230 @@
+/*
+  chip/index.ts — <xm-chip>.
+
+  Compact label pill (tag / filter / category). Default slot is the
+  label; an optional icon-left slot leads it; a trailing remove ×
+  appears when `removable`.
+
+  Authoring:
+    <xm-chip value="rest">REST</xm-chip>
+    <xm-chip value="planner" selected>Planning Path</xm-chip>
+    <xm-chip value="design.yaml" removable>design.yaml</xm-chip>
+    <xm-chip value="get" category="get">GET</xm-chip>
+
+  Properties:
+    value      string|number — the chip's identity (group emits this)
+    size       xs|sm|md|lg (default md)
+    selected   boolean       — coral selected-pill (UX-DR3)
+    removable  boolean       — show trailing × → emits xm-chip-remove
+    disabled   boolean       — non-interactive, reduced emphasis
+    category   get|post|put|delete|patch|yml|json — saturated category
+               background via --xm-method-* / --xm-ext-* (category,
+               NEVER severity; AD-11)
+
+  Events:
+    xm-chip-remove    bubbles+composed; detail { value }
+    xm-chip-activate  bubbles+composed+cancelable; detail { value };
+                      a parent <xm-chip-group> calls preventDefault to
+                      own selection. Standalone, the chip self-toggles.
+
+  Focus model: the host element itself is the focus target (role=button,
+  aria-pressed, tabindex on the host) so a parent group can drive roving
+  focus by setting `chip.tabIndex` without crossing the shadow boundary
+  (AD-12). Enter/Space activate; the remove control is a real focusable
+  <button> in the shadow root. Selection is conveyed via aria-pressed,
+  not color alone (NFR-15). 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, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+const CHIP_CSS = new URL("../chip/index.css", import.meta.url).href;
+let XmChip = class XmChip extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.value = "";
+        this.size = "md";
+        this.selected = false;
+        this.removable = false;
+        this.disabled = false;
+        this.category = "";
+        this._mo = null;
+        this._onSlot = () => {
+            this.requestUpdate();
+        };
+        this._onHostClick = (e) => {
+            if (this.disabled)
+                return;
+            // Clicks on the remove control are handled separately.
+            const path = e.composedPath();
+            if (path.some((n) => n.classList?.contains("chip__remove"))) {
+                return;
+            }
+            this._activate();
+        };
+        this._onHostKeydown = (e) => {
+            if (this.disabled)
+                return;
+            // Enter/Space on the remove control removes — it must NOT also toggle
+            // selection (the keydown bubbles to the host alongside the button's click).
+            const path = e.composedPath();
+            if (path.some((n) => n.classList?.contains("chip__remove"))) {
+                return;
+            }
+            if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                this._activate();
+            }
+        };
+        this._onRemove = (e) => {
+            e.stopPropagation();
+            if (this.disabled)
+                return;
+            this.dispatchEvent(new CustomEvent("xm-chip-remove", {
+                detail: { value: this.value },
+                bubbles: true,
+                composed: true,
+            }));
+        };
+    }
+    get _labelText() {
+        return (this.textContent ?? "").trim();
+    }
+    get _hasIconLeft() {
+        for (const node of this.childNodes) {
+            if (node.nodeType === Node.ELEMENT_NODE &&
+                node.getAttribute("slot") === "icon-left") {
+                return true;
+            }
+        }
+        return false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.hasAttribute("tabindex") && !this.disabled)
+            this.tabIndex = 0;
+        this.addEventListener("click", this._onHostClick);
+        this.addEventListener("keydown", this._onHostKeydown);
+        if (!this._mo) {
+            this._mo = new MutationObserver(() => this.requestUpdate());
+            this._mo.observe(this, { childList: true, characterData: true, subtree: true });
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener("click", this._onHostClick);
+        this.removeEventListener("keydown", this._onHostKeydown);
+        this._mo?.disconnect();
+        this._mo = null;
+    }
+    updated() {
+        // Reflect interactive semantics onto the host so a parent group's
+        // roving focus + a screen reader both see one consistent control.
+        this.setAttribute("role", "button");
+        this.setAttribute("aria-pressed", this.selected ? "true" : "false");
+        if (this.disabled) {
+            this.setAttribute("aria-disabled", "true");
+            this.tabIndex = -1;
+        }
+        else {
+            this.removeAttribute("aria-disabled");
+        }
+    }
+    _activate() {
+        if (this.disabled)
+            return;
+        const ev = new CustomEvent("xm-chip-activate", {
+            detail: { value: this.value },
+            bubbles: true,
+            composed: true,
+            cancelable: true,
+        });
+        const proceed = this.dispatchEvent(ev);
+        // No group owned it (not prevented) → self-toggle for standalone use.
+        if (proceed)
+            this.selected = !this.selected;
+    }
+    render() {
+        const cls = [
+            "chip",
+            `chip--${this.size}`,
+            this.selected && "chip--selected",
+            this.disabled && "chip--disabled",
+            this.category && `chip--category-${this.category}`,
+        ]
+            .filter(Boolean)
+            .join(" ");
+        return html `
+      <link rel="stylesheet" href="${CHIP_CSS}" />
+      <style>
+        :host {
+          display: inline-flex;
+          vertical-align: middle;
+          outline: none;
+        }
+        :host([hidden]) {
+          display: none;
+        }
+        /* The focus ring renders on the inner .chip when the host is
+           focused, so the pill itself shows the 3px halo. */
+        :host(:focus-visible) .chip {
+          box-shadow: var(--xm-state-focus-ring);
+        }
+      </style>
+      <div class="${cls}">
+        <span class="chip__icon ${this._hasIconLeft ? "" : "is-empty"}"
+          ><slot name="icon-left" @slotchange=${this._onSlot}></slot
+        ></span>
+        <span class="chip__label"><slot></slot></span>
+        ${this.removable
+            ? html `<button
+              type="button"
+              class="chip__remove"
+              aria-label="Remove ${this._labelText || this.value}"
+              ?disabled=${this.disabled}
+              @click=${this._onRemove}
+            >
+              <svg
+                viewBox="0 0 24 24"
+                width="12"
+                height="12"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2.4"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                aria-hidden="true"
+              >
+                <path d="M6 6l12 12M18 6L6 18" />
+              </svg>
+            </button>`
+            : nothing}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], XmChip.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], XmChip.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], XmChip.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean })
+], XmChip.prototype, "removable", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], XmChip.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], XmChip.prototype, "category", void 0);
+XmChip = __decorate([
+    customElement("xm-chip")
+], XmChip);