najm-kit 2.11.6 → 2.11.7

package/CHANGELOG.md

@@ -1,14 +1,31 @@
-# Changelog
-
-## 2.11.6 - 2026-08-15
-
-- Fixed `FormInput` dropping React Hook Form's native field binding for text,
-  number, password, textarea, and time controls. These controls now forward
-  their field name, composed blur handler, and focus ref to the actual native
-  element, preserving browser form semantics, touched-state tracking, and
-  programmatic focus without changing composite-control contracts.
-
-## 2.11.5 - 2026-08-14
+# Changelog
+
+## 2.11.7 - 2026-08-17
+
+- Fixed date, combobox, and multiselect `FormInput` controls reaching the
+  accessibility tree with no accessible name. These types render their trigger
+  as a styled `div`, so the `<label for>` that `FormControl` wires up pointed at
+  a non-labelable element and named nothing: screen readers announced an unnamed
+  control, and `getByRole(..., { name })` could not resolve one. The form label
+  now becomes the trigger's `aria-label`, and `DateInput` and `ComboboxInput`
+  accept an explicit `ariaLabel` to override it. `select` keeps naming itself
+  from `ariaLabel || placeholder`; renaming it would break consumers that select
+  it by placeholder today.
+- Fixed `DateInput` rendering its popover trigger as a `div`. Radix only merges
+  trigger props onto the child, so the control had no role, no tab stop, and no
+  keyboard activation — it was unreachable without a mouse. It is now a real
+  `<button type="button">`, which also keeps it from submitting the surrounding
+  form when the calendar opens.
+
+## 2.11.6 - 2026-08-15
+
+- Fixed `FormInput` dropping React Hook Form's native field binding for text,
+  number, password, textarea, and time controls. These controls now forward
+  their field name, composed blur handler, and focus ref to the actual native
+  element, preserving browser form semantics, touched-state tracking, and
+  programmatic focus without changing composite-control contracts.
+
+## 2.11.5 - 2026-08-14
 
 - Fixed numbered lists staying on an invalid final page after a deletion or
   another mutation reduced the server total. Paged lists now clamp before

package/dist/index.d.ts

@@ -2238,6 +2238,7 @@ interface ComboboxInputProps extends BaseProps {
     showIcon?: boolean;
     disabled?: boolean;
     allowFreeText?: boolean;
+    ariaLabel?: string;
 }
 interface MultiSelectInputProps extends BaseProps {
     value: string[];
@@ -2294,6 +2295,7 @@ interface DateInputProps extends BaseProps {
     placeholder?: string;
     icon?: InputIcon;
     showIcon?: boolean;
+    ariaLabel?: string;
 }
 interface StarRatingInputProps extends BaseProps {
     value: number;

package/dist/index.mjs

@@ -4551,7 +4551,7 @@ var TextAreaInput = React66__default.forwardRef(({ value, onChange, placeholder
   );
 });
 TextAreaInput.displayName = "TextAreaInput";
-var ComboboxInput = ({ placeholder = "Select...", searchPlaceholder = "Search...", emptyMessage = "No results found.", loading = false, loadingMessage = "Loading...", onSearchChange, shouldFilter = true, value, onChange, icon, showIcon = true, iconColor, items = [], className = "", variant = "default", status = "default", bordered, borderColor, disabled = false, allowFreeText = false }) => {
+var ComboboxInput = ({ placeholder = "Select...", searchPlaceholder = "Search...", emptyMessage = "No results found.", loading = false, loadingMessage = "Loading...", onSearchChange, shouldFilter = true, value, onChange, icon, showIcon = true, iconColor, items = [], className = "", variant = "default", status = "default", bordered, borderColor, disabled = false, allowFreeText = false, ariaLabel }) => {
   const [open, setOpen] = useState(false);
   const triggerRef = React66__default.useRef(null);
   const pointerDismissedRef = React66__default.useRef(false);
@@ -4590,6 +4590,7 @@ var ComboboxInput = ({ placeholder = "Select...", searchPlaceholder = "Search...
         bordered,
         borderColor,
         role: "combobox",
+        "aria-label": ariaLabel,
         tabIndex: disabled ? -1 : 0,
         "aria-expanded": open,
         className: cn(
@@ -4782,13 +4783,13 @@ function Calendar(props) {
     }
   );
 }
-var DateInput = ({ value, onChange, placeholder = "Pick a date", className = "", icon, showIcon = true, iconColor, variant = "default", status = "default", bordered, borderColor }) => {
+var DateInput = ({ value, onChange, placeholder = "Pick a date", className = "", icon, showIcon = true, iconColor, variant = "default", status = "default", bordered, borderColor, ariaLabel }) => {
   const iconProps = getIconColorProps(iconColor, "h-4 w-4");
   const toDateString = (date) => date ? format(date, "yyyy-MM-dd") : void 0;
   const toDate = (val) => typeof val === "string" ? parseISO(val) : val;
   return /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderColor, className, children: [
     /* @__PURE__ */ jsxs(Popover, { children: [
-      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: "w-full flex items-center cursor-pointer gap-2 justify-start text-left font-normal", children: /* @__PURE__ */ jsx(Label2, { className: cn("cursor-pointer", value ? "text-foreground" : "text-muted-foreground"), children: value ? format(toDate(value), "PPP") : placeholder }) }) }),
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { type: "button", "aria-label": ariaLabel, className: "w-full flex items-center cursor-pointer gap-2 justify-start text-left font-normal bg-transparent border-0 p-0 outline-none", children: /* @__PURE__ */ jsx("span", { className: cn("cursor-pointer", value ? "text-foreground" : "text-muted-foreground"), children: value ? format(toDate(value), "PPP") : placeholder }) }) }),
       /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsx(Calendar, { mode: "single", selected: toDate(value), onSelect: (date) => onChange(toDateString(date)), captionLayout: "dropdown" }) })
     ] }),
     !icon && showIcon && /* @__PURE__ */ jsx(Calendar$1, { className: iconProps.className, style: iconProps.style })
@@ -10879,6 +10880,7 @@ var Inputs = {
   slider: SliderInput
 };
 var nativeFieldTypes = /* @__PURE__ */ new Set(["text", "number", "password", "textarea", "time"]);
+var labelNamedCompositeTypes = /* @__PURE__ */ new Set(["date", "combobox", "multiselect"]);
 var FormInput = ({ name, type, formLabel, formDescription, required = false, disabled = false, readOnly = false, hidden = false, icon, iconColor, classNames, background, ...rest }) => {
   const InputComponent = Inputs[type];
   const { control } = useFormContext();
@@ -10897,6 +10899,7 @@ var FormInput = ({ name, type, formLabel, formDescription, required = false, dis
   };
   const presetInput = type === "textarea" ? preset.input?.replace(/\bh-\d+\b/g, "").trim() : preset.input;
   const isFillAvatar = type === "avatar" && inputRest.fill === true;
+  const compositeAriaLabel = labelNamedCompositeTypes.has(type) && typeof formLabel === "string" ? { ariaLabel: inputRest.ariaLabel ?? formLabel } : {};
   const slot = {
     item: cn(
       preset.item,
@@ -10929,7 +10932,7 @@ var FormInput = ({ name, type, formLabel, formDescription, required = false, dis
         formLabel,
         required && !disabled && !readOnly && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-1", children: "*" })
       ] }),
-      /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(InputComponent, { value: field.value ?? getDefaultValue(), onChange: handleChange, status: hasError && !isHidden ? "error" : "default", bordered: contextBordered, icon: formLabel ? void 0 : icon, iconColor: formLabel ? void 0 : iconColor, disabled, readOnly, ...inputRest, ...nativeFieldBinding, className: slot.input }) }),
+      /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(InputComponent, { value: field.value ?? getDefaultValue(), onChange: handleChange, status: hasError && !isHidden ? "error" : "default", bordered: contextBordered, icon: formLabel ? void 0 : icon, iconColor: formLabel ? void 0 : iconColor, disabled, readOnly, ...inputRest, ...compositeAriaLabel, ...nativeFieldBinding, className: slot.input }) }),
       !hasError && !disabled && !readOnly && formDescription && /* @__PURE__ */ jsx(FormDescription, { className: slot.description, children: formDescription }),
       !isHidden && /* @__PURE__ */ jsx(FormMessage, { className: slot.error })
     ] });

package/dist/theme.css

@@ -307,10 +307,10 @@ input:autofill {
   overflow-x: auto;
   scrollbar-width: none;
 }
-.najm-overlay-scroll-x::-webkit-scrollbar {
-  display: none;
-}
-
+.najm-overlay-scroll-x::-webkit-scrollbar {
+  display: none;
+}
+
 /* Responsive table actions stay discoverable on touch and tablet layouts.
    Fine-pointer desktops may keep the quieter hover/focus reveal treatment. */
 .ntable-card-action {
@@ -367,7 +367,7 @@ input:autofill {
   .nimage-input-compact-overlay:focus-visible {
     opacity: 1;
   }
-}
+}
 
 /* OverlayScrollbars theme used by the <NajmScroll> component — a thin,
    translucent slate bar that floats over content with no reserved space.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "najm-kit",
-  "version": "2.11.6",
+  "version": "2.11.7",
   "license": "MIT",
   "type": "module",
   "description": "Reusable React UI component package for Najm framework",