@fusion.dev/helix-headless 0.146.0 → 0.147.0

package/dist/qr-code/export.js

@@ -1,3 +1,17 @@
+export const boxIn = (rect, area, box) => {
+    const scale = box / area.width;
+    return [
+        (rect.left - area.left) * scale,
+        (rect.top - area.top) * scale,
+        rect.width * scale,
+        rect.height * scale,
+    ];
+};
+export const logoBox = (rect, area, box) => {
+    const frame = boxIn(rect, area, box);
+    const [x, y, width, height] = frame;
+    return x < 0 || y < 0 || x + width > box || y + height > box ? undefined : frame;
+};
 const attribute = (value) => value.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;');
 const unit = (value) => String(Math.round(value * 100) / 100);
 const placed = ([x, y, width, height]) => `x="${unit(x)}" y="${unit(y)}" width="${unit(width)}" height="${unit(height)}"`;

package/dist/qr-code/name.d.ts

@@ -0,0 +1,11 @@
+/**
+ * The name a code is read by: its `label`, or with none, the word for a code,
+ * followed by the value where the value is a web address.
+ *
+ * **A value that is no web address is never read out.** A code that sets up
+ * an authenticator (`otpauth://…?secret=…`) or joins a network
+ * (`WIFI:…;P:…;;`) carries a secret in its value, and the value as the name
+ * read that secret aloud to anyone in earshot. A web address is what a
+ * sighted reader gets by scanning, so it is said after the word.
+ */
+export declare const qrName: (label: string, value: string, word: string) => string;

package/dist/qr-code/name.js

@@ -0,0 +1,7 @@
+export const qrName = (label, value, word) => {
+    if (label.trim() !== '') {
+        return label;
+    }
+    const address = value.trim();
+    return /^https?:\/\/\S+$/iu.test(address) ? `${word}, ${address}` : word;
+};

package/dist/qr-code/root/qr-code-root.d.ts

@@ -13,9 +13,12 @@ export type QrStyle = 'dots' | 'rounded' | 'square';
  * thousand modules, and an element for each would be a thousand nodes for one
  * image.
  *
- * The element has `role="img"` and an accessible name. Set the name to what the
- * code is for. When you pass no name, the value is the name. Most codes hold a
- * URL, and a URL read aloud gives the destination.
+ * The element has `role="img"` and an accessible name. Set `label` to what
+ * the code is for, such as "Open the menu". With no `label`, a code is named
+ * by `code-label`, "QR code", followed by its value where the value is a web
+ * address, which a URL read aloud makes a destination. Any other value is
+ * never read out: a code that sets up an authenticator or joins a network
+ * carries a secret in it.
  *
  * The quiet zone of four modules is required by the specification, and a
  * scanner rejects a code cropped to its edge. It is drawn inside the `viewBox`,
@@ -56,6 +59,11 @@ export type QrStyle = 'dots' | 'rounded' | 'square';
  * @cssstate overflow - The value is too long for a code at the correction level, so the fallback shows.
  */
 export declare class HelixHeadlessQrCode extends HelixElement {
+    /**
+     * The words a code with no `label` is named by, followed by its value where
+     * the value is a web address.
+     */
+    codeLabel: string;
     /**
      * The error correction level, which sets how much of the code can be lost
      * and still scan.
@@ -68,10 +76,13 @@ export declare class HelixHeadlessQrCode extends HelixElement {
      */
     correction?: QrCorrection;
     /**
-     * The image's accessible name.
+     * The image's accessible name: what the code is for, such as "Open the
+     * menu".
      *
-     * Falling back to the value is deliberate: a code almost always holds a URL,
-     * and a URL is a better name than "QR code" for a reader who cannot see it.
+     * Absent names it by `code-label` and, for a web address, the address,
+     * which is what a reader who cannot scan it needs. Any other value is left
+     * out of the name, since it may hold a secret, such as an authenticator's
+     * key or a network's password.
      */
     label: string;
     /**

package/dist/qr-code/root/qr-code-root.js

@@ -8,7 +8,8 @@ import { customElement, HelixElement, rgbOf } from '@fusion.dev/helix-core';
 import { html, nothing, svg, } from 'lit';
 import { property } from 'lit/decorators.js';
 import { encode } from 'uqr';
-import { qrSvg } from '../export.js';
+import { boxIn, logoBox, qrSvg } from '../export.js';
+import { qrName } from '../name.js';
 const QUIET = 4;
 const pixelsOf = (image) => {
     try {
@@ -76,6 +77,7 @@ const pathFor = (matrix, style, only = 'all') => {
 let HelixHeadlessQrCode = class HelixHeadlessQrCode extends HelixElement {
     constructor() {
         super(...arguments);
+        this.codeLabel = 'QR code';
         this.label = '';
         this.value = '';
         this.logo = false;
@@ -150,15 +152,8 @@ let HelixHeadlessQrCode = class HelixHeadlessQrCode extends HelixElement {
         if (!holder || holder.hidden || !mark || area.width === 0) {
             return undefined;
         }
-        const scale = box / area.width;
-        const at = (rect) => [
-            (rect.left - area.left) * scale,
-            (rect.top - area.top) * scale,
-            rect.width * scale,
-            rect.height * scale,
-        ];
-        const frame = at(holder.getBoundingClientRect());
-        if (frame[0] < 0 || frame[1] < 0 || frame[0] + frame[2] > box || frame[1] + frame[3] > box) {
+        const frame = logoBox(holder.getBoundingClientRect(), area, box);
+        if (!frame) {
             return undefined;
         }
         const fill = getComputedStyle(holder).backgroundColor;
@@ -166,7 +161,7 @@ let HelixHeadlessQrCode = class HelixHeadlessQrCode extends HelixElement {
         const logo = {
             frame,
             ground: ground ? background : rgbOf(fill),
-            mark: at(mark.getBoundingClientRect()),
+            mark: boxIn(mark.getBoundingClientRect(), area, box),
         };
         if (mark instanceof HTMLImageElement) {
             return { ...logo, href: pixelsOf(mark) };
@@ -215,7 +210,7 @@ let HelixHeadlessQrCode = class HelixHeadlessQrCode extends HelixElement {
       viewBox="0 0 ${box} ${box}"
       xmlns="http://www.w3.org/2000/svg"
       role="img"
-      aria-label=${this.label || this.value}
+      aria-label=${qrName(this.label, this.value, this.codeLabel)}
       shape-rendering="crispEdges"
     >
       <path
@@ -250,6 +245,9 @@ let HelixHeadlessQrCode = class HelixHeadlessQrCode extends HelixElement {
     </span>`;
     }
 };
+__decorate([
+    property({ attribute: 'code-label' })
+], HelixHeadlessQrCode.prototype, "codeLabel", void 0);
 __decorate([
     property({ attribute: 'correction' })
 ], HelixHeadlessQrCode.prototype, "correction", void 0);

package/dist/radio/group/radio-group.d.ts

@@ -30,6 +30,21 @@ declare const HelixHeadlessRadioGroup_base: (new (...args: any[]) => import("@fu
  * `helix-select`. A native radio sends `input` and `change` in the same task as
  * the click.
  *
+ * **Keyboard.** The group is one tab stop: the chosen radio, or the first that
+ * can be chosen.
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | Right, Down | Chooses the next radio, from the last back to the first. |
+ * | Left, Up | Chooses the radio before, from the first round to the last. |
+ * | Home, End | Chooses the first or the last radio. |
+ * | Space, Enter | Chooses the focused radio. |
+ *
+ * Left and Right swap on a right-to-left page, and a disabled radio is passed
+ * over. Under `readonly` the arrows move focus and choose nothing. The group
+ * is a `radiogroup` named by `label`, and each radio is a `role="radio"`
+ * button with `aria-checked`.
+ *
  * @since 0.1.0
  * @status stable
  * @aliases RadioButtons, Choice group

package/dist/radio/root/radio-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, HelixElement, HostClickController, MixinSelectableItem, } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, HostClickController, MixinSelectableItem, slotFilled, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessRadio = class HelixHeadlessRadio extends MixinSelectableItem(HelixElement) {
@@ -35,7 +35,7 @@ let HelixHeadlessRadio = class HelixHeadlessRadio extends MixinSelectableItem(He
       <span part="box" aria-hidden="true"
         ><slot
           name="indicator"
-          @slotchange=${(event) => this.toggleState('has-indicator', event.target.assignedNodes().length > 0)}
+          @slotchange=${(event) => this.toggleState('has-indicator', slotFilled(event.target))}
         ></slot
       ></span>
       <slot name="icon"></slot>

package/dist/rating/root/rating-root.d.ts

@@ -18,6 +18,20 @@ declare const HelixHeadlessRating_base: (new (...args: any[]) => import("@fusion
  * With `clearable`, pressing the chosen score again, or Backspace or Delete on
  * the marks, takes the rating back to unrated and sends `helix-clear`.
  *
+ * **Keyboard.** The marks are one tab stop, on the chosen score or the first.
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | Right, Down | Chooses the next score up, and stops at the highest. |
+ * | Left, Up | Chooses the next score down, and stops at the lowest. |
+ * | Home, End | Chooses the lowest or the highest score. |
+ * | Space, Enter | Chooses the focused score, or clears it under `clearable` when it is already chosen. |
+ * | Backspace, Delete | Clears the rating, under `clearable`. |
+ *
+ * Left and Right swap on a right-to-left page. The marks are a `radiogroup`
+ * named by `label`, and each score is a `radio` named by `option-label`, such
+ * as "3 out of 5". A read-only rating is one `img` named by its score.
+ *
  * @since 0.1.0
  * @status stable
  * @category forms
@@ -172,8 +186,8 @@ export declare class HelixHeadlessRating extends HelixHeadlessRating_base {
      * each of its own options. Anything past the first slotted element is
      * ignored.
      */
-    private markSource;
-    /** Whether `markSource` has had its first answer from the children. */
+    private readonly mark;
+    /** Whether `mark` has had its first answer from the children. */
     private markRead;
     /**
      * What the pointer is over, which is shown instead of the score while it is.
@@ -215,18 +229,17 @@ export declare class HelixHeadlessRating extends HelixHeadlessRating_base {
     /** The pointer drawing a score, while one is. */
     private dragging;
     /**
-     * One clone per place a mark goes, kept so a render does not remake them.
+     * The shape for one place, or nothing when the stylesheet is drawing it.
      *
-     * A drag renders on every pointer move, and handing Lit a fresh node each
-     * time would swap every mark in the row on every frame of a gesture whose
-     * whole point is that only the fill moves.
+     * One copy per place, kept so a render does not remake them: a drag renders
+     * on every pointer move, and handing Lit a fresh node each time would swap
+     * every mark in the row on every frame of a gesture whose whole point is
+     * that only the fill moves.
      */
-    private readonly clones;
-    /** The shape for one place, or nothing when the stylesheet is drawing it. */
     private markFor;
     private readonly handleMarkSlot;
     /** The element slotted into `empty-mark`, which the track copies. */
-    private emptySource;
+    private readonly empty;
     /**
      * The step under a point on the row, or the nearest one to it.
      *

package/dist/rating/root/rating-root.js

@@ -4,10 +4,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { AriaForwardController, valueAsNumber as asNumber, customElement, fillTemplate, numberAsValue as fromNumber, HelixClearEvent, HelixFormElement, HelixPreviewEvent, KeyboardNavigationController, MixinControllerValue, MixinField, reportRuntime, } from '@fusion.dev/helix-core';
+import { AriaForwardController, valueAsNumber as asNumber, customElement, fillTemplate, numberAsValue as fromNumber, HelixClearEvent, HelixFormElement, HelixPreviewEvent, KeyboardNavigationController, MixinControllerValue, MixinField, nearest, reportRuntime, SlottedGlyph, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
-import { nearestStep } from '../steps.js';
 let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue(MixinField(HelixFormElement)) {
     constructor() {
         super(...arguments);
@@ -23,7 +22,7 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
         this.aria = new AriaForwardController(this, {
             target: () => this.partNamed('marks'),
         });
-        this.markSource = undefined;
+        this.mark = new SlottedGlyph();
         this.markRead = false;
         this.previewing = undefined;
         this.keys = new KeyboardNavigationController(this, {
@@ -32,19 +31,12 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
             wrap: false,
         });
         this.dragging = undefined;
-        this.clones = new Map();
         this.handleMarkSlot = (event) => {
             const slot = event.target;
-            const source = slot.assignedElements({ flatten: true })[0];
-            this.clones.clear();
-            if (slot.name === 'empty-mark') {
-                this.emptySource = source;
-            }
-            else {
-                this.markSource = source;
-            }
+            (slot.name === 'empty-mark' ? this.empty : this.mark).read(slot);
+            this.requestUpdate();
         };
-        this.emptySource = undefined;
+        this.empty = new SlottedGlyph();
         this.handleDragStart = (event) => {
             if (this.isDisabled || this.readOnly || event.button !== 0) {
                 return;
@@ -167,21 +159,11 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
         }));
     }
     markFor(layer, index) {
-        const source = layer === 'track' ? (this.emptySource ?? this.markSource) : this.markSource;
-        if (!source) {
-            return undefined;
-        }
-        const key = `${layer}:${index}`;
-        const held = this.clones.get(key);
-        if (held) {
-            return held;
-        }
-        const clone = source.cloneNode(true);
-        this.clones.set(key, clone);
-        return clone;
+        const glyph = layer === 'track' && this.empty.slotted ? this.empty : this.mark;
+        return glyph.copyFor(`${layer}:${index}`);
     }
     scoreAt(clientX) {
-        let nearest;
+        let closest;
         let best = Number.POSITIVE_INFINITY;
         for (const option of this.renderRoot?.querySelectorAll('[part="option"]') ?? []) {
             const box = option.getBoundingClientRect();
@@ -191,10 +173,10 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
             const away = clientX < box.left ? box.left - clientX : clientX - box.right;
             if (away < best) {
                 best = away;
-                nearest = option.dataset.score;
+                closest = option.dataset.score;
             }
         }
-        return nearest;
+        return closest;
     }
     clearsAt(score) {
         return this.clearable && this.value !== '' && Number(score) === Number(this.value);
@@ -239,8 +221,8 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
         super.willUpdate(changed);
         if (!this.markRead && this.childrenKnown) {
             this.markRead = true;
-            this.markSource = this.knownChildren.find((child) => child.slot === 'mark');
-            this.emptySource = this.knownChildren.find((child) => child.slot === 'empty-mark');
+            this.mark.take(this.knownChildren.find((child) => child.slot === 'mark'));
+            this.empty.take(this.knownChildren.find((child) => child.slot === 'empty-mark'));
         }
     }
     firstUpdated(changed) {
@@ -255,7 +237,7 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
         if (!answered) {
             return first;
         }
-        return nearestStep(this.steps, this.score) ?? first;
+        return nearest(this.steps, this.score) ?? first;
     }
     render() {
         const showing = this.previewing ?? this.score;
@@ -276,7 +258,7 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
       aria-describedby=${this.describedBy ?? nothing}
       aria-invalid=${this.invalidity ?? nothing}
       aria-required=${this.required && !this.readOnly ? 'true' : nothing}
-      data-slotted=${this.markSource ? '' : nothing}
+      data-slotted=${this.mark.slotted ? '' : nothing}
       style=${`--rating-full: ${Math.floor(showing)}; --rating-part: ${showing - Math.floor(showing)}; --rating-steps: ${this.positions.length}`}
       @pointercancel=${this.handleDragCancel}
       @keydown=${this.handleClearKey}
@@ -299,7 +281,7 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
       <span
         part="track"
         aria-hidden="true"
-        data-slotted=${this.emptySource ? '' : nothing}
+        data-slotted=${this.empty.slotted ? '' : nothing}
         >${marksIn('track')}</span
       >
       <span
@@ -367,15 +349,9 @@ __decorate([
 __decorate([
     property({ attribute: 'value-text' })
 ], HelixHeadlessRating.prototype, "valueText", void 0);
-__decorate([
-    state()
-], HelixHeadlessRating.prototype, "markSource", void 0);
 __decorate([
     state()
 ], HelixHeadlessRating.prototype, "previewing", void 0);
-__decorate([
-    state()
-], HelixHeadlessRating.prototype, "emptySource", void 0);
 HelixHeadlessRating = __decorate([
     customElement('helix-headless-rating')
 ], HelixHeadlessRating);

package/dist/scatter-chart/root/scatter-chart-root.d.ts

@@ -5,6 +5,11 @@ import '../../tooltip/index.js';
 export interface ScatterPoint {
     depth: number;
     row: number;
+    /**
+     * How large the point is drawn under `size-by`, from 0 to 1: the square root
+     * of its share of the largest size, so its area follows the measure.
+     */
+    weight?: number | undefined;
     x: number;
     y: number;
 }
@@ -35,6 +40,11 @@ declare const HelixHeadlessScatterChart_base: typeof HelixElement & (new (...arg
  * `trend` draws each series' line of best fit, by least squares, across the
  * plot in the series' color.
  *
+ * **`size-by` names a third measure, drawn as each point's size**, as a bubble
+ * chart does: `size-by="Population"` takes that column out of the series and
+ * gives each point an area in proportion to its row's number there. The
+ * tooltip and the table still say the number.
+ *
  * The summary gives each series' correlation coefficient and its number of
  * points. The table has every number, and the drawing is hidden from screen
  * readers.
@@ -94,6 +104,7 @@ declare const HelixHeadlessScatterChart_base: typeof HelixElement & (new (...arg
  * @csspart y-name - The name of the vertical measure.
  * @csspart y-tick - One labeled value on the vertical axis.
  *
+ * @cssproperty --chart-point-weight - How large a point is drawn under `size-by`, from 0 to 1, by area. The component writes it, and the stylesheet that sizes the point reads it.
  * @cssproperty --chart-point-x - A point's horizontal position, as a percentage. The component writes it.
  * @cssproperty --chart-point-y - A point's vertical position, as a percentage from the top. The component writes it.
  * @cssproperty --chart-tick - A tick's position along its axis, as a percentage. The component writes it.
@@ -116,6 +127,15 @@ export declare class HelixHeadlessScatterChart extends HelixHeadlessScatterChart
      * The word the summary uses for a row when it counts them.
      */
     pointsLabel: string;
+    /**
+     * The heading of a column whose numbers size the points, such as
+     * `Population`, which makes the chart a bubble chart.
+     *
+     * That column is then a measure and no series: it draws no points of its
+     * own, and each point's area follows its row's number in it. Absent, every
+     * point is one size.
+     */
+    sizeBy: string;
     /**
      * Draws each series' line of best fit across the plot, by least squares, in
      * the series' color: the regression line a reader would otherwise draw by
@@ -148,6 +168,16 @@ export declare class HelixHeadlessScatterChart extends HelixHeadlessScatterChart
      * which is where a reader is told what it is.
      */
     seriesOf(cell: number): number | undefined;
+    /**
+     * The numeric columns by what they measure: the first across, the column
+     * `size-by` names as the size, and every other one up, as a series.
+     */
+    protected get measures(): {
+        across: number | undefined;
+        size: number | undefined;
+        ups: number[];
+    };
+    showsColumn(cell: number): boolean;
     /** Whether the levels across are ruled. */
     protected get rulesX(): boolean;
     /** Whether the levels up are ruled. */

package/dist/scatter-chart/root/scatter-chart-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { CHART_PLOT, customElement, drawTooltip, extent, formatNumbers, HelixElement, isRtl, linear, MixinChartSource, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, ticks, } from '@fusion.dev/helix-core';
+import { CHART_PLOT, customElement, drawTooltip, extent, formatNumbers, HelixElement, isRtl, linear, MixinChartSource, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, seriesKey, ticks, } from '@fusion.dev/helix-core';
 import { html, nothing, svg } from 'lit';
 import { property } from 'lit/decorators.js';
 import '../../tooltip/index.js';
@@ -37,6 +37,7 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
         super(...arguments);
         this.correlationLabel = 'correlation';
         this.pointsLabel = 'points';
+        this.sizeBy = '';
         this.trend = false;
         this.drawn = [];
         this.nearest = undefined;
@@ -82,8 +83,20 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
         this.removeEventListener('pointerleave', this.handleLeave);
     }
     seriesOf(cell) {
-        const depth = this.plottedColumns.indexOf(cell);
-        return depth < 1 ? undefined : seriesIndex(depth - 1);
+        const depth = this.measures.ups.indexOf(cell);
+        return depth < 0 ? undefined : seriesIndex(depth);
+    }
+    get measures() {
+        const rows = this.sourceRows;
+        const key = seriesKey(this.sizeBy);
+        const size = key === ''
+            ? undefined
+            : this.plottedColumns.find((column) => seriesKey(rows.find((row) => row.cells[column])?.cells[column]?.name ?? '') === key);
+        const [across, ...ups] = this.plottedColumns.filter((column) => column !== size);
+        return { across, size, ups };
+    }
+    showsColumn(cell) {
+        return cell !== this.measures.size && super.showsColumn(cell);
     }
     get rulesX() {
         return this.gridlines !== undefined && this.gridlines !== 'y';
@@ -93,8 +106,7 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
     }
     get field() {
         const rows = this.sourceRows;
-        const columns = this.plottedColumns;
-        const [across, ...ups] = columns;
+        const { across, size, ups } = this.measures;
         const name = (column) => column === undefined ? '' : (rows.find((row) => row.cells[column])?.cells[column]?.name ?? '');
         const pairs = ups.map((column) => rows.flatMap((row, index) => {
             const x = across === undefined ? undefined : row.cells[across]?.value;
@@ -107,10 +119,22 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
         const y = nice(extent(all.length > 0 ? all.map(([, one]) => one) : [0]));
         const along = linear(x, [0, PLOT_WIDTH]);
         const up = linear(y, [PLOT_HEIGHT, 0]);
+        const sizes = rows.map((row) => (size === undefined ? undefined : row.cells[size]?.value));
+        const largest = Math.max(0, ...sizes.map((one) => one ?? 0));
+        const weight = (row) => {
+            const one = sizes[row];
+            return one === undefined || largest <= 0 ? undefined : Math.sqrt(Math.max(0, one) / largest);
+        };
         return {
             pairs: pairs.map((series) => series.map(([one, two]) => [one, two])),
             points: pairs.flatMap((series, depth) => shown[depth]
-                ? series.map(([one, two, row]) => ({ depth, row, x: along(one), y: up(two) }))
+                ? series.map(([one, two, row]) => ({
+                    depth,
+                    row,
+                    weight: weight(row),
+                    x: along(one),
+                    y: up(two),
+                }))
                 : []),
             x,
             xName: name(across),
@@ -174,7 +198,7 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
           data-series=${index}
           ?data-active=${point.row === at}
           part="point${point.row === at ? ' point-active' : ''}"
-          style=${`--chart-series: var(--chart-series-${index}); --chart-point-x: ${point.x}%; --chart-point-y: ${point.y}%`}
+          style=${`--chart-series: var(--chart-series-${index}); --chart-point-x: ${point.x}%; --chart-point-y: ${point.y}%${point.weight === undefined ? '' : `; --chart-point-weight: ${point.weight}`}`}
         ></span>`;
         })}
       ${this.renderTooltip()}
@@ -243,6 +267,9 @@ __decorate([
 __decorate([
     property({ attribute: 'points-label' })
 ], HelixHeadlessScatterChart.prototype, "pointsLabel", void 0);
+__decorate([
+    property({ attribute: 'size-by' })
+], HelixHeadlessScatterChart.prototype, "sizeBy", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessScatterChart.prototype, "trend", void 0);

package/dist/scroll-area/scrollbar.d.ts

@@ -1,11 +1,3 @@
-/**
- * The arithmetic behind the scrollbars a scroll area draws under `scrollbars`.
- *
- * Every length here is along one axis and counted from that axis' start, which
- * is the right-hand edge on a right-to-left page for the horizontal one. The
- * component turns a pointer and a `scrollLeft` into those counts, so nothing
- * below has to know which way the line runs.
- */
 /** Which scrollbars are drawn, and when. Absent keeps the browser's own. */
 export type Scrollbars = 'always' | 'auto' | 'hover' | 'scroll';
 /** The two axes a scrollbar runs along. */

package/dist/scroll-area/scrollbar.js

@@ -1,4 +1,4 @@
-const clamp = (value, low, high) => Math.min(Math.max(value, low), high);
+import { clamp } from '@fusion.dev/helix-core';
 export const thumbFraction = ({ client, scroll }) => scroll <= 0 ? 1 : clamp(client / scroll, 0, 1);
 export const scrollFraction = ({ client, offset, scroll }) => {
     const room = scroll - client;

package/dist/select/align.d.ts

@@ -0,0 +1,47 @@
+/** A box on the screen, in viewport pixels. */
+export interface Box {
+    height: number;
+    left: number;
+    top: number;
+    width: number;
+}
+/** What places a list over its trigger. */
+export interface Over {
+    /** How far inside the screen's edges the list stays, in pixels. */
+    margin: number;
+    /** The option to sit on the trigger: its top within the list, and its height. */
+    option: {
+        height: number;
+        top: number;
+    };
+    /** The list's own size. */
+    panel: {
+        height: number;
+        width: number;
+    };
+    /** Whether the line of text runs right to left, which aligns the end edges. */
+    rtl: boolean;
+    /** The trigger. */
+    trigger: Box;
+    /** The screen. */
+    viewport: {
+        height: number;
+        width: number;
+    };
+}
+/**
+ * Where a list opened over its trigger goes, so the option it opens on sits
+ * where the trigger is: the native select's place on macOS, and Radix's
+ * `item-aligned`.
+ *
+ * The option's middle on the trigger's middle, then kept on the screen: a
+ * list that would run off the bottom moves up, and one that would run off the
+ * top moves down, so near an edge the option is beside the trigger rather than
+ * on it. A list taller than the screen starts at its top edge. The start edges
+ * line up, the left in English and the right in Arabic, kept on the screen the
+ * same way.
+ */
+export declare const over: ({ margin, option, panel, rtl, trigger, viewport, }: Over) => {
+    left: number;
+    top: number;
+};

package/dist/select/align.js

@@ -0,0 +1,7 @@
+export const over = ({ margin, option, panel, rtl, trigger, viewport, }) => {
+    const centered = trigger.top + trigger.height / 2 - (option.top + option.height / 2);
+    const top = Math.max(margin, Math.min(centered, viewport.height - margin - panel.height));
+    const start = rtl ? trigger.left + trigger.width - panel.width : trigger.left;
+    const left = Math.max(margin, Math.min(start, viewport.width - margin - panel.width));
+    return { left: Math.round(left), top: Math.round(top) };
+};