@dnb/eufemia 10.73.2 → 10.75.0

package/cjs/style/dnb-ui-core.css

@@ -268,7 +268,7 @@ body,
   /* stylelint-disable-next-line */
   -webkit-text-size-adjust: 100%;
   word-break: break-word;
-  --eufemia-version: "10.73.2";
+  --eufemia-version: "10.75.0";
 }
 body *,
 body ::before,

package/cjs/style/dnb-ui-core.min.css

@@ -1 +1 @@
-@charset "UTF-8";html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;cursor:default;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:var(--line-height-basis);tab-size:4;word-break:break-word}body{margin:0}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"] .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"] .dnb-ul{list-style:initial}html[xmlns="http://www.w3.org/1999/xhtml"] .dnb-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{padding:0;width:100%}html[xmlns="http://www.w3.org/1999/xhtml"] #column_content{box-shadow:none}.dnb-core-style,body{-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%;--eufemia-version:"10.73.2";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,body *,body :after,body :before{background-repeat:no-repeat;box-sizing:border-box}.dnb-core-style :after,.dnb-core-style :before,body :after,body :before{text-decoration:inherit;vertical-align:inherit}.dnb-core-style hr,body hr{height:0;overflow:visible}.dnb-core-style main,body main{display:block}.dnb-core-style nav ol,.dnb-core-style nav ul,body nav ol,body nav ul{list-style:none}.dnb-core-style abbr[title],body abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}.dnb-core-style b,.dnb-core-style strong,body b,body strong{font-weight:bolder}.dnb-core-style code,.dnb-core-style kbd,.dnb-core-style pre,.dnb-core-style samp,body code,body kbd,body pre,body samp{font-family:var(--font-family-monospace)}.dnb-core-style ::selection,body ::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,body audio,body canvas,body iframe,body img,body svg,body video{vertical-align:middle}.dnb-core-style audio,.dnb-core-style video,body audio,body video{display:inline-block}.dnb-core-style audio:not([controls]),body audio:not([controls]){display:none;height:0}.dnb-core-style img,body img{border-style:none}.dnb-core-style svg:not([fill]),body svg:not([fill]){fill:currentcolor}.dnb-core-style svg:not(:root),body svg:not(:root){overflow:hidden}.dnb-core-style table,body table{border-collapse:collapse}.dnb-core-style button,.dnb-core-style input,.dnb-core-style select,.dnb-core-style textarea,body button,body input,body select,body 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,body button,body figure,body input,body select{margin:0}.dnb-core-style button,body button{overflow:visible;text-transform:none}.dnb-core-style input,body input{overflow:visible;word-break:normal}.dnb-core-style legend,body legend{color:inherit;display:table;max-width:100%;white-space:normal}.dnb-core-style progress,body progress{display:inline-block;vertical-align:baseline}.dnb-core-style select,body select{text-transform:none}.dnb-core-style textarea,body textarea{overflow:auto;resize:vertical}.dnb-core-style [type=checkbox],.dnb-core-style [type=radio],body [type=checkbox],body [type=radio]{padding:0}.dnb-core-style input[type=search],body 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,body ::-webkit-inner-spin-button,body ::-webkit-outer-spin-button{height:auto}.dnb-core-style ::input-placeholder,body ::input-placeholder{color:inherit;opacity:.54}.dnb-core-style ::-webkit-search-decoration,body ::-webkit-search-decoration{-webkit-appearance:none;appearance:none}.dnb-core-style ::-webkit-file-upload-button,body ::-webkit-file-upload-button{background-color:transparent;border:none;font:inherit}.dnb-core-style ::-moz-focus-inner,body ::-moz-focus-inner{border-style:none;padding:0}.dnb-core-style details,body details{display:block}.dnb-core-style summary,body summary{display:list-item}.dnb-core-style canvas,body canvas{display:inline-block}.dnb-core-style template,body 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,body [tabindex],body a,body area,body button,body input,body label,body select,body summary,body textarea{touch-action:manipulation}.dnb-core-style [hidden],body [hidden]{display:none}.dnb-core-style [aria-busy=true],body [aria-busy=true]{cursor:progress}.dnb-core-style [aria-controls]:not(input),body [aria-controls]:not(input){cursor:pointer}.dnb-core-style [aria-disabled=true],.dnb-core-style [disabled],body [aria-disabled=true],body [disabled]{cursor:not-allowed}.dnb-core-style [aria-hidden=false][hidden]:not(:focus),body [aria-hidden=false][hidden]:not(:focus){clip:rect(0,0,0,0);display:inherit;position:absolute}@media print{.dnb-core-style,body{background-color:#fff;color:#000}}.dnb-core-style .eufemia-theme,body .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;-webkit-text-decoration:none;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;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{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;cursor:default;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:var(--line-height-basis);tab-size:4;word-break:break-word}body{margin:0}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"] .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"] .dnb-ul{list-style:initial}html[xmlns="http://www.w3.org/1999/xhtml"] .dnb-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{padding:0;width:100%}html[xmlns="http://www.w3.org/1999/xhtml"] #column_content{box-shadow:none}.dnb-core-style,body{-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%;--eufemia-version:"10.75.0";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,body *,body :after,body :before{background-repeat:no-repeat;box-sizing:border-box}.dnb-core-style :after,.dnb-core-style :before,body :after,body :before{text-decoration:inherit;vertical-align:inherit}.dnb-core-style hr,body hr{height:0;overflow:visible}.dnb-core-style main,body main{display:block}.dnb-core-style nav ol,.dnb-core-style nav ul,body nav ol,body nav ul{list-style:none}.dnb-core-style abbr[title],body abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}.dnb-core-style b,.dnb-core-style strong,body b,body strong{font-weight:bolder}.dnb-core-style code,.dnb-core-style kbd,.dnb-core-style pre,.dnb-core-style samp,body code,body kbd,body pre,body samp{font-family:var(--font-family-monospace)}.dnb-core-style ::selection,body ::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,body audio,body canvas,body iframe,body img,body svg,body video{vertical-align:middle}.dnb-core-style audio,.dnb-core-style video,body audio,body video{display:inline-block}.dnb-core-style audio:not([controls]),body audio:not([controls]){display:none;height:0}.dnb-core-style img,body img{border-style:none}.dnb-core-style svg:not([fill]),body svg:not([fill]){fill:currentcolor}.dnb-core-style svg:not(:root),body svg:not(:root){overflow:hidden}.dnb-core-style table,body table{border-collapse:collapse}.dnb-core-style button,.dnb-core-style input,.dnb-core-style select,.dnb-core-style textarea,body button,body input,body select,body 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,body button,body figure,body input,body select{margin:0}.dnb-core-style button,body button{overflow:visible;text-transform:none}.dnb-core-style input,body input{overflow:visible;word-break:normal}.dnb-core-style legend,body legend{color:inherit;display:table;max-width:100%;white-space:normal}.dnb-core-style progress,body progress{display:inline-block;vertical-align:baseline}.dnb-core-style select,body select{text-transform:none}.dnb-core-style textarea,body textarea{overflow:auto;resize:vertical}.dnb-core-style [type=checkbox],.dnb-core-style [type=radio],body [type=checkbox],body [type=radio]{padding:0}.dnb-core-style input[type=search],body 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,body ::-webkit-inner-spin-button,body ::-webkit-outer-spin-button{height:auto}.dnb-core-style ::input-placeholder,body ::input-placeholder{color:inherit;opacity:.54}.dnb-core-style ::-webkit-search-decoration,body ::-webkit-search-decoration{-webkit-appearance:none;appearance:none}.dnb-core-style ::-webkit-file-upload-button,body ::-webkit-file-upload-button{background-color:transparent;border:none;font:inherit}.dnb-core-style ::-moz-focus-inner,body ::-moz-focus-inner{border-style:none;padding:0}.dnb-core-style details,body details{display:block}.dnb-core-style summary,body summary{display:list-item}.dnb-core-style canvas,body canvas{display:inline-block}.dnb-core-style template,body 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,body [tabindex],body a,body area,body button,body input,body label,body select,body summary,body textarea{touch-action:manipulation}.dnb-core-style [hidden],body [hidden]{display:none}.dnb-core-style [aria-busy=true],body [aria-busy=true]{cursor:progress}.dnb-core-style [aria-controls]:not(input),body [aria-controls]:not(input){cursor:pointer}.dnb-core-style [aria-disabled=true],.dnb-core-style [disabled],body [aria-disabled=true],body [disabled]{cursor:not-allowed}.dnb-core-style [aria-hidden=false][hidden]:not(:focus),body [aria-hidden=false][hidden]:not(:focus){clip:rect(0,0,0,0);display:inherit;position:absolute}@media print{.dnb-core-style,body{background-color:#fff;color:#000}}.dnb-core-style .eufemia-theme,body .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;-webkit-text-decoration:none;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;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/cjs/style/dnb-ui-extensions.css

@@ -998,8 +998,9 @@ html[data-visual-test] .dnb-forms-submit-indicator__content b {
 }
 
 /*
- * PaymentCard component
- *
+ * PaymentCard component styles
+ * This file provides styling for the PaymentCard component, including general design tokens
+ * and variations for different card types (e.g., default, pluss, gold, etc.).
  */
 /*
  * Utilities
@@ -1102,250 +1103,259 @@ html[data-visual-test] .dnb-forms-submit-indicator__content b {
 }
 
 .dnb-payment-card {
+  /*
+   * Define custom CSS variables used throughout the PaymentCard component.
+   * These variables allow for reusable colors, border-radius, and overlay background transitions.
+   */
   --color-dark-cyan: #003b47;
-  --dnb-payment-bg-default: linear-gradient(
-    187.2deg,
-    #008484 6.31%,
-    var(--color-sea-green) 82.66%
-  );
-  --dnb-payment-bg-pluss: linear-gradient(
-      187.2deg,
-      var(--color-dark-cyan) 6.31%,
-      var(--color-ocean-green) 82.66%
-    ),
-    var(--color-emerald-green);
-  --dnb-payment-bg-white: linear-gradient(
-    184.55deg,
-    var(--color-black-background) 4.63%,
-    var(--color-white) 92.04%
-  );
-  --dnb-payment-bg-gold: linear-gradient(
-    184.55deg,
-    #bfa970 4.63%,
-    #d3bd83 84.57%
-  );
-  --dnb-payment-bg-saga: linear-gradient(
-    187.2deg,
-    #1c1c1c 6.31%,
-    #000 82.66%
-  );
-  --dnb-payment-bg-private: linear-gradient(
-    187.2deg,
-    #1c1c1c 6.31%,
-    #000 82.66%
-  );
-  --dnb-payment-bg-business-no-visa: linear-gradient(
-      187.2deg,
-      var(--color-dark-cyan) 6.31%,
-      var(--color-ocean-green) 82.66%
-    ),
-    var(--color-emerald-green);
-  --dnb-payment-bg-business-with-visa: linear-gradient(
-      187.2deg,
-      var(--color-dark-cyan) 6.31%,
-      var(--color-ocean-green) 82.66%
-    ),
-    var(--color-emerald-green);
+  --dnb-payment-bg-default: var(--color-sea-green);
+  --dnb-payment-bg-pluss: var(--color-ocean-green);
+  --dnb-payment-bg-white: var(--color-white);
+  --dnb-payment-bg-gold: #D8C583;
+  --dnb-payment-bg-black-gold: #1F1B10;
+  --dnb-payment-bg-black-grey: #1C1C1E;
+  --dnb-payment-overlay-bg-dark: rgba(0 0 0 / 60%);
+  --dnb-payment-overlay-bg-light: rgba(255 255 255 / 70%);
+  --dnb-payment-border-radius: 12px;
   margin: 0;
+  border-radius: var(--dnb-payment-border-radius);
+  /*
+   * Base styles for the card element including size, padding, color, and shadow.
+   * This serves as the core design for all PaymentCard variations.
+   */
+  /*
+   * Overlay styling used for additional content or status displayed over the card element.
+   * It centers the content and adapts the overlay design
+   * based on the card's background theme (light or dark).
+   */
+  /* Compact mode styling for PaymentCard component
+   * This defines the styles and visual appearance of the card in its compact variant.
+   * The compact variant is designed to be more concise, with reduced height and adjusted layouts.
+   */
 }
 .dnb-payment-card__card {
-  position: relative;
-  width: 343px;
-  height: 216px;
+  width: 100%;
+  height: 100%;
   padding: 16px;
-  border-radius: 12px;
-  border: 1px solid;
-  border-color: rgba(255, 255, 255, 0.1) transparent rgba(255, 255, 255, 0.1) transparent;
+  border-radius: inherit;
   color: var(--color-white);
   box-shadow: var(--shadow-default);
   transition: all 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+  -webkit-user-select: none;
+          user-select: none;
+  /*
+   * Design variations for different card types.
+   * Each modifier represents a unique card style and contains
+   * specific background and text color configurations.
+   */
+  /*
+   * Primary container for card content (e.g., numbers, text, holder name).
+   * Ensures content stretches to fit the card while preserving relative positioning.
+   */
+  /* Provider Icons Container
+   * Flex container to house provider logos (e.g., Visa, Mastercard, BankAxept).
+   * Includes a visual separator if two providers are present. */
+}
+.dnb-payment-card__card__wrapper {
+  position: relative;
+  width: 343px;
+  height: 216px;
+  border-radius: inherit;
+  border: 1px solid var(--color-black-8);
+}
+.dnb-payment-card__card__wrapper::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+}
+.dnb-payment-card__card--blocked {
+  opacity: 0.5;
 }
 .dnb-payment-card__card--design-default {
-  background: var(--dnb-payment-bg-default);
+  background-color: var(--dnb-payment-bg-default);
   color: var(--color-white);
 }
 .dnb-payment-card__card--design-pluss {
-  background: var(--dnb-payment-bg-pluss);
+  background-color: var(--dnb-payment-bg-pluss);
   color: var(--color-white);
 }
-.dnb-payment-card__card--design-ung {
-  color: var(--color-black-80);
-}
-.dnb-payment-card__card--design-youth {
-  color: var(--color-black-80);
-}
-.dnb-payment-card__card--design-my-first {
-  color: var(--color-black-80);
+.dnb-payment-card__card--design-ung, .dnb-payment-card__card--design-youth, .dnb-payment-card__card--design-my-first {
+  background-color: var(--dnb-payment-bg-white);
+  color: var(--color-black);
 }
 .dnb-payment-card__card--design-gold {
-  background: var(--dnb-payment-bg-gold);
-  color: var(--color-white);
+  background-color: var(--dnb-payment-bg-gold);
+  color: var(--color-black);
 }
 .dnb-payment-card__card--design-saga {
-  background: var(--dnb-payment-bg-saga);
+  background-color: var(--dnb-payment-bg-black-gold);
   color: var(--color-white);
 }
-.dnb-payment-card__card--design-private {
-  background: var(--dnb-payment-bg-private);
+.dnb-payment-card__card--design-saga .provider--separator {
+  color: var(--dnb-payment-bg-gold);
+}
+.dnb-payment-card__card--design-saga-platinum, .dnb-payment-card__card--design-private {
+  background-color: var(--dnb-payment-bg-black-grey);
   color: var(--color-white);
 }
 .dnb-payment-card__card--design-black {
-  background: var(--color-black);
+  background-color: var(--color-black);
   color: var(--color-white);
 }
 .dnb-payment-card__card--design-business-no-visa {
-  background: var(--dnb-payment-bg-business-no-visa);
+  background-color: var(--dnb-payment-bg-business-no-visa);
   color: var(--color-white);
 }
 .dnb-payment-card__card--design-business-with-visa {
-  background: var(--dnb-payment-bg-business-with-visa);
+  background-color: var(--dnb-payment-bg-business-with-visa);
   color: var(--color-white);
 }
 .dnb-payment-card__card--design-sbanken-mastercard {
-  background: var(--sb-color-purple);
+  background-color: var(--sb-color-purple);
   color: var(--color-white);
 }
 .dnb-payment-card__card--design-sbanken-visa {
-  background: var(--color-white);
+  background-color: var(--color-white);
   color: var(--sb-color-text);
 }
-.dnb-payment-card__card::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: radial-gradient(52.39% 52.39% at 50% 50%, rgba(247, 246, 230, 0.1215686275) 0%, rgba(6, 6, 6, 0) 100%);
-  border-radius: inherit;
-}
-.dnb-payment-card__card--design-sbanken-mastercard::after {
-  background: none;
-}
 .dnb-payment-card__card__content {
   display: flex;
   height: 100%;
   width: 100%;
   position: relative;
 }
-.dnb-payment-card__card__wrapper {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-}
 .dnb-spacing .dnb-payment-card__card .dnb-p {
   margin-bottom: 0 !important;
 }
-.dnb-payment-card__card__holder {
-  font-weight: var(--font-weight-medium);
-  text-transform: uppercase;
-  text-align: left;
+.dnb-payment-card__card__numbers.dnb-p {
+  font-size: 1.375rem;
+  line-height: 1.143rem;
+  font-weight: var(--font-weight-regular);
 }
-.dnb-payment-card__card__holder.dnb-p {
-  font-size: 0.625rem;
+.dnb-payment-card__card__type-text.dnb-p {
+  font-size: 0.938rem;
+  line-height: 1.188rem;
+  padding-top: 6px;
 }
-.dnb-payment-card__card__numbers {
-  font-size: 1.5rem !important;
-  font-weight: var(--font-weight-medium);
+.dnb-payment-card__card__providers {
+  display: flex;
+  align-items: center;
+  column-gap: 1rem;
 }
-.dnb-payment-card__card__credit-type {
-  position: absolute;
-  bottom: 0;
-  right: 0;
+.dnb-payment-card__card__providers .provider--separator {
+  width: 1px;
+  height: 26px;
+  background-color: currentcolor;
+  transform: scale(0.5, 1);
 }
-.dnb-payment-card__card__bank-logo {
+.dnb-payment-card__card__top {
+  /*
+   * Normal mode: Card Type Text (Credit / Debit)
+   * Compact mode: Provider Icons
+   */
+}
+.dnb-payment-card__card__top__left {
   position: absolute;
   top: 0;
   left: 0;
+  display: flex;
+  align-items: center;
 }
-.dnb-payment-card__card__product-type {
-  height: 38px;
+.dnb-payment-card__card__top__right {
   position: absolute;
   top: 0;
-  left: 70px;
+  right: 0;
 }
-.dnb-payment-card__card__bank-axept {
-  height: 45px;
+.dnb-payment-card__card__bottom {
+  /*
+   * Normal mode: Card Number
+   * Compact mode: Hidden
+   */
+  /*
+   * Normal mode: Provider Icons
+   * Compact mode: Hidden
+   */
+}
+.dnb-payment-card__card__bottom__left {
   position: absolute;
-  top: 0;
-  right: 0;
+  bottom: 0;
+  left: 0;
 }
-.dnb-payment-card__card__credit {
+.dnb-payment-card__card__bottom__right {
   position: absolute;
-  top: 6px;
+  bottom: 0;
   right: 0;
 }
-.dnb-payment-card__blocking__overlay {
+.dnb-payment-card__overlay {
   position: absolute;
-  left: 0;
   top: 0;
-  right: 0;
-  bottom: 0;
+  width: 100%;
+  height: 100%;
   border-radius: inherit;
   display: flex;
   justify-content: center;
   align-items: center;
-  background: linear-gradient(184.55deg, rgba(204, 204, 204, 0.5) 4.63%, rgba(232, 232, 232, 0.5) 84.83%);
 }
-.dnb-payment-card__blocking__overlay svg path {
+.dnb-payment-card__overlay svg {
+  width: 2rem;
+  height: 2rem;
+  shape-rendering: geometricprecision;
+}
+.dnb-payment-card__overlay svg.icon--fill path {
+  fill: currentcolor;
+}
+.dnb-payment-card__overlay svg.icon--stroke path {
   stroke: currentcolor;
 }
-.dnb-payment-card__blocking__center {
+.dnb-payment-card__overlay__content {
+  min-width: 6rem;
+  height: 6rem;
   padding: 1rem;
   display: flex;
-  align-items: center;
-  justify-content: center;
   flex-direction: column;
-  background: var(--color-black-80);
-  color: var(--color-sand-yellow);
-  border-radius: 4px;
+  align-items: center;
+  gap: 0.667rem;
+  border-radius: inherit;
+  font-size: var(--font-size-basis);
+  line-height: var(--line-height-small);
 }
-.dnb-payment-card__blocking svg {
-  shape-rendering: geometricprecision;
+.dnb-payment-card__overlay__content--light {
+  background-color: var(--dnb-payment-overlay-bg-dark);
+  color: var(--color-white);
 }
-.dnb-payment-card.dnb-skeleton .dnb-payment-card__card__holder {
-  opacity: 1;
+.dnb-payment-card__overlay__content--dark {
+  background-color: var(--dnb-payment-overlay-bg-light);
+  color: var(--color-black);
 }
 .dnb-payment-card--compact .dnb-payment-card__card {
-  padding: 0;
-  height: 32.8mm;
-  border-radius: 12px 12px 0 0;
-  box-shadow: var(--shadow-default);
+  height: 62px;
+  border-radius: var(--dnb-payment-border-radius) var(--dnb-payment-border-radius) 0 0;
 }
-.dnb-payment-card--compact .dnb-payment-card__card__top {
-  position: absolute;
-  top: 4mm;
-  left: 6mm;
-  right: 6mm;
+.dnb-payment-card--compact .dnb-payment-card__card__wrapper {
+  height: auto;
 }
-.dnb-payment-card--compact .dnb-payment-card__card__bottom {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 14mm;
-  background-color: var(--color-white);
+.dnb-payment-card--compact .dnb-payment-card__card__providers {
+  margin-top: 5px;
+  height: 1.375rem;
 }
-.dnb-payment-card--compact .dnb-payment-card__card__wrapper {
-  padding: 6px 22px;
-  color: var(--color-black-80);
+.dnb-payment-card--compact .dnb-payment-card__card__providers div, .dnb-payment-card--compact .dnb-payment-card__card__providers svg {
+  height: 100%;
+  width: auto;
 }
-.dnb-payment-card--compact .dnb-payment-card__card__numbers {
-  font-size: var(--font-size-basis);
+.dnb-payment-card--compact .dnb-payment-card__card__providers--multiple {
+  margin-top: 7px;
+  height: 1rem;
+  column-gap: 0.5rem;
 }
-.dnb-payment-card--compact .dnb-payment-card__card__credit-type {
-  top: 10px;
-  right: 4px;
-  bottom: auto;
+.dnb-payment-card--compact .dnb-payment-card__card__providers--multiple div, .dnb-payment-card--compact .dnb-payment-card__card__providers--multiple svg {
+  vertical-align: top;
 }
-.dnb-payment-card--compact .dnb-payment-card__blocking__center {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: row;
-  height: 100%;
-  width: 100%;
-  gap: var(--spacing-x-small);
-  background: rgba(0, 0, 0, 0.739);
-  border-radius: inherit;
+.dnb-payment-card--compact .dnb-payment-card__card__providers--multiple .provider--separator {
+  width: 1px;
+}
+.dnb-payment-card--compact .dnb-payment-card__overlay__content {
+  display: none;
 }