@geomak/ui 5.5.0 → 5.5.1

package/dist/index.d.cts

@@ -2102,6 +2102,18 @@ interface CheckboxProps {
     htmlFor?: string;
     errorMessage?: React$1.ReactNode;
     disabled?: boolean;
+    /**
+     * Box + label arrangement.
+     * - `'horizontal'` (default): box and label on one row.
+     * - `'vertical'`: box and label stacked.
+     */
+    layout?: 'horizontal' | 'vertical';
+    /**
+     * Where the label sits relative to the box.
+     * - In horizontal: `'right'` (default) → box then label; `'left'` → label then box.
+     * - In vertical: `'right'` (default) → box then label below; `'left'` → label above then box.
+     */
+    labelPosition?: 'left' | 'right';
     /** @deprecated Use `checked` */
     value?: boolean;
 }
@@ -2120,7 +2132,7 @@ interface CheckboxProps {
  * />
  */
 declare function Checkbox({ checked, value, // legacy alias
-onChange, label, name, htmlFor, errorMessage, disabled, }: CheckboxProps): react_jsx_runtime.JSX.Element;
+onChange, label, name, htmlFor, errorMessage, disabled, layout, labelPosition, }: CheckboxProps): react_jsx_runtime.JSX.Element;
 
 interface RadioOption {
     /** Stable value submitted / reported on change. */
@@ -2232,13 +2244,6 @@ interface DropdownProps {
     disabled?: boolean;
     /** Label/input orientation. Defaults to `'vertical'`. */
     layout?: 'horizontal' | 'vertical';
-    /**
-     * Show a "+N more" pill alongside the first selected item in multiselect
-     * mode. Defaults to `false` — a single pill is shown with the first
-     * selection and consumers typically open the dropdown to see the rest.
-     * Set `true` if you want the count visible on the trigger.
-     */
-    showSelectedCount?: boolean;
     errorMessage?: React$1.ReactNode;
     style?: React$1.CSSProperties;
     htmlFor?: string;
@@ -2263,7 +2268,7 @@ interface DropdownProps {
  * // Multi-select
  * <Dropdown isMultiselect label="Fuels" items={fuels} value={form.fuels} onChange={handleChange} />
  */
-declare function Dropdown({ isMultiselect, hasSearch, label, name, value, onChange, disabled, layout, errorMessage, style, htmlFor, items, labelStyle, placeholder, showSelectedCount, size, }: DropdownProps): react_jsx_runtime.JSX.Element;
+declare function Dropdown({ isMultiselect, hasSearch, label, name, value, onChange, disabled, layout, errorMessage, style, htmlFor, items, labelStyle, placeholder, size, }: DropdownProps): react_jsx_runtime.JSX.Element;
 
 interface AutoCompleteItem {
     key: string;
@@ -2307,6 +2312,11 @@ interface AutoCompleteProps {
     size?: FieldSize;
     /** Override the leading search icon (hidden while loading). */
     icon?: React$1.ReactNode;
+    /** Validation message — turns the field red and links via aria-describedby. */
+    errorMessage?: React$1.ReactNode;
+    /** Mark required (asterisk after the label). */
+    required?: boolean;
+    htmlFor?: string;
 }
 /**
  * Search-as-you-type autocomplete powered by Radix Popover. Supports two
@@ -2344,7 +2354,7 @@ interface AutoCompleteProps {
  * />
  * ```
  */
-declare function AutoComplete({ disabled, label, placeholder, name, inputStyle, style, layout, items, onSearch, debounce, onItemClick, emptyText, loadingText, size, icon, }: AutoCompleteProps): react_jsx_runtime.JSX.Element;
+declare function AutoComplete({ disabled, label, placeholder, name, inputStyle, style, layout, items, onSearch, debounce, onItemClick, emptyText, loadingText, size, icon, errorMessage, required, htmlFor, }: AutoCompleteProps): react_jsx_runtime.JSX.Element;
 
 interface TreeSelectNode {
     key: string | number;

package/dist/index.d.ts

@@ -2102,6 +2102,18 @@ interface CheckboxProps {
     htmlFor?: string;
     errorMessage?: React$1.ReactNode;
     disabled?: boolean;
+    /**
+     * Box + label arrangement.
+     * - `'horizontal'` (default): box and label on one row.
+     * - `'vertical'`: box and label stacked.
+     */
+    layout?: 'horizontal' | 'vertical';
+    /**
+     * Where the label sits relative to the box.
+     * - In horizontal: `'right'` (default) → box then label; `'left'` → label then box.
+     * - In vertical: `'right'` (default) → box then label below; `'left'` → label above then box.
+     */
+    labelPosition?: 'left' | 'right';
     /** @deprecated Use `checked` */
     value?: boolean;
 }
@@ -2120,7 +2132,7 @@ interface CheckboxProps {
  * />
  */
 declare function Checkbox({ checked, value, // legacy alias
-onChange, label, name, htmlFor, errorMessage, disabled, }: CheckboxProps): react_jsx_runtime.JSX.Element;
+onChange, label, name, htmlFor, errorMessage, disabled, layout, labelPosition, }: CheckboxProps): react_jsx_runtime.JSX.Element;
 
 interface RadioOption {
     /** Stable value submitted / reported on change. */
@@ -2232,13 +2244,6 @@ interface DropdownProps {
     disabled?: boolean;
     /** Label/input orientation. Defaults to `'vertical'`. */
     layout?: 'horizontal' | 'vertical';
-    /**
-     * Show a "+N more" pill alongside the first selected item in multiselect
-     * mode. Defaults to `false` — a single pill is shown with the first
-     * selection and consumers typically open the dropdown to see the rest.
-     * Set `true` if you want the count visible on the trigger.
-     */
-    showSelectedCount?: boolean;
     errorMessage?: React$1.ReactNode;
     style?: React$1.CSSProperties;
     htmlFor?: string;
@@ -2263,7 +2268,7 @@ interface DropdownProps {
  * // Multi-select
  * <Dropdown isMultiselect label="Fuels" items={fuels} value={form.fuels} onChange={handleChange} />
  */
-declare function Dropdown({ isMultiselect, hasSearch, label, name, value, onChange, disabled, layout, errorMessage, style, htmlFor, items, labelStyle, placeholder, showSelectedCount, size, }: DropdownProps): react_jsx_runtime.JSX.Element;
+declare function Dropdown({ isMultiselect, hasSearch, label, name, value, onChange, disabled, layout, errorMessage, style, htmlFor, items, labelStyle, placeholder, size, }: DropdownProps): react_jsx_runtime.JSX.Element;
 
 interface AutoCompleteItem {
     key: string;
@@ -2307,6 +2312,11 @@ interface AutoCompleteProps {
     size?: FieldSize;
     /** Override the leading search icon (hidden while loading). */
     icon?: React$1.ReactNode;
+    /** Validation message — turns the field red and links via aria-describedby. */
+    errorMessage?: React$1.ReactNode;
+    /** Mark required (asterisk after the label). */
+    required?: boolean;
+    htmlFor?: string;
 }
 /**
  * Search-as-you-type autocomplete powered by Radix Popover. Supports two
@@ -2344,7 +2354,7 @@ interface AutoCompleteProps {
  * />
  * ```
  */
-declare function AutoComplete({ disabled, label, placeholder, name, inputStyle, style, layout, items, onSearch, debounce, onItemClick, emptyText, loadingText, size, icon, }: AutoCompleteProps): react_jsx_runtime.JSX.Element;
+declare function AutoComplete({ disabled, label, placeholder, name, inputStyle, style, layout, items, onSearch, debounce, onItemClick, emptyText, loadingText, size, icon, errorMessage, required, htmlFor, }: AutoCompleteProps): react_jsx_runtime.JSX.Element;
 
 interface TreeSelectNode {
     key: string | number;

package/dist/index.js

@@ -2140,9 +2140,9 @@ var FIELD_SIZE = {
   lg: { control: "h-control-lg", text: "text-sm", padX: "px-3.5", gap: "gap-2.5" }
 };
 var FOCUS_WITHIN = "focus-within:outline-none focus-within:border-accent focus-within:ring-[3px] focus-within:ring-focus-ring";
-var FOCUS_VISIBLE = "focus-visible:outline-none focus-visible:border-accent focus-visible:ring-[3px] focus-visible:ring-focus-ring";
+var FOCUS_ELEMENT = "focus:outline-none focus:border-accent focus:ring-[3px] focus:ring-focus-ring data-[state=open]:border-accent data-[state=open]:ring-[3px] data-[state=open]:ring-focus-ring";
 var FOCUS_WITHIN_ERROR = "focus-within:border-status-error focus-within:ring-focus-ring-error";
-var FOCUS_VISIBLE_ERROR = "focus-visible:border-status-error focus-visible:ring-focus-ring-error";
+var FOCUS_ELEMENT_ERROR = "focus:border-status-error focus:ring-focus-ring-error data-[state=open]:border-status-error data-[state=open]:ring-focus-ring-error";
 function fieldShell({
   size = "md",
   hasError = false,
@@ -2161,8 +2161,8 @@ function fieldShell({
     // hover (only when interactive + no error)
     disabled ? "bg-surface-raised text-foreground-muted cursor-not-allowed" : hasError ? "" : "hover:border-border-strong",
     // focus
-    focusWithin ? FOCUS_WITHIN : FOCUS_VISIBLE,
-    hasError ? focusWithin ? FOCUS_WITHIN_ERROR : FOCUS_VISIBLE_ERROR : "",
+    focusWithin ? FOCUS_WITHIN : FOCUS_ELEMENT,
+    hasError ? focusWithin ? FOCUS_WITHIN_ERROR : FOCUS_ELEMENT_ERROR : "",
     // placeholder colour for native inputs
     "placeholder:text-foreground-muted"
   ].filter(Boolean).join(" ");
@@ -2197,7 +2197,9 @@ function Field({
             style: { width: horizontal ? labelWidth : void 0, ...labelStyle },
             className: [
               "text-sm font-medium text-foreground select-none",
-              horizontal ? "mt-2 flex-shrink-0" : ""
+              // In horizontal layout the label must not wrap onto
+              // multiple lines (e.g. "Report date", "Select option").
+              horizontal ? "mt-2 flex-shrink-0 whitespace-nowrap" : ""
             ].filter(Boolean).join(" "),
             children: [
               label,
@@ -2243,14 +2245,24 @@ var SearchInput = React8.forwardRef(function SearchInput2({ value, onChange, dis
   ) });
 });
 var SearchInput_default = SearchInput;
-function DropdownPill({ value, hasSiblings = false }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: `bg-accent text-accent-fg text-sm text-ellipsis ${hasSiblings ? "w-24" : "w-max"} p-1 px-2 rounded-lg whitespace-nowrap overflow-hidden`,
-      children: value
-    }
-  );
+function Tag({ children, onRemove, removeLabel, disabled }) {
+  return /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 rounded-md border border-border bg-surface-raised text-foreground text-xs pl-2 pr-1 py-0.5 max-w-full", children: [
+    /* @__PURE__ */ jsx("span", { className: "truncate", children }),
+    onRemove && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        disabled,
+        onClick: (e) => {
+          e.stopPropagation();
+          onRemove();
+        },
+        "aria-label": removeLabel ?? "Remove",
+        className: "inline-flex items-center justify-center w-4 h-4 flex-shrink-0 rounded text-foreground-muted hover:text-status-error hover:bg-surface transition-colors focus:outline-none focus-visible:ring-1 focus-visible:ring-accent disabled:cursor-not-allowed",
+        children: /* @__PURE__ */ jsx("svg", { width: "10", height: "10", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M15 5L5 15M5 5l10 10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })
+      }
+    )
+  ] });
 }
 function Dropdown({
   isMultiselect = false,
@@ -2267,7 +2279,6 @@ function Dropdown({
   items = [],
   labelStyle = {},
   placeholder,
-  showSelectedCount = false,
   size = "md"
 }) {
   const [open, setOpen] = useState(false);
@@ -2295,6 +2306,17 @@ function Dropdown({
       setOpen(false);
     }
   };
+  const removeSelected = (key) => {
+    if (isMultiselect) {
+      const next = selectedItems.filter((it) => it !== key);
+      setSelectedItems(next);
+      onChange?.({ target: { value: next, id: htmlFor, name } });
+    } else {
+      setSelectedItems([]);
+      onChange?.({ target: { value: "", id: htmlFor, name } });
+    }
+  };
+  const labelFor = (key) => innerItems.find((it) => it.key === key)?.label ?? String(key);
   const onSearchChange = (e) => {
     const term = e.target.value;
     setSearchTerm(term);
@@ -2305,16 +2327,16 @@ function Dropdown({
     );
   };
   const isSelected = (key) => Array.isArray(value) ? value.includes(key) : value === key;
-  return /* @__PURE__ */ jsxs("div", { className: "mt-2", children: [
+  return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsxs(
       "div",
       {
-        className: `flex ${layout === "vertical" ? "flex-col" : "flex-row items-center gap-2"}`,
+        className: `flex ${layout === "vertical" ? "flex-col gap-1.5" : "flex-row items-start gap-3"}`,
         children: [
           label && /* @__PURE__ */ jsx(
             "label",
             {
-              className: "text-sm font-medium ml-1 max-content select-none text-foreground",
+              className: `text-sm font-medium select-none text-foreground ${layout === "horizontal" ? "mt-2 flex-shrink-0 whitespace-nowrap" : ""}`,
               htmlFor,
               style: labelStyle,
               children: label
@@ -2331,7 +2353,7 @@ function Dropdown({
                 "aria-invalid": hasError || void 0,
                 "aria-describedby": hasError ? errorId : void 0,
                 style,
-                className: `flex items-center justify-between cursor-pointer select-none ${fieldShell({ size, hasError, disabled })}`,
+                className: `flex items-center justify-between gap-1 cursor-pointer select-none min-h-[36px] px-3 py-1.5 ${fieldShell({ size, hasError, disabled, sized: false })}`,
                 tabIndex: disabled ? -1 : 0,
                 onKeyDown: (e) => {
                   if (disabled) return;
@@ -2344,18 +2366,25 @@ function Dropdown({
                   /* @__PURE__ */ jsx(
                     "div",
                     {
-                      className: `${!style?.width ? "min-w-[200px]" : ""} flex items-center gap-1 overflow-hidden`,
-                      children: !value || Array.isArray(value) && value.length === 0 ? /* @__PURE__ */ jsx("span", { className: "text-foreground-muted text-sm", children: placeholder }) : Array.isArray(value) ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                        value.slice(0, 1).map((val) => /* @__PURE__ */ jsx(
-                          DropdownPill,
-                          {
-                            hasSiblings: value.length > 1,
-                            value: innerItems.find((it) => it.key === val)?.label
-                          },
-                          String(val)
-                        )),
-                        showSelectedCount && value.length > 1 && /* @__PURE__ */ jsx(DropdownPill, { value: `+${value.length - 1} more` })
-                      ] }) : /* @__PURE__ */ jsx(DropdownPill, { value: innerItems.find((it) => it.key === value)?.label })
+                      className: `${!style?.width ? "min-w-[200px]" : ""} flex flex-wrap items-center gap-1.5`,
+                      children: !value || Array.isArray(value) && value.length === 0 ? /* @__PURE__ */ jsx("span", { className: "text-foreground-muted text-sm", children: placeholder }) : Array.isArray(value) ? value.map((val) => /* @__PURE__ */ jsx(
+                        Tag,
+                        {
+                          disabled,
+                          removeLabel: `Remove ${labelFor(val)}`,
+                          onRemove: () => removeSelected(val),
+                          children: labelFor(val)
+                        },
+                        String(val)
+                      )) : /* @__PURE__ */ jsx(
+                        Tag,
+                        {
+                          disabled,
+                          removeLabel: `Remove ${labelFor(value)}`,
+                          onRemove: () => removeSelected(value),
+                          children: labelFor(value)
+                        }
+                      )
                     }
                   ),
                   /* @__PURE__ */ jsx("div", { className: `flex-shrink-0 ml-2 text-foreground-muted transition-transform duration-200 ${open ? "rotate-180" : "rotate-0"}`, "aria-hidden": "true", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) }) })
@@ -3549,74 +3578,54 @@ function Checkbox({
   name,
   htmlFor,
   errorMessage,
-  disabled = false
+  disabled = false,
+  layout = "horizontal",
+  labelPosition = "right"
 }) {
   const isChecked = checked ?? value ?? false;
+  const labelFirst = labelPosition === "left";
+  const box = /* @__PURE__ */ jsx(
+    CheckboxPrimitive.Root,
+    {
+      id: htmlFor,
+      name,
+      checked: isChecked,
+      disabled,
+      onCheckedChange: (c) => onChange?.({ target: { checked: !!c, id: htmlFor, name } }),
+      className: [
+        "relative flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center",
+        "rounded-sm border transition-colors duration-150",
+        "border-border-strong bg-surface",
+        "data-[state=checked]:bg-accent data-[state=checked]:border-accent",
+        // Focus halo matches the field tokens for a consistent look.
+        "focus:outline-none focus-visible:ring-[3px] focus-visible:ring-focus-ring",
+        "disabled:cursor-not-allowed"
+      ].join(" "),
+      "aria-label": typeof label === "string" ? label : void 0,
+      children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center data-[state=checked]:animate-check-pop", children: /* @__PURE__ */ jsx("svg", { width: "11", height: "9", viewBox: "0 0 11 9", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M1 4.5L4 7.5L10 1", stroke: "white", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
+    }
+  );
+  const labelEl = label && /* @__PURE__ */ jsx("span", { className: "text-sm text-foreground-secondary select-none leading-snug", children: label });
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-    /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(
       "label",
       {
         htmlFor,
         className: [
-          "inline-flex items-center gap-2.5",
+          "inline-flex",
+          layout === "vertical" ? "flex-col items-start gap-1.5" : "flex-row items-center gap-2.5",
           disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
         ].join(" "),
-        children: [
-          /* @__PURE__ */ jsx(
-            CheckboxPrimitive.Root,
-            {
-              id: htmlFor,
-              name,
-              checked: isChecked,
-              disabled,
-              onCheckedChange: (c) => onChange?.({ target: { checked: !!c, id: htmlFor, name } }),
-              className: [
-                // Box
-                "relative flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center",
-                "rounded-sm border transition-colors duration-150",
-                // Unchecked
-                "border-border-strong bg-surface",
-                // Checked
-                "data-[state=checked]:bg-accent data-[state=checked]:border-accent",
-                // Focus
-                "focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1",
-                // Disabled
-                "disabled:cursor-not-allowed"
-              ].join(" "),
-              "aria-label": typeof label === "string" ? label : void 0,
-              children: /* @__PURE__ */ jsx(
-                CheckboxPrimitive.Indicator,
-                {
-                  className: "flex items-center justify-center data-[state=checked]:animate-check-pop",
-                  children: /* @__PURE__ */ jsx(
-                    "svg",
-                    {
-                      width: "11",
-                      height: "9",
-                      viewBox: "0 0 11 9",
-                      fill: "none",
-                      "aria-hidden": "true",
-                      children: /* @__PURE__ */ jsx(
-                        "path",
-                        {
-                          d: "M1 4.5L4 7.5L10 1",
-                          stroke: "white",
-                          strokeWidth: "1.8",
-                          strokeLinecap: "round",
-                          strokeLinejoin: "round"
-                        }
-                      )
-                    }
-                  )
-                }
-              )
-            }
-          ),
-          label && /* @__PURE__ */ jsx("span", { className: "text-sm text-foreground-secondary select-none leading-snug", children: label })
-        ]
+        children: labelFirst ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          labelEl,
+          box
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          box,
+          labelEl
+        ] })
       }
     ),
-    errorMessage && /* @__PURE__ */ jsx("span", { className: "text-xs text-status-error pl-[26px]", children: errorMessage })
+    errorMessage && /* @__PURE__ */ jsx("span", { className: "text-xs text-status-error mt-0.5", children: errorMessage })
   ] });
 }
 var DOT_SIZE = {
@@ -3722,12 +3731,12 @@ function Switch({
       id,
       checked,
       onCheckedChange: (c) => onChange?.({ target: { checked: c } }),
-      className: "relative inline-flex h-6 w-14 items-center rounded-full bg-foreground-secondary data-[state=checked]:bg-accent transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2",
+      className: "relative inline-flex h-6 w-11 flex-shrink-0 items-center rounded-full bg-foreground-secondary data-[state=checked]:bg-accent transition-colors focus:outline-none focus-visible:ring-[3px] focus-visible:ring-focus-ring",
       children: /* @__PURE__ */ jsx(
         SwitchPrimitive.Thumb,
         {
-          className: "pointer-events-none inline-flex h-8 w-8 items-center justify-center rounded-full bg-background text-foreground shadow transition-transform duration-200 data-[state=checked]:translate-x-[22px] data-[state=unchecked]:translate-x-[-4px]",
-          children: checkedIcon && uncheckedIcon ? checked ? checkedIcon : uncheckedIcon : null
+          className: "pointer-events-none flex h-5 w-5 items-center justify-center rounded-full bg-background text-foreground shadow transition-transform duration-200 data-[state=checked]:translate-x-[22px] data-[state=unchecked]:translate-x-[2px]",
+          children: checkedIcon && uncheckedIcon ? checked ? /* @__PURE__ */ jsx("span", { className: "flex items-center justify-center w-3 h-3", children: checkedIcon }) : /* @__PURE__ */ jsx("span", { className: "flex items-center justify-center w-3 h-3", children: uncheckedIcon }) : null
         }
       )
     }
@@ -3748,8 +3757,13 @@ function AutoComplete({
   emptyText = "No results found",
   loadingText = "Searching\u2026",
   size = "md",
-  icon
+  icon,
+  errorMessage,
+  required,
+  htmlFor
 }) {
+  const errorId = useId();
+  const hasError = errorMessage != null;
   const [term, setTerm] = useState("");
   const [open, setOpen] = useState(false);
   const [asyncItems, setAsyncItems] = useState([]);
@@ -3796,78 +3810,82 @@ function AutoComplete({
     onItemClick?.(item.value);
     setOpen(false);
   };
-  return /* @__PURE__ */ jsxs(
-    "div",
+  return /* @__PURE__ */ jsx(
+    Field,
     {
-      className: `flex ${layout === "vertical" ? "flex-col gap-1.5" : "flex-row items-start gap-3"}`,
-      style,
-      children: [
-        label && /* @__PURE__ */ jsx("label", { className: `text-sm font-medium text-foreground select-none ${layout === "horizontal" ? "mt-2 flex-shrink-0" : ""}`, children: label }),
-        /* @__PURE__ */ jsx("div", { className: "flex flex-col min-w-0 flex-1", children: /* @__PURE__ */ jsxs(Popover.Root, { open: open && !disabled, onOpenChange: (o) => !disabled && setOpen(o), children: [
-          /* @__PURE__ */ jsx(Popover.Anchor, { asChild: true, children: /* @__PURE__ */ jsxs("div", { className: `flex items-center ${fieldShell({ size, disabled, focusWithin: true })}`, children: [
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                disabled,
-                value: term,
-                onChange: (e) => {
-                  setTerm(e.target.value);
-                  setOpen(true);
-                },
-                onFocus: () => setOpen(true),
-                type: "text",
-                name,
-                className: "min-w-0 flex-1 bg-transparent outline-none disabled:cursor-not-allowed placeholder:text-foreground-muted",
-                style: inputStyle,
-                placeholder: placeholder ?? "",
-                autoComplete: "off",
-                "aria-haspopup": "listbox",
-                "aria-expanded": open,
-                "aria-autocomplete": "list",
-                "aria-busy": loading || void 0
-              }
-            ),
-            loading ? /* @__PURE__ */ jsx("span", { className: "ml-2 w-4 h-4 flex-shrink-0 flex items-center justify-center text-accent", "aria-hidden": "true", children: /* @__PURE__ */ jsx(LoadingSpinner, { inline: true, size: "xs", spinnerColor: "currentColor" }) }) : /* @__PURE__ */ jsx("span", { className: "ml-2 flex-shrink-0 text-foreground-muted", children: icon ?? /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-4 h-4", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M10.5 3.75a6.75 6.75 0 100 13.5 6.75 6.75 0 000-13.5zM2.25 10.5a8.25 8.25 0 1114.59 5.28l4.69 4.69a.75.75 0 11-1.06 1.06l-4.69-4.69A8.25 8.25 0 012.25 10.5z", clipRule: "evenodd" }) }) })
-          ] }) }),
-          /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(
-            Popover.Content,
+      label,
+      htmlFor,
+      errorId,
+      errorMessage,
+      layout,
+      required,
+      children: /* @__PURE__ */ jsxs(Popover.Root, { open: open && !disabled, onOpenChange: (o) => !disabled && setOpen(o), children: [
+        /* @__PURE__ */ jsx(Popover.Anchor, { asChild: true, children: /* @__PURE__ */ jsxs("div", { className: `flex items-center ${fieldShell({ size, hasError, disabled, focusWithin: true })}`, style, children: [
+          /* @__PURE__ */ jsx(
+            "input",
             {
-              align: "start",
-              sideOffset: 4,
-              onOpenAutoFocus: (e) => e.preventDefault(),
-              className: "w-64 bg-surface border border-border rounded-lg mt-1 shadow-md z-50 overflow-y-auto max-h-36 animate-in fade-in-0 zoom-in-95",
-              children: loading ? /* @__PURE__ */ jsxs("div", { className: "h-full w-full flex items-center justify-center gap-2 py-4 text-sm text-foreground-secondary", children: [
-                /* @__PURE__ */ jsx(LoadingSpinner, { inline: true, size: "xs" }),
-                /* @__PURE__ */ jsx("span", { children: loadingText })
-              ] }) : foundItems.length === 0 ? /* @__PURE__ */ jsx("div", { className: "h-full w-full flex flex-col items-center justify-center py-4 text-sm text-foreground-secondary", children: emptyText }) : /* @__PURE__ */ jsx("div", { role: "listbox", children: foundItems.map((item) => /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  role: "option",
-                  tabIndex: 0,
-                  className: "text-sm flex items-center gap-2 p-2 transition-colors duration-150 hover:bg-surface-raised cursor-pointer text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
-                  onClick: () => handleSelect(item),
-                  onKeyDown: (e) => {
-                    if (e.key === "Enter" || e.key === " ") {
-                      e.preventDefault();
-                      handleSelect(item);
-                    }
-                  },
-                  children: [
-                    item.icon,
-                    /* @__PURE__ */ jsxs("span", { children: [
-                      item.label,
-                      " (",
-                      item.value,
-                      ")"
-                    ] })
-                  ]
-                },
-                item.key
-              )) })
+              id: htmlFor,
+              disabled,
+              value: term,
+              onChange: (e) => {
+                setTerm(e.target.value);
+                setOpen(true);
+              },
+              onFocus: () => setOpen(true),
+              type: "text",
+              name,
+              className: "min-w-0 flex-1 bg-transparent outline-none disabled:cursor-not-allowed placeholder:text-foreground-muted",
+              style: inputStyle,
+              placeholder: placeholder ?? "",
+              autoComplete: "off",
+              "aria-haspopup": "listbox",
+              "aria-expanded": open,
+              "aria-autocomplete": "list",
+              "aria-busy": loading || void 0,
+              "aria-invalid": hasError || void 0,
+              "aria-describedby": hasError ? errorId : void 0
             }
-          ) })
-        ] }) })
-      ]
+          ),
+          loading ? /* @__PURE__ */ jsx("span", { className: "ml-2 w-4 h-4 flex-shrink-0 flex items-center justify-center text-accent", "aria-hidden": "true", children: /* @__PURE__ */ jsx(LoadingSpinner, { inline: true, size: "xs", spinnerColor: "currentColor" }) }) : /* @__PURE__ */ jsx("span", { className: "ml-2 flex-shrink-0 text-foreground-muted", children: icon ?? /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-4 h-4", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M10.5 3.75a6.75 6.75 0 100 13.5 6.75 6.75 0 000-13.5zM2.25 10.5a8.25 8.25 0 1114.59 5.28l4.69 4.69a.75.75 0 11-1.06 1.06l-4.69-4.69A8.25 8.25 0 012.25 10.5z", clipRule: "evenodd" }) }) })
+        ] }) }),
+        /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(
+          Popover.Content,
+          {
+            align: "start",
+            sideOffset: 4,
+            onOpenAutoFocus: (e) => e.preventDefault(),
+            className: "w-64 bg-surface border border-border rounded-lg mt-1 shadow-md z-50 overflow-y-auto max-h-36 animate-in fade-in-0 zoom-in-95",
+            children: loading ? /* @__PURE__ */ jsxs("div", { className: "h-full w-full flex items-center justify-center gap-2 py-4 text-sm text-foreground-secondary", children: [
+              /* @__PURE__ */ jsx(LoadingSpinner, { inline: true, size: "xs" }),
+              /* @__PURE__ */ jsx("span", { children: loadingText })
+            ] }) : foundItems.length === 0 ? /* @__PURE__ */ jsx("div", { className: "h-full w-full flex flex-col items-center justify-center py-4 text-sm text-foreground-secondary", children: emptyText }) : /* @__PURE__ */ jsx("div", { role: "listbox", children: foundItems.map((item) => /* @__PURE__ */ jsxs(
+              "div",
+              {
+                role: "option",
+                tabIndex: 0,
+                className: "text-sm flex items-center gap-2 p-2 transition-colors duration-150 hover:bg-surface-raised cursor-pointer text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
+                onClick: () => handleSelect(item),
+                onKeyDown: (e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    handleSelect(item);
+                  }
+                },
+                children: [
+                  item.icon,
+                  /* @__PURE__ */ jsxs("span", { children: [
+                    item.label,
+                    " (",
+                    item.value,
+                    ")"
+                  ] })
+                ]
+              },
+              item.key
+            )) })
+          }
+        ) })
+      ] })
     }
   );
 }
@@ -4947,27 +4965,13 @@ function TagsInput({
           className: `flex flex-wrap items-center gap-1.5 min-h-[36px] ${fieldShell({ size, hasError, disabled, focusWithin: true, sized: false })} px-2 py-1.5`,
           onClick: () => inputRef.current?.focus(),
           children: [
-            tags.map((tag, idx) => /* @__PURE__ */ jsxs(
-              "span",
+            tags.map((tag, idx) => /* @__PURE__ */ jsx(
+              Tag,
               {
-                className: "inline-flex items-center gap-1 rounded-md bg-surface-raised text-foreground text-xs pl-2 pr-1 py-0.5 border border-border",
-                children: [
-                  tag,
-                  /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      type: "button",
-                      disabled,
-                      onClick: (e) => {
-                        e.stopPropagation();
-                        removeTag(idx);
-                      },
-                      "aria-label": `Remove ${tag}`,
-                      className: "inline-flex items-center justify-center w-4 h-4 rounded text-foreground-muted hover:text-status-error hover:bg-surface transition-colors focus:outline-none focus-visible:ring-1 focus-visible:ring-accent",
-                      children: /* @__PURE__ */ jsx("svg", { width: "10", height: "10", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M15 5L5 15M5 5l10 10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })
-                    }
-                  )
-                ]
+                disabled,
+                removeLabel: `Remove ${tag}`,
+                onRemove: () => removeTag(idx),
+                children: tag
               },
               `${tag}-${idx}`
             )),
@@ -5201,9 +5205,9 @@ function Rating({
                 /* @__PURE__ */ jsx(
                   "span",
                   {
-                    className: "absolute inset-0 overflow-hidden",
+                    className: "absolute inset-y-0 left-0 overflow-hidden",
                     style: { width: `${fillFraction * 100}%` },
-                    children: icon(true)
+                    children: /* @__PURE__ */ jsx("span", { className: `block absolute inset-y-0 left-0 ${ICON_SIZE[size]} max-w-none`, children: icon(true) })
                   }
                 )
               ]