@mlola-ui/registry 1.0.13 → 1.1.0

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

@@ -2,7 +2,7 @@
 
 import * as React from "react";
 import { IconCheck, IconChevronDown, IconPlus, IconX } from "@mlola-ui/icons";
-import { Field, fieldDescription } from "../input/input";
+import { Field, fieldDescription, type FormControlProps } from "../input/input";
 import { cx } from "../_internal/react";
 import { matchCommand } from "../_internal/match";
 import { revealIn } from "../_internal/scroll";
@@ -54,13 +54,11 @@ export function ComboboxList({ id, options, active, onActiveChange, onPick, isSe
   React.useEffect(() => {
     revealIn(list.current, list.current?.querySelector<HTMLElement>("[data-highlighted]") ?? null);
   }, [active, options]);
-  let lastGroup: string | undefined;
   return (
     <div className="ml-combobox-popover" data-side={side} onMouseDown={(event) => event.preventDefault()}>
       <ul ref={list} id={id} role="listbox" aria-label={label} className="ml-combobox-list">
         {options.map((option, index) => {
-          const heading = grouped && option.group && option.group !== lastGroup ? option.group : null;
-          lastGroup = option.group;
+          const heading = grouped && option.group && option.group !== options[index - 1]?.group ? option.group : null;
           const selected = isSelected?.(option) ?? false;
           return (
             <React.Fragment key={option.value}>
@@ -148,7 +146,7 @@ export function sideFor(element: HTMLElement | null, room = 280): "top" | "botto
   return side;
 }
 
-export interface ComboboxProps {
+export interface ComboboxProps extends FormControlProps {
   options: ComboboxOption[];
   value?: string | null;
   defaultValue?: string | null;
@@ -162,9 +160,6 @@ export interface ComboboxProps {
   /** Shown when nothing matches. */
   emptyMessage?: React.ReactNode;
   clearable?: boolean;
-  disabled?: boolean;
-  required?: boolean;
-  id?: string;
   className?: string;
 }
 
@@ -188,6 +183,11 @@ export const Combobox = React.forwardRef<HTMLInputElement, ComboboxProps>(functi
   disabled,
   required,
   id,
+  name,
+  form,
+  "aria-label": ariaLabel,
+  "aria-labelledby": labelledBy,
+  "aria-describedby": describedBy,
   className,
 }: ComboboxProps, ref) {
   const autoId = React.useId();
@@ -204,9 +204,12 @@ export const Combobox = React.forwardRef<HTMLInputElement, ComboboxProps>(functi
   const typed = React.useRef(false);
 
   // Show the chosen label whenever the value changes from outside or the list closes.
-  React.useEffect(() => {
-    if (!open) setQuery(chosen?.label ?? "");
-  }, [chosen?.label, open]);
+  const chosenLabel = chosen?.label ?? "";
+  const [synced, setSynced] = React.useState({ label: chosenLabel, open });
+  if (synced.label !== chosenLabel || synced.open !== open) {
+    setSynced({ label: chosenLabel, open });
+    if (!open) setQuery(chosenLabel);
+  }
 
   const shown = typed.current ? filterOptions(options, query) : options;
   const exact = options.some((option) => option.label.toLowerCase() === query.trim().toLowerCase());
@@ -270,7 +273,7 @@ export const Combobox = React.forwardRef<HTMLInputElement, ComboboxProps>(functi
   };
 
   return (
-    <Field id={fieldId} label={label} hint={hint} error={error} required={required} disabled={disabled} className={cx("ml-combobox", className)}>
+    <Field id={fieldId} label={label} hint={hint} error={error} required={required} disabled={disabled} name={name} form={form} value={current} className={cx("ml-combobox", className)}>
       <div ref={control} className="ml-combobox-control" data-open={open || undefined}>
         {chosen?.leading && !typed.current ? (
           <span className="ml-combobox-value-leading" aria-hidden="true">
@@ -289,7 +292,9 @@ export const Combobox = React.forwardRef<HTMLInputElement, ComboboxProps>(functi
           aria-autocomplete="list"
           aria-activedescendant={open && count ? `${listId}-${active}` : undefined}
           aria-invalid={error ? true : undefined}
-          aria-describedby={fieldDescription(fieldId, { hint, error })}
+          aria-label={ariaLabel}
+          aria-labelledby={labelledBy}
+          aria-describedby={fieldDescription(fieldId, { hint, error, describedBy })}
           value={query}
           placeholder={placeholder}
           disabled={disabled}

package/snapshot/source/packages/components/command-menu/command-menu.tsx

@@ -112,7 +112,8 @@ export function CommandMenu({ groups, open, defaultOpen = false, onOpenChange, h
     item.onSelect();
   };
 
-  let index = -1;
+  // Where each group's rows start in the flat list the arrows move through.
+  const starts = results.map((_, group) => results.slice(0, group).reduce((count, previous) => count + previous.items.length, 0));
   return (
     <Modal open={isOpen} onClose={close} label={label} size="md" className="ml-command">
       <div className="ml-command-search">
@@ -144,14 +145,13 @@ export function CommandMenu({ groups, open, defaultOpen = false, onOpenChange, h
         />
       </div>
       <div id={listId} role="listbox" aria-label="Commands" className="ml-command-list">
-        {results.map((group) => (
+        {results.map((group, groupIndex) => (
           <div key={group.heading} role="group" aria-label={group.heading} className="ml-command-group">
             <p className="ml-command-heading" aria-hidden="true">
               {group.heading}
             </p>
-            {group.items.map(({ item, match }) => {
-              index += 1;
-              const position = index;
+            {group.items.map(({ item, match }, itemIndex) => {
+              const position = starts[groupIndex] + itemIndex;
               return (
                 <div
                   key={item.id}

package/snapshot/source/packages/components/context-menu/context-menu.tsx

@@ -159,7 +159,7 @@ export function ContextMenu({ children, items, label = "Actions", disabled, clas
       {children}
       {state && portal
         ? createPortal(
-            <div ref={menu} className="ml-context-menu" role="menu" aria-label={label} tabIndex={-1} onKeyDown={onMenuKey} style={{ left: state.x, top: state.y }}>
+            <div ref={menu} data-ml-portal="" className="ml-context-menu" role="menu" aria-label={label} tabIndex={-1} onKeyDown={onMenuKey} style={{ left: state.x, top: state.y }}>
               {state.items.map((item, index) => (
                 <React.Fragment key={`${item.label}-${index}`}>
                   {item.separatorBefore ? <div className="ml-context-menu-separator" role="separator" /> : null}

package/snapshot/source/packages/components/date-picker/date-picker.tsx

@@ -3,7 +3,7 @@
 import * as React from "react";
 import { IconCalendar, IconX } from "@mlola-ui/icons";
 import { Calendar, addDays, isDateBlocked, rangeProblem, today as todayOf, type DateMatchers, type DateRange, type ISODate } from "../calendar/calendar";
-import { Field, fieldDescription } from "../input/input";
+import { Field, fieldDescription, type FormControlProps } from "../input/input";
 import { Popover } from "../popover/popover";
 import { cx } from "../_internal/react";
 import { startOfMonth, toTime } from "../calendar/dates";
@@ -15,7 +15,7 @@ export interface DatePreset {
   value: ISODate | DateRange;
 }
 
-interface BaseProps {
+interface BaseProps extends FormControlProps {
   label?: React.ReactNode;
   hint?: React.ReactNode;
   error?: React.ReactNode;
@@ -33,9 +33,6 @@ interface BaseProps {
   locale?: string;
   /** Show a button that empties the field. */
   clearable?: boolean;
-  disabled?: boolean;
-  required?: boolean;
-  id?: string;
   /** Today's date, for server rendering. */
   today?: ISODate;
   className?: string;
@@ -63,6 +60,9 @@ interface RangeProps {
 
 export type DatePickerProps = BaseProps & (SingleProps | RangeProps);
 
+/** What the form submits: the date, or a range as an ISO 8601 interval ("2026-09-01/2026-09-07"). */
+const submitted = (value: ISODate | DateRange | null) => (value === null ? "" : typeof value === "string" ? value : `${value.from ?? ""}/${value.to ?? ""}`);
+
 /** Ranges people reach for, relative to today. */
 export function rangePresets(today = todayOf()): DatePreset[] {
   return [
@@ -79,7 +79,8 @@ export function rangePresets(today = todayOf()): DatePreset[] {
  * the value stays an ISO date, so it round-trips through forms and APIs.
  */
 export const DatePicker = React.forwardRef<HTMLButtonElement, DatePickerProps>(function DatePicker(props: DatePickerProps, ref) {
-  const { label, hint, error, placeholder, min, max, disabledDates, enabledDates, isDisabled, presets, weekStart, locale = "en", clearable = true, disabled, required, id, today, className } = props;
+  const { label, hint, error, placeholder, min, max, disabledDates, enabledDates, isDisabled, presets, weekStart, locale = "en", clearable = true, disabled, required, id, name, form, today, className } = props;
+  const { "aria-label": ariaLabel, "aria-labelledby": labelledBy, "aria-describedby": describedBy } = props;
   const mode = props.mode ?? "single";
   const autoId = React.useId();
   const fieldId = id ?? autoId;
@@ -117,8 +118,10 @@ export const DatePicker = React.forwardRef<HTMLButtonElement, DatePickerProps>(f
       className="ml-input ml-date-picker-trigger"
       data-empty={text ? undefined : ""}
       disabled={disabled}
-      aria-invalid={error ? true : undefined}
-      aria-describedby={fieldDescription(fieldId, { hint, error })}
+      data-invalid={error ? "" : undefined}
+      aria-label={ariaLabel}
+      aria-labelledby={labelledBy}
+      aria-describedby={fieldDescription(fieldId, { hint, error, describedBy })}
     >
       <IconCalendar aria-hidden="true" size="1em" className="ml-date-picker-icon" />
       <span className="ml-date-picker-value">{text ?? placeholder ?? (mode === "range" ? "Pick a range" : "Pick a date")}</span>
@@ -126,7 +129,7 @@ export const DatePicker = React.forwardRef<HTMLButtonElement, DatePickerProps>(f
   );
 
   return (
-    <Field id={fieldId} label={label} hint={hint} error={error} required={required} disabled={disabled} className={cx("ml-date-picker", className)}>
+    <Field id={fieldId} label={label} hint={hint} error={error} required={required} disabled={disabled} name={name} form={form} value={submitted(value)} className={cx("ml-date-picker", className)}>
       <div className="ml-date-picker-control">
         <Popover trigger={trigger} label={typeof label === "string" ? label : mode === "range" ? "Choose dates" : "Choose a date"} open={open} onOpenChange={setOpen} side="bottom" align="start" className="ml-date-picker-popover">
           <div className="ml-date-picker-panel" data-presets={shownPresets.length ? "" : undefined}>

package/snapshot/source/packages/components/empty-state/empty-state.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { cx } from "../_internal/react";
+import { cx, Heading, type HeadingLevel } from "../_internal/react";
 
 export interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
   /** An icon or small illustration. */
@@ -10,13 +10,15 @@ export interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLElement>,
   actions?: React.ReactNode;
   /** "page" centers in a large area; "inline" sits inside a card or table. */
   size?: "inline" | "page";
+  /** The level of the title's heading, so the empty state fits the page's outline. */
+  headingLevel?: HeadingLevel;
 }
 
 /**
  * What a screen says when there is nothing to show yet: why, and what to do
  * next. Never a blank area and never an apology without a way forward.
  */
-export function EmptyState({ icon, title, description, actions, size = "inline", className, ...props }: EmptyStateProps) {
+export function EmptyState({ icon, title, description, actions, size = "inline", headingLevel, className, ...props }: EmptyStateProps) {
   return (
     <section className={cx("ml-empty", className)} data-size={size} {...props}>
       {icon ? (
@@ -24,7 +26,7 @@ export function EmptyState({ icon, title, description, actions, size = "inline",
           {icon}
         </span>
       ) : null}
-      <h3 className="ml-empty-title">{title}</h3>
+      <Heading level={headingLevel} className="ml-empty-title">{title}</Heading>
       {description ? <p className="ml-empty-description">{description}</p> : null}
       {actions ? <div className="ml-empty-actions">{actions}</div> : null}
     </section>

package/snapshot/source/packages/components/hover-card/hover-card.tsx

@@ -2,7 +2,7 @@
 
 import * as React from "react";
 import { createPortal } from "react-dom";
-import { cx } from "../_internal/react";
+import { composeRefs, cx } from "../_internal/react";
 import { useFloating, usePortalNode, type Align, type Side } from "../_internal/floating";
 
 export interface HoverCardProps {
@@ -52,12 +52,7 @@ export function HoverCard({ children, content, side = "bottom", align = "start",
   const child = children.props as Record<string, unknown> & { ref?: React.Ref<HTMLElement> };
   const call = (name: string, event: unknown) => (child[name] as ((value: unknown) => void) | undefined)?.(event);
   const trigger = React.cloneElement(children, {
-    ref: (node: HTMLElement | null) => {
-      anchor.current = node;
-      const own = child.ref;
-      if (typeof own === "function") own(node);
-      else if (own && typeof own === "object") (own as React.MutableRefObject<HTMLElement | null>).current = node;
-    },
+    ref: (node: HTMLElement | null) => composeRefs(anchor, child.ref)(node),
     "aria-describedby": open ? id : child["aria-describedby"],
     onPointerEnter: (event: React.PointerEvent) => {
       call("onPointerEnter", event);
@@ -84,6 +79,7 @@ export function HoverCard({ children, content, side = "bottom", align = "start",
         ? createPortal(
             <div
               ref={layer}
+              data-ml-portal=""
               id={id}
               role="tooltip"
               className={cx("ml-hover-card", className)}

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

@@ -6,9 +6,9 @@ import { cx } from "../_internal/react";
 export type InputVariant = "default" | "filled" | "subtle";
 type InputSize = "sm" | "md" | "lg";
 export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & {
-  label?: string;
-  hint?: string;
-  error?: string;
+  label?: React.ReactNode;
+  hint?: React.ReactNode;
+  error?: React.ReactNode;
   variant?: InputVariant;
   size?: InputSize;
   containerClassName?: string;
@@ -18,6 +18,28 @@ export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size
   trailing?: React.ReactNode;
 };
 
+/**
+ * What every form control built from more than a native input accepts, so
+ * it works like a native control: an outside `<label htmlFor>` names it,
+ * a form submits its value, and a caller can name and describe it.
+ */
+export interface FormControlProps {
+  /** The control's id, for an outside `<label htmlFor>`; the label, hint and error are tied to it. */
+  id?: string;
+  /** Submits the value with the form, as a native control would. */
+  name?: string;
+  /** The id of a form elsewhere on the page to submit the value with. */
+  form?: string;
+  required?: boolean;
+  disabled?: boolean;
+  /** Names the control when there is no `label`. */
+  "aria-label"?: string;
+  /** Names the control by other elements, such as a heading above a group. */
+  "aria-labelledby"?: string;
+  /** More description, read with the hint and the error. */
+  "aria-describedby"?: string;
+}
+
 export interface FieldProps {
   /** The control's id; the label, hint and error are tied to it. */
   id: string;
@@ -26,6 +48,10 @@ export interface FieldProps {
   error?: React.ReactNode;
   required?: boolean;
   disabled?: boolean;
+  /** With `name`, the value the form submits: one entry per value, like a native control. */
+  name?: string;
+  form?: string;
+  value?: string | readonly string[] | null;
   className?: string;
   children: React.ReactNode;
 }
@@ -40,22 +66,33 @@ export function fieldDescription(id: string, { hint, error, describedBy }: { hin
  * error announced when it appears. Input, Textarea, OTP Input and Dropzone
  * all use it, so labels and errors behave identically everywhere.
  */
-export function Field({ id, label, hint, error, required, disabled, className, children }: FieldProps) {
+export function Field({ id, label, hint, error, required, disabled, name, form, value, className, children }: FieldProps) {
   return (
     <div className={cx("ml-input-field", className)} data-disabled={disabled ? "" : undefined} data-invalid={error ? "" : undefined}>
       {label ? (
-        <label htmlFor={id} className="ml-input-label">
+        <label id={`${id}-label`} htmlFor={id} className="ml-input-label">
           {label}
           {required ? <span aria-hidden="true" className="ml-required-mark">*</span> : null}
         </label>
       ) : null}
       {children}
+      <FieldValue name={name} form={form} value={value} disabled={disabled} />
       {hint ? <p id={`${id}-hint`} className="ml-input-hint">{hint}</p> : null}
       {error ? <p id={`${id}-error`} role="alert" className="ml-input-error">{error}</p> : null}
     </div>
   );
 }
 
+/**
+ * What a control that is not a native input submits with its form: a hidden
+ * input per value, disabled with the control so a disabled field is not sent.
+ */
+export function FieldValue({ name, form, value, disabled }: { name?: string; form?: string; value?: string | readonly string[] | null; disabled?: boolean }) {
+  if (!name) return null;
+  const values = typeof value === "string" ? [value] : (value ?? [""]);
+  return values.map((entry, index) => <input key={index} type="hidden" name={name} form={form} value={entry} disabled={disabled} />);
+}
+
 export const Input = React.forwardRef<HTMLInputElement, InputProps>(
   ({ label, hint, error, variant = "default", size = "md", containerClassName, leading, trailing, className, id, disabled, required, "aria-describedby": describedBy, ...props }, ref) => {
     const generated = React.useId();
@@ -72,6 +109,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
         for (const affix of affixes) element.style.setProperty(affix.classList.contains("ml-input-leading") ? "--ml-input-leading" : "--ml-input-trailing", `${affix.offsetWidth}px`);
       };
       measure();
+      if (typeof ResizeObserver === "undefined") return;
       const observer = new ResizeObserver(measure);
       affixes.forEach((affix) => observer.observe(affix));
       return () => observer.disconnect();

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

@@ -8,7 +8,7 @@ import { IconX } from "@mlola-ui/icons";
 
 export type ModalSize = "sm" | "md" | "lg" | "xl" | "full";
 
-export interface ModalProps {
+export interface ModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "role" | "children"> {
   open: boolean;
   onClose: () => void;
   size?: ModalSize;
@@ -16,12 +16,16 @@ export interface ModalProps {
   role?: "dialog" | "alertdialog";
   closeOnBackdrop?: boolean;
   closeOnEscape?: boolean;
+  /** Names the dialog when it has no `ModalHeader`; a header's title names it otherwise. */
   label?: string;
-  description?: string;
-  className?: string;
+  /** Read after the name when the dialog opens; not shown. */
+  description?: React.ReactNode;
   children: React.ReactNode;
 }
 
+/** The id a `ModalHeader` gives its title, so the dialog is named by what it shows. */
+const TitleId = React.createContext<string | undefined>(undefined);
+
 export function Modal({
   open,
   onClose,
@@ -29,17 +33,21 @@ export function Modal({
   role = "dialog",
   closeOnBackdrop = role !== "alertdialog",
   closeOnEscape = true,
-  label = "Dialog",
+  label,
   description,
   className,
   children,
+  ...props
 }: ModalProps) {
   const panelRef = React.useRef<HTMLDivElement>(null);
   const portal = useDialogLayer({ open, onClose, closeOnEscape, panelRef });
+  const titleId = React.useId();
   const descriptionId = React.useId();
   if (!portal || !open) return null;
+  const named = label ?? props["aria-label"] ?? props["aria-labelledby"];
   return createPortal(
     <div
+      data-ml-portal=""
       className="ml-modal-overlay"
       data-state="open"
       onMouseDown={(event) => {
@@ -47,18 +55,20 @@ export function Modal({
       }}
     >
       <div
+        aria-labelledby={named ? undefined : titleId}
+        aria-describedby={description ? descriptionId : undefined}
+        {...props}
         ref={panelRef}
         role={role}
         aria-modal="true"
-        aria-label={label}
-        aria-describedby={description ? descriptionId : undefined}
+        aria-label={label ?? props["aria-label"]}
         tabIndex={-1}
         data-size={size}
         data-state="open"
         className={cx("ml-modal", className)}
       >
         {description ? <p id={descriptionId} className="ml-visually-hidden">{description}</p> : null}
-        {children}
+        <TitleId.Provider value={titleId}>{children}</TitleId.Provider>
       </div>
     </div>,
     portal
@@ -66,15 +76,17 @@ export function Modal({
 }
 
 export interface ModalHeaderProps {
-  title: string;
+  /** The dialog's visible title, which also names it for assistive technology. */
+  title: React.ReactNode;
   onClose?: () => void;
   className?: string;
 }
 
 export function ModalHeader({ title, onClose, className }: ModalHeaderProps) {
+  const titleId = React.useContext(TitleId);
   return (
     <div className={cx("ml-modal-header", className)}>
-      <h2 className="ml-modal-title">{title}</h2>
+      <h2 id={titleId} className="ml-modal-title">{title}</h2>
       {onClose ? (
         <button type="button" onClick={onClose} aria-label="Close dialog" className="ml-modal-close">
           <IconX aria-hidden="true" />

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

@@ -2,13 +2,13 @@
 
 import * as React from "react";
 import { IconMinus, IconPlus } from "@mlola-ui/icons";
-import { Field, fieldDescription } from "../input/input";
+import { Field, fieldDescription, type FormControlProps } from "../input/input";
 import { composeRefs, cx } from "../_internal/react";
 import { parseNumber, settle, stepValue } from "./number";
 
 export { parseNumber, settle, stepValue } from "./number";
 
-export interface NumberInputProps {
+export interface NumberInputProps extends FormControlProps {
   value?: number | null;
   defaultValue?: number | null;
   onValueChange?: (value: number | null) => void;
@@ -28,9 +28,6 @@ export interface NumberInputProps {
   locale?: string;
   /** Show − and + beside the value. */
   buttons?: boolean;
-  disabled?: boolean;
-  required?: boolean;
-  id?: string;
   className?: string;
 }
 
@@ -59,6 +56,11 @@ export const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
   disabled,
   required,
   id,
+  name,
+  form,
+  "aria-label": ariaLabel,
+  "aria-labelledby": labelledBy,
+  "aria-describedby": describedBy,
   className,
 }: NumberInputProps, ref) {
   const autoId = React.useId();
@@ -141,7 +143,7 @@ export const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
   const atMax = current !== null && max !== undefined && current >= max;
 
   return (
-    <Field id={fieldId} label={label} hint={hint} error={error} required={required} disabled={disabled} className={cx("ml-number-input", className)}>
+    <Field id={fieldId} label={label} hint={hint} error={error} required={required} disabled={disabled} name={name} form={form} value={current === null ? "" : String(current)} className={cx("ml-number-input", className)}>
       <div className="ml-number-input-control" data-disabled={disabled || undefined} data-invalid={error ? "" : undefined}>
         <input
           ref={composeRefs(input, ref)}
@@ -155,7 +157,9 @@ export const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
           aria-valuemax={max}
           aria-valuetext={current === null ? undefined : display.format(current)}
           aria-invalid={error ? true : undefined}
-          aria-describedby={fieldDescription(fieldId, { hint, error })}
+          aria-label={ariaLabel}
+          aria-labelledby={labelledBy}
+          aria-describedby={fieldDescription(fieldId, { hint, error, describedBy })}
           value={shown}
           placeholder={placeholder}
           disabled={disabled}

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

@@ -2,24 +2,22 @@
 
 import * as React from "react";
 import { composeRefs, useControllableState } from "../_internal/react";
-import { Field, fieldDescription } from "../input/input";
+import { Field, fieldDescription, type FormControlProps } from "../input/input";
 
-export interface OtpInputProps {
+export interface OtpInputProps extends Omit<FormControlProps, "required"> {
   length?: number;
   value?: string;
   defaultValue?: string;
   onValueChange?: (value: string) => void;
   /** Called once every digit is filled. */
   onComplete?: (value: string) => void;
-  label?: string;
-  hint?: string;
-  error?: string;
+  label?: React.ReactNode;
+  hint?: React.ReactNode;
+  error?: React.ReactNode;
   /** "numeric" (default) or "alphanumeric". */
   mode?: "numeric" | "alphanumeric";
-  disabled?: boolean;
   /** Split the boxes into groups, e.g. 3 for "123 456". */
   groupSize?: number;
-  id?: string;
   className?: string;
 }
 
@@ -41,6 +39,11 @@ export const OtpInput = React.forwardRef<HTMLInputElement, OtpInputProps>(functi
   disabled,
   groupSize,
   id,
+  name,
+  form,
+  "aria-label": ariaLabel,
+  "aria-labelledby": labelledBy,
+  "aria-describedby": describedBy,
   className,
 }: OtpInputProps, ref) {
   const [code, setCode] = useControllableState({ value, defaultValue, onChange: onValueChange });
@@ -67,8 +70,14 @@ export const OtpInput = React.forwardRef<HTMLInputElement, OtpInputProps>(functi
   };
 
   return (
-    <Field id={fieldId} label={label} hint={hint} error={error} disabled={disabled} className={className}>
-      <div className="ml-otp" role="group" aria-label={label ?? `${length}-character code`} data-invalid={error ? "" : undefined}>
+    <Field id={fieldId} label={label} hint={hint} error={error} disabled={disabled} name={name} form={form} value={code} className={className}>
+      <div
+        className="ml-otp"
+        role="group"
+        aria-labelledby={labelledBy ?? (label ? `${fieldId}-label` : undefined)}
+        aria-label={labelledBy || label ? undefined : (ariaLabel ?? `${length}-character code`)}
+        data-invalid={error ? "" : undefined}
+      >
         {Array.from({ length }, (_, index) => (
           <React.Fragment key={index}>
             {groupSize && index > 0 && index % groupSize === 0 ? <span aria-hidden="true" className="ml-otp-separator" /> : null}
@@ -83,7 +92,7 @@ export const OtpInput = React.forwardRef<HTMLInputElement, OtpInputProps>(functi
               autoComplete={index === 0 ? "one-time-code" : "off"}
               aria-label={`Digit ${index + 1} of ${length}`}
               aria-invalid={error ? true : undefined}
-              aria-describedby={index === 0 ? fieldDescription(fieldId, { hint, error }) : undefined}
+              aria-describedby={index === 0 ? fieldDescription(fieldId, { hint, error, describedBy }) : undefined}
               maxLength={index === 0 ? length : 1}
               disabled={disabled}
               value={(code[index] ?? "").trim()}

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

@@ -69,7 +69,7 @@ export function Popover({ trigger, children, label, side = "bottom", align = "st
 
   const triggerProps = trigger.props as { onClick?: React.MouseEventHandler; ref?: React.Ref<HTMLElement> };
   const anchored = React.cloneElement(trigger, {
-    ref: composeRefs(anchor, triggerProps.ref as React.Ref<HTMLElement> | undefined),
+    ref: (node: HTMLElement | null) => composeRefs(anchor, triggerProps.ref as React.Ref<HTMLElement> | undefined)(node),
     "aria-haspopup": "dialog",
     "aria-expanded": isOpen,
     "aria-controls": isOpen ? id : undefined,
@@ -86,6 +86,7 @@ export function Popover({ trigger, children, label, side = "bottom", align = "st
         ? createPortal(
             <div
               ref={layer}
+              data-ml-portal=""
               id={id}
               role="dialog"
               aria-label={label}