@uipath/apollo-wind 2.36.2 → 2.37.1

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

@@ -4,4 +4,18 @@ import * as React from 'react';
 declare const labelVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export type LabelProps = React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>;
 declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: import("class-variance-authority/types").ClassProp | undefined) => string> & React.RefAttributes<HTMLLabelElement>>;
-export { Label };
+export interface RequiredIndicatorProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children' | 'aria-hidden'> {
+}
+/**
+ * Marks a field as required. Place it right after the label text.
+ *
+ * Uses `text-current` rather than an error/destructive color: an untouched
+ * required field isn't in an error state, so coloring the asterisk red reads
+ * as a validation failure before the person has done anything. The asterisk
+ * glyph is `aria-hidden` since it's a visual affordance, not the thing that
+ * makes the field required to assistive tech; a `sr-only` "(required)" is
+ * included alongside it so the label still announces the requirement even if
+ * the field's own control is missing `required`/`aria-required`.
+ */
+declare const RequiredIndicator: React.ForwardRefExoticComponent<RequiredIndicatorProps & React.RefAttributes<HTMLSpanElement>>;
+export { Label, RequiredIndicator };

package/dist/components/ui/label.js

@@ -1,4 +1,4 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Root } from "@radix-ui/react-label";
 import { cva } from "class-variance-authority";
 import { forwardRef } from "react";
@@ -11,4 +11,20 @@ const Label = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE
         ...props
     }));
 Label.displayName = Root.displayName;
-export { Label };
+const RequiredIndicator = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsxs("span", {
+        ref: ref,
+        ...props,
+        className: cn('ml-0.5 text-current', className),
+        children: [
+            /*#__PURE__*/ jsx("span", {
+                "aria-hidden": "true",
+                children: "*"
+            }),
+            /*#__PURE__*/ jsx("span", {
+                className: "sr-only",
+                children: " (required)"
+            })
+        ]
+    }));
+RequiredIndicator.displayName = 'RequiredIndicator';
+export { Label, RequiredIndicator };

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

@@ -54,10 +54,7 @@ function FieldHeader({ label, fieldId, fieldLabel, required, fieldType, onFieldT
                 className: "text-xs font-medium text-foreground-muted",
                 children: [
                     fieldLabel,
-                    required && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                        className: "ml-0.5 text-destructive",
-                        children: "*"
-                    })
+                    required && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_label_cjs_namespaceObject.RequiredIndicator, {})
                 ]
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_tooltip_cjs_namespaceObject.TooltipProvider, {

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

@@ -3,7 +3,7 @@ import { Asterisk, Braces, ChevronDown, Sparkles } from "lucide-react";
 import { useId, useState } from "react";
 import { Button } from "../../button.js";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../../dropdown-menu.js";
-import { Label } from "../../label.js";
+import { Label, RequiredIndicator } from "../../label.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../../popover.js";
 import { Switch } from "../../switch.js";
 import { Textarea } from "../../textarea.js";
@@ -26,10 +26,7 @@ function FieldHeader({ label, fieldId, fieldLabel, required, fieldType, onFieldT
                 className: "text-xs font-medium text-foreground-muted",
                 children: [
                     fieldLabel,
-                    required && /*#__PURE__*/ jsx("span", {
-                        className: "ml-0.5 text-destructive",
-                        children: "*"
-                    })
+                    required && /*#__PURE__*/ jsx(RequiredIndicator, {})
                 ]
             }),
             /*#__PURE__*/ jsx(TooltipProvider, {

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/components/ui/prompt-editor/components/MarkdownPreview.cjs

@@ -70,8 +70,8 @@ const MARKDOWN_PREVIEW_STYLES = `
 .prompt-editor-preview th { font-weight: 600; background-color: var(--color-muted); }
 .prompt-editor-preview strong { font-weight: 700; }
 .prompt-editor-preview em { font-style: italic; }
-.prompt-editor-preview .token-pill { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 4px; border-radius: 4px; font-size: 13px; line-height: 20px; vertical-align: middle; background: var(--color-primary-lighter); color: var(--color-foreground); }
-.prompt-editor-preview .token-pill svg { display: block; flex-shrink: 0; color: var(--color-primary); width: 14px; height: 14px; }
+.prompt-editor-preview .token-pill { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 4px; border-radius: 4px; font-size: 13px; line-height: 20px; vertical-align: middle; background: var(--color-info-background); color: var(--color-info-text); }
+.prompt-editor-preview .token-pill svg { display: block; flex-shrink: 0; color: var(--color-info-icon); width: 14px; height: 14px; }
 `;
 const PURIFY_CONFIG = {
     ALLOWED_TAGS: [

package/dist/components/ui/prompt-editor/components/MarkdownPreview.js

@@ -32,8 +32,8 @@ const MARKDOWN_PREVIEW_STYLES = `
 .prompt-editor-preview th { font-weight: 600; background-color: var(--color-muted); }
 .prompt-editor-preview strong { font-weight: 700; }
 .prompt-editor-preview em { font-style: italic; }
-.prompt-editor-preview .token-pill { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 4px; border-radius: 4px; font-size: 13px; line-height: 20px; vertical-align: middle; background: var(--color-primary-lighter); color: var(--color-foreground); }
-.prompt-editor-preview .token-pill svg { display: block; flex-shrink: 0; color: var(--color-primary); width: 14px; height: 14px; }
+.prompt-editor-preview .token-pill { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 4px; border-radius: 4px; font-size: 13px; line-height: 20px; vertical-align: middle; background: var(--color-info-background); color: var(--color-info-text); }
+.prompt-editor-preview .token-pill svg { display: block; flex-shrink: 0; color: var(--color-info-icon); width: 14px; height: 14px; }
 `;
 const PURIFY_CONFIG = {
     ALLOWED_TAGS: [

package/dist/components/ui/prompt-editor/types.cjs

@@ -31,14 +31,14 @@ __webpack_require__.d(__webpack_exports__, {
 });
 const getPromptEditorTokenColors = ()=>({
         valid: {
-            background: 'var(--color-primary-lighter)',
-            border: 'var(--color-primary)',
-            text: 'var(--color-foreground)',
-            icon: 'var(--color-primary)'
+            background: 'var(--color-info-background)',
+            border: 'var(--color-info-icon)',
+            text: 'var(--color-info-text)',
+            icon: 'var(--color-info-icon)'
         },
         invalid: {
             background: 'var(--color-error-background)',
-            border: 'var(--color-error)',
+            border: 'var(--color-error-icon)',
             text: 'var(--color-error-text)',
             icon: 'var(--color-error-icon)'
         }

package/dist/components/ui/prompt-editor/types.js

@@ -1,13 +1,13 @@
 const getPromptEditorTokenColors = ()=>({
         valid: {
-            background: 'var(--color-primary-lighter)',
-            border: 'var(--color-primary)',
-            text: 'var(--color-foreground)',
-            icon: 'var(--color-primary)'
+            background: 'var(--color-info-background)',
+            border: 'var(--color-info-icon)',
+            text: 'var(--color-info-text)',
+            icon: 'var(--color-info-icon)'
         },
         invalid: {
             background: 'var(--color-error-background)',
-            border: 'var(--color-error)',
+            border: 'var(--color-error-icon)',
             text: 'var(--color-error-text)',
             icon: 'var(--color-error-icon)'
         }

package/dist/index.cjs

@@ -71,6 +71,7 @@ __webpack_require__.d(__webpack_exports__, {
     Column: ()=>column_cjs_namespaceObject.Column,
     AlertDialogTrigger: ()=>alert_dialog_cjs_namespaceObject.AlertDialogTrigger,
     DrawerOverlay: ()=>drawer_cjs_namespaceObject.DrawerOverlay,
+    RequiredIndicator: ()=>label_cjs_namespaceObject.RequiredIndicator,
     CardContent: ()=>card_cjs_namespaceObject.CardContent,
     SelectValue: ()=>select_cjs_namespaceObject.SelectValue,
     Slider: ()=>slider_cjs_namespaceObject.Slider,
@@ -509,6 +510,7 @@ exports.Progress = __webpack_exports__.Progress;
 exports.PromptEditor = __webpack_exports__.PromptEditor;
 exports.RadioGroup = __webpack_exports__.RadioGroup;
 exports.RadioGroupItem = __webpack_exports__.RadioGroupItem;
+exports.RequiredIndicator = __webpack_exports__.RequiredIndicator;
 exports.ResizableHandle = __webpack_exports__.ResizableHandle;
 exports.ResizablePanel = __webpack_exports__.ResizablePanel;
 exports.ResizablePanelGroup = __webpack_exports__.ResizablePanelGroup;
@@ -752,6 +754,7 @@ for(var __rspack_i in __webpack_exports__)if (-1 === [
     "PromptEditor",
     "RadioGroup",
     "RadioGroupItem",
+    "RequiredIndicator",
     "ResizableHandle",
     "ResizablePanel",
     "ResizablePanelGroup",

package/dist/index.d.ts

@@ -18,8 +18,8 @@ export { FIELD_TYPE_META, FIELD_TYPE_ORDER, LockableValueField, } from './compon
 export type { LockableValueFieldProps, LockableValueFieldMode, LockableFieldType, LockableValueFieldOption, } from './components/ui/lockable-value-field';
 export { Textarea } from './components/ui/textarea';
 export type { TextareaProps } from './components/ui/textarea';
-export { Label } from './components/ui/label';
-export type { LabelProps } from './components/ui/label';
+export { Label, RequiredIndicator } from './components/ui/label';
+export type { LabelProps, RequiredIndicatorProps } from './components/ui/label';
 export { Checkbox } from './components/ui/checkbox';
 export type { CheckboxProps } from './components/ui/checkbox';
 export { RadioGroup, RadioGroupItem } from './components/ui/radio-group';

package/dist/index.js

@@ -10,7 +10,7 @@ import { Input } from "./components/ui/input.js";
 import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea } from "./components/ui/input-group.js";
 import { FIELD_TYPE_META, FIELD_TYPE_ORDER, LockableValueField } from "./components/ui/lockable-value-field/index.js";
 import { Textarea } from "./components/ui/textarea.js";
-import { Label } from "./components/ui/label.js";
+import { Label, RequiredIndicator } from "./components/ui/label.js";
 import { Checkbox } from "./components/ui/checkbox.js";
 import { RadioGroup, RadioGroupItem } from "./components/ui/radio-group.js";
 import { Switch } from "./components/ui/switch.js";
@@ -69,4 +69,4 @@ import { ExpressionBuilder, RuleBuilder, RulesEngine } from "./components/forms/
 import { DataFetcher, DataSourceBuilder, DataTransformers, FetchAdapter } from "./components/forms/data-fetcher.js";
 import { analyticsPlugin, auditPlugin, autoSavePlugin, formattingPlugin, validationPlugin, workflowPlugin } from "./components/forms/form-plugins.js";
 import { hasMinMaxStep, hasOptions, isCustomField, isFileField } from "./components/forms/form-schema.js";
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Column, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataFetcher, DataSourceBuilder, DataTable, DataTableColumnHeader, DataTableSelectColumn, DataTransformers, DatePicker, DateTimePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EditableCell, EmptyState, ExpressionBuilder, FIELD_TYPE_META, FIELD_TYPE_ORDER, FetchAdapter, FileUpload, FormDesigner, FormFieldRenderer, FormStateViewer, Grid, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Label, LockableValueField, MetadataForm, MultiSelect, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PortalContainerProvider, Progress, PromptEditor, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, Row, RuleBuilder, RulesEngine, ScrollArea, ScrollBar, ScrollableTabsList, Search, SearchWithSuggestions, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, Slider, Spinner, StatsCard, Stepper, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, tree_view as TreeView, VARIABLE_DRAG_MIME, VariablePicker, VariablePickerContent, analyticsPlugin, auditPlugin, autoSavePlugin, badgeVariants, buttonVariants, cn, createEditableColumn, formattingPlugin, hasMinMaxStep, hasOptions, isCustomField, isFileField, spinnerVariants, toast, toggleVariants, validationPlugin, workflowPlugin };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Column, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataFetcher, DataSourceBuilder, DataTable, DataTableColumnHeader, DataTableSelectColumn, DataTransformers, DatePicker, DateTimePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EditableCell, EmptyState, ExpressionBuilder, FIELD_TYPE_META, FIELD_TYPE_ORDER, FetchAdapter, FileUpload, FormDesigner, FormFieldRenderer, FormStateViewer, Grid, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Label, LockableValueField, MetadataForm, MultiSelect, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PortalContainerProvider, Progress, PromptEditor, RadioGroup, RadioGroupItem, RequiredIndicator, ResizableHandle, ResizablePanel, ResizablePanelGroup, Row, RuleBuilder, RulesEngine, ScrollArea, ScrollBar, ScrollableTabsList, Search, SearchWithSuggestions, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, Slider, Spinner, StatsCard, Stepper, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, tree_view as TreeView, VARIABLE_DRAG_MIME, VariablePicker, VariablePickerContent, analyticsPlugin, auditPlugin, autoSavePlugin, badgeVariants, buttonVariants, cn, createEditableColumn, formattingPlugin, hasMinMaxStep, hasOptions, isCustomField, isFileField, spinnerVariants, toast, toggleVariants, validationPlugin, workflowPlugin };