kanto-ds 1.0.0

package/dist/components/core/kt-icon/kt-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kt-icon.js","sources":["../../../../src/components/core/kt-icon/kt-icon.ts"],"sourcesContent":["import { css, html, nothing, type TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { getIcon, type IconNode } from 'kanto-ds/icons';\nimport '../../../icons/defaults.js';\n\nconst SVG_NS = 'http://www.w3.org/2000/svg';\n\n/** Names already reported as missing, so the console gets one line per icon. */\nconst warned = new Set<string>();\n\n/** Builds one SVG child from a Lucide `[tag, attrs]` pair. */\nfunction toSvgChild([tag, attrs]: IconNode[number]): SVGElement {\n  const element = document.createElementNS(SVG_NS, tag);\n  for (const [name, value] of Object.entries(attrs)) {\n    if (value !== undefined) element.setAttribute(name, String(value));\n  }\n  return element;\n}\n\n/**\n * A Lucide icon, resolved from the registry by name.\n *\n * The icon inherits `currentColor`, so it is coloured by setting `color` on\n * the element or on any ancestor — there is no colour attribute to keep in\n * sync with the surrounding text.\n *\n * Unknown names render nothing but still occupy their box, so a typo shifts no\n * layout while you find it in the console.\n *\n * @element kt-icon\n *\n * @csspart svg - The `<svg>` root.\n *\n * @example\n * ```html\n * <kt-icon name=\"search\"></kt-icon>\n * <kt-icon name=\"trash-2\" size=\"16\" label=\"Delete\"></kt-icon>\n * ```\n */\nexport class KtIcon extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        flex: none;\n        vertical-align: middle;\n        color: inherit;\n      }\n\n      svg {\n        display: block;\n      }\n    `,\n  ];\n\n  /** Icon name, kebab-case: `chevron-down`, `circle-alert`. */\n  @property({ type: String, reflect: true })\n  name = '';\n\n  /** Width and height in pixels. */\n  @property({ type: Number, reflect: true })\n  size = 24;\n\n  /** Stroke width passed to the SVG. */\n  @property({ type: Number, attribute: 'stroke-width' })\n  strokeWidth = 2;\n\n  /**\n   * Accessible name. Set it when the icon carries meaning on its own; leave it\n   * off — the default — when adjacent text already says what this is, and the\n   * icon is hidden from assistive technology.\n   */\n  @property({ type: String })\n  label = '';\n\n  override render(): TemplateResult | typeof nothing {\n    const node = getIcon(this.name);\n\n    if (!node) {\n      if (this.name && !warned.has(this.name)) {\n        warned.add(this.name);\n        console.warn(\n          `<kt-icon>: no icon registered as \"${this.name}\". ` +\n            `Register it with registerIcons({ ... }) from \"kanto-ds/icons\".`,\n        );\n      }\n      return html`<svg\n        part=\"svg\"\n        width=${this.size}\n        height=${this.size}\n        viewBox=\"0 0 24 24\"\n        aria-hidden=\"true\"\n      ></svg>`;\n    }\n\n    return html`<svg\n      part=\"svg\"\n      xmlns=${SVG_NS}\n      width=${this.size}\n      height=${this.size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=${this.strokeWidth}\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      role=${this.label ? 'img' : nothing}\n      aria-label=${this.label || nothing}\n      aria-hidden=${this.label ? nothing : 'true'}\n    >\n      ${node.map(toSvgChild)}\n    </svg>`;\n  }\n}\n\ndefineElement('kt-icon', KtIcon);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-icon': KtIcon;\n  }\n}\n"],"names":["SVG_NS","warned","toSvgChild","tag","attrs","element","name","value","KtIcon","KtElement","css","node","getIcon","html","nothing","__decorateClass","property","defineElement"],"mappings":";;;;;;;;;AAMA,MAAMA,IAAS,8BAGTC,wBAAa,IAAA;AAGnB,SAASC,EAAW,CAACC,GAAKC,CAAK,GAAiC;AAC9D,QAAMC,IAAU,SAAS,gBAAgBL,GAAQG,CAAG;AACpD,aAAW,CAACG,GAAMC,CAAK,KAAK,OAAO,QAAQH,CAAK;AAC9C,IAAIG,MAAU,UAAWF,EAAQ,aAAaC,GAAM,OAAOC,CAAK,CAAC;AAEnE,SAAOF;AACT;AAsBO,MAAMG,UAAeC,EAAU;AAAA,EAA/B,cAAA;AAAA,UAAA,GAAA,SAAA,GAqBL,KAAA,OAAO,IAIP,KAAA,OAAO,IAIP,KAAA,cAAc,GAQd,KAAA,QAAQ;AAAA,EAAA;AAAA,EApCR,OAAA;AAAA,SAAgB,SAAS;AAAA,MACvBA,EAAU;AAAA,MACVC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,EAcF;AAAA,EAsBS,SAA0C;AACjD,UAAMC,IAAOC,EAAQ,KAAK,IAAI;AAE9B,WAAKD,IAiBEE;AAAA;AAAA,cAEGb,CAAM;AAAA,cACN,KAAK,IAAI;AAAA,eACR,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA,qBAIH,KAAK,WAAW;AAAA;AAAA;AAAA,aAGxB,KAAK,QAAQ,QAAQc,CAAO;AAAA,mBACtB,KAAK,SAASA,CAAO;AAAA,oBACpB,KAAK,QAAQA,IAAU,MAAM;AAAA;AAAA,QAEzCH,EAAK,IAAIT,CAAU,CAAC;AAAA,eA/BlB,KAAK,QAAQ,CAACD,EAAO,IAAI,KAAK,IAAI,MACpCA,EAAO,IAAI,KAAK,IAAI,GACpB,QAAQ;AAAA,MACN,qCAAqC,KAAK,IAAI;AAAA,IAAA,IAI3CY;AAAA;AAAA,gBAEG,KAAK,IAAI;AAAA,iBACR,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA,EAuBxB;AACF;AAxDEE,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GApB9BR,EAqBX,WAAA,MAAA;AAIAO,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAxB9BR,EAyBX,WAAA,MAAA;AAIAO,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,gBAAgB;AAAA,GA5B1CR,EA6BX,WAAA,aAAA;AAQAO,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GApCfR,EAqCX,WAAA,OAAA;AA0CFS,EAAc,WAAWT,CAAM;"}

package/dist/components/core/kt-kbd/kt-kbd.d.ts

@@ -0,0 +1,38 @@
+import { type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+/**
+ * A keyboard shortcut.
+ *
+ * Renders per platform: `⌘ K` on a Mac, `Ctrl K` elsewhere. A shortcut printed
+ * with the wrong modifier is worse than none — the reader tries it, it does not
+ * work, and they stop trusting the hints.
+ *
+ * @element kt-kbd
+ *
+ * @slot - The key, when `keys` is not used.
+ *
+ * @csspart base - The wrapper.
+ * @csspart key - One key.
+ *
+ * @example
+ * ```html
+ * <kt-kbd keys="meta k"></kt-kbd>
+ * <kt-kbd>/</kt-kbd>
+ * ```
+ */
+export declare class KtKbd extends KtElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** Space-separated keys: `meta k`, `ctrl shift p`. */
+    keys: string;
+    /** Forces a platform instead of sniffing the current one. */
+    platform: 'auto' | 'mac' | 'other';
+    private get isMac();
+    /** The keys as they will be shown. Exposed so tests and docs can read them. */
+    get labels(): string[];
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-kbd': KtKbd;
+    }
+}

package/dist/components/core/kt-kbd/kt-kbd.js

@@ -0,0 +1,89 @@
+import { css as c, html as o } from "lit";
+import { property as p } from "lit/decorators.js";
+import { K as l, d as f } from "../../../chunks/kt-element-CcMLO5e8.js";
+var m = Object.defineProperty, d = (a, t, e, y) => {
+  for (var r = void 0, s = a.length - 1, n; s >= 0; s--)
+    (n = a[s]) && (r = n(t, e, r) || r);
+  return r && m(t, e, r), r;
+};
+const b = {
+  mod: "⌘",
+  meta: "⌘",
+  cmd: "⌘",
+  ctrl: "⌃",
+  alt: "⌥",
+  option: "⌥",
+  shift: "⇧",
+  enter: "↵",
+  escape: "esc",
+  backspace: "⌫"
+}, h = {
+  mod: "Ctrl",
+  meta: "Win",
+  cmd: "Ctrl",
+  ctrl: "Ctrl",
+  alt: "Alt",
+  option: "Alt",
+  shift: "Shift",
+  enter: "Enter",
+  escape: "Esc",
+  backspace: "Backspace"
+};
+class i extends l {
+  constructor() {
+    super(...arguments), this.keys = "", this.platform = "auto";
+  }
+  static {
+    this.styles = [
+      l.styles,
+      c`
+      :host {
+        display: inline-flex;
+        align-items: center;
+        gap: 3px;
+        vertical-align: middle;
+      }
+
+      kbd {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 20px;
+        height: 20px;
+        padding: 0 5px;
+        color: var(--color-text-500);
+        font: var(--font-normal-small);
+        font-family: var(--font-family-body);
+        background: var(--surface-card);
+        border: var(--border-width) solid var(--border-subtle);
+        border-radius: 5px;
+      }
+    `
+    ];
+  }
+  get isMac() {
+    return this.platform !== "auto" ? this.platform === "mac" : typeof navigator > "u" ? !1 : /mac|iphone|ipad/i.test(navigator.platform || navigator.userAgent);
+  }
+  /** The keys as they will be shown. Exposed so tests and docs can read them. */
+  get labels() {
+    const t = this.isMac ? b : h;
+    return this.keys.split(/\s+/).filter(Boolean).map((e) => t[e.toLowerCase()] ?? e.toUpperCase());
+  }
+  render() {
+    const t = this.labels;
+    return o`<span part="base" style="display:contents">
+      ${t.length > 0 ? t.map((e) => o`<kbd part="key">${e}</kbd>`) : o`<kbd part="key"><slot></slot></kbd>`}
+    </span>`;
+  }
+}
+d([
+  p({ type: String })
+], i.prototype, "keys");
+d([
+  p({ type: String })
+], i.prototype, "platform");
+f("kt-kbd", i);
+export {
+  i as KtKbd
+};
+//# sourceMappingURL=kt-kbd.js.map

package/dist/components/core/kt-kbd/kt-kbd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kt-kbd.js","sources":["../../../../src/components/core/kt-kbd/kt-kbd.ts"],"sourcesContent":["import { css, html, type TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\n\n/**\n * Symbols people actually recognise, per platform.\n *\n * `mod` is the one to reach for: it means \"the primary shortcut modifier\",\n * which is Command on a Mac and Control everywhere else. `meta` stays honest —\n * on Windows the Meta key really is the Windows key, and printing \"Ctrl\" for it\n * would send the reader to the wrong key.\n */\nconst MAC: Record<string, string> = {\n  mod: '⌘',\n  meta: '⌘',\n  cmd: '⌘',\n  ctrl: '⌃',\n  alt: '⌥',\n  option: '⌥',\n  shift: '⇧',\n  enter: '↵',\n  escape: 'esc',\n  backspace: '⌫',\n};\n\nconst OTHER: Record<string, string> = {\n  mod: 'Ctrl',\n  meta: 'Win',\n  cmd: 'Ctrl',\n  ctrl: 'Ctrl',\n  alt: 'Alt',\n  option: 'Alt',\n  shift: 'Shift',\n  enter: 'Enter',\n  escape: 'Esc',\n  backspace: 'Backspace',\n};\n\n/**\n * A keyboard shortcut.\n *\n * Renders per platform: `⌘ K` on a Mac, `Ctrl K` elsewhere. A shortcut printed\n * with the wrong modifier is worse than none — the reader tries it, it does not\n * work, and they stop trusting the hints.\n *\n * @element kt-kbd\n *\n * @slot - The key, when `keys` is not used.\n *\n * @csspart base - The wrapper.\n * @csspart key - One key.\n *\n * @example\n * ```html\n * <kt-kbd keys=\"meta k\"></kt-kbd>\n * <kt-kbd>/</kt-kbd>\n * ```\n */\nexport class KtKbd extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: inline-flex;\n        align-items: center;\n        gap: 3px;\n        vertical-align: middle;\n      }\n\n      kbd {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        min-width: 20px;\n        height: 20px;\n        padding: 0 5px;\n        color: var(--color-text-500);\n        font: var(--font-normal-small);\n        font-family: var(--font-family-body);\n        background: var(--surface-card);\n        border: var(--border-width) solid var(--border-subtle);\n        border-radius: 5px;\n      }\n    `,\n  ];\n\n  /** Space-separated keys: `meta k`, `ctrl shift p`. */\n  @property({ type: String })\n  keys = '';\n\n  /** Forces a platform instead of sniffing the current one. */\n  @property({ type: String })\n  platform: 'auto' | 'mac' | 'other' = 'auto';\n\n  private get isMac(): boolean {\n    if (this.platform !== 'auto') return this.platform === 'mac';\n    if (typeof navigator === 'undefined') return false;\n    return /mac|iphone|ipad/i.test(navigator.platform || navigator.userAgent);\n  }\n\n  /** The keys as they will be shown. Exposed so tests and docs can read them. */\n  get labels(): string[] {\n    const table = this.isMac ? MAC : OTHER;\n    return this.keys\n      .split(/\\s+/)\n      .filter(Boolean)\n      .map((key) => table[key.toLowerCase()] ?? key.toUpperCase());\n  }\n\n  override render(): TemplateResult {\n    const labels = this.labels;\n\n    return html`<span part=\"base\" style=\"display:contents\">\n      ${\n        labels.length > 0\n          ? labels.map((label) => html`<kbd part=\"key\">${label}</kbd>`)\n          : html`<kbd part=\"key\"><slot></slot></kbd>`\n      }\n    </span>`;\n  }\n}\n\ndefineElement('kt-kbd', KtKbd);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-kbd': KtKbd;\n  }\n}\n"],"names":["MAC","OTHER","KtKbd","KtElement","css","table","key","labels","html","label","__decorateClass","property","defineElement"],"mappings":";;;;;;;;AAYA,MAAMA,IAA8B;AAAA,EAClC,KAAK;AAAA,EACL,MAAM;AAAA,EACN,KAAK;AAAA,EACL,MAAM;AAAA,EACN,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,WAAW;AACb,GAEMC,IAAgC;AAAA,EACpC,KAAK;AAAA,EACL,MAAM;AAAA,EACN,KAAK;AAAA,EACL,MAAM;AAAA,EACN,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,WAAW;AACb;AAsBO,MAAMC,UAAcC,EAAU;AAAA,EAA9B,cAAA;AAAA,UAAA,GAAA,SAAA,GA8BL,KAAA,OAAO,IAIP,KAAA,WAAqC;AAAA,EAAA;AAAA,EAjCrC,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;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,EAuBF;AAAA,EAUA,IAAY,QAAiB;AAC3B,WAAI,KAAK,aAAa,SAAe,KAAK,aAAa,QACnD,OAAO,YAAc,MAAoB,KACtC,mBAAmB,KAAK,UAAU,YAAY,UAAU,SAAS;AAAA,EAC1E;AAAA;AAAA,EAGA,IAAI,SAAmB;AACrB,UAAMC,IAAQ,KAAK,QAAQL,IAAMC;AACjC,WAAO,KAAK,KACT,MAAM,KAAK,EACX,OAAO,OAAO,EACd,IAAI,CAACK,MAAQD,EAAMC,EAAI,YAAA,CAAa,KAAKA,EAAI,aAAa;AAAA,EAC/D;AAAA,EAES,SAAyB;AAChC,UAAMC,IAAS,KAAK;AAEpB,WAAOC;AAAA,QAEHD,EAAO,SAAS,IACZA,EAAO,IAAI,CAACE,MAAUD,oBAAuBC,CAAK,QAAQ,IAC1DD,sCACN;AAAA;AAAA,EAEJ;AACF;AAhCEE,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA7BfT,EA8BX,WAAA,MAAA;AAIAQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAjCfT,EAkCX,WAAA,UAAA;AA8BFU,EAAc,UAAUV,CAAK;"}

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

@@ -0,0 +1,99 @@
+import { type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+export type KtChartType = 'area' | 'line' | 'bar';
+export interface KtSeries {
+    readonly name: string;
+    readonly values: readonly number[];
+    /** Overrides the slot this series would take from the categorical order. */
+    readonly color?: string;
+}
+/**
+ * A small chart, drawn from the token layer.
+ *
+ * Deliberately narrow: one axis, one to eight series, three marks. It is the
+ * shape a product dashboard actually needs, not a charting library — anything
+ * past this and you want a real one.
+ *
+ * **Colour.** One series takes the brand hue: with nothing to tell apart there
+ * is no identity to encode, and the title names it. Two or more take the fixed
+ * categorical order in `--chart-series-1…8`, assigned by position and never
+ * cycled, so a series keeps its colour when a filter removes its neighbours.
+ * Those hues are kept clear of the semantic palette, so a line can never be
+ * mistaken for a status.
+ *
+ * **The table is not optional.** Every chart also renders its data as a table,
+ * visually hidden by default. It is what a screen reader reads, and it is the
+ * relief that four of the light-theme series hues require, sitting as they do
+ * below 3:1 on a light surface.
+ *
+ * @element kt-chart
+ *
+ * @csspart svg - The plot.
+ * @csspart legend - The legend, when there are two or more series.
+ * @csspart table - The data table.
+ *
+ * @fires kt-point-hover - The hovered index changed. `detail: { index }`,
+ *   with `index` of -1 when the pointer leaves.
+ *
+ * @example
+ * ```js
+ * chart.labels = ['Jan', 'Feb', 'Mar'];
+ * chart.series = [{ name: 'Revenue', values: [42, 58, 36] }];
+ * ```
+ */
+export declare class KtChart extends KtElement {
+    static styles: import("lit").CSSResultGroup[];
+    private plot;
+    private observer?;
+    private readonly tableId;
+    private box;
+    private active;
+    type: KtChartType;
+    series: readonly KtSeries[];
+    /** One label per index along the x axis. */
+    labels: readonly string[];
+    height: number;
+    /** Formats a value for the tooltip and the table. */
+    format: (value: number) => string;
+    /** Horizontal grid lines. */
+    noGrid: boolean;
+    /** Puts the data table on screen instead of only in the accessibility tree. */
+    showTable: boolean;
+    /**
+     * Smooths the line through a monotone spline.
+     *
+     * Off by default on purpose: a curve between two samples draws values that
+     * were never measured. Turn it on when the underlying quantity really is
+     * continuous and the reader knows it.
+     */
+    smooth: boolean;
+    /** Accessible name. Say what the chart shows. */
+    label: string;
+    connectedCallback(): void;
+    firstUpdated(): void;
+    disconnectedCallback(): void;
+    private colorFor;
+    private get pointCount();
+    private get bounds();
+    private get plotArea();
+    private xFor;
+    private yFor;
+    /**
+     * A monotone cubic path — it never overshoots the samples, which a plain
+     * cardinal spline happily does, inventing peaks that are not in the data.
+     */
+    private pathFor;
+    private onPointerMove;
+    private onPointerLeave;
+    private renderGrid;
+    private renderBars;
+    private renderLines;
+    private renderAxis;
+    private renderTooltip;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-chart': KtChart;
+    }
+}

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

@@ -0,0 +1,406 @@
+import { css as F, nothing as h, svg as l, html as c } from "lit";
+import { query as M, state as g, property as p } from "lit/decorators.js";
+import { K as f, d as A } from "../../../chunks/kt-element-CcMLO5e8.js";
+import { u as C, e as y } from "../../../chunks/events-Bjl5Zmmq.js";
+var P = Object.defineProperty, n = (b, e, t, o) => {
+  for (var i = void 0, s = b.length - 1, r; s >= 0; s--)
+    (r = b[s]) && (i = r(e, t, i) || i);
+  return i && P(e, t, i), i;
+};
+const u = { top: 12, right: 4, bottom: 22, left: 4 }, G = 8;
+class a extends f {
+  constructor() {
+    super(...arguments), this.tableId = C("kt-chart-table"), this.box = { width: 0, height: 0 }, this.active = -1, this.type = "area", this.series = [], this.labels = [], this.height = 200, this.format = (e) => String(e), this.noGrid = !1, this.showTable = !1, this.smooth = !1, this.label = "";
+  }
+  static {
+    this.styles = [
+      f.styles,
+      F`
+      :host {
+        display: block;
+        position: relative;
+      }
+
+      .plot {
+        position: relative;
+        width: 100%;
+      }
+
+      svg {
+        display: block;
+        width: 100%;
+        overflow: visible;
+      }
+
+      /* Recessive: the data is the loud part. */
+      .grid {
+        stroke: var(--chart-grid);
+        stroke-width: 1;
+        opacity: 0.6;
+      }
+
+      .axis-label {
+        fill: var(--chart-axis);
+        font: var(--font-normal-small);
+        font-family: var(--font-family-body);
+      }
+
+      .line {
+        fill: none;
+        stroke-width: 2;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+
+      .marker {
+        stroke: var(--surface-card);
+        stroke-width: 2;
+      }
+
+      .crosshair {
+        stroke: var(--chart-axis);
+        stroke-width: 1;
+        stroke-dasharray: 3 3;
+      }
+
+      .tooltip {
+        position: absolute;
+        z-index: var(--z-tooltip);
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        min-width: 120px;
+        padding: 8px 10px;
+        color: var(--text-inverted);
+        font: var(--font-normal-small);
+        background: var(--surface-inverted);
+        border-radius: var(--border-radius);
+        box-shadow: var(--shadow-toast);
+        pointer-events: none;
+        transform: translate(-50%, calc(-100% - 12px));
+      }
+
+      .tooltip-row {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        white-space: nowrap;
+      }
+
+      .swatch {
+        width: 8px;
+        height: 8px;
+        border-radius: 2px;
+      }
+
+      .tooltip-name {
+        flex: 1;
+        opacity: 0.75;
+      }
+
+      .tooltip-value {
+        font-variant-numeric: tabular-nums;
+      }
+
+      .legend {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 14px;
+        margin-top: 10px;
+      }
+
+      .legend-item {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        color: var(--text-muted);
+        font: var(--font-normal-small);
+      }
+
+      /* Present for assistive technology and for anyone who needs the
+         numbers; show-table puts it on screen. */
+      .table {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        overflow: hidden;
+        clip-path: inset(50%);
+        white-space: nowrap;
+      }
+
+      :host([show-table]) .table {
+        position: static;
+        width: auto;
+        height: auto;
+        margin-top: 16px;
+        overflow: visible;
+        clip-path: none;
+        white-space: normal;
+      }
+
+      :host([show-table]) table {
+        width: 100%;
+        border-collapse: collapse;
+        font: var(--font-normal-small);
+      }
+
+      :host([show-table]) th,
+      :host([show-table]) td {
+        padding: 6px 10px;
+        color: var(--text-muted);
+        text-align: right;
+        border-bottom: var(--border-width) solid var(--border-subtle);
+      }
+
+      :host([show-table]) th:first-child,
+      :host([show-table]) td:first-child {
+        color: var(--text-body);
+        text-align: left;
+      }
+    `
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.observer = new ResizeObserver(([e]) => {
+      e && (this.box = { width: e.contentRect.width, height: this.height });
+    });
+  }
+  firstUpdated() {
+    this.plot && this.observer?.observe(this.plot);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.observer?.disconnect();
+  }
+  colorFor(e, t) {
+    return t.color ? t.color : this.series.length === 1 ? "var(--color-primary-base)" : `var(--chart-series-${e % G + 1})`;
+  }
+  get pointCount() {
+    return Math.max(0, ...this.series.map((e) => e.values.length));
+  }
+  get bounds() {
+    const e = this.series.flatMap((i) => [...i.values]);
+    if (e.length === 0) return { min: 0, max: 1 };
+    const t = Math.max(...e, 0), o = Math.min(...e, 0);
+    return { min: o, max: t === o ? o + 1 : t };
+  }
+  get plotArea() {
+    return {
+      x: u.left,
+      y: u.top,
+      width: Math.max(0, this.box.width - u.left - u.right),
+      height: Math.max(0, this.height - u.top - u.bottom)
+    };
+  }
+  xFor(e) {
+    const t = this.plotArea, o = this.pointCount;
+    return o <= 1 ? t.x + t.width / 2 : t.x + e / (o - 1) * t.width;
+  }
+  yFor(e) {
+    const t = this.plotArea, { min: o, max: i } = this.bounds;
+    return t.y + t.height - (e - o) / (i - o) * t.height;
+  }
+  /**
+   * A monotone cubic path — it never overshoots the samples, which a plain
+   * cardinal spline happily does, inventing peaks that are not in the data.
+   */
+  pathFor(e) {
+    const t = e.map((i, s) => [this.xFor(s), this.yFor(i)]);
+    if (t.length === 0) return "";
+    if (t.length === 1 || !this.smooth)
+      return t.map(([i, s], r) => `${r === 0 ? "M" : "L"}${i},${s}`).join(" ");
+    let o = `M${t[0][0]},${t[0][1]}`;
+    for (let i = 0; i < t.length - 1; i += 1) {
+      const [s, r] = t[i], [d, v] = t[i + 1], x = (d - s) / 3;
+      o += ` C${s + x},${r} ${d - x},${v} ${d},${v}`;
+    }
+    return o;
+  }
+  onPointerMove(e) {
+    const t = this.plotArea, o = this.pointCount;
+    if (o === 0 || t.width === 0) return;
+    const i = e.offsetX - t.x, s = Math.round(i / t.width * (o - 1)), r = Math.min(Math.max(s, 0), o - 1);
+    r !== this.active && (this.active = r, y(this, "kt-point-hover", { index: r }));
+  }
+  onPointerLeave() {
+    this.active !== -1 && (this.active = -1, y(this, "kt-point-hover", { index: -1 }));
+  }
+  renderGrid() {
+    if (this.noGrid) return h;
+    const e = this.plotArea;
+    return l`${[0, 0.25, 0.5, 0.75, 1].map((t) => {
+      const o = e.y + e.height * t;
+      return l`<line class="grid" x1=${e.x} y1=${o} x2=${e.x + e.width} y2=${o} />`;
+    })}`;
+  }
+  renderBars() {
+    const e = this.plotArea, t = this.pointCount, o = this.series.length, i = t > 0 ? e.width / t : 0, s = Math.max(2, i / o - 2), r = this.yFor(Math.max(0, this.bounds.min));
+    return l`${this.series.map(
+      (d, v) => d.values.map((x, m) => {
+        const $ = this.yFor(x), w = e.x + m * i + (i - s * o) / 2 + v * s, k = Math.max(1, r - $);
+        return l`<rect
+          x=${w} y=${$} width=${s} height=${k}
+          rx="4" ry="4"
+          fill=${this.colorFor(v, d)}
+          opacity=${this.active === -1 || this.active === m ? 1 : 0.45}
+        />`;
+      })
+    )}`;
+  }
+  renderLines() {
+    const e = this.plotArea;
+    return l`${this.series.map((t, o) => {
+      const i = this.colorFor(o, t), s = this.pathFor(t.values), r = `${this.tableId}-fill-${o}`;
+      return l`
+        ${this.type === "area" ? l`
+              <defs>
+                <linearGradient id=${r} x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="0%" stop-color=${i} stop-opacity="0.28" />
+                  <stop offset="100%" stop-color=${i} stop-opacity="0.02" />
+                </linearGradient>
+              </defs>
+              <path
+                d=${`${s} L${this.xFor(t.values.length - 1)},${e.y + e.height} L${this.xFor(0)},${e.y + e.height} Z`}
+                fill=${`url(#${r})`}
+              />` : h}
+        <path class="line" d=${s} stroke=${i} />
+        ${this.active >= 0 && t.values[this.active] !== void 0 ? l`<circle
+                class="marker"
+                cx=${this.xFor(this.active)}
+                cy=${this.yFor(t.values[this.active])}
+                r="5"
+                fill=${i}
+              />` : h}`;
+    })}`;
+  }
+  renderAxis() {
+    const e = this.plotArea, t = this.pointCount, o = Math.max(1, Math.ceil(t / Math.max(1, Math.floor(e.width / 56))));
+    return l`${this.labels.map(
+      (i, s) => s % o === 0 ? l`<text
+            class="axis-label"
+            x=${this.xFor(s)}
+            y=${e.y + e.height + 16}
+            text-anchor="middle"
+          >${i}</text>` : h
+    )}`;
+  }
+  renderTooltip() {
+    return this.active < 0 || this.box.width === 0 ? h : c`<div
+      class="tooltip"
+      style=${`left:${this.xFor(this.active)}px;top:${this.plotArea.y + this.plotArea.height}px`}
+      role="status"
+    >
+      <strong>${this.labels[this.active] ?? `#${this.active + 1}`}</strong>
+      ${this.series.map(
+      (e, t) => c`<span class="tooltip-row">
+            <span class="swatch" style=${`background:${this.colorFor(t, e)}`}></span>
+            <span class="tooltip-name">${e.name}</span>
+            <span class="tooltip-value">${this.format(e.values[this.active] ?? 0)}</span>
+          </span>`
+    )}
+    </div>`;
+  }
+  render() {
+    const e = this.plotArea, t = this.box.width > 0 && this.pointCount > 0;
+    return c`<div class="plot" style=${`height:${this.height}px`}>
+        <svg
+          part="svg"
+          width=${this.box.width}
+          height=${this.height}
+          role="img"
+          aria-label=${this.label || h}
+          aria-describedby=${this.tableId}
+          @pointermove=${this.onPointerMove}
+          @pointerleave=${this.onPointerLeave}
+        >
+          ${t ? this.renderGrid() : h}
+          ${t && this.type === "bar" ? this.renderBars() : h}
+          ${t && this.type !== "bar" ? this.renderLines() : h}
+          ${t && this.active >= 0 && this.type !== "bar" ? l`<line
+              class="crosshair"
+              x1=${this.xFor(this.active)} y1=${e.y}
+              x2=${this.xFor(this.active)} y2=${e.y + e.height}
+            />` : h}
+          ${t ? this.renderAxis() : h}
+        </svg>
+        ${this.renderTooltip()}
+      </div>
+
+      ${this.series.length > 1 ? c`<div part="legend" class="legend">
+              ${this.series.map(
+      (o, i) => c`<span class="legend-item">
+                    <span
+                      class="swatch"
+                      style=${`background:${this.colorFor(i, o)}`}
+                    ></span>
+                    ${o.name}
+                  </span>`
+    )}
+            </div>` : h}
+
+      <div part="table" class="table" id=${this.tableId}>
+        <table>
+          <caption>
+            ${this.label || "Chart data"}
+          </caption>
+          <thead>
+            <tr>
+              <th scope="col">Point</th>
+              ${this.series.map((o) => c`<th scope="col">${o.name}</th>`)}
+            </tr>
+          </thead>
+          <tbody>
+            ${Array.from(
+      { length: this.pointCount },
+      (o, i) => c`<tr>
+                  <th scope="row">${this.labels[i] ?? `#${i + 1}`}</th>
+                  ${this.series.map(
+        (s) => c`<td>${this.format(s.values[i] ?? 0)}</td>`
+      )}
+                </tr>`
+    )}
+          </tbody>
+        </table>
+      </div>`;
+  }
+}
+n([
+  M(".plot")
+], a.prototype, "plot");
+n([
+  g()
+], a.prototype, "box");
+n([
+  g()
+], a.prototype, "active");
+n([
+  p({ type: String, reflect: !0 })
+], a.prototype, "type");
+n([
+  p({ attribute: !1 })
+], a.prototype, "series");
+n([
+  p({ attribute: !1 })
+], a.prototype, "labels");
+n([
+  p({ type: Number })
+], a.prototype, "height");
+n([
+  p({ attribute: !1 })
+], a.prototype, "format");
+n([
+  p({ type: Boolean, attribute: "no-grid" })
+], a.prototype, "noGrid");
+n([
+  p({ type: Boolean, reflect: !0, attribute: "show-table" })
+], a.prototype, "showTable");
+n([
+  p({ type: Boolean })
+], a.prototype, "smooth");
+n([
+  p({ type: String })
+], a.prototype, "label");
+A("kt-chart", a);
+export {
+  a as KtChart
+};
+//# sourceMappingURL=kt-chart.js.map