@fusion.dev/helix-headless 0.150.0 → 0.152.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

@@ -52,6 +52,9 @@ declare const HelixHeadlessAreaChart_base: typeof HelixElement & (new (...args:
  * compare the parts with each other; the scale then fits the largest part
  * rather than the total.
  *
+ * `value-axis` draws the scale's numbers beside the plot, at the levels
+ * `gridlines` rules: amounts in `locale`, or percentages under `share`.
+ *
  * The drawing is hidden from screen readers. The text summary gives the latest
  * reading's total and each part's share of it, and the table beside the chart
  * has every number.
@@ -65,13 +68,22 @@ declare const HelixHeadlessAreaChart_base: typeof HelixElement & (new (...args:
  * Every numeric column is a part, so leave a total column out of the table the
  * chart reads, or it is counted twice. A negative reading is drawn as zero.
  *
+ * **A tap shows the reading under it**, and keeps it until a tap lands
+ * elsewhere. `helix-reading-change` says each move of the reading, by pointer,
+ * 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.
+ *
  * @since 0.1.0
  * @status stable
  * @category charts
  * @aliases Stacked Area Chart, Composition Chart, Banded Chart
  * @documentation https://fusion.dev/helix/components/area-chart
  *
+ * @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 gridline - One rule across the plot, under `gridlines`.
  * @csspart guide - A rule down the reading a pointer is resting on.
@@ -83,6 +95,7 @@ declare const HelixHeadlessAreaChart_base: typeof HelixElement & (new (...args:
  * @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.
  * @csspart svg - The drawing surface the bands sit on.
+ * @csspart tick - One number on the axis, placed with `inset-block-start` at its level.
  * @csspart tooltip - The bubble, forwarded from `Tooltip`.
  * @csspart tooltip-anchor - The `Tooltip` element itself.
  * @csspart tooltip-arrow - The bubble's point, forwarded from `Tooltip`.
@@ -99,6 +112,8 @@ declare const HelixHeadlessAreaChart_base: typeof HelixElement & (new (...args:
  * @csspart tooltip-right - The bubble while it is right of the reading, beside `tooltip`.
  * @csspart tooltip-top - The bubble while it is above the reading, beside `tooltip`.
  * @csspart tooltip-value - A column's value inside the tooltip.
+ *
+ * @cssproperty --area-chart-axis - The width of the axis, in `ch`, set from the widest number on it. Written by the component on the axis.
  */
 export declare class HelixHeadlessAreaChart extends HelixHeadlessAreaChart_base {
     /**
@@ -106,6 +121,13 @@ export declare class HelixHeadlessAreaChart extends HelixHeadlessAreaChart_base
      * `registerWords('de', { 'helix-area-chart': { totalLabel: 'Summe' } })`.
      */
     static words: string;
+    /**
+     * Sends the reading's moves and presses as `helix-reading-change` and
+     * `helix-reading-press`, which the pointer hears. Here and not in a
+     * constructor, where the manifest's analyzer reads the assignment as a
+     * member of this class.
+     */
+    connectedCallback(): void;
     /**
      * How a band's edge gets from one reading to the next.
      *
@@ -161,6 +183,14 @@ export declare class HelixHeadlessAreaChart extends HelixHeadlessAreaChart_base
      * The name for the sum of the parts, shown in the tooltip and the summary.
      */
     totalLabel: string;
+    /**
+     * Draws the scale's numbers beside the plot, the `axis` part, at the levels
+     * `gridlines` rules: amounts, or percentages under `share`.
+     *
+     * Absent draws none: bands read as a composition need no numbers beside
+     * them, and the tooltip and the table hold every reading.
+     */
+    valueAxis: boolean;
     private warnedAboutNegatives;
     /** Whether the levels are ruled, which is every value but `category`. */
     protected get rulesValue(): boolean;
@@ -184,6 +214,12 @@ export declare class HelixHeadlessAreaChart extends HelixHeadlessAreaChart_base
      */
     private warnNegative;
     protected render(): TemplateResult;
+    /**
+     * The scale's numbers beside the plot, under `value-axis`: amounts written
+     * in the chart's locale, or percentages under `share`. A seam, so a
+     * subclass can write the numbers its own way, such as a currency.
+     */
+    protected renderAxis(y: (value: number) => number, domain: [number, number]): TemplateResult;
     /**
      * The bands, behind a seam the styled tier can move.
      *

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, formatNumbers, formatWords, HelixElement, 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, 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';
@@ -27,9 +27,16 @@ let HelixHeadlessAreaChart = class HelixHeadlessAreaChart extends MixinChartSour
         this.share = false;
         this.summaryLabel = '{reading}: {totalLabel} {total}; {shares}.';
         this.totalLabel = 'Total';
+        this.valueAxis = false;
         this.warnedAboutNegatives = false;
     }
     static { this.words = 'helix-area-chart'; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.pointer.onReading = (heard, detail) => this.dispatchEvent(heard === 'press'
+            ? new HelixReadingPressEvent(detail)
+            : new HelixReadingChangeEvent(detail));
+    }
     get rulesValue() {
         return this.gridlines !== undefined && this.gridlines !== 'category';
     }
@@ -100,9 +107,14 @@ let HelixHeadlessAreaChart = class HelixHeadlessAreaChart extends MixinChartSour
         const y = linear(domain, [PLOT_HEIGHT, 0]);
         const slot = PLOT_WIDTH / rows.length;
         const x = linear([0, Math.max(rows.length - 1, 1)], [slot / 2, PLOT_WIDTH - slot / 2]);
-        return html `${this.renderPlot(stack, rows.length, x, y, domain)}
+        return html `${this.valueAxis ? this.renderAxis(y, domain) : nothing}${this.renderPlot(stack, rows.length, x, y, domain)}
       ${this.renderLabels(rows.map((row) => row.label))} ${this.renderSummary(stack, rows)}`;
     }
+    renderAxis(y, domain) {
+        const locale = wordsLocale(this);
+        const percent = percentIn(locale);
+        return drawValueAxis(domain, (value) => (y(value) / PLOT_HEIGHT) * 100, this.share ? (value) => percent.format(value) : formatNumbers(locale), (widest) => `--area-chart-axis: ${widest}ch`);
+    }
     renderPlot(stack, count, x, y, domain) {
         const order = stack.layers.map((_, depth) => depth).reverse();
         return html `<div
@@ -249,6 +261,9 @@ __decorate([
     words,
     property({ attribute: 'total-label' })
 ], HelixHeadlessAreaChart.prototype, "totalLabel", void 0);
+__decorate([
+    property({ attribute: 'value-axis', reflect: true, type: Boolean })
+], HelixHeadlessAreaChart.prototype, "valueAxis", void 0);
 HelixHeadlessAreaChart = __decorate([
     customElement('helix-headless-area-chart')
 ], HelixHeadlessAreaChart);

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

@@ -30,13 +30,21 @@ declare const HelixHeadlessBarChart_base: typeof HelixElement & (new (...args: a
  * 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.
  *
+ * **A tap shows the reading under it**, and keeps it until a tap lands
+ * elsewhere. `helix-reading-change` says each move of the reading, by pointer,
+ * 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.
+ *
  * @since 0.1.0
  * @status stable
  * @category charts
  * @aliases Column Chart, Categorical Chart
  * @documentation https://fusion.dev/helix/components/bar-chart
  *
- * @csspart axis - The numbers of one scale, drawn only when `secondary` splits the chart into two scales.
+ * @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 axis - The numbers of one scale: the primary under `value-axis`, and both when `secondary` splits the chart into two scales.
  * @csspart band - The category band under the pointer.
  * @csspart bar - One column.
  * @csspart bar-wash-end - The far stop of a bar's gradient, where one is used.
@@ -83,6 +91,13 @@ export declare class HelixHeadlessBarChart extends HelixHeadlessBarChart_base {
      * `registerWords('de', { 'helix-bar-chart': { highestLabel: 'Höchster Wert' } })`.
      */
     static words: string;
+    /**
+     * Sends the reading's moves and presses as `helix-reading-change` and
+     * `helix-reading-press`, which the pointer hears. Here and not in a
+     * constructor, where the manifest's analyzer reads the assignment as a
+     * member of this class.
+     */
+    connectedCallback(): void;
     /**
      * Which gridlines are drawn across the plot, if any.
      *
@@ -199,6 +214,15 @@ export declare class HelixHeadlessBarChart extends HelixHeadlessBarChart_base {
      * the reading as the table writes it.
      */
     summaryLabel: string;
+    /**
+     * Draws the numbers of the scale the bars are measured on, the `axis` part,
+     * at the levels `gridlines` rules: down the side of columns, and along the
+     * bottom of bars under `orientation="horizontal"`.
+     *
+     * Absent draws none with one scale, since bars compared with each other need
+     * no numbers. With `secondary` both scales are drawn whatever this says.
+     */
+    valueAxis: boolean;
     /** The series names on the second scale, lowercased and trimmed. */
     private get scaled();
     /** The series names drawn as a line, lowercased and trimmed for matching. */
@@ -251,8 +275,8 @@ export declare class HelixHeadlessBarChart extends HelixHeadlessBarChart_base {
      * a small chart is furniture that makes the drawing smaller for no reading a
      * reader was going to do. With two scales that argument inverts: a reader
      * cannot tell there are two, cannot tell which series is on which, and cannot
-     * recover either from the picture. So this appears with `secondary` and never
-     * without it.
+     * recover either from the picture. So this appears with `secondary`, and
+     * with one scale only where `value-axis` asks for its numbers.
      *
      * **Beside the plot and not inside it.** Inside, the numbers are drawn over
      * the drawing, and a horizontal chart shows it immediately: its value axis
@@ -263,7 +287,7 @@ export declare class HelixHeadlessBarChart extends HelixHeadlessBarChart_base {
      * to the right.
      *
      * A column of the host grid instead, which the stylesheet grows only when
-     * `secondary` is set. That is what the property reflects for.
+     * `secondary` or `value-axis` is set. That is what the two reflect for.
      *
      * The primary hugs the edge the drawing starts at and the secondary the edge
      * it ends at: down the two sides for columns, along the bottom and top for

package/dist/bar-chart/root/bar-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 { byRow, CHART_PLOT, customElement, drawTooltip, extent, formatNumbers, formatWords, HelixElement, 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, 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';
@@ -15,8 +15,15 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
         this.highestLabel = 'Highest';
         this.stacked = false;
         this.summaryLabel = '{highestLabel}: {readings}.';
+        this.valueAxis = false;
     }
     static { this.words = 'helix-bar-chart'; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.pointer.onReading = (heard, detail) => this.dispatchEvent(heard === 'press'
+            ? new HelixReadingPressEvent(detail)
+            : new HelixReadingChangeEvent(detail));
+    }
     get scaled() {
         return new Set(seriesNames(this.secondary));
     }
@@ -61,14 +68,17 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
         const other = [Math.min(0, second), Math.max(0, top)];
         const z = scaled.size > 0 ? linear(other, range) : undefined;
         const format = formatNumbers(wordsLocale(this));
-        const widest = z === undefined
+        const levels = [...ticks(domain), ...(z === undefined ? [] : ticks(other))];
+        const widest = z === undefined && !this.valueAxis
             ? 0
-            : Math.max(...[...ticks(domain), ...ticks(other)].map((level) => format(level).length));
+            : Math.max(1, ...levels.map((level) => format(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)}${this.renderSummary(series)}`;
+        return html `${z === undefined && !this.valueAxis
+            ? 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;
@@ -309,6 +319,9 @@ __decorate([
     words,
     property({ attribute: 'summary-label' })
 ], HelixHeadlessBarChart.prototype, "summaryLabel", void 0);
+__decorate([
+    property({ attribute: 'value-axis', reflect: true, type: Boolean })
+], HelixHeadlessBarChart.prototype, "valueAxis", void 0);
 HelixHeadlessBarChart = __decorate([
     customElement('helix-headless-bar-chart')
 ], HelixHeadlessBarChart);

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);