@digdir/designsystemet-react 1.5.0 → 1.6.0

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

@@ -19,9 +19,11 @@ const label = (text, count) => text.replace('%d', Math.abs(count).toString());
  */
 const FieldCounter = react.forwardRef(function FieldCounter({ limit, under = '%d tegn igjen', over = '%d tegn for mye', ...rest }, ref) {
     const [count, setCount] = react.useState(0);
+    const fieldInputRef = react.useRef(null);
     const counterRef = react.useRef(null);
     const hasExceededLimit = count > limit;
     const remainder = limit - count;
+    // Listen to native input events (user typing) to update the counter in real time
     react.useEffect(() => {
         const field = counterRef.current?.closest('.ds-field');
         const input = Array.from(field?.getElementsByTagName('*') || []).find(fieldObserver.isInputLike);
@@ -31,9 +33,18 @@ const FieldCounter = react.forwardRef(function FieldCounter({ limit, under = '%d
         };
         if (input)
             onInput({ target: input }); // Initial setup
+        fieldInputRef.current = input;
         field?.addEventListener('input', onInput);
         return () => field?.removeEventListener('input', onInput);
-    }, [setCount]);
+    }, []);
+    /* React does not dispatch a native input event when the value prop changes externally.
+    Since the parent re-renders this component when value changes, we can sync on render. */
+    react.useEffect(() => {
+        if (fieldInputRef.current) {
+            const valueLength = fieldInputRef.current.value.length;
+            setCount((prev) => (prev === valueLength ? prev : valueLength));
+        }
+    });
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { "data-field": 'description', className: 'ds-sr-only', "aria-live": 'polite', ref: counterRef, children: hasExceededLimit && label(over, remainder) }), hasExceededLimit ? (jsxRuntime.jsx(validationMessage.ValidationMessage, { ref: ref, ...rest, children: label(over, remainder) })) : (jsxRuntime.jsx(paragraph.Paragraph, { ref: ref, ...rest, "data-field": 'validation', children: label(under, remainder) }))] }));
 });
 

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

@@ -45,7 +45,7 @@ const Popover = react.forwardRef(function Popover({ id, className, onClose, onOp
                 setInternalOpen((open) => !open);
                 onOpen?.();
             }
-            if (isOutside) {
+            if (isOutside && internalOpen) {
                 setInternalOpen(false);
                 onClose?.();
             }

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

@@ -13,8 +13,8 @@ var useToggleGroupitem = require('./use-toggle-groupitem.js');
  * <ToggleGroupItem value='1'>Toggle 1</ToggleGroupItem>
  */
 const ToggleGroupItem = react.forwardRef(function ToggleGroupItem(rest, ref) {
-    const { active, buttonProps, value } = useToggleGroupitem.useToggleGroupItem(rest);
-    return (jsxRuntime.jsx(rovingFocusItem.RovingFocusItem, { asChild: true, value: value, children: jsxRuntime.jsx(button.Button, { variant: active ? 'primary' : 'tertiary', ref: ref, ...rest, ...buttonProps }) }));
+    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 }) }));
 });
 
 exports.ToggleGroupItem = ToggleGroupItem;

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

@@ -17,7 +17,7 @@ const ToggleGroupContext = react.createContext({});
  *   <ToggleGroup.Item value='3'>Toggle 3</ToggleGroup.Item>
  * </ToggleGroup>
  */
-const ToggleGroup = react.forwardRef(function ToggleGroup({ children, value, defaultValue, onChange, name, className, ...rest }, ref) {
+const ToggleGroup = react.forwardRef(function ToggleGroup({ children, variant = 'primary', value, defaultValue, onChange, name, className, ...rest }, ref) {
     const nameId = react.useId();
     const isControlled = value !== undefined;
     const [uncontrolledValue, setUncontrolledValue] = react.useState(defaultValue);
@@ -30,11 +30,12 @@ const ToggleGroup = react.forwardRef(function ToggleGroup({ children, value, def
         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', ref: ref, ...rest, children: [name && jsxRuntime.jsx("input", { type: 'hidden', name: name, value: value }), children] }) }) }));
+        }, 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] }) }) }));
 });
 
 exports.ToggleGroup = ToggleGroup;

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

@@ -11,11 +11,13 @@ const useToggleGroupItem = (props) => {
     const toggleGroup$1 = react.useContext(toggleGroup.ToggleGroupContext);
     const value = props.value ?? genValue;
     const active = toggleGroup$1.value === value;
+    const variant = toggleGroup$1.variant;
     const buttonId = `togglegroup-item-${react.useId()}`;
     return {
         ...rest,
         active: active,
         value,
+        variant,
         buttonProps: {
             id: buttonId,
             'aria-checked': active,

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

@@ -17,9 +17,11 @@ const label = (text, count) => text.replace('%d', Math.abs(count).toString());
  */
 const FieldCounter = forwardRef(function FieldCounter({ limit, under = '%d tegn igjen', over = '%d tegn for mye', ...rest }, ref) {
     const [count, setCount] = useState(0);
+    const fieldInputRef = useRef(null);
     const counterRef = useRef(null);
     const hasExceededLimit = count > limit;
     const remainder = limit - count;
+    // Listen to native input events (user typing) to update the counter in real time
     useEffect(() => {
         const field = counterRef.current?.closest('.ds-field');
         const input = Array.from(field?.getElementsByTagName('*') || []).find(isInputLike);
@@ -29,9 +31,18 @@ const FieldCounter = forwardRef(function FieldCounter({ limit, under = '%d tegn
         };
         if (input)
             onInput({ target: input }); // Initial setup
+        fieldInputRef.current = input;
         field?.addEventListener('input', onInput);
         return () => field?.removeEventListener('input', onInput);
-    }, [setCount]);
+    }, []);
+    /* React does not dispatch a native input event when the value prop changes externally.
+    Since the parent re-renders this component when value changes, we can sync on render. */
+    useEffect(() => {
+        if (fieldInputRef.current) {
+            const valueLength = fieldInputRef.current.value.length;
+            setCount((prev) => (prev === valueLength ? prev : valueLength));
+        }
+    });
     return (jsxs(Fragment, { children: [jsx("div", { "data-field": 'description', className: 'ds-sr-only', "aria-live": 'polite', ref: counterRef, children: hasExceededLimit && label(over, remainder) }), hasExceededLimit ? (jsx(ValidationMessage, { ref: ref, ...rest, children: label(over, remainder) })) : (jsx(Paragraph, { ref: ref, ...rest, "data-field": 'validation', children: label(under, remainder) }))] }));
 });
 

package/dist/esm/components/popover/popover.js

@@ -43,7 +43,7 @@ const Popover = forwardRef(function Popover({ id, className, onClose, onOpen, op
                 setInternalOpen((open) => !open);
                 onOpen?.();
             }
-            if (isOutside) {
+            if (isOutside && internalOpen) {
                 setInternalOpen(false);
                 onClose?.();
             }

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

@@ -11,8 +11,8 @@ import { useToggleGroupItem } from './use-toggle-groupitem.js';
  * <ToggleGroupItem value='1'>Toggle 1</ToggleGroupItem>
  */
 const ToggleGroupItem = forwardRef(function ToggleGroupItem(rest, ref) {
-    const { active, buttonProps, value } = useToggleGroupItem(rest);
-    return (jsx(RovingFocusItem, { asChild: true, value: value, children: jsx(Button, { variant: active ? 'primary' : 'tertiary', ref: ref, ...rest, ...buttonProps }) }));
+    const { active, buttonProps, value, variant } = useToggleGroupItem(rest);
+    return (jsx(RovingFocusItem, { asChild: true, value: value, children: jsx(Button, { variant: active ? variant : 'tertiary', ref: ref, ...rest, ...buttonProps }) }));
 });
 
 export { ToggleGroupItem };

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

@@ -15,7 +15,7 @@ const ToggleGroupContext = createContext({});
  *   <ToggleGroup.Item value='3'>Toggle 3</ToggleGroup.Item>
  * </ToggleGroup>
  */
-const ToggleGroup = forwardRef(function ToggleGroup({ children, value, defaultValue, onChange, name, className, ...rest }, ref) {
+const ToggleGroup = forwardRef(function ToggleGroup({ children, variant = 'primary', value, defaultValue, onChange, name, className, ...rest }, ref) {
     const nameId = useId();
     const isControlled = value !== undefined;
     const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
@@ -28,11 +28,12 @@ const ToggleGroup = forwardRef(function ToggleGroup({ children, value, defaultVa
         value = uncontrolledValue;
     }
     return (jsx(ToggleGroupContext.Provider, { value: {
+            variant,
             value,
             defaultValue,
             name: name ?? `togglegroup-name-${nameId}`,
             onChange: onValueChange,
-        }, children: jsx(RovingFocusRoot, { asChild: true, activeValue: value, orientation: 'ambiguous', children: jsxs("div", { className: cl('ds-toggle-group', className), role: 'radiogroup', ref: ref, ...rest, children: [name && jsx("input", { type: 'hidden', name: name, value: value }), children] }) }) }));
+        }, children: jsx(RovingFocusRoot, { asChild: true, activeValue: value, orientation: 'ambiguous', children: jsxs("div", { className: cl('ds-toggle-group', className), role: 'radiogroup', "data-variant": variant, ref: ref, ...rest, children: [name && jsx("input", { type: 'hidden', name: name, value: value }), children] }) }) }));
 });
 
 export { ToggleGroup, ToggleGroupContext };

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

@@ -9,11 +9,13 @@ const useToggleGroupItem = (props) => {
     const toggleGroup = useContext(ToggleGroupContext);
     const value = props.value ?? genValue;
     const active = toggleGroup.value === value;
+    const variant = toggleGroup.variant;
     const buttonId = `togglegroup-item-${useId()}`;
     return {
         ...rest,
         active: active,
         value,
+        variant,
         buttonProps: {
             id: buttonId,
             'aria-checked': active,

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

@@ -2,11 +2,16 @@ import type { Size } from '@digdir/designsystemet/types';
 import type { HTMLAttributes, ReactNode } from 'react';
 import type { DefaultProps } from '../../types';
 import type { MergeRight } from '../../utilities';
-export type AvatarProps = MergeRight<DefaultProps & HTMLAttributes<HTMLSpanElement>, {
+type AriaLabel = {
     /**
      * The name of the person the avatar represents.
      */
     'aria-label': string;
+};
+type AriaHidden = Partial<AriaLabel> & {
+    'aria-hidden': true | 'true';
+};
+export type AvatarProps = MergeRight<DefaultProps & HTMLAttributes<HTMLSpanElement>, (AriaLabel | AriaHidden) & {
     /**
      * The size of the avatar.
      */
@@ -44,30 +49,6 @@ export type AvatarProps = MergeRight<DefaultProps & HTMLAttributes<HTMLSpanEleme
  *  <Icon />
  * </Avatar>
  */
-export declare const Avatar: React.ForwardRefExoticComponent<Omit<DefaultProps & HTMLAttributes<HTMLSpanElement>, "data-size" | "aria-label" | "children" | "variant" | "initials"> & {
-    /**
-     * The name of the person the avatar represents.
-     */
-    'aria-label': string;
-    /**
-     * The size of the avatar.
-     */
-    'data-size'?: "xs" | Size;
-    /**
-     * The shape of the avatar.
-     *
-     * @default 'circle'
-     */
-    variant?: "circle" | "square";
-    /**
-     * Initials to display inside the avatar.
-     */
-    initials?: string;
-    /**
-     * Image, icon or initials to display inside the avatar.
-     *
-     * Gets `aria-hidden="true"`
-     */
-    children?: ReactNode;
-} & React.RefAttributes<HTMLSpanElement>>;
+export declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
+export {};
 //# sourceMappingURL=avatar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,8BAA8B,CAAC;AAGzD,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,MAAM,WAAW,GAAG,UAAU,CAClC,YAAY,GAAG,cAAc,CAAC,eAAe,CAAC,EAC9C;IACE;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B;;;;OAIG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC9B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CACF,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,MAAM;IA3Cf;;OAEG;kBACW,MAAM;IACpB;;OAEG;kBACW,IAAI,GAAG,IAAI;IACzB;;;;OAIG;cACO,QAAQ,GAAG,QAAQ;IAC7B;;OAEG;eACQ,MAAM;IACjB;;;;OAIG;eACQ,SAAS;yCAkDtB,CAAC"}
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,8BAA8B,CAAC;AAGzD,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,KAAK,SAAS,GAAG;IACf;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AACF,KAAK,UAAU,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG;IAAE,aAAa,EAAE,IAAI,GAAG,MAAM,CAAA;CAAE,CAAC;AAExE,MAAM,MAAM,WAAW,GAAG,UAAU,CAClC,YAAY,GAAG,cAAc,CAAC,eAAe,CAAC,EAC9C,CAAC,SAAS,GAAG,UAAU,CAAC,GAAG;IACzB;;OAEG;IACH,WAAW,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B;;;;OAIG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC9B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CACF,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,MAAM,qFA8BjB,CAAC"}

package/dist/types/components/field/field-counter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"field-counter.d.ts","sourceRoot":"","sources":["../../../src/components/field/field-counter.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,sBAAsB,EAC5B,MAAM,0CAA0C,CAAC;AAGlD,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;QAII;IACJ,KAAK,EAAE,MAAM,CAAC;CACf,GAAG,sBAAsB,CAAC;AAK3B;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY;IAlCvB;;;;;OAKG;WACI,MAAM;IACb;;;;;OAKG;YACK,MAAM;IACd;;;;QAII;WACG,MAAM;;;;8CA8Dd,CAAC"}
+{"version":3,"file":"field-counter.d.ts","sourceRoot":"","sources":["../../../src/components/field/field-counter.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,sBAAsB,EAC5B,MAAM,0CAA0C,CAAC;AAGlD,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;QAII;IACJ,KAAK,EAAE,MAAM,CAAC;CACf,GAAG,sBAAsB,CAAC;AAK3B;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY;IAlCvB;;;;;OAKG;WACI,MAAM;IACb;;;;;OAKG;YACK,MAAM;IACd;;;;QAII;WACG,MAAM;;;;8CA0Ed,CAAC"}

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

@@ -10,7 +10,6 @@ export type SpinnerProps = {
     'data-size'?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 } & ComponentPropsWithoutRef<'svg'> & ({
     'aria-label': string;
-    'aria-hidden'?: never;
 } | {
     'aria-label'?: string;
     'aria-hidden': true | 'true';

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

@@ -1 +1 @@
-{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/spinner.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,wBAAwB,EAAc,MAAM,OAAO,CAAC;AAIlE,MAAM,MAAM,YAAY,GAAG;IACzB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CACxD,GAAG,wBAAwB,CAAC,KAAK,CAAC,GACjC,CACI;IAAE,YAAY,EAAE,MAAM,CAAC;IAAC,aAAa,CAAC,EAAE,KAAK,CAAA;CAAE,GAC/C;IAAE,YAAY,CAAC,EAAE,MAAM,CAAC;IAAC,aAAa,EAAE,IAAI,GAAG,MAAM,CAAA;CAAE,CAC1D,CAAC;AAEJ;;;;;GAKG;AACH,eAAO,MAAM,OAAO,oFA0ClB,CAAC"}
+{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/spinner.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,wBAAwB,EAAc,MAAM,OAAO,CAAC;AAIlE,MAAM,MAAM,YAAY,GAAG;IACzB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CACxD,GAAG,wBAAwB,CAAC,KAAK,CAAC,GACjC,CACI;IAAE,YAAY,EAAE,MAAM,CAAA;CAAE,GACxB;IAAE,YAAY,CAAC,EAAE,MAAM,CAAC;IAAC,aAAa,EAAE,IAAI,GAAG,MAAM,CAAA;CAAE,CAC1D,CAAC;AAEJ;;;;;GAKG;AACH,eAAO,MAAM,OAAO,oFA0ClB,CAAC"}

package/dist/types/components/toggle-group/toggle-group.d.ts

@@ -2,6 +2,7 @@ import type { HTMLAttributes } from 'react';
 import type { DefaultProps } from '../../types';
 import type { MergeRight } from '../../utilities';
 export type ToggleGroupContextProps = {
+    variant?: 'primary' | 'secondary';
     value?: string;
     defaultValue?: string;
     onChange?: (value: string) => void;
@@ -9,6 +10,11 @@ export type ToggleGroupContextProps = {
 };
 export declare const ToggleGroupContext: React.Context<ToggleGroupContextProps>;
 export type ToggleGroupProps = MergeRight<DefaultProps & Omit<HTMLAttributes<HTMLDivElement>, 'value' | 'onChange'>, {
+    /**
+     * Specify which variant to use
+     * @default 'primary'
+     */
+    variant?: 'primary' | 'secondary';
     /**
      * Controlled state for `ToggleGroup` component.
      */
@@ -36,7 +42,12 @@ export type ToggleGroupProps = MergeRight<DefaultProps & Omit<HTMLAttributes<HTM
  *   <ToggleGroup.Item value='3'>Toggle 3</ToggleGroup.Item>
  * </ToggleGroup>
  */
-export declare const ToggleGroup: React.ForwardRefExoticComponent<Omit<DefaultProps & Omit<HTMLAttributes<HTMLDivElement>, "value" | "onChange">, "defaultValue" | "name" | "value" | "onChange"> & {
+export declare const ToggleGroup: React.ForwardRefExoticComponent<Omit<DefaultProps & Omit<HTMLAttributes<HTMLDivElement>, "value" | "onChange">, "defaultValue" | "name" | "value" | "onChange" | "variant"> & {
+    /**
+     * Specify which variant to use
+     * @default 'primary'
+     */
+    variant?: "primary" | "secondary";
     /**
      * Controlled state for `ToggleGroup` component.
      */

package/dist/types/components/toggle-group/toggle-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-group.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-group/toggle-group.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;AAGlD,MAAM,MAAM,uBAAuB,GAAG;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,eAAO,MAAM,kBAAkB,wCAA6C,CAAC;AAE7E,MAAM,MAAM,gBAAgB,GAAG,UAAU,CACvC,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,EACzE;IACE;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CACF,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,WAAW;IA7BpB;;OAEG;YACK,MAAM;IACd;;OAEG;mBACY,MAAM;IACrB;;OAEG;eACQ,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;IAClC;;OAEG;WACI,MAAM;wCAyDhB,CAAC"}
+{"version":3,"file":"toggle-group.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-group/toggle-group.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;AAGlD,MAAM,MAAM,uBAAuB,GAAG;IACpC,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,eAAO,MAAM,kBAAkB,wCAA6C,CAAC;AAE7E,MAAM,MAAM,gBAAgB,GAAG,UAAU,CACvC,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,EACzE;IACE;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAClC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CACF,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,WAAW;IAlCpB;;;OAGG;cACO,SAAS,GAAG,WAAW;IACjC;;OAEG;YACK,MAAM;IACd;;OAEG;mBACY,MAAM;IACrB;;OAEG;eACQ,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;IAClC;;OAEG;WACI,MAAM;wCAoEhB,CAAC"}

package/dist/types/components/toggle-group/use-toggle-groupitem.d.ts

@@ -2,6 +2,7 @@ import type { ButtonProps } from '../button/button';
 import type { ToggleGroupItemProps } from './toggle-group-item';
 type UseToggleGroupItem = (props: ToggleGroupItemProps) => {
     active: boolean;
+    variant?: 'primary' | 'secondary';
     value: string;
     buttonProps?: Pick<ButtonProps, 'id' | 'onClick' | 'role' | 'aria-checked' | 'aria-current' | 'name'>;
 };

package/dist/types/components/toggle-group/use-toggle-groupitem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-toggle-groupitem.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-group/use-toggle-groupitem.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEpD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAEhE,KAAK,kBAAkB,GAAG,CAAC,KAAK,EAAE,oBAAoB,KAAK;IACzD,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,IAAI,CAChB,WAAW,EACX,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,cAAc,GAAG,cAAc,GAAG,MAAM,CACrE,CAAC;CACH,CAAC;AAEF,2FAA2F;AAC3F,eAAO,MAAM,kBAAkB,EAAE,kBAyBhC,CAAC"}
+{"version":3,"file":"use-toggle-groupitem.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-group/use-toggle-groupitem.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEpD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAEhE,KAAK,kBAAkB,GAAG,CAAC,KAAK,EAAE,oBAAoB,KAAK;IACzD,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,IAAI,CAChB,WAAW,EACX,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,cAAc,GAAG,cAAc,GAAG,MAAM,CACrE,CAAC;CACH,CAAC;AAEF,2FAA2F;AAC3F,eAAO,MAAM,kBAAkB,EAAE,kBA2BhC,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@digdir/designsystemet-react",
   "type": "module",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "React components for Designsystemet",
   "author": "Designsystemet team",
   "repository": {
@@ -38,7 +38,7 @@
   "dependencies": {
     "@floating-ui/dom": "^1.7.4",
     "@floating-ui/react": "0.26.23",
-    "@navikt/aksel-icons": "^7.29.1",
+    "@navikt/aksel-icons": "^7.30.1",
     "@radix-ui/react-slot": "^1.2.3",
     "@tanstack/react-virtual": "^3.13.12",
     "@u-elements/u-combobox": "^1.0.1",
@@ -49,26 +49,26 @@
   "devDependencies": {
     "@rollup/plugin-commonjs": "^28.0.6",
     "@rollup/plugin-node-resolve": "^16.0.1",
-    "@storybook/addon-docs": "^9.1.5",
-    "@storybook/addon-vitest": "^9.1.5",
-    "@storybook/react-vite": "^9.1.5",
+    "@storybook/addon-docs": "^9.1.7",
+    "@storybook/addon-vitest": "^9.1.7",
+    "@storybook/react-vite": "^9.1.7",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.8.0",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@types/react": "^19.1.12",
+    "@types/react": "^19.1.13",
     "@types/react-dom": "^19.1.9",
     "jsdom": "^26.1.0",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "rimraf": "^6.0.1",
-    "rollup": "^4.50.1",
+    "rollup": "^4.52.0",
     "rollup-plugin-copy": "^3.5.0",
-    "storybook": "^9.1.5",
+    "storybook": "^9.1.7",
     "tsx": "4.20.5",
     "typescript": "^5.9.2",
-    "@digdir/designsystemet": "^1.5.0",
-    "@digdir/designsystemet-css": "^1.5.0"
+    "@digdir/designsystemet": "^1.6.0",
+    "@digdir/designsystemet-css": "^1.6.0"
   },
   "scripts": {
     "build": "pnpm run clean && tsc -b tsconfig.lib.json --emitDeclarationOnly false && rollup -c --bundleConfigAsCjs",