@sondor-technology/sondor-components 1.0.8 → 1.0.10

package/dist/components/line-chart/line-chart.js

@@ -0,0 +1,271 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 { html, css, svg, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { resetStyles } from "../../styles/reset.js";
+import { StChartBase } from "../chart/chart-base.js";
+import { areaPaths, chartColor, clamp, linePath, niceScale, stepIndex } from "../chart/chart.utils.js";
+const MARGIN = { top: 12, right: 16, bottom: 28, left: 48 };
+/**
+ * Line (and optional area) chart with a shared crosshair tooltip.
+ * Hover/focus a position to read every series; click or press Enter/Space to select it.
+ */
+let StLineChart = class StLineChart extends StChartBase {
+    constructor() {
+        super(...arguments);
+        /** X axis category labels, one per data point. */
+        this.labels = [];
+        this.series = [];
+        /** Fills the area under each line. */
+        this.area = false;
+        /** Index of the selected position, or null. */
+        this.selected = null;
+        this._active = null;
+        this._hidden = new Set();
+    }
+    get _visible() {
+        return this.series
+            .map((s, i) => ({ s, i, color: chartColor(i, s.color) }))
+            .filter(({ i }) => !this._hidden.has(i));
+    }
+    get _count() {
+        return Math.max(this.labels.length, ...this.series.map((s) => s.data.length), 0);
+    }
+    _geometry() {
+        const innerW = Math.max(this._width - MARGIN.left - MARGIN.right, 1);
+        const innerH = Math.max(this.height - MARGIN.top - MARGIN.bottom, 1);
+        const values = this._visible.flatMap(({ s }) => s.data.filter((v) => v != null));
+        const lo = this.yMin ?? Math.min(0, ...values);
+        const hi = this.yMax ?? Math.max(0, ...values);
+        const scale = niceScale(lo, hi);
+        const n = this._count;
+        const x = (i) => MARGIN.left + (n <= 1 ? innerW / 2 : (i * innerW) / (n - 1));
+        const y = (v) => MARGIN.top + innerH * (1 - (clamp(v, scale.min, scale.max) - scale.min) / (scale.max - scale.min));
+        return { innerW, innerH, scale, n, x, y };
+    }
+    _valuesAt(index) {
+        return this.series.map((s, i) => ({
+            series: s.name,
+            value: s.data[index] ?? null,
+            color: chartColor(i, s.color),
+            hidden: this._hidden.has(i),
+        }));
+    }
+    _label(index) {
+        return this.labels[index] ?? String(index + 1);
+    }
+    _setActive(index) {
+        if (index === this._active)
+            return;
+        this._active = index;
+        if (index === null) {
+            this.hideTooltip();
+            this.emit("st-chart-leave", {});
+            return;
+        }
+        const { x, y, scale } = this._geometry();
+        const visibleValues = this._valuesAt(index).filter((v) => !v.hidden && v.value !== null);
+        const top = visibleValues.length
+            ? Math.min(...visibleValues.map((v) => y(v.value)))
+            : y(scale.max);
+        const title = this._label(index);
+        this.showTooltip({
+            x: x(index),
+            y: top,
+            title,
+            rows: visibleValues.map((v) => ({
+                label: v.series,
+                value: this.fmt(v.value),
+                color: v.color,
+            })),
+        }, `${title}: ${visibleValues.map((v) => `${v.series} ${this.fmt(v.value)}`).join(", ")}`);
+        this.emit("st-chart-hover", { index, label: title, values: visibleValues });
+    }
+    _select(index) {
+        if (!this.selectable)
+            return;
+        this.selected = this.selected === index ? null : index;
+        this.emit("st-chart-select", {
+            index,
+            label: this._label(index),
+            values: this._valuesAt(index),
+            selected: this.selected === index,
+        });
+    }
+    _indexFromPointer(e) {
+        const { innerW, n } = this._geometry();
+        const rect = e.currentTarget.ownerSVGElement.getBoundingClientRect();
+        const ratio = clamp((e.clientX - rect.left - MARGIN.left) / innerW, 0, 1);
+        return n <= 1 ? 0 : Math.round(ratio * (n - 1));
+    }
+    _onKeydown(e) {
+        if (e.key === "Escape")
+            return this._setActive(null);
+        if ((e.key === "Enter" || e.key === " ") && this._active !== null) {
+            e.preventDefault();
+            return this._select(this._active);
+        }
+        const next = stepIndex(e.key, this._active, this._count);
+        if (next !== null) {
+            e.preventDefault();
+            this._setActive(next);
+        }
+    }
+    _toggleSeries(index) {
+        const hidden = new Set(this._hidden);
+        if (hidden.has(index))
+            hidden.delete(index);
+        else
+            hidden.add(index);
+        this._hidden = hidden;
+        this._active = null;
+        this.hideTooltip();
+        this.emit("st-chart-legend-toggle", {
+            name: this.series[index].name,
+            index,
+            hidden: hidden.has(index),
+        });
+    }
+    _renderPlot() {
+        const { innerW, innerH, scale, n, x, y } = this._geometry();
+        const baseline = y(clamp(0, scale.min, scale.max));
+        const stride = Math.max(1, Math.ceil((n * 56) / innerW));
+        return svg `
+      <svg width=${this._width} height=${this.height} aria-hidden="true">
+        ${scale.ticks.map((t) => svg `
+            <line class="grid" x1=${MARGIN.left} x2=${MARGIN.left + innerW} y1=${y(t)} y2=${y(t)}></line>
+            <text class="tick" x=${MARGIN.left - 8} y=${y(t)} text-anchor="end" dominant-baseline="middle">${this.fmtAxis(t)}</text>
+          `)}
+        ${Array.from({ length: n }, (_, i) => i % stride === 0
+            ? svg `<text class="tick" x=${x(i)} y=${MARGIN.top + innerH + 18} text-anchor="middle">${this._label(i)}</text>`
+            : nothing)}
+        ${this.selected !== null && this.selected < n
+            ? svg `<rect class="selected-band" x=${x(this.selected) - 12} y=${MARGIN.top} width="24" height=${innerH}></rect>`
+            : nothing}
+        ${this._visible.map(({ s, color }) => {
+            const points = Array.from({ length: n }, (_, i) => {
+                const v = s.data[i];
+                return v == null ? null : [x(i), y(v)];
+            });
+            return svg `
+            ${this.area
+                ? areaPaths(points, baseline).map((d) => svg `<path class="area" d=${d} style="fill:${color}"></path>`)
+                : nothing}
+            <path class="line" d=${linePath(points)} style="stroke:${color}"></path>
+            ${points.map((p, i) => p
+                ? svg `<circle class="point animate" cx=${p[0]} cy=${p[1]} style="fill:${color}"
+                    r=${i === this._active || i === this.selected ? 5 : 3}></circle>`
+                : nothing)}
+          `;
+        })}
+        ${this._active !== null
+            ? svg `<line class="crosshair" x1=${x(this._active)} x2=${x(this._active)} y1=${MARGIN.top} y2=${MARGIN.top + innerH}></line>`
+            : nothing}
+        <rect
+          x=${MARGIN.left}
+          y=${MARGIN.top}
+          width=${innerW}
+          height=${innerH}
+          class="hit"
+          fill="transparent"
+          @pointermove=${(e) => this._setActive(this._indexFromPointer(e))}
+          @pointerleave=${() => this._setActive(null)}
+          @click=${(e) => this._select(this._indexFromPointer(e))}
+        ></rect>
+      </svg>
+    `;
+    }
+    render() {
+        const n = this._count;
+        return html `
+      <div class="chart">
+        ${this._width > 0
+            ? html `
+              <div
+                class="plot"
+                tabindex="0"
+                role="group"
+                aria-roledescription="line chart"
+                aria-label=${this.label || "Line chart"}
+                @keydown=${this._onKeydown}
+                @focus=${() => this._active === null && n && this._setActive(0)}
+                @blur=${() => this._setActive(null)}
+              >
+                ${this._renderPlot()} ${this.renderTooltip()}
+              </div>
+            `
+            : nothing}
+        ${this.renderLegend(this.series.map((s, i) => ({
+            name: s.name,
+            color: chartColor(i, s.color),
+            hidden: this._hidden.has(i),
+        })), (i) => this._toggleSeries(i))}
+        ${this.renderLiveRegion()}
+        ${this.renderDataTable(["Category", ...this.series.map((s) => s.name)], Array.from({ length: n }, (_, i) => [
+            this._label(i),
+            ...this.series.map((s) => (s.data[i] == null ? "–" : this.fmt(s.data[i]))),
+        ]))}
+      </div>
+    `;
+    }
+};
+StLineChart.styles = [
+    resetStyles,
+    StChartBase.baseStyles,
+    css `
+      .line {
+        fill: none;
+        stroke-width: 2;
+        stroke-linejoin: round;
+        stroke-linecap: round;
+      }
+      .area {
+        opacity: 0.15;
+      }
+      .crosshair {
+        stroke: var(--st-color-text-muted);
+        stroke-width: 1;
+        stroke-dasharray: 4 3;
+      }
+      .selected-band {
+        fill: var(--st-color-primary-muted);
+      }
+      .point {
+        stroke: var(--st-color-bg);
+        stroke-width: 2;
+      }
+    `,
+];
+__decorate([
+    property({ type: Array })
+], StLineChart.prototype, "labels", void 0);
+__decorate([
+    property({ type: Array })
+], StLineChart.prototype, "series", void 0);
+__decorate([
+    property({ type: Boolean })
+], StLineChart.prototype, "area", void 0);
+__decorate([
+    property({ type: Number, attribute: "y-min" })
+], StLineChart.prototype, "yMin", void 0);
+__decorate([
+    property({ type: Number, attribute: "y-max" })
+], StLineChart.prototype, "yMax", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], StLineChart.prototype, "selected", void 0);
+__decorate([
+    state()
+], StLineChart.prototype, "_active", void 0);
+__decorate([
+    state()
+], StLineChart.prototype, "_hidden", void 0);
+StLineChart = __decorate([
+    customElement("st-line-chart")
+], StLineChart);
+export { StLineChart };
+//# sourceMappingURL=line-chart.js.map

package/dist/components/line-chart/line-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"line-chart.js","sourceRoot":"","sources":["../../../src/components/line-chart/line-chart.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AACjE,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAC,WAAW,EAAmB,MAAM,wBAAwB,CAAC;AACrE,OAAO,EAAC,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAC,MAAM,yBAAyB,CAAC;AAErG,MAAM,MAAM,GAAG,EAAC,GAAG,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAC,CAAC;AAE1D;;;GAGG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,WAAW;IAArC;;QACL,kDAAkD;QACzB,WAAM,GAAa,EAAE,CAAC;QACtB,WAAM,GAAkB,EAAE,CAAC;QACpD,sCAAsC;QACX,SAAI,GAAG,KAAK,CAAC;QAGxC,+CAA+C;QACN,aAAQ,GAAkB,IAAI,CAAC;QAEvD,YAAO,GAAkB,IAAI,CAAC;QAC9B,YAAO,GAAG,IAAI,GAAG,EAAU,CAAC;IA+O/C,CAAC;IAjNC,IAAY,QAAQ;QAClB,OAAO,IAAI,CAAC,MAAM;aACf,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,EAAC,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,EAAC,CAAC,CAAC;aACtD,MAAM,CAAC,CAAC,EAAC,CAAC,EAAC,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;IAC3C,CAAC;IAED,IAAY,MAAM;QAChB,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC;IACnF,CAAC;IAEO,SAAS;QACf,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,IAAI,GAAG,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;QACrE,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,GAAG,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;QACrE,MAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,EAAC,CAAC,EAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAe,EAAE,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC;QAC5F,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,MAAM,CAAC,CAAC;QAC/C,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,MAAM,CAAC,CAAC;QAC/C,MAAM,KAAK,GAAG,SAAS,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;QAChC,MAAM,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC;QACtB,MAAM,CAAC,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;QACtF,MAAM,CAAC,GAAG,CAAC,CAAS,EAAE,EAAE,CACtB,MAAM,CAAC,GAAG,GAAG,MAAM,GAAG,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC;QACrG,OAAO,EAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAC,CAAC;IAC1C,CAAC;IAEO,SAAS,CAAC,KAAa;QAC7B,OAAO,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;YAChC,MAAM,EAAE,CAAC,CAAC,IAAI;YACd,KAAK,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI;YAC5B,KAAK,EAAE,UAAU,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC;YAC7B,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC;SAC5B,CAAC,CAAC,CAAC;IACN,CAAC;IAEO,MAAM,CAAC,KAAa;QAC1B,OAAO,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,MAAM,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;IACjD,CAAC;IAEO,UAAU,CAAC,KAAoB;QACrC,IAAI,KAAK,KAAK,IAAI,CAAC,OAAO;YAAE,OAAO;QACnC,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;YACnB,IAAI,CAAC,WAAW,EAAE,CAAC;YACnB,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,EAAE,CAAC,CAAC;YAChC,OAAO;QACT,CAAC;QACD,MAAM,EAAC,CAAC,EAAE,CAAC,EAAE,KAAK,EAAC,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;QACvC,MAAM,aAAa,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,IAAI,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,CAAC;QACzF,MAAM,GAAG,GAAG,aAAa,CAAC,MAAM;YAC9B,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,KAAe,CAAC,CAAC,CAAC;YAC7D,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QACjB,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACjC,IAAI,CAAC,WAAW,CACd;YACE,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC;YACX,CAAC,EAAE,GAAG;YACN,KAAK;YACL,IAAI,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;gBAC9B,KAAK,EAAE,CAAC,CAAC,MAAM;gBACf,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,KAAe,CAAC;gBAClC,KAAK,EAAE,CAAC,CAAC,KAAK;aACf,CAAC,CAAC;SACJ,EACD,GAAG,KAAK,KAAK,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,CAAC,MAAM,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,KAAe,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CACjG,CAAC;QACF,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,EAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,aAAa,EAAC,CAAC,CAAC;IAC5E,CAAC;IAEO,OAAO,CAAC,KAAa;QAC3B,IAAI,CAAC,IAAI,CAAC,UAAU;YAAE,OAAO;QAC7B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,KAAK,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;QACvD,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE;YAC3B,KAAK;YACL,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC;YACzB,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC;YAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,KAAK,KAAK;SAClC,CAAC,CAAC;IACL,CAAC;IAEO,iBAAiB,CAAC,CAAe;QACvC,MAAM,EAAC,MAAM,EAAE,CAAC,EAAC,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;QACrC,MAAM,IAAI,GAAI,CAAC,CAAC,aAA4B,CAAC,eAAgB,CAAC,qBAAqB,EAAE,CAAC;QACtF,MAAM,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;QAC1E,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IAClD,CAAC;IAEO,UAAU,CAAC,CAAgB;QACjC,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ;YAAE,OAAO,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;QACrD,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI,EAAE,CAAC;YAClE,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,OAAO,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACpC,CAAC;QACD,MAAM,IAAI,GAAG,SAAS,CAAC,CAAC,CAAC,GAAG,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;QACzD,IAAI,IAAI,KAAK,IAAI,EAAE,CAAC;YAClB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;QACxB,CAAC;IACH,CAAC;IAEO,aAAa,CAAC,KAAa;QACjC,MAAM,MAAM,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACrC,IAAI,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC;YAAE,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;;YACvC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QACvB,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;QACtB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACpB,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,IAAI,CAAC,IAAI,CAAC,wBAAwB,EAAE;YAClC,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,IAAI;YAC7B,KAAK;YACL,MAAM,EAAE,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC;SAC1B,CAAC,CAAC;IACL,CAAC;IAEO,WAAW;QACjB,MAAM,EAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAC,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;QAC1D,MAAM,QAAQ,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC;QACnD,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC;QACzD,OAAO,GAAG,CAAA;mBACK,IAAI,CAAC,MAAM,WAAW,IAAI,CAAC,MAAM;UAC1C,KAAK,CAAC,KAAK,CAAC,GAAG,CACf,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CAAA;oCACgB,MAAM,CAAC,IAAI,OAAO,MAAM,CAAC,IAAI,GAAG,MAAM,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;mCAC7D,MAAM,CAAC,IAAI,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,iDAAiD,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;WACjH,CACF;UACC,KAAK,CAAC,IAAI,CAAC,EAAC,MAAM,EAAE,CAAC,EAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CACjC,CAAC,GAAG,MAAM,KAAK,CAAC;YACd,CAAC,CAAC,GAAG,CAAA,wBAAwB,CAAC,CAAC,CAAC,CAAC,MAAM,MAAM,CAAC,GAAG,GAAG,MAAM,GAAG,EAAE,yBAAyB,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;YAC/G,CAAC,CAAC,OAAO,CACZ;UACC,IAAI,CAAC,QAAQ,KAAK,IAAI,IAAI,IAAI,CAAC,QAAQ,GAAG,CAAC;YAC3C,CAAC,CAAC,GAAG,CAAA,iCAAiC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE,MAAM,MAAM,CAAC,GAAG,sBAAsB,MAAM,UAAU;YACjH,CAAC,CAAC,OAAO;UACT,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,EAAC,CAAC,EAAE,KAAK,EAAC,EAAE,EAAE;YACjC,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,EAAC,MAAM,EAAE,CAAC,EAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;gBAC9C,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;gBACpB,OAAO,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAE,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAsB,CAAC;YAC/D,CAAC,CAAC,CAAC;YACH,OAAO,GAAG,CAAA;cACN,IAAI,CAAC,IAAI;gBACT,CAAC,CAAC,SAAS,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,GAAG,CAC7B,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CAAA,wBAAwB,CAAC,gBAAgB,KAAK,WAAW,CACpE;gBACH,CAAC,CAAC,OAAO;mCACY,QAAQ,CAAC,MAAM,CAAC,kBAAkB,KAAK;cAC5D,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CACpB,CAAC;gBACC,CAAC,CAAC,GAAG,CAAA,oCAAoC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,gBAAgB,KAAK;wBACrE,CAAC,KAAK,IAAI,CAAC,OAAO,IAAI,CAAC,KAAK,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY;gBACrE,CAAC,CAAC,OAAO,CACZ;WACF,CAAC;QACJ,CAAC,CAAC;UACA,IAAI,CAAC,OAAO,KAAK,IAAI;YACrB,CAAC,CAAC,GAAG,CAAA,8BAA8B,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,MAAM,CAAC,GAAG,OAAO,MAAM,CAAC,GAAG,GAAG,MAAM,UAAU;YAC7H,CAAC,CAAC,OAAO;;cAEL,MAAM,CAAC,IAAI;cACX,MAAM,CAAC,GAAG;kBACN,MAAM;mBACL,MAAM;;;yBAGA,CAAC,CAAe,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC;0BAC9D,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;mBAClC,CAAC,CAAe,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC;;;KAG1E,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,MAAM,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC;QACtB,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,MAAM,GAAG,CAAC;YACf,CAAC,CAAC,IAAI,CAAA;;;;;;6BAMa,IAAI,CAAC,KAAK,IAAI,YAAY;2BAC5B,IAAI,CAAC,UAAU;yBACjB,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,KAAK,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;wBACvD,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;;kBAEjC,IAAI,CAAC,WAAW,EAAE,IAAI,IAAI,CAAC,aAAa,EAAE;;aAE/C;YACH,CAAC,CAAC,OAAO;UACT,IAAI,CAAC,YAAY,CACjB,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;YACzB,IAAI,EAAE,CAAC,CAAC,IAAI;YACZ,KAAK,EAAE,UAAU,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC;YAC7B,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC;SAC5B,CAAC,CAAC,EACH,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAC7B;UACC,IAAI,CAAC,gBAAgB,EAAE;UACvB,IAAI,CAAC,eAAe,CACpB,CAAC,UAAU,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,EAC/C,KAAK,CAAC,IAAI,CAAC,EAAC,MAAM,EAAE,CAAC,EAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;YAChC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;YACd,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAW,CAAC,CAAC,CAAC;SACrF,CAAC,CACH;;KAEJ,CAAC;IACJ,CAAC;CACF,CAAA;AA7OQ,kBAAM,GAAG;IACd,WAAW;IACX,WAAW,CAAC,UAAU;IACtB,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;KAsBF;CACF,AA1BY,CA0BX;AAtCuB;IAAxB,QAAQ,CAAC,EAAC,IAAI,EAAE,KAAK,EAAC,CAAC;2CAAuB;AACtB;IAAxB,QAAQ,CAAC,EAAC,IAAI,EAAE,KAAK,EAAC,CAAC;2CAA4B;AAEzB;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;yCAAc;AACM;IAA7C,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAC,CAAC;yCAAe;AACd;IAA7C,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAC,CAAC;yCAAe;AAEnB;IAAxC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;6CAAgC;AAEvD;IAAhB,KAAK,EAAE;4CAAuC;AAC9B;IAAhB,KAAK,EAAE;4CAAqC;AAZlC,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW,CA2PvB"}

package/dist/components/list/list-item.d.ts

@@ -0,0 +1,45 @@
+import { LitElement } from "lit";
+import "../icon/icon.js";
+import "../avatar/avatar.js";
+/**
+ * A row inside `st-list`. It becomes a link when `href` is set, a button when `interactive`
+ * is set, and plain content otherwise.
+ *
+ * Slots: `leading` (icon, avatar, image), default (replaces heading/description), `meta`
+ * (right aligned details) and `actions` (buttons that stay clickable independently).
+ *
+ * Events: `st-item-click` (detail: `{ value, href }`) for links and interactive rows.
+ */
+export declare class StListItem extends LitElement {
+    heading: string;
+    description: string;
+    /** Short right-aligned detail such as a date or status. */
+    meta: string;
+    /** Leading icon name. */
+    icon: string;
+    /** Leading avatar; shows initials derived from this name. */
+    avatar: string;
+    href?: string;
+    target: "_blank" | "_self";
+    /** Renders the row as a button that emits `st-item-click`. */
+    interactive: boolean;
+    /** Marks the row as the current item. */
+    selected: boolean;
+    disabled: boolean;
+    /** Identifier echoed back in `st-item-click`. */
+    value: string;
+    private _hasLeadingSlot;
+    private _hasActionsSlot;
+    static styles: import("lit").CSSResult[];
+    connectedCallback(): void;
+    private _onSlotChange;
+    private _emitClick;
+    private _renderContent;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "st-list-item": StListItem;
+    }
+}
+//# sourceMappingURL=list-item.d.ts.map

package/dist/components/list/list-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-item.d.ts","sourceRoot":"","sources":["../../../src/components/list/list-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAqB,MAAM,KAAK,CAAC;AAInD,OAAO,iBAAiB,CAAC;AACzB,OAAO,qBAAqB,CAAC;AAE7B;;;;;;;;GAQG;AACH,qBACa,UAAW,SAAQ,UAAU;IACd,OAAO,SAAM;IACb,WAAW,SAAM;IAC3C,2DAA2D;IACjC,IAAI,SAAM;IACpC,yBAAyB;IACC,IAAI,SAAM;IACpC,6DAA6D;IACnC,MAAM,SAAM;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,QAAQ,GAAG,OAAO,CAAW;IAC/D,8DAA8D;IACpB,WAAW,UAAS;IAC9D,yCAAyC;IACC,QAAQ,UAAS;IACjB,QAAQ,UAAS;IAC3D,iDAAiD;IACvB,KAAK,SAAM;IAE5B,OAAO,CAAC,eAAe,CAAS;IAChC,OAAO,CAAC,eAAe,CAAS;IAEzC,MAAM,CAAC,MAAM,4BAqGX;IAEF,iBAAiB,SAGhB;IAED,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,UAAU;IAWlB,OAAO,CAAC,cAAc;IAuBtB,MAAM,yCA8BL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,UAAU,CAAC;KAC5B;CACF"}

package/dist/components/list/list-item.js

@@ -0,0 +1,263 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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, html, css, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { resetStyles } from "../../styles/reset.js";
+import "../icon/icon.js";
+import "../avatar/avatar.js";
+/**
+ * A row inside `st-list`. It becomes a link when `href` is set, a button when `interactive`
+ * is set, and plain content otherwise.
+ *
+ * Slots: `leading` (icon, avatar, image), default (replaces heading/description), `meta`
+ * (right aligned details) and `actions` (buttons that stay clickable independently).
+ *
+ * Events: `st-item-click` (detail: `{ value, href }`) for links and interactive rows.
+ */
+let StListItem = class StListItem extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.heading = "";
+        this.description = "";
+        /** Short right-aligned detail such as a date or status. */
+        this.meta = "";
+        /** Leading icon name. */
+        this.icon = "";
+        /** Leading avatar; shows initials derived from this name. */
+        this.avatar = "";
+        this.target = "_self";
+        /** Renders the row as a button that emits `st-item-click`. */
+        this.interactive = false;
+        /** Marks the row as the current item. */
+        this.selected = false;
+        this.disabled = false;
+        /** Identifier echoed back in `st-item-click`. */
+        this.value = "";
+        this._hasLeadingSlot = false;
+        this._hasActionsSlot = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.hasAttribute("role"))
+            this.setAttribute("role", "listitem");
+    }
+    _onSlotChange(e, name) {
+        const has = e.target.assignedNodes().length > 0;
+        if (name === "leading")
+            this._hasLeadingSlot = has;
+        else
+            this._hasActionsSlot = has;
+    }
+    _emitClick() {
+        if (this.disabled)
+            return;
+        this.dispatchEvent(new CustomEvent("st-item-click", {
+            detail: { value: this.value, href: this.href },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    _renderContent() {
+        return html `
+      <span class="leading" ?hidden=${!this._hasLeadingSlot && !this.avatar && !this.icon}>
+        <slot name="leading" @slotchange=${(e) => this._onSlotChange(e, "leading")}>
+          ${this.avatar
+            ? html `<st-avatar name=${this.avatar} size="sm"></st-avatar>`
+            : this.icon
+                ? html `<st-icon name=${this.icon} aria-hidden="true"></st-icon>`
+                : nothing}
+        </slot>
+      </span>
+      <span class="body">
+        <slot>
+          <span class="heading">${this.heading}</span>
+          ${this.description
+            ? html `<span class="description">${this.description}</span>`
+            : nothing}
+        </slot>
+      </span>
+      <span class="meta"><slot name="meta">${this.meta}</slot></span>
+    `;
+    }
+    render() {
+        const current = this.selected ? "true" : undefined;
+        const main = this.href
+            ? html `<a
+          class="main"
+          href=${this.href}
+          target=${this.target}
+          rel=${ifDefined(this.target === "_blank" ? "noopener noreferrer" : undefined)}
+          aria-current=${ifDefined(current)}
+          aria-disabled=${ifDefined(this.disabled ? "true" : undefined)}
+          tabindex=${ifDefined(this.disabled ? "-1" : undefined)}
+          @click=${this._emitClick}
+          >${this._renderContent()}</a
+        >`
+            : this.interactive
+                ? html `<button
+            class="main"
+            type="button"
+            aria-current=${ifDefined(current)}
+            ?disabled=${this.disabled}
+            @click=${this._emitClick}
+          >
+            ${this._renderContent()}
+          </button>`
+                : html `<div class="main" aria-current=${ifDefined(current)}>${this._renderContent()}</div>`;
+        return html `${main}
+      <div class="actions" ?hidden=${!this._hasActionsSlot}>
+        <slot name="actions" @slotchange=${(e) => this._onSlotChange(e, "actions")}></slot>
+      </div>`;
+    }
+};
+StListItem.styles = [
+    resetStyles,
+    css `
+      :host {
+        display: flex;
+        align-items: center;
+        gap: var(--st-spacing-sm);
+        border-bottom: 1px solid var(--st-list-divider, var(--st-color-border));
+        color: var(--st-color-text);
+      }
+
+      :host(:last-child) {
+        border-bottom: 0;
+      }
+
+      .main {
+        display: flex;
+        flex: 1;
+        min-width: 0;
+        align-items: center;
+        gap: var(--st-spacing-md);
+        padding: var(--st-list-item-padding-y, var(--st-spacing-md)) var(--st-spacing-md);
+        border: 0;
+        background: none;
+        color: inherit;
+        font: inherit;
+        text-align: left;
+        text-decoration: none;
+      }
+
+      a.main,
+      button.main {
+        cursor: pointer;
+      }
+
+      a.main:hover,
+      button.main:hover {
+        background-color: var(--st-color-surface-hover);
+      }
+
+      .main:focus-visible {
+        outline: 2px solid var(--st-color-primary);
+        outline-offset: -2px;
+      }
+
+      :host([selected]) .main {
+        background-color: var(--st-color-primary-bg);
+        box-shadow: inset 3px 0 0 var(--st-color-primary);
+      }
+
+      :host([disabled]) .main {
+        opacity: 0.5;
+        cursor: not-allowed;
+        pointer-events: none;
+      }
+
+      [hidden] {
+        display: none !important;
+      }
+
+      .leading {
+        display: inline-flex;
+        flex-shrink: 0;
+        color: var(--st-color-text-muted);
+      }
+
+      .body {
+        display: flex;
+        flex: 1;
+        min-width: 0;
+        flex-direction: column;
+        gap: 2px;
+      }
+
+      .heading {
+        font-weight: var(--st-font-weight-medium);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .description {
+        color: var(--st-color-text-muted);
+        font-size: var(--st-font-size-sm);
+      }
+
+      .meta {
+        flex-shrink: 0;
+        color: var(--st-color-text-muted);
+        font-size: var(--st-font-size-sm);
+      }
+
+      .actions {
+        display: flex;
+        flex-shrink: 0;
+        align-items: center;
+        gap: var(--st-spacing-xs);
+        padding-right: var(--st-spacing-md);
+      }
+
+    `,
+];
+__decorate([
+    property({ type: String })
+], StListItem.prototype, "heading", void 0);
+__decorate([
+    property({ type: String })
+], StListItem.prototype, "description", void 0);
+__decorate([
+    property({ type: String })
+], StListItem.prototype, "meta", void 0);
+__decorate([
+    property({ type: String })
+], StListItem.prototype, "icon", void 0);
+__decorate([
+    property({ type: String })
+], StListItem.prototype, "avatar", void 0);
+__decorate([
+    property({ type: String })
+], StListItem.prototype, "href", void 0);
+__decorate([
+    property({ type: String })
+], StListItem.prototype, "target", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], StListItem.prototype, "interactive", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], StListItem.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], StListItem.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], StListItem.prototype, "value", void 0);
+__decorate([
+    state()
+], StListItem.prototype, "_hasLeadingSlot", void 0);
+__decorate([
+    state()
+], StListItem.prototype, "_hasActionsSlot", void 0);
+StListItem = __decorate([
+    customElement("st-list-item")
+], StListItem);
+export { StListItem };
+//# sourceMappingURL=list-item.js.map

package/dist/components/list/list-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-item.js","sourceRoot":"","sources":["../../../src/components/list/list-item.ts"],"names":[],"mappings":"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"}

package/dist/components/list/list.d.ts

@@ -0,0 +1,50 @@
+import { LitElement } from "lit";
+import "./list-item.js";
+import "../skeleton/skeleton.js";
+export interface ListItemData {
+    heading: string;
+    description?: string;
+    meta?: string;
+    icon?: string;
+    avatar?: string;
+    href?: string;
+    value?: string;
+    selected?: boolean;
+    disabled?: boolean;
+    /** Overrides `clickable-items` for this row. */
+    interactive?: boolean;
+    [key: string]: unknown;
+}
+/**
+ * Vertical listing of rows with a heading, description, meta and optional leading visual.
+ * Give it `items` for data-driven lists, or slot your own `st-list-item` elements.
+ *
+ * Events: `st-item-click` (detail: `{ item, index, value, href }`; `item` and `index` are
+ * only present for rows created from `items`).
+ */
+export declare class StList extends LitElement {
+    items: ListItemData[];
+    /** Accessible name for the list. */
+    label: string;
+    dense: boolean;
+    /** Draws an outer border with rounded corners. */
+    bordered: boolean;
+    noDividers: boolean;
+    /** Rows from `items` without an `href` become buttons that emit `st-item-click`. */
+    clickableItems: boolean;
+    loading: boolean;
+    emptyText: string;
+    static styles: import("lit").CSSResult[];
+    connectedCallback(): void;
+    updated(): void;
+    private _onItemClick;
+    private _renderItems;
+    render(): import("lit-html").TemplateResult<1>;
+    private _hasSlotted;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "st-list": StList;
+    }
+}
+//# sourceMappingURL=list.d.ts.map

package/dist/components/list/list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../src/components/list/list.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA+B,MAAM,KAAK,CAAC;AAI7D,OAAO,gBAAgB,CAAC;AACxB,OAAO,yBAAyB,CAAC;AAEjC,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gDAAgD;IAChD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAID;;;;;;GAMG;AACH,qBACa,MAAO,SAAQ,UAAU;IACX,KAAK,EAAE,YAAY,EAAE,CAAM;IACpD,oCAAoC;IACV,KAAK,SAAM;IACK,KAAK,UAAS;IACxD,kDAAkD;IACR,QAAQ,UAAS;IACS,UAAU,UAAS;IACvF,oFAAoF;IAC3B,cAAc,UAAS;IACtC,OAAO,UAAS;IACP,SAAS,SAAsB;IAElF,MAAM,CAAC,MAAM,4BAkCX;IAEF,iBAAiB,SAGhB;IAED,OAAO,SAIN;IAED,OAAO,CAAC,YAAY;IAYpB,OAAO,CAAC,YAAY;IA+BpB,MAAM,yCASL;IAED,OAAO,CAAC,WAAW;CAIpB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}