@skiddph/prui 0.7.0 → 0.9.0

package/dist/core/overlay.js

@@ -0,0 +1,189 @@
+import * as s from "react";
+import { createPortal as E } from "react-dom";
+function P({
+  children: t,
+  container: e
+}) {
+  const [r, c] = s.useState(null);
+  return s.useEffect(() => {
+    c(e ?? (typeof document < "u" ? document.body : null));
+  }, [e]), r == null ? null : E(t, r);
+}
+function x() {
+  const [t, e] = s.useState(() => typeof window > "u" || !window.matchMedia ? !1 : window.matchMedia("(prefers-reduced-motion: reduce)").matches);
+  return s.useEffect(() => {
+    if (typeof window > "u" || !window.matchMedia) return;
+    const r = window.matchMedia("(prefers-reduced-motion: reduce)"), c = () => e(r.matches);
+    return r.addEventListener("change", c), () => r.removeEventListener("change", c);
+  }, []), t;
+}
+const v = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "iframe",
+  "object",
+  "embed",
+  "[tabindex]:not([tabindex='-1'])",
+  "[contenteditable]:not([contenteditable='false'])"
+].join(",");
+function y(t) {
+  return t ? Array.from(t.querySelectorAll(v)).filter(
+    (e) => !e.closest("[inert], [aria-hidden='true']") && !e.hasAttribute("hidden")
+  ) : [];
+}
+const f = [];
+function g(t) {
+  const e = Symbol("prui-overlay");
+  return f.push({ id: e, element: t }), e;
+}
+function T(t) {
+  const e = f.findIndex((r) => r.id === t);
+  e >= 0 && f.splice(e, 1);
+}
+function k(t) {
+  const e = f[f.length - 1];
+  return e != null && e.id === t;
+}
+function I() {
+  return f.length;
+}
+function w(t) {
+  const e = s.useRef(null), r = s.useRef(null), [c, o] = s.useReducer((i) => i + 1, 0);
+  s.useEffect(() => {
+    if (!t) return;
+    const i = g(null);
+    return e.current = i, r.current = f[f.length - 1] ?? null, o(), () => {
+      T(i), e.current === i && (e.current = null, r.current = null);
+    };
+  }, [t]);
+  const n = s.useCallback((i) => {
+    r.current && (r.current.element = i);
+  }, []), u = s.useCallback(() => e.current != null ? k(e.current) : !1, []);
+  return { setElement: n, isTop: u };
+}
+function R(t, e, r) {
+  const c = s.useRef(r);
+  c.current = r, s.useEffect(() => {
+    if (!t) return;
+    const o = (n) => {
+      if (n.key !== "Escape" || !e()) return;
+      c.current() === !1 && n.stopPropagation();
+    };
+    return document.addEventListener("keydown", o, !0), () => document.removeEventListener("keydown", o, !0);
+  }, [t, e]);
+}
+let a = 0, h = "", p = "";
+function L() {
+  typeof document > "u" || (a++, !(a > 1) && (h = document.body.style.overflow, p = document.body.style.paddingRight, document.body.style.overflow = "hidden", document.body.classList.add("modal-open")));
+}
+function A() {
+  typeof document > "u" || (a = Math.max(0, a - 1), !(a > 0) && (document.body.style.overflow = h, document.body.style.paddingRight = p, document.body.classList.remove("modal-open")));
+}
+function S(t) {
+  s.useEffect(() => {
+    if (t)
+      return L(), A;
+  }, [t]);
+}
+const b = typeof HTMLElement < "u" && "inert" in HTMLElement.prototype;
+function C(t, e) {
+  const r = t.ownerDocument, c = [];
+  for (const o of Array.from(r.body.childNodes)) {
+    if (!(o instanceof HTMLElement)) continue;
+    const n = o.tagName;
+    n === "SCRIPT" || n === "STYLE" || n === "LINK" || n === "NOSCRIPT" || n === "META" || n === "TITLE" || n === "TEMPLATE" || o === t || o.contains(t) || t.contains(o) || e.has(o) || o.getAttribute("aria-hidden") !== "true" && (c.push({ el: o, ariaHidden: o.getAttribute("aria-hidden") }), o.setAttribute("aria-hidden", "true"), b && o.setAttribute("inert", ""));
+  }
+  return () => {
+    for (const { el: o, ariaHidden: n } of c)
+      n === null ? o.removeAttribute("aria-hidden") : o.setAttribute("aria-hidden", n), b && o.removeAttribute("inert");
+  };
+}
+function M(t, e) {
+  s.useEffect(() => {
+    if (!t || !e || typeof document > "u") return;
+    const r = /* @__PURE__ */ new Set();
+    for (const c of f)
+      c.element && r.add(c.element);
+    return C(e, r);
+  }, [t, e]);
+}
+function O({ active: t, container: e, initialFocus: r = "first", restoreFocus: c = !0 }) {
+  const o = s.useRef(null);
+  s.useEffect(() => {
+    if (!t) return;
+    o.current = document.activeElement ?? null;
+    const u = (r === !1 ? null : r === "container" ? e : r === "first" ? y(e)[0] ?? e : r.current ?? null) ?? e;
+    u && u.isConnected && !u.contains(document.activeElement) && (!u.hasAttribute("tabindex") && u.tagName !== "INPUT" && u.tagName !== "BUTTON" && u.tagName !== "TEXTAREA" && u.tagName !== "SELECT" && u.tagName !== "A" && !u.isContentEditable && u.setAttribute("tabindex", "-1"), u.focus());
+  }, [t, e, r]), s.useEffect(() => {
+    if (t) return;
+    const n = o.current;
+    !n || !c || (o.current = null, n.isConnected && n.focus());
+  }, [t, c]), s.useEffect(
+    () => () => {
+      const n = o.current;
+      n && c && n.isConnected && n.focus();
+    },
+    [c]
+  ), s.useEffect(() => {
+    if (!t) return;
+    const n = (u) => {
+      if (u.key !== "Tab") return;
+      const i = y(e);
+      if (i.length === 0) {
+        e && !e.contains(document.activeElement) && (u.preventDefault(), e.focus());
+        return;
+      }
+      const l = i[0], m = i[i.length - 1], d = document.activeElement;
+      if (!d || !(e != null && e.contains(d))) {
+        u.preventDefault(), l.focus();
+        return;
+      }
+      u.shiftKey && d === l ? (u.preventDefault(), m.focus()) : !u.shiftKey && d === m && (u.preventDefault(), l.focus());
+    };
+    return document.addEventListener("keydown", n, !0), () => document.removeEventListener("keydown", n, !0);
+  }, [t, e]);
+}
+function B({
+  open: t,
+  onEscape: e,
+  modal: r = !0,
+  initialFocus: c = "first",
+  restoreFocus: o = !0
+}) {
+  const [n, u] = s.useState(null), { setElement: i, isTop: l } = w(t);
+  return R(t, l, () => e == null ? void 0 : e()), S(t && r), M(t && r && n != null, n), O({ active: t && r, container: n, initialFocus: c, restoreFocus: o }), { ref: s.useCallback(
+    (d) => {
+      u(d), i(d);
+    },
+    [i]
+  ), element: n, top: l };
+}
+const D = {
+  name: "useOverlay",
+  props: [
+    { name: "open", type: "boolean", default: null, control: "boolean" },
+    { name: "onEscape", type: "() => boolean | void", default: null, control: "none", description: "Return false to block close (Modal shakes)." },
+    { name: "modal", type: "boolean", default: "true", control: "boolean", description: "Trap focus, lock scroll, inert the background." },
+    { name: "initialFocus", type: 'ref | "first" | "container" | false', default: '"first"', control: "none" },
+    { name: "restoreFocus", type: "boolean", default: "true", control: "boolean" }
+  ]
+};
+export {
+  P as Portal,
+  y as getFocusable,
+  k as isTopOverlay,
+  I as overlayCount,
+  D as overlayPropsMeta,
+  g as pushOverlay,
+  T as removeOverlay,
+  R as useEscapeKey,
+  O as useFocusTrap,
+  M as useInertBackground,
+  B as useOverlay,
+  w as useOverlayStack,
+  x as useReducedMotion,
+  S as useScrollLock
+};

package/dist/core/popover.d.ts

@@ -0,0 +1,29 @@
+import { AnchorSide, AnchorAlign } from './anchor';
+import { PropsMeta } from './props-meta';
+import * as React from "react";
+/**
+ * Popover: a click-triggered anchored surface for rich content (filters,
+ * pickers, little forms). Non-modal by default: Escape (topmost only) and
+ * outside-pointer close it, focus starts inside the panel, and it returns
+ * to the trigger on close. `modal` opts into the full trap + inert
+ * background.
+ */
+export interface PopoverProps {
+    /** The element that toggles the popover (cloned and wired up). */
+    trigger?: React.ReactNode;
+    children?: React.ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    side?: AnchorSide;
+    align?: AnchorAlign;
+    /** Focus-trap + inert background instead of a dismissible surface. */
+    modal?: boolean;
+    /** Accessible label for the popover panel. */
+    ariaLabel?: string;
+    /** Min panel width in px. Default 200. */
+    minWidth?: number;
+    className?: string;
+}
+export declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<HTMLDivElement>>;
+export declare const popoverPropsMeta: PropsMeta;

package/dist/core/popover.js

@@ -0,0 +1,124 @@
+import { jsxs as T, Fragment as q, jsx as m } from "react/jsx-runtime";
+import * as l from "react";
+import { cn as C } from "./cn.js";
+import { useOverlayStack as D, useEscapeKey as F, Portal as M } from "./overlay.js";
+import { useAnchoredPosition as U } from "./anchor.js";
+import { usePruiI18n as V } from "../i18n.js";
+const B = l.forwardRef(function({
+  trigger: u,
+  children: E,
+  open: b,
+  defaultOpen: P = !1,
+  onOpenChange: f,
+  side: v = "bottom",
+  align: R = "start",
+  modal: y = !1,
+  ariaLabel: w,
+  minWidth: k = 200,
+  className: A
+}, c) {
+  const [N, S] = l.useState(P), x = b !== void 0, n = x ? b : N, s = l.useRef(null), d = l.useRef(null), [g, j] = l.useState(null), { t: L } = V(), i = (e) => {
+    var o, t;
+    if (x || S(e), f == null || f(e), !e) {
+      const r = document.activeElement;
+      r && ((o = d.current) != null && o.contains(r)) && ((t = s.current) == null || t.focus());
+    }
+  }, { setElement: z, isTop: I } = D(n);
+  F(n, I, () => i(!1));
+  const { ref: K, position: a } = U({ active: n, anchorRef: s, side: v, align: R });
+  l.useEffect(() => {
+    if (!n || y) return;
+    const e = (o) => {
+      var r, h;
+      const t = o.target;
+      (r = s.current) != null && r.contains(t) || (h = d.current) != null && h.contains(t) || i(!1);
+    };
+    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+  }), l.useEffect(() => {
+    if (!n) return;
+    const e = g;
+    if (!e) return;
+    const o = e.querySelectorAll(
+      "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex='-1'])"
+    );
+    (Array.from(o).find((r) => !r.hasAttribute("hidden")) ?? e).focus();
+  }, [n, g]);
+  let p;
+  if (l.isValidElement(u)) {
+    const e = u;
+    p = l.cloneElement(e, {
+      ref: (o) => {
+        s.current = o;
+        const t = e.props.ref;
+        typeof t == "function" ? t(o) : t && typeof t == "object" && (t.current = o);
+      },
+      "aria-haspopup": "dialog",
+      "aria-expanded": n,
+      onClick: (o) => {
+        var t, r;
+        (r = (t = e.props).onClick) == null || r.call(t, o), o.defaultPrevented || i(!n);
+      }
+    });
+  } else
+    p = /* @__PURE__ */ m(
+      "button",
+      {
+        type: "button",
+        ref: (e) => {
+          s.current = e;
+        },
+        "aria-haspopup": "dialog",
+        "aria-expanded": n,
+        onClick: () => i(!n),
+        children: u
+      }
+    );
+  return /* @__PURE__ */ T(q, { children: [
+    p,
+    n ? /* @__PURE__ */ m(M, { children: /* @__PURE__ */ m(
+      "div",
+      {
+        ref: (e) => {
+          d.current = e, j(e), K(e), z(e), typeof c == "function" ? c(e) : c && (c.current = e);
+        },
+        role: "dialog",
+        "aria-label": w ?? L.dismiss,
+        tabIndex: -1,
+        "data-state": n ? "open" : "closed",
+        "data-side": (a == null ? void 0 : a.side) ?? v,
+        className: C(
+          "prui-popover fixed z-[var(--prui-z-overlay)] rounded-[var(--prui-radius)] border border-[var(--prui-line)]",
+          "bg-[var(--prui-surface)] p-4 text-sm text-[var(--prui-fg)] shadow-[var(--prui-shadow-lg)] outline-none",
+          A
+        ),
+        style: {
+          top: (a == null ? void 0 : a.top) ?? -9999,
+          left: (a == null ? void 0 : a.left) ?? -9999,
+          minWidth: k
+        },
+        onKeyDown: (e) => {
+          !y && e.key === "Tab" && i(!1);
+        },
+        children: E
+      }
+    ) }) : null
+  ] });
+});
+B.displayName = "Popover";
+const X = {
+  name: "Popover",
+  props: [
+    { name: "trigger", type: "ReactNode", default: null, control: "none" },
+    { name: "open", type: "boolean", default: "undefined", control: "boolean" },
+    { name: "defaultOpen", type: "boolean", default: "false", control: "boolean" },
+    { name: "onOpenChange", type: "(open: boolean) => void", default: null, control: "none" },
+    { name: "side", type: "'top' | 'bottom' | 'left' | 'right'", default: "'bottom'", control: "select", options: ["top", "bottom", "left", "right"] },
+    { name: "align", type: "'start' | 'center' | 'end'", default: "'start'", control: "select", options: ["start", "center", "end"] },
+    { name: "modal", type: "boolean", default: "false", control: "boolean" },
+    { name: "ariaLabel", type: "string", default: "undefined", control: "text" }
+  ]
+};
+export {
+  B as Popover,
+  X as popoverPropsMeta
+};

package/dist/core/progress.d.ts

@@ -0,0 +1,21 @@
+import { PropsMeta } from './props-meta';
+import * as React from "react";
+/**
+ * Progress: a linear progress indicator. role="progressbar" with the full
+ * aria value triple; an indeterminate mode communicates activity without a
+ * known percentage.
+ */
+export interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Current value; omit for indeterminate. */
+    value?: number;
+    /** Minimum (default 0). */
+    min?: number;
+    /** Maximum (default 100). */
+    max?: number;
+    /** Render the numeric percentage label. */
+    showValue?: boolean;
+    /** Color variant. */
+    variant?: "brand" | "success" | "warning" | "danger";
+}
+export declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;
+export declare const progressPropsMeta: PropsMeta;

package/dist/core/progress.js

@@ -0,0 +1,59 @@
+import { jsxs as o, jsx as d } from "react/jsx-runtime";
+import * as v from "react";
+import { cn as l } from "./cn.js";
+const b = {
+  brand: "bg-[var(--prui-brand)]",
+  success: "bg-[var(--prui-ok)]",
+  warning: "bg-[var(--prui-warn)]",
+  danger: "bg-[var(--prui-danger)]"
+}, g = v.forwardRef(
+  ({ className: u, value: s, min: a = 0, max: e = 100, showValue: m = !1, variant: p = "brand", ...i }, c) => {
+    const r = s === void 0, n = r ? void 0 : Math.min(Math.max(s, a), e), t = n === void 0 ? void 0 : (n - a) / (e - a) * 100;
+    return /* @__PURE__ */ o("div", { className: l("flex items-center gap-2", u), children: [
+      /* @__PURE__ */ d(
+        "div",
+        {
+          ref: c,
+          role: "progressbar",
+          "aria-valuenow": r ? void 0 : n,
+          "aria-valuemin": a,
+          "aria-valuemax": e,
+          "aria-label": i["aria-label"] ?? "Progress",
+          "data-state": r ? "indeterminate" : "determinate",
+          className: "prui-progress h-2 w-full overflow-hidden rounded-[var(--prui-radius-full)] bg-[var(--prui-raise)]",
+          ...i,
+          children: /* @__PURE__ */ d(
+            "div",
+            {
+              className: l(
+                "h-full rounded-[var(--prui-radius-full)] transition-[width] duration-[var(--prui-duration-base)] ease-[var(--prui-ease-out)]",
+                b[p],
+                r && "prui-progress-indeterminate w-1/3"
+              ),
+              style: r ? void 0 : { width: `${t}%` }
+            }
+          )
+        }
+      ),
+      m && t !== void 0 ? /* @__PURE__ */ o("span", { className: "text-xs tabular-nums text-[var(--prui-dim)]", children: [
+        Math.round(t),
+        "%"
+      ] }) : null
+    ] });
+  }
+);
+g.displayName = "Progress";
+const w = {
+  name: "Progress",
+  props: [
+    { name: "value", type: "number", default: "undefined (indeterminate)", control: "number" },
+    { name: "min", type: "number", default: "0", control: "number" },
+    { name: "max", type: "number", default: "100", control: "number" },
+    { name: "showValue", type: "boolean", default: "false", control: "boolean" },
+    { name: "variant", type: "'brand' | 'success' | 'warning' | 'danger'", default: "'brand'", control: "select", options: ["brand", "success", "warning", "danger"] }
+  ]
+};
+export {
+  g as Progress,
+  w as progressPropsMeta
+};

package/dist/core/radio.d.ts

@@ -0,0 +1,20 @@
+import { PropsMeta } from './props-meta';
+import * as React from "react";
+export interface RadioGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    /** Group label exposed to assistive tech. */
+    label?: string;
+    name?: string;
+    disabled?: boolean;
+    orientation?: "vertical" | "horizontal";
+}
+export declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+export interface RadioProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "value" | "onChange" | "checked"> {
+    value: string;
+    disabled?: boolean;
+    label?: React.ReactNode;
+}
+export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const radioGroupPropsMeta: PropsMeta;

package/dist/core/radio.js

@@ -0,0 +1,115 @@
+import { jsx as v, jsxs as M } from "react/jsx-runtime";
+import * as n from "react";
+import { Circle as P } from "lucide-react";
+import { cn as G } from "./cn.js";
+const I = n.createContext(null);
+function S() {
+  const m = n.useContext(I);
+  if (!m) throw new Error("Radio must be used inside <RadioGroup>");
+  return m;
+}
+const U = n.forwardRef(function({ value: d, defaultValue: a, onChange: i, label: R, name: h, disabled: f, orientation: b = "vertical", className: s, onKeyDown: c, children: y, ...p }, k) {
+  const l = n.useId(), x = h ?? `prui-radio-${l}`, [N, o] = n.useState(a ?? ""), j = d !== void 0 ? d : N, [V, A] = n.useState([]), w = n.useRef(/* @__PURE__ */ new Map()), E = (e) => {
+    d === void 0 && o(e), i == null || i(e);
+  }, z = n.useCallback((e, t) => {
+    t ? (w.current.set(e, t), A((u) => u.includes(e) ? u : [...u, e])) : (w.current.delete(e), A((u) => u.filter((g) => g !== e)));
+  }, []), D = (e) => {
+    if (c == null || c(e), e.defaultPrevented) return;
+    const t = V.map((r) => w.current.get(r)).filter((r) => !!r && !r.disabled);
+    if (t.length === 0) return;
+    const u = t.findIndex((r) => r.tabIndex === 0), g = e.key === "ArrowDown" || e.key === "ArrowRight" ? 1 : e.key === "ArrowUp" || e.key === "ArrowLeft" ? -1 : 0;
+    if (g !== 0) {
+      e.preventDefault();
+      const r = t[(u + g + t.length) % t.length];
+      r.focus(), r.click();
+      return;
+    }
+    if (e.key === "Home") {
+      e.preventDefault(), t[0].focus(), t[0].click();
+      return;
+    }
+    if (e.key === "End") {
+      e.preventDefault();
+      const r = t[t.length - 1];
+      r.focus(), r.click();
+    }
+  };
+  return /* @__PURE__ */ v(I.Provider, { value: { value: j, name: x, setValue: E, register: z, firstValue: V[0] ?? null }, children: /* @__PURE__ */ v(
+    "div",
+    {
+      ref: k,
+      role: "radiogroup",
+      "aria-label": R,
+      "aria-disabled": f,
+      "data-orientation": b,
+      onKeyDown: D,
+      className: G(
+        "prui-radio-group flex gap-2",
+        b === "vertical" ? "flex-col" : "flex-row flex-wrap items-center",
+        s
+      ),
+      ...p,
+      children: y
+    }
+  ) });
+});
+U.displayName = "RadioGroup";
+const H = n.forwardRef(function({ className: d, value: a, disabled: i, label: R, children: h, onClick: f, ...b }, s) {
+  const { value: c, setValue: y, register: p, firstValue: k } = S(), l = c === a, x = n.useRef(null);
+  return n.useEffect(() => (p(a, x.current), () => p(a, null)), [a, p]), /* @__PURE__ */ M(
+    "button",
+    {
+      ref: (o) => {
+        x.current = o, typeof s == "function" ? s(o) : s && (s.current = o);
+      },
+      type: "button",
+      role: "radio",
+      "aria-checked": l,
+      "aria-disabled": i,
+      "data-state": l ? "checked" : "unchecked",
+      tabIndex: l || !c && a === k ? 0 : -1,
+      disabled: i,
+      onClick: (o) => {
+        f == null || f(o), !o.defaultPrevented && !i && y(a);
+      },
+      className: G(
+        "prui-radio inline-flex items-center gap-2 text-sm cursor-pointer outline-none",
+        "focus-visible:ring-2 focus-visible:ring-[var(--prui-brand)] focus-visible:ring-offset-1 rounded-[var(--prui-radius-1)]",
+        i ? "opacity-50 cursor-not-allowed" : "text-[var(--prui-fg)]",
+        d
+      ),
+      ...b,
+      children: [
+        /* @__PURE__ */ v(
+          "span",
+          {
+            "aria-hidden": !0,
+            className: G(
+              "inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-[var(--prui-radius-full)] border",
+              "transition-colors duration-[var(--prui-duration-fast)]",
+              l ? "border-[var(--prui-brand)]" : "border-[var(--prui-line)] bg-[var(--prui-background)]"
+            ),
+            children: l ? /* @__PURE__ */ v(P, { className: "h-2 w-2 fill-[var(--prui-brand)] text-[var(--prui-brand)]" }) : null
+          }
+        ),
+        R ?? h
+      ]
+    }
+  );
+});
+H.displayName = "Radio";
+const B = {
+  name: "RadioGroup",
+  props: [
+    { name: "value", type: "string", default: "undefined", control: "text" },
+    { name: "defaultValue", type: "string", default: "undefined", control: "text" },
+    { name: "onChange", type: "(value: string) => void", default: null, control: "none" },
+    { name: "label", type: "string (group label)", default: null, control: "text" },
+    { name: "orientation", type: "'vertical' | 'horizontal'", default: "'vertical'", control: "select", options: ["vertical", "horizontal"] }
+  ]
+};
+export {
+  H as Radio,
+  U as RadioGroup,
+  B as radioGroupPropsMeta
+};

package/dist/core/select.d.ts

@@ -1,5 +1,11 @@
 import { PropsMeta } from './props-meta';
 import * as React from "react";
+/**
+ * Select: a native-feeling single-select listbox. Full keyboard support:
+ * Enter/Space/ArrowDown open, ArrowUp/Down/Home/End move, Enter/Space pick,
+ * Escape (topmost overlay only) closes and restores focus, Tab closes,
+ * printable-character typeahead jumps. Non-modal: no scroll lock.
+ */
 export interface SelectOption {
     label: string;
     value: string;