@expressivecss/expressive 0.13.1 → 0.14.1

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

@@ -0,0 +1,214 @@
+import {
+  Component
+} from "./chunk-LTWPGFBR.mjs";
+
+// src/ts/components/confetti.ts
+var _defaults = {
+  particleCount: 50,
+  angle: 90,
+  spread: 45,
+  startVelocity: 45,
+  decay: 0.9,
+  gravity: 1,
+  drift: 0,
+  ticks: 200,
+  origin: { x: 0.5, y: 0.5 },
+  colors: [],
+  shapes: ["square", "circle"],
+  scalar: 1,
+  manualStart: false
+};
+var THEME_COLORS = ["primary", "secondary", "tertiary", "primary-container", "secondary-container", "tertiary-container"];
+var FALLBACK_COLORS = ["#26ccff", "#a25afd", "#ff5e7e", "#88ff5a", "#fcff42", "#ffa62d", "#ff36ff"];
+var RAD = Math.PI / 180;
+var scenes = /* @__PURE__ */ new Map();
+var overlay = null;
+var Confetti = class _Confetti extends Component {
+  constructor(el, options) {
+    super(el, options, _Confetti);
+    this._onClick = () => {
+      this.fire();
+    };
+    this.el["Expressive_Confetti"] = this;
+    this.options = { ..._Confetti.defaults, ...options };
+    if (!(el instanceof HTMLCanvasElement)) el.addEventListener("click", this._onClick);
+    else if (!this.options.manualStart) this.fire();
+  }
+  static get defaults() {
+    return _defaults;
+  }
+  static init(els, options = {}) {
+    return super.init(els, options, _Confetti);
+  }
+  static getInstance(el) {
+    return el["Expressive_Confetti"];
+  }
+  /**
+   * Bursts over the whole viewport. Resolves when the last piece is gone.
+   */
+  static fire(options = {}) {
+    return burst(viewportCanvas, document.body, { ..._Confetti.defaults, ...options });
+  }
+  /**
+   * Bursts on this canvas, or from this element's center over the viewport.
+   * Resolves when the last piece is gone.
+   */
+  fire(options = {}) {
+    const merged = { ...this.options, ...options };
+    if (this.el instanceof HTMLCanvasElement) {
+      const canvas = this.el;
+      return burst(() => canvas, canvas.parentElement ?? document.body, merged);
+    }
+    const r = this.el.getBoundingClientRect();
+    merged.origin = { x: (r.left + r.width / 2) / innerWidth, y: (r.top + r.height / 2) / innerHeight };
+    return burst(viewportCanvas, this.el.parentElement ?? document.body, merged);
+  }
+  destroy() {
+    this.el.removeEventListener("click", this._onClick);
+    if (this.el instanceof HTMLCanvasElement) stop(this.el);
+    this.el["Expressive_Confetti"] = void 0;
+  }
+};
+function burst(getCanvas, themed, o) {
+  if (typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches) return Promise.resolve();
+  const canvas = getCanvas();
+  let scene = scenes.get(canvas);
+  if (!scene) {
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return Promise.resolve();
+    scene = { ctx, pieces: [], frame: 0, last: 0, done: [], overlay: canvas === overlay };
+    scenes.set(canvas, scene);
+  }
+  const { width, height } = fit(canvas);
+  const colors = o.colors.length ? o.colors : themeColors(themed);
+  const x = (o.origin.x ?? 0.5) * width;
+  const y = (o.origin.y ?? 0.5) * height;
+  for (let i = 0; i < o.particleCount; i++) {
+    scene.pieces.push({
+      x,
+      y,
+      velocity: o.startVelocity * (0.5 + Math.random()),
+      angle: -o.angle * RAD + (0.5 - Math.random()) * o.spread * RAD,
+      wobble: Math.random() * 10,
+      wobbleSpeed: 0.05 + Math.random() * 0.05,
+      tilt: (0.25 + Math.random() / 2) * Math.PI,
+      tick: 0,
+      color: colors[i % colors.length],
+      shape: o.shapes[Math.floor(Math.random() * o.shapes.length)] ?? "square",
+      options: o
+    });
+  }
+  const s = scene;
+  if (!s.frame) s.frame = requestAnimationFrame((now) => {
+    s.last = now;
+    draw(canvas, s, now);
+  });
+  return new Promise((resolve) => s.done.push(resolve));
+}
+function draw(canvas, scene, now) {
+  const step = Math.min((now - scene.last) / (1e3 / 60), 4);
+  scene.last = now;
+  const { width, height } = fit(canvas);
+  const { ctx } = scene;
+  const dpr = canvas.width / (width || 1);
+  ctx.setTransform(1, 0, 0, 1, 0, 0);
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  scene.pieces = scene.pieces.filter((p) => {
+    const o = p.options;
+    p.x += (Math.cos(p.angle) * p.velocity + o.drift) * step;
+    p.y += (Math.sin(p.angle) * p.velocity + o.gravity * 3) * step;
+    p.velocity *= o.decay ** step;
+    p.wobble += p.wobbleSpeed * step;
+    p.tilt += 0.1 * step;
+    p.tick += step;
+    if (p.tick >= o.ticks) return false;
+    const size = 8 * o.scalar;
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    ctx.translate(p.x + 10 * o.scalar * Math.cos(p.wobble), p.y + 10 * o.scalar * Math.sin(p.wobble));
+    ctx.rotate(p.tilt);
+    ctx.scale(1, Math.cos(p.wobble));
+    ctx.globalAlpha = 1 - p.tick / o.ticks;
+    ctx.fillStyle = p.color;
+    ctx.beginPath();
+    if (p.shape === "circle") ctx.arc(0, 0, size / 2, 0, 2 * Math.PI);
+    else if (p.shape === "star") star(ctx, size * 0.75);
+    else ctx.rect(-size / 2, -size / 2, size, size);
+    ctx.fill();
+    return true;
+  });
+  if (scene.pieces.length) scene.frame = requestAnimationFrame((t) => draw(canvas, scene, t));
+  else stop(canvas);
+}
+function stop(canvas) {
+  const scene = scenes.get(canvas);
+  if (!scene) return;
+  cancelAnimationFrame(scene.frame);
+  scenes.delete(canvas);
+  scene.ctx.setTransform(1, 0, 0, 1, 0, 0);
+  scene.ctx.clearRect(0, 0, canvas.width, canvas.height);
+  if (scene.overlay) {
+    canvas.remove();
+    overlay = null;
+  }
+  for (const resolve of scene.done) resolve();
+}
+function star(ctx, r) {
+  for (let i = 0; i < 10; i++) {
+    const a = i * Math.PI / 5 - Math.PI / 2;
+    const d = i % 2 ? r / 2 : r;
+    ctx.lineTo(Math.cos(a) * d, Math.sin(a) * d);
+  }
+  ctx.closePath();
+}
+function fit(canvas) {
+  const width = canvas.clientWidth;
+  const height = canvas.clientHeight;
+  const w = Math.round(width * devicePixelRatio);
+  const h = Math.round(height * devicePixelRatio);
+  if (canvas.width !== w || canvas.height !== h) {
+    canvas.width = w;
+    canvas.height = h;
+  }
+  return { width, height };
+}
+function viewportCanvas() {
+  if (overlay?.isConnected) return overlay;
+  overlay = document.createElement("canvas");
+  overlay.className = "confetti-overlay";
+  overlay.setAttribute("aria-hidden", "true");
+  Object.assign(overlay.style, {
+    position: "fixed",
+    inset: "0",
+    width: "100%",
+    height: "100%",
+    margin: "0",
+    padding: "0",
+    border: "0",
+    background: "transparent",
+    pointerEvents: "none",
+    zIndex: "10001"
+  });
+  document.body.append(overlay);
+  if (typeof overlay.showPopover === "function") {
+    overlay.popover = "manual";
+    overlay.showPopover();
+  }
+  return overlay;
+}
+function themeColors(themed) {
+  const probe = document.createElement("span");
+  probe.hidden = true;
+  themed.append(probe);
+  const style = getComputedStyle(probe);
+  const colors = THEME_COLORS.filter((role) => style.getPropertyValue(`--md-sys-color-${role}`).trim()).map((role) => {
+    probe.style.color = `var(--md-sys-color-${role})`;
+    return getComputedStyle(probe).color;
+  });
+  probe.remove();
+  return colors.length ? colors : FALLBACK_COLORS;
+}
+
+export {
+  Confetti
+};
+//# sourceMappingURL=chunk-UEXCIMJZ.mjs.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/components/confetti.ts"],
+  "sourcesContent": ["import { Component, BaseOptions, InitElements, InitElement } from '../core/component';\n\nexport type ConfettiShape = 'square' | 'circle' | 'star';\n\nexport interface ConfettiOptions extends BaseOptions {\n  /**\n   * Pieces per burst.\n   * @default 50\n   */\n  particleCount: number;\n  /**\n   * Launch direction in degrees. 90 is straight up, 0 is right.\n   * @default 90\n   */\n  angle: number;\n  /**\n   * How far the pieces fan out from the angle, in degrees.\n   * @default 45\n   */\n  spread: number;\n  /**\n   * Launch speed in pixels per frame.\n   * @default 45\n   */\n  startVelocity: number;\n  /**\n   * Share of its speed a piece keeps each frame.\n   * @default 0.9\n   */\n  decay: number;\n  /**\n   * Pull toward the bottom. 0 floats, 1 is normal.\n   * @default 1\n   */\n  gravity: number;\n  /**\n   * Sideways push per frame. Negative drifts left.\n   * @default 0\n   */\n  drift: number;\n  /**\n   * Frames a piece lives while it fades out.\n   * @default 200\n   */\n  ticks: number;\n  /**\n   * Launch point as fractions of the canvas, 0 to 1. A missing side is\n   * 0.5. A trigger element ignores it and launches from its own center.\n   * @default { x: 0.5, y: 0.5 }\n   */\n  origin: { x?: number; y?: number };\n  /**\n   * CSS colors. Empty uses the theme's primary, secondary and tertiary\n   * colors and their containers.\n   * @default []\n   */\n  colors: string[];\n  /**\n   * @default ['square', 'circle']\n   */\n  shapes: ConfettiShape[];\n  /**\n   * Piece size multiplier.\n   * @default 1\n   */\n  scalar: number;\n  /**\n   * On a canvas, wait for `fire()` instead of bursting once at init.\n   * @default false\n   */\n  manualStart: boolean;\n}\n\nconst _defaults: ConfettiOptions = {\n  particleCount: 50,\n  angle: 90,\n  spread: 45,\n  startVelocity: 45,\n  decay: 0.9,\n  gravity: 1,\n  drift: 0,\n  ticks: 200,\n  origin: { x: 0.5, y: 0.5 },\n  colors: [],\n  shapes: ['square', 'circle'],\n  scalar: 1,\n  manualStart: false\n};\n\nconst THEME_COLORS = ['primary', 'secondary', 'tertiary', 'primary-container', 'secondary-container', 'tertiary-container'];\n// Used when the page has no theme tokens.\nconst FALLBACK_COLORS = ['#26ccff', '#a25afd', '#ff5e7e', '#88ff5a', '#fcff42', '#ffa62d', '#ff36ff'];\nconst RAD = Math.PI / 180;\n\ninterface Piece {\n  x: number;\n  y: number;\n  velocity: number;\n  angle: number;\n  wobble: number;\n  wobbleSpeed: number;\n  tilt: number;\n  tick: number;\n  color: string;\n  shape: ConfettiShape;\n  options: ConfettiOptions;\n}\n\ninterface Scene {\n  ctx: CanvasRenderingContext2D;\n  pieces: Piece[];\n  frame: number;\n  last: number;\n  done: (() => void)[];\n  overlay: boolean;\n}\n\nconst scenes = new Map<HTMLCanvasElement, Scene>();\nlet overlay: HTMLCanvasElement | null = null;\n\n/**\n * Confetti. Bursts of theme-colored pieces drawn on a canvas.\n *\n * - `Confetti.fire(options)` bursts over the whole viewport.\n * - Any other `.confetti` element bursts from its center when clicked.\n * - A `<canvas class=\"confetti\">` bursts inside its own box, once at init\n *   unless `manualStart`, and again on each `fire()`.\n *\n * The viewport canvas is a manual popover, so it draws above an open modal\n * dialog, and it ignores the pointer. Nothing is drawn when the reader\n * prefers reduced motion.\n */\nexport class Confetti extends Component<ConfettiOptions> {\n  private _onClick = () => { this.fire(); };\n\n  constructor(el: HTMLElement, options: Partial<ConfettiOptions>) {\n    super(el, options, Confetti);\n    this.el['Expressive_Confetti'] = this;\n    this.options = { ...Confetti.defaults, ...options };\n    if (!(el instanceof HTMLCanvasElement)) el.addEventListener('click', this._onClick);\n    else if (!this.options.manualStart) this.fire();\n  }\n\n  static get defaults(): ConfettiOptions {\n    return _defaults;\n  }\n\n  static init(el: HTMLElement, options?: Partial<ConfettiOptions>): Confetti;\n  static init(els: InitElements<InitElement>, options?: Partial<ConfettiOptions>): Confetti[];\n  static init(\n    els: HTMLElement | InitElements<InitElement>,\n    options: Partial<ConfettiOptions> = {}\n  ): Confetti | Confetti[] {\n    return super.init(els, options, Confetti);\n  }\n\n  static getInstance(el: HTMLElement): Confetti {\n    return el['Expressive_Confetti'];\n  }\n\n  /**\n   * Bursts over the whole viewport. Resolves when the last piece is gone.\n   */\n  static fire(options: Partial<ConfettiOptions> = {}): Promise<void> {\n    return burst(viewportCanvas, document.body, { ...Confetti.defaults, ...options });\n  }\n\n  /**\n   * Bursts on this canvas, or from this element's center over the viewport.\n   * Resolves when the last piece is gone.\n   */\n  fire(options: Partial<ConfettiOptions> = {}): Promise<void> {\n    const merged = { ...this.options, ...options };\n    if (this.el instanceof HTMLCanvasElement) {\n      const canvas = this.el;\n      return burst(() => canvas, canvas.parentElement ?? document.body, merged);\n    }\n    const r = this.el.getBoundingClientRect();\n    merged.origin = { x: (r.left + r.width / 2) / innerWidth, y: (r.top + r.height / 2) / innerHeight };\n    return burst(viewportCanvas, this.el.parentElement ?? document.body, merged);\n  }\n\n  destroy() {\n    this.el.removeEventListener('click', this._onClick);\n    if (this.el instanceof HTMLCanvasElement) stop(this.el);\n    this.el['Expressive_Confetti'] = undefined;\n  }\n}\n\n// `themed` is where the theme colors are read, so a scoped theme applies.\nfunction burst(getCanvas: () => HTMLCanvasElement, themed: Element, o: ConfettiOptions): Promise<void> {\n  if (typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches) return Promise.resolve();\n  const canvas = getCanvas();\n  let scene = scenes.get(canvas);\n  if (!scene) {\n    const ctx = canvas.getContext('2d');\n    if (!ctx) return Promise.resolve();\n    scene = { ctx, pieces: [], frame: 0, last: 0, done: [], overlay: canvas === overlay };\n    scenes.set(canvas, scene);\n  }\n  const { width, height } = fit(canvas);\n  const colors = o.colors.length ? o.colors : themeColors(themed);\n  const x = (o.origin.x ?? 0.5) * width;\n  const y = (o.origin.y ?? 0.5) * height;\n  for (let i = 0; i < o.particleCount; i++) {\n    scene.pieces.push({\n      x, y,\n      velocity: o.startVelocity * (0.5 + Math.random()),\n      angle: -o.angle * RAD + (0.5 - Math.random()) * o.spread * RAD,\n      wobble: Math.random() * 10,\n      wobbleSpeed: 0.05 + Math.random() * 0.05,\n      tilt: (0.25 + Math.random() / 2) * Math.PI,\n      tick: 0,\n      color: colors[i % colors.length],\n      shape: o.shapes[Math.floor(Math.random() * o.shapes.length)] ?? 'square',\n      options: o\n    });\n  }\n  const s = scene;\n  if (!s.frame) s.frame = requestAnimationFrame((now) => { s.last = now; draw(canvas, s, now); });\n  return new Promise((resolve) => s.done.push(resolve));\n}\n\nfunction draw(canvas: HTMLCanvasElement, scene: Scene, now: number) {\n  // Frames are counted at 60 per second whatever the display rate.\n  const step = Math.min((now - scene.last) / (1000 / 60), 4);\n  scene.last = now;\n  const { width, height } = fit(canvas);\n  const { ctx } = scene;\n  const dpr = canvas.width / (width || 1);\n  ctx.setTransform(1, 0, 0, 1, 0, 0);\n  ctx.clearRect(0, 0, canvas.width, canvas.height);\n  scene.pieces = scene.pieces.filter((p) => {\n    const o = p.options;\n    p.x += (Math.cos(p.angle) * p.velocity + o.drift) * step;\n    p.y += (Math.sin(p.angle) * p.velocity + o.gravity * 3) * step;\n    p.velocity *= o.decay ** step;\n    p.wobble += p.wobbleSpeed * step;\n    p.tilt += 0.1 * step;\n    p.tick += step;\n    if (p.tick >= o.ticks) return false;\n    const size = 8 * o.scalar;\n    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\n    ctx.translate(p.x + 10 * o.scalar * Math.cos(p.wobble), p.y + 10 * o.scalar * Math.sin(p.wobble));\n    ctx.rotate(p.tilt);\n    ctx.scale(1, Math.cos(p.wobble));\n    ctx.globalAlpha = 1 - p.tick / o.ticks;\n    ctx.fillStyle = p.color;\n    ctx.beginPath();\n    if (p.shape === 'circle') ctx.arc(0, 0, size / 2, 0, 2 * Math.PI);\n    else if (p.shape === 'star') star(ctx, size * 0.75);\n    else ctx.rect(-size / 2, -size / 2, size, size);\n    ctx.fill();\n    return true;\n  });\n  if (scene.pieces.length) scene.frame = requestAnimationFrame((t) => draw(canvas, scene, t));\n  else stop(canvas);\n}\n\nfunction stop(canvas: HTMLCanvasElement) {\n  const scene = scenes.get(canvas);\n  if (!scene) return;\n  cancelAnimationFrame(scene.frame);\n  scenes.delete(canvas);\n  scene.ctx.setTransform(1, 0, 0, 1, 0, 0);\n  scene.ctx.clearRect(0, 0, canvas.width, canvas.height);\n  if (scene.overlay) {\n    canvas.remove();\n    overlay = null;\n  }\n  for (const resolve of scene.done) resolve();\n}\n\nfunction star(ctx: CanvasRenderingContext2D, r: number) {\n  for (let i = 0; i < 10; i++) {\n    const a = (i * Math.PI) / 5 - Math.PI / 2;\n    const d = i % 2 ? r / 2 : r;\n    ctx.lineTo(Math.cos(a) * d, Math.sin(a) * d);\n  }\n  ctx.closePath();\n}\n\n// Matches the canvas's pixel buffer to its box and the screen's pixel ratio.\nfunction fit(canvas: HTMLCanvasElement) {\n  const width = canvas.clientWidth;\n  const height = canvas.clientHeight;\n  const w = Math.round(width * devicePixelRatio);\n  const h = Math.round(height * devicePixelRatio);\n  if (canvas.width !== w || canvas.height !== h) {\n    canvas.width = w;\n    canvas.height = h;\n  }\n  return { width, height };\n}\n\nfunction viewportCanvas(): HTMLCanvasElement {\n  if (overlay?.isConnected) return overlay;\n  overlay = document.createElement('canvas');\n  overlay.className = 'confetti-overlay';\n  overlay.setAttribute('aria-hidden', 'true');\n  // Inline, so the overlay works even where the stylesheet does not reach.\n  Object.assign(overlay.style, {\n    position: 'fixed', inset: '0', width: '100%', height: '100%', margin: '0', padding: '0',\n    border: '0', background: 'transparent', pointerEvents: 'none', zIndex: '10001'\n  });\n  document.body.append(overlay);\n  if (typeof overlay.showPopover === 'function') {\n    overlay.popover = 'manual';\n    overlay.showPopover();\n  }\n  return overlay;\n}\n\n// Resolves each theme color token through `color`, so light-dark() and\n// relative colors reach the canvas as plain colors.\nfunction themeColors(themed: Element): string[] {\n  const probe = document.createElement('span');\n  probe.hidden = true;\n  themed.append(probe);\n  const style = getComputedStyle(probe);\n  const colors = THEME_COLORS.filter((role) => style.getPropertyValue(`--md-sys-color-${role}`).trim()).map((role) => {\n    probe.style.color = `var(--md-sys-color-${role})`;\n    return getComputedStyle(probe).color;\n  });\n  probe.remove();\n  return colors.length ? colors : FALLBACK_COLORS;\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/js/chunks/{chunk-P3G3QHII.mjs → chunk-VGZSAFTX.mjs}

@@ -50,18 +50,25 @@ var PieChart = class extends LineChart {
   }
   /** The row's share of the whole as a percentage, or '' for none. */
   _share(index) {
+    var _a;
     const [start, end] = this._turns[index];
     if (end <= start) return "";
     const share = end - start;
-    const options = { style: "percent", maximumFractionDigits: share < 0.1 ? 1 : 0 };
+    const digits = share < 0.1 ? 1 : 0;
+    (_a = this._percents ?? (this._percents = []))[digits] ?? (_a[digits] = this._percent(digits));
+    return this._percents[digits].format(share);
+  }
+  _percent(digits) {
+    const options = { style: "percent", maximumFractionDigits: digits };
     try {
-      return share.toLocaleString(this.el.closest("[lang]")?.lang || void 0, options);
+      return new Intl.NumberFormat(this.el.closest("[lang]")?.lang || void 0, options);
     } catch {
-      return share.toLocaleString(void 0, options);
+      return new Intl.NumberFormat(void 0, options);
     }
   }
   /** The legend: every row with its color, its cell and its share. */
   _guides() {
+    this._percents = [];
     const legend = document.createElement("ul");
     legend.className = "pie-chart-legend";
     legend.setAttribute("aria-hidden", "true");
@@ -163,4 +170,4 @@ var PieChart = class extends LineChart {
 export {
   PieChart
 };
-//# sourceMappingURL=chunk-P3G3QHII.mjs.map
+//# sourceMappingURL=chunk-VGZSAFTX.mjs.map

package/dist/js/chunks/{chunk-P3G3QHII.mjs.map → chunk-VGZSAFTX.mjs.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/ts/components/pieChart.ts"],
-  "sourcesContent": ["import { InitElements, InitElement } from '../core/component';\nimport { LineChart, LineChartOptions, svgNode as node } from './lineChart';\n\nexport type PieChartOptions = LineChartOptions;\n\n// ponytail: rows past six repeat the colors; group small parts as \"Other\".\nconst COLORS = 6;\n/** The pie's radius in a 100-unit box, leaving room for the active slice to grow. */\nconst RADIUS = 46;\n/** The active slice's scale, as in _pie-chart.scss. */\nconst GROWN = 1.06;\n/** Slices smaller than this share get no .values label. */\nconst LABEL_SHARE = 0.05;\nlet _maskId = 0;\n\n/**\n * Pie chart. It reads its <table> like LineChart, but draws each row of the\n * first value column as a slice of the whole, clockwise from the top, with\n * a legend of every row and its share. With `.donut`, a <tfoot> row is the\n * total in the middle. Further columns show in the tooltip.\n *\n * Re-run `PieChart.init(el)` after changing the table.\n */\nexport class PieChart extends LineChart {\n  // No initializers: LineChart's constructor draws before they would run.\n  /** Each row's start and end, as fractions of a turn clockwise from the top. */\n  private _turns: [number, number][];\n  /** Each row's color, or undefined for a row with no slice. */\n  private _colors: (string | undefined)[];\n  private _slices: (SVGPathElement | null)[];\n\n  protected get _type() {\n    return 'pie-chart';\n  }\n\n  protected get _key() {\n    return 'Expressive_PieChart';\n  }\n\n  protected get _points() {\n    return false;\n  }\n\n  protected get _circular() {\n    return true;\n  }\n\n  static init(el: HTMLElement, options?: Partial<PieChartOptions>): PieChart;\n  static init(els: InitElements<InitElement>, options?: Partial<PieChartOptions>): PieChart[];\n  static init(\n    els: HTMLElement | InitElements<InitElement>,\n    options: Partial<PieChartOptions> = {}\n  ): PieChart | PieChart[] {\n    return super.init(els as HTMLElement, options) as PieChart | PieChart[];\n  }\n\n  static getInstance(el: HTMLElement): PieChart {\n    return el['Expressive_PieChart'];\n  }\n\n  show(index: number) {\n    if (!this._tooltip || index === this.activeIndex) return;\n    super.show(index);\n    this._slices.forEach((slice, i) => slice?.classList.toggle('active', i === index));\n    // LineChart hides the tooltip for -1 and for an index past the last row.\n    if (this._tooltip.hidden) return;\n\n    const color = this._colors[index];\n    this._tooltip.querySelectorAll<HTMLElement>('[data-series]').forEach((span) => {\n      if (color) span.dataset.series = color;\n      else delete span.dataset.series;\n    });\n    const share = this._share(index);\n    const value = this._tooltip.querySelector('span:nth-of-type(2)');\n    if (share && value) value.textContent += ` (${share})`;\n  }\n\n  /** CSS places the tooltip on the slice's middle from --turn. */\n  protected _place(index: number) {\n    const middle = (this._turns[index][0] + this._turns[index][1]) / 2;\n    this._tooltip.style.setProperty('--turn', String(middle));\n    // On the right half it opens leftwards, over the pie.\n    this._tooltip.classList.toggle('end', middle < 0.5);\n  }\n\n  /** The row's share of the whole as a percentage, or '' for none. */\n  private _share(index: number) {\n    const [start, end] = this._turns[index];\n    if (end <= start) return '';\n    const share = end - start;\n    // Whole percentages, with a tenth below 10% so a small part is not 0%.\n    const options = { style: 'percent', maximumFractionDigits: share < 0.1 ? 1 : 0 } as const;\n    try {\n      return share.toLocaleString(this.el.closest<HTMLElement>('[lang]')?.lang || undefined, options);\n    } catch {\n      // An invalid lang attribute.\n      return share.toLocaleString(undefined, options);\n    }\n  }\n\n  /** The legend: every row with its color, its cell and its share. */\n  protected _guides(): Element[] {\n    const legend = document.createElement('ul');\n    legend.className = 'pie-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      if (this._colors[i]) li.dataset.series = this._colors[i];\n      const [name, value, share] = [label, text[i], this._share(i)].map((content) => {\n        const span = document.createElement('span');\n        span.textContent = content;\n        return span;\n      });\n      li.append(name, value, share);\n      return li;\n    }));\n    return [legend];\n  }\n\n  /** The row under the pointer by its angle from the middle, or -1 off the slices. */\n  protected _indexAt(e: PointerEvent) {\n    const [turn, share] = this._polarAt(e);\n    // The distance in the SVG's 100-unit box.\n    const distance = share * 100;\n    const hole = this.el.classList.contains('donut')\n      ? parseFloat(getComputedStyle(this.el).getPropertyValue('--md-comp-pie-chart-hole')) || 0\n      : 0;\n    if (distance < RADIUS * hole) return -1;\n    const index = this._turns.findIndex(([start, end]) => start <= turn && turn < end);\n    // The active slice is drawn larger, so the pointer stays on it to its edge.\n    return distance > RADIUS * (index === this.activeIndex ? GROWN : 1) ? -1 : index;\n  }\n\n  /**\n   * An SVG of slices in a -50 to 50 box, under a mask that cuts the gaps\n   * between them and the donut's hole, which CSS sizes. The values and the\n   * total are HTML over it.\n   */\n  protected _draw(): Element {\n    const values = this.series[0].values.map((value) => Math.max(0, value ?? 0));\n    const total = values.reduce((sum, value) => sum + value, 0);\n    let turn = 0;\n    this._turns = values.map((value) => [turn, (turn += total ? value / total : 0)]);\n    // Colors go round the drawn slices; the last skips the first's color beside it.\n    const drawn = this._turns.filter(([start, end]) => end > start).length;\n    let slice = 0;\n    this._colors = this._turns.map(([start, end]) => {\n      if (end <= start) return undefined;\n      const index = slice++;\n      return String(index === drawn - 1 && index > 0 && index % COLORS === 0 ? 2 : (index % COLORS) + 1);\n    });\n    const at = (t: number, r = RADIUS) => {\n      const angle = t * 2 * Math.PI;\n      return `${(r * Math.sin(angle)).toFixed(3)},${(-r * Math.cos(angle)).toFixed(3)}`;\n    };\n\n    const pie = document.createElement('div');\n    pie.className = 'pie-chart-pie';\n    pie.setAttribute('aria-hidden', 'true');\n    const svg = node('svg', { viewBox: '-50 -50 100 100', focusable: 'false' });\n    const id = `pie-chart-mask-${++_maskId}`;\n    const area = { x: '-50', y: '-50', width: '100', height: '100' };\n    const mask = node('mask', { id, maskUnits: 'userSpaceOnUse', ...area });\n    const edges = this._turns.filter(([start, end]) => end > start);\n    mask.append(\n      node('rect', { ...area, fill: 'white' }),\n      node('path', {\n        class: 'pie-chart-gaps',\n        stroke: 'black',\n        d: edges.length > 1 ? edges.map(([start]) => `M0,0L${at(start, 50)}`).join('') : ''\n      }),\n      node('circle', { class: 'pie-chart-hole', r: String(RADIUS), fill: 'black' })\n    );\n\n    const slices = node('g', { mask: `url(#${id})` });\n    const arc = `A${RADIUS},${RADIUS} 0`;\n    this._slices = this._turns.map(([start, end], i) => {\n      if (end <= start) return null;\n      const slice = node('path', {\n        class: 'pie-chart-slice',\n        'data-series': this._colors[i],\n        // A whole circle is two half arcs; one arc cannot end where it starts.\n        d: end - start >= 1\n          ? `M0,${-RADIUS}${arc} 1 1 0,${RADIUS}${arc} 1 1 0,${-RADIUS}Z`\n          : `M0,0L${at(start)}${arc} ${end - start > 0.5 ? 1 : 0} 1 ${at(end)}Z`\n      }) as SVGPathElement;\n      slices.append(slice);\n      return slice;\n    });\n    svg.append(mask, slices);\n    pie.append(svg);\n\n    if (this.el.classList.contains('values')) {\n      const labels = document.createElement('div');\n      labels.className = 'pie-chart-values';\n      this._turns.forEach(([start, end], i) => {\n        if (end - start < LABEL_SHARE) return;\n        const label = document.createElement('span');\n        label.dataset.series = this._colors[i];\n        label.style.setProperty('--turn', String((start + end) / 2));\n        label.textContent = this._share(i);\n        labels.append(label);\n      });\n      pie.append(labels);\n    }\n\n    const middle = this._total('pie-chart-total');\n    if (middle) pie.append(middle);\n    return pie;\n  }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { InitElements, InitElement } from '../core/component';\nimport { LineChart, LineChartOptions, svgNode as node } from './lineChart';\n\nexport type PieChartOptions = LineChartOptions;\n\n// ponytail: rows past six repeat the colors; group small parts as \"Other\".\nconst COLORS = 6;\n/** The pie's radius in a 100-unit box, leaving room for the active slice to grow. */\nconst RADIUS = 46;\n/** The active slice's scale, as in _pie-chart.scss. */\nconst GROWN = 1.06;\n/** Slices smaller than this share get no .values label. */\nconst LABEL_SHARE = 0.05;\nlet _maskId = 0;\n\n/**\n * Pie chart. It reads its <table> like LineChart, but draws each row of the\n * first value column as a slice of the whole, clockwise from the top, with\n * a legend of every row and its share. With `.donut`, a <tfoot> row is the\n * total in the middle. Further columns show in the tooltip.\n *\n * Re-run `PieChart.init(el)` after changing the table.\n */\nexport class PieChart extends LineChart {\n  // No initializers: LineChart's constructor draws before they would run.\n  /** Each row's start and end, as fractions of a turn clockwise from the top. */\n  private _turns: [number, number][];\n  /** Each row's color, or undefined for a row with no slice. */\n  private _colors: (string | undefined)[];\n  private _slices: (SVGPathElement | null)[];\n  /** Percent formatters by fraction digits, rebuilt once per legend. */\n  private _percents: Intl.NumberFormat[];\n\n  protected get _type() {\n    return 'pie-chart';\n  }\n\n  protected get _key() {\n    return 'Expressive_PieChart';\n  }\n\n  protected get _points() {\n    return false;\n  }\n\n  protected get _circular() {\n    return true;\n  }\n\n  static init(el: HTMLElement, options?: Partial<PieChartOptions>): PieChart;\n  static init(els: InitElements<InitElement>, options?: Partial<PieChartOptions>): PieChart[];\n  static init(\n    els: HTMLElement | InitElements<InitElement>,\n    options: Partial<PieChartOptions> = {}\n  ): PieChart | PieChart[] {\n    return super.init(els as HTMLElement, options) as PieChart | PieChart[];\n  }\n\n  static getInstance(el: HTMLElement): PieChart {\n    return el['Expressive_PieChart'];\n  }\n\n  show(index: number) {\n    if (!this._tooltip || index === this.activeIndex) return;\n    super.show(index);\n    this._slices.forEach((slice, i) => slice?.classList.toggle('active', i === index));\n    // LineChart hides the tooltip for -1 and for an index past the last row.\n    if (this._tooltip.hidden) return;\n\n    const color = this._colors[index];\n    this._tooltip.querySelectorAll<HTMLElement>('[data-series]').forEach((span) => {\n      if (color) span.dataset.series = color;\n      else delete span.dataset.series;\n    });\n    const share = this._share(index);\n    const value = this._tooltip.querySelector('span:nth-of-type(2)');\n    if (share && value) value.textContent += ` (${share})`;\n  }\n\n  /** CSS places the tooltip on the slice's middle from --turn. */\n  protected _place(index: number) {\n    const middle = (this._turns[index][0] + this._turns[index][1]) / 2;\n    this._tooltip.style.setProperty('--turn', String(middle));\n    // On the right half it opens leftwards, over the pie.\n    this._tooltip.classList.toggle('end', middle < 0.5);\n  }\n\n  /** The row's share of the whole as a percentage, or '' for none. */\n  private _share(index: number) {\n    const [start, end] = this._turns[index];\n    if (end <= start) return '';\n    const share = end - start;\n    // Whole percentages, with a tenth below 10% so a small part is not 0%.\n    const digits = share < 0.1 ? 1 : 0;\n    (this._percents ??= [])[digits] ??= this._percent(digits);\n    return this._percents[digits].format(share);\n  }\n\n  private _percent(digits: number) {\n    const options = { style: 'percent', maximumFractionDigits: digits } as const;\n    try {\n      return new Intl.NumberFormat(this.el.closest<HTMLElement>('[lang]')?.lang || undefined, options);\n    } catch {\n      // An invalid lang attribute.\n      return new Intl.NumberFormat(undefined, options);\n    }\n  }\n\n  /** The legend: every row with its color, its cell and its share. */\n  protected _guides(): Element[] {\n    // A redraw picks up a changed lang attribute.\n    this._percents = [];\n    const legend = document.createElement('ul');\n    legend.className = 'pie-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      if (this._colors[i]) li.dataset.series = this._colors[i];\n      const [name, value, share] = [label, text[i], this._share(i)].map((content) => {\n        const span = document.createElement('span');\n        span.textContent = content;\n        return span;\n      });\n      li.append(name, value, share);\n      return li;\n    }));\n    return [legend];\n  }\n\n  /** The row under the pointer by its angle from the middle, or -1 off the slices. */\n  protected _indexAt(e: PointerEvent) {\n    const [turn, share] = this._polarAt(e);\n    // The distance in the SVG's 100-unit box.\n    const distance = share * 100;\n    const hole = this.el.classList.contains('donut')\n      ? parseFloat(getComputedStyle(this.el).getPropertyValue('--md-comp-pie-chart-hole')) || 0\n      : 0;\n    if (distance < RADIUS * hole) return -1;\n    const index = this._turns.findIndex(([start, end]) => start <= turn && turn < end);\n    // The active slice is drawn larger, so the pointer stays on it to its edge.\n    return distance > RADIUS * (index === this.activeIndex ? GROWN : 1) ? -1 : index;\n  }\n\n  /**\n   * An SVG of slices in a -50 to 50 box, under a mask that cuts the gaps\n   * between them and the donut's hole, which CSS sizes. The values and the\n   * total are HTML over it.\n   */\n  protected _draw(): Element {\n    const values = this.series[0].values.map((value) => Math.max(0, value ?? 0));\n    const total = values.reduce((sum, value) => sum + value, 0);\n    let turn = 0;\n    this._turns = values.map((value) => [turn, (turn += total ? value / total : 0)]);\n    // Colors go round the drawn slices; the last skips the first's color beside it.\n    const drawn = this._turns.filter(([start, end]) => end > start).length;\n    let slice = 0;\n    this._colors = this._turns.map(([start, end]) => {\n      if (end <= start) return undefined;\n      const index = slice++;\n      return String(index === drawn - 1 && index > 0 && index % COLORS === 0 ? 2 : (index % COLORS) + 1);\n    });\n    const at = (t: number, r = RADIUS) => {\n      const angle = t * 2 * Math.PI;\n      return `${(r * Math.sin(angle)).toFixed(3)},${(-r * Math.cos(angle)).toFixed(3)}`;\n    };\n\n    const pie = document.createElement('div');\n    pie.className = 'pie-chart-pie';\n    pie.setAttribute('aria-hidden', 'true');\n    const svg = node('svg', { viewBox: '-50 -50 100 100', focusable: 'false' });\n    const id = `pie-chart-mask-${++_maskId}`;\n    const area = { x: '-50', y: '-50', width: '100', height: '100' };\n    const mask = node('mask', { id, maskUnits: 'userSpaceOnUse', ...area });\n    const edges = this._turns.filter(([start, end]) => end > start);\n    mask.append(\n      node('rect', { ...area, fill: 'white' }),\n      node('path', {\n        class: 'pie-chart-gaps',\n        stroke: 'black',\n        d: edges.length > 1 ? edges.map(([start]) => `M0,0L${at(start, 50)}`).join('') : ''\n      }),\n      node('circle', { class: 'pie-chart-hole', r: String(RADIUS), fill: 'black' })\n    );\n\n    const slices = node('g', { mask: `url(#${id})` });\n    const arc = `A${RADIUS},${RADIUS} 0`;\n    this._slices = this._turns.map(([start, end], i) => {\n      if (end <= start) return null;\n      const slice = node('path', {\n        class: 'pie-chart-slice',\n        'data-series': this._colors[i],\n        // A whole circle is two half arcs; one arc cannot end where it starts.\n        d: end - start >= 1\n          ? `M0,${-RADIUS}${arc} 1 1 0,${RADIUS}${arc} 1 1 0,${-RADIUS}Z`\n          : `M0,0L${at(start)}${arc} ${end - start > 0.5 ? 1 : 0} 1 ${at(end)}Z`\n      }) as SVGPathElement;\n      slices.append(slice);\n      return slice;\n    });\n    svg.append(mask, slices);\n    pie.append(svg);\n\n    if (this.el.classList.contains('values')) {\n      const labels = document.createElement('div');\n      labels.className = 'pie-chart-values';\n      this._turns.forEach(([start, end], i) => {\n        if (end - start < LABEL_SHARE) return;\n        const label = document.createElement('span');\n        label.dataset.series = this._colors[i];\n        label.style.setProperty('--turn', String((start + end) / 2));\n        label.textContent = this._share(i);\n        labels.append(label);\n      });\n      pie.append(labels);\n    }\n\n    const middle = this._total('pie-chart-total');\n    if (middle) pie.append(middle);\n    return pie;\n  }\n}\n"],
+  "mappings": "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",
   "names": ["slice"]
 }

package/dist/js/chunks/{chunk-UAEAQBRC.mjs → chunk-X7OCHZVF.mjs}

@@ -1,6 +1,6 @@
 import {
   Utils
-} from "./chunk-6OMRGML6.mjs";
+} from "./chunk-MNPROCZF.mjs";
 
 // src/ts/behaviors/dialogs.ts
 var _Dialogs = class _Dialogs {
@@ -73,4 +73,4 @@ var Dialogs = _Dialogs;
 export {
   Dialogs
 };
-//# sourceMappingURL=chunk-UAEAQBRC.mjs.map
+//# sourceMappingURL=chunk-X7OCHZVF.mjs.map

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

@@ -1,6 +1,6 @@
 import {
   Utils
-} from "./chunk-6OMRGML6.mjs";
+} from "./chunk-MNPROCZF.mjs";
 
 // src/ts/plugins/dockedDisplayPlugin.ts
 var _defaults = {
@@ -17,9 +17,9 @@ var DockedDisplayPlugin = class _DockedDisplayPlugin {
       }
     };
     /**
-     * Tears the plugin down. The document listener holds a reference to this
-     * instance - and through it the whole picker subtree - so the owning
-     * component must call this from its own destroy().
+     * Tears the plugin down. While shown, the document listener holds a
+     * reference to this instance - and through it the whole picker subtree - so
+     * the owning component must call this from its own destroy().
      */
     this.destroy = () => {
       document.removeEventListener("click", this._handleDocumentClick);
@@ -28,6 +28,7 @@ var DockedDisplayPlugin = class _DockedDisplayPlugin {
     this.show = () => {
       if (this.visible) return;
       this.visible = true;
+      document.addEventListener("click", this._handleDocumentClick);
       const coordinates = Utils._setAbsolutePosition(this.el, this.container, "bottom", this.options.margin, this.options.transition, this.options.align);
       this.container.style.visibility = "visible";
       this.container.style.transition = `
@@ -41,6 +42,7 @@ var DockedDisplayPlugin = class _DockedDisplayPlugin {
     this.hide = () => {
       if (!this.visible) return;
       this.visible = false;
+      document.removeEventListener("click", this._handleDocumentClick);
       this.container.removeAttribute("style");
       this.container.style.transition = `
       transform ${this.options.duration}ms ease-out,
@@ -59,7 +61,6 @@ var DockedDisplayPlugin = class _DockedDisplayPlugin {
     this.container.classList.add("display-docked");
     this.container.append(container);
     el.parentElement.append(this.container);
-    document.addEventListener("click", this._handleDocumentClick);
   }
   /**
    * Initializes instance of DockedDisplayPlugin
@@ -75,4 +76,4 @@ var DockedDisplayPlugin = class _DockedDisplayPlugin {
 export {
   DockedDisplayPlugin
 };
-//# sourceMappingURL=chunk-EC63CHXU.mjs.map
+//# sourceMappingURL=chunk-YMSXJON6.mjs.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/plugins/dockedDisplayPlugin.ts"],
+  "sourcesContent": ["import { Utils } from '../core/utils';\n\nexport interface DockedDisplayPluginOptions {\n  /**\n   * Margin between element and docked container\n   */\n  margin: number,\n  /**\n   * Transition movement\n   */\n  transition: number,\n  /**\n   * Transition duration\n   */\n  duration: number,\n  /**\n   * The alignment of the docked container\n   */\n  align: string\n}\n\nconst _defaults: DockedDisplayPluginOptions = {\n  margin: 5,\n  transition: 10,\n  duration: 250,\n  align: 'left'\n}\n\nexport class DockedDisplayPlugin {\n  private readonly el: HTMLElement;\n  private readonly container: HTMLDivElement;\n  private options: Partial<DockedDisplayPluginOptions>;\n  private visible: boolean;\n\n  constructor(el: HTMLElement, container: HTMLElement, options: Partial<DockedDisplayPluginOptions>) {\n    this.el = el;\n    this.options = {\n      ..._defaults,\n      ...options\n    };\n\n    this.container = document.createElement('div');\n    this.container.classList.add('display-docked');\n    this.container.append(container);\n    el.parentElement.append(this.container);\n  }\n\n  private _handleDocumentClick = (e: MouseEvent) => {\n    if (this.visible && !e.composedPath().includes(this.el) && !e.composedPath().includes(this.container)) {\n      this.hide();\n    }\n  };\n\n  /**\n   * Tears the plugin down. While shown, the document listener holds a\n   * reference to this instance - and through it the whole picker subtree - so\n   * the owning component must call this from its own destroy().\n   */\n  destroy = () => {\n    document.removeEventListener('click', this._handleDocumentClick);\n    this.container.remove();\n  };\n\n  /**\n   * Initializes instance of DockedDisplayPlugin\n   * @param el HTMLElement to position to\n   * @param container HTMLElement to be positioned\n   * @param options Plugin options\n   */\n  static init(el: HTMLElement, container: HTMLElement, options?: Partial<DockedDisplayPluginOptions>): DockedDisplayPlugin {\n    return new DockedDisplayPlugin(el, container, options);\n  }\n\n  show = () => {\n    if (this.visible) return;\n    this.visible = true;\n    document.addEventListener('click', this._handleDocumentClick);\n    const coordinates = Utils._setAbsolutePosition(this.el, this.container, 'bottom', this.options.margin, this.options.transition, this.options.align);\n\n    // @todo move to Util? -> duplicate code fragment with tooltip\n    // easeOutCubic\n    this.container.style.visibility = 'visible';\n    this.container.style.transition = `\n      transform ${this.options.duration}ms ease-out,\n      opacity ${this.options.duration}ms ease-out`;\n    setTimeout(() => {\n      this.container.style.transform = `translateX(${coordinates.x}px) translateY(${coordinates.y}px)`;\n      this.container.style.opacity = (1).toString();\n    }, 1);\n  };\n\n  hide = () => {\n    if (!this.visible) return;\n    this.visible = false;\n    document.removeEventListener('click', this._handleDocumentClick);\n    // @todo move to Util? -> duplicate code fragment with tooltip\n    this.container.removeAttribute('style');\n    this.container.style.transition = `\n      transform ${this.options.duration}ms ease-out,\n      opacity ${this.options.duration}ms ease-out`;\n    setTimeout(() => {\n      this.container.style.transform = `translateX(0px) translateY(0px)`;\n      this.container.style.opacity = '0';\n    }, 1);\n  };\n}\n"],
+  "mappings": ";;;;;AAqBA,IAAM,YAAwC;AAAA,EAC5C,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,OAAO;AACT;AAEO,IAAM,sBAAN,MAAM,qBAAoB;AAAA,EAM/B,YAAY,IAAiB,WAAwB,SAA8C;AAanG,SAAQ,uBAAuB,CAAC,MAAkB;AAChD,UAAI,KAAK,WAAW,CAAC,EAAE,aAAa,EAAE,SAAS,KAAK,EAAE,KAAK,CAAC,EAAE,aAAa,EAAE,SAAS,KAAK,SAAS,GAAG;AACrG,aAAK,KAAK;AAAA,MACZ;AAAA,IACF;AAOA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAU,MAAM;AACd,eAAS,oBAAoB,SAAS,KAAK,oBAAoB;AAC/D,WAAK,UAAU,OAAO;AAAA,IACxB;AAYA,gBAAO,MAAM;AACX,UAAI,KAAK,QAAS;AAClB,WAAK,UAAU;AACf,eAAS,iBAAiB,SAAS,KAAK,oBAAoB;AAC5D,YAAM,cAAc,MAAM,qBAAqB,KAAK,IAAI,KAAK,WAAW,UAAU,KAAK,QAAQ,QAAQ,KAAK,QAAQ,YAAY,KAAK,QAAQ,KAAK;AAIlJ,WAAK,UAAU,MAAM,aAAa;AAClC,WAAK,UAAU,MAAM,aAAa;AAAA,kBACpB,KAAK,QAAQ,QAAQ;AAAA,gBACvB,KAAK,QAAQ,QAAQ;AACjC,iBAAW,MAAM;AACf,aAAK,UAAU,MAAM,YAAY,cAAc,YAAY,CAAC,kBAAkB,YAAY,CAAC;AAC3F,aAAK,UAAU,MAAM,UAAW,GAAG,SAAS;AAAA,MAC9C,GAAG,CAAC;AAAA,IACN;AAEA,gBAAO,MAAM;AACX,UAAI,CAAC,KAAK,QAAS;AACnB,WAAK,UAAU;AACf,eAAS,oBAAoB,SAAS,KAAK,oBAAoB;AAE/D,WAAK,UAAU,gBAAgB,OAAO;AACtC,WAAK,UAAU,MAAM,aAAa;AAAA,kBACpB,KAAK,QAAQ,QAAQ;AAAA,gBACvB,KAAK,QAAQ,QAAQ;AACjC,iBAAW,MAAM;AACf,aAAK,UAAU,MAAM,YAAY;AACjC,aAAK,UAAU,MAAM,UAAU;AAAA,MACjC,GAAG,CAAC;AAAA,IACN;AArEE,SAAK,KAAK;AACV,SAAK,UAAU;AAAA,MACb,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAEA,SAAK,YAAY,SAAS,cAAc,KAAK;AAC7C,SAAK,UAAU,UAAU,IAAI,gBAAgB;AAC7C,SAAK,UAAU,OAAO,SAAS;AAC/B,OAAG,cAAc,OAAO,KAAK,SAAS;AAAA,EACxC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAwBA,OAAO,KAAK,IAAiB,WAAwB,SAAoE;AACvH,WAAO,IAAI,qBAAoB,IAAI,WAAW,OAAO;AAAA,EACvD;AAkCF;",
+  "names": []
+}

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

@@ -1,6 +1,6 @@
 import {
   Utils
-} from "./chunk-6OMRGML6.mjs";
+} from "./chunk-MNPROCZF.mjs";
 import {
   Component
 } from "./chunk-LTWPGFBR.mjs";
@@ -172,4 +172,4 @@ export {
   EXPANDING_CARD_SELECTOR,
   ExpandingCard
 };
-//# sourceMappingURL=chunk-QVVEWBOF.mjs.map
+//# sourceMappingURL=chunk-Z2NRKI7R.mjs.map

package/dist/js/chunks/{chunk-PIJ2TAR3.mjs → chunk-ZAS25YFD.mjs}

@@ -1,6 +1,6 @@
 import {
   Utils
-} from "./chunk-6OMRGML6.mjs";
+} from "./chunk-MNPROCZF.mjs";
 import {
   Component
 } from "./chunk-LTWPGFBR.mjs";
@@ -91,4 +91,4 @@ var FloatingActionButton = class _FloatingActionButton extends Component {
 export {
   FloatingActionButton
 };
-//# sourceMappingURL=chunk-PIJ2TAR3.mjs.map
+//# sourceMappingURL=chunk-ZAS25YFD.mjs.map

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

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-ZKZKNSLC.mjs.map