@dnb/eufemia 10.10.0 → 10.12.0

package/style/dnb-ui-basis.css

@@ -107,7 +107,7 @@ body {
   /* Embedded content
    */
   /*
-   * Change the alignment on media elements in all browers (opinionated).
+   * Change the alignment on media elements in all browsers (opinionated).
    */
   /**
    * Add the correct display in IE 9-.
@@ -539,7 +539,7 @@ html[data-whatinput=mouse] .dnb-mouse-focus:focus {
   padding: 0.5rem 1rem;
   white-space: nowrap;
   font-size: var(--font-size-basis);
-  color: var(--color-sea-green);
+  color: var(--skip-link-color);
   text-decoration: none;
   text-align: center;
   user-select: none;
@@ -573,7 +573,7 @@ html[data-whatinput=mouse] .dnb-mouse-focus:focus {
   width: 100%;
   height: 100%;
   border-radius: 1.5rem;
-  background-color: var(--color-white);
+  background-color: var(--skip-link-background);
   outline: none;
 }
 html[data-whatinput=mouse] .dnb-skip-link--active::before,
@@ -585,11 +585,11 @@ html[data-whatinput=mouse] .dnb-skip-link:focus::before {
 }
 .dnb-skip-link--active:hover::before,
 .dnb-skip-link:focus:hover::before {
-  background-color: var(--color-mint-green-50);
+  background-color: var(--skip-link-background--hover);
 }
 .dnb-skip-link--active:active::before,
 .dnb-skip-link:focus:active::before {
-  background-color: var(--color-emerald-green);
+  background-color: var(--skip-link-background--active);
 }
 .dnb-skip-link--active:focus:not(:active)::before,
 .dnb-skip-link:focus:focus:not(:active)::before {
@@ -606,16 +606,21 @@ html[data-whatinput=keyboard] .dnb-skip-link:focus:focus:not(:active)::before {
 .dnb-skip-link:focus:focus {
   opacity: 1;
 }
-.dnb-skip-link--active:hover, .dnb-skip-link--active:focus:not(:hover):not(:active),
-.dnb-skip-link:focus:hover,
+.dnb-skip-link--active:hover,
+.dnb-skip-link:focus:hover {
+  color: var(--skip-link-color--hover);
+  background-color: transparent;
+  box-shadow: none;
+}
+.dnb-skip-link--active:focus:not(:hover):not(:active),
 .dnb-skip-link:focus:focus:not(:hover):not(:active) {
-  color: var(--color-sea-green);
+  color: var(--skip-link-color);
   background-color: transparent;
   box-shadow: none;
 }
 .dnb-skip-link--active:active,
 .dnb-skip-link:focus:active {
-  color: var(--color-white);
+  color: var(--skip-link-color--active);
   background-color: transparent;
 }
 

package/style/dnb-ui-basis.min.css

@@ -1 +1 @@
-@charset "UTF-8";html{font-size:100%}html:not([data-visual-test]){scroll-behavior:smooth}@supports (-webkit-touch-callout:none){@supports (font:-apple-system-body){html{font:-apple-system-body}}}html[xmlns="http://www.w3.org/1999/xhtml"] a:hover{text-decoration:none}html[xmlns="http://www.w3.org/1999/xhtml"] .dnb-anchor--active{color:var(--color-mint-green)!important}html[xmlns="http://www.w3.org/1999/xhtml"] .dnb-anchor--contrast:not(:hover){color:var(--color-white)!important}html[xmlns="http://www.w3.org/1999/xhtml"] a.dnb-button--primary{color:var(--color-white)}html[xmlns="http://www.w3.org/1999/xhtml"] ul{list-style:initial}html[xmlns="http://www.w3.org/1999/xhtml"] p{background-color:initial;overflow:initial;text-align:inherit}html[xmlns="http://www.w3.org/1999/xhtml"] i{font-style:italic}html[xmlns="http://www.w3.org/1999/xhtml"] #column_left,html[xmlns="http://www.w3.org/1999/xhtml"] #root{width:100%}html[xmlns="http://www.w3.org/1999/xhtml"] body#dnbLayoutDefault #wrapper,html[xmlns="http://www.w3.org/1999/xhtml"] body#dnbLayoutDefaultStartPage #wrapper{max-width:60rem;width:100%}html[xmlns="http://www.w3.org/1999/xhtml"] #column_content{box-shadow:none}body{margin:0}.dnb-core-style{-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:var(--theme-color-body,var(--color-black-80,#333));font-family:var(--font-family-default);font-size:var(--font-size-small);font-style:normal;font-weight:var(--font-weight-basis);line-height:var(--line-height-basis);tab-size:4;-moz-tab-size:4;word-break:break-word}.dnb-core-style *,.dnb-core-style :after,.dnb-core-style :before{background-repeat:no-repeat;box-sizing:border-box}.dnb-core-style :after,.dnb-core-style :before{text-decoration:inherit;vertical-align:inherit}.dnb-core-style hr{height:0;overflow:visible}.dnb-core-style main{display:block}.dnb-core-style nav ol,.dnb-core-style nav ul{list-style:none}.dnb-core-style abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}.dnb-core-style b,.dnb-core-style strong{font-weight:bolder}.dnb-core-style code,.dnb-core-style kbd,.dnb-core-style pre,.dnb-core-style samp{font-family:var(--font-family-monospace);font-size:var(--font-size-basis--em)}.dnb-core-style ::selection{background-color:#b3d4fc;color:#000;text-shadow:none}.dnb-core-style audio,.dnb-core-style canvas,.dnb-core-style iframe,.dnb-core-style img,.dnb-core-style svg,.dnb-core-style video{vertical-align:middle}.dnb-core-style audio,.dnb-core-style video{display:inline-block}.dnb-core-style audio:not([controls]){display:none;height:0}.dnb-core-style img{border-style:none}.dnb-core-style svg:not([fill]){fill:currentcolor}.dnb-core-style svg:not(:root){overflow:hidden}.dnb-core-style table{border-collapse:collapse}.dnb-core-style button,.dnb-core-style input,.dnb-core-style select,.dnb-core-style textarea{font-family:inherit;font-size:inherit;line-height:inherit}.dnb-core-style button,.dnb-core-style figure,.dnb-core-style input,.dnb-core-style select{margin:0}.dnb-core-style button{overflow:visible;text-transform:none}.dnb-core-style fieldset{padding:.35rem .75rem .625rem}.dnb-core-style input{overflow:visible;word-break:normal}.dnb-core-style legend{color:inherit;display:table;max-width:100%;white-space:normal}.dnb-core-style progress{display:inline-block;vertical-align:baseline}.dnb-core-style select{text-transform:none}.dnb-core-style textarea{overflow:auto;resize:vertical}.dnb-core-style [type=checkbox],.dnb-core-style [type=radio]{padding:0}.dnb-core-style input[type=search]{-webkit-appearance:textfield;appearance:textfield;outline-offset:-2px}.dnb-core-style ::-webkit-inner-spin-button,.dnb-core-style ::-webkit-outer-spin-button{height:auto}.dnb-core-style ::input-placeholder{color:inherit;opacity:.54}.dnb-core-style ::-webkit-search-decoration{-webkit-appearance:none;appearance:none}.dnb-core-style ::-webkit-file-upload-button{background-color:transparent;border:none;font:inherit}.dnb-core-style ::-moz-focus-inner{border-style:none;padding:0}.dnb-core-style details{display:block}.dnb-core-style summary{display:list-item}.dnb-core-style canvas{display:inline-block}.dnb-core-style template{display:none}.dnb-core-style [tabindex],.dnb-core-style a,.dnb-core-style area,.dnb-core-style button,.dnb-core-style input,.dnb-core-style label,.dnb-core-style select,.dnb-core-style summary,.dnb-core-style textarea{touch-action:manipulation}.dnb-core-style [hidden]{display:none}.dnb-core-style [aria-busy=true]{cursor:progress}.dnb-core-style [aria-controls]:not(input){cursor:pointer}.dnb-core-style [aria-disabled=true],.dnb-core-style [disabled]{cursor:not-allowed}.dnb-core-style [aria-hidden=false][hidden]:not(:focus){clip:rect(0,0,0,0);display:inherit;position:absolute}@media print{.dnb-core-style{background-color:#fff;color:#000}}.dnb-core-style .eufemia-theme{color:var(--theme-color-body,var(--color-black-80,#333));font-family:var(--font-family-default);font-size:var(--font-size-small);font-style:normal;font-weight:var(--font-weight-basis);line-height:var(--line-height-basis)}.dnb-no-focus,.dnb-tab-focus,.dnb-tab-focus:focus{outline:none}html[data-whatinput=keyboard] .dnb-tab-focus:focus{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-mouse-focus,.dnb-mouse-focus:focus{outline:none}html[data-whatinput=mouse] .dnb-mouse-focus:focus{box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-focus-ring,html[data-whatinput=mouse] .dnb-mouse-focus:focus{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent}.dnb-focus-ring{box-shadow:0 0 0 var(--border-width) var(--border-color)!important}.dnb-scrollbar-appearance{-webkit-overflow-scrolling:touch;-ms-overflow-style:auto;scrollbar-color:var(--scrollbar-thumb-color,#888) transparent}@supports not (scrollbar-color:auto){.dnb-scrollbar-appearance::-webkit-scrollbar{background-color:var(--scrollbar-track-color,#eee);border-radius:var(--scrollbar-thumb-width,.5rem)}.dnb-scrollbar-appearance::-webkit-scrollbar:vertical{width:var(--scrollbar-track-width,.5rem)}.dnb-scrollbar-appearance::-webkit-scrollbar:horizontal{height:var(--scrollbar-track-width,.5rem)}.dnb-scrollbar-appearance::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb-color,#888);border-radius:var(--scrollbar-thumb-width,.5rem)}.dnb-scrollbar-appearance::-webkit-scrollbar-thumb:hover{background-color:var(--scrollbar-thumb-hover-color,#666)}}.dnb-skip-link{opacity:.3;position:absolute;top:-100vh;transition:opacity .3s ease-out;z-index:0}.dnb-skip-link--active,.dnb-skip-link:focus{background-color:transparent;border:none;border-radius:0;box-shadow:none;color:var(--color-sea-green);font-size:var(--font-size-basis);left:40%;margin:0;outline:none;padding:.5rem 1rem;position:fixed;text-align:center;text-decoration:none;top:5%;user-select:none;-webkit-user-select:none;white-space:nowrap;z-index:9999}.dnb-skip-link--active:after,.dnb-skip-link:focus:after{background-color:hsla(0,0%,100%,.85);box-shadow:150vw 150vh 0 0 hsla(0,0%,100%,.85);content:"";height:150vh;left:-200vw;position:absolute;top:-200vh;width:150vw;z-index:-2}.dnb-skip-link--active:before,.dnb-skip-link:focus:before{background-color:var(--color-white);border-radius:1.5rem;content:"";height:100%;left:0;outline:none;position:absolute;top:0;width:100%;z-index:-1}html[data-whatinput=mouse] .dnb-skip-link--active:before,html[data-whatinput=mouse] .dnb-skip-link:focus:before{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-skip-link--active:hover:before,.dnb-skip-link:focus:hover:before{background-color:var(--color-mint-green-50)}.dnb-skip-link--active:active:before,.dnb-skip-link:focus:active:before{background-color:var(--color-emerald-green)}.dnb-skip-link--active:focus:not(:active):before,.dnb-skip-link:focus:focus:not(:active):before{outline:none}html[data-whatinput=keyboard] .dnb-skip-link--active:focus:not(:active):before,html[data-whatinput=keyboard] .dnb-skip-link:focus:focus:not(:active):before{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-skip-link--active:focus,.dnb-skip-link:focus:focus{opacity:1}.dnb-skip-link--active:focus:not(:hover):not(:active),.dnb-skip-link--active:hover,.dnb-skip-link:focus:focus:not(:hover):not(:active),.dnb-skip-link:focus:hover{background-color:transparent;box-shadow:none;color:var(--color-sea-green)}.dnb-skip-link--active:active,.dnb-skip-link:focus:active{background-color:transparent;color:var(--color-white)}html[data-whatintent=touch] .dnb-skip-link{display:none}.dnb-alignment-helper,.dnb-alignment-helper:before{speak:none;display:inline-block;font-size:var(--font-size-small);height:0;width:0}.dnb-alignment-helper:before{content:"‌"}.dnb-drop-shadow{box-shadow:var(--shadow-default)}.dnb-sr-only{-webkit-touch-callout:none!important;border:0!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;margin:0!important;max-height:1px!important;max-width:1px!important;overflow:hidden!important;padding:0!important;pointer-events:none!important;position:absolute!important;-webkit-user-select:none!important;user-select:none!important;white-space:nowrap!important}.dnb-suffix{font-size:var(--font-size-basis);line-height:var(--line-height-basis);padding-left:.5rem;word-break:normal}
+@charset "UTF-8";html{font-size:100%}html:not([data-visual-test]){scroll-behavior:smooth}@supports (-webkit-touch-callout:none){@supports (font:-apple-system-body){html{font:-apple-system-body}}}html[xmlns="http://www.w3.org/1999/xhtml"] a:hover{text-decoration:none}html[xmlns="http://www.w3.org/1999/xhtml"] .dnb-anchor--active{color:var(--color-mint-green)!important}html[xmlns="http://www.w3.org/1999/xhtml"] .dnb-anchor--contrast:not(:hover){color:var(--color-white)!important}html[xmlns="http://www.w3.org/1999/xhtml"] a.dnb-button--primary{color:var(--color-white)}html[xmlns="http://www.w3.org/1999/xhtml"] ul{list-style:initial}html[xmlns="http://www.w3.org/1999/xhtml"] p{background-color:initial;overflow:initial;text-align:inherit}html[xmlns="http://www.w3.org/1999/xhtml"] i{font-style:italic}html[xmlns="http://www.w3.org/1999/xhtml"] #column_left,html[xmlns="http://www.w3.org/1999/xhtml"] #root{width:100%}html[xmlns="http://www.w3.org/1999/xhtml"] body#dnbLayoutDefault #wrapper,html[xmlns="http://www.w3.org/1999/xhtml"] body#dnbLayoutDefaultStartPage #wrapper{max-width:60rem;width:100%}html[xmlns="http://www.w3.org/1999/xhtml"] #column_content{box-shadow:none}body{margin:0}.dnb-core-style{-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:var(--theme-color-body,var(--color-black-80,#333));font-family:var(--font-family-default);font-size:var(--font-size-small);font-style:normal;font-weight:var(--font-weight-basis);line-height:var(--line-height-basis);tab-size:4;-moz-tab-size:4;word-break:break-word}.dnb-core-style *,.dnb-core-style :after,.dnb-core-style :before{background-repeat:no-repeat;box-sizing:border-box}.dnb-core-style :after,.dnb-core-style :before{text-decoration:inherit;vertical-align:inherit}.dnb-core-style hr{height:0;overflow:visible}.dnb-core-style main{display:block}.dnb-core-style nav ol,.dnb-core-style nav ul{list-style:none}.dnb-core-style abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}.dnb-core-style b,.dnb-core-style strong{font-weight:bolder}.dnb-core-style code,.dnb-core-style kbd,.dnb-core-style pre,.dnb-core-style samp{font-family:var(--font-family-monospace);font-size:var(--font-size-basis--em)}.dnb-core-style ::selection{background-color:#b3d4fc;color:#000;text-shadow:none}.dnb-core-style audio,.dnb-core-style canvas,.dnb-core-style iframe,.dnb-core-style img,.dnb-core-style svg,.dnb-core-style video{vertical-align:middle}.dnb-core-style audio,.dnb-core-style video{display:inline-block}.dnb-core-style audio:not([controls]){display:none;height:0}.dnb-core-style img{border-style:none}.dnb-core-style svg:not([fill]){fill:currentcolor}.dnb-core-style svg:not(:root){overflow:hidden}.dnb-core-style table{border-collapse:collapse}.dnb-core-style button,.dnb-core-style input,.dnb-core-style select,.dnb-core-style textarea{font-family:inherit;font-size:inherit;line-height:inherit}.dnb-core-style button,.dnb-core-style figure,.dnb-core-style input,.dnb-core-style select{margin:0}.dnb-core-style button{overflow:visible;text-transform:none}.dnb-core-style fieldset{padding:.35rem .75rem .625rem}.dnb-core-style input{overflow:visible;word-break:normal}.dnb-core-style legend{color:inherit;display:table;max-width:100%;white-space:normal}.dnb-core-style progress{display:inline-block;vertical-align:baseline}.dnb-core-style select{text-transform:none}.dnb-core-style textarea{overflow:auto;resize:vertical}.dnb-core-style [type=checkbox],.dnb-core-style [type=radio]{padding:0}.dnb-core-style input[type=search]{-webkit-appearance:textfield;appearance:textfield;outline-offset:-2px}.dnb-core-style ::-webkit-inner-spin-button,.dnb-core-style ::-webkit-outer-spin-button{height:auto}.dnb-core-style ::input-placeholder{color:inherit;opacity:.54}.dnb-core-style ::-webkit-search-decoration{-webkit-appearance:none;appearance:none}.dnb-core-style ::-webkit-file-upload-button{background-color:transparent;border:none;font:inherit}.dnb-core-style ::-moz-focus-inner{border-style:none;padding:0}.dnb-core-style details{display:block}.dnb-core-style summary{display:list-item}.dnb-core-style canvas{display:inline-block}.dnb-core-style template{display:none}.dnb-core-style [tabindex],.dnb-core-style a,.dnb-core-style area,.dnb-core-style button,.dnb-core-style input,.dnb-core-style label,.dnb-core-style select,.dnb-core-style summary,.dnb-core-style textarea{touch-action:manipulation}.dnb-core-style [hidden]{display:none}.dnb-core-style [aria-busy=true]{cursor:progress}.dnb-core-style [aria-controls]:not(input){cursor:pointer}.dnb-core-style [aria-disabled=true],.dnb-core-style [disabled]{cursor:not-allowed}.dnb-core-style [aria-hidden=false][hidden]:not(:focus){clip:rect(0,0,0,0);display:inherit;position:absolute}@media print{.dnb-core-style{background-color:#fff;color:#000}}.dnb-core-style .eufemia-theme{color:var(--theme-color-body,var(--color-black-80,#333));font-family:var(--font-family-default);font-size:var(--font-size-small);font-style:normal;font-weight:var(--font-weight-basis);line-height:var(--line-height-basis)}.dnb-no-focus,.dnb-tab-focus,.dnb-tab-focus:focus{outline:none}html[data-whatinput=keyboard] .dnb-tab-focus:focus{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-mouse-focus,.dnb-mouse-focus:focus{outline:none}html[data-whatinput=mouse] .dnb-mouse-focus:focus{box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-focus-ring,html[data-whatinput=mouse] .dnb-mouse-focus:focus{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent}.dnb-focus-ring{box-shadow:0 0 0 var(--border-width) var(--border-color)!important}.dnb-scrollbar-appearance{-webkit-overflow-scrolling:touch;-ms-overflow-style:auto;scrollbar-color:var(--scrollbar-thumb-color,#888) transparent}@supports not (scrollbar-color:auto){.dnb-scrollbar-appearance::-webkit-scrollbar{background-color:var(--scrollbar-track-color,#eee);border-radius:var(--scrollbar-thumb-width,.5rem)}.dnb-scrollbar-appearance::-webkit-scrollbar:vertical{width:var(--scrollbar-track-width,.5rem)}.dnb-scrollbar-appearance::-webkit-scrollbar:horizontal{height:var(--scrollbar-track-width,.5rem)}.dnb-scrollbar-appearance::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb-color,#888);border-radius:var(--scrollbar-thumb-width,.5rem)}.dnb-scrollbar-appearance::-webkit-scrollbar-thumb:hover{background-color:var(--scrollbar-thumb-hover-color,#666)}}.dnb-skip-link{opacity:.3;position:absolute;top:-100vh;transition:opacity .3s ease-out;z-index:0}.dnb-skip-link--active,.dnb-skip-link:focus{background-color:transparent;border:none;border-radius:0;box-shadow:none;color:var(--skip-link-color);font-size:var(--font-size-basis);left:40%;margin:0;outline:none;padding:.5rem 1rem;position:fixed;text-align:center;text-decoration:none;top:5%;user-select:none;-webkit-user-select:none;white-space:nowrap;z-index:9999}.dnb-skip-link--active:after,.dnb-skip-link:focus:after{background-color:hsla(0,0%,100%,.85);box-shadow:150vw 150vh 0 0 hsla(0,0%,100%,.85);content:"";height:150vh;left:-200vw;position:absolute;top:-200vh;width:150vw;z-index:-2}.dnb-skip-link--active:before,.dnb-skip-link:focus:before{background-color:var(--skip-link-background);border-radius:1.5rem;content:"";height:100%;left:0;outline:none;position:absolute;top:0;width:100%;z-index:-1}html[data-whatinput=mouse] .dnb-skip-link--active:before,html[data-whatinput=mouse] .dnb-skip-link:focus:before{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-skip-link--active:hover:before,.dnb-skip-link:focus:hover:before{background-color:var(--skip-link-background--hover)}.dnb-skip-link--active:active:before,.dnb-skip-link:focus:active:before{background-color:var(--skip-link-background--active)}.dnb-skip-link--active:focus:not(:active):before,.dnb-skip-link:focus:focus:not(:active):before{outline:none}html[data-whatinput=keyboard] .dnb-skip-link--active:focus:not(:active):before,html[data-whatinput=keyboard] .dnb-skip-link:focus:focus:not(:active):before{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-skip-link--active:focus,.dnb-skip-link:focus:focus{opacity:1}.dnb-skip-link--active:hover,.dnb-skip-link:focus:hover{background-color:transparent;box-shadow:none;color:var(--skip-link-color--hover)}.dnb-skip-link--active:focus:not(:hover):not(:active),.dnb-skip-link:focus:focus:not(:hover):not(:active){background-color:transparent;box-shadow:none;color:var(--skip-link-color)}.dnb-skip-link--active:active,.dnb-skip-link:focus:active{background-color:transparent;color:var(--skip-link-color--active)}html[data-whatintent=touch] .dnb-skip-link{display:none}.dnb-alignment-helper,.dnb-alignment-helper:before{speak:none;display:inline-block;font-size:var(--font-size-small);height:0;width:0}.dnb-alignment-helper:before{content:"‌"}.dnb-drop-shadow{box-shadow:var(--shadow-default)}.dnb-sr-only{-webkit-touch-callout:none!important;border:0!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;margin:0!important;max-height:1px!important;max-width:1px!important;overflow:hidden!important;padding:0!important;pointer-events:none!important;position:absolute!important;-webkit-user-select:none!important;user-select:none!important;white-space:nowrap!important}.dnb-suffix{font-size:var(--font-size-basis);line-height:var(--line-height-basis);padding-left:.5rem;word-break:normal}

package/style/dnb-ui-basis.scss

@@ -10,7 +10,7 @@
 @include htmlDefault();
 
 // The only style we use on body is to reset the margin
-// the rest goas inside dnb-core-style
+// the rest goes inside dnb-core-style
 body {
   margin: 0;
 }

package/style/dnb-ui-body.css

@@ -133,7 +133,7 @@ body {
   /* Embedded content
    */
   /*
-   * Change the alignment on media elements in all browers (opinionated).
+   * Change the alignment on media elements in all browsers (opinionated).
    */
   /**
    * Add the correct display in IE 9-.

package/style/dnb-ui-components.css

@@ -34,6 +34,9 @@
   --drawer-list-height--small: 1.5rem;
   --drawer-list-height--medium: 2.5rem;
   --drawer-list-height--large: 3rem;
+  --drawer-list-option-inner-background: var(--color-white);
+  --drawer-list-list-background: var(--color-white);
+  --drawer-list-list-line-height: var(--line-height-basis);
   display: block;
   position: relative;
   width: inherit;
@@ -77,8 +80,8 @@ html[data-visual-test] .dnb-drawer-list__portal__style {
   margin: 0;
   padding: 0;
   font-size: var(--font-size-basis);
-  line-height: var(--line-height-basis);
-  background-color: transparent;
+  line-height: var(--drawer-list-list-line-height);
+  background-color: var(--drawer-list-list-background);
   transform: translateY(0);
   transition: transform 200ms, opacity 160ms ease-out;
 }
@@ -156,7 +159,7 @@ html[data-visual-test] .dnb-drawer-list--scroll .dnb-drawer-list__options, .dnb-
   margin: 0;
   padding: 1rem;
   color: inherit;
-  background-color: var(--color-white);
+  background-color: var(--drawer-list-option-inner-background);
 }
 .dnb-drawer-list__option__inner > * {
   align-self: self-start;
@@ -2227,7 +2230,6 @@ html[data-whatinput=keyboard] .dnb-date-picker table.dnb-no-focus:focus {
   margin: 0;
   padding: 0;
   border: none;
-  line-height: var(--font-size-basis--em);
 }
 
 @keyframes date-picker-slide-down {
@@ -2923,8 +2925,14 @@ html:not([data-visual-test]) .dnb-drawer--hide.dnb-drawer--bottom {
   --dropdown-height--large: 3rem;
   --dropdown-padding-horizontal: 1rem;
   --dropdown-focus-border-width: 0.125rem;
+  --dropdown-error-border-width: 0.125rem;
   --dropdown-text-padding: 0.5rem;
+  --dropdown-button-padding: 0 1rem;
   --dropdown-border-radius: 0.25rem;
+  --dropdown-foreground-color-primary: var(--color-black-55);
+  --dropdown-foreground-color-error: var(--color-fire-red);
+  --dropdown-background-color-disabled: var(--color-black-3);
+  --dropdown-background-color-error-active: var(--color-fire-red-8);
   display: inline-flex;
   align-items: center;
   font-size: var(--font-size-small);
@@ -2970,7 +2978,7 @@ html:not([data-visual-test]) .dnb-drawer--hide.dnb-drawer--bottom {
   width: 100%;
 }
 .dnb-dropdown__trigger.dnb-button {
-  padding: 0 1rem;
+  padding: var(--dropdown-button-padding);
   border-radius: var(--dropdown-border-radius);
 }
 .dnb-dropdown--is-popup .dnb-dropdown__trigger.dnb-button {
@@ -2996,6 +3004,38 @@ html:not([data-visual-test]) .dnb-drawer--hide.dnb-drawer--bottom {
   white-space: nowrap;
   text-overflow: inherit;
 }
+.dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger {
+  --border-color: var(--dropdown-foreground-color-error);
+  --border-width: 0.0625rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+html:not([data-whatintent=touch]) .dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger:hover[disabled] {
+  cursor: not-allowed;
+}
+html:not([data-whatintent=touch]) .dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger:hover:not([disabled]) {
+  color: var(--dropdown-foreground-color-error);
+  --border-color: var(--dropdown-foreground-color-error);
+  --border-width: var(--dropdown-error-border-width);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+html:not([data-whatintent=touch]) .dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger:hover:not([disabled]) .dnb-dropdown__icon .dnb-icon {
+  color: var(--dropdown-foreground-color-error);
+}
+.dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger:active[disabled], html:not([data-whatintent=touch]) .dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger:active[disabled] {
+  cursor: not-allowed;
+}
+.dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger:active:not([disabled]) {
+  color: var(--dropdown-foreground-color-error);
+  background-color: var(--dropdown-background-color-error-active);
+}
+.dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger, .dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__icon {
+  color: var(--dropdown-foreground-color-error);
+}
+.dnb-dropdown > .dnb-form-status {
+  transform: translateY(-0.4375rem);
+}
 .dnb-dropdown--icon-position-left .dnb-dropdown__text {
   order: 2;
   padding-right: 0;
@@ -3398,7 +3438,6 @@ legend.dnb-form-label {
   margin: 0;
   padding: 0;
   border: none;
-  line-height: var(--font-size-basis--em);
   width: 100%;
 }
 
@@ -3590,14 +3629,12 @@ button .dnb-form-status__text {
   position: relative;
   cursor: text;
   min-height: 4.5rem;
-}
-.dnb-global-status__title.dnb-p {
   display: flex;
   align-items: center;
   padding: 1rem 5rem 1rem 2.5rem;
-  margin-bottom: 0.5rem;
+  font-size: var(--font-size-basis);
 }
-.dnb-spacing .dnb-global-status__title.dnb-p, .dnb-spacing .dnb-global-status__title.dnb-p:not([class*=dnb-space]) {
+.dnb-global-status__title .dnb-p, .dnb-spacing .dnb-global-status__title .dnb-p, .dnb-spacing .dnb-global-status__title .dnb-p:not([class*=dnb-space]) {
   margin: 0;
 }
 .dnb-global-status__message {
@@ -3928,8 +3965,7 @@ p > .dnb-icon {
   --input-height--small: 1.5rem;
   --input-height--medium: 2.5rem;
   --input-height--large: 3rem;
-  --input-border-width: 0.0625rem;
-  --input-border-radius: 0.25rem;
+  --input-background-color: var(--color-white);
   display: inline-flex;
   align-items: center;
   font-size: var(--input-font-small);
@@ -3996,6 +4032,9 @@ p > .dnb-icon {
 .dnb-input__input::-ms-clear {
   display: none;
 }
+.dnb-input__input:autofill {
+  box-shadow: 0 0 0 var(--input-border-width) var(--input-border-color), 0 0 0 10em var(--input-background-color) inset;
+}
 .dnb-input ::-webkit-file-upload-button {
   cursor: pointer;
   outline: none;
@@ -4266,6 +4305,63 @@ html[data-visual-test] .dnb-input__input {
   font-family: var(--font-family-monospace);
 }
 
+.dnb-multi-input-mask__fieldset {
+  margin: 0;
+  padding: 0;
+  border: none;
+}
+.dnb-multi-input-mask__fieldset--horizontal {
+  display: inline-flex;
+  flex-flow: row wrap;
+  align-items: baseline;
+  grid-gap: 1rem;
+  gap: 1rem;
+}
+
+.dnb-multi-input-mask__input {
+  display: inline-block;
+  width: auto;
+  margin: 0;
+  padding: 0 0.125rem;
+  transform: translateY(0);
+  outline: none;
+  font-family: var(--font-family-monospace);
+  text-align: center;
+  border: none;
+  background: transparent;
+  overflow: visible;
+  white-space: nowrap;
+}
+.dnb-multi-input-mask__input:first-of-type {
+  padding-left: 0.5rem;
+}
+.dnb-multi-input-mask__input:last-of-type {
+  padding-right: 0.5rem;
+}
+
+.dnb-multi-input-mask {
+  width: -moz-fit-content;
+  width: fit-content;
+}
+.dnb-multi-input-mask:not(.dnb-input__status--error) .dnb-multi-input-mask__input,
+.dnb-multi-input-mask:not(.dnb-input__status--error) .dnb-multi-input-mask__delimiter {
+  color: var(--color-black-55);
+}
+.dnb-multi-input-mask:not(.dnb-input__status--error) .dnb-multi-input-mask__input--highlight,
+.dnb-multi-input-mask:not(.dnb-input__status--error) .dnb-multi-input-mask__delimiter--highlight {
+  color: var(--color-black);
+}
+.dnb-multi-input-mask .dnb-input__shell:focus-within {
+  box-shadow: 0 0 0 var(--input-border-width--focus) var(--input-border-color--hover);
+}
+
+.dnb-multi-input-mask__legend--horizontal.dnb-form-label {
+  display: contents;
+}
+.dnb-multi-input-mask__legend:not([disabled]):hover ~ .dnb-multi-input-mask .dnb-input__shell {
+  box-shadow: 0 0 0 var(--input-border-width--focus) var(--input-border-color--hover);
+}
+
 /*
  * Logo Component
  *
@@ -5094,7 +5190,6 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
   margin: 0;
   padding: 0;
   border: none;
-  line-height: var(--font-size-basis--em);
 }
 .dnb-radio-group .dnb-radio {
   margin-right: var(--radio-group-margin-right);
@@ -5137,18 +5232,74 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
 .dnb-section {
   position: relative;
   display: flow-root;
+  --breakout--on: visible;
+  --breakout--off: hidden;
+  --rounded-corner--value: 0.75rem;
+  --outline: 0 0 0 1px var(--outline-color, transparent);
+  --top: 0;
+  --left: -100vw;
+  --width: 100vw;
+  --height: 100%;
+  box-shadow: var(--outline, none);
+  color: var(--text-color, black);
+  border-radius: var(--rounded-corner, 0);
+}
+.dnb-section[style*="--background-color"] {
+  background-color: var(--background-color, white);
 }
 .dnb-section::after {
   content: "";
+  visibility: var(--breakout, hidden);
   position: absolute;
   z-index: -15;
-  left: -100vw;
-  top: 0;
-  width: 100vw;
-  height: 100%;
-  color: var(--color-mint-green-12); /** deprecated: should be white in v11 */
+  left: var(--left);
+  top: var(--top);
+  width: var(--width);
+  height: var(--height);
+  color: var(--background-color, currentcolor);
   background-color: currentcolor;
-  box-shadow: 99vw 0 0 0 currentcolor, 198vw 0 0 0 currentcolor, 297vw 0 0 0 currentcolor, 396vw 0 0 0 currentcolor;
+  --box-shadow: 99vw 0 0 0 currentcolor, 198vw 0 0 0 currentcolor,
+    297vw 0 0 0 currentcolor, 396vw 0 0 0 currentcolor;
+  box-shadow: var(--box-shadow);
+}
+.dnb-section:not([style*="--breakout"]) {
+  --breakout: var(--breakout--on);
+}
+@media screen and (max-width: 60em) {
+  .dnb-section {
+    --breakout: var(--breakout--small, var(--breakout--fallback));
+    --background-color--value: var(--background-color--small);
+    --text-color--value: var(--text-color--small);
+    --outline-color: var(--outline-color--small);
+    --rounded-corner: var(
+      --rounded-corner--small,
+      var(--rounded-corner--fallback)
+    );
+  }
+}
+@media screen and (max-width: 59.9375em) and (min-width: 40.0625em) {
+  .dnb-section {
+    --breakout: var(--breakout--medium, var(--breakout--fallback));
+    --background-color--value: var(--background-color--medium);
+    --text-color--value: var(--text-color--medium);
+    --outline-color: var(--outline-color--medium);
+    --rounded-corner: var(
+      --rounded-corner--medium,
+      var(--rounded-corner--fallback)
+    );
+  }
+}
+@media screen and (min-width: 60em) {
+  .dnb-section {
+    --breakout: var(--breakout--large, var(--breakout--fallback));
+    --background-color--value: var(--background-color--large);
+    --text-color--value: var(--text-color--large);
+    --outline-color: var(--outline-color--large);
+    --rounded-corner: var(
+      --rounded-corner--large,
+      var(--rounded-corner--fallback)
+    );
+  }
 }
 .dnb-section .dnb-section::after {
   z-index: -14;
@@ -5175,22 +5326,28 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
   z-index: -7;
 }
 .dnb-section--spacing-x-small {
-  padding: var(--spacing-x-small) 0;
+  padding-top: var(--spacing-x-small);
+  padding-bottom: var(--spacing-x-small);
 }
 .dnb-section--spacing-small {
-  padding: var(--spacing-small) 0;
+  padding-top: var(--spacing-small);
+  padding-bottom: var(--spacing-small);
 }
 .dnb-section--spacing-medium {
-  padding: var(--spacing-medium) 0;
+  padding-top: var(--spacing-medium);
+  padding-bottom: var(--spacing-medium);
+}
+.dnb-section--spacing, .dnb-section--spacing-large {
+  padding-top: var(--spacing-large);
+  padding-bottom: var(--spacing-large);
 }
 .dnb-section--spacing-x-large {
-  padding: var(--spacing-x-large) 0;
+  padding-top: var(--spacing-x-large);
+  padding-bottom: var(--spacing-x-large);
 }
 .dnb-section--spacing-xx-large {
-  padding: var(--spacing-xx-large) 0;
-}
-.dnb-section--spacing, .dnb-section--spacing-large {
-  padding: var(--spacing-large) 0;
+  padding-top: var(--spacing-xx-large);
+  padding-bottom: var(--spacing-xx-large);
 }
 
 /*
@@ -6176,6 +6333,42 @@ html[data-whatinput=keyboard] .dnb-slider__button-helper:not(:disabled):focus ~
 .dnb-space__reset:not([class*=dnb-space__right]) {
   margin-right: 0;
 }
+.dnb-space[style*="--space-t-"] {
+  padding-top: var(--padding-top, 0);
+}
+.dnb-space[style*="--space-r-"] {
+  padding-right: var(--padding-right, 0);
+}
+.dnb-space[style*="--space-b-"] {
+  padding-bottom: var(--padding-bottom, 0);
+}
+.dnb-space[style*="--space-l-"] {
+  padding-left: var(--padding-left, 0);
+}
+@media screen and (max-width: 60em) {
+  .dnb-space {
+    --padding-right: var(--space-r-s);
+    --padding-left: var(--space-l-s);
+    --padding-top: var(--space-t-s);
+    --padding-bottom: var(--space-b-s);
+  }
+}
+@media screen and (max-width: 59.9375em) and (min-width: 40.0625em) {
+  .dnb-space {
+    --padding-right: var(--space-r-m);
+    --padding-left: var(--space-l-m);
+    --padding-top: var(--space-t-m);
+    --padding-bottom: var(--space-b-m);
+  }
+}
+@media screen and (min-width: 60em) {
+  .dnb-space {
+    --padding-right: var(--space-r-l);
+    --padding-left: var(--space-l-l);
+    --padding-top: var(--space-t-l);
+    --padding-bottom: var(--space-b-l);
+  }
+}
 
 span.dnb-space--no-collapse > span {
   display: block;
@@ -7677,6 +7870,7 @@ html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover:not([disa
 .dnb-textarea {
   --textarea-padding-width: 0.5rem;
   --textarea-rows: 2;
+  --textarea-background-color: var(--color-white);
   display: inline-flex;
   font-size: var(--font-size-small);
   line-height: var(--line-height-basis);
@@ -7746,6 +7940,9 @@ html:not([data-visual-test]) .dnb-textarea__textarea {
     background-color: var(--scrollbar-thumb-hover-color, #666);
   }
 }
+.dnb-textarea__input:autofill {
+  box-shadow: 0 0 0 var(--border-width) var(--border-color), 0 0 0 10em var(--textarea-background-color) inset;
+}
 .dnb-textarea__placeholder {
   pointer-events: none;
   position: absolute;
@@ -7998,7 +8195,6 @@ html[data-visual-test] .dnb-textarea__textarea {
   margin: 0;
   padding: 0;
   border: none;
-  line-height: var(--font-size-basis--em);
 }
 .dnb-toggle-button-group .dnb-toggle-button {
   margin-right: var(--toggle-button-group-margin-right);