@digdir/designsystemet-react 1.11.0 → 1.12.0

package/dist/cjs/components/tooltip/tooltip.js

@@ -2,11 +2,9 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var dom = require('@floating-ui/dom');
 var reactSlot = require('@radix-ui/react-slot');
-var cl = require('clsx/lite');
+require('@digdir/designsystemet-web');
 var react = require('react');
-var useMergeRefs = require('../../utilities/hooks/use-merge-refs/use-merge-refs.js');
 
 /**
  * Tooltip component that displays a small piece of information when hovering or focusing on an element.
@@ -21,150 +19,11 @@ var useMergeRefs = require('../../utilities/hooks/use-merge-refs/use-merge-refs.
  *  Hover me
  * </Tooltip>
  */
-const Tooltip = react.forwardRef(function Tooltip({ id, children, content, placement = 'top', autoPlacement = true, open, className, type, ...rest }, ref) {
-    const randomTooltipId = react.useId();
-    const [internalOpen, setInternalOpen] = react.useState(false);
-    const triggerRef = react.useRef(null);
-    const tooltipRef = react.useRef(null);
-    const mergedRefs = useMergeRefs.useMergeRefs([tooltipRef, ref]);
-    const controlledOpen = open ?? internalOpen;
-    const tooltipId = id ?? randomTooltipId;
-    const setOpen = () => {
-        setInternalOpen(true);
-    };
-    const setClose = () => {
-        setInternalOpen(false);
-    };
-    // Position with floating-ui
-    react.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 dom.autoUpdate(trigger, tooltip, () => {
-                dom.computePosition(trigger, tooltip, {
-                    placement,
-                    strategy: 'fixed',
-                    middleware: [
-                        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()]
-                            : []),
-                        dom.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 */
-    react.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' : 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;
-    }
-    const popoverProps = {
-        [react.version.startsWith('19') ? 'popoverTarget' : 'popovertarget']: tooltipId,
-        [react.version.startsWith('19')
-            ? 'popoverTargetAction'
-            : 'popovertargetaction']: 'show',
-    };
-    const autoType = `aria-${triggerRef.current?.innerText?.trim() ? 'describedby' : 'labelledby'}`;
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ChildContainer, { ref: triggerRef, ...popoverProps, onMouseEnter: setOpen, onMouseLeave: setClose, onFocus: setOpen, onBlur: setClose, [type ? 'aria-' + type : autoType]: tooltipId, children: children }), jsxRuntime.jsx("span", { onMouseEnter: setOpen, onMouseLeave: setClose, ref: mergedRefs, role: 'tooltip', className: cl('ds-tooltip', className), id: tooltipId, popover: 'manual', ...rest, children: content })] }));
+const Tooltip = react.forwardRef(function Tooltip({ content, placement = 'top', autoPlacement = true, ...rest }, _ref) {
+    /* check if children is a string */
+    const isString = typeof rest.children === 'string';
+    return (jsxRuntime.jsx(reactSlot.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 ? jsxRuntime.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;
-    },
-};
 
 exports.Tooltip = Tooltip;

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

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

package/dist/cjs/index.js

@@ -1,38 +1,39 @@
 'use client';
 'use strict';
 
+require('@digdir/designsystemet-web');
 var alert = require('./components/alert/alert.js');
 var avatar = require('./components/avatar/avatar.js');
 var avatarStack = require('./components/avatar-stack/avatar-stack.js');
 var index = require('./components/badge/index.js');
 var index$1 = require('./components/breadcrumbs/index.js');
 var button = require('./components/button/button.js');
-var index$2 = require('./components/Combobox/index.js');
-var index$3 = require('./components/card/index.js');
+var index$4 = require('./components/Combobox/index.js');
+var index$2 = require('./components/card/index.js');
 var checkbox = require('./components/checkbox/checkbox.js');
-var index$4 = require('./components/chip/index.js');
+var index$3 = require('./components/chip/index.js');
 var index$5 = require('./components/details/index.js');
 var index$6 = require('./components/dialog/index.js');
 var divider = require('./components/divider/divider.js');
 var index$7 = require('./components/dropdown/index.js');
-var index$8 = require('./components/error-summary/index.js');
-var index$9 = require('./components/field/index.js');
-var index$a = require('./components/fieldset/index.js');
+var index$9 = require('./components/error-summary/index.js');
+var index$a = require('./components/field/index.js');
+var index$b = require('./components/fieldset/index.js');
 var heading = require('./components/heading/heading.js');
 var input = require('./components/input/input.js');
 var label = require('./components/label/label.js');
 var link = require('./components/link/link.js');
-var index$b = require('./components/list/index.js');
-var index$c = require('./components/pagination/index.js');
+var index$c = require('./components/list/index.js');
+var index$d = require('./components/pagination/index.js');
 var paragraph = require('./components/paragraph/paragraph.js');
-var index$d = require('./components/popover/index.js');
+var index$e = require('./components/popover/index.js');
 var radio = require('./components/radio/radio.js');
-var index$e = require('./components/search/index.js');
-var index$f = require('./components/select/index.js');
+var index$f = require('./components/search/index.js');
+var index$g = require('./components/select/index.js');
 var skeleton = require('./components/skeleton/skeleton.js');
 var skipLink = require('./components/skip-link/skip-link.js');
 var spinner = require('./components/spinner/spinner.js');
-var index$g = require('./components/suggestion/index.js');
+var index$8 = require('./components/suggestion/index.js');
 var _switch = require('./components/switch/switch.js');
 var index$h = require('./components/table/index.js');
 var index$i = require('./components/tabs/index.js');
@@ -57,10 +58,10 @@ var badgePosition = require('./components/badge/badge-position.js');
 var breadcrumbsItem = require('./components/breadcrumbs/breadcrumbs-item.js');
 var breadcrumbsLink = require('./components/breadcrumbs/breadcrumbs-link.js');
 var breadcrumbsList = require('./components/breadcrumbs/breadcrumbs-list.js');
-var Empty = require('./components/Combobox/Empty.js');
-var Option = require('./components/Combobox/Option/Option.js');
 var cardBlock = require('./components/card/card-block.js');
 var chips = require('./components/chip/chips.js');
+var Empty = require('./components/Combobox/Empty.js');
+var Option = require('./components/Combobox/Option/Option.js');
 var detailsContent = require('./components/details/details-content.js');
 var detailsSummary = require('./components/details/details-summary.js');
 var dialogBlock = require('./components/dialog/dialog-block.js');
@@ -72,6 +73,11 @@ var dropdownItem = require('./components/dropdown/dropdown-item.js');
 var dropdownList = require('./components/dropdown/dropdown-list.js');
 var dropdownTrigger = require('./components/dropdown/dropdown-trigger.js');
 var dropdownTriggerContext = require('./components/dropdown/dropdown-trigger-context.js');
+var suggestionClear = require('./components/suggestion/suggestion-clear.js');
+var suggestionEmpty = require('./components/suggestion/suggestion-empty.js');
+var suggestionInput = require('./components/suggestion/suggestion-input.js');
+var suggestionList = require('./components/suggestion/suggestion-list.js');
+var suggestionOption = require('./components/suggestion/suggestion-option.js');
 var errorSummaryHeading = require('./components/error-summary/error-summary-heading.js');
 var errorSummaryItem = require('./components/error-summary/error-summary-item.js');
 var errorSummaryLink = require('./components/error-summary/error-summary-link.js');
@@ -93,11 +99,6 @@ var searchClear = require('./components/search/search-clear.js');
 var searchInput = require('./components/search/search-input.js');
 var selectOptgroup = require('./components/select/select-optgroup.js');
 var selectOption = require('./components/select/select-option.js');
-var suggestionClear = require('./components/suggestion/suggestion-clear.js');
-var suggestionEmpty = require('./components/suggestion/suggestion-empty.js');
-var suggestionInput = require('./components/suggestion/suggestion-input.js');
-var suggestionList = require('./components/suggestion/suggestion-list.js');
-var suggestionOption = require('./components/suggestion/suggestion-option.js');
 var tableBody = require('./components/table/table-body.js');
 var tableCell = require('./components/table/table-cell.js');
 var tableFoot = require('./components/table/table-foot.js');
@@ -117,32 +118,32 @@ exports.EXPERIMENTAL_AvatarStack = avatarStack.EXPERIMENTAL_AvatarStack;
 exports.Badge = index.Badge;
 exports.Breadcrumbs = index$1.Breadcrumbs;
 exports.Button = button.Button;
-exports.Combobox = index$2.Combobox;
-exports.Card = index$3.Card;
+exports.Combobox = index$4.Combobox;
+exports.Card = index$2.Card;
 exports.Checkbox = checkbox.Checkbox;
-exports.Chip = index$4.Chip;
+exports.Chip = index$3.Chip;
 exports.Details = index$5.Details;
 exports.Dialog = index$6.Dialog;
 exports.Divider = divider.Divider;
 exports.Dropdown = index$7.Dropdown;
-exports.ErrorSummary = index$8.ErrorSummary;
-exports.Field = index$9.Field;
-exports.Fieldset = index$a.Fieldset;
+exports.ErrorSummary = index$9.ErrorSummary;
+exports.Field = index$a.Field;
+exports.Fieldset = index$b.Fieldset;
 exports.Heading = heading.Heading;
 exports.Input = input.Input;
 exports.Label = label.Label;
 exports.Link = link.Link;
-exports.List = index$b.List;
-exports.Pagination = index$c.Pagination;
+exports.List = index$c.List;
+exports.Pagination = index$d.Pagination;
 exports.Paragraph = paragraph.Paragraph;
-exports.Popover = index$d.Popover;
+exports.Popover = index$e.Popover;
 exports.Radio = radio.Radio;
-exports.Search = index$e.Search;
-exports.Select = index$f.Select;
+exports.Search = index$f.Search;
+exports.Select = index$g.Select;
 exports.Skeleton = skeleton.Skeleton;
 exports.SkipLink = skipLink.SkipLink;
 exports.Spinner = spinner.Spinner;
-exports.EXPERIMENTAL_Suggestion = index$g.EXPERIMENTAL_Suggestion;
+exports.EXPERIMENTAL_Suggestion = index$8.EXPERIMENTAL_Suggestion;
 exports.Switch = _switch.Switch;
 exports.Table = index$h.Table;
 exports.Tabs = index$i.Tabs;
@@ -166,13 +167,13 @@ exports.BadgePosition = badgePosition.BadgePosition;
 exports.BreadcrumbsItem = breadcrumbsItem.BreadcrumbsItem;
 exports.BreadcrumbsLink = breadcrumbsLink.BreadcrumbsLink;
 exports.BreadcrumbsList = breadcrumbsList.BreadcrumbsList;
-exports.ComboboxEmpty = Empty.ComboboxEmpty;
-exports.ComboboxOption = Option.ComboboxOption;
 exports.CardBlock = cardBlock.CardBlock;
 exports.ChipButton = chips.ChipButton;
 exports.ChipCheckbox = chips.ChipCheckbox;
 exports.ChipRadio = chips.ChipRadio;
 exports.ChipRemovable = chips.ChipRemovable;
+exports.ComboboxEmpty = Empty.ComboboxEmpty;
+exports.ComboboxOption = Option.ComboboxOption;
 exports.DetailsContent = detailsContent.DetailsContent;
 exports.DetailsSummary = detailsSummary.DetailsSummary;
 exports.DialogBlock = dialogBlock.DialogBlock;
@@ -184,6 +185,11 @@ exports.DropdownItem = dropdownItem.DropdownItem;
 exports.DropdownList = dropdownList.DropdownList;
 exports.DropdownTrigger = dropdownTrigger.DropdownTrigger;
 exports.DropdownTriggerContext = dropdownTriggerContext.DropdownTriggerContext;
+exports.EXPERIMENTAL_SuggestionClear = suggestionClear.SuggestionClear;
+exports.EXPERIMENTAL_SuggestionEmpty = suggestionEmpty.SuggestionEmpty;
+exports.EXPERIMENTAL_SuggestionInput = suggestionInput.SuggestionInput;
+exports.EXPERIMENTAL_SuggestionList = suggestionList.SuggestionList;
+exports.EXPERIMENTAL_SuggestionOption = suggestionOption.SuggestionOption;
 exports.ErrorSummaryHeading = errorSummaryHeading.ErrorSummaryHeading;
 exports.ErrorSummaryItem = errorSummaryItem.ErrorSummaryItem;
 exports.ErrorSummaryLink = errorSummaryLink.ErrorSummaryLink;
@@ -207,11 +213,6 @@ exports.SearchClear = searchClear.SearchClear;
 exports.SearchInput = searchInput.SearchInput;
 exports.SelectOptgroup = selectOptgroup.SelectOptgroup;
 exports.SelectOption = selectOption.SelectOption;
-exports.EXPERIMENTAL_SuggestionClear = suggestionClear.SuggestionClear;
-exports.EXPERIMENTAL_SuggestionEmpty = suggestionEmpty.SuggestionEmpty;
-exports.EXPERIMENTAL_SuggestionInput = suggestionInput.SuggestionInput;
-exports.EXPERIMENTAL_SuggestionList = suggestionList.SuggestionList;
-exports.EXPERIMENTAL_SuggestionOption = suggestionOption.SuggestionOption;
 exports.TableBody = tableBody.TableBody;
 exports.TableCell = tableCell.TableCell;
 exports.TableFoot = tableFoot.TableFoot;

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

@@ -1,19 +1,9 @@
 'use client';
 'use strict';
 
+var designsystemetWeb = require('@digdir/designsystemet-web');
 var react = require('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
  *
@@ -43,11 +33,10 @@ const getSteps = (now, max, show) => {
  *   </Pagination.Item>
  * </Pagination>
  **/
-const usePagination = ({ currentPage = 1, setCurrentPage, onChange, totalPages = 1, showPages = 7, }) => react.useMemo(() => {
-    const hasNext = currentPage < totalPages;
-    const hasPrev = currentPage !== 1;
+const usePagination = ({ currentPage: current = 1, setCurrentPage, onChange, totalPages: total = 1, showPages: show = 7, }) => react.useMemo(() => {
+    const { next, prev, pages } = designsystemetWeb.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)
@@ -55,7 +44,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
              */
@@ -69,29 +58,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]);
 
 exports.usePagination = usePagination;

package/dist/cjs/utilities/index.js

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

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

@@ -5,6 +5,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var reactSlot = require('@radix-ui/react-slot');
 var react = require('react');
 var useMergeRefs = require('../hooks/use-merge-refs/use-merge-refs.js');
+require('@digdir/designsystemet-web');
 var useRovingFocus = require('./use-roving-focus.js');
 
 /** Get the next focusable RovingFocusItem */
@@ -17,6 +18,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 = react.forwardRef(({ value, asChild, ...rest }, ref) => {
     const Component = asChild ? reactSlot.Slot : 'div';
     const focusValue = value ?? (typeof rest.children === 'string' ? rest.children : '');

package/dist/cjs/utilities/roving-focus/roving-focus-root.js

@@ -4,7 +4,9 @@
 var jsxRuntime = require('react/jsx-runtime');
 var reactSlot = require('@radix-ui/react-slot');
 var react = require('react');
+var index = require('../index.js');
 var useMergeRefs = require('../hooks/use-merge-refs/use-merge-refs.js');
+require('@digdir/designsystemet-web');
 
 const RovingFocusContext = react.createContext({
     elements: { current: new Map() },
@@ -18,6 +20,7 @@ const RovingFocusContext = react.createContext({
     focusableValue: null,
     orientation: 'horizontal',
 });
+/** @deprecated RovingFocusRoot is deprecated. */
 const RovingFocusRoot = react.forwardRef(({ activeValue, asChild, orientation = 'horizontal', onBlur, onFocus, ...rest }, ref) => {
     const Component = asChild ? reactSlot.Slot : 'div';
     const activeValueOrNull = activeValue ?? null;
@@ -37,6 +40,7 @@ const RovingFocusRoot = react.forwardRef(({ activeValue, asChild, orientation =
     react.useEffect(() => {
         setFocusableValue(activeValueOrNull);
     }, [activeValueOrNull]);
+    index.warn('RovingFocusRoot is deprecated.');
     return (jsxRuntime.jsx(RovingFocusContext.Provider, { value: {
             elements,
             getOrderedItems,

package/dist/cjs/utilities/roving-focus/use-roving-focus.js

@@ -6,7 +6,9 @@ var rovingFocusRoot = require('./roving-focus-root.js');
 
 // Logic from: https://www.joshuawootonn.com/react-roving-tabindex
 // Inspired by: https://github.com/radix-ui/primitives/tree/main/packages/react/roving-focus/src
-/** Handles props for `RovingFocus` in context with `RovingFocusRoot` */
+/**
+@deprecated useRovingFocus is deprecated.
+Handles props for `RovingFocus` in context with `RovingFocusRoot` */
 const useRovingFocus = (value) => {
     const { elements, getOrderedItems, setFocusableValue, focusableValue, onShiftTab, orientation, } = react.useContext(rovingFocusRoot.RovingFocusContext);
     return {

package/dist/esm/components/Combobox/Combobox.js

@@ -5,6 +5,7 @@ import { useVirtualizer } from '@tanstack/react-virtual';
 import cl from 'clsx/lite';
 import { forwardRef, useRef, useState, useEffect } from 'react';
 import { useDebounceCallback } from '../../utilities/hooks/deprecated/use-debounce-callback/use-debounce-callback.js';
+import '@digdir/designsystemet-web';
 import '../../utilities/roving-focus/roving-focus-item.js';
 import '../../utilities/roving-focus/roving-focus-root.js';
 import { Spinner } from '../spinner/spinner.js';

package/dist/esm/components/Combobox/Option/useComboboxOption.js

@@ -2,6 +2,7 @@
 import { useMergeRefs } from '@floating-ui/react';
 import { useId, useContext, useMemo, useEffect } from 'react';
 import { useDebounceCallback } from '../../../utilities/hooks/deprecated/use-debounce-callback/use-debounce-callback.js';
+import '@digdir/designsystemet-web';
 import '../../../utilities/roving-focus/roving-focus-item.js';
 import '../../../utilities/roving-focus/roving-focus-root.js';
 import { ComboboxContext } from '../ComboboxContext.js';

package/dist/esm/components/Combobox/useComboboxKeyboard.js

@@ -1,6 +1,7 @@
 'use client';
 import { useDebounceCallback } from '../../utilities/hooks/deprecated/use-debounce-callback/use-debounce-callback.js';
 import 'react';
+import '@digdir/designsystemet-web';
 import '../../utilities/roving-focus/roving-focus-item.js';
 import '../../utilities/roving-focus/roving-focus-root.js';
 import { useComboboxId } from './ComboboxIdContext.js';

package/dist/esm/components/avatar/avatar.js

@@ -20,12 +20,12 @@ import { forwardRef, Fragment } from 'react';
  *  <Icon />
  * </Avatar>
  */
-const Avatar = forwardRef(function Avatar({ 'aria-label': ariaLabel, variant = 'circle', className, children, initials, asChild, ...rest }, ref) {
+const Avatar = forwardRef(function Avatar({ 'aria-label': ariaLabel, 'data-tooltip': dataTooltip, variant = 'circle', className, children, initials, asChild, ...rest }, ref) {
     const OuterComponent = asChild ? Slot : 'span';
     const useSlot = children && typeof children !== 'string';
     const textChild = children && typeof children === 'string';
     const Component = useSlot ? Slot : Fragment;
-    return (jsx(OuterComponent, { ref: ref, className: cl('ds-avatar', className), "data-variant": variant, "data-initials": initials, role: 'img', "aria-label": ariaLabel, ...rest, children: jsx(Component, { ...(useSlot ? { 'aria-hidden': true } : {}), children: textChild ? jsx("span", { children: children }) : children }) }));
+    return (jsx(OuterComponent, { ref: ref, className: cl('ds-avatar', className), "data-variant": variant, "data-initials": initials, role: asChild ? undefined : 'img', "aria-label": ariaLabel || dataTooltip, tabIndex: dataTooltip ? 0 : undefined, ...rest, children: jsx(Component, { ...(useSlot && !asChild ? { 'aria-hidden': true } : {}), children: textChild ? jsx("span", { children: children }) : children }) }));
 });
 
 export { Avatar };

package/dist/esm/components/breadcrumbs/breadcrumbs-link.js

@@ -4,7 +4,8 @@ import { forwardRef } from 'react';
 import { Link } from '../link/link.js';
 
 const BreadcrumbsLink = forwardRef(function BreadcrumbsLink(rest, ref) {
-    return jsx(Link, { ref: ref, ...rest });
+    return (jsx(Link, { suppressHydrationWarning // Since <ds-breadcrumbs> adds aria-current="page"
+        : true, ref: ref, ...rest }));
 });
 
 export { BreadcrumbsLink };

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

@@ -1,19 +1,9 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useRef, useEffect } from 'react';
-import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
+import { forwardRef } from 'react';
 
 const BreadcrumbsList = forwardRef(function BreadcrumbsList(rest, ref) {
-    const innerRef = useRef(null);
-    const mergedRefs = useMergeRefs([innerRef, ref]);
-    // Set aria-current on last link
-    useEffect(() => {
-        const links = innerRef.current?.querySelectorAll(':scope > * > *') || [];
-        const lastLink = links[links?.length - 1];
-        lastLink?.setAttribute('aria-current', 'page');
-        return () => lastLink?.removeAttribute('aria-current'); // Remove on re-render as React can re-use DOM elements
-    });
-    return jsx("ol", { ref: mergedRefs, ...rest });
+    return jsx("ol", { ref: ref, ...rest });
 });
 
 export { BreadcrumbsList };

package/dist/esm/components/breadcrumbs/breadcrumbs.js

@@ -1,5 +1,6 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
+import '@digdir/designsystemet-web';
 import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 
@@ -21,6 +22,6 @@ import { forwardRef } from 'react';
  *  </Breadcrumbs.List>
  * </Breadcrumbs>
  */
-const Breadcrumbs = forwardRef(({ 'aria-label': ariaLabel = 'Du er her:', className, ...rest }, ref) => (jsx("nav", { "aria-label": ariaLabel, className: cl('ds-breadcrumbs', className), ref: ref, ...rest })));
+const Breadcrumbs = forwardRef(({ className, ...rest }, ref) => (jsx("ds-breadcrumbs", { suppressHydrationWarning: true, class: cl('ds-breadcrumbs', className), ref: ref, ...rest })));
 
 export { Breadcrumbs };

package/dist/esm/components/button/button.js

@@ -2,7 +2,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Slot, Slottable } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
-import { forwardRef } from 'react';
+import { forwardRef, version } from 'react';
 import { Spinner } from '../spinner/spinner.js';
 
 /**
@@ -11,12 +11,17 @@ import { Spinner } from '../spinner/spinner.js';
  * @example
  * <Button>Click me</Button>
  */
-const Button = forwardRef(function Button({ asChild, className, children, icon = false, loading = false, variant = 'primary', ...rest }, ref) {
+const Button = forwardRef(function Button({ asChild, className, children, icon = false, loading = false, variant = 'primary', popoverTarget, popovertarget, ...rest }, ref) {
     const Component = asChild ? Slot : 'button';
+    const popoverVal = popoverTarget ?? popovertarget;
+    const popoverKey = version.startsWith('19')
+        ? 'popoverTarget'
+        : 'popovertarget';
     // Fallbacks to undefined to prevent rendering attribute="false"
-    return (jsxs(Component, { "aria-busy": Boolean(loading) || undefined, "aria-disabled": Boolean(loading) || undefined, className: cl('ds-button', className), "data-icon": icon || undefined, "data-variant": variant, ref: ref, 
+    return (jsxs(Component, { suppressHydrationWarning // Might get augmented through designsystemet-web with aria-haspopup etc.
+        : true, "aria-busy": Boolean(loading) || undefined, "aria-disabled": Boolean(loading) || undefined, className: cl('ds-button', className), "data-icon": icon || undefined, "data-variant": variant, ref: ref, 
         /* don't set type when we use `asChild` */
-        type: asChild ? undefined : 'button', ...rest, children: [loading === true ? (jsx(Spinner, { "aria-hidden": 'true' })) : (loading // Allow custom loading spinner
+        type: asChild ? undefined : 'button', [popoverKey]: popoverVal, ...rest, children: [loading === true ? (jsx(Spinner, { "aria-hidden": 'true' })) : (loading // Allow custom loading spinner
             ), jsx(Slottable, { children: icon && loading ? null : children })] }));
 });