@fusion.dev/helix-headless 0.146.0 → 0.148.0

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

@@ -4,16 +4,18 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { AriaForwardController, customElement, fillTemplate, HelixCompleteEvent, HelixFormElement, MixinControllerValue, MixinField, submitImplicitly, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, HelixCompleteEvent, HelixFormElement, MixinControllerValue, MixinField, restoreValue, submitImplicitly, verdictFlags, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
-import { property } from 'lit/decorators.js';
-import { cleanCode } from '../code.js';
+import { property, state } from 'lit/decorators.js';
+import { caretTo, cleanCode, codeVerdict, overwriteCode, readTyped, } from '../code.js';
 import { separatorsAfter } from '../format.js';
+const UNSEEN = 'position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;font-size:16px';
+const keepFocus = (event) => event.preventDefault();
 let HelixHeadlessPinInput = class HelixHeadlessPinInput extends MixinControllerValue(MixinField(HelixFormElement)) {
     constructor() {
         super(...arguments);
         this.aria = new AriaForwardController(this, {
-            target: () => this.partNamed('field'),
+            target: () => this.control,
         });
         this.announcesInput = true;
         this.autocomplete = 'one-time-code';
@@ -23,95 +25,77 @@ let HelixHeadlessPinInput = class HelixHeadlessPinInput extends MixinControllerV
         this.format = '';
         this.length = 6;
         this.mask = false;
+        this.maskCharacter = '•';
         this.placeholder = '';
         this.readOnly = false;
         this.type = 'numeric';
+        this.active = -1;
+        this.pressedAt = undefined;
         this.handleInput = (event) => {
             event.stopPropagation();
-            const cell = event.target;
-            const at = this.cells.indexOf(cell);
-            if (at === -1) {
-                return;
-            }
-            if (cell.value === '') {
-                const characters = this.characters;
-                characters[at] = '';
-                this.requestValue(characters.join(''));
-                this.updateComplete.then(() => {
-                    this.paint();
-                    this.cells[at]?.focus();
-                });
-                return;
-            }
-            this.write(at, cell.value);
-            this.updateComplete.then(() => this.paint());
+            const control = event.target;
+            this.take(readTyped(control.value, control.selectionStart ?? control.value.length, this.type, this.case, this.count));
         };
         this.handlePaste = (event) => {
-            const cell = event.target;
-            const at = this.cells.indexOf(cell);
-            if (at === -1 || this.isDisabled || this.readOnly) {
+            event.preventDefault();
+            const control = this.control;
+            if (!control || this.isDisabled || this.readOnly) {
                 return;
             }
-            event.preventDefault();
-            this.write(at, event.clipboardData?.getData('text') ?? '');
+            const text = cleanCode(event.clipboardData?.getData('text') ?? '', this.type, this.case);
+            if (text === '') {
+                return;
+            }
+            const start = control.selectionStart ?? this.end;
+            const end = control.selectionEnd ?? start;
+            const kept = end - start > 1 ? this.value.slice(0, start) + this.value.slice(end) : this.value;
+            this.take(overwriteCode(kept, start, text, this.count));
         };
         this.handleKeydown = (event) => {
-            const cell = event.target;
-            const at = this.cells.indexOf(cell);
-            if (at === -1 || this.isDisabled || this.readOnly) {
+            if (event.isComposing || this.isDisabled) {
                 return;
             }
-            const step = event.key === 'ArrowRight' ? 1 : event.key === 'ArrowLeft' ? -1 : 0;
-            const to = event.key === 'Home'
-                ? 0
-                : event.key === 'End'
-                    ? Math.min(this.value.length, this.count - 1)
-                    : at + step;
-            if (event.key === 'Delete' && at < this.value.length) {
-                const characters = this.characters;
-                characters.splice(at, 1);
-                this.requestValue(characters.join('').replace(/\s+$/, ''));
-                this.updateComplete.then(() => {
-                    this.paint();
-                    this.cells[at]?.focus();
-                });
-            }
-            else if (event.key === 'Backspace' && cell.value === '' && at > 0) {
-                const characters = this.characters;
-                characters[at - 1] = '';
-                this.requestValue(characters.join('').replace(/\s+$/, ''));
-                this.updateComplete.then(() => {
-                    this.paint();
-                    this.cells[at - 1]?.focus();
-                });
-            }
-            else if (to !== at && to >= 0 && to < this.count) {
-                this.cells[to]?.focus();
-                this.cells[to]?.select();
+            if (this.readOnly) {
+                if (event.key === 'Backspace' || event.key === 'Delete') {
+                    event.preventDefault();
+                }
+                return;
             }
-            else {
+            const to = caretTo(event.key, this.caretBox, this.end);
+            if (to === undefined) {
                 return;
             }
             event.preventDefault();
+            this.active = to;
+            this.placeCaret(true);
         };
-        this.committed = '';
-        this.handleFocus = (event) => {
-            ;
-            event.target.select();
-        };
-        this.within = false;
-        this.handleFocusIn = () => {
-            if (this.within) {
+        this.handlePress = (event) => {
+            const control = this.control;
+            if (!control || this.isDisabled) {
                 return;
             }
-            this.within = true;
-            this.committed = this.value;
-        };
-        this.handleFocusOut = (event) => {
-            if (this.cells.includes(event.relatedTarget)) {
+            const boxes = [...this.renderRoot.querySelectorAll('[part~="cell"]')];
+            const box = event.target.closest('[part~="cell"]');
+            const at = box ? boxes.indexOf(box) : this.end;
+            if (this.shadowRoot?.activeElement === control) {
+                if (!this.readOnly) {
+                    this.active = Math.min(at, this.end);
+                    this.placeCaret(true);
+                }
                 return;
             }
-            this.within = false;
+            this.pressedAt = at;
+            control.focus();
+        };
+        this.committed = '';
+        this.handleFocus = () => {
+            this.committed = this.value;
+            this.active = this.readOnly ? -1 : Math.min(this.pressedAt ?? this.end, this.end);
+            this.pressedAt = undefined;
+            this.placeCaret(true);
+        };
+        this.handleBlur = () => {
+            this.active = -1;
             this.commit();
         };
         this.handleKeypress = (event) => {
@@ -120,9 +104,6 @@ let HelixHeadlessPinInput = class HelixHeadlessPinInput extends MixinControllerV
             }
         };
     }
-    get namedControl() {
-        return this.partNamed('field');
-    }
     static { this.shadowRootOptions = {
         ...HelixFormElement.shadowRootOptions,
         delegatesFocus: true,
@@ -130,49 +111,45 @@ let HelixHeadlessPinInput = class HelixHeadlessPinInput extends MixinControllerV
     get count() {
         return Math.max(1, Math.floor(this.length) || 1);
     }
-    get cells() {
-        return [...this.renderRoot.querySelectorAll('[part="cell"]')];
+    get control() {
+        return this.partNamed('control');
     }
-    get characters() {
-        return Array.from({ length: this.count }, (_, at) => this.value[at] ?? '');
+    get end() {
+        return Math.min(this.value.length, this.count - 1);
     }
-    clean(text) {
-        return cleanCode(text, this.type, this.case);
+    get caretBox() {
+        return this.active < 0 ? -1 : Math.min(this.active, this.end);
     }
-    write(from, text) {
-        const cleaned = this.clean(text);
-        if (cleaned === '') {
-            return;
+    take({ caret, code }) {
+        const applied = this.requestValue(code);
+        const control = this.control;
+        if (control) {
+            restoreValue(control, this.value);
         }
-        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) {
-            characters[start + at] = cleaned[at];
+        if (this.active >= 0 && applied) {
+            this.active = caret;
         }
-        const next = characters.join('');
-        const filled = Math.min(this.count - 1, start + cleaned.length);
-        const applied = this.requestValue(next);
-        this.updateComplete.then(() => {
-            this.paint();
-            this.cells[filled]?.focus();
-            this.cells[filled]?.select();
-            if (applied && this.value === next && next.length === this.count) {
-                this.dispatchEvent(new HelixCompleteEvent({ value: next }));
-                this.commit();
-                if (this.autosubmit) {
-                    submitImplicitly(this.form);
-                }
+        this.placeCaret(true);
+        if (applied && this.value === code && code.length === this.count) {
+            this.dispatchEvent(new HelixCompleteEvent({ value: code }));
+            this.commit();
+            if (this.autosubmit) {
+                submitImplicitly(this.form);
             }
-        });
+        }
     }
-    paint() {
-        const characters = this.characters;
-        for (const [at, cell] of this.cells.entries()) {
-            const want = characters[at] ?? '';
-            if (cell.value !== want) {
-                cell.value = want;
-            }
+    placeCaret(force = false) {
+        const control = this.control;
+        const at = this.caretBox;
+        if (!control || at < 0) {
+            return;
         }
+        const start = control.selectionStart ?? 0;
+        const end = control.selectionEnd ?? start;
+        if (!force && end - start > 1) {
+            return;
+        }
+        control.setSelectionRange(at, at < this.value.length ? at + 1 : at);
     }
     commit() {
         if (this.value === this.committed) {
@@ -183,34 +160,28 @@ let HelixHeadlessPinInput = class HelixHeadlessPinInput extends MixinControllerV
     }
     sync() {
         this.internals.setFormValue(this.value);
-        const first = this.cells[0];
-        if (!first) {
+        const control = this.control;
+        if (!control) {
             return;
         }
-        if (this.required && this.value === '') {
-            this.internals.setValidity({ valueMissing: true }, this.valueMissingMessage || 'Please fill in this field.', first);
-        }
-        else if (this.value !== '' && this.value.length < this.count) {
-            this.internals.setValidity({ tooShort: true }, fillTemplate(this.tooShortMessage || 'Please enter all {length} characters.', {
-                length: this.count,
-            }), first);
-        }
-        else {
-            this.internals.setValidity({}, '', first);
-        }
+        const found = verdictFlags(codeVerdict(this.value, this.count, this.required, {
+            missing: this.valueMissingMessage,
+            short: this.tooShortMessage,
+        }));
+        this.internals.setValidity(found?.[0] ?? {}, found?.[1] ?? '', control);
         this.refreshFeedback();
     }
     focus(options) {
-        const cells = this.cells;
-        const at = Math.min(this.value.length, cells.length - 1);
-        cells[at]?.focus(options);
+        this.control?.focus(options);
     }
     clear() {
         this.requestValue('');
-        this.updateComplete.then(() => {
-            this.paint();
-            this.cells[0]?.focus();
-        });
+        const control = this.control;
+        if (control) {
+            restoreValue(control, this.value);
+            this.pressedAt = 0;
+            control.focus();
+        }
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
@@ -219,44 +190,62 @@ let HelixHeadlessPinInput = class HelixHeadlessPinInput extends MixinControllerV
     updated(changed) {
         super.updated(changed);
         this.toggleState('complete', this.value.length >= this.count);
-        this.paint();
         this.sync();
+        this.placeCaret();
     }
     get blocksImplicitSubmission() {
         return true;
     }
+    renderBox(character, at) {
+        const caret = at === this.caretBox;
+        const content = character !== ''
+            ? this.mask
+                ? this.maskCharacter
+                : character
+            : caret
+                ? html `<span part="caret"></span>`
+                : this.placeholder
+                    ? html `<span part="placeholder">${this.placeholder}</span>`
+                    : nothing;
+        return html `<div
+      part="cell${caret ? ' cell-active' : ''}${character === '' ? '' : ' cell-filled'}"
+      aria-hidden="true"
+    >${content}</div>`;
+    }
     render() {
-        const characters = this.characters;
         const separators = separatorsAfter(this.format, this.count);
-        return html `${this.renderGroupLabel()}
+        return html `${this.renderLabel()}
       <div
         dir="ltr"
         part="field"
-        role="group"
-        aria-describedby=${this.describedBy ?? nothing}
-        aria-labelledby=${this.labeled ? this.labelId : nothing}
-        @focusin=${this.handleFocusIn}
-        @focusout=${this.handleFocusOut}
+        @click=${this.handlePress}
+        @mousedown=${keepFocus}
       >
-        ${characters.map((character, at) => html `<input
-            part="cell"
-            .value=${character}
-            type=${this.mask ? 'password' : 'text'}
-            placeholder=${this.placeholder || nothing}
-            inputmode=${this.type === 'numeric' ? 'numeric' : 'text'}
-            autocomplete=${at === 0 ? this.autocomplete || nothing : 'off'}
-            aria-label=${fillTemplate(this.cellLabel, { index: at + 1, length: this.count })}
-            aria-invalid=${this.invalidity ?? nothing}
-            ?disabled=${this.isDisabled}
-            ?readonly=${this.readOnly}
-            @focus=${this.handleFocus}
-            @input=${this.handleInput}
-            @keydown=${this.handleKeydown}
-            @keypress=${this.handleKeypress}
-            @paste=${this.handlePaste}
-          />${separators[at]
-            ? html `<span part="separator" aria-hidden="true">${separators[at]}</span>`
-            : nothing}`)}
+        <input
+          part="control"
+          id=${this.controlId}
+          style=${UNSEEN}
+          .value=${this.value}
+          type=${this.mask ? 'password' : 'text'}
+          inputmode=${this.type === 'numeric' ? 'numeric' : 'text'}
+          autocomplete=${this.autocomplete || nothing}
+          aria-describedby=${this.describedBy ?? nothing}
+          aria-invalid=${this.invalidity ?? nothing}
+          aria-required=${this.required ? 'true' : nothing}
+          ?disabled=${this.isDisabled}
+          ?readonly=${this.readOnly}
+          @blur=${this.handleBlur}
+          @focus=${this.handleFocus}
+          @input=${this.handleInput}
+          @keydown=${this.handleKeydown}
+          @keypress=${this.handleKeypress}
+          @paste=${this.handlePaste}
+        />${Array.from({ length: this.count }, (_, at) => {
+            const separator = separators[at];
+            return html `${this.renderBox(this.value[at] ?? '', at)}${separator
+                ? html `<span part="separator" aria-hidden="true">${separator}</span>`
+                : nothing}`;
+        })}
       </div>
       ${this.renderHint()}${this.renderFeedback()}`;
     }
@@ -282,6 +271,9 @@ __decorate([
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessPinInput.prototype, "mask", void 0);
+__decorate([
+    property({ attribute: 'mask-character' })
+], HelixHeadlessPinInput.prototype, "maskCharacter", void 0);
 __decorate([
     property()
 ], HelixHeadlessPinInput.prototype, "placeholder", void 0);
@@ -294,6 +286,9 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessPinInput.prototype, "type", void 0);
+__decorate([
+    state()
+], HelixHeadlessPinInput.prototype, "active", void 0);
 HelixHeadlessPinInput = __decorate([
     customElement('helix-headless-pin-input')
 ], HelixHeadlessPinInput);

package/dist/popover/hide-outside.js

@@ -1,7 +1,8 @@
+import { deepContains } from '@fusion.dev/helix-core';
 const KEEP = 'script, style, template, link, meta, [aria-live], [role="alert"], [role="log"], [role="status"]';
 export const hideOutside = (kept) => {
     const hidden = [];
-    const holds = (element) => kept.some((one) => composedContains(element, one));
+    const holds = (element) => kept.some((one) => deepContains(element, one));
     const seen = new Set();
     for (const start of kept) {
         let node = start;
@@ -31,11 +32,3 @@ export const hideOutside = (kept) => {
         hidden.length = 0;
     };
 };
-const composedContains = (outer, inner) => {
-    for (let node = inner; node; node = node instanceof ShadowRoot ? node.host : node.parentNode) {
-        if (node === outer) {
-            return true;
-        }
-    }
-    return false;
-};

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

@@ -1,4 +1,4 @@
-import { AriaForwardController, CommandController, HelixElement, type Placement } from '@fusion.dev/helix-core';
+import { AriaForwardController, CommandController, HelixElement, OpenPhaseController, type Placement } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 declare const HelixHeadlessPopover_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & typeof HelixElement;
 /**
@@ -69,6 +69,11 @@ declare const HelixHeadlessPopover_base: (new (...args: any[]) => import("@fusio
  * @csspart content - The scrolling region inside the panel.
  * @csspart popover - The panel.
  *
+ * @cssproperty --floating-anchor-inline-size - The trigger's width, written on the panel while it is open, as in `min-inline-size: var(--floating-anchor-inline-size)`. Read it; a value set here is written over.
+ * @cssproperty --floating-available-block-size - The room between the panel and the edge of the screen it opens toward, written on the panel while it is open. Read it; a value set here is written over.
+ *
+ * @cssstate entering - From the moment the panel shows until its entrance has finished.
+ * @cssstate exiting - From the moment the panel hides until its exit has finished.
  * @cssstate open - While the popover is open.
  * @cssstate placed-bottom - While the panel sits below its trigger.
  * @cssstate placed-left - While the panel sits to the left of its trigger.
@@ -105,6 +110,7 @@ export declare class HelixHeadlessPopover extends HelixHeadlessPopover_base {
      * It moves if that side does not fit.
      */
     placement: Placement;
+    protected readonly phases: OpenPhaseController;
     private readonly panel;
     /**
      * The side of its trigger the panel last landed on, which names the arrow's

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

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { AriaForwardController, anchorElement, arrowReach, CommandController, customElement, deepActiveElement, FocusScopeController, HelixElement, headingIn, MixinControllerOpen, PopoverController, reflectElements, sideOf, tellDisclosure, } from '@fusion.dev/helix-core';
+import { AriaForwardController, anchorElement, arrowReach, CommandController, customElement, deepActiveElement, FocusScopeController, HelixElement, headingIn, MixinControllerOpen, OpenPhaseController, PopoverController, reflectElements, sideOf, tellDisclosure, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { hideOutside } from '../hide-outside.js';
@@ -19,6 +19,14 @@ let HelixHeadlessPopover = class HelixHeadlessPopover extends MixinControllerOpe
         });
         this.offset = 4;
         this.placement = 'bottom-start';
+        this.phases = new OpenPhaseController(this, {
+            mark: {
+                entering: (on) => this.toggleState('entering', on),
+                exiting: (on) => this.toggleState('exiting', on),
+            },
+            open: () => this.open,
+            surface: () => this.partNamed('popover'),
+        });
         this.panel = new PopoverController(this, {
             anchor: () => this.trigger,
             arrow: () => this.partNamed('arrow'),

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

@@ -15,6 +15,13 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  *
  * The fill is a fraction of the track, written as a custom property.
  *
+ * **Reaching `max` is said and sent.** When the value arrives at `max` from
+ * below, the bar says `complete-label`, "Complete" by default, in a polite
+ * `live` region and sends `helix-complete`, so a reader hears that the work is
+ * done and a page can move on. A bar that starts full says nothing, and an
+ * empty `complete-label` keeps it quiet. The `complete` custom state is set
+ * while the bar is full.
+ *
  * @since 0.1.0
  * @status stable
  * @category feedback
@@ -23,14 +30,27 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  *
  * @slot label - A visible label. Its words name the progress bar in place of `label`.
  *
+ * @event {HelixCompleteEvent} helix-complete - The value reached `max` from below. Its `value` is `max`. Not sent for a bar that starts full.
+ *
  * @csspart groove - The unfilled circle under the ring's filled arc.
  * @csspart indicator - The filled part that shows the work done.
+ * @csspart live - A polite region that says `complete-label` when the work is done, rendered from that moment. Hide it visually.
  * @csspart track - The full length the work is measured against.
  * @csspart value - The value shown beside the bar when `show-value` is set.
  *
  * @cssproperty --progress-fraction - The value as a fraction of the range, 0 to 1. Pinned to 1 while indeterminate.
+ *
+ * @cssstate complete - The value is at `max` and the bar is not indeterminate.
  */
 export declare class HelixHeadlessProgress extends HelixElement {
+    /**
+     * The words a screen reader hears when the value reaches `max`, such as
+     * "Upload complete".
+     *
+     * Said once, politely, as the work finishes. Empty says nothing, for a bar
+     * whose page announces the result itself.
+     */
+    completeLabel: string;
     /**
      * `Intl.NumberFormat` options the reading is written with, as React Aria's
      * Meter and ProgressBar take them: a unit, a currency, or a number of
@@ -128,11 +148,18 @@ export declare class HelixHeadlessProgress extends HelixElement {
      * report progress.
      */
     valueText: string;
+    /** The region the bar says `complete-label` in, rendered from the first time it does. */
+    private readonly status;
+    /** Whether the bar was full at the last update, or unknown before the first. */
+    private wasComplete;
+    /** Whether the work is done: determinate and at `max`. */
+    private get complete();
     /** The range the value is measured in, with a top above its bottom. */
     private get range();
     /** What is done, as a fraction of the whole, between 0 and 1. */
     get fraction(): number;
     protected willUpdate(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
     /**
      * What the bar says: the consumer's words, or the reading in
      * `format-options`, a share of the range for a percent and the value for

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

@@ -4,13 +4,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, formatNumber, HelixElement, hostAria, slottedWords, } from '@fusion.dev/helix-core';
+import { customElement, drawStatus, HelixCompleteEvent, HelixElement, hostAria, readingText, StatusController, slottedWords, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
-const WHOLE_PERCENT = { maximumFractionDigits: 0, style: 'percent' };
 let HelixHeadlessProgress = class HelixHeadlessProgress extends HelixElement {
     constructor() {
         super(...arguments);
+        this.completeLabel = 'Complete';
         this.indeterminate = false;
         this.label = 'Progress';
         this.locale = '';
@@ -19,10 +19,14 @@ let HelixHeadlessProgress = class HelixHeadlessProgress extends HelixElement {
         this.showValue = false;
         this.value = 0;
         this.valueText = '';
+        this.status = new StatusController(this);
         this.renamed = () => {
             this.requestUpdate();
         };
     }
+    get complete() {
+        return !this.indeterminate && this.fraction >= 1;
+    }
     get range() {
         const min = Number.isFinite(this.min) ? this.min : 0;
         return { max: this.max > min ? this.max : min + 100, min };
@@ -45,13 +49,24 @@ let HelixHeadlessProgress = class HelixHeadlessProgress extends HelixElement {
             : String(Math.min(Math.max(this.value || min, min), max));
         this.internals.ariaValueText =
             this.valueText || (this.formatOptions !== undefined && !this.indeterminate ? this.text : null);
+        this.toggleState('complete', this.complete);
+    }
+    updated(changed) {
+        super.updated(changed);
+        const complete = this.complete;
+        const arrived = complete && this.wasComplete === false;
+        this.wasComplete = complete;
+        if (!arrived) {
+            return;
+        }
+        if (this.completeLabel !== '') {
+            this.status.say(this.completeLabel);
+        }
+        this.dispatchEvent(new HelixCompleteEvent({ value: String(this.range.max) }));
     }
     get text() {
-        const options = this.formatOptions;
         return (this.valueText ||
-            (options && options.style !== 'percent'
-                ? formatNumber(Math.min(Math.max(this.value, this.range.min), this.range.max), this.locale, options)
-                : formatNumber(this.fraction, this.locale, options ?? WHOLE_PERCENT)));
+            readingText(Math.min(Math.max(this.value, this.range.min), this.range.max), this.fraction, this.locale, this.formatOptions));
     }
     render() {
         const fraction = this.indeterminate ? 1 : this.fraction;
@@ -68,9 +83,12 @@ let HelixHeadlessProgress = class HelixHeadlessProgress extends HelixElement {
             ? html `<span part="value" aria-hidden="true"
               >${this.text}</span
             >`
-            : ''}`;
+            : ''}${drawStatus(this.status)}`;
     }
 };
+__decorate([
+    property({ attribute: 'complete-label' })
+], HelixHeadlessProgress.prototype, "completeLabel", void 0);
 __decorate([
     property({ attribute: 'format-options', type: Object })
 ], HelixHeadlessProgress.prototype, "formatOptions", void 0);

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

@@ -39,6 +39,25 @@ export interface QrLogo {
     /** An inline SVG's markup, written as a nested `<svg>` at the mark's place. */
     svg?: string;
 }
+/** A rectangle the page measured, as `getBoundingClientRect` gives one. */
+export interface QrRect {
+    readonly height: number;
+    readonly left: number;
+    readonly top: number;
+    readonly width: number;
+}
+/**
+ * A rectangle measured on the page as a place in the drawing: `area` is the
+ * drawn code's own rectangle and `box` the side of its `viewBox`, so a logo
+ * set over the code by a stylesheet lands where it was drawn.
+ */
+export declare const boxIn: (rect: QrRect, area: QrRect, box: number) => QrBox;
+/**
+ * The logo's box in the drawing, or nothing where any of it falls outside the
+ * code, such as a logo the headless tier sets beside the code rather than
+ * over it, which a file of the code alone has no place for.
+ */
+export declare const logoBox: (rect: QrRect, area: QrRect, box: number) => QrBox | undefined;
 /**
  * The logo as the file writes it: its box, then the mark, as an `<image>` or as
  * the slotted SVG moved to the mark's place. Nothing for a mark that is