@fusion.dev/helix-headless 0.171.0 → 0.173.0

package/dist/splitter/root/splitter-root.js

@@ -55,7 +55,7 @@ let HelixHeadlessSplitter = class HelixHeadlessSplitter extends HelixElement {
         return this.toPercent(this.min, 0);
     }
     get maxPercent() {
-        return this.toPercent(this.max, 100);
+        return Math.min(this.toPercent(this.max, 100), 100 - this.toPercent(this.endMin, 0));
     }
     get position() {
         const shut = this.collapsed;
@@ -141,10 +141,14 @@ let HelixHeadlessSplitter = class HelixHeadlessSplitter extends HelixElement {
     }
     shutAt(position) {
         const size = this.sliver;
-        if (position <= size) {
+        if (position <= size && this.canCollapse('start')) {
             return 'start';
         }
-        return position >= 100 - size ? 'end' : undefined;
+        return position >= 100 - size && this.canCollapse('end') ? 'end' : undefined;
+    }
+    canCollapse(pane) {
+        const collapsible = this.collapsible ?? 'both';
+        return collapsible === 'both' || collapsible === pane;
     }
     clamp(next) {
         const min = Math.max(0, Math.min(100, this.minPercent));
@@ -250,6 +254,10 @@ let HelixHeadlessSplitter = class HelixHeadlessSplitter extends HelixElement {
     }
     toggleCollapse() {
         const shut = this.collapsed;
+        const pane = this.collapsible === 'end' ? 'end' : 'start';
+        if (!shut && !this.canCollapse(pane)) {
+            return;
+        }
         const opened = shut ? undefined : this.position;
         requestChange({
             apply: (value) => {
@@ -266,7 +274,7 @@ let HelixHeadlessSplitter = class HelixHeadlessSplitter extends HelixElement {
             },
             event: (value) => new HelixBeforeCollapseEvent({ value }),
             host: this,
-            next: shut ? '' : 'start',
+            next: shut ? '' : pane,
         });
     }
     reset() {
@@ -280,6 +288,7 @@ let HelixHeadlessSplitter = class HelixHeadlessSplitter extends HelixElement {
         this.cornerLabel = 'Resize both';
         this.cornerValueLabel = '{across} across, {down} down';
         this.defaultPosition = 50;
+        this.endMin = 0;
         this.label = 'Resize panes';
         this.aria = new AriaForwardController(this, {
             label: true,
@@ -665,6 +674,9 @@ __decorate([
 __decorate([
     property({ attribute: 'collapsed-size', type: Number })
 ], HelixHeadlessSplitter.prototype, "collapsedSize", void 0);
+__decorate([
+    property()
+], HelixHeadlessSplitter.prototype, "collapsible", void 0);
 __decorate([
     words,
     property({ attribute: 'corner-label' })
@@ -679,6 +691,9 @@ __decorate([
 __decorate([
     property({ attribute: 'default-position', type: Number })
 ], HelixHeadlessSplitter.prototype, "defaultPosition", void 0);
+__decorate([
+    property({ attribute: 'end-min' })
+], HelixHeadlessSplitter.prototype, "endMin", void 0);
 __decorate([
     words,
     property()

package/dist/tag/group/tag-group.d.ts

@@ -22,7 +22,8 @@ export type TagSelectionMode = SelectionMode;
  * not disabled. `selection-behavior="replace"` selects the tag a reader
  * presses or moves to alone, as a file list does, and Control or Command
  * with a press or Space adds or takes out one tag. `disallow-empty-selection`
- * keeps one tag selected once one is. `value` holds the
+ * keeps one tag selected once one is, and Escape lets go of the selection
+ * otherwise. `value` holds the
  * selected tags' values, separated by commas, and a change asks with
  * `helix-before-change` and tells with `change`. Enter on a tag with an
  * `href` follows its link. A `disabled` tag is passed over. A selected tag
@@ -40,6 +41,12 @@ export type TagSelectionMode = SelectionMode;
  * Where only disabled tags are left, the first of them holds the tab stop and
  * takes focus, so the reader stays in the set.
  *
+ * **Typing new tags.** A field where people type tags and press Enter to add
+ * each one is Combobox with `multiple` and `allows-custom-value`, or
+ * `creatable` to ask first with `helix-create`. It draws each value as a tag,
+ * Backspace on the empty field removes the last one, and the arrow keys move
+ * between them.
+ *
  * @since 0.1.0
  * @status stable
  * @aliases Tag list, Chip group, Token list

package/dist/tag/group/tag-group.js

@@ -46,6 +46,14 @@ let HelixHeadlessTagGroup = class HelixHeadlessTagGroup extends HelixElement {
             if (event.ctrlKey || event.metaKey) {
                 return;
             }
+            if (event.key === 'Escape') {
+                if (this.selectionMode && this.written !== '' && !this.disallowEmptySelection) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    this.ask('');
+                }
+                return;
+            }
             if (MOVES.has(event.key)) {
                 const to = this.last;
                 if (multiple && event.shiftKey && to && to !== tag) {

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

@@ -28,6 +28,12 @@ declare const HelixHeadlessTag_base: (new (...args: any[]) => import("@fusion.de
  * selected. Its remove button leaves the tab order there, Delete and Backspace
  * doing its job from the row.
  *
+ * **Styling a tag by what is happening to it.** `:state(selected)` while it is
+ * selected, `:state(focus-visible)` while its cell shows keyboard focus,
+ * `[disabled]` while it is out of reach, and the host's own `:hover` and
+ * `:active` under the pointer, as React Aria's `data-hovered` and
+ * `data-pressed` are.
+ *
  * @since 0.1.0
  * @status stable
  * @category markers
@@ -47,6 +53,7 @@ declare const HelixHeadlessTag_base: (new (...args: any[]) => import("@fusion.de
  * @csspart link - The link around the label, under `href`.
  * @csspart start - The category before the label.
  *
+ * @cssstate focus-visible - The tag's cell has keyboard focus that the browser shows, in a `Tag.Group`.
  * @cssstate selected - The tag is selected in a `Tag.Group` that selects.
  */
 export declare class HelixHeadlessTag extends HelixHeadlessTag_base {
@@ -131,6 +138,11 @@ export declare class HelixHeadlessTag extends HelixHeadlessTag_base {
      */
     private get removeName();
     protected firstUpdated(changed: PropertyValues): void;
+    /**
+     * Says whether the cell shows keyboard focus, as `:focus-visible` does, so a
+     * sheet outside can draw the ring on the tag by the host.
+     */
+    private readonly handleCellFocus;
     protected render(): TemplateResult;
     /** The label, inside a link under `href`, behind a seam a tier can move. */
     protected renderLabel(): TemplateResult;

package/dist/tag/root/tag-root.js

@@ -15,6 +15,16 @@ let HelixHeadlessTag = class HelixHeadlessTag extends MixinDismissible(HelixElem
         this.dismissTabStop = true;
         this.href = '';
         this.value = '';
+        this.handleCellFocus = (event) => {
+            const cell = event.currentTarget;
+            let shown = false;
+            try {
+                shown = event.type === 'focus' && cell.matches(':focus-visible');
+            }
+            catch {
+            }
+            this.toggleState('focus-visible', shown);
+        };
     }
     static { this.words = 'helix-tag'; }
     get words() {
@@ -66,6 +76,8 @@ let HelixHeadlessTag = class HelixHeadlessTag extends MixinDismissible(HelixElem
           part="cell"
           role="gridcell"
           tabindex=${this.focusable ? '0' : '-1'}
+          @focus=${this.handleCellFocus}
+          @blur=${this.handleCellFocus}
           >${content}</span
         >`
             : content;

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

@@ -217,6 +217,14 @@ export declare class HelixHeadlessTextarea extends HelixHeadlessTextarea_base {
      * and so does this.
      */
     setSelectionRange(start: number, end: number, direction?: SelectionDirection): void;
+    /**
+     * Replaces a range of the text, as the native method does: the selection
+     * where `start` and `end` are left out, and `selectMode` says what is
+     * selected after. It sends no event, as the native method sends none.
+     */
+    setRangeText(replacement: string, start?: number, end?: number, selectMode?: SelectionMode): void;
+    /** Selects everything in the field. */
+    select(): void;
     /** How many characters the value holds. */
     get textLength(): number;
     /** The control's type, which is always `textarea`. */

package/dist/textarea/root/textarea-root.js

@@ -111,6 +111,22 @@ let HelixHeadlessTextarea = class HelixHeadlessTextarea extends MixinControllerV
     setSelectionRange(start, end, direction) {
         this.control?.setSelectionRange(start, end, direction);
     }
+    setRangeText(replacement, start, end, selectMode) {
+        const control = this.control;
+        if (!control) {
+            return;
+        }
+        if (start === undefined || end === undefined) {
+            control.setRangeText(replacement);
+        }
+        else {
+            control.setRangeText(replacement, start, end, selectMode);
+        }
+        this.value = control.value;
+    }
+    select() {
+        this.control?.select();
+    }
     get textLength() {
         return this.value.length;
     }

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

@@ -469,6 +469,20 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
      * The validation message for a time that `step` skips.
      */
     stepMismatchMessage: string;
+    /**
+     * What each time in the list shows: a function given the time as `HH:mm`,
+     * or `HH:mm:ss` with `seconds`, and the time as the row writes it, that
+     * returns text, an element or a Lit template.
+     *
+     * For the seats left at a time, or a caption under it, as React Aria's
+     * `ListBoxItem` takes children. Content with `slot="start"`, `slot="end"`
+     * or `slot="description"` goes to that slot of the row, and a description
+     * is read after the time. The row is still named by the written time, and
+     * typeahead still finds it by that. Return the written time with your
+     * content where it should still show. A property only, there being no way
+     * to write a function in markup. The wheels draw their own figures.
+     */
+    timeContent?: ((time: string, written: string) => unknown) | undefined;
     /**
      * The validation message for a time that `disable-times` bars.
      */

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

@@ -480,6 +480,8 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
       ${this.times.map((seconds) => {
             const at = this.valueFor(seconds);
             const between = this.between(at);
+            const written = writeClock(at, this.clock, this.seconds);
+            const drawn = this.timeContent;
             return html `<${this.tag('option')}
           part="option${between ? ' option-between' : ''}"
           exportparts="description: option-description, item: option-item,
@@ -489,7 +491,9 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
           ?disabled=${this.barred(at)}
           ?selected=${this.held.includes(at)}
           data-between=${between ? '' : nothing}
-          >${writeClock(at, this.clock, this.seconds)}</${this.tag('option')}
+          aria-label=${drawn ? written : nothing}
+          text-value=${drawn ? written : nothing}
+          >${drawn ? drawn(at, written) : written}</${this.tag('option')}
         >`;
         })}
       <slot name="empty" slot="empty">${this.emptyText}</slot>
@@ -600,6 +604,9 @@ __decorate([
     words,
     property({ attribute: 'step-mismatch-message' })
 ], HelixHeadlessTimePicker.prototype, "stepMismatchMessage", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessTimePicker.prototype, "timeContent", void 0);
 __decorate([
     words,
     property({ attribute: 'unavailable-message' })

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

@@ -14,7 +14,9 @@ type TimelineTone = 'danger' | 'info' | 'neutral' | 'primary' | 'success' | 'war
  * hours ago", from `datetime`, where the `time` slot is empty. The words move
  * on as they go stale, "3 hours ago" becoming "4 hours ago", with one wakeup
  * shared by every reading on the page, as `FormatDate` keeps its own. They are
- * in the language of the page, or of the nearest `lang`.
+ * in the language of the page, or of the nearest `lang`. The whole date and
+ * time is the reading's `title`, so a pointer resting on "3 hours ago" shows
+ * when it was, and a screen reader reads it as the description.
  *
  * Each entry draws the connector line that arrives at it and hides it when it
  * is the first entry, using `:host(:first-child)`. This needs no index, no
@@ -77,6 +79,8 @@ export declare class HelixHeadlessTimelineItem extends HelixElement {
      * otherwise.
      */
     private reading;
+    /** The whole date and time `datetime` names, the reading's title under `relative`. */
+    private whole;
     /** The instant `datetime` names, where `relative` asks for a reading of it. */
     private get moment();
     /** What the reading says at `now`, and when it stops being true. */

package/dist/timeline/item/timeline-item.js

@@ -21,6 +21,7 @@ let HelixHeadlessTimelineItem = class HelixHeadlessTimelineItem extends HelixEle
             },
         });
         this.reading = '';
+        this.whole = '';
         this.pendingLabel = 'Scheduled';
         this.toneLabel = '';
         this.toneLabels = {
@@ -52,6 +53,13 @@ let HelixHeadlessTimelineItem = class HelixHeadlessTimelineItem extends HelixEle
         }
         const moment = this.moment;
         this.reading = moment ? this.readingAt(moment, new Date(this.clock.now)).text : '';
+        const dateOnly = /^\d{4}-\d{2}-\d{2}$/.test(this.datetime);
+        this.whole = moment
+            ? new Intl.DateTimeFormat(wordsLocale(this), {
+                dateStyle: 'long',
+                ...(dateOnly ? { timeZone: 'UTC' } : { timeStyle: 'short' }),
+            }).format(moment)
+            : '';
         hostAria(this.internals, { role: 'listitem' });
     }
     renderMarker() {
@@ -78,6 +86,7 @@ let HelixHeadlessTimelineItem = class HelixHeadlessTimelineItem extends HelixEle
             : html `<time
               part="time"
               datetime=${this.datetime}
+              title=${this.whole || nothing}
               >${when}</time
             >`}
       <div part="content"><slot></slot></div>`;

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

@@ -26,6 +26,12 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * Write the entries in the order the events happened, oldest or newest first,
  * and the layout only moves where they are drawn.
  *
+ * **A feed that loads more entries sets `loading` while it fetches.** The
+ * timeline is busy, and an entry after the last says "Loading more"
+ * (`loading-label`, or your own content in the `loading` slot). Put a button
+ * that asks for more after the timeline, and move focus to the first new
+ * entry when they arrive.
+ *
  * @since 0.1.0
  * @status stable
  * @category data
@@ -33,12 +39,29 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @documentation https://fusion.dev/helix/components/timeline
  *
  * @slot - The entries, and any groups of them.
+ * @slot loading - Content for the entry after the last while `loading` is set. Falls back to `loading-label`.
+ *
+ * @csspart loading - The entry after the last while `loading` is set.
+ *
+ * @cssstate loading - While `loading` is set.
  */
 export declare class HelixHeadlessTimeline extends HelixElement {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-timeline': { loadingLabel: 'Wird geladen' } })`.
+     */
+    static words: string;
     /**
      * Accessible name for the timeline, for people who reach it out of context.
      */
     label: string;
+    /**
+     * Marks the timeline as busy fetching more entries, and draws an entry
+     * after the last that says so.
+     */
+    loading: boolean;
+    /** The text of the entry drawn while `loading` is set, where the `loading` slot is empty. */
+    loadingLabel: string;
     protected render(): TemplateResult;
     protected willUpdate(changed: PropertyValues): void;
 }

package/dist/timeline/root/timeline-root.js

@@ -4,25 +4,39 @@ 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, hostAria } from '@fusion.dev/helix-core';
-import { html } from 'lit';
+import { customElement, HelixElement, hostAria, words } from '@fusion.dev/helix-core';
+import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessTimeline = class HelixHeadlessTimeline extends HelixElement {
     constructor() {
         super(...arguments);
         this.label = '';
+        this.loading = false;
+        this.loadingLabel = 'Loading more';
     }
+    static { this.words = 'helix-timeline'; }
     render() {
-        return html `<slot></slot>`;
+        return html `<slot></slot>${this.loading
+            ? html `<div part="loading" role="listitem"><slot name="loading">${this.loadingLabel}</slot></div>`
+            : nothing}`;
     }
     willUpdate(changed) {
         super.willUpdate(changed);
         hostAria(this.internals, { label: this.label, role: 'list' });
+        this.internals.ariaBusy = this.loading ? 'true' : null;
+        this.toggleState('loading', this.loading);
     }
 };
 __decorate([
     property()
 ], HelixHeadlessTimeline.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessTimeline.prototype, "loading", void 0);
+__decorate([
+    words,
+    property({ attribute: 'loading-label' })
+], HelixHeadlessTimeline.prototype, "loadingLabel", void 0);
 HelixHeadlessTimeline = __decorate([
     customElement('helix-headless-timeline')
 ], HelixHeadlessTimeline);

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

@@ -32,6 +32,9 @@ declare const HelixHeadlessTooltip_base: (new (...args: any[]) => import("@fusio
  * describes a Helix component and leaves a plain element undescribed. In the
  * `for` form the tooltip itself is out of the accessibility tree while its
  * bubble is down, so you meet its words once, as the trigger's description.
+ * A trigger whose name is already the tooltip's words, such as an icon button
+ * named Settings under a tooltip reading Settings, is not described by them
+ * again.
  *
  * The tooltip shows on hover and on focus. It hides on pointer leave, on blur,
  * on Escape, and when the trigger is activated. The pointer can move from the
@@ -394,6 +397,13 @@ export declare class HelixHeadlessTooltip extends HelixHeadlessTooltip_base {
      * plain element in the consumer's markup. See `linkDescription`.
      */
     private link;
+    /**
+     * Whether the bubble's words add anything to the trigger: they are not
+     * empty, and they are not the trigger's own name, such as an icon button
+     * named Settings under a tooltip reading Settings, which a screen reader
+     * read as "Settings, Settings".
+     */
+    private get describes();
     /** A reader arriving on the trigger, which is late enough to write the link. */
     private readonly linkOnArrival;
     private unbind;

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

@@ -213,17 +213,22 @@ let HelixHeadlessTooltip = class HelixHeadlessTooltip extends MixinControllerOpe
         });
     }
     link(light, target = focusTarget(this.trigger)) {
-        if (this.linked === target) {
+        const describes = this.describes;
+        if (this.linked === target && describes) {
             return;
         }
         if (this.linked) {
             unlinkDescription(this.linked, this);
             this.linked = undefined;
         }
-        if (linkDescription(target, this, light)) {
+        if (describes && linkDescription(target, this, light)) {
             this.linked = target;
         }
     }
+    get describes() {
+        const text = this.describedText;
+        return text !== '' && !this.triggerSays(text);
+    }
     unbind() {
         if (this.linked) {
             unlinkDescription(this.linked, this);
@@ -314,6 +319,13 @@ let HelixHeadlessTooltip = class HelixHeadlessTooltip extends MixinControllerOpe
         if (changed.has('for')) {
             this.bind();
         }
+        if (this.linked && !this.describes) {
+            unlinkDescription(this.linked, this);
+            this.linked = undefined;
+        }
+        else if (!this.linked && this.bound) {
+            this.link(false);
+        }
         if (changed.has('open')) {
             const warm = warmth();
             if (this.open) {

package/dist/virtual-list/reorder/index.d.ts

@@ -0,0 +1 @@
+export { reorderVirtualList, VirtualListReorderController } from './virtual-list-reorder.js';

package/dist/virtual-list/reorder/index.js

@@ -0,0 +1,4 @@
+import { HelixHeadlessVirtualList } from '../root/virtual-list-root.js';
+import { reorderVirtualList } from './virtual-list-reorder.js';
+reorderVirtualList(HelixHeadlessVirtualList);
+export { reorderVirtualList, VirtualListReorderController } from './virtual-list-reorder.js';

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

@@ -0,0 +1,86 @@
+import type { CSSResult, ReactiveController } from 'lit';
+import type { HelixHeadlessVirtualList } from '../root/virtual-list-root.js';
+/**
+ * Moves the items of a `reorderable` virtual list, by pointer and by keyboard,
+ * and says each move in a region screen readers announce.
+ *
+ * **Its own entry**, `@fusion.dev/helix-headless/virtual-list/reorder`, so a
+ * list that never moves items carries none of this. Importing the entry gives
+ * every virtual list one, and `reorderable` turns it on.
+ *
+ * - **Alt with Up or Down** moves the item the keys are on a place at once,
+ *   and Alt with Home or End to either end, as the APG's rearrangeable
+ *   listbox does. Across, Alt with Left or Right does, mirrored right to left.
+ *   The keys stay on the item that moved.
+ * - **A pointer** drags a whole row, with no grip: a press that travels is a
+ *   drag, and one that does not is still a press. The list scrolls near an
+ *   edge.
+ * - **The page moves the items.** A drop sends `helix-before-reorder` and then
+ *   `helix-reorder` with every key in the new order.
+ *
+ * A row being dragged carries `data-dragging`, and the row a drop would land
+ * beside `data-drop-before` or `data-drop-after`. While a pointer drags a row,
+ * a copy of it follows the pointer in the list's `drag-preview` part. The
+ * styled tier's entry hands in the sheet that draws those, which the list
+ * adopts while it reorders.
+ */
+export declare class VirtualListReorderController implements ReactiveController {
+    private readonly host;
+    /** The sheet the list adopts while it reorders, from the styled tier. */
+    sheet: CSSResult | undefined;
+    /** The rows marked last, so a mark that moves is taken off where it was. */
+    private marked;
+    /** The region each move is said in, drawn while the list reorders. */
+    private live;
+    private readonly reorder;
+    constructor(host: HelixHeadlessVirtualList, sheet?: CSSResult);
+    /** Whether the list moves its items now: one column, without sections. */
+    private get enabled();
+    /**
+     * The words of each drawn row by its item's key, as they were when the list
+     * last drew. A move is said after the page has moved the items and before
+     * the rows are drawn again, so a row's own words then belong to another item.
+     */
+    private names;
+    hostUpdated(): void;
+    hostConnected(): void;
+    hostDisconnected(): void;
+    /** The rows the list draws now. */
+    private get rows();
+    /** The key of the item a row draws. */
+    private keyOf;
+    /** The row that draws the item with that key, where one is drawn. */
+    private rowFor;
+    /** The row an event passed through. */
+    private rowOf;
+    /** The place an item moved by a key goes to, until the page has moved it. */
+    private waiting;
+    /**
+     * Keeps the keys on the item that moved. The page moves the items as it
+     * hears this, and the rows are drawn again in place, so the row that had
+     * focus now draws another item. Focus goes to the item's new row once the
+     * list has drawn it.
+     */
+    private readonly handleReorder;
+    /**
+     * Draws the list's `drag-preview` part and its region for the words while it
+     * reorders, and takes them away after. The list's own template draws
+     * neither.
+     */
+    private draw;
+    /** Puts each row's mark in a move on it, and the styled tier's sheet on the list. */
+    private mark;
+}
+/**
+ * Gives every virtual list of a class a `VirtualListReorderController`, and
+ * the class the words it says, as properties that read and write their
+ * attributes: `movedLabel`, `canceledLabel`, `droppedLabel`, and
+ * `pickedUpLabel`.
+ *
+ * The entries call it for their own tier's class: the headless entry for
+ * `HelixHeadlessVirtualList`, and the styled one for `HelixVirtualList`, with
+ * the sheet that draws a move. **Lists already on the page are given one
+ * too**, so a page that imports the list and then this entry has its lists
+ * reorder.
+ */
+export declare const reorderVirtualList: (element: typeof HelixHeadlessVirtualList, sheet?: CSSResult) => void;