@fusion.dev/helix-headless 0.30.2 → 0.32.0

package/dist/table/column/table-column.d.ts

@@ -69,6 +69,9 @@ export declare const at: (row: Readonly<Record<string, unknown>>, path: string)
  * @csspart grip-mark - The glyph on it.
  * @csspart resizer - The edge a reader drags to change the width, where the column allows it.
  * @csspart sort - The button a sortable heading is.
+ *
+ * @cssstate sorted-ascending - While the table is sorted by this column, smallest first.
+ * @cssstate sorted-descending - While the table is sorted by this column, largest first.
  */
 export declare class HelixHeadlessTableColumn extends HelixElement {
     /**
@@ -76,9 +79,20 @@ export declare class HelixHeadlessTableColumn extends HelixElement {
      *
      * `end` is what a column of numbers wants, so digits of the same magnitude sit
      * above each other. Left unset the cell inherits the table's own alignment,
-     * which is `start` for text in either writing direction.
+     * which is `start` for text in either writing direction. `helix-data-table`
+     * aligns the cells it draws; a `helix-table`'s cells are markup the consumer
+     * wrote, and align as the consumer styles them. The heading is this element's
+     * own, and `@fusion.dev/helix` sets it to the same edge in either table.
+     *
+     * **Reflected, because the heading is drawn by a stylesheet and has no other
+     * way to learn it.** Set as a property, which is how React sets it, an
+     * unreflected `align` left no attribute to select on, so the heading stayed at
+     * the start over a column of digits set to the end. It is the author's
+     * declaration and nothing moves it afterwards, so an attribute cannot come to
+     * disagree with the element, which is the reason `open` records a custom
+     * state instead. No default, so an unset column writes nothing onto its host.
      */
-    align: 'center' | 'end' | 'start' | '';
+    align?: 'center' | 'end' | 'start';
     /**
      * How to read the cell, where the field alone will not do.
      *

package/dist/table/column/table-column.js

@@ -29,7 +29,6 @@ export const at = (row, path) => {
 let HelixHeadlessTableColumn = class HelixHeadlessTableColumn extends HelixElement {
     constructor() {
         super(...arguments);
-        this.align = '';
         this.cell = undefined;
         this.compare = undefined;
         this.field = '';
@@ -95,12 +94,8 @@ let HelixHeadlessTableColumn = class HelixHeadlessTableColumn extends HelixEleme
         super.willUpdate(changed);
         hostAria(this.internals, { role: 'columnheader' });
         this.internals.ariaSort = this.canSort ? (this.sorted ?? 'none') : null;
-        for (const [name, on] of [
-            ['sorted-ascending', this.sorted === 'ascending'],
-            ['sorted-descending', this.sorted === 'descending'],
-        ]) {
-            this.toggleState(name, on);
-        }
+        this.toggleState('sorted-ascending', this.sorted === 'ascending');
+        this.toggleState('sorted-descending', this.sorted === 'descending');
     }
     get name() {
         return this.textContent?.trim() ?? '';
@@ -176,7 +171,7 @@ let HelixHeadlessTableColumn = class HelixHeadlessTableColumn extends HelixEleme
     }
 };
 __decorate([
-    property()
+    property({ reflect: true })
 ], HelixHeadlessTableColumn.prototype, "align", void 0);
 __decorate([
     property({ attribute: false })

package/dist/tabs/panel/tab-panel.d.ts

@@ -16,6 +16,8 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @slot - The panel's content.
  *
  * @csspart panel - The panel container.
+ *
+ * @cssstate selected - While its tab is the one selected.
  */
 export declare class HelixHeadlessTabPanel extends HelixElement {
     /**

package/dist/tabs/tab/tab.d.ts

@@ -21,6 +21,8 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @event {HelixSelectEvent} helix-select - Fired when the tab is chosen. Cancelable: refusing it takes the decision and nothing moves.
  *
  * @csspart tab - The tab itself.
+ *
+ * @cssstate selected - While it is the tab selected.
  */
 export declare class HelixHeadlessTab extends HelixElement {
     /**

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

@@ -35,6 +35,8 @@ declare const HelixHeadlessTextarea_base: (new (...args: any[]) => import("@fusi
  * @csspart field - The box holding the control.
  * @csspart hint - Help under the field, while nothing is wrong.
  * @csspart label - The question, over the field.
+ *
+ * @cssstate invalid - While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
  */
 export declare class HelixHeadlessTextarea extends HelixHeadlessTextarea_base {
     protected readonly aria: AriaForwardController;

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

@@ -72,8 +72,11 @@ declare const HelixHeadlessTimeInput_base: (new (...args: any[]) => import("@fus
  * @csspart picker-list-search - The region holding the field that narrows the list.
  * @csspart picker-list-search-field - The field itself.
  * @csspart picker-option - One time in it. Carries `data-between` inside a range.
+ * @csspart picker-option-between - A time inside a chosen range, short of either end, beside `picker-option`.
  * @csspart picker-option-description - The caption under the words, when there is one.
  * @csspart picker-option-item - The row.
+ * @csspart picker-option-item-active - The row the keyboard is on.
+ * @csspart picker-option-item-selected - The row of a chosen time: the one time, or either end of a range.
  * @csspart picker-option-label - The words.
  * @csspart picker-option-text - The words and the caption, as one column.
  * @csspart rest - How many times are held beyond the ones shown. A `<button>` with `expandable`, a `<span>` without it.
@@ -85,6 +88,9 @@ declare const HelixHeadlessTimeInput_base: (new (...args: any[]) => import("@fus
  * @csspart time-prefix - The category before the label.
  * @csspart trigger - The control that opens the list.
  * @csspart trigger-icon - The mark on the button that opens the clock.
+ *
+ * @cssstate invalid - While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
+ * @cssstate open - While the clock is open.
  */
 export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base {
     protected readonly aria: AriaForwardController;

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

@@ -147,6 +147,8 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinPickerEdi
         list-hint: picker-list-hint, list-items: picker-list-items, list-label: picker-list-label,
         list-loading: picker-list-loading, list-search: picker-list-search,
         list-search-field: picker-list-search-field, option: picker-option,
+        option-between: picker-option-between, option-item-active: picker-option-item-active,
+        option-item-selected: picker-option-item-selected,
         option-description: picker-option-description, option-item: picker-option-item,
         option-label: picker-option-label, option-text: picker-option-text"
       ?invalid=${this.resolvedFeedback !== ''}

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

@@ -77,8 +77,11 @@ declare const HelixHeadlessTimePicker_base: (new (...args: any[]) => import("@fu
  * @csspart list-search - The region holding the field that narrows the list.
  * @csspart list-search-field - The field itself.
  * @csspart option - One time in it. Carries `data-between` inside a range.
+ * @csspart option-between - A time inside a chosen range, short of either end, beside `option`.
  * @csspart option-description - The caption under the words, when there is one.
  * @csspart option-item - The row.
+ * @csspart option-item-active - The row the keyboard is on.
+ * @csspart option-item-selected - The row of a chosen time: the one time, or either end of a range.
  * @csspart option-label - The words.
  * @csspart option-text - The words and the caption, as one column.
  */
@@ -226,15 +229,22 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
     /** Every minute offered within the hour currently shown. */
     private get minutes();
     /**
-     * Each wheel comes to rest on its own answer.
+     * Each wheel comes to rest on its own answer, and the list on the time it
+     * holds.
      *
      * A dial that opens at midnight when it holds ten in the evening is a dial
      * showing the wrong thing, and CSS cannot fix it: `scroll-snap-type` chooses a
      * snap point when something scrolls, and nothing has. Measured before this,
-     * with the value at 22:00, the hour wheel sat 288 pixels above its answer.
+     * with the value at 22:00, the hour wheel sat 288 pixels above its answer. The
+     * list had the same fault: holding 09:30 it opened on 12:00 AM with the answer
+     * 38 rows down and out of sight, flat on a page and in every Time Input panel.
+     * A list holding several, a range or a set, is left where it is, having no
+     * one row to come to rest on.
      *
-     * On every update rather than on the first, because the columns re-render as
-     * the value moves and the minute column's contents change with the hour.
+     * The wheels on every update, because the columns re-render as the value
+     * moves and the minute column's contents change with the hour. The list on
+     * the first only, where it is flat on a page: centering it on every choice
+     * would move the row out from under the pointer that chose it.
      *
      * **And it is public, because an update is not the only moment that matters.**
      * Inside a panel this element renders while the panel is still
@@ -310,7 +320,7 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
      */
     private report;
     /**
-     * Reveals once the wheels have rendered themselves.
+     * Reveals once the wheels, or the list and its rows, have rendered themselves.
      *
      * `updated` is this element's own moment, and each wheel is a `helix-listbox`
      * that was created during this very render: its first update has been
@@ -329,6 +339,11 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
      * scrolling a wheel changes no property and so schedules no update.
      */
     private revealWhenSettled;
+    /**
+     * Whether the list has brought itself to its answer yet. It does that once,
+     * and after that only whatever opens a panel calls `reveal`.
+     */
+    private listRevealed;
     protected willUpdate(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
     /** Puts the keyboard on the list, which is the only control here. */

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

@@ -99,6 +99,7 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
             this.requestValue(whole);
         };
         this.step = 15;
+        this.listRevealed = false;
     }
     get times() {
         const from = toMinutes(this.min) ?? 0;
@@ -153,7 +154,11 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
         return this.times.filter((at) => Math.floor(at / 60) === hour).map((at) => at % 60);
     }
     reveal() {
-        if (this.variant !== 'wheels' || this.mode !== undefined) {
+        if (this.mode !== undefined) {
+            return;
+        }
+        if (this.variant !== 'wheels') {
+            this.partNamed('list')?.reveal?.();
             return;
         }
         for (const column of this.renderRoot?.querySelectorAll('[part="column"]') ?? []) {
@@ -194,10 +199,10 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
         this.internals.setFormValue(data);
     }
     async revealWhenSettled() {
-        const columns = [
-            ...(this.renderRoot?.querySelectorAll('[part="column"]') ?? []),
+        const settling = [
+            ...(this.renderRoot?.querySelectorAll('[part="column"], [part="list"], [part~="option"]') ?? []),
         ];
-        await Promise.all(columns.map((column) => column.updateComplete));
+        await Promise.all(settling.map((one) => one.updateComplete));
         this.reveal();
     }
     willUpdate(changed) {
@@ -208,8 +213,14 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
     updated(changed) {
         super.updated(changed);
         this.reportRequired();
-        this.reveal();
-        void this.revealWhenSettled();
+        if (this.variant === 'wheels') {
+            this.reveal();
+            void this.revealWhenSettled();
+        }
+        else if (!this.listRevealed) {
+            this.listRevealed = true;
+            void this.revealWhenSettled();
+        }
     }
     focus(options) {
         this.partNamed('list')?.focus(options);
@@ -230,8 +241,13 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
         }}
       @input=${this.handleListInput}
     >
-      ${values.map((one) => html `<${this.tag('option')} part="option"
-          exportparts="description: option-description, item: option-item, label: option-label, text: option-text" value=${one} ?disabled=${barred(one)}
+      ${values.map((one) => html `<${this.tag('option')}
+            part="option"
+            exportparts="description: option-description, item: option-item,
+              item-active: option-item-active, item-selected: option-item-selected,
+              label: option-label, text: option-text"
+            value=${one}
+            ?disabled=${barred(one)}
             >${written(one)}</${this.tag('option')}
           >`)}
     </${this.tag('listbox')}>`;
@@ -267,12 +283,15 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
     >
       ${this.times.map((minutes) => {
             const at = fromMinutes(minutes);
+            const between = this.between(at);
             return html `<${this.tag('option')}
-          part="option"
-      exportparts="description: option-description, item: option-item, label: option-label, text: option-text"
+          part="option${between ? ' option-between' : ''}"
+          exportparts="description: option-description, item: option-item,
+            item-active: option-item-active, item-selected: option-item-selected,
+            label: option-label, text: option-text"
           value=${at}
           ?disabled=${this.barred(at)}
-          data-between=${this.between(at) ? '' : nothing}
+          data-between=${between ? '' : nothing}
           >${writeTime(at, this.locale)}</${this.tag('option')}
         >`;
         })}

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

@@ -34,6 +34,8 @@ declare const HelixHeadlessToggleGroup_base: (new (...args: any[]) => import("@f
  * @csspart label - The question, over the row.
  * @csspart row - The line the track sits on, with whatever flanks it.
  * @csspart track - The bar the items sit in.
+ *
+ * @cssstate invalid - While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
  */
 export declare class HelixHeadlessToggleGroup extends HelixHeadlessToggleGroup_base {
     /** Marks the chosen item, separately from placing the indicator. */

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

@@ -21,6 +21,8 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @event {HelixSelectEvent} helix-select - Fired when the item is chosen. Cancelable: refusing it takes the decision and nothing moves.
  *
  * @csspart item - The radio button.
+ *
+ * @cssstate selected - While it is on.
  */
 export declare class HelixHeadlessToggle extends HelixElement {
     /**

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

@@ -53,6 +53,8 @@ declare const HelixHeadlessTooltip_base: (new (...args: any[]) => import("@fusio
  *
  * @csspart arrow - The point, resting against the trigger.
  * @csspart tooltip - The bubble.
+ *
+ * @cssstate open - While the tooltip shows.
  */
 export declare class HelixHeadlessTooltip extends HelixHeadlessTooltip_base {
     /**

package/dist/tour/stop/tour-stop.d.ts

@@ -54,6 +54,11 @@ import '../../button/index.js';
  * @csspart next-button - The inner control.
  * @csspart skip - The control that leaves the tour.
  * @csspart skip-button - The inner control.
+ *
+ * @cssstate placed-bottom - While the panel sits below its target.
+ * @cssstate placed-left - While the panel sits to the left of its target.
+ * @cssstate placed-right - While the panel sits to the right of its target.
+ * @cssstate placed-top - While the panel sits above its target.
  */
 export declare class HelixHeadlessTourStop extends HelixElement {
     /**

package/dist/tour/stop/tour-stop.js

@@ -23,7 +23,18 @@ let HelixHeadlessTourStop = class HelixHeadlessTourStop extends HelixElement {
         this.floating = new PopoverController(this, {
             anchor: () => this.target,
             arrow: () => this.partNamed('arrow'),
+            offset: () => {
+                const tour = this.parentElement;
+                return ((tour?.spotlightPadding ?? 0) + (this.partNamed('arrow')?.offsetWidth ?? 0) / Math.SQRT2);
+            },
             onDismiss: () => { },
+            onPlace: (placement) => {
+                const side = placement.split('-')[0];
+                this.toggleState('placed-bottom', side === 'bottom');
+                this.toggleState('placed-left', side === 'left');
+                this.toggleState('placed-right', side === 'right');
+                this.toggleState('placed-top', side === 'top');
+            },
             placement: () => this.placement,
             surface: () => this.partNamed('bubble'),
         });

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

@@ -45,6 +45,9 @@ declare const HelixHeadlessTreeItem_base: (new (...args: any[]) => import("@fusi
  * @csspart toggle - The expand and collapse control.
  *
  * @cssproperty --tree-level - How deep this row sits, counting from one as `aria-level` does, for the indent.
+ *
+ * @cssstate open - While its children are shown.
+ * @cssstate selected - While it is selected.
  */
 export declare class HelixHeadlessTreeItem extends HelixHeadlessTreeItem_base {
     /**

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

@@ -86,6 +86,7 @@ import '../../menu/index.js';
  * @csspart poster - What covers it before it plays.
  * @csspart previous - Asks for the previous one.
  * @csspart remote - Play on another device, where one is available.
+ * @csspart remote-pressed - The remote control while the picture is on another device, beside `remote`.
  * @csspart rewind - The control that goes back ten seconds.
  * @csspart scrubber - Where it is, and where to go.
  * @csspart sound - The speaker and its level, which are one control.

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

@@ -489,7 +489,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
     renderExtra(one) {
         if (one === 'remote') {
             return html `<button
-        part="remote"
+        part="remote${this.remoteConnected ? ' remote-pressed' : ''}"
         type="button"
         aria-label="Play on another device"
         aria-pressed=${this.remoteConnected ? 'true' : 'false'}

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

@@ -35,6 +35,7 @@ import { type TemplateResult } from 'lit';
  *
  * @csspart container - The `listitem`, which the button sits in.
  * @csspart item - The row, which is a button.
+ * @csspart item-current - The row of the entry the player is on, beside `item`.
  * @csspart label - The name and whatever follows it.
  * @csspart media - The leading column.
  * @csspart thumbnail - The image `poster` falls back to.

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

@@ -37,7 +37,7 @@ let HelixHeadlessVideoPlaylistItem = class HelixHeadlessVideoPlaylistItem extend
     render() {
         return html `<div part="container" role="listitem">
       <button
-        part="item"
+        part="item${this.current ? ' item-current' : ''}"
         type="button"
         aria-current=${this.current ? 'true' : nothing}
         ?disabled=${this.disabled}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-headless",
   "description": "Headless component tier. Structure, accessibility, state, and form participation. No styling.",
-  "version": "0.30.2",
+  "version": "0.32.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -46,14 +46,14 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.30.2",
-    "@fusion.dev/helix-icons": "0.30.2",
+    "@fusion.dev/helix-core": "0.32.0",
+    "@fusion.dev/helix-icons": "0.32.0",
     "uqr": "^0.1.3"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@fusion.dev/helix-cem": "0.30.2",
-    "@fusion.dev/helix-testing": "0.30.2",
+    "@fusion.dev/helix-cem": "0.32.0",
+    "@fusion.dev/helix-testing": "0.32.0",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.0.0",
     "@lit-labs/ssr": "^4.1.0",