@fusion.dev/helix-headless 0.142.1 → 0.144.0

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,29 @@ 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.
  *
+ * **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
  * @category overlays
@@ -32,18 +55,41 @@ 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 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.
      */
@@ -55,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.
      *
@@ -75,6 +138,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,24 +4,44 @@ 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 { 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'),
+        });
         this.offset = 4;
         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(),
@@ -40,6 +60,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();
@@ -49,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));
@@ -67,6 +107,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);
@@ -74,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>
@@ -82,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,12 +48,28 @@ 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;
+    /**
+     * 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 +100,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,9 +114,13 @@ 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;
+    /** 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,32 +4,56 @@ 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();
+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 = '';
+        this.renamed = () => {
+            this.requestUpdate();
+        };
+    }
+    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;
+        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);
         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() {
@@ -38,14 +62,14 @@ 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>
           </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 +80,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/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

@@ -26,6 +26,14 @@ 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`.
+ *
+ * `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
@@ -34,6 +42,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 +94,41 @@ 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;
+    /**
+     * 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;
 }

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

@@ -4,10 +4,12 @@ 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 } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, rgbOf } from '@fusion.dev/helix-core';
 import { html, nothing, svg, } from 'lit';
 import { property } from 'lit/decorators.js';
 import { encode } from 'uqr';
+import { qrSvg } from '../export.js';
+const QUIET = 4;
 const isFinder = (x, y, size) => {
     const near = (a, b) => a < 8 && b < 8;
     return near(x, y) || near(size - 1 - x, y) || near(x, size - 1 - y);
@@ -65,6 +67,7 @@ let HelixHeadlessQrCode = class HelixHeadlessQrCode extends HelixElement {
         this.label = '';
         this.value = '';
         this.logo = false;
+        this.overflowed = '';
     }
     willUpdate(changed) {
         super.willUpdate(changed);
@@ -79,13 +82,85 @@ 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 = '';
+        }
+    }
+    toSvg(size = 512) {
+        const code = this.renderRoot?.querySelector('svg[part="code"]');
+        const modules = code?.querySelector('[part="modules"]');
+        const finders = code?.querySelector('[part="finders"]');
+        if (!code || !modules || !finders) {
+            return '';
+        }
+        const ground = getComputedStyle(this).backgroundColor;
+        const clear = ground === '' || ground === 'transparent' || /^rgba\(.*,\s*0\)$/.test(ground);
+        return qrSvg({
+            background: clear ? '#ffffff' : rgbOf(ground),
+            box: Number(code.getAttribute('viewBox')?.split(' ')[2] ?? 0),
+            finderColor: rgbOf(getComputedStyle(finders).fill || '#000000'),
+            finders: finders.getAttribute('d') ?? '',
+            moduleColor: rgbOf(getComputedStyle(modules).fill || '#000000'),
+            modules: modules.getAttribute('d') ?? '',
+            quiet: QUIET,
+        }, size);
+    }
+    async toPng(size = 512) {
+        const markup = this.toSvg(size);
+        if (markup === '') {
+            return null;
+        }
+        const image = new Image();
+        image.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(markup)}`;
+        await image.decode();
+        const canvas = document.createElement('canvas');
+        canvas.width = size;
+        canvas.height = size;
+        canvas.getContext('2d')?.drawImage(image, 0, 0, size, size);
+        return new Promise((resolve) => canvas.toBlob(resolve, 'image/png'));
+    }
+    async download(filename = 'qr-code.png', size = 512) {
+        const png = await this.toPng(size);
+        if (!png) {
+            return;
+        }
+        const url = URL.createObjectURL(png);
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = filename;
+        link.click();
+        setTimeout(() => URL.revokeObjectURL(url));
+    }
     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 quiet = QUIET;
         const box = size + quiet * 2;
         const finders = pathFor(result.data, 'square', 'finders');
         return svg `<svg