@celestia-island/hikari 0.43.15 → 0.43.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.43.15",
+  "version": "0.43.16",
   "private": false,
   "type": "module",
   "description": "Hikari Vue 3 component library — production-grade UI components based on shittim-chest design system",

package/src/components/HkAuthMethodList.test.tsx

@@ -97,20 +97,25 @@ describe("HkAuthMethodList", () => {
     await nextTick();
     const wrapper = c.querySelector<HTMLElement>(".s-auth-methods-list")!;
     const spans = [...wrapper.querySelectorAll<HTMLElement>(".s-auth-methods-label")];
-    Object.defineProperty(spans[0]!, "getBoundingClientRect", { configurable: true, value: () => ({ width: 58 }) });
-    Object.defineProperty(spans[1]!, "getBoundingClientRect", { configurable: true, value: () => ({ width: 61.4 }) });
-    // The list is drawn twice the size it is laid out at.
-    Object.defineProperty(wrapper, "getBoundingClientRect", {
-      configurable: true,
-      value: () => ({ left: 0, top: 0, right: 400, bottom: 200, width: 400, height: 200, x: 0, y: 0 }) as DOMRect,
-    });
-    Object.defineProperty(wrapper, "offsetWidth", { configurable: true, get: () => 200 });
-    Object.defineProperty(wrapper, "offsetHeight", { configurable: true, get: () => 100 });
+    // The scale has to come from a LABEL: the list is `display: contents` and
+    // generates no box at all (Blink reports offsetWidth 0 and a 0x0 rect), so
+    // stubbing a box on the list would only ever be green by accident.
+    for (const [i, drawn] of [58, 61.4].entries()) {
+      Object.defineProperty(spans[i]!, "getBoundingClientRect", {
+        configurable: true,
+        value: () => ({ left: 0, top: 0, right: drawn * 2, bottom: 40, width: drawn * 2, height: 40, x: 0, y: 0 }) as DOMRect,
+      });
+      // Laid out at half: the label is drawn twice the size it is laid out at.
+      Object.defineProperty(spans[i]!, "offsetWidth", { configurable: true, get: () => drawn });
+      Object.defineProperty(spans[i]!, "offsetHeight", { configurable: true, get: () => 20 });
+    }
     const instance = (wrapper as unknown as { __vueParentComponent?: { exposed?: Record<string, unknown> } })
       .__vueParentComponent?.exposed;
     (instance!.measure as () => void)();
-    // 61.4 drawn are 30.7 of the column's own: ceil 31, plus the 1px headroom.
-    expect(wrapper.style.getPropertyValue("--auth-methods-label-width")).toBe("32px");
+    // 122.8 drawn are 61.4 of the column's own: ceil 62, plus the 1px headroom.
+    // Reading the scale off the LIST instead — the shape this shipped with —
+    // yields 1 for a `display: contents` element and publishes the drawn 124px.
+    expect(wrapper.style.getPropertyValue("--auth-methods-label-width")).toBe("63px");
   });
 
   it("leaves the column fallback intact when no text metrics are available", async () => {

package/src/components/HkAuthMethodList.tsx

@@ -86,12 +86,21 @@ export default defineComponent({
       // published as a CSS length the column is laid out with: in a scaled or
       // zoomed root the two differ by the scale of the space, so the column
       // would come out that many times too wide (see `layoutGeometry`).
-      const space = drawnScale(root);
-      const factor = root.offsetWidth > 0 ? space.x : root.offsetHeight > 0 ? space.y : 1;
+      //
+      // The scale is read from the LABEL — the element the box was measured
+      // on. Reading it from the list itself cannot work: the list is
+      // `display: contents`, so it generates no box at all (measured in Blink:
+      // `offsetWidth` 0, a 0x0 rect, computed width `auto`), and every reader
+      // of a box reports nothing to divide by.
       for (const label of root.querySelectorAll<HTMLElement>(".s-auth-methods-label")) {
         const previous = label.style.width;
         label.style.width = "max-content";
-        widest = Math.max(widest, label.getBoundingClientRect().width / (factor > 0 ? factor : 1));
+        const drawn = label.getBoundingClientRect().width;
+        const scale = drawnScale(label);
+        const factor = Number.isFinite(scale.x) && scale.x > 0 ? scale.x : 1;
+        // `offsetWidth` is the laid-out fallback — already in the units the
+        // published length is used in, so it needs no division.
+        widest = Math.max(widest, factor > 0 ? drawn / factor : label.offsetWidth);
         label.style.width = previous;
       }
       // Guard: only publish when real text metrics were observed, so a

package/src/composables/layoutGeometry.ts

@@ -110,6 +110,13 @@ export function layoutOffset(el: HTMLElement, frame?: HTMLElement | null): Layou
  *  while the drawn-box equivalent (`rect.top - frameRect.top + frame.scrollTop`)
  *  is `k` times too large at zoom `k`.
  *
+ *  The frame's own border is excluded exactly when the walk passed THROUGH it
+ *  (`through`): a positioned frame measures its children from its padding edge,
+ *  so the difference does too, while a frame that is not in the chain (a
+ *  `position: static` scroller) is measured from its border box. The result is
+ *  the value `scrollTop`/`scrollLeft` want in both cases — those are offsets
+ *  into the scrollable area, whose origin is the padding edge.
+ *
  *  `y` (and `x`) are `NaN` when the chain cannot be added up or when `frame` is
  *  not an ancestor of `el` — the difference is meaningless then, and callers
  *  check `Number.isFinite` before scrolling with it. */

package/src/composables/useOverlayScrollbar.test.ts

@@ -208,6 +208,34 @@ describe("attachOverlayScrollbars", () => {
     expect(viewport.scrollTop).toBe(150);
   });
 
+  it("maps a horizontal track click onto the RTL scroll range", () => {
+    const { viewport, wrapper, handle } = mountViewport("horizontal");
+    stubGeometry(viewport, {
+      scrollHeight: 100, clientHeight: 100, scrollTop: 0,
+      scrollWidth: 400, clientWidth: 100, scrollLeft: 0,
+    });
+    // An RTL scroller counts `scrollLeft` down from 0 to −max (see the thumb
+    // mirroring): the track's LEFT end is the content's end, so a click at the
+    // halfway point must land at −150, not +150.
+    viewport.style.direction = "rtl";
+    handle.update();
+    const track = wrapper.querySelector<HTMLElement>(".hk-scrollbar-track")!;
+    vi.spyOn(track, "getBoundingClientRect").mockReturnValue({
+      top: 0, left: 0, width: 100, height: 6,
+      bottom: 6, right: 100, x: 0, y: 0, toJSON: () => ({}),
+    } as DOMRect);
+    track.dispatchEvent(new MouseEvent("click", { bubbles: true, clientX: 25 }));
+    // A quarter along the track, measured from its left = three quarters into
+    // the content from its (right-hand) start: −0.75 × 300.
+    expect(viewport.scrollLeft).toBe(-225);
+    // The magnitude is what the thumb's own mirroring reads back as progress
+    // (|scrollLeft| / max), so click and thumb now agree on the position.
+    // The LTR bar keeps mapping straight through.
+    viewport.style.direction = "ltr";
+    track.dispatchEvent(new MouseEvent("click", { bubbles: true, clientX: 25 }));
+    expect(viewport.scrollLeft).toBe(75);
+  });
+
   it("marks and unmarks a static parent with inline position:relative (guard)", () => {
     const { wrapper, handle } = mountViewport("vertical");
     // happy-dom computes no CSS → position computes "static" → the

package/src/composables/useOverlayScrollbar.ts

@@ -266,8 +266,16 @@ export function attachOverlayScrollbars(
         : (e.clientY - rect.top) / rect.height;
       const { scrollSize, clientSize } = axisMetrics(viewport, horizontal);
       const max = scrollSize - clientSize;
-      if (horizontal) viewport.scrollLeft = ratio * max;
-      else viewport.scrollTop = ratio * max;
+      if (horizontal) {
+        // RTL: the track's left end is the content's END, and `scrollLeft`
+        // runs 0 → −max (see the thumb mirroring in `update`), so a click at
+        // `ratio` from the left asks for `(ratio - 1) * max`. Without this the
+        // thumb and the click disagreed in RTL: the thumb was mirrored but the
+        // click still mapped LTR, so clicking right of the thumb scrolled the
+        // other way.
+        const rtl = isRtlAxis(viewport, true);
+        viewport.scrollLeft = rtl ? (ratio - 1) * max : ratio * max;
+      } else viewport.scrollTop = ratio * max;
     };
     const onEnter = () => s.track.classList.add("is-hovering");
     const onLeave = () => s.track.classList.remove("is-hovering");