@dnb/eufemia 10.38.0 → 10.40.0

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

@@ -2137,6 +2137,12 @@ label + .dnb-autocomplete[class*=__form-status] .dnb-autocomplete__shell {
 .dnb-badge--vertical-top {
   top: 0;
 }
+.dnb-badge--inline.dnb-badge--vertical-top {
+  transform: translateY(-25%);
+}
+.dnb-badge--inline.dnb-badge--vertical-bottom {
+  transform: translateY(25%);
+}
 
 /*
 * Breadcrumb component
@@ -8134,19 +8140,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 > * {
@@ -8447,31 +8453,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,
@@ -8636,61 +8642,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;
@@ -8698,63 +8704,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)) {
@@ -8786,7 +8792,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;
@@ -8797,7 +8803,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 {
@@ -8842,7 +8848,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 {