@fusion.dev/helix-headless 0.146.0 → 0.148.0

package/dist/area-chart/root/area-chart-root.js

@@ -23,6 +23,7 @@ const percentIn = (locale) => {
 let HelixHeadlessAreaChart = class HelixHeadlessAreaChart extends MixinChartSource(HelixElement) {
     constructor() {
         super(...arguments);
+        this.overlap = false;
         this.share = false;
         this.totalLabel = 'Total';
         this.warnedAboutNegatives = false;
@@ -36,7 +37,7 @@ let HelixHeadlessAreaChart = class HelixHeadlessAreaChart extends MixinChartSour
     get stack() {
         const rows = this.sourceRows;
         const columns = this.plottedColumns;
-        const names = columns.map((column) => rows.find((row) => row.cells[column])?.cells[column]?.name ?? '');
+        const names = columns.map((column) => this.columnName(column));
         const values = columns.map((column, depth) => rows.map((row) => {
             if (!this.showsSeries(names[depth] ?? '')) {
                 return 0;
@@ -57,7 +58,7 @@ let HelixHeadlessAreaChart = class HelixHeadlessAreaChart extends MixinChartSour
         const layers = [];
         let running = rows.map(() => 0);
         for (const column of drawn) {
-            running = running.map((sum, index) => sum + (column[index] ?? 0));
+            running = this.overlap ? column : running.map((sum, index) => sum + (column[index] ?? 0));
             layers.push(running);
         }
         return {
@@ -88,7 +89,11 @@ let HelixHeadlessAreaChart = class HelixHeadlessAreaChart extends MixinChartSour
         if (rows.length === 0 || stack.columns.length === 0) {
             return html `<div id=${CHART_PLOT} part="plot"></div>`;
         }
-        const top = this.share ? 1 : Math.max(0, ...stack.totals);
+        const top = this.overlap
+            ? Math.max(0, ...stack.layers.flat())
+            : this.share
+                ? 1
+                : Math.max(0, ...stack.totals);
         const domain = [0, top > 0 ? top : 1];
         const y = linear(domain, [PLOT_HEIGHT, 0]);
         const slot = PLOT_WIDTH / rows.length;
@@ -181,9 +186,8 @@ let HelixHeadlessAreaChart = class HelixHeadlessAreaChart extends MixinChartSour
             ]
             : []);
         const named = this.named ? `${this.named}, ` : '';
-        return html `<p id="helix-chart-summary" part="summary">
-      ${named}${rows[last]?.label ?? ''}: ${this.totalLabel} ${format(total)}; ${shares.join(', ')}.
-    </p>`;
+        const words = `${named}${rows[last]?.label ?? ''}: ${this.totalLabel} ${format(total)}; ${shares.join(', ')}.`;
+        return html `<p id="helix-chart-summary" part="summary">${words}</p>`;
     }
     tallied(rows, stack) {
         const format = formatNumbers(this.locale);
@@ -213,7 +217,7 @@ let HelixHeadlessAreaChart = class HelixHeadlessAreaChart extends MixinChartSour
         return drawTooltip(rows, at, this.tag('tooltip'), {
             placement: 'top',
             x: `${at * slot + slot / 2}%`,
-            y: `${y(stack.layers.at(-1)?.[at] ?? 0)}%`,
+            y: `${y(Math.max(0, ...stack.layers.map((layer) => layer[at] ?? 0)))}%`,
         }, (cell) => this.seriesOf(cell), this.pointer);
     }
 };
@@ -223,6 +227,9 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessAreaChart.prototype, "gridlines", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessAreaChart.prototype, "overlap", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessAreaChart.prototype, "share", void 0);

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

@@ -15,7 +15,16 @@ export declare const initialsOf: (name: string) => string;
  * a person's name does not describe what the avatar stands for.
  *
  * `load` and `error` are re-dispatched from the host, because they are not
- * composed and would otherwise stop at the shadow boundary.
+ * composed and would otherwise stop at the shadow boundary. `status` says
+ * which of the two happened, for a listener that arrives after it, and the
+ * `loading`, `loaded` and `error` custom states say the same to a stylesheet.
+ *
+ * **On a server the avatar sends the picture's place**, an `<img>` that the
+ * browser fetches while it reads the page. The initials stand in only on the
+ * client: at once where the picture failed before the page hydrated, and after
+ * `fallback-delay` where it is still on its way. `load` or `error` for a
+ * picture that settled before hydration is sent a task after the avatar
+ * hydrates, so a page's own scripts are listening by then.
  *
  * @since 0.1.0
  * @status stable
@@ -30,6 +39,10 @@ export declare const initialsOf: (name: string) => string;
  *
  * @csspart image - The image, when one is loading or loaded.
  * @csspart initials - The initials shown when there is no usable image.
+ *
+ * @cssstate error - The picture failed, or there is none, and the initials show.
+ * @cssstate loaded - The picture arrived.
+ * @cssstate loading - The picture is on its way.
  */
 export declare class HelixHeadlessAvatar extends HelixElement {
     /**
@@ -43,6 +56,23 @@ export declare class HelixHeadlessAvatar extends HelixElement {
      * same idea.
      */
     fallbackDelay?: number;
+    /**
+     * The letters shown where no picture loaded, such as `GH`, in place of the
+     * ones taken from `name`.
+     *
+     * For a name whose initials are not its first and last letters, or an
+     * entity with a short mark of its own. Absent, the first letters of the
+     * first and last words of `name` are shown.
+     */
+    initials?: string;
+    /**
+     * When the browser fetches the picture: `lazy` waits until it is near the
+     * screen, as an `<img loading="lazy">` does, and `eager` fetches it at once.
+     *
+     * Absent is the browser's own default, which is `eager`. `lazy` suits a long
+     * list of people, most of them off screen.
+     */
+    loading?: 'eager' | 'lazy';
     /**
      * Name of the person or entity.
      *

package/dist/avatar/root/avatar-root.js

@@ -45,6 +45,9 @@ let HelixHeadlessAvatar = class HelixHeadlessAvatar extends HelixElement {
             label: this.name,
             role: this.name === '' ? '' : 'img',
         });
+        this.toggleState('error', this.status === 'error');
+        this.toggleState('loaded', this.status === 'loaded');
+        this.toggleState('loading', this.status === 'loading');
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
@@ -91,6 +94,7 @@ let HelixHeadlessAvatar = class HelixHeadlessAvatar extends HelixElement {
           part="image"
           src=${this.src}
           alt=""
+          loading=${this.loading ?? nothing}
           ?hidden=${standIn}
           @error=${this.handleError}
           @load=${this.handleLoad}
@@ -100,13 +104,19 @@ let HelixHeadlessAvatar = class HelixHeadlessAvatar extends HelixElement {
     }
     renderInitials() {
         return html `<slot>
-      <span part="initials" aria-hidden="true">${initialsOf(this.name)}</span>
+      <span part="initials" aria-hidden="true">${this.initials ?? initialsOf(this.name)}</span>
     </slot>`;
     }
 };
 __decorate([
     property({ attribute: 'fallback-delay', type: Number })
 ], HelixHeadlessAvatar.prototype, "fallbackDelay", void 0);
+__decorate([
+    property()
+], HelixHeadlessAvatar.prototype, "initials", void 0);
+__decorate([
+    property()
+], HelixHeadlessAvatar.prototype, "loading", void 0);
 __decorate([
     property()
 ], HelixHeadlessAvatar.prototype, "name", void 0);

package/dist/badge/count.d.ts

@@ -0,0 +1,14 @@
+/** Whether the value counts nothing, in which case there is no mark. */
+export declare const badgeBlank: (given: string) => boolean;
+/** Whether the count is past `max`, which the mark shows as `{max}+`. */
+export declare const badgeCapped: (given: string, max: number | undefined) => boolean;
+/**
+ * What the mark reads once the cap has been applied: the value as given, or
+ * written with `options` in `locale` where they are set and it is a number.
+ */
+export declare const badgeText: (given: string, max: number | undefined, locale: string, options: Intl.NumberFormatOptions | undefined) => string;
+/**
+ * What a reader hears for the mark: `label` with `{count}` filled, or the text
+ * alone, and nothing for a blank mark or an unnamed dot.
+ */
+export declare const badgeWords: (text: string, label: string, blank: boolean) => string;

package/dist/badge/count.js

@@ -0,0 +1,20 @@
+import { fillTemplate, formatNumber } from '@fusion.dev/helix-core';
+export const badgeBlank = (given) => given.trim() !== '' && Number(given) === 0;
+export const badgeCapped = (given, max) => {
+    const count = Number(given);
+    return max !== undefined && Number.isFinite(count) && count > max;
+};
+export const badgeText = (given, max, locale, options) => {
+    const write = (count) => options ? formatNumber(count, locale, options) : String(count);
+    if (badgeCapped(given, max)) {
+        return `${write(max)}+`;
+    }
+    const count = Number(given);
+    return options && given.trim() !== '' && Number.isFinite(count) ? write(count) : given;
+};
+export const badgeWords = (text, label, blank) => {
+    if (blank || (text === '' && label === '')) {
+        return '';
+    }
+    return fillTemplate(label, { count: text }) || text;
+};

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

@@ -1,5 +1,5 @@
 import { HelixElement } from '@fusion.dev/helix-core';
-import { type TemplateResult } from 'lit';
+import { type PropertyValues, type TemplateResult } from 'lit';
 /**
  * @summary A count or a dot pinned to the corner of another element.
  *
@@ -14,15 +14,20 @@ import { type TemplateResult } from 'lit';
  * - Any other value shows the value. Above `max`, the indicator shows `{max}+`,
  *   so its width stays the same as the count grows.
  *
+ * `format-options` writes a count with `Intl.NumberFormat`, in `locale`:
+ * `format-options='{"notation":"compact"}'` shows 1,200 as `1.2K`. Absent, the
+ * count is shown as it was given.
+ *
  * A count is announced from its own text, and `label` replaces that with a
  * fuller name, such as `4 unread`. A dot needs a `label`. Without one, the dot
  * is a colored circle that screen readers do not announce.
  *
- * **A badge wrapped around a control is not part of the control's name.** It
- * is a status of its own, read when it changes and when a reader moves to it,
- * so focusing a button inside a badge announces the button's name alone. A
- * reference from the control to the count would point into the badge's shadow
- * root, which the platform does not allow.
+ * **A badge wrapped around a control describes it.** The control is the first
+ * element in the badge that takes focus, and its description is the badge's
+ * words, so focusing `<helix-badge value="8" label="{count} unread"><button>Inbox
+ * </button></helix-badge>` announces "Inbox, button, 8 unread", current as the
+ * count changes. A control that already has a description keeps its own. The
+ * count is also a status of its own, read when it changes.
  *
  * **Put the badge inside the control to have its count read with the
  * control's name**, as Web Awesome and Shoelace do: `<button>Inbox
@@ -39,8 +44,20 @@ import { type TemplateResult } from 'lit';
  * @slot - The element being decorated.
  *
  * @csspart indicator - The count, or the dot when there is no value.
+ *
+ * @cssstate blank - The value is zero, so there is no mark.
+ * @cssstate capped - The count is past `max`, so the mark shows `{max}+`.
+ * @cssstate dot - There is no value, so the mark is a dot.
  */
 export declare class HelixHeadlessBadge extends HelixElement {
+    /**
+     * `Intl.NumberFormat` options a count is written with, such as
+     * `{"notation":"compact"}` for `1.2K`, written as JSON in the attribute.
+     *
+     * Absent, a count is shown as it was given. Text that is not a number is
+     * shown as it is either way.
+     */
+    formatOptions?: Intl.NumberFormatOptions;
     /**
      * The badge's name, read by screen readers.
      *
@@ -49,6 +66,12 @@ export declare class HelixHeadlessBadge extends HelixElement {
      * stays current as `value` changes, with no label of yours to keep in step.
      */
     label: string;
+    /**
+     * The locale a count is written in under `format-options`, such as `de`.
+     *
+     * Absent uses the runtime's own.
+     */
+    locale: string;
     /**
      * The largest number the badge shows.
      *
@@ -75,8 +98,36 @@ export declare class HelixHeadlessBadge extends HelixElement {
     private get given();
     /** Whether the value counts nothing, in which case there is no mark. */
     private get blank();
+    /** Whether the count is past `max`, which the mark shows as `{max}+`. */
+    private get capped();
     /** What the indicator reads, once the cap has been applied. */
     private get text();
+    /** What a reader hears for the mark, or nothing for a blank or unnamed one. */
+    private get words();
+    /** The control the badge describes, while it describes one. */
+    private described;
+    /**
+     * The first element the badge wraps that takes focus: one with a tab stop,
+     * or a component that hands its focus on.
+     */
+    private wrapped;
+    protected firstUpdated(changed: PropertyValues): void;
+    /**
+     * Points the wrapped control's description at the badge, which carries its
+     * words as its own label, or takes the pointer back.
+     *
+     * **The badge itself and not the count**, because a reference from the
+     * control into the badge's shadow root is one the platform drops, and the
+     * badge is in the control's own tree. A control the page described is left
+     * alone.
+     */
+    private describe;
+    private undescribe;
+    private readonly handleSlotchange;
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+    protected willUpdate(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/badge/root/badge-root.js

@@ -4,46 +4,115 @@ 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, HelixElement } from '@fusion.dev/helix-core';
+import { customElement, focusTarget, HelixElement } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
+import { badgeBlank, badgeCapped, badgeText, badgeWords } from '../count.js';
 let HelixHeadlessBadge = class HelixHeadlessBadge extends HelixElement {
     constructor() {
         super(...arguments);
         this.label = '';
+        this.locale = '';
         this.value = '';
+        this.handleSlotchange = () => {
+            this.describe();
+        };
     }
     get given() {
         return String(this.value ?? '');
     }
     get blank() {
-        return this.given.trim() !== '' && Number(this.given) === 0;
+        return badgeBlank(this.given);
+    }
+    get capped() {
+        return badgeCapped(this.given, this.max);
     }
     get text() {
-        const count = Number(this.given);
-        if (this.max !== undefined && Number.isFinite(count) && count > this.max) {
-            return `${this.max}+`;
+        return badgeText(this.given, this.max, this.locale, this.formatOptions);
+    }
+    get words() {
+        return badgeWords(this.text, this.label, this.blank);
+    }
+    wrapped() {
+        const found = this.renderRoot
+            .querySelector('slot:not([name])')
+            ?.assignedElements({ flatten: true })
+            .find((element) => element instanceof HTMLElement &&
+            (element.tabIndex >= 0 || element.shadowRoot?.delegatesFocus === true));
+        return found && focusTarget(found);
+    }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        requestAnimationFrame(() => this.describe());
+    }
+    describe() {
+        const words = this.words;
+        const control = words === '' ? undefined : this.wrapped();
+        if (this.described && this.described !== control) {
+            this.undescribe();
+        }
+        if (!control || !('ariaDescribedByElements' in control)) {
+            return;
+        }
+        const own = control.getAttribute('aria-describedby') || control.ariaDescribedByElements?.length;
+        if (control !== this.described && own) {
+            return;
+        }
+        this.internals.ariaLabel = words;
+        control.ariaDescribedByElements = [this];
+        this.described = control;
+    }
+    undescribe() {
+        if (this.described?.ariaDescribedByElements?.includes(this)) {
+            this.described.ariaDescribedByElements = null;
         }
-        return this.given;
+        this.described = undefined;
+        this.internals.ariaLabel = null;
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.undescribe();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.hasUpdated) {
+            this.describe();
+        }
+    }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        this.toggleState('capped', this.capped);
+        this.toggleState('dot', this.given.trim() === '');
+        this.toggleState('blank', this.blank);
+    }
+    updated(changed) {
+        super.updated(changed);
+        this.describe();
     }
     render() {
         const blank = this.blank;
         const text = this.text;
         const announced = !blank && (text !== '' || this.label !== '');
-        return html `<slot></slot>
+        return html `<slot @slotchange=${this.handleSlotchange}></slot>
       <span
         part="indicator"
         data-blank=${blank ? '' : nothing}
         data-single=${text.length <= 1 ? '' : nothing}
         role="status"
-        aria-label=${announced ? fillTemplate(this.label, { count: text }) || text : nothing}
+        aria-label=${announced ? this.words : nothing}
         >${blank ? html `<span aria-hidden="true">${text}</span>` : text}</span
       >`;
     }
 };
+__decorate([
+    property({ attribute: 'format-options', type: Object })
+], HelixHeadlessBadge.prototype, "formatOptions", void 0);
 __decorate([
     property()
 ], HelixHeadlessBadge.prototype, "label", void 0);
+__decorate([
+    property()
+], HelixHeadlessBadge.prototype, "locale", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessBadge.prototype, "max", void 0);

package/dist/bar-chart/root/bar-chart-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 { byRow, CHART_PLOT, customElement, drawTooltip, extent, formatNumbers, HelixElement, linear, linePath, MixinChartSource, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, seriesNames, ticks, unbroken, } from '@fusion.dev/helix-core';
+import { byRow, CHART_PLOT, customElement, drawTooltip, extent, formatNumbers, HelixElement, linear, linePath, MixinChartSource, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, seriesKey, seriesNames, ticks, unbroken, } from '@fusion.dev/helix-core';
 import { html, nothing, svg } from 'lit';
 import { property } from 'lit/decorators.js';
-import { stackEnds, stackSpans } from '../stack.js';
+import { stackEnds, stackedReadings, stackSpans } from '../stack.js';
 import '../../tooltip/index.js';
 let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource(HelixElement) {
     constructor() {
@@ -38,23 +38,13 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
             return html `<div id=${CHART_PLOT} part="plot"></div>`;
         }
         const scaled = this.scaled;
-        const own = (one) => scaled.has(one.name.trim().toLowerCase());
+        const own = (one) => scaled.has(seriesKey(one.name));
         const shown = series.filter((one) => this.showsSeries(one.name));
         const values = shown.flatMap((one) => one.points.map((point) => point.value));
         const lined = this.lined;
-        const readingsOf = (group) => {
-            if (!this.stacked) {
-                return group.flatMap((one) => one.points.map((point) => point.value));
-            }
-            const columns = group.filter((one) => !lined.has(one.name.trim().toLowerCase()));
-            const slots = columns.map((one) => byRow(one, categories.length));
-            return [
-                ...group
-                    .filter((one) => lined.has(one.name.trim().toLowerCase()))
-                    .flatMap((one) => one.points.map((point) => point.value)),
-                ...stackEnds(categories.map((_, at) => slots.map((one) => one[at]?.value))),
-            ];
-        };
+        const readingsOf = (group) => this.stacked
+            ? stackedReadings(group, categories.length, (one) => lined.has(seriesKey(one.name)))
+            : group.flatMap((one) => one.points.map((point) => point.value));
         const on = (which) => {
             const found = readingsOf(shown.filter(which));
             return found.length > 0 ? found : values.length > 0 ? values : [0];
@@ -96,11 +86,11 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
         const slot = 100 / categories.length;
         const lined = this.lined;
         const scaled = this.scaled;
-        const own = (one) => scaled.has(one.name.trim().toLowerCase());
+        const own = (one) => scaled.has(seriesKey(one.name));
         const against = (one) => z !== undefined && own(one) ? z : y;
         const columns = series
             .map((one, index) => ({ one, slots: byRow(one, categories.length), tone: index }))
-            .filter(({ one }) => !lined.has(one.name.trim().toLowerCase()) && this.showsSeries(one.name));
+            .filter(({ one }) => !lined.has(seriesKey(one.name)) && this.showsSeries(one.name));
         const abreast = this.stacked ? 1 : columns.length;
         const stride = (slot * 0.72) / Math.max(abreast, 1);
         const gap = abreast > 1 ? stride * 0.08 : 0;
@@ -178,7 +168,7 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
                     : bar(point.value, index, depth, tone, against(one));
             })}
             </g>`)}
-        ${series.map((one) => lined.has(one.name.trim().toLowerCase()) && this.showsSeries(one.name)
+        ${series.map((one) => lined.has(seriesKey(one.name)) && this.showsSeries(one.name)
             ? this.renderLine(one, series.indexOf(one), slot, against(one), sideways)
             : nothing)}
       </svg>
@@ -269,8 +259,9 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
             .map((one) => byRow(one, this.readings)[at]?.value)
             .filter((one) => one !== undefined);
         const values = this.stacked ? stackEnds([reached]) : reached;
+        const lined = this.lined;
         const all = this.stacked
-            ? stackEnds(Array.from({ length: this.readings }, (_, row) => shown.map((one) => byRow(one, this.readings)[row]?.value)))
+            ? stackedReadings(shown, this.readings, (one) => lined.has(seriesKey(one.name)))
             : shown.flatMap((one) => one.points.map((point) => point.value));
         const [low, high] = extent(all.length > 0 ? all : [0]);
         const domain = [Math.min(0, low), Math.max(0, high)];

package/dist/bar-chart/stack.d.ts

@@ -1,3 +1,4 @@
+import { type Series } from '@fusion.dev/helix-core';
 /** Where a column starts and ends along the measure, in the data's own units. */
 export type Span = readonly [from: number, to: number];
 /**
@@ -13,3 +14,12 @@ export declare const stackSpans: (values: readonly (number | undefined)[]) => (S
  * of negatives. `categories` holds each category's readings, one per column.
  */
 export declare const stackEnds: (categories: readonly (readonly (number | undefined)[])[]) => number[];
+/**
+ * The readings a stacked scale has to hold, over `count` categories: every
+ * reading of a series drawn as a line, which `lined` says, and the top and
+ * foot of each category's stack of the others.
+ *
+ * The plot's scale and the tooltip's placing ask the same question, and
+ * answered apart they disagreed about the lines.
+ */
+export declare const stackedReadings: (group: readonly Series[], count: number, lined: (one: Series) => boolean) => number[];

package/dist/bar-chart/stack.js

@@ -1,3 +1,4 @@
+import { byRow } from '@fusion.dev/helix-core';
 export const stackSpans = (values) => {
     let up = 0;
     let down = 0;
@@ -17,3 +18,10 @@ export const stackSpans = (values) => {
     });
 };
 export const stackEnds = (categories) => categories.flatMap((values) => stackSpans(values).flatMap((span) => (span === undefined ? [] : [span[1]])));
+export const stackedReadings = (group, count, lined) => {
+    const slots = group.filter((one) => !lined(one)).map((one) => byRow(one, count));
+    return [
+        ...group.filter(lined).flatMap((one) => one.points.map((point) => point.value)),
+        ...stackEnds(Array.from({ length: count }, (_, at) => slots.map((one) => one[at]?.value))),
+    ];
+};

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

@@ -1,16 +1,36 @@
 import { HelixElement } from '@fusion.dev/helix-core';
-import { type PropertyValues, type TemplateResult } from 'lit';
+import { type CSSResultGroup, type PropertyValues, type TemplateResult } from 'lit';
 /**
  * @summary A passage set off from the prose around it.
  *
  * @description
- * Renders a `<figure>` holding the `<blockquote>` and a `<figcaption>` for the
+ * Renders a figure holding the `<blockquote>` and a caption for the
  * attribution, the structure the HTML spec describes. The attribution sits
  * outside the quotation because it is about the quotation, and it names the
  * figure, so a screen reader reads the source as the figure's caption.
  *
- * The figure keeps the browser's default margins on this tier. Set
- * `::part(figure) { margin: 0 }` where they are unwanted.
+ * **The figure is a `<div role="figure">`**, so the headless tier draws no
+ * space around the quotation. A `<figure>` takes a 40px indent and a line of
+ * space above and below from the browser's own sheet, which every page had to
+ * reset. The `<blockquote>` keeps its own margins, as a bare one does. A
+ * screen reader meets the same figure, named by its caption.
+ *
+ * **A figure only while there is an attribution.** With nothing in the caption
+ * the figure has no name and nothing to say, so the role and its name are
+ * dropped and a reader meets the quotation alone. A server cannot see what is
+ * slotted, so it serves the figure, and the client drops it after hydration;
+ * an `attribution` written as words is served exactly.
+ *
+ * **Quotation marks follow the language**, under `marks`. The opening mark is
+ * the one the browser sets for a `<q>` in the element's language, „ under
+ * `lang="de"` and « under `lang="fr"`, and a `Quote` inside the passage takes
+ * the inner marks. The mark is drawn, not read: a screen reader hears the
+ * passage. A passage under `marks` that starts with a mark typed into the text
+ * would show two, and warns once, with the runtime kind `typed-marks`.
+ *
+ * **`cite` is the source's URL**, which the browser keeps and does not show.
+ * Words in it, such as the author's name, warn once, with the runtime kind
+ * `cite-not-url`.
  *
  * For a quotation inside a sentence, use `Quote`.
  *
@@ -21,17 +41,37 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @documentation https://fusion.dev/helix/components/blockquote
  *
  * @slot - The quoted passage.
- * @slot attribution - Who said it, and where.
+ * @slot attribution - Who said it, and where. Replaces the words of `attribution`.
  *
- * @csspart attribution - The `<figcaption>` carrying the source.
+ * @csspart attribution - The caption carrying the source.
  * @csspart blockquote - The quotation.
- * @csspart figure - The `<figure>` holding the quotation and its attribution.
+ * @csspart figure - The figure holding the quotation and its attribution, a `<div>` with `role="figure"` while the attribution has words.
  */
 export declare class HelixHeadlessBlockquote extends HelixElement {
+    static styles: CSSResultGroup;
     /**
-     * The URL of the source the passage came from.
+     * Who said it, and where, as words, such as "Maria Lopez, operations
+     * manager". The `attribution` slot replaces them, for markup such as a link.
+     *
+     * Words are served with the figure they name, where a server cannot see a
+     * slotted attribution.
+     */
+    attribution: string;
+    /**
+     * The URL of the source the passage came from. Who said it goes in
+     * `attribution`: a `cite` with words in it warns once, with the runtime kind
+     * `cite-not-url`.
      */
     cite: string;
+    /**
+     * Whether to draw an opening quotation mark before the passage, in the
+     * element's language. Leave the marks out of the text.
+     */
+    marks: boolean;
+    /** Whether this blockquote has said its passage starts with a typed mark, so it says so once. */
+    private warned;
+    /** Whether this blockquote has said its `cite` holds words, so it says so once. */
+    private citeWarned;
     /**
      * Says on the caption whether there is an attribution in it.
      *
@@ -44,8 +84,26 @@ export declare class HelixHeadlessBlockquote extends HelixElement {
      * rendered, which React reports on hydration.
      */
     private markEmpty;
+    /**
+     * Reads the passage for a mark typed at its start, which `marks` would
+     * double. Only the start: the mark drawn is an opening one.
+     */
+    private readonly readPassage;
+    /**
+     * Reads `cite` for words where the source's URL belongs, the common mistake
+     * of naming the author there. A URL holds no spaces, so words with a space
+     * between them are enough to tell.
+     */
+    private readCite;
+    protected firstUpdated(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
     protected render(): TemplateResult;
+    /**
+     * The caption, with the words of `attribution` as its slot's fallback,
+     * behind a seam a tier can move. The words are in an element, so the region
+     * counts them as its own.
+     */
+    protected renderAttribution(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {