@dnb/eufemia 10.6.0 → 10.8.0

package/components/breadcrumb/Breadcrumb.js

@@ -20,7 +20,7 @@ export const defaultProps = {
   backToText: 'Back to...',
   isCollapsed: true,
   styleType: 'transparent',
-  collapsedStyleType: 'pistachio',
+  collapsedStyleType: 'info',
   spacing: false
 };
 const Breadcrumb = localProps => {
@@ -99,7 +99,7 @@ const Breadcrumb = localProps => {
     isCollapsed: false,
     noAnimation: noAnimation
   })), currentVariant === 'collapse' && React.createElement(Section, {
-    style_type: collapsedStyleType,
+    variant: collapsedStyleType,
     className: "dnb-breadcrumb__collapse"
   }, React.createElement(BreadcrumbMultiple, {
     data: data,

package/components/breadcrumb/Breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.js","names":["React","useEffect","useState","classnames","createSkeletonClass","createSpacingClasses","Section","Button","useMediaQuery","Context","BreadcrumbItem","convertJsxToString","isTrue","validateDOMAttributes","extendPropsWithContext","BreadcrumbMultiple","defaultProps","skeleton","navText","goBackText","homeText","backToText","isCollapsed","styleType","collapsedStyleType","spacing","Breadcrumb","localProps","_context$translation","context","useContext","allProps","translation","className","children","items","variant","onClick","overrideIsCollapsed","noAnimation","data","href","props","_objectWithoutProperties","_excluded","skeletonClasses","spacingClasses","setCollapse","isSmallScreen","matchOnSSR","when","max","currentVariant","innerSpacing","createElement","_extends","style_type","text","icon","icon_position","Item"],"sources":["../../../../src/components/breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react'\nimport classnames from 'classnames'\n\n// Components\nimport { createSkeletonClass } from '../skeleton/SkeletonHelper'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport Section, {\n  SectionSpacing,\n  SectionStyleTypes,\n} from '../section/Section'\nimport Button from '../button/Button'\n\n// Shared\nimport { useMediaQuery } from '../../shared'\nimport Context from '../../shared/Context'\nimport type { SpacingProps } from '../../shared/types'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\n\n// Internal\nimport BreadcrumbItem, { BreadcrumbItemProps } from './BreadcrumbItem'\nimport {\n  convertJsxToString,\n  isTrue,\n  validateDOMAttributes,\n  extendPropsWithContext,\n} from '../../shared/component-helper'\nimport { BreadcrumbMultiple } from './BreadcrumbMultiple'\n\nexport interface BreadcrumbProps {\n  /**\n   * Custom className on the component root\n   * Default: null\n   */\n  className?: string\n\n  /**\n   * Skeleton should be applied when loading content\n   * Default: null\n   */\n  skeleton?: SkeletonShow\n\n  /**\n   * Pass in a list of your pages as objects of breadcrumbitem to render them as breadcrumbitems.\n   * Default: null\n   */\n  data?: Array<BreadcrumbItemProps>\n\n  /**\n   * The content of the component. Can be used instead of prop \"data\".\n   * Default: null\n   */\n  children?:\n    | React.ReactElement<BreadcrumbItemProps>\n    | Array<React.ReactElement<BreadcrumbItemProps>>\n\n  /**\n   * The variant of the component.\n   * Default: When children and data is not defined, it defaults to \"single\". If they are defined, the variant depends on the viewport.\n   */\n  variant?: 'single' | 'multiple' | 'collapse'\n\n  /**\n   * Handle the click event on 'single'/'collapse'\n   * Default: null\n   */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>\n\n  /**\n   * For variant 'single', use href (or onClick) to set href when clicking \"Back\"\n   * Default: null\n   */\n  href?: string\n\n  /**\n   * Every <nav> on a page needs an unique aria-label text\n   * Default: Page hierarchy\n   */\n  navText?: React.ReactNode\n\n  /**\n   * Add custom 'Back' text for variant 'single'\n   * Default: 'Back' or defined by Context translation\n   */\n  goBackText?: React.ReactNode\n\n  /**\n   * Add custom 'Home' text\n   * Default: 'Home' or defined by Context translation\n   */\n  homeText?: React.ReactNode\n\n  /**\n   * Add custom 'Back to...' text, for variant collapse\n   * Default 'Back to...' or defined by Context translation\n   */\n  backToText?: React.ReactNode\n\n  /**\n   * If variant='collapse', you can override isCollapsed for the collapsed content by updating this value.\n   * Default: null\n   */\n  isCollapsed?: boolean\n\n  /**\n   * Use one of the Section component style types (style_type)\n   * Default: transparent\n   */\n  styleType?: SectionStyleTypes\n\n  /**\n   * Use one of the Section component style types (style_type)\n   * Default: pistachio\n   */\n  collapsedStyleType?: SectionStyleTypes\n\n  /**\n   * Include spacing properties from the Section component in breadcrumb. If only `true` is given, the spacing will be `small`.\n   * Default: false\n   */\n  spacing?: SectionSpacing\n\n  /**\n   * Will disable the height animation\n   * Default: false\n   */\n  noAnimation?: boolean\n}\n\nexport const defaultProps = {\n  skeleton: false,\n  navText: 'Back',\n  goBackText: 'Back',\n  homeText: 'Home',\n  backToText: 'Back to...',\n  isCollapsed: true,\n  styleType: 'transparent',\n  collapsedStyleType: 'pistachio',\n  spacing: false,\n}\n\nconst Breadcrumb = (localProps: BreadcrumbProps & SpacingProps) => {\n  // Every component should have a context\n  const context = React.useContext(Context)\n\n  // Extract additional props from global context\n  const allProps = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context?.translation?.Breadcrumb,\n    context?.Breadcrumb,\n    { skeleton: context?.skeleton }\n  )\n\n  const {\n    className,\n    skeleton,\n    children: items,\n    variant,\n    onClick,\n    navText, // has a translation in context\n    goBackText, // has a translation in context\n    homeText, // eslint-disable-line\n    backToText, // has a translation in context\n    styleType,\n    collapsedStyleType,\n    isCollapsed: overrideIsCollapsed,\n    spacing,\n    noAnimation,\n    data,\n    href,\n    ...props\n  } = allProps\n  const skeletonClasses = createSkeletonClass('font', skeleton, context)\n  const spacingClasses = createSpacingClasses(props)\n\n  const [isCollapsed, setCollapse] = useState(overrideIsCollapsed)\n  const isSmallScreen = useMediaQuery({\n    matchOnSSR: true,\n    when: { max: 'medium' },\n  })\n\n  let currentVariant = variant\n  if (!variant) {\n    if (items || data) {\n      currentVariant = isSmallScreen ? 'collapse' : 'multiple'\n    } else {\n      currentVariant = 'single'\n    }\n  }\n\n  useEffect(() => {\n    setCollapse(overrideIsCollapsed)\n  }, [overrideIsCollapsed])\n\n  validateDOMAttributes(allProps, props)\n\n  const innerSpacing = isTrue(spacing) ? 'small' : spacing\n\n  return (\n    <nav\n      aria-label={convertJsxToString(navText)}\n      className={classnames(\n        'dnb-breadcrumb',\n        skeletonClasses,\n        spacingClasses,\n        className\n      )}\n      {...props}\n    >\n      <Section\n        className=\"dnb-breadcrumb__bar\"\n        style_type={styleType || 'transparent'}\n        spacing={innerSpacing}\n      >\n        {currentVariant === 'collapse' && (\n          <Button\n            text={backToText}\n            variant=\"tertiary\"\n            icon=\"chevron_left\"\n            icon_position=\"left\"\n            onClick={\n              onClick ||\n              (() => {\n                setCollapse(!isCollapsed)\n              })\n            }\n            aria-expanded={!isCollapsed}\n          />\n        )}\n\n        {currentVariant === 'single' && (\n          <Button\n            text={goBackText}\n            variant=\"tertiary\"\n            icon=\"chevron_left\"\n            icon_position=\"left\"\n            onClick={onClick}\n            href={href}\n          />\n        )}\n\n        {currentVariant === 'multiple' && (\n          <BreadcrumbMultiple\n            data={data}\n            items={items}\n            isCollapsed={false}\n            noAnimation={noAnimation}\n          />\n        )}\n      </Section>\n\n      {currentVariant === 'collapse' && (\n        <Section\n          style_type={collapsedStyleType}\n          className=\"dnb-breadcrumb__collapse\"\n        >\n          <BreadcrumbMultiple\n            data={data}\n            items={items}\n            isCollapsed={isCollapsed}\n            noAnimation={noAnimation}\n          />\n        </Section>\n      )}\n    </nav>\n  )\n}\n\nBreadcrumb.Item = BreadcrumbItem\n\nexport { BreadcrumbItem }\n\nexport default Breadcrumb\n"],"mappings":"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"}
+{"version":3,"file":"Breadcrumb.js","names":["React","useEffect","useState","classnames","createSkeletonClass","createSpacingClasses","Section","Button","useMediaQuery","Context","BreadcrumbItem","convertJsxToString","isTrue","validateDOMAttributes","extendPropsWithContext","BreadcrumbMultiple","defaultProps","skeleton","navText","goBackText","homeText","backToText","isCollapsed","styleType","collapsedStyleType","spacing","Breadcrumb","localProps","_context$translation","context","useContext","allProps","translation","className","children","items","variant","onClick","overrideIsCollapsed","noAnimation","data","href","props","_objectWithoutProperties","_excluded","skeletonClasses","spacingClasses","setCollapse","isSmallScreen","matchOnSSR","when","max","currentVariant","innerSpacing","createElement","_extends","style_type","text","icon","icon_position","Item"],"sources":["../../../../src/components/breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react'\nimport classnames from 'classnames'\n\n// Components\nimport { createSkeletonClass } from '../skeleton/SkeletonHelper'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport Section, {\n  SectionSpacing,\n  SectionStyleTypes,\n} from '../section/Section'\nimport Button from '../button/Button'\n\n// Shared\nimport { useMediaQuery } from '../../shared'\nimport Context from '../../shared/Context'\nimport type { SpacingProps } from '../../shared/types'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\n\n// Internal\nimport BreadcrumbItem, { BreadcrumbItemProps } from './BreadcrumbItem'\nimport {\n  convertJsxToString,\n  isTrue,\n  validateDOMAttributes,\n  extendPropsWithContext,\n} from '../../shared/component-helper'\nimport { BreadcrumbMultiple } from './BreadcrumbMultiple'\n\nexport interface BreadcrumbProps {\n  /**\n   * Custom className on the component root\n   * Default: null\n   */\n  className?: string\n\n  /**\n   * Skeleton should be applied when loading content\n   * Default: null\n   */\n  skeleton?: SkeletonShow\n\n  /**\n   * Pass in a list of your pages as objects of breadcrumbitem to render them as breadcrumbitems.\n   * Default: null\n   */\n  data?: Array<BreadcrumbItemProps>\n\n  /**\n   * The content of the component. Can be used instead of prop \"data\".\n   * Default: null\n   */\n  children?:\n    | React.ReactElement<BreadcrumbItemProps>\n    | Array<React.ReactElement<BreadcrumbItemProps>>\n\n  /**\n   * The variant of the component.\n   * Default: When children and data is not defined, it defaults to \"single\". If they are defined, the variant depends on the viewport.\n   */\n  variant?: 'single' | 'multiple' | 'collapse'\n\n  /**\n   * Handle the click event on 'single'/'collapse'\n   * Default: null\n   */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>\n\n  /**\n   * For variant 'single', use href (or onClick) to set href when clicking \"Back\"\n   * Default: null\n   */\n  href?: string\n\n  /**\n   * Every <nav> on a page needs an unique aria-label text\n   * Default: Page hierarchy\n   */\n  navText?: React.ReactNode\n\n  /**\n   * Add custom 'Back' text for variant 'single'\n   * Default: 'Back' or defined by Context translation\n   */\n  goBackText?: React.ReactNode\n\n  /**\n   * Add custom 'Home' text\n   * Default: 'Home' or defined by Context translation\n   */\n  homeText?: React.ReactNode\n\n  /**\n   * Add custom 'Back to...' text, for variant collapse\n   * Default 'Back to...' or defined by Context translation\n   */\n  backToText?: React.ReactNode\n\n  /**\n   * If variant='collapse', you can override isCollapsed for the collapsed content by updating this value.\n   * Default: null\n   */\n  isCollapsed?: boolean\n\n  /**\n   * Use one of the Section component style types (style_type)\n   * Default: transparent\n   */\n  styleType?: SectionStyleTypes\n\n  /**\n   * Use one of the Section component style types (style_type)\n   * Default: pistachio\n   */\n  collapsedStyleType?: SectionStyleTypes\n\n  /**\n   * Include spacing properties from the Section component in breadcrumb. If only `true` is given, the spacing will be `small`.\n   * Default: false\n   */\n  spacing?: SectionSpacing\n\n  /**\n   * Will disable the height animation\n   * Default: false\n   */\n  noAnimation?: boolean\n}\n\nexport const defaultProps = {\n  skeleton: false,\n  navText: 'Back',\n  goBackText: 'Back',\n  homeText: 'Home',\n  backToText: 'Back to...',\n  isCollapsed: true,\n  styleType: 'transparent',\n  collapsedStyleType: 'info',\n  spacing: false,\n}\n\nconst Breadcrumb = (localProps: BreadcrumbProps & SpacingProps) => {\n  // Every component should have a context\n  const context = React.useContext(Context)\n\n  // Extract additional props from global context\n  const allProps = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context?.translation?.Breadcrumb,\n    context?.Breadcrumb,\n    { skeleton: context?.skeleton }\n  )\n\n  const {\n    className,\n    skeleton,\n    children: items,\n    variant,\n    onClick,\n    navText, // has a translation in context\n    goBackText, // has a translation in context\n    homeText, // eslint-disable-line\n    backToText, // has a translation in context\n    styleType,\n    collapsedStyleType,\n    isCollapsed: overrideIsCollapsed,\n    spacing,\n    noAnimation,\n    data,\n    href,\n    ...props\n  } = allProps\n  const skeletonClasses = createSkeletonClass('font', skeleton, context)\n  const spacingClasses = createSpacingClasses(props)\n\n  const [isCollapsed, setCollapse] = useState(overrideIsCollapsed)\n  const isSmallScreen = useMediaQuery({\n    matchOnSSR: true,\n    when: { max: 'medium' },\n  })\n\n  let currentVariant = variant\n  if (!variant) {\n    if (items || data) {\n      currentVariant = isSmallScreen ? 'collapse' : 'multiple'\n    } else {\n      currentVariant = 'single'\n    }\n  }\n\n  useEffect(() => {\n    setCollapse(overrideIsCollapsed)\n  }, [overrideIsCollapsed])\n\n  validateDOMAttributes(allProps, props)\n\n  const innerSpacing = isTrue(spacing) ? 'small' : spacing\n\n  return (\n    <nav\n      aria-label={convertJsxToString(navText)}\n      className={classnames(\n        'dnb-breadcrumb',\n        skeletonClasses,\n        spacingClasses,\n        className\n      )}\n      {...props}\n    >\n      <Section\n        className=\"dnb-breadcrumb__bar\"\n        style_type={styleType || 'transparent'}\n        spacing={innerSpacing}\n      >\n        {currentVariant === 'collapse' && (\n          <Button\n            text={backToText}\n            variant=\"tertiary\"\n            icon=\"chevron_left\"\n            icon_position=\"left\"\n            onClick={\n              onClick ||\n              (() => {\n                setCollapse(!isCollapsed)\n              })\n            }\n            aria-expanded={!isCollapsed}\n          />\n        )}\n\n        {currentVariant === 'single' && (\n          <Button\n            text={goBackText}\n            variant=\"tertiary\"\n            icon=\"chevron_left\"\n            icon_position=\"left\"\n            onClick={onClick}\n            href={href}\n          />\n        )}\n\n        {currentVariant === 'multiple' && (\n          <BreadcrumbMultiple\n            data={data}\n            items={items}\n            isCollapsed={false}\n            noAnimation={noAnimation}\n          />\n        )}\n      </Section>\n\n      {currentVariant === 'collapse' && (\n        <Section\n          variant={collapsedStyleType}\n          className=\"dnb-breadcrumb__collapse\"\n        >\n          <BreadcrumbMultiple\n            data={data}\n            items={items}\n            isCollapsed={isCollapsed}\n            noAnimation={noAnimation}\n          />\n        </Section>\n      )}\n    </nav>\n  )\n}\n\nBreadcrumb.Item = BreadcrumbItem\n\nexport { BreadcrumbItem }\n\nexport default Breadcrumb\n"],"mappings":"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"}

package/components/breadcrumb/BreadcrumbItem.js

@@ -6,6 +6,7 @@ import Button from '../button/Button';
 import IconPrimary from '../icon-primary/IconPrimary';
 import P from '../../elements/P';
 import homeIcon from '../../icons/home';
+import { useTheme, useMediaQuery } from '../../shared';
 import Context from '../../shared/Context';
 import { extendPropsWithContext } from '../../shared/component-helper';
 const defaultProps = {
@@ -16,6 +17,17 @@ const defaultProps = {
   variant: null,
   skeleton: null
 };
+const determineSbankenIcon = (variant, isSmallScreen) => {
+  switch (variant) {
+    case 'home':
+      return homeIcon;
+    case 'single':
+    case 'collapse':
+      return 'chevron_left';
+    default:
+      return isSmallScreen ? 'chevron_left' : 'chevron_right';
+  }
+};
 const BreadcrumbItem = localProps => {
   const context = React.useContext(Context);
   const {
@@ -36,7 +48,17 @@ const BreadcrumbItem = localProps => {
       itemNr
     } = _extendPropsWithConte,
     props = _objectWithoutProperties(_extendPropsWithConte, _excluded);
-  const currentIcon = icon || variant === 'home' && homeIcon || 'chevron_left';
+  const theme = useTheme();
+  const isSmallScreen = useMediaQuery({
+    matchOnSSR: true,
+    when: {
+      max: 'medium'
+    }
+  });
+  let currentIcon = icon || variant === 'home' && homeIcon || 'chevron_left';
+  if ((theme === null || theme === void 0 ? void 0 : theme.name) === 'sbanken') {
+    currentIcon = icon || determineSbankenIcon(variant, isSmallScreen);
+  }
   const currentText = text || variant === 'home' && homeText || '';
   const isInteractive = (href || onClick) && variant !== 'current';
   const style = {

package/components/breadcrumb/BreadcrumbItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbItem.js","names":["React","Button","IconPrimary","P","homeIcon","Context","extendPropsWithContext","defaultProps","text","href","icon","onClick","variant","skeleton","BreadcrumbItem","localProps","context","useContext","translation","Breadcrumb","homeText","_extendPropsWithConte","itemNr","props","_objectWithoutProperties","_excluded","currentIcon","currentText","isInteractive","style","String","createElement","className","undefined","_extends","icon_position","on_click","left"],"sources":["../../../../src/components/breadcrumb/BreadcrumbItem.tsx"],"sourcesContent":["import React from 'react'\n\n// Components\nimport Button from '../button/Button'\nimport IconPrimary from '../icon-primary/IconPrimary'\nimport type { IconIcon } from '../icon/Icon'\n\n// Elements\nimport P from '../../elements/P'\n\n// Icons\nimport homeIcon from '../../icons/home'\n\n// Shared\nimport Context from '../../shared/Context'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\nimport { extendPropsWithContext } from '../../shared/component-helper'\n\nexport interface BreadcrumbItemProps {\n  /**\n   * Text displaying the title of the item's corresponding page\n   * Default: If variant='home', default is \"Home\". Otherwise it is required.\n   */\n  text?: React.ReactNode\n\n  /**\n   * Icon displaying on the left side\n   * Default: HomeIcon / chevron_left\n   */\n  icon?: IconIcon\n\n  /**\n   * Href should be the link to the item's corresponding page.\n   * Default: null\n   */\n  href?: string\n\n  /**\n   * Set a custom click event. In this case, you should not define the prop href.\n   * Default: null\n   */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>\n\n  /**\n   * The component variant. Variant 'current' should correspond to the current page and 'home' to the root page.\n   * Default: null\n   */\n  variant?: 'home' | 'previous' | 'current'\n\n  /**\n   * Skeleton should be applied when loading content\n   * Default: null\n   */\n  skeleton?: SkeletonShow\n\n  /** Internal */\n  itemNr?: number\n}\n\nconst defaultProps = {\n  text: null,\n  href: null,\n  icon: null,\n  onClick: null,\n  variant: null,\n  skeleton: null,\n}\n\nconst BreadcrumbItem = (localProps: BreadcrumbItemProps) => {\n  // Every component should have a context\n  const context = React.useContext(Context)\n  const {\n    translation: {\n      Breadcrumb: { homeText },\n    },\n  } = context\n\n  // Extract additional props from global context\n  const {\n    text,\n    href,\n    icon,\n    onClick,\n    variant,\n    skeleton,\n    itemNr,\n    ...props\n  } = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context?.BreadcrumbItem\n  )\n\n  const currentIcon: IconIcon =\n    icon || (variant === 'home' && homeIcon) || 'chevron_left'\n  const currentText = text || (variant === 'home' && homeText) || ''\n  const isInteractive = (href || onClick) && variant !== 'current'\n  const style = { '--delay': String(itemNr) } as React.CSSProperties\n\n  return (\n    <li\n      className=\"dnb-breadcrumb__item\"\n      aria-current={variant === 'current' ? 'page' : undefined}\n      style={style}\n    >\n      {isInteractive ? (\n        <Button\n          variant=\"tertiary\"\n          href={href}\n          icon={currentIcon}\n          icon_position=\"left\"\n          on_click={onClick}\n          text={currentText}\n          skeleton={skeleton}\n          {...props}\n        />\n      ) : (\n        <span className=\"dnb-breadcrumb__item__span\" {...props}>\n          <IconPrimary\n            icon={currentIcon}\n            className=\"dnb-breadcrumb__item__span__icon\"\n          />\n          <P left=\"0\">{currentText}</P>\n        </span>\n      )}\n    </li>\n  )\n}\n\nexport default BreadcrumbItem\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AAGzB,OAAOC,MAAM,MAAM,kBAAkB;AACrC,OAAOC,WAAW,MAAM,6BAA6B;AAIrD,OAAOC,CAAC,MAAM,kBAAkB;AAGhC,OAAOC,QAAQ,MAAM,kBAAkB;AAGvC,OAAOC,OAAO,MAAM,sBAAsB;AAE1C,SAASC,sBAAsB,QAAQ,+BAA+B;AA2CtE,MAAMC,YAAY,GAAG;EACnBC,IAAI,EAAE,IAAI;EACVC,IAAI,EAAE,IAAI;EACVC,IAAI,EAAE,IAAI;EACVC,OAAO,EAAE,IAAI;EACbC,OAAO,EAAE,IAAI;EACbC,QAAQ,EAAE;AACZ,CAAC;AAED,MAAMC,cAAc,GAAIC,UAA+B,IAAK;EAE1D,MAAMC,OAAO,GAAGhB,KAAK,CAACiB,UAAU,CAACZ,OAAO,CAAC;EACzC,MAAM;IACJa,WAAW,EAAE;MACXC,UAAU,EAAE;QAAEC;MAAS;IACzB;EACF,CAAC,GAAGJ,OAAO;EAGX,MAAAK,qBAAA,GASIf,sBAAsB,CACxBS,UAAU,EACVR,YAAY,EACZS,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEF,cACX,CAAC;IAbK;MACJN,IAAI;MACJC,IAAI;MACJC,IAAI;MACJC,OAAO;MACPC,OAAO;MACPC,QAAQ;MACRS;IAEF,CAAC,GAAAD,qBAAA;IADIE,KAAK,GAAAC,wBAAA,CAAAH,qBAAA,EAAAI,SAAA;EAOV,MAAMC,WAAqB,GACzBhB,IAAI,IAAKE,OAAO,KAAK,MAAM,IAAIR,QAAS,IAAI,cAAc;EAC5D,MAAMuB,WAAW,GAAGnB,IAAI,IAAKI,OAAO,KAAK,MAAM,IAAIQ,QAAS,IAAI,EAAE;EAClE,MAAMQ,aAAa,GAAG,CAACnB,IAAI,IAAIE,OAAO,KAAKC,OAAO,KAAK,SAAS;EAChE,MAAMiB,KAAK,GAAG;IAAE,SAAS,EAAEC,MAAM,CAACR,MAAM;EAAE,CAAwB;EAElE,OACEtB,KAAA,CAAA+B,aAAA;IACEC,SAAS,EAAC,sBAAsB;IAChC,gBAAcpB,OAAO,KAAK,SAAS,GAAG,MAAM,GAAGqB,SAAU;IACzDJ,KAAK,EAAEA;EAAM,GAEZD,aAAa,GACZ5B,KAAA,CAAA+B,aAAA,CAAC9B,MAAM,EAAAiC,QAAA;IACLtB,OAAO,EAAC,UAAU;IAClBH,IAAI,EAAEA,IAAK;IACXC,IAAI,EAAEgB,WAAY;IAClBS,aAAa,EAAC,MAAM;IACpBC,QAAQ,EAAEzB,OAAQ;IAClBH,IAAI,EAAEmB,WAAY;IAClBd,QAAQ,EAAEA;EAAS,GACfU,KAAK,CACV,CAAC,GAEFvB,KAAA,CAAA+B,aAAA,SAAAG,QAAA;IAAMF,SAAS,EAAC;EAA4B,GAAKT,KAAK,GACpDvB,KAAA,CAAA+B,aAAA,CAAC7B,WAAW;IACVQ,IAAI,EAAEgB,WAAY;IAClBM,SAAS,EAAC;EAAkC,CAC7C,CAAC,EACFhC,KAAA,CAAA+B,aAAA,CAAC5B,CAAC;IAACkC,IAAI,EAAC;EAAG,GAAEV,WAAe,CACxB,CAEN,CAAC;AAET,CAAC;AAED,eAAeb,cAAc"}
+{"version":3,"file":"BreadcrumbItem.js","names":["React","Button","IconPrimary","P","homeIcon","useTheme","useMediaQuery","Context","extendPropsWithContext","defaultProps","text","href","icon","onClick","variant","skeleton","determineSbankenIcon","isSmallScreen","BreadcrumbItem","localProps","context","useContext","translation","Breadcrumb","homeText","_extendPropsWithConte","itemNr","props","_objectWithoutProperties","_excluded","theme","matchOnSSR","when","max","currentIcon","name","currentText","isInteractive","style","String","createElement","className","undefined","_extends","icon_position","on_click","left"],"sources":["../../../../src/components/breadcrumb/BreadcrumbItem.tsx"],"sourcesContent":["import React from 'react'\n\n// Components\nimport Button from '../button/Button'\nimport IconPrimary from '../icon-primary/IconPrimary'\nimport type { IconIcon } from '../icon/Icon'\n\n// Elements\nimport P from '../../elements/P'\n\n// Icons\nimport homeIcon from '../../icons/home'\n\n// Shared\nimport { useTheme, useMediaQuery } from '../../shared'\nimport Context from '../../shared/Context'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\nimport { extendPropsWithContext } from '../../shared/component-helper'\n\nexport interface BreadcrumbItemProps {\n  /**\n   * Text displaying the title of the item's corresponding page\n   * Default: If variant='home', default is \"Home\". Otherwise it is required.\n   */\n  text?: React.ReactNode\n\n  /**\n   * Icon displaying on the left side\n   * Default: HomeIcon / chevron_left\n   */\n  icon?: IconIcon\n\n  /**\n   * Href should be the link to the item's corresponding page.\n   * Default: null\n   */\n  href?: string\n\n  /**\n   * Set a custom click event. In this case, you should not define the prop href.\n   * Default: null\n   */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>\n\n  /**\n   * The component variant. Variant 'current' should correspond to the current page and 'home' to the root page.\n   * Default: null\n   */\n  variant?: 'home' | 'previous' | 'current'\n\n  /**\n   * Skeleton should be applied when loading content\n   * Default: null\n   */\n  skeleton?: SkeletonShow\n\n  /** Internal */\n  itemNr?: number\n}\n\nconst defaultProps = {\n  text: null,\n  href: null,\n  icon: null,\n  onClick: null,\n  variant: null,\n  skeleton: null,\n}\n\nconst determineSbankenIcon: IconIcon = (\n  variant: string,\n  isSmallScreen: boolean\n) => {\n  switch (variant) {\n    case 'home':\n      return homeIcon\n    case 'single':\n    case 'collapse':\n      return 'chevron_left'\n    default:\n      return isSmallScreen ? 'chevron_left' : 'chevron_right'\n  }\n}\n\nconst BreadcrumbItem = (localProps: BreadcrumbItemProps) => {\n  // Every component should have a context\n  const context = React.useContext(Context)\n  const {\n    translation: {\n      Breadcrumb: { homeText },\n    },\n  } = context\n\n  // Extract additional props from global context\n  const {\n    text,\n    href,\n    icon,\n    onClick,\n    variant,\n    skeleton,\n    itemNr,\n    ...props\n  } = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context?.BreadcrumbItem\n  )\n\n  const theme = useTheme()\n  const isSmallScreen = useMediaQuery({\n    matchOnSSR: true,\n    when: { max: 'medium' },\n  })\n\n  let currentIcon =\n    icon || (variant === 'home' && homeIcon) || 'chevron_left'\n  if (theme?.name === 'sbanken') {\n    currentIcon = icon || determineSbankenIcon(variant, isSmallScreen)\n  }\n  const currentText = text || (variant === 'home' && homeText) || ''\n  const isInteractive = (href || onClick) && variant !== 'current'\n  const style = { '--delay': String(itemNr) } as React.CSSProperties\n\n  return (\n    <li\n      className=\"dnb-breadcrumb__item\"\n      aria-current={variant === 'current' ? 'page' : undefined}\n      style={style}\n    >\n      {isInteractive ? (\n        <Button\n          variant=\"tertiary\"\n          href={href}\n          icon={currentIcon}\n          icon_position=\"left\"\n          on_click={onClick}\n          text={currentText}\n          skeleton={skeleton}\n          {...props}\n        />\n      ) : (\n        <span className=\"dnb-breadcrumb__item__span\" {...props}>\n          <IconPrimary\n            icon={currentIcon}\n            className=\"dnb-breadcrumb__item__span__icon\"\n          />\n          <P left=\"0\">{currentText}</P>\n        </span>\n      )}\n    </li>\n  )\n}\n\nexport default BreadcrumbItem\n"],"mappings":"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"}

package/components/breadcrumb/style/themes/dnb-breadcrumb-theme-sbanken.css

@@ -0,0 +1,23 @@
+/*
+* Sbanken Breadcrumb theme
+*
+*/
+/*
+ * Utilities
+ */
+.dnb-breadcrumb .dnb-button__text {
+  font-weight: var(--font-weight-medium);
+  color: var(--sb-color-text);
+}
+.dnb-breadcrumb__item__span__icon {
+  color: var(--sb-color-violet);
+}
+.dnb-breadcrumb__item__span .dnb-p {
+  color: var(--sb-color-gray-dark-3);
+}
+.dnb-breadcrumb__item:not(:last-of-type) .dnb-button.dnb-button--has-text {
+  font-weight: var(--font-weight-medium);
+}
+.dnb-breadcrumb__item:not(:last-of-type) .dnb-button.dnb-button--has-text .dnb-button__text {
+  color: var(--sb-color-text);
+}

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

@@ -0,0 +1 @@
+.dnb-breadcrumb .dnb-button__text{color:var(--sb-color-text);font-weight:var(--font-weight-medium)}.dnb-breadcrumb__item__span__icon{color:var(--sb-color-violet)}.dnb-breadcrumb__item__span .dnb-p{color:var(--sb-color-gray-dark-3)}.dnb-breadcrumb__item:not(:last-of-type) .dnb-button.dnb-button--has-text{font-weight:var(--font-weight-medium)}.dnb-breadcrumb__item:not(:last-of-type) .dnb-button.dnb-button--has-text .dnb-button__text{color:var(--sb-color-text)}

package/components/breadcrumb/style/themes/dnb-breadcrumb-theme-sbanken.scss

@@ -0,0 +1,33 @@
+/*
+* Sbanken Breadcrumb theme
+*
+*/
+
+@import '../../../../style/core/utilities.scss';
+
+.dnb-breadcrumb {
+  .dnb-button {
+    &__text {
+      font-weight: var(--font-weight-medium);
+      color: var(--sb-color-text);
+    }
+  }
+  &__item {
+    &__span {
+      &__icon {
+        color: var(--sb-color-violet);
+      }
+      .dnb-p {
+        color: var(--sb-color-gray-dark-3);
+      }
+    }
+  }
+  &__item:not(:last-of-type) {
+    .dnb-button.dnb-button--has-text {
+      font-weight: var(--font-weight-medium);
+      .dnb-button__text {
+        color: var(--sb-color-text);
+      }
+    }
+  }
+}

package/components/button/style/dnb-button--tertiary.css

@@ -6,7 +6,11 @@
 *
 */
 .dnb-button--tertiary {
-  --button-tertiary-focus-overflow: -1rem;
+  --button-tertiary-focus-left: -0.5rem;
+  --button-tertiary-focus-right: -0.5rem;
+  --button-tertiary-focus-overflow--icon-top: -0.5rem;
+  --button-tertiary-underline-overflow: 0;
+  --button-tertiary-underline-overflow--icon: -0.5rem;
 }
 .dnb-button--tertiary .dnb-button__text {
   position: relative;
@@ -26,6 +30,8 @@
   bottom: -0.0625rem;
   color: transparent;
   transition: color 250ms ease-in-out;
+  left: var(--button-tertiary-underline-overflow);
+  right: var(--button-tertiary-underline-overflow);
 }
 [data-visual-test-wrapper] .dnb-button--tertiary .dnb-button__text::after {
   transition: none;
@@ -33,34 +39,54 @@
 .dnb-skeleton .dnb-button--tertiary .dnb-button__text::after {
   content: none;
 }
-.dnb-button--tertiary:focus[disabled], html:not([data-whatintent=touch]) .dnb-button--tertiary:focus[disabled] {
+html:not([data-whatintent=touch]) .dnb-button--tertiary.focus-visible[disabled] {
   cursor: not-allowed;
 }
-.dnb-button--tertiary:focus:not([disabled]), html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]) {
-  outline: initial;
+html:not([data-whatintent=touch]) .dnb-button--tertiary:focus-visible[disabled] {
+  cursor: not-allowed;
 }
-html[data-whatinput=keyboard] .dnb-button--tertiary:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]) {
-  box-shadow: none;
+html:not([data-whatintent=touch]) .dnb-button--tertiary.focus-visible:not([disabled]) {
+  outline: none;
 }
-.dnb-button--tertiary:focus:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled])::before {
+html:not([data-whatintent=touch]) .dnb-button--tertiary:focus-visible:not([disabled]) {
+  outline: none;
+}
+html:not([data-whatintent=touch]) .dnb-button--tertiary.focus-visible:not([disabled])::before {
   content: "";
   position: absolute;
   z-index: 1;
   top: 0;
-  left: -0.5rem;
+  left: var(--button-tertiary-focus-left);
   bottom: 0;
-  right: -0.5rem;
+  right: var(--button-tertiary-focus-right);
   height: inherit;
   border-radius: inherit;
   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;
 }
-html[data-whatinput=keyboard] .dnb-button--tertiary:focus:not([disabled])::before, html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled])::before {
+html:not([data-whatintent=touch]) .dnb-button--tertiary:focus-visible:not([disabled])::before {
+  content: "";
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: var(--button-tertiary-focus-left);
+  bottom: 0;
+  right: var(--button-tertiary-focus-right);
+  height: inherit;
+  border-radius: inherit;
+  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;
 }
-.dnb-button--tertiary:focus:not([disabled]) .dnb-button__text::after, html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]) .dnb-button__text::after {
+html:not([data-whatintent=touch]) .dnb-button--tertiary.focus-visible:not([disabled]) .dnb-button__text::after {
+  visibility: hidden;
+}
+html:not([data-whatintent=touch]) .dnb-button--tertiary:focus-visible:not([disabled]) .dnb-button__text::after {
   visibility: hidden;
 }
 html:not([data-whatintent=touch]) .dnb-button--tertiary:hover[disabled] {
@@ -110,6 +136,12 @@ html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .
   margin-top: calc(var(--button-height--small) / 2 - 0.5rem);
 }
 .dnb-button--tertiary.dnb-button--icon-position-top {
+  --button-tertiary-focus-left: var(
+    --button-tertiary-focus-overflow--icon-top
+  );
+  --button-tertiary-focus-right: var(
+    --button-tertiary-focus-overflow--icon-top
+  );
   flex-direction: column;
   border-radius: 0.5rem;
   vertical-align: middle;
@@ -126,10 +158,6 @@ html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .
   margin-bottom: 0.25rem;
   font-size: var(--font-size-x-small);
 }
-.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__text::after {
-  left: 0;
-  right: 0;
-}
 .dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--size-large .dnb-button__text {
   font-size: var(--font-size-small);
 }
@@ -137,11 +165,14 @@ html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .
   order: 3;
   height: 0;
 }
+.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left {
+  --button-tertiary-focus-right: -1rem;
+}
 .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__text {
   padding-left: 1rem;
 }
 .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__text::after {
-  left: -0.5rem;
+  left: var(--button-tertiary-underline-overflow--icon);
 }
 .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__icon {
   margin-right: -0.5rem;
@@ -152,16 +183,10 @@ html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .
   margin-left: 1rem;
 }
 .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-medium .dnb-button__text::after, .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-large .dnb-button__text::after {
-  left: -0.5rem;
-  right: 0;
-}
-.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus[disabled], html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus[disabled] {
-  cursor: not-allowed;
-}
-.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus:not([disabled])::before {
-  right: var(--button-tertiary-focus-overflow);
+  left: 0;
 }
 .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right {
+  --button-tertiary-focus-left: -1rem;
   /* stylelint-disable */
   /* stylelint-enable */
 }
@@ -169,7 +194,7 @@ html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .
   padding-right: 1rem;
 }
 .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__text::after {
-  right: -0.5rem;
+  right: var(--button-tertiary-underline-overflow--icon);
 }
 .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__icon {
   margin-left: -0.5rem;
@@ -182,18 +207,9 @@ html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .
 .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-medium .dnb-button__text::after, .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-large .dnb-button__text::after {
   right: 0;
 }
-.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus[disabled], html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus[disabled] {
-  cursor: not-allowed;
-}
-.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus:not([disabled])::before {
-  left: var(--button-tertiary-focus-overflow);
-}
-.dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus[disabled], html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus[disabled] {
-  cursor: not-allowed;
-}
-.dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus:not([disabled])::before {
-  left: 0;
-  right: 0;
+.dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text) {
+  --button-tertiary-focus-left: 0;
+  --button-tertiary-focus-right: 0;
 }
 html[data-whatinput=keyboard] .dnb-button--tertiary:hover:focus .dnb-button__text::after {
   visibility: hidden;

package/components/button/style/dnb-button--tertiary.min.css

@@ -1 +1,5 @@
-.dnb-button--tertiary{--button-tertiary-focus-overflow:-1rem}.dnb-button--tertiary .dnb-button__text{position:relative}.dnb-button--tertiary .dnb-button__text:after{background-color:currentcolor;border-radius:.0475rem;bottom:0;bottom:-.0625rem;color:var(--color-sea-green);color:transparent;content:"";height:.095rem;left:0;position:absolute;right:0;transition:color .25s ease-in-out;width:auto;z-index:1}[data-visual-test-wrapper] .dnb-button--tertiary .dnb-button__text:after{transition:none}.dnb-skeleton .dnb-button--tertiary .dnb-button__text:after{content:none}.dnb-button--tertiary:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary:focus[disabled]{cursor:not-allowed}.dnb-button--tertiary:focus:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]){outline:initial}html[data-whatinput=keyboard] .dnb-button--tertiary:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]){box-shadow:none}.dnb-button--tertiary:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]):before{border-radius:inherit;bottom:0;content:"";height:inherit;left:-.5rem;outline:none;position:absolute;right:-.5rem;top:0;z-index:1}html[data-whatinput=keyboard] .dnb-button--tertiary:focus:not([disabled]):before,html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]):before{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-button--tertiary:focus:not([disabled]) .dnb-button__text:after,html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]) .dnb-button__text:after{visibility:hidden}html:not([data-whatintent=touch]) .dnb-button--tertiary:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--tertiary:hover:not([disabled]) .dnb-button__text:after{visibility:visible}.dnb-button--tertiary:active[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary:active[disabled]{cursor:not-allowed}.dnb-button--tertiary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]){outline:initial}html[data-whatinput=keyboard] .dnb-button--tertiary:active:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]){box-shadow:none}html[data-whatintent=touch] .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after,html[data-whatintent=touch] html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after{opacity:1;transition:none;visibility:visible}html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after,html:not([data-whatintent=touch]) html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after{visibility:hidden}.dnb-button--tertiary.dnb-button--has-text{padding-left:0;padding-right:0}.dnb-button--tertiary.dnb-button--has-text .dnb-button__icon{align-self:flex-start;margin-top:calc(var(--button-height)/2 - .5rem)}.dnb-button--tertiary.dnb-button--has-text .dnb-button__icon.dnb-icon--medium{margin-top:calc(var(--button-height)/2 - .75rem)}.dnb-button--tertiary.dnb-button--has-text .dnb-button__icon.dnb-icon--large{margin-top:calc(var(--button-height)/2 - 1rem)}.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-large .dnb-button__icon{margin-top:calc(var(--button-height--large)/2 - .5rem)}.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-medium .dnb-button__icon{margin-top:calc(var(--button-height--medium)/2 - .5rem)}.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-small .dnb-button__icon{margin-top:calc(var(--button-height--small)/2 - .5rem)}.dnb-button--tertiary.dnb-button--icon-position-top{border-radius:.5rem;flex-direction:column;vertical-align:middle}.dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--has-text{padding:0}.dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--has-text .dnb-button__icon{align-self:center;margin-top:.5rem}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__text{font-size:var(--font-size-x-small);margin-bottom:.25rem;margin-top:0}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__text:after{left:0;right:0}.dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--size-large .dnb-button__text{font-size:var(--font-size-small)}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__alignment{height:0;order:3}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__text{padding-left:1rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__text:after{left:-.5rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__icon{margin-left:0;margin-right:-.5rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-large .dnb-button__text,.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-medium .dnb-button__text{margin-left:1rem;padding-left:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-large .dnb-button__text:after,.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-medium .dnb-button__text:after{left:-.5rem;right:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus[disabled]{cursor:not-allowed}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus:not([disabled]):before{right:var(--button-tertiary-focus-overflow)}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__text{padding-right:1rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__text:after{right:-.5rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__icon{margin-left:-.5rem;margin-right:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-large .dnb-button__text,.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-medium .dnb-button__text{margin-right:1rem;padding-right:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-large .dnb-button__text:after,.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-medium .dnb-button__text:after{right:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus[disabled]{cursor:not-allowed}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus:not([disabled]):before{left:var(--button-tertiary-focus-overflow)}.dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus[disabled]{cursor:not-allowed}.dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus:not([disabled]):before{left:0;right:0}html[data-whatinput=keyboard] .dnb-button--tertiary:hover:focus .dnb-button__text:after{visibility:hidden}
+.dnb-button--tertiary{--button-tertiary-focus-left:-0.5rem;--button-tertiary-focus-right:-0.5rem;--button-tertiary-focus-overflow--icon-top:-0.5rem;--button-tertiary-underline-overflow:0;--button-tertiary-underline-overflow--icon:-0.5rem}.dnb-button--tertiary .dnb-button__text{position:relative}.dnb-button--tertiary .dnb-button__text:after{background-color:currentcolor;border-radius:.0475rem;bottom:0;bottom:-.0625rem;color:var(--color-sea-green);color:transparent;content:"";height:.095rem;left:0;left:var(--button-tertiary-underline-overflow);position:absolute;right:0;right:var(--button-tertiary-underline-overflow);transition:color .25s ease-in-out;width:auto;z-index:1}[data-visual-test-wrapper] .dnb-button--tertiary .dnb-button__text:after{transition:none}.dnb-skeleton .dnb-button--tertiary .dnb-button__text:after{content:none}html:not([data-whatintent=touch]) .dnb-button--tertiary.focus-visible[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--tertiary:focus-visible[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--tertiary.focus-visible:not([disabled]){outline:none}html:not([data-whatintent=touch]) .dnb-button--tertiary:focus-visible:not([disabled]){outline:none}html:not([data-whatintent=touch]) .dnb-button--tertiary.focus-visible:not([disabled]):before{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;border-radius:inherit;bottom:0;box-shadow:0 0 0 var(--border-width) var(--border-color);content:"";height:inherit;left:var(--button-tertiary-focus-left);outline:none;position:absolute;right:var(--button-tertiary-focus-right);top:0;z-index:1}html:not([data-whatintent=touch]) .dnb-button--tertiary:focus-visible:not([disabled]):before{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;border-radius:inherit;bottom:0;box-shadow:0 0 0 var(--border-width) var(--border-color);content:"";height:inherit;left:var(--button-tertiary-focus-left);outline:none;position:absolute;right:var(--button-tertiary-focus-right);top:0;z-index:1}html:not([data-whatintent=touch]) .dnb-button--tertiary.focus-visible:not([disabled]) .dnb-button__text:after{visibility:hidden}html:not([data-whatintent=touch]) .dnb-button--tertiary:focus-visible:not([disabled]) .dnb-button__text:after{visibility:hidden}html:not([data-whatintent=touch]) .dnb-button--tertiary:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--tertiary:hover:not([disabled]) .dnb-button__text:after{visibility:visible}.dnb-button--tertiary:active[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary:active[disabled]{cursor:not-allowed}.dnb-button--tertiary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]){outline:initial}html[data-whatinput=keyboard] .dnb-button--tertiary:active:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]){box-shadow:none}html[data-whatintent=touch] .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after,html[data-whatintent=touch] html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after{opacity:1;transition:none;visibility:visible}html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after,html:not([data-whatintent=touch]) html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after{visibility:hidden}.dnb-button--tertiary.dnb-button--has-text{padding-left:0;padding-right:0}.dnb-button--tertiary.dnb-button--has-text .dnb-button__icon{align-self:flex-start;margin-top:calc(var(--button-height)/2 - .5rem)}.dnb-button--tertiary.dnb-button--has-text .dnb-button__icon.dnb-icon--medium{margin-top:calc(var(--button-height)/2 - .75rem)}.dnb-button--tertiary.dnb-button--has-text .dnb-button__icon.dnb-icon--large{margin-top:calc(var(--button-height)/2 - 1rem)}.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-large .dnb-button__icon{margin-top:calc(var(--button-height--large)/2 - .5rem)}.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-medium .dnb-button__icon{margin-top:calc(var(--button-height--medium)/2 - .5rem)}.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-small .dnb-button__icon{margin-top:calc(var(--button-height--small)/2 - .5rem)}.dnb-button--tertiary.dnb-button--icon-position-top{--button-tertiary-focus-left:var(
+    --button-tertiary-focus-overflow--icon-top
+  );--button-tertiary-focus-right:var(
+    --button-tertiary-focus-overflow--icon-top
+  );border-radius:.5rem;flex-direction:column;vertical-align:middle}.dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--has-text{padding:0}.dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--has-text .dnb-button__icon{align-self:center;margin-top:.5rem}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__text{font-size:var(--font-size-x-small);margin-bottom:.25rem;margin-top:0}.dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--size-large .dnb-button__text{font-size:var(--font-size-small)}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__alignment{height:0;order:3}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left{--button-tertiary-focus-right:-1rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__text{padding-left:1rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__text:after{left:var(--button-tertiary-underline-overflow--icon)}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__icon{margin-left:0;margin-right:-.5rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-large .dnb-button__text,.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-medium .dnb-button__text{margin-left:1rem;padding-left:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-large .dnb-button__text:after,.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-medium .dnb-button__text:after{left:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right{--button-tertiary-focus-left:-1rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__text{padding-right:1rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__text:after{right:var(--button-tertiary-underline-overflow--icon)}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__icon{margin-left:-.5rem;margin-right:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-large .dnb-button__text,.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-medium .dnb-button__text{margin-right:1rem;padding-right:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-large .dnb-button__text:after,.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-medium .dnb-button__text:after{right:0}.dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text){--button-tertiary-focus-left:0;--button-tertiary-focus-right:0}html[data-whatinput=keyboard] .dnb-button--tertiary:hover:focus .dnb-button__text:after{visibility:hidden}

package/components/button/style/dnb-button--tertiary.scss

@@ -3,7 +3,11 @@
 
 .dnb-button {
   &--tertiary {
-    --button-tertiary-focus-overflow: -1rem;
+    --button-tertiary-focus-left: -0.5rem;
+    --button-tertiary-focus-right: -0.5rem;
+    --button-tertiary-focus-overflow--icon-top: -0.5rem;
+    --button-tertiary-underline-overflow: 0;
+    --button-tertiary-underline-overflow--icon: -0.5rem;
     // create underline (::after)
     .dnb-button__text {
       position: relative; // because of the underline
@@ -15,12 +19,18 @@
         [data-visual-test-wrapper] & {
           transition: none;
         }
+        left: var(--button-tertiary-underline-overflow);
+        right: var(--button-tertiary-underline-overflow);
       }
     }
 
-    @include focus() {
-      @include removeFocusRing('keyboard');
-      @include buttonFocusRing();
+    @include focus-visible() {
+      outline: none;
+      @include buttonFocusRing(
+        'always',
+        $left: var(--button-tertiary-focus-left),
+        $right: var(--button-tertiary-focus-right)
+      );
 
       // underline
       .dnb-button__text::after {
@@ -78,6 +88,12 @@
     }
 
     &.dnb-button--icon-position-top {
+      --button-tertiary-focus-left: var(
+        --button-tertiary-focus-overflow--icon-top
+      );
+      --button-tertiary-focus-right: var(
+        --button-tertiary-focus-overflow--icon-top
+      );
       flex-direction: column;
       border-radius: 0.5rem;
       vertical-align: middle;
@@ -92,12 +108,6 @@
       }
 
       .dnb-button__text {
-        // underline
-        &::after {
-          left: 0;
-          right: 0;
-        }
-
         margin-top: 0;
         margin-bottom: 0.25rem;
         font-size: var(--font-size-x-small);
@@ -117,12 +127,13 @@
     &.dnb-button--has-icon {
       &.dnb-button--has-text {
         &.dnb-button--icon-position-left {
+          --button-tertiary-focus-right: -1rem;
           .dnb-button__text {
             padding-left: 1rem;
 
             // underline
             &::after {
-              left: -0.5rem;
+              left: var(--button-tertiary-underline-overflow--icon);
             }
           }
           .dnb-button__icon {
@@ -137,26 +148,20 @@
 
               // underline
               &::after {
-                left: -0.5rem;
-                right: 0;
+                left: 0;
               }
             }
           }
-
-          @include focus() {
-            &::before {
-              right: var(--button-tertiary-focus-overflow);
-            }
-          }
         }
         &.dnb-button--icon-position-right {
+          --button-tertiary-focus-left: -1rem;
           /* stylelint-disable */
           .dnb-button__text {
             padding-right: 1rem;
 
             // underline
             &::after {
-              right: -0.5rem;
+              right: var(--button-tertiary-underline-overflow--icon);
             }
           }
           .dnb-button__icon {
@@ -170,29 +175,18 @@
               padding-right: 0;
               margin-right: 1rem;
 
-              // underline
+              // underlinex
               &::after {
                 right: 0;
               }
             }
           }
-
-          @include focus() {
-            &::before {
-              left: var(--button-tertiary-focus-overflow);
-            }
-          }
         }
       }
 
       &:not(.dnb-button--has-text) {
-        @include focus() {
-          // make the ring round
-          &::before {
-            left: 0;
-            right: 0;
-          }
-        }
+        --button-tertiary-focus-left: 0;
+        --button-tertiary-focus-right: 0;
       }
     }
 

package/components/button/style/themes/button-mixins.scss

@@ -78,7 +78,9 @@
 @mixin buttonFocusRing(
   $whatinput: null,
   $inset: null,
-  $extendShadow: null
+  $extendShadow: null,
+  $left: -0.5rem,
+  $right: -0.5rem
 ) {
   // Create focus-ring
   &::before {
@@ -87,9 +89,9 @@
     z-index: 1; // to be visible in other absolute contexts
 
     top: 0;
-    left: -0.5rem;
+    left: $left;
     bottom: 0;
-    right: -0.5rem;
+    right: $right;
 
     height: inherit;
     border-radius: inherit;