kanto-ds 1.0.0

package/dist/components/data/kt-chart/kt-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kt-chart.js","sources":["../../../../src/components/data/kt-chart/kt-chart.ts"],"sourcesContent":["import { css, html, nothing, svg, type SVGTemplateResult, type TemplateResult } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit, uniqueId } from '#internal/events';\n\nexport type KtChartType = 'area' | 'line' | 'bar';\n\nexport interface KtSeries {\n  readonly name: string;\n  readonly values: readonly number[];\n  /** Overrides the slot this series would take from the categorical order. */\n  readonly color?: string;\n}\n\ninterface Box {\n  readonly width: number;\n  readonly height: number;\n}\n\n/** Room for the axis labels; the plot gets the rest. */\nconst PADDING = { top: 12, right: 4, bottom: 22, left: 4 };\nconst MAX_SLOTS = 8;\n\n/**\n * A small chart, drawn from the token layer.\n *\n * Deliberately narrow: one axis, one to eight series, three marks. It is the\n * shape a product dashboard actually needs, not a charting library — anything\n * past this and you want a real one.\n *\n * **Colour.** One series takes the brand hue: with nothing to tell apart there\n * is no identity to encode, and the title names it. Two or more take the fixed\n * categorical order in `--chart-series-1…8`, assigned by position and never\n * cycled, so a series keeps its colour when a filter removes its neighbours.\n * Those hues are kept clear of the semantic palette, so a line can never be\n * mistaken for a status.\n *\n * **The table is not optional.** Every chart also renders its data as a table,\n * visually hidden by default. It is what a screen reader reads, and it is the\n * relief that four of the light-theme series hues require, sitting as they do\n * below 3:1 on a light surface.\n *\n * @element kt-chart\n *\n * @csspart svg - The plot.\n * @csspart legend - The legend, when there are two or more series.\n * @csspart table - The data table.\n *\n * @fires kt-point-hover - The hovered index changed. `detail: { index }`,\n *   with `index` of -1 when the pointer leaves.\n *\n * @example\n * ```js\n * chart.labels = ['Jan', 'Feb', 'Mar'];\n * chart.series = [{ name: 'Revenue', values: [42, 58, 36] }];\n * ```\n */\nexport class KtChart extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: block;\n        position: relative;\n      }\n\n      .plot {\n        position: relative;\n        width: 100%;\n      }\n\n      svg {\n        display: block;\n        width: 100%;\n        overflow: visible;\n      }\n\n      /* Recessive: the data is the loud part. */\n      .grid {\n        stroke: var(--chart-grid);\n        stroke-width: 1;\n        opacity: 0.6;\n      }\n\n      .axis-label {\n        fill: var(--chart-axis);\n        font: var(--font-normal-small);\n        font-family: var(--font-family-body);\n      }\n\n      .line {\n        fill: none;\n        stroke-width: 2;\n        stroke-linecap: round;\n        stroke-linejoin: round;\n      }\n\n      .marker {\n        stroke: var(--surface-card);\n        stroke-width: 2;\n      }\n\n      .crosshair {\n        stroke: var(--chart-axis);\n        stroke-width: 1;\n        stroke-dasharray: 3 3;\n      }\n\n      .tooltip {\n        position: absolute;\n        z-index: var(--z-tooltip);\n        display: flex;\n        flex-direction: column;\n        gap: 4px;\n        min-width: 120px;\n        padding: 8px 10px;\n        color: var(--text-inverted);\n        font: var(--font-normal-small);\n        background: var(--surface-inverted);\n        border-radius: var(--border-radius);\n        box-shadow: var(--shadow-toast);\n        pointer-events: none;\n        transform: translate(-50%, calc(-100% - 12px));\n      }\n\n      .tooltip-row {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n        white-space: nowrap;\n      }\n\n      .swatch {\n        width: 8px;\n        height: 8px;\n        border-radius: 2px;\n      }\n\n      .tooltip-name {\n        flex: 1;\n        opacity: 0.75;\n      }\n\n      .tooltip-value {\n        font-variant-numeric: tabular-nums;\n      }\n\n      .legend {\n        display: flex;\n        flex-wrap: wrap;\n        gap: 14px;\n        margin-top: 10px;\n      }\n\n      .legend-item {\n        display: inline-flex;\n        align-items: center;\n        gap: 6px;\n        color: var(--text-muted);\n        font: var(--font-normal-small);\n      }\n\n      /* Present for assistive technology and for anyone who needs the\n         numbers; show-table puts it on screen. */\n      .table {\n        position: absolute;\n        width: 1px;\n        height: 1px;\n        overflow: hidden;\n        clip-path: inset(50%);\n        white-space: nowrap;\n      }\n\n      :host([show-table]) .table {\n        position: static;\n        width: auto;\n        height: auto;\n        margin-top: 16px;\n        overflow: visible;\n        clip-path: none;\n        white-space: normal;\n      }\n\n      :host([show-table]) table {\n        width: 100%;\n        border-collapse: collapse;\n        font: var(--font-normal-small);\n      }\n\n      :host([show-table]) th,\n      :host([show-table]) td {\n        padding: 6px 10px;\n        color: var(--text-muted);\n        text-align: right;\n        border-bottom: var(--border-width) solid var(--border-subtle);\n      }\n\n      :host([show-table]) th:first-child,\n      :host([show-table]) td:first-child {\n        color: var(--text-body);\n        text-align: left;\n      }\n    `,\n  ];\n\n  @query('.plot')\n  private plot!: HTMLElement;\n\n  private observer?: ResizeObserver;\n  private readonly tableId = uniqueId('kt-chart-table');\n\n  @state()\n  private box: Box = { width: 0, height: 0 };\n\n  @state()\n  private active = -1;\n\n  @property({ type: String, reflect: true })\n  type: KtChartType = 'area';\n\n  @property({ attribute: false })\n  series: readonly KtSeries[] = [];\n\n  /** One label per index along the x axis. */\n  @property({ attribute: false })\n  labels: readonly string[] = [];\n\n  @property({ type: Number })\n  height = 200;\n\n  /** Formats a value for the tooltip and the table. */\n  @property({ attribute: false })\n  format: (value: number) => string = (value) => String(value);\n\n  /** Horizontal grid lines. */\n  @property({ type: Boolean, attribute: 'no-grid' })\n  noGrid = false;\n\n  /** Puts the data table on screen instead of only in the accessibility tree. */\n  @property({ type: Boolean, reflect: true, attribute: 'show-table' })\n  showTable = false;\n\n  /**\n   * Smooths the line through a monotone spline.\n   *\n   * Off by default on purpose: a curve between two samples draws values that\n   * were never measured. Turn it on when the underlying quantity really is\n   * continuous and the reader knows it.\n   */\n  @property({ type: Boolean })\n  smooth = false;\n\n  /** Accessible name. Say what the chart shows. */\n  @property({ type: String })\n  label = '';\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    // Real pixel geometry rather than a scaled viewBox: a stretched viewBox\n    // would scale the 2px strokes along with it.\n    this.observer = new ResizeObserver(([entry]) => {\n      if (!entry) return;\n      this.box = { width: entry.contentRect.width, height: this.height };\n    });\n  }\n\n  override firstUpdated(): void {\n    if (this.plot) this.observer?.observe(this.plot);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.observer?.disconnect();\n  }\n\n  private colorFor(index: number, series: KtSeries): string {\n    if (series.color) return series.color;\n    // One series has no identity to encode; the brand hue reads as \"the data\".\n    if (this.series.length === 1) return 'var(--color-primary-base)';\n    return `var(--chart-series-${(index % MAX_SLOTS) + 1})`;\n  }\n\n  private get pointCount(): number {\n    return Math.max(0, ...this.series.map((s) => s.values.length));\n  }\n\n  private get bounds(): { min: number; max: number } {\n    const all = this.series.flatMap((s) => [...s.values]);\n    if (all.length === 0) return { min: 0, max: 1 };\n\n    const max = Math.max(...all, 0);\n    const min = Math.min(...all, 0);\n    return { min, max: max === min ? min + 1 : max };\n  }\n\n  private get plotArea() {\n    return {\n      x: PADDING.left,\n      y: PADDING.top,\n      width: Math.max(0, this.box.width - PADDING.left - PADDING.right),\n      height: Math.max(0, this.height - PADDING.top - PADDING.bottom),\n    };\n  }\n\n  private xFor(index: number): number {\n    const area = this.plotArea;\n    const count = this.pointCount;\n    if (count <= 1) return area.x + area.width / 2;\n    return area.x + (index / (count - 1)) * area.width;\n  }\n\n  private yFor(value: number): number {\n    const area = this.plotArea;\n    const { min, max } = this.bounds;\n    return area.y + area.height - ((value - min) / (max - min)) * area.height;\n  }\n\n  /**\n   * A monotone cubic path — it never overshoots the samples, which a plain\n   * cardinal spline happily does, inventing peaks that are not in the data.\n   */\n  private pathFor(values: readonly number[]): string {\n    const points = values.map((value, index) => [this.xFor(index), this.yFor(value)] as const);\n    if (points.length === 0) return '';\n    if (points.length === 1 || !this.smooth) {\n      return points.map(([x, y], i) => `${i === 0 ? 'M' : 'L'}${x},${y}`).join(' ');\n    }\n\n    let path = `M${points[0]![0]},${points[0]![1]}`;\n    for (let i = 0; i < points.length - 1; i += 1) {\n      const [x0, y0] = points[i]!;\n      const [x1, y1] = points[i + 1]!;\n      const dx = (x1 - x0) / 3;\n      path += ` C${x0 + dx},${y0} ${x1 - dx},${y1} ${x1},${y1}`;\n    }\n    return path;\n  }\n\n  private onPointerMove(event: PointerEvent): void {\n    const area = this.plotArea;\n    const count = this.pointCount;\n    if (count === 0 || area.width === 0) return;\n\n    const x = event.offsetX - area.x;\n    const index = Math.round((x / area.width) * (count - 1));\n    const clamped = Math.min(Math.max(index, 0), count - 1);\n\n    if (clamped === this.active) return;\n    this.active = clamped;\n    emit(this, 'kt-point-hover', { index: clamped });\n  }\n\n  private onPointerLeave(): void {\n    if (this.active === -1) return;\n    this.active = -1;\n    emit(this, 'kt-point-hover', { index: -1 });\n  }\n\n  private renderGrid(): SVGTemplateResult | typeof nothing {\n    if (this.noGrid) return nothing;\n    const area = this.plotArea;\n\n    return svg`${[0, 0.25, 0.5, 0.75, 1].map((step) => {\n      const y = area.y + area.height * step;\n      return svg`<line class=\"grid\" x1=${area.x} y1=${y} x2=${area.x + area.width} y2=${y} />`;\n    })}`;\n  }\n\n  private renderBars(): SVGTemplateResult {\n    const area = this.plotArea;\n    const count = this.pointCount;\n    const groups = this.series.length;\n    // A 2px gap of surface between neighbours, so two bars never fuse.\n    const slot = count > 0 ? area.width / count : 0;\n    const barWidth = Math.max(2, slot / groups - 2);\n    const baseline = this.yFor(Math.max(0, this.bounds.min));\n\n    return svg`${this.series.map((series, s) =>\n      series.values.map((value, i) => {\n        const y = this.yFor(value);\n        const x = area.x + i * slot + (slot - barWidth * groups) / 2 + s * barWidth;\n        const height = Math.max(1, baseline - y);\n        return svg`<rect\n          x=${x} y=${y} width=${barWidth} height=${height}\n          rx=\"4\" ry=\"4\"\n          fill=${this.colorFor(s, series)}\n          opacity=${this.active === -1 || this.active === i ? 1 : 0.45}\n        />`;\n      }),\n    )}`;\n  }\n\n  private renderLines(): SVGTemplateResult {\n    const area = this.plotArea;\n\n    return svg`${this.series.map((series, index) => {\n      const color = this.colorFor(index, series);\n      const path = this.pathFor(series.values);\n      const gradient = `${this.tableId}-fill-${index}`;\n\n      return svg`\n        ${\n          this.type === 'area'\n            ? svg`\n              <defs>\n                <linearGradient id=${gradient} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                  <stop offset=\"0%\" stop-color=${color} stop-opacity=\"0.28\" />\n                  <stop offset=\"100%\" stop-color=${color} stop-opacity=\"0.02\" />\n                </linearGradient>\n              </defs>\n              <path\n                d=${`${path} L${this.xFor(series.values.length - 1)},${area.y + area.height} L${this.xFor(0)},${area.y + area.height} Z`}\n                fill=${`url(#${gradient})`}\n              />`\n            : nothing\n        }\n        <path class=\"line\" d=${path} stroke=${color} />\n        ${\n          this.active >= 0 && series.values[this.active] !== undefined\n            ? svg`<circle\n                class=\"marker\"\n                cx=${this.xFor(this.active)}\n                cy=${this.yFor(series.values[this.active]!)}\n                r=\"5\"\n                fill=${color}\n              />`\n            : nothing\n        }`;\n    })}`;\n  }\n\n  private renderAxis(): SVGTemplateResult {\n    const area = this.plotArea;\n    const count = this.pointCount;\n    // Thin the labels rather than letting them collide.\n    const every = Math.max(1, Math.ceil(count / Math.max(1, Math.floor(area.width / 56))));\n\n    return svg`${this.labels.map((text, index) =>\n      index % every === 0\n        ? svg`<text\n            class=\"axis-label\"\n            x=${this.xFor(index)}\n            y=${area.y + area.height + 16}\n            text-anchor=\"middle\"\n          >${text}</text>`\n        : nothing,\n    )}`;\n  }\n\n  private renderTooltip(): TemplateResult | typeof nothing {\n    if (this.active < 0 || this.box.width === 0) return nothing;\n\n    return html`<div\n      class=\"tooltip\"\n      style=${`left:${this.xFor(this.active)}px;top:${this.plotArea.y + this.plotArea.height}px`}\n      role=\"status\"\n    >\n      <strong>${this.labels[this.active] ?? `#${this.active + 1}`}</strong>\n      ${this.series.map(\n        (series, index) =>\n          html`<span class=\"tooltip-row\">\n            <span class=\"swatch\" style=${`background:${this.colorFor(index, series)}`}></span>\n            <span class=\"tooltip-name\">${series.name}</span>\n            <span class=\"tooltip-value\">${this.format(series.values[this.active] ?? 0)}</span>\n          </span>`,\n      )}\n    </div>`;\n  }\n\n  override render(): TemplateResult {\n    const area = this.plotArea;\n    const ready = this.box.width > 0 && this.pointCount > 0;\n\n    return html`<div class=\"plot\" style=${`height:${this.height}px`}>\n        <svg\n          part=\"svg\"\n          width=${this.box.width}\n          height=${this.height}\n          role=\"img\"\n          aria-label=${this.label || nothing}\n          aria-describedby=${this.tableId}\n          @pointermove=${this.onPointerMove}\n          @pointerleave=${this.onPointerLeave}\n        >\n          ${ready ? this.renderGrid() : nothing}\n          ${ready && this.type === 'bar' ? this.renderBars() : nothing}\n          ${ready && this.type !== 'bar' ? this.renderLines() : nothing}\n          ${\n            ready && this.active >= 0 && this.type !== 'bar'\n              ? svg`<line\n              class=\"crosshair\"\n              x1=${this.xFor(this.active)} y1=${area.y}\n              x2=${this.xFor(this.active)} y2=${area.y + area.height}\n            />`\n              : nothing\n          }\n          ${ready ? this.renderAxis() : nothing}\n        </svg>\n        ${this.renderTooltip()}\n      </div>\n\n      ${\n        this.series.length > 1\n          ? html`<div part=\"legend\" class=\"legend\">\n              ${this.series.map(\n                (series, index) =>\n                  html`<span class=\"legend-item\">\n                    <span\n                      class=\"swatch\"\n                      style=${`background:${this.colorFor(index, series)}`}\n                    ></span>\n                    ${series.name}\n                  </span>`,\n              )}\n            </div>`\n          : nothing\n      }\n\n      <div part=\"table\" class=\"table\" id=${this.tableId}>\n        <table>\n          <caption>\n            ${this.label || 'Chart data'}\n          </caption>\n          <thead>\n            <tr>\n              <th scope=\"col\">Point</th>\n              ${this.series.map((series) => html`<th scope=\"col\">${series.name}</th>`)}\n            </tr>\n          </thead>\n          <tbody>\n            ${Array.from(\n              { length: this.pointCount },\n              (_, index) =>\n                html`<tr>\n                  <th scope=\"row\">${this.labels[index] ?? `#${index + 1}`}</th>\n                  ${this.series.map(\n                    (series) => html`<td>${this.format(series.values[index] ?? 0)}</td>`,\n                  )}\n                </tr>`,\n            )}\n          </tbody>\n        </table>\n      </div>`;\n  }\n}\n\ndefineElement('kt-chart', KtChart);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-chart': KtChart;\n  }\n}\n"],"names":["PADDING","MAX_SLOTS","KtChart","KtElement","uniqueId","value","css","entry","index","series","s","all","max","min","area","count","values","points","x","y","i","path","x0","y0","x1","y1","dx","event","clamped","emit","nothing","svg","step","groups","slot","barWidth","baseline","height","color","gradient","every","text","html","ready","_","__decorateClass","query","state","property","defineElement"],"mappings":";;;;;;;;;AAoBA,MAAMA,IAAU,EAAE,KAAK,IAAI,OAAO,GAAG,QAAQ,IAAI,MAAM,EAAA,GACjDC,IAAY;AAoCX,MAAMC,UAAgBC,EAAU;AAAA,EAAhC,cAAA;AAAA,UAAA,GAAA,SAAA,GAwJL,KAAiB,UAAUC,EAAS,gBAAgB,GAGpD,KAAQ,MAAW,EAAE,OAAO,GAAG,QAAQ,EAAA,GAGvC,KAAQ,SAAS,IAGjB,KAAA,OAAoB,QAGpB,KAAA,SAA8B,CAAA,GAI9B,KAAA,SAA4B,CAAA,GAG5B,KAAA,SAAS,KAIT,KAAA,SAAoC,CAACC,MAAU,OAAOA,CAAK,GAI3D,KAAA,SAAS,IAIT,KAAA,YAAY,IAUZ,KAAA,SAAS,IAIT,KAAA,QAAQ;AAAA,EAAA;AAAA,EApMR,OAAA;AAAA,SAAgB,SAAS;AAAA,MACvBF,EAAU;AAAA,MACVG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,EA+IF;AAAA,EAqDS,oBAA0B;AACjC,UAAM,kBAAA,GAGN,KAAK,WAAW,IAAI,eAAe,CAAC,CAACC,CAAK,MAAM;AAC9C,MAAKA,MACL,KAAK,MAAM,EAAE,OAAOA,EAAM,YAAY,OAAO,QAAQ,KAAK,OAAA;AAAA,IAC5D,CAAC;AAAA,EACH;AAAA,EAES,eAAqB;AAC5B,IAAI,KAAK,QAAM,KAAK,UAAU,QAAQ,KAAK,IAAI;AAAA,EACjD;AAAA,EAES,uBAA6B;AACpC,UAAM,qBAAA,GACN,KAAK,UAAU,WAAA;AAAA,EACjB;AAAA,EAEQ,SAASC,GAAeC,GAA0B;AACxD,WAAIA,EAAO,QAAcA,EAAO,QAE5B,KAAK,OAAO,WAAW,IAAU,8BAC9B,sBAAuBD,IAAQP,IAAa,CAAC;AAAA,EACtD;AAAA,EAEA,IAAY,aAAqB;AAC/B,WAAO,KAAK,IAAI,GAAG,GAAG,KAAK,OAAO,IAAI,CAACS,MAAMA,EAAE,OAAO,MAAM,CAAC;AAAA,EAC/D;AAAA,EAEA,IAAY,SAAuC;AACjD,UAAMC,IAAM,KAAK,OAAO,QAAQ,CAACD,MAAM,CAAC,GAAGA,EAAE,MAAM,CAAC;AACpD,QAAIC,EAAI,WAAW,EAAG,QAAO,EAAE,KAAK,GAAG,KAAK,EAAA;AAE5C,UAAMC,IAAM,KAAK,IAAI,GAAGD,GAAK,CAAC,GACxBE,IAAM,KAAK,IAAI,GAAGF,GAAK,CAAC;AAC9B,WAAO,EAAE,KAAAE,GAAK,KAAKD,MAAQC,IAAMA,IAAM,IAAID,EAAA;AAAA,EAC7C;AAAA,EAEA,IAAY,WAAW;AACrB,WAAO;AAAA,MACL,GAAGZ,EAAQ;AAAA,MACX,GAAGA,EAAQ;AAAA,MACX,OAAO,KAAK,IAAI,GAAG,KAAK,IAAI,QAAQA,EAAQ,OAAOA,EAAQ,KAAK;AAAA,MAChE,QAAQ,KAAK,IAAI,GAAG,KAAK,SAASA,EAAQ,MAAMA,EAAQ,MAAM;AAAA,IAAA;AAAA,EAElE;AAAA,EAEQ,KAAKQ,GAAuB;AAClC,UAAMM,IAAO,KAAK,UACZC,IAAQ,KAAK;AACnB,WAAIA,KAAS,IAAUD,EAAK,IAAIA,EAAK,QAAQ,IACtCA,EAAK,IAAKN,KAASO,IAAQ,KAAMD,EAAK;AAAA,EAC/C;AAAA,EAEQ,KAAKT,GAAuB;AAClC,UAAMS,IAAO,KAAK,UACZ,EAAE,KAAAD,GAAK,KAAAD,EAAA,IAAQ,KAAK;AAC1B,WAAOE,EAAK,IAAIA,EAAK,UAAWT,IAAQQ,MAAQD,IAAMC,KAAQC,EAAK;AAAA,EACrE;AAAA;AAAA;AAAA;AAAA;AAAA,EAMQ,QAAQE,GAAmC;AACjD,UAAMC,IAASD,EAAO,IAAI,CAACX,GAAOG,MAAU,CAAC,KAAK,KAAKA,CAAK,GAAG,KAAK,KAAKH,CAAK,CAAC,CAAU;AACzF,QAAIY,EAAO,WAAW,EAAG,QAAO;AAChC,QAAIA,EAAO,WAAW,KAAK,CAAC,KAAK;AAC/B,aAAOA,EAAO,IAAI,CAAC,CAACC,GAAGC,CAAC,GAAGC,MAAM,GAAGA,MAAM,IAAI,MAAM,GAAG,GAAGF,CAAC,IAAIC,CAAC,EAAE,EAAE,KAAK,GAAG;AAG9E,QAAIE,IAAO,IAAIJ,EAAO,CAAC,EAAG,CAAC,CAAC,IAAIA,EAAO,CAAC,EAAG,CAAC,CAAC;AAC7C,aAAS,IAAI,GAAG,IAAIA,EAAO,SAAS,GAAG,KAAK,GAAG;AAC7C,YAAM,CAACK,GAAIC,CAAE,IAAIN,EAAO,CAAC,GACnB,CAACO,GAAIC,CAAE,IAAIR,EAAO,IAAI,CAAC,GACvBS,KAAMF,IAAKF,KAAM;AACvB,MAAAD,KAAQ,KAAKC,IAAKI,CAAE,IAAIH,CAAE,IAAIC,IAAKE,CAAE,IAAID,CAAE,IAAID,CAAE,IAAIC,CAAE;AAAA,IACzD;AACA,WAAOJ;AAAA,EACT;AAAA,EAEQ,cAAcM,GAA2B;AAC/C,UAAMb,IAAO,KAAK,UACZC,IAAQ,KAAK;AACnB,QAAIA,MAAU,KAAKD,EAAK,UAAU,EAAG;AAErC,UAAMI,IAAIS,EAAM,UAAUb,EAAK,GACzBN,IAAQ,KAAK,MAAOU,IAAIJ,EAAK,SAAUC,IAAQ,EAAE,GACjDa,IAAU,KAAK,IAAI,KAAK,IAAIpB,GAAO,CAAC,GAAGO,IAAQ,CAAC;AAEtD,IAAIa,MAAY,KAAK,WACrB,KAAK,SAASA,GACdC,EAAK,MAAM,kBAAkB,EAAE,OAAOD,GAAS;AAAA,EACjD;AAAA,EAEQ,iBAAuB;AAC7B,IAAI,KAAK,WAAW,OACpB,KAAK,SAAS,IACdC,EAAK,MAAM,kBAAkB,EAAE,OAAO,IAAI;AAAA,EAC5C;AAAA,EAEQ,aAAiD;AACvD,QAAI,KAAK,OAAQ,QAAOC;AACxB,UAAMhB,IAAO,KAAK;AAElB,WAAOiB,IAAM,CAAC,GAAG,MAAM,KAAK,MAAM,CAAC,EAAE,IAAI,CAACC,MAAS;AACjD,YAAMb,IAAIL,EAAK,IAAIA,EAAK,SAASkB;AACjC,aAAOD,0BAA4BjB,EAAK,CAAC,OAAOK,CAAC,OAAOL,EAAK,IAAIA,EAAK,KAAK,OAAOK,CAAC;AAAA,IACrF,CAAC,CAAC;AAAA,EACJ;AAAA,EAEQ,aAAgC;AACtC,UAAML,IAAO,KAAK,UACZC,IAAQ,KAAK,YACbkB,IAAS,KAAK,OAAO,QAErBC,IAAOnB,IAAQ,IAAID,EAAK,QAAQC,IAAQ,GACxCoB,IAAW,KAAK,IAAI,GAAGD,IAAOD,IAAS,CAAC,GACxCG,IAAW,KAAK,KAAK,KAAK,IAAI,GAAG,KAAK,OAAO,GAAG,CAAC;AAEvD,WAAOL,IAAM,KAAK,OAAO;AAAA,MAAI,CAACtB,GAAQC,MACpCD,EAAO,OAAO,IAAI,CAACJ,GAAOe,MAAM;AAC9B,cAAMD,IAAI,KAAK,KAAKd,CAAK,GACnBa,IAAIJ,EAAK,IAAIM,IAAIc,KAAQA,IAAOC,IAAWF,KAAU,IAAIvB,IAAIyB,GAC7DE,IAAS,KAAK,IAAI,GAAGD,IAAWjB,CAAC;AACvC,eAAOY;AAAA,cACDb,CAAC,MAAMC,CAAC,UAAUgB,CAAQ,WAAWE,CAAM;AAAA;AAAA,iBAExC,KAAK,SAAS3B,GAAGD,CAAM,CAAC;AAAA,oBACrB,KAAK,WAAW,MAAM,KAAK,WAAWW,IAAI,IAAI,IAAI;AAAA;AAAA,MAEhE,CAAC;AAAA,IAAA,CACF;AAAA,EACH;AAAA,EAEQ,cAAiC;AACvC,UAAMN,IAAO,KAAK;AAElB,WAAOiB,IAAM,KAAK,OAAO,IAAI,CAACtB,GAAQD,MAAU;AAC9C,YAAM8B,IAAQ,KAAK,SAAS9B,GAAOC,CAAM,GACnCY,IAAO,KAAK,QAAQZ,EAAO,MAAM,GACjC8B,IAAW,GAAG,KAAK,OAAO,SAAS/B,CAAK;AAE9C,aAAOuB;AAAA,UAEH,KAAK,SAAS,SACVA;AAAA;AAAA,qCAEuBQ,CAAQ;AAAA,iDACID,CAAK;AAAA,mDACHA,CAAK;AAAA;AAAA;AAAA;AAAA,oBAIpC,GAAGjB,CAAI,KAAK,KAAK,KAAKZ,EAAO,OAAO,SAAS,CAAC,CAAC,IAAIK,EAAK,IAAIA,EAAK,MAAM,KAAK,KAAK,KAAK,CAAC,CAAC,IAAIA,EAAK,IAAIA,EAAK,MAAM,IAAI;AAAA,uBACjH,QAAQyB,CAAQ,GAAG;AAAA,oBAE5BT,CACN;AAAA,+BACuBT,CAAI,WAAWiB,CAAK;AAAA,UAEzC,KAAK,UAAU,KAAK7B,EAAO,OAAO,KAAK,MAAM,MAAM,SAC/CsB;AAAA;AAAA,qBAEO,KAAK,KAAK,KAAK,MAAM,CAAC;AAAA,qBACtB,KAAK,KAAKtB,EAAO,OAAO,KAAK,MAAM,CAAE,CAAC;AAAA;AAAA,uBAEpC6B,CAAK;AAAA,oBAEdR,CACN;AAAA,IACJ,CAAC,CAAC;AAAA,EACJ;AAAA,EAEQ,aAAgC;AACtC,UAAMhB,IAAO,KAAK,UACZC,IAAQ,KAAK,YAEbyB,IAAQ,KAAK,IAAI,GAAG,KAAK,KAAKzB,IAAQ,KAAK,IAAI,GAAG,KAAK,MAAMD,EAAK,QAAQ,EAAE,CAAC,CAAC,CAAC;AAErF,WAAOiB,IAAM,KAAK,OAAO;AAAA,MAAI,CAACU,GAAMjC,MAClCA,IAAQgC,MAAU,IACdT;AAAA;AAAA,gBAEM,KAAK,KAAKvB,CAAK,CAAC;AAAA,gBAChBM,EAAK,IAAIA,EAAK,SAAS,EAAE;AAAA;AAAA,aAE5B2B,CAAI,YACPX;AAAA,IAAA,CACL;AAAA,EACH;AAAA,EAEQ,gBAAiD;AACvD,WAAI,KAAK,SAAS,KAAK,KAAK,IAAI,UAAU,IAAUA,IAE7CY;AAAA;AAAA,cAEG,QAAQ,KAAK,KAAK,KAAK,MAAM,CAAC,UAAU,KAAK,SAAS,IAAI,KAAK,SAAS,MAAM,IAAI;AAAA;AAAA;AAAA,gBAGhF,KAAK,OAAO,KAAK,MAAM,KAAK,IAAI,KAAK,SAAS,CAAC,EAAE;AAAA,QACzD,KAAK,OAAO;AAAA,MACZ,CAACjC,GAAQD,MACPkC;AAAA,yCAC+B,cAAc,KAAK,SAASlC,GAAOC,CAAM,CAAC,EAAE;AAAA,yCAC5CA,EAAO,IAAI;AAAA,0CACV,KAAK,OAAOA,EAAO,OAAO,KAAK,MAAM,KAAK,CAAC,CAAC;AAAA;AAAA,IAAA,CAE/E;AAAA;AAAA,EAEL;AAAA,EAES,SAAyB;AAChC,UAAMK,IAAO,KAAK,UACZ6B,IAAQ,KAAK,IAAI,QAAQ,KAAK,KAAK,aAAa;AAEtD,WAAOD,4BAA+B,UAAU,KAAK,MAAM,IAAI;AAAA;AAAA;AAAA,kBAGjD,KAAK,IAAI,KAAK;AAAA,mBACb,KAAK,MAAM;AAAA;AAAA,uBAEP,KAAK,SAASZ,CAAO;AAAA,6BACf,KAAK,OAAO;AAAA,yBAChB,KAAK,aAAa;AAAA,0BACjB,KAAK,cAAc;AAAA;AAAA,YAEjCa,IAAQ,KAAK,WAAA,IAAeb,CAAO;AAAA,YACnCa,KAAS,KAAK,SAAS,QAAQ,KAAK,WAAA,IAAeb,CAAO;AAAA,YAC1Da,KAAS,KAAK,SAAS,QAAQ,KAAK,YAAA,IAAgBb,CAAO;AAAA,YAE3Da,KAAS,KAAK,UAAU,KAAK,KAAK,SAAS,QACvCZ;AAAA;AAAA,mBAEG,KAAK,KAAK,KAAK,MAAM,CAAC,OAAOjB,EAAK,CAAC;AAAA,mBACnC,KAAK,KAAK,KAAK,MAAM,CAAC,OAAOA,EAAK,IAAIA,EAAK,MAAM;AAAA,kBAEpDgB,CACN;AAAA,YACEa,IAAQ,KAAK,WAAA,IAAeb,CAAO;AAAA;AAAA,UAErC,KAAK,eAAe;AAAA;AAAA;AAAA,QAItB,KAAK,OAAO,SAAS,IACjBY;AAAA,gBACI,KAAK,OAAO;AAAA,MACZ,CAACjC,GAAQD,MACPkC;AAAA;AAAA;AAAA,8BAGY,cAAc,KAAK,SAASlC,GAAOC,CAAM,CAAC,EAAE;AAAA;AAAA,sBAEpDA,EAAO,IAAI;AAAA;AAAA,IAAA,CAElB;AAAA,sBAEHqB,CACN;AAAA;AAAA,2CAEqC,KAAK,OAAO;AAAA;AAAA;AAAA,cAGzC,KAAK,SAAS,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKxB,KAAK,OAAO,IAAI,CAACrB,MAAWiC,oBAAuBjC,EAAO,IAAI,OAAO,CAAC;AAAA;AAAA;AAAA;AAAA,cAIxE,MAAM;AAAA,MACN,EAAE,QAAQ,KAAK,WAAA;AAAA,MACf,CAACmC,GAAGpC,MACFkC;AAAA,oCACoB,KAAK,OAAOlC,CAAK,KAAK,IAAIA,IAAQ,CAAC,EAAE;AAAA,oBACrD,KAAK,OAAO;AAAA,QACZ,CAACC,MAAWiC,QAAW,KAAK,OAAOjC,EAAO,OAAOD,CAAK,KAAK,CAAC,CAAC;AAAA,MAAA,CAC9D;AAAA;AAAA,IAAA,CAEN;AAAA;AAAA;AAAA;AAAA,EAIX;AACF;AAlVUqC,EAAA;AAAA,EADPC,EAAM,OAAO;AAAA,GApJH5C,EAqJH,WAAA,MAAA;AAMA2C,EAAA;AAAA,EADPE,EAAA;AAAM,GA1JI7C,EA2JH,WAAA,KAAA;AAGA2C,EAAA;AAAA,EADPE,EAAA;AAAM,GA7JI7C,EA8JH,WAAA,QAAA;AAGR2C,EAAA;AAAA,EADCG,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAhK9B9C,EAiKX,WAAA,MAAA;AAGA2C,EAAA;AAAA,EADCG,EAAS,EAAE,WAAW,GAAA,CAAO;AAAA,GAnKnB9C,EAoKX,WAAA,QAAA;AAIA2C,EAAA;AAAA,EADCG,EAAS,EAAE,WAAW,GAAA,CAAO;AAAA,GAvKnB9C,EAwKX,WAAA,QAAA;AAGA2C,EAAA;AAAA,EADCG,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA1Kf9C,EA2KX,WAAA,QAAA;AAIA2C,EAAA;AAAA,EADCG,EAAS,EAAE,WAAW,GAAA,CAAO;AAAA,GA9KnB9C,EA+KX,WAAA,QAAA;AAIA2C,EAAA;AAAA,EADCG,EAAS,EAAE,MAAM,SAAS,WAAW,WAAW;AAAA,GAlLtC9C,EAmLX,WAAA,QAAA;AAIA2C,EAAA;AAAA,EADCG,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM,WAAW,cAAc;AAAA,GAtLxD9C,EAuLX,WAAA,WAAA;AAUA2C,EAAA;AAAA,EADCG,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAhMhB9C,EAiMX,WAAA,QAAA;AAIA2C,EAAA;AAAA,EADCG,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GApMf9C,EAqMX,WAAA,OAAA;AAoSF+C,EAAc,YAAY/C,CAAO;"}

package/dist/components/data/kt-meter/kt-meter.d.ts

@@ -0,0 +1,63 @@
+import { type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+export interface KtMeterSegment {
+    readonly label: string;
+    readonly value: number;
+    /** Any CSS colour. Defaults to the chart palette slot for its position. */
+    readonly color?: string;
+}
+/**
+ * How a fixed total is spent: storage by file type, a budget by category, seats
+ * by role.
+ *
+ * Against `<kt-progress-bar>`: a progress bar answers "how far along", so it
+ * fills toward completion and turns green when it gets there. A meter answers
+ * "how is it divided", so it is full from the start and reaching the end is
+ * bad news, not good. Different question, different component — and the bar
+ * that shows one and means the other is a common way to mislead a reader.
+ *
+ * @element kt-meter
+ *
+ * @csspart base - The container.
+ * @csspart track - The bar.
+ * @csspart legend - The legend list.
+ *
+ * @example
+ * ```html
+ * <kt-meter label="Storage" used="25.8 GB used" total="of 983 GB" value="3"></kt-meter>
+ * ```
+ * ```js
+ * meter.segments = [
+ *   { label: 'Documents', value: 16.1 },
+ *   { label: 'Photos', value: 3.9 },
+ * ];
+ * meter.max = 983;
+ * ```
+ */
+export declare class KtMeter extends KtElement {
+    static styles: import("lit").CSSResultGroup[];
+    label: string;
+    /** Free text on the left of the caption row — "25.8 GB used". */
+    used: string;
+    /** Free text on the right of the caption row — "of 983 GB". */
+    total: string;
+    /** A single filled proportion, as a percentage. Ignored when `segments` is set. */
+    value: number;
+    /** The composition. Positions map to `--chart-series-N` unless given a colour. */
+    segments: readonly KtMeterSegment[];
+    /** The total the segments are measured against. Defaults to their sum. */
+    max: number;
+    /** Renders the segment list under the bar. */
+    showLegend: boolean;
+    /** Formats a segment value in the legend. */
+    format: (value: number) => string;
+    private get scale();
+    private colorAt;
+    private renderTrack;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-meter': KtMeter;
+    }
+}

package/dist/components/data/kt-meter/kt-meter.js

@@ -0,0 +1,177 @@
+import { css as m, html as r, nothing as o } from "lit";
+import { property as i } from "lit/decorators.js";
+import { K as u, d as c } from "../../../chunks/kt-element-CcMLO5e8.js";
+var g = Object.defineProperty, n = (d, t, e, s) => {
+  for (var a = void 0, p = d.length - 1, h; p >= 0; p--)
+    (h = d[p]) && (a = h(t, e, a) || a);
+  return a && g(t, e, a), a;
+};
+class l extends u {
+  constructor() {
+    super(...arguments), this.label = "", this.used = "", this.total = "", this.value = 0, this.segments = [], this.max = 0, this.showLegend = !1, this.format = (t) => String(t);
+  }
+  static {
+    this.styles = [
+      u.styles,
+      m`
+      :host {
+        display: block;
+      }
+
+      .meter {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+      }
+
+      .top {
+        display: flex;
+        align-items: baseline;
+        justify-content: space-between;
+        gap: 12px;
+      }
+
+      .label {
+        color: var(--text-body);
+        font: var(--font-medium-regular);
+      }
+
+      .caption {
+        color: var(--text-muted);
+        font: var(--font-normal-small);
+        font-variant-numeric: tabular-nums;
+      }
+
+      .track {
+        display: flex;
+        gap: 2px;
+        width: 100%;
+        height: var(--kt-meter-height, 8px);
+        overflow: hidden;
+        background: var(--surface-raised);
+        border-radius: var(--radius-full);
+      }
+
+      /* A 2px surface gap between fills, so two adjacent segments of similar
+         hue still read as two. */
+      .segment {
+        min-width: 2px;
+        height: 100%;
+        border-radius: var(--radius-full);
+      }
+
+      .legend {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 6px 18px;
+        margin: 4px 0 0;
+        padding: 0;
+        list-style: none;
+      }
+
+      .legend li {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        color: var(--text-muted);
+        font: var(--font-normal-small);
+      }
+
+      .dot {
+        flex: none;
+        width: 8px;
+        height: 8px;
+        border-radius: var(--radius-full);
+      }
+
+      .legend .value {
+        color: var(--text-body);
+        font-variant-numeric: tabular-nums;
+      }
+    `
+    ];
+  }
+  get scale() {
+    if (this.max > 0) return this.max;
+    const t = this.segments.reduce((e, s) => e + Math.max(s.value, 0), 0);
+    return t > 0 ? t : 100;
+  }
+  colorAt(t, e) {
+    return e.color ?? `var(--chart-series-${Math.min(t + 1, 8)})`;
+  }
+  renderTrack() {
+    if (this.segments.length === 0) {
+      const e = Math.min(Math.max(this.value, 0), 100);
+      return r`<div part="track" class="track">
+        <div class="segment" style="width:${e}%;background:var(--color-primary-base)"></div>
+      </div>`;
+    }
+    const t = this.scale;
+    return r`<div part="track" class="track">
+      ${this.segments.map((e, s) => {
+      const a = Math.max(e.value, 0) / t * 100;
+      return r`<div
+          class="segment"
+          style="width:${a}%;background:${this.colorAt(s, e)}"
+        ></div>`;
+    })}
+    </div>`;
+  }
+  render() {
+    const t = this.scale, e = this.segments.length > 0 ? this.segments.reduce((s, a) => s + Math.max(a.value, 0), 0) : Math.min(Math.max(this.value, 0), 100) / 100 * t;
+    return r`<div
+      part="base"
+      class="meter"
+      role="meter"
+      aria-label=${this.label || o}
+      aria-valuemin="0"
+      aria-valuemax=${t}
+      aria-valuenow=${Math.round(e * 100) / 100}
+      aria-valuetext=${this.used && this.total ? `${this.used} ${this.total}` : o}
+    >
+      ${this.label || this.used || this.total ? r`<div class="top">
+              ${this.label ? r`<span class="label">${this.label}</span>` : o}
+              ${this.used || this.total ? r`<span class="caption">${this.used} ${this.total}</span>` : o}
+            </div>` : o}
+      ${this.renderTrack()}
+      ${this.showLegend && this.segments.length > 0 ? r`<ul part="legend" class="legend">
+              ${this.segments.map(
+      (s, a) => r`<li>
+                    <span class="dot" style="background:${this.colorAt(a, s)}"></span>
+                    <span>${s.label}</span>
+                    <span class="value">${this.format(s.value)}</span>
+                  </li>`
+    )}
+            </ul>` : o}
+    </div>`;
+  }
+}
+n([
+  i({ type: String })
+], l.prototype, "label");
+n([
+  i({ type: String })
+], l.prototype, "used");
+n([
+  i({ type: String })
+], l.prototype, "total");
+n([
+  i({ type: Number })
+], l.prototype, "value");
+n([
+  i({ attribute: !1 })
+], l.prototype, "segments");
+n([
+  i({ type: Number })
+], l.prototype, "max");
+n([
+  i({ type: Boolean, attribute: "show-legend" })
+], l.prototype, "showLegend");
+n([
+  i({ attribute: !1 })
+], l.prototype, "format");
+c("kt-meter", l);
+export {
+  l as KtMeter
+};
+//# sourceMappingURL=kt-meter.js.map

package/dist/components/data/kt-meter/kt-meter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kt-meter.js","sources":["../../../../src/components/data/kt-meter/kt-meter.ts"],"sourcesContent":["import { css, html, nothing, type TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\n\nexport interface KtMeterSegment {\n  readonly label: string;\n  readonly value: number;\n  /** Any CSS colour. Defaults to the chart palette slot for its position. */\n  readonly color?: string;\n}\n\n/**\n * How a fixed total is spent: storage by file type, a budget by category, seats\n * by role.\n *\n * Against `<kt-progress-bar>`: a progress bar answers \"how far along\", so it\n * fills toward completion and turns green when it gets there. A meter answers\n * \"how is it divided\", so it is full from the start and reaching the end is\n * bad news, not good. Different question, different component — and the bar\n * that shows one and means the other is a common way to mislead a reader.\n *\n * @element kt-meter\n *\n * @csspart base - The container.\n * @csspart track - The bar.\n * @csspart legend - The legend list.\n *\n * @example\n * ```html\n * <kt-meter label=\"Storage\" used=\"25.8 GB used\" total=\"of 983 GB\" value=\"3\"></kt-meter>\n * ```\n * ```js\n * meter.segments = [\n *   { label: 'Documents', value: 16.1 },\n *   { label: 'Photos', value: 3.9 },\n * ];\n * meter.max = 983;\n * ```\n */\nexport class KtMeter extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: block;\n      }\n\n      .meter {\n        display: flex;\n        flex-direction: column;\n        gap: 8px;\n      }\n\n      .top {\n        display: flex;\n        align-items: baseline;\n        justify-content: space-between;\n        gap: 12px;\n      }\n\n      .label {\n        color: var(--text-body);\n        font: var(--font-medium-regular);\n      }\n\n      .caption {\n        color: var(--text-muted);\n        font: var(--font-normal-small);\n        font-variant-numeric: tabular-nums;\n      }\n\n      .track {\n        display: flex;\n        gap: 2px;\n        width: 100%;\n        height: var(--kt-meter-height, 8px);\n        overflow: hidden;\n        background: var(--surface-raised);\n        border-radius: var(--radius-full);\n      }\n\n      /* A 2px surface gap between fills, so two adjacent segments of similar\n         hue still read as two. */\n      .segment {\n        min-width: 2px;\n        height: 100%;\n        border-radius: var(--radius-full);\n      }\n\n      .legend {\n        display: flex;\n        flex-wrap: wrap;\n        gap: 6px 18px;\n        margin: 4px 0 0;\n        padding: 0;\n        list-style: none;\n      }\n\n      .legend li {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        color: var(--text-muted);\n        font: var(--font-normal-small);\n      }\n\n      .dot {\n        flex: none;\n        width: 8px;\n        height: 8px;\n        border-radius: var(--radius-full);\n      }\n\n      .legend .value {\n        color: var(--text-body);\n        font-variant-numeric: tabular-nums;\n      }\n    `,\n  ];\n\n  @property({ type: String })\n  label = '';\n\n  /** Free text on the left of the caption row — \"25.8 GB used\". */\n  @property({ type: String })\n  used = '';\n\n  /** Free text on the right of the caption row — \"of 983 GB\". */\n  @property({ type: String })\n  total = '';\n\n  /** A single filled proportion, as a percentage. Ignored when `segments` is set. */\n  @property({ type: Number })\n  value = 0;\n\n  /** The composition. Positions map to `--chart-series-N` unless given a colour. */\n  @property({ attribute: false })\n  segments: readonly KtMeterSegment[] = [];\n\n  /** The total the segments are measured against. Defaults to their sum. */\n  @property({ type: Number })\n  max = 0;\n\n  /** Renders the segment list under the bar. */\n  @property({ type: Boolean, attribute: 'show-legend' })\n  showLegend = false;\n\n  /** Formats a segment value in the legend. */\n  @property({ attribute: false })\n  format: (value: number) => string = (value) => String(value);\n\n  private get scale(): number {\n    if (this.max > 0) return this.max;\n    const sum = this.segments.reduce((total, segment) => total + Math.max(segment.value, 0), 0);\n    return sum > 0 ? sum : 100;\n  }\n\n  private colorAt(index: number, segment: KtMeterSegment): string {\n    // Eight slots, fixed order, never cycled — a ninth series folds into\n    // \"Other\" rather than starting the palette again under a new meaning.\n    return segment.color ?? `var(--chart-series-${Math.min(index + 1, 8)})`;\n  }\n\n  private renderTrack(): TemplateResult {\n    if (this.segments.length === 0) {\n      const filled = Math.min(Math.max(this.value, 0), 100);\n      return html`<div part=\"track\" class=\"track\">\n        <div class=\"segment\" style=\"width:${filled}%;background:var(--color-primary-base)\"></div>\n      </div>`;\n    }\n\n    const scale = this.scale;\n    return html`<div part=\"track\" class=\"track\">\n      ${this.segments.map((segment, index) => {\n        const share = (Math.max(segment.value, 0) / scale) * 100;\n        return html`<div\n          class=\"segment\"\n          style=\"width:${share}%;background:${this.colorAt(index, segment)}\"\n        ></div>`;\n      })}\n    </div>`;\n  }\n\n  override render(): TemplateResult {\n    const scale = this.scale;\n    const filled =\n      this.segments.length > 0\n        ? this.segments.reduce((total, segment) => total + Math.max(segment.value, 0), 0)\n        : (Math.min(Math.max(this.value, 0), 100) / 100) * scale;\n\n    return html`<div\n      part=\"base\"\n      class=\"meter\"\n      role=\"meter\"\n      aria-label=${this.label || nothing}\n      aria-valuemin=\"0\"\n      aria-valuemax=${scale}\n      aria-valuenow=${Math.round(filled * 100) / 100}\n      aria-valuetext=${this.used && this.total ? `${this.used} ${this.total}` : nothing}\n    >\n      ${\n        this.label || this.used || this.total\n          ? html`<div class=\"top\">\n              ${this.label ? html`<span class=\"label\">${this.label}</span>` : nothing}\n              ${\n                this.used || this.total\n                  ? html`<span class=\"caption\">${this.used} ${this.total}</span>`\n                  : nothing\n              }\n            </div>`\n          : nothing\n      }\n      ${this.renderTrack()}\n      ${\n        this.showLegend && this.segments.length > 0\n          ? html`<ul part=\"legend\" class=\"legend\">\n              ${this.segments.map(\n                (segment, index) =>\n                  html`<li>\n                    <span class=\"dot\" style=\"background:${this.colorAt(index, segment)}\"></span>\n                    <span>${segment.label}</span>\n                    <span class=\"value\">${this.format(segment.value)}</span>\n                  </li>`,\n              )}\n            </ul>`\n          : nothing\n      }\n    </div>`;\n  }\n}\n\ndefineElement('kt-meter', KtMeter);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-meter': KtMeter;\n  }\n}\n"],"names":["KtMeter","KtElement","value","css","sum","total","segment","index","filled","html","scale","share","nothing","__decorateClass","property","defineElement"],"mappings":"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"}

package/dist/components/data/kt-pagination/kt-pagination.d.ts

@@ -0,0 +1,35 @@
+import { type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+import '../../core/kt-button/kt-button.js';
+/**
+ * Previous / next paging, with the position between them.
+ *
+ * Extracted from the table footer so a card list or a gallery can page the same
+ * way a table does.
+ *
+ * The two controls are `<kt-button variant="dark">`, not buttons of its own:
+ * a paging control that invents its own colours, hover and disabled states is
+ * how a design system ends up with two kinds of button on one screen.
+ *
+ * @element kt-pagination
+ *
+ * @csspart previous - The previous button.
+ * @csspart next - The next button.
+ * @csspart info - The "Page 2 / 7" text.
+ *
+ * @fires kt-page-change - A page was requested. `detail: { page }`.
+ */
+export declare class KtPagination extends KtElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** The current page, 1-based. */
+    page: number;
+    totalPages: number;
+    label: string;
+    private go;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-pagination': KtPagination;
+    }
+}

package/dist/components/data/kt-pagination/kt-pagination.js

@@ -0,0 +1,88 @@
+import { css as g, html as h } from "lit";
+import { property as o } from "lit/decorators.js";
+import { K as l, d as m } from "../../../chunks/kt-element-CcMLO5e8.js";
+import { e as c } from "../../../chunks/events-Bjl5Zmmq.js";
+import "../../core/kt-button/kt-button.js";
+var u = Object.defineProperty, n = (r, a, t, d) => {
+  for (var e = void 0, s = r.length - 1, p; s >= 0; s--)
+    (p = r[s]) && (e = p(a, t, e) || e);
+  return e && u(a, t, e), e;
+};
+class i extends l {
+  constructor() {
+    super(...arguments), this.page = 1, this.totalPages = 1, this.label = "Pagination";
+  }
+  static {
+    this.styles = [
+      l.styles,
+      g`
+      :host {
+        display: block;
+      }
+
+      nav {
+        display: flex;
+        align-items: center;
+        gap: var(--gap-button);
+      }
+
+      .info {
+        padding: 0 4px;
+        color: var(--text-muted);
+        font: var(--font-normal-small);
+        font-variant-numeric: tabular-nums;
+        white-space: nowrap;
+      }
+    `
+    ];
+  }
+  go(a) {
+    const t = Math.min(Math.max(a, 1), Math.max(this.totalPages, 1));
+    t !== this.page && (this.page = t, c(this, "kt-page-change", { page: t }));
+  }
+  render() {
+    const a = this.page <= 1, t = this.page >= this.totalPages;
+    return h`<nav aria-label=${this.label}>
+      <kt-button
+        part="previous"
+        variant="dark"
+        size="small"
+        icon="chevron-left"
+        ?disabled=${a}
+        @click=${() => this.go(this.page - 1)}
+        >Previous</kt-button
+      >
+
+      <!-- polite, so a page change is announced without interrupting whatever
+           the reader is already working through -->
+      <span part="info" class="info" aria-live="polite">
+        Page ${this.page} / ${this.totalPages}
+      </span>
+
+      <kt-button
+        part="next"
+        variant="dark"
+        size="small"
+        icon="chevron-right"
+        icon-position="right"
+        ?disabled=${t}
+        @click=${() => this.go(this.page + 1)}
+        >Next</kt-button
+      >
+    </nav>`;
+  }
+}
+n([
+  o({ type: Number })
+], i.prototype, "page");
+n([
+  o({ type: Number, attribute: "total-pages" })
+], i.prototype, "totalPages");
+n([
+  o({ type: String })
+], i.prototype, "label");
+m("kt-pagination", i);
+export {
+  i as KtPagination
+};
+//# sourceMappingURL=kt-pagination.js.map

package/dist/components/data/kt-pagination/kt-pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kt-pagination.js","sources":["../../../../src/components/data/kt-pagination/kt-pagination.ts"],"sourcesContent":["import { css, html, type TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit } from '#internal/events';\nimport '../../core/kt-button/kt-button.js';\n\n/**\n * Previous / next paging, with the position between them.\n *\n * Extracted from the table footer so a card list or a gallery can page the same\n * way a table does.\n *\n * The two controls are `<kt-button variant=\"dark\">`, not buttons of its own:\n * a paging control that invents its own colours, hover and disabled states is\n * how a design system ends up with two kinds of button on one screen.\n *\n * @element kt-pagination\n *\n * @csspart previous - The previous button.\n * @csspart next - The next button.\n * @csspart info - The \"Page 2 / 7\" text.\n *\n * @fires kt-page-change - A page was requested. `detail: { page }`.\n */\nexport class KtPagination extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: block;\n      }\n\n      nav {\n        display: flex;\n        align-items: center;\n        gap: var(--gap-button);\n      }\n\n      .info {\n        padding: 0 4px;\n        color: var(--text-muted);\n        font: var(--font-normal-small);\n        font-variant-numeric: tabular-nums;\n        white-space: nowrap;\n      }\n    `,\n  ];\n\n  /** The current page, 1-based. */\n  @property({ type: Number })\n  page = 1;\n\n  @property({ type: Number, attribute: 'total-pages' })\n  totalPages = 1;\n\n  @property({ type: String })\n  label = 'Pagination';\n\n  private go(target: number): void {\n    const next = Math.min(Math.max(target, 1), Math.max(this.totalPages, 1));\n    if (next === this.page) return;\n\n    this.page = next;\n    emit(this, 'kt-page-change', { page: next });\n  }\n\n  override render(): TemplateResult {\n    const first = this.page <= 1;\n    const last = this.page >= this.totalPages;\n\n    return html`<nav aria-label=${this.label}>\n      <kt-button\n        part=\"previous\"\n        variant=\"dark\"\n        size=\"small\"\n        icon=\"chevron-left\"\n        ?disabled=${first}\n        @click=${() => this.go(this.page - 1)}\n        >Previous</kt-button\n      >\n\n      <!-- polite, so a page change is announced without interrupting whatever\n           the reader is already working through -->\n      <span part=\"info\" class=\"info\" aria-live=\"polite\">\n        Page ${this.page} / ${this.totalPages}\n      </span>\n\n      <kt-button\n        part=\"next\"\n        variant=\"dark\"\n        size=\"small\"\n        icon=\"chevron-right\"\n        icon-position=\"right\"\n        ?disabled=${last}\n        @click=${() => this.go(this.page + 1)}\n        >Next</kt-button\n      >\n    </nav>`;\n  }\n}\n\ndefineElement('kt-pagination', KtPagination);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-pagination': KtPagination;\n  }\n}\n"],"names":["KtPagination","KtElement","css","target","next","emit","first","last","html","__decorateClass","property","defineElement"],"mappings":";;;;;;;;;;AAwBO,MAAMA,UAAqBC,EAAU;AAAA,EAArC,cAAA;AAAA,UAAA,GAAA,SAAA,GA0BL,KAAA,OAAO,GAGP,KAAA,aAAa,GAGb,KAAA,QAAQ;AAAA,EAAA;AAAA,EA/BR,OAAA;AAAA,SAAgB,SAAS;AAAA,MACvBA,EAAU;AAAA,MACVC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,EAmBF;AAAA,EAYQ,GAAGC,GAAsB;AAC/B,UAAMC,IAAO,KAAK,IAAI,KAAK,IAAID,GAAQ,CAAC,GAAG,KAAK,IAAI,KAAK,YAAY,CAAC,CAAC;AACvE,IAAIC,MAAS,KAAK,SAElB,KAAK,OAAOA,GACZC,EAAK,MAAM,kBAAkB,EAAE,MAAMD,GAAM;AAAA,EAC7C;AAAA,EAES,SAAyB;AAChC,UAAME,IAAQ,KAAK,QAAQ,GACrBC,IAAO,KAAK,QAAQ,KAAK;AAE/B,WAAOC,oBAAuB,KAAK,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAMxBF,CAAK;AAAA,iBACR,MAAM,KAAK,GAAG,KAAK,OAAO,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAO9B,KAAK,IAAI,MAAM,KAAK,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBASzBC,CAAI;AAAA,iBACP,MAAM,KAAK,GAAG,KAAK,OAAO,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,EAI3C;AACF;AAjDEE,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAzBfV,EA0BX,WAAA,MAAA;AAGAS,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,eAAe;AAAA,GA5BzCV,EA6BX,WAAA,YAAA;AAGAS,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA/BfV,EAgCX,WAAA,OAAA;AA6CFW,EAAc,iBAAiBX,CAAY;"}

package/dist/components/data/kt-stat/kt-stat.d.ts

@@ -0,0 +1,60 @@
+import { type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+import '../../core/kt-icon/kt-icon.js';
+import '../../core/kt-badge/kt-badge.js';
+import '../../feedback/kt-skeleton/kt-skeleton.js';
+export type KtStatTrend = 'up' | 'down' | 'flat';
+/**
+ * One headline figure: a label, a value, and how it moved.
+ *
+ * Worth its own element because every dashboard rebuilds this tile, and every
+ * rebuild makes the same two mistakes — the delta coloured by sign rather than
+ * by meaning, and the label competing with the number.
+ *
+ * **The colour comes from `trend`, not from the sign.** Falling costs are good
+ * news; rising churn is not. Pass `trend` to say which, and `inverted` when
+ * down is the direction you want.
+ *
+ * @element kt-stat
+ *
+ * @slot - Extra content under the value — a sparkline, a caption.
+ *
+ * @csspart base - The tile.
+ * @csspart value - The figure.
+ *
+ * @example
+ * ```html
+ * <kt-stat label="Revenue" value="$292,342" delta="-3%" trend="down"></kt-stat>
+ * <kt-stat label="Customers" value="712" delta="+12%" trend="up" icon="users"></kt-stat>
+ * ```
+ */
+export declare class KtStat extends KtElement {
+    static styles: import("lit").CSSResultGroup[];
+    label: string;
+    value: string;
+    /** The movement, shown as a badge: `+12%`, `-3%`, `+2`. */
+    delta: string;
+    /**
+     * What the movement means. Drives the badge colour.
+     * `flat` — and the default — stay neutral.
+     */
+    trend: KtStatTrend;
+    /**
+     * Down is the good direction here — churn, cost, latency.
+     * Swaps which trend reads as success.
+     */
+    inverted: boolean;
+    /** Lucide icon name, kebab-case. */
+    icon: string;
+    /** Small print under the figure — "vs last month". */
+    caption: string;
+    size: 'small' | 'medium';
+    loading: boolean;
+    private get deltaVariant();
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-stat': KtStat;
+    }
+}

package/dist/components/data/kt-stat/kt-stat.js

@@ -0,0 +1,137 @@
+import { css as h, nothing as l, html as r } from "lit";
+import { property as e } from "lit/decorators.js";
+import { K as c, d as f } from "../../../chunks/kt-element-CcMLO5e8.js";
+import "../../core/kt-icon/kt-icon.js";
+import "../../core/kt-badge/kt-badge.js";
+import "../../feedback/kt-skeleton/kt-skeleton.js";
+var v = Object.defineProperty, a = (s, n, p, u) => {
+  for (var i = void 0, o = s.length - 1, d; o >= 0; o--)
+    (d = s[o]) && (i = d(n, p, i) || i);
+  return i && v(n, p, i), i;
+};
+class t extends c {
+  constructor() {
+    super(...arguments), this.label = "", this.value = "", this.delta = "", this.trend = "flat", this.inverted = !1, this.icon = "", this.caption = "", this.size = "medium", this.loading = !1;
+  }
+  static {
+    this.styles = [
+      c.styles,
+      h`
+      :host {
+        display: block;
+      }
+
+      .stat {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        padding: var(--padding-card);
+      }
+
+      .head {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+      }
+
+      /* A tinted disc rather than a bare glyph: at this size an icon on its
+         own reads as noise beside the figure. */
+      .icon {
+        display: inline-flex;
+        flex: none;
+        align-items: center;
+        justify-content: center;
+        width: 34px;
+        height: 34px;
+        color: var(--color-primary-base);
+        background: var(--color-primary-soft);
+        border-radius: var(--radius-full);
+      }
+
+      .label {
+        color: var(--color-text-500);
+        font: var(--font-title-overline);
+        letter-spacing: var(--letter-spacing-overline);
+        text-transform: uppercase;
+      }
+
+      .figure {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: 10px;
+      }
+
+      .value {
+        color: var(--text-body);
+        font: var(--font-title-h1);
+        font-variant-numeric: tabular-nums;
+        line-height: 1.1;
+      }
+
+      :host([size='small']) .value {
+        font: var(--font-title-h4);
+      }
+
+      .caption {
+        color: var(--text-muted);
+        font: var(--font-normal-small);
+      }
+    `
+    ];
+  }
+  get deltaVariant() {
+    if (this.trend === "flat") return "neutral";
+    const n = this.inverted ? "down" : "up";
+    return this.trend === n ? "success" : "danger";
+  }
+  render() {
+    return r`<div part="base" class="stat">
+      <div class="head">
+        ${this.icon ? r`<span class="icon"><kt-icon name=${this.icon} size="18"></kt-icon></span>` : l}
+        <span class="label">${this.label}</span>
+      </div>
+
+      ${this.loading ? r`<kt-skeleton variant="rect" height="38px" width="60%"></kt-skeleton>` : r`<div class="figure">
+              <span part="value" class="value">${this.value}</span>
+              ${this.delta ? r`<kt-badge variant="count" tone=${this.deltaVariant}
+                      >${this.delta}</kt-badge
+                    >` : l}
+            </div>`}
+      ${this.caption ? r`<span class="caption">${this.caption}</span>` : l}
+      <slot></slot>
+    </div>`;
+  }
+}
+a([
+  e({ type: String })
+], t.prototype, "label");
+a([
+  e({ type: String })
+], t.prototype, "value");
+a([
+  e({ type: String })
+], t.prototype, "delta");
+a([
+  e({ type: String, reflect: !0 })
+], t.prototype, "trend");
+a([
+  e({ type: Boolean })
+], t.prototype, "inverted");
+a([
+  e({ type: String })
+], t.prototype, "icon");
+a([
+  e({ type: String })
+], t.prototype, "caption");
+a([
+  e({ type: String, reflect: !0 })
+], t.prototype, "size");
+a([
+  e({ type: Boolean, reflect: !0 })
+], t.prototype, "loading");
+f("kt-stat", t);
+export {
+  t as KtStat
+};
+//# sourceMappingURL=kt-stat.js.map