@fusion.dev/helix-headless 0.30.1 → 0.31.0

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.js

@@ -23,6 +23,10 @@ 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: () => { },
             placement: () => this.placement,
             surface: () => this.partNamed('bubble'),

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

@@ -44,7 +44,10 @@ declare const HelixHeadlessTreeItem_base: (new (...args: any[]) => import("@fusi
  * @csspart row - The clickable label row, which is an `<a>` where `href` is set.
  * @csspart toggle - The expand and collapse control.
  *
- * @cssproperty --tree-level - How deep this row sits, counting from zero, for the indent.
+ * @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.1",
+  "version": "0.31.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.1",
-    "@fusion.dev/helix-icons": "0.30.1",
+    "@fusion.dev/helix-core": "0.31.0",
+    "@fusion.dev/helix-icons": "0.31.0",
     "uqr": "^0.1.3"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@fusion.dev/helix-cem": "0.30.1",
-    "@fusion.dev/helix-testing": "0.30.1",
+    "@fusion.dev/helix-cem": "0.31.0",
+    "@fusion.dev/helix-testing": "0.31.0",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.0.0",
     "@lit-labs/ssr": "^4.1.0",