@mlola-ui/registry 1.0.0

package/snapshot/source/packages/components/status-icon/status-icon.tsx

@@ -0,0 +1,76 @@
+import * as React from "react";
+import { cx } from "../_internal/react";
+import { STATUS_LABELS, type WorkStatus } from "./labels";
+
+export type { WorkStatus } from "./labels";
+export { STATUS_LABELS, WORK_STATUSES } from "./labels";
+
+export interface StatusIconProps extends Omit<React.SVGAttributes<SVGSVGElement>, "children"> {
+  status: WorkStatus;
+  /** How far along an active status is, 0 to 1; the ring fills to match. */
+  progress?: number;
+  /** The accessible name; defaults to the status label. Pass "" when a visible label sits beside it. */
+  label?: string;
+  size?: string;
+}
+
+const RADIUS = 2.4;
+const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
+
+/**
+ * A work item's status as one glyph: a dashed ring for backlog, an empty
+ * ring for todo, a ring that fills as the work moves through progress and
+ * review, a solid check for done and a solid cross for canceled.
+ */
+export function StatusIcon({ status, progress, label, size = "1em", className, ...props }: StatusIconProps) {
+  const name = label ?? STATUS_LABELS[status];
+  const fill = progress ?? (status === "in-progress" ? 0.5 : status === "in-review" ? 0.75 : 0);
+  return (
+    <svg
+      viewBox="0 0 14 14"
+      width={size}
+      height={size}
+      className={cx("ml-status-icon", className)}
+      data-status={status}
+      role={name ? "img" : undefined}
+      aria-label={name || undefined}
+      aria-hidden={name ? undefined : true}
+      {...props}
+    >
+      {status === "done" || status === "canceled" ? (
+        <>
+          <circle cx="7" cy="7" r="6" fill="currentColor" />
+          {status === "done" ? (
+            <path d="M4.4 7.2 6.2 9 9.7 5.2" fill="none" stroke="var(--ml-status-mark)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+          ) : (
+            <path d="M5 5 9 9M9 5 5 9" fill="none" stroke="var(--ml-status-mark)" strokeWidth="1.5" strokeLinecap="round" />
+          )}
+        </>
+      ) : (
+        <>
+          <circle
+            cx="7"
+            cy="7"
+            r="5.75"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeDasharray={status === "backlog" ? "1.6 1.4" : undefined}
+          />
+          {fill > 0 ? (
+            <circle
+              cx="7"
+              cy="7"
+              r={RADIUS}
+              fill="none"
+              stroke="currentColor"
+              strokeWidth={RADIUS * 2}
+              strokeDasharray={`${Math.min(1, fill) * CIRCUMFERENCE} ${CIRCUMFERENCE}`}
+              transform="rotate(-90 7 7)"
+            />
+          ) : null}
+        </>
+      )}
+    </svg>
+  );
+}

package/snapshot/source/packages/components/stepper/stepper.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import * as React from "react";
+import { IconCheck } from "@mlola-ui/icons";
+import { cx } from "../_internal/react";
+
+export interface StepperStep {
+  label: string;
+  description?: string;
+  optional?: boolean;
+  /** Mark a step that needs attention. */
+  error?: boolean;
+}
+
+export type StepStatus = "complete" | "current" | "upcoming" | "error";
+
+export interface StepperProps {
+  steps: StepperStep[];
+  /** Index of the step in progress. */
+  current: number;
+  /** Makes steps clickable. */
+  onStepChange?: (index: number) => void;
+  /** Linear flows only go back, or one step forward; free ones go anywhere. */
+  linear?: boolean;
+  orientation?: "horizontal" | "vertical";
+  /** The accessible name, such as "Checkout". */
+  label?: string;
+  className?: string;
+}
+
+export function stepStatus(step: StepperStep, index: number, current: number): StepStatus {
+  if (step.error) return "error";
+  if (index < current) return "complete";
+  return index === current ? "current" : "upcoming";
+}
+
+/**
+ * Where someone is in a flow of steps: done steps check off, the current one
+ * is marked, and the line between them fills as they go. Steps can be
+ * clickable, and in a narrow container the row condenses to "Step 2 of 4".
+ */
+export function Stepper({ steps, current, onStepChange, linear = true, orientation = "horizontal", label = "Progress", className }: StepperProps) {
+  const reachable = (index: number) => Boolean(onStepChange) && index !== current && (!linear || index <= current + 1);
+  const progress = steps.length > 1 ? current / (steps.length - 1) : 1;
+  const now = steps[current];
+  return (
+    <nav className={cx("ml-stepper", className)} aria-label={label} data-orientation={orientation}>
+      <p className="ml-stepper-summary" aria-hidden="true">
+        <span>
+          Step {Math.min(current + 1, steps.length)} of {steps.length}
+        </span>
+        <strong>{now?.label}</strong>
+        <span className="ml-stepper-meter" style={{ "--ml-stepper-progress": progress } as React.CSSProperties} />
+      </p>
+      <ol className="ml-stepper-list">
+        {steps.map((step, index) => {
+          const status = stepStatus(step, index, current);
+          const content = (
+            <>
+              <span className="ml-stepper-marker" aria-hidden="true">
+                {status === "complete" ? <IconCheck size="0.8em" /> : status === "error" ? "!" : index + 1}
+              </span>
+              <span className="ml-stepper-text">
+                <span className="ml-stepper-label">{step.label}</span>
+                {step.description || step.optional ? (
+                  <span className="ml-stepper-description">{step.optional ? (step.description ? `${step.description} · Optional` : "Optional") : step.description}</span>
+                ) : null}
+              </span>
+              <span className="ml-visually-hidden">{status === "complete" ? ", completed" : status === "error" ? ", needs attention" : status === "upcoming" ? ", not started" : ""}</span>
+            </>
+          );
+          return (
+            <li key={`${step.label}-${index}`} className="ml-stepper-step" data-status={status} aria-current={status === "current" ? "step" : undefined}>
+              {reachable(index) ? (
+                <button type="button" className="ml-stepper-target" onClick={() => onStepChange?.(index)}>
+                  {content}
+                </button>
+              ) : (
+                <span className="ml-stepper-target">{content}</span>
+              )}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+}

package/snapshot/source/packages/components/table/table.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import * as React from "react";
+import { cx } from "../_internal/react";
+
+type TableSize = "sm" | "md";
+type TableAlign = "left" | "center" | "right";
+export type SortedState = "asc" | "desc" | false;
+interface Sortable { sorted: SortedState; onToggle: () => void; label?: string; }
+interface TableProps extends React.HTMLAttributes<HTMLDivElement> { size?: TableSize; striped?: boolean; }
+const Table = React.forwardRef<HTMLDivElement, TableProps>(
+  ({ size = "md", striped = false, className, children, ...props }, ref) => (
+    <div ref={ref} className={cx("ml-table-container", className)} {...props}>
+      <table data-size={size} data-striped={striped ? "" : undefined} className="ml-table">{children}</table>
+    </div>
+  )
+);
+Table.displayName = "Table";
+const TableCaption = React.forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>(
+  ({ className, ...props }, ref) => <caption ref={ref} className={cx("ml-table-caption", className)} {...props} />
+);
+TableCaption.displayName = "TableCaption";
+const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => <thead ref={ref} className={cx("ml-table-header", className)} {...props} />
+);
+TableHeader.displayName = "TableHeader";
+const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => <tbody ref={ref} className={cx("ml-table-body", className)} {...props} />
+);
+TableBody.displayName = "TableBody";
+const TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => <tfoot ref={ref} className={cx("ml-table-footer", className)} {...props} />
+);
+TableFooter.displayName = "TableFooter";
+const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
+  ({ className, ...props }, ref) => <tr ref={ref} className={cx("ml-table-row", className)} {...props} />
+);
+TableRow.displayName = "TableRow";
+
+interface TableHeadProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
+  align?: TableAlign;
+  sortable?: Sortable;
+}
+const TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(
+  ({ align = "left", sortable, scope = "col", className, children, ...props }, ref) => {
+    const ariaSort = !sortable ? undefined : sortable.sorted === "asc" ? "ascending" : sortable.sorted === "desc" ? "descending" : "none";
+    return (
+      <th ref={ref} scope={scope} aria-sort={ariaSort} data-align={align} className={cx("ml-table-head", className)} {...props}>
+        {sortable ? (
+          <button type="button" onClick={sortable.onToggle} aria-label={sortable.label ?? `Sort by ${String(children)}`} className="ml-table-sort">
+            <span>{children}</span><span aria-hidden="true" data-sort={sortable.sorted || "none"} className="ml-table-sort-icon">{sortable.sorted === "asc" ? "↑" : sortable.sorted === "desc" ? "↓" : "↕"}</span>
+          </button>
+        ) : children}
+      </th>
+    );
+  }
+);
+TableHead.displayName = "TableHead";
+interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> { align?: TableAlign; numeric?: boolean; }
+const TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps>(
+  ({ align = "left", numeric = false, className, ...props }, ref) => <td ref={ref} data-align={numeric ? "right" : align} data-numeric={numeric ? "" : undefined} className={cx("ml-table-cell", className)} {...props} />
+);
+TableCell.displayName = "TableCell";
+
+export { Table, TableCaption, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell };
+export type { TableProps, TableHeadProps, TableCellProps, TableSize, TableAlign, Sortable };

package/snapshot/source/packages/components/tabs/tabs.tsx

@@ -0,0 +1,163 @@
+"use client";
+
+import * as React from "react";
+import { rovingIndex } from "@mlola-ui/behavior/logic";
+import { cx, useControllableState } from "../_internal/react";
+
+export type TabsVariant = "default" | "pills" | "enclosed";
+type TabsOrientation = "horizontal" | "vertical";
+
+interface TabsContextValue {
+  value: string;
+  variant: TabsVariant;
+  orientation: TabsOrientation;
+  prefix: string;
+  select: (value: string) => void;
+  triggers: React.MutableRefObject<Map<string, HTMLButtonElement>>;
+}
+
+const TabsContext = React.createContext<TabsContextValue | null>(null);
+const useTabs = () => {
+  const context = React.useContext(TabsContext);
+  if (!context) throw new Error("Tabs components must be used within Tabs");
+  return context;
+};
+
+export interface TabsProps {
+  defaultValue?: string;
+  value?: string;
+  onValueChange?: (value: string) => void;
+  variant?: TabsVariant;
+  orientation?: TabsOrientation;
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function Tabs({
+  defaultValue = "",
+  value,
+  onValueChange,
+  variant = "default",
+  orientation = "horizontal",
+  children,
+  className,
+}: TabsProps) {
+  const [current, select] = useControllableState({ value, defaultValue, onChange: onValueChange });
+  const triggers = React.useRef(new Map<string, HTMLButtonElement>());
+  const prefix = `tabs-${React.useId().replace(/[^a-zA-Z0-9]/g, "")}`;
+  return (
+    <TabsContext.Provider value={{ value: current, variant, orientation, prefix, select, triggers }}>
+      <div className={cx("ml-tabs", className)} data-variant={variant} data-orientation={orientation}>
+        {children}
+      </div>
+    </TabsContext.Provider>
+  );
+}
+
+export interface TabsListProps {
+  children: React.ReactNode;
+  className?: string;
+  "aria-label"?: string;
+}
+
+export function TabsList({ children, className, "aria-label": ariaLabel }: TabsListProps) {
+  const { orientation } = useTabs();
+  return (
+    <div role="tablist" aria-label={ariaLabel} aria-orientation={orientation} className={cx("ml-tabs-list", className)}>
+      {children}
+    </div>
+  );
+}
+
+export interface TabsTriggerProps {
+  value: string;
+  disabled?: boolean;
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function TabsTrigger({ value, disabled = false, children, className }: TabsTriggerProps) {
+  const context = useTabs();
+  const active = context.value === value;
+  const register = React.useCallback((node: HTMLButtonElement | null) => {
+    if (node) context.triggers.current.set(value, node);
+    else context.triggers.current.delete(value);
+  }, [context.triggers, value]);
+
+  const ordered = () =>
+    Array.from(context.triggers.current.entries()).sort((left, right) =>
+      left[1].compareDocumentPosition(right[1]) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1
+    );
+
+  // The same decision the framework-free runtime makes, so both skip disabled
+  // tabs and wrap identically.
+  const move = (key: string) => {
+    const items = ordered();
+    const index = items.findIndex(([entry]) => entry === value);
+    const target = rovingIndex(items.length, index, key, {
+      horizontal: context.orientation === "horizontal",
+      enabled: (at) => !items[at][1].disabled,
+    });
+    if (target < 0) return;
+    const [nextValue, element] = items[target];
+    element.focus();
+    context.select(nextValue);
+  };
+
+  return (
+    <button
+      ref={register}
+      id={`${context.prefix}-tab-${value}`}
+      type="button"
+      role="tab"
+      aria-selected={active}
+      aria-controls={`${context.prefix}-panel-${value}`}
+      tabIndex={active ? 0 : -1}
+      disabled={disabled}
+      data-state={active ? "active" : "inactive"}
+      className={cx("ml-tabs-trigger", className)}
+      onClick={() => !disabled && context.select(value)}
+      onKeyDown={(event) => {
+        const before = event.key;
+        const items = ordered();
+        const index = items.findIndex(([entry]) => entry === value);
+        if (
+          rovingIndex(items.length, index, before, {
+            horizontal: context.orientation === "horizontal",
+            enabled: (at) => !items[at][1].disabled,
+          }) < 0
+        ) {
+          return;
+        }
+        event.preventDefault();
+        move(before);
+      }}
+    >
+      {children}
+    </button>
+  );
+}
+
+export interface TabsContentProps {
+  value: string;
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function TabsContent({ value, children, className }: TabsContentProps) {
+  const context = useTabs();
+  const active = context.value === value;
+  return (
+    <div
+      id={`${context.prefix}-panel-${value}`}
+      role="tabpanel"
+      aria-labelledby={`${context.prefix}-tab-${value}`}
+      tabIndex={0}
+      hidden={!active}
+      data-state={active ? "active" : "inactive"}
+      className={cx("ml-tabs-content", className)}
+    >
+      {children}
+    </div>
+  );
+}

package/snapshot/source/packages/components/tag-input/tag-input.tsx

@@ -0,0 +1,273 @@
+"use client";
+
+import * as React from "react";
+import { IconX } from "@mlola-ui/icons";
+import { ComboboxList, filterOptions, sideFor, type ComboboxOption } from "../combobox/combobox";
+import { Field, fieldDescription } from "../input/input";
+import { cx } from "../_internal/react";
+
+export interface TagInputProps {
+  value?: string[];
+  defaultValue?: string[];
+  onValueChange?: (tags: string[]) => void;
+  label?: React.ReactNode;
+  hint?: React.ReactNode;
+  error?: React.ReactNode;
+  placeholder?: string;
+  /** Tags to suggest as you type; their labels become the tags. */
+  suggestions?: ComboboxOption[];
+  /** Accept only suggested tags. */
+  restrict?: boolean;
+  /** Return a message to refuse a tag: "Use lowercase letters and dashes". */
+  validate?: (tag: string) => string | null;
+  /** Shape each tag before it is added, such as trimming or lowercasing. */
+  transform?: (tag: string) => string;
+  max?: number;
+  disabled?: boolean;
+  required?: boolean;
+  id?: string;
+  className?: string;
+}
+
+/** Split pasted or typed text into tags on commas, semicolons and new lines. */
+export function splitTags(text: string) {
+  return text
+    .split(/[,;\n\r\t]+/)
+    .map((part) => part.trim())
+    .filter(Boolean);
+}
+
+/**
+ * Many short values in one field: emails, labels, keywords. Enter or a comma
+ * adds a tag, pasting a list adds them all, Backspace on an empty field
+ * marks the last tag and then removes it, and arrows move between tags.
+ * Suggestions, validation and a limit are optional.
+ */
+export function TagInput({
+  value,
+  defaultValue = [],
+  onValueChange,
+  label,
+  hint,
+  error,
+  placeholder = "Add…",
+  suggestions,
+  restrict = false,
+  validate,
+  transform = (tag) => tag.trim(),
+  max,
+  disabled,
+  required,
+  id,
+  className,
+}: TagInputProps) {
+  const autoId = React.useId();
+  const fieldId = id ?? autoId;
+  const listId = `${fieldId}-list`;
+  const [inner, setInner] = React.useState(defaultValue);
+  const tags = value ?? inner;
+  const [text, setText] = React.useState("");
+  const [armed, setArmed] = React.useState<number | null>(null);
+  const [problem, setProblem] = React.useState<string | null>(null);
+  const [announcement, setAnnouncement] = React.useState("");
+  const [open, setOpen] = React.useState(false);
+  const [active, setActive] = React.useState(0);
+  const [side, setSide] = React.useState<"top" | "bottom">("bottom");
+  const control = React.useRef<HTMLDivElement>(null);
+  const input = React.useRef<HTMLInputElement>(null);
+
+  const full = max !== undefined && tags.length >= max;
+  const available = (suggestions ?? []).filter((option) => !tags.some((tag) => tag.toLowerCase() === option.label.toLowerCase()));
+  const shown = filterOptions(available, text);
+
+  const commit = (next: string[]) => {
+    if (value === undefined) setInner(next);
+    onValueChange?.(next);
+  };
+
+  /** Add every candidate that passes; report the first that does not. */
+  const add = (candidates: string[]) => {
+    const next = [...tags];
+    const added: string[] = [];
+    for (const raw of candidates) {
+      const tag = transform(raw);
+      if (!tag) continue;
+      if (max !== undefined && next.length >= max) {
+        setProblem(`Up to ${max} ${max === 1 ? "item" : "items"}.`);
+        break;
+      }
+      if (next.some((existing) => existing.toLowerCase() === tag.toLowerCase())) {
+        setProblem(`“${tag}” is already added.`);
+        continue;
+      }
+      if (restrict && !suggestions?.some((option) => option.label.toLowerCase() === tag.toLowerCase())) {
+        setProblem(`“${tag}” is not one of the options.`);
+        continue;
+      }
+      const message = validate?.(tag);
+      if (message) {
+        setProblem(message);
+        continue;
+      }
+      next.push(tag);
+      added.push(tag);
+    }
+    if (added.length) {
+      commit(next);
+      setAnnouncement(`Added ${added.join(", ")}.`);
+    }
+    return added.length > 0;
+  };
+
+  const remove = (index: number) => {
+    const tag = tags[index];
+    commit(tags.filter((_, position) => position !== index));
+    setAnnouncement(`Removed ${tag}.`);
+    setArmed(null);
+    setProblem(null);
+    input.current?.focus();
+  };
+
+  const submitText = () => {
+    if (open && shown[active] && text.trim()) {
+      add([shown[active].label]);
+      setText("");
+      return;
+    }
+    if (!text.trim()) return;
+    if (add(splitTags(text)) || !restrict) setText("");
+  };
+
+  const onKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    const caretAtStart = event.currentTarget.selectionStart === 0 && event.currentTarget.selectionEnd === 0;
+    if (event.key === "Enter" || event.key === ",") {
+      if (event.nativeEvent.isComposing) return;
+      if (event.key === "Enter" && !text.trim() && !open) return;
+      event.preventDefault();
+      submitText();
+    } else if (event.key === "Backspace" && !text) {
+      event.preventDefault();
+      if (armed !== null) remove(armed);
+      else if (tags.length) setArmed(tags.length - 1);
+    } else if (event.key === "Delete" && armed !== null) {
+      event.preventDefault();
+      remove(armed);
+    } else if (event.key === "ArrowLeft" && caretAtStart && tags.length) {
+      event.preventDefault();
+      setArmed((current) => (current === null ? tags.length - 1 : Math.max(0, current - 1)));
+    } else if (event.key === "ArrowRight" && armed !== null) {
+      event.preventDefault();
+      setArmed((current) => (current === null || current >= tags.length - 1 ? null : current + 1));
+    } else if ((event.key === "ArrowDown" || event.key === "ArrowUp") && suggestions?.length) {
+      event.preventDefault();
+      if (!open) {
+        setSide(sideFor(control.current));
+        setOpen(true);
+        setActive(0);
+      } else if (shown.length) setActive((index) => (index + (event.key === "ArrowDown" ? 1 : -1) + shown.length) % shown.length);
+    } else if (event.key === "Escape") {
+      if (open) {
+        event.preventDefault();
+        setOpen(false);
+      } else setArmed(null);
+    }
+  };
+
+  const message = problem ?? error;
+
+  return (
+    <Field id={fieldId} label={label} hint={hint} error={message ?? undefined} required={required} disabled={disabled} className={cx("ml-tag-input", className)}>
+      <div
+        ref={control}
+        className="ml-tag-input-control"
+        data-disabled={disabled || undefined}
+        data-invalid={message ? "" : undefined}
+        onMouseDown={(event) => {
+          // Clicking the field's empty space puts the caret in the input.
+          if (event.target === event.currentTarget) {
+            event.preventDefault();
+            input.current?.focus();
+          }
+        }}
+      >
+        <ul className="ml-tag-input-tags" aria-label="Added">
+          {tags.map((tag, index) => (
+            <li key={tag} className="ml-tag-input-tag" data-armed={armed === index || undefined}>
+              <span className="ml-tag-input-text">{tag}</span>
+              {disabled ? null : (
+                <button type="button" className="ml-tag-input-remove" tabIndex={-1} aria-label={`Remove ${tag}`} onMouseDown={(event) => event.preventDefault()} onClick={() => remove(index)}>
+                  <IconX aria-hidden="true" size="0.8em" />
+                </button>
+              )}
+            </li>
+          ))}
+        </ul>
+        <input
+          ref={input}
+          id={fieldId}
+          className="ml-tag-input-field"
+          role={suggestions ? "combobox" : undefined}
+          aria-expanded={suggestions ? open : undefined}
+          aria-controls={suggestions ? listId : undefined}
+          aria-autocomplete={suggestions ? "list" : undefined}
+          aria-activedescendant={open && shown.length ? `${listId}-${active}` : undefined}
+          aria-invalid={message ? true : undefined}
+          aria-describedby={fieldDescription(fieldId, { hint, error: message })}
+          value={text}
+          placeholder={full ? "" : placeholder}
+          disabled={disabled || full}
+          autoComplete="off"
+          onChange={(event) => {
+            setText(event.target.value);
+            setArmed(null);
+            setProblem(null);
+            setActive(0);
+            if (suggestions?.length && event.target.value.trim()) {
+              if (!open) setSide(sideFor(control.current));
+              setOpen(true);
+            } else setOpen(false);
+          }}
+          onKeyDown={onKeyDown}
+          onPaste={(event) => {
+            const pasted = event.clipboardData.getData("text/plain");
+            if (splitTags(pasted).length > 1) {
+              event.preventDefault();
+              add(splitTags(pasted));
+            }
+          }}
+          onBlur={() => {
+            setOpen(false);
+            setArmed(null);
+            // A half-typed tag is kept, as people expect when they click away.
+            if (text.trim() && !restrict && add(splitTags(text))) setText("");
+          }}
+        />
+        {max !== undefined ? (
+          <span className="ml-tag-input-count" aria-hidden="true">
+            {tags.length}/{max}
+          </span>
+        ) : null}
+        {open && suggestions ? (
+          <ComboboxList
+            id={listId}
+            options={shown}
+            active={active}
+            onActiveChange={setActive}
+            onPick={(option) => {
+              add([option.label]);
+              setText("");
+              setOpen(false);
+              input.current?.focus();
+            }}
+            empty={restrict ? "No matching options" : `Press Enter to add “${text.trim()}”`}
+            side={side}
+            grouped={false}
+          />
+        ) : null}
+      </div>
+      <p className="ml-visually-hidden" role="status" aria-live="polite">
+        {announcement}
+      </p>
+    </Field>
+  );
+}