@expressivecss/expressive 0.14.1 → 0.16.0

package/dist/js/chunks/chunk-752ADW4M.mjs

@@ -0,0 +1,225 @@
+import {
+  LineChart,
+  affix,
+  cellValue,
+  morph,
+  numberFormat,
+  pace,
+  tickText
+} from "./chunk-ZM3XBHWV.mjs";
+import {
+  svgNode
+} from "./chunk-ZVLOUDIJ.mjs";
+
+// src/ts/components/scatterChart.ts
+var dots = (marks) => marks.map(({ x, y }) => `M${x},${y}h0`).join("");
+var place = ({ row, series }) => `${row} ${series.column}`;
+var span = (text) => Object.assign(document.createElement("span"), { textContent: text });
+var ms = (time) => parseFloat(time) * (time.trim().endsWith("ms") ? 1 : 1e3);
+function sized(path, size, was, timing) {
+  path.style.setProperty("--scatter-chart-size", `${size}`);
+  if (!timing || !was || was.size === size) return;
+  path.animate({ "--scatter-chart-size": [`${was.size}`, `${size}`] }, { duration: ms(timing.dur), easing: `cubic-bezier(${timing.keySplines})` });
+}
+var ScatterChart = class extends LineChart {
+  get _type() {
+    return "scatter-chart";
+  }
+  get _seriesFrom() {
+    return 2;
+  }
+  get _seriesTo() {
+    return this._bubble ? -1 : void 0;
+  }
+  get _bubble() {
+    return this.el.classList.contains("bubble");
+  }
+  static get defaults() {
+    return { ...LineChart.defaults, xMin: null, xMax: null };
+  }
+  /**
+   * Reads each row's x value into `_xs` and its size into `_sizes`, which
+   * the scales and the points use, and leaves out the values of rows
+   * without either, so they neither draw nor stretch a scale. Nothing stacks.
+   */
+  _arrange(series) {
+    const xs = this._xs = this._rows.map((row) => cellValue(row.cells[1]));
+    const sizes = this._sizes = this._rows.map((row) => this._size(row));
+    for (const each of series) {
+      each.values = each.tops = each.values.map((value, row) => xs[row] === null || sizes[row] === null ? null : value);
+    }
+  }
+  /** A row's size: 1 without .bubble, or its last cell's value, null unless positive. */
+  _size(row) {
+    if (!this._bubble) return 1;
+    const size = cellValue(row.cells[this._header.length - 1]) ?? 0;
+    return size > 0 ? size : null;
+  }
+  get _count() {
+    return this._marks?.length ?? 0;
+  }
+  /** Highlights one point, numbered as `_marks` lists them. Pass -1 to hide the tooltip. */
+  show(index) {
+    if (!this._tooltip || index === this.activeIndex) return;
+    this.activeIndex = index;
+    const mark = this._marks[index];
+    this._cursor.hidden = this._tooltip.hidden = !mark;
+    if (mark) this._fill(mark);
+  }
+  /**
+   * Puts the marker on a point, at a bubble's size, and fills the tooltip
+   * beside it: the row, its x header and text, the series and its text, and
+   * with .bubble the size header and text, as the author wrote them. Past
+   * the middle the tooltip opens back over the plot.
+   */
+  _fill({ row, series, x, y, size }) {
+    this._cursor.dataset.series = series.color;
+    this._cursor.style.setProperty("--scatter-chart-size", `${size}`);
+    for (const part of [this._cursor, this._tooltip]) Object.assign(part.style, { left: `${x}%`, top: `${y}%` });
+    this._tooltip.classList.toggle("end", x > 50);
+    const [title, name] = [document.createElement("strong"), span(series.name)];
+    title.textContent = this.labels[row];
+    name.dataset.series = series.color;
+    const sizeText = this._bubble ? this._cellText(row, this._header.length - 1) : [];
+    this._tooltip.replaceChildren(title, ...this._cellText(row, 1), name, span(series.text[row]), ...sizeText);
+  }
+  /** A column's header, without a swatch since it names no series, and the row's text in it. */
+  _cellText(row, column) {
+    const header = span(this._header[column].textContent.trim());
+    header.className = "x";
+    return [header, span(this._rows[row].cells[column]?.textContent.trim() ?? "")];
+  }
+  /** The point nearest the pointer, or -1 with none. */
+  _indexAt(e) {
+    const [plot, box] = [this._plot, this._plot.getBoundingClientRect()];
+    const away = ({ x, y }) => Math.hypot(
+      box.left + plot.clientLeft + x / 100 * plot.clientWidth - e.clientX,
+      box.top + plot.clientTop + y / 100 * plot.clientHeight - e.clientY
+    );
+    return this._marks.reduce((nearest, mark, i) => nearest < 0 || away(mark) < away(this._marks[nearest]) ? i : nearest, -1);
+  }
+  /**
+   * Steps through the points in table order. The arrows keep their meaning
+   * in a right-to-left chart, since table order is no direction on screen.
+   */
+  _keyTarget(key) {
+    if (key === "Escape") return this.activeIndex < 0 ? void 0 : -1;
+    const last = this._marks.length - 1;
+    const step = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 }[key];
+    if (step) return Math.min(last, Math.max(0, this.activeIndex + step));
+    return { Home: 0, End: last }[key];
+  }
+  _read() {
+    [this._drawn, this._marks] = [this._marks ?? [], []];
+    super._read();
+    if (!this.series.length) return;
+    this._xFit = this._xScale();
+    this._xAffix = affix(this._rows.map((row) => row.cells[1]));
+  }
+  /** The x scale over the rows with a point, between `xMin` and `xMax` where they are set. */
+  _xScale() {
+    const [low, high] = this._xRange();
+    const [min, max] = [this._xEnd("xMin"), this._xEnd("xMax")];
+    return this._fit(min ?? low, max ?? high, [min !== null, max !== null]);
+  }
+  /** The x values of the rows with a point, with 10% of their span to spare each side. */
+  _xRange() {
+    const xs = this._xs.filter((_, row) => this._hasPoint(row));
+    if (!xs.length) return [-1, 1];
+    const [low, high] = [xs.reduce((a, b) => Math.min(a, b)), xs.reduce((a, b) => Math.max(a, b))];
+    const pad = (high - low) * 0.1 || 1;
+    return [low - pad, high + pad];
+  }
+  /** An x scale end from its data attribute or option, or null. */
+  _xEnd(name) {
+    return this._number(name) ?? this.options[name] ?? null;
+  }
+  /** A value's distance across the plot from its inline start, in percent. */
+  _xAt(value) {
+    const { min, max } = this._xFit;
+    const x = (value - min) / (max - min || 1) * 100;
+    return this._reversed ? 100 - x : x;
+  }
+  /** Whether any series shown draws a point in a row. */
+  _hasPoint(row) {
+    return this.series.some((series) => series.values[row] !== null);
+  }
+  /** The points, each diameter the square root of its row's share of the largest size drawn, so areas follow sizes. */
+  _layout() {
+    const largest = this._sizes.reduce((most, size, row) => this._hasPoint(row) ? Math.max(most, size) : most, 0);
+    return this.labels.flatMap((_, row) => this.series.filter((series) => series.values[row] !== null).map((series) => ({
+      row,
+      series,
+      x: this._xAt(this._xs[row]),
+      y: series.y(series.values[row]),
+      size: Math.sqrt(this._sizes[row] / largest)
+    })));
+  }
+  /** One group per series, its points round caps on zero-length lines, so CSS sizes them in pixels. */
+  _draw() {
+    this._marks = this._layout();
+    const svg = svgNode("svg", {
+      viewBox: "0 0 100 100",
+      preserveAspectRatio: "none",
+      "aria-hidden": "true",
+      focusable: "false"
+    });
+    const timing = this._before.length ? pace(this.el) : null;
+    const was = new Map(this._drawn.map((old) => [place(old), old]));
+    svg.append(...this.series.map((series) => this._group(series, timing, was)));
+    return svg;
+  }
+  /**
+   * A series' points, in one path, or with .bubble one path each, largest
+   * first so smaller bubbles stay on top.
+   */
+  _group(series, timing, was) {
+    const group = svgNode("g", {
+      class: `scatter-chart-series ${series.className}`.trim(),
+      "data-series": series.color
+    });
+    const marks = this._marks.filter((mark) => mark.series === series);
+    const sets = this._bubble ? marks.sort((a, b) => b.size - a.size).map((mark) => [mark]) : [marks];
+    group.append(...sets.map((set) => this._pointPath(set, timing, was)));
+    return group;
+  }
+  /**
+   * A path of points. After update() each moves from where its row's point
+   * in the same column was drawn, or appears where it is.
+   */
+  _pointPath(marks, timing, was) {
+    const path = svgNode("path", { class: "scatter-chart-points", d: dots(marks) });
+    if (timing) morph(path, dots(marks.map((mark) => was.get(place(mark)) ?? mark)), timing);
+    if (this._bubble) sized(path, marks[0].size, was.get(place(marks[0])), timing);
+    return path;
+  }
+  /** With .axis, the y scale's labels, and the x scale's below the plot with a grid line at each. */
+  _axes() {
+    return this._axis ? [...super._axes(), this._xAxis()] : [];
+  }
+  _xAxis() {
+    const axis = document.createElement("ol");
+    axis.className = "scatter-chart-axis x";
+    axis.setAttribute("aria-hidden", "true");
+    const number = numberFormat(this.el, { notation: "compact", maximumSignificantDigits: 3 });
+    for (const tick of this._xFit.ticks) {
+      const li = document.createElement("li");
+      const label = document.createElement("span");
+      label.textContent = tickText(number, tick, this._xAffix);
+      li.style.setProperty("--at", `${this._xAt(tick)}%`);
+      li.append(label);
+      axis.append(li);
+    }
+    return axis;
+  }
+  /** The legend only: the rows have no labels along an axis. */
+  _guides() {
+    return this._legend();
+  }
+};
+ScatterChart.key = "Expressive_ScatterChart";
+
+export {
+  ScatterChart
+};
+//# sourceMappingURL=chunk-752ADW4M.mjs.map

package/dist/js/chunks/chunk-752ADW4M.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/components/scatterChart.ts"],
+  "sourcesContent": ["import { svgNode } from '../core/utils';\nimport { LineChart, LineChartOptions, ChartScale, Series, affix, cellValue, morph, numberFormat, pace, tickText } from './lineChart';\n\nexport interface ScatterChartOptions extends LineChartOptions {\n  /**\n   * Lowest value on the x axis. Defaults to the data minimum less 10% of\n   * the range. Overridden by `data-x-min` on the chart.\n   */\n  xMin: number | null;\n  /**\n   * Highest value on the x axis. Defaults to the data maximum plus 10% of\n   * the range. Overridden by `data-x-max` on the chart.\n   */\n  xMax: number | null;\n}\n\n/**\n * A drawn point: its row and series, where it sits in the plot, in percent,\n * and its diameter as a share of the largest bubble's.\n */\ninterface Mark {\n  row: number;\n  series: Series;\n  x: number;\n  y: number;\n  size: number;\n}\n\n/** Points as path data: round caps on zero-length lines. */\nconst dots = (marks: Mark[]) => marks.map(({ x, y }) => `M${x},${y}h0`).join('');\n\n/** A point's row and series column, which update() matches old and new points by. */\nconst place = ({ row, series }: Mark) => `${row} ${series.column}`;\n\n/** A tooltip line part. */\nconst span = (text: string) => Object.assign(document.createElement('span'), { textContent: text });\n\n/** A CSS time, such as 400ms or 0.4s, in milliseconds. */\nconst ms = (time: string) => parseFloat(time) * (time.trim().endsWith('ms') ? 1 : 1000);\n\n/**\n * Sizes a bubble, and with motion timing grows or shrinks it from its old\n * point's size. The Web Animations API, since SVG animation cannot reach a\n * size that CSS computes from a token.\n */\nfunction sized(path: SVGElement, size: number, was: Mark | undefined, timing: ReturnType<typeof pace>) {\n  path.style.setProperty('--scatter-chart-size', `${size}`);\n  if (!timing || !was || was.size === size) return;\n  path.animate({ '--scatter-chart-size': [`${was.size}`, `${size}`] }, { duration: ms(timing.dur), easing: `cubic-bezier(${timing.keySplines})` });\n}\n\n/**\n * Scatter chart. It reads its <table> like LineChart, but the first value\n * column is the x axis: each row draws one point per later column, at the\n * row's x value and that column's y value. A row without an x value, or a\n * cell without a y value, draws no point.\n *\n * With `.bubble`, the last column sizes each row's points, so their areas\n * follow its values, and a row without a positive size draws no point.\n *\n * Call `update()` after changing the table, or start it with `watch` or\n * `data-watch`.\n */\nexport class ScatterChart extends LineChart {\n  // No initializers: LineChart's constructor draws before they would run.\n  /** Each row's x value, or null. */\n  private _xs: (number | null)[];\n  /** Each row's size: 1 without .bubble, or the last cell's value, null unless positive. */\n  private _sizes: (number | null)[];\n  /** The x scale. */\n  private _xFit: ChartScale;\n  /** The signs around the x column's numbers, which its axis labels repeat. */\n  private _xAffix: [string, string];\n  /** The drawn points, row by row and within a row by series. */\n  private _marks: Mark[];\n  /** During update(), the points drawn before it, which the new ones move from. */\n  private _drawn: Mark[];\n\n  protected get _type() {\n    return 'scatter-chart';\n  }\n\n  protected get _seriesFrom() {\n    return 2;\n  }\n\n  protected get _seriesTo() {\n    return this._bubble ? -1 : undefined;\n  }\n\n  private get _bubble() {\n    return this.el.classList.contains('bubble');\n  }\n\n  static get defaults(): ScatterChartOptions {\n    return { ...LineChart.defaults, xMin: null, xMax: null };\n  }\n\n  static key = 'Expressive_ScatterChart';\n\n  /**\n   * Reads each row's x value into `_xs` and its size into `_sizes`, which\n   * the scales and the points use, and leaves out the values of rows\n   * without either, so they neither draw nor stretch a scale. Nothing stacks.\n   */\n  protected _arrange(series: Series[]) {\n    const xs = (this._xs = this._rows.map((row) => cellValue(row.cells[1])));\n    const sizes = (this._sizes = this._rows.map((row) => this._size(row)));\n    for (const each of series) {\n      each.values = each.tops = each.values.map((value, row) => (xs[row] === null || sizes[row] === null ? null : value));\n    }\n  }\n\n  /** A row's size: 1 without .bubble, or its last cell's value, null unless positive. */\n  private _size(row: HTMLTableRowElement) {\n    if (!this._bubble) return 1;\n    const size = cellValue(row.cells[this._header.length - 1]) ?? 0;\n    return size > 0 ? size : null;\n  }\n\n  protected get _count() {\n    return this._marks?.length ?? 0;\n  }\n\n  /** Highlights one point, numbered as `_marks` lists them. Pass -1 to hide the tooltip. */\n  show(index: number) {\n    if (!this._tooltip || index === this.activeIndex) return;\n    this.activeIndex = index;\n    const mark = this._marks[index];\n    this._cursor.hidden = this._tooltip.hidden = !mark;\n    if (mark) this._fill(mark);\n  }\n\n  /**\n   * Puts the marker on a point, at a bubble's size, and fills the tooltip\n   * beside it: the row, its x header and text, the series and its text, and\n   * with .bubble the size header and text, as the author wrote them. Past\n   * the middle the tooltip opens back over the plot.\n   */\n  private _fill({ row, series, x, y, size }: Mark) {\n    this._cursor.dataset.series = series.color;\n    this._cursor.style.setProperty('--scatter-chart-size', `${size}`);\n    for (const part of [this._cursor, this._tooltip]) Object.assign(part.style, { left: `${x}%`, top: `${y}%` });\n    this._tooltip.classList.toggle('end', x > 50);\n    const [title, name] = [document.createElement('strong'), span(series.name)];\n    title.textContent = this.labels[row];\n    name.dataset.series = series.color;\n    const sizeText = this._bubble ? this._cellText(row, this._header.length - 1) : [];\n    this._tooltip.replaceChildren(title, ...this._cellText(row, 1), name, span(series.text[row]), ...sizeText);\n  }\n\n  /** A column's header, without a swatch since it names no series, and the row's text in it. */\n  private _cellText(row: number, column: number) {\n    const header = span(this._header[column].textContent.trim());\n    header.className = 'x';\n    return [header, span(this._rows[row].cells[column]?.textContent.trim() ?? '')];\n  }\n\n  /** The point nearest the pointer, or -1 with none. */\n  protected _indexAt(e: PointerEvent) {\n    const [plot, box] = [this._plot, this._plot.getBoundingClientRect()];\n    const away = ({ x, y }: Mark) => Math.hypot(\n      box.left + plot.clientLeft + (x / 100) * plot.clientWidth - e.clientX,\n      box.top + plot.clientTop + (y / 100) * plot.clientHeight - e.clientY);\n    return this._marks.reduce((nearest, mark, i) => (nearest < 0 || away(mark) < away(this._marks[nearest]) ? i : nearest), -1);\n  }\n\n  /**\n   * Steps through the points in table order. The arrows keep their meaning\n   * in a right-to-left chart, since table order is no direction on screen.\n   */\n  protected _keyTarget(key: string): number | undefined {\n    // With nothing shown, Escape is left to a dialog or sheet around the chart.\n    if (key === 'Escape') return this.activeIndex < 0 ? undefined : -1;\n    const last = this._marks.length - 1;\n    const step = ({ ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 } as Record<string, number>)[key];\n    if (step) return Math.min(last, Math.max(0, this.activeIndex + step));\n    return ({ Home: 0, End: last } as Record<string, number>)[key];\n  }\n\n  protected _read() {\n    [this._drawn, this._marks] = [this._marks ?? [], []];\n    super._read();\n    if (!this.series.length) return;\n    this._xFit = this._xScale();\n    this._xAffix = affix(this._rows.map((row) => row.cells[1]));\n  }\n\n  /** The x scale over the rows with a point, between `xMin` and `xMax` where they are set. */\n  private _xScale(): ChartScale {\n    const [low, high] = this._xRange();\n    const [min, max] = [this._xEnd('xMin'), this._xEnd('xMax')];\n    return this._fit(min ?? low, max ?? high, [min !== null, max !== null]);\n  }\n\n  /** The x values of the rows with a point, with 10% of their span to spare each side. */\n  private _xRange(): [number, number] {\n    const xs = this._xs.filter((_, row) => this._hasPoint(row)) as number[];\n    if (!xs.length) return [-1, 1];\n    const [low, high] = [xs.reduce((a, b) => Math.min(a, b)), xs.reduce((a, b) => Math.max(a, b))];\n    const pad = (high - low) * 0.1 || 1;\n    return [low - pad, high + pad];\n  }\n\n  /** An x scale end from its data attribute or option, or null. */\n  private _xEnd(name: 'xMin' | 'xMax') {\n    return this._number(name) ?? (this.options as Partial<ScatterChartOptions>)[name] ?? null;\n  }\n\n  /** A value's distance across the plot from its inline start, in percent. */\n  private _xAt(value: number) {\n    const { min, max } = this._xFit;\n    const x = ((value - min) / (max - min || 1)) * 100;\n    return this._reversed ? 100 - x : x;\n  }\n\n  /** Whether any series shown draws a point in a row. */\n  private _hasPoint(row: number) {\n    return this.series.some((series) => series.values[row] !== null);\n  }\n\n  /** The points, each diameter the square root of its row's share of the largest size drawn, so areas follow sizes. */\n  private _layout(): Mark[] {\n    const largest = this._sizes.reduce<number>((most, size, row) => (this._hasPoint(row) ? Math.max(most, size!) : most), 0);\n    return this.labels.flatMap((_, row) => this.series\n      .filter((series) => series.values[row] !== null)\n      .map((series) => ({\n        row,\n        series,\n        x: this._xAt(this._xs[row]!),\n        y: series.y(series.values[row]!),\n        size: Math.sqrt(this._sizes[row]! / largest)\n      })));\n  }\n\n  /** One group per series, its points round caps on zero-length lines, so CSS sizes them in pixels. */\n  protected _draw(): Element {\n    this._marks = this._layout();\n    const svg = svgNode('svg', {\n      viewBox: '0 0 100 100',\n      preserveAspectRatio: 'none',\n      'aria-hidden': 'true',\n      focusable: 'false'\n    });\n    const timing = this._before.length ? pace(this.el) : null;\n    const was = new Map(this._drawn.map((old) => [place(old), old]));\n    svg.append(...this.series.map((series) => this._group(series, timing, was)));\n    return svg;\n  }\n\n  /**\n   * A series' points, in one path, or with .bubble one path each, largest\n   * first so smaller bubbles stay on top.\n   */\n  private _group(series: Series, timing: ReturnType<typeof pace>, was: Map<string, Mark>) {\n    const group = svgNode('g', {\n      class: `scatter-chart-series ${series.className}`.trim(),\n      'data-series': series.color\n    });\n    const marks = this._marks.filter((mark) => mark.series === series);\n    const sets = this._bubble ? marks.sort((a, b) => b.size - a.size).map((mark) => [mark]) : [marks];\n    group.append(...sets.map((set) => this._pointPath(set, timing, was)));\n    return group;\n  }\n\n  /**\n   * A path of points. After update() each moves from where its row's point\n   * in the same column was drawn, or appears where it is.\n   */\n  private _pointPath(marks: Mark[], timing: ReturnType<typeof pace>, was: Map<string, Mark>) {\n    const path = svgNode('path', { class: 'scatter-chart-points', d: dots(marks) });\n    if (timing) morph(path, dots(marks.map((mark) => was.get(place(mark)) ?? mark)), timing);\n    if (this._bubble) sized(path, marks[0].size, was.get(place(marks[0])), timing);\n    return path;\n  }\n\n  /** With .axis, the y scale's labels, and the x scale's below the plot with a grid line at each. */\n  protected _axes(): Element[] {\n    return this._axis ? [...super._axes(), this._xAxis()] : [];\n  }\n\n  private _xAxis() {\n    const axis = document.createElement('ol');\n    axis.className = 'scatter-chart-axis x';\n    axis.setAttribute('aria-hidden', 'true');\n    const number = numberFormat(this.el, { notation: 'compact', maximumSignificantDigits: 3 });\n    for (const tick of this._xFit.ticks) {\n      const li = document.createElement('li');\n      const label = document.createElement('span');\n      label.textContent = tickText(number, tick, this._xAffix);\n      li.style.setProperty('--at', `${this._xAt(tick)}%`);\n      li.append(label);\n      axis.append(li);\n    }\n    return axis;\n  }\n\n  /** The legend only: the rows have no labels along an axis. */\n  protected _guides(): Element[] {\n    return this._legend();\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/js/chunks/{chunk-GVGT6MIU.mjs → chunk-75E5EDJF.mjs}

@@ -1,24 +1,15 @@
 import {
   ColumnChart
-} from "./chunk-SPETGK25.mjs";
+} from "./chunk-PA7NU5AK.mjs";
 
 // src/ts/components/barChart.ts
 var BarChart = class extends ColumnChart {
   get _type() {
     return "bar-chart";
   }
-  get _key() {
-    return "Expressive_BarChart";
-  }
   get _horizontal() {
     return true;
   }
-  static init(els, options = {}) {
-    return super.init(els, options);
-  }
-  static getInstance(el) {
-    return el["Expressive_BarChart"];
-  }
   /**
    * The column chart's spans; CSS reads their --top and --bottom across the
    * plot. With .values, a copy of the bars without their clipping holds each
@@ -40,8 +31,9 @@ var BarChart = class extends ColumnChart {
     return layers;
   }
 };
+BarChart.key = "Expressive_BarChart";
 
 export {
   BarChart
 };
-//# sourceMappingURL=chunk-GVGT6MIU.mjs.map
+//# sourceMappingURL=chunk-75E5EDJF.mjs.map

package/dist/js/chunks/chunk-75E5EDJF.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/components/barChart.ts"],
+  "sourcesContent": ["import { ColumnChart, ColumnChartOptions } from './columnChart';\n\nexport type BarChartOptions = ColumnChartOptions;\n\n/**\n * Bar chart. A column chart turned on its side: each row of the <table> is\n * a band of bars that grow from zero along the inline axis, with its label\n * beside it. The up and down arrows move the tooltip between rows.\n *\n * Call `update()` after changing the table, or start it with `watch` or\n * `data-watch`.\n */\nexport class BarChart extends ColumnChart {\n  protected get _type() {\n    return 'bar-chart';\n  }\n\n  protected get _horizontal() {\n    return true;\n  }\n\n  static key = 'Expressive_BarChart';\n\n  /**\n   * The column chart's spans; CSS reads their --top and --bottom across the\n   * plot. With .values, a copy of the bars without their clipping holds each\n   * cell's text, so text longer than a short bar can run past its end.\n   */\n  protected _draw(): Element {\n    const bars = super._draw() as HTMLElement;\n    bars.className = 'bar-chart-bars';\n    // Read here rather than with :dir(), which misses CSS `direction`.\n    bars.classList.toggle('rtl', getComputedStyle(this.el).direction === 'rtl');\n    if (!this.el.classList.contains('values')) return bars;\n\n    const values = bars.cloneNode(true) as HTMLElement;\n    values.classList.replace('bar-chart-bars', 'bar-chart-values');\n    values.querySelectorAll<HTMLElement>('span[data-text]').forEach((span) => {\n      span.textContent = span.dataset.text;\n    });\n    const layers = document.createElement('div');\n    layers.className = 'bar-chart-layers';\n    layers.append(bars, values);\n    return layers;\n  }\n}\n"],
+  "mappings": ";;;;;AAYO,IAAM,WAAN,cAAuB,YAAY;AAAA,EACxC,IAAc,QAAQ;AACpB,WAAO;AAAA,EACT;AAAA,EAEA,IAAc,cAAc;AAC1B,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASU,QAAiB;AACzB,UAAM,OAAO,MAAM,MAAM;AACzB,SAAK,YAAY;AAEjB,SAAK,UAAU,OAAO,OAAO,iBAAiB,KAAK,EAAE,EAAE,cAAc,KAAK;AAC1E,QAAI,CAAC,KAAK,GAAG,UAAU,SAAS,QAAQ,EAAG,QAAO;AAElD,UAAM,SAAS,KAAK,UAAU,IAAI;AAClC,WAAO,UAAU,QAAQ,kBAAkB,kBAAkB;AAC7D,WAAO,iBAA8B,iBAAiB,EAAE,QAAQ,CAAC,SAAS;AACxE,WAAK,cAAc,KAAK,QAAQ;AAAA,IAClC,CAAC;AACD,UAAM,SAAS,SAAS,cAAc,KAAK;AAC3C,WAAO,YAAY;AACnB,WAAO,OAAO,MAAM,MAAM;AAC1B,WAAO;AAAA,EACT;AACF;AAjCa,SASJ,MAAM;",
+  "names": []
+}

package/dist/js/chunks/{chunk-TBM3FT7G.mjs → chunk-7NLUI3RR.mjs}

@@ -1,9 +1,9 @@
-import {
-  Utils
-} from "./chunk-MNPROCZF.mjs";
 import {
   Component
-} from "./chunk-LTWPGFBR.mjs";
+} from "./chunk-CMGXGYUC.mjs";
+import {
+  Utils
+} from "./chunk-ZVLOUDIJ.mjs";
 
 // src/ts/components/mapView.ts
 var OPENFREEMAP = "https://tiles.openfreemap.org/styles/";
@@ -14,7 +14,14 @@ var _defaults = {
   zoom: 1,
   mapOptions: {}
 };
-var lngLat = (el) => el.dataset.lngLat.split(",").map(Number);
+var isLngLat = (value) => value.length === 2 && value.every(Number.isFinite) && Math.abs(value[1]) <= 90;
+var lngLat = (el) => {
+  const value = el.dataset.lngLat.split(",").map((part) => part.trim() ? Number(part) : NaN);
+  if (isLngLat(value)) return value;
+  console.warn(`MapView skipped data-lng-lat="${el.dataset.lngLat}": expected "longitude,latitude".`, el);
+  return null;
+};
+var positioned = (elements) => elements.map((el) => [el, lngLat(el)]).filter((pair) => pair[1] !== null);
 function arc([x0, y0], [x2, y2], steps = 32) {
   const bow = x2 >= x0 ? 0.25 : -0.25;
   const x1 = (x0 + x2) / 2 - (y2 - y0) * bow;
@@ -24,9 +31,11 @@ function arc([x0, y0], [x2, y2], steps = 32) {
     return [u * u * x0 + 2 * u * t * x1 + t * t * x2, u * u * y0 + 2 * u * t * y1 + t * t * y2];
   });
 }
-var MapView = class _MapView extends Component {
+var ARROWS = { ArrowLeft: [-1, 0], ArrowRight: [1, 0], ArrowUp: [0, -1], ArrowDown: [0, 1] };
+var plainArrow = (e) => Utils.plainKey(e) ? ARROWS[e.key] : void 0;
+var MapView = class extends Component {
   constructor(el, options) {
-    super(el, options, _MapView);
+    super(el, options);
     /** The MapLibre map. */
     this.map = null;
     /** The MapLibre markers made from `.map-marker` children, in order. */
@@ -38,11 +47,27 @@ var MapView = class _MapView extends Component {
     this._styleReady = false;
     this._dark = false;
     this._location = null;
-    this._media = null;
     this._observer = null;
     // Looked up once: `move` fires every frame of a pan or zoom.
     this._zoomIn = [];
     this._zoomOut = [];
+    // The draggable marker a tap picked up, waiting for the tap that drops it.
+    this._picked = null;
+    // The marker whose drag just ended, so the click that follows does not pick it up.
+    this._dragged = null;
+    // Undoes what the map added to the page's markup, for destroy().
+    this._restore = [];
+    this._actions = {
+      "zoom-in": () => this.map.zoomIn(),
+      "zoom-out": () => this.map.zoomOut(),
+      compass: () => this.map.resetNorthPitch(),
+      locate: (button) => this._locate(button),
+      fullscreen: () => this._toggleFullscreen(),
+      "pan-up": () => this._pan(0, -1),
+      "pan-down": () => this._pan(0, 1),
+      "pan-left": () => this._pan(-1, 0),
+      "pan-right": () => this._pan(1, 0)
+    };
     this._handleStyleLoad = () => {
       this._styleReady = true;
       for (const overlay of this._overlays.values()) overlay.draw();
@@ -68,39 +93,19 @@ var MapView = class _MapView extends Component {
     this._handleClick = (e) => {
       const target = e.target;
       const button = target.closest(".map-controls [data-action]");
-      const action = button?.dataset.action;
-      if (action === "zoom-in") this.map.zoomIn();
-      else if (action === "zoom-out") this.map.zoomOut();
-      else if (action === "compass") this.map.resetNorthPitch();
-      else if (action === "locate") this._locate(button);
-      else if (action === "fullscreen") {
-        if (document.fullscreenElement === this.el) document.exitFullscreen();
-        else this.el.requestFullscreen();
-      } else {
-        const marker = target.closest(".map-marker");
-        if (this._markerPopups.has(marker)) this._toggle(marker);
-      }
+      if (button) this._actions[button.dataset.action]?.(button);
+      else this._tapMarker(target.closest(".map-marker"));
     };
     // A click on the map closes marker popups, but not the one being toggled.
     this._handleMapClick = (e) => {
       const target = e.originalEvent.target;
+      this._drop(target, e.lngLat);
       for (const [marker, popup] of this._markerPopups) {
         if (!marker.contains(target) && !popup.getElement()?.contains(target)) popup.remove();
       }
     };
     this._handleKeydown = (e) => {
-      if (e.key !== "Escape") return;
-      for (const popup of this._popups) {
-        if (popup.getElement()?.contains(e.target)) {
-          e.preventDefault();
-          popup.remove();
-        }
-      }
-    };
-    this.el["Expressive_MapView"] = this;
-    this.options = {
-      ..._MapView.defaults,
-      ...options
+      if (e.key === "Escape") this._escape(e);
     };
     const lib = this.options.maplibregl;
     if (!lib) {
@@ -123,48 +128,34 @@ var MapView = class _MapView extends Component {
     this.map.on("click", this._handleMapClick);
     const children = this._children.filter((child) => child instanceof HTMLElement);
     const claimed = /* @__PURE__ */ new Set();
-    for (const marker of children.filter((child) => child.matches(".map-marker[data-lng-lat]"))) {
+    for (const [marker, at] of positioned(children.filter((child) => child.matches(".map-marker[data-lng-lat]")))) {
       const target = marker.hasAttribute("aria-controls") ? Utils.getElementById(marker, marker.getAttribute("aria-controls")) : null;
       const popup = target?.parentElement === el && target.matches(".map-popup") ? target : null;
       if (popup) claimed.add(popup);
-      this._addMarker(marker, popup);
+      this._addMarker(marker, popup, at);
     }
-    for (const popup of children.filter((child) => child.matches(".map-popup[data-lng-lat]") && !claimed.has(child))) {
-      this._popup(popup, 0).setLngLat(lngLat(popup)).addTo(this.map);
+    for (const [popup, at] of positioned(children.filter((child) => child.matches(".map-popup[data-lng-lat]") && !claimed.has(child)))) {
+      this._popup(popup, 0).setLngLat(at).addTo(this.map);
     }
+    const { signal } = this._events;
     if (this._themed()) {
-      this._media = matchMedia("(prefers-color-scheme: dark)");
-      this._media.addEventListener("change", this._handleScheme);
+      matchMedia("(prefers-color-scheme: dark)").addEventListener("change", this._handleScheme, { signal });
       this._observer = new MutationObserver(this._handleScheme);
       this._observer.observe(document.documentElement, { attributes: true, attributeFilter: ["theme"], subtree: true });
     }
     for (const button of this._buttons("fullscreen")) button.hidden = !document.fullscreenEnabled;
-    document.addEventListener("fullscreenchange", this._handleFullscreen);
-    el.addEventListener("click", this._handleClick);
-    el.addEventListener("keydown", this._handleKeydown);
+    document.addEventListener("fullscreenchange", this._handleFullscreen, { signal });
+    el.addEventListener("click", this._handleClick, { signal });
+    el.addEventListener("keydown", this._handleKeydown, { signal });
     this._sync();
   }
   static get defaults() {
     return _defaults;
   }
-  /**
-   * Initializes instances of MapView.
-   * @param els HTML elements.
-   * @param options Component options.
-   */
-  static init(els, options = {}) {
-    return super.init(els, options, _MapView);
-  }
-  static getInstance(el) {
-    return el["Expressive_MapView"];
-  }
   destroy() {
-    this.el["Expressive_MapView"] = void 0;
+    super.destroy();
     if (!this.map) return;
-    this.el.removeEventListener("click", this._handleClick);
-    this.el.removeEventListener("keydown", this._handleKeydown);
-    document.removeEventListener("fullscreenchange", this._handleFullscreen);
-    this._media?.removeEventListener("change", this._handleScheme);
+    this._releaseMarkers();
     this._observer?.disconnect();
     for (const overlay of this._overlays.values()) overlay.off?.();
     for (const popup of this._popups) popup.remove();
@@ -210,7 +201,7 @@ var MapView = class _MapView extends Component {
     const zoomIn = async (e) => {
       const [feature] = e.features;
       const zoom = await this.map.getSource(id).getClusterExpansionZoom(feature.properties.cluster_id);
-      this.map.easeTo({ center: feature.geometry.coordinates, zoom });
+      this.map?.easeTo({ center: feature.geometry.coordinates, zoom });
     };
     const pointer = () => {
       this.map.getCanvas().style.cursor = "pointer";
@@ -218,6 +209,13 @@ var MapView = class _MapView extends Component {
     const reset = () => {
       this.map.getCanvas().style.cursor = "";
     };
+    const listen = (method) => {
+      this.map[method]("click", clusters, zoomIn);
+      for (const layer of [clusters, points]) {
+        this.map[method]("mouseenter", layer, pointer);
+        this.map[method]("mouseleave", layer, reset);
+      }
+    };
     this._draw(id, {
       draw: () => {
         const color = options.color ?? this._color("var(--md-comp-map-cluster-color)");
@@ -262,19 +260,9 @@ var MapView = class _MapView extends Component {
           paint: { "circle-color": color, "circle-radius": 6, "circle-stroke-width": 2, "circle-stroke-color": surface }
         });
       },
-      off: () => {
-        this.map.off("click", clusters, zoomIn);
-        for (const layer of [clusters, points]) {
-          this.map.off("mouseenter", layer, pointer);
-          this.map.off("mouseleave", layer, reset);
-        }
-      }
+      off: () => listen("off")
     });
-    this.map.on("click", clusters, zoomIn);
-    for (const layer of [clusters, points]) {
-      this.map.on("mouseenter", layer, pointer);
-      this.map.on("mouseleave", layer, reset);
-    }
+    listen("on");
   }
   /** Removes a route, arcs or clusters added with this id. */
   removeOverlay(id) {
@@ -312,16 +300,13 @@ var MapView = class _MapView extends Component {
     this._overlays.set(id, overlay);
     if (this._styleReady) overlay.draw();
   }
-  _addMarker(element, content) {
+  _addMarker(element, content, at) {
     const marker = new this.options.maplibregl.Marker({
       element,
       draggable: element.hasAttribute("data-draggable")
-    }).setLngLat(lngLat(element)).addTo(this.map);
-    marker.on("dragend", () => {
-      const { lng, lat } = marker.getLngLat();
-      element.dataset.lngLat = `${lng},${lat}`;
-      element.dispatchEvent(new Event("change", { bubbles: true }));
-    });
+    }).setLngLat(at).addTo(this.map);
+    marker.on("dragend", () => this._moved(marker));
+    if (element.hasAttribute("data-draggable")) this._makeMovable(element, marker);
     this.markers.push(marker);
     if (!content) return;
     element.setAttribute("aria-expanded", "false");
@@ -333,6 +318,68 @@ var MapView = class _MapView extends Component {
     });
     this._markerPopups.set(element, popup);
   }
+  /** A marker moved: its `data-lng-lat` holds the new place, and it fires `change`. */
+  _moved(marker) {
+    const element = marker.getElement();
+    const { lng, lat } = marker.getLngLat();
+    element.dataset.lngLat = `${lng},${lat}`;
+    element.dispatchEvent(new Event("change", { bubbles: true }));
+  }
+  // A drag is not the only way to move it (WCAG 2.5.7): a tap picks it up,
+  // and the arrow keys nudge it. A button is already a control; anything
+  // else becomes one, and destroy() takes that back off.
+  _makeMovable(element, marker) {
+    const added = element instanceof HTMLButtonElement ? [] : ["role", "tabindex"].filter((name) => !element.hasAttribute(name));
+    if (added.includes("role")) element.setAttribute("role", "button");
+    if (added.includes("tabindex")) element.tabIndex = 0;
+    element.setAttribute("aria-pressed", "false");
+    this._restore.push(() => ["aria-pressed", ...added].forEach((name) => element.removeAttribute(name)));
+    element.addEventListener("keydown", (e) => this._nudge(e, marker), { signal: this._events.signal });
+    marker.on("dragstart", () => this._dragged = element);
+    marker.on("dragend", () => setTimeout(() => this._dragged = null));
+  }
+  /** Takes back the attributes `_makeMovable()` added. Destroy removes its listeners. */
+  _releaseMarkers() {
+    this._restore.splice(0).forEach((undo) => undo());
+    this._picked = null;
+  }
+  /** The arrow keys move a focused draggable marker 10px, and the map stays put. */
+  _nudge(e, marker) {
+    const step = plainArrow(e);
+    if (!step) return;
+    e.preventDefault();
+    e.stopPropagation();
+    const at = this.map.project(marker.getLngLat());
+    marker.setLngLat(this.map.unproject([at.x + step[0] * 10, at.y + step[1] * 10]));
+    this._moved(marker);
+  }
+  /** Picks a marker up, or puts down the one already picked up. */
+  _pick(element) {
+    this._picked?.setAttribute("aria-pressed", "false");
+    this._picked = element;
+    element?.setAttribute("aria-pressed", "true");
+  }
+  // A tap on a draggable marker picks it up, or puts it back down; the click
+  // that ends a drag does neither.
+  _tapMarker(element) {
+    if (element?.hasAttribute("data-draggable")) this._tapMovable(element);
+    else if (this._markerPopups.has(element)) this._toggle(element);
+  }
+  _tapMovable(element) {
+    if (this._dragged !== element) this._pick(this._picked === element ? null : element);
+  }
+  /** A third of the map's width or height in a direction. */
+  _pan(x, y) {
+    const { width, height } = this.el.getBoundingClientRect();
+    this.map.panBy([x * width / 3, y * height / 3]);
+  }
+  // Either can be refused (an iframe without allowfullscreen, say). The
+  // button state follows fullscreenchange, so there is nothing to undo.
+  _toggleFullscreen() {
+    const request = document.fullscreenElement === this.el ? document.exitFullscreen() : this.el.requestFullscreen();
+    request.catch(() => {
+    });
+  }
   _popup(content, offset) {
     const popup = new this.options.maplibregl.Popup({ closeOnClick: false, maxWidth: "none", offset }).setDOMContent(content);
     this._popups.push(popup);
@@ -390,9 +437,32 @@ var MapView = class _MapView extends Component {
   _style() {
     return this._themed() ? this.options.style[this._dark ? "dark" : "light"] : this.options.style;
   }
+  // A tap on the map, not on a marker, puts a picked-up marker there.
+  _drop(target, at) {
+    if (!this._picked || target.closest?.(".map-marker")) return;
+    const marker = this.markers.find((m) => m.getElement() === this._picked);
+    marker.setLngLat(at);
+    this._moved(marker);
+    this._pick(null);
+  }
+  // Escape puts down a picked-up marker first, then closes a popup.
+  _escape(e) {
+    if (this._picked) {
+      e.preventDefault();
+      this._pick(null);
+      return;
+    }
+    for (const popup of this._popups) {
+      if (popup.getElement()?.contains(e.target)) {
+        e.preventDefault();
+        popup.remove();
+      }
+    }
+  }
 };
+MapView.key = "Expressive_MapView";
 
 export {
   MapView
 };
-//# sourceMappingURL=chunk-TBM3FT7G.mjs.map
+//# sourceMappingURL=chunk-7NLUI3RR.mjs.map