@dnb/eufemia 9.37.0 → 9.38.0-beta.1

package/components/table/TableTh.d.ts

@@ -1,14 +1,36 @@
 import React from 'react';
+import TableSortButton from './TableSortButton';
+import TableHelpButton from './TableHelpButton';
+export declare type TableThChildren = React.ReactNode | ReturnType<typeof TableSortButton> | ReturnType<typeof TableHelpButton>;
 export declare type TableThProps = {
     /**
-     * The content of the table header given as Tr.
+     * Defines the table header as sortable
+     * Default: false
+     */
+    sortable?: boolean;
+    /**
+     * Defines the sortable column as the current active
+     * Default: false
+     */
+    active?: boolean;
+    /**
+     * Defines the sortable column as in reversed order
+     * Default: false
+     */
+    reversed?: boolean;
+    /**
+     * If set to true, the header text will not wrap to new lines
+     * Default: false
      */
-    children: React.ReactNode;
+    noWrap?: boolean;
     /**
-     * Custom className on the component root
-     * Default: null
+     * The content of the table header given as Tr.
      */
-    className?: string;
+    children: TableThChildren | Array<TableThChildren>;
 };
-declare const Th: (componentProps: TableThProps & React.ThHTMLAttributes<HTMLTableCellElement>) => JSX.Element;
+declare function Th(componentProps: TableThProps & React.ThHTMLAttributes<HTMLTableCellElement>): JSX.Element;
+declare namespace Th {
+    var SortButton: typeof TableSortButton;
+    var HelpButton: typeof TableHelpButton;
+}
 export default Th;

package/components/table/TableTh.js

@@ -1,18 +1,23 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["className", "children"];
+var _excluded = ["className", "children", "sortable", "active", "reversed", "noWrap"];
 import React from 'react';
 import classnames from 'classnames';
-
-var Th = function Th(componentProps) {
+import TableSortButton from './TableSortButton';
+import TableHelpButton from './TableHelpButton';
+export default function Th(componentProps) {
   var className = componentProps.className,
       children = componentProps.children,
+      sortable = componentProps.sortable,
+      active = componentProps.active,
+      reversed = componentProps.reversed,
+      noWrap = componentProps.noWrap,
       props = _objectWithoutProperties(componentProps, _excluded);
 
   return React.createElement("th", _extends({
     role: "columnheader",
-    className: classnames('dnb-table__th', className)
+    className: classnames('dnb-table__th', className, sortable && 'dnb-table--sortable', active && 'dnb-table--active', reversed && 'dnb-table--reversed', noWrap && 'dnb-table--no-wrap')
   }, props), children);
-};
-
-export default Th;
+}
+Th.SortButton = TableSortButton;
+Th.HelpButton = TableHelpButton;

package/components/table/TableTr.d.ts

@@ -2,14 +2,12 @@ import React from 'react';
 import { TableTdProps } from './TableTd';
 export declare type TableTrProps = {
     /**
-     * The content of the component.
+     * The variant of the tr
      */
-    children: React.ReactElement<TableTdProps> | Array<React.ReactElement<TableTdProps>>;
+    variant?: 'even' | 'odd';
     /**
-     * Custom className on the component root
-     * Default: null
+     * The content of the component.
      */
-    className?: string;
+    children: React.ReactElement<TableTdProps> | Array<React.ReactElement<TableTdProps>>;
 };
-declare const Tr: (componentProps: TableTrProps & React.TableHTMLAttributes<HTMLTableRowElement>) => JSX.Element;
-export default Tr;
+export default function Tr(componentProps: TableTrProps & React.TableHTMLAttributes<HTMLTableRowElement>): JSX.Element;

package/components/table/TableTr.js

@@ -1,17 +1,69 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["className", "children"];
+var _excluded = ["variant", "children", "className"];
 import React from 'react';
 import classnames from 'classnames';
-
-var Tr = function Tr(componentProps) {
-  var className = componentProps.className,
+import TableContext from './TableContext';
+export default function Tr(componentProps) {
+  var variant = componentProps.variant,
       children = componentProps.children,
+      _className = componentProps.className,
       props = _objectWithoutProperties(componentProps, _excluded);
 
+  var _useHandleTrVariant = useHandleTrVariant({
+    variant: variant
+  }),
+      currentVariant = _useHandleTrVariant.currentVariant;
+
+  var className = classnames('dnb-table__tr', _className, currentVariant && "dnb-table__tr--".concat(currentVariant));
   return React.createElement("tr", _extends({
-    className: classnames('dnb-table__tr', className)
+    role: "row",
+    className: className
   }, props), children);
-};
+}
+
+function useHandleTrVariant(_ref) {
+  var variant = _ref.variant;
+  var tableContext = React.useContext(TableContext);
+  var countRef = tableContext === null || tableContext === void 0 ? void 0 : tableContext.trCountRef.current;
+
+  var increment = function increment() {
+    if (typeof countRef === 'undefined') {
+      return 0;
+    }
+
+    if (!variant || variant === 'even' && countRef.count % 2 === 1 || variant === 'odd' && countRef.count % 2 === 0) {
+      countRef.count++;
+    }
+
+    return countRef.count;
+  };
+
+  var decrement = function decrement() {
+    if (typeof countRef === 'undefined') {
+      return null;
+    }
+
+    if (!variant || variant === 'even' && countRef.count % 2 === 1 || variant === 'odd' && countRef.count % 2 === 0) {
+      countRef.count--;
+      tableContext === null || tableContext === void 0 ? void 0 : tableContext.forceRerender();
+    }
+  };
+
+  var count = React.useMemo(increment, [tableContext === null || tableContext === void 0 ? void 0 : tableContext.rerenderAlias]);
+  React.useEffect(function () {
+    return decrement;
+  }, [tableContext === null || tableContext === void 0 ? void 0 : tableContext.trCountRef]);
+  React.useEffect(function () {
+    tableContext === null || tableContext === void 0 ? void 0 : tableContext.forceRerender();
+  }, [variant]);
+  var currentVariant = variant;
+
+  if (!currentVariant) {
+    currentVariant = count % 2 ? 'odd' : 'even';
+  }
 
-export default Tr;
+  return {
+    currentVariant: currentVariant
+  };
+}

package/components/table/style/{themes/table-basis.scss → _table-header-buttons.scss}

@@ -1,4 +1,4 @@
-@import '../../../button/style/themes/button-mixins.scss';
+@import '../../button/style/themes/button-mixins.scss';
 
 @mixin tableFocusRing() {
   &::before {
@@ -11,14 +11,13 @@
   }
 }
 
-@mixin basisTableSortable {
+@mixin buttonsInTable {
   // sortable
   & > thead > tr > th#{&}--sortable,
   & &__th#{&}--sortable {
     color: var(--color-emerald-green);
 
-    .dnb-anchor,
-    .dnb-button {
+    .dnb-table__sort-button.dnb-button {
       > .dnb-icon {
         opacity: 0;
         transition: opacity 200ms ease-out, transform 500ms ease-out;
@@ -111,11 +110,31 @@
         visibility: hidden;
       }
     }
+
+    &[align='right'] {
+      padding-right: 0.5rem;
+
+      .dnb-table__sort-button.dnb-button {
+        flex-direction: row-reverse;
+
+        &--tertiary.dnb-button--icon-position-right {
+          padding-right: 0.5rem;
+
+          .dnb-button__text {
+            padding-right: 0;
+            &::after {
+              right: 0;
+            }
+          }
+        }
+      }
+    }
   }
+
+  // active
   & > thead > tr > th#{&}--active,
   & &__th#{&}--active {
-    .dnb-anchor,
-    .dnb-button {
+    .dnb-table__sort-button.dnb-button {
       // hide underline
       &:not(:hover) .dnb-button__text::after {
         opacity: 0;
@@ -145,8 +164,7 @@
   }
   & > thead > tr > th#{&}--reversed,
   & &__th#{&}--reversed {
-    .dnb-anchor,
-    .dnb-button {
+    .dnb-table__sort-button.dnb-button {
       .dnb-icon {
         transform: rotate(180deg);
         transform-origin: 50% 50%;
@@ -158,4 +176,11 @@
   & &__th#{&}--no-wrap {
     white-space: nowrap;
   }
+
+  & &__th,
+  & > thead > tr > th {
+    .dnb-table__help-button {
+      margin-left: 0.5rem;
+    }
+  }
 }

package/components/table/style/_table.scss

@@ -3,6 +3,8 @@
 *
 */
 
+@import './_table-header-buttons.scss';
+
 .dnb-table {
   display: table;
   table-layout: auto;
@@ -26,6 +28,7 @@
     height: 0;
   }
 
+  // deprecated – can be removed in v10
   &,
   &--left {
     text-align: left;
@@ -77,6 +80,7 @@
 
   /* stylelint-disable */
 
+  // deprecated – can be removed in v10
   &--small,
   &--small > tr > th,
   &--small > tr > td,
@@ -85,6 +89,7 @@
     font-size: var(--font-size-small);
   }
 
+  // deprecated – can be removed in v10
   & > tr#{&}--small > th,
   & > tr#{&}--small > td,
   & > thead > tr#{&}--small > th,
@@ -92,6 +97,7 @@
     font-size: var(--font-size-small);
   }
 
+  // deprecated – can be removed in v10
   & > tr > th#{&}--small,
   & > tr > td#{&}--small,
   & > thead > tr > th#{&}--small,
@@ -101,6 +107,7 @@
     font-size: var(--font-size-small);
   }
 
+  // deprecated – can be removed in v10
   &--x-small,
   &--x-small > tr > th,
   &--x-small > tr > td,
@@ -109,6 +116,7 @@
     font-size: var(--font-size-x-small);
   }
 
+  // deprecated – can be removed in v10
   & > tr#{&}--x-small > th,
   & > tr#{&}--x-small > td,
   & > thead > tr#{&}--x-small > th,
@@ -116,6 +124,7 @@
     font-size: var(--font-size-x-small);
   }
 
+  // deprecated – can be removed in v10
   & > tr > th#{&}--x-small,
   & > tr > td#{&}--x-small,
   & > thead > tr > th#{&}--x-small,
@@ -132,6 +141,8 @@
       -webkit-text-fill-color: var(--skeleton-color);
     }
   }
+
+  @include buttonsInTable();
 }
 
 // Reset Table spacing

package/components/table/style/dnb-table.css

@@ -72,6 +72,10 @@
 * Table component
 *
 */
+/*
+* Button mixins
+*
+*/
 .dnb-table {
   display: table;
   table-layout: auto;
@@ -171,6 +175,254 @@
   .dnb-table.dnb-skeleton > * {
     -webkit-text-fill-color: #ebebeb;
     -webkit-text-fill-color: var(--skeleton-color); }
+  .dnb-table > thead > tr > th.dnb-table--sortable,
+  .dnb-table .dnb-table__th.dnb-table--sortable {
+    color: #14555a;
+    color: var(--color-emerald-green); }
+    .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button,
+    .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button {
+      position: relative;
+      z-index: 1;
+      -webkit-box-align: end;
+          -ms-flex-align: end;
+              align-items: flex-end;
+      -webkit-box-shadow: none;
+              box-shadow: none;
+      line-height: 1.5rem;
+      line-height: var(--line-height-basis);
+      margin: 0;
+      padding: 0;
+      padding-right: 0.5rem;
+      color: inherit;
+      font-weight: 500;
+      font-weight: var(--font-weight-medium);
+      text-align: inherit;
+      font-size: inherit; }
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button > .dnb-icon,
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button > .dnb-icon {
+        opacity: 0;
+        -webkit-transition: opacity 200ms ease-out, -webkit-transform 500ms ease-out;
+        transition: opacity 200ms ease-out, -webkit-transform 500ms ease-out;
+        transition: opacity 200ms ease-out, transform 500ms ease-out;
+        transition: opacity 200ms ease-out, transform 500ms ease-out, -webkit-transform 500ms ease-out; }
+        [data-visual-test-wrapper] .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button > .dnb-icon, [data-visual-test-wrapper]
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button > .dnb-icon {
+          -webkit-transition: none;
+          transition: none; }
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text,
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text {
+        margin: 0;
+        font-size: inherit; }
+        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text::after,
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text::after {
+          right: 1rem; }
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__icon,
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__icon {
+        -ms-flex-item-align: end;
+            align-self: flex-end;
+        margin-top: auto;
+        margin-bottom: 0.25rem; }
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:not(:focus) .dnb-button__text::after,
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:not(:focus) .dnb-button__text::after {
+        opacity: 1;
+        color: #14555a;
+        color: var(--color-emerald-green); }
+      html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover[disabled], html:not([data-whatintent='touch'])
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover[disabled] {
+        cursor: not-allowed; }
+      html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]), html:not([data-whatintent='touch'])
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]) {
+        color: #007272;
+        color: var(--color-sea-green); }
+        html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]):not(:focus) .dnb-icon, html:not([data-whatintent='touch'])
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]):not(:focus) .dnb-icon {
+          opacity: 1; }
+        html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]) .dnb-button__text::after, html:not([data-whatintent='touch'])
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]) .dnb-button__text::after {
+          opacity: 0; }
+      .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 {
+        content: '';
+        position: absolute;
+        top: -0.5rem;
+        bottom: -0.5rem;
+        left: -1rem;
+        right: 0.5rem; }
+      .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 {
+        right: -0.5rem; }
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-icon,
+      html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-icon,
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-icon,
+      html:not([data-whatintent='touch'])
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-icon {
+        opacity: 1; }
+      .dnb-table > thead > tr > 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],
+      .dnb-table .dnb-table__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] {
+        cursor: not-allowed; }
+      .dnb-table > thead > tr > 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]),
+      .dnb-table .dnb-table__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]) {
+        color: #14555a;
+        color: var(--color-emerald-green); }
+        .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;
+          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(--color-emerald-green);
+            -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
+                    box-shadow: 0 0 0 0.125rem var(--border-color);
+            border-color: transparent; }
+            @media screen and (-ms-high-contrast: 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 {
+                -webkit-box-shadow: 0 0 0 0.125rem #14555a;
+                        box-shadow: 0 0 0 0.125rem #14555a;
+                -webkit-box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
+                        box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } }
+        .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;
+          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(--color-emerald-green);
+            -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
+                    box-shadow: 0 0 0 0.125rem var(--border-color);
+            border-color: transparent; }
+            @media screen and (-ms-high-contrast: 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 {
+                -webkit-box-shadow: 0 0 0 0.125rem #14555a;
+                        box-shadow: 0 0 0 0.125rem #14555a;
+                -webkit-box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
+                        box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } }
+        .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;
+          top: -0.5rem;
+          bottom: -0.5rem;
+          left: -1rem;
+          right: 0.5rem; }
+        .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 {
+          right: -0.5rem; }
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:focus:not(:active) .dnb-button__text::after,
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:focus:not(:active) .dnb-button__text::after {
+        visibility: hidden; }
+    .dnb-table > thead > tr > th.dnb-table--sortable[align='right'],
+    .dnb-table .dnb-table__th.dnb-table--sortable[align='right'] {
+      padding-right: 0.5rem; }
+      .dnb-table > thead > tr > th.dnb-table--sortable[align='right'] .dnb-table__sort-button.dnb-button,
+      .dnb-table .dnb-table__th.dnb-table--sortable[align='right'] .dnb-table__sort-button.dnb-button {
+        -webkit-box-orient: horizontal;
+        -webkit-box-direction: reverse;
+            -ms-flex-direction: row-reverse;
+                flex-direction: row-reverse; }
+        .dnb-table > thead > tr > th.dnb-table--sortable[align='right'] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right,
+        .dnb-table .dnb-table__th.dnb-table--sortable[align='right'] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right {
+          padding-right: 0.5rem; }
+          .dnb-table > thead > tr > th.dnb-table--sortable[align='right'] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right .dnb-button__text,
+          .dnb-table .dnb-table__th.dnb-table--sortable[align='right'] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right .dnb-button__text {
+            padding-right: 0; }
+            .dnb-table > thead > tr > th.dnb-table--sortable[align='right'] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right .dnb-button__text::after,
+            .dnb-table .dnb-table__th.dnb-table--sortable[align='right'] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right .dnb-button__text::after {
+              right: 0; }
+  .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:not(:hover) .dnb-button__text::after,
+  .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:not(:hover) .dnb-button__text::after {
+    opacity: 0; }
+  .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button .dnb-icon,
+  .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button .dnb-icon {
+    opacity: 1; }
+  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; }
+  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, 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 {
+    color: #007272;
+    color: var(--color-sea-green);
+    opacity: 1; }
+  .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus:not(:active) .dnb-button__text::after,
+  .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus:not(:active) .dnb-button__text::after {
+    visibility: visible; }
+  html[data-whatinput='keyboard']
+.dnb-table >
+thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus .dnb-button__text::after, html[data-whatinput='keyboard']
+  .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus .dnb-button__text::after {
+    visibility: hidden; }
+  .dnb-table > thead > tr > th.dnb-table--reversed .dnb-table__sort-button.dnb-button .dnb-icon,
+  .dnb-table .dnb-table__th.dnb-table--reversed .dnb-table__sort-button.dnb-button .dnb-icon {
+    -webkit-transform: rotate(180deg);
+            transform: rotate(180deg);
+    -webkit-transform-origin: 50% 50%;
+            transform-origin: 50% 50%; }
+  .dnb-table > thead > tr > th.dnb-table--no-wrap,
+  .dnb-table > tbody > tr > th.dnb-table--no-wrap,
+  .dnb-table .dnb-table__th.dnb-table--no-wrap {
+    white-space: nowrap; }
+  .dnb-table .dnb-table__th .dnb-table__help-button,
+  .dnb-table > thead > tr > th .dnb-table__help-button {
+    margin-left: 0.5rem; }
 
 .dnb-spacing .dnb-table p,
 .dnb-spacing .dnb-table ul,

package/components/table/style/dnb-table.min.css

@@ -1 +1,2 @@
-.dnb-table{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#333;color:var(--color-black-80,#333);font-family:DNB,sans-serif;font-family:var(--font-family-default);font-size:1rem;font-size:var(--font-size-small);font-style:normal;font-weight:400;font-weight:var(--font-weight-basis);line-height:1.5rem;line-height:var(--line-height-basis);margin:0;padding:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;word-break:break-word}.dnb-table *,.dnb-table :after,.dnb-table :before{background-repeat:no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}.dnb-table :after,.dnb-table :before{text-decoration:inherit;vertical-align:inherit}.dnb-table{border-collapse:collapse;border-spacing:0;display:table;margin-bottom:1rem;margin-bottom:var(--spacing-small);margin-top:0;overflow:auto;table-layout:auto;width:100%}.dnb-table--fixed{table-layout:fixed}.dnb-table__sticky-helper>td{display:block;height:0;overflow:hidden;padding:0!important}.dnb-table,.dnb-table--left{text-align:left}.dnb-table--right{text-align:right}.dnb-table--center{text-align:center}.dnb-table>caption{caption-side:bottom;font-size:1rem;font-size:var(--font-size-small);margin-top:.5rem;margin-top:var(--spacing-x-small)}.dnb-table tr.sticky th{position:sticky;top:0;top:var(--table-top,0);z-index:2}.dnb-table tr.sticky th:before{bottom:0;-webkit-box-shadow:0 -2px 12px 8px rgba(51,51,51,.08);box-shadow:0 -2px 12px 8px rgba(51,51,51,.08);-webkit-box-shadow:var(--shadow-default-x) -2px 12px 8px var(--shadow-default-color);box-shadow:var(--shadow-default-x) -2px 12px 8px var(--shadow-default-color);-webkit-clip-path:inset(6px 0 -48px 0);clip-path:inset(6px 0 -48px 0);content:"";height:6px;left:0;opacity:0;position:absolute;right:0;-webkit-transition:opacity .3s ease-out;transition:opacity .3s ease-out}[data-visual-test-wrapper] .dnb-table tr.sticky th:before{-webkit-transition:none;transition:none}.dnb-table tr.sticky.show-shadow th:before{opacity:1}.dnb-table--small,.dnb-table--small>tbody>tr>td,.dnb-table--small>thead>tr>th,.dnb-table--small>tr>td,.dnb-table--small>tr>th,.dnb-table>tbody>tr.dnb-table--small>td,.dnb-table>tbody>tr>td.dnb-table--small,.dnb-table>thead>tr.dnb-table--small>th,.dnb-table>thead>tr>th.dnb-table--small,.dnb-table>tr.dnb-table--small>td,.dnb-table>tr.dnb-table--small>th,.dnb-table>tr>td.dnb-table--small,.dnb-table>tr>th.dnb-table--small,.dnb-table__td.dnb-table--small,.dnb-table__th.dnb-table--small{font-size:1rem;font-size:var(--font-size-small)}.dnb-table--x-small,.dnb-table--x-small>tbody>tr>td,.dnb-table--x-small>thead>tr>th,.dnb-table--x-small>tr>td,.dnb-table--x-small>tr>th,.dnb-table>tbody>tr.dnb-table--x-small>td,.dnb-table>tbody>tr>td.dnb-table--x-small,.dnb-table>thead>tr.dnb-table--x-small>th,.dnb-table>thead>tr>th.dnb-table--x-small,.dnb-table>tr.dnb-table--x-small>td,.dnb-table>tr.dnb-table--x-small>th,.dnb-table>tr>td.dnb-table--x-small,.dnb-table>tr>th.dnb-table--x-small,.dnb-table__td.dnb-table--x-small,.dnb-table__th.dnb-table--x-small{font-size:.875rem;font-size:var(--font-size-x-small)}.dnb-table.dnb-skeleton>*{-webkit-text-fill-color:#ebebeb;-webkit-text-fill-color:var(--skeleton-color)}.dnb-spacing .dnb-table dl,.dnb-spacing .dnb-table ol,.dnb-spacing .dnb-table p,.dnb-spacing .dnb-table pre,.dnb-spacing .dnb-table ul{margin-bottom:0;margin-top:0}
+.dnb-table{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#333;color:var(--color-black-80,#333);font-family:DNB,sans-serif;font-family:var(--font-family-default);font-size:1rem;font-size:var(--font-size-small);font-style:normal;font-weight:400;font-weight:var(--font-weight-basis);line-height:1.5rem;line-height:var(--line-height-basis);margin:0;padding:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;word-break:break-word}.dnb-table *,.dnb-table :after,.dnb-table :before{background-repeat:no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}.dnb-table :after,.dnb-table :before{text-decoration:inherit;vertical-align:inherit}.dnb-table{border-collapse:collapse;border-spacing:0;display:table;margin-bottom:1rem;margin-bottom:var(--spacing-small);margin-top:0;overflow:auto;table-layout:auto;width:100%}.dnb-table--fixed{table-layout:fixed}.dnb-table__sticky-helper>td{display:block;height:0;overflow:hidden;padding:0!important}.dnb-table,.dnb-table--left{text-align:left}.dnb-table--right{text-align:right}.dnb-table--center{text-align:center}.dnb-table>caption{caption-side:bottom;font-size:1rem;font-size:var(--font-size-small);margin-top:.5rem;margin-top:var(--spacing-x-small)}.dnb-table tr.sticky th{position:sticky;top:0;top:var(--table-top,0);z-index:2}.dnb-table tr.sticky th:before{bottom:0;-webkit-box-shadow:0 -2px 12px 8px rgba(51,51,51,.08);box-shadow:0 -2px 12px 8px rgba(51,51,51,.08);-webkit-box-shadow:var(--shadow-default-x) -2px 12px 8px var(--shadow-default-color);box-shadow:var(--shadow-default-x) -2px 12px 8px var(--shadow-default-color);-webkit-clip-path:inset(6px 0 -48px 0);clip-path:inset(6px 0 -48px 0);content:"";height:6px;left:0;opacity:0;position:absolute;right:0;-webkit-transition:opacity .3s ease-out;transition:opacity .3s ease-out}[data-visual-test-wrapper] .dnb-table tr.sticky th:before{-webkit-transition:none;transition:none}.dnb-table tr.sticky.show-shadow th:before{opacity:1}.dnb-table--small,.dnb-table--small>tbody>tr>td,.dnb-table--small>thead>tr>th,.dnb-table--small>tr>td,.dnb-table--small>tr>th,.dnb-table>tbody>tr.dnb-table--small>td,.dnb-table>tbody>tr>td.dnb-table--small,.dnb-table>thead>tr.dnb-table--small>th,.dnb-table>thead>tr>th.dnb-table--small,.dnb-table>tr.dnb-table--small>td,.dnb-table>tr.dnb-table--small>th,.dnb-table>tr>td.dnb-table--small,.dnb-table>tr>th.dnb-table--small,.dnb-table__td.dnb-table--small,.dnb-table__th.dnb-table--small{font-size:1rem;font-size:var(--font-size-small)}.dnb-table--x-small,.dnb-table--x-small>tbody>tr>td,.dnb-table--x-small>thead>tr>th,.dnb-table--x-small>tr>td,.dnb-table--x-small>tr>th,.dnb-table>tbody>tr.dnb-table--x-small>td,.dnb-table>tbody>tr>td.dnb-table--x-small,.dnb-table>thead>tr.dnb-table--x-small>th,.dnb-table>thead>tr>th.dnb-table--x-small,.dnb-table>tr.dnb-table--x-small>td,.dnb-table>tr.dnb-table--x-small>th,.dnb-table>tr>td.dnb-table--x-small,.dnb-table>tr>th.dnb-table--x-small,.dnb-table__td.dnb-table--x-small,.dnb-table__th.dnb-table--x-small{font-size:.875rem;font-size:var(--font-size-x-small)}.dnb-table.dnb-skeleton>*{-webkit-text-fill-color:#ebebeb;-webkit-text-fill-color:var(--skeleton-color)}.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-table__sort-button.dnb-button,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.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-table__sort-button.dnb-button>.dnb-icon,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.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-table__sort-button.dnb-button>.dnb-icon,[data-visual-test-wrapper] .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button>.dnb-icon{-webkit-transition:none;transition:none}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text{font-size:inherit;margin:0}.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{right:1rem}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__icon,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.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-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:#14555a;color:var(--color-emerald-green);opacity:1}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:#007272;color:var(--color-sea-green)}html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]):not(:focus) .dnb-icon,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.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-table__sort-button.dnb-button:hover:not([disabled]) .dnb-button__text:after,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]) .dnb-button__text:after{opacity:0}.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:-.5rem;content:"";left:-1rem;position:absolute;right:.5rem;right:-.5rem;top:-.5rem}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-icon,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-icon,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-icon,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-icon{opacity:1}.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:#14555a;color:var(--color-emerald-green)}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(--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-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{-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-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;height:inherit;left:-.5rem;outline:none;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(--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-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{-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-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:-.5rem;content:"";left:-1rem;position:absolute;right:.5rem;right:-.5rem;top:-.5rem}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:focus:not(:active) .dnb-button__text:after,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:focus:not(:active) .dnb-button__text:after{visibility:hidden}.dnb-table .dnb-table__th.dnb-table--sortable[align=right],.dnb-table>thead>tr>th.dnb-table--sortable[align=right]{padding-right:.5rem}.dnb-table .dnb-table__th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button,.dnb-table>thead>tr>th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.dnb-table .dnb-table__th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right,.dnb-table>thead>tr>th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right{padding-right:.5rem}.dnb-table .dnb-table__th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right .dnb-button__text,.dnb-table>thead>tr>th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right .dnb-button__text{padding-right:0}.dnb-table .dnb-table__th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right .dnb-button__text:after,.dnb-table>thead>tr>th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right .dnb-button__text:after{right:0}.dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:not(:hover) .dnb-button__text:after,.dnb-table>thead>tr>th.dnb-table--active .dnb-table__sort-button.dnb-button:not(:hover) .dnb-button__text:after{opacity:0}.dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button .dnb-icon,.dnb-table>thead>tr>th.dnb-table--active .dnb-table__sort-button.dnb-button .dnb-icon{opacity:1}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:#007272;color:var(--color-sea-green);opacity:1}.dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus:not(:active) .dnb-button__text:after,.dnb-table>thead>tr>th.dnb-table--active .dnb-table__sort-button.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-table__sort-button.dnb-button:hover:focus .dnb-button__text:after,html[data-whatinput=keyboard]
+.dnb-table>thead>tr>th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus .dnb-button__text:after{visibility:hidden}.dnb-table .dnb-table__th.dnb-table--reversed .dnb-table__sort-button.dnb-button .dnb-icon,.dnb-table>thead>tr>th.dnb-table--reversed .dnb-table__sort-button.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}.dnb-table .dnb-table__th .dnb-table__help-button,.dnb-table>thead>tr>th .dnb-table__help-button{margin-left:.5rem}.dnb-spacing .dnb-table dl,.dnb-spacing .dnb-table ol,.dnb-spacing .dnb-table p,.dnb-spacing .dnb-table pre,.dnb-spacing .dnb-table ul{margin-bottom:0;margin-top:0}