@geomak/ui 5.5.0 → 5.5.2

package/dist/index.js

@@ -9,12 +9,12 @@ import { useReducedMotion, AnimatePresence, motion } from 'framer-motion';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as Accordion from '@radix-ui/react-accordion';
-import * as ToggleGroup from '@radix-ui/react-toggle-group';
 import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
 import * as Popover from '@radix-ui/react-popover';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import * as ToggleGroup from '@radix-ui/react-toggle-group';
 import * as SliderPrimitive from '@radix-ui/react-slider';
 
 var Moon = ({ color = "gray" }) => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: color, viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: color, className: "w-8 h-8", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" }) });
@@ -1143,38 +1143,6 @@ function Tree({
     item.key
   )) });
 }
-function ToggleButton({ items, onChange, activeKey }) {
-  return /* @__PURE__ */ jsx(
-    ToggleGroup.Root,
-    {
-      type: "single",
-      value: activeKey,
-      onValueChange: (val) => {
-        if (val) onChange(val);
-      },
-      className: "flex items-center",
-      children: items.map((item, index) => /* @__PURE__ */ jsx(
-        ToggleGroup.Item,
-        {
-          value: item.key,
-          "aria-label": typeof item.label === "string" ? item.label : item.key,
-          className: [
-            // Semantic tokens handle both light and dark modes via
-            // CSS vars — no `dark:` variants needed.
-            index === 0 && "rounded-l-lg border-r border-border",
-            index === items.length - 1 && "rounded-r-lg border-l border-border",
-            "p-2 cursor-pointer transition-colors duration-150 text-foreground-secondary",
-            "focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
-            "bg-surface hover:bg-surface-raised",
-            "data-[state=on]:bg-accent data-[state=on]:text-accent-fg"
-          ].filter(Boolean).join(" "),
-          children: item.icon ?? item.label
-        },
-        item.key
-      ))
-    }
-  );
-}
 var NotificationContext = createContext({
   open: () => void 0,
   close: () => void 0
@@ -1576,6 +1544,10 @@ var TOGGLE_POSITION_CLASS = {
 function ScalableContainer({
   width = "100%",
   height = "auto",
+  expandedWidth = "100%",
+  expandedHeight = "100%",
+  expanded,
+  onExpandedChange,
   children,
   assignClassOnClick,
   expandIcon,
@@ -1583,27 +1555,32 @@ function ScalableContainer({
   togglePosition = "top-right"
 }) {
   const containerRef = useRef(null);
-  const [isScaled, setScaled] = useState(false);
+  const [internalScaled, setInternalScaled] = useState(false);
+  const isScaled = expanded ?? internalScaled;
   const reduced = useReducedMotion();
   const onToggle = () => {
     const next = !isScaled;
-    setScaled(next);
-    requestAnimationFrame(() => containerRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest" }));
+    if (expanded === void 0) setInternalScaled(next);
+    onExpandedChange?.(next);
+    if (next) {
+      window.setTimeout(
+        () => containerRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest" }),
+        reduced ? 0 : 340
+      );
+    }
   };
   const wrapperClass = isScaled ? assignClassOnClick : void 0;
   return /* @__PURE__ */ jsxs(
     motion.div,
     {
       ref: containerRef,
-      layout: true,
       animate: {
-        width: isScaled ? "100%" : width,
-        height: isScaled ? "100%" : height
+        width: isScaled ? expandedWidth : width,
+        height: isScaled ? expandedHeight : height
       },
       transition: reduced ? { duration: 0 } : {
         width: { type: "tween", duration: 0.32, ease: [0.16, 1, 0.3, 1] },
-        height: { type: "tween", duration: 0.32, ease: [0.16, 1, 0.3, 1] },
-        layout: { duration: 0.32, ease: [0.16, 1, 0.3, 1] }
+        height: { type: "tween", duration: 0.32, ease: [0.16, 1, 0.3, 1] }
       },
       className: [
         "relative rounded-lg overflow-hidden",
@@ -2139,10 +2116,10 @@ var FIELD_SIZE = {
   md: { control: "h-control-md", text: "text-sm", padX: "px-3", gap: "gap-2" },
   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_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_WITHIN = "focus-within:outline-none focus-within:border-accent";
+var FOCUS_ELEMENT = "focus:outline-none focus:border-accent data-[state=open]:border-accent";
+var FOCUS_WITHIN_ERROR = "focus-within:border-status-error";
+var FOCUS_ELEMENT_ERROR = "focus:border-status-error data-[state=open]:border-status-error";
 function fieldShell({
   size = "md",
   hasError = false,
@@ -2161,8 +2138,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 +2174,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 +2222,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 +2256,6 @@ function Dropdown({
   items = [],
   labelStyle = {},
   placeholder,
-  showSelectedCount = false,
   size = "md"
 }) {
   const [open, setOpen] = useState(false);
@@ -2295,6 +2283,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 +2304,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 +2330,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 +2343,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 +3555,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 +3708,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 +3734,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 +3787,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 +4942,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 +5182,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) })
                   }
                 )
               ]
@@ -5642,6 +5623,6 @@ function ColorPicker({
   ] });
 }
 
-export { AppShell, AutoComplete, Avatar, Box, Button, Catalog, CatalogCarousel, CatalogGrid, Checkbox, ColorPicker, ContextMenu, DateRangePicker, Drawer, Dropdown, FadingBase, Field, FileInput, Flex, Grid2 as Grid, GridCard, icons_default as Icon, IconButton, List2 as List, LoadingSpinner, Modal, NotificationProvider, NumberInput, OpaqueGridCard, OtpInput, Password, Portal, RadioGroup, Rating, ScalableContainer, SearchInput_default as SearchInput, SegmentedControl, Sidebar, SkeletonBox, SkeletonCard, SkeletonCircle, SkeletonText, Slider, Switch, Table, Tabs, TagsInput, DatePicker as Temporal, TextArea, TextInput, ThemeProvider, ThemeSwitch, TimePicker, ToggleButton, Tooltip, TooltipProvider, TopBar, Tree, TreeSelect, Typography, Wizard, fieldShell, useNotification };
+export { AppShell, AutoComplete, Avatar, Box, Button, Catalog, CatalogCarousel, CatalogGrid, Checkbox, ColorPicker, ContextMenu, DateRangePicker, Drawer, Dropdown, FadingBase, Field, FileInput, Flex, Grid2 as Grid, GridCard, icons_default as Icon, IconButton, List2 as List, LoadingSpinner, Modal, NotificationProvider, NumberInput, OpaqueGridCard, OtpInput, Password, Portal, RadioGroup, Rating, ScalableContainer, SearchInput_default as SearchInput, SegmentedControl, Sidebar, SkeletonBox, SkeletonCard, SkeletonCircle, SkeletonText, Slider, Switch, Table, Tabs, TagsInput, DatePicker as Temporal, TextArea, TextInput, ThemeProvider, ThemeSwitch, TimePicker, Tooltip, TooltipProvider, TopBar, Tree, TreeSelect, Typography, Wizard, fieldShell, useNotification };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map