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

package/dist/qr-code/root/qr-code-root.js

@@ -21,10 +21,8 @@ const isFinder = (x, y, size) => {
  * tree walks, and every one of them is a one-unit square.
  *
  * **`square` joins runs and the other styles cannot.** A row of eight square
- * modules is one `h8`, which is what keeps the node count down; a row of eight
- * *rounded* ones is eight shapes, because the corners are what is being drawn
- * and a joined run has no corners in the middle of it. So the cost of the other
- * styles is real and is paid only by the codes that ask for them.
+ * modules is one `h8`; a row of eight *rounded* ones is eight shapes, because
+ * the corners are what is being drawn and a joined run has none in the middle.
  *
  * `only` splits the drawing in two without walking the matrix twice: the finder
  * squares are structural, at three known corners, so a caller can ask for them
@@ -59,7 +57,7 @@ const pathFor = (matrix, style, only = 'all') => {
         return parts.join('');
     }
     /* A circle for `dots` and a squircle for `rounded`, both drawn as arcs on a
-       one-unit square. The radius is a little under half so neighbouring dots do
+       one-unit square. The radius is a little under half so neighboring dots do
        not touch, which is what makes a dotted code read as dots rather than as a
        square one with soft edges. */
     const r = style === 'dots' ? 0.45 : 0.28;
@@ -123,10 +121,6 @@ const pathFor = (matrix, style, only = 'all') => {
 let HelixHeadlessQrCode = class HelixHeadlessQrCode extends HelixElement {
     constructor() {
         super(...arguments);
-        /**
-         * What the code encodes, which is usually a URL.
-         */
-        this.value = '';
         /**
          * What the image is called.
          *
@@ -144,10 +138,14 @@ let HelixHeadlessQrCode = class HelixHeadlessQrCode extends HelixElement {
          * middle. That cost is paid only by a code that asks for them.
          *
          * A scanner reads contrast between cells, not their shape, so all three
-         * scan. `dots` sits a little under half a module so neighbours do not touch,
+         * scan. `dots` sits a little under half a module so neighbors do not touch,
          * which is what makes it read as dots rather than as a softened square code.
          */
         this.shape = 'square';
+        /**
+         * What the code encodes, which is usually a URL.
+         */
+        this.value = '';
         /** Whether anything is slotted into the middle. */
         this.logo = false;
     }
@@ -216,8 +214,8 @@ let HelixHeadlessQrCode = class HelixHeadlessQrCode extends HelixElement {
     }
 };
 __decorate([
-    property()
-], HelixHeadlessQrCode.prototype, "value", void 0);
+    property({ attribute: 'correction' })
+], HelixHeadlessQrCode.prototype, "correction", void 0);
 __decorate([
     property()
 ], HelixHeadlessQrCode.prototype, "label", void 0);
@@ -225,8 +223,8 @@ __decorate([
     property()
 ], HelixHeadlessQrCode.prototype, "shape", void 0);
 __decorate([
-    property({ attribute: 'correction' })
-], HelixHeadlessQrCode.prototype, "correction", void 0);
+    property()
+], HelixHeadlessQrCode.prototype, "value", void 0);
 HelixHeadlessQrCode = __decorate([
     customElement('helix-headless-qr-code')
 ], HelixHeadlessQrCode);

package/dist/radio/group/radio-group.js

@@ -55,15 +55,14 @@ let HelixHeadlessRadioGroup = class HelixHeadlessRadioGroup extends MixinControl
         /* Moving and choosing are one act, which is the radio group pattern and is
            what this controller exists to stop being written per component. */
         /* Registered rather than held. A controller adds itself to the host, so there
-           is no reference to keep: nothing here talks to it after construction, which
-           is why it is `protected` and not `private`. A private field nothing reads
-           is an unused one, and the honest reading is that the subclass tier is where
-           a consumer would reach for it. */
+           is no reference to keep, and nothing here talks to it after construction.
+           `protected` rather than `private` because a private field nothing reads is
+           an unused one, and 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. Hand calls from
+           each method that could disable an item reach different paths per
+           component; the controller is what stops that being written per group. */
         this.cascade = new DisabledCascadeController(this, {
             items: () => this.items,
         });
@@ -93,17 +92,14 @@ let HelixHeadlessRadioGroup = class HelixHeadlessRadioGroup extends MixinControl
             item.selected = item.value === this.value;
         }
         /* Nothing chosen yet, so the first item is the tab stop. A group where
-           every item is `tabindex="-1"` is a group the keyboard cannot enter.
-         *
-         * Taken back the moment there is an answer, which it was not: the attribute
-         * was written on the first item and never removed, so an answered group
-         * carried two tab stops, the entry one and the selected item's own. Tabbing
-         * through a form stopped twice on one question, and the first stop was on an
-         * item that is not the answer.
-         *
-         * `entered` rather than a bare toggle, because this also runs when the
-         * group is answered and the attribute has to go whether or not this call is
-         * the one that put it there. */
+           every item is `tabindex="-1"` is a group the keyboard cannot enter, and
+           an answered group that keeps the entry stop carries two, so tabbing
+           through a form stops twice on one question and the first stop is on an
+           item that is not the answer.
+    
+           `entered` rather than a bare toggle, because this also runs when the
+           group is answered and the attribute has to go whether or not this call is
+           the one that put it there. */
         const entered = this.value === '' && items.length > 0 ? items[0] : undefined;
         for (const item of items) {
             if (item === entered) {
@@ -135,13 +131,10 @@ let HelixHeadlessRadioGroup = class HelixHeadlessRadioGroup extends MixinControl
            element references on the client, and those win where a consumer slotted
            a label richer than a string. */
         hostAria(this.internals, { label: this.label, role: 'radiogroup' });
-        /* Announced as required, which it never was.
-         *
-         * `required` reflects, sets validity and paints the asterisk the field sheet
-         * draws, and told the accessibility tree nothing: a reader met a group with
-         * a mark beside its label they could not see and no announcement of why the
-         * form would refuse it. The stylesheet drawing that asterisk depends on the
-         * control saying so. */
+        /* `required` reflects, sets validity and paints the asterisk the field
+           sheet draws, and tells the accessibility tree nothing on its own. Without
+           this a reader meets a mark beside the label they cannot see, and no
+           announcement of why the form would refuse the group. */
         this.internals.ariaRequired = this.required ? 'true' : null;
     }
     updated(changed) {

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

@@ -53,11 +53,10 @@ export declare class HelixHeadlessRadio 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);
@@ -80,17 +79,17 @@ export declare class HelixHeadlessRadio 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-radio 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/radio/root/radio-root.js

@@ -75,11 +75,10 @@ let HelixHeadlessRadio = class HelixHeadlessRadio 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;
@@ -101,17 +100,17 @@ let HelixHeadlessRadio = class HelixHeadlessRadio 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-radio 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);

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

@@ -5,12 +5,10 @@ declare const HelixHeadlessRating_base: (new (...args: any[]) => import("@fusion
  * @summary A score out of a few marks, given or shown.
  *
  * @description
- * **Half marks decide the shape, so they are decided first.** Supporting them
- * means the value is not an integer and the targets are not the marks: five
- * stars at a half step is ten places to press, and a mark that is filled to the
- * middle. Everything else follows from that, which is why `step` is here rather
- * than added later, when the pointer handling would have to be rewritten around
- * it.
+ * **Half marks decide the shape.** Supporting them means the value is not an
+ * integer and the targets are not the marks: five stars at a half step is ten
+ * places to press, and a mark that is filled to the middle. The pointer handling
+ * and `step` are both built around that rather than added over it.
  *
  * **A partial mark is the whole mark, clipped.** Not a second glyph filled to
  * the middle: that needs a matching pair drawn for every mark anybody uses, and
@@ -18,7 +16,7 @@ declare const HelixHeadlessRating_base: (new (...args: any[]) => import("@fusion
  * fill is the same marks over the same marks, cut off partway, so any mark works
  * and any fraction does.
  *
- * **Read-only is not this control greyed out, it is a different thing.** The
+ * **Read-only is not this control grayed out, it is a different thing.** The
  * commoner use is showing a score nobody is being asked for, a product's
  * average, and that is not a control at all: it takes no focus, answers no keys,
  * has no options to choose between, and reads as one thing rather than as five.
@@ -83,13 +81,6 @@ export declare class HelixHeadlessRating extends HelixHeadlessRating_base {
      * `required`, not by making one unreachable.
      */
     min: number;
-    /**
-     * The smallest part of a mark that can be chosen.
-     *
-     * `0.5` is the half star, and it is the reason the value is a number rather
-     * than an index: with halves, five marks are ten answers.
-     */
-    step: number;
     /**
      * Whether this shows a score rather than asks for one.
      *
@@ -97,15 +88,6 @@ export declare class HelixHeadlessRating extends HelixHeadlessRating_base {
      * answers no keys, and reads as one thing: see the note on the class.
      */
     readOnly: boolean;
-    /**
-     * How the score is read out, where "3.5 out of 5" is not what it should say.
-     *
-     * A rating out of five is one of the few places a screen reader gets a worse
-     * answer from the value than from a sentence: "3.5" alone is a number without
-     * a subject. This names the readout, where a control is named by its `label`
-     * and each of its options by the score that option is.
-     */
-    valueText: string;
     /**
      * Whether the score is written out beside the marks.
      *
@@ -119,6 +101,22 @@ export declare class HelixHeadlessRating extends HelixHeadlessRating_base {
      * reader's own cursor would be worse than no label.
      */
     showValue: boolean;
+    /**
+     * The smallest part of a mark that can be chosen.
+     *
+     * `0.5` is the half star, and it is the reason the value is a number rather
+     * than an index: with halves, five marks are ten answers.
+     */
+    step: number;
+    /**
+     * How the score is read out, where "3.5 out of 5" is not what it should say.
+     *
+     * A rating out of five is one of the few places a screen reader gets a worse
+     * answer from the value than from a sentence: "3.5" alone is a number without
+     * a subject. This names the readout, where a control is named by its `label`
+     * and each of its options by the score that option is.
+     */
+    valueText: string;
     /**
      * The shape a consumer slotted, if they slotted one.
      *
@@ -198,13 +196,10 @@ export declare class HelixHeadlessRating extends HelixHeadlessRating_base {
     /**
      * Reports the value, and whether the form may go without one.
      *
-     * **`required` was on the API page and did nothing.** The mixin brings it,
-     * so it printed on the reference page and read as supported, and nothing here
-     * ever called `setValidity`: a form holding an unrated required rating
-     * submitted, measured, with `:valid` true and the entry present but empty.
-     * This is the case `min` argues for in its own note, that "no rating" and
-     * "the worst rating" are different answers and a survey that requires one
-     * says so with `required`.
+     * **`required` arrives from the mixin, so it prints on the reference page
+     * whether or not anything here enforces it.** Without a `setValidity` call a
+     * form holding an unrated required rating submits, `:valid` true and the
+     * entry present but empty. `reportRequired` is what makes the property real.
      *
      * **Empty is `value === ''` rather than a score of zero**, because zero is a
      * rating a reader can deliberately give when `min` allows it, and refusing to

package/dist/rating/root/rating-root.js

@@ -11,12 +11,10 @@ import { property, state } from 'lit/decorators.js';
  * @summary A score out of a few marks, given or shown.
  *
  * @description
- * **Half marks decide the shape, so they are decided first.** Supporting them
- * means the value is not an integer and the targets are not the marks: five
- * stars at a half step is ten places to press, and a mark that is filled to the
- * middle. Everything else follows from that, which is why `step` is here rather
- * than added later, when the pointer handling would have to be rewritten around
- * it.
+ * **Half marks decide the shape.** Supporting them means the value is not an
+ * integer and the targets are not the marks: five stars at a half step is ten
+ * places to press, and a mark that is filled to the middle. The pointer handling
+ * and `step` are both built around that rather than added over it.
  *
  * **A partial mark is the whole mark, clipped.** Not a second glyph filled to
  * the middle: that needs a matching pair drawn for every mark anybody uses, and
@@ -24,7 +22,7 @@ import { property, state } from 'lit/decorators.js';
  * fill is the same marks over the same marks, cut off partway, so any mark works
  * and any fraction does.
  *
- * **Read-only is not this control greyed out, it is a different thing.** The
+ * **Read-only is not this control grayed out, it is a different thing.** The
  * commoner use is showing a score nobody is being asked for, a product's
  * average, and that is not a control at all: it takes no focus, answers no keys,
  * has no options to choose between, and reads as one thing rather than as five.
@@ -78,15 +76,13 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
     constructor() {
         super(...arguments);
         /*
-         * Discrete, which is the default and is said here only because it was wrong.
-         *
-         * `Input`, `Slider`, `NumberInput`, `Textarea` and `PinInput` all announce
-         * input, and every one of them is edited continuously: a value passes through
-         * every keystroke or pixel on its way to the one meant. A rating does not. A
-         * press picks a score, an arrow picks the next one, and the drag deliberately
-         * asks for nothing until it is let go, so there is exactly one value and it
-         * is the chosen one. That is `helix-before-change`, the same as the radio group this
-         * announces itself as.
+         * Discrete. `Input`, `Slider`, `NumberInput`, `Textarea` and `PinInput` all
+         * announce input, and every one of them is edited continuously: a value passes
+         * through every keystroke or pixel on its way to the one meant. A rating does
+         * not. A press picks a score, an arrow picks the next one, and the drag
+         * deliberately asks for nothing until it is let go, so there is exactly one
+         * value and it is the chosen one. That is `helix-before-change`, the same as
+         * the radio group this announces itself as.
          */
         this.announcesInput = false;
         /**
@@ -102,13 +98,6 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
          * `required`, not by making one unreachable.
          */
         this.min = 0;
-        /**
-         * The smallest part of a mark that can be chosen.
-         *
-         * `0.5` is the half star, and it is the reason the value is a number rather
-         * than an index: with halves, five marks are ten answers.
-         */
-        this.step = 1;
         /**
          * Whether this shows a score rather than asks for one.
          *
@@ -116,15 +105,6 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
          * answers no keys, and reads as one thing: see the note on the class.
          */
         this.readOnly = false;
-        /**
-         * How the score is read out, where "3.5 out of 5" is not what it should say.
-         *
-         * A rating out of five is one of the few places a screen reader gets a worse
-         * answer from the value than from a sentence: "3.5" alone is a number without
-         * a subject. This names the readout, where a control is named by its `label`
-         * and each of its options by the score that option is.
-         */
-        this.valueText = '';
         /**
          * Whether the score is written out beside the marks.
          *
@@ -138,6 +118,22 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
          * reader's own cursor would be worse than no label.
          */
         this.showValue = false;
+        /**
+         * The smallest part of a mark that can be chosen.
+         *
+         * `0.5` is the half star, and it is the reason the value is a number rather
+         * than an index: with halves, five marks are ten answers.
+         */
+        this.step = 1;
+        /**
+         * How the score is read out, where "3.5 out of 5" is not what it should say.
+         *
+         * A rating out of five is one of the few places a screen reader gets a worse
+         * answer from the value than from a sentence: "3.5" alone is a number without
+         * a subject. This names the readout, where a control is named by its `label`
+         * and each of its options by the score that option is.
+         */
+        this.valueText = '';
         /**
          * The shape a consumer slotted, if they slotted one.
          *
@@ -206,7 +202,7 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
                 event.currentTarget.setPointerCapture(event.pointerId);
             }
             catch {
-                /* A synthesised pointer has no capture to take, and the drag works
+                /* A synthesized pointer has no capture to take, and the drag works
                    without it right up until the pointer leaves the row. Worth having the
                    gesture testable rather than making the specs drive a real device. */
             }
@@ -335,13 +331,10 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
     /**
      * Reports the value, and whether the form may go without one.
      *
-     * **`required` was on the API page and did nothing.** The mixin brings it,
-     * so it printed on the reference page and read as supported, and nothing here
-     * ever called `setValidity`: a form holding an unrated required rating
-     * submitted, measured, with `:valid` true and the entry present but empty.
-     * This is the case `min` argues for in its own note, that "no rating" and
-     * "the worst rating" are different answers and a survey that requires one
-     * says so with `required`.
+     * **`required` arrives from the mixin, so it prints on the reference page
+     * whether or not anything here enforces it.** Without a `setValidity` call a
+     * form holding an unrated required rating submits, `:valid` true and the
+     * entry present but empty. `reportRequired` is what makes the property real.
      *
      * **Empty is `value === ''` rather than a score of zero**, because zero is a
      * rating a reader can deliberately give when `min` allows it, and refusing to
@@ -367,7 +360,7 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
     updated(changed) {
         super.updated?.(changed);
         // Every update, not only the ones that name `value`: see the note on
-        // `ColorInput.updated`, and the fifteen controls that already did this.
+        // `ColorInput.updated`.
         this.sync();
     }
     firstUpdated(changed) {
@@ -384,9 +377,9 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
            rather than a count of the filled ones.
          
            Written out twice rather than through one helper taking the part name:
-           `check:selectors` reads the literals to know what this renders, and a
-           `part=${name}` binding is invisible to it. It called the stylesheet's
-           `[part="track"]` and `[part="fill"]` dead. */
+           a part is read from the source as a literal, and a `part=${name}`
+           binding is invisible. The stylesheet's `[part="track"]` and
+           `[part="fill"]` read as dead. */
         const marksIn = (layer) => Array.from({ length: count }, (_, index) => mark(layer, index));
         return html `<div
       part="marks"
@@ -460,18 +453,18 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], HelixHeadlessRating.prototype, "min", void 0);
-__decorate([
-    property({ type: Number })
-], HelixHeadlessRating.prototype, "step", void 0);
 __decorate([
     property({ attribute: 'readonly', reflect: true, type: Boolean })
 ], HelixHeadlessRating.prototype, "readOnly", void 0);
-__decorate([
-    property({ attribute: 'value-text' })
-], HelixHeadlessRating.prototype, "valueText", void 0);
 __decorate([
     property({ attribute: 'show-value', reflect: true, type: Boolean })
 ], HelixHeadlessRating.prototype, "showValue", void 0);
+__decorate([
+    property({ type: Number })
+], HelixHeadlessRating.prototype, "step", void 0);
+__decorate([
+    property({ attribute: 'value-text' })
+], HelixHeadlessRating.prototype, "valueText", void 0);
 __decorate([
     state()
 ], HelixHeadlessRating.prototype, "markSource", void 0);

package/dist/scroll-area/root/scroll-area-root.d.ts

@@ -9,12 +9,12 @@ declare const EDGES: readonly ['block-start', 'block-end', 'inline-start', 'inli
  * **The whole component is one fact a stylesheet cannot work out for itself:
  * which edges have content past them.** A fade at the bottom of a list is easy
  * to draw and impossible to decide, because CSS has no reading of scroll
- * position. So this measures and says, in `data-more`, and the styled tier
- * draws whatever it likes on the edges named.
+ * position. So this measures and says, in a custom state per edge, and the
+ * styled tier draws whatever it likes on the edges named.
  *
- * **Tokens rather than four attributes**, so a stylesheet asks
- * `[data-more~="block-end"]` the way it would ask about a class. Four booleans
- * say the same thing in four selectors and read worse at every use.
+ * **States rather than attributes**, so an element that upgrades after a
+ * framework rendered its markup does not hand that framework markup it did not
+ * write. A stylesheet asks `:host(:state(more-block-end))`.
  *
  * **A scrolling region takes the keyboard when it scrolls, and not before.**
  * A box a reader can only reach with a pointer is a box some readers cannot
@@ -56,17 +56,14 @@ export declare class HelixHeadlessScrollArea extends HelixElement {
     /**
      * The box that actually scrolls, for anything that needs to move it.
      *
-     * **Public because the alternative is silence.** Bringing a row into view
-     * means telling a scroll utility which box to scroll, and the scrolling box
-     * here is inside a shadow root: a consumer holding a reference to this
-     * element holds the host, which does not scroll, and `scrollBy` on it is a
-     * no-op that reports nothing. That is exactly how `scrollItemIntoView`'s
-     * `offsetParent` default fails, and the sandbox sidebar spent an afternoon
-     * scrolled to zero because of it.
+     * **Public because the alternative is silence.** The scrolling box is inside
+     * this shadow root: a consumer holding a reference to this element holds the
+     * host, which does not scroll, and `scrollBy` on it is a no-op that reports
+     * nothing. That is how `scrollItemIntoView`'s `offsetParent` default fails
+     * here.
      *
      * The element rather than a method of our own, because the utilities that
-     * want it already take one, and `Tree`, `Combobox` and anything windowing a
-     * long list all want the same thing from it.
+     * want it already take one.
      */
     get scroller(): HTMLElement | null;
     /**