@digdir/designsystemet-react 1.11.1 → 1.12.1

package/dist/esm/components/suggestion/suggestion-option.js

@@ -1,6 +1,7 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
+import '@digdir/designsystemet-web';
 
 /**
  * A component for rendering individual options in the Suggestion list.
@@ -15,7 +16,8 @@ import { forwardRef } from 'react';
  * </Suggestion>
  */
 const SuggestionOption = forwardRef(function SuggestionOption({ className, ...rest }, ref) {
-    return (jsx("u-option", { class: className, ref: ref, ...rest }));
+    return (jsx("u-option", { class: className, ref: ref, suppressHydrationWarning // Since <u-option> adds attributes
+        : true, ...rest }));
 });
 
 export { SuggestionOption };

package/dist/esm/components/suggestion/suggestion.js

@@ -1,10 +1,9 @@
 'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useRef, useId, useState, useEffect, useCallback, createContext } from 'react';
-import '@u-elements/u-combobox';
 import cl from 'clsx/lite';
+import { forwardRef, useRef, useId, useState, useEffect, useCallback, createContext } from 'react';
 import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
-import { Chip as ChipComponent } from '../chip/index.js';
+import '@digdir/designsystemet-web';
 
 const text = (el) => el.textContent?.trim() || '';
 const sanitizeItems = (values = []) => typeof values === 'string'
@@ -22,11 +21,11 @@ const nextItems = (data, prev, multiple) => {
 };
 const defaultFilter = ({ label, input }) => label.toLowerCase().includes(input.value.trim().toLowerCase());
 const Suggestion = forwardRef(function Suggestion({ children, className, creatable = false, defaultSelected, filter = true, multiple = false, name, onBeforeMatch, onSelectedChange, renderSelected = ({ label }) => label, selected, ...rest }, ref) {
-    const uComboboxRef = useRef(null);
+    const dsSuggestionRef = useRef(null);
     const genId = useId();
     const selectId = rest.id ? `${rest.id}-select` : genId;
     const isControlled = selected !== undefined;
-    const mergedRefs = useMergeRefs([ref, uComboboxRef]);
+    const mergedRefs = useMergeRefs([ref, dsSuggestionRef]);
     const [isEmpty, setIsEmpty] = useState(false);
     const [defaultItems, setDefaultItems] = useState(sanitizeItems(defaultSelected));
     const selectedItems = selected ? sanitizeItems(selected) : defaultItems;
@@ -43,7 +42,7 @@ const Suggestion = forwardRef(function Suggestion({ children, className, creatab
      * Listerners and handling of adding/removing
      */
     useEffect(() => {
-        const combobox = uComboboxRef.current;
+        const combobox = dsSuggestionRef.current;
         const beforeChange = (event) => {
             event.preventDefault();
             const multiple = combobox?.multiple;
@@ -58,13 +57,13 @@ const Suggestion = forwardRef(function Suggestion({ children, className, creatab
     }, [isControlled]);
     // Before match event listener
     useEffect(() => {
-        const combobox = uComboboxRef.current;
+        const combobox = dsSuggestionRef.current;
         const beforeMatch = (e) => onBeforeMatch?.(e);
         combobox?.addEventListener('comboboxbeforematch', beforeMatch);
         return () => combobox?.removeEventListener('comboboxbeforematch', beforeMatch);
     }, [onBeforeMatch]);
     const handleFilter = useCallback(() => {
-        const { control: input, options = [] } = uComboboxRef?.current || {};
+        const { control: input, options = [] } = dsSuggestionRef?.current || {};
         const filterFn = filter === true ? defaultFilter : filter;
         let disabled = 0;
         let index = 0;
@@ -84,7 +83,8 @@ const Suggestion = forwardRef(function Suggestion({ children, className, creatab
             }
         setIsEmpty(index === disabled);
     }, [filter]);
-    return (jsx(SuggestionContext.Provider, { value: { isEmpty, handleFilter, uComboboxRef }, children: jsxs("u-combobox", { "data-multiple": multiple || undefined, "data-creatable": creatable || undefined, class: cl('ds-suggestion', className), ref: mergedRefs, ...rest, children: [selectedItems.map((item) => (jsx(ChipComponent.Removable, { value: item.value, asChild: true, children: jsx("data", { children: renderSelected(item) }) }, item.value))), children, !!name && (jsx("select", { name: name, multiple: true, hidden: true, id: selectId }))] }) }));
+    return (jsx(SuggestionContext.Provider, { value: { isEmpty, handleFilter, dsSuggestionRef }, children: jsxs("ds-suggestion", { "data-multiple": multiple || undefined, "data-creatable": creatable || undefined, class: cl('ds-suggestion', className), ref: mergedRefs, suppressHydrationWarning // Since <ds-suggestion> adds attributes
+            : true, ...rest, children: [selectedItems.map((item) => (jsx("data", { value: item.value, children: renderSelected(item) }, item.value))), children, !!name && (jsx("select", { name: name, multiple: true, hidden: true, id: selectId }))] }) }));
 });
 const SuggestionContext = createContext({
     handleFilter: () => undefined,

package/dist/esm/components/tabs/tabs-list.js

@@ -1,9 +1,7 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useContext } from 'react';
-import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
-import { RovingFocusRoot } from '../../utilities/roving-focus/roving-focus-root.js';
-import { Context } from './tabs.js';
+import '@digdir/designsystemet-web';
+import { forwardRef } from 'react';
 
 /**
  * The container for all `Tab` components.
@@ -14,10 +12,9 @@ import { Context } from './tabs.js';
  *  <TabsTab value='2'>Tab 2</TabsTab>
  * </TabsList>
  */
-const TabsList = forwardRef(function TabsList({ children, ...rest }, ref) {
-    const { value, tablistRef } = useContext(Context);
-    const mergedRefs = useMergeRefs([ref, tablistRef]);
-    return (jsx(RovingFocusRoot, { role: 'tablist', activeValue: value, orientation: 'ambiguous', ref: mergedRefs, ...rest, children: children }));
+const TabsList = forwardRef(function TabsList({ className, children, ...rest }, ref) {
+    return (jsx("ds-tablist", { suppressHydrationWarning // Since <ds-tablist> adds attributes
+        : true, ref: ref, class: className, ...rest, children: children }));
 });
 
 export { TabsList };

package/dist/esm/components/tabs/tabs-panel.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useContext, useId, useState, useRef, useEffect } from 'react';
-import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
+import '@digdir/designsystemet-web';
+import { forwardRef, useContext } from 'react';
 import { Context } from './tabs.js';
 
 /**
@@ -10,33 +10,10 @@ import { Context } from './tabs.js';
  * @example
  * <TabsPanel value='1'>content 1</TabsPanel>
  */
-const TabsPanel = forwardRef(function TabsPanel({ children, value, id, ...rest }, ref) {
-    const { value: tabsValue, tablistRef, setPanelButtonMap, } = useContext(Context);
-    const active = value === tabsValue;
-    const generatedId = useId();
-    const panelId = id ?? `tabpanel-${generatedId}`;
-    const [hasTabbableElement, setHasTabbableElement] = useState(false);
-    const [labelledBy, setLabelledBy] = useState(undefined);
-    const internalRef = useRef(null);
-    const mergedRef = useMergeRefs([ref, internalRef]);
-    /* Check if the panel has any tabbable elements */
-    useEffect(() => {
-        if (!internalRef.current)
-            return;
-        const tabbableElements = internalRef.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
-        setHasTabbableElement(tabbableElements.length > 0);
-    }, [children]);
-    /* get associated button */
-    useEffect(() => {
-        if (!tablistRef)
-            return;
-        const button = tablistRef.current?.querySelector(`[role="tab"][data-value="${value}"]`);
-        setLabelledBy(button ? button.id : undefined);
-        if (button) {
-            setPanelButtonMap?.((prev) => new Map(prev).set(button.id, panelId));
-        }
-    }, [tablistRef]);
-    return (jsx("div", { ref: mergedRef, id: panelId, role: 'tabpanel', tabIndex: hasTabbableElement ? undefined : 0, "aria-labelledby": labelledBy, hidden: !active, ...rest, children: children }));
+const TabsPanel = forwardRef(function TabsPanel({ children, value, id, className, ...rest }, ref) {
+    const { getPrefixedValue } = useContext(Context);
+    return (jsx("ds-tabpanel", { suppressHydrationWarning // Since <ds-tablist> adds attributes
+        : true, ref: ref, id: id ?? getPrefixedValue?.(value), class: className, ...rest, children: children }));
 });
 
 export { TabsPanel };

package/dist/esm/components/tabs/tabs-tab.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useContext, useId } from 'react';
-import { RovingFocusItem } from '../../utilities/roving-focus/roving-focus-item.js';
+import '@digdir/designsystemet-web';
+import { forwardRef, useContext } from 'react';
 import { Context } from './tabs.js';
 
 /**
@@ -10,14 +10,16 @@ import { Context } from './tabs.js';
  * @example
  * <TabsTab value='1'>Tab 1</TabsTab>
  */
-const TabsTab = forwardRef(function TabsTab({ value, id, onClick, ...rest }, ref) {
-    const tabs = useContext(Context);
-    const generatedId = useId();
-    const buttonId = id ?? `tab-${generatedId}`;
-    return (jsx(RovingFocusItem, { value: value, ...rest, asChild: true, children: jsx("button", { ref: ref, id: buttonId, "aria-selected": tabs.value === value, "data-value": value, role: 'tab', type: 'button', onClick: (e) => {
-                tabs.onChange?.(value);
-                onClick?.(e);
-            }, "aria-controls": tabs.panelButtonMap?.get(buttonId), ...rest }) }));
+const TabsTab = forwardRef(function TabsTab({ value, className, onClick, ...rest }, ref) {
+    const { onChange, getPrefixedValue } = useContext(Context);
+    return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: ds-tabs IS interactive
+    jsx("ds-tab", { "aria-controls": rest['aria-controls'] ?? getPrefixedValue?.(value), "data-value": value, ref: ref, suppressHydrationWarning // Since <ds-tablist> adds attributes
+        : true, onClick: (e) => {
+            if (e.isTrusted)
+                onChange?.(value); // Only call onChange is user actually clicked, not when programmatically clicked/controlled
+            onClick?.(e);
+        }, class: className, ...rest, children: rest.children }));
 });
 
 export { TabsTab };

package/dist/esm/components/tabs/tabs.js

@@ -1,7 +1,9 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
+import '@digdir/designsystemet-web';
 import cl from 'clsx/lite';
-import { createContext, forwardRef, useRef, useState } from 'react';
+import { createContext, forwardRef, useState, useRef, useId, useEffect } from 'react';
+import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
 
 const Context = createContext({});
 /**
@@ -20,10 +22,11 @@ const Context = createContext({});
  * </Tabs>
  */
 const Tabs = forwardRef(function Tabs({ value, defaultValue, className, onChange, ...rest }, ref) {
-    const tablistRef = useRef(null);
     const isControlled = value !== undefined;
     const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
-    const [panelButtonMap, setPanelButtonMap] = useState(new Map());
+    const tabsRef = useRef(null);
+    const valuePrefix = useId(); // Used to generate unique value-based ids for tabs and panels
+    const mergedRefs = useMergeRefs([ref, tabsRef]);
     let onValueChange = onChange;
     if (!isControlled) {
         onValueChange = (newValue) => {
@@ -32,14 +35,21 @@ const Tabs = forwardRef(function Tabs({ value, defaultValue, className, onChange
         };
         value = uncontrolledValue;
     }
+    useEffect(() => {
+        if (!isControlled || !tabsRef.current || value === undefined)
+            return;
+        tabsRef.current?.tabList?.tabs?.forEach((tab) => {
+            if (tab.getAttribute('data-value') === value)
+                tab.click();
+        });
+    }, [value, isControlled]);
     return (jsx(Context.Provider, { value: {
             value,
             defaultValue,
             onChange: onValueChange,
-            tablistRef,
-            panelButtonMap,
-            setPanelButtonMap,
-        }, children: jsx("div", { className: cl('ds-tabs', className), ref: ref, ...rest }) }));
+            getPrefixedValue: (value) => value && `${valuePrefix}-${value}`,
+        }, children: jsx("ds-tabs", { suppressHydrationWarning // Since <ds-tablist> adds attributes
+            : true, ref: mergedRefs, class: cl('ds-tabs', className), ...rest }) }));
 });
 
 export { Context, Tabs };

package/dist/esm/components/toggle-group/index.js

@@ -6,7 +6,7 @@ import { ToggleGroupItem } from './toggle-group-item.js';
  * Display a group of buttons that can be toggled between.
  *
  * @example
- * <ToggleGroup onChange={(value) => console.log(value)}>
+ * <ToggleGroup data-toggle-group="Label" onChange={(value) => console.log(value)}>
  *   <ToggleGroup.Item value='1'>Toggle 1</ToggleGroup.Item>
  *   <ToggleGroup.Item value='2'>Toggle 2</ToggleGroup.Item>
  *   <ToggleGroup.Item value='3'>Toggle 3</ToggleGroup.Item>

package/dist/esm/components/toggle-group/toggle-group-item.js

@@ -1,18 +1,20 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { RovingFocusItem } from '../../utilities/roving-focus/roving-focus-item.js';
-import { Button } from '../button/button.js';
-import { useToggleGroupItem } from './use-toggle-groupitem.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
+import { forwardRef, useId, useContext } from 'react';
+import { ToggleGroupContext } from './toggle-group.js';
 
 /**
  * A single item in a ToggleGroup.
  * @example
  * <ToggleGroupItem value='1'>Toggle 1</ToggleGroupItem>
  */
-const ToggleGroupItem = forwardRef(function ToggleGroupItem(rest, ref) {
-    const { active, buttonProps, value, variant } = useToggleGroupItem(rest);
-    return (jsx(RovingFocusItem, { asChild: true, value: value, children: jsx(Button, { variant: active ? variant : 'tertiary', ref: ref, ...rest, ...buttonProps }) }));
+const ToggleGroupItem = forwardRef(function ToggleGroupItem({ className, children, icon, value: rawValue, ...rest }, ref) {
+    const genValue = useId();
+    const toggleGroup = useContext(ToggleGroupContext);
+    const value = rawValue ?? genValue;
+    const active = toggleGroup.value === value;
+    return (jsxs("label", { ref: ref, ...rest, className: cl('ds-button', className), "data-variant": 'tertiary', children: [jsx("input", { checked: active, name: toggleGroup.name, onChange: () => toggleGroup.onChange?.(value), type: 'radio', value: value }), children] }));
 });
 
 export { ToggleGroupItem };

package/dist/esm/components/toggle-group/toggle-group.js

@@ -1,21 +1,20 @@
 'use client';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import cl from 'clsx/lite';
 import { createContext, forwardRef, useId, useState } from 'react';
-import { RovingFocusRoot } from '../../utilities/roving-focus/roving-focus-root.js';
 
 const ToggleGroupContext = createContext({});
 /**
  * Display a group of buttons that can be toggled between.
  *
  * @example
- * <ToggleGroup onChange={(value) => console.log(value)}>
+ * <ToggleGroup data-toggle-group="Label" onChange={(value) => console.log(value)}>
  *   <ToggleGroup.Item value='1'>Toggle 1</ToggleGroup.Item>
  *   <ToggleGroup.Item value='2'>Toggle 2</ToggleGroup.Item>
  *   <ToggleGroup.Item value='3'>Toggle 3</ToggleGroup.Item>
  * </ToggleGroup>
  */
-const ToggleGroup = forwardRef(function ToggleGroup({ children, variant = 'primary', value, defaultValue, onChange, name, className, ...rest }, ref) {
+const ToggleGroup = forwardRef(function ToggleGroup({ children, className, defaultValue, name, onChange, value, variant = 'primary', ...rest }, ref) {
     const nameId = useId();
     const isControlled = value !== undefined;
     const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
@@ -28,12 +27,13 @@ const ToggleGroup = forwardRef(function ToggleGroup({ children, variant = 'prima
         value = uncontrolledValue;
     }
     return (jsx(ToggleGroupContext.Provider, { value: {
-            variant,
-            value,
             defaultValue,
             name: name ?? `togglegroup-name-${nameId}`,
             onChange: onValueChange,
-        }, children: jsx(RovingFocusRoot, { asChild: true, activeValue: value, orientation: 'ambiguous', children: jsxs("div", { className: cl('ds-toggle-group', className), role: 'radiogroup', "data-variant": variant, ref: ref, ...rest, children: [name && jsx("input", { type: 'hidden', name: name, value: value }), children] }) }) }));
+            value,
+            variant,
+        }, children: jsx("fieldset", { className: cl('ds-toggle-group', className), "data-toggle-group": '' // Default to empty string to ensure attribute is present
+            , "data-variant": variant, ref: ref, ...rest, children: children }) }));
 });
 
 export { ToggleGroup, ToggleGroupContext };

package/dist/esm/components/tooltip/tooltip.js

@@ -1,10 +1,8 @@
 'use client';
-import { jsxs, Fragment as Fragment$1, jsx } from 'react/jsx-runtime';
-import { autoUpdate, computePosition, offset, flip, shift } from '@floating-ui/dom';
+import { jsx } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
-import cl from 'clsx/lite';
-import { forwardRef, useId, useState, useRef, useEffect, Fragment, version } from 'react';
-import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
+import '@digdir/designsystemet-web';
+import { forwardRef } from 'react';
 
 /**
  * Tooltip component that displays a small piece of information when hovering or focusing on an element.
@@ -19,150 +17,11 @@ import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-ref
  *  Hover me
  * </Tooltip>
  */
-const Tooltip = forwardRef(function Tooltip({ id, children, content, placement = 'top', autoPlacement = true, open, className, type, ...rest }, ref) {
-    const randomTooltipId = useId();
-    const [internalOpen, setInternalOpen] = useState(false);
-    const triggerRef = useRef(null);
-    const tooltipRef = useRef(null);
-    const mergedRefs = useMergeRefs([tooltipRef, ref]);
-    const controlledOpen = open ?? internalOpen;
-    const tooltipId = id ?? randomTooltipId;
-    const setOpen = () => {
-        setInternalOpen(true);
-    };
-    const setClose = () => {
-        setInternalOpen(false);
-    };
-    // Position with floating-ui
-    useEffect(() => {
-        const tooltip = tooltipRef.current;
-        const trigger = triggerRef.current;
-        tooltip?.togglePopover?.(controlledOpen);
-        if (tooltip)
-            tooltip.style.opacity = controlledOpen ? '1' : '0';
-        if (tooltip && trigger && controlledOpen) {
-            return autoUpdate(trigger, tooltip, () => {
-                computePosition(trigger, tooltip, {
-                    placement,
-                    strategy: 'fixed',
-                    middleware: [
-                        offset((data) => {
-                            // get pseudo element arrow size
-                            const styles = getComputedStyle(data.elements.floating, '::before');
-                            return parseFloat(styles.height);
-                        }),
-                        ...(autoPlacement
-                            ? [flip({ fallbackAxisSideDirection: 'start' }), shift()]
-                            : []),
-                        shift(),
-                        arrowPseudoElement,
-                        safeAreaElement,
-                    ],
-                }).then(({ x, y }) => {
-                    tooltip.style.translate = `${Math.round(x)}px ${Math.round(y)}px`;
-                });
-            });
-        }
-    }, [controlledOpen, placement]);
-    /* Add listeners for ESC to dismiss and click outside on mobile */
-    useEffect(() => {
-        const tooltip = tooltipRef.current;
-        const trigger = triggerRef.current;
-        const handleKeyDown = (event) => {
-            if (event.key === 'Escape') {
-                setInternalOpen(false);
-            }
-        };
-        const handleClick = (event) => {
-            const el = event.target;
-            const isTooltip = tooltip?.contains(el);
-            const isTrigger = trigger?.contains(el);
-            const isOutside = !isTrigger && !isTooltip;
-            if (isOutside && controlledOpen) {
-                setInternalOpen(false);
-            }
-        };
-        if (controlledOpen) {
-            window.addEventListener('keydown', handleKeyDown);
-            /* Add click listener to handle mobile tap-to-close */
-            document.addEventListener('click', handleClick);
-        }
-        return () => {
-            window.removeEventListener('keydown', handleKeyDown);
-            document.removeEventListener('click', handleClick);
-        };
-    }, [controlledOpen]);
-    /* 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;
-    }
-    const popoverProps = {
-        [version.startsWith('19') ? 'popoverTarget' : 'popovertarget']: tooltipId,
-        [version.startsWith('19')
-            ? 'popoverTargetAction'
-            : 'popovertargetaction']: 'show',
-    };
-    const autoType = `aria-${triggerRef.current?.innerText?.trim() ? 'describedby' : 'labelledby'}`;
-    return (jsxs(Fragment$1, { children: [jsx(ChildContainer, { ref: triggerRef, ...popoverProps, onMouseEnter: setOpen, onMouseLeave: setClose, onFocus: setOpen, onBlur: setClose, [type ? 'aria-' + type : autoType]: tooltipId, children: children }), jsx("span", { onMouseEnter: setOpen, onMouseLeave: setClose, ref: mergedRefs, role: 'tooltip', className: cl('ds-tooltip', className), id: tooltipId, popover: 'manual', ...rest, children: content })] }));
+const Tooltip = forwardRef(function Tooltip({ content, placement = 'top', autoPlacement = true, ...rest }, _ref) {
+    /* check if children is a string */
+    const isString = typeof rest.children === 'string';
+    return (jsx(Slot, { "aria-label": content, "data-tooltip": content, "data-placement": placement, "data-autoplacement": autoPlacement, suppressHydrationWarning // Since data-tooltip adds aria-label/aria-description
+        : true, ...rest, children: isString ? jsx("span", { tabIndex: 0, children: rest.children }) : rest.children }));
 });
-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('--dsc-tooltip-arrow-x', arrowX);
-        elements.floating.style.setProperty('--dsc-tooltip-arrow-y', arrowY);
-        return data;
-    },
-};
-const safeAreaElement = {
-    name: 'SafeAreaElement',
-    fn(data) {
-        const { elements, placement } = data;
-        let width = '100%';
-        let height = 'var(--dsc-tooltip-arrow-size)';
-        let translate = '0px';
-        switch (placement) {
-            case 'top':
-                translate = `-50% 0%`;
-                break;
-            case 'right':
-                height = '100%';
-                width = 'var(--dsc-tooltip-arrow-size)';
-                translate = '-100% -50%';
-                break;
-            case 'bottom':
-                translate = '-50% -100%';
-                break;
-            case 'left':
-                height = '100%';
-                width = 'var(--dsc-tooltip-arrow-size)';
-                translate = '0 -50%';
-                break;
-        }
-        elements.floating.style.setProperty('--_dsc-tooltip-safearea-height', height);
-        elements.floating.style.setProperty('--_dsc-tooltip-safearea-width', width);
-        elements.floating.style.setProperty('--_dsc-tooltip-safearea-translate', translate);
-        return data;
-    },
-};
 
 export { Tooltip };

package/dist/esm/components/validation-message/validation-message.js

@@ -12,7 +12,8 @@ import { forwardRef } from 'react';
  */
 const ValidationMessage = forwardRef(function ValidationMessage({ className, asChild, ...rest }, ref) {
     const Component = asChild ? Slot : 'p';
-    return (jsx(Component, { className: cl('ds-validation-message', className), "data-field": 'validation', ref: ref, ...rest }));
+    return (jsx(Component, { className: cl('ds-validation-message', className), "data-field": 'validation', ref: ref, suppressHydrationWarning // Since <ds-field> adds attributes
+        : true, ...rest }));
 });
 
 export { ValidationMessage };

package/dist/esm/index.js

@@ -1,4 +1,5 @@
 'use client';
+import '@digdir/designsystemet-web';
 export { Alert } from './components/alert/alert.js';
 export { Avatar } from './components/avatar/avatar.js';
 export { EXPERIMENTAL_AvatarStack } from './components/avatar-stack/avatar-stack.js';

package/dist/esm/utilities/hooks/use-pagination/use-pagination.js

@@ -1,17 +1,7 @@
 'use client';
+import { pagination } from '@digdir/designsystemet-web';
 import { useMemo } from 'react';
 
-const getSteps = (now, max, show) => {
-    const offset = (show - 1) / 2;
-    const start = Math.max(1, Math.min(Math.max(now - Math.floor(offset), 1), max - show + 1));
-    const end = Math.min(Math.max(now + Math.ceil(offset), show), max);
-    const pages = Array.from({ length: end + 1 - start }, (_, i) => i + start);
-    if (show > 4 && start > 1)
-        pages.splice(0, 2, 1, 0);
-    if (show > 3 && end < max)
-        pages.splice(-2, 2, 0, max);
-    return pages;
-};
 /**
  * Hook to help manage pagination state
  *
@@ -41,11 +31,10 @@ const getSteps = (now, max, show) => {
  *   </Pagination.Item>
  * </Pagination>
  **/
-const usePagination = ({ currentPage = 1, setCurrentPage, onChange, totalPages = 1, showPages = 7, }) => useMemo(() => {
-    const hasNext = currentPage < totalPages;
-    const hasPrev = currentPage !== 1;
+const usePagination = ({ currentPage: current = 1, setCurrentPage, onChange, totalPages: total = 1, showPages: show = 7, }) => useMemo(() => {
+    const { next, prev, pages } = pagination({ current, total, show });
     const handleClick = (page) => (event) => {
-        if (page < 1 || page > totalPages)
+        if (page < 1 || page > total)
             return event.preventDefault(); // Prevent out of bounds navigation
         onChange?.(event, page);
         if (!event.defaultPrevented)
@@ -53,7 +42,7 @@ const usePagination = ({ currentPage = 1, setCurrentPage, onChange, totalPages =
     };
     return {
         /** Number of steps */
-        pages: getSteps(currentPage, totalPages, showPages).map((page, index) => ({
+        pages: pages.map(({ page, current }, index) => ({
             /**
              * Page number or "ellipsis" for the ellipsis item
              */
@@ -67,29 +56,28 @@ const usePagination = ({ currentPage = 1, setCurrentPage, onChange, totalPages =
              */
             buttonProps: (page
                 ? {
-                    'aria-current': page === currentPage ? 'page' : undefined,
+                    'aria-current': current ? 'true' : undefined,
                     onClick: handleClick(page),
-                    variant: page === currentPage ? 'primary' : 'tertiary',
                 }
                 : null),
         })),
         /** Properties to spread on Pagination.Button used for previous naviagation */
         prevButtonProps: {
-            'aria-hidden': !hasPrev, // Using aria-hidden to support all HTML elements because of potential asChild
-            onClick: handleClick(currentPage - 1),
+            'aria-hidden': !prev, // Using aria-hidden to support all HTML elements because of potential asChild
+            onClick: handleClick(prev),
             variant: 'tertiary',
         },
         /** Properties to spread on Pagination.Button used for next naviagation */
         nextButtonProps: {
-            'aria-hidden': !hasNext, // Using aria-hidden to support all HTML elements because of potential asChild
-            onClick: handleClick(currentPage + 1),
+            'aria-hidden': !next, // Using aria-hidden to support all HTML elements because of potential asChild
+            onClick: handleClick(next),
             variant: 'tertiary',
         },
         /** Indication if previous page action should be shown or not */
-        hasPrev,
+        hasPrev: !!prev,
         /** Indication if next page action should be shown or not */
-        hasNext,
+        hasNext: !!next,
     };
-}, [currentPage, totalPages, showPages]);
+}, [current, total, show]);
 
 export { usePagination };

package/dist/esm/utilities/index.js

@@ -0,0 +1,11 @@
+'use client';
+import 'react';
+import '@digdir/designsystemet-web';
+export { RovingFocusItem, getNextFocusableValue, getPrevFocusableValue } from './roving-focus/roving-focus-item.js';
+export { RovingFocusRoot } from './roving-focus/roving-focus-root.js';
+
+const warn = (message, ...args) => typeof window === 'undefined' ||
+    window.dsWarnings === false ||
+    console.warn(`Designsystemet: ${message}`, ...args);
+
+export { warn };

package/dist/esm/utilities/roving-focus/roving-focus-item.js

@@ -3,6 +3,7 @@ import { jsx } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
 import { forwardRef } from 'react';
 import { useMergeRefs } from '../hooks/use-merge-refs/use-merge-refs.js';
+import '@digdir/designsystemet-web';
 import { useRovingFocus } from './use-roving-focus.js';
 
 /** Get the next focusable RovingFocusItem */
@@ -15,6 +16,7 @@ function getPrevFocusableValue(items, value) {
     const currIndex = items.findIndex((item) => item.value === value);
     return items.at(currIndex === 0 ? -1 : currIndex - 1);
 }
+/** @deprecated RovingFocusItem is deprecated.*/
 const RovingFocusItem = forwardRef(({ value, asChild, ...rest }, ref) => {
     const Component = asChild ? Slot : 'div';
     const focusValue = value ?? (typeof rest.children === 'string' ? rest.children : '');