@digdir/designsystemet-react 1.11.1 → 1.12.0

package/dist/cjs/components/popover/popover.js

@@ -2,10 +2,10 @@
 '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');
 var react = require('react');
+require('@digdir/designsystemet-web');
 var useMergeRefs = require('../../utilities/hooks/use-merge-refs/use-merge-refs.js');
 var popoverTriggerContext = require('./popover-trigger-context.js');
 
@@ -36,13 +36,13 @@ const Popover = react.forwardRef(function Popover({ id, className, onClose, onOp
     // NOTE: This code is purely to add React controlled component ability to Popover API
     react.useEffect(() => {
         const popover = popoverRef.current;
+        const trigger = `[popovertarget="${popover?.id}"],[commandfor="${popover?.id}"]`;
         const handleClick = (event) => {
             const el = event.target;
-            const isTrigger = el?.closest?.(`[popovertarget="${popover?.id}"]`);
+            const isTrigger = el?.closest?.(trigger);
             const isOutside = !isTrigger && !popover?.contains(el);
-            if (isTrigger) {
+            if (isTrigger)
                 event.preventDefault(); // Prevent native Popover API
-            }
             if (controlledOpen && (isTrigger || isOutside)) {
                 setInternalOpen(false);
                 onClose?.();
@@ -55,11 +55,20 @@ const Popover = react.forwardRef(function Popover({ id, className, onClose, onOp
         const handleKeydown = (event) => {
             if (event.key !== 'Escape' || !controlledOpen)
                 return;
+            const isOpen = popoverRef.current?.matches(':popover-open') ||
+                popoverRef.current?.classList.contains(':popover-open'); // Polyfill support
+            if (!isOpen)
+                return;
             event.preventDefault(); // Prevent closing fullscreen in Safari
+            document.querySelector(trigger)?.focus?.(); // Move focus back to trigger since `popoover="manual"` doesn't do this
             setInternalOpen(false);
             onClose?.();
         };
         popover?.togglePopover?.(controlledOpen);
+        if (controlledOpen) {
+            const options = { detail: document.querySelector(trigger) };
+            popover?.dispatchEvent(new CustomEvent('ds-toggle-source', options)); // Since togglePopover({ source }) is not supported in all browsers yet
+        }
         document.addEventListener('click', handleClick, true); // Use capture to execute before React event API
         document.addEventListener('keydown', handleKeydown);
         return () => {
@@ -67,69 +76,13 @@ const Popover = react.forwardRef(function Popover({ id, className, onClose, onOp
             document.removeEventListener('keydown', handleKeydown);
         };
     }, [controlledOpen]);
-    // Position with floating-ui
-    react.useEffect(() => {
-        const popover = popoverRef.current;
-        const trigger = document.querySelector(`[popovertarget="${popover?.id}"]`);
-        if (popover && trigger && controlledOpen)
-            return dom.autoUpdate(trigger, popover, () => {
-                dom.computePosition(trigger, popover, {
-                    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()]
-                            : []),
-                        arrowPseudoElement,
-                    ],
-                }).then(({ x, y }) => {
-                    popover.style.translate = `${Math.round(x)}px ${Math.round(y)}px`;
-                });
-            });
-    }, [controlledOpen, placement, id, autoPlacement]);
     // Update context with id
     react.useEffect(() => {
         if (id)
             setPopoverId?.(id);
     }, [id]);
-    return (jsxRuntime.jsx(Component, { className: cl('ds-popover', className), id: id || popoverId, popover: 'manual', "data-variant": variant, ref: mergedRefs, ...rest }));
+    return (jsxRuntime.jsx(Component, { className: cl('ds-popover', className), id: id || popoverId, popover: 'manual', "data-placement": placement, "data-variant": variant, ref: mergedRefs, suppressHydrationWarning // Since _ds-floating adds attributes
+        : true, ...rest }));
 });
-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`;
-        if (rects.reference.width > rects.floating.width) {
-            arrowX = `${Math.round(rects.floating.width / 2)}px`;
-        }
-        if (rects.reference.height > rects.floating.height) {
-            arrowY = `${Math.round(rects.floating.height / 2)}px`;
-        }
-        switch (placement.split('-')[0]) {
-            case 'top':
-                arrowY = '100%';
-                break;
-            case 'right':
-                arrowX = '0';
-                break;
-            case 'bottom':
-                arrowY = '0';
-                break;
-            case 'left':
-                arrowX = '100%';
-                break;
-        }
-        elements.floating.setAttribute('data-placement', placement.split('-')[0]); // We only need top/left/right/bottom
-        elements.floating.style.setProperty('--ds-popover-arrow-x', arrowX);
-        elements.floating.style.setProperty('--ds-popover-arrow-y', arrowY);
-        return data;
-    },
-};
 
 exports.Popover = Popover;

package/dist/cjs/components/select/select.js

@@ -14,18 +14,8 @@ var react = require('react');
  *   <Select.Option value='2'>Option 2</Select.Option>
  * </Select>
  */
-const Select = react.forwardRef(function Select({ className, onKeyDown, onMouseDown, width, ...rest }, ref) {
-    return (jsxRuntime.jsx("select", { className: cl('ds-input', className), "data-width": width, ref: ref, onKeyDown: (event) => {
-            if (event.key === 'Tab')
-                return;
-            if (rest.readOnly)
-                event.preventDefault(); // Make readonly work for select
-            onKeyDown?.(event);
-        }, onMouseDown: (event) => {
-            if (rest.readOnly)
-                event.preventDefault(); // Make readonly work for select
-            onMouseDown?.(event);
-        }, ...rest }));
+const Select = react.forwardRef(function Select({ className, onKeyDown, onMouseDown, width, readOnly, ...rest }, ref) {
+    return (jsxRuntime.jsx("select", { className: cl('ds-input', className), "aria-readonly": rest['aria-readonly'] ?? readOnly, "data-width": width, ref: ref, ...rest }));
 });
 
 exports.Select = Select;

package/dist/cjs/components/skeleton/skeleton.js

@@ -6,6 +6,7 @@ var reactSlot = require('@radix-ui/react-slot');
 var cl = require('clsx/lite');
 var react = require('react');
 var useMergeRefs = require('../../utilities/hooks/use-merge-refs/use-merge-refs.js');
+require('@digdir/designsystemet-web');
 var useSynchronizedAnimation = require('../../utilities/hooks/use-synchronized-animation/use-synchronized-animation.js');
 require('../../utilities/roving-focus/roving-focus-item.js');
 require('../../utilities/roving-focus/roving-focus-root.js');

package/dist/cjs/components/spinner/spinner.js

@@ -5,6 +5,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var cl = require('clsx/lite');
 var react = require('react');
 var useMergeRefs = require('../../utilities/hooks/use-merge-refs/use-merge-refs.js');
+require('@digdir/designsystemet-web');
 var useSynchronizedAnimation = require('../../utilities/hooks/use-synchronized-animation/use-synchronized-animation.js');
 require('../../utilities/roving-focus/roving-focus-item.js');
 require('../../utilities/roving-focus/roving-focus-root.js');

package/dist/cjs/components/suggestion/suggestion-clear.js

@@ -3,7 +3,6 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
-var button = require('../button/button.js');
 
 /**
  * Component that provides a clear button for the Suggestion input.
@@ -18,7 +17,10 @@ var button = require('../button/button.js');
  * </Suggestion>
  */
 const SuggestionClear = react.forwardRef(function SuggestionClear({ 'aria-label': label = 'Tøm', ...rest }, ref) {
-    return (jsxRuntime.jsx(button.Button, { "aria-label": label, asChild: true, icon: true, hidden: true, ref: ref, variant: 'tertiary', ...rest, children: jsxRuntime.jsx("del", {}) }));
+    return (
+    //biome-ignore lint/a11y/useAriaPropsSupportedByRole: <del> needs aria-label when u-combobox makes it the clear button
+    jsxRuntime.jsx("del", { "aria-label": label, hidden: true, ref: ref, suppressHydrationWarning // Since <ds-suggestion> adds attributes
+        : true, ...rest }));
 });
 
 exports.SuggestionClear = SuggestionClear;

package/dist/cjs/components/suggestion/suggestion-empty.js

@@ -4,6 +4,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var suggestion = require('./suggestion.js');
+require('@digdir/designsystemet-web');
 
 /**
  * Component that provides an empty Suggestion list.
@@ -17,7 +18,8 @@ var suggestion = require('./suggestion.js');
  */
 const SuggestionEmpty = react.forwardRef(function SuggestionEmpty(rest, ref) {
     const { isEmpty } = react.useContext(suggestion.SuggestionContext);
-    return isEmpty ? jsxRuntime.jsx("u-option", { "data-empty": true, value: '', ref: ref, ...rest }) : null;
+    return isEmpty ? (jsxRuntime.jsx("u-option", { "data-empty": true, ref: ref, suppressHydrationWarning // Since <u-option> adds attributes
+        : true, value: '', ...rest })) : null;
 });
 
 exports.SuggestionEmpty = SuggestionEmpty;

package/dist/cjs/components/suggestion/suggestion-input.js

@@ -21,14 +21,15 @@ const SuggestionInput = react.forwardRef(function SuggestionList({ value, onInpu
     const { handleFilter } = react.useContext(suggestion.SuggestionContext);
     react.useEffect(handleFilter, [value]); // Filter if controlled value
     if (onChange)
-        console.warn('SuggestionInput: Avoid using onChange, as Suggestion controls the Input. Use onValueChange on Suggest instead, or onInput if fetching API results');
+        console.warn('SuggestionInput: Avoid using onChange, as Suggestion controls the Input. Use onSelectedChange on Suggestion instead, or onInput if fetching API results');
     if (value)
-        console.warn('SuggestionInput: Avoid using value, as Suggestion controls the Input. Use value on Suggest instead.');
+        console.warn('SuggestionInput: Avoid using value, as Suggestion controls the Input. Use selected on Suggestion instead.');
     return (jsxRuntime.jsx(input.Input, { placeholder: '' // We need an empty placeholder for the clear button to be able to show/hide
         , ref: ref, onInput: (event) => {
             onInput?.(event); // Should run first
             handleFilter?.(); // Filter if uncontrolled value
-        }, ...rest }));
+        }, suppressHydrationWarning // Since <ds-suggestion> adds attributes
+        : true, ...rest }));
 });
 
 exports.SuggestionInput = SuggestionInput;

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

@@ -3,8 +3,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
-require('@u-elements/u-datalist');
-var dom = require('@floating-ui/dom');
+require('@digdir/designsystemet-web');
 var suggestion = require('./suggestion.js');
 
 /**
@@ -19,46 +18,11 @@ var suggestion = require('./suggestion.js');
  * </Suggestion>
  */
 const SuggestionList = react.forwardRef(function SuggestionList({ singular = '%d forslag', plural = '%d forslag', className, id, autoPlacement = true, ...rest }, ref) {
-    const { handleFilter, uComboboxRef } = react.useContext(suggestion.SuggestionContext);
+    const { handleFilter } = react.useContext(suggestion.SuggestionContext);
     react.useEffect(handleFilter); // Must run on every render
-    // Position with floating-ui
-    react.useEffect(() => {
-        const trigger = uComboboxRef?.current?.control;
-        const list = uComboboxRef?.current?.list;
-        if (list && trigger) {
-            return dom.autoUpdate(trigger, list, () => {
-                dom.computePosition(trigger, list, {
-                    placement: 'bottom',
-                    strategy: 'fixed',
-                    middleware: [
-                        ...(autoPlacement
-                            ? [
-                                dom.flip({
-                                    fallbackAxisSideDirection: 'start',
-                                    fallbackPlacements: ['top'],
-                                }),
-                                dom.shift(),
-                            ]
-                            : []),
-                        undefined,
-                        triggerWidth,
-                    ],
-                }).then(({ x, y, placement }) => {
-                    const varOperator = placement.startsWith('top') ? '-' : '+';
-                    list.style.translate = `${Math.round(x)}px calc(${Math.round(y)}px ${varOperator} var(--dsc-suggestion-list-gap))`;
-                });
-            });
-        }
-    }, []);
-    return (jsxRuntime.jsx("u-datalist", { "data-nofilter": true, "data-sr-singular": singular, "data-sr-plural": plural, class: className, ref: ref, popover: 'manual', ...rest }));
+    return (jsxRuntime.jsx("u-datalist", { class: className, popover: 'manual' // Is also set by field.ts, but is nice to have in case focus runs before toggle event
+        , "data-nofilter": true, "data-sr-plural": plural, "data-sr-singular": singular, ref: ref, suppressHydrationWarning // Since <u-datalist> adds attributes
+        : true, ...rest }));
 });
-const triggerWidth = {
-    name: 'TriggerWidth',
-    fn(data) {
-        const { elements, rects } = data;
-        elements.floating.style.width = `${rects.reference.width}px`;
-        return data;
-    },
-};
 
 exports.SuggestionList = SuggestionList;

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

@@ -3,6 +3,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
+require('@digdir/designsystemet-web');
 
 /**
  * A component for rendering individual options in the Suggestion list.
@@ -17,7 +18,8 @@ var react = require('react');
  * </Suggestion>
  */
 const SuggestionOption = react.forwardRef(function SuggestionOption({ className, ...rest }, ref) {
-    return (jsxRuntime.jsx("u-option", { class: className, ref: ref, ...rest }));
+    return (jsxRuntime.jsx("u-option", { class: className, ref: ref, suppressHydrationWarning // Since <u-option> adds attributes
+        : true, ...rest }));
 });
 
 exports.SuggestionOption = SuggestionOption;

package/dist/cjs/components/suggestion/suggestion.js

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

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

@@ -2,10 +2,8 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+require('@digdir/designsystemet-web');
 var react = require('react');
-var useMergeRefs = require('../../utilities/hooks/use-merge-refs/use-merge-refs.js');
-var rovingFocusRoot = require('../../utilities/roving-focus/roving-focus-root.js');
-var tabs = require('./tabs.js');
 
 /**
  * The container for all `Tab` components.
@@ -16,10 +14,9 @@ var tabs = require('./tabs.js');
  *  <TabsTab value='2'>Tab 2</TabsTab>
  * </TabsList>
  */
-const TabsList = react.forwardRef(function TabsList({ children, ...rest }, ref) {
-    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 }));
+const TabsList = react.forwardRef(function TabsList({ className, children, ...rest }, ref) {
+    return (jsxRuntime.jsx("ds-tablist", { suppressHydrationWarning // Since <ds-tablist> adds attributes
+        : true, ref: ref, class: className, ...rest, children: children }));
 });
 
 exports.TabsList = TabsList;

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

@@ -2,8 +2,8 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+require('@digdir/designsystemet-web');
 var react = require('react');
-var useMergeRefs = require('../../utilities/hooks/use-merge-refs/use-merge-refs.js');
 var tabs = require('./tabs.js');
 
 /**
@@ -12,33 +12,10 @@ var tabs = require('./tabs.js');
  * @example
  * <TabsPanel value='1'>content 1</TabsPanel>
  */
-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 */
-    react.useEffect(() => {
-        if (!internalRef.current)
-            return;
-        const tabbableElements = internalRef.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
-        setHasTabbableElement(tabbableElements.length > 0);
-    }, [children]);
-    /* get associated button */
-    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 }));
+const TabsPanel = react.forwardRef(function TabsPanel({ children, value, id, className, ...rest }, ref) {
+    const { getPrefixedValue } = react.useContext(tabs.Context);
+    return (jsxRuntime.jsx("ds-tabpanel", { suppressHydrationWarning // Since <ds-tablist> adds attributes
+        : true, ref: ref, id: id ?? getPrefixedValue?.(value), class: className, ...rest, children: children }));
 });
 
 exports.TabsPanel = TabsPanel;

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

@@ -2,8 +2,8 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+require('@digdir/designsystemet-web');
 var react = require('react');
-var rovingFocusItem = require('../../utilities/roving-focus/roving-focus-item.js');
 var tabs = require('./tabs.js');
 
 /**
@@ -12,14 +12,16 @@ var tabs = require('./tabs.js');
  * @example
  * <TabsTab value='1'>Tab 1</TabsTab>
  */
-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", { 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 }) }));
+const TabsTab = react.forwardRef(function TabsTab({ value, className, onClick, ...rest }, ref) {
+    const { onChange, getPrefixedValue } = react.useContext(tabs.Context);
+    return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: ds-tabs IS interactive
+    jsxRuntime.jsx("ds-tab", { "aria-controls": rest['aria-controls'] ?? getPrefixedValue?.(value), "data-value": value, ref: ref, suppressHydrationWarning // Since <ds-tablist> adds attributes
+        : true, onClick: (e) => {
+            if (e.isTrusted)
+                onChange?.(value); // Only call onChange is user actually clicked, not when programmatically clicked/controlled
+            onClick?.(e);
+        }, class: className, ...rest, children: rest.children }));
 });
 
 exports.TabsTab = TabsTab;

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

@@ -2,8 +2,10 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+require('@digdir/designsystemet-web');
 var cl = require('clsx/lite');
 var react = require('react');
+var useMergeRefs = require('../../utilities/hooks/use-merge-refs/use-merge-refs.js');
 
 const Context = react.createContext({});
 /**
@@ -22,10 +24,11 @@ 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());
+    const tabsRef = react.useRef(null);
+    const valuePrefix = react.useId(); // Used to generate unique value-based ids for tabs and panels
+    const mergedRefs = useMergeRefs.useMergeRefs([ref, tabsRef]);
     let onValueChange = onChange;
     if (!isControlled) {
         onValueChange = (newValue) => {
@@ -34,14 +37,21 @@ const Tabs = react.forwardRef(function Tabs({ value, defaultValue, className, on
         };
         value = uncontrolledValue;
     }
+    react.useEffect(() => {
+        if (!isControlled || !tabsRef.current || value === undefined)
+            return;
+        tabsRef.current?.tabList?.tabs?.forEach((tab) => {
+            if (tab.getAttribute('data-value') === value)
+                tab.click();
+        });
+    }, [value, isControlled]);
     return (jsxRuntime.jsx(Context.Provider, { value: {
             value,
             defaultValue,
             onChange: onValueChange,
-            tablistRef,
-            panelButtonMap,
-            setPanelButtonMap,
-        }, children: jsxRuntime.jsx("div", { className: cl('ds-tabs', className), ref: ref, ...rest }) }));
+            getPrefixedValue: (value) => value && `${valuePrefix}-${value}`,
+        }, children: jsxRuntime.jsx("ds-tabs", { suppressHydrationWarning // Since <ds-tablist> adds attributes
+            : true, ref: mergedRefs, class: cl('ds-tabs', className), ...rest }) }));
 });
 
 exports.Context = Context;

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

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

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

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

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

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