@dnb/eufemia 10.37.0 → 10.39.0

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

@@ -472,20 +472,29 @@ html[data-whatinput=keyboard] .dnb-scroll-view[tabindex="0"]:focus {
 /*
  * Utilities
  */
+.dnb-forms-field-array-selection {
+  --row-gap: var(--spacing-x-small);
+}
 .dnb-forms-field-array-selection--options-layout-vertical .dnb-forms-field-array-selection__options {
   display: flex;
   flex-flow: column;
-  row-gap: var(--spacing-x-small);
+  row-gap: var(--row-gap);
+}
+.dnb-forms-field-array-selection--options-layout-vertical.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-block__label {
+  align-items: flex-start;
 }
-.dnb-forms-field-array-selection--options-layout-vertical.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-array-selection__options {
+.dnb-forms-field-array-selection--variant-checkbox.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-array-selection__options {
   row-gap: 0;
 }
+.dnb-forms-field-array-selection--variant-button.dnb-forms-field-array-selection--options-layout-vertical.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-block__label {
+  line-height: 2.5rem;
+}
 .dnb-forms-field-array-selection--options-layout-horizontal .dnb-forms-field-array-selection__options {
   display: flex;
   flex-flow: row wrap;
   -moz-column-gap: var(--spacing-small);
        column-gap: var(--spacing-small);
-  row-gap: var(--spacing-x-small);
+  row-gap: var(--row-gap);
 }
 @media screen and (min-width: 40em) {
   .dnb-forms-field-array-selection .dnb-forms-field-block--layout-horizontal .dnb-form-label {
@@ -671,6 +680,15 @@ html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-control
 .dnb-forms-field-selection__variant--button .dnb-forms-field-block--layout-horizontal .dnb-form-label {
   line-height: 2.5rem;
 }
+.dnb-forms-field-selection .dnb-forms-field-block__contents {
+  display: flex;
+}
+.dnb-forms-field-selection .dnb-radio-group .dnb-height-animation, .dnb-forms-field-selection .dnb-radio-group > .dnb-flex-container,
+.dnb-forms-field-selection .dnb-toggle-button-group .dnb-height-animation,
+.dnb-forms-field-selection .dnb-toggle-button-group > .dnb-flex-container {
+  width: 100%;
+  flex-grow: 1;
+}
 
 /*
  * Utilities
@@ -2487,8 +2505,24 @@ button.dnb-button::-moz-focus-inner {
   padding: 1rem;
 }
 .dnb-card.dnb-section {
+  --outline-color: var(--card-outline-color);
+  --outline-width: var(--card-outline-width);
+  --background-color: var(--card-background-color);
   background-color: var(--background-color);
 }
+.dnb-card .dnb-section {
+  z-index: 1;
+}
+@media screen and (min-width: 40em) {
+  .dnb-card {
+    --nested-space-l: calc(var(--padding-left, 0px) * -1);
+    --nested-space-r: calc(var(--padding-right, 0px) * -1);
+  }
+  .dnb-card .dnb-section::after {
+    --left: var(--nested-space-l);
+    --width: calc(100% - var(--nested-space-r) * 2);
+  }
+}
 .dnb-card--filled.dnb-card.dnb-section {
   --background-color: var(--outline-color);
 }
@@ -4856,8 +4890,9 @@ button .dnb-form-status__text {
  * Utilities
  */
 .dnb-height-animation {
-  --height-animation: height var(--duration, 400ms) var(--easing-default)
-    var(--delay, 0ms);
+  --height-animation-duration: var(--duration, 400ms);
+  --height-animation: height var(--height-animation-duration)
+    var(--easing-default) var(--delay, 0ms);
   will-change: height;
   transition: var(--height-animation);
 }
@@ -6376,10 +6411,13 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
   transform: translateY(0.25rem); /* 4/16 */
 }
 .dnb-radio-group {
-  --radio-group-margin-bottom: 0.5rem;
-  --radio-group-margin-right: 1rem;
+  --radio-group-row-gap: 0.5rem;
+  --radio-group-column-gap: 1rem;
   display: inline-flex;
 }
+.dnb-radio-group, .dnb-radio-group__fieldset, .dnb-radio-group__shell {
+  flex-grow: 1;
+}
 .dnb-radio-group fieldset {
   margin: 0;
   padding: 0;
@@ -6395,9 +6433,9 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
 .dnb-radio-group [role=radiogroup], .dnb-radio-group__shell {
   display: flex;
   flex-wrap: wrap;
-  -moz-column-gap: var(--radio-group-margin-right);
-       column-gap: var(--radio-group-margin-right);
-  row-gap: var(--radio-group-margin-bottom);
+  -moz-column-gap: var(--radio-group-column-gap);
+       column-gap: var(--radio-group-column-gap);
+  row-gap: var(--radio-group-row-gap);
 }
 .dnb-radio-group__shell > .dnb-form-status {
   margin-top: 0;
@@ -8096,19 +8134,19 @@ html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):focus ~ .dnb-sw
   border-radius: 0 0 var(--table-outline-radius) var(--table-outline-radius);
 }
 .dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr:last-child,
-.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--has-accordion-content.dnb-table__tr--last {
+.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--clickable.dnb-table__tr--last {
   clip-path: none;
 }
 .dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr:last-child .dnb-table__th, .dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr:last-child .dnb-table__th::before, .dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr:last-child .dnb-table__th::after,
 .dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr:last-child .dnb-table__td,
 .dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr:last-child .dnb-table__td::before,
 .dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr:last-child .dnb-table__td::after,
-.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--has-accordion-content.dnb-table__tr--last .dnb-table__th,
-.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--has-accordion-content.dnb-table__tr--last .dnb-table__th::before,
-.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--has-accordion-content.dnb-table__tr--last .dnb-table__th::after,
-.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--has-accordion-content.dnb-table__tr--last .dnb-table__td,
-.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--has-accordion-content.dnb-table__tr--last .dnb-table__td::before,
-.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--has-accordion-content.dnb-table__tr--last .dnb-table__td::after {
+.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--clickable.dnb-table__tr--last .dnb-table__th,
+.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--clickable.dnb-table__tr--last .dnb-table__th::before,
+.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--clickable.dnb-table__tr--last .dnb-table__th::after,
+.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--clickable.dnb-table__tr--last .dnb-table__td,
+.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--clickable.dnb-table__tr--last .dnb-table__td::before,
+.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--clickable.dnb-table__tr--last .dnb-table__td::after {
   border-radius: 0;
 }
 .dnb-table.dnb-skeleton > * {
@@ -8409,31 +8447,31 @@ html[data-whatinput=keyboard] .dnb-table > thead > tr > th.dnb-table--active .dn
   border-top-right-radius: var(--table-outline-radius);
 }
 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child,
-.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last {
+.dnb-table--outline tbody:last-child .dnb-table__tr--clickable:not(.dnb-table__tr--expanded).dnb-table__tr--last {
   clip-path: inset(0 round 0 0 var(--table-outline-radius) var(--table-outline-radius));
 }
 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:first-child, .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:first-child::before, .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:first-child::after,
 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:first-child,
 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:first-child::before,
 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:first-child::after,
-.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__th:first-child,
-.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__th:first-child::before,
-.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__th:first-child::after,
-.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__td:first-child,
-.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__td:first-child::before,
-.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__td:first-child::after {
+.dnb-table--outline tbody:last-child .dnb-table__tr--clickable:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__th:first-child,
+.dnb-table--outline tbody:last-child .dnb-table__tr--clickable:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__th:first-child::before,
+.dnb-table--outline tbody:last-child .dnb-table__tr--clickable:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__th:first-child::after,
+.dnb-table--outline tbody:last-child .dnb-table__tr--clickable:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__td:first-child,
+.dnb-table--outline tbody:last-child .dnb-table__tr--clickable:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__td:first-child::before,
+.dnb-table--outline tbody:last-child .dnb-table__tr--clickable:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__td:first-child::after {
   border-bottom-left-radius: var(--table-outline-radius);
 }
 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:last-child, .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:last-child::before, .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:last-child::after,
 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:last-child,
 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:last-child::before,
 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:last-child::after,
-.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__th:last-child,
-.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__th:last-child::before,
-.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__th:last-child::after,
-.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__td:last-child,
-.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__td:last-child::before,
-.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__td:last-child::after {
+.dnb-table--outline tbody:last-child .dnb-table__tr--clickable:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__th:last-child,
+.dnb-table--outline tbody:last-child .dnb-table__tr--clickable:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__th:last-child::before,
+.dnb-table--outline tbody:last-child .dnb-table__tr--clickable:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__th:last-child::after,
+.dnb-table--outline tbody:last-child .dnb-table__tr--clickable:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__td:last-child,
+.dnb-table--outline tbody:last-child .dnb-table__tr--clickable:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__td:last-child::before,
+.dnb-table--outline tbody:last-child .dnb-table__tr--clickable:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__td:last-child::after {
   border-bottom-right-radius: var(--table-outline-radius);
 }
 .dnb-table__td--no-spacing,
@@ -8598,61 +8636,61 @@ html[data-whatinput=keyboard] .dnb-table > thead > tr > th.dnb-table--active .dn
   --table-accordion-outline-width: var(--focus-ring-width);
   --table-accordion-outline-background--active: var(--color-pistachio);
 }
-.dnb-table__th.dnb-table__th__accordion-icon.dnb-table__th {
+.dnb-table__th.dnb-table__th__button-icon.dnb-table__th {
   padding: 0;
 }
-.dnb-table__th.dnb-table__th__accordion-icon,
-.dnb-table__th.dnb-table__th__accordion-icon div {
+.dnb-table__th.dnb-table__th__button-icon,
+.dnb-table__th.dnb-table__th__button-icon div {
   width: 3.5rem;
   text-indent: -300vw;
 }
-.dnb-table__size--medium .dnb-table__th.dnb-table__th__accordion-icon,
-.dnb-table__size--medium .dnb-table__th.dnb-table__th__accordion-icon div {
+.dnb-table__size--medium .dnb-table__th.dnb-table__th__button-icon,
+.dnb-table__size--medium .dnb-table__th.dnb-table__th__button-icon div {
   width: 3rem;
 }
-.dnb-table__size--small .dnb-table__th.dnb-table__th__accordion-icon,
-.dnb-table__size--small .dnb-table__th.dnb-table__th__accordion-icon div {
+.dnb-table__size--small .dnb-table__th.dnb-table__th__button-icon,
+.dnb-table__size--small .dnb-table__th.dnb-table__th__button-icon div {
   width: 2.5rem;
 }
-.dnb-table__td.dnb-table__td__accordion-icon {
+.dnb-table__td.dnb-table__td__button-icon {
   -webkit-user-select: none;
           user-select: none;
 }
-.dnb-table__td.dnb-table__td__accordion-icon.dnb-table__td {
+.dnb-table__td.dnb-table__td__button-icon.dnb-table__td {
   padding: 0;
 }
-.dnb-table__tr--has-accordion-content .dnb-table__toggle-button {
+.dnb-table__tr--clickable .dnb-table__button {
   display: flex;
   justify-content: center;
 }
-.dnb-table__tr--has-accordion-content .dnb-table__toggle-button .dnb-icon {
+.dnb-table__tr--clickable .dnb-table__button .dnb-icon {
   color: var(--table-accordion-icon-color);
   transition: transform 500ms var(--easing-default);
 }
-.dnb-table__tr--has-accordion-content.dnb-table__tr--no-animation .dnb-table__toggle-button .dnb-icon, html[data-visual-test] .dnb-table__tr--has-accordion-content .dnb-table__toggle-button .dnb-icon {
+.dnb-table__tr--clickable.dnb-table__tr--no-animation .dnb-table__button .dnb-icon, html[data-visual-test] .dnb-table__tr--clickable .dnb-table__button .dnb-icon {
   transition: none !important;
 }
-.dnb-table__tr--has-accordion-content, .dnb-table__tr__accordion-content {
+.dnb-table__tr--clickable, .dnb-table__tr__accordion-content {
   position: relative;
 }
-.dnb-table__tr--has-accordion-content.dnb-table__tr--expanded, .dnb-table__tr__accordion-content {
+.dnb-table__tr--clickable.dnb-table__tr--expanded, .dnb-table__tr__accordion-content {
   z-index: 3;
 }
-.dnb-table__tr--has-accordion-content:active, html[data-whatinput=keyboard] .dnb-table__tr--has-accordion-content:focus, .dnb-table__tr--has-accordion-content:hover:not(.dnb-table__tr--hover.dnb-table__tr--expanded) {
+.dnb-table__tr--clickable:active, html[data-whatinput=keyboard] .dnb-table__tr--clickable:focus, .dnb-table__tr--clickable:hover:not(.dnb-table__tr--hover.dnb-table__tr--expanded) {
   z-index: 5;
 }
-.dnb-table__tr--has-accordion-content.dnb-table__tr--expanded .dnb-table__toggle-button .dnb-icon {
+.dnb-table__tr--clickable.dnb-table__tr--expanded .dnb-table__button .dnb-icon {
   transform: rotate(180deg);
 }
-.dnb-table--border .dnb-table__tr--has-accordion-content.dnb-table__tr--expanded td::after {
+.dnb-table--border .dnb-table__tr--clickable.dnb-table__tr--expanded td::after {
   border-bottom: none;
   border-left: none;
   border-right: none;
 }
-.dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled) {
+.dnb-table__tr--clickable.dnb-table__tr:not(.dnb-table__tr--disabled) {
   outline: none;
 }
-.dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled) td::before {
+.dnb-table__tr--clickable.dnb-table__tr:not(.dnb-table__tr--disabled) td::before {
   content: "";
   position: absolute;
   z-index: 3;
@@ -8660,63 +8698,63 @@ html[data-whatinput=keyboard] .dnb-table > thead > tr > th.dnb-table--active .dn
   pointer-events: none;
   border: var(--table-accordion-outline-width) solid transparent;
 }
-.dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled) td:not(:first-of-type)::before {
+.dnb-table__tr--clickable.dnb-table__tr:not(.dnb-table__tr--disabled) td:not(:first-of-type)::before {
   border-left: none;
 }
-.dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled) td:not(:last-of-type)::before {
+.dnb-table__tr--clickable.dnb-table__tr:not(.dnb-table__tr--disabled) td:not(:last-of-type)::before {
   border-right: none;
 }
-html:not([data-whatintent=touch]) .dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):hover[disabled] {
+html:not([data-whatintent=touch]) .dnb-table__tr--clickable.dnb-table__tr:not(.dnb-table__tr--disabled):hover[disabled] {
   cursor: not-allowed;
 }
-html:not([data-whatintent=touch]) .dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):hover:not([disabled]) td::before {
+html:not([data-whatintent=touch]) .dnb-table__tr--clickable.dnb-table__tr:not(.dnb-table__tr--disabled):hover:not([disabled]) td::before {
   border-color: var(--table-accordion-outline-color);
 }
-html:not([data-whatintent=touch]) .dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):hover:not([disabled]) .dnb-table__td__accordion-icon .dnb-icon {
+html:not([data-whatintent=touch]) .dnb-table__tr--clickable.dnb-table__tr:not(.dnb-table__tr--disabled):hover:not([disabled]) .dnb-table__td__button-icon .dnb-icon {
   color: var(--table-accordion-icon-color--active);
 }
-.dnb-table--border tbody .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):not(.dnb-table__tr--last) .dnb-table__td::before {
+.dnb-table--border tbody .dnb-table__tr--clickable:not(.dnb-table__tr--expanded):not(.dnb-table__tr--last) .dnb-table__td::before {
   bottom: calc(var(--table-border-width) * -1);
 }
-.dnb-table__tr--has-accordion-content.dnb-table__tr--expanded:not(.dnb-table__tr--disabled):hover .dnb-table__td {
+.dnb-table__tr--clickable.dnb-table__tr--expanded:not(.dnb-table__tr--disabled):hover .dnb-table__td {
   background-color: var(--color-white);
 }
-html[data-whatinput=keyboard] .dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):not(:active):not(:hover):focus td::before {
+html[data-whatinput=keyboard] .dnb-table__tr--clickable.dnb-table__tr:not(.dnb-table__tr--disabled):not(:active):not(:hover):focus td::before {
   border-color: var(--focus-ring-color);
   border-width: var(--focus-ring-width);
 }
-.dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):not(:active):not(:hover):focus td:first-of-type::before {
+.dnb-table__tr--clickable.dnb-table__tr:not(.dnb-table__tr--disabled):not(:active):not(:hover):focus td:first-of-type::before {
   left: 0;
 }
-.dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):not(:active):not(:hover):focus td:last-of-type::before {
+.dnb-table__tr--clickable.dnb-table__tr:not(.dnb-table__tr--disabled):not(:active):not(:hover):focus td:last-of-type::before {
   right: 0;
 }
-html:not([data-whatintent=touch]) .dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):active:hover td::before,
-.dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):active td::before {
+html:not([data-whatintent=touch]) .dnb-table__tr--clickable.dnb-table__tr:not(.dnb-table__tr--disabled):active:hover td::before,
+.dnb-table__tr--clickable.dnb-table__tr:not(.dnb-table__tr--disabled):active td::before {
   border-color: var(--table-accordion-outline-color);
   border-width: var(--table-accordion-border-width);
 }
-.dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):active .dnb-table__td {
+.dnb-table__tr--clickable.dnb-table__tr:not(.dnb-table__tr--disabled):active .dnb-table__td {
   background-color: var(--table-accordion-outline-background--active);
 }
-.dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):active .dnb-table__td .dnb-table__td__accordion-icon .dnb-icon {
+.dnb-table__tr--clickable.dnb-table__tr:not(.dnb-table__tr--disabled):active .dnb-table__td .dnb-table__td__button-icon .dnb-icon {
   color: var(--table-accordion-icon-color--active);
 }
-.dnb-table__tr--has-accordion-content.dnb-table__tr--expanded:not(.dnb-table__tr--disabled).dnb-table__tr--hover:not(:active):hover .dnb-table__td {
+.dnb-table__tr--clickable.dnb-table__tr--expanded:not(.dnb-table__tr--disabled).dnb-table__tr--hover:not(:active):hover .dnb-table__td {
   background-color: var(--table-accordion-header-background);
 }
-.dnb-table__tr--has-accordion-content.dnb-table__tr--expanded:not(.dnb-table__tr--disabled).dnb-table__tr--hover:not(:active):hover .dnb-table__td::before {
+.dnb-table__tr--clickable.dnb-table__tr--expanded:not(.dnb-table__tr--disabled).dnb-table__tr--hover:not(:active):hover .dnb-table__td::before {
   border: none;
   border-top: var(--table-accordion-border);
 }
-html:not([data-whatinput=keyboard]) .dnb-table__tr--has-accordion-content.dnb-table__tr.dnb-table__tr--expanded:not(.dnb-table__tr--disabled):not(:active):not(:hover) {
+html:not([data-whatinput=keyboard]) .dnb-table__tr--clickable.dnb-table__tr.dnb-table__tr--expanded:not(.dnb-table__tr--disabled):not(:active):not(:hover) {
   background-color: var(--table-accordion-header-background);
 }
-html:not([data-whatinput=keyboard]) .dnb-table__tr--has-accordion-content.dnb-table__tr.dnb-table__tr--expanded:not(.dnb-table__tr--disabled):not(:active):not(:hover) td::before {
+html:not([data-whatinput=keyboard]) .dnb-table__tr--clickable.dnb-table__tr.dnb-table__tr--expanded:not(.dnb-table__tr--disabled):not(:active):not(:hover) td::before {
   border: none;
   border-top: var(--table-accordion-border);
 }
-.dnb-table__tr--has-accordion-content.dnb-table__tr--disabled .dnb-table__td__accordion-icon .dnb-icon {
+.dnb-table__tr--clickable.dnb-table__tr--disabled .dnb-table__td__button-icon .dnb-icon {
   color: var(--table-accordion-icon-color--disabled);
 }
 @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) {
@@ -8748,7 +8786,7 @@ html[data-visual-test] .dnb-table__tr__accordion-content--parallax .dnb-table__t
 .dnb-table__tr__accordion-content--expanded > td.dnb-table__td {
   background-color: var(--color-white);
 }
-.dnb-table__tr__accordion-content--expanded + .dnb-table__tr--has-accordion-content .dnb-table__td::after {
+.dnb-table__tr__accordion-content--expanded + .dnb-table__tr--clickable .dnb-table__td::after {
   content: "";
   position: absolute;
   top: 0;
@@ -8759,7 +8797,7 @@ html[data-visual-test] .dnb-table__tr__accordion-content--parallax .dnb-table__t
   pointer-events: none;
   border-top: var(--table-accordion-border);
 }
-.dnb-table__tr__accordion-content--expanded + .dnb-table__tr--has-accordion-content .dnb-table__td:last-child::after {
+.dnb-table__tr__accordion-content--expanded + .dnb-table__tr--clickable .dnb-table__td:last-child::after {
   right: 0;
 }
 .dnb-table__tr__accordion-content--single td {
@@ -8804,7 +8842,7 @@ html[data-visual-test] .dnb-table__tr__accordion-content--parallax .dnb-table__t
     */
   vertical-align: top;
 }
-.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--disabled) {
+.dnb-table__tr--clickable:not(.dnb-table__tr--disabled) {
   cursor: pointer;
 }
 .dnb-table__td-wrapper {
@@ -9672,6 +9710,9 @@ html[data-visual-test] .dnb-textarea__textarea {
   --toggle-button-group-row-gap: 1rem;
   display: inline-flex;
 }
+.dnb-toggle-button-group, .dnb-toggle-button-group__fieldset, .dnb-toggle-button-group__shell {
+  flex-grow: 1;
+}
 .dnb-toggle-button-group fieldset {
   margin: 0;
   padding: 0;
@@ -9708,9 +9749,6 @@ html[data-visual-test] .dnb-textarea__textarea {
   order: 2;
   transform: translateY(-0.5rem);
 }
-.dnb-toggle-button-group .dnb-flex-container {
-  margin-bottom: calc(var(--toggle-button-group-margin-bottom) * -1);
-}
 .dnb-toggle-button-group .dnb-flex-container--direction-horizontal .dnb-form-label {
   margin-top: 0.5rem;
   align-self: flex-start;