@fusion.dev/helix-headless 0.142.1 → 0.144.0

package/dist/avatar/group/avatar-group.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, HelixElement, hostAria, reportRuntime } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, hostAria, reportRuntime, whenHydrated, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 export const FOLDS_UP_TO = 12;
@@ -12,6 +12,8 @@ let HelixHeadlessAvatarGroup = class HelixHeadlessAvatarGroup extends HelixEleme
     constructor() {
         super(...arguments);
         this.label = '';
+        this.overflowLabel = '{count} more';
+        this.folded = new WeakSet();
         this.warned = false;
     }
     get avatars() {
@@ -32,6 +34,7 @@ let HelixHeadlessAvatarGroup = class HelixHeadlessAvatarGroup extends HelixEleme
     }
     updated(changed) {
         super.updated(changed);
+        this.fold();
         const limit = this.max ?? 0;
         if (limit > FOLDS_UP_TO && this.avatars.length > limit && !this.warned) {
             this.warned = true;
@@ -44,10 +47,36 @@ let HelixHeadlessAvatarGroup = class HelixHeadlessAvatarGroup extends HelixEleme
             });
         }
     }
+    fold() {
+        const limit = this.max ?? 0;
+        const limited = limit > 0 && limit <= FOLDS_UP_TO;
+        for (const [index, avatar] of this.avatars.entries()) {
+            const past = limited && index >= limit;
+            if (past && !avatar.hidden) {
+                this.folded.add(avatar);
+                whenHydrated(avatar, () => {
+                    avatar.hidden = true;
+                });
+            }
+            else if (!past && this.folded.has(avatar)) {
+                this.folded.delete(avatar);
+                whenHydrated(avatar, () => {
+                    avatar.hidden = false;
+                });
+            }
+        }
+    }
     render() {
         const past = this.overflow;
         return html `<slot @slotchange=${() => this.requestUpdate()}></slot>
-      ${past > 0 ? html `<span part="overflow" aria-hidden="true">+${past}</span>` : ''}`;
+      ${past > 0
+            ? html `<span
+              part="overflow"
+              role="img"
+              aria-label=${this.overflowLabel.replace('{count}', String(past))}
+              >+${past}</span
+            >`
+            : ''}`;
     }
 };
 __decorate([
@@ -56,6 +85,9 @@ __decorate([
 __decorate([
     property({ reflect: true, type: Number })
 ], HelixHeadlessAvatarGroup.prototype, "max", void 0);
+__decorate([
+    property({ attribute: 'overflow-label' })
+], HelixHeadlessAvatarGroup.prototype, "overflowLabel", void 0);
 HelixHeadlessAvatarGroup = __decorate([
     customElement('helix-headless-avatar-group')
 ], HelixHeadlessAvatarGroup);

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

@@ -32,6 +32,17 @@ export declare const initialsOf: (name: string) => string;
  * @csspart initials - The initials shown when there is no usable image.
  */
 export declare class HelixHeadlessAvatar extends HelixElement {
+    /**
+     * How long, in milliseconds, a picture may take before the initials stand
+     * in for it while it loads.
+     *
+     * Absent keeps the picture's place empty until it arrives or fails. Set,
+     * the initials show once the wait is over and the picture
+     * replaces them when it arrives, so a slow connection shows who it is
+     * without a cached picture flashing initials first. Radix's `delayMs` is the
+     * same idea.
+     */
+    fallbackDelay?: number;
     /**
      * Name of the person or entity.
      *
@@ -46,7 +57,9 @@ export declare class HelixHeadlessAvatar extends HelixElement {
     src: string;
     /**
      * The image's state: `loading` while it is on its way, `loaded` once it
-     * arrives, or `error` when it fails and the initials replace it.
+     * arrives, or `error` when it fails and the initials replace it. An avatar
+     * with no `src` has no image to wait for, and reports `error` as well, since
+     * the initials are what it shows.
      *
      * Read-only to a consumer: it is a report rather than a setting, and the same
      * report `Image` gives, for the same reason. `load` and `error` fire once, so
@@ -63,10 +76,13 @@ export declare class HelixHeadlessAvatar extends HelixElement {
      * report waits for the event it reports, below.
      */
     private broken;
+    /** The wait `fallback-delay` asks for, which has run out for the picture loading now or not. */
+    private readonly wait;
     private readonly handleError;
     private readonly handleLoad;
     protected willUpdate(changed: PropertyValues): void;
     protected firstUpdated(changed: PropertyValues): void;
+    private startWait;
     protected updated(changed: PropertyValues): void;
     protected render(): TemplateResult;
     /**

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

@@ -4,8 +4,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, HelixElement, hostAria } from '@fusion.dev/helix-core';
-import { html } from 'lit';
+import { customElement, DelayController, HelixElement, hostAria } from '@fusion.dev/helix-core';
+import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 export const initialsOf = (name) => {
     const words = name.trim().split(/\s+/).filter(Boolean);
@@ -24,6 +24,7 @@ let HelixHeadlessAvatar = class HelixHeadlessAvatar extends HelixElement {
         this.src = '';
         this.status = 'loading';
         this.broken = false;
+        this.wait = new DelayController(this);
         this.handleError = (event) => {
             this.broken = true;
             this.status = 'error';
@@ -38,7 +39,7 @@ let HelixHeadlessAvatar = class HelixHeadlessAvatar extends HelixElement {
         super.willUpdate(changed);
         if (changed.has('src')) {
             this.broken = false;
-            this.status = 'loading';
+            this.status = this.src === '' && this.hasUpdated ? 'error' : 'loading';
         }
         hostAria(this.internals, {
             label: this.name,
@@ -47,6 +48,13 @@ let HelixHeadlessAvatar = class HelixHeadlessAvatar extends HelixElement {
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
+        if (this.src === '') {
+            setTimeout(() => {
+                if (this.src === '' && this.status === 'loading') {
+                    this.status = 'error';
+                }
+            });
+        }
         const image = this.serverRendered ? this.renderRoot.querySelector('img') : null;
         if (image?.complete) {
             const broken = image.naturalWidth === 0;
@@ -57,8 +65,16 @@ let HelixHeadlessAvatar = class HelixHeadlessAvatar extends HelixElement {
             });
         }
     }
+    startWait() {
+        this.wait.start(this.fallbackDelay !== undefined && this.src !== ''
+            ? Math.max(this.fallbackDelay, 0)
+            : undefined);
+    }
     updated(changed) {
         super.updated(changed);
+        if (changed.has('src') || changed.has('fallbackDelay')) {
+            this.startWait();
+        }
         if (changed.has('status')) {
             if (this.status === 'loading') {
                 this.removeAttribute('data-status');
@@ -70,13 +86,15 @@ let HelixHeadlessAvatar = class HelixHeadlessAvatar extends HelixElement {
     }
     render() {
         if (this.src !== '' && !this.broken) {
-            return html `<img
-        part="image"
-        src=${this.src}
-        alt=""
-        @error=${this.handleError}
-        @load=${this.handleLoad}
-      />`;
+            const standIn = this.wait.elapsed && this.status === 'loading';
+            return html `${standIn ? this.renderInitials() : nothing}<img
+          part="image"
+          src=${this.src}
+          alt=""
+          ?hidden=${standIn}
+          @error=${this.handleError}
+          @load=${this.handleLoad}
+        />`;
         }
         return this.renderInitials();
     }
@@ -86,6 +104,9 @@ let HelixHeadlessAvatar = class HelixHeadlessAvatar extends HelixElement {
     </slot>`;
     }
 };
+__decorate([
+    property({ attribute: 'fallback-delay', type: Number })
+], HelixHeadlessAvatar.prototype, "fallbackDelay", void 0);
 __decorate([
     property()
 ], HelixHeadlessAvatar.prototype, "name", void 0);

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

@@ -18,6 +18,18 @@ import { type TemplateResult } from 'lit';
  * 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.
+ *
+ * **Put the badge inside the control to have its count read with the
+ * control's name**, as Web Awesome and Shoelace do: `<button>Inbox
+ * <helix-badge value="8" label="8 unread"></helix-badge></button>` is the
+ * button "Inbox 8 unread", and stays current as the count changes. The styled
+ * tier's `placement="inline"` draws the mark in the line for that case.
+ *
  * @since 0.1.0
  * @status stable
  * @category markers

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

@@ -36,7 +36,7 @@ let HelixHeadlessBadge = class HelixHeadlessBadge extends HelixElement {
         data-blank=${blank ? '' : nothing}
         data-single=${text.length <= 1 ? '' : nothing}
         role="status"
-        aria-label=${this.label !== '' && announced ? this.label : nothing}
+        aria-label=${announced ? this.label || text : nothing}
         >${blank ? html `<span aria-hidden="true">${text}</span>` : text}</span
       >`;
     }

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

@@ -15,8 +15,17 @@ declare const HelixHeadlessBarChart_base: typeof HelixElement & (new (...args: a
  * and 43px in a wide one, and SVG has no setting that keeps text at one size
  * the way `vector-effect` does for strokes.
  *
- * The table is the accessible representation, and the drawing is `aria-hidden`,
- * so screen reader users get the numbers themselves.
+ * The table is the accessible representation, and the drawing is hidden from
+ * screen readers, so they get the numbers themselves. The `summary` part names
+ * the chart, from `label` or the table's caption, and gives each series' highest
+ * reading.
+ *
+ * **The plot is read by key.** It takes focus, named by `label` or the caption.
+ * The arrows along the categories move from one to the next, which is left and
+ * right for columns and up and down for `orientation="horizontal"`. Home and
+ * End go to the first and the last, and the other pair of arrows moves among
+ * the series of a category. The tooltip follows, the `live` part says the
+ * reading in words, and Escape puts the tooltip away.
  *
  * The component writes the custom properties below with numbers it computes,
  * and the stylesheet that draws the chart reads them. Do not set them yourself.
@@ -39,8 +48,10 @@ declare const HelixHeadlessBarChart_base: typeof HelixElement & (new (...args: a
  * @csspart label - One category's name.
  * @csspart labels - The row of category names.
  * @csspart line - A series drawn as a line, named in `lines`.
+ * @csspart live - The readout: a polite live region that says the reading the keys moved to. Hide it visually.
  * @csspart mark - The invisible point the tooltip is anchored to.
- * @csspart plot - The drawing.
+ * @csspart plot - The drawing, which takes focus to be read by key.
+ * @csspart summary - The chart's name and each series' highest reading, written as a sentence for screen readers. Hide it visually.
  * @csspart svg - The drawing surface the bars and lines sit on.
  * @csspart tick - One number on an axis.
  * @csspart tooltip - The tooltip bubble, forwarded from `Tooltip`.
@@ -52,6 +63,7 @@ declare const HelixHeadlessBarChart_base: typeof HelixElement & (new (...args: a
  * @csspart tooltip-arrow-top - The arrow while the bubble is above the reading, on the bubble's bottom edge. Set together with `tooltip-arrow`.
  * @csspart tooltip-bottom - The bubble while it is below the reading. Set together with `tooltip`.
  * @csspart tooltip-cell - One column's name and value inside the tooltip.
+ * @csspart tooltip-cell-current - The cell the series keys rest on, while they rest there. Set alongside `tooltip-cell`.
  * @csspart tooltip-label - The reading's category name inside the tooltip.
  * @csspart tooltip-left - The bubble while it is left of the reading. Set together with `tooltip`.
  * @csspart tooltip-name - A column's name inside the tooltip.
@@ -87,6 +99,10 @@ export declare class HelixHeadlessBarChart extends HelixHeadlessBarChart_base {
      * and reach no reader through the table.
      */
     gridlines?: 'both' | 'category' | 'value';
+    /**
+     * The word the summary puts before each series' highest reading.
+     */
+    highestLabel: string;
     /**
      * The names of the series to draw as lines. The other series are drawn as
      * columns.
@@ -121,8 +137,8 @@ export declare class HelixHeadlessBarChart extends HelixHeadlessBarChart_base {
      * turns on its side, and neither is as readable as putting them down the left
      * where they read normally.
      *
-     * `orientation` and not `orientation`, which `Trend` uses in the same group for
-     * which way a number moved.
+     * Named `orientation` because `direction` is taken: `Trend` uses it in the
+     * same group for which way a number moved.
      */
     orientation?: 'horizontal';
     /**
@@ -182,6 +198,15 @@ export declare class HelixHeadlessBarChart extends HelixHeadlessBarChart_base {
      */
     protected willUpdate(changed: PropertyValues<this>): void;
     protected render(): TemplateResult;
+    /**
+     * What a reader who cannot see the columns is told: the chart's name and
+     * each series' highest reading.
+     *
+     * The highest, because which category leads is the question a bar chart is
+     * read for, and the table beside it has every other number. The reading is
+     * written the way the table writes it, such as `$128k` for `128000`.
+     */
+    protected renderSummary(series: Series[]): TemplateResult;
     /**
      * The columns themselves, behind a seam the styled tier can move.
      *

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

@@ -4,11 +4,15 @@ 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 { CHART_PLOT, customElement, drawTooltip, extent, HelixElement, linear, linePath, MixinChartSource, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, seriesNames, ticks, } from '@fusion.dev/helix-core';
+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 { html, nothing, svg } from 'lit';
 import { property } from 'lit/decorators.js';
 import '../../tooltip/index.js';
 let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource(HelixElement) {
+    constructor() {
+        super(...arguments);
+        this.highestLabel = 'Highest';
+    }
     get scaled() {
         return new Set(seriesNames(this.secondary));
     }
@@ -27,15 +31,16 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
     }
     render() {
         const series = this.series;
-        const categories = series[0]?.points.map((point) => point.label) ?? [];
+        const categories = series.length === 0 ? [] : this.sourceRows.map((row) => row.label);
         if (categories.length === 0) {
             return html `<div id=${CHART_PLOT} part="plot"></div>`;
         }
         const scaled = this.scaled;
         const own = (one) => scaled.has(one.name.trim().toLowerCase());
-        const values = series.flatMap((one) => one.points.map((point) => point.value));
+        const shown = series.filter((one) => this.showsSeries(one.name));
+        const values = shown.flatMap((one) => one.points.map((point) => point.value));
         const on = (which) => {
-            const found = series.filter(which).flatMap((one) => one.points.map((point) => point.value));
+            const found = shown.filter(which).flatMap((one) => one.points.map((point) => point.value));
             return found.length > 0 ? found : values.length > 0 ? values : [0];
         };
         const [low, high] = extent(scaled.size === 0 ? on(() => true) : on((one) => !own(one)));
@@ -49,12 +54,26 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
         const z = scaled.size > 0 ? linear(other, range) : undefined;
         const widest = z === undefined
             ? 0
-            : Math.max(...[...ticks(domain), ...ticks(other)].map((level) => level.toLocaleString().length));
+            : Math.max(...[...ticks(domain), ...ticks(other)].map((level) => formatNumbers(this.locale)(level).length));
         const lone = series.filter(own);
         const tint = lone.length === 1 && lone[0] !== undefined
             ? `--bar-chart-secondary: var(--chart-series-${seriesIndex(series.indexOf(lone[0]))})`
             : undefined;
-        return html `${z === undefined ? nothing : this.renderAxis(y, domain, 'primary', sideways, widest)}${this.renderPlot(series, categories, y, domain, floor, z)}${z === undefined ? nothing : this.renderAxis(z, other, 'secondary', sideways, widest, tint)}${this.renderLabels(categories)}`;
+        return html `${z === undefined ? nothing : this.renderAxis(y, domain, 'primary', sideways, widest)}${this.renderPlot(series, categories, y, domain, floor, z)}${z === undefined ? nothing : this.renderAxis(z, other, 'secondary', sideways, widest, tint)}${this.renderLabels(categories)}${this.renderSummary(series)}`;
+    }
+    renderSummary(series) {
+        const rows = this.sourceRows;
+        const columns = this.plottedColumns;
+        const highest = series.flatMap((one, depth) => {
+            const top = one.points.reduce((best, point) => (best === undefined || point.value > best.value ? point : best), undefined);
+            if (top === undefined) {
+                return [];
+            }
+            const text = rows[top.at]?.cells[columns[depth] ?? -1]?.text ?? String(top.value);
+            return [`${one.name} ${top.label} ${text}`];
+        });
+        const named = this.named ? `${this.named}. ` : '';
+        return html `<p id="helix-chart-summary" part="summary">${named}${this.highestLabel}: ${highest.join('; ')}.</p>`;
     }
     renderPlot(series, categories, y, domain, floor, z) {
         const sideways = this.orientation === 'horizontal';
@@ -64,8 +83,8 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
         const own = (one) => scaled.has(one.name.trim().toLowerCase());
         const against = (one) => z !== undefined && own(one) ? z : y;
         const columns = series
-            .map((one, index) => ({ one, tone: index }))
-            .filter(({ one }) => !lined.has(one.name.trim().toLowerCase()));
+            .map((one, index) => ({ one, slots: byRow(one, categories.length), tone: index }))
+            .filter(({ one }) => !lined.has(one.name.trim().toLowerCase()) && this.showsSeries(one.name));
         const stride = (slot * 0.72) / Math.max(columns.length, 1);
         const gap = columns.length > 1 ? stride * 0.08 : 0;
         const thickness = stride - gap;
@@ -95,11 +114,16 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
           />`;
         };
         return html `<div
-      aria-hidden="true"
+      aria-describedby=${this.named ? 'helix-chart-summary' : nothing}
+      aria-label=${this.named || nothing}
+      aria-labelledby=${this.named ? nothing : 'helix-chart-summary'}
       id=${CHART_PLOT}
       part="plot"
+      role="application"
+      tabindex="0"
     >
       <svg part="svg"
+        aria-hidden="true"
         data-mirror
         preserveAspectRatio="none"
         viewBox="0 0 ${PLOT_WIDTH} ${PLOT_HEIGHT}"
@@ -127,9 +151,14 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
               data-active=${this.pointer.at === index ? '' : nothing}
               part="group${this.pointer.at === index ? ' group-active' : ''}"
             >
-              ${columns.map(({ one, tone }, depth) => bar(one.points[index]?.value ?? 0, index, depth, tone, against(one)))}
+              ${columns.map(({ slots, one, tone }, depth) => {
+            const point = slots[index];
+            return point === undefined
+                ? nothing
+                : bar(point.value, index, depth, tone, against(one));
+        })}
             </g>`)}
-        ${series.map((one) => lined.has(one.name.trim().toLowerCase())
+        ${series.map((one) => lined.has(one.name.trim().toLowerCase()) && this.showsSeries(one.name)
             ? this.renderLine(one, series.indexOf(one), slot, against(one), sideways)
             : nothing)}
       </svg>
@@ -147,7 +176,7 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
       ${ticks(domain).map((level) => html `<span
             part="tick"
             style=${sideways ? `inset-inline-start: ${scale(level)}%` : `inset-block-start: ${scale(level)}%`}
-            >${level.toLocaleString()}</span
+            >${formatNumbers(this.locale)(level)}</span
           >`)}
     </div>`;
     }
@@ -184,13 +213,15 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
     </div>`;
     }
     renderLine(one, depth, slot, y, sideways) {
-        const points = one.points.map((point, index) => {
-            const across = index * slot + slot / 2;
+        const path = unbroken(one)
+            .map((run) => linePath(run.map((point) => {
+            const across = point.at * slot + slot / 2;
             const along = y(point.value);
             return sideways ? [along, across] : [across, along];
-        });
+        }), 'straight'))
+            .join('');
         return svg `<path
-      d=${linePath(points, 'straight')}
+      d=${path}
       data-series=${seriesIndex(depth)}
       part="line"
       style="--chart-series: var(--chart-series-${seriesIndex(depth)})"
@@ -200,15 +231,18 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
         const at = this.pointer.at;
         const series = this.series;
         if (at < 0 || series.length === 0) {
-            return drawTooltip(this.sourceRows, at, this.tag('tooltip'));
+            return drawTooltip(this.sourceRows, at, this.tag('tooltip'), undefined, undefined, this.pointer);
         }
-        const values = series.map((one) => one.points[at]?.value ?? 0);
-        const all = series.flatMap((one) => one.points.map((point) => point.value));
+        const shown = series.filter((one) => this.showsSeries(one.name));
+        const values = shown
+            .map((one) => byRow(one, this.readings)[at]?.value)
+            .filter((one) => one !== undefined);
+        const all = 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)];
         const sideways = this.orientation === 'horizontal';
         const scale = sideways ? linear(domain, [0, PLOT_HEIGHT]) : linear(domain, [PLOT_HEIGHT, 0]);
-        const ends = values.map((one) => scale(one));
+        const ends = (values.length > 0 ? values : [0]).map((one) => scale(one));
         const far = sideways ? Math.max(...ends) : Math.min(...ends);
         const slot = 100 / this.readings;
         const across = at * slot + slot / 2;
@@ -216,12 +250,15 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
             placement: sideways ? (this.pointer.mirrored ? 'left' : 'right') : 'top',
             x: sideways ? `${far}%` : `${across}%`,
             y: sideways ? `${across}%` : `${far}%`,
-        }, (cell) => this.seriesOf(cell));
+        }, (cell) => this.seriesOf(cell), this.pointer);
     }
 };
 __decorate([
     property()
 ], HelixHeadlessBarChart.prototype, "gridlines", void 0);
+__decorate([
+    property({ attribute: 'highest-label' })
+], HelixHeadlessBarChart.prototype, "highestLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessBarChart.prototype, "lines", void 0);

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

@@ -4,9 +4,13 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @summary A passage set off from the prose around it.
  *
  * @description
- * Renders a `<blockquote>` with a `<footer>` for the attribution, the structure
- * the HTML spec describes. The attribution sits outside the quoted text because
- * it is about the quotation.
+ * Renders a `<figure>` holding the `<blockquote>` and a `<figcaption>` 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.
  *
  * For a quotation inside a sentence, use `Quote`.
  *
@@ -19,8 +23,9 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @slot - The quoted passage.
  * @slot attribution - Who said it, and where.
  *
- * @csspart attribution - The footer carrying the source.
+ * @csspart attribution - The `<figcaption>` carrying the source.
  * @csspart blockquote - The quotation.
+ * @csspart figure - The `<figure>` holding the quotation and its attribution.
  */
 export declare class HelixHeadlessBlockquote extends HelixElement {
     /**
@@ -28,13 +33,13 @@ export declare class HelixHeadlessBlockquote extends HelixElement {
      */
     cite: string;
     /**
-     * Says on the footer whether there is an attribution in it.
+     * Says on the caption whether there is an attribution in it.
      *
-     * A `<footer>` with nothing in it is still a block in the quote's flow and
+     * A `<figcaption>` with nothing in it is still a block in the quote's flow and
      * still takes the container's gap, so every blockquote written without an
      * attribution reserved a full space below itself. There is no selector that
      * can ask, `slot:empty` being about a slot's fallback rather than its
-     * assigned nodes, so the component asks and says so on the footer inside this
+     * assigned nodes, so the component asks and says so on the caption inside this
      * shadow root: an attribute on the host is a change to markup the consumer
      * rendered, which React reports on hydration.
      */

package/dist/blockquote/root/blockquote-root.js

@@ -20,10 +20,12 @@ let HelixHeadlessBlockquote = class HelixHeadlessBlockquote extends HelixElement
         this.markEmpty();
     }
     render() {
-        return html `<blockquote part="blockquote" cite=${this.cite || nothing}>
-      <slot></slot>
-      <footer part="attribution"><slot name="attribution"></slot></footer>
-    </blockquote>`;
+        return html `<figure aria-labelledby="attribution" part="figure">
+      <blockquote part="blockquote" cite=${this.cite || nothing}><slot></slot></blockquote>
+      <figcaption id="attribution" part="attribution"
+        ><slot name="attribution" @slotchange=${() => this.markEmpty()}></slot
+      ></figcaption>
+    </figure>`;
     }
 };
 __decorate([

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

@@ -4,9 +4,10 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @summary Shows the path to the current page.
  *
  * @description
- * The host is the navigation landmark, so an `aria-label` on it names the
- * trail. When a page has more than one navigation landmark, screen reader users
- * choose between them by name.
+ * The host is the navigation landmark, named "Breadcrumb" by default. An
+ * `aria-label` on the host names the trail instead, and so does `label`. When a
+ * page has more than one navigation landmark, screen reader users choose
+ * between them by name.
  *
  * The `<ol>` has an explicit `role="list"`, because Safari removes list
  * semantics from a list with `list-style: none`, and the trail always hides its
@@ -30,6 +31,11 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @csspart list - The ordered list.
  */
 export declare class HelixHeadlessBreadcrumbs extends HelixElement {
+    /**
+     * The landmark's name, read by screen readers. An `aria-label` on the host
+     * wins over it.
+     */
+    label: string;
     protected willUpdate(changed: PropertyValues): void;
     protected render(): TemplateResult;
 }

package/dist/breadcrumbs/root/breadcrumbs-root.js

@@ -6,10 +6,15 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement, HelixElement, hostAria } from '@fusion.dev/helix-core';
 import { html } from 'lit';
+import { property } from 'lit/decorators.js';
 let HelixHeadlessBreadcrumbs = class HelixHeadlessBreadcrumbs extends HelixElement {
+    constructor() {
+        super(...arguments);
+        this.label = 'Breadcrumb';
+    }
     willUpdate(changed) {
         super.willUpdate(changed);
-        hostAria(this.internals, { role: 'navigation' });
+        hostAria(this.internals, { label: this.label, role: 'navigation' });
     }
     render() {
         return html `<ol part="list" role="list">
@@ -17,6 +22,9 @@ let HelixHeadlessBreadcrumbs = class HelixHeadlessBreadcrumbs extends HelixEleme
     </ol>`;
     }
 };
+__decorate([
+    property()
+], HelixHeadlessBreadcrumbs.prototype, "label", void 0);
 HelixHeadlessBreadcrumbs = __decorate([
     customElement('helix-headless-breadcrumbs')
 ], HelixHeadlessBreadcrumbs);