@fusion.dev/helix-headless 0.147.0 → 0.149.0

package/dist/trend/root/trend-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 { customElement, HelixElement, reportRuntime } from '@fusion.dev/helix-core';
+import { customElement, formatWords, HelixElement, reportRuntime, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { arrowDown, arrowUp, minus } from '@fusion.dev/helix-icons';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -21,11 +21,13 @@ let HelixHeadlessTrend = class HelixHeadlessTrend extends HelixElement {
         super(...arguments);
         this.betterLabel = 'better';
         this.downLabel = 'Down';
+        this.judgmentLabel = '{judgment, select, better {{direction}, {betterLabel}} worse {{direction}, {worseLabel}} other {{direction}}}';
         this.locale = '';
         this.unchangedLabel = 'Unchanged';
         this.upLabel = 'Up';
         this.worseLabel = 'worse';
     }
+    static { this.words = 'helix-trend'; }
     renderIcon(icon) {
         return html `<slot aria-hidden="true" name="icon"
       ><svg
@@ -69,8 +71,12 @@ let HelixHeadlessTrend = class HelixHeadlessTrend extends HelixElement {
     render() {
         const moved = this.moved;
         const direction = readDirection(moved);
-        const judged = this.judged;
-        const judgment = judged ? `, ${judged === 'better' ? this.betterLabel : this.worseLabel}` : '';
+        const said = formatWords(this, 'judgmentLabel', {
+            betterLabel: this.betterLabel,
+            direction: this[direction.word],
+            judgment: this.judged ?? 'none',
+            worseLabel: this.worseLabel,
+        });
         const icon = this.renderIcon(direction.icon);
         const glyph = moved === 'up'
             ? html `<slot aria-hidden="true" name="up-icon">${icon}</slot>`
@@ -80,20 +86,22 @@ let HelixHeadlessTrend = class HelixHeadlessTrend extends HelixElement {
         const value = this.value;
         const figure = value === undefined || !Number.isFinite(value)
             ? ''
-            : figureOf(value, this.locale, this.formatOptions);
+            : figureOf(value, wordsLocale(this), this.formatOptions);
         return html `${glyph}
-      <span part="direction">${`${this[direction.word]}${judgment}`}</span>
+      <span part="direction">${said}</span>
       <span part="value" ?hidden=${figure === ''}>${figure}</span><slot></slot>
       <slot name="label"></slot>`;
     }
 };
 __decorate([
+    words,
     property({ attribute: 'better-label' })
 ], HelixHeadlessTrend.prototype, "betterLabel", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessTrend.prototype, "direction", void 0);
 __decorate([
+    words,
     property({ attribute: 'down-label' })
 ], HelixHeadlessTrend.prototype, "downLabel", void 0);
 __decorate([
@@ -102,6 +110,10 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessTrend.prototype, "good", void 0);
+__decorate([
+    words,
+    property({ attribute: 'judgment-label' })
+], HelixHeadlessTrend.prototype, "judgmentLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessTrend.prototype, "locale", void 0);
@@ -109,15 +121,18 @@ __decorate([
     property({ reflect: true })
 ], HelixHeadlessTrend.prototype, "movement", void 0);
 __decorate([
+    words,
     property({ attribute: 'unchanged-label' })
 ], HelixHeadlessTrend.prototype, "unchangedLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'up-label' })
 ], HelixHeadlessTrend.prototype, "upLabel", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessTrend.prototype, "value", void 0);
 __decorate([
+    words,
     property({ attribute: 'worse-label' })
 ], HelixHeadlessTrend.prototype, "worseLabel", void 0);
 HelixHeadlessTrend = __decorate([

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

@@ -161,8 +161,22 @@ 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 {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-video': { playLabel: 'Abspielen' } })`.
+     */
+    static words: string;
     /**
      * Whether the video starts playing on its own. Browsers allow this only while
      * it is muted.
@@ -265,7 +279,8 @@ export declare class HelixHeadlessVideo extends HelixElement {
      */
     extraControls: string;
     /**
-     * What the control that skips ahead is called, with `{seconds}` filled in.
+     * What the control that skips ahead is called. `{seconds}` is how far, written
+     * in the locale, and each language writes the forms it has.
      */
     forwardLabel: string;
     /**
@@ -337,7 +352,9 @@ export declare class HelixHeadlessVideo extends HelixElement {
      */
     pauseLabel: string;
     /**
-     * How the volume is read out, with `{percent}` filled in.
+     * How the volume is read out. `{percent}` is the volume from 0 to 100,
+     * written in the locale, and a language that needs plural forms writes them
+     * with `{percent, plural, ...}`.
      */
     percentLabel: string;
     /**
@@ -374,7 +391,8 @@ export declare class HelixHeadlessVideo extends HelixElement {
      */
     remoteLabel: string;
     /**
-     * What the control that skips back is called, with `{seconds}` filled in.
+     * What the control that skips back is called. `{seconds}` is how far, written
+     * in the locale, and each language writes the forms it has.
      */
     rewindLabel: string;
     /**
@@ -452,6 +470,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

@@ -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 { activeCue, adoptTrack, CueController, captionsAmong, captionTracks, copiesOf, customElement, drawIcon, FullscreenController, fillTemplate, HelixElement, HelixNextEvent, HelixPreviousEvent, IdleController, MediaSessionController, onUnlessFalse, RemotePlaybackController, reportRuntime, SKIP_SECONDS, sameCopies, showCaption, writtenList, writtenNumbers, } from '@fusion.dev/helix-core';
+import { activeCue, adoptTrack, CueController, captionsAmong, captionTracks, copiesOf, customElement, drawIcon, FullscreenController, formatWords, HelixElement, HelixNextEvent, HelixPreviousEvent, IdleController, MediaSessionController, onUnlessFalse, RemotePlaybackController, reportRuntime, SKIP_SECONDS, sameCopies, showCaption, words, writtenList, writtenNumbers, } from '@fusion.dev/helix-core';
 import { airplay, arrowClockwise, arrowCounterClockwise, closedCaptioning, cornersIn, cornersOut, dotsThreeVertical, download, gauge, pause, pictureInPicture, play, skipBack, skipForward, speakerHigh, speakerX, } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -41,7 +41,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         this.downloadLabel = 'Download';
         this.errorLabel = 'This video could not be played';
         this.extraControls = '';
-        this.forwardLabel = 'Forward {seconds} seconds';
+        this.forwardLabel = '{seconds, plural, one {Forward # second} other {Forward # seconds}}';
         this.fullscreenLabel = 'Fullscreen';
         this.idleDelay = 2500;
         this.label = '';
@@ -61,7 +61,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         this.preload = 'metadata';
         this.previousLabel = 'Previous';
         this.remoteLabel = 'Play on another device';
-        this.rewindLabel = 'Back {seconds} seconds';
+        this.rewindLabel = '{seconds, plural, one {Back # second} other {Back # seconds}}';
         this.seekLabel = 'Seek';
         this.speedLabel = 'Playback speed';
         this.speeds = '0.5 1 1.5 2';
@@ -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') {
@@ -207,6 +210,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         };
         this.captions = [];
     }
+    static { this.words = 'helix-video'; }
     get conditions() {
         return {
             hydrating: this.hydrating,
@@ -438,6 +442,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();
         }
@@ -458,7 +470,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
             return html `<button
         part="rewind"
         type="button"
-        aria-label=${fillTemplate(this.rewindLabel, { seconds: SKIP_SECONDS })}
+        aria-label=${formatWords(this, 'rewindLabel', { seconds: SKIP_SECONDS })}
         @click=${() => this.skipBy(-SKIP_SECONDS)}
       >
         <slot name="rewind-icon">${drawIcon(arrowCounterClockwise)}</slot>
@@ -468,7 +480,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
             return html `<button
         part="forward"
         type="button"
-        aria-label=${fillTemplate(this.forwardLabel, { seconds: SKIP_SECONDS })}
+        aria-label=${formatWords(this, 'forwardLabel', { seconds: SKIP_SECONDS })}
         @click=${() => this.skipBy(SKIP_SECONDS)}
       >
         <slot name="forward-icon">${drawIcon(arrowClockwise)}</slot>
@@ -632,7 +644,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         ${back
                 ? html `<slot name="rewind-icon" slot="start">${drawIcon(arrowCounterClockwise)}</slot>`
                 : html `<slot name="forward-icon" slot="start">${drawIcon(arrowClockwise)}</slot>`}
-        ${fillTemplate(back ? this.rewindLabel : this.forwardLabel, { seconds: SKIP_SECONDS })}
+        ${formatWords(this, back ? 'rewindLabel' : 'forwardLabel', { seconds: SKIP_SECONDS })}
       </${this.tag('menu-item')}>`;
         }
         if (one === 'previous') {
@@ -679,6 +691,9 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
     }
     renderBar() {
         const done = this.knownDuration > 0 ? this.position / this.knownDuration : 0;
+        const progress = `--video-progress: ${done}`;
+        const level = `--video-level: ${this.silent ? 0 : this.loudness}`;
+        const { fullscreenLabel, muteLabel, seekLabel, volumeLabel } = this;
         return html `<div part="controls">
       <button
         part="play"
@@ -705,19 +720,19 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         max=${Number.isFinite(this.knownDuration) && this.knownDuration > 0 ? this.knownDuration : 0}
         step="0.01"
         .value=${String(this.position)}
-        aria-label=${this.seekLabel}
-        aria-valuetext=${fillTemplate(this.timeLabel, {
+        aria-label=${seekLabel}
+        aria-valuetext=${formatWords(this, 'timeLabel', {
             duration: clock(this.knownDuration),
             position: clock(this.position),
         })}
-        style=${`--video-progress: ${done}`}
+        style=${progress}
         @input=${this.takeScrub}
       />
       <span part="sound">
       <button
         part="mute"
         type="button"
-        aria-label=${this.muteLabel}
+        aria-label=${muteLabel}
         aria-pressed=${this.silent ? 'true' : 'false'}
         @click=${() => {
             const video = this.video;
@@ -737,11 +752,11 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         max="1"
         step="0.05"
         .value=${String(this.silent ? 0 : this.loudness)}
-        aria-label=${this.volumeLabel}
-        aria-valuetext=${fillTemplate(this.percentLabel, {
+        aria-label=${volumeLabel}
+        aria-valuetext=${formatWords(this, 'percentLabel', {
             percent: Math.round((this.silent ? 0 : this.loudness) * 100),
         })}
-        style=${`--video-level: ${this.silent ? 0 : this.loudness}`}
+        style=${level}
         @input=${this.takeVolume}
       />
       </span>
@@ -771,7 +786,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
       <button
         part="fullscreen"
         type="button"
-        aria-label=${this.fullscreenLabel}
+        aria-label=${fullscreenLabel}
         aria-pressed=${this.full ? 'true' : 'false'}
         @click=${() => void this.fullscreen.toggle()}
       >
@@ -885,9 +900,11 @@ __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessVideo.prototype, "autoplay", void 0);
 __decorate([
+    words,
     property({ attribute: 'captions-label' })
 ], HelixHeadlessVideo.prototype, "captionsLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'captions-off-label' })
 ], HelixHeadlessVideo.prototype, "captionsOffLabel", void 0);
 __decorate([
@@ -906,18 +923,22 @@ __decorate([
     property({ attribute: 'disableremoteplayback', reflect: true, type: Boolean })
 ], HelixHeadlessVideo.prototype, "disableRemotePlayback", void 0);
 __decorate([
+    words,
     property({ attribute: 'download-label' })
 ], HelixHeadlessVideo.prototype, "downloadLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'error-label' })
 ], HelixHeadlessVideo.prototype, "errorLabel", void 0);
 __decorate([
     property({ attribute: 'extra-controls' })
 ], HelixHeadlessVideo.prototype, "extraControls", void 0);
 __decorate([
+    words,
     property({ attribute: 'forward-label' })
 ], HelixHeadlessVideo.prototype, "forwardLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'fullscreen-label' })
 ], HelixHeadlessVideo.prototype, "fullscreenLabel", void 0);
 __decorate([
@@ -927,36 +948,45 @@ __decorate([
     property()
 ], HelixHeadlessVideo.prototype, "label", void 0);
 __decorate([
+    words,
     property({ attribute: 'loading-label' })
 ], HelixHeadlessVideo.prototype, "loadingLabel", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessVideo.prototype, "loop", void 0);
 __decorate([
+    words,
     property({ attribute: 'more-label' })
 ], HelixHeadlessVideo.prototype, "moreLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'mute-label' })
 ], HelixHeadlessVideo.prototype, "muteLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'next-label' })
 ], HelixHeadlessVideo.prototype, "nextLabel", void 0);
 __decorate([
     property({ attribute: 'overflow-controls' })
 ], HelixHeadlessVideo.prototype, "overflowControls", void 0);
 __decorate([
+    words,
     property({ attribute: 'pause-label' })
 ], HelixHeadlessVideo.prototype, "pauseLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'percent-label' })
 ], HelixHeadlessVideo.prototype, "percentLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'pip-label' })
 ], HelixHeadlessVideo.prototype, "pipLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'player-label' })
 ], HelixHeadlessVideo.prototype, "playerLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'play-label' })
 ], HelixHeadlessVideo.prototype, "playLabel", void 0);
 __decorate([
@@ -969,18 +999,23 @@ __decorate([
     property()
 ], HelixHeadlessVideo.prototype, "preload", void 0);
 __decorate([
+    words,
     property({ attribute: 'previous-label' })
 ], HelixHeadlessVideo.prototype, "previousLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'remote-label' })
 ], HelixHeadlessVideo.prototype, "remoteLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'rewind-label' })
 ], HelixHeadlessVideo.prototype, "rewindLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'seek-label' })
 ], HelixHeadlessVideo.prototype, "seekLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'speed-label' })
 ], HelixHeadlessVideo.prototype, "speedLabel", void 0);
 __decorate([
@@ -993,12 +1028,15 @@ __decorate([
     property({ attribute: 'start-control' })
 ], HelixHeadlessVideo.prototype, "startControl", void 0);
 __decorate([
+    words,
     property({ attribute: 'subtitles-label' })
 ], HelixHeadlessVideo.prototype, "subtitlesLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'time-label' })
 ], HelixHeadlessVideo.prototype, "timeLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'volume-label' })
 ], HelixHeadlessVideo.prototype, "volumeLabel", void 0);
 __decorate([
@@ -1010,6 +1048,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/video-playlist/menu/video-playlist-menu.d.ts

@@ -43,6 +43,11 @@ import '../../menu/index.js';
  * @csspart trigger - The button that opens the menu.
  */
 export declare class HelixHeadlessVideoPlaylistMenu extends HelixElement {
+    /**
+     * The key this part's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-video-playlist-menu': { label: 'Folgen' } })`.
+     */
+    static words: string;
     /**
      * The name of the menu and its trigger, read by screen readers.
      *

package/dist/video-playlist/menu/video-playlist-menu.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 { closestInstance, customElement, drawIcon, HelixElement, HelixSelectEvent, } from '@fusion.dev/helix-core';
+import { closestInstance, customElement, drawIcon, HelixElement, HelixSelectEvent, words, } from '@fusion.dev/helix-core';
 import { list } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -36,6 +36,7 @@ let HelixHeadlessVideoPlaylistMenu = class HelixHeadlessVideoPlaylistMenu extend
             this.dispatchEvent(new HelixSelectEvent({ value }));
         };
     }
+    static { this.words = 'helix-video-playlist-menu'; }
     connectedCallback() {
         super.connectedCallback();
         this.updateComplete.then(() => this.watch());
@@ -108,6 +109,7 @@ let HelixHeadlessVideoPlaylistMenu = class HelixHeadlessVideoPlaylistMenu extend
     }
 };
 __decorate([
+    words,
     property()
 ], HelixHeadlessVideoPlaylistMenu.prototype, "label", void 0);
 __decorate([

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

@@ -53,6 +53,11 @@ declare const HelixHeadlessVideoPlaylist_base: (new (...args: any[]) => import("
  * @csspart player - The region that holds the player.
  */
 export declare class HelixHeadlessVideoPlaylist extends HelixHeadlessVideoPlaylist_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-video-playlist': { label: 'Wiedergabeliste' } })`.
+     */
+    static words: string;
     /**
      * The list's name, read by screen readers.
      */

package/dist/video-playlist/root/video-playlist-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 { customElement, HelixElement, HelixEndEvent, MixinControllerActive, } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, HelixEndEvent, MixinControllerActive, words, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { HelixHeadlessVideoPlaylistItem } from '../item/video-playlist-item.js';
@@ -44,6 +44,7 @@ let HelixHeadlessVideoPlaylist = class HelixHeadlessVideoPlaylist extends MixinC
             this.step(1);
         };
     }
+    static { this.words = 'helix-video-playlist'; }
     get items() {
         return [...this.querySelectorAll('*')].filter((one) => one instanceof HelixHeadlessVideoPlaylistItem && one.value !== '');
     }
@@ -139,6 +140,7 @@ let HelixHeadlessVideoPlaylist = class HelixHeadlessVideoPlaylist extends MixinC
     }
 };
 __decorate([
+    words,
     property()
 ], HelixHeadlessVideoPlaylist.prototype, "label", void 0);
 __decorate([

package/dist/virtual-list/root/virtual-list-root.d.ts

@@ -94,7 +94,9 @@ export interface VirtualListRange {
  * **Row height.** Rows are placed by `estimate` until they are drawn. Then the
  * list reads the drawn rows' height once and places every row by it, so a
  * wrong estimate still reaches the last item. Set `measured` for rows of
- * different heights.
+ * different heights. Once the list draws rows of different heights, such as
+ * rows that wrap on a narrow screen, it places each row by its own height
+ * whether `measured` is set or not.
  *
  * The list follows its source. A new `items` array, an edit to the script's
  * text, or a script replaced under the same id draws the new rows. A row that
@@ -123,6 +125,11 @@ export interface VirtualListRange {
  * @csspart viewport - The scrolling box. On this tier, it needs only a block size.
  */
 export declare class HelixHeadlessVirtualList extends HelixElement {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-virtual-list': { loadingLabel: 'Weitere werden geladen' } })`.
+     */
+    static words: string;
     /**
      * How many items a line holds. One, the default, is a list; more lays the
      * items out as a grid of that many equal columns, windowed a line at a
@@ -176,7 +183,8 @@ export declare class HelixHeadlessVirtualList extends HelixElement {
     /**
      * Places each row by its own measured height. Without it, rows are placed
      * by one height: `estimate` until rows are drawn, then the drawn rows' height,
-     * read once.
+     * read once. Rows that come out different heights are placed by their own
+     * heights either way.
      *
      * **Off by default, because the straight line is better when it holds.** One
      * height makes offset and index convert by division, which can never
@@ -393,7 +401,15 @@ export declare class HelixHeadlessVirtualList extends HelixElement {
     private stamp;
     /** Fills a drawn row from its item, by `renderItem` or by the template's holes. */
     private fill;
-    /** New elements for item `at`: a `<div>` for `renderItem`, or the template's clone. */
+    /**
+     * New elements for item `at`: a `<div>` for `renderItem`, or the template's clone.
+     *
+     * **Only the template's elements are drawn.** The whitespace around them is
+     * text, and `place` takes rows out by their elements, so every text node
+     * drawn stayed in the list. Measured on the preview in Chromium: 3,846 nodes
+     * after 1,900 rows, and a window move cost 1.9 milliseconds where it had
+     * cost 0.34 at the top.
+     */
     private draw;
     /**
      * Puts the windowed rows into the light DOM, and takes the rest out.

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, words, } 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');
@@ -120,6 +118,7 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
             this.requestUpdate();
         };
     }
+    static { this.words = 'helix-virtual-list'; }
     get range() {
         return this.itemsOn(this.virtualize.visible());
     }
@@ -206,6 +205,7 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
         super.updated?.(changed);
         this.virtualize.measure();
         this.place();
+        this.virtualize.settle();
         this.report();
     }
     read() {
@@ -270,8 +270,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 +284,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) {
@@ -366,7 +356,7 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
             fragment.append(document.createElement('div'));
         }
         else if (template) {
-            fragment.append(template.content.cloneNode(true));
+            fragment.append(...template.content.cloneNode(true).children);
         }
         this.fill([...fragment.children], at);
         return fragment;
@@ -492,6 +482,7 @@ __decorate([
     property({ type: Boolean })
 ], HelixHeadlessVirtualList.prototype, "loading", void 0);
 __decorate([
+    words,
     property({ attribute: 'loading-label' })
 ], HelixHeadlessVirtualList.prototype, "loadingLabel", void 0);
 __decorate([