@expressivecss/expressive 0.15.0 → 0.17.0

package/dist/js/chunks/chunk-2LFCOGC3.mjs

@@ -0,0 +1,233 @@
+import {
+  LineChart,
+  ROW_COLORS,
+  numberFormat,
+  percentLabel,
+  polarPoint,
+  rowLegend,
+  signs,
+  tintTooltip
+} from "./chunk-IQOTGGHX.mjs";
+import {
+  svgNode
+} from "./chunk-67UNY7RH.mjs";
+
+// src/ts/components/pieChart.ts
+var RADIUS = 46;
+var WHOLE = 1 - 1e-5;
+var GROWN = 1.06;
+var LABEL_SHARE = 0.05;
+var _maskId = 0;
+function decimals(text) {
+  const [, fraction = "", exponent = "0"] = /(?:\.(\d+))?(?:e([+-]?\d+))?$/i.exec(text.replace(/[^\d.e+-]/gi, ""));
+  return Math.max(0, fraction.length - Number(exponent));
+}
+function stack(names, away, anchor) {
+  names.sort(([a], [b]) => (a - b) * away);
+  const ys = names.map(([y]) => y);
+  if (anchor !== void 0) ys.unshift(anchor);
+  const first = ys.length - names.length;
+  names.forEach(([, name], k) => {
+    const tops = ys.slice(0, first + k + 1).map((y, j) => `calc(50cqw + ${y} * var(--pie-chart-name-at) + ${(first + k - j) * away} * var(--pie-chart-name-step))`);
+    name.style.setProperty("--pie-chart-name-top", `${away > 0 ? "max" : "min"}(${tops.join(", ")})`);
+  });
+}
+var PieChart = class extends LineChart {
+  get _type() {
+    return "pie-chart";
+  }
+  /** A pie has no value axis. */
+  get _axis() {
+    return false;
+  }
+  get _points() {
+    return false;
+  }
+  get _circular() {
+    return true;
+  }
+  _read() {
+    super._read();
+    const small = this._small();
+    if (!small) return;
+    const sum = this.series[0].values.reduce((total, value, i) => total + (small[i] ? Math.max(0, value) : 0), 0);
+    const text = this._written(sum, this._rows.filter((_, i) => small[i]).map((row) => row.cells[1]));
+    const keep = (list, other) => [...list.filter((_, i) => !small[i]), other];
+    this.labels = keep(this.labels, this.el.dataset.otherLabel || "Other");
+    this.series = this.series.map((series, i) => {
+      const values = keep(series.values, i ? null : sum);
+      return { ...series, values, tops: values, text: keep(series.text, i ? "" : text) };
+    });
+  }
+  /**
+   * The group's sum written like its cells: with their signs, and to their
+   * decimals, or compact when data-value stands behind text such as "$38M".
+   */
+  _written(sum, cells) {
+    const texts = cells.map((cell) => cell.textContent.trim());
+    const [prefix, suffix] = signs(texts[0]);
+    return `${prefix}${numberFormat(this.el, this._precision(texts, cells)).format(sum)}${suffix}`;
+  }
+  _precision(texts, cells) {
+    if (cells.some((cell) => cell.dataset.value)) return { notation: "compact", maximumSignificantDigits: 3 };
+    const digits = Math.max(0, ...texts.map(decimals));
+    return digits > 20 ? { maximumSignificantDigits: 3 } : { maximumFractionDigits: digits };
+  }
+  /**
+   * Which rows data-other groups: those with a value under that percentage
+   * of the whole. Null when it groups nothing, as one small row is clearer
+   * by its own name.
+   */
+  _small() {
+    const percent = this._number("other");
+    const values = this.series[0]?.values.map((value) => value === null ? null : Math.max(0, value));
+    if (!values || !(percent > 0)) return null;
+    const total = values.reduce((sum, value) => sum + (value ?? 0), 0);
+    const small = values.map((value) => value !== null && value / total * 100 < percent - 1e-9);
+    return small.filter(Boolean).length > 1 ? small : null;
+  }
+  show(index) {
+    if (!this._tooltip || index === this.activeIndex) return;
+    super.show(index);
+    this._slices.forEach((slice, i) => slice?.classList.toggle("active", i === index));
+    if (this._tooltip.hidden) return;
+    tintTooltip(this._tooltip, this._colors[index]);
+  }
+  /** CSS places the tooltip on the slice's middle from --turn. */
+  _place(index) {
+    const middle = (this._turns[index][0] + this._turns[index][1]) / 2;
+    this._tooltip.style.setProperty("--turn", String(middle));
+    this._tooltip.classList.toggle("end", middle < 0.5);
+  }
+  /** The row's share of the whole as a percentage, or '' for none. */
+  _share(index) {
+    const [start, end] = this._turns[index];
+    if (end <= start) return "";
+    return percentLabel(this.el, end - start, this._percents ?? (this._percents = []));
+  }
+  // ponytail: names only move up or down their side, so many thin slices
+  // near the top or bottom run into the caption or legend; group them as "Other".
+  /**
+   * Each slice's row name outside it, on the slice's middle, with a leader
+   * line back to the slice. Names on the right half run rightwards and those
+   * on the left run leftwards.
+   */
+  _names() {
+    const names = document.createElement("div");
+    names.className = "pie-chart-names";
+    const sides = [[], [], [], []];
+    this._turns.forEach(([start, end], i) => {
+      if (end <= start) return;
+      const turn = (start + end) / 2;
+      const y = -Math.cos(turn * 2 * Math.PI);
+      const name = document.createElement("span");
+      name.dataset.series = this._colors[i];
+      name.style.setProperty("--turn", String(turn));
+      name.classList.toggle("end", turn >= 0.5);
+      const text = document.createElement("span");
+      text.textContent = this.labels[i];
+      name.append(text);
+      names.append(name);
+      sides[(turn >= 0.5 ? 2 : 0) + Number(y >= 0)].push([y, name]);
+    });
+    for (const i of [0, 2]) {
+      stack(sides[i], -1);
+      stack(sides[i + 1], 1, sides[i][0]?.[0]);
+    }
+    return names;
+  }
+  /** The legend: every row with its color, its cell and its share. */
+  _guides() {
+    this._percents = [];
+    const text = this.series[0].text;
+    return [rowLegend("pie-chart-legend", this._colors, this.labels.map((label, i) => [label, text[i], this._share(i)]))];
+  }
+  /** The row under the pointer by its angle from the middle, or -1 off the slices. */
+  _indexAt(e) {
+    const [turn, share] = this._polarAt(e);
+    const distance = share * 100;
+    const hole = this.el.classList.contains("donut") ? parseFloat(getComputedStyle(this.el).getPropertyValue("--md-comp-pie-chart-hole")) || 0 : 0;
+    if (distance < RADIUS * hole) return -1;
+    const index = this._turns.findIndex(([start, end]) => start <= turn && turn < end);
+    return distance > RADIUS * (index === this.activeIndex ? GROWN : 1) ? -1 : index;
+  }
+  /**
+   * An SVG of slices in a -50 to 50 box, under a mask that cuts the gaps
+   * between them and the donut's hole, which CSS sizes. The values and the
+   * total are HTML over it.
+   */
+  _draw() {
+    const values = this.series[0].values.map((value) => Math.max(0, value ?? 0));
+    const total = values.reduce((sum, value) => sum + value, 0);
+    let turn = 0;
+    this._turns = values.map((value) => [turn, turn += total ? value / total : 0]);
+    const drawn = this._turns.filter(([start, end]) => end > start);
+    let slice = 0;
+    this._colors = this._turns.map(([start, end]) => {
+      if (end <= start) return void 0;
+      const index = slice++;
+      return String(index === drawn.length - 1 && index > 0 && index % ROW_COLORS === 0 ? 2 : index % ROW_COLORS + 1);
+    });
+    const pie = document.createElement("div");
+    pie.className = "pie-chart-pie";
+    pie.setAttribute("aria-hidden", "true");
+    const svg = svgNode("svg", { viewBox: "-50 -50 100 100", focusable: "false" });
+    const id = `pie-chart-mask-${++_maskId}`;
+    const area = { x: "-50", y: "-50", width: "100", height: "100" };
+    const mask = svgNode("mask", { id, maskUnits: "userSpaceOnUse", ...area });
+    mask.append(
+      svgNode("rect", { ...area, fill: "white" }),
+      svgNode("path", {
+        class: "pie-chart-gaps",
+        stroke: "black",
+        d: drawn.length > 1 ? drawn.map(([start]) => `M0,0L${polarPoint(start, 50)}`).join("") : ""
+      }),
+      svgNode("circle", { class: "pie-chart-hole", r: String(RADIUS), fill: "black" })
+    );
+    const slices = svgNode("g", { mask: `url(#${id})` });
+    const arc = `A${RADIUS},${RADIUS} 0`;
+    this._slices = this._turns.map(([start, end], i) => {
+      if (end <= start) return null;
+      const slice2 = svgNode("path", {
+        class: "pie-chart-slice",
+        "data-series": this._colors[i],
+        // A whole circle is two half arcs; one arc cannot end where it starts.
+        d: end - start >= WHOLE ? `M0,${-RADIUS}${arc} 1 1 0,${RADIUS}${arc} 1 1 0,${-RADIUS}Z` : `M0,0L${polarPoint(start, RADIUS)}${arc} ${end - start > 0.5 ? 1 : 0} 1 ${polarPoint(end, RADIUS)}Z`
+      });
+      slices.append(slice2);
+      return slice2;
+    });
+    svg.append(mask, slices);
+    pie.append(svg, ...this._texts());
+    const middle = this._total("pie-chart-total");
+    if (middle) pie.append(middle);
+    return pie;
+  }
+  /** The .values shares on the slices and the .labels names outside them. */
+  _texts() {
+    const texts = [];
+    if (this.el.classList.contains("values")) texts.push(this._values());
+    if (this.el.classList.contains("labels") && !this.el.classList.contains("sparkline")) texts.push(this._names());
+    return texts;
+  }
+  /** Each slice's share on it, except on slices too thin to hold it. */
+  _values() {
+    const labels = document.createElement("div");
+    labels.className = "pie-chart-values";
+    this._turns.forEach(([start, end], i) => {
+      if (end - start < LABEL_SHARE) return;
+      const label = document.createElement("span");
+      label.dataset.series = this._colors[i];
+      label.style.setProperty("--turn", String((start + end) / 2));
+      label.textContent = this._share(i);
+      labels.append(label);
+    });
+    return labels;
+  }
+};
+PieChart.key = "Expressive_PieChart";
+
+export {
+  PieChart
+};
+//# sourceMappingURL=chunk-2LFCOGC3.mjs.map

package/dist/js/chunks/chunk-2LFCOGC3.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/components/pieChart.ts"],
+  "sourcesContent": ["import { LineChart, LineChartOptions, ROW_COLORS as COLORS, numberFormat, percentLabel, polarPoint as at, rowLegend, signs, tintTooltip } from './lineChart';\nimport { svgNode as node } from '../core/utils';\n\nexport type PieChartOptions = LineChartOptions;\n\n// ponytail: rows past six repeat the colors; data-other groups the small ones.\n/** The pie's radius in a 100-unit box, leaving room for the active slice to grow. */\nconst RADIUS = 46;\n/**\n * Slices at least this share are drawn whole. polarPoint rounds to 0.001, so\n * a slice within about 3.5e-6 of whole would end where it starts and its\n * single arc would draw nothing. The rest of the pie is too thin to see.\n */\nconst WHOLE = 1 - 1e-5;\n/** The active slice's scale, as in _pie-chart.scss. */\nconst GROWN = 1.06;\n/** Slices smaller than this share get no .values label. */\nconst LABEL_SHARE = 0.05;\nlet _maskId = 0;\n\n/** How many decimals a cell's number has, counting an exponent: \"2.5e-3\" has 4. */\nfunction decimals(text: string) {\n  // Keeping only the number's characters first keeps the match linear.\n  const [, fraction = '', exponent = '0'] = /(?:\\.(\\d+))?(?:e([+-]?\\d+))?$/i.exec(text.replace(/[^\\d.e+-]/gi, ''))!;\n  return Math.max(0, fraction.length - Number(exponent));\n}\n\n/**\n * Sets each name's --pie-chart-name-top so neighbours on one side of the pie sit at least\n * --pie-chart-name-step apart, pushed away from the middle line: down below\n * it (`away` 1) and up above it (-1). Each top is the furthest of the natural\n * places of the names before it, plus a step for every name between. An\n * `anchor` is a fixed place before the first name, the unmoved innermost\n * name across the middle line.\n */\nfunction stack(names: [number, HTMLElement][], away: number, anchor?: number) {\n  names.sort(([a], [b]) => (a - b) * away);\n  const ys = names.map(([y]) => y);\n  if (anchor !== undefined) ys.unshift(anchor);\n  const first = ys.length - names.length;\n  names.forEach(([, name], k) => {\n    const tops = ys.slice(0, first + k + 1).map((y, j) =>\n      `calc(50cqw + ${y} * var(--pie-chart-name-at) + ${(first + k - j) * away} * var(--pie-chart-name-step))`);\n    name.style.setProperty('--pie-chart-name-top', `${away > 0 ? 'max' : 'min'}(${tops.join(', ')})`);\n  });\n}\n\n/**\n * Pie chart. It reads its <table> like LineChart, but draws each row of the\n * first value column as a slice of the whole, clockwise from the top, with\n * a legend of every row and its share. With `.donut`, a <tfoot> row is the\n * total in the middle. Further columns show in the tooltip. With\n * `data-other`, rows under that percentage of the whole become one row,\n * last, named by `data-other-label` (\"Other\" by default); the table keeps\n * every row.\n *\n * Call `update()` after changing the table, or start it with `watch` or\n * `data-watch`.\n */\nexport class PieChart extends LineChart {\n  // No initializers: LineChart's constructor draws before they would run.\n  /** Each row's start and end, as fractions of a turn clockwise from the top. */\n  private _turns: [number, number][];\n  /** Each row's color, or undefined for a row with no slice. */\n  private _colors: (string | undefined)[];\n  private _slices: (SVGPathElement | null)[];\n  /** Percent formatters by fraction digits, rebuilt once per legend. */\n  private _percents: Intl.NumberFormat[];\n\n  protected get _type() {\n    return 'pie-chart';\n  }\n\n  /** A pie has no value axis. */\n  protected get _axis() {\n    return false;\n  }\n\n  protected get _points() {\n    return false;\n  }\n\n  protected get _circular() {\n    return true;\n  }\n\n  protected _read() {\n    super._read();\n    const small = this._small();\n    if (!small) return;\n    const sum = this.series[0].values.reduce<number>((total, value, i) => total + (small[i] ? Math.max(0, value!) : 0), 0);\n    const text = this._written(sum, this._rows.filter((_, i) => small[i]).map((row) => row.cells[1]));\n    const keep = <T>(list: T[], other: T) => [...list.filter((_, i) => !small[i]), other];\n    this.labels = keep(this.labels, this.el.dataset.otherLabel || 'Other');\n    // Only the first column adds up; further columns have no value for the group.\n    this.series = this.series.map((series, i) => {\n      const values = keep(series.values, i ? null : sum);\n      return { ...series, values, tops: values, text: keep(series.text, i ? '' : text) };\n    });\n  }\n\n  /**\n   * The group's sum written like its cells: with their signs, and to their\n   * decimals, or compact when data-value stands behind text such as \"$38M\".\n   */\n  private _written(sum: number, cells: HTMLTableCellElement[]) {\n    const texts = cells.map((cell) => cell.textContent.trim());\n    const [prefix, suffix] = signs(texts[0]);\n    return `${prefix}${numberFormat(this.el, this._precision(texts, cells)).format(sum)}${suffix}`;\n  }\n\n  private _precision(texts: string[], cells: HTMLTableCellElement[]): Intl.NumberFormatOptions {\n    if (cells.some((cell) => cell.dataset.value)) return { notation: 'compact', maximumSignificantDigits: 3 };\n    const digits = Math.max(0, ...texts.map(decimals));\n    // Older engines take at most 20 fraction digits; past that, keep the sum's first digits.\n    return digits > 20 ? { maximumSignificantDigits: 3 } : { maximumFractionDigits: digits };\n  }\n\n  /**\n   * Which rows data-other groups: those with a value under that percentage\n   * of the whole. Null when it groups nothing, as one small row is clearer\n   * by its own name.\n   */\n  private _small() {\n    const percent = this._number('other');\n    const values = this.series[0]?.values.map((value) => (value === null ? null : Math.max(0, value)));\n    if (!values || !(percent! > 0)) return null;\n    const total = values.reduce<number>((sum, value) => sum + (value ?? 0), 0);\n    // A row exactly at the percentage stays, despite rounding in the division.\n    const small = values.map((value) => value !== null && (value / total) * 100 < percent! - 1e-9);\n    return small.filter(Boolean).length > 1 ? small : null;\n  }\n\n  static key = 'Expressive_PieChart';\n\n  show(index: number) {\n    if (!this._tooltip || index === this.activeIndex) return;\n    super.show(index);\n    this._slices.forEach((slice, i) => slice?.classList.toggle('active', i === index));\n    // LineChart hides the tooltip for -1 and for an index past the last row.\n    if (this._tooltip.hidden) return;\n\n    tintTooltip(this._tooltip, this._colors[index]);\n  }\n\n  /** CSS places the tooltip on the slice's middle from --turn. */\n  protected _place(index: number) {\n    const middle = (this._turns[index][0] + this._turns[index][1]) / 2;\n    this._tooltip.style.setProperty('--turn', String(middle));\n    // On the right half it opens leftwards, over the pie.\n    this._tooltip.classList.toggle('end', middle < 0.5);\n  }\n\n  /** The row's share of the whole as a percentage, or '' for none. */\n  protected _share(index: number) {\n    const [start, end] = this._turns[index];\n    if (end <= start) return '';\n    return percentLabel(this.el, end - start, (this._percents ??= []));\n  }\n\n  // ponytail: names only move up or down their side, so many thin slices\n  // near the top or bottom run into the caption or legend; group them as \"Other\".\n  /**\n   * Each slice's row name outside it, on the slice's middle, with a leader\n   * line back to the slice. Names on the right half run rightwards and those\n   * on the left run leftwards.\n   */\n  private _names() {\n    const names = document.createElement('div');\n    names.className = 'pie-chart-names';\n    // Right above, right below, left above and left below the middle line.\n    const sides: [number, HTMLElement][][] = [[], [], [], []];\n    this._turns.forEach(([start, end], i) => {\n      if (end <= start) return;\n      const turn = (start + end) / 2;\n      const y = -Math.cos(turn * 2 * Math.PI);\n      const name = document.createElement('span');\n      name.dataset.series = this._colors[i];\n      name.style.setProperty('--turn', String(turn));\n      name.classList.toggle('end', turn >= 0.5);\n      // The text is cut short inside the name, which draws the leader line.\n      const text = document.createElement('span');\n      text.textContent = this.labels[i];\n      name.append(text);\n      names.append(name);\n      sides[(turn >= 0.5 ? 2 : 0) + Number(y >= 0)].push([y, name]);\n    });\n    // Names below the line start a step under the innermost name above it.\n    for (const i of [0, 2]) {\n      stack(sides[i], -1);\n      stack(sides[i + 1], 1, sides[i][0]?.[0]);\n    }\n    return names;\n  }\n\n  /** The legend: every row with its color, its cell and its share. */\n  protected _guides(): Element[] {\n    // A redraw picks up a changed lang attribute.\n    this._percents = [];\n    const text = this.series[0].text;\n    return [rowLegend('pie-chart-legend', this._colors, this.labels.map((label, i) => [label, text[i], this._share(i)]))];\n  }\n\n  /** The row under the pointer by its angle from the middle, or -1 off the slices. */\n  protected _indexAt(e: PointerEvent) {\n    const [turn, share] = this._polarAt(e);\n    // The distance in the SVG's 100-unit box.\n    const distance = share * 100;\n    const hole = this.el.classList.contains('donut')\n      ? parseFloat(getComputedStyle(this.el).getPropertyValue('--md-comp-pie-chart-hole')) || 0\n      : 0;\n    if (distance < RADIUS * hole) return -1;\n    const index = this._turns.findIndex(([start, end]) => start <= turn && turn < end);\n    // The active slice is drawn larger, so the pointer stays on it to its edge.\n    return distance > RADIUS * (index === this.activeIndex ? GROWN : 1) ? -1 : index;\n  }\n\n  /**\n   * An SVG of slices in a -50 to 50 box, under a mask that cuts the gaps\n   * between them and the donut's hole, which CSS sizes. The values and the\n   * total are HTML over it.\n   */\n  protected _draw(): Element {\n    const values = this.series[0].values.map((value) => Math.max(0, value ?? 0));\n    const total = values.reduce((sum, value) => sum + value, 0);\n    let turn = 0;\n    this._turns = values.map((value) => [turn, (turn += total ? value / total : 0)]);\n    // Colors go round the drawn slices; the last skips the first's color beside it.\n    const drawn = this._turns.filter(([start, end]) => end > start);\n    let slice = 0;\n    this._colors = this._turns.map(([start, end]) => {\n      if (end <= start) return undefined;\n      const index = slice++;\n      return String(index === drawn.length - 1 && index > 0 && index % COLORS === 0 ? 2 : (index % COLORS) + 1);\n    });\n\n    const pie = document.createElement('div');\n    pie.className = 'pie-chart-pie';\n    pie.setAttribute('aria-hidden', 'true');\n    const svg = node('svg', { viewBox: '-50 -50 100 100', focusable: 'false' });\n    const id = `pie-chart-mask-${++_maskId}`;\n    const area = { x: '-50', y: '-50', width: '100', height: '100' };\n    const mask = node('mask', { id, maskUnits: 'userSpaceOnUse', ...area });\n    mask.append(\n      node('rect', { ...area, fill: 'white' }),\n      node('path', {\n        class: 'pie-chart-gaps',\n        stroke: 'black',\n        d: drawn.length > 1 ? drawn.map(([start]) => `M0,0L${at(start, 50)}`).join('') : ''\n      }),\n      node('circle', { class: 'pie-chart-hole', r: String(RADIUS), fill: 'black' })\n    );\n\n    const slices = node('g', { mask: `url(#${id})` });\n    const arc = `A${RADIUS},${RADIUS} 0`;\n    this._slices = this._turns.map(([start, end], i) => {\n      if (end <= start) return null;\n      const slice = node('path', {\n        class: 'pie-chart-slice',\n        'data-series': this._colors[i],\n        // A whole circle is two half arcs; one arc cannot end where it starts.\n        d: end - start >= WHOLE\n          ? `M0,${-RADIUS}${arc} 1 1 0,${RADIUS}${arc} 1 1 0,${-RADIUS}Z`\n          : `M0,0L${at(start, RADIUS)}${arc} ${end - start > 0.5 ? 1 : 0} 1 ${at(end, RADIUS)}Z`\n      }) as SVGPathElement;\n      slices.append(slice);\n      return slice;\n    });\n    svg.append(mask, slices);\n    pie.append(svg, ...this._texts());\n\n    const middle = this._total('pie-chart-total');\n    if (middle) pie.append(middle);\n    return pie;\n  }\n\n  /** The .values shares on the slices and the .labels names outside them. */\n  private _texts(): Element[] {\n    const texts: Element[] = [];\n    if (this.el.classList.contains('values')) texts.push(this._values());\n    if (this.el.classList.contains('labels') && !this.el.classList.contains('sparkline')) texts.push(this._names());\n    return texts;\n  }\n\n  /** Each slice's share on it, except on slices too thin to hold it. */\n  private _values() {\n    const labels = document.createElement('div');\n    labels.className = 'pie-chart-values';\n    this._turns.forEach(([start, end], i) => {\n      if (end - start < LABEL_SHARE) return;\n      const label = document.createElement('span');\n      label.dataset.series = this._colors[i];\n      label.style.setProperty('--turn', String((start + end) / 2));\n      label.textContent = this._share(i);\n      labels.append(label);\n    });\n    return labels;\n  }\n}\n"],
+  "mappings": "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",
+  "names": ["slice"]
+}

package/dist/js/chunks/{chunk-DXGRXYYL.mjs → chunk-36GELQGX.mjs}

@@ -1,9 +1,10 @@
-import {
-  Utils
-} from "./chunk-M372EDXD.mjs";
 import {
   Component
-} from "./chunk-PD6HYHAE.mjs";
+} from "./chunk-EB2V4OKL.mjs";
+import {
+  Utils,
+  restoreAttribute
+} from "./chunk-67UNY7RH.mjs";
 
 // src/ts/components/expandingCard.ts
 var _defaults = {
@@ -11,27 +12,23 @@ var _defaults = {
   onClose: null
 };
 var EXPANDING_CARD_SELECTOR = "article.expanding-card:has(> dialog.expanding-card-dialog)";
-var ExpandingCard = class _ExpandingCard extends Component {
+var ExpandingCard = class extends Component {
   constructor(el, options) {
-    super(el, options, _ExpandingCard);
+    super(el, options);
     this.isOpen = false;
     this.closeGeneration = 0;
+    // Trigger attributes as they were before init, so destroy() can restore them.
+    this._initialTrigger = {};
     this._setupEventHandlers = () => {
-      this.trigger?.addEventListener("click", this.open);
-      this.trigger?.addEventListener("keypress", this._handleTriggerKeypress);
-      this.closeButton?.addEventListener("click", this.close);
-      this.dialog?.addEventListener("cancel", this._handleCancel);
-      this.dialog?.addEventListener("close", this._handleNativeClose);
-    };
-    this._removeEventHandlers = () => {
-      this.trigger?.removeEventListener("click", this.open);
-      this.trigger?.removeEventListener("keypress", this._handleTriggerKeypress);
-      this.closeButton?.removeEventListener("click", this.close);
-      this.dialog?.removeEventListener("cancel", this._handleCancel);
-      this.dialog?.removeEventListener("close", this._handleNativeClose);
+      const { signal } = this._events;
+      this.trigger?.addEventListener("click", this.open, { signal });
+      this.trigger?.addEventListener("keypress", this._handleTriggerKeypress, { signal });
+      this.closeButton?.addEventListener("click", this.close, { signal });
+      this.dialog?.addEventListener("cancel", this._handleCancel, { signal });
+      this.dialog?.addEventListener("close", this._handleNativeClose, { signal });
     };
     this._handleTriggerKeypress = (event) => {
-      if (event.key === Utils.keys.ENTER || event.key === " ") {
+      if (event.key === "Enter" || event.key === " ") {
         event.preventDefault();
         this.open();
       }
@@ -42,7 +39,9 @@ var ExpandingCard = class _ExpandingCard extends Component {
     };
     this._handleNativeClose = () => {
       if (this.dialog.open) return;
+      const wasOpen = this.isOpen;
       this._collapse();
+      if (wasOpen) this._notify("close", this.options.onClose, { current: () => !this.isOpen });
     };
     this._setTransitionOrigin = () => {
       if (!this.dialog) return;
@@ -67,23 +66,18 @@ var ExpandingCard = class _ExpandingCard extends Component {
       this._setTransitionOrigin();
       this.isOpen = true;
       this.trigger.ariaExpanded = "true";
-      this.dialog.ariaExpanded = "true";
       this.dialog.showModal();
       void this.dialog.offsetWidth;
       this.dialog.classList.add("expanded");
       this.closeButton?.focus();
-      if (typeof this.options.onOpen === "function") {
-        this.options.onOpen.call(this, this.el);
-      }
+      this._notify("open", this.options.onOpen, { current: () => this.isOpen });
     };
     this.close = () => {
       if (!this.isOpen || !this.dialog || !this.trigger) return;
       this._setTransitionOrigin();
       this._collapse();
       const generation = this.closeGeneration;
-      if (typeof this.options.onClose === "function") {
-        this.options.onClose.call(this, this.el);
-      }
+      this._notify("close", this.options.onClose, { current: () => !this.isOpen });
       const finish = () => {
         if (generation !== this.closeGeneration || this.isOpen || !this.dialog.open) return;
         this.dialog.close();
@@ -96,11 +90,6 @@ var ExpandingCard = class _ExpandingCard extends Component {
       if (transitions.length === 0) finish();
       else void Promise.allSettled(transitions.map((animation) => animation.finished)).then(finish);
     };
-    this.el["Expressive_ExpandingCard"] = this;
-    this.options = {
-      ..._ExpandingCard.defaults,
-      ...options
-    };
     this.dialog = this.el.querySelector(
       ":scope > dialog.expanding-card-dialog"
     );
@@ -109,6 +98,8 @@ var ExpandingCard = class _ExpandingCard extends Component {
     );
     this.closeButton = this.dialog?.querySelector(".expanding-card-close") ?? null;
     if (this.trigger && this.dialog) {
+      for (const name of ["aria-expanded", "aria-controls", "tabindex", "role"])
+        this._initialTrigger[name] = this.trigger.getAttribute(name);
       this.trigger.ariaExpanded = "false";
       if (this.dialog.id)
         this.trigger.setAttribute("aria-controls", this.dialog.id);
@@ -116,48 +107,40 @@ var ExpandingCard = class _ExpandingCard extends Component {
         this.trigger.tabIndex = 0;
         this.trigger.setAttribute("role", "button");
       }
-      this.dialog.ariaExpanded = "false";
       this._setupEventHandlers();
     }
   }
   static get defaults() {
     return _defaults;
   }
-  static init(els, options) {
-    return super.init(els, options, _ExpandingCard);
-  }
-  static getInstance(el) {
-    return el["Expressive_ExpandingCard"];
-  }
   destroy() {
-    this._removeEventHandlers();
+    this._events.abort();
     this._collapse();
     if (this.dialog?.open) this.dialog.close();
-    this.el["Expressive_ExpandingCard"] = void 0;
+    for (const [name, value] of Object.entries(this._initialTrigger)) restoreAttribute(this.trigger, name, value);
+    super.destroy();
   }
   /** Marks the card closed and invalidates any pending close. */
   _collapse() {
     this.closeGeneration++;
     this.isOpen = false;
     if (this.trigger) this.trigger.ariaExpanded = "false";
-    if (this.dialog) {
-      this.dialog.ariaExpanded = "false";
-      this.dialog.classList.remove("expanded");
-    }
+    this.dialog?.classList.remove("expanded");
   }
   static Init() {
     Utils.onDocumentReady(() => {
       document.querySelectorAll(EXPANDING_CARD_SELECTOR).forEach((el) => {
-        if (el["Expressive_ExpandingCard"] == void 0) {
+        if (this.getInstance(el) === void 0) {
           this.init(el);
         }
       });
     });
   }
 };
+ExpandingCard.key = "Expressive_ExpandingCard";
 
 export {
   EXPANDING_CARD_SELECTOR,
   ExpandingCard
 };
-//# sourceMappingURL=chunk-DXGRXYYL.mjs.map
+//# sourceMappingURL=chunk-36GELQGX.mjs.map

package/dist/js/chunks/chunk-36GELQGX.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/components/expandingCard.ts"],
+  "sourcesContent": ["import { Utils, restoreAttribute } from \"../core/utils\";\nimport { Component, BaseOptions } from \"../core/component\";\n\nexport interface ExpandingCardOptions extends BaseOptions {\n  onOpen: (el: Element) => void;\n  onClose: (el: Element) => void;\n}\n\nconst _defaults: ExpandingCardOptions = {\n  onOpen: null,\n  onClose: null,\n};\n\nexport const EXPANDING_CARD_SELECTOR =\n  \"article.expanding-card:has(> dialog.expanding-card-dialog)\";\n\n/**\n * Morphs a compact card into a full-screen modal detail surface.\n */\nexport class ExpandingCard extends Component<ExpandingCardOptions> {\n  isOpen: boolean = false;\n  private readonly trigger: HTMLElement | null;\n  private readonly dialog: HTMLDialogElement | null;\n  private readonly closeButton: HTMLElement | null;\n  private closeGeneration = 0;\n  // Trigger attributes as they were before init, so destroy() can restore them.\n  private _initialTrigger: Record<string, string | null> = {};\n\n  constructor(el: HTMLElement, options: Partial<ExpandingCardOptions>) {\n    super(el, options);\n\n    this.dialog = this.el.querySelector(\n      \":scope > dialog.expanding-card-dialog\",\n    );\n    this.trigger = this.el.querySelector(\n      \":scope > .expanding-card-trigger, :scope > figure > .expanding-card-trigger\",\n    );\n    this.closeButton =\n      this.dialog?.querySelector(\".expanding-card-close\") ?? null;\n\n    if (this.trigger && this.dialog) {\n      for (const name of [\"aria-expanded\", \"aria-controls\", \"tabindex\", \"role\"])\n        this._initialTrigger[name] = this.trigger.getAttribute(name);\n      this.trigger.ariaExpanded = \"false\";\n      if (this.dialog.id)\n        this.trigger.setAttribute(\"aria-controls\", this.dialog.id);\n      if (!this.trigger.matches(\"a[href], button, input, select, textarea\")) {\n        this.trigger.tabIndex = 0;\n        this.trigger.setAttribute(\"role\", \"button\");\n      }\n      this._setupEventHandlers();\n    }\n  }\n\n  static get defaults(): ExpandingCardOptions {\n    return _defaults;\n  }\n\n  static key = 'Expressive_ExpandingCard';\n\n  destroy() {\n    this._events.abort();\n    this._collapse();\n    if (this.dialog?.open) this.dialog.close();\n    for (const [name, value] of Object.entries(this._initialTrigger)) restoreAttribute(this.trigger, name, value);\n    super.destroy();\n  }\n\n  private _setupEventHandlers = () => {\n    const { signal } = this._events;\n    this.trigger?.addEventListener(\"click\", this.open, { signal });\n    this.trigger?.addEventListener(\"keypress\", this._handleTriggerKeypress, { signal });\n    this.closeButton?.addEventListener(\"click\", this.close, { signal });\n    this.dialog?.addEventListener(\"cancel\", this._handleCancel, { signal });\n    this.dialog?.addEventListener(\"close\", this._handleNativeClose, { signal });\n  };\n\n  private _handleTriggerKeypress = (event: KeyboardEvent) => {\n    if (event.key === 'Enter' || event.key === \" \") {\n      event.preventDefault();\n      this.open();\n    }\n  };\n\n  private _handleCancel = (event: Event) => {\n    event.preventDefault();\n    this.close();\n  };\n\n  private _handleNativeClose = () => {\n    // A queued close event can arrive after a caller has reopened the dialog.\n    if (this.dialog.open) return;\n    // dialog.close() and <form method=\"dialog\"> bypass close(), so report here.\n    const wasOpen = this.isOpen;\n    this._collapse();\n    if (wasOpen) this._notify('close', this.options.onClose, { current: () => !this.isOpen });\n  };\n\n  /** Marks the card closed and invalidates any pending close. */\n  private _collapse() {\n    this.closeGeneration++;\n    this.isOpen = false;\n    if (this.trigger) this.trigger.ariaExpanded = \"false\";\n    this.dialog?.classList.remove(\"expanded\");\n  }\n\n  private _setTransitionOrigin = () => {\n    if (!this.dialog) return;\n    const card = this.el.getBoundingClientRect();\n    const media = this.el.querySelector<HTMLElement>(\n      \":scope > figure, :scope > img\",\n    );\n    const mediaRect = media?.getBoundingClientRect();\n    const set = (side: string, px: number) =>\n      this.dialog.style.setProperty(\n        `--md-comp-expanding-card-from-${side}`,\n        `${Math.max(0, px)}px`,\n      );\n\n    set(\"top\", card.top);\n    set(\"right\", window.innerWidth - card.right);\n    set(\"bottom\", window.innerHeight - card.bottom);\n    set(\"left\", card.left);\n    set(\"media-height\", mediaRect?.height ?? 0);\n  };\n\n  open: () => void = () => {\n    if (this.isOpen || !this.dialog || !this.trigger) return;\n    this.closeGeneration++;\n\n    this._setTransitionOrigin();\n    this.isOpen = true;\n    this.trigger.ariaExpanded = \"true\";\n    this.dialog.showModal();\n    // Commit the clipped start frame before asking CSS to expand it.\n    void this.dialog.offsetWidth;\n    this.dialog.classList.add(\"expanded\");\n    this.closeButton?.focus();\n\n    this._notify('open', this.options.onOpen, { current: () => this.isOpen });\n  };\n\n  close: () => void = () => {\n    if (!this.isOpen || !this.dialog || !this.trigger) return;\n    this._setTransitionOrigin();\n    this._collapse();\n    const generation = this.closeGeneration;\n\n    this._notify('close', this.options.onClose, { current: () => !this.isOpen });\n\n    const finish = () => {\n      if (generation !== this.closeGeneration || this.isOpen || !this.dialog.open) return;\n      this.dialog.close();\n      if (this.dialog.isConnected && this.trigger.isConnected) this.trigger.focus();\n    };\n    const reducedMotion = window.matchMedia(\n      \"(prefers-reduced-motion: reduce)\",\n    ).matches;\n    // Wait only for the container's actual clip transition, not arbitrary\n    // animations in consumer content. Cancellation also completes cleanup.\n    const transitions = reducedMotion ? [] : (this.dialog.getAnimations?.() ?? [])\n      .filter((animation) => (animation as CSSTransition).transitionProperty === \"clip-path\");\n    if (transitions.length === 0) finish();\n    else void Promise.allSettled(transitions.map((animation) => animation.finished)).then(finish);\n  };\n\n  static Init() {\n    Utils.onDocumentReady(() => {\n      document.querySelectorAll(EXPANDING_CARD_SELECTOR).forEach((el) => {\n        if (this.getInstance(el) === undefined) {\n          this.init(el as HTMLElement);\n        }\n      });\n    });\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/js/chunks/{chunk-74MXKKLN.mjs → chunk-3FKWIRHW.mjs}

@@ -1,12 +1,15 @@
 import {
   Component
-} from "./chunk-PD6HYHAE.mjs";
+} from "./chunk-EB2V4OKL.mjs";
+import {
+  afterFormReset
+} from "./chunk-67UNY7RH.mjs";
 
 // src/ts/components/characterCounter.ts
 var _defaults = Object.freeze({});
-var CharacterCounter = class _CharacterCounter extends Component {
+var CharacterCounter = class extends Component {
   constructor(el, options) {
-    super(el, {}, _CharacterCounter);
+    super(el, options);
     this.updateCounter = () => {
       const maxLength = parseInt(this.el.getAttribute("maxlength")), actualLength = this.el.value.length;
       this.isValidLength = actualLength <= maxLength;
@@ -17,49 +20,31 @@ var CharacterCounter = class _CharacterCounter extends Component {
       }
       this.counterEl.textContent = counterString;
     };
-    this.el["Expressive_CharacterCounter"] = this;
-    this.options = {
-      ..._CharacterCounter.defaults,
-      ...options
-    };
     this.isInvalid = false;
     this.isValidLength = false;
     this._setupCounter();
     this._setupEventHandlers();
+    this.updateCounter();
   }
   static get defaults() {
     return _defaults;
   }
-  /**
-   * Initializes instances of CharacterCounter.
-   * @param els HTML elements.
-   * @param options Component options.
-   */
-  static init(els, options = {}) {
-    return super.init(els, options, _CharacterCounter);
-  }
-  static getInstance(el) {
-    return el["Expressive_CharacterCounter"];
-  }
   destroy() {
-    this._removeEventHandlers();
-    this.el["Expressive_CharacterCounter"] = void 0;
+    super.destroy();
     this._removeCounter();
+    if (this.isInvalid) this.el.classList.remove("invalid");
   }
   _setupEventHandlers() {
-    this.el.addEventListener("focus", this.updateCounter, true);
-    this.el.addEventListener("input", this.updateCounter, true);
-  }
-  _removeEventHandlers() {
-    this.el.removeEventListener("focus", this.updateCounter, true);
-    this.el.removeEventListener("input", this.updateCounter, true);
+    const options = { capture: true, signal: this._events.signal };
+    this.el.addEventListener("focus", this.updateCounter, options);
+    this.el.addEventListener("input", this.updateCounter, options);
+    afterFormReset(this.el, this.updateCounter, this._events.signal);
   }
   _setupCounter() {
     this.counterEl = document.createElement("span");
     this.counterEl.classList.add("character-counter");
     this.counterEl.setAttribute("aria-live", "polite");
     this.counterEl.setAttribute("aria-atomic", "true");
-    this.counterEl.style.float = "right";
     this.counterEl.style.fontSize = "12px";
     this.counterEl.style.height = "1";
     this.el.parentElement.appendChild(this.counterEl);
@@ -78,8 +63,9 @@ var CharacterCounter = class _CharacterCounter extends Component {
     }
   }
 };
+CharacterCounter.key = "Expressive_CharacterCounter";
 
 export {
   CharacterCounter
 };
-//# sourceMappingURL=chunk-74MXKKLN.mjs.map
+//# sourceMappingURL=chunk-3FKWIRHW.mjs.map

package/dist/js/chunks/chunk-3FKWIRHW.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/components/characterCounter.ts"],
+  "sourcesContent": ["import { Component, BaseOptions } from '../core/component';\nimport { afterFormReset } from '../core/utils';\n\nconst _defaults = Object.freeze({});\n\ntype InputElement = HTMLInputElement | HTMLTextAreaElement;\n\nexport class CharacterCounter extends Component<BaseOptions> {\n  declare el: InputElement;\n  /** Stores the reference to the counter HTML element. */\n  counterEl: HTMLSpanElement;\n  /** Specifies whether the input is valid or not. */\n  isInvalid: boolean;\n  /** Specifies whether the input text has valid length or not. */\n  isValidLength: boolean;\n\n  constructor(el: HTMLInputElement | HTMLTextAreaElement, options: Partial<BaseOptions>) {\n    super(el, options);\n\n    this.isInvalid = false;\n    this.isValidLength = false;\n\n    this._setupCounter();\n    this._setupEventHandlers();\n    // A prefilled field shows its count and over-length state before focus.\n    this.updateCounter();\n  }\n\n  static get defaults(): BaseOptions {\n    return _defaults;\n  }\n\n  static key = 'Expressive_CharacterCounter';\n\n  destroy() {\n    super.destroy();\n    this._removeCounter();\n    if (this.isInvalid) this.el.classList.remove('invalid');\n  }\n\n  _setupEventHandlers() {\n    const options = { capture: true, signal: this._events.signal };\n    this.el.addEventListener('focus', this.updateCounter, options);\n    this.el.addEventListener('input', this.updateCounter, options);\n    // A form reset restores the value without an input event.\n    afterFormReset(this.el, this.updateCounter, this._events.signal);\n  }\n\n  _setupCounter() {\n    this.counterEl = document.createElement('span');\n    this.counterEl.classList.add('character-counter');\n    // The count is the whole point of the component and it changes as the\n    // user types, so it has to be a live region - otherwise a screen reader\n    // user reaches the limit without ever being told one existed. Polite so\n    // it waits for a pause instead of interrupting every keystroke, and\n    // atomic so \"18/20\" is read as one figure rather than a changed digit.\n    this.counterEl.setAttribute('aria-live', 'polite');\n    this.counterEl.setAttribute('aria-atomic', 'true');\n    this.counterEl.style.fontSize = '12px';\n    this.counterEl.style.height = '1';\n    this.el.parentElement.appendChild(this.counterEl);\n  }\n\n  _removeCounter() {\n    this.counterEl.remove();\n  }\n\n  updateCounter = () => {\n    const maxLength = parseInt(this.el.getAttribute('maxlength')),\n      actualLength = this.el.value.length;\n\n    this.isValidLength = actualLength <= maxLength;\n    let counterString = actualLength.toString();\n    if (maxLength) {\n      counterString += '/' + maxLength;\n      this._validateInput();\n    }\n    this.counterEl.textContent = counterString;\n  };\n\n  _validateInput() {\n    if (this.isValidLength && this.isInvalid) {\n      this.isInvalid = false;\n      this.el.classList.remove('invalid');\n    } else if (!this.isValidLength && !this.isInvalid) {\n      this.isInvalid = true;\n      this.el.classList.remove('valid');\n      this.el.classList.add('invalid');\n    }\n  }\n}\n"],
+  "mappings": ";;;;;;;;AAGA,IAAM,YAAY,OAAO,OAAO,CAAC,CAAC;AAI3B,IAAM,mBAAN,cAA+B,UAAuB;AAAA,EAS3D,YAAY,IAA4C,SAA+B;AACrF,UAAM,IAAI,OAAO;AAkDnB,yBAAgB,MAAM;AACpB,YAAM,YAAY,SAAS,KAAK,GAAG,aAAa,WAAW,CAAC,GAC1D,eAAe,KAAK,GAAG,MAAM;AAE/B,WAAK,gBAAgB,gBAAgB;AACrC,UAAI,gBAAgB,aAAa,SAAS;AAC1C,UAAI,WAAW;AACb,yBAAiB,MAAM;AACvB,aAAK,eAAe;AAAA,MACtB;AACA,WAAK,UAAU,cAAc;AAAA,IAC/B;AA3DE,SAAK,YAAY;AACjB,SAAK,gBAAgB;AAErB,SAAK,cAAc;AACnB,SAAK,oBAAoB;AAEzB,SAAK,cAAc;AAAA,EACrB;AAAA,EAEA,WAAW,WAAwB;AACjC,WAAO;AAAA,EACT;AAAA,EAIA,UAAU;AACR,UAAM,QAAQ;AACd,SAAK,eAAe;AACpB,QAAI,KAAK,UAAW,MAAK,GAAG,UAAU,OAAO,SAAS;AAAA,EACxD;AAAA,EAEA,sBAAsB;AACpB,UAAM,UAAU,EAAE,SAAS,MAAM,QAAQ,KAAK,QAAQ,OAAO;AAC7D,SAAK,GAAG,iBAAiB,SAAS,KAAK,eAAe,OAAO;AAC7D,SAAK,GAAG,iBAAiB,SAAS,KAAK,eAAe,OAAO;AAE7D,mBAAe,KAAK,IAAI,KAAK,eAAe,KAAK,QAAQ,MAAM;AAAA,EACjE;AAAA,EAEA,gBAAgB;AACd,SAAK,YAAY,SAAS,cAAc,MAAM;AAC9C,SAAK,UAAU,UAAU,IAAI,mBAAmB;AAMhD,SAAK,UAAU,aAAa,aAAa,QAAQ;AACjD,SAAK,UAAU,aAAa,eAAe,MAAM;AACjD,SAAK,UAAU,MAAM,WAAW;AAChC,SAAK,UAAU,MAAM,SAAS;AAC9B,SAAK,GAAG,cAAc,YAAY,KAAK,SAAS;AAAA,EAClD;AAAA,EAEA,iBAAiB;AACf,SAAK,UAAU,OAAO;AAAA,EACxB;AAAA,EAeA,iBAAiB;AACf,QAAI,KAAK,iBAAiB,KAAK,WAAW;AACxC,WAAK,YAAY;AACjB,WAAK,GAAG,UAAU,OAAO,SAAS;AAAA,IACpC,WAAW,CAAC,KAAK,iBAAiB,CAAC,KAAK,WAAW;AACjD,WAAK,YAAY;AACjB,WAAK,GAAG,UAAU,OAAO,OAAO;AAChC,WAAK,GAAG,UAAU,IAAI,SAAS;AAAA,IACjC;AAAA,EACF;AACF;AAnFa,iBAyBJ,MAAM;",
+  "names": []
+}