@fusion.dev/helix-headless 0.31.0 → 0.33.0

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.d.ts

@@ -1,5 +1,5 @@
 import { HelixElement } from '@fusion.dev/helix-core';
-import { nothing, type TemplateResult } from 'lit';
+import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 /**
  * @summary One row of a drill-down, which may hold a page of its own.
  *
@@ -18,6 +18,11 @@ import { nothing, type TemplateResult } from 'lit';
  * Choosing is announced, never applied. The row dispatches and the stack
  * decides whether that means drilling in or choosing a command.
  *
+ * **A row that opens a page says so**, with a caret after its words and
+ * `aria-haspopup`, the way `Menu` marks a row with a submenu: a row that goes
+ * somewhere and a row that does something otherwise look the same until one is
+ * pressed. Not on the server, which cannot see the children and so cannot know.
+ *
  * @since 0.1.0
  * @status experimental
  * @aliases Panel item, Drill row
@@ -32,6 +37,7 @@ import { nothing, type TemplateResult } from 'lit';
  *
  * @csspart item - The row itself.
  * @csspart label - The words.
+ * @csspart mark - The caret at the end of a row that opens a page, after the `end` slot. A caret points, so a sheet mirrors it in a right-to-left document.
  */
 export declare class HelixHeadlessDrilldownItem extends HelixElement {
     /**
@@ -74,6 +80,35 @@ export declare class HelixHeadlessDrilldownItem extends HelixElement {
      * Identifies the row to whatever is listening.
      */
     value: string;
+    /**
+     * Whether anything is slotted into `page`.
+     *
+     * State rather than a getter over `children`, for the reason `Menu.Item`
+     * backs `hasSubmenu` the same way: a getter is read during `render()` with
+     * nothing to re-read it, so a page a framework fills after the row's first
+     * render would open with no caret on the row that leads to it.
+     */
+    private page;
+    /**
+     * Reads the children before each render, where they can be known.
+     *
+     * Not on the server, where there are none to read, nor while hydrating what
+     * one sent, whose row carried no caret. `finishHydration` asks for the read
+     * that skipped.
+     */
+    protected willUpdate(changed: PropertyValues): void;
+    protected firstUpdated(changed: PropertyValues): void;
+    /**
+     * Re-reads whether a page is slotted, from whichever `page` slot is current.
+     *
+     * Bound in the template, on both of them. The row and the page it opens each
+     * render a `slot[name="page"]`, and moving between them makes Lit build a new
+     * slot and throw the old one away, which fires on its way out with nothing
+     * assigned: a listener on the discarded one would clear the caret on every row
+     * that has been drilled into and back out of. `Menu.Item.readSubmenu` carries
+     * the same note.
+     */
+    private readonly readPage;
     /** Moves focus onto the row itself. */
     focusItem(): void;
     /** Announces that this row was chosen. */

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

@@ -5,8 +5,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { customElement, HelixElement, HelixSelectEvent } from '@fusion.dev/helix-core';
+import { caretRight } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 let HelixHeadlessDrilldownItem = class HelixHeadlessDrilldownItem extends HelixElement {
     constructor() {
         super(...arguments);
@@ -16,6 +18,21 @@ let HelixHeadlessDrilldownItem = class HelixHeadlessDrilldownItem extends HelixE
         this.onPage = true;
         this.showingPage = false;
         this.value = '';
+        this.page = false;
+        this.readPage = () => {
+            const slot = this.renderRoot.querySelector('slot[name="page"]');
+            this.page = (slot?.assignedElements().length ?? 0) > 0;
+        };
+    }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        if (this.childrenKnown) {
+            this.page = this.knownChildren.some((child) => child.slot === 'page');
+        }
+    }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.finishHydration();
     }
     focusItem() {
         this.partNamed('item')?.focus();
@@ -28,7 +45,7 @@ let HelixHeadlessDrilldownItem = class HelixHeadlessDrilldownItem extends HelixE
     }
     render() {
         if (this.showingPage) {
-            return html `<slot name="page"></slot>`;
+            return html `<slot name="page" @slotchange=${this.readPage}></slot>`;
         }
         if (!this.onPage) {
             return nothing;
@@ -38,13 +55,20 @@ let HelixHeadlessDrilldownItem = class HelixHeadlessDrilldownItem extends HelixE
       type="button"
       role="menuitem"
       aria-disabled=${this.disabled ? 'true' : nothing}
+      aria-haspopup=${this.page ? 'menu' : nothing}
       tabindex=${this.focusable ? '0' : '-1'}
       @click=${() => this.select()}
     >
       <slot name="start"></slot>
       <span part="label"><slot></slot></span>
       <slot name="end"></slot>
-    </button>`;
+      ${this.page
+            ? html `<svg part="mark" data-mirror fill="currentColor" viewBox=${caretRight.viewBox} aria-hidden="true">
+              ${unsafeSVG(caretRight.content)}
+            </svg>`
+            : nothing}
+    </button>
+    <div hidden><slot name="page" @slotchange=${this.readPage}></slot></div>`;
     }
 };
 __decorate([
@@ -62,6 +86,9 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessDrilldownItem.prototype, "value", void 0);
+__decorate([
+    state()
+], HelixHeadlessDrilldownItem.prototype, "page", void 0);
 HelixHeadlessDrilldownItem = __decorate([
     customElement('helix-headless-drilldown-item')
 ], HelixHeadlessDrilldownItem);

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}