@coopdigital/react 1.27.2 → 1.29.0

package/dist/components/Button/Button.js

@@ -1,6 +1,6 @@
 "use client";
 import { LoadingSpinner } from "../LoadingSpinner/LoadingSpinner.js";
-import { hasUserBg } from "../../utils/index.js";
+import { hasUserBg } from "../../utils/classes.js";
 import clsx from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import React, { useCallback, useState } from "react";

package/dist/components/Card/Card.js

@@ -1,5 +1,5 @@
 import { Image } from "../Image/Image.js";
-import { hasUserBg } from "../../utils/index.js";
+import { hasUserBg } from "../../utils/classes.js";
 import Picture_default from "../Picture/index.js";
 import { useSlots } from "../../hooks/useSlots.js";
 import clsx from "clsx";

package/dist/components/Checkbox/Checkbox.d.ts

@@ -10,15 +10,15 @@ export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement
   error?: boolean;
   /** Specify the component id. Will be auto-generated if not set. */
   id?: string;
-  /** Specify the component name. */
-  name: string;
+  /** Specify the component name. Without a name, the value is not submitted with a form. */
+  name?: string;
   /** Specify a custom React ref for this component. */
   ref?: Ref<HTMLInputElement>;
   /** Specify the component size. */
   size?: StandardSizes;
 }
 declare const Checkbox: {
-  ({ className, disabled, error, id, name, ref, size, ...props }: CheckboxProps): JSX.Element;
+  ({ "aria-describedby": ariaDescribedBy, className, disabled, error, id, name, ref, size, ...props }: CheckboxProps): JSX.Element;
   slot: {
     field: boolean;
     inline: boolean;

package/dist/components/Checkbox/Checkbox.js

@@ -1,13 +1,15 @@
 "use client";
-import { useField } from "../Field/Field.context.js";
+import { getDescribedBy, getFieldError, useField } from "../Field/Field.context.js";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Checkbox/Checkbox.tsx
-const Checkbox = ({ className, disabled, error = false, id, name, ref, size, ...props }) => {
+const Checkbox = ({ "aria-describedby": ariaDescribedBy, className, disabled, error, id, name, ref, size, ...props }) => {
 	const field = useField();
+	const hasError = getFieldError(error, field);
 	const componentProps = {
+		"aria-describedby": getDescribedBy(ariaDescribedBy, field),
+		"aria-invalid": hasError || void 0,
 		className: clsx("coop-checkbox", className),
-		"data-error": error || void 0,
 		"data-size": size ?? void 0,
 		disabled,
 		id: id ?? field?.id,

package/dist/components/Combobox/Combobox.js

@@ -1,8 +1,8 @@
 "use client";
 import { ChevronDownIcon } from "../icons/ChevronDownIcon.js";
-import { getSlotProp } from "../../utils/index.js";
+import { getSlotProp } from "../../utils/slots.js";
 import { useSlots } from "../../hooks/useSlots.js";
-import { useField } from "../Field/Field.context.js";
+import { getFieldError, useField } from "../Field/Field.context.js";
 import { defaultFilter, defaultIsItemDisabled, defaultItemToString, normalizeOptions } from "./combobox-utils.js";
 import { ComboboxContext, useComboboxContext } from "./Combobox.context.js";
 import { TextInput } from "../TextInput/TextInput.js";
@@ -18,13 +18,14 @@ const componentSlots = {
 const Combobox = ({ allowCustom = false, children, className, disabled, error, id, inputFilter, isItemDisabled, itemToString, onChange, onHighlight, onSelect, onStateChange, onToggle, openOnClick = true, ref, size, ...props }) => {
 	const field = useField();
 	const uid = id ?? field?.id;
+	const hasError = getFieldError(error, field);
 	const slots = useSlots(componentSlots, children);
 	const userOptions = getSlotProp(slots.ComboboxOptions, "options") ?? [];
 	const items = normalizeOptions(userOptions);
 	const [inputItems, setInputItems] = useState(items);
 	const componentProps = {
 		className: clsx("coop-combobox", className),
-		"data-error": error ?? void 0,
+		"data-field": "",
 		"data-size": size ?? void 0,
 		id: uid,
 		...props
@@ -74,6 +75,7 @@ const Combobox = ({ allowCustom = false, children, className, disabled, error, i
 	return /* @__PURE__ */ jsx(ComboboxContext.Provider, {
 		value: {
 			disabled,
+			error: hasError,
 			items: inputItems,
 			props: comboboxProps,
 			size
@@ -90,6 +92,7 @@ const ComboboxInput = ({ className, placeholder, ...props }) => {
 	const componentProps = {
 		className,
 		disabled: combobox.disabled,
+		error: combobox.error,
 		placeholder,
 		size: combobox.size,
 		...props

package/dist/components/DatePicker/DatePicker.js

@@ -3,7 +3,7 @@ import { CalendarIcon } from "../icons/CalendarIcon.js";
 import { CrossIcon } from "../icons/CrossIcon.js";
 import { TickIcon } from "../icons/TickIcon.js";
 import { Button } from "../Button/Button.js";
-import { useField } from "../Field/Field.context.js";
+import { getFieldError, useField } from "../Field/Field.context.js";
 import { TextInput } from "../TextInput/TextInput.js";
 import { Popover } from "../Popover/Popover.js";
 import { getDateValues, getDefaultMonth, getEndDate, getInitialDate, getStartDate, shouldClose, shouldSkipParsing } from "./datepicker-utils.js";
@@ -45,8 +45,9 @@ const Calendar = ({ captionLayout = "label", className, disabled, endMonth, form
 		...props
 	});
 };
-const DatePicker = ({ className, closeOnSelect = true, dateFormat = "dd/MM/yyyy", disabled, disabledDates, endDate, error = false, id, initialDate = now, initialSelected = false, mode = "single", name, onChange, onSelect, ref, required = false, size, startDate, ...props }) => {
+const DatePicker = ({ className, closeOnSelect = true, dateFormat = "dd/MM/yyyy", disabled, disabledDates, endDate, error, id, initialDate = now, initialSelected = false, mode = "single", name, onChange, onSelect, ref, required = false, size, startDate, ...props }) => {
 	const field = useField();
+	const hasError = getFieldError(error, field);
 	initialDate = getInitialDate(mode, initialDate);
 	const startDateProp = startDate;
 	const endDateProp = endDate;
@@ -112,7 +113,7 @@ const DatePicker = ({ className, closeOnSelect = true, dateFormat = "dd/MM/yyyy"
 	const componentProps = {
 		className: clsx("coop-datepicker", className),
 		"data-disabled": disabled ?? void 0,
-		"data-error": error || void 0,
+		"data-field": "",
 		"data-mode": mode,
 		...props
 	};
@@ -165,6 +166,7 @@ const DatePicker = ({ className, closeOnSelect = true, dateFormat = "dd/MM/yyyy"
 						autoComplete: "off",
 						className: "coop-datepicker-input",
 						disabled,
+						error: hasError,
 						id: valueProps.id + "_display",
 						name: name + "_display",
 						onChange: updateFromInput,

package/dist/components/Dialog/Dialog.js

@@ -1,6 +1,6 @@
 "use client";
 import { CrossIcon } from "../icons/CrossIcon.js";
-import { hasUserBg } from "../../utils/index.js";
+import { hasUserBg } from "../../utils/classes.js";
 import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useContext, useEffect, useRef } from "react";

package/dist/components/Expandable/Expandable.js

@@ -1,5 +1,5 @@
 import { ChevronDownIcon } from "../icons/ChevronDownIcon.js";
-import { hasUserBg } from "../../utils/index.js";
+import { hasUserBg } from "../../utils/classes.js";
 import { useSlots } from "../../hooks/useSlots.js";
 import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/Field/Field.context.js

@@ -1,11 +1,10 @@
 "use client";
+import { joinIds } from "../FieldMarkers/fieldmarkers-utils.js";
 import { createContext, useContext } from "react";
 //#region src/components/Field/Field.context.ts
 const FieldContext = createContext(null);
-const useField = () => {
-	const context = useContext(FieldContext);
-	if (!context) return null;
-	return context;
-};
+const useField = () => useContext(FieldContext);
+const getDescribedBy = (describedBy, field) => joinIds(field?.describedBy, describedBy);
+const getFieldError = (error, field) => error ?? field?.error ?? false;
 //#endregion
-export { FieldContext, useField };
+export { FieldContext, getDescribedBy, getFieldError, useField };

package/dist/components/Field/Field.d.ts

@@ -12,7 +12,7 @@ interface FieldProps extends HTMLAttributes<HTMLDivElement> {
   children?: React.ReactNode;
   /** Specify additional CSS classes. */
   classname?: string;
-  /** Specify the component error state. */
+  /** Specify the component error state. Inherits the error state of a Fieldset with `group` set when not specified. */
   error?: boolean;
   /** Specify whether the Field should show the left-hand error bar if it is in an error state. */
   hideErrorBar?: boolean;
@@ -20,7 +20,7 @@ interface FieldProps extends HTMLAttributes<HTMLDivElement> {
   ref?: Ref<HTMLDivElement>;
 }
 declare const Field: {
-  ({ boxed, children, className, error, hideErrorBar, ref, ...props }: FieldProps): JSX.Element;
+  ({ boxed, children, className, error: errorProp, hideErrorBar, ref, ...props }: FieldProps): JSX.Element;
   slot: {
     name: string;
   };

package/dist/components/Field/Field.js

@@ -1,32 +1,35 @@
 "use client";
 import { useId as useId$1 } from "../../hooks/useId.js";
-import { getSlotProp } from "../../utils/index.js";
-import { FieldContext } from "./Field.context.js";
+import { forEachSlot, getSlotProp } from "../../utils/slots.js";
+import { getMarkerIds } from "../FieldMarkers/fieldmarkers-utils.js";
+import { FieldContext, useField } from "./Field.context.js";
 import { Error } from "../FieldMarkers/Error.js";
 import { Hint } from "../FieldMarkers/Hint.js";
 import { Label } from "../FieldMarkers/Label.js";
+import { useFieldset } from "../Fieldset/Fieldset.context.js";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 import "react";
 //#region src/components/Field/Field.tsx
-const Field = ({ boxed = false, children, className, error = false, hideErrorBar = false, ref, ...props }) => {
+const Field = ({ boxed = false, children, className, error: errorProp, hideErrorBar = false, ref, ...props }) => {
+	const internalId = useId$1();
+	const fieldset = useFieldset();
+	const error = errorProp ?? fieldset?.error ?? false;
 	const controlProps = {
 		disabled: false,
-		id: useId$1()
+		id: internalId
 	};
-	Array.from([children].flat()).forEach((child) => {
-		if (child && typeof child === "object" && "type" in child) {
-			if (typeof child?.type === "function" && "slot" in child.type) {
-				const { slot } = child.type;
-				if (slot.field && child.props) {
-					controlProps.inline = slot.inline ?? false;
-					controlProps.disabled = getSlotProp(child, "disabled") ?? false;
-					controlProps.id = getSlotProp(child, "id") ?? controlProps.id;
-					controlProps.suffix = slot.suffix ?? void 0;
-				}
-			}
-		}
+	const markers = {};
+	forEachSlot(children, (slot, child) => {
+		if (slot.field) {
+			controlProps.inline = slot.inline ?? false;
+			controlProps.disabled = getSlotProp(child, "disabled") ?? false;
+			controlProps.id = getSlotProp(child, "id") ?? controlProps.id;
+			controlProps.suffix = slot.suffix ?? void 0;
+		} else if (slot.name === "FieldHint") markers.hint = { id: getSlotProp(child, "id") };
+		else if (slot.name === "FieldError") markers.error = { id: getSlotProp(child, "id") };
 	});
+	const markerIds = getMarkerIds(markers, controlProps.id);
 	const componentProps = {
 		...props,
 		"aria-disabled": controlProps.disabled || void 0,
@@ -36,7 +39,11 @@ const Field = ({ boxed = false, children, className, error = false, hideErrorBar
 		"data-hide-error": hideErrorBar || void 0
 	};
 	return /* @__PURE__ */ jsx(FieldContext.Provider, {
-		value: { ...controlProps },
+		value: {
+			...controlProps,
+			...markerIds,
+			error
+		},
 		children: /* @__PURE__ */ jsx("div", {
 			...componentProps,
 			ref,
@@ -44,9 +51,22 @@ const Field = ({ boxed = false, children, className, error = false, hideErrorBar
 		})
 	});
 };
-const FieldLabel = (props) => /* @__PURE__ */ jsx(Label, { ...props });
-const FieldHint = (props) => /* @__PURE__ */ jsx(Hint, { ...props });
-const FieldError = (props) => /* @__PURE__ */ jsx(Error, { ...props });
+const FieldLabel = (props) => {
+	const field = useField();
+	return /* @__PURE__ */ jsx(Label, {
+		htmlFor: field ? field.id + (field.suffix ?? "") : void 0,
+		id: field ? `${field.id}_label` : void 0,
+		...props
+	});
+};
+const FieldHint = (props) => /* @__PURE__ */ jsx(Hint, {
+	id: useField()?.hintId,
+	...props
+});
+const FieldError = (props) => /* @__PURE__ */ jsx(Error, {
+	id: useField()?.errorId,
+	...props
+});
 Field.slot = { name: "Field" };
 FieldLabel.slot = { name: "FieldLabel" };
 FieldHint.slot = { name: "FieldHint" };

package/dist/components/FieldMarkers/Error.js

@@ -1,15 +1,22 @@
 import clsx from "clsx";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/FieldMarkers/Error.tsx
 const Error = ({ children, className, ref, ...props }) => {
 	const componentProps = {
 		className: clsx("coop-field-error ", className),
 		...props
 	};
-	return /* @__PURE__ */ jsx("span", {
+	return /* @__PURE__ */ jsxs("span", {
 		...componentProps,
 		ref,
-		children
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: "Error:"
+			}),
+			" ",
+			children
+		]
 	});
 };
 //#endregion

package/dist/components/FieldMarkers/Label.js

@@ -1,13 +1,9 @@
-import { useField } from "../Field/Field.context.js";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/FieldMarkers/Label.tsx
-const Label = ({ children, className, htmlFor, id, isVisible = true, ref, ...props }) => {
-	const field = useField();
+const Label = ({ children, className, isVisible = true, ref, ...props }) => {
 	const componentProps = {
 		className: clsx("coop-field-label", !isVisible && "sr-only", className),
-		htmlFor: htmlFor ?? (field?.id ? field.id + (field?.suffix ?? "") : void 0),
-		id: id ?? (field?.id ? field.id + "_label" : void 0),
 		...props
 	};
 	return /* @__PURE__ */ jsx("label", {

package/dist/components/FieldMarkers/fieldmarkers-utils.js

@@ -0,0 +1,13 @@
+//#region src/components/FieldMarkers/fieldmarkers-utils.ts
+const joinIds = (...ids) => ids.filter(Boolean).join(" ") || void 0;
+const getMarkerIds = (markers, baseId) => {
+	const hintId = markers.hint?.id ?? `${baseId}_hint`;
+	const errorId = markers.error?.id ?? `${baseId}_error`;
+	return {
+		describedBy: joinIds(markers.hint && hintId, markers.error && errorId),
+		errorId,
+		hintId
+	};
+};
+//#endregion
+export { getMarkerIds, joinIds };

package/dist/components/Fieldset/Fieldset.context.js

@@ -0,0 +1,7 @@
+"use client";
+import { createContext, useContext } from "react";
+//#region src/components/Fieldset/Fieldset.context.ts
+const FieldsetContext = createContext(null);
+const useFieldset = () => useContext(FieldsetContext);
+//#endregion
+export { FieldsetContext, useFieldset };

package/dist/components/Fieldset/Fieldset.d.ts

@@ -14,13 +14,15 @@ export interface FieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElemen
   disabled?: boolean;
   /** Specify the component error state. */
   error?: boolean;
+  /** Specify whether the Fieldset is a single question, such as a group of Radio inputs. Fields inside inherit its error state. */
+  group?: boolean;
   /** Specify whether the Fieldset should show the left-hand error bar if it is in an error state. */
   hideErrorBar?: boolean;
   /** Specify a custom React ref for this component. */
   ref?: Ref<HTMLFieldSetElement>;
 }
 declare const Fieldset: {
-  ({ children, className, disabled, error, hideErrorBar, ref, ...props }: FieldsetProps): JSX.Element;
+  ({ "aria-describedby": ariaDescribedBy, children, className, disabled, error, group, hideErrorBar, id, ref, ...props }: FieldsetProps): JSX.Element;
   slot: {
     name: string;
   };

package/dist/components/Fieldset/Fieldset.js

@@ -1,22 +1,43 @@
+"use client";
+import { useId } from "../../hooks/useId.js";
+import { forEachSlot, getSlotProp } from "../../utils/slots.js";
+import { getMarkerIds, joinIds } from "../FieldMarkers/fieldmarkers-utils.js";
 import { Error } from "../FieldMarkers/Error.js";
 import { Hint } from "../FieldMarkers/Hint.js";
+import { FieldsetContext, useFieldset } from "./Fieldset.context.js";
 import { Legend } from "../FieldMarkers/Legend.js";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Fieldset/Fieldset.tsx
-const Fieldset = ({ children, className, disabled, error = false, hideErrorBar = false, ref, ...props }) => {
+const Fieldset = ({ "aria-describedby": ariaDescribedBy, children, className, disabled, error = false, group = false, hideErrorBar = false, id, ref, ...props }) => {
+	const uid = useId(id);
+	const markers = {};
+	forEachSlot(children, (slot, child) => {
+		if (slot.name === "FieldsetHint") markers.hint = { id: getSlotProp(child, "id") };
+		else if (slot.name === "FieldsetError") markers.error = { id: getSlotProp(child, "id") };
+	});
+	const { describedBy, errorId, hintId } = getMarkerIds(markers, uid);
 	const componentProps = {
+		"aria-describedby": joinIds(describedBy, ariaDescribedBy),
 		"aria-disabled": disabled,
 		className: clsx("coop-fieldset", className),
 		"data-error": error || void 0,
 		"data-hide-error": hideErrorBar || void 0,
 		disabled,
+		id,
 		...props
 	};
-	return /* @__PURE__ */ jsx("fieldset", {
-		...componentProps,
-		ref,
-		children
+	return /* @__PURE__ */ jsx(FieldsetContext.Provider, {
+		value: {
+			error: group && error,
+			errorId,
+			hintId
+		},
+		children: /* @__PURE__ */ jsx("fieldset", {
+			...componentProps,
+			ref,
+			children
+		})
 	});
 };
 const FieldsetFields = ({ children, className, orientation = "vertical", ...props }) => {
@@ -31,8 +52,14 @@ const FieldsetFields = ({ children, className, orientation = "vertical", ...prop
 	});
 };
 const FieldsetLegend = (props) => /* @__PURE__ */ jsx(Legend, { ...props });
-const FieldsetHint = (props) => /* @__PURE__ */ jsx(Hint, { ...props });
-const FieldsetError = (props) => /* @__PURE__ */ jsx(Error, { ...props });
+const FieldsetHint = (props) => /* @__PURE__ */ jsx(Hint, {
+	id: useFieldset()?.hintId,
+	...props
+});
+const FieldsetError = (props) => /* @__PURE__ */ jsx(Error, {
+	id: useFieldset()?.errorId,
+	...props
+});
 Fieldset.slot = { name: "Fieldset" };
 FieldsetFields.slot = { name: "FieldsetField" };
 FieldsetLegend.slot = { name: "FieldsetLegend" };

package/dist/components/Pill/Pill.js

@@ -1,4 +1,4 @@
-import { hasUserBg } from "../../utils/index.js";
+import { hasUserBg } from "../../utils/classes.js";
 import { useSlots } from "../../hooks/useSlots.js";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";

package/dist/components/Popover/Popover.js

@@ -1,4 +1,4 @@
-import { bgClassToColor, hasUserBg } from "../../utils/index.js";
+import { bgClassToColor, hasUserBg } from "../../utils/classes.js";
 import { useSlots } from "../../hooks/useSlots.js";
 import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/Radio/Radio.d.ts

@@ -18,7 +18,7 @@ export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
   size?: StandardSizes;
 }
 declare const Radio: {
-  ({ className, disabled, error, id, name, ref, size, ...props }: RadioProps): JSX.Element;
+  ({ "aria-describedby": ariaDescribedBy, className, disabled, error, id, name, ref, size, ...props }: RadioProps): JSX.Element;
   slot: {
     field: boolean;
     inline: boolean;

package/dist/components/Radio/Radio.js

@@ -1,13 +1,15 @@
 "use client";
-import { useField } from "../Field/Field.context.js";
+import { getDescribedBy, getFieldError, useField } from "../Field/Field.context.js";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Radio/Radio.tsx
-const Radio = ({ className, disabled, error = false, id, name, ref, size, ...props }) => {
+const Radio = ({ "aria-describedby": ariaDescribedBy, className, disabled, error, id, name, ref, size, ...props }) => {
 	const field = useField();
+	const hasError = getFieldError(error, field);
 	const componentProps = {
+		"aria-describedby": getDescribedBy(ariaDescribedBy, field),
+		"aria-invalid": hasError || void 0,
 		className: clsx("coop-radio", className),
-		"data-error": error || void 0,
 		"data-size": size ?? void 0,
 		disabled,
 		id: id ?? field?.id,

package/dist/components/Searchbox/Searchbox.js

@@ -1,7 +1,8 @@
 "use client";
 import { useId as useId$1 } from "../../hooks/useId.js";
 import { SearchIcon } from "../icons/SearchIcon.js";
-import { getSlotProp, hasUserBorder } from "../../utils/index.js";
+import { hasUserBorder } from "../../utils/classes.js";
+import { getSlotProp } from "../../utils/slots.js";
 import { Button } from "../Button/Button.js";
 import { useSlots } from "../../hooks/useSlots.js";
 import TextInput_default from "../TextInput/index.js";

package/dist/components/Select/Select.d.ts

@@ -19,8 +19,8 @@ export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement
   fit?: boolean;
   /** Specify the component id. Will be auto-generated if not set. */
   id?: string;
-  /** Specify the Select name. */
-  name: string;
+  /** Specify the Select name. Without a name, the value is not submitted with a form. */
+  name?: string;
   /** Specify a custom React ref for this component. */
   ref?: Ref<HTMLSelectElement>;
   /** Specify the component size. */
@@ -39,7 +39,7 @@ interface SelectOptionProps extends OptionHTMLAttributes<HTMLOptionElement> {
   className?: string;
 }
 declare const Select: {
-  ({ children, className, disabled, error, fit, id, name, ref, size, ...props }: SelectProps): JSX.Element;
+  ({ "aria-describedby": ariaDescribedBy, children, className, disabled, error, fit, id, name, ref, size, ...props }: SelectProps): JSX.Element;
   slot: {
     field: boolean;
     name: string;

package/dist/components/Select/Select.js

@@ -1,13 +1,15 @@
 "use client";
-import { useField } from "../Field/Field.context.js";
+import { getDescribedBy, getFieldError, useField } from "../Field/Field.context.js";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Select/Select.tsx
-const Select = ({ children, className, disabled, error, fit = false, id, name, ref, size, ...props }) => {
+const Select = ({ "aria-describedby": ariaDescribedBy, children, className, disabled, error, fit = false, id, name, ref, size, ...props }) => {
 	const field = useField();
+	const hasError = getFieldError(error, field);
 	const componentProps = {
+		"aria-describedby": getDescribedBy(ariaDescribedBy, field),
+		"aria-invalid": hasError || void 0,
 		className: clsx("coop-select", className),
-		"data-error": error ?? void 0,
 		"data-fit": fit || void 0,
 		"data-size": size ?? void 0,
 		disabled,

package/dist/components/Tag/Tag.js

@@ -1,4 +1,4 @@
-import { hasUserBg } from "../../utils/index.js";
+import { hasUserBg } from "../../utils/classes.js";
 import clsx from "clsx";
 import React from "react";
 //#region src/components/Tag/Tag.tsx

package/dist/components/TextInput/TextInput.d.ts

@@ -15,8 +15,8 @@ export interface TextInputProps extends Omit<InputHTMLAttributes<HTMLInputElemen
   fit?: boolean;
   /** Specify the component id. Will be auto-generated if not set. */
   id?: string;
-  /** Specify the component name. */
-  name: string;
+  /** Specify the component name. Without a name, the value is not submitted with a form. */
+  name?: string;
   /** Specify placeholder text. Do not use in place of a form label. */
   placeholder?: string;
   /** Specify the prefix. */
@@ -35,7 +35,7 @@ export interface TextInputProps extends Omit<InputHTMLAttributes<HTMLInputElemen
   type?: "text" | "email" | "number" | "password" | "search" | "tel" | "url" | "date" | "datetime-local" | "week" | "month" | "time";
 }
 declare const TextInput: {
-  ({ className, disabled, error, fit, id, name, placeholder, prefix, prefixInline, ref, size, suffix, suffixInline, type, ...props }: TextInputProps): JSX.Element;
+  ({ "aria-describedby": ariaDescribedBy, className, disabled, error, fit, id, name, placeholder, prefix, prefixInline, ref, size, suffix, suffixInline, type, ...props }: TextInputProps): JSX.Element;
   slot: {
     field: boolean;
     name: string;

package/dist/components/TextInput/TextInput.js

@@ -1,13 +1,15 @@
 "use client";
-import { useField } from "../Field/Field.context.js";
+import { getDescribedBy, getFieldError, useField } from "../Field/Field.context.js";
 import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/TextInput/TextInput.tsx
-const TextInput = ({ className, disabled, error = false, fit = false, id, name, placeholder, prefix, prefixInline = false, ref, size, suffix, suffixInline = false, type = "text", ...props }) => {
+const TextInput = ({ "aria-describedby": ariaDescribedBy, className, disabled, error, fit = false, id, name, placeholder, prefix, prefixInline = false, ref, size, suffix, suffixInline = false, type = "text", ...props }) => {
 	const field = useField();
+	const hasError = getFieldError(error, field);
 	const componentProps = {
+		"aria-describedby": getDescribedBy(ariaDescribedBy, field),
+		"aria-invalid": hasError || void 0,
 		className: clsx("coop-text-input", className),
-		"data-error": error || void 0,
 		"data-fit": fit || void 0,
 		"data-size": size ?? void 0,
 		disabled,
@@ -27,6 +29,8 @@ const TextInput = ({ className, disabled, error = false, fit = false, id, name,
 	} : {};
 	return prefix || suffix ? /* @__PURE__ */ jsxs("div", {
 		className: "coop-text-input-wrapper",
+		"data-field": "",
+		"data-size": size,
 		children: [
 			prefix && /* @__PURE__ */ jsx("span", {
 				...prefixProps,

package/dist/components/Textarea/Textarea.d.ts

@@ -27,8 +27,8 @@ export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElemen
   fit?: boolean;
   /** Specify the component id. Will be auto-generated if not set. */
   id?: string;
-  /** Specify the component name. */
-  name: string;
+  /** Specify the component name. Without a name, the value is not submitted with a form. */
+  name?: string;
   /** Specify placeholder text. Do not use in place of a form label. */
   placeholder?: string;
   /** Specify a custom React ref for this component. */
@@ -42,7 +42,7 @@ export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElemen
   size?: StandardSizes;
 }
 declare const Textarea: {
-  ({ className, cols, counter, cutoff, disabled, error, fit, id, maxLength, name, onChange: userOnChange, placeholder, ref, rows, size, ...props }: TextareaProps): JSX.Element;
+  ({ "aria-describedby": ariaDescribedBy, className, cols, counter, cutoff, disabled, error, fit, id, maxLength, name, onChange: userOnChange, placeholder, ref, rows, size, ...props }: TextareaProps): JSX.Element;
   slot: {
     field: boolean;
     name: string;

package/dist/components/Textarea/Textarea.js

@@ -1,5 +1,5 @@
 "use client";
-import { useField } from "../Field/Field.context.js";
+import { getDescribedBy, getFieldError, useField } from "../Field/Field.context.js";
 import { useDebounce } from "../../hooks/useDebounce.js";
 import clsx from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -9,12 +9,14 @@ const DEBOUNCE_DELAY = 750;
 const charCountMessage = (remaining) => {
 	return `You have ${Math.abs(remaining).toLocaleString()} ${Math.abs(remaining) === 1 ? "character" : "characters"} ${remaining < 0 ? "too many" : "remaining"}`;
 };
-const Textarea = ({ className, cols = 30, counter = false, cutoff = false, disabled = false, error = false, fit = false, id, maxLength, name, onChange: userOnChange, placeholder, ref, rows = 4, size, ...props }) => {
+const Textarea = ({ "aria-describedby": ariaDescribedBy, className, cols = 30, counter = false, cutoff = false, disabled = false, error, fit = false, id, maxLength, name, onChange: userOnChange, placeholder, ref, rows = 4, size, ...props }) => {
 	const field = useField();
+	const hasError = getFieldError(error, field);
 	const componentProps = {
+		"aria-describedby": getDescribedBy(ariaDescribedBy, field),
+		"aria-invalid": hasError || void 0,
 		className: clsx("coop-textarea", className),
 		cols,
-		"data-error": error ?? void 0,
 		"data-fit": fit || void 0,
 		"data-size": size ?? void 0,
 		disabled,