@fusion.dev/helix-headless 0.0.0-dev → 0.0.2

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

@@ -50,13 +50,17 @@ let HelixHeadlessVideoPlaylistItem = class HelixHeadlessVideoPlaylistItem extend
     constructor() {
         super(...arguments);
         /**
-         * What identifies the entry, and what `active` is compared against.
+         * Whether the player is on this entry.
+         *
+         * Written by the playlist rather than by the entry, the way an option's
+         * selection is: an entry that made itself current would be a second answer to
+         * which one is playing.
          */
-        this.value = '';
+        this.current = false;
         /**
-         * The file this entry plays.
+         * Whether the entry can be chosen.
          */
-        this.src = '';
+        this.disabled = false;
         /**
          * What covers the picture before this entry plays, and the row's thumbnail.
          *
@@ -68,17 +72,13 @@ let HelixHeadlessVideoPlaylistItem = class HelixHeadlessVideoPlaylistItem extend
          */
         this.poster = '';
         /**
-         * Whether the entry can be chosen.
+         * The file this entry plays.
          */
-        this.disabled = false;
+        this.src = '';
         /**
-         * Whether the player is on this entry.
-         *
-         * Written by the playlist rather than by the entry, the way an option's
-         * selection is: an entry that made itself current would be a second answer to
-         * which one is playing.
+         * What identifies the entry, and what `active` is compared against.
          */
-        this.current = false;
+        this.value = '';
         this.choose = () => {
             if (this.disabled) {
                 return;
@@ -89,10 +89,10 @@ let HelixHeadlessVideoPlaylistItem = class HelixHeadlessVideoPlaylistItem extend
     /**
      * The entry's name, which is the words and not everything in it.
      *
-     * `textContent` was what this used, and it takes the whole subtree: a row with
-     * a duration in `meta` reported "His Girl Friday0:06", and that string went to
-     * the player and on to the lock screen. Only the nodes the consumer left
-     * unslotted are the name; anything named is a column beside it.
+     * `textContent` takes the whole subtree: a row with a duration in `meta`
+     * reads as "His Girl Friday0:06", and that string reaches the player and the
+     * lock screen. Only the nodes the consumer left unslotted are the name;
+     * anything named is a column beside it.
      *
      * Light DOM rather than `assignedNodes`, so it answers on the server too,
      * where there is no slot to ask. `Option.text` reads its own the same way.
@@ -142,20 +142,20 @@ let HelixHeadlessVideoPlaylistItem = class HelixHeadlessVideoPlaylistItem extend
     }
 };
 __decorate([
-    property()
-], HelixHeadlessVideoPlaylistItem.prototype, "value", void 0);
+    property({ attribute: false })
+], HelixHeadlessVideoPlaylistItem.prototype, "current", void 0);
 __decorate([
-    property()
-], HelixHeadlessVideoPlaylistItem.prototype, "src", void 0);
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessVideoPlaylistItem.prototype, "disabled", void 0);
 __decorate([
     property()
 ], HelixHeadlessVideoPlaylistItem.prototype, "poster", void 0);
 __decorate([
-    property({ reflect: true, type: Boolean })
-], HelixHeadlessVideoPlaylistItem.prototype, "disabled", void 0);
+    property()
+], HelixHeadlessVideoPlaylistItem.prototype, "src", void 0);
 __decorate([
-    property({ attribute: false })
-], HelixHeadlessVideoPlaylistItem.prototype, "current", void 0);
+    property()
+], HelixHeadlessVideoPlaylistItem.prototype, "value", void 0);
 HelixHeadlessVideoPlaylistItem = __decorate([
     customElement('helix-headless-video-playlist-item')
 ], HelixHeadlessVideoPlaylistItem);

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

@@ -31,9 +31,9 @@ import '../../menu/index.js';
  *
  * **Choosing dispatches `helix-select`, the same event an entry dispatches.**
  * It never writes `active` on the playlist, which looks like the shorter path
- * and would latch the controlled contract: a playlist assigned `active` once
- * goes quiet and waits for a consumer who was never there. Announcing is what
- * an entry does, the playlist already listens for it, and a consumer refusing a
+ * and skips the cancelable request: an assignment applies the change with no
+ * `helix-before-activate` for anyone to refuse. Announcing is what an entry
+ * does, the playlist already listens for it, and a consumer refusing a
  * selection gets `preventDefault()` on one event rather than two paths that
  * behave differently.
  *
@@ -51,7 +51,6 @@ import '../../menu/index.js';
  * @csspart entry-item - The row, which is an `<a>` where `href` is set.
  * @csspart entry-mark - The trailing mark: a tick when checked, a caret when it opens
  * @csspart entry-start - The leading column, which is a slot and is always there.
- * @csspart icon - The glyph on the trigger.
  * @csspart menu - The menu that holds the entries.
  * @csspart menu-back - The control that returns from a submenu.
  * @csspart menu-back-mark - The glyph on the back control of a submenu.
@@ -97,10 +96,8 @@ export declare class HelixHeadlessVideoPlaylistMenu extends HelixElement {
      * **Which entry is current** is `active`, a property with no attribute, so
      * there is nothing to observe: events travel up from the playlist and this
      * element is below it, and mirroring `active` to a `data-` name is ruled out
-     * on its own merits, `active` being a payload rather than a boolean fact.
-     * Mirroring it was written and reverted here: it put `data-active` onto every
-     * host, which `tree-root.ssr.spec.ts` caught, and the rule it broke was the
-     * one that stops a copied host coming back frozen.
+     * on its own merits, `active` being a payload rather than a boolean fact. A
+     * `data-active` on every host is what `tree-root.ssr.spec.ts` fails on.
      *
      * So it is re-read at the moment it is looked at. `helix-before-open` comes from the
      * menu in this element's own shadow root, which is the one direction events

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

@@ -42,9 +42,9 @@ const ITEMS = 'helix-video-playlist-item, helix-headless-video-playlist-item';
  *
  * **Choosing dispatches `helix-select`, the same event an entry dispatches.**
  * It never writes `active` on the playlist, which looks like the shorter path
- * and would latch the controlled contract: a playlist assigned `active` once
- * goes quiet and waits for a consumer who was never there. Announcing is what
- * an entry does, the playlist already listens for it, and a consumer refusing a
+ * and skips the cancelable request: an assignment applies the change with no
+ * `helix-before-activate` for anyone to refuse. Announcing is what an entry
+ * does, the playlist already listens for it, and a consumer refusing a
  * selection gets `preventDefault()` on one event rather than two paths that
  * behave differently.
  *
@@ -62,7 +62,6 @@ const ITEMS = 'helix-video-playlist-item, helix-headless-video-playlist-item';
  * @csspart entry-item - The row, which is an `<a>` where `href` is set.
  * @csspart entry-mark - The trailing mark: a tick when checked, a caret when it opens
  * @csspart entry-start - The leading column, which is a slot and is always there.
- * @csspart icon - The glyph on the trigger.
  * @csspart menu - The menu that holds the entries.
  * @csspart menu-back - The control that returns from a submenu.
  * @csspart menu-back-mark - The glyph on the back control of a submenu.
@@ -95,10 +94,9 @@ let HelixHeadlessVideoPlaylistMenu = class HelixHeadlessVideoPlaylistMenu extend
          *
          * The entries are the playlist's light DOM rather than this element's, so
          * nothing about them schedules an update here: an entry added, removed, or
-         * made current changes a tree this element only looks at. A bumped field is
-         * the usual way to say "render again", and here it is a field nothing reads,
-         * which the linter is right to call out. Asking directly says the same thing
-         * with nothing to explain. */
+         * made current changes a tree this element only looks at. A bumped `@state`
+         * field is the usual way to say "render again", and here it would be a field
+         * nothing reads, which the linter is right to call out. */
         this.reread = () => {
             this.requestUpdate();
         };
@@ -121,17 +119,14 @@ let HelixHeadlessVideoPlaylistMenu = class HelixHeadlessVideoPlaylistMenu extend
     }
     /* Resolved once, on the client, and never during a render.
      *
-     * `render` reached for this through `closestInstance` at first, which walks
-     * `parentNode` and steps across a `ShadowRoot` by following its `host`. That
-     * names `ShadowRoot`, which the server has no global for, so every SSR of
-     * this element threw `ReferenceError: Can't find variable: ShadowRoot` from
-     * inside Lit's own result collector, three frames from anything recognisable.
-     *
-     * Which is the tree-inspection rule arriving as a crash rather than as a
-     * wrong answer: a component that walks the tree to render cannot render on a
-     * server, and the server has no tree to walk anyway. Held here instead, set
-     * after the first update, and `undefined` on the server, where an empty menu
-     * is the honest output. */
+     * `closestInstance` walks `parentNode` and steps across a `ShadowRoot` by
+     * following its `host`, and the server has no `ShadowRoot` global, so
+     * reaching for it inside `render` throws
+     * `ReferenceError: Can't find variable: ShadowRoot` from inside Lit's own
+     * result collector. A component that walks the tree to render cannot render
+     * on a server, and the server has no tree to walk anyway. Set after the first
+     * update, and `undefined` on the server, where an empty menu is the honest
+     * output. */
     #playlist;
     /** The playlist this menu belongs to, found upward through the slots. */
     get playlist() {
@@ -154,10 +149,8 @@ let HelixHeadlessVideoPlaylistMenu = class HelixHeadlessVideoPlaylistMenu extend
      * **Which entry is current** is `active`, a property with no attribute, so
      * there is nothing to observe: events travel up from the playlist and this
      * element is below it, and mirroring `active` to a `data-` name is ruled out
-     * on its own merits, `active` being a payload rather than a boolean fact.
-     * Mirroring it was written and reverted here: it put `data-active` onto every
-     * host, which `tree-root.ssr.spec.ts` caught, and the rule it broke was the
-     * one that stops a copied host coming back frozen.
+     * on its own merits, `active` being a payload rather than a boolean fact. A
+     * `data-active` on every host is what `tree-root.ssr.spec.ts` fails on.
      *
      * So it is re-read at the moment it is looked at. `helix-before-open` comes from the
      * menu in this element's own shadow root, which is the one direction events
@@ -204,16 +197,14 @@ let HelixHeadlessVideoPlaylistMenu = class HelixHeadlessVideoPlaylistMenu extend
         }}
         >
           ${
-        /* The still, where there is one, for the reason the list beside the
-           player shows one: a reader picks an episode by recognising it
-           faster than by reading its title, and this menu opens over the
-           picture where reading is hardest.
+        /* The still, where there is one: a reader picks an episode by
+           recognizing it faster than by reading its title, and this menu
+           opens over the picture where reading is hardest.
          *
          * In `start`, which is free: `Menu.Item` renders its tick *after*
          * the label as `part="mark"`, so the leading column has nothing to
          * collide with. `alt=""`, because the name is in the same row and a
-         * still repeating it is the same thing said twice, which is what
-         * `Video.Playlist.Item` already decided about its own thumbnail.
+         * still repeating it is the same thing said twice.
          *
          * Omitted rather than empty where there is no poster, an `<img>`
          * with no `src` being a broken-image glyph in every engine. */

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

@@ -51,18 +51,15 @@ export declare class HelixHeadlessVideoPlaylist extends HelixHeadlessVideoPlayli
     /**
      * The entries, in the order the consumer wrote them.
      *
-     * **Found by tag and filtered on the property, never on `[value]`.** The
-     * prefilter used to be an attribute selector, which is redundant beside the
-     * tag match and is the half that broke: React assigns a matching property
-     * rather than an attribute, so a playlist written in JSX carried no `value`
-     * attribute anywhere and `querySelectorAll('[value]')` returned nothing. Every
-     * entry vanished from the list, the active one included, and the component
-     * threw no error because an empty playlist is a legal playlist.
+     * **Found by tag and filtered on the property, never on `[value]`.** React
+     * assigns a matching property rather than an attribute, so a playlist written
+     * in JSX carries no `value` attribute anywhere and `querySelectorAll('[value]')`
+     * returns nothing: every entry vanishes from the list, the active one
+     * included, and nothing throws, an empty playlist being a legal playlist.
      *
-     * Reading `one.value` answers the same question and answers it the same way
-     * whether the consumer wrote markup or set a property, which is the only form
-     * that works for both. Found by rendering the React twin of this family's
-     * examples beside the markup ones.
+     * Reading `one.value` answers the same question the same way whether the
+     * consumer wrote markup or set a property, which is the only form that works
+     * for both.
      */
     private get items();
     /**
@@ -80,6 +77,14 @@ export declare class HelixHeadlessVideoPlaylist extends HelixHeadlessVideoPlayli
      * shows its start control and waits.
      */
     private chased;
+    /**
+     * The player, whichever tag the consumer slotted.
+     *
+     * Asked of the slot rather than matched by tag name: the headless tier's
+     * player is `helix-headless-video` and the styled tier's is `helix-video`, and
+     * a consumer bringing a third under either name should still be driven. What
+     * is needed of it is `src`, which is the whole of the contract.
+     */
     private get player();
     /** Moves by one, and does nothing at either end. */
     private step;

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

@@ -56,14 +56,6 @@ let HelixHeadlessVideoPlaylist = class HelixHeadlessVideoPlaylist extends MixinC
          * Accessible name for the list, which usually has no visible heading.
          */
         this.label = 'Playlist';
-        /*
-         * The player, whichever tag the consumer slotted.
-         *
-         * Asked of the slot rather than matched by tag name: the headless tier's
-         * player is `helix-headless-video` and the styled tier's is `helix-video`, and a
-         * consumer bringing a third under either name should still be driven. What is
-         * needed of it is `src`, which is the whole of the contract.
-         */
         /**
          * Whether the entry changed because somebody moved through the playlist.
          *
@@ -83,12 +75,11 @@ let HelixHeadlessVideoPlaylist = class HelixHeadlessVideoPlaylist extends MixinC
             /* Stopped and not relayed. The entry says it was chosen, this element says
                what is playing, and a consumer hearing both would hear one press twice
                under two names.
-             *
-             * `stopImmediatePropagation`, not `stopPropagation`. The consumer's listener
-             * is on this same element, and stopping propagation only keeps an event off
-             * the *next* node: every listener already bound here still runs, so the
-             * entry's selection reached them anyway. Command carries the longer note,
-             * and the spec below is what caught this one. */
+        
+               `stopImmediatePropagation`, not `stopPropagation`. The consumer's listener
+               is on this same element, and stopping propagation only keeps an event off
+               the *next* node: every listener already bound here still runs, so the
+               entry's selection reaches them anyway. Command carries the longer note. */
             event.stopImmediatePropagation();
             this.chased = true;
             this.requestActive(event.detail.value);
@@ -109,24 +100,29 @@ let HelixHeadlessVideoPlaylist = class HelixHeadlessVideoPlaylist extends MixinC
     /**
      * The entries, in the order the consumer wrote them.
      *
-     * **Found by tag and filtered on the property, never on `[value]`.** The
-     * prefilter used to be an attribute selector, which is redundant beside the
-     * tag match and is the half that broke: React assigns a matching property
-     * rather than an attribute, so a playlist written in JSX carried no `value`
-     * attribute anywhere and `querySelectorAll('[value]')` returned nothing. Every
-     * entry vanished from the list, the active one included, and the component
-     * threw no error because an empty playlist is a legal playlist.
+     * **Found by tag and filtered on the property, never on `[value]`.** React
+     * assigns a matching property rather than an attribute, so a playlist written
+     * in JSX carries no `value` attribute anywhere and `querySelectorAll('[value]')`
+     * returns nothing: every entry vanishes from the list, the active one
+     * included, and nothing throws, an empty playlist being a legal playlist.
      *
-     * Reading `one.value` answers the same question and answers it the same way
-     * whether the consumer wrote markup or set a property, which is the only form
-     * that works for both. Found by rendering the React twin of this family's
-     * examples beside the markup ones.
+     * Reading `one.value` answers the same question the same way whether the
+     * consumer wrote markup or set a property, which is the only form that works
+     * for both.
      */
     get items() {
         return [
             ...this.querySelectorAll('helix-video-playlist-item, helix-headless-video-playlist-item'),
         ].filter((one) => one.value !== '');
     }
+    /**
+     * The player, whichever tag the consumer slotted.
+     *
+     * Asked of the slot rather than matched by tag name: the headless tier's
+     * player is `helix-headless-video` and the styled tier's is `helix-video`, and
+     * a consumer bringing a third under either name should still be driven. What
+     * is needed of it is `src`, which is the whole of the contract.
+     */
     get player() {
         const slot = this.renderRoot?.querySelector('slot[name="player"]');
         const first = slot?.assignedElements()[0];

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

@@ -18,13 +18,11 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * emits it, React re-emits it as a child rather than applying it, and it is one
  * node whatever the row count.
  *
- * **The same shape the charts already use**, `for="<id>"` pointing at markup the
- * consumer wrote, and the difference is what is at the other end. A chart names
- * a `<table>`, which is the accessible version of the picture and which a reader
- * with no JavaScript still gets. Ten thousand rows cannot be that: the table
- * would be the cost this exists to avoid. So the accessible version here is the
- * rendered window plus `aria-setsize` and `aria-posinset`, which is what says
- * "four thousand of ten thousand" rather than "four of twenty".
+ * **The accessible version is not a `<table>`**, the way it is for the charts
+ * that share this `for="<id>"` shape: ten thousand rows in one is the cost this
+ * exists to avoid. It is the rendered window plus `aria-setsize` and
+ * `aria-posinset`, which is what says "four thousand of ten thousand" rather
+ * than "four of twenty".
  *
  * **Rows are light DOM, deliberately.** They are cloned from the consumer's
  * template and appended to the host, so a document rule reaches them, the base
@@ -105,11 +103,9 @@ export declare class HelixHeadlessVirtualList extends HelixElement {
     /**
      * Puts the windowed rows into the light DOM, and takes the rest out.
      *
-     * Cleared and re-cloned rather than reconciled, which is the simple thing and
-     * is measured rather than assumed to be enough: a window is twenty-odd rows
-     * and cloning that many is well under a frame. A reconciler here would be
-     * carrying keys and identity for a set nothing selects into, and is the kind
-     * of optimisation to add against a measurement rather than ahead of one.
+     * Cleared and re-cloned rather than reconciled: a window is twenty-odd rows
+     * and cloning that many is well under a frame. A reconciler here would carry
+     * keys and identity for a set nothing selects into.
      */
     private place;
     protected render(): TemplateResult;

package/dist/virtual-list/root/virtual-list-root.js

@@ -25,13 +25,11 @@ import { property, state } from 'lit/decorators.js';
  * emits it, React re-emits it as a child rather than applying it, and it is one
  * node whatever the row count.
  *
- * **The same shape the charts already use**, `for="<id>"` pointing at markup the
- * consumer wrote, and the difference is what is at the other end. A chart names
- * a `<table>`, which is the accessible version of the picture and which a reader
- * with no JavaScript still gets. Ten thousand rows cannot be that: the table
- * would be the cost this exists to avoid. So the accessible version here is the
- * rendered window plus `aria-setsize` and `aria-posinset`, which is what says
- * "four thousand of ten thousand" rather than "four of twenty".
+ * **The accessible version is not a `<table>`**, the way it is for the charts
+ * that share this `for="<id>"` shape: ten thousand rows in one is the cost this
+ * exists to avoid. It is the rendered window plus `aria-setsize` and
+ * `aria-posinset`, which is what says "four thousand of ten thousand" rather
+ * than "four of twenty".
  *
  * **Rows are light DOM, deliberately.** They are cloned from the consumer's
  * template and appended to the host, so a document rule reaches them, the base
@@ -98,10 +96,9 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
          * Empty on a server, which has nothing to read.
          */
         this.rows = [];
-        /* No `overscan` property. The controller's four is a statement about a frame
-           of fast scrolling at a 32 pixel row, which is a fact about the platform
-           rather than a preference, and a knob here would be one more thing to get
-           wrong for no case anybody has. */
+        /* No `overscan` property. The controller's four is a frame of fast scrolling
+           at a 32 pixel row, which is a fact about the platform rather than a
+           preference. */
         this.virtualize = new VirtualizeController(this, {
             container: () => this.renderRoot.querySelector('[part="viewport"]'),
             count: () => this.rows.length,
@@ -149,11 +146,9 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
     /**
      * Puts the windowed rows into the light DOM, and takes the rest out.
      *
-     * Cleared and re-cloned rather than reconciled, which is the simple thing and
-     * is measured rather than assumed to be enough: a window is twenty-odd rows
-     * and cloning that many is well under a frame. A reconciler here would be
-     * carrying keys and identity for a set nothing selects into, and is the kind
-     * of optimisation to add against a measurement rather than ahead of one.
+     * Cleared and re-cloned rather than reconciled: a window is twenty-odd rows
+     * and cloning that many is well under a frame. A reconciler here would carry
+     * keys and identity for a set nothing selects into.
      */
     place() {
         const template = this.querySelector('template');