@fusion.dev/helix-headless 0.143.0 → 0.145.0

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

@@ -4,10 +4,12 @@ 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 } from '@fusion.dev/helix-core';
+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';
+const QUIET = 4;
 const isFinder = (x, y, size) => {
     const near = (a, b) => a < 8 && b < 8;
     return near(x, y) || near(size - 1 - x, y) || near(x, size - 1 - y);
@@ -104,6 +106,51 @@ let HelixHeadlessQrCode = class HelixHeadlessQrCode extends HelixElement {
             this.overflowed = '';
         }
     }
+    toSvg(size = 512) {
+        const code = this.renderRoot?.querySelector('svg[part="code"]');
+        const modules = code?.querySelector('[part="modules"]');
+        const finders = code?.querySelector('[part="finders"]');
+        if (!code || !modules || !finders) {
+            return '';
+        }
+        const ground = getComputedStyle(this).backgroundColor;
+        const clear = ground === '' || ground === 'transparent' || /^rgba\(.*,\s*0\)$/.test(ground);
+        return qrSvg({
+            background: clear ? '#ffffff' : rgbOf(ground),
+            box: Number(code.getAttribute('viewBox')?.split(' ')[2] ?? 0),
+            finderColor: rgbOf(getComputedStyle(finders).fill || '#000000'),
+            finders: finders.getAttribute('d') ?? '',
+            moduleColor: rgbOf(getComputedStyle(modules).fill || '#000000'),
+            modules: modules.getAttribute('d') ?? '',
+            quiet: QUIET,
+        }, size);
+    }
+    async toPng(size = 512) {
+        const markup = this.toSvg(size);
+        if (markup === '') {
+            return null;
+        }
+        const image = new Image();
+        image.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(markup)}`;
+        await image.decode();
+        const canvas = document.createElement('canvas');
+        canvas.width = size;
+        canvas.height = size;
+        canvas.getContext('2d')?.drawImage(image, 0, 0, size, size);
+        return new Promise((resolve) => canvas.toBlob(resolve, 'image/png'));
+    }
+    async download(filename = 'qr-code.png', size = 512) {
+        const png = await this.toPng(size);
+        if (!png) {
+            return;
+        }
+        const url = URL.createObjectURL(png);
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = filename;
+        link.click();
+        setTimeout(() => URL.revokeObjectURL(url));
+    }
     renderCode() {
         if (this.value === '') {
             return nothing;
@@ -113,7 +160,7 @@ let HelixHeadlessQrCode = class HelixHeadlessQrCode extends HelixElement {
             return nothing;
         }
         const size = result.size;
-        const quiet = 4;
+        const quiet = QUIET;
         const box = size + quiet * 2;
         const finders = pathFor(result.data, 'square', 'finders');
         return svg `<svg

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

@@ -23,6 +23,13 @@ declare const HelixHeadlessRadioGroup_base: (new (...args: any[]) => import("@fu
  * the value until something is chosen, and where a reset returns. The two work
  * like `checked` and `defaultChecked`.
  *
+ * A choice sends its events in this order: `helix-select` from the radio, then,
+ * a microtask later and only if nobody refused it, `helix-before-change` from
+ * the group, and once the value has moved, `input` and `change`. The microtask
+ * is what lets a listener you add to the group after it connected refuse the
+ * `helix-select`. A native radio sends `input` and `change` in the same task as
+ * the click.
+ *
  * @since 0.1.0
  * @status stable
  * @aliases RadioButtons, Choice group
@@ -69,6 +76,16 @@ export declare class HelixHeadlessRadioGroup extends HelixHeadlessRadioGroup_bas
      * only `horizontal` has to be named.
      */
     orientation?: 'horizontal' | 'vertical';
+    /**
+     * Whether a reader can see and focus the answer and cannot change it. A
+     * read-only group still submits its value.
+     *
+     * React Aria's `isReadOnly`. A press on a radio is refused. The arrow keys,
+     * Home and End move focus between the radios and choose nothing, so a reader
+     * can hear every choice, and Tab still reaches the answer. The group says
+     * `aria-readonly`. A script can still set `value`.
+     */
+    readOnly: boolean;
     protected readonly keys: KeyboardNavigationController;
     protected readonly cascade: DisabledCascadeController;
     /** The radios, in light-DOM order. Client only: the server has no tree. */

package/dist/radio/group/radio-group.js

@@ -12,12 +12,21 @@ let HelixHeadlessRadioGroup = class HelixHeadlessRadioGroup extends MixinControl
     constructor() {
         super(...arguments);
         this.focusable = true;
-        this.keys = new KeyboardNavigationController(this, { items: () => this.items });
+        this.readOnly = false;
+        this.keys = new KeyboardNavigationController(this, {
+            items: () => this.items,
+            origin: () => (this.readOnly ? 'focus' : 'selection'),
+            selects: () => !this.readOnly,
+        });
         this.cascade = new DisabledCascadeController(this, {
             items: () => this.items,
         });
         this.handleSelection = (event) => {
             event.stopPropagation();
+            if (this.readOnly) {
+                event.preventDefault();
+                return;
+            }
             queueMicrotask(() => {
                 if (event.defaultPrevented) {
                     return;
@@ -90,6 +99,7 @@ let HelixHeadlessRadioGroup = class HelixHeadlessRadioGroup extends MixinControl
         this.adopt();
         hostAria(this.internals, { label: this.label, role: 'radiogroup' });
         this.internals.ariaRequired = this.required ? 'true' : null;
+        this.internals.ariaReadOnly = this.readOnly ? 'true' : null;
     }
     updated(changed) {
         super.updated(changed);
@@ -111,6 +121,9 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessRadioGroup.prototype, "orientation", void 0);
+__decorate([
+    property({ attribute: 'readonly', reflect: true, type: Boolean })
+], HelixHeadlessRadioGroup.prototype, "readOnly", void 0);
 HelixHeadlessRadioGroup = __decorate([
     customElement('helix-headless-radio-group')
 ], HelixHeadlessRadioGroup);

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

@@ -15,6 +15,9 @@ declare const HelixHeadlessRating_base: (new (...args: any[]) => import("@fusion
  * A read-only rating displays a score, which is the most common use. It is
  * announced as a displayed value and does not look disabled.
  *
+ * With `clearable`, pressing the chosen score again, or Backspace or Delete on
+ * the marks, takes the rating back to unrated and sends `helix-clear`.
+ *
  * @since 0.1.0
  * @status stable
  * @category forms
@@ -28,6 +31,7 @@ declare const HelixHeadlessRating_base: (new (...args: any[]) => import("@fusion
  *
  * @event {Event} change - The score was chosen. Sent together with `input`, because each choice commits the score.
  * @event {HelixBeforeChangeEvent} helix-before-change - The score is about to change. Cancelable: cancel it to keep the current score.
+ * @event {HelixClearEvent} helix-clear - The rating went back to unrated, under `clearable`. Sent after `input` and `change`.
  * @event {Event} input - The score changed.
  *
  * @csspart feedback - The message that says what is wrong.
@@ -50,6 +54,12 @@ declare const HelixHeadlessRating_base: (new (...args: any[]) => import("@fusion
  */
 export declare class HelixHeadlessRating extends HelixHeadlessRating_base {
     protected readonly announcesInput = false;
+    /**
+     * Whether a reader can take the rating back to unrated: by pressing the
+     * chosen score again, or with Backspace or Delete. Zag's rating group
+     * clears the same way.
+     */
+    clearable: boolean;
     /**
      * How many marks there are.
      */
@@ -142,6 +152,8 @@ export declare class HelixHeadlessRating extends HelixHeadlessRating_base {
      */
     valueText: string;
     protected readonly aria: AriaForwardController;
+    /** @internal The element a missing name is checked on: the set of stars, so the name of one star does not count as the name of the rating. */
+    protected get namedControl(): HTMLElement | null;
     /**
      * The shape a consumer slotted, if they slotted one.
      *
@@ -236,8 +248,17 @@ export declare class HelixHeadlessRating extends HelixHeadlessRating_base {
      * or off the element entirely, has asked for nothing.
      */
     private readonly handleDragStart;
+    /** The score a press began on, so releasing on the chosen one can clear it. */
+    private pressedOn;
+    /**
+     * Whether a drag has just chosen, so the click a browser may send after it
+     * does not choose again. Cleared a task later, since the click may not come.
+     */
+    private dragChose;
     private readonly handleDragMove;
     private readonly handleDragEnd;
+    /** Whether a press on `score` takes a clearable rating back to unrated. */
+    private clearsAt;
     private readonly handleDragCancel;
     /**
      * Reports the value, and whether the form may go without one.
@@ -260,6 +281,10 @@ export declare class HelixHeadlessRating extends HelixHeadlessRating_base {
      */
     private sync;
     private readonly handleOptionClick;
+    /** Backspace and Delete take a clearable rating back to unrated. */
+    private readonly handleClearKey;
+    /** Back to unrated, through the same cancelable request as a score, and said. */
+    private clear;
     private readonly handleOptionEnter;
     private readonly handleLeave;
     connectedCallback(): void;

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

@@ -4,13 +4,14 @@ 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, HelixFormElement, KeyboardNavigationController, MixinControllerValue, MixinField, reportRuntime, } from '@fusion.dev/helix-core';
+import { AriaForwardController, valueAsNumber as asNumber, customElement, fillTemplate, numberAsValue as fromNumber, HelixClearEvent, HelixFormElement, KeyboardNavigationController, MixinControllerValue, MixinField, reportRuntime, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue(MixinField(HelixFormElement)) {
     constructor() {
         super(...arguments);
         this.announcesInput = false;
+        this.clearable = false;
         this.max = 5;
         this.min = 0;
         this.optionLabel = '{score} out of {max}';
@@ -50,8 +51,11 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
             catch {
             }
             this.dragging = event.pointerId;
+            this.pressedOn = score;
             this.previewing = Number.parseFloat(score);
         };
+        this.pressedOn = undefined;
+        this.dragChose = false;
         this.handleDragMove = (event) => {
             if (this.dragging !== event.pointerId) {
                 return;
@@ -68,9 +72,18 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
             this.dragging = undefined;
             this.previewing = undefined;
             const score = this.scoreAt(event.clientX);
-            if (score !== undefined) {
-                this.requestValue(score);
+            if (score === undefined) {
+                return;
+            }
+            this.dragChose = true;
+            setTimeout(() => {
+                this.dragChose = false;
+            }, 0);
+            if (this.clearsAt(score) && score === this.pressedOn) {
+                this.clear();
+                return;
             }
+            this.requestValue(score);
         };
         this.handleDragCancel = (event) => {
             if (this.dragging !== event.pointerId) {
@@ -80,8 +93,22 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
             this.previewing = undefined;
         };
         this.handleOptionClick = (event) => {
+            if (this.dragChose) {
+                return;
+            }
             const option = event.currentTarget;
-            this.requestValue(option.dataset.score ?? '');
+            const score = option.dataset.score ?? '';
+            if (this.clearsAt(score)) {
+                this.clear();
+                return;
+            }
+            this.requestValue(score);
+        };
+        this.handleClearKey = (event) => {
+            if (this.clearable && (event.key === 'Backspace' || event.key === 'Delete')) {
+                event.preventDefault();
+                this.clear();
+            }
         };
         this.handleOptionEnter = (event) => {
             if (this.isDisabled) {
@@ -95,6 +122,9 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
         };
         this.warned = false;
     }
+    get namedControl() {
+        return this.partNamed('marks');
+    }
     get floor() {
         if (!Number.isFinite(this.min)) {
             return 0;
@@ -156,10 +186,18 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
         }
         return nearest;
     }
+    clearsAt(score) {
+        return this.clearable && this.value !== '' && Number(score) === Number(this.value);
+    }
     sync() {
         this.internals.setFormValue(this.value === '' ? null : this.value);
         this.reportRequired(this.value === '', 'Choose a rating to continue.', 'marks');
     }
+    clear() {
+        if (this.value !== '' && !this.readOnly && !this.isDisabled && this.requestValue('')) {
+            this.dispatchEvent(new HelixClearEvent());
+        }
+    }
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener('pointerleave', this.handleLeave);
@@ -226,6 +264,7 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
       data-slotted=${this.markSource ? '' : nothing}
       style=${`--rating-full: ${Math.floor(showing)}; --rating-part: ${showing - Math.floor(showing)}; --rating-steps: ${this.positions.length}`}
       @pointercancel=${this.handleDragCancel}
+      @keydown=${this.handleClearKey}
       @pointerdown=${this.handleDragStart}
       @pointermove=${this.handleDragMove}
       @pointerup=${this.handleDragEnd}
@@ -283,6 +322,9 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
         this.value = fromNumber(count);
     }
 };
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessRating.prototype, "clearable", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessRating.prototype, "max", void 0);

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

@@ -33,7 +33,14 @@ declare const HelixHeadlessScatterChart_base: typeof HelixElement & (new (...arg
  * round numbers, and the range extends to them.
  *
  * The summary gives each series' correlation coefficient and its number of
- * points. The table has every number, and the drawing is `aria-hidden`.
+ * points. The table has every number, and the drawing is hidden from screen
+ * readers.
+ *
+ * **The plot is read by key.** It takes focus, named by `label` or the caption.
+ * The left and right arrows move from row to row in the table's order, Home
+ * and End go to the first and the last, and the up and down arrows move among
+ * the series of a row. The tooltip sits on that point, the `live` part says the
+ * row in words, and Escape puts the tooltip away.
  *
  * Each point is a `<span>` placed by percentage over the drawing, as
  * `LineChart` places its end points, so points stay round when the drawing
@@ -52,9 +59,10 @@ declare const HelixHeadlessScatterChart_base: typeof HelixElement & (new (...arg
  * @documentation https://fusion.dev/helix/components/scatter-chart
  *
  * @csspart gridline - One line across the plot, drawn when `gridlines` is set.
+ * @csspart live - The readout: a polite live region that says the row the keys moved to. Hide it visually.
  * @csspart mark - The invisible point the tooltip is anchored to.
  * @csspart plane - The grid that holds the plot, both axes, and their names. It runs left to right on every page.
- * @csspart plot - The drawing.
+ * @csspart plot - The drawing, which takes focus to be read by key.
  * @csspart point - One row, as a point.
  * @csspart point-active - A point in the row under the pointer. Set alongside `point`.
  * @csspart summary - The text that says how strongly the measures relate, for people who cannot see the points.
@@ -68,6 +76,7 @@ declare const HelixHeadlessScatterChart_base: typeof HelixElement & (new (...arg
  * @csspart tooltip-arrow-top - The point while the bubble is above the reading, on its bottom edge. Set alongside `tooltip-arrow`.
  * @csspart tooltip-bottom - The bubble while it is below the reading. Set alongside `tooltip`.
  * @csspart tooltip-cell - One column's name and value inside the tooltip.
+ * @csspart tooltip-cell-current - The cell the up and down arrows rest on, while they rest there. Set alongside `tooltip-cell`.
  * @csspart tooltip-label - The row's own name inside the tooltip.
  * @csspart tooltip-left - The bubble while it is left of the reading. Set alongside `tooltip`.
  * @csspart tooltip-name - A column's name inside the tooltip.
@@ -149,7 +158,12 @@ export declare class HelixHeadlessScatterChart extends HelixHeadlessScatterChart
      * absent where there are fewer than three points or no spread to measure.
      */
     protected renderSummary(field: ScatterField): TemplateResult;
-    /** The row a pointer is resting on, over the point it is nearest. */
+    /**
+     * The row a pointer is resting on, over the point it is nearest.
+     *
+     * A row reached by key has no nearest point, so the bubble sits on the
+     * point of the series the keys rest on, or on the row's first point.
+     */
     protected renderTooltip(): TemplateResult | typeof nothing;
     /**
      * The point a pointer is nearest, within reach.

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

@@ -116,14 +116,17 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
             const y = row.cells[column]?.value;
             return x === undefined || y === undefined ? [] : [[x, y, index]];
         }));
-        const all = pairs.flat();
+        const shown = ups.map((column) => this.showsSeries(name(column)));
+        const all = pairs.filter((_, depth) => shown[depth]).flat();
         const x = nice(extent(all.length > 0 ? all.map(([one]) => one) : [0]));
         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]);
         return {
             pairs: pairs.map((series) => series.map(([one, two]) => [one, two])),
-            points: pairs.flatMap((series, depth) => series.map(([one, two, row]) => ({ depth, row, x: along(one), y: up(two) }))),
+            points: pairs.flatMap((series, depth) => shown[depth]
+                ? series.map(([one, two, row]) => ({ depth, row, x: along(one), y: up(two) }))
+                : []),
             x,
             xName: name(across),
             y,
@@ -156,8 +159,17 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
     }
     renderPlot(field, along, up) {
         const at = this.pointer.at;
-        return html `<div aria-hidden="true" id=${CHART_PLOT} part="plot">
+        return html `<div
+      aria-describedby=${this.named ? 'helix-chart-summary' : nothing}
+      aria-label=${this.named || nothing}
+      aria-labelledby=${this.named ? nothing : 'helix-chart-summary'}
+      id=${CHART_PLOT}
+      part="plot"
+      role="application"
+      tabindex="0"
+    >
       <svg part="svg"
+        aria-hidden="true"
         preserveAspectRatio="none"
         viewBox="0 0 ${PLOT_WIDTH} ${PLOT_HEIGHT}"
         xmlns="http://www.w3.org/2000/svg"
@@ -172,6 +184,7 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
       ${field.points.map((point) => {
             const index = seriesIndex(point.depth);
             return html `<span
+          aria-hidden="true"
           data-series=${index}
           ?data-active=${point.row === at}
           part="point${point.row === at ? ' point-active' : ''}"
@@ -189,13 +202,18 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
             return `${name} / ${field.xName}: ${pairs.length} ${this.pointsLabel}${strength}`;
         });
         const named = this.named ? `${this.named}. ` : '';
-        return html `<p part="summary">${named}${clauses.join('; ')}.</p>`;
+        return html `<p id="helix-chart-summary" part="summary">${named}${clauses.join('; ')}.</p>`;
     }
     renderTooltip() {
         const at = this.pointer.at;
-        const point = this.nearest;
+        const column = this.pointer.column;
+        const depth = column === undefined ? -1 : this.plottedColumns.indexOf(column) - 1;
+        const point = this.nearest?.row === at && !this.pointer.keyed
+            ? this.nearest
+            : (this.drawn.find((one) => one.row === at && one.depth === depth) ??
+                this.drawn.find((one) => one.row === at));
         if (at < 0 || !point) {
-            return drawTooltip(this.sourceRows, -1, this.tag('tooltip'));
+            return drawTooltip(this.sourceRows, -1, this.tag('tooltip'), undefined, undefined, this.pointer);
         }
         return drawTooltip(this.sourceRows, at, this.tag('tooltip'), {
             dir: isRtl(this) ? 'rtl' : 'ltr',
@@ -203,7 +221,7 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
             placement: 'top',
             x: `${point.x}%`,
             y: `${point.y}%`,
-        }, (cell) => this.seriesOf(cell));
+        }, (cell) => this.seriesOf(cell), this.pointer);
     }
 };
 __decorate([

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

@@ -20,6 +20,20 @@ declare const EDGES: readonly ['block-start', 'block-end', 'inline-start', 'inli
  * It has `role="region"` only when you set a `label`, because a screen reader
  * announces an unnamed region as only "region".
  *
+ * **`scrollbars` draws scrollbars of its own** in place of the browser's: a
+ * `scrollbar` part for each axis that scrolls, a `thumb` in each, and a
+ * `corner` where the two meet. They are for the pointer. The thumb drags, and
+ * a press on the track moves the thumb to the press. The viewport stays the
+ * tab stop and the region a screen reader reads, and the scrollbars are hidden
+ * from screen readers. On the headless tier your stylesheet sizes and places
+ * them, hides the browser's own with `scrollbar-width: none` on the viewport,
+ * and draws the thumb from the two custom properties written on each
+ * scrollbar. An axis whose `overflow` is `hidden` gets no scrollbar.
+ *
+ * The viewport's `scroll` and `scrollend` are sent again from the host, which
+ * is the element you hold. In React, bind them with `onScroll` and
+ * `onScrollEnd`.
+ *
  * @since 0.1.0
  * @status stable
  * @category layout
@@ -28,22 +42,69 @@ declare const EDGES: readonly ['block-start', 'block-end', 'inline-start', 'inli
  *
  * @slot - The content that scrolls.
  *
+ * @event {Event} scroll - The content scrolled. Sent from the host, because the viewport's own does not leave the shadow root. Does not bubble.
+ * @event {Event} scrollend - The content stopped scrolling. Sent from the host, as `scroll` is. Does not bubble.
+ *
+ * @csspart corner - The square where the two scrollbars meet, under `scrollbars`. Hidden unless both are drawn.
  * @csspart edges - The layer that draws the cues on the inline start and end edges.
+ * @csspart scrollbar - Each scrollbar, under `scrollbars`. Hidden on an axis that has none.
+ * @csspart scrollbar-horizontal - The scrollbar along the inline axis, alongside `scrollbar`.
+ * @csspart scrollbar-vertical - The scrollbar along the block axis, alongside `scrollbar`.
+ * @csspart scrollbar-visible - A scrollbar while it is showing, alongside `scrollbar`. Always under `auto` and `always`, and while scrolling, held, or hovered under `scroll` and `hover`.
+ * @csspart thumb - The thumb inside each scrollbar, which drags.
+ * @csspart thumb-horizontal - The thumb of the horizontal scrollbar, alongside `thumb`.
+ * @csspart thumb-vertical - The thumb of the vertical scrollbar, alongside `thumb`.
  * @csspart viewport - The scrolling box.
  *
+ * @cssproperty --scroll-area-scroll-fraction - How far along its axis the content is scrolled, from 0 at the start to 1 at the end. Written on each `scrollbar` part, so its thumb inherits it. Counted from the right on a right-to-left page.
+ * @cssproperty --scroll-area-thumb-fraction - The share of the track the thumb covers, from 0 to 1, which is how much of the content is in view. Written on each `scrollbar` part.
+ *
  * @cssstate more-block-end - While there is more to scroll to past the block end.
  * @cssstate more-block-start - While there is more to scroll back to before the block start.
  * @cssstate more-inline-end - While there is more to scroll to past the inline end.
  * @cssstate more-inline-start - While there is more to scroll back to before the inline start.
+ * @cssstate scrollbar-horizontal - While the horizontal scrollbar is drawn, under `scrollbars`.
+ * @cssstate scrollbar-vertical - While the vertical scrollbar is drawn, under `scrollbars`.
  * @cssstate scrolls - While the content is larger than the viewport, on either axis.
  */
 export declare class HelixHeadlessScrollArea extends HelixElement {
+    /**
+     * How long the scrollbars stay after the content stops moving, or the pointer
+     * leaves, in milliseconds. Read under `scrollbars="scroll"` and
+     * `scrollbars="hover"`.
+     */
+    hideDelay: number;
     /**
      * The region's name, read by screen readers.
      *
      * Without one there is no region: see the note on the class.
      */
     label: string;
+    /**
+     * Draws scrollbars of the component's own in place of the browser's, and
+     * says when they show.
+     *
+     * - `auto`: on each axis that has content past it.
+     * - `always`: on each axis that can scroll, whether or not it has anything to
+     *   scroll, so the scrollbar is there before the content grows.
+     * - `scroll`: while the content is moving, and for `hide-delay` after.
+     * - `hover`: as `scroll`, and while the pointer is over the scroll area.
+     *
+     * Absent keeps the browser's scrollbars.
+     */
+    scrollbars?: 'always' | 'auto' | 'hover' | 'scroll';
+    /** What each scrollbar shows, measured, and `undefined` until it has been. */
+    private bars;
+    /** Whether the content moved, or the pointer left, within the hide delay. */
+    private active;
+    /** Whether the pointer is over the scroll area. */
+    private hovered;
+    /** Whether the pointer is over a scrollbar. */
+    private over;
+    /** The thumb being dragged, if one is. */
+    private drag;
+    /** Puts the scrollbars away once nothing has moved for the hide delay. */
+    private readonly hide;
     /**
      * Which edges have content past them, measured rather than guessed.
      */
@@ -76,6 +137,46 @@ export declare class HelixHeadlessScrollArea extends HelixElement {
      * costs.
      */
     private measure;
+    /** One axis of the box, counted from its start whichever way the line runs. */
+    private extent;
+    /**
+     * Reads what each scrollbar shows off the box.
+     *
+     * An axis scrolls unless its `overflow` says it cannot. An empty reading is a
+     * harness with no layout, where the mark `core` puts on the viewport is
+     * `overflow: auto` on both axes, so it counts as one that scrolls.
+     *
+     * Written only on a change, so a scroll that moves no thumb renders nothing.
+     */
+    private readBars;
+    /**
+     * Shows the scrollbars and starts the wait that puts them away again, under
+     * `scroll` and `hover`.
+     */
+    private wake;
+    /** Sends the content to `offset` along an axis, counted from its start. */
+    private scrollAlong;
+    /**
+     * Takes hold of a thumb, or presses the track.
+     *
+     * A press on the track sends the thumb's middle to the press first, and the
+     * drag carries on from there, so a press and a drag are one gesture as they
+     * are on the browser's own scrollbar. `preventDefault` keeps the press from
+     * starting a text selection, and from moving focus off the viewport.
+     */
+    private grab;
+    private readonly handleVerticalDown;
+    private readonly handleHorizontalDown;
+    /** Moves the content with a dragged thumb. Nothing while no thumb is held. */
+    private readonly handleDragMove;
+    private readonly handleDragEnd;
+    private readonly handleBarEnter;
+    private readonly handleBarLeave;
+    private readonly handleEnter;
+    private readonly handleLeave;
+    /** Measures, shows the scrollbars, and sends the event on from the host. */
+    private readonly handleScroll;
+    private readonly handleScrollEnd;
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected firstUpdated(changed: PropertyValues): void;
@@ -84,6 +185,18 @@ export declare class HelixHeadlessScrollArea extends HelixElement {
     protected updated(changed: PropertyValues): void;
     private readonly handleSlotChange;
     protected render(): TemplateResult;
+    /**
+     * The scrollbars, the thumbs in them and the corner.
+     *
+     * **For the pointer, and hidden from everything else.** The viewport is
+     * already the tab stop and the region, and the keys scroll it, so a second
+     * way in would be one more stop that does the same thing. The scrollbars
+     * carry `aria-hidden` and take no focus, as Radix's do.
+     *
+     * Hidden on the server, which cannot measure whether there is anything to
+     * scroll, and until the first measurement.
+     */
+    private renderScrollbars;
 }
 declare global {
     interface HTMLElementTagNameMap {