@dnb/eufemia 10.6.0 → 10.8.0

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

@@ -5,6 +5,10 @@
 /*
  * Utilities
  */
+/*
+* Button mixins
+*
+*/
 /*
  * Utilities
  */
@@ -50,19 +54,64 @@ html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortab
   color: var(--sb-color-violet);
 }
 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before {
-  top: -0.1875rem;
-  bottom: -0.0625rem;
+  content: "";
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: -0.5rem;
+  bottom: 0;
+  right: -0.5rem;
+  height: inherit;
+  border-radius: inherit;
+  outline: none;
+}
+html[data-whatinput=mouse] .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput=mouse] html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput=mouse] .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput=mouse] html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before {
+  --border-color: var(--focus-ring-color);
+  --border-width: var(--focus-ring-width);
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before {
+  content: "";
+  position: absolute;
+  z-index: 1;
+  top: 0;
   left: -0.5rem;
-  right: -0.25rem;
+  bottom: 0;
+  right: -0.5rem;
+  height: inherit;
+  border-radius: inherit;
+  outline: none;
+}
+html[data-whatinput=touch] .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput=touch] html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput=touch] .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput=touch] html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before {
+  --border-color: var(--focus-ring-color);
+  --border-width: var(--focus-ring-width);
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before {
+  top: -0.375rem;
+  bottom: -0.25rem;
+  left: -0.6875rem;
+  right: -0.4375rem;
 }
 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled], html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled], .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled], html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled] {
   cursor: not-allowed;
 }
 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before, .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before {
-  top: -0.1875rem;
-  bottom: -0.0625rem;
-  left: -0.5rem;
-  right: -0.25rem;
+  top: -0.375rem;
+  bottom: -0.25rem;
+  left: -0.6875rem;
+  right: -0.4375rem;
+}
+.dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]).focus-visible, html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]).focus-visible, .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]).focus-visible, html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]).focus-visible {
+  color: var(--sb-color-blue-dark);
+}
+.dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):focus-visible, html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):focus-visible, .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):focus-visible, html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):focus-visible {
+  color: var(--sb-color-blue-dark);
+}
+.dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text::after, html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text::after, .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text::after, html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text::after {
+  visibility: hidden;
 }
 html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover[disabled], html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:hover[disabled] {
   cursor: not-allowed;

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

@@ -1 +1 @@
-.dnb-table{text-align:left}.dnb-table thead{border-bottom:var(--border)}.dnb-table thead th,.dnb-table__th{background-color:var(--sb-color-white);padding:.5rem 1.5rem .25rem}.dnb-table .dnb-table__tr--even{background-color:var(--sb-color-gray-light-3)}.dnb-table tbody .dnb-table__th,.dnb-table tbody td,.dnb-table tbody th,.dnb-table__td{padding:1rem 1.5rem}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button{color:var(--sb-color-violet)}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text:after,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text:after{bottom:-.0625rem;color:var(--sb-color-violet);left:0;opacity:0}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:not(:focus) .dnb-button__text:after,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:not(:focus) .dnb-button__text:after{color:var(--sb-color-violet)}html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover[disabled],html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]){color:var(--sb-color-violet)}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled],.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled],html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled],html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled]{cursor:not-allowed}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]),.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]){color:var(--sb-color-violet)}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before{bottom:-.0625rem;left:-.5rem;right:-.25rem;top:-.1875rem}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled],.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled],html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled],html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled]{cursor:not-allowed}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):before,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):before{bottom:-.0625rem;left:-.5rem;right:-.25rem;top:-.1875rem}html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:hover[disabled],html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--active .dnb-table__sort-button.dnb-button:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:not([disabled]) .dnb-button__text:after,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:not([disabled]) .dnb-button__text:after{color:var(--sb-color-violet)}.dnb-table,.dnb-table__container{--border-width:0.0625rem;--outline-width:0.0625rem;--border:var(--border-width) solid var(--sb-color-gray-light-2);--outline:var(--outline-width) solid var(--sb-color-gray-light-2);background-color:var(--sb-color-white)}
+.dnb-table{text-align:left}.dnb-table thead{border-bottom:var(--border)}.dnb-table thead th,.dnb-table__th{background-color:var(--sb-color-white);padding:.5rem 1.5rem .25rem}.dnb-table .dnb-table__tr--even{background-color:var(--sb-color-gray-light-3)}.dnb-table tbody .dnb-table__th,.dnb-table tbody td,.dnb-table tbody th,.dnb-table__td{padding:1rem 1.5rem}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button{color:var(--sb-color-violet)}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text:after,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text:after{bottom:-.0625rem;color:var(--sb-color-violet);left:0;opacity:0}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:not(:focus) .dnb-button__text:after,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:not(:focus) .dnb-button__text:after{color:var(--sb-color-violet)}html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover[disabled],html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]){color:var(--sb-color-violet)}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled],.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled],html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled],html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled]{cursor:not-allowed}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]),.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]){color:var(--sb-color-violet)}html[data-whatinput=mouse] .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html[data-whatinput=mouse] .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html[data-whatinput=mouse] html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html[data-whatinput=mouse] html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active: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=touch] .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html[data-whatinput=touch] .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html[data-whatinput=touch] html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html[data-whatinput=touch] html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before{bottom:-.25rem;left:-.6875rem;right:-.4375rem;top:-.375rem}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled],.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled],html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled],html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled]{cursor:not-allowed}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):before,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):before{bottom:-.25rem;left:-.6875rem;right:-.4375rem;top:-.375rem}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]).focus-visible,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]).focus-visible,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]).focus-visible,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]).focus-visible{color:var(--sb-color-blue-dark)}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):focus-visible,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):focus-visible,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):focus-visible,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):focus-visible{color:var(--sb-color-blue-dark)}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text:after,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text:after,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text:after,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text:after{visibility:hidden}html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:hover[disabled],html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--active .dnb-table__sort-button.dnb-button:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:not([disabled]) .dnb-button__text:after,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:not([disabled]) .dnb-button__text:after{color:var(--sb-color-violet)}.dnb-table,.dnb-table__container{--border-width:0.0625rem;--outline-width:0.0625rem;--border:var(--border-width) solid var(--sb-color-gray-light-2);--outline:var(--outline-width) solid var(--sb-color-gray-light-2);background-color:var(--sb-color-white)}

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

@@ -4,14 +4,15 @@
 */
 
 @import '../../../../style/core/utilities.scss';
+@import '../../../button/style/themes/button-mixins.scss';
 @import '../table-mixins.scss';
 
 @mixin tableFocusRing() {
   &::before {
-    top: -0.1875rem;
-    bottom: -0.0625rem;
-    left: -0.5rem;
-    right: -0.25rem;
+    top: -0.375rem;
+    bottom: -0.25rem;
+    left: -0.6875rem;
+    right: -0.4375rem;
   }
 }
 
@@ -60,10 +61,25 @@
       }
       @include active() {
         color: var(--sb-color-violet);
+        @include buttonFocusRing(
+          'mouse',
+          inset
+        ); // also, make a mouse ring
+        @include buttonFocusRing(
+          'touch',
+          inset
+        ); // also, make a touch ring
         @include tableFocusRing();
       }
       @include focus() {
         @include tableFocusRing();
+        &:focus-visible {
+          color: var(--sb-color-blue-dark);
+        }
+
+        &:not(:active) .dnb-button__text::after {
+          visibility: hidden;
+        }
       }
     }
   }
@@ -92,4 +108,4 @@
   --outline: var(--outline-width) solid var(--sb-color-gray-light-2);
 
   background-color: var(--sb-color-white);
-}
+}

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

@@ -101,7 +101,9 @@
   &:not(&--outline) > tbody > &__tr:last-of-type > &__th::after,
   &:not(&--outline)
     > tbody
-    > &__tr#{&}__tr--has-accordion-content:not(#{&}__tr--expanded):nth-last-child(2)
+    > &__tr#{&}__tr--has-accordion-content:not(
+      #{&}__tr--expanded
+    ):nth-last-child(2)
     td::after {
     @include tableBorder();
 

package/components/timeline/TimelineItem.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { IconIcon } from '../icon/Icon';
 import type { SkeletonShow } from '../skeleton/Skeleton';
+export type TimeLineItemStates = 'completed' | 'current' | 'upcoming';
 export type TimelineItemProps = {
     /**
      * Icon displaying on the left side.
@@ -25,10 +26,10 @@ export type TimelineItemProps = {
      */
     infoMessage?: React.ReactNode;
     /**
-     * The component state. State 'completed' or 'current' or 'upcoming'.
+     * The component state. State 'completed', 'current' or 'upcoming'.
      * Default: null
      */
-    state: 'completed' | 'current' | 'upcoming';
+    state: TimeLineItemStates;
     /**
      * Skeleton should be applied when loading content
      * Default: null

package/components/timeline/TimelineItem.js

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _span;
-const _excluded = ["icon", "iconAlt", "title", "subtitle", "infoMessage", "state", "skeleton"];
+const _excluded = ["icon", "iconAlt", "title", "subtitle", "infoMessage", "state", "skeleton"],
+  _excluded2 = ["title"];
 import React from 'react';
 import classnames from 'classnames';
 import FormStatus from '../form-status/FormStatus';
@@ -22,17 +23,7 @@ const defaultProps = {
   skeleton: false
 };
 const TimelineItem = localProps => {
-  var _span2, _span3, _FormStatus;
   const context = React.useContext(Context);
-  const {
-    translation: {
-      TimelineItem: {
-        alt_label_completed,
-        alt_label_current,
-        alt_label_upcoming
-      }
-    }
-  } = context;
   const allProps = extendPropsWithContext(localProps, defaultProps, context === null || context === void 0 ? void 0 : context.TimelineItem, {
     skeleton: context === null || context === void 0 ? void 0 : context.skeleton
   });
@@ -46,44 +37,85 @@ const TimelineItem = localProps => {
       skeleton
     } = allProps,
     props = _objectWithoutProperties(allProps, _excluded);
-  const stateIsCompleted = state === 'completed';
-  const stateIsCurrent = state === 'current';
-  const stateIsUpcoming = state === 'upcoming';
   const skeletonClasses = createSkeletonClass('font', skeleton, context);
   const classes = classnames(`dnb-timeline__item dnb-timeline__item--${state}`, skeletonClasses);
-  const TimelineItemIcon = () => {
-    const currentIcon = icon || stateIsCompleted && checkIcon || stateIsCurrent && pinIcon || stateIsUpcoming && calendarIcon;
-    const currentAltLabel = iconAlt || stateIsCompleted && alt_label_completed || stateIsCurrent && alt_label_current || stateIsUpcoming && alt_label_upcoming;
-    return React.createElement("span", {
-      className: "dnb-timeline__item__label__icon"
-    }, _span || (_span = React.createElement("span", {
-      key: "icon-alignment",
-      "aria-hidden": true
-    }, "\u200C")), !skeleton && currentIcon && React.createElement(IconPrimary, {
-      icon: currentIcon,
-      alt: currentAltLabel,
-      size: stateIsCurrent ? undefined : 'small'
-    }));
-  };
-  const TimelineItemTitle = () => {
-    return _span2 || (_span2 = React.createElement("span", {
-      className: "dnb-timeline__item__label__title"
-    }, title));
+  return React.createElement("li", _extends({
+    className: classes,
+    "aria-current": state === 'current' ? 'step' : undefined
+  }, props), React.createElement(TimelineItemLabel, {
+    state: state,
+    title: title,
+    icon: icon,
+    iconAlt: iconAlt,
+    skeleton: skeleton,
+    translations: context.translation.TimelineItem
+  }), React.createElement(TimelineItemContent, {
+    subtitle: subtitle,
+    infoMessage: infoMessage
+  }));
+};
+const TimelineItemLabel = _ref => {
+  let {
+      title
+    } = _ref,
+    iconProps = _objectWithoutProperties(_ref, _excluded2);
+  return React.createElement("span", {
+    className: "dnb-timeline__item__label"
+  }, React.createElement(TimelineItemIcon, iconProps), React.createElement(TimelineItemTitle, {
+    title: title
+  }));
+};
+const TimelineItemIcon = _ref2 => {
+  let {
+    icon,
+    state,
+    iconAlt,
+    skeleton,
+    translations
+  } = _ref2;
+  const {
+    alt_label_completed,
+    alt_label_current,
+    alt_label_upcoming
+  } = translations;
+  const icons = {
+    completed: checkIcon,
+    current: pinIcon,
+    upcoming: calendarIcon
   };
-  const TimelineItemLabel = () => {
-    return _span3 || (_span3 = React.createElement("span", {
-      className: "dnb-timeline__item__label"
-    }, React.createElement(TimelineItemIcon, null), React.createElement(TimelineItemTitle, null)));
+  const labels = {
+    completed: alt_label_completed,
+    current: alt_label_current,
+    upcoming: alt_label_upcoming
   };
-  const getSubtitle = () => {
-    const TimelineItemSubtitle = _ref => {
-      let {
-        subtitle
-      } = _ref;
-      return React.createElement("div", {
-        className: "dnb-timeline__item__content__subtitle"
-      }, subtitle);
-    };
+  const currentIcon = icon || icons[state];
+  const currentAltLabel = iconAlt || labels[state];
+  return React.createElement("span", {
+    className: "dnb-timeline__item__label__icon"
+  }, _span || (_span = React.createElement("span", {
+    key: "icon-alignment",
+    "aria-hidden": true
+  }, "\u200C")), !skeleton && currentIcon && React.createElement(IconPrimary, {
+    icon: currentIcon,
+    alt: currentAltLabel,
+    size: state === 'current' ? undefined : 'small'
+  }));
+};
+const TimelineItemTitle = _ref3 => {
+  let {
+    title
+  } = _ref3;
+  return React.createElement("span", {
+    className: "dnb-timeline__item__label__title"
+  }, title);
+};
+const TimelineItemContent = _ref4 => {
+  var _TimelineItemSubtitle;
+  let {
+    subtitle,
+    infoMessage
+  } = _ref4;
+  const renderSubtitles = () => {
     if (!subtitle) {
       return null;
     }
@@ -93,24 +125,26 @@ const TimelineItem = localProps => {
         subtitle: subtitle
       }));
     }
-    return React.createElement(TimelineItemSubtitle, {
+    return _TimelineItemSubtitle || (_TimelineItemSubtitle = React.createElement(TimelineItemSubtitle, {
       subtitle: subtitle
-    });
-  };
-  const TimelineItemContent = () => {
-    return React.createElement("div", {
-      className: "dnb-timeline__item__content"
-    }, getSubtitle(), infoMessage && (_FormStatus || (_FormStatus = React.createElement(FormStatus, {
-      text: infoMessage,
-      state: "info",
-      className: "dnb-timeline__item__content__info",
-      stretch: true
-    }))));
+    }));
   };
-  return React.createElement("li", _extends({
-    className: classes,
-    "aria-current": stateIsCurrent ? 'step' : undefined
-  }, props), React.createElement(TimelineItemLabel, null), React.createElement(TimelineItemContent, null));
+  return React.createElement("div", {
+    className: "dnb-timeline__item__content"
+  }, renderSubtitles(), infoMessage && React.createElement(FormStatus, {
+    text: infoMessage,
+    state: "info",
+    className: "dnb-timeline__item__content__info",
+    stretch: true
+  }));
+};
+const TimelineItemSubtitle = _ref5 => {
+  let {
+    subtitle
+  } = _ref5;
+  return React.createElement("div", {
+    className: "dnb-timeline__item__content__subtitle"
+  }, subtitle);
 };
 export default TimelineItem;
 //# sourceMappingURL=TimelineItem.js.map

package/components/timeline/TimelineItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimelineItem.js","names":["React","classnames","FormStatus","IconPrimary","createSkeletonClass","checkIcon","calendarIcon","pinIcon","Context","extendPropsWithContext","defaultProps","icon","iconAlt","title","subtitle","infoMessage","state","skeleton","TimelineItem","localProps","_span2","_span3","_FormStatus","context","useContext","translation","alt_label_completed","alt_label_current","alt_label_upcoming","allProps","props","_objectWithoutProperties","_excluded","stateIsCompleted","stateIsCurrent","stateIsUpcoming","skeletonClasses","classes","TimelineItemIcon","currentIcon","currentAltLabel","createElement","className","_span","key","alt","size","undefined","TimelineItemTitle","TimelineItemLabel","getSubtitle","TimelineItemSubtitle","_ref","Array","isArray","map","i","TimelineItemContent","text","stretch","_extends"],"sources":["../../../../src/components/timeline/TimelineItem.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\n\n// Components\nimport FormStatus from '../form-status/FormStatus'\nimport IconPrimary from '../icon-primary/IconPrimary'\nimport type { IconIcon } from '../icon/Icon'\nimport { createSkeletonClass } from '../skeleton/SkeletonHelper'\n\n// Icons\nimport checkIcon from '../../icons/check'\nimport calendarIcon from '../../icons/calendar'\nimport pinIcon from '../../icons/pin'\n\n// Shared\nimport Context from '../../shared/Context'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\nimport { extendPropsWithContext } from '../../shared/component-helper'\n\nexport type TimelineItemProps = {\n  /**\n   * Icon displaying on the left side.\n   * Default: `check` for state `completed`, `pin` for state `current`, and `calendar` for state `upcoming` .\n   */\n  icon?: IconIcon\n\n  /**\n   * Text displaying the title of the item's corresponding page.\n   * Default: translations based on the icon.\n   */\n  iconAlt?: string\n\n  /**\n   * Text displaying the title of the timeline item.\n   */\n  title: React.ReactNode\n\n  /**\n   * Text displaying the subtitle of the timeline item.\n   */\n  subtitle?: React.ReactNode | React.ReactNode[]\n\n  /**\n   * Text displaying info message of the timeline item.\n   */\n  infoMessage?: React.ReactNode\n\n  /**\n   * The component state. State 'completed' or 'current' or 'upcoming'.\n   * Default: null\n   */\n  state: 'completed' | 'current' | 'upcoming'\n\n  /**\n   * Skeleton should be applied when loading content\n   * Default: null\n   */\n  skeleton?: SkeletonShow\n}\n\nexport type TimelineItemAllProps = TimelineItemProps &\n  Omit<React.AllHTMLAttributes<HTMLLIElement>, 'title' | 'name'>\n\nconst defaultProps = {\n  icon: null,\n  iconAlt: null,\n  title: null,\n  subtitle: null,\n  infoMessage: null,\n  state: null,\n  skeleton: false,\n}\n\nconst TimelineItem = (localProps: TimelineItemAllProps) => {\n  // Every component should have a context\n  const context = React.useContext(Context)\n  const {\n    translation: {\n      TimelineItem: {\n        alt_label_completed,\n        alt_label_current,\n        alt_label_upcoming,\n      },\n    },\n  } = context\n\n  // Extract additional props from global context\n  const allProps = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context?.TimelineItem,\n    { skeleton: context?.skeleton }\n  )\n\n  const {\n    icon,\n    iconAlt,\n    title,\n    subtitle,\n    infoMessage,\n    state,\n    skeleton,\n    ...props\n  } = allProps\n\n  const stateIsCompleted = state === 'completed'\n  const stateIsCurrent = state === 'current'\n  const stateIsUpcoming = state === 'upcoming'\n\n  const skeletonClasses = createSkeletonClass('font', skeleton, context)\n  const classes = classnames(\n    'dnb-timeline__item',\n    skeletonClasses,\n    `dnb-timeline__item--${state}`\n  )\n\n  const TimelineItemIcon = () => {\n    const currentIcon =\n      icon ||\n      (stateIsCompleted && checkIcon) ||\n      (stateIsCurrent && pinIcon) ||\n      (stateIsUpcoming && calendarIcon)\n\n    const currentAltLabel =\n      iconAlt ||\n      (stateIsCompleted && alt_label_completed) ||\n      (stateIsCurrent && alt_label_current) ||\n      (stateIsUpcoming && alt_label_upcoming)\n    return (\n      <span className=\"dnb-timeline__item__label__icon\">\n        <span key=\"icon-alignment\" aria-hidden>\n          &zwnj;\n        </span>\n        {!skeleton && currentIcon && (\n          <IconPrimary\n            icon={currentIcon}\n            alt={currentAltLabel}\n            size={stateIsCurrent ? undefined : 'small'}\n          />\n        )}\n      </span>\n    )\n  }\n\n  const TimelineItemTitle = () => {\n    return (\n      <span className=\"dnb-timeline__item__label__title\">{title}</span>\n    )\n  }\n\n  const TimelineItemLabel = () => {\n    return (\n      <span className=\"dnb-timeline__item__label\">\n        <TimelineItemIcon />\n        <TimelineItemTitle />\n      </span>\n    )\n  }\n\n  const getSubtitle = () => {\n    const TimelineItemSubtitle = ({\n      subtitle,\n    }: {\n      subtitle: React.ReactNode\n    }) => (\n      <div className=\"dnb-timeline__item__content__subtitle\">\n        {subtitle}\n      </div>\n    )\n\n    if (!subtitle) {\n      return null\n    }\n\n    if (Array.isArray(subtitle)) {\n      return subtitle.map((subtitle, i) => (\n        <TimelineItemSubtitle key={i} subtitle={subtitle} />\n      ))\n    }\n    return <TimelineItemSubtitle subtitle={subtitle} />\n  }\n\n  const TimelineItemContent = () => {\n    return (\n      <div className=\"dnb-timeline__item__content\">\n        {getSubtitle()}\n        {infoMessage && (\n          <FormStatus\n            text={infoMessage}\n            state=\"info\"\n            className=\"dnb-timeline__item__content__info\"\n            stretch\n          />\n        )}\n      </div>\n    )\n  }\n\n  return (\n    <li\n      className={classes}\n      aria-current={stateIsCurrent ? 'step' : undefined}\n      {...props}\n    >\n      <TimelineItemLabel />\n      <TimelineItemContent />\n    </li>\n  )\n}\n\nexport default TimelineItem\n"],"mappings":"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"}
+{"version":3,"file":"TimelineItem.js","names":["React","classnames","FormStatus","IconPrimary","createSkeletonClass","checkIcon","calendarIcon","pinIcon","Context","extendPropsWithContext","defaultProps","icon","iconAlt","title","subtitle","infoMessage","state","skeleton","TimelineItem","localProps","context","useContext","allProps","props","_objectWithoutProperties","_excluded","skeletonClasses","classes","createElement","_extends","className","undefined","TimelineItemLabel","translations","translation","TimelineItemContent","_ref","iconProps","_excluded2","TimelineItemIcon","TimelineItemTitle","_ref2","alt_label_completed","alt_label_current","alt_label_upcoming","icons","completed","current","upcoming","labels","currentIcon","currentAltLabel","_span","key","alt","size","_ref3","_ref4","_TimelineItemSubtitle","renderSubtitles","Array","isArray","map","i","TimelineItemSubtitle","text","stretch","_ref5"],"sources":["../../../../src/components/timeline/TimelineItem.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\n\n// Components\nimport FormStatus from '../form-status/FormStatus'\nimport IconPrimary from '../icon-primary/IconPrimary'\nimport type { IconIcon } from '../icon/Icon'\nimport { createSkeletonClass } from '../skeleton/SkeletonHelper'\n\n// Icons\nimport checkIcon from '../../icons/check'\nimport calendarIcon from '../../icons/calendar'\nimport pinIcon from '../../icons/pin'\n\n// Shared\nimport Context from '../../shared/Context'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\nimport { extendPropsWithContext } from '../../shared/component-helper'\n\nexport type TimeLineItemStates = 'completed' | 'current' | 'upcoming'\n\nexport type TimelineItemProps = {\n  /**\n   * Icon displaying on the left side.\n   * Default: `check` for state `completed`, `pin` for state `current`, and `calendar` for state `upcoming` .\n   */\n  icon?: IconIcon\n\n  /**\n   * Text displaying the title of the item's corresponding page.\n   * Default: translations based on the icon.\n   */\n  iconAlt?: string\n\n  /**\n   * Text displaying the title of the timeline item.\n   */\n  title: React.ReactNode\n\n  /**\n   * Text displaying the subtitle of the timeline item.\n   */\n  subtitle?: React.ReactNode | React.ReactNode[]\n\n  /**\n   * Text displaying info message of the timeline item.\n   */\n  infoMessage?: React.ReactNode\n\n  /**\n   * The component state. State 'completed', 'current' or 'upcoming'.\n   * Default: null\n   */\n  state: TimeLineItemStates\n\n  /**\n   * Skeleton should be applied when loading content\n   * Default: null\n   */\n  skeleton?: SkeletonShow\n}\n\nexport type TimelineItemAllProps = TimelineItemProps &\n  Omit<React.AllHTMLAttributes<HTMLLIElement>, 'title' | 'name'>\n\nconst defaultProps = {\n  icon: null,\n  iconAlt: null,\n  title: null,\n  subtitle: null,\n  infoMessage: null,\n  state: null,\n  skeleton: false,\n}\n\nconst TimelineItem = (localProps: TimelineItemAllProps) => {\n  // Every component should have a context\n  const context = React.useContext(Context)\n\n  // Extract additional props from global context\n  const allProps = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context?.TimelineItem,\n    { skeleton: context?.skeleton }\n  )\n\n  const {\n    icon,\n    iconAlt,\n    title,\n    subtitle,\n    infoMessage,\n    state,\n    skeleton,\n    ...props\n  } = allProps\n\n  const skeletonClasses = createSkeletonClass('font', skeleton, context)\n  const classes = classnames(\n    'dnb-timeline__item',\n    skeletonClasses,\n    `dnb-timeline__item--${state}`\n  )\n\n  return (\n    <li\n      className={classes}\n      aria-current={state === 'current' ? 'step' : undefined}\n      {...props}\n    >\n      <TimelineItemLabel\n        state={state}\n        title={title}\n        icon={icon}\n        iconAlt={iconAlt}\n        skeleton={skeleton}\n        translations={\n          context.translation.TimelineItem as TimeLineIconAltTranslations\n        }\n      />\n      <TimelineItemContent subtitle={subtitle} infoMessage={infoMessage} />\n    </li>\n  )\n}\n\n// Label\n\ntype TimelineItemLabelProps = TimeLineIconProps & TimelineItemTitleProps\n\nconst TimelineItemLabel = ({\n  title,\n  ...iconProps\n}: TimelineItemLabelProps) => {\n  return (\n    <span className=\"dnb-timeline__item__label\">\n      <TimelineItemIcon {...iconProps} />\n      <TimelineItemTitle title={title} />\n    </span>\n  )\n}\n\ntype TimeLineIconProps = Pick<\n  TimelineItemProps,\n  'icon' | 'iconAlt' | 'state' | 'skeleton'\n> & { translations: TimeLineIconAltTranslations }\n\ntype TimeLineIconAltTranslations = {\n  alt_label_completed: string\n  alt_label_current: string\n  alt_label_upcoming: string\n}\n\nconst TimelineItemIcon = ({\n  icon,\n  state,\n  iconAlt,\n  skeleton,\n  translations,\n}: TimeLineIconProps) => {\n  const { alt_label_completed, alt_label_current, alt_label_upcoming } =\n    translations\n\n  const icons: Record<TimeLineItemStates, IconIcon> = {\n    completed: checkIcon,\n    current: pinIcon,\n    upcoming: calendarIcon,\n  }\n\n  const labels: Record<TimeLineItemStates, string> = {\n    completed: alt_label_completed,\n    current: alt_label_current,\n    upcoming: alt_label_upcoming,\n  }\n\n  const currentIcon = icon || icons[state]\n  const currentAltLabel = iconAlt || labels[state]\n\n  return (\n    <span className=\"dnb-timeline__item__label__icon\">\n      <span key=\"icon-alignment\" aria-hidden>\n        &zwnj;\n      </span>\n      {!skeleton && currentIcon && (\n        <IconPrimary\n          icon={currentIcon}\n          alt={currentAltLabel}\n          size={state === 'current' ? undefined : 'small'}\n        />\n      )}\n    </span>\n  )\n}\n\ntype TimelineItemTitleProps = Pick<TimelineItemProps, 'title'>\n\nconst TimelineItemTitle = ({ title }: TimelineItemTitleProps) => {\n  return <span className=\"dnb-timeline__item__label__title\">{title}</span>\n}\n\n// Content\n\ntype TimeLineItemContentProps = Pick<\n  TimelineItemProps,\n  'subtitle' | 'infoMessage'\n>\n\nconst TimelineItemContent = ({\n  subtitle,\n  infoMessage,\n}: TimeLineItemContentProps) => {\n  const renderSubtitles = () => {\n    if (!subtitle) {\n      return null\n    }\n\n    if (Array.isArray(subtitle)) {\n      return subtitle.map((subtitle, i) => (\n        <TimelineItemSubtitle key={i} subtitle={subtitle} />\n      ))\n    }\n    return <TimelineItemSubtitle subtitle={subtitle} />\n  }\n\n  return (\n    <div className=\"dnb-timeline__item__content\">\n      {renderSubtitles()}\n      {infoMessage && (\n        <FormStatus\n          text={infoMessage}\n          state=\"info\"\n          className=\"dnb-timeline__item__content__info\"\n          stretch\n        />\n      )}\n    </div>\n  )\n}\n\ntype TimelineItemSubtitleProps = {\n  subtitle: React.ReactNode\n}\n\nconst TimelineItemSubtitle = ({ subtitle }: TimelineItemSubtitleProps) => (\n  <div className=\"dnb-timeline__item__content__subtitle\">{subtitle}</div>\n)\n\nexport default TimelineItem\n"],"mappings":"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"}

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

@@ -22,8 +22,9 @@
   );
   --timeline-icon-width-diff: calc(
     (
-        var(--timeline-icon-width--medium) -
-          var(--timeline-icon-width--small)
+        var(--timeline-icon-width--medium) - var(
+            --timeline-icon-width--small
+          )
       ) / 2
   );
   --timeline-border-spacing: var(--spacing-small);

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

@@ -1 +1,3 @@
-.dnb-timeline{--timeline-icon-height--small:1.5rem;--timeline-icon-width--small:1.5rem;--timeline-icon-border-radius--small:calc(var(--timeline-icon-height--small)/2);--timeline-icon-height--medium:2rem;--timeline-icon-width--medium:2rem;--timeline-icon-border-radius--medium:calc(var(--timeline-icon-height--medium)/2);--timeline-icon-width-diff:calc((var(--timeline-icon-width--medium) - var(--timeline-icon-width--small))/2);--timeline-border-spacing:var(--spacing-small);--timeline-border-spacing--icon-adjusted:calc(var(--timeline-icon-width-diff) + var(--timeline-border-spacing))}.dnb-timeline__item{margin-left:var(--timeline-icon-width-diff)}.dnb-timeline__item__label__icon{--border-color:var(--color-black-80);--border-width:0.0625rem;background-color:var(--color-white);border-color:transparent;border-radius:var(--timeline-icon-border-radius--small);box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-black-80);line-height:var(--timeline-icon-height--small);width:var(--timeline-icon-width--small)}.dnb-timeline__item__label__title{font-size:var(--font-size-small);line-height:var(--line-height-small);margin-left:var(--timeline-border-spacing--icon-adjusted)}.dnb-timeline__item__content{border-left:1px dashed var(--color-black-55);margin-left:calc(var(--timeline-icon-width--small)/2);padding-left:calc(var(--timeline-icon-width--small)/2 + var(--timeline-border-spacing--icon-adjusted))}.dnb-timeline__item--completed .dnb-timeline__item__content{border-left:1px solid var(--color-black-80)}.dnb-timeline__item--completed .dnb-timeline__item__label__title{color:var(--color-black-80)}.dnb-timeline__item--current .dnb-timeline__item__content{margin-left:calc(var(--timeline-icon-width--medium)/2);padding-left:calc(var(--timeline-icon-width--medium)/2 + var(--timeline-border-spacing))}.dnb-timeline__item--current .dnb-timeline__item__label__title{font-size:var(--font-size-basis);font-weight:var(--font-weight-medium);line-height:var(--line-height-basis);margin-left:var(--timeline-border-spacing)}.dnb-timeline__item--current .dnb-timeline__item__label__icon{border-radius:var(--timeline-icon-border-radius--medium);line-height:var(--timeline-icon-height--medium);width:var(--timeline-icon-width--medium)}.dnb-timeline__item--current{margin-left:0}.dnb-timeline__item--upcoming .dnb-timeline__item__label__title{color:var(--color-black-55);font-weight:var(--font-weight-basis)}.dnb-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon{--border-color:var(--color-black-3);--border-width:0.0625rem;background-color:var(--color-black-3);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-black-55)}.dnb-timeline__item:only-child{margin-left:0}.dnb-timeline__item:last-child .dnb-timeline__item__content{border-left:none}
+.dnb-timeline{--timeline-icon-height--small:1.5rem;--timeline-icon-width--small:1.5rem;--timeline-icon-border-radius--small:calc(var(--timeline-icon-height--small)/2);--timeline-icon-height--medium:2rem;--timeline-icon-width--medium:2rem;--timeline-icon-border-radius--medium:calc(var(--timeline-icon-height--medium)/2);--timeline-icon-width-diff:calc((var(--timeline-icon-width--medium) - var(
+            --timeline-icon-width--small
+          ))/2);--timeline-border-spacing:var(--spacing-small);--timeline-border-spacing--icon-adjusted:calc(var(--timeline-icon-width-diff) + var(--timeline-border-spacing))}.dnb-timeline__item{margin-left:var(--timeline-icon-width-diff)}.dnb-timeline__item__label__icon{--border-color:var(--color-black-80);--border-width:0.0625rem;background-color:var(--color-white);border-color:transparent;border-radius:var(--timeline-icon-border-radius--small);box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-black-80);line-height:var(--timeline-icon-height--small);width:var(--timeline-icon-width--small)}.dnb-timeline__item__label__title{font-size:var(--font-size-small);line-height:var(--line-height-small);margin-left:var(--timeline-border-spacing--icon-adjusted)}.dnb-timeline__item__content{border-left:1px dashed var(--color-black-55);margin-left:calc(var(--timeline-icon-width--small)/2);padding-left:calc(var(--timeline-icon-width--small)/2 + var(--timeline-border-spacing--icon-adjusted))}.dnb-timeline__item--completed .dnb-timeline__item__content{border-left:1px solid var(--color-black-80)}.dnb-timeline__item--completed .dnb-timeline__item__label__title{color:var(--color-black-80)}.dnb-timeline__item--current .dnb-timeline__item__content{margin-left:calc(var(--timeline-icon-width--medium)/2);padding-left:calc(var(--timeline-icon-width--medium)/2 + var(--timeline-border-spacing))}.dnb-timeline__item--current .dnb-timeline__item__label__title{font-size:var(--font-size-basis);font-weight:var(--font-weight-medium);line-height:var(--line-height-basis);margin-left:var(--timeline-border-spacing)}.dnb-timeline__item--current .dnb-timeline__item__label__icon{border-radius:var(--timeline-icon-border-radius--medium);line-height:var(--timeline-icon-height--medium);width:var(--timeline-icon-width--medium)}.dnb-timeline__item--current{margin-left:0}.dnb-timeline__item--upcoming .dnb-timeline__item__label__title{color:var(--color-black-55);font-weight:var(--font-weight-basis)}.dnb-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon{--border-color:var(--color-black-3);--border-width:0.0625rem;background-color:var(--color-black-3);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-black-55)}.dnb-timeline__item:only-child{margin-left:0}.dnb-timeline__item:last-child .dnb-timeline__item__content{border-left:none}

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

@@ -27,8 +27,9 @@
   );
   --timeline-icon-width-diff: calc(
     (
-        var(--timeline-icon-width--medium) -
-          var(--timeline-icon-width--small)
+        var(--timeline-icon-width--medium) - var(
+            --timeline-icon-width--small
+          )
       ) / 2
   );
   --timeline-border-spacing: var(--spacing-small);

package/components/toggle-button/style/themes/dnb-toggle-button-theme-ui.scss

@@ -205,7 +205,9 @@
       }
     }
     .dnb-checkbox
-      .dnb-checkbox__input:not([disabled]):not(:focus):not(:active):not(:hover)
+      .dnb-checkbox__input:not([disabled]):not(:focus):not(:active):not(
+        :hover
+      )
       ~ .dnb-checkbox__gfx {
       color: var(--color-fire-red);
     }

package/elements/lib.d.ts

@@ -66,7 +66,7 @@ export declare const getElements: () => {
     } & import("react").HTMLAttributes<HTMLHeadingElement> & {
         as?: string;
         level?: "use";
-        size?: import("./H").HSize;
+        size?: "auto" | import("../components/Heading").HeadingSize;
     }) => import("react/jsx-runtime").JSX.Element;
     H1: ({ size, ...props }: import("./H").SharedHProps) => import("react/jsx-runtime").JSX.Element;
     H2: ({ size, ...props }: import("./H").SharedHProps) => import("react/jsx-runtime").JSX.Element;

package/elements/typography/H.d.ts

@@ -4,7 +4,8 @@
  */
 import React from 'react';
 import { SpacingProps } from '../../components/space/types';
-export type HSize = 'xx-large' | 'x-large' | 'large' | 'medium' | 'basis' | 'small' | 'x-small';
+import { HeadingSize } from '../../components/heading/Heading';
+export type HSize = HeadingSize;
 type HProps = SpacingProps & React.HTMLAttributes<HTMLHeadingElement> & {
     /**
      * Defines the Element Type, like "h1"
@@ -16,10 +17,11 @@ type HProps = SpacingProps & React.HTMLAttributes<HTMLHeadingElement> & {
      */
     level?: 'use';
     /**
-     * Sets the font size based on headingSize_#{HEADING_SIZE} mixins found in typography-mixins.scss. For more detailed information go here: https://eufemia.dnb.no/uilib/typography/font-size/
+     * Sets the font size based on headingSize_#{HEADING_SIZE} mixins found in typography-mixins.scss. For more detailed information go here: https://eufemia.dnb.no/uilib/typography/font-size/.
+     * Use value 'auto' to base size on heading level
      * Default: xx-large
      */
-    size?: HSize;
+    size?: HSize | 'auto';
 };
 export type SharedHProps = Omit<HProps, 'as'>;
 declare const H: ({ as, is, level, size, className, ...props }: HProps) => import("react/jsx-runtime").JSX.Element;

package/elements/typography/H.js

@@ -4,22 +4,26 @@ const _excluded = ["as", "is", "level", "size", "className"];
 import React from 'react';
 import classnames from 'classnames';
 import E from '../Element';
-import { setNextLevel } from '../../components/heading/HeadingHelpers';
+import { setNextLevel, getHeadingSize } from '../../components/heading/HeadingHelpers';
+import { useTheme } from '../../shared';
 const H = _ref => {
   let {
       as = 'h1',
       is,
       level,
-      size = 'xx-large',
+      size,
       className
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
+  const numSiz = parseFloat(String(as || is).substring(1));
   if (level === 'use') {
-    setNextLevel(parseFloat(String(as || is).substring(1)));
+    setNextLevel(numSiz);
   }
+  const theme = useTheme();
+  const targetSize = size === 'auto' && getHeadingSize(theme === null || theme === void 0 ? void 0 : theme.name)[numSiz] || size || 'xx-large';
   return React.createElement(E, _extends({
     as: as || is,
-    internalClass: classnames(className, size && `dnb-h--${size}`)
+    internalClass: classnames(className, targetSize && `dnb-h--${targetSize}`)
   }, props));
 };
 export default H;

package/elements/typography/H.js.map

@@ -1 +1 @@
-{"version":3,"file":"H.js","names":["React","classnames","E","setNextLevel","H","_ref","as","is","level","size","className","props","_objectWithoutProperties","_excluded","parseFloat","String","substring","createElement","_extends","internalClass"],"sources":["../../../../src/elements/typography/H.tsx"],"sourcesContent":["/**\n * HTML Element\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport { SpacingProps } from '../../components/space/types'\nimport E from '../Element'\nimport { setNextLevel } from '../../components/heading/HeadingHelpers'\n\nexport type HSize =\n  | 'xx-large'\n  | 'x-large'\n  | 'large'\n  | 'medium'\n  | 'basis'\n  | 'small'\n  | 'x-small'\n\ntype HProps = SpacingProps &\n  React.HTMLAttributes<HTMLHeadingElement> & {\n    /**\n     * Defines the Element Type, like \"h1\"\n     * Default: h1\n     */\n    as?: string\n    /**\n     * Makes the component use the elements heading level. e.g. h3 will make the component use level 3\n     */\n    level?: 'use'\n    /**\n     * Sets the font size based on headingSize_#{HEADING_SIZE} mixins found in typography-mixins.scss. For more detailed information go here: https://eufemia.dnb.no/uilib/typography/font-size/\n     * Default: xx-large\n     */\n    size?: HSize\n  }\n\nexport type SharedHProps = Omit<HProps, 'as'>\n\nconst H = ({\n  as = 'h1',\n  is,\n  level,\n  size = 'xx-large',\n  className,\n  ...props\n}: HProps) => {\n  if (level === 'use') {\n    setNextLevel(parseFloat(String(as || is).substring(1)))\n  }\n\n  return (\n    <E\n      as={as || is}\n      internalClass={classnames(size && `dnb-h--${size}`, className)}\n      {...props}\n    />\n  )\n}\n\nexport default H\n"],"mappings":";;;AAKA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AAEnC,OAAOC,CAAC,MAAM,YAAY;AAC1B,SAASC,YAAY,QAAQ,yCAAyC;AA+BtE,MAAMC,CAAC,GAAGC,IAAA,IAOI;EAAA,IAPH;MACTC,EAAE,GAAG,IAAI;MACTC,EAAE;MACFC,KAAK;MACLC,IAAI,GAAG,UAAU;MACjBC;IAEM,CAAC,GAAAL,IAAA;IADJM,KAAK,GAAAC,wBAAA,CAAAP,IAAA,EAAAQ,SAAA;EAER,IAAIL,KAAK,KAAK,KAAK,EAAE;IACnBL,YAAY,CAACW,UAAU,CAACC,MAAM,CAACT,EAAE,IAAIC,EAAE,CAAC,CAACS,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;EACzD;EAEA,OACEhB,KAAA,CAAAiB,aAAA,CAACf,CAAC,EAAAgB,QAAA;IACAZ,EAAE,EAAEA,EAAE,IAAIC,EAAG;IACbY,aAAa,EAAElB,UAAU,CAA2BS,SAAS,EAAnCD,IAAI,IAAK,UAASA,IAAK,EAAY;EAAE,GAC3DE,KAAK,CACV,CAAC;AAEN,CAAC;AAED,eAAeP,CAAC"}
+{"version":3,"file":"H.js","names":["React","classnames","E","setNextLevel","getHeadingSize","useTheme","H","_ref","as","is","level","size","className","props","_objectWithoutProperties","_excluded","numSiz","parseFloat","String","substring","theme","targetSize","name","createElement","_extends","internalClass"],"sources":["../../../../src/elements/typography/H.tsx"],"sourcesContent":["/**\n * HTML Element\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport { SpacingProps } from '../../components/space/types'\nimport E from '../Element'\nimport { HeadingSize } from '../../components/heading/Heading'\nimport {\n  setNextLevel,\n  getHeadingSize,\n} from '../../components/heading/HeadingHelpers'\nimport { useTheme } from '../../shared'\n\nexport type HSize = HeadingSize\n\ntype HProps = SpacingProps &\n  React.HTMLAttributes<HTMLHeadingElement> & {\n    /**\n     * Defines the Element Type, like \"h1\"\n     * Default: h1\n     */\n    as?: string\n    /**\n     * Makes the component use the elements heading level. e.g. h3 will make the component use level 3\n     */\n    level?: 'use'\n    /**\n     * Sets the font size based on headingSize_#{HEADING_SIZE} mixins found in typography-mixins.scss. For more detailed information go here: https://eufemia.dnb.no/uilib/typography/font-size/.\n     * Use value 'auto' to base size on heading level\n     * Default: xx-large\n     */\n    size?: HSize | 'auto'\n  }\n\nexport type SharedHProps = Omit<HProps, 'as'>\n\nconst H = ({\n  as = 'h1',\n  is,\n  level,\n  size,\n  className,\n  ...props\n}: HProps) => {\n  const numSiz = parseFloat(String(as || is).substring(1))\n\n  if (level === 'use') {\n    setNextLevel(numSiz)\n  }\n\n  const theme = useTheme()\n  const targetSize =\n    (size === 'auto' && getHeadingSize(theme?.name)[numSiz]) ||\n    size ||\n    'xx-large'\n\n  return (\n    <E\n      as={as || is}\n      internalClass={classnames(\n        targetSize && `dnb-h--${targetSize}`,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport default H\n"],"mappings":";;;AAKA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AAEnC,OAAOC,CAAC,MAAM,YAAY;AAE1B,SACEC,YAAY,EACZC,cAAc,QACT,yCAAyC;AAChD,SAASC,QAAQ,QAAQ,cAAc;AAyBvC,MAAMC,CAAC,GAAGC,IAAA,IAOI;EAAA,IAPH;MACTC,EAAE,GAAG,IAAI;MACTC,EAAE;MACFC,KAAK;MACLC,IAAI;MACJC;IAEM,CAAC,GAAAL,IAAA;IADJM,KAAK,GAAAC,wBAAA,CAAAP,IAAA,EAAAQ,SAAA;EAER,MAAMC,MAAM,GAAGC,UAAU,CAACC,MAAM,CAACV,EAAE,IAAIC,EAAE,CAAC,CAACU,SAAS,CAAC,CAAC,CAAC,CAAC;EAExD,IAAIT,KAAK,KAAK,KAAK,EAAE;IACnBP,YAAY,CAACa,MAAM,CAAC;EACtB;EAEA,MAAMI,KAAK,GAAGf,QAAQ,CAAC,CAAC;EACxB,MAAMgB,UAAU,GACbV,IAAI,KAAK,MAAM,IAAIP,cAAc,CAACgB,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEE,IAAI,CAAC,CAACN,MAAM,CAAC,IACvDL,IAAI,IACJ,UAAU;EAEZ,OACEX,KAAA,CAAAuB,aAAA,CAACrB,CAAC,EAAAsB,QAAA;IACAhB,EAAE,EAAEA,EAAE,IAAIC,EAAG;IACbgB,aAAa,EAAExB,UAAU,CAEvBW,SAAS,EADTS,UAAU,IAAK,UAASA,UAAW,EAErC;EAAE,GACER,KAAK,CACV,CAAC;AAEN,CAAC;AAED,eAAeP,CAAC"}

package/elements/typography/H1.js

@@ -5,12 +5,12 @@ import React from 'react';
 import H from './H';
 const H1 = _ref => {
   let {
-      size = 'xx-large'
+      size
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   return React.createElement(H, _extends({
     as: "h1",
-    size: size
+    size: size || 'auto'
   }, props));
 };
 export default H1;

package/elements/typography/H1.js.map

@@ -1 +1 @@
-{"version":3,"file":"H1.js","names":["React","H","H1","_ref","size","props","_objectWithoutProperties","_excluded","createElement","_extends","as"],"sources":["../../../../src/elements/typography/H1.tsx"],"sourcesContent":["/**\n * HTML Element\n *\n */\nimport React from 'react'\nimport H from './H'\nimport type { SharedHProps } from './H'\n\nconst H1 = ({ size = 'xx-large', ...props }: SharedHProps) => (\n  <H as=\"h1\" size={size} {...props} />\n)\n\nexport default H1\n"],"mappings":";;;AAIA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,CAAC,MAAM,KAAK;AAGnB,MAAMC,EAAE,GAAGC,IAAA;EAAA,IAAC;MAAEC,IAAI,GAAG;IAAmC,CAAC,GAAAD,IAAA;IAArBE,KAAK,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA;EAAA,OACvCP,KAAA,CAAAQ,aAAA,CAACP,CAAC,EAAAQ,QAAA;IAACC,EAAE,EAAC,IAAI;IAACN,IAAI,EAAEA;EAAK,GAAKC,KAAK,CAAG,CAAC;AAAA,CACrC;AAED,eAAeH,EAAE"}
+{"version":3,"file":"H1.js","names":["React","H","H1","_ref","size","props","_objectWithoutProperties","_excluded","createElement","_extends","as"],"sources":["../../../../src/elements/typography/H1.tsx"],"sourcesContent":["/**\n * HTML Element\n *\n */\nimport React from 'react'\nimport type { SharedHProps } from './H'\nimport H from './H'\n\nconst H1 = ({ size, ...props }: SharedHProps) => (\n  <H as=\"h1\" size={size || 'auto'} {...props} />\n)\n\nexport default H1\n"],"mappings":";;;AAIA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,CAAC,MAAM,KAAK;AAEnB,MAAMC,EAAE,GAAGC,IAAA;EAAA,IAAC;MAAEC;IAA6B,CAAC,GAAAD,IAAA;IAArBE,KAAK,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA;EAAA,OAC1BP,KAAA,CAAAQ,aAAA,CAACP,CAAC,EAAAQ,QAAA;IAACC,EAAE,EAAC,IAAI;IAACN,IAAI,EAAEA,IAAI,IAAI;EAAO,GAAKC,KAAK,CAAG,CAAC;AAAA,CAC/C;AAED,eAAeH,EAAE"}