@a-type/ui 6.1.41 → 6.1.43

package/dist/components/forms/CheckboxField.js

@@ -20,6 +20,6 @@ export function CheckboxField(_a) {
     const id = useIdOrGenerated(providedId);
     return (_jsxs(Field, { horizontal: true, className: className, style: style, id: id, children: [_jsx(Field.Control, { render: _jsx(Checkbox, Object.assign({}, props, { checked: props.checked, onCheckedChange: (v) => {
                         tools.setValue(!!v);
-                    } }, rest)) }), label && _jsx(Field.Label, { children: label }), description && _jsx(Field.Description, { children: description })] }));
+                    } }, rest)) }), label && _jsx(Field.Label, { children: label }), description && _jsx(Field.Description, { children: description }), _jsx(Field.Error, { fieldName: name })] }));
 }
 //# sourceMappingURL=CheckboxField.js.map

package/dist/components/forms/CheckboxField.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxField.js","sourceRoot":"","sources":["../../../src/components/forms/CheckboxField.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAElC,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAYnC,MAAM,UAAU,aAAa,CAAC,EAST;QATS,EAC7B,IAAI,EACJ,KAAK,EACL,SAAS,EACT,KAAK,EACL,QAAQ,EACR,EAAE,EAAE,UAAU,EACd,WAAW,OAES,EADjB,IAAI,cARsB,wEAS7B,CADO;IAEP,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,CAAC,GAAG,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC;IACzE,MAAM,EAAE,GAAG,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,OAAO,CACN,MAAC,KAAK,IAAC,UAAU,QAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,aAC3D,KAAC,KAAK,CAAC,OAAO,IACb,MAAM,EACL,KAAC,QAAQ,oBACJ,KAAK,IACT,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,eAAe,EAAE,CAAC,CAAC,EAAE,EAAE;wBACtB,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;oBACrB,CAAC,IACG,IAAI,EACP,GAEF,EACD,KAAK,IAAI,KAAC,KAAK,CAAC,KAAK,cAAE,KAAK,GAAe,EAC3C,WAAW,IAAI,KAAC,KAAK,CAAC,WAAW,cAAE,WAAW,GAAqB,IAC7D,CACR,CAAC;AACH,CAAC"}
+{"version":3,"file":"CheckboxField.js","sourceRoot":"","sources":["../../../src/components/forms/CheckboxField.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAElC,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAYnC,MAAM,UAAU,aAAa,CAAC,EAST;QATS,EAC7B,IAAI,EACJ,KAAK,EACL,SAAS,EACT,KAAK,EACL,QAAQ,EACR,EAAE,EAAE,UAAU,EACd,WAAW,OAES,EADjB,IAAI,cARsB,wEAS7B,CADO;IAEP,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,CAAC,GAAG,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC;IACzE,MAAM,EAAE,GAAG,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,OAAO,CACN,MAAC,KAAK,IAAC,UAAU,QAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,aAC3D,KAAC,KAAK,CAAC,OAAO,IACb,MAAM,EACL,KAAC,QAAQ,oBACJ,KAAK,IACT,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,eAAe,EAAE,CAAC,CAAC,EAAE,EAAE;wBACtB,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;oBACrB,CAAC,IACG,IAAI,EACP,GAEF,EACD,KAAK,IAAI,KAAC,KAAK,CAAC,KAAK,cAAE,KAAK,GAAe,EAC3C,WAAW,IAAI,KAAC,KAAK,CAAC,WAAW,cAAE,WAAW,GAAqB,EACpE,KAAC,KAAK,CAAC,KAAK,IAAC,SAAS,EAAE,IAAI,GAAI,IACzB,CACR,CAAC;AACH,CAAC"}

package/dist/components/forms/EmojiField.js

@@ -24,7 +24,7 @@ export function EmojiField(_a) {
     const [props, _, tools] = useField({ name });
     const id = useIdOrGenerated(providedId);
     const [open, setOpen] = useState(false);
-    return (_jsxs(Field, { horizontal: true, className: className, style: style, id: id, children: [_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(Field.Control, { render: _jsx("input", Object.assign({ type: "hidden" }, props)) }), _jsx(Popover.Trigger, { render: _jsx(Button, Object.assign({ id: `${id}-trigger`, "aria-label": "Select emoji", size: "wrapper" }, rest, { children: _jsx(Button.Icon, { className: cls.triggerIcon, children: props.value || _jsx(Icon, { name: "smile" }) }) })) }), _jsx(Popover.Content, { children: _jsx(EmojiPicker, { onValueChange: (v) => {
+    return (_jsxs(Field, { horizontal: true, className: className, style: style, id: id, children: [_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(Field.Control, { render: _jsx("input", Object.assign({ type: "hidden" }, props)) }), _jsx(Popover.Trigger, { render: _jsx(Button, Object.assign({ id: `${id}-trigger`, "aria-label": "Select emoji", size: "wrapper", emphasis: "ghost" }, rest, { children: _jsx(Button.Icon, { className: cls.triggerIcon, children: props.value || _jsx(Icon, { name: "smile" }) }) })) }), _jsx(Popover.Content, { children: _jsx(EmojiPicker, { onValueChange: (v) => {
                                 tools.setValue(v);
                                 setOpen(false);
                             }, onClear: required
@@ -32,6 +32,6 @@ export function EmojiField(_a) {
                                 : () => {
                                     tools.setValue('');
                                     setOpen(false);
-                                }, id: id }) })] }), label && _jsx(Field.Label, { children: label }), description && _jsx(Field.Description, { children: description })] }));
+                                }, id: id }) })] }), label && _jsx(Field.Label, { children: label }), description && _jsx(Field.Description, { children: description }), _jsx(Field.Error, { fieldName: name })] }));
 }
 //# sourceMappingURL=EmojiField.js.map

package/dist/components/forms/EmojiField.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmojiField.js","sourceRoot":"","sources":["../../../src/components/forms/EmojiField.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAClC,OAAO,EAAa,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAAE,MAAM,EAAe,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,GAAG,MAAM,yBAAyB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAWnC,MAAM,UAAU,UAAU,CAAC,EAST;QATS,EAC1B,IAAI,EACJ,KAAK,EACL,SAAS,EACT,QAAQ,EACR,EAAE,EAAE,UAAU,EACd,WAAW,EACX,KAAK,OAEY,EADd,IAAI,cARmB,wEAS1B,CADO;IAEP,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,CAAC,GAAG,QAAQ,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;IAC7C,MAAM,EAAE,GAAG,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxC,OAAO,CACN,MAAC,KAAK,IAAC,UAAU,QAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,aAC3D,MAAC,OAAO,IAAC,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,aACzC,KAAC,KAAK,CAAC,OAAO,IAAC,MAAM,EAAE,8BAAO,IAAI,EAAC,QAAQ,IAAK,KAAK,EAAI,GAAI,EAC7D,KAAC,OAAO,CAAC,OAAO,IACf,MAAM,EACL,KAAC,MAAM,kBACN,EAAE,EAAE,GAAG,EAAE,UAAU,gBACR,cAAc,EACzB,IAAI,EAAC,SAAS,IACV,IAAI,cAER,KAAC,MAAM,CAAC,IAAI,IAAC,SAAS,EAAE,GAAG,CAAC,WAAW,YACrC,KAAK,CAAC,KAAK,IAAI,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACxB,IACN,GAET,EACF,KAAC,OAAO,CAAC,OAAO,cACf,KAAC,WAAW,IACX,aAAa,EAAE,CAAC,CAAC,EAAE,EAAE;gCACpB,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;gCAClB,OAAO,CAAC,KAAK,CAAC,CAAC;4BAChB,CAAC,EACD,OAAO,EACN,QAAQ;gCACP,CAAC,CAAC,SAAS;gCACX,CAAC,CAAC,GAAG,EAAE;oCACL,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;oCACnB,OAAO,CAAC,KAAK,CAAC,CAAC;gCACf,CAAC,EAEL,EAAE,EAAE,EAAE,GACL,GACe,IACT,EACT,KAAK,IAAI,KAAC,KAAK,CAAC,KAAK,cAAE,KAAK,GAAe,EAC3C,WAAW,IAAI,KAAC,KAAK,CAAC,WAAW,cAAE,WAAW,GAAqB,IAC7D,CACR,CAAC;AACH,CAAC"}
+{"version":3,"file":"EmojiField.js","sourceRoot":"","sources":["../../../src/components/forms/EmojiField.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAClC,OAAO,EAAa,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAAE,MAAM,EAAe,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,GAAG,MAAM,yBAAyB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAWnC,MAAM,UAAU,UAAU,CAAC,EAST;QATS,EAC1B,IAAI,EACJ,KAAK,EACL,SAAS,EACT,QAAQ,EACR,EAAE,EAAE,UAAU,EACd,WAAW,EACX,KAAK,OAEY,EADd,IAAI,cARmB,wEAS1B,CADO;IAEP,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,CAAC,GAAG,QAAQ,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;IAC7C,MAAM,EAAE,GAAG,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxC,OAAO,CACN,MAAC,KAAK,IAAC,UAAU,QAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,aAC3D,MAAC,OAAO,IAAC,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,aACzC,KAAC,KAAK,CAAC,OAAO,IAAC,MAAM,EAAE,8BAAO,IAAI,EAAC,QAAQ,IAAK,KAAK,EAAI,GAAI,EAC7D,KAAC,OAAO,CAAC,OAAO,IACf,MAAM,EACL,KAAC,MAAM,kBACN,EAAE,EAAE,GAAG,EAAE,UAAU,gBACR,cAAc,EACzB,IAAI,EAAC,SAAS,EACd,QAAQ,EAAC,OAAO,IACZ,IAAI,cAER,KAAC,MAAM,CAAC,IAAI,IAAC,SAAS,EAAE,GAAG,CAAC,WAAW,YACrC,KAAK,CAAC,KAAK,IAAI,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACxB,IACN,GAET,EACF,KAAC,OAAO,CAAC,OAAO,cACf,KAAC,WAAW,IACX,aAAa,EAAE,CAAC,CAAC,EAAE,EAAE;gCACpB,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;gCAClB,OAAO,CAAC,KAAK,CAAC,CAAC;4BAChB,CAAC,EACD,OAAO,EACN,QAAQ;gCACP,CAAC,CAAC,SAAS;gCACX,CAAC,CAAC,GAAG,EAAE;oCACL,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;oCACnB,OAAO,CAAC,KAAK,CAAC,CAAC;gCACf,CAAC,EAEL,EAAE,EAAE,EAAE,GACL,GACe,IACT,EACT,KAAK,IAAI,KAAC,KAAK,CAAC,KAAK,cAAE,KAAK,GAAe,EAC3C,WAAW,IAAI,KAAC,KAAK,CAAC,WAAW,cAAE,WAAW,GAAqB,EACpE,KAAC,KAAK,CAAC,KAAK,IAAC,SAAS,EAAE,IAAI,GAAI,IACzB,CACR,CAAC;AACH,CAAC"}

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

@@ -1,6 +1,8 @@
+import { UseRenderComponentProps } from '@base-ui/react';
 import { ComponentProps } from 'react';
-import { SlotDiv } from '../utility/SlotDiv.js';
-export interface FieldRootProps extends ComponentProps<'div'> {
+import { SlotDiv, SlotDivProps } from '../utility/SlotDiv.js';
+import { FormErrorProps } from './FormError.js';
+export interface FieldRootProps extends SlotDivProps {
     horizontal?: boolean;
     stretch?: boolean;
     reverse?: boolean;
@@ -11,11 +13,13 @@ export interface FieldRootProps extends ComponentProps<'div'> {
 }
 declare function FieldRoot({ className, horizontal, stretch, reverse, id, ...props }: FieldRootProps): import("react/jsx-runtime").JSX.Element;
 declare function FieldControl({ className, ref, ...props }: ComponentProps<typeof SlotDiv>): import("react/jsx-runtime").JSX.Element;
-declare function FieldLabel({ className, ...props }: ComponentProps<'label'>): import("react/jsx-runtime").JSX.Element;
-declare function FieldDescription({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function FieldLabel({ className, ref, render, ...props }: UseRenderComponentProps<'label'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare function FieldDescription({ className, render, ref, ...props }: UseRenderComponentProps<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare function FieldError({ className, ...props }: FormErrorProps): import("react/jsx-runtime").JSX.Element;
 export declare const Field: typeof FieldRoot & {
     Label: typeof FieldLabel;
     Description: typeof FieldDescription;
     Control: typeof FieldControl;
+    Error: typeof FieldError;
 };
 export {};

package/dist/components/forms/Field.js

@@ -10,11 +10,13 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useRender } from '@base-ui/react';
 import clsx from 'clsx';
 import { createContext, useContext, useEffect, useRef, useState, } from 'react';
 import useMergedRef from '../../hooks/useMergedRef.js';
 import { SlotDiv } from '../utility/SlotDiv.js';
 import cls from './Field.module.css';
+import { FormError } from './FormError.js';
 const FieldContext = createContext({
     events: new EventTarget(),
 });
@@ -45,15 +47,37 @@ function FieldControl(_a) {
             events.removeEventListener('description-visible', onDescriptionVisible);
         };
     }, [events, id]);
+    useEffect(() => {
+        if (!id)
+            return;
+        function onErrorVisible(event) {
+            var _a, _b;
+            if (event.detail === true) {
+                (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-errormessage', `${id}-error`);
+            }
+            else {
+                (_b = innerRef.current) === null || _b === void 0 ? void 0 : _b.removeAttribute('aria-errormessage');
+            }
+        }
+        events.addEventListener('error-visible', onErrorVisible);
+        return () => {
+            events.removeEventListener('error-visible', onErrorVisible);
+        };
+    }, [events, id]);
     return (_jsx(SlotDiv, Object.assign({ className: clsx(cls.control, className), id: id, ref: finalRef }, props)));
 }
 function FieldLabel(_a) {
-    var { className } = _a, props = __rest(_a, ["className"]);
+    var { className, ref, render } = _a, props = __rest(_a, ["className", "ref", "render"]);
     const { id } = useContext(FieldContext);
-    return (_jsx("label", Object.assign({ className: clsx(cls.label, className), htmlFor: id }, props)));
+    return useRender({
+        defaultTagName: 'label',
+        props: Object.assign({ htmlFor: id, className: clsx(cls.label, className) }, props),
+        ref,
+        render,
+    });
 }
 function FieldDescription(_a) {
-    var { className } = _a, props = __rest(_a, ["className"]);
+    var { className, render, ref } = _a, props = __rest(_a, ["className", "render", "ref"]);
     const { id, events } = useContext(FieldContext);
     useEffect(() => {
         events.dispatchEvent(new CustomEvent('description-visible', { detail: true }));
@@ -61,11 +85,28 @@ function FieldDescription(_a) {
             events.dispatchEvent(new CustomEvent('description-visible', { detail: false }));
         };
     }, [events]);
-    return (_jsx("div", Object.assign({ className: clsx('@mode-dense', cls.description, className), id: id ? `${id}-description` : undefined }, props)));
+    return useRender({
+        defaultTagName: 'div',
+        props: Object.assign({ className: clsx('@mode-dense', cls.description, className), id: id ? `${id}-description` : undefined }, props),
+        render,
+        ref,
+    });
+}
+function FieldError(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    const { id, events } = useContext(FieldContext);
+    useEffect(() => {
+        events.dispatchEvent(new CustomEvent('error-visible', { detail: true }));
+        return () => {
+            events.dispatchEvent(new CustomEvent('error-visible', { detail: false }));
+        };
+    }, [events]);
+    return (_jsx(FormError, Object.assign({ className: clsx(cls.error, className), id: id ? `${id}-error` : undefined, inputId: id }, props)));
 }
 export const Field = Object.assign(FieldRoot, {
     Label: FieldLabel,
     Description: FieldDescription,
     Control: FieldControl,
+    Error: FieldError,
 });
 //# sourceMappingURL=Field.js.map

package/dist/components/forms/Field.js.map

@@ -1 +1 @@
-{"version":3,"file":"Field.js","sourceRoot":"","sources":["../../../src/components/forms/Field.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Field.js","sourceRoot":"","sources":["../../../src/components/forms/Field.tsx"],"names":[],"mappings":"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"}

package/dist/components/forms/Field.module.css

@@ -1,15 +1,18 @@
 @layer components {.root {
 	display: grid;
-	grid-template-areas: 'label' 'control' 'description';
+	grid-template-areas: 'label' 'control' 'description' 'error';
 	justify-content: start;
+	border: none;
+	padding: 0;
+	margin: 0;
 
 	&[data-horizontal] {
 		flex-direction: row;
 		align-items: center;
-		grid-template-areas: 'control label' 'description description';
+		grid-template-areas: 'control label' 'description description' 'error error';
 		grid-template-columns: auto 1fr;
 		&[data-reverse] {
-			grid-template-areas: 'label control' 'description description';
+			grid-template-areas: 'label control' 'description description' 'error error';
 			grid-template-columns: auto 1fr;
 		}
 	}
@@ -58,4 +61,11 @@
 	margin-top: var(--m-sp-sm);
 	margin-left: calc(var(--m-global-shape-roundness) * var(--m-sp-md));
 }
+
+.error {
+	grid-area: error;
+	font-style: italic;
+	margin-top: var(--m-sp-sm);
+	margin-left: calc(var(--m-global-shape-roundness) * var(--m-sp-md));
+}
 }

package/dist/components/forms/FormError.d.ts

@@ -0,0 +1,17 @@
+import { TypographyProps } from '../typography/typography.js';
+export interface FormErrorProps extends TypographyProps {
+    /**
+     * Filter to a single field
+     */
+    fieldName?: string;
+    /**
+     * When to show an error, paired with fieldName.
+     */
+    condition?: 'touched' | 'always' | 'dirty';
+    /**
+     * Connect to an HTML input to also display native
+     * HTML validation errors.
+     */
+    inputId?: string;
+}
+export declare function FormError({ fieldName, condition, inputId, ...rest }: FormErrorProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/forms/FormError.js

@@ -0,0 +1,79 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useFormikContext } from 'formik';
+import { useEffect, useState } from 'react';
+import { Text } from '../typography/typography.js';
+export function FormError(_a) {
+    var { fieldName, condition = 'touched', inputId } = _a, rest = __rest(_a, ["fieldName", "condition", "inputId"]);
+    const { errors, touched, dirty } = useFormikContext();
+    const nativeError = useNativeError(inputId);
+    if (condition === 'dirty' && !dirty) {
+        return null;
+    }
+    if (fieldName) {
+        const error = nativeError || errors[fieldName];
+        if (error) {
+            if (condition === 'touched' && !touched[fieldName]) {
+                return null;
+            }
+            return (_jsx(Text, Object.assign({ emphasis: "ambient", color: "attention" }, rest, { children: _jsx(FormErrorFormatted, { error: error }) })));
+        }
+        return null;
+    }
+    const errorMessages = Object.values(errors)
+        .flat()
+        .filter((e) => !!e)
+        .concat(nativeError ? [nativeError] : []);
+    if (errorMessages.length === 0) {
+        return null;
+    }
+    return (_jsx(Text, Object.assign({ emphasis: "ambient", color: "attention" }, rest, { children: _jsx(FormErrorFormatted, { error: errorMessages }) })));
+}
+function FormErrorFormatted({ error, }) {
+    if (typeof error === 'string') {
+        return _jsx("span", { children: error });
+    }
+    else if (Array.isArray(error)) {
+        return (_jsx("span", { children: error.map((err, index) => (_jsx(FormErrorFormatted, { error: err }, index))) }));
+    }
+    else if (typeof error === 'object' && error !== null) {
+        return (_jsx("span", { children: Object.entries(error).map(([, err], index) => (_jsxs("span", { children: [_jsx(FormErrorFormatted, { error: err }), index < Object.entries(error).length - 1 ? ', ' : ''] }, index))) }));
+    }
+    return null;
+}
+function useNativeError(inputId) {
+    const [nativeError, setNativeError] = useState(null);
+    useEffect(() => {
+        if (!inputId)
+            return;
+        const input = document.getElementById(inputId);
+        if (!input) {
+            return;
+        }
+        function handleInput() {
+            var _a;
+            if (input === null || input === void 0 ? void 0 : input.validity.valid) {
+                setNativeError(null);
+            }
+            else {
+                setNativeError((_a = input === null || input === void 0 ? void 0 : input.validationMessage) !== null && _a !== void 0 ? _a : 'Validation error');
+            }
+        }
+        input.addEventListener('input', handleInput);
+        return () => {
+            input.removeEventListener('input', handleInput);
+        };
+    }, [inputId]);
+    return nativeError;
+}
+//# sourceMappingURL=FormError.js.map

package/dist/components/forms/FormError.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormError.js","sourceRoot":"","sources":["../../../src/components/forms/FormError.tsx"],"names":[],"mappings":"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"}

package/dist/components/forms/FormikForm.stories.js

@@ -43,7 +43,11 @@ export const Default = {
                 newsletter: false,
                 plan: 'basic',
                 emoji: '',
-            } }, args, { children: [_jsx(TextField, { name: "email", type: "email", label: "Email", placeholder: "you@example.com" }), _jsx(TextField, { name: "password", type: "password", label: "Password", description: "Make it a good one" }), _jsx(NumberStepperField, { name: "age", label: "Age", min: 13, max: 100, description: "You can mail your government ID to us, don't worry, we're the good guys" }), _jsx(CheckboxField, { name: "tos", label: "I agree", description: "To what? Not telling." }), _jsx(SwitchField, { name: "newsletter", label: "Subscribe to newsletter", description: "Don't worry, we don't bother you much" }), _jsxs(ToggleGroupField, { type: "single", name: "plan", label: "Select your plan", required: true, description: "Please do the expensive one!!!", children: [_jsx(ToggleGroupField.Item, { value: "basic", children: "Basic" }), _jsx(ToggleGroupField.Item, { value: "pro", children: "Pro" }), _jsx(ToggleGroupField.Item, { value: "enterprise", className: "@mode-accent", children: "Enterprise" })] }), _jsx(EmojiField, { name: "emoji", label: "Favorite Emoji" }), _jsx(SubmitButton, { children: "Sign up" })] })));
+            }, validate: (values) => {
+                if (!values.email.endsWith('.com')) {
+                    return { email: 'Email must end with .com' };
+                }
+            } }, args, { children: [_jsx(TextField, { name: "email", type: "email", label: "Email", placeholder: "you@example.com" }), _jsx(TextField, { name: "password", type: "password", label: "Password", minLength: 8, description: "Make it a good one" }), _jsx(NumberStepperField, { name: "age", label: "Age", min: 13, max: 100, description: "You can mail your government ID to us, don't worry, we're the good guys" }), _jsx(CheckboxField, { name: "tos", label: "I agree", description: "To what? Not telling." }), _jsx(SwitchField, { name: "newsletter", label: "Subscribe to newsletter", description: "Don't worry, we don't bother you much" }), _jsxs(ToggleGroupField, { type: "single", name: "plan", label: "Select your plan", required: true, description: "Please do the expensive one!!!", children: [_jsx(ToggleGroupField.Item, { value: "basic", children: "Basic" }), _jsx(ToggleGroupField.Item, { value: "pro", children: "Pro" }), _jsx(ToggleGroupField.Item, { value: "enterprise", className: "@mode-accent", children: "Enterprise" })] }), _jsx(EmojiField, { name: "emoji", label: "Favorite Emoji" }), _jsx(SubmitButton, { children: "Sign up" })] })));
     },
 };
 //# sourceMappingURL=FormikForm.stories.js.map

package/dist/components/forms/FormikForm.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormikForm.stories.js","sourceRoot":"","sources":["../../../src/components/forms/FormikForm.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;AACA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEzD,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,UAAU;IACrB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CACiC,CAAC;AAEpC,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,IAAI,EAAE;QACL,QAAQ,EAAE,CAAC,MAAM,EAAE,EAAE;YACpB,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC;QACxC,CAAC;KACD;IACD,MAAM,CAAC,EAA6B;YAA7B,EAAE,aAAa,EAAE,CAAC,OAAW,EAAN,IAAI,cAA3B,iBAA6B,CAAF;QACjC,OAAO,CACN,MAAC,UAAU,kBACV,aAAa,EAAE;gBACd,KAAK,EAAE,EAAE;gBACT,QAAQ,EAAE,EAAE;gBACZ,GAAG,EAAE,EAAE;gBACP,GAAG,EAAE,KAAK;gBACV,UAAU,EAAE,KAAK;gBACjB,IAAI,EAAE,OAAO;gBACb,KAAK,EAAE,EAAE;aACT,IACG,IAAI,eAER,KAAC,SAAS,IACT,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,OAAO,EACb,WAAW,EAAC,iBAAiB,GAC5B,EACF,KAAC,SAAS,IACT,IAAI,EAAC,UAAU,EACf,IAAI,EAAC,UAAU,EACf,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,oBAAoB,GAC/B,EACF,KAAC,kBAAkB,IAClB,IAAI,EAAC,KAAK,EACV,KAAK,EAAC,KAAK,EACX,GAAG,EAAE,EAAE,EACP,GAAG,EAAE,GAAG,EACR,WAAW,EAAC,yEAAyE,GACpF,EACF,KAAC,aAAa,IACb,IAAI,EAAC,KAAK,EACV,KAAK,EAAC,SAAS,EACf,WAAW,EAAC,uBAAuB,GAClC,EACF,KAAC,WAAW,IACX,IAAI,EAAC,YAAY,EACjB,KAAK,EAAC,yBAAyB,EAC/B,WAAW,EAAC,uCAAuC,GAClD,EACF,MAAC,gBAAgB,IAChB,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,kBAAkB,EACxB,QAAQ,QACR,WAAW,EAAC,gCAAgC,aAE5C,KAAC,gBAAgB,CAAC,IAAI,IAAC,KAAK,EAAC,OAAO,sBAA8B,EAClE,KAAC,gBAAgB,CAAC,IAAI,IAAC,KAAK,EAAC,KAAK,oBAA4B,EAC9D,KAAC,gBAAgB,CAAC,IAAI,IAAC,KAAK,EAAC,YAAY,EAAC,SAAS,EAAC,cAAc,2BAE1C,IACN,EACnB,KAAC,UAAU,IAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,gBAAgB,GAAG,EAClD,KAAC,YAAY,0BAAuB,KACxB,CACb,CAAC;IACH,CAAC;CACD,CAAC"}
+{"version":3,"file":"FormikForm.stories.js","sourceRoot":"","sources":["../../../src/components/forms/FormikForm.stories.tsx"],"names":[],"mappings":"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"}

package/dist/components/forms/NumberStepperField.js

@@ -21,6 +21,6 @@ export function NumberStepperField(_a) {
     return (_jsxs(Field, { className: className, style: style, id: id, children: [label && _jsx(Field.Label, { children: label }), _jsx(Field.Control, { render: (composed) => (_jsxs(_Fragment, { children: [_jsx("input", Object.assign({ type: "hidden" }, props, composed)), _jsx(NumberStepper, Object.assign({ value: field.value, onChange: (v) => {
                                 tools.setValue(v);
                                 onChange === null || onChange === void 0 ? void 0 : onChange(v);
-                            } }, rest))] })) }), description && _jsx(Field.Description, { children: description })] }));
+                            } }, rest))] })) }), description && _jsx(Field.Description, { children: description }), _jsx(Field.Error, { fieldName: name })] }));
 }
 //# sourceMappingURL=NumberStepperField.js.map

package/dist/components/forms/NumberStepperField.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberStepperField.js","sourceRoot":"","sources":["../../../src/components/forms/NumberStepperField.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAElC,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EACN,aAAa,GAEb,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAgBnC,MAAM,UAAU,kBAAkB,CAAC,EAST;QATS,EAClC,IAAI,EACJ,KAAK,EACL,SAAS,EACT,KAAK,EACL,EAAE,EAAE,UAAU,EACd,QAAQ,EACR,WAAW,OAEc,EADtB,IAAI,cAR2B,wEASlC,CADO;IAEP,MAAM,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,GAAG,QAAQ,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;IACjD,MAAM,EAAE,GAAG,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,OAAO,CACN,MAAC,KAAK,IAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,aAC/C,KAAK,IAAI,KAAC,KAAK,CAAC,KAAK,cAAE,KAAK,GAAe,EAC5C,KAAC,KAAK,CAAC,OAAO,IACb,MAAM,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC,CACrB,8BACC,8BAAO,IAAI,EAAC,QAAQ,IAAK,KAAK,EAAM,QAAQ,EAAI,EAChD,KAAC,aAAa,kBACb,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;gCACf,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;gCAClB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,CAAC,CAAC,CAAC;4BACf,CAAC,IACG,IAAI,EACP,IACA,CACH,GACA,EACD,WAAW,IAAI,KAAC,KAAK,CAAC,WAAW,cAAE,WAAW,GAAqB,IAC7D,CACR,CAAC;AACH,CAAC"}
+{"version":3,"file":"NumberStepperField.js","sourceRoot":"","sources":["../../../src/components/forms/NumberStepperField.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAElC,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EACN,aAAa,GAEb,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAgBnC,MAAM,UAAU,kBAAkB,CAAC,EAST;QATS,EAClC,IAAI,EACJ,KAAK,EACL,SAAS,EACT,KAAK,EACL,EAAE,EAAE,UAAU,EACd,QAAQ,EACR,WAAW,OAEc,EADtB,IAAI,cAR2B,wEASlC,CADO;IAEP,MAAM,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,GAAG,QAAQ,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;IACjD,MAAM,EAAE,GAAG,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,OAAO,CACN,MAAC,KAAK,IAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,aAC/C,KAAK,IAAI,KAAC,KAAK,CAAC,KAAK,cAAE,KAAK,GAAe,EAC5C,KAAC,KAAK,CAAC,OAAO,IACb,MAAM,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC,CACrB,8BACC,8BAAO,IAAI,EAAC,QAAQ,IAAK,KAAK,EAAM,QAAQ,EAAI,EAChD,KAAC,aAAa,kBACb,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;gCACf,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;gCAClB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,CAAC,CAAC,CAAC;4BACf,CAAC,IACG,IAAI,EACP,IACA,CACH,GACA,EACD,WAAW,IAAI,KAAC,KAAK,CAAC,WAAW,cAAE,WAAW,GAAqB,EACpE,KAAC,KAAK,CAAC,KAAK,IAAC,SAAS,EAAE,IAAI,GAAI,IACzB,CACR,CAAC;AACH,CAAC"}

package/dist/components/forms/SwitchField.js

@@ -20,6 +20,6 @@ export function SwitchField(_a) {
     const id = useIdOrGenerated(providedId);
     return (_jsxs(Field, { horizontal: true, className: className, id: id, children: [_jsx(Field.Control, { render: _jsx(Switch, Object.assign({}, props, { checked: props.checked, onCheckedChange: (v) => {
                         tools.setValue(!!v);
-                    } }, rest)) }), label && _jsx(Field.Label, { children: label }), description && _jsx(Field.Description, { children: description })] }));
+                    } }, rest)) }), label && _jsx(Field.Label, { children: label }), description && _jsx(Field.Description, { children: description }), _jsx(Field.Error, { fieldName: name })] }));
 }
 //# sourceMappingURL=SwitchField.js.map

package/dist/components/forms/SwitchField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SwitchField.js","sourceRoot":"","sources":["../../../src/components/forms/SwitchField.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAElC,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAWnC,MAAM,UAAU,WAAW,CAAC,EAQT;QARS,EAC3B,IAAI,EACJ,KAAK,EACL,SAAS,EACT,QAAQ,EACR,EAAE,EAAE,UAAU,EACd,WAAW,OAEO,EADf,IAAI,cAPoB,+DAQ3B,CADO;IAEP,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,CAAC,GAAG,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC;IACzE,MAAM,EAAE,GAAG,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,OAAO,CACN,MAAC,KAAK,IAAC,UAAU,QAAC,SAAS,EAAE,SAAS,EAAE,EAAE,EAAE,EAAE,aAC7C,KAAC,KAAK,CAAC,OAAO,IACb,MAAM,EACL,KAAC,MAAM,oBACF,KAAK,IACT,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,eAAe,EAAE,CAAC,CAAC,EAAE,EAAE;wBACtB,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;oBACrB,CAAC,IACG,IAAI,EACP,GAEF,EACD,KAAK,IAAI,KAAC,KAAK,CAAC,KAAK,cAAE,KAAK,GAAe,EAC3C,WAAW,IAAI,KAAC,KAAK,CAAC,WAAW,cAAE,WAAW,GAAqB,IAC7D,CACR,CAAC;AACH,CAAC"}
+{"version":3,"file":"SwitchField.js","sourceRoot":"","sources":["../../../src/components/forms/SwitchField.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAElC,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAWnC,MAAM,UAAU,WAAW,CAAC,EAQT;QARS,EAC3B,IAAI,EACJ,KAAK,EACL,SAAS,EACT,QAAQ,EACR,EAAE,EAAE,UAAU,EACd,WAAW,OAEO,EADf,IAAI,cAPoB,+DAQ3B,CADO;IAEP,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,CAAC,GAAG,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC;IACzE,MAAM,EAAE,GAAG,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,OAAO,CACN,MAAC,KAAK,IAAC,UAAU,QAAC,SAAS,EAAE,SAAS,EAAE,EAAE,EAAE,EAAE,aAC7C,KAAC,KAAK,CAAC,OAAO,IACb,MAAM,EACL,KAAC,MAAM,oBACF,KAAK,IACT,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,eAAe,EAAE,CAAC,CAAC,EAAE,EAAE;wBACtB,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;oBACrB,CAAC,IACG,IAAI,EACP,GAEF,EACD,KAAK,IAAI,KAAC,KAAK,CAAC,KAAK,cAAE,KAAK,GAAe,EAC3C,WAAW,IAAI,KAAC,KAAK,CAAC,WAAW,cAAE,WAAW,GAAqB,EACpE,KAAC,KAAK,CAAC,KAAK,IAAC,SAAS,EAAE,IAAI,GAAI,IACzB,CACR,CAAC;AACH,CAAC"}

package/dist/components/forms/TextField.js

@@ -22,7 +22,7 @@ import cls from './TextField.module.css';
 const emptyRef = (() => { });
 export const TextField = function TextField(_a) {
     var { ref, name, label, className, style, autoFocusDelay, autoFocus, inputRef, onChange, onFocus, onBlur, id: providedId, inputClassName, description } = _a, rest = __rest(_a, ["ref", "name", "label", "className", "style", "autoFocusDelay", "autoFocus", "inputRef", "onChange", "onFocus", "onBlur", "id", "inputClassName", "description"]);
-    const [props] = useField({
+    const [props, meta] = useField({
         name,
         onChange,
         onFocus,
@@ -38,11 +38,12 @@ export const TextField = function TextField(_a) {
             }, autoFocusDelay);
         }
     }, [autoFocusDelay]);
-    return (_jsxs(Field, { className: className, style: style, stretch: true, ref: ref, id: id, children: [label && _jsx(Field.Label, { children: label }), _jsx(Field.Control, { render: _jsx(Input, Object.assign({}, props, rest, { autoFocus: autoFocus, className: clsx(cls.input, inputClassName), ref: useMergedRef(innerInputRef, inputRef || emptyRef) })) }), description && _jsx(Field.Description, { children: description })] }));
+    const showError = meta.touched && !!meta.error && meta.error.length > 0;
+    return (_jsxs(Field, { className: clsx(showError && '@mode-attention', className), style: style, stretch: true, ref: ref, id: id, children: [label && _jsx(Field.Label, { children: label }), _jsx(Field.Control, { render: _jsx(Input, Object.assign({}, props, rest, { autoFocus: autoFocus, className: clsx(cls.input, inputClassName), ref: useMergedRef(innerInputRef, inputRef || emptyRef), "aria-invalid": showError })) }), description && _jsx(Field.Description, { children: description }), _jsx(Field.Error, { fieldName: name })] }));
 };
 export function TextAreaField(_a) {
     var { name, label, className, style, inputRef, onKeyDown, submitOnEnter, id: providedId, textAreaClassName, description, ref } = _a, rest = __rest(_a, ["name", "label", "className", "style", "inputRef", "onKeyDown", "submitOnEnter", "id", "textAreaClassName", "description", "ref"]);
-    const [props] = useField(name);
+    const [props, meta] = useField(name);
     const { submitForm } = useFormikContext();
     const onKeyDownInner = useCallback((e) => {
         if (submitOnEnter && e.key === 'Enter' && !e.shiftKey) {
@@ -52,6 +53,6 @@ export function TextAreaField(_a) {
         onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
     }, [submitOnEnter, onKeyDown, submitForm]);
     const id = useIdOrGenerated(providedId);
-    return (_jsxs(Field, { stretch: true, className: className, style: style, ref: ref, id: id, children: [label && _jsx(Field.Label, { children: label }), _jsx(Field.Control, { render: _jsx(TextArea, Object.assign({ ref: inputRef }, props, rest, { className: clsx(cls.input, textAreaClassName), onKeyDown: onKeyDownInner })) }), description && _jsx(Field.Description, { children: description })] }));
+    return (_jsxs(Field, { stretch: true, className: clsx(meta.error && '@mode-attention', className), style: style, ref: ref, id: id, children: [label && _jsx(Field.Label, { children: label }), _jsx(Field.Control, { render: _jsx(TextArea, Object.assign({ ref: inputRef }, props, rest, { className: clsx(cls.input, textAreaClassName), onKeyDown: onKeyDownInner })) }), description && _jsx(Field.Description, { children: description }), _jsx(Field.Error, { fieldName: name })] }));
 }
 //# sourceMappingURL=TextField.js.map

package/dist/components/forms/TextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","sourceRoot":"","sources":["../../../src/components/forms/TextField.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"TextField.js","sourceRoot":"","sources":["../../../src/components/forms/TextField.tsx"],"names":[],"mappings":"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"}

package/dist/components/forms/ToggleGroupField.js

@@ -18,14 +18,14 @@ function ToggleGroupFieldDefault(_a) {
     var { name, label, required, className, style, type = 'single', multiple, description, id: providedId } = _a, props = __rest(_a, ["name", "label", "required", "className", "style", "type", "multiple", "description", "id"]);
     const id = useIdOrGenerated(providedId);
     const [fieldProps, _, tools] = useField(Object.assign({ name, required }, props));
-    return (_jsxs(Field, { id: id, className: className, style: style, children: [label && _jsx(Field.Label, { children: label }), _jsx(Field.Control, { render: _jsx(ToggleGroup, Object.assign({}, fieldProps, { onValueChange: (v) => {
+    return (_jsxs(Field, { id: id, className: className, style: style, render: _jsx("fieldset", {}), children: [label && _jsx(Field.Label, { render: _jsx("legend", {}), children: label }), _jsx(Field.Control, { render: _jsx(ToggleGroup, Object.assign({}, fieldProps, { onValueChange: (v) => {
                         if (multiple || type === 'multiple') {
                             tools.setValue(v);
                         }
                         else {
                             tools.setValue(v[0]);
                         }
-                    }, multiple: multiple || type === 'multiple' }, props)) }), description && _jsx(Field.Description, { children: description })] }));
+                    }, multiple: multiple || type === 'multiple' }, props)) }), description && _jsx(Field.Description, { children: description }), _jsx(Field.Error, { fieldName: name })] }));
 }
 export const ToggleGroupField = Object.assign(ToggleGroupFieldDefault, {
     Item: ToggleGroup.Item,

package/dist/components/forms/ToggleGroupField.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroupField.js","sourceRoot":"","sources":["../../../src/components/forms/ToggleGroupField.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAElC,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAAE,WAAW,EAAoB,MAAM,+BAA+B,CAAC;AAC9E,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAgBnC,SAAS,uBAAuB,CAAC,EAWD;QAXC,EAChC,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,SAAS,EACT,KAAK,EACL,IAAI,GAAG,QAAQ,EACf,QAAQ,EACR,WAAW,EACX,EAAE,EAAE,UAAU,OAEiB,EAD5B,KAAK,cAVwB,4FAWhC,CADQ;IAER,MAAM,EAAE,GAAG,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,MAAM,CAAC,UAAU,EAAE,CAAC,EAAE,KAAK,CAAC,GAAG,QAAQ,iBAAG,IAAI,EAAE,QAAQ,IAAK,KAAK,EAAG,CAAC;IAEtE,OAAO,CACN,MAAC,KAAK,IAAC,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,aAC/C,KAAK,IAAI,KAAC,KAAK,CAAC,KAAK,cAAE,KAAK,GAAe,EAC5C,KAAC,KAAK,CAAC,OAAO,IACb,MAAM,EACL,KAAC,WAAW,oBACP,UAAU,IACd,aAAa,EAAE,CAAC,CAAC,EAAE,EAAE;wBACpB,IAAI,QAAQ,IAAI,IAAI,KAAK,UAAU,EAAE,CAAC;4BACrC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;wBACnB,CAAC;6BAAM,CAAC;4BACP,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;wBACtB,CAAC;oBACF,CAAC,EACD,QAAQ,EAAE,QAAQ,IAAI,IAAI,KAAK,UAAU,IACrC,KAAK,EACR,GAEF,EACD,WAAW,IAAI,KAAC,KAAK,CAAC,WAAW,cAAE,WAAW,GAAqB,IAC7D,CACR,CAAC;AACH,CAAC;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,uBAAuB,EAAE;IACtE,IAAI,EAAE,WAAW,CAAC,IAAI;CACtB,CAAC,CAAC"}
+{"version":3,"file":"ToggleGroupField.js","sourceRoot":"","sources":["../../../src/components/forms/ToggleGroupField.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAElC,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAAE,WAAW,EAAoB,MAAM,+BAA+B,CAAC;AAC9E,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAgBnC,SAAS,uBAAuB,CAAC,EAWD;QAXC,EAChC,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,SAAS,EACT,KAAK,EACL,IAAI,GAAG,QAAQ,EACf,QAAQ,EACR,WAAW,EACX,EAAE,EAAE,UAAU,OAEiB,EAD5B,KAAK,cAVwB,4FAWhC,CADQ;IAER,MAAM,EAAE,GAAG,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,MAAM,CAAC,UAAU,EAAE,CAAC,EAAE,KAAK,CAAC,GAAG,QAAQ,iBAAG,IAAI,EAAE,QAAQ,IAAK,KAAK,EAAG,CAAC;IAEtE,OAAO,CACN,MAAC,KAAK,IAAC,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,oBAAY,aACrE,KAAK,IAAI,KAAC,KAAK,CAAC,KAAK,IAAC,MAAM,EAAE,kBAAU,YAAG,KAAK,GAAe,EAChE,KAAC,KAAK,CAAC,OAAO,IACb,MAAM,EACL,KAAC,WAAW,oBACP,UAAU,IACd,aAAa,EAAE,CAAC,CAAC,EAAE,EAAE;wBACpB,IAAI,QAAQ,IAAI,IAAI,KAAK,UAAU,EAAE,CAAC;4BACrC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;wBACnB,CAAC;6BAAM,CAAC;4BACP,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;wBACtB,CAAC;oBACF,CAAC,EACD,QAAQ,EAAE,QAAQ,IAAI,IAAI,KAAK,UAAU,IACrC,KAAK,EACR,GAEF,EACD,WAAW,IAAI,KAAC,KAAK,CAAC,WAAW,cAAE,WAAW,GAAqB,EACpE,KAAC,KAAK,CAAC,KAAK,IAAC,SAAS,EAAE,IAAI,GAAI,IACzB,CACR,CAAC;AACH,CAAC;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,uBAAuB,EAAE;IACtE,IAAI,EAAE,WAAW,CAAC,IAAI;CACtB,CAAC,CAAC"}

package/dist/components/forms/index.d.ts

@@ -6,3 +6,4 @@ export * from './hooks.js';
 export * from './NumberStepperField.js';
 export * from './SubmitButton.js';
 export * from './TextField.js';
+export * from './ToggleGroupField.js';

package/dist/components/forms/index.js

@@ -6,4 +6,5 @@ export * from './hooks.js';
 export * from './NumberStepperField.js';
 export * from './SubmitButton.js';
 export * from './TextField.js';
+export * from './ToggleGroupField.js';
 //# sourceMappingURL=index.js.map

package/dist/components/forms/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/forms/index.tsx"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/forms/index.tsx"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC"}

package/dist/components/input/Input.module.css

@@ -57,6 +57,16 @@
 	line-height: var(--m-prose-secondary-lineHeight);
 	font-weight: var(--m-prose-secondary-weight);
 
+	&:has(input:invalid:not(:focus)),
+	&:has(textarea:invalid:not(:focus)),
+	&:has([contenteditable]:invalid:not(:focus)),
+	&:has(input[aria-invalid='true']:not(:focus)),
+	&:has(textarea[aria-invalid='true']:not(:focus)),
+	&:has([contenteditable][aria-invalid='true']:not(:focus)) {
+		@apply --mx-borderColor(var(--m-color-attention-heavy));
+		@apply --mx-bg(var(--m-color-attention-wash));
+	}
+
 	&:has(input:disabled),
 	&:has(textarea:disabled),
 	&:has([contenteditable]:disabled) {

package/dist/hooks/useTitleBarColor.js

@@ -27,7 +27,6 @@ function changeThemeColor(color) {
         document.head.appendChild(metaThemeColor);
     }
     metaThemeColor === null || metaThemeColor === void 0 ? void 0 : metaThemeColor.setAttribute('content', color);
-    console.log('set title bar color', color);
 }
 export function useTitleBarColor(color) {
     const colorMode = useResolvedColorMode();

package/dist/hooks/useTitleBarColor.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTitleBarColor.js","sourceRoot":"","sources":["../../src/hooks/useTitleBarColor.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"useTitleBarColor.js","sourceRoot":"","sources":["../../src/hooks/useTitleBarColor.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-type/ui",
-  "version": "6.1.41",
+  "version": "6.1.43",
   "type": "module",
   "repository": {
     "url": "https://github.com/a-type/ui"

package/src/components/forms/CheckboxField.tsx

@@ -42,6 +42,7 @@ export function CheckboxField({
 			/>
 			{label && <Field.Label>{label}</Field.Label>}
 			{description && <Field.Description>{description}</Field.Description>}
+			<Field.Error fieldName={name} />
 		</Field>
 	);
 }

package/src/components/forms/EmojiField.tsx

@@ -40,6 +40,7 @@ export function EmojiField({
 							id={`${id}-trigger`}
 							aria-label="Select emoji"
 							size="wrapper"
+							emphasis="ghost"
 							{...rest}
 						>
 							<Button.Icon className={cls.triggerIcon}>
@@ -68,6 +69,7 @@ export function EmojiField({
 			</Popover>
 			{label && <Field.Label>{label}</Field.Label>}
 			{description && <Field.Description>{description}</Field.Description>}
+			<Field.Error fieldName={name} />
 		</Field>
 	);
 }

package/src/components/forms/Field.module.css

@@ -1,15 +1,18 @@
 .root {
 	display: grid;
-	grid-template-areas: 'label' 'control' 'description';
+	grid-template-areas: 'label' 'control' 'description' 'error';
 	justify-content: start;
+	border: none;
+	padding: 0;
+	margin: 0;
 
 	&[data-horizontal] {
 		flex-direction: row;
 		align-items: center;
-		grid-template-areas: 'control label' 'description description';
+		grid-template-areas: 'control label' 'description description' 'error error';
 		grid-template-columns: auto 1fr;
 		&[data-reverse] {
-			grid-template-areas: 'label control' 'description description';
+			grid-template-areas: 'label control' 'description description' 'error error';
 			grid-template-columns: auto 1fr;
 		}
 	}
@@ -58,3 +61,10 @@
 	margin-top: var(--m-sp-sm);
 	margin-left: calc(var(--m-global-shape-roundness) * var(--m-sp-md));
 }
+
+.error {
+	grid-area: error;
+	font-style: italic;
+	margin-top: var(--m-sp-sm);
+	margin-left: calc(var(--m-global-shape-roundness) * var(--m-sp-md));
+}

package/src/components/forms/Field.tsx

@@ -1,3 +1,4 @@
+import { useRender, UseRenderComponentProps } from '@base-ui/react';
 import clsx from 'clsx';
 import {
 	ComponentProps,
@@ -8,10 +9,11 @@ import {
 	useState,
 } from 'react';
 import useMergedRef from '../../hooks/useMergedRef.js';
-import { SlotDiv } from '../utility/SlotDiv.js';
+import { SlotDiv, SlotDivProps } from '../utility/SlotDiv.js';
 import cls from './Field.module.css';
+import { FormError, FormErrorProps } from './FormError.js';
 
-export interface FieldRootProps extends ComponentProps<'div'> {
+export interface FieldRootProps extends SlotDivProps {
 	horizontal?: boolean;
 	stretch?: boolean;
 	reverse?: boolean;
@@ -79,6 +81,26 @@ function FieldControl({
 		};
 	}, [events, id]);
 
+	useEffect(() => {
+		if (!id) return;
+
+		function onErrorVisible(event: CustomEvent) {
+			if (event.detail === true) {
+				innerRef.current?.setAttribute('aria-errormessage', `${id}-error`);
+			} else {
+				innerRef.current?.removeAttribute('aria-errormessage');
+			}
+		}
+
+		events.addEventListener('error-visible', onErrorVisible as EventListener);
+		return () => {
+			events.removeEventListener(
+				'error-visible',
+				onErrorVisible as EventListener,
+			);
+		};
+	}, [events, id]);
+
 	return (
 		<SlotDiv
 			className={clsx(cls.control, className)}
@@ -89,14 +111,31 @@ function FieldControl({
 	);
 }
 
-function FieldLabel({ className, ...props }: ComponentProps<'label'>) {
+function FieldLabel({
+	className,
+	ref,
+	render,
+	...props
+}: UseRenderComponentProps<'label'>) {
 	const { id } = useContext(FieldContext);
-	return (
-		<label className={clsx(cls.label, className)} htmlFor={id} {...props} />
-	);
+	return useRender({
+		defaultTagName: 'label',
+		props: {
+			htmlFor: id,
+			className: clsx(cls.label, className),
+			...props,
+		},
+		ref,
+		render,
+	});
 }
 
-function FieldDescription({ className, ...props }: ComponentProps<'div'>) {
+function FieldDescription({
+	className,
+	render,
+	ref,
+	...props
+}: UseRenderComponentProps<'div'>) {
 	const { id, events } = useContext(FieldContext);
 
 	useEffect(() => {
@@ -109,10 +148,34 @@ function FieldDescription({ className, ...props }: ComponentProps<'div'>) {
 			);
 		};
 	}, [events]);
+
+	return useRender({
+		defaultTagName: 'div',
+		props: {
+			className: clsx('@mode-dense', cls.description, className),
+			id: id ? `${id}-description` : undefined,
+			...props,
+		},
+		render,
+		ref,
+	});
+}
+
+function FieldError({ className, ...props }: FormErrorProps) {
+	const { id, events } = useContext(FieldContext);
+
+	useEffect(() => {
+		events.dispatchEvent(new CustomEvent('error-visible', { detail: true }));
+		return () => {
+			events.dispatchEvent(new CustomEvent('error-visible', { detail: false }));
+		};
+	}, [events]);
+
 	return (
-		<div
-			className={clsx('@mode-dense', cls.description, className)}
-			id={id ? `${id}-description` : undefined}
+		<FormError
+			className={clsx(cls.error, className)}
+			id={id ? `${id}-error` : undefined}
+			inputId={id}
 			{...props}
 		/>
 	);
@@ -122,4 +185,5 @@ export const Field = Object.assign(FieldRoot, {
 	Label: FieldLabel,
 	Description: FieldDescription,
 	Control: FieldControl,
+	Error: FieldError,
 });

package/src/components/forms/FormError.tsx

@@ -0,0 +1,127 @@
+import { FormikErrors, useFormikContext } from 'formik';
+import { useEffect, useState } from 'react';
+import { Text, TypographyProps } from '../typography/typography.js';
+
+export interface FormErrorProps extends TypographyProps {
+	/**
+	 * Filter to a single field
+	 */
+	fieldName?: string;
+	/**
+	 * When to show an error, paired with fieldName.
+	 */
+	condition?: 'touched' | 'always' | 'dirty';
+	/**
+	 * Connect to an HTML input to also display native
+	 * HTML validation errors.
+	 */
+	inputId?: string;
+}
+
+export function FormError({
+	fieldName,
+	condition = 'touched',
+	inputId,
+	...rest
+}: FormErrorProps) {
+	const { errors, touched, dirty } = useFormikContext<any>();
+	const nativeError = useNativeError(inputId);
+
+	if (condition === 'dirty' && !dirty) {
+		return null;
+	}
+
+	if (fieldName) {
+		const error = nativeError || errors[fieldName];
+		if (error) {
+			if (condition === 'touched' && !touched[fieldName]) {
+				return null;
+			}
+			return (
+				<Text emphasis="ambient" color="attention" {...rest}>
+					<FormErrorFormatted error={error} />
+				</Text>
+			);
+		}
+		return null;
+	}
+
+	const errorMessages = Object.values(errors)
+		.flat()
+		.filter((e): e is string | FormikErrors<any> => !!e)
+		.concat(nativeError ? [nativeError] : []);
+
+	if (errorMessages.length === 0) {
+		return null;
+	}
+
+	return (
+		<Text emphasis="ambient" color="attention" {...rest}>
+			<FormErrorFormatted error={errorMessages} />
+		</Text>
+	);
+}
+
+function FormErrorFormatted({
+	error,
+}: {
+	error?:
+		| string
+		| FormikErrors<any>
+		| string[]
+		| FormikErrors<any>[]
+		| (string | FormikErrors<any>)[];
+}) {
+	if (typeof error === 'string') {
+		return <span>{error}</span>;
+	} else if (Array.isArray(error)) {
+		return (
+			<span>
+				{error.map((err, index) => (
+					<FormErrorFormatted key={index} error={err} />
+				))}
+			</span>
+		);
+	} else if (typeof error === 'object' && error !== null) {
+		return (
+			<span>
+				{Object.entries(error).map(([, err], index) => (
+					<span key={index}>
+						<FormErrorFormatted error={err} />
+						{index < Object.entries(error).length - 1 ? ', ' : ''}
+					</span>
+				))}
+			</span>
+		);
+	}
+	return null;
+}
+
+function useNativeError(inputId?: string) {
+	const [nativeError, setNativeError] = useState<string | null>(null);
+
+	useEffect(() => {
+		if (!inputId) return;
+
+		const input = document.getElementById(inputId) as HTMLInputElement | null;
+		if (!input) {
+			return;
+		}
+
+		function handleInput() {
+			if (input?.validity.valid) {
+				setNativeError(null);
+			} else {
+				setNativeError(input?.validationMessage ?? 'Validation error');
+			}
+		}
+
+		input.addEventListener('input', handleInput);
+
+		return () => {
+			input.removeEventListener('input', handleInput);
+		};
+	}, [inputId]);
+
+	return nativeError;
+}

package/src/components/forms/FormikForm.stories.tsx

@@ -39,6 +39,11 @@ export const Default: Story = {
 					plan: 'basic',
 					emoji: '',
 				}}
+				validate={(values) => {
+					if (!values.email.endsWith('.com')) {
+						return { email: 'Email must end with .com' };
+					}
+				}}
 				{...args}
 			>
 				<TextField
@@ -51,6 +56,7 @@ export const Default: Story = {
 					name="password"
 					type="password"
 					label="Password"
+					minLength={8}
 					description="Make it a good one"
 				/>
 				<NumberStepperField

package/src/components/forms/NumberStepperField.tsx

@@ -52,6 +52,7 @@ export function NumberStepperField({
 				)}
 			/>
 			{description && <Field.Description>{description}</Field.Description>}
+			<Field.Error fieldName={name} />
 		</Field>
 	);
 }

package/src/components/forms/SwitchField.tsx

@@ -40,6 +40,7 @@ export function SwitchField({
 			/>
 			{label && <Field.Label>{label}</Field.Label>}
 			{description && <Field.Description>{description}</Field.Description>}
+			<Field.Error fieldName={name} />
 		</Field>
 	);
 }

package/src/components/forms/TextField.tsx

@@ -46,7 +46,7 @@ export const TextField = function TextField({
 	description,
 	...rest
 }: TextFieldProps) {
-	const [props] = useField({
+	const [props, meta] = useField({
 		name,
 		onChange,
 		onFocus,
@@ -63,8 +63,16 @@ export const TextField = function TextField({
 		}
 	}, [autoFocusDelay]);
 
+	const showError = meta.touched && !!meta.error && meta.error.length > 0;
+
 	return (
-		<Field className={className} style={style} stretch ref={ref} id={id}>
+		<Field
+			className={clsx(showError && '@mode-attention', className)}
+			style={style}
+			stretch
+			ref={ref}
+			id={id}
+		>
 			{label && <Field.Label>{label}</Field.Label>}
 			<Field.Control
 				render={
@@ -74,10 +82,12 @@ export const TextField = function TextField({
 						autoFocus={autoFocus}
 						className={clsx(cls.input, inputClassName)}
 						ref={useMergedRef(innerInputRef, inputRef || emptyRef)}
+						aria-invalid={showError}
 					/>
 				}
 			/>
 			{description && <Field.Description>{description}</Field.Description>}
+			<Field.Error fieldName={name} />
 		</Field>
 	);
 };
@@ -110,7 +120,7 @@ export function TextAreaField({
 	ref,
 	...rest
 }: TextAreaFieldProps) {
-	const [props] = useField(name);
+	const [props, meta] = useField(name);
 	const { submitForm } = useFormikContext();
 	const onKeyDownInner = useCallback(
 		(e: KeyboardEvent<HTMLInputElement>) => {
@@ -125,7 +135,13 @@ export function TextAreaField({
 	const id = useIdOrGenerated(providedId);
 
 	return (
-		<Field stretch className={className} style={style} ref={ref} id={id}>
+		<Field
+			stretch
+			className={clsx(meta.error && '@mode-attention', className)}
+			style={style}
+			ref={ref}
+			id={id}
+		>
 			{label && <Field.Label>{label}</Field.Label>}
 			<Field.Control
 				render={
@@ -139,6 +155,7 @@ export function TextAreaField({
 				}
 			/>
 			{description && <Field.Description>{description}</Field.Description>}
+			<Field.Error fieldName={name} />
 		</Field>
 	);
 }

package/src/components/forms/ToggleGroupField.tsx

@@ -34,8 +34,8 @@ function ToggleGroupFieldDefault({
 	const [fieldProps, _, tools] = useField({ name, required, ...props });
 
 	return (
-		<Field id={id} className={className} style={style}>
-			{label && <Field.Label>{label}</Field.Label>}
+		<Field id={id} className={className} style={style} render={<fieldset />}>
+			{label && <Field.Label render={<legend />}>{label}</Field.Label>}
 			<Field.Control
 				render={
 					<ToggleGroup
@@ -53,6 +53,7 @@ function ToggleGroupFieldDefault({
 				}
 			/>
 			{description && <Field.Description>{description}</Field.Description>}
+			<Field.Error fieldName={name} />
 		</Field>
 	);
 }

package/src/components/forms/index.tsx

@@ -6,3 +6,4 @@ export * from './hooks.js';
 export * from './NumberStepperField.js';
 export * from './SubmitButton.js';
 export * from './TextField.js';
+export * from './ToggleGroupField.js';

package/src/components/input/Input.module.css

@@ -57,6 +57,16 @@
 	line-height: var(--m-prose-secondary-lineHeight);
 	font-weight: var(--m-prose-secondary-weight);
 
+	&:has(input:invalid:not(:focus)),
+	&:has(textarea:invalid:not(:focus)),
+	&:has([contenteditable]:invalid:not(:focus)),
+	&:has(input[aria-invalid='true']:not(:focus)),
+	&:has(textarea[aria-invalid='true']:not(:focus)),
+	&:has([contenteditable][aria-invalid='true']:not(:focus)) {
+		@apply --mx-borderColor(var(--m-color-attention-heavy));
+		@apply --mx-bg(var(--m-color-attention-wash));
+	}
+
 	&:has(input:disabled),
 	&:has(textarea:disabled),
 	&:has([contenteditable]:disabled) {

package/src/hooks/useTitleBarColor.ts

@@ -28,7 +28,6 @@ function changeThemeColor(color: string) {
 		document.head.appendChild(metaThemeColor);
 	}
 	metaThemeColor?.setAttribute('content', color);
-	console.log('set title bar color', color);
 }
 
 export function useTitleBarColor(