@raylang/elements 0.0.0-stage → 0.3.0

package/components/popover/popover.js

@@ -0,0 +1,85 @@
+// <ray-popover>: a floating panel anchored to a trigger (slot="trigger"),
+// toggled by clicking it; closes on Escape and outside clicks.
+
+import { css, define } from "../../core/core.js";
+import { Floating, floatingStyles } from "../../core/floating.js";
+import { focusFirst, tabbables } from "../../core/focus.js";
+
+const styles = css`
+  /* Defaults on the host, so an ancestor's private --_p / --_width do not leak in. */
+  :host { --_p: var(--ray-space-md); --_width: max-content; }
+  .panel { padding: var(--_p); width: var(--_width); }
+  :host([padding="0"]) { --_p: 0; }
+  :host([padding="xs"]) { --_p: var(--ray-space-xs); }
+  :host([padding="sm"]) { --_p: var(--ray-space-sm); }
+  :host([padding="lg"]) { --_p: var(--ray-space-lg); }
+`;
+
+export class RayPopover extends Floating {
+  static properties = {
+    ...Floating.properties,
+    width: { type: String },
+    padding: { type: String, reflect: true },
+    matchWidth: { type: Boolean, reflect: true },
+    trapFocus: { type: Boolean, reflect: true },
+  };
+  static styles = [floatingStyles, styles];
+  static template = `<slot name="trigger"></slot><div class="panel" part="dropdown" role="dialog"><slot></slot></div>`;
+
+  wireTrigger(t) {
+    t.addEventListener("click", () => {
+      if (!this.open && this.justClosed()) return;
+      this.toggle();
+    });
+  }
+
+  update(changed) {
+    if (this.width) this.style.setProperty("--_width", /^\d+$/.test(this.width) ? `${this.width}px` : this.width);
+    else this.style.removeProperty("--_width");
+    const label = this.getAttribute("aria-label");
+    if (label) this.panel.setAttribute("aria-label", label);
+    super.update(changed);
+  }
+
+  placeOptions() {
+    return { matchWidth: Boolean(this.matchWidth) };
+  }
+
+  toggled(open) {
+    if (open) {
+      if (this.trapFocus) focusFirst(this, { lightOnly: true });
+      this._onKey = (e) => this._keydown(e);
+      this.panel.addEventListener("keydown", this._onKey);
+    } else {
+      this.panel.removeEventListener("keydown", this._onKey);
+      // Return focus to the trigger if it was inside the panel.
+      if (this.focusWasInside) this.trigger?.focus();
+    }
+  }
+
+  // With trap-focus, Tab cycles inside the panel.
+  _keydown(e) {
+    if (e.key !== "Tab" || !this.trapFocus) return;
+    const items = tabbables(this, { lightOnly: true }).filter((el) => el !== this.trigger && !this.trigger?.contains(el));
+    if (!items.length) return;
+    const active = deepActive();
+    const first = items[0];
+    const last = items[items.length - 1];
+    const at = (el) => el === active || el.shadowRoot?.contains(active) || el.contains(active);
+    if (e.shiftKey && at(first)) {
+      e.preventDefault();
+      last.focus();
+    } else if (!e.shiftKey && at(last)) {
+      e.preventDefault();
+      first.focus();
+    }
+  }
+}
+
+function deepActive() {
+  let a = document.activeElement;
+  while (a?.shadowRoot?.activeElement) a = a.shadowRoot.activeElement;
+  return a;
+}
+
+define("ray-popover", RayPopover);

package/components/progress/progress.js

@@ -0,0 +1,109 @@
+// <ray-progress>: a determinate or indeterminate progress bar.
+
+import { RayElement, css, define } from "../../core/core.js";
+import { applyColor, radiusStyles } from "../../core/styles.js";
+
+const styles = css`
+  :host {
+    display: block;
+    --_h: 0.5rem;
+    --_r: var(--ray-radius-full);
+  }
+  :host([size="xs"]) { --_h: 0.1875rem; }
+  :host([size="sm"]) { --_h: 0.3125rem; }
+  :host([size="lg"]) { --_h: 0.75rem; }
+  :host([size="xl"]) { --_h: 1rem; }
+  .row { display: flex; align-items: center; gap: var(--ray-space-2); }
+  .track {
+    flex: 1;
+    position: relative;
+    height: var(--_h);
+    overflow: hidden;
+    background: var(--ray-muted);
+    border-radius: var(--_r);
+    box-shadow: inset 0 0 0 1px var(--ray-border);
+  }
+  .bar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    width: var(--_pct, 0%);
+    background: var(--_filled);
+    border-radius: var(--_r);
+    color: var(--_contrast);
+    font-size: max(0.625rem, calc(var(--_h) * 0.7));
+    font-weight: var(--ray-font-weight-semibold);
+    line-height: 1;
+    white-space: nowrap;
+    transition: width var(--ray-duration-slow) var(--ray-easing-standard);
+  }
+  /* show-value on small bars: the value beside the track, not squeezed inside it. */
+  .value {
+    flex: none;
+    min-width: 2.75em;
+    text-align: right;
+    font-size: var(--ray-font-size-xs);
+    font-variant-numeric: tabular-nums;
+    color: var(--ray-muted-foreground);
+  }
+  .value:empty { display: none; }
+  :host([striped]) .bar {
+    background-image: linear-gradient(45deg, rgb(255 255 255 / 0.18) 25%, transparent 25%, transparent 50%, rgb(255 255 255 / 0.18) 50%, rgb(255 255 255 / 0.18) 75%, transparent 75%);
+    background-size: 1rem 1rem;
+  }
+  :host([animated]) .bar { animation: ray-stripes 1s linear infinite; }
+  @keyframes ray-stripes { from { background-position: 1rem 0; } to { background-position: 0 0; } }
+  .track[data-indeterminate] .bar {
+    position: absolute;
+    width: 40%;
+    animation: ray-indeterminate 1.4s var(--ray-easing-standard) infinite;
+  }
+  @keyframes ray-indeterminate { from { left: -40%; } to { left: 100%; } }
+`;
+
+export class RayProgress extends RayElement {
+  static properties = {
+    value: { type: Number },
+    max: { type: Number, default: 100 },
+    color: { type: String, reflect: true },
+    size: { type: String, reflect: true, default: "md" },
+    radius: { type: String, reflect: true },
+    striped: { type: Boolean, reflect: true },
+    animated: { type: Boolean, reflect: true },
+    label: { type: String },
+    showValue: { type: Boolean, reflect: true },
+  };
+  static styles = [radiusStyles, styles];
+  static template = `<div class="row"><div class="track" part="track"><div class="bar" part="bar"></div></div><span class="value" part="value" aria-hidden="true"></span></div>`;
+
+  constructor() {
+    super();
+    this.internals = this.attachInternals();
+    this.internals.role = "progressbar";
+  }
+
+  update() {
+    const track = this.$(".track");
+    const bar = this.$(".bar");
+    applyColor(track, this.color);
+    const max = this.max > 0 ? this.max : 100;
+    const indeterminate = this.value === undefined || this.value === null || Number.isNaN(this.value);
+    track.toggleAttribute("data-indeterminate", indeterminate);
+    const pct = indeterminate ? 0 : Math.min(100, Math.max(0, (this.value / max) * 100));
+    track.style.setProperty("--_pct", `${pct}%`);
+    const text = this.showValue && !indeterminate ? `${Math.round(pct)}%` : "";
+    // Inside the bar only when it is tall enough to hold text (lg, xl).
+    const inside = this.size === "lg" || this.size === "xl";
+    bar.textContent = inside ? text : "";
+    this.$(".value").textContent = inside ? "" : text;
+    const i = this.internals;
+    i.ariaValueMin = "0";
+    i.ariaValueMax = String(max);
+    i.ariaValueNow = indeterminate ? null : String(this.value);
+    i.ariaValueText = indeterminate ? null : `${Math.round(pct)}%`;
+    i.ariaLabel = this.label || this.getAttribute("aria-label") || "Progress";
+  }
+}
+
+define("ray-progress", RayProgress);

package/components/radio/radio.js

@@ -0,0 +1,253 @@
+// <ray-radio-group> + <ray-radio>: one choice among options.
+//
+// Native radios cannot group across shadow roots, so the group owns the
+// state: it is the form control (value submitted under `name`), keeps one
+// radio checked, and moves focus and selection with the arrow keys (roving
+// tabindex), like native radios.
+
+import { RayElement, css, define } from "../../core/core.js";
+import { applyColor, sizeStyles } from "../../core/styles.js";
+import { FormControl, fieldStyles } from "../../core/form.js";
+
+const groupStyles = css`
+  :host { --_rs: 1.25rem; }
+  :host([size="xs"]) { --_rs: 1rem; }
+  :host([size="md"]) { --_rs: 1.5rem; }
+  :host([size="lg"]) { --_rs: 1.875rem; }
+  :host([size="xl"]) { --_rs: 2.25rem; }
+  .items {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ray-space-3);
+    margin-top: var(--ray-space-2);
+  }
+  :host([orientation="horizontal"]) .items { flex-direction: row; flex-wrap: wrap; gap: var(--ray-space-5); }
+  .label { margin-bottom: 0; }
+`;
+
+export class RayRadioGroup extends FormControl {
+  static delegatesFocus = false;
+  static properties = {
+    name: { type: String, reflect: true },
+    value: { type: String },
+    label: { type: String },
+    description: { type: String },
+    error: { type: String },
+    required: { type: Boolean, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+    orientation: { type: String, reflect: true, default: "vertical" },
+    size: { type: String, reflect: true, default: "sm" },
+    color: { type: String, reflect: true },
+    variant: { type: String, reflect: true, default: "filled" },
+    descriptionPosition: { type: String, reflect: true, default: "above" },
+  };
+  static styles = [sizeStyles, fieldStyles, groupStyles];
+  static template = `
+    <div class="label" part="label" id="label" hidden><span class="label-text"></span><span class="required" aria-hidden="true" hidden> *</span></div>
+    <div class="description" part="description" id="description" hidden></div>
+    <div class="items" part="items"><slot></slot></div>
+    <div class="error" part="error" id="error" hidden></div>`;
+
+  constructor() {
+    super();
+    this.internals.role = "radiogroup";
+    this.addEventListener("keydown", (e) => this._keydown(e));
+    this.addEventListener("click", (e) => {
+      const radio = e.target.closest?.("ray-radio");
+      if (radio && this.radios.includes(radio)) this._choose(radio, true);
+    });
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this._wired) {
+      this._wired = true;
+      this.$("slot").addEventListener("slotchange", () => this.requestUpdate());
+      this._default = this.getAttribute("value");
+    }
+  }
+
+  /** The radios of this group (direct or nested, not in a nested group). */
+  get radios() {
+    return [...this.querySelectorAll("ray-radio")].filter((r) => r.closest("ray-radio-group") === this);
+  }
+
+  update() {
+    const radios = this.radios;
+    // A radio marked `checked` in the markup sets the initial value.
+    if (this.value === undefined) {
+      const marked = radios.find((r) => r.hasAttribute("checked"));
+      if (marked) {
+        this.commitProperty("value", marked.value);
+        if (this._default === null) this._default = marked.value;
+      }
+    }
+    const disabled = this.effectivelyDisabled;
+    const current = radios.find((r) => r.value === this.value);
+    const focusable = current && !current.disabled && !disabled ? current : radios.find((r) => !r.disabled);
+    for (const r of radios) {
+      r._setChecked(r === current);
+      r._setGroupDisabled(disabled);
+      r.toggleAttribute("data-outline", (r.variant || this.variant) === "outline");
+      r.tabIndex = r === focusable && !disabled ? 0 : -1;
+    }
+
+    this.$("#label").hidden = !this.label;
+    this.$(".label-text").textContent = this.label ?? "";
+    this.$(".required").hidden = !this.required;
+    const desc = this.$("#description");
+    desc.hidden = !this.description;
+    desc.textContent = this.description ?? "";
+    const err = this.$("#error");
+    err.hidden = !this.error;
+    err.textContent = this.error ?? "";
+    this.internals.ariaLabel = this.label || this.getAttribute("aria-label") || null;
+    this.internals.ariaRequired = this.required ? "true" : "false";
+    this.internals.ariaDisabled = disabled ? "true" : "false";
+    this.internals.ariaInvalid = this.error ? "true" : "false";
+    // Inherited by the radios (custom properties cross into the light DOM children).
+    applyColor(this, this.color);
+
+    this.internals.setFormValue(this.value ?? null);
+    if (this.required && !this.value) {
+      this.internals.setValidity({ valueMissing: true }, "Please select one of these options.", radios[0]);
+    } else {
+      this.internals.setValidity({});
+    }
+  }
+
+  _choose(radio, user) {
+    if (radio.disabled || this.effectivelyDisabled) return;
+    const changed = this.value !== radio.value;
+    this.value = radio.value;
+    radio.focus();
+    if (user && changed) {
+      this.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
+      this.dispatchEvent(new Event("change", { bubbles: true }));
+    }
+  }
+
+  _keydown(e) {
+    const radios = this.radios.filter((r) => !r.disabled);
+    const i = radios.indexOf(e.target.closest?.("ray-radio"));
+    if (i < 0) return;
+    let next = null;
+    if (e.key === "ArrowDown" || e.key === "ArrowRight") next = radios[(i + 1) % radios.length];
+    else if (e.key === "ArrowUp" || e.key === "ArrowLeft") next = radios[(i - 1 + radios.length) % radios.length];
+    else if (e.key === " ") next = radios[i];
+    if (!next) return;
+    e.preventDefault();
+    this._choose(next, true);
+  }
+
+  formResetCallback() {
+    this.value = this._default ?? undefined;
+  }
+
+  formStateRestoreCallback(state) {
+    this.value = state ?? undefined;
+  }
+}
+
+const radioStyles = css`
+  :host {
+    display: block;
+    --_s: var(--_rs, 1.25rem);
+    outline: none;
+  }
+  :host([size="xs"]) { --_s: 1rem; }
+  :host([size="sm"]) { --_s: 1.25rem; }
+  :host([size="md"]) { --_s: 1.5rem; }
+  :host([size="lg"]) { --_s: 1.875rem; }
+  :host([size="xl"]) { --_s: 2.25rem; }
+  .root { display: flex; align-items: flex-start; gap: calc(var(--_s) * 0.6); cursor: pointer; }
+  .indicator {
+    flex: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--_s);
+    height: var(--_s);
+    background: var(--ray-background);
+    border: 1px solid var(--ray-input);
+    border-radius: 50%;
+    transition: background-color var(--ray-duration-fast) var(--ray-easing-standard), border-color var(--ray-duration-fast) var(--ray-easing-standard);
+  }
+  .dot { width: 40%; height: 40%; border-radius: 50%; background: var(--_contrast, var(--ray-primary-contrast)); transform: scale(0); transition: transform var(--ray-duration-fast) var(--ray-easing-standard); }
+  :host([data-checked]) .indicator { background: var(--_filled, var(--ray-primary-filled)); border-color: var(--_filled, var(--ray-primary-filled)); }
+  :host([data-checked]) .dot { transform: scale(1); }
+  :host([data-outline][data-checked]) .indicator { background: var(--ray-background); }
+  :host([data-outline]) .dot { background: var(--_filled, var(--ray-primary-filled)); width: 50%; height: 50%; }
+  :host(:focus-visible) .indicator { outline: var(--ray-focus-ring-width) solid var(--ray-ring); outline-offset: var(--ray-focus-ring-offset); }
+  :host([data-disabled]) .root { cursor: not-allowed; }
+  :host([data-disabled]) .indicator { background: var(--ray-muted); border-color: var(--ray-border); }
+  :host([data-disabled][data-checked]) .indicator { background: var(--ray-border); }
+  :host([data-disabled]) .label { color: var(--ray-muted-foreground); }
+  .body { display: flex; flex-direction: column; justify-content: center; min-height: var(--_s); }
+  .label { font-size: var(--_fs, var(--ray-font-size-sm)); line-height: var(--ray-line-height-sm); }
+  .description { margin-top: var(--ray-space-1); font-size: calc(var(--_fs, var(--ray-font-size-sm)) - 0.125rem); color: var(--ray-muted-foreground); }
+  [hidden] { display: none !important; }
+`;
+
+export class RayRadio extends RayElement {
+  static properties = {
+    value: { type: String, reflect: true, default: "" },
+    label: { type: String },
+    description: { type: String },
+    disabled: { type: Boolean, reflect: true },
+    color: { type: String, reflect: true },
+    size: { type: String, reflect: true },
+    variant: { type: String, reflect: true },
+  };
+  static styles = [radioStyles];
+  static template = `
+    <div class="root" part="root">
+      <span class="indicator" part="indicator"><span class="dot"></span></span>
+      <span class="body">
+        <span class="label" part="label"><span class="label-text"></span><slot></slot></span>
+        <span class="description" part="description" hidden></span>
+      </span>
+    </div>`;
+
+  constructor() {
+    super();
+    this.internals = this.attachInternals();
+    this.internals.role = "radio";
+    this._checked = false;
+    this._groupDisabled = false;
+  }
+
+  /** Whether this radio is the group's choice (read-only: set the group's value). */
+  get checked() {
+    return this._checked;
+  }
+
+  _setChecked(on) {
+    this._checked = on;
+    this.toggleAttribute("data-checked", on);
+    this.internals.ariaChecked = on ? "true" : "false";
+  }
+
+  _setGroupDisabled(on) {
+    if (this._groupDisabled === on) return;
+    this._groupDisabled = on;
+    this.requestUpdate();
+  }
+
+  update(changed) {
+    // The group derives checked/tabindex from values and disabled states.
+    if (changed.has("value") || changed.has("disabled") || changed.has("variant")) this.closest("ray-radio-group")?.requestUpdate();
+    const disabled = Boolean(this.disabled || this._groupDisabled);
+    this.toggleAttribute("data-disabled", disabled);
+    this.internals.ariaDisabled = disabled ? "true" : "false";
+    this.$(".label-text").textContent = this.label ?? "";
+    const desc = this.$(".description");
+    desc.hidden = !this.description;
+    desc.textContent = this.description ?? "";
+    if (this.color) applyColor(this.$(".root"), this.color);
+    if (!this.closest("ray-radio-group") && !this.hasAttribute("tabindex")) this.tabIndex = 0;
+  }
+}
+
+define("ray-radio-group", RayRadioGroup);
+define("ray-radio", RayRadio);

package/components/scroll-area/scroll-area.js

@@ -0,0 +1,158 @@
+// <ray-scroll-area>: a box that scrolls its content (Mantine's ScrollArea),
+// with the native scrolling (wheel, touch, keyboard, momentum) and a thin
+// scrollbar painted with the tokens. Edge shadows tell there is more
+// content that way; ray-reach-end fires when the end comes into view (load
+// the next page there).
+//
+// Give it a size: height / max-height (or CSS, or a flex/grid parent).
+
+import { RayElement, css, define } from "../../core/core.js";
+
+const styles = css`
+  :host {
+    --_thumb: color-mix(in srgb, var(--ray-foreground) 28%, transparent);
+    --_shadow: color-mix(in srgb, var(--ray-foreground) 14%, transparent);
+    position: relative;
+    display: block;
+    min-width: 0;
+    min-height: 0;
+    overflow: hidden;
+  }
+  :host([hidden]) { display: none; }
+  .viewport {
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    max-height: inherit;
+    overflow: auto;
+    overscroll-behavior: contain;
+    scrollbar-width: thin;
+    scrollbar-color: var(--_thumb) transparent;
+    outline: none;
+  }
+  .viewport:focus-visible { box-shadow: inset 0 0 0 var(--ray-focus-ring-width) var(--ray-ring); }
+  :host([orientation="vertical"]) .viewport { overflow-x: hidden; }
+  :host([orientation="horizontal"]) .viewport { overflow-y: hidden; }
+  /* hover: the thumb shows while the pointer is over the area (or it scrolls). */
+  :host([type="hover"]) .viewport { scrollbar-color: transparent transparent; transition: scrollbar-color var(--ray-duration-base); }
+  :host([type="hover"]:hover) .viewport, :host([type="hover"][data-scrolling]) .viewport, :host([type="hover"]:focus-within) .viewport { scrollbar-color: var(--_thumb) transparent; }
+  :host([type="never"]) .viewport { scrollbar-width: none; }
+  :host([type="never"]) .viewport::-webkit-scrollbar { display: none; }
+
+  .edge {
+    position: absolute;
+    z-index: 1;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity var(--ray-duration-fast);
+  }
+  .edge[data-show] { opacity: 1; }
+  .top, .bottom { left: 0; right: 0; height: 0.75rem; }
+  .left, .right { top: 0; bottom: 0; width: 0.75rem; }
+  .top { top: 0; background: linear-gradient(var(--_shadow), transparent); }
+  .bottom { bottom: 0; background: linear-gradient(transparent, var(--_shadow)); }
+  .left { left: 0; background: linear-gradient(to right, var(--_shadow), transparent); }
+  .right { right: 0; background: linear-gradient(to left, var(--_shadow), transparent); }
+  :host([no-shadows]) .edge { display: none; }
+`;
+
+export class RayScrollArea extends RayElement {
+  static properties = {
+    height: { type: String },
+    maxHeight: { type: String, attribute: "max-height" },
+    orientation: { type: String, reflect: true, default: "vertical" },
+    type: { type: String, reflect: true, default: "auto" },
+    noShadows: { type: Boolean, reflect: true, attribute: "no-shadows" },
+    threshold: { type: Number, default: 48 },
+    label: { type: String },
+  };
+  static styles = [styles];
+  static template = `
+    <div class="viewport" part="viewport" tabindex="0"><slot></slot></div>
+    <span class="edge top" part="shadow"></span><span class="edge bottom" part="shadow"></span>
+    <span class="edge left" part="shadow"></span><span class="edge right" part="shadow"></span>`;
+
+  #ro = null;
+  #atEnd = false;
+  #idle = 0;
+
+  constructor() {
+    super();
+    /** The element that scrolls. */
+    this.viewport = this.$(".viewport");
+    this.viewport.addEventListener("scroll", () => this._onScroll(), { passive: true });
+    // Content that grows or shrinks moves the edges too.
+    this.$("slot").addEventListener("slotchange", () => {
+      for (const el of this.children) this.#ro?.observe(el);
+      this._edges();
+    });
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.#ro = new ResizeObserver(() => this._edges());
+    this.#ro.observe(this.viewport);
+    for (const el of this.children) this.#ro.observe(el);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.#ro?.disconnect();
+    this.#ro = null;
+  }
+
+  update() {
+    this.style.height = this.height ?? "";
+    this.style.maxHeight = this.maxHeight ?? "";
+    // Scrollable content is focusable (keyboard scrolling); name it when asked.
+    if (this.label) {
+      this.viewport.setAttribute("role", "region");
+      this.viewport.setAttribute("aria-label", this.label);
+    } else {
+      this.viewport.removeAttribute("role");
+      this.viewport.removeAttribute("aria-label");
+    }
+    this._edges();
+  }
+
+  /** Scrolls to the start (top/left). */
+  scrollToStart({ behavior = "smooth" } = {}) {
+    this.viewport.scrollTo({ top: 0, left: 0, behavior });
+  }
+
+  /** Scrolls to the end (bottom, or right when horizontal). */
+  scrollToEnd({ behavior = "smooth" } = {}) {
+    const v = this.viewport;
+    if (this.orientation === "horizontal") v.scrollTo({ left: v.scrollWidth, behavior });
+    else v.scrollTo({ top: v.scrollHeight, behavior });
+  }
+
+  _onScroll() {
+    this.setAttribute("data-scrolling", "");
+    clearTimeout(this.#idle);
+    this.#idle = setTimeout(() => this.removeAttribute("data-scrolling"), 800);
+    this._edges();
+  }
+
+  // The edge shadows, and ray-reach-end once per arrival at the end.
+  _edges() {
+    const v = this.viewport;
+    if (!v) return;
+    const show = (cls, on) => this.$(`.${cls}`).toggleAttribute("data-show", on);
+    const maxY = v.scrollHeight - v.clientHeight;
+    const maxX = v.scrollWidth - v.clientWidth;
+    const x = Math.abs(v.scrollLeft);
+    show("top", v.scrollTop > 1);
+    show("bottom", maxY > 1 && v.scrollTop < maxY - 1);
+    show("left", x > 1);
+    show("right", maxX > 1 && x < maxX - 1);
+    const horizontal = this.orientation === "horizontal";
+    const left = horizontal ? maxX - x : maxY - v.scrollTop;
+    const scrollable = horizontal ? maxX > 1 : maxY > 1;
+    const atEnd = scrollable && left <= (this.threshold ?? 48);
+    if (atEnd && !this.#atEnd) this.emit("ray-reach-end", { edge: horizontal ? "right" : "bottom" });
+    this.#atEnd = atEnd;
+  }
+}
+
+define("ray-scroll-area", RayScrollArea);