@fusion.dev/helix-headless 0.147.0 → 0.149.0

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

@@ -65,6 +65,7 @@ import '../../select/index.js';
  * @csspart control-listbox-loading - The text shown while the options load.
  * @csspart control-listbox-search - The region that holds the filter field.
  * @csspart control-listbox-search-field - The filter field.
+ * @csspart control-live - The select's `live` part, the region a screen reader hears a choice made on the closed trigger from.
  * @csspart control-surface - The floating panel.
  * @csspart control-trigger - The closed control, which shows the chosen size.
  * @csspart control-value - The chosen size inside the trigger.
@@ -79,6 +80,11 @@ import '../../select/index.js';
  * @cssstate empty - While there are no sizes to offer.
  */
 export declare class HelixHeadlessPaginationSize extends HelixFormElement {
+    /**
+     * The key this part's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-pagination-size': { label: 'Pro Seite' } })`.
+     */
+    static words: string;
     /**
      * The size to start on when `value` is not set.
      */
@@ -88,9 +94,8 @@ export declare class HelixHeadlessPaginationSize extends HelixFormElement {
      */
     label: string;
     /**
-     * Locale for the numbers.
-     *
-     * Absent uses the runtime's own.
+     * The locale the words and the numbers are in, as a BCP 47 tag such as
+     * `de`. Empty reads the nearest `lang`, then the browser's language.
      */
     locale: string;
     /**

package/dist/pagination/size/pagination-size.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, formatNumbers, HelixBeforeChangeEvent, HelixFormElement, hostWords, requestChange, } from '@fusion.dev/helix-core';
+import { customElement, formatNumbers, HelixBeforeChangeEvent, HelixFormElement, hostWords, requestChange, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
@@ -47,6 +47,7 @@ let HelixHeadlessPaginationSize = class HelixHeadlessPaginationSize extends Heli
             event.stopPropagation();
         };
     }
+    static { this.words = 'helix-pagination-size'; }
     get value() {
         return this.valueState ?? this.defaultValue;
     }
@@ -56,7 +57,7 @@ let HelixHeadlessPaginationSize = class HelixHeadlessPaginationSize extends Heli
         this.requestUpdate('value', previous);
     }
     get numbers() {
-        return formatNumbers(this.locale);
+        return formatNumbers(wordsLocale(this));
     }
     get options() {
         return this.sizes
@@ -98,7 +99,7 @@ let HelixHeadlessPaginationSize = class HelixHeadlessPaginationSize extends Heli
         listbox-filter-mark: control-listbox-filter-mark, listbox-hint: control-listbox-hint,
         listbox-items: control-listbox-items, listbox-label: control-listbox-label,
         listbox-live: control-listbox-live, listbox-loading: control-listbox-loading, listbox-search: control-listbox-search,
-        listbox-search-field: control-listbox-search-field, surface: control-surface,
+        listbox-search-field: control-listbox-search-field, live: control-live, surface: control-surface,
         trigger: control-trigger, value: control-value"
       label=${named ? '' : this.label}
       aria-label=${named || nothing}
@@ -129,6 +130,7 @@ __decorate([
     property({ attribute: 'default-value', type: Number })
 ], HelixHeadlessPaginationSize.prototype, "defaultValue", void 0);
 __decorate([
+    words,
     property()
 ], HelixHeadlessPaginationSize.prototype, "label", void 0);
 __decorate([

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

@@ -21,9 +21,14 @@ import { type TemplateResult } from 'lit';
  * @documentation https://fusion.dev/helix/components/pagination
  */
 export declare class HelixHeadlessPaginationSummary extends HelixElement {
+    /**
+     * The key this part's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-pagination-summary': { format: '{from} bis {to} von {total}' } })`.
+     */
+    static words: string;
     /**
      * The text shown. `{from}`, `{to}`, and `{total}` are replaced with the first
-     * item, the last item, and the item count.
+     * item, the last item, and the item count, written in the locale.
      *
      * A template rather than a prefix and a suffix, because word order is not
      * universal: `format="{total} 件中 {from}-{to} 件"` is one attribute here and
@@ -39,9 +44,8 @@ export declare class HelixHeadlessPaginationSummary extends HelixElement {
      */
     format: string;
     /**
-     * Locale for the numbers.
-     *
-     * Absent uses the runtime's own.
+     * The locale the words and the numbers are in, as a BCP 47 tag such as
+     * `de`. Empty reads the nearest `lang`, then the browser's language.
      */
     locale: string;
     /**
@@ -56,8 +60,6 @@ export declare class HelixHeadlessPaginationSummary extends HelixElement {
      * How many items there are across every page.
      */
     total: number;
-    /** Held across every component asking for the same locale. */
-    private get numbers();
     protected render(): TemplateResult;
 }
 declare global {

package/dist/pagination/summary/pagination-summary.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, fillTemplate, formatNumbers, HelixElement } from '@fusion.dev/helix-core';
+import { customElement, formatWords, HelixElement, words } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessPaginationSummary = class HelixHeadlessPaginationSummary extends HelixElement {
@@ -16,9 +16,7 @@ let HelixHeadlessPaginationSummary = class HelixHeadlessPaginationSummary extend
         this.pageSize = 0;
         this.total = 0;
     }
-    get numbers() {
-        return formatNumbers(this.locale);
-    }
+    static { this.words = 'helix-pagination-summary'; }
     render() {
         if (this.total <= 0 || this.pageSize <= 0) {
             return html ``;
@@ -28,14 +26,11 @@ let HelixHeadlessPaginationSummary = class HelixHeadlessPaginationSummary extend
         const page = Math.min(pages, Math.max(1, Math.floor(this.page) || 1));
         const from = (page - 1) * size + 1;
         const to = Math.min(this.total, from + size - 1);
-        return html `${fillTemplate(this.format, {
-            from: this.numbers(from),
-            to: this.numbers(to),
-            total: this.numbers(this.total),
-        })}`;
+        return html `${formatWords(this, 'format', { from, to, total: this.total })}`;
     }
 };
 __decorate([
+    words,
     property()
 ], HelixHeadlessPaginationSummary.prototype, "format", void 0);
 __decorate([

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

@@ -1,3 +1,4 @@
+import type { PickerVerdict } from '@fusion.dev/helix-core';
 /** What a box accepts, which decides the keyboard a phone offers. */
 export type PinType = 'alphanumeric' | 'numeric' | 'text';
 /** How typed letters are cased: as typed, or turned upper or lower case. */
@@ -35,3 +36,25 @@ export declare const readTyped: (raw: string, caret: number, type: PinType, lett
  * holding two fill from box three.
  */
 export declare const overwriteCode: (code: string, at: number, text: string, count: number) => CodeEdit;
+/** The messages a code's verdict is written with. */
+export interface CodeMessages {
+    /** For a code with no characters in a required field. */
+    missing?: string | undefined;
+    /** For a code with fewer characters than boxes, written for how many there are. */
+    short: (length: number) => string;
+}
+/**
+ * What is wrong with a code, as a picker field reports it: a required field
+ * with nothing in it is missing, a code with fewer characters than boxes is
+ * too short, and anything else is fine (`''`). The platform's own words for a
+ * missing code where the page set none.
+ */
+export declare const codeVerdict: (code: string, count: number, required: boolean, messages: CodeMessages) => PickerVerdict;
+/**
+ * The box a caret key moves to from `caret`, kept within the boxes up to
+ * `end`, or `undefined` for a key that moves nothing.
+ *
+ * Not `inlineStep`: the row is left to right whatever the page, so the key
+ * pointing right is the one that moves on in every script.
+ */
+export declare const caretTo: (key: string, caret: number, end: number) => number | undefined;

package/dist/pin-input/code.js

@@ -23,3 +23,24 @@ export const overwriteCode = (code, at, text, count) => {
     }
     return { caret: Math.min(count - 1, start + text.length), code: characters.join('') };
 };
+export const codeVerdict = (code, count, required, messages) => {
+    if (required && code === '') {
+        return ['valueMissing', messages.missing || 'Please fill in this field.'];
+    }
+    if (code !== '' && code.length < count) {
+        return ['tooShort', messages.short(count)];
+    }
+    return '';
+};
+export const caretTo = (key, caret, end) => {
+    const to = key === 'ArrowRight'
+        ? caret + 1
+        : key === 'ArrowLeft'
+            ? caret - 1
+            : key === 'Home'
+                ? 0
+                : key === 'End'
+                    ? end
+                    : undefined;
+    return to === undefined ? undefined : Math.max(0, Math.min(to, end));
+};

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

@@ -84,6 +84,11 @@ declare const HelixHeadlessPinInput_base: (new (...args: any[]) => import("@fusi
  * @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 {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-pin-input': { tooShortMessage: '{length, plural, one {Bitte # Zeichen eingeben.} other {Bitte alle # Zeichen eingeben.}}' } })`.
+     */
+    static words: string;
     protected readonly aria: AriaForwardController;
     /** Typed or pasted, so every edit is announced. See `announcesInput`. */
     protected readonly announcesInput = true;
@@ -144,10 +149,11 @@ export declare class HelixHeadlessPinInput extends HelixHeadlessPinInput_base {
      */
     readOnly: boolean;
     /**
-     * The message shown when the code is started and not finished, with
-     * `{length}` filled in. When it is unset, an English default is shown.
+     * The message shown when the code is started and not finished. `{length}`
+     * is how many characters the code has, written in the locale, and each
+     * language writes the forms it has.
      */
-    tooShortMessage?: string;
+    tooShortMessage: string;
     /**
      * The characters a box accepts, which also sets the keyboard a phone shows.
      *

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

@@ -4,10 +4,10 @@ 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, restoreValue, submitImplicitly, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, formatWords, HelixCompleteEvent, HelixFormElement, MixinControllerValue, MixinField, restoreValue, submitImplicitly, verdictFlags, words, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
-import { cleanCode, overwriteCode, readTyped, } from '../code.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();
@@ -28,6 +28,7 @@ let HelixHeadlessPinInput = class HelixHeadlessPinInput extends MixinControllerV
         this.maskCharacter = '•';
         this.placeholder = '';
         this.readOnly = false;
+        this.tooShortMessage = '{length, plural, one {Please enter the # character.} other {Please enter all # characters.}}';
         this.type = 'numeric';
         this.active = -1;
         this.pressedAt = undefined;
@@ -61,20 +62,12 @@ let HelixHeadlessPinInput = class HelixHeadlessPinInput extends MixinControllerV
                 }
                 return;
             }
-            const to = event.key === 'ArrowRight'
-                ? this.caretBox + 1
-                : event.key === 'ArrowLeft'
-                    ? this.caretBox - 1
-                    : event.key === 'Home'
-                        ? 0
-                        : event.key === 'End'
-                            ? this.end
-                            : undefined;
+            const to = caretTo(event.key, this.caretBox, this.end);
             if (to === undefined) {
                 return;
             }
             event.preventDefault();
-            this.active = Math.max(0, Math.min(to, this.end));
+            this.active = to;
             this.placeCaret(true);
         };
         this.handlePress = (event) => {
@@ -112,6 +105,7 @@ let HelixHeadlessPinInput = class HelixHeadlessPinInput extends MixinControllerV
             }
         };
     }
+    static { this.words = 'helix-pin-input'; }
     static { this.shadowRootOptions = {
         ...HelixFormElement.shadowRootOptions,
         delegatesFocus: true,
@@ -172,17 +166,11 @@ let HelixHeadlessPinInput = class HelixHeadlessPinInput extends MixinControllerV
         if (!control) {
             return;
         }
-        if (this.required && this.value === '') {
-            this.internals.setValidity({ valueMissing: true }, this.valueMissingMessage || 'Please fill in this field.', control);
-        }
-        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,
-            }), control);
-        }
-        else {
-            this.internals.setValidity({}, '', control);
-        }
+        const found = verdictFlags(codeVerdict(this.value, this.count, this.required, {
+            missing: this.valueMissingMessage,
+            short: (length) => formatWords(this, 'tooShortMessage', { length }),
+        }));
+        this.internals.setValidity(found?.[0] ?? {}, found?.[1] ?? '', control);
         this.refreshFeedback();
     }
     focus(options) {
@@ -274,6 +262,7 @@ __decorate([
     property()
 ], HelixHeadlessPinInput.prototype, "case", void 0);
 __decorate([
+    words,
     property({ attribute: 'cell-label' })
 ], HelixHeadlessPinInput.prototype, "cellLabel", void 0);
 __decorate([
@@ -295,6 +284,7 @@ __decorate([
     property({ attribute: 'readonly', reflect: true, type: Boolean })
 ], HelixHeadlessPinInput.prototype, "readOnly", void 0);
 __decorate([
+    words,
     property({ attribute: 'too-short-message' })
 ], HelixHeadlessPinInput.prototype, "tooShortMessage", void 0);
 __decorate([

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

@@ -81,6 +81,11 @@ declare const HelixHeadlessPopover_base: (new (...args: any[]) => import("@fusio
  * @cssstate placed-top - While the panel sits above its trigger.
  */
 export declare class HelixHeadlessPopover extends HelixHeadlessPopover_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-popover': { fallbackLabel: 'Popup' } })`.
+     */
+    static words: string;
     /**
      * Draws a point on the panel's edge facing the trigger.
      *
@@ -89,8 +94,13 @@ export declare class HelixHeadlessPopover extends HelixHeadlessPopover_base {
      */
     arrow: boolean;
     /**
-     * The panel's name, read by screen readers. Left at `Popover`, the first
-     * heading in the panel names it instead.
+     * The panel's name where nothing else names it: no `label`, no heading in
+     * the panel, and no `aria-labelledby` on the host.
+     */
+    fallbackLabel: string;
+    /**
+     * The panel's name, read by screen readers. Left empty, the first heading in
+     * the panel names it, and then `fallback-label`.
      */
     label: string;
     /**

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, OpenPhaseController, 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, words, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { hideOutside } from '../hide-outside.js';
@@ -12,7 +12,8 @@ let HelixHeadlessPopover = class HelixHeadlessPopover extends MixinControllerOpe
     constructor() {
         super(...arguments);
         this.arrow = false;
-        this.label = 'Popover';
+        this.fallbackLabel = 'Popover';
+        this.label = '';
         this.modal = false;
         this.aria = new AriaForwardController(this, {
             target: () => this.partNamed('popover'),
@@ -99,13 +100,14 @@ let HelixHeadlessPopover = class HelixHeadlessPopover extends MixinControllerOpe
         this.pressed = false;
         this.settled = false;
     }
+    static { this.words = 'helix-popover'; }
     get slotted() {
         return (this.renderRoot
             ?.querySelector('slot:not([name])')
             ?.assignedElements({ flatten: true }) ?? []);
     }
     nameByHeading() {
-        const asked = this.label !== 'Popover' || this.hasAttribute('aria-labelledby');
+        const asked = this.label !== '' || this.hasAttribute('aria-labelledby');
         const heading = asked ? null : headingIn(this.slotted);
         this.namedByHeading = reflectElements(this.partNamed('popover'), 'ariaLabelledByElements', heading ? [heading] : [], this.namedByHeading);
     }
@@ -196,7 +198,7 @@ let HelixHeadlessPopover = class HelixHeadlessPopover extends MixinControllerOpe
         part="popover"
         popover="manual"
         role="dialog"
-        aria-label=${this.label}
+        aria-label=${this.label || this.fallbackLabel}
         aria-modal=${this.modal ? 'true' : nothing}
         tabindex="-1"
         ?hidden=${!this.open}
@@ -214,6 +216,10 @@ let HelixHeadlessPopover = class HelixHeadlessPopover extends MixinControllerOpe
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessPopover.prototype, "arrow", void 0);
+__decorate([
+    words,
+    property({ attribute: 'fallback-label' })
+], HelixHeadlessPopover.prototype, "fallbackLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessPopover.prototype, "label", void 0);

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

@@ -43,6 +43,11 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @cssstate complete - The value is at `max` and the bar is not indeterminate.
  */
 export declare class HelixHeadlessProgress extends HelixElement {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-progress': { completeLabel: 'Fertig' } })`.
+     */
+    static words: string;
     /**
      * The words a screen reader hears when the value reaches `max`, such as
      * "Upload complete".
@@ -88,9 +93,9 @@ export declare class HelixHeadlessProgress extends HelixElement {
      */
     label: string;
     /**
-     * The locale the percentage is written in, such as `fr` for `72 %`.
+     * The locale the words and the percentage are in, such as `fr` for `72 %`.
      *
-     * Absent uses the runtime's own.
+     * Absent reads the nearest `lang`, then the runtime's own.
      */
     locale: string;
     /**

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, drawStatus, HelixCompleteEvent, HelixElement, hostAria, readingText, StatusController, slottedWords, } from '@fusion.dev/helix-core';
+import { customElement, drawStatus, HelixCompleteEvent, HelixElement, hostAria, readingText, StatusController, slottedWords, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessProgress = class HelixHeadlessProgress extends HelixElement {
@@ -24,6 +24,7 @@ let HelixHeadlessProgress = class HelixHeadlessProgress extends HelixElement {
             this.requestUpdate();
         };
     }
+    static { this.words = 'helix-progress'; }
     get complete() {
         return !this.indeterminate && this.fraction >= 1;
     }
@@ -66,7 +67,7 @@ let HelixHeadlessProgress = class HelixHeadlessProgress extends HelixElement {
     }
     get text() {
         return (this.valueText ||
-            readingText(Math.min(Math.max(this.value, this.range.min), this.range.max), this.fraction, this.locale, this.formatOptions));
+            readingText(Math.min(Math.max(this.value, this.range.min), this.range.max), this.fraction, wordsLocale(this), this.formatOptions));
     }
     render() {
         const fraction = this.indeterminate ? 1 : this.fraction;
@@ -87,6 +88,7 @@ let HelixHeadlessProgress = class HelixHeadlessProgress extends HelixElement {
     }
 };
 __decorate([
+    words,
     property({ attribute: 'complete-label' })
 ], HelixHeadlessProgress.prototype, "completeLabel", void 0);
 __decorate([
@@ -96,6 +98,7 @@ __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessProgress.prototype, "indeterminate", void 0);
 __decorate([
+    words,
     property()
 ], HelixHeadlessProgress.prototype, "label", void 0);
 __decorate([

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

@@ -1,6 +1,7 @@
 /**
  * The name a code is read by: its `label`, or with none, the word for a code,
- * followed by the value where the value is a web address.
+ * or where the value is a web address, `addressed` with it, which puts the
+ * word and the address in one sentence.
  *
  * **A value that is no web address is never read out.** A code that sets up
  * an authenticator (`otpauth://…?secret=…`) or joins a network
@@ -8,4 +9,4 @@
  * read that secret aloud to anyone in earshot. A web address is what a
  * sighted reader gets by scanning, so it is said after the word.
  */
-export declare const qrName: (label: string, value: string, word: string) => string;
+export declare const qrName: (label: string, value: string, word: string, addressed: (address: string) => string) => string;

package/dist/qr-code/name.js

@@ -1,7 +1,7 @@
-export const qrName = (label, value, word) => {
+export const qrName = (label, value, word, addressed) => {
     if (label.trim() !== '') {
         return label;
     }
     const address = value.trim();
-    return /^https?:\/\/\S+$/iu.test(address) ? `${word}, ${address}` : word;
+    return /^https?:\/\/\S+$/iu.test(address) ? addressed(address) : word;
 };

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

@@ -27,7 +27,8 @@ export type QrStyle = 'dots' | 'rounded' | 'square';
  * `correction` sets how much of the code can be lost. At `H` a code can lose
  * thirty percent and still scan, so a mark in the center slot is safe. At `L`
  * the same mark makes the code unscannable. The default is `M`, and `H` when the
- * `logo` slot is filled.
+ * `logo` slot is filled. A code that holds a logo at a `correction` below `H`
+ * warns once with the kind `unscannable-logo`.
  *
  * 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
@@ -37,7 +38,8 @@ export type QrStyle = 'dots' | 'rounded' | 'square';
  * `toSvg()`, `toPng()` and `download()` give the drawn code as a file of its
  * own, in the colors it is drawn in, with a slotted image or SVG logo where
  * it sits, for a page that offers it to save or print, as Zag's download
- * trigger does.
+ * trigger does. `download()` saves an SVG for a name ending in `.svg`, and a
+ * PNG for any other.
  *
  * @since 0.1.0
  * @status stable
@@ -60,8 +62,18 @@ export type QrStyle = 'dots' | 'rounded' | 'square';
  */
 export declare class HelixHeadlessQrCode extends HelixElement {
     /**
-     * The words a code with no `label` is named by, followed by its value where
-     * the value is a web address.
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-qr-code': { codeLabel: 'QR-Code' } })`.
+     */
+    static words: string;
+    /**
+     * The name of a code with no `label` whose value is a web address.
+     * `{code}` is `code-label` and `{address}` the address.
+     */
+    addressLabel: string;
+    /**
+     * The words a code with no `label` is named by, with its value where the
+     * value is a web address, as `address-label` says.
      */
     codeLabel: string;
     /**
@@ -111,6 +123,14 @@ export declare class HelixHeadlessQrCode extends HelixElement {
     protected firstUpdated(changed: PropertyValues): void;
     /** The level actually used, which the slot can raise. */
     private get level();
+    /** Whether this code has warned that its logo may keep it from scanning. */
+    private toldLogo;
+    /**
+     * Warns once when a logo covers a code whose level was set below `H`, where
+     * the cover can take more than the level can lose. A level the code chose
+     * itself is `H` already.
+     */
+    private auditLogo;
     /** The value and level that did not fit, so `error` fires once for each. */
     private overflowed;
     /**
@@ -148,7 +168,8 @@ export declare class HelixHeadlessQrCode extends HelixElement {
      */
     toPng(size?: number): Promise<Blob | null>;
     /**
-     * Saves the code as a PNG named `filename`, `size` pixels square.
+     * Saves the code as a file named `filename`, `size` pixels square: an SVG
+     * where the name ends in `.svg`, and a PNG otherwise.
      *
      * 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.