@f-ewald/components 1.0.2 → 1.1.0

package/dist/chat-message.js

@@ -64,10 +64,20 @@ let ChatMessage = class ChatMessage extends LitElement {
       }
       button.header {
         width: 100%;
+        min-height: 2rem;
         padding: 0;
         border: 0;
         background: none;
-        font-family: inherit;
+        font-family: var(
+          --ui-font,
+          ui-sans-serif,
+          system-ui,
+          sans-serif,
+          "Apple Color Emoji",
+          "Segoe UI Emoji",
+          "Segoe UI Symbol",
+          "Noto Color Emoji"
+        );
         text-align: left;
         cursor: pointer;
       }
@@ -84,7 +94,7 @@ let ChatMessage = class ChatMessage extends LitElement {
         transform: rotate(90deg);
       }
       .author {
-        font-weight: 600;
+        font-weight: var(--ui-font-weight-semibold, 600);
         color: var(--ui-text, #0f172a);
       }
       .summary {
@@ -94,9 +104,9 @@ let ChatMessage = class ChatMessage extends LitElement {
       }
       .body-card {
         border-radius: var(--ui-radius, 0.5rem);
-        padding: 0.5rem 0.75rem;
+        padding: 0.75rem;
         color: var(--ui-text, #0f172a);
-        line-height: 1.5;
+        line-height: var(--ui-line-height-normal, 1.5);
       }
       .body-card[hidden] {
         display: none;
@@ -153,7 +163,7 @@ let ChatMessage = class ChatMessage extends LitElement {
         const headerContent = html `
       ${this.collapsible
             ? html `<span class="chevron ${this.collapsed ? "" : "expanded"}" aria-hidden="true"
-            >${iconChevronRight(12)}</span
+            >${iconChevronRight(14)}</span
           >`
             : nothing}
       ${this.author ? html `<span class="author">${this.author}</span>` : nothing}

package/dist/chat-message.js.map

@@ -1 +1 @@
-{"version":3,"file":"chat-message.js","sourceRoot":"","sources":["../src/chat-message.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, css, html, nothing } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { iconChevronRight } from \"./icons.js\";\nimport \"./relative-time.js\";\nimport { tokens } from \"./tokens.js\";\n\nexport type ChatMessageRole = \"user\" | \"agent\" | \"system\";\nexport type ChatMessageVariant = \"normal\" | \"tool\" | \"thinking\";\n\n/**\n * One conversation entry in a chat-style activity feed. Tool calls and\n * \"thinking\" traces are variants of this component rather than separate\n * ones — they share the same header, collapse behavior, and body card as a\n * normal message, just dimmed and collapsible with an always-visible summary.\n *\n * @element chat-message\n * @slot - Message body (consumers slot in already-rendered content, e.g. sanitized markdown HTML).\n * @fires toggle - Fired with `{ collapsed: boolean }` when the header/summary is clicked in collapsible mode.\n */\n@customElement(\"chat-message\")\nexport class ChatMessage 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, 0.875rem);\n      }\n      .header {\n        display: flex;\n        align-items: center;\n        gap: 0.5rem;\n        font-size: var(--ui-font-size-sm, 0.75rem);\n        color: var(--ui-text-muted, #64748b);\n        margin-bottom: 0.25rem;\n      }\n      button.header {\n        width: 100%;\n        padding: 0;\n        border: 0;\n        background: none;\n        font-family: inherit;\n        text-align: left;\n        cursor: pointer;\n      }\n      button.header:focus-visible {\n        outline: none;\n        border-radius: var(--ui-radius-sm, 0.25rem);\n        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));\n      }\n      .chevron {\n        display: inline-flex;\n        transition: transform 150ms ease;\n      }\n      .chevron.expanded {\n        transform: rotate(90deg);\n      }\n      .author {\n        font-weight: 600;\n        color: var(--ui-text, #0f172a);\n      }\n      .summary {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      }\n      .body-card {\n        border-radius: var(--ui-radius, 0.5rem);\n        padding: 0.5rem 0.75rem;\n        color: var(--ui-text, #0f172a);\n        line-height: 1.5;\n      }\n      .body-card[hidden] {\n        display: none;\n      }\n      :host([role=\"user\"]) .body-card {\n        background: color-mix(in srgb, var(--ui-primary, #4f46e5) 8%, var(--ui-surface, #ffffff));\n      }\n      :host([role=\"agent\"]) .body-card {\n        background: var(--ui-surface, #ffffff);\n        border: 1px solid var(--ui-border, #e2e8f0);\n      }\n      :host([role=\"system\"]) .body-card {\n        padding: 0 0 0 1rem;\n        font-size: var(--ui-font-size-sm, 0.75rem);\n        color: var(--ui-text-muted, #64748b);\n      }\n      :host([variant=\"tool\"]) .body-card,\n      :host([variant=\"thinking\"]) .body-card {\n        opacity: 0.7;\n        font-size: var(--ui-font-size-sm, 0.75rem);\n      }\n      :host([variant=\"tool\"]) .body-card {\n        font-family: var(\n          --ui-font-mono,\n          ui-monospace,\n          SFMono-Regular,\n          Menlo,\n          Monaco,\n          Consolas,\n          monospace\n        );\n      }\n      @media (prefers-reduced-motion: reduce) {\n        .chevron {\n          transition: none;\n        }\n      }\n      @media (forced-colors: active) {\n        button.header:focus-visible {\n          outline: 2px solid CanvasText;\n          outline-offset: 2px;\n          box-shadow: none;\n        }\n      }\n    `,\n  ];\n\n  /** Whose message this is; drives the card background/border. */\n  @property({ reflect: true }) override role: ChatMessageRole = \"agent\";\n  /** `tool`/`thinking` render dimmed and smaller, with `tool` using monospace for its body. */\n  @property({ reflect: true }) variant: ChatMessageVariant = \"normal\";\n  /** Header label, e.g. \"Freddy\" or \"Architect\". */\n  @property() author = \"\";\n  /** ISO-8601 timestamp, rendered via `relative-time` in the header. */\n  @property() timestamp: string | null = null;\n  /** Always-visible one-liner for `tool`/`thinking` variants (e.g. a truncated args preview). */\n  @property() summary = \"\";\n  /** Whether clicking the header/summary toggles the body slot. */\n  @property({ type: Boolean }) collapsible = false;\n  /** Current collapse state (reflected as an attribute). */\n  @property({ type: Boolean, reflect: true }) collapsed = false;\n\n  private _toggle() {\n    if (!this.collapsible) return;\n    this.collapsed = !this.collapsed;\n    this.dispatchEvent(new CustomEvent(\"toggle\", { detail: { collapsed: this.collapsed } }));\n  }\n\n  override render() {\n    const headerContent = html`\n      ${this.collapsible\n        ? html`<span class=\"chevron ${this.collapsed ? \"\" : \"expanded\"}\" aria-hidden=\"true\"\n            >${iconChevronRight(12)}</span\n          >`\n        : nothing}\n      ${this.author ? html`<span class=\"author\">${this.author}</span>` : nothing}\n      ${this.timestamp ? html`<relative-time datetime=${this.timestamp}></relative-time>` : nothing}\n      ${this.summary ? html`<span class=\"summary\">${this.summary}</span>` : nothing}\n    `;\n\n    return html`\n      ${this.collapsible\n        ? html`\n            <button\n              class=\"header\"\n              type=\"button\"\n              aria-expanded=${String(!this.collapsed)}\n              aria-controls=\"message-body\"\n              @click=${this._toggle}\n            >\n              ${headerContent}\n            </button>\n          `\n        : html`<div class=\"header\">${headerContent}</div>`}\n      <div id=\"message-body\" class=\"body-card\" ?hidden=${this.collapsible && this.collapsed}>\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"chat-message\": ChatMessage;\n  }\n}\n"]}
+{"version":3,"file":"chat-message.js","sourceRoot":"","sources":["../src/chat-message.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, css, html, nothing } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { iconChevronRight } from \"./icons.js\";\nimport \"./relative-time.js\";\nimport { tokens } from \"./tokens.js\";\n\nexport type ChatMessageRole = \"user\" | \"agent\" | \"system\";\nexport type ChatMessageVariant = \"normal\" | \"tool\" | \"thinking\";\n\n/**\n * One conversation entry in a chat-style activity feed. Tool calls and\n * \"thinking\" traces are variants of this component rather than separate\n * ones — they share the same header, collapse behavior, and body card as a\n * normal message, just dimmed and collapsible with an always-visible summary.\n *\n * @element chat-message\n * @slot - Message body (consumers slot in already-rendered content, e.g. sanitized markdown HTML).\n * @fires toggle - Fired with `{ collapsed: boolean }` when the header/summary is clicked in collapsible mode.\n */\n@customElement(\"chat-message\")\nexport class ChatMessage 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, 0.875rem);\n      }\n      .header {\n        display: flex;\n        align-items: center;\n        gap: 0.5rem;\n        font-size: var(--ui-font-size-sm, 0.75rem);\n        color: var(--ui-text-muted, #64748b);\n        margin-bottom: 0.25rem;\n      }\n      button.header {\n        width: 100%;\n        min-height: 2rem;\n        padding: 0;\n        border: 0;\n        background: none;\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        text-align: left;\n        cursor: pointer;\n      }\n      button.header:focus-visible {\n        outline: none;\n        border-radius: var(--ui-radius-sm, 0.25rem);\n        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));\n      }\n      .chevron {\n        display: inline-flex;\n        transition: transform 150ms ease;\n      }\n      .chevron.expanded {\n        transform: rotate(90deg);\n      }\n      .author {\n        font-weight: var(--ui-font-weight-semibold, 600);\n        color: var(--ui-text, #0f172a);\n      }\n      .summary {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      }\n      .body-card {\n        border-radius: var(--ui-radius, 0.5rem);\n        padding: 0.75rem;\n        color: var(--ui-text, #0f172a);\n        line-height: var(--ui-line-height-normal, 1.5);\n      }\n      .body-card[hidden] {\n        display: none;\n      }\n      :host([role=\"user\"]) .body-card {\n        background: color-mix(in srgb, var(--ui-primary, #4f46e5) 8%, var(--ui-surface, #ffffff));\n      }\n      :host([role=\"agent\"]) .body-card {\n        background: var(--ui-surface, #ffffff);\n        border: 1px solid var(--ui-border, #e2e8f0);\n      }\n      :host([role=\"system\"]) .body-card {\n        padding: 0 0 0 1rem;\n        font-size: var(--ui-font-size-sm, 0.75rem);\n        color: var(--ui-text-muted, #64748b);\n      }\n      :host([variant=\"tool\"]) .body-card,\n      :host([variant=\"thinking\"]) .body-card {\n        opacity: 0.7;\n        font-size: var(--ui-font-size-sm, 0.75rem);\n      }\n      :host([variant=\"tool\"]) .body-card {\n        font-family: var(\n          --ui-font-mono,\n          ui-monospace,\n          SFMono-Regular,\n          Menlo,\n          Monaco,\n          Consolas,\n          monospace\n        );\n      }\n      @media (prefers-reduced-motion: reduce) {\n        .chevron {\n          transition: none;\n        }\n      }\n      @media (forced-colors: active) {\n        button.header:focus-visible {\n          outline: 2px solid CanvasText;\n          outline-offset: 2px;\n          box-shadow: none;\n        }\n      }\n    `,\n  ];\n\n  /** Whose message this is; drives the card background/border. */\n  @property({ reflect: true }) override role: ChatMessageRole = \"agent\";\n  /** `tool`/`thinking` render dimmed and smaller, with `tool` using monospace for its body. */\n  @property({ reflect: true }) variant: ChatMessageVariant = \"normal\";\n  /** Header label, e.g. \"Freddy\" or \"Architect\". */\n  @property() author = \"\";\n  /** ISO-8601 timestamp, rendered via `relative-time` in the header. */\n  @property() timestamp: string | null = null;\n  /** Always-visible one-liner for `tool`/`thinking` variants (e.g. a truncated args preview). */\n  @property() summary = \"\";\n  /** Whether clicking the header/summary toggles the body slot. */\n  @property({ type: Boolean }) collapsible = false;\n  /** Current collapse state (reflected as an attribute). */\n  @property({ type: Boolean, reflect: true }) collapsed = false;\n\n  private _toggle() {\n    if (!this.collapsible) return;\n    this.collapsed = !this.collapsed;\n    this.dispatchEvent(new CustomEvent(\"toggle\", { detail: { collapsed: this.collapsed } }));\n  }\n\n  override render() {\n    const headerContent = html`\n      ${this.collapsible\n        ? html`<span class=\"chevron ${this.collapsed ? \"\" : \"expanded\"}\" aria-hidden=\"true\"\n            >${iconChevronRight(14)}</span\n          >`\n        : nothing}\n      ${this.author ? html`<span class=\"author\">${this.author}</span>` : nothing}\n      ${this.timestamp ? html`<relative-time datetime=${this.timestamp}></relative-time>` : nothing}\n      ${this.summary ? html`<span class=\"summary\">${this.summary}</span>` : nothing}\n    `;\n\n    return html`\n      ${this.collapsible\n        ? html`\n            <button\n              class=\"header\"\n              type=\"button\"\n              aria-expanded=${String(!this.collapsed)}\n              aria-controls=\"message-body\"\n              @click=${this._toggle}\n            >\n              ${headerContent}\n            </button>\n          `\n        : html`<div class=\"header\">${headerContent}</div>`}\n      <div id=\"message-body\" class=\"body-card\" ?hidden=${this.collapsible && this.collapsed}>\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"chat-message\": ChatMessage;\n  }\n}\n"]}

package/dist/confirm-dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"confirm-dialog.d.ts","sourceRoot":"","sources":["../src/confirm-dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAW1E;;;;;;;;;;GAUG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,4BAqIpB;IAEF,qCAAqC;IACR,IAAI,UAAS;IAC1C,oCAAoC;IACM,YAAY,SAAY;IAClE,mCAAmC;IACM,WAAW,SAAY;IAChE,wEAAwE;IAC3C,MAAM,UAAQ;IAC3C,8EAA8E;IACjD,IAAI,UAAS;IAC1C,gEAAgE;IACpD,KAAK,EAAE,MAAM,GAAG,IAAI,CAAQ;IAExC,OAAO,CAAC,cAAc,CAA4B;IAElD,OAAO,CAAC,QAAQ;IAIhB,OAAO,CAAC,OAAO;IAIf,OAAO,CAAC,qBAAqB;IAU7B,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,kBAAkB,CAGxB;IAEF,OAAO,CAAC,gBAAgB,CAuBtB;IAEF,UAAmB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAexD;IAEQ,oBAAoB,IAAI,IAAI,CAQpC;IAEQ,MAAM,yCA4Bd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAC;KACjC;CACF"}
+{"version":3,"file":"confirm-dialog.d.ts","sourceRoot":"","sources":["../src/confirm-dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAW1E;;;;;;;;;;GAUG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,4BAuJpB;IAEF,qCAAqC;IACR,IAAI,UAAS;IAC1C,oCAAoC;IACM,YAAY,SAAY;IAClE,mCAAmC;IACM,WAAW,SAAY;IAChE,wEAAwE;IAC3C,MAAM,UAAQ;IAC3C,8EAA8E;IACjD,IAAI,UAAS;IAC1C,gEAAgE;IACpD,KAAK,EAAE,MAAM,GAAG,IAAI,CAAQ;IAExC,OAAO,CAAC,cAAc,CAA4B;IAElD,OAAO,CAAC,QAAQ;IAIhB,OAAO,CAAC,OAAO;IAIf,OAAO,CAAC,qBAAqB;IAU7B,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,kBAAkB,CAGxB;IAEF,OAAO,CAAC,gBAAgB,CAuBtB;IAEF,UAAmB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAexD;IAEQ,oBAAoB,IAAI,IAAI,CAQpC;IAEQ,MAAM,yCA4Bd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAC;KACjC;CACF"}

package/dist/confirm-dialog.js

@@ -94,8 +94,8 @@ let ConfirmDialog = class ConfirmDialog extends LitElement {
           0 8px 10px -6px rgb(0 0 0 / 0.1)
         );
         width: 100%;
-        max-width: 26.25rem;
-        padding: 1.25rem;
+        max-width: min(25rem, calc(100vw - 2rem));
+        padding: 1rem;
         box-sizing: border-box;
         outline: none;
       }
@@ -113,13 +113,30 @@ let ConfirmDialog = class ConfirmDialog extends LitElement {
           "Noto Color Emoji"
         );
         font-size: var(--ui-font-size, 0.875rem);
-        line-height: 1.45;
+        line-height: var(--ui-line-height-normal, 1.5);
       }
       .dialog-actions {
         display: flex;
         justify-content: flex-end;
         gap: 0.5rem;
       }
+      .btn-cancel,
+      .btn-danger,
+      .btn-primary {
+        height: 2rem;
+        box-sizing: border-box;
+        font-family: var(
+          --ui-font,
+          ui-sans-serif,
+          system-ui,
+          sans-serif,
+          "Apple Color Emoji",
+          "Segoe UI Emoji",
+          "Segoe UI Symbol",
+          "Noto Color Emoji"
+        );
+        line-height: var(--ui-line-height-tight, 1.25);
+      }
       .btn-cancel {
         background: none;
         border: 1px solid var(--ui-border, #e2e8f0);
@@ -128,7 +145,6 @@ let ConfirmDialog = class ConfirmDialog extends LitElement {
         padding: 0.5rem 1rem;
         font-size: var(--ui-font-size-sm, 0.75rem);
         cursor: pointer;
-        font-family: inherit;
       }
       .btn-cancel:hover:not(:disabled) {
         border-color: var(--ui-text-muted, #64748b);
@@ -139,12 +155,11 @@ let ConfirmDialog = class ConfirmDialog extends LitElement {
         border-radius: var(--ui-radius-sm, 0.25rem);
         padding: 0.5rem 1rem;
         font-size: var(--ui-font-size-sm, 0.75rem);
-        font-weight: 500;
+        font-weight: var(--ui-font-weight-medium, 500);
         cursor: pointer;
         display: inline-flex;
         align-items: center;
         gap: 0.25rem;
-        font-family: inherit;
       }
       .btn-danger {
         background: var(--ui-danger, #dc2626);
@@ -199,6 +214,9 @@ let ConfirmDialog = class ConfirmDialog extends LitElement {
           padding: 0.75rem;
           overflow-y: auto;
         }
+        .dialog {
+          padding: 0.75rem;
+        }
       }
     `,
     ]; }

package/dist/confirm-dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"confirm-dialog.js","sourceRoot":"","sources":["../src/confirm-dialog.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, css, html, nothing, type PropertyValues } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { iconArrowPath } from \"./icons.js\";\nimport { tokens } from \"./tokens.js\";\nimport {\n  activateLayer,\n  claimEscape,\n  deactivateLayer,\n  isTopLayer,\n} from \"./utils/layer-stack.js\";\n\n/**\n * Reusable confirmation dialog: overlay + centered card with a slotted body,\n * an optional error line, and Cancel/Confirm actions. Instant `display:none`\n * → `display:flex` toggle (no transitions). Fires `confirm`/`cancel`\n * (bubbling, composed) instead of owning any deletion logic itself —\n * callers stay in charge of the request.\n *\n * @element confirm-dialog\n * @fires confirm - User clicked the confirm button.\n * @fires cancel - User clicked the cancel button.\n */\n@customElement(\"confirm-dialog\")\nexport class ConfirmDialog extends LitElement {\n  static override styles = [\n    tokens,\n    css`\n      .overlay {\n        position: fixed;\n        inset: 0;\n        background: var(--ui-overlay, rgb(15 23 42 / 0.45));\n        z-index: var(--component-layer-z, 50);\n        display: none;\n        align-items: flex-start;\n        justify-content: center;\n        padding: 10vh 1.25rem 1.25rem;\n        box-sizing: border-box;\n      }\n      .overlay.open {\n        display: flex;\n      }\n      .dialog {\n        background: var(--ui-surface, #ffffff);\n        border-radius: var(--ui-radius, 0.5rem);\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        width: 100%;\n        max-width: 26.25rem;\n        padding: 1.25rem;\n        box-sizing: border-box;\n        outline: none;\n      }\n      .dialog-text {\n        margin: 0 0 1rem;\n        color: var(--ui-text, #0f172a);\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.45;\n      }\n      .dialog-actions {\n        display: flex;\n        justify-content: flex-end;\n        gap: 0.5rem;\n      }\n      .btn-cancel {\n        background: none;\n        border: 1px solid var(--ui-border, #e2e8f0);\n        color: var(--ui-text, #0f172a);\n        border-radius: var(--ui-radius-sm, 0.25rem);\n        padding: 0.5rem 1rem;\n        font-size: var(--ui-font-size-sm, 0.75rem);\n        cursor: pointer;\n        font-family: inherit;\n      }\n      .btn-cancel:hover:not(:disabled) {\n        border-color: var(--ui-text-muted, #64748b);\n      }\n      .btn-danger,\n      .btn-primary {\n        border: none;\n        border-radius: var(--ui-radius-sm, 0.25rem);\n        padding: 0.5rem 1rem;\n        font-size: var(--ui-font-size-sm, 0.75rem);\n        font-weight: 500;\n        cursor: pointer;\n        display: inline-flex;\n        align-items: center;\n        gap: 0.25rem;\n        font-family: inherit;\n      }\n      .btn-danger {\n        background: var(--ui-danger, #dc2626);\n        color: var(--ui-on-accent, #ffffff);\n      }\n      .btn-danger:hover:not(:disabled) {\n        background: var(--ui-danger-hover, #b91c1c);\n      }\n      .btn-primary {\n        background: var(--ui-primary, #4f46e5);\n        color: var(--ui-on-accent, #ffffff);\n      }\n      .btn-primary:hover:not(:disabled) {\n        background: var(--ui-primary-hover, #4338ca);\n      }\n      button:disabled {\n        opacity: 0.6;\n        cursor: default;\n      }\n      button:focus-visible {\n        outline: none;\n        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));\n      }\n      .error-text {\n        color: var(--ui-danger, #dc2626);\n        font-size: var(--ui-font-size-sm, 0.75rem);\n        margin: 0.5rem 0 0.75rem;\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      @media (forced-colors: active) {\n        button:focus-visible {\n          outline: 2px solid CanvasText;\n          outline-offset: 2px;\n          box-shadow: none;\n        }\n      }\n      @media (max-width: 48rem) {\n        .overlay {\n          padding: 0.75rem;\n          overflow-y: auto;\n        }\n      }\n    `,\n  ];\n\n  /** Whether the dialog is visible. */\n  @property({ type: Boolean }) open = false;\n  /** Label for the confirm button. */\n  @property({ attribute: \"confirm-label\" }) confirmLabel = \"Delete\";\n  /** Label for the cancel button. */\n  @property({ attribute: \"cancel-label\" }) cancelLabel = \"Cancel\";\n  /** Danger (red) vs. primary (indigo) styling for the confirm button. */\n  @property({ type: Boolean }) danger = true;\n  /** Shows a spinner and disables both buttons while a request is in flight. */\n  @property({ type: Boolean }) busy = false;\n  /** Inline error line shown below the body, or null for none. */\n  @property() error: string | null = null;\n\n  private _previousFocus: HTMLElement | null = null;\n\n  private _confirm() {\n    this.dispatchEvent(new CustomEvent(\"confirm\", { bubbles: true, composed: true }));\n  }\n\n  private _cancel() {\n    this.dispatchEvent(new CustomEvent(\"cancel\", { bubbles: true, composed: true }));\n  }\n\n  private _getFocusableElements(): HTMLElement[] {\n    const selector =\n      \"a[href], button:not(:disabled), input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex='-1'])\";\n    const slotted = Array.from(this.querySelectorAll<HTMLElement>(selector));\n    const internal = Array.from(\n      this.shadowRoot?.querySelectorAll<HTMLElement>(selector) ?? [],\n    ).filter((element) => element.closest(\".dialog\") !== null);\n    return [...slotted, ...internal].filter((element) => !element.hasAttribute(\"hidden\"));\n  }\n\n  private _focusInitial(): void {\n    const autofocus = this.querySelector<HTMLElement>(\"[autofocus]\");\n    const cancel = this.shadowRoot?.querySelector<HTMLElement>(\".btn-cancel:not(:disabled)\");\n    const dialog = this.shadowRoot?.querySelector<HTMLElement>(\".dialog\");\n    (autofocus ?? cancel ?? this._getFocusableElements()[0] ?? dialog)?.focus();\n  }\n\n  private _onDocumentFocusIn = (event: FocusEvent): void => {\n    if (!this.open || !isTopLayer(this) || event.composedPath().includes(this)) return;\n    this._focusInitial();\n  };\n\n  private _onWindowKeydown = (event: KeyboardEvent): void => {\n    if (!this.open || !isTopLayer(this)) return;\n    if (claimEscape(this, event) && !this.busy) {\n      this._cancel();\n      return;\n    }\n    if (event.key !== \"Tab\") return;\n\n    const focusable = this._getFocusableElements();\n    if (focusable.length === 0) {\n      event.preventDefault();\n      this._focusInitial();\n      return;\n    }\n    const active = (this.shadowRoot?.activeElement ?? document.activeElement) as HTMLElement | null;\n    const index = focusable.indexOf(active as HTMLElement);\n    if (event.shiftKey && index <= 0) {\n      event.preventDefault();\n      focusable.at(-1)?.focus();\n    } else if (!event.shiftKey && index === focusable.length - 1) {\n      event.preventDefault();\n      focusable[0]?.focus();\n    }\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      document.addEventListener(\"focusin\", this._onDocumentFocusIn, true);\n      window.addEventListener(\"keydown\", this._onWindowKeydown, true);\n      this._focusInitial();\n      return;\n    }\n    deactivateLayer(this);\n    document.removeEventListener(\"focusin\", this._onDocumentFocusIn, true);\n    window.removeEventListener(\"keydown\", this._onWindowKeydown, true);\n    if (this._previousFocus?.isConnected) this._previousFocus.focus();\n    this._previousFocus = null;\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    document.removeEventListener(\"focusin\", this._onDocumentFocusIn, true);\n    window.removeEventListener(\"keydown\", this._onWindowKeydown, true);\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 accessibleName = this.getAttribute(\"aria-label\") ?? \"Confirmation\";\n    return html`\n      <div class=\"overlay ${this.open ? \"open\" : \"\"}\">\n        <div\n          class=\"dialog\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-label=${accessibleName}\n          aria-describedby=${this.error ? \"dialog-text dialog-error\" : \"dialog-text\"}\n          tabindex=\"-1\"\n        >\n          <p id=\"dialog-text\" class=\"dialog-text\"><slot></slot></p>\n          ${this.error\n            ? html`<p id=\"dialog-error\" class=\"error-text\" role=\"alert\">${this.error}</p>`\n            : nothing}\n          <div class=\"dialog-actions\">\n            <button class=\"btn-cancel\" ?disabled=${this.busy} @click=${this._cancel}>${this.cancelLabel}</button>\n            <button class=${this.danger ? \"btn-danger\" : \"btn-primary\"} ?disabled=${this.busy} @click=${this._confirm}>\n              ${this.busy\n                ? html`<span class=\"spin\" aria-hidden=\"true\">${iconArrowPath(14)}</span>`\n                : nothing}\n              ${this.confirmLabel}\n            </button>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"confirm-dialog\": ConfirmDialog;\n  }\n}\n"]}
+{"version":3,"file":"confirm-dialog.js","sourceRoot":"","sources":["../src/confirm-dialog.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, css, html, nothing, type PropertyValues } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { iconArrowPath } from \"./icons.js\";\nimport { tokens } from \"./tokens.js\";\nimport {\n  activateLayer,\n  claimEscape,\n  deactivateLayer,\n  isTopLayer,\n} from \"./utils/layer-stack.js\";\n\n/**\n * Reusable confirmation dialog: overlay + centered card with a slotted body,\n * an optional error line, and Cancel/Confirm actions. Instant `display:none`\n * → `display:flex` toggle (no transitions). Fires `confirm`/`cancel`\n * (bubbling, composed) instead of owning any deletion logic itself —\n * callers stay in charge of the request.\n *\n * @element confirm-dialog\n * @fires confirm - User clicked the confirm button.\n * @fires cancel - User clicked the cancel button.\n */\n@customElement(\"confirm-dialog\")\nexport class ConfirmDialog extends LitElement {\n  static override styles = [\n    tokens,\n    css`\n      .overlay {\n        position: fixed;\n        inset: 0;\n        background: var(--ui-overlay, rgb(15 23 42 / 0.45));\n        z-index: var(--component-layer-z, 50);\n        display: none;\n        align-items: flex-start;\n        justify-content: center;\n        padding: 10vh 1.25rem 1.25rem;\n        box-sizing: border-box;\n      }\n      .overlay.open {\n        display: flex;\n      }\n      .dialog {\n        background: var(--ui-surface, #ffffff);\n        border-radius: var(--ui-radius, 0.5rem);\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        width: 100%;\n        max-width: min(25rem, calc(100vw - 2rem));\n        padding: 1rem;\n        box-sizing: border-box;\n        outline: none;\n      }\n      .dialog-text {\n        margin: 0 0 1rem;\n        color: var(--ui-text, #0f172a);\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: var(--ui-line-height-normal, 1.5);\n      }\n      .dialog-actions {\n        display: flex;\n        justify-content: flex-end;\n        gap: 0.5rem;\n      }\n      .btn-cancel,\n      .btn-danger,\n      .btn-primary {\n        height: 2rem;\n        box-sizing: border-box;\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        line-height: var(--ui-line-height-tight, 1.25);\n      }\n      .btn-cancel {\n        background: none;\n        border: 1px solid var(--ui-border, #e2e8f0);\n        color: var(--ui-text, #0f172a);\n        border-radius: var(--ui-radius-sm, 0.25rem);\n        padding: 0.5rem 1rem;\n        font-size: var(--ui-font-size-sm, 0.75rem);\n        cursor: pointer;\n      }\n      .btn-cancel:hover:not(:disabled) {\n        border-color: var(--ui-text-muted, #64748b);\n      }\n      .btn-danger,\n      .btn-primary {\n        border: none;\n        border-radius: var(--ui-radius-sm, 0.25rem);\n        padding: 0.5rem 1rem;\n        font-size: var(--ui-font-size-sm, 0.75rem);\n        font-weight: var(--ui-font-weight-medium, 500);\n        cursor: pointer;\n        display: inline-flex;\n        align-items: center;\n        gap: 0.25rem;\n      }\n      .btn-danger {\n        background: var(--ui-danger, #dc2626);\n        color: var(--ui-on-accent, #ffffff);\n      }\n      .btn-danger:hover:not(:disabled) {\n        background: var(--ui-danger-hover, #b91c1c);\n      }\n      .btn-primary {\n        background: var(--ui-primary, #4f46e5);\n        color: var(--ui-on-accent, #ffffff);\n      }\n      .btn-primary:hover:not(:disabled) {\n        background: var(--ui-primary-hover, #4338ca);\n      }\n      button:disabled {\n        opacity: 0.6;\n        cursor: default;\n      }\n      button:focus-visible {\n        outline: none;\n        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));\n      }\n      .error-text {\n        color: var(--ui-danger, #dc2626);\n        font-size: var(--ui-font-size-sm, 0.75rem);\n        margin: 0.5rem 0 0.75rem;\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      @media (forced-colors: active) {\n        button:focus-visible {\n          outline: 2px solid CanvasText;\n          outline-offset: 2px;\n          box-shadow: none;\n        }\n      }\n      @media (max-width: 48rem) {\n        .overlay {\n          padding: 0.75rem;\n          overflow-y: auto;\n        }\n        .dialog {\n          padding: 0.75rem;\n        }\n      }\n    `,\n  ];\n\n  /** Whether the dialog is visible. */\n  @property({ type: Boolean }) open = false;\n  /** Label for the confirm button. */\n  @property({ attribute: \"confirm-label\" }) confirmLabel = \"Delete\";\n  /** Label for the cancel button. */\n  @property({ attribute: \"cancel-label\" }) cancelLabel = \"Cancel\";\n  /** Danger (red) vs. primary (indigo) styling for the confirm button. */\n  @property({ type: Boolean }) danger = true;\n  /** Shows a spinner and disables both buttons while a request is in flight. */\n  @property({ type: Boolean }) busy = false;\n  /** Inline error line shown below the body, or null for none. */\n  @property() error: string | null = null;\n\n  private _previousFocus: HTMLElement | null = null;\n\n  private _confirm() {\n    this.dispatchEvent(new CustomEvent(\"confirm\", { bubbles: true, composed: true }));\n  }\n\n  private _cancel() {\n    this.dispatchEvent(new CustomEvent(\"cancel\", { bubbles: true, composed: true }));\n  }\n\n  private _getFocusableElements(): HTMLElement[] {\n    const selector =\n      \"a[href], button:not(:disabled), input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex='-1'])\";\n    const slotted = Array.from(this.querySelectorAll<HTMLElement>(selector));\n    const internal = Array.from(\n      this.shadowRoot?.querySelectorAll<HTMLElement>(selector) ?? [],\n    ).filter((element) => element.closest(\".dialog\") !== null);\n    return [...slotted, ...internal].filter((element) => !element.hasAttribute(\"hidden\"));\n  }\n\n  private _focusInitial(): void {\n    const autofocus = this.querySelector<HTMLElement>(\"[autofocus]\");\n    const cancel = this.shadowRoot?.querySelector<HTMLElement>(\".btn-cancel:not(:disabled)\");\n    const dialog = this.shadowRoot?.querySelector<HTMLElement>(\".dialog\");\n    (autofocus ?? cancel ?? this._getFocusableElements()[0] ?? dialog)?.focus();\n  }\n\n  private _onDocumentFocusIn = (event: FocusEvent): void => {\n    if (!this.open || !isTopLayer(this) || event.composedPath().includes(this)) return;\n    this._focusInitial();\n  };\n\n  private _onWindowKeydown = (event: KeyboardEvent): void => {\n    if (!this.open || !isTopLayer(this)) return;\n    if (claimEscape(this, event) && !this.busy) {\n      this._cancel();\n      return;\n    }\n    if (event.key !== \"Tab\") return;\n\n    const focusable = this._getFocusableElements();\n    if (focusable.length === 0) {\n      event.preventDefault();\n      this._focusInitial();\n      return;\n    }\n    const active = (this.shadowRoot?.activeElement ?? document.activeElement) as HTMLElement | null;\n    const index = focusable.indexOf(active as HTMLElement);\n    if (event.shiftKey && index <= 0) {\n      event.preventDefault();\n      focusable.at(-1)?.focus();\n    } else if (!event.shiftKey && index === focusable.length - 1) {\n      event.preventDefault();\n      focusable[0]?.focus();\n    }\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      document.addEventListener(\"focusin\", this._onDocumentFocusIn, true);\n      window.addEventListener(\"keydown\", this._onWindowKeydown, true);\n      this._focusInitial();\n      return;\n    }\n    deactivateLayer(this);\n    document.removeEventListener(\"focusin\", this._onDocumentFocusIn, true);\n    window.removeEventListener(\"keydown\", this._onWindowKeydown, true);\n    if (this._previousFocus?.isConnected) this._previousFocus.focus();\n    this._previousFocus = null;\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    document.removeEventListener(\"focusin\", this._onDocumentFocusIn, true);\n    window.removeEventListener(\"keydown\", this._onWindowKeydown, true);\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 accessibleName = this.getAttribute(\"aria-label\") ?? \"Confirmation\";\n    return html`\n      <div class=\"overlay ${this.open ? \"open\" : \"\"}\">\n        <div\n          class=\"dialog\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-label=${accessibleName}\n          aria-describedby=${this.error ? \"dialog-text dialog-error\" : \"dialog-text\"}\n          tabindex=\"-1\"\n        >\n          <p id=\"dialog-text\" class=\"dialog-text\"><slot></slot></p>\n          ${this.error\n            ? html`<p id=\"dialog-error\" class=\"error-text\" role=\"alert\">${this.error}</p>`\n            : nothing}\n          <div class=\"dialog-actions\">\n            <button class=\"btn-cancel\" ?disabled=${this.busy} @click=${this._cancel}>${this.cancelLabel}</button>\n            <button class=${this.danger ? \"btn-danger\" : \"btn-primary\"} ?disabled=${this.busy} @click=${this._confirm}>\n              ${this.busy\n                ? html`<span class=\"spin\" aria-hidden=\"true\">${iconArrowPath(14)}</span>`\n                : nothing}\n              ${this.confirmLabel}\n            </button>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"confirm-dialog\": ConfirmDialog;\n  }\n}\n"]}

package/dist/copy-link-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"copy-link-button.d.ts","sourceRoot":"","sources":["../src/copy-link-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAM5C;;;;;;;;;;GAUG;AACH,qBACa,cAAe,SAAQ,UAAU;IAC5C,sEAAsE;IAC1D,KAAK,SAAM;IACvB,uCAAuC;IAC3B,KAAK,SAAe;IAChC,kCAAkC;IACL,QAAQ,UAAS;IAE9C,OAAgB,MAAM,4BAyCpB;YAEY,QAAQ;IAab,MAAM,yCAYd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}
+{"version":3,"file":"copy-link-button.d.ts","sourceRoot":"","sources":["../src/copy-link-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAM5C;;;;;;;;;;GAUG;AACH,qBACa,cAAe,SAAQ,UAAU;IAC5C,sEAAsE;IAC1D,KAAK,SAAM;IACvB,uCAAuC;IAC3B,KAAK,SAAe;IAChC,kCAAkC;IACL,QAAQ,UAAS;IAE9C,OAAgB,MAAM,4BA2CpB;YAEY,QAAQ;IAab,MAAM,yCAYd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}

package/dist/copy-link-button.js

@@ -40,7 +40,9 @@ let CopyLinkButton = class CopyLinkButton extends LitElement {
         background: none;
         border: none;
         cursor: pointer;
-        padding: 0.25rem;
+        width: 2rem;
+        height: 2rem;
+        padding: 0;
         color: var(--ui-text-muted, #64748b);
         border-radius: var(--ui-radius-sm, 0.25rem);
         display: inline-flex;
@@ -95,7 +97,7 @@ let CopyLinkButton = class CopyLinkButton extends LitElement {
         ?disabled=${this.disabled}
         @click=${this._onClick}
       >
-        ${iconLink(16)}
+        ${iconLink(18)}
       </button>
     `;
     }

package/dist/copy-link-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"copy-link-button.js","sourceRoot":"","sources":["../src/copy-link-button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC;;;;;;;;;;GAUG;AAEI,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAAvC;;QACL,sEAAsE;QAC1D,UAAK,GAAG,EAAE,CAAC;QACvB,uCAAuC;QAC3B,UAAK,GAAG,WAAW,CAAC;QAChC,kCAAkC;QACL,aAAQ,GAAG,KAAK,CAAC;IAuEhD,CAAC;aArEiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsCF;KACF,AAzCqB,CAyCpB;IAEM,KAAK,CAAC,QAAQ;QACpB,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,IAAI,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC;QAChD,IAAI,CAAC;YACH,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;YAC1C,aAAa,CAAC,0BAA0B,CAAC,CAAC;YAC1C,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,cAAc,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QACzF,CAAC;QAAC,MAAM,CAAC;YACP,WAAW,CAAC,wBAAwB,CAAC,CAAC;YACtC,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QACvF,CAAC;IACH,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;;;qBAGM,IAAI,CAAC,KAAK;gBACf,IAAI,CAAC,KAAK;oBACN,IAAI,CAAC,QAAQ;iBAChB,IAAI,CAAC,QAAQ;;UAEpB,QAAQ,CAAC,EAAE,CAAC;;KAEjB,CAAC;IACJ,CAAC;CACF,CAAA;AA3Ea;IAAX,QAAQ,EAAE;6CAAY;AAEX;IAAX,QAAQ,EAAE;6CAAqB;AAEH;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;gDAAkB;AANnC,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CA6E1B","sourcesContent":["import { LitElement, css, html } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { iconLink } from \"./icons.js\";\nimport { notifyError, notifySuccess } from \"./toast-notification.js\";\nimport { tokens } from \"./tokens.js\";\n\n/**\n * Small icon button that copies `value` to the clipboard and shows a toast\n * on success/failure (if a `<toast-notification>` element is present), and\n * always dispatches a `copy-success`/`copy-error` CustomEvent so consumers\n * without a toast element can react. Defaults to the current page URL if\n * `value` is unset.\n *\n * @element copy-link-button\n * @fires copy-success - The value was copied to the clipboard.\n * @fires copy-error - Copying to the clipboard failed.\n */\n@customElement(\"copy-link-button\")\nexport class CopyLinkButton extends LitElement {\n  /** Text to copy. Defaults to `window.location.href` at click time. */\n  @property() value = \"\";\n  /** Accessible label / tooltip text. */\n  @property() label = \"Copy link\";\n  /** Disables clipboard copying. */\n  @property({ type: Boolean }) disabled = false;\n\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: inline-flex;\n      }\n      button {\n        background: none;\n        border: none;\n        cursor: pointer;\n        padding: 0.25rem;\n        color: var(--ui-text-muted, #64748b);\n        border-radius: var(--ui-radius-sm, 0.25rem);\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n      }\n      button:hover:not(:disabled) {\n        background: var(--ui-surface-muted, #f8fafc);\n        color: var(--ui-text, #0f172a);\n      }\n      button:disabled {\n        cursor: not-allowed;\n        opacity: 0.6;\n      }\n      button:focus-visible {\n        outline: none;\n        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));\n      }\n      @media (forced-colors: active) {\n        button:focus-visible {\n          outline: 2px solid CanvasText;\n          outline-offset: 2px;\n          box-shadow: none;\n        }\n        button:disabled {\n          color: GrayText;\n          opacity: 1;\n        }\n      }\n    `,\n  ];\n\n  private async _onClick() {\n    if (this.disabled) return;\n    const text = this.value || window.location.href;\n    try {\n      await navigator.clipboard.writeText(text);\n      notifySuccess(\"Link copied to clipboard\");\n      this.dispatchEvent(new CustomEvent(\"copy-success\", { bubbles: true, composed: true }));\n    } catch {\n      notifyError(\"Couldn't copy the link\");\n      this.dispatchEvent(new CustomEvent(\"copy-error\", { bubbles: true, composed: true }));\n    }\n  }\n\n  override render() {\n    return html`\n      <button\n        type=\"button\"\n        aria-label=${this.label}\n        title=${this.label}\n        ?disabled=${this.disabled}\n        @click=${this._onClick}\n      >\n        ${iconLink(16)}\n      </button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"copy-link-button\": CopyLinkButton;\n  }\n}\n"]}
+{"version":3,"file":"copy-link-button.js","sourceRoot":"","sources":["../src/copy-link-button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC;;;;;;;;;;GAUG;AAEI,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAAvC;;QACL,sEAAsE;QAC1D,UAAK,GAAG,EAAE,CAAC;QACvB,uCAAuC;QAC3B,UAAK,GAAG,WAAW,CAAC;QAChC,kCAAkC;QACL,aAAQ,GAAG,KAAK,CAAC;IAyEhD,CAAC;aAvEiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwCF;KACF,AA3CqB,CA2CpB;IAEM,KAAK,CAAC,QAAQ;QACpB,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,IAAI,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC;QAChD,IAAI,CAAC;YACH,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;YAC1C,aAAa,CAAC,0BAA0B,CAAC,CAAC;YAC1C,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,cAAc,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QACzF,CAAC;QAAC,MAAM,CAAC;YACP,WAAW,CAAC,wBAAwB,CAAC,CAAC;YACtC,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QACvF,CAAC;IACH,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;;;qBAGM,IAAI,CAAC,KAAK;gBACf,IAAI,CAAC,KAAK;oBACN,IAAI,CAAC,QAAQ;iBAChB,IAAI,CAAC,QAAQ;;UAEpB,QAAQ,CAAC,EAAE,CAAC;;KAEjB,CAAC;IACJ,CAAC;CACF,CAAA;AA7Ea;IAAX,QAAQ,EAAE;6CAAY;AAEX;IAAX,QAAQ,EAAE;6CAAqB;AAEH;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;gDAAkB;AANnC,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CA+E1B","sourcesContent":["import { LitElement, css, html } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { iconLink } from \"./icons.js\";\nimport { notifyError, notifySuccess } from \"./toast-notification.js\";\nimport { tokens } from \"./tokens.js\";\n\n/**\n * Small icon button that copies `value` to the clipboard and shows a toast\n * on success/failure (if a `<toast-notification>` element is present), and\n * always dispatches a `copy-success`/`copy-error` CustomEvent so consumers\n * without a toast element can react. Defaults to the current page URL if\n * `value` is unset.\n *\n * @element copy-link-button\n * @fires copy-success - The value was copied to the clipboard.\n * @fires copy-error - Copying to the clipboard failed.\n */\n@customElement(\"copy-link-button\")\nexport class CopyLinkButton extends LitElement {\n  /** Text to copy. Defaults to `window.location.href` at click time. */\n  @property() value = \"\";\n  /** Accessible label / tooltip text. */\n  @property() label = \"Copy link\";\n  /** Disables clipboard copying. */\n  @property({ type: Boolean }) disabled = false;\n\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: inline-flex;\n      }\n      button {\n        background: none;\n        border: none;\n        cursor: pointer;\n        width: 2rem;\n        height: 2rem;\n        padding: 0;\n        color: var(--ui-text-muted, #64748b);\n        border-radius: var(--ui-radius-sm, 0.25rem);\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n      }\n      button:hover:not(:disabled) {\n        background: var(--ui-surface-muted, #f8fafc);\n        color: var(--ui-text, #0f172a);\n      }\n      button:disabled {\n        cursor: not-allowed;\n        opacity: 0.6;\n      }\n      button:focus-visible {\n        outline: none;\n        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));\n      }\n      @media (forced-colors: active) {\n        button:focus-visible {\n          outline: 2px solid CanvasText;\n          outline-offset: 2px;\n          box-shadow: none;\n        }\n        button:disabled {\n          color: GrayText;\n          opacity: 1;\n        }\n      }\n    `,\n  ];\n\n  private async _onClick() {\n    if (this.disabled) return;\n    const text = this.value || window.location.href;\n    try {\n      await navigator.clipboard.writeText(text);\n      notifySuccess(\"Link copied to clipboard\");\n      this.dispatchEvent(new CustomEvent(\"copy-success\", { bubbles: true, composed: true }));\n    } catch {\n      notifyError(\"Couldn't copy the link\");\n      this.dispatchEvent(new CustomEvent(\"copy-error\", { bubbles: true, composed: true }));\n    }\n  }\n\n  override render() {\n    return html`\n      <button\n        type=\"button\"\n        aria-label=${this.label}\n        title=${this.label}\n        ?disabled=${this.disabled}\n        @click=${this._onClick}\n      >\n        ${iconLink(18)}\n      </button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"copy-link-button\": CopyLinkButton;\n  }\n}\n"]}

package/dist/data-table.js

@@ -59,7 +59,7 @@ let DataTable = class DataTable extends LitElement {
       }
       th {
         text-align: left;
-        font-weight: 600;
+        font-weight: var(--ui-font-weight-semibold, 600);
         color: var(--ui-text-muted, #64748b);
         padding: 0.5rem 0.75rem;
         border-bottom: 1px solid var(--ui-border, #e2e8f0);

package/dist/data-table.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table.js","sourceRoot":"","sources":["../src/data-table.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 { tokens } from \"./tokens.js\";\n\n/** One column header: `key` is looked up via `renderCell`/`getCellValue`, `label` is the header text. */\nexport interface DataTableColumn {\n  key: string;\n  label: string;\n}\n\n/**\n * A generic, presentational table shell: renders a `<thead>` from `columns`\n * and one `<tr>` per entry in `rows`, with each cell's content produced by\n * `renderCell` (default: plain property lookup on the row object). Knows\n * nothing about what a \"row\" means — callers own the data shape entirely.\n *\n * Optional `rowHref` makes whole rows clickable (navigating via `location.hash`),\n * without hijacking clicks on nested interactive elements (links/buttons) a\n * cell's rendered content might contain.\n *\n * @element data-table\n */\n@customElement(\"data-table\")\nexport class DataTable 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      table {\n        width: 100%;\n        border-collapse: collapse;\n      }\n      th {\n        text-align: left;\n        font-weight: 600;\n        color: var(--ui-text-muted, #64748b);\n        padding: 0.5rem 0.75rem;\n        border-bottom: 1px solid var(--ui-border, #e2e8f0);\n      }\n      td {\n        padding: 0.5rem 0.75rem;\n        border-bottom: 1px solid var(--ui-border, #e2e8f0);\n        color: var(--ui-text, #0f172a);\n      }\n      td:first-child {\n        position: relative;\n      }\n      .row-link {\n        position: absolute;\n        width: 1px;\n        height: 1px;\n        overflow: hidden;\n        clip: rect(0 0 0 0);\n        clip-path: inset(50%);\n        white-space: nowrap;\n      }\n      tbody tr.clickable {\n        cursor: pointer;\n      }\n      tbody tr.clickable:hover {\n        background: var(--ui-surface-muted, #f8fafc);\n      }\n      tbody tr.clickable:has(.row-link:focus-visible) {\n        outline: none;\n        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35)) inset;\n      }\n      @media (forced-colors: active) {\n        tbody tr.clickable:has(.row-link:focus-visible) {\n          outline: 2px solid CanvasText;\n          outline-offset: -2px;\n          box-shadow: none;\n        }\n      }\n    `,\n  ];\n\n  /** Column headers, in display order. */\n  @property({ attribute: false }) columns: DataTableColumn[] = [];\n  /** Row data; opaque to this component beyond what `renderCell` does with it. */\n  @property({ attribute: false }) rows: unknown[] = [];\n  /** Stable identity for `rows[i]`, used as the repeat-directive key. Defaults to the row's index. */\n  @property({ attribute: false }) rowKey: (row: unknown, index: number) => string | number = (\n    _row,\n    index,\n  ) => index;\n  /** Produces a cell's rendered content for `row`/`column.key`. Default: `row[key]`. */\n  @property({ attribute: false }) renderCell: (row: unknown, key: string) => unknown = (\n    row,\n    key,\n  ) => (row as Record<string, unknown>)[key];\n  /** When set, clicking a row (outside any nested link/button) navigates to this hash. */\n  @property({ attribute: false }) rowHref: ((row: unknown) => string | null) | null = null;\n  /** Accessible label for a row's keyboard link; defaults to primitive cell values. */\n  @property({ attribute: false }) rowLabel: ((row: unknown) => string) | null = null;\n\n  #onRowClick(row: unknown, e: MouseEvent): void {\n    if (!this.rowHref) return;\n    if (this.#isNestedInteractive(e.composedPath(), e.currentTarget)) return;\n    const href = this.rowHref(row);\n    if (href) location.hash = href;\n  }\n\n  #isNestedInteractive(path: EventTarget[], row: 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 === row) return false;\n      if (target instanceof HTMLElement && target.matches(selector)) return true;\n    }\n    return false;\n  }\n\n  #rowLinkLabel(row: unknown): string {\n    const explicitLabel = this.rowLabel?.(row).trim();\n    if (explicitLabel) return explicitLabel;\n    const values = this.columns\n      .map((column) => (row as Record<string, unknown>)[column.key])\n      .filter((value) => typeof value === \"string\" || typeof value === \"number\");\n    return values.length > 0 ? `Open ${values.join(\", \")}` : \"Open row\";\n  }\n\n  override render() {\n    return html`\n      <table>\n        <thead>\n          <tr>\n            ${this.columns.map((c) => html`<th>${c.label}</th>`)}\n          </tr>\n        </thead>\n        <tbody>\n          ${repeat(\n            this.rows,\n            (row, i) => this.rowKey(row, i),\n            (row) => {\n              const href = this.rowHref?.(row) ?? null;\n              return html`\n                <tr\n                  class=${href ? \"clickable\" : \"\"}\n                  @click=${(e: MouseEvent) => this.#onRowClick(row, e)}\n                >\n                  ${this.columns.map(\n                    (c, columnIndex) => html`\n                      <td>\n                        ${href && columnIndex === 0\n                          ? html`\n                              <a\n                                class=\"row-link\"\n                                href=${href}\n                                aria-label=${this.#rowLinkLabel(row)}\n                              ></a>\n                            `\n                          : nothing}\n                        ${this.renderCell(row, c.key) ?? nothing}\n                      </td>\n                    `,\n                  )}\n                </tr>\n              `;\n            },\n          )}\n        </tbody>\n      </table>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"data-table\": DataTable;\n  }\n}\n"]}
+{"version":3,"file":"data-table.js","sourceRoot":"","sources":["../src/data-table.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 { tokens } from \"./tokens.js\";\n\n/** One column header: `key` is looked up via `renderCell`/`getCellValue`, `label` is the header text. */\nexport interface DataTableColumn {\n  key: string;\n  label: string;\n}\n\n/**\n * A generic, presentational table shell: renders a `<thead>` from `columns`\n * and one `<tr>` per entry in `rows`, with each cell's content produced by\n * `renderCell` (default: plain property lookup on the row object). Knows\n * nothing about what a \"row\" means — callers own the data shape entirely.\n *\n * Optional `rowHref` makes whole rows clickable (navigating via `location.hash`),\n * without hijacking clicks on nested interactive elements (links/buttons) a\n * cell's rendered content might contain.\n *\n * @element data-table\n */\n@customElement(\"data-table\")\nexport class DataTable 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      table {\n        width: 100%;\n        border-collapse: collapse;\n      }\n      th {\n        text-align: left;\n        font-weight: var(--ui-font-weight-semibold, 600);\n        color: var(--ui-text-muted, #64748b);\n        padding: 0.5rem 0.75rem;\n        border-bottom: 1px solid var(--ui-border, #e2e8f0);\n      }\n      td {\n        padding: 0.5rem 0.75rem;\n        border-bottom: 1px solid var(--ui-border, #e2e8f0);\n        color: var(--ui-text, #0f172a);\n      }\n      td:first-child {\n        position: relative;\n      }\n      .row-link {\n        position: absolute;\n        width: 1px;\n        height: 1px;\n        overflow: hidden;\n        clip: rect(0 0 0 0);\n        clip-path: inset(50%);\n        white-space: nowrap;\n      }\n      tbody tr.clickable {\n        cursor: pointer;\n      }\n      tbody tr.clickable:hover {\n        background: var(--ui-surface-muted, #f8fafc);\n      }\n      tbody tr.clickable:has(.row-link:focus-visible) {\n        outline: none;\n        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35)) inset;\n      }\n      @media (forced-colors: active) {\n        tbody tr.clickable:has(.row-link:focus-visible) {\n          outline: 2px solid CanvasText;\n          outline-offset: -2px;\n          box-shadow: none;\n        }\n      }\n    `,\n  ];\n\n  /** Column headers, in display order. */\n  @property({ attribute: false }) columns: DataTableColumn[] = [];\n  /** Row data; opaque to this component beyond what `renderCell` does with it. */\n  @property({ attribute: false }) rows: unknown[] = [];\n  /** Stable identity for `rows[i]`, used as the repeat-directive key. Defaults to the row's index. */\n  @property({ attribute: false }) rowKey: (row: unknown, index: number) => string | number = (\n    _row,\n    index,\n  ) => index;\n  /** Produces a cell's rendered content for `row`/`column.key`. Default: `row[key]`. */\n  @property({ attribute: false }) renderCell: (row: unknown, key: string) => unknown = (\n    row,\n    key,\n  ) => (row as Record<string, unknown>)[key];\n  /** When set, clicking a row (outside any nested link/button) navigates to this hash. */\n  @property({ attribute: false }) rowHref: ((row: unknown) => string | null) | null = null;\n  /** Accessible label for a row's keyboard link; defaults to primitive cell values. */\n  @property({ attribute: false }) rowLabel: ((row: unknown) => string) | null = null;\n\n  #onRowClick(row: unknown, e: MouseEvent): void {\n    if (!this.rowHref) return;\n    if (this.#isNestedInteractive(e.composedPath(), e.currentTarget)) return;\n    const href = this.rowHref(row);\n    if (href) location.hash = href;\n  }\n\n  #isNestedInteractive(path: EventTarget[], row: 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 === row) return false;\n      if (target instanceof HTMLElement && target.matches(selector)) return true;\n    }\n    return false;\n  }\n\n  #rowLinkLabel(row: unknown): string {\n    const explicitLabel = this.rowLabel?.(row).trim();\n    if (explicitLabel) return explicitLabel;\n    const values = this.columns\n      .map((column) => (row as Record<string, unknown>)[column.key])\n      .filter((value) => typeof value === \"string\" || typeof value === \"number\");\n    return values.length > 0 ? `Open ${values.join(\", \")}` : \"Open row\";\n  }\n\n  override render() {\n    return html`\n      <table>\n        <thead>\n          <tr>\n            ${this.columns.map((c) => html`<th>${c.label}</th>`)}\n          </tr>\n        </thead>\n        <tbody>\n          ${repeat(\n            this.rows,\n            (row, i) => this.rowKey(row, i),\n            (row) => {\n              const href = this.rowHref?.(row) ?? null;\n              return html`\n                <tr\n                  class=${href ? \"clickable\" : \"\"}\n                  @click=${(e: MouseEvent) => this.#onRowClick(row, e)}\n                >\n                  ${this.columns.map(\n                    (c, columnIndex) => html`\n                      <td>\n                        ${href && columnIndex === 0\n                          ? html`\n                              <a\n                                class=\"row-link\"\n                                href=${href}\n                                aria-label=${this.#rowLinkLabel(row)}\n                              ></a>\n                            `\n                          : nothing}\n                        ${this.renderCell(row, c.key) ?? nothing}\n                      </td>\n                    `,\n                  )}\n                </tr>\n              `;\n            },\n          )}\n        </tbody>\n      </table>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"data-table\": DataTable;\n  }\n}\n"]}

package/dist/distribution-chart.d.ts

@@ -10,7 +10,7 @@ export interface DistributionValue {
  * ResizeObserver so that font sizes and stroke widths are always in real pixels
  * regardless of container width.
  *
- * Pass `fontSize` to control all text size (default 11). Pass a single
+ * Pass `fontSize` to control all text size (default 10). Pass a single
  * `{label:'', value}` for a single-value display or multiple
  * `{label:'A'|'B'|...}` entries to compare several values.
  *
@@ -24,7 +24,7 @@ export declare class DistributionChart extends LitElement {
     values: DistributionValue[];
     /** Colors assigned to markers in order. Defaults to indigo/amber/teal/rose 600s. */
     markerColors: string[];
-    /** Target font size in CSS pixels (default 11). Always renders at this size regardless of container width. */
+    /** Target font size in CSS pixels (default 10). Always renders at this size regardless of container width. */
     fontSize: number;
     private _data;
     private _loading;

package/dist/distribution-chart.js

@@ -21,7 +21,7 @@ const DEFAULT_MARKER_COLORS = ["#4f46e5", "#d97706", "#0d9488", "#e11d48"];
  * ResizeObserver so that font sizes and stroke widths are always in real pixels
  * regardless of container width.
  *
- * Pass `fontSize` to control all text size (default 11). Pass a single
+ * Pass `fontSize` to control all text size (default 10). Pass a single
  * `{label:'', value}` for a single-value display or multiple
  * `{label:'A'|'B'|...}` entries to compare several values.
  *
@@ -36,8 +36,8 @@ let DistributionChart = class DistributionChart extends LitElement {
         this.values = [];
         /** Colors assigned to markers in order. Defaults to indigo/amber/teal/rose 600s. */
         this.markerColors = DEFAULT_MARKER_COLORS;
-        /** Target font size in CSS pixels (default 11). Always renders at this size regardless of container width. */
-        this.fontSize = 11;
+        /** Target font size in CSS pixels (default 10). Always renders at this size regardless of container width. */
+        this.fontSize = 10;
         this._data = null;
         this._loading = false;
         this._error = null;
@@ -125,7 +125,7 @@ let DistributionChart = class DistributionChart extends LitElement {
         display: inline-flex;
         align-items: center;
         gap: 0.25rem;
-        font-size: var(--ui-font-size-sm, 0.75rem);
+        font-size: var(--ui-font-size-xs, 0.6875rem);
         color: var(--ui-text-muted, #64748b);
       }
       .legend-dot {

package/dist/distribution-chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"distribution-chart.js","sourceRoot":"","sources":["../src/distribution-chart.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, css, html, nothing, svg } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { scaleLinear } from \"d3-scale\";\nimport { line, area } from \"d3-shape\";\nimport { max } from \"d3-array\";\nimport { tokens } from \"./tokens.js\";\n\ninterface DistributionPoint {\n  x: number;\n  y: number;\n}\n\ninterface DistributionData {\n  points: DistributionPoint[];\n  unit: string;\n  label: string;\n  min: number;\n  max: number;\n  mean: number;\n}\n\nexport interface DistributionValue {\n  /** Short label shown on the chart marker, e.g. 'A'. Empty string = show raw value instead. */\n  label: string;\n  value: number;\n}\n\n/** Fixed SVG height in CSS pixels — the coordinate system is always 1 user-unit = 1 px. */\nconst SVG_H = 130;\nconst PAD = { top: 22, right: 12, bottom: 18, left: 12 };\n\n/** Default marker colors (indigo/amber/teal/rose 600s), assigned in order. */\nconst DEFAULT_MARKER_COLORS = [\"#4f46e5\", \"#d97706\", \"#0d9488\", \"#e11d48\"];\n\n/**\n * Renders a KDE distribution curve for a named metric with one or more value\n * markers. The SVG viewBox is kept in sync with the element's pixel width via\n * ResizeObserver so that font sizes and stroke widths are always in real pixels\n * regardless of container width.\n *\n * Pass `fontSize` to control all text size (default 11). Pass a single\n * `{label:'', value}` for a single-value display or multiple\n * `{label:'A'|'B'|...}` entries to compare several values.\n *\n * @element distribution-chart\n */\n@customElement(\"distribution-chart\")\nexport class DistributionChart extends LitElement {\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: block;\n        width: 100%;\n      }\n      .wrap {\n        padding: 0.25rem 0 0.5rem;\n      }\n      svg {\n        display: block;\n        overflow: visible;\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      .curve {\n        fill: none;\n        stroke: var(--ui-primary, #4f46e5);\n        stroke-width: 1.5;\n        stroke-linejoin: round;\n      }\n      .fill {\n        fill: url(#dist-fill-grad);\n      }\n      .fill-start {\n        stop-color: var(--ui-primary, #4f46e5);\n      }\n      .crosshair {\n        stroke: var(--ui-text-muted, #64748b);\n      }\n      .chart-label {\n        fill: var(--ui-text-muted, #64748b);\n      }\n      .skeleton {\n        background: linear-gradient(\n          90deg,\n          var(--ui-surface-muted, #f8fafc) 25%,\n          var(--ui-border, #e2e8f0) 50%,\n          var(--ui-surface-muted, #f8fafc) 75%\n        );\n        background-size: 200% 100%;\n        animation: shimmer 1.4s infinite;\n        border-radius: var(--ui-radius-sm, 0.25rem);\n        height: 6.25rem;\n      }\n      @keyframes shimmer {\n        0% {\n          background-position: 200% 0;\n        }\n        100% {\n          background-position: -200% 0;\n        }\n      }\n      .error {\n        font-size: var(--ui-font-size-sm, 0.75rem);\n        color: var(--ui-danger, #dc2626);\n        padding: 0.5rem 0;\n      }\n      .legend {\n        display: flex;\n        flex-wrap: wrap;\n        gap: 0.5rem 0.75rem;\n        padding: 0.25rem 0 0.25rem 0.5rem;\n      }\n      .legend-item {\n        display: inline-flex;\n        align-items: center;\n        gap: 0.25rem;\n        font-size: var(--ui-font-size-sm, 0.75rem);\n        color: var(--ui-text-muted, #64748b);\n      }\n      .legend-dot {\n        display: inline-block;\n        width: 0.5rem;\n        height: 0.5rem;\n        border-radius: 50%;\n        flex: 0 0 auto;\n      }\n      @media (prefers-reduced-motion: reduce) {\n        .skeleton {\n          animation: none;\n        }\n      }\n    `,\n  ];\n\n  /** Metric name, fetched from `/api/distribution/<metric>` on change. */\n  @property() metric = \"\";\n  /** One or more values to mark on the distribution curve. */\n  @property({ attribute: false }) values: DistributionValue[] = [];\n  /** Colors assigned to markers in order. Defaults to indigo/amber/teal/rose 600s. */\n  @property({ attribute: false }) markerColors: string[] = DEFAULT_MARKER_COLORS;\n  /** Target font size in CSS pixels (default 11). Always renders at this size regardless of container width. */\n  @property({ type: Number, attribute: \"font-size\" }) fontSize = 11;\n\n  @state() private _data: DistributionData | null = null;\n  @state() private _loading = false;\n  @state() private _error: string | null = null;\n  /** Measured element width in CSS pixels. 0 until ResizeObserver fires. */\n  @state() private _width = 0;\n  /** Inner x coordinate (px) of the current hover position, or null when not hovering. */\n  @state() private _hoverX: number | null = null;\n\n  private _fetchedFor = \"\";\n  private _ro: ResizeObserver | null = null;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this._maybeFetch();\n  }\n\n  override firstUpdated() {\n    this._ro = new ResizeObserver((entries) => {\n      const w = Math.floor(entries[0].contentRect.width);\n      if (w > 0 && w !== this._width) this._width = w;\n    });\n    this._ro.observe(this);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this._ro?.disconnect();\n    this._ro = null;\n  }\n\n  override updated(changed: Map<string, unknown>) {\n    if (changed.has(\"metric\")) this._maybeFetch();\n  }\n\n  private _maybeFetch() {\n    if (!this.metric || this._fetchedFor === this.metric) return;\n    this._fetchedFor = this.metric;\n    this._loading = true;\n    this._error = null;\n    fetch(`/api/distribution/${encodeURIComponent(this.metric)}`)\n      .then((r) => {\n        if (!r.ok) throw new Error(`HTTP ${r.status}`);\n        return r.json() as Promise<DistributionData>;\n      })\n      .then((data) => {\n        this._data = data;\n        this._loading = false;\n      })\n      .catch((err: unknown) => {\n        this._error = err instanceof Error ? err.message : \"Failed to load\";\n        this._loading = false;\n      });\n  }\n\n  private _renderSvg(data: DistributionData) {\n    if (this._width === 0) return nothing;\n\n    const innerW = this._width - PAD.left - PAD.right;\n    const innerH = SVG_H - PAD.top - PAD.bottom;\n    const fs = this.fontSize;\n\n    const pts = data.points;\n    const maxY = max(pts, (p) => p.y) ?? 1;\n\n    const xScale = scaleLinear().domain([pts[0].x, pts[pts.length - 1].x]).range([0, innerW]);\n    const yScale = scaleLinear().domain([0, maxY]).range([innerH, 0]);\n\n    const lineFn = line<DistributionPoint>()\n      .x((p) => xScale(p.x))\n      .y((p) => yScale(p.y));\n\n    const areaFn = area<DistributionPoint>()\n      .x((p) => xScale(p.x))\n      .y0(innerH)\n      .y1((p) => yScale(p.y));\n\n    const curvePath = lineFn(pts) ?? \"\";\n    const fillPath = areaFn(pts) ?? \"\";\n\n    const minLabel = data.min.toLocaleString(\"en-US\", { maximumFractionDigits: 0 });\n    const maxLabel = data.max.toLocaleString(\"en-US\", { maximumFractionDigits: 0 });\n\n    const hasLabels = this.values.some((v) => v.label !== \"\");\n\n    const markers = this.values\n      .filter((v) => v.value >= pts[0].x && v.value <= pts[pts.length - 1].x)\n      .map((v, i) => {\n        const color = this.markerColors[i % this.markerColors.length];\n        const mx = xScale(v.value);\n        const labelText = hasLabels\n          ? v.label\n          : `${v.value.toLocaleString(\"en-US\", { maximumFractionDigits: 0 })} ${data.unit}`;\n        return svg`\n          <line stroke=${color} stroke-width=\"1.5\" stroke-dasharray=\"4 3\"\n                x1=${mx} y1=${0} x2=${mx} y2=${innerH} />\n          <text font-size=${fs} font-weight=\"600\" fill=${color} text-anchor=\"middle\"\n                x=${mx} y=${-fs * 0.4}>${labelText}</text>\n        `;\n      });\n\n    const crosshair = this._hoverX != null ? (() => {\n      const hx = Math.max(0, Math.min(innerW, this._hoverX!));\n      const hVal = xScale.invert(hx);\n      const hLabel = `${Math.round(hVal).toLocaleString(\"en-US\")} ${data.unit}`;\n      // Keep label anchor away from edges so it doesn't clip\n      const anchor = hx < innerW * 0.2 ? \"start\" : hx > innerW * 0.8 ? \"end\" : \"middle\";\n      const lx = hx < innerW * 0.2 ? 0 : hx > innerW * 0.8 ? innerW : hx;\n      return svg`\n        <line class=\"crosshair\" stroke-width=\"1\" x1=${hx} y1=${0} x2=${hx} y2=${innerH} />\n        <text class=\"chart-label\" font-size=${fs} font-weight=\"500\"\n              text-anchor=${anchor} x=${lx} y=${-fs * 0.4}>${hLabel}</text>\n      `;\n    })() : nothing;\n\n    const markerSummary = this.values.length > 0\n      ? ` Markers: ${this.values\n          .map((value) => `${value.label || \"value\"} ${value.value.toLocaleString(\"en-US\")} ${data.unit}`)\n          .join(\", \")}.`\n      : \"\";\n    const summary =\n      `${data.label}: ${data.min.toLocaleString(\"en-US\")} to ${data.max.toLocaleString(\"en-US\")} ${data.unit}, ` +\n      `mean ${data.mean.toLocaleString(\"en-US\")} ${data.unit}.${markerSummary}`;\n\n    return svg`\n      <svg viewBox=\"0 0 ${this._width} ${SVG_H}\" width=${this._width} height=${SVG_H}\n           role=\"img\" aria-label=${summary}\n           style=\"cursor:crosshair\"\n           @mousemove=${(e: MouseEvent) => {\n             const innerX = e.offsetX - PAD.left;\n             this._hoverX = (innerX >= 0 && innerX <= innerW) ? innerX : null;\n           }}\n           @mouseleave=${() => { this._hoverX = null; }}>\n        <defs>\n          <linearGradient id=\"dist-fill-grad\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <stop class=\"fill-start\" offset=\"0%\" stop-opacity=\"0.28\"/>\n            <stop class=\"fill-start\" offset=\"100%\" stop-opacity=\"0\"/>\n          </linearGradient>\n        </defs>\n        <g transform=\"translate(${PAD.left},${PAD.top})\">\n          <path class=\"fill\" d=${fillPath} />\n          <path class=\"curve\" d=${curvePath} />\n          ${markers}\n          ${crosshair}\n          <text class=\"chart-label\" font-size=${fs} text-anchor=\"start\" x=${0} y=${innerH + fs * 1.4}>${minLabel}</text>\n          <text class=\"chart-label\" font-size=${fs} text-anchor=\"end\"   x=${innerW} y=${innerH + fs * 1.4}>${maxLabel}</text>\n          <text class=\"chart-label\" font-size=${fs} text-anchor=\"middle\" x=${innerW / 2} y=${innerH + fs * 1.4}>${data.unit}</text>\n        </g>\n      </svg>\n    `;\n  }\n\n  private _renderLegend(data: DistributionData) {\n    const hasLabels = this.values.some((v) => v.label !== \"\");\n    if (!hasLabels) return nothing;\n    return html`\n      <div class=\"legend\">\n        ${this.values.map((v, i) => {\n          const color = this.markerColors[i % this.markerColors.length];\n          const formatted = v.value.toLocaleString(\"en-US\", { maximumFractionDigits: 0 });\n          return html`\n            <span class=\"legend-item\">\n              <span class=\"legend-dot\" style=\"background:${color}\"></span>\n              ${v.label}: ${formatted} ${data.unit}\n            </span>\n          `;\n        })}\n      </div>\n    `;\n  }\n\n  override render() {\n    if (this._loading || this._width === 0) return html`<div class=\"wrap\"><div class=\"skeleton\"></div></div>`;\n    if (this._error) return html`<div class=\"wrap\"><div class=\"error\">Could not load distribution</div></div>`;\n    if (!this._data) return nothing;\n    return html`\n      <div class=\"wrap\">\n        ${this._renderSvg(this._data)}\n        ${this._renderLegend(this._data)}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"distribution-chart\": DistributionChart;\n  }\n}\n"]}
+{"version":3,"file":"distribution-chart.js","sourceRoot":"","sources":["../src/distribution-chart.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, css, html, nothing, svg } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { scaleLinear } from \"d3-scale\";\nimport { line, area } from \"d3-shape\";\nimport { max } from \"d3-array\";\nimport { tokens } from \"./tokens.js\";\n\ninterface DistributionPoint {\n  x: number;\n  y: number;\n}\n\ninterface DistributionData {\n  points: DistributionPoint[];\n  unit: string;\n  label: string;\n  min: number;\n  max: number;\n  mean: number;\n}\n\nexport interface DistributionValue {\n  /** Short label shown on the chart marker, e.g. 'A'. Empty string = show raw value instead. */\n  label: string;\n  value: number;\n}\n\n/** Fixed SVG height in CSS pixels — the coordinate system is always 1 user-unit = 1 px. */\nconst SVG_H = 130;\nconst PAD = { top: 22, right: 12, bottom: 18, left: 12 };\n\n/** Default marker colors (indigo/amber/teal/rose 600s), assigned in order. */\nconst DEFAULT_MARKER_COLORS = [\"#4f46e5\", \"#d97706\", \"#0d9488\", \"#e11d48\"];\n\n/**\n * Renders a KDE distribution curve for a named metric with one or more value\n * markers. The SVG viewBox is kept in sync with the element's pixel width via\n * ResizeObserver so that font sizes and stroke widths are always in real pixels\n * regardless of container width.\n *\n * Pass `fontSize` to control all text size (default 10). Pass a single\n * `{label:'', value}` for a single-value display or multiple\n * `{label:'A'|'B'|...}` entries to compare several values.\n *\n * @element distribution-chart\n */\n@customElement(\"distribution-chart\")\nexport class DistributionChart extends LitElement {\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: block;\n        width: 100%;\n      }\n      .wrap {\n        padding: 0.25rem 0 0.5rem;\n      }\n      svg {\n        display: block;\n        overflow: visible;\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      .curve {\n        fill: none;\n        stroke: var(--ui-primary, #4f46e5);\n        stroke-width: 1.5;\n        stroke-linejoin: round;\n      }\n      .fill {\n        fill: url(#dist-fill-grad);\n      }\n      .fill-start {\n        stop-color: var(--ui-primary, #4f46e5);\n      }\n      .crosshair {\n        stroke: var(--ui-text-muted, #64748b);\n      }\n      .chart-label {\n        fill: var(--ui-text-muted, #64748b);\n      }\n      .skeleton {\n        background: linear-gradient(\n          90deg,\n          var(--ui-surface-muted, #f8fafc) 25%,\n          var(--ui-border, #e2e8f0) 50%,\n          var(--ui-surface-muted, #f8fafc) 75%\n        );\n        background-size: 200% 100%;\n        animation: shimmer 1.4s infinite;\n        border-radius: var(--ui-radius-sm, 0.25rem);\n        height: 6.25rem;\n      }\n      @keyframes shimmer {\n        0% {\n          background-position: 200% 0;\n        }\n        100% {\n          background-position: -200% 0;\n        }\n      }\n      .error {\n        font-size: var(--ui-font-size-sm, 0.75rem);\n        color: var(--ui-danger, #dc2626);\n        padding: 0.5rem 0;\n      }\n      .legend {\n        display: flex;\n        flex-wrap: wrap;\n        gap: 0.5rem 0.75rem;\n        padding: 0.25rem 0 0.25rem 0.5rem;\n      }\n      .legend-item {\n        display: inline-flex;\n        align-items: center;\n        gap: 0.25rem;\n        font-size: var(--ui-font-size-xs, 0.6875rem);\n        color: var(--ui-text-muted, #64748b);\n      }\n      .legend-dot {\n        display: inline-block;\n        width: 0.5rem;\n        height: 0.5rem;\n        border-radius: 50%;\n        flex: 0 0 auto;\n      }\n      @media (prefers-reduced-motion: reduce) {\n        .skeleton {\n          animation: none;\n        }\n      }\n    `,\n  ];\n\n  /** Metric name, fetched from `/api/distribution/<metric>` on change. */\n  @property() metric = \"\";\n  /** One or more values to mark on the distribution curve. */\n  @property({ attribute: false }) values: DistributionValue[] = [];\n  /** Colors assigned to markers in order. Defaults to indigo/amber/teal/rose 600s. */\n  @property({ attribute: false }) markerColors: string[] = DEFAULT_MARKER_COLORS;\n  /** Target font size in CSS pixels (default 10). Always renders at this size regardless of container width. */\n  @property({ type: Number, attribute: \"font-size\" }) fontSize = 10;\n\n  @state() private _data: DistributionData | null = null;\n  @state() private _loading = false;\n  @state() private _error: string | null = null;\n  /** Measured element width in CSS pixels. 0 until ResizeObserver fires. */\n  @state() private _width = 0;\n  /** Inner x coordinate (px) of the current hover position, or null when not hovering. */\n  @state() private _hoverX: number | null = null;\n\n  private _fetchedFor = \"\";\n  private _ro: ResizeObserver | null = null;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this._maybeFetch();\n  }\n\n  override firstUpdated() {\n    this._ro = new ResizeObserver((entries) => {\n      const w = Math.floor(entries[0].contentRect.width);\n      if (w > 0 && w !== this._width) this._width = w;\n    });\n    this._ro.observe(this);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this._ro?.disconnect();\n    this._ro = null;\n  }\n\n  override updated(changed: Map<string, unknown>) {\n    if (changed.has(\"metric\")) this._maybeFetch();\n  }\n\n  private _maybeFetch() {\n    if (!this.metric || this._fetchedFor === this.metric) return;\n    this._fetchedFor = this.metric;\n    this._loading = true;\n    this._error = null;\n    fetch(`/api/distribution/${encodeURIComponent(this.metric)}`)\n      .then((r) => {\n        if (!r.ok) throw new Error(`HTTP ${r.status}`);\n        return r.json() as Promise<DistributionData>;\n      })\n      .then((data) => {\n        this._data = data;\n        this._loading = false;\n      })\n      .catch((err: unknown) => {\n        this._error = err instanceof Error ? err.message : \"Failed to load\";\n        this._loading = false;\n      });\n  }\n\n  private _renderSvg(data: DistributionData) {\n    if (this._width === 0) return nothing;\n\n    const innerW = this._width - PAD.left - PAD.right;\n    const innerH = SVG_H - PAD.top - PAD.bottom;\n    const fs = this.fontSize;\n\n    const pts = data.points;\n    const maxY = max(pts, (p) => p.y) ?? 1;\n\n    const xScale = scaleLinear().domain([pts[0].x, pts[pts.length - 1].x]).range([0, innerW]);\n    const yScale = scaleLinear().domain([0, maxY]).range([innerH, 0]);\n\n    const lineFn = line<DistributionPoint>()\n      .x((p) => xScale(p.x))\n      .y((p) => yScale(p.y));\n\n    const areaFn = area<DistributionPoint>()\n      .x((p) => xScale(p.x))\n      .y0(innerH)\n      .y1((p) => yScale(p.y));\n\n    const curvePath = lineFn(pts) ?? \"\";\n    const fillPath = areaFn(pts) ?? \"\";\n\n    const minLabel = data.min.toLocaleString(\"en-US\", { maximumFractionDigits: 0 });\n    const maxLabel = data.max.toLocaleString(\"en-US\", { maximumFractionDigits: 0 });\n\n    const hasLabels = this.values.some((v) => v.label !== \"\");\n\n    const markers = this.values\n      .filter((v) => v.value >= pts[0].x && v.value <= pts[pts.length - 1].x)\n      .map((v, i) => {\n        const color = this.markerColors[i % this.markerColors.length];\n        const mx = xScale(v.value);\n        const labelText = hasLabels\n          ? v.label\n          : `${v.value.toLocaleString(\"en-US\", { maximumFractionDigits: 0 })} ${data.unit}`;\n        return svg`\n          <line stroke=${color} stroke-width=\"1.5\" stroke-dasharray=\"4 3\"\n                x1=${mx} y1=${0} x2=${mx} y2=${innerH} />\n          <text font-size=${fs} font-weight=\"600\" fill=${color} text-anchor=\"middle\"\n                x=${mx} y=${-fs * 0.4}>${labelText}</text>\n        `;\n      });\n\n    const crosshair = this._hoverX != null ? (() => {\n      const hx = Math.max(0, Math.min(innerW, this._hoverX!));\n      const hVal = xScale.invert(hx);\n      const hLabel = `${Math.round(hVal).toLocaleString(\"en-US\")} ${data.unit}`;\n      // Keep label anchor away from edges so it doesn't clip\n      const anchor = hx < innerW * 0.2 ? \"start\" : hx > innerW * 0.8 ? \"end\" : \"middle\";\n      const lx = hx < innerW * 0.2 ? 0 : hx > innerW * 0.8 ? innerW : hx;\n      return svg`\n        <line class=\"crosshair\" stroke-width=\"1\" x1=${hx} y1=${0} x2=${hx} y2=${innerH} />\n        <text class=\"chart-label\" font-size=${fs} font-weight=\"500\"\n              text-anchor=${anchor} x=${lx} y=${-fs * 0.4}>${hLabel}</text>\n      `;\n    })() : nothing;\n\n    const markerSummary = this.values.length > 0\n      ? ` Markers: ${this.values\n          .map((value) => `${value.label || \"value\"} ${value.value.toLocaleString(\"en-US\")} ${data.unit}`)\n          .join(\", \")}.`\n      : \"\";\n    const summary =\n      `${data.label}: ${data.min.toLocaleString(\"en-US\")} to ${data.max.toLocaleString(\"en-US\")} ${data.unit}, ` +\n      `mean ${data.mean.toLocaleString(\"en-US\")} ${data.unit}.${markerSummary}`;\n\n    return svg`\n      <svg viewBox=\"0 0 ${this._width} ${SVG_H}\" width=${this._width} height=${SVG_H}\n           role=\"img\" aria-label=${summary}\n           style=\"cursor:crosshair\"\n           @mousemove=${(e: MouseEvent) => {\n             const innerX = e.offsetX - PAD.left;\n             this._hoverX = (innerX >= 0 && innerX <= innerW) ? innerX : null;\n           }}\n           @mouseleave=${() => { this._hoverX = null; }}>\n        <defs>\n          <linearGradient id=\"dist-fill-grad\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <stop class=\"fill-start\" offset=\"0%\" stop-opacity=\"0.28\"/>\n            <stop class=\"fill-start\" offset=\"100%\" stop-opacity=\"0\"/>\n          </linearGradient>\n        </defs>\n        <g transform=\"translate(${PAD.left},${PAD.top})\">\n          <path class=\"fill\" d=${fillPath} />\n          <path class=\"curve\" d=${curvePath} />\n          ${markers}\n          ${crosshair}\n          <text class=\"chart-label\" font-size=${fs} text-anchor=\"start\" x=${0} y=${innerH + fs * 1.4}>${minLabel}</text>\n          <text class=\"chart-label\" font-size=${fs} text-anchor=\"end\"   x=${innerW} y=${innerH + fs * 1.4}>${maxLabel}</text>\n          <text class=\"chart-label\" font-size=${fs} text-anchor=\"middle\" x=${innerW / 2} y=${innerH + fs * 1.4}>${data.unit}</text>\n        </g>\n      </svg>\n    `;\n  }\n\n  private _renderLegend(data: DistributionData) {\n    const hasLabels = this.values.some((v) => v.label !== \"\");\n    if (!hasLabels) return nothing;\n    return html`\n      <div class=\"legend\">\n        ${this.values.map((v, i) => {\n          const color = this.markerColors[i % this.markerColors.length];\n          const formatted = v.value.toLocaleString(\"en-US\", { maximumFractionDigits: 0 });\n          return html`\n            <span class=\"legend-item\">\n              <span class=\"legend-dot\" style=\"background:${color}\"></span>\n              ${v.label}: ${formatted} ${data.unit}\n            </span>\n          `;\n        })}\n      </div>\n    `;\n  }\n\n  override render() {\n    if (this._loading || this._width === 0) return html`<div class=\"wrap\"><div class=\"skeleton\"></div></div>`;\n    if (this._error) return html`<div class=\"wrap\"><div class=\"error\">Could not load distribution</div></div>`;\n    if (!this._data) return nothing;\n    return html`\n      <div class=\"wrap\">\n        ${this._renderSvg(this._data)}\n        ${this._renderLegend(this._data)}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"distribution-chart\": DistributionChart;\n  }\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown-button.d.ts","sourceRoot":"","sources":["../src/dropdown-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAO1E,4BAA4B;AAC5B,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;GAQG;AACH,qBACa,cAAe,SAAQ,UAAU;;IAC5C,OAAgB,MAAM,4BAkGpB;IAEF,kCAAkC;IACtB,KAAK,SAAM;IACvB,0BAA0B;IACM,OAAO,EAAE,cAAc,EAAE,CAAM;IAC/D,8DAA8D;IACjC,QAAQ,UAAS;IAErC,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,YAAY,CAAM;IAG1B,oBAAoB,IAAI,IAAI,CAKpC;IAED,UAAmB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAYxD;IA6CD,OAAO,CAAC,UAAU;IAwBT,MAAM,yCAsBd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,cAAc,CAAC;KACnC;CACF"}
+{"version":3,"file":"dropdown-button.d.ts","sourceRoot":"","sources":["../src/dropdown-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAO1E,4BAA4B;AAC5B,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;GAQG;AACH,qBACa,cAAe,SAAQ,UAAU;;IAC5C,OAAgB,MAAM,4BA6GpB;IAEF,kCAAkC;IACtB,KAAK,SAAM;IACvB,0BAA0B;IACM,OAAO,EAAE,cAAc,EAAE,CAAM;IAC/D,8DAA8D;IACjC,QAAQ,UAAS;IAErC,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,YAAY,CAAM;IAG1B,oBAAoB,IAAI,IAAI,CAKpC;IAED,UAAmB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAYxD;IA6CD,OAAO,CAAC,UAAU;IAwBT,MAAM,yCAsBd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,cAAc,CAAC;KACnC;CACF"}

package/dist/dropdown-button.js

@@ -56,9 +56,20 @@ let DropdownButton = class DropdownButton extends LitElement {
         display: flex;
         align-items: center;
         gap: 0.25rem;
-        font: inherit;
+        height: 2rem;
+        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);
-        font-weight: 500;
+        font-weight: var(--ui-font-weight-medium, 500);
+        line-height: var(--ui-line-height-tight, 1.25);
         color: var(--ui-on-accent, #ffffff);
         background: var(--ui-primary, #4f46e5);
         border: 1px solid transparent;