@uipath/apollo-wind 2.36.2 → 2.37.0

package/dist/components/ui/file-upload.cjs

@@ -32,7 +32,7 @@ const external_lucide_react_namespaceObject = require("lucide-react");
 const external_react_namespaceObject = require("react");
 const external_button_cjs_namespaceObject = require("./button.cjs");
 const index_cjs_namespaceObject = require("../../lib/index.cjs");
-const file_upload_FileUpload = /*#__PURE__*/ external_react_namespaceObject.forwardRef(function({ id, ariaLabel, onFilesChange, accept, multiple = false, disabled = false, maxSize, className, showPreview = false, errors, onBlur }, ref) {
+const file_upload_FileUpload = /*#__PURE__*/ external_react_namespaceObject.forwardRef(function({ id, ariaLabel, onFilesChange, accept, multiple = false, disabled = false, maxSize, className, showPreview = false, errors, onBlur, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage }, ref) {
     const [files, setFiles] = external_react_namespaceObject.useState([]);
     const [isDragging, setIsDragging] = external_react_namespaceObject.useState(false);
     const [fileErrors, setFileErrors] = external_react_namespaceObject.useState(new Map());
@@ -177,12 +177,18 @@ const file_upload_FileUpload = /*#__PURE__*/ external_react_namespaceObject.forw
                 multiple: multiple,
                 disabled: disabled,
                 onChange: handleInputChange,
-                "aria-label": id ? void 0 : ariaLabel ?? 'File upload'
+                "aria-label": id ? void 0 : ariaLabel ?? 'File upload',
+                "aria-invalid": ariaInvalid,
+                "aria-describedby": ariaDescribedBy,
+                "aria-errormessage": ariaErrorMessage
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
                 role: "button",
                 "aria-label": ariaLabel ?? 'File upload area',
                 "aria-disabled": disabled,
+                "aria-invalid": ariaInvalid,
+                "aria-describedby": ariaDescribedBy,
+                "aria-errormessage": ariaErrorMessage,
                 tabIndex: disabled ? -1 : 0,
                 className: (0, index_cjs_namespaceObject.cn)('relative flex flex-col items-center justify-center w-full h-32 px-4 py-6 border-2 border-dashed rounded-lg cursor-pointer transition-colors', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background', 'future:rounded-xl', isDragging ? 'border-primary bg-primary/5' : 'border-input bg-background hover:bg-accent/50 future:border-border future:bg-surface-raised future:hover:bg-surface-overlay', disabled && 'opacity-50 cursor-not-allowed hover:bg-background future:hover:bg-surface-raised'),
                 onDragEnter: handleDragEnter,

package/dist/components/ui/file-upload.d.ts

@@ -26,5 +26,8 @@ export interface FileUploadProps {
     /** External errors keyed by filename. Use this to set errors from outside (e.g., upload failures). */
     errors?: Record<string, string>;
     onBlur?: React.FocusEventHandler<HTMLFieldSetElement>;
+    'aria-invalid'?: React.AriaAttributes['aria-invalid'];
+    'aria-describedby'?: string;
+    'aria-errormessage'?: string;
 }
 export declare const FileUpload: React.ForwardRefExoticComponent<FileUploadProps & React.RefAttributes<HTMLFieldSetElement>>;

package/dist/components/ui/file-upload.js

@@ -4,7 +4,7 @@ import { Upload, X } from "lucide-react";
 import { forwardRef, useRef, useState } from "react";
 import { Button } from "./button.js";
 import { cn } from "../../lib/index.js";
-const file_upload_FileUpload = /*#__PURE__*/ forwardRef(function({ id, ariaLabel, onFilesChange, accept, multiple = false, disabled = false, maxSize, className, showPreview = false, errors, onBlur }, ref) {
+const file_upload_FileUpload = /*#__PURE__*/ forwardRef(function({ id, ariaLabel, onFilesChange, accept, multiple = false, disabled = false, maxSize, className, showPreview = false, errors, onBlur, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage }, ref) {
     const [files, setFiles] = useState([]);
     const [isDragging, setIsDragging] = useState(false);
     const [fileErrors, setFileErrors] = useState(new Map());
@@ -149,12 +149,18 @@ const file_upload_FileUpload = /*#__PURE__*/ forwardRef(function({ id, ariaLabel
                 multiple: multiple,
                 disabled: disabled,
                 onChange: handleInputChange,
-                "aria-label": id ? void 0 : ariaLabel ?? 'File upload'
+                "aria-label": id ? void 0 : ariaLabel ?? 'File upload',
+                "aria-invalid": ariaInvalid,
+                "aria-describedby": ariaDescribedBy,
+                "aria-errormessage": ariaErrorMessage
             }),
             /*#__PURE__*/ jsxs("div", {
                 role: "button",
                 "aria-label": ariaLabel ?? 'File upload area',
                 "aria-disabled": disabled,
+                "aria-invalid": ariaInvalid,
+                "aria-describedby": ariaDescribedBy,
+                "aria-errormessage": ariaErrorMessage,
                 tabIndex: disabled ? -1 : 0,
                 className: cn('relative flex flex-col items-center justify-center w-full h-32 px-4 py-6 border-2 border-dashed rounded-lg cursor-pointer transition-colors', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background', 'future:rounded-xl', isDragging ? 'border-primary bg-primary/5' : 'border-input bg-background hover:bg-accent/50 future:border-border future:bg-surface-raised future:hover:bg-surface-overlay', disabled && 'opacity-50 cursor-not-allowed hover:bg-background future:hover:bg-surface-raised'),
                 onDragEnter: handleDragEnter,

package/dist/components/ui/index.cjs

@@ -60,7 +60,7 @@ var __webpack_modules__ = {
     "./datetime-picker" (module) {
         module.exports = require("./datetime-picker.cjs");
     },
-    "./dialog" (module) {
+    "@/components/ui/dialog" (module) {
         module.exports = require("./dialog.cjs");
     },
     "./drawer" (module) {
@@ -81,7 +81,7 @@ var __webpack_modules__ = {
     "@/components/ui/hover-card" (module) {
         module.exports = require("./hover-card.cjs");
     },
-    "./input-group" (module) {
+    "@/components/ui/input-group" (module) {
         module.exports = require("./input-group.cjs");
     },
     "@/components/ui/input" (module) {
@@ -162,13 +162,13 @@ var __webpack_modules__ = {
     "./tabs" (module) {
         module.exports = require("./tabs.cjs");
     },
-    "./textarea" (module) {
+    "@/components/ui/textarea" (module) {
         module.exports = require("./textarea.cjs");
     },
     "./toggle-group" (module) {
         module.exports = require("./toggle-group.cjs");
     },
-    "./toggle" (module) {
+    "@/components/ui/toggle" (module) {
         module.exports = require("./toggle.cjs");
     },
     "./tooltip" (module) {
@@ -367,7 +367,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_datetime_picker__rspack_import_19[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _dialog__rspack_import_20 = __webpack_require__("./dialog");
+    var _dialog__rspack_import_20 = __webpack_require__("@/components/ui/dialog");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _dialog__rspack_import_20)if ([
         "TreeView",
@@ -423,7 +423,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_input__rspack_import_27[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _input_group__rspack_import_28 = __webpack_require__("./input-group");
+    var _input_group__rspack_import_28 = __webpack_require__("@/components/ui/input-group");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _input_group__rspack_import_28)if ([
         "TreeView",
@@ -605,14 +605,14 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_tabs__rspack_import_53[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _textarea__rspack_import_54 = __webpack_require__("./textarea");
+    var _textarea__rspack_import_54 = __webpack_require__("@/components/ui/textarea");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _textarea__rspack_import_54)if ([
         "TreeView",
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_textarea__rspack_import_54[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _toggle__rspack_import_55 = __webpack_require__("./toggle");
+    var _toggle__rspack_import_55 = __webpack_require__("@/components/ui/toggle");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _toggle__rspack_import_55)if ([
         "TreeView",

package/dist/components/ui/input-group.cjs

@@ -38,12 +38,33 @@ const external_button_cjs_namespaceObject = require("./button.cjs");
 const external_input_cjs_namespaceObject = require("./input.cjs");
 const external_textarea_cjs_namespaceObject = require("./textarea.cjs");
 const index_cjs_namespaceObject = require("../../lib/index.cjs");
-const InputGroup = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, variant = 'default', size = 'default', ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-        ref: ref,
-        role: "group",
-        className: (0, index_cjs_namespaceObject.cn)('group/input-group relative flex w-full items-center gap-2 transition-colors has-[>textarea]:h-auto has-[>textarea]:items-start', 'default' === size && 'h-9 rounded-md px-3 py-1 future:h-10 future:rounded-xl future:py-2', 'xs' === size && 'h-6 gap-1 rounded px-2', 'default' === variant && 'border border-input bg-transparent future:border-0 future:bg-surface-overlay', 'ghost' === variant && 'border-0 bg-surface-overlay', 'has-[[data-slot=input-group-control]:focus-visible]:ring-2 has-[[data-slot=input-group-control]:focus-visible]:ring-ring future:has-[[data-slot=input-group-control]:focus-visible]:ring-offset-2 future:has-[[data-slot=input-group-control]:focus-visible]:ring-offset-background', 'has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20', 'has-[[data-slot=input-group-control]:disabled]:cursor-not-allowed has-[[data-slot=input-group-control]:disabled]:opacity-50', className),
-        ...props
-    }));
+const InputGroupValidationContext = /*#__PURE__*/ external_react_namespaceObject.createContext({});
+const InputGroup = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, error, errorId, variant = 'default', size = 'default', ...props }, ref)=>{
+    const generatedId = external_react_namespaceObject.useId();
+    const validationId = errorId ?? `input-group-${generatedId.replace(/:/g, '')}-error`;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(InputGroupValidationContext.Provider, {
+        value: {
+            error,
+            errorId: validationId
+        },
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                ref: ref,
+                role: "group",
+                className: (0, index_cjs_namespaceObject.cn)('group/input-group relative flex w-full items-center gap-2 transition-colors has-[>textarea]:h-auto has-[>textarea]:items-start', 'default' === size && 'h-9 rounded-md px-3 py-1 future:h-10 future:rounded-xl future:py-2', 'xs' === size && 'h-6 gap-1 rounded px-2', 'default' === variant && 'border border-input bg-transparent future:border-0 future:bg-surface-overlay', 'ghost' === variant && 'border-0 bg-surface-overlay', 'has-[[data-slot=input-group-control]:focus-visible]:ring-2 has-[[data-slot=input-group-control]:focus-visible]:ring-ring future:has-[[data-slot=input-group-control]:focus-visible]:ring-offset-2 future:has-[[data-slot=input-group-control]:focus-visible]:ring-offset-background', 'has-[[data-slot][aria-invalid=true]]:border-error has-[[data-slot][aria-invalid=true]]:ring-error/20 future:has-[[data-slot][aria-invalid=true]]:ring-1 future:has-[[data-slot][aria-invalid=true]]:ring-error/40', error && 'border-error ring-error/20 future:ring-1 future:ring-error/40', 'has-[[data-slot=input-group-control]:disabled]:cursor-not-allowed has-[[data-slot=input-group-control]:disabled]:opacity-50', className),
+                ...props
+            }),
+            error && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
+                id: validationId,
+                "data-slot": "input-group-error",
+                "aria-live": "polite",
+                "aria-atomic": "true",
+                className: "mt-1 text-xs leading-4 text-error",
+                children: error
+            })
+        ]
+    });
+});
 InputGroup.displayName = 'InputGroup';
 const inputGroupAddonVariants = (0, external_class_variance_authority_namespaceObject.cva)('flex h-auto cursor-text items-center justify-center gap-1 text-sm text-muted-foreground select-none group-has-[[data-slot=input-group-control]:disabled]/input-group:opacity-50 [&>svg:not([class*="size-"])]:size-4', {
     variants: {
@@ -86,19 +107,42 @@ const InputGroupText = /*#__PURE__*/ external_react_namespaceObject.forwardRef((
         ...props
     }));
 InputGroupText.displayName = 'InputGroupText';
-const InputGroupInput = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_cjs_namespaceObject.Input, {
-        ref: ref,
-        "data-slot": "input-group-control",
-        className: (0, index_cjs_namespaceObject.cn)('h-full flex-1 rounded-none border-0 bg-transparent p-0 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0 future:h-full future:rounded-none future:border-0 future:bg-transparent future:p-0 future:focus-visible:ring-offset-0', className),
-        ...props
-    }));
+const InputGroupInput = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, 'aria-invalid': ariaInvalid, className, ...props }, ref)=>{
+    const validation = external_react_namespaceObject.useContext(InputGroupValidationContext);
+    const describedBy = [
+        ariaDescribedBy,
+        validation.error ? validation.errorId : void 0
+    ].filter(Boolean).join(' ');
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: "min-w-0 flex-1",
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_cjs_namespaceObject.Input, {
+            ref: ref,
+            "data-slot": "input-group-control",
+            "aria-describedby": describedBy || void 0,
+            "aria-errormessage": validation.error ? validation.errorId : ariaErrorMessage,
+            "aria-invalid": validation.error ? true : ariaInvalid,
+            className: (0, index_cjs_namespaceObject.cn)('h-full w-full rounded-none !border-0 !ring-0 bg-transparent p-0 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0 future:h-full future:rounded-none future:border-0 future:bg-transparent future:p-0 future:focus-visible:ring-offset-0', className),
+            ...props
+        })
+    });
+});
 InputGroupInput.displayName = 'InputGroupInput';
-const InputGroupTextarea = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_textarea_cjs_namespaceObject.Textarea, {
+const InputGroupTextarea = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, 'aria-invalid': ariaInvalid, className, ...props }, ref)=>{
+    const validation = external_react_namespaceObject.useContext(InputGroupValidationContext);
+    const describedBy = [
+        ariaDescribedBy,
+        validation.error ? validation.errorId : void 0
+    ].filter(Boolean).join(' ');
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_textarea_cjs_namespaceObject.Textarea, {
         ref: ref,
         "data-slot": "input-group-control",
-        className: (0, index_cjs_namespaceObject.cn)('min-h-0 flex-1 resize-none rounded-none border-0 bg-transparent p-0 py-2 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0 future:rounded-none future:border-0 future:bg-transparent future:focus-visible:ring-offset-0', className),
+        "aria-describedby": describedBy || void 0,
+        "aria-errormessage": validation.error ? validation.errorId : ariaErrorMessage,
+        "aria-invalid": validation.error ? true : ariaInvalid,
+        className: (0, index_cjs_namespaceObject.cn)('min-h-0 flex-1 resize-none rounded-none !border-0 !ring-0 bg-transparent p-0 py-2 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0 future:rounded-none future:border-0 future:bg-transparent future:focus-visible:ring-offset-0', className),
         ...props
-    }));
+    });
+});
 InputGroupTextarea.displayName = 'InputGroupTextarea';
 exports.InputGroup = __webpack_exports__.InputGroup;
 exports.InputGroupAddon = __webpack_exports__.InputGroupAddon;

package/dist/components/ui/input-group.d.ts

@@ -6,6 +6,10 @@ import { type TextareaProps } from './textarea';
 export interface InputGroupProps extends React.HTMLAttributes<HTMLDivElement> {
     variant?: 'default' | 'ghost';
     size?: 'default' | 'xs';
+    /** Field-specific validation feedback rendered below the grouped control. */
+    error?: React.ReactNode;
+    /** Optional id for the inline validation message. */
+    errorId?: string;
 }
 declare const InputGroup: React.ForwardRefExoticComponent<InputGroupProps & React.RefAttributes<HTMLDivElement>>;
 declare const inputGroupAddonVariants: (props?: ({
@@ -20,7 +24,7 @@ declare const InputGroupButton: React.ForwardRefExoticComponent<InputGroupButton
 export interface InputGroupTextProps extends React.HTMLAttributes<HTMLSpanElement> {
 }
 declare const InputGroupText: React.ForwardRefExoticComponent<InputGroupTextProps & React.RefAttributes<HTMLSpanElement>>;
-export interface InputGroupInputProps extends Omit<InputProps, 'variant' | 'size'> {
+export interface InputGroupInputProps extends Omit<InputProps, 'variant' | 'size' | 'error' | 'errorId'> {
 }
 declare const InputGroupInput: React.ForwardRefExoticComponent<InputGroupInputProps & React.RefAttributes<HTMLInputElement>>;
 export interface InputGroupTextareaProps extends Omit<TextareaProps, 'variant'> {

package/dist/components/ui/input-group.js

@@ -1,16 +1,37 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
-import { forwardRef } from "react";
+import { createContext, forwardRef, useContext, useId } from "react";
 import { Button } from "./button.js";
 import { Input } from "./input.js";
 import { Textarea } from "./textarea.js";
 import { cn } from "../../lib/index.js";
-const InputGroup = /*#__PURE__*/ forwardRef(({ className, variant = 'default', size = 'default', ...props }, ref)=>/*#__PURE__*/ jsx("div", {
-        ref: ref,
-        role: "group",
-        className: cn('group/input-group relative flex w-full items-center gap-2 transition-colors has-[>textarea]:h-auto has-[>textarea]:items-start', 'default' === size && 'h-9 rounded-md px-3 py-1 future:h-10 future:rounded-xl future:py-2', 'xs' === size && 'h-6 gap-1 rounded px-2', 'default' === variant && 'border border-input bg-transparent future:border-0 future:bg-surface-overlay', 'ghost' === variant && 'border-0 bg-surface-overlay', 'has-[[data-slot=input-group-control]:focus-visible]:ring-2 has-[[data-slot=input-group-control]:focus-visible]:ring-ring future:has-[[data-slot=input-group-control]:focus-visible]:ring-offset-2 future:has-[[data-slot=input-group-control]:focus-visible]:ring-offset-background', 'has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20', 'has-[[data-slot=input-group-control]:disabled]:cursor-not-allowed has-[[data-slot=input-group-control]:disabled]:opacity-50', className),
-        ...props
-    }));
+const InputGroupValidationContext = /*#__PURE__*/ createContext({});
+const InputGroup = /*#__PURE__*/ forwardRef(({ className, error, errorId, variant = 'default', size = 'default', ...props }, ref)=>{
+    const generatedId = useId();
+    const validationId = errorId ?? `input-group-${generatedId.replace(/:/g, '')}-error`;
+    return /*#__PURE__*/ jsxs(InputGroupValidationContext.Provider, {
+        value: {
+            error,
+            errorId: validationId
+        },
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                ref: ref,
+                role: "group",
+                className: cn('group/input-group relative flex w-full items-center gap-2 transition-colors has-[>textarea]:h-auto has-[>textarea]:items-start', 'default' === size && 'h-9 rounded-md px-3 py-1 future:h-10 future:rounded-xl future:py-2', 'xs' === size && 'h-6 gap-1 rounded px-2', 'default' === variant && 'border border-input bg-transparent future:border-0 future:bg-surface-overlay', 'ghost' === variant && 'border-0 bg-surface-overlay', 'has-[[data-slot=input-group-control]:focus-visible]:ring-2 has-[[data-slot=input-group-control]:focus-visible]:ring-ring future:has-[[data-slot=input-group-control]:focus-visible]:ring-offset-2 future:has-[[data-slot=input-group-control]:focus-visible]:ring-offset-background', 'has-[[data-slot][aria-invalid=true]]:border-error has-[[data-slot][aria-invalid=true]]:ring-error/20 future:has-[[data-slot][aria-invalid=true]]:ring-1 future:has-[[data-slot][aria-invalid=true]]:ring-error/40', error && 'border-error ring-error/20 future:ring-1 future:ring-error/40', 'has-[[data-slot=input-group-control]:disabled]:cursor-not-allowed has-[[data-slot=input-group-control]:disabled]:opacity-50', className),
+                ...props
+            }),
+            error && /*#__PURE__*/ jsx("p", {
+                id: validationId,
+                "data-slot": "input-group-error",
+                "aria-live": "polite",
+                "aria-atomic": "true",
+                className: "mt-1 text-xs leading-4 text-error",
+                children: error
+            })
+        ]
+    });
+});
 InputGroup.displayName = 'InputGroup';
 const inputGroupAddonVariants = cva('flex h-auto cursor-text items-center justify-center gap-1 text-sm text-muted-foreground select-none group-has-[[data-slot=input-group-control]:disabled]/input-group:opacity-50 [&>svg:not([class*="size-"])]:size-4', {
     variants: {
@@ -53,18 +74,41 @@ const InputGroupText = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>
         ...props
     }));
 InputGroupText.displayName = 'InputGroupText';
-const InputGroupInput = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Input, {
-        ref: ref,
-        "data-slot": "input-group-control",
-        className: cn('h-full flex-1 rounded-none border-0 bg-transparent p-0 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0 future:h-full future:rounded-none future:border-0 future:bg-transparent future:p-0 future:focus-visible:ring-offset-0', className),
-        ...props
-    }));
+const InputGroupInput = /*#__PURE__*/ forwardRef(({ 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, 'aria-invalid': ariaInvalid, className, ...props }, ref)=>{
+    const validation = useContext(InputGroupValidationContext);
+    const describedBy = [
+        ariaDescribedBy,
+        validation.error ? validation.errorId : void 0
+    ].filter(Boolean).join(' ');
+    return /*#__PURE__*/ jsx("div", {
+        className: "min-w-0 flex-1",
+        children: /*#__PURE__*/ jsx(Input, {
+            ref: ref,
+            "data-slot": "input-group-control",
+            "aria-describedby": describedBy || void 0,
+            "aria-errormessage": validation.error ? validation.errorId : ariaErrorMessage,
+            "aria-invalid": validation.error ? true : ariaInvalid,
+            className: cn('h-full w-full rounded-none !border-0 !ring-0 bg-transparent p-0 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0 future:h-full future:rounded-none future:border-0 future:bg-transparent future:p-0 future:focus-visible:ring-offset-0', className),
+            ...props
+        })
+    });
+});
 InputGroupInput.displayName = 'InputGroupInput';
-const InputGroupTextarea = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Textarea, {
+const InputGroupTextarea = /*#__PURE__*/ forwardRef(({ 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, 'aria-invalid': ariaInvalid, className, ...props }, ref)=>{
+    const validation = useContext(InputGroupValidationContext);
+    const describedBy = [
+        ariaDescribedBy,
+        validation.error ? validation.errorId : void 0
+    ].filter(Boolean).join(' ');
+    return /*#__PURE__*/ jsx(Textarea, {
         ref: ref,
         "data-slot": "input-group-control",
-        className: cn('min-h-0 flex-1 resize-none rounded-none border-0 bg-transparent p-0 py-2 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0 future:rounded-none future:border-0 future:bg-transparent future:focus-visible:ring-offset-0', className),
+        "aria-describedby": describedBy || void 0,
+        "aria-errormessage": validation.error ? validation.errorId : ariaErrorMessage,
+        "aria-invalid": validation.error ? true : ariaInvalid,
+        className: cn('min-h-0 flex-1 resize-none rounded-none !border-0 !ring-0 bg-transparent p-0 py-2 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0 future:rounded-none future:border-0 future:bg-transparent future:focus-visible:ring-offset-0', className),
         ...props
-    }));
+    });
+});
 InputGroupTextarea.displayName = 'InputGroupTextarea';
 export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea };

package/dist/components/ui/input.cjs

@@ -29,13 +29,37 @@ __webpack_require__.d(__webpack_exports__, {
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const external_react_namespaceObject = require("react");
 const utils_cjs_namespaceObject = require("../../lib/utils.cjs");
-const Input = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, type, variant = 'default', size = 'default', ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("input", {
-        type: type,
-        "data-slot": "input",
-        className: (0, utils_cjs_namespaceObject.cn)('flex w-full transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', 'default' === size && 'h-9 rounded-md px-3 py-1 text-base placeholder:text-muted-foreground md:text-sm', 'xs' === size && 'h-6 rounded px-2 text-xs placeholder:text-muted-foreground', 'default' === variant && 'border border-input bg-transparent', 'ghost' === variant && 'border-0 bg-surface-overlay', 'default' === variant && 'default' === size && 'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:py-2 future:text-sm future:placeholder:text-foreground-muted future:placeholder:font-normal future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background', className),
-        ref: ref,
-        ...props
-    }));
+const Input = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, 'aria-invalid': ariaInvalid, className, error, errorId, id, type, variant = 'default', size = 'default', ...props }, ref)=>{
+    const generatedId = external_react_namespaceObject.useId();
+    const validationId = errorId ?? `${id ?? `input-${generatedId.replace(/:/g, '')}`}-error`;
+    const describedBy = [
+        ariaDescribedBy,
+        error ? validationId : void 0
+    ].filter(Boolean).join(' ');
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("input", {
+                type: type,
+                "data-slot": "input",
+                id: id,
+                ...props,
+                "aria-describedby": describedBy || void 0,
+                "aria-errormessage": error ? validationId : ariaErrorMessage,
+                "aria-invalid": error ? true : ariaInvalid,
+                className: (0, utils_cjs_namespaceObject.cn)('flex w-full transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-error aria-invalid:focus-visible:ring-error', 'default' === size && 'h-9 rounded-md px-3 py-1 text-base placeholder:text-muted-foreground md:text-sm', 'xs' === size && 'h-6 rounded px-2 text-xs placeholder:text-muted-foreground', 'default' === variant && 'border border-input bg-transparent', 'ghost' === variant && 'border-0 bg-surface-overlay', 'default' === variant && 'default' === size && 'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:py-2 future:text-sm future:placeholder:text-foreground-muted future:placeholder:font-normal future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background future:aria-invalid:ring-1 future:aria-invalid:ring-error/40', className),
+                ref: ref
+            }),
+            error && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
+                id: validationId,
+                "data-slot": "input-error",
+                "aria-live": "polite",
+                "aria-atomic": "true",
+                className: "mt-1 text-xs leading-4 text-error",
+                children: error
+            })
+        ]
+    });
+});
 Input.displayName = 'Input';
 exports.Input = __webpack_exports__.Input;
 for(var __rspack_i in __webpack_exports__)if (-1 === [

package/dist/components/ui/input.d.ts

@@ -2,6 +2,13 @@ import * as React from 'react';
 export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
     variant?: 'default' | 'ghost';
     size?: 'default' | 'xs';
+    /**
+     * Field-specific feedback rendered immediately below the input.
+     * Keep the message focused on what went wrong and how to resolve it.
+     */
+    error?: React.ReactNode;
+    /** Optional id for the inline validation message. */
+    errorId?: string;
 }
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 export { Input };

package/dist/components/ui/input.js

@@ -1,12 +1,36 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from "react";
 import { cn } from "../../lib/utils.js";
-const Input = /*#__PURE__*/ forwardRef(({ className, type, variant = 'default', size = 'default', ...props }, ref)=>/*#__PURE__*/ jsx("input", {
-        type: type,
-        "data-slot": "input",
-        className: cn('flex w-full transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', 'default' === size && 'h-9 rounded-md px-3 py-1 text-base placeholder:text-muted-foreground md:text-sm', 'xs' === size && 'h-6 rounded px-2 text-xs placeholder:text-muted-foreground', 'default' === variant && 'border border-input bg-transparent', 'ghost' === variant && 'border-0 bg-surface-overlay', 'default' === variant && 'default' === size && 'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:py-2 future:text-sm future:placeholder:text-foreground-muted future:placeholder:font-normal future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background', className),
-        ref: ref,
-        ...props
-    }));
+const Input = /*#__PURE__*/ forwardRef(({ 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, 'aria-invalid': ariaInvalid, className, error, errorId, id, type, variant = 'default', size = 'default', ...props }, ref)=>{
+    const generatedId = useId();
+    const validationId = errorId ?? `${id ?? `input-${generatedId.replace(/:/g, '')}`}-error`;
+    const describedBy = [
+        ariaDescribedBy,
+        error ? validationId : void 0
+    ].filter(Boolean).join(' ');
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx("input", {
+                type: type,
+                "data-slot": "input",
+                id: id,
+                ...props,
+                "aria-describedby": describedBy || void 0,
+                "aria-errormessage": error ? validationId : ariaErrorMessage,
+                "aria-invalid": error ? true : ariaInvalid,
+                className: cn('flex w-full transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-error aria-invalid:focus-visible:ring-error', 'default' === size && 'h-9 rounded-md px-3 py-1 text-base placeholder:text-muted-foreground md:text-sm', 'xs' === size && 'h-6 rounded px-2 text-xs placeholder:text-muted-foreground', 'default' === variant && 'border border-input bg-transparent', 'ghost' === variant && 'border-0 bg-surface-overlay', 'default' === variant && 'default' === size && 'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:py-2 future:text-sm future:placeholder:text-foreground-muted future:placeholder:font-normal future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background future:aria-invalid:ring-1 future:aria-invalid:ring-error/40', className),
+                ref: ref
+            }),
+            error && /*#__PURE__*/ jsx("p", {
+                id: validationId,
+                "data-slot": "input-error",
+                "aria-live": "polite",
+                "aria-atomic": "true",
+                className: "mt-1 text-xs leading-4 text-error",
+                children: error
+            })
+        ]
+    });
+});
 Input.displayName = 'Input';
 export { Input };

package/dist/components/ui/lockable-value-field/lockable-value-field.cjs

@@ -44,11 +44,12 @@ const lock_toggle_button_cjs_namespaceObject = require("./components/lock-toggle
 const mode_menu_item_cjs_namespaceObject = require("./components/mode-menu-item.cjs");
 const external_types_cjs_namespaceObject = require("./types.cjs");
 const external_utils_cjs_namespaceObject = require("./utils.cjs");
-function LockableValueField({ value = '', onValueChange, onValueBlur, locked = true, onLockedChange, mode = 'fixed', onModeChange, renderExpressionEditor, fieldType = 'string', onFieldTypeChange, required, onRequiredChange, label, fileUploadAriaLabel, headerActions, compact, controlsVisibility = 'visible', showFieldActions = true, options = external_utils_cjs_namespaceObject.DEFAULT_SELECT_OPTIONS, onGenerateWithAi, variables = [], id, className }) {
-    const generatedId = (0, external_react_namespaceObject.useId)();
+function LockableValueField({ value = '', onValueChange, onValueBlur, locked = true, onLockedChange, mode = 'fixed', onModeChange, renderExpressionEditor, fieldType = 'string', onFieldTypeChange, required, onRequiredChange, label, error, errorId, fileUploadAriaLabel, headerActions, compact, controlsVisibility = 'visible', showFieldActions = true, options = external_utils_cjs_namespaceObject.DEFAULT_SELECT_OPTIONS, onGenerateWithAi, variables = [], id, className }) {
+    const generatedId = (0, external_react_namespaceObject.useId)().replace(/:/g, '');
     const [datePopoverOpen, setDatePopoverOpen] = (0, external_react_namespaceObject.useState)(false);
     const [selectOpen, setSelectOpen] = (0, external_react_namespaceObject.useState)(false);
     const fieldId = id ?? generatedId;
+    const validationId = errorId ?? `${fieldId}-error`;
     const typeMeta = external_types_cjs_namespaceObject.FIELD_TYPE_META[fieldType];
     const effectiveMode = typeMeta.supportsExpression ? mode : 'fixed';
     const editableOnValueChange = locked ? void 0 : onValueChange;
@@ -77,6 +78,8 @@ function LockableValueField({ value = '', onValueChange, onValueBlur, locked = t
                 headerActions: headerActions
             }),
             typeMeta.supportsExpression ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_input_group_cjs_namespaceObject.InputGroup, {
+                error: error,
+                errorId: validationId,
                 children: [
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_group_cjs_namespaceObject.InputGroupAddon, {
                         align: "inline-start",
@@ -92,7 +95,11 @@ function LockableValueField({ value = '', onValueChange, onValueBlur, locked = t
                         onBlur: onValueBlur,
                         readOnly: !editableOnValueChange,
                         placeholder: fieldLabel,
-                        fieldType
+                        fieldType,
+                        'aria-invalid': error ? true : void 0,
+                        'aria-describedby': error ? validationId : void 0,
+                        'aria-errormessage': error ? validationId : void 0,
+                        'data-slot': 'input-group-control'
                     }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_group_cjs_namespaceObject.InputGroupInput, {
                         id: fieldId,
                         readOnly: !editableOnValueChange,
@@ -111,6 +118,9 @@ function LockableValueField({ value = '', onValueChange, onValueBlur, locked = t
                         className: "flex h-full flex-1 items-center px-3",
                         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_switch_cjs_namespaceObject.Switch, {
                             id: fieldId,
+                            "aria-invalid": error ? true : void 0,
+                            "aria-describedby": error ? validationId : void 0,
+                            "aria-errormessage": error ? validationId : void 0,
                             checked: 'true' === value,
                             onCheckedChange: (checked)=>onValueChange?.(String(checked)),
                             onBlur: onValueBlur,
@@ -129,6 +139,9 @@ function LockableValueField({ value = '', onValueChange, onValueBlur, locked = t
                                     type: "button",
                                     id: fieldId,
                                     "data-slot": "input-group-control",
+                                    "aria-invalid": error ? true : void 0,
+                                    "aria-describedby": error ? validationId : void 0,
+                                    "aria-errormessage": error ? validationId : void 0,
                                     disabled: !onValueChange,
                                     className: "flex h-full flex-1 items-center text-left text-sm text-foreground outline-none disabled:cursor-not-allowed disabled:opacity-50",
                                     children: value ? (0, external_utils_cjs_namespaceObject.formatDateValue)(value) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
@@ -204,6 +217,9 @@ function LockableValueField({ value = '', onValueChange, onValueBlur, locked = t
                     }),
                     locked ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_cjs_namespaceObject.Input, {
                         id: fieldId,
+                        "aria-invalid": error ? true : void 0,
+                        "aria-describedby": error ? validationId : void 0,
+                        "aria-errormessage": error ? validationId : void 0,
                         readOnly: true,
                         value: lockedDisplayValue,
                         placeholder: fieldLabel,
@@ -222,6 +238,9 @@ function LockableValueField({ value = '', onValueChange, onValueBlur, locked = t
                             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_select_cjs_namespaceObject.SelectTrigger, {
                                 id: fieldId,
                                 className: "flex-1",
+                                "aria-invalid": error ? true : void 0,
+                                "aria-describedby": error ? validationId : void 0,
+                                "aria-errormessage": error ? validationId : void 0,
                                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_select_cjs_namespaceObject.SelectValue, {
                                     placeholder: "Select an option"
                                 })
@@ -241,16 +260,30 @@ function LockableValueField({ value = '', onValueChange, onValueBlur, locked = t
                         onChange: (selected)=>onValueChange?.(JSON.stringify(selected)),
                         placeholder: "Select options...",
                         disabled: !onValueChange,
-                        onBlur: onValueBlur
+                        onBlur: onValueBlur,
+                        "aria-invalid": error ? true : void 0,
+                        "aria-describedby": error ? validationId : void 0,
+                        "aria-errormessage": error ? validationId : void 0
                     }) : 'file' === fieldType && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_file_upload_cjs_namespaceObject.FileUpload, {
                         id: fieldId,
                         ariaLabel: fileUploadAriaLabel ?? ('string' == typeof label ? label : fieldLabel),
                         className: "flex-1",
                         onFilesChange: (files)=>onValueChange?.(files.map((f)=>f.name).join(', ')),
                         disabled: !onValueChange,
-                        onBlur: onValueBlur
+                        onBlur: onValueBlur,
+                        "aria-invalid": error ? true : void 0,
+                        "aria-describedby": error ? validationId : void 0,
+                        "aria-errormessage": error ? validationId : void 0
                     })
                 ]
+            }),
+            error && !typeMeta.supportsExpression && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
+                id: validationId,
+                "data-slot": "lockable-value-field-error",
+                "aria-live": "polite",
+                "aria-atomic": "true",
+                className: "mt-1 text-xs leading-4 text-error",
+                children: error
             })
         ]
     });

package/dist/components/ui/lockable-value-field/lockable-value-field.d.ts

@@ -11,4 +11,4 @@ import type { LockableValueFieldProps } from './types';
  * Insert-variable menu is empty (and disabled) unless `variables` is
  * provided; file uploads aren't persisted anywhere.
  */
-export declare function LockableValueField({ value, onValueChange, onValueBlur, locked, onLockedChange, mode, onModeChange, renderExpressionEditor, fieldType, onFieldTypeChange, required, onRequiredChange, label, fileUploadAriaLabel, headerActions, compact, controlsVisibility, showFieldActions, options, onGenerateWithAi, variables, id, className, }: LockableValueFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function LockableValueField({ value, onValueChange, onValueBlur, locked, onLockedChange, mode, onModeChange, renderExpressionEditor, fieldType, onFieldTypeChange, required, onRequiredChange, label, error, errorId, fileUploadAriaLabel, headerActions, compact, controlsVisibility, showFieldActions, options, onGenerateWithAi, variables, id, className, }: LockableValueFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/lockable-value-field/lockable-value-field.js

@@ -16,11 +16,12 @@ import { LockToggleButton } from "./components/lock-toggle-button.js";
 import { ModeMenuItem } from "./components/mode-menu-item.js";
 import { FIELD_TYPE_META } from "./types.js";
 import { DEFAULT_SELECT_OPTIONS, formatDateValue, getLockedDisplayValue, parseDateValue, parseListValue, toDateOnlyString } from "./utils.js";
-function LockableValueField({ value = '', onValueChange, onValueBlur, locked = true, onLockedChange, mode = 'fixed', onModeChange, renderExpressionEditor, fieldType = 'string', onFieldTypeChange, required, onRequiredChange, label, fileUploadAriaLabel, headerActions, compact, controlsVisibility = 'visible', showFieldActions = true, options = DEFAULT_SELECT_OPTIONS, onGenerateWithAi, variables = [], id, className }) {
-    const generatedId = useId();
+function LockableValueField({ value = '', onValueChange, onValueBlur, locked = true, onLockedChange, mode = 'fixed', onModeChange, renderExpressionEditor, fieldType = 'string', onFieldTypeChange, required, onRequiredChange, label, error, errorId, fileUploadAriaLabel, headerActions, compact, controlsVisibility = 'visible', showFieldActions = true, options = DEFAULT_SELECT_OPTIONS, onGenerateWithAi, variables = [], id, className }) {
+    const generatedId = useId().replace(/:/g, '');
     const [datePopoverOpen, setDatePopoverOpen] = useState(false);
     const [selectOpen, setSelectOpen] = useState(false);
     const fieldId = id ?? generatedId;
+    const validationId = errorId ?? `${fieldId}-error`;
     const typeMeta = FIELD_TYPE_META[fieldType];
     const effectiveMode = typeMeta.supportsExpression ? mode : 'fixed';
     const editableOnValueChange = locked ? void 0 : onValueChange;
@@ -49,6 +50,8 @@ function LockableValueField({ value = '', onValueChange, onValueBlur, locked = t
                 headerActions: headerActions
             }),
             typeMeta.supportsExpression ? /*#__PURE__*/ jsxs(InputGroup, {
+                error: error,
+                errorId: validationId,
                 children: [
                     /*#__PURE__*/ jsx(InputGroupAddon, {
                         align: "inline-start",
@@ -64,7 +67,11 @@ function LockableValueField({ value = '', onValueChange, onValueBlur, locked = t
                         onBlur: onValueBlur,
                         readOnly: !editableOnValueChange,
                         placeholder: fieldLabel,
-                        fieldType
+                        fieldType,
+                        'aria-invalid': error ? true : void 0,
+                        'aria-describedby': error ? validationId : void 0,
+                        'aria-errormessage': error ? validationId : void 0,
+                        'data-slot': 'input-group-control'
                     }) : /*#__PURE__*/ jsx(InputGroupInput, {
                         id: fieldId,
                         readOnly: !editableOnValueChange,
@@ -83,6 +90,9 @@ function LockableValueField({ value = '', onValueChange, onValueBlur, locked = t
                         className: "flex h-full flex-1 items-center px-3",
                         children: /*#__PURE__*/ jsx(Switch, {
                             id: fieldId,
+                            "aria-invalid": error ? true : void 0,
+                            "aria-describedby": error ? validationId : void 0,
+                            "aria-errormessage": error ? validationId : void 0,
                             checked: 'true' === value,
                             onCheckedChange: (checked)=>onValueChange?.(String(checked)),
                             onBlur: onValueBlur,
@@ -101,6 +111,9 @@ function LockableValueField({ value = '', onValueChange, onValueBlur, locked = t
                                     type: "button",
                                     id: fieldId,
                                     "data-slot": "input-group-control",
+                                    "aria-invalid": error ? true : void 0,
+                                    "aria-describedby": error ? validationId : void 0,
+                                    "aria-errormessage": error ? validationId : void 0,
                                     disabled: !onValueChange,
                                     className: "flex h-full flex-1 items-center text-left text-sm text-foreground outline-none disabled:cursor-not-allowed disabled:opacity-50",
                                     children: value ? formatDateValue(value) : /*#__PURE__*/ jsx("span", {
@@ -176,6 +189,9 @@ function LockableValueField({ value = '', onValueChange, onValueBlur, locked = t
                     }),
                     locked ? /*#__PURE__*/ jsx(Input, {
                         id: fieldId,
+                        "aria-invalid": error ? true : void 0,
+                        "aria-describedby": error ? validationId : void 0,
+                        "aria-errormessage": error ? validationId : void 0,
                         readOnly: true,
                         value: lockedDisplayValue,
                         placeholder: fieldLabel,
@@ -194,6 +210,9 @@ function LockableValueField({ value = '', onValueChange, onValueBlur, locked = t
                             /*#__PURE__*/ jsx(SelectTrigger, {
                                 id: fieldId,
                                 className: "flex-1",
+                                "aria-invalid": error ? true : void 0,
+                                "aria-describedby": error ? validationId : void 0,
+                                "aria-errormessage": error ? validationId : void 0,
                                 children: /*#__PURE__*/ jsx(SelectValue, {
                                     placeholder: "Select an option"
                                 })
@@ -213,16 +232,30 @@ function LockableValueField({ value = '', onValueChange, onValueBlur, locked = t
                         onChange: (selected)=>onValueChange?.(JSON.stringify(selected)),
                         placeholder: "Select options...",
                         disabled: !onValueChange,
-                        onBlur: onValueBlur
+                        onBlur: onValueBlur,
+                        "aria-invalid": error ? true : void 0,
+                        "aria-describedby": error ? validationId : void 0,
+                        "aria-errormessage": error ? validationId : void 0
                     }) : 'file' === fieldType && /*#__PURE__*/ jsx(FileUpload, {
                         id: fieldId,
                         ariaLabel: fileUploadAriaLabel ?? ('string' == typeof label ? label : fieldLabel),
                         className: "flex-1",
                         onFilesChange: (files)=>onValueChange?.(files.map((f)=>f.name).join(', ')),
                         disabled: !onValueChange,
-                        onBlur: onValueBlur
+                        onBlur: onValueBlur,
+                        "aria-invalid": error ? true : void 0,
+                        "aria-describedby": error ? validationId : void 0,
+                        "aria-errormessage": error ? validationId : void 0
                     })
                 ]
+            }),
+            error && !typeMeta.supportsExpression && /*#__PURE__*/ jsx("p", {
+                id: validationId,
+                "data-slot": "lockable-value-field-error",
+                "aria-live": "polite",
+                "aria-atomic": "true",
+                className: "mt-1 text-xs leading-4 text-error",
+                children: error
             })
         ]
     });

package/dist/components/ui/lockable-value-field/types.d.ts

@@ -1,5 +1,5 @@
 import { type LucideIcon } from 'lucide-react';
-import type { ReactNode } from 'react';
+import type { AriaAttributes, ReactNode } from 'react';
 export type LockableValueFieldMode = 'fixed' | 'expression';
 export type LockableFieldType = 'string' | 'integer' | 'date' | 'boolean' | 'single-select' | 'multi-select' | 'file';
 interface FieldTypeMeta {
@@ -42,6 +42,10 @@ export interface LockableValueFieldProps {
         readOnly: boolean;
         placeholder: string;
         fieldType: LockableFieldType;
+        'aria-invalid'?: AriaAttributes['aria-invalid'];
+        'aria-describedby'?: string;
+        'aria-errormessage'?: string;
+        'data-slot'?: string;
     }) => ReactNode;
     /** The field's data type. Defaults to 'string'. Determines which control renders the value. */
     fieldType?: LockableFieldType;
@@ -53,6 +57,10 @@ export interface LockableValueFieldProps {
     onRequiredChange?: (required: boolean) => void;
     /** Overrides the default mode-based label (e.g. a field name instead of "String value"). */
     label?: ReactNode;
+    /** Field-specific validation feedback rendered immediately below the active control. */
+    error?: ReactNode;
+    /** Optional id for the inline validation message. */
+    errorId?: string;
     /** Accessible name for the file-upload dropzone. Defaults to a string `label`, then the computed field label. */
     fileUploadAriaLabel?: string;
     /** Extra content rendered after the built-in AI assist / Insert variable buttons (e.g. a delete button). */

package/dist/components/ui/multi-select.cjs

@@ -35,7 +35,7 @@ const external_checkbox_cjs_namespaceObject = require("./checkbox.cjs");
 const external_command_cjs_namespaceObject = require("./command.cjs");
 const external_popover_cjs_namespaceObject = require("./popover.cjs");
 const index_cjs_namespaceObject = require("../../lib/index.cjs");
-const MultiSelect = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ id, options, selected, onChange, placeholder = 'Select items...', emptyMessage = 'No items found.', className, maxSelected, disabled = false, searchPlaceholder = 'Search...', clearAllText, onBlur }, ref)=>{
+const MultiSelect = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ id, options, selected, onChange, placeholder = 'Select items...', emptyMessage = 'No items found.', className, maxSelected, disabled = false, searchPlaceholder = 'Search...', clearAllText, onBlur, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage }, ref)=>{
     const [open, setOpen] = external_react_namespaceObject.useState(false);
     const handleUnselect = (value)=>{
         onChange(selected.filter((s)=>s !== value));
@@ -71,6 +71,9 @@ const MultiSelect = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ i
                         variant: "outline",
                         role: "combobox",
                         "aria-expanded": open,
+                        "aria-invalid": ariaInvalid,
+                        "aria-describedby": ariaDescribedBy,
+                        "aria-errormessage": ariaErrorMessage,
                         "aria-label": id ? void 0 : selected.length > 0 ? `${selected.length} ${1 === selected.length ? 'item' : 'items'} selected` : placeholder,
                         className: (0, index_cjs_namespaceObject.cn)('w-full justify-between future:rounded-xl future:border-0 future:bg-surface-overlay future:hover:bg-surface-hover future:font-normal future:text-muted-foreground', selected.length > 0 ? 'h-auto min-h-10' : 'h-10'),
                         disabled: disabled,

package/dist/components/ui/multi-select.d.ts

@@ -17,6 +17,9 @@ export interface MultiSelectProps {
     clearAllText?: string | ((count: number) => string);
     /** Called when the multi-select popover closes after being opened. */
     onBlur?: () => void;
+    'aria-invalid'?: React.AriaAttributes['aria-invalid'];
+    'aria-describedby'?: string;
+    'aria-errormessage'?: string;
 }
 declare const MultiSelect: React.ForwardRefExoticComponent<MultiSelectProps & React.RefAttributes<HTMLDivElement>>;
 export { MultiSelect };

package/dist/components/ui/multi-select.js

@@ -7,7 +7,7 @@ import { Checkbox } from "./checkbox.js";
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "./command.js";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
 import { cn } from "../../lib/index.js";
-const MultiSelect = /*#__PURE__*/ forwardRef(({ id, options, selected, onChange, placeholder = 'Select items...', emptyMessage = 'No items found.', className, maxSelected, disabled = false, searchPlaceholder = 'Search...', clearAllText, onBlur }, ref)=>{
+const MultiSelect = /*#__PURE__*/ forwardRef(({ id, options, selected, onChange, placeholder = 'Select items...', emptyMessage = 'No items found.', className, maxSelected, disabled = false, searchPlaceholder = 'Search...', clearAllText, onBlur, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage }, ref)=>{
     const [open, setOpen] = useState(false);
     const handleUnselect = (value)=>{
         onChange(selected.filter((s)=>s !== value));
@@ -43,6 +43,9 @@ const MultiSelect = /*#__PURE__*/ forwardRef(({ id, options, selected, onChange,
                         variant: "outline",
                         role: "combobox",
                         "aria-expanded": open,
+                        "aria-invalid": ariaInvalid,
+                        "aria-describedby": ariaDescribedBy,
+                        "aria-errormessage": ariaErrorMessage,
                         "aria-label": id ? void 0 : selected.length > 0 ? `${selected.length} ${1 === selected.length ? 'item' : 'items'} selected` : placeholder,
                         className: cn('w-full justify-between future:rounded-xl future:border-0 future:bg-surface-overlay future:hover:bg-surface-hover future:font-normal future:text-muted-foreground', selected.length > 0 ? 'h-auto min-h-10' : 'h-10'),
                         disabled: disabled,

package/dist/styles.css

@@ -2171,6 +2171,10 @@
   .rounded-bl-2xl {
     border-bottom-left-radius: var(--radius-2xl);
   }
+  .\!border-0 {
+    border-style: var(--tw-border-style) !important;
+    border-width: 0px !important;
+  }
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -2291,6 +2295,9 @@
       border-color: color-mix(in oklab, var(--destructive) 30%, transparent);
     }
   }
+  .border-error {
+    border-color: var(--error);
+  }
   .border-error\/20 {
     border-color: var(--error);
     @supports (color: color-mix(in lab, red, red)) {
@@ -4352,6 +4359,10 @@
     --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .\!ring-0 {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
+  }
   .ring {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -4383,6 +4394,12 @@
   .ring-emerald-500 {
     --tw-ring-color: var(--color-emerald-500);
   }
+  .ring-error\/20 {
+    --tw-ring-color: var(--error);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--error) 20%, transparent);
+    }
+  }
   .ring-primary {
     --tw-ring-color: var(--primary);
   }
@@ -5611,16 +5628,16 @@
       --tw-ring-color: var(--ring);
     }
   }
-  .has-\[\[data-slot\]\[aria-invalid\=true\]\]\:border-destructive {
+  .has-\[\[data-slot\]\[aria-invalid\=true\]\]\:border-error {
     &:has(*:is([data-slot][aria-invalid=true])) {
-      border-color: var(--destructive);
+      border-color: var(--error);
     }
   }
-  .has-\[\[data-slot\]\[aria-invalid\=true\]\]\:ring-destructive\/20 {
+  .has-\[\[data-slot\]\[aria-invalid\=true\]\]\:ring-error\/20 {
     &:has(*:is([data-slot][aria-invalid=true])) {
-      --tw-ring-color: var(--destructive);
+      --tw-ring-color: var(--error);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--error) 20%, transparent);
       }
     }
   }
@@ -5639,6 +5656,18 @@
       opacity: 50%;
     }
   }
+  .aria-invalid\:border-error {
+    &[aria-invalid="true"] {
+      border-color: var(--error);
+    }
+  }
+  .aria-invalid\:focus-visible\:ring-error {
+    &[aria-invalid="true"] {
+      &:focus-visible {
+        --tw-ring-color: var(--error);
+      }
+    }
+  }
   .aria-selected\:text-muted-foreground {
     &[aria-selected="true"] {
       color: var(--muted-foreground);
@@ -6475,6 +6504,20 @@
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
+  .future\:ring-1 {
+    :is(.future-dark, .future-light) & {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+  .future\:ring-error\/40 {
+    :is(.future-dark, .future-light) & {
+      --tw-ring-color: var(--error);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--error) 40%, transparent);
+      }
+    }
+  }
   .future\:placeholder\:font-normal {
     :is(.future-dark, .future-light) & {
       &::placeholder {
@@ -6581,6 +6624,42 @@
       }
     }
   }
+  .future\:has-\[\[data-slot\]\[aria-invalid\=true\]\]\:ring-1 {
+    :is(.future-dark, .future-light) & {
+      &:has(*:is([data-slot][aria-invalid=true])) {
+        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      }
+    }
+  }
+  .future\:has-\[\[data-slot\]\[aria-invalid\=true\]\]\:ring-error\/40 {
+    :is(.future-dark, .future-light) & {
+      &:has(*:is([data-slot][aria-invalid=true])) {
+        --tw-ring-color: var(--error);
+        @supports (color: color-mix(in lab, red, red)) {
+          --tw-ring-color: color-mix(in oklab, var(--error) 40%, transparent);
+        }
+      }
+    }
+  }
+  .future\:aria-invalid\:ring-1 {
+    :is(.future-dark, .future-light) & {
+      &[aria-invalid="true"] {
+        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      }
+    }
+  }
+  .future\:aria-invalid\:ring-error\/40 {
+    :is(.future-dark, .future-light) & {
+      &[aria-invalid="true"] {
+        --tw-ring-color: var(--error);
+        @supports (color: color-mix(in lab, red, red)) {
+          --tw-ring-color: color-mix(in oklab, var(--error) 40%, transparent);
+        }
+      }
+    }
+  }
   .future\:data-\[state\=checked\]\:border-foreground-accent {
     :is(.future-dark, .future-light) & {
       &[data-state="checked"] {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uipath/apollo-wind",
-  "version": "2.36.2",
+  "version": "2.37.0",
   "description": "UiPath wind design system - A Tailwind CSS based React component library",
   "type": "module",
   "main": "./dist/index.js",