@fusion.dev/helix-headless 0.164.0 → 0.166.0

package/dist/object-inspector/root/object-inspector-root.d.ts

@@ -390,6 +390,11 @@ export declare class HelixHeadlessObjectInspector extends HelixElement {
     private counted;
     /** Says how many entries the filter matched, and nothing for an empty one. */
     private tell;
+    /**
+     * Moves focus to the row the keys move from, or to the tree while that row
+     * is scrolled out of the window, as Tab reaches them.
+     */
+    focus(options?: FocusOptions): void;
     protected firstUpdated(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
     /**

package/dist/object-inspector/root/object-inspector-root.js

@@ -268,6 +268,11 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
             this.status.say(this.counted('result', this.found.size));
         }
     }
+    focus(options) {
+        this.renderRoot
+            ?.querySelector('#tree[tabindex="0"], #tree [tabindex="0"]')
+            ?.focus(options);
+    }
     firstUpdated(changed) {
         super.firstUpdated(changed);
         this.finishHydration();

package/dist/option/root/index.d.ts

@@ -0,0 +1 @@
+export * from './option-root.js';

package/dist/option/root/index.js

@@ -0,0 +1 @@
+export * from './option-root.js';

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

@@ -158,6 +158,13 @@ export declare class HelixHeadlessSteps extends HelixHeadlessSteps_base {
      * calls to `next()` in one task then move two stages.
      */
     private get at();
+    /**
+     * Requests a new current stage, and returns whether it moved.
+     *
+     * Where only a step's `current` says where the reader is, `active` is first
+     * written with that step, so `helix-activate` names it as `previous`.
+     */
+    requestActive(next: string, cause?: string): boolean;
     /**
      * Moves to the next stage that can be gone to, as Ark UI's `goToNextStep`
      * does. Returns whether it moved: not past the last stage, not into a stage

package/dist/steps/root/steps-root.js

@@ -65,6 +65,13 @@ let HelixHeadlessSteps = class HelixHeadlessSteps extends MixinControllerActive(
         const item = this.resolveActive(steps);
         return item ? steps.indexOf(item) : -1;
     }
+    requestActive(next, cause) {
+        const here = this.active === '' ? this.steps[this.at]?.value : undefined;
+        if (here) {
+            this.active = here;
+        }
+        return super.requestActive(next, cause);
+    }
     next() {
         return this.step(1);
     }

package/dist/tag/root/index.d.ts

@@ -0,0 +1 @@
+export * from './tag-root.js';

package/dist/tag/root/index.js

@@ -0,0 +1 @@
+export * from './tag-root.js';

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

@@ -1,6 +1,6 @@
 import { AriaForwardController, HelixFormElement, type HourCycle } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
-import '../../tag/index.js';
+import '../../tag/root/index.js';
 import '../../time-picker/index.js';
 declare const HelixHeadlessTimeInput_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinSegmentedFieldInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinPickerEditingInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinPickerFieldInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinTokensInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
 /**
@@ -349,8 +349,9 @@ export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base
     /**
      * Each time, where `mode` holds several, sent one entry each.
      *
-     * One time that is text and no time, such as `2:45 P`, is sent as an empty
-     * entry, as a native time field sends a time it cannot read.
+     * Text that is no time, such as `2:45 P`, is sent as one empty entry, as a
+     * native time field sends a time it cannot read. Measured before this: a
+     * range written `09:00/10:30` was invalid and submitted the text.
      */
     protected get answers(): readonly string[] | undefined;
     /** What is wrong with the times, which the text input cannot say. */

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

@@ -4,13 +4,13 @@ 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, 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 { AriaForwardController, valueAsTime as asTime, clockLocale, customElement, drawIcon, formatWords, timeAsValue as fromTime, HelixClearEvent, HelixFormElement, handedLocale, hostWords, isClockValue, MixinControllerOpen, MixinControllerValue, MixinField, MixinPickerEditing, MixinPickerField, MixinSegmentedField, MixinTokens, readWrittenTime, slottedWords, 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';
 import { html } from 'lit/static-html.js';
-import '../../tag/index.js';
+import '../../tag/root/index.js';
 import '../../time-picker/index.js';
 let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmentedField(MixinPickerEditing(MixinPickerField(MixinControllerOpen(MixinTokens(MixinControllerValue(MixinField(HelixFormElement))))))) {
     constructor() {
@@ -174,7 +174,8 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmented
     }
     get answers() {
         if (this.mode !== undefined) {
-            return this.held;
+            const held = this.held;
+            return held.every((one) => this.isTime(one)) ? held : [''];
         }
         const text = this.value.trim();
         return text === '' || this.isTime(text) ? undefined : [''];
@@ -242,7 +243,7 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmented
       variant=${this.variant ?? nothing}
       disable-times=${this.disableTimes || nothing}
       manual
-      label=${this.label || 'Time'}
+      label=${hostWords(this, slottedWords(this, ['label']) || this.label) || 'Time'}
       hour-cycle=${this.hourCycle ?? nothing}
       locale=${handedLocale(this) || nothing}
       max=${this.max}

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

@@ -1,7 +1,7 @@
 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';
+import '../../option/root/index.js';
 declare const HelixHeadlessTimePicker_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinPickerFeedbackInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & typeof HelixFormElement;
 /**
  * @summary A control for choosing a time from a list or from wheels.

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

@@ -10,7 +10,7 @@ import { property, state } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
 import { wheelName } from '../wheel-name.js';
 import '../../listbox/index.js';
-import '../../option/index.js';
+import '../../option/root/index.js';
 let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerFeedback(MixinControllerValue(HelixFormElement)) {
     constructor() {
         super(...arguments);
@@ -275,7 +275,8 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
             this.internals.setFormValue(null);
             return;
         }
-        reportValues(this.internals, this.name, this.held);
+        const held = this.held;
+        reportValues(this.internals, this.name, held.every((one) => valueAsSeconds(one) !== null) ? held : ['']);
     }
     async revealWhenSettled() {
         const settling = [
@@ -356,6 +357,7 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
       data-column=${part}
       aria-describedby=${this.describedBy}
       aria-invalid=${this.marked ? 'true' : nothing}
+      aria-required=${this.required ? '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,
         live: column-live, loading: column-loading, search: column-search, search-field: column-search-field"
@@ -408,6 +410,7 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
       part="list"
       aria-describedby=${this.describedBy}
       aria-invalid=${this.marked ? 'true' : nothing}
+      aria-required=${this.required ? '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,
         live: list-live, loading: list-loading, search: list-search, search-field: list-search-field"

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

@@ -115,6 +115,7 @@ import '../../menu/index.js';
  * @csspart captions-menu-header - The bar above a submenu, holding the way back and its name.
  * @csspart captions-menu-live - The inner menu's `live` part, a live region that repeats the empty and loading text for screen readers.
  * @csspart captions-menu-loading - The text shown while the items are loading.
+ * @csspart captions-menu-search-field - The inner menu's filter field, drawn with `filterable`.
  * @csspart captions-menu-surface - The floating panel the menu is drawn on.
  * @csspart captions-menu-title - The name of the submenu that is showing.
  * @csspart controls - The control bar along the bottom.
@@ -148,6 +149,7 @@ import '../../menu/index.js';
  * @csspart overflow-header - The bar above a submenu, holding the way back and its name.
  * @csspart overflow-live - The inner menu's `live` part, a live region that repeats the empty and loading text for screen readers.
  * @csspart overflow-loading - The text shown while the items are loading.
+ * @csspart overflow-search-field - The inner menu's filter field, drawn with `filterable`.
  * @csspart overflow-surface - The floating panel the menu is drawn on.
  * @csspart overflow-title - The name of the submenu that is showing.
  * @csspart pip - The picture-in-picture button, when `extra-controls` includes it and the browser supports it.

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

@@ -594,7 +594,8 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         }
         return html `<${this.tag('menu')} part="captions-menu"
     exportparts="back: captions-menu-back, back-mark: captions-menu-back-mark, empty: captions-menu-empty,
-      header: captions-menu-header, live: captions-menu-live, loading: captions-menu-loading, surface: captions-menu-surface,
+      header: captions-menu-header, live: captions-menu-live, loading: captions-menu-loading,
+      search-field: captions-menu-search-field, surface: captions-menu-surface,
       title: captions-menu-title" label=${this.subtitlesLabel} placement="top-end"
       @toggle=${(event) => this.heardMenu('captions', event)}>
       <button
@@ -804,7 +805,8 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
             ? nothing
             : html `<${this.tag('menu')} part="overflow"
           exportparts="back: overflow-back, back-mark: overflow-back-mark, empty: overflow-empty,
-            header: overflow-header, live: overflow-live, loading: overflow-loading, surface: overflow-surface,
+            header: overflow-header, live: overflow-live, loading: overflow-loading,
+            search-field: overflow-search-field, surface: overflow-surface,
             title: overflow-title" label=${this.moreLabel} placement="top-end"
             @toggle=${(event) => this.heardMenu('overflow', event)}>
               <button

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

@@ -38,6 +38,7 @@ import '../../menu/index.js';
  * @csspart menu-header - The bar above a submenu, holding the back button and the submenu's name.
  * @csspart menu-live - The inner menu's `live` part, the region screen readers announce its empty and loading messages from.
  * @csspart menu-loading - Shown while the items are loading.
+ * @csspart menu-search-field - The inner menu's filter field, drawn with `filterable`.
  * @csspart menu-surface - The floating panel the menu is drawn on.
  * @csspart menu-title - The name of the submenu that is shown.
  * @csspart poster - An entry's poster image, if it has one.

package/dist/video-playlist/menu/video-playlist-menu.js

@@ -84,7 +84,7 @@ let HelixHeadlessVideoPlaylistMenu = class HelixHeadlessVideoPlaylistMenu extend
     renderMenu() {
         return html `<${this.tag('menu')} part="menu"
     exportparts="back: menu-back, back-mark: menu-back-mark, empty: menu-empty, header: menu-header,
-      live: menu-live, loading: menu-loading, surface: menu-surface, title: menu-title" label=${this.label} placement=${this.placement}
+      live: menu-live, loading: menu-loading, search-field: menu-search-field, surface: menu-surface, title: menu-title" label=${this.label} placement=${this.placement}
       @toggle=${this.heardToggle}>
       <slot name="trigger" slot="trigger">
         <button

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

@@ -47,8 +47,16 @@ let HelixHeadlessVideoPlaylist = class HelixHeadlessVideoPlaylist extends MixinC
             if (event.defaultPrevented) {
                 return;
             }
+            const value = event.detail.value;
+            const player = this.player;
+            if (value === this.active) {
+                if (player && player.paused !== false) {
+                    void Promise.resolve(player.play()).catch(() => { });
+                }
+                return;
+            }
             this.chased = true;
-            this.requestActive(event.detail.value, 'press');
+            this.requestActive(value, 'press');
         };
         this.handleFocusIn = (event) => {
             const entry = event.target;
@@ -259,6 +267,12 @@ let HelixHeadlessVideoPlaylist = class HelixHeadlessVideoPlaylist extends MixinC
         if (changed.has('shuffle') && !this.shuffle) {
             this.dealt = undefined;
         }
+        if (this.active === '' && this.childrenKnown) {
+            const opening = this.resolveActive(this.items);
+            if (opening) {
+                this.active = opening.value;
+            }
+        }
     }
     updated(changed) {
         super.updated?.(changed);