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

package/dist/esm/components/Popover/Popover.js

@@ -5,12 +5,9 @@ import { useMergeRefs } from '@floating-ui/react';
 import { Slot } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
 import { forwardRef, useRef, useContext, useState, useEffect } from 'react';
-import { Context } from './PopoverContext.js';
-import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
+import { Context } from './PopoverTriggerContext.js';
 
-const ARROW_HEIGHT = 7;
-const ARROW_GAP = 4;
-const Popover = forwardRef(function Popover({ id, className, onClose, onOpen, open, placement = 'top', size = 'md', variant = 'default', asChild = false, ...rest }, ref) {
+const Popover = forwardRef(function Popover({ id, className, onClose, onOpen, open, placement = 'top', autoPlacement = true, asChild = false, ...rest }, ref) {
     const Component = asChild ? Slot : 'div';
     const popoverRef = useRef(null);
     const mergedRefs = useMergeRefs([popoverRef, ref]);
@@ -42,10 +39,10 @@ const Popover = forwardRef(function Popover({ id, className, onClose, onOpen, op
             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]);
@@ -59,34 +56,59 @@ const Popover = forwardRef(function Popover({ id, className, onClose, onOpen, op
                     placement,
                     strategy: 'fixed',
                     middleware: [
-                        offset(ARROW_HEIGHT + ARROW_GAP), // TODO: Should this be configurable?
-                        flip({ fallbackAxisSideDirection: 'start' }),
-                        shift(),
+                        offset((data) => {
+                            // get pseudo element arrow size
+                            const styles = getComputedStyle(data.elements.floating, '::before');
+                            return parseFloat(styles.height);
+                        }),
+                        ...(autoPlacement
+                            ? [flip({ fallbackAxisSideDirection: 'start' }), shift()]
+                            : []),
                         arrowPseudoElement,
                     ],
                 }).then(({ x, y }) => {
                     popover.style.translate = `${x}px ${y}px`;
                 });
             });
-    }, [controlledOpen, placement, id]);
+    }, [controlledOpen, placement, id, autoPlacement]);
     // Update context with id
     useEffect(() => {
         if (id)
             setPopoverId?.(id);
     }, [id]);
-    return (jsx(Paragraph, { asChild: true, size: size, children: jsx(Component, { className: cl('ds-popover', className), "data-size": size, "data-variant": variant, id: id || popoverId, 
-            // @ts-ignore @types/react-dom does not understand popover yet
-            popover: 'manual', ref: mergedRefs, ...rest }) }));
+    return (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 }));
 });
 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/esm/components/Popover/PopoverTrigger.js

@@ -3,7 +3,7 @@ import { jsx } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
 import { forwardRef, useContext } from 'react';
 import { Button } from '../Button/Button.js';
-import { Context } from './PopoverContext.js';
+import { Context } from './PopoverTriggerContext.js';
 
 const PopoverTrigger = forwardRef(function PopoverTrigger({ id, asChild, ...rest }, ref) {
     const { popoverId } = useContext(Context);

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

@@ -2,12 +2,12 @@
 import { jsx } from 'react/jsx-runtime';
 import { useId, useState, createContext } from 'react';
 
-const PopoverContext = ({ children }) => {
+const PopoverTriggerContext = ({ children, }) => {
     const randomPopoverId = useId();
     const [popoverId, setPopoverId] = useState(randomPopoverId);
     return (jsx(Context.Provider, { value: { popoverId, setPopoverId }, children: children }));
 };
-PopoverContext.displayName = 'PopoverContext';
+PopoverTriggerContext.displayName = 'PopoverTriggerContext';
 const Context = createContext({});
 
-export { Context, PopoverContext };
+export { Context, PopoverTriggerContext };

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

@@ -1,12 +1,12 @@
 'use client';
 import { Popover as Popover$1 } from './Popover.js';
-import { PopoverContext } from './PopoverContext.js';
 import { PopoverTrigger } from './PopoverTrigger.js';
+import { PopoverTriggerContext } from './PopoverTriggerContext.js';
 
 const Popover = Popover$1;
-Popover.Context = PopoverContext;
+Popover.TriggerContext = PopoverTriggerContext;
 Popover.Trigger = PopoverTrigger;
-Popover.Context.displayName = 'Popover.Context';
+Popover.TriggerContext.displayName = 'Popover.TriggerContext';
 Popover.Trigger.displayName = 'Popover.Trigger';
 
-export { Popover, PopoverContext, PopoverTrigger };
+export { Popover, PopoverTrigger, PopoverTriggerContext };

package/dist/esm/components/SkipLink/SkipLink.js

@@ -1,10 +1,10 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import cl from 'clsx/lite';
+import { forwardRef } from 'react';
 
-const SkipLink = ({ href, children, className, ...rest }) => {
-    return (jsx("a", { href: href, className: cl(`ds-sr-only`, 'ds-skiplink', className), ...rest, children: jsx("p", { className: 'ds-skiplink__content', children: children }) }));
-};
-SkipLink.displayName = 'SkipLink';
+const SkipLink = forwardRef(function SkipLink({ children, className, ...rest }, ref) {
+    return (jsx("a", { className: cl('ds-skiplink', className), ...rest, ref: ref, children: children }));
+});
 
 export { SkipLink };

package/dist/esm/components/Table/Table.js

@@ -2,10 +2,9 @@
 import { jsx } from 'react/jsx-runtime';
 import cl from 'clsx/lite';
 import { forwardRef } from 'react';
-import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
 
-const Table = forwardRef(function Table({ zebra = false, stickyHeader = false, border = false, hover = false, size = 'md', className, children, ...rest }, ref) {
-    return (jsx(Paragraph, { asChild: true, size: size, children: 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 = forwardRef(function Table({ zebra = false, stickyHeader = false, border = false, hover = false, className, children, ...rest }, ref) {
+    return (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 }));
 });
 
 export { Table };

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

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

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

@@ -2,21 +2,25 @@
 import { Table as Table$1 } from './Table.js';
 import { TableBody } from './TableBody.js';
 import { TableCell } from './TableCell.js';
+import { TableFoot } from './TableFoot.js';
 import { TableHead } from './TableHead.js';
 import { TableHeaderCell } from './TableHeaderCell.js';
 import { TableRow } from './TableRow.js';
 
-const Table = Table$1;
-Table.Head = TableHead;
-Table.Body = TableBody;
-Table.Row = TableRow;
-Table.Cell = TableCell;
-Table.HeaderCell = TableHeaderCell;
+const Table = Object.assign(Table$1, {
+    Head: TableHead,
+    Body: TableBody,
+    Row: TableRow,
+    Cell: TableCell,
+    HeaderCell: TableHeaderCell,
+    Foot: 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';
 
-export { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow };
+export { Table, TableBody, TableCell, TableFoot, TableHead, TableHeaderCell, TableRow };

package/dist/esm/components/Tabs/Tabs.js

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

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

@@ -3,7 +3,6 @@ import { jsx, Fragment } from 'react/jsx-runtime';
 import cl from 'clsx/lite';
 import { forwardRef, useContext } from 'react';
 import { Context } from './Tabs.js';
-import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
 
 /**
  * A single content item in a Tabs component.
@@ -13,9 +12,9 @@ import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
  * ```
  */
 const TabsPanel = forwardRef(function TabsPanel({ children, value, className, ...rest }, ref) {
-    const { value: tabsValue, size } = useContext(Context);
+    const { value: tabsValue } = useContext(Context);
     const active = value === tabsValue;
-    return (jsx(Fragment, { children: active && (jsx(Paragraph, { asChild: true, variant: 'short', size: size, children: jsx("div", { className: cl('ds-tabs__panel', className), ref: ref, ...rest, children: children }) })) }));
+    return (jsx(Fragment, { children: active && (jsx("div", { className: cl('ds-tabs__panel', className), ref: ref, ...rest, children: children })) }));
 });
 
 export { TabsPanel };

package/dist/esm/components/Tabs/TabsTab.js

@@ -4,7 +4,6 @@ import cl from 'clsx/lite';
 import { forwardRef, useContext, useId } from 'react';
 import { RovingFocusItem } from '../../utilities/RovingFocus/RovingFocusItem.js';
 import { Context } from './Tabs.js';
-import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
 
 /**
  * A single item in a Tabs component.
@@ -14,7 +13,7 @@ import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
 const TabsTab = forwardRef(function TabsTab({ className, value, ...rest }, ref) {
     const tabs = useContext(Context);
     const buttonId = `tab-${useId()}`;
-    return (jsx(RovingFocusItem, { value: value, ...rest, asChild: true, children: jsx(Paragraph, { asChild: true, variant: 'short', size: tabs.size, children: jsx("button", { ...rest, "aria-selected": tabs.value === value, className: cl('ds-tabs__tab', className), id: buttonId, onClick: () => tabs.onChange?.(value), ref: ref, role: 'tab', type: 'button' }) }) }));
+    return (jsx(RovingFocusItem, { value: value, ...rest, asChild: true, children: jsx("button", { ...rest, "aria-selected": tabs.value === value, className: cl('ds-tabs__tab', className), id: buttonId, onClick: () => tabs.onChange?.(value), ref: ref, role: 'tab', type: 'button' }) }));
 });
 
 export { TabsTab };

package/dist/esm/components/Tag/Tag.js

@@ -2,15 +2,14 @@
 import { jsx } from 'react/jsx-runtime';
 import cl from 'clsx/lite';
 import { forwardRef } from 'react';
-import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
 
 /**
  * Use `Tag` to display a small piece of information.
  * @example
  * <Tag color='success'>Success</Tag>
  */
-const Tag = forwardRef(function Tag({ size = 'md', color = 'neutral', className, ...rest }, ref) {
-    return (jsx(Paragraph, { asChild: true, size: size, children: jsx("span", { className: cl('ds-tag', className), "data-color": color, "data-size": size, ref: ref, ...rest }) }));
+const Tag = forwardRef(function Tag({ color = 'neutral', className, ...rest }, ref) {
+    return (jsx("span", { className: cl('ds-tag', className), "data-color": color, ref: ref, ...rest }));
 });
 
 export { Tag };

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

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

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,38 +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 { Paragraph } from '../Typography/Paragraph/Paragraph.js';
+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, {
@@ -53,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: jsx(Paragraph, { size: 'xs', asChild: true, children: jsxs("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 })] }) }) }))] }));
+    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 }) }))] }));
 });
-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/{Typography/ValidationMessage → 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, spacing, asChild, error = true, ...rest }, ref) {
+const ValidationMessage = forwardRef(function ValidationMessage({ className, asChild, error = true, ...rest }, ref) {
     const Component = asChild ? Slot : 'div';
-    return (jsx(Component, { ref: ref, className: cl('ds-validation-message', `ds-error_message--${size}`, spacing && 'ds-validation-message--spacing', error && 'ds-validation-message--error', className), ...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 '../../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 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

@@ -3,7 +3,7 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import cl from 'clsx/lite';
-import { forwardRef, useRef, useId, useState, useEffect } from 'react';
+import { forwardRef, useRef, useState, useEffect } from 'react';
 import { useFormField } from '../useFormField.js';
 import { ComboboxContext } from './ComboboxContext.js';
 import { ComboboxIdProvider } from './ComboboxIdContext.js';
@@ -16,15 +16,14 @@ 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);
     const portalRef = useRef(null);
     const listRef = useRef([]);
-    const listId = useId();
     const [inputValue, setInputValue] = useState(rest.inputValue || '');
     useEffect(() => {
         if (typeof rest.inputValue === 'string') {
@@ -177,7 +176,7 @@ const ComboboxComponent = forwardRef(({ value, initialValue = [], onValueChange,
             setListRef: (index, node) => {
                 listRef.current[index] = node;
             },
-        }, children: [jsxs("div", { className: cl('ds-combobox', `ds-combobox--${size}`, disabled && 'ds-combobox__disabled', className), style: style, ref: portalRef, children: [name && (jsx(ComboboxNative, { name: name, selectedOptions: selectedOptions, multiple: multiple })), jsx(ComboboxLabel, { label: label, description: description, size: size, readOnly: readOnly, hideLabel: hideLabel, formFieldProps: formFieldProps }), jsx(ComboboxInput, { ...omit(['inputValue'], rest), hideClearButton: hideClearButton, listId: listId, error: error, hideChips: hideChips, handleKeyDown: handleKeyDown, "aria-busy": loading }), jsx(ComboboxError, { size: size, error: error, formFieldProps: formFieldProps })] }), open && (jsx(FloatingPortal, { root: portal ? null : portalRef, children: jsx(FloatingFocusManager, { context: context, initialFocus: -1, visuallyHiddenDismiss: true, children: jsxs("div", { id: listId, "aria-labelledby": formFieldProps.inputProps.id, "aria-autocomplete": 'list', tabIndex: -1, ...getFloatingProps({
+        }, children: [jsxs("div", { className: cl('ds-combobox', `ds-combobox--${size}`, disabled && 'ds-combobox__disabled', className), style: style, ref: portalRef, children: [name && (jsx(ComboboxNative, { name: name, selectedOptions: selectedOptions, multiple: multiple })), jsx(ComboboxLabel, { label: label, description: description, size: size, readOnly: readOnly, hideLabel: hideLabel, formFieldProps: formFieldProps }), jsx(ComboboxInput, { ...omit(['inputValue'], rest), hideClearButton: hideClearButton, listId: context.floatingId, error: error, hideChips: hideChips, handleKeyDown: handleKeyDown, "aria-busy": loading }), jsx(ComboboxError, { size: size, error: error, formFieldProps: formFieldProps })] }), open && (jsx(FloatingPortal, { root: portal ? null : portalRef, children: jsx(FloatingFocusManager, { context: context, initialFocus: -1, visuallyHiddenDismiss: true, children: jsxs("div", { "aria-labelledby": formFieldProps.inputProps.id, "aria-autocomplete": 'list', tabIndex: -1, ...getFloatingProps({
                             ref: refs.setFloating,
                             style: {
                                 ...floatingStyles,
@@ -192,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 '../../Typography/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

@@ -3,7 +3,7 @@ import { jsx } from 'react/jsx-runtime';
 import cl from 'clsx/lite';
 import { forwardRef, useContext } from 'react';
 import { ComboboxContext } from './ComboboxContext.js';
-import { Label } from '../../Typography/Label/Label.js';
+import { Label } from '../../Label/Label.js';
 
 const ComboboxEmpty = forwardRef(({ children, className, ...rest }, ref) => {
     const context = useContext(ComboboxContext);
@@ -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

@@ -7,7 +7,7 @@ import { ComboboxContext } from '../ComboboxContext.js';
 import ComboboxOptionDescription from './Description.js';
 import { SelectedIcon } from './SelectedIcon.js';
 import { useComboboxOption } from './useComboboxOption.js';
-import { Label } from '../../../Typography/Label/Label.js';
+import { Label } from '../../../Label/Label.js';
 
 const ComboboxOption = memo(forwardRef(({ value, description, children, className, ...rest }, forwardedRef) => {
     const labelId = useId();
@@ -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) {