npm - @dnb/eufemia - Versions diffs - 10.22.0 → 10.24.0 - Mend

@dnb/eufemia 10.22.0 → 10.24.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1233) hide show

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

@@ -1,3 +1,3 @@
-.dnb-table{text-align:left}.dnb-table thead th,.dnb-table__th{background-color:var(--sb-color-white);font-weight:var(--font-weight-medium);padding:.5rem 1.5rem .25rem}.dnb-table .dnb-table__tr--even{background-color:var(--sb-color-gray-light-3)}.dnb-table tbody .dnb-table__th,.dnb-table tbody td,.dnb-table tbody th,.dnb-table__td{padding:1rem 1.5rem}.dnb-table thead+tbody .dnb-table__tr:first-child .dnb-table__td:after,.dnb-table thead+tbody .dnb-table__tr:first-child .dnb-table__th:after{border-top:var(--table-border);bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:-.0625rem;top:0;z-index:1}.dnb-table thead+tbody .dnb-table__tr:first-child .dnb-table__td:last-child:after,.dnb-table thead+tbody .dnb-table__tr:first-child .dnb-table__th:last-child:after{right:0}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button{color:var(--sb-color-violet)}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text:after,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text:after{bottom:-.0625rem;color:var(--sb-color-violet);left:0;opacity:0}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:not(:focus) .dnb-button__text:after,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:not(:focus) .dnb-button__text:after{color:var(--sb-color-violet)}html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover[disabled],html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]){color:var(--sb-color-violet)}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled],.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled],html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled],html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled]{cursor:not-allowed}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]),.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]){color:var(--sb-color-violet)}html[data-whatinput=mouse] .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html[data-whatinput=mouse] .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html[data-whatinput=mouse] html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html[data-whatinput=mouse] html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before{border-radius:inherit;bottom:0;content:"";height:inherit;left:-.5rem;outline:none;position:absolute;right:-.5rem;top:0;z-index:1}html[data-whatinput=touch] .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html[data-whatinput=touch] .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html[data-whatinput=touch] html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html[data-whatinput=touch] html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before{bottom:-.25rem;left:-.6875rem;right:-.4375rem;top:-.375rem}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled],.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled],html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled],html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled]{cursor:not-allowed}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):before,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):before{bottom:-.25rem;left:-.6875rem;right:-.4375rem;top:-.375rem}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):focus-visible,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):focus-visible,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):focus-visible,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):focus-visible{color:var(--sb-color-blue-dark)}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text:after,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text:after,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text:after,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text:after{visibility:hidden}html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:hover[disabled],html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--active .dnb-table__sort-button.dnb-button:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:not([disabled]) .dnb-button__text:after,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:not([disabled]) .dnb-button__text:after{color:var(--sb-color-violet)}.dnb-table,.dnb-table__container{--table-border-color:var(--sb-color-gray-light-2);--table-outline-color:var(--sb-color-gray-light-2);--table-accordion-border-color:var(--sb-color-gray-light-2);--table-accordion-header-background:var(--sb-color-gray-light-2);--table-accordion-icon-color:var(--sb-color-text);--table-accordion-icon-color--active:var(--sb-color-violet);--table-accordion-icon-color--disabled:var(--sb-color-gray-dark-2);--table-accordion-outline-color:var(--sb-color-violet);--table-accordion-outline-width:var(--table-accordion-border-width);--table-accordion-outline-background--active:var(
+.dnb-table{--table-th-background-color:var(--sb-color-white);text-align:left}.dnb-table thead th,.dnb-table__th{font-weight:var(--font-weight-medium);padding:.5rem 1.5rem .25rem}.dnb-table .dnb-table__tr--even{background-color:var(--sb-color-gray-light-3)}.dnb-table tbody .dnb-table__th,.dnb-table tbody td,.dnb-table tbody th,.dnb-table__td{padding:1rem 1.5rem}.dnb-table thead+tbody .dnb-table__tr:first-child .dnb-table__td:after,.dnb-table thead+tbody .dnb-table__tr:first-child .dnb-table__th:after{border-top:var(--table-border);bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:-.0625rem;top:0;z-index:1}.dnb-table thead+tbody .dnb-table__tr:first-child .dnb-table__td:last-child:after,.dnb-table thead+tbody .dnb-table__tr:first-child .dnb-table__th:last-child:after{right:0}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button{color:var(--sb-color-violet)}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text:after,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text:after{bottom:-.0625rem;color:var(--sb-color-violet);left:0;opacity:0}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:not(:focus) .dnb-button__text:after,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:not(:focus) .dnb-button__text:after{color:var(--sb-color-violet)}html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover[disabled],html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]){color:var(--sb-color-violet)}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled],.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled],html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled],html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled]{cursor:not-allowed}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]),.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]){color:var(--sb-color-violet)}html[data-whatinput=mouse] .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html[data-whatinput=mouse] .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html[data-whatinput=mouse] html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html[data-whatinput=mouse] html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before{border-radius:inherit;bottom:0;content:"";height:inherit;left:-.5rem;outline:none;position:absolute;right:-.5rem;top:0;z-index:1}html[data-whatinput=touch] .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html[data-whatinput=touch] .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html[data-whatinput=touch] html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html[data-whatinput=touch] html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before{bottom:-.25rem;left:-.6875rem;right:-.4375rem;top:-.375rem}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled],.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled],html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled],html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled]{cursor:not-allowed}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):before,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):before{bottom:-.25rem;left:-.6875rem;right:-.4375rem;top:-.375rem}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):focus-visible,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):focus-visible,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):focus-visible,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):focus-visible{color:var(--sb-color-blue-dark)}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text:after,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text:after,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text:after,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text:after{visibility:hidden}html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:hover[disabled],html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--active .dnb-table__sort-button.dnb-button:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:not([disabled]) .dnb-button__text:after,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:not([disabled]) .dnb-button__text:after{color:var(--sb-color-violet)}.dnb-table,.dnb-table__container{--table-border-color:var(--sb-color-gray-light-2);--table-outline-color:var(--sb-color-gray-light-2);--table-accordion-border-color:var(--sb-color-gray-light-2);--table-accordion-header-background:var(--sb-color-gray-light-2);--table-accordion-icon-color:var(--sb-color-text);--table-accordion-icon-color--active:var(--sb-color-violet);--table-accordion-icon-color--disabled:var(--sb-color-gray-dark-2);--table-accordion-outline-color:var(--sb-color-violet);--table-accordion-outline-width:var(--table-accordion-border-width);--table-accordion-outline-background--active:var(
     --sb-color-gray-light-2
   );background-color:var(--sb-color-white)}html[data-visual-test] .dnb-table,html[data-visual-test] .dnb-table__container{--table-border-color:blue;--table-outline-color:red;--table-accordion-border-color:green}

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

@@ -17,13 +17,14 @@
 }
 .dnb-table {
+  --table-th-background-color: var(--sb-color-white);
   text-align: left;
   &__th,
   & thead th {
     padding: 0.5rem 1.5rem 0.25rem;
     font-weight: var(--font-weight-medium);
-    background-color: var(--sb-color-white);
   }
   & &__tr--even {

package/es/components/table/style/themes/dnb-table-theme-ui.css CHANGED Viewed

@@ -9,6 +9,7 @@
  * Utilities
  */
 .dnb-table {
+  --table-th-background-color: var(--color-white);
   text-align: left;
   /* stylelint-disable */
   /* stylelint-enable */
@@ -20,7 +21,6 @@
   font-size: var(--font-size-basis);
   line-height: var(--line-height-basis);
   vertical-align: bottom;
-  background-color: var(--color-white);
 }
 .dnb-table__size--medium .dnb-table__th, .dnb-table__size--medium .dnb-table thead th {
   padding: 1.375rem 1rem 0.875rem;

package/es/components/table/style/themes/dnb-table-theme-ui.min.css CHANGED Viewed

	@@ -1 +1 @@
1	- .dnb-table{text-align:left}.dnb-table thead th,.dnb-table__th{~~background-~~color:var(--~~color-white);color:var(--~~theme-color-black-80,currentColor);font-size:var(--font-size-basis);font-weight:var(--font-weight-medium);line-height:var(--line-height-basis);padding:2rem 1rem 1rem;vertical-align:bottom}.dnb-table__size--medium .dnb-table thead th,.dnb-table__size--medium .dnb-table__th{font-size:var(--font-size-small);line-height:var(--line-height-small);padding:1.375rem 1rem .875rem}.dnb-table__size--medium .dnb-table thead th .dnb-button__text,.dnb-table__size--medium .dnb-table__th .dnb-button__text{line-height:inherit}.dnb-table__size--small .dnb-table thead th,.dnb-table__size--small .dnb-table__th{font-size:var(--font-size-small);line-height:var(--line-height-small);padding:1.25rem 1rem .5rem}.dnb-table tbody .dnb-table__th,.dnb-table tbody td,.dnb-table tbody th,.dnb-table__td{color:var(--theme-color-black-80,currentColor);font-size:var(--font-size-basis);line-height:var(--line-height-basis);padding:1rem;vertical-align:baseline}.dnb-table tbody .dnb-table__th,.dnb-table tbody th{padding:1rem;vertical-align:baseline}.dnb-table__size--medium .dnb-table tbody td,.dnb-table__size--medium .dnb-table tbody th,.dnb-table__size--medium tbody .dnb-table__td,.dnb-table__size--medium tbody .dnb-table__th{font-size:var(--font-size-small);line-height:var(--line-height-small);padding:.875rem 1rem}.dnb-table__size--small .dnb-table tbody td,.dnb-table__size--small .dnb-table tbody th,.dnb-table__size--small tbody .dnb-table__td,.dnb-table__size--small tbody .dnb-table__th{font-size:var(--font-size-small);line-height:var(--line-height-small);padding:.625rem 1rem}.dnb-table:not(.dnb-table--outline)>tbody{position:relative}.dnb-table:not(.dnb-table--outline)>tbody:after{border-bottom:var(--table-border);bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:-.0625rem;top:0;z-index:1}.dnb-table:not(.dnb-table--outline)>tbody:last-child:after{right:0}.dnb-table__container{background-color:var(--color-white)}.dnb-table,.dnb-table__container{--table-border-color:var(--color-black-8);--table-outline-color:var(--color-black-8)}html[data-visual-test] .dnb-table,html[data-visual-test] .dnb-table__container{--table-border-color:blue;--table-outline-color:red;--table-accordion-border-color:green}
1	+ .dnb-table{--table-th-background-color:var(--color-white);text-align:left}.dnb-table thead th,.dnb-table__th{color:var(--theme-color-black-80,currentColor);font-size:var(--font-size-basis);font-weight:var(--font-weight-medium);line-height:var(--line-height-basis);padding:2rem 1rem 1rem;vertical-align:bottom}.dnb-table__size--medium .dnb-table thead th,.dnb-table__size--medium .dnb-table__th{font-size:var(--font-size-small);line-height:var(--line-height-small);padding:1.375rem 1rem .875rem}.dnb-table__size--medium .dnb-table thead th .dnb-button__text,.dnb-table__size--medium .dnb-table__th .dnb-button__text{line-height:inherit}.dnb-table__size--small .dnb-table thead th,.dnb-table__size--small .dnb-table__th{font-size:var(--font-size-small);line-height:var(--line-height-small);padding:1.25rem 1rem .5rem}.dnb-table tbody .dnb-table__th,.dnb-table tbody td,.dnb-table tbody th,.dnb-table__td{color:var(--theme-color-black-80,currentColor);font-size:var(--font-size-basis);line-height:var(--line-height-basis);padding:1rem;vertical-align:baseline}.dnb-table tbody .dnb-table__th,.dnb-table tbody th{padding:1rem;vertical-align:baseline}.dnb-table__size--medium .dnb-table tbody td,.dnb-table__size--medium .dnb-table tbody th,.dnb-table__size--medium tbody .dnb-table__td,.dnb-table__size--medium tbody .dnb-table__th{font-size:var(--font-size-small);line-height:var(--line-height-small);padding:.875rem 1rem}.dnb-table__size--small .dnb-table tbody td,.dnb-table__size--small .dnb-table tbody th,.dnb-table__size--small tbody .dnb-table__td,.dnb-table__size--small tbody .dnb-table__th{font-size:var(--font-size-small);line-height:var(--line-height-small);padding:.625rem 1rem}.dnb-table:not(.dnb-table--outline)>tbody{position:relative}.dnb-table:not(.dnb-table--outline)>tbody:after{border-bottom:var(--table-border);bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:-.0625rem;top:0;z-index:1}.dnb-table:not(.dnb-table--outline)>tbody:last-child:after{right:0}.dnb-table__container{background-color:var(--color-white)}.dnb-table,.dnb-table__container{--table-border-color:var(--color-black-8);--table-outline-color:var(--color-black-8)}html[data-visual-test] .dnb-table,html[data-visual-test] .dnb-table__container{--table-border-color:blue;--table-outline-color:red;--table-accordion-border-color:green}

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

@@ -7,6 +7,8 @@
 @import '../table-mixins.scss';
 .dnb-table {
+  --table-th-background-color: var(--color-white);
   text-align: left;
   // head
@@ -22,8 +24,6 @@
     line-height: var(--line-height-basis);
     vertical-align: bottom;
-    background-color: var(--color-white);
     .dnb-table__size--medium & {
       // spacing
       padding: 1.375rem 1rem 0.875rem;

package/es/components/table/useTableAnimationHandler.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@ import React from 'react';
 import { TableAccordionTrProps } from './TableAccordionTr';
 export type useTableAnimationHandlerProps = {
     /**
-     * Ref to <div> inside the <tr> element being exapanded/collapsed
+     * Ref to <div> inside the <tr> element being expanded/collapsed
      */
     innerRef: React.MutableRefObject<HTMLDivElement>;
     /**

package/es/components/table/useTableAnimationHandler.js CHANGED Viewed

@@ -12,9 +12,9 @@ export function useTableAnimationHandler({
   const [ariaLive, setAriaLive] = React.useState(null);
   const open = Boolean(expanded || (tableAccordionContext === null || tableAccordionContext === void 0 ? void 0 : tableAccordionContext.trIsOpen));
   const scrollViewHandler = useCallback(clip => {
-    const scollView = getClosestScrollViewElement(trRef.current);
-    if (scollView instanceof HTMLElement) {
-      scollView.style.overflow = clip ? 'clip' : '';
+    const scrollView = getClosestScrollViewElement(trRef.current);
+    if (scrollView instanceof HTMLElement) {
+      scrollView.style.overflow = clip ? 'clip' : '';
     }
   }, [trRef]);
   const onOpen = useCallback(state => {

package/es/components/table/useTableAnimationHandler.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useTableAnimationHandler.js","names":["React","useCallback","getClosestScrollViewElement","useHeightAnimation","TableAccordionContext","useTableAnimationHandler","innerRef","trRef","expanded","noAnimation","tableAccordionContext","useContext","ariaLive","setAriaLive","useState","open","Boolean","trIsOpen","scrollViewHandler","clip","~~scollView~~","current","HTMLElement","style","overflow","onOpen","state","onAnimationStart","onAnimationEnd","_tableAccordionContex","_tableAccordionContex2","event","target","onOpened","call","onClosed","isInDOM","isAnimating","isVisibleParallax","firstPaintStyle","animate"],"sources":["../../../../src/components/table/useTableAnimationHandler.tsx"],"sourcesContent":["import React, { useCallback } from 'react'\nimport { getClosestScrollViewElement } from '../../shared/component-helper'\nimport { useHeightAnimation } from '../height-animation/useHeightAnimation'\nimport { TableAccordionTrProps } from './TableAccordionTr'\nimport { TableAccordionContext } from './TableContext'\n\nexport type useTableAnimationHandlerProps = {\n /*\n Ref to <div> inside the <tr> element being ~~exapanded~~/collapsed\n /\n innerRef: React.MutableRefObject<HTMLDivElement>\n /\n Ref to the <tr> element being clicked\n */\n trRef: React.MutableRefObject<HTMLTableRowElement>\n}\n\nexport function useTableAnimationHandler({\n innerRef,\n trRef,\n expanded,\n noAnimation,\n}: useTableAnimationHandlerProps & TableAccordionTrProps) {\n const tableAccordionContext = React.useContext(TableAccordionContext)\n const [ariaLive, setAriaLive] = React.useState(null)\n const open = Boolean(expanded \|\| tableAccordionContext?.trIsOpen)\n\n const scrollViewHandler = useCallback(\n (clip: boolean) => {\n const ~~scollView~~ = getClosestScrollViewElement(\n trRef.current\n ) as HTMLElement\n if (~~scollView~~ instanceof HTMLElement) {\n ~~scollView~~.style.overflow = clip ? 'clip' : ''\n }\n },\n [trRef]\n )\n\n const onOpen = useCallback((state) => {\n setAriaLive(state ? true : null)\n }, [])\n\n const onAnimationStart = useCallback(() => {\n scrollViewHandler(true)\n }, [scrollViewHandler])\n\n const onAnimationEnd = useCallback(\n (state) => {\n const event = { target: trRef.current }\n switch (state) {\n case 'opened':\n tableAccordionContext.onOpened?.(event)\n break\n\n case 'closed':\n tableAccordionContext.onClosed?.(event)\n break\n }\n\n scrollViewHandler(false)\n },\n [scrollViewHandler, tableAccordionContext, trRef]\n )\n\n const { isInDOM, isAnimating, isVisibleParallax, firstPaintStyle } =\n useHeightAnimation(innerRef, {\n open,\n animate: Boolean(\n !noAnimation && !tableAccordionContext?.noAnimation\n ),\n onOpen,\n onAnimationStart,\n onAnimationEnd,\n })\n\n return {\n ariaLive,\n isInDOM,\n isAnimating,\n isVisibleParallax,\n firstPaintStyle,\n }\n}\n\nexport default useTableAnimationHandler\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAC1C,SAASC,2BAA2B,QAAQ,+BAA+B;AAC3E,SAASC,kBAAkB,QAAQ,wCAAwC;AAE3E,SAASC,qBAAqB,QAAQ,gBAAgB;AAatD,OAAO,SAASC,wBAAwBA,CAAC;EACvCC,QAAQ;EACRC,KAAK;EACLC,QAAQ;EACRC;AACqD,CAAC,EAAE;EACxD,MAAMC,qBAAqB,GAAGV,KAAK,CAACW,UAAU,CAACP,qBAAqB,CAAC;EACrE,MAAM,CAACQ,QAAQ,EAAEC,WAAW,CAAC,GAAGb,KAAK,CAACc,QAAQ,CAAC,IAAI,CAAC;EACpD,MAAMC,IAAI,GAAGC,OAAO,CAACR,QAAQ,KAAIE,qBAAqB,aAArBA,qBAAqB,uBAArBA,qBAAqB,CAAEO,QAAQ,EAAC;EAEjE,MAAMC,iBAAiB,GAAGjB,WAAW,CAClCkB,IAAa,IAAK;IACjB,MAAMC,~~SAAS~~,GAAGlB,2BAA2B,~~CAC3CK~~,KAAK,CAACc,OACR,CAAgB;IAChB,IAAID,~~SAAS~~,YAAYE,WAAW,EAAE;~~MACpCF~~,~~SAAS~~,CAACG,KAAK,CAACC,QAAQ,GAAGL,IAAI,GAAG,MAAM,GAAG,EAAE;~~IAC/C~~;EACF,CAAC,EACD,CAACZ,KAAK,CACR,CAAC;EAED,MAAMkB,MAAM,GAAGxB,WAAW,CAAEyB,KAAK,IAAK;IACpCb,WAAW,CAACa,KAAK,GAAG,IAAI,GAAG,IAAI,CAAC;EAClC,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,gBAAgB,GAAG1B,WAAW,CAAC,MAAM;IACzCiB,iBAAiB,CAAC,IAAI,CAAC;EACzB,CAAC,EAAE,CAACA,iBAAiB,CAAC,CAAC;EAEvB,MAAMU,cAAc,GAAG3B,WAAW,CAC/ByB,KAAK,IAAK;IAAA,IAAAG,qBAAA,EAAAC,sBAAA;IACT,MAAMC,KAAK,GAAG;MAAEC,MAAM,EAAEzB,KAAK,CAACc;IAAQ,CAAC;IACvC,QAAQK,KAAK;MACX,KAAK,QAAQ;QACX,CAAAG,qBAAA,GAAAnB,qBAAqB,CAACuB,QAAQ,cAAAJ,qBAAA,uBAA9BA,qBAAA,CAAAK,IAAA,CAAAxB,qBAAqB,EAAYqB,KAAK,CAAC;QACvC;MAEF,KAAK,QAAQ;QACX,CAAAD,sBAAA,GAAApB,qBAAqB,CAACyB,QAAQ,cAAAL,sBAAA,uBAA9BA,sBAAA,CAAAI,IAAA,CAAAxB,qBAAqB,EAAYqB,KAAK,CAAC;QACvC;IACJ;IAEAb,iBAAiB,CAAC,KAAK,CAAC;EAC1B,CAAC,EACD,CAACA,iBAAiB,EAAER,qBAAqB,EAAEH,KAAK,CAClD,CAAC;EAED,MAAM;IAAE6B,OAAO;IAAEC,WAAW;IAAEC,iBAAiB;IAAEC;EAAgB,CAAC,GAChEpC,kBAAkB,CAACG,QAAQ,EAAE;IAC3BS,IAAI;IACJyB,OAAO,EAAExB,OAAO,CACd,CAACP,WAAW,IAAI,EAACC,qBAAqB,aAArBA,qBAAqB,eAArBA,qBAAqB,CAAED,WAAW,CACrD,CAAC;IACDgB,MAAM;IACNE,gBAAgB;IAChBC;EACF,CAAC,CAAC;EAEJ,OAAO;IACLhB,QAAQ;IACRwB,OAAO;IACPC,WAAW;IACXC,iBAAiB;IACjBC;EACF,CAAC;AACH;AAEA,eAAelC,wBAAwB"}
1	+ {"version":3,"file":"useTableAnimationHandler.js","names":["React","useCallback","getClosestScrollViewElement","useHeightAnimation","TableAccordionContext","useTableAnimationHandler","innerRef","trRef","expanded","noAnimation","tableAccordionContext","useContext","ariaLive","setAriaLive","useState","open","Boolean","trIsOpen","scrollViewHandler","clip","scrollView","current","HTMLElement","style","overflow","onOpen","state","onAnimationStart","onAnimationEnd","_tableAccordionContex","_tableAccordionContex2","event","target","onOpened","call","onClosed","isInDOM","isAnimating","isVisibleParallax","firstPaintStyle","animate"],"sources":["../../../../src/components/table/useTableAnimationHandler.tsx"],"sourcesContent":["import React, { useCallback } from 'react'\nimport { getClosestScrollViewElement } from '../../shared/component-helper'\nimport { useHeightAnimation } from '../height-animation/useHeightAnimation'\nimport { TableAccordionTrProps } from './TableAccordionTr'\nimport { TableAccordionContext } from './TableContext'\n\nexport type useTableAnimationHandlerProps = {\n /*\n Ref to <div> inside the <tr> element being expanded/collapsed\n /\n innerRef: React.MutableRefObject<HTMLDivElement>\n /\n Ref to the <tr> element being clicked\n */\n trRef: React.MutableRefObject<HTMLTableRowElement>\n}\n\nexport function useTableAnimationHandler({\n innerRef,\n trRef,\n expanded,\n noAnimation,\n}: useTableAnimationHandlerProps & TableAccordionTrProps) {\n const tableAccordionContext = React.useContext(TableAccordionContext)\n const [ariaLive, setAriaLive] = React.useState(null)\n const open = Boolean(expanded \|\| tableAccordionContext?.trIsOpen)\n\n const scrollViewHandler = useCallback(\n (clip: boolean) => {\n const scrollView = getClosestScrollViewElement(\n trRef.current\n ) as HTMLElement\n if (scrollView instanceof HTMLElement) {\n scrollView.style.overflow = clip ? 'clip' : ''\n }\n },\n [trRef]\n )\n\n const onOpen = useCallback((state) => {\n setAriaLive(state ? true : null)\n }, [])\n\n const onAnimationStart = useCallback(() => {\n scrollViewHandler(true)\n }, [scrollViewHandler])\n\n const onAnimationEnd = useCallback(\n (state) => {\n const event = { target: trRef.current }\n switch (state) {\n case 'opened':\n tableAccordionContext.onOpened?.(event)\n break\n\n case 'closed':\n tableAccordionContext.onClosed?.(event)\n break\n }\n\n scrollViewHandler(false)\n },\n [scrollViewHandler, tableAccordionContext, trRef]\n )\n\n const { isInDOM, isAnimating, isVisibleParallax, firstPaintStyle } =\n useHeightAnimation(innerRef, {\n open,\n animate: Boolean(\n !noAnimation && !tableAccordionContext?.noAnimation\n ),\n onOpen,\n onAnimationStart,\n onAnimationEnd,\n })\n\n return {\n ariaLive,\n isInDOM,\n isAnimating,\n isVisibleParallax,\n firstPaintStyle,\n }\n}\n\nexport default useTableAnimationHandler\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAC1C,SAASC,2BAA2B,QAAQ,+BAA+B;AAC3E,SAASC,kBAAkB,QAAQ,wCAAwC;AAE3E,SAASC,qBAAqB,QAAQ,gBAAgB;AAatD,OAAO,SAASC,wBAAwBA,CAAC;EACvCC,QAAQ;EACRC,KAAK;EACLC,QAAQ;EACRC;AACqD,CAAC,EAAE;EACxD,MAAMC,qBAAqB,GAAGV,KAAK,CAACW,UAAU,CAACP,qBAAqB,CAAC;EACrE,MAAM,CAACQ,QAAQ,EAAEC,WAAW,CAAC,GAAGb,KAAK,CAACc,QAAQ,CAAC,IAAI,CAAC;EACpD,MAAMC,IAAI,GAAGC,OAAO,CAACR,QAAQ,KAAIE,qBAAqB,aAArBA,qBAAqB,uBAArBA,qBAAqB,CAAEO,QAAQ,EAAC;EAEjE,MAAMC,iBAAiB,GAAGjB,WAAW,CAClCkB,IAAa,IAAK;IACjB,MAAMC,UAAU,GAAGlB,2BAA2B,CAC5CK,KAAK,CAACc,OACR,CAAgB;IAChB,IAAID,UAAU,YAAYE,WAAW,EAAE;MACrCF,UAAU,CAACG,KAAK,CAACC,QAAQ,GAAGL,IAAI,GAAG,MAAM,GAAG,EAAE;IAChD;EACF,CAAC,EACD,CAACZ,KAAK,CACR,CAAC;EAED,MAAMkB,MAAM,GAAGxB,WAAW,CAAEyB,KAAK,IAAK;IACpCb,WAAW,CAACa,KAAK,GAAG,IAAI,GAAG,IAAI,CAAC;EAClC,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,gBAAgB,GAAG1B,WAAW,CAAC,MAAM;IACzCiB,iBAAiB,CAAC,IAAI,CAAC;EACzB,CAAC,EAAE,CAACA,iBAAiB,CAAC,CAAC;EAEvB,MAAMU,cAAc,GAAG3B,WAAW,CAC/ByB,KAAK,IAAK;IAAA,IAAAG,qBAAA,EAAAC,sBAAA;IACT,MAAMC,KAAK,GAAG;MAAEC,MAAM,EAAEzB,KAAK,CAACc;IAAQ,CAAC;IACvC,QAAQK,KAAK;MACX,KAAK,QAAQ;QACX,CAAAG,qBAAA,GAAAnB,qBAAqB,CAACuB,QAAQ,cAAAJ,qBAAA,uBAA9BA,qBAAA,CAAAK,IAAA,CAAAxB,qBAAqB,EAAYqB,KAAK,CAAC;QACvC;MAEF,KAAK,QAAQ;QACX,CAAAD,sBAAA,GAAApB,qBAAqB,CAACyB,QAAQ,cAAAL,sBAAA,uBAA9BA,sBAAA,CAAAI,IAAA,CAAAxB,qBAAqB,EAAYqB,KAAK,CAAC;QACvC;IACJ;IAEAb,iBAAiB,CAAC,KAAK,CAAC;EAC1B,CAAC,EACD,CAACA,iBAAiB,EAAER,qBAAqB,EAAEH,KAAK,CAClD,CAAC;EAED,MAAM;IAAE6B,OAAO;IAAEC,WAAW;IAAEC,iBAAiB;IAAEC;EAAgB,CAAC,GAChEpC,kBAAkB,CAACG,QAAQ,EAAE;IAC3BS,IAAI;IACJyB,OAAO,EAAExB,OAAO,CACd,CAACP,WAAW,IAAI,EAACC,qBAAqB,aAArBA,qBAAqB,eAArBA,qBAAqB,CAAED,WAAW,CACrD,CAAC;IACDgB,MAAM;IACNE,gBAAgB;IAChBC;EACF,CAAC,CAAC;EAEJ,OAAO;IACLhB,QAAQ;IACRwB,OAAO;IACPC,WAAW;IACXC,iBAAiB;IACjBC;EACF,CAAC;AACH;AAEA,eAAelC,wBAAwB"}

package/es/components/tag/Tag.d.ts CHANGED Viewed

@@ -18,6 +18,11 @@ export interface TagProps {
      * Default: null
      */
     hasLabel?: boolean;
+    /**
+     * Defines the variant
+     * Default: 'default'
+     */
+    variant?: 'default' | 'clickable' | 'addable' | 'removable';
     /**
      * Custom className on the component root
      * Default: null
@@ -41,6 +46,7 @@ export interface TagProps {
     /**
      * Handle the delete event on 'tag' element
      * Default: null
+     * @deprecated Use `onClick` instead. With `variant='removable'`
      */
     onDelete?: React.MouseEventHandler<HTMLButtonElement>;
     /**
@@ -53,6 +59,11 @@ export interface TagProps {
      * Has translation in context
      */
     removeIconTitle?: string;
+    /**
+     * Internal property
+     * Has translation in context
+     */
+    addIconTitle?: string;
 }
 export declare const defaultProps: {
     skeleton: any;

package/es/components/tag/Tag.js CHANGED Viewed

@@ -3,7 +3,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _svg;
-const _excluded = ["className", "skeleton", "children", "text", "hasLabel", "onClick", "onDelete", "omitOnKeyUpDeleteEvent", "removeIconTitle"];
+const _excluded = ["className", "skeleton", "children", "text", "hasLabel", "variant", "onClick", "omitOnKeyUpDeleteEvent", "removeIconTitle", "addIconTitle"],
+  _excluded2 = ["onDelete"];
 import React from 'react';
 import classnames from 'classnames';
 import IconPrimary from '../icon-primary/IconPrimary';
@@ -18,43 +19,44 @@ export const defaultProps = {
   omitOnKeyUpDeleteEvent: false
 };
 const Tag = localProps => {
-  var _context$translation, _IconPrimary;
+  var _context$translation;
   const context = React.useContext(Context);
   const tagGroupContext = React.useContext(TagGroupContext);
   const allProps = extendPropsWithContext(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);
-  const {
+  const _handleDeprecatedBeha = handleDeprecatedBehaviour(allProps),
+    {
       className,
       skeleton,
       children,
       text,
       hasLabel,
+      variant = 'default',
       onClick,
-      onDelete,
       omitOnKeyUpDeleteEvent,
-      removeIconTitle
-    } = allProps,
-    props = _objectWithoutProperties(allProps, _excluded);
+      removeIconTitle,
+      addIconTitle
+    } = _handleDeprecatedBeha,
+    props = _objectWithoutProperties(_handleDeprecatedBeha, _excluded);
   const content = text || children;
-  const isClickable = !!onClick;
-  const isRemovable = !!onDelete && !isClickable;
-  const isInteractive = isClickable || isRemovable;
+  const addIcon = variant === 'removable' || variant === 'addable';
+  const isInteractive = variant !== 'default';
   const spacingClasses = createSpacingClasses(props);
-  const tagClassNames = classnames('dnb-tag', className, spacingClasses, isInteractive && 'dnb-tag--interactive', isRemovable && 'dnb-tag--removable');
+  const tagClassNames = classnames(`dnb-tag dnb-tag--${variant}`, className, spacingClasses, isInteractive && 'dnb-tag--interactive');
   const buttonAttr = props;
   const isDeleteKeyboardEvent = keyboardEvent => {
     return keyboardEvent.key === 'Backspace' || keyboardEvent.key === 'Delete';
   };
-  const handleKeyUp = event => {
-    if (onDelete && isDeleteKeyboardEvent(event)) {
-      onDelete(event);
+  const handleDeleteKeyUp = event => {
+    if (isDeleteKeyboardEvent(event) && onClick) {
+      onClick(event);
     }
   };
   if (!isInteractive) {
     buttonAttr.element = 'span';
     buttonAttr.type = '';
   }
-  if (isRemovable) {
-    buttonAttr.icon = getDeleteIcon();
+  if (addIcon) {
+    buttonAttr.icon = getIcon(variant === 'addable' ? addIconTitle : removeIconTitle);
   }
   if (!tagGroupContext && !hasLabel) {
     warn(`Tag group required: A Tag requires a Tag.Group with label description as a parent component. This is to ensure correct semantic and accessibility.`);
@@ -62,35 +64,48 @@ const Tag = localProps => {
   return React.createElement(Button, _extends({
     variant: "unstyled",
     size: "small",
-    icon_position: isRemovable ? 'right' : 'left',
+    icon_position: addIcon ? 'right' : 'left',
     className: tagClassNames,
-    on_click: onClick || onDelete,
+    on_click: onClick,
     text: content,
     skeleton: skeleton,
-    onKeyUp: isRemovable && !omitOnKeyUpDeleteEvent ? e => handleKeyUp(e) : undefined
+    onKeyUp: variant === 'removable' && !omitOnKeyUpDeleteEvent ? e => handleDeleteKeyUp(e) : undefined
   }, buttonAttr));
-  function getDeleteIcon() {
-    return _IconPrimary || (_IconPrimary = React.createElement(IconPrimary, {
-      title: removeIconTitle,
-      inherit_color: false,
-      icon: _svg || (_svg = React.createElement("svg", {
-        width: "16",
-        height: "16",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg"
-      }, React.createElement("path", {
-        d: "M0 8a8 8 0 1 1 16 0A8 8 0 1 1 0 8Z",
-        className: "dnb-icon-close-circle-path"
-      }), React.createElement("path", {
-        d: "m5.5 10.5 5-5m0 5-5-5",
-        className: "dnb-icon-close-cross-path",
-        strokeWidth: "1.5",
-        strokeLinecap: "round",
-        strokeLinejoin: "round"
-      })))
-    }));
+};
+const handleDeprecatedBehaviour = _ref => {
+  let {
+      onDelete
+    } = _ref,
+    allProps = _objectWithoutProperties(_ref, _excluded2);
+  if (!allProps.variant) {
+    if (allProps.onClick) {
+      allProps.variant = 'clickable';
+    } else if (onDelete) {
+      allProps.onClick = onDelete;
+      allProps.variant = 'removable';
+    }
   }
+  return allProps;
 };
+const getIcon = title => React.createElement(IconPrimary, {
+  title: title,
+  inherit_color: false,
+  icon: _svg || (_svg = React.createElement("svg", {
+    width: "16",
+    height: "16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, React.createElement("path", {
+    d: "M0 8a8 8 0 1 1 16 0A8 8 0 1 1 0 8Z",
+    className: "dnb-icon-close-circle-path"
+  }), React.createElement("path", {
+    d: "m5.5 10.5 5-5m0 5-5-5",
+    className: "dnb-icon-close-cross-path",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })))
+});
 Tag.Group = TagGroup;
 Tag._formElement = true;
 Tag._supportsSpacingProps = true;

package/es/components/tag/Tag.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tag.js","names":["React","classnames","IconPrimary","Button","Context","warn","extendPropsWithContext","TagGroup","TagGroupContext","createSpacingClasses","defaultProps","skeleton","omitOnKeyUpDeleteEvent","Tag","localProps","_context$translation","_IconPrimary","context","useContext","tagGroupContext","allProps","translation","className","children","text","hasLabel","onClick","onDelete","removeIconTitle","props","_objectWithoutProperties","_excluded","content","isClickable","isRemovable","isInteractive","spacingClasses","tagClassNames","buttonAttr","isDeleteKeyboardEvent","keyboardEvent","key","handleKeyUp","event","element","type","icon","getDeleteIcon","createElement","_extends","variant","size","icon_position","on_click","onKeyUp","e","undefined","title","inherit_color","_svg","width","height","fill","xmlns","d","strokeWidth","strokeLinecap","strokeLinejoin","Group","_formElement","_supportsSpacingProps"],"sources":["../../../../src/components/tag/Tag.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\n\n// Components\nimport IconPrimary from '../icon-primary/IconPrimary'\nimport type { IconIcon } from '../icon/Icon'\nimport Button, { ButtonProps } from '../button/Button'\n\n// Shared\nimport Context from '../../shared/Context'\nimport type { SpacingProps } from '../../shared/types'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\nimport {\n warn,\n extendPropsWithContext,\n} from '../../shared/component-helper'\n\n// Internal\nimport TagGroup from './TagGroup'\nimport { TagGroupContext } from './TagContext'\nimport { createSpacingClasses } from '../space/SpacingHelper'\n\nexport interface TagProps {\n /*\n The content of the tag element, can be a string or a React Element.\n * Default: null\n /\n text?: string \| React.ReactNode\n\n /\n Icon displaying on the left side\n * Default: null\n /\n icon?: IconIcon\n\n /\n If a label is given, typical inside a table or dl (definition list), then you can disable Tag.Group as a dependent of Tag. Use `true` to omit the `Tag group required:` warning.\n * Default: null\n /\n hasLabel?: boolean\n\n /\n Custom className on the component root\n * Default: null\n /\n className?: string\n\n /\n Skeleton should be applied when loading content\n * Default: null\n /\n skeleton?: SkeletonShow\n\n /\n The content of the tag element, can be a string or a React Element. Will be overwritten by text prop\n * Default: null\n /\n children?: string \| React.ReactNode // ReactNode allows multiple elements, strings, numbers, fragments, portals...\n\n /\n Handle the click event on 'tag' element\n * Default: null\n /\n onClick?: React.MouseEventHandler<HTMLButtonElement>\n\n /\n Handle the delete event on 'tag' element\n * Default: null\n /\n onDelete?: React.MouseEventHandler<HTMLButtonElement>\n\n /\n Handle the delete event on 'tag' element\n * Default: null\n /\n omitOnKeyUpDeleteEvent?: boolean\n\n /\n Internal property\n * Has translation in context\n */\n removeIconTitle?: string\n}\n\nexport const defaultProps = {\n skeleton: null,\n omitOnKeyUpDeleteEvent: false,\n}\n\nconst Tag = (localProps: TagProps & SpacingProps) => {\n // Every component should have a context\n const context = React.useContext(Context)\n const tagGroupContext = React.useContext(TagGroupContext)\n\n // Extract additional props from global context\n const allProps = extendPropsWithContext(\n localProps,\n defaultProps,\n context?.translation?.Tag,\n context?.Tag,\n tagGroupContext\n )\n\n const {\n className,\n skeleton,\n children,\n text,\n hasLabel,\n onClick,\n onDelete,\n omitOnKeyUpDeleteEvent,\n removeIconTitle, // has a translation in context\n ...props\n } = allProps\n\n const content = text \|\| children\n const isClickable = !!onClick\n const isRemovable = !!onDelete && !isClickable\n const isInteractive = isClickable \|\| isRemovable\n const spacingClasses = createSpacingClasses(props)\n const tagClassNames = classnames(\n 'dnb-tag',\n className,\n spacingClasses,\n isInteractive && 'dnb-tag--interactive',\n isRemovable && 'dnb-tag--removable'\n )\n const buttonAttr: typeof props & Pick<ButtonProps, 'element' \| 'type'> =\n props\n\n const isDeleteKeyboardEvent = (keyboardEvent) => {\n return (\n keyboardEvent.key === 'Backspace' \|\| keyboardEvent.key === 'Delete'\n )\n }\n\n const handleKeyUp = (event) => {\n if (onDelete && isDeleteKeyboardEvent(event)) {\n onDelete(event)\n }\n }\n\n if (!isInteractive) {\n buttonAttr.element = 'span'\n buttonAttr.type = ''\n }\n\n if (isRemovable) {\n buttonAttr.icon = getDeleteIcon()\n }\n\n if (!tagGroupContext && !hasLabel) {\n warn(\n `Tag group required: A Tag requires a Tag.Group with label description as a parent component. This is to ensure correct semantic and accessibility.`\n )\n }\n\n return (\n <Button\n variant=\"unstyled\"\n size=\"small\"\n icon_position={isRemovable ? 'right' : 'left'}\n className={tagClassNames}\n on_click={onClick \|\| onDelete}\n text={content}\n skeleton={skeleton}\n onKeyUp={\n isRemovable && !omitOnKeyUpDeleteEvent\n ? (e) => handleKeyUp(e)\n : undefined\n }\n {...buttonAttr}\n />\n )\n\n function getDeleteIcon() {\n return (\n <IconPrimary\n title={removeIconTitle}\n inherit_color={false}\n icon={\n <svg\n width=\"16\"\n height=\"16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M0 8a8 8 0 1 1 16 0A8 8 0 1 1 0 8Z\"\n className=\"dnb-icon-close-circle-path\"\n />\n <path\n d=\"m5.5 10.5 5-5m0 5-5-5\"\n className=\"dnb-icon-close-cross-path\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n }\n />\n )\n }\n}\n\nTag.Group = TagGroup\n\nTag._formElement = true\nTag._supportsSpacingProps = true\n\nexport default Tag\n"],"mappings":"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"}
1	+ {"version":3,"file":"Tag.js","names":["React","classnames","IconPrimary","Button","Context","warn","extendPropsWithContext","TagGroup","TagGroupContext","createSpacingClasses","defaultProps","skeleton","omitOnKeyUpDeleteEvent","Tag","localProps","_context$translation","context","useContext","tagGroupContext","allProps","translation","_handleDeprecatedBeha","handleDeprecatedBehaviour","className","children","text","hasLabel","variant","onClick","removeIconTitle","addIconTitle","props","_objectWithoutProperties","_excluded","content","addIcon","isInteractive","spacingClasses","tagClassNames","buttonAttr","isDeleteKeyboardEvent","keyboardEvent","key","handleDeleteKeyUp","event","element","type","icon","getIcon","createElement","_extends","size","icon_position","on_click","onKeyUp","e","undefined","_ref","onDelete","_excluded2","title","inherit_color","_svg","width","height","fill","xmlns","d","strokeWidth","strokeLinecap","strokeLinejoin","Group","_formElement","_supportsSpacingProps"],"sources":["../../../../src/components/tag/Tag.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\n\n// Components\nimport IconPrimary from '../icon-primary/IconPrimary'\nimport type { IconIcon } from '../icon/Icon'\nimport Button, { ButtonProps } from '../button/Button'\n\n// Shared\nimport Context from '../../shared/Context'\nimport type { SpacingProps } from '../../shared/types'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\nimport {\n warn,\n extendPropsWithContext,\n} from '../../shared/component-helper'\n\n// Internal\nimport TagGroup from './TagGroup'\nimport { TagGroupContext } from './TagContext'\nimport { createSpacingClasses } from '../space/SpacingHelper'\n\nexport interface TagProps {\n /*\n The content of the tag element, can be a string or a React Element.\n * Default: null\n /\n text?: string \| React.ReactNode\n\n /\n Icon displaying on the left side\n * Default: null\n /\n icon?: IconIcon\n\n /\n If a label is given, typical inside a table or dl (definition list), then you can disable Tag.Group as a dependent of Tag. Use `true` to omit the `Tag group required:` warning.\n * Default: null\n /\n hasLabel?: boolean\n\n /\n Defines the variant\n * Default: 'default'\n /\n variant?: 'default' \| 'clickable' \| 'addable' \| 'removable'\n\n /\n Custom className on the component root\n * Default: null\n /\n className?: string\n\n /\n Skeleton should be applied when loading content\n * Default: null\n /\n skeleton?: SkeletonShow\n\n /\n The content of the tag element, can be a string or a React Element. Will be overwritten by text prop\n * Default: null\n /\n children?: string \| React.ReactNode // ReactNode allows multiple elements, strings, numbers, fragments, portals...\n\n /\n Handle the click event on 'tag' element\n * Default: null\n /\n onClick?: React.MouseEventHandler<HTMLButtonElement>\n\n /\n Handle the delete event on 'tag' element\n * Default: null\n * @deprecated Use `onClick` instead. With `variant='removable'`\n /\n onDelete?: React.MouseEventHandler<HTMLButtonElement>\n\n /\n Handle the delete event on 'tag' element\n * Default: null\n /\n omitOnKeyUpDeleteEvent?: boolean\n\n /\n Internal property\n * Has translation in context\n /\n removeIconTitle?: string\n\n /\n Internal property\n * Has translation in context\n /\n addIconTitle?: string\n}\n\nexport const defaultProps = {\n skeleton: null,\n omitOnKeyUpDeleteEvent: false,\n}\n\nconst Tag = (localProps: TagProps & SpacingProps) => {\n // Every component should have a context\n const context = React.useContext(Context)\n const tagGroupContext = React.useContext(TagGroupContext)\n\n // Extract additional props from global context\n const allProps = extendPropsWithContext(\n localProps,\n defaultProps,\n context?.translation?.Tag,\n context?.Tag,\n tagGroupContext\n )\n\n const {\n className,\n skeleton,\n children,\n text,\n hasLabel,\n variant = 'default',\n onClick,\n omitOnKeyUpDeleteEvent,\n removeIconTitle, // has a translation in context\n addIconTitle, // has a translation in context\n ...props\n } = handleDeprecatedBehaviour(allProps)\n\n const content = text \|\| children\n\n const addIcon = variant === 'removable' \|\| variant === 'addable'\n const isInteractive = variant !== 'default'\n const spacingClasses = createSpacingClasses(props)\n const tagClassNames = classnames(\n 'dnb-tag',\n className,\n spacingClasses,\n isInteractive && 'dnb-tag--interactive',\n `dnb-tag--${variant}`\n )\n const buttonAttr: typeof props & Pick<ButtonProps, 'element' \| 'type'> =\n props\n\n const isDeleteKeyboardEvent = (keyboardEvent) => {\n return (\n keyboardEvent.key === 'Backspace' \|\| keyboardEvent.key === 'Delete'\n )\n }\n\n const handleDeleteKeyUp = (event) => {\n if (isDeleteKeyboardEvent(event) && onClick) {\n onClick(event)\n }\n }\n\n if (!isInteractive) {\n buttonAttr.element = 'span'\n buttonAttr.type = ''\n }\n\n if (addIcon) {\n buttonAttr.icon = getIcon(\n variant === 'addable' ? addIconTitle : removeIconTitle\n )\n }\n\n if (!tagGroupContext && !hasLabel) {\n warn(\n `Tag group required: A Tag requires a Tag.Group with label description as a parent component. This is to ensure correct semantic and accessibility.`\n )\n }\n\n return (\n <Button\n variant=\"unstyled\"\n size=\"small\"\n icon_position={addIcon ? 'right' : 'left'}\n className={tagClassNames}\n on_click={onClick}\n text={content}\n skeleton={skeleton}\n onKeyUp={\n variant === 'removable' && !omitOnKeyUpDeleteEvent\n ? (e) => handleDeleteKeyUp(e)\n : undefined\n }\n {...buttonAttr}\n />\n )\n}\n\n/\n Support deprecated behaviour by mutating the props.\n * Deprecated behaviour: variant 'clickable' and 'removable' is defined by the 'onClick' and 'onDelete' props\n */\nconst handleDeprecatedBehaviour: (allProps: TagProps) => TagProps = ({\n onDelete,\n ...allProps\n}) => {\n if (!allProps.variant) {\n if (allProps.onClick) {\n allProps.variant = 'clickable'\n } else if (onDelete) {\n allProps.onClick = onDelete\n allProps.variant = 'removable'\n }\n }\n return allProps\n}\nconst getIcon = (title: string) => (\n <IconPrimary\n title={title}\n inherit_color={false}\n icon={\n <svg\n width=\"16\"\n height=\"16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M0 8a8 8 0 1 1 16 0A8 8 0 1 1 0 8Z\"\n className=\"dnb-icon-close-circle-path\"\n />\n <path\n d=\"m5.5 10.5 5-5m0 5-5-5\"\n className=\"dnb-icon-close-cross-path\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n }\n />\n)\n\nTag.Group = TagGroup\n\nTag._formElement = true\nTag._supportsSpacingProps = true\n\nexport default Tag\n"],"mappings":"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"}

package/es/components/tag/style/dnb-tag.css CHANGED Viewed

@@ -13,18 +13,17 @@
 * Tag mixins
 *
 */
+.dnb-tag {
+  --tag-icon-color: var(--color-sea-green);
+  --tag-icon-border-color: var(--tag-icon-color);
+}
 .dnb-tag.dnb-button {
   -webkit-appearance: none;
           appearance: none;
   background-color: var(--color-black-8);
-}
-.dnb-tag.dnb-button.dnb-button--size-small {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
-.dnb-tag.dnb-button.dnb-button--size-small.dnb-button--has-icon {
-  padding-left: 0;
-}
 .dnb-tag.dnb-button .dnb-button__text {
   font-size: var(--font-size-x-small);
   transform: none;
@@ -39,48 +38,43 @@
 }
 .dnb-tag--interactive.dnb-button {
   color: var(--color-sea-green);
+  background-color: var(--color-pistachio);
   --border-color: var(--color-sea-green);
   --border-width: 0.0625rem;
   box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
 }
-html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:hover[disabled] {
+html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:focus-visible[disabled] {
   cursor: not-allowed;
 }
-html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:hover:not([disabled]) {
-  color: var(--color-sea-green);
-  background-color: var(--color-black-8);
+html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:focus-visible:not([disabled]) {
+  outline: none;
   --border-color: var(--color-emerald-green);
-  --border-width: 0.125rem;
-  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  --border-width: var(--focus-ring-width);
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
+  --tag-icon-color: var(--color-emerald-green);
 }
-.dnb-tag--interactive.dnb-button:focus[disabled], html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:focus[disabled] {
+html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:hover[disabled] {
   cursor: not-allowed;
 }
-.dnb-tag--interactive.dnb-button:focus:not([disabled]), html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:focus:not([disabled]) {
-  outline: none;
-}
-html[data-whatinput=keyboard] .dnb-tag--interactive.dnb-button:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:focus:not([disabled]) {
-  color: var(--color-sea-green);
-  background-color: var(--color-black-8);
-}
-html[data-whatinput=keyboard] .dnb-tag--interactive.dnb-button:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:focus:not([disabled]) {
-  --border-color: var(--focus-ring-color);
-  --border-width: var(--focus-ring-width);
-  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
+html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:hover:not([disabled]) {
+  --border-color: var(--color-emerald-green);
+  --border-width: 0.125rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
+  --tag-icon-color: var(--color-emerald-green);
 }
 .dnb-tag--interactive.dnb-button:active[disabled], html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:active[disabled] {
   cursor: not-allowed;
 }
 .dnb-tag--interactive.dnb-button:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:active:not([disabled]) {
-  color: var(--color-sea-green);
   background-color: var(--color-mint-green-50);
   --border-color: transparent;
   --border-width: 0.0625rem;
   box-shadow: 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
+  --tag-icon-color: var(--color-sea-green);
 }
 .dnb-tag--interactive.dnb-button[disabled] {
   color: var(--color-sea-green-30);
@@ -90,83 +84,53 @@ html[data-whatinput=keyboard] .dnb-tag--interactive.dnb-button:focus:not([disabl
   box-shadow: 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
 }
-.dnb-tag--removable.dnb-button {
-  color: var(--color-white);
-  background-color: var(--color-sea-green);
-}
-.dnb-tag--removable.dnb-button svg .dnb-icon-close-circle-path {
-  fill: var(--color-white);
+.dnb-tag--removable.dnb-button, .dnb-tag--addable.dnb-button {
+  padding-right: 0.25rem;
+  --tag-icon-fill: var(--tag-icon-fill-color);
+  --tag-icon-stroke: var(--tag-icon-stroke-color);
 }
-.dnb-tag--removable.dnb-button svg .dnb-icon-close-cross-path {
-  stroke: var(--color-sea-green);
-}
-.dnb-tag--removable.dnb-button:focus[disabled], html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus[disabled] {
+html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus-visible[disabled], html:not([data-whatintent=touch]) .dnb-tag--addable.dnb-button:focus-visible[disabled] {
   cursor: not-allowed;
 }
-.dnb-tag--removable.dnb-button:focus:not([disabled]), html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus:not([disabled]) {
-  outline: none;
+html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus-visible:not([disabled]), html:not([data-whatintent=touch]) .dnb-tag--addable.dnb-button:focus-visible:not([disabled]) {
+  --tag-icon-fill: var(--tag-icon-stroke-color);
+  --tag-icon-stroke: var(--tag-icon-fill-color);
 }
-html[data-whatinput=keyboard] .dnb-tag--removable.dnb-button:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus:not([disabled]) {
-  color: var(--color-sea-green);
-  background-color: var(--color-white);
-}
-html[data-whatinput=keyboard] .dnb-tag--removable.dnb-button:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus:not([disabled]) {
-  --border-color: var(--focus-ring-color);
-  --border-width: var(--focus-ring-width);
-  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
-}
-.dnb-tag--removable.dnb-button:focus:not([disabled]) svg .dnb-icon-close-circle-path, html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus:not([disabled]) svg .dnb-icon-close-circle-path {
-  fill: var(--color-sea-green);
-}
-.dnb-tag--removable.dnb-button:focus:not([disabled]) svg .dnb-icon-close-cross-path, html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus:not([disabled]) svg .dnb-icon-close-cross-path {
-  stroke: var(--color-white);
-}
-html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover[disabled] {
+html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover[disabled], html:not([data-whatintent=touch]) .dnb-tag--addable.dnb-button:hover[disabled] {
   cursor: not-allowed;
 }
-html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover:not([disabled]) {
-  color: var(--color-sea-green);
-  background-color: var(--color-white);
-  --border-color: var(--color-emerald-green);
-  --border-width: 0.125rem;
-  box-shadow: 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
-}
-html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover:not([disabled]) svg .dnb-icon-close-circle-path {
-  fill: var(--color-sea-green);
-}
-html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover:not([disabled]) svg .dnb-icon-close-cross-path {
-  stroke: var(--color-white);
+html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover:not([disabled]), html:not([data-whatintent=touch]) .dnb-tag--addable.dnb-button:hover:not([disabled]) {
+  --tag-icon-fill: var(--tag-icon-stroke-color);
+  --tag-icon-stroke: var(--tag-icon-fill-color);
 }
-.dnb-tag--removable.dnb-button:active[disabled], html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:active[disabled] {
+.dnb-tag--removable.dnb-button:active[disabled], html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:active[disabled], .dnb-tag--addable.dnb-button:active[disabled], html:not([data-whatintent=touch]) .dnb-tag--addable.dnb-button:active[disabled] {
   cursor: not-allowed;
 }
-.dnb-tag--removable.dnb-button:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:active:not([disabled]) {
-  color: var(--color-sea-green);
-  background-color: var(--color-mint-green-50);
-  --border-color: transparent;
-  --border-width: 0.0625rem;
-  box-shadow: 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
+.dnb-tag--removable.dnb-button:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:active:not([disabled]), .dnb-tag--addable.dnb-button:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-tag--addable.dnb-button:active:not([disabled]) {
+  --tag-icon-fill: var(--tag-icon-stroke-color);
+  --tag-icon-stroke: var(--tag-icon-fill-color);
 }
-.dnb-tag--removable.dnb-button:active:not([disabled]) svg .dnb-icon-close-circle-path, html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:active:not([disabled]) svg .dnb-icon-close-circle-path {
-  fill: var(--color-sea-green);
+.dnb-tag--removable.dnb-button svg, .dnb-tag--addable.dnb-button svg {
+  border-radius: 50%;
+  outline: 0.0625rem solid var(--tag-icon-border-color);
+  outline-offset: -0.0625rem;
 }
-.dnb-tag--removable.dnb-button:active:not([disabled]) svg .dnb-icon-close-cross-path, html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:active:not([disabled]) svg .dnb-icon-close-cross-path {
-  stroke: var(--color-white);
+.dnb-tag--removable.dnb-button svg .dnb-icon-close-circle-path, .dnb-tag--addable.dnb-button svg .dnb-icon-close-circle-path {
+  fill: var(--tag-icon-fill);
 }
-.dnb-tag--removable.dnb-button[disabled] svg .dnb-icon-close-circle-path {
-  fill: var(--color-mint-green-50);
+.dnb-tag--removable.dnb-button svg .dnb-icon-close-cross-path, .dnb-tag--addable.dnb-button svg .dnb-icon-close-cross-path {
+  stroke: var(--tag-icon-stroke);
 }
-.dnb-tag--removable.dnb-button[disabled] svg .dnb-icon-close-cross-path {
-  stroke: var(--color-sea-green-30);
+.dnb-tag--addable {
+  --tag-icon-fill-color: var(--tag-icon-color);
+  --tag-icon-stroke-color: var(--color-white);
 }
-.dnb-tag--removable.dnb-button .dnb-button__text {
-  padding-left: 0.5rem;
+.dnb-tag--addable svg {
+  transform: rotate(45deg);
 }
-.dnb-tag--removable.dnb-button--size-small.dnb-button--has-icon {
-  padding-right: 0;
+.dnb-tag--removable {
+  --tag-icon-fill-color: var(--color-white);
+  --tag-icon-stroke-color: var(--tag-icon-color);
 }
 .dnb-tag__group {
   display: inline-flex;