@fusion.dev/helix-headless 0.147.0 → 0.148.0

package/dist/tag/group/tag-group.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 { commaList, customElement, deepActiveElement, deepContains, HelixBeforeChangeEvent, HelixElement, hostAria, KeyboardNavigationController, pressedValue, prunedValue, requestChange, rovingStop, slottedWords, typeaheadByWords, whenHydrated, } from '@fusion.dev/helix-core';
+import { commaList, customElement, deepActiveElement, deepContains, focusItemOf, HelixElement, hostAria, KeyboardNavigationController, pressedValue, prunedValue, requestValue, rovingStop, slottedWords, typeaheadByWords, whenHydrated, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { HelixHeadlessTag } from '../root/tag-root.js';
@@ -107,14 +107,11 @@ let HelixHeadlessTagGroup = class HelixHeadlessTagGroup extends HelixElement {
         return this.tags.filter((tag) => !tag.disabled);
     }
     navigable(tag) {
-        return {
-            contains: (node) => tag.contains(node),
+        return focusItemOf(tag, {
             disabled: tag.disabled,
-            focusItem: () => tag.focusItem(),
-            select: () => { },
-            selected: false,
+            focus: () => tag.focusItem(),
             words: tag.words,
-        };
+        });
     }
     valueFor(tag) {
         return tag.value || slottedWords(tag, ['start', '']);
@@ -146,14 +143,8 @@ let HelixHeadlessTagGroup = class HelixHeadlessTagGroup extends HelixElement {
         if (mode === 'none' || tag.disabled) {
             return;
         }
-        requestChange({
-            apply: (value) => {
-                this.value = value;
-                this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
-            },
-            event: (value) => new HelixBeforeChangeEvent({ value }),
-            host: this,
-            next: pressedValue(mode, this.written, this.valueFor(tag)),
+        requestValue(this, pressedValue(mode, this.written, this.valueFor(tag)), (value) => {
+            this.value = value;
         });
     }
     connectedCallback() {

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

@@ -82,6 +82,7 @@ declare const HelixHeadlessTimePicker_base: (new (...args: any[]) => import("@fu
  * @csspart option-label - The time's label.
  * @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.
  */
 export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_base {

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

@@ -256,6 +256,7 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
     willUpdate(changed) {
         super.willUpdate(changed);
         this.report();
+        this.toggleState('blank', this.value === '');
     }
     updated(changed) {
         super.updated(changed);
@@ -277,6 +278,7 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
         return html `<${this.tag('listbox')}
       part="column"
       data-column=${part}
+      aria-describedby=${this.feedback === '' ? nothing : 'feedback'}
       aria-invalid=${this.marked ? 'true' : nothing}
       exportparts="empty: column-empty, error: column-error, feedback: column-feedback, filter-icon: column-filter-icon,
         filter-mark: column-filter-mark, hint: column-hint, items: column-items, label: column-label,
@@ -328,6 +330,7 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
     renderList() {
         return html `<${this.tag('listbox')}
       part="list"
+      aria-describedby=${this.feedback === '' ? nothing : 'feedback'}
       aria-invalid=${this.marked ? 'true' : nothing}
       exportparts="empty: list-empty, error: list-error, feedback: list-feedback, filter-icon: list-filter-icon,
         filter-mark: list-filter-mark, hint: list-hint, items: list-items, label: list-label,

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

@@ -10,7 +10,8 @@ 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.
+ * 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.
  *
  * **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
@@ -85,8 +86,10 @@ export declare class HelixHeadlessToastItem extends HelixHeadlessToastItem_base
     /** Writes how far a swipe has moved the message toward the end of the line. */
     private slide;
     /**
-     * The dismiss timer, which pauses while a reader is on the message and
-     * continues from what was left.
+     * The dismiss timer, which pauses while a reader is on the message, and
+     * while the page is hidden, and continues from what was left. A message that
+     * arrives in a background tab waits for the reader to come back, as React
+     * Aria's toast queue does.
      *
      * Paused is said on the host so the indicator can freeze with the clock. A
      * `data-` attribute rather than a property, because it is written after

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

@@ -35,6 +35,7 @@ let HelixHeadlessToastItem = class HelixHeadlessToastItem extends MixinDismissib
             done: () => {
                 this.dismiss();
             },
+            holdWhileHidden: true,
             paused: (paused) => {
                 this.toggleAttribute('data-paused', paused);
             },

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

@@ -106,12 +106,24 @@ export declare class HelixHeadlessToast extends HelixElement {
     /** What the assertive region is saying. */
     private urgent;
     private readonly hush;
+    /**
+     * Words waiting for the next frame: the polite ones and the urgent ones.
+     *
+     * Collected rather than written straight in, because the accessibility tree
+     * is built once a frame: two messages that arrive in separate tasks of one
+     * frame would otherwise each overwrite the region, and only the second
+     * would be heard.
+     */
+    private readonly pending;
+    /** Whether a frame is already coming to say what is pending. */
+    private filling;
     /**
      * Says messages that have just arrived, each once, `danger` ones assertively.
      *
      * Emptied first and filled a frame later, so a message with the same words
      * as the one before is still a change, and so a region the stack has just
-     * shown is in the accessibility tree before its words land.
+     * shown is in the accessibility tree before its words land. Every message
+     * that arrives before that frame is said in it, each as its own sentence.
      */
     private announce;
     /**

package/dist/toast/root/toast-root.js

@@ -4,11 +4,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, DelayController, deepActiveElement, deepContains, FocusScopeController, fillTemplate, focusableElements, HelixElement, hostAria, scrollHolders, } from '@fusion.dev/helix-core';
+import { animationsFinished, customElement, DelayController, deepActiveElement, deepContains, FocusScopeController, fillTemplate, focusableElements, HelixElement, hostAria, scrollHolders, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { matchesHotkey, parseHotkey } from '../hotkey.js';
-import { messageWords } from '../words.js';
+import { joinSaid, messageWords } from '../words.js';
 let HelixHeadlessToast = class HelixHeadlessToast extends HelixElement {
     constructor() {
         super(...arguments);
@@ -17,6 +17,8 @@ let HelixHeadlessToast = class HelixHeadlessToast extends HelixElement {
         this.said = '';
         this.urgent = '';
         this.hush = new DelayController(this, { renders: false });
+        this.pending = { said: [], urgent: [] };
+        this.filling = false;
         this.scope = new FocusScopeController(this, {
             contents: () => this.showing.flatMap((one) => {
                 const target = focusTarget(one);
@@ -91,19 +93,25 @@ let HelixHeadlessToast = class HelixHeadlessToast extends HelixElement {
         });
     }
     announce(arrived) {
-        const urgent = arrived.filter(isDanger).map(messageWords).join(' ');
-        const said = arrived
-            .filter((one) => !isDanger(one))
-            .map(messageWords)
-            .join(' ');
-        if (said.trim() === '' && urgent.trim() === '') {
+        for (const one of arrived) {
+            const words = messageWords(one);
+            if (words !== '') {
+                ;
+                (isDanger(one) ? this.pending.urgent : this.pending.said).push(words);
+            }
+        }
+        if (this.filling || (this.pending.said.length === 0 && this.pending.urgent.length === 0)) {
             return;
         }
+        this.filling = true;
         this.said = '';
         this.urgent = '';
         const fill = () => {
-            this.said = said;
-            this.urgent = urgent;
+            this.filling = false;
+            this.said = joinSaid(this.pending.said);
+            this.urgent = joinSaid(this.pending.urgent);
+            this.pending.said = [];
+            this.pending.urgent = [];
             this.hush.start(1000, () => {
                 this.said = '';
                 this.urgent = '';
@@ -161,8 +169,7 @@ let HelixHeadlessToast = class HelixHeadlessToast extends HelixElement {
                 continue;
             }
             this.made.delete(one);
-            const running = typeof one.getAnimations === 'function' ? one.getAnimations({ subtree: true }) : [];
-            void Promise.allSettled(running.map((animation) => animation.finished)).then(() => one.remove());
+            void animationsFinished(one).then(() => one.remove());
         }
     }
     get showing() {
@@ -194,8 +201,7 @@ let HelixHeadlessToast = class HelixHeadlessToast extends HelixElement {
         }
     }
     lowerWhenStill(region) {
-        const running = typeof this.getAnimations === 'function' ? this.getAnimations({ subtree: true }) : [];
-        void Promise.allSettled(running.map((one) => one.finished)).then(() => {
+        void animationsFinished(this).then(() => {
             if (this.showing.length === 0 && popoverOpen(region)) {
                 region.hidePopover();
             }

package/dist/toggle/group/toggle-group.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 { commaList, customElement, DisabledCascadeController, HelixFormElement, hostAria, IndicatorController, KeyboardNavigationController, MixinControllerValue, MixinField, reportValues, rovingStop, toggleValue, } from '@fusion.dev/helix-core';
+import { commaList, customElement, DisabledCascadeController, HelixFormElement, hostAria, IndicatorController, KeyboardNavigationController, MixinControllerValue, MixinField, reportValues, rovingStop, toggleValue, toolbarAround, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { HelixHeadlessToggle } from '../root/toggle-root.js';
@@ -139,9 +139,7 @@ let HelixHeadlessToggleGroup = class HelixHeadlessToggleGroup extends MixinContr
         if (!this.multiple) {
             return 'radiogroup';
         }
-        return this.parentElement?.closest('[role=toolbar],helix-toolbar,helix-headless-toolbar')
-            ? 'group'
-            : 'toolbar';
+        return toolbarAround(this) ? 'group' : 'toolbar';
     }
     willUpdate(changed) {
         super.willUpdate(changed);
@@ -152,7 +150,7 @@ let HelixHeadlessToggleGroup = class HelixHeadlessToggleGroup extends MixinContr
             this.internals.setFormValue(null);
         }
         else if (this.multiple) {
-            reportValues(this.internals, this.name, this.values);
+            reportValues(this.internals, this.name, this.values, { state: 'entries' });
         }
         else {
             this.internals.setFormValue(this.value);

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

@@ -12,6 +12,10 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * focus counts as a control, including your own elements. A child that takes no
  * focus, such as a divider, is skipped. A menu is reached at its trigger.
  *
+ * A Divider in the toolbar is a separator across the toolbar's axis, as React
+ * Aria's is: vertical in a horizontal toolbar and horizontal in a vertical
+ * one, without an `orientation` of its own.
+ *
  * Controls inside a plain wrapper, such as a `Button Group`, are each a stop
  * of the toolbar's own, as React Aria's toolbar flattens a group: the arrows
  * walk through the group's buttons and on past it, and the group takes no tab
@@ -20,6 +24,28 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * The arrows wrap from the last control to the first. Set `stop-at-ends` to
  * keep them at the ends, as Radix's `loop` set to false does.
  *
+ * **Keyboard.** Tab enters the toolbar on the control that last had focus, the
+ * first control at the start, and the next Tab leaves it.
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | Right | Moves to the next control in a horizontal toolbar, from the last back to the first. |
+ * | Left | Moves to the control before in a horizontal toolbar, from the first round to the last. |
+ * | Down, Up | The same in a vertical toolbar. |
+ * | Home, End | Moves to the first or the last control. |
+ *
+ * Left and Right swap on a right-to-left page, where the first control is on
+ * the right. The arrows across the toolbar's axis are left to the control that
+ * has focus, so a radio-style toggle group or a select answers them itself.
+ * The toolbar is `role="toolbar"` with `aria-orientation`, named by `label`.
+ *
+ * The stop moves through a control's own `focusable` property where it has
+ * one, as Button, Select and Toggle Group do. A control without one has
+ * `tabindex` written on the element that takes focus: a native element
+ * itself, or the control inside a custom element's open shadow root, so the
+ * host keeps the markup you rendered. Only a custom element whose shadow root
+ * is closed takes it on the host.
+ *
  * A toggle group of pressed buttons, `selection-mode="multiple"`, is walked
  * through the same way, each toggle a stop on the toolbar's axis, as React
  * Aria's toolbar walks its toggle buttons. Another nested composite, such as a
@@ -44,6 +70,10 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @slot - The toolbar's controls.
  *
  * @csspart toolbar - The toolbar container.
+ *
+ * @cssstate horizontal - The controls run along a row, which is the default.
+ * @cssstate nested - The toolbar is a group inside another toolbar, which owns the keys and the tab stop.
+ * @cssstate vertical - The controls run down a column, under `orientation="vertical"`.
  */
 export declare class HelixHeadlessToolbar extends HelixElement {
     /**
@@ -159,6 +189,7 @@ export declare class HelixHeadlessToolbar extends HelixElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected firstUpdated(changed: PropertyValues): void;
+    protected willUpdate(changed: PropertyValues): void;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/toolbar/root/toolbar-root.js

@@ -5,13 +5,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var HelixHeadlessToolbar_1;
-import { AriaForwardController, closestInstance, customElement, HelixElement, inlineStep, keyClaimed, } from '@fusion.dev/helix-core';
+import { AriaForwardController, closestInstance, customElement, HelixElement, inlineStep, keyClaimed, toolbarAround, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 const KEYS = new Set(['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End']);
 const ownsTabStop = (node) => 'focusable' in node;
 const NATIVE = 'a[href], button, input, select, textarea, [tabindex], [contenteditable=""], [contenteditable="true"]';
 const TABBABLE = NATIVE.replace('[tabindex]', '[tabindex]:not([tabindex="-1"])');
+const innerStops = new WeakMap();
 const takesFocus = (node) => {
     if (!(node instanceof HTMLElement) ||
         node.hasAttribute('disabled') ||
@@ -21,7 +22,25 @@ const takesFocus = (node) => {
     return (node.matches(NATIVE) ||
         ownsTabStop(node) ||
         node.shadowRoot?.delegatesFocus === true ||
-        node.shadowRoot?.querySelector(TABBABLE) != null);
+        node.shadowRoot?.querySelector(TABBABLE) != null ||
+        innerStops.get(node)?.isConnected === true);
+};
+const stopOf = (node) => {
+    if (node.hasAttribute('tabindex')) {
+        return node;
+    }
+    const held = innerStops.get(node);
+    if (held?.isConnected && held.getRootNode() === node.shadowRoot) {
+        return held;
+    }
+    const inner = node.localName.includes('-')
+        ? node.shadowRoot?.querySelector(TABBABLE)
+        : null;
+    if (!inner) {
+        return node;
+    }
+    innerStops.set(node, inner);
+    return inner;
 };
 const flattens = (node) => ownsTabStop(node) &&
     node.selectionMode === 'multiple';
@@ -58,7 +77,7 @@ let HelixHeadlessToolbar = HelixHeadlessToolbar_1 = class HelixHeadlessToolbar e
                 if (ownsTabStop(element)) {
                     return element.focusable;
                 }
-                return composite || element.tabIndex === 0;
+                return composite || stopOf(element).tabIndex === 0;
             });
             if (controls.length > 0 && !held) {
                 this.setTabStop(controls[0], false);
@@ -116,8 +135,9 @@ let HelixHeadlessToolbar = HelixHeadlessToolbar_1 = class HelixHeadlessToolbar e
             if (element && 'focusItem' in element && typeof element.focusItem === 'function') {
                 element.focusItem();
             }
-            else {
-                element?.focus();
+            else if (element) {
+                ;
+                (ownsTabStop(element) ? element : stopOf(element)).focus();
             }
         };
     }
@@ -189,7 +209,7 @@ let HelixHeadlessToolbar = HelixHeadlessToolbar_1 = class HelixHeadlessToolbar e
                 element.focusable = stop;
             }
             else if (foreign || this.wroteForeign) {
-                element.tabIndex = stop ? 0 : -1;
+                stopOf(element).tabIndex = stop ? 0 : -1;
             }
         }
     }
@@ -206,8 +226,7 @@ let HelixHeadlessToolbar = HelixHeadlessToolbar_1 = class HelixHeadlessToolbar e
         if (!parent) {
             return false;
         }
-        return (closestInstance(parent, HelixHeadlessToolbar_1) !== null ||
-            parent.closest('[role="toolbar"]') !== null);
+        return closestInstance(parent, HelixHeadlessToolbar_1) !== null || toolbarAround(this) !== null;
     }
     get axis() {
         return this.orientation ?? 'horizontal';
@@ -237,6 +256,18 @@ let HelixHeadlessToolbar = HelixHeadlessToolbar_1 = class HelixHeadlessToolbar e
         super.firstUpdated(changed);
         void this.claimTabStop();
     }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        this.toggleState('nested', this.nested);
+        this.toggleState('horizontal', this.axis === 'horizontal');
+        this.toggleState('vertical', this.axis === 'vertical');
+        if (this.hasUpdated && changed.has('orientation')) {
+            for (const child of this.children) {
+                ;
+                child.requestUpdate?.();
+            }
+        }
+    }
     render() {
         const nested = this.nested;
         return html `<div

package/dist/tooltip/root/tooltip-root.js

@@ -4,10 +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 { anchorElement, arrowReach, customElement, elementById, HelixElement, hostAria, linkDescription, MixinControllerOpen, OpenPhaseController, onUnlessFalse, PopoverController, reportRuntime, sideOf, unlinkDescription, } from '@fusion.dev/helix-core';
+import { anchorElement, arrowReach, customElement, elementById, focusTarget, HelixElement, hostAria, linkDescription, MixinControllerOpen, OpenPhaseController, onUnlessFalse, PopoverController, reportRuntime, sideOf, unlinkDescription, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property, state } from 'lit/decorators.js';
-import { focusTarget } from '../focus-target.js';
 const GENERIC = new Set(['div', 'p', 'section', 'span']);
 const WARMTH = Symbol.for('fusion.helix.tooltip.warmth');
 const warmth = () => {

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

@@ -161,6 +161,15 @@ import '../../menu/index.js';
  * @cssproperty --video-intrinsic-ratio - The media's own aspect ratio, once it is known. `--video-aspect-ratio` overrides it.
  * @cssproperty --video-level - The current volume, 0 to 1.
  * @cssproperty --video-progress - How far playback has reached, as a fraction of the duration.
+ *
+ * @cssstate ended - Playback reached the end, until it starts again or the source changes.
+ * @cssstate error - The source could not be played, and `failure` shows.
+ * @cssstate fullscreen - The player fills the screen.
+ * @cssstate idle - The video plays and the user has been still for `idle-delay`, so the bar hides.
+ * @cssstate muted - The sound is off.
+ * @cssstate paused - Playback is paused, which is where every player starts.
+ * @cssstate playing - Playback runs, waiting for data included.
+ * @cssstate waiting - Playback stopped to wait for more data, and `loading` shows.
  */
 export declare class HelixHeadlessVideo extends HelixElement {
     /**
@@ -452,6 +461,8 @@ export declare class HelixHeadlessVideo extends HelixElement {
      */
     private failed;
     private playing;
+    /** Whether playback reached the end, for `:state(ended)`. */
+    private finished;
     private position;
     private knownDuration;
     private loudness;

package/dist/video/root/video-root.js

@@ -72,6 +72,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         this.buffering = false;
         this.failed = false;
         this.playing = false;
+        this.finished = false;
         this.position = 0;
         this.knownDuration = 0;
         this.loudness = 1;
@@ -127,6 +128,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         };
         this.handleTime = () => {
             this.position = this.video?.currentTime ?? 0;
+            this.finished = this.video?.ended ?? false;
         };
         this.handleWaiting = () => {
             this.buffering = true;
@@ -144,7 +146,8 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         this.handleState = (event) => {
             const video = this.video;
             this.playing = video ? !video.paused : false;
-            if (event.type === 'emptied' || event.type === 'pause') {
+            this.finished = video?.ended ?? false;
+            if (event.type === 'emptied' || event.type === 'ended' || event.type === 'pause') {
                 this.buffering = false;
             }
             if (event.type === 'play') {
@@ -438,6 +441,14 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         super.updated?.(changed);
         this.toggleAttribute('data-playing', this.playing);
         this.toggleAttribute('data-idle', this.idle && this.playing);
+        this.toggleState('ended', this.finished);
+        this.toggleState('error', this.failed);
+        this.toggleState('fullscreen', this.full);
+        this.toggleState('idle', this.idle && this.playing);
+        this.toggleState('muted', this.silent);
+        this.toggleState('paused', !this.playing);
+        this.toggleState('playing', this.playing);
+        this.toggleState('waiting', this.buffering);
         if (changed.has('media')) {
             this.video?.load();
         }
@@ -1010,6 +1021,9 @@ __decorate([
 __decorate([
     state()
 ], HelixHeadlessVideo.prototype, "playing", void 0);
+__decorate([
+    state()
+], HelixHeadlessVideo.prototype, "finished", void 0);
 __decorate([
     state()
 ], HelixHeadlessVideo.prototype, "position", void 0);

package/dist/virtual-list/root/virtual-list-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { AriaForwardController, commaList, customElement, elementById, HelixBeforeChangeEvent, HelixElement, HelixLoadMoreEvent, HelixRangeChangeEvent, isRtl, rangeAdd, requestChange, searchableById, selectsAll, Typeahead, toggleValue, typesCharacter, VirtualizeController, } from '@fusion.dev/helix-core';
+import { AriaForwardController, anchorAt, commaList, customElement, elementById, HelixElement, HelixLoadMoreEvent, HelixRangeChangeEvent, inRowOrder, isRtl, pressedOwnControl, rangeAdd, requestValue, searchableById, selectsAll, Typeahead, toggleValue, typesCharacter, VirtualizeController, } from '@fusion.dev/helix-core';
 import { html, nothing, render } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { holdControls, releaseControls } from '../controls.js';
@@ -98,9 +98,7 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
             if (at === undefined) {
                 return;
             }
-            const inner = path.slice(0, path.indexOf(row));
-            if (inner.some((node) => node instanceof HTMLElement &&
-                node.matches('a[href], button, input, select, textarea, label'))) {
+            if (pressedOwnControl(event, row, 'a[href], button, input, select, textarea, label')) {
                 return;
             }
             this.press(at, event.shiftKey && this.selectionMode === 'multiple');
@@ -270,8 +268,7 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
         const now = commaList(this.value);
         if (extend && mode === 'multiple') {
             const keys = this.keys();
-            const from = this.anchor === undefined ? -1 : keys.indexOf(this.anchor);
-            const range = rangeAdd(now, keys, from, at);
+            const range = rangeAdd(now, keys, anchorAt(keys, this.anchor, at).anchor, at);
             if (range) {
                 this.choose(this.inOrder(range));
             }
@@ -285,23 +282,14 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
         this.choose(this.inOrder(toggleValue(now, key)));
     }
     inOrder(keys) {
-        const wanted = new Set(keys);
-        const ordered = this.keys().filter((key) => wanted.has(key));
-        const placed = new Set(ordered);
-        return [...ordered, ...keys.filter((key) => !placed.has(key))].join(',');
+        return inRowOrder(keys, this.keys()).join(',');
     }
     choose(next) {
         if (next === this.value) {
             return;
         }
-        requestChange({
-            apply: (value) => {
-                this.value = value;
-                this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
-            },
-            event: (value) => new HelixBeforeChangeEvent({ value }),
-            host: this,
-            next,
+        requestValue(this, next, (value) => {
+            this.value = value;
         });
     }
     async focusIndex(index) {