@raylang/elements 0.7.0 → 0.9.0

package/components/textarea/textarea.js

@@ -3,6 +3,8 @@
 import { css, define } from "../../core/core.js";
 import { sizeStyles, radiusStyles } from "../../core/styles.js";
 import { FieldControl, fieldStyles, boxStyles, fieldTemplate } from "../../core/form.js";
+import { syncHighlight, textLayerStyles } from "../../core/textlayer.js";
+import { syncComplete, completeStyles } from "../../core/complete.js";
 
 const styles = css`
   .box { align-items: stretch; }
@@ -26,8 +28,11 @@ export class RayTextarea extends FieldControl {
     autosize: { type: Boolean, reflect: true },
     maxRows: { type: Number },
     readonly: { type: Boolean, reflect: true },
+    highlight: { attribute: false },
+    complete: { attribute: false },
+    suggestionsLabel: { type: String, default: "Suggestions" },
   };
-  static styles = [sizeStyles, radiusStyles, fieldStyles, boxStyles, styles];
+  static styles = [sizeStyles, radiusStyles, fieldStyles, boxStyles, textLayerStyles, completeStyles, styles];
   static template = fieldTemplate(`<textarea id="control" class="control" part="textarea"></textarea>`, { sections: false });
 
   static get observedAttributes() {
@@ -68,6 +73,13 @@ export class RayTextarea extends FieldControl {
     this.syncField();
     this._commit();
     this._fit();
+    syncHighlight(this);
+    syncComplete(this);
+  }
+
+  /** Runs `highlight` again (what it marks changed, not the text). */
+  refreshHighlight() {
+    syncHighlight(this);
   }
 
   _commit() {

package/components/timeline/timeline.js

@@ -22,9 +22,14 @@ const itemStyles = css`
   }
   :host([hidden]) { display: none; }
   :host([data-last]) { padding-bottom: 0; }
-  :host([data-align="right"]) { grid-template-columns: minmax(0, 1fr) var(--_bullet); text-align: right; }
-  :host([data-align="right"]) .bullet-col { grid-column: 2; grid-row: 1; }
-  :host([data-align="right"]) .body { grid-column: 1; grid-row: 1; }
+  /* The line at the end: end, or left/right as sides of the screen (the
+     grid's columns follow the writing direction). */
+  :host([data-align="end"]), :host([data-align="right"]:dir(ltr)), :host([data-align="left"]:dir(rtl)) {
+    grid-template-columns: minmax(0, 1fr) var(--_bullet);
+    text-align: end;
+  }
+  :host([data-align="end"]) .bullet-col, :host([data-align="right"]:dir(ltr)) .bullet-col, :host([data-align="left"]:dir(rtl)) .bullet-col { grid-column: 2; grid-row: 1; }
+  :host([data-align="end"]) .body, :host([data-align="right"]:dir(ltr)) .body, :host([data-align="left"]:dir(rtl)) .body { grid-column: 1; grid-row: 1; }
   .bullet-col { position: relative; display: flex; justify-content: center; }
   .bullet {
     position: relative;
@@ -47,12 +52,12 @@ const itemStyles = css`
     position: absolute;
     top: var(--_bullet);
     bottom: calc(-1 * var(--ray-space-6));
-    left: calc(50% - var(--_line) / 2);
+    left: calc(50% - var(--_line) / 2); /* physical */
     width: 0;
-    border-left: var(--_line) var(--_line-style, solid) var(--ray-border);
+    border-left: var(--_line) var(--_line-style, solid) var(--ray-border); /* physical */
   }
   :host([data-last]) .line { display: none; }
-  :host([data-line-reached]) .line { border-left-color: var(--_filled); }
+  :host([data-line-reached]) .line { border-left-color: var(--_filled); } /* physical */
   :host([line-variant="dashed"]) .line { --_line-style: dashed; }
   :host([line-variant="dotted"]) .line { --_line-style: dotted; }
   .body { min-width: 0; padding-top: calc((var(--_bullet) - 1.4em) / 2); }
@@ -67,7 +72,7 @@ const itemStyles = css`
 export class RayTimeline extends RayElement {
   static properties = {
     active: { type: Number, reflect: true, default: -1 },
-    align: { type: String, reflect: true, default: "left" },
+    align: { type: String, reflect: true, default: "start" },
     bulletSize: { type: String, attribute: "bullet-size" },
     lineWidth: { type: Number, attribute: "line-width" },
     color: { type: String, reflect: true },
@@ -106,7 +111,7 @@ export class RayTimeline extends RayElement {
       item.toggleAttribute("data-reached", active >= 0 && k <= active);
       item.toggleAttribute("data-line-reached", active >= 0 && (this.reverseActive ? k <= active && k > 0 : k < active));
       item.toggleAttribute("data-last", i === n - 1);
-      item.setAttribute("data-align", this.align === "right" ? "right" : "left");
+      item.setAttribute("data-align", ["end", "left", "right"].includes(this.align) ? this.align : "start");
     });
   }
 }

package/components/toggle-group/toggle-group.js

@@ -13,6 +13,7 @@
 //   </ray-toggle-group>
 
 import { css, define } from "../../core/core.js";
+import { inlineKey } from "../../core/direction.js";
 import { RayButtonGroup } from "../button-group/button-group.js";
 import "../toggle/toggle.js";
 
@@ -113,14 +114,15 @@ export class RayToggleGroup extends RayButtonGroup {
     const vertical = this.orientation === "vertical";
     const next = vertical ? "ArrowDown" : "ArrowRight";
     const prev = vertical ? "ArrowUp" : "ArrowLeft";
-    if (![next, prev, "Home", "End"].includes(e.key)) return;
+    const key = vertical ? e.key : inlineKey(e.key, this);
+    if (![next, prev, "Home", "End"].includes(key)) return;
     const items = this.toggles.filter((t) => !t.disabled);
     if (items.length === 0) return;
     const current = items.findIndex((t) => t.matches(":focus-within"));
     let i = current;
-    if (e.key === "Home") i = 0;
-    else if (e.key === "End") i = items.length - 1;
-    else if (e.key === next) i = (current + 1) % items.length;
+    if (key === "Home") i = 0;
+    else if (key === "End") i = items.length - 1;
+    else if (key === next) i = (current + 1) % items.length;
     else i = (current - 1 + items.length) % items.length;
     e.preventDefault();
     this.#rove(items[i]);

package/core/complete.js

@@ -0,0 +1,252 @@
+// Inline suggestions for a text field (ray-input, ray-textarea): while the
+// user types, `host.complete(text, caret)` says which part of the text a
+// suggestion would replace and with what ({ from, to, items }, or null);
+// a listbox opens under that part, in the top layer, and the chosen item
+// replaces it as an edit (undoable, an ordinary input event).
+//
+// The combobox pattern: the control gets aria-autocomplete, aria-expanded,
+// aria-controls and aria-activedescendant; the listbox lives in the same
+// shadow root, so the ids work. ArrowUp/Down move, Enter or Tab accept,
+// Escape closes, Ctrl+Space asks; the keys are taken before the control's
+// own (Enter submitting, Escape closing a dialog) only while the list is
+// open.
+
+import { css, uid } from "./core.js";
+import { TextLayer, syncHighlight } from "./textlayer.js";
+
+export const completeStyles = css`
+  .suggestions {
+    position: fixed;
+    inset: auto;
+    box-sizing: border-box;
+    min-width: 12rem;
+    max-width: min(28rem, calc(100vw - 16px));
+    max-height: 14rem;
+    margin: 0;
+    padding: var(--ray-space-1);
+    overflow-y: auto;
+    font-size: var(--ray-font-size-sm);
+    color: var(--ray-popover-foreground);
+    background: var(--ray-popover);
+    border: 1px solid var(--ray-border);
+    border-radius: var(--ray-radius-default);
+    box-shadow: var(--ray-shadow-md);
+  }
+  .suggestion {
+    display: flex;
+    align-items: baseline;
+    gap: var(--ray-space-3);
+    padding: var(--ray-space-1) var(--ray-space-2);
+    border-radius: var(--ray-radius-sm);
+    cursor: default;
+    white-space: nowrap;
+  }
+  .suggestion[aria-selected="true"] { color: var(--ray-accent-foreground); background: var(--ray-accent); }
+  .suggestion .s-label { flex: none; font-family: var(--ray-font-mono); }
+  .suggestion .s-detail { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ray-muted-foreground); }
+  .suggestion .s-description { display: block; font-size: var(--ray-font-size-xs); color: var(--ray-muted-foreground); }
+`;
+
+/** The layer of a field, made once (shared with highlight). */
+export function layerOf(host) {
+  host._textLayer ??= new TextLayer(host.control);
+  return host._textLayer;
+}
+
+class Completer {
+  constructor(host) {
+    this.host = host;
+    const c = (this.control = host.control);
+    this.list = document.createElement("div");
+    this.list.className = "suggestions";
+    this.list.id = uid("suggestions");
+    this.list.setAttribute("part", "suggestions");
+    this.list.setAttribute("role", "listbox");
+    this.list.popover = "manual";
+    host.shadowRoot.append(this.list);
+    this.open = null; // { items, index, from, to }
+    this.asked = 0;
+    this.inserting = false;
+    c.setAttribute("aria-autocomplete", "list");
+    c.setAttribute("aria-expanded", "false");
+    c.setAttribute("aria-controls", this.list.id);
+    if (c.localName === "input") c.setAttribute("role", "combobox");
+    // Choosing with the pointer keeps the focus (and the caret) in the field.
+    this.list.addEventListener("pointerdown", (e) => e.preventDefault());
+    this.list.addEventListener("click", (e) => {
+      const option = e.target.closest(".suggestion");
+      if (option) this.accept(Number(option.dataset.index));
+    });
+    c.addEventListener("input", () => {
+      if (!this.inserting) this.ask();
+    });
+    c.addEventListener("click", () => this.open && this.ask());
+    c.addEventListener("blur", () => this.close());
+    // The caret moved along the text (on keyup it has landed): ask where it is now.
+    c.addEventListener("keyup", (e) => {
+      if (this.open && ["ArrowLeft", "ArrowRight", "Home", "End"].includes(e.key)) this.ask();
+    });
+    // Captured on the host: before the control's Enter and a dialog's Escape.
+    host.addEventListener("keydown", (e) => this.key(e), { capture: true });
+  }
+
+  /** Calls complete() for the text and caret now; shows or closes the list. */
+  async ask() {
+    const c = this.control;
+    const fn = this.host.complete;
+    if (typeof fn !== "function" || c.selectionStart !== c.selectionEnd || c.readOnly || c.disabled) {
+      this.close();
+      return;
+    }
+    const n = ++this.asked;
+    let result = null;
+    try {
+      result = await fn(c.value, c.selectionStart);
+    } catch (err) {
+      console.error("ray-elements: complete() threw", err);
+    }
+    // A later keystroke asked again, or the field lost the focus meanwhile.
+    if (n !== this.asked || this.host.shadowRoot.activeElement !== c) return;
+    const items = Array.isArray(result?.items) ? result.items.filter((i) => i && i.value !== undefined) : [];
+    if (!items.length) {
+      this.close();
+      return;
+    }
+    const length = c.value.length;
+    const from = Math.max(0, Math.min(length, Math.trunc(result.from ?? c.selectionStart)));
+    const to = Math.max(from, Math.min(length, Math.trunc(result.to ?? c.selectionStart)));
+    this.show(items, from, to);
+  }
+
+  show(items, from, to) {
+    this.list.setAttribute("aria-label", this.host.suggestionsLabel ?? "Suggestions");
+    this.list.replaceChildren(...items.map((item, i) => {
+      const option = document.createElement("div");
+      option.className = "suggestion";
+      option.id = `${this.list.id}-${i}`;
+      option.dataset.index = String(i);
+      option.setAttribute("role", "option");
+      option.setAttribute("part", "suggestion");
+      const label = document.createElement("span");
+      label.className = "s-label";
+      label.textContent = item.label ?? String(item.value);
+      option.append(label);
+      if (item.detail) {
+        const detail = document.createElement("span");
+        detail.className = "s-detail";
+        detail.textContent = item.detail;
+        option.append(detail);
+      }
+      if (item.description) {
+        const d = document.createElement("span");
+        d.className = "s-description";
+        d.textContent = item.description;
+        label.append(d);
+      }
+      return option;
+    }));
+    const keep = this.open ? this.open.items[this.open.index]?.value : undefined;
+    const index = Math.max(0, items.findIndex((i) => i.value === keep));
+    this.open = { items, index, from, to };
+    if (!this.list.matches(":popover-open")) this.list.showPopover();
+    this.control.setAttribute("aria-expanded", "true");
+    this.select(index);
+    this.place();
+  }
+
+  // Under the text it would replace; above it when there is no room below.
+  place() {
+    const at = layerOf(this.host);
+    // The layer's text as it is now (it is otherwise repainted on update).
+    syncHighlight(this.host);
+    const r = at.rectAt(this.open.from);
+    // A one-line field: below its box, not inside it; a textarea: below the line.
+    const box = at.multi ? r : this.control.parentElement.getBoundingClientRect();
+    const w = this.list.offsetWidth;
+    const h = this.list.offsetHeight;
+    const gap = 4;
+    const left = Math.max(8, Math.min(r.left, innerWidth - w - 8));
+    const below = box.bottom + gap;
+    const top = below + h <= innerHeight - 8 ? below : Math.max(8, box.top - gap - h);
+    this.list.style.left = `${left}px`;
+    this.list.style.top = `${top}px`;
+  }
+
+  select(index) {
+    this.open.index = index;
+    const options = [...this.list.children];
+    options.forEach((o, i) => o.setAttribute("aria-selected", String(i === index)));
+    const current = options[index];
+    if (!current) return;
+    this.control.setAttribute("aria-activedescendant", current.id);
+    const top = current.offsetTop;
+    if (top < this.list.scrollTop) this.list.scrollTop = top;
+    else if (top + current.offsetHeight > this.list.scrollTop + this.list.clientHeight) this.list.scrollTop = top + current.offsetHeight - this.list.clientHeight;
+  }
+
+  close() {
+    this.asked++;
+    if (!this.open) return;
+    this.open = null;
+    this.control.setAttribute("aria-expanded", "false");
+    this.control.removeAttribute("aria-activedescendant");
+    if (this.list.matches(":popover-open")) this.list.hidePopover();
+  }
+
+  /** Replaces from–to with the item's value, as an edit. */
+  accept(index) {
+    const { items, from, to } = this.open ?? {};
+    const item = items?.[index];
+    this.close();
+    if (!item) return;
+    const c = this.control;
+    const text = String(item.value);
+    c.focus();
+    c.setSelectionRange(from, to);
+    this.inserting = true;
+    try {
+      // execCommand edits the focused element and keeps undo; without the
+      // focus (a window in the background) it may do nothing: set it then.
+      const focused = this.host.shadowRoot.activeElement === c;
+      if (!focused || !document.execCommand("insertText", false, text) || c.value.slice(from, from + text.length) !== text) {
+        c.value = c.value.slice(0, from) + text + c.value.slice(to);
+        c.setSelectionRange(from + text.length, from + text.length);
+        c.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
+      }
+    } finally {
+      this.inserting = false;
+    }
+    this.host.emit("ray-complete", { item, from, to });
+  }
+
+  key(e) {
+    if (e.composedPath()[0] !== this.control) return;
+    if (e.key === " " && e.ctrlKey) {
+      e.preventDefault();
+      this.ask();
+      return;
+    }
+    if (!this.open) return;
+    const n = this.open.items.length;
+    const take = () => {
+      e.preventDefault();
+      e.stopPropagation();
+    };
+    switch (e.key) {
+      case "ArrowDown": take(); this.select((this.open.index + 1) % n); break;
+      case "ArrowUp": take(); this.select((this.open.index - 1 + n) % n); break;
+      case "Enter":
+      case "Tab": take(); this.accept(this.open.index); break;
+      case "Escape": take(); this.close(); break;
+    }
+  }
+}
+
+/**
+ * Sets up inline suggestions on `host` (ray-input, ray-textarea) the first
+ * time it has a `complete` function; closes the list when it is removed.
+ */
+export function syncComplete(host) {
+  if (typeof host.complete === "function") host._completer ??= new Completer(host);
+  else host._completer?.close();
+}

package/core/core.js

@@ -2,7 +2,7 @@
 // the theme API. No dependencies; loads as a plain ES module (also from
 // ray://app in a std/ui window).
 
-import { getIcon, onIconsChange } from "./icons.js";
+import { getIcon, mirrorsInRtl, onIconsChange } from "./icons.js";
 import { parseColor, shades, contrastRatio, toHex, toOklch } from "./color.js";
 
 export { setIcons, getIcon, iconNames, iconAliases } from "./icons.js";
@@ -59,6 +59,8 @@ export const hostStyles = css`
     height: var(--ray-icon-size, 1em);
     stroke-width: var(--ray-icon-stroke, 2);
   }
+  /* Right to left, the roles that point along the text. */
+  :where([data-ray-icon-mirror]):dir(rtl) > svg { transform: scaleX(-1); }
   .focus-ring:focus-visible {
     outline: var(--ray-focus-ring-width) solid var(--ray-ring);
     outline-offset: var(--ray-focus-ring-offset);
@@ -315,11 +317,14 @@ export class RayElement extends HTMLElement {
    * it for markup they create after the template. An empty name or "none"
    * (the value components use to hide an icon) leaves the slot empty;
    * data-ray-icon-filled asks for the filled version (the outline without one).
+   * A role that points along the text (ui.next…) gets data-ray-icon-mirror,
+   * which mirrors it under dir="rtl".
    */
   paintIcons(root = this.shadowRoot) {
     for (const slot of root.querySelectorAll("[data-ray-icon]")) {
       const name = slot.getAttribute("data-ray-icon");
       slot.innerHTML = name && name !== "none" ? getIcon(name, { filled: slot.hasAttribute("data-ray-icon-filled") }) : "";
+      slot.toggleAttribute("data-ray-icon-mirror", mirrorsInRtl(name));
     }
   }
 }

package/core/direction.js

@@ -0,0 +1,19 @@
+// The writing direction, for what CSS does not mirror by itself: arrow keys
+// and pointer or scroll coordinates. Read when used (not cached), so a
+// change of dir takes effect at once.
+
+/** Whether `el` lays out right to left (dir="rtl" on it or an ancestor). */
+export function isRtl(el) {
+  return getComputedStyle(el).direction === "rtl";
+}
+
+/**
+ * An arrow key as the reading direction sees it. Right to left, ArrowLeft
+ * moves forward, so it comes back as "ArrowRight", and ArrowRight as
+ * "ArrowLeft"; any other key as it is.
+ *   if (inlineKey(e.key, this) === "ArrowRight") this.next();
+ */
+export function inlineKey(key, el) {
+  if ((key === "ArrowLeft" || key === "ArrowRight") && isRtl(el)) return key === "ArrowLeft" ? "ArrowRight" : "ArrowLeft";
+  return key;
+}

package/core/icons.js

@@ -13,6 +13,10 @@
 // setIcons({ close: … }) still changes every × and setIcons({ "ui.remove": … })
 // only the chips'.
 //
+// The roles that point along the text (ui.next, ui.previous, ui.disclosure…;
+// MIRRORED) are drawn mirrored in a right-to-left context, the glyph or the
+// app's own icon alike: the next page is to the left there.
+//
 // An icon may have a filled version, "<name>:filled", for a state: the active
 // tab, a favorite, unread. <ray-icon name="star" filled> draws it, and the
 // outline one when there is none. setIcons({ "star:filled": … }) adds one.
@@ -131,6 +135,14 @@ const ALIASES = {
   "ui.trend-flat": "minus",
 };
 
+/** The roles that point along the text: mirrored in a right-to-left context. */
+const MIRRORED = new Set(["ui.disclosure", "ui.previous", "ui.next", "ui.first", "ui.last", "ui.separator"]);
+
+/** Whether an icon is drawn mirrored right to left (a role that points along the text). */
+export function mirrorsInRtl(name) {
+  return MIRRORED.has(name);
+}
+
 const registry = new Map([...Object.entries(DEFAULTS), ...Object.entries(FILLED).map(([name, markup]) => [name + FILLED_SUFFIX, markup])]);
 const listeners = new Set();
 const warned = new Set();

package/core/position.js

@@ -5,12 +5,19 @@
 // side when it does not fit, and shifted to stay inside the viewport.
 // Done in JS rather than CSS anchor positioning, which not every webview
 // ships yet (WebKitGTK, older WKWebView).
+//
+// The sides top/bottom/left/right are sides of the screen; the alignments
+// -start/-end follow the writing direction of the floating element: right to
+// left, "bottom-start" lines up the right edges.
+
+import { isRtl } from "./direction.js";
 
 const OPPOSITE = { top: "bottom", bottom: "top", left: "right", right: "left" };
 
 /**
  * @typedef {object} PlaceOptions
- * @property {string} [placement]  side[-align]: top|bottom|left|right, -start|-end (default "bottom")
+ * @property {string} [placement]  side[-align]: top|bottom|left|right, -start|-end (default "bottom");
+ *   on top/bottom, -start/-end follow the writing direction
  * @property {number} [offset]     gap to the anchor in px (default 8)
  * @property {number} [padding]    minimum distance to the viewport edges (default 8)
  * @property {boolean} [flip]      try the opposite side when it does not fit (default true)
@@ -45,8 +52,9 @@ export function place(anchor, floating, { placement = "bottom", offset = 8, padd
   let y;
   if (side === "top" || side === "bottom") {
     y = side === "bottom" ? anchor.bottom + offset : anchor.top - offset - f.height;
-    x = align === "start" ? anchor.left
-      : align === "end" ? anchor.right - f.width
+    const rtl = align !== "center" && isRtl(floating);
+    x = align === (rtl ? "end" : "start") ? anchor.left
+      : align === (rtl ? "start" : "end") ? anchor.right - f.width
       : anchor.left + anchor.width / 2 - f.width / 2;
   } else {
     x = side === "right" ? anchor.right + offset : anchor.left - offset - f.width;

package/core/scroll.js

@@ -1,6 +1,9 @@
 // Which element scrolls the page an element sits on, and the direction of
 // its scrolling: for the bars that hide while scrolling down and come back
-// on the way up (ray-app-bar, ray-bottom-nav).
+// on the way up (ray-app-bar, ray-bottom-nav); and rows that scroll sideways.
+
+import { css } from "./core.js";
+import { isRtl } from "./direction.js";
 
 /**
  * The scroller of `el`: `target` (an element or a selector) when given,
@@ -56,3 +59,84 @@ export function watchScroll(scroller, cb, { tolerance = 8 } = {}) {
     cancelAnimationFrame(frame);
   };
 }
+
+// --- a row that scrolls sideways (tab bars) -----------------------------------
+
+/**
+ * The look of a SideScroller's row (class "list"): the edge that hides items
+ * fades out, following the writing direction.
+ */
+export const sideScrollerStyles = css`
+  .list { --_fade-start: 0px; --_fade-end: 0px; --_fade-dir: to right; }
+  .list:dir(rtl) { --_fade-dir: to left; }
+  :host([data-overflow-start]) .list { --_fade-start: 2.5rem; }
+  :host([data-overflow-end]) .list { --_fade-end: 2.5rem; }
+  :host([data-overflow-start]) .list, :host([data-overflow-end]) .list {
+    -webkit-mask-image: linear-gradient(var(--_fade-dir), transparent, #000 var(--_fade-start), #000 calc(100% - var(--_fade-end)), transparent);
+    mask-image: linear-gradient(var(--_fade-dir), transparent, #000 var(--_fade-start), #000 calc(100% - var(--_fade-end)), transparent);
+  }
+`;
+
+/**
+ * A row of items that scrolls sideways (ray-tabs, ray-doc-tabs): it marks
+ * `host` with data-overflow-start / data-overflow-end (following the writing
+ * direction), turns a vertical wheel into a sideways scroll while the row
+ * can move (at its ends the page scrolls), and scrolls an item into view,
+ * moving the row only. `active()` false (a vertical tab list) turns it off;
+ * `onResize` runs when the row's size changes.
+ */
+export class SideScroller {
+  constructor(host, row, { active = () => true, onResize = () => {} } = {}) {
+    this.host = host;
+    this.row = row;
+    this.active = active;
+    row.addEventListener("scroll", () => this.update(), { passive: true });
+    row.addEventListener("wheel", (e) => this.#wheel(e), { passive: false });
+    this.ro = typeof ResizeObserver === "function" ? new ResizeObserver(() => onResize()) : null;
+  }
+
+  connect() {
+    this.ro?.observe(this.row);
+  }
+
+  disconnect() {
+    this.ro?.disconnect();
+  }
+
+  /** How far the row is scrolled from its start, and how much is left to its end. */
+  scrolled() {
+    // Right to left, scrollLeft runs from 0 to negative.
+    const start = Math.abs(this.row.scrollLeft);
+    return { start, end: this.row.scrollWidth - this.row.clientWidth - start };
+  }
+
+  /** Sets the host's overflow marks. */
+  update() {
+    const on = this.active();
+    const { start, end } = this.scrolled();
+    this.host.toggleAttribute("data-overflow-start", on && start > 1);
+    this.host.toggleAttribute("data-overflow-end", on && end > 1);
+  }
+
+  /** Scrolls the row to show `el`; false before layout (try again later). */
+  reveal(el) {
+    if (!el || !this.active()) return true;
+    const r = this.row.getBoundingClientRect();
+    const e = el.getBoundingClientRect();
+    if (!r.width) return false;
+    if (e.left < r.left) this.row.scrollLeft -= r.left - e.left;
+    else if (e.right > r.right) this.row.scrollLeft += e.right - r.right;
+    return true;
+  }
+
+  #wheel(e) {
+    if (!this.active() || e.ctrlKey || Math.abs(e.deltaY) <= Math.abs(e.deltaX)) return;
+    const forward = e.deltaY > 0;
+    const { start, end } = this.scrolled();
+    if (forward ? end <= 1 : start <= 1) return;
+    e.preventDefault();
+    const step = e.deltaMode === 1 ? e.deltaY * 16 : e.deltaY;
+    this.row.scrollLeft += isRtl(this.host) ? -step : step;
+    this.update();
+  }
+}

package/core/styles.js

@@ -154,7 +154,7 @@ export const loaderStyles = css`
     width: var(--_loader, 1em);
     height: var(--_loader, 1em);
     border: max(2px, calc(var(--_loader, 1em) / 8)) solid currentColor;
-    border-right-color: transparent;
+    border-right-color: transparent; /* physical */
     border-radius: 50%;
     animation: ray-spin 0.75s linear infinite;
   }