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

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

@@ -7,16 +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 Paragraph = require('../Typography/Paragraph/Paragraph.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
@@ -44,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]);
@@ -61,34 +58,59 @@ 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(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.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 (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 }));
 });
 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/SkipLink/SkipLink.js

@@ -3,10 +3,10 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var cl = require('clsx/lite');
+var react = require('react');
 
-const SkipLink = ({ href, children, className, ...rest }) => {
-    return (jsxRuntime.jsx("a", { href: href, className: cl(`ds-sr-only`, 'ds-skiplink', className), ...rest, children: jsxRuntime.jsx("p", { className: 'ds-skiplink__content', children: children }) }));
-};
-SkipLink.displayName = 'SkipLink';
+const SkipLink = react.forwardRef(function SkipLink({ children, className, ...rest }, ref) {
+    return (jsxRuntime.jsx("a", { className: cl('ds-skiplink', className), ...rest, ref: ref, children: children }));
+});
 
 exports.SkipLink = SkipLink;

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

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

@@ -5,7 +5,6 @@ var jsxRuntime = require('react/jsx-runtime');
 var cl = require('clsx/lite');
 var react = require('react');
 var Tabs = require('./Tabs.js');
-var Paragraph = require('../Typography/Paragraph/Paragraph.js');
 
 /**
  * A single content item in a Tabs component.
@@ -15,9 +14,9 @@ var Paragraph = require('../Typography/Paragraph/Paragraph.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(Paragraph.Paragraph, { asChild: true, variant: 'short', size: size, children: jsxRuntime.jsx("div", { className: cl('ds-tabs__panel', className), ref: ref, ...rest, children: children }) })) }));
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: active && (jsxRuntime.jsx("div", { className: cl('ds-tabs__panel', className), ref: ref, ...rest, children: children })) }));
 });
 
 exports.TabsPanel = TabsPanel;

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

@@ -6,7 +6,6 @@ var cl = require('clsx/lite');
 var react = require('react');
 var RovingFocusItem = require('../../utilities/RovingFocus/RovingFocusItem.js');
 var Tabs = require('./Tabs.js');
-var Paragraph = require('../Typography/Paragraph/Paragraph.js');
 
 /**
  * A single item in a Tabs component.
@@ -16,7 +15,7 @@ var Paragraph = require('../Typography/Paragraph/Paragraph.js');
 const TabsTab = react.forwardRef(function TabsTab({ className, value, ...rest }, ref) {
     const tabs = react.useContext(Tabs.Context);
     const buttonId = `tab-${react.useId()}`;
-    return (jsxRuntime.jsx(RovingFocusItem.RovingFocusItem, { value: value, ...rest, asChild: true, children: jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, variant: 'short', size: tabs.size, children: jsxRuntime.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 (jsxRuntime.jsx(RovingFocusItem.RovingFocusItem, { value: value, ...rest, asChild: true, children: jsxRuntime.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' }) }));
 });
 
 exports.TabsTab = TabsTab;

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

@@ -4,15 +4,14 @@
 var jsxRuntime = require('react/jsx-runtime');
 var cl = require('clsx/lite');
 var react = require('react');
-var Paragraph = require('../Typography/Paragraph/Paragraph.js');
 
 /**
  * Use `Tag` to display a small piece of information.
  * @example
  * <Tag color='success'>Success</Tag>
  */
-const Tag = react.forwardRef(function Tag({ size = 'md', color = 'neutral', className, ...rest }, ref) {
-    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: 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,38 +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');
-var Paragraph = require('../Typography/Paragraph/Paragraph.js');
 
-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, {
@@ -55,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.jsx(Paragraph.Paragraph, { size: 'xs', asChild: true, children: jsxRuntime.jsxs("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 })] }) }) }))] }));
+    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 }) }))] }));
 });
-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/{Typography/ValidationMessage → 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, spacing, 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, { ref: ref, className: cl('ds-validation-message', `ds-error_message--${size}`, spacing && 'ds-validation-message--spacing', error && 'ds-validation-message--error', className), ...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('../../Typography/Paragraph/Paragraph.js');
-var omit = require('../../../utilities/omit/omit.js');
-var Label = require('../../Typography/Label/Label.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,15 +18,14 @@ 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);
     const portalRef = react.useRef(null);
     const listRef = react.useRef([]);
-    const listId = react.useId();
     const [inputValue, setInputValue] = react.useState(rest.inputValue || '');
     react.useEffect(() => {
         if (typeof rest.inputValue === 'string') {
@@ -179,7 +178,7 @@ const ComboboxComponent = react.forwardRef(({ value, initialValue = [], onValueC
             setListRef: (index, node) => {
                 listRef.current[index] = node;
             },
-        }, children: [jsxRuntime.jsxs("div", { className: cl('ds-combobox', `ds-combobox--${size}`, disabled && 'ds-combobox__disabled', className), style: style, ref: portalRef, children: [name && (jsxRuntime.jsx(ComboboxNative, { name: name, selectedOptions: selectedOptions, multiple: multiple })), jsxRuntime.jsx(ComboboxLabel, { label: label, description: description, size: size, readOnly: readOnly, hideLabel: hideLabel, formFieldProps: formFieldProps }), jsxRuntime.jsx(ComboboxInput, { ...omit.omit(['inputValue'], rest), hideClearButton: hideClearButton, listId: listId, error: error, hideChips: hideChips, handleKeyDown: handleKeyDown, "aria-busy": loading }), jsxRuntime.jsx(ComboboxError, { size: size, error: error, formFieldProps: formFieldProps })] }), open && (jsxRuntime.jsx(react$1.FloatingPortal, { root: portal ? null : portalRef, children: jsxRuntime.jsx(react$1.FloatingFocusManager, { context: context, initialFocus: -1, visuallyHiddenDismiss: true, children: jsxRuntime.jsxs("div", { id: listId, "aria-labelledby": formFieldProps.inputProps.id, "aria-autocomplete": 'list', tabIndex: -1, ...getFloatingProps({
+        }, children: [jsxRuntime.jsxs("div", { className: cl('ds-combobox', `ds-combobox--${size}`, disabled && 'ds-combobox__disabled', className), style: style, ref: portalRef, children: [name && (jsxRuntime.jsx(ComboboxNative, { name: name, selectedOptions: selectedOptions, multiple: multiple })), jsxRuntime.jsx(ComboboxLabel, { label: label, description: description, size: size, readOnly: readOnly, hideLabel: hideLabel, formFieldProps: formFieldProps }), jsxRuntime.jsx(ComboboxInput, { ...omit.omit(['inputValue'], rest), hideClearButton: hideClearButton, listId: context.floatingId, error: error, hideChips: hideChips, handleKeyDown: handleKeyDown, "aria-busy": loading }), jsxRuntime.jsx(ComboboxError, { size: size, error: error, formFieldProps: formFieldProps })] }), open && (jsxRuntime.jsx(react$1.FloatingPortal, { root: portal ? null : portalRef, children: jsxRuntime.jsx(react$1.FloatingFocusManager, { context: context, initialFocus: -1, visuallyHiddenDismiss: true, children: jsxRuntime.jsxs("div", { "aria-labelledby": formFieldProps.inputProps.id, "aria-autocomplete": 'list', tabIndex: -1, ...getFloatingProps({
                             ref: refs.setFloating,
                             style: {
                                 ...floatingStyles,
@@ -194,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('../../Typography/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

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