@fusion.dev/helix-headless 0.151.0 → 0.153.0

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

@@ -7,6 +7,11 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * Draws two concentric circles: a track and a moving arc. The track shows the
  * arc as a proportion of a whole, and costs one element.
  *
+ * **For work whose length is known, use `Progress` with `shape="ring"`.** It
+ * draws the same ring filled to the value, says the value as a progress bar
+ * does, and says when the work is complete. A loader claims no proportion, so
+ * it takes no value.
+ *
  * **The center is a slot, empty by default.** Put your logo there once, where
  * your app wraps the loader. When nothing is slotted, nothing extra is
  * rendered.

package/dist/menu/root/menu-root.js

@@ -288,6 +288,8 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
                 <button
                   part="back"
                   type="button"
+                  role="menuitem"
+                  tabindex="-1"
                   aria-label=${this.backLabel}
                   @click=${() => this.leave()}
                 >

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

@@ -19,6 +19,13 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * one page can mark the section in view with `aria-current="location"`. Where
  * several are marked, `page` wins.
  *
+ * **The destinations can be a list.** Slot a `<ul>` or an `<ol>` of `<li>`
+ * elements, each holding a link, and a screen reader says how many there are
+ * and where each one is, as in Radix's `NavigationMenu.List`. The marker and
+ * the arrow keys work on the list items as they do on bare links. Give the
+ * list `role="list"` as well, since Safari drops the semantics of a list drawn
+ * without bullets.
+ *
  * Set `orientation="vertical"` to stack the destinations in a column, for a
  * sidebar.
  *
@@ -73,7 +80,10 @@ export declare class HelixHeadlessNavigation extends HelixElement {
      */
     orientation?: 'vertical';
     private current;
-    /** The destinations the consumer slotted. */
+    /**
+     * The destinations the consumer slotted, and the items of a slotted list in
+     * place of the list.
+     */
     private get items();
     /** Re-measures when the links change or hand over the current page. */
     private watch;

package/dist/navigation/root/navigation-root.js

@@ -8,6 +8,10 @@ import { AriaForwardController, customElement, focusableElements, focusItemOf, H
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 const FOCUSABLE = 'a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])';
+const isList = (element) => element.localName === 'ul' ||
+    element.localName === 'ol' ||
+    element.getAttribute('role') === 'list';
+const markOf = (item) => item.hasAttribute('aria-current') ? item : item.querySelector('[aria-current]');
 const navigable = (item) => {
     const control = () => item.navigationControl ??
         (item.matches(FOCUSABLE) ? item : focusableElements(item)[0]);
@@ -26,10 +30,11 @@ let HelixHeadlessNavigation = class HelixHeadlessNavigation extends HelixElement
             active: () => {
                 const items = this.items;
                 const marked = (item) => {
-                    const current = item.getAttribute('aria-current');
-                    return current !== null && current !== 'false';
+                    const current = markOf(item)?.getAttribute('aria-current');
+                    return current !== null && current !== undefined && current !== 'false';
                 };
-                return (items.find((item) => item.getAttribute('aria-current') === 'page') ?? items.find(marked));
+                return (items.find((item) => markOf(item)?.getAttribute('aria-current') === 'page') ??
+                    items.find(marked));
             },
             indicator: () => this.partNamed('indicator'),
             observe: () => this.items,
@@ -52,14 +57,14 @@ let HelixHeadlessNavigation = class HelixHeadlessNavigation extends HelixElement
     static { this.words = 'helix-navigation'; }
     get items() {
         const slot = this.renderRoot.querySelector('slot:not([name])');
-        return (slot?.assignedElements() ?? []);
+        return (slot?.assignedElements() ?? []).flatMap((one) => isList(one) ? [...one.children] : [one]);
     }
     watch() {
         this.current?.disconnect();
         this.indicator.place();
         this.current = new MutationObserver(() => this.indicator.place());
         for (const item of this.items) {
-            this.current.observe(item, { attributeFilter: ['aria-current'] });
+            this.current.observe(item, { attributeFilter: ['aria-current'], subtree: true });
         }
     }
     connectedCallback() {

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

@@ -29,6 +29,17 @@ declare const HelixHeadlessNotifications_base: (new (...args: any[]) => import("
  * the feed holds one page of a longer list, and each row says its place in the
  * whole of it.
  *
+ * **Keyboard.**
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | Down, Up | On a row, moves to the next or the previous row. |
+ * | Home, End | On a row, moves to the first or the last row. |
+ * | Page Down, Page Up | From anywhere in a row, moves to the next or the previous row. |
+ * | Control+End | From anywhere in the feed, moves to the first control after it on the page. |
+ * | Control+Home | From anywhere in the feed, moves to the nearest control before it on the page. |
+ * | Tab | Moves through the controls in a row, and on out of the feed. |
+ *
  * **`load-more` adds a button after the list** that sends `helix-load-more`,
  * for a feed that holds one page of a longer list. Append the next page, set
  * `loading` while it is on its way, and take `load-more` off once there is
@@ -246,6 +257,12 @@ export declare class HelixHeadlessNotifications extends HelixHeadlessNotificatio
      * is how the APG feed pattern moves on from inside an article.
      */
     private readonly handleKeydown;
+    /**
+     * `Control+End` and `Control+Home`, which leave the feed for the first
+     * control after it or the nearest one before it, as the APG feed pattern
+     * does. A feed of many rows is otherwise a long walk to get past.
+     */
+    private leave;
     /**
      * Tells each row whether it is the stop, and where it sits in the feed.
      *

package/dist/notifications/root/notifications-root.js

@@ -34,7 +34,11 @@ let HelixHeadlessNotifications = class HelixHeadlessNotifications extends MixinC
             }
         };
         this.handleKeydown = (event) => {
-            if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) {
+            if (event.defaultPrevented || event.altKey || event.metaKey) {
+                return;
+            }
+            if (event.ctrlKey) {
+                this.leave(event);
                 return;
             }
             const rows = this.reachable;
@@ -151,6 +155,22 @@ let HelixHeadlessNotifications = class HelixHeadlessNotifications extends MixinC
     rowFocused(target) {
         return this.reachable.find((row) => rowBox(row) === target);
     }
+    leave(event) {
+        if (event.key !== 'End' && event.key !== 'Home') {
+            return;
+        }
+        const after = event.key === 'End';
+        const outside = focusableElements(document.body).filter((one) => one.tabIndex >= 0 &&
+            !deepContains(this, one) &&
+            (this.compareDocumentPosition(one) &
+                (after ? Node.DOCUMENT_POSITION_FOLLOWING : Node.DOCUMENT_POSITION_PRECEDING)) !==
+                0);
+        const next = after ? outside[0] : outside.at(-1);
+        if (next) {
+            event.preventDefault();
+            next.focus();
+        }
+    }
     rove() {
         const rows = this.reachable;
         const stop = rovingStop(rows, this.stopRow);

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

@@ -11,9 +11,10 @@ declare const HelixHeadlessPopover_base: (new (...args: any[]) => import("@fusio
  *
  * The trigger is slotted and stays your own element. A Helix trigger is told
  * whether the popover is open inside its own shadow root. On a plain element,
- * such as a `<button>`, the popover writes `aria-expanded` only once a reader
- * has pressed it, which is after any hydration, and never where you wrote
- * `aria-expanded` yourself. It writes nothing else onto your markup.
+ * such as a `<button>`, the popover writes `aria-expanded`, from a frame after
+ * its own first render, or from the first press where that comes sooner. It
+ * never writes it where you wrote `aria-expanded` yourself, and writes nothing
+ * else onto your markup.
  *
  * The panel is in the top layer through the popover API, so it needs no
  * `z-index`, and an ancestor with `overflow: hidden`, `transform`, `filter`, or
@@ -36,6 +37,17 @@ declare const HelixHeadlessPopover_base: (new (...args: any[]) => import("@fusio
  *
  * The panel's name is `label` when you set it. Otherwise it is the first
  * heading in the panel, or the elements an `aria-labelledby` on the host names.
+ * A development build warns when a popover opens with nothing but
+ * `fallback-label` to name it.
+ *
+ * **Keyboard.** Opening moves focus to the first control in the panel, or to
+ * the panel where it holds none.
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | Enter, Space | On the trigger, opens the panel, or closes it while it is open. |
+ * | Escape | Closes the panel and puts focus back on the trigger. |
+ * | Tab, Shift+Tab | Moves through the controls in the panel. Leaving the panel and the trigger closes it. With `modal`, moves from the last control round to the first and from the first round to the last. |
  *
  * `arrow` draws a point on the panel's edge facing the trigger. The side the
  * panel landed on is on the host as `:state(placed-top)` and its kin, and the
@@ -198,7 +210,7 @@ export declare class HelixHeadlessPopover extends HelixHeadlessPopover_base {
     private readonly notePress;
     disconnectedCallback(): void;
     private readonly handleTriggerClick;
-    /** Whether a reader has pressed the trigger, which is after any hydration. */
+    /** Whether the trigger may be told, from a frame after the first render or a reader's press. */
     private pressed;
     /** The plain trigger this popover writes `aria-expanded` on, once it may. */
     private told;
@@ -207,9 +219,8 @@ export declare class HelixHeadlessPopover extends HelixHeadlessPopover_base {
      *
      * A Helix trigger by property, through `tellDisclosure`. A plain element,
      * which has no shadow root to keep the state out of the markup, by
-     * `aria-expanded`, and only from a reader's first press on: by then a server
-     * or a framework has long finished writing the element, so the write cannot
-     * be a hydration mismatch. One that already carries `aria-expanded` is the
+     * `aria-expanded`, from a frame after the first render or a reader's first
+     * press on, so a closed panel is said to be closed before anyone presses. One that already carries `aria-expanded` is the
      * consumer's to keep, and is left alone.
      */
     private tellTrigger;

package/dist/popover/root/popover-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 { AriaForwardController, anchorElement, arrowReach, CommandController, customElement, deepActiveElement, FocusScopeController, HelixElement, headingIn, MixinControllerOpen, OpenPhaseController, PopoverController, reflectElements, sideOf, tellDisclosure, words, } from '@fusion.dev/helix-core';
+import { AriaForwardController, anchorElement, arrowReach, auditName, CommandController, customElement, deepActiveElement, FocusScopeController, HelixElement, headingIn, MixinControllerOpen, OpenPhaseController, PopoverController, reflectElements, sideOf, tellDisclosure, words, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { hideOutside } from '../hide-outside.js';
@@ -144,6 +144,10 @@ let HelixHeadlessPopover = class HelixHeadlessPopover extends MixinControllerOpe
         super.connectedCallback();
         this.addEventListener('focusout', this.handleFocusOut);
         this.addEventListener('click', this.notePress, { capture: true });
+        void this.whenSettled.then(() => {
+            this.pressed = true;
+            this.tellTrigger();
+        });
     }
     disconnectedCallback() {
         super.disconnectedCallback();
@@ -180,6 +184,9 @@ let HelixHeadlessPopover = class HelixHeadlessPopover extends MixinControllerOpe
         super.updated(changed);
         this.tellTrigger();
         this.nameByHeading();
+        if (changed.has('open') && this.open) {
+            auditName(this, () => null, 'Give it a `label`, or a heading in the panel.', () => this.label !== '' || this.namedByHeading || headingIn(this.slotted) != null);
+        }
         if (this.settled) {
             this.hideAround();
         }

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

@@ -15,6 +15,15 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  *
  * The fill is a fraction of the track, written as a custom property.
  *
+ * **The reading is said in the words the bar would show**: a whole percentage
+ * of the range in `locale`, the reading `format-options` writes, or
+ * `value-text`, as `aria-valuetext` beside the number.
+ *
+ * **Words set in the default slot are drawn on the bar**, or in the middle of a
+ * ring, such as `62%` or `3 of 8`, and are what the bar says as its reading
+ * where `value-text` is not set. While there are any, the bar carries
+ * `:state(content)`, so a sheet can make room for them.
+ *
  * **Reaching `max` is said and sent.** When the value arrives at `max` from
  * below, the bar says `complete-label`, "Complete" by default, in a polite
  * `live` region and sends `helix-complete`, so a reader hears that the work is
@@ -28,10 +37,12 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @aliases Progress bar, Loading bar
  * @documentation https://fusion.dev/helix/components/progress
  *
+ * @slot - Words drawn on the bar, or in the middle of a ring, such as the reading. Said as the reading where `value-text` is not set.
  * @slot label - A visible label. Its words name the progress bar in place of `label`.
  *
  * @event {HelixCompleteEvent} helix-complete - The value reached `max` from below. Its `value` is `max`. Not sent for a bar that starts full.
  *
+ * @csspart content - The box holding the words of the default slot, over the track or in the middle of the ring. Carries `--progress-fraction`.
  * @csspart groove - The unfilled circle under the ring's filled arc.
  * @csspart indicator - The filled part that shows the work done.
  * @csspart live - A polite region that says `complete-label` when the work is done, rendered from that moment. Hide it visually.
@@ -41,6 +52,7 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @cssproperty --progress-fraction - The value as a fraction of the range, 0 to 1. Pinned to 1 while indeterminate.
  *
  * @cssstate complete - The value is at `max` and the bar is not indeterminate.
+ * @cssstate content - Words are set in the default slot.
  */
 export declare class HelixHeadlessProgress extends HelixElement {
     /**
@@ -67,7 +79,8 @@ export declare class HelixHeadlessProgress extends HelixElement {
      *
      * A `percent` style writes the share of the range, and any other the value
      * itself, so the example says "18 GB". Absent is a whole percentage. The
-     * words are announced as well as shown. `value-text` still wins.
+     * words are announced whether or not `show-value` shows them. `value-text`
+     * still wins.
      */
     formatOptions?: Intl.NumberFormatOptions;
     /**
@@ -173,6 +186,8 @@ export declare class HelixHeadlessProgress extends HelixElement {
     private get text();
     /** A label's words changed, so the name is written again. */
     private readonly renamed;
+    /** The words on the bar changed, so the reading is said again and the state set. */
+    private readonly reworded;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/progress/root/progress-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 { customElement, drawStatus, HelixCompleteEvent, HelixElement, hostAria, readingText, StatusController, slottedWords, words, wordsLocale, } from '@fusion.dev/helix-core';
+import { customElement, drawStatus, HelixCompleteEvent, HelixElement, hostAria, readingText, StatusController, slotFilled, slotNamed, slottedWords, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessProgress = class HelixHeadlessProgress extends HelixElement {
@@ -23,6 +23,10 @@ let HelixHeadlessProgress = class HelixHeadlessProgress extends HelixElement {
         this.renamed = () => {
             this.requestUpdate();
         };
+        this.reworded = () => {
+            this.toggleState('content', slotFilled(slotNamed(this.renderRoot, '')));
+            this.requestUpdate();
+        };
     }
     static { this.words = 'helix-progress'; }
     get complete() {
@@ -48,8 +52,8 @@ let HelixHeadlessProgress = class HelixHeadlessProgress extends HelixElement {
         this.internals.ariaValueNow = this.indeterminate
             ? null
             : String(Math.min(Math.max(this.value || min, min), max));
-        this.internals.ariaValueText =
-            this.valueText || (this.formatOptions !== undefined && !this.indeterminate ? this.text : null);
+        const shown = this.valueText || slottedWords(this, ['']);
+        this.internals.ariaValueText = this.indeterminate ? shown || null : shown || this.text;
         this.toggleState('complete', this.complete);
     }
     updated(changed) {
@@ -75,10 +79,14 @@ let HelixHeadlessProgress = class HelixHeadlessProgress extends HelixElement {
       <circle part="groove" />
       <circle part="indicator" pathLength="100" style="--progress-fraction: ${fraction}" />
     </svg>`;
+        const content = html `<span part="content" aria-hidden="true" style="--progress-fraction: ${fraction}"
+      ><slot @slotchange=${this.reworded}></slot
+    ></span>`;
         return html `<slot name="label" @slotchange=${this.renamed}></slot>${this.shape === 'ring'
-            ? ring
+            ? html `${ring}${content}`
             : html `<div part="track">
             <div part="indicator" style="--progress-fraction: ${fraction}"></div>
+            ${content}
           </div>`}
       ${this.showValue && !this.indeterminate
             ? html `<span part="value" aria-hidden="true"

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

@@ -24,7 +24,7 @@ export interface ScatterField {
     y: [number, number];
     yNames: string[];
 }
-declare const HelixHeadlessScatterChart_base: typeof HelixElement & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinChartSourceInterface);
+declare const HelixHeadlessScatterChart_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 whether two measures move together, with one point per row.
  *
@@ -71,17 +71,32 @@ declare const HelixHeadlessScatterChart_base: typeof HelixElement & (new (...arg
  * 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 Scatter Plot, XY Chart, Correlation Chart, Dot Plot
  * @documentation https://fusion.dev/helix/components/scatter-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 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 line across the plot, drawn when `gridlines` is set.
  * @csspart live - The readout: a polite live region that says the row 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 plane - The grid that holds the plot, both axes, and their names. It runs left to right on every page.
  * @csspart plot - The drawing, which takes focus to be read by key.

package/dist/scatter-chart/root/scatter-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, formatNumbers, formatWords, HelixElement, HelixReadingChangeEvent, HelixReadingPressEvent, isRtl, linear, MixinChartSource, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, ticks, words, wordsLocale, } from '@fusion.dev/helix-core';
+import { CHART_PLOT, customElement, drawTooltip, extent, formatNumbers, formatWords, HelixElement, HelixReadingChangeEvent, HelixReadingPressEvent, isRtl, linear, MixinChartSource, MixinChartStatus, PLOT_HEIGHT, PLOT_WIDTH, 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';
@@ -33,7 +33,7 @@ const nice = ([low, high]) => {
     const round = (value) => Number(value.toPrecision(12));
     return [round(Math.floor(low / step) * step), round(Math.ceil(high / step) * step)];
 };
-let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinChartSource(HelixElement) {
+let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinChartStatus(MixinChartSource(HelixElement)) {
     constructor() {
         super(...arguments);
         this.correlationLabel = 'correlation';
@@ -140,7 +140,7 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
         this.drawn = field.points;
         if (field.points.length === 0) {
             return html `<div dir="ltr" part="plane">
-        <div id=${CHART_PLOT} part="plot"></div>
+        <div id=${CHART_PLOT} part="plot">${this.renderStatus()}</div>
       </div>`;
         }
         const format = formatNumbers(wordsLocale(this));

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

@@ -30,6 +30,21 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * `collapsed-size` keeps a sliver of the pane visible, such as a tab strip.
  * Collapsing overrides `min` and `max`.
  *
+ * Set `primary` to the pane that keeps its size when the splitter's own size
+ * changes, such as a sidebar beside a window being resized. The other pane
+ * takes all of the change, as Web Awesome's split panel does. Without it,
+ * both panes keep their share.
+ *
+ * **Keyboard.** The divider is one tab stop.
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | Left, Right | Moves a side-by-side divider by `step`. On a right-to-left page, Left moves it toward the end. |
+ * | Up, Down | Moves a stacked divider by `step`. |
+ * | Home, End | Moves the divider to its bounds. |
+ * | Enter | Collapses the start pane, and opens it again. |
+ * | F6 | Moves focus from one pane to the first control in the other, and from the divider to the start pane. |
+ *
  * @since 0.1.0
  * @status stable
  * @category layout
@@ -191,6 +206,32 @@ export declare class HelixHeadlessSplitter extends HelixElement {
      */
     get position(): number;
     set position(next: number);
+    /**
+     * The pane that keeps its size when the splitter's own size changes. The
+     * other pane takes all of the change. Unset, both keep their share.
+     */
+    primary?: 'end' | 'start';
+    /** Watches this element's length along its axis while `primary` is set. */
+    private lengths;
+    /** The length along the axis last seen, in pixels. */
+    private length;
+    /**
+     * Starts or stops watching the length, according to `primary`, and holds
+     * the primary pane's size in pixels as the length changes.
+     */
+    private watchLength;
+    /**
+     * Moves the divider so the primary pane keeps the pixels it had, as the
+     * splitter's length goes from the one last seen to `length`. Not while a
+     * pane is shut or a drag holds the divider.
+     */
+    private holdPrimary;
+    /**
+     * F6, which moves focus between the panes, as the window splitter pattern
+     * allows: from the start pane to the end pane, and from the end pane or the
+     * divider to the start pane. Only a pane that holds a control takes focus.
+     */
+    private readonly handlePaneKeys;
     /**
      * Where a dragged divider snaps, comma separated, as Web Awesome's split
      * panel does: a bare number is a percentage and a length such as `240px` is

package/dist/splitter/root/splitter-root.js

@@ -11,6 +11,7 @@ import { property, state } from 'lit/decorators.js';
 import { snapTo } from '../snap.js';
 const STACK_BELOW = 512;
 const channel = new WeakMap();
+const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
 let HelixHeadlessSplitter = class HelixHeadlessSplitter extends HelixElement {
     static { HelixHeadlessSplitter_1 = this; }
     static { this.words = 'helix-splitter'; }
@@ -69,6 +70,41 @@ let HelixHeadlessSplitter = class HelixHeadlessSplitter extends HelixElement {
         this.reached = undefined;
         this.requestUpdate('position', previous);
     }
+    watchLength() {
+        if (!this.primary || typeof ResizeObserver === 'undefined') {
+            this.lengths?.disconnect();
+            this.lengths = undefined;
+            this.length = 0;
+            return;
+        }
+        if (this.lengths) {
+            return;
+        }
+        this.lengths = new ResizeObserver(([entry]) => {
+            const box = entry?.borderBoxSize?.[0];
+            const length = (this.vertical
+                ? (box?.blockSize ?? entry?.contentRect.height)
+                : (box?.inlineSize ?? entry?.contentRect.width)) ?? 0;
+            this.holdPrimary(length);
+        });
+        this.lengths.observe(this);
+    }
+    holdPrimary(length) {
+        const before = this.length;
+        this.length = length;
+        if (!this.primary || before <= 0 || length <= 0 || length === before) {
+            return;
+        }
+        if (this.collapsed || this.dragging) {
+            return;
+        }
+        const position = this.position;
+        const kept = ((this.primary === 'start' ? position : 100 - position) / 100) * before;
+        const share = (kept / length) * 100;
+        const previous = position;
+        this.positionState = this.clamp(this.primary === 'start' ? share : 100 - share);
+        this.requestUpdate('position', previous);
+    }
     get showing() {
         return this.reached === undefined ? this.position : this.clamp(this.reached);
     }
@@ -225,6 +261,34 @@ let HelixHeadlessSplitter = class HelixHeadlessSplitter extends HelixElement {
         });
         this.max = 100;
         this.min = 0;
+        this.length = 0;
+        this.handlePaneKeys = (event) => {
+            if (event.key !== 'F6' ||
+                event.altKey ||
+                event.ctrlKey ||
+                event.metaKey ||
+                event.defaultPrevented) {
+                return;
+            }
+            const path = event.composedPath();
+            const pane = (name) => this.renderRoot
+                ?.querySelector(`slot[name="${name}"]`)
+                ?.assignedElements({ flatten: true }) ?? [];
+            const inner = path.find((node) => node instanceof HelixHeadlessSplitter_1);
+            if (inner !== this) {
+                return;
+            }
+            const fromStart = pane('start').some((one) => path.includes(one));
+            const to = pane(fromStart ? 'end' : 'start');
+            const first = to.flatMap((one) => [
+                ...(one instanceof HTMLElement && one.matches(FOCUSABLE) ? [one] : []),
+                ...one.querySelectorAll(FOCUSABLE),
+            ])[0];
+            if (first) {
+                event.preventDefault();
+                first.focus();
+            }
+        };
         this.snap = '';
         this.snapThreshold = 12;
         this.step = 2;
@@ -435,13 +499,19 @@ let HelixHeadlessSplitter = class HelixHeadlessSplitter extends HelixElement {
         super.connectedCallback();
         if (this.hasUpdated) {
             this.watchWidth();
+            this.watchLength();
             this.findOuter();
         }
+        this.addEventListener('keydown', this.handlePaneKeys);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
+        this.removeEventListener('keydown', this.handlePaneKeys);
         this.sizes?.disconnect();
         this.sizes = undefined;
+        this.lengths?.disconnect();
+        this.lengths = undefined;
+        this.length = 0;
         if (this.outer) {
             channel.get(this.outer)?.uncross(this);
         }
@@ -451,6 +521,7 @@ let HelixHeadlessSplitter = class HelixHeadlessSplitter extends HelixElement {
     firstUpdated(changed) {
         super.firstUpdated(changed);
         this.watchWidth();
+        this.watchLength();
         this.findOuter();
         this.finishHydration();
     }
@@ -459,6 +530,9 @@ let HelixHeadlessSplitter = class HelixHeadlessSplitter extends HelixElement {
         if (changed.has('orientation')) {
             this.watchWidth();
         }
+        if (changed.has('primary')) {
+            this.watchLength();
+        }
         if (this.collapsed) {
             this.dataset.collapsed = this.collapsed;
         }
@@ -578,6 +652,9 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], HelixHeadlessSplitter.prototype, "position", null);
+__decorate([
+    property()
+], HelixHeadlessSplitter.prototype, "primary", void 0);
 __decorate([
     property()
 ], HelixHeadlessSplitter.prototype, "snap", void 0);

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

@@ -36,6 +36,20 @@ declare const HelixHeadlessTabs_base: (new (...args: any[]) => import("@fusion.d
  * Disabled tabs are passed over. Tab leaves the list for the selected panel,
  * which is a tab stop only while it holds nothing focusable.
  *
+ * **Keyboard.**
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | Right, Down | Moves to the next tab, from the last round to the first. Selects it, unless `manual` is set or a tab is a link. |
+ * | Left, Up | Moves to the tab before, from the first round to the last. |
+ * | Home, End | Moves to the first or the last tab. |
+ * | Enter, Space | Selects the tab with focus, or follows its link. |
+ * | Tab | Leaves the list for the selected panel. |
+ *
+ * Removing the selected tab selects the first enabled tab that is left, and
+ * `active` says so, with `helix-activate`. Where the removed tab had focus,
+ * focus moves to the tab now selected.
+ *
  * The `indicator` part moves to the selected tab and carries its place and
  * size, so a mark of your own can be drawn there: style the part, or slot an
  * element into `indicator`, which sits inside the part and reads the same
@@ -125,8 +139,19 @@ export declare class HelixHeadlessTabs extends HelixHeadlessTabs_base {
     private get linked();
     private get panels();
     private readonly handleSelection;
+    /** The values of the tabs the last pairing read, to tell a removed tab from one not yet here. */
+    private held;
     /** Pushes the current value down to whichever tab and panel own it. */
     private sync;
+    /** The tab that last had focus, so its removal can hand focus on. */
+    private focused;
+    private readonly handleFocusIn;
+    /**
+     * Puts focus on the selected tab where the tab that had it was removed and
+     * focus fell to the page, which is where removing a focused element leaves
+     * it.
+     */
+    private refocus;
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected firstUpdated(changed: PropertyValues): void;