@fusion.dev/helix-headless 0.142.0 → 0.143.0

package/dist/pagination/root/pagination-root.js

@@ -4,10 +4,11 @@ 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, fillTemplate, formatNumbers, HelixElement, HelixNavigateEvent, hostAria, requestChange, } from '@fusion.dev/helix-core';
+import { customElement, deepActiveElement, fillTemplate, formatNumbers, HelixActivateEvent, HelixElement, HelixNavigateEvent, hostAria, requestChange, } from '@fusion.dev/helix-core';
 import { caretDoubleLeft, caretDoubleRight, caretLeft, caretRight, } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 const fill = (template, page, pages, format = String) => fillTemplate(template, { page: format(page), pages: format(pages) });
 let HelixHeadlessPagination = class HelixHeadlessPagination extends HelixElement {
@@ -34,9 +35,15 @@ let HelixHeadlessPagination = class HelixHeadlessPagination extends HelixElement
         this.announcement = '';
         this.announced = undefined;
         this.pageState = undefined;
-        this.go = (next, event) => {
+        this.used = undefined;
+        this.go = (next, event, gap = false) => {
+            const control = event.currentTarget;
             if (!this.request(next)) {
                 event.preventDefault();
+                return;
+            }
+            if (control && deepActiveElement() === control) {
+                this.used = { control, gap };
             }
         };
     }
@@ -104,15 +111,43 @@ let HelixHeadlessPagination = class HelixHeadlessPagination extends HelixElement
         }
         return requestChange({
             apply: (page) => {
-                const previous = this.page;
-                this.pageState = page;
-                this.requestUpdate('page', previous);
+                if (this.href) {
+                    setTimeout(() => this.applyPage(page));
+                    return;
+                }
+                this.applyPage(page);
             },
-            event: (page) => new HelixNavigateEvent({ value: String(page) }),
+            event: (page) => new HelixNavigateEvent({ page, value: String(page) }),
             host: this,
             next,
         });
     }
+    applyPage(page) {
+        const previous = this.page;
+        this.pageState = page;
+        this.requestUpdate('page', previous);
+        this.dispatchEvent(new HelixActivateEvent({ value: String(page) }));
+    }
+    restoreFocus() {
+        const used = this.used;
+        this.used = undefined;
+        if (!used) {
+            return;
+        }
+        const { control, gap } = used;
+        const usable = (element) => element instanceof HTMLElement &&
+            element.isConnected &&
+            !element.disabled &&
+            element.getAttribute('aria-disabled') !== 'true';
+        if (!gap && usable(control)) {
+            return;
+        }
+        const target = [
+            this.renderRoot.querySelector('[part~="page-current"]'),
+            ...['previous', 'next', 'first', 'last'].map((name) => this.renderRoot.querySelector(`[part="${name}"]`)),
+        ].find(usable);
+        target?.focus();
+    }
     willUpdate(changed) {
         super.willUpdate(changed);
         hostAria(this.internals, { label: this.label, role: 'navigation' });
@@ -120,6 +155,7 @@ let HelixHeadlessPagination = class HelixHeadlessPagination extends HelixElement
     }
     updated(changed) {
         super.updated(changed);
+        this.restoreFocus();
         if (this.announced === undefined) {
             this.announced = this.page;
             return;
@@ -163,14 +199,14 @@ let HelixHeadlessPagination = class HelixHeadlessPagination extends HelixElement
               part="gap"
               href=${fill(this.href, to, this.count)}
               aria-label=${name}
-              @click=${(event) => this.go(to, event)}
+              @click=${(event) => this.go(to, event, true)}
               >&hellip;</a
             >`
             : html `<button
               part="gap"
               type="button"
               aria-label=${name}
-              @click=${(event) => this.go(to, event)}
+              @click=${(event) => this.go(to, event, true)}
             >
               &hellip;
             </button>`}
@@ -253,7 +289,11 @@ let HelixHeadlessPagination = class HelixHeadlessPagination extends HelixElement
         }
         return html `${this.ends ? this.renderFirst() : nothing}${this.renderPrevious()}
       <ol part="list" role="list">
-        ${this.slots.map((slot) => typeof slot === 'number' ? this.renderPage(slot) : this.renderGap(slot))}
+        ${repeat(this.slots, (slot) => typeof slot === 'number'
+            ? slot
+            : slot.from < this.current
+                ? 'gap-before'
+                : 'gap-after', (slot) => (typeof slot === 'number' ? this.renderPage(slot) : this.renderGap(slot)))}
       </ol>
       ${this.renderNext()}${this.ends ? this.renderLast() : nothing}${this.renderLive()}`;
     }

package/dist/pagination/size/pagination-size.d.ts

@@ -23,16 +23,19 @@ import '../../select/index.js';
  * `ElementInternals.states`.
  *
  * `value` is the current size, and `default-value` is the size from the markup.
- * Changing it dispatches `helix-before-change`. Re-querying and returning to
- * page one is up to you, because only you know whether the current position
- * should be kept.
+ * Changing it dispatches `helix-before-change`, and then `input` and `change`
+ * once the size has moved, as a native `<select>` sends them together.
+ * Re-querying and returning to page one is up to you, because only you know
+ * whether the current position should be kept.
  *
  * @since 0.1.0
  * @status stable
  * @aliases Page size, Rows per page
  * @documentation https://fusion.dev/helix/components/pagination
  *
+ * @event {Event} change - Fired after the size changes.
  * @event {HelixBeforeChangeEvent} helix-before-change - Fired before the size changes, and cancelable. Canceling it is the only way to stop a size change.
+ * @event {Event} input - Fired after the size changes, with `change`.
  *
  * @csspart control - The select.
  * @csspart control-feedback - The message that says what is wrong with the value.
@@ -105,6 +108,13 @@ export declare class HelixHeadlessPaginationSize extends HelixElement {
     /** The one in force, which is the first offered where nothing named one. */
     private get current();
     private readonly handleChange;
+    /**
+     * The select's own `input` and `change`, stopped so this element is the one
+     * voice for a size. `input` is composed, so left alone it crossed this
+     * shadow boundary and arrived looking like this element's, with no `change`
+     * after it, and a refused size still sent it.
+     */
+    private readonly stopNative;
     protected willUpdate(changed: PropertyValues): void;
     /**
      * The control itself, which is the whole of this part, behind a seam the styled tier can move.

package/dist/pagination/size/pagination-size.js

@@ -29,6 +29,8 @@ let HelixHeadlessPaginationSize = class HelixHeadlessPaginationSize extends Heli
                     const previous = this.value;
                     this.valueState = size;
                     this.requestUpdate('value', previous);
+                    this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+                    this.dispatchEvent(new Event('change', { bubbles: true, composed: false }));
                 },
                 event: (size) => new HelixBeforeChangeEvent({ value: String(size) }),
                 host: this,
@@ -41,6 +43,9 @@ let HelixHeadlessPaginationSize = class HelixHeadlessPaginationSize extends Heli
                 }
             });
         };
+        this.stopNative = (event) => {
+            event.stopPropagation();
+        };
     }
     get value() {
         return this.valueState ?? this.defaultValue;
@@ -83,6 +88,8 @@ let HelixHeadlessPaginationSize = class HelixHeadlessPaginationSize extends Heli
       label=${this.label}
       .value=${String(this.current)}
       @helix-before-change=${this.handleChange}
+      @input=${this.stopNative}
+      @change=${this.stopNative}
     >
       ${this.options.map((size) => html `<${option}
             part="option"

package/dist/pin-input/root/pin-input-root.d.ts

@@ -33,6 +33,10 @@ declare const HelixHeadlessPinInput_base: (new (...args: any[]) => import("@fusi
  * @aliases PinField, OTP, One-time code, Verification code, InputPin
  * @documentation https://fusion.dev/helix/components/pin-input
  *
+ * @slot feedback - The message that says what is wrong, for content richer than a string. It shows while there is a message.
+ * @slot hint - Help under the control, for content richer than the `hint` text.
+ * @slot label - The label, for content richer than the `label` text.
+ *
  * @event {Event} change - The code was filled, or an edited code lost focus.
  * @event {HelixBeforeChangeEvent} helix-before-change - The code is about to change. Cancelable.
  * @event {HelixCompleteEvent} helix-complete - The last box was filled.
@@ -150,6 +154,9 @@ export declare class HelixHeadlessPinInput extends HelixHeadlessPinInput_base {
      * Backspace in an empty box goes back and clears the one it lands in, which
      * is what makes a code correctable without the reader hunting for the box
      * they meant. In a full box it does what it always does and is left alone.
+     *
+     * Home goes to the first box and End to the end of the code, the box after
+     * its last character, which is where the caret goes in a single text field.
      */
     private readonly handleKeydown;
     /**
@@ -272,6 +279,15 @@ export declare class HelixHeadlessPinInput extends HelixHeadlessPinInput_base {
     clear(): void;
     protected firstUpdated(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
+    /**
+     * Enter submits the form, as it does in a native text field.
+     *
+     * On `keypress`, where the platform runs its own implicit submission, so a
+     * consumer who prevents the `keydown` for Enter stops this too.
+     */
+    private readonly handleKeypress;
+    /** @internal A single line of text counts against implicit submission. */
+    protected get blocksImplicitSubmission(): boolean;
     protected render(): TemplateResult;
 }
 declare global {

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

@@ -11,7 +11,7 @@ let HelixHeadlessPinInput = class HelixHeadlessPinInput extends MixinControllerV
     constructor() {
         super(...arguments);
         this.aria = new AriaForwardController(this, {
-            target: () => this.partNamed('cell'),
+            target: () => this.partNamed('field'),
         });
         this.announcesInput = true;
         this.autocomplete = 'one-time-code';
@@ -44,7 +44,7 @@ let HelixHeadlessPinInput = class HelixHeadlessPinInput extends MixinControllerV
         this.handlePaste = (event) => {
             const cell = event.target;
             const at = this.cells.indexOf(cell);
-            if (at === -1) {
+            if (at === -1 || this.isDisabled || this.readOnly) {
                 return;
             }
             event.preventDefault();
@@ -56,7 +56,12 @@ let HelixHeadlessPinInput = class HelixHeadlessPinInput extends MixinControllerV
             if (at === -1 || this.isDisabled || this.readOnly) {
                 return;
             }
-            const to = at + (event.key === 'ArrowRight' ? 1 : event.key === 'ArrowLeft' ? -1 : 0);
+            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 === 'Backspace' && cell.value === '' && at > 0) {
                 const characters = this.characters;
                 characters[at - 1] = '';
@@ -95,6 +100,11 @@ let HelixHeadlessPinInput = class HelixHeadlessPinInput extends MixinControllerV
             this.within = false;
             this.commit();
         };
+        this.handleKeypress = (event) => {
+            if (event.key === 'Enter' && !event.defaultPrevented) {
+                this.submitImplicitly();
+            }
+        };
     }
     static { this.shadowRootOptions = {
         ...HelixFormElement.shadowRootOptions,
@@ -131,12 +141,12 @@ let HelixHeadlessPinInput = class HelixHeadlessPinInput extends MixinControllerV
         }
         const next = characters.join('');
         const filled = Math.min(this.count - 1, start + cleaned.length);
-        this.requestValue(next);
+        const applied = this.requestValue(next);
         this.updateComplete.then(() => {
             this.paint();
             this.cells[filled]?.focus();
             this.cells[filled]?.select();
-            if (next.length === this.count) {
+            if (applied && this.value === next && next.length === this.count) {
                 this.dispatchEvent(new HelixCompleteEvent({ value: next }));
                 this.commit();
             }
@@ -198,6 +208,9 @@ let HelixHeadlessPinInput = class HelixHeadlessPinInput extends MixinControllerV
         this.paint();
         this.sync();
     }
+    get blocksImplicitSubmission() {
+        return true;
+    }
     render() {
         const characters = this.characters;
         return html `${this.renderGroupLabel()}
@@ -224,6 +237,7 @@ let HelixHeadlessPinInput = class HelixHeadlessPinInput extends MixinControllerV
             @focus=${this.handleFocus}
             @input=${this.handleInput}
             @keydown=${this.handleKeydown}
+            @keypress=${this.handleKeypress}
             @paste=${this.handlePaste}
           />`)}
       </div>

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

@@ -1,4 +1,4 @@
-import { CommandController, HelixElement, type Placement } from '@fusion.dev/helix-core';
+import { AriaForwardController, CommandController, HelixElement, 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;
 /**
@@ -21,6 +21,10 @@ declare const HelixHeadlessPopover_base: (new (...args: any[]) => import("@fusio
  * commands work as they do on `Dialog` and `Drawer`, so a button anywhere on
  * the page can open the popover with no script.
  *
+ * It closes on Escape, on a press outside it, and when focus moves out of the
+ * trigger and the panel to somewhere else on the page. It does not trap focus.
+ * An `aria-labelledby` on the host names the panel in place of `label`.
+ *
  * @since 0.1.0
  * @status stable
  * @category overlays
@@ -32,7 +36,7 @@ declare const HelixHeadlessPopover_base: (new (...args: any[]) => import("@fusio
  *
  * @event {HelixBeforeCloseEvent} helix-before-close - Fired before it closes, and cancelable.
  * @event {HelixBeforeOpenEvent} helix-before-open - Fired before it opens, and cancelable.
- * @event {Event} toggle - Fired after the panel opens or closes, with `newState` and `oldState`.
+ * @event {ToggleEvent} toggle - Fired after the panel opens or closes, with `newState` and `oldState`.
  *
  * @csspart content - The scrolling region inside the panel.
  * @csspart popover - The panel.
@@ -44,6 +48,7 @@ export declare class HelixHeadlessPopover extends HelixHeadlessPopover_base {
      * The panel's name, read by screen readers.
      */
     label: string;
+    protected readonly aria: AriaForwardController;
     /**
      * Space between the trigger and the panel, in pixels.
      */
@@ -75,6 +80,18 @@ export declare class HelixHeadlessPopover extends HelixHeadlessPopover_base {
     show(): void;
     /** Closes the panel and puts focus back on the trigger. */
     hide(): void;
+    /**
+     * Focus leaving the control closes the panel.
+     *
+     * A popover does not trap focus, so `Tab` past its last control walks on
+     * into the page, and a panel left open there covers what the reader moved
+     * to. Focus moving between the trigger, the panel and a command's invoker
+     * stays inside the control. With no `relatedTarget`, focus left the
+     * document or went nowhere, and a press outside is already its own signal.
+     */
+    private readonly handleFocusOut;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     private readonly handleTriggerClick;
     /** Tells a slotted trigger the disclosure state, by property. See `tellDisclosure`. */
     private tellTrigger;

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

@@ -4,13 +4,16 @@ 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 { anchorElement, CommandController, customElement, deepActiveElement, HelixElement, MixinControllerOpen, PopoverController, tellDisclosure, } from '@fusion.dev/helix-core';
+import { AriaForwardController, anchorElement, CommandController, customElement, deepActiveElement, HelixElement, MixinControllerOpen, PopoverController, tellDisclosure, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessPopover = class HelixHeadlessPopover extends MixinControllerOpen(HelixElement) {
     constructor() {
         super(...arguments);
         this.label = 'Popover';
+        this.aria = new AriaForwardController(this, {
+            target: () => this.partNamed('popover'),
+        });
         this.offset = 4;
         this.placement = 'bottom-start';
         this.panel = new PopoverController(this, {
@@ -40,6 +43,16 @@ let HelixHeadlessPopover = class HelixHeadlessPopover extends MixinControllerOpe
                 },
             },
         });
+        this.handleFocusOut = (event) => {
+            const next = event.relatedTarget;
+            if (!this.open || !(next instanceof Node)) {
+                return;
+            }
+            if (this.contains(next) || this.renderRoot.contains(next) || this.invoker?.contains(next)) {
+                return;
+            }
+            this.hide();
+        };
         this.handleTriggerClick = () => {
             if (this.open) {
                 this.hide();
@@ -67,6 +80,14 @@ let HelixHeadlessPopover = class HelixHeadlessPopover extends MixinControllerOpe
             this.trigger.focus();
         }
     }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('focusout', this.handleFocusOut);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('focusout', this.handleFocusOut);
+    }
     tellTrigger() {
         const slot = this.renderRoot?.querySelector('slot[name="trigger"]');
         tellDisclosure(slot?.assignedElements({ flatten: false })[0], this.open);

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

@@ -48,10 +48,23 @@ export declare class HelixHeadlessProgress extends HelixElement {
      * Accessible name for what is in progress.
      */
     label: string;
+    /**
+     * The locale the percentage is written in, such as `fr` for `72 %`.
+     *
+     * Absent uses the runtime's own.
+     */
+    locale: string;
     /**
      * The total the work is measured against.
      */
     max: number;
+    /**
+     * Where the work starts, in the same units as `max`. Defaults to zero.
+     *
+     * For a measure that does not start at nothing, such as a migration from
+     * version 12 to version 20, where 12 is the empty bar.
+     */
+    min: number;
     /**
      * Whether the value is drawn as a bar or as a ring.
      *
@@ -82,7 +95,7 @@ export declare class HelixHeadlessProgress extends HelixElement {
     /**
      * What has been done so far, in the same units as `max`.
      *
-     * Clamped between zero and `max` for both the fill and the announcement, so
+     * Clamped between `min` and `max` for both the fill and the announcement, so
      * the two can never disagree about what is on screen.
      */
     value: number;
@@ -96,6 +109,8 @@ export declare class HelixHeadlessProgress extends HelixElement {
      * report progress.
      */
     valueText: string;
+    /** 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;

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

@@ -7,29 +7,47 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement, HelixElement, hostAria } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
+const percents = new Map();
+const percent = (share, locale) => {
+    let format = percents.get(locale);
+    if (!format) {
+        format = new Intl.NumberFormat(locale || undefined, {
+            maximumFractionDigits: 0,
+            style: 'percent',
+        });
+        percents.set(locale, format);
+    }
+    return format.format(share);
+};
 let HelixHeadlessProgress = class HelixHeadlessProgress extends HelixElement {
     constructor() {
         super(...arguments);
         this.indeterminate = false;
         this.label = 'Progress';
+        this.locale = '';
         this.max = 100;
+        this.min = 0;
         this.showValue = false;
         this.value = 0;
         this.valueText = '';
     }
+    get range() {
+        const min = Number.isFinite(this.min) ? this.min : 0;
+        return { max: this.max > min ? this.max : min + 100, min };
+    }
     get fraction() {
-        const max = this.max > 0 ? this.max : 100;
-        return Math.min(Math.max(this.value / max, 0), 1) || 0;
+        const { max, min } = this.range;
+        return Math.min(Math.max((this.value - min) / (max - min), 0), 1) || 0;
     }
     willUpdate(changed) {
         super.willUpdate(changed);
         hostAria(this.internals, { label: this.label, role: 'progressbar' });
-        this.internals.ariaValueMin = '0';
-        this.internals.ariaValueMax = String(this.max > 0 ? this.max : 100);
-        const ceiling = this.max > 0 ? this.max : 100;
+        const { max, min } = this.range;
+        this.internals.ariaValueMin = String(min);
+        this.internals.ariaValueMax = String(max);
         this.internals.ariaValueNow = this.indeterminate
             ? null
-            : String(Math.min(Math.max(this.value || 0, 0), ceiling));
+            : String(Math.min(Math.max(this.value || min, min), max));
         this.internals.ariaValueText = this.valueText || null;
     }
     render() {
@@ -45,7 +63,7 @@ let HelixHeadlessProgress = class HelixHeadlessProgress extends HelixElement {
           </div>`}
       ${this.showValue && !this.indeterminate
             ? html `<span part="value" aria-hidden="true"
-              >${this.valueText || `${Math.round(this.fraction * 100)}%`}</span
+              >${this.valueText || percent(this.fraction, this.locale)}</span
             >`
             : ''}`;
     }
@@ -56,9 +74,15 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessProgress.prototype, "label", void 0);
+__decorate([
+    property()
+], HelixHeadlessProgress.prototype, "locale", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessProgress.prototype, "max", void 0);
+__decorate([
+    property({ type: Number })
+], HelixHeadlessProgress.prototype, "min", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessProgress.prototype, "shape", void 0);

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

@@ -26,6 +26,10 @@ export type QrStyle = 'dots' | 'rounded' | 'square';
  * the same mark makes the code unscannable. The default is `M`, and `H` when the
  * `logo` slot is filled.
  *
+ * A higher level holds fewer characters, so a value that fits at `M` can be too
+ * long once a logo raises the level to `H`. A value too long for the level
+ * draws no code, and the element fires `error`.
+ *
  * @since 0.1.0
  * @status stable
  * @category media
@@ -34,6 +38,8 @@ export type QrStyle = 'dots' | 'rounded' | 'square';
  *
  * @slot logo - A logo for the center. A code with a logo scans only at a high correction level.
  *
+ * @event {Event} error - The value is too long for a code at the correction level, so no code is drawn.
+ *
  * @csspart code - The square code image.
  * @csspart finders - The three corner squares, which can take their own color.
  * @csspart logo - The box that holds the center logo.
@@ -84,6 +90,19 @@ export declare class HelixHeadlessQrCode extends HelixElement {
     protected firstUpdated(changed: PropertyValues): void;
     /** The level actually used, which the slot can raise. */
     private get level();
+    /** The value and level that did not fit, so `error` fires once for each. */
+    private overflowed;
+    /**
+     * The code for the value at the level, or undefined where the value is too
+     * long for it.
+     *
+     * `encode` throws for a value past the level's capacity, and it threw inside
+     * the render: the update rejected and the last code stayed on screen. A
+     * logo raising the level to `H` was the easy way to get there, since `H`
+     * holds the fewest characters.
+     */
+    private encoded;
+    protected updated(changed: PropertyValues): void;
     private renderCode;
     protected render(): TemplateResult;
 }

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

@@ -65,6 +65,7 @@ let HelixHeadlessQrCode = class HelixHeadlessQrCode extends HelixElement {
         this.label = '';
         this.value = '';
         this.logo = false;
+        this.overflowed = '';
     }
     willUpdate(changed) {
         super.willUpdate(changed);
@@ -79,11 +80,38 @@ let HelixHeadlessQrCode = class HelixHeadlessQrCode extends HelixElement {
     get level() {
         return this.correction ?? (this.logo ? 'H' : 'M');
     }
+    encoded() {
+        try {
+            return encode(this.value, { border: 0, ecc: this.level });
+        }
+        catch (error) {
+            if (error instanceof RangeError) {
+                return undefined;
+            }
+            throw error;
+        }
+    }
+    updated(changed) {
+        super.updated(changed);
+        const key = `${this.level}:${this.value}`;
+        if (this.value !== '' && this.encoded() === undefined) {
+            if (this.overflowed !== key) {
+                this.overflowed = key;
+                this.dispatchEvent(new Event('error', { bubbles: false, cancelable: false, composed: false }));
+            }
+        }
+        else {
+            this.overflowed = '';
+        }
+    }
     renderCode() {
         if (this.value === '') {
             return nothing;
         }
-        const result = encode(this.value, { border: 0, ecc: this.level });
+        const result = this.encoded();
+        if (result === undefined) {
+            return nothing;
+        }
         const size = result.size;
         const quiet = 4;
         const box = size + quiet * 2;

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

@@ -29,6 +29,7 @@ declare const HelixHeadlessRadioGroup_base: (new (...args: any[]) => import("@fu
  * @documentation https://fusion.dev/helix/components/radio
  *
  * @slot - The radios.
+ * @slot feedback - The error message, for content richer than a string. It shows while there is a message.
  * @slot hint - The help text under the group, for content richer than a string.
  * @slot label - The group's label, for a question that needs more than a string.
  *
@@ -45,6 +46,18 @@ declare const HelixHeadlessRadioGroup_base: (new (...args: any[]) => import("@fu
  * @cssstate invalid - The group has an error to show, from the browser's validation or from your `feedback`.
  */
 export declare class HelixHeadlessRadioGroup extends HelixHeadlessRadioGroup_base {
+    /**
+     * Whether the group holds a tab stop of its own.
+     *
+     * A toolbar is one tab stop, so a toolbar the group sits in sets this to
+     * `false` while its stop is on another control, and every radio, the chosen
+     * one too, is then out of the tab order. The arrow keys inside the group
+     * work as before once focus is in it.
+     *
+     * No attribute: it is coordination between elements, and a consumer has no
+     * reason to set it.
+     */
+    focusable: boolean;
     /**
      * The direction the choices run. `vertical` puts one choice on each line.
      *
@@ -76,8 +89,36 @@ export declare class HelixHeadlessRadioGroup extends HelixHeadlessRadioGroup_bas
      * the item's is the one that was doing nothing.
      */
     private readonly handleSelection;
+    /**
+     * The radio holding the answer, or nothing.
+     *
+     * Nothing where `value` names no radio here: a chosen radio that was removed
+     * is no longer an answer, as a native group drops it from the form. `value`
+     * keeps the name, so a value written before its radios arrive takes once they
+     * do.
+     */
+    private get answer();
+    /** Whether the group holds an answer the form can submit. */
+    private get answered();
+    /**
+     * Takes the answer from a radio whose markup says `selected`, where nothing
+     * else declared one.
+     *
+     * As `Toggle.Group` does, so `<helix-radio selected>` preselects as
+     * `<option selected>` and `<helix-toggle selected>` do, and a reset returns
+     * to it. Client only: the server's element shim has no children to read.
+     */
+    private adopt;
     /** Writes the answer onto the items, and nothing onto the host. */
     private place;
+    /** The radio that holds the group's tab stop: the answer, or the first that can be chosen. */
+    private entry;
+    /**
+     * Focus goes to the radio that holds the stop, and to the radio that would
+     * hold it while a toolbar holds the stop instead, so a label press or a
+     * refused submission still lands in the group.
+     */
+    protected get focusTarget(): HTMLElement | null;
     /** Reports the answer and the verdict on it. */
     private sync;
     connectedCallback(): void;