@f-ewald/components 1.0.0 → 1.0.3

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>

package/dist/slide-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"slide-panel.js","sourceRoot":"","sources":["../src/slide-panel.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,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC;;;;;;;;;;GAUG;AAEI,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QACL,8CAA8C;QACjB,SAAI,GAAG,KAAK,CAAC;QAC1C,2EAA2E;QAC/D,YAAO,GAAG,EAAE,CAAC;IAgH3B,CAAC;aA9GiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuFF;KACF,AA1FqB,CA0FpB;IAEM,MAAM;QACZ,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,aAAa,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IACxF,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;0BACW,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE;;;;cAInC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAA,6BAA6B,IAAI,CAAC,OAAO,SAAS,CAAC,CAAC,CAAC,IAAI;;sEAEpB,IAAI,CAAC,MAAM,IAAI,KAAK,CAAC,EAAE,CAAC;;;;KAIzF,CAAC;IACJ,CAAC;CACF,CAAA;AAlH8B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCAAc;AAE9B;IAAX,QAAQ,EAAE;2CAAc;AAJd,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAoHtB","sourcesContent":["import { LitElement, css, html } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { iconX } from \"./icons.js\";\nimport { tokens } from \"./tokens.js\";\n\n/**\n * Generic sliding panel shell. Handles positioning, open/close animation,\n * header chrome, and a close button. Body content is provided via the\n * default slot; the consumer controls its own padding and overflow.\n *\n * Desktop: 300 px fixed right-side panel that slides from the right.\n * Mobile (≤768px): bottom-sheet drawer (60vh) — reserved for future use.\n *\n * @element slide-panel\n * @fires panel-close - User clicked the close (✕) button.\n */\n@customElement(\"slide-panel\")\nexport class SlidePanel extends LitElement {\n  /** Whether the panel is currently visible. */\n  @property({ type: Boolean }) open = false;\n  /** Title text shown in the panel header (overridable via slot=\"title\"). */\n  @property() heading = \"\";\n\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: block;\n      }\n      .panel {\n        position: fixed;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        width: 300px;\n        z-index: 20;\n        background: var(--ui-surface, #fff);\n        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));\n        transform: translateX(110%);\n        transition: transform 0.25s ease;\n        display: flex;\n        flex-direction: column;\n        overflow: hidden;\n      }\n      .panel.open {\n        transform: translateX(0);\n      }\n      .panel-header {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        padding: 0.5rem 0.625rem;\n        border-bottom: 1px solid var(--ui-border, #e2e8f0);\n        flex: 0 0 auto;\n      }\n      .panel-title {\n        font-weight: 600;\n        font-size: var(--ui-font-size, 0.875rem);\n        font-family: var(--ui-font, ui-sans-serif, system-ui, sans-serif);\n        color: var(--ui-text, #0f172a);\n        flex: 1 1 auto;\n        overflow: hidden;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        padding-right: 0.5rem;\n      }\n      .close-btn {\n        background: none;\n        border: none;\n        cursor: pointer;\n        padding: 0.25rem 0.5rem;\n        color: var(--ui-text-muted, #64748b);\n        border-radius: var(--ui-radius-sm, 0.25rem);\n        flex: 0 0 auto;\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n      }\n      .close-btn:hover {\n        background: var(--ui-surface-muted, #f8fafc);\n      }\n      .handle {\n        display: none;\n      }\n      @media (max-width: 768px) {\n        .panel {\n          top: auto;\n          right: 0;\n          bottom: 0;\n          left: 0;\n          width: auto;\n          height: 60vh;\n          border-radius: 14px 14px 0 0;\n          box-shadow: 0 -3px 20px rgb(0 0 0 / 0.18);\n          transform: translateY(110%);\n        }\n        .panel.open {\n          transform: translateY(0);\n        }\n        .handle {\n          display: block;\n          width: 36px;\n          height: 4px;\n          background: var(--ui-border, #e2e8f0);\n          border-radius: 2px;\n          margin: 10px auto 0;\n          flex: 0 0 auto;\n        }\n        .panel-header {\n          padding: 4px 10px 8px;\n        }\n      }\n    `,\n  ];\n\n  private _close() {\n    this.dispatchEvent(new CustomEvent(\"panel-close\", { bubbles: true, composed: true }));\n  }\n\n  override render() {\n    return html`\n      <div class=\"panel ${this.open ? \"open\" : \"\"}\">\n        <div class=\"handle\"></div>\n        <div class=\"panel-header\">\n          <slot name=\"title\">\n            ${this.heading ? html`<span class=\"panel-title\">${this.heading}</span>` : null}\n          </slot>\n          <button class=\"close-btn\" aria-label=\"Close panel\" @click=${this._close}>${iconX(18)}</button>\n        </div>\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"slide-panel\": SlidePanel;\n  }\n}\n"]}
+{"version":3,"file":"slide-panel.js","sourceRoot":"","sources":["../src/slide-panel.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAuB,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAErF;;;;;;;;;;GAUG;AAEI,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QACL,8CAA8C;QACjB,SAAI,GAAG,KAAK,CAAC;QAC1C,2EAA2E;QAC/D,YAAO,GAAG,EAAE,CAAC;QA2HjB,mBAAc,GAAuB,IAAI,CAAC;QAM1C,qBAAgB,GAAG,CAAC,KAAoB,EAAQ,EAAE;YACxD,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,KAAK,CAAC;gBAAE,OAAO;YACpD,IAAI,CAAC,MAAM,EAAE,CAAC;QAChB,CAAC,CAAC;IAmDJ,CAAC;aArLiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoHF;KACF,AAvHqB,CAuHpB;IAIM,MAAM;QACZ,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,aAAa,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IACxF,CAAC;IAOkB,OAAO,CAAC,OAAuB;QAChD,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC;YAAE,OAAO;QACjC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,aAAa,CAAC,IAAI,CAAC,CAAC;YACpB,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC,aAAmC,CAAC;YACnE,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;YAC1D,IAAI,CAAC,UAAU,EAAE,aAAa,CAAc,YAAY,CAAC,EAAE,KAAK,EAAE,CAAC;YACnE,OAAO;QACT,CAAC;QACD,eAAe,CAAC,IAAI,CAAC,CAAC;QACtB,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;QAC7D,IAAI,IAAI,CAAC,cAAc,EAAE,WAAW;YAAE,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE,CAAC;QAClE,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;IAC7B,CAAC;IAEQ,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;QAC7D,eAAe,CAAC,IAAI,CAAC,CAAC;QACtB,IAAI,IAAI,CAAC,cAAc,EAAE,WAAW;YAAE,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE,CAAC;QAClE,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;QAC3B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IACpB,CAAC;IAEQ,MAAM;QACb,MAAM,aAAa,GAAG,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;QACtD,OAAO,IAAI,CAAA;;uBAEQ,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE;;;qBAGzB,aAAa,IAAI,OAAO;0BACnB,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa;sBAC3C,MAAM,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;iBACvB,CAAC,IAAI,CAAC,IAAI;;;;;iCAKM,IAAI,CAAC,OAAO,IAAI,OAAO;;sEAEc,IAAI,CAAC,MAAM;uCAC1C,KAAK,CAAC,EAAE,CAAC;;;;;KAK3C,CAAC;IACJ,CAAC;CACF,CAAA;AAzL8B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCAAc;AAE9B;IAAX,QAAQ,EAAE;2CAAc;AAJd,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CA2LtB","sourcesContent":["import { LitElement, css, html, nothing, type PropertyValues } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { iconX } from \"./icons.js\";\nimport { tokens } from \"./tokens.js\";\nimport { activateLayer, claimEscape, deactivateLayer } from \"./utils/layer-stack.js\";\n\n/**\n * Generic sliding panel shell. Handles positioning, open/close animation,\n * header chrome, and a close button. Body content is provided via the\n * default slot; the consumer controls its own padding and overflow.\n *\n * Desktop: fixed right-side panel that slides from the right.\n * Mobile (≤48rem): bottom-sheet drawer (60vh) — reserved for future use.\n *\n * @element slide-panel\n * @fires panel-close - User clicked the close (✕) button.\n */\n@customElement(\"slide-panel\")\nexport class SlidePanel extends LitElement {\n  /** Whether the panel is currently visible. */\n  @property({ type: Boolean }) open = false;\n  /** Title text shown in the panel header (overridable via slot=\"title\"). */\n  @property() heading = \"\";\n\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: block;\n      }\n      .panel {\n        position: fixed;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        width: 18.75rem;\n        z-index: var(--component-layer-z, 20);\n        background: var(--ui-surface, #ffffff);\n        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));\n        transform: translateX(110%);\n        transition: transform 250ms ease;\n        display: flex;\n        flex-direction: column;\n        overflow: hidden;\n      }\n      .panel.open {\n        transform: translateX(0);\n      }\n      .panel-header {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        padding: 0.5rem;\n        border-bottom: 1px solid var(--ui-border, #e2e8f0);\n        flex: 0 0 auto;\n      }\n      .panel-title {\n        font-weight: 600;\n        font-size: var(--ui-font-size, 0.875rem);\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        flex: 1 1 auto;\n        overflow: hidden;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        padding-right: 0.5rem;\n      }\n      .close-btn {\n        background: none;\n        border: none;\n        cursor: pointer;\n        padding: 0.25rem 0.5rem;\n        color: var(--ui-text-muted, #64748b);\n        border-radius: var(--ui-radius-sm, 0.25rem);\n        flex: 0 0 auto;\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n      }\n      .close-btn:hover {\n        background: var(--ui-surface-muted, #f8fafc);\n      }\n      .close-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      .handle {\n        display: none;\n      }\n      @media (prefers-reduced-motion: reduce) {\n        .panel {\n          transition: none;\n        }\n      }\n      @media (forced-colors: active) {\n        .close-btn:focus-visible {\n          outline: 2px solid CanvasText;\n          outline-offset: 2px;\n          box-shadow: none;\n        }\n      }\n      @media (max-width: 48rem) {\n        .panel {\n          top: auto;\n          right: 0;\n          bottom: 0;\n          left: 0;\n          width: auto;\n          height: 60vh;\n          border-radius: var(--ui-radius, 0.5rem) var(--ui-radius, 0.5rem) 0 0;\n          box-shadow: var(\n            --ui-shadow-lg,\n            0 20px 25px -5px rgb(0 0 0 / 0.1),\n            0 8px 10px -6px rgb(0 0 0 / 0.1)\n          );\n          transform: translateY(110%);\n        }\n        .panel.open {\n          transform: translateY(0);\n        }\n        .handle {\n          display: block;\n          width: 2.25rem;\n          height: 0.25rem;\n          background: var(--ui-border, #e2e8f0);\n          border-radius: 9999px;\n          margin: 0.5rem auto 0;\n          flex: 0 0 auto;\n        }\n        .panel-header {\n          padding: 0.25rem 0.5rem 0.5rem;\n        }\n      }\n    `,\n  ];\n\n  private _previousFocus: HTMLElement | null = null;\n\n  private _close() {\n    this.dispatchEvent(new CustomEvent(\"panel-close\", { bubbles: true, composed: true }));\n  }\n\n  private _onWindowKeydown = (event: KeyboardEvent): void => {\n    if (!this.open || !claimEscape(this, event)) return;\n    this._close();\n  };\n\n  protected override updated(changed: PropertyValues): void {\n    if (!changed.has(\"open\")) return;\n    if (this.open) {\n      activateLayer(this);\n      this._previousFocus = document.activeElement as HTMLElement | null;\n      window.addEventListener(\"keydown\", this._onWindowKeydown);\n      this.shadowRoot?.querySelector<HTMLElement>(\".close-btn\")?.focus();\n      return;\n    }\n    deactivateLayer(this);\n    window.removeEventListener(\"keydown\", this._onWindowKeydown);\n    if (this._previousFocus?.isConnected) this._previousFocus.focus();\n    this._previousFocus = null;\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    window.removeEventListener(\"keydown\", this._onWindowKeydown);\n    deactivateLayer(this);\n    if (this._previousFocus?.isConnected) this._previousFocus.focus();\n    this._previousFocus = null;\n    this.open = false;\n  }\n\n  override render() {\n    const explicitLabel = this.getAttribute(\"aria-label\");\n    return html`\n      <div\n        class=\"panel ${this.open ? \"open\" : \"\"}\"\n        role=\"dialog\"\n        aria-modal=\"false\"\n        aria-label=${explicitLabel ?? nothing}\n        aria-labelledby=${explicitLabel ? nothing : \"panel-title\"}\n        aria-hidden=${String(!this.open)}\n        ?inert=${!this.open}\n      >\n        <div class=\"handle\" aria-hidden=\"true\"></div>\n        <div class=\"panel-header\">\n          <span id=\"panel-title\" class=\"panel-title\">\n            <slot name=\"title\">${this.heading || \"Panel\"}</slot>\n          </span>\n          <button class=\"close-btn\" aria-label=\"Close panel\" @click=${this._close}>\n            <span aria-hidden=\"true\">${iconX(18)}</span>\n          </button>\n        </div>\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"slide-panel\": SlidePanel;\n  }\n}\n"]}

package/dist/stat-meter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stat-meter.d.ts","sourceRoot":"","sources":["../src/stat-meter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C;;;;;;;GAOG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,4BAmDpB;IAEF,6DAA6D;IACjD,KAAK,SAAM;IAEvB,qFAAqF;IACzD,OAAO,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE1D,mEAAmE;IACvD,KAAK,SAAM;IAEd,MAAM,yCAWd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}
+{"version":3,"file":"stat-meter.d.ts","sourceRoot":"","sources":["../src/stat-meter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C;;;;;;;GAOG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,4BA6DpB;IAEF,6DAA6D;IACjD,KAAK,SAAM;IAEvB,qFAAqF;IACzD,OAAO,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE1D,mEAAmE;IACvD,KAAK,SAAM;IAEd,MAAM,yCAWd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

package/dist/stat-meter.js

@@ -31,7 +31,7 @@ let StatMeter = class StatMeter extends LitElement {
       :host {
         display: inline-flex;
         align-items: center;
-        gap: 8px;
+        gap: 0.5rem;
         font-family: var(
           --ui-font,
           ui-sans-serif,
@@ -53,9 +53,9 @@ let StatMeter = class StatMeter extends LitElement {
 
       .track {
         display: block;
-        width: 64px;
-        height: 6px;
-        border-radius: 3px;
+        width: 4rem;
+        height: 0.375rem;
+        border-radius: 9999px;
         background: var(--ui-surface-muted, #f8fafc);
         overflow: hidden;
       }
@@ -63,18 +63,28 @@ let StatMeter = class StatMeter extends LitElement {
       .fill {
         display: block;
         height: 100%;
-        background: var(--fill-color, var(--ui-success, #16a34a));
-        transition: width 0.3s ease;
+        /* Keep the top highlight while softening the dark edge for compact meters. */
+        background: linear-gradient(
+          to bottom,
+          color-mix(in srgb, var(--fill-color, var(--ui-success, #16a34a)) 70%, #ffffff) 0%,
+          color-mix(in srgb, var(--fill-color, var(--ui-success, #16a34a)) 80%, #000000) 100%
+        );
+        transition: width 200ms ease;
       }
 
       .value {
-        min-width: 32px;
+        min-width: 2rem;
         font-size: var(--ui-font-size-sm, 0.75rem);
         font-weight: 500;
         color: var(--ui-text, #0f172a);
         font-variant-numeric: tabular-nums;
         text-align: right;
       }
+      @media (prefers-reduced-motion: reduce) {
+        .fill {
+          transition: none;
+        }
+      }
     `,
     ]; }
     render() {

package/dist/stat-meter.js.map

@@ -1 +1 @@
-{"version":3,"file":"stat-meter.js","sourceRoot":"","sources":["../src/stat-meter.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;;;;;;;GAOG;AAEI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAsDL,6DAA6D;QACjD,UAAK,GAAG,EAAE,CAAC;QAEvB,qFAAqF;QACzD,YAAO,GAAkB,IAAI,CAAC;QAE1D,mEAAmE;QACvD,UAAK,GAAG,EAAE,CAAC;IAczB,CAAC;aA1EiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgDF;KACF,AAnDqB,CAmDpB;IAWO,MAAM;QACb,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC;QACzB,MAAM,OAAO,GAAG,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC;QACnE,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,UAAU,OAAO,oBAAoB,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,UAAU,OAAO,GAAG,CAAC;QACxG,OAAO,IAAI,CAAA;4BACa,IAAI,CAAC,KAAK;mDACa,IAAI,CAAC,KAAK,IAAI,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG;mCACrE,SAAS;;4BAEhB,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG;KACrD,CAAC;IACJ,CAAC;CACF,CAAA;AApBa;IAAX,QAAQ,EAAE;wCAAY;AAGK;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAA+B;AAG9C;IAAX,QAAQ,EAAE;wCAAY;AA7DZ,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CA2ErB","sourcesContent":["import { LitElement, css, html } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { tokens } from \"./tokens.js\";\n\n/**\n * A compact labeled meter for a single percentage reading — e.g. CPU or\n * memory usage in a dashboard header. `percent` may be `null` when no\n * reading is available yet (e.g. the first tick of a polling metric); the\n * bar then renders empty and the value shows an em dash instead of \"0%\".\n *\n * @element stat-meter\n */\n@customElement(\"stat-meter\")\nexport class StatMeter extends LitElement {\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: inline-flex;\n        align-items: center;\n        gap: 8px;\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      }\n\n      .label {\n        font-size: var(--ui-font-size-sm, 0.75rem);\n        font-weight: 600;\n        letter-spacing: 0.04em;\n        color: var(--ui-text-muted, #64748b);\n      }\n\n      .track {\n        display: block;\n        width: 64px;\n        height: 6px;\n        border-radius: 3px;\n        background: var(--ui-surface-muted, #f8fafc);\n        overflow: hidden;\n      }\n\n      .fill {\n        display: block;\n        height: 100%;\n        background: var(--fill-color, var(--ui-success, #16a34a));\n        transition: width 0.3s ease;\n      }\n\n      .value {\n        min-width: 32px;\n        font-size: var(--ui-font-size-sm, 0.75rem);\n        font-weight: 500;\n        color: var(--ui-text, #0f172a);\n        font-variant-numeric: tabular-nums;\n        text-align: right;\n      }\n    `,\n  ];\n\n  /** Short label shown before the bar, e.g. \"CPU\" or \"MEM\". */\n  @property() label = \"\";\n\n  /** Percentage 0-100. `null` renders an empty bar and a \"—\" value instead of \"0%\". */\n  @property({ type: Number }) percent: number | null = null;\n\n  /** Fill color override; falls back to the `--ui-success` token. */\n  @property() color = \"\";\n\n  override render() {\n    const pct = this.percent;\n    const clamped = pct === null ? 0 : Math.min(100, Math.max(0, pct));\n    const fillStyle = this.color ? `width: ${clamped}%; --fill-color: ${this.color}` : `width: ${clamped}%`;\n    return html`\n      <span class=\"label\">${this.label}</span>\n      <span class=\"track\" role=\"img\" aria-label=\"${this.label} ${pct === null ? \"no reading\" : `${pct}%`}\">\n        <span class=\"fill\" style=${fillStyle}></span>\n      </span>\n      <span class=\"value\">${pct === null ? \"—\" : `${pct}%`}</span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"stat-meter\": StatMeter;\n  }\n}\n"]}
+{"version":3,"file":"stat-meter.js","sourceRoot":"","sources":["../src/stat-meter.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;;;;;;;GAOG;AAEI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAgEL,6DAA6D;QACjD,UAAK,GAAG,EAAE,CAAC;QAEvB,qFAAqF;QACzD,YAAO,GAAkB,IAAI,CAAC;QAE1D,mEAAmE;QACvD,UAAK,GAAG,EAAE,CAAC;IAczB,CAAC;aApFiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0DF;KACF,AA7DqB,CA6DpB;IAWO,MAAM;QACb,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC;QACzB,MAAM,OAAO,GAAG,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC;QACnE,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,UAAU,OAAO,oBAAoB,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,UAAU,OAAO,GAAG,CAAC;QACxG,OAAO,IAAI,CAAA;4BACa,IAAI,CAAC,KAAK;mDACa,IAAI,CAAC,KAAK,IAAI,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG;mCACrE,SAAS;;4BAEhB,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG;KACrD,CAAC;IACJ,CAAC;CACF,CAAA;AApBa;IAAX,QAAQ,EAAE;wCAAY;AAGK;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAA+B;AAG9C;IAAX,QAAQ,EAAE;wCAAY;AAvEZ,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAqFrB","sourcesContent":["import { LitElement, css, html } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { tokens } from \"./tokens.js\";\n\n/**\n * A compact labeled meter for a single percentage reading — e.g. CPU or\n * memory usage in a dashboard header. `percent` may be `null` when no\n * reading is available yet (e.g. the first tick of a polling metric); the\n * bar then renders empty and the value shows an em dash instead of \"0%\".\n *\n * @element stat-meter\n */\n@customElement(\"stat-meter\")\nexport class StatMeter extends LitElement {\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: inline-flex;\n        align-items: center;\n        gap: 0.5rem;\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      }\n\n      .label {\n        font-size: var(--ui-font-size-sm, 0.75rem);\n        font-weight: 600;\n        letter-spacing: 0.04em;\n        color: var(--ui-text-muted, #64748b);\n      }\n\n      .track {\n        display: block;\n        width: 4rem;\n        height: 0.375rem;\n        border-radius: 9999px;\n        background: var(--ui-surface-muted, #f8fafc);\n        overflow: hidden;\n      }\n\n      .fill {\n        display: block;\n        height: 100%;\n        /* Keep the top highlight while softening the dark edge for compact meters. */\n        background: linear-gradient(\n          to bottom,\n          color-mix(in srgb, var(--fill-color, var(--ui-success, #16a34a)) 70%, #ffffff) 0%,\n          color-mix(in srgb, var(--fill-color, var(--ui-success, #16a34a)) 80%, #000000) 100%\n        );\n        transition: width 200ms ease;\n      }\n\n      .value {\n        min-width: 2rem;\n        font-size: var(--ui-font-size-sm, 0.75rem);\n        font-weight: 500;\n        color: var(--ui-text, #0f172a);\n        font-variant-numeric: tabular-nums;\n        text-align: right;\n      }\n      @media (prefers-reduced-motion: reduce) {\n        .fill {\n          transition: none;\n        }\n      }\n    `,\n  ];\n\n  /** Short label shown before the bar, e.g. \"CPU\" or \"MEM\". */\n  @property() label = \"\";\n\n  /** Percentage 0-100. `null` renders an empty bar and a \"—\" value instead of \"0%\". */\n  @property({ type: Number }) percent: number | null = null;\n\n  /** Fill color override; falls back to the `--ui-success` token. */\n  @property() color = \"\";\n\n  override render() {\n    const pct = this.percent;\n    const clamped = pct === null ? 0 : Math.min(100, Math.max(0, pct));\n    const fillStyle = this.color ? `width: ${clamped}%; --fill-color: ${this.color}` : `width: ${clamped}%`;\n    return html`\n      <span class=\"label\">${this.label}</span>\n      <span class=\"track\" role=\"img\" aria-label=\"${this.label} ${pct === null ? \"no reading\" : `${pct}%`}\">\n        <span class=\"fill\" style=${fillStyle}></span>\n      </span>\n      <span class=\"value\">${pct === null ? \"—\" : `${pct}%`}</span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"stat-meter\": StatMeter;\n  }\n}\n"]}

package/dist/status-pill.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"status-pill.d.ts","sourceRoot":"","sources":["../src/status-pill.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAKrD,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAEhG;;;;;GAKG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,4BAmDpB;IAEF,kCAAkC;IACtB,KAAK,SAAM;IACvB,qBAAqB;IACT,KAAK,EAAE,eAAe,CAAa;IAC/C,sDAAsD;IACzB,OAAO,UAAS;IAEpC,MAAM,yCAOd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
+{"version":3,"file":"status-pill.d.ts","sourceRoot":"","sources":["../src/status-pill.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAKrD,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAEhG;;;;;GAKG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,4BAiEpB;IAEF,kCAAkC;IACtB,KAAK,SAAM;IACvB,qBAAqB;IACT,KAAK,EAAE,eAAe,CAAa;IAC/C,sDAAsD;IACzB,OAAO,UAAS;IAEpC,MAAM,yCAOd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/dist/status-pill.js

@@ -33,21 +33,30 @@ let StatusPill = class StatusPill extends LitElement {
       .pill {
         display: inline-flex;
         align-items: center;
-        gap: 0.3rem;
-        border-radius: 999px;
-        padding: 0.15rem 0.55rem;
-        font-size: 0.75rem;
+        gap: 0.25rem;
+        border-radius: 9999px;
+        padding: 0.25rem 0.5rem;
+        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"
+        );
         white-space: nowrap;
       }
       .pill.neutral {
-        background: color-mix(in srgb, var(--ui-text-muted, #71717a) 15%, transparent);
-        color: var(--ui-text-muted, #71717a);
+        background: color-mix(in srgb, var(--ui-text-muted, #64748b) 15%, transparent);
+        color: var(--ui-text-muted, #64748b);
       }
       .pill.info {
-        background: color-mix(in srgb, #0ea5e9 15%, transparent);
-        color: #0ea5e9;
+        background: color-mix(in srgb, var(--ui-info, #0ea5e9) 15%, transparent);
+        color: var(--ui-info, #0ea5e9);
       }
       .pill.primary {
         background: color-mix(in srgb, var(--ui-primary, #4f46e5) 15%, transparent);
@@ -58,8 +67,8 @@ let StatusPill = class StatusPill extends LitElement {
         color: var(--ui-success, #16a34a);
       }
       .pill.warning {
-        background: color-mix(in srgb, #d97706 15%, transparent);
-        color: #d97706;
+        background: color-mix(in srgb, var(--ui-warning, #d97706) 15%, transparent);
+        color: var(--ui-warning, #d97706);
       }
       .pill.danger {
         background: color-mix(in srgb, var(--ui-danger, #dc2626) 15%, transparent);
@@ -74,12 +83,17 @@ let StatusPill = class StatusPill extends LitElement {
           transform: rotate(360deg);
         }
       }
+      @media (prefers-reduced-motion: reduce) {
+        .spin {
+          animation: none;
+        }
+      }
     `,
     ]; }
     render() {
         return html `
       <span class="pill ${this.color}">
-        ${this.spinner ? html `<span class="spin">${iconArrowPath(11)}</span>` : nothing}
+        ${this.spinner ? html `<span class="spin" aria-hidden="true">${iconArrowPath(11)}</span>` : nothing}
         ${this.label}
       </span>
     `;

package/dist/status-pill.js.map

@@ -1 +1 @@
-{"version":3,"file":"status-pill.js","sourceRoot":"","sources":["../src/status-pill.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,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAIrC;;;;;GAKG;AAEI,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QAsDL,kCAAkC;QACtB,UAAK,GAAG,EAAE,CAAC;QACvB,qBAAqB;QACT,UAAK,GAAoB,SAAS,CAAC;QAC/C,sDAAsD;QACzB,YAAO,GAAG,KAAK,CAAC;IAU/C,CAAC;aApEiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgDF;KACF,AAnDqB,CAmDpB;IASO,MAAM;QACb,OAAO,IAAI,CAAA;0BACW,IAAI,CAAC,KAAK;UAC1B,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAA,sBAAsB,aAAa,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO;UAC7E,IAAI,CAAC,KAAK;;KAEf,CAAC;IACJ,CAAC;CACF,CAAA;AAda;IAAX,QAAQ,EAAE;yCAAY;AAEX;IAAX,QAAQ,EAAE;yCAAoC;AAElB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2CAAiB;AA3DlC,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAqEtB","sourcesContent":["import { LitElement, css, html, nothing } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { iconArrowPath } from \"./icons.js\";\nimport { tokens } from \"./tokens.js\";\n\nexport type StatusPillColor = \"neutral\" | \"info\" | \"primary\" | \"success\" | \"warning\" | \"danger\";\n\n/**\n * Small colored status pill, optionally with a spinning icon — for task/run\n * states (\"Open\", \"Blocked\", \"Done\") and live-activity indicators (\"Running\").\n *\n * @element status-pill\n */\n@customElement(\"status-pill\")\nexport class StatusPill extends LitElement {\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: inline-flex;\n      }\n      .pill {\n        display: inline-flex;\n        align-items: center;\n        gap: 0.3rem;\n        border-radius: 999px;\n        padding: 0.15rem 0.55rem;\n        font-size: 0.75rem;\n        font-weight: 500;\n        font-family: var(--ui-font, ui-sans-serif, system-ui, sans-serif);\n        white-space: nowrap;\n      }\n      .pill.neutral {\n        background: color-mix(in srgb, var(--ui-text-muted, #71717a) 15%, transparent);\n        color: var(--ui-text-muted, #71717a);\n      }\n      .pill.info {\n        background: color-mix(in srgb, #0ea5e9 15%, transparent);\n        color: #0ea5e9;\n      }\n      .pill.primary {\n        background: color-mix(in srgb, var(--ui-primary, #4f46e5) 15%, transparent);\n        color: var(--ui-primary, #4f46e5);\n      }\n      .pill.success {\n        background: color-mix(in srgb, var(--ui-success, #16a34a) 15%, transparent);\n        color: var(--ui-success, #16a34a);\n      }\n      .pill.warning {\n        background: color-mix(in srgb, #d97706 15%, transparent);\n        color: #d97706;\n      }\n      .pill.danger {\n        background: color-mix(in srgb, var(--ui-danger, #dc2626) 15%, transparent);\n        color: var(--ui-danger, #dc2626);\n      }\n      .spin {\n        display: inline-flex;\n        animation: spin 0.8s linear infinite;\n      }\n      @keyframes spin {\n        to {\n          transform: rotate(360deg);\n        }\n      }\n    `,\n  ];\n\n  /** Text shown inside the pill. */\n  @property() label = \"\";\n  /** Color variant. */\n  @property() color: StatusPillColor = \"neutral\";\n  /** Renders a small spinning icon before the label. */\n  @property({ type: Boolean }) spinner = false;\n\n  override render() {\n    return html`\n      <span class=\"pill ${this.color}\">\n        ${this.spinner ? html`<span class=\"spin\">${iconArrowPath(11)}</span>` : nothing}\n        ${this.label}\n      </span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"status-pill\": StatusPill;\n  }\n}\n"]}
+{"version":3,"file":"status-pill.js","sourceRoot":"","sources":["../src/status-pill.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,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAIrC;;;;;GAKG;AAEI,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QAoEL,kCAAkC;QACtB,UAAK,GAAG,EAAE,CAAC;QACvB,qBAAqB;QACT,UAAK,GAAoB,SAAS,CAAC;QAC/C,sDAAsD;QACzB,YAAO,GAAG,KAAK,CAAC;IAU/C,CAAC;aAlFiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8DF;KACF,AAjEqB,CAiEpB;IASO,MAAM;QACb,OAAO,IAAI,CAAA;0BACW,IAAI,CAAC,KAAK;UAC1B,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAA,yCAAyC,aAAa,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO;UAChG,IAAI,CAAC,KAAK;;KAEf,CAAC;IACJ,CAAC;CACF,CAAA;AAda;IAAX,QAAQ,EAAE;yCAAY;AAEX;IAAX,QAAQ,EAAE;yCAAoC;AAElB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2CAAiB;AAzElC,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAmFtB","sourcesContent":["import { LitElement, css, html, nothing } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { iconArrowPath } from \"./icons.js\";\nimport { tokens } from \"./tokens.js\";\n\nexport type StatusPillColor = \"neutral\" | \"info\" | \"primary\" | \"success\" | \"warning\" | \"danger\";\n\n/**\n * Small colored status pill, optionally with a spinning icon — for task/run\n * states (\"Open\", \"Blocked\", \"Done\") and live-activity indicators (\"Running\").\n *\n * @element status-pill\n */\n@customElement(\"status-pill\")\nexport class StatusPill extends LitElement {\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: inline-flex;\n      }\n      .pill {\n        display: inline-flex;\n        align-items: center;\n        gap: 0.25rem;\n        border-radius: 9999px;\n        padding: 0.25rem 0.5rem;\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        white-space: nowrap;\n      }\n      .pill.neutral {\n        background: color-mix(in srgb, var(--ui-text-muted, #64748b) 15%, transparent);\n        color: var(--ui-text-muted, #64748b);\n      }\n      .pill.info {\n        background: color-mix(in srgb, var(--ui-info, #0ea5e9) 15%, transparent);\n        color: var(--ui-info, #0ea5e9);\n      }\n      .pill.primary {\n        background: color-mix(in srgb, var(--ui-primary, #4f46e5) 15%, transparent);\n        color: var(--ui-primary, #4f46e5);\n      }\n      .pill.success {\n        background: color-mix(in srgb, var(--ui-success, #16a34a) 15%, transparent);\n        color: var(--ui-success, #16a34a);\n      }\n      .pill.warning {\n        background: color-mix(in srgb, var(--ui-warning, #d97706) 15%, transparent);\n        color: var(--ui-warning, #d97706);\n      }\n      .pill.danger {\n        background: color-mix(in srgb, var(--ui-danger, #dc2626) 15%, transparent);\n        color: var(--ui-danger, #dc2626);\n      }\n      .spin {\n        display: inline-flex;\n        animation: spin 0.8s linear infinite;\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    `,\n  ];\n\n  /** Text shown inside the pill. */\n  @property() label = \"\";\n  /** Color variant. */\n  @property() color: StatusPillColor = \"neutral\";\n  /** Renders a small spinning icon before the label. */\n  @property({ type: Boolean }) spinner = false;\n\n  override render() {\n    return html`\n      <span class=\"pill ${this.color}\">\n        ${this.spinner ? html`<span class=\"spin\" aria-hidden=\"true\">${iconArrowPath(11)}</span>` : nothing}\n        ${this.label}\n      </span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"status-pill\": StatusPill;\n  }\n}\n"]}

package/dist/tile-grid.d.ts

@@ -9,6 +9,12 @@ import { LitElement } from "lit";
  * `location.hash`), without hijacking clicks on nested interactive elements
  * (links/buttons) a tile's rendered content might contain.
  *
+ * Optional `fileIcon` prefixes each tile with a decorative Heroicons
+ * "document" glyph, for grids whose items represent files — the icon never
+ * carries its own accessible name since the rendered tile content (e.g. a
+ * filename) already identifies the item. Off by default, so it consumes no
+ * layout space or markup for grids of non-file items.
+ *
  * @element tile-grid
  */
 export declare class TileGrid extends LitElement {
@@ -22,6 +28,8 @@ export declare class TileGrid extends LitElement {
     renderTile: (item: unknown) => unknown;
     /** When set, clicking a tile (outside any nested link/button) navigates to this hash. */
     itemHref: ((item: unknown) => string | null) | null;
+    /** Prefixes each tile with a decorative "document" icon, for grids of file-like items. Off by default. */
+    fileIcon: boolean;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/dist/tile-grid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tile-grid.d.ts","sourceRoot":"","sources":["../src/tile-grid.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAK5C;;;;;;;;;;;GAWG;AACH,qBACa,QAAS,SAAQ,UAAU;;IACtC,OAAgB,MAAM,4BA0BpB;IAEF,iFAAiF;IACjD,KAAK,EAAE,OAAO,EAAE,CAAM;IACtD,sGAAsG;IACtE,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,CAG/E;IACX,yEAAyE;IACzC,UAAU,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,OAAO,CAA0B;IAChG,yFAAyF;IACzD,QAAQ,EAAE,CAAC,CAAC,IAAI,EAAE,OAAO,KAAK,MAAM,GAAG,IAAI,CAAC,GAAG,IAAI,CAAQ;IASlF,MAAM,yCAiBd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
+{"version":3,"file":"tile-grid.d.ts","sourceRoot":"","sources":["../src/tile-grid.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAMrD;;;;;;;;;;;;;;;;;GAiBG;AACH,qBACa,QAAS,SAAQ,UAAU;;IACtC,OAAgB,MAAM,4BA6DpB;IAEF,iFAAiF;IACjD,KAAK,EAAE,OAAO,EAAE,CAAM;IACtD,sGAAsG;IACtE,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,CAG/E;IACX,yEAAyE;IACzC,UAAU,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,OAAO,CAA0B;IAChG,yFAAyF;IACzD,QAAQ,EAAE,CAAC,CAAC,IAAI,EAAE,OAAO,KAAK,MAAM,GAAG,IAAI,CAAC,GAAG,IAAI,CAAQ;IAC3F,0GAA0G;IACrD,QAAQ,UAAS;IAyB7D,MAAM,yCA8Bd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}