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

package/dist/slider/root/slider-root.js

@@ -22,13 +22,12 @@ import { property } from 'lit/decorators.js';
  * value rather than the value itself. `valueAsNumber` is there for anything
  * doing arithmetic on it.
  *
- * **Marks are drawn rather than left to `<datalist>`**, which was the first
- * answer and is the wrong one. A datalist's ticks cannot be styled at all, and
- * Firefox does not render them for a range at all, so the platform's version is
- * a mark that looks like someone else's design where it appears and no mark
- * where it does not. Drawing them costs the semantics nothing, because a mark
- * is decoration: what a reader can actually land on is `step`, which the input
- * enforces whether or not anything is drawn.
+ * **Marks are drawn rather than left to `<datalist>`.** A datalist's ticks
+ * cannot be styled at all, and Firefox does not render them for a range at all,
+ * so the platform's version is a mark that looks like someone else's design
+ * where it appears and no mark where it does not. Drawing them costs the
+ * semantics nothing, because a mark is decoration: what a reader can actually
+ * land on is `step`, which the input enforces whether or not anything is drawn.
  *
  * `markers` is a count rather than a flag tied to `step`. A flag reads well
  * until a slider from zero to a hundred stepping by one asks for a hundred and
@@ -36,11 +35,10 @@ import { property } from 'lit/decorators.js';
  * is what the reader sees, so it cannot surprise anyone.
  *
  * **A range is two of them, not a hand-built one.** There is no native
- * two-thumb range, and the answer is not to stop using the platform's: it is to
- * stack two of them on one track, so each thumb keeps its own drag, its own
- * arrow keys, its own Home and End and its own finger-sized hit area. Rebuilding
- * would throw away every argument this component is made of, to gain a second
- * handle.
+ * two-thumb range, so two are stacked on one track and each thumb keeps its own
+ * drag, its own arrow keys, its own Home and End and its own finger-sized hit
+ * area. Rebuilding would throw away every argument this component is made of,
+ * to gain a second handle.
  *
  * Crossing is stopped in the handler rather than by the bounds, and that is not
  * the obvious way round. Giving the lower input `max` of the upper reads well
@@ -93,25 +91,9 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
         /** Typed or dragged, so every edit is announced. See `announcesInput`. */
         this.announcesInput = true;
         /**
-         * Whether there are two thumbs and the value is a pair.
-         *
-         * The pair is one string, `"10,50"`, which is what a form submits and what
-         * `MixinControllerValue` already holds. `valueAsNumber` reads the lower of
-         * the two, since a range has no single number.
-         */
-        this.range = false;
-        /**
-         * The largest value the reader can choose.
-         */
-        this.max = 100;
-        /**
-         * The smallest value the reader can choose.
-         */
-        this.min = 0;
-        /**
-         * Whether the chosen value is shown beside the track.
+         * Whether each mark says which value it stands at.
          */
-        this.showValue = false;
+        this.markerLabels = false;
         /**
          * How many marks to draw along the track, evenly spaced, ends included.
          *
@@ -129,11 +111,25 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
          */
         this.markers = 0;
         /**
-         * Whether each mark says which value it stands at.
+         * The largest value the reader can choose.
          */
-        this.markerLabels = false;
-        /** How far one press of an arrow key moves it. */
-        this.step = 1;
+        this.max = 100;
+        /**
+         * The smallest value the reader can choose.
+         */
+        this.min = 0;
+        /**
+         * Whether there are two thumbs and the value is a pair.
+         *
+         * The pair is one string, `"10,50"`, which is what a form submits and what
+         * `MixinControllerValue` already holds. `valueAsNumber` reads the lower of
+         * the two, since a range has no single number.
+         */
+        this.range = false;
+        /**
+         * Whether the chosen value is shown beside the track.
+         */
+        this.showValue = false;
         this.handleInput = (event) => {
             // Stopped for the reason `Input.handleInput` gives: the inner control's own
             // `input` is composed and would reach a consumer beside this element's.
@@ -165,6 +161,8 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
             event.stopPropagation();
             this.dispatchEvent(new Event('change', { bubbles: true, composed: false }));
         };
+        /** How far one press of an arrow key moves it. */
+        this.step = 1;
     }
     /**
      * How many characters the readout has to be able to hold, widest case.
@@ -201,7 +199,7 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
         return String(this.step).split('.')[1]?.length ?? 0;
     }
     /**
-     * How far one press of an arrow key moves it.
+     * The values the marks stand at, evenly spaced, each snapped to a step.
      */
     get markerValues() {
         const span = this.max - this.min;
@@ -275,18 +273,13 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
      * Arithmetic rather than a measurement, because the browser already knows
      * where it drew the handle and measuring it would be a guess at that.
      *
-     * **Sanitized here, not read back off the control.** This asked the input for
-     * its value, on the reasoning that a range clamps and snaps whatever it is
-     * given, so the control is the truth about where the thumb is. The reasoning
-     * is right and the timing is not: `fraction` is evaluated inside `render()`,
-     * and the `style` binding carrying it is committed *before* the `.value`
-     * binding below it, so it read the value this very render was about to
-     * replace. The fill was a render behind the thumb, and on the first pass it
-     * read the seeded midpoint and stayed there.
-     *
-     * Measured on a slider from 0 to 1: after dragging to either end, the host's
-     * `value` was `1`, the control's was `1`, and `--slider-fraction` was still
-     * `0.5`. Off by half a track, and stable, which is what made it look like a
+     * **Sanitized here, never read back off the control.** Asking the input for
+     * its value reads well, a range clamping and snapping whatever it is given,
+     * and the timing defeats it: `fraction` is evaluated inside `render()` and the
+     * `style` binding carrying it is committed *before* the `.value` binding below
+     * it, so it reads the value this very render is about to replace. The fill
+     * ends up a render behind the thumb, and on the first pass it reads the seeded
+     * midpoint and stays there: stable and off by half a track, which reads as a
      * drawing bug rather than a timing one.
      *
      * So the same two operations a range performs are done here: snap to the step
@@ -323,11 +316,11 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
            here so the value the form would submit matches the thumb from the first
            render rather than from the first drag. */
         if (!this.hasUpdated && this.value === '') {
-            /* Onto `defaultValue`, never onto `value`. Writing `value` is how a
-               consumer says they own it, so seeding through it would have made every
-               range with no value controlled on its first render and frozen the thumb
-               where it started. `defaultValue` is where the markup's intent lives,
-               and "no value given" is exactly a fact about the markup. */
+            /* Onto `defaultValue`, never onto `value`. `defaultValue` is where the
+               markup's intent lives and where a reset returns to, and "no value given"
+               is exactly a fact about the markup. Writing `value` would record the
+               midpoint as something the reader chose, so a form reset would return to
+               it rather than clearing it. */
             this.defaultValue = String(this.min + (this.max - this.min) / 2);
         }
     }
@@ -342,25 +335,23 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
            bounds it holds at that moment: with the value first, a slider from 0 to
            360 given 225 took the default max of 100, clamped to 100, and drew its
            handle at 100/360.
-       *
-       * Found on Color Input's hue channel, where the handle sat at 28 per cent of a
-       * track whose fill said 62.5. The two disagreed because they are computed from
-       * different things: the fill is arithmetic on this element's property, and the
-       * handle is the platform's reading of the input's own clamped value. Every
-       * slider with a max above 100 had it, and the fill being right is what made it
-       * read as a drawing bug rather than a value one. */
+    
+           The symptom is the fill and the handle disagreeing, because they are
+           computed from different things: the fill is arithmetic on this element's
+           property, and the handle is the platform's reading of the input's own
+           clamped value. It appears on any slider with a max above 100, and the
+           fill being right is what makes it read as a drawing bug rather than a
+           value one. */
         const [start, end] = this.bounds;
         /* One input per thumb, each spanning the whole range so both read against
            the same track. The lower one paints the fill and the upper one's track
            is transparent, because two stacked tracks would paint the ramp twice. */
         /* **The lower thumb answers to `control`, and it has to answer to
            something.** `MixinField.renderLabel` writes `<label for="control">` for
-           every field in the library, and only the single-thumb branch below ever
-           rendered that id: a range slider therefore shipped a label pointing at
-           nothing, so pressing the words focused no thumb and the `<output for>`
-           beside it named a missing element too. It was the only unresolved IDREF
-           in the whole corpus, which is the shape this class of fault takes, valid
-           markup that reaches nothing and says nothing.
+           every field in the library, so a range branch that does not render that id
+           ships a label pointing at nothing: pressing the words focuses no thumb and
+           the `<output for>` beside it names a missing element too. Valid markup
+           that reaches nothing and says nothing.
     
            The lower one, because a label forwards a press to the first control it
            names and the reader expects the start of the range. The upper takes
@@ -383,10 +374,10 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
       />`;
         /* `data-markers` mirrors "there are marks" for the stylesheet.
          *
-         * The whole marker layout hung off `:host([markers])` and `markers` does
-         * not reflect, so `slider.markers = 5` drew nothing at all: only the
-         * attribute written in the markup ever worked, and the property that is the
-         * documented API silently did not.
+         * `markers` does not reflect, so a marker layout hung off `:host([markers])`
+         * draws nothing for `slider.markers = 5`: only the attribute written in the
+         * markup works, and the property that is the documented API silently does
+         * not.
          *
          * Reflecting the count instead would put `markers="0"` on every slider, an
          * attribute the server's markup does not have and one that selector would
@@ -397,11 +388,9 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
          * already draws the line.
          *
          * A `/*` and written here, because it describes this binding and not a
-         * member. As a `/**` above `markerLabels` it never closed, so it swallowed
-         * that property's one-line description and the manifest shipped this whole
-         * argument as the text for "whether each mark says which value it stands
-         * at". `check:orphans` cannot see an unclosed block, only one sitting on
-         * another. */
+         * member. Nothing catches an unclosed block, only one sitting on another,
+         * so a `/**` that swallows the member below it ships as that member's
+         * description. */
         return html `${this.renderLabel()}
     <div
       part="field"
@@ -459,8 +448,11 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
     }
 };
 __decorate([
-    property({ reflect: true, type: Boolean })
-], HelixHeadlessSlider.prototype, "range", void 0);
+    property({ attribute: 'marker-labels', reflect: true, type: Boolean })
+], HelixHeadlessSlider.prototype, "markerLabels", void 0);
+__decorate([
+    property({ type: Number })
+], HelixHeadlessSlider.prototype, "markers", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessSlider.prototype, "max", void 0);
@@ -468,20 +460,17 @@ __decorate([
     property({ type: Number })
 ], HelixHeadlessSlider.prototype, "min", void 0);
 __decorate([
-    property({ attribute: 'show-value', reflect: true, type: Boolean })
-], HelixHeadlessSlider.prototype, "showValue", void 0);
+    property({ reflect: true })
+], HelixHeadlessSlider.prototype, "orientation", void 0);
 __decorate([
-    property({ type: Number })
-], HelixHeadlessSlider.prototype, "markers", void 0);
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessSlider.prototype, "range", void 0);
 __decorate([
-    property({ attribute: 'marker-labels', reflect: true, type: Boolean })
-], HelixHeadlessSlider.prototype, "markerLabels", void 0);
+    property({ attribute: 'show-value', reflect: true, type: Boolean })
+], HelixHeadlessSlider.prototype, "showValue", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessSlider.prototype, "step", void 0);
-__decorate([
-    property({ reflect: true })
-], HelixHeadlessSlider.prototype, "orientation", void 0);
 HelixHeadlessSlider = __decorate([
     customElement('helix-headless-slider')
 ], HelixHeadlessSlider);

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

@@ -19,13 +19,12 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * **No label means decorative, and that is a choice rather than an oversight.**
  * A sparkline beside a stat that already says "Sessions, 1,102" has nothing of
  * its own to announce, and an unnamed `role="img"` announces "graphic" and
- * stops. So an unlabelled sparkline is `aria-hidden`, and a labeled one is an
+ * stops. So an unlabeled sparkline is `aria-hidden`, and a labeled one is an
  * image named by its sentence.
  *
- * It goes *beside* a `Stat` rather than inside one. The plan this was built
- * from called for a `trend` slot on `Stat`; the spec already on `Stat` says the
- * opposite, that a change beside a figure is a second fact, and the spec is
- * right. `Trend` composes the same way.
+ * It goes *beside* a `Stat` rather than inside one: a change beside a figure is
+ * a second fact, which is what `Stat`'s own spec says. `Trend` composes the same
+ * way.
  *
  * 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
@@ -51,51 +50,18 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  */
 export declare class HelixHeadlessSparkline extends HelixElement {
     #private;
-    /**
-     * What the readings are drawn as.
-     *
-     * Absent is a line, `area` is a line with the region beneath it washed, and
-     * `bar` is a column per reading.
-     *
-     * **A bar plot measures from zero and the other two measure from the data's
-     * own range**, which is the one way the plots are not interchangeable. A line
-     * says where the readings sit relative to each other, so a scale over their
-     * extent uses the whole box and claims nothing about absolute size. A bar's
-     * length *is* the value, so any baseline but zero makes the lengths
-     * proportional to nothing.
-     *
-     * **Which is a reason to prefer a line for readings in a narrow band far from
-     * zero.** Seven values between 1,102 and 1,408 drawn as columns from zero are
-     * seven columns of nearly the same height, and that is the true picture: they
-     * *are* nearly the same. The same readings as a line fill the box and show
-     * the movement, because a line is only ever claiming a shape.
-     *
-     * **Absent is `area`**, which is the departure from the rule that a resting
-     * arrangement is the plainest thing. At the size a sparkline is actually
-     * drawn, a hairline in a wide box is mostly box: the wash under it is what
-     * gives the shape a body and lets a reader see it at a glance rather than
-     * hunting for it, which is the entire job. `line` is the bare stroke for
-     * anywhere the fill would be noise, several of them in one box for instance.
-     *
-     * This tier rather than the one above: a plot type is geometry and geometry
-     * is markup, the same reason `curve` lives here.
-     */
-    plot?: 'area' | 'bar' | 'line';
     /**
      * How the line gets from one reading to the next.
      *
-     * **`smooth` is the resting curve.** *Changed 21 Aug 2026, reversing the
-     * argument this comment used to make.* It read that joining the readings
-     * claims nothing in between and is the default for that reason, which is true
-     * and is why `straight` still exists: a straight segment asserts nothing about
-     * the values between two readings, and a curve invents them.
-     *
-     * What settles it the other way is that the invention is bounded. The
-     * interpolation is monotone cubic, so it never leaves the band the data sets
-     * and never introduces a peak or a trough the series does not have. Within
-     * that bound the smoothed line is the easier one to follow across a long
-     * series, which is what the drawing is for. `straight` becomes the claim a
-     * consumer makes deliberately rather than the one they get by saying nothing.
+     * **`smooth` is the resting curve.** A straight segment asserts nothing about
+     * the values between two readings and a curve invents them, which is why
+     * `straight` exists. What settles the default the other way is that the
+     * invention is bounded: the interpolation is monotone cubic, so it never
+     * leaves the band the data sets and never introduces a peak or a trough the
+     * series does not have. Within that bound the smoothed line is the easier one
+     * to follow across a long series, which is what the drawing is for. `straight`
+     * becomes the claim a consumer makes deliberately rather than the one they get
+     * by saying nothing.
      *
      * **The property stays optional and the default lives in the render.** A
      * reflecting property with a default writes its attribute onto every host
@@ -127,6 +93,36 @@ export declare class HelixHeadlessSparkline extends HelixElement {
      * than announced without a name.
      */
     label: string;
+    /**
+     * What the readings are drawn as.
+     *
+     * Absent is a line, `area` is a line with the region beneath it washed, and
+     * `bar` is a column per reading.
+     *
+     * **A bar plot measures from zero and the other two measure from the data's
+     * own range**, which is the one way the plots are not interchangeable. A line
+     * says where the readings sit relative to each other, so a scale over their
+     * extent uses the whole box and claims nothing about absolute size. A bar's
+     * length *is* the value, so any baseline but zero makes the lengths
+     * proportional to nothing.
+     *
+     * **Which is a reason to prefer a line for readings in a narrow band far from
+     * zero.** Seven values between 1,102 and 1,408 drawn as columns from zero are
+     * seven columns of nearly the same height, and that is the true picture: they
+     * *are* nearly the same. The same readings as a line fill the box and show
+     * the movement, because a line is only ever claiming a shape.
+     *
+     * **Absent is `area`**, which is the departure from the rule that a resting
+     * arrangement is the plainest thing. At the size a sparkline is actually
+     * drawn, a hairline in a wide box is mostly box: the wash under it is what
+     * gives the shape a body and lets a reader see it at a glance rather than
+     * hunting for it, which is the entire job. `line` is the bare stroke for
+     * anywhere the fill would be noise, several of them in one box for instance.
+     *
+     * This tier rather than the one above: a plot type is geometry and geometry
+     * is markup, the same reason `curve` lives here.
+     */
+    plot?: 'area' | 'bar' | 'line';
     /**
      * The numbers, separated by whitespace or by commas.
      *

package/dist/sparkline/root/sparkline-root.js

@@ -37,13 +37,12 @@ const readValues = (input) => input
  * **No label means decorative, and that is a choice rather than an oversight.**
  * A sparkline beside a stat that already says "Sessions, 1,102" has nothing of
  * its own to announce, and an unnamed `role="img"` announces "graphic" and
- * stops. So an unlabelled sparkline is `aria-hidden`, and a labeled one is an
+ * stops. So an unlabeled sparkline is `aria-hidden`, and a labeled one is an
  * image named by its sentence.
  *
- * It goes *beside* a `Stat` rather than inside one. The plan this was built
- * from called for a `trend` slot on `Stat`; the spec already on `Stat` says the
- * opposite, that a change beside a figure is a second fact, and the spec is
- * right. `Trend` composes the same way.
+ * It goes *beside* a `Stat` rather than inside one: a change beside a figure is
+ * a second fact, which is what `Stat`'s own spec says. `Trend` composes the same
+ * way.
  *
  * 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
@@ -100,8 +99,7 @@ let HelixHeadlessSparkline = class HelixHeadlessSparkline extends HelixElement {
          */
         this.values = '';
         /* One controller rather than the resolve-and-watch each chart had written
-           out for itself. Three copies had already drifted into two names for the
-           same lookup. */
+           out for itself. */
         this.source = new SourceController(this);
     }
     willUpdate(changed) {
@@ -123,22 +121,16 @@ let HelixHeadlessSparkline = class HelixHeadlessSparkline extends HelixElement {
            so the empty case is stated here rather than left to look like a bug. */
         const x = linear([0, Math.max(points.length - 1, 1)], [0, BOX.width]);
         /* **A bar measures from zero and a line measures from its own range**, and
-           that is a correctness difference rather than a preference.
-         *
-         * A line is a shape: what it says is where the readings sit relative to
-         * each other, so running the scale over the data's own extent uses the
-         * whole box and claims nothing about absolute size. A bar says something
-         * else. Its *length* is the value, so a baseline anywhere but zero makes
-         * the lengths proportional to nothing, which is the oldest misleading chart
-         * there is.
-         *
-         * Drawn over the data's extent, the smallest reading landed exactly on the
-         * floor and its column had no height at all: seven readings between 1,102
-         * and 1,408 came out as six columns and a gap, which looks like missing
-         * data and is really a scale saying the minimum is nothing.
-         *
-         * The zero is included at both ends, so a series that goes negative gets a
-         * baseline inside the box and its columns hang below it. */
+           that is a correctness difference rather than a preference. A bar's
+           *length* is the value, so a baseline anywhere but zero makes the lengths
+           proportional to nothing. Drawn over the data's extent, the smallest
+           reading lands exactly on the floor and its column has no height at all:
+           seven readings between 1,102 and 1,408 come out as six columns and a gap,
+           which looks like missing data and is really a scale saying the minimum is
+           nothing.
+    
+           The zero is included at both ends, so a series that goes negative gets a
+           baseline inside the box and its columns hang below it. */
         const [low, high] = extent(points.length > 0 ? points : [0]);
         const y = this.plot === 'bar'
             ? linear([Math.min(0, low), Math.max(0, high)], [BOX.height, 0])
@@ -149,10 +141,9 @@ let HelixHeadlessSparkline = class HelixHeadlessSparkline extends HelixElement {
            the wash goes. Its own path rather than a fill on the line, because a
            closed path strokes its closing edges too: filling the line itself would
            draw a rule along the bottom of the box and up both sides.
-         *
-         * The floor is the smallest reading and not a true zero, because the scale
-         * runs over the data's own extent. That is the part a consumer would get
-         * wrong writing this themselves, and it is why the shape is built here. */
+    
+           The floor is the smallest reading and not a true zero, because the scale
+           runs over the data's own extent. */
         /* Asked negatively, because absent *is* an area here and the class doc
            above says why. This is the one property in the family where the resting
            arrangement is not the plainest thing, so the test has to answer true for
@@ -160,7 +151,7 @@ let HelixHeadlessSparkline = class HelixHeadlessSparkline extends HelixElement {
         const area = this.plot !== 'bar' && this.plot !== 'line' && path !== ''
             ? `${path}L${BOX.width},${BOX.height}L0,${BOX.height}Z`
             : '';
-        /* One column per reading, inset so neighbours do not touch.
+        /* One column per reading, inset so neighbors do not touch.
          *
          * A rect rather than a thick stroked line, because a bar has two ends and a
          * stroke has a cap: `stroke-linecap` would round or square both ends of
@@ -208,7 +199,7 @@ let HelixHeadlessSparkline = class HelixHeadlessSparkline extends HelixElement {
       >
         ${
         /* The ramp the area is poured with, drawn here because a gradient is
-           an element and elements are this tier's business, and coloured
+           an element and elements are this tier's business, and colored
            above because a color is not. Measured rather than assumed: a
            fragment id inside a shadow root resolves within that root, so two
            sparklines on a page carrying the same id stay independent, and CSS
@@ -257,9 +248,6 @@ let HelixHeadlessSparkline = class HelixHeadlessSparkline extends HelixElement {
             : html `<span aria-hidden="true" part="terminus" style=${end ?? nothing}></span>`}`;
     }
 };
-__decorate([
-    property({ reflect: true })
-], HelixHeadlessSparkline.prototype, "plot", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessSparkline.prototype, "curve", void 0);
@@ -269,6 +257,9 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessSparkline.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixHeadlessSparkline.prototype, "plot", void 0);
 __decorate([
     property()
 ], HelixHeadlessSparkline.prototype, "values", void 0);

package/dist/speed-dial/item/speed-dial-item.d.ts

@@ -31,14 +31,14 @@ import { type TemplateResult } from 'lit';
  * @csspart label - The name beside it.
  */
 export declare class HelixHeadlessSpeedDialItem extends HelixElement {
-    /**
-     * What this action stands for, carried in the event when it is chosen.
-     */
-    value: string;
     /**
      * Whether the action can be chosen.
      */
     disabled: boolean;
+    /**
+     * What this action stands for, carried in the event when it is chosen.
+     */
+    value: string;
     /**
      * @internal Read by a parent to identify its children across the light DOM,
      * which is cheaper than `instanceof` and is why this is public rather than
@@ -56,8 +56,8 @@ export declare class HelixHeadlessSpeedDialItem extends HelixElement {
      *
      * Asked of the document rather than of the shadow root: focus lands on the
      * control inside this element and the platform retargets it, so from outside
-     * `activeElement` already is this element. `Menu.Item` records the same, and
-     * the reading it replaced is one that does not survive happy-dom.
+     * `activeElement` already is this element. `Menu.Item` records the same;
+     * reading it off the shadow root does not survive happy-dom.
      */
     get selected(): boolean;
     private choose;

package/dist/speed-dial/item/speed-dial-item.js

@@ -40,14 +40,14 @@ import { property } from 'lit/decorators.js';
 let HelixHeadlessSpeedDialItem = class HelixHeadlessSpeedDialItem extends HelixElement {
     constructor() {
         super(...arguments);
-        /**
-         * What this action stands for, carried in the event when it is chosen.
-         */
-        this.value = '';
         /**
          * Whether the action can be chosen.
          */
         this.disabled = false;
+        /**
+         * What this action stands for, carried in the event when it is chosen.
+         */
+        this.value = '';
         /**
          * @internal Read by a parent to identify its children across the light DOM,
          * which is cheaper than `instanceof` and is why this is public rather than
@@ -75,8 +75,8 @@ let HelixHeadlessSpeedDialItem = class HelixHeadlessSpeedDialItem extends HelixE
      *
      * Asked of the document rather than of the shadow root: focus lands on the
      * control inside this element and the platform retargets it, so from outside
-     * `activeElement` already is this element. `Menu.Item` records the same, and
-     * the reading it replaced is one that does not survive happy-dom.
+     * `activeElement` already is this element. `Menu.Item` records the same;
+     * reading it off the shadow root does not survive happy-dom.
      */
     get selected() {
         return this.ownerDocument.activeElement === this;
@@ -101,12 +101,12 @@ let HelixHeadlessSpeedDialItem = class HelixHeadlessSpeedDialItem extends HelixE
     </button>`;
     }
 };
-__decorate([
-    property()
-], HelixHeadlessSpeedDialItem.prototype, "value", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessSpeedDialItem.prototype, "disabled", void 0);
+__decorate([
+    property()
+], HelixHeadlessSpeedDialItem.prototype, "value", void 0);
 HelixHeadlessSpeedDialItem = __decorate([
     customElement('helix-headless-speed-dial-item')
 ], HelixHeadlessSpeedDialItem);