@fusion.dev/helix-headless 0.171.0 → 0.173.0

package/dist/outline/root/outline-root.js

@@ -17,11 +17,14 @@ let HelixHeadlessOutline = class HelixHeadlessOutline extends HelixElement {
             active: () => this.links.find((link) => link.hasAttribute('aria-current')),
             indicator: () => this.partNamed('indicator'),
             surface: () => this.partNamed('nav'),
+            through: () => this.links.findLast((link) => link.hasAttribute('aria-current')),
         });
         this.behavior = 'auto';
         this.follow = false;
         this.label = 'On this page';
+        this.marks = 'reading';
         this.offset = 0;
+        this.markedIds = [];
         this.reading = '';
         this.frame = 0;
         this.handleScroll = () => {
@@ -42,34 +45,18 @@ let HelixHeadlessOutline = class HelixHeadlessOutline extends HelixElement {
             if (!section) {
                 return;
             }
-            this.landing = section;
-            this.markTo(section);
-            this.unland();
-            const arrive = () => {
-                this.unland();
-                this.landing = undefined;
-                this.mark();
-            };
-            this.arrive = arrive;
-            document.addEventListener('scrollend', arrive, { capture: true, once: true });
-            this.landed = setTimeout(arrive, 1200);
-            if (this.behavior === 'auto') {
-                return;
-            }
-            event.preventDefault();
-            const reduced = globalThis.matchMedia?.('(prefers-reduced-motion: reduce)').matches === true;
-            section.target.scrollIntoView({
-                behavior: reduced && this.behavior === 'smooth' ? 'instant' : this.behavior,
-                block: 'start',
-            });
-            globalThis.history?.pushState(null, '', link?.getAttribute('href') ?? '');
-            const target = section.target;
-            if (!target.hasAttribute('tabindex')) {
-                target.setAttribute('tabindex', '-1');
+            if (this.travel(section, this.behavior !== 'auto')) {
+                event.preventDefault();
+                globalThis.history?.pushState(null, '', link?.getAttribute('href') ?? '');
+                const target = section.target;
+                if (!target.hasAttribute('tabindex')) {
+                    target.setAttribute('tabindex', '-1');
+                }
+                target.focus({ preventScroll: true });
             }
-            target.focus({ preventScroll: true });
         };
         this.handleSlotChange = () => {
+            this.writeDepths();
             this.watch();
             this.indicator.place();
         };
@@ -87,6 +74,9 @@ let HelixHeadlessOutline = class HelixHeadlessOutline extends HelixElement {
     get current() {
         return this.reading;
     }
+    get marked() {
+        return [...this.markedIds];
+    }
     get links() {
         const slots = [
             ...(this.renderRoot?.querySelectorAll?.('slot[data-link], nav > slot:not([role])') ?? []),
@@ -127,20 +117,34 @@ let HelixHeadlessOutline = class HelixHeadlessOutline extends HelixElement {
         const origin = page ? 0 : scroller.getBoundingClientRect().top;
         const passed = sections.filter(({ target }) => target.getBoundingClientRect().top - origin - this.offset <= 1);
         const active = this.atEnd ? sections.at(-1) : (passed.at(-1) ?? sections[0]);
-        this.markTo(active);
+        const shown = this.marks === 'visible' ? this.onScreen(sections, origin, scroller) : [];
+        this.markTo(shown.length > 0 ? shown : active ? [active] : []);
     }
-    markTo(active) {
+    onScreen(sections, origin, scroller) {
+        const line = origin + this.offset;
+        const bottom = origin + (scroller === this.page ? this.page.clientHeight : scroller.clientHeight);
+        const tops = sections.map(({ target }) => target.getBoundingClientRect().top);
+        return sections.filter((_, at) => {
+            const end = tops[at + 1] ?? Number.POSITIVE_INFINITY;
+            return (tops[at] ?? 0) < bottom - 1 && end > line + 1;
+        });
+    }
+    markTo(marked) {
+        const on = new Set(marked.map(({ target }) => target));
         for (const { link, target } of this.sections) {
-            if (target === active?.target) {
+            if (on.has(target)) {
                 link.setAttribute('aria-current', 'location');
             }
             else {
                 link.removeAttribute('aria-current');
             }
         }
+        const active = marked[0];
         const next = active?.target.id ?? '';
-        if (next !== this.reading) {
+        const ids = marked.map(({ target }) => target.id);
+        if (next !== this.reading || ids.join(' ') !== this.markedIds.join(' ')) {
             this.reading = next;
+            this.markedIds = ids;
             this.indicator.place();
             if (this.follow && active) {
                 this.reveal(active.link);
@@ -173,6 +177,36 @@ let HelixHeadlessOutline = class HelixHeadlessOutline extends HelixElement {
             element.style.scrollMarginBlockStart = this.offset > 0 ? `${this.offset}px` : '';
         }
     }
+    scrollToSection(id) {
+        const section = this.sections.find(({ target }) => target.id === id);
+        if (!section) {
+            return false;
+        }
+        this.travel(section, true);
+        return true;
+    }
+    travel(section, scroll) {
+        this.landing = section;
+        this.markTo([section]);
+        this.unland();
+        const arrive = () => {
+            this.unland();
+            this.landing = undefined;
+            this.mark();
+        };
+        this.arrive = arrive;
+        document.addEventListener('scrollend', arrive, { capture: true, once: true });
+        this.landed = setTimeout(arrive, 1200);
+        if (!scroll) {
+            return false;
+        }
+        const reduced = globalThis.matchMedia?.('(prefers-reduced-motion: reduce)').matches === true;
+        section.target.scrollIntoView({
+            behavior: reduced && this.behavior === 'smooth' ? 'instant' : this.behavior,
+            block: 'start',
+        });
+        return true;
+    }
     watch() {
         this.observer?.disconnect();
         if (this.sections.length === 0) {
@@ -188,6 +222,35 @@ let HelixHeadlessOutline = class HelixHeadlessOutline extends HelixElement {
         this.reach();
         this.mark();
     }
+    writeDepths() {
+        const links = this.links;
+        const items = new Map();
+        for (const link of links) {
+            let count = 0;
+            for (let node = link.parentElement; node && node !== this; node = node.parentElement) {
+                count += node.localName === 'li' ? 1 : 0;
+            }
+            items.set(link, count);
+        }
+        const flat = links.filter((link) => items.get(link) === 0);
+        const depth = new Map();
+        const walk = (branches, at) => {
+            for (const branch of branches) {
+                const link = flat[branch.index];
+                if (link) {
+                    depth.set(link, at);
+                }
+                walk(branch.children, at + 1);
+            }
+        };
+        walk(nest(flat.map((link) => levelOf(link.getAttribute('data-level')))), 1);
+        for (const link of links) {
+            const at = String(depth.get(link) ?? items.get(link) ?? 1);
+            if (link.getAttribute('data-depth') !== at) {
+                link.setAttribute('data-depth', at);
+            }
+        }
+    }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.childWatch?.disconnect();
@@ -258,9 +321,12 @@ let HelixHeadlessOutline = class HelixHeadlessOutline extends HelixElement {
     updated(changed) {
         super.updated(changed);
         this.assign();
+        this.writeDepths();
         this.nameByHeading();
         if (changed.has('offset')) {
             this.reach();
+        }
+        if (changed.has('offset') || changed.has('marks')) {
             this.mark();
         }
         if (!this.observer) {
@@ -295,6 +361,9 @@ __decorate([
     words,
     property()
 ], HelixHeadlessOutline.prototype, "label", void 0);
+__decorate([
+    property()
+], HelixHeadlessOutline.prototype, "marks", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessOutline.prototype, "offset", void 0);

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

@@ -22,7 +22,9 @@ declare const HelixHeadlessPopover_base: (new (...args: any[]) => import("@fusio
  *
  * It opens on click and from a command. `command="--show"` and the related
  * commands work as they do on `Dialog` and `Drawer`, so a button anywhere on
- * the page can open the popover with no script.
+ * the page can open the popover with no script. From its first press, a
+ * button that opens it this way says whether the popover is open: a Helix
+ * button through `expanded`, and any other element with `aria-expanded`.
  *
  * **Opening moves focus into the panel**, to the first control in it, or to the
  * panel itself where it holds none, and closing from inside gives it back to
@@ -32,8 +34,12 @@ declare const HelixHeadlessPopover_base: (new (...args: any[]) => import("@fusio
  * `modal` keeps `Tab` inside the panel while it is open and says so with
  * `aria-modal`, for a panel that has to be answered before the page goes on.
  * The rest of the page is hidden from screen readers with `aria-hidden` while
- * it is open, so the virtual cursor stays in the panel too. Without it the
- * popover does not trap focus.
+ * it is open, so the virtual cursor stays in the panel too, and the page does
+ * not scroll behind it. Without it the popover does not trap focus.
+ *
+ * A press outside closes the panel and leaves focus where the press put it.
+ * Where it put focus nowhere, as a press on text or on the page's background
+ * does, focus goes back to the trigger.
  *
  * 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.
@@ -49,10 +55,17 @@ declare const HelixHeadlessPopover_base: (new (...args: any[]) => import("@fusio
  * | 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. |
  *
+ * The panel opens against the trigger, or against the element `anchor` names,
+ * such as a field beside the button that opens it. `offset` moves it away from
+ * that element, `cross-offset` slides it along the side it is on,
+ * `container-padding` keeps it that far from the window's edges, and
+ * `flip="false"` keeps it on its side where the other side has more room.
+ *
  * `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
- * trigger's width is on the panel as `--floating-anchor-inline-size`, for a
- * panel as wide as its trigger:
+ * panel landed on is on the host as `:state(placed-top)` and its kin, its
+ * alignment along that side as `:state(aligned-start)` or
+ * `:state(aligned-end)`, and the trigger's width is on the panel as
+ * `--floating-anchor-inline-size`, for a panel as wide as its trigger:
  *
  * ```css
  * helix-popover::part(popover) {
@@ -84,6 +97,8 @@ declare const HelixHeadlessPopover_base: (new (...args: any[]) => import("@fusio
  * @cssproperty --floating-anchor-inline-size - The trigger's width, written on the panel while it is open, as in `min-inline-size: var(--floating-anchor-inline-size)`. Read it; a value set here is written over.
  * @cssproperty --floating-available-block-size - The room between the panel and the edge of the screen it opens toward, written on the panel while it is open. Read it; a value set here is written over.
  *
+ * @cssstate aligned-end - While the panel is aligned to the end of the side it sits on.
+ * @cssstate aligned-start - While the panel is aligned to the start of the side it sits on.
  * @cssstate entering - From the moment the panel shows until its entrance has finished.
  * @cssstate exiting - From the moment the panel hides until its exit has finished.
  * @cssstate open - While the popover is open.
@@ -98,6 +113,13 @@ export declare class HelixHeadlessPopover extends HelixHeadlessPopover_base {
      * `registerWords('de', { 'helix-popover': { fallbackLabel: 'Popup' } })`.
      */
     static words: string;
+    /**
+     * The element the panel opens against, where that is not the trigger: its
+     * `id` in the same document or shadow root, or the element itself. Left
+     * empty, the panel opens against the trigger, or against the button whose
+     * command opened it.
+     */
+    anchor: Element | string;
     /**
      * Draws a point on the panel's edge facing the trigger.
      *
@@ -105,11 +127,29 @@ export declare class HelixHeadlessPopover extends HelixHeadlessPopover_base {
      * trigger already reads as belonging to it.
      */
     arrow: boolean;
+    /**
+     * How close to the window's edges the panel may come, in pixels, when it
+     * slides, shrinks or moves to the other side to fit. Left unset, it slides
+     * and shrinks to 8 pixels from an edge and moves to the other side only
+     * once it would cross one.
+     */
+    containerPadding?: number;
+    /**
+     * How far to slide the panel along the side it is on, in pixels: to the
+     * right on the top or the bottom, and down on the left or the right.
+     */
+    crossOffset: number;
     /**
      * The panel's name where nothing else names it: no `label`, no heading in
      * the panel, and no `aria-labelledby` on the host.
      */
     fallbackLabel: string;
+    /**
+     * Whether the panel moves to the other side of the trigger when its own
+     * side has no room. On by default. Write `flip="false"` to keep it on its
+     * side, where it shrinks to fit, as React Aria's `shouldFlip` turns off.
+     */
+    flip: boolean;
     /**
      * The panel's name, read by screen readers. Left empty, the first heading in
      * the panel names it, and then `fallback-label`.
@@ -166,7 +206,20 @@ export declare class HelixHeadlessPopover extends HelixHeadlessPopover_base {
     private invoker;
     protected readonly commands: CommandController;
     /** The element the panel opens against. */
+    private get placedAgainst();
+    /** The element that opened the panel, which focus goes back to. */
     private get trigger();
+    /**
+     * A press outside, or Escape, closing the panel.
+     *
+     * **Focus goes back to the trigger where the press put it nowhere.** The
+     * press is heard on `pointerdown`, and the browser moves focus a moment
+     * later: onto what was pressed where that takes focus, and to the body where
+     * it does not. A popover dismissed by a press on text was left with focus on
+     * the body, measured in Chromium, where React Aria's returns it to the
+     * trigger. Read after the press, once the browser has moved it.
+     */
+    private dismiss;
     /** Opens the panel. */
     show(): void;
     /** Closes the panel and puts focus back on the trigger. */

package/dist/popover/root/popover-root.js

@@ -4,15 +4,18 @@ 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, auditName, 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, lockScroll, MixinControllerOpen, OpenPhaseController, onUnlessFalse, PopoverController, reflectElements, sideOf, tellDisclosure, unlockScroll, words, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { hideOutside } from '../hide-outside.js';
 let HelixHeadlessPopover = class HelixHeadlessPopover extends MixinControllerOpen(HelixElement) {
     constructor() {
         super(...arguments);
+        this.anchor = '';
         this.arrow = false;
+        this.crossOffset = 0;
         this.fallbackLabel = 'Popover';
+        this.flip = true;
         this.label = '';
         this.modal = false;
         this.aria = new AriaForwardController(this, {
@@ -29,13 +32,17 @@ let HelixHeadlessPopover = class HelixHeadlessPopover extends MixinControllerOpe
             surface: () => this.partNamed('popover'),
         });
         this.panel = new PopoverController(this, {
-            anchor: () => this.trigger,
+            anchor: () => this.placedAgainst,
             arrow: () => this.partNamed('arrow'),
             boundary: () => [this, this.invoker],
+            crossOffset: () => this.crossOffset,
+            flip: () => this.flip,
             offset: () => this.offset + arrowReach(this.partNamed('arrow')),
-            onDismiss: () => this.hide(),
+            onDismiss: () => this.dismiss(),
             onPlace: (placement) => {
                 const side = sideOf(placement);
+                this.toggleState('aligned-end', placement.endsWith('-end'));
+                this.toggleState('aligned-start', placement.endsWith('-start'));
                 this.toggleState('placed-bottom', side === 'bottom');
                 this.toggleState('placed-left', side === 'left');
                 this.toggleState('placed-right', side === 'right');
@@ -43,6 +50,7 @@ let HelixHeadlessPopover = class HelixHeadlessPopover extends MixinControllerOpe
                 this.side = side;
             },
             open: () => this.open,
+            padding: () => this.containerPadding,
             placement: () => this.placement,
             surface: () => this.partNamed('popover'),
         });
@@ -69,6 +77,7 @@ let HelixHeadlessPopover = class HelixHeadlessPopover extends MixinControllerOpe
                     }
                 },
             },
+            expanded: () => this.open,
         });
         this.closingFromInside = false;
         this.handleFocusOut = (event) => {
@@ -111,10 +120,31 @@ let HelixHeadlessPopover = class HelixHeadlessPopover extends MixinControllerOpe
         const heading = asked ? null : headingIn(this.slotted);
         this.namedByHeading = reflectElements(this.partNamed('popover'), 'ariaLabelledByElements', heading ? [heading] : [], this.namedByHeading);
     }
+    get placedAgainst() {
+        const named = typeof this.anchor === 'string'
+            ? this.anchor === ''
+                ? null
+                : this.getRootNode().getElementById?.(this.anchor)
+            : this.anchor;
+        return named instanceof HTMLElement ? named : this.trigger;
+    }
     get trigger() {
         return (this.invoker ??
             anchorElement(this.renderRoot?.querySelector('slot[name="trigger"]'), this));
     }
+    dismiss() {
+        const inside = this.focusInside;
+        this.hide();
+        if (!inside) {
+            return;
+        }
+        setTimeout(() => {
+            const active = deepActiveElement();
+            if (!this.open && (active === null || active === document.body)) {
+                this.trigger.focus();
+            }
+        });
+    }
     show() {
         if (this.open || !this.requestOpen(true)) {
             return;
@@ -179,6 +209,12 @@ let HelixHeadlessPopover = class HelixHeadlessPopover extends MixinControllerOpe
             this.showOutside();
             this.showOutside = undefined;
         }
+        if (hide) {
+            lockScroll(this);
+        }
+        else {
+            unlockScroll(this);
+        }
     }
     updated(changed) {
         super.updated(changed);
@@ -220,13 +256,25 @@ let HelixHeadlessPopover = class HelixHeadlessPopover extends MixinControllerOpe
       </div>`;
     }
 };
+__decorate([
+    property()
+], HelixHeadlessPopover.prototype, "anchor", void 0);
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessPopover.prototype, "arrow", void 0);
+__decorate([
+    property({ attribute: 'container-padding', type: Number })
+], HelixHeadlessPopover.prototype, "containerPadding", void 0);
+__decorate([
+    property({ attribute: 'cross-offset', type: Number })
+], HelixHeadlessPopover.prototype, "crossOffset", void 0);
 __decorate([
     words,
     property({ attribute: 'fallback-label' })
 ], HelixHeadlessPopover.prototype, "fallbackLabel", void 0);
+__decorate([
+    property({ converter: onUnlessFalse })
+], HelixHeadlessPopover.prototype, "flip", void 0);
 __decorate([
     property()
 ], HelixHeadlessPopover.prototype, "label", void 0);

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

@@ -33,7 +33,7 @@ declare const HelixHeadlessSelect_base: (new (...args: any[]) => import("@fusion
  * | Down, Enter, Space | Opens the list on the chosen option, or the first. |
  * | Up | Opens the list on the chosen option, or the last. |
  * | Home, End | Opens the list on the first or the last option. |
- * | Left, Right | Chooses the option before or after the chosen one without opening, as React Aria's Select does, in either direction of text. |
+ * | Left, Right | Chooses the option before or after the chosen one without opening, as React Aria's Select does. On a right-to-left page Left chooses the one after. |
  * | A letter or a word | Chooses the option whose words start with what you typed, as a native `<select>` does. With `multiple`, opens the list on it. |
  *
  * In the open list, which is a `Listbox`:
@@ -371,7 +371,7 @@ export declare class HelixHeadlessSelect extends HelixHeadlessSelect_base {
      * middle of those letters is one of them. With `multiple`, a letter opens the
      * list on the match instead, because adding to a set is a choice the reader
      * makes in the list. ArrowLeft and ArrowRight choose the option before and
-     * after the chosen one.
+     * after the chosen one, the other way round on a right-to-left page.
      */
     private readonly handleTriggerKeydown;
     /**

package/dist/select/root/select-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, afterLinkFollowed, chosenValues, customElement, dataOptions, drawAutofill, drawStatus, HelixFormElement, hostAria, hostWords, isRtl, MixinControllerOpen, MixinControllerValue, MixinField, onApple, PopoverController, reportValues, StatusController, sideOf, typesCharacter, UpgradeController, words, wordsLocale, } from '@fusion.dev/helix-core';
+import { AriaForwardController, afterLinkFollowed, chosenValues, customElement, dataOptions, drawAutofill, drawStatus, HelixFormElement, hostAria, hostWords, inlineStep, isRtl, MixinControllerOpen, MixinControllerValue, MixinField, onApple, PopoverController, reportValues, StatusController, sideOf, typesCharacter, UpgradeController, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { caretDown } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -131,7 +131,7 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
                 }
                 return;
             }
-            const step = event.key === 'ArrowRight' ? 1 : event.key === 'ArrowLeft' ? -1 : 0;
+            const step = inlineStep(this, event.key);
             if (step !== 0 && !this.multiple && !(event.altKey || event.ctrlKey || event.metaKey)) {
                 event.preventDefault();
                 const reachable = this.items

package/dist/speed-dial/root/speed-dial-root.d.ts

@@ -200,8 +200,22 @@ export declare class HelixHeadlessSpeedDial extends HelixHeadlessSpeedDial_base
      * attribute the consumer's server never sent is a mismatch whether or not it
      * moves afterwards, measured in both load orders, and a trigger that says it
      * is expanded is already saying it has something to expand.
+     *
+     * **A plain trigger once a reader has reached it.** A `<button>` of yours has
+     * no shadow root, so it takes `aria-haspopup="menu"` and `aria-expanded` as
+     * attributes, written only once focus or a pointer has reached it. That is
+     * after hydration, which is the only time React compares them. A trigger
+     * that carries either attribute itself is yours to keep up to date.
      */
     private announce;
+    /** The plain trigger this dial has written its state on, so it can be taken back. */
+    private toldPlain;
+    /** Whether a reader has reached the trigger, by focus or a pointer, which is after hydration. */
+    private reached;
+    /** Takes the state off a plain trigger that is no longer this dial's. */
+    private untellPlain;
+    /** A reader reaching the trigger, which lets a plain one be told its state. */
+    private readonly handleReach;
     /** The control the dial has described, so the description can be taken back. */
     private described;
     /**

package/dist/speed-dial/root/speed-dial-root.js

@@ -139,6 +139,13 @@ let HelixHeadlessSpeedDial = class HelixHeadlessSpeedDial extends MixinControlle
             this.close();
             event.preventDefault();
         };
+        this.reached = false;
+        this.handleReach = (event) => {
+            if (!this.reached && event.composedPath().includes(this.trigger)) {
+                this.reached = true;
+                this.announce();
+            }
+        };
         this.handleTriggerFocusIn = () => {
             if (this.pressHeld) {
                 this.describeTrigger(true);
@@ -186,6 +193,8 @@ let HelixHeadlessSpeedDial = class HelixHeadlessSpeedDial extends MixinControlle
         this.addEventListener('click', this.handleHeldClick, true);
         this.addEventListener('pointerenter', this.handlePointerEnter);
         this.addEventListener('pointerleave', this.handlePointerLeave);
+        this.addEventListener('focusin', this.handleReach);
+        this.addEventListener('pointerover', this.handleReach);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
@@ -199,14 +208,37 @@ let HelixHeadlessSpeedDial = class HelixHeadlessSpeedDial extends MixinControlle
         this.removeEventListener('click', this.handleHeldClick, true);
         this.removeEventListener('pointerenter', this.handlePointerEnter);
         this.removeEventListener('pointerleave', this.handlePointerLeave);
+        this.removeEventListener('focusin', this.handleReach);
+        this.removeEventListener('pointerover', this.handleReach);
         this.stay();
     }
     announce() {
         const trigger = this.trigger;
-        if (trigger === this.partNamed('trigger')) {
+        if (trigger === this.partNamed('trigger') || trigger === this) {
+            return;
+        }
+        if (trigger !== this.toldPlain) {
+            this.untellPlain();
+        }
+        if (trigger.localName.includes('-')) {
+            tellDisclosure(trigger, this.open, 'menu');
             return;
         }
-        tellDisclosure(trigger, this.open, 'menu');
+        if (trigger !== this.toldPlain) {
+            if (!this.reached ||
+                trigger.hasAttribute('aria-expanded') ||
+                trigger.hasAttribute('aria-haspopup')) {
+                return;
+            }
+            this.toldPlain = trigger;
+        }
+        trigger.setAttribute('aria-haspopup', 'menu');
+        trigger.setAttribute('aria-expanded', String(this.open));
+    }
+    untellPlain() {
+        this.toldPlain?.removeAttribute('aria-haspopup');
+        this.toldPlain?.removeAttribute('aria-expanded');
+        this.toldPlain = undefined;
     }
     describeTrigger(light = false) {
         const trigger = this.trigger;

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

@@ -28,7 +28,11 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * back to the position where the collapsing gesture began. A drag records that position
  * on press, and every other way of collapsing records it in `settle`.
  * `collapsed-size` keeps a sliver of the pane visible, such as a tab strip.
- * Collapsing overrides `min` and `max`.
+ * Collapsing overrides `min` and `max`. `collapsible` says which panes can be
+ * collapsed at all, as Zag's panels each say.
+ *
+ * `min` is the least the start pane keeps and `end-min` the least the end pane
+ * keeps, each a percentage or a CSS length such as `16rem`.
  *
  * 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
@@ -49,7 +53,7 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * | 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. |
+ * | Enter | Collapses the start pane, or the end pane where `collapsible="end"`, 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
@@ -119,6 +123,15 @@ export declare class HelixHeadlessSplitter extends HelixElement {
      * consumer's to set.
      */
     collapsedSize: number;
+    /**
+     * Which panes can be collapsed, as Zag's panels each take `collapsible`:
+     * `start`, `end`, `both`, or `none`. A pane that cannot be collapsed stops
+     * at the edge without shutting. `Enter` collapses the end pane where only
+     * the end pane can be collapsed, and the start pane otherwise.
+     *
+     * Unset is `both`, and the attribute stays absent until you write it.
+     */
+    collapsible?: 'both' | 'end' | 'none' | 'start';
     /**
      * The name of the handle where two dividers cross, read by screen readers.
      */
@@ -141,6 +154,14 @@ export declare class HelixHeadlessSplitter extends HelixElement {
      * Where the divider starts, when `position` is not set.
      */
     defaultPosition: number;
+    /**
+     * The least the end pane keeps, in the units `min` takes: a percentage, or
+     * a CSS length such as `16rem` resolved against the splitter's box. The
+     * divider stops that far from the end, whatever `max` allows, so `min` and
+     * `end-min` hold a minimum for each pane, as Zag's panels each take
+     * `minSize`.
+     */
+    endMin: number | string;
     /**
      * The divider's name, read by screen readers.
      *
@@ -403,6 +424,8 @@ export declare class HelixHeadlessSplitter extends HelixElement {
      * latches on any drag that runs off the end.
      */
     private shutAt;
+    /** Whether `collapsible` lets this pane be collapsed. */
+    private canCollapse;
     /** Pulled between the bounds, which are the ends unless a consumer moved them. */
     private clamp;
     /**