@digdir/designsystemet-react 1.1.10 → 1.2.0

package/dist/cjs/components/dialog/dialog.js

@@ -49,6 +49,12 @@ const Dialog = react.forwardRef(function Dialog({ asChild, children, className,
                 return (closedby === 'none' &&
                     event.key === 'Escape' &&
                     event.preventDefault()); // Skip ESC-key if closedby="none"
+            /* Check if clicked element or its closest parent has data-command='close' */
+            if (target instanceof Element) {
+                const closeElement = target.closest('[data-command="close"]');
+                if (closeElement)
+                    return dialog?.close();
+            }
             if (window.getSelection()?.toString())
                 return; // Fix bug where if you select text spanning two divs it thinks you clicked outside
             if (dialog && target === dialog && closedby === 'any') {
@@ -79,7 +85,7 @@ const Dialog = react.forwardRef(function Dialog({ asChild, children, className,
         currentRef?.addEventListener('close', handleClose);
         return () => currentRef?.removeEventListener('close', handleClose);
     }, [onClose]);
-    return (jsxRuntime.jsxs(Component, { className: cl('ds-dialog', className), ref: mergedRefs, "data-modal": modal, ...rest, children: [closeButton !== false && (jsxRuntime.jsx("form", { method: 'dialog', children: jsxRuntime.jsx(button.Button, { "aria-label": closeButton, autoFocus: true, "data-color": 'neutral', icon: true, name: 'close', type: 'submit', variant: 'tertiary' }) })), children] }));
+    return (jsxRuntime.jsxs(Component, { className: cl('ds-dialog', className), ref: mergedRefs, "data-modal": modal, ...rest, children: [closeButton !== false && (jsxRuntime.jsx(button.Button, { "aria-label": closeButton, autoFocus: true, "data-color": 'neutral', icon: true, variant: 'tertiary', "data-command": 'close' })), children] }));
 });
 
 exports.Dialog = Dialog;

package/dist/cjs/components/field/field-observer.js

@@ -27,7 +27,7 @@ function fieldObserver(fieldElement) {
                 elements.set(el, el.htmlFor);
             else if (el.hasAttribute('data-field'))
                 elements.set(el, el.id);
-            else if (isInputLike(el)) {
+            else if (isInputLike(el) && !el.hidden) {
                 input = el;
                 describedby = el.getAttribute('aria-describedby') || '';
             }

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

@@ -5,6 +5,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var rovingFocusRoot = require('../../utilities/roving-focus/roving-focus-root.js');
 var tabs = require('./tabs.js');
+var useMergeRefs = require('../../utilities/hooks/use-merge-refs/use-merge-refs.js');
 
 /**
  * The container for all `Tab` components.
@@ -16,8 +17,9 @@ var tabs = require('./tabs.js');
  * </TabsList>
  */
 const TabsList = react.forwardRef(function TabsList({ children, ...rest }, ref) {
-    const { value } = react.useContext(tabs.Context);
-    return (jsxRuntime.jsx(rovingFocusRoot.RovingFocusRoot, { role: 'tablist', activeValue: value, orientation: 'ambiguous', ref: ref, ...rest, children: children }));
+    const { value, tablistRef } = react.useContext(tabs.Context);
+    const mergedRefs = useMergeRefs.useMergeRefs([ref, tablistRef]);
+    return (jsxRuntime.jsx(rovingFocusRoot.RovingFocusRoot, { role: 'tablist', activeValue: value, orientation: 'ambiguous', ref: mergedRefs, ...rest, children: children }));
 });
 
 exports.TabsList = TabsList;

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

@@ -12,10 +12,13 @@ var useMergeRefs = require('../../utilities/hooks/use-merge-refs/use-merge-refs.
  * @example
  * <TabsPanel value='1'>content 1</TabsPanel>
  */
-const TabsPanel = react.forwardRef(function TabsPanel({ children, value, ...rest }, ref) {
-    const { value: tabsValue } = react.useContext(tabs.Context);
+const TabsPanel = react.forwardRef(function TabsPanel({ children, value, id, ...rest }, ref) {
+    const { value: tabsValue, tablistRef, setPanelButtonMap, } = react.useContext(tabs.Context);
     const active = value === tabsValue;
+    const generatedId = react.useId();
+    const panelId = id ?? `tabpanel-${generatedId}`;
     const [hasTabbableElement, setHasTabbableElement] = react.useState(false);
+    const [labelledBy, setLabelledBy] = react.useState(undefined);
     const internalRef = react.useRef(null);
     const mergedRef = useMergeRefs.useMergeRefs([ref, internalRef]);
     /* Check if the panel has any tabbable elements */
@@ -25,7 +28,17 @@ const TabsPanel = react.forwardRef(function TabsPanel({ children, value, ...rest
         const tabbableElements = internalRef.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
         setHasTabbableElement(tabbableElements.length > 0);
     }, [children]);
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: active && (jsxRuntime.jsx("div", { ref: mergedRef, role: 'tabpanel', tabIndex: hasTabbableElement ? undefined : 0, ...rest, children: children })) }));
+    /* get associated button */
+    react.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 (jsxRuntime.jsx("div", { ref: mergedRef, id: panelId, role: 'tabpanel', tabIndex: hasTabbableElement ? undefined : 0, "aria-labelledby": labelledBy, hidden: !active, ...rest, children: children }));
 });
 
 exports.TabsPanel = TabsPanel;

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

@@ -12,11 +12,14 @@ var tabs = require('./tabs.js');
  * @example
  * <TabsTab value='1'>Tab 1</TabsTab>
  */
-const TabsTab = react.forwardRef(function TabsTab({ value, id, ...rest }, ref) {
+const TabsTab = react.forwardRef(function TabsTab({ value, id, onClick, ...rest }, ref) {
     const tabs$1 = react.useContext(tabs.Context);
     const generatedId = react.useId();
     const buttonId = id ?? `tab-${generatedId}`;
-    return (jsxRuntime.jsx(rovingFocusItem.RovingFocusItem, { value: value, ...rest, asChild: true, children: jsxRuntime.jsx("button", { ...rest, "aria-selected": tabs$1.value === value, id: buttonId, onClick: () => tabs$1.onChange?.(value), ref: ref, role: 'tab', type: 'button' }) }));
+    return (jsxRuntime.jsx(rovingFocusItem.RovingFocusItem, { value: value, ...rest, asChild: true, children: jsxRuntime.jsx("button", { ref: ref, id: buttonId, "aria-selected": tabs$1.value === value, "data-value": value, role: 'tab', type: 'button', onClick: (e) => {
+                tabs$1.onChange?.(value);
+                onClick?.(e);
+            }, "aria-controls": tabs$1.panelButtonMap?.get(buttonId), ...rest }) }));
 });
 
 exports.TabsTab = TabsTab;

package/dist/cjs/components/tabs/tabs.js

@@ -22,8 +22,10 @@ const Context = react.createContext({});
  * </Tabs>
  */
 const Tabs = react.forwardRef(function Tabs({ value, defaultValue, className, onChange, ...rest }, ref) {
+    const tablistRef = react.useRef(null);
     const isControlled = value !== undefined;
     const [uncontrolledValue, setUncontrolledValue] = react.useState(defaultValue);
+    const [panelButtonMap, setPanelButtonMap] = react.useState(new Map());
     let onValueChange = onChange;
     if (!isControlled) {
         onValueChange = (newValue) => {
@@ -36,6 +38,9 @@ const Tabs = react.forwardRef(function Tabs({ value, defaultValue, className, on
             value,
             defaultValue,
             onChange: onValueChange,
+            tablistRef,
+            panelButtonMap,
+            setPanelButtonMap,
         }, children: jsxRuntime.jsx("div", { className: cl('ds-tabs', className), ref: ref, ...rest }) }));
 });
 

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

@@ -65,18 +65,34 @@ const Tooltip = react.forwardRef(function Tooltip({ id, children, content, place
             });
         }
     }, [controlledOpen, placement]);
-    /* Add listener for ESC to dismiss */
+    /* 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);
             }
         };
-        window.addEventListener('keydown', handleKeyDown);
+        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 */

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

@@ -47,6 +47,12 @@ const Dialog = forwardRef(function Dialog({ asChild, children, className, closeB
                 return (closedby === 'none' &&
                     event.key === 'Escape' &&
                     event.preventDefault()); // Skip ESC-key if closedby="none"
+            /* Check if clicked element or its closest parent has data-command='close' */
+            if (target instanceof Element) {
+                const closeElement = target.closest('[data-command="close"]');
+                if (closeElement)
+                    return dialog?.close();
+            }
             if (window.getSelection()?.toString())
                 return; // Fix bug where if you select text spanning two divs it thinks you clicked outside
             if (dialog && target === dialog && closedby === 'any') {
@@ -77,7 +83,7 @@ const Dialog = forwardRef(function Dialog({ asChild, children, className, closeB
         currentRef?.addEventListener('close', handleClose);
         return () => currentRef?.removeEventListener('close', handleClose);
     }, [onClose]);
-    return (jsxs(Component, { className: cl('ds-dialog', className), ref: mergedRefs, "data-modal": modal, ...rest, children: [closeButton !== false && (jsx("form", { method: 'dialog', children: jsx(Button, { "aria-label": closeButton, autoFocus: true, "data-color": 'neutral', icon: true, name: 'close', type: 'submit', variant: 'tertiary' }) })), children] }));
+    return (jsxs(Component, { className: cl('ds-dialog', className), ref: mergedRefs, "data-modal": modal, ...rest, children: [closeButton !== false && (jsx(Button, { "aria-label": closeButton, autoFocus: true, "data-color": 'neutral', icon: true, variant: 'tertiary', "data-command": 'close' })), children] }));
 });
 
 export { Dialog };

package/dist/esm/components/field/field-observer.js

@@ -25,7 +25,7 @@ function fieldObserver(fieldElement) {
                 elements.set(el, el.htmlFor);
             else if (el.hasAttribute('data-field'))
                 elements.set(el, el.id);
-            else if (isInputLike(el)) {
+            else if (isInputLike(el) && !el.hidden) {
                 input = el;
                 describedby = el.getAttribute('aria-describedby') || '';
             }

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

@@ -3,6 +3,7 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useContext } from 'react';
 import { RovingFocusRoot } from '../../utilities/roving-focus/roving-focus-root.js';
 import { Context } from './tabs.js';
+import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
 
 /**
  * The container for all `Tab` components.
@@ -14,8 +15,9 @@ import { Context } from './tabs.js';
  * </TabsList>
  */
 const TabsList = forwardRef(function TabsList({ children, ...rest }, ref) {
-    const { value } = useContext(Context);
-    return (jsx(RovingFocusRoot, { role: 'tablist', activeValue: value, orientation: 'ambiguous', ref: ref, ...rest, children: children }));
+    const { value, tablistRef } = useContext(Context);
+    const mergedRefs = useMergeRefs([ref, tablistRef]);
+    return (jsx(RovingFocusRoot, { role: 'tablist', activeValue: value, orientation: 'ambiguous', ref: mergedRefs, ...rest, children: children }));
 });
 
 export { TabsList };

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

@@ -1,6 +1,6 @@
 'use client';
-import { jsx, Fragment } from 'react/jsx-runtime';
-import { forwardRef, useContext, useState, useRef, useEffect } from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useContext, useId, useState, useRef, useEffect } from 'react';
 import { Context } from './tabs.js';
 import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
 
@@ -10,10 +10,13 @@ import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-ref
  * @example
  * <TabsPanel value='1'>content 1</TabsPanel>
  */
-const TabsPanel = forwardRef(function TabsPanel({ children, value, ...rest }, ref) {
-    const { value: tabsValue } = useContext(Context);
+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 */
@@ -23,7 +26,17 @@ const TabsPanel = forwardRef(function TabsPanel({ children, value, ...rest }, re
         const tabbableElements = internalRef.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
         setHasTabbableElement(tabbableElements.length > 0);
     }, [children]);
-    return (jsx(Fragment, { children: active && (jsx("div", { ref: mergedRef, role: 'tabpanel', tabIndex: hasTabbableElement ? undefined : 0, ...rest, children: 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 }));
 });
 
 export { TabsPanel };

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

@@ -10,11 +10,14 @@ import { Context } from './tabs.js';
  * @example
  * <TabsTab value='1'>Tab 1</TabsTab>
  */
-const TabsTab = forwardRef(function TabsTab({ value, id, ...rest }, ref) {
+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", { ...rest, "aria-selected": tabs.value === value, id: buttonId, onClick: () => tabs.onChange?.(value), ref: ref, role: 'tab', type: 'button' }) }));
+    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 }) }));
 });
 
 export { TabsTab };

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

@@ -1,7 +1,7 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import cl from 'clsx/lite';
-import { forwardRef, createContext, useState } from 'react';
+import { forwardRef, createContext, useRef, useState } from 'react';
 
 const Context = createContext({});
 /**
@@ -20,8 +20,10 @@ 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());
     let onValueChange = onChange;
     if (!isControlled) {
         onValueChange = (newValue) => {
@@ -34,6 +36,9 @@ const Tabs = forwardRef(function Tabs({ value, defaultValue, className, onChange
             value,
             defaultValue,
             onChange: onValueChange,
+            tablistRef,
+            panelButtonMap,
+            setPanelButtonMap,
         }, children: jsx("div", { className: cl('ds-tabs', className), ref: ref, ...rest }) }));
 });
 

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

@@ -63,18 +63,34 @@ const Tooltip = forwardRef(function Tooltip({ id, children, content, placement =
             });
         }
     }, [controlledOpen, placement]);
-    /* Add listener for ESC to dismiss */
+    /* 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);
             }
         };
-        window.addEventListener('keydown', handleKeyDown);
+        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 */

package/dist/types/components/dialog/dialog.d.ts

@@ -32,6 +32,8 @@ export type DialogProps = MergeRight<DefaultProps & DialogHTMLAttributes<HTMLDia
     /**
      * Change the default rendered element for the one passed as a child, merging their props and behavior.
      * @default false
+     *
+     * @deprecated Will be removed in the next major version. Should always be a `<dialog>` element
      */
     asChild?: boolean;
 }>;
@@ -89,6 +91,8 @@ export declare const Dialog: React.ForwardRefExoticComponent<Omit<DefaultProps &
     /**
      * Change the default rendered element for the one passed as a child, merging their props and behavior.
      * @default false
+     *
+     * @deprecated Will be removed in the next major version. Should always be a `<dialog>` element
      */
     asChild?: boolean;
 } & React.RefAttributes<HTMLDialogElement>>;

package/dist/types/components/dialog/dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAElD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAKlD,MAAM,MAAM,WAAW,GAAG,UAAU,CAClC,YAAY,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,EACtD;IACE;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC7B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,cAAc,GAAG,KAAK,CAAC;IAC3C;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CACF,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,MAAM;IA1Df;;;OAGG;kBACW,MAAM,GAAG,KAAK;IAC5B;;;;OAIG;eACQ,MAAM,GAAG,cAAc,GAAG,KAAK;IAC1C;;;;;;OAMG;YACK,OAAO;IACf;;OAEG;WACI,OAAO;IACd;;OAEG;cACO,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI;IAChC;;;OAGG;cACO,OAAO;2CAsHpB,CAAC"}
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAElD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAKlD,MAAM,MAAM,WAAW,GAAG,UAAU,CAClC,YAAY,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,EACtD;IACE;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC7B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,cAAc,GAAG,KAAK,CAAC;IAC3C;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CACF,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,MAAM;IA5Df;;;OAGG;kBACW,MAAM,GAAG,KAAK;IAC5B;;;;OAIG;eACQ,MAAM,GAAG,cAAc,GAAG,KAAK;IAC1C;;;;;;OAMG;YACK,OAAO;IACf;;OAEG;WACI,OAAO;IACd;;OAEG;cACO,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI;IAChC;;;;;OAKG;cACO,OAAO;2CA2HpB,CAAC"}

package/dist/types/components/skeleton/skeleton.d.ts

@@ -18,13 +18,9 @@ export type SkeletonProps = {
      * @default false
      */
     asChild?: boolean;
-} & HTMLAttributes<HTMLSpanElement> & ({
-    variant: 'text';
+    /** @deprecated This prop has no effect. Use `width` or supply text as children instead */
     characters?: number;
-} | {
-    variant?: 'rectangle' | 'circle';
-    characters?: never;
-});
+} & HTMLAttributes<HTMLSpanElement>;
 /**
  * Skeleton is used to represent a draft of page while the content loads.
  *
@@ -33,5 +29,26 @@ export type SkeletonProps = {
  * <Skeleton variant="text" />
  * <Skeleton variant="rectangle" />
  */
-export declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const Skeleton: React.ForwardRefExoticComponent<{
+    /**
+     * The width of the component
+     */
+    width?: string | number;
+    /**
+     * The height of the component
+     */
+    height?: string | number;
+    /**
+     * The shape variant
+     * @default 'rectangle'
+     */
+    variant?: "rectangle" | "circle" | "text";
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     * @default false
+     */
+    asChild?: boolean;
+    /** @deprecated This prop has no effect. Use `width` or supply text as children instead */
+    characters?: number;
+} & HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
 //# sourceMappingURL=skeleton.d.ts.map

package/dist/types/components/skeleton/skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/skeleton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAIxD,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC1C;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,cAAc,CAAC,eAAe,CAAC,GACjC,CACI;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAA;CAAE,GACxC;IAAE,OAAO,CAAC,EAAE,WAAW,GAAG,QAAQ,CAAC;IAAC,UAAU,CAAC,EAAE,KAAK,CAAA;CAAE,CAC3D,CAAC;AAEJ;;;;;;;GAOG;AACH,eAAO,MAAM,QAAQ,uFAgCpB,CAAC"}
+{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/skeleton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAIxD,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC1C;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0FAA0F;IAC1F,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,GAAG,cAAc,CAAC,eAAe,CAAC,CAAC;AAEpC;;;;;;;GAOG;AACH,eAAO,MAAM,QAAQ;IA9BnB;;OAEG;YACK,MAAM,GAAG,MAAM;IACvB;;OAEG;aACM,MAAM,GAAG,MAAM;IACxB;;;OAGG;cACO,WAAW,GAAG,QAAQ,GAAG,MAAM;IACzC;;;OAGG;cACO,OAAO;IACjB,0FAA0F;iBAC7E,MAAM;2EA2CpB,CAAC"}

package/dist/types/components/tabs/tabs-list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs-list.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs-list.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAK5C,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAE3D;;;;;;;;GAQG;AACH,eAAO,MAAM,QAAQ,sFAgBpB,CAAC"}
+{"version":3,"file":"tabs-list.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs-list.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAM5C,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAE3D;;;;;;;;GAQG;AACH,eAAO,MAAM,QAAQ,sFAkBpB,CAAC"}

package/dist/types/components/tabs/tabs-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs-panel.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAM5C,MAAM,MAAM,cAAc,GAAG;IAC3B;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;CACf,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,CAAC;AAElD;;;;;GAKG;AACH,eAAO,MAAM,SAAS;IAbpB;;;OAGG;WACI,MAAM;wFA2Cd,CAAC"}
+{"version":3,"file":"tabs-panel.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAa5C,MAAM,MAAM,cAAc,GAAG;IAC3B;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;CACf,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,CAAC;AAElD;;;;;GAKG;AACH,eAAO,MAAM,SAAS;IAbpB;;;OAGG;WACI,MAAM;wFAgEd,CAAC"}

package/dist/types/components/tabs/tabs-tab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs-tab.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAK5C,MAAM,MAAM,YAAY,GAAG;IACzB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf,GAAG,IAAI,CAAC,cAAc,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC,CAAC;AAErD;;;;;GAKG;AACH,eAAO,MAAM,OAAO;IAZlB;;OAEG;WACI,MAAM;8FA6Bd,CAAC"}
+{"version":3,"file":"tabs-tab.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAK5C,MAAM,MAAM,YAAY,GAAG;IACzB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf,GAAG,IAAI,CAAC,cAAc,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC,CAAC;AAErD;;;;;GAKG;AACH,eAAO,MAAM,OAAO;IAZlB;;OAEG;WACI,MAAM;8FAkCd,CAAC"}

package/dist/types/components/tabs/tabs.d.ts

@@ -21,7 +21,10 @@ export type TabsProps = MergeRight<DefaultProps & Omit<HTMLAttributes<HTMLDivEle
 export type ContextProps = {
     value?: string;
     defaultValue?: string;
+    panelButtonMap?: Map<string, string>;
+    setPanelButtonMap?: React.Dispatch<React.SetStateAction<Map<string, string>>>;
     onChange?: (value: string) => void;
+    tablistRef?: React.RefObject<HTMLDivElement | null>;
 };
 export declare const Context: React.Context<ContextProps>;
 /**

package/dist/types/components/tabs/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,MAAM,SAAS,GAAG,UAAU,CAChC,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,EACzE;IACE;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CACF,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AAEF,eAAO,MAAM,OAAO,6BAAkC,CAAC;AAEvD;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,IAAI;IAzCb;;;OAGG;YACK,MAAM;IACd;;;OAGG;mBACY,MAAM;IACrB;;;OAGG;eACQ,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;wCAuDpC,CAAC"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,MAAM,SAAS,GAAG,UAAU,CAChC,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,EACzE;IACE;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CACF,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACrC,iBAAiB,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC;IAC9E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;CACrD,CAAC;AAEF,eAAO,MAAM,OAAO,6BAAkC,CAAC;AAEvD;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,IAAI;IA5Cb;;;OAGG;YACK,MAAM;IACd;;;OAGG;mBACY,MAAM;IACrB;;;OAGG;eACQ,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;wCAoEpC,CAAC"}

package/dist/types/components/tooltip/tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAWzE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGlD,MAAM,MAAM,YAAY,GAAG,UAAU,CACnC,IAAI,CAAC,YAAY,EAAE,YAAY,CAAC,GAAG,cAAc,CAAC,cAAc,CAAC,EACjE;IACE;;;;;OAKG;IACH,QAAQ,EAAE,CAAC,YAAY,GAAG,aAAa,CAAC,WAAW,CAAC,CAAC,GAAG,MAAM,CAAC;IAC/D;;QAEI;IACJ,OAAO,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAChD;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CACF,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,OAAO;IA1ChB;;;;;OAKG;cACO,CAAC,YAAY,GAAG,aAAa,CAAC,WAAW,CAAC,CAAC,GAAG,MAAM;IAC9D;;QAEI;aACK,MAAM;IACf;;;OAGG;gBACS,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM;IAC/C;;;OAGG;oBACa,OAAO;IACvB;;;OAGG;WACI,OAAO;kCAiJjB,CAAC"}
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAWzE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGlD,MAAM,MAAM,YAAY,GAAG,UAAU,CACnC,IAAI,CAAC,YAAY,EAAE,YAAY,CAAC,GAAG,cAAc,CAAC,cAAc,CAAC,EACjE;IACE;;;;;OAKG;IACH,QAAQ,EAAE,CAAC,YAAY,GAAG,aAAa,CAAC,WAAW,CAAC,CAAC,GAAG,MAAM,CAAC;IAC/D;;QAEI;IACJ,OAAO,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAChD;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CACF,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,OAAO;IA1ChB;;;;;OAKG;cACO,CAAC,YAAY,GAAG,aAAa,CAAC,WAAW,CAAC,CAAC,GAAG,MAAM;IAC9D;;QAEI;aACK,MAAM;IACf;;;OAGG;gBACS,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM;IAC/C;;;OAGG;oBACa,OAAO;IACvB;;;OAGG;WACI,OAAO;kCAoKjB,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@digdir/designsystemet-react",
   "type": "module",
-  "version": "1.1.10",
+  "version": "1.2.0",
   "description": "React components for Designsystemet",
   "author": "Designsystemet team",
   "repository": {
@@ -38,20 +38,20 @@
   "dependencies": {
     "@floating-ui/dom": "^1.7.3",
     "@floating-ui/react": "0.26.23",
-    "@navikt/aksel-icons": "^7.25.1",
+    "@navikt/aksel-icons": "^7.27.0",
     "@radix-ui/react-slot": "^1.2.3",
     "@tanstack/react-virtual": "^3.13.12",
     "@u-elements/u-combobox": "^0.0.20",
-    "@u-elements/u-datalist": "^1.0.12",
-    "@u-elements/u-details": "^0.1.1",
+    "@u-elements/u-datalist": "^1.0.13",
+    "@u-elements/u-details": "^0.1.2",
     "clsx": "^2.1.1"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^28.0.6",
     "@rollup/plugin-node-resolve": "^16.0.1",
-    "@storybook/addon-docs": "^9.1.0",
-    "@storybook/addon-vitest": "^9.1.0",
-    "@storybook/react-vite": "^9.1.0",
+    "@storybook/addon-docs": "^9.1.1",
+    "@storybook/addon-vitest": "^9.1.1",
+    "@storybook/react-vite": "^9.1.1",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.6.4",
     "@testing-library/react": "^16.3.0",
@@ -64,11 +64,11 @@
     "rimraf": "^6.0.1",
     "rollup": "^4.46.2",
     "rollup-plugin-copy": "^3.5.0",
-    "storybook": "^9.1.0",
+    "storybook": "^9.1.1",
     "tsx": "4.20.3",
     "typescript": "^5.9.2",
-    "@digdir/designsystemet": "^1.1.10",
-    "@digdir/designsystemet-css": "^1.1.10"
+    "@digdir/designsystemet": "^1.2.0",
+    "@digdir/designsystemet-css": "^1.2.0"
   },
   "scripts": {
     "build": "pnpm run clean && tsc -b tsconfig.lib.json --emitDeclarationOnly false && rollup -c --bundleConfigAsCjs",