@fusion.dev/helix-headless 0.170.0 → 0.172.0

package/dist/menu/root/menu-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, customElement, DrilldownController, deepActiveElement, deepContains, filterKeeps, focusTarget, HelixElement, HelixFilterEvent, inlineStep, KeyboardNavigationController, linkDescription, MixinCollection, MixinControllerOpen, markMatches, onUnlessFalse, PopoverController, scrollItemIntoView, sideOf, slottedWords, tellDisclosure, typeaheadBy, unlinkDescription, words, } from '@fusion.dev/helix-core';
+import { AriaForwardController, anchorElement, customElement, DrilldownController, deepActiveElement, deepContains, filterKeeps, focusTarget, formatWords, HelixElement, HelixFilterEvent, inlineStep, KeyboardNavigationController, linkDescription, MixinCollection, MixinControllerOpen, markMatches, OpenPhaseController, onUnlessFalse, PopoverController, scrollItemIntoView, sideOf, slottedWords, tellDisclosure, typeaheadBy, unlinkDescription, words, } from '@fusion.dev/helix-core';
 import { caretLeft } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -30,6 +30,7 @@ const isSection = (element) => 'isMenuSection' in element && element.isMenuSecti
 let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinControllerOpen(HelixElement)) {
     constructor() {
         super(...arguments);
+        this.statusSlots = true;
         this.backLabel = 'Back';
         this.closeOnSelect = true;
         this.context = false;
@@ -40,6 +41,7 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
         this.longPressLabel = 'Long press or press Alt+Down to show the menu';
         this.noResultsText = 'No matches';
         this.offset = 4;
+        this.openOn = 'click';
         this.longPress = new LongPress(this, {
             onLongPress: () => {
                 if (this.context) {
@@ -54,8 +56,8 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
                 }
             },
         });
-        this.openOn = 'click';
         this.placement = 'bottom-start';
+        this.resultsLabel = '{count, plural, one {# result} other {# results}}';
         this.submenus = 'drill';
         this.drilldown = new DrilldownController(this, {
             isRow: (element) => 'isMenuItem' in element && element.isMenuItem === true,
@@ -70,6 +72,14 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
             selects: () => false,
             typeahead: typeaheadBy((item) => slottedWords(item, [''])),
         });
+        this.phases = new OpenPhaseController(this, {
+            mark: {
+                entering: (on) => this.toggleState('entering', on),
+                exiting: (on) => this.toggleState('exiting', on),
+            },
+            open: () => this.open,
+            surface: () => this.partNamed('surface'),
+        });
         this.aria = new AriaForwardController(this, {
             label: true,
             target: () => this.menuBox,
@@ -98,6 +108,37 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
             event.stopPropagation();
             this.filterBy(event.target.value);
         };
+        this.followRemoved = (records) => {
+            if (!this.open) {
+                return;
+            }
+            const active = deepActiveElement();
+            const lost = active === null || active === document.body || !active.isConnected;
+            const record = records.find((one) => [...one.removedNodes].some((node) => isItem(node) && (this.filterable ? node === this.highlighted : lost)));
+            if (!record) {
+                return;
+            }
+            const items = this.items;
+            const after = (from, step) => {
+                for (let node = from; node; node = node[step]) {
+                    if (items.includes(node)) {
+                        return node;
+                    }
+                }
+                return undefined;
+            };
+            const next = after(record.nextSibling, 'nextSibling') ??
+                after(record.previousSibling, 'previousSibling') ??
+                items.at(-1);
+            if (this.filterable || next) {
+                this.reach(next);
+                return;
+            }
+            this.hide();
+            if (!this.context) {
+                this.trigger.focus();
+            }
+        };
         this.handleContextMenu = (event) => {
             if (!this.context) {
                 return;
@@ -124,6 +165,7 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
                 return;
             }
             const chosen = item;
+            this.tellChecked();
             if (chosen.hasSubmenu) {
                 event.stopPropagation();
                 this.enter(chosen);
@@ -141,6 +183,7 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
             if (item) {
                 this.revealRow(item);
             }
+            this.nameSurface();
         };
         this.handleKeydown = (event) => {
             if (!this.open) {
@@ -235,7 +278,7 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
             }
         };
         this.handleHover = (event) => {
-            if (!(this.flies || this.filterable) || !this.open || event.pointerType !== 'mouse') {
+            if (!this.open || event.pointerType !== 'mouse') {
                 return;
             }
             const row = event
@@ -293,6 +336,7 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
                 until: Date.now() + GRACE,
             };
         };
+        this.namedByPage = false;
     }
     static { this.words = 'helix-menu'; }
     get flies() {
@@ -487,6 +531,27 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
         this.drilldown.back();
         this.updateComplete.then(() => this.reach(leaving ?? undefined));
     }
+    get choiceRows() {
+        return [...this.querySelectorAll('*')].filter((node) => isItem(node) && node.choice);
+    }
+    get checkedValues() {
+        return this.choiceRows.filter((row) => row.checked).map((row) => row.value);
+    }
+    set checkedValues(values) {
+        const wanted = new Set(values);
+        for (const row of this.choiceRows) {
+            row.checked = wanted.has(row.value);
+        }
+        this.toldChecked = this.checkedValues.join('\u0000');
+    }
+    tellChecked() {
+        const now = this.checkedValues.join('\u0000');
+        const before = this.toldChecked;
+        this.toldChecked = now;
+        if (before !== undefined && before !== now) {
+            this.dispatchEvent(new Event('change', { bubbles: true }));
+        }
+    }
     revealRow(item) {
         const holder = this.flies ? this.holderOf(item) : null;
         const surface = holder
@@ -555,6 +620,8 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
         this.addEventListener('pointercancel', this.handlePointerCancel);
         this.addEventListener('click', this.handleHeldClick, true);
         this.addEventListener('focusin', this.handleTriggerFocusIn);
+        this.rowWatch = new MutationObserver(this.followRemoved);
+        this.rowWatch.observe(this, { childList: true, subtree: true });
         void this.whenSettled.then(() => {
             this.settledOnce = true;
             if (!this.context) {
@@ -581,6 +648,8 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
         this.removeEventListener('pointercancel', this.handlePointerCancel);
         this.removeEventListener('click', this.handleHeldClick, true);
         this.removeEventListener('focusin', this.handleTriggerFocusIn);
+        this.rowWatch?.disconnect();
+        this.rowWatch = undefined;
         if (this.described) {
             unlinkDescription(this.described, this);
             this.described = undefined;
@@ -588,6 +657,9 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
     }
     updated(changed) {
         super.updated(changed);
+        if (changed.has('open') && this.open) {
+            this.toldChecked = this.checkedValues.join('\u0000');
+        }
         if (!this.context) {
             this.tellTrigger();
         }
@@ -628,7 +700,20 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
     }
     nameSurface() {
         const surface = this.menuBox;
-        if (!surface || !('ariaLabelledByElements' in surface)) {
+        if (!surface) {
+            return;
+        }
+        if (!this.flies && !this.drilldown.atRoot && this.partNamed('title')) {
+            surface.setAttribute('aria-labelledby', 'title');
+            this.namedByPage = true;
+            return;
+        }
+        if (this.namedByPage) {
+            this.namedByPage = false;
+            surface.removeAttribute('aria-labelledby');
+            this.aria.forward();
+        }
+        if (!('ariaLabelledByElements' in surface)) {
             return;
         }
         if (this.hasAttribute('aria-labelledby')) {
@@ -673,8 +758,15 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
     render() {
         const point = this.context && this.point;
         const filtering = this.filtering;
-        const none = filtering && !this.rowsOf(this.filterPage).some((row) => this.kept(row));
-        this.announced = none ? this.noResultsText : '';
+        const count = filtering
+            ? this.rowsOf(this.filterPage).filter((row) => this.kept(row)).length
+            : 0;
+        const none = filtering && count === 0;
+        this.announced = none
+            ? this.noResultsText
+            : filtering
+                ? formatWords(this, 'resultsLabel', { count })
+                : '';
         const rows = html `${this.flies || this.drilldown.atRoot
             ? nothing
             : html `<div part="header">
@@ -690,7 +782,7 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
                 ${unsafeSVG(caretLeft.content)}
               </svg>
             </button>
-            <span part="title">${this.drilldown.label}</span>
+            <span part="title" id="title">${this.drilldown.label}</span>
           </div>`}
       <slot @slotchange=${(event) => this.countRows(event)}></slot>
       ${none
@@ -775,6 +867,10 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessMenu.prototype, "placement", void 0);
+__decorate([
+    words,
+    property({ attribute: 'results-label' })
+], HelixHeadlessMenu.prototype, "resultsLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessMenu.prototype, "submenus", void 0);

package/dist/number-input/root/number-input-root.d.ts

@@ -124,7 +124,9 @@ export declare class HelixHeadlessNumberInput extends HelixHeadlessNumberInput_b
      */
     badInputMessage: string;
     /**
-     * The name of the step down button, read by screen readers.
+     * The name of the step down button, read by screen readers. The field's
+     * label follows it, so a reader hears "Decrease Quantity", as React Aria
+     * names its steppers.
      */
     decrementLabel: string;
     /**
@@ -138,7 +140,9 @@ export declare class HelixHeadlessNumberInput extends HelixHeadlessNumberInput_b
      */
     formatOptions?: Intl.NumberFormatOptions;
     /**
-     * The name of the step up button, read by screen readers.
+     * The name of the step up button, read by screen readers. The field's
+     * label follows it, so a reader hears "Increase Quantity", as React Aria
+     * names its steppers.
      */
     incrementLabel: string;
     /**
@@ -321,16 +325,22 @@ export declare class HelixHeadlessNumberInput extends HelixHeadlessNumberInput_b
      * refused step, or one pinned at a bound, finished nothing.
      */
     private land;
-    /** Steps the value up, by `largeStep` steps when `large` is set. */
-    stepUp(large?: boolean): void;
     /**
-     * Steps the value down, by `largeStep` steps when `large` is set.
+     * Steps the value up by `step`, `count` times, as the native method and
+     * `Input.stepUp` do. `true` takes `largeStep` steps, as `PageUp` does.
+     */
+    stepUp(count?: number | boolean): void;
+    /**
+     * Steps the value down by `step`, `count` times. `true` takes `largeStep`
+     * steps, as `PageDown` does.
      *
      * The same path a press of the down arrow takes, so a consumer driving this
      * from their own control gets the clamping and the announcement rather than
      * having to repeat both.
      */
-    stepDown(large?: boolean): void;
+    stepDown(count?: number | boolean): void;
+    /** How many steps a `stepUp` argument asks for: a count, or `largeStep` for `true`. */
+    private stepsOf;
     /** The timer of a held stepper button. */
     private repeat;
     /** Whether a pointer press stepped already, so the click that ends it does not step again. */

package/dist/number-input/root/number-input-root.js

@@ -324,11 +324,17 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
             this.announceChange();
         }
     }
-    stepUp(large = false) {
-        this.nudge(large ? (this.largeStep ?? 10) : 1);
+    stepUp(count = 1) {
+        this.nudge(this.stepsOf(count));
     }
-    stepDown(large = false) {
-        this.nudge(large ? -(this.largeStep ?? 10) : -1);
+    stepDown(count = 1) {
+        this.nudge(-this.stepsOf(count));
+    }
+    stepsOf(count) {
+        if (typeof count === 'boolean') {
+            return count ? (this.largeStep ?? 10) : 1;
+        }
+        return Number.isFinite(count) ? Math.trunc(count) : 1;
     }
     disconnectedCallback() {
         super.disconnectedCallback();
@@ -342,6 +348,7 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
         return html `<label
       part="label"
       for=${this.controlId}
+      id=${this.labelId}
       ?data-hidden=${hidden !== null}
       @pointercancel=${this.handleScrubEnd}
       @pointerdown=${this.handleScrubDown}
@@ -455,8 +462,10 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
       <div part="field" role="group" aria-labelledby=${this.labeled ? this.labelId : nothing}>
         <button
           part="decrement"
+          id="decrement"
           type="button"
           aria-label=${this.decrementLabel}
+          aria-labelledby=${this.labeled ? `decrement ${this.labelId}` : nothing}
           tabindex="-1"
           ?disabled=${this.isDisabled || this.readOnly || atMin}
           @click=${this.handleStepperClick}
@@ -511,8 +520,10 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
         <slot name="end"></slot>
         <button
           part="increment"
+          id="increment"
           type="button"
           aria-label=${this.incrementLabel}
+          aria-labelledby=${this.labeled ? `increment ${this.labelId}` : nothing}
           tabindex="-1"
           ?disabled=${this.isDisabled || this.readOnly || atMax}
           @click=${this.handleStepperClick}

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
@@ -310,6 +310,8 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
         }
         else {
             this.stopAligning();
+            this.toggleState('placed-bottom', false);
+            this.toggleState('placed-top', false);
             this.listbox?.requestFilter('');
         }
     }