@digdir/designsystemet-react 1.11.1 → 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,6 +1,7 @@
 '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');

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: asChild ? undefined : 'img', "aria-label": ariaLabel, ...rest, children: jsx(Component, { ...(useSlot && !asChild ? { '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 })] }));
 });
 

package/dist/esm/components/card/card.js

@@ -2,9 +2,13 @@
 import { jsx } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
-import { forwardRef, useRef, useEffect } from 'react';
+import { forwardRef, useRef, useId, useEffect } from 'react';
 import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
+import '@digdir/designsystemet-web';
 
+const ATTR_CLICKDELEGATE = 'data-clickdelegatefor';
+const SELECTOR_LINK = `:is(h1,h2,h3,h4,h5,h6) a`;
+const SELECTOR_SKIP = 'a,button,label,details,dialog,[role="button"],[popover],[contenteditable]';
 /**
  * Card component to present content in a structured way.
  *
@@ -18,22 +22,26 @@ import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-ref
 const Card = forwardRef(function Card({ asChild = false, variant = 'default', className, ...rest }, ref) {
     const Component = asChild ? Slot : 'div';
     const cardRef = useRef(null);
+    const linkGeneratedId = useId();
     const mergedRefs = useMergeRefs([cardRef, ref]);
     // Forward click on card to heading links for better accessibility
     // https://adrianroselli.com/2020/02/block-links-cards-clickable-regions-etc.html
     useEffect(() => {
         const card = cardRef.current;
-        const handleClick = ({ ctrlKey, metaKey, target }) => {
-            const link = card?.querySelector(':is(h1,h2,h3,h4,h5,h6) a');
-            if (!link || link?.contains(target))
-                return; // Let links handle their own clicks
-            if (ctrlKey || metaKey)
-                window.open(link.href, '', 'noreferrer');
+        const link = card?.querySelector(SELECTOR_LINK);
+        const skip = !link || link.parentElement?.closest(SELECTOR_SKIP); // Using parentElement as link variable will always match a selector
+        const id = link?.id;
+        if (card?.hasAttribute(ATTR_CLICKDELEGATE) || skip)
+            return; // Already delegated or skipped
+        link.id = id || linkGeneratedId;
+        card?.setAttribute(ATTR_CLICKDELEGATE, link.id);
+        return () => {
+            if (id && link)
+                link.id = id;
             else
-                link.click(); // Using link.click instead of window.location.href as this will trigger the browser's handling of rel=, target=, etc.
+                link?.removeAttribute('id');
+            card?.removeAttribute(ATTR_CLICKDELEGATE);
         };
-        card?.addEventListener('click', handleClick);
-        return () => card?.removeEventListener('click', handleClick);
     }, []);
     return (jsx(Component, { className: cl(`ds-card`, className), "data-variant": variant, ref: mergedRefs, ...rest }));
 });

package/dist/esm/components/details/details-summary.js

@@ -8,9 +8,9 @@ import { forwardRef } from 'react';
  * @example
  * <Details.Summary>Heading</Details.Summary>
  */
-const DetailsSummary = forwardRef(function DetailsSummary({ className, ...rest }, ref) {
-    /* Set `className` as `class` so react is happy */
-    return jsx("u-summary", { ref: ref, class: className, ...rest });
+const DetailsSummary = forwardRef(function DetailsSummary(rest, ref) {
+    return (jsx("summary", { suppressHydrationWarning // Since <details> polyfill adds attributes
+        : true, ref: ref, ...rest }));
 });
 
 export { DetailsSummary };

package/dist/esm/components/details/details.js

@@ -3,7 +3,7 @@ import { jsx } from 'react/jsx-runtime';
 import cl from 'clsx/lite';
 import { forwardRef, useRef, useEffect } from 'react';
 import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
-import '@u-elements/u-details';
+import '@digdir/designsystemet-web';
 
 /**
  * Details component, contains `Details.Summary` and `Details.Content` components.
@@ -35,7 +35,7 @@ const Details = forwardRef(function Details({ className, open, defaultOpen = fal
         details?.addEventListener('toggle', handleToggle, true);
         return () => details?.removeEventListener('toggle', handleToggle, true);
     }, []);
-    return (jsx("u-details", { class: cl('ds-details', className), open: (open ?? initialOpen.current) || undefined, "data-variant": variant, ref: mergedRefs, ...rest }));
+    return (jsx("details", { className: cl('ds-details', className), open: (open ?? initialOpen.current) || undefined, "data-variant": variant, ref: mergedRefs, ...rest }));
 });
 
 export { Details };

package/dist/esm/components/dialog/dialog-trigger-context.js

@@ -1,10 +1,8 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { createContext, useRef } from 'react';
+import { createContext, useState } from 'react';
 
-const Context = createContext({
-    current: null,
-});
+const Context = createContext({});
 /**
  * DialogTriggerContext component, used to provide a context for a dialog trigger.
  *
@@ -16,9 +14,10 @@ const Context = createContext({
  *   </Dialog>
  * </Dialog.TriggerContext>
  */
-const DialogTriggerContext = ({ children, }) => {
-    const contextRef = useRef(null);
-    return jsx(Context.Provider, { value: contextRef, children: children });
+const DialogTriggerContext = (rest) => {
+    const [state, setState] = useState({});
+    const setContext = (next) => setState({ ...state, ...next });
+    return jsx(Context.Provider, { value: { ...state, setContext }, ...rest });
 };
 DialogTriggerContext.displayName = 'DialogTriggerContext';
 

package/dist/esm/components/dialog/dialog-trigger.js

@@ -17,15 +17,10 @@ import { Context } from './dialog-trigger-context.js';
  * </Dialog.TriggerContext>
  */
 const DialogTrigger = forwardRef(function DialogTrigger({ asChild, ...rest }, ref) {
-    const contextRef = useContext(Context);
+    const { id, modal } = useContext(Context);
     const Component = asChild ? Slot : Button;
-    const openDialog = () => {
-        /* check if element has `data-modal`, it it has, use `showModal` */
-        contextRef.current?.getAttribute('data-modal') === 'true'
-            ? contextRef.current?.showModal()
-            : contextRef.current?.show();
-    };
-    return (jsx(Component, { "aria-haspopup": 'dialog', onClick: openDialog, ref: ref, ...rest }));
+    return (jsx(Component, { suppressHydrationWarning // Might get augmented through designsystemet-web with aria-haspopup
+        : true, command: modal ? 'show-modal' : 'show', commandfor: id, ref: ref, ...rest }));
 });
 
 export { DialogTrigger };