@fusion.dev/helix-headless 0.32.0 → 0.33.1

package/dist/date-picker/root/date-picker-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 { valueAsDate as asDate, customElement, dateAsValue as fromDate, HelixFormElement, HelixNavigateEvent, hostAria, MixinControllerValue, requestChange, } from '@fusion.dev/helix-core';
+import { valueAsDate as asDate, customElement, dateAsValue as fromDate, HelixFormElement, HelixNavigateEvent, hostAria, inlineStep, MixinControllerValue, requestChange, } from '@fusion.dev/helix-core';
 import { caretLeft, caretRight } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -75,14 +75,12 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
                 return;
             }
             const from = this.anchor;
+            const along = inlineStep(this, event.key);
             if (event.key === 'Enter' || event.key === ' ') {
                 this.select(from);
             }
-            else if (event.key === 'ArrowLeft') {
-                this.moveTo(addDays(from, -1));
-            }
-            else if (event.key === 'ArrowRight') {
-                this.moveTo(addDays(from, 1));
+            else if (along !== 0) {
+                this.moveTo(addDays(from, along));
             }
             else if (event.key === 'ArrowUp') {
                 this.moveTo(addDays(from, -7));
@@ -296,14 +294,14 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
     }
     renderPreviousMark() {
         return html `<slot name="previous-icon">
-      <svg part="previous-mark" fill="currentColor" viewBox=${caretLeft.viewBox} aria-hidden="true">
+      <svg part="previous-mark" data-mirror fill="currentColor" viewBox=${caretLeft.viewBox} aria-hidden="true">
         ${unsafeSVG(caretLeft.content)}
       </svg>
     </slot>`;
     }
     renderNextMark() {
         return html `<slot name="next-icon">
-      <svg part="next-mark" fill="currentColor" viewBox=${caretRight.viewBox} aria-hidden="true">
+      <svg part="next-mark" data-mirror fill="currentColor" viewBox=${caretRight.viewBox} aria-hidden="true">
         ${unsafeSVG(caretRight.content)}
       </svg>
     </slot>`;

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

@@ -33,9 +33,17 @@ declare const HelixHeadlessDonutChart_base: typeof HelixElement & (new (...args:
  * @csspart tooltip - The bubble, forwarded from `Tooltip`.
  * @csspart tooltip-anchor - The `Tooltip` element itself.
  * @csspart tooltip-arrow - The bubble's point, forwarded from `Tooltip`.
+ * @csspart tooltip-arrow-bottom - The point while the bubble is below the reading, so on its top edge, beside `tooltip-arrow`.
+ * @csspart tooltip-arrow-left - The point while the bubble is left of the reading, so on its right edge, beside `tooltip-arrow`.
+ * @csspart tooltip-arrow-right - The point while the bubble is right of the reading, so on its left edge, beside `tooltip-arrow`.
+ * @csspart tooltip-arrow-top - The point while the bubble is above the reading, so on its bottom edge, beside `tooltip-arrow`.
+ * @csspart tooltip-bottom - The bubble while it is below the reading, beside `tooltip`.
  * @csspart tooltip-cell - One column's name and value inside the tooltip.
  * @csspart tooltip-label - The slice's own name inside the tooltip.
+ * @csspart tooltip-left - The bubble while it is left of the reading, beside `tooltip`.
  * @csspart tooltip-name - A column's name inside the tooltip.
+ * @csspart tooltip-right - The bubble while it is right of the reading, beside `tooltip`.
+ * @csspart tooltip-top - The bubble while it is above the reading, beside `tooltip`.
  * @csspart tooltip-value - A column's value inside the tooltip.
  * @csspart track - The ring the slices are drawn on.
  *
@@ -45,7 +53,7 @@ export declare class HelixHeadlessDonutChart extends HelixHeadlessDonutChart_bas
     /**
      * The pointer is not mapped across this one.
      *
-     * Every other chart lays its readings out left to right, so the nearest is
+     * Every other chart lays its readings out along the line, so the nearest is
      * arithmetic on x. A ring's slices are real elements at every angle, and x
      * alone would answer with whichever slice shared a horizontal position with
      * the pointer: at three o'clock and at nine o'clock it would give the same
@@ -104,6 +112,14 @@ export declare class HelixHeadlessDonutChart extends HelixHeadlessDonutChart_bas
     sweep?: 'half';
     /** The fraction of the circle the shares are spread over. */
     private get span();
+    /**
+     * Where the first slice starts, as an angle from three o'clock.
+     *
+     * Twelve for a whole ring and nine for a half, the turns the stylesheet gives
+     * the circles. Anything drawn or placed by arithmetic has to start from the
+     * same place, or it describes a slice the ring is not showing there.
+     */
+    private get origin();
     /** How thick the ring is drawn, in the drawing's own units. */
     private get thickness();
     /** The ring's radius, which follows its thickness so the outer edge holds. */
@@ -161,10 +177,10 @@ export declare class HelixHeadlessDonutChart extends HelixHeadlessDonutChart_bas
      * turn, so a growing slice would pop partway through the transition it was
      * meant to smooth. Both animations stay on the dash and this path follows it.
      *
-     * The turn to twelve o'clock is arithmetic here rather than the rotation the
-     * stylesheet gives the circles. That rule uses `transform-box: fill-box`, so
-     * it spins each element about its own bounding box, which is the ring's center
-     * for a circle and is not for a sector.
+     * The turn to twelve o'clock, or to nine for a half, is `origin` here rather
+     * than the rotation the stylesheet gives the circles. That rule uses
+     * `transform-box: fill-box`, so it spins each element about its own bounding
+     * box, which is the ring's center for a circle and is not for a sector.
      */
     protected renderEdge(share: {
         fraction: number;

package/dist/donut-chart/root/donut-chart-root.js

@@ -26,6 +26,9 @@ let HelixHeadlessDonutChart = class HelixHeadlessDonutChart extends MixinChartSo
     get span() {
         return this.sweep === 'half' ? 0.5 : 1;
     }
+    get origin() {
+        return this.sweep === 'half' ? Math.PI : -Math.PI / 2;
+    }
     get thickness() {
         return THICKNESS[this.hole ?? 'medium'] ?? THICKNESS.medium ?? 0;
     }
@@ -61,7 +64,11 @@ let HelixHeadlessDonutChart = class HelixHeadlessDonutChart extends MixinChartSo
       part="plot"
       style="--donut-chart-stroke: ${this.thickness}"
     >
-      <svg viewBox=${this.frame} xmlns="http://www.w3.org/2000/svg">
+      <svg
+        data-mirror=${this.sweep === 'half' ? '' : nothing}
+        viewBox=${this.frame}
+        xmlns="http://www.w3.org/2000/svg"
+      >
         <circle
           cx=${CENTER}
           cy=${CENTER}
@@ -104,8 +111,8 @@ let HelixHeadlessDonutChart = class HelixHeadlessDonutChart extends MixinChartSo
     }
     renderEdge(share, index) {
         const turn = 2 * Math.PI * this.span;
-        const from = share.start * turn - Math.PI / 2;
-        const to = (share.start + share.fraction) * turn - Math.PI / 2;
+        const from = share.start * turn + this.origin;
+        const to = (share.start + share.fraction) * turn + this.origin;
         const outer = EDGE;
         const inner = EDGE - this.thickness;
         const at = (radius, angle) => `${(CENTER + Math.cos(angle) * radius).toFixed(3)} ${(CENTER + Math.sin(angle) * radius).toFixed(3)}`;
@@ -139,13 +146,18 @@ let HelixHeadlessDonutChart = class HelixHeadlessDonutChart extends MixinChartSo
         if (!share) {
             return drawTooltip(this.sourceRows, at, this.tag('tooltip'));
         }
-        const angle = (share.start + share.fraction / 2) * 2 * Math.PI - Math.PI / 2;
+        const angle = (share.start + share.fraction / 2) * 2 * Math.PI * this.span + this.origin;
         const edge = EDGE;
         const x = CENTER + Math.cos(angle) * edge;
-        const y = CENTER + Math.sin(angle) * edge;
+        const top = this.sweep === 'half' ? CENTER - EDGE : 0;
+        const tall = this.sweep === 'half' ? EDGE + this.thickness / 2 : BOX;
+        const y = ((CENTER + Math.sin(angle) * edge - top) / tall) * 100;
+        const turned = this.sweep === 'half' && this.pointer.mirrored;
+        const across = Math.cos(angle) > 0 !== turned;
         return drawTooltip(this.sourceRows, at, this.tag('tooltip'), {
+            fixed: this.sweep !== 'half',
             placement: Math.abs(Math.cos(angle)) > Math.abs(Math.sin(angle))
-                ? Math.cos(angle) > 0
+                ? across
                     ? 'right'
                     : 'left'
                 : Math.sin(angle) > 0

package/dist/drilldown/item/drilldown-item.js

@@ -63,7 +63,7 @@ let HelixHeadlessDrilldownItem = class HelixHeadlessDrilldownItem extends HelixE
       <span part="label"><slot></slot></span>
       <slot name="end"></slot>
       ${this.page
-            ? html `<svg part="mark" fill="currentColor" viewBox=${caretRight.viewBox} aria-hidden="true">
+            ? html `<svg part="mark" data-mirror fill="currentColor" viewBox=${caretRight.viewBox} aria-hidden="true">
               ${unsafeSVG(caretRight.content)}
             </svg>`
             : nothing}

package/dist/drilldown/root/drilldown-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, DrilldownController, HelixElement, hostAria, MixinCollection, } from '@fusion.dev/helix-core';
+import { customElement, DrilldownController, HelixElement, hostAria, inlineStep, MixinCollection, } from '@fusion.dev/helix-core';
 import { caretLeft } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -53,14 +53,15 @@ let HelixHeadlessDrilldown = class HelixHeadlessDrilldown extends MixinCollectio
                 (event.key === 'Home' ? items[0] : items[items.length - 1])?.focusItem();
                 return;
             }
-            if (event.key === 'ArrowLeft' || event.key === 'Escape') {
+            const along = inlineStep(this, event.key);
+            if (along === -1 || event.key === 'Escape') {
                 if (this.back()) {
                     event.preventDefault();
                     event.stopPropagation();
                 }
                 return;
             }
-            if (event.key === 'ArrowRight' && current !== -1) {
+            if (along === 1 && current !== -1) {
                 const item = items[current];
                 if (item && this.drilldown.hasPage(item)) {
                     event.preventDefault();
@@ -144,7 +145,7 @@ let HelixHeadlessDrilldown = class HelixHeadlessDrilldown extends MixinCollectio
             ? ''
             : html `<div part="header">
             <button part="back" type="button" aria-label=${this.backLabel} @click=${() => this.back()}>
-              <svg part="back-mark" fill="currentColor" viewBox=${caretLeft.viewBox} aria-hidden="true">
+              <svg part="back-mark" data-mirror fill="currentColor" viewBox=${caretLeft.viewBox} aria-hidden="true">
                 ${unsafeSVG(caretLeft.content)}
               </svg>
             </button>

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

@@ -50,9 +50,17 @@ declare const HelixHeadlessHeatmap_base: typeof HelixElement & (new (...args: an
  * @csspart tooltip - The bubble, forwarded from `Tooltip`.
  * @csspart tooltip-anchor - The `Tooltip` element itself.
  * @csspart tooltip-arrow - The bubble's point, forwarded from `Tooltip`.
+ * @csspart tooltip-arrow-bottom - The point while the bubble is below the reading, so on its top edge, beside `tooltip-arrow`.
+ * @csspart tooltip-arrow-left - The point while the bubble is left of the reading, so on its right edge, beside `tooltip-arrow`.
+ * @csspart tooltip-arrow-right - The point while the bubble is right of the reading, so on its left edge, beside `tooltip-arrow`.
+ * @csspart tooltip-arrow-top - The point while the bubble is above the reading, so on its bottom edge, beside `tooltip-arrow`.
+ * @csspart tooltip-bottom - The bubble while it is below the reading, beside `tooltip`.
  * @csspart tooltip-cell - One column's name and value inside the tooltip.
  * @csspart tooltip-label - The reading's own name inside the tooltip.
+ * @csspart tooltip-left - The bubble while it is left of the reading, beside `tooltip`.
  * @csspart tooltip-name - A column's name inside the tooltip.
+ * @csspart tooltip-right - The bubble while it is right of the reading, beside `tooltip`.
+ * @csspart tooltip-top - The bubble while it is above the reading, beside `tooltip`.
  * @csspart tooltip-value - A column's value inside the tooltip.
  *
  * @cssproperty --heatmap-cell-height - How tall a cell is. A row of a tall thin cell is what a status page draws.
@@ -110,8 +118,9 @@ export declare class HelixHeadlessHeatmap extends HelixHeadlessHeatmap_base {
      *
      * `1` is a status strip and `7` is a calendar week, which are the two readings
      * this covers. Cells fill down the column and then across, which is what a
-     * calendar heatmap does: a week is a column, so the strip reads left to right
-     * in weeks and top to bottom in days.
+     * calendar heatmap does: a week is a column, so the strip reads along the
+     * line in weeks, from the right on a right-to-left page, and top to bottom in
+     * days.
      */
     rows: number;
     /**

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

@@ -40,6 +40,14 @@ export declare class HelixHeadlessIcon extends HelixElement {
      * Accessible name, for an icon that is not decorative.
      */
     label: string;
+    /**
+     * Turns the glyph round on a right-to-left page, for an arrow meaning forward or back.
+     *
+     * Asked for rather than inferred from the name. The names are physical, and
+     * `arrow-left` drawn pointing right on an Arabic page would be the icon
+     * disagreeing with its own name for every reader who meant the left.
+     */
+    mirror: boolean;
     /**
      * Name of the icon in the Helix set.
      */

package/dist/icon/root/icon-root.js

@@ -13,6 +13,7 @@ let HelixHeadlessIcon = class HelixHeadlessIcon extends HelixElement {
     constructor() {
         super(...arguments);
         this.label = '';
+        this.mirror = false;
         this.name = '';
     }
     render() {
@@ -23,6 +24,7 @@ let HelixHeadlessIcon = class HelixHeadlessIcon extends HelixElement {
         const labeled = this.label.length > 0;
         return html `<svg
       part="svg"
+      ?data-mirror=${this.mirror}
       fill="currentColor"
       viewBox=${icon.viewBox}
       role=${labeled ? 'img' : nothing}
@@ -36,6 +38,9 @@ let HelixHeadlessIcon = class HelixHeadlessIcon extends HelixElement {
 __decorate([
     property()
 ], HelixHeadlessIcon.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessIcon.prototype, "mirror", void 0);
 __decorate([
     property()
 ], HelixHeadlessIcon.prototype, "name", void 0);

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

@@ -56,9 +56,17 @@ declare const HelixHeadlessLineChart_base: typeof HelixElement & (new (...args:
  * @csspart tooltip - The bubble, forwarded from `Tooltip`.
  * @csspart tooltip-anchor - The `Tooltip` element itself.
  * @csspart tooltip-arrow - The bubble's point, forwarded from `Tooltip`.
+ * @csspart tooltip-arrow-bottom - The point while the bubble is below the reading, so on its top edge, beside `tooltip-arrow`.
+ * @csspart tooltip-arrow-left - The point while the bubble is left of the reading, so on its right edge, beside `tooltip-arrow`.
+ * @csspart tooltip-arrow-right - The point while the bubble is right of the reading, so on its left edge, beside `tooltip-arrow`.
+ * @csspart tooltip-arrow-top - The point while the bubble is above the reading, so on its bottom edge, beside `tooltip-arrow`.
+ * @csspart tooltip-bottom - The bubble while it is below the reading, beside `tooltip`.
  * @csspart tooltip-cell - One column's name and value inside the tooltip.
  * @csspart tooltip-label - The reading's own name inside the tooltip.
+ * @csspart tooltip-left - The bubble while it is left of the reading, beside `tooltip`.
  * @csspart tooltip-name - A column's name inside the tooltip.
+ * @csspart tooltip-right - The bubble while it is right of the reading, beside `tooltip`.
+ * @csspart tooltip-top - The bubble while it is above the reading, beside `tooltip`.
  * @csspart tooltip-value - A column's value inside the tooltip.
  */
 export declare class HelixHeadlessLineChart extends HelixHeadlessLineChart_base {
@@ -127,7 +135,7 @@ export declare class HelixHeadlessLineChart extends HelixHeadlessLineChart_base
      * property with a default writes its attribute onto a host the consumer
      * rendered, which React reports as a hydration mismatch.
      *
-     * **One per series, in a column at the right edge**, because every series here
+     * **One per series, in a column at the far edge**, because every series here
      * shares an x-axis and therefore ends at the same reading. That column is the
      * useful thing: it is where a reader looks for "and what is it now", which is
      * the question a sparkline's single mark answers too.

package/dist/line-chart/root/line-chart-root.js

@@ -69,6 +69,7 @@ let HelixHeadlessLineChart = class HelixHeadlessLineChart extends MixinChartSour
       style=${holes ? `--_line-chart-holes: ${holes}` : nothing}
     >
       <svg part="svg"
+        data-mirror
         preserveAspectRatio="none"
         viewBox="0 0 ${WIDTH} ${HEIGHT}"
         xmlns="http://www.w3.org/2000/svg"

package/dist/menu/item/menu-item.js

@@ -106,7 +106,7 @@ let HelixHeadlessMenuItem = class HelixHeadlessMenuItem extends HelixElement {
         ${submenu
             ? html `<svg
                 part="mark"
-                data-submenu
+                data-mirror
                 fill="currentColor"
                 viewBox=${caretRight.viewBox}
                 aria-hidden="true"

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 { anchorElement, customElement, DrilldownController, HelixElement, KeyboardNavigationController, MixinCollection, MixinControllerOpen, PopoverController, scrollItemIntoView, tellDisclosure, } from '@fusion.dev/helix-core';
+import { anchorElement, customElement, DrilldownController, HelixElement, inlineStep, KeyboardNavigationController, MixinCollection, MixinControllerOpen, PopoverController, scrollItemIntoView, tellDisclosure, } from '@fusion.dev/helix-core';
 import { caretLeft } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -63,14 +63,15 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
         this.handleKeydown = (event) => {
             const items = this.items;
             const at = items.indexOf(document.activeElement);
+            const along = inlineStep(this, event.key);
             if (event.key === 'Escape') {
                 event.stopPropagation();
                 this.leave();
             }
-            else if (event.key === 'ArrowRight' && items[at]?.hasSubmenu) {
+            else if (along === 1 && items[at]?.hasSubmenu) {
                 this.enter(items[at]);
             }
-            else if (event.key === 'ArrowLeft') {
+            else if (along === -1) {
                 this.leave();
             }
             else if (event.key === 'Tab') {
@@ -195,7 +196,7 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
                   aria-label=${this.backLabel}
                   @click=${() => this.leave()}
                 >
-                  <svg part="back-mark" fill="currentColor" viewBox=${caretLeft.viewBox} aria-hidden="true">
+                  <svg part="back-mark" data-mirror fill="currentColor" viewBox=${caretLeft.viewBox} aria-hidden="true">
                     ${unsafeSVG(caretLeft.content)}
                   </svg>
                 </button>

package/dist/object-inspector/root/object-inspector-root.d.ts

@@ -69,6 +69,14 @@ interface Row {
  * @csspart copy-mark - The clipboard glyph, and the confirmation that replaces it.
  * @csspart copy-tooltip - The bubble, forwarded from the tooltip inside.
  * @csspart copy-tooltip-arrow - The point, resting against the trigger.
+ * @csspart copy-tooltip-arrow-bottom - The point while the bubble is below the copy button, so on its top edge, beside `copy-tooltip-arrow`.
+ * @csspart copy-tooltip-arrow-left - The point while the bubble is left of the copy button, so on its right edge, beside `copy-tooltip-arrow`.
+ * @csspart copy-tooltip-arrow-right - The point while the bubble is right of the copy button, so on its left edge, beside `copy-tooltip-arrow`.
+ * @csspart copy-tooltip-arrow-top - The point while the bubble is above the copy button, so on its bottom edge, beside `copy-tooltip-arrow`.
+ * @csspart copy-tooltip-bottom - The bubble while it is below the copy button, beside `copy-tooltip`.
+ * @csspart copy-tooltip-left - The bubble while it is left of the copy button, beside `copy-tooltip`.
+ * @csspart copy-tooltip-right - The bubble while it is right of the copy button, beside `copy-tooltip`.
+ * @csspart copy-tooltip-top - The bubble while it is above the copy button, beside `copy-tooltip`.
  * @csspart count - How many entries a branch holds.
  * @csspart frame - The tree and the copy button beside it.
  * @csspart header - The bar carrying the label, where there is one.

package/dist/object-inspector/root/object-inspector-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 { CopyController, customElement, HelixElement, scrollItemIntoView, VirtualizeController, } from '@fusion.dev/helix-core';
+import { CopyController, customElement, HelixElement, inlineStep, scrollItemIntoView, VirtualizeController, } from '@fusion.dev/helix-core';
 import { caretDown, caretRight } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -64,15 +64,16 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
                     this.move(rows.length - 1);
                     break;
                 case 'ArrowRight':
-                    if (row.branch && !row.open) {
-                        this.toggle(row, true);
+                case 'ArrowLeft':
+                    if (inlineStep(this, event.key) === 1) {
+                        if (row.branch && !row.open) {
+                            this.toggle(row, true);
+                        }
+                        else if (row.open) {
+                            this.move(this.active + 1);
+                        }
                     }
                     else if (row.open) {
-                        this.move(this.active + 1);
-                    }
-                    break;
-                case 'ArrowLeft':
-                    if (row.open) {
                         this.toggle(row, false);
                     }
                     else {
@@ -238,21 +239,21 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
             const array = Array.isArray(value);
             const noun = array ? (count === 1 ? 'item' : 'items') : count === 1 ? 'key' : 'keys';
             return html `<span part="summary">${array ? '[…]' : '{…}'}</span>
-        <span part="count">${`${count} ${noun}`}</span>`;
+        <span part="count" dir="auto">${`${count} ${noun}`}</span>`;
         }
         if (typeof value === 'string') {
-            return html `<span part="string">${JSON.stringify(value)}</span>`;
+            return html `<span part="string" dir="ltr">${JSON.stringify(value)}</span>`;
         }
         if (typeof value === 'number') {
-            return html `<span part="number">${String(value)}</span>`;
+            return html `<span part="number" dir="ltr">${String(value)}</span>`;
         }
         if (typeof value === 'boolean') {
-            return html `<span part="boolean">${String(value)}</span>`;
+            return html `<span part="boolean" dir="ltr">${String(value)}</span>`;
         }
         if (value === null) {
-            return html `<span part="null">null</span>`;
+            return html `<span part="null" dir="ltr">null</span>`;
         }
-        return html `<span part="string">${String(value)}</span>`;
+        return html `<span part="string" dir="ltr">${String(value)}</span>`;
     }
     renderRow(row, index) {
         const active = index === this.active;
@@ -272,6 +273,7 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
       ${row.branch
             ? html `<svg
               part="toggle"
+              ?data-mirror=${!row.open}
               fill="currentColor"
               viewBox=${(row.open ? caretDown : caretRight).viewBox}
               aria-hidden="true"
@@ -285,7 +287,10 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
         return staticHtml `<${this.tag('copy-button')}
       part="copy"
       exportparts="button: copy-button, mark: copy-mark, tooltip: copy-tooltip,
-        tooltip-arrow: copy-tooltip-arrow"
+        tooltip-arrow: copy-tooltip-arrow, tooltip-arrow-bottom: copy-tooltip-arrow-bottom,
+        tooltip-arrow-left: copy-tooltip-arrow-left, tooltip-arrow-right: copy-tooltip-arrow-right,
+        tooltip-arrow-top: copy-tooltip-arrow-top, tooltip-bottom: copy-tooltip-bottom,
+        tooltip-left: copy-tooltip-left, tooltip-right: copy-tooltip-right, tooltip-top: copy-tooltip-top"
       label=${row?.key === undefined ? 'Copy value' : `Copy ${row.key}`}
       .value=${this.copyable(row)}
     ></${this.tag('copy-button')}>`;

package/dist/pagination/root/pagination-root.js

@@ -180,7 +180,7 @@ let HelixHeadlessPagination = class HelixHeadlessPagination extends HelixElement
         return {
             address: spent ? nothing : fill(this.href, to, this.count),
             click: (event) => this.go(to, event),
-            glyph: html `<svg part="mark" fill="currentColor" viewBox=${icon.viewBox} aria-hidden="true">
+            glyph: html `<svg part="mark" data-mirror fill="currentColor" viewBox=${icon.viewBox} aria-hidden="true">
         ${unsafeSVG(icon.content)}
       </svg>`,
             name,

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

@@ -27,6 +27,12 @@ declare const HelixHeadlessPinInput_base: (new (...args: any[]) => import("@fusi
  * the field as a whole, and repeating it on six boxes offers a browser six
  * places to put one code.
  *
+ * **Left to right on every page.** A code is read the way a phone number is,
+ * one character after another from the left, in Arabic and Hebrew as in
+ * English, so the row carries `dir="ltr"`: the first box is the leftmost, a
+ * paste fills rightward and the right arrow moves on. The label, the hint and
+ * the feedback are words and keep the page's direction.
+ *
  * @since 0.1.0
  * @status stable
  * @category forms
@@ -40,7 +46,7 @@ declare const HelixHeadlessPinInput_base: (new (...args: any[]) => import("@fusi
  *
  * @csspart cell - One box.
  * @csspart feedback - What is wrong with it.
- * @csspart field - The row of boxes.
+ * @csspart field - The row of boxes, left to right on every page.
  * @csspart hint - Help under the boxes, while nothing is wrong.
  * @csspart label - The question, over the boxes.
  *

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

@@ -56,6 +56,7 @@ let HelixHeadlessPinInput = class HelixHeadlessPinInput extends MixinControllerV
             if (at === -1 || this.isDisabled || this.readOnly) {
                 return;
             }
+            const to = at + (event.key === 'ArrowRight' ? 1 : event.key === 'ArrowLeft' ? -1 : 0);
             if (event.key === 'Backspace' && cell.value === '' && at > 0) {
                 const characters = this.characters;
                 characters[at - 1] = '';
@@ -65,13 +66,9 @@ let HelixHeadlessPinInput = class HelixHeadlessPinInput extends MixinControllerV
                     this.cells[at - 1]?.focus();
                 });
             }
-            else if (event.key === 'ArrowLeft' && at > 0) {
-                this.cells[at - 1]?.focus();
-                this.cells[at - 1]?.select();
-            }
-            else if (event.key === 'ArrowRight' && at < this.count - 1) {
-                this.cells[at + 1]?.focus();
-                this.cells[at + 1]?.select();
+            else if (to !== at && to >= 0 && to < this.count) {
+                this.cells[to]?.focus();
+                this.cells[to]?.select();
             }
             else {
                 return;
@@ -203,6 +200,7 @@ let HelixHeadlessPinInput = class HelixHeadlessPinInput extends MixinControllerV
         const characters = this.characters;
         return html `${this.renderGroupLabel()}
       <div
+        dir="ltr"
         part="field"
         role="group"
         aria-describedby=${this.describedBy ?? nothing}

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

@@ -46,6 +46,17 @@ declare const HelixHeadlessScatterChart_base: typeof HelixElement & (new (...arg
  * a `<span>` placed by percentage over it, which is how `LineChart` draws its
  * termini and for the same reason.
  *
+ * **Left to right on every page, the one chart here that is.** A bar or a line
+ * chart's across is the order its readings are named in, which follows the
+ * line of text and turns with it. Here it is a measure, and a measure has a
+ * direction of its own: more is to the right in every script, as a number line
+ * is. So the plot, its axes and the names at their ends sit in a `plane` part
+ * that carries `dir="ltr"`, which holds the y axis on the left and the points,
+ * rules, ticks, pointer and tooltip mark where a left-to-right page puts them,
+ * with no stylesheet asked to know. The names carry `dir="auto"`, so one written
+ * in Arabic or Hebrew still reads its own way; the summary is outside the plane
+ * and the bubble is told the page's direction, both being words.
+ *
  * @since 0.1.0
  * @status experimental
  * @category charts
@@ -54,6 +65,7 @@ declare const HelixHeadlessScatterChart_base: typeof HelixElement & (new (...arg
  *
  * @csspart gridline - One rule across the plot, under `gridlines`.
  * @csspart mark - The invisible point the tooltip is anchored to.
+ * @csspart plane - The plot, both axes and their names, left to right on every page. The grid they are laid out in.
  * @csspart plot - The drawing.
  * @csspart point - One row, as a point.
  * @csspart point-active - A point of the row a pointer is asking about, beside `point`.
@@ -62,9 +74,17 @@ declare const HelixHeadlessScatterChart_base: typeof HelixElement & (new (...arg
  * @csspart tooltip - The bubble, forwarded from `Tooltip`.
  * @csspart tooltip-anchor - The `Tooltip` element itself.
  * @csspart tooltip-arrow - The bubble's point, forwarded from `Tooltip`.
+ * @csspart tooltip-arrow-bottom - The point while the bubble is below the reading, so on its top edge, beside `tooltip-arrow`.
+ * @csspart tooltip-arrow-left - The point while the bubble is left of the reading, so on its right edge, beside `tooltip-arrow`.
+ * @csspart tooltip-arrow-right - The point while the bubble is right of the reading, so on its left edge, beside `tooltip-arrow`.
+ * @csspart tooltip-arrow-top - The point while the bubble is above the reading, so on its bottom edge, beside `tooltip-arrow`.
+ * @csspart tooltip-bottom - The bubble while it is below the reading, beside `tooltip`.
  * @csspart tooltip-cell - One column's name and value inside the tooltip.
  * @csspart tooltip-label - The row's own name inside the tooltip.
+ * @csspart tooltip-left - The bubble while it is left of the reading, beside `tooltip`.
  * @csspart tooltip-name - A column's name inside the tooltip.
+ * @csspart tooltip-right - The bubble while it is right of the reading, beside `tooltip`.
+ * @csspart tooltip-top - The bubble while it is above the reading, beside `tooltip`.
  * @csspart tooltip-value - A column's value inside the tooltip.
  * @csspart x-axis - The levels measured across, under the plot.
  * @csspart x-name - What is measured across.

package/dist/scatter-chart/root/scatter-chart-root.js

@@ -124,20 +124,24 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
         const field = this.field;
         this.drawn = field.points;
         if (field.points.length === 0) {
-            return html `<div id="helix-chart-plot" part="plot"></div>`;
+            return html `<div dir="ltr" part="plane">
+        <div id="helix-chart-plot" part="plot"></div>
+      </div>`;
         }
         const format = formatNumbers('');
         const along = linear(field.x, [0, WIDTH]);
         const up = linear(field.y, [HEIGHT, 0]);
-        return html `${this.renderPlot(field, along, up)}
-      <div aria-hidden="true" part="x-axis">
-        ${ticks(field.x).map((level) => html `<span part="x-tick" style="--chart-tick: ${along(level)}%">${format(level)}</span>`)}
+        return html `<div dir="ltr" part="plane">
+        ${this.renderPlot(field, along, up)}
+        <div aria-hidden="true" part="x-axis">
+          ${ticks(field.x).map((level) => html `<span part="x-tick" style="--chart-tick: ${along(level)}%">${format(level)}</span>`)}
+        </div>
+        <div aria-hidden="true" part="y-axis">
+          ${ticks(field.y).map((level) => html `<span part="y-tick" style="--chart-tick: ${up(level)}%">${format(level)}</span>`)}
+        </div>
+        <span aria-hidden="true" dir="auto" part="x-name">${field.xName}</span>
+        <span aria-hidden="true" dir="auto" part="y-name">${field.yNames.join(', ')}</span>
       </div>
-      <div aria-hidden="true" part="y-axis">
-        ${ticks(field.y).map((level) => html `<span part="y-tick" style="--chart-tick: ${up(level)}%">${format(level)}</span>`)}
-      </div>
-      <span aria-hidden="true" part="x-name">${field.xName}</span>
-      <span aria-hidden="true" part="y-name">${field.yNames.join(', ')}</span>
       ${this.renderSummary(field)}`;
     }
     renderPlot(field, along, up) {
@@ -184,6 +188,8 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
             return drawTooltip(this.sourceRows, -1, this.tag('tooltip'));
         }
         return drawTooltip(this.sourceRows, at, this.tag('tooltip'), {
+            dir: getComputedStyle(this).direction === 'rtl' ? 'rtl' : 'ltr',
+            fixed: true,
             placement: 'top',
             x: `${point.x}%`,
             y: `${point.y}%`,

package/dist/scroll-area/root/scroll-area-root.js

@@ -27,10 +27,11 @@ let HelixHeadlessScrollArea = class HelixHeadlessScrollArea extends HelixElement
             if (box.scrollTop + box.clientHeight < box.scrollHeight - slack) {
                 found.push('block-end');
             }
-            if (box.scrollLeft > slack) {
+            const along = Math.abs(box.scrollLeft);
+            if (along > slack) {
                 found.push('inline-start');
             }
-            if (box.scrollLeft + box.clientWidth < box.scrollWidth - slack) {
+            if (along + box.clientWidth < box.scrollWidth - slack) {
                 found.push('inline-end');
             }
             this.more = found;