@xmesh/system-design 0.0.1

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

@@ -0,0 +1,283 @@
+/*
+  primitives/index.ts — Lit port of components/primitives/index.jsx.
+
+  Phase 1 scope: only the pieces <xm-button> needs at runtime, plus the
+  named icon elements referenced from preview/buttons.html on the React
+  side. The full primitive library (Field, Input, Pill, Badge, etc.) is
+  ported in later phases when other components require them.
+
+  Design rules (mirror the React port):
+    • Light DOM (createRenderRoot returns this) so existing CSS in
+      components/primitives/index.css and components/button/index.css
+      keeps targeting the same .ds-icon / .ds-spinner / .btn classes.
+    • Class names rendered identically to the JSX output.
+    • SVG path data copied verbatim from index.jsx — same shape, same
+      stroke widths, same default sizes.
+*/
+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 } from "lit/decorators.js";
+class LightElement extends LitElement {
+    createRenderRoot() {
+        return this;
+    }
+}
+/* ─────────────────────────────────────────────────────────────
+   <xm-icon> — sized SVG container, color via currentColor.
+   Phase 1 scope: kept minimal — accepts no children in light-DOM
+   mode (native <slot> projection requires shadow DOM). Each named
+   icon below emits its own complete <svg>, so this base element
+   exists primarily for parity with the React Icon primitive.
+   Phase 2 should reconsider whether xm-icon should switch to
+   shadow DOM with a real <slot> for path content.
+   ─────────────────────────────────────────────────────────────*/
+let XmIcon = class XmIcon extends LightElement {
+    constructor() {
+        super(...arguments);
+        this.size = 16;
+        this.viewBox = "0 0 24 24";
+        this.strokeWidth = 1.8;
+        this.fill = "none";
+        this.title = "";
+    }
+    render() {
+        const t = this.title;
+        return html `
+      <svg
+        width="${this.size}"
+        height="${this.size}"
+        viewBox="${this.viewBox}"
+        fill="${this.fill}"
+        stroke="currentColor"
+        stroke-width="${this.strokeWidth}"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="ds-icon"
+        aria-hidden="${t ? nothing : "true"}"
+        role="${t ? "img" : nothing}"
+      >
+        ${t ? svg `<title>${t}</title>` : nothing}
+      </svg>
+    `;
+    }
+};
+__decorate([
+    property({ type: Number })
+], XmIcon.prototype, "size", void 0);
+__decorate([
+    property({ type: String, attribute: "view-box" })
+], XmIcon.prototype, "viewBox", void 0);
+__decorate([
+    property({ type: Number, attribute: "stroke-width" })
+], XmIcon.prototype, "strokeWidth", void 0);
+__decorate([
+    property({ type: String })
+], XmIcon.prototype, "fill", void 0);
+__decorate([
+    property({ type: String })
+], XmIcon.prototype, "title", void 0);
+XmIcon = __decorate([
+    customElement("xm-icon")
+], XmIcon);
+/* ─────────────────────────────────────────────────────────────
+   <xm-spinner> — circular indeterminate spinner. Used by Button
+   for the loading state. Mirrors Spinner({ size }) in the JSX:
+   a <span class="ds-spinner btn__spinner"> sized via inline style.
+   ─────────────────────────────────────────────────────────────*/
+let XmSpinner = class XmSpinner extends LightElement {
+    constructor() {
+        super(...arguments);
+        this.size = 14;
+        this.className = "";
+    }
+    render() {
+        const cls = `ds-spinner ${this.className}`.trim();
+        return html `
+      <span
+        class="${cls}"
+        role="status"
+        aria-label="Loading"
+        style="width:${this.size}px;height:${this.size}px;display:inline-block;"
+      ></span>
+    `;
+    }
+};
+__decorate([
+    property({ type: Number })
+], XmSpinner.prototype, "size", void 0);
+__decorate([
+    property({ type: String, attribute: "class-name" })
+], XmSpinner.prototype, "className", void 0);
+XmSpinner = __decorate([
+    customElement("xm-spinner")
+], XmSpinner);
+const namedIcon = (tag, defaults, paths) => {
+    class NamedIcon extends LightElement {
+        constructor() {
+            super(...arguments);
+            this.size = defaults.size ?? 16;
+            this.strokeWidth = defaults.strokeWidth ?? 1.8;
+        }
+        render() {
+            return html `
+        <svg
+          width="${this.size}"
+          height="${this.size}"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="${this.strokeWidth}"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="ds-icon"
+          aria-hidden="true"
+        >
+          ${paths()}
+        </svg>
+      `;
+        }
+    }
+    __decorate([
+        property({ type: Number })
+    ], NamedIcon.prototype, "size", void 0);
+    __decorate([
+        property({ type: Number, attribute: "stroke-width" })
+    ], NamedIcon.prototype, "strokeWidth", void 0);
+    if (!customElements.get(tag))
+        customElements.define(tag, NamedIcon);
+    return NamedIcon;
+};
+namedIcon("xm-regenerate-icon", { size: 16, strokeWidth: 1.6 }, () => svg `
+  <path d="M3 12a9 9 0 1 0 3-6.7" />
+  <path d="M3 4v5h5" />
+`);
+namedIcon("xm-copy-icon", { size: 16, strokeWidth: 1.6 }, () => svg `
+  <rect x="9" y="9" width="11" height="11" rx="2" />
+  <path d="M5 15V5a2 2 0 0 1 2-2h10" />
+`);
+namedIcon("xm-check-icon", { size: 16, strokeWidth: 1.8 }, () => svg `
+  <polyline points="20 6 9 17 4 12" />
+`);
+namedIcon("xm-trace-icon", { size: 16, strokeWidth: 1.6 }, () => svg `
+  <path d="M8 6V4a4 4 0 0 1 8 0v2" />
+  <rect x="6" y="6" width="12" height="13" rx="6" />
+  <path d="M12 11v8" />
+  <path d="M3 11h3" />
+  <path d="M18 11h3" />
+  <path d="M3 18h3" />
+  <path d="M18 18h3" />
+  <path d="M3 14h3" />
+  <path d="M18 14h3" />
+`);
+namedIcon("xm-panel-icon", { size: 16, strokeWidth: 1.8 }, () => svg `
+  <rect x="3" y="4" width="18" height="16" rx="2" />
+  <path d="M9 4v16" />
+`);
+namedIcon("xm-plus-icon", { size: 14, strokeWidth: 2.2 }, () => svg `
+  <path d="M12 5v14M5 12h14" />
+`);
+namedIcon("xm-search-icon", { size: 14, strokeWidth: 2 }, () => svg `
+  <circle cx="11" cy="11" r="7" />
+  <path d="M21 21l-4.3-4.3" />
+`);
+namedIcon("xm-share-icon", { size: 15, strokeWidth: 1.8 }, () => svg `
+  <path d="M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7" />
+  <path d="M16 6l-4-4-4 4" />
+  <path d="M12 2v14" />
+`);
+namedIcon("xm-settings-icon", { size: 17, strokeWidth: 1.8 }, () => svg `
+  <circle cx="12" cy="12" r="3" />
+  <path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3h.1a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8v.1a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z" />
+`);
+namedIcon("xm-edit-icon", { size: 16, strokeWidth: 1.6 }, () => svg `
+  <path d="M12 20h9" />
+  <path d="M16.5 3.5a2.121 2.121 0 1 1 3 3L7 19l-4 1 1-4 12.5-12.5z" />
+`);
+namedIcon("xm-paperclip-icon", { size: 14, strokeWidth: 1.8 }, () => svg `
+  <path d="M21.4 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 17.93 8.83l-8.06 8.06a2 2 0 0 1-2.83-2.83l7.07-7.07" />
+`);
+namedIcon("xm-send-arrow-icon", { size: 14, strokeWidth: 2 }, () => svg `
+  <path d="M7 17L17 7" />
+  <path d="M9 7h8v8" />
+`);
+namedIcon("xm-play-icon", { size: 14, strokeWidth: 1.8 }, () => svg `
+  <path d="M5 4l14 8-14 8V4z" />
+`);
+namedIcon("xm-file-glyph-icon", { size: 14, strokeWidth: 1.8 }, () => svg `
+  <path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z" />
+  <path d="M14 3v5h5" />
+`);
+namedIcon("xm-x-icon", { size: 10, strokeWidth: 2.6 }, () => svg `
+  <path d="M6 6l12 12M18 6L6 18" />
+`);
+namedIcon("xm-warn-icon", { size: 14, strokeWidth: 2 }, () => svg `
+  <path d="M12 9v4" />
+  <path d="M12 17h.01" />
+  <path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
+`);
+namedIcon("xm-caret-icon", { size: 12, strokeWidth: 2 }, () => svg `
+  <polyline points="6 9 12 15 18 9" />
+`);
+/* Chevrons — directional. xm-caret-icon is the canonical chevron-down; these add the other three. */
+namedIcon("xm-chevron-up-icon", { size: 16, strokeWidth: 2 }, () => svg `
+  <polyline points="18 15 12 9 6 15" />
+`);
+namedIcon("xm-chevron-down-icon", { size: 16, strokeWidth: 2 }, () => svg `
+  <polyline points="6 9 12 15 18 9" />
+`);
+namedIcon("xm-chevron-left-icon", { size: 16, strokeWidth: 2 }, () => svg `
+  <polyline points="15 18 9 12 15 6" />
+`);
+namedIcon("xm-chevron-right-icon", { size: 16, strokeWidth: 2 }, () => svg `
+  <polyline points="9 18 15 12 9 6" />
+`);
+namedIcon("xm-calendar-icon", { size: 16, strokeWidth: 1.8 }, () => svg `
+  <rect x="3" y="4" width="18" height="18" rx="2" />
+  <path d="M16 2v4" />
+  <path d="M8 2v4" />
+  <path d="M3 10h18" />
+`);
+/* Sort indicators — arrow up = ascending, arrow down = descending. */
+namedIcon("xm-sort-asc-icon", { size: 14, strokeWidth: 2 }, () => svg `
+  <path d="M12 19V5" />
+  <polyline points="6 11 12 5 18 11" />
+`);
+namedIcon("xm-sort-desc-icon", { size: 14, strokeWidth: 2 }, () => svg `
+  <path d="M12 5v14" />
+  <polyline points="6 13 12 19 18 13" />
+`);
+/* Expand / collapse — diagonal arrows out / in. */
+namedIcon("xm-expand-icon", { size: 16, strokeWidth: 1.8 }, () => svg `
+  <polyline points="15 3 21 3 21 9" />
+  <polyline points="9 21 3 21 3 15" />
+  <path d="M21 3l-7 7" />
+  <path d="M3 21l7-7" />
+`);
+namedIcon("xm-collapse-icon", { size: 16, strokeWidth: 1.8 }, () => svg `
+  <polyline points="4 14 10 14 10 20" />
+  <polyline points="20 10 14 10 14 4" />
+  <path d="M14 10l7-7" />
+  <path d="M3 21l7-7" />
+`);
+/* Selection marks. The check (xm-check-icon) is the checkbox tick; these add the box, radio dot, and indeterminate bar. */
+namedIcon("xm-checkbox-icon", { size: 16, strokeWidth: 1.8 }, () => svg `
+  <rect x="3" y="3" width="18" height="18" rx="3" />
+  <polyline points="9 12 11.5 14.5 16 9" />
+`);
+namedIcon("xm-radio-mark-icon", { size: 16, strokeWidth: 1.8 }, () => svg `
+  <circle cx="12" cy="12" r="9" />
+  <circle cx="12" cy="12" r="3.5" fill="currentColor" stroke="none" />
+`);
+namedIcon("xm-indeterminate-icon", { size: 16, strokeWidth: 2.2 }, () => svg `
+  <path d="M6 12h12" />
+`);
+/* Person — identity fallback for avatars when no initials/image. */
+namedIcon("xm-user-icon", { size: 16, strokeWidth: 1.8 }, () => svg `
+  <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+  <circle cx="12" cy="7" r="4" />
+`);

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

@@ -0,0 +1,143 @@
+/* ============================================
+   Progress — linear + circular, determinate + indeterminate.
+
+   The indicator (linear fill / circular arc / sweep) is the ONE coral
+   accent: var(--md-sys-color-primary). The unfilled track is a neutral
+   surface tier that reads on both surface families and both themes
+   (AD-1, UX-DR3, AD-13). Progress is display-only chrome — never a
+   severity hue.
+
+   The circular indeterminate spin ALIGNS with primitives' <xm-spinner>
+   motion: one rotation source at 0.7s linear infinite (matching
+   @keyframes ds-spin). We do NOT introduce a second rotation speed.
+
+   BEM block: `progress`. Registered in scripts/check-bem.sh STRICT_BLOCKS.
+   Elements: __track, __fill, __ring, __ring-svg, __ring-track,
+   __ring-indicator, __label. Modifiers: --linear / --circular /
+   --indeterminate / --xs / --sm / --md / --lg.
+   ============================================ */
+
+.progress {
+  --progress-color: var(--md-sys-color-primary);
+  --progress-track: var(--md-sys-color-surface-container-highest);
+  /* Linear track thickness per size (set by the size modifiers). */
+  --progress-thickness: 6px;
+  /* Circular ring diameter per size. */
+  --progress-ring-size: 32px;
+  display: inline-flex;
+  align-items: center;
+}
+
+/* ---------- Size axis ---------- */
+.progress--xs { --progress-thickness: 3px; --progress-ring-size: 18px; }
+.progress--sm { --progress-thickness: 4px; --progress-ring-size: 24px; }
+.progress--md { --progress-thickness: 6px; --progress-ring-size: 32px; }
+.progress--lg { --progress-thickness: 8px; --progress-ring-size: 44px; }
+
+/* ---------- Linear ---------- */
+.progress--linear {
+  display: block;
+  width: 100%;
+}
+
+.progress__track {
+  display: block;
+  position: relative;
+  width: 100%;
+  height: var(--progress-thickness);
+  background: var(--progress-track);
+  border-radius: var(--md-sys-shape-corner-full);
+  overflow: hidden;
+}
+
+.progress__fill {
+  display: block;
+  height: 100%;
+  width: 0;
+  background: var(--progress-color);
+  border-radius: var(--md-sys-shape-corner-full);
+  /* Determinate value changes ease at short4 standard. */
+  transition: width var(--md-sys-motion-duration-short4)
+    var(--md-sys-motion-easing-standard);
+}
+
+/* Linear indeterminate — a fixed-width sweep travelling the track. Opacity /
+   translate only; no gradient. */
+.progress--linear.progress--indeterminate .progress__fill {
+  width: 40%;
+  transition: none;
+  animation: progress-sweep var(--md-sys-motion-duration-extra-long2)
+    var(--md-sys-motion-easing-standard) infinite;
+}
+
+@keyframes progress-sweep {
+  from {
+    transform: translateX(-110%);
+  }
+  to {
+    transform: translateX(260%);
+  }
+}
+
+/* ---------- Circular ---------- */
+.progress--circular {
+  display: inline-flex;
+}
+
+.progress__ring {
+  display: inline-flex;
+  width: var(--progress-ring-size);
+  height: var(--progress-ring-size);
+}
+
+.progress__ring-svg {
+  width: 100%;
+  height: 100%;
+  /* Start the determinate arc at 12 o'clock. */
+  transform: rotate(-90deg);
+}
+
+.progress__ring-track {
+  stroke: var(--progress-track);
+}
+
+.progress__ring-indicator {
+  stroke: var(--progress-color);
+  /* Determinate arc grows smoothly at short4 standard. */
+  transition: stroke-dashoffset var(--md-sys-motion-duration-short4)
+    var(--md-sys-motion-easing-standard);
+}
+
+/* Circular indeterminate — rotate the whole svg at the spinner's tempo:
+   0.7s linear infinite (aligned with @keyframes ds-spin). One spin source. */
+.progress--circular.progress--indeterminate .progress__ring-svg {
+  transform: none;
+  transform-origin: center;
+  animation: progress-spin 0.7s linear infinite;
+}
+.progress--circular.progress--indeterminate .progress__ring-indicator {
+  transition: none;
+}
+
+@keyframes progress-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* ---------- Value caption ---------- */
+.progress__label {
+  margin-left: var(--s-2);
+  font-family: var(--md-sys-typescale-label-medium-font);
+  font-size: var(--md-sys-typescale-label-medium-size);
+  line-height: var(--md-sys-typescale-label-medium-line-height);
+  color: currentColor;
+  font-variant-numeric: tabular-nums;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .progress--indeterminate .progress__fill,
+  .progress--circular.progress--indeterminate .progress__ring-svg {
+    animation-duration: var(--md-sys-motion-duration-extra-long4);
+  }
+}

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

@@ -0,0 +1,23 @@
+import { LitElement } from "lit";
+import type { TemplateResult } from "lit";
+export type ProgressVariant = "linear" | "circular";
+export type ProgressSize = "xs" | "sm" | "md" | "lg";
+export declare class XmProgress extends LitElement {
+    variant: ProgressVariant;
+    value: number;
+    indeterminate: boolean;
+    size: ProgressSize;
+    label: string;
+    showLabel: boolean;
+    private get _isDeterminate();
+    private get _clamped();
+    render(): TemplateResult;
+    private _renderLinear;
+    private _renderCircular;
+    private _renderRingIndicator;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "xm-progress": XmProgress;
+    }
+}

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

@@ -0,0 +1,180 @@
+/*
+  progress/index.ts — <xm-progress>, linear + circular progress.
+
+  Two variants × two modes:
+    variant="linear"   determinate (value 0–100) → a filled track
+                       indeterminate              → an indeterminate sweep
+    variant="circular" determinate (value 0–100) → an SVG ring arc
+                       indeterminate              → a rotating ring
+
+  Omitting/clearing `value` (or setting `indeterminate`) selects indeterminate.
+
+  The indicator (fill / arc / sweep) is the ONE coral accent —
+  `var(--md-sys-color-primary)`; the unfilled track is neutral (AD-1, UX-DR3).
+  Progress is display-only; it is NOT severity, so it never uses a status hue.
+
+  Circular indeterminate ALIGNS with the existing <xm-spinner> motion (AC-3):
+  one rotation source — a 0.7s linear infinite spin, matching primitives'
+  `@keyframes ds-spin`. We do not invent a second rotation speed.
+
+  ARIA: role="progressbar" + aria-valuemin/max/now (determinate); indeterminate
+  omits aria-valuenow and sets aria-busy + an accessible label.
+
+  Properties:
+    variant       "linear" | "circular"   (default "linear")
+    value         number 0–100 — when set (and not `indeterminate`), determinate
+    indeterminate boolean — force indeterminate (also inferred from missing value)
+    size          "xs" | "sm" | "md" | "lg"  (default "md")
+    label         accessible label (used for the aria-label / value caption)
+    show-label    boolean — render the value as a caption (determinate only)
+
+  Shadow DOM. Depends only on tokens — no overlay (AD-12). 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, svg, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+const PROGRESS_CSS = new URL("../progress/index.css", import.meta.url).href;
+// SVG ring geometry per size — diameter and stroke. The viewBox is fixed at
+// 24×24; the stroke + radius scale within it, and the host CSS sizes the svg.
+const RING_STROKE = {
+    xs: 2.5,
+    sm: 3,
+    md: 3.5,
+    lg: 4,
+};
+let XmProgress = class XmProgress extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.variant = "linear";
+        this.value = NaN;
+        this.indeterminate = false;
+        this.size = "md";
+        this.label = "";
+        this.showLabel = false;
+    }
+    get _isDeterminate() {
+        return !this.indeterminate && Number.isFinite(this.value);
+    }
+    get _clamped() {
+        return Math.max(0, Math.min(100, this.value));
+    }
+    render() {
+        const v = this.variant === "circular" ? "circular" : "linear";
+        const sz = ["xs", "sm", "md", "lg"].includes(this.size)
+            ? this.size
+            : "md";
+        const det = this._isDeterminate;
+        const cls = `progress progress--${v} progress--${sz}${det ? "" : " progress--indeterminate"}`;
+        const aria = det
+            ? {
+                "aria-valuemin": "0",
+                "aria-valuemax": "100",
+                "aria-valuenow": String(Math.round(this._clamped)),
+            }
+            : { "aria-busy": "true" };
+        return html `
+      <link rel="stylesheet" href="${PROGRESS_CSS}" />
+      <style>
+        :host { display: inline-flex; }
+        :host([variant="linear"]) { display: block; }
+        :host([hidden]) { display: none; }
+      </style>
+      <div
+        class="${cls}"
+        role="progressbar"
+        aria-label=${this.label || (det ? nothing : "Loading")}
+        aria-valuemin=${aria["aria-valuemin"] ?? nothing}
+        aria-valuemax=${aria["aria-valuemax"] ?? nothing}
+        aria-valuenow=${aria["aria-valuenow"] ?? nothing}
+        aria-busy=${aria["aria-busy"] ?? nothing}
+      >
+        ${v === "linear" ? this._renderLinear(det) : this._renderCircular(det, sz)}
+      </div>
+      ${this.showLabel && det
+            ? html `<span class="progress__label">${Math.round(this._clamped)}%</span>`
+            : nothing}
+    `;
+    }
+    _renderLinear(det) {
+        const fillStyle = det ? `width:${this._clamped}%;` : "";
+        return html `
+      <span class="progress__track">
+        <span class="progress__fill" style=${fillStyle}></span>
+      </span>
+    `;
+    }
+    _renderCircular(det, sz) {
+        const stroke = RING_STROKE[sz];
+        const r = 12 - stroke; // viewBox 24×24, centered at 12,12
+        const circumference = 2 * Math.PI * r;
+        return html `
+      <span class="progress__ring">
+        ${svg `
+          <svg viewBox="0 0 24 24" class="progress__ring-svg" aria-hidden="true">
+            <circle
+              class="progress__ring-track"
+              cx="12" cy="12" r="${r}"
+              fill="none" stroke-width="${stroke}"
+            />
+            ${this._renderRingIndicator(det, r, circumference, stroke)}
+          </svg>
+        `}
+      </span>
+    `;
+    }
+    _renderRingIndicator(det, r, circumference, stroke) {
+        if (det) {
+            const offset = circumference * (1 - this._clamped / 100);
+            return svg `
+        <circle
+          class="progress__ring-indicator"
+          cx="12" cy="12" r="${r}"
+          fill="none" stroke-width="${stroke}"
+          stroke-linecap="round"
+          stroke-dasharray="${circumference}"
+          stroke-dashoffset="${offset}"
+        />
+      `;
+        }
+        // Indeterminate: a short fixed arc, rotated by the spin animation in CSS
+        // (aligned with ds-spin — 0.7s linear infinite). The arc spans ~25% of the
+        // ring; the whole svg rotates.
+        const arc = circumference * 0.25;
+        return svg `
+      <circle
+        class="progress__ring-indicator"
+        cx="12" cy="12" r="${r}"
+        fill="none" stroke-width="${stroke}"
+        stroke-linecap="round"
+        stroke-dasharray="${arc} ${circumference - arc}"
+      />
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], XmProgress.prototype, "variant", void 0);
+__decorate([
+    property({ type: Number })
+], XmProgress.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean })
+], XmProgress.prototype, "indeterminate", void 0);
+__decorate([
+    property({ type: String })
+], XmProgress.prototype, "size", void 0);
+__decorate([
+    property({ type: String })
+], XmProgress.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "show-label" })
+], XmProgress.prototype, "showLabel", void 0);
+XmProgress = __decorate([
+    customElement("xm-progress")
+], XmProgress);
+export { XmProgress };