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

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

@@ -41,11 +41,6 @@ declare const HelixHeadlessToastItem_base: (new (...args: any[]) => import("@fus
  * dismiss control raise the same event, so a consumer handles one path and not
  * two.
  *
- * The properties below are written by this component and read by whoever draws
- * it. A consumer sets none of them: they carry a number this element computed
- * and CSS cannot, which is what lets a stylesheet on this tier draw the thing
- * without measuring anything itself.
- *
  * @since 0.1.0
  * @status experimental
  * @documentation https://helix.fusion.dev/components/toast
@@ -82,8 +77,7 @@ export declare class HelixHeadlessToastItem extends HelixHeadlessToastItem_base
     /**
      * What kind of message it is, which picks the mark and its name.
      *
-     * `severity` was a sixth spelling of `tone`, and a subset of it: a toast
-     * reports a status and never a brand role.
+     * A subset of the tone axis: a toast reports a status and never a brand role.
      */
     tone?: 'danger' | 'info' | 'success' | 'warning';
     /** When the current run of the timer began, or nothing while it is paused. */
@@ -94,24 +88,15 @@ export declare class HelixHeadlessToastItem extends HelixHeadlessToastItem_base
     /**
      * Whether the message is still showing.
      *
-     * The same decide-once contract every other stateful thing here carries, and
-     * it was the one exception: this waited to be told in every case, so
-     * `duration` did nothing at all without consumer script and the dismiss
-     * control looked broken to anyone who pressed it. `Dialog` closes itself,
-     * `Accordion` closes itself, and there was no reason a message should not.
-     *
-     * Declared by the markup and it is the consumer's: the item announces and
-     * waits. Not declared and it is the item's: it goes when it is asked to, and
-     * the consumer still hears `helix-dismiss` and takes it out of their own
-     * list. Read once, at the first update.
+     * The item always applies: it goes when it is asked to, having announced
+     * `helix-dismiss` first, and a consumer who owns the list refuses that event
+     * to take the decision instead.
      *
      * **No `default-open`, unlike the four mixins.** A `default-` seed exists so
      * markup can choose a starting state without claiming ownership, and there is
      * only one starting state that makes sense: a message that has been rendered
      * is showing. An attribute whose only legal value is the default is an
      * attribute nobody can use.
-     *
-     *
      */
     get open(): boolean;
     set open(next: boolean);
@@ -134,14 +119,11 @@ export declare class HelixHeadlessToastItem extends HelixHeadlessToastItem_base
      * How many reasons there are to hold the clock, rather than whether there is
      * one.
      *
-     * Hover and focus both stopped the same timer with nothing counting them, so
-     * a reader who tabbed into a message and then moved the pointer off it had
-     * the clock restarted underneath them while they were still reading it. That
-     * is the case the pause exists for, and it was the case that broke it.
-     *
-     * The two are genuinely independent: a pointer can leave while focus stays,
-     * and focus can leave while the pointer stays. Only the last one out starts
-     * it again.
+     * Hover and focus stop the same timer, and the two are genuinely independent:
+     * a pointer can leave while focus stays, and focus can leave while the
+     * pointer stays. Uncounted, a reader who tabs into a message and then moves
+     * the pointer off it has the clock restarted underneath them, which is the
+     * case the pause exists for. Only the last one out starts it again.
      */
     private holds;
     private readonly handlePause;

package/dist/toast/item/toast-item.js

@@ -49,11 +49,6 @@ import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
  * dismiss control raise the same event, so a consumer handles one path and not
  * two.
  *
- * The properties below are written by this component and read by whoever draws
- * it. A consumer sets none of them: they carry a number this element computed
- * and CSS cannot, which is what lets a stylesheet on this tier draw the thing
- * without measuring anything itself.
- *
  * @since 0.1.0
  * @status experimental
  * @documentation https://helix.fusion.dev/components/toast
@@ -91,14 +86,11 @@ let HelixHeadlessToastItem = class HelixHeadlessToastItem extends MixinDismissib
          * How many reasons there are to hold the clock, rather than whether there is
          * one.
          *
-         * Hover and focus both stopped the same timer with nothing counting them, so
-         * a reader who tabbed into a message and then moved the pointer off it had
-         * the clock restarted underneath them while they were still reading it. That
-         * is the case the pause exists for, and it was the case that broke it.
-         *
-         * The two are genuinely independent: a pointer can leave while focus stays,
-         * and focus can leave while the pointer stays. Only the last one out starts
-         * it again.
+         * Hover and focus stop the same timer, and the two are genuinely independent:
+         * a pointer can leave while focus stays, and focus can leave while the
+         * pointer stays. Uncounted, a reader who tabs into a message and then moves
+         * the pointer off it has the clock restarted underneath them, which is the
+         * case the pause exists for. Only the last one out starts it again.
          */
         this.holds = 0;
         this.handlePause = () => {
@@ -115,24 +107,15 @@ let HelixHeadlessToastItem = class HelixHeadlessToastItem extends MixinDismissib
     /**
      * Whether the message is still showing.
      *
-     * The same decide-once contract every other stateful thing here carries, and
-     * it was the one exception: this waited to be told in every case, so
-     * `duration` did nothing at all without consumer script and the dismiss
-     * control looked broken to anyone who pressed it. `Dialog` closes itself,
-     * `Accordion` closes itself, and there was no reason a message should not.
-     *
-     * Declared by the markup and it is the consumer's: the item announces and
-     * waits. Not declared and it is the item's: it goes when it is asked to, and
-     * the consumer still hears `helix-dismiss` and takes it out of their own
-     * list. Read once, at the first update.
+     * The item always applies: it goes when it is asked to, having announced
+     * `helix-dismiss` first, and a consumer who owns the list refuses that event
+     * to take the decision instead.
      *
      * **No `default-open`, unlike the four mixins.** A `default-` seed exists so
      * markup can choose a starting state without claiming ownership, and there is
      * only one starting state that makes sense: a message that has been rendered
      * is showing. An attribute whose only legal value is the default is an
      * attribute nobody can use.
-     *
-     *
      */
     get open() {
         return this.openState ?? true;
@@ -169,9 +152,7 @@ let HelixHeadlessToastItem = class HelixHeadlessToastItem extends MixinDismissib
                exact. A toast is not an overlay that opens and closes: `next` below is
                `false` and nothing here ever calls `requestOpen(true)`, so it only
                ever asks in one direction, and the verb for that direction is
-               `dismiss`. `HelixDismissEvent` already carries it for a tag leaving a
-               list and an announcement closing itself, which is the same act from the
-               element's side. A consumer controlling `open` therefore answers
+               `dismiss`. A consumer controlling `open` therefore answers
                `onhelix-dismiss`, and the generated types ask for exactly that. */
             event: () => this.dismissEvent(),
             host: this,
@@ -214,25 +195,22 @@ let HelixHeadlessToastItem = class HelixHeadlessToastItem extends MixinDismissib
     }
     willUpdate(changed) {
         super.willUpdate(changed);
-        /* Before anything else reads it, and only the first time. Everything that
-           declares the mode has arrived by now: attributes from markup or from a
-           server's output, and properties a framework assigned on mount. */
         /* Mirrored for CSS rather than reflected onto `open` itself, which is the
            library's rule about state: a reflected `open` is indistinguishable from
            one the consumer declared, and that attribute is what ownership is read
            from. `data-closed` can never be mistaken for a declaration. */
-        /* **`data-closed`, because open is the resting state.** It was `data-open`,
-           written whenever the toast was open, and a toast opens by default: a
-           consumer server-rendering `<helix-toast-item>` got a `data-open` back that
-           React never sent. Inverting keeps a `data-` hook for the headless consumer
-           this publishes it for, and moves the write to the side that only happens
-           after somebody dismisses the message, which is long past hydration. */
+        /* **`data-closed`, because open is the resting state.** A toast opens by
+           default, so a `data-open` would appear on a consumer's server-rendered
+           `<helix-toast-item>` without React having sent it. Inverting keeps the
+           `data-` hook for the headless consumer this publishes it for, and moves
+           the write to the side that only happens after somebody dismisses the
+           message, which is long past hydration. */
         this.toggleAttribute('data-closed', !this.open);
         /* And `hidden` beside it, because `data-closed` is a hook and not a
-           mechanism. A dismissed toast was hidden by `opacity: 0` and
-           `visibility: hidden` in the styled sheet and by nothing at all here, so a
-           consumer on this tier had a message that never went away: measured, a
-           closed base toast printed its text on the page.
+           mechanism. With the hiding living only in the styled sheet's
+           `opacity: 0` and `visibility: hidden`, a consumer on this tier has a
+           dismissed message that never goes away: measured, a closed base toast
+           printed its text on the page.
            It costs the styled tier nothing, the same as the accordion: `:host` sets
            `display: grid` unconditionally so the author rule beats the UA sheet,
            and the exit still animates its row down from `1fr`. */

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

@@ -17,11 +17,10 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * the page for everyone rather than only for the people who cannot see it.
  *
  * **It never creates or destroys anything.** The consumer renders items and
- * removes them; asking to go is a cancelable `helix-dismiss` from the item.
- * That is still exactly true of the region: an item that has gone hides itself
- * and stays in the tree, so a consumer whose state still lists it does not have
- * their framework fighting a node this component took away. What changed is
- * that the item no longer waits to be told before hiding, unless the consumer
+ * removes them; asking to go is a cancelable `helix-dismiss` from the item. An
+ * item that has gone hides itself and stays in the tree, so a consumer whose
+ * state still lists it does not have their framework fighting a node this
+ * component took away. It hides without waiting to be told, unless the consumer
  * declared `open` and said the state is theirs.
  * There is no `toast.show()`, because an imperative queue inside a component is
  * a second copy of the application's state that nothing can render from: an app
@@ -51,15 +50,12 @@ export declare class HelixHeadlessToast extends HelixElement {
      * toasts is a fact about the page: a stack whose members disagreed about
      * where they were would not be a stack.
      *
-     * **Optional, and bottom-end is the absence of it.** It reflected *and*
-     * defaulted, which is the pair that writes onto a host: every toast region
-     * anybody rendered gained a `placement="bottom-end"` nobody typed, and a
-     * React consumer's server markup does not have it. The styled sheet carries
-     * the resting arrangement in its own `:host` rule now and the selectors
-     * describe only the departures, which is what `orientation` has always done.
-     *
-     * The SSR spec could never have caught it: it passed a placement explicitly,
-     * so the attribute it asserted was one the consumer had written.
+     * **Optional, and bottom-end is the absence of it.** Reflecting *and*
+     * defaulting is the pair that writes onto a host: every toast region anybody
+     * rendered would gain a `placement="bottom-end"` nobody typed, which a React
+     * consumer's server markup does not have. The styled sheet carries the resting
+     * arrangement in its own `:host` rule and the selectors describe only the
+     * departures, which is what `orientation` does.
      */
     placement?: 'bottom-center' | 'bottom-end' | 'bottom-start' | 'top-center' | 'top-end' | 'top-start';
     protected willUpdate(changed: PropertyValues): void;

package/dist/toast/root/toast-root.js

@@ -24,11 +24,10 @@ import { property } from 'lit/decorators.js';
  * the page for everyone rather than only for the people who cannot see it.
  *
  * **It never creates or destroys anything.** The consumer renders items and
- * removes them; asking to go is a cancelable `helix-dismiss` from the item.
- * That is still exactly true of the region: an item that has gone hides itself
- * and stays in the tree, so a consumer whose state still lists it does not have
- * their framework fighting a node this component took away. What changed is
- * that the item no longer waits to be told before hiding, unless the consumer
+ * removes them; asking to go is a cancelable `helix-dismiss` from the item. An
+ * item that has gone hides itself and stays in the tree, so a consumer whose
+ * state still lists it does not have their framework fighting a node this
+ * component took away. It hides without waiting to be told, unless the consumer
  * declared `open` and said the state is theirs.
  * There is no `toast.show()`, because an imperative queue inside a component is
  * a second copy of the application's state that nothing can render from: an app

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

@@ -54,14 +54,7 @@ declare const HelixHeadlessToggleGroup_base: (new (...args: any[]) => import("@f
  * @csspart track - The bar the items sit in.
  */
 export declare class HelixHeadlessToggleGroup extends HelixHeadlessToggleGroup_base {
-    /**
-     * Marks the chosen item, which used to happen inside the placing method.
-     *
-     * They were one method because the geometry needed the active item anyway,
-     * and that made a selection change look like a layout concern. `resolveActiveItem`
-     * rather than the first item, because a group opening on a disabled segment
-     * marked it as chosen.
-     */
+    /** Marks the chosen item, separately from placing the indicator. */
     private sync;
     private readonly indicator;
     private observer;
@@ -87,14 +80,12 @@ export declare class HelixHeadlessToggleGroup extends HelixHeadlessToggleGroup_b
     protected updated(changed: PropertyValues): void;
     protected willUpdate(changed: PropertyValues): void;
     /**
-     * The verdict on the answer, which `required` had been asking for and not
-     * getting.
+     * The verdict on the answer `required` asks for.
      *
-     * `required` arrived with `MixinField` and nothing enforced it: the attribute
-     * reflected, the marker rendered beside the label, and a form with an
-     * unanswered group submitted anyway. An API that exists and does nothing is
-     * worse than one that is missing, because the marker is a promise to the
-     * reader that something will stop them.
+     * `required` arrives with `MixinField` and enforces nothing on its own: the
+     * attribute reflects and the marker renders beside the label, and without this
+     * a form with an unanswered group submits anyway. The marker is a promise to
+     * the reader that something will stop them.
      *
      * The anchor is the track rather than the host, so the browser's own bubble
      * points at the control rather than at a box with nothing in it.

package/dist/toggle/group/toggle-group.js

@@ -63,7 +63,6 @@ import { HelixHeadlessToggle } from '../root/toggle-root.js';
 let HelixHeadlessToggleGroup = class HelixHeadlessToggleGroup extends MixinControllerValue(MixinField(HelixFormElement)) {
     constructor() {
         super(...arguments);
-        /* The mark. The selection sync it used to share a method with is `sync()`. */
         this.indicator = new IndicatorController(this, {
             // The same exact match `sync` makes: nothing chosen means nothing marked,
             // and the controller takes the mark away rather than parking it on item one.
@@ -80,10 +79,9 @@ let HelixHeadlessToggleGroup = class HelixHeadlessToggleGroup extends MixinContr
            is an unused one, and the honest reading is that the subclass tier is where
            a consumer would reach for it. */
         this.keys = new KeyboardNavigationController(this, { items: () => this.items });
-        /* Stated once, and the group never thinks about it again. See the
-           controller: the cascade was four hand calls from four different
-           methods, so which paths reached it differed by component and a fifth
-           group would have got none at all. */
+        /* Stated once, and the group never thinks about it again. The controller is
+           what stops the cascade being hand-called from whichever methods a component
+           happens to have. */
         this.cascade = new DisabledCascadeController(this, {
             items: () => this.items,
         });
@@ -91,25 +89,15 @@ let HelixHeadlessToggleGroup = class HelixHeadlessToggleGroup extends MixinContr
             this.requestValue(event.detail.value);
         };
     }
-    /**
-     * Marks the chosen item, which used to happen inside the placing method.
-     *
-     * They were one method because the geometry needed the active item anyway,
-     * and that made a selection change look like a layout concern. `resolveActiveItem`
-     * rather than the first item, because a group opening on a disabled segment
-     * marked it as chosen.
-     */
+    /** Marks the chosen item, separately from placing the indicator. */
     sync() {
-        /* An exact match and nothing else.
-         *
-         * This went through `resolveActiveItem`, which falls back to the first
-         * enabled item, so a group with no value marked one anyway:
-         * `aria-checked="true"`, the thumb placed under it, full selected styling,
-         * while the group reported nothing. A `required` group showed an answer it
-         * did not have, and a reader who submitted without touching it was told a
-         * value was missing while looking at one.
+        /* An exact match and nothing else, never `resolveActiveItem`, which falls
+         * back to the first enabled item: a group with no value would mark one
+         * anyway, `aria-checked="true"` and the thumb under it and full selected
+         * styling, while the group reported nothing. A `required` group would then
+         * tell a reader a value is missing while they are looking at one.
          *
-         * The fallback is right where it came from. A tab set always shows a panel,
+         * That fallback is right where it came from. A tab set always shows a panel,
          * so something has to be current; a group that reports a form value has the
          * honest option of reporting none. */
         const active = this.items.find((item) => item.value === this.value);
@@ -151,8 +139,7 @@ let HelixHeadlessToggleGroup = class HelixHeadlessToggleGroup extends MixinContr
          * reordering a list left this permanently dead: the observer gone, nothing
          * to rebuild it, and the component still rendering as though it were
          * watching. Guarded on `hasUpdated`, because the first connection happens
-         * before the first render and there is nothing to watch yet.
-         * `check:observers` holds it. */
+         * before the first render and there is nothing to watch yet. */
         if (this.hasUpdated) {
             this.measure();
             this.watch();
@@ -209,14 +196,12 @@ let HelixHeadlessToggleGroup = class HelixHeadlessToggleGroup extends MixinContr
         this.internals.setFormValue(this.value === '' ? null : this.value);
     }
     /**
-     * The verdict on the answer, which `required` had been asking for and not
-     * getting.
+     * The verdict on the answer `required` asks for.
      *
-     * `required` arrived with `MixinField` and nothing enforced it: the attribute
-     * reflected, the marker rendered beside the label, and a form with an
-     * unanswered group submitted anyway. An API that exists and does nothing is
-     * worse than one that is missing, because the marker is a promise to the
-     * reader that something will stop them.
+     * `required` arrives with `MixinField` and enforces nothing on its own: the
+     * attribute reflects and the marker renders beside the label, and without this
+     * a form with an unanswered group submits anyway. The marker is a promise to
+     * the reader that something will stop them.
      *
      * The anchor is the track rather than the host, so the browser's own bubble
      * points at the control rather than at a box with nothing in it.
@@ -238,11 +223,11 @@ let HelixHeadlessToggleGroup = class HelixHeadlessToggleGroup extends MixinContr
      * in it.
      */
     render() {
-        /* The track is an element now, where it used to be the host itself.
-           It has to be: the label, the hint and the message are the host's children
-           too, and with the track on the host they were flex items in the same row
-           as the segments. The track also owns the box the indicator is measured
-           against, which is why `place` reads it rather than `this`. */
+        /* The track is an element rather than the host, and has to be: the label,
+           the hint and the message are the host's children too, so a track on the
+           host makes them flex items in the same row as the segments. The track also
+           owns the box the indicator is measured against, which is why `place` reads
+           it rather than `this`. */
         /* **Inside the track when it is placed at the start, not beside it.** A
            label sitting outside reads as a field's label that happens to be on one
            line; inside, with a rule after it, the group reads as one control that

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

@@ -24,9 +24,9 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  */
 export declare class HelixHeadlessToggle extends HelixElement {
     /**
-     * Identifies the item to the group.
+     * Whether the item can be chosen.
      */
-    value: string;
+    disabled: boolean;
     /**
      * Whether the markup declared this one chosen, which is what a reset returns to.
      *
@@ -36,24 +36,29 @@ export declare class HelixHeadlessToggle extends HelixElement {
      * the markup said at upgrade, before anything could overwrite it: read the
      * attribute later and the listbox's own writes answer instead.
      *
-     * **The deeper half is 302 and is not this.** State reflecting under the
-     * declaration's name is the fault `TreeItem` already avoids by mirroring to
-     * `data-selected`, and four families here still write `selected` back into a
-     * consumer's markup. Splitting them means moving what every stylesheet selects
-     * on, which is a change of its own rather than a property being added.
+     * **The deeper half is not this.** State reflecting under the declaration's
+     * name is the fault `TreeItem` avoids by mirroring to `data-selected`.
+     * Splitting them means moving what every stylesheet selects on, which is a
+     * change of its own rather than a property being added.
      */
     get defaultSelected(): boolean;
     set defaultSelected(next: boolean);
     /** What the markup said, read once at construction for the reason above. */
     private seeded;
     /**
-     * Whether this item is the current one.
+     * Whether this item holds the group's tab stop while nothing is chosen.
+     *
+     * The stop normally rides on the selection, and an unanswered group has no
+     * selection, so without this the keyboard cannot reach it. Written by the
+     * group, with no attribute: it is coordination between elements, and
+     * `tabindex` on a host the consumer rendered is the change a React consumer's
+     * hydration reports and does not patch up.
      */
-    selected: boolean;
+    focusable: boolean;
     /**
-     * Whether the item can be chosen.
+     * Whether this item is the current one.
      */
-    disabled: boolean;
+    selected: boolean;
     /**
      * Moves focus to this item's own control.
      *
@@ -65,29 +70,23 @@ export declare class HelixHeadlessToggle extends HelixElement {
     /** Chooses this item and announces it. */
     select(): void;
     /**
-     * Whether this item holds the group's tab stop while nothing is chosen.
-     *
-     * The stop normally rides on the selection, and an unanswered group has no
-     * selection, so it had no stop and the keyboard could not reach it. Written
-     * by the group, with no attribute: it is coordination between elements, and
-     * `tabindex` on a host the consumer rendered is the change a React consumer's
-     * hydration reports and does not patch up.
+     * Identifies the item to the group.
      */
-    focusable: boolean;
+    value: string;
     /**
      * Mirrors the chosen state where a stylesheet can select on it.
      *
-     * **A custom state and not the `selected` attribute it used to reflect.** The
-     * parent writes this: a listbox choosing a row, a tab strip moving the tab, a
-     * radio group answering for its set. Reflected, that put 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.
+     * **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. What stops is the write back. See 302 and 304.
+     * markup means. There is no write back.
      */
     protected willUpdate(changed: PropertyValues): void;
     protected render(): TemplateResult;

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

@@ -32,30 +32,30 @@ import { property } from 'lit/decorators.js';
 let HelixHeadlessToggle = class HelixHeadlessToggle extends HelixElement {
     constructor() {
         super(...arguments);
-        /**
-         * Identifies the item to the group.
-         */
-        this.value = '';
-        /** What the markup said, read once at construction for the reason above. */
-        this.seeded = this.hasAttribute('selected');
-        /**
-         * Whether this item is the current one.
-         */
-        this.selected = false;
         /**
          * Whether the item can be chosen.
          */
         this.disabled = false;
+        /** What the markup said, read once at construction for the reason above. */
+        this.seeded = this.hasAttribute('selected');
         /**
          * Whether this item holds the group's tab stop while nothing is chosen.
          *
          * The stop normally rides on the selection, and an unanswered group has no
-         * selection, so it had no stop and the keyboard could not reach it. Written
-         * by the group, with no attribute: it is coordination between elements, and
+         * selection, so without this the keyboard cannot reach it. Written by the
+         * group, with no attribute: it is coordination between elements, and
          * `tabindex` on a host the consumer rendered is the change a React consumer's
          * hydration reports and does not patch up.
          */
         this.focusable = false;
+        /**
+         * Whether this item is the current one.
+         */
+        this.selected = false;
+        /**
+         * Identifies the item to the group.
+         */
+        this.value = '';
     }
     /**
      * Whether the markup declared this one chosen, which is what a reset returns to.
@@ -66,11 +66,10 @@ let HelixHeadlessToggle = class HelixHeadlessToggle extends HelixElement {
      * the markup said at upgrade, before anything could overwrite it: read the
      * attribute later and the listbox's own writes answer instead.
      *
-     * **The deeper half is 302 and is not this.** State reflecting under the
-     * declaration's name is the fault `TreeItem` already avoids by mirroring to
-     * `data-selected`, and four families here still write `selected` back into a
-     * consumer's markup. Splitting them means moving what every stylesheet selects
-     * on, which is a change of its own rather than a property being added.
+     * **The deeper half is not this.** State reflecting under the declaration's
+     * name is the fault `TreeItem` avoids by mirroring to `data-selected`.
+     * Splitting them means moving what every stylesheet selects on, which is a
+     * change of its own rather than a property being added.
      */
     get defaultSelected() {
         return this.seeded;
@@ -98,17 +97,17 @@ let HelixHeadlessToggle = class HelixHeadlessToggle extends HelixElement {
     /**
      * Mirrors the chosen state where a stylesheet can select on it.
      *
-     * **A custom state and not the `selected` attribute it used to reflect.** The
-     * parent writes this: a listbox choosing a row, a tab strip moving the tab, a
-     * radio group answering for its set. Reflected, that put 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.
+     * **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. What stops is the write back. See 302 and 304.
+     * markup means. There is no write back.
      */
     willUpdate(changed) {
         super.willUpdate(changed);
@@ -128,18 +127,18 @@ let HelixHeadlessToggle = class HelixHeadlessToggle extends HelixElement {
     </button>`;
     }
 };
-__decorate([
-    property()
-], HelixHeadlessToggle.prototype, "value", void 0);
-__decorate([
-    property({ type: Boolean })
-], HelixHeadlessToggle.prototype, "selected", void 0);
 __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/toolbar/root/toolbar-root.d.ts

@@ -42,12 +42,10 @@ export declare class HelixHeadlessToolbar extends HelixElement {
      * toolbar holds anything, including elements this package has never heard of.
      * Client only, there being no tree to walk on the server.
      *
-     * **It does not ask a child whether it is focusable, and the description said
-     * it did.** That would mean reading a `focusable` property off each one, which
-     * `focus` below does when moving the stop and this does not when choosing the
-     * set. The two are separable and only one of them was ever written: an element
-     * that is neither disabled nor hidden and still cannot take focus is counted
-     * here and skipped there.
+     * **It does not ask a child whether it is focusable.** Reading a `focusable`
+     * property is what `setTabStop` does when moving the stop, not what this does
+     * when choosing the set, so an element that is neither disabled nor hidden and
+     * still cannot take focus is counted here and skipped there.
      */
     private get controls();
     /**
@@ -75,10 +73,9 @@ export declare class HelixHeadlessToolbar extends HelixElement {
      * Gives the tab stop back to a control that still exists.
      *
      * `controls` excludes anything disabled or hidden, so disabling the control
-     * holding the stop dropped it out of the list while every other control was
-     * already at `-1`. The toolbar then had no tab stop at all and the keyboard
-     * could not reach it again, from a change as ordinary as a Save button
-     * disabling itself once the form is clean.
+     * holding the stop drops it out of the list while every other control is
+     * already at `-1`, leaving a toolbar the keyboard cannot reach at all. A Save
+     * button disabling itself once the form is clean is enough to do it.
      *
      * `foreign` stays false, the same as the first claim: a control this package
      * has never heard of that was never given `tabindex="-1"` is still in the