@bonniernews/dn-design-system-web 9.1.0 → 10.0.0-beta.0

package/components/button-toggle/button-toggle.scss

@@ -4,37 +4,97 @@
 @use "../spinner/spinner.scss" as *;
 
 $ds-btn-toggle-outlined__border-width: ds-metrics-border-width(x1);
-$ds-btn-toggle__min-clickable-area: 48px;
 $ds-btn-toggle__icon-size: 24px;
 $ds-btn-toggle__icon-size-xsmall: 20px;
 
 .ds-btn-toggle {
+  --ds-btn-toggle__background-color: transparent;
+  --ds-btn-toggle__background-color-hover: #{$ds-color-component-primary-overlay};
+  --ds-btn-toggle__background-color-active: #{$ds-color-component-primary-overlay-02};
+  --ds-btn-toggle__border-color: #{$ds-color-border-primary-03};
+  --ds-btn-toggle__outline-color: #{$ds-color-border-focus-02};
+  --ds-btn-toggle__color: #{$ds-color-text-primary};
+
+  &--brand:not(.ds-btn-toggle--selected) {
+    --ds-btn-toggle__background-color: #{$ds-color-component-brand};
+    --ds-btn-toggle__border-color: transparent;
+    --ds-btn-toggle__outline-color: #{$ds-color-border-focus};
+    --ds-btn-toggle__color: #{$ds-color-text-on-brand};
+    &:not(.ds-loading):disabled {
+      opacity: $ds-opacity-component-disabled;
+    }
+  }
+
+  &--secondaryFilled:not(.ds-btn-toggle--selected) {
+    --ds-btn-toggle__border-color: transparent;
+    --ds-btn-toggle__outline-color: #{$ds-color-border-focus-02};
+    --ds-btn-toggle__background-color: #{$ds-color-component-primary-overlay};
+  }
+
+  &--secondaryFilled,
+  &--selected {
+    &:not(.ds-loading):disabled {
+      --ds-btn-toggle__border-color: transparent;
+      --ds-btn-toggle__color: #{$ds-color-text-disabled};
+      &::before {
+        --ds-btn-toggle__background-color: unset;
+      }
+    }
+  }
+
+  &:not(.ds-loading):disabled {
+    cursor: not-allowed;
+  }
+
+  @include ds-typography($ds-typography-detailstandard-button);
   cursor: pointer;
-  background-color: transparent;
-  border: none;
+  color: var(--ds-btn-toggle__color);
+  background-color: var(--ds-btn-toggle__background-color);
   min-width: 0;
   min-height: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 0;
+  border: $ds-btn-toggle-outlined__border-width solid var(--ds-btn-toggle__border-color);
+  border-radius: 100px;
   position: relative;
+  padding: ds-spacing($ds-s-075, rem) - ds-px-to-rem($ds-btn-toggle-outlined__border-width) ds-spacing($ds-s-150, rem) - ds-px-to-rem(
+      $ds-btn-toggle-outlined__border-width
+    );
+
+  &::before {
+    content: "";
+    border-radius: inherit;
+    pointer-events: none;
+    position: absolute;
+    top: -$ds-btn-toggle-outlined__border-width;
+    left: -$ds-btn-toggle-outlined__border-width;
+    bottom: -$ds-btn-toggle-outlined__border-width;
+    right: -$ds-btn-toggle-outlined__border-width;
+  }
+  span,
+  i {
+    position: relative;
+  }
+  .ds-btn-toggle__on {
+    display: none;
+  }
 
   span {
     pointer-events: none;
   }
 
-  &:not(.ds-btn-toggle--condensed) {
-    min-width: $ds-btn-toggle__min-clickable-area;
-    min-height: $ds-btn-toggle__min-clickable-area;
+  &::after {
+    content: "";
+    position: absolute;
+    min-width: $ds-btn__min-clickable-area;
+    min-height: $ds-btn__min-clickable-area;
+    width: 100%;
   }
 
   &:focus-visible {
-    outline: none;
-    .ds-btn-toggle__inner {
-      outline: ds-metrics-border-width(x2) solid;
-      outline-offset: 2px;
-    }
+    outline: ds-metrics-border-width(x2) solid var(--ds-btn-toggle__outline-color);
+    outline-offset: 2px;
   }
 
   @at-root a#{&} {
@@ -43,59 +103,29 @@ $ds-btn-toggle__icon-size-xsmall: 20px;
     text-decoration: none;
   }
 
-  .ds-btn-toggle__inner {
-    @include ds-typography($ds-typography-detailstandard-button);
-    border: $ds-btn-toggle-outlined__border-width solid;
-    border-radius: 100px;
-    padding: ds-spacing($ds-s-075, rem) - ds-px-to-rem($ds-btn-toggle-outlined__border-width) ds-spacing($ds-s-150, rem) - ds-px-to-rem(
-        $ds-btn-toggle-outlined__border-width
-      );
-    position: relative;
-    &::before {
-      content: "";
-      border-radius: inherit;
-      pointer-events: none;
-      position: absolute;
-      top: -$ds-btn-toggle-outlined__border-width;
-      left: -$ds-btn-toggle-outlined__border-width;
-      bottom: -$ds-btn-toggle-outlined__border-width;
-      right: -$ds-btn-toggle-outlined__border-width;
-    }
-    span,
-    i {
-      position: relative;
-    }
-    .ds-btn-toggle__on {
-      display: none;
-    }
-  }
-
   @include ds-hover() {
-    &:hover:not(:disabled):not(.ds-loading) .ds-btn-toggle__inner::before {
-      background-color: $ds-color-component-primary-overlay;
+    &:hover:not(:disabled):not(.ds-loading)::before {
+      background-color: var(--ds-btn-toggle__background-color-hover);
     }
   }
-  &:active:not(:disabled):not(.ds-loading) .ds-btn-toggle__inner::before {
-    background-color: $ds-color-component-primary-overlay-02;
+  &:active:not(:disabled):not(.ds-loading)::before {
+    background-color: var(--ds-btn-toggle__background-color-active);
   }
 
   @include ds-loading();
 }
 
 .ds-btn-toggle--full-width {
-  &,
-  & .ds-btn-toggle__inner {
-    width: 100%;
-    box-sizing: border-box;
-  }
+  width: 100%;
+  box-sizing: border-box;
 }
 
-.ds-btn-toggle--small .ds-btn-toggle__inner {
+.ds-btn-toggle--small {
   padding: ds-px-to-rem(ds-spacing($ds-s-050) - $ds-btn-toggle-outlined__border-width)
     ds-px-to-rem(ds-spacing($ds-s-125) - $ds-btn-toggle-outlined__border-width);
 }
 
-.ds-btn-toggle--xsmall .ds-btn-toggle__inner {
+.ds-btn-toggle--xsmall {
   @include ds-typography($ds-typography-detailstandard-button-small);
   padding: ds-px-to-rem(ds-spacing($ds-s-025) - $ds-btn-toggle-outlined__border-width)
     ds-px-to-rem(ds-spacing($ds-s-075) - $ds-btn-toggle-outlined__border-width);
@@ -103,89 +133,38 @@ $ds-btn-toggle__icon-size-xsmall: 20px;
 
 @include ds-mq-only-breakpoint(mobile) {
   .ds-btn-toggle--mobile-full-width {
-    &,
-    & .ds-btn-toggle__inner {
-      width: 100%;
-    }
+    width: 100%;
   }
 }
 
-.ds-btn-toggle--brand {
-  .ds-btn-toggle__inner {
-    border-color: transparent;
-    background-color: $ds-color-component-brand;
-    color: $ds-color-text-on-brand;
-  }
-  &:focus-visible .ds-btn-toggle__inner {
-    outline-color: $ds-color-border-focus;
-  }
-  &:not(.ds-btn-toggle--selected) {
-    &:not(.ds-loading):disabled {
-      opacity: $ds-opacity-component-disabled;
-      .ds-btn-toggle__inner {
-        cursor: not-allowed;
-      }
-    }
-  }
-}
+.ds-btn-toggle--selected {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding-left: ds-px-to-rem(ds-spacing($ds-s-125) - $ds-btn-toggle-outlined__border-width);
 
-.ds-btn-toggle--secondaryFilled {
-  .ds-btn-toggle__inner {
-    border-color: transparent;
-    background-color: $ds-color-component-primary-overlay;
-    color: $ds-color-text-primary;
+  .ds-btn-toggle__on {
+    display: flex;
   }
-  &:focus-visible .ds-btn-toggle__inner {
-    outline-color: $ds-color-border-focus-02;
-  }
-}
-
-.ds-btn-toggle--secondaryFilled,
-.ds-btn-toggle--selected {
-  &:not(.ds-loading):disabled .ds-btn-toggle__inner {
-    cursor: not-allowed;
-    background-color: $ds-color-component-primary-overlay;
-    border-color: transparent;
-    color: $ds-color-text-disabled;
-    &::before {
-      background-color: unset;
-    }
+  .ds-btn-toggle__off {
+    display: none;
   }
-}
 
-.ds-btn-toggle--selected {
-  .ds-btn-toggle__inner {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    background-color: transparent;
-    border-color: $ds-color-border-primary-03;
-    color: $ds-color-text-primary;
-    padding-left: ds-px-to-rem(ds-spacing($ds-s-125) - $ds-btn-toggle-outlined__border-width);
-
-    .ds-btn-toggle__on {
-      display: flex;
-    }
-    .ds-btn-toggle__off {
-      display: none;
-    }
-
-    .ds-icon {
-      display: flex;
-      height: ds-px-to-rem($ds-btn-toggle__icon-size);
-      width: ds-px-to-rem($ds-btn-toggle__icon-size);
-      margin: ds-spacing(0 $ds-s-050 0 0, rem);
-      svg {
-        fill: currentColor;
-      }
+  .ds-icon {
+    display: flex;
+    height: ds-px-to-rem($ds-btn-toggle__icon-size);
+    width: ds-px-to-rem($ds-btn-toggle__icon-size);
+    margin: ds-spacing(0 $ds-s-050 0 0, rem);
+    svg {
+      fill: currentColor;
     }
   }
 
-  &.ds-btn-toggle--small .ds-btn-toggle__inner {
+  &.ds-btn-toggle--small {
     padding-left: ds-px-to-rem(ds-spacing($ds-s-100) - $ds-btn-toggle-outlined__border-width);
   }
 
-  &.ds-btn-toggle--xsmall .ds-btn-toggle__inner {
+  &.ds-btn-toggle--xsmall {
     padding-left: ds-px-to-rem(ds-spacing($ds-s-050) - $ds-btn-toggle-outlined__border-width);
     .ds-icon {
       height: ds-px-to-rem($ds-btn-toggle__icon-size-xsmall);
@@ -194,10 +173,6 @@ $ds-btn-toggle__icon-size-xsmall: 20px;
     }
   }
 
-  &:focus-visible .ds-btn-toggle__inner {
-    outline-color: $ds-color-border-focus-02;
-  }
-
   // we have to override spinner styling since spinner variant is based on "off" button variant
   &.ds-loading {
     .ds-spinner__inner {
@@ -210,13 +185,12 @@ $ds-btn-toggle__icon-size-xsmall: 20px;
 }
 
 .ds-btn-toggle.ds-force-px {
-  .ds-btn-toggle__inner {
-    /* stylelint-disable-next-line */
-    padding: ds-spacing($ds-s-075) - $ds-btn-toggle-outlined__border-width ds-spacing($ds-s-150) -
-      $ds-btn-toggle-outlined__border-width;
-    @include ds-typography($ds-typography-detailstandard-button, true);
-  }
-  &.ds-btn-toggle--selected .ds-btn-toggle__inner {
+  /* stylelint-disable-next-line */
+  padding: ds-spacing($ds-s-075) - $ds-btn-toggle-outlined__border-width ds-spacing($ds-s-150) -
+    $ds-btn-toggle-outlined__border-width;
+  @include ds-typography($ds-typography-detailstandard-button, true);
+
+  &.ds-btn-toggle--selected {
     padding-left: ds-spacing($ds-s-125)-$ds-btn-toggle-outlined__border-width;
     .ds-icon {
       margin: ds-spacing(0 $ds-s-050 0 0);
@@ -225,24 +199,21 @@ $ds-btn-toggle__icon-size-xsmall: 20px;
     }
   }
   &.ds-btn-toggle--small {
-    .ds-btn-toggle__inner {
-      padding: ds-spacing($ds-s-050)-$ds-btn-toggle-outlined__border-width ds-spacing($ds-s-125)-$ds-btn-toggle-outlined__border-width;
-    }
-    &.ds-btn-toggle--selected .ds-btn-toggle__inner {
+    padding: ds-spacing($ds-s-050)-$ds-btn-toggle-outlined__border-width ds-spacing($ds-s-125)-$ds-btn-toggle-outlined__border-width;
+
+    &.ds-btn-toggle--selected {
       padding-left: ds-spacing($ds-s-100)-$ds-btn-toggle-outlined__border-width;
     }
   }
   &.ds-btn-toggle--xsmall {
-    .ds-btn-toggle__inner {
-      @include ds-typography($ds-typography-detailstandard-button-small, true);
-      padding: ds-spacing($ds-s-025)-$ds-btn-toggle-outlined__border-width ds-spacing($ds-s-075)-$ds-btn-toggle-outlined__border-width;
-      .ds-icon {
-        margin: ds-spacing(0 $ds-s-025 0 0);
-        height: $ds-btn-toggle__icon-size-xsmall;
-        width: $ds-btn-toggle__icon-size-xsmall;
-      }
+    @include ds-typography($ds-typography-detailstandard-button-small, true);
+    padding: ds-spacing($ds-s-025)-$ds-btn-toggle-outlined__border-width ds-spacing($ds-s-075)-$ds-btn-toggle-outlined__border-width;
+    .ds-icon {
+      margin: ds-spacing(0 $ds-s-025 0 0);
+      height: $ds-btn-toggle__icon-size-xsmall;
+      width: $ds-btn-toggle__icon-size-xsmall;
     }
-    &.ds-btn-toggle--selected .ds-btn-toggle__inner {
+    &.ds-btn-toggle--selected {
       padding-left: ds-spacing($ds-s-050)-$ds-btn-toggle-outlined__border-width;
     }
   }

package/components/byline/byline.njk

@@ -31,8 +31,7 @@
             size: "xsmall",
             attributes: params.elementAttributes,
             classNames: elementClassNames | join(" "),
-            forcePx: params.forcePx,
-            condensed: true
+            forcePx: params.forcePx
           })}}
         {% endif %}
       </div>

package/components/factbox/factbox.njk

@@ -35,8 +35,7 @@
           iconName: 'expand_more',
           classNames: 'ds-factbox__expand-more',
           mobile: { fullWidth: true },
-          forcePx: params.forcePx,
-          condensed: true
+          forcePx: params.forcePx
         })}}
         {{ Button({
           text: 'Visa mindre',
@@ -46,8 +45,7 @@
           iconName: 'expand_less',
           classNames: 'ds-factbox__expand-less',
           mobile: { fullWidth: true },
-          forcePx: params.forcePx,
-          condensed: true
+          forcePx: params.forcePx
         })}}
       </div>
     </div>

package/components/factbox/factbox.scss

@@ -110,13 +110,13 @@ $ds-factbox__max-height: 500px; // includes top/bottom spacing
   }
   .ds-factbox__show-more--collapsable {
     background-color: $ds-color-surface-background;
+    display: block;
     button {
       margin: ds-spacing($ds-s-100 0 0);
     }
-    &,
     &:not([data-factbox-expanded]) .ds-factbox__expand-more,
     &[data-factbox-expanded] .ds-factbox__expand-less {
-      display: block;
+      display: flex;
     }
     &:not([data-factbox-expanded]) .ds-factbox__expand-less,
     &[data-factbox-expanded] .ds-factbox__expand-more,

package/components/floating-button/floating-button.njk

@@ -14,7 +14,7 @@
   {% endset %}
 
   {%- if params.iconName and params.iconPosition and params.iconPosition != "none" %}
-    {% set iconSvg = IconUse({ icon: params.iconName }) %}
+    {% set iconSvg = IconUse({ icon: params.iconName, attributes: { "aria-hidden": "true" } }) %}
   {% endif %}
 
   {%- set classes = [
@@ -29,17 +29,13 @@
 
   {%- if params.href %}
     <a href="{{ params.href | default('#', true) }}" {{ ariaLabel | safe }} class="{{ classes }}" {{- attributes | safe}}>
-      <span class="{{ componentClassName + '__inner' }}" aria-hidden="true">
-        <span>{{ text }}</span>
-        {{- iconSvg | safe if iconSvg -}} {{ loadingHtml | safe }}
-      </span>
+      <span aria-hidden="true">{{ text }}</span>
+      {{- iconSvg | safe if iconSvg -}} {{ loadingHtml | safe }}
     </a>
   {% else %}
     <button {{ ariaLabel | safe }} class="{{ classes }}" {{ "disabled" if params.disabled }} {{- attributes | safe}}>
-      <span class="{{ componentClassName + '__inner' }}" aria-hidden="true">
-        <span>{{ text }}</span>
-        {{- iconSvg | safe if iconSvg -}} {{ loadingHtml | safe }}
-      </span>
+      <span aria-hidden="true">{{ text }}</span>
+      {{- iconSvg | safe if iconSvg -}} {{ loadingHtml | safe }}
     </button>
   {% endif %}
 {% endmacro %}

package/components/floating-button/floating-button.scss

@@ -4,76 +4,78 @@
 @use "../spinner/spinner.scss" as *;
 
 .ds-floating-btn {
-  --ds-floating-btn__inner-padding: #{ds-spacing($ds-s-075 $ds-s-125, rem)};
+  --ds-floating-btn__padding: #{ds-spacing($ds-s-075 $ds-s-125, rem)};
   --ds-floating-btn__icon-size: #{ds-px-to-rem(24px)};
 
   &.ds-force-px {
-    --ds-floating-btn__inner-padding: #{ds-spacing($ds-s-075 $ds-s-125)};
+    --ds-floating-btn__padding: #{ds-spacing($ds-s-075 $ds-s-125)};
     --ds-floating-btn__icon-size: 24px;
+    @include ds-typography($ds-typography-detailstandard-button, true);
   }
 
   &.ds-floating-btn--icon-left {
-    --ds-floating-btn__inner-padding: #{ds-spacing($ds-s-075 $ds-s-125 $ds-s-075 $ds-s-100, rem)};
+    --ds-floating-btn__padding: #{ds-spacing($ds-s-075 $ds-s-125 $ds-s-075 $ds-s-100, rem)};
     --ds-floating-btn__icon-margin: #{ds-spacing(0 $ds-s-050 0 0)};
 
     &.ds-force-px {
-      --ds-floating-btn__inner-padding: #{ds-spacing($ds-s-075 $ds-s-125 $ds-s-075 $ds-s-100)};
+      --ds-floating-btn__padding: #{ds-spacing($ds-s-075 $ds-s-125 $ds-s-075 $ds-s-100)};
     }
   }
 
   &.ds-floating-btn--icon-right {
-    --ds-floating-btn__inner-padding: #{ds-spacing($ds-s-075 $ds-s-100 $ds-s-075 $ds-s-125, rem)};
+    --ds-floating-btn__padding: #{ds-spacing($ds-s-075 $ds-s-100 $ds-s-075 $ds-s-125, rem)};
     --ds-floating-btn__icon-margin: #{ds-spacing(0 0 0 $ds-s-050)};
 
     &.ds-force-px {
-      --ds-floating-btn__inner-padding: #{ds-spacing($ds-s-075 $ds-s-100 $ds-s-075 $ds-s-125)};
+      --ds-floating-btn__padding: #{ds-spacing($ds-s-075 $ds-s-100 $ds-s-075 $ds-s-125)};
     }
   }
 
   &.ds-floating-btn--small {
-    --ds-floating-btn__inner-padding: #{ds-spacing($ds-s-050 $ds-s-125, rem)};
+    --ds-floating-btn__padding: #{ds-spacing($ds-s-050 $ds-s-125, rem)};
 
     &.ds-force-px {
-      --ds-floating-btn__inner-padding: #{ds-spacing($ds-s-050 $ds-s-125)};
+      --ds-floating-btn__padding: #{ds-spacing($ds-s-050 $ds-s-125)};
 
       &.ds-floating-btn--icon-left {
-        --ds-floating-btn__inner-padding: #{ds-spacing($ds-s-050 $ds-s-125 $ds-s-050 $ds-s-100)};
+        --ds-floating-btn__padding: #{ds-spacing($ds-s-050 $ds-s-125 $ds-s-050 $ds-s-100)};
       }
 
       &.ds-floating-btn--icon-right {
-        --ds-floating-btn__inner-padding: #{ds-spacing($ds-s-050 $ds-s-100 $ds-s-050 $ds-s-125)};
+        --ds-floating-btn__padding: #{ds-spacing($ds-s-050 $ds-s-100 $ds-s-050 $ds-s-125)};
       }
     }
 
     &.ds-floating-btn--icon-left {
-      --ds-floating-btn__inner-padding: #{ds-spacing($ds-s-050 $ds-s-125 $ds-s-050 $ds-s-100, rem)};
+      --ds-floating-btn__padding: #{ds-spacing($ds-s-050 $ds-s-125 $ds-s-050 $ds-s-100, rem)};
     }
 
     &.ds-floating-btn--icon-right {
-      --ds-floating-btn__inner-padding: #{ds-spacing($ds-s-050 $ds-s-100 $ds-s-050 $ds-s-125, rem)};
+      --ds-floating-btn__padding: #{ds-spacing($ds-s-050 $ds-s-100 $ds-s-050 $ds-s-125, rem)};
     }
   }
 
   cursor: pointer;
-  background-color: transparent;
+  @include ds-typography($ds-typography-detailstandard-button);
+  color: $ds-color-text-secondary;
+  background-color: $ds-color-component-primary;
+  border-radius: 100px;
+  padding: var(--ds-floating-btn__padding);
+  position: relative;
+  box-shadow: ds-shadow-get-box-shadow($ds-shadow-drop-shadow-b);
   border: none;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 0;
 
   span {
     pointer-events: none;
   }
 
   &:focus-visible {
-    outline: none;
-
-    .ds-floating-btn__inner {
-      outline: ds-metrics-border-width(x2) solid;
-      outline-offset: 2px;
-      outline-color: $ds-color-border-focus-02;
-    }
+    outline: ds-metrics-border-width(x2) solid;
+    outline-offset: 2px;
+    outline-color: $ds-color-border-focus-02;
   }
 
   @at-root a#{&} {
@@ -82,34 +84,32 @@
     text-decoration: none;
   }
 
-  .ds-floating-btn__inner {
-    @include ds-typography($ds-typography-detailstandard-button);
-    color: $ds-color-text-secondary;
-    background-color: $ds-color-component-primary;
-    border-radius: 100px;
-    padding: var(--ds-floating-btn__inner-padding);
-    position: relative;
-    box-shadow: ds-shadow-get-box-shadow($ds-shadow-drop-shadow-b);
+  &::before {
+    content: "";
+    border-radius: inherit;
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
 
-    &::before {
-      content: "";
-      border-radius: inherit;
-      pointer-events: none;
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-    }
+  &::after {
+    content: "";
+    position: absolute;
+    min-width: $ds-btn__min-clickable-area;
+    min-height: $ds-btn__min-clickable-area;
+    width: 100%;
   }
 
   @include ds-hover() {
-    &:hover:not(:disabled):not(.ds-loading) .ds-floating-btn__inner::before {
+    &:hover:not(:disabled):not(.ds-loading)::before {
       background-color: $ds-color-component-secondary-overlay;
     }
   }
 
-  &:active:not(:disabled):not(.ds-loading) .ds-floating-btn__inner::before {
+  &:active:not(:disabled):not(.ds-loading)::before {
     background-color: $ds-color-component-secondary-overlay-02;
   }
 
@@ -120,19 +120,16 @@
 
   // we have to override spinner styling since spinner variant is based on "off" button variant
   &.ds-loading {
-    .ds-spinner__inner {
-      border-top-color: $ds-color-icon-secondary;
-
-      &::before {
-        border-color: $ds-color-icon-secondary;
-      }
+    border-top-color: $ds-color-icon-secondary;
+    &::before {
+      border-color: $ds-color-icon-secondary;
     }
   }
 
   @include ds-loading();
 }
 
-.ds-floating-btn--icon .ds-floating-btn__inner {
+.ds-floating-btn--icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -149,10 +146,6 @@
   }
 }
 
-.ds-floating-btn--icon-left .ds-floating-btn__inner {
+.ds-floating-btn--icon-left {
   flex-direction: row-reverse;
 }
-
-.ds-floating-btn.ds-force-px .ds-floating-btn__inner {
-  @include ds-typography($ds-typography-detailstandard-button, true);
-}

package/components/group-header/group-header.scss

@@ -35,23 +35,34 @@
     overflow: hidden;
   }
 
+  &--toggle,
+  &--arrows,
+  &--direkt {
+    align-items: center;
+    padding-right: ds-spacing($ds-s-100);
+  }
+
   .ds-group-header__right-link,
   .ds-group-header__icon,
   .ds-btn-toggle {
     flex-shrink: 0;
-    margin-right: ds-spacing($ds-s-100);
   }
 
   .ds-group-header__arrows {
     display: flex;
     flex-shrink: 0;
-    padding-right: ds-spacing($ds-s-050);
+    align-items: center;
+
+    .ds-icon-btn {
+      margin: ds-spacing(0 $ds-s-050);
+      + .ds-icon-btn {
+        margin: ds-spacing(0 0 0 $ds-s-075);
+      }
+    }
   }
 
-  .ds-btn-toggle,
-  .ds-group-header__arrows {
-    margin-top: 2px; // special case due to design margin extending from the component's visual size, not its clickable area
-    margin-bottom: 2px;
+  .ds-btn-toggle {
+    align-self: center;
   }
 
   .ds-group-header__right-link {
@@ -82,6 +93,7 @@
     align-items: center;
     justify-content: space-between;
     flex: 1;
+    padding-right: ds-spacing($ds-s-100);
 
     @include ds-focus(-2px);