@f-ewald/components 1.0.0 → 1.0.2

package/dist/ui-button.js

@@ -52,12 +52,21 @@ let UiButton = class UiButton extends LitElement {
       .btn {
         display: inline-flex;
         align-items: center;
-        gap: 0.35rem;
+        gap: 0.25rem;
         border-radius: var(--ui-radius-sm, 0.25rem);
-        padding: 0.5rem 0.9rem;
+        padding: 0.5rem 1rem;
         font-size: var(--ui-font-size-sm, 0.75rem);
         font-weight: 500;
-        font-family: var(--ui-font, ui-sans-serif, system-ui, sans-serif);
+        font-family: var(
+          --ui-font,
+          ui-sans-serif,
+          system-ui,
+          sans-serif,
+          "Apple Color Emoji",
+          "Segoe UI Emoji",
+          "Segoe UI Symbol",
+          "Noto Color Emoji"
+        );
         cursor: pointer;
         border: 1px solid transparent;
         text-decoration: none;
@@ -65,7 +74,7 @@ let UiButton = class UiButton extends LitElement {
       }
       .btn.primary {
         background: var(--ui-primary, #4f46e5);
-        color: #fff;
+        color: var(--ui-on-accent, #ffffff);
       }
       .btn.primary:hover:not(:disabled) {
         background: var(--ui-primary-hover, #4338ca);
@@ -80,7 +89,7 @@ let UiButton = class UiButton extends LitElement {
       }
       .btn.danger {
         background: var(--ui-danger, #dc2626);
-        color: #fff;
+        color: var(--ui-on-accent, #ffffff);
       }
       .btn.danger:hover:not(:disabled) {
         background: var(--ui-danger-hover, #b91c1c);
@@ -91,6 +100,10 @@ let UiButton = class UiButton extends LitElement {
         cursor: default;
         pointer-events: none;
       }
+      .btn:focus-visible {
+        outline: none;
+        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));
+      }
       .spin {
         display: inline-flex;
         animation: spin 0.8s linear infinite;
@@ -103,6 +116,24 @@ let UiButton = class UiButton extends LitElement {
           transform: rotate(360deg);
         }
       }
+      @media (prefers-reduced-motion: reduce) {
+        .spin {
+          animation: none;
+        }
+      }
+      @media (forced-colors: active) {
+        .btn:focus-visible {
+          outline: 2px solid CanvasText;
+          outline-offset: 2px;
+          box-shadow: none;
+        }
+        .btn:disabled,
+        .btn[aria-disabled="true"] {
+          color: GrayText;
+          border-color: GrayText;
+          opacity: 1;
+        }
+      }
     `,
     ]; }
     /** Drives submit/reset on the ancestor form via ElementInternals, since a shadow-DOM button can't do it natively. */
@@ -112,21 +143,39 @@ let UiButton = class UiButton extends LitElement {
         else if (this.type === "reset")
             this.#internals.form?.reset();
     }
+    /** Suppresses navigation while a link-styled button is disabled or busy. */
+    _onLinkClick(e) {
+        if (!this.disabled && !this.busy)
+            return;
+        e.preventDefault();
+    }
     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>
+        <a
+          class=${classes}
+          href=${this.href}
+          aria-disabled=${isDisabled ? "true" : "false"}
+          aria-busy=${this.busy ? "true" : "false"}
+          @click=${this._onLinkClick}
+        >
+          <span class="spin" aria-hidden="true" ?hidden=${!this.busy}>${iconArrowPath(14)}</span>
           <slot name="icon" ?hidden=${this.busy}></slot>
           <slot></slot>
         </a>
       `;
         }
         return html `
-      <button class=${classes} type="button" ?disabled=${isDisabled} @click=${this._onClick}>
-        <span class="spin" ?hidden=${!this.busy}>${iconArrowPath(14)}</span>
+      <button
+        class=${classes}
+        type="button"
+        ?disabled=${isDisabled}
+        aria-busy=${this.busy ? "true" : "false"}
+        @click=${this._onClick}
+      >
+        <span class="spin" aria-hidden="true" ?hidden=${!this.busy}>${iconArrowPath(14)}</span>
         <slot name="icon" ?hidden=${this.busy}></slot>
         <slot></slot>
       </button>

package/dist/ui-button.js.map

@@ -1 +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;;;;;;;;;;;;;;;;;GAiBG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QAGL,eAAU,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QAgEpC,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;IA4B5C,CAAC;aAvGQ,mBAAc,GAAG,IAAI,AAAP,CAAQ;IAE7B,UAAU,CAA0B;aACpB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0DF;KACF,AA7DqB,CA6DpB;IAaF,qHAAqH;IAC7G,QAAQ;QACd,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ;YAAE,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,aAAa,EAAE,CAAC;aAC7D,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO;YAAE,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC;IAChE,CAAC;IAEQ,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,4BAA4B,UAAU,WAAW,IAAI,CAAC,QAAQ;qCACtD,CAAC,IAAI,CAAC,IAAI,IAAI,aAAa,CAAC,EAAE,CAAC;oCAChC,IAAI,CAAC,IAAI;;;KAGxC,CAAC;IACJ,CAAC;CACF,CAAA;AApCa;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;AA5E/B,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAwGpB","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 * Form-associated (`type=\"submit\"`/`\"reset\"`): the actual `<button>` lives in\n * this element's shadow root, which native HTML form association does not\n * cross into from an ancestor light-DOM `<form>`. `type=\"submit\"`/`\"reset\"`\n * is instead wired through `ElementInternals.form` — the same mechanism\n * `address-autocomplete` uses to associate with an ancestor form.\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 formAssociated = true;\n\n  #internals = this.attachInternals();\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  /** Drives submit/reset on the ancestor form via ElementInternals, since a shadow-DOM button can't do it natively. */\n  private _onClick() {\n    if (this.type === \"submit\") this.#internals.form?.requestSubmit();\n    else if (this.type === \"reset\") this.#internals.form?.reset();\n  }\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=\"button\" ?disabled=${isDisabled} @click=${this._onClick}>\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"]}
+{"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;;;;;;;;;;;;;;;;;GAiBG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QAGL,eAAU,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QA+FpC,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;IA8C5C,CAAC;aAxJQ,mBAAc,GAAG,IAAI,AAAP,CAAQ;IAE7B,UAAU,CAA0B;aACpB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyFF;KACF,AA5FqB,CA4FpB;IAaF,qHAAqH;IAC7G,QAAQ;QACd,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ;YAAE,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,aAAa,EAAE,CAAC;aAC7D,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO;YAAE,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC;IAChE,CAAC;IAED,4EAA4E;IACpE,YAAY,CAAC,CAAa;QAChC,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,OAAO;QACzC,CAAC,CAAC,cAAc,EAAE,CAAC;IACrB,CAAC;IAEQ,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;;kBAEC,OAAO;iBACR,IAAI,CAAC,IAAI;0BACA,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;sBACjC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;mBAC/B,IAAI,CAAC,YAAY;;0DAEsB,CAAC,IAAI,CAAC,IAAI,IAAI,aAAa,CAAC,EAAE,CAAC;sCACnD,IAAI,CAAC,IAAI;;;OAGxC,CAAC;QACJ,CAAC;QACD,OAAO,IAAI,CAAA;;gBAEC,OAAO;;oBAEH,UAAU;oBACV,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;iBAC/B,IAAI,CAAC,QAAQ;;wDAE0B,CAAC,IAAI,CAAC,IAAI,IAAI,aAAa,CAAC,EAAE,CAAC;oCACnD,IAAI,CAAC,IAAI;;;KAGxC,CAAC;IACJ,CAAC;CACF,CAAA;AAtDa;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;AA3G/B,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAyJpB","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 * Form-associated (`type=\"submit\"`/`\"reset\"`): the actual `<button>` lives in\n * this element's shadow root, which native HTML form association does not\n * cross into from an ancestor light-DOM `<form>`. `type=\"submit\"`/`\"reset\"`\n * is instead wired through `ElementInternals.form` — the same mechanism\n * `address-autocomplete` uses to associate with an ancestor form.\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 formAssociated = true;\n\n  #internals = this.attachInternals();\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.25rem;\n        border-radius: var(--ui-radius-sm, 0.25rem);\n        padding: 0.5rem 1rem;\n        font-size: var(--ui-font-size-sm, 0.75rem);\n        font-weight: 500;\n        font-family: var(\n          --ui-font,\n          ui-sans-serif,\n          system-ui,\n          sans-serif,\n          \"Apple Color Emoji\",\n          \"Segoe UI Emoji\",\n          \"Segoe UI Symbol\",\n          \"Noto Color Emoji\"\n        );\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: var(--ui-on-accent, #ffffff);\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: var(--ui-on-accent, #ffffff);\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      .btn:focus-visible {\n        outline: none;\n        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));\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      @media (prefers-reduced-motion: reduce) {\n        .spin {\n          animation: none;\n        }\n      }\n      @media (forced-colors: active) {\n        .btn:focus-visible {\n          outline: 2px solid CanvasText;\n          outline-offset: 2px;\n          box-shadow: none;\n        }\n        .btn:disabled,\n        .btn[aria-disabled=\"true\"] {\n          color: GrayText;\n          border-color: GrayText;\n          opacity: 1;\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  /** Drives submit/reset on the ancestor form via ElementInternals, since a shadow-DOM button can't do it natively. */\n  private _onClick() {\n    if (this.type === \"submit\") this.#internals.form?.requestSubmit();\n    else if (this.type === \"reset\") this.#internals.form?.reset();\n  }\n\n  /** Suppresses navigation while a link-styled button is disabled or busy. */\n  private _onLinkClick(e: MouseEvent) {\n    if (!this.disabled && !this.busy) return;\n    e.preventDefault();\n  }\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\n          class=${classes}\n          href=${this.href}\n          aria-disabled=${isDisabled ? \"true\" : \"false\"}\n          aria-busy=${this.busy ? \"true\" : \"false\"}\n          @click=${this._onLinkClick}\n        >\n          <span class=\"spin\" aria-hidden=\"true\" ?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\n        class=${classes}\n        type=\"button\"\n        ?disabled=${isDisabled}\n        aria-busy=${this.busy ? \"true\" : \"false\"}\n        @click=${this._onClick}\n      >\n        <span class=\"spin\" aria-hidden=\"true\" ?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.map

@@ -1 +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,qFAAqF;IACzE,IAAI,EAAE,MAAM,GAAG,MAAM,CAAM;IAE9B,OAAO,CAAC,SAAS,CAAS;IAEnC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,YAAY,CAKlC;IAEF,gFAAgF;IAChF,OAAO,CAAC,WAAW;IAMnB,UAAmB,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,QAE1D;IAEQ,MAAM,yCAiBd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
+{"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,4BAwCpB;IAEF,mFAAmF;IACvE,GAAG,EAAE,MAAM,GAAG,IAAI,CAAQ;IACtC,2GAA2G;IAC/F,IAAI,EAAE,MAAM,GAAG,IAAI,CAAQ;IACvC,qFAAqF;IACzE,IAAI,EAAE,MAAM,GAAG,MAAM,CAAM;IAE9B,OAAO,CAAC,SAAS,CAAS;IAEnC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,YAAY,CAKlC;IAEF,gFAAgF;IAChF,OAAO,CAAC,WAAW;IAMnB,UAAmB,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,QAE1D;IAEQ,MAAM,yCAiBd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/dist/user-avatar.js

@@ -38,12 +38,27 @@ let UserAvatar = class UserAvatar extends LitElement {
       }
       .avatar {
         border-radius: 50%;
-        background: var(--ui-primary, #4f46e5);
-        color: #fff;
+        /* Match map-circle's 30% white/black vertical depth without tinting images. */
+        background: linear-gradient(
+          to bottom,
+          color-mix(in srgb, var(--ui-primary, #4f46e5) 70%, #ffffff) 0%,
+          color-mix(in srgb, var(--ui-primary, #4f46e5) 70%, #000000) 100%
+        );
+        color: var(--ui-on-accent, #ffffff);
+        text-shadow: 0 1px 2px rgb(0 0 0 / 0.35);
         display: flex;
         align-items: center;
         justify-content: center;
-        font-family: var(--ui-font, ui-sans-serif, system-ui, sans-serif);
+        font-family: var(
+          --ui-font,
+          ui-sans-serif,
+          system-ui,
+          sans-serif,
+          "Apple Color Emoji",
+          "Segoe UI Emoji",
+          "Segoe UI Symbol",
+          "Noto Color Emoji"
+        );
         font-weight: 600;
         overflow: hidden;
         flex: 0 0 auto;

package/dist/user-avatar.js.map

@@ -1 +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,qFAAqF;QACzE,SAAI,GAAoB,EAAE,CAAC;QAEtB,cAAS,GAAG,KAAK,CAAC;IAsCrC,CAAC;;aAxEiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;KAsBF;KACF,AAzBqB,CAyBpB;aAWsB,iBAAY,GAA2B;QAC7D,EAAE,EAAE,EAAE;QACN,EAAE,EAAE,EAAE;QACN,EAAE,EAAE,EAAE;QACN,EAAE,EAAE,EAAE;KACP,AALmC,CAKlC;IAEF,gFAAgF;IACxE,WAAW;QACjB,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAClC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC;YAAE,OAAO,OAAO,CAAC;QAC3C,OAAO,aAAW,YAAY,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,CAAC;IAC1D,CAAC;IAEkB,UAAU,CAAC,OAA6B;QACzD,IAAI,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC;YAAE,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IACjD,CAAC;IAEQ,MAAM;QACb,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QAChC,MAAM,GAAG,GAAG,GAAG,IAAI,IAAI,CAAC;QACxB,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,GAAG,IAAI;UAC1E,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,GAAG,IAAI,CAAC,CAAC;;KAEzD,CAAC;IACJ,CAAC;CACF,CAAA;AA5Ca;IAAX,QAAQ,EAAE;uCAA2B;AAE1B;IAAX,QAAQ,EAAE;wCAA4B;AAE3B;IAAX,QAAQ,EAAE;wCAA4B;AAEtB;IAAhB,KAAK,EAAE;6CAA2B;AAnCxB,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAyEtB","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, or a preset name (`xs`=18, `sm`=24, `md`=32, `lg`=48). */\n  @property() size: string | number = 32;\n\n  @state() private _imgError = false;\n\n  private static readonly SIZE_PRESETS: Record<string, number> = {\n    xs: 18,\n    sm: 24,\n    md: 32,\n    lg: 48,\n  };\n\n  /** Resolves the `size` property (number or preset name) to a pixel diameter. */\n  private resolveSize(): number {\n    const numeric = Number(this.size);\n    if (!Number.isNaN(numeric)) return numeric;\n    return UserAvatar.SIZE_PRESETS[String(this.size)] ?? 32;\n  }\n\n  protected override willUpdate(changed: Map<string, unknown>) {\n    if (changed.has(\"src\")) this._imgError = false;\n  }\n\n  override render() {\n    const size = this.resolveSize();\n    const dim = `${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:${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(size * 0.65))}\n      </span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"user-avatar\": UserAvatar;\n  }\n}\n"]}
+{"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;;QA2CL,mFAAmF;QACvE,QAAG,GAAkB,IAAI,CAAC;QACtC,2GAA2G;QAC/F,SAAI,GAAkB,IAAI,CAAC;QACvC,qFAAqF;QACzE,SAAI,GAAoB,EAAE,CAAC;QAEtB,cAAS,GAAG,KAAK,CAAC;IAsCrC,CAAC;;aAvFiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqCF;KACF,AAxCqB,CAwCpB;aAWsB,iBAAY,GAA2B;QAC7D,EAAE,EAAE,EAAE;QACN,EAAE,EAAE,EAAE;QACN,EAAE,EAAE,EAAE;QACN,EAAE,EAAE,EAAE;KACP,AALmC,CAKlC;IAEF,gFAAgF;IACxE,WAAW;QACjB,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAClC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC;YAAE,OAAO,OAAO,CAAC;QAC3C,OAAO,aAAW,YAAY,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,CAAC;IAC1D,CAAC;IAEkB,UAAU,CAAC,OAA6B;QACzD,IAAI,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC;YAAE,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IACjD,CAAC;IAEQ,MAAM;QACb,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QAChC,MAAM,GAAG,GAAG,GAAG,IAAI,IAAI,CAAC;QACxB,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,GAAG,IAAI;UAC1E,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,GAAG,IAAI,CAAC,CAAC;;KAEzD,CAAC;IACJ,CAAC;CACF,CAAA;AA5Ca;IAAX,QAAQ,EAAE;uCAA2B;AAE1B;IAAX,QAAQ,EAAE;wCAA4B;AAE3B;IAAX,QAAQ,EAAE;wCAA4B;AAEtB;IAAhB,KAAK,EAAE;6CAA2B;AAlDxB,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAwFtB","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        /* Match map-circle's 30% white/black vertical depth without tinting images. */\n        background: linear-gradient(\n          to bottom,\n          color-mix(in srgb, var(--ui-primary, #4f46e5) 70%, #ffffff) 0%,\n          color-mix(in srgb, var(--ui-primary, #4f46e5) 70%, #000000) 100%\n        );\n        color: var(--ui-on-accent, #ffffff);\n        text-shadow: 0 1px 2px rgb(0 0 0 / 0.35);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-family: var(\n          --ui-font,\n          ui-sans-serif,\n          system-ui,\n          sans-serif,\n          \"Apple Color Emoji\",\n          \"Segoe UI Emoji\",\n          \"Segoe UI Symbol\",\n          \"Noto Color Emoji\"\n        );\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, or a preset name (`xs`=18, `sm`=24, `md`=32, `lg`=48). */\n  @property() size: string | number = 32;\n\n  @state() private _imgError = false;\n\n  private static readonly SIZE_PRESETS: Record<string, number> = {\n    xs: 18,\n    sm: 24,\n    md: 32,\n    lg: 48,\n  };\n\n  /** Resolves the `size` property (number or preset name) to a pixel diameter. */\n  private resolveSize(): number {\n    const numeric = Number(this.size);\n    if (!Number.isNaN(numeric)) return numeric;\n    return UserAvatar.SIZE_PRESETS[String(this.size)] ?? 32;\n  }\n\n  protected override willUpdate(changed: Map<string, unknown>) {\n    if (changed.has(\"src\")) this._imgError = false;\n  }\n\n  override render() {\n    const size = this.resolveSize();\n    const dim = `${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:${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(size * 0.65))}\n      </span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"user-avatar\": UserAvatar;\n  }\n}\n"]}

package/dist/utils/form.d.ts

@@ -0,0 +1,3 @@
+/** Submits a form through its default enabled native submit control when present. */
+export declare function submitWithDefaultButton(form: HTMLFormElement): void;
+//# sourceMappingURL=form.d.ts.map

package/dist/utils/form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../src/utils/form.ts"],"names":[],"mappings":"AAAA,qFAAqF;AACrF,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,eAAe,GAAG,IAAI,CAWnE"}

package/dist/utils/form.js

@@ -0,0 +1,14 @@
+/** Submits a form through its default enabled native submit control when present. */
+export function submitWithDefaultButton(form) {
+    const submitter = Array.from(form.elements).find((element) => (element instanceof HTMLButtonElement ||
+        element instanceof HTMLInputElement) &&
+        (element.type === "submit" ||
+            (element instanceof HTMLInputElement && element.type === "image")));
+    if (submitter?.matches(":disabled"))
+        return;
+    if (submitter)
+        submitter.click();
+    else
+        form.requestSubmit();
+}
+//# sourceMappingURL=form.js.map

package/dist/utils/form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.js","sourceRoot":"","sources":["../../src/utils/form.ts"],"names":[],"mappings":"AAAA,qFAAqF;AACrF,MAAM,UAAU,uBAAuB,CAAC,IAAqB;IAC3D,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,IAAI,CAC9C,CAAC,OAAO,EAAmD,EAAE,CAC3D,CAAC,OAAO,YAAY,iBAAiB;QACnC,OAAO,YAAY,gBAAgB,CAAC;QACtC,CAAC,OAAO,CAAC,IAAI,KAAK,QAAQ;YACxB,CAAC,OAAO,YAAY,gBAAgB,IAAI,OAAO,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CACvE,CAAC;IACF,IAAI,SAAS,EAAE,OAAO,CAAC,WAAW,CAAC;QAAE,OAAO;IAC5C,IAAI,SAAS;QAAE,SAAS,CAAC,KAAK,EAAE,CAAC;;QAC5B,IAAI,CAAC,aAAa,EAAE,CAAC;AAC5B,CAAC","sourcesContent":["/** Submits a form through its default enabled native submit control when present. */\nexport function submitWithDefaultButton(form: HTMLFormElement): void {\n  const submitter = Array.from(form.elements).find(\n    (element): element is HTMLButtonElement | HTMLInputElement =>\n      (element instanceof HTMLButtonElement ||\n        element instanceof HTMLInputElement) &&\n      (element.type === \"submit\" ||\n        (element instanceof HTMLInputElement && element.type === \"image\")),\n  );\n  if (submitter?.matches(\":disabled\")) return;\n  if (submitter) submitter.click();\n  else form.requestSubmit();\n}\n"]}

package/dist/utils/layer-stack.d.ts

@@ -0,0 +1,9 @@
+/** Registers an open overlay as the current topmost interactive layer. */
+export declare function activateLayer(layer: HTMLElement): void;
+/** Removes a closed or disconnected overlay from the layer stack. */
+export declare function deactivateLayer(layer: HTMLElement): void;
+/** Whether this overlay currently owns global Escape/focus behavior. */
+export declare function isTopLayer(layer: HTMLElement): boolean;
+/** Claims Escape for the topmost layer and marks it handled for other listeners. */
+export declare function claimEscape(layer: HTMLElement, event: KeyboardEvent): boolean;
+//# sourceMappingURL=layer-stack.d.ts.map

package/dist/utils/layer-stack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layer-stack.d.ts","sourceRoot":"","sources":["../../src/utils/layer-stack.ts"],"names":[],"mappings":"AAUA,0EAA0E;AAC1E,wBAAgB,aAAa,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI,CAItD;AAED,qEAAqE;AACrE,wBAAgB,eAAe,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI,CAKxD;AAED,wEAAwE;AACxE,wBAAgB,UAAU,CAAC,KAAK,EAAE,WAAW,GAAG,OAAO,CAEtD;AAED,oFAAoF;AACpF,wBAAgB,WAAW,CAAC,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,aAAa,GAAG,OAAO,CAM7E"}

package/dist/utils/layer-stack.js

@@ -0,0 +1,35 @@
+const layers = [];
+const baseZIndex = 100;
+/** Keeps visual z-order synchronized with interaction-stack order. */
+function syncLayerOrder() {
+    layers.forEach((layer, index) => {
+        layer.style.setProperty("--component-layer-z", String(baseZIndex + index));
+    });
+}
+/** Registers an open overlay as the current topmost interactive layer. */
+export function activateLayer(layer) {
+    deactivateLayer(layer);
+    layers.push(layer);
+    syncLayerOrder();
+}
+/** Removes a closed or disconnected overlay from the layer stack. */
+export function deactivateLayer(layer) {
+    const index = layers.indexOf(layer);
+    if (index >= 0)
+        layers.splice(index, 1);
+    layer.style.removeProperty("--component-layer-z");
+    syncLayerOrder();
+}
+/** Whether this overlay currently owns global Escape/focus behavior. */
+export function isTopLayer(layer) {
+    return layers.at(-1) === layer;
+}
+/** Claims Escape for the topmost layer and marks it handled for other listeners. */
+export function claimEscape(layer, event) {
+    if (event.key !== "Escape" || event.defaultPrevented || !isTopLayer(layer)) {
+        return false;
+    }
+    event.preventDefault();
+    return true;
+}
+//# sourceMappingURL=layer-stack.js.map

package/dist/utils/layer-stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layer-stack.js","sourceRoot":"","sources":["../../src/utils/layer-stack.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,GAAkB,EAAE,CAAC;AACjC,MAAM,UAAU,GAAG,GAAG,CAAC;AAEvB,sEAAsE;AACtE,SAAS,cAAc;IACrB,MAAM,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;QAC9B,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,qBAAqB,EAAE,MAAM,CAAC,UAAU,GAAG,KAAK,CAAC,CAAC,CAAC;IAC7E,CAAC,CAAC,CAAC;AACL,CAAC;AAED,0EAA0E;AAC1E,MAAM,UAAU,aAAa,CAAC,KAAkB;IAC9C,eAAe,CAAC,KAAK,CAAC,CAAC;IACvB,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACnB,cAAc,EAAE,CAAC;AACnB,CAAC;AAED,qEAAqE;AACrE,MAAM,UAAU,eAAe,CAAC,KAAkB;IAChD,MAAM,KAAK,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;IACpC,IAAI,KAAK,IAAI,CAAC;QAAE,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;IACxC,KAAK,CAAC,KAAK,CAAC,cAAc,CAAC,qBAAqB,CAAC,CAAC;IAClD,cAAc,EAAE,CAAC;AACnB,CAAC;AAED,wEAAwE;AACxE,MAAM,UAAU,UAAU,CAAC,KAAkB;IAC3C,OAAO,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC;AACjC,CAAC;AAED,oFAAoF;AACpF,MAAM,UAAU,WAAW,CAAC,KAAkB,EAAE,KAAoB;IAClE,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,KAAK,CAAC,gBAAgB,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC;QAC3E,OAAO,KAAK,CAAC;IACf,CAAC;IACD,KAAK,CAAC,cAAc,EAAE,CAAC;IACvB,OAAO,IAAI,CAAC;AACd,CAAC","sourcesContent":["const layers: HTMLElement[] = [];\nconst baseZIndex = 100;\n\n/** Keeps visual z-order synchronized with interaction-stack order. */\nfunction syncLayerOrder(): void {\n  layers.forEach((layer, index) => {\n    layer.style.setProperty(\"--component-layer-z\", String(baseZIndex + index));\n  });\n}\n\n/** Registers an open overlay as the current topmost interactive layer. */\nexport function activateLayer(layer: HTMLElement): void {\n  deactivateLayer(layer);\n  layers.push(layer);\n  syncLayerOrder();\n}\n\n/** Removes a closed or disconnected overlay from the layer stack. */\nexport function deactivateLayer(layer: HTMLElement): void {\n  const index = layers.indexOf(layer);\n  if (index >= 0) layers.splice(index, 1);\n  layer.style.removeProperty(\"--component-layer-z\");\n  syncLayerOrder();\n}\n\n/** Whether this overlay currently owns global Escape/focus behavior. */\nexport function isTopLayer(layer: HTMLElement): boolean {\n  return layers.at(-1) === layer;\n}\n\n/** Claims Escape for the topmost layer and marks it handled for other listeners. */\nexport function claimEscape(layer: HTMLElement, event: KeyboardEvent): boolean {\n  if (event.key !== \"Escape\" || event.defaultPrevented || !isTopLayer(layer)) {\n    return false;\n  }\n  event.preventDefault();\n  return true;\n}\n"]}

package/dist/weight-bar-chart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"weight-bar-chart.d.ts","sourceRoot":"","sources":["../src/weight-bar-chart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAK5C,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,kEAAkE;IAClE,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;;GASG;AACH,qBACa,cAAe,SAAQ,UAAU;IAC5C,oEAAoE;IACpC,KAAK,EAAE,aAAa,EAAE,CAAM;IAE5D,OAAgB,MAAM,4BAuCpB;IAEO,MAAM,gDAuBd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}
+{"version":3,"file":"weight-bar-chart.d.ts","sourceRoot":"","sources":["../src/weight-bar-chart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAK5C,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,kEAAkE;IAClE,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;;GASG;AACH,qBACa,cAAe,SAAQ,UAAU;IAC5C,oEAAoE;IACpC,KAAK,EAAE,aAAa,EAAE,CAAM;IAE5D,OAAgB,MAAM,4BA0DpB;IAEO,MAAM,gDAuBd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}

package/dist/weight-bar-chart.js

@@ -33,35 +33,54 @@ let WeightBarChart = class WeightBarChart extends LitElement {
       .row {
         display: flex;
         align-items: center;
-        gap: 8px;
-        margin: 6px 0;
+        gap: 0.5rem;
+        margin: 0.5rem 0;
       }
       .label {
-        flex: 0 0 90px;
+        flex: 0 0 5.5rem;
         font-size: var(--ui-font-size-sm, 0.75rem);
-        font-family: var(--ui-font, ui-sans-serif, system-ui, sans-serif);
+        font-family: var(
+          --ui-font,
+          ui-sans-serif,
+          system-ui,
+          sans-serif,
+          "Apple Color Emoji",
+          "Segoe UI Emoji",
+          "Segoe UI Symbol",
+          "Noto Color Emoji"
+        );
         color: var(--ui-text, #0f172a);
       }
       .track {
         flex: 1 1 auto;
-        height: 12px;
+        height: 0.75rem;
         background: var(--ui-surface-muted, #f8fafc);
         border-radius: var(--ui-radius-sm, 0.25rem);
         overflow: hidden;
       }
       .bar {
         height: 100%;
-        background: var(--ui-primary, #4f46e5);
+        /* Match map-circle's 30% white/black vertical depth while preserving token overrides. */
+        background: linear-gradient(
+          to bottom,
+          color-mix(in srgb, var(--ui-primary, #4f46e5) 70%, #ffffff) 0%,
+          color-mix(in srgb, var(--ui-primary, #4f46e5) 70%, #000000) 100%
+        );
         border-radius: 0 var(--ui-radius-sm, 0.25rem) var(--ui-radius-sm, 0.25rem) 0;
-        transition: width 0.15s ease-out;
+        transition: width 150ms ease-out;
       }
       .pct {
-        flex: 0 0 40px;
+        flex: 0 0 2.5rem;
         text-align: right;
         font-size: var(--ui-font-size-sm, 0.75rem);
         font-variant-numeric: tabular-nums;
         color: var(--ui-text-muted, #64748b);
       }
+      @media (prefers-reduced-motion: reduce) {
+        .bar {
+          transition: none;
+        }
+      }
     `,
     ]; }
     render() {

package/dist/weight-bar-chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"weight-bar-chart.js","sourceRoot":"","sources":["../src/weight-bar-chart.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;AASrC;;;;;;;;;GASG;AAEI,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAAvC;;QACL,oEAAoE;QACpC,UAAK,GAAoB,EAAE,CAAC;IAmE9D,CAAC;aAjEiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoCF;KACF,AAvCqB,CAuCpB;IAEO,MAAM;QACb,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO,IAAI,CAAC;QACzC,+EAA+E;QAC/E,MAAM,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC;QACjE,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;QAChE,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAClG,OAAO,IAAI,CAAA;6CAC8B,OAAO;UAC1C,MAAM,CACN,MAAM,EACN,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,EACjB,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;oCAEY,IAAI,CAAC,KAAK;;iDAEG,CAAC,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,GAAG;;kCAEvC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC;;WAEnD,CACF;;KAEJ,CAAC;IACJ,CAAC;CACF,CAAA;AAnEiC;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;6CAA6B;AAFjD,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAqE1B","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 WeightBarItem {\n  id: string;\n  label: string;\n  /** Normalized fraction (fractions across all items sum to ~1). */\n  value: number;\n}\n\n/**\n * Sorted horizontal bar chart of labeled weights (normalized fractions\n * summing to ~1). Bars sort descending — the order IS the priority ranking.\n * Widths scale relative to the largest weight (which fills its track); the\n * percent labels carry the absolute values. Rows are keyed by item id\n * (repeat directive) so a re-render with new weights moves the existing\n * rows; bar widths animate via CSS, re-sorting is instant.\n *\n * @element weight-bar-chart\n */\n@customElement(\"weight-bar-chart\")\nexport class WeightBarChart extends LitElement {\n  /** Items to render as weighted rows, sorted descending by value. */\n  @property({ attribute: false }) items: WeightBarItem[] = [];\n\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: block;\n      }\n      .row {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        margin: 6px 0;\n      }\n      .label {\n        flex: 0 0 90px;\n        font-size: var(--ui-font-size-sm, 0.75rem);\n        font-family: var(--ui-font, ui-sans-serif, system-ui, sans-serif);\n        color: var(--ui-text, #0f172a);\n      }\n      .track {\n        flex: 1 1 auto;\n        height: 12px;\n        background: var(--ui-surface-muted, #f8fafc);\n        border-radius: var(--ui-radius-sm, 0.25rem);\n        overflow: hidden;\n      }\n      .bar {\n        height: 100%;\n        background: var(--ui-primary, #4f46e5);\n        border-radius: 0 var(--ui-radius-sm, 0.25rem) var(--ui-radius-sm, 0.25rem) 0;\n        transition: width 0.15s ease-out;\n      }\n      .pct {\n        flex: 0 0 40px;\n        text-align: right;\n        font-size: var(--ui-font-size-sm, 0.75rem);\n        font-variant-numeric: tabular-nums;\n        color: var(--ui-text-muted, #64748b);\n      }\n    `,\n  ];\n\n  override render() {\n    if (this.items.length === 0) return null;\n    // Stable sort: ties keep the incoming item order, so the chart never flickers.\n    const sorted = [...this.items].sort((a, b) => b.value - a.value);\n    const max = Math.max(0.01, ...sorted.map((item) => item.value));\n    const summary = sorted.map((item) => `${item.label} ${Math.round(item.value * 100)}%`).join(\", \");\n    return html`\n      <div role=\"img\" aria-label=\"Weights: ${summary}\">\n        ${repeat(\n          sorted,\n          (item) => item.id,\n          (item) => html`\n            <div class=\"row\">\n              <span class=\"label\">${item.label}</span>\n              <div class=\"track\">\n                <div class=\"bar\" style=\"width: ${(item.value / max) * 100}%\"></div>\n              </div>\n              <span class=\"pct\">${Math.round(item.value * 100)}%</span>\n            </div>\n          `,\n        )}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"weight-bar-chart\": WeightBarChart;\n  }\n}\n"]}
+{"version":3,"file":"weight-bar-chart.js","sourceRoot":"","sources":["../src/weight-bar-chart.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;AASrC;;;;;;;;;GASG;AAEI,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAAvC;;QACL,oEAAoE;QACpC,UAAK,GAAoB,EAAE,CAAC;IAsF9D,CAAC;aApFiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuDF;KACF,AA1DqB,CA0DpB;IAEO,MAAM;QACb,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO,IAAI,CAAC;QACzC,+EAA+E;QAC/E,MAAM,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC;QACjE,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;QAChE,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAClG,OAAO,IAAI,CAAA;6CAC8B,OAAO;UAC1C,MAAM,CACN,MAAM,EACN,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,EACjB,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;oCAEY,IAAI,CAAC,KAAK;;iDAEG,CAAC,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,GAAG;;kCAEvC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC;;WAEnD,CACF;;KAEJ,CAAC;IACJ,CAAC;CACF,CAAA;AAtFiC;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;6CAA6B;AAFjD,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAwF1B","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 WeightBarItem {\n  id: string;\n  label: string;\n  /** Normalized fraction (fractions across all items sum to ~1). */\n  value: number;\n}\n\n/**\n * Sorted horizontal bar chart of labeled weights (normalized fractions\n * summing to ~1). Bars sort descending — the order IS the priority ranking.\n * Widths scale relative to the largest weight (which fills its track); the\n * percent labels carry the absolute values. Rows are keyed by item id\n * (repeat directive) so a re-render with new weights moves the existing\n * rows; bar widths animate via CSS, re-sorting is instant.\n *\n * @element weight-bar-chart\n */\n@customElement(\"weight-bar-chart\")\nexport class WeightBarChart extends LitElement {\n  /** Items to render as weighted rows, sorted descending by value. */\n  @property({ attribute: false }) items: WeightBarItem[] = [];\n\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: block;\n      }\n      .row {\n        display: flex;\n        align-items: center;\n        gap: 0.5rem;\n        margin: 0.5rem 0;\n      }\n      .label {\n        flex: 0 0 5.5rem;\n        font-size: var(--ui-font-size-sm, 0.75rem);\n        font-family: var(\n          --ui-font,\n          ui-sans-serif,\n          system-ui,\n          sans-serif,\n          \"Apple Color Emoji\",\n          \"Segoe UI Emoji\",\n          \"Segoe UI Symbol\",\n          \"Noto Color Emoji\"\n        );\n        color: var(--ui-text, #0f172a);\n      }\n      .track {\n        flex: 1 1 auto;\n        height: 0.75rem;\n        background: var(--ui-surface-muted, #f8fafc);\n        border-radius: var(--ui-radius-sm, 0.25rem);\n        overflow: hidden;\n      }\n      .bar {\n        height: 100%;\n        /* Match map-circle's 30% white/black vertical depth while preserving token overrides. */\n        background: linear-gradient(\n          to bottom,\n          color-mix(in srgb, var(--ui-primary, #4f46e5) 70%, #ffffff) 0%,\n          color-mix(in srgb, var(--ui-primary, #4f46e5) 70%, #000000) 100%\n        );\n        border-radius: 0 var(--ui-radius-sm, 0.25rem) var(--ui-radius-sm, 0.25rem) 0;\n        transition: width 150ms ease-out;\n      }\n      .pct {\n        flex: 0 0 2.5rem;\n        text-align: right;\n        font-size: var(--ui-font-size-sm, 0.75rem);\n        font-variant-numeric: tabular-nums;\n        color: var(--ui-text-muted, #64748b);\n      }\n      @media (prefers-reduced-motion: reduce) {\n        .bar {\n          transition: none;\n        }\n      }\n    `,\n  ];\n\n  override render() {\n    if (this.items.length === 0) return null;\n    // Stable sort: ties keep the incoming item order, so the chart never flickers.\n    const sorted = [...this.items].sort((a, b) => b.value - a.value);\n    const max = Math.max(0.01, ...sorted.map((item) => item.value));\n    const summary = sorted.map((item) => `${item.label} ${Math.round(item.value * 100)}%`).join(\", \");\n    return html`\n      <div role=\"img\" aria-label=\"Weights: ${summary}\">\n        ${repeat(\n          sorted,\n          (item) => item.id,\n          (item) => html`\n            <div class=\"row\">\n              <span class=\"label\">${item.label}</span>\n              <div class=\"track\">\n                <div class=\"bar\" style=\"width: ${(item.value / max) * 100}%\"></div>\n              </div>\n              <span class=\"pct\">${Math.round(item.value * 100)}%</span>\n            </div>\n          `,\n        )}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"weight-bar-chart\": WeightBarChart;\n  }\n}\n"]}

package/docs/address-autocomplete.md

@@ -35,6 +35,7 @@ import "@f-ewald/components/address-autocomplete.js";
 | `value` | `value` | `string` | `""` | Current input value; also the form-associated value submitted with the form. |
 | `placeholder` | `placeholder` | `string` | `""` | Placeholder text shown when the input is empty. |
 | `required` | `required` | `boolean` | `false` | Marks the input as required for native form validation. |
+| `disabled` | `disabled` | `boolean` | `false` | Disables the input and closes its suggestion popup. |
 | `types` | `types` | `string` | `"address"` | Mapbox `types` param, e.g. "address" or "address,poi". |
 | `endpoint` | `endpoint` | `string` | `"https://api.mapbox.com/search/geocode/v6/forward"` | Geocoding endpoint URL. Defaults to the Mapbox Geocoding v6 forward URL. |
 | `accessToken` | `access-token` | `string` | `""` | Mapbox access token. Required for requests to succeed. |
@@ -60,9 +61,13 @@ _None._
 | Custom property |
 | --- |
 | `--ui-border` |
+| `--ui-focus-ring` |
 | `--ui-font` |
 | `--ui-font-size-sm` |
+| `--ui-primary` |
 | `--ui-radius-sm` |
 | `--ui-shadow` |
 | `--ui-surface` |
 | `--ui-surface-muted` |
+| `--ui-text` |
+| `--ui-text-muted` |

package/docs/autocomplete-input.md

@@ -49,6 +49,7 @@ import "@f-ewald/components/autocomplete-input.js";
 | `value` | `value` | `string` | `""` | Current input value; also the form-associated value submitted with the form. |
 | `placeholder` | `placeholder` | `string` | `""` | Placeholder text shown when the input is empty. |
 | `required` | `required` | `boolean` | `false` | Marks the input as required for native form validation. |
+| `disabled` | `disabled` | `boolean` | `false` | Disables the input and closes its suggestion popup. |
 | `endpoint` | `endpoint` | `string` | `""` | API endpoint queried in API mode. Ignored when `options` is set. |
 | `queryParam` | `query-param` | `string` | `"q"` | Query string parameter name the current input text is sent under. |
 | `debounce` | `debounce` | `number` | `300` | Debounce delay (ms) before firing a request/filter after typing. |
@@ -71,9 +72,13 @@ _None._
 | Custom property |
 | --- |
 | `--ui-border` |
+| `--ui-focus-ring` |
 | `--ui-font` |
 | `--ui-font-size-sm` |
+| `--ui-primary` |
 | `--ui-radius-sm` |
 | `--ui-shadow` |
 | `--ui-surface` |
 | `--ui-surface-muted` |
+| `--ui-text` |
+| `--ui-text-muted` |

package/docs/calendar-month.md

@@ -68,6 +68,7 @@ _None._
 | `--ui-font-size-sm` |
 | `--ui-font-size-xs` |
 | `--ui-hover-overlay` |
+| `--ui-info` |
 | `--ui-primary` |
 | `--ui-radius-sm` |
 | `--ui-success` |
@@ -75,3 +76,4 @@ _None._
 | `--ui-surface-muted` |
 | `--ui-text` |
 | `--ui-text-muted` |
+| `--ui-warning` |

package/docs/chat-message.md

@@ -50,10 +50,14 @@ _None._
 | Custom property |
 | --- |
 | `--ui-border` |
+| `--ui-focus-ring` |
 | `--ui-font` |
+| `--ui-font-mono` |
 | `--ui-font-size` |
+| `--ui-font-size-sm` |
 | `--ui-primary` |
 | `--ui-radius` |
+| `--ui-radius-sm` |
 | `--ui-surface` |
 | `--ui-text` |
 | `--ui-text-muted` |

package/docs/confirm-dialog.md

@@ -51,9 +51,11 @@ import "@f-ewald/components/confirm-dialog.js";
 | `--ui-border` |
 | `--ui-danger` |
 | `--ui-danger-hover` |
+| `--ui-focus-ring` |
 | `--ui-font` |
 | `--ui-font-size` |
 | `--ui-font-size-sm` |
+| `--ui-on-accent` |
 | `--ui-overlay` |
 | `--ui-primary` |
 | `--ui-primary-hover` |

package/docs/copy-link-button.md

@@ -24,6 +24,7 @@ import "@f-ewald/components/copy-link-button.js";
 | --- | --- | --- | --- | --- |
 | `value` | `value` | `string` | `""` | Text to copy. Defaults to `window.location.href` at click time. |
 | `label` | `label` | `string` | `"Copy link"` | Accessible label / tooltip text. |
+| `disabled` | `disabled` | `boolean` | `false` | Disables clipboard copying. |
 
 ## Events
 
@@ -40,6 +41,7 @@ _None._
 
 | Custom property |
 | --- |
+| `--ui-focus-ring` |
 | `--ui-radius-sm` |
 | `--ui-surface-muted` |
 | `--ui-text` |

package/docs/data-table.md

@@ -42,6 +42,7 @@ import "@f-ewald/components/data-table.js";
 | `rowKey` | _(JS property only)_ | `(row: unknown, index: number) => string | number` | `—` | Stable identity for `rows[i]`, used as the repeat-directive key. Defaults to the row's index. |
 | `renderCell` | _(JS property only)_ | `(row: unknown, key: string) => unknown` | `—` | Produces a cell's rendered content for `row`/`column.key`. Default: `row[key]`. |
 | `rowHref` | _(JS property only)_ | `((row: unknown) => string | null) | null` | `null` | When set, clicking a row (outside any nested link/button) navigates to this hash. |
+| `rowLabel` | _(JS property only)_ | `((row: unknown) => string) | null` | `null` | Accessible label for a row's keyboard link; defaults to primitive cell values. |
 
 ## Events
 
@@ -56,6 +57,7 @@ _None._
 | Custom property |
 | --- |
 | `--ui-border` |
+| `--ui-focus-ring` |
 | `--ui-font` |
 | `--ui-font-size-sm` |
 | `--ui-surface-muted` |