@fusion.dev/helix-core 0.182.1 → 0.183.0

package/dist/controllers/aria-forward-controller/aria-forward-controller.d.ts

@@ -35,6 +35,10 @@ export interface AriaForwardOptions {
      * How to name the control, said in a warning when it has no accessible
      * name once it has rendered. Absent, the name is not checked.
      *
+     * A sentence, or the key of one `audit-name.ts` keeps, as `'button'` is. A
+     * key keeps the sentence out of a production build, where the check does
+     * nothing.
+     *
      * For a control named by its content or a host attribute, as a button is. A
      * field is checked by `MixinField`, which knows its label.
      */

package/dist/controllers/virtualize-controller/heights.d.ts

@@ -29,6 +29,8 @@ export declare class Heights {
     private dirty;
     /** The estimate the sums were built against, so a change to it rebuilds. */
     private built;
+    /** Counts each change to a height, for a placement built from them. */
+    private changes;
     constructor(estimate: () => number);
     /** How tall one item is: what was measured, or what is assumed. */
     at(index: number): number;
@@ -42,6 +44,11 @@ export declare class Heights {
     record(index: number, size: number): boolean;
     /** The room items `[0, index)` take. */
     before(index: number, count: number): number;
+    /**
+     * Says which heights these are: a placement built from a stamp it was
+     * given again holds, and one built from another stamp is out of date.
+     */
+    stamp(): string;
     /** The room the whole set takes. */
     total(count: number): number;
     /**

package/dist/controllers/virtualize-controller/heights.js

@@ -4,6 +4,7 @@ export class Heights {
         this.sums = [0];
         this.dirty = 0;
         this.built = 0;
+        this.changes = 0;
         this.estimate = estimate;
     }
     at(index) {
@@ -23,12 +24,16 @@ export class Heights {
             return false;
         }
         this.dirty = Math.min(this.dirty, index);
+        this.changes += 1;
         return true;
     }
     before(index, count) {
         this.build(count);
         return this.sums[Math.max(0, Math.min(index, count))] ?? 0;
     }
+    stamp() {
+        return `${this.changes}:${this.estimate()}`;
+    }
     total(count) {
         return this.before(count, count);
     }
@@ -63,11 +68,13 @@ export class Heights {
             }
         }
         this.dirty = 0;
+        this.changes += 1;
     }
     forget() {
         this.seen.clear();
         this.dirty = 0;
         this.sums = [0];
+        this.changes += 1;
     }
     build(count) {
         const size = Math.max(1, this.estimate());

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

@@ -1,4 +1,5 @@
 import type { ReactiveController, ReactiveControllerHost } from 'lit';
+import type { Waterfall } from './waterfall.js';
 /** What the controller needs of a set and the box it is shown in. */
 export interface VirtualizeOptions {
     /** The scrolling box, or null before it renders. */
@@ -75,6 +76,16 @@ export interface VirtualizeOptions {
      * scroll offset during a fling.
      */
     anchor?: () => boolean;
+    /**
+     * Lays the items out down several columns, each item under the column that
+     * ends highest, as a wall of photos is: a `Waterfall`, whose `lanes` says how
+     * many columns. The window is then every item that reaches into the box, in
+     * the order of the set, and a host draws each item at its column,
+     * `waterfall.lane(index)`, and at `offsetOf(index)` down the set, which
+     * `offsetOf(count)` is the length of. Items are placed by measurement, so a
+     * host supplies `rows`. None by default.
+     */
+    waterfall?: () => Waterfall | undefined;
 }
 /** A row that has been drawn, and which item of the set it drew. */
 export interface Rendered {
@@ -320,6 +331,19 @@ export declare class VirtualizeController implements ReactiveController {
     private sampleRows;
     /** Whether this pass places by measurement: offered, and wanted or needed. */
     private measuring;
+    /** The waterfall the host lays its items out in, placed by the heights known now. */
+    private laned;
+    /**
+     * Where item `index` starts down the set, before any drift: after the items
+     * before it, or in its column of a waterfall, where the starts never go back
+     * up either.
+     */
+    private startOf;
+    /**
+     * The item at `offset`: the last to start at or before it, or in a
+     * waterfall the first to reach past it.
+     */
+    private indexAt;
     /**
      * The measured version, which asks where each item starts rather than dividing.
      *

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

@@ -159,14 +159,13 @@ export class VirtualizeController {
             return;
         }
         const overscan = this.options.overscan ?? 4;
-        let next = this.measuring()
+        const choose = () => this.measuring()
             ? this.placed(box, total, overscan)
             : this.uniform(box, total, size, overscan);
+        let next = choose();
         if (this.drift !== 0 && (next.before < 0 || next.first === 0)) {
             this.square();
-            next = this.measuring()
-                ? this.placed(box, total, overscan)
-                : this.uniform(box, total, size, overscan);
+            next = choose();
         }
         if (this.last?.count !== total || this.last.estimate !== size) {
             this.last = { count: total, estimate: size };
@@ -235,22 +234,40 @@ export class VirtualizeController {
         }
     }
     measuring() {
-        return this.options.rows !== undefined && (this.uneven || (this.options.measured?.() ?? true));
+        return (this.options.rows !== undefined &&
+            (this.uneven ||
+                this.options.waterfall?.() !== undefined ||
+                (this.options.measured?.() ?? true)));
+    }
+    laned(total) {
+        const lanes = this.options.rows ? this.options.waterfall?.() : undefined;
+        lanes?.place(total, (index) => this.heights.at(index), this.heights.stamp());
+        return lanes;
+    }
+    startOf(index, total) {
+        return this.laned(total)?.start(index) ?? this.heights.before(index, total);
+    }
+    indexAt(offset, total) {
+        const lanes = this.laned(total);
+        return lanes
+            ? Math.min(lanes.from(offset), Math.max(0, total - 1))
+            : this.heights.indexAt(offset, total);
     }
     placed(box, total, overscan) {
         const top = this.offset(box);
         const lead = this.lead(box);
         const from = this.heading < 0 ? top - lead : top;
-        const first = Math.max(0, this.heights.indexAt(from, total) - overscan);
+        const more = overscan * (this.laned(total)?.lanes ?? 1);
+        const first = Math.max(0, this.indexAt(from, total) - more);
         const bottom = top + this.span(box) + (this.heading > 0 ? lead : 0);
-        let last = this.heights.indexAt(top, total);
-        while (last < total && this.heights.before(last, total) < bottom) {
+        let last = this.indexAt(top, total);
+        while (last < total && this.startOf(last, total) < bottom) {
             last += 1;
         }
-        last = Math.min(total, last + overscan);
+        last = Math.min(total, last + more);
         return {
-            after: Math.max(0, this.heights.total(total) - this.heights.before(last, total)),
-            before: this.heights.before(first, total) + this.drift,
+            after: Math.max(0, this.startOf(total, total) - this.startOf(last, total)),
+            before: this.startOf(first, total) + this.drift,
             first,
             last,
         };
@@ -268,20 +285,20 @@ export class VirtualizeController {
             const first = Math.min(Math.floor(top / size), total);
             return { first, last: Math.max(first, Math.min(total, Math.ceil(bottom / size))) };
         }
-        const first = this.heights.indexAt(top, total);
+        const first = this.indexAt(top, total);
         let last = first;
-        while (last < total && this.heights.before(last, total) < bottom) {
+        while (last < total && this.startOf(last, total) < bottom) {
             last += 1;
         }
         return { first, last };
     }
     remaining() {
         const box = this.options.container();
-        const total = Math.max(0, this.options.count());
         if (!box) {
             return 0;
         }
-        const length = this.measuring() ? this.heights.total(total) : total * this.line();
+        const total = Math.max(0, this.options.count());
+        const length = this.measuring() ? this.startOf(total, total) : total * this.line();
         return Math.max(0, length - Math.max(0, this.offset(box)) - this.span(box));
     }
     endInSight(length = Math.max(0, this.options.count())) {
@@ -332,8 +349,8 @@ export class VirtualizeController {
         const box = this.options.container();
         const from = box ? this.noteClamp(box) : this.lastTop;
         const top = box ? this.offset(box) : 0;
-        const anchor = this.target ?? this.heights.indexAt(top, total);
-        const was = this.heights.before(anchor, total);
+        const anchor = this.target ?? this.indexAt(top, total);
+        const was = this.startOf(anchor, total);
         let news = false;
         for (const { element, index } of rows) {
             if (this.heights.record(index, this.length(element) + this.gap())) {
@@ -344,7 +361,7 @@ export class VirtualizeController {
             return;
         }
         this.settling = 0;
-        const moved = this.heights.before(anchor, total) - was;
+        const moved = this.startOf(anchor, total) - was;
         if (box && top > 0 && moved !== 0 && (this.options.anchor?.() ?? true)) {
             if (this.scrolling()) {
                 this.drift -= moved;
@@ -353,6 +370,9 @@ export class VirtualizeController {
                 this.scrollBox(box, from + moved);
             }
         }
+        if (this.laned(total)) {
+            this.host.requestUpdate();
+        }
         this.measure();
     }
     shift(by) {
@@ -361,7 +381,7 @@ export class VirtualizeController {
         }
         const count = Math.max(0, this.options.count());
         this.heights.shift(by);
-        const room = this.heights.before(by, count);
+        const room = this.startOf(by, count);
         this.window = {
             ...this.window,
             before: this.window.before + room,
@@ -416,7 +436,7 @@ export class VirtualizeController {
     offsetOf(index) {
         const total = Math.max(0, this.options.count());
         return this.measuring()
-            ? this.heights.before(index, total) + this.drift
+            ? this.startOf(index, total) + this.drift
             : Math.max(0, Math.min(index, total)) * this.line();
     }
     forget() {

package/dist/controllers/virtualize-controller/waterfall.d.ts

@@ -0,0 +1,66 @@
+/**
+ * Where each item of a waterfall stands: a set laid out down several columns
+ * of one width, each item under the shortest column so far, as a masonry wall
+ * of photos is.
+ *
+ * **Its own module, which a host hands to `VirtualizeController`**, so the
+ * hosts that window a single column carry none of it. The controller asks it
+ * which items reach the box and where each one starts, and the host draws each
+ * item at its column and its start.
+ *
+ * **Placed in the order of the set, each item under the column that ends
+ * highest**, the leftmost of a tie, as React Aria's `WaterfallLayout` and
+ * TanStack Virtual's lanes place them. So an item's start is never above the
+ * start of the item before it, and the first item to reach any offset is found
+ * by a binary search, as one column finds it.
+ *
+ * Sizes are the controller's: what was measured, or the estimate, each with
+ * the gap below it.
+ */
+export declare class Waterfall {
+    /** How many columns the items are laid out in, at least one. */
+    lanes: number;
+    /** Where each item starts, in pixels from the top of the set. */
+    private starts;
+    /** The column each item stands in. */
+    private columns;
+    /** How much room each item takes, with the gap below it. */
+    private sizes;
+    /** How far down the set the items `[0, i]` reach, the furthest of their ends. */
+    private reach;
+    /** How long the set is: where its longest column ends. */
+    private extent;
+    /** What the placement was built from, so it is built again only when that changes. */
+    private built;
+    /**
+     * Places `count` items whose sizes `size` gives, unless `stamp` says the
+     * sizes, the count and the columns are the ones already placed.
+     */
+    place(count: number, size: (index: number) => number, stamp: string): void;
+    /** Where item `index` starts, and where the set ends for an index past it. */
+    start(index: number): number;
+    /** The column item `index` stands in. */
+    lane(index: number): number;
+    /** How long the set is, where its longest column ends. */
+    length(): number;
+    /** The first item that reaches past `offset`, or the count where none does. */
+    from(offset: number): number;
+    /** The first item that starts at or past `offset`, so every item before it starts above. */
+    to(offset: number): number;
+    /** The first index whose number in `sorted` is past `offset`. */
+    private search;
+    /**
+     * Which item a key moves to from `at`, in a set of `count` items, or
+     * `undefined` for a key it does not take or where there is no item that way:
+     *
+     * - Down and Up move to the next or the previous item in the same column.
+     * - `next` and `previous` move to the column beside, to its item that sits
+     *   beside this one the most, or the nearest above where none does. Which
+     *   of Left and Right is `next` is the caller's, for a right-to-left page.
+     * - Page Down and Page Up move down or up the same column by `page` pixels,
+     *   to the item there, or the last item that way.
+     */
+    step(key: string, at: number, count: number, page: number): number | undefined;
+    /** How much room item `index` takes down its column, with the gap below it. */
+    private size;
+}

package/dist/controllers/virtualize-controller/waterfall.js

@@ -0,0 +1,137 @@
+export class Waterfall {
+    constructor() {
+        this.lanes = 1;
+        this.starts = [];
+        this.columns = [];
+        this.sizes = [];
+        this.reach = [];
+        this.extent = 0;
+        this.built = '';
+    }
+    place(count, size, stamp) {
+        const lanes = Math.max(1, Math.trunc(this.lanes) || 1);
+        const key = `${count}:${lanes}:${stamp}`;
+        if (key === this.built) {
+            return;
+        }
+        this.built = key;
+        const ends = new Array(lanes).fill(0);
+        this.starts = new Array(count);
+        this.columns = new Array(count);
+        this.sizes = new Array(count);
+        this.reach = new Array(count);
+        let furthest = 0;
+        for (let index = 0; index < count; index++) {
+            let lane = 0;
+            for (let other = 1; other < lanes; other++) {
+                if ((ends[other] ?? 0) < (ends[lane] ?? 0)) {
+                    lane = other;
+                }
+            }
+            const start = ends[lane] ?? 0;
+            const room = size(index);
+            const end = start + room;
+            ends[lane] = end;
+            furthest = Math.max(furthest, end);
+            this.starts[index] = start;
+            this.columns[index] = lane;
+            this.sizes[index] = room;
+            this.reach[index] = furthest;
+        }
+        this.extent = furthest;
+    }
+    start(index) {
+        return this.starts[index] ?? this.extent;
+    }
+    lane(index) {
+        return this.columns[index] ?? 0;
+    }
+    length() {
+        return this.extent;
+    }
+    from(offset) {
+        return this.search(this.reach, offset);
+    }
+    to(offset) {
+        return this.search(this.starts, offset - 1e-6);
+    }
+    search(sorted, offset) {
+        let low = 0;
+        let high = sorted.length;
+        while (low < high) {
+            const mid = (low + high) >> 1;
+            if ((sorted[mid] ?? 0) <= offset) {
+                low = mid + 1;
+            }
+            else {
+                high = mid;
+            }
+        }
+        return low;
+    }
+    step(key, at, count, page) {
+        const lane = this.lane(at);
+        const along = (way, from = at) => {
+            for (let other = from + way; other >= 0 && other < count; other += way) {
+                if (this.lane(other) === lane) {
+                    return other;
+                }
+            }
+            return undefined;
+        };
+        if (key === 'ArrowDown' || key === 'ArrowUp') {
+            return along(key === 'ArrowDown' ? 1 : -1);
+        }
+        if (key === 'PageDown' || key === 'PageUp') {
+            const way = key === 'PageDown' ? 1 : -1;
+            const goal = this.start(at) + way * Math.max(1, page);
+            let found = at;
+            for (let next = along(way); next !== undefined; next = along(way, next)) {
+                found = next;
+                if (way > 0 ? this.start(next) + this.size(next) > goal : this.start(next) <= goal) {
+                    break;
+                }
+            }
+            return found === at ? undefined : found;
+        }
+        if (key !== 'next' && key !== 'previous') {
+            return undefined;
+        }
+        const beside = lane + (key === 'next' ? 1 : -1);
+        if (beside < 0 || beside >= Math.max(1, Math.trunc(this.lanes) || 1)) {
+            return undefined;
+        }
+        const top = this.start(at);
+        const bottom = top + this.size(at);
+        let best;
+        let most = 0;
+        let above;
+        for (let other = Math.max(0, this.from(top) - this.lanes); other < count; other++) {
+            const start = this.start(other);
+            if (start >= bottom) {
+                break;
+            }
+            if (this.lane(other) !== beside) {
+                continue;
+            }
+            const overlap = Math.min(bottom, start + this.size(other)) - Math.max(top, start);
+            if (overlap > most) {
+                best = other;
+                most = overlap;
+            }
+            above = other;
+        }
+        if (best !== undefined || above !== undefined) {
+            return best ?? above;
+        }
+        for (let other = at - 1; other >= 0; other--) {
+            if (this.lane(other) === beside) {
+                return other;
+            }
+        }
+        return undefined;
+    }
+    size(index) {
+        return this.sizes[index] ?? 0;
+    }
+}

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

@@ -278,9 +278,19 @@ export declare class HelixElement extends LitElement {
      * where you do.
      */
     protected relayNativeEvent(event: Event, init?: EventInit): void;
+    /**
+     * The rules from `mark-rules.ts` for the marks this element writes in its
+     * own shadow root: `data-scroller`, `data-virtual`, `data-spoken` and
+     * `data-mirror`.
+     *
+     * A component that writes a mark names its rule here, and a subclass
+     * inherits the list. One that writes none takes only the three rules every
+     * shadow root gets, which is what keeps the other four out of a Button.
+     */
+    protected static markRules: readonly string[];
     /**
      * Prepends the shadow-root reset to every subclass's styles, so no component
-     * has to remember to include it.
+     * has to remember to include it, with the rules for the marks it writes.
      */
     protected static finalizeStyles(styles?: CSSResultOrNative | CSSResultOrNative[]): CSSResultOrNative[];
     /**

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

@@ -5,12 +5,8 @@ import { noteVersion, reportUsage } from '../utils/report-usage/report-usage.js'
 import { applyReactProperties, bindReactHandler, reactPropsOf } from './react-bridge.js';
 const BOX_SIZING = '*,::before,::after{box-sizing:border-box}';
 const HIDDEN = ":host([hidden]:not([hidden='until-found'])){display:none}";
-const SCROLLER = '[data-scroller]{overflow:auto}';
-const VIRTUAL = '[data-virtual]{overflow-anchor:none}';
-const SPOKEN = '[data-spoken]{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}';
-const MIRROR = ':host(:dir(rtl)) [data-mirror]{scale:-1 1}';
 const SETTLED = ':host(:not(:state(settled))),:host(:not(:state(settled))) *{transition:none!important}';
-const BASE = unsafeCSS(BOX_SIZING + HIDDEN + SCROLLER + VIRTUAL + SPOKEN + MIRROR + SETTLED);
+const BASE = unsafeCSS(BOX_SIZING + HIDDEN + SETTLED);
 const LOOK_EVERY = 16;
 const LOOK_FOR = 96;
 export class HelixElement extends LitElement {
@@ -94,8 +90,13 @@ export class HelixElement extends LitElement {
             ...init,
         }));
     }
+    static { this.markRules = []; }
     static finalizeStyles(styles) {
-        return [BASE, ...LitElement.finalizeStyles(styles)];
+        const marks = this.markRules;
+        return [
+            marks.length === 0 ? BASE : unsafeCSS(BOX_SIZING + HIDDEN + marks.join('') + SETTLED),
+            ...LitElement.finalizeStyles(styles),
+        ];
     }
     performUpdate() {
         if (this.hasUpdated || !measuring()) {

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

@@ -0,0 +1,119 @@
+/**
+ * Makes an element a scroll container, where a component says it is one.
+ *
+ * **A box that scrolls is the headless tier's, and the headless tier had no way to say
+ * so.** `overflow` is what creates a scrollport: without it `scrollTop` is
+ * permanently zero and every scroll API on the element is inert. So a component
+ * that reads `scrollTop` and cannot declare `overflow` is one whose behavior
+ * lives in somebody else's stylesheet.
+ *
+ * Measured before deciding: `helix-headless-scroll-area`, the component whose
+ * entire purpose is scrolling, computes `overflow-y: visible` on its viewport
+ * with `scrollHeight` equal to `clientHeight`. Standing alone it is a div, and
+ * the virtual list is worse because it *acts* on the reading.
+ *
+ * **It goes in `core` rather than in a stylesheet**, with `BOX_SIZING`,
+ * `HIDDEN` and `SETTLED`, which are the token-free structural rules `core`
+ * ships into every shadow root. "The headless tier has no CSS" has never meant
+ * `core` has none; it means `helix/headless` must not depend on
+ * `@fusion.dev/helix-styles`, and a rule with no token in it does not.
+ *
+ * **And a rule rather than an inline style, which was the first idea and is
+ * wrong.** An inline `style` on a rendered part outranks every author rule
+ * short of `!important`, so a consumer wanting `overflow: hidden` on that part
+ * would have to fight it and would need `!important` of their own. A shadow rule
+ * loses to a document rule, so `::part(viewport) { overflow: … }` from a
+ * consumer simply wins, which is the right way round.
+ *
+ * Both axes, and nothing else. Which *kind* of scrolling, how much room,
+ * `overscroll-behavior`, `scroll-snap`, a gutter, a scrollbar treatment: those
+ * are decisions and stay in `helix/styled`. This is only the mechanism, and the
+ * styled sheet is prepended-after so it overrides at equal specificity anyway.
+ *
+ * **A component marks a box whose scroll state it reads, and no other**, which
+ * is narrower than "every box that ends up scrolling". `Megamenu`'s panel
+ * scrolls, and only because the styled tier gives it a `max-block-size`: that is
+ * a decision, the `overflow` that serves it belongs with it, and the headless
+ * tier never asks the panel where it is scrolled to. Marking it anyway moved a
+ * heading four pixels, because `overflow` establishes a block formatting context
+ * and margins that had been collapsing stopped. A mechanism with a layout
+ * consequence is one to apply exactly where it is needed.
+ *
+ * `ScrollArea`, `VirtualList`, `Carousel`, `ObjectInspector`, `Chat` and a
+ * `windowed` `DataTable` mark theirs, each reading `scrollTop` or `scrollLeft`
+ * and acting on the answer. The last two took their `overflow` from their
+ * styled sheet until they were marked, so the window each drew was inert on a
+ * page that loads only `helix/headless`; marking them moved nothing on the
+ * styled tier, where both boxes already scrolled.
+ */
+export declare const SCROLLER_RULE = "[data-scroller]{overflow:auto}";
+/**
+ * A box whose rows are drawn and taken away as it scrolls, which
+ * `VirtualizeController` marks `data-virtual` once it watches it.
+ *
+ * **The browser's scroll anchoring fights the window.** Chromium keeps the
+ * content a reader was looking at in place when what is above it changes, and
+ * a virtual window changes exactly that on every move: the spacer above grows
+ * and the rows are swapped. Measured on a 500 row list scrolled to 330, the
+ * offset went to 138, then 522, then back to 330 before it settled, and the
+ * list reported four ranges for one scroll. The window already keeps the rows
+ * where they belong, so anchoring has nothing left to do here but move them.
+ */
+export declare const VIRTUAL_RULE = "[data-virtual]{overflow-anchor:none}";
+/**
+ * Words a screen reader reads where the eye reads something else, which a
+ * component marks `data-spoken`: `⇧⌘P` in Kbd is read as `Shift Command P`.
+ *
+ * The drawn text is `aria-hidden` and the words sit beside it, in no box the
+ * eye sees. The rule takes the words out of the layout and paints none of
+ * them, and names no token, so it belongs with the mechanisms here. Without
+ * it a page that loads only `helix/headless` showed both.
+ */
+export declare const SPOKEN_RULE = "[data-spoken]{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}";
+/**
+ * Turns a drawing that runs along the line of text, or a glyph that points
+ * along it, round with it on a right-to-left page.
+ *
+ * **A chart computes its geometry from the left, because an SVG's coordinates
+ * do.** `x` grows rightward whatever `direction` says, while the words around a
+ * drawing are HTML written in logical properties and turn on their own. Before
+ * this, a bar chart on an Arabic page wrote Q4 to Q1 from the left under
+ * columns still drawn Q1 to Q4, so each name stood under its mirror's column.
+ *
+ * **A rule rather than a second set of coordinates, and three things decide
+ * it.** A server renders the same markup whichever way the page reads, so the
+ * drawing it sends is right before a script runs. Everything drawn on a mark
+ * turns with it: a column rounded at its far end, a gradient toward its base,
+ * the hole a ring terminus cuts, each of which arithmetic would have to mirror
+ * again in every stylesheet that draws one. And it follows `dir` when it
+ * changes, which a render would only do on its next update.
+ *
+ * **About the vertical axis, never the horizontal.** Up is more in every
+ * script, so a value keeps its height and only the run along the line turns.
+ * The numbers are text beside the drawing rather than inside it, so they read
+ * the right way round.
+ *
+ * **Keyed on `:dir()`, which is what every sheet here mirrors a caret with.**
+ * The pointer arithmetic that has to agree with it asks the computed
+ * `direction`, the question the table and the splitter already ask, and the two
+ * part only where a sheet sets `direction` without `dir`.
+ *
+ * A component marks the drawing with `data-mirror`, and a drawing with no line
+ * of text to follow is left unmarked: a whole ring's slices run clockwise from
+ * twelve, which is a clock's convention and not a script's. `scale` rather than
+ * `transform`, so a consumer's `transform` on the same part composes with it,
+ * and a consumer's `scale` there wins, a shadow rule losing to a document one.
+ *
+ * **A glyph that points along the line is the same case, marked the same
+ * way**: a caret meaning next or previous, the one between two crumbs, a shut
+ * disclosure. The component drawing it knows what it means, so the headless
+ * tier points it the right way with no stylesheet at all. Before the mark each
+ * styled sheet turned its own and a headless page had to know to, which the
+ * carousel's and the pagination's did not. A glyph a *sheet* stands on its side
+ * is that sheet's to turn: a tree draws its chevron pointing down, and a mark
+ * would come out right under a `transform: rotate()`, which applies before
+ * `scale`, and do nothing under the `rotate` property, which applies after it.
+ * A glyph for playing media is left unmarked too, a tape running one way
+ * whatever the script, and so is a picture of a key.
+ */
+export declare const MIRROR_RULE = ":host(:dir(rtl)) [data-mirror]{scale:-1 1}";

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

@@ -0,0 +1,4 @@
+export const SCROLLER_RULE = '[data-scroller]{overflow:auto}';
+export const VIRTUAL_RULE = '[data-virtual]{overflow-anchor:none}';
+export const SPOKEN_RULE = '[data-spoken]{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}';
+export const MIRROR_RULE = ':host(:dir(rtl)) [data-mirror]{scale:-1 1}';