@f-ewald/components 0.7.0 → 1.0.2

package/dist/radio-cards.js.map

@@ -1 +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"]}
+{"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;;QAoFL,wCAAwC;QACR,YAAO,GAAsB,EAAE,CAAC;QAChE,gCAAgC;QACpB,UAAK,GAAG,EAAE,CAAC;QACvB,gDAAgD;QACnB,aAAQ,GAAG,KAAK,CAAC;QAErC,UAAK,GAAG,eAAe,EAAE,aAAa,EAAE,CAAC;IAiCpD,CAAC;aA3HiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8EF;KACF,AAjFqB,CAiFpB;IASO,KAAK,CAAoC;IAE1C,SAAS,CAAC,KAAa;QAC7B,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,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;4BACvB,IAAI,CAAC,QAAQ;0BACf,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;AAvCiC;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;2CAAiC;AAEpD;IAAX,QAAQ,EAAE;yCAAY;AAEM;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CAAkB;AAzFnC,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CA4HtB","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.5rem;\n        flex-wrap: wrap;\n      }\n      .card {\n        flex: 1 1 11.25rem;\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.5rem 0.75rem;\n        cursor: pointer;\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-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.25rem;\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      .card:has(input:focus-visible) {\n        outline: none;\n        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));\n      }\n      .card:has(input:disabled) {\n        cursor: not-allowed;\n        opacity: 0.6;\n      }\n      .card:has(input:disabled) input {\n        cursor: not-allowed;\n      }\n      @media (forced-colors: active) {\n        .card:has(input:focus-visible) {\n          outline: 2px solid CanvasText;\n          outline-offset: 2px;\n          box-shadow: none;\n        }\n        .card:has(input:checked) {\n          border-color: Highlight;\n        }\n        .card:has(input:disabled) {\n          color: GrayText;\n          opacity: 1;\n        }\n        .card:has(input:disabled) .card-label,\n        .card:has(input:disabled) .card-description {\n          color: GrayText;\n        }\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  /** Disables every native radio in the group. */\n  @property({ type: Boolean }) disabled = false;\n\n  readonly #name = `radio-cards-${++instanceCount}`;\n\n  private _onChange(value: string) {\n    if (this.disabled) return;\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                ?disabled=${this.disabled}\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

@@ -20,6 +20,8 @@ export declare class RadioPills extends LitElement {
     options: RadioPillOption[];
     /** Currently selected value. */
     value: string;
+    /** Disables every native radio in the group. */
+    disabled: boolean;
     private _onChange;
     render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -1 +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"}
+{"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,4BAqEpB;IAEF,wCAAwC;IACR,OAAO,EAAE,eAAe,EAAE,CAAM;IAChE,gCAAgC;IACpB,KAAK,SAAM;IACvB,gDAAgD;IACnB,QAAQ,UAAS;IAI9C,OAAO,CAAC,SAAS;IAMR,MAAM,yCAqBd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/dist/radio-pills.js

@@ -26,6 +26,8 @@ let RadioPills = class RadioPills extends LitElement {
         this.options = [];
         /** Currently selected value. */
         this.value = "";
+        /** Disables every native radio in the group. */
+        this.disabled = false;
         this.#name = `radio-pills-${++instanceCount}`;
     }
     static { this.styles = [
@@ -37,17 +39,26 @@ let RadioPills = class RadioPills extends LitElement {
       .options {
         display: flex;
         flex-wrap: wrap;
-        gap: 0.4rem;
+        gap: 0.5rem;
       }
       .pill {
         display: flex;
         align-items: center;
-        gap: 0.3rem;
-        padding: 0.3rem 0.6rem;
+        gap: 0.25rem;
+        padding: 0.25rem 0.75rem;
         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-family: var(
+          --ui-font,
+          ui-sans-serif,
+          system-ui,
+          sans-serif,
+          "Apple Color Emoji",
+          "Segoe UI Emoji",
+          "Segoe UI Symbol",
+          "Noto Color Emoji"
+        );
         font-size: var(--ui-font-size-sm, 0.75rem);
         color: var(--ui-text, #0f172a);
       }
@@ -62,10 +73,37 @@ let RadioPills = class RadioPills extends LitElement {
         cursor: pointer;
         margin: 0;
       }
+      .pill:has(input:focus-visible) {
+        outline: none;
+        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));
+      }
+      .pill:has(input:disabled) {
+        cursor: not-allowed;
+        opacity: 0.6;
+      }
+      .pill:has(input:disabled) input {
+        cursor: not-allowed;
+      }
+      @media (forced-colors: active) {
+        .pill:has(input:focus-visible) {
+          outline: 2px solid CanvasText;
+          outline-offset: 2px;
+          box-shadow: none;
+        }
+        .pill:has(input:checked) {
+          border-color: Highlight;
+        }
+        .pill:has(input:disabled) {
+          color: GrayText;
+          opacity: 1;
+        }
+      }
     `,
     ]; }
     #name;
     _onChange(value) {
+        if (this.disabled)
+            return;
         this.value = value;
         this.dispatchEvent(new CustomEvent("change", { detail: { value }, bubbles: true, composed: true }));
     }
@@ -78,6 +116,7 @@ let RadioPills = class RadioPills extends LitElement {
                 type="radio"
                 name=${this.#name}
                 ?checked=${this.value === opt.value}
+                ?disabled=${this.disabled}
                 @change=${() => this._onChange(opt.value)}
               />
               <span>${opt.label}</span>
@@ -93,6 +132,9 @@ __decorate([
 __decorate([
     property()
 ], RadioPills.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean })
+], RadioPills.prototype, "disabled", void 0);
 RadioPills = __decorate([
     customElement("radio-pills")
 ], RadioPills);

package/dist/radio-pills.js.map

@@ -1 +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"]}
+{"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;;QAwEL,wCAAwC;QACR,YAAO,GAAsB,EAAE,CAAC;QAChE,gCAAgC;QACpB,UAAK,GAAG,EAAE,CAAC;QACvB,gDAAgD;QACnB,aAAQ,GAAG,KAAK,CAAC;QAErC,UAAK,GAAG,eAAe,EAAE,aAAa,EAAE,CAAC;IA8BpD,CAAC;aA5GiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkEF;KACF,AArEqB,CAqEpB;IASO,KAAK,CAAoC;IAE1C,SAAS,CAAC,KAAa;QAC7B,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,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;4BACvB,IAAI,CAAC,QAAQ;0BACf,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC;;sBAEnC,GAAG,CAAC,KAAK;;WAEpB,CACF;;KAEJ,CAAC;IACJ,CAAC;CACF,CAAA;AApCiC;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;2CAAiC;AAEpD;IAAX,QAAQ,EAAE;yCAAY;AAEM;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CAAkB;AA7EnC,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CA6GtB","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.5rem;\n      }\n      .pill {\n        display: flex;\n        align-items: center;\n        gap: 0.25rem;\n        padding: 0.25rem 0.75rem;\n        border: 1px solid var(--ui-border, #e2e8f0);\n        border-radius: 999px;\n        cursor: pointer;\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-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      .pill:has(input:focus-visible) {\n        outline: none;\n        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));\n      }\n      .pill:has(input:disabled) {\n        cursor: not-allowed;\n        opacity: 0.6;\n      }\n      .pill:has(input:disabled) input {\n        cursor: not-allowed;\n      }\n      @media (forced-colors: active) {\n        .pill:has(input:focus-visible) {\n          outline: 2px solid CanvasText;\n          outline-offset: 2px;\n          box-shadow: none;\n        }\n        .pill:has(input:checked) {\n          border-color: Highlight;\n        }\n        .pill:has(input:disabled) {\n          color: GrayText;\n          opacity: 1;\n        }\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  /** Disables every native radio in the group. */\n  @property({ type: Boolean }) disabled = false;\n\n  readonly #name = `radio-pills-${++instanceCount}`;\n\n  private _onChange(value: string) {\n    if (this.disabled) return;\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                ?disabled=${this.disabled}\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/relative-time.d.ts

@@ -9,7 +9,6 @@ import { LitElement } from "lit";
  * @element relative-time
  */
 export declare class RelativeTime extends LitElement {
-    static styles: import("lit").CSSResult;
     /** Timestamp to render, relative to now. */
     datetime: string | null;
     private _now;

package/dist/relative-time.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"relative-time.d.ts","sourceRoot":"","sources":["../src/relative-time.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAM5C;;;;;;;;GAQG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,0BAIpB;IAEF,4CAA4C;IAChC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAQ;IAElC,OAAO,CAAC,IAAI,CAAc;IAEnC,OAAO,CAAC,MAAM,CAA+C;IAEpD,iBAAiB,SAKzB;IAEQ,oBAAoB,SAI5B;IAEQ,MAAM,yCAKd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAC;KAC/B;CACF"}
+{"version":3,"file":"relative-time.d.ts","sourceRoot":"","sources":["../src/relative-time.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAMvC;;;;;;;;GAQG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,4CAA4C;IAChC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAQ;IAElC,OAAO,CAAC,IAAI,CAAc;IAEnC,OAAO,CAAC,MAAM,CAA+C;IAEpD,iBAAiB,SAKzB;IAEQ,oBAAoB,SAI5B;IAEQ,MAAM,yCAKd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAC;KAC/B;CACF"}

package/dist/relative-time.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { LitElement, html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { parseTimestamp, formatRelativeTime } from "./utils/time.js";
 const REFRESH_INTERVAL_MS = 60_000;
@@ -25,11 +25,6 @@ let RelativeTime = class RelativeTime extends LitElement {
         this._now = Date.now();
         this._timer = null;
     }
-    static { this.styles = css `
-    :host {
-      display: inline;
-    }
-  `; }
     connectedCallback() {
         super.connectedCallback();
         this._timer = setInterval(() => {

package/dist/relative-time.js.map

@@ -1 +1 @@
-{"version":3,"file":"relative-time.js","sourceRoot":"","sources":["../src/relative-time.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,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAErE,MAAM,mBAAmB,GAAG,MAAM,CAAC;AAEnC;;;;;;;;GAQG;AAEI,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAArC;;QAOL,4CAA4C;QAChC,aAAQ,GAAkB,IAAI,CAAC;QAE1B,SAAI,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;QAE3B,WAAM,GAA0C,IAAI,CAAC;IAqB/D,CAAC;aAhCiB,WAAM,GAAG,GAAG,CAAA;;;;GAI3B,AAJqB,CAIpB;IASO,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE;YAC7B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;QACzB,CAAC,EAAE,mBAAmB,CAAC,CAAC;IAC1B,CAAC;IAEQ,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI;YAAE,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACpD,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACrB,CAAC;IAEQ,MAAM;QACb,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,OAAO,IAAI,CAAA,EAAE,CAAC;QAClC,MAAM,IAAI,GAAG,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC3C,IAAI,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAAE,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAChE,OAAO,IAAI,CAAA,eAAe,IAAI,CAAC,cAAc,EAAE,IAAI,kBAAkB,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;IAClG,CAAC;CACF,CAAA;AAzBa;IAAX,QAAQ,EAAE;8CAAgC;AAE1B;IAAhB,KAAK,EAAE;0CAA2B;AAVxB,YAAY;IADxB,aAAa,CAAC,eAAe,CAAC;GAClB,YAAY,CAiCxB","sourcesContent":["import { LitElement, css, html } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { parseTimestamp, formatRelativeTime } from \"./utils/time.js\";\n\nconst REFRESH_INTERVAL_MS = 60_000;\n\n/**\n * Inline relative-time display (e.g. \"3 hours ago\"). Accepts either a\n * standard ISO 8601 string or a SQLite `datetime('now')` string\n * (\"YYYY-MM-DD HH:MM:SS\", UTC, no zone marker) via `datetime`. Shows the\n * full date/time in the viewer's local timezone as a hover tooltip, and\n * re-renders on an interval so the text stays current while visible.\n *\n * @element relative-time\n */\n@customElement(\"relative-time\")\nexport class RelativeTime extends LitElement {\n  static override styles = css`\n    :host {\n      display: inline;\n    }\n  `;\n\n  /** Timestamp to render, relative to now. */\n  @property() datetime: string | null = null;\n\n  @state() private _now = Date.now();\n\n  private _timer: ReturnType<typeof setInterval> | null = null;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this._timer = setInterval(() => {\n      this._now = Date.now();\n    }, REFRESH_INTERVAL_MS);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    if (this._timer != null) clearInterval(this._timer);\n    this._timer = null;\n  }\n\n  override render() {\n    if (!this.datetime) return html``;\n    const date = parseTimestamp(this.datetime);\n    if (Number.isNaN(date.getTime())) return html`${this.datetime}`;\n    return html`<span title=${date.toLocaleString()}>${formatRelativeTime(date, this._now)}</span>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"relative-time\": RelativeTime;\n  }\n}\n"]}
+{"version":3,"file":"relative-time.js","sourceRoot":"","sources":["../src/relative-time.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAErE,MAAM,mBAAmB,GAAG,MAAM,CAAC;AAEnC;;;;;;;;GAQG;AAEI,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAArC;;QACL,4CAA4C;QAChC,aAAQ,GAAkB,IAAI,CAAC;QAE1B,SAAI,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;QAE3B,WAAM,GAA0C,IAAI,CAAC;IAqB/D,CAAC;IAnBU,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE;YAC7B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;QACzB,CAAC,EAAE,mBAAmB,CAAC,CAAC;IAC1B,CAAC;IAEQ,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI;YAAE,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACpD,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACrB,CAAC;IAEQ,MAAM;QACb,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,OAAO,IAAI,CAAA,EAAE,CAAC;QAClC,MAAM,IAAI,GAAG,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC3C,IAAI,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAAE,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAChE,OAAO,IAAI,CAAA,eAAe,IAAI,CAAC,cAAc,EAAE,IAAI,kBAAkB,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;IAClG,CAAC;CACF,CAAA;AAzBa;IAAX,QAAQ,EAAE;8CAAgC;AAE1B;IAAhB,KAAK,EAAE;0CAA2B;AAJxB,YAAY;IADxB,aAAa,CAAC,eAAe,CAAC;GAClB,YAAY,CA2BxB","sourcesContent":["import { LitElement, html } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { parseTimestamp, formatRelativeTime } from \"./utils/time.js\";\n\nconst REFRESH_INTERVAL_MS = 60_000;\n\n/**\n * Inline relative-time display (e.g. \"3 hours ago\"). Accepts either a\n * standard ISO 8601 string or a SQLite `datetime('now')` string\n * (\"YYYY-MM-DD HH:MM:SS\", UTC, no zone marker) via `datetime`. Shows the\n * full date/time in the viewer's local timezone as a hover tooltip, and\n * re-renders on an interval so the text stays current while visible.\n *\n * @element relative-time\n */\n@customElement(\"relative-time\")\nexport class RelativeTime extends LitElement {\n  /** Timestamp to render, relative to now. */\n  @property() datetime: string | null = null;\n\n  @state() private _now = Date.now();\n\n  private _timer: ReturnType<typeof setInterval> | null = null;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this._timer = setInterval(() => {\n      this._now = Date.now();\n    }, REFRESH_INTERVAL_MS);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    if (this._timer != null) clearInterval(this._timer);\n    this._timer = null;\n  }\n\n  override render() {\n    if (!this.datetime) return html``;\n    const date = parseTimestamp(this.datetime);\n    if (Number.isNaN(date.getTime())) return html`${this.datetime}`;\n    return html`<span title=${date.toLocaleString()}>${formatRelativeTime(date, this._now)}</span>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"relative-time\": RelativeTime;\n  }\n}\n"]}

package/dist/reveal-button.d.ts

@@ -8,6 +8,8 @@ export declare class RevealButton extends LitElement {
     static styles: import("lit").CSSResult[];
     /** Label shown on the button before it's clicked. */
     label: string;
+    /** Disables revealing the slotted content. */
+    disabled: boolean;
     private _reveal;
     protected render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"reveal-button.d.ts","sourceRoot":"","sources":["../src/reveal-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C;;;;GAIG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,4BAoBpB;IAEF,qDAAqD;IAErD,KAAK,EAAE,MAAM,CAA2B;IAExC,OAAO,CAAC,OAAO;IAOf,UAAmB,MAAM,yCAKxB;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAC;KAC/B;CACF"}
+{"version":3,"file":"reveal-button.d.ts","sourceRoot":"","sources":["../src/reveal-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C;;;;GAIG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,4BAgDpB;IAEF,qDAAqD;IAErD,KAAK,EAAE,MAAM,CAA2B;IACxC,8CAA8C;IACjB,QAAQ,UAAS;IAE9C,OAAO,CAAC,OAAO;IAQf,UAAmB,MAAM,yCAOxB;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAC;KAC/B;CACF"}

package/dist/reveal-button.js

@@ -17,6 +17,8 @@ let RevealButton = class RevealButton extends LitElement {
         super(...arguments);
         /** Label shown on the button before it's clicked. */
         this.label = "Reveal hidden content";
+        /** Disables revealing the slotted content. */
+        this.disabled = false;
     }
     static { this.styles = [
         tokens,
@@ -25,21 +27,51 @@ let RevealButton = class RevealButton extends LitElement {
         display: none;
       }
       button {
-        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-size: var(--ui-font-size, 0.875rem);
         background: var(--ui-primary, #4f46e5);
-        color: #fff;
+        color: var(--ui-on-accent, #ffffff);
         border: none;
         border-radius: var(--ui-radius-sm, 0.25rem);
-        padding: 0.5rem 0.9rem;
+        padding: 0.5rem 1rem;
         cursor: pointer;
       }
-      button:hover {
+      button:hover:not(:disabled) {
         background: var(--ui-primary-hover, #4338ca);
       }
+      button:disabled {
+        cursor: not-allowed;
+        opacity: 0.6;
+      }
+      button:focus-visible {
+        outline: none;
+        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));
+      }
+      @media (forced-colors: active) {
+        button:focus-visible {
+          outline: 2px solid CanvasText;
+          outline-offset: 2px;
+          box-shadow: none;
+        }
+        button:disabled {
+          color: GrayText;
+          opacity: 1;
+        }
+      }
     `,
     ]; }
     _reveal() {
+        if (this.disabled)
+            return;
         const div = this.shadowRoot.querySelector("div");
         const button = this.shadowRoot.querySelector("button");
         div?.classList.toggle("hidden");
@@ -48,13 +80,18 @@ let RevealButton = class RevealButton extends LitElement {
     render() {
         return html `
       <div class="hidden"><slot></slot></div>
-      <button @click="${this._reveal}">${this.label}</button>
+      <button type="button" ?disabled=${this.disabled} @click=${this._reveal}>
+        ${this.label}
+      </button>
     `;
     }
 };
 __decorate([
     property({ type: String })
 ], RevealButton.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean })
+], RevealButton.prototype, "disabled", void 0);
 RevealButton = __decorate([
     customElement("reveal-button")
 ], RevealButton);

package/dist/reveal-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"reveal-button.js","sourceRoot":"","sources":["../src/reveal-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,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC;;;;GAIG;AAEI,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAArC;;QAuBL,qDAAqD;QAErD,UAAK,GAAW,uBAAuB,CAAC;IAe1C,CAAC;aAvCiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;KAiBF;KACF,AApBqB,CAoBpB;IAMM,OAAO;QACb,MAAM,GAAG,GAAG,IAAI,CAAC,UAAW,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAClD,MAAM,MAAM,GAAG,IAAI,CAAC,UAAW,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QACxD,GAAG,EAAE,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;QAChC,MAAM,EAAE,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IACrC,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;wBAES,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,KAAK;KAC9C,CAAC;IACJ,CAAC;CACF,CAAA;AAfC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACa;AAzB7B,YAAY;IADxB,aAAa,CAAC,eAAe,CAAC;GAClB,YAAY,CAwCxB","sourcesContent":["import { LitElement, css, html } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { tokens } from \"./tokens.js\";\n\n/**\n * Button that reveals hidden slotted content when clicked.\n *\n * @element reveal-button\n */\n@customElement(\"reveal-button\")\nexport class RevealButton extends LitElement {\n  static override styles = [\n    tokens,\n    css`\n      .hidden {\n        display: none;\n      }\n      button {\n        font-family: var(--ui-font, ui-sans-serif, system-ui, sans-serif);\n        font-size: var(--ui-font-size, 0.875rem);\n        background: var(--ui-primary, #4f46e5);\n        color: #fff;\n        border: none;\n        border-radius: var(--ui-radius-sm, 0.25rem);\n        padding: 0.5rem 0.9rem;\n        cursor: pointer;\n      }\n      button:hover {\n        background: var(--ui-primary-hover, #4338ca);\n      }\n    `,\n  ];\n\n  /** Label shown on the button before it's clicked. */\n  @property({ type: String })\n  label: string = \"Reveal hidden content\";\n\n  private _reveal() {\n    const div = this.shadowRoot!.querySelector(\"div\");\n    const button = this.shadowRoot!.querySelector(\"button\");\n    div?.classList.toggle(\"hidden\");\n    button?.classList.toggle(\"hidden\");\n  }\n\n  protected override render() {\n    return html`\n      <div class=\"hidden\"><slot></slot></div>\n      <button @click=\"${this._reveal}\">${this.label}</button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"reveal-button\": RevealButton;\n  }\n}\n"]}
+{"version":3,"file":"reveal-button.js","sourceRoot":"","sources":["../src/reveal-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,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC;;;;GAIG;AAEI,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAArC;;QAmDL,qDAAqD;QAErD,UAAK,GAAW,uBAAuB,CAAC;QACxC,8CAA8C;QACjB,aAAQ,GAAG,KAAK,CAAC;IAkBhD,CAAC;aAxEiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6CF;KACF,AAhDqB,CAgDpB;IAQM,OAAO;QACb,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,MAAM,GAAG,GAAG,IAAI,CAAC,UAAW,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAClD,MAAM,MAAM,GAAG,IAAI,CAAC,UAAW,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QACxD,GAAG,EAAE,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;QAChC,MAAM,EAAE,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IACrC,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;wCAEyB,IAAI,CAAC,QAAQ,WAAW,IAAI,CAAC,OAAO;UAClE,IAAI,CAAC,KAAK;;KAEf,CAAC;IACJ,CAAC;CACF,CAAA;AApBC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACa;AAEX;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8CAAkB;AAvDnC,YAAY;IADxB,aAAa,CAAC,eAAe,CAAC;GAClB,YAAY,CAyExB","sourcesContent":["import { LitElement, css, html } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { tokens } from \"./tokens.js\";\n\n/**\n * Button that reveals hidden slotted content when clicked.\n *\n * @element reveal-button\n */\n@customElement(\"reveal-button\")\nexport class RevealButton extends LitElement {\n  static override styles = [\n    tokens,\n    css`\n      .hidden {\n        display: none;\n      }\n      button {\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-size: var(--ui-font-size, 0.875rem);\n        background: var(--ui-primary, #4f46e5);\n        color: var(--ui-on-accent, #ffffff);\n        border: none;\n        border-radius: var(--ui-radius-sm, 0.25rem);\n        padding: 0.5rem 1rem;\n        cursor: pointer;\n      }\n      button:hover:not(:disabled) {\n        background: var(--ui-primary-hover, #4338ca);\n      }\n      button:disabled {\n        cursor: not-allowed;\n        opacity: 0.6;\n      }\n      button:focus-visible {\n        outline: none;\n        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));\n      }\n      @media (forced-colors: active) {\n        button:focus-visible {\n          outline: 2px solid CanvasText;\n          outline-offset: 2px;\n          box-shadow: none;\n        }\n        button:disabled {\n          color: GrayText;\n          opacity: 1;\n        }\n      }\n    `,\n  ];\n\n  /** Label shown on the button before it's clicked. */\n  @property({ type: String })\n  label: string = \"Reveal hidden content\";\n  /** Disables revealing the slotted content. */\n  @property({ type: Boolean }) disabled = false;\n\n  private _reveal() {\n    if (this.disabled) return;\n    const div = this.shadowRoot!.querySelector(\"div\");\n    const button = this.shadowRoot!.querySelector(\"button\");\n    div?.classList.toggle(\"hidden\");\n    button?.classList.toggle(\"hidden\");\n  }\n\n  protected override render() {\n    return html`\n      <div class=\"hidden\"><slot></slot></div>\n      <button type=\"button\" ?disabled=${this.disabled} @click=${this._reveal}>\n        ${this.label}\n      </button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"reveal-button\": RevealButton;\n  }\n}\n"]}

package/dist/roman-numeral.js

@@ -31,7 +31,7 @@ let RomanNumeral = class RomanNumeral extends LitElement {
         return html `${this._convertToRoman(this.value)}`;
     }
     _convertToRoman(num) {
-        if (!num) {
+        if (num == null || !Number.isInteger(num) || num <= 0) {
             return "NaN";
         }
         let remaining = num;

package/dist/roman-numeral.js.map

@@ -1 +1 @@
-{"version":3,"file":"roman-numeral.js","sourceRoot":"","sources":["../src/roman-numeral.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,MAAM,cAAc,GAA2B;IAC7C,CAAC,EAAE,IAAI;IACP,EAAE,EAAE,GAAG;IACP,CAAC,EAAE,GAAG;IACN,EAAE,EAAE,GAAG;IACP,CAAC,EAAE,GAAG;IACN,EAAE,EAAE,EAAE;IACN,CAAC,EAAE,EAAE;IACL,EAAE,EAAE,EAAE;IACN,CAAC,EAAE,EAAE;IACL,EAAE,EAAE,CAAC;IACL,CAAC,EAAE,CAAC;IACJ,EAAE,EAAE,CAAC;IACL,CAAC,EAAE,CAAC;CACL,CAAC;AAEF;;;;GAIG;AAEI,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAKvB,MAAM;QACvB,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;IACnD,CAAC;IAEO,eAAe,CAAC,GAAY;QAClC,IAAI,CAAC,GAAG,EAAE,CAAC;YACT,OAAO,KAAK,CAAC;QACf,CAAC;QAED,IAAI,SAAS,GAAG,GAAG,CAAC;QACpB,IAAI,GAAG,GAAG,EAAE,CAAC;QAEb,KAAK,MAAM,MAAM,IAAI,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC,EAAE,CAAC;YACjD,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;YAC7D,SAAS,IAAI,KAAK,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC;YAC5C,GAAG,IAAI,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC9B,CAAC;QAED,OAAO,GAAG,CAAC;IACb,CAAC;CACF,CAAA;AAtBC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACZ;AAHJ,YAAY;IADxB,aAAa,CAAC,eAAe,CAAC;GAClB,YAAY,CAyBxB","sourcesContent":["import { LitElement, html } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\n\nconst ROMAN_NUMERALS: Record<string, number> = {\n  M: 1000,\n  CM: 900,\n  D: 500,\n  CD: 400,\n  C: 100,\n  XC: 90,\n  L: 50,\n  XL: 40,\n  X: 10,\n  IX: 9,\n  V: 5,\n  IV: 4,\n  I: 1,\n};\n\n/**\n * Converts an integer to a roman numeral inline.\n *\n * @element roman-numeral\n */\n@customElement(\"roman-numeral\")\nexport class RomanNumeral extends LitElement {\n  /** Integer value to render as a roman numeral. */\n  @property({ type: Number })\n  value?: number;\n\n  protected override render() {\n    return html`${this._convertToRoman(this.value)}`;\n  }\n\n  private _convertToRoman(num?: number): string {\n    if (!num) {\n      return \"NaN\";\n    }\n\n    let remaining = num;\n    let str = \"\";\n\n    for (const symbol of Object.keys(ROMAN_NUMERALS)) {\n      const count = Math.floor(remaining / ROMAN_NUMERALS[symbol]);\n      remaining -= count * ROMAN_NUMERALS[symbol];\n      str += symbol.repeat(count);\n    }\n\n    return str;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"roman-numeral\": RomanNumeral;\n  }\n}\n"]}
+{"version":3,"file":"roman-numeral.js","sourceRoot":"","sources":["../src/roman-numeral.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,MAAM,cAAc,GAA2B;IAC7C,CAAC,EAAE,IAAI;IACP,EAAE,EAAE,GAAG;IACP,CAAC,EAAE,GAAG;IACN,EAAE,EAAE,GAAG;IACP,CAAC,EAAE,GAAG;IACN,EAAE,EAAE,EAAE;IACN,CAAC,EAAE,EAAE;IACL,EAAE,EAAE,EAAE;IACN,CAAC,EAAE,EAAE;IACL,EAAE,EAAE,CAAC;IACL,CAAC,EAAE,CAAC;IACJ,EAAE,EAAE,CAAC;IACL,CAAC,EAAE,CAAC;CACL,CAAC;AAEF;;;;GAIG;AAEI,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAKvB,MAAM;QACvB,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;IACnD,CAAC;IAEO,eAAe,CAAC,GAAY;QAClC,IAAI,GAAG,IAAI,IAAI,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC;YACtD,OAAO,KAAK,CAAC;QACf,CAAC;QAED,IAAI,SAAS,GAAG,GAAG,CAAC;QACpB,IAAI,GAAG,GAAG,EAAE,CAAC;QAEb,KAAK,MAAM,MAAM,IAAI,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC,EAAE,CAAC;YACjD,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;YAC7D,SAAS,IAAI,KAAK,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC;YAC5C,GAAG,IAAI,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC9B,CAAC;QAED,OAAO,GAAG,CAAC;IACb,CAAC;CACF,CAAA;AAtBC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACZ;AAHJ,YAAY;IADxB,aAAa,CAAC,eAAe,CAAC;GAClB,YAAY,CAyBxB","sourcesContent":["import { LitElement, html } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\n\nconst ROMAN_NUMERALS: Record<string, number> = {\n  M: 1000,\n  CM: 900,\n  D: 500,\n  CD: 400,\n  C: 100,\n  XC: 90,\n  L: 50,\n  XL: 40,\n  X: 10,\n  IX: 9,\n  V: 5,\n  IV: 4,\n  I: 1,\n};\n\n/**\n * Converts an integer to a roman numeral inline.\n *\n * @element roman-numeral\n */\n@customElement(\"roman-numeral\")\nexport class RomanNumeral extends LitElement {\n  /** Integer value to render as a roman numeral. */\n  @property({ type: Number })\n  value?: number;\n\n  protected override render() {\n    return html`${this._convertToRoman(this.value)}`;\n  }\n\n  private _convertToRoman(num?: number): string {\n    if (num == null || !Number.isInteger(num) || num <= 0) {\n      return \"NaN\";\n    }\n\n    let remaining = num;\n    let str = \"\";\n\n    for (const symbol of Object.keys(ROMAN_NUMERALS)) {\n      const count = Math.floor(remaining / ROMAN_NUMERALS[symbol]);\n      remaining -= count * ROMAN_NUMERALS[symbol];\n      str += symbol.repeat(count);\n    }\n\n    return str;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"roman-numeral\": RomanNumeral;\n  }\n}\n"]}

package/dist/slide-panel.d.ts

@@ -1,11 +1,11 @@
-import { LitElement } from "lit";
+import { LitElement, type PropertyValues } from "lit";
 /**
  * Generic sliding panel shell. Handles positioning, open/close animation,
  * header chrome, and a close button. Body content is provided via the
  * default slot; the consumer controls its own padding and overflow.
  *
- * Desktop: 300 px fixed right-side panel that slides from the right.
- * Mobile (≤768px): bottom-sheet drawer (60vh) — reserved for future use.
+ * Desktop: fixed right-side panel that slides from the right.
+ * Mobile (≤48rem): bottom-sheet drawer (60vh) — reserved for future use.
  *
  * @element slide-panel
  * @fires panel-close - User clicked the close (✕) button.
@@ -16,7 +16,11 @@ export declare class SlidePanel extends LitElement {
     /** Title text shown in the panel header (overridable via slot="title"). */
     heading: string;
     static styles: import("lit").CSSResult[];
+    private _previousFocus;
     private _close;
+    private _onWindowKeydown;
+    protected updated(changed: PropertyValues): void;
+    disconnectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/dist/slide-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slide-panel.d.ts","sourceRoot":"","sources":["../src/slide-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAK5C;;;;;;;;;;GAUG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,8CAA8C;IACjB,IAAI,UAAS;IAC1C,2EAA2E;IAC/D,OAAO,SAAM;IAEzB,OAAgB,MAAM,4BA0FpB;IAEF,OAAO,CAAC,MAAM;IAIL,MAAM,yCAad;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
+{"version":3,"file":"slide-panel.d.ts","sourceRoot":"","sources":["../src/slide-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAM1E;;;;;;;;;;GAUG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,8CAA8C;IACjB,IAAI,UAAS;IAC1C,2EAA2E;IAC/D,OAAO,SAAM;IAEzB,OAAgB,MAAM,4BAuHpB;IAEF,OAAO,CAAC,cAAc,CAA4B;IAElD,OAAO,CAAC,MAAM;IAId,OAAO,CAAC,gBAAgB,CAGtB;IAEF,UAAmB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAaxD;IAEQ,oBAAoB,IAAI,IAAI,CAOpC;IAEQ,MAAM,yCAwBd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/dist/slide-panel.js

@@ -4,17 +4,18 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { LitElement, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { iconX } from "./icons.js";
 import { tokens } from "./tokens.js";
+import { activateLayer, claimEscape, deactivateLayer } from "./utils/layer-stack.js";
 /**
  * Generic sliding panel shell. Handles positioning, open/close animation,
  * header chrome, and a close button. Body content is provided via the
  * default slot; the consumer controls its own padding and overflow.
  *
- * Desktop: 300 px fixed right-side panel that slides from the right.
- * Mobile (≤768px): bottom-sheet drawer (60vh) — reserved for future use.
+ * Desktop: fixed right-side panel that slides from the right.
+ * Mobile (≤48rem): bottom-sheet drawer (60vh) — reserved for future use.
  *
  * @element slide-panel
  * @fires panel-close - User clicked the close (✕) button.
@@ -26,6 +27,12 @@ let SlidePanel = class SlidePanel extends LitElement {
         this.open = false;
         /** Title text shown in the panel header (overridable via slot="title"). */
         this.heading = "";
+        this._previousFocus = null;
+        this._onWindowKeydown = (event) => {
+            if (!this.open || !claimEscape(this, event))
+                return;
+            this._close();
+        };
     }
     static { this.styles = [
         tokens,
@@ -38,12 +45,12 @@ let SlidePanel = class SlidePanel extends LitElement {
         top: 0;
         right: 0;
         bottom: 0;
-        width: 300px;
-        z-index: 20;
-        background: var(--ui-surface, #fff);
+        width: 18.75rem;
+        z-index: var(--component-layer-z, 20);
+        background: var(--ui-surface, #ffffff);
         box-shadow: var(--ui-shadow-lg, 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1));
         transform: translateX(110%);
-        transition: transform 0.25s ease;
+        transition: transform 250ms ease;
         display: flex;
         flex-direction: column;
         overflow: hidden;
@@ -55,14 +62,23 @@ let SlidePanel = class SlidePanel extends LitElement {
         display: flex;
         align-items: center;
         justify-content: space-between;
-        padding: 0.5rem 0.625rem;
+        padding: 0.5rem;
         border-bottom: 1px solid var(--ui-border, #e2e8f0);
         flex: 0 0 auto;
       }
       .panel-title {
         font-weight: 600;
         font-size: var(--ui-font-size, 0.875rem);
-        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);
         flex: 1 1 auto;
         overflow: hidden;
@@ -85,10 +101,26 @@ let SlidePanel = class SlidePanel extends LitElement {
       .close-btn:hover {
         background: var(--ui-surface-muted, #f8fafc);
       }
+      .close-btn:focus-visible {
+        outline: none;
+        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));
+      }
       .handle {
         display: none;
       }
-      @media (max-width: 768px) {
+      @media (prefers-reduced-motion: reduce) {
+        .panel {
+          transition: none;
+        }
+      }
+      @media (forced-colors: active) {
+        .close-btn:focus-visible {
+          outline: 2px solid CanvasText;
+          outline-offset: 2px;
+          box-shadow: none;
+        }
+      }
+      @media (max-width: 48rem) {
         .panel {
           top: auto;
           right: 0;
@@ -96,8 +128,12 @@ let SlidePanel = class SlidePanel extends LitElement {
           left: 0;
           width: auto;
           height: 60vh;
-          border-radius: 14px 14px 0 0;
-          box-shadow: 0 -3px 20px rgb(0 0 0 / 0.18);
+          border-radius: var(--ui-radius, 0.5rem) var(--ui-radius, 0.5rem) 0 0;
+          box-shadow: var(
+            --ui-shadow-lg,
+            0 20px 25px -5px rgb(0 0 0 / 0.1),
+            0 8px 10px -6px rgb(0 0 0 / 0.1)
+          );
           transform: translateY(110%);
         }
         .panel.open {
@@ -105,15 +141,15 @@ let SlidePanel = class SlidePanel extends LitElement {
         }
         .handle {
           display: block;
-          width: 36px;
-          height: 4px;
+          width: 2.25rem;
+          height: 0.25rem;
           background: var(--ui-border, #e2e8f0);
-          border-radius: 2px;
-          margin: 10px auto 0;
+          border-radius: 9999px;
+          margin: 0.5rem auto 0;
           flex: 0 0 auto;
         }
         .panel-header {
-          padding: 4px 10px 8px;
+          padding: 0.25rem 0.5rem 0.5rem;
         }
       }
     `,
@@ -121,15 +157,51 @@ let SlidePanel = class SlidePanel extends LitElement {
     _close() {
         this.dispatchEvent(new CustomEvent("panel-close", { bubbles: true, composed: true }));
     }
+    updated(changed) {
+        if (!changed.has("open"))
+            return;
+        if (this.open) {
+            activateLayer(this);
+            this._previousFocus = document.activeElement;
+            window.addEventListener("keydown", this._onWindowKeydown);
+            this.shadowRoot?.querySelector(".close-btn")?.focus();
+            return;
+        }
+        deactivateLayer(this);
+        window.removeEventListener("keydown", this._onWindowKeydown);
+        if (this._previousFocus?.isConnected)
+            this._previousFocus.focus();
+        this._previousFocus = null;
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        window.removeEventListener("keydown", this._onWindowKeydown);
+        deactivateLayer(this);
+        if (this._previousFocus?.isConnected)
+            this._previousFocus.focus();
+        this._previousFocus = null;
+        this.open = false;
+    }
     render() {
+        const explicitLabel = this.getAttribute("aria-label");
         return html `
-      <div class="panel ${this.open ? "open" : ""}">
-        <div class="handle"></div>
+      <div
+        class="panel ${this.open ? "open" : ""}"
+        role="dialog"
+        aria-modal="false"
+        aria-label=${explicitLabel ?? nothing}
+        aria-labelledby=${explicitLabel ? nothing : "panel-title"}
+        aria-hidden=${String(!this.open)}
+        ?inert=${!this.open}
+      >
+        <div class="handle" aria-hidden="true"></div>
         <div class="panel-header">
-          <slot name="title">
-            ${this.heading ? html `<span class="panel-title">${this.heading}</span>` : null}
-          </slot>
-          <button class="close-btn" aria-label="Close panel" @click=${this._close}>${iconX(18)}</button>
+          <span id="panel-title" class="panel-title">
+            <slot name="title">${this.heading || "Panel"}</slot>
+          </span>
+          <button class="close-btn" aria-label="Close panel" @click=${this._close}>
+            <span aria-hidden="true">${iconX(18)}</span>
+          </button>
         </div>
         <slot></slot>
       </div>