@lumiose/ui 0.0.0-stage → 0.1.1

package/dist/otp-field/otp-field.script.ts

@@ -0,0 +1,330 @@
+// OTP Field's client script (decision-62, decision-63): it defines `<lu-otp-field>`, the light-DOM
+// element OTPField.Root renders around one native `<input>` and the visual slots that show its
+// characters. The input is the field: SMS autofill (`autocomplete="one-time-code"`), paste,
+// Backspace, the arrow keys, `maxlength`, `pattern`, `required` and the form's value are the
+// platform's, and assistive technology meets one text field, not one per character. Without
+// JavaScript the input shows as a plain text field and the slots stay hidden (otp-field.css).
+//
+// The element:
+//
+// - keeps the value to the allowed characters (`validation-type`: numeric, the default; alpha;
+//   alphanumeric; none) and to `length`, dropping spaces, as typing, a paste or autofill puts them
+//   in (a paste is cleaned before `maxlength` could cut it); rejected characters fire
+//   `valueinvalid` (`detail.value`, what was entered);
+// - shows the value in the `[data-slot]` elements (as dots with `mask`), with `data-filled`, and the
+//   caret's slot with `data-active` while the input has focus; `data-complete` on the element;
+// - types over the character at the caret when the field is full, and moves the caret to the slot a
+//   press lands on;
+// - fires `valuecomplete` (`detail.value`) when the last slot fills, and with `auto-submit` submits
+//   the form;
+// - with a `normalizeValue` function (a property: OTPField.Root sets it in an island, TASK-413),
+//   normalizes what is entered (`toUpperCase`, say) before it keeps it to the allowed characters.
+//
+// It must not import `lumiose`: server-rendered pages load it without the runtime.
+
+/** Submits `form` as its submit button would. Through the prototype: a control named
+ * `requestSubmit` shadows the form's own (DOM clobbering, TASK-473 L9). */
+const submit = (form: HTMLFormElement) => HTMLFormElement.prototype.requestSubmit.call(form);
+
+export interface OTPFieldValueDetail {
+  value: string;
+}
+
+const DIGIT = /\p{Nd}/u;
+
+/**
+ * `text` with full-width letters as ASCII (NFKC) and every decimal digit of any script as its
+ * ASCII digit: Unicode encodes each script's digits as runs of ten, 0 to 9 (TASK-440, M34). A copy
+ * of ../locale/digits.ts: importing it would make a chunk of its own, shared with Number Field's
+ * script, and one more request on a page with both.
+ */
+function asciiDigits(text: string): string {
+  let out = "";
+  for (const char of text.normalize("NFKC")) {
+    if (!DIGIT.test(char)) {
+      out += char;
+      continue;
+    }
+    let code = char.codePointAt(0)!;
+    let index = 0;
+    while (DIGIT.test(String.fromCodePoint(code - 1))) {
+      code--;
+      index++;
+    }
+    out += String(index % 10);
+  }
+  return out;
+}
+
+/**
+ * The characters each validation type keeps, as Base UI's: ASCII digits and letters. Digits of
+ * other scripts and full-width letters are typed as their ASCII forms first (TASK-440, M34).
+ */
+const ALLOWED: Record<string, RegExp> = {
+  numeric: /[0-9]/,
+  alpha: /[A-Za-z]/,
+  alphanumeric: /[A-Za-z0-9]/,
+  none: /\S/u,
+};
+
+export class OTPFieldElement extends HTMLElement {
+  /** The value when the last `valuecomplete` fired, so it fires once per completion. */
+  #completed = "";
+  /** The character of the last key pressed, for a `beforeinput` without `data` (WebKit). */
+  #key = "";
+
+  /** Normalizes what is entered before the allowed characters are kept: an island sets it. */
+  normalizeValue: ((value: string) => string) | undefined;
+
+  /** The input that holds the value. */
+  get input(): HTMLInputElement | null {
+    return this.querySelector<HTMLInputElement>("input");
+  }
+
+  /** The visual slots, in order. */
+  get slots(): HTMLElement[] {
+    return [...this.querySelectorAll<HTMLElement>("[data-slot]")].filter(
+      (slot) => slot.closest("lu-otp-field") === this,
+    );
+  }
+
+  /** The number of characters; the `length` attribute. Not a property Lumiose would set. */
+  get #length(): number {
+    const length = Number(this.getAttribute("length"));
+    return Number.isInteger(length) && length > 0 ? length : this.slots.length;
+  }
+
+  /** The code. Setting it shows it, kept to the allowed characters, without events. */
+  get value(): string {
+    return this.input?.value ?? "";
+  }
+
+  set value(next: string | null | undefined) {
+    const input = this.input;
+    if (!input) return;
+    input.value = this.#clean(next ?? "");
+    this.#completed = input.value.length === this.#length ? input.value : "";
+    this.#sync();
+  }
+
+  connectedCallback(): void {
+    // Capturing: the value is cleaned before any other listener reads it.
+    this.addEventListener("input", this.#onInput, true);
+    this.addEventListener("keydown", this.#onKey);
+    this.addEventListener("beforeinput", this.#onBeforeInput);
+    this.addEventListener("compositionend", this.#onCompositionEnd);
+    this.addEventListener("paste", this.#onPaste);
+    this.addEventListener("pointerdown", this.#onPress);
+    this.addEventListener("focusin", this.#onFocus);
+    this.addEventListener("focusout", this.#onFocus);
+    document.addEventListener("selectionchange", this.#onSelection);
+    document.addEventListener("reset", this.#onReset, true);
+    const settle = () => {
+      this.#completed = this.value.length === this.#length ? this.value : "";
+      this.#sync();
+    };
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", settle, { once: true });
+    } else queueMicrotask(settle);
+  }
+
+  disconnectedCallback(): void {
+    this.removeEventListener("input", this.#onInput, true);
+    this.removeEventListener("keydown", this.#onKey);
+    this.removeEventListener("beforeinput", this.#onBeforeInput);
+    this.removeEventListener("compositionend", this.#onCompositionEnd);
+    this.removeEventListener("paste", this.#onPaste);
+    this.removeEventListener("pointerdown", this.#onPress);
+    this.removeEventListener("focusin", this.#onFocus);
+    this.removeEventListener("focusout", this.#onFocus);
+    document.removeEventListener("selectionchange", this.#onSelection);
+    document.removeEventListener("reset", this.#onReset, true);
+  }
+
+  /**
+   * The characters `validation-type` allows; an unknown type allows digits. An own key only:
+   * `constructor` or `__proto__` are not types (TASK-473, L11).
+   */
+  #allowed(): RegExp {
+    const type = this.getAttribute("validation-type") ?? "numeric";
+    return Object.hasOwn(ALLOWED, type) ? ALLOWED[type]! : ALLOWED.numeric!;
+  }
+
+  /** `text` kept to the allowed characters and the length. */
+  #clean(text: string): string {
+    const allowed = this.#allowed();
+    return [...this.#normalize(text)]
+      .filter((char) => allowed.test(char))
+      .slice(0, this.#length)
+      .join("");
+  }
+
+  #normalize(text: string): string {
+    const ascii = this.getAttribute("validation-type") === "none" ? text : asciiDigits(text);
+    return this.normalizeValue ? this.normalizeValue(ascii) : ascii;
+  }
+
+  /** Whether `text` holds characters the field does not allow (spaces aside). */
+  #rejects(text: string): boolean {
+    const allowed = this.#allowed();
+    return [...this.#normalize(text)].some((char) => /\S/u.test(char) && !allowed.test(char));
+  }
+
+  /** Writes the value to the slots, and the caret's slot while the input has focus. */
+  #sync(): void {
+    const input = this.input;
+    if (!input) return;
+    const value = input.value;
+    const length = this.#length;
+    const mask = this.hasAttribute("mask");
+    const focused = document.activeElement === input;
+    const caret = Math.min(input.selectionStart ?? value.length, length - 1);
+    this.slots.forEach((slot, i) => {
+      const char = value[i] ?? "";
+      const text = char && mask ? "•" : char;
+      if (slot.textContent !== text) slot.textContent = text;
+      slot.toggleAttribute("data-filled", char !== "");
+      slot.toggleAttribute("data-active", focused && i === caret);
+    });
+    this.toggleAttribute("data-complete", value.length === length);
+    this.toggleAttribute("data-filled", value.length > 0);
+    this.toggleAttribute("data-focused", focused);
+  }
+
+  #onInput = (event: Event) => {
+    const input = this.input;
+    if (!input || event.target !== input) return;
+    // An IME composition is not text yet: cleaning it would lose the commit, and completing it
+    // would submit what the user has not chosen. The slots show it; `compositionend` goes on
+    // (TASK-432).
+    if ((event as InputEvent).isComposing) {
+      this.#sync();
+      return;
+    }
+    const raw = input.value;
+    const clean = this.#clean(raw);
+    if (this.#rejects(raw)) {
+      this.dispatchEvent(
+        new CustomEvent<OTPFieldValueDetail>("valueinvalid", { detail: { value: raw } }),
+      );
+    }
+    if (clean !== raw) {
+      // The caret stays after the same characters it was after, those that remain.
+      const caret = input.selectionStart ?? raw.length;
+      const at = Math.min(this.#clean(raw.slice(0, caret)).length, clean.length);
+      input.value = clean;
+      input.setSelectionRange(at, at);
+    }
+    this.#sync();
+    if (clean.length === this.#length && clean !== this.#completed) {
+      this.#completed = clean;
+      // After the other listeners have seen the value.
+      queueMicrotask(() => {
+        this.dispatchEvent(
+          new CustomEvent<OTPFieldValueDetail>("valuecomplete", { detail: { value: clean } }),
+        );
+        if (this.hasAttribute("auto-submit") && input.form) submit(input.form);
+      });
+    } else if (clean.length < this.#length) this.#completed = "";
+  };
+
+  /**
+   * The committed text: cleaned, completed and submitted as typing would. Chromium fires no
+   * `input` after `compositionend`, so this one tells every listener; where the browser fires one
+   * too, the second finds the value clean and the completion done.
+   */
+  #onCompositionEnd = (event: CompositionEvent) => {
+    const input = this.input;
+    if (!input || event.target !== input) return;
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+  };
+
+  #onKey = (event: KeyboardEvent) => {
+    const plain = event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.isComposing;
+    this.#key = plain ? event.key : "";
+  };
+
+  /**
+   * Typing replaces the character at the caret (the ringed slot), as Base UI's, instead of
+   * inserting before it (TASK-448, L20), and in a full field instead of being refused.
+   */
+  #onBeforeInput = (event: InputEvent) => {
+    const input = this.input;
+    // WebKit cuts `data` to what `maxlength` lets in: nothing in a full field. The key tells.
+    const typed = event.data || this.#key;
+    this.#key = "";
+    if (!input || event.target !== input || event.inputType !== "insertText" || !typed) return;
+    const { selectionStart: start, selectionEnd: end, value } = input;
+    if (start === null || start !== end || start >= value.length) return;
+    event.preventDefault();
+    const char = this.#clean(typed).slice(0, 1);
+    if (!char) {
+      this.dispatchEvent(
+        new CustomEvent<OTPFieldValueDetail>("valueinvalid", { detail: { value: typed } }),
+      );
+      return;
+    }
+    input.value = value.slice(0, start) + char + value.slice(start + 1);
+    const next = Math.min(start + 1, value.length);
+    input.setSelectionRange(next, next);
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+  };
+
+  /**
+   * A paste: cleaned first, then put in place of the selection, so `maxlength` does not cut a
+   * code pasted with spaces or dashes.
+   */
+  #onPaste = (event: ClipboardEvent) => {
+    const input = this.input;
+    const text = event.clipboardData?.getData("text") ?? "";
+    if (!input || event.target !== input || input.readOnly || !text) return;
+    event.preventDefault();
+    if (this.#rejects(text)) {
+      this.dispatchEvent(
+        new CustomEvent<OTPFieldValueDetail>("valueinvalid", { detail: { value: text } }),
+      );
+    }
+    const { value, selectionStart: start, selectionEnd: end } = input;
+    const before = value.slice(0, start ?? value.length);
+    const after = value.slice(end ?? value.length);
+    const next = this.#clean(before + this.#clean(text) + after);
+    input.value = next;
+    const at = Math.min((before + this.#clean(text)).length, next.length);
+    input.setSelectionRange(at, at);
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+  };
+
+  /** A press on a slot puts the caret there (or after the last character typed). */
+  #onPress = (event: PointerEvent) => {
+    const input = this.input;
+    if (!input || input.disabled || event.button !== 0) return;
+    const slots = this.slots;
+    const index = slots.findIndex((slot) => {
+      const box = slot.getBoundingClientRect();
+      return event.clientX >= box.left && event.clientX <= box.right;
+    });
+    if (index === -1) return;
+    event.preventDefault();
+    input.focus();
+    const at = Math.min(index, input.value.length);
+    input.setSelectionRange(at, at);
+    this.#sync();
+  };
+
+  #onFocus = () => this.#sync();
+
+  #onSelection = () => {
+    if (document.activeElement === this.input) this.#sync();
+  };
+
+  /** A form reset puts the input back without an `input` event: the slots follow it. */
+  #onReset = (event: Event) => {
+    if (this.input?.form !== event.target) return;
+    setTimeout(() => {
+      this.#completed = this.value.length === this.#length ? this.value : "";
+      this.#sync();
+    });
+  };
+}
+
+if (!customElements.get("lu-otp-field")) customElements.define("lu-otp-field", OTPFieldElement);

package/dist/otp-field/otp-field.tsx

@@ -0,0 +1,320 @@
+// OTP Field (decision-62, TASK-376): a one-time code input, after Base UI's OTPField. Unlike Base UI
+// (one input per character), it is one native `<input>` under visual slots: SMS autofill
+// (`autocomplete="one-time-code"`) puts the whole code in one field, paste, Backspace and the arrow
+// keys work as in any text field, `maxlength`, `pattern` and `required` validate it and the form
+// submits it, without JavaScript too; and assistive technology meets one labelled text field
+// rather than a field per character. Root renders `<lu-otp-field>`, whose script
+// (otp-field.script.ts) keeps the value to the allowed characters and shows it in the slots. The
+// `value` prop drives it when it changes; the input's `input` events and the element's
+// `valuecomplete` and `valueinvalid` report back.
+import { createContext, effect, ref, untrack, useContext, useId } from "lumiose";
+import { controlId, describedBy, useField } from "../field/context.ts";
+import { onFormReset } from "../form/reset.ts";
+import type { OTPFieldElement, OTPFieldValueDetail } from "./otp-field.script.ts";
+import otpFieldScript from "./otp-field.script.ts?client";
+
+declare module "lumiose/jsx-runtime" {
+  namespace JSX {
+    interface IntrinsicElements {
+      /**
+       * OTP Field's element. Attributes `length`, `validation-type`, `mask`, `auto-submit`;
+       * property `value`; events `valuecomplete` and `valueinvalid` (`detail.value`).
+       */
+      "lu-otp-field": JSX.HTMLProps<OTPFieldElement> & {
+        length?: number;
+        "validation-type"?: OTPFieldValidationType;
+        mask?: boolean;
+        "auto-submit"?: boolean;
+      };
+    }
+  }
+}
+
+/** The characters a code may hold. */
+export type OTPFieldValidationType = "numeric" | "alpha" | "alphanumeric" | "none";
+
+/**
+ * The element props Root passes to `<lu-otp-field>`, without the brand of intrinsic elements'
+ * props, so that `bind:value` applies to Root.
+ */
+type ElementProps = {
+  [
+    K in keyof JSX.HTMLProps<OTPFieldElement> as K extends string ? K : never
+  ]: JSX.HTMLProps<OTPFieldElement>[K];
+};
+
+/**
+ * `OTPField.Root` renders `<lu-otp-field>` around the input and the slots. `bind:value={signal}`
+ * stands in for `value` and `onValueChange`.
+ */
+export interface OTPFieldRootProps extends Omit<
+  ElementProps,
+  "children" | "onChange" | "onInput" | "id"
+> {
+  /** How many characters the code has. */
+  length: number;
+  /** Shows this code when it changes. Pair it with `onValueChange`. */
+  value?: string;
+  /** The code at first, when `value` is left out; a form reset goes back to it. */
+  defaultValue?: string;
+  /** Called as the code changes: typing, a paste, autofill, Backspace. */
+  onValueChange?: (value: string) => void;
+  /** Called when the last character is entered, with the whole code. */
+  onValueComplete?: (value: string) => void;
+  /** Called with what was entered when it held characters the field does not allow. */
+  onValueInvalid?: (value: string) => void;
+  /** The characters the code may hold. Default `"numeric"` (digits). */
+  validationType?: OTPFieldValidationType;
+  /**
+   * Normalizes what is entered before the allowed characters are kept: `(text) =>
+   * text.toUpperCase()`, say. In an island: a server page's script cannot receive a function.
+   */
+  normalizeValue?: (value: string) => string;
+  /** The virtual keyboard: default `"numeric"` for digits, `"text"` otherwise. */
+  inputMode?: "numeric" | "text" | "tel" | "none";
+  /** The slots show dots instead of the characters. */
+  mask?: boolean;
+  /** The input's `autocomplete`. Default `"one-time-code"`: the browser offers a code it received. */
+  autoComplete?: string;
+  /** Submits the form when the last character is entered. */
+  autoSubmit?: boolean;
+  /** The name the code is submitted under. */
+  name?: string;
+  /** The id of a form the field belongs to, when it is outside it. */
+  form?: string;
+  /** The input's id, for a `<label for>`. Default: generated, or the Field's. */
+  id?: string;
+  /** The form needs a whole code. */
+  required?: boolean;
+  /** The field cannot be used. */
+  disabled?: boolean;
+  /** The code can be read and submitted, not changed. */
+  readOnly?: boolean;
+  /** The `Input` and the `Slot`s (with `Separator`s between them). */
+  children?: JSX.Element;
+}
+
+/**
+ * The `<input>` that holds the code: over the slots, its text transparent, once the script runs; a
+ * plain text field without it. Name it with a label or `aria-label`.
+ */
+export type OTPFieldInputProps = Omit<
+  JSX.IntrinsicElements["input"],
+  | "type"
+  | "value"
+  | "name"
+  | "form"
+  | "required"
+  | "readonly"
+  | "maxlength"
+  | "minlength"
+  | "pattern"
+  | "inputmode"
+  | "autocomplete"
+  | "id"
+>;
+
+/** A `<div aria-hidden="true">` that shows one character of the code, the next in order. */
+export type OTPFieldSlotProps = Omit<JSX.IntrinsicElements["div"], "children">;
+
+/** A `<div aria-hidden="true">` between slots: a dash, a gap. */
+export type OTPFieldSeparatorProps = JSX.IntrinsicElements["div"] & {
+  /** Which way it runs. Default `"horizontal"`. */
+  orientation?: "horizontal" | "vertical";
+};
+
+interface OTPFieldContextValue {
+  inputId: string;
+  length: () => number;
+  initial: string;
+  validationType: () => OTPFieldValidationType;
+  inputMode: () => string;
+  mask: () => boolean;
+  autoComplete: () => string;
+  name: () => string | undefined;
+  form: () => string | undefined;
+  required: () => boolean | undefined;
+  disabled: () => boolean;
+  readOnly: () => boolean | undefined;
+  /** How many slots have rendered: the next slot's index. */
+  slots: { count: number };
+}
+
+const OTPFieldContext = createContext<OTPFieldContextValue>();
+
+function useOTPField(part: string): OTPFieldContextValue {
+  const context = useContext(OTPFieldContext);
+  if (!context) throw new Error(`OTPField.${part} must be inside <OTPField.Root>.`);
+  return context;
+}
+
+/** The `pattern` that matches a whole code of `length` characters of `type`. */
+function pattern(type: OTPFieldValidationType, length: number): string {
+  // ASCII, as the script keeps (TASK-440, M34).
+  const char = {
+    numeric: "[0-9]",
+    alpha: "[A-Za-z]",
+    alphanumeric: "[A-Za-z0-9]",
+    none: "\\S",
+  }[type];
+  return `${char}{${length}}`;
+}
+
+function Root({
+  length,
+  value,
+  defaultValue,
+  onValueChange,
+  onValueComplete,
+  onValueInvalid,
+  validationType,
+  normalizeValue,
+  inputMode,
+  mask,
+  autoComplete,
+  autoSubmit,
+  name,
+  form,
+  id,
+  required,
+  disabled,
+  readOnly,
+  children,
+  ...rest
+}: OTPFieldRootProps) {
+  // Cleans the value and shows it in the slots, on server pages and in islands (decision-63).
+  otpFieldScript();
+  const generated = useId();
+  const field = useField();
+  const element = ref<OTPFieldElement>();
+  const type = () => validationType ?? "numeric";
+  // The `value` prop drives the code when it changes.
+  effect(() => {
+    const next = value;
+    const host = element();
+    if (next !== undefined && host?.isConnected && host.value !== next) host.value = next;
+  });
+  effect(() => {
+    const host = element();
+    if (host) host.normalizeValue = normalizeValue;
+  });
+  // A form reset puts the code back without an `input` event: it goes to `onValueChange`
+  // (TASK-435).
+  if (onValueChange) {
+    onFormReset(
+      () => element()?.input ?? undefined,
+      () => element()!.value,
+      onValueChange,
+    );
+  }
+  const context: OTPFieldContextValue = {
+    inputId: untrack(() => id ?? (field ? controlId(field) : `${generated}-input`)),
+    length: () => length,
+    initial: untrack(() => value ?? defaultValue ?? ""),
+    validationType: type,
+    inputMode: () => inputMode ?? (type() === "numeric" ? "numeric" : "text"),
+    mask: () => mask === true,
+    autoComplete: () => autoComplete ?? "one-time-code",
+    name: () => name ?? field?.name(),
+    form: () => form,
+    required: () => required,
+    disabled: () => disabled === true || field?.disabled() === true,
+    readOnly: () => readOnly,
+    slots: { count: 0 },
+  };
+  return (
+    <OTPFieldContext value={context}>
+      <lu-otp-field
+        {...rest}
+        ref={element}
+        // Digits read left to right in right-to-left pages too: a numeric code's slots run that
+        // way unless `dir` says otherwise (TASK-385). Letters follow the page.
+        dir={rest.dir ?? (type() === "numeric" ? "ltr" : undefined)}
+        length={length}
+        validation-type={type()}
+        mask={mask}
+        auto-submit={autoSubmit}
+        on:input={(event: Event) => {
+          const input = element()?.input;
+          // A composition reports once committed (the element fires `input` then, TASK-432).
+          if (input && event.target === input && !(event as InputEvent).isComposing) {
+            onValueChange?.(input.value);
+          }
+        }}
+        on:valuecomplete={(event: CustomEvent<OTPFieldValueDetail>) =>
+          onValueComplete?.(event.detail.value)
+        }
+        on:valueinvalid={(event: CustomEvent<OTPFieldValueDetail>) =>
+          onValueInvalid?.(event.detail.value)
+        }
+      >
+        {children}
+      </lu-otp-field>
+    </OTPFieldContext>
+  );
+}
+
+function Input(props: OTPFieldInputProps) {
+  const otp = useOTPField("Input");
+  const field = useField();
+  return (
+    <input
+      spellcheck={false}
+      autocapitalize="off"
+      aria-describedby={field ? describedBy(field) : undefined}
+      aria-invalid={field?.invalid() ? "true" : undefined}
+      {...props}
+      // Masked, a password: assistive technology does not speak the code (TASK-440, M33).
+      type={otp.mask() ? "password" : "text"}
+      id={otp.inputId}
+      name={otp.name()}
+      form={otp.form()}
+      value={otp.initial || undefined}
+      inputmode={otp.inputMode() as JSX.IntrinsicElements["input"]["inputmode"]}
+      autocomplete={otp.autoComplete() as JSX.IntrinsicElements["input"]["autocomplete"]}
+      maxlength={otp.length()}
+      minlength={otp.length()}
+      pattern={pattern(otp.validationType(), otp.length())}
+      required={otp.required()}
+      readonly={otp.readOnly()}
+      disabled={props.disabled || otp.disabled() || undefined}
+    />
+  );
+}
+
+function Slot(props: OTPFieldSlotProps) {
+  const otp = useOTPField("Slot");
+  const index = otp.slots.count++;
+  // The server HTML's character; the script keeps it from then on.
+  const char = untrack(() => otp.initial[index] ?? "");
+  return (
+    <div {...props} aria-hidden="true" data-slot="" data-filled={char ? "" : undefined}>
+      {char && otp.mask() ? "•" : char}
+    </div>
+  );
+}
+
+function Separator({ orientation, ...rest }: OTPFieldSeparatorProps) {
+  useOTPField("Separator");
+  return <div {...rest} aria-hidden="true" data-orientation={orientation ?? "horizontal"} />;
+}
+
+/**
+ * A one-time code field: one native input, shown as one slot per character, with SMS autofill,
+ * paste, validation of the allowed characters and the form's value. Unstyled: style the parts
+ * through `class`, the slots' `[data-filled]` and `[data-active]`, and the root's
+ * `[data-complete]` and `[data-focused]`.
+ *
+ * @example
+ * <OTPField.Root length={6} name="code">
+ *   <OTPField.Input aria-label="Verification code" />
+ *   <OTPField.Slot />
+ *   <OTPField.Slot />
+ *   <OTPField.Slot />
+ *   <OTPField.Separator />
+ *   <OTPField.Slot />
+ *   <OTPField.Slot />
+ *   <OTPField.Slot />
+ * </OTPField.Root>
+ */
+export const OTPField = { Root, Input, Slot, Separator };