@fusion.dev/helix-headless 0.143.0 → 0.145.0

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

@@ -1,4 +1,4 @@
-import { HelixElement } from '@fusion.dev/helix-core';
+import { HelixFormElement } from '@fusion.dev/helix-core';
 import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 import '../../option/index.js';
 import '../../select/index.js';
@@ -28,6 +28,11 @@ import '../../select/index.js';
  * Re-querying and returning to page one is up to you, because only you know
  * whether the current position should be kept.
  *
+ * It takes part in a form. Give it a `name` and the size in force is submitted
+ * under that name, so a `GET` form carries it in the address beside the page.
+ * A form reset returns it to `default-value`, and `disabled`, or a disabled
+ * `<fieldset>` around it, turns the select off.
+ *
  * @since 0.1.0
  * @status stable
  * @aliases Page size, Rows per page
@@ -67,7 +72,7 @@ import '../../select/index.js';
  *
  * @cssstate empty - While there are no sizes to offer.
  */
-export declare class HelixHeadlessPaginationSize extends HelixElement {
+export declare class HelixHeadlessPaginationSize extends HelixFormElement {
     /**
      * The size to start on when `value` is not set.
      */
@@ -115,6 +120,10 @@ export declare class HelixHeadlessPaginationSize extends HelixElement {
      * after it, and a refused size still sent it.
      */
     private readonly stopNative;
+    /** Returns to the size the markup declared, as a native `<select>` does on a reset. */
+    formResetCallback(): void;
+    /** Takes back the size a browser restores with the form, or the declared one. */
+    formStateRestoreCallback(state: string | File | FormData | null): void;
     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

@@ -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, formatNumbers, HelixBeforeChangeEvent, HelixElement, requestChange, } from '@fusion.dev/helix-core';
+import { customElement, formatNumbers, HelixBeforeChangeEvent, HelixFormElement, requestChange, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
 import '../../option/index.js';
 import '../../select/index.js';
-let HelixHeadlessPaginationSize = class HelixHeadlessPaginationSize extends HelixElement {
+let HelixHeadlessPaginationSize = class HelixHeadlessPaginationSize extends HelixFormElement {
     constructor() {
         super(...arguments);
         this.defaultValue = 0;
@@ -29,8 +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 }));
+                    this.announceInput();
+                    this.announceChange();
                 },
                 event: (size) => new HelixBeforeChangeEvent({ value: String(size) }),
                 host: this,
@@ -68,9 +68,23 @@ let HelixHeadlessPaginationSize = class HelixHeadlessPaginationSize extends Heli
         const options = this.options;
         return options.includes(this.value) ? this.value : (options[0] ?? 0);
     }
+    formResetCallback() {
+        super.formResetCallback();
+        const previous = this.value;
+        this.valueState = undefined;
+        this.requestUpdate('value', previous);
+    }
+    formStateRestoreCallback(state) {
+        const size = typeof state === 'string' ? Number.parseInt(state, 10) : Number.NaN;
+        const previous = this.value;
+        this.valueState = Number.isFinite(size) && size > 0 ? size : undefined;
+        this.requestUpdate('value', previous);
+    }
     willUpdate(changed) {
         super.willUpdate(changed);
         this.toggleState('empty', this.options.length === 0);
+        const current = this.current;
+        this.internals.setFormValue(current > 0 ? String(current) : null);
     }
     renderSelect() {
         const select = this.tag('select');
@@ -86,6 +100,7 @@ let HelixHeadlessPaginationSize = class HelixHeadlessPaginationSize extends Heli
         listbox-search-field: control-listbox-search-field, surface: control-surface,
         trigger: control-trigger, value: control-value"
       label=${this.label}
+      ?disabled=${this.isDisabled}
       .value=${String(this.current)}
       @helix-before-change=${this.handleChange}
       @input=${this.stopNative}

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

@@ -0,0 +1,7 @@
+/**
+ * Where a `format` puts separators in a row of boxes: for each box, the text
+ * drawn after it, or nothing. `#` and `*` stand for a box and anything else is
+ * drawn, so `###-###` puts a dash after the third box. Web Awesome's OTP input
+ * takes the same shape.
+ */
+export declare const separatorsAfter: (format: string, count: number) => string[];

package/dist/pin-input/format.js

@@ -0,0 +1,16 @@
+export const separatorsAfter = (format, count) => {
+    const after = Array.from({ length: count }, () => '');
+    let box = -1;
+    for (const character of format) {
+        if (character === '#' || character === '*') {
+            box += 1;
+            if (box >= count) {
+                break;
+            }
+        }
+        else if (box >= 0 && box < count - 1) {
+            after[box] += character;
+        }
+    }
+    return after;
+};

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

@@ -22,6 +22,12 @@ declare const HelixHeadlessPinInput_base: (new (...args: any[]) => import("@fusi
  * Only the first cell has `autocomplete="one-time-code"`, because the hint
  * applies to the whole field.
  *
+ * `autosubmit` submits the form once the last box is filled, through the form's
+ * default button where there is one. `format` draws separators between the
+ * boxes, such as the dash in `###-###`, as text a screen reader skips. Delete
+ * removes the character in the focused box and pulls the rest of the code
+ * back, as Backspace removes the one before it.
+ *
  * The row of cells always runs left to right, with `dir="ltr"`, including in
  * Arabic and Hebrew. The first box is the leftmost, a paste fills to the right,
  * and the right arrow moves to the next box. The label, hint, and feedback
@@ -47,11 +53,14 @@ declare const HelixHeadlessPinInput_base: (new (...args: any[]) => import("@fusi
  * @csspart field - The row of boxes, ordered left to right in every language.
  * @csspart hint - The help under the boxes, shown while there is no feedback.
  * @csspart label - The label above the boxes.
+ * @csspart separator - The text `format` draws between two boxes.
  *
  * @cssstate invalid - The control has an error to show, from the browser's validation or from your `feedback`.
  */
 export declare class HelixHeadlessPinInput extends HelixHeadlessPinInput_base {
     protected readonly aria: AriaForwardController;
+    /** @internal The element a missing name is checked on: the row of cells, so the name of one cell does not count as the name of the field. */
+    protected get namedControl(): HTMLElement | null;
     /** Typed or dragged, so every edit is announced. See `announcesInput`. */
     protected readonly announcesInput = true;
     /**
@@ -63,10 +72,22 @@ export declare class HelixHeadlessPinInput extends HelixHeadlessPinInput_base {
      * the same code is one offer made six times.
      */
     autocomplete: string;
+    /**
+     * Whether the form is submitted once the last box is filled, as Web
+     * Awesome's `autosubmit` and Radix's `autoSubmit`. Only for a code the field
+     * took: a refused last character submits nothing.
+     */
+    autosubmit: boolean;
     /**
      * Accessible name for one box, with `{index}` and `{length}` filled in.
      */
     cellLabel: string;
+    /**
+     * Separators drawn between the boxes: `#` or `*` for a box and anything
+     * else as it is written, so `###-###` draws a dash after the third. The
+     * separators are hidden from screen readers and are not part of the value.
+     */
+    format: string;
     /**
      * How many characters the code has.
      */

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

@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { AriaForwardController, customElement, fillTemplate, HelixCompleteEvent, HelixFormElement, MixinControllerValue, MixinField, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
+import { separatorsAfter } from '../format.js';
 let HelixHeadlessPinInput = class HelixHeadlessPinInput extends MixinControllerValue(MixinField(HelixFormElement)) {
     constructor() {
         super(...arguments);
@@ -15,7 +16,9 @@ let HelixHeadlessPinInput = class HelixHeadlessPinInput extends MixinControllerV
         });
         this.announcesInput = true;
         this.autocomplete = 'one-time-code';
+        this.autosubmit = false;
         this.cellLabel = 'Character {index} of {length}';
+        this.format = '';
         this.length = 6;
         this.mask = false;
         this.placeholder = '';
@@ -62,7 +65,16 @@ let HelixHeadlessPinInput = class HelixHeadlessPinInput extends MixinControllerV
                 : event.key === 'End'
                     ? Math.min(this.value.length, this.count - 1)
                     : at + step;
-            if (event.key === 'Backspace' && cell.value === '' && at > 0) {
+            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+$/, ''));
@@ -106,6 +118,9 @@ let HelixHeadlessPinInput = class HelixHeadlessPinInput extends MixinControllerV
             }
         };
     }
+    get namedControl() {
+        return this.partNamed('field');
+    }
     static { this.shadowRootOptions = {
         ...HelixFormElement.shadowRootOptions,
         delegatesFocus: true,
@@ -149,6 +164,9 @@ let HelixHeadlessPinInput = class HelixHeadlessPinInput extends MixinControllerV
             if (applied && this.value === next && next.length === this.count) {
                 this.dispatchEvent(new HelixCompleteEvent({ value: next }));
                 this.commit();
+                if (this.autosubmit) {
+                    this.submitImplicitly();
+                }
             }
         });
     }
@@ -213,6 +231,7 @@ let HelixHeadlessPinInput = class HelixHeadlessPinInput extends MixinControllerV
     }
     render() {
         const characters = this.characters;
+        const separators = separatorsAfter(this.format, this.count);
         return html `${this.renderGroupLabel()}
       <div
         dir="ltr"
@@ -239,7 +258,9 @@ let HelixHeadlessPinInput = class HelixHeadlessPinInput extends MixinControllerV
             @keydown=${this.handleKeydown}
             @keypress=${this.handleKeypress}
             @paste=${this.handlePaste}
-          />`)}
+          />${separators[at]
+            ? html `<span part="separator" aria-hidden="true">${separators[at]}</span>`
+            : nothing}`)}
       </div>
       ${this.renderHint()}${this.renderFeedback()}`;
     }
@@ -247,9 +268,15 @@ let HelixHeadlessPinInput = class HelixHeadlessPinInput extends MixinControllerV
 __decorate([
     property()
 ], HelixHeadlessPinInput.prototype, "autocomplete", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessPinInput.prototype, "autosubmit", void 0);
 __decorate([
     property({ attribute: 'cell-label' })
 ], HelixHeadlessPinInput.prototype, "cellLabel", void 0);
+__decorate([
+    property()
+], HelixHeadlessPinInput.prototype, "format", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessPinInput.prototype, "length", void 0);

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

@@ -21,9 +21,28 @@ 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`.
+ * **Opening moves focus into the panel**, to the first control in it, or to the
+ * panel itself where it holds none, and closing from inside gives it back to
+ * the trigger. 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.
+ *
+ * `modal` keeps `Tab` inside the panel while it is open and says so with
+ * `aria-modal`, for a panel that has to be answered before the page goes on.
+ * Without it the popover does not trap focus.
+ *
+ * The panel's name is `label` when you set it. Otherwise it is the first
+ * heading in the panel, or the elements an `aria-labelledby` on the host names.
+ *
+ * `arrow` draws a point on the panel's edge facing the trigger. The side the
+ * panel landed on is on the host as `:state(placed-top)` and its kin, and the
+ * trigger's width is on the panel as `--floating-anchor-inline-size`, for a
+ * panel as wide as its trigger:
+ *
+ * ```css
+ * helix-popover::part(popover) {
+ *   min-inline-size: var(--floating-anchor-inline-size);
+ * }
+ * ```
  *
  * @since 0.1.0
  * @status stable
@@ -38,16 +57,38 @@ declare const HelixHeadlessPopover_base: (new (...args: any[]) => import("@fusio
  * @event {HelixBeforeOpenEvent} helix-before-open - Fired before it opens, and cancelable.
  * @event {ToggleEvent} toggle - Fired after the panel opens or closes, with `newState` and `oldState`.
  *
+ * @csspart arrow - The point on the panel's edge facing the trigger, drawn with `arrow`.
+ * @csspart arrow-bottom - Added to `arrow` while the panel is below its trigger, with the point on the panel's top edge.
+ * @csspart arrow-left - Added to `arrow` while the panel is left of its trigger, with the point on the panel's right edge.
+ * @csspart arrow-right - Added to `arrow` while the panel is right of its trigger, with the point on the panel's left edge.
+ * @csspart arrow-top - Added to `arrow` while the panel is above its trigger, with the point on the panel's bottom edge.
  * @csspart content - The scrolling region inside the panel.
  * @csspart popover - The panel.
  *
  * @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.
+ * @cssstate placed-right - While the panel sits to the right of its trigger.
+ * @cssstate placed-top - While the panel sits above its trigger.
  */
 export declare class HelixHeadlessPopover extends HelixHeadlessPopover_base {
     /**
-     * The panel's name, read by screen readers.
+     * Draws a point on the panel's edge facing the trigger.
+     *
+     * Off by default, which is the house style: a panel that opens from its
+     * trigger already reads as belonging to it.
+     */
+    arrow: boolean;
+    /**
+     * The panel's name, read by screen readers. Left at `Popover`, the first
+     * heading in the panel names it instead.
      */
     label: string;
+    /**
+     * Keeps `Tab` inside the panel while it is open, and marks the panel
+     * `aria-modal`. A press outside and Escape still close it.
+     */
+    modal: boolean;
     protected readonly aria: AriaForwardController;
     /**
      * Space between the trigger and the panel, in pixels.
@@ -60,6 +101,23 @@ export declare class HelixHeadlessPopover extends HelixHeadlessPopover_base {
      */
     placement: Placement;
     private readonly panel;
+    /**
+     * The side of its trigger the panel last landed on, which names the arrow's
+     * second part. Undefined until the first placement, which the server never
+     * makes.
+     */
+    private side?;
+    private readonly scope;
+    /** What is assigned to the panel's slot. */
+    private get slotted();
+    /** Whether the first heading in the panel is what names it. */
+    private namedByHeading;
+    /**
+     * Names the panel by its first heading, where `label` was left alone and no
+     * `aria-labelledby` on the host names it. An element reference, for the
+     * reason `Dialog` gives.
+     */
+    private nameByHeading;
     /**
      * The invoker that last opened the panel, when a command did.
      *

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

@@ -4,13 +4,15 @@ 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, CommandController, customElement, deepActiveElement, HelixElement, MixinControllerOpen, PopoverController, tellDisclosure, } from '@fusion.dev/helix-core';
-import { html } from 'lit';
-import { property } from 'lit/decorators.js';
+import { AriaForwardController, anchorElement, arrowReach, CommandController, customElement, deepActiveElement, FocusScopeController, HelixElement, headingIn, MixinControllerOpen, PopoverController, reflectElements, sideOf, tellDisclosure, } from '@fusion.dev/helix-core';
+import { html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
 let HelixHeadlessPopover = class HelixHeadlessPopover extends MixinControllerOpen(HelixElement) {
     constructor() {
         super(...arguments);
+        this.arrow = false;
         this.label = 'Popover';
+        this.modal = false;
         this.aria = new AriaForwardController(this, {
             target: () => this.partNamed('popover'),
         });
@@ -18,13 +20,28 @@ let HelixHeadlessPopover = class HelixHeadlessPopover extends MixinControllerOpe
         this.placement = 'bottom-start';
         this.panel = new PopoverController(this, {
             anchor: () => this.trigger,
+            arrow: () => this.partNamed('arrow'),
             boundary: () => [this, this.invoker],
-            offset: () => this.offset,
+            offset: () => this.offset + arrowReach(this.partNamed('arrow')),
             onDismiss: () => this.hide(),
+            onPlace: (placement) => {
+                const side = sideOf(placement);
+                this.toggleState('placed-bottom', side === 'bottom');
+                this.toggleState('placed-left', side === 'left');
+                this.toggleState('placed-right', side === 'right');
+                this.toggleState('placed-top', side === 'top');
+                this.side = side;
+            },
             open: () => this.open,
             placement: () => this.placement,
             surface: () => this.partNamed('popover'),
         });
+        this.scope = new FocusScopeController(this, {
+            contain: () => this.modal && this.open,
+            contents: () => this.slotted,
+            surface: () => this.partNamed('popover'),
+        });
+        this.namedByHeading = false;
         this.commands = new CommandController(this, {
             commands: {
                 '--close': () => this.hide(),
@@ -62,6 +79,16 @@ let HelixHeadlessPopover = class HelixHeadlessPopover extends MixinControllerOpe
             }
         };
     }
+    get slotted() {
+        return (this.renderRoot
+            ?.querySelector('slot:not([name])')
+            ?.assignedElements({ flatten: true }) ?? []);
+    }
+    nameByHeading() {
+        const asked = this.label !== 'Popover' || this.hasAttribute('aria-labelledby');
+        const heading = asked ? null : headingIn(this.slotted);
+        this.namedByHeading = reflectElements(this.partNamed('popover'), 'ariaLabelledByElements', heading ? [heading] : [], this.namedByHeading);
+    }
     get trigger() {
         return (this.invoker ??
             anchorElement(this.renderRoot?.querySelector('slot[name="trigger"]'), this));
@@ -95,6 +122,10 @@ let HelixHeadlessPopover = class HelixHeadlessPopover extends MixinControllerOpe
     updated(changed) {
         super.updated(changed);
         this.tellTrigger();
+        this.nameByHeading();
+        if (changed.has('open') && this.open && changed.get('open') === false) {
+            this.scope.enter();
+        }
     }
     render() {
         return html `<slot name="trigger" @click=${this.handleTriggerClick}></slot>
@@ -103,21 +134,38 @@ let HelixHeadlessPopover = class HelixHeadlessPopover extends MixinControllerOpe
         popover="manual"
         role="dialog"
         aria-label=${this.label}
+        aria-modal=${this.modal ? 'true' : nothing}
+        tabindex="-1"
         ?hidden=${!this.open}
       >
-        <div part="content"><slot></slot></div>
+        ${this.arrow
+            ? html `<div
+                part="arrow${this.side ? { bottom: ' arrow-bottom', left: ' arrow-left', right: ' arrow-right', top: ' arrow-top' }[this.side] : ''}"
+                aria-hidden="true"
+              ></div>`
+            : nothing}
+        <div part="content"><slot @slotchange=${this.nameByHeading}></slot></div>
       </div>`;
     }
 };
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessPopover.prototype, "arrow", void 0);
 __decorate([
     property()
 ], HelixHeadlessPopover.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessPopover.prototype, "modal", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessPopover.prototype, "offset", void 0);
 __decorate([
     property()
 ], HelixHeadlessPopover.prototype, "placement", void 0);
+__decorate([
+    state()
+], HelixHeadlessPopover.prototype, "side", void 0);
 HelixHeadlessPopover = __decorate([
     customElement('helix-headless-popover')
 ], HelixHeadlessPopover);

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

@@ -21,6 +21,8 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @aliases Progress bar, Loading bar
  * @documentation https://fusion.dev/helix/components/progress
  *
+ * @slot label - A visible label. Its words name the progress bar in place of `label`.
+ *
  * @csspart groove - The unfilled circle under the ring's filled arc.
  * @csspart indicator - The filled part that shows the work done.
  * @csspart track - The full length the work is measured against.
@@ -46,6 +48,9 @@ export declare class HelixHeadlessProgress extends HelixElement {
     indeterminate: boolean;
     /**
      * Accessible name for what is in progress.
+     *
+     * A visible label in the `label` slot names it instead, with the words it
+     * shows, so the name and the label cannot disagree.
      */
     label: string;
     /**
@@ -114,6 +119,8 @@ export declare class HelixHeadlessProgress extends HelixElement {
     /** What is done, as a fraction of the whole, between 0 and 1. */
     get fraction(): number;
     protected willUpdate(changed: PropertyValues): void;
+    /** A label's words changed, so the name is written again. */
+    private readonly renamed;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/progress/root/progress-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 { customElement, HelixElement, hostAria } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, hostAria, slottedWords } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 const percents = new Map();
@@ -30,6 +30,9 @@ let HelixHeadlessProgress = class HelixHeadlessProgress extends HelixElement {
         this.showValue = false;
         this.value = 0;
         this.valueText = '';
+        this.renamed = () => {
+            this.requestUpdate();
+        };
     }
     get range() {
         const min = Number.isFinite(this.min) ? this.min : 0;
@@ -41,7 +44,10 @@ let HelixHeadlessProgress = class HelixHeadlessProgress extends HelixElement {
     }
     willUpdate(changed) {
         super.willUpdate(changed);
-        hostAria(this.internals, { label: this.label, role: 'progressbar' });
+        hostAria(this.internals, {
+            label: slottedWords(this, ['label']) || this.label,
+            role: 'progressbar',
+        });
         const { max, min } = this.range;
         this.internals.ariaValueMin = String(min);
         this.internals.ariaValueMax = String(max);
@@ -56,7 +62,7 @@ let HelixHeadlessProgress = class HelixHeadlessProgress extends HelixElement {
       <circle part="groove" />
       <circle part="indicator" pathLength="100" style="--progress-fraction: ${fraction}" />
     </svg>`;
-        return html `${this.shape === 'ring'
+        return html `<slot name="label" @slotchange=${this.renamed}></slot>${this.shape === 'ring'
             ? ring
             : html `<div part="track">
             <div part="indicator" style="--progress-fraction: ${fraction}"></div>

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

@@ -0,0 +1,31 @@
+/**
+ * A drawn code as a file of its own: an SVG with its colors written in, which
+ * an image can load and a canvas can turn into a PNG.
+ *
+ * Beside the family's `index.ts`, because writing a file is not the element's
+ * template, and the markup is a pure function of what the element drew.
+ */
+/** What a code is drawn with, read from the element once it has rendered. */
+export interface QrDrawing {
+    /** The fill behind the code, quiet zone included. */
+    background: string;
+    /** The side of the `viewBox`, quiet zone included. */
+    box: number;
+    /** The color of the corner squares. */
+    finderColor: string;
+    /** The path of the corner squares. */
+    finders: string;
+    /** The color of every other module. */
+    moduleColor: string;
+    /** The path of every other module. */
+    modules: string;
+    /** The quiet zone, in modules, that both paths are moved in by. */
+    quiet: number;
+}
+/**
+ * The code as standalone SVG markup, sized `size` pixels square.
+ *
+ * The background is a rectangle under the code, since a scanner needs the
+ * light quiet zone and a transparent file put on a dark page has none.
+ */
+export declare const qrSvg: (drawing: QrDrawing, size: number) => string;

package/dist/qr-code/export.js

@@ -0,0 +1,10 @@
+const attribute = (value) => value.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;');
+export const qrSvg = (drawing, size) => {
+    const shift = `translate(${drawing.quiet} ${drawing.quiet})`;
+    return (`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${drawing.box} ${drawing.box}"` +
+        ` width="${size}" height="${size}" shape-rendering="crispEdges">` +
+        `<rect width="${drawing.box}" height="${drawing.box}" fill="${attribute(drawing.background)}"/>` +
+        `<path d="${attribute(drawing.modules)}" transform="${shift}" fill="${attribute(drawing.moduleColor)}"/>` +
+        `<path d="${attribute(drawing.finders)}" transform="${shift}" fill="${attribute(drawing.finderColor)}"/>` +
+        '</svg>');
+};

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

@@ -30,6 +30,10 @@ export type QrStyle = 'dots' | 'rounded' | 'square';
  * long once a logo raises the level to `H`. A value too long for the level
  * draws no code, and the element fires `error`.
  *
+ * `toSvg()`, `toPng()` and `download()` give the drawn code as a file of its
+ * own, in the colors it is drawn in, for a page that offers it to save or
+ * print, as Zag's download trigger does.
+ *
  * @since 0.1.0
  * @status stable
  * @category media
@@ -103,6 +107,28 @@ export declare class HelixHeadlessQrCode extends HelixElement {
      */
     private encoded;
     protected updated(changed: PropertyValues): void;
+    /**
+     * The code as an SVG file of its own, `size` pixels square, in the colors it
+     * is drawn in, with its background under the quiet zone.
+     *
+     * `''` where no code is drawn, before the first render or for a value too
+     * long for the level. A slotted logo is not in the file, being the page's
+     * own markup; save the file at `H` and the code still scans without it.
+     */
+    toSvg(size?: number): string;
+    /**
+     * The code as a PNG, `size` pixels square, drawn from `toSvg()`.
+     *
+     * `null` where no code is drawn.
+     */
+    toPng(size?: number): Promise<Blob | null>;
+    /**
+     * Saves the code as a PNG named `filename`, `size` pixels square.
+     *
+     * Call it from a press, since a browser lets a page start a download only
+     * in answer to one. Does nothing where no code is drawn.
+     */
+    download(filename?: string, size?: number): Promise<void>;
     private renderCode;
     protected render(): TemplateResult;
 }