@fusion.dev/helix-headless 0.142.1 → 0.143.0

package/dist/lightbox/root/lightbox-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 { CommandController, customElement, FullscreenController, fillTemplate, HelixElement, hostAria, IdleController, inlineStep, keyClaimed, MixinControllerActive, MixinControllerOpen, resolveActiveItem, } from '@fusion.dev/helix-core';
+import { CommandController, customElement, deepActiveElement, deepContains, FullscreenController, fillTemplate, HelixElement, hostAria, IdleController, inlineStep, keyClaimed, lockScroll, MixinControllerActive, MixinControllerOpen, resolveActiveItem, unlockScroll, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { HelixHeadlessLightboxItem } from '../item/lightbox-item.js';
@@ -22,7 +22,7 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
             this.filled = full;
         });
         this.idle = new IdleController(this, () => this.idleDelay, (resting) => {
-            this.resting = resting;
+            this.resting = resting && !this.chromeHasFocus();
         });
         this.commands = new CommandController(this, {
             commands: {
@@ -45,6 +45,7 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
             this.relayNativeEvent(event);
         };
         this.handleKeydown = (event) => {
+            this.idle.stir();
             if (keyClaimed(event) || event.altKey || event.ctrlKey || event.metaKey) {
                 return;
             }
@@ -81,6 +82,10 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
             this.requestOpen(false);
         };
     }
+    chromeHasFocus() {
+        const active = deepActiveElement();
+        return this.knownChildren.some((child) => (child.slot === 'header' || child.slot === 'footer') && deepContains(child, active));
+    }
     get items() {
         return this.knownChildren.filter((child) => child instanceof HelixHeadlessLightboxItem);
     }
@@ -135,9 +140,19 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
         this.toggleState('idle', this.resting);
         this.say(changed);
     }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        unlockScroll(this);
+    }
     updated(changed) {
         super.updated(changed);
         this.mark();
+        if (this.open) {
+            lockScroll(this);
+        }
+        else {
+            unlockScroll(this);
+        }
         const dialog = this.dialog;
         if (!dialog) {
             return;
@@ -170,7 +185,13 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
         const current = resolveActiveItem(this.active, items);
         const at = current ? items.indexOf(current) : -1;
         this.announcement =
-            at === -1 ? '' : fillTemplate(this.statusLabel, { count: items.length, index: at + 1 });
+            at === -1 || !current
+                ? ''
+                : fillTemplate(this.statusLabel, {
+                    count: items.length,
+                    index: at + 1,
+                    label: current.label,
+                });
     }
     render() {
         return html `<dialog

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

@@ -24,7 +24,8 @@ declare const HelixHeadlessLineChart_base: typeof HelixElement & (new (...args:
  * render at 10px in a narrow chart and 43px in a wide one.
  *
  * The table is the accessible representation, and the drawing is `aria-hidden`.
- * Screen reader users get the numbers.
+ * Screen reader users get the numbers. The `summary` part names the chart, from
+ * `label` or the table's caption, and gives each series' latest reading.
  *
  * @since 0.1.0
  * @status stable
@@ -42,6 +43,7 @@ declare const HelixHeadlessLineChart_base: typeof HelixElement & (new (...args:
  * @csspart line - The line for one series.
  * @csspart mark - The invisible point the tooltip is anchored to.
  * @csspart plot - The drawing.
+ * @csspart summary - The chart's name and each series' latest reading, written as a sentence for screen readers. Hide it visually.
  * @csspart svg - The drawing surface the lines and areas sit on.
  * @csspart terminus - The mark on one series' last reading.
  * @csspart tooltip - The bubble, forwarded from `Tooltip`.
@@ -183,6 +185,16 @@ export declare class HelixHeadlessLineChart extends HelixHeadlessLineChart_base
      */
     private ends;
     protected render(): TemplateResult;
+    /**
+     * What a reader who cannot see the lines is told: the chart's name and the
+     * latest reading of each series.
+     *
+     * The latest, because where a series ended is the question a line over time
+     * is asked first, which is what `AreaChart` gives too. Each series' own last
+     * reading, so a series with a blank in the last row still says where it was.
+     * Written the way the table writes it, such as `$128k` for `128000`.
+     */
+    protected renderSummary(series: Series[]): TemplateResult;
     /**
      * The lines themselves, behind a seam the styled tier can move.
      *
@@ -235,7 +247,12 @@ export declare class HelixHeadlessLineChart extends HelixHeadlessLineChart_base
         x: number;
         y: number;
     }>): TemplateResult | typeof nothing;
-    /** One series, its wash first so the line is drawn over its own fill. */
+    /**
+     * One series, its wash first so the line is drawn over its own fill.
+     *
+     * Each reading sits at its own row, and the line breaks where a row has no
+     * reading: a line drawn across a blank claims a value nobody measured.
+     */
     protected renderSeries(one: Series, depth: number, x: (value: number) => number, y: (value: number) => number): TemplateResult;
     /**
      * The reading names, as HTML beside the drawing rather than inside it.

package/dist/line-chart/root/line-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, extent, HelixElement, linear, linePath, MixinChartSource, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, ticks, } from '@fusion.dev/helix-core';
+import { byRow, CHART_PLOT, customElement, drawTooltip, extent, HelixElement, linear, linePath, MixinChartSource, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, ticks, unbroken, } from '@fusion.dev/helix-core';
 import { html, nothing, svg } from 'lit';
 import { property } from 'lit/decorators.js';
 import '../../tooltip/index.js';
@@ -34,7 +34,7 @@ let HelixHeadlessLineChart = class HelixHeadlessLineChart extends MixinChartSour
             return [
                 {
                     index: seriesIndex(depth),
-                    x: (x(one.points.length - 1) / PLOT_WIDTH) * 100,
+                    x: (x(last.at) / PLOT_WIDTH) * 100,
                     y: (y(last.value) / PLOT_HEIGHT) * 100,
                 },
             ];
@@ -42,7 +42,7 @@ let HelixHeadlessLineChart = class HelixHeadlessLineChart extends MixinChartSour
     }
     render() {
         const series = this.series;
-        const readings = series[0]?.points.map((point) => point.label) ?? [];
+        const readings = series.length === 0 ? [] : this.sourceRows.map((row) => row.label);
         if (readings.length === 0) {
             return html `<div id=${CHART_PLOT} part="plot"></div>`;
         }
@@ -50,7 +50,25 @@ let HelixHeadlessLineChart = class HelixHeadlessLineChart extends MixinChartSour
         const y = linear(domain, [PLOT_HEIGHT, 0]);
         const slot = PLOT_WIDTH / readings.length;
         const x = linear([0, Math.max(readings.length - 1, 1)], [slot / 2, PLOT_WIDTH - slot / 2]);
-        return html `${this.renderPlot(series, x, y, domain)} ${this.renderLabels(readings)}`;
+        return html `${this.renderPlot(series, x, y, domain)} ${this.renderLabels(readings)}${this.renderSummary(series)}`;
+    }
+    renderSummary(series) {
+        const rows = this.sourceRows;
+        const columns = this.plottedColumns;
+        const latest = series.flatMap((one, depth) => {
+            const last = one.points.at(-1);
+            if (last === undefined) {
+                return [];
+            }
+            const text = rows[last.at]?.cells[columns[depth] ?? -1]?.text ?? String(last.value);
+            return [{ label: last.label, reading: `${one.name} ${text}` }];
+        });
+        const shared = latest.every((one) => one.label === latest[0]?.label);
+        const body = shared
+            ? `${latest[0]?.label ?? ''}: ${latest.map((one) => one.reading).join(', ')}`
+            : latest.map((one) => `${one.label}: ${one.reading}`).join('; ');
+        const named = this.named ? `${this.named}, ` : '';
+        return html `<p part="summary">${named}${body}.</p>`;
     }
     renderPlot(series, x, y, domain) {
         const floor = domain[0] <= 0 && domain[1] >= 0 ? y(0) : undefined;
@@ -72,11 +90,11 @@ let HelixHeadlessLineChart = class HelixHeadlessLineChart extends MixinChartSour
         viewBox="0 0 ${PLOT_WIDTH} ${PLOT_HEIGHT}"
         xmlns="http://www.w3.org/2000/svg"
       >
-        ${this.renderGridlines(x, y, domain, series[0]?.points.length ?? 0)}
+        ${this.renderGridlines(x, y, domain, this.readings)}
         ${floor === undefined
             ? nothing
             : svg `<line part="baseline" x1="0" x2=${PLOT_WIDTH} y1=${floor} y2=${floor} />`}
-        ${this.renderBand(series[0]?.points.length ?? 0)}
+        ${this.renderBand(this.readings)}
         ${this.renderGuide(x)}
         ${series.map((one, depth) => this.renderSeries(one, depth, x, y))}
       </svg>
@@ -122,15 +140,24 @@ let HelixHeadlessLineChart = class HelixHeadlessLineChart extends MixinChartSour
         ></span>`)}`;
     }
     renderSeries(one, depth, x, y) {
-        const points = one.points.map((point, index) => [x(index), y(point.value)]);
-        const path = linePath(points, this.curve ?? 'smooth');
-        if (path === '') {
+        const runs = unbroken(one)
+            .map((run) => {
+            const points = run.map((point) => [x(point.at), y(point.value)]);
+            return { path: linePath(points, this.curve ?? 'smooth'), points };
+        })
+            .filter((run) => run.path !== '');
+        if (runs.length === 0) {
             return html `${nothing}`;
         }
         const index = seriesIndex(depth);
-        const first = points[0];
-        const last = points.at(-1);
-        const wash = `${path}L${last[0]},${PLOT_HEIGHT}L${first[0]},${PLOT_HEIGHT}Z`;
+        const path = runs.map((run) => run.path).join('');
+        const wash = runs
+            .map((run) => {
+            const first = run.points[0];
+            const last = run.points.at(-1);
+            return `${run.path}L${last[0]},${PLOT_HEIGHT}L${first[0]},${PLOT_HEIGHT}Z`;
+        })
+            .join('');
         return svg `${this.area
             ? svg `<path
             d=${wash}
@@ -160,7 +187,7 @@ let HelixHeadlessLineChart = class HelixHeadlessLineChart extends MixinChartSour
         const domain = this.range(series);
         const scale = linear(domain, [PLOT_HEIGHT, 0]);
         const tops = series
-            .map((one) => one.points[at]?.value)
+            .map((one) => byRow(one, this.readings)[at]?.value)
             .filter((one) => one !== undefined)
             .map((one) => scale(one));
         const slot = 100 / this.readings;

package/dist/list/item/list-item.d.ts

@@ -6,11 +6,16 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  * @description
  * Provides layout and semantics. The row is a target only when you set `href`.
  *
- * **`href` makes the whole row a link.** The component wraps its own layout in
- * an `<a part="row">`, as `Tree.Item` does. An anchor of your own cannot wrap
- * slots it does not own. With the anchor, the whole row is a target, Enter
- * follows it, middle click opens a new tab, the status bar shows the
- * destination, and all of it works before JavaScript runs.
+ * **`href` makes the row a link.** The component wraps the leading content,
+ * the label, and the description in an `<a part="link">` inside the row, as
+ * `Tree.Item` does. An anchor of your own cannot wrap slots it does not own.
+ * With the anchor, the row is a target, Enter follows it, middle click opens a
+ * new tab, the status bar shows the destination, and all of it works before
+ * JavaScript runs.
+ *
+ * **The `end` slot sits beside the link, outside it**, so a button or a menu
+ * there is a control of its own: a click on it does not follow the link, and
+ * its name is not part of the link's.
  *
  * Client-side routing needs your own handling. A router cannot render its
  * anchor inside the shadow root, so to navigate without a page load, intercept
@@ -30,6 +35,7 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  * @slot end - Trailing content.
  * @slot start - Leading content, usually an icon or an avatar.
  *
+ * @csspart link - The link, when the row has `href`. It holds every region except `end`.
  * @csspart row - The row's layout. It sits inside the host so the host can carry a list marker.
  */
 export declare class HelixHeadlessListItem extends HelixElement {

package/dist/list/item/list-item.js

@@ -24,17 +24,16 @@ let HelixHeadlessListItem = class HelixHeadlessListItem extends HelixElement {
     render() {
         const content = html `${this.renderRail()}<slot name="start"></slot>
       <slot></slot>
-      <slot name="description"></slot>
-      <slot name="end"></slot>`;
+      <slot name="description"></slot>`;
         return this.href === ''
-            ? html `<div part="row">${content}</div>`
-            : html `<a
-          part="row"
+            ? html `<div part="row">${content}<slot name="end"></slot></div>`
+            : html `<div part="row"><a
+          part="link"
           href=${this.href}
           target=${this.target || nothing}
           rel=${this.rel || nothing}
           >${content}</a
-        >`;
+        ><slot name="end"></slot></div>`;
     }
 };
 __decorate([

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

@@ -20,6 +20,14 @@ declare const HelixHeadlessListbox_base: (new (...args: any[]) => import("@fusio
  * active option is where the keyboard is: the arrow keys move it, and
  * `aria-activedescendant` points to it while focus stays on the list.
  *
+ * The arrow keys, Home, End, PageUp and PageDown move the highlight, and typed
+ * letters move it to the next option whose words start with them. In a
+ * single-choice list the highlight is the choice unless `manual` is set; then
+ * Enter, Space or a click chooses. With `multiple`, Space toggles the
+ * highlighted option, Shift with an arrow adds the option it moves to, and
+ * Control+A or Command+A chooses every option, or none where all are chosen.
+ * In a filter field, Space, Home, End and letters edit the text.
+ *
  * @since 0.1.0
  * @status stable
  * @category forms
@@ -27,6 +35,7 @@ declare const HelixHeadlessListbox_base: (new (...args: any[]) => import("@fusio
  * @documentation https://fusion.dev/helix/components/listbox
  *
  * @slot - The options, and any groups of them.
+ * @slot feedback - The message that says what is wrong, for content richer than a string. It shows while there is a message.
  * @slot filter-icon - The icon in the filter field. Defaults to a magnifying glass.
  * @slot hint - The hint, for content richer than plain text.
  * @slot label - The label, for content richer than plain text.
@@ -99,6 +108,15 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
      * Placeholder text for the filter field.
      */
     filterLabel: string;
+    /**
+     * Stops the arrow keys from choosing each option they move to. Enter, Space
+     * or a click chooses the highlighted option.
+     *
+     * By default a single-choice list chooses as the arrows move, as a radio
+     * group does. Select and Time Input set this on the list in their panel, so
+     * a reader can move through the options before closing the panel on one.
+     */
+    manual: boolean;
     /**
      * Whether more than one option can be chosen.
      */
@@ -107,6 +125,18 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
      * Which option the keyboard is on, which is not what is chosen.
      */
     private activeValue;
+    /**
+     * Whether the highlight was cleared on purpose, so the filter does not put
+     * it back on the first match.
+     */
+    private parked;
+    /** The letters typed at the list, which move the highlight to a match. */
+    private readonly typeahead;
+    /**
+     * The values of the options seen on the last pass, so an option that leaves
+     * can be told apart from one that has not arrived yet.
+     */
+    private seen;
     /**
      * Whether the key being handled was forwarded rather than typed into this.
      *
@@ -150,6 +180,26 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
      */
     get selectedIndex(): number;
     set selectedIndex(at: number);
+    /**
+     * @internal Moves the highlight without choosing, for the control that owns
+     * this list: to the first or last option a reader can reach, to the chosen
+     * one (or the first where none is), or nowhere.
+     *
+     * Select opens its panel on the chosen option, or on the last one for
+     * ArrowUp, and Combobox moves the highlight off the list onto its create row.
+     */
+    highlight(where: 'first' | 'last' | 'none' | 'selected'): void;
+    /**
+     * @internal Moves the highlight to the option whose words start with the
+     * letters typed, and returns its value, or nothing where none matches.
+     *
+     * For a control that takes the letters while this list is not where focus
+     * is: Select's closed trigger chooses the option this returns, as a native
+     * `<select>` does.
+     */
+    typeaheadTo(key: string): string | undefined;
+    /** @internal Whether letters typed in the last moment are still one search. */
+    get typing(): boolean;
     /**
      * The kind of list, as the platform names it: `select-one` or
      * `select-multiple`.
@@ -196,8 +246,37 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
      * Space and Enter are how a multi-select list chooses, and they are also how
      * a single-select one confirms what the arrows already did, so they act
      * either way rather than being guarded on `multiple`.
+     *
+     * **A reader in a text field is typing.** That is a filter field of this
+     * list's own, or a combobox's field that forwards its keys through
+     * `navigate`. There a Space is a character, Home and End move the caret, and
+     * a letter is a letter. Measured before this: a Space typed into a filter,
+     * a combobox or a command palette chose the highlighted option and closed the
+     * panel, so a query of two words could not be typed.
      */
     private readonly handleKeydown;
+    /**
+     * Puts the highlight on an option, and chooses it where moving is choosing.
+     *
+     * Chosen on the way past only where moving is choosing. With `multiple` a
+     * reader passing over four options on the way to the fifth did not mean to
+     * pick all five, and with `manual` the owner has asked for the same.
+     *
+     * Nor where the keys were forwarded. A list with the focus on it selects as
+     * it moves, which is the pattern for a listbox; a combobox's arrows move the
+     * highlight and Enter takes it, which is the pattern for a combobox, and the
+     * two differ by exactly which element the reader is in. Measured before
+     * this: the first Down in a combobox committed the second option and shut the
+     * panel, one keystroke into the interaction.
+     */
+    private arrive;
+    /**
+     * How many rows PageUp and PageDown move: as many as the list shows at once.
+     *
+     * Measured off the rendered list and its first shown row. Where there is no
+     * layout to measure, as on a server or in a test double, it is ten.
+     */
+    private pageSize;
     /**
      * Runs the list's own key handling for a caller whose focus is elsewhere.
      *
@@ -215,8 +294,9 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
      * flag is set here rather than exposed as a property. The difference between
      * a listbox and a combobox is not a mode a consumer picks: it is which
      * element the reader's focus is in, and that is exactly what calling this
-     * rather than being typed into means. Enter and Space still choose, because
-     * those are the caller asking for the answer rather than for a move.
+     * rather than being typed into means. Enter still chooses, because that is
+     * the caller asking for the answer rather than for a move. Space, Home, End
+     * and letters are left to the caller's field, where they are typing.
      */
     navigate(event: KeyboardEvent): void;
     /**
@@ -236,6 +316,25 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
     reveal(): void;
     /** Hides what the filter excludes, and writes the rest onto the options. */
     private place;
+    /**
+     * Whether another Helix component renders this list and binds its value
+     * down, as Select, Combobox, Command and Time Picker do. That component seeds
+     * and corrects the value, so this list leaves both to it.
+     *
+     * By the tag rather than by `instanceof`, for the reason `optionsAmong`
+     * gives: a second copy of the library on a page is a second class.
+     */
+    private get owned();
+    /**
+     * Takes an option that has left the list out of the value.
+     *
+     * Only one that was here before: a value set ahead of its options, which a
+     * list loading them from a server does, is kept until they arrive. Measured
+     * before this: removing the chosen option left the list showing nothing
+     * chosen while its form still submitted the removed value. A native
+     * `<select>` drops it too, and sends no event for it.
+     */
+    private forgetRemoved;
     /** Scrolls the active option into view, which needs the rendered list to scroll. */
     private followActive;
     /** Reports the answer and the verdict on it. */
@@ -243,6 +342,16 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected willUpdate(changed: PropertyValues): void;
+    /**
+     * Takes `<helix-option selected>` as the list's default value, as a native
+     * `<select>` takes `<option selected>`.
+     *
+     * Only where the list declares no `default-value` of its own, which wins. A
+     * form reset returns to it, which is what `Option.defaultSelected` says.
+     * Read from the options once they are known, so a list served by a server
+     * shows the choice from hydration on.
+     */
+    private seedDeclared;
     /**
      * Where the reader is, and failing that where the answer is.
      *