@fusion.dev/helix-headless 0.151.0 → 0.153.0

package/dist/app-header/root/app-header-root.d.ts

@@ -19,6 +19,20 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * The page is the window unless `scroller` names the element that scrolls, for
  * an app shell whose content scrolls inside a container.
  *
+ * **Set `hide-on-scroll` for a bar that moves out of the way.** Scrolling down
+ * past the bar's own height hides it, and scrolling up shows it again, as does
+ * focus moving into it. The custom state `hidden` is on the host while it is
+ * hidden, and the styled tier slides a `sticky` bar up out of view.
+ *
+ * **Set `fold-below` to fold the middle region on a narrow screen.** Below that
+ * many pixels of the bar's own width, the middle region is hidden behind a
+ * toggle at the end of the bar, named by `menu-label`. The toggle says whether
+ * the region is open with `aria-expanded`, and the region opens below the row.
+ * Escape closes it and puts focus back on the toggle. The custom state
+ * `folded` is on the host while the bar is that narrow, and `open` while the
+ * folded region is open. A server serves the bar unfolded, and the browser
+ * folds it once it has measured it.
+ *
  * The host is the page's `banner` landmark. Placed inside `main`, `article`,
  * `aside`, `nav` or `section`, it is a plain box instead, as a native
  * `<header>` is there, so a header inside a card or a pane does not add a
@@ -36,6 +50,7 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  *
  * @slot - The middle region, usually a `Navigation`.
  * @slot end - Trailing content.
+ * @slot menu-icon - Replaces the glyph inside the toggle that opens a folded middle region.
  * @slot start - Leading content, usually a wordmark.
  *
  * @event {HelixScrolledEvent} helix-scrolled - Fired when the page crosses the
@@ -48,10 +63,20 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @csspart end - The trailing region.
  * @csspart row - The centered row inside the banner.
  * @csspart start - The leading region.
+ * @csspart toggle - The control that opens and closes the folded middle region, drawn while the bar is narrower than `fold-below`.
+ * @csspart toggle-mark - The glyph on the toggle, where none is slotted.
  *
+ * @cssstate folded - While the bar is narrower than `fold-below`, and the middle region is behind the toggle.
+ * @cssstate hidden - While `hide-on-scroll` has the bar out of the way, after a scroll down.
+ * @cssstate open - While the folded middle region is open.
  * @cssstate scrolled - While the page is scrolled down from the top, which is when the bar lifts off it.
  */
 export declare class HelixHeadlessAppHeader extends HelixElement {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-app-header': { menuLabel: 'Menü' } })`.
+     */
+    static words: string;
     /**
      * Where the middle region sits in the bar.
      *
@@ -68,6 +93,47 @@ export declare class HelixHeadlessAppHeader extends HelixElement {
      * the property carries the part's name, `content`.
      */
     contentAlign?: 'start';
+    /**
+     * The width of the bar, in pixels, below which the middle region folds behind
+     * a toggle. Unset, it never folds.
+     */
+    foldBelow?: number;
+    /**
+     * Hides the bar as the page scrolls down past it, and shows it again as the
+     * page scrolls up.
+     */
+    hideOnScroll: boolean;
+    /** Whether the bar is narrower than `fold-below`, which only the observer sets. */
+    private folded;
+    /** Whether the folded middle region is open. */
+    private unfolded;
+    /** Watches the bar's own width while `fold-below` is set. */
+    private widths;
+    /** Starts or stops watching the width, according to `fold-below`. */
+    private watchWidth;
+    /** Folds the middle region where the bar is narrower than `fold-below`. */
+    private fold;
+    /** Opens or closes the folded middle region. */
+    private readonly handleToggle;
+    /** Escape in the open region closes it and puts focus back on the toggle. */
+    private readonly handleKeydown;
+    /** Whether the bar is out of the way, under `hide-on-scroll`. */
+    private away;
+    /** Where the page was last scrolled to, to tell down from up. */
+    private lastY;
+    /** Shows a hidden bar again when focus moves into it. */
+    private readonly handleFocusIn;
+    /** Hides the bar or shows it again, under `hide-on-scroll`. */
+    private hide;
+    /**
+     * Hides the bar on a scroll down past its own height, and shows it on a
+     * scroll up. A few pixels either way are not a direction, so a bar does not
+     * flicker under a hand resting on a trackpad. Not while focus is in the bar
+     * or its folded region is open, which a reader is using.
+     */
+    private follow;
+    /** The name of the toggle that opens a folded middle region. */
+    menuLabel: string;
     /**
      * The id of the element whose scrolling lifts the bar, for an app shell that
      * scrolls a container instead of the window. Unset is the window.
@@ -111,7 +177,16 @@ export declare class HelixHeadlessAppHeader extends HelixElement {
     /** Whether this header is the page's banner, read from where it sits. */
     private readLandmark;
     disconnectedCallback(): void;
+    /** The `fold-below` the width watch was started for, so a change is measured at once. */
+    private watchedFor;
+    protected firstUpdated(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
+    /**
+     * The glyph on the toggle that opens a folded middle region, behind a seam:
+     * slot fallback, so a consumer replaces it by slotting, and a method, so a
+     * tier above replaces it by overriding.
+     */
+    protected renderMenuIcon(): TemplateResult;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/app-header/root/app-header-root.js

@@ -4,18 +4,41 @@ 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, elementById, HelixElement, HelixScrolledEvent, hostAria, } from '@fusion.dev/helix-core';
-import { html } from 'lit';
-import { property } from 'lit/decorators.js';
+import { customElement, deepActiveElement, deepContains, elementById, HelixElement, HelixScrolledEvent, hostAria, words, } from '@fusion.dev/helix-core';
+import { list } from '@fusion.dev/helix-icons';
+import { html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { inSectioningContent } from '../sectioning.js';
 let HelixHeadlessAppHeader = class HelixHeadlessAppHeader extends HelixElement {
     constructor() {
         super(...arguments);
+        this.hideOnScroll = false;
+        this.folded = false;
+        this.unfolded = false;
+        this.handleToggle = () => {
+            this.unfolded = !this.unfolded;
+        };
+        this.handleKeydown = (event) => {
+            if (event.key !== 'Escape' || !this.unfolded || event.defaultPrevented) {
+                return;
+            }
+            event.preventDefault();
+            this.unfolded = false;
+            void this.updateComplete.then(() => this.partNamed('toggle')?.focus());
+        };
+        this.away = false;
+        this.lastY = 0;
+        this.handleFocusIn = () => {
+            this.hide(false);
+        };
+        this.menuLabel = 'Menu';
         this.landmark = 'banner';
         this.scrolled = false;
         this.handleScroll = () => {
             const source = this.source ?? window;
             const y = source instanceof Element ? source.scrollTop : window.scrollY;
+            this.follow(y);
             const next = this.scrolled ? y > 2 : y > 8;
             if (next === this.scrolled) {
                 return;
@@ -25,6 +48,57 @@ let HelixHeadlessAppHeader = class HelixHeadlessAppHeader extends HelixElement {
             this.dispatchEvent(new HelixScrolledEvent({ scrolled: next }));
         };
     }
+    static { this.words = 'helix-app-header'; }
+    watchWidth() {
+        if (!this.foldBelow || typeof ResizeObserver === 'undefined') {
+            this.widths?.disconnect();
+            this.widths = undefined;
+            this.folded = false;
+            return;
+        }
+        if (this.widths) {
+            return;
+        }
+        this.widths = new ResizeObserver(([entry]) => {
+            const width = entry?.borderBoxSize?.[0]?.inlineSize ?? entry?.contentRect.width ?? 0;
+            if (width > 0) {
+                this.fold(width);
+            }
+        });
+        this.widths.observe(this);
+    }
+    fold(width) {
+        const folded = this.foldBelow !== undefined && width < this.foldBelow;
+        if (folded !== this.folded) {
+            this.folded = folded;
+            this.unfolded = false;
+        }
+    }
+    hide(away) {
+        if (away === this.away) {
+            return;
+        }
+        this.away = away;
+        this.toggleState('hidden', away);
+    }
+    follow(y) {
+        const moved = y - this.lastY;
+        this.lastY = y;
+        if (!this.hideOnScroll) {
+            this.hide(false);
+            return;
+        }
+        const height = this.getBoundingClientRect().height;
+        if (y <= height) {
+            this.hide(false);
+        }
+        else if (moved > 4 && !this.unfolded && !deepContains(this, deepActiveElement())) {
+            this.hide(true);
+        }
+        else if (moved < -4) {
+            this.hide(false);
+        }
+    }
     findSource() {
         return (this.scroller ? elementById(this, this.scroller) : null) ?? window;
     }
@@ -44,6 +118,8 @@ let HelixHeadlessAppHeader = class HelixHeadlessAppHeader extends HelixElement {
     willUpdate(changed) {
         super.willUpdate(changed);
         hostAria(this.internals, { role: this.landmark });
+        this.toggleState('folded', this.folded);
+        this.toggleState('open', this.folded && this.unfolded);
     }
     connectedCallback() {
         super.connectedCallback();
@@ -54,6 +130,11 @@ let HelixHeadlessAppHeader = class HelixHeadlessAppHeader extends HelixElement {
             }
         });
         this.listen();
+        this.addEventListener('focusin', this.handleFocusIn);
+        this.addEventListener('keydown', this.handleKeydown);
+        if (this.hasUpdated) {
+            this.watchWidth();
+        }
     }
     readLandmark() {
         this.landmark = inSectioningContent(this) ? '' : 'banner';
@@ -63,19 +144,57 @@ let HelixHeadlessAppHeader = class HelixHeadlessAppHeader extends HelixElement {
         super.disconnectedCallback();
         this.source?.removeEventListener('scroll', this.handleScroll);
         this.source = undefined;
+        this.removeEventListener('focusin', this.handleFocusIn);
+        this.removeEventListener('keydown', this.handleKeydown);
+        this.widths?.disconnect();
+        this.widths = undefined;
+    }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.watchedFor = this.foldBelow;
+        this.watchWidth();
     }
     updated(changed) {
         super.updated(changed);
         if (changed.has('scroller') && this.isConnected) {
             this.listen();
         }
+        if (this.foldBelow !== this.watchedFor) {
+            this.watchedFor = this.foldBelow;
+            this.watchWidth();
+            const width = this.getBoundingClientRect().width;
+            if (this.widths && width > 0) {
+                this.fold(width);
+            }
+        }
+        if (changed.has('hideOnScroll') && !this.hideOnScroll) {
+            this.hide(false);
+        }
+    }
+    renderMenuIcon() {
+        return html `<slot name="menu-icon">
+      <svg part="toggle-mark" fill="currentColor" viewBox=${list.viewBox} aria-hidden="true">
+        ${unsafeSVG(list.content)}
+      </svg>
+    </slot>`;
     }
     render() {
         return html `
       <div part="row">
         <div part="start"><slot name="start"></slot></div>
-        <div part="content"><slot></slot></div>
-        <div part="end"><slot name="end"></slot></div>
+        <div part="content" id="content" ?hidden=${this.folded && !this.unfolded}><slot></slot></div>
+        <div part="end"><slot name="end"></slot>${this.folded
+            ? html `<button
+                part="toggle"
+                type="button"
+                aria-controls="content"
+                aria-expanded=${this.unfolded ? 'true' : 'false'}
+                aria-label=${this.menuLabel}
+                @click=${this.handleToggle}
+              >
+                ${this.renderMenuIcon()}
+              </button>`
+            : nothing}</div>
       </div>
     `;
     }
@@ -83,6 +202,22 @@ let HelixHeadlessAppHeader = class HelixHeadlessAppHeader extends HelixElement {
 __decorate([
     property({ attribute: 'content-align', reflect: true })
 ], HelixHeadlessAppHeader.prototype, "contentAlign", void 0);
+__decorate([
+    property({ attribute: 'fold-below', type: Number })
+], HelixHeadlessAppHeader.prototype, "foldBelow", void 0);
+__decorate([
+    property({ attribute: 'hide-on-scroll', type: Boolean })
+], HelixHeadlessAppHeader.prototype, "hideOnScroll", void 0);
+__decorate([
+    state()
+], HelixHeadlessAppHeader.prototype, "folded", void 0);
+__decorate([
+    state()
+], HelixHeadlessAppHeader.prototype, "unfolded", void 0);
+__decorate([
+    words,
+    property({ attribute: 'menu-label' })
+], HelixHeadlessAppHeader.prototype, "menuLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessAppHeader.prototype, "scroller", void 0);

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

@@ -17,7 +17,7 @@ export interface AreaStack {
     /** Each column's own reading, not yet summed. */
     values: number[][];
 }
-declare const HelixHeadlessAreaChart_base: typeof HelixElement & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinChartSourceInterface);
+declare const HelixHeadlessAreaChart_base: typeof HelixElement & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinChartSourceInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinChartStatusInterface);
 /**
  * @summary A chart that shows how a total is made up over time, as bands stacked on one another.
  *
@@ -73,24 +73,39 @@ declare const HelixHeadlessAreaChart_base: typeof HelixElement & (new (...args:
  * tap or key, and `helix-reading-press` says a reading was clicked, tapped, or
  * pressed with Enter or Space, for a page that opens what a reading stands for.
  *
+ * **`data` takes the readings as data** where the page has no table to point
+ * `for` at, in a table's shape: the column headings, then one row per reading
+ * with its label first. A table is still the better source where the page can
+ * show one, since it reads before any script runs.
+ *
+ * **A chart with nothing to draw says so.** A table with no readings shows
+ * `empty-text`, "No readings", in the plot, and `loading` shows `loading-text`
+ * there until readings arrive. The `empty` and `loading` slots take markup in
+ * their place, such as a link to add the first reading.
+ *
  * @since 0.1.0
  * @status stable
  * @category charts
  * @aliases Stacked Area Chart, Composition Chart, Banded Chart
  * @documentation https://fusion.dev/helix/components/area-chart
  *
+ * @slot empty - Content shown in place of the drawing when the table has no readings, such as a link to add the first. Falls back to `empty-text`.
+ * @slot loading - Content shown in place of the drawing while `loading` is set and there are no readings yet. Falls back to `loading-text`.
+ *
  * @event {HelixReadingChangeEvent} helix-reading-change - The reading shown moved, or was put away: `index` is the row, or `-1` for none, with its `label`, the `series` the keys rest on, and the `pointerType` that moved it.
  * @event {HelixReadingPressEvent} helix-reading-press - A reading was clicked, tapped, or pressed with Enter or Space, with the same detail as `helix-reading-change`.
  *
  * @csspart area - One part's band.
  * @csspart axis - The numbers of the scale beside the plot, under `value-axis`.
  * @csspart baseline - The rule at zero, which is the floor of the drawing.
+ * @csspart empty - The words in place of the drawing when the table has no readings: the `empty` slot, falling back to `empty-text`. Not drawn while the table cannot be read yet, on the server and during hydration.
  * @csspart gridline - One rule across the plot, under `gridlines`.
  * @csspart guide - A rule down the reading a pointer is resting on.
  * @csspart label - One reading's name.
  * @csspart labels - The row of reading names.
  * @csspart line - The top edge of one part's band.
  * @csspart live - The readout: a polite live region that says the reading the keys moved to. Hide it visually.
+ * @csspart loading - The words in place of the drawing while `loading` is set and there are no readings: the `loading` slot, falling back to `loading-text`.
  * @csspart mark - The invisible point the tooltip is anchored to.
  * @csspart plot - The drawing, which takes focus to be read by key.
  * @csspart summary - The total and each part's share at the latest reading, written as a sentence for screen readers.

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

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { CHART_PLOT, customElement, drawTooltip, drawValueAxis, formatNumbers, formatWords, HelixElement, HelixReadingChangeEvent, HelixReadingPressEvent, linear, linePath, MixinChartSource, PLOT_HEIGHT, PLOT_WIDTH, reportRuntime, seriesIndex, ticks, words, wordsLocale, } from '@fusion.dev/helix-core';
+import { CHART_PLOT, customElement, drawTooltip, drawValueAxis, formatNumbers, formatWords, HelixElement, HelixReadingChangeEvent, HelixReadingPressEvent, linear, linePath, MixinChartSource, MixinChartStatus, PLOT_HEIGHT, PLOT_WIDTH, reportRuntime, seriesIndex, ticks, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { html, nothing, svg } from 'lit';
 import { property } from 'lit/decorators.js';
 import '../../tooltip/index.js';
@@ -20,7 +20,7 @@ const percentIn = (locale) => {
     }
     return found;
 };
-let HelixHeadlessAreaChart = class HelixHeadlessAreaChart extends MixinChartSource(HelixElement) {
+let HelixHeadlessAreaChart = class HelixHeadlessAreaChart extends MixinChartStatus(MixinChartSource(HelixElement)) {
     constructor() {
         super(...arguments);
         this.overlap = false;
@@ -96,7 +96,7 @@ let HelixHeadlessAreaChart = class HelixHeadlessAreaChart extends MixinChartSour
         const rows = this.sourceRows;
         const stack = this.stack;
         if (rows.length === 0 || stack.columns.length === 0) {
-            return html `<div id=${CHART_PLOT} part="plot"></div>`;
+            return html `<div id=${CHART_PLOT} part="plot">${this.renderStatus()}</div>`;
         }
         const top = this.overlap
             ? Math.max(0, ...stack.layers.flat())

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

@@ -1,7 +1,7 @@
 import { HelixElement, type Series } from '@fusion.dev/helix-core';
 import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 import '../../tooltip/index.js';
-declare const HelixHeadlessBarChart_base: typeof HelixElement & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinChartSourceInterface);
+declare const HelixHeadlessBarChart_base: typeof HelixElement & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinChartSourceInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinChartStatusInterface);
 /**
  * @summary A chart that draws a table's categories as columns.
  *
@@ -35,12 +35,25 @@ declare const HelixHeadlessBarChart_base: typeof HelixElement & (new (...args: a
  * tap or key, and `helix-reading-press` says a reading was clicked, tapped, or
  * pressed with Enter or Space, for a page that opens what a reading stands for.
  *
+ * **`data` takes the readings as data** where the page has no table to point
+ * `for` at, in a table's shape: the column headings, then one row per reading
+ * with its label first. A table is still the better source where the page can
+ * show one, since it reads before any script runs.
+ *
+ * **A chart with nothing to draw says so.** A table with no readings shows
+ * `empty-text`, "No readings", in the plot, and `loading` shows `loading-text`
+ * there until readings arrive. The `empty` and `loading` slots take markup in
+ * their place, such as a link to add the first reading.
+ *
  * @since 0.1.0
  * @status stable
  * @category charts
  * @aliases Column Chart, Categorical Chart
  * @documentation https://fusion.dev/helix/components/bar-chart
  *
+ * @slot empty - Content shown in place of the drawing when the table has no readings, such as a link to add the first. Falls back to `empty-text`.
+ * @slot loading - Content shown in place of the drawing while `loading` is set and there are no readings yet. Falls back to `loading-text`.
+ *
  * @event {HelixReadingChangeEvent} helix-reading-change - The reading shown moved, or was put away: `index` is the row, or `-1` for none, with its `label`, the `series` the keys rest on, and the `pointerType` that moved it.
  * @event {HelixReadingPressEvent} helix-reading-press - A reading was clicked, tapped, or pressed with Enter or Space, with the same detail as `helix-reading-change`.
  *
@@ -50,6 +63,7 @@ declare const HelixHeadlessBarChart_base: typeof HelixElement & (new (...args: a
  * @csspart bar-wash-end - The far stop of a bar's gradient, where one is used.
  * @csspart bar-wash-start - The stop of a bar's gradient at its base.
  * @csspart baseline - The line the columns stand on.
+ * @csspart empty - The words in place of the drawing when the table has no readings: the `empty` slot, falling back to `empty-text`. Not drawn while the table cannot be read yet, on the server and during hydration.
  * @csspart gridline - One gridline across the plot, drawn when `gridlines` is set.
  * @csspart group - One category's columns, together.
  * @csspart group-active - The group the tooltip describes. Set together with `group`.
@@ -57,6 +71,7 @@ declare const HelixHeadlessBarChart_base: typeof HelixElement & (new (...args: a
  * @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 loading - The words in place of the drawing while `loading` is set and there are no readings: the `loading` slot, falling back to `loading-text`.
  * @csspart mark - The invisible point the tooltip is anchored to.
  * @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.

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

@@ -4,12 +4,12 @@ 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, formatWords, HelixElement, HelixReadingChangeEvent, HelixReadingPressEvent, linear, linePath, MixinChartSource, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, seriesKey, seriesNames, ticks, unbroken, words, wordsLocale, } from '@fusion.dev/helix-core';
+import { byRow, CHART_PLOT, customElement, drawTooltip, extent, formatNumbers, formatWords, HelixElement, HelixReadingChangeEvent, HelixReadingPressEvent, linear, linePath, MixinChartSource, MixinChartStatus, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, seriesKey, seriesNames, ticks, unbroken, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { html, nothing, svg } from 'lit';
 import { property } from 'lit/decorators.js';
 import { stackEnds, stackedReadings, stackSpans } from '../stack.js';
 import '../../tooltip/index.js';
-let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource(HelixElement) {
+let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartStatus(MixinChartSource(HelixElement)) {
     constructor() {
         super(...arguments);
         this.highestLabel = 'Highest';
@@ -44,7 +44,7 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
         const series = this.series;
         const categories = series.length === 0 ? [] : this.sourceRows.map((row) => row.label);
         if (categories.length === 0) {
-            return html `<div id=${CHART_PLOT} part="plot"></div>`;
+            return html `<div id=${CHART_PLOT} part="plot">${this.renderStatus()}</div>`;
         }
         const scaled = this.scaled;
         const own = (one) => scaled.has(seriesKey(one.name));

package/dist/breadcrumbs/breadcrumb/breadcrumb.d.ts

@@ -1,5 +1,5 @@
 import { HelixElement } from '@fusion.dev/helix-core';
-import { type PropertyValues, type TemplateResult } from 'lit';
+import { type CSSResultGroup, type PropertyValues, type TemplateResult } from 'lit';
 /**
  * @summary One step in a breadcrumb trail.
  *
@@ -18,7 +18,10 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * including your own anchor.
  *
  * The current page is plain text, and `aria-current="page"` on the host conveys
- * the position.
+ * the position. In a trail where no crumb is `current`, the last one is said
+ * to be the current page, and keeps its link. An `aria-current` you write on
+ * the host, such as `aria-current="location"`, replaces the one the crumb
+ * gives itself.
  *
  * @since 0.1.0
  * @status stable
@@ -42,6 +45,7 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * the label and what follows it into one control.
  */
 export declare class HelixHeadlessBreadcrumb extends HelixElement {
+    static styles: CSSResultGroup;
     /**
      * Marks this item as the page you are on.
      */
@@ -65,6 +69,11 @@ export declare class HelixHeadlessBreadcrumb extends HelixElement {
      * of `breadcrumbs/links` lost its padding at once.
      */
     href?: string;
+    /**
+     * @internal Set by the trail: this is its last crumb and no crumb is
+     * `current`, so this one is said to be the current page.
+     */
+    implied: boolean;
     /**
      * The link's `rel` value, which describes how the linked page relates to this
      * one.

package/dist/breadcrumbs/breadcrumb/breadcrumb.js

@@ -6,23 +6,29 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement, HelixElement, hostAria, slotFilled, slotNamed, } from '@fusion.dev/helix-core';
 import { caretRight } from '@fusion.dev/helix-icons';
-import { html, nothing } from 'lit';
+import { css, html, nothing, } from 'lit';
 import { property } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 let HelixHeadlessBreadcrumb = class HelixHeadlessBreadcrumb extends HelixElement {
     constructor() {
         super(...arguments);
         this.current = false;
+        this.implied = false;
         this.rel = '';
         this.target = '';
         this.handleEnd = () => {
             this.markEnd();
         };
     }
+    static { this.styles = css `
+    :host(:first-child) [part='separator'] {
+      display: none;
+    }
+  `; }
     willUpdate(changed) {
         super.willUpdate(changed);
         hostAria(this.internals, { role: 'listitem' });
-        this.internals.ariaCurrent = this.current ? 'page' : null;
+        this.internals.ariaCurrent = this.current || this.implied ? 'page' : null;
     }
     updated(changed) {
         super.updated(changed);
@@ -60,6 +66,9 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessBreadcrumb.prototype, "href", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessBreadcrumb.prototype, "implied", void 0);
 __decorate([
     property()
 ], HelixHeadlessBreadcrumb.prototype, "rel", void 0);

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

@@ -1,6 +1,5 @@
 import { HelixElement } from '@fusion.dev/helix-core';
 import { nothing, type PropertyValues, type TemplateResult } from 'lit';
-import '../breadcrumb/breadcrumb.js';
 /** One step of a trail written as data, for `items`. */
 export interface BreadcrumbItem {
     /** The URL the step links to. The last step is the current page and takes none. */
@@ -26,7 +25,8 @@ export interface BreadcrumbItem {
  * markers.
  *
  * The items are slotted directly, so they are `<ol>` children in the flat tree,
- * and each item sets `role="listitem"` on itself.
+ * and each item sets `role="listitem"` on itself. Where no slotted crumb is
+ * `current`, the last one is said to be the current page.
  *
  * The trail does not measure itself, and you write its overflow in markup: put
  * the crumb that holds the folded items where the gap should appear.
@@ -41,6 +41,11 @@ export interface BreadcrumbItem {
  * to the first crumb it brought back. A new `items` folds again. Slotted crumbs
  * do not fold; write the folded crumb where the gap should be.
  *
+ * **Keyboard.** Each crumb with an `href` is a link and one tab stop, and
+ * Enter follows it. The current page and the separators are not in the tab
+ * order. In a folded trail, Enter or Space on the fold's button shows the
+ * whole trail and moves focus to the first crumb it brought back.
+ *
  * @since 0.1.0
  * @status stable
  * @category navigation
@@ -96,8 +101,15 @@ export declare class HelixHeadlessBreadcrumbs extends HelixElement {
     /** Shows the whole trail and moves focus to the first crumb it brought back. */
     private readonly expand;
     protected willUpdate(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
     /** How many crumbs drawn from `items` are folded away, or 0. */
     private get folded();
+    /**
+     * Says the last slotted crumb is the current page where none is marked
+     * `current`, as React Aria's trail does. Through a property the crumb does
+     * not reflect, so nothing is written onto your markup.
+     */
+    private readonly markLast;
     /** The crumbs `items` describes, each a crumb of this tier. */
     protected renderItems(): TemplateResult | typeof nothing;
     protected render(): TemplateResult;

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

@@ -4,12 +4,12 @@ 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, formatWords, HelixElement, hostAria, words } from '@fusion.dev/helix-core';
+import { customElement, formatWords, HelixElement, hostAria, whenHydrated, words, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { html } from 'lit/static-html.js';
-import '../breadcrumb/breadcrumb.js';
+import { HelixHeadlessBreadcrumb } from '../breadcrumb/breadcrumb.js';
 let HelixHeadlessBreadcrumbs = class HelixHeadlessBreadcrumbs extends HelixElement {
     constructor() {
         super(...arguments);
@@ -24,6 +24,15 @@ let HelixHeadlessBreadcrumbs = class HelixHeadlessBreadcrumbs extends HelixEleme
                 crumb?.shadowRoot?.querySelector('a, [part="link"]')?.focus();
             });
         };
+        this.markLast = () => {
+            const crumbs = (this.renderRoot.querySelector('slot:not([name])')?.assignedElements() ?? []).filter((one) => one instanceof HelixHeadlessBreadcrumb);
+            const marked = crumbs.some((one) => one.current);
+            crumbs.forEach((crumb, index) => {
+                whenHydrated(crumb, () => {
+                    crumb.implied = !marked && this.items.length === 0 && index === crumbs.length - 1;
+                });
+            });
+        };
     }
     static { this.words = 'helix-breadcrumbs'; }
     willUpdate(changed) {
@@ -33,6 +42,10 @@ let HelixHeadlessBreadcrumbs = class HelixHeadlessBreadcrumbs extends HelixEleme
             this.expanded = false;
         }
     }
+    updated(changed) {
+        super.updated(changed);
+        this.markLast();
+    }
     get folded() {
         const most = this.maxItems ?? 0;
         const count = this.items.length;
@@ -77,7 +90,7 @@ let HelixHeadlessBreadcrumbs = class HelixHeadlessBreadcrumbs extends HelixEleme
     }
     render() {
         return html `<ol part="list" role="list">
-      ${this.renderItems()}<slot></slot>
+      ${this.renderItems()}<slot @slotchange=${this.markLast}></slot>
     </ol>`;
     }
 };

package/dist/dialog/description.d.ts

@@ -1,3 +1,13 @@
+/**
+ * The elements at the start of a list that hold words and no control, up to the
+ * first one that is or holds a control.
+ *
+ * `skip` is an element whose words are said elsewhere, such as the heading
+ * that names a panel. It is left out, and an element holding it is read for
+ * its other children, so a card's title names the panel and the card's text
+ * describes it.
+ */
+export declare const wordsAmong: (elements: readonly Element[], skip?: Element | null) => Element[];
 /**
  * The elements at the start of a slot that hold words and no control, up to the
  * first one that is or holds a control.