@dnb/eufemia 10.7.0 → 10.8.0

package/CHANGELOG.md

@@ -3,6 +3,42 @@
 All notable changes to @dnb/eufemia will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [10.8.0](https://github.com/dnbexperience/eufemia/compare/v10.7.0...v10.8.0) (2023-09-06)
+
+
+### :memo: Documentation
+
+* **NumberFormat:** add source for number formatting in documentation ([#2596](https://github.com/dnbexperience/eufemia/issues/2596)) ([74415a9](https://github.com/dnbexperience/eufemia/commit/74415a948afbafb7eda749bc3c8db5ee3287ee4d))
+* **Section:** move deprecated styles into a seperate docs page ([#2585](https://github.com/dnbexperience/eufemia/issues/2585)) ([d36a4fb](https://github.com/dnbexperience/eufemia/commit/d36a4fb9476ee5865512f4f3dd45ebe88a1a3941)), closes [#2582](https://github.com/dnbexperience/eufemia/issues/2582)
+* **StepIndicator:** fix link to drawer docs ([#2593](https://github.com/dnbexperience/eufemia/issues/2593)) ([31c17eb](https://github.com/dnbexperience/eufemia/commit/31c17eb6908dfd886e4689f1b35fdca871fd3a30))
+
+
+### :sparkles: Features
+
+* **Accordion:** sbanken theme ([#2586](https://github.com/dnbexperience/eufemia/issues/2586)) ([90cc4ac](https://github.com/dnbexperience/eufemia/commit/90cc4acfa4c489d7325c137034b8c2a6da70bd2c))
+* **Breadcrumb:** Add Sbanken style ([#2601](https://github.com/dnbexperience/eufemia/issues/2601)) ([8efbf4a](https://github.com/dnbexperience/eufemia/commit/8efbf4a74420bfc4bf7f7bff2fa4cd5d23a0bc9e))
+* **Checkbox:** add innerRef prop to link a React Ref to the input element ([#2595](https://github.com/dnbexperience/eufemia/issues/2595)) ([095ee6d](https://github.com/dnbexperience/eufemia/commit/095ee6d450ab1019c02e8539cca7d6965d9569d4))
+* **Forms:** improvements ([#2603](https://github.com/dnbexperience/eufemia/issues/2603)) ([2a86a4a](https://github.com/dnbexperience/eufemia/commit/2a86a4adfccf520d71cf5a225a7fb763b0faec34))
+* **FormStatus:** Add Sbanken styles ([#2605](https://github.com/dnbexperience/eufemia/issues/2605)) ([79dfaee](https://github.com/dnbexperience/eufemia/commit/79dfaee03282af010c0698c301cd208131543d4b))
+* **GlobalStatus:** Add warning and success states and Sbanken style ([#2584](https://github.com/dnbexperience/eufemia/issues/2584)) ([33ba995](https://github.com/dnbexperience/eufemia/commit/33ba995a251bd679a09780cbd2cfca9706c79fc4))
+* **Radio:** add innerRef prop to link a React Ref to the input element ([#2598](https://github.com/dnbexperience/eufemia/issues/2598)) ([348ad80](https://github.com/dnbexperience/eufemia/commit/348ad8062776e1f89a48f41139ba1cd5682a3688))
+* **Switch:** add innerRef prop to link a React Ref to the input element ([#2597](https://github.com/dnbexperience/eufemia/issues/2597)) ([efa7733](https://github.com/dnbexperience/eufemia/commit/efa77330040cbb7281b8e6552efe559f45d5dd3c))
+* **Typography, Heading:** change font sizes and added small screen sizes for sbanken ([#2599](https://github.com/dnbexperience/eufemia/issues/2599)) ([96974ab](https://github.com/dnbexperience/eufemia/commit/96974ab1c23c5b6e2066ed4d95135611433faa79))
+
+
+### :bug: Bug Fixes
+
+* add external link icon to anchor with element as children ([#2520](https://github.com/dnbexperience/eufemia/issues/2520)) ([2566dae](https://github.com/dnbexperience/eufemia/commit/2566dae67e203b0b624a89891d95638dac02dc0a))
+* **Autocomplete:** make independent_width work properly ([#2589](https://github.com/dnbexperience/eufemia/issues/2589)) ([90cfc58](https://github.com/dnbexperience/eufemia/commit/90cfc58efe39e4aae20bc6cbb84735427d3eab7c))
+* **Drawer:** add support for closeButtonAttributes ([#2616](https://github.com/dnbexperience/eufemia/issues/2616)) ([d01d2fe](https://github.com/dnbexperience/eufemia/commit/d01d2fe618c109632523c8db00432db94fbbd1ca))
+* **Drawer:** render Drawer.Navigation when hideCloseButton is true ([#2613](https://github.com/dnbexperience/eufemia/issues/2613)) ([fb8b031](https://github.com/dnbexperience/eufemia/commit/fb8b0318930d285e5c71c149b7491bd9db4e5e8a))
+* **Forms:** align card border ([#2588](https://github.com/dnbexperience/eufemia/issues/2588)) ([cd5f695](https://github.com/dnbexperience/eufemia/commit/cd5f6956ffa21d4abfd79a9da7dff11436960a23)), closes [#2587](https://github.com/dnbexperience/eufemia/issues/2587)
+* **Forms:** make PhoneNumber country code searchable by numbers ([#2590](https://github.com/dnbexperience/eufemia/issues/2590)) ([6bdb62f](https://github.com/dnbexperience/eufemia/commit/6bdb62fe95eb9fb43095c0bad9fbb2ffd23761bd))
+* **Forms:** use rem unit over px ([#2587](https://github.com/dnbexperience/eufemia/issues/2587)) ([fe9aee4](https://github.com/dnbexperience/eufemia/commit/fe9aee41a7f4ec249a5bb4961185c46f54ac5972))
+* **InputMasked:** ensure a value with null does not remove the placeholder ([#2594](https://github.com/dnbexperience/eufemia/issues/2594)) ([3d13453](https://github.com/dnbexperience/eufemia/commit/3d1345306e290a88afb8ba208484f5e04bbf063c))
+* **MaskedInput:** correct keep_placeholder css selector ([#2608](https://github.com/dnbexperience/eufemia/issues/2608)) ([509c740](https://github.com/dnbexperience/eufemia/commit/509c740408fd8f6d45922a4b3f96bf60e6a8396f))
+* **TimeLine:** make it possible to update state of subtitle from another subtitle ([#2600](https://github.com/dnbexperience/eufemia/issues/2600)) ([50302dd](https://github.com/dnbexperience/eufemia/commit/50302dd077254d26da00a4a96c57e38c48cc069d))
+
 ## [10.7.0](https://github.com/dnbexperience/eufemia/compare/v10.6.0...v10.7.0) (2023-08-23)
 
 

package/cjs/components/accordion/Accordion.d.ts

@@ -234,7 +234,7 @@ declare namespace Accordion {
     var Header: {
         ({ icon_size: icon_size_default, ...restOfProps }: import("./AccordionHeader").AccordionHeaderProps): import("react/jsx-runtime").JSX.Element;
         Container: ({ children, ...rest }: import("./AccordionHeader").AccordionHeaderContainerProps) => import("react/jsx-runtime").JSX.Element;
-        Icon: ({ icon, expanded, size, }: import("./AccordionHeader").AccordionHeaderIconProps) => import("react/jsx-runtime").JSX.Element;
+        Icon: ({ icon, expanded, size, icon_position, }: import("./AccordionHeader").AccordionHeaderIconProps) => import("react/jsx-runtime").JSX.Element;
         Title: ({ children, ...rest }: import("./AccordionHeader").AccordionHeaderTitleProps) => import("react/jsx-runtime").JSX.Element;
         Description: ({ children, ...rest }: import("./AccordionHeader").AccordionHeaderDescriptionProps) => import("react/jsx-runtime").JSX.Element;
     };

package/cjs/components/accordion/AccordionHeader.d.ts

@@ -4,11 +4,10 @@
  */
 import React from 'react';
 import type { SpacingProps } from '../space/types';
-import type { ButtonIconPosition } from '../Button';
 import type { HeadingLevel } from '../Heading';
 import type { IconSize } from '../Icon';
 import type { SkeletonShow } from '../Skeleton';
-import type { AccordionIcon } from './Accordion';
+import type { AccordionIcon, AccordionIconPosition } from './Accordion';
 export type AccordionHeaderTitleProps = SpacingProps & {
     children?: React.ReactNode;
 };
@@ -29,8 +28,9 @@ export type AccordionHeaderIconProps = {
     icon?: AccordionHeaderIconIcon;
     size?: IconSize;
     expanded?: boolean;
+    icon_position?: AccordionIconPosition;
 };
-declare function AccordionHeaderIcon({ icon, expanded, size, }: AccordionHeaderIconProps): import("react/jsx-runtime").JSX.Element;
+declare function AccordionHeaderIcon({ icon, expanded, size, icon_position, }: AccordionHeaderIconProps): import("react/jsx-runtime").JSX.Element;
 export type AccordionHeaderTitle = string | React.ReactNode | ((...args: any[]) => any);
 export type AccordionHeaderDescription = string | React.ReactNode | ((...args: any[]) => any);
 export type AccordionHeaderLeftComponent = string | React.ReactNode | ((...args: any[]) => any);
@@ -49,7 +49,7 @@ export type AccordionHeaderProps = React.HTMLProps<HTMLElement> & SpacingProps &
     heading?: AccordionHeaderHeading;
     heading_level?: HeadingLevel;
     icon?: AccordionIcon;
-    icon_position?: ButtonIconPosition;
+    icon_position?: AccordionIconPosition;
     icon_size?: IconSize;
     disabled?: boolean;
     skeleton?: SkeletonShow;

package/cjs/components/accordion/AccordionHeader.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.AccordionHeader = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _componentHelper = require("../../shared/component-helper");
+var _shared = require("../../shared");
 var _IconPrimary = _interopRequireDefault(require("../icon-primary/IconPrimary"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _AccordionContext = _interopRequireDefault(require("./AccordionContext"));
@@ -54,16 +55,27 @@ function AccordionHeaderContainer(_ref3) {
   }, children) : null;
 }
 function AccordionHeaderIcon(_ref4) {
+  var _icon2;
   let {
     icon,
     expanded,
-    size = 'medium'
+    size = 'medium',
+    icon_position
   } = _ref4;
+  const theme = (0, _shared.useTheme)();
+  let animateIcon = true;
+  if (!icon && (theme === null || theme === void 0 ? void 0 : theme.name) === 'sbanken') {
+    animateIcon = false;
+    icon = {
+      expanded: 'subtract-medium',
+      closed: 'add-medium'
+    };
+  }
   return _react.default.createElement("span", {
-    className: "dnb-accordion__header__icon"
+    className: (0, _classnames.default)('dnb-accordion__header__icon', !animateIcon && 'dnb-accordion__header__icon--no-animation', icon_position && `dnb-accordion__header__icon--${icon_position}`)
   }, _react.default.createElement(_IconPrimary.default, {
     size: size,
-    icon: icon && typeof icon === 'object' && 'expanded' in icon && typeof (icon === null || icon === void 0 ? void 0 : icon.expanded) !== 'undefined' ? icon[expanded ? 'expanded' : 'closed'] : icon || 'chevron-down',
+    icon: icon && typeof icon === 'object' && 'expanded' in icon && typeof ((_icon2 = icon) === null || _icon2 === void 0 ? void 0 : _icon2.expanded) !== 'undefined' ? icon[expanded ? 'expanded' : 'closed'] : icon || 'chevron-down',
     "aria-hidden": true
   }));
 }
@@ -154,7 +166,8 @@ const AccordionHeader = _ref5 => {
     key: "icon",
     icon: icon,
     size: icon_size,
-    expanded: context.expanded
+    expanded: context.expanded,
+    icon_position: icon_position
   }), _react.default.createElement(AccordionHeaderContainer, {
     key: "container"
   }, left_component), _react.default.createElement(AccordionHeaderTitle, {
@@ -211,7 +224,7 @@ const AccordionHeader = _ref5 => {
     'aria-expanded': context.expanded,
     role: 'button',
     tabIndex: 0,
-    className: (0, _classnames.default)('dnb-accordion__header', (0, _SkeletonHelper.createSkeletonClass)('font', skeleton, context), (0, _SpacingHelper.createSpacingClasses)(rest), className, icon_position && `dnb-accordion__header__icon--${icon_position}`, isHoverring && hasClicked && 'dnb-accordion--hover', !canClick() && 'dnb-accordion__header--prevent-click', description && 'dnb-accordion__header--description', no_animation && 'dnb-accordion__header--no-animation'),
+    className: (0, _classnames.default)('dnb-accordion__header', (0, _SkeletonHelper.createSkeletonClass)('font', skeleton, context), (0, _SpacingHelper.createSpacingClasses)(rest), className, icon_position && `dnb-accordion__header--icon-${icon_position}`, isHoverring && hasClicked && 'dnb-accordion--hover', !canClick() && 'dnb-accordion__header--prevent-click', description && 'dnb-accordion__header--description', no_animation && 'dnb-accordion__header--no-animation'),
     disabled
   }, rest);
   if (disabled || skeleton) {

package/cjs/components/accordion/AccordionHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionHeader.js","names":["_react","_interopRequireWildcard","require","_componentHelper","_IconPrimary","_interopRequireDefault","_classnames","_AccordionContext","_SpacingHelper","_SkeletonHelper","_excluded","_excluded2","_excluded3","_excluded4","_excluded5","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","enumerable","push","apply","_objectSpread","target","i","arguments","length","source","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","AccordionHeaderTitle","_ref","children","rest","createElement","className","classnames","createSpacingClasses","AccordionHeaderDescription","_ref2","AccordionHeaderContainer","_ref3","AccordionHeaderIcon","_ref4","icon","expanded","size","accordionHeaderDefaultProps","icon_size","AccordionHeader","_ref5","icon_size_default","restOfProps","props","isHoverring","setIsHovering","useState","hasClicked","setHasClicked","context","useContext","AccordionContext","onKeyDownHandler","event","keyPressed","preventDefault","onClickHandler","id","group","canClick","callOnChange","onMouseOverHandler","onMouseOutHandler","allow_close_all","extendedProps","extendPropsWithContext","left_component","title","description","element","heading","heading_level","disabled","skeleton","no_animation","icon_position","_left_component","_expanded","_title","_description","_icon","_icon_size","_disabled","defaultParts","Array","isArray","cur","React","isValidElement","removeParts","part","find","c","type","index","findIndex","splice","partsToRender","wrapperParts","wrapperComp","iconIndex","headerParams","role","tabIndex","createSkeletonClass","onClick","onKeyDown","onMouseOver","onMouseOut","skeletonDOMAttributes","validateDOMAttributes","Element","exports","Container","Icon","Title","Description","_default"],"sources":["../../../../src/components/accordion/AccordionHeader.tsx"],"sourcesContent":["/**\n * Web Accordion Component\n *\n */\n\nimport React, { HTMLProps, useContext, useState } from 'react'\nimport type { SpacingProps } from '../space/types'\n\nimport {\n  validateDOMAttributes,\n  extendPropsWithContext,\n} from '../../shared/component-helper'\nimport IconPrimary from '../icon-primary/IconPrimary'\nimport classnames from 'classnames'\nimport AccordionContext from './AccordionContext'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport {\n  skeletonDOMAttributes,\n  createSkeletonClass,\n} from '../skeleton/SkeletonHelper'\n\nimport type { ButtonIconPosition } from '../Button'\nimport type { HeadingLevel } from '../Heading'\nimport type { IconSize } from '../Icon'\nimport type { SkeletonShow } from '../Skeleton'\nimport type { AccordionIcon } from './Accordion'\n\nexport type AccordionHeaderTitleProps = SpacingProps & {\n  children?: React.ReactNode\n}\n\nfunction AccordionHeaderTitle({\n  children = null,\n  ...rest\n}: AccordionHeaderTitleProps) {\n  return (\n    <span\n      className={classnames(\n        'dnb-accordion__header__title',\n        createSpacingClasses(rest)\n      )}\n    >\n      {children}\n    </span>\n  )\n}\n\nexport type AccordionHeaderDescriptionProps = SpacingProps & {\n  children?: React.ReactNode\n}\n\nfunction AccordionHeaderDescription({\n  children = null,\n  ...rest\n}: AccordionHeaderDescriptionProps) {\n  return children ? (\n    <span\n      className={classnames(\n        'dnb-accordion__header__description',\n        createSpacingClasses(rest)\n      )}\n    >\n      {children}\n    </span>\n  ) : null\n}\n\nexport type AccordionHeaderContainerProps = SpacingProps & {\n  children?: React.ReactNode\n}\n\nfunction AccordionHeaderContainer({\n  children = null,\n  ...rest\n}: AccordionHeaderContainerProps) {\n  return children ? (\n    <span\n      className={classnames(\n        'dnb-accordion__header__container',\n        createSpacingClasses(rest)\n      )}\n    >\n      {children}\n    </span>\n  ) : null\n}\n\ntype AccordionHeaderIconIcon =\n  | React.ReactNode\n  | ((...args: any[]) => React.ReactNode)\n  | {\n      closed?: React.ReactNode | ((...args: any[]) => React.ReactNode)\n      expanded?: React.ReactNode | ((...args: any[]) => React.ReactNode)\n    }\n\nexport type AccordionHeaderIconProps = {\n  icon?: AccordionHeaderIconIcon\n  size?: IconSize\n  expanded?: boolean\n}\n\nfunction AccordionHeaderIcon({\n  icon,\n  expanded,\n  size = 'medium',\n}: AccordionHeaderIconProps) {\n  return (\n    <span className=\"dnb-accordion__header__icon\">\n      <IconPrimary\n        size={size}\n        // There has to be a better way than to do so much casting\n        icon={\n          icon &&\n          typeof icon === 'object' &&\n          'expanded' in icon &&\n          typeof icon?.expanded !== 'undefined'\n            ? icon[expanded ? 'expanded' : 'closed']\n            : (icon as React.ReactNode | ((...args: any[]) => any)) ||\n              'chevron-down'\n        }\n        aria-hidden\n      />\n    </span>\n  )\n}\n\nexport type AccordionHeaderTitle =\n  | string\n  | React.ReactNode\n  | ((...args: any[]) => any)\nexport type AccordionHeaderDescription =\n  | string\n  | React.ReactNode\n  | ((...args: any[]) => any)\nexport type AccordionHeaderLeftComponent =\n  | string\n  | React.ReactNode\n  | ((...args: any[]) => any)\nexport type AccordionHeaderElement =\n  | string\n  | React.ReactNode\n  | ((...args: any[]) => any)\nexport type AccordionHeaderHeading =\n  | boolean\n  | string\n  | React.ReactNode\n  | ((...args: any[]) => any)\nexport type AccordionHeaderIcon =\n  | React.ReactNode\n  | ((...args: any[]) => any)\n  | {\n      closed?: React.ReactNode | ((...args: any[]) => any)\n      expanded?: React.ReactNode | ((...args: any[]) => any)\n    }\n\nexport type AccordionHeaderProps = React.HTMLProps<HTMLElement> &\n  SpacingProps & {\n    title?: AccordionHeaderTitle\n    expanded?: boolean\n    description?: AccordionHeaderDescription\n    left_component?: AccordionHeaderLeftComponent\n    element?: AccordionHeaderElement\n    heading?: AccordionHeaderHeading\n    heading_level?: HeadingLevel\n    icon?: AccordionIcon\n    icon_position?: ButtonIconPosition\n    icon_size?: IconSize\n    disabled?: boolean\n    skeleton?: SkeletonShow\n    no_animation?: boolean\n    className?: string\n    children?: string | React.ReactNode | ((...args: any[]) => any)\n  }\n\nconst accordionHeaderDefaultProps = {\n  icon_size: 'medium',\n}\n\nexport const AccordionHeader = ({\n  icon_size: icon_size_default = 'medium',\n  ...restOfProps\n}: AccordionHeaderProps) => {\n  const props = { icon_size: icon_size_default, ...restOfProps }\n\n  const [isHoverring, setIsHovering] = useState<boolean>(false)\n  const [hasClicked, setHasClicked] = useState<boolean>(false)\n\n  const context = useContext(AccordionContext)\n\n  function onKeyDownHandler(event: React.KeyboardEvent<HTMLElement>) {\n    const keyPressed = event.key\n\n    if (keyPressed === 'Enter' || keyPressed === ' ') {\n      event.preventDefault()\n      onClickHandler(event)\n    }\n  }\n\n  function onClickHandler(\n    event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>\n  ) {\n    const { id, group } = context\n\n    if (canClick()) {\n      const expanded = !context.expanded\n      context.callOnChange({ id, group, expanded, event })\n\n      setHasClicked(true)\n    }\n  }\n\n  function onMouseOverHandler() {\n    setIsHovering(true)\n  }\n\n  function onMouseOutHandler() {\n    setIsHovering(false)\n    setHasClicked(false)\n  }\n\n  function canClick() {\n    const { expanded, allow_close_all, group } = context\n    return !group || (group && !expanded) || allow_close_all\n  }\n\n  const extendedProps = extendPropsWithContext(\n    props,\n    accordionHeaderDefaultProps,\n    context as Record<string, unknown>\n  )\n\n  const {\n    id,\n\n    // 1. these props should be the same as ...\n    left_component,\n    expanded, // eslint-disable-line\n    title,\n    description,\n    element,\n    heading,\n    heading_level,\n    icon,\n    icon_size,\n    disabled,\n    skeleton,\n    no_animation,\n  } = extendedProps\n\n  let { icon_position } = extendedProps\n\n  const {\n    children,\n    className,\n\n    // 2. ... these\n    left_component: _left_component, // eslint-disable-line\n    expanded: _expanded, // eslint-disable-line\n    title: _title, // eslint-disable-line\n    description: _description, // eslint-disable-line\n    icon: _icon, // eslint-disable-line\n    icon_size: _icon_size, // eslint-disable-line\n    disabled: _disabled, // eslint-disable-line\n\n    ...rest\n  } = props\n\n  const defaultParts = [\n    <AccordionHeaderIcon\n      key=\"icon\"\n      icon={icon}\n      size={icon_size}\n      expanded={context.expanded}\n    />,\n    <AccordionHeaderContainer key=\"container\">\n      {left_component as React.ReactNode}\n    </AccordionHeaderContainer>,\n    <AccordionHeaderTitle key=\"title\">\n      {title ||\n        (Array.isArray(children)\n          ? children.filter((cur) => !React.isValidElement(cur))\n          : children)}\n    </AccordionHeaderTitle>,\n    <AccordionHeaderDescription key=\"description\">\n      {description as React.ReactNode}\n    </AccordionHeaderDescription>,\n  ]\n\n  if (Array.isArray(children)) {\n    const removeParts = []\n    children.forEach((cur) => {\n      if (React.isValidElement(cur)) {\n        const part = defaultParts.find((c) => c.type === cur.type)\n        if (part) {\n          removeParts.push(part)\n        }\n\n        // if (cur.type === AccordionHeaderTitle) {\n        //   defaultParts.unshift(cur)\n        // } else {\n        //   defaultParts.push(cur)\n        // }\n\n        defaultParts.push(cur)\n      }\n    })\n    removeParts.forEach((part) => {\n      const index = defaultParts.findIndex((c) => c === part)\n      if (index > -1) {\n        defaultParts.splice(index, 1)\n      }\n    })\n  }\n\n  const partsToRender = []\n  const wrapperParts = []\n  const wrapperComp = (\n    <span className=\"dnb-accordion__header__wrapper\" key=\"wrapper\">\n      {wrapperParts}\n    </span>\n  )\n\n  defaultParts.forEach((part) => {\n    if (\n      React.isValidElement(part) &&\n      (part.type === AccordionHeaderTitle ||\n        part.type === AccordionHeaderDescription)\n    ) {\n      wrapperParts.push(part)\n      if (partsToRender.findIndex((c) => c === wrapperComp) === -1) {\n        partsToRender.push(wrapperComp)\n      }\n    } else {\n      partsToRender.push(part)\n    }\n  })\n\n  // position the icon to the right, if the element is not in the beginning\n  if (icon_position === undefined) {\n    const iconIndex = partsToRender.findIndex(\n      (c) => c.type === AccordionHeaderIcon\n    )\n    // because of the container at the beginning, we use 1\n    if (iconIndex > 1) {\n      icon_position = 'right'\n    }\n\n    if (left_component) {\n      icon_position = 'right'\n    }\n  }\n\n  const headerParams = {\n    id: `${id}-header`,\n    'aria-controls': `${id}-content`,\n    'aria-expanded': context.expanded,\n    role: 'button',\n    tabIndex: 0,\n    className: classnames(\n      'dnb-accordion__header',\n      icon_position && `dnb-accordion__header__icon--${icon_position}`,\n      isHoverring && hasClicked && 'dnb-accordion--hover',\n      !canClick() && 'dnb-accordion__header--prevent-click',\n      description && 'dnb-accordion__header--description',\n      no_animation && 'dnb-accordion__header--no-animation',\n      createSkeletonClass('font', skeleton, context),\n      createSpacingClasses(rest),\n      className\n    ),\n    disabled,\n    ...rest,\n  } satisfies HTMLProps<HTMLElement>\n\n  if (disabled || skeleton) {\n    headerParams.tabIndex = -1\n    headerParams.disabled = true\n    headerParams['aria-disabled'] = true\n  } else {\n    headerParams.onClick = onClickHandler\n    headerParams.onKeyDown = onKeyDownHandler\n    headerParams.onMouseOver = onMouseOverHandler\n    headerParams.onMouseOut = onMouseOutHandler\n  }\n\n  skeletonDOMAttributes(headerParams, skeleton, context)\n\n  validateDOMAttributes(props, headerParams)\n\n  let Element = 'div'\n\n  // (String(heading) === 'true' || String(heading) === '1') extracted from isTrue function\n  if (heading && (String(heading) === 'true' || String(heading) === '1')) {\n    headerParams.role = 'heading'\n    headerParams['aria-level'] = heading_level ? Number(heading_level) : 2\n  } else if (heading) {\n    headerParams.role = null\n    Element = heading as string\n  } else if (element) {\n    headerParams.role = null\n    Element = element as string\n  }\n\n  return <Element {...headerParams}>{partsToRender}</Element>\n}\n\nAccordionHeader.Container = AccordionHeaderContainer\nAccordionHeader.Icon = AccordionHeaderIcon\nAccordionHeader.Title = AccordionHeaderTitle\nAccordionHeader.Description = AccordionHeaderDescription\n\nexport default AccordionHeader\n"],"mappings":"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"}
+{"version":3,"file":"AccordionHeader.js","names":["_react","_interopRequireWildcard","require","_componentHelper","_shared","_IconPrimary","_interopRequireDefault","_classnames","_AccordionContext","_SpacingHelper","_SkeletonHelper","_excluded","_excluded2","_excluded3","_excluded4","_excluded5","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","enumerable","push","apply","_objectSpread","target","i","arguments","length","source","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","AccordionHeaderTitle","_ref","children","rest","createElement","className","classnames","createSpacingClasses","AccordionHeaderDescription","_ref2","AccordionHeaderContainer","_ref3","AccordionHeaderIcon","_ref4","_icon2","icon","expanded","size","icon_position","theme","useTheme","animateIcon","name","closed","accordionHeaderDefaultProps","icon_size","AccordionHeader","_ref5","icon_size_default","restOfProps","props","isHoverring","setIsHovering","useState","hasClicked","setHasClicked","context","useContext","AccordionContext","onKeyDownHandler","event","keyPressed","preventDefault","onClickHandler","id","group","canClick","callOnChange","onMouseOverHandler","onMouseOutHandler","allow_close_all","extendedProps","extendPropsWithContext","left_component","title","description","element","heading","heading_level","disabled","skeleton","no_animation","_left_component","_expanded","_title","_description","_icon","_icon_size","_disabled","defaultParts","Array","isArray","cur","React","isValidElement","removeParts","part","find","c","type","index","findIndex","splice","partsToRender","wrapperParts","wrapperComp","iconIndex","headerParams","role","tabIndex","createSkeletonClass","onClick","onKeyDown","onMouseOver","onMouseOut","skeletonDOMAttributes","validateDOMAttributes","Element","exports","Container","Icon","Title","Description","_default"],"sources":["../../../../src/components/accordion/AccordionHeader.tsx"],"sourcesContent":["/**\n * Web Accordion Component\n *\n */\n\nimport React, { HTMLProps, useContext, useState } from 'react'\nimport type { SpacingProps } from '../space/types'\n\nimport {\n  validateDOMAttributes,\n  extendPropsWithContext,\n} from '../../shared/component-helper'\nimport { useTheme } from '../../shared'\nimport IconPrimary from '../icon-primary/IconPrimary'\nimport classnames from 'classnames'\nimport AccordionContext from './AccordionContext'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport {\n  skeletonDOMAttributes,\n  createSkeletonClass,\n} from '../skeleton/SkeletonHelper'\n\nimport type { HeadingLevel } from '../Heading'\nimport type { IconSize } from '../Icon'\nimport type { SkeletonShow } from '../Skeleton'\nimport type { AccordionIcon, AccordionIconPosition } from './Accordion'\n\nexport type AccordionHeaderTitleProps = SpacingProps & {\n  children?: React.ReactNode\n}\n\nfunction AccordionHeaderTitle({\n  children = null,\n  ...rest\n}: AccordionHeaderTitleProps) {\n  return (\n    <span\n      className={classnames(\n        'dnb-accordion__header__title',\n        createSpacingClasses(rest)\n      )}\n    >\n      {children}\n    </span>\n  )\n}\n\nexport type AccordionHeaderDescriptionProps = SpacingProps & {\n  children?: React.ReactNode\n}\n\nfunction AccordionHeaderDescription({\n  children = null,\n  ...rest\n}: AccordionHeaderDescriptionProps) {\n  return children ? (\n    <span\n      className={classnames(\n        'dnb-accordion__header__description',\n        createSpacingClasses(rest)\n      )}\n    >\n      {children}\n    </span>\n  ) : null\n}\n\nexport type AccordionHeaderContainerProps = SpacingProps & {\n  children?: React.ReactNode\n}\n\nfunction AccordionHeaderContainer({\n  children = null,\n  ...rest\n}: AccordionHeaderContainerProps) {\n  return children ? (\n    <span\n      className={classnames(\n        'dnb-accordion__header__container',\n        createSpacingClasses(rest)\n      )}\n    >\n      {children}\n    </span>\n  ) : null\n}\n\ntype AccordionHeaderIconIcon =\n  | React.ReactNode\n  | ((...args: any[]) => React.ReactNode)\n  | {\n      closed?: React.ReactNode | ((...args: any[]) => React.ReactNode)\n      expanded?: React.ReactNode | ((...args: any[]) => React.ReactNode)\n    }\n\nexport type AccordionHeaderIconProps = {\n  icon?: AccordionHeaderIconIcon\n  size?: IconSize\n  expanded?: boolean\n  icon_position?: AccordionIconPosition\n}\n\nfunction AccordionHeaderIcon({\n  icon,\n  expanded,\n  size = 'medium',\n  icon_position,\n}: AccordionHeaderIconProps) {\n  const theme = useTheme()\n  let animateIcon = true\n  if (!icon && theme?.name === 'sbanken') {\n    animateIcon = false\n    icon = {\n      expanded: 'subtract-medium',\n      closed: 'add-medium',\n    }\n  }\n\n  return (\n    <span\n      className={classnames(\n        'dnb-accordion__header__icon',\n        !animateIcon && 'dnb-accordion__header__icon--no-animation',\n        icon_position && `dnb-accordion__header__icon--${icon_position}`\n      )}\n    >\n      <IconPrimary\n        size={size}\n        // There has to be a better way than to do so much casting\n        icon={\n          icon &&\n          typeof icon === 'object' &&\n          'expanded' in icon &&\n          typeof icon?.expanded !== 'undefined'\n            ? icon[expanded ? 'expanded' : 'closed']\n            : (icon as React.ReactNode | ((...args: any[]) => any)) ||\n              'chevron-down'\n        }\n        aria-hidden\n      />\n    </span>\n  )\n}\n\nexport type AccordionHeaderTitle =\n  | string\n  | React.ReactNode\n  | ((...args: any[]) => any)\nexport type AccordionHeaderDescription =\n  | string\n  | React.ReactNode\n  | ((...args: any[]) => any)\nexport type AccordionHeaderLeftComponent =\n  | string\n  | React.ReactNode\n  | ((...args: any[]) => any)\nexport type AccordionHeaderElement =\n  | string\n  | React.ReactNode\n  | ((...args: any[]) => any)\nexport type AccordionHeaderHeading =\n  | boolean\n  | string\n  | React.ReactNode\n  | ((...args: any[]) => any)\nexport type AccordionHeaderIcon =\n  | React.ReactNode\n  | ((...args: any[]) => any)\n  | {\n      closed?: React.ReactNode | ((...args: any[]) => any)\n      expanded?: React.ReactNode | ((...args: any[]) => any)\n    }\n\nexport type AccordionHeaderProps = React.HTMLProps<HTMLElement> &\n  SpacingProps & {\n    title?: AccordionHeaderTitle\n    expanded?: boolean\n    description?: AccordionHeaderDescription\n    left_component?: AccordionHeaderLeftComponent\n    element?: AccordionHeaderElement\n    heading?: AccordionHeaderHeading\n    heading_level?: HeadingLevel\n    icon?: AccordionIcon\n    icon_position?: AccordionIconPosition\n    icon_size?: IconSize\n    disabled?: boolean\n    skeleton?: SkeletonShow\n    no_animation?: boolean\n    className?: string\n    children?: string | React.ReactNode | ((...args: any[]) => any)\n  }\n\nconst accordionHeaderDefaultProps = {\n  icon_size: 'medium',\n}\n\nexport const AccordionHeader = ({\n  icon_size: icon_size_default = 'medium',\n  ...restOfProps\n}: AccordionHeaderProps) => {\n  const props = { icon_size: icon_size_default, ...restOfProps }\n\n  const [isHoverring, setIsHovering] = useState<boolean>(false)\n  const [hasClicked, setHasClicked] = useState<boolean>(false)\n\n  const context = useContext(AccordionContext)\n\n  function onKeyDownHandler(event: React.KeyboardEvent<HTMLElement>) {\n    const keyPressed = event.key\n\n    if (keyPressed === 'Enter' || keyPressed === ' ') {\n      event.preventDefault()\n      onClickHandler(event)\n    }\n  }\n\n  function onClickHandler(\n    event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>\n  ) {\n    const { id, group } = context\n\n    if (canClick()) {\n      const expanded = !context.expanded\n      context.callOnChange({ id, group, expanded, event })\n\n      setHasClicked(true)\n    }\n  }\n\n  function onMouseOverHandler() {\n    setIsHovering(true)\n  }\n\n  function onMouseOutHandler() {\n    setIsHovering(false)\n    setHasClicked(false)\n  }\n\n  function canClick() {\n    const { expanded, allow_close_all, group } = context\n    return !group || (group && !expanded) || allow_close_all\n  }\n\n  const extendedProps = extendPropsWithContext(\n    props,\n    accordionHeaderDefaultProps,\n    context as Record<string, unknown>\n  )\n\n  const {\n    id,\n\n    // 1. these props should be the same as ...\n    left_component,\n    expanded, // eslint-disable-line\n    title,\n    description,\n    element,\n    heading,\n    heading_level,\n    icon,\n    icon_size,\n    disabled,\n    skeleton,\n    no_animation,\n  } = extendedProps\n\n  let { icon_position } = extendedProps\n\n  const {\n    children,\n    className,\n\n    // 2. ... these\n    left_component: _left_component, // eslint-disable-line\n    expanded: _expanded, // eslint-disable-line\n    title: _title, // eslint-disable-line\n    description: _description, // eslint-disable-line\n    icon: _icon, // eslint-disable-line\n    icon_size: _icon_size, // eslint-disable-line\n    disabled: _disabled, // eslint-disable-line\n\n    ...rest\n  } = props\n\n  const defaultParts = [\n    <AccordionHeaderIcon\n      key=\"icon\"\n      icon={icon}\n      size={icon_size}\n      expanded={context.expanded}\n      icon_position={icon_position}\n    />,\n    <AccordionHeaderContainer key=\"container\">\n      {left_component as React.ReactNode}\n    </AccordionHeaderContainer>,\n    <AccordionHeaderTitle key=\"title\">\n      {title ||\n        (Array.isArray(children)\n          ? children.filter((cur) => !React.isValidElement(cur))\n          : children)}\n    </AccordionHeaderTitle>,\n    <AccordionHeaderDescription key=\"description\">\n      {description as React.ReactNode}\n    </AccordionHeaderDescription>,\n  ]\n\n  if (Array.isArray(children)) {\n    const removeParts = []\n    children.forEach((cur) => {\n      if (React.isValidElement(cur)) {\n        const part = defaultParts.find((c) => c.type === cur.type)\n        if (part) {\n          removeParts.push(part)\n        }\n\n        // if (cur.type === AccordionHeaderTitle) {\n        //   defaultParts.unshift(cur)\n        // } else {\n        //   defaultParts.push(cur)\n        // }\n\n        defaultParts.push(cur)\n      }\n    })\n    removeParts.forEach((part) => {\n      const index = defaultParts.findIndex((c) => c === part)\n      if (index > -1) {\n        defaultParts.splice(index, 1)\n      }\n    })\n  }\n\n  const partsToRender = []\n  const wrapperParts = []\n  const wrapperComp = (\n    <span className=\"dnb-accordion__header__wrapper\" key=\"wrapper\">\n      {wrapperParts}\n    </span>\n  )\n\n  defaultParts.forEach((part) => {\n    if (\n      React.isValidElement(part) &&\n      (part.type === AccordionHeaderTitle ||\n        part.type === AccordionHeaderDescription)\n    ) {\n      wrapperParts.push(part)\n      if (partsToRender.findIndex((c) => c === wrapperComp) === -1) {\n        partsToRender.push(wrapperComp)\n      }\n    } else {\n      partsToRender.push(part)\n    }\n  })\n\n  // position the icon to the right, if the element is not in the beginning\n  if (icon_position === undefined) {\n    const iconIndex = partsToRender.findIndex(\n      (c) => c.type === AccordionHeaderIcon\n    )\n    // because of the container at the beginning, we use 1\n    if (iconIndex > 1) {\n      icon_position = 'right'\n    }\n\n    if (left_component) {\n      icon_position = 'right'\n    }\n  }\n\n  const headerParams = {\n    id: `${id}-header`,\n    'aria-controls': `${id}-content`,\n    'aria-expanded': context.expanded,\n    role: 'button',\n    tabIndex: 0,\n    className: classnames(\n      'dnb-accordion__header',\n      icon_position && `dnb-accordion__header--icon-${icon_position}`,\n      isHoverring && hasClicked && 'dnb-accordion--hover',\n      !canClick() && 'dnb-accordion__header--prevent-click',\n      description && 'dnb-accordion__header--description',\n      no_animation && 'dnb-accordion__header--no-animation',\n      createSkeletonClass('font', skeleton, context),\n      createSpacingClasses(rest),\n      className\n    ),\n    disabled,\n    ...rest,\n  } satisfies HTMLProps<HTMLElement>\n\n  if (disabled || skeleton) {\n    headerParams.tabIndex = -1\n    headerParams.disabled = true\n    headerParams['aria-disabled'] = true\n  } else {\n    headerParams.onClick = onClickHandler\n    headerParams.onKeyDown = onKeyDownHandler\n    headerParams.onMouseOver = onMouseOverHandler\n    headerParams.onMouseOut = onMouseOutHandler\n  }\n\n  skeletonDOMAttributes(headerParams, skeleton, context)\n\n  validateDOMAttributes(props, headerParams)\n\n  let Element = 'div'\n\n  // (String(heading) === 'true' || String(heading) === '1') extracted from isTrue function\n  if (heading && (String(heading) === 'true' || String(heading) === '1')) {\n    headerParams.role = 'heading'\n    headerParams['aria-level'] = heading_level ? Number(heading_level) : 2\n  } else if (heading) {\n    headerParams.role = null\n    Element = heading as string\n  } else if (element) {\n    headerParams.role = null\n    Element = element as string\n  }\n\n  return <Element {...headerParams}>{partsToRender}</Element>\n}\n\nAccordionHeader.Container = AccordionHeaderContainer\nAccordionHeader.Icon = AccordionHeaderIcon\nAccordionHeader.Title = AccordionHeaderTitle\nAccordionHeader.Description = AccordionHeaderDescription\n\nexport default AccordionHeader\n"],"mappings":";;;;;;AAKA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAGA,IAAAC,gBAAA,GAAAD,OAAA;AAIA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,YAAA,GAAAC,sBAAA,CAAAJ,OAAA;AACA,IAAAK,WAAA,GAAAD,sBAAA,CAAAJ,OAAA;AACA,IAAAM,iBAAA,GAAAF,sBAAA,CAAAJ,OAAA;AACA,IAAAO,cAAA,GAAAP,OAAA;AACA,IAAAQ,eAAA,GAAAR,OAAA;AAGmC,MAAAS,SAAA;EAAAC,UAAA;EAAAC,UAAA;EAAAC,UAAA;EAAAC,UAAA;AAAA,SAAAT,uBAAAU,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAnB,wBAAAe,GAAA,EAAAI,WAAA,SAAAA,WAAA,IAAAJ,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAQ,KAAA,GAAAL,wBAAA,CAAAC,WAAA,OAAAI,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAT,GAAA,YAAAQ,KAAA,CAAAE,GAAA,CAAAV,GAAA,SAAAW,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAhB,GAAA,QAAAgB,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAnB,GAAA,EAAAgB,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAf,GAAA,EAAAgB,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAhB,GAAA,CAAAgB,GAAA,SAAAL,MAAA,CAAAT,OAAA,GAAAF,GAAA,MAAAQ,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAArB,GAAA,EAAAW,MAAA,YAAAA,MAAA;AAAA,SAAAW,QAAAC,MAAA,EAAAC,cAAA,QAAAC,IAAA,GAAAZ,MAAA,CAAAY,IAAA,CAAAF,MAAA,OAAAV,MAAA,CAAAa,qBAAA,QAAAC,OAAA,GAAAd,MAAA,CAAAa,qBAAA,CAAAH,MAAA,GAAAC,cAAA,KAAAG,OAAA,GAAAA,OAAA,CAAAC,MAAA,WAAAC,GAAA,WAAAhB,MAAA,CAAAE,wBAAA,CAAAQ,MAAA,EAAAM,GAAA,EAAAC,UAAA,OAAAL,IAAA,CAAAM,IAAA,CAAAC,KAAA,CAAAP,IAAA,EAAAE,OAAA,YAAAF,IAAA;AAAA,SAAAQ,cAAAC,MAAA,aAAAC,CAAA,MAAAA,CAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAF,CAAA,UAAAG,MAAA,WAAAF,SAAA,CAAAD,CAAA,IAAAC,SAAA,CAAAD,CAAA,QAAAA,CAAA,OAAAb,OAAA,CAAAT,MAAA,CAAAyB,MAAA,OAAAC,OAAA,WAAAvB,GAAA,IAAAwB,eAAA,CAAAN,MAAA,EAAAlB,GAAA,EAAAsB,MAAA,CAAAtB,GAAA,SAAAH,MAAA,CAAA4B,yBAAA,GAAA5B,MAAA,CAAA6B,gBAAA,CAAAR,MAAA,EAAArB,MAAA,CAAA4B,yBAAA,CAAAH,MAAA,KAAAhB,OAAA,CAAAT,MAAA,CAAAyB,MAAA,GAAAC,OAAA,WAAAvB,GAAA,IAAAH,MAAA,CAAAC,cAAA,CAAAoB,MAAA,EAAAlB,GAAA,EAAAH,MAAA,CAAAE,wBAAA,CAAAuB,MAAA,EAAAtB,GAAA,iBAAAkB,MAAA;AAAA,SAAAM,gBAAAxC,GAAA,EAAAgB,GAAA,EAAA2B,KAAA,IAAA3B,GAAA,GAAA4B,cAAA,CAAA5B,GAAA,OAAAA,GAAA,IAAAhB,GAAA,IAAAa,MAAA,CAAAC,cAAA,CAAAd,GAAA,EAAAgB,GAAA,IAAA2B,KAAA,EAAAA,KAAA,EAAAb,UAAA,QAAAe,YAAA,QAAAC,QAAA,oBAAA9C,GAAA,CAAAgB,GAAA,IAAA2B,KAAA,WAAA3C,GAAA;AAAA,SAAA4C,eAAAG,GAAA,QAAA/B,GAAA,GAAAgC,YAAA,CAAAD,GAAA,2BAAA/B,GAAA,gBAAAA,GAAA,GAAAiC,MAAA,CAAAjC,GAAA;AAAA,SAAAgC,aAAAE,KAAA,EAAAC,IAAA,eAAAD,KAAA,iBAAAA,KAAA,kBAAAA,KAAA,MAAAE,IAAA,GAAAF,KAAA,CAAAG,MAAA,CAAAC,WAAA,OAAAF,IAAA,KAAAG,SAAA,QAAAC,GAAA,GAAAJ,IAAA,CAAAjC,IAAA,CAAA+B,KAAA,EAAAC,IAAA,2BAAAK,GAAA,sBAAAA,GAAA,YAAAC,SAAA,4DAAAN,IAAA,gBAAAF,MAAA,GAAAS,MAAA,EAAAR,KAAA;AAAA,SAAAS,yBAAArB,MAAA,EAAAsB,QAAA,QAAAtB,MAAA,yBAAAJ,MAAA,GAAA2B,6BAAA,CAAAvB,MAAA,EAAAsB,QAAA,OAAA5C,GAAA,EAAAmB,CAAA,MAAAtB,MAAA,CAAAa,qBAAA,QAAAoC,gBAAA,GAAAjD,MAAA,CAAAa,qBAAA,CAAAY,MAAA,QAAAH,CAAA,MAAAA,CAAA,GAAA2B,gBAAA,CAAAzB,MAAA,EAAAF,CAAA,MAAAnB,GAAA,GAAA8C,gBAAA,CAAA3B,CAAA,OAAAyB,QAAA,CAAAG,OAAA,CAAA/C,GAAA,uBAAAH,MAAA,CAAAI,SAAA,CAAA+C,oBAAA,CAAA7C,IAAA,CAAAmB,MAAA,EAAAtB,GAAA,aAAAkB,MAAA,CAAAlB,GAAA,IAAAsB,MAAA,CAAAtB,GAAA,cAAAkB,MAAA;AAAA,SAAA2B,8BAAAvB,MAAA,EAAAsB,QAAA,QAAAtB,MAAA,yBAAAJ,MAAA,WAAA+B,UAAA,GAAApD,MAAA,CAAAY,IAAA,CAAAa,MAAA,OAAAtB,GAAA,EAAAmB,CAAA,OAAAA,CAAA,MAAAA,CAAA,GAAA8B,UAAA,CAAA5B,MAAA,EAAAF,CAAA,MAAAnB,GAAA,GAAAiD,UAAA,CAAA9B,CAAA,OAAAyB,QAAA,CAAAG,OAAA,CAAA/C,GAAA,kBAAAkB,MAAA,CAAAlB,GAAA,IAAAsB,MAAA,CAAAtB,GAAA,YAAAkB,MAAA;AAWnC,SAASgC,oBAAoBA,CAAAC,IAAA,EAGC;EAAA,IAHA;MAC5BC,QAAQ,GAAG;IAEc,CAAC,GAAAD,IAAA;IADvBE,IAAI,GAAAV,wBAAA,CAAAQ,IAAA,EAAAxE,SAAA;EAEP,OACEX,MAAA,CAAAkB,OAAA,CAAAoE,aAAA;IACEC,SAAS,EAAE,IAAAC,mBAAU,EACnB,8BAA8B,EAC9B,IAAAC,mCAAoB,EAACJ,IAAI,CAC3B;EAAE,GAEDD,QACG,CAAC;AAEX;AAMA,SAASM,0BAA0BA,CAAAC,KAAA,EAGC;EAAA,IAHA;MAClCP,QAAQ,GAAG;IAEoB,CAAC,GAAAO,KAAA;IAD7BN,IAAI,GAAAV,wBAAA,CAAAgB,KAAA,EAAA/E,UAAA;EAEP,OAAOwE,QAAQ,GACbpF,MAAA,CAAAkB,OAAA,CAAAoE,aAAA;IACEC,SAAS,EAAE,IAAAC,mBAAU,EACnB,oCAAoC,EACpC,IAAAC,mCAAoB,EAACJ,IAAI,CAC3B;EAAE,GAEDD,QACG,CAAC,GACL,IAAI;AACV;AAMA,SAASQ,wBAAwBA,CAAAC,KAAA,EAGC;EAAA,IAHA;MAChCT,QAAQ,GAAG;IAEkB,CAAC,GAAAS,KAAA;IAD3BR,IAAI,GAAAV,wBAAA,CAAAkB,KAAA,EAAAhF,UAAA;EAEP,OAAOuE,QAAQ,GACbpF,MAAA,CAAAkB,OAAA,CAAAoE,aAAA;IACEC,SAAS,EAAE,IAAAC,mBAAU,EACnB,kCAAkC,EAClC,IAAAC,mCAAoB,EAACJ,IAAI,CAC3B;EAAE,GAEDD,QACG,CAAC,GACL,IAAI;AACV;AAiBA,SAASU,mBAAmBA,CAAAC,KAAA,EAKC;EAAA,IAAAC,MAAA;EAAA,IALA;IAC3BC,IAAI;IACJC,QAAQ;IACRC,IAAI,GAAG,QAAQ;IACfC;EACwB,CAAC,GAAAL,KAAA;EACzB,MAAMM,KAAK,GAAG,IAAAC,gBAAQ,EAAC,CAAC;EACxB,IAAIC,WAAW,GAAG,IAAI;EACtB,IAAI,CAACN,IAAI,IAAI,CAAAI,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEG,IAAI,MAAK,SAAS,EAAE;IACtCD,WAAW,GAAG,KAAK;IACnBN,IAAI,GAAG;MACLC,QAAQ,EAAE,iBAAiB;MAC3BO,MAAM,EAAE;IACV,CAAC;EACH;EAEA,OACEzG,MAAA,CAAAkB,OAAA,CAAAoE,aAAA;IACEC,SAAS,EAAE,IAAAC,mBAAU,EACnB,6BAA6B,EAC7B,CAACe,WAAW,IAAI,2CAA2C,EAC3DH,aAAa,IAAK,gCAA+BA,aAAc,EACjE;EAAE,GAEFpG,MAAA,CAAAkB,OAAA,CAAAoE,aAAA,CAACjF,YAAA,CAAAa,OAAW;IACViF,IAAI,EAAEA,IAAK;IAEXF,IAAI,EACFA,IAAI,IACJ,OAAOA,IAAI,KAAK,QAAQ,IACxB,UAAU,IAAIA,IAAI,IAClB,SAAAD,MAAA,GAAOC,IAAI,cAAAD,MAAA,uBAAJA,MAAA,CAAME,QAAQ,MAAK,WAAW,GACjCD,IAAI,CAACC,QAAQ,GAAG,UAAU,GAAG,QAAQ,CAAC,GACrCD,IAAI,IACL,cACL;IACD;EAAW,CACZ,CACG,CAAC;AAEX;AAkDA,MAAMS,2BAA2B,GAAG;EAClCC,SAAS,EAAE;AACb,CAAC;AAEM,MAAMC,eAAe,GAAGC,KAAA,IAGH;EAAA,IAHI;MAC9BF,SAAS,EAAEG,iBAAiB,GAAG;IAEX,CAAC,GAAAD,KAAA;IADlBE,WAAW,GAAApC,wBAAA,CAAAkC,KAAA,EAAA/F,UAAA;EAEd,MAAMkG,KAAK,GAAA/D,aAAA;IAAK0D,SAAS,EAAEG;EAAiB,GAAKC,WAAW,CAAE;EAE9D,MAAM,CAACE,WAAW,EAAEC,aAAa,CAAC,GAAG,IAAAC,eAAQ,EAAU,KAAK,CAAC;EAC7D,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAG,IAAAF,eAAQ,EAAU,KAAK,CAAC;EAE5D,MAAMG,OAAO,GAAG,IAAAC,iBAAU,EAACC,yBAAgB,CAAC;EAE5C,SAASC,gBAAgBA,CAACC,KAAuC,EAAE;IACjE,MAAMC,UAAU,GAAGD,KAAK,CAAC1F,GAAG;IAE5B,IAAI2F,UAAU,KAAK,OAAO,IAAIA,UAAU,KAAK,GAAG,EAAE;MAChDD,KAAK,CAACE,cAAc,CAAC,CAAC;MACtBC,cAAc,CAACH,KAAK,CAAC;IACvB;EACF;EAEA,SAASG,cAAcA,CACrBH,KAAuE,EACvE;IACA,MAAM;MAAEI,EAAE;MAAEC;IAAM,CAAC,GAAGT,OAAO;IAE7B,IAAIU,QAAQ,CAAC,CAAC,EAAE;MACd,MAAM9B,QAAQ,GAAG,CAACoB,OAAO,CAACpB,QAAQ;MAClCoB,OAAO,CAACW,YAAY,CAAC;QAAEH,EAAE;QAAEC,KAAK;QAAE7B,QAAQ;QAAEwB;MAAM,CAAC,CAAC;MAEpDL,aAAa,CAAC,IAAI,CAAC;IACrB;EACF;EAEA,SAASa,kBAAkBA,CAAA,EAAG;IAC5BhB,aAAa,CAAC,IAAI,CAAC;EACrB;EAEA,SAASiB,iBAAiBA,CAAA,EAAG;IAC3BjB,aAAa,CAAC,KAAK,CAAC;IACpBG,aAAa,CAAC,KAAK,CAAC;EACtB;EAEA,SAASW,QAAQA,CAAA,EAAG;IAClB,MAAM;MAAE9B,QAAQ;MAAEkC,eAAe;MAAEL;IAAM,CAAC,GAAGT,OAAO;IACpD,OAAO,CAACS,KAAK,IAAKA,KAAK,IAAI,CAAC7B,QAAS,IAAIkC,eAAe;EAC1D;EAEA,MAAMC,aAAa,GAAG,IAAAC,uCAAsB,EAC1CtB,KAAK,EACLN,2BAA2B,EAC3BY,OACF,CAAC;EAED,MAAM;IACJQ,EAAE;IAGFS,cAAc;IACdrC,QAAQ;IACRsC,KAAK;IACLC,WAAW;IACXC,OAAO;IACPC,OAAO;IACPC,aAAa;IACb3C,IAAI;IACJU,SAAS;IACTkC,QAAQ;IACRC,QAAQ;IACRC;EACF,CAAC,GAAGV,aAAa;EAEjB,IAAI;IAAEjC;EAAc,CAAC,GAAGiC,aAAa;EAErC,MAAM;MACJjD,QAAQ;MACRG,SAAS;MAGTgD,cAAc,EAAES,eAAe;MAC/B9C,QAAQ,EAAE+C,SAAS;MACnBT,KAAK,EAAEU,MAAM;MACbT,WAAW,EAAEU,YAAY;MACzBlD,IAAI,EAAEmD,KAAK;MACXzC,SAAS,EAAE0C,UAAU;MACrBR,QAAQ,EAAES;IAGZ,CAAC,GAAGtC,KAAK;IADJ3B,IAAI,GAAAV,wBAAA,CACLqC,KAAK,EAAAjG,UAAA;EAET,MAAMwI,YAAY,GAAG,CACnBvJ,MAAA,CAAAkB,OAAA,CAAAoE,aAAA,CAACQ,mBAAmB;IAClB9D,GAAG,EAAC,MAAM;IACViE,IAAI,EAAEA,IAAK;IACXE,IAAI,EAAEQ,SAAU;IAChBT,QAAQ,EAAEoB,OAAO,CAACpB,QAAS;IAC3BE,aAAa,EAAEA;EAAc,CAC9B,CAAC,EACFpG,MAAA,CAAAkB,OAAA,CAAAoE,aAAA,CAACM,wBAAwB;IAAC5D,GAAG,EAAC;EAAW,GACtCuG,cACuB,CAAC,EAC3BvI,MAAA,CAAAkB,OAAA,CAAAoE,aAAA,CAACJ,oBAAoB;IAAClD,GAAG,EAAC;EAAO,GAC9BwG,KAAK,KACHgB,KAAK,CAACC,OAAO,CAACrE,QAAQ,CAAC,GACpBA,QAAQ,CAACxC,MAAM,CAAE8G,GAAG,IAAK,CAACC,cAAK,CAACC,cAAc,CAACF,GAAG,CAAC,CAAC,GACpDtE,QAAQ,CACM,CAAC,EACvBpF,MAAA,CAAAkB,OAAA,CAAAoE,aAAA,CAACI,0BAA0B;IAAC1D,GAAG,EAAC;EAAa,GAC1CyG,WACyB,CAAC,CAC9B;EAED,IAAIe,KAAK,CAACC,OAAO,CAACrE,QAAQ,CAAC,EAAE;IAC3B,MAAMyE,WAAW,GAAG,EAAE;IACtBzE,QAAQ,CAAC7B,OAAO,CAAEmG,GAAG,IAAK;MACxB,IAAIC,cAAK,CAACC,cAAc,CAACF,GAAG,CAAC,EAAE;QAC7B,MAAMI,IAAI,GAAGP,YAAY,CAACQ,IAAI,CAAEC,CAAC,IAAKA,CAAC,CAACC,IAAI,KAAKP,GAAG,CAACO,IAAI,CAAC;QAC1D,IAAIH,IAAI,EAAE;UACRD,WAAW,CAAC9G,IAAI,CAAC+G,IAAI,CAAC;QACxB;QAQAP,YAAY,CAACxG,IAAI,CAAC2G,GAAG,CAAC;MACxB;IACF,CAAC,CAAC;IACFG,WAAW,CAACtG,OAAO,CAAEuG,IAAI,IAAK;MAC5B,MAAMI,KAAK,GAAGX,YAAY,CAACY,SAAS,CAAEH,CAAC,IAAKA,CAAC,KAAKF,IAAI,CAAC;MACvD,IAAII,KAAK,GAAG,CAAC,CAAC,EAAE;QACdX,YAAY,CAACa,MAAM,CAACF,KAAK,EAAE,CAAC,CAAC;MAC/B;IACF,CAAC,CAAC;EACJ;EAEA,MAAMG,aAAa,GAAG,EAAE;EACxB,MAAMC,YAAY,GAAG,EAAE;EACvB,MAAMC,WAAW,GACfvK,MAAA,CAAAkB,OAAA,CAAAoE,aAAA;IAAMC,SAAS,EAAC,gCAAgC;IAACvD,GAAG,EAAC;EAAS,GAC3DsI,YACG,CACP;EAEDf,YAAY,CAAChG,OAAO,CAAEuG,IAAI,IAAK;IAC7B,IACEH,cAAK,CAACC,cAAc,CAACE,IAAI,CAAC,KACzBA,IAAI,CAACG,IAAI,KAAK/E,oBAAoB,IACjC4E,IAAI,CAACG,IAAI,KAAKvE,0BAA0B,CAAC,EAC3C;MACA4E,YAAY,CAACvH,IAAI,CAAC+G,IAAI,CAAC;MACvB,IAAIO,aAAa,CAACF,SAAS,CAAEH,CAAC,IAAKA,CAAC,KAAKO,WAAW,CAAC,KAAK,CAAC,CAAC,EAAE;QAC5DF,aAAa,CAACtH,IAAI,CAACwH,WAAW,CAAC;MACjC;IACF,CAAC,MAAM;MACLF,aAAa,CAACtH,IAAI,CAAC+G,IAAI,CAAC;IAC1B;EACF,CAAC,CAAC;EAGF,IAAI1D,aAAa,KAAK7B,SAAS,EAAE;IAC/B,MAAMiG,SAAS,GAAGH,aAAa,CAACF,SAAS,CACtCH,CAAC,IAAKA,CAAC,CAACC,IAAI,KAAKnE,mBACpB,CAAC;IAED,IAAI0E,SAAS,GAAG,CAAC,EAAE;MACjBpE,aAAa,GAAG,OAAO;IACzB;IAEA,IAAImC,cAAc,EAAE;MAClBnC,aAAa,GAAG,OAAO;IACzB;EACF;EAEA,MAAMqE,YAAY,GAAAxH,aAAA;IAChB6E,EAAE,EAAG,GAAEA,EAAG,SAAQ;IAClB,eAAe,EAAG,GAAEA,EAAG,UAAS;IAChC,eAAe,EAAER,OAAO,CAACpB,QAAQ;IACjCwE,IAAI,EAAE,QAAQ;IACdC,QAAQ,EAAE,CAAC;IACXpF,SAAS,EAAE,IAAAC,mBAAU,EACnB,uBAAuB,EAMvB,IAAAoF,mCAAmB,EAAC,MAAM,EAAE9B,QAAQ,EAAExB,OAAO,CAAC,EAC9C,IAAA7B,mCAAoB,EAACJ,IAAI,CAAC,EAC1BE,SAAS,EAPTa,aAAa,IAAK,+BAA8BA,aAAc,EAAC,EAC/Da,WAAW,IAAIG,UAAU,IAAI,sBAAsB,EACnD,CAACY,QAAQ,CAAC,CAAC,IAAI,sCAAsC,EACrDS,WAAW,IAAI,oCAAoC,EACnDM,YAAY,IAAI,qCAIlB,CAAC;IACDF;EAAQ,GACLxD,IAAI,CACyB;EAElC,IAAIwD,QAAQ,IAAIC,QAAQ,EAAE;IACxB2B,YAAY,CAACE,QAAQ,GAAG,CAAC,CAAC;IAC1BF,YAAY,CAAC5B,QAAQ,GAAG,IAAI;IAC5B4B,YAAY,CAAC,eAAe,CAAC,GAAG,IAAI;EACtC,CAAC,MAAM;IACLA,YAAY,CAACI,OAAO,GAAGhD,cAAc;IACrC4C,YAAY,CAACK,SAAS,GAAGrD,gBAAgB;IACzCgD,YAAY,CAACM,WAAW,GAAG7C,kBAAkB;IAC7CuC,YAAY,CAACO,UAAU,GAAG7C,iBAAiB;EAC7C;EAEA,IAAA8C,qCAAqB,EAACR,YAAY,EAAE3B,QAAQ,EAAExB,OAAO,CAAC;EAEtD,IAAA4D,sCAAqB,EAAClE,KAAK,EAAEyD,YAAY,CAAC;EAE1C,IAAIU,OAAO,GAAG,KAAK;EAGnB,IAAIxC,OAAO,KAAK1E,MAAM,CAAC0E,OAAO,CAAC,KAAK,MAAM,IAAI1E,MAAM,CAAC0E,OAAO,CAAC,KAAK,GAAG,CAAC,EAAE;IACtE8B,YAAY,CAACC,IAAI,GAAG,SAAS;IAC7BD,YAAY,CAAC,YAAY,CAAC,GAAG7B,aAAa,GAAGlE,MAAM,CAACkE,aAAa,CAAC,GAAG,CAAC;EACxE,CAAC,MAAM,IAAID,OAAO,EAAE;IAClB8B,YAAY,CAACC,IAAI,GAAG,IAAI;IACxBS,OAAO,GAAGxC,OAAiB;EAC7B,CAAC,MAAM,IAAID,OAAO,EAAE;IAClB+B,YAAY,CAACC,IAAI,GAAG,IAAI;IACxBS,OAAO,GAAGzC,OAAiB;EAC7B;EAEA,OAAO1I,MAAA,CAAAkB,OAAA,CAAAoE,aAAA,CAAC6F,OAAO,EAAKV,YAAY,EAAGJ,aAAuB,CAAC;AAC7D,CAAC;AAAAe,OAAA,CAAAxE,eAAA,GAAAA,eAAA;AAEDA,eAAe,CAACyE,SAAS,GAAGzF,wBAAwB;AACpDgB,eAAe,CAAC0E,IAAI,GAAGxF,mBAAmB;AAC1Cc,eAAe,CAAC2E,KAAK,GAAGrG,oBAAoB;AAC5C0B,eAAe,CAAC4E,WAAW,GAAG9F,0BAA0B;AAAA,IAAA+F,QAAA,GAEzC7E,eAAe;AAAAwE,OAAA,CAAAlK,OAAA,GAAAuK,QAAA"}

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

@@ -9,6 +9,12 @@
   --accordion-border-width: 0.0625rem;
   --accordion-border-radius: 0.25rem;
   --accordion-easing: var(--easing-default);
+  --accordion-header-margin-vertical: 1.5rem;
+  --accordion-header-margin-vertical--description: 1rem;
+  --accordion-header-wrapper-margin: 2rem;
+  --accordion-header-wrapper-margin--icon-right: 1rem;
+  --accordion-header-icon-gutter: 1rem;
+  --accordion-header-icon-margin: 1rem;
   position: relative;
   display: flex;
   flex-direction: column;
@@ -39,21 +45,18 @@
   display: flex;
   flex-direction: column;
   width: 100%;
-  margin: 1.5rem 0 1.5rem 2rem;
+  margin: var(--accordion-header-margin-vertical) var(--accordion-header-wrapper-margin) var(--accordion-header-margin-vertical) 0;
 }
 .dnb-accordion__header--description .dnb-accordion__header__wrapper {
-  margin: 1rem 0 1rem 2rem;
-}
-.dnb-accordion__header__icon + .dnb-accordion__header__wrapper {
-  margin-left: 0;
-  margin-right: 2rem;
+  margin-top: var(--accordion-header-margin-vertical--description);
+  margin-bottom: var(--accordion-header-margin-vertical--description);
 }
 .dnb-accordion__header__container {
   margin: 0 1rem;
 }
 .dnb-accordion__header__icon {
   align-self: flex-start;
-  margin: 1.5rem 1rem;
+  margin: var(--accordion-header-margin-vertical) var(--accordion-header-icon-gutter) var(--accordion-header-margin-vertical) var(--accordion-header-icon-margin);
   font-size: var(--font-size-small);
   line-height: var(--line-height-small);
   transition: transform 400ms var(--accordion-easing);
@@ -61,24 +64,26 @@
 .dnb-accordion__header--description .dnb-accordion__header__icon {
   margin-top: 1rem;
 }
-.dnb-accordion__header__icon--right {
+.dnb-accordion__header--icon-right {
   justify-content: space-between;
 }
-.dnb-accordion__header__icon--right .dnb-accordion__header__icon {
+.dnb-accordion__header--icon-right .dnb-accordion__header__icon {
+  margin-right: var(--accordion-header-icon-margin);
+  margin-left: var(--accordion-header-icon-gutter);
   order: 3;
 }
-.dnb-accordion__header__icon--right .dnb-accordion__header__container {
+.dnb-accordion__header--icon-right .dnb-accordion__header__container {
   order: 1;
 }
-.dnb-accordion__header__icon--right .dnb-accordion__header__wrapper {
+.dnb-accordion__header--icon-right .dnb-accordion__header__wrapper {
   order: 2;
-  margin-left: 1rem;
-  margin-right: 1rem;
+  margin-right: 0;
+  margin-left: var(--accordion-header-wrapper-margin--icon-right);
 }
-.dnb-accordion__header__icon--right .dnb-accordion__header__wrapper + .dnb-accordion__header__container {
+.dnb-accordion__header--icon-right .dnb-accordion__header__wrapper + .dnb-accordion__header__container {
   margin-right: 0;
 }
-.dnb-accordion__header__icon--right .dnb-accordion__header__container + .dnb-accordion__header__wrapper {
+.dnb-accordion__header--icon-right .dnb-accordion__header__container + .dnb-accordion__header__wrapper {
   margin-left: 0;
 }
 .dnb-accordion__header__title {
@@ -96,7 +101,7 @@
 .dnb-accordion__header__description + .dnb-accordion__header__title {
   margin-top: 0.25rem;
 }
-.dnb-accordion--expanded > .dnb-accordion__header .dnb-accordion__header__icon {
+.dnb-accordion--expanded > .dnb-accordion__header .dnb-accordion__header__icon:not(.dnb-accordion__header__icon--no-animation) {
   transform: rotate(-180deg);
 }
 .dnb-accordion__content {
@@ -132,7 +137,7 @@
   }
 }
 @media screen and (min-width: 40em) {
-  .dnb-accordion-group--single-container .dnb-accordion > .dnb-accordion__header .dnb-accordion__header__icon {
+  .dnb-accordion-group--single-container .dnb-accordion > .dnb-accordion__header .dnb-accordion__header__icon:not(.dnb-accordion__header__icon--no-animation) {
     transform: rotate(-90deg);
   }
 }

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

@@ -1 +1 @@
-.dnb-accordion{--accordion-border-width:0.0625rem;--accordion-border-radius:0.25rem;--accordion-easing:var(--easing-default);display:flex;flex-direction:column;font-size:var(--font-size-small);line-height:var(--line-height-basis);position:relative}.dnb-accordion__header{align-items:center;border:var(--accordion-border-width) solid transparent;border-radius:var(--accordion-border-radius);cursor:pointer;display:flex;outline:none}.dnb-accordion__header:focus{-webkit-user-select:none;user-select:none}.dnb-accordion__header *{pointer-events:none}.dnb-accordion__header--prevent-click{pointer-events:none;-webkit-user-select:none;user-select:none}.dnb-accordion__header__wrapper{display:flex;flex-direction:column;margin:1.5rem 0 1.5rem 2rem;width:100%}.dnb-accordion__header--description .dnb-accordion__header__wrapper{margin:1rem 0 1rem 2rem}.dnb-accordion__header__icon+.dnb-accordion__header__wrapper{margin-left:0;margin-right:2rem}.dnb-accordion__header__container{margin:0 1rem}.dnb-accordion__header__icon{align-self:flex-start;font-size:var(--font-size-small);line-height:var(--line-height-small);margin:1.5rem 1rem;transition:transform .4s var(--accordion-easing)}.dnb-accordion__header--description .dnb-accordion__header__icon{margin-top:1rem}.dnb-accordion__header__icon--right{justify-content:space-between}.dnb-accordion__header__icon--right .dnb-accordion__header__icon{order:3}.dnb-accordion__header__icon--right .dnb-accordion__header__container{order:1}.dnb-accordion__header__icon--right .dnb-accordion__header__wrapper{margin-left:1rem;margin-right:1rem;order:2}.dnb-accordion__header__icon--right .dnb-accordion__header__wrapper+.dnb-accordion__header__container{margin-right:0}.dnb-accordion__header__icon--right .dnb-accordion__header__container+.dnb-accordion__header__wrapper{margin-left:0}.dnb-accordion__header__title{font-size:var(--font-size-basis);line-height:var(--line-height-basis)}.dnb-accordion__header__description{font-size:var(--font-size-small);font-weight:var(--font-weight-basis);line-height:var(--line-height-small)}.dnb-accordion__header__description+.dnb-accordion__header__title,.dnb-accordion__header__title+.dnb-accordion__header__description{margin-top:.25rem}.dnb-accordion--expanded>.dnb-accordion__header .dnb-accordion__header__icon{transform:rotate(-180deg)}.dnb-accordion__content{display:flex;transition:height .4s var(--accordion-easing),opacity .6s var(--accordion-easing);width:100%;will-change:height}.dnb-accordion__content__inner{margin-top:1rem;width:100%}.dnb-accordion__content.dnb-height-animation--hidden .dnb-accordion__content__inner{display:none}.dnb-accordion-group--single-container{transition:min-height 1s var(--accordion-easing)}.dnb-accordion-group--single-container .dnb-accordion{max-width:60rem;position:static}@media screen and (min-width:40em){.dnb-accordion-group--single-container .dnb-accordion__header{width:40%}.dnb-accordion-group--single-container .dnb-accordion__content{margin-left:1rem;transition:opacity 1s var(--accordion-easing)}.dnb-accordion-group--single-container .dnb-accordion__content__inner{margin-top:0}.dnb-accordion-group--single-container .dnb-accordion>.dnb-accordion__header .dnb-accordion__header__icon{transform:rotate(-90deg)}}.dnb-accordion-group--single-container .dnb-accordion-group__children{max-width:60rem}@media screen and (min-width:40em){.dnb-accordion-group--single-container .dnb-accordion-group__children{display:flex;flex-direction:column;position:relative}.dnb-accordion-group--single-container .dnb-accordion-group__children .dnb-accordion__content{position:absolute;right:0;top:0;width:60%;z-index:10}}.dnb-accordion>.dnb-accordion__header--no-animation .dnb-accordion__header__icon,html[data-visual-test] .dnb-accordion .dnb-accordion__header .dnb-accordion__header__icon{transition:none}
+.dnb-accordion{--accordion-border-width:0.0625rem;--accordion-border-radius:0.25rem;--accordion-easing:var(--easing-default);--accordion-header-margin-vertical:1.5rem;--accordion-header-margin-vertical--description:1rem;--accordion-header-wrapper-margin:2rem;--accordion-header-wrapper-margin--icon-right:1rem;--accordion-header-icon-gutter:1rem;--accordion-header-icon-margin:1rem;display:flex;flex-direction:column;font-size:var(--font-size-small);line-height:var(--line-height-basis);position:relative}.dnb-accordion__header{align-items:center;border:var(--accordion-border-width) solid transparent;border-radius:var(--accordion-border-radius);cursor:pointer;display:flex;outline:none}.dnb-accordion__header:focus{-webkit-user-select:none;user-select:none}.dnb-accordion__header *{pointer-events:none}.dnb-accordion__header--prevent-click{pointer-events:none;-webkit-user-select:none;user-select:none}.dnb-accordion__header__wrapper{display:flex;flex-direction:column;margin:var(--accordion-header-margin-vertical) var(--accordion-header-wrapper-margin) var(--accordion-header-margin-vertical) 0;width:100%}.dnb-accordion__header--description .dnb-accordion__header__wrapper{margin-bottom:var(--accordion-header-margin-vertical--description);margin-top:var(--accordion-header-margin-vertical--description)}.dnb-accordion__header__container{margin:0 1rem}.dnb-accordion__header__icon{align-self:flex-start;font-size:var(--font-size-small);line-height:var(--line-height-small);margin:var(--accordion-header-margin-vertical) var(--accordion-header-icon-gutter) var(--accordion-header-margin-vertical) var(--accordion-header-icon-margin);transition:transform .4s var(--accordion-easing)}.dnb-accordion__header--description .dnb-accordion__header__icon{margin-top:1rem}.dnb-accordion__header--icon-right{justify-content:space-between}.dnb-accordion__header--icon-right .dnb-accordion__header__icon{margin-left:var(--accordion-header-icon-gutter);margin-right:var(--accordion-header-icon-margin);order:3}.dnb-accordion__header--icon-right .dnb-accordion__header__container{order:1}.dnb-accordion__header--icon-right .dnb-accordion__header__wrapper{margin-left:var(--accordion-header-wrapper-margin--icon-right);margin-right:0;order:2}.dnb-accordion__header--icon-right .dnb-accordion__header__wrapper+.dnb-accordion__header__container{margin-right:0}.dnb-accordion__header--icon-right .dnb-accordion__header__container+.dnb-accordion__header__wrapper{margin-left:0}.dnb-accordion__header__title{font-size:var(--font-size-basis);line-height:var(--line-height-basis)}.dnb-accordion__header__description{font-size:var(--font-size-small);font-weight:var(--font-weight-basis);line-height:var(--line-height-small)}.dnb-accordion__header__description+.dnb-accordion__header__title,.dnb-accordion__header__title+.dnb-accordion__header__description{margin-top:.25rem}.dnb-accordion--expanded>.dnb-accordion__header .dnb-accordion__header__icon:not(.dnb-accordion__header__icon--no-animation){transform:rotate(-180deg)}.dnb-accordion__content{display:flex;transition:height .4s var(--accordion-easing),opacity .6s var(--accordion-easing);width:100%;will-change:height}.dnb-accordion__content__inner{margin-top:1rem;width:100%}.dnb-accordion__content.dnb-height-animation--hidden .dnb-accordion__content__inner{display:none}.dnb-accordion-group--single-container{transition:min-height 1s var(--accordion-easing)}.dnb-accordion-group--single-container .dnb-accordion{max-width:60rem;position:static}@media screen and (min-width:40em){.dnb-accordion-group--single-container .dnb-accordion__header{width:40%}.dnb-accordion-group--single-container .dnb-accordion__content{margin-left:1rem;transition:opacity 1s var(--accordion-easing)}.dnb-accordion-group--single-container .dnb-accordion__content__inner{margin-top:0}.dnb-accordion-group--single-container .dnb-accordion>.dnb-accordion__header .dnb-accordion__header__icon:not(.dnb-accordion__header__icon--no-animation){transform:rotate(-90deg)}}.dnb-accordion-group--single-container .dnb-accordion-group__children{max-width:60rem}@media screen and (min-width:40em){.dnb-accordion-group--single-container .dnb-accordion-group__children{display:flex;flex-direction:column;position:relative}.dnb-accordion-group--single-container .dnb-accordion-group__children .dnb-accordion__content{position:absolute;right:0;top:0;width:60%;z-index:10}}.dnb-accordion>.dnb-accordion__header--no-animation .dnb-accordion__header__icon,html[data-visual-test] .dnb-accordion .dnb-accordion__header .dnb-accordion__header__icon{transition:none}

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

@@ -10,6 +10,18 @@
   --accordion-border-radius: 0.25rem;
   --accordion-easing: var(--easing-default);
 
+  // vertical spacing
+  --accordion-header-margin-vertical: 1.5rem;
+  --accordion-header-margin-vertical--description: 1rem;
+
+  // wrapper
+  --accordion-header-wrapper-margin: 2rem;
+  --accordion-header-wrapper-margin--icon-right: 1rem;
+
+  // icon
+  --accordion-header-icon-gutter: 1rem;
+  --accordion-header-icon-margin: 1rem;
+
   position: relative;
 
   display: flex;
@@ -47,14 +59,13 @@
       flex-direction: column;
       width: 100%; // this pushes the &__container to the right
 
-      margin: 1.5rem 0 1.5rem 2rem;
+      margin: var(--accordion-header-margin-vertical)
+        var(--accordion-header-wrapper-margin)
+        var(--accordion-header-margin-vertical) 0;
     }
     &--description &__wrapper {
-      margin: 1rem 0 1rem 2rem;
-    }
-    &__icon + &__wrapper {
-      margin-left: 0;
-      margin-right: 2rem;
+      margin-top: var(--accordion-header-margin-vertical--description);
+      margin-bottom: var(--accordion-header-margin-vertical--description);
     }
 
     &__container {
@@ -63,7 +74,10 @@
     &__icon {
       align-self: flex-start;
 
-      margin: 1.5rem 1rem;
+      margin: var(--accordion-header-margin-vertical)
+        var(--accordion-header-icon-gutter)
+        var(--accordion-header-margin-vertical)
+        var(--accordion-header-icon-margin);
 
       font-size: var(--font-size-small);
       line-height: var(
@@ -74,24 +88,26 @@
     &--description &__icon {
       margin-top: 1rem;
     }
-    &__icon--right {
+    &--icon-right {
       justify-content: space-between;
     }
-    &__icon--right &__icon {
+    &--icon-right &__icon {
+      margin-right: var(--accordion-header-icon-margin);
+      margin-left: var(--accordion-header-icon-gutter);
       order: 3;
     }
-    &__icon--right &__container {
+    &--icon-right &__container {
       order: 1;
     }
-    &__icon--right &__wrapper {
+    &--icon-right &__wrapper {
       order: 2;
-      margin-left: 1rem;
-      margin-right: 1rem;
+      margin-right: 0;
+      margin-left: var(--accordion-header-wrapper-margin--icon-right);
     }
-    &__icon--right &__wrapper + &__container {
+    &--icon-right &__wrapper + &__container {
       margin-right: 0;
     }
-    &__icon--right &__container + &__wrapper {
+    &--icon-right &__container + &__wrapper {
       margin-left: 0;
     }
 
@@ -113,7 +129,9 @@
     }
   }
 
-  &--expanded > &__header &__header__icon {
+  &--expanded
+    > &__header
+    &__header__icon:not(#{&}__header__icon--no-animation) {
     transform: rotate(-180deg);
   }
 
@@ -122,7 +140,8 @@
     width: 100%;
 
     will-change: height;
-    transition: height 400ms var(--accordion-easing),
+    transition:
+      height 400ms var(--accordion-easing),
       opacity 600ms var(--accordion-easing);
 
     &__inner {
@@ -169,7 +188,10 @@
     //   }
     // }
   }
-  &-group--single-container & > &__header &__header__icon {
+  &-group--single-container
+    &
+    > &__header
+    &__header__icon:not(#{&}__header__icon--no-animation) {
     @include allAbove(small) {
       transform: rotate(-90deg);
     }

package/cjs/components/accordion/style/themes/dnb-accordion-theme-sbanken.css

@@ -0,0 +1,124 @@
+/*
+* Accordion theme
+*
+*/
+/*
+ * Utilities
+ */
+/*
+* Button mixins
+*
+*/
+.dnb-accordion {
+  --accordion-border-width: 0;
+  --accordion-border-radius: 0;
+  --accordion-header-margin-vertical: 1rem;
+  --accordion-header-margin-vertical--description: 0.5rem;
+  --accordion-header-wrapper-margin: 1rem;
+  --accordion-header-wrapper-margin--icon-right: calc(
+    1.5rem - var(--accordion-frame-width)
+  );
+  --accordion-header-icon-gutter: 0.5rem;
+  --accordion-header-icon-margin: calc(
+    1.5rem - var(--accordion-frame-width)
+  );
+  --accordion-frame-color: transparent;
+  --accordion-frame-color--expanded: var(--sb-color-violet);
+  --accordion-frame-color--disabled: var(--sb-color-gray-dark-2);
+  --accordion-frame-width: 0.1875rem;
+  --accordion-frame-width--active: 0rem;
+  --accordion-bg: transparent;
+  --accordion-bg--expanded: var(--sb-color-violet-light-4);
+  --accordion-bg--disabled: var(--sb-color-gray-light-2);
+  --accordion-content-padding-left: calc(
+    3.5rem - var(--accordion-frame-width)
+  );
+  color: var(--sb-color-text);
+}
+.dnb-accordion__header, .dnb-accordion__content {
+  background-color: var(--accordion-bg);
+  border-left: var(--accordion-frame-width) solid var(--accordion-frame-color);
+}
+html:not([data-whatintent=touch]) .dnb-accordion__header.focus-visible[disabled] {
+  cursor: not-allowed;
+}
+html:not([data-whatintent=touch]) .dnb-accordion__header:focus-visible[disabled] {
+  cursor: not-allowed;
+}
+html:not([data-whatintent=touch]) .dnb-accordion__header.focus-visible:not([disabled]) {
+  outline: none;
+  --border-color: var(--focus-ring-color);
+  --border-width: var(--focus-ring-width);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+  z-index: 1;
+  border-radius: 0.125rem;
+  background-color: var(--sb-color-blue-light-3);
+  color: var(--border-color);
+}
+html:not([data-whatintent=touch]) .dnb-accordion__header:focus-visible:not([disabled]) {
+  outline: none;
+  --border-color: var(--focus-ring-color);
+  --border-width: var(--focus-ring-width);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+  z-index: 1;
+  border-radius: 0.125rem;
+  background-color: var(--sb-color-blue-light-3);
+  color: var(--border-color);
+}
+html:not([data-whatintent=touch]) .dnb-accordion__header.focus-visible:not([disabled]) .dnb-accordion__header__icon {
+  color: var(--border-color);
+}
+html:not([data-whatintent=touch]) .dnb-accordion__header:focus-visible:not([disabled]) .dnb-accordion__header__icon {
+  color: var(--border-color);
+}
+html:not([data-whatintent=touch]) .dnb-accordion__header:hover[disabled] {
+  cursor: not-allowed;
+}
+html:not([data-whatintent=touch]) .dnb-accordion__header:hover:not([disabled]) {
+  background-color: var(--sb-color-violet-light-2);
+}
+.dnb-accordion__header:active[disabled], html:not([data-whatintent=touch]) .dnb-accordion__header:active[disabled] {
+  cursor: not-allowed;
+}
+.dnb-accordion__header:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-accordion__header:active:not([disabled]) {
+  background-color: var(--sb-color-white);
+  --border-color: ;
+  --border-width: 0.0625rem;
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
+  --border-color: var(--sb-color-violet);
+  border-left-width: var(--accordion-frame-width--active);
+  padding-left: calc(var(--accordion-frame-width) - var(--accordion-frame-width--active));
+}
+.dnb-accordion__header__icon, .dnb-accordion__header__container {
+  color: var(--sb-color-violet);
+}
+.dnb-accordion__header--icon-right {
+  --accordion-header-icon-margin: 1.5rem;
+}
+.dnb-accordion__header--icon-right + .dnb-accordion__content {
+  --accordion-content-padding-left: calc(
+    1.5rem - var(--accordion-frame-width)
+  );
+}
+.dnb-accordion__header[disabled] * {
+  color: var(--sb-color-gray-dark-2);
+}
+.dnb-accordion__content__inner {
+  margin-top: 0;
+  padding: 0 1rem 1rem var(--accordion-content-padding-left);
+}
+.dnb-accordion--expanded {
+  --accordion-bg: var(--accordion-bg--expanded);
+  --accordion-frame-color: var(--accordion-frame-color--expanded);
+  --accordion-frame-width--active: 0.125rem;
+}
+.dnb-accordion--expanded > .dnb-accordion__header {
+  font-weight: var(--sb-font-weight-bold);
+}
+.dnb-accordion--expanded > .dnb-accordion__header[disabled],
+.dnb-accordion--expanded > .dnb-accordion__header[disabled] + .dnb-accordion__content {
+  --accordion-bg: var(--accordion-bg--disabled);
+  --accordion-frame-color: var(--accordion-frame-color--disabled);
+}