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

package/dist/cjs/components/Popover/Popover.js

@@ -7,15 +7,13 @@ var react$1 = require('@floating-ui/react');
 var reactSlot = require('@radix-ui/react-slot');
 var cl = require('clsx/lite');
 var react = require('react');
-var PopoverContext = require('./PopoverContext.js');
+var PopoverTriggerContext = require('./PopoverTriggerContext.js');
 
-const ARROW_HEIGHT = 7;
-const ARROW_GAP = 4;
-const Popover = react.forwardRef(function Popover({ id, className, onClose, onOpen, open, placement = 'top', size = 'md', variant = 'default', asChild = false, ...rest }, ref) {
+const Popover = react.forwardRef(function Popover({ id, className, onClose, onOpen, open, placement = 'top', autoPlacement = true, asChild = false, ...rest }, ref) {
     const Component = asChild ? reactSlot.Slot : 'div';
     const popoverRef = react.useRef(null);
     const mergedRefs = react$1.useMergeRefs([popoverRef, ref]);
-    const { popoverId, setPopoverId } = react.useContext(PopoverContext.Context);
+    const { popoverId, setPopoverId } = react.useContext(PopoverTriggerContext.Context);
     const [internalOpen, setInternalOpen] = react.useState(false);
     const controlledOpen = open ?? internalOpen;
     // NOTE: This code is purely to add React controlled component ability to Popover API
@@ -43,10 +41,10 @@ const Popover = react.forwardRef(function Popover({ id, className, onClose, onOp
             onClose?.();
         };
         popover?.togglePopover?.(controlledOpen);
-        document.addEventListener('click', handleClick);
+        document.addEventListener('click', handleClick, true); // Use capture to execute before React event API
         document.addEventListener('keydown', handleKeydown);
         return () => {
-            document.removeEventListener('click', handleClick);
+            document.removeEventListener('click', handleClick, true);
             document.removeEventListener('keydown', handleKeydown);
         };
     }, [controlledOpen]);
@@ -60,22 +58,27 @@ const Popover = react.forwardRef(function Popover({ id, className, onClose, onOp
                     placement,
                     strategy: 'fixed',
                     middleware: [
-                        dom.offset(ARROW_HEIGHT + ARROW_GAP), // TODO: Should this be configurable?
-                        dom.flip({ fallbackAxisSideDirection: 'start' }),
-                        dom.shift(),
+                        dom.offset((data) => {
+                            // get pseudo element arrow size
+                            const styles = getComputedStyle(data.elements.floating, '::before');
+                            return parseFloat(styles.height);
+                        }),
+                        ...(autoPlacement
+                            ? [dom.flip({ fallbackAxisSideDirection: 'start' }), dom.shift()]
+                            : []),
                         arrowPseudoElement,
                     ],
                 }).then(({ x, y }) => {
                     popover.style.translate = `${x}px ${y}px`;
                 });
             });
-    }, [controlledOpen, placement, id]);
+    }, [controlledOpen, placement, id, autoPlacement]);
     // Update context with id
     react.useEffect(() => {
         if (id)
             setPopoverId?.(id);
     }, [id]);
-    return (jsxRuntime.jsx(Component, { className: cl('ds-popover', className), "data-size": size, "data-variant": variant, id: id || popoverId, 
+    return (jsxRuntime.jsx(Component, { className: cl('ds-popover', className), id: id || popoverId, 
         // @ts-ignore @types/react-dom does not understand popover yet
         popover: 'manual', ref: mergedRefs, ...rest }));
 });
@@ -83,11 +86,31 @@ const arrowPseudoElement = {
     name: 'ArrowPseudoElement',
     fn(data) {
         const { elements, rects, placement } = data;
-        const arrowX = rects.reference.width / 2 + rects.reference.x - data.x;
-        const arrowY = rects.reference.height / 2 + rects.reference.y - data.y;
+        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`;
+        if (rects.reference.width > rects.floating.width) {
+            arrowX = `${Math.round(rects.floating.width / 2)}px`;
+        }
+        if (rects.reference.height > rects.floating.height) {
+            arrowY = `${Math.round(rects.floating.height / 2)}px`;
+        }
+        switch (placement.split('-')[0]) {
+            case 'top':
+                arrowY = '100%';
+                break;
+            case 'right':
+                arrowX = '0';
+                break;
+            case 'bottom':
+                arrowY = '0';
+                break;
+            case 'left':
+                arrowX = '100%';
+                break;
+        }
         elements.floating.setAttribute('data-placement', placement.split('-')[0]); // We only need top/left/right/bottom
-        elements.floating.style.setProperty('--ds-popover-arrow-x', `${arrowX}px`);
-        elements.floating.style.setProperty('--ds-popover-arrow-y', `${arrowY}px`);
+        elements.floating.style.setProperty('--ds-popover-arrow-x', arrowX);
+        elements.floating.style.setProperty('--ds-popover-arrow-y', arrowY);
         return data;
     },
 };

package/dist/cjs/components/Popover/PopoverTrigger.js

@@ -5,10 +5,10 @@ var jsxRuntime = require('react/jsx-runtime');
 var reactSlot = require('@radix-ui/react-slot');
 var react = require('react');
 var Button = require('../Button/Button.js');
-var PopoverContext = require('./PopoverContext.js');
+var PopoverTriggerContext = require('./PopoverTriggerContext.js');
 
 const PopoverTrigger = react.forwardRef(function PopoverTrigger({ id, asChild, ...rest }, ref) {
-    const { popoverId } = react.useContext(PopoverContext.Context);
+    const { popoverId } = react.useContext(PopoverTriggerContext.Context);
     const Component = asChild ? reactSlot.Slot : Button.Button;
     return jsxRuntime.jsx(Component, { ref: ref, popovertarget: popoverId, ...rest });
 });

package/dist/cjs/components/Popover/{PopoverContext.js → PopoverTriggerContext.js}

@@ -4,13 +4,13 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 
-const PopoverContext = ({ children }) => {
+const PopoverTriggerContext = ({ children, }) => {
     const randomPopoverId = react.useId();
     const [popoverId, setPopoverId] = react.useState(randomPopoverId);
     return (jsxRuntime.jsx(Context.Provider, { value: { popoverId, setPopoverId }, children: children }));
 };
-PopoverContext.displayName = 'PopoverContext';
+PopoverTriggerContext.displayName = 'PopoverTriggerContext';
 const Context = react.createContext({});
 
 exports.Context = Context;
-exports.PopoverContext = PopoverContext;
+exports.PopoverTriggerContext = PopoverTriggerContext;

package/dist/cjs/components/Popover/index.js

@@ -2,15 +2,15 @@
 'use strict';
 
 var Popover$1 = require('./Popover.js');
-var PopoverContext = require('./PopoverContext.js');
 var PopoverTrigger = require('./PopoverTrigger.js');
+var PopoverTriggerContext = require('./PopoverTriggerContext.js');
 
 const Popover = Popover$1.Popover;
-Popover.Context = PopoverContext.PopoverContext;
+Popover.TriggerContext = PopoverTriggerContext.PopoverTriggerContext;
 Popover.Trigger = PopoverTrigger.PopoverTrigger;
-Popover.Context.displayName = 'Popover.Context';
+Popover.TriggerContext.displayName = 'Popover.TriggerContext';
 Popover.Trigger.displayName = 'Popover.Trigger';
 
-exports.PopoverContext = PopoverContext.PopoverContext;
 exports.PopoverTrigger = PopoverTrigger.PopoverTrigger;
+exports.PopoverTriggerContext = PopoverTriggerContext.PopoverTriggerContext;
 exports.Popover = Popover;

package/dist/cjs/components/Table/Table.js

@@ -5,8 +5,8 @@ var jsxRuntime = require('react/jsx-runtime');
 var cl = require('clsx/lite');
 var react = require('react');
 
-const Table = react.forwardRef(function Table({ zebra = false, stickyHeader = false, border = false, hover = false, size = 'md', className, children, ...rest }, ref) {
-    return (jsxRuntime.jsx("table", { className: cl('ds-table', className), "data-border": border || undefined, "data-hover": hover || undefined, "data-size": size, "data-sticky-header": stickyHeader || undefined, "data-zebra": zebra || undefined, ref: ref, ...rest, children: children }));
+const Table = react.forwardRef(function Table({ zebra = false, stickyHeader = false, border = false, hover = false, className, children, ...rest }, ref) {
+    return (jsxRuntime.jsx("table", { className: cl('ds-table', className), "data-border": border || undefined, "data-hover": hover || undefined, "data-sticky-header": stickyHeader || undefined, "data-zebra": zebra || undefined, ref: ref, ...rest, children: children }));
 });
 
 exports.Table = Table;

package/dist/cjs/components/Table/TableFoot.js

@@ -0,0 +1,11 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+const TableFoot = react.forwardRef(function TableFoot(rest, ref) {
+    return jsxRuntime.jsx("tfoot", { ref: ref, ...rest });
+});
+
+exports.TableFoot = TableFoot;

package/dist/cjs/components/Table/index.js

@@ -4,25 +4,30 @@
 var Table$1 = require('./Table.js');
 var TableBody = require('./TableBody.js');
 var TableCell = require('./TableCell.js');
+var TableFoot = require('./TableFoot.js');
 var TableHead = require('./TableHead.js');
 var TableHeaderCell = require('./TableHeaderCell.js');
 var TableRow = require('./TableRow.js');
 
-const Table = Table$1.Table;
-Table.Head = TableHead.TableHead;
-Table.Body = TableBody.TableBody;
-Table.Row = TableRow.TableRow;
-Table.Cell = TableCell.TableCell;
-Table.HeaderCell = TableHeaderCell.TableHeaderCell;
+const Table = Object.assign(Table$1.Table, {
+    Head: TableHead.TableHead,
+    Body: TableBody.TableBody,
+    Row: TableRow.TableRow,
+    Cell: TableCell.TableCell,
+    HeaderCell: TableHeaderCell.TableHeaderCell,
+    Foot: TableFoot.TableFoot,
+});
 Table.displayName = 'Table';
 Table.Head.displayName = 'Table.Head';
 Table.Body.displayName = 'Table.Body';
 Table.Row.displayName = 'Table.Row';
 Table.Cell.displayName = 'Table.Cell';
 Table.HeaderCell.displayName = 'Table.HeaderCell';
+Table.Foot.displayName = 'Table.Foot';
 
 exports.TableBody = TableBody.TableBody;
 exports.TableCell = TableCell.TableCell;
+exports.TableFoot = TableFoot.TableFoot;
 exports.TableHead = TableHead.TableHead;
 exports.TableHeaderCell = TableHeaderCell.TableHeaderCell;
 exports.TableRow = TableRow.TableRow;

package/dist/cjs/components/Tabs/Tabs.js

@@ -22,7 +22,7 @@ const Context = react.createContext({});
  * </Tabs>
  * ```
  */
-const Tabs = react.forwardRef(function Tabs({ size = 'md', value, defaultValue, className, onChange, ...rest }, ref) {
+const Tabs = react.forwardRef(function Tabs({ value, defaultValue, className, onChange, ...rest }, ref) {
     const isControlled = value !== undefined;
     const [uncontrolledValue, setUncontrolledValue] = react.useState(defaultValue);
     let onValueChange = onChange;
@@ -37,8 +37,7 @@ const Tabs = react.forwardRef(function Tabs({ size = 'md', value, defaultValue,
             value,
             defaultValue,
             onChange: onValueChange,
-            size,
-        }, children: jsxRuntime.jsx("div", { className: cl('ds-tabs', className), "data-size": size, ref: ref, ...rest }) }));
+        }, children: jsxRuntime.jsx("div", { className: cl('ds-tabs', className), ref: ref, ...rest }) }));
 });
 
 exports.Context = Context;

package/dist/cjs/components/Tabs/TabsPanel.js

@@ -14,7 +14,7 @@ var Tabs = require('./Tabs.js');
  * ```
  */
 const TabsPanel = react.forwardRef(function TabsPanel({ children, value, className, ...rest }, ref) {
-    const { value: tabsValue, size } = react.useContext(Tabs.Context);
+    const { value: tabsValue } = react.useContext(Tabs.Context);
     const active = value === tabsValue;
     return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: active && (jsxRuntime.jsx("div", { className: cl('ds-tabs__panel', className), ref: ref, ...rest, children: children })) }));
 });

package/dist/cjs/components/Tag/Tag.js

@@ -10,8 +10,8 @@ var react = require('react');
  * @example
  * <Tag color='success'>Success</Tag>
  */
-const Tag = react.forwardRef(function Tag({ size = 'md', color = 'neutral', className, ...rest }, ref) {
-    return (jsxRuntime.jsx("span", { className: cl('ds-tag', className), "data-color": color, "data-size": size, ref: ref, ...rest }));
+const Tag = react.forwardRef(function Tag({ color = 'neutral', className, ...rest }, ref) {
+    return (jsxRuntime.jsx("span", { className: cl('ds-tag', className), "data-color": color, ref: ref, ...rest }));
 });
 
 exports.Tag = Tag;

package/dist/cjs/components/ToggleGroup/ToggleGroup.js

@@ -16,7 +16,7 @@ const ToggleGroupContext = react.createContext({});
  *   <ToggleGroup.Item value='3'>Toggle 3</ToggleGroup.Item>
  * </ToggleGroup>
  */
-const ToggleGroup = react.forwardRef(function ToggleGroup({ size = 'md', children, value, defaultValue, onChange, name, className, ...rest }, ref) {
+const ToggleGroup = react.forwardRef(function ToggleGroup({ children, value, defaultValue, onChange, name, className, ...rest }, ref) {
     const nameId = react.useId();
     const isControlled = value !== undefined;
     const [uncontrolledValue, setUncontrolledValue] = react.useState(defaultValue);
@@ -33,7 +33,6 @@ const ToggleGroup = react.forwardRef(function ToggleGroup({ size = 'md', childre
             defaultValue,
             name: name ?? `togglegroup-name-${nameId}`,
             onChange: onValueChange,
-            size,
         }, children: jsxRuntime.jsx(RovingFocusRoot.RovingFocusRoot, { asChild: true, activeValue: value, orientation: 'ambiguous', children: jsxRuntime.jsxs("div", { className: cl('ds-togglegroup', className), role: 'radiogroup', ref: ref, ...rest, children: [name && jsxRuntime.jsx("input", { type: 'hidden', name: name, value: value }), children] }) }) }));
 });
 

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

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

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

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

package/dist/cjs/components/Tooltip/Tooltip.js

@@ -3,37 +3,42 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var react$1 = require('@floating-ui/react');
+var reactSlot = require('@radix-ui/react-slot');
 var cl = require('clsx/lite');
 var react = require('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 = react.forwardRef(({ children, content, placement = 'top', delay = 150, open: userOpen, defaultOpen = false, portal = false, className, style, ...rest }, ref) => {
+const Tooltip = react.forwardRef(function Tooltip({ children, content, placement = 'top', delay = 150, open: userOpen, defaultOpen = false, portal = false, className, style, ...rest }, ref) {
     const [isOpen, setIsOpen] = react.useState(defaultOpen);
-    const Container = portal ? react$1.FloatingPortal : react.Fragment;
-    const arrowRef = react.useRef(null);
     const internalOpen = userOpen ?? isOpen;
+    const Container = portal ? react$1.FloatingPortal : react.Fragment;
     const { refs, floatingStyles, context } = react$1.useFloating({
         open: internalOpen,
         onOpenChange: setIsOpen,
         placement,
         whileElementsMounted: react$1.autoUpdate,
         middleware: [
-            react$1.offset(ARROW_HEIGHT + ARROW_GAP),
+            react$1.offset((data) => {
+                // get pseudo element arrow size
+                const styles = getComputedStyle(data.elements.floating, '::before');
+                return parseFloat(styles.height);
+            }),
             react$1.flip({
                 fallbackAxisSideDirection: 'start',
             }),
             react$1.shift(),
-            react$1.arrow({
-                element: arrowRef,
-            }),
+            arrowPseudoElement,
         ],
     });
     const { styles: animationStyles } = react$1.useTransitionStyles(context, {
@@ -54,20 +59,45 @@ const Tooltip = react.forwardRef(({ children, content, placement = 'top', delay
             .ref,
         refs.setReference,
     ]);
-    if (!children ||
-        children?.type === react.Fragment ||
-        children === react.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' : reactSlot.Slot;
+    /* Make sure it is valid */
+    if (typeof children !== 'string' && children.type === react.Fragment) {
+        console.error('<Tooltip> children needs to be a single ReactElement that can receive a ref and not: <Fragment/> | <></>');
         return null;
     }
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [react.cloneElement(children, getReferenceProps({
-                ref: childMergedRef,
-            })), internalOpen && (jsxRuntime.jsx(Container, { children: jsxRuntime.jsxs("div", { ref: refs.setFloating, style: { ...floatingStyles, ...animationStyles, ...style }, role: 'tooltip', ...getFloatingProps({
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ChildContainer, { ...getReferenceProps({
+                    ref: childMergedRef,
+                }), children: children }), internalOpen && (jsxRuntime.jsx(Container, { children: jsxRuntime.jsx("div", { ref: refs.setFloating, style: { ...floatingStyles, ...animationStyles, ...style }, role: 'tooltip', ...getFloatingProps({
                         className: cl('ds-tooltip', className),
                         ref: mergedRef,
                         ...rest,
-                    }), children: [content, jsxRuntime.jsx(react$1.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;
+    },
+};
 
 exports.Tooltip = Tooltip;

package/dist/cjs/components/ValidationMessage/ValidationMessage.js

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

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

@@ -2,27 +2,19 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react$1 = require('@floating-ui/react');
-var cl = require('clsx/lite');
 var react = require('react');
-var useCheckbox = require('./useCheckbox.js');
-var Paragraph = require('../../Paragraph/Paragraph.js');
-var omit = require('../../../utilities/omit/omit.js');
+var index = require('../Field/index.js');
+var Input = require('../Input/Input.js');
 var Label = require('../../Label/Label.js');
+var ValidationMessage = require('../../ValidationMessage/ValidationMessage.js');
 
-const Checkbox = react.forwardRef((props, ref) => {
-    const { children, description, className, style, ...rest } = props;
-    const { inputProps, descriptionId, hasError, size = 'md', readOnly, } = useCheckbox.useCheckbox(props);
-    const inputRef = react$1.useMergeRefs([
-        ref,
-        (el) => {
-            if (el) {
-                el.indeterminate = rest.indeterminate ?? false;
-            }
-        },
-    ]);
-    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsxs("div", { className: cl('ds-checkbox', `ds-checkbox--${size}`, hasError && `ds-checkbox--error`, readOnly && `ds-checkbox--readonly`, className), style: style, children: [jsxRuntime.jsx("input", { className: `ds-checkbox__input`, ref: inputRef, ...omit.omit(['size', 'error', 'indeterminate'], rest), ...inputProps, type: 'checkbox', disabled: inputProps.disabled, "aria-checked": rest.indeterminate ? 'mixed' : inputProps.checked }), children && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Label.Label, { className: cl(`ds-checkbox__label`), htmlFor: inputProps.id, size: size, weight: 'regular', children: jsxRuntime.jsx("span", { children: children }) }), description && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.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 = react.forwardRef(function Checkbox({ 'data-size': size, children, label, description, validation, ...rest }, ref) {
+    return (jsxRuntime.jsxs(index.Field, { "data-size": size, children: [jsxRuntime.jsx(Input.Input, { type: 'checkbox', ref: ref, ...rest }), !!label && jsxRuntime.jsx(Label.Label, { weight: 'regular', children: label }), !!description && jsxRuntime.jsx("div", { "data-field": 'description', children: description }), !!validation && jsxRuntime.jsx(ValidationMessage.ValidationMessage, { children: validation })] }));
 });
-Checkbox.displayName = 'Checkbox';
 
 exports.Checkbox = Checkbox;

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

@@ -18,9 +18,9 @@ var useCombobox = require('./useCombobox.js');
 var useComboboxKeyboard = require('./useComboboxKeyboard.js');
 var useFloatingCombobox = require('./useFloatingCombobox.js');
 var utilities = require('./utilities.js');
-var Spinner = require('../../loaders/Spinner/Spinner.js');
 var useDebounceCallback = require('../../../utilities/hooks/useDebounceCallback/useDebounceCallback.js');
 var omit = require('../../../utilities/omit/omit.js');
+var Spinner = require('../../loaders/Spinner/Spinner.js');
 
 const ComboboxComponent = react.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 = react.useRef(null);
@@ -193,7 +193,7 @@ const ComboboxComponent = react.forwardRef(({ value, initialValue = [], onValueC
                                         left: 0,
                                         width: '100%',
                                         transform: `translateY(${virtualRow.start}px)`,
-                                    }, children: filteredOptionsChildren[virtualRow.index] }, virtualRow.index))) })), loading ? (jsxRuntime.jsxs(Custom.ComboboxCustom, { className: 'ds-combobox__loading', children: [jsxRuntime.jsx(Spinner.Spinner, { title: 'Laster', size: 'sm' }), loadingLabel] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [restChildren, !virtual && filteredOptionsChildren] }))] }) }) }))] }));
+                                    }, children: filteredOptionsChildren[virtualRow.index] }, virtualRow.index))) })), loading ? (jsxRuntime.jsxs(Custom.ComboboxCustom, { className: 'ds-combobox__loading', children: [jsxRuntime.jsx(Spinner.Spinner, { "aria-label": 'Laster', "data-size": 'sm' }), loadingLabel] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [restChildren, !virtual && filteredOptionsChildren] }))] }) }) }))] }));
 });
 const Combobox = react.forwardRef((props, ref) => (jsxRuntime.jsx(ComboboxIdContext.ComboboxIdProvider, { children: jsxRuntime.jsx(ComboboxComponent, { ...props, ref: ref }) })));
 Combobox.displayName = 'Combobox';

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

@@ -8,8 +8,8 @@ var cl = require('clsx/lite');
 var react = require('react');
 var ComboboxContext = require('./ComboboxContext.js');
 var ComboboxIdContext = require('./ComboboxIdContext.js');
-var Label = require('../../Label/Label.js');
 var omit = require('../../../utilities/omit/omit.js');
+var Label = require('../../Label/Label.js');
 
 const ComboboxCustom = react.forwardRef(({ asChild, interactive, id, className, ...rest }, ref) => {
     if (interactive && !id) {
@@ -30,7 +30,7 @@ const ComboboxCustom = react.forwardRef(({ asChild, interactive, id, className,
         },
         ref,
     ]);
-    return (jsxRuntime.jsx(Label.Label, { size: size, asChild: true, children: jsxRuntime.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.omit(['interactive'], rest), ...omit.omit(['onClick', 'onPointerLeave'], getItemProps()) }) }));
+    return (jsxRuntime.jsx(Label.Label, { "data-size": size, asChild: true, children: jsxRuntime.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.omit(['interactive'], rest), ...omit.omit(['onClick', 'onPointerLeave'], getItemProps()) }) }));
 });
 
 exports.ComboboxCustom = ComboboxCustom;

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

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

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

@@ -24,10 +24,12 @@ const ComboboxOption = react.memo(react.forwardRef(({ value, description, childr
     }
     const { size, multiple, getItemProps } = context;
     const props = getItemProps();
-    return (jsxRuntime.jsx(Label.Label, { size: 'md', asChild: true, children: jsxRuntime.jsxs("button", { ref: ref, id: id, role: 'option', type: 'button', "aria-selected": !!selected, "aria-labelledby": labelId, tabIndex: -1, onClick: (e) => {
+    return (jsxRuntime.jsx(Label.Label, { "data-size": 'md', asChild: true, children: jsxRuntime.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.omit(['displayValue'], rest), ...omit.omit(['onClick', 'onPointerLeave'], props), children: [jsxRuntime.jsx(Label.Label, { asChild: true, size: size, children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(SelectedIcon.SelectedIcon, { multiple: multiple, selected: !!selected }) }) }), jsxRuntime.jsxs(Label.Label, { className: 'ds-combobox__option__label', size: size, id: labelId, children: [children, description && (jsxRuntime.jsx(Description, { children: description }))] })] }) }));
+            }, className: cl('ds-combobox__option', active && 'ds-combobox__option--active', multiple && 'ds-combobox__option--multiple', className), ...omit.omit(['displayValue'], rest), ...omit.omit(['onClick', 'onPointerLeave'], props), children: [jsxRuntime.jsx(Label.Label, { asChild: true, "data-size": size, children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(SelectedIcon.SelectedIcon, { multiple: multiple, selected: !!selected }) }) }), jsxRuntime.jsxs(Label.Label, { className: 'ds-combobox__option__label', "data-size": size, id: labelId, children: [children, description && (jsxRuntime.jsx(Description, { children: description }))] })] }) }));
 }));
 ComboboxOption.displayName = 'ComboboxOption';
 function isComboboxOption(child) {

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

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

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

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

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

@@ -70,7 +70,7 @@ const ComboboxInput = ({ hideClearButton, listId, error, hideChips, handleKeyDow
             }
         },
     });
-    return (jsxRuntime.jsx(Paragraph.Paragraph, { size: size, asChild: true, children: jsxRuntime.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: [jsxRuntime.jsxs("div", { className: 'ds-combobox__chip-and-input', children: [multiple && !hideChips && jsxRuntime.jsx(ComboboxChips, {}), jsxRuntime.jsx(Paragraph.Paragraph, { size: size, asChild: true, children: jsxRuntime.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.omit(['style', 'className'], rest), ...formFieldProps.inputProps, className: 'ds-combobox__input', onChange: (e) => {
+    return (jsxRuntime.jsx(Paragraph.Paragraph, { "data-size": size, asChild: true, children: jsxRuntime.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: [jsxRuntime.jsxs("div", { className: 'ds-combobox__chip-and-input', children: [multiple && !hideChips && jsxRuntime.jsx(ComboboxChips, {}), jsxRuntime.jsx(Paragraph.Paragraph, { "data-size": size, asChild: true, children: jsxRuntime.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.omit(['style', 'className'], rest), ...formFieldProps.inputProps, className: 'ds-combobox__input', onChange: (e) => {
                                     onChange(e);
                                     !open && setOpen(true);
                                     rest.onChange?.(e);

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

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

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

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

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

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