@geomak/ui 1.7.4 → 1.8.0

package/dist/index.js

@@ -197,10 +197,10 @@ function IconButton({
 }) {
   const colorScheme = useMemo(() => {
     if (type === "primary") {
-      return "hover:bg-true-blue bg-usafa-blue dark:bg-independence dark:hover:bg-black-coral";
+      return "bg-accent text-accent-fg hover:bg-accent-hover";
     }
     if (type === "bordered") {
-      return "bg-ice hover:bg-ice-dark border border-prussian-blue disabled:border-disabled";
+      return "bg-surface text-foreground hover:bg-surface-raised border border-border-strong";
     }
     return "";
   }, [type]);
@@ -210,35 +210,37 @@ function IconButton({
       type: buttonType,
       disabled: disabled || loading,
       onClick,
-      className: `${size === "sm" ? "p-1" : "p-2"} rounded-lg shadow-lg transition-all duration-150 ${colorScheme} dark:disabled:bg-manatee disabled:bg-disabled disabled:cursor-not-allowed`,
+      className: `${size === "sm" ? "p-1" : "p-2"} rounded-lg shadow-md transition-colors duration-150 ${colorScheme} disabled:bg-surface-raised disabled:text-foreground-muted disabled:cursor-not-allowed focus:outline-none focus-visible:ring-2 focus-visible:ring-accent`,
       children: loading ? loadingIcon : icon
     }
   );
 }
 var VARIANT_CLASSES = {
   primary: [
-    "bg-accent text-white",
+    "bg-accent text-accent-fg",
     "hover:bg-accent-hover",
     "active:bg-accent",
-    "disabled:bg-roman-silver disabled:text-white/70 disabled:cursor-not-allowed",
+    "disabled:bg-foreground-muted disabled:text-accent-fg/70 disabled:cursor-not-allowed",
     "focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2"
   ].join(" "),
   secondary: [
     "bg-transparent border border-accent text-accent",
-    "hover:bg-accent hover:text-white",
-    "active:bg-accent-hover active:text-white",
-    "disabled:border-roman-silver disabled:text-roman-silver disabled:cursor-not-allowed",
+    "hover:bg-accent hover:text-accent-fg",
+    "active:bg-accent-hover active:text-accent-fg",
+    "disabled:border-foreground-muted disabled:text-foreground-muted disabled:cursor-not-allowed",
     "focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2"
   ].join(" "),
   ghost: [
+    // Semantic tokens handle both light and dark modes — no `dark:`
+    // variants needed.
     "bg-transparent text-foreground-secondary",
-    "hover:bg-ice dark:hover:bg-oxford-blue-700 hover:text-foreground",
-    "active:bg-ice-dark dark:active:bg-independence",
-    "disabled:text-roman-silver disabled:cursor-not-allowed",
+    "hover:bg-surface-raised hover:text-foreground",
+    "active:bg-surface",
+    "disabled:text-foreground-muted disabled:cursor-not-allowed",
     "focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2"
   ].join(" "),
   danger: [
-    "bg-status-error text-white",
+    "bg-status-error text-accent-fg",
     "hover:opacity-90",
     "active:opacity-100",
     "disabled:opacity-50 disabled:cursor-not-allowed",
@@ -743,12 +745,14 @@ function ToggleButton({ items, onChange, activeKey }) {
           value: item.key,
           "aria-label": typeof item.label === "string" ? item.label : item.key,
           className: [
-            index === 0 && "rounded-l-lg border-r border-ice-dark",
-            index === items.length - 1 && "rounded-r-lg border-l border-ice-dark dark:border-manatee",
-            "p-2 cursor-pointer transition-all duration-300",
-            "focus:outline-none focus-visible:ring-2 focus-visible:ring-usafa-blue",
-            "bg-ice dark:bg-manatee hover:bg-ice-dark dark:hover:bg-black-coral",
-            "data-[state=on]:bg-ice-dark dark:data-[state=on]:bg-indigo-dye"
+            // 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
         },
@@ -940,59 +944,103 @@ function useNotification() {
     danger: (props) => open({ type: "danger", ...props })
   };
 }
+var SIZE_MAP = {
+  sm: { outer: "w-8 h-8", inner: "w-4 h-4", dot: "w-1 h-1", stroke: "border-2", text: "text-xs" },
+  md: { outer: "w-20 h-20", inner: "w-12 h-12", dot: "w-2 h-2", stroke: "border-[3px]", text: "text-2xl" },
+  lg: { outer: "w-32 h-32", inner: "w-20 h-20", dot: "w-3 h-3", stroke: "border-4", text: "text-4xl" }
+};
 var containerVariants = {
   hidden: {},
-  visible: { transition: { staggerChildren: 0.06 } }
+  visible: { transition: { staggerChildren: 0.05 } }
 };
 var letterVariants = {
-  hidden: { opacity: 0, y: 6 },
-  visible: { opacity: 1, y: 0, transition: { duration: 0.25, ease: "easeOut" } }
+  hidden: { opacity: 0, y: 4 },
+  visible: { opacity: 1, y: 0, transition: { duration: 0.22, ease: "easeOut" } }
 };
+function SpinnerCore({ size, color }) {
+  const dims = SIZE_MAP[size];
+  const ringColor = color ?? "var(--color-accent)";
+  return /* @__PURE__ */ jsxs("div", { className: "relative flex items-center justify-center", style: { color: ringColor }, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `${dims.outer} ${dims.stroke} rounded-full border-transparent border-t-current border-r-current animate-spin`,
+        style: { animationDuration: "1.4s" },
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `absolute ${dims.inner} ${dims.stroke} rounded-full border-transparent border-b-current border-l-current animate-spin opacity-60`,
+        style: { animationDuration: "0.9s", animationDirection: "reverse" },
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `absolute ${dims.dot} rounded-full bg-current animate-breathe`,
+        "aria-hidden": "true"
+      }
+    )
+  ] });
+}
 function LoadingSpinner({
   prompt,
+  size = "md",
+  inline = false,
   spinnerColor,
   textColor,
-  backdropOpacity = 0.92
+  backdropOpacity = 0.8
 }) {
   const reduced = useReducedMotion();
-  const letters = Array.from(prompt);
-  return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs(
+  const letters = prompt ? Array.from(prompt) : [];
+  const dims = SIZE_MAP[size];
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SpinnerCore, { size, color: spinnerColor }),
+    letters.length > 0 && /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        className: `${dims.text} font-semibold tracking-tight select-none`,
+        style: { color: textColor ?? "var(--color-foreground)" },
+        variants: containerVariants,
+        initial: reduced ? "visible" : "hidden",
+        animate: "visible",
+        "aria-hidden": "true",
+        children: letters.map((letter, index) => /* @__PURE__ */ jsx(
+          motion.span,
+          {
+            className: "inline-block whitespace-pre",
+            variants: letterVariants,
+            children: letter
+          },
+          index
+        ))
+      }
+    )
+  ] });
+  if (inline) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "status",
+        "aria-live": "polite",
+        "aria-label": prompt ?? "Loading",
+        className: "flex flex-col items-center justify-center gap-3",
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
     "div",
     {
       role: "status",
       "aria-live": "polite",
-      "aria-label": prompt,
-      className: "fixed inset-0 z-[8000000] flex flex-col items-center justify-center gap-6 bg-background",
+      "aria-label": prompt ?? "Loading",
+      className: "fixed inset-0 z-[8000000] flex flex-col items-center justify-center gap-6 bg-background backdrop-blur-sm",
       style: { opacity: backdropOpacity },
-      children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "w-20 h-20 rounded-2xl border-[6px] border-transparent border-t-current border-r-current animate-spin",
-            style: { color: spinnerColor ?? "var(--color-accent)" },
-            "aria-hidden": "true"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          motion.div,
-          {
-            className: "text-3xl font-bold tracking-tight select-none",
-            style: { color: textColor ?? "var(--color-foreground)" },
-            variants: containerVariants,
-            initial: reduced ? "visible" : "hidden",
-            animate: "visible",
-            children: letters.map((letter, index) => /* @__PURE__ */ jsx(
-              motion.span,
-              {
-                className: "inline-block whitespace-pre",
-                variants: letterVariants,
-                children: letter
-              },
-              index
-            ))
-          }
-        )
-      ]
+      children: content
     }
   ) });
 }
@@ -1018,25 +1066,43 @@ function FadingBase({
     }
   }, [isMounted]);
   if (!shouldRender) return null;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: `w-full calculated-height pl-2 pr-2 pb-2 transition-opacity duration-300 ${visible ? "opacity-100" : "opacity-0"}`,
-      children: /* @__PURE__ */ jsx("div", { className: `bg-ice dark:glassmorphism w-full h-full rounded-lg p-2 ${className}`, children })
-    }
+  return (
+    // `calculated-height` and `dark:glassmorphism` were orphaned CSS classes
+    // (never defined anywhere). Replaced with semantic `min-h-full` +
+    // `bg-surface` which works in both light and dark modes via the
+    // ThemeProvider's CSS vars.
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `w-full min-h-full pl-2 pr-2 pb-2 transition-opacity duration-300 ${visible ? "opacity-100" : "opacity-0"}`,
+        children: /* @__PURE__ */ jsx("div", { className: `bg-surface w-full h-full rounded-lg p-2 ${className}`, children })
+      }
+    )
   );
 }
 function List2({ items, onItemClick, activeKey }) {
-  return /* @__PURE__ */ jsx("div", { role: "listbox", children: items.map((item) => /* @__PURE__ */ jsx(
-    "div",
-    {
-      role: "option",
-      "aria-selected": activeKey === item.key,
-      className: `hover:bg-ice-dark dark:hover:bg-independence cursor-pointer p-3 border-b border-b-ice-dark dark:border-b-independence transition-all duration-300 ${activeKey === item.key ? "bg-ice-dark dark:bg-independence" : ""}`,
-      onClick: () => onItemClick(item),
-      children: item.label
-    },
-    item.key
+  return /* @__PURE__ */ jsx("div", { role: "listbox", children: items.map((item) => (
+    // tabIndex + Enter/Space onKeyDown makes each option
+    // keyboard-activatable. Previously the items were only mouse-
+    // clickable — keyboard-only users couldn't select anything.
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "option",
+        "aria-selected": activeKey === item.key,
+        tabIndex: 0,
+        className: `hover:bg-surface-raised cursor-pointer p-3 border-b border-border transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent ${activeKey === item.key ? "bg-surface-raised text-foreground" : "text-foreground-secondary"}`,
+        onClick: () => onItemClick(item),
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onItemClick(item);
+          }
+        },
+        children: item.label
+      },
+      item.key
+    )
   )) });
 }
 function ScalableContainer({
@@ -1066,7 +1132,7 @@ function ScalableContainer({
         width: isScaled ? "100%" : width,
         height: isScaled ? "100%" : height
       },
-      className: "rounded-lg bg-ice-dark dark:bg-prussian-blue flex flex-col transition-all duration-300 origin-center",
+      className: "rounded-lg bg-surface-raised flex flex-col transition-all duration-300 origin-center",
       children: [
         /* @__PURE__ */ jsx("div", { className: "p-2 w-max", children: /* @__PURE__ */ jsx(Tooltip, { placement: "right", title: isScaled ? "Collapse" : "Expand", children: /* @__PURE__ */ jsx(
           IconButton,
@@ -1074,10 +1140,10 @@ function ScalableContainer({
             onClick,
             icon: isScaled ? (
               /* Collapse (arrows-pointing-in) */
-              /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#fff", className: "w-5 h-5", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M3.22 3.22a.75.75 0 011.06 0l3.97 3.97V4.5a.75.75 0 011.5 0V9a.75.75 0 01-.75.75H4.5a.75.75 0 010-1.5h2.69L3.22 4.28a.75.75 0 010-1.06zm17.56 0a.75.75 0 010 1.06l-3.97 3.97h2.69a.75.75 0 010 1.5H15a.75.75 0 01-.75-.75V4.5a.75.75 0 011.5 0v2.69l3.97-3.97a.75.75 0 011.06 0zM3.75 15a.75.75 0 01.75-.75H9a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-2.69l-3.97 3.97a.75.75 0 01-1.06-1.06l3.97-3.97H4.5a.75.75 0 01-.75-.75zm10.5 0a.75.75 0 01.75-.75h4.5a.75.75 0 01.75.75 .75.75 0 01-.75.75h-2.69l3.97 3.97a.75.75 0 11-1.06 1.06l-3.97-3.97v2.69a.75.75 0 01-1.5 0V15z", clipRule: "evenodd" }) })
+              /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-5 h-5", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M3.22 3.22a.75.75 0 011.06 0l3.97 3.97V4.5a.75.75 0 011.5 0V9a.75.75 0 01-.75.75H4.5a.75.75 0 010-1.5h2.69L3.22 4.28a.75.75 0 010-1.06zm17.56 0a.75.75 0 010 1.06l-3.97 3.97h2.69a.75.75 0 010 1.5H15a.75.75 0 01-.75-.75V4.5a.75.75 0 011.5 0v2.69l3.97-3.97a.75.75 0 011.06 0zM3.75 15a.75.75 0 01.75-.75H9a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-2.69l-3.97 3.97a.75.75 0 01-1.06-1.06l3.97-3.97H4.5a.75.75 0 01-.75-.75zm10.5 0a.75.75 0 01.75-.75h4.5a.75.75 0 01.75.75 .75.75 0 01-.75.75h-2.69l3.97 3.97a.75.75 0 11-1.06 1.06l-3.97-3.97v2.69a.75.75 0 01-1.5 0V15z", clipRule: "evenodd" }) })
             ) : (
               /* Expand (arrows-pointing-out) */
-              /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#fff", className: "w-5 h-5", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M15 3a.75.75 0 01.75-.75h5.25A.75.75 0 0121 3v5.25a.75.75 0 01-1.5 0V4.81l-5.72 5.72a.75.75 0 11-1.06-1.06L18.19 3.75H15.75A.75.75 0 0115 3zM3 15a.75.75 0 01.75-.75h2.44l5.72-5.72a.75.75 0 111.06 1.06l-5.72 5.72v2.44a.75.75 0 01-1.5 0V15.75A.75.75 0 013 15zm0-11.25A.75.75 0 013.75 3h5.25a.75.75 0 010 1.5H4.81l5.72 5.72a.75.75 0 11-1.06 1.06L3.75 5.56V8.25a.75.75 0 01-1.5 0V3.75A.75.75 0 013 3zm18 12a.75.75 0 01-.75.75h-5.25a.75.75 0 010-1.5h2.44l-5.72-5.72a.75.75 0 111.06-1.06l5.72 5.72v-2.44a.75.75 0 011.5 0V15z", clipRule: "evenodd" }) })
+              /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-5 h-5", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M15 3a.75.75 0 01.75-.75h5.25A.75.75 0 0121 3v5.25a.75.75 0 01-1.5 0V4.81l-5.72 5.72a.75.75 0 11-1.06-1.06L18.19 3.75H15.75A.75.75 0 0115 3zM3 15a.75.75 0 01.75-.75h2.44l5.72-5.72a.75.75 0 111.06 1.06l-5.72 5.72v2.44a.75.75 0 01-1.5 0V15.75A.75.75 0 013 15zm0-11.25A.75.75 0 013.75 3h5.25a.75.75 0 010 1.5H4.81l5.72 5.72a.75.75 0 11-1.06 1.06L3.75 5.56V8.25a.75.75 0 01-1.5 0V3.75A.75.75 0 013 3zm18 12a.75.75 0 01-.75.75h-5.25a.75.75 0 010-1.5h2.44l-5.72-5.72a.75.75 0 111.06-1.06l5.72 5.72v-2.44a.75.75 0 011.5 0V15z", clipRule: "evenodd" }) })
             )
           }
         ) }) }),
@@ -1253,7 +1319,7 @@ function MenuBarItem({ icon, isActive, title, onClick }) {
       role: "button",
       "aria-label": title,
       "aria-current": isActive ? "page" : void 0,
-      className: `transition duration-300 hover:bg-prussian-blue ${isActive ? "bg-prussian-blue" : ""} rounded-lg p-2 cursor-pointer`,
+      className: `transition duration-300 hover:bg-accent hover:text-accent-fg ${isActive ? "bg-accent text-accent-fg" : "text-foreground-secondary"} rounded-lg p-2 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-accent`,
       onClick,
       tabIndex: 0,
       onKeyDown: (e) => {
@@ -1267,22 +1333,26 @@ function MenuBarItem({ icon, isActive, title, onClick }) {
   ) });
 }
 function MenuBar({ items }) {
-  return /* @__PURE__ */ jsx(
-    "nav",
-    {
-      "aria-label": "Main navigation",
-      className: "w-16 calculated-height bg-independence rounded-tr-lg rounded-br-lg flex flex-col gap-2 items-center p-2 z-50",
-      children: items.map((item) => /* @__PURE__ */ jsx(
-        MenuBarItem,
-        {
-          icon: item.icon,
-          title: item.title,
-          isActive: item.isActive,
-          onClick: item.onClick
-        },
-        item.key
-      ))
-    }
+  return (
+    // `calculated-height` was an orphaned CSS class. Replaced with `h-full`
+    // so the MenuBar fills whatever vertical space its parent gives it.
+    /* @__PURE__ */ jsx(
+      "nav",
+      {
+        "aria-label": "Main navigation",
+        className: "w-16 h-full bg-surface-raised rounded-tr-lg rounded-br-lg flex flex-col gap-2 items-center p-2 z-50",
+        children: items.map((item) => /* @__PURE__ */ jsx(
+          MenuBarItem,
+          {
+            icon: item.icon,
+            title: item.title,
+            isActive: item.isActive,
+            onClick: item.onClick
+          },
+          item.key
+        ))
+      }
+    )
   );
 }
 function ContextMenu({ items, position, visible, onClose }) {
@@ -1487,8 +1557,8 @@ var SearchInput = React9.forwardRef(function SearchInput2({
       className: `flex ${layout === "vertical" ? "flex-col" : "flex-row items-center gap-2"}`,
       style: style ?? {},
       children: [
-        label && /* @__PURE__ */ jsx("label", { className: "text-lg font-bold ml-1 max-content text-prussian-blue dark:text-white", htmlFor, children: label }),
-        /* @__PURE__ */ jsxs("div", { className: "bg-white flex items-center gap-1 rounded-lg focus:outline-oxford-blue-700-opaque pr-2", children: [
+        label && /* @__PURE__ */ jsx("label", { className: "text-sm font-medium ml-1 max-content text-foreground", htmlFor, children: label }),
+        /* @__PURE__ */ jsxs("div", { className: "bg-surface text-foreground flex items-center gap-1 rounded-lg border border-border pr-2 focus-within:ring-2 focus-within:ring-accent transition-colors", children: [
           /* @__PURE__ */ jsx(
             "input",
             {
@@ -1500,12 +1570,12 @@ var SearchInput = React9.forwardRef(function SearchInput2({
               enterKeyHint: "search",
               name,
               id: htmlFor,
-              className: "focus:outline-none pl-2 h-9 w-56 outline-offset-2 text-prussian-blue mt-1 rounded-lg disabled:bg-disabled disabled:cursor-not-allowed",
+              className: "bg-transparent focus:outline-none pl-2 h-9 w-56 rounded-lg disabled:cursor-not-allowed",
               style: inputStyle ?? {},
               placeholder: placeholder ?? ""
             }
           ),
-          /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: colors_default.PALETTE["prussian-blue"], className: "w-6 h-6", 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("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-5 h-5 text-foreground-muted", "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" }) })
         ] })
       ]
     }
@@ -1516,7 +1586,7 @@ function DropdownPill({ value, hasSiblings = false }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: `bg-prussian-blue text-white text-sm text-ellipsis ${hasSiblings ? "w-24" : "w-max"} p-1 rounded-lg whitespace-nowrap overflow-hidden`,
+      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
     }
   );
@@ -1539,9 +1609,10 @@ function Dropdown({
 }) {
   const [open, setOpen] = useState(false);
   const [selectedItems, setSelectedItems] = useState([]);
-  const [hoveredItem, setHoveredItem] = useState(null);
   const [searchTerm, setSearchTerm] = useState("");
   const [innerItems, setInnerItems] = useState([]);
+  const errorId = useId();
+  const hasError = errorMessage != null;
   useEffect(() => {
     setInnerItems(items);
   }, [items]);
@@ -1580,7 +1651,7 @@ function Dropdown({
           label && /* @__PURE__ */ jsx(
             "label",
             {
-              className: "text-md font-bold ml-1 max-content select-none text-prussian-blue dark:text-white",
+              className: "text-sm font-medium ml-1 max-content select-none text-foreground",
               htmlFor,
               style: labelStyle,
               children: label
@@ -1594,16 +1665,24 @@ function Dropdown({
                 role: "combobox",
                 "aria-expanded": open,
                 "aria-haspopup": "listbox",
+                "aria-invalid": hasError || void 0,
+                "aria-describedby": hasError ? errorId : void 0,
                 style,
-                className: `flex items-center justify-between relative h-9 rounded-lg cursor-pointer select-none ${disabled ? "cursor-not-allowed bg-disabled" : "bg-white"}`,
+                className: `flex items-center justify-between relative h-9 rounded-lg border border-border cursor-pointer select-none focus:outline-none focus-visible:ring-2 focus-visible:ring-accent ${disabled ? "cursor-not-allowed bg-surface-raised text-foreground-muted" : "bg-surface text-foreground"} ${hasError ? "border-status-error" : ""}`,
                 tabIndex: disabled ? -1 : 0,
-                onKeyDown: (e) => e.key === "Enter" && !disabled && setOpen(true),
+                onKeyDown: (e) => {
+                  if (disabled) return;
+                  if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown" || e.key === "ArrowUp") {
+                    e.preventDefault();
+                    setOpen(true);
+                  }
+                },
                 children: [
                   /* @__PURE__ */ jsx(
                     "div",
                     {
-                      className: `h-7 pl-2 ${!style?.width ? "min-w-[240px]" : ""} focus:outline-none text-prussian-blue flex items-center gap-1 overflow-hidden`,
-                      children: !value || Array.isArray(value) && value.length === 0 ? /* @__PURE__ */ jsx("span", { className: "text-roman-silver text-sm", children: placeholder }) : Array.isArray(value) ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                      className: `h-7 pl-2 ${!style?.width ? "min-w-[240px]" : ""} 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,
                           {
@@ -1616,7 +1695,7 @@ function Dropdown({
                       ] }) : /* @__PURE__ */ jsx(DropdownPill, { value: innerItems.find((it) => it.key === value)?.label })
                     }
                   ),
-                  /* @__PURE__ */ jsx("div", { className: `transition-transform duration-300 mr-2 ${open ? "rotate-180" : "rotate-0"}`, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: colors_default.PALETTE["prussian-blue"], strokeWidth: 2, className: "h-4 w-4", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) }) })
+                  /* @__PURE__ */ jsx("div", { className: `transition-transform duration-200 mr-2 ${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" }) }) })
                 ]
               }
             ) }),
@@ -1626,7 +1705,7 @@ function Dropdown({
                 align: "start",
                 sideOffset: 4,
                 style: { width: style?.width || 240 },
-                className: "bg-ice rounded-lg shadow-md z-50 p-2 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+                className: "bg-surface text-foreground border border-border rounded-lg shadow-md z-50 p-2 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
                 onInteractOutside: () => setOpen(false),
                 children: [
                   hasSearch && /* @__PURE__ */ jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsx(
@@ -1639,34 +1718,50 @@ function Dropdown({
                       placeholder: "Search..."
                     }
                   ) }),
-                  /* @__PURE__ */ jsx("div", { role: "listbox", "aria-multiselectable": isMultiselect, className: "max-h-40 overflow-y-auto", children: innerItems.map((item, idx) => /* @__PURE__ */ jsxs(
-                    "div",
-                    {
-                      role: "option",
-                      "aria-selected": isSelected(item.key),
-                      "aria-rowindex": idx,
-                      className: `flex items-center justify-between p-2 hover:bg-prussian-blue hover:text-white transition-all duration-150 text-sm text-prussian-blue rounded-lg cursor-pointer ${selectedItems.includes(item.key) ? "bg-ice-dark" : ""}`,
-                      onClick: () => selectItem(item.key),
-                      onMouseEnter: () => setHoveredItem(item.key),
-                      onMouseLeave: () => setHoveredItem(null),
-                      children: [
-                        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs", children: [
-                          item.icon && /* @__PURE__ */ jsx("div", { children: item.icon }),
-                          item.label
-                        ] }),
-                        isSelected(item.key) && /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx(
-                          "path",
-                          {
-                            d: "M4 10l4.5 4.5L16 6",
-                            stroke: hoveredItem === item.key ? "#fff" : colors_default.PALETTE["prussian-blue"],
-                            strokeWidth: "2",
-                            strokeLinecap: "round",
-                            strokeLinejoin: "round"
+                  /* @__PURE__ */ jsx("div", { role: "listbox", "aria-multiselectable": isMultiselect, className: "max-h-40 overflow-y-auto", children: innerItems.map((item) => (
+                    // aria-rowindex was previously set here but
+                    // it's invalid ARIA on role="option" (it
+                    // belongs on rows of a grid/treegrid). Dropped.
+                    // tabIndex={0} + Enter/Space handler makes the
+                    // option keyboard-activatable; the full
+                    // combobox roving-tabindex pattern is deferred
+                    // until the planned Phase-5 rewrite.
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        role: "option",
+                        "aria-selected": isSelected(item.key),
+                        tabIndex: 0,
+                        className: `flex items-center justify-between p-2 hover:bg-accent hover:text-accent-fg transition-colors duration-150 text-sm rounded-lg cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-accent ${selectedItems.includes(item.key) ? "bg-surface-raised text-foreground" : "text-foreground"}`,
+                        onClick: () => selectItem(item.key),
+                        onKeyDown: (e) => {
+                          if (e.key === "Enter" || e.key === " ") {
+                            e.preventDefault();
+                            selectItem(item.key);
                           }
-                        ) })
-                      ]
-                    },
-                    item.key
+                        },
+                        children: [
+                          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs", children: [
+                            item.icon && /* @__PURE__ */ jsx("div", { children: item.icon }),
+                            item.label
+                          ] }),
+                          isSelected(item.key) && // currentColor — checkmark follows
+                          // the item's text colour, which
+                          // flips automatically on hover.
+                          /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+                            "path",
+                            {
+                              d: "M4 10l4.5 4.5L16 6",
+                              stroke: "currentColor",
+                              strokeWidth: "2",
+                              strokeLinecap: "round",
+                              strokeLinejoin: "round"
+                            }
+                          ) })
+                        ]
+                      },
+                      item.key
+                    )
                   )) })
                 ]
               }
@@ -1675,7 +1770,7 @@ function Dropdown({
         ]
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "text-center text-error dark:text-prussian-blue min-h-0", children: errorMessage })
+    hasError && /* @__PURE__ */ jsx("div", { id: errorId, className: "text-center text-status-error text-xs mt-1", children: errorMessage })
   ] });
 }
 var DEFAULT_PICKER = [
@@ -1845,10 +1940,11 @@ function Pagination({
         isMultiselect: false,
         value: displayPerPageKey,
         onChange: ({ target: { value } }) => {
-          const key = typeof value === "string" && /^\d+$/.test(value) ? Number(value) : value;
-          if (!serverSide) setPerPageKey(key);
-          const opt = picker.find((o) => o.key === key);
-          onPerPageChange(opt?.label ?? opt?.value ?? key);
+          if (Array.isArray(value)) return;
+          const numKey = typeof value === "number" ? value : Number(value);
+          if (!serverSide) setPerPageKey(numKey);
+          const opt = picker.find((o) => o.key === numKey);
+          onPerPageChange(opt?.label ?? opt?.value ?? numKey);
         }
       }
     )
@@ -2501,6 +2597,8 @@ function TextInput({
   errorMessage,
   labelColor
 }) {
+  const errorId = useId();
+  const hasError = errorMessage != null;
   return /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col items-center justify-center", children: [
     /* @__PURE__ */ jsxs(
       "div",
@@ -2515,7 +2613,7 @@ function TextInput({
             "label",
             {
               style: { color: labelColor || void 0 },
-              className: `text-md font-bold ml-1 max-content ${!labelColor && "text-prussian-blue dark:text-white"}`,
+              className: `text-sm font-medium ml-1 max-content ${!labelColor && "text-foreground"}`,
               htmlFor,
               children: label
             }
@@ -2531,7 +2629,9 @@ function TextInput({
               type: "text",
               name,
               id: htmlFor,
-              className: `${errorMessage !== void 0 ? "border border-error" : ""} focus:outline-oxford-blue-700-opaque p-2 h-9 w-60 outline-offset-2 text-prussian-blue mt-1 rounded-lg disabled:bg-disabled disabled:cursor-not-allowed transition-all`,
+              "aria-invalid": hasError || void 0,
+              "aria-describedby": hasError ? errorId : void 0,
+              className: `${hasError ? "border border-status-error" : "border border-border"} bg-surface text-foreground p-2 h-9 w-60 mt-1 rounded-lg disabled:bg-surface-raised disabled:text-foreground-muted disabled:cursor-not-allowed focus:outline-none focus-visible:ring-2 focus-visible:ring-accent transition-colors`,
               style: inputStyle ?? {},
               placeholder: placeholder ?? ""
             }
@@ -2539,7 +2639,7 @@ function TextInput({
         ]
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "text-center text-error dark:text-prussian-blue min-h-0", children: errorMessage })
+    hasError && /* @__PURE__ */ jsx("div", { id: errorId, className: "text-center text-status-error text-xs mt-1", children: errorMessage })
   ] });
 }
 function NumberInput({
@@ -2654,17 +2754,15 @@ function Password({
   iconColor
 }) {
   const [passwordVisible, setPasswordVisible] = useState(false);
-  const color = iconColor ?? colors_default.PALETTE["prussian-blue"];
+  const errorId = useId();
+  const hasError = errorMessage != null;
   return /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col items-center justify-center", style: style ?? {}, children: [
     /* @__PURE__ */ jsxs("div", { className: `flex ${layout === "vertical" ? "flex-col" : "flex-row items-center gap-2"}`, children: [
-      label && // Render <label> only when a label is provided. An empty
-      // <label htmlFor=…> announces as an unlabeled control in
-      // some screen readers.
-      /* @__PURE__ */ jsx(
+      label && /* @__PURE__ */ jsx(
         "label",
         {
           style: { color: labelColor || void 0 },
-          className: `text-md font-bold ml-1 max-content ${!labelColor && "text-prussian-blue dark:text-white"}`,
+          className: `text-sm font-medium ml-1 max-content ${!labelColor && "text-foreground"}`,
           htmlFor,
           children: label
         }
@@ -2681,7 +2779,9 @@ function Password({
             type: passwordVisible ? "text" : "password",
             name,
             id: htmlFor,
-            className: `${errorMessage !== void 0 ? "border border-error" : ""} focus:outline-oxford-blue-700-opaque p-2 h-9 w-52 outline-offset-2 text-prussian-blue mt-1 rounded-lg disabled:bg-disabled disabled:cursor-not-allowed transition-all`,
+            "aria-invalid": hasError || void 0,
+            "aria-describedby": hasError ? errorId : void 0,
+            className: `${hasError ? "border border-status-error" : "border border-border"} bg-surface text-foreground p-2 h-9 w-52 mt-1 rounded-lg disabled:bg-surface-raised disabled:text-foreground-muted disabled:cursor-not-allowed focus:outline-none focus-visible:ring-2 focus-visible:ring-accent transition-colors`,
             style: inputStyle ?? {},
             placeholder: placeholder ?? ""
           }
@@ -2690,19 +2790,20 @@ function Password({
           "button",
           {
             type: "button",
-            className: "cursor-pointer p-1",
+            className: "cursor-pointer p-1 text-foreground-secondary hover:text-foreground rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
+            style: iconColor ? { color: iconColor } : void 0,
             onClick: () => setPasswordVisible(!passwordVisible),
             "aria-label": passwordVisible ? "Hide password" : "Show password",
             children: passwordVisible ? (
               /* EyeSlash */
-              /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: color, className: "w-6 h-6", children: [
+              /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-6 h-6", children: [
                 /* @__PURE__ */ jsx("path", { d: "M3.53 2.47a.75.75 0 00-1.06 1.06l18 18a.75.75 0 101.06-1.06l-18-18zM22.676 12.553a11.249 11.249 0 01-2.631 4.31l-3.099-3.099a5.25 5.25 0 00-6.71-6.71L7.759 4.577a11.217 11.217 0 014.242-.827c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113z" }),
                 /* @__PURE__ */ jsx("path", { d: "M15.75 12c0 .18-.013.357-.037.53l-4.244-4.243A3.75 3.75 0 0115.75 12zM12.53 15.713l-4.243-4.244a3.75 3.75 0 004.243 4.243z" }),
                 /* @__PURE__ */ jsx("path", { d: "M6.75 12c0-.619.107-1.213.304-1.764l-3.1-3.1a11.25 11.25 0 00-2.63 4.31c-.12.362-.12.752 0 1.114 1.489 4.467 5.704 7.69 10.675 7.69 1.5 0 2.933-.294 4.242-.827l-2.477-2.477A5.25 5.25 0 016.75 12z" })
               ] })
             ) : (
               /* Eye */
-              /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: color, className: "w-6 h-6", children: [
+              /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-6 h-6", children: [
                 /* @__PURE__ */ jsx("path", { d: "M12 15a3 3 0 100-6 3 3 0 000 6z" }),
                 /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M1.323 11.447C2.811 6.976 7.028 3.75 12.001 3.75c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113-1.487 4.471-5.705 7.697-10.677 7.697-4.97 0-9.186-3.223-10.675-7.69a1.762 1.762 0 010-1.113zM17.25 12a5.25 5.25 0 11-10.5 0 5.25 5.25 0 0110.5 0z", clipRule: "evenodd" })
               ] })
@@ -2711,7 +2812,7 @@ function Password({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "text-center text-error dark:text-prussian-blue min-h-0", children: errorMessage })
+    hasError && /* @__PURE__ */ jsx("div", { id: errorId, className: "text-center text-status-error text-xs mt-1", children: errorMessage })
   ] });
 }
 function Checkbox({
@@ -2800,22 +2901,25 @@ function Switch({
   uncheckedIcon
 }) {
   const id = useId();
-  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("label", { htmlFor: id, className: "flex items-center cursor-pointer mr-12 select-none", children: /* @__PURE__ */ jsx(
-    SwitchPrimitive.Root,
-    {
-      id,
-      checked,
-      onCheckedChange: (c) => onChange?.({ target: { checked: c } }),
-      className: "relative inline-flex h-6 w-14 items-center rounded-full bg-prussian-blue dark:bg-white transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-usafa-blue",
-      children: /* @__PURE__ */ jsx(
-        SwitchPrimitive.Thumb,
-        {
-          className: "pointer-events-none inline-flex h-8 w-8 items-center justify-center rounded-full bg-independence dark:bg-prussian-blue shadow transition-transform duration-200 data-[state=checked]:translate-x-[22px] data-[state=unchecked]:translate-x-[-4px]",
-          children: checkedIcon && uncheckedIcon ? checked ? checkedIcon : uncheckedIcon : null
-        }
-      )
-    }
-  ) }) });
+  return /* @__PURE__ */ jsxs("div", { children: [
+    "// mr-12 was a hardcoded right margin that broke layouts; spacing // is the parent's responsibility now.",
+    /* @__PURE__ */ jsx("label", { htmlFor: id, className: "flex items-center cursor-pointer select-none", children: /* @__PURE__ */ jsx(
+      SwitchPrimitive.Root,
+      {
+        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",
+        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
+          }
+        )
+      }
+    ) })
+  ] });
 }
 function AutoComplete({
   disabled,
@@ -2845,9 +2949,9 @@ function AutoComplete({
       className: `flex ${layout === "vertical" ? "flex-col" : "flex-row items-center gap-2"}`,
       style: style ?? {},
       children: [
-        label && /* @__PURE__ */ jsx("label", { className: "text-lg font-bold ml-1 max-content text-prussian-blue dark:text-white", children: label }),
+        label && /* @__PURE__ */ jsx("label", { className: "text-sm font-medium ml-1 max-content text-foreground", children: label }),
         /* @__PURE__ */ jsxs(Popover.Root, { open: open && !disabled, onOpenChange: (o) => !disabled && setOpen(o), children: [
-          /* @__PURE__ */ jsx(Popover.Anchor, { asChild: true, children: /* @__PURE__ */ jsxs("div", { className: "bg-white flex items-center gap-1 rounded-lg pr-2", children: [
+          /* @__PURE__ */ jsx(Popover.Anchor, { asChild: true, children: /* @__PURE__ */ jsxs("div", { className: "bg-surface text-foreground flex items-center gap-1 rounded-lg border border-border pr-2 focus-within:ring-2 focus-within:ring-accent transition-colors", children: [
             /* @__PURE__ */ jsx(
               "input",
               {
@@ -2860,7 +2964,7 @@ function AutoComplete({
                 onFocus: () => setOpen(true),
                 type: "text",
                 name,
-                className: "focus:outline-none pl-2 h-9 w-56 outline-offset-2 text-prussian-blue mt-1 rounded-lg disabled:bg-disabled disabled:cursor-not-allowed",
+                className: "bg-transparent focus:outline-none pl-2 h-9 w-56 rounded-lg disabled:cursor-not-allowed",
                 style: inputStyle ?? {},
                 placeholder: placeholder ?? "",
                 autoComplete: "off",
@@ -2869,7 +2973,7 @@ function AutoComplete({
                 "aria-autocomplete": "list"
               }
             ),
-            /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: colors_default.PALETTE["prussian-blue"], className: "w-5 h-5 flex-shrink-0", 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("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-5 h-5 flex-shrink-0 text-foreground-muted", "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,
@@ -2877,24 +2981,37 @@ function AutoComplete({
               align: "start",
               sideOffset: 4,
               onOpenAutoFocus: (e) => e.preventDefault(),
-              className: "w-64 bg-ice dark:bg-midnight-green-eagle-900 rounded-lg mt-1 shadow-md z-50 overflow-y-auto max-h-36 animate-in fade-in-0 zoom-in-95",
-              children: foundItems.length === 0 ? /* @__PURE__ */ jsx("div", { className: "h-full w-full flex flex-col items-center justify-center py-4 text-sm text-prussian-blue dark:text-white", children: emptyText }) : /* @__PURE__ */ jsx("div", { role: "listbox", children: foundItems.map((item) => /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  role: "option",
-                  className: "text-sm flex items-center gap-2 p-2 transition-all duration-150 hover:bg-ice-dark dark:hover:bg-prussian-blue cursor-pointer text-prussian-blue dark:text-white",
-                  onClick: () => handleSelect(item),
-                  children: [
-                    item.icon,
-                    /* @__PURE__ */ jsxs("span", { children: [
-                      item.label,
-                      " (",
-                      item.value,
-                      ")"
-                    ] })
-                  ]
-                },
-                item.key
+              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: 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) => (
+                // tabIndex + Enter/Space onKeyDown
+                // makes each option keyboard-activatable.
+                // Full roving-tabindex / arrow-key nav
+                // is deferred to the Phase-5 rewrite.
+                /* @__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
+                )
               )) })
             }
           ) })
@@ -3069,7 +3186,7 @@ function FileInput({
             openPicker();
           }
         },
-        className: "border-2 hover:border-prussian-blue border-ice-dark w-full h-full rounded-md transition-all duration-300 border-dashed dark:border-independence hover:dark:border-ice-dark cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
+        className: "border-2 border-dashed border-border hover:border-accent w-full h-full rounded-md transition-colors duration-200 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-accent text-foreground-secondary hover:text-foreground",
         onDragOver: (e) => e.preventDefault(),
         onDrop,
         children: [
@@ -3087,28 +3204,28 @@ function FileInput({
             }
           ),
           files.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full items-center justify-center gap-2", children: [
-            /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: colors_default.PALETTE["prussian-blue"], className: "w-16 h-16 dark:fill-white", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M11.47 2.47a.75.75 0 011.06 0l4.5 4.5a.75.75 0 01-1.06 1.06l-3.22-3.22V16.5a.75.75 0 01-1.5 0V4.81L8.03 8.03a.75.75 0 01-1.06-1.06l4.5-4.5zM3 15.75a.75.75 0 01.75.75v2.25a1.5 1.5 0 001.5 1.5h13.5a1.5 1.5 0 001.5-1.5V16.5a.75.75 0 011.5 0v2.25a3 3 0 01-3 3H5.25a3 3 0 01-3-3V16.5a.75.75 0 01.75-.75z", clipRule: "evenodd" }) }),
-            /* @__PURE__ */ jsx("div", { className: "text-prussian-blue dark:text-white text-sm", children: "Click or Drop a file" })
-          ] }) : /* @__PURE__ */ jsx("div", { className: "flex gap-3 items-center justify-center w-full h-full", children: files.map((file, id) => /* @__PURE__ */ jsxs(
+            /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-16 h-16", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M11.47 2.47a.75.75 0 011.06 0l4.5 4.5a.75.75 0 01-1.06 1.06l-3.22-3.22V16.5a.75.75 0 01-1.5 0V4.81L8.03 8.03a.75.75 0 01-1.06-1.06l4.5-4.5zM3 15.75a.75.75 0 01.75.75v2.25a1.5 1.5 0 001.5 1.5h13.5a1.5 1.5 0 001.5-1.5V16.5a.75.75 0 011.5 0v2.25a3 3 0 01-3 3H5.25a3 3 0 01-3-3V16.5a.75.75 0 01.75-.75z", clipRule: "evenodd" }) }),
+            /* @__PURE__ */ jsx("div", { className: "text-sm", children: "Click or Drop a file" })
+          ] }) : /* @__PURE__ */ jsx("div", { className: "flex gap-3 items-center justify-center w-full h-full p-3", children: files.map((file, id) => /* @__PURE__ */ jsxs(
             "div",
             {
-              className: "text-xs flex flex-col items-center w-20 h-24 text-center bg-ice-dark p-4 dark:bg-independence rounded-md relative",
+              className: "text-xs flex flex-col items-center w-20 h-24 text-center bg-surface-raised text-foreground p-4 rounded-md relative",
               children: [
                 /* @__PURE__ */ jsx(
                   "button",
                   {
                     type: "button",
                     onClick: removeFile,
-                    className: "bg-error rounded-full w-4 h-4 absolute right-[-5px] top-[-5px] cursor-pointer flex items-center justify-center",
+                    className: "bg-status-error rounded-full w-4 h-4 absolute right-[-5px] top-[-5px] cursor-pointer flex items-center justify-center focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
                     "aria-label": "Remove file",
-                    children: /* @__PURE__ */ jsx("svg", { width: "10", height: "10", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M15 5L5 15M5 5l10 10", stroke: "#fff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                    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: "#fff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
                   }
                 ),
-                /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: colors_default.PALETTE["prussian-blue"], className: "w-10 h-10 dark:fill-white", children: [
+                /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-10 h-10", "aria-hidden": "true", children: [
                   /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M5.625 1.5c-1.036 0-1.875.84-1.875 1.875v17.25c0 1.035.84 1.875 1.875 1.875h12.75c1.035 0 1.875-.84 1.875-1.875V12.75A3.75 3.75 0 0016.5 9h-1.875a1.875 1.875 0 01-1.875-1.875V5.25A3.75 3.75 0 009 1.5H5.625z", clipRule: "evenodd" }),
                   /* @__PURE__ */ jsx("path", { d: "M12.971 1.816A5.23 5.23 0 0114.25 5.25v1.875c0 .207.168.375.375.375H16.5a5.23 5.23 0 013.434 1.279 9.768 9.768 0 00-6.963-6.963z" })
                 ] }),
-                /* @__PURE__ */ jsx("span", { className: "text-ellipsis whitespace-nowrap overflow-hidden w-full text-prussian-blue dark:text-white", children: file.name })
+                /* @__PURE__ */ jsx("span", { className: "text-ellipsis whitespace-nowrap overflow-hidden w-full", children: file.name })
               ]
             },
             `${id}${file.name}`