@dnb/eufemia 10.7.0 → 10.9.0

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

@@ -1 +1 @@
-{"version":3,"file":"AccordionHeader.js","names":["React","useContext","useState","validateDOMAttributes","extendPropsWithContext","IconPrimary","classnames","AccordionContext","createSpacingClasses","skeletonDOMAttributes","createSkeletonClass","AccordionHeaderTitle","_ref","children","rest","_objectWithoutProperties","_excluded","createElement","className","AccordionHeaderDescription","_ref2","_excluded2","AccordionHeaderContainer","_ref3","_excluded3","AccordionHeaderIcon","icon","expanded","size","accordionHeaderDefaultProps","icon_size","AccordionHeader","_ref4","icon_size_default","restOfProps","_excluded4","props","_objectSpread","isHoverring","setIsHovering","hasClicked","setHasClicked","context","onKeyDownHandler","event","keyPressed","key","preventDefault","onClickHandler","id","group","canClick","callOnChange","onMouseOverHandler","onMouseOutHandler","allow_close_all","extendedProps","left_component","title","description","element","heading","heading_level","disabled","skeleton","no_animation","icon_position","_left_component","_expanded","_title","_description","_icon","_icon_size","_disabled","_excluded5","defaultParts","Array","isArray","filter","cur","isValidElement","removeParts","forEach","part","find","c","type","push","index","findIndex","splice","partsToRender","wrapperParts","wrapperComp","undefined","iconIndex","headerParams","role","tabIndex","onClick","onKeyDown","onMouseOver","onMouseOut","Element","String","Number","Container","Icon","Title","Description"],"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","useContext","useState","validateDOMAttributes","extendPropsWithContext","useTheme","IconPrimary","classnames","AccordionContext","createSpacingClasses","skeletonDOMAttributes","createSkeletonClass","AccordionHeaderTitle","_ref","children","rest","_objectWithoutProperties","_excluded","createElement","className","AccordionHeaderDescription","_ref2","_excluded2","AccordionHeaderContainer","_ref3","_excluded3","AccordionHeaderIcon","icon","expanded","size","icon_position","_icon2","theme","animateIcon","name","closed","accordionHeaderDefaultProps","icon_size","AccordionHeader","_ref4","icon_size_default","restOfProps","_excluded4","props","_objectSpread","isHoverring","setIsHovering","hasClicked","setHasClicked","context","onKeyDownHandler","event","keyPressed","key","preventDefault","onClickHandler","id","group","canClick","callOnChange","onMouseOverHandler","onMouseOutHandler","allow_close_all","extendedProps","left_component","title","description","element","heading","heading_level","disabled","skeleton","no_animation","_left_component","_expanded","_title","_description","_icon","_icon_size","_disabled","_excluded5","defaultParts","Array","isArray","filter","cur","isValidElement","removeParts","forEach","part","find","c","type","push","index","findIndex","splice","partsToRender","wrapperParts","wrapperComp","undefined","iconIndex","headerParams","role","tabIndex","onClick","onKeyDown","onMouseOver","onMouseOut","Element","String","Number","Container","Icon","Title","Description"],"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":"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"}

package/es/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/es/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/es/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/es/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);
+}

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

@@ -0,0 +1 @@
+.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__content,.dnb-accordion__header{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]){--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:var(--sb-color-blue-light-3);border-color:transparent;border-radius:.125rem;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--border-color);outline:none;z-index:1}html:not([data-whatintent=touch]) .dnb-accordion__header:focus-visible:not([disabled]){--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:var(--sb-color-blue-light-3);border-color:transparent;border-radius:.125rem;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--border-color);outline:none;z-index:1}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]){--border-color: ;--border-width:0.0625rem;--border-color:var(--sb-color-violet);background-color:var(--sb-color-white);border-left-width:var(--accordion-frame-width--active);box-shadow:inset 0 0 0 var(--border-width) var(--border-color);padding-left:calc(var(--accordion-frame-width) - var(--accordion-frame-width--active))}.dnb-accordion__header__container,.dnb-accordion__header__icon{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)}

package/es/components/accordion/style/themes/dnb-accordion-theme-sbanken.scss

@@ -0,0 +1,125 @@
+/*
+* Accordion theme
+*
+*/
+
+@import '../../../../style/core/utilities.scss';
+@import '../../../button/style/themes/button-mixins.scss';
+
+.dnb-accordion {
+  --accordion-border-width: 0;
+  --accordion-border-radius: 0;
+
+  // vertical spacing
+  --accordion-header-margin-vertical: 1rem;
+  --accordion-header-margin-vertical--description: 0.5rem;
+
+  // header
+  --accordion-header-wrapper-margin: 1rem;
+  --accordion-header-wrapper-margin--icon-right: calc(
+    1.5rem - var(--accordion-frame-width)
+  );
+
+  // icon
+  --accordion-header-icon-gutter: 0.5rem;
+  --accordion-header-icon-margin: calc(
+    1.5rem - var(--accordion-frame-width)
+  );
+
+  // frame (left border on expand)
+  --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;
+
+  // background
+  --accordion-bg: transparent;
+  --accordion-bg--expanded: var(--sb-color-violet-light-4);
+  --accordion-bg--disabled: var(--sb-color-gray-light-2);
+
+  // other
+  --accordion-content-padding-left: calc(
+    3.5rem - var(--accordion-frame-width)
+  );
+
+  color: var(--sb-color-text);
+
+  &__header,
+  &__content {
+    background-color: var(--accordion-bg);
+    border-left: var(--accordion-frame-width) solid
+      var(--accordion-frame-color);
+  }
+
+  &__header {
+    @include focus-visible() {
+      @include focusRing('always');
+      z-index: 1;
+      border-radius: 0.125rem;
+      background-color: var(--sb-color-blue-light-3);
+      color: var(--border-color);
+
+      .dnb-accordion__header__icon {
+        color: var(--border-color);
+      }
+    }
+    @include hover() {
+      background-color: var(--sb-color-violet-light-2);
+    }
+
+    @include active() {
+      background-color: var(--sb-color-white);
+      @include fakeBorder(null, null, inset);
+      // must be set after fakeBorder()
+      --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)
+      );
+    }
+
+    &__icon,
+    &__container {
+      color: var(--sb-color-violet);
+    }
+
+    &--icon-right {
+      --accordion-header-icon-margin: 1.5rem;
+      + .dnb-accordion__content {
+        --accordion-content-padding-left: calc(
+          1.5rem - var(--accordion-frame-width)
+        );
+      }
+    }
+
+    // disabled
+    &[disabled] {
+      * {
+        color: var(--sb-color-gray-dark-2);
+      }
+    }
+  }
+
+  &__content__inner {
+    margin-top: 0;
+    padding: 0 1rem 1rem var(--accordion-content-padding-left);
+  }
+
+  &--expanded {
+    --accordion-bg: var(--accordion-bg--expanded);
+    --accordion-frame-color: var(--accordion-frame-color--expanded);
+    --accordion-frame-width--active: 0.125rem;
+
+    > .dnb-accordion__header {
+      font-weight: var(--sb-font-weight-bold);
+    }
+
+    // disabled
+    > .dnb-accordion__header[disabled],
+    > .dnb-accordion__header[disabled] + .dnb-accordion__content {
+      --accordion-bg: var(--accordion-bg--disabled);
+      --accordion-frame-color: var(--accordion-frame-color--disabled);
+    }
+  }
+}

package/es/components/anchor/Anchor.js

@@ -54,7 +54,7 @@ export function AnchorInstance(localProps) {
   return React.createElement(React.Fragment, null, React.createElement(E, _extends({
     as: as,
     id: id,
-    className: classnames(className, omitClass !== true && 'dnb-anchor', typeof children !== 'string' && 'dnb-anchor--has-icon', prefix && 'dnb-anchor--icon-left', suffix && 'dnb-anchor--icon-right', allProps.target === '_blank' && (typeof children !== 'string' || suffix) && 'dnb-anchor--no-icon')
+    className: classnames(className, suffix && 'dnb-anchor--icon-right' + (allProps.target === '_blank' ? " dnb-anchor--no-icon" : ""), omitClass !== true && 'dnb-anchor', typeof children !== 'string' && 'dnb-anchor--has-icon', prefix && 'dnb-anchor--icon-left')
   }, attributes, {
     innerRef: innerRef
   }), prefix, children, suffix), showTooltip && React.createElement(Tooltip, {