@expressivecss/expressive 0.11.0 → 0.13.1

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

@@ -0,0 +1,270 @@
+import {
+  Utils
+} from "./chunk-6OMRGML6.mjs";
+import {
+  Component
+} from "./chunk-LTWPGFBR.mjs";
+
+// src/ts/components/questionnaire.ts
+var _defaults = {
+  progressLabel: "Question {current} of {total}",
+  requiredMessage: "Choose an answer to continue."
+};
+var NAVIGATION = ["previous", "skip", "next"];
+var Questionnaire = class _Questionnaire extends Component {
+  constructor(el, options) {
+    super(el, options, _Questionnaire);
+    this._active = null;
+    this._generated = [];
+    this._generatedIds = [];
+    /** Set while one submission's invalid events arrive, so only the first opens. */
+    this._reporting = false;
+    /** Shows the question at `index` without checking the current one. */
+    this.goTo = (index) => {
+      const item = this.items[index];
+      if (!item) return;
+      this._active = item;
+      this._render();
+      const controls = this._controls(item).filter((control) => !control.disabled);
+      (controls.find((control) => control.checked) ?? controls[0])?.focus();
+    };
+    /** Checks the shown question and moves to the next one if it is answered. */
+    this.next = () => {
+      if (this._validate(this._active)) this.goTo(this.index + 1);
+    };
+    /** Moves to the previous question. */
+    this.previous = () => this.goTo(this.index - 1);
+    /** Clears the answer to the shown question and moves to the next one. */
+    this.skip = () => {
+      if (!this._active) return;
+      for (const control of this._controls(this._active)) {
+        const isChoice = control instanceof HTMLInputElement && (control.type === "radio" || control.type === "checkbox");
+        if (isChoice ? !control.checked : !control.value) continue;
+        if (isChoice) control.checked = false;
+        else control.value = "";
+        control.dispatchEvent(new Event("change", { bubbles: true }));
+      }
+      this.goTo(this.index + 1);
+    };
+    this._handleClick = (e) => {
+      const button = e.target.closest?.("button");
+      if (!button || !this._buttons().includes(button)) return;
+      if (NAVIGATION.includes(button.value)) {
+        e.preventDefault();
+        this[button.value]();
+        return;
+      }
+      this._syncRequired();
+    };
+    // Enter in a field moves on instead of submitting the form early.
+    this._handleKeydown = (e) => {
+      if (e.key !== "Enter" || e.defaultPrevented || e.isComposing) return;
+      if (!(e.target instanceof HTMLInputElement) || this.index >= this.items.length - 1) return;
+      e.preventDefault();
+      this.next();
+    };
+    // A submission found an unanswered question, possibly a hidden one. Open the
+    // first instead of letting the browser report a control it cannot show.
+    // One submission fires its invalid events in a single task.
+    this._handleInvalid = (e) => {
+      const item = this.items.find((item2) => item2.contains(e.target));
+      if (!item) return;
+      e.preventDefault();
+      if (this._reporting) return;
+      this._reporting = true;
+      setTimeout(() => this._reporting = false);
+      this._active = item;
+      this._render();
+      this._validate(item);
+    };
+    // An answer clears the question's error.
+    this._handleInput = (e) => {
+      this._syncRequired();
+      const item = e.target.closest?.("fieldset");
+      if (item instanceof HTMLFieldSetElement && item.classList.contains("invalid")) this._setInvalid(item, false);
+    };
+    this.el["Expressive_Questionnaire"] = this;
+    const progressLabel = el.dataset.progressLabel;
+    this.options = {
+      ..._Questionnaire.defaults,
+      ...progressLabel ? { progressLabel } : {},
+      ...options
+    };
+    this._progress = document.createElement("div");
+    this._progress.className = "questionnaire-progress";
+    this._progressText = document.createElement("span");
+    this._progressText.id = `questionnaire-progress-${Utils.guid()}`;
+    this._progressBar = document.createElement("progress");
+    this._progressBar.className = "progress";
+    this._progressBar.setAttribute("aria-labelledby", this._progressText.id);
+    this._progress.append(this._progressText, this._progressBar);
+    this.el.prepend(this._progress);
+    for (const item of this._fieldsets()) {
+      const ids = Array.from(item.querySelectorAll(":scope > p:not(.questionnaire-error)")).map((p) => this._ensureId(p, "questionnaire-description"));
+      if (ids.length && !item.hasAttribute("aria-describedby")) {
+        item.setAttribute("aria-describedby", ids.join(" "));
+        this._generatedIds.push(item);
+      }
+    }
+    this._active = this.items[0] ?? null;
+    this._syncRequired();
+    this._render();
+    this._observer = new MutationObserver(() => {
+      this._syncRequired();
+      this._render();
+    });
+    this._observer.observe(this.el, { attributes: true, subtree: true, attributeFilter: ["disabled"] });
+    this.el.addEventListener("click", this._handleClick);
+    this.el.addEventListener("keydown", this._handleKeydown);
+    this.el.addEventListener("input", this._handleInput);
+    this.el.addEventListener("invalid", this._handleInvalid, true);
+  }
+  static get defaults() {
+    return _defaults;
+  }
+  /**
+   * Initializes instances of Questionnaire.
+   * @param els HTML elements.
+   * @param options Component options.
+   */
+  static init(els, options = {}) {
+    return super.init(els, options, _Questionnaire);
+  }
+  static getInstance(el) {
+    return el["Expressive_Questionnaire"];
+  }
+  /** The questions that apply: every fieldset child that is not disabled. */
+  get items() {
+    return this._fieldsets().filter((item) => !item.disabled);
+  }
+  /** Position of the shown question in `items`. */
+  get index() {
+    return this.items.indexOf(this._active);
+  }
+  destroy() {
+    this._observer.disconnect();
+    this.el.removeEventListener("click", this._handleClick);
+    this.el.removeEventListener("keydown", this._handleKeydown);
+    this.el.removeEventListener("input", this._handleInput);
+    this.el.removeEventListener("invalid", this._handleInvalid, true);
+    for (const item of this._fieldsets()) {
+      if (item.hasAttribute("data-required")) for (const control of this._controls(item)) control.setCustomValidity("");
+      item.hidden = false;
+      this._setInvalid(item, false);
+    }
+    for (const button of this._buttons()) button.hidden = false;
+    this._progress.remove();
+    for (const el of this._generated) el.remove();
+    for (const el of this._generatedIds) {
+      el.removeAttribute(el instanceof HTMLFieldSetElement ? "aria-describedby" : "id");
+    }
+    this.el["Expressive_Questionnaire"] = void 0;
+  }
+  _fieldsets() {
+    return Array.from(this.el.querySelectorAll(":scope > fieldset"));
+  }
+  /** The footer's navigation and submit buttons. */
+  _buttons() {
+    return Array.from(this.el.querySelectorAll(":scope > footer > button")).filter(
+      (button) => NAVIGATION.includes(button.value) || button.type === "submit"
+    );
+  }
+  _controls(item) {
+    return Array.from(item.elements).filter(
+      (el) => el instanceof HTMLTextAreaElement || el instanceof HTMLSelectElement || el instanceof HTMLInputElement && el.type !== "button" && el.type !== "submit"
+    );
+  }
+  _required(item) {
+    return item.hasAttribute("data-required") || this._controls(item).some((control) => control.required);
+  }
+  _ensureId(el, prefix) {
+    if (!el.id) {
+      el.id = `${prefix}-${Utils.guid()}`;
+      this._generatedIds.push(el);
+    }
+    return el.id;
+  }
+  _render() {
+    const items = this.items;
+    if (!items.includes(this._active)) {
+      const all = this._fieldsets();
+      const after = all.slice(all.indexOf(this._active) + 1).find((item) => !item.disabled);
+      this._active = after ?? items[items.length - 1] ?? null;
+    }
+    const index = items.indexOf(this._active);
+    const last = index === items.length - 1;
+    for (const item of this._fieldsets()) item.hidden = item !== this._active;
+    for (const button of this._buttons()) {
+      if (button.value === "previous") button.hidden = index <= 0;
+      else if (button.value === "skip") button.hidden = last || !this._active || this._required(this._active);
+      else if (button.value === "next") button.hidden = last;
+      else button.hidden = !last;
+    }
+    this._progressText.textContent = this.options.progressLabel.replace("{current}", String(index + 1)).replace("{total}", String(items.length));
+    this._progressBar.max = Math.max(items.length, 1);
+    this._progressBar.value = index + 1;
+  }
+  /**
+   * Puts "choose at least one" on the first enabled checkbox of each
+   * data-required group with none checked, so the browser's validation, and
+   * every way of submitting, sees it. A disabled checkbox is not sent, so it
+   * does not count.
+   */
+  _syncRequired() {
+    for (const item of this._fieldsets()) {
+      if (!item.hasAttribute("data-required")) continue;
+      const boxes = this._controls(item).filter(
+        (control) => control instanceof HTMLInputElement && control.type === "checkbox"
+      );
+      const enabled = boxes.filter((box) => !box.disabled);
+      for (const box of boxes) box.setCustomValidity("");
+      if (enabled.length && !enabled.some((box) => box.checked)) {
+        const error = item.querySelector(":scope > .questionnaire-error:not([data-generated])");
+        enabled[0].setCustomValidity(error?.textContent.trim() || this.options.requiredMessage);
+      }
+    }
+  }
+  /** The first control in the question that still needs an answer. */
+  _invalidControl(item) {
+    return this._controls(item).find((control) => control.willValidate && !control.validity.valid);
+  }
+  /** Shows the question's error and returns false when it needs an answer. */
+  _validate(item) {
+    this._syncRequired();
+    const invalid = item && this._invalidControl(item);
+    if (!invalid) return true;
+    let error = item.querySelector(":scope > .questionnaire-error");
+    if (!error) {
+      error = document.createElement("p");
+      error.className = "questionnaire-error";
+      error.dataset.generated = "";
+      error.textContent = invalid.validationMessage || this.options.requiredMessage;
+      item.append(error);
+      this._generated.push(error);
+    }
+    this._setInvalid(item, true);
+    invalid.focus();
+    return false;
+  }
+  _setInvalid(item, invalid) {
+    item.classList.toggle("invalid", invalid);
+    const error = item.querySelector(":scope > .questionnaire-error");
+    const described = (item.getAttribute("aria-describedby") ?? "").split(" ").filter((id) => id && id !== error?.id);
+    if (invalid && error) described.push(this._ensureId(error, "questionnaire-error"));
+    if (described.length) item.setAttribute("aria-describedby", described.join(" "));
+    else item.removeAttribute("aria-describedby");
+    for (const control of this._controls(item)) {
+      if (invalid) control.setAttribute("aria-invalid", "true");
+      else control.removeAttribute("aria-invalid");
+    }
+    if (!invalid && this._generated.includes(error)) {
+      error.remove();
+      this._generated.splice(this._generated.indexOf(error), 1);
+    }
+  }
+};
+
+export {
+  Questionnaire
+};
+//# sourceMappingURL=chunk-DTKR54I6.mjs.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/components/questionnaire.ts"],
+  "sourcesContent": ["import { Utils } from '../core/utils';\nimport { Component, BaseOptions, InitElements, InitElement } from '../core/component';\n\nexport interface QuestionnaireOptions extends BaseOptions {\n  /**\n   * Text above the progress bar. `{current}` and `{total}` are replaced with\n   * the question number and the number of questions. `data-progress-label`\n   * on the form sets it.\n   * @default 'Question {current} of {total}'\n   */\n  progressLabel: string;\n  /**\n   * Error shown when a question has no `.questionnaire-error` of its own and\n   * the browser gives no validation message, as for a `data-required` group\n   * of checkboxes.\n   * @default 'Choose an answer to continue.'\n   */\n  requiredMessage: string;\n}\n\nconst _defaults: QuestionnaireOptions = {\n  progressLabel: 'Question {current} of {total}',\n  requiredMessage: 'Choose an answer to continue.'\n};\n\nconst NAVIGATION = ['previous', 'skip', 'next'];\n\ntype Control = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;\n\n/**\n * A multi-step questionnaire: a <form class=\"questionnaire\"> whose\n * <fieldset> children are the questions, shown one at a time, and a <footer>\n * of buttons. `value=\"previous\"`, `value=\"skip\"` and `value=\"next\"` mark the\n * navigation buttons; a submit button sends the form on the last question.\n *\n * A question is required when one of its controls is `required`, or when the\n * fieldset has `data-required` (at least one enabled checkbox, held as a\n * custom validity on the first one). Next and every way of submitting check\n * it with the browser's own validation; an optional question gets Skip, which\n * clears its answer. A disabled fieldset is left out, so a page can switch\n * questions on and off from earlier answers.\n *\n * Without JavaScript every question shows at once and the submit button sends\n * the form. The answers are ordinary form controls, so FormData reads them.\n */\nexport class Questionnaire extends Component<QuestionnaireOptions> {\n  declare el: HTMLFormElement;\n  private _active: HTMLFieldSetElement | null = null;\n  private _progress: HTMLElement;\n  private _progressText: HTMLElement;\n  private _progressBar: HTMLProgressElement;\n  private _generated: HTMLElement[] = [];\n  private _generatedIds: HTMLElement[] = [];\n  private _observer: MutationObserver;\n  /** Set while one submission's invalid events arrive, so only the first opens. */\n  private _reporting = false;\n\n  constructor(el: HTMLFormElement, options: Partial<QuestionnaireOptions>) {\n    super(el, options, Questionnaire);\n    this.el['Expressive_Questionnaire'] = this;\n    const progressLabel = el.dataset.progressLabel;\n    this.options = {\n      ...Questionnaire.defaults,\n      ...(progressLabel ? { progressLabel } : {}),\n      ...options\n    };\n\n    this._progress = document.createElement('div');\n    this._progress.className = 'questionnaire-progress';\n    this._progressText = document.createElement('span');\n    this._progressText.id = `questionnaire-progress-${Utils.guid()}`;\n    this._progressBar = document.createElement('progress');\n    this._progressBar.className = 'progress';\n    this._progressBar.setAttribute('aria-labelledby', this._progressText.id);\n    this._progress.append(this._progressText, this._progressBar);\n    this.el.prepend(this._progress);\n\n    for (const item of this._fieldsets()) {\n      const ids = Array.from(item.querySelectorAll<HTMLElement>(':scope > p:not(.questionnaire-error)'))\n        .map((p) => this._ensureId(p, 'questionnaire-description'));\n      if (ids.length && !item.hasAttribute('aria-describedby')) {\n        item.setAttribute('aria-describedby', ids.join(' '));\n        this._generatedIds.push(item);\n      }\n    }\n\n    this._active = this.items[0] ?? null;\n    this._syncRequired();\n    this._render();\n    // A page enabling or disabling a question from an earlier answer changes\n    // the count and the buttons.\n    this._observer = new MutationObserver(() => {\n      this._syncRequired();\n      this._render();\n    });\n    this._observer.observe(this.el, { attributes: true, subtree: true, attributeFilter: ['disabled'] });\n    this.el.addEventListener('click', this._handleClick);\n    this.el.addEventListener('keydown', this._handleKeydown);\n    this.el.addEventListener('input', this._handleInput);\n    // invalid does not bubble.\n    this.el.addEventListener('invalid', this._handleInvalid, true);\n  }\n\n  static get defaults(): QuestionnaireOptions {\n    return _defaults;\n  }\n\n  /**\n   * Initializes instance of Questionnaire.\n   * @param el HTML element.\n   * @param options Component options.\n   */\n  static init(el: HTMLElement, options?: Partial<QuestionnaireOptions>): Questionnaire;\n  /**\n   * Initializes instances of Questionnaire.\n   * @param els HTML elements.\n   * @param options Component options.\n   */\n  static init(\n    els: InitElements<InitElement>,\n    options?: Partial<QuestionnaireOptions>\n  ): Questionnaire[];\n  /**\n   * Initializes instances of Questionnaire.\n   * @param els HTML elements.\n   * @param options Component options.\n   */\n  static init(\n    els: HTMLElement | InitElements<InitElement>,\n    options: Partial<QuestionnaireOptions> = {}\n  ): Questionnaire | Questionnaire[] {\n    return super.init(els, options, Questionnaire);\n  }\n\n  static getInstance(el: HTMLElement): Questionnaire {\n    return el['Expressive_Questionnaire'];\n  }\n\n  /** The questions that apply: every fieldset child that is not disabled. */\n  get items(): HTMLFieldSetElement[] {\n    return this._fieldsets().filter((item) => !item.disabled);\n  }\n\n  /** Position of the shown question in `items`. */\n  get index(): number {\n    return this.items.indexOf(this._active);\n  }\n\n  /** Shows the question at `index` without checking the current one. */\n  goTo = (index: number) => {\n    const item = this.items[index];\n    if (!item) return;\n    this._active = item;\n    this._render();\n    const controls = this._controls(item).filter((control) => !control.disabled);\n    (controls.find((control) => (control as HTMLInputElement).checked) ?? controls[0])?.focus();\n  };\n\n  /** Checks the shown question and moves to the next one if it is answered. */\n  next = () => {\n    if (this._validate(this._active)) this.goTo(this.index + 1);\n  };\n\n  /** Moves to the previous question. */\n  previous = () => this.goTo(this.index - 1);\n\n  /** Clears the answer to the shown question and moves to the next one. */\n  skip = () => {\n    if (!this._active) return;\n    for (const control of this._controls(this._active)) {\n      const isChoice = control instanceof HTMLInputElement && (control.type === 'radio' || control.type === 'checkbox');\n      if (isChoice ? !control.checked : !control.value) continue;\n      if (isChoice) control.checked = false;\n      else control.value = '';\n      control.dispatchEvent(new Event('change', { bubbles: true }));\n    }\n    this.goTo(this.index + 1);\n  };\n\n  destroy() {\n    this._observer.disconnect();\n    this.el.removeEventListener('click', this._handleClick);\n    this.el.removeEventListener('keydown', this._handleKeydown);\n    this.el.removeEventListener('input', this._handleInput);\n    this.el.removeEventListener('invalid', this._handleInvalid, true);\n    for (const item of this._fieldsets()) {\n      if (item.hasAttribute('data-required')) for (const control of this._controls(item)) control.setCustomValidity('');\n      item.hidden = false;\n      this._setInvalid(item, false);\n    }\n    for (const button of this._buttons()) button.hidden = false;\n    this._progress.remove();\n    for (const el of this._generated) el.remove();\n    for (const el of this._generatedIds) {\n      el.removeAttribute(el instanceof HTMLFieldSetElement ? 'aria-describedby' : 'id');\n    }\n    this.el['Expressive_Questionnaire'] = undefined;\n  }\n\n  private _fieldsets() {\n    return Array.from(this.el.querySelectorAll<HTMLFieldSetElement>(':scope > fieldset'));\n  }\n\n  /** The footer's navigation and submit buttons. */\n  private _buttons() {\n    return Array.from(this.el.querySelectorAll<HTMLButtonElement>(':scope > footer > button')).filter(\n      (button) => NAVIGATION.includes(button.value) || button.type === 'submit'\n    );\n  }\n\n  private _controls(item: HTMLFieldSetElement) {\n    return Array.from(item.elements).filter(\n      (el): el is Control =>\n        el instanceof HTMLTextAreaElement || el instanceof HTMLSelectElement ||\n        (el instanceof HTMLInputElement && el.type !== 'button' && el.type !== 'submit')\n    );\n  }\n\n  private _required(item: HTMLFieldSetElement) {\n    return item.hasAttribute('data-required') || this._controls(item).some((control) => control.required);\n  }\n\n  private _ensureId(el: HTMLElement, prefix: string) {\n    if (!el.id) {\n      el.id = `${prefix}-${Utils.guid()}`;\n      this._generatedIds.push(el);\n    }\n    return el.id;\n  }\n\n  private _render() {\n    const items = this.items;\n    // The shown question was switched off: carry on from the next one.\n    if (!items.includes(this._active)) {\n      const all = this._fieldsets();\n      const after = all.slice(all.indexOf(this._active) + 1).find((item) => !item.disabled);\n      this._active = after ?? items[items.length - 1] ?? null;\n    }\n    const index = items.indexOf(this._active);\n    const last = index === items.length - 1;\n    for (const item of this._fieldsets()) item.hidden = item !== this._active;\n    for (const button of this._buttons()) {\n      if (button.value === 'previous') button.hidden = index <= 0;\n      else if (button.value === 'skip') button.hidden = last || !this._active || this._required(this._active);\n      else if (button.value === 'next') button.hidden = last;\n      else button.hidden = !last;\n    }\n    this._progressText.textContent = this.options.progressLabel\n      .replace('{current}', String(index + 1))\n      .replace('{total}', String(items.length));\n    this._progressBar.max = Math.max(items.length, 1);\n    this._progressBar.value = index + 1;\n  }\n\n  /**\n   * Puts \"choose at least one\" on the first enabled checkbox of each\n   * data-required group with none checked, so the browser's validation, and\n   * every way of submitting, sees it. A disabled checkbox is not sent, so it\n   * does not count.\n   */\n  private _syncRequired() {\n    for (const item of this._fieldsets()) {\n      if (!item.hasAttribute('data-required')) continue;\n      const boxes = this._controls(item).filter(\n        (control): control is HTMLInputElement => control instanceof HTMLInputElement && control.type === 'checkbox'\n      );\n      const enabled = boxes.filter((box) => !box.disabled);\n      for (const box of boxes) box.setCustomValidity('');\n      if (enabled.length && !enabled.some((box) => box.checked)) {\n        const error = item.querySelector<HTMLElement>(':scope > .questionnaire-error:not([data-generated])');\n        enabled[0].setCustomValidity(error?.textContent.trim() || this.options.requiredMessage);\n      }\n    }\n  }\n\n  /** The first control in the question that still needs an answer. */\n  private _invalidControl(item: HTMLFieldSetElement): Control | undefined {\n    return this._controls(item).find((control) => control.willValidate && !control.validity.valid);\n  }\n\n  /** Shows the question's error and returns false when it needs an answer. */\n  private _validate(item: HTMLFieldSetElement | null) {\n    this._syncRequired();\n    const invalid = item && this._invalidControl(item);\n    if (!invalid) return true;\n    let error = item.querySelector<HTMLElement>(':scope > .questionnaire-error');\n    if (!error) {\n      error = document.createElement('p');\n      error.className = 'questionnaire-error';\n      error.dataset.generated = '';\n      error.textContent = invalid.validationMessage || this.options.requiredMessage;\n      item.append(error);\n      this._generated.push(error);\n    }\n    this._setInvalid(item, true);\n    invalid.focus();\n    return false;\n  }\n\n  private _setInvalid(item: HTMLFieldSetElement, invalid: boolean) {\n    item.classList.toggle('invalid', invalid);\n    const error = item.querySelector<HTMLElement>(':scope > .questionnaire-error');\n    const described = (item.getAttribute('aria-describedby') ?? '').split(' ').filter((id) => id && id !== error?.id);\n    if (invalid && error) described.push(this._ensureId(error, 'questionnaire-error'));\n    if (described.length) item.setAttribute('aria-describedby', described.join(' '));\n    else item.removeAttribute('aria-describedby');\n    for (const control of this._controls(item)) {\n      if (invalid) control.setAttribute('aria-invalid', 'true');\n      else control.removeAttribute('aria-invalid');\n    }\n    if (!invalid && this._generated.includes(error)) {\n      error.remove();\n      this._generated.splice(this._generated.indexOf(error), 1);\n    }\n  }\n\n  private _handleClick = (e: MouseEvent) => {\n    const button = (e.target as Element).closest?.('button');\n    if (!button || !this._buttons().includes(button)) return;\n    if (NAVIGATION.includes(button.value)) {\n      // Also stops a navigation button written without type=\"button\" from\n      // submitting the form.\n      e.preventDefault();\n      this[button.value as 'previous' | 'skip' | 'next']();\n      return;\n    }\n    // Submit by click or Enter: catch answers a script set without an event.\n    this._syncRequired();\n  };\n\n  // Enter in a field moves on instead of submitting the form early.\n  private _handleKeydown = (e: KeyboardEvent) => {\n    if (e.key !== 'Enter' || e.defaultPrevented || e.isComposing) return;\n    if (!(e.target instanceof HTMLInputElement) || this.index >= this.items.length - 1) return;\n    e.preventDefault();\n    this.next();\n  };\n\n  // A submission found an unanswered question, possibly a hidden one. Open the\n  // first instead of letting the browser report a control it cannot show.\n  // One submission fires its invalid events in a single task.\n  private _handleInvalid = (e: Event) => {\n    const item = this.items.find((item) => item.contains(e.target as Node));\n    if (!item) return;\n    e.preventDefault();\n    if (this._reporting) return;\n    this._reporting = true;\n    setTimeout(() => (this._reporting = false));\n    this._active = item;\n    this._render();\n    this._validate(item);\n  };\n\n  // An answer clears the question's error.\n  private _handleInput = (e: Event) => {\n    this._syncRequired();\n    const item = (e.target as Element).closest?.('fieldset');\n    if (item instanceof HTMLFieldSetElement && item.classList.contains('invalid')) this._setInvalid(item, false);\n  };\n}\n"],
+  "mappings": "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",
+  "names": ["item"]
+}

package/dist/js/chunks/{chunk-SLFNPY5M.mjs → chunk-EC63CHXU.mjs}

@@ -1,6 +1,6 @@
 import {
   Utils
-} from "./chunk-MISGHDUU.mjs";
+} from "./chunk-6OMRGML6.mjs";
 
 // src/ts/plugins/dockedDisplayPlugin.ts
 var _defaults = {
@@ -75,4 +75,4 @@ var DockedDisplayPlugin = class _DockedDisplayPlugin {
 export {
   DockedDisplayPlugin
 };
-//# sourceMappingURL=chunk-SLFNPY5M.mjs.map
+//# sourceMappingURL=chunk-EC63CHXU.mjs.map

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

@@ -0,0 +1,47 @@
+import {
+  ColumnChart
+} from "./chunk-SPETGK25.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
+   * cell's text, so text longer than a short bar can run past its end.
+   */
+  _draw() {
+    const bars = super._draw();
+    bars.className = "bar-chart-bars";
+    bars.classList.toggle("rtl", getComputedStyle(this.el).direction === "rtl");
+    if (!this.el.classList.contains("values")) return bars;
+    const values = bars.cloneNode(true);
+    values.classList.replace("bar-chart-bars", "bar-chart-values");
+    values.querySelectorAll("span[data-text]").forEach((span) => {
+      span.textContent = span.dataset.text;
+    });
+    const layers = document.createElement("div");
+    layers.className = "bar-chart-layers";
+    layers.append(bars, values);
+    return layers;
+  }
+};
+
+export {
+  BarChart
+};
+//# sourceMappingURL=chunk-GVGT6MIU.mjs.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/components/barChart.ts"],
+  "sourcesContent": ["import { InitElements, InitElement } from '../core/component';\nimport { 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 * Re-run `BarChart.init(el)` after changing the table.\n */\nexport class BarChart extends ColumnChart {\n  protected get _type() {\n    return 'bar-chart';\n  }\n\n  protected get _key() {\n    return 'Expressive_BarChart';\n  }\n\n  protected get _horizontal() {\n    return true;\n  }\n\n  static init(el: HTMLElement, options?: Partial<BarChartOptions>): BarChart;\n  static init(els: InitElements<InitElement>, options?: Partial<BarChartOptions>): BarChart[];\n  static init(\n    els: HTMLElement | InitElements<InitElement>,\n    options: Partial<BarChartOptions> = {}\n  ): BarChart | BarChart[] {\n    return super.init(els as HTMLElement, options) as BarChart | BarChart[];\n  }\n\n  static getInstance(el: HTMLElement): BarChart {\n    return el['Expressive_BarChart'];\n  }\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,OAAO;AACnB,WAAO;AAAA,EACT;AAAA,EAEA,IAAc,cAAc;AAC1B,WAAO;AAAA,EACT;AAAA,EAIA,OAAO,KACL,KACA,UAAoC,CAAC,GACd;AACvB,WAAO,MAAM,KAAK,KAAoB,OAAO;AAAA,EAC/C;AAAA,EAEA,OAAO,YAAY,IAA2B;AAC5C,WAAO,GAAG,qBAAqB;AAAA,EACjC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOU,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;",
+  "names": []
+}

package/dist/js/chunks/{chunk-LZVBJ33S.mjs → chunk-GZWPXXY6.mjs}

@@ -1,10 +1,11 @@
 import {
   Utils
-} from "./chunk-MISGHDUU.mjs";
+} from "./chunk-6OMRGML6.mjs";
 
 // src/ts/behaviors/sheetDrag.ts
 var DISMISS_DISTANCE = 96;
 var DISMISS_VELOCITY = 0.5;
+var FLICK_TIMEOUT = 100;
 var DRAG_SLOP = 4;
 function installSheetDrag(config) {
   const coord = (event) => config.axis === "x" ? event.clientX : event.clientY;
@@ -41,6 +42,7 @@ function installSheetDrag(config) {
       start: coord(event),
       last: coord(event),
       lastT: Date.now(),
+      velocity: 0,
       shift: 0
     };
     observer.observe(document, { childList: true, subtree: true, attributes: true, attributeFilter: ["open"], attributeOldValue: true });
@@ -53,8 +55,12 @@ function installSheetDrag(config) {
     }
     const delta = coord(event) - drag.start;
     drag.shift = drag.direction === 1 ? Math.max(0, delta) : Math.min(0, delta);
-    drag.last = coord(event);
-    drag.lastT = Date.now();
+    if (coord(event) !== drag.last) {
+      const now = Date.now();
+      drag.velocity = (coord(event) - drag.last) / Math.max(1, now - drag.lastT);
+      drag.last = coord(event);
+      drag.lastT = now;
+    }
     drag.dialog.style.setProperty(config.property, `${drag.shift}px`);
   };
   const onUp = (event) => {
@@ -64,13 +70,14 @@ function installSheetDrag(config) {
       onCancel();
       return;
     }
+    onMove(event);
     drag = null;
     observer.disconnect();
     held.dialog.style.transition = "";
-    const dt = Math.max(1, Date.now() - held.lastT);
-    const velocity = (coord(event) - held.last) / dt;
-    config.onRelease?.(Math.abs(held.shift) > DRAG_SLOP);
-    const dismiss = held.direction === 1 ? held.shift > DISMISS_DISTANCE || velocity > DISMISS_VELOCITY : held.shift < -DISMISS_DISTANCE || velocity < -DISMISS_VELOCITY;
+    const velocity = Date.now() - held.lastT < FLICK_TIMEOUT ? held.velocity : 0;
+    const dragged = Math.abs(held.shift) > DRAG_SLOP;
+    config.onRelease?.(dragged);
+    const dismiss = dragged && (held.direction === 1 ? held.shift > DISMISS_DISTANCE || velocity > DISMISS_VELOCITY : held.shift < -DISMISS_DISTANCE || velocity < -DISMISS_VELOCITY);
     if (dismiss && held.dialog.open) held.dialog.close();
     held.dialog.style.setProperty(config.property, "0px");
   };
@@ -99,4 +106,4 @@ function installSheetDrag(config) {
 export {
   installSheetDrag
 };
-//# sourceMappingURL=chunk-LZVBJ33S.mjs.map
+//# sourceMappingURL=chunk-GZWPXXY6.mjs.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/behaviors/sheetDrag.ts"],
+  "sourcesContent": ["import { Utils } from '../core/utils';\n\n/**\n * Drag-to-dismiss, shared by the bottom sheet and the side sheet.\n *\n * The two were the same state machine written twice on different axes - same\n * dismissal distance, same flick velocity, same transition suppression, same\n * pointer bookkeeping - so a fix to one could land without reaching the other.\n * What actually differs between them is stated as configuration below.\n *\n * Light-dismiss on the scrim is not here; it stays with `Dialogs`.\n */\nexport interface SheetDragConfig {\n  /** Which dialogs this drag applies to. */\n  selector: string;\n  /** The axis the sheet travels on. */\n  axis: 'x' | 'y';\n  /** The custom property carrying the live drag offset. */\n  property: string;\n  /**\n   * `1` when the sheet dismisses toward increasing coordinates (downward, or\n   * rightward for an end-docked side sheet), `-1` when it dismisses toward\n   * decreasing ones. A function rather than a constant because a side sheet's\n   * direction depends on which edge each individual sheet is docked to.\n   */\n  direction: (dialog: HTMLDialogElement) => 1 | -1;\n  /** Whether a press at this point landed on the sheet's drag handle. */\n  inHandle: (event: PointerEvent, dialog: HTMLDialogElement) => boolean;\n  /**\n   * Called on primary `pointerdown`, after clearing the previous drag. The\n   * bottom sheet clears its dragged flag here so a sequence abandoned without\n   * a `pointerup` cannot leave the flag set and swallow the next tap.\n   */\n  onPress?: () => void;\n  /** Called when a drag ends, with whether the pointer actually moved. */\n  onRelease?: (dragged: boolean) => void;\n}\n\n/** Past this the sheet dismisses rather than snapping back, in pixels. */\nconst DISMISS_DISTANCE = 96;\n/** Past this a flick dismisses whatever the distance, in pixels per millisecond. */\nconst DISMISS_VELOCITY = 0.5;\n/** Ignore a flick after the pointer has rested for this many milliseconds. */\nconst FLICK_TIMEOUT = 100;\n/** Past this the pointer was dragging, not tapping. Hand jitter, in pixels. */\nconst DRAG_SLOP = 4;\n\n/**\n * Register one sheet kind's drag handlers on the document. Called once per kind\n * at import time; there is nothing to tear down.\n */\nexport function installSheetDrag(config: SheetDragConfig): void {\n  const coord = (event: PointerEvent) => (config.axis === 'x' ? event.clientX : event.clientY);\n  let observer: MutationObserver;\n\n  let drag: {\n    dialog: HTMLDialogElement;\n    pointerId: number;\n    direction: 1 | -1;\n    start: number;\n    last: number;\n    lastT: number;\n    velocity: number;\n    shift: number;\n  } | null = null;\n\n  const sheetFor = (target: EventTarget | null): HTMLDialogElement | null => {\n    if (!(target instanceof Element)) return null;\n    const dialog = target.closest(config.selector);\n    return dialog instanceof HTMLDialogElement ? dialog : null;\n  };\n\n  const reset = (dialog: HTMLDialogElement) => {\n    dialog.style.transition = '';\n    dialog.style.setProperty(config.property, '0px');\n  };\n\n  const onDown = (event: PointerEvent) => {\n    // A press that is not the primary pointer is ignored without disturbing a\n    // drag already in flight - a second finger must not abort the first one.\n    // A press that lands off the sheet or off its handle does clear it.\n    if (!event.isPrimary) return;\n    if (event.pointerType === 'mouse' && event.button !== 0) return;\n    onCancel();\n    config.onPress?.();\n    const dialog = sheetFor(event.target);\n    if (!dialog?.open) {\n      drag = null;\n      return;\n    }\n    if (!config.inHandle(event, dialog)) {\n      drag = null;\n      return;\n    }\n    dialog.style.transition = 'none';\n    drag = {\n      dialog,\n      pointerId: event.pointerId,\n      direction: config.direction(dialog),\n      start: coord(event),\n      last: coord(event),\n      lastT: Date.now(),\n      velocity: 0,\n      shift: 0\n    };\n    observer.observe(document, { childList: true, subtree: true, attributes: true, attributeFilter: ['open'], attributeOldValue: true });\n  };\n\n  const onMove = (event: PointerEvent) => {\n    if (!drag || drag.pointerId !== event.pointerId) return;\n    if (!drag.dialog.open || !drag.dialog.isConnected) {\n      onCancel();\n      return;\n    }\n    const delta = coord(event) - drag.start;\n    // Only movement toward dismissal counts; dragging the other way is a no-op\n    // rather than a sheet that lifts off its edge.\n    drag.shift = drag.direction === 1 ? Math.max(0, delta) : Math.min(0, delta);\n    if (coord(event) !== drag.last) {\n      const now = Date.now();\n      drag.velocity = (coord(event) - drag.last) / Math.max(1, now - drag.lastT);\n      drag.last = coord(event);\n      drag.lastT = now;\n    }\n    drag.dialog.style.setProperty(config.property, `${drag.shift}px`);\n  };\n\n  const onUp = (event: PointerEvent) => {\n    const held = drag;\n    if (!held || held.pointerId !== event.pointerId) return;\n    if (!held.dialog.open || !held.dialog.isConnected) {\n      onCancel();\n      return;\n    }\n    onMove(event);\n    drag = null;\n    observer.disconnect();\n    // Not `reset()`, though it looks like it: the two halves belong on either\n    // side of close(). The transition has to be back before the sheet closes,\n    // so the dismissal animates; the shift has to clear after, or a snap-back\n    // would jump to zero before the transition could carry it there.\n    held.dialog.style.transition = '';\n    const velocity = Date.now() - held.lastT < FLICK_TIMEOUT ? held.velocity : 0;\n    const dragged = Math.abs(held.shift) > DRAG_SLOP;\n    config.onRelease?.(dragged);\n    const dismiss = dragged &&\n      (held.direction === 1\n        ? held.shift > DISMISS_DISTANCE || velocity > DISMISS_VELOCITY\n        : held.shift < -DISMISS_DISTANCE || velocity < -DISMISS_VELOCITY);\n    if (dismiss && held.dialog.open) held.dialog.close();\n    held.dialog.style.setProperty(config.property, '0px');\n  };\n\n  const onCancel = (event?: PointerEvent) => {\n    if (event && drag?.pointerId !== event.pointerId) return;\n    observer.disconnect();\n    config.onRelease?.(false);\n    const held = drag;\n    drag = null;\n    if (held) reset(held.dialog);\n  };\n\n  Utils.onDocumentReady(() => {\n    observer = new MutationObserver(records => {\n      const dialog = drag?.dialog;\n      if (dialog && (!dialog.open || !dialog.isConnected || records.some(record =>\n        (record.type === 'attributes' && record.target === dialog && record.oldValue === null) ||\n        [...record.removedNodes].some(node => node.contains(dialog))\n      ))) onCancel();\n    });\n    document.addEventListener('pointerdown', onDown, { passive: true });\n    document.addEventListener('pointermove', onMove, { passive: true });\n    document.addEventListener('pointerup', onUp, { passive: true });\n    document.addEventListener('pointercancel', onCancel, { passive: true });\n  });\n}\n"],
+  "mappings": ";;;;;AAuCA,IAAM,mBAAmB;AAEzB,IAAM,mBAAmB;AAEzB,IAAM,gBAAgB;AAEtB,IAAM,YAAY;AAMX,SAAS,iBAAiB,QAA+B;AAC9D,QAAM,QAAQ,CAAC,UAAyB,OAAO,SAAS,MAAM,MAAM,UAAU,MAAM;AACpF,MAAI;AAEJ,MAAI,OASO;AAEX,QAAM,WAAW,CAAC,WAAyD;AACzE,QAAI,EAAE,kBAAkB,SAAU,QAAO;AACzC,UAAM,SAAS,OAAO,QAAQ,OAAO,QAAQ;AAC7C,WAAO,kBAAkB,oBAAoB,SAAS;AAAA,EACxD;AAEA,QAAM,QAAQ,CAAC,WAA8B;AAC3C,WAAO,MAAM,aAAa;AAC1B,WAAO,MAAM,YAAY,OAAO,UAAU,KAAK;AAAA,EACjD;AAEA,QAAM,SAAS,CAAC,UAAwB;AAItC,QAAI,CAAC,MAAM,UAAW;AACtB,QAAI,MAAM,gBAAgB,WAAW,MAAM,WAAW,EAAG;AACzD,aAAS;AACT,WAAO,UAAU;AACjB,UAAM,SAAS,SAAS,MAAM,MAAM;AACpC,QAAI,CAAC,QAAQ,MAAM;AACjB,aAAO;AACP;AAAA,IACF;AACA,QAAI,CAAC,OAAO,SAAS,OAAO,MAAM,GAAG;AACnC,aAAO;AACP;AAAA,IACF;AACA,WAAO,MAAM,aAAa;AAC1B,WAAO;AAAA,MACL;AAAA,MACA,WAAW,MAAM;AAAA,MACjB,WAAW,OAAO,UAAU,MAAM;AAAA,MAClC,OAAO,MAAM,KAAK;AAAA,MAClB,MAAM,MAAM,KAAK;AAAA,MACjB,OAAO,KAAK,IAAI;AAAA,MAChB,UAAU;AAAA,MACV,OAAO;AAAA,IACT;AACA,aAAS,QAAQ,UAAU,EAAE,WAAW,MAAM,SAAS,MAAM,YAAY,MAAM,iBAAiB,CAAC,MAAM,GAAG,mBAAmB,KAAK,CAAC;AAAA,EACrI;AAEA,QAAM,SAAS,CAAC,UAAwB;AACtC,QAAI,CAAC,QAAQ,KAAK,cAAc,MAAM,UAAW;AACjD,QAAI,CAAC,KAAK,OAAO,QAAQ,CAAC,KAAK,OAAO,aAAa;AACjD,eAAS;AACT;AAAA,IACF;AACA,UAAM,QAAQ,MAAM,KAAK,IAAI,KAAK;AAGlC,SAAK,QAAQ,KAAK,cAAc,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,IAAI,GAAG,KAAK;AAC1E,QAAI,MAAM,KAAK,MAAM,KAAK,MAAM;AAC9B,YAAM,MAAM,KAAK,IAAI;AACrB,WAAK,YAAY,MAAM,KAAK,IAAI,KAAK,QAAQ,KAAK,IAAI,GAAG,MAAM,KAAK,KAAK;AACzE,WAAK,OAAO,MAAM,KAAK;AACvB,WAAK,QAAQ;AAAA,IACf;AACA,SAAK,OAAO,MAAM,YAAY,OAAO,UAAU,GAAG,KAAK,KAAK,IAAI;AAAA,EAClE;AAEA,QAAM,OAAO,CAAC,UAAwB;AACpC,UAAM,OAAO;AACb,QAAI,CAAC,QAAQ,KAAK,cAAc,MAAM,UAAW;AACjD,QAAI,CAAC,KAAK,OAAO,QAAQ,CAAC,KAAK,OAAO,aAAa;AACjD,eAAS;AACT;AAAA,IACF;AACA,WAAO,KAAK;AACZ,WAAO;AACP,aAAS,WAAW;AAKpB,SAAK,OAAO,MAAM,aAAa;AAC/B,UAAM,WAAW,KAAK,IAAI,IAAI,KAAK,QAAQ,gBAAgB,KAAK,WAAW;AAC3E,UAAM,UAAU,KAAK,IAAI,KAAK,KAAK,IAAI;AACvC,WAAO,YAAY,OAAO;AAC1B,UAAM,UAAU,YACb,KAAK,cAAc,IAChB,KAAK,QAAQ,oBAAoB,WAAW,mBAC5C,KAAK,QAAQ,CAAC,oBAAoB,WAAW,CAAC;AACpD,QAAI,WAAW,KAAK,OAAO,KAAM,MAAK,OAAO,MAAM;AACnD,SAAK,OAAO,MAAM,YAAY,OAAO,UAAU,KAAK;AAAA,EACtD;AAEA,QAAM,WAAW,CAAC,UAAyB;AACzC,QAAI,SAAS,MAAM,cAAc,MAAM,UAAW;AAClD,aAAS,WAAW;AACpB,WAAO,YAAY,KAAK;AACxB,UAAM,OAAO;AACb,WAAO;AACP,QAAI,KAAM,OAAM,KAAK,MAAM;AAAA,EAC7B;AAEA,QAAM,gBAAgB,MAAM;AAC1B,eAAW,IAAI,iBAAiB,aAAW;AACzC,YAAM,SAAS,MAAM;AACrB,UAAI,WAAW,CAAC,OAAO,QAAQ,CAAC,OAAO,eAAe,QAAQ;AAAA,QAAK,YAChE,OAAO,SAAS,gBAAgB,OAAO,WAAW,UAAU,OAAO,aAAa,QACjF,CAAC,GAAG,OAAO,YAAY,EAAE,KAAK,UAAQ,KAAK,SAAS,MAAM,CAAC;AAAA,MAC7D,GAAI,UAAS;AAAA,IACf,CAAC;AACD,aAAS,iBAAiB,eAAe,QAAQ,EAAE,SAAS,KAAK,CAAC;AAClE,aAAS,iBAAiB,eAAe,QAAQ,EAAE,SAAS,KAAK,CAAC;AAClE,aAAS,iBAAiB,aAAa,MAAM,EAAE,SAAS,KAAK,CAAC;AAC9D,aAAS,iBAAiB,iBAAiB,UAAU,EAAE,SAAS,KAAK,CAAC;AAAA,EACxE,CAAC;AACH;",
+  "names": []
+}

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

@@ -0,0 +1,48 @@
+import {
+  ColumnChart
+} from "./chunk-SPETGK25.mjs";
+import {
+  LineChart
+} from "./chunk-O5XPWXIQ.mjs";
+
+// src/ts/components/mixedChart.ts
+var has = (series, name) => series.className.split(/\s+/).includes(name);
+var MixedChart = class extends ColumnChart {
+  get _type() {
+    return "mixed-chart";
+  }
+  get _key() {
+    return "Expressive_MixedChart";
+  }
+  get _points() {
+    return true;
+  }
+  static init(els, options = {}) {
+    return super.init(els, options);
+  }
+  static getInstance(el) {
+    return el["Expressive_MixedChart"];
+  }
+  /** The start scale, then the end scale; each includes zero if it has columns. */
+  _scale(series, min, max) {
+    const end = series.filter((each) => has(each, "end"));
+    const start = series.filter((each) => !end.includes(each));
+    const columns = (list) => list.some((each) => has(each, "column"));
+    super._scale(end, this._number("endMin"), this._number("endMax"), columns(end));
+    return super._scale(start, min, max, columns(start));
+  }
+  /** Columns behind, then the lines and areas over them. */
+  _draw() {
+    const marks = document.createElement("div");
+    marks.className = "mixed-chart-marks";
+    const columns = super._draw(this.series.filter((series) => has(series, "column")));
+    columns.className = "mixed-chart-columns";
+    marks.append(columns, LineChart.prototype["_draw"].call(this, this.series.filter((series) => !has(series, "column"))));
+    return marks;
+  }
+};
+
+export {
+  MixedChart
+};
+//# sourceMappingURL=chunk-HKT2S7VM.mjs.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/components/mixedChart.ts"],
+  "sourcesContent": ["import { InitElements, InitElement } from '../core/component';\nimport { ColumnChart } from './columnChart';\nimport { LineChart, LineChartOptions, Series } from './lineChart';\n\nexport type MixedChartOptions = LineChartOptions;\n\n/** Whether a series header cell has a class. */\nconst has = (series: Series, name: string) => series.className.split(/\\s+/).includes(name);\n\n/**\n * Mixed chart. It reads its <table> like LineChart, and draws each series\n * by its header cell's class: `column` as columns from zero, `area` as a\n * line with a fill under it, and anything else as a line. Series with\n * `end` are drawn against a second scale, set by `data-end-min` and\n * `data-end-max`, so values of different sizes or units share the plot.\n *\n * Re-run `MixedChart.init(el)` after changing the table.\n */\nexport class MixedChart extends ColumnChart {\n  protected get _type() {\n    return 'mixed-chart';\n  }\n\n  protected get _key() {\n    return 'Expressive_MixedChart';\n  }\n\n  protected get _points() {\n    return true;\n  }\n\n  static init(el: HTMLElement, options?: Partial<MixedChartOptions>): MixedChart;\n  static init(els: InitElements<InitElement>, options?: Partial<MixedChartOptions>): MixedChart[];\n  static init(\n    els: HTMLElement | InitElements<InitElement>,\n    options: Partial<MixedChartOptions> = {}\n  ): MixedChart | MixedChart[] {\n    return super.init(els as HTMLElement, options) as MixedChart | MixedChart[];\n  }\n\n  static getInstance(el: HTMLElement): MixedChart {\n    return el['Expressive_MixedChart'];\n  }\n\n  /** The start scale, then the end scale; each includes zero if it has columns. */\n  protected _scale(series: Series[], min: number | null, max: number | null) {\n    const end = series.filter((each) => has(each, 'end'));\n    const start = series.filter((each) => !end.includes(each));\n    const columns = (list: Series[]) => list.some((each) => has(each, 'column'));\n    super._scale(end, this._number('endMin'), this._number('endMax'), columns(end));\n    return super._scale(start, min, max, columns(start));\n  }\n\n  /** Columns behind, then the lines and areas over them. */\n  protected _draw(): Element {\n    const marks = document.createElement('div');\n    marks.className = 'mixed-chart-marks';\n    const columns = super._draw(this.series.filter((series) => has(series, 'column')));\n    columns.className = 'mixed-chart-columns';\n    marks.append(columns, LineChart.prototype['_draw'].call(this, this.series.filter((series) => !has(series, 'column'))));\n    return marks;\n  }\n}\n"],
+  "mappings": ";;;;;;;;AAOA,IAAM,MAAM,CAAC,QAAgB,SAAiB,OAAO,UAAU,MAAM,KAAK,EAAE,SAAS,IAAI;AAWlF,IAAM,aAAN,cAAyB,YAAY;AAAA,EAC1C,IAAc,QAAQ;AACpB,WAAO;AAAA,EACT;AAAA,EAEA,IAAc,OAAO;AACnB,WAAO;AAAA,EACT;AAAA,EAEA,IAAc,UAAU;AACtB,WAAO;AAAA,EACT;AAAA,EAIA,OAAO,KACL,KACA,UAAsC,CAAC,GACZ;AAC3B,WAAO,MAAM,KAAK,KAAoB,OAAO;AAAA,EAC/C;AAAA,EAEA,OAAO,YAAY,IAA6B;AAC9C,WAAO,GAAG,uBAAuB;AAAA,EACnC;AAAA;AAAA,EAGU,OAAO,QAAkB,KAAoB,KAAoB;AACzE,UAAM,MAAM,OAAO,OAAO,CAAC,SAAS,IAAI,MAAM,KAAK,CAAC;AACpD,UAAM,QAAQ,OAAO,OAAO,CAAC,SAAS,CAAC,IAAI,SAAS,IAAI,CAAC;AACzD,UAAM,UAAU,CAAC,SAAmB,KAAK,KAAK,CAAC,SAAS,IAAI,MAAM,QAAQ,CAAC;AAC3E,UAAM,OAAO,KAAK,KAAK,QAAQ,QAAQ,GAAG,KAAK,QAAQ,QAAQ,GAAG,QAAQ,GAAG,CAAC;AAC9E,WAAO,MAAM,OAAO,OAAO,KAAK,KAAK,QAAQ,KAAK,CAAC;AAAA,EACrD;AAAA;AAAA,EAGU,QAAiB;AACzB,UAAM,QAAQ,SAAS,cAAc,KAAK;AAC1C,UAAM,YAAY;AAClB,UAAM,UAAU,MAAM,MAAM,KAAK,OAAO,OAAO,CAAC,WAAW,IAAI,QAAQ,QAAQ,CAAC,CAAC;AACjF,YAAQ,YAAY;AACpB,UAAM,OAAO,SAAS,UAAU,UAAU,OAAO,EAAE,KAAK,MAAM,KAAK,OAAO,OAAO,CAAC,WAAW,CAAC,IAAI,QAAQ,QAAQ,CAAC,CAAC,CAAC;AACrH,WAAO;AAAA,EACT;AACF;",
+  "names": []
+}