@fusion.dev/helix-core 0.32.0 → 0.33.0

package/custom-elements.json

@@ -199,6 +199,15 @@
               },
               "description": "The box the readings are laid out in, which is the plot and not the host.\n\nThe host also holds the row of labels, so measuring against it would map\nthe pointer over a box taller than the drawing. That mattered the moment a\nchart started measuring down the box rather than across it, which is what\n`axis` is for: on a horizontal bar chart the labels are beside the plot\nrather than under it, and the host is wider than the drawing by exactly\ntheir column.\n\n**Held only while it is still in the tree.** Every chart renders a\ndifferent template for its empty state, so the plot a pointer crossed\nbefore the table filled is a node Lit has since replaced: held forever, it\nmeasures a detached box and the tooltip never appears. Looked up again\nwhenever the held one has left, which is once per data arrival rather than\nonce per move."
             },
+            {
+              "kind": "field",
+              "name": "mirrored",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Whether the drawing is turned to run right to left, which it is on a\nright-to-left page.\n\n`HelixElement` mirrors a drawing marked `data-mirror` there, so a reading\ndrawn at 10% of the plot's width stands 10% in from its right edge. What is\nread against the drawing has to be read the same way: the pointer from the\nplot's right, and a bubble beside a bar's far end on its left. Asked of the\nhost's computed `direction`, which is what the table and the splitter read\nfor their own arrow keys.\n\nOn the controller because it is what reads the pointer against the drawing,\nand a chart deciding which side a bubble goes asks here rather than\nrepeating the question. Asked when needed rather than held, since a page\ncan change its direction without the chart updating.",
+              "readonly": true
+            },
             {
               "kind": "method",
               "name": "set",
@@ -868,7 +877,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Places one element against another, and keeps it there.\n\nPositioning is `@floating-ui/dom` rather than arithmetic written here. Two\nthings in particular are why. A `position: fixed` element inside an ancestor\ncarrying `transform`, `filter`, `will-change`, or `contain` is positioned\nagainst that ancestor and not the viewport, so viewport coordinates land it\nsomewhere else entirely. And an overlay has to clear its nearest *clipping*\nancestor, not just the window, or it is placed correctly inside a scrolling\npanel and clipped out of sight by it. Both are ordinary here, and both are a\nlong tail of browser behavior rather than a formula.\n\n`autoUpdate` keeps the position through scrolling on any ancestor, resizes of\neither element, and layout shifts.\n\nThe side the element actually landed on is written back as `data-placement`,\nso a styled tier can animate from it rather than from the side that was\nasked for.\n\n**The custom properties are declared here because this is what writes them.**\nEach carries a measurement taken against the viewport that no stylesheet can\ntake for itself, and `core` ships no CSS, so there is no reader inside this\npackage and none of them is private. the `hooks` rule pairs a documented\nhook with a rule that reads one, in both directions.",
+          "description": "Places one element against another, and keeps it there.\n\nPositioning is `@floating-ui/dom` rather than arithmetic written here. Two\nthings in particular are why. A `position: fixed` element inside an ancestor\ncarrying `transform`, `filter`, `will-change`, or `contain` is positioned\nagainst that ancestor and not the viewport, so viewport coordinates land it\nsomewhere else entirely. And an overlay has to clear its nearest *clipping*\nancestor, not just the window, or it is placed correctly inside a scrolling\npanel and clipped out of sight by it. Both are ordinary here, and both are a\nlong tail of browser behavior rather than a formula.\n\n`autoUpdate` keeps the position through scrolling on any ancestor, resizes of\neither element, and layout shifts.\n\nThe side the element actually landed on is written back as `data-placement`,\nso a styled tier can animate from it rather than from the side that was\nasked for. An arrow is placed whole, on the edge facing the anchor, so no\nstylesheet has to know which side that is to point it the right way.\n\n**The custom properties are declared here because this is what writes them.**\nEach carries a measurement taken against the viewport that no stylesheet can\ntake for itself, and `core` ships no CSS, so there is no reader inside this\npackage and none of them is private. the `hooks` rule pairs a documented\nhook with a rule that reads one, in both directions.",
           "name": "FloatingController",
           "cssProperties": [
             {
@@ -876,11 +885,11 @@
               "name": "--floating-anchor-inline-size"
             },
             {
-              "description": "Where the pointer meets the anchor, along the inline axis.",
+              "description": "Where the pointer meets the anchor, from the panel's left edge in either direction.",
               "name": "--floating-arrow-x"
             },
             {
-              "description": "Where the pointer meets the anchor, along the block axis.",
+              "description": "Where the pointer meets the anchor, from the panel's top edge.",
               "name": "--floating-arrow-y"
             },
             {
@@ -955,6 +964,16 @@
               },
               "description": "Stops placing and releases everything it was tracking."
             },
+            {
+              "kind": "method",
+              "name": "release",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Takes back what placing wrote, for a surface its own sheet places now.\n\n**One surface can be both**, which is why this exists: a megamenu is a card\nits trigger places on a wide window and a band its sheet places on a narrow\none. Opened once as a card, it kept the card's edges and translate, and\ninline declarations win over the band's own sheet, so the band opened at\nthe card's offset with no right edge to stretch to. `stop` leaves them on\npurpose, since a panel transitioning out still has to be where it was."
+            },
             {
               "kind": "method",
               "name": "hostDisconnected",
@@ -977,6 +996,14 @@
             "module": "src/controllers/floating-controller/floating-controller.ts"
           }
         },
+        {
+          "kind": "js",
+          "name": "Side",
+          "declaration": {
+            "name": "Side",
+            "module": "src/controllers/floating-controller/floating-controller.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "FloatingController",
@@ -1243,7 +1270,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Moves through a set of items with the arrow keys, and chooses as it goes.\n\n**Moving and choosing are one act here, not two.** That is the radio group\npattern and it is the difference from a listbox: moving focus without\nchoosing leaves a keyboard reader sitting on an item they have not selected,\nwith nothing on screen saying which of the two is true. A pointer user\nchooses by arriving, so a keyboard user does too.\n\n**Both axes, always.** A vertical set still answers left and right, and a\nhorizontal one still answers up and down. Binding only the axis the items\nhappen to be laid out on means a reader who guesses wrong gets nothing, and\n`orientation` is presentation: the same set of choices reads the same way\nwhichever direction it runs.\n\nDisabled items are skipped rather than stopped at, so a set with a gap in it\nstill moves in one press.\n\nA set that starts from focus rather than from the selection, or that moves\nwithout choosing, says so through `origin` and `selects`. Neither is a reason\nto keep a hand-written copy, and neither exempts a set from both axes.",
+          "description": "Moves through a set of items with the arrow keys, and chooses as it goes.\n\n**Moving and choosing are one act here, not two.** That is the radio group\npattern and it is the difference from a listbox: moving focus without\nchoosing leaves a keyboard reader sitting on an item they have not selected,\nwith nothing on screen saying which of the two is true. A pointer user\nchooses by arriving, so a keyboard user does too.\n\n**Both axes, always.** A vertical set still answers left and right, and a\nhorizontal one still answers up and down. Binding only the axis the items\nhappen to be laid out on means a reader who guesses wrong gets nothing, and\n`orientation` is presentation: the same set of choices reads the same way\nwhichever direction it runs.\n\n**The horizontal pair turns with the line.** On a right-to-left page the\nfirst item is on the right, so left is forward there, which is what a native\nradio group does, measured in Chromium on 15 Sep 2026. Vertical sets\nincluded: the key a reader guesses on a column is the one that goes forward\nalong a row of the same items, and the two answering differently would make\n`orientation` more than presentation after all.\n\nDisabled items are skipped rather than stopped at, so a set with a gap in it\nstill moves in one press.\n\nA set that starts from focus rather than from the selection, or that moves\nwithout choosing, says so through `origin` and `selects`. Neither is a reason\nto keep a hand-written copy, and neither exempts a set from both axes.",
           "name": "KeyboardNavigationController",
           "members": [
             {
@@ -3529,7 +3556,7 @@
                 "text": "Promise<void>"
               },
               "readonly": true,
-              "description": "Resolves a frame after the first update, when transitions are switched on.\n\n**Named `whenSettled` because `settled` is taken four times over**, by\nImage, Splitter and both color controls, none of them about transitions. A\nbase class takes the name every subclass then cannot use.\n\n**The state it reports cannot be watched, which is why this exists.** A\ncustom state is deliberately not in the DOM, so there is no\n`MutationObserver` equivalent for `ElementInternals.states`. Await this\ninstead.\n\nSeparate from `updateComplete`, which resolves in the microtask checkpoint\nthe suppression is still active in. That is the distinction `readyToMove`\nin `@fusion.dev/helix-testing` is written around.\n\nIt never resolves where `requestAnimationFrame` never fires, which is a\nserver, a hidden tab, and happy-dom. Callers that must not hang race it\nagainst a timeout; `readyToMove` does exactly that.",
+              "description": "Resolves a frame after the first update, when transitions are switched on.\n\n**Named `whenSettled` because `settled` is taken four times over**, by\nImage, Splitter and both color controls, none of them about transitions. A\nbase class takes the name every subclass then cannot use.\n\n**The state it reports cannot be watched, which is why this exists.** A\ncustom state is deliberately not in the DOM, so there is no\n`MutationObserver` equivalent for `ElementInternals.states`. Await this\ninstead.\n\nSeparate from `updateComplete`, which resolves in the microtask checkpoint\nthe suppression is still active in. That is the distinction `readyToMove`\nin `@fusion.dev/helix-testing` is written around.\n\nIt never resolves where `requestAnimationFrame` never fires, which is a\nserver, a hidden tab, and happy-dom. Callers that must not hang there race\nit against a timeout, as the happy-dom harness's `readyToMove` does. The\nbrowser harness's awaits it alone: a browser always runs the frame, and a\ntimer beside it was a bet on how long one takes, which a busy run lost.",
               "default": "new Promise<void>((resolve) => { this.resolveSettled = resolve })"
             },
             {
@@ -4141,7 +4168,7 @@
                 "text": "Promise<void>"
               },
               "readonly": true,
-              "description": "Resolves a frame after the first update, when transitions are switched on.\n\n**Named `whenSettled` because `settled` is taken four times over**, by\nImage, Splitter and both color controls, none of them about transitions. A\nbase class takes the name every subclass then cannot use.\n\n**The state it reports cannot be watched, which is why this exists.** A\ncustom state is deliberately not in the DOM, so there is no\n`MutationObserver` equivalent for `ElementInternals.states`. Await this\ninstead.\n\nSeparate from `updateComplete`, which resolves in the microtask checkpoint\nthe suppression is still active in. That is the distinction `readyToMove`\nin `@fusion.dev/helix-testing` is written around.\n\nIt never resolves where `requestAnimationFrame` never fires, which is a\nserver, a hidden tab, and happy-dom. Callers that must not hang race it\nagainst a timeout; `readyToMove` does exactly that.",
+              "description": "Resolves a frame after the first update, when transitions are switched on.\n\n**Named `whenSettled` because `settled` is taken four times over**, by\nImage, Splitter and both color controls, none of them about transitions. A\nbase class takes the name every subclass then cannot use.\n\n**The state it reports cannot be watched, which is why this exists.** A\ncustom state is deliberately not in the DOM, so there is no\n`MutationObserver` equivalent for `ElementInternals.states`. Await this\ninstead.\n\nSeparate from `updateComplete`, which resolves in the microtask checkpoint\nthe suppression is still active in. That is the distinction `readyToMove`\nin `@fusion.dev/helix-testing` is written around.\n\nIt never resolves where `requestAnimationFrame` never fires, which is a\nserver, a hidden tab, and happy-dom. Callers that must not hang there race\nit against a timeout, as the happy-dom harness's `readyToMove` does. The\nbrowser harness's awaits it alone: a browser always runs the frame, and a\ntimer beside it was a bet on how long one takes, which a busy run lost.",
               "default": "new Promise<void>((resolve) => { this.resolveSettled = resolve })",
               "inheritedFrom": {
                 "name": "HelixElement",
@@ -4568,6 +4595,14 @@
             "module": "./controllers/floating-controller/floating-controller.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "Side",
+          "declaration": {
+            "name": "Side",
+            "module": "./controllers/floating-controller/floating-controller.js"
+          }
+        },
         {
           "kind": "js",
           "name": "FocusTrapController",
@@ -5528,6 +5563,14 @@
             "module": "./utils/inherit-disabled/inherit-disabled.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "inlineStep",
+          "declaration": {
+            "name": "inlineStep",
+            "module": "./utils/inline-step/inline-step.js"
+          }
+        },
         {
           "kind": "js",
           "name": "Curve",
@@ -8070,6 +8113,25 @@
               "readonly": true,
               "description": "The overlay, placed against the field rather than the trigger."
             },
+            {
+              "kind": "method",
+              "name": "placed",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "room",
+                  "type": {
+                    "text": "number | undefined"
+                  }
+                }
+              ],
+              "description": "Told the panel has been placed, and how wide the window leaves it room to\nbe, in pixels.\n\nNothing, unless a family fits what its panel holds to the room it has."
+            },
             {
               "kind": "method",
               "name": "restore",
@@ -8136,9 +8198,28 @@
               "name": "panel",
               "privacy": "protected",
               "readonly": true,
-              "default": "new PopoverController(this, { anchor: () => this.partNamed('field'), /* The surface *and* the trigger. * * A control is not always one element: the button that opens this panel is * part of it, and a press on it is not a press outside. Scoped to the * surface alone, `pointerdown` on the trigger closes the panel and the * trigger's own `toggleOpen` reopens it on the `click` that follows, so the * panel can never be closed by the button that opened it. * `DismissController` documents this failure and takes a list for it. */ boundary: (): readonly (Element | null | undefined)[] => [ this.partNamed('surface'), this.partNamed('trigger'), ], /* Wider than the four every other panel here takes. Those sit against a control the same width as themselves and read as an extension of it; this one is a picker of its own size hanging off a field, so the gap is what says the two are separate things rather than one control that grew. */ offset: () => 8, onDismiss: () => this.requestOpen(false), open: () => this.open, placement: 'bottom-start', surface: () => this.partNamed('surface'), })",
+              "default": "new PopoverController(this, { anchor: () => this.partNamed('field'), /* The surface *and* the trigger. * * A control is not always one element: the button that opens this panel is * part of it, and a press on it is not a press outside. Scoped to the * surface alone, `pointerdown` on the trigger closes the panel and the * trigger's own `toggleOpen` reopens it on the `click` that follows, so the * panel can never be closed by the button that opened it. * `DismissController` documents this failure and takes a list for it. */ boundary: (): readonly (Element | null | undefined)[] => [ this.partNamed('surface'), this.partNamed('trigger'), ], /* Wider than the four every other panel here takes. Those sit against a control the same width as themselves and read as an extension of it; this one is a picker of its own size hanging off a field, so the gap is what says the two are separate things rather than one control that grew. */ offset: () => 8, onDismiss: () => this.requestOpen(false), onPlace: (_placement, room) => this.placed(room), open: () => this.open, placement: 'bottom-start', surface: () => this.partNamed('surface'), })",
               "description": "The overlay, placed against the field rather than the trigger.\n\nAgainst the field because that is the box a reader sees as the control: a\ncalendar hung off a small button at one end of a wide field reads as\nbelonging to the button. `Select` anchors to its trigger for the opposite\nreason, its trigger being the whole control."
             },
+            {
+              "kind": "method",
+              "name": "placed",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "_room",
+                  "type": {
+                    "text": "number | undefined"
+                  }
+                }
+              ],
+              "description": "Told the panel has been placed, and how wide the window leaves it room to\nbe, in pixels.\n\nNothing, unless a family fits what its panel holds to the room it has."
+            },
             {
               "kind": "field",
               "name": "anchor",
@@ -9224,6 +9305,46 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/utils/inline-step/inline-step.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "inlineStep",
+          "return": {
+            "type": {
+              "text": "-1 | 0 | 1"
+            }
+          },
+          "parameters": [
+            {
+              "name": "element",
+              "type": {
+                "text": "Element"
+              }
+            },
+            {
+              "name": "key",
+              "type": {
+                "text": "string"
+              }
+            }
+          ],
+          "description": "Which way along the line of text a horizontal arrow key moves.\n\n`1` for the key pointing where the line runs, `-1` for the one pointing back\nto where it started, `0` for any other key. On a left-to-right page that is\n`ArrowRight` and `ArrowLeft`; on a right-to-left page it is the other way\nround, because a row of tabs, a toolbar or a week of days is laid out from\nthe right there and an arrow is a promise about where on screen focus goes.\n\n**The computed `direction`, not `:dir()` or the `dir` attribute.** The two\npart only where a sheet sets `direction` without `dir`, and there the row is\nlaid out by `direction`: a flex row and a grid both follow it. What a reader\nsees is the order the key has to agree with, and it is the question the\ntable's and the splitter's pointer arithmetic already ask.\n\nAsked at the press rather than once, so a page that changes `dir` is\nanswered in its new direction without anything having to watch it.\n\nUp and down are not asked about: a block runs down the page in every script\nhere, so a vertical key means the same thing whichever way the line runs."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "inlineStep",
+          "declaration": {
+            "name": "inlineStep",
+            "module": "src/utils/inline-step/inline-step.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/utils/line-path/line-path.ts",

package/dist/controllers/chart-pointer-controller/chart-pointer-controller.d.ts

@@ -93,6 +93,23 @@ export declare class ChartPointerController implements ReactiveController {
      * once per move.
      */
     private box;
+    /**
+     * Whether the drawing is turned to run right to left, which it is on a
+     * right-to-left page.
+     *
+     * `HelixElement` mirrors a drawing marked `data-mirror` there, so a reading
+     * drawn at 10% of the plot's width stands 10% in from its right edge. What is
+     * read against the drawing has to be read the same way: the pointer from the
+     * plot's right, and a bubble beside a bar's far end on its left. Asked of the
+     * host's computed `direction`, which is what the table and the splitter read
+     * for their own arrow keys.
+     *
+     * On the controller because it is what reads the pointer against the drawing,
+     * and a chart deciding which side a bubble goes asks here rather than
+     * repeating the question. Asked when needed rather than held, since a page
+     * can change its direction without the chart updating.
+     */
+    get mirrored(): boolean;
     /** Puts the pointer on a reading, for a chart that resolves it some other way. */
     set(at: number): void;
     private readonly move;

package/dist/controllers/chart-pointer-controller/chart-pointer-controller.js

@@ -13,7 +13,11 @@ export class ChartPointerController {
             if (!box || !along || count === 0) {
                 return;
             }
-            const from = this.axis === 'block' ? event.clientY - box.top : event.clientX - box.left;
+            const from = this.axis === 'block'
+                ? event.clientY - box.top
+                : this.mirrored
+                    ? box.right - event.clientX
+                    : event.clientX - box.left;
             const slot = Math.floor((from / along) * count);
             const next = Math.min(Math.max(slot, 0), count - 1);
             if (next !== this.at) {
@@ -55,6 +59,9 @@ export class ChartPointerController {
         }
         return this.plot?.getBoundingClientRect();
     }
+    get mirrored() {
+        return typeof getComputedStyle === 'function' && getComputedStyle(this.host).direction === 'rtl';
+    }
     set(at) {
         if (at !== this.at) {
             this.at = at;

package/dist/controllers/floating-controller/floating-controller.d.ts

@@ -1,6 +1,6 @@
-import { type Placement } from '@floating-ui/dom';
+import { type Placement, type Side } from '@floating-ui/dom';
 import type { ReactiveController, ReactiveControllerHost } from 'lit';
-export type { Placement };
+export type { Placement, Side };
 export interface FloatingOptions {
     /** The element being pointed at. */
     anchor: () => HTMLElement | null | undefined;
@@ -19,14 +19,20 @@ export interface FloatingOptions {
      */
     flip?: boolean;
     /**
-     * Told the placement the element landed on, after every measurement.
+     * Told the placement the element landed on, after every measurement, and
+     * how wide the window leaves it room to be.
      *
-     * `data-placement` already says it, on the floating element, which is inside
-     * the host's shadow root. A stylesheet outside reaches that element through
-     * `::part()`, and `::part()` cannot be followed by an attribute selector, so
-     * a host whose surface is drawn from outside records the side on itself.
+     * `data-placement` already says the side, on the floating element, which is
+     * inside the host's shadow root. A stylesheet outside reaches that element
+     * through `::part()`, and `::part()` cannot be followed by an attribute
+     * selector, so a host whose surface is drawn from outside records the side on
+     * itself.
+     *
+     * The room is in pixels, and absent where `resize` is off. It is for a host
+     * that changes what it shows to fit, which a stylesheet cannot do when what
+     * changes is markup: Date Input shows one month instead of two.
      */
-    onPlace?: (placement: Placement) => void;
+    onPlace?: (placement: Placement, room: number | undefined) => void;
     /**
      * Space between the anchor and the floating element, in pixels.
      *
@@ -87,7 +93,8 @@ export interface FloatingOptions {
  *
  * The side the element actually landed on is written back as `data-placement`,
  * so a styled tier can animate from it rather than from the side that was
- * asked for.
+ * asked for. An arrow is placed whole, on the edge facing the anchor, so no
+ * stylesheet has to know which side that is to point it the right way.
  *
  * **The custom properties are declared here because this is what writes them.**
  * Each carries a measurement taken against the viewport that no stylesheet can
@@ -96,8 +103,8 @@ export interface FloatingOptions {
  * hook with a rule that reads one, in both directions.
  *
  * @cssproperty --floating-anchor-inline-size - How wide the anchor is, for a panel that matches it.
- * @cssproperty --floating-arrow-x - Where the pointer meets the anchor, along the inline axis.
- * @cssproperty --floating-arrow-y - Where the pointer meets the anchor, along the block axis.
+ * @cssproperty --floating-arrow-x - Where the pointer meets the anchor, from the panel's left edge in either direction.
+ * @cssproperty --floating-arrow-y - Where the pointer meets the anchor, from the panel's top edge.
  * @cssproperty --floating-available-block-size - How much room is left below, for a panel that scrolls.
  */
 export declare class FloatingController implements ReactiveController {
@@ -138,6 +145,17 @@ export declare class FloatingController implements ReactiveController {
     start(): void;
     /** Stops placing and releases everything it was tracking. */
     stop(): void;
+    /**
+     * Takes back what placing wrote, for a surface its own sheet places now.
+     *
+     * **One surface can be both**, which is why this exists: a megamenu is a card
+     * its trigger places on a wide window and a band its sheet places on a narrow
+     * one. Opened once as a card, it kept the card's edges and translate, and
+     * inline declarations win over the band's own sheet, so the band opened at
+     * the card's offset with no right edge to stretch to. `stop` leaves them on
+     * purpose, since a panel transitioning out still has to be where it was.
+     */
+    release(): void;
     /** Measures both elements and writes the position. */
     readonly update: () => void;
     hostDisconnected(): void;

package/dist/controllers/floating-controller/floating-controller.js

@@ -1,4 +1,5 @@
 import { arrow, autoUpdate, computePosition, flip, offset, shift, size, } from '@floating-ui/dom';
+const FACING = { bottom: 'top', left: 'right', right: 'left', top: 'bottom' };
 const corner = (floating) => {
     const style = getComputedStyle(floating);
     const corners = [
@@ -36,6 +37,7 @@ export class FloatingController {
                 ? this.options.placement()
                 : this.options.placement;
             const middleware = [offset(gap ?? 0)];
+            let room;
             if (this.options.flip !== false) {
                 const side = (preferred ?? 'bottom-start').split('-')[0];
                 middleware.push(flip(side === 'left' || side === 'right'
@@ -48,7 +50,8 @@ export class FloatingController {
             }
             if (this.options.resize !== false) {
                 middleware.push(size({
-                    apply: ({ availableHeight, elements, rects }) => {
+                    apply: ({ availableHeight, availableWidth, elements, rects }) => {
+                        room = availableWidth;
                         elements.floating.style.setProperty('--floating-available-block-size', `${Math.round(availableHeight)}px`);
                         elements.floating.style.setProperty('--floating-anchor-inline-size', `${Math.round(rects.reference.width)}px`);
                     },
@@ -67,21 +70,35 @@ export class FloatingController {
                     return;
                 }
                 this.placement = placement;
+                for (const [edge, value] of [
+                    ['bottom', 'auto'],
+                    ['left', '0'],
+                    ['right', 'auto'],
+                    ['top', '0'],
+                ]) {
+                    floating.style.setProperty(edge, value, 'important');
+                }
                 Object.assign(floating.style, {
-                    insetBlockStart: '0',
-                    insetInlineStart: '0',
                     position: 'fixed',
                     translate: `${Math.round(x)}px ${Math.round(y)}px`,
                 });
                 floating.setAttribute('data-placement', placement);
                 floating.setAttribute('data-placed', '');
-                this.options.onPlace?.(placement);
+                this.options.onPlace?.(placement, room === undefined ? undefined : Math.floor(room));
                 const point = middlewareData.arrow;
                 if (pointer && point) {
-                    Object.assign(pointer.style, {
-                        insetBlockStart: point.y === undefined ? '' : `${point.y}px`,
-                        insetInlineStart: point.x === undefined ? '' : `${point.x}px`,
-                    });
+                    const facing = FACING[placement.split('-')[0]];
+                    const reach = (facing === 'left' || facing === 'right' ? pointer.offsetWidth : pointer.offsetHeight) / 2;
+                    const edges = {
+                        bottom: 'auto',
+                        left: point.x === undefined ? 'auto' : `${point.x}px`,
+                        right: 'auto',
+                        top: point.y === undefined ? 'auto' : `${point.y}px`,
+                    };
+                    edges[facing] = `${-reach}px`;
+                    for (const [edge, value] of Object.entries(edges)) {
+                        pointer.style.setProperty(edge, value, 'important');
+                    }
                     floating.style.setProperty('--floating-arrow-x', point.x === undefined ? '' : `${Math.round(point.x + pointer.offsetWidth / 2)}px`);
                     floating.style.setProperty('--floating-arrow-y', point.y === undefined ? '' : `${Math.round(point.y + pointer.offsetHeight / 2)}px`);
                 }
@@ -106,6 +123,31 @@ export class FloatingController {
         this.padding = undefined;
         this.options.floating()?.removeAttribute('data-placed');
     }
+    release() {
+        const floating = this.options.floating();
+        if (!floating) {
+            return;
+        }
+        for (const one of [
+            '--floating-anchor-inline-size',
+            '--floating-arrow-x',
+            '--floating-arrow-y',
+            '--floating-available-block-size',
+            'bottom',
+            'left',
+            'position',
+            'right',
+            'top',
+            'translate',
+        ]) {
+            floating.style.removeProperty(one);
+        }
+        const pointer = this.options.arrow?.();
+        for (const one of ['bottom', 'left', 'right', 'top']) {
+            pointer?.style.removeProperty(one);
+        }
+        floating.removeAttribute('data-placement');
+    }
     hostDisconnected() {
         this.stop();
     }

package/dist/controllers/keyboard-navigation-controller/keyboard-navigation-controller.d.ts

@@ -82,6 +82,13 @@ export interface KeyboardNavigationOptions {
  * `orientation` is presentation: the same set of choices reads the same way
  * whichever direction it runs.
  *
+ * **The horizontal pair turns with the line.** On a right-to-left page the
+ * first item is on the right, so left is forward there, which is what a native
+ * radio group does, measured in Chromium on 15 Sep 2026. Vertical sets
+ * included: the key a reader guesses on a column is the one that goes forward
+ * along a row of the same items, and the two answering differently would make
+ * `orientation` more than presentation after all.
+ *
  * Disabled items are skipped rather than stopped at, so a set with a gap in it
  * still moves in one press.
  *

package/dist/controllers/keyboard-navigation-controller/keyboard-navigation-controller.js

@@ -1,3 +1,4 @@
+import { inlineStep } from '../../utils/inline-step/inline-step.js';
 const KEYS = new Set(['ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'End', 'Home']);
 export class KeyboardNavigationController {
     constructor(host, { items, origin = 'selection', reserved = () => [], selects = () => true, wrap = true, }) {
@@ -16,11 +17,12 @@ export class KeyboardNavigationController {
                 return;
             }
             const last = items.length - 1;
+            const along = inlineStep(this.host, event.key);
             let next = current;
-            if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {
+            if (along === 1 || event.key === 'ArrowDown') {
                 next = this.wrap ? (current + 1) % items.length : Math.min(current + 1, last);
             }
-            else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {
+            else if (along === -1 || event.key === 'ArrowUp') {
                 next =
                     current < 0
                         ? last

package/dist/controllers/popover-controller/popover-controller.d.ts

@@ -57,10 +57,11 @@ export interface PopoverOptions {
      */
     onDismiss: () => void;
     /**
-     * Told the placement the surface landed on, after every measurement. Passed
-     * through to the floating pass, which says why a host would want it.
+     * Told the placement the surface landed on, after every measurement, and how
+     * wide the window leaves it room to be. Passed through to the floating pass,
+     * which says why a host would want either.
      */
-    onPlace?: (placement: Placement) => void;
+    onPlace?: (placement: Placement, room: number | undefined) => void;
     /**
      * Whether the host wants the surface up, read after every update.
      *

package/dist/controllers/popover-controller/popover-controller.js

@@ -56,6 +56,9 @@ export class PopoverController {
         if (this.places) {
             this.floating.start();
         }
+        else {
+            this.floating.release();
+        }
         this.dismisser.activate();
     }
     hide() {

package/dist/helix-element/helix-element.d.ts

@@ -137,8 +137,10 @@ export declare class HelixElement extends LitElement {
      * in `@fusion.dev/helix-testing` is written around.
      *
      * It never resolves where `requestAnimationFrame` never fires, which is a
-     * server, a hidden tab, and happy-dom. Callers that must not hang race it
-     * against a timeout; `readyToMove` does exactly that.
+     * server, a hidden tab, and happy-dom. Callers that must not hang there race
+     * it against a timeout, as the happy-dom harness's `readyToMove` does. The
+     * browser harness's awaits it alone: a browser always runs the frame, and a
+     * timer beside it was a bet on how long one takes, which a busy run lost.
      */
     readonly whenSettled: Promise<void>;
     /** Resolves `whenSettled`, once, from the frame that records the state. */

package/dist/helix-element/helix-element.js

@@ -18,6 +18,11 @@ const SCROLLER = css `
     overflow: auto;
   }
 `;
+const MIRROR = css `
+  :host(:dir(rtl)) [data-mirror] {
+    scale: -1 1;
+  }
+`;
 const SETTLED = css `
   :host(:not(:state(settled))),
   :host(:not(:state(settled))) * {
@@ -103,7 +108,7 @@ export class HelixElement extends LitElement {
         }));
     }
     static finalizeStyles(styles) {
-        return [BOX_SIZING, HIDDEN, SCROLLER, SETTLED, ...LitElement.finalizeStyles(styles)];
+        return [BOX_SIZING, HIDDEN, SCROLLER, MIRROR, SETTLED, ...LitElement.finalizeStyles(styles)];
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);

package/dist/index.d.ts

@@ -5,7 +5,7 @@ export { CopyController, type CopyOptions, } from './controllers/copy-controller
 export { DisabledCascadeController, type DisabledCascadeOptions, } from './controllers/disabled-cascade-controller/disabled-cascade-controller.js';
 export { DismissController, type DismissOptions, } from './controllers/dismiss-controller/dismiss-controller.js';
 export { DrilldownController, type DrilldownOptions, } from './controllers/drilldown-controller/drilldown-controller.js';
-export { FloatingController, type FloatingOptions, type Placement, } from './controllers/floating-controller/floating-controller.js';
+export { FloatingController, type FloatingOptions, type Placement, type Side, } from './controllers/floating-controller/floating-controller.js';
 export { FocusTrapController } from './controllers/focus-trap-controller/focus-trap-controller.js';
 export { IndicatorController, type IndicatorOptions, } from './controllers/indicator-controller/indicator-controller.js';
 export { KeyboardNavigationController, type KeyboardNavigationOptions, type NavigableItem, } from './controllers/keyboard-navigation-controller/keyboard-navigation-controller.js';
@@ -40,6 +40,7 @@ export { deepActiveElement, deepContains, focusableElements, } from './utils/foc
 export { formatNumbers } from './utils/format-numbers/format-numbers.js';
 export { type HostAria, hostAria } from './utils/host-aria/host-aria.js';
 export { type DisableableItem, forgetDisabled, inheritDisabled, } from './utils/inherit-disabled/inherit-disabled.js';
+export { inlineStep } from './utils/inline-step/inline-step.js';
 export { type Curve, linePath, type Point } from './utils/line-path/line-path.js';
 export { onUnlessFalse } from './utils/on-unless-false/on-unless-false.js';
 export { type Row, type RowCell, readRows, readSeries, type Series, type SeriesPoint, } from './utils/read-series/read-series.js';

package/dist/index.js

@@ -40,6 +40,7 @@ export { deepActiveElement, deepContains, focusableElements, } from './utils/foc
 export { formatNumbers } from './utils/format-numbers/format-numbers.js';
 export { hostAria } from './utils/host-aria/host-aria.js';
 export { forgetDisabled, inheritDisabled, } from './utils/inherit-disabled/inherit-disabled.js';
+export { inlineStep } from './utils/inline-step/inline-step.js';
 export { linePath } from './utils/line-path/line-path.js';
 export { onUnlessFalse } from './utils/on-unless-false/on-unless-false.js';
 export { readRows, readSeries, } from './utils/read-series/read-series.js';

package/dist/mixins/mixin-picker-field/mixin-picker-field.d.ts

@@ -41,6 +41,13 @@ export declare class MixinPickerFieldInterface {
     protected readonly handleKeydown: (event: KeyboardEvent) => void;
     /** The overlay, placed against the field rather than the trigger. */
     protected readonly panel: PopoverController;
+    /**
+     * Told the panel has been placed, and how wide the window leaves it room to
+     * be, in pixels.
+     *
+     * Nothing, unless a family fits what its panel holds to the room it has.
+     */
+    protected placed(room: number | undefined): void;
     /** Puts the field back where the answer differs from what was typed. */
     protected restore(): void;
     /** Puts the caret back in the field without the field reopening the panel. */

package/dist/mixins/mixin-picker-field/mixin-picker-field.js

@@ -11,6 +11,7 @@ export const MixinPickerField = (Base) => {
                 ],
                 offset: () => 8,
                 onDismiss: () => this.requestOpen(false),
+                onPlace: (_placement, room) => this.placed(room),
                 open: () => this.open,
                 placement: 'bottom-start',
                 surface: () => this.partNamed('surface'),
@@ -24,6 +25,8 @@ export const MixinPickerField = (Base) => {
             };
             this.returning = false;
         }
+        placed(_room) {
+        }
         get anchor() {
             return this.control;
         }

package/dist/utils/draw-tooltip/draw-tooltip.d.ts

@@ -3,12 +3,35 @@ import { type StaticValue } from 'lit/static-html.js';
 import type { Row } from '../read-series/read-series.js';
 /** Where a tooltip points, in the plot's own percentages, and which side it prefers. */
 export interface TooltipAt {
+    /**
+     * Which way the bubble's words run, for a chart whose plot holds a direction
+     * the page does not have.
+     *
+     * Absent, the bubble takes the plot's, which is the page's for every chart
+     * but a scatter: its plane is left to right on every page, and the bubble is
+     * a row's names and values, which read the way the page does.
+     */
+    dir?: 'ltr' | 'rtl';
+    /**
+     * Whether `x` is measured from the plot's left in either direction, for a
+     * drawing that does not turn with the text.
+     *
+     * Absent measures from the plot's inline start, which is where a drawing
+     * marked `data-mirror` starts: its left, or its right on a right-to-left page.
+     * A whole ring is the case for this, its bearing being a clock's, and a
+     * scatter's plane, whose across is a measure and not the line of text.
+     */
+    fixed?: boolean;
     /**
      * The side the bubble prefers. It moves if that side does not fit.
+     *
+     * Physical, as `Tooltip`'s own is: a chart that mirrors says `left` for the
+     * side it would call `right` on a left-to-right page.
      */
     placement: 'bottom' | 'left' | 'right' | 'top';
     /**
-     * How far across the plot the reading is, as a percentage.
+     * How far across the plot the reading is, as a percentage, from the plot's
+     * inline start unless `fixed` says its left.
      */
     x: string;
     /**

package/dist/utils/draw-tooltip/draw-tooltip.js

@@ -16,10 +16,16 @@ export const drawTooltip = (rows, at, tag, where) => {
     return html `<div
       id="helix-chart-mark"
       part="mark"
-      style=${styleMap({ insetBlockStart: place.y, insetInlineStart: place.x })}
+      style=${styleMap(place.fixed
+        ? { left: place.x, top: place.y }
+        : { insetBlockStart: place.y, insetInlineStart: place.x })}
     ></div>
     <${tag}
-      exportparts="arrow: tooltip-arrow, tooltip"
+      dir=${place.dir ?? nothing}
+      exportparts="arrow: tooltip-arrow, arrow-bottom: tooltip-arrow-bottom,
+        arrow-left: tooltip-arrow-left, arrow-right: tooltip-arrow-right,
+        arrow-top: tooltip-arrow-top, tooltip, tooltip-bottom, tooltip-left, tooltip-right,
+        tooltip-top"
       for="helix-chart-mark"
       open
       part="tooltip-anchor"

package/dist/utils/inline-step/inline-step.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Which way along the line of text a horizontal arrow key moves.
+ *
+ * `1` for the key pointing where the line runs, `-1` for the one pointing back
+ * to where it started, `0` for any other key. On a left-to-right page that is
+ * `ArrowRight` and `ArrowLeft`; on a right-to-left page it is the other way
+ * round, because a row of tabs, a toolbar or a week of days is laid out from
+ * the right there and an arrow is a promise about where on screen focus goes.
+ *
+ * **The computed `direction`, not `:dir()` or the `dir` attribute.** The two
+ * part only where a sheet sets `direction` without `dir`, and there the row is
+ * laid out by `direction`: a flex row and a grid both follow it. What a reader
+ * sees is the order the key has to agree with, and it is the question the
+ * table's and the splitter's pointer arithmetic already ask.
+ *
+ * Asked at the press rather than once, so a page that changes `dir` is
+ * answered in its new direction without anything having to watch it.
+ *
+ * Up and down are not asked about: a block runs down the page in every script
+ * here, so a vertical key means the same thing whichever way the line runs.
+ */
+export declare const inlineStep: (element: Element, key: string) => -1 | 0 | 1;

package/dist/utils/inline-step/inline-step.js

@@ -0,0 +1,7 @@
+export const inlineStep = (element, key) => {
+    if (key !== 'ArrowLeft' && key !== 'ArrowRight') {
+        return 0;
+    }
+    const rtl = getComputedStyle(element).direction === 'rtl';
+    return (key === 'ArrowRight') !== rtl ? 1 : -1;
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-core",
   "description": "Helix element primitives: base classes, mixins, decorators, utilities.",
-  "version": "0.32.0",
+  "version": "0.33.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -34,12 +34,12 @@
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
     "@floating-ui/dom": "^1.8.0",
-    "@fusion.dev/helix-icons": "0.32.0"
+    "@fusion.dev/helix-icons": "0.33.0"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@fusion.dev/helix-cem": "0.32.0",
-    "@fusion.dev/helix-testing": "0.32.0",
+    "@fusion.dev/helix-cem": "0.33.0",
+    "@fusion.dev/helix-testing": "0.33.0",
     "lit": "^3.2.1"
   },
   "homepage": "https://fusion.dev",