@dnb/eufemia 9.16.3 → 9.18.0

package/es/style/dnb-ui-components.scss

@@ -37,6 +37,7 @@
 @import '../components/step-indicator/style/_step-indicator.scss';
 @import '../components/switch/style/_switch.scss';
 @import '../components/tabs/style/_tabs.scss';
+@import '../components/tag/style/_tag.scss';
 @import '../components/textarea/style/_textarea.scss';
 @import '../components/toggle-button/style/_toggle-button.scss';
 @import '../components/tooltip/style/_tooltip.scss';

package/es/style/themes/theme-open-banking/dnb-theme-open-banking.css

@@ -2548,11 +2548,12 @@ html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined.dnb-accord
       -ms-flex-item-align: start;
           align-self: flex-start;
       margin-top: 0.75rem; }
-    .dnb-button--tertiary.dnb-button--size-large .dnb-button__icon,
-    .dnb-button--tertiary.dnb-button--size-small .dnb-button__icon {
-      margin-top: 0.25rem; }
+    .dnb-button--tertiary.dnb-button--size-large .dnb-button__icon {
+      margin-top: 1rem; }
     .dnb-button--tertiary.dnb-button--size-medium .dnb-button__icon {
       margin-top: 0.5rem; }
+    .dnb-button--tertiary.dnb-button--size-small .dnb-button__icon {
+      margin-top: 0.25rem; }
     .dnb-button--tertiary.dnb-button--icon-position-top {
       -webkit-box-orient: vertical;
       -webkit-box-direction: normal;
@@ -2582,16 +2583,6 @@ html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined.dnb-accord
             -ms-flex-order: 3;
                 order: 3;
         height: 0; }
-    .dnb-button--tertiary.dnb-button--has-text.dnb-button--size-large .dnb-button__icon,
-    .dnb-button--tertiary:not(.dnb-button--size-large) .dnb-button__icon.dnb-icon--medium {
-      margin-top: 0.5rem; }
-    .dnb-button--tertiary.dnb-button--size-large,
-    .dnb-core-style .dnb-button--tertiary.dnb-button--size-large {
-      line-height: 2rem;
-      line-height: var(--button-height--medium); }
-    .dnb-button--tertiary.dnb-button--size-large.dnb-button--has-icon:not(.dnb-button--has-text) {
-      width: 2rem;
-      width: var(--button-width--medium); }
     .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left {
       padding-left: 0;
       padding-right: 0.5rem; }
@@ -3349,22 +3340,12 @@ html:not([data-whatintent='touch']) .dnb-dropdown__trigger:hover:not([disabled])
   -webkit-box-shadow: 99vw 0 0 0 currentColor, 198vw 0 0 0 currentColor, 297vw 0 0 0 currentColor, 396vw 0 0 0 currentColor, 0 0.0625rem 0 0 var(--color-black-80), 100vw 0.0625rem 0 0 var(--color-black-80);
           box-shadow: 99vw 0 0 0 currentColor, 198vw 0 0 0 currentColor, 297vw 0 0 0 currentColor, 396vw 0 0 0 currentColor, 0 0.0625rem 0 0 var(--color-black-80), 100vw 0.0625rem 0 0 var(--color-black-80); }
 
-.dnb-global-status__title {
-  color: #fff;
-  color: var(--color-white); }
-  .dnb-global-status__title.dnb-p {
-    font-weight: 500;
-    font-weight: var(--font-weight-medium); }
-
 .dnb-global-status__icon {
   font-size: 1rem; }
 
 .dnb-global-status__message__content {
   color: #333;
   color: var(--color-black-80); }
-  .dnb-global-status__message__content > .dnb-p {
-    font-weight: 500;
-    font-weight: var(--font-weight-medium); }
 
 .dnb-global-status__message.dnb-section--white ::-moz-selection {
   background-color: #a5e1d2;
@@ -3374,50 +3355,14 @@ html:not([data-whatintent='touch']) .dnb-dropdown__trigger:hover:not([disabled])
   background-color: #a5e1d2;
   background-color: var(--color-mint-green); }
 
-.dnb-global-status__message .dnb-hr {
+.dnb-global-status__content .dnb-hr {
   color: #dc2a2a;
   color: var(--color-fire-red); }
 
-.dnb-global-status--info .dnb-global-status__message .dnb-hr {
+.dnb-global-status--info .dnb-global-status__content .dnb-hr {
   color: fuchsia;
   color: var(--color-sea-green); }
 
-.dnb-global-status__close-button, .dnb-global-status__close-button.dnb-button--tertiary {
-  color: #fff;
-  color: var(--color-white); }
-  html:not([data-whatintent='touch']) .dnb-global-status__close-button:hover[disabled], html:not([data-whatintent='touch']) .dnb-global-status__close-button.dnb-button--tertiary:hover[disabled] {
-    cursor: not-allowed; }
-  html:not([data-whatintent='touch']) .dnb-global-status__close-button:hover:not([disabled]) .dnb-button__text, html:not([data-whatintent='touch']) .dnb-global-status__close-button.dnb-button--tertiary:hover:not([disabled]) .dnb-button__text {
-    color: inherit; }
-    html:not([data-whatintent='touch']) .dnb-global-status__close-button:hover:not([disabled]) .dnb-button__text::after, html:not([data-whatintent='touch']) .dnb-global-status__close-button.dnb-button--tertiary:hover:not([disabled]) .dnb-button__text::after {
-      color: inherit; }
-  .dnb-global-status__close-button:not([disabled]):focus::before, .dnb-global-status__close-button.dnb-button--tertiary:not([disabled]):focus::before {
-    outline: none; }
-    html[data-whatinput='keyboard'] .dnb-global-status__close-button:not([disabled]):focus::before, html[data-whatinput='keyboard'] .dnb-global-status__close-button.dnb-button--tertiary:not([disabled]):focus::before {
-      --border-color: var(--color-white);
-      -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='keyboard'] .dnb-global-status__close-button:not([disabled]):focus::before, html[data-whatinput='keyboard'] .dnb-global-status__close-button.dnb-button--tertiary:not([disabled]):focus::before {
-          -webkit-box-shadow: 0 0 0 0.125rem #fff;
-                  box-shadow: 0 0 0 0.125rem #fff;
-          -webkit-box-shadow: 0 0 0 0.125rem var(--color-white);
-                  box-shadow: 0 0 0 0.125rem var(--color-white); } }
-  .dnb-global-status__close-button:not([disabled]):active::before, .dnb-global-status__close-button.dnb-button--tertiary:not([disabled]):active::before {
-    outline: none; }
-    html[data-whatinput='mouse'] .dnb-global-status__close-button:not([disabled]):active::before, html[data-whatinput='mouse'] .dnb-global-status__close-button.dnb-button--tertiary:not([disabled]):active::before {
-      --border-color: var(--color-white);
-      -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-global-status__close-button:not([disabled]):active::before, html[data-whatinput='mouse'] .dnb-global-status__close-button.dnb-button--tertiary:not([disabled]):active::before {
-          -webkit-box-shadow: 0 0 0 0.125rem #fff;
-                  box-shadow: 0 0 0 0.125rem #fff;
-          -webkit-box-shadow: 0 0 0 0.125rem var(--color-white);
-                  box-shadow: 0 0 0 0.125rem var(--color-white); } }
-
 /*
  * Np theme is provided
  *
@@ -3528,7 +3473,6 @@ html:not([data-whatintent='touch']) .dnb-dropdown__trigger:hover:not([disabled])
                 box-shadow: inset 0 0 0 1px #737373;
         -webkit-box-shadow: inset 0 0 0 1px var(--color-black-55);
                 box-shadow: inset 0 0 0 1px var(--color-black-55); } }
-  .dnb-input[data-input-state='focus'] .dnb-input__shell,
   .dnb-input:not([data-input-state='disabled']) .dnb-input__shell:hover,
   .dnb-input:not([data-input-state='disabled']):hover .dnb-input__shell {
     --border-color: var(--color-sea-green);
@@ -3536,13 +3480,23 @@ html:not([data-whatintent='touch']) .dnb-dropdown__trigger:hover:not([disabled])
             box-shadow: 0 0 0 0.125rem var(--border-color);
     border-color: transparent; }
     @media screen and (-ms-high-contrast: none) {
-      .dnb-input[data-input-state='focus'] .dnb-input__shell,
       .dnb-input:not([data-input-state='disabled']) .dnb-input__shell:hover,
       .dnb-input:not([data-input-state='disabled']):hover .dnb-input__shell {
         -webkit-box-shadow: 0 0 0 0.125rem fuchsia;
                 box-shadow: 0 0 0 0.125rem fuchsia;
         -webkit-box-shadow: 0 0 0 0.125rem var(--color-sea-green);
                 box-shadow: 0 0 0 0.125rem var(--color-sea-green); } }
+  .dnb-input[data-input-state='focus']:not([data-input-state='disabled']) .dnb-input__shell {
+    --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) {
+      .dnb-input[data-input-state='focus']:not([data-input-state='disabled']) .dnb-input__shell {
+        -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-input__status--error.dnb-input:not([data-input-state='focus']) .dnb-input__shell {
     color: #dc2a2a;
     color: var(--color-fire-red); }
@@ -3995,33 +3949,91 @@ html:not([data-whatintent='touch']) .dnb-dropdown__trigger:hover:not([disabled])
 .dnb-section--emerald-green .dnb-anchor,
 .dnb-section--sea-green .dnb-anchor {
   color: #fff;
-  color: var(--color-white); }
-  .dnb-section--fire-red .dnb-anchor:hover,
+  color: var(--color-white);
+  -webkit-box-shadow: 0 0.09375rem 0 0 #fff;
+          box-shadow: 0 0.09375rem 0 0 #fff;
+  -webkit-box-shadow: 0 0.09375rem 0 0 var(--color-white);
+          box-shadow: 0 0.09375rem 0 0 var(--color-white); }
+  .dnb-section--fire-red .dnb-anchor:hover, .dnb-section--fire-red .dnb-anchor:active,
   .dnb-section--emerald-green .dnb-anchor:hover,
-  .dnb-section--sea-green .dnb-anchor:hover {
-    color: fuchsia;
-    color: var(--color-sea-green); }
-  .dnb-section--fire-red .dnb-anchor:focus,
-  .dnb-section--emerald-green .dnb-anchor:focus,
-  .dnb-section--sea-green .dnb-anchor:focus {
+  .dnb-section--emerald-green .dnb-anchor:active,
+  .dnb-section--sea-green .dnb-anchor:hover,
+  .dnb-section--sea-green .dnb-anchor:active {
+    color: #14555a;
+    color: var(--color-emerald-green);
+    background-color: #fff;
+    background-color: var(--color-white);
+    -webkit-box-shadow: none;
+            box-shadow: none; }
+  .dnb-section--fire-red .dnb-anchor:active,
+  .dnb-section--emerald-green .dnb-anchor:active,
+  .dnb-section--sea-green .dnb-anchor:active {
+    color: #14555a;
+    color: var(--color-emerald-green);
+    background-color: #fff;
+    background-color: var(--color-white); }
+  .dnb-section--fire-red .dnb-anchor:not(:disabled):focus,
+  .dnb-section--emerald-green .dnb-anchor:not(:disabled):focus,
+  .dnb-section--sea-green .dnb-anchor:not(:disabled):focus {
     color: #fff;
     color: var(--color-white);
+    background-color: transparent;
     outline: none; }
-    html[data-whatinput='keyboard'] .dnb-section--fire-red .dnb-anchor:focus, html[data-whatinput='keyboard']
-    .dnb-section--emerald-green .dnb-anchor:focus, html[data-whatinput='keyboard']
-    .dnb-section--sea-green .dnb-anchor:focus {
-      --border-color: var(--color-black-8);
+    html[data-whatinput='keyboard'] .dnb-section--fire-red .dnb-anchor:not(:disabled):focus, html[data-whatinput='keyboard']
+    .dnb-section--emerald-green .dnb-anchor:not(:disabled):focus, html[data-whatinput='keyboard']
+    .dnb-section--sea-green .dnb-anchor:not(:disabled):focus {
+      --border-color: var(--color-white);
       -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='keyboard'] .dnb-section--fire-red .dnb-anchor:focus, html[data-whatinput='keyboard']
-        .dnb-section--emerald-green .dnb-anchor:focus, html[data-whatinput='keyboard']
-        .dnb-section--sea-green .dnb-anchor:focus {
-          -webkit-box-shadow: 0 0 0 0.125rem #ebebeb;
-                  box-shadow: 0 0 0 0.125rem #ebebeb;
-          -webkit-box-shadow: 0 0 0 0.125rem var(--color-black-8);
-                  box-shadow: 0 0 0 0.125rem var(--color-black-8); } }
+        html[data-whatinput='keyboard'] .dnb-section--fire-red .dnb-anchor:not(:disabled):focus, html[data-whatinput='keyboard']
+        .dnb-section--emerald-green .dnb-anchor:not(:disabled):focus, html[data-whatinput='keyboard']
+        .dnb-section--sea-green .dnb-anchor:not(:disabled):focus {
+          -webkit-box-shadow: 0 0 0 0.125rem #fff;
+                  box-shadow: 0 0 0 0.125rem #fff;
+          -webkit-box-shadow: 0 0 0 0.125rem var(--color-white);
+                  box-shadow: 0 0 0 0.125rem var(--color-white); } }
+
+.dnb-section--fire-red .dnb-button--tertiary,
+.dnb-section--emerald-green .dnb-button--tertiary,
+.dnb-section--sea-green .dnb-button--tertiary {
+  color: #fff;
+  color: var(--color-white); }
+  .dnb-section--fire-red .dnb-button--tertiary:hover,
+  .dnb-section--emerald-green .dnb-button--tertiary:hover,
+  .dnb-section--sea-green .dnb-button--tertiary:hover {
+    color: #fff;
+    color: var(--color-white); }
+  .dnb-section--fire-red .dnb-button--tertiary:hover .dnb-button__text::after,
+  .dnb-section--emerald-green .dnb-button--tertiary:hover .dnb-button__text::after,
+  .dnb-section--sea-green .dnb-button--tertiary:hover .dnb-button__text::after {
+    color: #fff !important;
+    color: var(--color-white) !important; }
+  .dnb-section--fire-red .dnb-button--tertiary:focus,
+  .dnb-section--emerald-green .dnb-button--tertiary:focus,
+  .dnb-section--sea-green .dnb-button--tertiary:focus {
+    color: #fff;
+    color: var(--color-white); }
+    .dnb-section--fire-red .dnb-button--tertiary:focus::before,
+    .dnb-section--emerald-green .dnb-button--tertiary:focus::before,
+    .dnb-section--sea-green .dnb-button--tertiary:focus::before {
+      outline: none; }
+      html[data-whatinput='keyboard'] .dnb-section--fire-red .dnb-button--tertiary:focus::before, html[data-whatinput='keyboard']
+      .dnb-section--emerald-green .dnb-button--tertiary:focus::before, html[data-whatinput='keyboard']
+      .dnb-section--sea-green .dnb-button--tertiary:focus::before {
+        --border-color: var(--color-white);
+        -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='keyboard'] .dnb-section--fire-red .dnb-button--tertiary:focus::before, html[data-whatinput='keyboard']
+          .dnb-section--emerald-green .dnb-button--tertiary:focus::before, html[data-whatinput='keyboard']
+          .dnb-section--sea-green .dnb-button--tertiary:focus::before {
+            -webkit-box-shadow: 0 0 0 0.125rem #fff;
+                    box-shadow: 0 0 0 0.125rem #fff;
+            -webkit-box-shadow: 0 0 0 0.125rem var(--color-white);
+                    box-shadow: 0 0 0 0.125rem var(--color-white); } }
 
 .dnb-section--signal-orange {
   color: #00343e;
@@ -6005,11 +6017,12 @@ html:not([data-whatintent='touch']) .dnb-tabs__button:hover:not([disabled]) {
       -ms-flex-item-align: start;
           align-self: flex-start;
       margin-top: 0.75rem; }
-    .dnb-button--tertiary.dnb-button--size-large .dnb-button__icon,
-    .dnb-button--tertiary.dnb-button--size-small .dnb-button__icon {
-      margin-top: 0.25rem; }
+    .dnb-button--tertiary.dnb-button--size-large .dnb-button__icon {
+      margin-top: 1rem; }
     .dnb-button--tertiary.dnb-button--size-medium .dnb-button__icon {
       margin-top: 0.5rem; }
+    .dnb-button--tertiary.dnb-button--size-small .dnb-button__icon {
+      margin-top: 0.25rem; }
     .dnb-button--tertiary.dnb-button--icon-position-top {
       -webkit-box-orient: vertical;
       -webkit-box-direction: normal;
@@ -6039,16 +6052,6 @@ html:not([data-whatintent='touch']) .dnb-tabs__button:hover:not([disabled]) {
             -ms-flex-order: 3;
                 order: 3;
         height: 0; }
-    .dnb-button--tertiary.dnb-button--has-text.dnb-button--size-large .dnb-button__icon,
-    .dnb-button--tertiary:not(.dnb-button--size-large) .dnb-button__icon.dnb-icon--medium {
-      margin-top: 0.5rem; }
-    .dnb-button--tertiary.dnb-button--size-large,
-    .dnb-core-style .dnb-button--tertiary.dnb-button--size-large {
-      line-height: 2rem;
-      line-height: var(--button-height--medium); }
-    .dnb-button--tertiary.dnb-button--size-large.dnb-button--has-icon:not(.dnb-button--has-text) {
-      width: 2rem;
-      width: var(--button-width--medium); }
     .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left {
       padding-left: 0;
       padding-right: 0.5rem; }