@fusion.dev/helix-headless 0.142.1 → 0.144.0

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

@@ -4,25 +4,25 @@ 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 { valueAsTime as asTime, customElement, timeAsValue as fromTime, HelixFormElement, MixinControllerValue, minutesAsValue, reportValues, valueAsMinutes, writeTime, } from '@fusion.dev/helix-core';
+import { clockLocale, commaList, customElement, dayPeriod, elementById, fillTemplate, HelixFormElement, inlineStep, isTwelveHour, MixinControllerValue, nearestTime, offeredTimes, reportValues, secondsAsValue, timeBarred, timeFault, valueAsSeconds, wheelParts, wholeHour, writeClock, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
 import '../../listbox/index.js';
 import '../../option/index.js';
-const isTwelveHour = (locale) => new Intl.DateTimeFormat(locale || undefined, { timeStyle: 'short' }).resolvedOptions().hour12 ===
-    true;
 let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControllerValue(HelixFormElement) {
     constructor() {
         super(...arguments);
         this.disableTimes = '';
+        this.hourLabel = 'Hour';
         this.invalid = false;
         this.label = 'Time';
         this.locale = '';
+        this.manual = false;
         this.max = '23:59';
+        this.meridiemLabel = 'Before or after noon';
         this.min = '00:00';
-        this.readOnly = false;
-        this.required = false;
+        this.minuteLabel = 'Minute';
         this.handleListInput = (event) => {
             event.stopPropagation();
         };
@@ -55,60 +55,78 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
             if (this.isDisabled) {
                 return;
             }
-            const { hour, meridiem, minute } = this.parts;
-            let next = hour * 60 + minute;
+            const { hour, meridiem, minute, second } = this.parts;
+            let [h, m, sec] = [hour, minute, second];
             if (part === 'minute') {
-                next = hour * 60 + Number(to);
+                m = Number(to);
+            }
+            else if (part === 'second') {
+                sec = Number(to);
             }
             else if (part === 'hour') {
-                const shown = Number(to);
-                const whole = isTwelveHour(this.locale) ? (shown % 12) + (meridiem === 'PM' ? 12 : 0) : shown;
-                next = whole * 60 + minute;
+                h = wholeHour(Number(to), isTwelveHour(this.clock) ? meridiem : undefined);
             }
             else {
-                const half = hour % 12;
-                next = (half + (to === 'PM' ? 12 : 0)) * 60 + minute;
+                h = (hour % 12) + (to === 'PM' ? 12 : 0);
             }
-            const whole = minutesAsValue(next);
-            if (this.barred(whole)) {
+            const nearest = this.nearest(h * 3600 + m * 60 + sec);
+            if (this.barredAt(nearest)) {
                 return;
             }
-            this.requestValue(whole);
+            this.requestValue(this.valueFor(nearest));
         };
+        this.readOnly = false;
+        this.required = false;
+        this.secondLabel = 'Second';
+        this.seconds = false;
         this.step = 15;
         this.listRevealed = false;
+        this.naming = undefined;
+        this.handleColumnsKeydown = (event) => {
+            const step = inlineStep(this, event.key);
+            if (step === 0 || event.altKey || event.ctrlKey || event.metaKey) {
+                return;
+            }
+            const columns = [...(this.renderRoot?.querySelectorAll('[part="column"]') ?? [])];
+            const at = columns.findIndex((column) => event.composedPath().includes(column));
+            const next = columns[at + step];
+            if (at < 0 || !next) {
+                return;
+            }
+            event.preventDefault();
+            next.focus();
+        };
     }
     get times() {
-        const from = valueAsMinutes(this.min) ?? 0;
-        const to = valueAsMinutes(this.max) ?? 1439;
-        const step = Math.max(1, Math.round(this.step));
-        const found = [];
-        for (let at = from; at <= to; at += step) {
-            found.push(at);
-        }
-        return found;
+        return offeredTimes(this.min, this.max, this.step, this.seconds);
+    }
+    get clock() {
+        return clockLocale(this.locale, this.hourCycle);
+    }
+    valueFor(at) {
+        return secondsAsValue(at, this.seconds);
     }
     barred(at) {
-        return this.disableTimes
-            .split(',')
-            .map((one) => one.trim())
-            .filter(Boolean)
-            .includes(at);
+        const seconds = valueAsSeconds(at);
+        return seconds !== null && this.barredAt(seconds);
+    }
+    barredAt(at) {
+        return timeBarred(at, this.disableTimes);
+    }
+    nearest(at) {
+        return nearestTime(this.times, at);
     }
     wholeHourBarred(shown, half) {
-        const whole = half === undefined ? shown : (shown % 12) + (half === 'PM' ? 12 : 0);
-        const within = this.times.filter((at) => Math.floor(at / 60) === whole);
-        return within.length > 0 && within.every((at) => this.barred(minutesAsValue(at)));
+        const whole = wholeHour(shown, half);
+        const within = this.times.filter((at) => Math.floor(at / 3600) === whole);
+        return within.length > 0 && within.every((at) => this.barredAt(at));
     }
     halfBarred(half) {
-        const within = this.times.filter((at) => (half === 'PM') === at >= 720);
-        return within.length > 0 && within.every((at) => this.barred(minutesAsValue(at)));
+        const within = this.times.filter((at) => (half === 'PM') === at >= 43_200);
+        return within.length > 0 && within.every((at) => this.barredAt(at));
     }
     get held() {
-        return this.value
-            .split(',')
-            .map((one) => one.trim())
-            .filter(Boolean);
+        return commaList(this.value);
     }
     between(at) {
         if (this.mode !== 'range') {
@@ -118,17 +136,25 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
         return from !== undefined && to !== undefined && at > from && at < to;
     }
     get parts() {
-        const at = valueAsMinutes(this.value) ?? valueAsMinutes(this.min) ?? 0;
-        const hour = Math.floor(at / 60);
-        return { hour, meridiem: hour < 12 ? 'AM' : 'PM', minute: at % 60 };
+        const at = valueAsSeconds(this.value) ?? valueAsSeconds(this.min) ?? 0;
+        return wheelParts(at, isTwelveHour(this.clock));
     }
     get hours() {
-        const found = new Set(this.times.map((at) => Math.floor(at / 60)));
+        const found = new Set(this.times.map((at) => Math.floor(at / 3600)));
         return [...found];
     }
     get minutes() {
         const hour = this.parts.hour;
-        return this.times.filter((at) => Math.floor(at / 60) === hour).map((at) => at % 60);
+        const found = new Set(this.times
+            .filter((at) => Math.floor(at / 3600) === hour)
+            .map((at) => Math.floor(at / 60) % 60));
+        return [...found];
+    }
+    get secondsShown() {
+        const { hour, minute } = this.parts;
+        return this.times
+            .filter((at) => Math.floor(at / 60) === hour * 60 + minute)
+            .map((at) => at % 60);
     }
     reveal() {
         if (this.mode !== undefined) {
@@ -148,6 +174,35 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
         }
         return super.requestValue(next);
     }
+    fault(at) {
+        switch (timeFault(at, {
+            disableTimes: this.disableTimes,
+            max: this.max,
+            min: this.min,
+            offered: this.times,
+        })) {
+            case 'rangeUnderflow':
+                return [
+                    'rangeUnderflow',
+                    fillTemplate(this.rangeUnderflowMessage || 'Choose a time at or after {min}.', {
+                        min: writeClock(this.min, this.clock, this.seconds),
+                    }),
+                ];
+            case 'rangeOverflow':
+                return [
+                    'rangeOverflow',
+                    fillTemplate(this.rangeOverflowMessage || 'Choose a time at or before {max}.', {
+                        max: writeClock(this.max, this.clock, this.seconds),
+                    }),
+                ];
+            case 'unavailable':
+                return ['badInput', this.unavailableMessage || 'Choose a time that is available.'];
+            case 'stepMismatch':
+                return ['stepMismatch', this.stepMismatchMessage || 'Choose one of the times on offer.'];
+            default:
+                return undefined;
+        }
+    }
     reportRequired() {
         const anchor = this.partNamed('list') ?? undefined;
         if (this.required && this.value === '') {
@@ -155,17 +210,25 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
             return;
         }
         const held = this.held;
-        if (held.length > 0 && held.some((one) => asTime(one) === null)) {
+        if (held.length > 0 && held.some((one) => valueAsSeconds(one) === null)) {
+            const shape = this.seconds ? 'HH:mm:ss' : 'HH:mm';
             this.internals.setValidity({ badInput: true }, this.badInputMessage ||
                 (this.mode === undefined
-                    ? 'Enter a time as HH:mm.'
-                    : 'Enter times as HH:mm, separated by commas.'), anchor);
+                    ? `Enter a time as ${shape}.`
+                    : `Enter times as ${shape}, separated by commas.`), anchor);
             return;
         }
+        for (const one of held) {
+            const fault = this.fault(one);
+            if (fault) {
+                this.internals.setValidity({ [fault[0]]: true }, fault[1], anchor);
+                return;
+            }
+        }
         this.internals.setValidity({});
     }
     report() {
-        if (this.disabled) {
+        if (this.isDisabled) {
             this.internals.setFormValue(null);
             return;
         }
@@ -178,6 +241,25 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
         await Promise.all(settling.map((one) => one.updateComplete));
         this.reveal();
     }
+    get listName() {
+        const named = (this.getAttribute('aria-labelledby') ?? '')
+            .split(/\s+/)
+            .filter(Boolean)
+            .map((id) => elementById(this, id)?.textContent?.trim() ?? '')
+            .filter(Boolean)
+            .join(' ');
+        return named || this.getAttribute('aria-label') || this.label;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.naming = new MutationObserver(() => this.requestUpdate());
+        this.naming.observe(this, { attributeFilter: ['aria-label', 'aria-labelledby'] });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.naming?.disconnect();
+        this.naming = undefined;
+    }
     willUpdate(changed) {
         super.willUpdate(changed);
         this.internals.ariaInvalid = this.invalid ? 'true' : null;
@@ -196,7 +278,8 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
         }
     }
     focus(options) {
-        this.partNamed('list')?.focus(options);
+        ;
+        (this.partNamed('list') ?? this.partNamed('column'))?.focus(options);
     }
     renderColumn(part, label, values, written, value, barred = () => false) {
         return html `<${this.tag('listbox')}
@@ -228,17 +311,25 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
     </${this.tag('listbox')}>`;
     }
     renderSpinner() {
-        const twelve = isTwelveHour(this.locale);
-        const { hour, meridiem, minute } = this.parts;
-        const shownHour = twelve ? String(hour % 12 === 0 ? 12 : hour % 12) : String(hour);
+        const twelve = isTwelveHour(this.clock);
+        const { hour, meridiem, minute, second, shown } = this.parts;
         const hours = twelve
             ? [...new Set(this.hours.map((one) => (one % 12 === 0 ? 12 : one % 12)))].sort((a, b) => a - b)
             : this.hours;
-        return html `<div part="columns" data-unset=${this.value === '' ? '' : nothing}>
-      ${this.renderColumn('hour', 'Hour', hours.map(String), (one) => (twelve ? one : one.padStart(2, '0')), shownHour, (one) => this.wholeHourBarred(Number(one), twelve ? meridiem : undefined))}
-      ${this.renderColumn('minute', 'Minute', this.minutes.map(String), (one) => one.padStart(2, '0'), String(minute), (one) => this.barred(minutesAsValue(hour * 60 + Number(one))))}
+        return html `<div
+      part="columns"
+      role="group"
+      aria-label=${this.listName}
+      data-unset=${this.value === '' ? '' : nothing}
+      @keydown=${this.handleColumnsKeydown}
+    >
+      ${this.renderColumn('hour', this.hourLabel, hours.map(String), (one) => (twelve ? one : one.padStart(2, '0')), String(shown), (one) => this.wholeHourBarred(Number(one), twelve ? meridiem : undefined))}
+      ${this.renderColumn('minute', this.minuteLabel, this.minutes.map(String), (one) => one.padStart(2, '0'), String(minute), (one) => this.barredAt(hour * 3600 + Number(one) * 60))}
+      ${this.seconds
+            ? this.renderColumn('second', this.secondLabel, this.secondsShown.map(String), (one) => one.padStart(2, '0'), String(second), (one) => this.barredAt(hour * 3600 + minute * 60 + Number(one)))
+            : nothing}
       ${twelve
-            ? this.renderColumn('meridiem', 'Before or after noon', ['AM', 'PM'], (one) => one, meridiem, (one) => this.halfBarred(one))
+            ? this.renderColumn('meridiem', this.meridiemLabel, ['AM', 'PM'], (one) => dayPeriod(one, this.clock), meridiem, (one) => this.halfBarred(one))
             : nothing}
     </div>`;
     }
@@ -249,16 +340,17 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
       exportparts="empty: list-empty, feedback: list-feedback, filter-icon: list-filter-icon,
         filter-mark: list-filter-mark, hint: list-hint, items: list-items, label: list-label,
         live: list-live, loading: list-loading, search: list-search, search-field: list-search-field"
-      aria-label=${this.label}
+      aria-label=${this.listName}
       data-unset=${this.value === '' ? '' : nothing}
       ?disabled=${this.isDisabled}
+      ?manual=${this.manual}
       ?multiple=${this.mode !== undefined}
       .value=${this.value}
       @helix-before-change=${this.handleChange}
       @input=${this.handleListInput}
     >
-      ${this.times.map((minutes) => {
-            const at = minutesAsValue(minutes);
+      ${this.times.map((seconds) => {
+            const at = this.valueFor(seconds);
             const between = this.between(at);
             return html `<${this.tag('option')}
           part="option${between ? ' option-between' : ''}"
@@ -269,7 +361,7 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
           ?disabled=${this.barred(at)}
           ?selected=${this.held.includes(at)}
           data-between=${between ? '' : nothing}
-          >${writeTime(at, this.locale)}</${this.tag('option')}
+          >${writeClock(at, this.clock, this.seconds)}</${this.tag('option')}
         >`;
         })}
     </${this.tag('listbox')}>`;
@@ -281,16 +373,20 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
         return html `${this.renderList()}`;
     }
     get valueAsDate() {
-        return asTime(this.value);
+        const at = valueAsSeconds(this.value);
+        return at === null ? null : new Date(at * 1000);
     }
     set valueAsDate(date) {
-        this.value = fromTime(date);
+        this.valueAsNumber = date ? date.getTime() : Number.NaN;
     }
     get valueAsNumber() {
-        return asTime(this.value)?.getTime() ?? Number.NaN;
+        const at = valueAsSeconds(this.value);
+        return at === null ? Number.NaN : at * 1000;
     }
     set valueAsNumber(ms) {
-        this.value = Number.isNaN(ms) ? '' : fromTime(new Date(ms));
+        this.value = Number.isNaN(ms)
+            ? ''
+            : this.valueFor(Math.floor((((ms % 86_400_000) + 86_400_000) % 86_400_000) / 1000));
     }
 };
 __decorate([
@@ -299,6 +395,12 @@ __decorate([
 __decorate([
     property({ attribute: 'disable-times' })
 ], HelixHeadlessTimePicker.prototype, "disableTimes", void 0);
+__decorate([
+    property({ attribute: 'hour-cycle' })
+], HelixHeadlessTimePicker.prototype, "hourCycle", void 0);
+__decorate([
+    property({ attribute: 'hour-label' })
+], HelixHeadlessTimePicker.prototype, "hourLabel", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessTimePicker.prototype, "invalid", void 0);
@@ -308,24 +410,51 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessTimePicker.prototype, "locale", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessTimePicker.prototype, "manual", void 0);
 __decorate([
     property()
 ], HelixHeadlessTimePicker.prototype, "max", void 0);
+__decorate([
+    property({ attribute: 'meridiem-label' })
+], HelixHeadlessTimePicker.prototype, "meridiemLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessTimePicker.prototype, "min", void 0);
+__decorate([
+    property({ attribute: 'minute-label' })
+], HelixHeadlessTimePicker.prototype, "minuteLabel", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessTimePicker.prototype, "mode", void 0);
+__decorate([
+    property({ attribute: 'range-overflow-message' })
+], HelixHeadlessTimePicker.prototype, "rangeOverflowMessage", void 0);
+__decorate([
+    property({ attribute: 'range-underflow-message' })
+], HelixHeadlessTimePicker.prototype, "rangeUnderflowMessage", void 0);
 __decorate([
     property({ attribute: 'readonly', reflect: true, type: Boolean })
 ], HelixHeadlessTimePicker.prototype, "readOnly", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessTimePicker.prototype, "required", void 0);
+__decorate([
+    property({ attribute: 'second-label' })
+], HelixHeadlessTimePicker.prototype, "secondLabel", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessTimePicker.prototype, "seconds", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessTimePicker.prototype, "step", void 0);
+__decorate([
+    property({ attribute: 'step-mismatch-message' })
+], HelixHeadlessTimePicker.prototype, "stepMismatchMessage", void 0);
+__decorate([
+    property({ attribute: 'unavailable-message' })
+], HelixHeadlessTimePicker.prototype, "unavailableMessage", void 0);
 __decorate([
     property({ attribute: 'value-missing-message' })
 ], HelixHeadlessTimePicker.prototype, "valueMissingMessage", void 0);

package/dist/toast/hotkey.d.ts

@@ -0,0 +1,22 @@
+import { type ChordPress } from '@fusion.dev/helix-core';
+/** A key and the modifiers held with it. */
+export interface Chord {
+    alt: boolean;
+    ctrl: boolean;
+    key: string;
+    meta: boolean;
+    shift: boolean;
+}
+/** What a key press carries that a chord is compared against. */
+export type Pressed = ChordPress;
+/**
+ * Reads a chord written as keys joined by `+`, such as `F8` or `Alt+T`, case
+ * aside. The last part is the key. Empty, or a chord with no key, is none.
+ *
+ * Split as core's `chordParts` splits every chord, and read more strictly than
+ * Kbd reads one: four modifiers by their own names, no `mod`, and Shift held
+ * exactly as written, so the key that moves to the stack is the one written.
+ */
+export declare const parseHotkey: (text: string) => Chord | null;
+/** Whether a press is the chord: the same key, case aside, and exactly its modifiers. */
+export declare const matchesHotkey: (pressed: Pressed, chord: Chord | null) => boolean;

package/dist/toast/hotkey.js

@@ -0,0 +1,23 @@
+import { chordParts } from '@fusion.dev/helix-core';
+const MODIFIERS = new Set(['alt', 'ctrl', 'meta', 'shift']);
+export const parseHotkey = (text) => {
+    const parts = chordParts(text);
+    const key = parts.pop();
+    if (!key || MODIFIERS.has(key.toLowerCase())) {
+        return null;
+    }
+    const held = new Set(parts.map((one) => one.toLowerCase()));
+    return {
+        alt: held.has('alt'),
+        ctrl: held.has('ctrl'),
+        key,
+        meta: held.has('meta'),
+        shift: held.has('shift'),
+    };
+};
+export const matchesHotkey = (pressed, chord) => chord !== null &&
+    pressed.key.toLowerCase() === chord.key.toLowerCase() &&
+    pressed.altKey === chord.alt &&
+    pressed.ctrlKey === chord.ctrl &&
+    pressed.metaKey === chord.meta &&
+    pressed.shiftKey === chord.shift;

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

@@ -1,4 +1,4 @@
-import { HelixElement, type ToneMark } from '@fusion.dev/helix-core';
+import { HelixElement, SwipeController, type ToneMark } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 declare const HelixHeadlessToastItem_base: (new (...args: any[]) => import("@fusion.dev/helix-core").DismissibleElement) & typeof HelixElement;
 /**
@@ -12,6 +12,16 @@ declare const HelixHeadlessToastItem_base: (new (...args: any[]) => import("@fus
  * with each new message, and the last of three messages would stay for nine
  * seconds.
  *
+ * **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. A `danger` message
+ * is its own assertive live region, so it is announced at once; every other one
+ * is announced politely by the region.
+ *
+ * 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`.
+ *
  * **Messages are inverted by default.** The item flips `color-scheme`, so a new
  * message stands out from the page without using a color that carries meaning.
  *
@@ -39,6 +49,7 @@ declare const HelixHeadlessToastItem_base: (new (...args: any[]) => import("@fus
  * @csspart timer - The bar showing how long is left, where a duration was given.
  *
  * @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.
  */
 export declare class HelixHeadlessToastItem extends HelixHeadlessToastItem_base {
     /**
@@ -64,6 +75,9 @@ export declare class HelixHeadlessToastItem extends HelixHeadlessToastItem_base
      */
     get open(): boolean;
     set open(next: boolean);
+    protected readonly swipes: SwipeController;
+    /** Writes how far a swipe has moved the message toward the end of the line. */
+    private slide;
     /** When the current run of the timer began, or nothing while it is paused. */
     private startedAt;
     /** What is left of the duration, so resuming continues rather than restarts. */
@@ -106,6 +120,7 @@ export declare class HelixHeadlessToastItem extends HelixHeadlessToastItem_base
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected willUpdate(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
     protected firstUpdated(changed: PropertyValues): void;
     /**
      * The mark for the message's tone, behind a seam.

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

@@ -4,14 +4,33 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, HelixElement, MixinDismissible, requestChange, toneMark, } from '@fusion.dev/helix-core';
-import { x } from '@fusion.dev/helix-icons';
+import { customElement, drawDismiss, drawDismissGlyph, HelixElement, hostAria, isRtl, MixinDismissible, requestChange, SwipeController, settleSwipe, 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.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;
+                const shown = settleSwipe({
+                    points: [1],
+                    size: width,
+                    travel: Math.max(0, towardEdge(edge, dx, 0)),
+                    velocity: towardEdge(edge, vx, 0),
+                });
+                if (shown === 0 && this.dismiss()) {
+                    return;
+                }
+                this.slide(0);
+            },
+            move: (dx) => this.slide(Math.max(0, towardEdge(swipeEdge('end', isRtl(this)), dx, 0))),
+            start: (_target, event) => event.pointerType !== 'mouse',
+            surface: () => this.partNamed('item'),
+        });
         this.openState = undefined;
         this.holds = 0;
         this.handlePause = () => {
@@ -33,6 +52,10 @@ let HelixHeadlessToastItem = class HelixHeadlessToastItem extends MixinDismissib
         this.openState = next;
         this.requestUpdate('open', previous);
     }
+    slide(travel) {
+        const physical = isRtl(this) ? -travel : travel;
+        this.partNamed('item')?.style.setProperty('--toast-swipe-x', travel === 0 ? '' : `${Math.round(physical)}px`);
+    }
     dismiss() {
         if (!this.open) {
             return true;
@@ -86,6 +109,16 @@ let HelixHeadlessToastItem = class HelixHeadlessToastItem extends MixinDismissib
         super.willUpdate(changed);
         this.toggleAttribute('data-closed', !this.open);
         this.toggleAttribute('hidden', !this.open);
+        hostAria(this.internals, { role: 'alertdialog' });
+        this.internals.ariaModal = 'false';
+        this.internals.ariaLive = this.tone === 'danger' ? 'assertive' : null;
+    }
+    updated(changed) {
+        super.updated(changed);
+        const words = this.partNamed('content');
+        if (words) {
+            hostAria(this.internals, { labelledBy: [words] });
+        }
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
@@ -108,9 +141,7 @@ let HelixHeadlessToastItem = class HelixHeadlessToastItem extends MixinDismissib
     }
     renderDismissIcon() {
         return html `<slot name="dismiss-icon">
-      <svg part="dismiss-mark" viewBox=${x.viewBox} fill="currentColor" aria-hidden="true">
-        ${unsafeSVG(x.content)}
-      </svg>
+      ${drawDismissGlyph()}
     </slot>`;
     }
     render() {
@@ -130,14 +161,11 @@ let HelixHeadlessToastItem = class HelixHeadlessToastItem extends MixinDismissib
       <div part="content"><slot></slot></div>
       <div part="actions"><slot name="actions"></slot></div>
       ${this.dismissible
-            ? html `<button
-              part="dismiss"
-              type="button"
-              aria-label=${this.dismissLabel}
-              @click=${() => this.dismiss()}
-            >
-              ${this.renderDismissIcon()}
-            </button>`
+            ? drawDismiss({
+                label: this.dismissLabel,
+                mark: this.renderDismissIcon(),
+                onDismiss: () => this.dismiss(),
+            })
             : nothing}
       ${this.duration
             ? html `<div