@dnb/eufemia 9.26.1 → 9.27.0

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

@@ -0,0 +1,2 @@
+.dnb-table>tbody>tr>td,.dnb-table>thead>tr>th,.dnb-table>tr>td,.dnb-table>tr>th,.dnb-table__td,.dnb-table__th{border-spacing:0;font-size:1.125rem;font-size:var(--font-size-basis);line-height:1.5rem;line-height:var(--line-height-basis);word-break:keep-all}.dnb-table>thead>tr>th,.dnb-table>tr>th,.dnb-table__th{background-color:#fff;background-color:var(--color-white);color:#000;color:var(--color-black);font-weight:500;font-weight:var(--font-weight-medium);padding:3rem 1rem .5rem;padding:var(--spacing-x-large) var(--spacing-small) var(--spacing-x-small);vertical-align:bottom}.dnb-table>thead>tr>th:not([align]):not(.dnb-table--left):not(.dnb-table--right):not(.dnb-table--center),.dnb-table>tr>th:not([align]):not(.dnb-table--left):not(.dnb-table--right):not(.dnb-table--center),.dnb-table__th:not([align]):not(.dnb-table--left):not(.dnb-table--right):not(.dnb-table--center){text-align:inherit}@supports (-moz-appearance:meterbar) and (background-blend-mode:difference,normal){.dnb-table>thead>tr>th,.dnb-table>tr>th,.dnb-table__th{padding-bottom:calc(.5rem - .5px);padding-bottom:calc(var(--spacing-x-small) - .5px)}}.dnb-table>tbody>tr>td,.dnb-table>tr>td,.dnb-table>tr>th[scope=row],.dnb-table__td{color:currentColor;color:var(--theme-color-black-80,currentColor);padding:1rem;padding:var(--spacing-small);padding-bottom:1.188rem;padding-bottom:calc(var(--spacing-small)*1.188);padding-top:1.25rem;padding-top:calc(var(--spacing-small)*1.25)}.dnb-table .dnb-table__tr,.dnb-table .dnb-table__tr--odd,.dnb-table>tbody>tr{background-color:#fff;background-color:var(--color-white)}.dnb-table .dnb-table__tr--even,.dnb-table .dnb-table__tr:not(.dnb-table__tr--odd):nth-of-type(2n),.dnb-table>tbody>tr:not(.dnb-table__tr--odd):nth-of-type(2n){background-color:#f2f2f5;background-color:var(--color-lavender)}.dnb-table .dnb-table__tr,.dnb-table>tbody>tr,.dnb-table>thead>tr{position:relative}.dnb-table>.dnb-table__tr:last-of-type:after,.dnb-table>tbody>tr:last-of-type:after,.dnb-table>thead>tr:last-of-type:after{background-color:#ebebeb;background-color:var(--color-black-8);bottom:-1px;content:"";height:1px;left:0;position:absolute;right:0;z-index:1}.dnb-table .dnb-table__th.dnb-table--sortable,.dnb-table>thead>tr>th.dnb-table--sortable{color:#14555a;color:var(--color-emerald-green)}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor,.dnb-table .dnb-table__th.dnb-table--sortable .dnb-button,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-button{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;-webkit-box-shadow:none;box-shadow:none;color:inherit;font-size:inherit;font-weight:500;font-weight:var(--font-weight-medium);line-height:1.5rem;line-height:var(--line-height-basis);margin:0;padding:0 .5rem 0 0;position:relative;text-align:inherit;z-index:1}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor>.dnb-icon,.dnb-table .dnb-table__th.dnb-table--sortable .dnb-button>.dnb-icon,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor>.dnb-icon,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-button>.dnb-icon{opacity:0;-webkit-transition:opacity .2s ease-out,-webkit-transform .5s ease-out;transition:opacity .2s ease-out,-webkit-transform .5s ease-out;transition:opacity .2s ease-out,transform .5s ease-out;transition:opacity .2s ease-out,transform .5s ease-out,-webkit-transform .5s ease-out}[data-visual-test-wrapper] .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor>.dnb-icon,[data-visual-test-wrapper] .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button>.dnb-icon,[data-visual-test-wrapper] .dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor>.dnb-icon,[data-visual-test-wrapper] .dnb-table>thead>tr>th.dnb-table--sortable .dnb-button>.dnb-icon{-webkit-transition:none;transition:none}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor .dnb-button__text,.dnb-table .dnb-table__th.dnb-table--sortable .dnb-button .dnb-button__text,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor .dnb-button__text,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-button .dnb-button__text{font-size:inherit;margin:0}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor .dnb-button__text:after,.dnb-table .dnb-table__th.dnb-table--sortable .dnb-button .dnb-button__text:after,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor .dnb-button__text:after,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-button .dnb-button__text:after{right:1rem}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor .dnb-button__icon,.dnb-table .dnb-table__th.dnb-table--sortable .dnb-button .dnb-button__icon,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor .dnb-button__icon,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-button .dnb-button__icon{-ms-flex-item-align:end;align-self:flex-end;margin-bottom:.25rem;margin-top:auto}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:not(:focus) .dnb-button__text:after,.dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:not(:focus) .dnb-button__text:after,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor:not(:focus) .dnb-button__text:after,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-button:not(:focus) .dnb-button__text:after{color:#14555a;color:var(--color-emerald-green);opacity:1}html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:hover[disabled],html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:hover[disabled],html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor:hover[disabled],html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-button:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-button:hover:not([disabled]){color:#007272;color:var(--color-sea-green)}html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:hover:not([disabled]):not(:focus) .dnb-icon,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:hover:not([disabled]):not(:focus) .dnb-icon,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor:hover:not([disabled]):not(:focus) .dnb-icon,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-button:hover:not([disabled]):not(:focus) .dnb-icon{opacity:1}html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:hover:not([disabled]) .dnb-button__text:after,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:hover:not([disabled]) .dnb-button__text:after,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor:hover:not([disabled]) .dnb-button__text:after,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-button:hover:not([disabled]) .dnb-button__text:after{opacity:0}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:focus[disabled],.dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:focus[disabled],.dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor:focus[disabled],.dnb-table>thead>tr>th.dnb-table--sortable .dnb-button:focus[disabled],html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:focus[disabled],html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:focus[disabled],html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor:focus[disabled],html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-button:focus[disabled]{cursor:not-allowed}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:focus:not([disabled]):before,.dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:focus:not([disabled]):before,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor:focus:not([disabled]):before,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-button:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-button:focus:not([disabled]):before{bottom:-.5rem;content:"";left:-1rem;position:absolute;right:.5rem;right:-.5rem;top:-.5rem}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:focus:not([disabled]) .dnb-icon,.dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:focus:not([disabled]) .dnb-icon,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor:focus:not([disabled]) .dnb-icon,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-button:focus:not([disabled]) .dnb-icon,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:focus:not([disabled]) .dnb-icon,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:focus:not([disabled]) .dnb-icon,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor:focus:not([disabled]) .dnb-icon,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-button:focus:not([disabled]) .dnb-icon{opacity:1}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active[disabled],.dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active[disabled],.dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor:active[disabled],.dnb-table>thead>tr>th.dnb-table--sortable .dnb-button:active[disabled],html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active[disabled],html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active[disabled],html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor:active[disabled],html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-button:active[disabled]{cursor:not-allowed}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled]),.dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled]),.dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor:active:not([disabled]),.dnb-table>thead>tr>th.dnb-table--sortable .dnb-button:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-button:active:not([disabled]){color:#14555a;color:var(--color-emerald-green)}html[data-whatinput=mouse] .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled]):before,html[data-whatinput=mouse] .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled]):before,html[data-whatinput=mouse] .dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor:active:not([disabled]):before,html[data-whatinput=mouse] .dnb-table>thead>tr>th.dnb-table--sortable .dnb-button:active:not([disabled]):before,html[data-whatinput=mouse] html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled]):before,html[data-whatinput=mouse] html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled]):before,html[data-whatinput=mouse] html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor:active:not([disabled]):before,html[data-whatinput=mouse] html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-button:active:not([disabled]):before{--border-color:var(--color-emerald-green);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}@media screen and (-ms-high-contrast:none){html[data-whatinput=mouse] .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled]):before,html[data-whatinput=mouse] .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled]):before,html[data-whatinput=mouse] .dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor:active:not([disabled]):before,html[data-whatinput=mouse] .dnb-table>thead>tr>th.dnb-table--sortable .dnb-button:active:not([disabled]):before,html[data-whatinput=mouse] html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled]):before,html[data-whatinput=mouse] html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled]):before,html[data-whatinput=mouse] html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor:active:not([disabled]):before,html[data-whatinput=mouse] html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-button:active:not([disabled]):before{-webkit-box-shadow:0 0 0 .125rem #14555a;box-shadow:0 0 0 .125rem #14555a;-webkit-box-shadow:0 0 0 .125rem var(--color-emerald-green);box-shadow:0 0 0 .125rem var(--color-emerald-green)}}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled]):before,.dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled]):before,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor:active:not([disabled]):before,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-button:active:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor:active:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-button:active:not([disabled]):before{border-radius:inherit;bottom:0;height:inherit;left:-.5rem;outline:none;top:0;z-index:1}html[data-whatinput=touch] .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled]):before,html[data-whatinput=touch] .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled]):before,html[data-whatinput=touch] .dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor:active:not([disabled]):before,html[data-whatinput=touch] .dnb-table>thead>tr>th.dnb-table--sortable .dnb-button:active:not([disabled]):before,html[data-whatinput=touch] html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled]):before,html[data-whatinput=touch] html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled]):before,html[data-whatinput=touch] html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor:active:not([disabled]):before,html[data-whatinput=touch] html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-button:active:not([disabled]):before{--border-color:var(--color-emerald-green);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}@media screen and (-ms-high-contrast:none){html[data-whatinput=touch] .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled]):before,html[data-whatinput=touch] .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled]):before,html[data-whatinput=touch] .dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor:active:not([disabled]):before,html[data-whatinput=touch] .dnb-table>thead>tr>th.dnb-table--sortable .dnb-button:active:not([disabled]):before,html[data-whatinput=touch] html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled]):before,html[data-whatinput=touch] html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled]):before,html[data-whatinput=touch] html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor:active:not([disabled]):before,html[data-whatinput=touch] html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-button:active:not([disabled]):before{-webkit-box-shadow:0 0 0 .125rem #14555a;box-shadow:0 0 0 .125rem #14555a;-webkit-box-shadow:0 0 0 .125rem var(--color-emerald-green);box-shadow:0 0 0 .125rem var(--color-emerald-green)}}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled]):before,.dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled]):before,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor:active:not([disabled]):before,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-button:active:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor:active:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-button:active:not([disabled]):before{bottom:-.5rem;content:"";left:-1rem;position:absolute;right:.5rem;right:-.5rem;top:-.5rem}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:hover:focus:not(:active) .dnb-button__text:after,.dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:hover:focus:not(:active) .dnb-button__text:after,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor:hover:focus:not(:active) .dnb-button__text:after,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-button:hover:focus:not(:active) .dnb-button__text:after{visibility:hidden}.dnb-table .dnb-table__th.dnb-table--active .dnb-anchor:not(:hover) .dnb-button__text:after,.dnb-table .dnb-table__th.dnb-table--active .dnb-button:not(:hover) .dnb-button__text:after,.dnb-table>thead>tr>th.dnb-table--active .dnb-anchor:not(:hover) .dnb-button__text:after,.dnb-table>thead>tr>th.dnb-table--active .dnb-button:not(:hover) .dnb-button__text:after{opacity:0}.dnb-table .dnb-table__th.dnb-table--active .dnb-anchor .dnb-icon,.dnb-table .dnb-table__th.dnb-table--active .dnb-button .dnb-icon,.dnb-table>thead>tr>th.dnb-table--active .dnb-anchor .dnb-icon,.dnb-table>thead>tr>th.dnb-table--active .dnb-button .dnb-icon{opacity:1}html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--active .dnb-anchor:hover[disabled],html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--active .dnb-button:hover[disabled],html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--active .dnb-anchor:hover[disabled],html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--active .dnb-button:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--active .dnb-anchor:hover:not([disabled]) .dnb-button__text:after,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--active .dnb-button:hover:not([disabled]) .dnb-button__text:after,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--active .dnb-anchor:hover:not([disabled]) .dnb-button__text:after,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--active .dnb-button:hover:not([disabled]) .dnb-button__text:after{color:#007272;color:var(--color-sea-green);opacity:1}.dnb-table .dnb-table__th.dnb-table--active .dnb-anchor:hover:focus:not(:active) .dnb-button__text:after,.dnb-table .dnb-table__th.dnb-table--active .dnb-button:hover:focus:not(:active) .dnb-button__text:after,.dnb-table>thead>tr>th.dnb-table--active .dnb-anchor:hover:focus:not(:active) .dnb-button__text:after,.dnb-table>thead>tr>th.dnb-table--active .dnb-button:hover:focus:not(:active) .dnb-button__text:after{visibility:visible}html[data-whatinput=keyboard] .dnb-table .dnb-table__th.dnb-table--active .dnb-anchor:hover:focus .dnb-button__text:after,html[data-whatinput=keyboard] .dnb-table .dnb-table__th.dnb-table--active .dnb-button:hover:focus .dnb-button__text:after,html[data-whatinput=keyboard]
+.dnb-table>thead>tr>th.dnb-table--active .dnb-anchor:hover:focus .dnb-button__text:after,html[data-whatinput=keyboard] .dnb-table>thead>tr>th.dnb-table--active .dnb-button:hover:focus .dnb-button__text:after{visibility:hidden}.dnb-table .dnb-table__th.dnb-table--reversed .dnb-anchor .dnb-icon,.dnb-table .dnb-table__th.dnb-table--reversed .dnb-button .dnb-icon,.dnb-table>thead>tr>th.dnb-table--reversed .dnb-anchor .dnb-icon,.dnb-table>thead>tr>th.dnb-table--reversed .dnb-button .dnb-icon{-webkit-transform:rotate(180deg);transform:rotate(180deg);-webkit-transform-origin:50% 50%;transform-origin:50% 50%}.dnb-table .dnb-table__th.dnb-table--no-wrap,.dnb-table>tbody>tr>th.dnb-table--no-wrap,.dnb-table>thead>tr>th.dnb-table--no-wrap{white-space:nowrap}

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

@@ -0,0 +1,97 @@
+/*
+* Table theme
+*
+*/
+
+@import '../../../../style/themes/imports.scss';
+@import '../../../button/style/themes/button-mixins.scss';
+@import './table-basis.scss';
+
+.dnb-table {
+  // Header part
+  & > tr > th,
+  & > tr > td,
+  & > thead > tr > th,
+  & > tbody > tr > td,
+  &__th,
+  &__td {
+    font-size: var(--font-size-basis);
+    line-height: var(--line-height-basis);
+    border-spacing: 0;
+
+    word-break: keep-all;
+  }
+  /* stylelint-disable-next-line */
+  & > tr > th,
+  & > thead > tr > th,
+  &__th {
+    padding: var(--spacing-x-large) var(--spacing-small)
+      var(--spacing-x-small);
+
+    font-weight: var(--font-weight-medium);
+    color: var(--color-black);
+
+    vertical-align: bottom;
+
+    &:not([align]):not(.dnb-table--left):not(.dnb-table--right):not(.dnb-table--center) {
+      text-align: inherit;
+    }
+
+    @include IS_FF {
+      // to get the perfect height of pixles, to this:
+      padding-bottom: calc(var(--spacing-x-small) - 0.5px);
+    }
+
+    background-color: var(--color-white);
+  }
+
+  // Body part
+  /* stylelint-disable-next-line */
+  & > tr > td,
+  & > tbody > tr > td,
+  &__td,
+  & > tr > th[scope='row'] {
+    padding: var(--spacing-small);
+    padding-top: calc(var(--spacing-small) * 1.25);
+    padding-bottom: calc(var(--spacing-small) * 1.188); /* 19/16 */
+
+    color: var(--theme-color-black-80, currentColor);
+  }
+
+  // Needs a double & & for specificity
+  & > tbody > tr,
+  & &__tr,
+  & &__tr--odd {
+    background-color: var(--color-white);
+  }
+
+  // Needs a double & & for specificity
+  & > tbody > tr:not(#{&}__tr--odd):nth-of-type(2n),
+  & &__tr:not(#{&}__tr--odd):nth-of-type(2n),
+  & &__tr--even {
+    background-color: var(--color-lavender);
+  }
+
+  & > thead > tr,
+  & > tbody > tr,
+  & &__tr {
+    position: relative;
+  }
+
+  // Border
+  & > thead > tr:last-of-type::after,
+  & > tbody > tr:last-of-type::after,
+  & > &__tr:last-of-type::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: -1px;
+    z-index: 1; // lower than "tr.sticky"
+
+    height: 1px;
+    background-color: var(--color-black-8);
+  }
+
+  @include basisTableSortable();
+}

package/cjs/components/table/style/themes/table-basis.scss

@@ -0,0 +1,161 @@
+@import '../../../button/style/themes/button-mixins.scss';
+
+@mixin tableFocusRing() {
+  &::before {
+    content: '';
+    position: absolute;
+    top: -0.5rem;
+    bottom: -0.5rem;
+    left: -1rem;
+    right: 0.5rem;
+  }
+}
+
+@mixin basisTableSortable {
+  // sortable
+  & > thead > tr > th#{&}--sortable,
+  & &__th#{&}--sortable {
+    color: var(--color-emerald-green);
+
+    .dnb-anchor,
+    .dnb-button {
+      > .dnb-icon {
+        opacity: 0;
+        transition: opacity 200ms ease-out, transform 500ms ease-out;
+        [data-visual-test-wrapper] & {
+          transition: none;
+        }
+      }
+
+      position: relative;
+      z-index: 1;
+      align-items: flex-end;
+
+      // reset anchor
+      box-shadow: none;
+
+      line-height: var(--line-height-basis);
+
+      margin: 0;
+      padding: 0;
+      padding-right: 0.5rem;
+
+      color: inherit;
+      font-weight: var(--font-weight-medium);
+      text-align: inherit;
+      font-size: inherit;
+
+      .dnb-button__text {
+        margin: 0;
+        font-size: inherit;
+
+        // underline
+        &::after {
+          right: 1rem;
+        }
+      }
+
+      .dnb-button__icon {
+        align-self: flex-end;
+        margin-top: auto;
+        margin-bottom: 0.25rem;
+      }
+
+      // underline
+      &:not(:focus) .dnb-button__text::after {
+        opacity: 1;
+        color: var(--color-emerald-green);
+      }
+
+      @include hover() {
+        color: var(--color-sea-green);
+
+        &:not(:focus) .dnb-icon {
+          opacity: 1;
+        }
+
+        // hide underline
+        .dnb-button__text::after {
+          opacity: 0;
+        }
+      }
+
+      @include focus() {
+        @include tableFocusRing();
+
+        // focus ring
+        &::before {
+          right: -0.5rem;
+        }
+        .dnb-icon {
+          opacity: 1;
+        }
+      }
+
+      @include active() {
+        @include buttonFocusRing('mouse'); // also, make a mouse ring
+        @include buttonFocusRing('touch'); // also, make a touch ring
+
+        @include tableFocusRing();
+
+        // focus ring
+        &::before {
+          right: -0.5rem;
+        }
+
+        color: var(--color-emerald-green);
+      }
+
+      // webkit fix
+      &:hover:focus:not(:active) .dnb-button__text::after {
+        visibility: hidden;
+      }
+    }
+  }
+  & > thead > tr > th#{&}--active,
+  & &__th#{&}--active {
+    .dnb-anchor,
+    .dnb-button {
+      // hide underline
+      &:not(:hover) .dnb-button__text::after {
+        opacity: 0;
+      }
+      .dnb-icon {
+        opacity: 1;
+      }
+
+      // and underline on hover
+      @include hover() {
+        .dnb-button__text::after {
+          color: var(--color-sea-green);
+          opacity: 1;
+        }
+      }
+
+      // webkit fix
+      &:hover:focus:not(:active) .dnb-button__text::after {
+        visibility: visible;
+      }
+      html[data-whatinput='keyboard']
+        &:hover:focus
+        .dnb-button__text::after {
+        visibility: hidden;
+      }
+    }
+  }
+  & > thead > tr > th#{&}--reversed,
+  & &__th#{&}--reversed {
+    .dnb-anchor,
+    .dnb-button {
+      .dnb-icon {
+        transform: rotate(180deg);
+        transform-origin: 50% 50%;
+      }
+    }
+  }
+  & > thead > tr > th#{&}--no-wrap,
+  & > tbody > tr > th#{&}--no-wrap,
+  & &__th#{&}--no-wrap {
+    white-space: nowrap;
+  }
+}

package/cjs/components/table/style/themes/ui.d.ts

@@ -0,0 +1 @@
+export {};

package/cjs/components/table/style/themes/ui.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("./dnb-table-theme-ui.min.css");

package/cjs/components/table/style.d.ts

@@ -0,0 +1 @@
+export {};

package/cjs/components/table/style.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("./style/dnb-table.min.css");

package/cjs/components/tag/Tag.js

@@ -31,6 +31,8 @@ var _TagGroup = _interopRequireDefault(require("./TagGroup"));
 
 var _TagContext = require("./TagContext");
 
+var _SpacingHelper = require("../space/SpacingHelper");
+
 var _IconPrimary;
 
 var _excluded = ["className", "skeleton", "children", "text", "hasLabel", "onClick", "onDelete", "omitOnKeyUpDeleteEvent"];
@@ -56,22 +58,25 @@ var Tag = function Tag(localProps) {
 
   var tagGroupContext = _react.default.useContext(_TagContext.TagGroupContext);
 
-  var _usePropsWithContext = (0, _hooks.usePropsWithContext)(localProps, defaultProps, context === null || context === void 0 ? void 0 : (_context$translation = context.translation) === null || _context$translation === void 0 ? void 0 : _context$translation.Tag, context === null || context === void 0 ? void 0 : context.Tag, tagGroupContext),
-      className = _usePropsWithContext.className,
-      skeleton = _usePropsWithContext.skeleton,
-      children = _usePropsWithContext.children,
-      text = _usePropsWithContext.text,
-      hasLabel = _usePropsWithContext.hasLabel,
-      onClick = _usePropsWithContext.onClick,
-      onDelete = _usePropsWithContext.onDelete,
-      omitOnKeyUpDeleteEvent = _usePropsWithContext.omitOnKeyUpDeleteEvent,
-      props = _objectWithoutProperties(_usePropsWithContext, _excluded);
+  var allProps = (0, _hooks.usePropsWithContext)(localProps, defaultProps, context === null || context === void 0 ? void 0 : (_context$translation = context.translation) === null || _context$translation === void 0 ? void 0 : _context$translation.Tag, context === null || context === void 0 ? void 0 : context.Tag, tagGroupContext);
+
+  var className = allProps.className,
+      skeleton = allProps.skeleton,
+      children = allProps.children,
+      text = allProps.text,
+      hasLabel = allProps.hasLabel,
+      onClick = allProps.onClick,
+      onDelete = allProps.onDelete,
+      omitOnKeyUpDeleteEvent = allProps.omitOnKeyUpDeleteEvent,
+      props = _objectWithoutProperties(allProps, _excluded);
 
   var content = text || children;
   var isClickable = !!onClick;
   var isRemovable = !!onDelete && !isClickable;
   var isInteractive = isClickable || isRemovable;
-  var tagClassNames = (0, _classnames.default)('dnb-tag', className, isInteractive && 'dnb-tag--interactive', isRemovable && 'dnb-tag--removable');
+  var spacingClasses = (0, _SpacingHelper.createSpacingClasses)(props);
+  var tagClassNames = (0, _classnames.default)('dnb-tag', className, spacingClasses, isInteractive && 'dnb-tag--interactive', isRemovable && 'dnb-tag--removable');
+  var buttonAttr = props;
 
   var isDeleteKeyboardEvent = function isDeleteKeyboardEvent(keyboardEvent) {
     return keyboardEvent.key === 'Backspace' || keyboardEvent.key === 'Delete';
@@ -83,8 +88,6 @@ var Tag = function Tag(localProps) {
     }
   };
 
-  var buttonAttr = props;
-
   if (!isInteractive) {
     buttonAttr.element = 'span';
     buttonAttr.type = '';

package/cjs/components/timeline/Timeline.js

@@ -33,6 +33,8 @@ var _hooks = require("../../shared/hooks");
 
 var _TimelineItem = _interopRequireDefault(require("./TimelineItem"));
 
+var _componentHelper = require("../../shared/component-helper");
+
 var _excluded = ["className", "skeleton", "data", "children"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -54,14 +56,15 @@ exports.defaultProps = defaultProps;
 var Timeline = function Timeline(localProps) {
   var context = _react.default.useContext(_Context.default);
 
-  var _usePropsWithContext = (0, _hooks.usePropsWithContext)(localProps, defaultProps, context === null || context === void 0 ? void 0 : context.Timeline, {
+  var allProps = (0, _hooks.usePropsWithContext)(localProps, defaultProps, context === null || context === void 0 ? void 0 : context.Timeline, {
     skeleton: context === null || context === void 0 ? void 0 : context.skeleton
-  }),
-      className = _usePropsWithContext.className,
-      skeleton = _usePropsWithContext.skeleton,
-      data = _usePropsWithContext.data,
-      childrenProp = _usePropsWithContext.children,
-      props = _objectWithoutProperties(_usePropsWithContext, _excluded);
+  });
+
+  var className = allProps.className,
+      skeleton = allProps.skeleton,
+      data = allProps.data,
+      childrenProp = allProps.children,
+      props = _objectWithoutProperties(allProps, _excluded);
 
   var spacingClasses = (0, _SpacingHelper.createSpacingClasses)(props);
   var children = childrenProp;
@@ -75,6 +78,7 @@ var Timeline = function Timeline(localProps) {
     });
   }
 
+  (0, _componentHelper.validateDOMAttributes)(allProps, props);
   return _react.default.createElement("div", _extends({
     className: (0, _classnames.default)('dnb-timeline', spacingClasses, className),
     "data-testid": "timeline"

package/cjs/components/timeline/TimelineItem.d.ts

@@ -13,13 +13,13 @@ export interface TimelineItemProps {
      */
     iconAlt?: string;
     /**
-     * Text displaying the name of the timeline item.
+     * Text displaying the title of the timeline item.
      */
-    name: React.ReactNode & string;
+    title: React.ReactNode | string;
     /**
-     * Text displaying the date of the timeline item.
+     * Text displaying the subtitle of the timeline item.
      */
-    date?: React.ReactNode;
+    subtitle?: React.ReactNode | React.ReactNode[] | string | string[];
     /**
      * Text displaying info message of the timeline item.
      */
@@ -34,6 +34,14 @@ export interface TimelineItemProps {
      * Default: null
      */
     skeleton?: SkeletonShow;
+    /**
+     * @deprecated Please use `title`
+     */
+    name?: unknown;
+    /**
+     * @deprecated Please use `subtitle`
+     */
+    date?: unknown;
 }
 declare const TimelineItem: (localProps: TimelineItemProps) => JSX.Element;
 export default TimelineItem;

package/cjs/components/timeline/TimelineItem.js

@@ -15,6 +15,8 @@ exports.default = void 0;
 
 require("core-js/modules/es.function.name.js");
 
+require("core-js/modules/es.array.map.js");
+
 var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -37,7 +39,7 @@ var _hooks = require("../../shared/hooks");
 
 var _span;
 
-var _excluded = ["icon", "iconAlt", "name", "date", "infoMessage", "state", "skeleton"];
+var _excluded = ["icon", "iconAlt", "title", "subtitle", "infoMessage", "state", "skeleton"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -50,15 +52,15 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var defaultProps = {
   icon: null,
   iconAlt: null,
-  name: null,
-  date: null,
+  title: null,
+  subtitle: null,
   infoMessage: null,
   state: null,
   skeleton: false
 };
 
 var TimelineItem = function TimelineItem(localProps) {
-  var _span2, _span3, _span4, _FormStatus;
+  var _span2, _span3, _FormStatus;
 
   var context = _react.default.useContext(_Context.default);
 
@@ -66,18 +68,28 @@ var TimelineItem = function TimelineItem(localProps) {
       alt_label_completed = _context$translation$.alt_label_completed,
       alt_label_current = _context$translation$.alt_label_current,
       alt_label_upcoming = _context$translation$.alt_label_upcoming;
-
-  var _usePropsWithContext = (0, _hooks.usePropsWithContext)(localProps, defaultProps, context === null || context === void 0 ? void 0 : context.TimelineItem, {
+  var allProps = (0, _hooks.usePropsWithContext)(localProps, defaultProps, context === null || context === void 0 ? void 0 : context.TimelineItem, {
     skeleton: context === null || context === void 0 ? void 0 : context.skeleton
-  }),
-      icon = _usePropsWithContext.icon,
-      iconAlt = _usePropsWithContext.iconAlt,
-      name = _usePropsWithContext.name,
-      date = _usePropsWithContext.date,
-      infoMessage = _usePropsWithContext.infoMessage,
-      state = _usePropsWithContext.state,
-      skeleton = _usePropsWithContext.skeleton,
-      props = _objectWithoutProperties(_usePropsWithContext, _excluded);
+  });
+
+  if (allProps.name) {
+    delete allProps.name;
+    allProps.title = allProps.name;
+  }
+
+  if (allProps.date) {
+    delete allProps.date;
+    allProps.subtitle = allProps.date;
+  }
+
+  var icon = allProps.icon,
+      iconAlt = allProps.iconAlt,
+      title = allProps.title,
+      subtitle = allProps.subtitle,
+      infoMessage = allProps.infoMessage,
+      state = allProps.state,
+      skeleton = allProps.skeleton,
+      props = _objectWithoutProperties(allProps, _excluded);
 
   var stateIsCompleted = state === 'completed';
   var stateIsCurrent = state === 'current';
@@ -101,26 +113,50 @@ var TimelineItem = function TimelineItem(localProps) {
     }));
   };
 
-  var TimelineItemName = function TimelineItemName() {
+  var TimelineItemTitle = function TimelineItemTitle() {
     return _span2 || (_span2 = _react.default.createElement("span", {
-      className: "dnb-timeline__item__label__name",
-      "data-testid": "timeline-item-label-name"
-    }, name));
+      className: "dnb-timeline__item__label__title",
+      "data-testid": "timeline-item-label-title"
+    }, title));
   };
 
   var TimelineItemLabel = function TimelineItemLabel() {
     return _span3 || (_span3 = _react.default.createElement("span", {
       className: "dnb-timeline__item__label"
-    }, _react.default.createElement(TimelineItemIcon, null), _react.default.createElement(TimelineItemName, null)));
+    }, _react.default.createElement(TimelineItemIcon, null), _react.default.createElement(TimelineItemTitle, null)));
+  };
+
+  var getSubtitle = function getSubtitle() {
+    var TimelineItemSubtitle = function TimelineItemSubtitle(_ref) {
+      var subtitle = _ref.subtitle;
+      return _react.default.createElement("div", {
+        className: "dnb-timeline__item__content__subtitle",
+        "data-testid": "timeline-item-content-subtitle"
+      }, subtitle);
+    };
+
+    if (!subtitle) {
+      return null;
+    }
+
+    if (Array.isArray(subtitle)) {
+      return subtitle.map(function (subtitle, i) {
+        return _react.default.createElement(TimelineItemSubtitle, {
+          key: i,
+          subtitle: subtitle
+        });
+      });
+    }
+
+    return _react.default.createElement(TimelineItemSubtitle, {
+      subtitle: subtitle
+    });
   };
 
   var TimelineItemContent = function TimelineItemContent() {
     return _react.default.createElement("div", {
       className: "dnb-timeline__item__content"
-    }, date && (_span4 || (_span4 = _react.default.createElement("span", {
-      className: "dnb-timeline__item__content__date",
-      "data-testid": "timeline-item-content-date"
-    }, date))), infoMessage && (_FormStatus || (_FormStatus = _react.default.createElement(_FormStatus2.default, {
+    }, getSubtitle(), infoMessage && (_FormStatus || (_FormStatus = _react.default.createElement(_FormStatus2.default, {
       text: infoMessage,
       state: "info",
       className: "dnb-timeline__item__content__info",

package/cjs/components/timeline/style/_timeline.scss

@@ -22,13 +22,13 @@
         justify-content: center;
         padding: 0;
       }
-      &__name {
+      &__title {
         cursor: text;
       }
     }
     &__content {
       padding-bottom: var(--spacing-small);
-      &__date {
+      &__subtitle {
         cursor: text;
         font-size: var(--font-size-x-small);
         font-weight: var(--font-weight-basis);

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

@@ -157,7 +157,7 @@
                 box-shadow: inset 0 0 0 1px #333;
         -webkit-box-shadow: inset 0 0 0 1px var(--color-black-80);
                 box-shadow: inset 0 0 0 1px var(--color-black-80); } }
-  .dnb-timeline__item__label__name {
+  .dnb-timeline__item__label__title {
     margin-left: 1.25rem;
     margin-left: calc(
     calc(
@@ -189,7 +189,7 @@
   .dnb-timeline__item--completed .dnb-timeline__item__content {
     border-left: 1px solid #333;
     border-left: 1px solid var(--color-black-80); }
-  .dnb-timeline__item--completed .dnb-timeline__item__label__name {
+  .dnb-timeline__item--completed .dnb-timeline__item__label__title {
     color: #333;
     color: var(--color-black-80); }
   .dnb-timeline__item--current .dnb-timeline__item__content {
@@ -201,7 +201,7 @@
     padding-left: calc(2rem / 2 + 1rem);
     padding-left: calc(var(--timeline-icon-width--medium)/2 + var(--timeline-border-spacing));
     padding-left: calc(var(--timeline-icon-width--medium) / 2 + var(--timeline-border-spacing)); }
-  .dnb-timeline__item--current .dnb-timeline__item__label__name {
+  .dnb-timeline__item--current .dnb-timeline__item__label__title {
     margin-left: 1rem;
     margin-left: var(--timeline-border-spacing);
     font-weight: 500;
@@ -222,7 +222,7 @@
     border-radius: var(--timeline-icon-border-radius--medium); }
   .dnb-timeline__item--current {
     margin-left: 0; }
-  .dnb-timeline__item--upcoming .dnb-timeline__item__label__name {
+  .dnb-timeline__item--upcoming .dnb-timeline__item__label__title {
     font-weight: normal;
     font-weight: var(--font-weight-basis);
     color: #737373;
@@ -289,12 +289,12 @@
           -ms-flex-pack: center;
               justify-content: center;
       padding: 0; }
-    .dnb-timeline__item__label__name {
+    .dnb-timeline__item__label__title {
       cursor: text; }
   .dnb-timeline__item__content {
     padding-bottom: 1rem;
     padding-bottom: var(--spacing-small); }
-    .dnb-timeline__item__content__date {
+    .dnb-timeline__item__content__subtitle {
       cursor: text;
       font-size: 0.875rem;
       font-size: var(--font-size-x-small);