@f-ewald/components 1.0.0 → 1.0.2

package/dist/distance-value.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { LitElement, css, html, nothing } from "lit";
+import { LitElement, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { formatMiles, formatKm } from "./utils/distance.js";
 /**
@@ -24,16 +24,11 @@ let DistanceValue = class DistanceValue extends LitElement {
         /** Distance in kilometers (metric, future). Switches to meters below 0.5 km. */
         this.km = null;
     }
-    static { this.styles = css `
-    :host {
-      display: inline;
-    }
-  `; }
     render() {
         if (this.km != null)
-            return html `${formatKm(this.km)}`;
+            return Number.isFinite(this.km) ? html `${formatKm(this.km)}` : nothing;
         if (this.miles != null)
-            return html `${formatMiles(this.miles)}`;
+            return Number.isFinite(this.miles) ? html `${formatMiles(this.miles)}` : nothing;
         return nothing;
     }
 };

package/dist/distance-value.js.map

@@ -1 +1 @@
-{"version":3,"file":"distance-value.js","sourceRoot":"","sources":["../src/distance-value.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAE5D;;;;;;;;GAQG;AAEI,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAOL,oEAAoE;QACxC,UAAK,GAAkB,IAAI,CAAC;QAExD,gFAAgF;QACpD,OAAE,GAAkB,IAAI,CAAC;IAOvD,CAAC;aAjBiB,WAAM,GAAG,GAAG,CAAA;;;;GAI3B,AAJqB,CAIpB;IAQO,MAAM;QACb,IAAI,IAAI,CAAC,EAAE,IAAI,IAAI;YAAE,OAAO,IAAI,CAAA,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;QACvD,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI;YAAE,OAAO,IAAI,CAAA,GAAG,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;QAChE,OAAO,OAAO,CAAC;IACjB,CAAC;CACF,CAAA;AAV6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAA6B;AAG5B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAA0B;AAX1C,aAAa;IADzB,aAAa,CAAC,gBAAgB,CAAC;GACnB,aAAa,CAkBzB","sourcesContent":["import { LitElement, css, html, nothing } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { formatMiles, formatKm } from \"./utils/distance.js\";\n\n/**\n * Inline distance display. Renders miles/feet or km/m, switching units at\n * sensible thresholds (< 0.25 mi → ft; < 0.5 km → m).\n *\n * Supply exactly one of `miles` or `km`; the other stays null.\n * km support is present but reserved for future use.\n *\n * @element distance-value\n */\n@customElement(\"distance-value\")\nexport class DistanceValue extends LitElement {\n  static override styles = css`\n    :host {\n      display: inline;\n    }\n  `;\n\n  /** Distance in miles (imperial). Switches to feet below 0.25 mi. */\n  @property({ type: Number }) miles: number | null = null;\n\n  /** Distance in kilometers (metric, future). Switches to meters below 0.5 km. */\n  @property({ type: Number }) km: number | null = null;\n\n  override render() {\n    if (this.km != null) return html`${formatKm(this.km)}`;\n    if (this.miles != null) return html`${formatMiles(this.miles)}`;\n    return nothing;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"distance-value\": DistanceValue;\n  }\n}\n"]}
+{"version":3,"file":"distance-value.js","sourceRoot":"","sources":["../src/distance-value.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAE5D;;;;;;;;GAQG;AAEI,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QACL,oEAAoE;QACxC,UAAK,GAAkB,IAAI,CAAC;QAExD,gFAAgF;QACpD,OAAE,GAAkB,IAAI,CAAC;IAOvD,CAAC;IALU,MAAM;QACb,IAAI,IAAI,CAAC,EAAE,IAAI,IAAI;YAAE,OAAO,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC;QAC5F,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI;YAAE,OAAO,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA,GAAG,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC;QACxG,OAAO,OAAO,CAAC;IACjB,CAAC;CACF,CAAA;AAV6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAA6B;AAG5B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAA0B;AAL1C,aAAa;IADzB,aAAa,CAAC,gBAAgB,CAAC;GACnB,aAAa,CAYzB","sourcesContent":["import { LitElement, html, nothing } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { formatMiles, formatKm } from \"./utils/distance.js\";\n\n/**\n * Inline distance display. Renders miles/feet or km/m, switching units at\n * sensible thresholds (< 0.25 mi → ft; < 0.5 km → m).\n *\n * Supply exactly one of `miles` or `km`; the other stays null.\n * km support is present but reserved for future use.\n *\n * @element distance-value\n */\n@customElement(\"distance-value\")\nexport class DistanceValue extends LitElement {\n  /** Distance in miles (imperial). Switches to feet below 0.25 mi. */\n  @property({ type: Number }) miles: number | null = null;\n\n  /** Distance in kilometers (metric, future). Switches to meters below 0.5 km. */\n  @property({ type: Number }) km: number | null = null;\n\n  override render() {\n    if (this.km != null) return Number.isFinite(this.km) ? html`${formatKm(this.km)}` : nothing;\n    if (this.miles != null) return Number.isFinite(this.miles) ? html`${formatMiles(this.miles)}` : nothing;\n    return nothing;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"distance-value\": DistanceValue;\n  }\n}\n"]}

package/dist/distribution-chart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"distribution-chart.d.ts","sourceRoot":"","sources":["../src/distribution-chart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,OAAO,EAAO,MAAM,KAAK,CAAC;AAqB1D,MAAM,WAAW,iBAAiB;IAChC,8FAA8F;IAC9F,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AASD;;;;;;;;;;;GAWG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAC/C,OAAgB,MAAM,4BAgEpB;IAEF,wEAAwE;IAC5D,MAAM,SAAM;IACxB,4DAA4D;IAC5B,MAAM,EAAE,iBAAiB,EAAE,CAAM;IACjE,oFAAoF;IACpD,YAAY,EAAE,MAAM,EAAE,CAAyB;IAC/E,8GAA8G;IAC1D,QAAQ,SAAM;IAEzD,OAAO,CAAC,KAAK,CAAiC;IAC9C,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,MAAM,CAAuB;IAC9C,0EAA0E;IACjE,OAAO,CAAC,MAAM,CAAK;IAC5B,wFAAwF;IAC/E,OAAO,CAAC,OAAO,CAAuB;IAE/C,OAAO,CAAC,WAAW,CAAM;IACzB,OAAO,CAAC,GAAG,CAA+B;IAEjC,iBAAiB,SAGzB;IAEQ,YAAY,SAMpB;IAEQ,oBAAoB,SAI5B;IAEQ,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,QAE7C;IAED,OAAO,CAAC,WAAW;IAoBnB,OAAO,CAAC,UAAU;IAuFlB,OAAO,CAAC,aAAa;IAmBZ,MAAM,0DAUd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,iBAAiB,CAAC;KACzC;CACF"}
+{"version":3,"file":"distribution-chart.d.ts","sourceRoot":"","sources":["../src/distribution-chart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,OAAO,EAAO,MAAM,KAAK,CAAC;AAqB1D,MAAM,WAAW,iBAAiB;IAChC,8FAA8F;IAC9F,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AASD;;;;;;;;;;;GAWG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAC/C,OAAgB,MAAM,4BA6FpB;IAEF,wEAAwE;IAC5D,MAAM,SAAM;IACxB,4DAA4D;IAC5B,MAAM,EAAE,iBAAiB,EAAE,CAAM;IACjE,oFAAoF;IACpD,YAAY,EAAE,MAAM,EAAE,CAAyB;IAC/E,8GAA8G;IAC1D,QAAQ,SAAM;IAEzD,OAAO,CAAC,KAAK,CAAiC;IAC9C,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,MAAM,CAAuB;IAC9C,0EAA0E;IACjE,OAAO,CAAC,MAAM,CAAK;IAC5B,wFAAwF;IAC/E,OAAO,CAAC,OAAO,CAAuB;IAE/C,OAAO,CAAC,WAAW,CAAM;IACzB,OAAO,CAAC,GAAG,CAA+B;IAEjC,iBAAiB,SAGzB;IAEQ,YAAY,SAMpB;IAEQ,oBAAoB,SAI5B;IAEQ,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,QAE7C;IAED,OAAO,CAAC,WAAW;IAoBnB,OAAO,CAAC,UAAU;IAiGlB,OAAO,CAAC,aAAa;IAmBZ,MAAM,0DAUd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,iBAAiB,CAAC;KACzC;CACF"}

package/dist/distribution-chart.js

@@ -56,27 +56,51 @@ let DistributionChart = class DistributionChart extends LitElement {
         width: 100%;
       }
       .wrap {
-        padding: 4px 0 8px;
+        padding: 0.25rem 0 0.5rem;
       }
       svg {
         display: block;
         overflow: visible;
+        font-family: var(
+          --ui-font,
+          ui-sans-serif,
+          system-ui,
+          sans-serif,
+          "Apple Color Emoji",
+          "Segoe UI Emoji",
+          "Segoe UI Symbol",
+          "Noto Color Emoji"
+        );
       }
       .curve {
         fill: none;
-        stroke: #4f46e5;
+        stroke: var(--ui-primary, #4f46e5);
         stroke-width: 1.5;
         stroke-linejoin: round;
       }
       .fill {
         fill: url(#dist-fill-grad);
       }
+      .fill-start {
+        stop-color: var(--ui-primary, #4f46e5);
+      }
+      .crosshair {
+        stroke: var(--ui-text-muted, #64748b);
+      }
+      .chart-label {
+        fill: var(--ui-text-muted, #64748b);
+      }
       .skeleton {
-        background: linear-gradient(90deg, #f8fafc 25%, #e2e8f0 50%, #f8fafc 75%);
+        background: linear-gradient(
+          90deg,
+          var(--ui-surface-muted, #f8fafc) 25%,
+          var(--ui-border, #e2e8f0) 50%,
+          var(--ui-surface-muted, #f8fafc) 75%
+        );
         background-size: 200% 100%;
         animation: shimmer 1.4s infinite;
         border-radius: var(--ui-radius-sm, 0.25rem);
-        height: 100px;
+        height: 6.25rem;
       }
       @keyframes shimmer {
         0% {
@@ -89,28 +113,33 @@ let DistributionChart = class DistributionChart extends LitElement {
       .error {
         font-size: var(--ui-font-size-sm, 0.75rem);
         color: var(--ui-danger, #dc2626);
-        padding: 8px 0;
+        padding: 0.5rem 0;
       }
       .legend {
         display: flex;
         flex-wrap: wrap;
-        gap: 6px 12px;
-        padding: 2px 0 2px 8px;
+        gap: 0.5rem 0.75rem;
+        padding: 0.25rem 0 0.25rem 0.5rem;
       }
       .legend-item {
         display: inline-flex;
         align-items: center;
-        gap: 4px;
+        gap: 0.25rem;
         font-size: var(--ui-font-size-sm, 0.75rem);
         color: var(--ui-text-muted, #64748b);
       }
       .legend-dot {
         display: inline-block;
-        width: 8px;
-        height: 8px;
+        width: 0.5rem;
+        height: 0.5rem;
         border-radius: 50%;
         flex: 0 0 auto;
       }
+      @media (prefers-reduced-motion: reduce) {
+        .skeleton {
+          animation: none;
+        }
+      }
     `,
     ]; }
     connectedCallback() {
@@ -200,13 +229,21 @@ let DistributionChart = class DistributionChart extends LitElement {
             const anchor = hx < innerW * 0.2 ? "start" : hx > innerW * 0.8 ? "end" : "middle";
             const lx = hx < innerW * 0.2 ? 0 : hx > innerW * 0.8 ? innerW : hx;
             return svg `
-        <line stroke="#94a3b8" stroke-width="1" x1=${hx} y1=${0} x2=${hx} y2=${innerH} />
-        <text font-size=${fs} fill="#64748b" font-weight="500"
+        <line class="crosshair" stroke-width="1" x1=${hx} y1=${0} x2=${hx} y2=${innerH} />
+        <text class="chart-label" font-size=${fs} font-weight="500"
               text-anchor=${anchor} x=${lx} y=${-fs * 0.4}>${hLabel}</text>
       `;
         })() : nothing;
+        const markerSummary = this.values.length > 0
+            ? ` Markers: ${this.values
+                .map((value) => `${value.label || "value"} ${value.value.toLocaleString("en-US")} ${data.unit}`)
+                .join(", ")}.`
+            : "";
+        const summary = `${data.label}: ${data.min.toLocaleString("en-US")} to ${data.max.toLocaleString("en-US")} ${data.unit}, ` +
+            `mean ${data.mean.toLocaleString("en-US")} ${data.unit}.${markerSummary}`;
         return svg `
       <svg viewBox="0 0 ${this._width} ${SVG_H}" width=${this._width} height=${SVG_H}
+           role="img" aria-label=${summary}
            style="cursor:crosshair"
            @mousemove=${(e) => {
             const innerX = e.offsetX - PAD.left;
@@ -215,8 +252,8 @@ let DistributionChart = class DistributionChart extends LitElement {
            @mouseleave=${() => { this._hoverX = null; }}>
         <defs>
           <linearGradient id="dist-fill-grad" x1="0" y1="0" x2="0" y2="1">
-            <stop offset="0%" stop-color="#4f46e5" stop-opacity="0.28"/>
-            <stop offset="100%" stop-color="#4f46e5" stop-opacity="0"/>
+            <stop class="fill-start" offset="0%" stop-opacity="0.28"/>
+            <stop class="fill-start" offset="100%" stop-opacity="0"/>
           </linearGradient>
         </defs>
         <g transform="translate(${PAD.left},${PAD.top})">
@@ -224,9 +261,9 @@ let DistributionChart = class DistributionChart extends LitElement {
           <path class="curve" d=${curvePath} />
           ${markers}
           ${crosshair}
-          <text font-size=${fs} fill="#94a3b8" text-anchor="start" x=${0} y=${innerH + fs * 1.4}>${minLabel}</text>
-          <text font-size=${fs} fill="#94a3b8" text-anchor="end"   x=${innerW} y=${innerH + fs * 1.4}>${maxLabel}</text>
-          <text font-size=${fs} fill="#94a3b8" text-anchor="middle" x=${innerW / 2} y=${innerH + fs * 1.4}>${data.unit}</text>
+          <text class="chart-label" font-size=${fs} text-anchor="start" x=${0} y=${innerH + fs * 1.4}>${minLabel}</text>
+          <text class="chart-label" font-size=${fs} text-anchor="end"   x=${innerW} y=${innerH + fs * 1.4}>${maxLabel}</text>
+          <text class="chart-label" font-size=${fs} text-anchor="middle" x=${innerW / 2} y=${innerH + fs * 1.4}>${data.unit}</text>
         </g>
       </svg>
     `;

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: 4px 0 8px;\n      }\n      svg {\n        display: block;\n        overflow: visible;\n      }\n      .curve {\n        fill: none;\n        stroke: #4f46e5;\n        stroke-width: 1.5;\n        stroke-linejoin: round;\n      }\n      .fill {\n        fill: url(#dist-fill-grad);\n      }\n      .skeleton {\n        background: linear-gradient(90deg, #f8fafc 25%, #e2e8f0 50%, #f8fafc 75%);\n        background-size: 200% 100%;\n        animation: shimmer 1.4s infinite;\n        border-radius: var(--ui-radius-sm, 0.25rem);\n        height: 100px;\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: 8px 0;\n      }\n      .legend {\n        display: flex;\n        flex-wrap: wrap;\n        gap: 6px 12px;\n        padding: 2px 0 2px 8px;\n      }\n      .legend-item {\n        display: inline-flex;\n        align-items: center;\n        gap: 4px;\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: 8px;\n        height: 8px;\n        border-radius: 50%;\n        flex: 0 0 auto;\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 stroke=\"#94a3b8\" stroke-width=\"1\" x1=${hx} y1=${0} x2=${hx} y2=${innerH} />\n        <text font-size=${fs} fill=\"#64748b\" font-weight=\"500\"\n              text-anchor=${anchor} x=${lx} y=${-fs * 0.4}>${hLabel}</text>\n      `;\n    })() : nothing;\n\n    return svg`\n      <svg viewBox=\"0 0 ${this._width} ${SVG_H}\" width=${this._width} height=${SVG_H}\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 offset=\"0%\" stop-color=\"#4f46e5\" stop-opacity=\"0.28\"/>\n            <stop offset=\"100%\" stop-color=\"#4f46e5\" 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 font-size=${fs} fill=\"#94a3b8\" text-anchor=\"start\" x=${0} y=${innerH + fs * 1.4}>${minLabel}</text>\n          <text font-size=${fs} fill=\"#94a3b8\" text-anchor=\"end\"   x=${innerW} y=${innerH + fs * 1.4}>${maxLabel}</text>\n          <text font-size=${fs} fill=\"#94a3b8\" 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 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"]}

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;AAK1E,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,4BAoEpB;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;IAE1B,oBAAoB,IAAI,IAAI,CAGpC;IAED,UAAmB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAQxD;IA4CD,OAAO,CAAC,UAAU;IAsBT,MAAM,yCAgBd;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,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"}

package/dist/dropdown-button.js

@@ -8,6 +8,7 @@ import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { iconChevronRight } from "./icons.js";
 import { tokens } from "./tokens.js";
+let instanceCount = 0;
 /**
  * A primary-styled button with a label and chevron that opens an anchored
  * menu of actions — essentially `form-select` minus "current value"
@@ -28,6 +29,7 @@ let DropdownButton = class DropdownButton extends LitElement {
         this.disabled = false;
         this._open = false;
         this._activeIndex = -1;
+        this.#menuId = `dropdown-button-menu-${++instanceCount}`;
         this.#onWindowMousedown = (e) => {
             if (!e.composedPath().includes(this))
                 this._open = false;
@@ -39,20 +41,29 @@ let DropdownButton = class DropdownButton extends LitElement {
       :host {
         display: inline-block;
         position: relative;
-        font-family: var(--ui-font, ui-sans-serif, system-ui, sans-serif);
+        font-family: var(
+          --ui-font,
+          ui-sans-serif,
+          system-ui,
+          sans-serif,
+          "Apple Color Emoji",
+          "Segoe UI Emoji",
+          "Segoe UI Symbol",
+          "Noto Color Emoji"
+        );
       }
       button.trigger {
         display: flex;
         align-items: center;
-        gap: 0.35rem;
+        gap: 0.25rem;
         font: inherit;
         font-size: var(--ui-font-size-sm, 0.75rem);
         font-weight: 500;
-        color: #fff;
+        color: var(--ui-on-accent, #ffffff);
         background: var(--ui-primary, #4f46e5);
         border: 1px solid transparent;
         border-radius: var(--ui-radius-sm, 0.25rem);
-        padding: 0.5rem 0.9rem;
+        padding: 0.5rem 1rem;
         cursor: pointer;
       }
       button.trigger:hover:not(:disabled) {
@@ -69,7 +80,7 @@ let DropdownButton = class DropdownButton extends LitElement {
       .chevron {
         display: flex;
         transform: rotate(90deg);
-        transition: transform 0.1s ease;
+        transition: transform 150ms ease;
       }
       :host([open]) .chevron {
         transform: rotate(-90deg);
@@ -82,17 +93,17 @@ let DropdownButton = class DropdownButton extends LitElement {
         min-width: 100%;
         max-height: 40vh;
         overflow-y: auto;
-        margin: 2px 0 0;
-        padding: 4px 0;
+        margin: 0.25rem 0 0;
+        padding: 0.25rem 0;
         list-style: none;
         white-space: nowrap;
-        background: var(--ui-surface, #fff);
+        background: var(--ui-surface, #ffffff);
         border: 1px solid var(--ui-border, #e2e8f0);
         border-radius: var(--ui-radius-sm, 0.25rem);
         box-shadow: var(--ui-shadow, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1));
       }
       li {
-        padding: 0.35rem 0.6rem;
+        padding: 0.5rem 0.75rem;
         cursor: pointer;
         color: var(--ui-text, #0f172a);
       }
@@ -100,13 +111,41 @@ let DropdownButton = class DropdownButton extends LitElement {
       li:hover {
         background: var(--ui-surface-muted, #f8fafc);
       }
+      @media (prefers-reduced-motion: reduce) {
+        .chevron {
+          transition: none;
+        }
+      }
+      @media (forced-colors: active) {
+        button.trigger:focus-visible {
+          outline: 2px solid CanvasText;
+          outline-offset: 2px;
+          box-shadow: none;
+        }
+        button.trigger:disabled {
+          color: GrayText;
+          opacity: 1;
+        }
+        li.active,
+        li:hover {
+          color: HighlightText;
+          background: Highlight;
+        }
+      }
     `,
     ]; }
+    #menuId;
     disconnectedCallback() {
         super.disconnectedCallback();
         window.removeEventListener("mousedown", this.#onWindowMousedown, true);
+        this._open = false;
+        this._activeIndex = -1;
     }
     updated(changed) {
+        if (changed.has("disabled") && this.disabled) {
+            this._open = false;
+            this._activeIndex = -1;
+        }
         if (!changed.has("_open"))
             return;
         this.toggleAttribute("open", this._open);
@@ -126,6 +165,8 @@ let DropdownButton = class DropdownButton extends LitElement {
             this._activeIndex = 0;
     }
     #select(option) {
+        if (this.disabled)
+            return;
         this._open = false;
         this.dispatchEvent(new CustomEvent("select", { detail: { value: option.value } }));
     }
@@ -163,12 +204,15 @@ let DropdownButton = class DropdownButton extends LitElement {
         if (!this._open)
             return nothing;
         return html `
-      <ul class="options" role="menu">
+      <ul id=${this.#menuId} class="options" role="menu" aria-label=${this.label}>
         ${this.options.map((o, i) => html `
             <li
+              id=${`${this.#menuId}-item-${i}`}
               role="menuitem"
               class=${i === this._activeIndex ? "active" : ""}
               @mousedown=${(e) => {
+            if (e.button !== 0)
+                return;
             e.preventDefault();
             this.#select(o);
         }}
@@ -180,18 +224,23 @@ let DropdownButton = class DropdownButton extends LitElement {
     `;
     }
     render() {
+        const activeDescendant = this._open && this._activeIndex >= 0
+            ? `${this.#menuId}-item-${this._activeIndex}`
+            : nothing;
         return html `
       <button
         type="button"
         class="trigger"
         aria-haspopup="menu"
         aria-expanded=${this._open}
+        aria-controls=${this.#menuId}
+        aria-activedescendant=${activeDescendant}
         ?disabled=${this.disabled}
         @click=${() => this.#toggle()}
         @keydown=${(e) => this.#onTriggerKeydown(e)}
       >
         <span>${this.label}</span>
-        <span class="chevron">${iconChevronRight(14)}</span>
+        <span class="chevron" aria-hidden="true">${iconChevronRight(14)}</span>
       </button>
       ${this.renderMenu()}
     `;

package/dist/dropdown-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-button.js","sourceRoot":"","sources":["../src/dropdown-button.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, css, html, nothing, type PropertyValues } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { iconChevronRight } from \"./icons.js\";\nimport { tokens } from \"./tokens.js\";\n\n/** A single menu action. */\nexport interface DropdownOption {\n  value: string;\n  label: string;\n}\n\n/**\n * A primary-styled button with a label and chevron that opens an anchored\n * menu of actions — essentially `form-select` minus \"current value\"\n * semantics: a menu, not a select. Use for a set of mutually exclusive\n * next-step actions (e.g. a failed task's Retry / Close / Backlog).\n *\n * @element dropdown-button\n * @fires select - Fired with `{ value: string }` when a menu item is picked.\n */\n@customElement(\"dropdown-button\")\nexport class DropdownButton extends LitElement {\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: inline-block;\n        position: relative;\n        font-family: var(--ui-font, ui-sans-serif, system-ui, sans-serif);\n      }\n      button.trigger {\n        display: flex;\n        align-items: center;\n        gap: 0.35rem;\n        font: inherit;\n        font-size: var(--ui-font-size-sm, 0.75rem);\n        font-weight: 500;\n        color: #fff;\n        background: var(--ui-primary, #4f46e5);\n        border: 1px solid transparent;\n        border-radius: var(--ui-radius-sm, 0.25rem);\n        padding: 0.5rem 0.9rem;\n        cursor: pointer;\n      }\n      button.trigger:hover:not(:disabled) {\n        background: var(--ui-primary-hover, #4338ca);\n      }\n      button.trigger:disabled {\n        cursor: not-allowed;\n        opacity: 0.6;\n      }\n      button.trigger:focus-visible {\n        outline: none;\n        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));\n      }\n      .chevron {\n        display: flex;\n        transform: rotate(90deg);\n        transition: transform 0.1s ease;\n      }\n      :host([open]) .chevron {\n        transform: rotate(-90deg);\n      }\n      ul.options {\n        position: absolute;\n        top: 100%;\n        right: 0;\n        z-index: 10;\n        min-width: 100%;\n        max-height: 40vh;\n        overflow-y: auto;\n        margin: 2px 0 0;\n        padding: 4px 0;\n        list-style: none;\n        white-space: nowrap;\n        background: var(--ui-surface, #fff);\n        border: 1px solid var(--ui-border, #e2e8f0);\n        border-radius: var(--ui-radius-sm, 0.25rem);\n        box-shadow: var(--ui-shadow, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1));\n      }\n      li {\n        padding: 0.35rem 0.6rem;\n        cursor: pointer;\n        color: var(--ui-text, #0f172a);\n      }\n      li.active,\n      li:hover {\n        background: var(--ui-surface-muted, #f8fafc);\n      }\n    `,\n  ];\n\n  /** The trigger button's label. */\n  @property() label = \"\";\n  /** The menu's actions. */\n  @property({ attribute: false }) options: DropdownOption[] = [];\n  /** Disables the trigger, preventing the menu from opening. */\n  @property({ type: Boolean }) disabled = false;\n\n  @state() private _open = false;\n  @state() private _activeIndex = -1;\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    window.removeEventListener(\"mousedown\", this.#onWindowMousedown, true);\n  }\n\n  protected override updated(changed: PropertyValues): void {\n    if (!changed.has(\"_open\")) return;\n    this.toggleAttribute(\"open\", this._open);\n    if (this._open) {\n      window.addEventListener(\"mousedown\", this.#onWindowMousedown, true);\n    } else {\n      window.removeEventListener(\"mousedown\", this.#onWindowMousedown, true);\n    }\n  }\n\n  #onWindowMousedown = (e: MouseEvent): void => {\n    if (!e.composedPath().includes(this)) this._open = false;\n  };\n\n  #toggle(): void {\n    if (this.disabled) return;\n    this._open = !this._open;\n    if (this._open) this._activeIndex = 0;\n  }\n\n  #select(option: DropdownOption): void {\n    this._open = false;\n    this.dispatchEvent(new CustomEvent(\"select\", { detail: { value: option.value } }));\n  }\n\n  #onTriggerKeydown(e: KeyboardEvent): void {\n    if (e.key === \"ArrowDown\" || e.key === \"ArrowUp\" || e.key === \"Enter\" || e.key === \" \") {\n      e.preventDefault();\n      if (!this._open) {\n        this.#toggle();\n        return;\n      }\n      if (e.key === \"ArrowDown\") this.#moveActive(1);\n      else if (e.key === \"ArrowUp\") this.#moveActive(-1);\n      else this.#confirmActive();\n    } else if (e.key === \"Escape\" && this._open) {\n      e.preventDefault();\n      this._open = false;\n    }\n  }\n\n  #moveActive(delta: number): void {\n    if (this.options.length === 0) return;\n    const n = this.options.length;\n    this._activeIndex = (this._activeIndex + delta + n) % n;\n  }\n\n  #confirmActive(): void {\n    const option = this.options[this._activeIndex];\n    if (option) this.#select(option);\n  }\n\n  private renderMenu() {\n    if (!this._open) return nothing;\n    return html`\n      <ul class=\"options\" role=\"menu\">\n        ${this.options.map(\n          (o, i) => html`\n            <li\n              role=\"menuitem\"\n              class=${i === this._activeIndex ? \"active\" : \"\"}\n              @mousedown=${(e: MouseEvent) => {\n                e.preventDefault();\n                this.#select(o);\n              }}\n            >\n              ${o.label}\n            </li>\n          `,\n        )}\n      </ul>\n    `;\n  }\n\n  override render() {\n    return html`\n      <button\n        type=\"button\"\n        class=\"trigger\"\n        aria-haspopup=\"menu\"\n        aria-expanded=${this._open}\n        ?disabled=${this.disabled}\n        @click=${() => this.#toggle()}\n        @keydown=${(e: KeyboardEvent) => this.#onTriggerKeydown(e)}\n      >\n        <span>${this.label}</span>\n        <span class=\"chevron\">${iconChevronRight(14)}</span>\n      </button>\n      ${this.renderMenu()}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"dropdown-button\": DropdownButton;\n  }\n}\n"]}
+{"version":3,"file":"dropdown-button.js","sourceRoot":"","sources":["../src/dropdown-button.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, css, html, nothing, type PropertyValues } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { iconChevronRight } from \"./icons.js\";\nimport { tokens } from \"./tokens.js\";\n\nlet instanceCount = 0;\n\n/** A single menu action. */\nexport interface DropdownOption {\n  value: string;\n  label: string;\n}\n\n/**\n * A primary-styled button with a label and chevron that opens an anchored\n * menu of actions — essentially `form-select` minus \"current value\"\n * semantics: a menu, not a select. Use for a set of mutually exclusive\n * next-step actions (e.g. a failed task's Retry / Close / Backlog).\n *\n * @element dropdown-button\n * @fires select - Fired with `{ value: string }` when a menu item is picked.\n */\n@customElement(\"dropdown-button\")\nexport class DropdownButton extends LitElement {\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: inline-block;\n        position: relative;\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      button.trigger {\n        display: flex;\n        align-items: center;\n        gap: 0.25rem;\n        font: inherit;\n        font-size: var(--ui-font-size-sm, 0.75rem);\n        font-weight: 500;\n        color: var(--ui-on-accent, #ffffff);\n        background: var(--ui-primary, #4f46e5);\n        border: 1px solid transparent;\n        border-radius: var(--ui-radius-sm, 0.25rem);\n        padding: 0.5rem 1rem;\n        cursor: pointer;\n      }\n      button.trigger:hover:not(:disabled) {\n        background: var(--ui-primary-hover, #4338ca);\n      }\n      button.trigger:disabled {\n        cursor: not-allowed;\n        opacity: 0.6;\n      }\n      button.trigger:focus-visible {\n        outline: none;\n        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));\n      }\n      .chevron {\n        display: flex;\n        transform: rotate(90deg);\n        transition: transform 150ms ease;\n      }\n      :host([open]) .chevron {\n        transform: rotate(-90deg);\n      }\n      ul.options {\n        position: absolute;\n        top: 100%;\n        right: 0;\n        z-index: 10;\n        min-width: 100%;\n        max-height: 40vh;\n        overflow-y: auto;\n        margin: 0.25rem 0 0;\n        padding: 0.25rem 0;\n        list-style: none;\n        white-space: nowrap;\n        background: var(--ui-surface, #ffffff);\n        border: 1px solid var(--ui-border, #e2e8f0);\n        border-radius: var(--ui-radius-sm, 0.25rem);\n        box-shadow: var(--ui-shadow, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1));\n      }\n      li {\n        padding: 0.5rem 0.75rem;\n        cursor: pointer;\n        color: var(--ui-text, #0f172a);\n      }\n      li.active,\n      li:hover {\n        background: var(--ui-surface-muted, #f8fafc);\n      }\n      @media (prefers-reduced-motion: reduce) {\n        .chevron {\n          transition: none;\n        }\n      }\n      @media (forced-colors: active) {\n        button.trigger:focus-visible {\n          outline: 2px solid CanvasText;\n          outline-offset: 2px;\n          box-shadow: none;\n        }\n        button.trigger:disabled {\n          color: GrayText;\n          opacity: 1;\n        }\n        li.active,\n        li:hover {\n          color: HighlightText;\n          background: Highlight;\n        }\n      }\n    `,\n  ];\n\n  /** The trigger button's label. */\n  @property() label = \"\";\n  /** The menu's actions. */\n  @property({ attribute: false }) options: DropdownOption[] = [];\n  /** Disables the trigger, preventing the menu from opening. */\n  @property({ type: Boolean }) disabled = false;\n\n  @state() private _open = false;\n  @state() private _activeIndex = -1;\n  readonly #menuId = `dropdown-button-menu-${++instanceCount}`;\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    window.removeEventListener(\"mousedown\", this.#onWindowMousedown, true);\n    this._open = false;\n    this._activeIndex = -1;\n  }\n\n  protected override updated(changed: PropertyValues): void {\n    if (changed.has(\"disabled\") && this.disabled) {\n      this._open = false;\n      this._activeIndex = -1;\n    }\n    if (!changed.has(\"_open\")) return;\n    this.toggleAttribute(\"open\", this._open);\n    if (this._open) {\n      window.addEventListener(\"mousedown\", this.#onWindowMousedown, true);\n    } else {\n      window.removeEventListener(\"mousedown\", this.#onWindowMousedown, true);\n    }\n  }\n\n  #onWindowMousedown = (e: MouseEvent): void => {\n    if (!e.composedPath().includes(this)) this._open = false;\n  };\n\n  #toggle(): void {\n    if (this.disabled) return;\n    this._open = !this._open;\n    if (this._open) this._activeIndex = 0;\n  }\n\n  #select(option: DropdownOption): void {\n    if (this.disabled) return;\n    this._open = false;\n    this.dispatchEvent(new CustomEvent(\"select\", { detail: { value: option.value } }));\n  }\n\n  #onTriggerKeydown(e: KeyboardEvent): void {\n    if (e.key === \"ArrowDown\" || e.key === \"ArrowUp\" || e.key === \"Enter\" || e.key === \" \") {\n      e.preventDefault();\n      if (!this._open) {\n        this.#toggle();\n        return;\n      }\n      if (e.key === \"ArrowDown\") this.#moveActive(1);\n      else if (e.key === \"ArrowUp\") this.#moveActive(-1);\n      else this.#confirmActive();\n    } else if (e.key === \"Escape\" && this._open) {\n      e.preventDefault();\n      this._open = false;\n    }\n  }\n\n  #moveActive(delta: number): void {\n    if (this.options.length === 0) return;\n    const n = this.options.length;\n    this._activeIndex = (this._activeIndex + delta + n) % n;\n  }\n\n  #confirmActive(): void {\n    const option = this.options[this._activeIndex];\n    if (option) this.#select(option);\n  }\n\n  private renderMenu() {\n    if (!this._open) return nothing;\n    return html`\n      <ul id=${this.#menuId} class=\"options\" role=\"menu\" aria-label=${this.label}>\n        ${this.options.map(\n          (o, i) => html`\n            <li\n              id=${`${this.#menuId}-item-${i}`}\n              role=\"menuitem\"\n              class=${i === this._activeIndex ? \"active\" : \"\"}\n              @mousedown=${(e: MouseEvent) => {\n                if (e.button !== 0) return;\n                e.preventDefault();\n                this.#select(o);\n              }}\n            >\n              ${o.label}\n            </li>\n          `,\n        )}\n      </ul>\n    `;\n  }\n\n  override render() {\n    const activeDescendant =\n      this._open && this._activeIndex >= 0\n        ? `${this.#menuId}-item-${this._activeIndex}`\n        : nothing;\n    return html`\n      <button\n        type=\"button\"\n        class=\"trigger\"\n        aria-haspopup=\"menu\"\n        aria-expanded=${this._open}\n        aria-controls=${this.#menuId}\n        aria-activedescendant=${activeDescendant}\n        ?disabled=${this.disabled}\n        @click=${() => this.#toggle()}\n        @keydown=${(e: KeyboardEvent) => this.#onTriggerKeydown(e)}\n      >\n        <span>${this.label}</span>\n        <span class=\"chevron\" aria-hidden=\"true\">${iconChevronRight(14)}</span>\n      </button>\n      ${this.renderMenu()}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"dropdown-button\": DropdownButton;\n  }\n}\n"]}

package/dist/editable-text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"editable-text.d.ts","sourceRoot":"","sources":["../src/editable-text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD;;;;;;;;GAQG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,4BAuDpB;IAEF,oBAAoB;IACR,KAAK,SAAM;IACvB,yEAAyE;IAC5C,SAAS,UAAS;IAC/C,0FAA0F;IAC9E,WAAW,SAAM;IAC7B,mCAAmC;IACN,QAAQ,UAAS;IAC9C,kDAAkD;IACtC,KAAK,SAAM;IAEd,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,MAAM,CAAM;IAEH,OAAO,CAAC,MAAM,CAAC,CAAyC;IAElF,kEAAkE;IAClE,OAAO,CAAC,UAAU;IAMlB;;;;;;;OAOG;IACH,OAAO,CAAC,OAAO;IAUf,iEAAiE;IACjE,OAAO,CAAC,OAAO;IAIf,OAAO,CAAC,QAAQ;IAKhB,OAAO,CAAC,oBAAoB;IAU5B,OAAO,CAAC,mBAAmB;IAU3B,sDAAsD;IACtD,OAAO,CAAC,OAAO;IAOf,UAAmB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,QASvD;IAEQ,MAAM,yCA4Bd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAC;KAC/B;CACF"}
+{"version":3,"file":"editable-text.d.ts","sourceRoot":"","sources":["../src/editable-text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD;;;;;;;;GAQG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,4BAqFpB;IAEF,oBAAoB;IACR,KAAK,SAAM;IACvB,yEAAyE;IAC5C,SAAS,UAAS;IAC/C,0FAA0F;IAC9E,WAAW,SAAM;IAC7B,mCAAmC;IACN,QAAQ,UAAS;IAC9C,kDAAkD;IACtC,KAAK,SAAM;IAEd,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,MAAM,CAAM;IAEH,OAAO,CAAC,MAAM,CAAC,CAAyC;IAElF,kEAAkE;IAClE,OAAO,CAAC,UAAU;IAMlB;;;;;;;OAOG;IACH,OAAO,CAAC,OAAO;IAUf,iEAAiE;IACjE,OAAO,CAAC,OAAO;IAIf,OAAO,CAAC,QAAQ;IAKhB,OAAO,CAAC,oBAAoB;IAU5B,OAAO,CAAC,mBAAmB;IAU3B,sDAAsD;IACtD,OAAO,CAAC,OAAO;IAOf,UAAmB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,QASvD;IAEQ,MAAM,yCA+Bd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAC;KAC/B;CACF"}

package/dist/editable-text.js

@@ -43,26 +43,43 @@ let EditableText = class EditableText extends LitElement {
         line-height: inherit;
       }
       .display {
+        display: block;
+        width: 100%;
+        box-sizing: border-box;
+        border: 0;
+        color: inherit;
+        background: transparent;
+        font: inherit;
+        line-height: inherit;
+        text-align: inherit;
         cursor: text;
         border-radius: var(--ui-radius-sm, 0.25rem);
-        padding: 0.1rem 0.3rem;
-        margin: -0.1rem -0.3rem;
+        padding: 0.25rem;
+        margin: -0.25rem;
       }
       .display.multiline {
+        /* Inactive multiline text is flush; the active textarea keeps its editor inset. */
         white-space: pre-wrap;
+        padding: 0;
+        margin: 0;
       }
-      .display:hover {
+      .display:hover:not(:disabled) {
         background: var(--ui-surface-muted, #f8fafc);
       }
       .display.empty {
         color: var(--ui-text-muted, #64748b);
       }
-      .display.readonly {
+      .display:disabled {
         cursor: inherit;
+        opacity: 0.6;
       }
-      .display.readonly:hover {
+      .display:disabled:hover {
         background: none;
       }
+      .display:focus-visible {
+        outline: none;
+        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));
+      }
       input,
       textarea {
         display: block;
@@ -70,15 +87,15 @@ let EditableText = class EditableText extends LitElement {
         box-sizing: border-box;
         font: inherit;
         color: inherit;
-        background: var(--ui-surface, #fff);
+        background: var(--ui-surface, #ffffff);
         border: 1px solid var(--ui-border, #e2e8f0);
         border-radius: var(--ui-radius-sm, 0.25rem);
-        padding: 0.1rem 0.3rem;
-        margin: -0.1rem -0.3rem;
+        padding: 0.25rem;
+        margin: -0.25rem;
         outline: none;
       }
-      input:focus,
-      textarea:focus {
+      input:focus-visible,
+      textarea:focus-visible {
         border-color: var(--ui-primary, #4f46e5);
         box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));
       }
@@ -86,6 +103,19 @@ let EditableText = class EditableText extends LitElement {
         resize: none;
         overflow: hidden;
       }
+      @media (forced-colors: active) {
+        .display:focus-visible,
+        input:focus-visible,
+        textarea:focus-visible {
+          outline: 2px solid CanvasText;
+          outline-offset: 2px;
+          box-shadow: none;
+        }
+        .display:disabled {
+          color: GrayText;
+          opacity: 1;
+        }
+      }
     `,
     ]; }
     /** Enters edit mode, seeding the draft from the current value. */
@@ -188,9 +218,12 @@ let EditableText = class EditableText extends LitElement {
         }
         const isEmpty = this.value.trim() === "";
         const classes = `display ${this.multiline ? "multiline" : ""} ${isEmpty ? "empty" : ""} ${this.readonly ? "readonly" : ""}`;
-        return html `<span class=${classes} @click=${this._startEdit}
-      >${isEmpty ? this.placeholder : this.value}</span
-    >`;
+        return html `<button
+      type="button"
+      class=${classes}
+      ?disabled=${this.readonly}
+      @click=${this._startEdit}
+    >${isEmpty ? this.placeholder : this.value}</button>`;
     }
 };
 __decorate([