@fusion.dev/helix-headless 0.144.0 → 0.145.0

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

@@ -1,5 +1,6 @@
 import { HelixElement } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
+import { type Branch } from '../levels.js';
 /**
  * @summary Links to the headings on the page, with the section in view marked.
  *
@@ -12,8 +13,12 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * the same page.
  *
  * Write the anchors flat, with `data-level` for their depth, or nested in
- * lists, `<ul><li><a>`. A screen reader hears a nested list's levels; it hears
- * `data-level` as a flat run of links.
+ * lists, `<ul><li><a>`. A screen reader hears the levels either way: the
+ * outline puts a flat run into lists inside list items of its own, nested by
+ * `data-level`, and leaves the links where they are. A link without
+ * `data-level` is at the top level.
+ *
+ * A heading slotted into `heading` names the navigation, in place of `label`.
  *
  * The current section is decided by the headings' positions. An
  * `IntersectionObserver` with a band near the top fails both ways: when
@@ -27,13 +32,24 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @documentation https://fusion.dev/helix/components/outline
  *
  * @slot - The links, as anchors with fragment hrefs, or lists holding them.
+ * @slot heading - A heading above the links, such as "On this page". It names the navigation.
  *
  * @event {HelixActivateEvent} helix-activate - Fired when the section in view changes, with its id as the value. It reports the scroll position and cannot be prevented.
  *
+ * @csspart heading - The box holding the `heading` slot, above the navigation.
  * @csspart indicator - The mark that moves to the section in view.
  * @csspart nav - The navigation landmark.
  */
 export declare class HelixHeadlessOutline extends HelixElement {
+    /**
+     * Manual, so each link in a flat run can be put in a list item of its own.
+     *
+     * The list items are slots, which lay out as nothing at all, so each link is
+     * still laid out as a child of the navigation exactly where it was, and the
+     * consumer's markup is not touched. A run holding anything but links, a
+     * `<ul>` among them, goes to one plain slot as before.
+     */
+    static shadowRootOptions: ShadowRootInit;
     private readonly indicator;
     /**
      * How the page scrolls to a section when its link is clicked.
@@ -58,7 +74,8 @@ export declare class HelixHeadlessOutline extends HelixElement {
      */
     behavior: ScrollBehavior;
     /**
-     * The navigation's name, read by screen readers.
+     * The navigation's name, read by screen readers. A heading in the `heading`
+     * slot names it in place of this.
      */
     label: string;
     /**
@@ -92,6 +109,11 @@ export declare class HelixHeadlessOutline extends HelixElement {
      */
     private reading;
     private observer;
+    /**
+     * Watches the children, which a manual root is not told about: a link
+     * arriving, leaving or changing its level changes the lists drawn for them.
+     */
+    private childWatch;
     /**
      * The links, in document order. Empty on the server, which has no tree.
      *
@@ -101,6 +123,18 @@ export declare class HelixHeadlessOutline extends HelixElement {
      * nothing was announced, and nothing said why.
      */
     private get links();
+    /** The children that are the content, which is all of them but the heading. */
+    private get content();
+    /**
+     * The links of a flat run, which the render puts into lists, or `undefined`
+     * where the content is anything else.
+     *
+     * Anything else is a list a consumer wrote, which already has its levels, a
+     * slot forwarded from a component around this one, or a server's render and
+     * the hydration of one, which cannot know the children. A root a server sent
+     * routes by name, so it keeps the plain slot after hydration too.
+     */
+    private get run();
     /**
      * What each link points at, paired with the link, skipping anything missing.
      *
@@ -250,8 +284,39 @@ export declare class HelixHeadlessOutline extends HelixElement {
     private unland;
     connectedCallback(): void;
     protected firstUpdated(changed: PropertyValues): void;
+    /**
+     * Puts each child in its slot, on a root this element made.
+     *
+     * A link of a flat run goes to the slot inside its list item, and anything
+     * else, with the text between, to the plain slot. A root a server sent
+     * routes by name and needs none of it.
+     */
+    private assign;
+    /** Whether the heading is what names the navigation. */
+    private namedByHeading;
+    /**
+     * Names the navigation by what is in the `heading` slot, in place of `label`.
+     *
+     * An element reference, because the heading is in the light DOM and the
+     * `<nav>` in this shadow root, which an IDREF cannot cross. A browser without
+     * element reflection keeps `label`.
+     */
+    private readonly nameByHeading;
     protected updated(changed: PropertyValues): void;
     protected render(): TemplateResult;
+    /**
+     * A list for a run of links, with a list item for each, nested by level.
+     *
+     * **Slots, because a slot lays out as nothing.** A list and its items drawn
+     * as boxes would put each link inside an item, out of the navigation's own
+     * flex column, and every outline styled against that column would move. A
+     * slot is `display: contents`, keeps a role it is given, and shows its
+     * children while nothing is assigned to it, so the items nest in the
+     * accessibility tree and nowhere else. Measured in Chromium: every link at the
+     * same box with and without the lists, and each item at the level its
+     * nesting gives it.
+     */
+    protected renderList(branches: Branch[]): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/outline/root/outline-root.js

@@ -4,9 +4,11 @@ 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, elementById, HelixActivateEvent, HelixElement, IndicatorController, } from '@fusion.dev/helix-core';
-import { html } from 'lit';
+import { customElement, elementById, HelixActivateEvent, HelixElement, IndicatorController, reflectElements, } from '@fusion.dev/helix-core';
+import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
+import { levelOf, nest } from '../levels.js';
+const isFragment = (element) => element instanceof HTMLAnchorElement && element.getAttribute('href')?.startsWith('#') === true;
 let HelixHeadlessOutline = class HelixHeadlessOutline extends HelixElement {
     constructor() {
         super(...arguments);
@@ -72,16 +74,38 @@ let HelixHeadlessOutline = class HelixHeadlessOutline extends HelixElement {
             this.watch();
             this.indicator.place();
         };
+        this.namedByHeading = false;
+        this.nameByHeading = () => {
+            const slot = this.renderRoot?.querySelector?.('slot[name="heading"]');
+            this.namedByHeading = reflectElements(this.partNamed('nav'), 'ariaLabelledByElements', slot?.assignedElements({ flatten: true }) ?? [], this.namedByHeading);
+        };
     }
+    static { this.shadowRootOptions = {
+        ...HelixElement.shadowRootOptions,
+        slotAssignment: 'manual',
+    }; }
     get current() {
         return this.reading;
     }
     get links() {
-        const slot = this.renderRoot?.querySelector('slot');
-        const fragment = (element) => element instanceof HTMLAnchorElement && element.getAttribute('href')?.startsWith('#') === true;
-        return (slot?.assignedElements({ flatten: true }) ?? []).flatMap((element) => fragment(element)
+        const slots = [
+            ...(this.renderRoot?.querySelectorAll?.('slot[data-link], nav > slot:not([role])') ?? []),
+        ];
+        return slots
+            .flatMap((slot) => slot.assignedElements({ flatten: true }))
+            .flatMap((element) => isFragment(element)
             ? [element]
-            : [...element.querySelectorAll('a[href^="#"]')].filter(fragment));
+            : [...element.querySelectorAll('a[href^="#"]')].filter(isFragment));
+    }
+    get content() {
+        return this.knownChildren.filter((child) => child.slot !== 'heading');
+    }
+    get run() {
+        const content = this.content;
+        if (this.assignsByName || content.length === 0 || !content.every(isFragment)) {
+            return undefined;
+        }
+        return content;
     }
     get sections() {
         return this.links.flatMap((link) => {
@@ -163,6 +187,8 @@ let HelixHeadlessOutline = class HelixHeadlessOutline extends HelixElement {
     }
     disconnectedCallback() {
         super.disconnectedCallback();
+        this.childWatch?.disconnect();
+        this.childWatch = undefined;
         this.removeEventListener('click', this.handleClick);
         document.removeEventListener('scroll', this.handleScroll, true);
         if (this.frame !== 0) {
@@ -183,6 +209,12 @@ let HelixHeadlessOutline = class HelixHeadlessOutline extends HelixElement {
     }
     connectedCallback() {
         super.connectedCallback();
+        this.childWatch = new MutationObserver(() => this.requestUpdate());
+        this.childWatch.observe(this, {
+            attributeFilter: ['data-level', 'href', 'slot'],
+            childList: true,
+            subtree: true,
+        });
         this.addEventListener('click', this.handleClick);
         document.addEventListener('scroll', this.handleScroll, {
             capture: true,
@@ -195,9 +227,32 @@ let HelixHeadlessOutline = class HelixHeadlessOutline extends HelixElement {
     firstUpdated(changed) {
         super.firstUpdated(changed);
         this.watch();
+        this.finishHydration();
+    }
+    assign() {
+        if (this.assignsByName) {
+            return;
+        }
+        const root = this.renderRoot;
+        const heading = root?.querySelector?.('slot[name="heading"]');
+        heading?.assign?.(...this.knownChildren.filter((child) => child.slot === 'heading'));
+        const run = this.run;
+        if (run) {
+            for (const slot of root?.querySelectorAll?.('slot[data-link]') ?? []) {
+                const link = run[Number(slot.dataset.link)];
+                if (link) {
+                    slot.assign(link);
+                }
+            }
+            return;
+        }
+        const plain = root?.querySelector?.('nav > slot:not([role])');
+        plain?.assign?.(...[...this.childNodes].filter((node) => node instanceof Element ? node.slot !== 'heading' : node instanceof Text));
     }
     updated(changed) {
         super.updated(changed);
+        this.assign();
+        this.nameByHeading();
         if (changed.has('offset')) {
             this.reach();
             this.mark();
@@ -208,11 +263,21 @@ let HelixHeadlessOutline = class HelixHeadlessOutline extends HelixElement {
         this.indicator.place();
     }
     render() {
-        return html `<nav part="nav" aria-label=${this.label}>
-      <slot @slotchange=${this.handleSlotChange}></slot>
+        const run = this.run;
+        return html `<div part="heading"><slot name="heading" @slotchange=${this.nameByHeading}></slot></div>
+      <nav part="nav" aria-label=${this.label} @slotchange=${this.handleSlotChange}>
+      ${run ? this.renderList(nest(run.map((link) => levelOf(link.getAttribute('data-level'))))) : html `<slot></slot>`}
       <span part="indicator" aria-hidden="true"></span>
     </nav>`;
     }
+    renderList(branches) {
+        return html `<slot role="list"
+      >${branches.map((branch) => html `<slot role="listitem"
+            ><slot data-link=${branch.index}></slot
+            >${branch.children.length > 0 ? this.renderList(branch.children) : nothing}</slot
+          >`)}</slot
+    >`;
+    }
 };
 __decorate([
     property()

package/dist/pagination/size/pagination-size.d.ts

@@ -1,4 +1,4 @@
-import { HelixElement } from '@fusion.dev/helix-core';
+import { HelixFormElement } from '@fusion.dev/helix-core';
 import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 import '../../option/index.js';
 import '../../select/index.js';
@@ -28,6 +28,11 @@ import '../../select/index.js';
  * Re-querying and returning to page one is up to you, because only you know
  * whether the current position should be kept.
  *
+ * It takes part in a form. Give it a `name` and the size in force is submitted
+ * under that name, so a `GET` form carries it in the address beside the page.
+ * A form reset returns it to `default-value`, and `disabled`, or a disabled
+ * `<fieldset>` around it, turns the select off.
+ *
  * @since 0.1.0
  * @status stable
  * @aliases Page size, Rows per page
@@ -67,7 +72,7 @@ import '../../select/index.js';
  *
  * @cssstate empty - While there are no sizes to offer.
  */
-export declare class HelixHeadlessPaginationSize extends HelixElement {
+export declare class HelixHeadlessPaginationSize extends HelixFormElement {
     /**
      * The size to start on when `value` is not set.
      */
@@ -115,6 +120,10 @@ export declare class HelixHeadlessPaginationSize extends HelixElement {
      * after it, and a refused size still sent it.
      */
     private readonly stopNative;
+    /** Returns to the size the markup declared, as a native `<select>` does on a reset. */
+    formResetCallback(): void;
+    /** Takes back the size a browser restores with the form, or the declared one. */
+    formStateRestoreCallback(state: string | File | FormData | null): void;
     protected willUpdate(changed: PropertyValues): void;
     /**
      * The control itself, which is the whole of this part, behind a seam the styled tier can move.

package/dist/pagination/size/pagination-size.js

@@ -4,13 +4,13 @@ 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, formatNumbers, HelixBeforeChangeEvent, HelixElement, requestChange, } from '@fusion.dev/helix-core';
+import { customElement, formatNumbers, HelixBeforeChangeEvent, HelixFormElement, requestChange, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
 import '../../option/index.js';
 import '../../select/index.js';
-let HelixHeadlessPaginationSize = class HelixHeadlessPaginationSize extends HelixElement {
+let HelixHeadlessPaginationSize = class HelixHeadlessPaginationSize extends HelixFormElement {
     constructor() {
         super(...arguments);
         this.defaultValue = 0;
@@ -29,8 +29,8 @@ let HelixHeadlessPaginationSize = class HelixHeadlessPaginationSize extends Heli
                     const previous = this.value;
                     this.valueState = size;
                     this.requestUpdate('value', previous);
-                    this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
-                    this.dispatchEvent(new Event('change', { bubbles: true, composed: false }));
+                    this.announceInput();
+                    this.announceChange();
                 },
                 event: (size) => new HelixBeforeChangeEvent({ value: String(size) }),
                 host: this,
@@ -68,9 +68,23 @@ let HelixHeadlessPaginationSize = class HelixHeadlessPaginationSize extends Heli
         const options = this.options;
         return options.includes(this.value) ? this.value : (options[0] ?? 0);
     }
+    formResetCallback() {
+        super.formResetCallback();
+        const previous = this.value;
+        this.valueState = undefined;
+        this.requestUpdate('value', previous);
+    }
+    formStateRestoreCallback(state) {
+        const size = typeof state === 'string' ? Number.parseInt(state, 10) : Number.NaN;
+        const previous = this.value;
+        this.valueState = Number.isFinite(size) && size > 0 ? size : undefined;
+        this.requestUpdate('value', previous);
+    }
     willUpdate(changed) {
         super.willUpdate(changed);
         this.toggleState('empty', this.options.length === 0);
+        const current = this.current;
+        this.internals.setFormValue(current > 0 ? String(current) : null);
     }
     renderSelect() {
         const select = this.tag('select');
@@ -86,6 +100,7 @@ let HelixHeadlessPaginationSize = class HelixHeadlessPaginationSize extends Heli
         listbox-search-field: control-listbox-search-field, surface: control-surface,
         trigger: control-trigger, value: control-value"
       label=${this.label}
+      ?disabled=${this.isDisabled}
       .value=${String(this.current)}
       @helix-before-change=${this.handleChange}
       @input=${this.stopNative}

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

@@ -80,18 +80,12 @@ export declare class HelixHeadlessRadioGroup extends HelixHeadlessRadioGroup_bas
      * 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, and the arrow
-     * keys, Home and End leave focus on the answer, so Tab still reaches it and
-     * a reader hears it with the group's name. The group says `aria-readonly`.
-     * A script can still set `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;
-    /**
-     * Keeps the keys that would move the answer from the keyboard controller
-     * while the group is read-only. A capture listener on the host runs ahead of
-     * the controller's own on the same target.
-     */
-    private readonly holdKeys;
     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

@@ -8,19 +8,16 @@ import { customElement, DisabledCascadeController, HelixFormElement, hostAria, K
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { HelixHeadlessRadio } from '../root/radio-root.js';
-const MOVING_KEYS = new Set(['ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'End', 'Home']);
 let HelixHeadlessRadioGroup = class HelixHeadlessRadioGroup extends MixinControllerValue(MixinField(HelixFormElement)) {
     constructor() {
         super(...arguments);
         this.focusable = true;
         this.readOnly = false;
-        this.holdKeys = (event) => {
-            if (this.readOnly && MOVING_KEYS.has(event.key)) {
-                event.stopImmediatePropagation();
-                event.preventDefault();
-            }
-        };
-        this.keys = new KeyboardNavigationController(this, { items: () => this.items });
+        this.keys = new KeyboardNavigationController(this, {
+            items: () => this.items,
+            origin: () => (this.readOnly ? 'focus' : 'selection'),
+            selects: () => !this.readOnly,
+        });
         this.cascade = new DisabledCascadeController(this, {
             items: () => this.items,
         });
@@ -92,12 +89,10 @@ let HelixHeadlessRadioGroup = class HelixHeadlessRadioGroup extends MixinControl
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener('helix-select', this.handleSelection);
-        this.addEventListener('keydown', this.holdKeys, { capture: true });
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.removeEventListener('helix-select', this.handleSelection);
-        this.removeEventListener('keydown', this.holdKeys, { capture: true });
     }
     willUpdate(changed) {
         super.willUpdate(changed);

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

@@ -31,7 +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 {Event} helix-clear - The rating went back to unrated, under `clearable`. Sent after `input` and `change`.
+ * @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.

package/dist/rating/root/rating-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 { 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)) {
@@ -195,7 +195,7 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
     }
     clear() {
         if (this.value !== '' && !this.readOnly && !this.isDisabled && this.requestValue('')) {
-            this.dispatchEvent(new Event('helix-clear', { bubbles: true, composed: true }));
+            this.dispatchEvent(new HelixClearEvent());
         }
     }
     connectedCallback() {

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 {