@geomak/ui 1.7.4 → 1.7.5

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 export { C as COLORS, S as SemanticColorKey, a as SemanticSharedKey, V as VarColorKey, b as VarDensityKey, c as VarMotionKey, d as VarRadiusKey, e as VarShadowKey, f as VarTypoKey, g as VarZIndexKey, P as palette, s as semanticTokens, v as vars } from './index-CvyV3YPI.cjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React$1 from 'react';
+import React$1, { ReactNode } from 'react';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 
 declare const Icon: {
@@ -652,7 +652,6 @@ declare function FadingBase({ className, isMounted, children, }: FadingBaseProps
 interface ListItem {
     key: string | number;
     label: React$1.ReactNode;
-    [key: string]: any;
 }
 interface ListProps {
     items: ListItem[];
@@ -1399,7 +1398,7 @@ interface ButtonProps {
 declare function Button({ content, variant, size, buttonType, loading, disabled, style, icon, onClick, }: ButtonProps): react_jsx_runtime.JSX.Element;
 
 interface TextInputProps {
-    value?: any;
+    value?: string;
     onChange?: React$1.ChangeEventHandler<HTMLInputElement>;
     disabled?: boolean;
     label?: React$1.ReactNode;
@@ -1408,13 +1407,12 @@ interface TextInputProps {
     name?: string;
     inputStyle?: React$1.CSSProperties;
     style?: React$1.CSSProperties;
-    /** 'horizontal' | 'vertical' */
-    layout?: string;
+    /** Label/input orientation. Defaults to `'horizontal'`. */
+    layout?: 'horizontal' | 'vertical';
     onBlur?: React$1.FocusEventHandler<HTMLInputElement>;
     errorMessage?: React$1.ReactNode;
     labelColor?: string;
     id?: string;
-    [key: string]: any;
 }
 /**
  * Standard text input with label and validation message.
@@ -1453,7 +1451,7 @@ interface NumberInputProps {
 declare function NumberInput({ step, value, onChange, label, htmlFor, name, disabled, layout, errorMessage, inputStyle, labelStyle, placeholder, style, min, max, readOnly, }: NumberInputProps): react_jsx_runtime.JSX.Element;
 
 interface PasswordProps {
-    value?: any;
+    value?: string;
     onChange?: React$1.ChangeEventHandler<HTMLInputElement>;
     disabled?: boolean;
     label?: React$1.ReactNode;
@@ -1462,12 +1460,12 @@ interface PasswordProps {
     name?: string;
     inputStyle?: React$1.CSSProperties;
     style?: React$1.CSSProperties;
-    layout?: string;
+    /** Label/input orientation. Defaults to `'horizontal'`. */
+    layout?: 'horizontal' | 'vertical';
     onBlur?: React$1.FocusEventHandler<HTMLInputElement>;
     errorMessage?: React$1.ReactNode;
     labelColor?: string;
     iconColor?: string;
-    [key: string]: any;
 }
 /**
  * Password input with show/hide toggle.
@@ -1475,7 +1473,7 @@ interface PasswordProps {
 declare function Password({ value, onChange, disabled, label, htmlFor, placeholder, name, inputStyle, style, layout, onBlur, errorMessage, labelColor, iconColor, }: PasswordProps): react_jsx_runtime.JSX.Element;
 
 interface SearchInputProps {
-    value?: any;
+    value?: string;
     onChange?: React$1.ChangeEventHandler<HTMLInputElement>;
     disabled?: boolean;
     label?: React$1.ReactNode;
@@ -1484,16 +1482,16 @@ interface SearchInputProps {
     name?: string;
     inputStyle?: React$1.CSSProperties;
     style?: React$1.CSSProperties;
-    layout?: string;
-    [key: string]: any;
+    /** Label/input orientation. Defaults to `'vertical'`. */
+    layout?: 'horizontal' | 'vertical';
 }
 /**
  * Search text field with a magnifier icon on the right.
  */
-declare const SearchInput: React$1.ForwardRefExoticComponent<Omit<SearchInputProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
+declare const SearchInput: React$1.ForwardRefExoticComponent<SearchInputProps & React$1.RefAttributes<HTMLInputElement>>;
 
 interface DropdownPillProps {
-    value?: React.ReactNode;
+    value?: ReactNode;
     hasSiblings?: boolean;
 }
 /**
@@ -1546,7 +1544,6 @@ interface SwitchInputProps {
     }) => void;
     checkedIcon?: React$1.ReactNode;
     uncheckedIcon?: React$1.ReactNode;
-    [key: string]: any;
 }
 /**
  * Form switch (on/off toggle) powered by Radix Switch.
@@ -1569,30 +1566,39 @@ interface DropdownItem {
     label: React$1.ReactNode;
     icon?: React$1.ReactNode;
 }
+/**
+ * Item key type — DOM-friendly subset of `React.Key` (no bigint, since UI
+ * keys are always strings or numbers in practice).
+ */
+type DropdownKey = string | number;
+/**
+ * Selected value(s). In single-select mode this is a single key matching
+ * one of the items. In multi-select mode it is an array of keys.
+ */
+type DropdownValue = DropdownKey | DropdownKey[];
 interface DropdownProps {
     isMultiselect?: boolean;
     hasSearch?: boolean;
     label?: React$1.ReactNode;
     name?: string;
-    value?: any;
+    value?: DropdownValue;
     onChange?: (e: {
         target: {
-            value: any;
+            value: DropdownValue;
             id?: string;
             name?: string;
         };
     }) => void;
     onBlur?: React$1.FocusEventHandler;
     disabled?: boolean;
-    /** 'horizontal' | 'vertical' */
-    layout?: string;
+    /** Label/input orientation. Defaults to `'vertical'`. */
+    layout?: 'horizontal' | 'vertical';
     errorMessage?: React$1.ReactNode;
     style?: React$1.CSSProperties;
     htmlFor?: string;
     items?: DropdownItem[];
     labelStyle?: React$1.CSSProperties;
     placeholder?: string;
-    [key: string]: any;
 }
 /**
  * Select / multi-select dropdown powered by Radix Popover.
@@ -1624,13 +1630,12 @@ interface AutoCompleteProps {
     name?: string;
     inputStyle?: React$1.CSSProperties;
     style?: React$1.CSSProperties;
-    /** 'horizontal' | 'vertical' */
-    layout?: string;
+    /** Label/input orientation. Defaults to `'vertical'`. */
+    layout?: 'horizontal' | 'vertical';
     items?: AutoCompleteItem[];
     onItemClick?: (value: string) => void;
     /** Custom "empty" message */
     emptyText?: string;
-    [key: string]: any;
 }
 /**
  * Search-as-you-type autocomplete powered by Radix Popover.
@@ -1695,7 +1700,6 @@ interface FileInputProps {
     name?: string;
     /** Accepted MIME types / extensions */
     accept?: string;
-    [key: string]: any;
 }
 /**
  * Drag-and-drop / click file input.

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 export { C as COLORS, S as SemanticColorKey, a as SemanticSharedKey, V as VarColorKey, b as VarDensityKey, c as VarMotionKey, d as VarRadiusKey, e as VarShadowKey, f as VarTypoKey, g as VarZIndexKey, P as palette, s as semanticTokens, v as vars } from './index-CvyV3YPI.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React$1 from 'react';
+import React$1, { ReactNode } from 'react';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 
 declare const Icon: {
@@ -652,7 +652,6 @@ declare function FadingBase({ className, isMounted, children, }: FadingBaseProps
 interface ListItem {
     key: string | number;
     label: React$1.ReactNode;
-    [key: string]: any;
 }
 interface ListProps {
     items: ListItem[];
@@ -1399,7 +1398,7 @@ interface ButtonProps {
 declare function Button({ content, variant, size, buttonType, loading, disabled, style, icon, onClick, }: ButtonProps): react_jsx_runtime.JSX.Element;
 
 interface TextInputProps {
-    value?: any;
+    value?: string;
     onChange?: React$1.ChangeEventHandler<HTMLInputElement>;
     disabled?: boolean;
     label?: React$1.ReactNode;
@@ -1408,13 +1407,12 @@ interface TextInputProps {
     name?: string;
     inputStyle?: React$1.CSSProperties;
     style?: React$1.CSSProperties;
-    /** 'horizontal' | 'vertical' */
-    layout?: string;
+    /** Label/input orientation. Defaults to `'horizontal'`. */
+    layout?: 'horizontal' | 'vertical';
     onBlur?: React$1.FocusEventHandler<HTMLInputElement>;
     errorMessage?: React$1.ReactNode;
     labelColor?: string;
     id?: string;
-    [key: string]: any;
 }
 /**
  * Standard text input with label and validation message.
@@ -1453,7 +1451,7 @@ interface NumberInputProps {
 declare function NumberInput({ step, value, onChange, label, htmlFor, name, disabled, layout, errorMessage, inputStyle, labelStyle, placeholder, style, min, max, readOnly, }: NumberInputProps): react_jsx_runtime.JSX.Element;
 
 interface PasswordProps {
-    value?: any;
+    value?: string;
     onChange?: React$1.ChangeEventHandler<HTMLInputElement>;
     disabled?: boolean;
     label?: React$1.ReactNode;
@@ -1462,12 +1460,12 @@ interface PasswordProps {
     name?: string;
     inputStyle?: React$1.CSSProperties;
     style?: React$1.CSSProperties;
-    layout?: string;
+    /** Label/input orientation. Defaults to `'horizontal'`. */
+    layout?: 'horizontal' | 'vertical';
     onBlur?: React$1.FocusEventHandler<HTMLInputElement>;
     errorMessage?: React$1.ReactNode;
     labelColor?: string;
     iconColor?: string;
-    [key: string]: any;
 }
 /**
  * Password input with show/hide toggle.
@@ -1475,7 +1473,7 @@ interface PasswordProps {
 declare function Password({ value, onChange, disabled, label, htmlFor, placeholder, name, inputStyle, style, layout, onBlur, errorMessage, labelColor, iconColor, }: PasswordProps): react_jsx_runtime.JSX.Element;
 
 interface SearchInputProps {
-    value?: any;
+    value?: string;
     onChange?: React$1.ChangeEventHandler<HTMLInputElement>;
     disabled?: boolean;
     label?: React$1.ReactNode;
@@ -1484,16 +1482,16 @@ interface SearchInputProps {
     name?: string;
     inputStyle?: React$1.CSSProperties;
     style?: React$1.CSSProperties;
-    layout?: string;
-    [key: string]: any;
+    /** Label/input orientation. Defaults to `'vertical'`. */
+    layout?: 'horizontal' | 'vertical';
 }
 /**
  * Search text field with a magnifier icon on the right.
  */
-declare const SearchInput: React$1.ForwardRefExoticComponent<Omit<SearchInputProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
+declare const SearchInput: React$1.ForwardRefExoticComponent<SearchInputProps & React$1.RefAttributes<HTMLInputElement>>;
 
 interface DropdownPillProps {
-    value?: React.ReactNode;
+    value?: ReactNode;
     hasSiblings?: boolean;
 }
 /**
@@ -1546,7 +1544,6 @@ interface SwitchInputProps {
     }) => void;
     checkedIcon?: React$1.ReactNode;
     uncheckedIcon?: React$1.ReactNode;
-    [key: string]: any;
 }
 /**
  * Form switch (on/off toggle) powered by Radix Switch.
@@ -1569,30 +1566,39 @@ interface DropdownItem {
     label: React$1.ReactNode;
     icon?: React$1.ReactNode;
 }
+/**
+ * Item key type — DOM-friendly subset of `React.Key` (no bigint, since UI
+ * keys are always strings or numbers in practice).
+ */
+type DropdownKey = string | number;
+/**
+ * Selected value(s). In single-select mode this is a single key matching
+ * one of the items. In multi-select mode it is an array of keys.
+ */
+type DropdownValue = DropdownKey | DropdownKey[];
 interface DropdownProps {
     isMultiselect?: boolean;
     hasSearch?: boolean;
     label?: React$1.ReactNode;
     name?: string;
-    value?: any;
+    value?: DropdownValue;
     onChange?: (e: {
         target: {
-            value: any;
+            value: DropdownValue;
             id?: string;
             name?: string;
         };
     }) => void;
     onBlur?: React$1.FocusEventHandler;
     disabled?: boolean;
-    /** 'horizontal' | 'vertical' */
-    layout?: string;
+    /** Label/input orientation. Defaults to `'vertical'`. */
+    layout?: 'horizontal' | 'vertical';
     errorMessage?: React$1.ReactNode;
     style?: React$1.CSSProperties;
     htmlFor?: string;
     items?: DropdownItem[];
     labelStyle?: React$1.CSSProperties;
     placeholder?: string;
-    [key: string]: any;
 }
 /**
  * Select / multi-select dropdown powered by Radix Popover.
@@ -1624,13 +1630,12 @@ interface AutoCompleteProps {
     name?: string;
     inputStyle?: React$1.CSSProperties;
     style?: React$1.CSSProperties;
-    /** 'horizontal' | 'vertical' */
-    layout?: string;
+    /** Label/input orientation. Defaults to `'vertical'`. */
+    layout?: 'horizontal' | 'vertical';
     items?: AutoCompleteItem[];
     onItemClick?: (value: string) => void;
     /** Custom "empty" message */
     emptyText?: string;
-    [key: string]: any;
 }
 /**
  * Search-as-you-type autocomplete powered by Radix Popover.
@@ -1695,7 +1700,6 @@ interface FileInputProps {
     name?: string;
     /** Accepted MIME types / extensions */
     accept?: string;
-    [key: string]: any;
 }
 /**
  * Drag-and-drop / click file input.

package/dist/index.js

@@ -1027,16 +1027,28 @@ function FadingBase({
   );
 }
 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-ice-dark dark:hover:bg-independence cursor-pointer p-3 border-b border-b-ice-dark dark:border-b-independence transition-all duration-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent ${activeKey === item.key ? "bg-ice-dark dark:bg-independence" : ""}`,
+        onClick: () => onItemClick(item),
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onItemClick(item);
+          }
+        },
+        children: item.label
+      },
+      item.key
+    )
   )) });
 }
 function ScalableContainer({
@@ -1542,6 +1554,8 @@ function Dropdown({
   const [hoveredItem, setHoveredItem] = useState(null);
   const [searchTerm, setSearchTerm] = useState("");
   const [innerItems, setInnerItems] = useState([]);
+  const errorId = useId();
+  const hasError = errorMessage != null;
   useEffect(() => {
     setInnerItems(items);
   }, [items]);
@@ -1594,10 +1608,18 @@ 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"}`,
                 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",
@@ -1639,34 +1661,49 @@ 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-prussian-blue hover:text-white transition-all duration-150 text-sm text-prussian-blue rounded-lg cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-accent ${selectedItems.includes(item.key) ? "bg-ice-dark" : ""}`,
+                        onClick: () => selectItem(item.key),
+                        onKeyDown: (e) => {
+                          if (e.key === "Enter" || e.key === " ") {
+                            e.preventDefault();
+                            selectItem(item.key);
                           }
-                        ) })
-                      ]
-                    },
-                    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"
+                            }
+                          ) })
+                        ]
+                      },
+                      item.key
+                    )
                   )) })
                 ]
               }
@@ -1675,7 +1712,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-error dark:text-prussian-blue min-h-0", children: errorMessage })
   ] });
 }
 var DEFAULT_PICKER = [
@@ -1845,10 +1882,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 +2539,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",
@@ -2531,7 +2571,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-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`,
               style: inputStyle ?? {},
               placeholder: placeholder ?? ""
             }
@@ -2539,7 +2581,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-error dark:text-prussian-blue min-h-0", children: errorMessage })
   ] });
 }
 function NumberInput({
@@ -2655,6 +2697,8 @@ function Password({
 }) {
   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
@@ -2681,7 +2725,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-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`,
             style: inputStyle ?? {},
             placeholder: placeholder ?? ""
           }
@@ -2711,7 +2757,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-error dark:text-prussian-blue min-h-0", children: errorMessage })
   ] });
 }
 function Checkbox({
@@ -2878,23 +2924,36 @@ function AutoComplete({
               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
+              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) => (
+                // 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-all duration-150 hover:bg-ice-dark dark:hover:bg-prussian-blue cursor-pointer text-prussian-blue dark:text-white 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
+                )
               )) })
             }
           ) })