@f-ewald/components 0.1.0 → 0.2.0

package/dist/radio-cards.js

@@ -0,0 +1,111 @@
+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, css, html, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { repeat } from "lit/directives/repeat.js";
+import { tokens } from "./tokens.js";
+let instanceCount = 0;
+/**
+ * Single-select group of full-width cards, each with a label and optional
+ * description — for a handful of meaningfully different choices where the
+ * description matters. For many short, same-shaped options (a color swatch,
+ * a basemap style), use `radio-pills` instead. Wraps native radio inputs for
+ * keyboard/a11y and fires `change` rather than relying on form submission.
+ *
+ * @element radio-cards
+ * @fires change - A card was selected; detail: { value }.
+ */
+let RadioCards = class RadioCards extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Options to render, one card each. */
+        this.options = [];
+        /** Currently selected value. */
+        this.value = "";
+        this.#name = `radio-cards-${++instanceCount}`;
+    }
+    static { this.styles = [
+        tokens,
+        css `
+      :host {
+        display: block;
+      }
+      .options {
+        display: flex;
+        gap: 0.6rem;
+        flex-wrap: wrap;
+      }
+      .card {
+        flex: 1 1 180px;
+        display: flex;
+        align-items: flex-start;
+        gap: 0.5rem;
+        border: 1px solid var(--ui-border, #e2e8f0);
+        border-radius: var(--ui-radius-sm, 0.25rem);
+        padding: 0.6rem 0.7rem;
+        cursor: pointer;
+        font-family: var(--ui-font, ui-sans-serif, system-ui, sans-serif);
+        font-size: var(--ui-font-size-sm, 0.75rem);
+      }
+      .card:has(input:checked) {
+        border-color: var(--ui-primary, #4f46e5);
+        background: var(--ui-surface-muted, #f8fafc);
+      }
+      .card input {
+        width: auto;
+        margin-top: 0.15rem;
+        accent-color: var(--ui-primary, #4f46e5);
+        cursor: pointer;
+      }
+      .card-label {
+        font-weight: 600;
+        color: var(--ui-text, #0f172a);
+      }
+      .card-description {
+        display: block;
+        color: var(--ui-text-muted, #64748b);
+        font-weight: 400;
+      }
+    `,
+    ]; }
+    #name;
+    _onChange(value) {
+        this.value = value;
+        this.dispatchEvent(new CustomEvent("change", { detail: { value }, bubbles: true, composed: true }));
+    }
+    render() {
+        return html `
+      <div class="options">
+        ${repeat(this.options, (opt) => opt.value, (opt) => html `
+            <label class="card">
+              <input
+                type="radio"
+                name=${this.#name}
+                ?checked=${this.value === opt.value}
+                @change=${() => this._onChange(opt.value)}
+              />
+              <span>
+                <span class="card-label">${opt.label}</span>
+                ${opt.description ? html `<span class="card-description">${opt.description}</span>` : nothing}
+              </span>
+            </label>
+          `)}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ attribute: false })
+], RadioCards.prototype, "options", void 0);
+__decorate([
+    property()
+], RadioCards.prototype, "value", void 0);
+RadioCards = __decorate([
+    customElement("radio-cards")
+], RadioCards);
+export { RadioCards };
+//# sourceMappingURL=radio-cards.js.map

package/dist/radio-cards.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-cards.js","sourceRoot":"","sources":["../src/radio-cards.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAQrC,IAAI,aAAa,GAAG,CAAC,CAAC;AAEtB;;;;;;;;;GASG;AAEI,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QA8CL,wCAAwC;QACR,YAAO,GAAsB,EAAE,CAAC;QAChE,gCAAgC;QACpB,UAAK,GAAG,EAAE,CAAC;QAEd,UAAK,GAAG,eAAe,EAAE,aAAa,EAAE,CAAC;IA+BpD,CAAC;aAjFiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwCF;KACF,AA3CqB,CA2CpB;IAOO,KAAK,CAAoC;IAE1C,SAAS,CAAC,KAAa;QAC7B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IACtG,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;;UAEL,MAAM,CACN,IAAI,CAAC,OAAO,EACZ,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,KAAK,EAClB,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAA;;;;uBAIA,IAAI,CAAC,KAAK;2BACN,IAAI,CAAC,KAAK,KAAK,GAAG,CAAC,KAAK;0BACzB,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC;;;2CAGd,GAAG,CAAC,KAAK;kBAClC,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAA,kCAAkC,GAAG,CAAC,WAAW,SAAS,CAAC,CAAC,CAAC,OAAO;;;WAGjG,CACF;;KAEJ,CAAC;IACJ,CAAC;CACF,CAAA;AAnCiC;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;2CAAiC;AAEpD;IAAX,QAAQ,EAAE;yCAAY;AAjDZ,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAkFtB","sourcesContent":["import { LitElement, css, html, nothing } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { repeat } from \"lit/directives/repeat.js\";\nimport { tokens } from \"./tokens.js\";\n\nexport interface RadioCardOption {\n  value: string;\n  label: string;\n  description?: string;\n}\n\nlet instanceCount = 0;\n\n/**\n * Single-select group of full-width cards, each with a label and optional\n * description — for a handful of meaningfully different choices where the\n * description matters. For many short, same-shaped options (a color swatch,\n * a basemap style), use `radio-pills` instead. Wraps native radio inputs for\n * keyboard/a11y and fires `change` rather than relying on form submission.\n *\n * @element radio-cards\n * @fires change - A card was selected; detail: { value }.\n */\n@customElement(\"radio-cards\")\nexport class RadioCards extends LitElement {\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: block;\n      }\n      .options {\n        display: flex;\n        gap: 0.6rem;\n        flex-wrap: wrap;\n      }\n      .card {\n        flex: 1 1 180px;\n        display: flex;\n        align-items: flex-start;\n        gap: 0.5rem;\n        border: 1px solid var(--ui-border, #e2e8f0);\n        border-radius: var(--ui-radius-sm, 0.25rem);\n        padding: 0.6rem 0.7rem;\n        cursor: pointer;\n        font-family: var(--ui-font, ui-sans-serif, system-ui, sans-serif);\n        font-size: var(--ui-font-size-sm, 0.75rem);\n      }\n      .card:has(input:checked) {\n        border-color: var(--ui-primary, #4f46e5);\n        background: var(--ui-surface-muted, #f8fafc);\n      }\n      .card input {\n        width: auto;\n        margin-top: 0.15rem;\n        accent-color: var(--ui-primary, #4f46e5);\n        cursor: pointer;\n      }\n      .card-label {\n        font-weight: 600;\n        color: var(--ui-text, #0f172a);\n      }\n      .card-description {\n        display: block;\n        color: var(--ui-text-muted, #64748b);\n        font-weight: 400;\n      }\n    `,\n  ];\n\n  /** Options to render, one card each. */\n  @property({ attribute: false }) options: RadioCardOption[] = [];\n  /** Currently selected value. */\n  @property() value = \"\";\n\n  readonly #name = `radio-cards-${++instanceCount}`;\n\n  private _onChange(value: string) {\n    this.value = value;\n    this.dispatchEvent(new CustomEvent(\"change\", { detail: { value }, bubbles: true, composed: true }));\n  }\n\n  override render() {\n    return html`\n      <div class=\"options\">\n        ${repeat(\n          this.options,\n          (opt) => opt.value,\n          (opt) => html`\n            <label class=\"card\">\n              <input\n                type=\"radio\"\n                name=${this.#name}\n                ?checked=${this.value === opt.value}\n                @change=${() => this._onChange(opt.value)}\n              />\n              <span>\n                <span class=\"card-label\">${opt.label}</span>\n                ${opt.description ? html`<span class=\"card-description\">${opt.description}</span>` : nothing}\n              </span>\n            </label>\n          `,\n        )}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"radio-cards\": RadioCards;\n  }\n}\n"]}

package/dist/radio-pills.d.ts

@@ -0,0 +1,31 @@
+import { LitElement } from "lit";
+export interface RadioPillOption {
+    value: string;
+    label: string;
+}
+/**
+ * Single-select group of compact pill-shaped options — for many short,
+ * same-shaped choices (a basemap style, a unit toggle). For a handful of
+ * choices where a description matters, use `radio-cards` instead. Wraps
+ * native radio inputs for keyboard/a11y and fires `change` rather than
+ * relying on form submission.
+ *
+ * @element radio-pills
+ * @fires change - A pill was selected; detail: { value }.
+ */
+export declare class RadioPills extends LitElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    /** Options to render, one pill each. */
+    options: RadioPillOption[];
+    /** Currently selected value. */
+    value: string;
+    private _onChange;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "radio-pills": RadioPills;
+    }
+}
+//# sourceMappingURL=radio-pills.d.ts.map

package/dist/radio-pills.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-pills.d.ts","sourceRoot":"","sources":["../src/radio-pills.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAK5C,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAID;;;;;;;;;GASG;AACH,qBACa,UAAW,SAAQ,UAAU;;IACxC,OAAgB,MAAM,4BAmCpB;IAEF,wCAAwC;IACR,OAAO,EAAE,eAAe,EAAE,CAAM;IAChE,gCAAgC;IACpB,KAAK,SAAM;IAIvB,OAAO,CAAC,SAAS;IAKR,MAAM,yCAoBd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/dist/radio-pills.js

@@ -0,0 +1,100 @@
+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, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { repeat } from "lit/directives/repeat.js";
+import { tokens } from "./tokens.js";
+let instanceCount = 0;
+/**
+ * Single-select group of compact pill-shaped options — for many short,
+ * same-shaped choices (a basemap style, a unit toggle). For a handful of
+ * choices where a description matters, use `radio-cards` instead. Wraps
+ * native radio inputs for keyboard/a11y and fires `change` rather than
+ * relying on form submission.
+ *
+ * @element radio-pills
+ * @fires change - A pill was selected; detail: { value }.
+ */
+let RadioPills = class RadioPills extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Options to render, one pill each. */
+        this.options = [];
+        /** Currently selected value. */
+        this.value = "";
+        this.#name = `radio-pills-${++instanceCount}`;
+    }
+    static { this.styles = [
+        tokens,
+        css `
+      :host {
+        display: block;
+      }
+      .options {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.4rem;
+      }
+      .pill {
+        display: flex;
+        align-items: center;
+        gap: 0.3rem;
+        padding: 0.3rem 0.6rem;
+        border: 1px solid var(--ui-border, #e2e8f0);
+        border-radius: 999px;
+        cursor: pointer;
+        font-family: var(--ui-font, ui-sans-serif, system-ui, sans-serif);
+        font-size: var(--ui-font-size-sm, 0.75rem);
+        color: var(--ui-text, #0f172a);
+      }
+      .pill:has(input:checked) {
+        border-color: var(--ui-primary, #4f46e5);
+        background: var(--ui-surface-muted, #f8fafc);
+      }
+      .pill input {
+        width: 0.85rem;
+        height: 0.85rem;
+        accent-color: var(--ui-primary, #4f46e5);
+        cursor: pointer;
+        margin: 0;
+      }
+    `,
+    ]; }
+    #name;
+    _onChange(value) {
+        this.value = value;
+        this.dispatchEvent(new CustomEvent("change", { detail: { value }, bubbles: true, composed: true }));
+    }
+    render() {
+        return html `
+      <div class="options">
+        ${repeat(this.options, (opt) => opt.value, (opt) => html `
+            <label class="pill">
+              <input
+                type="radio"
+                name=${this.#name}
+                ?checked=${this.value === opt.value}
+                @change=${() => this._onChange(opt.value)}
+              />
+              <span>${opt.label}</span>
+            </label>
+          `)}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ attribute: false })
+], RadioPills.prototype, "options", void 0);
+__decorate([
+    property()
+], RadioPills.prototype, "value", void 0);
+RadioPills = __decorate([
+    customElement("radio-pills")
+], RadioPills);
+export { RadioPills };
+//# sourceMappingURL=radio-pills.js.map

package/dist/radio-pills.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-pills.js","sourceRoot":"","sources":["../src/radio-pills.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAOrC,IAAI,aAAa,GAAG,CAAC,CAAC;AAEtB;;;;;;;;;GASG;AAEI,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QAsCL,wCAAwC;QACR,YAAO,GAAsB,EAAE,CAAC;QAChE,gCAAgC;QACpB,UAAK,GAAG,EAAE,CAAC;QAEd,UAAK,GAAG,eAAe,EAAE,aAAa,EAAE,CAAC;IA4BpD,CAAC;aAtEiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgCF;KACF,AAnCqB,CAmCpB;IAOO,KAAK,CAAoC;IAE1C,SAAS,CAAC,KAAa;QAC7B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IACtG,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;;UAEL,MAAM,CACN,IAAI,CAAC,OAAO,EACZ,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,KAAK,EAClB,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAA;;;;uBAIA,IAAI,CAAC,KAAK;2BACN,IAAI,CAAC,KAAK,KAAK,GAAG,CAAC,KAAK;0BACzB,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC;;sBAEnC,GAAG,CAAC,KAAK;;WAEpB,CACF;;KAEJ,CAAC;IACJ,CAAC;CACF,CAAA;AAhCiC;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;2CAAiC;AAEpD;IAAX,QAAQ,EAAE;yCAAY;AAzCZ,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAuEtB","sourcesContent":["import { LitElement, css, html } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { repeat } from \"lit/directives/repeat.js\";\nimport { tokens } from \"./tokens.js\";\n\nexport interface RadioPillOption {\n  value: string;\n  label: string;\n}\n\nlet instanceCount = 0;\n\n/**\n * Single-select group of compact pill-shaped options — for many short,\n * same-shaped choices (a basemap style, a unit toggle). For a handful of\n * choices where a description matters, use `radio-cards` instead. Wraps\n * native radio inputs for keyboard/a11y and fires `change` rather than\n * relying on form submission.\n *\n * @element radio-pills\n * @fires change - A pill was selected; detail: { value }.\n */\n@customElement(\"radio-pills\")\nexport class RadioPills extends LitElement {\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: block;\n      }\n      .options {\n        display: flex;\n        flex-wrap: wrap;\n        gap: 0.4rem;\n      }\n      .pill {\n        display: flex;\n        align-items: center;\n        gap: 0.3rem;\n        padding: 0.3rem 0.6rem;\n        border: 1px solid var(--ui-border, #e2e8f0);\n        border-radius: 999px;\n        cursor: pointer;\n        font-family: var(--ui-font, ui-sans-serif, system-ui, sans-serif);\n        font-size: var(--ui-font-size-sm, 0.75rem);\n        color: var(--ui-text, #0f172a);\n      }\n      .pill:has(input:checked) {\n        border-color: var(--ui-primary, #4f46e5);\n        background: var(--ui-surface-muted, #f8fafc);\n      }\n      .pill input {\n        width: 0.85rem;\n        height: 0.85rem;\n        accent-color: var(--ui-primary, #4f46e5);\n        cursor: pointer;\n        margin: 0;\n      }\n    `,\n  ];\n\n  /** Options to render, one pill each. */\n  @property({ attribute: false }) options: RadioPillOption[] = [];\n  /** Currently selected value. */\n  @property() value = \"\";\n\n  readonly #name = `radio-pills-${++instanceCount}`;\n\n  private _onChange(value: string) {\n    this.value = value;\n    this.dispatchEvent(new CustomEvent(\"change\", { detail: { value }, bubbles: true, composed: true }));\n  }\n\n  override render() {\n    return html`\n      <div class=\"options\">\n        ${repeat(\n          this.options,\n          (opt) => opt.value,\n          (opt) => html`\n            <label class=\"pill\">\n              <input\n                type=\"radio\"\n                name=${this.#name}\n                ?checked=${this.value === opt.value}\n                @change=${() => this._onChange(opt.value)}\n              />\n              <span>${opt.label}</span>\n            </label>\n          `,\n        )}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"radio-pills\": RadioPills;\n  }\n}\n"]}

package/dist/ui-button.d.ts

@@ -0,0 +1,34 @@
+import { LitElement } from "lit";
+export type ButtonVariant = "primary" | "secondary" | "danger";
+/**
+ * Button (or link styled as one) with an optional leading icon, in three
+ * visual weights. Set `href` to render an `<a>` instead of a `<button>` —
+ * same styling either way — for cross-page navigation that should look like
+ * an action button; a disabled/busy link stays a real `<a>` with
+ * `aria-disabled` + `pointer-events: none` rather than losing its href.
+ * Put the icon in the `icon` slot and the label in the default slot.
+ *
+ * @element ui-button
+ * @slot icon - Optional leading icon (e.g. an inline SVG).
+ * @slot - Button label.
+ */
+export declare class UiButton extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /** Visual weight. */
+    variant: ButtonVariant;
+    /** Renders an `<a href="...">` instead of a `<button>` when set. */
+    href: string | null;
+    /** Native button `type`. Ignored when `href` is set. */
+    type: "button" | "submit" | "reset";
+    /** Disables the control and dims it. */
+    disabled: boolean;
+    /** Shows a spinner in place of the icon slot and disables the control. */
+    busy: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ui-button": UiButton;
+    }
+}
+//# sourceMappingURL=ui-button.d.ts.map

package/dist/ui-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-button.d.ts","sourceRoot":"","sources":["../src/ui-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAK5C,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,CAAC;AAE/D;;;;;;;;;;;GAWG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,4BA6DpB;IAEF,qBAAqB;IACT,OAAO,EAAE,aAAa,CAAa;IAC/C,oEAAoE;IACxD,IAAI,EAAE,MAAM,GAAG,IAAI,CAAQ;IACvC,wDAAwD;IAC5C,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAY;IAC3D,wCAAwC;IACX,QAAQ,UAAS;IAC9C,0EAA0E;IAC7C,IAAI,UAAS;IAEjC,MAAM,yCAmBd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/ui-button.js

@@ -0,0 +1,139 @@
+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, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { iconArrowPath } from "./icons.js";
+import { tokens } from "./tokens.js";
+/**
+ * Button (or link styled as one) with an optional leading icon, in three
+ * visual weights. Set `href` to render an `<a>` instead of a `<button>` —
+ * same styling either way — for cross-page navigation that should look like
+ * an action button; a disabled/busy link stays a real `<a>` with
+ * `aria-disabled` + `pointer-events: none` rather than losing its href.
+ * Put the icon in the `icon` slot and the label in the default slot.
+ *
+ * @element ui-button
+ * @slot icon - Optional leading icon (e.g. an inline SVG).
+ * @slot - Button label.
+ */
+let UiButton = class UiButton extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Visual weight. */
+        this.variant = "primary";
+        /** Renders an `<a href="...">` instead of a `<button>` when set. */
+        this.href = null;
+        /** Native button `type`. Ignored when `href` is set. */
+        this.type = "button";
+        /** Disables the control and dims it. */
+        this.disabled = false;
+        /** Shows a spinner in place of the icon slot and disables the control. */
+        this.busy = false;
+    }
+    static { this.styles = [
+        tokens,
+        css `
+      :host {
+        display: inline-flex;
+      }
+      .btn {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.35rem;
+        border-radius: var(--ui-radius-sm, 0.25rem);
+        padding: 0.5rem 0.9rem;
+        font-size: var(--ui-font-size-sm, 0.75rem);
+        font-weight: 500;
+        font-family: var(--ui-font, ui-sans-serif, system-ui, sans-serif);
+        cursor: pointer;
+        border: 1px solid transparent;
+        text-decoration: none;
+        box-sizing: border-box;
+      }
+      .btn.primary {
+        background: var(--ui-primary, #4f46e5);
+        color: #fff;
+      }
+      .btn.primary:hover:not(:disabled) {
+        background: var(--ui-primary-hover, #4338ca);
+      }
+      .btn.secondary {
+        background: none;
+        border-color: var(--ui-border, #e2e8f0);
+        color: var(--ui-text, #0f172a);
+      }
+      .btn.secondary:hover:not(:disabled) {
+        border-color: var(--ui-text-muted, #64748b);
+      }
+      .btn.danger {
+        background: var(--ui-danger, #dc2626);
+        color: #fff;
+      }
+      .btn.danger:hover:not(:disabled) {
+        background: var(--ui-danger-hover, #b91c1c);
+      }
+      .btn:disabled,
+      .btn[aria-disabled="true"] {
+        opacity: 0.6;
+        cursor: default;
+        pointer-events: none;
+      }
+      .spin {
+        display: inline-flex;
+        animation: spin 0.8s linear infinite;
+      }
+      .spin[hidden] {
+        display: none;
+      }
+      @keyframes spin {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+    `,
+    ]; }
+    render() {
+        const classes = `btn ${this.variant}`;
+        const isDisabled = this.disabled || this.busy;
+        if (this.href) {
+            return html `
+        <a class=${classes} href=${this.href} aria-disabled=${isDisabled ? "true" : "false"}>
+          <span class="spin" ?hidden=${!this.busy}>${iconArrowPath(14)}</span>
+          <slot name="icon" ?hidden=${this.busy}></slot>
+          <slot></slot>
+        </a>
+      `;
+        }
+        return html `
+      <button class=${classes} type=${this.type} ?disabled=${isDisabled}>
+        <span class="spin" ?hidden=${!this.busy}>${iconArrowPath(14)}</span>
+        <slot name="icon" ?hidden=${this.busy}></slot>
+        <slot></slot>
+      </button>
+    `;
+    }
+};
+__decorate([
+    property()
+], UiButton.prototype, "variant", void 0);
+__decorate([
+    property()
+], UiButton.prototype, "href", void 0);
+__decorate([
+    property()
+], UiButton.prototype, "type", void 0);
+__decorate([
+    property({ type: Boolean })
+], UiButton.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], UiButton.prototype, "busy", void 0);
+UiButton = __decorate([
+    customElement("ui-button")
+], UiButton);
+export { UiButton };
+//# sourceMappingURL=ui-button.js.map

package/dist/ui-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-button.js","sourceRoot":"","sources":["../src/ui-button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAIrC;;;;;;;;;;;GAWG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QAgEL,qBAAqB;QACT,YAAO,GAAkB,SAAS,CAAC;QAC/C,oEAAoE;QACxD,SAAI,GAAkB,IAAI,CAAC;QACvC,wDAAwD;QAC5C,SAAI,GAAkC,QAAQ,CAAC;QAC3D,wCAAwC;QACX,aAAQ,GAAG,KAAK,CAAC;QAC9C,0EAA0E;QAC7C,SAAI,GAAG,KAAK,CAAC;IAsB5C,CAAC;aA9FiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0DF;KACF,AA7DqB,CA6DpB;IAaO,MAAM;QACb,MAAM,OAAO,GAAG,OAAO,IAAI,CAAC,OAAO,EAAE,CAAC;QACtC,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,CAAC;QAC9C,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,OAAO,IAAI,CAAA;mBACE,OAAO,SAAS,IAAI,CAAC,IAAI,kBAAkB,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;uCACpD,CAAC,IAAI,CAAC,IAAI,IAAI,aAAa,CAAC,EAAE,CAAC;sCAChC,IAAI,CAAC,IAAI;;;OAGxC,CAAC;QACJ,CAAC;QACD,OAAO,IAAI,CAAA;sBACO,OAAO,SAAS,IAAI,CAAC,IAAI,cAAc,UAAU;qCAClC,CAAC,IAAI,CAAC,IAAI,IAAI,aAAa,CAAC,EAAE,CAAC;oCAChC,IAAI,CAAC,IAAI;;;KAGxC,CAAC;IACJ,CAAC;CACF,CAAA;AA9Ba;IAAX,QAAQ,EAAE;yCAAoC;AAEnC;IAAX,QAAQ,EAAE;sCAA4B;AAE3B;IAAX,QAAQ,EAAE;sCAAgD;AAE9B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAAkB;AAEjB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;sCAAc;AAzE/B,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CA+FpB","sourcesContent":["import { LitElement, css, html } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { iconArrowPath } from \"./icons.js\";\nimport { tokens } from \"./tokens.js\";\n\nexport type ButtonVariant = \"primary\" | \"secondary\" | \"danger\";\n\n/**\n * Button (or link styled as one) with an optional leading icon, in three\n * visual weights. Set `href` to render an `<a>` instead of a `<button>` —\n * same styling either way — for cross-page navigation that should look like\n * an action button; a disabled/busy link stays a real `<a>` with\n * `aria-disabled` + `pointer-events: none` rather than losing its href.\n * Put the icon in the `icon` slot and the label in the default slot.\n *\n * @element ui-button\n * @slot icon - Optional leading icon (e.g. an inline SVG).\n * @slot - Button label.\n */\n@customElement(\"ui-button\")\nexport class UiButton extends LitElement {\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: inline-flex;\n      }\n      .btn {\n        display: inline-flex;\n        align-items: center;\n        gap: 0.35rem;\n        border-radius: var(--ui-radius-sm, 0.25rem);\n        padding: 0.5rem 0.9rem;\n        font-size: var(--ui-font-size-sm, 0.75rem);\n        font-weight: 500;\n        font-family: var(--ui-font, ui-sans-serif, system-ui, sans-serif);\n        cursor: pointer;\n        border: 1px solid transparent;\n        text-decoration: none;\n        box-sizing: border-box;\n      }\n      .btn.primary {\n        background: var(--ui-primary, #4f46e5);\n        color: #fff;\n      }\n      .btn.primary:hover:not(:disabled) {\n        background: var(--ui-primary-hover, #4338ca);\n      }\n      .btn.secondary {\n        background: none;\n        border-color: var(--ui-border, #e2e8f0);\n        color: var(--ui-text, #0f172a);\n      }\n      .btn.secondary:hover:not(:disabled) {\n        border-color: var(--ui-text-muted, #64748b);\n      }\n      .btn.danger {\n        background: var(--ui-danger, #dc2626);\n        color: #fff;\n      }\n      .btn.danger:hover:not(:disabled) {\n        background: var(--ui-danger-hover, #b91c1c);\n      }\n      .btn:disabled,\n      .btn[aria-disabled=\"true\"] {\n        opacity: 0.6;\n        cursor: default;\n        pointer-events: none;\n      }\n      .spin {\n        display: inline-flex;\n        animation: spin 0.8s linear infinite;\n      }\n      .spin[hidden] {\n        display: none;\n      }\n      @keyframes spin {\n        to {\n          transform: rotate(360deg);\n        }\n      }\n    `,\n  ];\n\n  /** Visual weight. */\n  @property() variant: ButtonVariant = \"primary\";\n  /** Renders an `<a href=\"...\">` instead of a `<button>` when set. */\n  @property() href: string | null = null;\n  /** Native button `type`. Ignored when `href` is set. */\n  @property() type: \"button\" | \"submit\" | \"reset\" = \"button\";\n  /** Disables the control and dims it. */\n  @property({ type: Boolean }) disabled = false;\n  /** Shows a spinner in place of the icon slot and disables the control. */\n  @property({ type: Boolean }) busy = false;\n\n  override render() {\n    const classes = `btn ${this.variant}`;\n    const isDisabled = this.disabled || this.busy;\n    if (this.href) {\n      return html`\n        <a class=${classes} href=${this.href} aria-disabled=${isDisabled ? \"true\" : \"false\"}>\n          <span class=\"spin\" ?hidden=${!this.busy}>${iconArrowPath(14)}</span>\n          <slot name=\"icon\" ?hidden=${this.busy}></slot>\n          <slot></slot>\n        </a>\n      `;\n    }\n    return html`\n      <button class=${classes} type=${this.type} ?disabled=${isDisabled}>\n        <span class=\"spin\" ?hidden=${!this.busy}>${iconArrowPath(14)}</span>\n        <slot name=\"icon\" ?hidden=${this.busy}></slot>\n        <slot></slot>\n      </button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ui-button\": UiButton;\n  }\n}\n"]}

package/dist/user-avatar.d.ts

@@ -0,0 +1,28 @@
+import { LitElement } from "lit";
+/**
+ * Circular avatar. Shows `src` when it loads successfully; falls back to the
+ * first letter of `name` (uppercased) if `src` is unset or fails to load
+ * (e.g. an expired OAuth profile-photo URL); falls back further to a generic
+ * person icon if `name` is also unset. A broken image never leaves a blank
+ * circle.
+ *
+ * @element user-avatar
+ */
+export declare class UserAvatar extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /** Image URL to show. Falls back to initials/icon if unset or it fails to load. */
+    src: string | null;
+    /** Source string for the fallback initial (e.g. a display name or email) — first character, uppercased. */
+    name: string | null;
+    /** Diameter in CSS pixels. */
+    size: number;
+    private _imgError;
+    protected willUpdate(changed: Map<string, unknown>): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "user-avatar": UserAvatar;
+    }
+}
+//# sourceMappingURL=user-avatar.d.ts.map

package/dist/user-avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"user-avatar.d.ts","sourceRoot":"","sources":["../src/user-avatar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAK5C;;;;;;;;GAQG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,4BAyBpB;IAEF,mFAAmF;IACvE,GAAG,EAAE,MAAM,GAAG,IAAI,CAAQ;IACtC,2GAA2G;IAC/F,IAAI,EAAE,MAAM,GAAG,IAAI,CAAQ;IACvC,8BAA8B;IACF,IAAI,SAAM;IAE7B,OAAO,CAAC,SAAS,CAAS;IAEnC,UAAmB,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,QAE1D;IAEQ,MAAM,yCAgBd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/dist/user-avatar.js

@@ -0,0 +1,95 @@
+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, css, html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { iconUserCircle } from "./icons.js";
+import { tokens } from "./tokens.js";
+/**
+ * Circular avatar. Shows `src` when it loads successfully; falls back to the
+ * first letter of `name` (uppercased) if `src` is unset or fails to load
+ * (e.g. an expired OAuth profile-photo URL); falls back further to a generic
+ * person icon if `name` is also unset. A broken image never leaves a blank
+ * circle.
+ *
+ * @element user-avatar
+ */
+let UserAvatar = class UserAvatar extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Image URL to show. Falls back to initials/icon if unset or it fails to load. */
+        this.src = null;
+        /** Source string for the fallback initial (e.g. a display name or email) — first character, uppercased. */
+        this.name = null;
+        /** Diameter in CSS pixels. */
+        this.size = 32;
+        this._imgError = false;
+    }
+    static { this.styles = [
+        tokens,
+        css `
+      :host {
+        display: inline-flex;
+      }
+      .avatar {
+        border-radius: 50%;
+        background: var(--ui-primary, #4f46e5);
+        color: #fff;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-family: var(--ui-font, ui-sans-serif, system-ui, sans-serif);
+        font-weight: 600;
+        overflow: hidden;
+        flex: 0 0 auto;
+      }
+      img {
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        object-fit: cover;
+      }
+    `,
+    ]; }
+    willUpdate(changed) {
+        if (changed.has("src"))
+            this._imgError = false;
+    }
+    render() {
+        const dim = `${this.size}px`;
+        const showImage = !!this.src && !this._imgError;
+        const initial = this.name?.trim()[0]?.toUpperCase();
+        return html `
+      <span class="avatar" style="width:${dim};height:${dim};font-size:${this.size * 0.42}px">
+        ${showImage
+            ? html `<img
+              src=${this.src}
+              alt=""
+              referrerpolicy="no-referrer"
+              @error=${() => (this._imgError = true)}
+            />`
+            : initial || iconUserCircle(Math.round(this.size * 0.65))}
+      </span>
+    `;
+    }
+};
+__decorate([
+    property()
+], UserAvatar.prototype, "src", void 0);
+__decorate([
+    property()
+], UserAvatar.prototype, "name", void 0);
+__decorate([
+    property({ type: Number })
+], UserAvatar.prototype, "size", void 0);
+__decorate([
+    state()
+], UserAvatar.prototype, "_imgError", void 0);
+UserAvatar = __decorate([
+    customElement("user-avatar")
+], UserAvatar);
+export { UserAvatar };
+//# sourceMappingURL=user-avatar.js.map

package/dist/user-avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"user-avatar.js","sourceRoot":"","sources":["../src/user-avatar.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC;;;;;;;;GAQG;AAEI,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QA4BL,mFAAmF;QACvE,QAAG,GAAkB,IAAI,CAAC;QACtC,2GAA2G;QAC/F,SAAI,GAAkB,IAAI,CAAC;QACvC,8BAA8B;QACF,SAAI,GAAG,EAAE,CAAC;QAErB,cAAS,GAAG,KAAK,CAAC;IAuBrC,CAAC;aAzDiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;KAsBF;KACF,AAzBqB,CAyBpB;IAWiB,UAAU,CAAC,OAA6B;QACzD,IAAI,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC;YAAE,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IACjD,CAAC;IAEQ,MAAM;QACb,MAAM,GAAG,GAAG,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC;QAC7B,MAAM,SAAS,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;QAChD,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE,CAAC;QACpD,OAAO,IAAI,CAAA;0CAC2B,GAAG,WAAW,GAAG,cAAc,IAAI,CAAC,IAAI,GAAG,IAAI;UAC/E,SAAS;YACT,CAAC,CAAC,IAAI,CAAA;oBACI,IAAI,CAAC,GAAI;;;uBAGN,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;eACrC;YACL,CAAC,CAAC,OAAO,IAAI,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC;;KAE9D,CAAC;IACJ,CAAC;CACF,CAAA;AA7Ba;IAAX,QAAQ,EAAE;uCAA2B;AAE1B;IAAX,QAAQ,EAAE;wCAA4B;AAEX;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAW;AAErB;IAAhB,KAAK,EAAE;6CAA2B;AAnCxB,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CA0DtB","sourcesContent":["import { LitElement, css, html } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { iconUserCircle } from \"./icons.js\";\nimport { tokens } from \"./tokens.js\";\n\n/**\n * Circular avatar. Shows `src` when it loads successfully; falls back to the\n * first letter of `name` (uppercased) if `src` is unset or fails to load\n * (e.g. an expired OAuth profile-photo URL); falls back further to a generic\n * person icon if `name` is also unset. A broken image never leaves a blank\n * circle.\n *\n * @element user-avatar\n */\n@customElement(\"user-avatar\")\nexport class UserAvatar extends LitElement {\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: inline-flex;\n      }\n      .avatar {\n        border-radius: 50%;\n        background: var(--ui-primary, #4f46e5);\n        color: #fff;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-family: var(--ui-font, ui-sans-serif, system-ui, sans-serif);\n        font-weight: 600;\n        overflow: hidden;\n        flex: 0 0 auto;\n      }\n      img {\n        width: 100%;\n        height: 100%;\n        border-radius: 50%;\n        object-fit: cover;\n      }\n    `,\n  ];\n\n  /** Image URL to show. Falls back to initials/icon if unset or it fails to load. */\n  @property() src: string | null = null;\n  /** Source string for the fallback initial (e.g. a display name or email) — first character, uppercased. */\n  @property() name: string | null = null;\n  /** Diameter in CSS pixels. */\n  @property({ type: Number }) size = 32;\n\n  @state() private _imgError = false;\n\n  protected override willUpdate(changed: Map<string, unknown>) {\n    if (changed.has(\"src\")) this._imgError = false;\n  }\n\n  override render() {\n    const dim = `${this.size}px`;\n    const showImage = !!this.src && !this._imgError;\n    const initial = this.name?.trim()[0]?.toUpperCase();\n    return html`\n      <span class=\"avatar\" style=\"width:${dim};height:${dim};font-size:${this.size * 0.42}px\">\n        ${showImage\n          ? html`<img\n              src=${this.src!}\n              alt=\"\"\n              referrerpolicy=\"no-referrer\"\n              @error=${() => (this._imgError = true)}\n            />`\n          : initial || iconUserCircle(Math.round(this.size * 0.65))}\n      </span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"user-avatar\": UserAvatar;\n  }\n}\n"]}

package/docs/radio-cards.md

@@ -0,0 +1,58 @@
+# `<radio-cards>`
+
+Single-select group of full-width cards, each with a label and optional
+description — for a handful of meaningfully different choices where the
+description matters. For many short, same-shaped options (a color swatch,
+a basemap style), use `radio-pills` instead. Wraps native radio inputs for
+keyboard/a11y and fires `change` rather than relying on form submission.
+
+## Install
+
+```js
+import "@f-ewald/components/radio-cards.js";
+```
+
+## Usage
+
+```html
+<radio-cards></radio-cards>
+<script type="module">
+  const el = document.querySelector("radio-cards");
+  el.options = [
+    { value: "simple", label: "Simple", description: "Quick-ranking view" },
+    { value: "detailed", label: "Detailed", description: "Every section and layer" },
+  ];
+  el.value = "simple";
+  el.addEventListener("change", (e) => console.log(e.detail.value));
+</script>
+```
+
+## Attributes / properties
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `options` | _(JS property only)_ | `RadioCardOption[]` | `[]` | Options to render, one card each. |
+| `value` | `value` | `string` | `""` | Currently selected value. |
+
+## Events
+
+| Event | Description |
+| --- | --- |
+| `change` | A card was selected; detail: { value }. |
+
+## Slots
+
+_None._
+
+## CSS custom properties
+
+| Custom property |
+| --- |
+| `--ui-border` |
+| `--ui-font` |
+| `--ui-font-size-sm` |
+| `--ui-primary` |
+| `--ui-radius-sm` |
+| `--ui-surface-muted` |
+| `--ui-text` |
+| `--ui-text-muted` |