@fusion.dev/helix-headless 0.52.0 → 0.53.0

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

@@ -1,5 +1,6 @@
 import { HelixElement } from '@fusion.dev/helix-core';
-import { type PropertyValues, type TemplateResult } from 'lit';
+import { type TemplateResult } from 'lit';
+declare const HelixHeadlessTab_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinSelectableItemInterface) & typeof HelixElement;
 /**
  * @summary One tab in a tab list.
  *
@@ -24,39 +25,8 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  *
  * @cssstate selected - While it is the tab selected.
  */
-export declare class HelixHeadlessTab extends HelixElement {
-    /**
-     * Whether the tab can be chosen.
-     */
-    disabled: boolean;
-    /**
-     * Whether this tab is the current one.
-     */
-    selected: boolean;
-    /**
-     * Identifies the tab, and pairs it with the panel of the same value.
-     */
-    value: string;
-    /** Moves focus to this tab, for the list's arrow keys. */
-    focusItem(): void;
-    /** Selects this tab and announces it. */
-    select(): void;
-    /**
-     * Mirrors the chosen state where a stylesheet can select on it.
-     *
-     * **A custom state, not a reflected `selected` attribute.** The parent writes
-     * this: a listbox choosing a row, a tab strip moving the tab, a radio group
-     * answering for its set. Reflected, it puts the element's own bookkeeping onto
-     * markup a consumer wrote and a consumer's server never sent, which React
-     * reconciles and reports as a mismatch, and which a serialized element pasted
-     * back declares as a choice nobody made. `ElementInternals` holds it instead,
-     * where it is not in the DOM at all.
-     *
-     * Reading `selected` is unaffected and so is writing it: the attribute still
-     * seeds the property, which is what `<helix-tab selected>` in a consumer's
-     * markup means. What stops is the write back.
-     */
-    protected willUpdate(changed: PropertyValues): void;
+export declare class HelixHeadlessTab extends HelixHeadlessTab_base {
+    protected itemPart: string;
     protected render(): TemplateResult;
 }
 declare global {
@@ -64,3 +34,4 @@ declare global {
         'helix-headless-tab': HelixHeadlessTab;
     }
 }
+export {};

package/dist/tabs/tab/tab.js

@@ -4,28 +4,12 @@ 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, HelixSelectEvent } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, MixinSelectableItem } from '@fusion.dev/helix-core';
 import { html } from 'lit';
-import { property } from 'lit/decorators.js';
-let HelixHeadlessTab = class HelixHeadlessTab extends HelixElement {
+let HelixHeadlessTab = class HelixHeadlessTab extends MixinSelectableItem(HelixElement) {
     constructor() {
         super(...arguments);
-        this.disabled = false;
-        this.selected = false;
-        this.value = '';
-    }
-    focusItem() {
-        this.partNamed('tab')?.focus();
-    }
-    select() {
-        if (this.disabled) {
-            return;
-        }
-        this.dispatchEvent(new HelixSelectEvent({ value: this.value }));
-    }
-    willUpdate(changed) {
-        super.willUpdate(changed);
-        this.toggleState('selected', this.selected);
+        this.itemPart = 'tab';
     }
     render() {
         return html `<button
@@ -41,15 +25,6 @@ let HelixHeadlessTab = class HelixHeadlessTab extends HelixElement {
     </button>`;
     }
 };
-__decorate([
-    property({ reflect: true, type: Boolean })
-], HelixHeadlessTab.prototype, "disabled", void 0);
-__decorate([
-    property({ type: Boolean })
-], HelixHeadlessTab.prototype, "selected", void 0);
-__decorate([
-    property()
-], HelixHeadlessTab.prototype, "value", void 0);
 HelixHeadlessTab = __decorate([
     customElement('helix-headless-tab')
 ], HelixHeadlessTab);

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

@@ -157,7 +157,7 @@ let HelixHeadlessTextarea = class HelixHeadlessTextarea extends MixinControllerV
     <div part="field">
       <textarea
         part="control"
-        id="control"
+        id=${this.controlId}
         .value=${this.value}
         rows=${this.rows}
         cols=${this.cols ?? nothing}

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

@@ -192,7 +192,7 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinPickerEdi
             : nothing}
         <input
           part="control"
-          id="control"
+          id=${this.controlId}
           type="text"
           .value=${this.display}
           name=${this.name || nothing}

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

@@ -1,5 +1,6 @@
 import { HelixElement } from '@fusion.dev/helix-core';
-import { type PropertyValues, type TemplateResult } from 'lit';
+import { type TemplateResult } from 'lit';
+declare const HelixHeadlessToggle_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinSelectableItemInterface) & typeof HelixElement;
 /**
  * @summary One option in a toggle group.
  *
@@ -24,11 +25,7 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  *
  * @cssstate selected - While it is on.
  */
-export declare class HelixHeadlessToggle extends HelixElement {
-    /**
-     * Whether the item can be chosen.
-     */
-    disabled: boolean;
+export declare class HelixHeadlessToggle extends HelixHeadlessToggle_base {
     /**
      * Whether the markup declared this one chosen, which is what a reset returns to.
      *
@@ -68,40 +65,6 @@ export declare class HelixHeadlessToggle extends HelixElement {
      * hydration reports and does not patch up.
      */
     focusable: boolean;
-    /**
-     * Whether this item is the current one.
-     */
-    selected: boolean;
-    /**
-     * Moves focus to this item's own control.
-     *
-     * The group drives arrow-key navigation and cannot reach the control itself,
-     * which is inside this shadow root. Exposing the intent as a method keeps the
-     * group out of the child's internals.
-     */
-    focusItem(): void;
-    /** Chooses this item and announces it. */
-    select(): void;
-    /**
-     * Identifies the item to the group.
-     */
-    value: string;
-    /**
-     * Mirrors the chosen state where a stylesheet can select on it.
-     *
-     * **A custom state rather than the `selected` attribute.** The parent writes
-     * this: a listbox choosing a row, a tab strip moving the tab, a radio group
-     * answering for its set. Reflected, that puts the element's own bookkeeping
-     * onto markup a consumer wrote and a consumer's server never sent, which
-     * React reconciles and reports as a mismatch, and which a serialized element
-     * pasted back declares as a choice nobody made. `ElementInternals` holds it
-     * instead, where it is not in the DOM at all.
-     *
-     * Reading `selected` is unaffected and so is writing it: the attribute still
-     * seeds the property, which is what `<helix-toggle selected>` in a consumer's
-     * markup means. There is no write back.
-     */
-    protected willUpdate(changed: PropertyValues): void;
     protected render(): TemplateResult;
 }
 declare global {
@@ -109,3 +72,4 @@ declare global {
         'helix-headless-toggle': HelixHeadlessToggle;
     }
 }
+export {};

package/dist/toggle/root/toggle-root.js

@@ -4,16 +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 { customElement, HelixElement, HelixSelectEvent } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, MixinSelectableItem } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
-let HelixHeadlessToggle = class HelixHeadlessToggle extends HelixElement {
+let HelixHeadlessToggle = class HelixHeadlessToggle extends MixinSelectableItem(HelixElement) {
     constructor() {
         super(...arguments);
-        this.disabled = false;
         this.focusable = false;
-        this.selected = false;
-        this.value = '';
     }
     get defaultSelected() {
         return this.hasAttribute('selected');
@@ -21,19 +18,6 @@ let HelixHeadlessToggle = class HelixHeadlessToggle extends HelixElement {
     set defaultSelected(next) {
         this.toggleAttribute('selected', next);
     }
-    focusItem() {
-        this.partNamed('item')?.focus();
-    }
-    select() {
-        if (this.disabled) {
-            return;
-        }
-        this.dispatchEvent(new HelixSelectEvent({ value: this.value }));
-    }
-    willUpdate(changed) {
-        super.willUpdate(changed);
-        this.toggleState('selected', this.selected);
-    }
     render() {
         return html `<button
       part="item"
@@ -48,18 +32,9 @@ let HelixHeadlessToggle = class HelixHeadlessToggle extends HelixElement {
     </button>`;
     }
 };
-__decorate([
-    property({ reflect: true, type: Boolean })
-], HelixHeadlessToggle.prototype, "disabled", void 0);
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessToggle.prototype, "focusable", void 0);
-__decorate([
-    property({ type: Boolean })
-], HelixHeadlessToggle.prototype, "selected", void 0);
-__decorate([
-    property()
-], HelixHeadlessToggle.prototype, "value", void 0);
 HelixHeadlessToggle = __decorate([
     customElement('helix-headless-toggle')
 ], HelixHeadlessToggle);

package/dist/tree/item/tree-item.js

@@ -97,8 +97,8 @@ let HelixHeadlessTreeItem = class HelixHeadlessTreeItem extends MixinControllerO
     willUpdate(changed) {
         super.willUpdate(changed);
         this.toggleState('selected', this.selected);
-        if (this.children !== undefined && !this.hydrating) {
-            this.branch = [...this.children].some((child) => child.slot === 'children');
+        if (this.childrenKnown) {
+            this.branch = this.knownChildren.some((child) => child.slot === 'children');
         }
     }
     render() {

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 { customElement, drawIcon, HelixElement, HelixNextEvent, HelixPreviousEvent, onUnlessFalse, } from '@fusion.dev/helix-core';
+import { customElement, drawIcon, HelixElement, HelixNextEvent, HelixPreviousEvent, onUnlessFalse, writtenList, } 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';
@@ -250,17 +250,11 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         return one === 'speed';
     }
     get extras() {
-        return this.extraControls
-            .split(/\s+/)
-            .filter(Boolean)
-            .filter((one) => this.offers(one));
+        return writtenList(this.extraControls).filter((one) => this.offers(one));
     }
     get overflow() {
         const onBar = new Set(this.extras);
-        return this.overflowControls
-            .split(/\s+/)
-            .filter(Boolean)
-            .filter((one) => !onBar.has(one) && this.offers(one));
+        return writtenList(this.overflowControls).filter((one) => !onBar.has(one) && this.offers(one));
     }
     get currentSrc() {
         return this.video?.currentSrc ?? '';
@@ -398,7 +392,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         });
     }
     claimSession() {
-        const skips = `${this.extraControls} ${this.overflowControls}`.split(/\s+/);
+        const skips = writtenList(`${this.extraControls} ${this.overflowControls}`);
         this.session.claim({ artwork: this.poster, title: this.label }, {
             next: skips.includes('next') ? () => this.skip(false) : null,
             previous: skips.includes('previous') ? () => this.skip(true) : null,
@@ -430,8 +424,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         this.dispatchEvent(back ? new HelixPreviousEvent() : new HelixNextEvent());
     }
     cycleSpeed() {
-        const speeds = this.speeds
-            .split(/\s+/)
+        const speeds = writtenList(this.speeds)
             .map(Number)
             .filter((one) => one > 0);
         const video = this.video;
@@ -456,9 +449,9 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
     }
     willUpdate(changed) {
         super.willUpdate(changed);
-        if (!this.mediaRead && this.children !== undefined && !this.hydrating) {
+        if (!this.mediaRead && this.childrenKnown) {
             this.mediaRead = true;
-            this.media = this.copiesOf([...this.children].filter((child) => child.slot === ''));
+            this.media = this.copiesOf(this.knownChildren.filter((child) => child.slot === ''));
         }
         if (changed.has('media')) {
             this.captions = captionsAmong(this.media);

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.52.0",
+  "version": "0.53.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.52.0",
-    "@fusion.dev/helix-icons": "0.52.0",
+    "@fusion.dev/helix-core": "0.53.0",
+    "@fusion.dev/helix-icons": "0.53.0",
     "uqr": "^0.1.3"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@fusion.dev/helix-cem": "0.52.0",
-    "@fusion.dev/helix-testing": "0.52.0",
+    "@fusion.dev/helix-cem": "0.53.0",
+    "@fusion.dev/helix-testing": "0.53.0",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.0.0",
     "@lit-labs/ssr": "^4.1.0",