@digdir/designsystemet-react 1.0.0-next.35 → 1.0.0-next.37

package/dist/esm/components/ToggleGroup/ToggleGroupItem.js

@@ -11,8 +11,8 @@ import { useToggleGroupItem } from './useToggleGroupitem.js';
  * <ToggleGroup.Item value='1'>Toggle 1</ToggleGroup.Item>
  */
 const ToggleGroupItem = forwardRef(function ToggleGroupItem(rest, ref) {
-    const { active, size = 'md', buttonProps, value } = useToggleGroupItem(rest);
-    return (jsx(RovingFocusItem, { asChild: true, value: value, children: jsx(Button, { variant: active ? 'primary' : 'tertiary', size: size, ref: ref, ...rest, ...buttonProps }) }));
+    const { active, buttonProps, value } = useToggleGroupItem(rest);
+    return (jsx(RovingFocusItem, { asChild: true, value: value, children: jsx(Button, { variant: active ? 'primary' : 'tertiary', ref: ref, ...rest, ...buttonProps }) }));
 });
 
 export { ToggleGroupItem };

package/dist/esm/components/ToggleGroup/useToggleGroupitem.js

@@ -13,7 +13,6 @@ const useToggleGroupItem = (props) => {
     return {
         ...rest,
         active: active,
-        size: toggleGroup?.size,
         value,
         buttonProps: {
             id: buttonId,

package/dist/esm/components/Tooltip/Tooltip.js

@@ -1,37 +1,42 @@
 'use client';
 import { jsxs, Fragment as Fragment$1, jsx } from 'react/jsx-runtime';
-import { useFloating, autoUpdate, offset, flip, shift, arrow, useTransitionStyles, useInteractions, useHover, useFocus, useDismiss, useRole, useMergeRefs, FloatingArrow, FloatingPortal } from '@floating-ui/react';
+import { useFloating, autoUpdate, offset, flip, shift, useTransitionStyles, useInteractions, useHover, useFocus, useDismiss, useRole, useMergeRefs, FloatingPortal } from '@floating-ui/react';
+import { Slot } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
-import { forwardRef, useState, useRef, Fragment, cloneElement } from 'react';
+import { forwardRef, useState, Fragment } from 'react';
 
-const ARROW_HEIGHT = 7;
-const ARROW_GAP = 4;
 /**
  * Tooltip component that displays a small piece of information when hovering or focusing on an element.
  * @example
  * <Tooltip content='This is a tooltip'>
  *  <button>Hover me</button>
  * </Tooltip>
+ *
+ * @example
+ * <Tooltip content='This is a tooltip'>
+ *  Hover me
+ * </Tooltip>
  */
-const Tooltip = forwardRef(({ children, content, placement = 'top', delay = 150, open: userOpen, defaultOpen = false, portal = false, className, style, ...rest }, ref) => {
+const Tooltip = forwardRef(function Tooltip({ children, content, placement = 'top', delay = 150, open: userOpen, defaultOpen = false, portal = false, className, style, ...rest }, ref) {
     const [isOpen, setIsOpen] = useState(defaultOpen);
-    const Container = portal ? FloatingPortal : Fragment;
-    const arrowRef = useRef(null);
     const internalOpen = userOpen ?? isOpen;
+    const Container = portal ? FloatingPortal : Fragment;
     const { refs, floatingStyles, context } = useFloating({
         open: internalOpen,
         onOpenChange: setIsOpen,
         placement,
         whileElementsMounted: autoUpdate,
         middleware: [
-            offset(ARROW_HEIGHT + ARROW_GAP),
+            offset((data) => {
+                // get pseudo element arrow size
+                const styles = getComputedStyle(data.elements.floating, '::before');
+                return parseFloat(styles.height);
+            }),
             flip({
                 fallbackAxisSideDirection: 'start',
             }),
             shift(),
-            arrow({
-                element: arrowRef,
-            }),
+            arrowPseudoElement,
         ],
     });
     const { styles: animationStyles } = useTransitionStyles(context, {
@@ -52,20 +57,45 @@ const Tooltip = forwardRef(({ children, content, placement = 'top', delay = 150,
             .ref,
         refs.setReference,
     ]);
-    if (!children ||
-        children?.type === Fragment ||
-        children === Fragment) {
-        console.error('<Tooltip> children needs to be a single ReactElement and not: <Fragment/> | <></>');
+    /* If children is only a string, make a span */
+    const ChildContainer = typeof children === 'string' ? 'span' : Slot;
+    /* Make sure it is valid */
+    if (typeof children !== 'string' && children.type === Fragment) {
+        console.error('<Tooltip> children needs to be a single ReactElement that can receive a ref and not: <Fragment/> | <></>');
         return null;
     }
-    return (jsxs(Fragment$1, { children: [cloneElement(children, getReferenceProps({
-                ref: childMergedRef,
-            })), internalOpen && (jsx(Container, { children: jsxs("div", { ref: refs.setFloating, style: { ...floatingStyles, ...animationStyles, ...style }, role: 'tooltip', ...getFloatingProps({
+    return (jsxs(Fragment$1, { children: [jsx(ChildContainer, { ...getReferenceProps({
+                    ref: childMergedRef,
+                }), children: children }), internalOpen && (jsx(Container, { children: jsx("div", { ref: refs.setFloating, style: { ...floatingStyles, ...animationStyles, ...style }, role: 'tooltip', ...getFloatingProps({
                         className: cl('ds-tooltip', className),
                         ref: mergedRef,
                         ...rest,
-                    }), children: [content, jsx(FloatingArrow, { ref: arrowRef, context: context, className: 'ds-tooltip__arrow', height: ARROW_HEIGHT })] }) }))] }));
+                    }), children: content }) }))] }));
 });
-Tooltip.displayName = 'Tooltip';
+const arrowPseudoElement = {
+    name: 'ArrowPseudoElement',
+    fn(data) {
+        const { elements, rects, placement } = data;
+        let arrowX = `${Math.round(rects.reference.width / 2 + rects.reference.x - data.x)}px`;
+        let arrowY = `${Math.round(rects.reference.height / 2 + rects.reference.y - data.y)}px`;
+        switch (placement) {
+            case 'top':
+                arrowY = '100%';
+                break;
+            case 'right':
+                arrowX = '0';
+                break;
+            case 'bottom':
+                arrowY = '0';
+                break;
+            case 'left':
+                arrowX = '100%';
+                break;
+        }
+        elements.floating.style.setProperty('--ds-tooltip-arrow-x', arrowX);
+        elements.floating.style.setProperty('--ds-tooltip-arrow-y', arrowY);
+        return data;
+    },
+};
 
 export { Tooltip };

package/dist/esm/components/ValidationMessage/ValidationMessage.js

@@ -5,9 +5,9 @@ import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 
 /** Use `ValidationMessage` to display validation text */
-const ValidationMessage = forwardRef(function ValidationMessage({ size = 'md', className, asChild, error = true, ...rest }, ref) {
+const ValidationMessage = forwardRef(function ValidationMessage({ className, asChild, error = true, ...rest }, ref) {
     const Component = asChild ? Slot : 'div';
-    return (jsx(Component, { className: cl(`ds-validation-message--${size}`, className), "data-error": error || undefined, ref: ref, ...rest }));
+    return (jsx(Component, { className: cl('ds-validation-message', className), "data-error": error || undefined, "data-field": 'validation', ref: ref, ...rest }));
 });
 
 export { ValidationMessage };

package/dist/esm/components/form/Checkbox/Checkbox.js

@@ -1,26 +1,18 @@
 'use client';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useMergeRefs } from '@floating-ui/react';
-import cl from 'clsx/lite';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { useCheckbox } from './useCheckbox.js';
-import { Paragraph } from '../../Paragraph/Paragraph.js';
-import { omit } from '../../../utilities/omit/omit.js';
+import { Field } from '../Field/index.js';
+import { Input } from '../Input/Input.js';
 import { Label } from '../../Label/Label.js';
+import { ValidationMessage } from '../../ValidationMessage/ValidationMessage.js';
 
-const Checkbox = forwardRef((props, ref) => {
-    const { children, description, className, style, ...rest } = props;
-    const { inputProps, descriptionId, hasError, size = 'md', readOnly, } = useCheckbox(props);
-    const inputRef = useMergeRefs([
-        ref,
-        (el) => {
-            if (el) {
-                el.indeterminate = rest.indeterminate ?? false;
-            }
-        },
-    ]);
-    return (jsx(Paragraph, { asChild: true, size: size, children: jsxs("div", { className: cl('ds-checkbox', `ds-checkbox--${size}`, hasError && `ds-checkbox--error`, readOnly && `ds-checkbox--readonly`, className), style: style, children: [jsx("input", { className: `ds-checkbox__input`, ref: inputRef, ...omit(['size', 'error', 'indeterminate'], rest), ...inputProps, type: 'checkbox', disabled: inputProps.disabled, "aria-checked": rest.indeterminate ? 'mixed' : inputProps.checked }), children && (jsxs(Fragment, { children: [jsx(Label, { className: cl(`ds-checkbox__label`), htmlFor: inputProps.id, size: size, weight: 'regular', children: jsx("span", { children: children }) }), description && (jsx(Paragraph, { asChild: true, size: size, children: jsx("div", { id: descriptionId, className: `ds-checkbox__description`, children: description }) }))] }))] }) }));
+/**
+ * Checkbox used to select multiple options.
+ * @example
+ * <Checkbox label="I agree" value="agree" />
+ */
+const Checkbox = forwardRef(function Checkbox({ 'data-size': size, children, label, description, validation, ...rest }, ref) {
+    return (jsxs(Field, { "data-size": size, children: [jsx(Input, { type: 'checkbox', ref: ref, ...rest }), !!label && jsx(Label, { weight: 'regular', children: label }), !!description && jsx("div", { "data-field": 'description', children: description }), !!validation && jsx(ValidationMessage, { children: validation })] }));
 });
-Checkbox.displayName = 'Checkbox';
 
 export { Checkbox };

package/dist/esm/components/form/Combobox/Combobox.js

@@ -16,9 +16,9 @@ import { useCombobox } from './useCombobox.js';
 import { useComboboxKeyboard } from './useComboboxKeyboard.js';
 import { useFloatingCombobox } from './useFloatingCombobox.js';
 import { prefix, setReactInputValue, removePrefix } from './utilities.js';
-import { Spinner } from '../../loaders/Spinner/Spinner.js';
 import { useDebounceCallback } from '../../../utilities/hooks/useDebounceCallback/useDebounceCallback.js';
 import { omit } from '../../../utilities/omit/omit.js';
+import { Spinner } from '../../loaders/Spinner/Spinner.js';
 
 const ComboboxComponent = forwardRef(({ value, initialValue = [], onValueChange, label, hideLabel = false, description, multiple = false, disabled = false, readOnly = false, hideChips = false, clearButtonLabel = 'Fjern alt', hideClearButton = false, error, errorId, id, name, portal = true, htmlSize = 0, virtual = false, children, style, size = 'md', loading, loadingLabel = 'Laster...', filter, chipSrLabel = (option) => 'Slett ' + option.label, className, ...rest }, forwareddRef) => {
     const inputRef = useRef(null);
@@ -191,7 +191,7 @@ const ComboboxComponent = forwardRef(({ value, initialValue = [], onValueChange,
                                         left: 0,
                                         width: '100%',
                                         transform: `translateY(${virtualRow.start}px)`,
-                                    }, children: filteredOptionsChildren[virtualRow.index] }, virtualRow.index))) })), loading ? (jsxs(ComboboxCustom, { className: 'ds-combobox__loading', children: [jsx(Spinner, { title: 'Laster', size: 'sm' }), loadingLabel] })) : (jsxs(Fragment, { children: [restChildren, !virtual && filteredOptionsChildren] }))] }) }) }))] }));
+                                    }, children: filteredOptionsChildren[virtualRow.index] }, virtualRow.index))) })), loading ? (jsxs(ComboboxCustom, { className: 'ds-combobox__loading', children: [jsx(Spinner, { "aria-label": 'Laster', "data-size": 'sm' }), loadingLabel] })) : (jsxs(Fragment, { children: [restChildren, !virtual && filteredOptionsChildren] }))] }) }) }))] }));
 });
 const Combobox = forwardRef((props, ref) => (jsx(ComboboxIdProvider, { children: jsx(ComboboxComponent, { ...props, ref: ref }) })));
 Combobox.displayName = 'Combobox';

package/dist/esm/components/form/Combobox/Custom.js

@@ -6,8 +6,8 @@ import cl from 'clsx/lite';
 import { forwardRef, useId, useContext, useMemo } from 'react';
 import { ComboboxContext } from './ComboboxContext.js';
 import { useComboboxId } from './ComboboxIdContext.js';
-import { Label } from '../../Label/Label.js';
 import { omit } from '../../../utilities/omit/omit.js';
+import { Label } from '../../Label/Label.js';
 
 const ComboboxCustom = forwardRef(({ asChild, interactive, id, className, ...rest }, ref) => {
     if (interactive && !id) {
@@ -28,7 +28,7 @@ const ComboboxCustom = forwardRef(({ asChild, interactive, id, className, ...res
         },
         ref,
     ]);
-    return (jsx(Label, { size: size, asChild: true, children: jsx(Component, { ref: combinedRef, tabIndex: -1, className: cl('ds-combobox__custom', className), id: id || randomId, role: 'option', "aria-selected": activeIndex === index, "data-active": activeIndex === index, ...omit(['interactive'], rest), ...omit(['onClick', 'onPointerLeave'], getItemProps()) }) }));
+    return (jsx(Label, { "data-size": size, asChild: true, children: jsx(Component, { ref: combinedRef, tabIndex: -1, className: cl('ds-combobox__custom', className), id: id || randomId, role: 'option', "aria-selected": activeIndex === index, "data-active": activeIndex === index, ...omit(['interactive'], rest), ...omit(['onClick', 'onPointerLeave'], getItemProps()) }) }));
 });
 
 export { ComboboxCustom };

package/dist/esm/components/form/Combobox/Empty.js

@@ -11,7 +11,7 @@ const ComboboxEmpty = forwardRef(({ children, className, ...rest }, ref) => {
         throw new Error('ComboboxEmpty must be used within a Combobox');
     }
     const { filteredOptions, size } = context;
-    return (filteredOptions.length === 0 && (jsx(Label, { size: size, asChild: true, children: jsx("div", { ref: ref, className: cl('ds-combobox__empty', className), ...rest, children: children }) })));
+    return (filteredOptions.length === 0 && (jsx(Label, { "data-size": size, asChild: true, children: jsx("div", { ref: ref, className: cl('ds-combobox__empty', className), ...rest, children: children }) })));
 });
 ComboboxEmpty.displayName = 'ComboboxEmpty';
 

package/dist/esm/components/form/Combobox/Option/Option.js

@@ -22,10 +22,12 @@ const ComboboxOption = memo(forwardRef(({ value, description, children, classNam
     }
     const { size, multiple, getItemProps } = context;
     const props = getItemProps();
-    return (jsx(Label, { size: 'md', asChild: true, children: jsxs("button", { ref: ref, id: id, role: 'option', type: 'button', "aria-selected": !!selected, "aria-labelledby": labelId, tabIndex: -1, onClick: (e) => {
+    return (jsx(Label, { "data-size": 'md', asChild: true, children: jsxs("button", { ref: ref, id: id, 
+            // biome-ignore lint/a11y/useSemanticElements: biome wants me to use the <option> element
+            role: 'option', type: 'button', "aria-selected": !!selected, "aria-labelledby": labelId, tabIndex: -1, onClick: (e) => {
                 onOptionClick();
                 rest.onClick?.(e);
-            }, className: cl('ds-combobox__option', active && 'ds-combobox__option--active', multiple && 'ds-combobox__option--multiple', className), ...omit(['displayValue'], rest), ...omit(['onClick', 'onPointerLeave'], props), children: [jsx(Label, { asChild: true, size: size, children: jsx("span", { children: jsx(SelectedIcon, { multiple: multiple, selected: !!selected }) }) }), jsxs(Label, { className: 'ds-combobox__option__label', size: size, id: labelId, children: [children, description && (jsx(ComboboxOptionDescription, { children: description }))] })] }) }));
+            }, className: cl('ds-combobox__option', active && 'ds-combobox__option--active', multiple && 'ds-combobox__option--multiple', className), ...omit(['displayValue'], rest), ...omit(['onClick', 'onPointerLeave'], props), children: [jsx(Label, { asChild: true, "data-size": size, children: jsx("span", { children: jsx(SelectedIcon, { multiple: multiple, selected: !!selected }) }) }), jsxs(Label, { className: 'ds-combobox__option__label', "data-size": size, id: labelId, children: [children, description && (jsx(ComboboxOptionDescription, { children: description }))] })] }) }));
 }));
 ComboboxOption.displayName = 'ComboboxOption';
 function isComboboxOption(child) {

package/dist/esm/components/form/Combobox/internal/ComboboxChips.js

@@ -12,7 +12,7 @@ const ComboboxChips = () => {
     }
     const { size, readOnly, disabled, selectedOptions, chipSrLabel, handleSelectOption, inputRef, } = context;
     return (jsx(Fragment, { children: Object.keys(selectedOptions).map((value) => {
-            return (jsx(ChipRemovable, { size: size, disabled: disabled, onKeyDown: (e) => {
+            return (jsx(ChipRemovable, { "data-size": size, disabled: disabled, onKeyDown: (e) => {
                     if (readOnly)
                         return;
                     if (disabled)

package/dist/esm/components/form/Combobox/internal/ComboboxError.js

@@ -3,7 +3,7 @@ import { jsx } from 'react/jsx-runtime';
 import { ValidationMessage } from '../../../ValidationMessage/ValidationMessage.js';
 
 const ComboboxError = ({ size, error, formFieldProps }) => {
-    return (jsx("div", { className: 'ds-combobox__error-message', id: formFieldProps.errorId, "aria-live": 'polite', "aria-relevant": 'additions removals', children: error && jsx(ValidationMessage, { size: size, children: error }) }));
+    return (jsx("div", { className: 'ds-combobox__error-message', id: formFieldProps.errorId, "aria-live": 'polite', "aria-relevant": 'additions removals', children: error && jsx(ValidationMessage, { "data-size": size, children: error }) }));
 };
 ComboboxError.displayName = 'ComboboxError';
 

package/dist/esm/components/form/Combobox/internal/ComboboxInput.js

@@ -68,7 +68,7 @@ const ComboboxInput = ({ hideClearButton, listId, error, hideChips, handleKeyDow
             }
         },
     });
-    return (jsx(Paragraph, { size: size, asChild: true, children: jsxs("div", { ...props, "aria-disabled": disabled ? 'true' : undefined, className: cl('ds-textfield__input', 'ds-combobox__input__wrapper', readOnly && 'ds-combobox--readonly', error && 'ds-combobox--error'), children: [jsxs("div", { className: 'ds-combobox__chip-and-input', children: [multiple && !hideChips && jsx(ComboboxChips, {}), jsx(Paragraph, { size: size, asChild: true, children: jsx("input", { ref: mergedRefs, "aria-activedescendant": props['aria-activedescendant'], readOnly: readOnly, "aria-autocomplete": 'list', role: 'combobox', "aria-expanded": open, "aria-controls": open ? listId : undefined, autoComplete: 'off', size: htmlSize, value: inputValue, ...omit(['style', 'className'], rest), ...formFieldProps.inputProps, className: 'ds-combobox__input', onChange: (e) => {
+    return (jsx(Paragraph, { "data-size": size, asChild: true, children: jsxs("div", { ...props, "aria-disabled": disabled ? 'true' : undefined, className: cl('ds-textfield__input', 'ds-combobox__input__wrapper', readOnly && 'ds-combobox--readonly', error && 'ds-combobox--error'), children: [jsxs("div", { className: 'ds-combobox__chip-and-input', children: [multiple && !hideChips && jsx(ComboboxChips, {}), jsx(Paragraph, { "data-size": size, asChild: true, children: jsx("input", { ref: mergedRefs, "aria-activedescendant": props['aria-activedescendant'], readOnly: readOnly, "aria-autocomplete": 'list', role: 'combobox', "aria-expanded": open, "aria-controls": open ? listId : undefined, autoComplete: 'off', size: htmlSize, value: inputValue, ...omit(['style', 'className'], rest), ...formFieldProps.inputProps, className: 'ds-combobox__input', onChange: (e) => {
                                     onChange(e);
                                     !open && setOpen(true);
                                     rest.onChange?.(e);

package/dist/esm/components/form/Combobox/internal/ComboboxLabel.js

@@ -6,7 +6,7 @@ import { Label } from '../../../Label/Label.js';
 import { Paragraph } from '../../../Paragraph/Paragraph.js';
 
 const ComboboxLabel = ({ label, description, hideLabel, size, readOnly, formFieldProps, }) => {
-    return (jsxs(Fragment, { children: [label && (jsxs(Label, { size: size, htmlFor: formFieldProps.inputProps.id, className: cl('ds-combobox__label', hideLabel && `ds-sr-only`), children: [readOnly && (jsx(PadlockLockedFillIcon, { "aria-hidden": true, className: 'ds-combobox__readonly__icon' })), label] })), description && (jsx(Paragraph, { asChild: true, size: size, children: jsx("div", { id: formFieldProps.descriptionId, className: cl('ds-combobox__description', hideLabel && `ds-sr-only`), children: description }) }))] }));
+    return (jsxs(Fragment, { children: [label && (jsxs(Label, { "data-size": size, htmlFor: formFieldProps.inputProps.id, className: cl('ds-combobox__label', hideLabel && `ds-sr-only`), children: [readOnly && (jsx(PadlockLockedFillIcon, { "aria-hidden": true, className: 'ds-combobox__readonly__icon' })), label] })), description && (jsx(Paragraph, { asChild: true, "data-size": size, children: jsx("div", { id: formFieldProps.descriptionId, className: cl('ds-combobox__description', hideLabel && `ds-sr-only`), children: description }) }))] }));
 };
 ComboboxLabel.displayName = 'ComboboxLabel';
 

package/dist/esm/components/form/Field/Field.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { useMergeRefs } from '@floating-ui/react';
+import cl from 'clsx/lite';
+import { forwardRef, useRef, useEffect } from 'react';
+import { fieldObserver } from './fieldObserver.js';
+
+const Field = forwardRef(function Field({ className, ...rest }, ref) {
+    const fieldRef = useRef(null);
+    const mergedRefs = useMergeRefs([fieldRef, ref]);
+    useEffect(() => fieldObserver(fieldRef.current), []);
+    return (jsx("div", { className: cl('ds-field', className), ref: mergedRefs, ...rest }));
+});
+
+export { Field };

package/dist/esm/components/form/Field/FieldAffix.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+
+const FieldAffixes = forwardRef(function FieldAffixes({ className, ...rest }, ref) {
+    return (jsx("div", { className: cl('ds-field-affixes', className), ref: ref, ...rest }));
+});
+const FieldAffix = forwardRef(function FieldAffix({ className, ...rest }, ref) {
+    return (jsx("span", { className: cl('ds-field-affix', className), "aria-hidden": 'true', ref: ref, ...rest }));
+});
+
+export { FieldAffix, FieldAffixes };

package/dist/esm/components/form/Field/FieldCounter.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { forwardRef, useState, useRef, useEffect } from 'react';
+import { ValidationMessage } from '../../ValidationMessage/ValidationMessage.js';
+
+const label = (text, count) => text.replace('%d', Math.abs(count).toString());
+const FieldCounter = forwardRef(function FieldCounter({ limit, under = '%d tegn igjen', over = '%d tegn for mye', ...rest }, ref) {
+    const [count, setCount] = useState(0);
+    const counterRef = useRef(null);
+    const hasExceededLimit = count > limit;
+    const remainder = limit - count;
+    useEffect(() => {
+        const onInput = ({ target }) => {
+            if (target instanceof HTMLInputElement ||
+                target instanceof HTMLTextAreaElement) {
+                setCount(target.value.length);
+            }
+        };
+        const field = counterRef.current?.closest('.ds-field');
+        field?.addEventListener('input', onInput);
+        return () => field?.removeEventListener('input', onInput);
+    }, [setCount]);
+    return (jsxs(Fragment, { children: [jsx("div", { "data-field": 'description', className: 'ds-sr-only', "aria-live": 'polite', ref: counterRef, children: hasExceededLimit && label(over, remainder) }), jsx(ValidationMessage, { error: hasExceededLimit, ref: ref, ...rest, children: label(hasExceededLimit ? over : under, remainder) })] }));
+});
+
+export { FieldCounter };

package/dist/esm/components/form/Field/FieldDescription.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+
+const FieldDescription = forwardRef(function FieldDescription(rest, ref) {
+    return jsx("div", { "data-field": 'description', ref: ref, ...rest });
+});
+
+export { FieldDescription };

package/dist/esm/components/form/Field/fieldObserver.js

@@ -0,0 +1,95 @@
+'use client';
+function fieldObserver(fieldElement) {
+    if (!fieldElement)
+        return;
+    const elements = new Map();
+    const uuid = `:${Date.now().toString(36)}${Math.random().toString(36).slice(2, 5)}`;
+    let input = null;
+    let describedby = '';
+    const process = (mutations) => {
+        const changed = [];
+        const removed = [];
+        // Merge MutationRecords
+        for (const mutation of mutations) {
+            if (mutation.attributeName)
+                changed.push(mutation.target ?? fieldElement);
+            changed.push(...(mutation.addedNodes || []));
+            removed.push(...(mutation.removedNodes || []));
+        }
+        // Register elements
+        for (const el of changed) {
+            if (!isElement(el))
+                continue;
+            if (isLabel(el))
+                elements.set(el, el.htmlFor);
+            else if (el.hasAttribute('data-field'))
+                elements.set(el, el.id);
+            else if (isInputLike(el)) {
+                input = el;
+                describedby = el.getAttribute('aria-describedby') || '';
+            }
+        }
+        // Reset removed elements
+        for (const el of removed) {
+            if (!isElement(el))
+                continue;
+            if (input === el)
+                input = null;
+            if (elements.has(el)) {
+                setAttr(el, 'aria-disabled', null); // Reset disabled state
+                setAttr(el, isLabel(el) ? 'for' : 'id', elements.get(el));
+                elements.delete(el);
+            }
+        }
+        // Connect elements
+        const describedbyIds = [describedby]; // Keep original aria-describedby
+        const inputId = input?.id || uuid;
+        const isDisabled = input?.hasAttribute('disabled') ||
+            input?.getAttribute('aria-disabled') === 'true';
+        for (const [el, value] of elements) {
+            const descriptionType = el.getAttribute('data-field');
+            const id = descriptionType ? `${inputId}:${descriptionType}` : inputId;
+            setAttr(el, 'aria-disabled', isDisabled ? 'true' : null); // Forward inputs disabled state to related elements to make axe tests happy
+            if (!value)
+                setAttr(el, isLabel(el) ? 'for' : 'id', id); // Ensure we have a value
+            if (descriptionType === 'validation')
+                describedbyIds.unshift(el.id); // Validations to the front
+            else if (descriptionType)
+                describedbyIds.push(el.id); // Other descriptions to the back
+        }
+        setAttr(input, 'id', inputId);
+        setAttr(input, 'aria-describedby', describedbyIds.join(' ').trim());
+    };
+    const observer = createOptimizedMutationObserver(process);
+    observer.observe(fieldElement, {
+        attributeFilter: ['id', 'for', 'aria-describedby'],
+        attributes: true,
+        childList: true,
+        subtree: true,
+    });
+    process([{ addedNodes: fieldElement.querySelectorAll('*') }]); // Initial setup
+    observer.takeRecords(); // Clear initial setup queue
+    return () => observer.disconnect();
+}
+// Utilities
+const isElement = (node) => node instanceof Element;
+const isLabel = (node) => node instanceof HTMLLabelElement;
+const isInputLike = (node) => 'validity' in node && !(node instanceof HTMLButtonElement); // Matches input, textarea, select and form accosiated custom elements
+const setAttr = (el, name, value) => value ? el?.setAttribute(name, value) : el?.removeAttribute(name);
+// Speed up MutationObserver by debouncing, clearing internal queue after changes and only running when page is visible
+function createOptimizedMutationObserver(callback) {
+    const queue = [];
+    const observer = new MutationObserver((mutations) => {
+        if (!queue.length)
+            requestAnimationFrame(process);
+        queue.push(...mutations);
+    });
+    const process = () => {
+        callback(queue, observer);
+        queue.length = 0; // Reset queue
+        observer.takeRecords(); // Clear queue due to DOM changes in callback
+    };
+    return observer;
+}
+
+export { fieldObserver };

package/dist/esm/components/form/Field/index.js

@@ -0,0 +1,27 @@
+'use client';
+import { Field as Field$1 } from './Field.js';
+import { FieldAffixes, FieldAffix } from './FieldAffix.js';
+import { FieldCounter } from './FieldCounter.js';
+import { FieldDescription } from './FieldDescription.js';
+
+/**
+ * @example
+ * <Field>
+ *  <Label>Label text</Label>
+ *  <Field.Description>Description</Field.Description>
+ *  <Input />
+ *  <ValidationMessage>Validation message</ValidationMessage>
+ * </Field>
+ */
+const Field = Object.assign(Field$1, {
+    Description: FieldDescription,
+    Affixes: FieldAffixes,
+    Affix: FieldAffix,
+    Counter: FieldCounter,
+});
+Field.Description.displayName = 'Field.Description';
+Field.Affixes.displayName = 'Field.Affixes';
+Field.Affix.displayName = 'Field.Affix';
+Field.Counter.displayName = 'Field.Counter';
+
+export { Field, FieldAffix, FieldAffixes, FieldCounter, FieldDescription };

package/dist/esm/components/form/Fieldset/Fieldset.js

@@ -1,24 +1,10 @@
 'use client';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import cl from 'clsx/lite';
-import { forwardRef, useContext } from 'react';
-import { useFormField } from '../useFormField.js';
-import { FieldsetContext } from './FieldsetContext.js';
-import { Label } from '../../Label/Label.js';
-import { Paragraph } from '../../Paragraph/Paragraph.js';
-import { ValidationMessage } from '../../ValidationMessage/ValidationMessage.js';
+import { forwardRef } from 'react';
 
-const Fieldset = forwardRef(function Fieldset(props, ref) {
-    const { children, legend, description, error, hideLegend, className, ...rest } = props;
-    const fieldset = useContext(FieldsetContext);
-    const { inputProps, size, readOnly, errorId, hasError, descriptionId } = useFormField(props, 'fieldset');
-    return (jsx(FieldsetContext.Provider, { value: {
-            disabled: props?.disabled,
-            error: error ?? fieldset?.error,
-            errorId: hasError ? errorId : undefined,
-            readOnly,
-            size,
-        }, children: jsxs("fieldset", { "aria-describedby": inputProps['aria-describedby'], "aria-invalid": inputProps['aria-invalid'], className: cl('ds-fieldset', className), "data-hidelegend": hideLegend || undefined, "data-readonly": readOnly || undefined, disabled: props?.disabled, ref: ref, ...rest, children: [jsx(Label, { asChild: true, size: size, children: jsx("legend", { children: legend }) }), !!description && (jsx(Paragraph, { id: descriptionId, size: size, variant: 'short', children: description })), children, jsx("div", { "aria-live": 'polite', "aria-relevant": 'additions removals', id: errorId, children: hasError && (jsx(ValidationMessage, { size: size, children: error })) })] }) }));
+const Fieldset = forwardRef(function Fieldset({ className, ...rest }, ref) {
+    return (jsx("fieldset", { className: cl('ds-fieldset', className), ref: ref, ...rest }));
 });
 
 export { Fieldset };

package/dist/esm/components/form/Fieldset/FieldsetDescription.js

@@ -0,0 +1,10 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Paragraph } from '../../Paragraph/Paragraph.js';
+
+const FieldsetDescription = forwardRef(function FieldsetDescription(rest, ref) {
+    return jsx(Paragraph, { ref: ref, ...rest });
+});
+
+export { FieldsetDescription };

package/dist/esm/components/form/Fieldset/FieldsetLegend.js

@@ -0,0 +1,10 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Label } from '../../Label/Label.js';
+
+const FieldsetLegend = forwardRef(function FieldsetLegend(rest, ref) {
+    return (jsx(Label, { asChild: true, children: jsx("legend", { ref: ref, ...rest }) }));
+});
+
+export { FieldsetLegend };

package/dist/esm/components/form/Fieldset/index.js

@@ -0,0 +1,21 @@
+'use client';
+import { Fieldset as Fieldset$1 } from './Fieldset.js';
+import { FieldsetDescription } from './FieldsetDescription.js';
+import { FieldsetLegend } from './FieldsetLegend.js';
+
+/**
+ * @example
+ * <Fieldset>
+ *  <Fieldset.Legend>Legend text</Fieldset.Legend>
+ *  <Fieldset.Description>Description text</Fieldset.Description>
+ *  ...input components
+ * </Fieldset>
+ */
+const Fieldset = Object.assign(Fieldset$1, {
+    Legend: FieldsetLegend,
+    Description: FieldsetDescription,
+});
+Fieldset.Legend.displayName = 'Fieldset.Legend';
+Fieldset.Description.displayName = 'Fieldset.Description';
+
+export { Fieldset, FieldsetDescription, FieldsetLegend };

package/dist/esm/components/form/Input/Input.js

@@ -0,0 +1,21 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+
+/** Input field
+ *
+ * @example
+ * ```tsx
+ * <Input />
+ * ```
+ */
+const Input = forwardRef(function Input({ type = 'text', className, onChange, onClick, ...rest }, ref) {
+    return (jsx("input", { className: cl(`ds-input`, className), ref: ref, type: type, onChange: (event) => rest.readOnly || onChange?.(event), onClick: (event) => {
+            if (rest.readOnly)
+                event.preventDefault(); // Make readonly work for checkbox / radio / switch
+            onClick?.(event);
+        }, ...rest }));
+});
+
+export { Input };

package/dist/esm/components/form/Radio/Radio.js

@@ -1,17 +1,18 @@
 'use client';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import cl from 'clsx/lite';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { useRadio } from './useRadio.js';
-import { Paragraph } from '../../Paragraph/Paragraph.js';
-import { omit } from '../../../utilities/omit/omit.js';
+import { Field } from '../Field/index.js';
+import { Input } from '../Input/Input.js';
 import { Label } from '../../Label/Label.js';
+import { ValidationMessage } from '../../ValidationMessage/ValidationMessage.js';
 
-const Radio = forwardRef((props, ref) => {
-    const { children, description, className, style, ...rest } = props;
-    const { inputProps, descriptionId, hasError, size = 'md', readOnly, } = useRadio(props);
-    return (jsx(Paragraph, { asChild: true, size: size, children: jsxs("div", { className: cl('ds-radio', `ds-radio--${size}`, hasError && `ds-radio--error`, readOnly && `ds-radio--readonly`, className), style: style, children: [jsx("input", { className: 'ds-radio__input', disabled: inputProps.disabled, ref: ref, ...omit(['size', 'error'], rest), ...inputProps }), children && (jsxs(Fragment, { children: [jsx(Label, { className: cl('ds-radio__label'), htmlFor: inputProps.id, size: size, weight: 'regular', children: jsx("span", { children: children }) }), description && (jsx(Paragraph, { asChild: true, size: size, children: jsx("div", { id: descriptionId, className: 'ds-radio__description', children: description }) }))] }))] }) }));
+/**
+ * Radio used to select multiple options.
+ * @example
+ * <Radio label="I agree" value="agree" />
+ */
+const Radio = forwardRef(function Radio({ 'data-size': size, children, label, description, validation, ...rest }, ref) {
+    return (jsxs(Field, { "data-size": size, children: [jsx(Input, { type: 'radio', ref: ref, ...rest }), !!label && jsx(Label, { weight: 'regular', children: label }), !!description && jsx("div", { "data-field": 'description', children: description }), !!validation && jsx(ValidationMessage, { children: validation })] }));
 });
-Radio.displayName = 'Radio';
 
 export { Radio };