@eifi1/ui-kit 0.6.1 → 0.7.1

package/src/components/combobox-core.tsx

@@ -13,13 +13,29 @@ import { cn } from "../lib/cn";
 import { DropdownSearchHeader } from "./dropdown";
 import { PickerSheet, SHEET_ROW_CLASS } from "./picker-sheet";
 import { useMediaQuery } from "../hooks/use-media-query";
-import { PHONE_QUERY } from "./ui";
+import { FLOATING_LABEL_STATIC, PHONE_QUERY, Spinner } from "./ui";
+import { useAnchorDir } from "./use-anchor-dir";
 import { type AnchorRect } from "../hooks/use-anchored-rect";
 import { useAnchoredPanel, type AnchoredPanel } from "../hooks/use-anchored-panel";
 import { useEscapeKey, useOutsideClick } from "../hooks/use-dismiss";
 import { DEFAULT_COMBOBOX_LABELS, useKitLabels } from "../i18n/kit-labels";
 import { hasMessage, mergeDescribedBy } from "./choice-parts";
 
+/**
+ * What an entity picker hands `onChange` when it is cleared — `clearValue` on
+ * {@link EntityCombobox} and {@link InlineEntityCombobox}. `null` by default.
+ *
+ * A closed set rather than any value, on purpose: every member is something no
+ * option can be (an option's value is a `string | number`, and `""` is never a real
+ * id), so the picker can also READ it back — a field whose `value` is the clear
+ * value shows as empty, with no clear button, exactly as `null` does. An arbitrary
+ * sentinel could collide with an id and would make that read ambiguous.
+ *
+ * No `undefined`: a prop set to `undefined` is a prop not passed, so it would read as
+ * the default and emit `null` — the one outcome the caller had asked not to get.
+ */
+export type ComboClearValue = null | "";
+
 export interface ComboOption<V extends string | number> {
   value: V;
   label: string;
@@ -33,6 +49,76 @@ export interface ComboOption<V extends string | number> {
    * Searchable like `sublabel`.
    */
   group?: string;
+  /**
+   * Shown but not takeable: rendered dimmed with `aria-disabled`, passed over by the
+   * arrow keys, and a click or Enter on it does nothing. For a row whose existence is
+   * the information — a write-locked result, an account that is closed — where
+   * leaving it out would read as "there is no such thing". Say WHY in `sublabel`: a
+   * hover tooltip is the one explanation a phone cannot show.
+   *
+   * Honoured by {@link Autocomplete}, {@link InlineEntityCombobox} and the panel
+   * pickers ({@link EntityCombobox}, {@link MultiEntityCombobox}); on those an already
+   * chosen disabled option stays chosen — the row only refuses to be toggled.
+   */
+  disabled?: boolean;
+}
+
+/** A row the user may take — present and not {@link ComboOption.disabled}. */
+export const isOptionEnabled = (o: { disabled?: boolean } | undefined): boolean =>
+  o !== undefined && !o.disabled;
+
+/**
+ * The next takeable row from `from`, stepping `dir` — what the arrow keys use so a
+ * disabled row is passed over, as the APG allows. Stays on `from` at the end of the
+ * list (the family's arrows clamp rather than wrap) and answers `-1` when `from` is
+ * not a row and there is nothing to step to.
+ */
+export function stepEnabled(
+  rows: readonly { disabled?: boolean }[],
+  from: number,
+  dir: 1 | -1,
+): number {
+  for (let i = from + dir; i >= 0 && i < rows.length; i += dir) {
+    if (!rows[i].disabled) return i;
+  }
+  return from >= 0 && from < rows.length ? from : -1;
+}
+
+/** `i` when that row is takeable, else the nearest takeable one after it, else
+ *  before it, else `-1`. For a highlight that starts on a fixed index (the panel
+ *  pickers open on row 0) and must never rest on a disabled row. */
+export function settleEnabled(rows: readonly { disabled?: boolean }[], i: number): number {
+  if (i < 0 || i >= rows.length) return -1;
+  if (!rows[i].disabled) return i;
+  const after = stepEnabled(rows, i, 1);
+  if (after !== i) return after;
+  const before = stepEnabled(rows, i, -1);
+  return before !== i ? before : -1;
+}
+
+/** Classes a disabled row adds over its normal ones — dimmed, no hover, the
+ *  kit's soft-disabled look (`DangerConfirm`, `SignaturePad`). */
+export const DISABLED_ROW_CLASS = "cursor-not-allowed opacity-50 hover:bg-transparent";
+
+/**
+ * The family's floating label, as a real `<label for>` (lenkbank): the input is then
+ * named the way {@link Input}'s is, so `getByLabelText` and any helper that walks
+ * `<label htmlFor>` finds it. Same placement and type as {@link FieldLabel}, which
+ * stays a `<span>` for the TRIGGER pickers — a `<button>` is labelable, but those
+ * compose their own "label: value" name. `pointer-events-none` (from the class)
+ * keeps a press on it landing on the field under it, as before.
+ */
+export function ComboboxFieldLabel({
+  htmlFor,
+  className,
+  children,
+  ...rest
+}: ComponentPropsWithoutRef<"label"> & { htmlFor: string }) {
+  return (
+    <label {...rest} htmlFor={htmlFor} className={cn(FLOATING_LABEL_STATIC, "z-10", className)}>
+      {children}
+    </label>
+  );
 }
 
 /**
@@ -323,7 +409,7 @@ export const SUGGESTION_LIST_CLASS =
 
 export const suggestionRowClass = (isActive: boolean) =>
   cn(
-    "block w-full truncate px-3 py-1.5 text-left text-sm text-[var(--text-primary)]",
+    "block w-full truncate px-3 py-1.5 text-start text-sm text-[var(--text-primary)]",
     isActive ? "bg-[var(--bg-active)]" : "hover:bg-[var(--bg-hover)]",
   );
 
@@ -373,7 +459,7 @@ export interface ComboboxPanelProps<V extends string | number>
 
 /**
  * The portalled dropdown (search header + result rows + optional create row)
- * shared by the single- and multi-value comboboxes. Left-aligned to the trigger
+ * shared by the single- and multi-value comboboxes. Start-aligned to the trigger
  * and sized to its width; `multi` swaps the trailing check for a leading
  * checkbox. `onChoose` decides whether to close (single) or stay open (multi).
  *
@@ -434,34 +520,47 @@ export function ComboboxPanel<V extends string | number>({
   // Same core, same results, same handlers — only the container differs, so the
   // two presentations cannot drift in what they offer.
   const isPhone = useMediaQuery(PHONE_QUERY, false);
-  const rowCount = results.length + (showCreate ? 1 : 0);
+  // Every row the keyboard can land on, the create row included (never disabled).
+  const rows: readonly { disabled?: boolean }[] = showCreate ? [...results, {}] : results;
+  const rowCount = rows.length;
   const optionId = (index: number) => `${listboxId}-option-${index}`;
-  const activeId = active >= 0 && active < rowCount ? optionId(active) : undefined;
+  // The core opens on row 0 and knows nothing of `disabled`; the highlight is settled
+  // HERE, derived, so it can never rest on a row that cannot be taken — whatever the
+  // async list turned out to hold.
+  const current = settleEnabled(rows, active);
+  const activeId = current >= 0 ? optionId(current) : undefined;
   useActiveOptionScroll(activeId);
   // The consumers resolve their own props against the provider already; this is
   // for the loading row, which no consumer names, and for a caller that renders the
   // panel directly and leaves the two optional strings out.
   const labels = useKitLabels("combobox", DEFAULT_COMBOBOX_LABELS);
+  // Portalled to <body>, the panel leaves the subtree its `dir` came from — so the
+  // direction is read off the trigger and put back on the panel below.
+  const dir = useAnchorDir(core.triggerRef, core.open);
 
   // The WAI-ARIA APG's listbox keyboard, in full: Up/Down step, Home/End jump, Enter
   // commits, Tab leaves. Escape is the one key handled elsewhere — `useComboboxCore`
   // registers it on the document, so it answers wherever focus has ended up.
   const onKeyDown = (e: ReactKeyboardEvent) => {
+    // Disabled rows are passed over (`stepEnabled`), and each step starts from the
+    // SETTLED highlight, not the raw index, so the first Down from a disabled row 0
+    // goes to the row after the one already shown as highlighted.
     if (e.key === "ArrowDown") {
       e.preventDefault();
-      setActive((i) => Math.min(i + 1, rowCount - 1));
+      setActive(stepEnabled(rows, current, 1));
     } else if (e.key === "ArrowUp") {
       e.preventDefault();
-      setActive((i) => Math.max(i - 1, 0));
+      setActive(current < 0 ? -1 : stepEnabled(rows, current, -1));
     } else if (e.key === "Home") {
       e.preventDefault();
-      setActive(0);
+      setActive(stepEnabled(rows, -1, 1));
     } else if (e.key === "End") {
       e.preventDefault();
-      setActive(rowCount - 1);
+      setActive(stepEnabled(rows, rowCount, -1));
     } else if (e.key === "Enter") {
       e.preventDefault();
-      if (active < results.length) onChoose(results[active]);
+      if (current < 0) return;
+      if (current < results.length) onChoose(results[current]);
       else if (showCreate) onCreate();
     } else if (e.key === "Tab") {
       // The panel is PORTALLED to <body>, so the browser's own Tab would move from
@@ -490,7 +589,16 @@ export function ComboboxPanel<V extends string | number>({
         <span aria-hidden>…</span>
         <span className="sr-only">{labels.loading}</span>
       </>
-    ) : !busy && results.length === 0 && !showCreate ? (
+    ) : busy ? (
+      // Loading with the LAST query's rows still up. This was `null`, so a refetch —
+      // a new query, or a caller's `loading` while it reloads — looked exactly like a
+      // finished list: rows that were about to be replaced, with nothing saying so.
+      // A line of its own under the rows, in words, so it reads without the spinner.
+      <span className="flex items-center gap-2">
+        <Spinner label={null} className="size-3.5 border" />
+        {labels.loading}
+      </span>
+    ) : results.length === 0 && !showCreate ? (
       failed ? (
         (loadErrorLabel ?? labels.loadError)
       ) : tooShort ? (
@@ -525,6 +633,9 @@ export function ComboboxPanel<V extends string | number>({
       id={listboxId}
       role="listbox"
       aria-multiselectable={multi}
+      // The rows are provisional while a lookup is in flight — whether or not the
+      // previous query's are still showing.
+      aria-busy={busy || undefined}
       className={cn("min-h-0 flex-1 overflow-y-auto py-1", isPhone && "flex-none")}
     >
       {results.map((o, i) => {
@@ -556,19 +667,26 @@ export function ComboboxPanel<V extends string | number>({
               id={optionId(i)}
               role="option"
               aria-selected={selected}
+              aria-disabled={o.disabled || undefined}
               tabIndex={-1}
               onMouseDown={(e) => {
                 e.preventDefault();
-                onChoose(o);
+                if (!o.disabled) onChoose(o);
+              }}
+              onMouseEnter={() => {
+                if (!o.disabled) setActive(i);
               }}
-              onMouseEnter={() => setActive(i)}
               className={cn(
                 isPhone
                   ? SHEET_ROW_CLASS
-                  : "flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm",
-                i === active && !isPhone
-                  ? "bg-[var(--bg-active)]"
-                  : !isPhone && "hover:bg-[var(--bg-hover)]",
+                  : "flex w-full items-center gap-2 px-3 py-1.5 text-start text-sm",
+                o.disabled
+                  ? DISABLED_ROW_CLASS
+                  : i === current && !isPhone
+                    ? "bg-[var(--bg-active)]"
+                    : !isPhone && "hover:bg-[var(--bg-hover)]",
+                // After SHEET_ROW_CLASS, so its hover is the one cancelled.
+                o.disabled && isPhone && DISABLED_ROW_CLASS,
               )}
             >
               {multi && (
@@ -620,9 +738,9 @@ export function ComboboxPanel<V extends string | number>({
             className={cn(
               isPhone
                 ? SHEET_ROW_CLASS
-                : "flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm",
+                : "flex w-full items-center gap-2 px-3 py-1.5 text-start text-sm",
               "text-[var(--text-secondary)]",
-              active === results.length && !isPhone
+              current === results.length && !isPhone
                 ? "bg-[var(--bg-active)]"
                 : !isPhone && "hover:bg-[var(--bg-hover)]",
             )}
@@ -663,6 +781,14 @@ export function ComboboxPanel<V extends string | number>({
   }
 
   if (!rect) return null;
+  // The panel hangs from the trigger's START edge: its left in a left-to-right form,
+  // its right in a right-to-left one (it may be wider than the trigger, `minWidth`).
+  // `clientWidth` rather than `innerWidth`, because a fixed box's `right` is measured
+  // from the edge of the viewport inside any scrollbar.
+  const inline =
+    dir === "rtl"
+      ? { right: (document.documentElement.clientWidth || window.innerWidth) - rect.right }
+      : { left: rect.left };
 
   return createPortal(
     <div
@@ -672,6 +798,7 @@ export function ComboboxPanel<V extends string | number>({
       // `aria-describedby` has nothing to collide with.
       {...rest}
       ref={panelRef}
+      dir={dir}
       onKeyDown={onKeyDown}
       // `placement` keeps the panel inside the region actually on screen: on a phone
       // the search box below pulls up the keyboard, and a panel pinned under a
@@ -680,7 +807,7 @@ export function ComboboxPanel<V extends string | number>({
         ...style,
         position: "fixed",
         top: placement.top,
-        left: rect.left,
+        ...inline,
         width: rect.width,
         minWidth: 220,
         maxHeight: placement.maxHeight,

package/src/components/combobox.tsx

@@ -2,17 +2,23 @@ import { Fragment, useId, useMemo, useRef, useState } from "react";
 import type { ComponentPropsWithoutRef, ReactNode, RefObject } from "react";
 import { createPortal } from "react-dom";
 import { ChevronDown, X } from "lucide-react";
-import { FieldLabel, FIELD_BASE, FIELD_FLOATING_PAD, FIELD_INVALID, PHONE_QUERY } from "./ui";
+import { FIELD_BASE, FIELD_FLOATING_PAD, FIELD_INVALID, PHONE_QUERY } from "./ui";
 import { cn } from "../lib/cn";
 import { useDropdown } from "./dropdown";
 import { useAnchoredPanel } from "../hooks/use-anchored-panel";
+import { useAnchorDir } from "./use-anchor-dir";
 import { useMediaQuery } from "../hooks/use-media-query";
 import { PickerSheet, SHEET_ROW_CLASS } from "./picker-sheet";
 import {
+  ComboboxFieldLabel,
+  DISABLED_ROW_CLASS,
+  isOptionEnabled,
+  stepEnabled,
   SUGGESTION_LIST_CLASS,
   suggestionRowClass,
   useActiveOptionScroll,
   useComboboxFieldError,
+  type ComboClearValue,
   type ComboOption,
 } from "./combobox-core";
 import { DEFAULT_COMBOBOX_LABELS, useKitLabels } from "../i18n/kit-labels";
@@ -94,6 +100,7 @@ function SuggestionList({
   children: ReactNode;
 }) {
   const { rect, top, maxHeight } = useAnchoredPanel(anchorRef, true, { preferredHeight: 256 });
+  const dir = useAnchorDir(anchorRef, true);
   if (!rect) return null;
   return createPortal(
     <div
@@ -101,6 +108,9 @@ function SuggestionList({
       // z-50, not the old z-30: the list is a child of <body> now, so it is
       // competing with the app's own overlays rather than with its own siblings.
       className="fixed z-50"
+      // Portalled out of the form's `dir`; the field's is put back. The list is
+      // exactly the field's width, so `left` places it in either direction.
+      dir={dir}
       style={{ top, left: rect.left, width: rect.width }}
     >
       <ul id={id} role="listbox" className={LIST_CLASS} style={{ maxHeight }}>
@@ -361,22 +371,31 @@ export function Combobox({
     // the combobox a reader meets. Spread FIRST, so the field's ARIA and the
     // handlers carrying live #309 and dev#549 cannot be replaced from outside.
     <div {...rest} ref={wrapperRef} className={cn("relative", className)}>
-      {label !== undefined && <FieldLabel>{label}</FieldLabel>}
+      {/* A real <label for> since lenkbank's tests met a field `getByLabelText` could
+          not find: it used to be a <span>, with the text copied onto `aria-label`. The
+          name a reader hears is the same words either way. */}
+      {label !== undefined && (
+        <ComboboxFieldLabel htmlFor={fieldId} className={disabled ? "opacity-50" : undefined}>
+          {label}
+        </ComboboxFieldLabel>
+      )}
       {/* The chevron centers against this inner wrapper, which hugs the input.
           The outer div can be taller than the input (as a grid item it
           stretches to the row height, e.g. next to the editor's category cell
           with its split button), which used to drag a top-1/2 chevron down to
           the input's bottom edge (feedback #248). */}
-      <div ref={fieldRef} className="relative">
+      {/* Dimmed as a whole when disabled, the way EntityCombobox dims its trigger.
+          FIELD_BASE's grey alone left a disabled picker looking like a filled-in
+          one beside the pickers that do dim (the label is not the input's `peer`,
+          so it is dimmed by hand above). */}
+      <div ref={fieldRef} className={cn("relative", disabled && "cursor-not-allowed opacity-50")}>
         <input
           id={fieldId}
           value={value}
           placeholder={placeholder}
-          // The visual label is a floating <span>, not a <label for>, so fall back to
-          // it for the accessible name — otherwise the field announces only what is
-          // typed in it (dev#477, applied to all three entity fields of a transaction
-          // form at once).
-          aria-label={ariaLabel ?? label}
+          // The caller's name, over the <label for> above — which is what names the
+          // field otherwise (dev#477: a field with neither announces only its text).
+          aria-label={ariaLabel}
           role="combobox"
           aria-expanded={open}
           // The list this field is the mouth of. Required by the role, and the half
@@ -462,7 +481,7 @@ export function Combobox({
           className={cn(
             FIELD_BASE,
             label !== undefined && FIELD_FLOATING_PAD,
-            "pr-9",
+            "pe-9",
             field.isInvalid && FIELD_INVALID,
           )}
         />
@@ -474,8 +493,9 @@ export function Combobox({
             if (!disabled) setOpen((o) => !o);
           }}
           className={cn(
-            "absolute right-2.5 top-1/2 size-4 -translate-y-1/2 text-[var(--text-placeholder)]",
-            disabled ? "opacity-50" : "cursor-pointer",
+            "absolute end-2.5 top-1/2 size-4 -translate-y-1/2 text-[var(--text-placeholder)]",
+            // The box above does the dimming; dimming here too would halve it again.
+            !disabled && "cursor-pointer",
           )}
         />
       </div>
@@ -605,7 +625,7 @@ export function Combobox({
                     onMouseEnter={() => setActive(i)}
                     className={cn(
                       rowClass(i === active),
-                      group != null && "pl-6",
+                      group != null && "ps-6",
                       // A row with a badge is a flex row so the label truncates and the
                       // badge keeps its width; without one it stays the plain block the
                       // other lists render, so nothing shifts for callers that pass none.
@@ -627,16 +647,20 @@ export function Combobox({
 
 /** `id` is the INPUT's and `onChange` is the field's — see {@link ComboboxProps}
  *  for why the div's spellings of them are omitted. */
-export interface InlineEntityComboboxProps<V extends string | number>
+export interface InlineEntityComboboxProps<V extends string | number, C extends ComboClearValue = null>
   extends Omit<ComponentPropsWithoutRef<"div">, "id" | "onChange"> {
-  /** Selected option id, or null when nothing is selected. */
-  value: V | null;
+  /** Selected option id; `null` or `clearValue` when nothing is selected. */
+  value: V | C | null;
   /** Required and unanswered — see {@link Combobox}'s `invalid`. */
   invalid?: boolean;
   /** What is wrong with the value — see {@link Combobox}'s `error`. */
   error?: ReactNode;
-  /** A picked/typed option emits its id; emptying the field emits `null`. */
-  onChange: (v: V | null) => void;
+  /** A picked/typed option emits its id; emptying the field, or the "×", emits
+   *  `clearValue`. */
+  onChange: (v: V | C) => void;
+  /** What a clear emits — `null` by default, `""` for a schema that wants an empty
+   *  string. See {@link EntityCombobox}'s `clearValue`. */
+  clearValue?: C;
   options: ComboOption<V>[];
   label?: string;
   id?: string;
@@ -686,9 +710,10 @@ export interface InlineEntityComboboxProps<V extends string | number>
  * sheet that emptied it to show the full list would read as "the user cleared the
  * field" the moment it closed.
  */
-export function InlineEntityCombobox<V extends string | number>({
-  value,
+export function InlineEntityCombobox<V extends string | number, C extends ComboClearValue = null>({
+  value: rawValue,
   onChange,
+  clearValue = null as C,
   options,
   label,
   id,
@@ -705,7 +730,10 @@ export function InlineEntityCombobox<V extends string | number>({
   error,
   "aria-label": ariaLabel,
   ...rest
-}: InlineEntityComboboxProps<V>) {
+}: InlineEntityComboboxProps<V, C>) {
+  // The clear value reads as "nothing selected", whichever one the caller picked —
+  // so from here down `value` is the id or `null`, as it always was.
+  const value: V | null = rawValue == null || rawValue === clearValue ? null : (rawValue as V);
   const field = useComboboxFieldError(error, invalid);
   const generated = useId();
   const fieldId = id ?? generated;
@@ -779,7 +807,8 @@ export function InlineEntityCombobox<V extends string | number>({
   // Pointer-device only: the phone's rows live in a {@link PickerSheet} whose own
   // search box holds focus, so the field behind it must not claim to be pointing at
   // one of them.
-  const activeId = !isPhone && active >= 0 && active < matches.length ? optionId(active) : undefined;
+  // A disabled row is never the keyboard's, even if the list changed under it.
+  const activeId = !isPhone && isOptionEnabled(matches[active]) ? optionId(active) : undefined;
   useActiveOptionScroll(activeId);
 
   const close = () => {
@@ -788,6 +817,8 @@ export function InlineEntityCombobox<V extends string | number>({
     setSheetQuery("");
   };
   const commit = (o: ComboOption<V>) => {
+    // A `disabled` option is listed, never taken — by any path.
+    if (o.disabled) return;
     if (o.value !== value) onChange(o.value);
     setText(null);
     close();
@@ -806,9 +837,13 @@ export function InlineEntityCombobox<V extends string | number>({
     if (text !== null) {
       const q = text.trim();
       if (!q) {
-        if (value != null) onChange(null);
+        if (value != null) onChange(clearValue);
       } else {
-        const hits = options.filter((o) => o.label.toLowerCase() === q.toLowerCase());
+        // A disabled option's label typed out in full is not a way round `disabled`:
+        // it is not a hit, so the text reverts like any other non-answer.
+        const hits = options.filter(
+          (o) => !o.disabled && o.label.toLowerCase() === q.toLowerCase(),
+        );
         const ids = new Set(hits.map((h) => h.value));
         if (ids.size === 1 && hits[0].value !== value) onChange(hits[0].value);
       }
@@ -823,19 +858,27 @@ export function InlineEntityCombobox<V extends string | number>({
     // the combobox a reader meets. Spread FIRST, so the field's ARIA and the
     // handlers carrying live #309 and dev#549 cannot be replaced from outside.
     <div {...rest} ref={wrapperRef} className={cn("relative", className)}>
-      {label !== undefined && <FieldLabel>{label}</FieldLabel>}
+      {/* A real <label for> — see {@link Combobox}. */}
+      {label !== undefined && (
+        <ComboboxFieldLabel htmlFor={fieldId} className={disabled ? "opacity-50" : undefined}>
+          {label}
+        </ComboboxFieldLabel>
+      )}
       {/* Inner wrapper for chevron centering — same reasoning as Combobox above.
           It is also what the portalled list anchors to. */}
-      <div ref={fieldRef} className="relative">
+      {/* Dimmed as a whole when disabled, the way EntityCombobox dims its trigger.
+          FIELD_BASE's grey alone left a disabled picker looking like a filled-in
+          one beside the pickers that do dim (the label is not the input's `peer`,
+          so it is dimmed by hand above). */}
+      <div ref={fieldRef} className={cn("relative", disabled && "cursor-not-allowed opacity-50")}>
         <input
           id={fieldId}
           value={shown}
           placeholder={placeholder}
-          // The visual label is a floating <span>, not a <label for>, so without this
-          // the field has NO accessible name — it announces its value and nothing
-          // else. Just the label, never "label: value" the way a trigger button has
-          // to compose it: an input already exposes its value separately.
-          aria-label={ariaLabel ?? (typeof label === "string" ? label : undefined)}
+          // The caller's name, over the <label for> above. Just the label, never
+          // "label: value" the way a trigger button has to compose it: an input
+          // already exposes its value separately.
+          aria-label={ariaLabel}
           role="combobox"
           aria-expanded={open}
           // Required by the role, and the half that was missing: the field said it
@@ -877,15 +920,17 @@ export function InlineEntityCombobox<V extends string | number>({
             setActive(-1);
           }}
           onKeyDown={(e) => {
+            // Disabled rows are passed over; Up from "nothing highlighted" lands on
+            // the first takeable row, as it always landed on row 0.
             if (e.key === "ArrowDown") {
               e.preventDefault();
               setOpen(true);
-              setActive((i) => Math.min(i + 1, matches.length - 1));
+              setActive((i) => stepEnabled(matches, i, 1));
             } else if (e.key === "ArrowUp") {
               e.preventDefault();
-              setActive((i) => Math.max(i - 1, 0));
+              setActive((i) => (i < 0 ? stepEnabled(matches, -1, 1) : stepEnabled(matches, i, -1)));
             } else if (e.key === "Enter") {
-              if (open && active >= 0 && active < matches.length) {
+              if (open && isOptionEnabled(matches[active])) {
                 e.preventDefault();
                 commit(matches[active]);
               } else {
@@ -907,7 +952,7 @@ export function InlineEntityCombobox<V extends string | number>({
           className={cn(
             FIELD_BASE,
             label !== undefined && FIELD_FLOATING_PAD,
-            "pr-9",
+            "pe-9",
             field.isInvalid && FIELD_INVALID,
           )}
         />
@@ -927,10 +972,10 @@ export function InlineEntityCombobox<V extends string | number>({
             onClick={() => {
               setText(null);
               close();
-              onChange(null);
+              onChange(clearValue);
             }}
             className={cn(
-              "absolute right-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-[var(--text-placeholder)]",
+              "absolute end-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-[var(--text-placeholder)]",
               "hover:text-[var(--text-secondary)]",
             )}
           >
@@ -947,8 +992,9 @@ export function InlineEntityCombobox<V extends string | number>({
               if (!disabled) setOpen((o) => !o);
             }}
             className={cn(
-              "absolute right-2.5 top-1/2 size-4 -translate-y-1/2 text-[var(--text-placeholder)]",
-              disabled ? "opacity-50" : "cursor-pointer",
+              "absolute end-2.5 top-1/2 size-4 -translate-y-1/2 text-[var(--text-placeholder)]",
+              // The box above does the dimming; dimming here too would halve it again.
+              !disabled && "cursor-pointer",
             )}
           />
         )}
@@ -989,8 +1035,13 @@ export function InlineEntityCombobox<V extends string | number>({
                     type="button"
                     role="option"
                     aria-selected={o.value === value}
+                    aria-disabled={o.disabled || undefined}
                     onClick={() => commit(o)}
-                    className={cn(SHEET_ROW_CLASS, o.value === value && "font-medium")}
+                    className={cn(
+                      SHEET_ROW_CLASS,
+                      o.value === value && "font-medium",
+                      o.disabled && DISABLED_ROW_CLASS,
+                    )}
                   >
                     {o.label}
                   </button>
@@ -1030,25 +1081,30 @@ export function InlineEntityCombobox<V extends string | number>({
                   // `aria-activedescendant`.
                   role="option"
                   aria-selected={o.value === value}
+                  aria-disabled={o.disabled || undefined}
                   tabIndex={-1}
                   onMouseDown={(e) => {
                     // mousedown (not click) so the input's blur can't close the
-                    // list before the selection registers.
+                    // list before the selection registers. Prevented on a disabled
+                    // row too, so pressing one leaves the field focused and open.
                     e.preventDefault();
                     commit(o);
                   }}
-                  onMouseEnter={() => setActive(i)}
+                  onMouseEnter={() => {
+                    if (!o.disabled) setActive(i);
+                  }}
                   className={cn(
-                    rowClass(i === active),
+                    rowClass(i === active && !o.disabled),
+                    o.disabled && DISABLED_ROW_CLASS,
                     // Indented under its heading, so the hierarchy is readable at a
                     // glance instead of inferred from grey trailing text.
-                    o.group && "pl-6",
+                    o.group && "ps-6",
                     o.value === value && "font-medium",
                   )}
                 >
                   {o.label}
                   {o.sublabel && (
-                    <span className="ml-2 text-xs text-[var(--text-placeholder)]">
+                    <span className="ms-2 text-xs text-[var(--text-placeholder)]">
                       {o.sublabel}
                     </span>
                   )}

package/src/components/currency-select.tsx

@@ -215,7 +215,7 @@ export function CurrencySelect({
         aria-controls={listboxId}
         aria-expanded={open}
         aria-invalid={invalid || undefined}
-        className={cn(FIELD_TRIGGER, "pr-9", label !== undefined && FIELD_FLOATING_PAD, invalid && FIELD_INVALID)}
+        className={cn(FIELD_TRIGGER, "pe-9", label !== undefined && FIELD_FLOATING_PAD, invalid && FIELD_INVALID)}
       >
         {/* The trigger stays COMPACT — flag + code only — so it never clips in a
             narrow field; the full names live in the (wider) popup (feedback
@@ -235,10 +235,10 @@ export function CurrencySelect({
       {open && (
         <DropdownPanel
           // At least as wide as the trigger, but grows to fit the full currency
-          // names and caps so it never runs off-screen. RIGHT-aligned so it grows
-          // leftward instead of pushing the page width when there's content to the
-          // right of the field (feedback #308).
-          className="right-0 min-w-full w-max max-w-[min(20rem,calc(100vw-2rem))]"
+          // names and caps so it never runs off-screen. END-aligned so it grows
+          // toward the start instead of pushing the page width when there's content
+          // after the field (feedback #308).
+          className="end-0 min-w-full w-max max-w-[min(20rem,calc(100vw-2rem))]"
           empty={filtered.length === 0}
           listProps={{ id: listboxId }}
           header={
@@ -261,7 +261,7 @@ export function CurrencySelect({
                       setOpen(false);
                     }}
                     className={cn(
-                      "flex w-full items-center justify-between gap-2 px-3 py-2 text-sm text-left hover:bg-[var(--bg-hover)]",
+                      "flex w-full items-center justify-between gap-2 px-3 py-2 text-sm text-start hover:bg-[var(--bg-hover)]",
                       active && "bg-[var(--bg-active)]",
                     )}
                   >