@fusion.dev/helix-headless 0.145.0 → 0.147.0

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

@@ -4,9 +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, anchorElement, arrowReach, CommandController, customElement, deepActiveElement, FocusScopeController, HelixElement, headingIn, MixinControllerOpen, PopoverController, reflectElements, sideOf, tellDisclosure, } from '@fusion.dev/helix-core';
+import { AriaForwardController, anchorElement, arrowReach, CommandController, customElement, deepActiveElement, FocusScopeController, HelixElement, headingIn, MixinControllerOpen, OpenPhaseController, PopoverController, reflectElements, sideOf, tellDisclosure, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
+import { hideOutside } from '../hide-outside.js';
 let HelixHeadlessPopover = class HelixHeadlessPopover extends MixinControllerOpen(HelixElement) {
     constructor() {
         super(...arguments);
@@ -18,6 +19,14 @@ let HelixHeadlessPopover = class HelixHeadlessPopover extends MixinControllerOpe
         });
         this.offset = 4;
         this.placement = 'bottom-start';
+        this.phases = new OpenPhaseController(this, {
+            mark: {
+                entering: (on) => this.toggleState('entering', on),
+                exiting: (on) => this.toggleState('exiting', on),
+            },
+            open: () => this.open,
+            surface: () => this.partNamed('popover'),
+        });
         this.panel = new PopoverController(this, {
             anchor: () => this.trigger,
             arrow: () => this.partNamed('arrow'),
@@ -60,6 +69,7 @@ let HelixHeadlessPopover = class HelixHeadlessPopover extends MixinControllerOpe
                 },
             },
         });
+        this.closingFromInside = false;
         this.handleFocusOut = (event) => {
             const next = event.relatedTarget;
             if (!this.open || !(next instanceof Node)) {
@@ -68,7 +78,15 @@ let HelixHeadlessPopover = class HelixHeadlessPopover extends MixinControllerOpe
             if (this.contains(next) || this.renderRoot.contains(next) || this.invoker?.contains(next)) {
                 return;
             }
-            this.hide();
+            this.close(false);
+        };
+        this.notePress = (event) => {
+            const trigger = this.renderRoot
+                ?.querySelector('slot[name="trigger"]')
+                ?.assignedElements({ flatten: false })[0];
+            if (trigger && event.composedPath().includes(trigger)) {
+                this.pressed = true;
+            }
         };
         this.handleTriggerClick = () => {
             if (this.open) {
@@ -78,6 +96,8 @@ let HelixHeadlessPopover = class HelixHeadlessPopover extends MixinControllerOpe
                 this.show();
             }
         };
+        this.pressed = false;
+        this.settled = false;
     }
     get slotted() {
         return (this.renderRoot
@@ -99,33 +119,76 @@ let HelixHeadlessPopover = class HelixHeadlessPopover extends MixinControllerOpe
         }
     }
     hide() {
+        this.close(true);
+    }
+    close(giveBack) {
         if (!this.open || !this.requestOpen(false)) {
             return;
         }
         this.panel.hide();
-        if (this.contains(deepActiveElement())) {
+        if (giveBack && this.focusInside) {
             this.trigger.focus();
         }
     }
+    get focusInside() {
+        return this.scope.holdsFocus || this.contains(deepActiveElement());
+    }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        this.closingFromInside =
+            changed.has('open') && !this.open && changed.get('open') === true && this.focusInside;
+    }
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener('focusout', this.handleFocusOut);
+        this.addEventListener('click', this.notePress, { capture: true });
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.removeEventListener('focusout', this.handleFocusOut);
+        this.removeEventListener('click', this.notePress, { capture: true });
+        this.hideAround();
     }
     tellTrigger() {
         const slot = this.renderRoot?.querySelector('slot[name="trigger"]');
-        tellDisclosure(slot?.assignedElements({ flatten: false })[0], this.open);
+        const trigger = slot?.assignedElements({ flatten: false })[0];
+        if (!trigger || trigger.localName.includes('-')) {
+            tellDisclosure(trigger, this.open);
+            return;
+        }
+        if (trigger !== this.told) {
+            if (!this.pressed || trigger.hasAttribute('aria-expanded')) {
+                return;
+            }
+            this.told = trigger;
+        }
+        trigger.setAttribute('aria-expanded', String(this.open));
+    }
+    hideAround() {
+        const hide = this.open && this.modal && this.isConnected;
+        if (hide && !this.showOutside) {
+            this.showOutside = hideOutside([this, ...(this.invoker ? [this.invoker] : [])]);
+        }
+        else if (!hide && this.showOutside) {
+            this.showOutside();
+            this.showOutside = undefined;
+        }
     }
     updated(changed) {
         super.updated(changed);
         this.tellTrigger();
         this.nameByHeading();
+        if (this.settled) {
+            this.hideAround();
+        }
+        this.settled = true;
         if (changed.has('open') && this.open && changed.get('open') === false) {
             this.scope.enter();
         }
+        if (this.closingFromInside) {
+            this.closingFromInside = false;
+            this.trigger.focus();
+        }
     }
     render() {
         return html `<slot name="trigger" @click=${this.handleTriggerClick}></slot>

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

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

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

@@ -4,24 +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, HelixElement, hostAria, slottedWords } from '@fusion.dev/helix-core';
+import { customElement, drawStatus, HelixCompleteEvent, HelixElement, hostAria, readingText, StatusController, slottedWords, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
-const 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.completeLabel = 'Complete';
         this.indeterminate = false;
         this.label = 'Progress';
         this.locale = '';
@@ -30,10 +19,14 @@ let HelixHeadlessProgress = class HelixHeadlessProgress extends HelixElement {
         this.showValue = false;
         this.value = 0;
         this.valueText = '';
+        this.status = new StatusController(this);
         this.renamed = () => {
             this.requestUpdate();
         };
     }
+    get complete() {
+        return !this.indeterminate && this.fraction >= 1;
+    }
     get range() {
         const min = Number.isFinite(this.min) ? this.min : 0;
         return { max: this.max > min ? this.max : min + 100, min };
@@ -54,7 +47,26 @@ let HelixHeadlessProgress = class HelixHeadlessProgress extends HelixElement {
         this.internals.ariaValueNow = this.indeterminate
             ? null
             : String(Math.min(Math.max(this.value || min, min), max));
-        this.internals.ariaValueText = this.valueText || null;
+        this.internals.ariaValueText =
+            this.valueText || (this.formatOptions !== undefined && !this.indeterminate ? this.text : null);
+        this.toggleState('complete', this.complete);
+    }
+    updated(changed) {
+        super.updated(changed);
+        const complete = this.complete;
+        const arrived = complete && this.wasComplete === false;
+        this.wasComplete = complete;
+        if (!arrived) {
+            return;
+        }
+        if (this.completeLabel !== '') {
+            this.status.say(this.completeLabel);
+        }
+        this.dispatchEvent(new HelixCompleteEvent({ value: String(this.range.max) }));
+    }
+    get text() {
+        return (this.valueText ||
+            readingText(Math.min(Math.max(this.value, this.range.min), this.range.max), this.fraction, this.locale, this.formatOptions));
     }
     render() {
         const fraction = this.indeterminate ? 1 : this.fraction;
@@ -69,11 +81,17 @@ let HelixHeadlessProgress = class HelixHeadlessProgress extends HelixElement {
           </div>`}
       ${this.showValue && !this.indeterminate
             ? html `<span part="value" aria-hidden="true"
-              >${this.valueText || percent(this.fraction, this.locale)}</span
+              >${this.text}</span
             >`
-            : ''}`;
+            : ''}${drawStatus(this.status)}`;
     }
 };
+__decorate([
+    property({ attribute: 'complete-label' })
+], HelixHeadlessProgress.prototype, "completeLabel", void 0);
+__decorate([
+    property({ attribute: 'format-options', type: Object })
+], HelixHeadlessProgress.prototype, "formatOptions", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessProgress.prototype, "indeterminate", void 0);

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

@@ -21,11 +21,55 @@ export interface QrDrawing {
     modules: string;
     /** The quiet zone, in modules, that both paths are moved in by. */
     quiet: number;
+    /** The logo in the middle, where one is slotted and can be written into a file. */
+    logo?: QrLogo;
 }
+/** A place in the drawing, in `viewBox` units: x, y, width and height. */
+export type QrBox = readonly [number, number, number, number];
+/** The slotted logo, read from the element, as a file can carry it. */
+export interface QrLogo {
+    /** The box around the mark, which clears the modules under it. */
+    frame: QrBox;
+    /** The fill of that box. */
+    ground: string;
+    /** An image's address, written as an `<image>`. */
+    href?: string;
+    /** Where the mark sits inside the box. */
+    mark: QrBox;
+    /** An inline SVG's markup, written as a nested `<svg>` at the mark's place. */
+    svg?: string;
+}
+/** A rectangle the page measured, as `getBoundingClientRect` gives one. */
+export interface QrRect {
+    readonly height: number;
+    readonly left: number;
+    readonly top: number;
+    readonly width: number;
+}
+/**
+ * A rectangle measured on the page as a place in the drawing: `area` is the
+ * drawn code's own rectangle and `box` the side of its `viewBox`, so a logo
+ * set over the code by a stylesheet lands where it was drawn.
+ */
+export declare const boxIn: (rect: QrRect, area: QrRect, box: number) => QrBox;
+/**
+ * The logo's box in the drawing, or nothing where any of it falls outside the
+ * code, such as a logo the headless tier sets beside the code rather than
+ * over it, which a file of the code alone has no place for.
+ */
+export declare const logoBox: (rect: QrRect, area: QrRect, box: number) => QrBox | undefined;
+/**
+ * The logo as the file writes it: its box, then the mark, as an `<image>` or as
+ * the slotted SVG moved to the mark's place. Nothing for a mark that is
+ * neither, such as text, which a file of its own cannot carry in the page's
+ * fonts.
+ */
+export declare const qrLogo: (logo: QrLogo) => string;
 /**
  * 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.
+ * light quiet zone and a transparent file put on a dark page has none. A
+ * logo goes over the code, as it is drawn on the page.
  */
 export declare const qrSvg: (drawing: QrDrawing, size: number) => string;

package/dist/qr-code/export.js

@@ -1,4 +1,31 @@
+export const boxIn = (rect, area, box) => {
+    const scale = box / area.width;
+    return [
+        (rect.left - area.left) * scale,
+        (rect.top - area.top) * scale,
+        rect.width * scale,
+        rect.height * scale,
+    ];
+};
+export const logoBox = (rect, area, box) => {
+    const frame = boxIn(rect, area, box);
+    const [x, y, width, height] = frame;
+    return x < 0 || y < 0 || x + width > box || y + height > box ? undefined : frame;
+};
 const attribute = (value) => value.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;');
+const unit = (value) => String(Math.round(value * 100) / 100);
+const placed = ([x, y, width, height]) => `x="${unit(x)}" y="${unit(y)}" width="${unit(width)}" height="${unit(height)}"`;
+export const qrLogo = (logo) => {
+    const ground = `<rect ${placed(logo.frame)} fill="${attribute(logo.ground)}"/>`;
+    if (logo.href) {
+        return `${ground}<image ${placed(logo.mark)} href="${attribute(logo.href)}" preserveAspectRatio="xMidYMid meet"/>`;
+    }
+    if (logo.svg) {
+        const mark = logo.svg.replace(/^\s*<svg\b([^>]*)>/, (_, rest) => `<svg${rest.replace(/\s(?:x|y|width|height|slot)="[^"]*"/g, '')} ${placed(logo.mark)}>`);
+        return `${ground}${mark}`;
+    }
+    return '';
+};
 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}"` +
@@ -6,5 +33,6 @@ export const qrSvg = (drawing, size) => {
         `<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)}"/>` +
+        (drawing.logo ? qrLogo(drawing.logo) : '') +
         '</svg>');
 };

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

@@ -0,0 +1,11 @@
+/**
+ * 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.
+ *
+ * **A value that is no web address is never read out.** A code that sets up
+ * an authenticator (`otpauth://…?secret=…`) or joins a network
+ * (`WIFI:…;P:…;;`) carries a secret in its value, and the value as the name
+ * 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;

package/dist/qr-code/name.js

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

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

@@ -13,9 +13,12 @@ export type QrStyle = 'dots' | 'rounded' | 'square';
  * thousand modules, and an element for each would be a thousand nodes for one
  * image.
  *
- * The element has `role="img"` and an accessible name. Set the name to what the
- * code is for. When you pass no name, the value is the name. Most codes hold a
- * URL, and a URL read aloud gives the destination.
+ * The element has `role="img"` and an accessible name. Set `label` to what
+ * the code is for, such as "Open the menu". With no `label`, a code is named
+ * by `code-label`, "QR code", followed by its value where the value is a web
+ * address, which a URL read aloud makes a destination. Any other value is
+ * never read out: a code that sets up an authenticator or joins a network
+ * carries a secret in it.
  *
  * The quiet zone of four modules is required by the specification, and a
  * scanner rejects a code cropped to its edge. It is drawn inside the `viewBox`,
@@ -28,11 +31,13 @@ export type QrStyle = 'dots' | 'rounded' | 'square';
  *
  * 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`.
+ * draws no code: the element fires `error`, carries `:state(overflow)`, and
+ * shows what is in the `fallback` slot, such as the link written out.
  *
  * `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.
+ * 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.
  *
  * @since 0.1.0
  * @status stable
@@ -40,16 +45,25 @@ export type QrStyle = 'dots' | 'rounded' | 'square';
  * @aliases QR, Barcode, Scan code
  * @documentation https://fusion.dev/helix/components/qr-code
  *
+ * @slot fallback - Shown in place of the code when the value is too long for it, such as the link as text.
  * @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 fallback - The box around the `fallback` slot, drawn only when the value is too long for a code.
  * @csspart finders - The three corner squares, which can take their own color.
  * @csspart logo - The box that holds the center logo.
  * @csspart modules - Every module except the three corner squares.
+ *
+ * @cssstate overflow - The value is too long for a code at the correction level, so the fallback shows.
  */
 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.
+     */
+    codeLabel: string;
     /**
      * The error correction level, which sets how much of the code can be lost
      * and still scan.
@@ -62,10 +76,13 @@ export declare class HelixHeadlessQrCode extends HelixElement {
      */
     correction?: QrCorrection;
     /**
-     * The image's accessible name.
+     * The image's accessible name: what the code is for, such as "Open the
+     * menu".
      *
-     * Falling back to the value is deliberate: a code almost always holds a URL,
-     * and a URL is a better name than "QR code" for a reader who cannot see it.
+     * Absent names it by `code-label` and, for a web address, the address,
+     * which is what a reader who cannot scan it needs. Any other value is left
+     * out of the name, since it may hold a secret, such as an authenticator's
+     * key or a network's password.
      */
     label: string;
     /**
@@ -112,10 +129,18 @@ export declare class HelixHeadlessQrCode extends HelixElement {
      * 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.
+     * long for the level. A slotted `<img>` or `<svg>` logo is written in where
+     * it is drawn: an image as its address, or as its pixels where the page may
+     * read them, which a PNG needs. A logo of text is left out, a file having
+     * none of the page's fonts; the code still scans without it.
      */
     toSvg(size?: number): string;
+    /**
+     * The slotted logo as the file draws it, measured against the drawn code, or
+     * nothing where none is slotted, where it is not over the code (the headless
+     * tier sets it beside it), or where it is neither an image nor an SVG.
+     */
+    private logoDrawing;
     /**
      * The code as a PNG, `size` pixels square, drawn from `toSvg()`.
      *

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

@@ -8,8 +8,21 @@ 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';
+import { boxIn, logoBox, qrSvg } from '../export.js';
+import { qrName } from '../name.js';
 const QUIET = 4;
+const pixelsOf = (image) => {
+    try {
+        const canvas = document.createElement('canvas');
+        canvas.width = image.naturalWidth;
+        canvas.height = image.naturalHeight;
+        canvas.getContext('2d')?.drawImage(image, 0, 0);
+        return canvas.toDataURL('image/png');
+    }
+    catch {
+        return image.currentSrc || image.src;
+    }
+};
 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);
@@ -64,6 +77,7 @@ const pathFor = (matrix, style, only = 'all') => {
 let HelixHeadlessQrCode = class HelixHeadlessQrCode extends HelixElement {
     constructor() {
         super(...arguments);
+        this.codeLabel = 'QR code';
         this.label = '';
         this.value = '';
         this.logo = false;
@@ -96,7 +110,9 @@ let HelixHeadlessQrCode = class HelixHeadlessQrCode extends HelixElement {
     updated(changed) {
         super.updated(changed);
         const key = `${this.level}:${this.value}`;
-        if (this.value !== '' && this.encoded() === undefined) {
+        const overflow = this.value !== '' && this.encoded() === undefined;
+        this.toggleState('overflow', overflow);
+        if (overflow) {
             if (this.overflowed !== key) {
                 this.overflowed = key;
                 this.dispatchEvent(new Event('error', { bubbles: false, cancelable: false, composed: false }));
@@ -115,16 +131,46 @@ let HelixHeadlessQrCode = class HelixHeadlessQrCode extends HelixElement {
         }
         const ground = getComputedStyle(this).backgroundColor;
         const clear = ground === '' || ground === 'transparent' || /^rgba\(.*,\s*0\)$/.test(ground);
+        const background = clear ? '#ffffff' : rgbOf(ground);
+        const box = Number(code.getAttribute('viewBox')?.split(' ')[2] ?? 0);
+        const logo = this.logoDrawing(code, box, background);
         return qrSvg({
-            background: clear ? '#ffffff' : rgbOf(ground),
-            box: Number(code.getAttribute('viewBox')?.split(' ')[2] ?? 0),
+            background,
+            box,
             finderColor: rgbOf(getComputedStyle(finders).fill || '#000000'),
             finders: finders.getAttribute('d') ?? '',
             moduleColor: rgbOf(getComputedStyle(modules).fill || '#000000'),
             modules: modules.getAttribute('d') ?? '',
             quiet: QUIET,
+            ...(logo ? { logo } : {}),
         }, size);
     }
+    logoDrawing(code, box, background) {
+        const holder = this.renderRoot.querySelector('[part="logo"]');
+        const mark = this.knownChildren.find((child) => child.slot === 'logo');
+        const area = code.getBoundingClientRect();
+        if (!holder || holder.hidden || !mark || area.width === 0) {
+            return undefined;
+        }
+        const frame = logoBox(holder.getBoundingClientRect(), area, box);
+        if (!frame) {
+            return undefined;
+        }
+        const fill = getComputedStyle(holder).backgroundColor;
+        const ground = fill === '' || fill === 'transparent' || /^rgba\(.*,\s*0\)$/.test(fill);
+        const logo = {
+            frame,
+            ground: ground ? background : rgbOf(fill),
+            mark: boxIn(mark.getBoundingClientRect(), area, box),
+        };
+        if (mark instanceof HTMLImageElement) {
+            return { ...logo, href: pixelsOf(mark) };
+        }
+        if (mark instanceof SVGSVGElement) {
+            return { ...logo, svg: new XMLSerializer().serializeToString(mark) };
+        }
+        return undefined;
+    }
     async toPng(size = 512) {
         const markup = this.toSvg(size);
         if (markup === '') {
@@ -151,11 +197,7 @@ let HelixHeadlessQrCode = class HelixHeadlessQrCode extends HelixElement {
         link.click();
         setTimeout(() => URL.revokeObjectURL(url));
     }
-    renderCode() {
-        if (this.value === '') {
-            return nothing;
-        }
-        const result = this.encoded();
+    renderCode(result) {
         if (result === undefined) {
             return nothing;
         }
@@ -168,7 +210,7 @@ let HelixHeadlessQrCode = class HelixHeadlessQrCode extends HelixElement {
       viewBox="0 0 ${box} ${box}"
       xmlns="http://www.w3.org/2000/svg"
       role="img"
-      aria-label=${this.label || this.value}
+      aria-label=${qrName(this.label, this.value, this.codeLabel)}
       shape-rendering="crispEdges"
     >
       <path
@@ -186,7 +228,9 @@ let HelixHeadlessQrCode = class HelixHeadlessQrCode extends HelixElement {
     </svg>`;
     }
     render() {
-        return html `${this.renderCode()}
+        const result = this.value === '' ? undefined : this.encoded();
+        const overflow = this.value !== '' && result === undefined;
+        return html `${this.renderCode(result)}${overflow ? html `<span part="fallback"><slot name="fallback"></slot></span>` : nothing}
     <span ?hidden=${!this.logo} part="logo">
       <slot
         name="logo"
@@ -201,6 +245,9 @@ let HelixHeadlessQrCode = class HelixHeadlessQrCode extends HelixElement {
     </span>`;
     }
 };
+__decorate([
+    property({ attribute: 'code-label' })
+], HelixHeadlessQrCode.prototype, "codeLabel", void 0);
 __decorate([
     property({ attribute: 'correction' })
 ], HelixHeadlessQrCode.prototype, "correction", void 0);

package/dist/quote/marks.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Whether quoted text starts or ends with a quotation mark someone typed.
+ *
+ * A Quote renders a `<q>`, which sets the marks itself, so typed ones show
+ * twice: “"like this"”. Only the ends are read, since a mark inside the text
+ * is a quotation within it, which a nested Quote should set.
+ */
+export declare const typedMarks: (text: string) => boolean;