@dnb/eufemia 10.0.0-beta.6 → 10.0.0-beta.8

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

@@ -1,56 +1,118 @@
+@use '../../../../style/core/utilities.scss';
 @use '../anchor-mixins.scss';
 
+@mixin anchorHover() {
+  color: var(--sb-color-text);
+  background-color: var(--sb-color-green-dark);
+
+  transition: none;
+  border-radius: 0.5rem;
+}
+
+@mixin anchorActive() {
+  color: var(--sb-color-text);
+  background-color: var(--sb-color-green);
+
+  border-radius: 0.5rem;
+}
+
+@mixin anchorFocus() {
+  &:not(:active) {
+    color: var(--sb-color-blue-dark);
+    background-color: var(--sb-color-blue-light-3);
+
+    border-radius: 0.25rem;
+
+    &.dnb-anchor--icon-left {
+      margin-left: 0;
+      .dnb-icon {
+        margin-left: 0;
+      }
+    }
+
+    &.dnb-anchor--icon-right {
+      margin-right: 0;
+      .dnb-icon {
+        margin-right: 0;
+      }
+    }
+  }
+}
+
 .dnb-anchor {
+  --anchor-underline-thickness: 0.125rem;
+
   // Has to use --sb-font-weight-bold to get correct weighting as --sb-font-weight-medium does nothing at the moment
   font-weight: var(--sb-font-weight-bold);
   color: var(--sb-color-gray-dark-3);
   text-decoration-color: var(--sb-color-green-dark);
+  padding: calc((var(--line-height-basis) - 1.2em) / 2) 0.25em;
 
-  &:hover {
-    color: var(--sb-color-text);
-    background-color: var(--sb-color-green-dark);
+  $anchor-icon-gutter: 0.125em;
 
-    border-radius: 0.5rem;
+  &:hover {
+    @include anchorHover();
   }
 
   &:active {
-    color: var(--sb-color-text);
-    background-color: var(--sb-color-green);
-
-    border-radius: 0.5rem;
+    @include anchorActive();
   }
 
   &:focus {
-    &:not(:active) {
-      color: var(--sb-color-blue-dark);
-      background-color: var(--sb-color-blue-light-3);
+    @include utilities.whatInput('keyboard') {
+      @include anchorFocus();
+    }
+  }
+
+  &.dnb-anchor--icon-left {
+    padding-left: 0;
+    margin-left: 1em + $anchor-icon-gutter;
+
+    .dnb-icon {
+      font-size: 1em;
+      margin-right: $anchor-icon-gutter;
+      margin-left: -1em - $anchor-icon-gutter;
+    }
+  }
 
-      border-radius: 0.25rem;
+  &.dnb-anchor--icon-right {
+    padding-right: 0;
+    margin-right: 1em + $anchor-icon-gutter;
+
+    .dnb-icon {
+      font-size: 1em;
+      margin-left: $anchor-icon-gutter;
+      margin-right: -1em - $anchor-icon-gutter;
+    }
+  }
+
+  &:not(.dnb-anchor--no-underline):not(.dnb-anchor--has-icon):not(.anchor-hash) {
+    &:not(.dnb-anchor--icon-left) {
+      padding-left: 0;
+      &::before {
+        content: '\00a0';
+      }
+    }
+
+    &:not(.dnb-anchor--icon-right):not(.dnb-anchor[target='_blank']) {
+      padding-right: 0;
+      &::after {
+        content: '\00a0';
+      }
     }
   }
 }
 
 .dnb-anchor--hover {
-  color: var(--sb-color-text);
-  background-color: var(--sb-color-green-dark);
-
-  border-radius: 0.5rem;
+  @include anchorHover();
 }
 
 .dnb-anchor--active {
-  color: var(--sb-color-text);
-  background-color: var(--sb-color-green);
-
-  border-radius: 0.5rem;
+  @include anchorActive();
 }
 
 .dnb-anchor--focus {
-  &:not(:active) {
-    color: var(--sb-color-blue-dark);
-    background-color: var(--sb-color-blue-light-3);
-
-    border-radius: 0.25rem;
-  }
+  @include anchorFocus();
 }
 
 // TODO: add correct contrast styling when designs are in place

package/components/anchor/style/themes/dnb-anchor-theme-ui.css

@@ -10,11 +10,11 @@
 }
 .dnb-anchor:hover, .dnb-anchor:active {
   color: var(--color-sea-green);
-  background-color: var(--color-mint-green-50);
+  box-shadow: inset 100vw 100vw 0 0 var(--color-mint-green-50), -0.125em 0 0 0 var(--color-mint-green-50), 0.125em 0 0 0 var(--color-mint-green-50);
 }
 .dnb-anchor:active {
   color: var(--color-mint-green);
-  background-color: var(--color-emerald-green);
+  box-shadow: inset 100vw 100vw 0 0 var(--color-emerald-green), -0.125em 0 0 0 var(--color-emerald-green), 0.125em 0 0 0 var(--color-emerald-green);
 }
 .dnb-anchor:focus:not(:active) {
   color: var(--color-sea-green);
@@ -22,12 +22,12 @@
 
 .dnb-anchor--hover {
   color: var(--color-sea-green);
-  background-color: var(--color-mint-green-50);
+  box-shadow: inset 100vw 100vw 0 0 var(--color-mint-green-50), -0.125em 0 0 0 var(--color-mint-green-50), 0.125em 0 0 0 var(--color-mint-green-50);
 }
 
 .dnb-anchor--active {
   color: var(--color-mint-green);
-  background-color: var(--color-emerald-green);
+  box-shadow: inset 100vw 100vw 0 0 var(--color-emerald-green), -0.125em 0 0 0 var(--color-emerald-green), 0.125em 0 0 0 var(--color-emerald-green);
 }
 
 .dnb-anchor--focus:not(:active) {

package/components/anchor/style/themes/dnb-anchor-theme-ui.min.css

@@ -1 +1 @@
-.dnb-anchor{color:var(--color-sea-green)}.dnb-anchor:active,.dnb-anchor:hover{background-color:var(--color-mint-green-50);color:var(--color-sea-green)}.dnb-anchor:active{background-color:var(--color-emerald-green);color:var(--color-mint-green)}.dnb-anchor--hover,.dnb-anchor:focus:not(:active){color:var(--color-sea-green)}.dnb-anchor--hover{background-color:var(--color-mint-green-50)}.dnb-anchor--active{background-color:var(--color-emerald-green);color:var(--color-mint-green)}.dnb-anchor--focus:not(:active){color:var(--color-sea-green)}.dnb-anchor--contrast{color:var(--color-white)}.dnb-anchor--contrast:active,.dnb-anchor--contrast:hover{text-decoration:none}.dnb-anchor--contrast:active,.dnb-anchor--contrast:hover{background-color:var(--color-white);color:var(--color-emerald-green)}.dnb-anchor--contrast:not(:disabled):focus{background-color:transparent;color:var(--color-white);outline:none}html[data-whatinput=keyboard] .dnb-anchor--contrast:not(:disabled):focus{--border-color:var(--color-white);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}
+.dnb-anchor{color:var(--color-sea-green)}.dnb-anchor:active,.dnb-anchor:hover{box-shadow:inset 100vw 100vw 0 0 var(--color-mint-green-50),-.125em 0 0 0 var(--color-mint-green-50),.125em 0 0 0 var(--color-mint-green-50);color:var(--color-sea-green)}.dnb-anchor:active{box-shadow:inset 100vw 100vw 0 0 var(--color-emerald-green),-.125em 0 0 0 var(--color-emerald-green),.125em 0 0 0 var(--color-emerald-green);color:var(--color-mint-green)}.dnb-anchor--hover,.dnb-anchor:focus:not(:active){color:var(--color-sea-green)}.dnb-anchor--hover{box-shadow:inset 100vw 100vw 0 0 var(--color-mint-green-50),-.125em 0 0 0 var(--color-mint-green-50),.125em 0 0 0 var(--color-mint-green-50)}.dnb-anchor--active{box-shadow:inset 100vw 100vw 0 0 var(--color-emerald-green),-.125em 0 0 0 var(--color-emerald-green),.125em 0 0 0 var(--color-emerald-green);color:var(--color-mint-green)}.dnb-anchor--focus:not(:active){color:var(--color-sea-green)}.dnb-anchor--contrast{color:var(--color-white)}.dnb-anchor--contrast:active,.dnb-anchor--contrast:hover{text-decoration:none}.dnb-anchor--contrast:active,.dnb-anchor--contrast:hover{background-color:var(--color-white);color:var(--color-emerald-green)}.dnb-anchor--contrast:not(:disabled):focus{background-color:transparent;color:var(--color-white);outline:none}html[data-whatinput=keyboard] .dnb-anchor--contrast:not(:disabled):focus{--border-color:var(--color-white);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}

package/components/anchor/style/themes/dnb-anchor-theme-ui.scss

@@ -6,12 +6,12 @@
   &:hover,
   &:active {
     color: var(--color-sea-green);
-    background-color: var(--color-mint-green-50);
+    @include anchor-mixins.anchorBackground(var(--color-mint-green-50));
   }
 
   &:active {
     color: var(--color-mint-green);
-    background-color: var(--color-emerald-green);
+    @include anchor-mixins.anchorBackground(var(--color-emerald-green));
   }
 
   &:focus {
@@ -23,12 +23,12 @@
 
 .dnb-anchor--hover {
   color: var(--color-sea-green);
-  background-color: var(--color-mint-green-50);
+  @include anchor-mixins.anchorBackground(var(--color-mint-green-50));
 }
 
 .dnb-anchor--active {
   color: var(--color-mint-green);
-  background-color: var(--color-emerald-green);
+  @include anchor-mixins.anchorBackground(var(--color-emerald-green));
 }
 
 .dnb-anchor--focus {

package/components/autocomplete/Autocomplete.d.ts

@@ -11,6 +11,7 @@ import type {
   FormStatusState,
   FormStatusText
 } from '../FormStatus';
+import type { GlobalStatusConfigObject } from '../GlobalStatus';
 import type { IconIcon, IconSize } from '../Icon';
 import type { SkeletonShow } from '../Skeleton';
 import type { SpacingProps } from '../space/types';
@@ -170,9 +171,9 @@ export interface AutocompleteProps
   status_no_animation?: boolean;
 
   /**
-   * The `status_id` used for the target <a href="/uilib/components/global-status">GlobalStatus</a>.
+   * The <a href="/uilib/components/global-status/properties/#configuration-object">configuration</a> used for the target <a href="/uilib/components/global-status">GlobalStatus</a>.
    */
-  global_status_id?: string;
+  globalStatus?: GlobalStatusConfigObject;
 
   /**
    * If set to `true`, word highlighting will still be active, but no options will be filtered out. Defaults to `false`.

package/components/autocomplete/Autocomplete.js

@@ -5,7 +5,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 var _IconPrimary, _AlignmentHelper;
 
 const _excluded = ["fillDataIfEmpty"],
-      _excluded2 = ["title", "placeholder", "label", "label_direction", "label_sr_only", "icon", "icon_size", "input_icon", "size", "align_autocomplete", "fixed_position", "status", "status_state", "status_props", "status_no_animation", "global_status_id", "suffix", "scrollable", "focusable", "keep_open", "keep_value", "keep_value_and_selection", "show_clear_button", "prevent_close", "no_animation", "no_scroll_animation", "show_submit_button", "submit_element", "input_element", "options_render", "prevent_selection", "max_height", "default_value", "search_numbers", "search_in_word_index", "show_options_sr", "selected_sr", "submit_button_title", "submit_button_icon", "portal_class", "drawer_class", "input_ref", "className", "class", "disabled", "stretch", "skeleton", "triangle_position", "icon_position", "skip_portal", "mode", "data", "children", "direction", "id", "opened", "value", "input_value", "indicator_label", "no_options", "show_all", "aria_live_options", "disable_highlighting", "ariaLiveDelay"];
+      _excluded2 = ["title", "placeholder", "label", "label_direction", "label_sr_only", "icon", "icon_size", "input_icon", "size", "align_autocomplete", "fixed_position", "status", "status_state", "status_props", "status_no_animation", "globalStatus", "suffix", "scrollable", "focusable", "keep_open", "keep_value", "keep_value_and_selection", "show_clear_button", "prevent_close", "no_animation", "no_scroll_animation", "show_submit_button", "submit_element", "input_element", "options_render", "prevent_selection", "max_height", "default_value", "search_numbers", "search_in_word_index", "show_options_sr", "selected_sr", "submit_button_title", "submit_button_icon", "portal_class", "drawer_class", "input_ref", "className", "class", "disabled", "stretch", "skeleton", "triangle_position", "icon_position", "skip_portal", "mode", "data", "children", "direction", "id", "opened", "value", "input_value", "indicator_label", "no_options", "show_all", "aria_live_options", "disable_highlighting", "ariaLiveDelay"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -81,7 +81,7 @@ _defineProperty(Autocomplete, "defaultProps", {
   status_state: 'error',
   status_props: null,
   status_no_animation: null,
-  global_status_id: null,
+  globalStatus: null,
   suffix: null,
   disable_filter: false,
   disable_reorder: false,
@@ -161,7 +161,10 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes = _objectSpread(_
   status_state: PropTypes.string,
   status_props: PropTypes.object,
   status_no_animation: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  global_status_id: PropTypes.string,
+  globalStatus: PropTypes.shape({
+    id: PropTypes.string,
+    message: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
+  }),
   suffix: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.node]),
   disable_filter: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   disable_reorder: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
@@ -1430,7 +1433,7 @@ class AutocompleteInstance extends React.PureComponent {
       status_state,
       status_props,
       status_no_animation,
-      global_status_id,
+      globalStatus,
       suffix,
       scrollable,
       focusable,
@@ -1600,7 +1603,7 @@ class AutocompleteInstance extends React.PureComponent {
     }, _AlignmentHelper || (_AlignmentHelper = React.createElement(AlignmentHelper, null)), React.createElement(FormStatus, _extends({
       show: showStatus,
       id: id + '-form-status',
-      global_status_id: global_status_id,
+      globalStatus: globalStatus,
       label: label,
       text_id: id + '-status',
       text: status,

package/components/button/Button.d.ts

@@ -7,6 +7,7 @@ import type {
   FormStatusState,
   FormStatusText
 } from '../FormStatus';
+import type { GlobalStatusConfigObject } from '../GlobalStatus';
 export type ButtonText = string | React.ReactNode;
 export type ButtonVariant =
   | 'primary'
@@ -15,6 +16,7 @@ export type ButtonVariant =
   | 'signal'
   | 'unstyled';
 export type ButtonSize = 'default' | 'small' | 'medium' | 'large';
+export type ButtonIcon = IconIcon;
 export type ButtonIconPositionTertiary = 'top';
 export type ButtonIconPosition = 'left' | 'right';
 export type ButtonIconPositionAll =
@@ -65,7 +67,7 @@ export type ButtonProps = {
   /**
    * To be included in the button. <a href="/icons/primary">Primary Icons</a> can be set as a string (e.g. `icon="chevron_right"`), other icons should be set as React elements.
    */
-  icon?: IconIcon;
+  icon?: ButtonIcon;
 
   /**
    * Position of icon inside the button. Set to `left` or `right`. Tertiary button variant also supports `top`. Defaults to `right` if not set.
@@ -99,9 +101,9 @@ export type ButtonProps = {
   status_no_animation?: boolean;
 
   /**
-   * The `status_id` used for the target <a href="/uilib/components/global-status">GlobalStatus</a>.
+   * The <a href="/uilib/components/global-status/properties/#configuration-object">configuration</a> used for the target <a href="/uilib/components/global-status">GlobalStatus</a>.
    */
-  global_status_id?: string;
+  globalStatus?: GlobalStatusConfigObject;
   id?: string;
 
   /**

package/components/button/Button.js

@@ -4,7 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 
 var _span, _span2, _span3;
 
-const _excluded = ["class", "className", "variant", "size", "title", "custom_content", "tooltip", "status", "status_state", "status_props", "status_no_animation", "global_status_id", "id", "disabled", "text", "icon", "icon_position", "icon_size", "wrap", "bounding", "stretch", "skeleton", "element", "inner_ref", "innerRef"];
+const _excluded = ["class", "className", "variant", "size", "title", "custom_content", "tooltip", "status", "status_state", "status_props", "status_no_animation", "globalStatus", "id", "disabled", "text", "icon", "icon_position", "icon_size", "wrap", "bounding", "stretch", "skeleton", "element", "inner_ref", "innerRef"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -82,7 +82,7 @@ export default class Button extends React.PureComponent {
       status_state,
       status_props,
       status_no_animation,
-      global_status_id,
+      globalStatus,
       id,
       disabled,
       text: _text,
@@ -183,7 +183,7 @@ export default class Button extends React.PureComponent {
     }))), this.state.afterContent, React.createElement(FormStatus, _extends({
       show: showStatus,
       id: this._id + '-form-status',
-      global_status_id: global_status_id,
+      globalStatus: globalStatus,
       label: text,
       text: status,
       state: status_state,
@@ -215,7 +215,10 @@ process.env.NODE_ENV !== "production" ? Button.propTypes = _objectSpread(_object
   status_state: PropTypes.string,
   status_props: PropTypes.object,
   status_no_animation: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  global_status_id: PropTypes.string,
+  globalStatus: PropTypes.shape({
+    id: PropTypes.string,
+    message: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
+  }),
   id: PropTypes.string,
   class: PropTypes.string,
   href: PropTypes.string,
@@ -262,7 +265,7 @@ Button.defaultProps = {
   status_state: 'error',
   status_props: null,
   status_no_animation: null,
-  global_status_id: null,
+  globalStatus: null,
   inner_ref: null,
   className: null,
   innerRef: null,

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

@@ -5,6 +5,9 @@
 * Button mixins
 *
 */
+.dnb-button--tertiary {
+  --button-tertiary-focus-overflow: -1rem;
+}
 .dnb-button--tertiary .dnb-button__text {
   position: relative;
 }
@@ -83,17 +86,23 @@ html[data-whatintent=touch] .dnb-button--tertiary:active:not([disabled]) .dnb-bu
 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__icon {
+.dnb-button--tertiary.dnb-button--has-text .dnb-button__icon {
   align-self: flex-start;
   margin-top: calc(var(--button-height) / 2 - 0.5rem);
 }
-.dnb-button--tertiary.dnb-button--size-large .dnb-button__icon {
+.dnb-button--tertiary.dnb-button--has-text .dnb-button__icon.dnb-icon--medium {
+  margin-top: calc(var(--button-height) / 2 - 0.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 - 0.5rem);
 }
-.dnb-button--tertiary.dnb-button--size-medium .dnb-button__icon {
+.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-medium .dnb-button__icon {
   margin-top: calc(var(--button-height--medium) / 2 - 0.5rem);
 }
-.dnb-button--tertiary.dnb-button--size-small .dnb-button__icon {
+.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-small .dnb-button__icon {
   margin-top: calc(var(--button-height--small) / 2 - 0.5rem);
 }
 .dnb-button--tertiary.dnb-button--icon-position-top {
@@ -104,7 +113,7 @@ html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .
 .dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--has-text {
   padding: 0;
 }
-.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__icon {
+.dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--has-text .dnb-button__icon {
   margin-top: 0.5rem;
   align-self: center;
 }
@@ -146,7 +155,7 @@ html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([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: -1rem;
+  right: var(--button-tertiary-focus-overflow);
 }
 .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right {
   /* stylelint-disable */
@@ -173,7 +182,7 @@ html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([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: -1rem;
+  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;

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

@@ -1 +1 @@
-.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__icon{align-self:flex-start;margin-top:calc(var(--button-height)/2 - .5rem)}.dnb-button--tertiary.dnb-button--size-large .dnb-button__icon{margin-top:calc(var(--button-height--large)/2 - .5rem)}.dnb-button--tertiary.dnb-button--size-medium .dnb-button__icon{margin-top:calc(var(--button-height--medium)/2 - .5rem)}.dnb-button--tertiary.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__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:-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:-.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:-1rem}.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-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 .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}

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

@@ -3,6 +3,7 @@
 
 .dnb-button {
   &--tertiary {
+    --button-tertiary-focus-overflow: -1rem;
     // create underline (::after)
     .dnb-button__text {
       position: relative; // because of the underline
@@ -50,18 +51,27 @@
       }
     }
 
-    .dnb-button__icon {
-      align-self: flex-start; // needed to vertically center icon
-      margin-top: calc(var(--button-height) / 2 - 0.5rem);
-    }
-    &.dnb-button--size-large .dnb-button__icon {
-      margin-top: calc(var(--button-height--large) / 2 - 0.5rem);
-    }
-    &.dnb-button--size-medium .dnb-button__icon {
-      margin-top: calc(var(--button-height--medium) / 2 - 0.5rem);
-    }
-    &.dnb-button--size-small .dnb-button__icon {
-      margin-top: calc(var(--button-height--small) / 2 - 0.5rem);
+    &.dnb-button--has-text {
+      .dnb-button__icon {
+        align-self: flex-start; // needed to vertically center icon
+
+        margin-top: calc(var(--button-height) / 2 - 0.5rem);
+        &.dnb-icon--medium {
+          margin-top: calc(var(--button-height) / 2 - 0.75rem);
+        }
+        &.dnb-icon--large {
+          margin-top: calc(var(--button-height) / 2 - 1rem);
+        }
+      }
+      &.dnb-button--size-large .dnb-button__icon {
+        margin-top: calc(var(--button-height--large) / 2 - 0.5rem);
+      }
+      &.dnb-button--size-medium .dnb-button__icon {
+        margin-top: calc(var(--button-height--medium) / 2 - 0.5rem);
+      }
+      &.dnb-button--size-small .dnb-button__icon {
+        margin-top: calc(var(--button-height--small) / 2 - 0.5rem);
+      }
     }
 
     &.dnb-button--icon-position-top {
@@ -71,11 +81,11 @@
 
       &.dnb-button--has-text {
         padding: 0;
-      }
 
-      .dnb-button__icon {
-        margin-top: 0.5rem;
-        align-self: center;
+        .dnb-button__icon {
+          margin-top: 0.5rem;
+          align-self: center;
+        }
       }
 
       .dnb-button__text {
@@ -132,7 +142,7 @@
 
           @include focus() {
             &::before {
-              right: -1rem;
+              right: var(--button-tertiary-focus-overflow);
             }
           }
         }
@@ -166,7 +176,7 @@
 
           @include focus() {
             &::before {
-              left: -1rem;
+              left: var(--button-tertiary-focus-overflow);
             }
           }
         }

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

@@ -170,9 +170,7 @@
 .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__icon, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__icon {
   order: 1;
 }
-.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left > *,
-.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top > *,
-.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text {
+.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text {
   order: 2;
 }
 .dnb-button--stretch {

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

@@ -1 +1 @@
-:root{--button-icon-size:1rem;--button-height:2.5rem;--button-border-radius:calc(var(--button-height)/2)}.dnb-button{--button-font-size:var(--font-size-basis);--button-font-size-small:var(--font-size-small);--button-width:2.5rem;--button-width--small:1.5rem;--button-height--small:1.5rem;--button-width--medium:2rem;--button-height--medium:2rem;--button-width--large:3rem;--button-height--large:3rem;--button-border-width:0.0625rem;--button-border-width--hover:0.1875rem;--button-border-radius--small:calc(var(--button-height--small)/2);--button-border-radius--medium:calc(var(--button-height--medium)/2);--button-border-radius--large:calc(var(--button-height--large)/2);align-items:center;border:none;border-radius:var(--button-border-radius);box-shadow:none;cursor:pointer;display:inline-flex;font-size:var(--font-size-small);height:auto;justify-content:center;padding:0;position:relative;text-align:left;text-decoration:none;user-select:none;-webkit-user-select:none;white-space:nowrap;width:var(--button-width)}.dnb-button--wrap{overflow-wrap:break-word;white-space:normal}.dnb-button,.dnb-core-style .dnb-button{line-height:var(--button-height)}.dnb-button__text{color:inherit;font-size:var(--button-font-size);line-height:var(--line-height-basis);margin:.5rem 0;transform:translateY(-.03125rem)}.dnb-button__text [data-os=linux]{transform:translateY(-.035rem)}.dnb-button__alignment{display:inline-block;width:0}.dnb-button__bounding{background-color:transparent;border-radius:var(--button-border-radius);bottom:0;left:0;position:absolute;right:0;top:0;transform:scale(1.1,1.4)}.dnb-button--has-text{padding-left:1.5rem;padding-right:1.5rem}.dnb-button--size-small{border-radius:var(--button-border-radius--small);font-size:var(--button-font-size-small);width:var(--button-width--small)}.dnb-button--size-small,.dnb-core-style .dnb-button--size-small{line-height:var(--button-height--small)}.dnb-button--size-small .dnb-button__text{margin:0}.dnb-button--has-text.dnb-button--size-small{padding-left:1rem;padding-right:1rem}.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-small{padding-left:.5rem}.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small{padding-right:.5rem}.dnb-button--size-medium{border-radius:var(--button-border-radius--medium);width:var(--button-width--medium)}.dnb-button--size-medium,.dnb-core-style .dnb-button--size-medium{line-height:var(--button-height--medium)}.dnb-button--size-medium .dnb-button__text{margin:0}.dnb-button--has-text.dnb-button--size-medium{padding-left:1rem;padding-right:1rem}.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium{padding-left:.5rem}.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium{padding-right:.5rem}.dnb-button--size-large{border-radius:var(--button-border-radius--large);width:var(--button-width--large)}.dnb-button--size-large,.dnb-core-style .dnb-button--size-large{line-height:var(--button-height--large)}.dnb-button--has-text.dnb-button--size-large{padding-left:2rem;padding-right:2rem}.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-large{padding-left:1rem}.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large{padding-right:1rem}.dnb-button--has-text{width:auto}.dnb-button--has-text .dnb-button__icon{margin:0 calc(var(--button-icon-size)/2)}.dnb-button--has-text.dnb-button--icon-position-left{padding-left:.5rem}.dnb-button--has-text.dnb-button--icon-position-right{padding-right:.5rem}.dnb-button--has-text.dnb-button--has-icon .dnb-button__icon{order:2}.dnb-button--has-text.dnb-button--has-icon .dnb-button__text{order:1}.dnb-button:not(.dnb-button--has-text) .dnb-button__icon{width:inherit}.dnb-button__icon.dnb-icon svg:not([width]):not([height]){height:var(--button-icon-size);width:var(--button-icon-size)}[href]>.dnb-button__icon.dnb-icon{line-height:var(--button-font-size)}.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__icon,.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__icon{order:1}.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text,.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left>*,.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text,.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top>*{order:2}.dnb-button--stretch{width:100%}.dnb-button--reset{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;border-radius:0;box-shadow:none;color:inherit;font:inherit;height:auto;line-height:inherit;margin:0;overflow:visible;padding:0;text-align:inherit;width:auto}html:not([data-whatintent=touch]) .dnb-button--reset:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--reset:hover:not([disabled]){border:none;box-shadow:none}.dnb-button--reset:not([disabled]):active,.dnb-button--reset:not([disabled]):focus{outline:none}html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):active,html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):focus{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):active,html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):focus{border:none;box-shadow:none;color:inherit}.dnb-button[type=button],.dnb-button[type=reset],.dnb-button[type=submit]{appearance:none;-moz-appearance:none;-webkit-appearance:none}.dnb-button[disabled]{cursor:not-allowed;outline:none}.dnb-form-row--vertical .dnb-form-row__content>.dnb-button{align-self:flex-start}.dnb-form-row--horizontal .dnb-form-row__content .dnb-button__text{white-space:nowrap}.dnb-button+.dnb-form-status{margin-top:.5rem}button.dnb-button::-moz-focus-inner{border:none}
+:root{--button-icon-size:1rem;--button-height:2.5rem;--button-border-radius:calc(var(--button-height)/2)}.dnb-button{--button-font-size:var(--font-size-basis);--button-font-size-small:var(--font-size-small);--button-width:2.5rem;--button-width--small:1.5rem;--button-height--small:1.5rem;--button-width--medium:2rem;--button-height--medium:2rem;--button-width--large:3rem;--button-height--large:3rem;--button-border-width:0.0625rem;--button-border-width--hover:0.1875rem;--button-border-radius--small:calc(var(--button-height--small)/2);--button-border-radius--medium:calc(var(--button-height--medium)/2);--button-border-radius--large:calc(var(--button-height--large)/2);align-items:center;border:none;border-radius:var(--button-border-radius);box-shadow:none;cursor:pointer;display:inline-flex;font-size:var(--font-size-small);height:auto;justify-content:center;padding:0;position:relative;text-align:left;text-decoration:none;user-select:none;-webkit-user-select:none;white-space:nowrap;width:var(--button-width)}.dnb-button--wrap{overflow-wrap:break-word;white-space:normal}.dnb-button,.dnb-core-style .dnb-button{line-height:var(--button-height)}.dnb-button__text{color:inherit;font-size:var(--button-font-size);line-height:var(--line-height-basis);margin:.5rem 0;transform:translateY(-.03125rem)}.dnb-button__text [data-os=linux]{transform:translateY(-.035rem)}.dnb-button__alignment{display:inline-block;width:0}.dnb-button__bounding{background-color:transparent;border-radius:var(--button-border-radius);bottom:0;left:0;position:absolute;right:0;top:0;transform:scale(1.1,1.4)}.dnb-button--has-text{padding-left:1.5rem;padding-right:1.5rem}.dnb-button--size-small{border-radius:var(--button-border-radius--small);font-size:var(--button-font-size-small);width:var(--button-width--small)}.dnb-button--size-small,.dnb-core-style .dnb-button--size-small{line-height:var(--button-height--small)}.dnb-button--size-small .dnb-button__text{margin:0}.dnb-button--has-text.dnb-button--size-small{padding-left:1rem;padding-right:1rem}.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-small{padding-left:.5rem}.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small{padding-right:.5rem}.dnb-button--size-medium{border-radius:var(--button-border-radius--medium);width:var(--button-width--medium)}.dnb-button--size-medium,.dnb-core-style .dnb-button--size-medium{line-height:var(--button-height--medium)}.dnb-button--size-medium .dnb-button__text{margin:0}.dnb-button--has-text.dnb-button--size-medium{padding-left:1rem;padding-right:1rem}.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium{padding-left:.5rem}.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium{padding-right:.5rem}.dnb-button--size-large{border-radius:var(--button-border-radius--large);width:var(--button-width--large)}.dnb-button--size-large,.dnb-core-style .dnb-button--size-large{line-height:var(--button-height--large)}.dnb-button--has-text.dnb-button--size-large{padding-left:2rem;padding-right:2rem}.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-large{padding-left:1rem}.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large{padding-right:1rem}.dnb-button--has-text{width:auto}.dnb-button--has-text .dnb-button__icon{margin:0 calc(var(--button-icon-size)/2)}.dnb-button--has-text.dnb-button--icon-position-left{padding-left:.5rem}.dnb-button--has-text.dnb-button--icon-position-right{padding-right:.5rem}.dnb-button--has-text.dnb-button--has-icon .dnb-button__icon{order:2}.dnb-button--has-text.dnb-button--has-icon .dnb-button__text{order:1}.dnb-button:not(.dnb-button--has-text) .dnb-button__icon{width:inherit}.dnb-button__icon.dnb-icon svg:not([width]):not([height]){height:var(--button-icon-size);width:var(--button-icon-size)}[href]>.dnb-button__icon.dnb-icon{line-height:var(--button-font-size)}.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__icon,.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__icon{order:1}.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text,.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text{order:2}.dnb-button--stretch{width:100%}.dnb-button--reset{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;border-radius:0;box-shadow:none;color:inherit;font:inherit;height:auto;line-height:inherit;margin:0;overflow:visible;padding:0;text-align:inherit;width:auto}html:not([data-whatintent=touch]) .dnb-button--reset:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--reset:hover:not([disabled]){border:none;box-shadow:none}.dnb-button--reset:not([disabled]):active,.dnb-button--reset:not([disabled]):focus{outline:none}html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):active,html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):focus{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):active,html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):focus{border:none;box-shadow:none;color:inherit}.dnb-button[type=button],.dnb-button[type=reset],.dnb-button[type=submit]{appearance:none;-moz-appearance:none;-webkit-appearance:none}.dnb-button[disabled]{cursor:not-allowed;outline:none}.dnb-form-row--vertical .dnb-form-row__content>.dnb-button{align-self:flex-start}.dnb-form-row--horizontal .dnb-form-row__content .dnb-button__text{white-space:nowrap}.dnb-button+.dnb-form-status{margin-top:.5rem}button.dnb-button::-moz-focus-inner{border:none}

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

@@ -221,7 +221,6 @@
     .dnb-button__icon {
       order: 1;
     }
-    & > *,
     .dnb-button__text {
       order: 2;
     }

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

@@ -65,7 +65,7 @@
 }
 
 // Used in tertiary button variant
-@mixin buttonFocusRing($whatinput: null) {
+@mixin buttonFocusRing($whatinput: null, $overflow: -0.5rem, $inset: null) {
   // Create focus-ring
   &::before {
     content: '';
@@ -73,14 +73,14 @@
     z-index: 1; // to be visible in other absolute contexts
 
     top: 0;
-    left: -0.5rem;
+    left: $overflow;
     bottom: 0;
-    right: -0.5rem;
+    right: $overflow;
 
     height: inherit;
     border-radius: inherit;
 
-    @include focusRing($whatinput);
+    @include focusRing($whatinput, null, $inset);
   }
 }