@digdir/designsystemet-react 1.0.0-next.34 → 1.0.0-next.36

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

@@ -3,7 +3,7 @@ import { jsx, Fragment } from 'react/jsx-runtime';
 import { useContext } from 'react';
 import '../../../Chip/index.js';
 import { ComboboxContext } from '../ComboboxContext.js';
-import { RemovableChip } from '../../../Chip/Removable/Removable.js';
+import { ChipRemovable } from '../../../Chip/Chips.js';
 
 const ComboboxChips = () => {
     const context = useContext(ComboboxContext);
@@ -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(RemovableChip, { 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

@@ -1,9 +1,9 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { ValidationMessage } from '../../../Typography/ValidationMessage/ValidationMessage.js';
+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

@@ -9,7 +9,7 @@ import { useComboboxIdDispatch } from '../ComboboxIdContext.js';
 import { prefix } from '../utilities.js';
 import ComboboxChips from './ComboboxChips.js';
 import ComboboxClearButton from './ComboboxClearButton.js';
-import { Paragraph } from '../../../Typography/Paragraph/Paragraph.js';
+import { Paragraph } from '../../../Paragraph/Paragraph.js';
 import { omit } from '../../../../utilities/omit/omit.js';
 
 const ComboboxInput = ({ hideClearButton, listId, error, hideChips, handleKeyDown, ...rest }) => {
@@ -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": listId, 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

@@ -2,11 +2,11 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { PadlockLockedFillIcon } from '@navikt/aksel-icons';
 import cl from 'clsx/lite';
-import { Label } from '../../../Typography/Label/Label.js';
-import { Paragraph } from '../../../Typography/Paragraph/Paragraph.js';
+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 '../../Typography/Label/Label.js';
-import { Paragraph } from '../../Typography/Paragraph/Paragraph.js';
-import { ValidationMessage } from '../../Typography/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 '../../Typography/Paragraph/Paragraph.js';
-import { omit } from '../../../utilities/omit/omit.js';
-import { Label } from '../../Typography/Label/Label.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 };

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

@@ -1,47 +1,10 @@
 'use client';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useMergeRefs } from '@floating-ui/react';
-import { MagnifyingGlassIcon, XMarkIcon } from '@navikt/aksel-icons';
+import { jsx } from 'react/jsx-runtime';
 import cl from 'clsx/lite';
-import { forwardRef, useRef, useState, useCallback } from 'react';
-import { Button } from '../../Button/Button.js';
-import { useSearch } from './useSearch.js';
-import { Paragraph } from '../../Typography/Paragraph/Paragraph.js';
-import { Label } from '../../Typography/Label/Label.js';
-import { omit } from '../../../utilities/omit/omit.js';
+import { forwardRef } from 'react';
 
-/** Search field
- *
- * @example
- * ```tsx
- * <Search label="Search" label">
- * ```
- */
-const Search = forwardRef((props, ref) => {
-    const { label, style, hideLabel = true, variant = 'simple', searchButtonLabel = 'Søk', clearButtonLabel = 'Tøm', defaultValue, value, onChange, onClear, disabled, onSearchClick, htmlSize = 27, className, ...rest } = props;
-    const { inputProps, size = 'md' } = useSearch(props);
-    const inputRef = useRef();
-    const mergedRef = useMergeRefs([ref, inputRef]);
-    const [internalValue, setInternalValue] = useState(defaultValue ?? '');
-    const handleChange = useCallback((e) => {
-        const newValue = e.target.value;
-        value === undefined && setInternalValue(newValue);
-        onChange?.(e);
-    }, [onChange, value]);
-    const handleClear = () => {
-        onClear?.(internalValue);
-        setInternalValue('');
-        inputRef?.current?.focus();
-    };
-    const handleSearchClick = () => {
-        onSearchClick?.((value ?? internalValue).toString());
-    };
-    const isSimple = variant === 'simple';
-    const showClearButton = Boolean(value ?? internalValue) && !disabled;
-    return (jsx(Paragraph, { asChild: true, size: size, children: jsxs("div", { style: style, className: cl('ds-search', inputProps.disabled && 'ds-search--disabled', `ds-search--${size}`, className), children: [label && (jsx(Label, { size: size, weight: 'medium', htmlFor: inputProps.id, className: cl('ds-search__label', hideLabel && 'ds-sr-only'), children: jsx("span", { children: label }) })), jsxs("div", { className: 'ds-search__field', children: [jsxs("div", { className: cl('ds-search__field', `ds-search--${size}`), children: [isSimple && (jsx(MagnifyingGlassIcon, { className: 'ds-search__icon', "aria-hidden": true })), jsx("input", { ref: mergedRef, size: htmlSize, value: value ?? internalValue, disabled: disabled, className: cl('ds-search__input', `ds-focus`, isSimple
-                                        ? 'ds-search__input--simple'
-                                        : 'ds-search__input--with-search-button'), ...omit(['size', 'error', 'errorId', 'readOnly'], rest), ...inputProps, onChange: handleChange }), showClearButton && (jsxs("button", { className: cl('ds-search__clear-button', `ds-focus`), type: 'button', onClick: handleClear, disabled: disabled, children: [jsx("span", { className: `ds-sr-only`, children: clearButtonLabel }), jsx(XMarkIcon, { "aria-hidden": true })] }))] }), !isSimple && (jsx(Button, { className: 'ds-search__search-button', size: size, variant: variant, type: 'submit', onClick: handleSearchClick, disabled: disabled, children: searchButtonLabel }))] })] }) }));
+const Search = forwardRef(function Search({ className, ...rest }, ref) {
+    return jsx("div", { ref: ref, className: cl('ds-search', className), ...rest });
 });
-Search.displayName = 'Search';
 
 export { Search };

package/dist/esm/components/form/Search/SearchButton.js

@@ -0,0 +1,10 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Button } from '../../Button/Button.js';
+
+const SearchButton = forwardRef(function SearchButton({ children = 'Søk', ...rest }, ref) {
+    return (jsx(Button, { ref: ref, type: 'submit', ...rest, children: children }));
+});
+
+export { SearchButton };

package/dist/esm/components/form/Search/SearchClear.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { setReactInputValue } from '../Combobox/utilities.js';
+import { Button } from '../../Button/Button.js';
+
+const SearchClear = forwardRef(function SearchClear({ 'aria-label': label = 'Tøm', onClick, ...rest }, ref) {
+    const handleClear = (e) => {
+        const target = e.target;
+        let input = null;
+        if (target instanceof HTMLElement)
+            input = target.closest('.ds-search')?.querySelector('input');
+        if (!input)
+            throw new Error('Input is missing');
+        /* narrow type to make TS happy */
+        if (!(input instanceof HTMLInputElement))
+            throw new Error('Input is not an input element');
+        e.preventDefault();
+        setReactInputValue(input, '');
+        input.focus();
+        onClick?.(e);
+    };
+    return (jsx(Button, { ref: ref, variant: 'tertiary', type: 'reset', "aria-label": label, onClick: handleClear, icon: true, ...rest }));
+});
+
+export { SearchClear };

package/dist/esm/components/form/Search/SearchInput.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Input } from '../Input/Input.js';
+
+const SearchInput = forwardRef(function SearchInput({ ...rest }, ref) {
+    return (jsx(Input, { ref: ref, type: 'search', 
+        /* We need an empty placeholder for the clear button to be able to show/hide */
+        placeholder: '', ...rest }));
+});
+
+export { SearchInput };

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

@@ -0,0 +1,28 @@
+'use client';
+import { Search as Search$1 } from './Search.js';
+import { SearchButton } from './SearchButton.js';
+import { SearchClear } from './SearchClear.js';
+import { SearchInput } from './SearchInput.js';
+
+/**
+ * Search field
+ *
+ * @example
+ * ```tsx
+ * <Search>
+ *  <Search.Input aria-label='Søk' />
+ *  <Search.Clear />
+ *  <Search.Button />
+ * </Search>
+ * ```
+ */
+const Search = Object.assign(Search$1, {
+    Clear: SearchClear,
+    Button: SearchButton,
+    Input: SearchInput,
+});
+Search.Clear.displayName = 'Search.Clear';
+Search.Button.displayName = 'Search.Button';
+Search.Input.displayName = 'Search.Input';
+
+export { Search, SearchButton, SearchClear, SearchInput };

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

@@ -1,18 +1,20 @@
 'use client';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { PadlockLockedFillIcon } from '@navikt/aksel-icons';
+import { jsx } from 'react/jsx-runtime';
 import cl from 'clsx/lite';
 import { forwardRef } from 'react';
-import { useSelect } from './useSelect.js';
-import { Label } from '../../Typography/Label/Label.js';
-import { omit } from '../../../utilities/omit/omit.js';
-import { ValidationMessage } from '../../Typography/ValidationMessage/ValidationMessage.js';
-import { Paragraph } from '../../Typography/Paragraph/Paragraph.js';
 
-const Select = forwardRef(function Select(props, ref) {
-    const { children, disabled = false, label, description, hideLabel = false, error, className, htmlSize = 0, ...rest } = props;
-    const { selectProps, descriptionId, errorId, readOnly, size = 'md', } = useSelect(props);
-    return (jsx(Paragraph, { asChild: true, size: size, children: jsxs("div", { className: cl('ds-select--container', readOnly && 'ds-select--readonly', error && 'ds-select--error'), children: [label && (jsxs(Label, { weight: 'medium', size: size, htmlFor: selectProps.id, className: cl('ds-select__label', hideLabel && 'ds-sr-only'), children: [readOnly && (jsx(PadlockLockedFillIcon, { "aria-hidden": true, className: 'ds-select__readonly__icon' })), label] })), description && (jsx(Paragraph, { asChild: true, size: size, children: jsx("div", { id: descriptionId, className: cl(`ds-select__description`, hideLabel && `ds-sr-only`), children: description }) })), jsx("div", { className: 'ds-select__wrapper', children: jsx("select", { disabled: disabled, ref: ref, size: htmlSize, className: cl('ds-select', `ds-select--${size}`, `ds-focus`, props.multiple && 'ds-select--multiple', className), ...omit(['size', 'error', 'errorId'], rest), ...omit(['readOnly', 'disabled'], selectProps), children: children }) }), error && (jsx("div", { id: errorId, className: 'ds-select__error-message', "aria-live": 'polite', "aria-relevant": 'additions removals', children: jsx(ValidationMessage, { size: size, children: error }) }))] }) }));
+const Select = forwardRef(function Select({ className, onKeyDown, onMouseDown, ...rest }, ref) {
+    return (jsx("select", { className: cl('ds-input', className), ref: ref, onKeyDown: (event) => {
+            if (event.key === 'Tab')
+                return;
+            if (rest.readOnly)
+                event.preventDefault(); // Make readonly work for select
+            onKeyDown?.(event);
+        }, onMouseDown: (event) => {
+            if (rest.readOnly)
+                event.preventDefault(); // Make readonly work for select
+            onMouseDown?.(event);
+        }, ...rest }));
 });
 
 export { Select };

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

@@ -3,9 +3,10 @@ import { Select as Select$1 } from './Select.js';
 import { SelectOptgroup } from './SelectOptgroup.js';
 import { SelectOption } from './SelectOption.js';
 
-const Select = Select$1;
-Select.Option = SelectOption;
-Select.Optgroup = SelectOptgroup;
+const Select = Object.assign(Select$1, {
+    Option: SelectOption,
+    Optgroup: SelectOptgroup,
+});
 Select.Option.displayName = 'Select.Option';
 Select.Optgroup.displayName = 'Select.Optgroup';
 

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

@@ -1,18 +1,17 @@
 'use client';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { PadlockLockedFillIcon } from '@navikt/aksel-icons';
-import cl from 'clsx/lite';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { useSwitch } from './useSwitch.js';
-import { Paragraph } from '../../Typography/Paragraph/Paragraph.js';
-import { omit } from '../../../utilities/omit/omit.js';
-import { Label } from '../../Typography/Label/Label.js';
+import { Field } from '../Field/index.js';
+import { Input } from '../Input/Input.js';
+import { Label } from '../../Label/Label.js';
 
-const Switch = forwardRef((props, ref) => {
-    const { children, description, position = 'left', className, ...rest } = props;
-    const { inputProps, descriptionId, size = 'md', readOnly, } = useSwitch(props);
-    return (jsx(Paragraph, { asChild: true, size: size, children: jsxs("div", { className: cl(`ds-switch`, `ds-switch--${size}`, inputProps.disabled && `ds-switch--disabled`, readOnly && `ds-switch--readonly`, className), children: [jsx("input", { className: `ds-switch__input`, disabled: inputProps.disabled, ref: ref, ...omit(['size', 'error'], rest), ...inputProps }), jsxs(Label, { className: cl(`ds-switch__label`, position === 'right' && `ds-switch__label--right`), htmlFor: inputProps.id, size: size, weight: 'regular', children: [jsx("span", { className: `ds-switch__track`, children: jsx("span", { className: `ds-switch__thumb` }) }), readOnly && (jsx(PadlockLockedFillIcon, { "aria-hidden": true, className: `ds-switch__readonly__icon` })), children && jsx("span", { children: children })] }), description && (jsx(Paragraph, { asChild: true, size: size, children: jsx("div", { id: descriptionId, className: `ds-switch__description`, children: description }) }))] }) }));
+/**
+ * Switch used to toggle options.
+ * @example
+ * <Switch label="I agree" value="agree" />
+ */
+const Switch = forwardRef(function Switch({ 'data-size': size, children, className, description, label, position, style, ...rest }, ref) {
+    return (jsxs(Field, { className: className, "data-position": position, "data-size": size, style: style, children: [jsx(Input, { type: 'checkbox', role: 'switch', ref: ref, ...rest }), !!label && jsx(Label, { weight: 'regular', children: label }), !!description && jsx("div", { "data-field": 'description', children: description })] }));
 });
-Switch.displayName = 'Switch';
 
 export { Switch };