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

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

@@ -11,11 +11,10 @@ import { property } from 'lit/decorators.js';
  * @summary A short code, one character to a box.
  *
  * @description
- * **One `<input>` per cell, rather than one input drawn as cells.** Both are
- * built in the wild and the trade is real: a single field autofills perfectly
- * and needs a drawn caret nobody can style well, and separate fields give every
- * box a real focus ring, a real caret and a real tab stop for free. This takes
- * the second, and then closes autofill's gap rather than living with it, below.
+ * **One `<input>` per cell, rather than one input drawn as cells.** A single
+ * field autofills perfectly and needs a drawn caret nobody can style well;
+ * separate fields give every box a real focus ring, a real caret and a real tab
+ * stop for free. Autofill's gap is closed below rather than lived with.
  *
  * **Anything longer than one character is treated as a paste, wherever it
  * lands.** That covers the obvious case and two that are not: a browser
@@ -72,33 +71,13 @@ let HelixHeadlessPinInput = class HelixHeadlessPinInput extends MixinControllerV
          */
         this.autocomplete = 'one-time-code';
         /**
-         * How many characters the code has.
+         * Accessible name for one box, with `{index}` and `{length}` filled in.
          */
-        this.length = 6;
+        this.cellLabel = 'Character {index} of {length}';
         /**
-         * What a box accepts, which decides the keyboard a phone offers.
-         *
-         * `numeric` and `alphanumeric` also refuse anything else on the way in,
-         * because a code that is digits is digits: letting a letter into a box a
-         * reader cannot submit is a mistake they have to find and undo themselves.
-         * `text` refuses nothing and only trims, so it is the mode for a code with a
-         * hyphen in it.
-         *
-         * **`alphanumeric` is ASCII letters and digits**, which is narrower than the
-         * word is in general and is the right narrowness here. A code of this kind
-         * comes off a keypad, an SMS or an authenticator, and none of them emit `é`;
-         * a filter that accepted it would let through a character the service on the
-         * other end is going to reject. A consumer whose codes really do carry
-         * marked letters wants `text`, which judges nothing.
-         *
-         * **Not reflected**, and it was until this component's own server spec caught
-         * it: nothing selects on it, so all reflection did was write `type="numeric"`
-         * onto every `<helix-pin-input>` ever rendered, an attribute no consumer's
-         * markup had. That is the fault `Input`'s own `type` had and the reason the
-         * area rules carry the sentence "reflect only what CSS selects on". The real
-         * inputs take it as a binding, which is what makes the keyboard follow.
+         * How many characters the code has.
          */
-        this.type = 'numeric';
+        this.length = 6;
         /**
          * Whether the characters are hidden, the way a password is.
          */
@@ -112,9 +91,7 @@ let HelixHeadlessPinInput = class HelixHeadlessPinInput extends MixinControllerV
          * `mask`, where the cell is a password input and a hand-drawn glyph would
          * have to know that.
          *
-         * Empty by default, because a row of boxes already reads as a row of boxes
-         * and a dot in each is a choice about how much the field should announce
-         * itself before anybody has touched it.
+         * Empty by default, because a row of boxes already reads as a row of boxes.
          */
         this.placeholder = '';
         /**
@@ -122,9 +99,28 @@ let HelixHeadlessPinInput = class HelixHeadlessPinInput extends MixinControllerV
          */
         this.readOnly = false;
         /**
-         * Accessible name for one box, with `{index}` and `{length}` filled in.
+         * What a box accepts, which decides the keyboard a phone offers.
+         *
+         * `numeric` and `alphanumeric` also refuse anything else on the way in,
+         * because a code that is digits is digits: letting a letter into a box a
+         * reader cannot submit is a mistake they have to find and undo themselves.
+         * `text` refuses nothing and only trims, so it is the mode for a code with a
+         * hyphen in it.
+         *
+         * **`alphanumeric` is ASCII letters and digits**, which is narrower than the
+         * word is in general and is the right narrowness here. A code of this kind
+         * comes off a keypad, an SMS or an authenticator, and none of them emit `é`;
+         * a filter that accepted it would let through a character the service on the
+         * other end is going to reject. A consumer whose codes really do carry
+         * marked letters wants `text`, which judges nothing.
+         *
+         * **Not reflected**: nothing selects on it, so reflecting only writes
+         * `type="numeric"` onto every `<helix-pin-input>` ever rendered, an attribute
+         * no consumer's markup had. The area rules carry the sentence "reflect only
+         * what CSS selects on". The real inputs take it as a binding, which is what
+         * makes the keyboard follow.
          */
-        this.cellLabel = 'Character {index} of {length}';
+        this.type = 'numeric';
         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.
@@ -134,15 +130,14 @@ let HelixHeadlessPinInput = class HelixHeadlessPinInput extends MixinControllerV
             if (at === -1) {
                 return;
             }
-            /* **An emptied box is a deletion, and this used to be unreachable.** A
-               Backspace in a *filled* box is the browser's own: the keydown handler
-               leaves it alone, the character goes, and `input` arrives carrying "". That
-               fell through to `write`, which returns early on empty, and then `paint`
-               put the character straight back. Pressing Backspace on a full code changed
-               nothing at all, twice in a row, measured with real keystrokes rather than
-               dispatched events, which is why every spec and the whole state audit
-               passed over it.
-            
+            /* **An emptied box is a deletion, and without this branch it is
+               unreachable.** A Backspace in a *filled* box is the browser's own: the
+               keydown handler leaves it alone, the character goes, and `input` arrives
+               carrying "". That falls through to `write`, which returns early on empty,
+               and then `paint` puts the character straight back. Only real keystrokes
+               reproduce it: dispatched events do not, which is why the specs pass over
+               it.
+        
                The rest collapse left, which is what the model already requires and what
                a single text field does: "123456" with the 2 deleted is "13456", not a
                hole. Focus stays where the reader was, so the box under the caret now
@@ -214,17 +209,9 @@ let HelixHeadlessPinInput = class HelixHeadlessPinInput extends MixinControllerV
          * The code as it stood when focus arrived, so a visit that changed nothing
          * says nothing.
          *
-         * **This is the platform's reading, and it was the other one until it was
-         * measured.** It held the value at the last *commit*, on the argument that
-         * recognizing an arrival is hard here: this component moves focus itself on
-         * every character, so most `focus` events are ones it caused, and telling
-         * those apart rests entirely on `relatedTarget`. That is true and it is not
-         * an obstacle, because `handleFocusOut` was already doing exactly that guard
-         * one method away. The reasoning had talked itself out of a check it had
-         * already written.
-         *
-         * **What the two readings do to a real browser**, measured in Chromium
-         * against a native `<input>` with real keystrokes:
+         * **Baselined on arrival, not at the last commit**, which is the platform's
+         * reading. What the two do to a real browser, measured in Chromium against a
+         * native `<input>` with real keystrokes:
          *
          * | | native | last commit | on arrival |
          * |---|---|---|---|
@@ -259,13 +246,12 @@ let HelixHeadlessPinInput = class HelixHeadlessPinInput extends MixinControllerV
          * Whether focus is currently somewhere inside the row.
          *
          * **The arrival is a transition, not a `relatedTarget` reading**, which is
-         * what the first version of this did and is what the exit still does. It does
-         * not work on the way in for two separate reasons and the second is the one
-         * that decides it. Every character moves focus to the next box, so an
-         * unguarded `focusin` re-baselines on each keystroke and the row can never
-         * report anything: measured, the three commit specs went silent at once. And
-         * `focusin` carries `relatedTarget` in a browser and not in happy-dom, so a
-         * guard written on it is a guard that holds in production and not in the
+         * what the exit still does. `relatedTarget` does not work on the way in for
+         * two reasons and the second decides it. Every character moves focus to the
+         * next box, so an unguarded `focusin` re-baselines on each keystroke and the
+         * row can never report anything: measured, the three commit specs went silent
+         * at once. And `focusin` carries `relatedTarget` in a browser and not in
+         * happy-dom, so a guard written on it holds in production and not in the
          * specs, which is the worse half. This flag needs neither: entering is
          * `focusin` while it is `false`, and nothing else is.
          */
@@ -284,16 +270,15 @@ let HelixHeadlessPinInput = class HelixHeadlessPinInput extends MixinControllerV
             this.committed = this.value;
         };
         /**
-         * Commits when focus leaves the row, which is the moment every other field in
-         * the library has and this one did not.
+         * Commits when focus leaves the row.
          *
          * `change` is one of the two events `MixinField` reads as "the reader has had
-         * a go at this", so a code that was never completed was never `touched` and
-         * its own `tooShort` message could not show: two boxes of four filled and
-         * tabbed away from was answered with nothing at all. `Input` gets this for
-         * free by relaying its control's own `change`; here the cells each fire one,
-         * none of them means the code is entered, and neither does any single one of
-         * them mean the reader has left.
+         * a go at this", so without this a code that was never completed is never
+         * `touched` and its own `tooShort` message cannot show: two boxes of four
+         * filled and tabbed away from is answered with nothing at all. `Input` gets
+         * this for free by relaying its control's own `change`; here the cells each
+         * fire one, none of them means the code is entered, and neither does any
+         * single one of them mean the reader has left.
          *
          * **Focus leaving the row, and not a cell.** Every character moves focus to
          * the next box, so a per-cell blur would commit on every keystroke, which is
@@ -349,16 +334,14 @@ let HelixHeadlessPinInput = class HelixHeadlessPinInput extends MixinControllerV
         }
         /* **A code has no holes in it**, so a character cannot land past the end of
            what is already there. Clamped rather than allowed, because the value is
-           one compact string and a gap in the middle of it does not exist: writing
-           four characters into box three of an empty field produced "4321" and
-           showed it in boxes one to four, so the boxes and the value disagreed about
-           where the reader had typed.
-        
-           Clamping is what makes them agree, and it reads correctly in both
-           directions. Pasting a whole code while the caret happens to sit in box
-           three fills from the start, which is what a reader pasting a code means.
-           Pasting two characters into box three of a field with two already in it
-           fills from box three, because that is where the end was. */
+           one compact string and a gap in the middle of it does not exist: unclamped,
+           the boxes and the value disagree about where the reader typed.
+    
+           It reads correctly in both directions. Pasting a whole code while the
+           caret happens to sit in box three fills from the start, which is what a
+           reader pasting a code means. Pasting two characters into box three of a
+           field with two already in it fills from box three, because that is where
+           the end was. */
         const start = Math.min(from, this.value.length);
         const characters = this.characters;
         for (let at = 0; at < cleaned.length && start + at < this.count; at += 1) {
@@ -401,11 +384,9 @@ let HelixHeadlessPinInput = class HelixHeadlessPinInput extends MixinControllerV
      * Announces the code as entered, from whichever moment reached it first.
      *
      * **One writer, because the fact has two moments and only one meaning.** A
-     * filled code and a row being left are both "the reader is done with this",
-     * and they were two dispatch sites kept from disagreeing by both remembering
-     * to update `committed`. They are one call now, so a third moment cannot be
-     * added that fires without baselining, which is the way the pair would have
-     * drifted.
+     * filled code and a row being left are both "the reader is done with this".
+     * Dispatching from either site directly is how a moment gets added that fires
+     * without baselining.
      *
      * Silent when nothing moved since the baseline, which is what makes it safe
      * to call from both: completing a code that is already the committed one, or
@@ -425,11 +406,10 @@ let HelixHeadlessPinInput = class HelixHeadlessPinInput extends MixinControllerV
      * Reports the code and a verdict on it.
      *
      * **A half-entered code is invalid whether or not it is required, and that is
-     * the platform's answer rather than ours.** It looked like an oversight worth
-     * a question: `required` guards `valueMissing` and nothing guards `tooShort`,
-     * so an optional code is refused for being half filled. Measured in Chromium
-     * against a native `<input minlength="4">` with real keystrokes, which is the
-     * feature this is the same shape as:
+     * the platform's answer rather than ours.** `required` guards `valueMissing`
+     * and nothing guards `tooShort`, so an optional code is refused for being half
+     * filled. Measured in Chromium against a native `<input minlength="4">` with
+     * real keystrokes, which is the feature this is the same shape as:
      *
      * | | optional | required |
      * |---|---|---|
@@ -529,12 +509,12 @@ let HelixHeadlessPinInput = class HelixHeadlessPinInput extends MixinControllerV
 __decorate([
     property()
 ], HelixHeadlessPinInput.prototype, "autocomplete", void 0);
+__decorate([
+    property({ attribute: 'cell-label' })
+], HelixHeadlessPinInput.prototype, "cellLabel", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessPinInput.prototype, "length", void 0);
-__decorate([
-    property()
-], HelixHeadlessPinInput.prototype, "type", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessPinInput.prototype, "mask", void 0);
@@ -545,8 +525,8 @@ __decorate([
     property({ attribute: 'readonly', reflect: true, type: Boolean })
 ], HelixHeadlessPinInput.prototype, "readOnly", void 0);
 __decorate([
-    property({ attribute: 'cell-label' })
-], HelixHeadlessPinInput.prototype, "cellLabel", void 0);
+    property()
+], HelixHeadlessPinInput.prototype, "type", void 0);
 HelixHeadlessPinInput = __decorate([
     customElement('helix-headless-pin-input')
 ], HelixHeadlessPinInput);

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

@@ -61,14 +61,13 @@ export declare class HelixHeadlessPopover extends HelixHeadlessPopover_base {
     /**
      * The invoker that last opened the panel, when a command did.
      *
-     * The handlers discarded the `source` the controller hands them, which cost
-     * two things at once. The panel was positioned against the host, and the
-     * styled tier makes the host a boxless `display: contents` element, so a
-     * popover opened by a command outside it opened against the window origin.
-     * And the outside-press dismissal had no way to know the invoker was part of
-     * the control: the press fires on `pointerdown`, the command arrives on the
-     * `click` after it, so a `--toggle` button outside the host closed the panel
-     * and immediately reopened it, for ever.
+     * Kept because the `source` a command hands the handlers is needed twice
+     * over. It is the anchor: the styled host is a boxless `display: contents`
+     * element, so a popover opened by a command outside it would otherwise open
+     * against the window origin. And the outside-press dismissal has to know the
+     * invoker is part of the control, the press firing on `pointerdown` and the
+     * command arriving on the `click` after it, or a `--toggle` button outside
+     * the host closes the panel and immediately reopens it, for ever.
      */
     private invoker;
     protected readonly commands: CommandController;
@@ -84,20 +83,16 @@ export declare class HelixHeadlessPopover extends HelixHeadlessPopover_base {
     /**
      * Puts the panel where `open` says it should be, however it got there.
      *
-     * `show()` and `hide()` raised and lowered it, and nothing else did, so a
-     * panel opened by *declaring* `open` (or `default-open`, or a consumer
-     * assigning the property) rendered visible and was never in the top layer and
-     * never anchored. Every imperative path worked and every declarative one was
-     * quietly half-open: clipped by the first ancestor with `overflow`, and
-     * positioned wherever normal flow left it.
-     *
-     * Driving the controller from the resolved state rather than from the two
-     * methods is what makes the two paths the same path. The controller ignores a
-     * `show()` on something already raised, so this costs nothing when the
-     * methods did the work.
+     * Driven from the resolved state rather than from `show()` and `hide()`,
+     * which is what makes the imperative and the declarative paths one path. Left
+     * to the two methods, a panel opened by *declaring* `open` (or `default-open`,
+     * or a consumer assigning the property) renders visible while never reaching
+     * the top layer and never being anchored: clipped by the first ancestor with
+     * `overflow`, and positioned wherever normal flow left it. The controller
+     * ignores a `show()` on something already raised, so this costs nothing when
+     * the methods did the work.
      */
     protected updated(changed: PropertyValues): void;
-    protected willUpdate(changed: PropertyValues): void;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/popover/root/popover-root.js

@@ -65,9 +65,7 @@ let HelixHeadlessPopover = class HelixHeadlessPopover extends MixinControllerOpe
          * It moves if that side does not fit.
          */
         this.placement = 'bottom-start';
-        /* The panel, plus everything that has to happen around it: one controller
-           rather than the three this took at every call site, which is what let
-           `Select` quietly never reach the top layer at all.
+        /* The panel, plus everything that has to happen around it.
          *
          * Called `panel` rather than `popover`, because `HTMLElement.popover` is the
          * popover API's own IDL attribute and a field of that name shadows it with
@@ -75,15 +73,13 @@ let HelixHeadlessPopover = class HelixHeadlessPopover extends MixinControllerOpe
          * at runtime is break the API this is built on. */
         this.panel = new PopoverController(this, {
             anchor: () => this.trigger,
-            /* The host, not the panel. `display: contents` leaves it without a box, so
-               a press on the trigger is inside the host and outside the panel, and a
-               boundary of the panel alone would close on the very press that opened
-               it. */
-            /* The host *and* whatever invoked it. An outside press is measured against
-               this, and a `--toggle` button outside the host is part of the control by
-               any reading a reader would give it: pressing it while the panel is open
-               should close it once, not close it on `pointerdown` and reopen it on the
-               `click` that follows. */
+            /* The host *and* whatever invoked it, never the panel alone. An outside
+               press is measured against this, and the styled host is
+               `display: contents` with no box of its own, so a boundary of the panel
+               alone would close on the very press that opened it. A `--toggle` button
+               outside the host is part of the control by any reading a reader would
+               give it: pressing it while the panel is open should close it once, not
+               close it on `pointerdown` and reopen it on the `click` that follows. */
             boundary: () => [this, this.invoker],
             offset: () => this.offset,
             onDismiss: () => this.hide(),
@@ -159,17 +155,14 @@ let HelixHeadlessPopover = class HelixHeadlessPopover extends MixinControllerOpe
     /**
      * Puts the panel where `open` says it should be, however it got there.
      *
-     * `show()` and `hide()` raised and lowered it, and nothing else did, so a
-     * panel opened by *declaring* `open` (or `default-open`, or a consumer
-     * assigning the property) rendered visible and was never in the top layer and
-     * never anchored. Every imperative path worked and every declarative one was
-     * quietly half-open: clipped by the first ancestor with `overflow`, and
-     * positioned wherever normal flow left it.
-     *
-     * Driving the controller from the resolved state rather than from the two
-     * methods is what makes the two paths the same path. The controller ignores a
-     * `show()` on something already raised, so this costs nothing when the
-     * methods did the work.
+     * Driven from the resolved state rather than from `show()` and `hide()`,
+     * which is what makes the imperative and the declarative paths one path. Left
+     * to the two methods, a panel opened by *declaring* `open` (or `default-open`,
+     * or a consumer assigning the property) renders visible while never reaching
+     * the top layer and never being anchored: clipped by the first ancestor with
+     * `overflow`, and positioned wherever normal flow left it. The controller
+     * ignores a `show()` on something already raised, so this costs nothing when
+     * the methods did the work.
      */
     updated(changed) {
         super.updated(changed);
@@ -183,9 +176,9 @@ let HelixHeadlessPopover = class HelixHeadlessPopover extends MixinControllerOpe
         }
         /* Raised here rather than a microtask later, and `updated()` is what makes
            that safe: the render has already been written, so the panel is no longer
-           `display: none` and `showPopover` will not throw on it. The old
-           `show()` deferred to `updateComplete` precisely because it ran *before*
-           the render; from here there is nothing left to wait for. */
+           `display: none` and `showPopover` will not throw on it. Anything raising
+           it before the render has to wait for `updateComplete`; from here there is
+           nothing left to wait for. */
         if (this.open) {
             this.panel.show();
         }
@@ -193,16 +186,6 @@ let HelixHeadlessPopover = class HelixHeadlessPopover extends MixinControllerOpe
             this.panel.hide();
         }
     }
-    willUpdate(changed) {
-        super.willUpdate(changed);
-        /* The name is the panel's, not the host's.
-         *
-         * `label` is documented as the panel's accessible name and was written to
-         * the host's internals, and the host carries no role at all: the name
-         * landed on a generic element while the panel it names rendered with none.
-         * A `dialog` role goes with it, because a name needs something to be the
-         * name of, and that is what a popover is. */
-    }
     render() {
         return html `<slot name="trigger" @click=${this.handleTriggerClick}></slot>
       <div

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

@@ -14,10 +14,13 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * says work is happening and claims no proportion at all. `aria-valuenow` is
  * omitted with it, which is the platform's own signal for the same thing.
  *
- * **The fill is a percentage of the track, written as a custom property.** It
- * is derived from `value` and `max` rather than measured, so it renders on a
- * server with no layout and needs nothing after upgrade. That is what keeps it
- * out of the class of geometry this library writes only on the client.
+ * **The fill is a fraction of the track, written as a custom property.**
+ * `--progress-fraction` is derived from `value` and `max` rather than measured,
+ * so it renders on a server with no layout and needs nothing after upgrade. That
+ * is what keeps it out of the class of geometry this library writes only on the
+ * client. A consumer never sets it: it carries a number this element computed
+ * and CSS cannot, which is what lets a stylesheet draw the thing without
+ * measuring anything itself.
  *
  * **`value` is clamped, and out-of-range input is not an error.** A count that
  * runs past its own total is ordinary in real applications, and a bar that
@@ -29,11 +32,6 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * anonymous to anything walking the light DOM, and a `role` written onto the
  * host as an attribute is one a server's markup never had.
  *
- * 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 stable
  * @category feedback
@@ -45,13 +43,9 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @csspart track - The full length the work is measured against.
  * @csspart value - The reading beside the bar, under `show-value`.
  *
- * @cssproperty --progress-fraction - The value as a fraction of the range, 0 to 1. Absent while indeterminate.
+ * @cssproperty --progress-fraction - The value as a fraction of the range, 0 to 1. Pinned to 1 while indeterminate.
  */
 export declare class HelixHeadlessProgress extends HelixElement {
-    /**
-     * Accessible name for what is in progress.
-     */
-    label: string;
     /**
      * Whether the work has a knowable end.
      *
@@ -66,6 +60,10 @@ export declare class HelixHeadlessProgress extends HelixElement {
      * place in the layout when the answer arrives and it becomes determinate.
      */
     indeterminate: boolean;
+    /**
+     * Accessible name for what is in progress.
+     */
+    label: string;
     /**
      * The total the work is measured against.
      */

package/dist/progress/root/progress-root.js

@@ -21,10 +21,13 @@ import { property } from 'lit/decorators.js';
  * says work is happening and claims no proportion at all. `aria-valuenow` is
  * omitted with it, which is the platform's own signal for the same thing.
  *
- * **The fill is a percentage of the track, written as a custom property.** It
- * is derived from `value` and `max` rather than measured, so it renders on a
- * server with no layout and needs nothing after upgrade. That is what keeps it
- * out of the class of geometry this library writes only on the client.
+ * **The fill is a fraction of the track, written as a custom property.**
+ * `--progress-fraction` is derived from `value` and `max` rather than measured,
+ * so it renders on a server with no layout and needs nothing after upgrade. That
+ * is what keeps it out of the class of geometry this library writes only on the
+ * client. A consumer never sets it: it carries a number this element computed
+ * and CSS cannot, which is what lets a stylesheet draw the thing without
+ * measuring anything itself.
  *
  * **`value` is clamped, and out-of-range input is not an error.** A count that
  * runs past its own total is ordinary in real applications, and a bar that
@@ -36,11 +39,6 @@ import { property } from 'lit/decorators.js';
  * anonymous to anything walking the light DOM, and a `role` written onto the
  * host as an attribute is one a server's markup never had.
  *
- * 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 stable
  * @category feedback
@@ -52,15 +50,11 @@ import { property } from 'lit/decorators.js';
  * @csspart track - The full length the work is measured against.
  * @csspart value - The reading beside the bar, under `show-value`.
  *
- * @cssproperty --progress-fraction - The value as a fraction of the range, 0 to 1. Absent while indeterminate.
+ * @cssproperty --progress-fraction - The value as a fraction of the range, 0 to 1. Pinned to 1 while indeterminate.
  */
 let HelixHeadlessProgress = class HelixHeadlessProgress extends HelixElement {
     constructor() {
         super(...arguments);
-        /**
-         * Accessible name for what is in progress.
-         */
-        this.label = 'Progress';
         /**
          * Whether the work has a knowable end.
          *
@@ -75,6 +69,10 @@ let HelixHeadlessProgress = class HelixHeadlessProgress extends HelixElement {
          * place in the layout when the answer arrives and it becomes determinate.
          */
         this.indeterminate = false;
+        /**
+         * Accessible name for what is in progress.
+         */
+        this.label = 'Progress';
         /**
          * The total the work is measured against.
          */
@@ -131,18 +129,17 @@ let HelixHeadlessProgress = class HelixHeadlessProgress extends HelixElement {
            type were checked. */
         this.internals.ariaValueMin = '0';
         this.internals.ariaValueMax = String(this.max > 0 ? this.max : 100);
-        /* Absent, not zero. An omitted `aria-valuenow` is the platform's own signal
-           for indeterminate, and it is the only one: `aria-busy` says the element
-           is being updated, which is a different claim. Reporting 0 would announce
-           "0 percent" for work that is running, which is worse than saying nothing
-           because it is wrong rather than unknown. */
-        /* The clamped value itself, not the fraction multiplied back up.
+        /* Absent while indeterminate, not zero. An omitted `aria-valuenow` is the
+         * platform's own signal for indeterminate, and it is the only one:
+         * `aria-busy` says the element is being updated, which is a different claim.
+         * Reporting 0 would announce "0 percent" for work that is running, which is
+         * worse than saying nothing because it is wrong rather than unknown.
          *
+         * Otherwise the clamped value itself, never the fraction multiplied back up.
          * Dividing by `max` and then multiplying by it is a round trip through a
          * float, and for roughly one integer pair in sixteen it does not come back:
          * `1/3*3` is `0.9999999999999998`, which is what the accessibility tree
-         * carried and what a screen reader read out. Clamping the value directly
-         * says the same thing without the detour. */
+         * carried and what a screen reader read out. */
         const ceiling = this.max > 0 ? this.max : 100;
         this.internals.ariaValueNow = this.indeterminate
             ? null
@@ -185,12 +182,12 @@ let HelixHeadlessProgress = class HelixHeadlessProgress extends HelixElement {
             : ''}`;
     }
 };
-__decorate([
-    property()
-], HelixHeadlessProgress.prototype, "label", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessProgress.prototype, "indeterminate", void 0);
+__decorate([
+    property()
+], HelixHeadlessProgress.prototype, "label", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessProgress.prototype, "max", void 0);

package/dist/qr-code/root/qr-code-root.d.ts

@@ -45,9 +45,15 @@ export type QrStyle = 'dots' | 'rounded' | 'square';
  */
 export declare class HelixHeadlessQrCode extends HelixElement {
     /**
-     * What the code encodes, which is usually a URL.
+     * How much of the code can be lost and still read.
+     *
+     * `M` by default, which is the level almost every code in the world uses and
+     * costs about fifteen percent redundancy. `H` where a mark covers the center,
+     * chosen automatically when the slot is filled: it is the level that makes
+     * covering safe, and a consumer who fills the slot has said what they want
+     * without having to know that.
      */
-    value: string;
+    correction?: QrCorrection;
     /**
      * What the image is called.
      *
@@ -65,20 +71,14 @@ export declare 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.
      */
     shape: QrStyle;
     /**
-     * How much of the code can be lost and still read.
-     *
-     * `M` by default, which is the level almost every code in the world uses and
-     * costs about fifteen percent redundancy. `H` where a mark covers the center,
-     * chosen automatically when the slot is filled: it is the level that makes
-     * covering safe, and a consumer who fills the slot has said what they want
-     * without having to know that.
+     * What the code encodes, which is usually a URL.
      */
-    correction?: QrCorrection;
+    value: string;
     /** Whether anything is slotted into the middle. */
     private logo;
     /** The level actually used, which the slot can raise. */