@fusion.dev/helix-headless 0.144.0 → 0.146.0

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

@@ -8,6 +8,7 @@ import { CHART_PLOT, customElement, drawTooltip, extent, formatNumbers, HelixEle
 import { html, nothing, svg } from 'lit';
 import { property } from 'lit/decorators.js';
 import '../../tooltip/index.js';
+import { correlation, leastSquares } from '../fit.js';
 const REACH = 24;
 const COEFFICIENTS = new Map();
 const coefficientIn = (locale) => {
@@ -31,28 +32,12 @@ const nice = ([low, high]) => {
     const round = (value) => Number(value.toPrecision(12));
     return [round(Math.floor(low / step) * step), round(Math.ceil(high / step) * step)];
 };
-const correlation = (pairs) => {
-    if (pairs.length < 3) {
-        return undefined;
-    }
-    const mean = (values) => values.reduce((sum, one) => sum + one, 0) / values.length;
-    const across = mean(pairs.map(([x]) => x));
-    const up = mean(pairs.map(([, y]) => y));
-    let both = 0;
-    let xs = 0;
-    let ys = 0;
-    for (const [x, y] of pairs) {
-        both += (x - across) * (y - up);
-        xs += (x - across) ** 2;
-        ys += (y - up) ** 2;
-    }
-    return xs === 0 || ys === 0 ? undefined : both / Math.sqrt(xs * ys);
-};
 let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinChartSource(HelixElement) {
     constructor() {
         super(...arguments);
         this.correlationLabel = 'correlation';
         this.pointsLabel = 'points';
+        this.trend = false;
         this.drawn = [];
         this.nearest = undefined;
         this.handleMove = (event) => {
@@ -180,6 +165,7 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
         ${this.rulesY
             ? ticks(field.y).map((level) => svg `<line part="gridline" x1="0" x2=${PLOT_WIDTH} y1=${up(level)} y2=${up(level)} />`)
             : nothing}
+        ${this.renderTrends(field, along, up)}
       </svg>
       ${field.points.map((point) => {
             const index = seriesIndex(point.depth);
@@ -194,6 +180,30 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
       ${this.renderTooltip()}
     </div>`;
     }
+    renderTrends(field, along, up) {
+        if (!this.trend) {
+            return nothing;
+        }
+        const [start, end] = field.x;
+        return field.yNames.flatMap((name, depth) => {
+            const fit = this.showsSeries(name) ? leastSquares(field.pairs[depth] ?? []) : undefined;
+            if (fit === undefined) {
+                return [];
+            }
+            const index = seriesIndex(depth);
+            return [
+                svg `<line
+          data-series=${index}
+          part="trend"
+          style="--chart-series: var(--chart-series-${index})"
+          x1=${along(start)}
+          x2=${along(end)}
+          y1=${up(fit.intercept + fit.slope * start)}
+          y2=${up(fit.intercept + fit.slope * end)}
+        />`,
+            ];
+        });
+    }
     renderSummary(field) {
         const clauses = field.yNames.map((name, depth) => {
             const pairs = field.pairs[depth] ?? [];
@@ -233,6 +243,9 @@ __decorate([
 __decorate([
     property({ attribute: 'points-label' })
 ], HelixHeadlessScatterChart.prototype, "pointsLabel", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessScatterChart.prototype, "trend", void 0);
 HelixHeadlessScatterChart = __decorate([
     customElement('helix-headless-scatter-chart')
 ], HelixHeadlessScatterChart);

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

@@ -20,6 +20,30 @@ 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.
+ *
+ * **`orientation` keeps the content to one axis.** `vertical` scrolls up and
+ * down only, and `horizontal` sideways only, so the other axis has no
+ * scrollbar, the browser's or the component's, and clips what is past it.
+ * Leave it unset to scroll both ways.
+ *
+ * The viewport's `scroll` and `scrollend` are sent again from the host, which
+ * is the element you hold. A thumb dragged across the content sends one
+ * `scrollend`, once it is let go. In React, bind them with `onScroll` and
+ * `onScrollEnd`.
+ *
+ * **Keyboard.** The viewport is the tab stop while the content overflows, and
+ * the browser's scrolling keys move it: the arrow keys, Page Up and Page Down,
+ * Home and End, and Space. The scrollbars take no focus.
+ *
  * @since 0.1.0
  * @status stable
  * @category layout
@@ -28,22 +52,64 @@ 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, and once for a thumb dragged across the content. 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;
+    /**
+     * The one axis the content scrolls along: `vertical` or `horizontal`. The
+     * other axis clips what is past it and has no scrollbar. Unset scrolls both.
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * 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';
+    /** The scrollbars drawn under `scrollbars`: what they show, when, and the drag. */
+    private readonly bars;
     /**
      * Which edges have content past them, measured rather than guessed.
      */
@@ -76,6 +142,10 @@ export declare class HelixHeadlessScrollArea extends HelixElement {
      * costs.
      */
     private measure;
+    /** Measures, shows the scrollbars, and sends the event on from the host. */
+    private readonly handleScroll;
+    /** Sends the event on from the host, except the ones a thumb drag holds back. */
+    private readonly handleScrollEnd;
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected firstUpdated(changed: PropertyValues): void;
@@ -83,7 +153,21 @@ export declare class HelixHeadlessScrollArea extends HelixElement {
     private watchContent;
     protected updated(changed: PropertyValues): void;
     private readonly handleSlotChange;
+    /** The axis `orientation` takes away, clipped where the content would overflow it. */
+    private get clipped();
     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 {

package/dist/scroll-area/root/scroll-area-root.js

@@ -7,11 +7,19 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement, HelixElement } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
+import { ScrollbarController } from '../scrollbar-controller.js';
 const EDGES = ['block-start', 'block-end', 'inline-start', 'inline-end'];
 let HelixHeadlessScrollArea = class HelixHeadlessScrollArea extends HelixElement {
     constructor() {
         super(...arguments);
+        this.hideDelay = 600;
         this.label = '';
+        this.bars = new ScrollbarController(this, {
+            box: () => this.scroller,
+            hideDelay: () => this.hideDelay,
+            mode: () => this.scrollbars,
+            scrollEnd: () => this.dispatchEvent(new Event('scrollend')),
+        });
         this.more = [];
         this.scrolls = false;
         this.measure = () => {
@@ -20,22 +28,39 @@ let HelixHeadlessScrollArea = class HelixHeadlessScrollArea extends HelixElement
                 return;
             }
             const slack = 1;
+            const block = this.orientation !== 'horizontal';
+            const inline = this.orientation !== 'vertical';
             const found = [];
-            if (box.scrollTop > slack) {
+            if (block && box.scrollTop > slack) {
                 found.push('block-start');
             }
-            if (box.scrollTop + box.clientHeight < box.scrollHeight - slack) {
+            if (block && box.scrollTop + box.clientHeight < box.scrollHeight - slack) {
                 found.push('block-end');
             }
             const along = Math.abs(box.scrollLeft);
-            if (along > slack) {
+            if (inline && along > slack) {
                 found.push('inline-start');
             }
-            if (along + box.clientWidth < box.scrollWidth - slack) {
+            if (inline && along + box.clientWidth < box.scrollWidth - slack) {
                 found.push('inline-end');
             }
             this.more = found;
-            this.scrolls = box.scrollHeight > box.clientHeight || box.scrollWidth > box.clientWidth;
+            this.scrolls =
+                (block && box.scrollHeight > box.clientHeight) ||
+                    (inline && box.scrollWidth > box.clientWidth);
+            if (this.scrollbars) {
+                this.bars.read(box);
+            }
+        };
+        this.handleScroll = (event) => {
+            this.measure();
+            this.bars.wake();
+            this.relayNativeEvent(event);
+        };
+        this.handleScrollEnd = (event) => {
+            if (!this.bars.holdsScrollEnd()) {
+                this.relayNativeEvent(event);
+            }
         };
         this.handleSlotChange = (event) => {
             const slot = event.target;
@@ -79,20 +104,40 @@ let HelixHeadlessScrollArea = class HelixHeadlessScrollArea extends HelixElement
     }
     updated(changed) {
         super.updated?.(changed);
+        if (changed.has('orientation') && this.hasUpdated) {
+            this.measure();
+        }
+        else if (changed.has('scrollbars') && this.scrollbars) {
+            const box = this.scroller;
+            if (box) {
+                this.bars.read(box);
+            }
+        }
         this.toggleState('scrolls', this.scrolls);
         this.toggleState('more-block-start', this.more.includes('block-start'));
         this.toggleState('more-block-end', this.more.includes('block-end'));
         this.toggleState('more-inline-start', this.more.includes('inline-start'));
         this.toggleState('more-inline-end', this.more.includes('inline-end'));
+        const drawn = this.scrollbars ? this.bars.bars : undefined;
+        this.toggleState('scrollbar-horizontal', drawn?.horizontal.drawn === true);
+        this.toggleState('scrollbar-vertical', drawn?.vertical.drawn === true);
+    }
+    get clipped() {
+        if (this.orientation === 'vertical') {
+            return 'overflow-x: hidden';
+        }
+        return this.orientation === 'horizontal' ? 'overflow-y: hidden' : nothing;
     }
     render() {
         return html `<div
       data-scroller
       part="viewport"
+      style=${this.clipped}
       role=${this.label ? 'region' : nothing}
       aria-label=${this.label || nothing}
       tabindex=${this.scrolls ? '0' : nothing}
-      @scroll=${this.measure}
+      @scroll=${this.handleScroll}
+      @scrollend=${this.handleScrollEnd}
     >
       <slot @slotchange=${this.handleSlotChange}></slot>
     </div>
@@ -104,12 +149,66 @@ let HelixHeadlessScrollArea = class HelixHeadlessScrollArea extends HelixElement
     <div
       part="edges"
       aria-hidden="true"
-    ></div>`;
+    ></div>${this.scrollbars ? this.renderScrollbars() : nothing}`;
+    }
+    renderScrollbars() {
+        const controller = this.bars;
+        const bars = controller.bars;
+        const shown = controller.shown;
+        const facts = (bar) => bar
+            ? `--scroll-area-thumb-fraction: ${bar.thumb}; --scroll-area-scroll-fraction: ${bar.along}`
+            : nothing;
+        const vertical = bars?.vertical.drawn === true;
+        const horizontal = bars?.horizontal.drawn === true;
+        return html `<div
+        part="scrollbar scrollbar-vertical${vertical && shown ? ' scrollbar-visible' : ''}"
+        aria-hidden="true"
+        ?hidden=${!vertical}
+        style=${facts(bars?.vertical)}
+        @pointerdown=${controller.handleVerticalDown}
+        @pointermove=${controller.handleDragMove}
+        @pointerup=${controller.handleDragEnd}
+        @pointercancel=${controller.handleDragEnd}
+        @lostpointercapture=${controller.handleDragEnd}
+        @pointerenter=${controller.handleBarEnter}
+        @pointerleave=${controller.handleBarLeave}
+      >
+        <div part="thumb thumb-vertical"></div>
+      </div>
+      <div
+        part="scrollbar scrollbar-horizontal${horizontal && shown ? ' scrollbar-visible' : ''}"
+        aria-hidden="true"
+        ?hidden=${!horizontal}
+        style=${facts(bars?.horizontal)}
+        @pointerdown=${controller.handleHorizontalDown}
+        @pointermove=${controller.handleDragMove}
+        @pointerup=${controller.handleDragEnd}
+        @pointercancel=${controller.handleDragEnd}
+        @lostpointercapture=${controller.handleDragEnd}
+        @pointerenter=${controller.handleBarEnter}
+        @pointerleave=${controller.handleBarLeave}
+      >
+        <div part="thumb thumb-horizontal"></div>
+      </div>
+      <div
+        part="corner"
+        aria-hidden="true"
+        ?hidden=${!(vertical && horizontal)}
+      ></div>`;
     }
 };
+__decorate([
+    property({ attribute: 'hide-delay', type: Number })
+], HelixHeadlessScrollArea.prototype, "hideDelay", void 0);
 __decorate([
     property()
 ], HelixHeadlessScrollArea.prototype, "label", void 0);
+__decorate([
+    property()
+], HelixHeadlessScrollArea.prototype, "orientation", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixHeadlessScrollArea.prototype, "scrollbars", void 0);
 __decorate([
     state()
 ], HelixHeadlessScrollArea.prototype, "more", void 0);

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

@@ -0,0 +1,111 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+import { type Axis, type Scrollbars } from './scrollbar.js';
+/** What one drawn scrollbar shows: whether it is there, and its thumb's facts. */
+export interface Bar {
+    /** Whether the axis has a scrollbar at all. See `hasScrollbar`. */
+    drawn: boolean;
+    /** How far along the axis is scrolled, from 0 to 1. */
+    along: number;
+    /** The share of the track the thumb covers, from 0 to 1. */
+    thumb: number;
+}
+/** What the controller needs of the scroll area it serves. */
+export interface ScrollbarOptions {
+    /** The box that scrolls, or null before it renders. */
+    box: () => HTMLElement | null;
+    /** The host's `hide-delay`, in milliseconds. */
+    hideDelay: () => number;
+    /** The host's `scrollbars`, or undefined for the browser's own. */
+    mode: () => Scrollbars | undefined;
+    /** Sends a `scrollend` from the host, for the one a drag held back. */
+    scrollEnd: () => void;
+}
+/**
+ * The scrollbars a scroll area draws under `scrollbars`: what each shows, when
+ * they show, and the thumb a pointer drags.
+ *
+ * **A controller, so the element only draws.** It holds the drag, whether the
+ * pointer is over the area or a scrollbar, and the wait that puts the
+ * scrollbars away, and asks the host to render when any of them changes.
+ *
+ * **A drag sends one `scrollend`.** The thumb moves the content by
+ * `scrollTo`, and the browser ends each of those steps with a `scrollend` of
+ * its own, so a drag sent a burst of them. While a thumb is held they are held
+ * back, and once it is let go one is sent: the browser's own for the last
+ * step, or the held one where none comes.
+ */
+export declare class ScrollbarController implements ReactiveController {
+    /** What each scrollbar shows, measured, and `undefined` until it has been. */
+    bars: Record<Axis, Bar> | undefined;
+    /** Whether the content moved, or the pointer left, within the hide delay. */
+    active: boolean;
+    /** Whether the pointer is over the scroll area. */
+    hovered: boolean;
+    /** Whether the pointer is over a scrollbar. */
+    over: boolean;
+    /** The thumb being dragged, if one is. */
+    private drag;
+    /** Whether a `scrollend` was held back by a drag and not sent yet. */
+    private heldEnd;
+    private readonly host;
+    private readonly options;
+    /** Puts the scrollbars away once nothing has moved for the hide delay. */
+    private readonly hide;
+    /** Waits after a drag for the browser's last `scrollend`. */
+    private readonly settle;
+    constructor(host: ReactiveControllerHost & HTMLElement, options: ScrollbarOptions);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    /** Whether a thumb is held. */
+    get dragging(): boolean;
+    /** Whether the scrollbars that are drawn are showing at this moment. */
+    get shown(): boolean;
+    /**
+     * 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.
+     *
+     * Asks for a render only on a change, so a scroll that moves no thumb
+     * renders nothing.
+     */
+    read(box: HTMLElement): void;
+    /**
+     * Shows the scrollbars and starts the wait that puts them away again, under
+     * `scroll` and `hover`.
+     */
+    wake(): void;
+    /**
+     * Whether to hold back a `scrollend` the viewport sent: true while a thumb is
+     * held. One arriving after the drag ends is the browser's last, and stands
+     * for the one held back.
+     */
+    holdsScrollEnd(): boolean;
+    /** Writes one of the moment's facts, and renders where it changed. */
+    private set;
+    /** 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;
+    readonly handleVerticalDown: (event: PointerEvent) => void;
+    readonly handleHorizontalDown: (event: PointerEvent) => void;
+    /** Moves the content with a dragged thumb. Nothing while no thumb is held. */
+    readonly handleDragMove: (event: PointerEvent) => void;
+    /**
+     * Lets go of the thumb. A `scrollend` the drag held back goes out once the
+     * browser's last one has had a frame or two to arrive and has not.
+     */
+    readonly handleDragEnd: () => void;
+    readonly handleBarEnter: () => void;
+    readonly handleBarLeave: () => void;
+    private readonly handleEnter;
+    private readonly handleLeave;
+}

package/dist/scroll-area/scrollbar-controller.js

@@ -0,0 +1,172 @@
+import { capturePointer, DelayController, isRtl } from '@fusion.dev/helix-core';
+import { alongTrack, extentOf, hasScrollbar, offsetAt, scrollFraction, scrollPerPixel, showsScrollbar, thumbFraction, } from './scrollbar.js';
+const SETTLE = 100;
+export class ScrollbarController {
+    constructor(host, options) {
+        this.active = false;
+        this.hovered = false;
+        this.over = false;
+        this.heldEnd = false;
+        this.handleVerticalDown = (event) => {
+            this.grab(event, 'vertical');
+        };
+        this.handleHorizontalDown = (event) => {
+            this.grab(event, 'horizontal');
+        };
+        this.handleDragMove = (event) => {
+            const drag = this.drag;
+            const box = this.options.box();
+            if (!drag || !box) {
+                return;
+            }
+            const pointer = drag.axis === 'vertical' ? event.clientY : event.clientX;
+            this.scrollAlong(box, drag.axis, drag.from + (pointer - drag.pointer) * drag.sign * drag.perPixel);
+        };
+        this.handleDragEnd = () => {
+            if (!this.drag) {
+                return;
+            }
+            this.drag = undefined;
+            if (this.heldEnd) {
+                this.settle.start(SETTLE, () => {
+                    if (this.heldEnd) {
+                        this.heldEnd = false;
+                        this.options.scrollEnd();
+                    }
+                });
+            }
+            this.wake();
+            this.host.requestUpdate();
+        };
+        this.handleBarEnter = () => {
+            this.set('over', true);
+        };
+        this.handleBarLeave = () => {
+            this.set('over', false);
+            this.wake();
+        };
+        this.handleEnter = () => {
+            this.set('hovered', true);
+        };
+        this.handleLeave = () => {
+            this.set('hovered', false);
+            if (this.options.mode() === 'hover') {
+                this.wake();
+            }
+        };
+        this.host = host;
+        this.options = options;
+        this.hide = new DelayController(host, { renders: false });
+        this.settle = new DelayController(host, { renders: false });
+        host.addController(this);
+    }
+    hostConnected() {
+        this.host.addEventListener('pointerenter', this.handleEnter);
+        this.host.addEventListener('pointerleave', this.handleLeave);
+    }
+    hostDisconnected() {
+        this.host.removeEventListener('pointerenter', this.handleEnter);
+        this.host.removeEventListener('pointerleave', this.handleLeave);
+        this.drag = undefined;
+        this.heldEnd = false;
+        this.active = false;
+        this.hovered = false;
+        this.over = false;
+    }
+    get dragging() {
+        return this.drag !== undefined;
+    }
+    get shown() {
+        const mode = this.options.mode();
+        return mode
+            ? showsScrollbar(mode, {
+                active: this.active,
+                held: this.over || this.drag !== undefined,
+                hovered: this.hovered,
+            })
+            : false;
+    }
+    read(box) {
+        const mode = this.options.mode() ?? 'auto';
+        const style = getComputedStyle(box);
+        const bar = (axis, overflow) => {
+            const extent = extentOf(box, axis);
+            return {
+                along: scrollFraction(extent),
+                drawn: hasScrollbar(mode, !['clip', 'hidden', 'visible'].includes(overflow), extent.offset > 1 || extent.client < extent.scroll - 1),
+                thumb: thumbFraction(extent),
+            };
+        };
+        const next = {
+            horizontal: bar('horizontal', style.overflowX),
+            vertical: bar('vertical', style.overflowY),
+        };
+        if (JSON.stringify(next) !== JSON.stringify(this.bars)) {
+            this.bars = next;
+            this.host.requestUpdate();
+        }
+    }
+    wake() {
+        const mode = this.options.mode();
+        if (mode !== 'scroll' && mode !== 'hover') {
+            return;
+        }
+        this.set('active', true);
+        this.hide.start(this.options.hideDelay(), () => {
+            this.set('active', false);
+        });
+    }
+    holdsScrollEnd() {
+        if (this.drag) {
+            this.heldEnd = true;
+            return true;
+        }
+        if (this.heldEnd) {
+            this.heldEnd = false;
+            this.settle.cancel();
+        }
+        return false;
+    }
+    set(key, value) {
+        if (this[key] !== value) {
+            this[key] = value;
+            this.host.requestUpdate();
+        }
+    }
+    scrollAlong(box, axis, offset) {
+        box.scrollTo(axis === 'vertical'
+            ? { behavior: 'instant', top: offset }
+            : { behavior: 'instant', left: isRtl(box) ? -offset : offset });
+    }
+    grab(event, axis) {
+        const box = this.options.box();
+        const bar = event.currentTarget;
+        const thumb = bar.querySelector('[part~="thumb"]');
+        if (event.button !== 0 || !box || !thumb) {
+            return;
+        }
+        event.preventDefault();
+        const vertical = axis === 'vertical';
+        const rtl = !vertical && isRtl(box);
+        const track = bar.getBoundingClientRect();
+        const held = thumb.getBoundingClientRect();
+        const length = vertical ? track.height : track.width;
+        const size = vertical ? held.height : held.width;
+        const extent = extentOf(box, axis);
+        const pointer = vertical ? event.clientY : event.clientX;
+        let from = extent.offset;
+        if (!thumb.contains(event.target)) {
+            from = offsetAt(extent, alongTrack(pointer, track, axis, rtl), length, size);
+            this.scrollAlong(box, axis, from);
+        }
+        this.drag = {
+            axis,
+            from,
+            perPixel: scrollPerPixel(extent, length, size),
+            pointer,
+            sign: rtl ? -1 : 1,
+        };
+        capturePointer(bar, event.pointerId);
+        this.host.requestUpdate();
+    }
+}