@raylang/elements 0.0.0-stage → 0.3.0

package/components/number-input/number-input.js

@@ -0,0 +1,241 @@
+// <ray-number-input>: a number field (Mantine's NumberInput): + and −
+// buttons (hold to repeat), the arrow keys (Shift: ×10), min/max/step,
+// a fixed number of decimals, a prefix and a suffix ("$", " kg") and a
+// thousands separator in the shown text. The value is a number (or empty);
+// the form gets its plain digits.
+//
+// An ARIA spinbutton: aria-valuenow/min/max/valuetext on the text field.
+
+import { css, define } from "../../core/core.js";
+import { sizeStyles, radiusStyles } from "../../core/styles.js";
+import { FieldControl, fieldStyles, boxStyles, fieldTemplate } from "../../core/form.js";
+
+const styles = css`
+  .control { font-variant-numeric: tabular-nums; }
+  .steppers {
+    display: flex;
+    flex-direction: column;
+    align-self: stretch;
+    flex: none;
+    width: calc(var(--_h) * 0.75);
+    border-inline-start: 1px solid var(--ray-input);
+  }
+  :host([hide-controls]) .steppers { display: none; }
+  :host([variant="filled"]) .steppers, :host([variant="unstyled"]) .steppers { border-color: transparent; }
+  .step {
+    display: grid;
+    place-items: center;
+    flex: 1;
+    margin: 0;
+    padding: 0;
+    color: var(--ray-muted-foreground);
+    background: transparent;
+    border: 0;
+    cursor: pointer;
+    --ray-icon-size: 0.8em;
+  }
+  .step + .step { border-top: 1px solid var(--ray-input); }
+  :host([variant="filled"]) .step + .step, :host([variant="unstyled"]) .step + .step { border-color: transparent; }
+  .step:hover:not(:disabled) { color: var(--ray-foreground); background: var(--ray-default-hover); }
+  .step:disabled { cursor: not-allowed; opacity: 0.4; }
+  .up { border-start-end-radius: calc(var(--_r) - 1px); }
+  .down { border-end-end-radius: calc(var(--_r) - 1px); }
+`;
+
+/** A number from text with a prefix/suffix and separators; NaN if none. */
+export function parseNumber(text, { decimal = ".", thousands = "" } = {}) {
+  let s = String(text ?? "");
+  if (thousands) s = s.split(thousands).join("");
+  if (decimal !== ".") s = s.split(decimal).join(".");
+  const m = s.match(/-?\d*\.?\d+(?:e[+-]?\d+)?|-?\d+\.?/i);
+  return m ? Number(m[0]) : NaN;
+}
+
+/** A number as text with `decimals`, a thousands separator and a decimal mark. */
+export function formatNumber(n, { decimals, thousands = "", decimal = "." } = {}) {
+  if (!Number.isFinite(n)) return "";
+  let s = decimals !== undefined && decimals !== null ? n.toFixed(decimals) : String(n);
+  let [int, frac] = s.split(".");
+  if (thousands) int = int.replace(/\B(?=(\d{3})+(?!\d))/g, thousands);
+  return frac !== undefined ? `${int}${decimal}${frac}` : int;
+}
+
+export class RayNumberInput extends FieldControl {
+  static properties = {
+    ...FieldControl.fieldProperties,
+    value: { type: Number },
+    min: { type: Number },
+    max: { type: Number },
+    step: { type: Number, default: 1 },
+    decimals: { type: Number },
+    // Shadows Element.prefix (the namespace prefix): null when unset, like it.
+    prefix: { type: String, default: null },
+    suffix: { type: String },
+    thousandsSeparator: { type: String, attribute: "thousands-separator" },
+    decimalSeparator: { type: String, attribute: "decimal-separator", default: "." },
+    placeholder: { type: String },
+    hideControls: { type: Boolean, reflect: true, attribute: "hide-controls" },
+    clamp: { type: String, default: "blur" },
+    readonly: { type: Boolean, reflect: true },
+  };
+  static styles = [sizeStyles, radiusStyles, fieldStyles, boxStyles, styles];
+  static template = fieldTemplate(
+    `<input id="control" class="control" part="input" role="spinbutton" inputmode="decimal" autocomplete="off" spellcheck="false">` +
+      `<span class="steppers" part="controls"><button type="button" class="step up" part="increment" tabindex="-1" aria-label="Increment"><span data-ray-icon="chevron-up"></span></button><button type="button" class="step down" part="decrement" tabindex="-1" aria-label="Decrement"><span data-ray-icon="chevron-down"></span></button></span>`,
+  );
+
+  #typing = false;
+  #repeat = 0;
+
+  wire() {
+    this._default = this.getAttribute("value") !== null ? Number(this.getAttribute("value")) : undefined;
+    const c = this.control;
+    c.addEventListener("input", () => {
+      this.#typing = true;
+      const n = this._parse(c.value);
+      this.commitProperty("value", Number.isFinite(n) ? (this.clamp === "strict" ? this._clamp(n) : n) : undefined);
+      this._commit();
+      this._aria();
+    });
+    c.addEventListener("blur", () => {
+      this.#typing = false;
+      if (this.value !== undefined && this.clamp !== "none") this._set(this._clamp(this.value), false);
+      this._paint();
+    });
+    c.addEventListener("change", (e) => this.forward(e));
+    c.addEventListener("keydown", (e) => this._key(e));
+    // + and −: a press steps once; held, it repeats faster and faster.
+    for (const [sel, dir] of [[".up", 1], [".down", -1]]) {
+      const b = this.$(sel);
+      b.addEventListener("pointerdown", (e) => {
+        if (b.disabled || e.button !== 0) return;
+        e.preventDefault();
+        c.focus();
+        this.stepBy(dir);
+        let delay = 400;
+        const again = () => {
+          this.stepBy(dir);
+          delay = Math.max(40, delay * 0.8);
+          this.#repeat = setTimeout(again, delay);
+        };
+        this.#repeat = setTimeout(again, delay);
+      });
+      for (const ev of ["pointerup", "pointerleave", "pointercancel"]) b.addEventListener(ev, () => clearTimeout(this.#repeat));
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    clearTimeout(this.#repeat);
+  }
+
+  update() {
+    const c = this.control;
+    c.readOnly = Boolean(this.readonly);
+    if (this.placeholder !== undefined) c.placeholder = this.placeholder;
+    if (!this.#typing) this._paint();
+    this.syncField();
+    this._aria();
+    this._commit();
+  }
+
+  /** Adds `dir` steps (negative: down) from the current value, clamped; fires input and change. */
+  stepBy(dir) {
+    if (this.effectivelyDisabled || this.readonly) return;
+    const step = this.step || 1;
+    const base = this.value ?? (dir > 0 ? (this.min ?? 0) - step : (this.max ?? 0) + step);
+    // Round to the step's precision (0.1 + 0.2 stays 0.3).
+    const places = Math.max(this._places(step), this._places(base), this.decimals ?? 0);
+    const next = Number((base + dir * step).toFixed(places));
+    this._set(this._clamp(next), true);
+  }
+
+  _places(n) {
+    const s = String(n);
+    return s.includes(".") ? s.split(".")[1].length : 0;
+  }
+
+  _clamp(n) {
+    let v = n;
+    if (this.min !== undefined && this.min !== null && v < this.min) v = this.min;
+    if (this.max !== undefined && this.max !== null && v > this.max) v = this.max;
+    return this.decimals !== undefined && this.decimals !== null ? Number(v.toFixed(this.decimals)) : v;
+  }
+
+  _parse(text) {
+    let s = String(text ?? "");
+    if (this.prefix) s = s.split(this.prefix).join("");
+    if (this.suffix) s = s.split(this.suffix).join("");
+    return parseNumber(s, { decimal: this.decimalSeparator || ".", thousands: this.thousandsSeparator || "" });
+  }
+
+  _set(n, user) {
+    const changed = n !== this.value;
+    this.commitProperty("value", n);
+    this._paint();
+    this._commit();
+    this._aria();
+    if (user && changed) {
+      this.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
+      this.dispatchEvent(new Event("change", { bubbles: true }));
+    }
+  }
+
+  // The shown text: prefix, separators, decimals, suffix.
+  _text() {
+    if (this.value === undefined || this.value === null || !Number.isFinite(this.value)) return "";
+    const num = formatNumber(this.value, { decimals: this.decimals, thousands: this.thousandsSeparator || "", decimal: this.decimalSeparator || "." });
+    return `${this.prefix ?? ""}${num}${this.suffix ?? ""}`;
+  }
+
+  _paint() {
+    const t = this._text();
+    if (this.control.value !== t) this.control.value = t;
+    const v = this.value;
+    const off = this.effectivelyDisabled || this.readonly;
+    this.$(".up").disabled = off || (v !== undefined && this.max !== undefined && v >= this.max);
+    this.$(".down").disabled = off || (v !== undefined && this.min !== undefined && v <= this.min);
+  }
+
+  _aria() {
+    const c = this.control;
+    const set = (a, v) => (v === undefined || v === null || Number.isNaN(v) ? c.removeAttribute(a) : c.setAttribute(a, String(v)));
+    set("aria-valuenow", this.value);
+    set("aria-valuemin", this.min);
+    set("aria-valuemax", this.max);
+    if (this.prefix || this.suffix || this.thousandsSeparator) set("aria-valuetext", this._text() || undefined);
+    else c.removeAttribute("aria-valuetext");
+  }
+
+  _key(e) {
+    const big = e.shiftKey ? 10 : 1;
+    if (e.key === "ArrowUp") { e.preventDefault(); this.stepBy(big); }
+    else if (e.key === "ArrowDown") { e.preventDefault(); this.stepBy(-big); }
+    else if (e.key === "PageUp") { e.preventDefault(); this.stepBy(10); }
+    else if (e.key === "PageDown") { e.preventDefault(); this.stepBy(-10); }
+    else if (e.key === "Home" && this.min !== undefined) { e.preventDefault(); this._set(this.min, true); }
+    else if (e.key === "End" && this.max !== undefined) { e.preventDefault(); this._set(this.max, true); }
+  }
+
+  _commit() {
+    this.internals.setFormValue(this.value === undefined || this.value === null || !Number.isFinite(this.value) ? null : String(this.value));
+    const c = this.control;
+    let msg = "";
+    if (this.required && (this.value === undefined || this.value === null)) msg = "Please enter a number.";
+    else if (this.value !== undefined && this.min !== undefined && this.value < this.min) msg = `The minimum is ${this.min}.`;
+    else if (this.value !== undefined && this.max !== undefined && this.value > this.max) msg = `The maximum is ${this.max}.`;
+    if (msg) this.internals.setValidity(this.value === undefined ? { valueMissing: true } : this.value < (this.min ?? -Infinity) ? { rangeUnderflow: true } : { rangeOverflow: true }, msg, c);
+    else this.internals.setValidity({});
+  }
+
+  formResetCallback() {
+    this.value = this._default;
+  }
+
+  formStateRestoreCallback(state) {
+    const n = Number(state);
+    this.value = state === null || state === "" || !Number.isFinite(n) ? undefined : n;
+  }
+}
+
+define("ray-number-input", RayNumberInput);

package/components/pagination/pagination.js

@@ -0,0 +1,194 @@
+// <ray-pagination>: page navigation (Mantine's Pagination). Previous/next,
+// optional first/last, page numbers with ellipses. The number of items stays
+// the same while moving through the pages, so the control does not jump.
+
+import { RayElement, css, define } from "../../core/core.js";
+import { applyColor, sizeStyles, radiusStyles, variantStyles } from "../../core/styles.js";
+
+const styles = css`
+  :host { display: block; }
+  :host([hidden]) { display: none; }
+  .list {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--ray-space-1);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .item {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: var(--_h);
+    height: var(--_h);
+    padding: 0 calc(var(--_px) * 0.35);
+    font: inherit;
+    font-size: var(--_fs);
+    font-weight: var(--ray-font-weight-medium);
+    font-variant-numeric: tabular-nums;
+    line-height: 1;
+    border-radius: var(--_r);
+    cursor: pointer;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+  }
+  .item:not([data-disabled]):active { transform: translateY(1px); }
+  /* Disabled: the current page keeps its fill, dimmed. */
+  .item[aria-current="page"]:disabled { opacity: 0.6; cursor: not-allowed; }
+  .item svg { width: 1em; height: 1em; }
+  .dots {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: var(--_h);
+    height: var(--_h);
+    color: var(--ray-muted-foreground);
+    font-size: var(--_fs);
+  }
+  .dots svg { width: 1em; height: 1em; }
+`;
+
+/**
+ * The items to show: page numbers and "dots", Mantine's algorithm. Always
+ * siblings * 2 + 3 + boundaries * 2 items when there are more pages than that.
+ * @returns {(number | "dots")[]}
+ */
+export function paginationRange(total, value, siblings = 1, boundaries = 1) {
+  total = Math.max(0, Math.floor(total || 0));
+  if (total === 0) return [];
+  const active = Math.min(Math.max(1, Math.floor(value || 1)), total);
+  const range = (a, b) => (b < a ? [] : Array.from({ length: b - a + 1 }, (_, i) => a + i));
+  const count = siblings * 2 + 3 + boundaries * 2;
+  if (count >= total) return range(1, total);
+  const left = Math.max(active - siblings, boundaries);
+  const right = Math.min(active + siblings, total - boundaries);
+  const leftDots = left > boundaries + 2;
+  const rightDots = right < total - (boundaries + 1);
+  if (!leftDots && rightDots) {
+    const n = siblings * 2 + boundaries + 2;
+    return [...range(1, n), "dots", ...range(total - boundaries + 1, total)];
+  }
+  if (leftDots && !rightDots) {
+    const n = boundaries + 1 + siblings * 2;
+    return [...range(1, boundaries), "dots", ...range(total - n, total)];
+  }
+  return [...range(1, boundaries), "dots", ...range(left, right), "dots", ...range(total - boundaries + 1, total)];
+}
+
+export class RayPagination extends RayElement {
+  static properties = {
+    total: { type: Number, default: 1 },
+    value: { type: Number, default: 1 },
+    siblings: { type: Number, default: 1 },
+    boundaries: { type: Number, default: 1 },
+    size: { type: String, reflect: true, default: "sm" },
+    radius: { type: String, reflect: true },
+    color: { type: String, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+    withEdges: { type: Boolean, reflect: true },
+    hideControls: { type: Boolean, reflect: true },
+    label: { type: String, default: "Pagination" },
+  };
+  static styles = [sizeStyles, radiusStyles, variantStyles, styles];
+  static template = `<nav part="root"><ul class="list" part="list"></ul></nav>`;
+
+  constructor() {
+    super();
+    this.$(".list").addEventListener("click", (e) => {
+      const b = e.target.closest?.("button[data-page]");
+      if (!b || b.disabled) return;
+      this._go(Number(b.dataset.page));
+    });
+  }
+
+  /** The current page, clamped to 1…total. */
+  get page() {
+    const total = Math.max(1, this.total || 1);
+    return Math.min(Math.max(1, this.value || 1), total);
+  }
+
+  /** Goes to a page (clamped), firing change when it changes. */
+  setPage(page) {
+    this._go(page);
+  }
+
+  next() { this._go(this.page + 1); }
+  previous() { this._go(this.page - 1); }
+  first() { this._go(1); }
+  last() { this._go(Math.max(1, this.total || 1)); }
+
+  _go(page) {
+    const total = Math.max(1, this.total || 1);
+    const p = Math.min(Math.max(1, page), total);
+    if (p === this.page || this.disabled) return;
+    this.commitProperty("value", p);
+    this.requestUpdate();
+    this.dispatchEvent(new Event("change", { bubbles: true }));
+    // Keep the focus on the activated page (the list is rebuilt).
+    queueMicrotask(() => this.$(`button[data-page="${p}"][data-number]`)?.focus());
+  }
+
+  update() {
+    this.$("nav").setAttribute("aria-label", this.label || "Pagination");
+    const total = Math.max(0, this.total || 0);
+    const page = this.page;
+    const list = this.$(".list");
+    const focused = this.shadowRoot.activeElement?.dataset?.role;
+    const items = [];
+    const control = (role, target, icon, label, off) => ({ kind: "control", role, target, icon, label, off });
+    if (!this.hideControls) {
+      if (this.withEdges) items.push(control("first", 1, "chevrons-left", "First page", page <= 1));
+      items.push(control("previous", page - 1, "chevron-left", "Previous page", page <= 1));
+    }
+    for (const it of paginationRange(total, page, this.siblings ?? 1, this.boundaries ?? 1)) {
+      items.push(it === "dots" ? { kind: "dots" } : { kind: "page", target: it });
+    }
+    if (!this.hideControls) {
+      items.push(control("next", page + 1, "chevron-right", "Next page", page >= total));
+      if (this.withEdges) items.push(control("last", total, "chevrons-right", "Last page", page >= total));
+    }
+    list.replaceChildren(...items.map((it) => this._item(it, page)));
+    this.paintIcons(list);
+    // Prev/next keep the focus across re-renders (e.g. holding Enter).
+    if (focused) this.$(`button[data-role="${focused}"]`)?.focus();
+  }
+
+  _item(it, page) {
+    const li = document.createElement("li");
+    if (it.kind === "dots") {
+      li.innerHTML = `<span class="dots" part="dots" aria-hidden="true">…</span>`;
+      return li;
+    }
+    const b = document.createElement("button");
+    b.type = "button";
+    b.className = "item focus-ring";
+    b.dataset.page = String(it.target);
+    applyColor(b, this.color);
+    if (it.kind === "page") {
+      const active = it.target === page;
+      b.dataset.number = "";
+      b.setAttribute("part", active ? "item active" : "item");
+      b.dataset.variant = active ? "filled" : "default";
+      b.textContent = String(it.target);
+      b.setAttribute("aria-label", `Page ${it.target}`);
+      if (active) b.setAttribute("aria-current", "page");
+      b.disabled = Boolean(this.disabled);
+      if (!(active && b.disabled)) b.setAttribute("data-interactive", "");
+    } else {
+      b.dataset.role = it.role;
+      b.setAttribute("part", `item control ${it.role}`);
+      b.dataset.variant = "default";
+      b.setAttribute("aria-label", it.label);
+      b.innerHTML = `<span data-ray-icon="${it.icon}" aria-hidden="true"></span>`;
+      b.disabled = Boolean(this.disabled || it.off);
+      b.setAttribute("data-interactive", "");
+    }
+    b.toggleAttribute("data-disabled", b.disabled);
+    li.append(b);
+    return li;
+  }
+}
+
+define("ray-pagination", RayPagination);

package/components/password-input/password-input.js

@@ -0,0 +1,85 @@
+// <ray-password-input>: a password field with a button that shows or hides
+// what was typed (Mantine's PasswordInput). A ray-input underneath: label,
+// description, error, sizes, validation and forms work the same.
+//
+// The toggle keeps the caret and the focus in the field, says what it does
+// (aria-label, aria-pressed) and fires ray-visibility-change.
+
+import { css, define } from "../../core/core.js";
+import { fieldTemplate } from "../../core/form.js";
+import { RayInput } from "../input/input.js";
+
+const styles = css`
+  .toggle {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    width: max(1.5rem, calc(var(--_h) * 0.7));
+    height: max(1.5rem, calc(var(--_h) * 0.7));
+    margin-inline-end: calc(var(--_px) * 0.35);
+    padding: 0;
+    color: var(--ray-muted-foreground);
+    background: transparent;
+    border: 0;
+    border-radius: var(--ray-radius-sm);
+    cursor: pointer;
+  }
+  .toggle:hover { color: var(--ray-foreground); background: var(--ray-default-hover); }
+  .toggle:disabled { cursor: not-allowed; opacity: 0.6; }
+  .toggle svg { width: 1.1em; height: 1.1em; }
+  /* Dots read better a little apart; typed text keeps the normal spacing. */
+  .control[type="password"]:not(:placeholder-shown) { letter-spacing: 0.08em; }
+`;
+
+export class RayPasswordInput extends RayInput {
+  static properties = {
+    ...RayInput.properties,
+    type: { type: String, reflect: false, default: "password" },
+    visible: { type: Boolean, reflect: true },
+    showLabel: { type: String, default: "Show password" },
+    hideLabel: { type: String, default: "Hide password" },
+  };
+  static styles = [...RayInput.styles, styles];
+  static template = fieldTemplate(
+    `<input id="control" class="control" part="input" type="password" autocomplete="current-password" spellcheck="false" autocapitalize="off">` +
+      `<button type="button" class="toggle focus-ring" part="toggle" aria-pressed="false"><span data-ray-icon="eye" aria-hidden="true"></span></button>`,
+  );
+
+  wire() {
+    super.wire();
+    const toggle = this.$(".toggle");
+    // Keep the focus (and the caret) in the field when the pointer toggles.
+    toggle.addEventListener("pointerdown", (e) => e.preventDefault());
+    toggle.addEventListener("click", () => {
+      this.visible = !this.visible;
+      this.emit("ray-visibility-change", { visible: this.visible });
+      if (this.shadowRoot.activeElement !== toggle) this.control.focus();
+    });
+  }
+
+  update(changed) {
+    // The type follows `visible` (a type set from outside is ignored).
+    const want = this.visible ? "text" : "password";
+    if (this.type !== want) this.commitProperty("type", want);
+    super.update(changed);
+    const toggle = this.$(".toggle");
+    toggle.setAttribute("aria-pressed", String(Boolean(this.visible)));
+    toggle.setAttribute("aria-label", this.visible ? this.hideLabel : this.showLabel);
+    toggle.title = toggle.getAttribute("aria-label");
+    toggle.disabled = this.effectivelyDisabled;
+    const icon = toggle.firstElementChild;
+    const name = this.visible ? "eye-off" : "eye";
+    if (icon.dataset.rayIcon !== name) {
+      icon.dataset.rayIcon = name;
+      this.paintIcons(toggle);
+    }
+  }
+
+  formResetCallback() {
+    super.formResetCallback();
+    this.visible = false;
+  }
+}
+
+define("ray-password-input", RayPasswordInput);

package/components/path-input/path-input.js

@@ -0,0 +1,137 @@
+// <ray-path-input>: a field for a path on the user's disk: a file to open, a
+// folder, or where to save. A ray-input underneath: label, description,
+// error, sizes, validation and forms work the same, and the path can always
+// be typed or pasted.
+//
+// With a native host that offers "pick_path" (core/host.js; a std/ui window
+// with core/raylang.js), a Browse… button opens the system dialog, starting
+// where the current path points; the choice fills the field and fires input
+// and change. Without one (a browser), it is a plain text field: a page
+// cannot read paths from a browser's file picker.
+
+import { css, define } from "../../core/core.js";
+import { fieldTemplate } from "../../core/form.js";
+import { getHost, hostCan, onHostChange, acceptFilters } from "../../core/host.js";
+import { RayInput } from "../input/input.js";
+
+const styles = css`
+  .control { font-variant-ligatures: none; }
+  .browse {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    gap: 0.35em;
+    height: calc(var(--_h) - 0.5rem);
+    margin-inline-end: 0.25rem;
+    padding: 0 0.6em;
+    font: inherit;
+    font-size: 0.9em;
+    font-weight: 500;
+    color: var(--ray-foreground);
+    white-space: nowrap;
+    background: var(--ray-default-hover);
+    border: 0;
+    border-radius: var(--ray-radius-sm);
+    cursor: pointer;
+  }
+  .browse:hover { background: color-mix(in srgb, var(--ray-foreground) 12%, var(--ray-default-hover)); }
+  .browse:disabled { cursor: not-allowed; opacity: 0.6; }
+  .browse[hidden] { display: none; }
+  .browse svg { width: 1.05em; height: 1.05em; }
+`;
+
+const ICONS = { open: "file", folder: "folder", save: "file" };
+
+/** The folder part of a path ("" when it has none), with / or \ separators. */
+export function dirName(path) {
+  const p = String(path ?? "");
+  const cut = Math.max(p.lastIndexOf("/"), p.lastIndexOf("\\"));
+  return cut <= 0 ? (cut === 0 ? p.slice(0, 1) : "") : p.slice(0, cut);
+}
+
+/** The last part of a path. */
+export function baseName(path) {
+  return String(path ?? "").split(/[\\/]/).pop();
+}
+
+export class RayPathInput extends RayInput {
+  static properties = {
+    ...RayInput.properties,
+    mode: { type: String, reflect: true, default: "open" },
+    accept: { type: String, reflect: true },
+    browseLabel: { type: String, attribute: "browse-label", default: "Browse…" },
+    dialogTitle: { type: String, attribute: "dialog-title" },
+  };
+  static styles = [...RayInput.styles, styles];
+  static template = fieldTemplate(
+    `<input id="control" class="control" part="input" spellcheck="false" autocapitalize="off" autocomplete="off">` +
+      `<button type="button" class="browse focus-ring" part="browse" hidden><span data-ray-icon="file" aria-hidden="true"></span><span class="browse-text"></span></button>`,
+  );
+
+  #stop = null;
+
+  wire() {
+    super.wire();
+    this.$(".browse").addEventListener("click", () => this.browse());
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.#stop ??= onHostChange(() => this.requestUpdate());
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.#stop?.();
+    this.#stop = null;
+  }
+
+  /** Whether Browse… is available (a native host offers "pick_path"). */
+  get canBrowse() {
+    return hostCan("pick_path");
+  }
+
+  /**
+   * Opens the system dialog for `mode`; resolves to the chosen path, or null
+   * when the user cancels or there is no native host.
+   */
+  async browse() {
+    if (this.effectivelyDisabled || this.readonly || !this.canBrowse) return null;
+    const current = this.value ?? "";
+    let path;
+    try {
+      path = await getHost().pickPath({
+        mode: this.mode || "open",
+        title: this.dialogTitle ?? this.label ?? "",
+        directory: this.mode === "folder" ? current : dirName(current),
+        suggested: this.mode === "save" ? baseName(current) : "",
+        filters: this.mode === "folder" ? [] : acceptFilters(this.accept),
+      });
+    } catch (e) {
+      this.emit("ray-error", { error: e });
+      return null;
+    }
+    if (path === null || path === undefined) return null;
+    this.value = path;
+    this.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
+    this.dispatchEvent(new Event("change", { bubbles: true }));
+    this.control.focus();
+    return path;
+  }
+
+  update(changed) {
+    super.update(changed);
+    const btn = this.$(".browse");
+    btn.hidden = !this.canBrowse;
+    btn.disabled = this.effectivelyDisabled || Boolean(this.readonly);
+    this.$(".browse-text").textContent = this.browseLabel;
+    const icon = btn.firstElementChild;
+    const name = ICONS[this.mode] ?? "file";
+    if (icon.dataset.rayIcon !== name || !icon.firstChild) {
+      icon.dataset.rayIcon = name;
+      this.paintIcons(btn);
+    }
+  }
+}
+
+define("ray-path-input", RayPathInput);