@fusion.dev/helix-headless 0.158.0 → 0.160.0

package/dist/format-date/options.d.ts

@@ -5,7 +5,9 @@
 export interface Asked {
     dateStyle?: 'full' | 'long' | 'medium' | 'short' | undefined;
     day?: 'numeric' | '2-digit' | undefined;
+    dayPeriod?: 'long' | 'narrow' | 'short' | undefined;
     era?: 'long' | 'narrow' | 'short' | undefined;
+    fractionalSecondDigits?: 1 | 2 | 3 | undefined;
     hour?: 'numeric' | '2-digit' | undefined;
     hourCycle?: 'h11' | 'h12' | 'h23' | 'h24' | undefined;
     minute?: 'numeric' | '2-digit' | undefined;
@@ -13,7 +15,7 @@ export interface Asked {
     second?: 'numeric' | '2-digit' | undefined;
     timeStyle?: 'full' | 'long' | 'medium' | 'short' | undefined;
     timeZone?: string | undefined;
-    timeZoneName?: 'long' | 'short' | undefined;
+    timeZoneName?: 'long' | 'longGeneric' | 'longOffset' | 'short' | 'shortGeneric' | 'shortOffset' | undefined;
     weekday?: 'long' | 'short' | 'narrow' | undefined;
     year?: 'numeric' | '2-digit' | undefined;
 }

package/dist/format-date/options.js

@@ -1,5 +1,8 @@
 import { FIELD } from './fields.js';
-const FIELDS = Object.keys(FIELD);
+const FIELDS = [
+    ...Object.keys(FIELD).filter((one) => one !== 'fractionalSecond'),
+    'fractionalSecondDigits',
+];
 export const formatOptions = (asked, dateOnly = false) => {
     const options = {
         hourCycle: asked.hourCycle,

package/dist/format-date/root/format-date-root.d.ts

@@ -1,4 +1,4 @@
-import { type DateCalendar, HelixElement } from '@fusion.dev/helix-core';
+import { type DateCalendar, HelixElement, type MonthCalendar } from '@fusion.dev/helix-core';
 import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 /**
  * @summary A timestamp, formatted for the user's locale.
@@ -45,8 +45,8 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  *
  * **A date is written in a calendar Date Picker draws**: the locale's own
  * where its months are the Gregorian months, as `th-TH` writes 2569 for 2026,
- * and `gregory` where they are not, as for `fa-IR`. `calendar` picks one of
- * the five.
+ * and `gregory` where they are not, as for `fa-IR`. `calendar` picks any of
+ * them, `persian` and `hebrew` included.
  *
  * @since 0.1.0
  * @status stable
@@ -57,6 +57,7 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  * @csspart day - The day of the month, with `fields`.
  * @csspart day-period - AM or PM, or the locale's word for the part of the day, with `fields`.
  * @csspart era - The era, such as AD, with `fields` and `era`.
+ * @csspart fractional-second - The fraction of a second, with `fields` and `fractional-second-digits`.
  * @csspart hour - The hour, with `fields`.
  * @csspart minute - The minute, with `fields`.
  * @csspart month - The month, with `fields`.
@@ -72,14 +73,16 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 export declare class HelixHeadlessFormatDate extends HelixElement {
     /**
      * The calendar a date is written in: `gregory`, `buddhist`, `japanese`,
-     * `roc`, or `iso8601`, the calendars Date Picker and Date Input draw.
+     * `roc`, or `iso8601`, or a calendar with months of its own, such as
+     * `persian`, `hebrew`, `islamic-umalqura`, `ethiopic`, or `chinese`: every
+     * calendar Date Picker and Date Input draw.
      *
-     * Absent is the locale's own where it is one of the five, such as
-     * `buddhist` for `th-TH`, and `gregory` for every other, such as `persian`
-     * for `fa-IR`, so a date written here reads as the same date a Date Picker
-     * beside it shows.
+     * Absent is the locale's own where its months are the Gregorian months,
+     * such as `buddhist` for `th-TH`, and `gregory` for every other, such as
+     * `persian` for `fa-IR`, so a date written here reads as the same date a
+     * Date Picker beside it shows. Write `calendar="persian"` for Mehr 14, 1405.
      */
-    calendar?: DateCalendar;
+    calendar?: DateCalendar | MonthCalendar;
     /**
      * The timestamp, in any format `Date` can parse.
      *
@@ -107,6 +110,12 @@ export declare class HelixHeadlessFormatDate extends HelixElement {
      * How the day of the month is written, where a date is shown.
      */
     day?: 'numeric' | '2-digit';
+    /**
+     * Writes the part of the day in words, such as "in the morning" or "at
+     * night", in its `long`, `short`, or `narrow` form, where `hour` is on a
+     * twelve-hour clock.
+     */
+    dayPeriod?: 'long' | 'narrow' | 'short';
     /**
      * Shows how long ago the timestamp was, in a compact form such as "3h", in
      * place of the date.
@@ -130,6 +139,11 @@ export declare class HelixHeadlessFormatDate extends HelixElement {
      * way.
      */
     fields?: boolean;
+    /**
+     * How many digits of a fraction of a second to write after `second`: 1, 2,
+     * or 3, as in 09:41:07.250.
+     */
+    fractionalSecondDigits?: 1 | 2 | 3;
     /**
      * Draws an `elapsed` or `relative` reading once and leaves it, where it
      * would otherwise move on as it goes stale.
@@ -206,9 +220,11 @@ export declare class HelixHeadlessFormatDate extends HelixElement {
      */
     timeZone?: string;
     /**
-     * Shows the name of the time zone, in its `long` or `short` form.
+     * Shows the name of the time zone: `long` or `short`, as Pacific Daylight
+     * Time or PDT, `longOffset` or `shortOffset`, as GMT-07:00 or GMT-7, or
+     * `longGeneric` or `shortGeneric`, as Pacific Time or PT.
      */
-    timeZoneName?: 'long' | 'short';
+    timeZoneName?: 'long' | 'longGeneric' | 'longOffset' | 'short' | 'shortGeneric' | 'shortOffset';
     /**
      * How the weekday is written, where one is shown.
      */

package/dist/format-date/root/format-date-root.js

@@ -132,6 +132,9 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessFormatDate.prototype, "day", void 0);
+__decorate([
+    property({ attribute: 'day-period' })
+], HelixHeadlessFormatDate.prototype, "dayPeriod", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessFormatDate.prototype, "elapsed", void 0);
@@ -141,6 +144,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessFormatDate.prototype, "fields", void 0);
+__decorate([
+    property({ attribute: 'fractional-second-digits', type: Number })
+], HelixHeadlessFormatDate.prototype, "fractionalSecondDigits", void 0);
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessFormatDate.prototype, "frozen", void 0);

package/dist/lightbox/item/lightbox-item.d.ts

@@ -11,7 +11,8 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * Each item is a `group` with the role description `slide`, named by its
  * `label` or, without one, by its place in the set, such as "2 of 5", as the
  * APG carousel pattern names a slide. The lightbox supplies both words, so they
- * are translated on the lightbox.
+ * are translated on the lightbox. A `description`, while there is one,
+ * describes the group, so a screen reader says it with the name.
  *
  * An item that is not current is hidden and stays in the DOM, as a `TabPanel`
  * does. Crawlers can read it, it is in the server-rendered markup, and an
@@ -56,6 +57,11 @@ export declare class HelixHeadlessLightboxItem extends HelixElement {
      * The item's identifier. The root compares its `active` value against it.
      */
     value: string;
+    /** Whether anything is slotted into `description`, which then describes the group. */
+    private described;
+    /** Reads whether the `description` slot holds anything. */
+    private readonly readDescription;
+    protected firstUpdated(changed: PropertyValues): void;
     /**
      * Mirrors the shown state where a stylesheet can select on it.
      *

package/dist/lightbox/item/lightbox-item.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement, HelixElement } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 let HelixHeadlessLightboxItem = class HelixHeadlessLightboxItem extends HelixElement {
     constructor() {
         super(...arguments);
@@ -15,6 +15,15 @@ let HelixHeadlessLightboxItem = class HelixHeadlessLightboxItem extends HelixEle
         this.position = '';
         this.roleLabel = '';
         this.value = '';
+        this.described = false;
+        this.readDescription = () => {
+            const slot = this.renderRoot.querySelector('slot[name="description"]');
+            this.described = (slot?.assignedNodes() ?? []).some((node) => node.nodeType === Node.ELEMENT_NODE || (node.textContent ?? '').trim() !== '');
+        };
+    }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.readDescription();
     }
     willUpdate(changed) {
         super.willUpdate(changed);
@@ -26,10 +35,11 @@ let HelixHeadlessLightboxItem = class HelixHeadlessLightboxItem extends HelixEle
       role="group"
       aria-roledescription=${this.roleLabel || nothing}
       aria-label=${this.label || this.position || nothing}
+      aria-describedby=${this.described ? 'description' : nothing}
       ?hidden=${!this.current}
     >
       <slot></slot>
-      <slot name="description"></slot>
+      <slot id="description" name="description" @slotchange=${this.readDescription}></slot>
     </div>`;
     }
 };
@@ -48,6 +58,9 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessLightboxItem.prototype, "value", void 0);
+__decorate([
+    state()
+], HelixHeadlessLightboxItem.prototype, "described", void 0);
 HelixHeadlessLightboxItem = __decorate([
     customElement('helix-headless-lightbox-item')
 ], HelixHeadlessLightboxItem);

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

@@ -1,4 +1,4 @@
-import { CommandController, FocusScopeController, HelixElement, SwipeController } from '@fusion.dev/helix-core';
+import { CommandController, FocusScopeController, HelixElement, OpenPhaseController, SwipeController } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 declare const HelixHeadlessLightbox_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerActiveInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & typeof HelixElement;
 /**
@@ -25,9 +25,10 @@ declare const HelixHeadlessLightbox_base: (new (...args: any[]) => import("@fusi
  * buttons that send `--previous`, `--next` and `--close`.
  *
  * **Set `max-zoom` to let a reader zoom into the shown item**, such as `3`.
- * Two fingers pinch it, a double click or a double tap zooms all the way in
- * about the point pressed and back out, and once zoomed one pointer drags it
- * about. `+` and `-` zoom in and out from the keyboard, and `0` puts it back.
+ * Two fingers pinch it, and so does a trackpad pinch or the wheel with Ctrl
+ * held, about the point under the pointer. A double click or a double tap
+ * zooms all the way in about the point pressed and back out, and once zoomed
+ * one pointer drags it about and the wheel moves it. `+` and `-` zoom in and out from the keyboard, and `0` puts it back.
  * The scale and the offset are on the `viewport` part as `--lightbox-zoom`,
  * `--lightbox-pan-x` and `--lightbox-pan-y`, written only while zoomed, and a
  * swipe moves to the next item only while the item is at its own size. With
@@ -109,6 +110,8 @@ declare const HelixHeadlessLightbox_base: (new (...args: any[]) => import("@fusi
  * @cssproperty --lightbox-pan-y - How far the zoomed item is moved down from the middle of the viewport, in pixels. Written only while zoomed.
  * @cssproperty --lightbox-zoom - The scale the shown item is zoomed to, such as `2`. Written only while zoomed.
  *
+ * @cssstate entering - From the moment the viewer opens until its entrance has finished.
+ * @cssstate exiting - From the moment the viewer closes until its exit has finished.
  * @cssstate fullscreen - While the viewer fills the screen.
  * @cssstate idle - The user has been still long enough for the controls to hide.
  * @cssstate open - While the viewer is open.
@@ -225,6 +228,7 @@ export declare class HelixHeadlessLightbox extends HelixHeadlessLightbox_base {
     private quietZoom;
     protected readonly swipes: SwipeController;
     protected readonly scope: FocusScopeController;
+    protected readonly phases: OpenPhaseController;
     private readonly zoomer;
     /** Writes the zoom on the viewport, and nothing at the item's own size. */
     private drawZoom;

package/dist/lightbox/root/lightbox-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 { auditName, CommandController, customElement, DelayController, deepActiveElement, deepContains, drawDismiss, drawDismissGlyph, FocusScopeController, FullscreenController, formatWords, HelixElement, hostAria, IdleController, inlineStep, isRtl, keyClaimed, lockScroll, MixinControllerActive, MixinControllerOpen, resolveActiveItem, SwipeController, swipeStep, unlockScroll, whenHydrated, words, } from '@fusion.dev/helix-core';
+import { auditName, CommandController, customElement, DelayController, deepActiveElement, deepContains, drawDismiss, drawDismissGlyph, FocusScopeController, FullscreenController, formatWords, HelixElement, hostAria, IdleController, inlineStep, isRtl, keyClaimed, lockScroll, MixinControllerActive, MixinControllerOpen, OpenPhaseController, resolveActiveItem, SwipeController, swipeStep, unlockScroll, whenHydrated, words, } from '@fusion.dev/helix-core';
 import { caretLeft, caretRight, minus, plus } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -63,6 +63,14 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
             ],
             surface: () => this.dialog,
         });
+        this.phases = new OpenPhaseController(this, {
+            mark: {
+                entering: (on) => this.toggleState('entering', on),
+                exiting: (on) => this.toggleState('exiting', on),
+            },
+            open: () => this.open,
+            surface: () => this.dialog,
+        });
         this.zoomer = new ZoomController(this, {
             max: () => (this.open ? this.maxZoom : 1),
             onChange: (scale, pan) => this.drawZoom(scale, pan),

package/dist/lightbox/zoom-controller.d.ts

@@ -12,10 +12,12 @@ export interface ZoomOptions {
  * Pinch, double press and drag to zoom into the item a viewer shows, and to
  * move about it once zoomed.
  *
- * Two fingers scale the item about the point between them. A double press, a
- * double click or a double tap, zooms all the way in about the point pressed,
- * and back out again. One pointer dragged across a zoomed item moves it, never
- * so far that an edge comes inside the box. What it reports is a scale and an
+ * Two fingers scale the item about the point between them. A trackpad pinch,
+ * which the browser sends as a wheel with Ctrl held, and the wheel with Ctrl
+ * held scale it about the pointer. A double press, a double click or a double
+ * tap, zooms all the way in about the point pressed, and back out again. One
+ * pointer dragged across a zoomed item moves it, never so far that an edge
+ * comes inside the box, and so does the wheel without Ctrl. What it reports is a scale and an
  * offset from the middle of the box; drawing them is the caller's.
  */
 export declare class ZoomController implements ReactiveController {
@@ -58,6 +60,13 @@ export declare class ZoomController implements ReactiveController {
     private readonly handleDown;
     private readonly handleMove;
     private readonly handleUp;
+    /**
+     * A wheel with Ctrl held, which is also how the browser sends a trackpad
+     * pinch, scales the item about the pointer. Without Ctrl, a wheel over a
+     * zoomed item moves it. Over an item at its own size, a plain wheel is left
+     * to the page.
+     */
+    private readonly handleWheel;
     /** A double press zooms all the way in about the point, or back out. */
     private readonly handleDouble;
     private release;

package/dist/lightbox/zoom-controller.js

@@ -48,6 +48,21 @@ export class ZoomController {
             }
             this.begin();
         };
+        this.handleWheel = (event) => {
+            if (this.options.max() <= 1 || !this.inside(event)) {
+                return;
+            }
+            const unit = event.deltaMode === 1 ? 16 : event.deltaMode === 2 ? 400 : 1;
+            if (event.ctrlKey) {
+                event.preventDefault();
+                this.zoomTo(this.scale * Math.exp((-event.deltaY * unit) / 250), this.offset(event));
+                return;
+            }
+            if (this.scale > 1) {
+                event.preventDefault();
+                this.panBy({ x: -event.deltaX * unit, y: -event.deltaY * unit });
+            }
+        };
         this.handleDouble = (event) => {
             if (this.options.max() <= 1 || !this.inside(event)) {
                 return;
@@ -69,10 +84,12 @@ export class ZoomController {
     hostConnected() {
         this.host.addEventListener('pointerdown', this.handleDown);
         this.host.addEventListener('dblclick', this.handleDouble);
+        this.host.addEventListener('wheel', this.handleWheel, { passive: false });
     }
     hostDisconnected() {
         this.host.removeEventListener('pointerdown', this.handleDown);
         this.host.removeEventListener('dblclick', this.handleDouble);
+        this.host.removeEventListener('wheel', this.handleWheel);
         this.release();
     }
     zoomTo(scale, at = { x: 0, y: 0 }) {

package/dist/listbox/root/listbox-root.js

@@ -98,6 +98,11 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
                 }
                 else if (event.key === ' ') {
                     event.preventDefault();
+                    const at = this.currentValue || shown.find((option) => !option.disabled)?.value;
+                    if (at) {
+                        this.activeValue = at;
+                        this.choose(at);
+                    }
                 }
                 return;
             }

package/dist/notifications/notification/notification.d.ts

@@ -56,6 +56,7 @@ declare const HelixHeadlessNotification_base: (new (...args: any[]) => import("@
  * @csspart time-day - Format Date's `day`, forwarded for a time drawn as fields. An elapsed time draws none.
  * @csspart time-day-period - Format Date's `day-period`, forwarded for a time drawn as fields. An elapsed time draws none.
  * @csspart time-era - Format Date's `era`, forwarded for a time drawn as fields. An elapsed time draws none.
+ * @csspart time-fractional-second - Format Date's `fractional-second`, forwarded for a time drawn as fields. An elapsed time draws none.
  * @csspart time-hour - Format Date's `hour`, forwarded for a time drawn as fields. An elapsed time draws none.
  * @csspart time-minute - Format Date's `minute`, forwarded for a time drawn as fields. An elapsed time draws none.
  * @csspart time-month - Format Date's `month`, forwarded for a time drawn as fields. An elapsed time draws none.

package/dist/notifications/notification/notification.js

@@ -104,7 +104,8 @@ let HelixHeadlessNotification = class HelixHeadlessNotification extends MixinDis
     renderTime() {
         const stamp = this.tag('format-date');
         return html `<${stamp}
-      exportparts="time, day: time-day, day-period: time-day-period, era: time-era, hour: time-hour,
+      exportparts="time, day: time-day, day-period: time-day-period, era: time-era,
+        fractional-second: time-fractional-second, hour: time-hour,
         minute: time-minute, month: time-month, second: time-second,
         time-zone-name: time-time-zone-name, weekday: time-weekday, year: time-year"
       elapsed

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

@@ -28,6 +28,10 @@ declare const HelixHeadlessSlider_base: (new (...args: any[]) => import("@fusion
  * `min-steps-between-thumbs` keeps them that many steps apart, and the readout
  * joins the two as `range-text` writes them.
  *
+ * A press on a range's track takes the nearest thumb to the point pressed,
+ * and moving the pointer drags it, as React Aria's and Web Awesome's sliders
+ * do. The thumb takes focus, and `change` is sent as the press ends.
+ *
  * `origin` sets where a single thumb's fill starts: at `min`, at the middle of
  * the track, or at `max`. A balance or an offset from zero fills from the
  * middle, as Zag's slider `origin` does. The fill's ends are published as
@@ -52,7 +56,7 @@ declare const HelixHeadlessSlider_base: (new (...args: any[]) => import("@fusion
  * |---|---|
  * | Right, Up | Moves the thumb up by `step`. |
  * | Left, Down | Moves the thumb down by `step`. |
- * | Page Up, Page Down | Moves the thumb by a larger step. |
+ * | Page Up, Page Down | Moves the thumb by `page-step`, or by the platform's larger step where it is not set. |
  * | Home, End | Moves the thumb to its lowest or highest value. |
  *
  * Under `readonly` none of these move the thumb, and Tab still reaches it.
@@ -97,6 +101,8 @@ declare const HelixHeadlessSlider_base: (new (...args: any[]) => import("@fusion
  * @cssproperty --slider-marker-at - Where one marker sits, as a percentage of the track.
  * @cssproperty --slider-to - Where the filled span ends, as a fraction of the track, 0 to 1: a range's upper thumb, or the farther of a single thumb and its `origin`.
  *
+ * @cssstate dragging - A thumb is being dragged, by its thumb or from a press on the track.
+ * @cssstate focus-visible - A thumb has focus that the keyboard brought, where the browser draws a focus ring.
  * @cssstate invalid - The slider has an error to show, from the browser's validation or from your `feedback`.
  */
 export declare class HelixHeadlessSlider extends HelixHeadlessSlider_base {
@@ -193,6 +199,12 @@ export declare class HelixHeadlessSlider extends HelixHeadlessSlider_base {
      * between its thumbs and ignores it.
      */
     origin?: 'center' | 'end' | 'start';
+    /**
+     * How far Page Up and Page Down move a thumb, in the slider's own units, as
+     * React Aria's `pageSize` and Zag's `largeStep` do. Absent leaves the keys
+     * to the platform, which moves a tenth of the track.
+     */
+    pageStep?: number;
     /**
      * Adds a second thumb, so the value is a pair.
      *
@@ -298,13 +310,52 @@ export declare class HelixHeadlessSlider extends HelixHeadlessSlider_base {
     /** Where one value sits along the track, as a fraction of it. */
     private along;
     private readonly handleInput;
+    /** Whether a pointer is dragging a thumb, which `:state(dragging)` says. */
+    private dragging;
+    /** Ends a drag when its pointer lifts, wherever it lifts. */
+    private readonly endDrag;
+    private startDrag;
+    /**
+     * Half a thumb, which is where the thumb's center stops short of each end
+     * of its input. Measured off the thumb's length as the stylesheet sets it,
+     * or a platform thumb's 16 pixels where none does.
+     */
+    private thumbInset;
+    /**
+     * The value under a pointer, along a thumb's input, less `inset` at each
+     * end. Upward on a vertical track, and from the right on a right-to-left
+     * page.
+     */
+    private valueAt;
+    /** Moves one of a range's thumbs, kept between its neighbors, and says whether it moved. */
+    private moveThumb;
+    /**
+     * A press on the field: on a thumb, the start of the platform's own drag,
+     * and on a range's track, the nearest thumb taken to the point and dragged
+     * from there.
+     *
+     * **A range's inputs take presses on their thumbs only**, being stacked on
+     * one track, so a press beside a thumb reached no input at all and did
+     * nothing. Measured before this: a press at 90 on a range holding 20 and 60
+     * left it at 20 and 60. React Aria's and Web Awesome's sliders move the
+     * nearest thumb there.
+     */
+    private readonly handlePress;
+    disconnectedCallback(): void;
     /** Relayed, because `change` does not cross a shadow boundary on its own. */
     private readonly handleChange;
     /**
-     * Keeps a read-only thumb still under the keys that move it. Tab and every
-     * other key pass, so focus moves on.
+     * Keeps a read-only thumb still under the keys that move it, and moves a
+     * thumb by `page-step` under Page Up and Page Down. Tab and every other key
+     * pass, so focus moves on.
      */
     private readonly handleKeydown;
+    /**
+     * Says whether the keyboard brought focus to a thumb, as
+     * `:state(focus-visible)` on the host, where a stylesheet outside can reach
+     * the whole control: a ring around the track, or the readout in bold.
+     */
+    private readonly handleFocusChange;
     /**
      * Reports the value: one entry, or for a named range one entry per thumb.
      * The joined pair is the state the browser restores.

package/dist/slider/root/slider-root.js

@@ -4,9 +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, customElement, formatNumber, formatWords, HelixFormElement, MixinControllerValue, MixinField, reportValues, restoreValue, words, wordsLocale, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, formatNumber, formatWords, HelixFormElement, isRtl, MixinControllerValue, MixinField, reportValues, restoreValue, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 const SLIDER_KEYS = new Set([
     'ArrowDown',
     'ArrowLeft',
@@ -63,6 +63,54 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
             this.requestValue(next);
             restoreValue(control, this.value);
         };
+        this.dragging = false;
+        this.endDrag = () => {
+            this.dragging = false;
+            window.removeEventListener('pointerup', this.endDrag);
+            window.removeEventListener('pointercancel', this.endDrag);
+        };
+        this.handlePress = (event) => {
+            if (this.isDisabled || this.readOnly || event.button !== 0) {
+                return;
+            }
+            const inputs = [...this.renderRoot.querySelectorAll('input[part="control"]')];
+            if (inputs.includes(event.composedPath()[0])) {
+                this.startDrag();
+                return;
+            }
+            const first = inputs[0];
+            const field = event.currentTarget;
+            if (!this.range || !first) {
+                return;
+            }
+            const inset = this.thumbInset(field);
+            const wanted = this.valueAt(event, first, inset);
+            let at = 0;
+            this.points.forEach((one, index) => {
+                const distance = Math.abs(one - wanted);
+                const best = Math.abs((this.points[at] ?? 0) - wanted);
+                if (distance < best || (distance === best && wanted > one)) {
+                    at = index;
+                }
+            });
+            event.preventDefault();
+            this.moveThumb(at, wanted);
+            inputs[at]?.focus({ focusVisible: false, preventScroll: true });
+            this.startDrag();
+            field.setPointerCapture?.(event.pointerId);
+            const move = (next) => {
+                this.moveThumb(at, this.valueAt(next, first, inset));
+            };
+            const end = () => {
+                field.removeEventListener('pointermove', move);
+                field.removeEventListener('pointerup', end);
+                field.removeEventListener('pointercancel', end);
+                this.announceChange();
+            };
+            field.addEventListener('pointermove', move);
+            field.addEventListener('pointerup', end);
+            field.addEventListener('pointercancel', end);
+        };
         this.handleChange = (event) => {
             event.stopPropagation();
             if (!this.readOnly) {
@@ -72,7 +120,31 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
         this.handleKeydown = (event) => {
             if (this.readOnly && SLIDER_KEYS.has(event.key)) {
                 event.preventDefault();
+                return;
+            }
+            const by = this.pageStep;
+            if ((event.key !== 'PageUp' && event.key !== 'PageDown') || !by || this.isDisabled) {
+                return;
             }
+            event.preventDefault();
+            const sign = event.key === 'PageUp' ? 1 : -1;
+            if (this.range) {
+                const at = Number(event.target.dataset.index ?? 0);
+                if (!this.moveThumb(at, this.settled((this.points[at] ?? this.min) + sign * by))) {
+                    return;
+                }
+            }
+            else {
+                const next = String(this.settled(Number(this.value) + sign * by));
+                if (next === this.value || !this.requestValue(next)) {
+                    return;
+                }
+            }
+            this.announceChange();
+        };
+        this.handleFocusChange = (event) => {
+            const input = event.target;
+            this.toggleState('focus-visible', event.type === 'focusin' && input.matches?.(':focus-visible') === true);
         };
         this.valueText = '';
         this.handleThumbSlot = () => {
@@ -132,6 +204,46 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
         }
         return Math.min(1, Math.max(0, (at - this.min) / span));
     }
+    startDrag() {
+        this.dragging = true;
+        window.addEventListener('pointerup', this.endDrag);
+        window.addEventListener('pointercancel', this.endDrag);
+    }
+    thumbInset(field) {
+        const probe = document.createElement('span');
+        probe.style.cssText =
+            'position:absolute;visibility:hidden;inline-size:var(--_slider-thumb-length,16px)';
+        field.append(probe);
+        const length = probe.getBoundingClientRect().width;
+        probe.remove();
+        return length / 2;
+    }
+    valueAt(event, input, inset) {
+        const box = input.getBoundingClientRect();
+        const vertical = this.orientation === 'vertical';
+        const length = vertical ? box.height : box.width;
+        const from = vertical
+            ? box.bottom - event.clientY
+            : isRtl(this)
+                ? box.right - event.clientX
+                : event.clientX - box.left;
+        const fraction = Math.min(1, Math.max(0, (from - inset) / Math.max(1, length - inset * 2)));
+        return this.settled(this.min + fraction * (this.max - this.min));
+    }
+    moveThumb(at, wanted) {
+        const points = this.points;
+        const gap = this.gap;
+        const low = at > 0 ? (points[at - 1] ?? this.min) + gap : Number.NEGATIVE_INFINITY;
+        const high = at < points.length - 1 ? (points[at + 1] ?? this.max) - gap : Number.POSITIVE_INFINITY;
+        const next = points
+            .map((one, index) => (index === at ? Math.min(high, Math.max(low, wanted)) : one))
+            .join(',');
+        return next !== points.join(',') && this.requestValue(next);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.endDrag();
+    }
     sync() {
         if (this.range && this.name) {
             reportValues(this.internals, this.name, this.points.map(String));
@@ -168,6 +280,7 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
     }
     willUpdate(changed) {
         super.willUpdate(changed);
+        this.toggleState('dragging', this.dragging);
         if (!this.hasUpdated && this.value === '') {
             this.defaultValue = this.range
                 ? `${this.min},${this.max}`
@@ -306,6 +419,9 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
             : nothing}
     <div
       part="field"
+      @focusin=${this.handleFocusChange}
+      @focusout=${this.handleFocusChange}
+      @pointerdown=${this.handlePress}
       data-markers=${this.markerValues.length > 0 ? '' : nothing}
       data-range=${this.range ? '' : nothing}
       data-thumbs=${this.thumbContent ? '' : nothing}
@@ -405,6 +521,9 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessSlider.prototype, "origin", void 0);
+__decorate([
+    property({ attribute: 'page-step', type: Number })
+], HelixHeadlessSlider.prototype, "pageStep", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessSlider.prototype, "range", void 0);
@@ -428,6 +547,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessSlider.prototype, "tooltip", void 0);
+__decorate([
+    state()
+], HelixHeadlessSlider.prototype, "dragging", void 0);
 __decorate([
     property({ attribute: 'value-text' })
 ], HelixHeadlessSlider.prototype, "valueText", void 0);