@fusion.dev/helix-headless 0.145.0 → 0.146.0

package/dist/pin-input/root/pin-input-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, customElement, fillTemplate, HelixCompleteEvent, HelixFormElement, MixinControllerValue, MixinField, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, fillTemplate, HelixCompleteEvent, HelixFormElement, MixinControllerValue, MixinField, submitImplicitly, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
+import { cleanCode } from '../code.js';
 import { separatorsAfter } from '../format.js';
 let HelixHeadlessPinInput = class HelixHeadlessPinInput extends MixinControllerValue(MixinField(HelixFormElement)) {
     constructor() {
@@ -17,6 +18,7 @@ let HelixHeadlessPinInput = class HelixHeadlessPinInput extends MixinControllerV
         this.announcesInput = true;
         this.autocomplete = 'one-time-code';
         this.autosubmit = false;
+        this.case = 'preserve';
         this.cellLabel = 'Character {index} of {length}';
         this.format = '';
         this.length = 6;
@@ -114,7 +116,7 @@ let HelixHeadlessPinInput = class HelixHeadlessPinInput extends MixinControllerV
         };
         this.handleKeypress = (event) => {
             if (event.key === 'Enter' && !event.defaultPrevented) {
-                this.submitImplicitly();
+                submitImplicitly(this.form);
             }
         };
     }
@@ -135,14 +137,7 @@ let HelixHeadlessPinInput = class HelixHeadlessPinInput extends MixinControllerV
         return Array.from({ length: this.count }, (_, at) => this.value[at] ?? '');
     }
     clean(text) {
-        const trimmed = text.trim();
-        if (this.type === 'numeric') {
-            return trimmed.replace(/\D/g, '');
-        }
-        if (this.type === 'alphanumeric') {
-            return trimmed.replace(/[^0-9A-Za-z]/g, '');
-        }
-        return trimmed;
+        return cleanCode(text, this.type, this.case);
     }
     write(from, text) {
         const cleaned = this.clean(text);
@@ -165,7 +160,7 @@ let HelixHeadlessPinInput = class HelixHeadlessPinInput extends MixinControllerV
                 this.dispatchEvent(new HelixCompleteEvent({ value: next }));
                 this.commit();
                 if (this.autosubmit) {
-                    this.submitImplicitly();
+                    submitImplicitly(this.form);
                 }
             }
         });
@@ -223,6 +218,7 @@ let HelixHeadlessPinInput = class HelixHeadlessPinInput extends MixinControllerV
     }
     updated(changed) {
         super.updated(changed);
+        this.toggleState('complete', this.value.length >= this.count);
         this.paint();
         this.sync();
     }
@@ -271,6 +267,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessPinInput.prototype, "autosubmit", void 0);
+__decorate([
+    property()
+], HelixHeadlessPinInput.prototype, "case", void 0);
 __decorate([
     property({ attribute: 'cell-label' })
 ], HelixHeadlessPinInput.prototype, "cellLabel", void 0);

package/dist/popover/hide-outside.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Hides everything on the page from assistive technology except `kept`, and
+ * returns a function that shows it again.
+ *
+ * Climbs from each kept element to the top of the document, through any shadow
+ * root it is in, and marks every sibling on the way that holds no kept element
+ * with `aria-hidden="true"`. What already says `aria-hidden` is left as it is,
+ * and given back as it was. Live regions are kept, so a message that arrives
+ * while the page is hidden is still announced.
+ *
+ * What a modal popover rests on: `Tab` is kept inside the panel, and this keeps
+ * a screen reader's virtual cursor there too.
+ */
+export declare const hideOutside: (kept: readonly Element[]) => (() => void);

package/dist/popover/hide-outside.js

@@ -0,0 +1,41 @@
+const KEEP = 'script, style, template, link, meta, [aria-live], [role="alert"], [role="log"], [role="status"]';
+export const hideOutside = (kept) => {
+    const hidden = [];
+    const holds = (element) => kept.some((one) => composedContains(element, one));
+    const seen = new Set();
+    for (const start of kept) {
+        let node = start;
+        while (node && node !== document.documentElement) {
+            const parent = node.parentNode;
+            if (!parent || seen.has(parent)) {
+                break;
+            }
+            seen.add(parent);
+            for (const sibling of parent.children ?? []) {
+                if (sibling === node ||
+                    holds(sibling) ||
+                    sibling.matches(KEEP) ||
+                    sibling.hasAttribute('aria-hidden')) {
+                    continue;
+                }
+                sibling.setAttribute('aria-hidden', 'true');
+                hidden.push(sibling);
+            }
+            node = parent instanceof ShadowRoot ? parent.host : parent;
+        }
+    }
+    return () => {
+        for (const one of hidden) {
+            one.removeAttribute('aria-hidden');
+        }
+        hidden.length = 0;
+    };
+};
+const composedContains = (outer, inner) => {
+    for (let node = inner; node; node = node instanceof ShadowRoot ? node.host : node.parentNode) {
+        if (node === outer) {
+            return true;
+        }
+    }
+    return false;
+};

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

@@ -9,9 +9,11 @@ declare const HelixHeadlessPopover_base: (new (...args: any[]) => import("@fusio
  * commands, `Select` holds options, and `Tooltip` holds a description. Popover
  * holds any content you put in it, so it has no keyboard handling of its own.
  *
- * The trigger is slotted and stays your own element. The popover writes nothing
- * onto it, including `aria-expanded`, `id`, and `tabindex`, because changing
- * your markup after upgrade causes a React hydration mismatch.
+ * The trigger is slotted and stays your own element. A Helix trigger is told
+ * whether the popover is open inside its own shadow root. On a plain element,
+ * such as a `<button>`, the popover writes `aria-expanded` only once a reader
+ * has pressed it, which is after any hydration, and never where you wrote
+ * `aria-expanded` yourself. It writes nothing else onto your markup.
  *
  * The panel is in the top layer through the popover API, so it needs no
  * `z-index`, and an ancestor with `overflow: hidden`, `transform`, `filter`, or
@@ -28,7 +30,9 @@ declare const HelixHeadlessPopover_base: (new (...args: any[]) => import("@fusio
  *
  * `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 rest of the page is hidden from screen readers with `aria-hidden` while
+ * it is open, so the virtual cursor stays in the panel too. 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.
@@ -85,8 +89,9 @@ export declare class HelixHeadlessPopover extends HelixHeadlessPopover_base {
      */
     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.
+     * Keeps `Tab` inside the panel while it is open, marks the panel
+     * `aria-modal`, and hides the rest of the page from screen readers. A press
+     * outside and Escape still close it.
      */
     modal: boolean;
     protected readonly aria: AriaForwardController;
@@ -138,6 +143,26 @@ export declare class HelixHeadlessPopover extends HelixHeadlessPopover_base {
     show(): void;
     /** Closes the panel and puts focus back on the trigger. */
     hide(): void;
+    /**
+     * Closes the panel, giving focus back to the trigger where `giveBack` is set
+     * and focus is inside the panel that is going away. A popover dismissed by a
+     * press somewhere else has not taken focus with it, and pulling focus back to
+     * the trigger would move a reader who was already somewhere else on purpose.
+     */
+    private close;
+    /**
+     * Whether focus is in the panel, on the panel itself or on anything slotted
+     * into it. `deepActiveElement`, which walks into shadow roots:
+     * `document.activeElement` stops at the outermost host, so a popover living
+     * inside another component's shadow root would never see its own focus.
+     */
+    private get focusInside();
+    /**
+     * Whether the update under way closes the panel while focus is inside it,
+     * read before the panel is hidden and focus has fallen to the body.
+     */
+    private closingFromInside;
+    protected willUpdate(changed: PropertyValues): void;
     /**
      * Focus leaving the control closes the panel.
      *
@@ -149,10 +174,35 @@ export declare class HelixHeadlessPopover extends HelixHeadlessPopover_base {
      */
     private readonly handleFocusOut;
     connectedCallback(): void;
+    /**
+     * A press on the slotted trigger, heard on the host on the way down, before
+     * the trigger slot's own listener opens the panel and the update that
+     * schedules reads it in `tellTrigger`.
+     */
+    private readonly notePress;
     disconnectedCallback(): void;
     private readonly handleTriggerClick;
-    /** Tells a slotted trigger the disclosure state, by property. See `tellDisclosure`. */
+    /** Whether a reader has pressed the trigger, which is after any hydration. */
+    private pressed;
+    /** The plain trigger this popover writes `aria-expanded` on, once it may. */
+    private told;
+    /**
+     * Tells a slotted trigger the disclosure state.
+     *
+     * A Helix trigger by property, through `tellDisclosure`. A plain element,
+     * which has no shadow root to keep the state out of the markup, by
+     * `aria-expanded`, and only from a reader's first press on: by then a server
+     * or a framework has long finished writing the element, so the write cannot
+     * be a hydration mismatch. One that already carries `aria-expanded` is the
+     * consumer's to keep, and is left alone.
+     */
     private tellTrigger;
+    /** Whether the first update, which is the server's, has passed. */
+    private settled;
+    /** Shows the page again, while a modal panel has it hidden. */
+    private showOutside;
+    /** Hides the page outside a modal panel while it is open, and shows it again after. */
+    private hideAround;
     /**
      * Puts the panel where `open` says it should be, however it got there.
      *

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

@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 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';
+import { hideOutside } from '../hide-outside.js';
 let HelixHeadlessPopover = class HelixHeadlessPopover extends MixinControllerOpen(HelixElement) {
     constructor() {
         super(...arguments);
@@ -60,6 +61,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 +70,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 +88,8 @@ let HelixHeadlessPopover = class HelixHeadlessPopover extends MixinControllerOpe
                 this.show();
             }
         };
+        this.pressed = false;
+        this.settled = false;
     }
     get slotted() {
         return (this.renderRoot
@@ -99,33 +111,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

@@ -31,6 +31,20 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @cssproperty --progress-fraction - The value as a fraction of the range, 0 to 1. Pinned to 1 while indeterminate.
  */
 export declare class HelixHeadlessProgress extends HelixElement {
+    /**
+     * `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.
@@ -119,6 +133,12 @@ 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;
+    /**
+     * 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,21 +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 { customElement, HelixElement, hostAria, slottedWords } from '@fusion.dev/helix-core';
+import { customElement, formatNumber, 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);
-};
+const WHOLE_PERCENT = { maximumFractionDigits: 0, style: 'percent' };
 let HelixHeadlessProgress = class HelixHeadlessProgress extends HelixElement {
     constructor() {
         super(...arguments);
@@ -54,7 +43,15 @@ 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);
+    }
+    get text() {
+        const options = this.formatOptions;
+        return (this.valueText ||
+            (options && options.style !== 'percent'
+                ? formatNumber(Math.min(Math.max(this.value, this.range.min), this.range.max), this.locale, options)
+                : formatNumber(this.fraction, this.locale, options ?? WHOLE_PERCENT)));
     }
     render() {
         const fraction = this.indeterminate ? 1 : this.fraction;
@@ -69,11 +66,14 @@ 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
             >`
             : ''}`;
     }
 };
+__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,36 @@ 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;
+}
+/**
+ * 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,17 @@
 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 +19,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/root/qr-code-root.d.ts

@@ -28,11 +28,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,14 +42,18 @@ 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 {
     /**
@@ -112,10 +118,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()`.
      *