kanto-ds 1.0.0 → 1.1.0

package/dist/components/core/kt-split-button/kt-split-button.js

@@ -0,0 +1,262 @@
+import { css as f, nothing as c, html as a } from "lit";
+import { query as b, state as g, property as o } from "lit/decorators.js";
+import { classMap as y } from "lit/directives/class-map.js";
+import { K as h, d as w } from "../../../chunks/kt-element-B_jjQDhg.js";
+import { e as x } from "../../../chunks/events-Bjl5Zmmq.js";
+import { f as m, o as k, l as $, n as u } from "../../../chunks/listbox-Sm3nvsC6.js";
+import "../kt-button/kt-button.js";
+import "../kt-icon/kt-icon.js";
+import "../../overlays/kt-dropdown/kt-dropdown.js";
+var I = Object.defineProperty, i = (n, t, r, l) => {
+  for (var s = void 0, d = n.length - 1, p; d >= 0; d--)
+    (p = n[d]) && (s = p(t, r, s) || s);
+  return s && I(t, r, s), s;
+};
+const v = { small: 16, medium: 20, large: 24 };
+class e extends h {
+  constructor() {
+    super(...arguments), this.activeIndex = -1, this.items = [], this.variant = "primary", this.size = "medium", this.disabled = !1, this.icon = "", this.menuLabel = "More actions", this.preferredPlacement = "bottom", this.emptyText = "No actions", this.onOpen = () => {
+      this.moveTo(m(this.items));
+    }, this.onClose = () => {
+      const t = this.shadowRoot?.activeElement;
+      this.activeIndex = -1, t instanceof HTMLElement && t.classList.contains("item") && this.caret?.focus();
+    }, this.onMenuKeyDown = (t) => {
+      const l = {
+        ArrowDown: () => u(this.items, this.activeIndex, 1),
+        ArrowUp: () => u(this.items, this.activeIndex, -1),
+        Home: () => m(this.items),
+        End: () => $(this.items)
+      }[t.key];
+      l && (t.preventDefault(), this.moveTo(l()));
+    };
+  }
+  static {
+    this.styles = [
+      h.styles,
+      f`
+      :host {
+        display: inline-flex;
+        vertical-align: middle;
+      }
+
+      /* A hairline of the page showing through is the seam between the two
+         segments — the same trick the rest of the system uses for elevation,
+         where a border would have been. */
+      .split {
+        display: inline-flex;
+        align-items: stretch;
+        gap: var(--border-width);
+      }
+
+      .action::part(button) {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+
+      .caret::part(button) {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+
+      .menu {
+        display: flex;
+        flex-direction: column;
+        gap: var(--gap-element);
+        max-height: 208px;
+        overflow: auto;
+        scrollbar-width: thin;
+      }
+
+      .item {
+        display: flex;
+        align-items: center;
+        gap: var(--gap-button);
+        width: 100%;
+        padding: var(--padding-expand-item);
+        color: var(--text-muted);
+        font: var(--font-normal-regular);
+        text-align: left;
+        background: none;
+        border: none;
+        border-radius: var(--radius-input);
+        cursor: pointer;
+      }
+
+      .item:hover {
+        color: var(--text-body);
+        background: var(--surface-hover);
+      }
+
+      /* Inset, so the ring is never clipped by the panel it scrolls inside. */
+      .item:focus-visible {
+        outline: var(--outline-width) solid var(--color-primary-base);
+        outline-offset: calc(-1 * var(--outline-width));
+      }
+
+      .item.danger {
+        color: var(--color-danger-text);
+      }
+      .item.danger:hover {
+        color: var(--color-danger-text);
+        background: var(--color-danger-soft);
+      }
+
+      .item[aria-disabled='true'] {
+        color: var(--text-disabled);
+        cursor: not-allowed;
+      }
+      .item[aria-disabled='true']:hover {
+        color: var(--text-disabled);
+        background: none;
+      }
+
+      .empty {
+        padding: var(--padding-expand-item);
+        color: var(--text-muted);
+        font: var(--font-normal-small);
+        cursor: default;
+      }
+    `
+    ];
+  }
+  /** Whether the menu is showing. */
+  get isOpen() {
+    return this.dropdown?.isOpen ?? !1;
+  }
+  /** Opens the menu. */
+  show() {
+    this.dropdown?.show();
+  }
+  /** Closes it. */
+  hide() {
+    this.dropdown?.hide();
+  }
+  /** Either. */
+  toggle() {
+    this.dropdown?.toggle();
+  }
+  /** Moves focus to the primary segment. */
+  focus(t) {
+    this.shadowRoot?.querySelector(".action")?.focus(t);
+  }
+  row(t) {
+    return this.shadowRoot?.querySelectorAll(".item")[t] ?? null;
+  }
+  /** Lands the roving tabindex on `index` and takes focus there. */
+  async moveTo(t) {
+    t < 0 || (this.activeIndex = t, await this.updateComplete, this.row(t)?.focus());
+  }
+  choose(t) {
+    t.disabled || (this.hide(), x(this, "kt-select", { value: t.id, item: t }));
+  }
+  /**
+   * A click anywhere in the menu stops here. It originates inside this
+   * element's shadow root, so without this it would surface on the host as a
+   * `click` and be mistaken for the primary action.
+   */
+  containClick(t) {
+    t.stopPropagation();
+  }
+  /**
+   * The caret drives the panel itself rather than leaning on the click
+   * reaching `<kt-dropdown>`'s own trigger through the slot: stopping here
+   * keeps the press off the host, and leaving it to bubble would toggle twice.
+   */
+  onCaretClick(t) {
+    t.stopPropagation(), this.toggle();
+  }
+  renderItem(t, r) {
+    return a`<button
+      part="item"
+      class=${y({ item: !0, danger: t.variant === "danger" })}
+      type="button"
+      role="menuitem"
+      tabindex=${r === this.activeIndex ? 0 : -1}
+      aria-disabled=${t.disabled ? "true" : c}
+      @click=${() => this.choose(t)}
+    >
+      ${t.icon ? a`<kt-icon name=${t.icon} size=${v[this.size]}></kt-icon>` : c}
+      ${k(t)}
+    </button>`;
+  }
+  render() {
+    return a`<div class="split">
+      <!-- The icon is slotted rather than passed as \`icon\`: <kt-button> reads
+           its own text content to decide whether it is icon-only, and a <slot>
+           has none, so setting \`icon\` here would collapse it to a square. -->
+      <kt-button
+        part="action"
+        class="action"
+        variant=${this.variant}
+        size=${this.size}
+        ?disabled=${this.disabled}
+      >
+        ${this.icon ? a`<kt-icon name=${this.icon} size=${v[this.size]}></kt-icon>` : c}
+        <slot></slot>
+      </kt-button>
+
+      <kt-dropdown
+        align="end"
+        preferred-placement=${this.preferredPlacement}
+        ?disabled=${this.disabled}
+        @click=${this.containClick}
+        @kt-open=${this.onOpen}
+        @kt-close=${this.onClose}
+      >
+        <kt-button
+          slot="trigger"
+          part="caret"
+          class="caret"
+          variant=${this.variant}
+          size=${this.size}
+          icon="chevron-down"
+          label=${this.menuLabel}
+          ?disabled=${this.disabled}
+          @click=${this.onCaretClick}
+        ></kt-button>
+
+        <div slot="panel" part="menu" class="menu" role="menu" @keydown=${this.onMenuKeyDown}>
+          ${this.items.length > 0 ? this.items.map((t, r) => this.renderItem(t, r)) : a`<div class="empty">${this.emptyText}</div>`}
+        </div>
+      </kt-dropdown>
+    </div>`;
+  }
+}
+i([
+  b("kt-dropdown")
+], e.prototype, "dropdown");
+i([
+  b(".caret")
+], e.prototype, "caret");
+i([
+  g()
+], e.prototype, "activeIndex");
+i([
+  o({ attribute: !1 })
+], e.prototype, "items");
+i([
+  o({ type: String, reflect: !0 })
+], e.prototype, "variant");
+i([
+  o({ type: String, reflect: !0 })
+], e.prototype, "size");
+i([
+  o({ type: Boolean, reflect: !0 })
+], e.prototype, "disabled");
+i([
+  o({ type: String })
+], e.prototype, "icon");
+i([
+  o({ type: String, attribute: "menu-label" })
+], e.prototype, "menuLabel");
+i([
+  o({ type: String, attribute: "preferred-placement" })
+], e.prototype, "preferredPlacement");
+i([
+  o({ type: String, attribute: "empty-text" })
+], e.prototype, "emptyText");
+w("kt-split-button", e);
+export {
+  e as KtSplitButton
+};
+//# sourceMappingURL=kt-split-button.js.map

package/dist/components/core/kt-split-button/kt-split-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kt-split-button.js","sources":["../../../../src/components/core/kt-split-button/kt-split-button.ts"],"sourcesContent":["import { css, html, nothing, type TemplateResult } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit } from '#internal/events';\nimport {\n  firstEnabledIndex,\n  lastEnabledIndex,\n  nextEnabledIndex,\n  optionLabel,\n  type KtOption,\n} from '#internal/listbox';\nimport type { KtButtonSize, KtButtonVariant } from '../kt-button/kt-button.js';\nimport type { KtDropdown, KtDropdownPlacement } from '../../overlays/kt-dropdown/kt-dropdown.js';\nimport '../kt-button/kt-button.js';\nimport '../kt-icon/kt-icon.js';\nimport '../../overlays/kt-dropdown/kt-dropdown.js';\n\n/** A row of the menu. `danger` tints it, for the one action to think twice about. */\nexport interface KtSplitButtonItem extends KtOption {\n  readonly icon?: string;\n  readonly variant?: 'default' | 'danger';\n}\n\n/** Icon size per button size, matching `<kt-button>`. */\nconst ICON_SIZE: Record<KtButtonSize, number> = { small: 16, medium: 20, large: 24 };\n\n/**\n * One button carrying a menu of related actions.\n *\n * The body runs the action a user wants nine times out of ten and emits a\n * plain `click`; the caret opens the rest. Reach for it when the alternatives\n * are variations on the same action — \"Save and close\", \"Save a copy\" — and\n * for an unrelated set of actions use `<kt-dropdown>` instead, which has no\n * default action to promote.\n *\n * A caret press never reads as a `click` on the host, so a single `click`\n * listener means the primary action and nothing else.\n *\n * @element kt-split-button\n *\n * @slot - The primary action's label.\n *\n * @csspart action - The primary `<kt-button>`.\n * @csspart caret - The `<kt-button>` that opens the menu.\n * @csspart menu - The list of rows.\n * @csspart item - A menu row.\n *\n * @fires kt-select - A menu row was chosen. `detail: { value, item }`.\n * @fires kt-open - The menu opened.\n * @fires kt-close - The menu closed.\n *\n * @example\n * ```html\n * <kt-split-button>Save</kt-split-button>\n * ```\n * ```js\n * el.items = [\n *   { id: 'close', label: 'Save and close' },\n *   { id: 'discard', label: 'Discard', variant: 'danger' },\n * ];\n * el.addEventListener('kt-select', (e) => run(e.detail.value));\n * ```\n */\nexport class KtSplitButton extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: inline-flex;\n        vertical-align: middle;\n      }\n\n      /* A hairline of the page showing through is the seam between the two\n         segments — the same trick the rest of the system uses for elevation,\n         where a border would have been. */\n      .split {\n        display: inline-flex;\n        align-items: stretch;\n        gap: var(--border-width);\n      }\n\n      .action::part(button) {\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0;\n      }\n\n      .caret::part(button) {\n        border-top-left-radius: 0;\n        border-bottom-left-radius: 0;\n      }\n\n      .menu {\n        display: flex;\n        flex-direction: column;\n        gap: var(--gap-element);\n        max-height: 208px;\n        overflow: auto;\n        scrollbar-width: thin;\n      }\n\n      .item {\n        display: flex;\n        align-items: center;\n        gap: var(--gap-button);\n        width: 100%;\n        padding: var(--padding-expand-item);\n        color: var(--text-muted);\n        font: var(--font-normal-regular);\n        text-align: left;\n        background: none;\n        border: none;\n        border-radius: var(--radius-input);\n        cursor: pointer;\n      }\n\n      .item:hover {\n        color: var(--text-body);\n        background: var(--surface-hover);\n      }\n\n      /* Inset, so the ring is never clipped by the panel it scrolls inside. */\n      .item:focus-visible {\n        outline: var(--outline-width) solid var(--color-primary-base);\n        outline-offset: calc(-1 * var(--outline-width));\n      }\n\n      .item.danger {\n        color: var(--color-danger-text);\n      }\n      .item.danger:hover {\n        color: var(--color-danger-text);\n        background: var(--color-danger-soft);\n      }\n\n      .item[aria-disabled='true'] {\n        color: var(--text-disabled);\n        cursor: not-allowed;\n      }\n      .item[aria-disabled='true']:hover {\n        color: var(--text-disabled);\n        background: none;\n      }\n\n      .empty {\n        padding: var(--padding-expand-item);\n        color: var(--text-muted);\n        font: var(--font-normal-small);\n        cursor: default;\n      }\n    `,\n  ];\n\n  @query('kt-dropdown')\n  private dropdown?: KtDropdown;\n\n  @query('.caret')\n  private caret?: HTMLElement & { focus(): void };\n\n  /** The row the roving tabindex currently sits on. */\n  @state()\n  private activeIndex = -1;\n\n  /** The menu rows. */\n  @property({ attribute: false })\n  items: readonly KtSplitButtonItem[] = [];\n\n  /** Visual variant, forwarded to both segments. */\n  @property({ type: String, reflect: true })\n  variant: KtButtonVariant = 'primary';\n\n  /** Height, forwarded to both segments. */\n  @property({ type: String, reflect: true })\n  size: KtButtonSize = 'medium';\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** Lucide icon name for the primary segment. */\n  @property({ type: String })\n  icon = '';\n\n  /** Accessible name of the caret, which has no text of its own. */\n  @property({ type: String, attribute: 'menu-label' })\n  menuLabel = 'More actions';\n\n  /** Where to put the menu when there is room on both sides. */\n  @property({ type: String, attribute: 'preferred-placement' })\n  preferredPlacement: KtDropdownPlacement = 'bottom';\n\n  @property({ type: String, attribute: 'empty-text' })\n  emptyText = 'No actions';\n\n  /** Whether the menu is showing. */\n  get isOpen(): boolean {\n    return this.dropdown?.isOpen ?? false;\n  }\n\n  /** Opens the menu. */\n  show(): void {\n    this.dropdown?.show();\n  }\n\n  /** Closes it. */\n  hide(): void {\n    this.dropdown?.hide();\n  }\n\n  /** Either. */\n  toggle(): void {\n    this.dropdown?.toggle();\n  }\n\n  /** Moves focus to the primary segment. */\n  override focus(options?: FocusOptions): void {\n    this.shadowRoot?.querySelector<HTMLElement>('.action')?.focus(options);\n  }\n\n  private row(index: number): HTMLElement | null {\n    return this.shadowRoot?.querySelectorAll<HTMLElement>('.item')[index] ?? null;\n  }\n\n  /** Lands the roving tabindex on `index` and takes focus there. */\n  private async moveTo(index: number): Promise<void> {\n    if (index < 0) return;\n    this.activeIndex = index;\n    await this.updateComplete;\n    this.row(index)?.focus();\n  }\n\n  private onOpen = (): void => {\n    void this.moveTo(firstEnabledIndex(this.items));\n  };\n\n  /**\n   * Returns focus to the caret, but only when it was inside the menu — an\n   * outside click already moved it somewhere the user chose, and pulling it\n   * back here would undo that.\n   */\n  private onClose = (): void => {\n    const active = this.shadowRoot?.activeElement;\n    this.activeIndex = -1;\n    if (active instanceof HTMLElement && active.classList.contains('item')) this.caret?.focus();\n  };\n\n  private onMenuKeyDown = (event: KeyboardEvent): void => {\n    const moves: Record<string, () => number> = {\n      ArrowDown: () => nextEnabledIndex(this.items, this.activeIndex, 1),\n      ArrowUp: () => nextEnabledIndex(this.items, this.activeIndex, -1),\n      Home: () => firstEnabledIndex(this.items),\n      End: () => lastEnabledIndex(this.items),\n    };\n\n    const move = moves[event.key];\n    if (!move) return;\n\n    event.preventDefault();\n    void this.moveTo(move());\n  };\n\n  private choose(item: KtSplitButtonItem): void {\n    if (item.disabled) return;\n    this.hide();\n    emit(this, 'kt-select', { value: item.id, item });\n  }\n\n  /**\n   * A click anywhere in the menu stops here. It originates inside this\n   * element's shadow root, so without this it would surface on the host as a\n   * `click` and be mistaken for the primary action.\n   */\n  private containClick(event: Event): void {\n    event.stopPropagation();\n  }\n\n  /**\n   * The caret drives the panel itself rather than leaning on the click\n   * reaching `<kt-dropdown>`'s own trigger through the slot: stopping here\n   * keeps the press off the host, and leaving it to bubble would toggle twice.\n   */\n  private onCaretClick(event: Event): void {\n    event.stopPropagation();\n    this.toggle();\n  }\n\n  private renderItem(item: KtSplitButtonItem, index: number): TemplateResult {\n    return html`<button\n      part=\"item\"\n      class=${classMap({ item: true, danger: item.variant === 'danger' })}\n      type=\"button\"\n      role=\"menuitem\"\n      tabindex=${index === this.activeIndex ? 0 : -1}\n      aria-disabled=${item.disabled ? 'true' : nothing}\n      @click=${() => this.choose(item)}\n    >\n      ${\n        item.icon\n          ? html`<kt-icon name=${item.icon} size=${ICON_SIZE[this.size]}></kt-icon>`\n          : nothing\n      }\n      ${optionLabel(item)}\n    </button>`;\n  }\n\n  override render(): TemplateResult {\n    return html`<div class=\"split\">\n      <!-- The icon is slotted rather than passed as \\`icon\\`: <kt-button> reads\n           its own text content to decide whether it is icon-only, and a <slot>\n           has none, so setting \\`icon\\` here would collapse it to a square. -->\n      <kt-button\n        part=\"action\"\n        class=\"action\"\n        variant=${this.variant}\n        size=${this.size}\n        ?disabled=${this.disabled}\n      >\n        ${\n          this.icon\n            ? html`<kt-icon name=${this.icon} size=${ICON_SIZE[this.size]}></kt-icon>`\n            : nothing\n        }\n        <slot></slot>\n      </kt-button>\n\n      <kt-dropdown\n        align=\"end\"\n        preferred-placement=${this.preferredPlacement}\n        ?disabled=${this.disabled}\n        @click=${this.containClick}\n        @kt-open=${this.onOpen}\n        @kt-close=${this.onClose}\n      >\n        <kt-button\n          slot=\"trigger\"\n          part=\"caret\"\n          class=\"caret\"\n          variant=${this.variant}\n          size=${this.size}\n          icon=\"chevron-down\"\n          label=${this.menuLabel}\n          ?disabled=${this.disabled}\n          @click=${this.onCaretClick}\n        ></kt-button>\n\n        <div slot=\"panel\" part=\"menu\" class=\"menu\" role=\"menu\" @keydown=${this.onMenuKeyDown}>\n          ${\n            this.items.length > 0\n              ? this.items.map((item, index) => this.renderItem(item, index))\n              : html`<div class=\"empty\">${this.emptyText}</div>`\n          }\n        </div>\n      </kt-dropdown>\n    </div>`;\n  }\n}\n\ndefineElement('kt-split-button', KtSplitButton);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-split-button': KtSplitButton;\n  }\n}\n"],"names":["ICON_SIZE","KtSplitButton","KtElement","firstEnabledIndex","active","event","move","nextEnabledIndex","lastEnabledIndex","css","options","index","item","emit","html","classMap","nothing","optionLabel","__decorateClass","query","state","property","defineElement"],"mappings":"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"}

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

@@ -0,0 +1,62 @@
+import { type SVGTemplateResult } from 'lit';
+import type { Format, KtMark, KtSeries, Measure, PlotBox } from './model.js';
+import { type Ticks } from './scale.js';
+/**
+ * Line, area and bar charts: one category axis, one value axis.
+ *
+ * The layout is computed once per render and every position is read from it,
+ * so the marks, the labels, the tooltip and the hit test cannot disagree about
+ * where a category is.
+ */
+export interface CartesianInput {
+    readonly width: number;
+    readonly height: number;
+    readonly series: readonly KtSeries[];
+    readonly hidden: ReadonlySet<number>;
+    readonly labels: readonly string[];
+    /** The chart's mark; a series can override it with its own `type`. */
+    readonly type: KtMark;
+    readonly stacked: boolean;
+    readonly horizontal: boolean;
+    readonly min: number | null;
+    readonly max: number | null;
+    readonly noAxis: boolean;
+    readonly measure: Measure;
+    readonly format: Format;
+}
+export interface CartesianLayout {
+    readonly box: PlotBox;
+    readonly ticks: Ticks;
+    /** How many categories there are. */
+    readonly count: number;
+    readonly horizontal: boolean;
+    /** Categories are bands rather than points — true as soon as a bar is shown. */
+    readonly banded: boolean;
+    /** The mark each series is drawn as, by series index. */
+    readonly marks: readonly KtMark[];
+    /** Indices of the series that are not hidden. */
+    readonly visible: readonly number[];
+}
+export declare function cartesianLayout(input: CartesianInput): CartesianLayout;
+/** Where category `index` sits along its axis, in px. */
+export declare function categoryCentre(layout: CartesianLayout, index: number): number;
+/** Where `value` sits along the value axis, in px. */
+export declare function valuePosition(layout: CartesianLayout, value: number): number;
+/** The category under a pointer at `x`, `y`: the band it is in, or the nearest sample. */
+export declare function categoryAt(layout: CartesianLayout, x: number, y: number): number;
+export interface CartesianView extends CartesianInput {
+    readonly layout: CartesianLayout;
+    /** The active category, or -1. */
+    readonly active: number;
+    readonly smooth: boolean;
+    readonly noGrid: boolean;
+    readonly colorOf: (series: number) => string;
+    /** Prefix for ids inside the shadow root, so two charts never share a gradient. */
+    readonly idPrefix: string;
+}
+export declare function renderCartesian(view: CartesianView): SVGTemplateResult;
+/** Where the tooltip for the active category points: at its tallest mark. */
+export declare function tooltipAnchor(view: CartesianView): {
+    x: number;
+    y: number;
+};

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

@@ -0,0 +1,41 @@
+/**
+ * SVG path geometry for the chart's marks. Every function is pure and writes
+ * coordinates rounded to two decimals, so paths stay short and comparable.
+ */
+export type Point = readonly [number, number];
+/** One cubic Bézier piece of a curve. */
+export interface Segment {
+    readonly from: Point;
+    readonly c1: Point;
+    readonly c2: Point;
+    readonly to: Point;
+}
+export declare const TAU: number;
+export declare const round: (value: number) => number;
+/** Straight segments through `points`. `move` false continues an open path. */
+export declare function linearPath(points: readonly Point[], move?: boolean): string;
+/**
+ * A monotone cubic through `points` (Fritsch–Carlson).
+ *
+ * Between two samples the curve stays within their range, so it never draws a
+ * peak or a dip that is not in the data — the failure of the cardinal splines
+ * most charts use. Needs at least three points; fewer have nothing to smooth.
+ */
+export declare function monotoneSegments(points: readonly Point[]): Segment[];
+/** A monotone curve as a path, or straight segments when there is nothing to smooth. */
+export declare function monotonePath(points: readonly Point[], move?: boolean): string;
+/** The point at `radius` and `angle` from a centre; 0 is twelve o'clock, clockwise. */
+export declare function polar(cx: number, cy: number, radius: number, angle: number): Point;
+/**
+ * A slice from `start` to `end`: a wedge to the centre when `inner` is 0, an
+ * annular sector otherwise. A whole turn is drawn as circles (and a hole, with
+ * `fill-rule="evenodd"`) because a single SVG arc cannot close on itself.
+ */
+export declare function arcPath(cx: number, cy: number, inner: number, outer: number, start: number, end: number): string;
+/** Which end of a bar is rounded. The baseline end always stays square. */
+export type Tip = 'top' | 'bottom' | 'left' | 'right' | 'none';
+/**
+ * A bar, rounded at its tip only. A bar rounded at the baseline too floats
+ * above the axis instead of standing on it.
+ */
+export declare function barPath(x: number, y: number, width: number, height: number, radius: number, tip: Tip): string;

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

@@ -1,25 +1,20 @@
 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;
-}
+import type { Format, KtChartType, KtSeries } from './model.js';
+export type { KtChartType, KtMark, KtPoint, KtSeries } from './model.js';
 /**
- * A small chart, drawn from the token layer.
+ * A 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.
+ * Line, area and bar — stacked, sideways or mixed — plus scatter, bubble,
+ * pie, doughnut, polar area and radar, all in Kanto's voice: the eight
+ * categorical hues in fixed order, one value axis, recessive grid, and the
+ * data always available as a table.
  *
  * **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.
+ * Slices take the same order by slice.
  *
  * **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
@@ -29,11 +24,14 @@ export interface KtSeries {
  * @element kt-chart
  *
  * @csspart svg - The plot.
- * @csspart legend - The legend, when there are two or more series.
+ * @csspart legend - The legend.
  * @csspart table - The data table.
  *
- * @fires kt-point-hover - The hovered index changed. `detail: { index }`,
- *   with `index` of -1 when the pointer leaves.
+ * @fires kt-point-hover - The active point changed. `detail: { index, series }`;
+ *   `index` is -1 when nothing is active, `series` -1 when the index spans
+ *   every series.
+ * @fires kt-series-toggle - A legend item was pressed. `detail: { series, hidden }`.
+ *   Cancelable.
  *
  * @example
  * ```js
@@ -47,49 +45,95 @@ export declare class KtChart extends KtElement {
     private observer?;
     private readonly tableId;
     private box;
+    /** The active category, point or slice, or -1. */
     private active;
+    /** The series the active point belongs to, for scatter and bubble; -1 otherwise. */
+    private activeSeries;
+    /**
+     * Series hidden from the legend — or slices, for pie, doughnut and polar
+     * area. Not `hidden`: that is HTMLElement's, and shadowing it would stop
+     * `chart.hidden = true` from hiding the chart.
+     */
+    private hiddenSeries;
     type: KtChartType;
     series: readonly KtSeries[];
-    /** One label per index along the x axis. */
+    /** One label per index along the category axis, or per slice or spoke. */
     labels: readonly string[];
     height: number;
-    /** Formats a value for the tooltip and the table. */
-    format: (value: number) => string;
-    /** Horizontal grid lines. */
+    /** Formats a value for the value axis, the tooltip and the table. */
+    format: Format;
+    /** Formats the x value of a scatter or bubble point. */
+    formatX: Format;
+    /** Grid lines. */
     noGrid: boolean;
+    /** Hides the value axis labels, for a chart too small to carry them. */
+    noAxis: boolean;
     /** Puts the data table on screen instead of only in the accessibility tree. */
     showTable: boolean;
     /**
-     * Smooths the line through a monotone spline.
+     * Smooths lines and areas 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;
+    /** Bars, and areas, on top of one another instead of side by side. */
+    stacked: boolean;
+    /** Bars along the horizontal axis, with the categories down the left. */
+    horizontal: boolean;
+    /** Pins the bottom of the value axis. */
+    min: number | null;
+    /** Pins the top of the value axis. */
+    max: number | null;
+    /** Names the total in the middle of a doughnut. */
+    centerLabel: string;
+    /** Names the sum in a stacked chart's tooltip and table. */
+    totalLabel: string;
     /** Accessible name. Say what the chart shows. */
     label: string;
     connectedCallback(): void;
     firstUpdated(): void;
     disconnectedCallback(): void;
-    private colorFor;
+    willUpdate(changed: Map<PropertyKey, unknown>): void;
+    private get family();
     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 colorOf;
+    private measureContext;
+    /** Text width in the axis font. Estimated where there is no canvas to ask. */
+    private measure;
+    private get cartesianView();
+    private get pointView();
+    /** Pie, doughnut and polar area: one series, whose slices are the labels. */
+    private get sliced();
+    private sliceColor;
+    private get radialView();
+    /** Whether there is anything to draw. */
+    private get hasData();
+    private setActive;
     private onPointerMove;
     private onPointerLeave;
-    private renderGrid;
-    private renderBars;
-    private renderLines;
-    private renderAxis;
+    /** How many positions the keyboard walks through, in order. */
+    private get stops();
+    /**
+     * Arrows walk the points, Home and End jump to the ends, Escape lets go.
+     * Every move emits `kt-point-hover` and opens the tooltip, which is a live
+     * region, so a keyboard user hears what a pointer user sees.
+     */
+    private onKeyDown;
+    /**
+     * Scatter and bubble: left and right walk the current series in x order,
+     * up and down move to the neighbouring visible series.
+     */
+    private onPointKeyDown;
+    private toggle;
+    private renderMarks;
+    private get tooltip();
     private renderTooltip;
+    private renderLegend;
+    private renderPointTable;
+    private renderSliceTable;
+    private renderTable;
     render(): TemplateResult;
 }
 declare global {