@fusion.dev/helix-headless 0.158.0 → 0.160.0

package/dist/time-input/root/time-input-root.js

@@ -4,8 +4,8 @@ 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, valueAsTime as asTime, clockLocale, customElement, formatWords, timeAsValue as fromTime, HelixFormElement, handedLocale, isClockValue, MixinControllerOpen, MixinControllerValue, MixinField, MixinPickerEditing, MixinPickerField, MixinSegmentedField, MixinTokens, timeFault, words, wordsLocale, writeClock, } from '@fusion.dev/helix-core';
-import { clock } from '@fusion.dev/helix-icons';
+import { AriaForwardController, valueAsTime as asTime, clockLocale, customElement, drawIcon, formatWords, timeAsValue as fromTime, HelixClearEvent, HelixFormElement, handedLocale, isClockValue, MixinControllerOpen, MixinControllerValue, MixinField, MixinPickerEditing, MixinPickerField, MixinSegmentedField, MixinTokens, readWrittenTime, timeFault, words, wordsLocale, writeClock, } from '@fusion.dev/helix-core';
+import { clock, x } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
@@ -19,6 +19,8 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmented
             target: () => this.partNamed('control') ?? this.segmentGroup,
         });
         this.autocomplete = '';
+        this.clearable = false;
+        this.clearLabel = 'Clear';
         this.announcesInput = true;
         this.disableTimes = '';
         this.locale = '';
@@ -34,16 +36,28 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmented
         this.timeStyle = 'local';
         this.triggerLabel = 'Choose a time';
         this.unavailableMessage = 'Choose a time that is available.';
+        this.unreadableMessage = '{mode, select, single {Enter a time as {shape}.} other {Enter times as {shape}, separated by commas.}}';
         this.draft = '';
+        this.handleTextCommit = (event) => {
+            if (this.mode !== 'multiple') {
+                const held = this.held;
+                const read = held.map((one) => this.read(one));
+                if (held.length > 0 && !held.every((one) => this.isTime(one)) && read.every(Boolean)) {
+                    this.requestValue(read.join(','));
+                }
+            }
+            this.handleCommit(event);
+        };
         this.handleDraftKey = (event) => {
             if (this.mode !== 'multiple') {
                 return;
             }
             const held = this.held;
-            if (event.key === 'Enter' && this.isTime(this.draft)) {
+            const draft = this.read(this.draft.trim());
+            if (event.key === 'Enter' && draft !== '') {
                 event.preventDefault();
-                if (!held.includes(this.draft)) {
-                    this.requestPicked([...held, this.draft].sort().join(','));
+                if (!held.includes(draft)) {
+                    this.requestPicked([...held, draft].sort().join(','));
                 }
                 this.draft = '';
             }
@@ -91,6 +105,13 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmented
                 this.returnFocus();
             }
         };
+        this.handleClear = () => {
+            if (this.value !== '' && this.requestValue('')) {
+                this.announceChange();
+                this.dispatchEvent(new HelixClearEvent());
+            }
+            void this.updateComplete.then(() => this.returnFocus());
+        };
     }
     static { this.words = 'helix-time-input'; }
     get language() {
@@ -104,7 +125,10 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmented
             .filter(Boolean);
     }
     get segmentable() {
-        return this.mode === undefined;
+        return this.mode !== 'multiple';
+    }
+    get segmentGroups() {
+        return this.mode === 'range' ? 2 : 1;
     }
     get segmentedKind() {
         return 'time';
@@ -141,6 +165,9 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmented
     get restCount() {
         return Math.max(0, this.held.length - this.shownTimes.length);
     }
+    read(text) {
+        return this.isTime(text) ? text : readWrittenTime(text, this.language, this.seconds);
+    }
     get picked() {
         const held = this.held;
         return held.length > 0 && held.every((one) => this.isTime(one)) ? held.join(',') : '';
@@ -157,9 +184,7 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmented
         const shape = this.seconds ? 'HH:mm:ss' : 'HH:mm';
         if (held.length > 0 && !held.every((one) => this.isTime(one))) {
             return (this.badInputMessage ||
-                (this.mode === undefined
-                    ? `Enter a time as ${shape}.`
-                    : `Enter times as ${shape}, separated by commas.`));
+                formatWords(this, 'unreadableMessage', { mode: this.mode ?? 'single', shape }));
         }
         const rules = { disableTimes: this.disableTimes, max: this.max, min: this.min };
         const faults = held.map((one) => timeFault(one, rules));
@@ -249,6 +274,12 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmented
         ${unsafeSVG(clock.content)}
       </svg></slot>`;
     }
+    get showsClear() {
+        return this.clearable && this.value !== '' && !this.isDisabled && !this.readOnly;
+    }
+    renderClearIcon() {
+        return html `<slot name="clear-icon">${drawIcon(x)}</slot>`;
+    }
     renderControl() {
         return html `<input
       part="control"
@@ -257,6 +288,10 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmented
       .value=${this.display}
       name=${this.name || nothing}
       placeholder=${this.mode === 'multiple' && this.held.length > 0 ? nothing : this.placeholder || nothing}
+      role="combobox"
+      aria-controls="surface"
+      aria-expanded=${this.open ? 'true' : 'false'}
+      aria-haspopup="dialog"
       autocomplete=${this.autocomplete || nothing}
       aria-describedby=${this.describedBy ?? nothing}
       aria-invalid=${this.invalidity ?? nothing}
@@ -264,13 +299,17 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmented
       ?readonly=${this.readOnly}
       ?required=${this.required}
       @blur=${this.handleBlur}
-      @change=${this.handleCommit}
+      @change=${this.handleTextCommit}
       @focus=${this.handleFocus}
       @input=${this.handleInput}
       @keydown=${this.handleDraftKey}
       @keypress=${this.handleKeypress}
     />`;
     }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        this.toggleState('blank', this.value === '');
+    }
     render() {
         return html `${this.renderLabel()}
       <div part="field" @keydown=${this.handleKeydown}>
@@ -280,6 +319,16 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmented
             : nothing}
         ${this.segmentsShown ? this.renderSegments() : this.renderControl()}
         <slot name="end"></slot>
+        ${this.showsClear
+            ? html `<button
+                part="clear"
+                type="button"
+                aria-label=${this.clearLabel}
+                @click=${this.handleClear}
+              >
+                ${this.renderClearIcon()}
+              </button>`
+            : nothing}
         <button
           part="trigger"
           type="button"
@@ -327,6 +376,13 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmented
 __decorate([
     property()
 ], HelixHeadlessTimeInput.prototype, "autocomplete", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessTimeInput.prototype, "clearable", void 0);
+__decorate([
+    words,
+    property({ attribute: 'clear-label' })
+], HelixHeadlessTimeInput.prototype, "clearLabel", void 0);
 __decorate([
     property({ attribute: 'disable-times' })
 ], HelixHeadlessTimeInput.prototype, "disableTimes", void 0);
@@ -382,6 +438,10 @@ __decorate([
     words,
     property({ attribute: 'unavailable-message' })
 ], HelixHeadlessTimeInput.prototype, "unavailableMessage", void 0);
+__decorate([
+    words,
+    property({ attribute: 'unreadable-message' })
+], HelixHeadlessTimeInput.prototype, "unreadableMessage", void 0);
 __decorate([
     state()
 ], HelixHeadlessTimeInput.prototype, "draft", void 0);

package/dist/time-picker/root/time-picker-root.d.ts

@@ -1,4 +1,4 @@
-import { HelixFormElement, type HourCycle } from '@fusion.dev/helix-core';
+import { HelixFormElement, type HourCycle, type PickerFailure } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 import '../../listbox/index.js';
 import '../../option/index.js';
@@ -51,7 +51,10 @@ declare const HelixHeadlessTimePicker_base: (new (...args: any[]) => import("@fu
  * host's `aria-label` or its `aria-labelledby`. A development build warns
  * where all four are empty. The list is described by the hint, or by the
  * message in `feedback` in its place, and carries `aria-multiselectable` with
- * a `mode` and `aria-invalid` while `feedback` says what is wrong. The wheels
+ * a `mode`. It carries `aria-invalid` while `feedback` says what is wrong,
+ * while it holds a time outside `min` and `max` or one the picker does not
+ * offer, and, for a `required` picker with no time, once the reader has
+ * chosen one or a form has refused the picker. The wheels
  * are a `group` with that name, holding one `listbox` per wheel, named "Hour",
  * "Minute", "Second" and "AM/PM" in the page's language, and each described
  * the same way.
@@ -100,7 +103,7 @@ declare const HelixHeadlessTimePicker_base: (new (...args: any[]) => import("@fu
  * @csspart list-loading - The text shown while the options load.
  * @csspart list-search - The region that holds the filter field.
  * @csspart list-search-field - The filter field.
- * @csspart option - One time in the list. It carries `data-between` inside a range.
+ * @csspart option - One time in the list. It carries `data-between` inside a range, and inside the run to the time under the pointer while a range waits for its second end.
  * @csspart option-between - A time inside a chosen range, excluding its ends, beside `option`.
  * @csspart option-description - The caption under the time's label, when there is one.
  * @csspart option-item - The row.
@@ -110,7 +113,8 @@ declare const HelixHeadlessTimePicker_base: (new (...args: any[]) => import("@fu
  * @csspart option-text - The label and the caption, as one column.
  *
  * @cssstate blank - While no time is chosen.
- * @cssstate invalid - While `invalid` is set or `feedback` says what is wrong.
+ * @cssstate invalid - While `invalid` is set, `feedback` says what is wrong, or the list carries `aria-invalid`.
+ * @cssstate range-pending - While a `range` holds its first time and waits for the second.
  */
 export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_base {
     /**
@@ -318,7 +322,18 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
      * sequence.
      */
     private readonly handleChange;
-    /** Whether a time falls inside a range, which is what gets banded. */
+    /**
+     * The time under the pointer while a range holds one end, which the list
+     * bands the range to before it is chosen, as Date Picker does.
+     */
+    private previewed;
+    private readonly handleListHover;
+    private readonly handleListLeave;
+    /**
+     * Whether a time falls inside a range, which is what gets banded: the
+     * chosen range, or while one end waits, the run to the time under the
+     * pointer.
+     */
     private between;
     /** The readings the wheels show, from the value or from `min`. */
     private get parts();
@@ -463,6 +478,13 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
      * browser points its bubble at.
      */
     private reportRequired;
+    /**
+     * What is wrong with the answer, as validity flags and a message, or nothing.
+     * `reportRequired` hands it to the form, and `failure` to the mark.
+     */
+    private get problem();
+    /** A missing time waits for the reader; a refused one is marked at once. */
+    protected get failure(): PickerFailure | undefined;
     /**
      * Reports the times to the form, one entry each.
      *

package/dist/time-picker/root/time-picker-root.js

@@ -53,6 +53,19 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
             const added = next.find((one) => !before.has(one));
             this.requestValue(added ?? '');
         };
+        this.previewed = '';
+        this.handleListHover = (event) => {
+            const option = event
+                .composedPath()
+                .find((one) => one instanceof HTMLElement && one.hasAttribute('value'));
+            const at = option?.getAttribute('value') ?? '';
+            if (this.mode === 'range' && this.held.length === 1 && at !== this.previewed) {
+                this.previewed = at;
+            }
+        };
+        this.handleListLeave = () => {
+            this.previewed = '';
+        };
         this.moveColumn = (part, to) => {
             if (this.isDisabled) {
                 return;
@@ -146,8 +159,11 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
         if (this.mode !== 'range') {
             return false;
         }
-        const [from, to] = this.held;
-        return from !== undefined && to !== undefined && at > from && at < to;
+        const [from, to = this.previewed] = this.held;
+        if (from === undefined || to === '' || this.held.length > 2) {
+            return false;
+        }
+        return at > (from < to ? from : to) && at < (from < to ? to : from);
     }
     get parts() {
         const at = valueAsSeconds(this.value) ?? valueAsSeconds(this.min) ?? 0;
@@ -218,27 +234,41 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
         }
     }
     reportRequired() {
-        const anchor = this.partNamed('list') ?? undefined;
-        if (this.required && this.value === '') {
-            this.internals.setValidity({ valueMissing: true }, this.valueMissingMessage, anchor);
+        const problem = this.problem;
+        if (problem) {
+            this.internals.setValidity(problem[0], problem[1], this.partNamed('list') ?? undefined);
             return;
         }
+        this.internals.setValidity({});
+    }
+    get problem() {
+        if (this.required && this.value === '') {
+            return [{ valueMissing: true }, this.valueMissingMessage];
+        }
         const held = this.held;
         if (held.length > 0 && held.some((one) => valueAsSeconds(one) === null)) {
-            this.internals.setValidity({ badInput: true }, formatWords(this, 'badInputMessage', {
-                mode: this.mode ?? 'single',
-                shape: this.seconds ? 'HH:mm:ss' : 'HH:mm',
-            }), anchor);
-            return;
+            return [
+                { badInput: true },
+                formatWords(this, 'badInputMessage', {
+                    mode: this.mode ?? 'single',
+                    shape: this.seconds ? 'HH:mm:ss' : 'HH:mm',
+                }),
+            ];
         }
         for (const one of held) {
             const fault = this.fault(one);
             if (fault) {
-                this.internals.setValidity({ [fault[0]]: true }, fault[1], anchor);
-                return;
+                return [{ [fault[0]]: true }, fault[1]];
             }
         }
-        this.internals.setValidity({});
+        return undefined;
+    }
+    get failure() {
+        const problem = this.problem;
+        if (!problem) {
+            return undefined;
+        }
+        return problem[0].valueMissing ? 'missing' : 'refused';
     }
     report() {
         if (this.isDisabled) {
@@ -290,7 +320,11 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
     willUpdate(changed) {
         super.willUpdate(changed);
         this.report();
+        if (changed.has('value')) {
+            this.previewed = '';
+        }
         this.toggleState('blank', this.value === '');
+        this.toggleState('range-pending', this.mode === 'range' && this.held.length === 1);
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
@@ -386,6 +420,8 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
       .value=${this.value}
       @helix-before-change=${this.handleChange}
       @input=${this.handleListInput}
+      @pointerleave=${this.handleListLeave}
+      @pointerover=${this.handleListHover}
     >
       ${this.times.map((seconds) => {
             const at = this.valueFor(seconds);
@@ -481,6 +517,9 @@ __decorate([
     words,
     property({ attribute: 'range-underflow-message' })
 ], HelixHeadlessTimePicker.prototype, "rangeUnderflowMessage", void 0);
+__decorate([
+    state()
+], HelixHeadlessTimePicker.prototype, "previewed", void 0);
 __decorate([
     property({ attribute: 'readonly', reflect: true, type: Boolean })
 ], HelixHeadlessTimePicker.prototype, "readOnly", void 0);

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

@@ -10,8 +10,9 @@ declare const HelixHeadlessToastItem_base: (new (...args: any[]) => import("@fus
  *
  * **Each item runs its own timer.** A timer held by the region would restart
  * with each new message, and the last of three messages would stay for nine
- * seconds. It pauses while the pointer or focus is on the message, and while
- * the page is hidden, so a message is not spent in a background tab.
+ * seconds. It pauses while the pointer or focus is on the message or anywhere
+ * in the region's stack, and while the page is hidden, so a message is not
+ * spent in a background tab.
  *
  * **Each message is an `alertdialog` named by its words**, which is how a reader
  * who moves into the stack hears which message they are on. Give it a
@@ -20,10 +21,11 @@ declare const HelixHeadlessToastItem_base: (new (...args: any[]) => import("@fus
  * says each message once as it arrives, a `danger` one assertively, so a
  * message is never a live region of its own.
  *
- * A touch or a pen swipes a message toward the end of the line, and past
- * halfway, or quickly, dismisses it through the same `helix-dismiss` as its
- * control. While it moves, the distance is on the `item` part as
- * `--toast-swipe-x`.
+ * A touch or a pen swipes a message toward the end of the line, or toward the
+ * edge the region's `swipe-direction` names, and past halfway, or quickly,
+ * dismisses it through the same `helix-dismiss` as its control. While it
+ * moves, the distance is on the `item` part as `--toast-swipe-x` or
+ * `--toast-swipe-y`.
  *
  * **Escape dismisses the message holding focus**, through the same
  * `helix-dismiss`, and focus moves to the next message.
@@ -60,9 +62,10 @@ declare const HelixHeadlessToastItem_base: (new (...args: any[]) => import("@fus
  *
  * @cssproperty --toast-duration - How long this message stays, in milliseconds, for a progress hint.
  * @cssproperty --toast-swipe-x - How far a swipe has moved the message across, in pixels, toward the right.
+ * @cssproperty --toast-swipe-y - How far a swipe has moved the message down, in pixels, under a `swipe-direction` of `top` or `bottom`.
  *
  * @cssstate closed - The message has been dismissed and is hidden, or leaving.
- * @cssstate paused - The dismiss timer is paused, while a pointer or focus is on the message, or while the page is hidden.
+ * @cssstate paused - The dismiss timer is paused, while a pointer or focus is on the message or in the stack, or while the page is hidden.
  * @cssstate waiting - The region holds the message back, past its `max-visible`, until a message before it goes.
  */
 export declare class HelixHeadlessToastItem extends HelixHeadlessToastItem_base {
@@ -96,8 +99,24 @@ export declare class HelixHeadlessToastItem extends HelixHeadlessToastItem_base
      */
     get open(): boolean;
     set open(next: boolean);
+    /**
+     * @internal Set by the region: whether a pointer or focus in the stack holds
+     * this message's timer.
+     */
+    regionHeld: boolean;
+    /**
+     * @internal Set by the region: the edge a swipe dismisses toward, from its
+     * `swipe-direction`.
+     */
+    swipeToward: 'bottom' | 'end' | 'start' | 'top';
+    /** Whether the timer is held for `regionHeld`, so the hold is let go once. */
+    private regionHolding;
+    /** Holds the timer while the region asks, and lets it go once. */
+    private holdForRegion;
+    /** The physical edge a swipe dismisses toward. */
+    private get swipeTo();
     protected readonly swipes: SwipeController;
-    /** Writes how far a swipe has moved the message toward the end of the line. */
+    /** Writes how far a swipe has moved the message toward its edge. */
     private slide;
     /**
      * The dismiss timer, which pauses while a reader is on the message, and

package/dist/toast/item/toast-item.js

@@ -4,30 +4,34 @@ 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 { CountdownController, customElement, drawDismiss, drawDismissGlyph, HelixElement, hostAria, isRtl, MixinDismissible, requestChange, SwipeController, settleSwipe, swipeEdge, toneMark, towardEdge, } from '@fusion.dev/helix-core';
+import { CountdownController, customElement, drawDismiss, drawDismissGlyph, edgeOffset, HelixElement, hostAria, isRtl, MixinDismissible, requestChange, SwipeController, settleSwipe, swipeAxis, swipeEdge, toneMark, towardEdge, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 let HelixHeadlessToastItem = class HelixHeadlessToastItem extends MixinDismissible(HelixElement) {
     constructor() {
         super(...arguments);
+        this.regionHeld = false;
+        this.swipeToward = 'end';
+        this.regionHolding = false;
         this.swipes = new SwipeController(this, {
-            axis: () => (this.open ? 'x' : undefined),
-            end: (dx, _dy, vx) => {
-                const edge = swipeEdge('end', isRtl(this));
-                const width = this.partNamed('item')?.getBoundingClientRect().width ?? 0;
+            axis: () => (this.open ? swipeAxis(this.swipeTo) : undefined),
+            end: (dx, dy, vx, vy) => {
+                const edge = this.swipeTo;
+                const box = this.partNamed('item')?.getBoundingClientRect();
+                const across = swipeAxis(edge) === 'x';
                 const shown = settleSwipe({
                     points: [1],
-                    size: width,
-                    travel: Math.max(0, towardEdge(edge, dx, 0)),
-                    velocity: towardEdge(edge, vx, 0),
+                    size: (across ? box?.width : box?.height) ?? 0,
+                    travel: Math.max(0, towardEdge(edge, dx, dy)),
+                    velocity: towardEdge(edge, vx, vy),
                 });
                 if (shown === 0 && this.dismiss()) {
                     return;
                 }
                 this.slide(0);
             },
-            move: (dx) => this.slide(Math.max(0, towardEdge(swipeEdge('end', isRtl(this)), dx, 0))),
+            move: (dx, dy) => this.slide(Math.max(0, towardEdge(this.swipeTo, dx, dy))),
             start: (_target, event) => event.pointerType !== 'mouse',
             surface: () => this.partNamed('item'),
         });
@@ -81,9 +85,27 @@ let HelixHeadlessToastItem = class HelixHeadlessToastItem extends MixinDismissib
         this.openState = next;
         this.requestUpdate('open', previous);
     }
+    holdForRegion() {
+        const want = this.regionHeld && this.isConnected;
+        if (want === this.regionHolding) {
+            return;
+        }
+        this.regionHolding = want;
+        if (want) {
+            this.countdown.hold();
+        }
+        else {
+            this.countdown.release();
+        }
+    }
+    get swipeTo() {
+        return swipeEdge(this.swipeToward, isRtl(this));
+    }
     slide(travel) {
-        const physical = isRtl(this) ? -travel : travel;
-        this.partNamed('item')?.style.setProperty('--toast-swipe-x', travel === 0 ? '' : `${Math.round(physical)}px`);
+        const item = this.partNamed('item');
+        const { x, y } = edgeOffset(this.swipeTo, travel);
+        item?.style.setProperty('--toast-swipe-x', x === 0 ? '' : `${Math.round(x)}px`);
+        item?.style.setProperty('--toast-swipe-y', y === 0 ? '' : `${Math.round(y)}px`);
     }
     wait(waiting) {
         if (waiting) {
@@ -133,12 +155,14 @@ let HelixHeadlessToastItem = class HelixHeadlessToastItem extends MixinDismissib
             else {
                 this.resume();
             }
+            this.holdForRegion();
         }
         this.addEventListener('keydown', this.handleKeydown);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.holding = false;
+        this.regionHolding = false;
         this.removeEventListener('keydown', this.handleKeydown);
     }
     willUpdate(changed) {
@@ -156,6 +180,12 @@ let HelixHeadlessToastItem = class HelixHeadlessToastItem extends MixinDismissib
         if (changed.has('waiting')) {
             this.wait(this.waiting);
         }
+        if (changed.has('regionHeld')) {
+            this.holdForRegion();
+        }
+        if (changed.has('swipeToward')) {
+            this.partNamed('item')?.style.setProperty('touch-action', swipeAxis(this.swipeTo) === 'y' ? 'pan-x' : '');
+        }
     }
     assigned(name) {
         return (this.renderRoot
@@ -229,6 +259,12 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessToastItem.prototype, "open", null);
+__decorate([
+    property({ attribute: false, type: Boolean })
+], HelixHeadlessToastItem.prototype, "regionHeld", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessToastItem.prototype, "swipeToward", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessToastItem.prototype, "tone", void 0);

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

@@ -34,7 +34,12 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * to render them from: it appends a message of the region's own tier and
  * removes it once it has been dismissed and has finished leaving. Messages
  * you render yourself stay yours, and the region never removes them. A touch
- * or a pen swipes a message away toward the end of the line.
+ * or a pen swipes a message away toward the end of the line, or toward the
+ * edge `swipe-direction` names.
+ *
+ * **Every message's timer waits while a pointer or focus is in the stack**, as
+ * React Aria's and Radix's regions do, so a reader moving from one message to
+ * the next does not lose the one behind them.
  *
  * **The stack is in the top layer.** The `region` part is a `popover="manual"`
  * shown while a message is showing, and shown again above a modal dialog that
@@ -127,6 +132,11 @@ export declare class HelixHeadlessToast extends HelixElement {
      * departures, which is what `orientation` does.
      */
     placement?: 'bottom-center' | 'bottom-end' | 'bottom-start' | 'top-center' | 'top-end' | 'top-start';
+    /**
+     * The edge a touch or a pen swipes a message toward to dismiss it: `end`,
+     * the end of the line, or `start`, `top` or `bottom`. Unset is `end`.
+     */
+    swipeDirection?: 'bottom' | 'end' | 'start' | 'top';
     protected willUpdate(changed: PropertyValues): void;
     /** What the polite region is saying. */
     private said;
@@ -190,6 +200,19 @@ export declare class HelixHeadlessToast extends HelixElement {
     private watcher;
     /** The messages that are showing, in order. */
     private get showing();
+    /** Whether a pointer is over the stack. */
+    private pointerIn;
+    /** Whether focus is in the stack. */
+    private focusIn;
+    /**
+     * Tells every message whether the stack holds its timer and which way it
+     * swipes, which only the region knows.
+     */
+    private inform;
+    private readonly handlePointerEnter;
+    private readonly handlePointerLeave;
+    /** Focus leaving the stack, and not moving between its messages. */
+    private readonly handleFocusOut;
     /** The messages `max-visible` holds back. */
     private readonly held;
     /**