@dnb/eufemia 10.37.0 → 10.38.0

package/cjs/components/height-animation/useHeightAnimation.js

@@ -17,6 +17,7 @@ function useHeightAnimation(targetRef) {
     open = true,
     animate = true,
     children = null,
+    compensateForGap,
     onInit = null,
     onOpen = null,
     onAnimationStart = null,
@@ -28,9 +29,20 @@ function useHeightAnimation(targetRef) {
   const [isVisible, setIsVisible] = (0, _react.useState)(false);
   const [isAnimating, setIsAnimating] = (0, _react.useState)(false);
   const [isVisibleParallax, setParallax] = (0, _react.useState)(open);
+  const eventsRef = (0, _react.useRef)({
+    onInit,
+    onAnimationEnd,
+    onAnimationStart,
+    onOpen
+  });
+  eventsRef.current.onInit = onInit;
+  eventsRef.current.onAnimationEnd = onAnimationEnd;
+  eventsRef.current.onAnimationStart = onAnimationStart;
+  eventsRef.current.onOpen = onOpen;
   useLayoutEffect(() => {
+    var _eventsRef$current$on, _eventsRef$current;
     instRef.current = new _HeightAnimationInstance.default();
-    onInit === null || onInit === void 0 ? void 0 : onInit(instRef.current);
+    (_eventsRef$current$on = (_eventsRef$current = eventsRef.current).onInit) === null || _eventsRef$current$on === void 0 ? void 0 : _eventsRef$current$on.call(_eventsRef$current, instRef.current);
     return () => {
       var _instRef$current;
       (_instRef$current = instRef.current) === null || _instRef$current === void 0 ? void 0 : _instRef$current.remove();
@@ -47,10 +59,25 @@ function useHeightAnimation(targetRef) {
       });
     }
   }, [animate]);
+  const handleCompensateForGap = (0, _react.useCallback)(() => {
+    if (compensateForGap) {
+      let gap = compensateForGap;
+      const {
+        elem
+      } = instRef.current;
+      if (compensateForGap === 'auto') {
+        gap = window.getComputedStyle(elem.parentElement).getPropertyValue('row-gap');
+      }
+      elem.style.marginTop = `calc(${gap} * -1)`;
+      const inner = elem.querySelector('.compensateForGap');
+      inner.style.marginTop = gap;
+    }
+  }, [compensateForGap]);
   useLayoutEffect(() => {
     instRef.current.onStart(state => {
       switch (state) {
         case 'opening':
+          handleCompensateForGap();
           setIsVisible(true);
           setParallax(true);
           setIsAnimating(true);
@@ -64,33 +91,36 @@ function useHeightAnimation(targetRef) {
           break;
       }
       if (!isInitialRenderRef.current) {
-        onAnimationStart === null || onAnimationStart === void 0 ? void 0 : onAnimationStart(state);
+        var _eventsRef$current$on2, _eventsRef$current2;
+        (_eventsRef$current$on2 = (_eventsRef$current2 = eventsRef.current).onAnimationStart) === null || _eventsRef$current$on2 === void 0 ? void 0 : _eventsRef$current$on2.call(_eventsRef$current2, state);
       }
     });
     instRef.current.onEnd(state => {
+      var _eventsRef$current$on3, _eventsRef$current3, _eventsRef$current$on4, _eventsRef$current4;
       switch (state) {
         case 'opened':
           setIsVisible(true);
           setIsOpen(true);
           setIsAnimating(false);
-          onOpen === null || onOpen === void 0 ? void 0 : onOpen(true);
+          (_eventsRef$current$on3 = (_eventsRef$current3 = eventsRef.current).onOpen) === null || _eventsRef$current$on3 === void 0 ? void 0 : _eventsRef$current$on3.call(_eventsRef$current3, true);
           break;
         case 'closed':
           setIsVisible(false);
           setIsOpen(false);
           setParallax(false);
           setIsAnimating(false);
-          onOpen === null || onOpen === void 0 ? void 0 : onOpen(false);
+          (_eventsRef$current$on4 = (_eventsRef$current4 = eventsRef.current).onOpen) === null || _eventsRef$current$on4 === void 0 ? void 0 : _eventsRef$current$on4.call(_eventsRef$current4, false);
           break;
         case 'adjusted':
           setIsAnimating(false);
           break;
       }
       if (!isInitialRenderRef.current) {
-        onAnimationEnd === null || onAnimationEnd === void 0 ? void 0 : onAnimationEnd(state);
+        var _eventsRef$current$on5, _eventsRef$current5;
+        (_eventsRef$current$on5 = (_eventsRef$current5 = eventsRef.current).onAnimationEnd) === null || _eventsRef$current$on5 === void 0 ? void 0 : _eventsRef$current$on5.call(_eventsRef$current5, state);
       }
     });
-  }, []);
+  }, [compensateForGap, handleCompensateForGap]);
   useOpenClose({
     open,
     instRef,

package/cjs/components/height-animation/useHeightAnimation.js.map

@@ -1 +1 @@
-{"version":3,"file":"useHeightAnimation.js","names":["_react","_interopRequireWildcard","require","_HeightAnimationInstance","_interopRequireDefault","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","useLayoutEffect","window","React","useEffect","useHeightAnimation","targetRef","_instRef$current2","open","animate","children","onInit","onOpen","onAnimationStart","onAnimationEnd","arguments","length","undefined","instRef","useRef","isInitialRenderRef","globalThis","readjustTime","isOpen","setIsOpen","useState","isVisible","setIsVisible","isAnimating","setIsAnimating","isVisibleParallax","setParallax","current","HeightAnimationInstance","_instRef$current","remove","setOptions","global","IS_TEST","onStart","state","onEnd","useOpenClose","useAdjust","firstPaintStyle","isInDOM","_ref","isTest","process","env","NODE_ENV","setElement","setAsOpen","setAsClosed","close","_targetRef$current","event","CustomEvent","dispatchEvent","run","bypassTime","_window$requestAnimat","_window","requestAnimationFrame","_ref2","fromHeight","timer","Date","now","shouldAdjust","_instRef$current3","useMemo","_instRef$current4","getHeight","elem","style","height","toHeight","adjustTo"],"sources":["../../../../src/components/height-animation/useHeightAnimation.tsx"],"sourcesContent":["import React, { useMemo, useRef, useState } from 'react'\nimport HeightAnimationInstance from './HeightAnimationInstance'\n\n// SSR warning fix: https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85\nconst useLayoutEffect =\n  typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect\n\nexport type useHeightAnimationOptions = {\n  /**\n   * Set to `true`, when initially `false` was given, to animate from 0px to auto.\n   * Default: true\n   */\n  open?: boolean\n\n  /**\n   * Set to `false` to omit the animation.\n   * Default: true\n   */\n  animate?: boolean\n\n  /**\n   * In order to let the Hook know when children has changed\n   */\n  children?: React.ReactNode | HTMLElement\n\n  /**\n   * Is called once before mounting the component (useLayoutEffect)\n   */\n  onInit?: (instance: HeightAnimationInstance) => void\n\n  /**\n   * Is called when fully opened or closed\n   */\n  onOpen?: (isOpen: boolean) => void\n\n  /**\n   * Is called when animation has started.\n   */\n  onAnimationStart?: (state: HeightAnimationOnStartTypes) => void\n\n  /**\n   * Is called when animation is done and the full height is reached.\n   */\n  onAnimationEnd?: (state: HeightAnimationOnEndTypes) => void\n}\n\nexport type HeightAnimationOnStartTypes =\n  | 'opening'\n  | 'closing'\n  | 'adjusting'\n\nexport type HeightAnimationOnEndTypes = 'opened' | 'closed' | 'adjusted'\n\nexport function useHeightAnimation(\n  targetRef: React.RefObject<HTMLElement>,\n  {\n    open = true,\n    animate = true,\n    children = null,\n    onInit = null,\n    onOpen = null,\n    onAnimationStart = null,\n    onAnimationEnd = null,\n  }: useHeightAnimationOptions = {}\n) {\n  const instRef = useRef<HeightAnimationInstance>(null)\n  const isInitialRenderRef = useRef(\n    typeof globalThis !== 'undefined'\n      ? globalThis.readjustTime !== -1\n      : true\n  )\n\n  const [isOpen, setIsOpen] = useState(open)\n  const [isVisible, setIsVisible] = useState(false)\n  const [isAnimating, setIsAnimating] = useState(false)\n  const [isVisibleParallax, setParallax] = useState(open)\n\n  useLayoutEffect(() => {\n    instRef.current = new HeightAnimationInstance()\n    onInit?.(instRef.current)\n    return () => {\n      instRef.current?.remove()\n      instRef.current = null\n    }\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  useLayoutEffect(() => {\n    instRef.current.setOptions({ animate })\n\n    if (typeof global !== 'undefined' && globalThis.IS_TEST) {\n      instRef.current.setOptions({ animate: false })\n    }\n  }, [animate])\n\n  useLayoutEffect(() => {\n    instRef.current.onStart((state: HeightAnimationOnStartTypes) => {\n      switch (state) {\n        case 'opening':\n          setIsVisible(true)\n          setParallax(true)\n          setIsAnimating(true)\n          break\n\n        case 'closing':\n          setParallax(false)\n          setIsAnimating(true)\n          break\n\n        case 'adjusting':\n          setIsAnimating(true)\n          break\n      }\n\n      if (!isInitialRenderRef.current) {\n        onAnimationStart?.(state)\n      }\n    })\n\n    instRef.current.onEnd((state: HeightAnimationOnEndTypes) => {\n      switch (state) {\n        case 'opened':\n          setIsVisible(true)\n          setIsOpen(true)\n          setIsAnimating(false)\n          onOpen?.(true)\n          break\n\n        case 'closed':\n          setIsVisible(false)\n          setIsOpen(false)\n          setParallax(false)\n          setIsAnimating(false)\n          onOpen?.(false)\n          break\n\n        case 'adjusted':\n          setIsAnimating(false)\n          break\n      }\n\n      if (!isInitialRenderRef.current) {\n        onAnimationEnd?.(state)\n      }\n    })\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  useOpenClose({ open, instRef, isInitialRenderRef, targetRef })\n  useAdjust({ children, instRef, isInitialRenderRef, targetRef })\n\n  /**\n   * Returns the first paint style, to be used for the initial render,\n   * to avoid flickering.\n   */\n  const firstPaintStyle:\n    | typeof instRef.current.firstPaintStyle\n    | Record<string, never> =\n    (open &&\n      !isVisible &&\n      !isAnimating &&\n      instRef.current?.firstPaintStyle) ||\n    {}\n  const isInDOM = open || isVisible\n\n  return {\n    open,\n    isOpen,\n    isInDOM,\n    isVisible,\n    isVisibleParallax,\n    isAnimating,\n    firstPaintStyle,\n  }\n}\n\nfunction useOpenClose({ open, instRef, isInitialRenderRef, targetRef }) {\n  const isTest =\n    typeof process !== 'undefined' &&\n    process.env.NODE_ENV === 'test' &&\n    typeof globalThis.IS_TEST === 'undefined'\n\n  useLayoutEffect(() => {\n    instRef.current.setElement(targetRef.current)\n\n    if (\n      !targetRef.current ||\n      (instRef.current.state === 'init' && isInitialRenderRef.current)\n    ) {\n      if (open) {\n        instRef.current.setAsOpen()\n      } else {\n        instRef.current.setAsClosed()\n      }\n    } else {\n      if (open) {\n        instRef.current.open()\n      } else {\n        instRef.current.close()\n      }\n    }\n\n    // For testing purposes, we need to trigger the transitionend event\n    if (isTest) {\n      const event = new CustomEvent('transitionend')\n      targetRef.current?.dispatchEvent(event)\n    }\n  }, [open, targetRef, instRef, isInitialRenderRef, isTest])\n\n  useLayoutEffect(() => {\n    const run = () => {\n      isInitialRenderRef.current = false\n    }\n    if (globalThis.bypassTime === -1 || isTest) {\n      run()\n    } else {\n      window.requestAnimationFrame?.(run)\n    }\n  }, [isInitialRenderRef, isTest])\n}\n\nfunction useAdjust({ children, instRef, isInitialRenderRef, targetRef }) {\n  const fromHeight = useRef(0)\n\n  const [timer] = useState(() => Date.now())\n\n  /**\n   * Wait for some criteria and a certain time, before we adjust the height,\n   * so it will not run when a open/close animation is running.\n   */\n  const shouldAdjust = () => {\n    switch (instRef.current?.state) {\n      case 'opened':\n      case 'adjusted':\n      case 'adjusting':\n        return (\n          !isInitialRenderRef.current &&\n          Date.now() - timer > (globalThis.readjustTime || 100)\n        )\n    }\n\n    return false\n  }\n\n  useMemo(() => {\n    if (shouldAdjust()) {\n      fromHeight.current = instRef.current?.getHeight()\n    }\n  }, [children]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  useLayoutEffect(() => {\n    if (shouldAdjust()) {\n      /**\n       * In certain cases, the targetRef.current is outdated, so we need to set it again.\n       * E.g. in Tabs.js, when we switch tabs, the targetRef.current is not updated.\n       */\n      instRef.current.setElement(targetRef.current)\n\n      /**\n       * Ensure we don't have height, while we get the \"toHeight\" again.\n       * We may move this inside of the HeightAnimationInstance class later,\n       * but the \"GlobalStatus\" is currently relying on \"getUnknownHeight\" inside of adjustTo.\n       */\n      instRef.current.elem.style.height = ''\n\n      /**\n       * Use getHeight instead of getUnknownHeight because of the additional,\n       * disturbing DOM manipulation.\n       */\n      const toHeight = instRef.current.getHeight()\n\n      instRef.current.adjustTo(fromHeight.current, toHeight)\n    }\n  }, [children]) // eslint-disable-line react-hooks/exhaustive-deps\n}\n"],"mappings":"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"}
+{"version":3,"file":"useHeightAnimation.js","names":["_react","_interopRequireWildcard","require","_HeightAnimationInstance","_interopRequireDefault","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","useLayoutEffect","window","React","useEffect","useHeightAnimation","targetRef","_instRef$current2","open","animate","children","compensateForGap","onInit","onOpen","onAnimationStart","onAnimationEnd","arguments","length","undefined","instRef","useRef","isInitialRenderRef","globalThis","readjustTime","isOpen","setIsOpen","useState","isVisible","setIsVisible","isAnimating","setIsAnimating","isVisibleParallax","setParallax","eventsRef","current","_eventsRef$current$on","_eventsRef$current","HeightAnimationInstance","_instRef$current","remove","setOptions","global","IS_TEST","handleCompensateForGap","useCallback","gap","elem","getComputedStyle","parentElement","getPropertyValue","style","marginTop","inner","querySelector","onStart","state","_eventsRef$current$on2","_eventsRef$current2","onEnd","_eventsRef$current$on3","_eventsRef$current3","_eventsRef$current$on4","_eventsRef$current4","_eventsRef$current$on5","_eventsRef$current5","useOpenClose","useAdjust","firstPaintStyle","isInDOM","_ref","isTest","process","env","NODE_ENV","setElement","setAsOpen","setAsClosed","close","_targetRef$current","event","CustomEvent","dispatchEvent","run","bypassTime","_window$requestAnimat","_window","requestAnimationFrame","_ref2","fromHeight","timer","Date","now","shouldAdjust","_instRef$current3","useMemo","_instRef$current4","getHeight","height","toHeight","adjustTo"],"sources":["../../../../src/components/height-animation/useHeightAnimation.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useRef, useState } from 'react'\nimport HeightAnimationInstance from './HeightAnimationInstance'\n\n// SSR warning fix: https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85\nconst useLayoutEffect =\n  typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect\n\nexport type useHeightAnimationOptions = {\n  /**\n   * Set to `true`, when initially `false` was given, to animate from 0px to auto.\n   * Default: true\n   */\n  open?: boolean\n\n  /**\n   * Set to `false` to omit the animation.\n   * Default: true\n   */\n  animate?: boolean\n\n  /**\n   * To compensate for CSS gap between the rows, so animation does not jump during the animation.\n   * Provide a CSS unit or `var(--row-gap)`.\n   */\n  compensateForGap?: string | 'auto'\n\n  /**\n   * In order to let the Hook know when children has changed\n   */\n  children?: React.ReactNode | HTMLElement\n\n  /**\n   * Is called once before mounting the component (useLayoutEffect)\n   */\n  onInit?: (instance: HeightAnimationInstance) => void\n\n  /**\n   * Is called when fully opened or closed\n   */\n  onOpen?: (isOpen: boolean) => void\n\n  /**\n   * Is called when animation has started.\n   */\n  onAnimationStart?: (state: HeightAnimationOnStartTypes) => void\n\n  /**\n   * Is called when animation is done and the full height is reached.\n   */\n  onAnimationEnd?: (state: HeightAnimationOnEndTypes) => void\n}\n\nexport type HeightAnimationOnStartTypes =\n  | 'opening'\n  | 'closing'\n  | 'adjusting'\n\nexport type HeightAnimationOnEndTypes = 'opened' | 'closed' | 'adjusted'\n\nexport function useHeightAnimation(\n  targetRef: React.RefObject<HTMLElement>,\n  {\n    open = true,\n    animate = true,\n    children = null,\n    compensateForGap,\n    onInit = null,\n    onOpen = null,\n    onAnimationStart = null,\n    onAnimationEnd = null,\n  }: useHeightAnimationOptions = {}\n) {\n  const instRef = useRef<HeightAnimationInstance>(null)\n  const isInitialRenderRef = useRef(\n    typeof globalThis !== 'undefined'\n      ? globalThis.readjustTime !== -1\n      : true\n  )\n\n  const [isOpen, setIsOpen] = useState(open)\n  const [isVisible, setIsVisible] = useState(false)\n  const [isAnimating, setIsAnimating] = useState(false)\n  const [isVisibleParallax, setParallax] = useState(open)\n\n  const eventsRef = useRef({\n    onInit,\n    onAnimationEnd,\n    onAnimationStart,\n    onOpen,\n  })\n  eventsRef.current.onInit = onInit\n  eventsRef.current.onAnimationEnd = onAnimationEnd\n  eventsRef.current.onAnimationStart = onAnimationStart\n  eventsRef.current.onOpen = onOpen\n\n  useLayoutEffect(() => {\n    instRef.current = new HeightAnimationInstance()\n    eventsRef.current.onInit?.(instRef.current)\n    return () => {\n      instRef.current?.remove()\n      instRef.current = null\n    }\n  }, [])\n\n  useLayoutEffect(() => {\n    instRef.current.setOptions({ animate })\n\n    if (typeof global !== 'undefined' && globalThis.IS_TEST) {\n      instRef.current.setOptions({ animate: false })\n    }\n  }, [animate])\n\n  const handleCompensateForGap = useCallback(() => {\n    if (compensateForGap) {\n      let gap = compensateForGap\n      const { elem } = instRef.current\n      if (compensateForGap === 'auto') {\n        gap = window\n          .getComputedStyle(elem.parentElement)\n          .getPropertyValue('row-gap')\n      }\n      elem.style.marginTop = `calc(${gap} * -1)`\n      const inner = elem.querySelector('.compensateForGap') as HTMLElement\n      inner.style.marginTop = gap\n    }\n  }, [compensateForGap])\n\n  useLayoutEffect(() => {\n    instRef.current.onStart((state: HeightAnimationOnStartTypes) => {\n      switch (state) {\n        case 'opening':\n          handleCompensateForGap()\n          setIsVisible(true)\n          setParallax(true)\n          setIsAnimating(true)\n          break\n\n        case 'closing':\n          setParallax(false)\n          setIsAnimating(true)\n          break\n\n        case 'adjusting':\n          setIsAnimating(true)\n          break\n      }\n\n      if (!isInitialRenderRef.current) {\n        eventsRef.current.onAnimationStart?.(state)\n      }\n    })\n\n    instRef.current.onEnd((state: HeightAnimationOnEndTypes) => {\n      switch (state) {\n        case 'opened':\n          setIsVisible(true)\n          setIsOpen(true)\n          setIsAnimating(false)\n          eventsRef.current.onOpen?.(true)\n          break\n\n        case 'closed':\n          setIsVisible(false)\n          setIsOpen(false)\n          setParallax(false)\n          setIsAnimating(false)\n          eventsRef.current.onOpen?.(false)\n          break\n\n        case 'adjusted':\n          setIsAnimating(false)\n          break\n      }\n\n      if (!isInitialRenderRef.current) {\n        eventsRef.current.onAnimationEnd?.(state)\n      }\n    })\n  }, [compensateForGap, handleCompensateForGap])\n\n  useOpenClose({ open, instRef, isInitialRenderRef, targetRef })\n  useAdjust({ children, instRef, isInitialRenderRef, targetRef })\n\n  /**\n   * Returns the first paint style, to be used for the initial render,\n   * to avoid flickering.\n   */\n  const firstPaintStyle:\n    | typeof instRef.current.firstPaintStyle\n    | Record<string, never> =\n    (open &&\n      !isVisible &&\n      !isAnimating &&\n      instRef.current?.firstPaintStyle) ||\n    {}\n  const isInDOM = open || isVisible\n\n  return {\n    open,\n    isOpen,\n    isInDOM,\n    isVisible,\n    isVisibleParallax,\n    isAnimating,\n    firstPaintStyle,\n  }\n}\n\nfunction useOpenClose({ open, instRef, isInitialRenderRef, targetRef }) {\n  const isTest =\n    typeof process !== 'undefined' &&\n    process.env.NODE_ENV === 'test' &&\n    typeof globalThis.IS_TEST === 'undefined'\n\n  useLayoutEffect(() => {\n    instRef.current.setElement(targetRef.current)\n\n    if (\n      !targetRef.current ||\n      (instRef.current.state === 'init' && isInitialRenderRef.current)\n    ) {\n      if (open) {\n        instRef.current.setAsOpen()\n      } else {\n        instRef.current.setAsClosed()\n      }\n    } else {\n      if (open) {\n        instRef.current.open()\n      } else {\n        instRef.current.close()\n      }\n    }\n\n    // For testing purposes, we need to trigger the transitionend event\n    if (isTest) {\n      const event = new CustomEvent('transitionend')\n      targetRef.current?.dispatchEvent(event)\n    }\n  }, [open, targetRef, instRef, isInitialRenderRef, isTest])\n\n  useLayoutEffect(() => {\n    const run = () => {\n      isInitialRenderRef.current = false\n    }\n    if (globalThis.bypassTime === -1 || isTest) {\n      run()\n    } else {\n      window.requestAnimationFrame?.(run)\n    }\n  }, [isInitialRenderRef, isTest])\n}\n\nfunction useAdjust({ children, instRef, isInitialRenderRef, targetRef }) {\n  const fromHeight = useRef(0)\n\n  const [timer] = useState(() => Date.now())\n\n  /**\n   * Wait for some criteria and a certain time, before we adjust the height,\n   * so it will not run when a open/close animation is running.\n   */\n  const shouldAdjust = () => {\n    switch (instRef.current?.state) {\n      case 'opened':\n      case 'adjusted':\n      case 'adjusting':\n        return (\n          !isInitialRenderRef.current &&\n          Date.now() - timer > (globalThis.readjustTime || 100)\n        )\n    }\n\n    return false\n  }\n\n  useMemo(() => {\n    if (shouldAdjust()) {\n      fromHeight.current = instRef.current?.getHeight()\n    }\n  }, [children]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  useLayoutEffect(() => {\n    if (shouldAdjust()) {\n      /**\n       * In certain cases, the targetRef.current is outdated, so we need to set it again.\n       * E.g. in Tabs.js, when we switch tabs, the targetRef.current is not updated.\n       */\n      instRef.current.setElement(targetRef.current)\n\n      /**\n       * Ensure we don't have height, while we get the \"toHeight\" again.\n       * We may move this inside of the HeightAnimationInstance class later,\n       * but the \"GlobalStatus\" is currently relying on \"getUnknownHeight\" inside of adjustTo.\n       */\n      instRef.current.elem.style.height = ''\n\n      /**\n       * Use getHeight instead of getUnknownHeight because of the additional,\n       * disturbing DOM manipulation.\n       */\n      const toHeight = instRef.current.getHeight()\n\n      instRef.current.adjustTo(fromHeight.current, toHeight)\n    }\n  }, [children]) // eslint-disable-line react-hooks/exhaustive-deps\n}\n"],"mappings":"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"}

package/cjs/components/radio/RadioGroup.js

@@ -120,9 +120,11 @@ class RadioGroup extends _react.default.PureComponent {
       value: context
     }, _react.default.createElement("div", {
       className: classes
-    }, _AlignmentHelper || (_AlignmentHelper = _react.default.createElement(_AlignmentHelper2.default, null)), _react.default.createElement(Fieldset, null, _react.default.createElement(_Flex.default.Container, {
+    }, _AlignmentHelper || (_AlignmentHelper = _react.default.createElement(_AlignmentHelper2.default, null)), _react.default.createElement(Fieldset, {
+      className: "dnb-toggle-button-group__fieldset"
+    }, _react.default.createElement(_Flex.default.Container, {
       direction: vertical || label_direction === 'vertical' ? 'vertical' : 'horizontal',
-      spacing: vertical ? 'x-small' : 'small'
+      gap: vertical ? 'x-small' : 'small'
     }, label && _react.default.createElement(_FormLabel.default, {
       element: "legend",
       id: id + '-label',

package/cjs/components/radio/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","names":["_react","_interopRequireDefault","require","_propTypes","_classnames","_componentHelper","_filterValidProps","_SpacingHelper","_AlignmentHelper2","_Space","_FormLabel","_FormStatus","_Flex","_Context","_Suffix","_RadioGroupContext","_AlignmentHelper","_excluded","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","getOwnPropertyDescriptor","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","defineProperty","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","RadioGroup","React","PureComponent","getDerivedStateFromProps","props","state","_listenForPropChanges","_value","constructor","_ref","event","setState","dispatchCustomElementEvent","_refInput","createRef","_id","id","makeUniqueId","_name","name","render","_this$context","_this$context2","extendPropsWithContextInClassComponent","defaultProps","pickFormElementProps","context","FormRow","formElement","status","status_state","status_props","status_no_animation","globalStatus","suffix","label","label_direction","label_sr_only","label_position","vertical","layout_direction","size","disabled","skeleton","className","children","on_change","rest","showStatus","getStatusState","classes","classnames","createSpacingClasses","params","combineDescribedBy","combineLabelledBy","validateDOMAttributes","onChange","onChangeHandler","Fieldset","createElement","Provider","Container","direction","spacing","element","srOnly","role","show","text","text_id","width_selector","no_animation","exports","Context","title","attributes","test","process","env","NODE_ENV","propTypes","PropTypes","oneOfType","string","func","node","oneOf","bool","shape","message","spacingPropTypes","_supportsSpacingProps"],"sources":["../../../../src/components/radio/RadioGroup.js"],"sourcesContent":["/**\n * Web RadioGroup Component\n *\n * This is a legacy component.\n * For referencing while developing new features, please use a Functional component.\n */\n\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport classnames from 'classnames'\nimport {\n  extendPropsWithContextInClassComponent,\n  makeUniqueId,\n  validateDOMAttributes,\n  getStatusState,\n  combineDescribedBy,\n  combineLabelledBy,\n  dispatchCustomElementEvent,\n} from '../../shared/component-helper'\nimport { pickFormElementProps } from '../../shared/helpers/filterValidProps'\nimport {\n  spacingPropTypes,\n  createSpacingClasses,\n} from '../space/SpacingHelper'\nimport AlignmentHelper from '../../shared/AlignmentHelper'\nimport Space from '../Space'\nimport FormLabel from '../FormLabel'\nimport FormStatus from '../FormStatus'\nimport Flex from '../Flex'\nimport Context from '../../shared/Context'\nimport Suffix from '../../shared/helpers/Suffix'\nimport RadioGroupContext from './RadioGroupContext'\n\n/**\n * The radio component is our enhancement of the classic radio button. It acts like a radio. Example: On/off, yes/no.\n */\nexport default class RadioGroup extends React.PureComponent {\n  static contextType = Context\n\n  static propTypes = {\n    label: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.func,\n      PropTypes.node,\n    ]),\n    label_direction: PropTypes.oneOf(['horizontal', 'vertical']),\n    label_sr_only: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    label_position: PropTypes.oneOf(['left', 'right']),\n    title: PropTypes.string,\n    disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    id: PropTypes.string,\n    name: PropTypes.string,\n    size: PropTypes.oneOf(['default', 'medium', 'large']),\n    status: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.bool,\n      PropTypes.func,\n      PropTypes.node,\n    ]),\n    status_state: PropTypes.string,\n    status_props: PropTypes.object,\n    status_no_animation: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.bool,\n    ]),\n    globalStatus: PropTypes.shape({\n      id: PropTypes.string,\n      message: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n    }),\n    suffix: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.func,\n      PropTypes.node,\n    ]),\n    layout_direction: PropTypes.oneOf(['column', 'row']),\n    vertical: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    value: PropTypes.string,\n    attributes: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\n\n    ...spacingPropTypes,\n\n    className: PropTypes.string,\n    children: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.func,\n      PropTypes.node,\n    ]),\n\n    on_change: PropTypes.func,\n  }\n\n  static defaultProps = {\n    label: null,\n    label_direction: null,\n    label_sr_only: null,\n    label_position: null,\n    title: null,\n    disabled: null,\n    skeleton: null,\n    id: null,\n    name: null,\n    size: null,\n    status: null,\n    status_state: 'error',\n    status_props: null,\n    status_no_animation: null,\n    globalStatus: null,\n    suffix: null,\n    vertical: null,\n    layout_direction: 'row',\n    value: undefined,\n    attributes: null,\n\n    className: null,\n    children: null,\n\n    on_change: null,\n  }\n\n  static parseChecked = (state) => /true|on/.test(String(state))\n\n  static getDerivedStateFromProps(props, state) {\n    if (state._listenForPropChanges) {\n      if (props.value !== state._value) {\n        state.value = props.value\n      }\n      if (typeof props.value !== 'undefined') {\n        state._value = props.value\n      }\n    }\n    state._listenForPropChanges = true\n\n    return state\n  }\n\n  constructor(props) {\n    super(props)\n    this._refInput = React.createRef()\n    this._id = props.id || makeUniqueId() // cause we need an id anyway\n    this._name = props.name || this._id\n    this.state = {\n      _listenForPropChanges: true,\n    }\n  }\n\n  onChangeHandler = ({ value, event }) => {\n    this.setState({ value, _listenForPropChanges: false })\n    dispatchCustomElementEvent(this, 'on_change', {\n      value,\n      event,\n    })\n  }\n\n  render() {\n    // use only the props from context, who are available here anyway\n    const props = extendPropsWithContextInClassComponent(\n      this.props,\n      RadioGroup.defaultProps,\n      // Deprecated – can be removed in v11\n      pickFormElementProps(this.context?.FormRow),\n      pickFormElementProps(this.context?.formElement),\n      this.context.RadioGroup\n    )\n\n    const {\n      status,\n      status_state,\n      status_props,\n      status_no_animation,\n      globalStatus,\n      suffix,\n      label,\n      label_direction,\n      label_sr_only,\n      label_position,\n      vertical,\n      layout_direction,\n      size,\n      disabled,\n      skeleton,\n      className,\n\n      id: _id, // eslint-disable-line\n      name: _name, // eslint-disable-line\n      value: _value, // eslint-disable-line\n      children, // eslint-disable-line\n      on_change, // eslint-disable-line\n\n      ...rest\n    } = props\n\n    const { value } = this.state\n\n    const id = this._id\n    const showStatus = getStatusState(status)\n\n    const classes = classnames(\n      'dnb-radio-group',\n      status && `dnb-radio-group__status--${status_state}`,\n      `dnb-radio-group--${layout_direction}`,\n      'dnb-form-component',\n      createSpacingClasses(props),\n      className\n    )\n\n    const params = {\n      ...rest,\n    }\n\n    if (showStatus || suffix) {\n      params['aria-describedby'] = combineDescribedBy(\n        params,\n        showStatus ? id + '-status' : null,\n        suffix ? id + '-suffix' : null\n      )\n    }\n    if (label) {\n      params['aria-labelledby'] = combineLabelledBy(params, id + '-label')\n    }\n\n    // also used for code markup simulation\n    validateDOMAttributes(this.props, params)\n\n    const context = {\n      name: this._name,\n      value,\n      size,\n      disabled,\n      label_position,\n      onChange: this.onChangeHandler,\n    }\n\n    const Fieldset = label ? 'fieldset' : 'div'\n\n    return (\n      <RadioGroupContext.Provider value={context}>\n        <div className={classes}>\n          <AlignmentHelper />\n          <Fieldset>\n            <Flex.Container\n              // align=\"baseline\"\n              direction={\n                vertical || label_direction === 'vertical'\n                  ? 'vertical'\n                  : 'horizontal'\n              }\n              spacing={vertical ? 'x-small' : 'small'}\n            >\n              {label && (\n                <FormLabel\n                  element=\"legend\"\n                  id={id + '-label'}\n                  srOnly={label_sr_only}\n                >\n                  {label}\n                </FormLabel>\n              )}\n\n              <Space\n                element=\"span\"\n                id={id}\n                className=\"dnb-radio-group__shell\"\n                role=\"radiogroup\"\n                {...params}\n              >\n                {children}\n\n                {suffix && (\n                  <Suffix\n                    className=\"dnb-radio-group__suffix\"\n                    id={id + '-suffix'} // used for \"aria-describedby\"\n                    context={props}\n                  >\n                    {suffix}\n                  </Suffix>\n                )}\n\n                <FormStatus\n                  show={showStatus}\n                  id={id + '-form-status'}\n                  globalStatus={globalStatus}\n                  label={label}\n                  text={status}\n                  state={status_state}\n                  text_id={id + '-status'} // used for \"aria-describedby\"\n                  width_selector={id + ', ' + id + '-label'}\n                  no_animation={status_no_animation}\n                  skeleton={skeleton}\n                  {...status_props}\n                />\n              </Space>\n            </Flex.Container>\n          </Fieldset>\n        </div>\n      </RadioGroupContext.Provider>\n    )\n  }\n}\n\nRadioGroup._supportsSpacingProps = true\n"],"mappings":"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"}
+{"version":3,"file":"RadioGroup.js","names":["_react","_interopRequireDefault","require","_propTypes","_classnames","_componentHelper","_filterValidProps","_SpacingHelper","_AlignmentHelper2","_Space","_FormLabel","_FormStatus","_Flex","_Context","_Suffix","_RadioGroupContext","_AlignmentHelper","_excluded","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","getOwnPropertyDescriptor","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","defineProperty","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","RadioGroup","React","PureComponent","getDerivedStateFromProps","props","state","_listenForPropChanges","_value","constructor","_ref","event","setState","dispatchCustomElementEvent","_refInput","createRef","_id","id","makeUniqueId","_name","name","render","_this$context","_this$context2","extendPropsWithContextInClassComponent","defaultProps","pickFormElementProps","context","FormRow","formElement","status","status_state","status_props","status_no_animation","globalStatus","suffix","label","label_direction","label_sr_only","label_position","vertical","layout_direction","size","disabled","skeleton","className","children","on_change","rest","showStatus","getStatusState","classes","classnames","createSpacingClasses","params","combineDescribedBy","combineLabelledBy","validateDOMAttributes","onChange","onChangeHandler","Fieldset","createElement","Provider","Container","direction","gap","element","srOnly","role","show","text","text_id","width_selector","no_animation","exports","Context","title","attributes","test","process","env","NODE_ENV","propTypes","PropTypes","oneOfType","string","func","node","oneOf","bool","shape","message","spacingPropTypes","_supportsSpacingProps"],"sources":["../../../../src/components/radio/RadioGroup.js"],"sourcesContent":["/**\n * Web RadioGroup Component\n *\n * This is a legacy component.\n * For referencing while developing new features, please use a Functional component.\n */\n\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport classnames from 'classnames'\nimport {\n  extendPropsWithContextInClassComponent,\n  makeUniqueId,\n  validateDOMAttributes,\n  getStatusState,\n  combineDescribedBy,\n  combineLabelledBy,\n  dispatchCustomElementEvent,\n} from '../../shared/component-helper'\nimport { pickFormElementProps } from '../../shared/helpers/filterValidProps'\nimport {\n  spacingPropTypes,\n  createSpacingClasses,\n} from '../space/SpacingHelper'\nimport AlignmentHelper from '../../shared/AlignmentHelper'\nimport Space from '../Space'\nimport FormLabel from '../FormLabel'\nimport FormStatus from '../FormStatus'\nimport Flex from '../Flex'\nimport Context from '../../shared/Context'\nimport Suffix from '../../shared/helpers/Suffix'\nimport RadioGroupContext from './RadioGroupContext'\n\n/**\n * The radio component is our enhancement of the classic radio button. It acts like a radio. Example: On/off, yes/no.\n */\nexport default class RadioGroup extends React.PureComponent {\n  static contextType = Context\n\n  static propTypes = {\n    label: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.func,\n      PropTypes.node,\n    ]),\n    label_direction: PropTypes.oneOf(['horizontal', 'vertical']),\n    label_sr_only: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    label_position: PropTypes.oneOf(['left', 'right']),\n    title: PropTypes.string,\n    disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    id: PropTypes.string,\n    name: PropTypes.string,\n    size: PropTypes.oneOf(['default', 'medium', 'large']),\n    status: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.bool,\n      PropTypes.func,\n      PropTypes.node,\n    ]),\n    status_state: PropTypes.string,\n    status_props: PropTypes.object,\n    status_no_animation: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.bool,\n    ]),\n    globalStatus: PropTypes.shape({\n      id: PropTypes.string,\n      message: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n    }),\n    suffix: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.func,\n      PropTypes.node,\n    ]),\n    layout_direction: PropTypes.oneOf(['column', 'row']),\n    vertical: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    value: PropTypes.string,\n    attributes: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\n\n    ...spacingPropTypes,\n\n    className: PropTypes.string,\n    children: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.func,\n      PropTypes.node,\n    ]),\n\n    on_change: PropTypes.func,\n  }\n\n  static defaultProps = {\n    label: null,\n    label_direction: null,\n    label_sr_only: null,\n    label_position: null,\n    title: null,\n    disabled: null,\n    skeleton: null,\n    id: null,\n    name: null,\n    size: null,\n    status: null,\n    status_state: 'error',\n    status_props: null,\n    status_no_animation: null,\n    globalStatus: null,\n    suffix: null,\n    vertical: null,\n    layout_direction: 'row',\n    value: undefined,\n    attributes: null,\n\n    className: null,\n    children: null,\n\n    on_change: null,\n  }\n\n  static parseChecked = (state) => /true|on/.test(String(state))\n\n  static getDerivedStateFromProps(props, state) {\n    if (state._listenForPropChanges) {\n      if (props.value !== state._value) {\n        state.value = props.value\n      }\n      if (typeof props.value !== 'undefined') {\n        state._value = props.value\n      }\n    }\n    state._listenForPropChanges = true\n\n    return state\n  }\n\n  constructor(props) {\n    super(props)\n    this._refInput = React.createRef()\n    this._id = props.id || makeUniqueId() // cause we need an id anyway\n    this._name = props.name || this._id\n    this.state = {\n      _listenForPropChanges: true,\n    }\n  }\n\n  onChangeHandler = ({ value, event }) => {\n    this.setState({ value, _listenForPropChanges: false })\n    dispatchCustomElementEvent(this, 'on_change', {\n      value,\n      event,\n    })\n  }\n\n  render() {\n    // use only the props from context, who are available here anyway\n    const props = extendPropsWithContextInClassComponent(\n      this.props,\n      RadioGroup.defaultProps,\n      // Deprecated – can be removed in v11\n      pickFormElementProps(this.context?.FormRow),\n      pickFormElementProps(this.context?.formElement),\n      this.context.RadioGroup\n    )\n\n    const {\n      status,\n      status_state,\n      status_props,\n      status_no_animation,\n      globalStatus,\n      suffix,\n      label,\n      label_direction,\n      label_sr_only,\n      label_position,\n      vertical,\n      layout_direction,\n      size,\n      disabled,\n      skeleton,\n      className,\n\n      id: _id, // eslint-disable-line\n      name: _name, // eslint-disable-line\n      value: _value, // eslint-disable-line\n      children, // eslint-disable-line\n      on_change, // eslint-disable-line\n\n      ...rest\n    } = props\n\n    const { value } = this.state\n\n    const id = this._id\n    const showStatus = getStatusState(status)\n\n    const classes = classnames(\n      'dnb-radio-group',\n      status && `dnb-radio-group__status--${status_state}`,\n      `dnb-radio-group--${layout_direction}`,\n      'dnb-form-component',\n      createSpacingClasses(props),\n      className\n    )\n\n    const params = {\n      ...rest,\n    }\n\n    if (showStatus || suffix) {\n      params['aria-describedby'] = combineDescribedBy(\n        params,\n        showStatus ? id + '-status' : null,\n        suffix ? id + '-suffix' : null\n      )\n    }\n    if (label) {\n      params['aria-labelledby'] = combineLabelledBy(params, id + '-label')\n    }\n\n    // also used for code markup simulation\n    validateDOMAttributes(this.props, params)\n\n    const context = {\n      name: this._name,\n      value,\n      size,\n      disabled,\n      label_position,\n      onChange: this.onChangeHandler,\n    }\n\n    const Fieldset = label ? 'fieldset' : 'div'\n\n    return (\n      <RadioGroupContext.Provider value={context}>\n        <div className={classes}>\n          <AlignmentHelper />\n          <Fieldset className=\"dnb-toggle-button-group__fieldset\">\n            <Flex.Container\n              direction={\n                vertical || label_direction === 'vertical'\n                  ? 'vertical'\n                  : 'horizontal'\n              }\n              gap={vertical ? 'x-small' : 'small'}\n            >\n              {label && (\n                <FormLabel\n                  element=\"legend\"\n                  id={id + '-label'}\n                  srOnly={label_sr_only}\n                >\n                  {label}\n                </FormLabel>\n              )}\n\n              <Space\n                element=\"span\"\n                id={id}\n                className=\"dnb-radio-group__shell\"\n                role=\"radiogroup\"\n                {...params}\n              >\n                {children}\n\n                {suffix && (\n                  <Suffix\n                    className=\"dnb-radio-group__suffix\"\n                    id={id + '-suffix'} // used for \"aria-describedby\"\n                    context={props}\n                  >\n                    {suffix}\n                  </Suffix>\n                )}\n\n                <FormStatus\n                  show={showStatus}\n                  id={id + '-form-status'}\n                  globalStatus={globalStatus}\n                  label={label}\n                  text={status}\n                  state={status_state}\n                  text_id={id + '-status'} // used for \"aria-describedby\"\n                  width_selector={id + ', ' + id + '-label'}\n                  no_animation={status_no_animation}\n                  skeleton={skeleton}\n                  {...status_props}\n                />\n              </Space>\n            </Flex.Container>\n          </Fieldset>\n        </div>\n      </RadioGroupContext.Provider>\n    )\n  }\n}\n\nRadioGroup._supportsSpacingProps = true\n"],"mappings":"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"}

package/cjs/components/radio/style/dnb-radio.css

@@ -200,10 +200,13 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
   transform: translateY(0.25rem); /* 4/16 */
 }
 .dnb-radio-group {
-  --radio-group-margin-bottom: 0.5rem;
-  --radio-group-margin-right: 1rem;
+  --radio-group-row-gap: 0.5rem;
+  --radio-group-column-gap: 1rem;
   display: inline-flex;
 }
+.dnb-radio-group, .dnb-radio-group__fieldset, .dnb-radio-group__shell {
+  flex-grow: 1;
+}
 .dnb-radio-group fieldset {
   margin: 0;
   padding: 0;
@@ -219,9 +222,9 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
 .dnb-radio-group [role=radiogroup], .dnb-radio-group__shell {
   display: flex;
   flex-wrap: wrap;
-  -moz-column-gap: var(--radio-group-margin-right);
-       column-gap: var(--radio-group-margin-right);
-  row-gap: var(--radio-group-margin-bottom);
+  -moz-column-gap: var(--radio-group-column-gap);
+       column-gap: var(--radio-group-column-gap);
+  row-gap: var(--radio-group-row-gap);
 }
 .dnb-radio-group__shell > .dnb-form-status {
   margin-top: 0;

package/cjs/components/radio/style/dnb-radio.min.css

@@ -1 +1 @@
-:root{--radio-width--medium:1.5rem;--radio-height--medium:1.5rem}.dnb-radio{--radio-dot--medium:0.75rem;--radio-dot--large:1.125rem;--radio-width--large:2rem;--radio-height--large:2rem;--radio-border-width:0.09375rem;--radio-color-dot-on:#000;--radio-color-background-on:#fff;--radio-color-border-on:#000;--radio-color-background-off:#fff;--radio-color-border-off:#000;--radio-border-width--disabled:0.125rem;--radio-color-dot-on--disabled:#d3d3d3;--radio-color-background--disabled:#fff;--radio-color-border-on--disabled:#d3d3d3;--radio-color-border-off--disabled:#d3d3d3;--radio-color-dot-on--active:#d3d3d3;--radio-color-border-on--active:#d3d3d3;--radio-color-background-off--active:#d3d3d3;--radio-color-border-off--active:transparent;--radio-border-width--hover:0.125rem;--radio-border-width-on--hover:0.125rem;--radio-color-dot-on--hover:#d3d3d3;--radio-color-background-on--hover:#d3d3d3;--radio-color-background-off--hover:#d3d3d3;--radio-border-width--focus:0.125rem;--radio-color-background-on--focus:var(--color-white);--radio-color-background-off--focus:#d3d3d3;--radio-color-dot-on--error:red;--radio-color-border-on--error:red;--radio-color-border--error-hover:red;--radio-color-background-off--error-hover:#fff0f5;--radio-color-background-on--error-hover:#fff0f5;--radio-color-dot-on--error-hover:#fff0f5;--radio-focus-ring-width--error:var(--focus-ring-width);--radio-bounding--medium:1.75,1.5;--radio-bounding--large:1.25,1.12;font-size:var(--font-size-small);line-height:var(--line-height-basis)}.dnb-radio,.dnb-radio__inner{display:inline-flex;flex-direction:column}.dnb-radio__inner{align-self:center}.dnb-radio__shell{align-items:center;display:flex;flex-shrink:0;height:var(--radio-height--medium);justify-content:center;position:relative;-webkit-user-select:none;user-select:none;width:var(--radio-width--medium)}.dnb-radio__button,.dnb-radio__dot,.dnb-radio__focus{position:absolute;z-index:4}.dnb-radio__button{border:var(--radio-border-width) solid transparent}.dnb-radio__focus{display:none;outline:none}html[data-whatinput=keyboard] .dnb-radio__focus{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-radio__button,.dnb-radio__focus{border-radius:50%;height:calc(var(--radio-height--medium) - .25rem);width:calc(var(--radio-width--medium) - .25rem)}.dnb-radio--large .dnb-radio__button,.dnb-radio--large .dnb-radio__focus{height:var(--radio-height--large);width:var(--radio-width--large)}.dnb-radio__dot{background-color:var(--radio-color-dot-on);border-radius:50%;height:var(--radio-dot--medium);transition:opacity .2s ease-out,transform .2s ease-out;width:var(--radio-dot--medium)}.dnb-radio--large .dnb-radio__dot{height:var(--radio-dot--large);width:var(--radio-dot--large)}.dnb-radio__input{border:0;height:var(--radio-height--medium);left:auto;margin:0;opacity:0;padding:0;position:absolute;top:auto;transform:scale(var(--radio-bounding--medium));width:var(--radio-width--medium);z-index:5}.dnb-radio--large .dnb-radio__input{height:var(--radio-height--large);transform:scale(var(--radio-bounding--large));width:var(--radio-width--large)}.dnb-radio__input:not([disabled]){cursor:pointer}.dnb-radio__order{align-items:baseline;display:inline-flex}.dnb-radio-group--column .dnb-radio__order{display:flex}.dnb-radio__row{display:inline-flex}.dnb-radio__suffix{order:3}.dnb-radio__suffix .dnb-modal__trigger{margin-bottom:-.25rem;margin-top:-.25rem}.dnb-radio-group__suffix{font-size:var(--font-size-basis)}.dnb-radio--large,.dnb-radio--large .dnb-radio__suffix{line-height:var(--radio-height--large)}.dnb-radio--large .dnb-radio__shell{height:var(--radio-height--large);width:var(--radio-width--large)}.dnb-radio .dnb-form-label{margin-bottom:0;margin-left:0;margin-right:0}.dnb-radio--label-position-left .dnb-radio__order .dnb-radio__inner{order:2}.dnb-radio--label-position-left .dnb-radio__order .dnb-form-label{order:1;padding-right:.5rem}.dnb-radio--label-position-right .dnb-radio__order .dnb-radio__inner{order:1}.dnb-radio--label-position-right .dnb-radio__order .dnb-form-label{order:2;padding-left:.5rem}:not(.dnb-radio-group)>.dnb-form-label+.dnb-radio{vertical-align:top}.dnb-radio .dnb-form-status{margin-bottom:0;margin-top:.375rem;order:4}.dnb-radio+.dnb-form-status{margin-bottom:1rem;margin-top:.5rem}.dnb-radio>.dnb-form-status{transform:translateY(.25rem)}.dnb-radio-group{--radio-group-margin-bottom:0.5rem;--radio-group-margin-right:1rem;display:inline-flex}.dnb-radio-group fieldset{border:none;margin:0;padding:0}.dnb-radio-group--column .dnb-radio{display:flex;margin-right:0}.dnb-radio-group .dnb-radio:last-of-type{margin-right:0}.dnb-radio-group [role=radiogroup],.dnb-radio-group__shell{-moz-column-gap:var(--radio-group-margin-right);column-gap:var(--radio-group-margin-right);display:flex;flex-wrap:wrap;row-gap:var(--radio-group-margin-bottom)}.dnb-radio-group__shell>.dnb-form-status{margin-bottom:0;margin-top:0}.dnb-radio-group--column .dnb-radio-group__shell{flex-direction:column}.dnb-radio__input:checked~.dnb-radio__button,.dnb-radio__input[data-checked=true]~.dnb-radio__button{background-color:var(--radio-color-background-on);border-color:var(--radio-color-border-on)}.dnb-radio__input:checked~.dnb-radio__dot,.dnb-radio__input[data-checked=true]~.dnb-radio__dot{opacity:1;transform:scale(1)}.dnb-radio__input:not(:checked):not([data-checked=true])~.dnb-radio__dot{opacity:0;transform:scale(.8)}.dnb-radio__input:not(:checked):not([data-checked=true])~.dnb-radio__button{background-color:var(--radio-color-background-off);border-color:var(--radio-color-border-off)}.dnb-radio__input[disabled]~.dnb-radio__button{border-width:var(--radio-border-width--disabled)}.dnb-radio__input[disabled]:checked~.dnb-radio__button,.dnb-radio__input[disabled][data-checked=true]~.dnb-radio__button{background-color:var(--radio-color-background--disabled);border-color:var(--radio-color-border-on--disabled)}.dnb-radio__input[disabled]:checked~.dnb-radio__dot,.dnb-radio__input[disabled][data-checked=true]~.dnb-radio__dot{background-color:var(--radio-color-dot-on--disabled)}.dnb-radio__input[disabled]:not(:checked):not([data-checked=true])~.dnb-radio__button:not(.dnb-skeleton){background-color:var(--radio-color-background--disabled);border-color:var(--radio-color-border-off--disabled)}.dnb-radio__input[disabled]~.dnb-radio__button.dnb-skeleton{border-color:var(--skeleton-color)}.dnb-radio__input[disabled]~.dnb-radio__button.dnb-skeleton:before{border-radius:0}.dnb-radio__input:not([disabled]):checked:active~.dnb-radio__button,.dnb-radio__input:not([disabled])[data-checked=true]:active~.dnb-radio__button{border-color:var(--radio-color-border-on--active)}.dnb-radio__input:not([disabled]):checked:active~.dnb-radio__dot,.dnb-radio__input:not([disabled])[data-checked=true]:active~.dnb-radio__dot{background-color:var(--radio-color-dot-on--active)}.dnb-radio__input:not([disabled]):not(:checked):not([data-checked=true]):active~.dnb-radio__button{background-color:var(--radio-color-background-off--active);border-color:var(--radio-color-border-off--active)}.dnb-radio__input:not([disabled]):not(:focus):checked:hover~.dnb-radio__dot,.dnb-radio__input:not([disabled]):not(:focus)[data-checked=true]:hover~.dnb-radio__dot{background-color:var(--radio-color-dot-on--hover)}.dnb-radio__input:not([disabled]):not(:focus):checked:hover~.dnb-radio__button,.dnb-radio__input:not([disabled]):not(:focus)[data-checked=true]:hover~.dnb-radio__button{background-color:var(--radio-color-background-on--hover);border-width:var(--radio-border-width-on--hover)}.dnb-radio__input:not([disabled]):not(:focus):not(:checked):not([data-checked=true]):hover~.dnb-radio__button{background-color:var(--radio-color-background-off--hover);border-width:var(--radio-border-width--hover)}html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):focus~.dnb-radio__button{border:none}.dnb-radio__input:not([disabled]):active~.dnb-radio__focus,.dnb-radio__input:not([disabled]):focus~.dnb-radio__focus{display:block}html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:active):not(:hover):checked:focus~.dnb-radio__button,html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:active):not(:hover)[data-checked=true]:focus~.dnb-radio__button{background-color:var(--radio-color-background-on--focus)}html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:active):not(:hover):checked:focus~.dnb-radio__dot,html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:active):not(:hover)[data-checked=true]:focus~.dnb-radio__dot{background-color:var(--radio-color-dot-on--focus,var(--focus-ring-color))}html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:checked):not([data-checked=true]):focus~.dnb-radio__button{background-color:var(--radio-color-background-off--focus)}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active)~.dnb-radio__button{border:none}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active)~.dnb-radio__focus{--border-color:var(--radio-color-border-on--error);--border-width:var(--radio-focus-ring-width--error);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);display:block}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):hover~.dnb-radio__focus{--border-color:var(--radio-color-border--error-hover);--border-width:var(--radio-focus-ring-width--error);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):not(:hover):checked~.dnb-radio__dot,.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):not(:hover)[data-checked=true]~.dnb-radio__dot{background-color:var(--radio-color-dot-on--error)}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):checked:hover~.dnb-radio__dot,.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active)[data-checked=true]:hover~.dnb-radio__dot{background-color:var(--radio-color-dot-on--error-hover)}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):checked:hover~.dnb-radio__button,.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active)[data-checked=true]:hover~.dnb-radio__button{background-color:var(--radio-color-background-on--error-hover)}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:checked):not([data-checked=true]):hover~.dnb-radio__button{background-color:var(--radio-color-background-off--error-hover)}
+:root{--radio-width--medium:1.5rem;--radio-height--medium:1.5rem}.dnb-radio{--radio-dot--medium:0.75rem;--radio-dot--large:1.125rem;--radio-width--large:2rem;--radio-height--large:2rem;--radio-border-width:0.09375rem;--radio-color-dot-on:#000;--radio-color-background-on:#fff;--radio-color-border-on:#000;--radio-color-background-off:#fff;--radio-color-border-off:#000;--radio-border-width--disabled:0.125rem;--radio-color-dot-on--disabled:#d3d3d3;--radio-color-background--disabled:#fff;--radio-color-border-on--disabled:#d3d3d3;--radio-color-border-off--disabled:#d3d3d3;--radio-color-dot-on--active:#d3d3d3;--radio-color-border-on--active:#d3d3d3;--radio-color-background-off--active:#d3d3d3;--radio-color-border-off--active:transparent;--radio-border-width--hover:0.125rem;--radio-border-width-on--hover:0.125rem;--radio-color-dot-on--hover:#d3d3d3;--radio-color-background-on--hover:#d3d3d3;--radio-color-background-off--hover:#d3d3d3;--radio-border-width--focus:0.125rem;--radio-color-background-on--focus:var(--color-white);--radio-color-background-off--focus:#d3d3d3;--radio-color-dot-on--error:red;--radio-color-border-on--error:red;--radio-color-border--error-hover:red;--radio-color-background-off--error-hover:#fff0f5;--radio-color-background-on--error-hover:#fff0f5;--radio-color-dot-on--error-hover:#fff0f5;--radio-focus-ring-width--error:var(--focus-ring-width);--radio-bounding--medium:1.75,1.5;--radio-bounding--large:1.25,1.12;font-size:var(--font-size-small);line-height:var(--line-height-basis)}.dnb-radio,.dnb-radio__inner{display:inline-flex;flex-direction:column}.dnb-radio__inner{align-self:center}.dnb-radio__shell{align-items:center;display:flex;flex-shrink:0;height:var(--radio-height--medium);justify-content:center;position:relative;-webkit-user-select:none;user-select:none;width:var(--radio-width--medium)}.dnb-radio__button,.dnb-radio__dot,.dnb-radio__focus{position:absolute;z-index:4}.dnb-radio__button{border:var(--radio-border-width) solid transparent}.dnb-radio__focus{display:none;outline:none}html[data-whatinput=keyboard] .dnb-radio__focus{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-radio__button,.dnb-radio__focus{border-radius:50%;height:calc(var(--radio-height--medium) - .25rem);width:calc(var(--radio-width--medium) - .25rem)}.dnb-radio--large .dnb-radio__button,.dnb-radio--large .dnb-radio__focus{height:var(--radio-height--large);width:var(--radio-width--large)}.dnb-radio__dot{background-color:var(--radio-color-dot-on);border-radius:50%;height:var(--radio-dot--medium);transition:opacity .2s ease-out,transform .2s ease-out;width:var(--radio-dot--medium)}.dnb-radio--large .dnb-radio__dot{height:var(--radio-dot--large);width:var(--radio-dot--large)}.dnb-radio__input{border:0;height:var(--radio-height--medium);left:auto;margin:0;opacity:0;padding:0;position:absolute;top:auto;transform:scale(var(--radio-bounding--medium));width:var(--radio-width--medium);z-index:5}.dnb-radio--large .dnb-radio__input{height:var(--radio-height--large);transform:scale(var(--radio-bounding--large));width:var(--radio-width--large)}.dnb-radio__input:not([disabled]){cursor:pointer}.dnb-radio__order{align-items:baseline;display:inline-flex}.dnb-radio-group--column .dnb-radio__order{display:flex}.dnb-radio__row{display:inline-flex}.dnb-radio__suffix{order:3}.dnb-radio__suffix .dnb-modal__trigger{margin-bottom:-.25rem;margin-top:-.25rem}.dnb-radio-group__suffix{font-size:var(--font-size-basis)}.dnb-radio--large,.dnb-radio--large .dnb-radio__suffix{line-height:var(--radio-height--large)}.dnb-radio--large .dnb-radio__shell{height:var(--radio-height--large);width:var(--radio-width--large)}.dnb-radio .dnb-form-label{margin-bottom:0;margin-left:0;margin-right:0}.dnb-radio--label-position-left .dnb-radio__order .dnb-radio__inner{order:2}.dnb-radio--label-position-left .dnb-radio__order .dnb-form-label{order:1;padding-right:.5rem}.dnb-radio--label-position-right .dnb-radio__order .dnb-radio__inner{order:1}.dnb-radio--label-position-right .dnb-radio__order .dnb-form-label{order:2;padding-left:.5rem}:not(.dnb-radio-group)>.dnb-form-label+.dnb-radio{vertical-align:top}.dnb-radio .dnb-form-status{margin-bottom:0;margin-top:.375rem;order:4}.dnb-radio+.dnb-form-status{margin-bottom:1rem;margin-top:.5rem}.dnb-radio>.dnb-form-status{transform:translateY(.25rem)}.dnb-radio-group{--radio-group-row-gap:0.5rem;--radio-group-column-gap:1rem;display:inline-flex}.dnb-radio-group,.dnb-radio-group__fieldset,.dnb-radio-group__shell{flex-grow:1}.dnb-radio-group fieldset{border:none;margin:0;padding:0}.dnb-radio-group--column .dnb-radio{display:flex;margin-right:0}.dnb-radio-group .dnb-radio:last-of-type{margin-right:0}.dnb-radio-group [role=radiogroup],.dnb-radio-group__shell{-moz-column-gap:var(--radio-group-column-gap);column-gap:var(--radio-group-column-gap);display:flex;flex-wrap:wrap;row-gap:var(--radio-group-row-gap)}.dnb-radio-group__shell>.dnb-form-status{margin-bottom:0;margin-top:0}.dnb-radio-group--column .dnb-radio-group__shell{flex-direction:column}.dnb-radio__input:checked~.dnb-radio__button,.dnb-radio__input[data-checked=true]~.dnb-radio__button{background-color:var(--radio-color-background-on);border-color:var(--radio-color-border-on)}.dnb-radio__input:checked~.dnb-radio__dot,.dnb-radio__input[data-checked=true]~.dnb-radio__dot{opacity:1;transform:scale(1)}.dnb-radio__input:not(:checked):not([data-checked=true])~.dnb-radio__dot{opacity:0;transform:scale(.8)}.dnb-radio__input:not(:checked):not([data-checked=true])~.dnb-radio__button{background-color:var(--radio-color-background-off);border-color:var(--radio-color-border-off)}.dnb-radio__input[disabled]~.dnb-radio__button{border-width:var(--radio-border-width--disabled)}.dnb-radio__input[disabled]:checked~.dnb-radio__button,.dnb-radio__input[disabled][data-checked=true]~.dnb-radio__button{background-color:var(--radio-color-background--disabled);border-color:var(--radio-color-border-on--disabled)}.dnb-radio__input[disabled]:checked~.dnb-radio__dot,.dnb-radio__input[disabled][data-checked=true]~.dnb-radio__dot{background-color:var(--radio-color-dot-on--disabled)}.dnb-radio__input[disabled]:not(:checked):not([data-checked=true])~.dnb-radio__button:not(.dnb-skeleton){background-color:var(--radio-color-background--disabled);border-color:var(--radio-color-border-off--disabled)}.dnb-radio__input[disabled]~.dnb-radio__button.dnb-skeleton{border-color:var(--skeleton-color)}.dnb-radio__input[disabled]~.dnb-radio__button.dnb-skeleton:before{border-radius:0}.dnb-radio__input:not([disabled]):checked:active~.dnb-radio__button,.dnb-radio__input:not([disabled])[data-checked=true]:active~.dnb-radio__button{border-color:var(--radio-color-border-on--active)}.dnb-radio__input:not([disabled]):checked:active~.dnb-radio__dot,.dnb-radio__input:not([disabled])[data-checked=true]:active~.dnb-radio__dot{background-color:var(--radio-color-dot-on--active)}.dnb-radio__input:not([disabled]):not(:checked):not([data-checked=true]):active~.dnb-radio__button{background-color:var(--radio-color-background-off--active);border-color:var(--radio-color-border-off--active)}.dnb-radio__input:not([disabled]):not(:focus):checked:hover~.dnb-radio__dot,.dnb-radio__input:not([disabled]):not(:focus)[data-checked=true]:hover~.dnb-radio__dot{background-color:var(--radio-color-dot-on--hover)}.dnb-radio__input:not([disabled]):not(:focus):checked:hover~.dnb-radio__button,.dnb-radio__input:not([disabled]):not(:focus)[data-checked=true]:hover~.dnb-radio__button{background-color:var(--radio-color-background-on--hover);border-width:var(--radio-border-width-on--hover)}.dnb-radio__input:not([disabled]):not(:focus):not(:checked):not([data-checked=true]):hover~.dnb-radio__button{background-color:var(--radio-color-background-off--hover);border-width:var(--radio-border-width--hover)}html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):focus~.dnb-radio__button{border:none}.dnb-radio__input:not([disabled]):active~.dnb-radio__focus,.dnb-radio__input:not([disabled]):focus~.dnb-radio__focus{display:block}html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:active):not(:hover):checked:focus~.dnb-radio__button,html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:active):not(:hover)[data-checked=true]:focus~.dnb-radio__button{background-color:var(--radio-color-background-on--focus)}html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:active):not(:hover):checked:focus~.dnb-radio__dot,html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:active):not(:hover)[data-checked=true]:focus~.dnb-radio__dot{background-color:var(--radio-color-dot-on--focus,var(--focus-ring-color))}html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:checked):not([data-checked=true]):focus~.dnb-radio__button{background-color:var(--radio-color-background-off--focus)}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active)~.dnb-radio__button{border:none}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active)~.dnb-radio__focus{--border-color:var(--radio-color-border-on--error);--border-width:var(--radio-focus-ring-width--error);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);display:block}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):hover~.dnb-radio__focus{--border-color:var(--radio-color-border--error-hover);--border-width:var(--radio-focus-ring-width--error);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):not(:hover):checked~.dnb-radio__dot,.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):not(:hover)[data-checked=true]~.dnb-radio__dot{background-color:var(--radio-color-dot-on--error)}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):checked:hover~.dnb-radio__dot,.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active)[data-checked=true]:hover~.dnb-radio__dot{background-color:var(--radio-color-dot-on--error-hover)}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):checked:hover~.dnb-radio__button,.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active)[data-checked=true]:hover~.dnb-radio__button{background-color:var(--radio-color-background-on--error-hover)}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:checked):not([data-checked=true]):hover~.dnb-radio__button{background-color:var(--radio-color-background-off--error-hover)}

package/cjs/components/radio/style/dnb-radio.scss

@@ -248,11 +248,16 @@
   }
 
   &-group {
-    --radio-group-margin-bottom: 0.5rem;
-    --radio-group-margin-right: 1rem;
+    --radio-group-row-gap: 0.5rem;
+    --radio-group-column-gap: 1rem;
 
     display: inline-flex;
-    // flex-direction: row;
+
+    &,
+    &__fieldset,
+    &__shell {
+      flex-grow: 1;
+    }
 
     fieldset {
       @include fieldsetReset();
@@ -271,8 +276,8 @@
     &__shell {
       display: flex;
       flex-wrap: wrap;
-      column-gap: var(--radio-group-margin-right);
-      row-gap: var(--radio-group-margin-bottom);
+      column-gap: var(--radio-group-column-gap);
+      row-gap: var(--radio-group-row-gap);
     }
 
     &__shell {
@@ -285,13 +290,6 @@
     &--column &__shell {
       flex-direction: column;
     }
-
-    // .dnb-flex-container {
-    //   &::before {
-    //     // move the group 2px up if label exists
-    //     font-size: var(--font-size-basis);
-    //   }
-    // }
   }
 
   /*
@@ -299,7 +297,7 @@
    */
 
   // stylelint-disable no-descending-specificity
-  // We prioritise categorisation and readability over specificity here */
+  // We prioritize categorisation and readability over specificity here */
 
   /** Normal state **/
 

package/cjs/components/section/Section.js

@@ -55,6 +55,9 @@ function SectionParams(localProps) {
   }));
 }
 function getColor(value) {
+  if (value.includes('--')) {
+    return value;
+  }
   return value ? !/#|var/.test(value) ? `var(--color-${value})` : value : undefined;
 }
 function computeStyle(property, name, valueCallback) {

package/cjs/components/section/Section.js.map

@@ -1 +1 @@
-{"version":3,"file":"Section.js","names":["_react","_interopRequireDefault","require","_classnames","_Context","_componentHelper","_Space","_excluded","obj","__esModule","default","ownKeys","object","enumerableOnly","keys","Object","getOwnPropertySymbols","symbols","filter","sym","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","target","i","arguments","length","source","forEach","key","_defineProperty","getOwnPropertyDescriptors","defineProperties","defineProperty","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","call","TypeError","Number","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","sourceSymbolKeys","indexOf","prototype","propertyIsEnumerable","sourceKeys","defaultProps","element","Section","localProps","createElement","SectionParams","context","React","useContext","Context","props","extendPropsWithContext","variant","breakout","roundedCorner","textColor","backgroundColor","dropShadow","outline","innerRef","className","children","spacing","style_type","inner_ref","attributes","internalRef","useRef","elementRef","freeze","classnames","isTrue","style","computeStyle","getColor","test","property","name","valueCallback","media","small","medium","large","result","size","_media","_media2","_name","_supportsSpacingProps"],"sources":["../../../../src/components/section/Section.tsx"],"sourcesContent":["/**\n * Web Section Component\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport Context from '../../shared/Context'\nimport {\n  isTrue,\n  extendPropsWithContext,\n} from '../../shared/component-helper'\nimport type {\n  DynamicElement,\n  ResponsiveProp,\n  SpacingProps,\n} from '../../shared/types'\nimport Space from '../space/Space'\n\nexport type SectionVariants = 'error' | 'info' | 'warning' | 'success'\n\nexport type SectionStyleTypes =\n  | 'divider'\n  | 'white'\n  | 'transparent'\n\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'lavender'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'pistachio'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'emerald-green'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'sea-green'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'fire-red'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'fire-red-8'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'sand-yellow'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'black-3'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'mint-green'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'mint-green-12'\n\nexport type SectionSpacing =\n  | boolean\n  | 'x-small'\n  | 'small'\n  | 'medium'\n  | 'large'\n  | 'x-large'\n  | 'xx-large'\n\nexport type TextColor = string\nexport type OutlineColor = string | boolean\nexport type BackgroundColor = string\nexport type DropShadow = boolean\n\nexport type SectionProps = {\n  /**\n   * Defines the semantic purpose and subsequently the style of the visual helper. Will take precedence over the style_type prop\n   */\n  variant?: SectionVariants | string\n\n  /**\n   * Define if the background color should break-out to a fullscreen view. Defaults to `true`.\n   */\n  breakout?: boolean | ResponsiveProp<boolean>\n\n  /**\n   * Define if the section should have rounded corners. Defaults to `false`.\n   */\n  roundedCorner?: boolean | ResponsiveProp<boolean>\n\n  /**\n   * Define a custom border color. Use a Eufemia color.\n   */\n  outline?: OutlineColor | ResponsiveProp<OutlineColor>\n\n  /**\n   * Define a custom text color to compliment the backgroundColor. Use a Eufemia color.\n   */\n  textColor?: TextColor | ResponsiveProp<TextColor>\n\n  /**\n   * Define a custom background color, instead of a variant. Use a Eufemia color.\n   */\n  backgroundColor?: BackgroundColor | ResponsiveProp<BackgroundColor>\n\n  /**\n   * Define a custom drop-shadow.\n   */\n  dropShadow?: DropShadow | ResponsiveProp<DropShadow>\n\n  /**\n   * Define what HTML element should be used. Defaults to `<section>`.\n   */\n  element?: DynamicElement\n\n  /**\n   * Define a React.Ref.\n   */\n  innerRef?: React.RefObject<HTMLElement>\n\n  /**\n   * @deprecated in v11 use \"innerSpace\" prop instead\n   */\n  spacing?: SectionSpacing | ResponsiveProp<SectionSpacing>\n  /**\n   * @deprecated in v11 use \"background\" prop instead\n   */\n  style_type?: SectionStyleTypes | string\n  /**\n   * @deprecated in v11 use \"innerRef\" prop instead\n   */\n  inner_ref?: React.RefObject<HTMLElement>\n}\n\nexport type SectionAllProps = SectionProps &\n  SpacingProps &\n  Omit<React.HTMLProps<HTMLElement>, 'ref'>\n\ntype SectionReturnParams = Record<string, unknown> & {\n  className: string\n  innerRef: React.RefObject<HTMLElement>\n  children: React.ReactNode\n  style: React.CSSProperties\n}\n\nconst defaultProps = {\n  element: 'section',\n}\n\nexport default function Section(localProps: SectionAllProps) {\n  return <Space {...SectionParams(localProps)} />\n}\n\nexport function SectionParams(\n  localProps: SectionAllProps\n): SectionReturnParams {\n  const context = React.useContext(Context)\n\n  // use only the props from context, who are available here anyway\n  const props = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context.Section\n  )\n\n  const {\n    variant,\n    breakout = true,\n    roundedCorner,\n    textColor,\n    backgroundColor,\n    dropShadow,\n    outline,\n    innerRef,\n\n    className,\n    children,\n\n    spacing,\n    style_type,\n    inner_ref,\n\n    ...attributes\n  } = props\n\n  const internalRef = React.useRef<HTMLElement>()\n  const elementRef = innerRef || inner_ref || internalRef\n\n  return Object.freeze({\n    ...attributes,\n    className: classnames(\n      'dnb-section',\n      `dnb-section--${variant ? variant : style_type || 'default'}`,\n      spacing &&\n        `dnb-section--spacing-${isTrue(spacing) ? 'large' : spacing}`,\n      className\n    ),\n    style: {\n      ...computeStyle(\n        breakout,\n        'breakout',\n        (value) => `var(--breakout--${value ? 'on' : 'off'})`\n      ),\n      ...computeStyle(\n        roundedCorner,\n        'rounded-corner',\n        (value) => value && 'var(--rounded-corner--value)'\n      ),\n      ...computeStyle(textColor, 'text-color', (value) => getColor(value)),\n      ...computeStyle(backgroundColor, 'background-color', (value) =>\n        getColor(value)\n      ),\n      ...computeStyle(\n        dropShadow,\n        'drop-shadow',\n        (value) => value && 'var(--shadow-default)'\n      ),\n      ...computeStyle(outline, 'outline-color', (value) =>\n        String(value) === 'true'\n          ? 'var(--outline-color--value)'\n          : getColor(value)\n      ),\n      ...attributes?.style,\n    } as React.CSSProperties,\n    innerRef: elementRef,\n    children,\n  })\n}\n\nfunction getColor(value: string) {\n  return value\n    ? !/#|var/.test(value)\n      ? `var(--color-${value})`\n      : value\n    : undefined\n}\n\nfunction computeStyle(\n  property: ResponsiveProp<unknown> | boolean | string,\n  name: string,\n  valueCallback: (value: string) => string | undefined\n) {\n  let media = property as ResponsiveProp<unknown>\n\n  if (media !== null && typeof media !== 'object') {\n    media = {\n      small: property,\n      medium: property,\n      large: property,\n    } as ResponsiveProp<unknown>\n  }\n\n  const result = {}\n\n  for (const size in media as ResponsiveProp<unknown>) {\n    if (typeof media?.[size] !== 'undefined') {\n      const value = valueCallback(media?.[size])\n      if (typeof value === 'string') {\n        result[`--${name}--${size}`] = value\n      }\n    }\n  }\n\n  return result\n}\n\nSection._name = 'Section'\nSection._supportsSpacingProps = true\n"],"mappings":"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"}
+{"version":3,"file":"Section.js","names":["_react","_interopRequireDefault","require","_classnames","_Context","_componentHelper","_Space","_excluded","obj","__esModule","default","ownKeys","object","enumerableOnly","keys","Object","getOwnPropertySymbols","symbols","filter","sym","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","target","i","arguments","length","source","forEach","key","_defineProperty","getOwnPropertyDescriptors","defineProperties","defineProperty","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","call","TypeError","Number","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","sourceSymbolKeys","indexOf","prototype","propertyIsEnumerable","sourceKeys","defaultProps","element","Section","localProps","createElement","SectionParams","context","React","useContext","Context","props","extendPropsWithContext","variant","breakout","roundedCorner","textColor","backgroundColor","dropShadow","outline","innerRef","className","children","spacing","style_type","inner_ref","attributes","internalRef","useRef","elementRef","freeze","classnames","isTrue","style","computeStyle","getColor","includes","test","property","name","valueCallback","media","small","medium","large","result","size","_media","_media2","_name","_supportsSpacingProps"],"sources":["../../../../src/components/section/Section.tsx"],"sourcesContent":["/**\n * Web Section Component\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport Context from '../../shared/Context'\nimport {\n  isTrue,\n  extendPropsWithContext,\n} from '../../shared/component-helper'\nimport type {\n  DynamicElement,\n  ResponsiveProp,\n  SpacingProps,\n} from '../../shared/types'\nimport Space from '../space/Space'\n\nexport type SectionVariants = 'error' | 'info' | 'warning' | 'success'\n\nexport type SectionStyleTypes =\n  | 'divider'\n  | 'white'\n  | 'transparent'\n\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'lavender'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'pistachio'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'emerald-green'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'sea-green'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'fire-red'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'fire-red-8'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'sand-yellow'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'black-3'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'mint-green'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'mint-green-12'\n\nexport type SectionSpacing =\n  | boolean\n  | 'x-small'\n  | 'small'\n  | 'medium'\n  | 'large'\n  | 'x-large'\n  | 'xx-large'\n\nexport type TextColor = string\nexport type OutlineColor = string | boolean\nexport type BackgroundColor = string\nexport type DropShadow = boolean\n\nexport type SectionProps = {\n  /**\n   * Defines the semantic purpose and subsequently the style of the visual helper. Will take precedence over the style_type prop\n   */\n  variant?: SectionVariants | string\n\n  /**\n   * Define if the background color should break-out to a fullscreen view. Defaults to `true`.\n   */\n  breakout?: boolean | ResponsiveProp<boolean>\n\n  /**\n   * Define if the section should have rounded corners. Defaults to `false`.\n   */\n  roundedCorner?: boolean | ResponsiveProp<boolean>\n\n  /**\n   * Define a custom border color. Use a Eufemia color.\n   */\n  outline?: OutlineColor | ResponsiveProp<OutlineColor>\n\n  /**\n   * Define a custom text color to compliment the backgroundColor. Use a Eufemia color.\n   */\n  textColor?: TextColor | ResponsiveProp<TextColor>\n\n  /**\n   * Define a custom background color, instead of a variant. Use a Eufemia color.\n   */\n  backgroundColor?: BackgroundColor | ResponsiveProp<BackgroundColor>\n\n  /**\n   * Define a custom drop-shadow.\n   */\n  dropShadow?: DropShadow | ResponsiveProp<DropShadow>\n\n  /**\n   * Define what HTML element should be used. Defaults to `<section>`.\n   */\n  element?: DynamicElement\n\n  /**\n   * Define a React.Ref.\n   */\n  innerRef?: React.RefObject<HTMLElement>\n\n  /**\n   * @deprecated in v11 use \"innerSpace\" prop instead\n   */\n  spacing?: SectionSpacing | ResponsiveProp<SectionSpacing>\n  /**\n   * @deprecated in v11 use \"background\" prop instead\n   */\n  style_type?: SectionStyleTypes | string\n  /**\n   * @deprecated in v11 use \"innerRef\" prop instead\n   */\n  inner_ref?: React.RefObject<HTMLElement>\n}\n\nexport type SectionAllProps = SectionProps &\n  SpacingProps &\n  Omit<React.HTMLProps<HTMLElement>, 'ref'>\n\ntype SectionReturnParams = Record<string, unknown> & {\n  className: string\n  innerRef: React.RefObject<HTMLElement>\n  children: React.ReactNode\n  style: React.CSSProperties\n}\n\nconst defaultProps = {\n  element: 'section',\n}\n\nexport default function Section(localProps: SectionAllProps) {\n  return <Space {...SectionParams(localProps)} />\n}\n\nexport function SectionParams(\n  localProps: SectionAllProps\n): SectionReturnParams {\n  const context = React.useContext(Context)\n\n  // use only the props from context, who are available here anyway\n  const props = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context.Section\n  )\n\n  const {\n    variant,\n    breakout = true,\n    roundedCorner,\n    textColor,\n    backgroundColor,\n    dropShadow,\n    outline,\n    innerRef,\n\n    className,\n    children,\n\n    spacing,\n    style_type,\n    inner_ref,\n\n    ...attributes\n  } = props\n\n  const internalRef = React.useRef<HTMLElement>()\n  const elementRef = innerRef || inner_ref || internalRef\n\n  return Object.freeze({\n    ...attributes,\n    className: classnames(\n      'dnb-section',\n      `dnb-section--${variant ? variant : style_type || 'default'}`,\n      spacing &&\n        `dnb-section--spacing-${isTrue(spacing) ? 'large' : spacing}`,\n      className\n    ),\n    style: {\n      ...computeStyle(\n        breakout,\n        'breakout',\n        (value) => `var(--breakout--${value ? 'on' : 'off'})`\n      ),\n      ...computeStyle(\n        roundedCorner,\n        'rounded-corner',\n        (value) => value && 'var(--rounded-corner--value)'\n      ),\n      ...computeStyle(textColor, 'text-color', (value) => getColor(value)),\n      ...computeStyle(backgroundColor, 'background-color', (value) =>\n        getColor(value)\n      ),\n      ...computeStyle(\n        dropShadow,\n        'drop-shadow',\n        (value) => value && 'var(--shadow-default)'\n      ),\n      ...computeStyle(outline, 'outline-color', (value) =>\n        String(value) === 'true'\n          ? 'var(--outline-color--value)'\n          : getColor(value)\n      ),\n      ...attributes?.style,\n    } as React.CSSProperties,\n    innerRef: elementRef,\n    children,\n  })\n}\n\nfunction getColor(value: string) {\n  if (value.includes('--')) {\n    return value\n  }\n  return value\n    ? !/#|var/.test(value)\n      ? `var(--color-${value})`\n      : value\n    : undefined\n}\n\nfunction computeStyle(\n  property: ResponsiveProp<unknown> | boolean | string,\n  name: string,\n  valueCallback: (value: string) => string | undefined\n) {\n  let media = property as ResponsiveProp<unknown>\n\n  if (media !== null && typeof media !== 'object') {\n    media = {\n      small: property,\n      medium: property,\n      large: property,\n    } as ResponsiveProp<unknown>\n  }\n\n  const result = {}\n\n  for (const size in media as ResponsiveProp<unknown>) {\n    if (typeof media?.[size] !== 'undefined') {\n      const value = valueCallback(media?.[size])\n      if (typeof value === 'string') {\n        result[`--${name}--${size}`] = value\n      }\n    }\n  }\n\n  return result\n}\n\nSection._name = 'Section'\nSection._supportsSpacingProps = true\n"],"mappings":"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"}

package/cjs/components/section/style/dnb-section.scss

@@ -31,6 +31,7 @@
     background-color: var(--background-color, white);
   }
 
+  // The outline border
   &::before {
     content: '';
     position: absolute;
@@ -41,6 +42,7 @@
     border-radius: var(--rounded-corner, 0);
   }
 
+  // The background color
   &::after {
     content: '';
     visibility: var(--breakout, hidden);

package/cjs/components/toggle-button/ToggleButtonGroup.js

@@ -14,6 +14,7 @@ var _AlignmentHelper2 = _interopRequireDefault(require("../../shared/AlignmentHe
 var _FormLabel = _interopRequireDefault(require("../FormLabel"));
 var _FormStatus = _interopRequireDefault(require("../FormStatus"));
 var _Flex = _interopRequireDefault(require("../Flex"));
+var _Space = _interopRequireDefault(require("../Space"));
 var _Context = _interopRequireDefault(require("../../shared/Context"));
 var _Suffix = _interopRequireDefault(require("../../shared/helpers/Suffix"));
 var _ToggleButtonGroupContext = _interopRequireDefault(require("./ToggleButtonGroupContext"));
@@ -153,15 +154,17 @@ class ToggleButtonGroup extends _react.default.PureComponent {
       value: context
     }, _react.default.createElement("div", {
       className: classes
-    }, _AlignmentHelper || (_AlignmentHelper = _react.default.createElement(_AlignmentHelper2.default, null)), _react.default.createElement(Fieldset, null, _react.default.createElement(_Flex.default.Container, {
-      align: "baseline",
+    }, _AlignmentHelper || (_AlignmentHelper = _react.default.createElement(_AlignmentHelper2.default, null)), _react.default.createElement(Fieldset, {
+      className: "dnb-toggle-button-group__fieldset"
+    }, _react.default.createElement(_Flex.default.Container, {
       direction: vertical || label_direction === 'vertical' ? 'vertical' : 'horizontal',
       gap: vertical ? 'x-small' : 'small'
     }, label && _react.default.createElement(_FormLabel.default, {
       element: "legend",
       id: id + '-label',
       srOnly: label_sr_only
-    }, label), _react.default.createElement("span", _extends({
+    }, label), _react.default.createElement(_Space.default, _extends({
+      element: "span",
       id: id,
       className: "dnb-toggle-button-group__shell",
       role: "group"