@f-ewald/components 1.0.0 → 1.0.2

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"]}

package/dist/tokens.css

@@ -2,14 +2,20 @@
   color-scheme: light;
   --ui-primary: #4f46e5;
   --ui-primary-hover: #4338ca;
+  --ui-info: #0ea5e9;
+  --ui-info-hover: #0284c7;
   --ui-danger: #dc2626;
   --ui-danger-hover: #b91c1c;
   --ui-success: #16a34a;
+  --ui-warning: #d97706;
+  --ui-warning-hover: #b45309;
+  --ui-on-accent: #ffffff;
   --ui-text: #0f172a;
   --ui-text-muted: #64748b;
   --ui-border: #e2e8f0;
   --ui-surface: #ffffff;
   --ui-surface-muted: #f8fafc;
+  --ui-tooltip: #0f172a;
   --ui-hover-overlay: rgb(255 255 255 / 0.32);
   --ui-overlay: rgb(15 23 42 / 0.45);
   --ui-radius: 0.5rem;
@@ -18,6 +24,7 @@
   --ui-shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
   --ui-focus-ring: 0 0 0 3px rgb(79 70 229 / 0.35);
   --ui-font: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --ui-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
   --ui-font-size: 0.875rem;
   --ui-font-size-sm: 0.75rem;
   --ui-font-size-xs: 0.6875rem;
@@ -28,14 +35,20 @@
     color-scheme: dark;
     --ui-primary: #6366f1;
     --ui-primary-hover: #818cf8;
+    --ui-info: #38bdf8;
+    --ui-info-hover: #7dd3fc;
     --ui-danger: #ef4444;
     --ui-danger-hover: #f87171;
     --ui-success: #22c55e;
+    --ui-warning: #f59e0b;
+    --ui-warning-hover: #fbbf24;
+    --ui-on-accent: #ffffff;
     --ui-text: #f1f5f9;
     --ui-text-muted: #94a3b8;
     --ui-border: #334155;
     --ui-surface: #0f172a;
     --ui-surface-muted: #1e293b;
+    --ui-tooltip: #020617;
     --ui-hover-overlay: rgb(255 255 255 / 0.12);
     --ui-overlay: rgb(2 6 23 / 0.6);
     --ui-focus-ring: 0 0 0 3px rgb(99 102 241 / 0.45);
@@ -46,14 +59,20 @@
   color-scheme: dark;
   --ui-primary: #6366f1;
   --ui-primary-hover: #818cf8;
+  --ui-info: #38bdf8;
+  --ui-info-hover: #7dd3fc;
   --ui-danger: #ef4444;
   --ui-danger-hover: #f87171;
   --ui-success: #22c55e;
+  --ui-warning: #f59e0b;
+  --ui-warning-hover: #fbbf24;
+  --ui-on-accent: #ffffff;
   --ui-text: #f1f5f9;
   --ui-text-muted: #94a3b8;
   --ui-border: #334155;
   --ui-surface: #0f172a;
   --ui-surface-muted: #1e293b;
+  --ui-tooltip: #020617;
   --ui-hover-overlay: rgb(255 255 255 / 0.12);
   --ui-overlay: rgb(2 6 23 / 0.6);
   --ui-focus-ring: 0 0 0 3px rgb(99 102 241 / 0.45);

package/dist/tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CA8B9C,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAclD,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,MAAM,yBAAQ,CAAC"}
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAsC9C,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAoBlD,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,MAAM,yBAAQ,CAAC"}

package/dist/tokens.js

@@ -11,14 +11,20 @@ export const tokenValues = {
     // Colors
     "--ui-primary": "#4f46e5", // indigo-600
     "--ui-primary-hover": "#4338ca", // indigo-700
+    "--ui-info": "#0ea5e9", // sky-500
+    "--ui-info-hover": "#0284c7", // sky-600
     "--ui-danger": "#dc2626", // red-600
     "--ui-danger-hover": "#b91c1c", // red-700
     "--ui-success": "#16a34a", // green-600
+    "--ui-warning": "#d97706", // amber-600
+    "--ui-warning-hover": "#b45309", // amber-700
+    "--ui-on-accent": "#ffffff",
     "--ui-text": "#0f172a", // slate-900
     "--ui-text-muted": "#64748b", // slate-500
     "--ui-border": "#e2e8f0", // slate-200
     "--ui-surface": "#ffffff", // white
     "--ui-surface-muted": "#f8fafc", // slate-50
+    "--ui-tooltip": "#0f172a", // slate-900
     "--ui-hover-overlay": "rgb(255 255 255 / 0.32)",
     "--ui-overlay": "rgb(15 23 42 / 0.45)", // slate-900 / 45%
     // Shape / depth
@@ -29,6 +35,7 @@ export const tokenValues = {
     "--ui-focus-ring": "0 0 0 3px rgb(79 70 229 / 0.35)",
     // Type
     "--ui-font": 'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
+    "--ui-font-mono": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
     "--ui-font-size": "0.875rem",
     "--ui-font-size-sm": "0.75rem",
     "--ui-font-size-xs": "0.6875rem",
@@ -44,14 +51,20 @@ export const tokenValues = {
 export const darkTokenValues = {
     "--ui-primary": "#6366f1", // indigo-500
     "--ui-primary-hover": "#818cf8", // indigo-400
+    "--ui-info": "#38bdf8", // sky-400
+    "--ui-info-hover": "#7dd3fc", // sky-300
     "--ui-danger": "#ef4444", // red-500
     "--ui-danger-hover": "#f87171", // red-400
     "--ui-success": "#22c55e", // green-500
+    "--ui-warning": "#f59e0b", // amber-500
+    "--ui-warning-hover": "#fbbf24", // amber-400
+    "--ui-on-accent": "#ffffff",
     "--ui-text": "#f1f5f9", // slate-100
     "--ui-text-muted": "#94a3b8", // slate-400
     "--ui-border": "#334155", // slate-700
     "--ui-surface": "#0f172a", // slate-900
     "--ui-surface-muted": "#1e293b", // slate-800
+    "--ui-tooltip": "#020617", // slate-950
     "--ui-hover-overlay": "rgb(255 255 255 / 0.12)",
     "--ui-overlay": "rgb(2 6 23 / 0.6)", // slate-950 / 60%
     "--ui-focus-ring": "0 0 0 3px rgb(99 102 241 / 0.45)",

package/dist/tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,WAAW,GAA2B;IACjD,SAAS;IACT,cAAc,EAAE,SAAS,EAAE,aAAa;IACxC,oBAAoB,EAAE,SAAS,EAAE,aAAa;IAC9C,aAAa,EAAE,SAAS,EAAE,UAAU;IACpC,mBAAmB,EAAE,SAAS,EAAE,UAAU;IAC1C,cAAc,EAAE,SAAS,EAAE,YAAY;IACvC,WAAW,EAAE,SAAS,EAAE,YAAY;IACpC,iBAAiB,EAAE,SAAS,EAAE,YAAY;IAC1C,aAAa,EAAE,SAAS,EAAE,YAAY;IACtC,cAAc,EAAE,SAAS,EAAE,QAAQ;IACnC,oBAAoB,EAAE,SAAS,EAAE,WAAW;IAC5C,oBAAoB,EAAE,yBAAyB;IAC/C,cAAc,EAAE,sBAAsB,EAAE,kBAAkB;IAE1D,gBAAgB;IAChB,aAAa,EAAE,QAAQ,EAAE,aAAa;IACtC,gBAAgB,EAAE,SAAS,EAAE,UAAU;IACvC,aAAa,EACX,kEAAkE,EAAE,YAAY;IAClF,gBAAgB,EACd,qEAAqE,EAAE,YAAY;IACrF,iBAAiB,EAAE,iCAAiC;IAEpD,OAAO;IACP,WAAW,EACT,oHAAoH;IACtH,gBAAgB,EAAE,UAAU;IAC5B,mBAAmB,EAAE,SAAS;IAC9B,mBAAmB,EAAE,WAAW;CACjC,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,eAAe,GAA2B;IACrD,cAAc,EAAE,SAAS,EAAE,aAAa;IACxC,oBAAoB,EAAE,SAAS,EAAE,aAAa;IAC9C,aAAa,EAAE,SAAS,EAAE,UAAU;IACpC,mBAAmB,EAAE,SAAS,EAAE,UAAU;IAC1C,cAAc,EAAE,SAAS,EAAE,YAAY;IACvC,WAAW,EAAE,SAAS,EAAE,YAAY;IACpC,iBAAiB,EAAE,SAAS,EAAE,YAAY;IAC1C,aAAa,EAAE,SAAS,EAAE,YAAY;IACtC,cAAc,EAAE,SAAS,EAAE,YAAY;IACvC,oBAAoB,EAAE,SAAS,EAAE,YAAY;IAC7C,oBAAoB,EAAE,yBAAyB;IAC/C,cAAc,EAAE,mBAAmB,EAAE,kBAAkB;IACvD,iBAAiB,EAAE,kCAAkC;CACtD,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,EAAE,CAAC","sourcesContent":["import { css } from \"lit\";\n\n/**\n * Design token values, sourced from Tailwind v4's default theme palette.\n * Each entry maps a `--ui-*` custom property name to its default value.\n * These are the same values baked in as `var(--ui-*, <fallback>)` fallbacks\n * throughout component styles, so components render correctly with zero\n * external CSS. Consumers may override any of these by setting the custom\n * property on `:root` or an ancestor element (see `tokens.css`).\n */\nexport const tokenValues: Record<string, string> = {\n  // Colors\n  \"--ui-primary\": \"#4f46e5\", // indigo-600\n  \"--ui-primary-hover\": \"#4338ca\", // indigo-700\n  \"--ui-danger\": \"#dc2626\", // red-600\n  \"--ui-danger-hover\": \"#b91c1c\", // red-700\n  \"--ui-success\": \"#16a34a\", // green-600\n  \"--ui-text\": \"#0f172a\", // slate-900\n  \"--ui-text-muted\": \"#64748b\", // slate-500\n  \"--ui-border\": \"#e2e8f0\", // slate-200\n  \"--ui-surface\": \"#ffffff\", // white\n  \"--ui-surface-muted\": \"#f8fafc\", // slate-50\n  \"--ui-hover-overlay\": \"rgb(255 255 255 / 0.32)\",\n  \"--ui-overlay\": \"rgb(15 23 42 / 0.45)\", // slate-900 / 45%\n\n  // Shape / depth\n  \"--ui-radius\": \"0.5rem\", // rounded-lg\n  \"--ui-radius-sm\": \"0.25rem\", // rounded\n  \"--ui-shadow\":\n    \"0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)\", // shadow-md\n  \"--ui-shadow-lg\":\n    \"0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)\", // shadow-xl\n  \"--ui-focus-ring\": \"0 0 0 3px rgb(79 70 229 / 0.35)\",\n\n  // Type\n  \"--ui-font\":\n    'ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"',\n  \"--ui-font-size\": \"0.875rem\",\n  \"--ui-font-size-sm\": \"0.75rem\",\n  \"--ui-font-size-xs\": \"0.6875rem\",\n};\n\n/**\n * Dark-mode overrides for the same `--ui-*` custom properties, applied by\n * `tokens.css` via `@media (prefers-color-scheme: dark)` and `[data-theme]`\n * (see generate-tokens-css.mjs). Same Tailwind slate scale as the light\n * palette, inverted, with primary/danger/success lightened one step (500\n * instead of 600) for sufficient contrast against dark surfaces. Shape/type\n * tokens are theme-independent and not repeated here.\n */\nexport const darkTokenValues: Record<string, string> = {\n  \"--ui-primary\": \"#6366f1\", // indigo-500\n  \"--ui-primary-hover\": \"#818cf8\", // indigo-400\n  \"--ui-danger\": \"#ef4444\", // red-500\n  \"--ui-danger-hover\": \"#f87171\", // red-400\n  \"--ui-success\": \"#22c55e\", // green-500\n  \"--ui-text\": \"#f1f5f9\", // slate-100\n  \"--ui-text-muted\": \"#94a3b8\", // slate-400\n  \"--ui-border\": \"#334155\", // slate-700\n  \"--ui-surface\": \"#0f172a\", // slate-900\n  \"--ui-surface-muted\": \"#1e293b\", // slate-800\n  \"--ui-hover-overlay\": \"rgb(255 255 255 / 0.12)\",\n  \"--ui-overlay\": \"rgb(2 6 23 / 0.6)\", // slate-950 / 60%\n  \"--ui-focus-ring\": \"0 0 0 3px rgb(99 102 241 / 0.45)\",\n};\n\n/**\n * Historically a shared `:host { --ui-x: var(--ui-x, fallback); } ` block,\n * re-declaring every token on each component's own host element as a\n * \"materialize the inherited value, or this fallback\" trick. That pattern\n * turned out to be a genuine bug, not a working default: browsers treat\n * `--ui-x: var(--ui-x, ...)` on `:host` as a self-referencing declaration\n * that computes to the guaranteed-invalid value REGARDLESS of what an\n * ancestor (e.g. `:root`) set — the host's own `:host` rule wins the cascade\n * over the ancestor's, so this dropped whatever the app actually set and\n * silently substituted the component's own fallback everywhere. It went\n * unnoticed because every component's fallback happened to equal the\n * intended light-mode value — dark mode (a real, different value at\n * `:root`) exposed it immediately (colors rendering as if no theme were\n * applied at all). Fix: don't redeclare tokens on `:host` — plain\n * inheritance already carries `:root`'s values into every shadow root\n * correctly, and every component already has its own `var(--ui-x, fallback)`\n * at each point of use, so nothing here is needed for the \"zero external\n * CSS\" default to keep working. Kept as an empty export so the existing\n * `static override styles = [tokens, css\\`...\\`]` import in every component\n * keeps compiling.\n */\nexport const tokens = css``;\n"]}
+{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,WAAW,GAA2B;IACjD,SAAS;IACT,cAAc,EAAE,SAAS,EAAE,aAAa;IACxC,oBAAoB,EAAE,SAAS,EAAE,aAAa;IAC9C,WAAW,EAAE,SAAS,EAAE,UAAU;IAClC,iBAAiB,EAAE,SAAS,EAAE,UAAU;IACxC,aAAa,EAAE,SAAS,EAAE,UAAU;IACpC,mBAAmB,EAAE,SAAS,EAAE,UAAU;IAC1C,cAAc,EAAE,SAAS,EAAE,YAAY;IACvC,cAAc,EAAE,SAAS,EAAE,YAAY;IACvC,oBAAoB,EAAE,SAAS,EAAE,YAAY;IAC7C,gBAAgB,EAAE,SAAS;IAC3B,WAAW,EAAE,SAAS,EAAE,YAAY;IACpC,iBAAiB,EAAE,SAAS,EAAE,YAAY;IAC1C,aAAa,EAAE,SAAS,EAAE,YAAY;IACtC,cAAc,EAAE,SAAS,EAAE,QAAQ;IACnC,oBAAoB,EAAE,SAAS,EAAE,WAAW;IAC5C,cAAc,EAAE,SAAS,EAAE,YAAY;IACvC,oBAAoB,EAAE,yBAAyB;IAC/C,cAAc,EAAE,sBAAsB,EAAE,kBAAkB;IAE1D,gBAAgB;IAChB,aAAa,EAAE,QAAQ,EAAE,aAAa;IACtC,gBAAgB,EAAE,SAAS,EAAE,UAAU;IACvC,aAAa,EACX,kEAAkE,EAAE,YAAY;IAClF,gBAAgB,EACd,qEAAqE,EAAE,YAAY;IACrF,iBAAiB,EAAE,iCAAiC;IAEpD,OAAO;IACP,WAAW,EACT,oHAAoH;IACtH,gBAAgB,EACd,kEAAkE;IACpE,gBAAgB,EAAE,UAAU;IAC5B,mBAAmB,EAAE,SAAS;IAC9B,mBAAmB,EAAE,WAAW;CACjC,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,eAAe,GAA2B;IACrD,cAAc,EAAE,SAAS,EAAE,aAAa;IACxC,oBAAoB,EAAE,SAAS,EAAE,aAAa;IAC9C,WAAW,EAAE,SAAS,EAAE,UAAU;IAClC,iBAAiB,EAAE,SAAS,EAAE,UAAU;IACxC,aAAa,EAAE,SAAS,EAAE,UAAU;IACpC,mBAAmB,EAAE,SAAS,EAAE,UAAU;IAC1C,cAAc,EAAE,SAAS,EAAE,YAAY;IACvC,cAAc,EAAE,SAAS,EAAE,YAAY;IACvC,oBAAoB,EAAE,SAAS,EAAE,YAAY;IAC7C,gBAAgB,EAAE,SAAS;IAC3B,WAAW,EAAE,SAAS,EAAE,YAAY;IACpC,iBAAiB,EAAE,SAAS,EAAE,YAAY;IAC1C,aAAa,EAAE,SAAS,EAAE,YAAY;IACtC,cAAc,EAAE,SAAS,EAAE,YAAY;IACvC,oBAAoB,EAAE,SAAS,EAAE,YAAY;IAC7C,cAAc,EAAE,SAAS,EAAE,YAAY;IACvC,oBAAoB,EAAE,yBAAyB;IAC/C,cAAc,EAAE,mBAAmB,EAAE,kBAAkB;IACvD,iBAAiB,EAAE,kCAAkC;CACtD,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,EAAE,CAAC","sourcesContent":["import { css } from \"lit\";\n\n/**\n * Design token values, sourced from Tailwind v4's default theme palette.\n * Each entry maps a `--ui-*` custom property name to its default value.\n * These are the same values baked in as `var(--ui-*, <fallback>)` fallbacks\n * throughout component styles, so components render correctly with zero\n * external CSS. Consumers may override any of these by setting the custom\n * property on `:root` or an ancestor element (see `tokens.css`).\n */\nexport const tokenValues: Record<string, string> = {\n  // Colors\n  \"--ui-primary\": \"#4f46e5\", // indigo-600\n  \"--ui-primary-hover\": \"#4338ca\", // indigo-700\n  \"--ui-info\": \"#0ea5e9\", // sky-500\n  \"--ui-info-hover\": \"#0284c7\", // sky-600\n  \"--ui-danger\": \"#dc2626\", // red-600\n  \"--ui-danger-hover\": \"#b91c1c\", // red-700\n  \"--ui-success\": \"#16a34a\", // green-600\n  \"--ui-warning\": \"#d97706\", // amber-600\n  \"--ui-warning-hover\": \"#b45309\", // amber-700\n  \"--ui-on-accent\": \"#ffffff\",\n  \"--ui-text\": \"#0f172a\", // slate-900\n  \"--ui-text-muted\": \"#64748b\", // slate-500\n  \"--ui-border\": \"#e2e8f0\", // slate-200\n  \"--ui-surface\": \"#ffffff\", // white\n  \"--ui-surface-muted\": \"#f8fafc\", // slate-50\n  \"--ui-tooltip\": \"#0f172a\", // slate-900\n  \"--ui-hover-overlay\": \"rgb(255 255 255 / 0.32)\",\n  \"--ui-overlay\": \"rgb(15 23 42 / 0.45)\", // slate-900 / 45%\n\n  // Shape / depth\n  \"--ui-radius\": \"0.5rem\", // rounded-lg\n  \"--ui-radius-sm\": \"0.25rem\", // rounded\n  \"--ui-shadow\":\n    \"0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)\", // shadow-md\n  \"--ui-shadow-lg\":\n    \"0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)\", // shadow-xl\n  \"--ui-focus-ring\": \"0 0 0 3px rgb(79 70 229 / 0.35)\",\n\n  // Type\n  \"--ui-font\":\n    'ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"',\n  \"--ui-font-mono\":\n    \"ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace\",\n  \"--ui-font-size\": \"0.875rem\",\n  \"--ui-font-size-sm\": \"0.75rem\",\n  \"--ui-font-size-xs\": \"0.6875rem\",\n};\n\n/**\n * Dark-mode overrides for the same `--ui-*` custom properties, applied by\n * `tokens.css` via `@media (prefers-color-scheme: dark)` and `[data-theme]`\n * (see generate-tokens-css.mjs). Same Tailwind slate scale as the light\n * palette, inverted, with primary/danger/success lightened one step (500\n * instead of 600) for sufficient contrast against dark surfaces. Shape/type\n * tokens are theme-independent and not repeated here.\n */\nexport const darkTokenValues: Record<string, string> = {\n  \"--ui-primary\": \"#6366f1\", // indigo-500\n  \"--ui-primary-hover\": \"#818cf8\", // indigo-400\n  \"--ui-info\": \"#38bdf8\", // sky-400\n  \"--ui-info-hover\": \"#7dd3fc\", // sky-300\n  \"--ui-danger\": \"#ef4444\", // red-500\n  \"--ui-danger-hover\": \"#f87171\", // red-400\n  \"--ui-success\": \"#22c55e\", // green-500\n  \"--ui-warning\": \"#f59e0b\", // amber-500\n  \"--ui-warning-hover\": \"#fbbf24\", // amber-400\n  \"--ui-on-accent\": \"#ffffff\",\n  \"--ui-text\": \"#f1f5f9\", // slate-100\n  \"--ui-text-muted\": \"#94a3b8\", // slate-400\n  \"--ui-border\": \"#334155\", // slate-700\n  \"--ui-surface\": \"#0f172a\", // slate-900\n  \"--ui-surface-muted\": \"#1e293b\", // slate-800\n  \"--ui-tooltip\": \"#020617\", // slate-950\n  \"--ui-hover-overlay\": \"rgb(255 255 255 / 0.12)\",\n  \"--ui-overlay\": \"rgb(2 6 23 / 0.6)\", // slate-950 / 60%\n  \"--ui-focus-ring\": \"0 0 0 3px rgb(99 102 241 / 0.45)\",\n};\n\n/**\n * Historically a shared `:host { --ui-x: var(--ui-x, fallback); } ` block,\n * re-declaring every token on each component's own host element as a\n * \"materialize the inherited value, or this fallback\" trick. That pattern\n * turned out to be a genuine bug, not a working default: browsers treat\n * `--ui-x: var(--ui-x, ...)` on `:host` as a self-referencing declaration\n * that computes to the guaranteed-invalid value REGARDLESS of what an\n * ancestor (e.g. `:root`) set — the host's own `:host` rule wins the cascade\n * over the ancestor's, so this dropped whatever the app actually set and\n * silently substituted the component's own fallback everywhere. It went\n * unnoticed because every component's fallback happened to equal the\n * intended light-mode value — dark mode (a real, different value at\n * `:root`) exposed it immediately (colors rendering as if no theme were\n * applied at all). Fix: don't redeclare tokens on `:host` — plain\n * inheritance already carries `:root`'s values into every shadow root\n * correctly, and every component already has its own `var(--ui-x, fallback)`\n * at each point of use, so nothing here is needed for the \"zero external\n * CSS\" default to keep working. Kept as an empty export so the existing\n * `static override styles = [tokens, css\\`...\\`]` import in every component\n * keeps compiling.\n */\nexport const tokens = css``;\n"]}

package/dist/ui-button.d.ts

@@ -34,6 +34,8 @@ export declare class UiButton extends LitElement {
     busy: boolean;
     /** Drives submit/reset on the ancestor form via ElementInternals, since a shadow-DOM button can't do it natively. */
     private _onClick;
+    /** Suppresses navigation while a link-styled button is disabled or busy. */
+    private _onLinkClick;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

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

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