UN-4301 [FEAT] Add the v1 selection inputs: Select, Combobox, MultiSelect and SegmentedControl (P1-T04)

frontend/src/v1/README.md

@@ -108,6 +108,23 @@ is convention.
 - `CodeEditor` uses Monaco from its default CDN, as v0 does. Never call
   `loader.config()` in v1: the loader is shared with v0.
 
+## Selection inputs
+
+- Dropdowns, searchable pickers, chip inputs and segmented switches come
+  from `@v1/components/ui/select` (`Select`, `Combobox`, `MultiSelect`,
+  `SegmentedControl`, `Chip`); its README lists every prop and the keyboard.
+  Do not build another dropdown, picker or chip input.
+- Pick by list size: `Select` for a short, known list (under about 50
+  options; it renders every one), `Combobox` for a long or server-loaded
+  list (`loadOptions`), `MultiSelect` for several values, and
+  `SegmentedControl` for 2 to 5 always-visible options.
+- `Select`, `Combobox` and `MultiSelect` take `SelectOption`, and
+  `SegmentedControl` takes `SegmentedOption`; the folder README lists their
+  fields. A provider or connector logo goes in a `SelectOption`'s `leading`
+  as `<ProviderLogo decorative … />` from `@v1/components/ui/BrandMark`.
+- Until P1-T06's `Field` lands, name them with `aria-label` or
+  `aria-labelledby`; do not put them inside `Field`.
+
 ## Version switch and route registry
 
 v0's router (`routes/Router.jsx`) wraps its routes in `VersionSwitch`, which

frontend/src/v1/components/ui/select/Chip.test.tsx

@@ -0,0 +1,45 @@
+import { screen } from "@testing-library/react";
+import { renderV1 } from "@v1/test";
+import { expect, it, vi } from "vitest";
+import { Chip } from "./Chip";
+
+it("renders the label with a remove button named after it", async () => {
+  const onRemove = vi.fn();
+  const { user } = renderV1(<Chip label="GPT-4o" onRemove={onRemove} />);
+  const chip = document.querySelector('[data-slot="chip"]');
+  expect(chip?.textContent).toBe("GPT-4o");
+  const remove = screen.getByRole("button", { name: "Remove GPT-4o" });
+  expect(remove.getAttribute("type")).toBe("button");
+  await user.click(remove);
+  expect(onRemove).toHaveBeenCalledTimes(1);
+});
+
+it("disables the remove button when the chip is disabled", async () => {
+  const onRemove = vi.fn();
+  const { user } = renderV1(
+    <Chip label="GPT-4o" onRemove={onRemove} disabled />,
+  );
+  const remove = screen.getByRole("button", { name: "Remove GPT-4o" });
+  expect((remove as HTMLButtonElement).disabled).toBe(true);
+  await user.click(remove);
+  expect(onRemove).not.toHaveBeenCalled();
+});
+
+it("has no remove button without onRemove", () => {
+  renderV1(<Chip label="GPT-4o" />);
+  expect(screen.queryByRole("button")).toBeNull();
+  expect(screen.getByText("GPT-4o")).toBeTruthy();
+});
+
+it("takes the remove button out of the tab order when not removeFocusable", async () => {
+  const onRemove = vi.fn();
+  const { user, rerender } = renderV1(
+    <Chip label="GPT-4o" onRemove={onRemove} />,
+  );
+  const remove = () => screen.getByRole("button", { name: "Remove GPT-4o" });
+  expect(remove().tabIndex).toBe(0);
+  rerender(<Chip label="GPT-4o" onRemove={onRemove} removeFocusable={false} />);
+  expect(remove().tabIndex).toBe(-1);
+  await user.click(remove());
+  expect(onRemove).toHaveBeenCalledTimes(1);
+});

frontend/src/v1/components/ui/select/Chip.tsx

@@ -0,0 +1,55 @@
+import { cn } from "@v1/lib/cn";
+import { ACTION_ICONS } from "@v1/lib/icons";
+import type { JSX } from "react";
+
+const RemoveIcon = ACTION_ICONS.close;
+
+export type ChipProps = Readonly<{
+  label: string;
+  /** Shows a remove button named "Remove {label}". */
+  onRemove?: () => void;
+  /**
+   * Whether the remove button is a tab stop. Default true; false keeps it
+   * clickable and named but out of the tab order, for a field whose keyboard
+   * removes chips another way (MultiSelect: Backspace).
+   */
+  removeFocusable?: boolean;
+  disabled?: boolean;
+  className?: string;
+}>;
+
+/**
+ * A selected value in a MultiSelect, with an optional remove button, which
+ * `removeFocusable={false}` takes out of the tab order.
+ */
+export function Chip({
+  label,
+  onRemove,
+  removeFocusable = true,
+  disabled,
+  className,
+}: ChipProps): JSX.Element {
+  return (
+    <span
+      data-slot="chip"
+      className={cn(
+        "ui:inline-flex ui:h-5 ui:max-w-full ui:items-center ui:gap-1 ui:rounded-sm ui:bg-muted ui:pl-1.75 ui:pr-0.5 ui:text-caption ui:font-medium ui:text-muted-foreground",
+        className,
+      )}
+    >
+      <span className="ui:truncate">{label}</span>
+      {onRemove ? (
+        <button
+          type="button"
+          aria-label={`Remove ${label}`}
+          tabIndex={removeFocusable ? undefined : -1}
+          disabled={disabled}
+          onClick={onRemove}
+          className="ui:flex ui:size-4 ui:shrink-0 ui:cursor-pointer ui:items-center ui:justify-center ui:rounded-sm ui:border-0 ui:bg-transparent ui:p-0 ui:text-muted-foreground ui:hover:bg-accent ui:hover:text-foreground ui:focus-visible:focus-ring"
+        >
+          <RemoveIcon aria-hidden className="ui:size-3" />
+        </button>
+      ) : null}
+    </span>
+  );
+}