@f-ewald/components 0.7.0 → 1.0.2

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;
+        /* Match map-circle's 30% white/black vertical depth while preserving token/color overrides. */
+        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)) 70%, #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        /* Match map-circle's 30% white/black vertical depth while preserving token/color overrides. */\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)) 70%, #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"}

package/dist/tile-grid.js

@@ -4,9 +4,10 @@ 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 { repeat } from "lit/directives/repeat.js";
+import { iconDocument } from "./icons.js";
 import { tokens } from "./tokens.js";
 /**
  * A generic, presentational grid shell: renders one bordered card per entry
@@ -18,6 +19,12 @@ import { tokens } from "./tokens.js";
  * `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
  */
 let TileGrid = class TileGrid extends LitElement {
@@ -31,18 +38,29 @@ let TileGrid = class TileGrid extends LitElement {
         this.renderTile = (item) => String(item);
         /** When set, clicking a tile (outside any nested link/button) navigates to this hash. */
         this.itemHref = null;
+        /** Prefixes each tile with a decorative "document" icon, for grids of file-like items. Off by default. */
+        this.fileIcon = false;
     }
     static { this.styles = [
         tokens,
         css `
       :host {
         display: block;
-        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);
       }
       .grid {
         display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+        grid-template-columns: repeat(auto-fill, minmax(8.75rem, 1fr));
         gap: 0.75rem;
       }
       .tile {
@@ -57,28 +75,83 @@ let TileGrid = class TileGrid extends LitElement {
       .tile.clickable:hover {
         background: var(--ui-surface-muted, #f8fafc);
       }
+      .tile.clickable:focus-visible {
+        outline: none;
+        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));
+      }
+      .tile-body {
+        display: flex;
+        align-items: flex-start;
+        gap: 0.5rem;
+      }
+      .tile-icon {
+        display: inline-flex;
+        flex-shrink: 0;
+        margin-top: 0.125rem;
+        color: var(--ui-text-muted, #64748b);
+      }
+      .tile-content {
+        min-width: 0;
+        flex: 1;
+      }
+      @media (forced-colors: active) {
+        .tile.clickable:focus-visible {
+          outline: 2px solid CanvasText;
+          outline-offset: 2px;
+          box-shadow: none;
+        }
+      }
     `,
     ]; }
     #onTileClick(item, e) {
         if (!this.itemHref)
             return;
-        if (e.target.closest("a, button"))
+        if (this.#isNestedInteractive(e.composedPath(), e.currentTarget))
             return;
         const href = this.itemHref(item);
         if (href)
             location.hash = href;
     }
+    #onTileKeydown(href, e) {
+        if (e.key !== "Enter" || e.target !== e.currentTarget)
+            return;
+        e.preventDefault();
+        location.hash = href;
+    }
+    #isNestedInteractive(path, tile) {
+        const selector = "a, button, input, select, textarea, summary, [contenteditable], [role='button'], [role='link'], [tabindex]";
+        for (const target of path) {
+            if (target === tile)
+                return false;
+            if (target instanceof HTMLElement && target.matches(selector))
+                return true;
+        }
+        return false;
+    }
     render() {
         return html `
       <div class="grid">
-        ${repeat(this.items, (item, i) => this.itemKey(item, i), (item) => html `
-            <div
-              class=${this.itemHref ? "tile clickable" : "tile"}
-              @click=${(e) => this.#onTileClick(item, e)}
-            >
-              ${this.renderTile(item)}
-            </div>
-          `)}
+        ${repeat(this.items, (item, i) => this.itemKey(item, i), (item) => {
+            const href = this.itemHref?.(item) ?? null;
+            return html `
+              <div
+                class=${href ? "tile clickable" : "tile"}
+                role=${href ? "link" : nothing}
+                tabindex=${href ? "0" : nothing}
+                @click=${(e) => this.#onTileClick(item, e)}
+                @keydown=${href ? (e) => this.#onTileKeydown(href, e) : nothing}
+              >
+                ${this.fileIcon
+                ? html `
+                      <div class="tile-body">
+                        <span class="tile-icon" aria-hidden="true">${iconDocument(16)}</span>
+                        <div class="tile-content">${this.renderTile(item)}</div>
+                      </div>
+                    `
+                : this.renderTile(item)}
+              </div>
+            `;
+        })}
       </div>
     `;
     }
@@ -95,6 +168,9 @@ __decorate([
 __decorate([
     property({ attribute: false })
 ], TileGrid.prototype, "itemHref", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "file-icon" })
+], TileGrid.prototype, "fileIcon", void 0);
 TileGrid = __decorate([
     customElement("tile-grid")
 ], TileGrid);

package/dist/tile-grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"tile-grid.js","sourceRoot":"","sources":["../src/tile-grid.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;AAErC;;;;;;;;;;;GAWG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QA6BL,iFAAiF;QACjD,UAAK,GAAc,EAAE,CAAC;QACtD,sGAAsG;QACtE,YAAO,GAAsD,CAC3F,KAAK,EACL,KAAK,EACL,EAAE,CAAC,KAAK,CAAC;QACX,yEAAyE;QACzC,eAAU,GAA+B,CAAC,IAAI,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QAChG,yFAAyF;QACzD,aAAQ,GAA8C,IAAI,CAAC;IA2B7F,CAAC;aAjEiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;KAuBF;KACF,AA1BqB,CA0BpB;IAcF,YAAY,CAAC,IAAa,EAAE,CAAa;QACvC,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC3B,IAAK,CAAC,CAAC,MAAsB,CAAC,OAAO,CAAC,WAAW,CAAC;YAAE,OAAO;QAC3D,MAAM,IAAI,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;QACjC,IAAI,IAAI;YAAE,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAC;IACjC,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;;UAEL,MAAM,CACN,IAAI,CAAC,KAAK,EACV,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC,CAAC,EAClC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;sBAEF,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,MAAM;uBACxC,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC,CAAC;;gBAEpD,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;;WAE1B,CACF;;KAEJ,CAAC;IACJ,CAAC;CACF,CAAA;AApCiC;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;uCAAuB;AAEtB;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;yCAGpB;AAEqB;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;4CAAiE;AAEhE;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;0CAA4D;AAvChF,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAkEpB","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\n/**\n * A generic, presentational grid shell: renders one bordered card per entry\n * in `items`, with each tile's content produced by `renderTile` (default:\n * stringify). Knows nothing about what an \"item\" means — callers own the\n * data shape entirely. Modeled directly on `data-table`'s headless pattern.\n *\n * Optional `itemHref` makes whole tiles clickable (navigating via\n * `location.hash`), without hijacking clicks on nested interactive elements\n * (links/buttons) a tile's rendered content might contain.\n *\n * @element tile-grid\n */\n@customElement(\"tile-grid\")\nexport class TileGrid extends LitElement {\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: block;\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      .grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));\n        gap: 0.75rem;\n      }\n      .tile {\n        border: 1px solid var(--ui-border, #e2e8f0);\n        border-radius: var(--ui-radius, 0.5rem);\n        padding: 0.75rem;\n        color: var(--ui-text, #0f172a);\n      }\n      .tile.clickable {\n        cursor: pointer;\n      }\n      .tile.clickable:hover {\n        background: var(--ui-surface-muted, #f8fafc);\n      }\n    `,\n  ];\n\n  /** Tile data; opaque to this component beyond what `renderTile` does with it. */\n  @property({ attribute: false }) items: unknown[] = [];\n  /** Stable identity for `items[i]`, used as the repeat-directive key. Defaults to the item's index. */\n  @property({ attribute: false }) itemKey: (item: unknown, index: number) => string | number = (\n    _item,\n    index,\n  ) => index;\n  /** Produces a tile's rendered content for `item`. Default: stringify. */\n  @property({ attribute: false }) renderTile: (item: unknown) => unknown = (item) => String(item);\n  /** When set, clicking a tile (outside any nested link/button) navigates to this hash. */\n  @property({ attribute: false }) itemHref: ((item: unknown) => string | null) | null = null;\n\n  #onTileClick(item: unknown, e: MouseEvent): void {\n    if (!this.itemHref) return;\n    if ((e.target as HTMLElement).closest(\"a, button\")) return;\n    const href = this.itemHref(item);\n    if (href) location.hash = href;\n  }\n\n  override render() {\n    return html`\n      <div class=\"grid\">\n        ${repeat(\n          this.items,\n          (item, i) => this.itemKey(item, i),\n          (item) => html`\n            <div\n              class=${this.itemHref ? \"tile clickable\" : \"tile\"}\n              @click=${(e: MouseEvent) => this.#onTileClick(item, e)}\n            >\n              ${this.renderTile(item)}\n            </div>\n          `,\n        )}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"tile-grid\": TileGrid;\n  }\n}\n"]}
+{"version":3,"file":"tile-grid.js","sourceRoot":"","sources":["../src/tile-grid.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, css, html, nothing } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { repeat } from \"lit/directives/repeat.js\";\nimport { iconDocument } from \"./icons.js\";\nimport { tokens } from \"./tokens.js\";\n\n/**\n * A generic, presentational grid shell: renders one bordered card per entry\n * in `items`, with each tile's content produced by `renderTile` (default:\n * stringify). Knows nothing about what an \"item\" means — callers own the\n * data shape entirely. Modeled directly on `data-table`'s headless pattern.\n *\n * Optional `itemHref` makes whole tiles clickable (navigating via\n * `location.hash`), without hijacking clicks on nested interactive elements\n * (links/buttons) a tile's rendered content might contain.\n *\n * Optional `fileIcon` prefixes each tile with a decorative Heroicons\n * \"document\" glyph, for grids whose items represent files — the icon never\n * carries its own accessible name since the rendered tile content (e.g. a\n * filename) already identifies the item. Off by default, so it consumes no\n * layout space or markup for grids of non-file items.\n *\n * @element tile-grid\n */\n@customElement(\"tile-grid\")\nexport class TileGrid extends LitElement {\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: block;\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      .grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fill, minmax(8.75rem, 1fr));\n        gap: 0.75rem;\n      }\n      .tile {\n        border: 1px solid var(--ui-border, #e2e8f0);\n        border-radius: var(--ui-radius, 0.5rem);\n        padding: 0.75rem;\n        color: var(--ui-text, #0f172a);\n      }\n      .tile.clickable {\n        cursor: pointer;\n      }\n      .tile.clickable:hover {\n        background: var(--ui-surface-muted, #f8fafc);\n      }\n      .tile.clickable:focus-visible {\n        outline: none;\n        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));\n      }\n      .tile-body {\n        display: flex;\n        align-items: flex-start;\n        gap: 0.5rem;\n      }\n      .tile-icon {\n        display: inline-flex;\n        flex-shrink: 0;\n        margin-top: 0.125rem;\n        color: var(--ui-text-muted, #64748b);\n      }\n      .tile-content {\n        min-width: 0;\n        flex: 1;\n      }\n      @media (forced-colors: active) {\n        .tile.clickable:focus-visible {\n          outline: 2px solid CanvasText;\n          outline-offset: 2px;\n          box-shadow: none;\n        }\n      }\n    `,\n  ];\n\n  /** Tile data; opaque to this component beyond what `renderTile` does with it. */\n  @property({ attribute: false }) items: unknown[] = [];\n  /** Stable identity for `items[i]`, used as the repeat-directive key. Defaults to the item's index. */\n  @property({ attribute: false }) itemKey: (item: unknown, index: number) => string | number = (\n    _item,\n    index,\n  ) => index;\n  /** Produces a tile's rendered content for `item`. Default: stringify. */\n  @property({ attribute: false }) renderTile: (item: unknown) => unknown = (item) => String(item);\n  /** When set, clicking a tile (outside any nested link/button) navigates to this hash. */\n  @property({ attribute: false }) itemHref: ((item: unknown) => string | null) | null = null;\n  /** Prefixes each tile with a decorative \"document\" icon, for grids of file-like items. Off by default. */\n  @property({ type: Boolean, attribute: \"file-icon\" }) fileIcon = false;\n\n  #onTileClick(item: unknown, e: MouseEvent): void {\n    if (!this.itemHref) return;\n    if (this.#isNestedInteractive(e.composedPath(), e.currentTarget)) return;\n    const href = this.itemHref(item);\n    if (href) location.hash = href;\n  }\n\n  #onTileKeydown(href: string, e: KeyboardEvent): void {\n    if (e.key !== \"Enter\" || e.target !== e.currentTarget) return;\n    e.preventDefault();\n    location.hash = href;\n  }\n\n  #isNestedInteractive(path: EventTarget[], tile: EventTarget | null): boolean {\n    const selector =\n      \"a, button, input, select, textarea, summary, [contenteditable], [role='button'], [role='link'], [tabindex]\";\n    for (const target of path) {\n      if (target === tile) return false;\n      if (target instanceof HTMLElement && target.matches(selector)) return true;\n    }\n    return false;\n  }\n\n  override render() {\n    return html`\n      <div class=\"grid\">\n        ${repeat(\n          this.items,\n          (item, i) => this.itemKey(item, i),\n          (item) => {\n            const href = this.itemHref?.(item) ?? null;\n            return html`\n              <div\n                class=${href ? \"tile clickable\" : \"tile\"}\n                role=${href ? \"link\" : nothing}\n                tabindex=${href ? \"0\" : nothing}\n                @click=${(e: MouseEvent) => this.#onTileClick(item, e)}\n                @keydown=${href ? (e: KeyboardEvent) => this.#onTileKeydown(href, e) : nothing}\n              >\n                ${this.fileIcon\n                  ? html`\n                      <div class=\"tile-body\">\n                        <span class=\"tile-icon\" aria-hidden=\"true\">${iconDocument(16)}</span>\n                        <div class=\"tile-content\">${this.renderTile(item)}</div>\n                      </div>\n                    `\n                  : this.renderTile(item)}\n              </div>\n            `;\n          },\n        )}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"tile-grid\": TileGrid;\n  }\n}\n"]}

package/dist/toast-notification.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toast-notification.d.ts","sourceRoot":"","sources":["../src/toast-notification.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,OAAO,EAAE,MAAM,KAAK,CAAC;AAKrD,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;AAExD,UAAU,YAAY;IACpB,uEAAuE;IACvE,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,oFAAoF;IACpF,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAUD;;;;;;;;;;;GAWG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IACtC,OAAO,CAAC,OAAO,CAAe;IAEvC,OAAO,CAAC,OAAO,CAAK;IACpB,OAAO,CAAC,OAAO,CAAoD;IAEnE,OAAgB,MAAM,4BAsEpB;IAEF;;;;;OAKG;IACH,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,GAAE,YAAiB,GAAG,MAAM,CAYxD;IAED;;;OAGG;IACH,OAAO,CAAC,EAAE,EAAE,MAAM,QAOjB;IAEQ,oBAAoB,SAI5B;IAEQ,MAAM,0DAcd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,iBAAiB,CAAC;KACzC;CACF;AAMD,wFAAwF;AACxF,wBAAgB,WAAW,CAAC,OAAO,EAAE,MAAM,QAE1C;AAED,6BAA6B;AAC7B,wBAAgB,aAAa,CAAC,OAAO,EAAE,MAAM,QAE5C;AAED,2BAA2B;AAC3B,wBAAgB,UAAU,CAAC,OAAO,EAAE,MAAM,QAEzC"}
+{"version":3,"file":"toast-notification.d.ts","sourceRoot":"","sources":["../src/toast-notification.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,OAAO,EAAE,MAAM,KAAK,CAAC;AAKrD,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;AAExD,UAAU,YAAY;IACpB,uEAAuE;IACvE,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,oFAAoF;IACpF,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAUD;;;;;;;;;;;GAWG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IACtC,OAAO,CAAC,OAAO,CAAe;IAEvC,OAAO,CAAC,OAAO,CAAK;IACpB,OAAO,CAAC,OAAO,CAAoD;IAEnE,OAAgB,MAAM,4BA+FpB;IAEF;;;;;OAKG;IACH,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,GAAE,YAAiB,GAAG,MAAM,CAYxD;IAED;;;OAGG;IACH,OAAO,CAAC,EAAE,EAAE,MAAM,QAOjB;IAEQ,oBAAoB,SAI5B;IAEQ,MAAM,0DAkBd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,iBAAiB,CAAC;KACzC;CACF;AAMD,wFAAwF;AACxF,wBAAgB,WAAW,CAAC,OAAO,EAAE,MAAM,QAE1C;AAED,6BAA6B;AAC7B,wBAAgB,aAAa,CAAC,OAAO,EAAE,MAAM,QAE5C;AAED,2BAA2B;AAC3B,wBAAgB,UAAU,CAAC,OAAO,EAAE,MAAM,QAEzC"}

package/dist/toast-notification.js

@@ -39,7 +39,7 @@ let ToastNotification = class ToastNotification extends LitElement {
         display: flex;
         flex-direction: column;
         gap: 0.5rem;
-        max-width: 360px;
+        max-width: 22.5rem;
         pointer-events: none;
       }
       .toast {
@@ -48,16 +48,25 @@ let ToastNotification = class ToastNotification extends LitElement {
         align-items: flex-start;
         gap: 0.5rem;
         border-radius: var(--ui-radius, 0.5rem);
-        padding: 0.625rem 0.75rem;
+        padding: 0.5rem 0.75rem;
         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)
         );
-        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);
         line-height: 1.4;
-        color: #fff;
+        color: var(--ui-on-accent, #ffffff);
         background: var(--ui-text, #0f172a);
       }
       .toast.error {
@@ -67,7 +76,7 @@ let ToastNotification = class ToastNotification extends LitElement {
         background: var(--ui-success, #16a34a);
       }
       .toast.info {
-        background: var(--ui-primary, #4f46e5);
+        background: var(--ui-info, #0ea5e9);
       }
       .message {
         flex: 1 1 auto;
@@ -77,8 +86,8 @@ let ToastNotification = class ToastNotification extends LitElement {
         flex: 0 0 auto;
         background: none;
         border: none;
-        padding: 2px;
-        margin: -2px -2px -2px 0;
+        padding: 0.25rem;
+        margin: -0.25rem -0.25rem -0.25rem 0;
         color: inherit;
         opacity: 0.8;
         cursor: pointer;
@@ -87,9 +96,25 @@ let ToastNotification = class ToastNotification extends LitElement {
       }
       .close:hover {
         opacity: 1;
-        background: rgb(255 255 255 / 0.15);
+        background: var(--ui-hover-overlay, rgb(255 255 255 / 0.32));
+      }
+      .close:focus-visible {
+        outline: none;
+        opacity: 1;
+        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));
+      }
+      @media (forced-colors: active) {
+        .toast {
+          border: 1px solid CanvasText;
+          forced-color-adjust: auto;
+        }
+        .close:focus-visible {
+          outline: 2px solid CanvasText;
+          outline-offset: 2px;
+          box-shadow: none;
+        }
       }
-      @media (max-width: 768px) {
+      @media (max-width: 48rem) {
         :host {
           top: 0.75rem;
           right: 0.75rem;
@@ -138,10 +163,14 @@ let ToastNotification = class ToastNotification extends LitElement {
             return nothing;
         return html `
       ${this._toasts.map((t) => html `
-          <div class="toast ${t.variant}" role="status">
+          <div
+            class="toast ${t.variant}"
+            role=${t.variant === "error" ? "alert" : "status"}
+            aria-atomic="true"
+          >
             <span class="message">${t.message}</span>
             <button class="close" aria-label="Dismiss notification" @click=${() => this.dismiss(t.id)}>
-              ${iconX(14)}
+              <span aria-hidden="true">${iconX(14)}</span>
             </button>
           </div>
         `)}

package/dist/toast-notification.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast-notification.js","sourceRoot":"","sources":["../src/toast-notification.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, css, html, nothing } from \"lit\";\nimport { customElement, state } from \"lit/decorators.js\";\nimport { iconX } from \"./icons.js\";\nimport { tokens } from \"./tokens.js\";\n\nexport type ToastVariant = \"error\" | \"info\" | \"success\";\n\ninterface ToastOptions {\n  /** Visual style; also selects the accent color. Defaults to \"info\". */\n  variant?: ToastVariant;\n  /** Auto-dismiss delay in ms. Pass 0 to require a manual close. Defaults to 5000. */\n  duration?: number;\n}\n\ninterface Toast {\n  id: number;\n  message: string;\n  variant: ToastVariant;\n}\n\nconst DEFAULT_DURATION_MS = 5000;\n\n/**\n * Fixed-position stack of dismissible notifications, anchored top-right\n * (top-full-width on mobile). Not wired to any app state yet — callers add\n * toasts imperatively via the `show()` method on a live element reference,\n * e.g. `document.querySelector('toast-notification')?.show('Offline', { variant: 'error' })`,\n * or via the `notifySuccess`/`notifyError`/`notifyInfo` module-level helpers\n * exported from this file. Each toast auto-dismisses after `duration` ms and\n * can also be dismissed via its ✕ button. Appears/disappears instantly — no\n * slide/fade transitions.\n *\n * @element toast-notification\n */\n@customElement(\"toast-notification\")\nexport class ToastNotification extends LitElement {\n  @state() private _toasts: Toast[] = [];\n\n  private _nextId = 0;\n  private _timers = new Map<number, ReturnType<typeof setTimeout>>();\n\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        position: fixed;\n        top: 1rem;\n        right: 1rem;\n        z-index: 200;\n        display: flex;\n        flex-direction: column;\n        gap: 0.5rem;\n        max-width: 360px;\n        pointer-events: none;\n      }\n      .toast {\n        pointer-events: auto;\n        display: flex;\n        align-items: flex-start;\n        gap: 0.5rem;\n        border-radius: var(--ui-radius, 0.5rem);\n        padding: 0.625rem 0.75rem;\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        font-family: var(--ui-font, ui-sans-serif, system-ui, sans-serif);\n        font-size: var(--ui-font-size, 0.875rem);\n        line-height: 1.4;\n        color: #fff;\n        background: var(--ui-text, #0f172a);\n      }\n      .toast.error {\n        background: var(--ui-danger, #dc2626);\n      }\n      .toast.success {\n        background: var(--ui-success, #16a34a);\n      }\n      .toast.info {\n        background: var(--ui-primary, #4f46e5);\n      }\n      .message {\n        flex: 1 1 auto;\n        word-break: break-word;\n      }\n      .close {\n        flex: 0 0 auto;\n        background: none;\n        border: none;\n        padding: 2px;\n        margin: -2px -2px -2px 0;\n        color: inherit;\n        opacity: 0.8;\n        cursor: pointer;\n        line-height: 0;\n        border-radius: var(--ui-radius-sm, 0.25rem);\n      }\n      .close:hover {\n        opacity: 1;\n        background: rgb(255 255 255 / 0.15);\n      }\n      @media (max-width: 768px) {\n        :host {\n          top: 0.75rem;\n          right: 0.75rem;\n          left: 0.75rem;\n          max-width: none;\n        }\n      }\n    `,\n  ];\n\n  /**\n   * Queues a toast for display.\n   * @param message Text to show.\n   * @param options Variant + auto-dismiss duration (see {@link ToastOptions}).\n   * @returns The toast's id — pass to `dismiss()` to remove it early.\n   */\n  show(message: string, options: ToastOptions = {}): number {\n    const id = this._nextId++;\n    const variant = options.variant ?? \"info\";\n    const duration = options.duration ?? DEFAULT_DURATION_MS;\n    this._toasts = [...this._toasts, { id, message, variant }];\n    if (duration > 0) {\n      this._timers.set(\n        id,\n        setTimeout(() => this.dismiss(id), duration),\n      );\n    }\n    return id;\n  }\n\n  /**\n   * Removes a toast immediately, cancelling its pending auto-dismiss timer if any.\n   * @param id The id returned by `show()`.\n   */\n  dismiss(id: number) {\n    const timer = this._timers.get(id);\n    if (timer) {\n      clearTimeout(timer);\n      this._timers.delete(id);\n    }\n    this._toasts = this._toasts.filter((t) => t.id !== id);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    for (const timer of this._timers.values()) clearTimeout(timer);\n    this._timers.clear();\n  }\n\n  override render() {\n    if (this._toasts.length === 0) return nothing;\n    return html`\n      ${this._toasts.map(\n        (t) => html`\n          <div class=\"toast ${t.variant}\" role=\"status\">\n            <span class=\"message\">${t.message}</span>\n            <button class=\"close\" aria-label=\"Dismiss notification\" @click=${() => this.dismiss(t.id)}>\n              ${iconX(14)}\n            </button>\n          </div>\n        `,\n      )}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"toast-notification\": ToastNotification;\n  }\n}\n\nfunction getToast(): ToastNotification | null {\n  return document.querySelector(\"toast-notification\");\n}\n\n/** Shows an error toast. Use for connection/network failures, not validation errors. */\nexport function notifyError(message: string) {\n  getToast()?.show(message, { variant: \"error\" });\n}\n\n/** Shows a success toast. */\nexport function notifySuccess(message: string) {\n  getToast()?.show(message, { variant: \"success\" });\n}\n\n/** Shows an info toast. */\nexport function notifyInfo(message: string) {\n  getToast()?.show(message, { variant: \"info\" });\n}\n"]}
+{"version":3,"file":"toast-notification.js","sourceRoot":"","sources":["../src/toast-notification.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, css, html, nothing } from \"lit\";\nimport { customElement, state } from \"lit/decorators.js\";\nimport { iconX } from \"./icons.js\";\nimport { tokens } from \"./tokens.js\";\n\nexport type ToastVariant = \"error\" | \"info\" | \"success\";\n\ninterface ToastOptions {\n  /** Visual style; also selects the accent color. Defaults to \"info\". */\n  variant?: ToastVariant;\n  /** Auto-dismiss delay in ms. Pass 0 to require a manual close. Defaults to 5000. */\n  duration?: number;\n}\n\ninterface Toast {\n  id: number;\n  message: string;\n  variant: ToastVariant;\n}\n\nconst DEFAULT_DURATION_MS = 5000;\n\n/**\n * Fixed-position stack of dismissible notifications, anchored top-right\n * (top-full-width on mobile). Not wired to any app state yet — callers add\n * toasts imperatively via the `show()` method on a live element reference,\n * e.g. `document.querySelector('toast-notification')?.show('Offline', { variant: 'error' })`,\n * or via the `notifySuccess`/`notifyError`/`notifyInfo` module-level helpers\n * exported from this file. Each toast auto-dismisses after `duration` ms and\n * can also be dismissed via its ✕ button. Appears/disappears instantly — no\n * slide/fade transitions.\n *\n * @element toast-notification\n */\n@customElement(\"toast-notification\")\nexport class ToastNotification extends LitElement {\n  @state() private _toasts: Toast[] = [];\n\n  private _nextId = 0;\n  private _timers = new Map<number, ReturnType<typeof setTimeout>>();\n\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        position: fixed;\n        top: 1rem;\n        right: 1rem;\n        z-index: 200;\n        display: flex;\n        flex-direction: column;\n        gap: 0.5rem;\n        max-width: 22.5rem;\n        pointer-events: none;\n      }\n      .toast {\n        pointer-events: auto;\n        display: flex;\n        align-items: flex-start;\n        gap: 0.5rem;\n        border-radius: var(--ui-radius, 0.5rem);\n        padding: 0.5rem 0.75rem;\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        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        line-height: 1.4;\n        color: var(--ui-on-accent, #ffffff);\n        background: var(--ui-text, #0f172a);\n      }\n      .toast.error {\n        background: var(--ui-danger, #dc2626);\n      }\n      .toast.success {\n        background: var(--ui-success, #16a34a);\n      }\n      .toast.info {\n        background: var(--ui-info, #0ea5e9);\n      }\n      .message {\n        flex: 1 1 auto;\n        word-break: break-word;\n      }\n      .close {\n        flex: 0 0 auto;\n        background: none;\n        border: none;\n        padding: 0.25rem;\n        margin: -0.25rem -0.25rem -0.25rem 0;\n        color: inherit;\n        opacity: 0.8;\n        cursor: pointer;\n        line-height: 0;\n        border-radius: var(--ui-radius-sm, 0.25rem);\n      }\n      .close:hover {\n        opacity: 1;\n        background: var(--ui-hover-overlay, rgb(255 255 255 / 0.32));\n      }\n      .close:focus-visible {\n        outline: none;\n        opacity: 1;\n        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));\n      }\n      @media (forced-colors: active) {\n        .toast {\n          border: 1px solid CanvasText;\n          forced-color-adjust: auto;\n        }\n        .close:focus-visible {\n          outline: 2px solid CanvasText;\n          outline-offset: 2px;\n          box-shadow: none;\n        }\n      }\n      @media (max-width: 48rem) {\n        :host {\n          top: 0.75rem;\n          right: 0.75rem;\n          left: 0.75rem;\n          max-width: none;\n        }\n      }\n    `,\n  ];\n\n  /**\n   * Queues a toast for display.\n   * @param message Text to show.\n   * @param options Variant + auto-dismiss duration (see {@link ToastOptions}).\n   * @returns The toast's id — pass to `dismiss()` to remove it early.\n   */\n  show(message: string, options: ToastOptions = {}): number {\n    const id = this._nextId++;\n    const variant = options.variant ?? \"info\";\n    const duration = options.duration ?? DEFAULT_DURATION_MS;\n    this._toasts = [...this._toasts, { id, message, variant }];\n    if (duration > 0) {\n      this._timers.set(\n        id,\n        setTimeout(() => this.dismiss(id), duration),\n      );\n    }\n    return id;\n  }\n\n  /**\n   * Removes a toast immediately, cancelling its pending auto-dismiss timer if any.\n   * @param id The id returned by `show()`.\n   */\n  dismiss(id: number) {\n    const timer = this._timers.get(id);\n    if (timer) {\n      clearTimeout(timer);\n      this._timers.delete(id);\n    }\n    this._toasts = this._toasts.filter((t) => t.id !== id);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    for (const timer of this._timers.values()) clearTimeout(timer);\n    this._timers.clear();\n  }\n\n  override render() {\n    if (this._toasts.length === 0) return nothing;\n    return html`\n      ${this._toasts.map(\n        (t) => html`\n          <div\n            class=\"toast ${t.variant}\"\n            role=${t.variant === \"error\" ? \"alert\" : \"status\"}\n            aria-atomic=\"true\"\n          >\n            <span class=\"message\">${t.message}</span>\n            <button class=\"close\" aria-label=\"Dismiss notification\" @click=${() => this.dismiss(t.id)}>\n              <span aria-hidden=\"true\">${iconX(14)}</span>\n            </button>\n          </div>\n        `,\n      )}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"toast-notification\": ToastNotification;\n  }\n}\n\nfunction getToast(): ToastNotification | null {\n  return document.querySelector(\"toast-notification\");\n}\n\n/** Shows an error toast. Use for connection/network failures, not validation errors. */\nexport function notifyError(message: string) {\n  getToast()?.show(message, { variant: \"error\" });\n}\n\n/** Shows a success toast. */\nexport function notifySuccess(message: string) {\n  getToast()?.show(message, { variant: \"success\" });\n}\n\n/** Shows an info toast. */\nexport function notifyInfo(message: string) {\n  getToast()?.show(message, { variant: \"info\" });\n}\n"]}