@mlola-ui/registry 1.0.12 → 1.1.0

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

@@ -1,12 +1,13 @@
 "use client";
 
 import * as React from "react";
-import { cx } from "../_internal/react";
+import { usePrefersReducedMotion } from "../_internal/media";
+import { cx, splitAria } from "../_internal/react";
 
 /** The meaning of the fill, from the theme's color roles. */
 export type ProgressTone = "primary" | "info" | "success" | "warning" | "danger";
 type ProgressSize = "sm" | "md" | "lg";
-export interface ProgressProps {
+export interface ProgressProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
   value?: number;
   max?: number;
   tone?: ProgressTone;
@@ -27,12 +28,12 @@ const metrics = (value: number, max: number) => {
 
 /** The shown percentage eases towards the real one, so the number moves with the bar. */
 function useCountUp(target: number) {
+  const reduced = usePrefersReducedMotion();
   const [shown, setShown] = React.useState(0);
   const current = React.useRef(0);
   React.useEffect(() => {
-    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+    if (reduced) {
       current.current = target;
-      setShown(target);
       return;
     }
     const from = current.current;
@@ -47,8 +48,8 @@ function useCountUp(target: number) {
     };
     frame = requestAnimationFrame(step);
     return () => cancelAnimationFrame(frame);
-  }, [target]);
-  return shown;
+  }, [target, reduced]);
+  return reduced ? target : shown;
 }
 
 /**
@@ -56,12 +57,13 @@ function useCountUp(target: number) {
  * between values with the percentage counting alongside, sweeps a light
  * along the fill while `active`, and pulses once when it reaches the end.
  */
-export function Progress({ value = 0, max = 100, tone = "primary", size = "md", showLabel = false, label = "Progress", indeterminate = false, active = false, className }: ProgressProps) {
+export function Progress({ value = 0, max = 100, tone = "primary", size = "md", showLabel = false, label = "Progress", indeterminate = false, active = false, className, ...props }: ProgressProps) {
+  const [aria, rest] = splitAria(props);
   const { safeMax, safeValue, percent } = metrics(value, max);
   const shown = useCountUp(percent);
   const complete = !indeterminate && percent >= 100;
   return (
-    <div className={cx("ml-progress-root", className)} data-tone={tone} data-size={size} data-state={indeterminate ? "indeterminate" : complete ? "complete" : "determinate"} data-active={(active && !complete && !indeterminate) || undefined}>
+    <div {...rest} className={cx("ml-progress-root", className)} data-tone={tone} data-size={size} data-state={indeterminate ? "indeterminate" : complete ? "complete" : "determinate"} data-active={(active && !complete && !indeterminate) || undefined}>
       {showLabel ? (
         <div className="ml-progress-label">
           <span>{label}</span>
@@ -70,21 +72,22 @@ export function Progress({ value = 0, max = 100, tone = "primary", size = "md",
           </span>
         </div>
       ) : null}
-      <div role="progressbar" aria-label={label} aria-valuemin={0} aria-valuemax={safeMax} aria-valuenow={indeterminate ? undefined : safeValue} aria-valuetext={indeterminate ? "Loading" : `${percent}%`} className="ml-progress-track">
+      <div role="progressbar" aria-label={label} aria-valuemin={0} aria-valuemax={safeMax} aria-valuenow={indeterminate ? undefined : safeValue} aria-valuetext={indeterminate ? "Loading" : `${percent}%`} {...aria} className="ml-progress-track">
         <div aria-hidden="true" className="ml-progress-fill" style={indeterminate ? undefined : { width: `${percent}%` }} />
       </div>
     </div>
   );
 }
 
-export interface CircularProgressProps extends ProgressProps {}
+export type CircularProgressProps = Omit<ProgressProps, "active">;
 const CIRCUMFERENCE = 2 * Math.PI * 44;
-export function CircularProgress({ value = 0, max = 100, tone = "primary", size = "md", showLabel = false, label = "Progress", indeterminate = false, className }: CircularProgressProps) {
+export function CircularProgress({ value = 0, max = 100, tone = "primary", size = "md", showLabel = false, label = "Progress", indeterminate = false, className, ...props }: CircularProgressProps) {
   const { safeMax, safeValue, percent } = metrics(value, max);
   const shown = useCountUp(percent);
   const filled = indeterminate ? CIRCUMFERENCE * 0.28 : (CIRCUMFERENCE * percent) / 100;
   return (
     <div
+      {...props}
       role="progressbar"
       aria-label={label}
       aria-valuemin={0}

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

@@ -4,7 +4,8 @@ import * as React from "react";
 import { createPortal } from "react-dom";
 import { rovingIndex } from "@mlola-ui/behavior/logic";
 import { useFloating, usePortalNode } from "../_internal/floating";
-import { composeRefs, cx, useControllableState } from "../_internal/react";
+import { composeRefs, cx, splitAria, useControllableState } from "../_internal/react";
+import { FieldValue, type FormControlProps } from "../input/input";
 import { IconCheck, IconChevronDown, IconX } from "@mlola-ui/icons";
 
 export interface SelectOption {
@@ -23,17 +24,18 @@ export interface SelectOption {
 
 export type SelectSize = "sm" | "md" | "lg";
 
-interface SelectBaseProps {
+interface SelectBaseProps
+  extends FormControlProps,
+    Omit<React.HTMLAttributes<HTMLDivElement>, keyof FormControlProps | "defaultValue" | "onChange" | "children" | "placeholder"> {
   options: SelectOption[];
   /** Cap the chips rendered before collapsing into a counter. */
   maxVisibleChips?: number;
   placeholder?: string;
   searchable?: boolean;
   clearable?: boolean;
-  disabled?: boolean;
   size?: SelectSize;
-  error?: string;
-  label?: string;
+  error?: React.ReactNode;
+  label?: React.ReactNode;
   /** Keep the label for assistive technology but do not show it (toolbars). */
   hideLabel?: boolean;
   className?: string;
@@ -56,6 +58,13 @@ interface SelectMultipleProps {
 
 export type SelectProps = SelectBaseProps & (SelectSingleProps | SelectMultipleProps);
 
+const OWN = new Set(["options", "maxVisibleChips", "placeholder", "searchable", "clearable", "disabled", "size", "error", "label", "hideLabel", "className", "id", "name", "form", "required", "aria-label", "aria-labelledby", "aria-describedby", "multiple", "value", "defaultValue", "onValueChange"]);
+
+/** The attributes a caller passed that Select does not read itself. */
+function attributesOf(props: SelectProps) {
+  return Object.fromEntries(Object.entries(props).filter(([key]) => !OWN.has(key))) as React.HTMLAttributes<HTMLDivElement>;
+}
+
 export const Select = React.forwardRef<HTMLButtonElement, SelectProps>(function Select(props: SelectProps, ref) {
   const {
     options,
@@ -69,8 +78,17 @@ export const Select = React.forwardRef<HTMLButtonElement, SelectProps>(function
     label,
     hideLabel = false,
     className,
+    id: triggerId,
+    name,
+    form,
+    required,
+    "aria-label": ariaLabel,
+    "aria-labelledby": labelledBy,
+    "aria-describedby": describedBy,
   } = props;
   const multiple = props.multiple === true;
+  // Everything else a caller passes: ARIA to the trigger, the rest (data-*, style, handlers) to the root.
+  const [triggerAria, rootAttributes] = splitAria(attributesOf(props));
   const [selectedValue, setSelectedValue] = useControllableState<string>({
     value: props.multiple ? undefined : props.value,
     defaultValue: props.multiple ? "" : (props.defaultValue ?? ""),
@@ -201,25 +219,30 @@ export const Select = React.forwardRef<HTMLButtonElement, SelectProps>(function
 
   return (
     <div
+      {...rootAttributes}
       ref={rootRef}
       className={cx("ml-select-root", className)}
       data-disabled={disabled ? "" : undefined}
       data-invalid={error ? "" : undefined}
     >
       {label ? <span id={labelId} className={hideLabel ? "ml-visually-hidden" : "ml-select-label"}>{label}</span> : null}
+      <FieldValue name={name} form={form} value={multiple ? selectedValues : selectedValue} disabled={disabled} />
       <div ref={controlRef} className="ml-select-control">
         <button
+          {...triggerAria}
           ref={composeRefs(triggerRef, ref)}
+          id={triggerId}
           type="button"
           role="combobox"
           aria-haspopup="listbox"
           aria-expanded={open}
           aria-controls={open ? listId : undefined}
-          aria-labelledby={label ? labelId : undefined}
-          aria-label={label ? undefined : placeholder}
+          aria-labelledby={labelledBy ?? (label ? labelId : undefined)}
+          aria-label={labelledBy || label ? undefined : (ariaLabel ?? (triggerId ? undefined : placeholder))}
           aria-activedescendant={open && active ? `${id}-option-${activeIndex}` : undefined}
           aria-invalid={error ? true : undefined}
-          aria-describedby={error ? errorId : undefined}
+          aria-required={required || undefined}
+          aria-describedby={[describedBy, error ? errorId : null].filter(Boolean).join(" ") || undefined}
           disabled={disabled}
           data-size={size}
           data-state={open ? "open" : "closed"}
@@ -255,7 +278,7 @@ export const Select = React.forwardRef<HTMLButtonElement, SelectProps>(function
         {clearable && (multiple ? chosen.length > 0 : Boolean(selected)) && !disabled ? (
           <button
             type="button"
-            aria-label={`Clear ${label ?? "selection"}`}
+            aria-label={`Clear ${typeof label === "string" ? label : (ariaLabel ?? "selection")}`}
             className="ml-select-clear" data-hit="expand"
             onClick={() => {
               if (multiple) setSelectedValues([]);
@@ -268,7 +291,7 @@ export const Select = React.forwardRef<HTMLButtonElement, SelectProps>(function
         ) : null}
       </div>
       {open && !disabled && portal ? createPortal(
-        <div ref={popoverRef} className="ml-select-popover" data-state="open" data-side="bottom">
+        <div ref={popoverRef} data-ml-portal="" className="ml-select-popover" data-state="open" data-side="bottom">
           {searchable ? (
             <div className="ml-select-search-wrap">
               <input
@@ -287,7 +310,7 @@ export const Select = React.forwardRef<HTMLButtonElement, SelectProps>(function
               />
             </div>
           ) : null}
-          <ul id={listId} role="listbox" aria-multiselectable={multiple || undefined} aria-labelledby={label ? labelId : undefined} className="ml-select-list">
+          <ul id={listId} role="listbox" aria-multiselectable={multiple || undefined} aria-labelledby={labelledBy ?? (label ? labelId : undefined)} aria-label={labelledBy || label ? undefined : ariaLabel} className="ml-select-list">
             {filtered.length ? filtered.map((option, index) => (
               <React.Fragment key={option.value}>
                 {(index === 0 || filtered[index - 1]?.group !== option.group) && option.group ? (

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

@@ -9,19 +9,23 @@ import { IconX } from "@mlola-ui/icons";
 export type SheetSide = "left" | "right" | "top" | "bottom";
 export type SheetSize = "sm" | "md" | "lg";
 
-interface SheetProps {
+interface SheetProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "role" | "children" | "title"> {
   open: boolean;
   onClose: () => void;
   side?: SheetSide;
   size?: SheetSize;
-  title: string;
-  description?: string;
+  /** Names the panel when it has no `SheetHeader`; a header's title names it otherwise. */
+  title?: string;
+  /** Read after the name when the panel opens; not shown. */
+  description?: React.ReactNode;
   closeOnBackdrop?: boolean;
   closeOnEscape?: boolean;
   children: React.ReactNode;
-  className?: string;
 }
 
+/** The id a `SheetHeader` gives its title, so the panel is named by what it shows. */
+const TitleId = React.createContext<string | undefined>(undefined);
+
 function Sheet({
   open,
   onClose,
@@ -33,24 +37,29 @@ function Sheet({
   closeOnEscape = true,
   children,
   className,
+  ...props
 }: SheetProps) {
   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 = title ?? props["aria-label"] ?? props["aria-labelledby"];
   return createPortal(
-    <div className="ml-sheet-layer" data-state="open">
+    <div data-ml-portal="" className="ml-sheet-layer" data-state="open">
       <div
         aria-hidden="true"
         className="ml-sheet-overlay"
         onMouseDown={() => closeOnBackdrop && onClose()}
       />
       <div
+        aria-labelledby={named ? undefined : titleId}
+        aria-describedby={description ? descriptionId : undefined}
+        {...props}
         ref={panelRef}
         role="dialog"
         aria-modal="true"
-        aria-label={title}
-        aria-describedby={description ? descriptionId : undefined}
+        aria-label={title ?? props["aria-label"]}
         tabIndex={-1}
         data-side={side}
         data-size={size}
@@ -58,7 +67,7 @@ function Sheet({
         className={cx("ml-sheet-panel", className)}
       >
         {description ? <p id={descriptionId} className="ml-visually-hidden">{description}</p> : null}
-        {children}
+        <TitleId.Provider value={titleId}>{children}</TitleId.Provider>
       </div>
     </div>,
     portal
@@ -66,17 +75,19 @@ function Sheet({
 }
 
 interface SheetHeaderProps {
-  title: string;
-  description?: string;
+  /** The panel's visible title, which also names it for assistive technology. */
+  title: React.ReactNode;
+  description?: React.ReactNode;
   onClose?: () => void;
   className?: string;
 }
 
 function SheetHeader({ title, description, onClose, className }: SheetHeaderProps) {
+  const titleId = React.useContext(TitleId);
   return (
     <div className={cx("ml-sheet-header", className)}>
       <div className="ml-sheet-heading">
-        <h2 className="ml-sheet-title">{title}</h2>
+        <h2 id={titleId} className="ml-sheet-title">{title}</h2>
         {description ? <p className="ml-sheet-description">{description}</p> : null}
       </div>
       {onClose ? (

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

@@ -3,24 +3,23 @@
 import * as React from "react";
 import { clampToStep, percentOf, sliderValueForKey, valueFromRatio } from "@mlola-ui/behavior/logic";
 import { cx, useControllableState } from "../_internal/react";
+import { FieldValue, type FormControlProps } from "../input/input";
 
 type SliderSize = "sm" | "md";
-interface SliderProps {
+interface SliderProps extends Omit<FormControlProps, "required"> {
   value?: number;
   defaultValue?: number;
   onValueChange?: (value: number) => void;
   min?: number;
   max?: number;
   step?: number;
-  disabled?: boolean;
-  label?: string;
+  label?: React.ReactNode;
   showValue?: boolean;
   size?: SliderSize;
   className?: string;
-  id?: string;
 }
 const Slider = React.forwardRef<HTMLDivElement, SliderProps>(
-  ({ value, defaultValue = 50, onValueChange, min = 0, max = 100, step = 1, disabled = false, label, showValue = false, size = "md", className, id }, ref) => {
+  ({ value, defaultValue = 50, onValueChange, min = 0, max = 100, step = 1, disabled = false, label, showValue = false, size = "md", className, id, name, form, "aria-label": ariaLabel, "aria-labelledby": labelledBy, "aria-describedby": describedBy }, ref) => {
     const low = Number.isFinite(min) ? min : 0;
     const high = Number.isFinite(max) && max > low ? max : low + 100;
     const increment = Number.isFinite(step) && step > 0 ? step : 1;
@@ -58,9 +57,9 @@ const Slider = React.forwardRef<HTMLDivElement, SliderProps>(
           aria-valuemax={high}
           aria-valuenow={current}
           aria-valuetext={`${current} of ${high}`}
-          aria-labelledby={labelId}
-          aria-label={label ? undefined : "Value"}
-          aria-describedby={valueId}
+          aria-labelledby={labelledBy ?? labelId}
+          aria-label={labelledBy || label ? undefined : (ariaLabel ?? "Value")}
+          aria-describedby={[describedBy, valueId].filter(Boolean).join(" ") || undefined}
           aria-disabled={disabled || undefined}
           className="ml-slider"
           onKeyDown={(event) => {
@@ -90,6 +89,7 @@ const Slider = React.forwardRef<HTMLDivElement, SliderProps>(
             <span aria-hidden="true" className="ml-slider-thumb" style={{ left: `${percent}%` }} />
           </div>
         </div>
+        <FieldValue name={name} form={form} value={String(current)} disabled={disabled} />
       </div>
     );
   }

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

@@ -13,7 +13,7 @@ interface TabsContextValue {
   orientation: TabsOrientation;
   prefix: string;
   select: (value: string) => void;
-  triggers: React.MutableRefObject<Map<string, HTMLButtonElement>>;
+  triggersRef: React.MutableRefObject<Map<string, HTMLButtonElement>>;
 }
 
 const TabsContext = React.createContext<TabsContextValue | null>(null);
@@ -43,10 +43,10 @@ export function Tabs({
   className,
 }: TabsProps) {
   const [current, select] = useControllableState({ value, defaultValue, onChange: onValueChange });
-  const triggers = React.useRef(new Map<string, HTMLButtonElement>());
+  const triggersRef = 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 }}>
+    <TabsContext.Provider value={{ value: current, variant, orientation, prefix, select, triggersRef }}>
       <div className={cx("ml-tabs", className)} data-variant={variant} data-orientation={orientation}>
         {children}
       </div>
@@ -79,13 +79,14 @@ export interface TabsTriggerProps {
 export function TabsTrigger({ value, disabled = false, children, className }: TabsTriggerProps) {
   const context = useTabs();
   const active = context.value === value;
+  const { triggersRef } = context;
   const register = React.useCallback((node: HTMLButtonElement | null) => {
-    if (node) context.triggers.current.set(value, node);
-    else context.triggers.current.delete(value);
-  }, [context.triggers, value]);
+    if (node) triggersRef.current.set(value, node);
+    else triggersRef.current.delete(value);
+  }, [triggersRef, value]);
 
   const ordered = () =>
-    Array.from(context.triggers.current.entries()).sort((left, right) =>
+    Array.from(triggersRef.current.entries()).sort((left, right) =>
       left[1].compareDocumentPosition(right[1]) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1
     );
 

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

@@ -3,10 +3,10 @@
 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 { Field, fieldDescription, type FormControlProps } from "../input/input";
 import { composeRefs, cx } from "../_internal/react";
 
-export interface TagInputProps {
+export interface TagInputProps extends FormControlProps {
   value?: string[];
   defaultValue?: string[];
   onValueChange?: (tags: string[]) => void;
@@ -23,9 +23,6 @@ export interface TagInputProps {
   /** 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;
 }
 
@@ -59,6 +56,11 @@ export const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>(functi
   disabled,
   required,
   id,
+  name,
+  form,
+  "aria-label": ariaLabel,
+  "aria-labelledby": labelledBy,
+  "aria-describedby": describedBy,
   className,
 }: TagInputProps, ref) {
   const autoId = React.useId();
@@ -176,7 +178,7 @@ export const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>(functi
   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)}>
+    <Field id={fieldId} label={label} hint={hint} error={message ?? undefined} required={required} disabled={disabled} name={name} form={form} value={tags} className={cx("ml-tag-input", className)}>
       <div
         ref={control}
         className="ml-tag-input-control"
@@ -213,7 +215,9 @@ export const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>(functi
           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 })}
+          aria-label={ariaLabel}
+          aria-labelledby={labelledBy}
+          aria-describedby={fieldDescription(fieldId, { hint, error: message, describedBy })}
           value={text}
           placeholder={full ? "" : placeholder}
           disabled={disabled || full}

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

@@ -3,11 +3,12 @@
 import * as React from "react";
 import { composeRefs, cx } from "../_internal/react";
 import { Field, fieldDescription } from "../input/input";
+import { supportsCss } from "../_internal/dom";
 
 export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
-  label?: string;
-  hint?: string;
-  error?: string;
+  label?: React.ReactNode;
+  hint?: React.ReactNode;
+  error?: React.ReactNode;
   /** Grow with the text up to this many rows, then scroll. */
   maxRows?: number;
   /** Show a live character count against `maxLength`. */
@@ -29,7 +30,7 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
 
     const resize = React.useCallback(() => {
       const element = node.current;
-      if (!element || CSS.supports?.("field-sizing", "content")) return;
+      if (!element || supportsCss("field-sizing", "content")) return;
       element.style.height = "auto";
       element.style.height = `${element.scrollHeight}px`;
     }, []);

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

@@ -2,7 +2,7 @@
 
 import * as React from "react";
 import { IconClock } from "@mlola-ui/icons";
-import { Field, fieldDescription } from "../input/input";
+import { Field, fieldDescription, type FormControlProps } from "../input/input";
 import { Popover } from "../popover/popover";
 import { composeRefs, cx } from "../_internal/react";
 import { fromMinutes, isTimeAllowed, nearestAllowed, nextAllowed, toMinutes, type TimeMatchers, type TimeRules } from "./times";
@@ -10,7 +10,7 @@ import { fromMinutes, isTimeAllowed, nearestAllowed, nextAllowed, toMinutes, typ
 export type { TimeMatcher, TimeMatchers } from "./times";
 export { isTimeAllowed, matchesTime } from "./times";
 
-export interface TimePickerProps {
+export interface TimePickerProps extends FormControlProps {
   label?: React.ReactNode;
   hint?: React.ReactNode;
   error?: React.ReactNode;
@@ -35,9 +35,6 @@ export interface TimePickerProps {
   /** When given, only these times can be picked, such as bookable slots; same forms as `disabledTimes`. */
   enabledTimes?: TimeMatchers;
   locale?: string;
-  disabled?: boolean;
-  required?: boolean;
-  id?: string;
   className?: string;
 }
 
@@ -69,6 +66,11 @@ export const TimePicker = React.forwardRef<HTMLSpanElement, TimePickerProps>(fun
   disabled,
   required,
   id,
+  name,
+  form,
+  "aria-label": ariaLabel,
+  "aria-labelledby": labelledBy,
+  "aria-describedby": describedBy,
   className,
 }: TimePickerProps, ref) {
   const autoId = React.useId();
@@ -222,14 +224,15 @@ export const TimePicker = React.forwardRef<HTMLSpanElement, TimePickerProps>(fun
   });
 
   return (
-    <Field id={fieldId} label={label} hint={hint} error={error} required={required} disabled={disabled} className={cx("ml-time-picker", className)}>
+    <Field id={fieldId} label={label} hint={hint} error={error} required={required} disabled={disabled} name={name} form={form} value={current} className={cx("ml-time-picker", className)}>
       <div
         className="ml-input ml-time-picker-control"
         role="group"
         id={fieldId}
-        aria-label={typeof label === "string" ? label : "Time"}
-        aria-describedby={fieldDescription(fieldId, { hint, error })}
-        aria-invalid={error || unavailable ? true : undefined}
+        aria-labelledby={labelledBy ?? (label ? `${fieldId}-label` : undefined)}
+        aria-label={labelledBy || label ? undefined : (ariaLabel ?? "Time")}
+        aria-describedby={fieldDescription(fieldId, { hint, error, describedBy })}
+        data-invalid={error || unavailable ? "" : undefined}
         data-disabled={disabled || undefined}
         data-unavailable={unavailable || undefined}
         onBlur={(event) => {

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

@@ -1,7 +1,8 @@
 "use client";
 
 import * as React from "react";
-import { cx } from "../_internal/react";
+import { fitTooltip, type Side } from "../_internal/anchor";
+import { cx, useLatest } from "../_internal/react";
 
 export type TooltipPlacement = "top" | "bottom" | "left" | "right";
 interface TooltipProps {
@@ -14,6 +15,10 @@ interface TooltipProps {
 
 function Tooltip({ content, placement = "top", delay = 200, children, className }: TooltipProps) {
   const [open, setOpen] = React.useState(false);
+  // Where it actually opens: the asked side, flipped or slid to stay on screen.
+  const [fit, setFit] = React.useState<{ side: Side; shift: number }>({ side: placement, shift: 0 });
+  const root = React.useRef<HTMLSpanElement>(null);
+  const tip = React.useRef<HTMLSpanElement>(null);
   const timer = React.useRef<ReturnType<typeof setTimeout> | null>(null);
   const id = React.useId();
   const clear = () => {
@@ -28,15 +33,27 @@ function Tooltip({ content, placement = "top", delay = 200, children, className
     clear();
     setOpen(false);
   };
+  const hideRef = useLatest(hide);
   React.useEffect(() => clear, []);
+  React.useLayoutEffect(() => {
+    const anchor = root.current?.firstElementChild ?? root.current;
+    if (!open || !anchor || !tip.current) {
+      setFit({ side: placement, shift: 0 });
+      return;
+    }
+    const a = anchor.getBoundingClientRect();
+    // Layout size, not the painted box: the pop-in animation starts scaled down.
+    const t = { width: tip.current.offsetWidth, height: tip.current.offsetHeight };
+    setFit(fitTooltip({ x: a.left, y: a.top, width: a.width, height: a.height }, t, { width: document.documentElement.clientWidth, height: window.innerHeight }, placement));
+  }, [open, placement]);
   React.useEffect(() => {
     if (!open) return;
     const onKeyDown = (event: KeyboardEvent) => {
-      if (event.key === "Escape") hide();
+      if (event.key === "Escape") hideRef.current();
     };
     document.addEventListener("keydown", onKeyDown);
     return () => document.removeEventListener("keydown", onKeyDown);
-  }, [open]);
+  }, [open, hideRef]);
   type Handlers = {
     onMouseEnter?: React.MouseEventHandler;
     onMouseLeave?: React.MouseEventHandler;
@@ -55,10 +72,18 @@ function Tooltip({ content, placement = "top", delay = 200, children, className
       : childProps["aria-describedby"],
   } as Record<string, unknown>);
   return (
-    <span className="ml-tooltip-root" onMouseEnter={clear} onMouseLeave={hide}>
+    <span ref={root} className="ml-tooltip-root" onMouseEnter={clear} onMouseLeave={hide}>
       {trigger}
       {open ? (
-        <span id={id} role="tooltip" data-side={placement} data-state="open" className={cx("ml-tooltip", className)}>
+        <span
+          ref={tip}
+          id={id}
+          role="tooltip"
+          data-side={fit.side}
+          data-state="open"
+          className={cx("ml-tooltip", className)}
+          style={{ "--ml-tooltip-shift": `${fit.shift}px` } as React.CSSProperties}
+        >
           {content}
           <span aria-hidden="true" className="ml-tooltip-arrow" />
         </span>

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

@@ -3,6 +3,7 @@
 import * as React from "react";
 import { createPortal } from "react-dom";
 import { IconX } from "@mlola-ui/icons";
+import { prefersReducedMotion } from "../_internal/media";
 import { cx } from "../_internal/react";
 import { usePortalNode, type Side } from "../_internal/floating";
 import { placeFloating } from "../_internal/anchor";
@@ -78,18 +79,15 @@ export function Tour({ steps, open, onOpenChange, step: stepProp, defaultStep =
   React.useEffect(() => {
     if (!open) return;
     const element = resolve(current?.target);
-    if (!element) {
-      setRect(null);
-      return;
-    }
-    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-    element.scrollIntoView({ block: "center", inline: "nearest", behavior: reduce ? "auto" : "smooth" });
     let frame = 0;
+    // A step without an element to point at shows its card in the middle.
     const measure = () => {
       cancelAnimationFrame(frame);
-      frame = requestAnimationFrame(() => setRect(element.getBoundingClientRect()));
+      frame = requestAnimationFrame(() => setRect(element ? element.getBoundingClientRect() : null));
     };
     measure();
+    if (!element) return () => cancelAnimationFrame(frame);
+    element.scrollIntoView({ block: "center", inline: "nearest", behavior: prefersReducedMotion() ? "auto" : "smooth" });
     window.addEventListener("scroll", measure, true);
     window.addEventListener("resize", measure);
     const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
@@ -116,7 +114,7 @@ export function Tour({ steps, open, onOpenChange, step: stepProp, defaultStep =
   if (!open || !portal || !current) return null;
 
   return createPortal(
-    <div className={cx("ml-tour", className)}>
+    <div data-ml-portal="" className={cx("ml-tour", className)}>
       <div className="ml-tour-scrim" data-spotlight={rect ? "" : undefined} aria-hidden="true" />
       {rect ? (
         <div