@expressivecss/expressive 0.11.0 → 0.13.1

package/dist/js/chunks/chunk-QKWPQK5N.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/behaviors/forms.ts"],
+  "sourcesContent": ["import { Utils } from '../core/utils';\n\nexport class Forms {\n  /**\n   * Checks if the label has validation and apply\n   * the correct class and styles\n   * @param textfield\n   */\n  static validateField(textfield: HTMLInputElement) {\n    if (!textfield) {\n      console.error('No text field element found');\n      return;\n    }\n\n    const hasLength = textfield.getAttribute('data-length') !== null;\n    const lenAttr = parseInt(textfield.getAttribute('data-length'));\n    const len = textfield.value.length;\n\n    if (\n      len === 0 &&\n      textfield.validity.badInput === false &&\n      !textfield.required &&\n      textfield.classList.contains('validate')\n    ) {\n      textfield.classList.remove('invalid');\n    } else if (textfield.classList.contains('validate')) {\n      // Check for character counter attributes\n      if (\n        (textfield.validity.valid && hasLength && len <= lenAttr) ||\n        (textfield.validity.valid && !hasLength)\n      ) {\n        textfield.classList.remove('invalid');\n      } else {\n        textfield.classList.add('invalid');\n      }\n    }\n  }\n\n  /**\n   * Resizes the given TextArea after updating the\n   *  value content dynamically.\n   * @param e EventTarget\n   */\n  static textareaAutoResize(e: EventTarget) {\n    const textarea = e as HTMLTextAreaElement;\n    if (!textarea) return;\n\n    // Measure the textarea against itself: collapse it to its natural height,\n    // then read the content height back. `.expressive-textarea` is\n    // `overflow-y: hidden`, so scrollHeight is the full content height and\n    // offsetHeight - clientHeight is exactly the borders (no scrollbar to\n    // account for) - which border-box sizing needs added back.\n    //\n    // This replaces a mirror div that the value was copied into via\n    // `innerHTML = innerHTML.replace(...)` - a full serialize and reparse of\n    // the text on every keystroke, plus getComputedStyle and seven style\n    // writes, run twice per keystroke because it was bound to keydown and\n    // keyup both.\n    if (!textarea.hasAttribute('original-height')) {\n      textarea.setAttribute('original-height', textarea.getBoundingClientRect().height.toString());\n    }\n    const originalHeight = parseInt(textarea.getAttribute('original-height'));\n    if (isNaN(originalHeight)) return;\n\n    textarea.style.height = 'auto';\n    // Three reads after a single write: one layout flush for the whole resize.\n    const borders = textarea.offsetHeight - textarea.clientHeight;\n    const contentHeight = textarea.scrollHeight + borders;\n    textarea.style.height = Math.max(originalHeight, contentHeight) + 'px';\n  }\n\n  static Init() {\n    Utils.onDocumentReady(() => {\n      document.addEventListener('change', (e: KeyboardEvent) => {\n        const target = <HTMLInputElement>e.target;\n        if (target instanceof HTMLInputElement && target.type === 'file') {\n          const zone = target.closest('.drop-zone');\n          if (zone) Forms.listDropZoneFiles(zone, target);\n        }\n        if (target instanceof HTMLInputElement) {\n          // The sibling-label loop that used to live here compared\n          // `tagName == 'label'` (tagName is uppercase) so it never matched,\n          // and no rule in the Sass styles `label.active` anyway - the\n          // floating label is driven by CSS, not by a class from here.\n          Forms.validateField(target);\n        }\n      });\n\n      document.addEventListener('keyup', (e: KeyboardEvent) => {\n        const target = <HTMLInputElement>e.target;\n        // Radio and Checkbox focus class\n        if (target instanceof HTMLInputElement && ['radio', 'checkbox'].includes(target.type)) {\n          // TAB, check if tabbing to radio or checkbox.\n          if (e.key === Utils.keys.TAB) {\n            target.classList.add('tabbed');\n            target.addEventListener('blur', () => target.classList.remove('tabbed'), {\n              once: true\n            });\n          }\n        }\n      });\n\n      document.addEventListener('click', Forms.togglePassword);\n      // Capture, so the password is hidden again before any submit handler\n      // reads the form or the browser offers to save it.\n      document.addEventListener('submit', Forms.resetFormExtras, true);\n      document.addEventListener('reset', Forms.resetFormExtras, true);\n      for (const type of ['dragenter', 'dragover', 'dragleave', 'drop']) {\n        document.addEventListener(type, Forms.markDropZone);\n      }\n\n      document.querySelectorAll('.expressive-textarea').forEach((textArea: HTMLTextAreaElement) => {\n        Forms.InitTextarea(textArea);\n      });\n\n      // File Input Path\n      document\n        .querySelectorAll('.file-field input[type=\"file\"]')\n        .forEach((fileInput: HTMLInputElement) => {\n          Forms.InitFileInputPath(fileInput);\n        });\n    });\n  }\n\n  /**\n   * A .password-toggle button shows or hides the password in its field. The\n   * button's own name stays put (\"Show password\"); aria-pressed carries the\n   * state, so there is no generated text to translate.\n   */\n  static togglePassword(e: MouseEvent) {\n    const button = (<Element>e.target).closest?.('.password-toggle');\n    const input = button?.closest('.field')?.querySelector<HTMLInputElement>(\n      'input[type=\"password\"], input[data-password]'\n    );\n    if (!input) return;\n    const show = input.type === 'password';\n    // Marked so the input is still found once it has become type=\"text\".\n    input.toggleAttribute('data-password', show);\n    input.type = show ? 'text' : 'password';\n    button.setAttribute('aria-pressed', String(show));\n  }\n\n  /**\n   * A revealed password goes back to type=\"password\" when its form is\n   * submitted or reset, so it is never sent or autofilled as plain text and\n   * a reset field does not stay revealed. A reset form also drops the file\n   * lists it would otherwise leave showing: reset fires no change event.\n   */\n  static resetFormExtras(e: Event) {\n    const form = e.target;\n    if (!(form instanceof HTMLFormElement)) return;\n    form.querySelectorAll<HTMLInputElement>('input[data-password]').forEach((input) => {\n      input.removeAttribute('data-password');\n      input.type = 'password';\n      input.closest('.field')?.querySelector('.password-toggle')?.setAttribute('aria-pressed', 'false');\n    });\n    if (e.type === 'reset') {\n      form.querySelectorAll('.drop-zone-files').forEach((list) => list.replaceChildren());\n      form.querySelectorAll('.drop-zone.dragover').forEach((zone) => zone.classList.remove('dragover'));\n    }\n  }\n\n  /**\n   * The native file input covers its .drop-zone, so the browser already takes\n   * a dropped file. This only shows the drag: the input is the topmost\n   * element, so every drag event over the zone targets it and leaving it is\n   * leaving the zone.\n   */\n  static markDropZone(e: DragEvent) {\n    const input = <Element>e.target;\n    if (!(input instanceof HTMLInputElement) || input.type !== 'file') return;\n    const zone = input.closest('.drop-zone');\n    if (!zone) return;\n    const over = e.type === 'dragenter' || e.type === 'dragover';\n    zone.classList.toggle('dragover', over && !input.disabled);\n  }\n\n  /** Lists the chosen files, name and size, in the zone's .drop-zone-files. */\n  static listDropZoneFiles(zone: Element, input: HTMLInputElement) {\n    const list = zone.querySelector('.drop-zone-files');\n    if (!list) return;\n    const size = (bytes: number) => {\n      const [value, unit] =\n        bytes >= 1e6 ? [bytes / 1e6, 'megabyte'] : bytes >= 1e3 ? [bytes / 1e3, 'kilobyte'] : [bytes, 'byte'];\n      return new Intl.NumberFormat(undefined, { style: 'unit', unit, maximumFractionDigits: 1 }).format(value);\n    };\n    list.replaceChildren(\n      ...Array.from(input.files ?? [], (file) => {\n        const item = document.createElement('li');\n        const name = document.createElement('span');\n        const meta = document.createElement('span');\n        name.textContent = file.name;\n        meta.textContent = size(file.size);\n        item.append(name, meta);\n        return item;\n      })\n    );\n  }\n\n  static InitTextarea(textarea: HTMLTextAreaElement) {\n    // Save Data in Element\n    textarea.setAttribute('original-height', textarea.getBoundingClientRect().height.toString());\n    Forms.textareaAutoResize(textarea);\n    // `input` rather than keydown + keyup: it fires once per actual value\n    // change and also covers paste, drag-drop and IME composition, which the\n    // key events missed.\n    textarea.addEventListener('input', (e) => Forms.textareaAutoResize(e.target));\n  }\n\n  static InitFileInputPath(fileInput: HTMLInputElement) {\n    fileInput.addEventListener('change', () => {\n      const fileField = fileInput.closest('.file-field');\n      const pathInput = <HTMLInputElement>fileField.querySelector('input.file-path');\n      const files = fileInput.files;\n      const filenames = [];\n      for (let i = 0; i < files.length; i++) {\n        filenames.push(files[i].name);\n      }\n      pathInput.value = filenames.join(', ');\n      pathInput.dispatchEvent(\n        new Event('change', { bubbles: true, cancelable: true, composed: true })\n      );\n    });\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/js/chunks/{chunk-FRB7TOCS.mjs → chunk-QV2JAWIZ.mjs}

@@ -1,6 +1,6 @@
 import {
   Component
-} from "./chunk-QSQ24FYT.mjs";
+} from "./chunk-LTWPGFBR.mjs";
 
 // src/ts/components/scrollspy.ts
 var _defaultGetActiveElement = (id) => `a[href="#${id}"]`;
@@ -132,4 +132,4 @@ var ScrollSpy = _ScrollSpy;
 export {
   ScrollSpy
 };
-//# sourceMappingURL=chunk-FRB7TOCS.mjs.map
+//# sourceMappingURL=chunk-QV2JAWIZ.mjs.map

package/dist/js/chunks/{chunk-N3UHGN3N.mjs → chunk-QVVEWBOF.mjs}

@@ -1,9 +1,9 @@
 import {
   Utils
-} from "./chunk-MISGHDUU.mjs";
+} from "./chunk-6OMRGML6.mjs";
 import {
   Component
-} from "./chunk-QSQ24FYT.mjs";
+} from "./chunk-LTWPGFBR.mjs";
 
 // src/ts/components/expandingCard.ts
 var _defaults = {
@@ -172,4 +172,4 @@ export {
   EXPANDING_CARD_SELECTOR,
   ExpandingCard
 };
-//# sourceMappingURL=chunk-N3UHGN3N.mjs.map
+//# sourceMappingURL=chunk-QVVEWBOF.mjs.map

package/dist/js/chunks/chunk-RHRQKTTX.mjs

@@ -0,0 +1,139 @@
+import {
+  COLORS,
+  LineChart,
+  svgNode
+} from "./chunk-O5XPWXIQ.mjs";
+
+// src/ts/components/radialChart.ts
+var RADIUS = 46;
+var FILL = 0.8;
+var RadialChart = class extends LineChart {
+  get _type() {
+    return "radial-chart";
+  }
+  get _key() {
+    return "Expressive_RadialChart";
+  }
+  get _points() {
+    return false;
+  }
+  get _circular() {
+    return true;
+  }
+  get _gauge() {
+    return this.el.classList.contains("gauge");
+  }
+  static init(els, options = {}) {
+    return super.init(els, options);
+  }
+  static getInstance(el) {
+    return el["Expressive_RadialChart"];
+  }
+  show(index) {
+    if (!this._tooltip || index === this.activeIndex) return;
+    super.show(index);
+    this._rings.forEach((ring, i) => ring.classList.toggle("active", i === index));
+    if (this._tooltip.hidden) return;
+    const color = this._color(index);
+    this._tooltip.querySelectorAll("[data-series]").forEach((span) => {
+      span.dataset.series = color;
+    });
+  }
+  /** The tooltip sits where the ring's fill ends. */
+  _place(index) {
+    const turn = this._turn(this._fractions[index]);
+    const r = this._radii[index];
+    const [x, y] = [r * Math.sin(turn * 2 * Math.PI), -r * Math.cos(turn * 2 * Math.PI)];
+    this._tooltip.style.left = `${50 + x}%`;
+    this._tooltip.style.top = `${(50 + y) / (this._gauge ? 50 : 100) * 100}%`;
+    this._tooltip.classList.toggle("end", x > 0);
+  }
+  _color(index) {
+    return String(index % COLORS + 1);
+  }
+  /** A fraction of the ring as a turn clockwise from the top. */
+  _turn(fraction) {
+    return this._gauge ? fraction / 2 - 0.25 : fraction;
+  }
+  /** For more than one row, a legend of every row with its color and cell. */
+  _guides() {
+    if (this.labels.length < 2) return [];
+    const legend = document.createElement("ul");
+    legend.className = "radial-chart-legend";
+    legend.setAttribute("aria-hidden", "true");
+    const text = this.series[0].text;
+    legend.append(...this.labels.map((label, i) => {
+      const li = document.createElement("li");
+      li.dataset.series = this._color(i);
+      const [name, value] = [label, text[i]].map((content) => {
+        const span = document.createElement("span");
+        span.textContent = content;
+        return span;
+      });
+      li.append(name, value);
+      return li;
+    }));
+    return [legend];
+  }
+  /** The ring under the pointer by its distance from the middle, or -1. */
+  _indexAt(e) {
+    const box = this._plot.getBoundingClientRect();
+    const [x, y] = [e.clientX - box.left - box.width / 2, e.clientY - box.top - box.width / 2];
+    if (this._gauge && y > 0) return -1;
+    const distance = Math.hypot(x, y) / box.width * 100;
+    const step = this._radii.length > 1 ? this._radii[0] - this._radii[1] : this._width;
+    return this._radii.findIndex((r) => Math.abs(distance - r) <= step / 2);
+  }
+  /**
+   * An SVG of rings in a -50 to 50 box, the top half for a gauge. Each row
+   * is a track circle and a fill circle whose dash is its share; CSS draws
+   * them from --radial-chart-dash. The total is HTML over it.
+   */
+  _draw() {
+    const style = getComputedStyle(this.el);
+    const token = (name, fallback) => {
+      const value = parseFloat(style.getPropertyValue(`--md-comp-radial-chart-${name}`));
+      return Number.isFinite(value) ? value : fallback;
+    };
+    const count = this.labels.length;
+    let [width, gap] = [Math.max(0, token("thickness", 8)), Math.max(0, token("gap", 2))];
+    const scale = Math.min(1, RADIUS * FILL / (count * width + (count - 1) * gap || 1));
+    [width, gap] = [width * scale, gap * scale];
+    this._width = width;
+    this._radii = this.labels.map((_, i) => RADIUS - width / 2 - i * (width + gap));
+    const max = [parseFloat(this.el.dataset.max ?? ""), this.options.max ?? NaN, 100].find((value) => value > 0);
+    this._fractions = this.series[0].values.map((value) => Math.min(1, Math.max(0, (value ?? 0) / max)));
+    const gauge = this._gauge;
+    const svg = svgNode("svg", { viewBox: gauge ? "-50 -50 100 50" : "-50 -50 100 100", focusable: "false" });
+    const transform = gauge ? "rotate(180)" : "rotate(-90)";
+    const span = gauge ? 0.5 : 1;
+    this._rings = this._radii.map((r, i) => {
+      const length = 2 * Math.PI * r;
+      const circle = (name, fraction, capped) => {
+        const ring2 = svgNode("circle", { class: name, r: r.toFixed(3), transform, "stroke-width": width.toFixed(3) });
+        const dash = Math.max(1e-3, fraction * span * length - (capped ? width : 0));
+        ring2.style.setProperty("--radial-chart-dash", `${dash.toFixed(3)} ${length.toFixed(3)}`);
+        if (capped) ring2.style.setProperty("--radial-chart-offset", (-width / 2).toFixed(3));
+        return ring2;
+      };
+      const ring = circle("radial-chart-ring", this._fractions[i], true);
+      ring.dataset.series = this._color(i);
+      if (!this._fractions[i]) ring.classList.add("empty");
+      svg.append(circle("radial-chart-track", 1, gauge), ring);
+      return ring;
+    });
+    const rings = document.createElement("div");
+    rings.className = "radial-chart-rings";
+    rings.setAttribute("aria-hidden", "true");
+    rings.style.setProperty("--radial-chart-middle", `${(this._radii[count - 1] - this._width / 2) * 2}%`);
+    rings.append(svg);
+    const total = this._total("radial-chart-total");
+    if (total) rings.append(total);
+    return rings;
+  }
+};
+
+export {
+  RadialChart
+};
+//# sourceMappingURL=chunk-RHRQKTTX.mjs.map

package/dist/js/chunks/chunk-RHRQKTTX.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/components/radialChart.ts"],
+  "sourcesContent": ["import { InitElements, InitElement } from '../core/component';\nimport { COLORS, LineChart, LineChartOptions, svgNode as node } from './lineChart';\n\nexport type RadialChartOptions = LineChartOptions;\n\n/** The outer ring's outer edge in a 100-unit box. */\nconst RADIUS = 46;\n/** The rings never fill more of the radius than this, leaving a middle. */\nconst FILL = 0.8;\n\n/**\n * Radial chart. It reads its <table> like LineChart, but draws each row of\n * the first value column as a ring, outermost first, filled clockwise from\n * the top as a share of `data-max` above zero (100 by default). With `.gauge` the rings\n * are half circles over the middle. A <tfoot> row shows in the middle, and\n * a legend lists the rows when there is more than one. Further columns show\n * in the tooltip.\n *\n * Re-run `RadialChart.init(el)` after changing the table or the ring tokens.\n */\nexport class RadialChart extends LineChart {\n  // No initializers: LineChart's constructor draws before they would run.\n  /** Each ring's middle radius, and their shared width. */\n  private _radii: number[];\n  private _width: number;\n  /** Each row's share of the maximum, from 0 to 1. */\n  private _fractions: number[];\n  private _rings: SVGCircleElement[];\n\n  protected get _type() {\n    return 'radial-chart';\n  }\n\n  protected get _key() {\n    return 'Expressive_RadialChart';\n  }\n\n  protected get _points() {\n    return false;\n  }\n\n  protected get _circular() {\n    return true;\n  }\n\n  private get _gauge() {\n    return this.el.classList.contains('gauge');\n  }\n\n  static init(el: HTMLElement, options?: Partial<RadialChartOptions>): RadialChart;\n  static init(els: InitElements<InitElement>, options?: Partial<RadialChartOptions>): RadialChart[];\n  static init(\n    els: HTMLElement | InitElements<InitElement>,\n    options: Partial<RadialChartOptions> = {}\n  ): RadialChart | RadialChart[] {\n    return super.init(els as HTMLElement, options) as RadialChart | RadialChart[];\n  }\n\n  static getInstance(el: HTMLElement): RadialChart {\n    return el['Expressive_RadialChart'];\n  }\n\n  show(index: number) {\n    if (!this._tooltip || index === this.activeIndex) return;\n    super.show(index);\n    this._rings.forEach((ring, i) => ring.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    const color = this._color(index);\n    this._tooltip.querySelectorAll<HTMLElement>('[data-series]').forEach((span) => {\n      span.dataset.series = color;\n    });\n  }\n\n  /** The tooltip sits where the ring's fill ends. */\n  protected _place(index: number) {\n    const turn = this._turn(this._fractions[index]);\n    const r = this._radii[index];\n    const [x, y] = [r * Math.sin(turn * 2 * Math.PI), -r * Math.cos(turn * 2 * Math.PI)];\n    this._tooltip.style.left = `${50 + x}%`;\n    this._tooltip.style.top = `${((50 + y) / (this._gauge ? 50 : 100)) * 100}%`;\n    // On the right half it opens leftwards, over the rings.\n    this._tooltip.classList.toggle('end', x > 0);\n  }\n\n  private _color(index: number) {\n    return String((index % COLORS) + 1);\n  }\n\n  /** A fraction of the ring as a turn clockwise from the top. */\n  private _turn(fraction: number) {\n    return this._gauge ? fraction / 2 - 0.25 : fraction;\n  }\n\n  /** For more than one row, a legend of every row with its color and cell. */\n  protected _guides(): Element[] {\n    if (this.labels.length < 2) return [];\n    const legend = document.createElement('ul');\n    legend.className = 'radial-chart-legend';\n    legend.setAttribute('aria-hidden', 'true');\n    const text = this.series[0].text;\n    legend.append(...this.labels.map((label, i) => {\n      const li = document.createElement('li');\n      li.dataset.series = this._color(i);\n      const [name, value] = [label, text[i]].map((content) => {\n        const span = document.createElement('span');\n        span.textContent = content;\n        return span;\n      });\n      li.append(name, value);\n      return li;\n    }));\n    return [legend];\n  }\n\n  /** The ring under the pointer by its distance from the middle, or -1. */\n  protected _indexAt(e: PointerEvent) {\n    const box = this._plot.getBoundingClientRect();\n    // The middle is half the width down in both shapes.\n    const [x, y] = [e.clientX - box.left - box.width / 2, e.clientY - box.top - box.width / 2];\n    if (this._gauge && y > 0) return -1;\n    // The distance in the SVG's 100-unit box; a gap belongs to a ring beside it.\n    const distance = (Math.hypot(x, y) / box.width) * 100;\n    const step = this._radii.length > 1 ? this._radii[0] - this._radii[1] : this._width;\n    return this._radii.findIndex((r) => Math.abs(distance - r) <= step / 2);\n  }\n\n  /**\n   * An SVG of rings in a -50 to 50 box, the top half for a gauge. Each row\n   * is a track circle and a fill circle whose dash is its share; CSS draws\n   * them from --radial-chart-dash. The total is HTML over it.\n   */\n  protected _draw(): Element {\n    const style = getComputedStyle(this.el);\n    const token = (name: string, fallback: number) => {\n      const value = parseFloat(style.getPropertyValue(`--md-comp-radial-chart-${name}`));\n      return Number.isFinite(value) ? value : fallback;\n    };\n    const count = this.labels.length;\n    let [width, gap] = [Math.max(0, token('thickness', 8)), Math.max(0, token('gap', 2))];\n    // Too many rings to leave a middle thin, with their gaps, to fit.\n    // ponytail: past about 18 rings they are hairlines; that many values want a bar chart.\n    const scale = Math.min(1, (RADIUS * FILL) / (count * width + (count - 1) * gap || 1));\n    [width, gap] = [width * scale, gap * scale];\n    this._width = width;\n    this._radii = this.labels.map((_, i) => RADIUS - width / 2 - i * (width + gap));\n    // A maximum of zero or less means nothing, so it falls back.\n    const max = [parseFloat(this.el.dataset.max ?? ''), this.options.max ?? NaN, 100].find((value) => value > 0)!;\n    this._fractions = this.series[0].values.map((value) => Math.min(1, Math.max(0, (value ?? 0) / max)));\n\n    const gauge = this._gauge;\n    const svg = node('svg', { viewBox: gauge ? '-50 -50 100 50' : '-50 -50 100 100', focusable: 'false' });\n    // A circle starts at three o'clock; turn it to the top, or to nine for a gauge.\n    const transform = gauge ? 'rotate(180)' : 'rotate(-90)';\n    const span = gauge ? 0.5 : 1;\n    this._rings = this._radii.map((r, i) => {\n      const length = 2 * Math.PI * r;\n      // Round caps reach half the width past each end of a dash, so a capped\n      // dash is one width shorter and starts half a width in. One shorter\n      // than the width is a dot at the start.\n      const circle = (name: string, fraction: number, capped: boolean) => {\n        const ring = node('circle', { class: name, r: r.toFixed(3), transform, 'stroke-width': width.toFixed(3) });\n        const dash = Math.max(0.001, fraction * span * length - (capped ? width : 0));\n        ring.style.setProperty('--radial-chart-dash', `${dash.toFixed(3)} ${length.toFixed(3)}`);\n        if (capped) ring.style.setProperty('--radial-chart-offset', (-width / 2).toFixed(3));\n        return ring;\n      };\n      const ring = circle('radial-chart-ring', this._fractions[i], true) as SVGCircleElement;\n      ring.dataset.series = this._color(i);\n      // An empty ring would still draw its round cap.\n      if (!this._fractions[i]) ring.classList.add('empty');\n      // Only a gauge's track has ends to round.\n      svg.append(circle('radial-chart-track', 1, gauge), ring);\n      return ring;\n    });\n\n    const rings = document.createElement('div');\n    rings.className = 'radial-chart-rings';\n    rings.setAttribute('aria-hidden', 'true');\n    rings.style.setProperty('--radial-chart-middle', `${(this._radii[count - 1] - this._width / 2) * 2}%`);\n    rings.append(svg);\n\n    const total = this._total('radial-chart-total');\n    if (total) rings.append(total);\n    return rings;\n  }\n}\n"],
+  "mappings": "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",
+  "names": ["ring"]
+}

package/dist/js/chunks/chunk-SPETGK25.mjs

@@ -0,0 +1,59 @@
+import {
+  COLORS,
+  LineChart
+} from "./chunk-O5XPWXIQ.mjs";
+
+// src/ts/components/columnChart.ts
+var ColumnChart = class extends LineChart {
+  get _type() {
+    return "column-chart";
+  }
+  get _key() {
+    return "Expressive_ColumnChart";
+  }
+  get _fromZero() {
+    return true;
+  }
+  get _points() {
+    return false;
+  }
+  static init(els, options = {}) {
+    return super.init(els, options);
+  }
+  static getInstance(el) {
+    return el["Expressive_ColumnChart"];
+  }
+  _draw(drawn = this.series) {
+    const columns = document.createElement("div");
+    columns.className = "column-chart-columns";
+    columns.setAttribute("aria-hidden", "true");
+    const clamp = (value, y = drawn[0]?.y ?? this._y) => Math.min(100, Math.max(0, y(value)));
+    columns.style.setProperty("--zero", `${clamp(0)}%`);
+    this._plot.style.setProperty("--rows", String(this.labels.length));
+    this.labels.forEach((_, index) => {
+      const row = document.createElement("div");
+      drawn.forEach((series) => {
+        const to = series.tops[index];
+        const from = series.base?.[index] ?? 0;
+        if (series.base && (to === null || from === null)) return;
+        const column = document.createElement("span");
+        if (to !== null) {
+          column.className = series.className;
+          column.dataset.series = String(this.series.indexOf(series) % COLORS + 1);
+          column.classList.toggle("negative", !series.base && to < from);
+          column.style.setProperty("--top", `${clamp(Math.max(from, to), series.y)}%`);
+          column.style.setProperty("--bottom", `${100 - clamp(Math.min(from, to), series.y)}%`);
+          if (this._horizontal) column.dataset.text = series.text[index];
+        }
+        row.append(column);
+      });
+      columns.append(row);
+    });
+    return columns;
+  }
+};
+
+export {
+  ColumnChart
+};
+//# sourceMappingURL=chunk-SPETGK25.mjs.map

package/dist/js/chunks/chunk-SPETGK25.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/components/columnChart.ts"],
+  "sourcesContent": ["import { InitElements, InitElement } from '../core/component';\nimport { COLORS, LineChart, LineChartOptions } from './lineChart';\n\nexport type ColumnChartOptions = LineChartOptions;\n\n/**\n * Column chart. It reads its <table>, scales, labels and tooltip like\n * LineChart, but draws each row as a group of columns from zero, or one\n * column of segments with `stacked`. Columns are HTML clipped to their\n * value, so their rounded corners keep their shape at any size.\n *\n * Re-run `ColumnChart.init(el)` after changing the table.\n */\nexport class ColumnChart extends LineChart {\n  protected get _type() {\n    return 'column-chart';\n  }\n\n  protected get _key() {\n    return 'Expressive_ColumnChart';\n  }\n\n  protected get _fromZero() {\n    return true;\n  }\n\n  protected get _points() {\n    return false;\n  }\n\n  static init(el: HTMLElement, options?: Partial<ColumnChartOptions>): ColumnChart;\n  static init(els: InitElements<InitElement>, options?: Partial<ColumnChartOptions>): ColumnChart[];\n  static init(\n    els: HTMLElement | InitElements<InitElement>,\n    options: Partial<ColumnChartOptions> = {}\n  ): ColumnChart | ColumnChart[] {\n    return super.init(els as HTMLElement, options) as ColumnChart | ColumnChart[];\n  }\n\n  static getInstance(el: HTMLElement): ColumnChart {\n    return el['Expressive_ColumnChart'];\n  }\n\n  protected _draw(drawn = this.series): Element {\n    const columns = document.createElement('div');\n    columns.className = 'column-chart-columns';\n    columns.setAttribute('aria-hidden', 'true');\n    const clamp = (value: number, y = drawn[0]?.y ?? this._y) => Math.min(100, Math.max(0, y(value)));\n    // Columns grow from zero, or from the plot edge when zero is off the scale.\n    columns.style.setProperty('--zero', `${clamp(0)}%`);\n    this._plot.style.setProperty('--rows', String(this.labels.length));\n\n    this.labels.forEach((_, index) => {\n      const row = document.createElement('div');\n      drawn.forEach((series) => {\n        // A stacked segment above a gap has no known base, so it is left out.\n        const to = series.tops[index];\n        const from = series.base?.[index] ?? 0;\n        if (series.base && (to === null || from === null)) return;\n        const column = document.createElement('span');\n        // A gap in a grouped row keeps its empty slot, so the series stay aligned.\n        if (to !== null) {\n          column.className = series.className;\n          column.dataset.series = String((this.series.indexOf(series) % COLORS) + 1);\n          // A stacked segment never hangs from zero, so it keeps the top rounding.\n          column.classList.toggle('negative', !series.base && to < from);\n          column.style.setProperty('--top', `${clamp(Math.max(from, to), series.y)}%`);\n          column.style.setProperty('--bottom', `${100 - clamp(Math.min(from, to), series.y)}%`);\n          // The cell text, which a bar chart with .values writes along its bar.\n          if (this._horizontal) column.dataset.text = series.text[index];\n        }\n        row.append(column);\n      });\n      columns.append(row);\n    });\n    return columns;\n  }\n}\n"],
+  "mappings": ";;;;;;AAaO,IAAM,cAAN,cAA0B,UAAU;AAAA,EACzC,IAAc,QAAQ;AACpB,WAAO;AAAA,EACT;AAAA,EAEA,IAAc,OAAO;AACnB,WAAO;AAAA,EACT;AAAA,EAEA,IAAc,YAAY;AACxB,WAAO;AAAA,EACT;AAAA,EAEA,IAAc,UAAU;AACtB,WAAO;AAAA,EACT;AAAA,EAIA,OAAO,KACL,KACA,UAAuC,CAAC,GACX;AAC7B,WAAO,MAAM,KAAK,KAAoB,OAAO;AAAA,EAC/C;AAAA,EAEA,OAAO,YAAY,IAA8B;AAC/C,WAAO,GAAG,wBAAwB;AAAA,EACpC;AAAA,EAEU,MAAM,QAAQ,KAAK,QAAiB;AAC5C,UAAM,UAAU,SAAS,cAAc,KAAK;AAC5C,YAAQ,YAAY;AACpB,YAAQ,aAAa,eAAe,MAAM;AAC1C,UAAM,QAAQ,CAAC,OAAe,IAAI,MAAM,CAAC,GAAG,KAAK,KAAK,OAAO,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,EAAE,KAAK,CAAC,CAAC;AAEhG,YAAQ,MAAM,YAAY,UAAU,GAAG,MAAM,CAAC,CAAC,GAAG;AAClD,SAAK,MAAM,MAAM,YAAY,UAAU,OAAO,KAAK,OAAO,MAAM,CAAC;AAEjE,SAAK,OAAO,QAAQ,CAAC,GAAG,UAAU;AAChC,YAAM,MAAM,SAAS,cAAc,KAAK;AACxC,YAAM,QAAQ,CAAC,WAAW;AAExB,cAAM,KAAK,OAAO,KAAK,KAAK;AAC5B,cAAM,OAAO,OAAO,OAAO,KAAK,KAAK;AACrC,YAAI,OAAO,SAAS,OAAO,QAAQ,SAAS,MAAO;AACnD,cAAM,SAAS,SAAS,cAAc,MAAM;AAE5C,YAAI,OAAO,MAAM;AACf,iBAAO,YAAY,OAAO;AAC1B,iBAAO,QAAQ,SAAS,OAAQ,KAAK,OAAO,QAAQ,MAAM,IAAI,SAAU,CAAC;AAEzE,iBAAO,UAAU,OAAO,YAAY,CAAC,OAAO,QAAQ,KAAK,IAAI;AAC7D,iBAAO,MAAM,YAAY,SAAS,GAAG,MAAM,KAAK,IAAI,MAAM,EAAE,GAAG,OAAO,CAAC,CAAC,GAAG;AAC3E,iBAAO,MAAM,YAAY,YAAY,GAAG,MAAM,MAAM,KAAK,IAAI,MAAM,EAAE,GAAG,OAAO,CAAC,CAAC,GAAG;AAEpF,cAAI,KAAK,YAAa,QAAO,QAAQ,OAAO,OAAO,KAAK,KAAK;AAAA,QAC/D;AACA,YAAI,OAAO,MAAM;AAAA,MACnB,CAAC;AACD,cAAQ,OAAO,GAAG;AAAA,IACpB,CAAC;AACD,WAAO;AAAA,EACT;AACF;",
+  "names": []
+}

package/dist/js/chunks/{chunk-TK6PX2GC.mjs → chunk-U2OTHOTI.mjs}

@@ -1,9 +1,9 @@
 import {
   Utils
-} from "./chunk-MISGHDUU.mjs";
+} from "./chunk-6OMRGML6.mjs";
 import {
   Component
-} from "./chunk-QSQ24FYT.mjs";
+} from "./chunk-LTWPGFBR.mjs";
 
 // src/ts/components/menu.ts
 var MIN_SURFACE_WIDTH = 112;
@@ -16,6 +16,7 @@ var _defaults = {
   coverTrigger: false,
   closeOnClick: true,
   hover: false,
+  contextMenu: false,
   inDuration: 150,
   outDuration: 250,
   onOpenStart: null,
@@ -30,6 +31,41 @@ var _Menu = class _Menu extends Component {
     super(el, options, _Menu);
     this._pendingTimers = /* @__PURE__ */ new Set();
     this._transition = 0;
+    this._menuClickTargets = /* @__PURE__ */ new WeakMap();
+    /**
+     * Viewport point the open context menu belongs to. Null outside a
+     * right-click, so a keyboard or programmatic open uses the region's corner
+     * rather than an old pointer position.
+     */
+    this._contextPoint = null;
+    /** What had focus when a context menu opened; focus goes back there. */
+    this._contextReturn = null;
+    this._handleContextMenu = (e) => {
+      if (e.defaultPrevented) {
+        this.close();
+        return;
+      }
+      const path = e.composedPath();
+      if (_Menu._menus.some((menu) => menu !== this && menu.isOpen && path.includes(menu.menuEl))) return;
+      e.preventDefault();
+      if (!this.isOpen) {
+        const root = this.el.getRootNode();
+        this._contextReturn = root.activeElement instanceof HTMLElement ? root.activeElement : null;
+      }
+      const rect = this.el.getBoundingClientRect();
+      const fromPointer = (e.clientX !== 0 || e.clientY !== 0) && e.clientX >= rect.left && e.clientX <= rect.right && e.clientY >= rect.top && e.clientY <= rect.bottom;
+      this._contextPoint = fromPointer ? { x: e.clientX, y: e.clientY } : null;
+      if (this.isOpen) this.recalculateDimensions();
+      else this.open();
+    };
+    this._handleDocumentContextMenu = (e) => {
+      const path = e.composedPath();
+      if (path.includes(this.menuEl)) {
+        e.preventDefault();
+        return;
+      }
+      if (!path.includes(this.el)) this.close();
+    };
     this._handleClick = (e) => {
       e.preventDefault();
       if (this.isOpen) {
@@ -58,11 +94,15 @@ var _Menu = class _Menu extends Component {
       }
     };
     this._handleDocumentClick = (e) => {
-      const target = e.target;
+      const path = e.composedPath();
+      const menuTarget = this._menuClickTargets.get(e);
+      this._menuClickTargets.delete(e);
+      const target = menuTarget ?? (path[0] || e.target);
+      const inside = !!menuTarget || path.includes(this.menuEl) || this.menuEl?.contains(target);
       if (this._isSubmenuTriggerClick(target)) return;
-      if (this.options.closeOnClick && this.menuEl?.contains(target) && !this.isTouchMoving) {
+      if (this.options.closeOnClick && inside && !this.isTouchMoving) {
         this.close();
-      } else if (!this.menuEl?.contains(target)) {
+      } else if (!inside) {
         this._schedule(() => {
           if (this.isOpen) {
             this.close();
@@ -72,6 +112,7 @@ var _Menu = class _Menu extends Component {
       this.isTouchMoving = false;
     };
     this._handleTriggerKeydown = (e) => {
+      if (this.options.contextMenu) return;
       const opensMenu = e.key === SPACE || e.key === Utils.keys.ENTER || e.key === Utils.keys.ARROW_DOWN || e.key === Utils.keys.ARROW_UP;
       if (opensMenu && !this.isOpen) {
         e.preventDefault();
@@ -80,12 +121,13 @@ var _Menu = class _Menu extends Component {
     };
     this._handleDocumentTouchmove = (e) => {
       const target = e.target;
-      if (this.menuEl?.contains(target)) {
+      if (e.composedPath().includes(this.menuEl) || this.menuEl?.contains(target)) {
         this.isTouchMoving = true;
       }
     };
     this._handleMenuClick = (e) => {
       const target = e.target;
+      this._menuClickTargets.set(e, target);
       const li = target.closest("li");
       if (li?.matches('.disabled, [aria-disabled="true"]')) {
         e.preventDefault();
@@ -229,7 +271,7 @@ var _Menu = class _Menu extends Component {
       this._placeMenu();
       this._schedule(() => this._setupTemporaryEventHandlers(), 0);
       this._animateIn();
-      this.el.ariaExpanded = "true";
+      this._setExpanded(true);
     };
     /**
      * Close menu.
@@ -251,10 +293,13 @@ var _Menu = class _Menu extends Component {
       if (transition !== this._transition) return;
       this._animateOut();
       this._removeTemporaryEventHandlers();
-      this.el.ariaExpanded = "false";
-      if (this.options.autoFocus && (root.activeElement === focused || !root.activeElement || root.activeElement === document.body)) {
-        this.el.focus();
+      this._setExpanded(false);
+      if (this.options.autoFocus && this.menuEl.contains(focused) && (root.activeElement === focused || this.el.ownerDocument.activeElement === this.el.ownerDocument.body)) {
+        const back = this._contextReturn;
+        (back?.isConnected && back !== this.el.ownerDocument.body ? back : this.el).focus();
       }
+      this._contextReturn = null;
+      this._contextPoint = null;
     };
     /**
      * While menu is open, you can recalculate its dimensions if its contents have changed.
@@ -272,6 +317,7 @@ var _Menu = class _Menu extends Component {
     this._originalInert = this.menuEl?.getAttribute("inert") ?? null;
     this.options = {
       ..._Menu.defaults,
+      contextMenu: el.hasAttribute("data-context-menu"),
       ...options
     };
     this.isOpen = false;
@@ -279,10 +325,12 @@ var _Menu = class _Menu extends Component {
     this.isTouchMoving = false;
     this.focusedIndex = -1;
     this.filterQuery = [];
-    this.el.ariaExpanded = "false";
-    if (!this.el.hasAttribute("aria-haspopup")) this.el.setAttribute("aria-haspopup", "menu");
-    if (this.id && !this.el.hasAttribute("aria-controls"))
-      this.el.setAttribute("aria-controls", this.id);
+    if (!this.options.contextMenu) {
+      this.el.ariaExpanded = "false";
+      if (!this.el.hasAttribute("aria-haspopup")) this.el.setAttribute("aria-haspopup", "menu");
+      if (this.id && !this.el.hasAttribute("aria-controls"))
+        this.el.setAttribute("aria-controls", this.id);
+    }
     this._moveMenuToElement();
     this._setupAccessibility();
     this._makeMenuFocusable();
@@ -306,7 +354,7 @@ var _Menu = class _Menu extends Component {
   destroy() {
     this._clearPendingTimers();
     this.isOpen = false;
-    this.el.ariaExpanded = "false";
+    this._setExpanded(false);
     clearTimeout(this.filterTimeout);
     this._resetMenuStyles();
     this._restoreInert();
@@ -322,7 +370,9 @@ var _Menu = class _Menu extends Component {
     if (this.menuEl?.querySelector(":scope > li > menu")) {
       this.menuEl.addEventListener("mouseover", this._handleSubmenuAlign);
     }
-    if (this.options.hover) {
+    if (this.options.contextMenu) {
+      this.el.addEventListener("contextmenu", this._handleContextMenu);
+    } else if (this.options.hover) {
       this.el.addEventListener("mouseenter", this._handleMouseEnter);
       this.el.addEventListener("mouseleave", this._handleMouseLeave);
       this.menuEl.addEventListener("mouseleave", this._handleMouseLeave);
@@ -334,7 +384,9 @@ var _Menu = class _Menu extends Component {
     this.el.removeEventListener("keydown", this._handleTriggerKeydown);
     this.menuEl?.removeEventListener("click", this._handleMenuClick);
     this.menuEl?.removeEventListener("mouseover", this._handleSubmenuAlign);
-    if (this.options.hover) {
+    if (this.options.contextMenu) {
+      this.el.removeEventListener("contextmenu", this._handleContextMenu);
+    } else if (this.options.hover) {
       this.el.removeEventListener("mouseenter", this._handleMouseEnter);
       this.el.removeEventListener("mouseleave", this._handleMouseLeave);
       this.menuEl?.removeEventListener("mouseleave", this._handleMouseLeave);
@@ -344,17 +396,21 @@ var _Menu = class _Menu extends Component {
   }
   _setupTemporaryEventHandlers() {
     document.body.addEventListener("click", this._handleDocumentClick);
+    this.menuEl?.addEventListener("touchmove", this._handleDocumentTouchmove, { passive: true });
     document.body.addEventListener("touchmove", this._handleDocumentTouchmove, {
       passive: true
     });
     this.menuEl?.addEventListener("keydown", this._handleMenuKeydown);
     window.addEventListener("resize", this._handleWindowResize);
+    if (this.options.contextMenu) document.addEventListener("contextmenu", this._handleDocumentContextMenu);
   }
   _removeTemporaryEventHandlers() {
     document.body.removeEventListener("click", this._handleDocumentClick);
+    this.menuEl?.removeEventListener("touchmove", this._handleDocumentTouchmove);
     document.body.removeEventListener("touchmove", this._handleDocumentTouchmove);
     this.menuEl?.removeEventListener("keydown", this._handleMenuKeydown);
     window.removeEventListener("resize", this._handleWindowResize);
+    document.removeEventListener("contextmenu", this._handleDocumentContextMenu);
   }
   _setupAccessibility() {
     if (!this.menuEl) return;
@@ -644,8 +700,12 @@ var _Menu = class _Menu extends Component {
       closestOverflowParent.style.position = "relative";
     const natural = this.menuEl.getBoundingClientRect().width;
     const triggerWidth = this.el.getBoundingClientRect().width;
-    const idealWidth = this.options.constrainWidth && triggerWidth >= MIN_SURFACE_WIDTH ? triggerWidth : Math.min(MAX_SURFACE_WIDTH, Math.max(MIN_SURFACE_WIDTH, natural));
+    const idealWidth = this.options.constrainWidth && !this.options.contextMenu && triggerWidth >= MIN_SURFACE_WIDTH ? triggerWidth : Math.min(MAX_SURFACE_WIDTH, Math.max(MIN_SURFACE_WIDTH, natural));
     this.menuEl.style.width = idealWidth + "px";
+    if (this.options.contextMenu) {
+      this._placeMenuAtPoint(this._contextPoint ?? this._regionCorner(), closestOverflowParent);
+      return;
+    }
     const positionInfo = this._getMenuPosition(closestOverflowParent);
     this.menuEl.style.left = positionInfo.x + "px";
     this.menuEl.style.top = positionInfo.y + "px";
@@ -653,6 +713,58 @@ var _Menu = class _Menu extends Component {
     this.menuEl.style.width = positionInfo.width + "px";
     this.menuEl.style.transformOrigin = `${positionInfo.horizontalAlignment === "left" ? "0" : "100%"} ${positionInfo.verticalAlignment === "top" ? "0" : "100%"}`;
   }
+  /** Where a context menu opens without a pointer: the region's start corner. */
+  _regionCorner() {
+    const rect = this.el.getBoundingClientRect();
+    const rtl = getComputedStyle(this.el).direction === "rtl";
+    return { x: rtl ? rect.right : rect.left, y: rect.bottom };
+  }
+  /**
+   * Places a context menu with its start corner on the point, flipping to
+   * the other side of the point where it would not fit. The bounds are the
+   * viewport, narrowed to a scrolling or clipping ancestor the menu sits in;
+   * a menu taller than them gets their height and scrolls.
+   *
+   * The menu rests at left/top 0 of its containing block, so its rect is the
+   * offset to subtract - the same trick _getMenuPosition uses. It is measured
+   * without the entry animation's scale, which a second right-click can catch.
+   */
+  _placeMenuAtPoint({ x, y }, container) {
+    const { transform, transition } = this.menuEl.style;
+    this.menuEl.style.transition = "none";
+    this.menuEl.style.transform = "none";
+    const menu = this.menuEl.getBoundingClientRect();
+    this.menuEl.style.transform = transform;
+    this.menuEl.style.transition = transition;
+    let bounds = { left: 0, top: 0, right: window.innerWidth, bottom: window.innerHeight };
+    if (container && getComputedStyle(container).overflow !== "visible") {
+      const clip = container.getBoundingClientRect();
+      bounds = {
+        left: Math.max(bounds.left, clip.left),
+        top: Math.max(bounds.top, clip.top),
+        right: Math.min(bounds.right, clip.right),
+        bottom: Math.min(bounds.bottom, clip.bottom)
+      };
+    }
+    const width = menu.width;
+    const height = Math.min(menu.height, bounds.bottom - bounds.top);
+    this.isScrollable = height < menu.height;
+    if (this.isScrollable) this.menuEl.style.height = height + "px";
+    const rtl = getComputedStyle(this.el).direction === "rtl";
+    const fitsRight = x + width <= bounds.right;
+    const fitsLeft = x - width >= bounds.left;
+    const leftward = rtl ? fitsLeft || !fitsRight : !fitsRight && fitsLeft;
+    const upward = y + height > bounds.bottom && y - height >= bounds.top;
+    const clamp = (value, min, max) => Math.max(min, Math.min(value, max));
+    const left = clamp(leftward ? x - width : x, bounds.left, bounds.right - width);
+    const top = clamp(upward ? y - height : y, bounds.top, bounds.bottom - height);
+    this.menuEl.style.left = left - menu.left + "px";
+    this.menuEl.style.top = top - menu.top + "px";
+    this.menuEl.style.transformOrigin = `${leftward ? "100%" : "0"} ${upward ? "100%" : "0"}`;
+  }
+  _setExpanded(expanded) {
+    if (!this.options.contextMenu) this.el.ariaExpanded = String(expanded);
+  }
 };
 _Menu._menus = [];
 var Menu = _Menu;
@@ -660,4 +772,4 @@ var Menu = _Menu;
 export {
   Menu
 };
-//# sourceMappingURL=chunk-TK6PX2GC.mjs.map
+//# sourceMappingURL=chunk-U2OTHOTI.mjs.map