@dnb/eufemia 10.18.0 → 10.19.0

package/style/dnb-ui-extensions.css

@@ -46,12 +46,6 @@
 /*
  * Utilities
  */
-:root {
-  --forms-field-width--small: 5rem;
-  --forms-field-width--medium: 11rem;
-  --forms-field-width--large: 21rem;
-}
-
 .dnb-forms-field-number {
   --number-control-button-border-color: black;
   --number-control-button-border-color--hover: darkgrey;
@@ -339,6 +333,9 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   justify-content: space-between;
   align-items: center;
 }
+.dnb-forms-field-block__label-description {
+  margin-left: 0.3em;
+}
 .dnb-forms-field-block__status {
   grid-area: status;
 }

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

@@ -1 +1 @@
-.dnb-forms-field-array-selection--layout-vertical .dnb-forms-field-array-selection__options{display:flex;flex-flow:column;row-gap:var(--spacing-x-small)}.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-array-selection__options{-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row wrap;row-gap:var(--spacing-x-small)}@media screen and (min-width:40em){.dnb-forms-field-array-selection .dnb-forms-field-block--layout-horizontal .dnb-form-label{line-height:2.5rem;margin-bottom:0}}.dnb-forms-field-expiry .dnb-multi-input-mask{width:var(--forms-field-width--small)}.dnb-forms-field-expiry .dnb-multi-input-mask .dnb-input__shell{justify-content:center}.dnb-forms-field-number{--number-control-button-border-color:#000;--number-control-button-border-color--hover:#a9a9a9;--number-control-button-border-color--focus:#a9a9a9;--number-control-button-border-width--focus:0.125rem;--number-control-button-background-color--hover:grey;--number-control-button-color--hover:#000;--number-control-button-background-color--active:#000;--number-control-button-color--active:#d3d3d3;--number-control-button--error:red;--number-control-button--error-contrast:#fff;--number-control-button-width--small:2rem;--number-control-button-width--medium:2.5rem;--number-control-button-width--large:3rem;--forms-field-block--number-control-buttons-width--small:calc(var(--number-control-button-width--small)*2);--forms-field-block--number-control-buttons-width--medium:calc(var(--number-control-button-width--medium)*2);--forms-field-block--number-control-buttons-width--large:calc(var(--number-control-button-width--large)*2)}.dnb-forms-field-number__contents{align-items:center;display:flex}.dnb-forms-field-number__contents--has-controls{--border-color:var(--number-control-button-border-color);--border-width:0.0625rem;border-color:transparent;border-radius:.25rem;box-shadow:0 0 0 var(--border-width) var(--border-color)}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls:hover:not([disabled]){--border-color:var(--number-control-button-border-color);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}html[data-whatinput=keyboard] .dnb-forms-field-number__contents--has-controls:focus-within{--border-color:var(--number-control-button-border-color--focus);--border-width:var(--number-control-button-border-width--focus);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-forms-field-number__contents--has-controls .dnb-input__shell{border-radius:0;box-shadow:none}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-input__shell:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-input__shell:hover:not([disabled]){box-shadow:none}.dnb-forms-field-number__contents--has-controls .dnb-input:not([data-input-state=disabled]):not(:active)[data-input-state=focus] .dnb-input__shell{box-shadow:none;outline:initial}html[data-whatinput=""] .dnb-forms-field-number__contents--has-controls .dnb-input:not([data-input-state=disabled]):not(:active)[data-input-state=focus] .dnb-input__shell{box-shadow:none}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:hover[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:hover:not([disabled]){background-color:var(--number-control-button-background-color--hover);color:var(--number-control-button-color--hover)}.dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active[disabled],.dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active[disabled]{cursor:not-allowed}.dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active:not([disabled]),.dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active:not([disabled]){background-color:var(--number-control-button-background-color--active);color:var(--number-control-button-color--active)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error{--border-color:var(--number-control-button--error);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error:hover:not([disabled]){--border-color:var(--number-control-button--error);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-input__status--error:not([data-input-state=disabled]):not(:hover):not(:active) .dnb-input__shell{box-shadow:none}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before{color:var(--number-control-button--error)}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:hover[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:hover:not([disabled]){background-color:var(--number-control-button--error-contrast);color:var(--number-control-button--error)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active[disabled],.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active[disabled]{cursor:not-allowed}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active:not([disabled]),.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active:not([disabled]){background-color:var(--number-control-button--error);color:var(--number-control-button--error-contrast)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after[disabled],.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before[disabled]{color:var(--number-control-button--error-contrast)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled{--border-color:var(--color-black-55);--border-width:0.0625rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled:hover:not([disabled]){--border-color:var(--color-black-55);--border-width:0.0625rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled .dnb-input[data-input-state=disabled] .dnb-input__shell{box-shadow:none}.dnb-input[data-input-state=disabled] .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled{--border-color:var(--color-black-55);--border-width:0.0625rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled .dnb-button--control-after[disabled],.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled .dnb-button--control-before[disabled]{background-color:var(--color-black-3);color:var(--color-black-20)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small{width:calc(var(--forms-field-width--small) + var(--forms-field-block--number-control-buttons-width--small))}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small .dnb-button--control-before{width:var(--number-control-button-width--small)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium{width:calc(var(--forms-field-width--medium) + var(--forms-field-block--number-control-buttons-width--medium))}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium .dnb-button--control-before{width:var(--number-control-button-width--medium)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large{width:calc(var(--forms-field-width--large) + var(--forms-field-block--number-control-buttons-width--large))}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large .dnb-button--control-before{width:var(--number-control-button-width--large)}.dnb-forms-field-phone-number__country-code,.dnb-forms-field-phone-number__country-code .dnb-autocomplete__shell{width:calc(var(--forms-field-width--medium) - 2rem)}.dnb-forms-field-phone-number__number{flex:1}.dnb-forms-field-phone-number .dnb-form-label{max-width:14ch}.dnb-forms-field-postal-code-and-city__fields{-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}.dnb-forms-field-postal-code-and-city__postal-code{flex:0 5rem}.dnb-forms-field-postal-code-and-city__city{flex:1}.dnb-forms-field-selection__variant--dropdown .dnb-forms-field-block--layout-horizontal .dnb-form-label{align-self:center}.dnb-forms-field-selection__options-layout--horizontal .dnb-forms-field-block--layout-horizontal .dnb-form-label,.dnb-forms-field-selection__variant--dropdown .dnb-forms-field-block--layout-horizontal .dnb-form-label{margin-bottom:0}.dnb-forms-field-selection__variant--button .dnb-forms-field-block--layout-horizontal .dnb-form-label{line-height:2.5rem}:root{--forms-field-width--small:5rem;--forms-field-width--medium:11rem;--forms-field-width--large:21rem}fieldset.dnb-forms-field-block{border:none;padding:0}fieldset.dnb-forms-field-block:not([class*=space__top]){margin-top:0}fieldset.dnb-forms-field-block:not([class*=space__right]){margin-right:0}fieldset.dnb-forms-field-block:not([class*=space__bottom]){margin-bottom:0}fieldset.dnb-forms-field-block:not([class*=space__left]){margin-left:0}.dnb-forms-field-block__grid{display:grid}@media screen and (max-width:40em){.dnb-forms-field-block__grid{flex-wrap:wrap}.dnb-forms-field-block__grid>.dnb-form-label{margin-bottom:.5rem;margin-top:.5rem}}.dnb-forms-field-block--layout-vertical{grid-template-areas:"label" "contents" "status";grid-template-columns:auto}.dnb-forms-field-block--layout-horizontal{grid-template-areas:"label contents" "status status";grid-template-columns:fit-content(100%) auto}.dnb-forms-field-block--width-stretch{flex-grow:1}@media screen and (min-width:30em){.dnb-forms-field-block--width-small{width:var(--forms-field-width--small)}.dnb-forms-field-block--width-medium{width:var(--forms-field-width--medium)}.dnb-forms-field-block--width-large{width:var(--forms-field-width--large)}}.dnb-forms-field-block__label{align-items:center;display:flex;flex-flow:row;grid-area:label;justify-content:space-between}.dnb-forms-field-block__status{grid-area:status}.dnb-forms-field-block__contents{grid-area:contents}.dnb-forms-field-block__contents--width-stretch{width:100%}@media screen and (min-width:30em){.dnb-forms-field-block__contents--width-small{width:var(--forms-field-width--small)}.dnb-forms-field-block__contents--width-medium{width:var(--forms-field-width--medium)}.dnb-forms-field-block__contents--width-large{width:var(--forms-field-width--large)}}.dnb-forms-button-row{-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}@media screen and (min-width:40em){.dnb-card+.dnb-forms-button-row:not([class*=space__left]){margin-left:var(--spacing-medium)}}.dnb-spacing .dnb-form-main-heading.dnb-h--large:not([class*=space__]){margin:0}@media screen and (min-width:40em){.dnb-form-main-heading:has(+.dnb-flex-stack>.dnb-card,+.dnb-card):not([class*=space__left]){margin-left:var(--spacing-medium)}}.dnb-form-main-heading:has(+.dnb-flex-stack>.dnb-card,+.dnb-card):not([class*=space__bottom]){margin-bottom:var(--spacing-small)}.dnb-spacing .dnb-form-sub-heading.dnb-h--medium:not([class*=space__]){margin:0}.dnb-form-sub-heading:has(+.dnb-flex-stack>.dnb-card,+.dnb-card):not([class*=space__bottom]){margin-bottom:var(--spacing-small)}.dnb-forms-steps-layout{-moz-column-gap:var(--spacing-medium);column-gap:var(--spacing-medium);display:flex;flex-flow:row wrap}.dnb-forms-steps-layout__sidebar{flex:0}.dnb-forms-steps-layout__contents{flex:1 0 25rem}.dnb-forms-steps-layout__contents .dnb-card{--border-color:var(--color-pistachio)}@media screen and (max-width:60em){.dnb-forms-steps-layout{align-items:stretch;flex-direction:column;justify-content:stretch}.dnb-forms-steps-layout__contents{flex-basis:auto}}.dnb-forms-steps-layout .dnb-step-indicator__sidebar{margin-right:0}.dnb-forms-value-block{display:block;font-size:var(--font-size-basis)}.dnb-forms-value-block--inline{display:inline-block;font-size:inherit;margin-left:var(--spacing-xx-small);margin-right:var(--spacing-xx-small)}.dnb-forms-value-block__label{font-weight:var(--font-weight-medium)}.dnb-forms-value-block__placeholder{color:rgba(0,0,0,.5)}.dnb-forms-test-element{border:1px dashed grey;border-radius:.5rem;color:#909090;padding:.5rem 1rem}.dnb-payment-card{--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);margin:0}.dnb-payment-card__card{border-color:currentcolor;border-color:hsla(0,0%,100%,.1) transparent rgba(0,0,0,.2);border-radius:12px;border-style:solid;border-width:1px;box-shadow:var(--shadow-default);color:var(--color-white);height:216px;padding:16px;position:relative;transition:all 225ms cubic-bezier(0,0,.2,1) 0ms;width:343px}.dnb-payment-card__card--design-default{background:var(--dnb-payment-bg-default);color:var(--color-white)}.dnb-payment-card__card--design-pluss{background:var(--dnb-payment-bg-pluss);color:var(--color-white)}.dnb-payment-card__card--design-my-first,.dnb-payment-card__card--design-ung,.dnb-payment-card__card--design-youth{color:var(--color-black-80)}.dnb-payment-card__card--design-gold{background:var(--dnb-payment-bg-gold);color:var(--color-white)}.dnb-payment-card__card--design-saga{background:var(--dnb-payment-bg-saga);color:var(--color-white)}.dnb-payment-card__card--design-private{background:var(--dnb-payment-bg-private);color:var(--color-white)}.dnb-payment-card__card--design-black{background:var(--color-black);color:var(--color-white)}.dnb-payment-card__card--design-business-no-visa{background: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);color:var(--color-white)}.dnb-payment-card__card:after{background:radial-gradient(52.39% 52.39% at 50% 50%,hsla(56,52%,94%,.122) 0,rgba(6,6,6,0) 100%);border-radius:inherit;content:"";height:100%;left:0;position:absolute;top:0;width:100%}.dnb-payment-card__card__content{display:flex;height:100%;position:relative;width:100%}.dnb-payment-card__card__wrapper{bottom:0;left:0;position:absolute}.dnb-spacing .dnb-payment-card__card .dnb-p{margin-bottom:0!important}.dnb-payment-card__card__holder{font-weight:var(--font-weight-medium);text-align:left;text-transform:uppercase}.dnb-payment-card__card__holder.dnb-p{font-size:.625rem}.dnb-payment-card__card__numbers{font-size:1.5rem!important;font-weight:var(--font-weight-medium)}.dnb-payment-card__card__credit-type{bottom:0;position:absolute;right:0}.dnb-payment-card__card__bank-logo{left:0;position:absolute;top:0}.dnb-payment-card__card__product-type{height:38px;left:70px;position:absolute;top:0}.dnb-payment-card__card__bank-axept{height:45px;position:absolute;right:0;top:0}.dnb-payment-card__blocking__overlay{align-items:center;background:linear-gradient(184.55deg,hsla(0,0%,80%,.5) 4.63%,hsla(0,0%,91%,.5) 84.83%);border-radius:inherit;bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0}.dnb-payment-card__blocking__overlay svg path{stroke:currentcolor}.dnb-payment-card__blocking__center{align-items:center;background:var(--color-black-80);border-radius:4px;color:var(--color-sand-yellow);display:flex;flex-direction:column;justify-content:center;padding:1rem}.dnb-payment-card__blocking svg{shape-rendering:geometricprecision}.dnb-payment-card.dnb-skeleton .dnb-payment-card__card__holder{opacity:1}.dnb-payment-card--compact .dnb-payment-card__card{border-radius:12px 12px 0 0;box-shadow:var(--shadow-default);height:32.8mm;padding:0}.dnb-payment-card--compact .dnb-payment-card__card__top{left:6mm;position:absolute;right:6mm;top:4mm}.dnb-payment-card--compact .dnb-payment-card__card__bottom{background-color:var(--color-white);bottom:0;height:14mm;left:0;position:absolute;right:0}.dnb-payment-card--compact .dnb-payment-card__card__wrapper{color:var(--color-black-80);padding:6px 22px}.dnb-payment-card--compact .dnb-payment-card__card__numbers{font-size:var(--font-size-basis)}.dnb-payment-card--compact .dnb-payment-card__card__credit-type{bottom:auto;right:4px;top:10px}.dnb-payment-card--compact .dnb-payment-card__blocking__center{align-items:center;background:rgba(0,0,0,.739);border-radius:inherit;display:flex;flex-direction:row;gap:var(--spacing-x-small);height:100%;justify-content:center;width:100%}
+.dnb-forms-field-array-selection--layout-vertical .dnb-forms-field-array-selection__options{display:flex;flex-flow:column;row-gap:var(--spacing-x-small)}.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-array-selection__options{-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row wrap;row-gap:var(--spacing-x-small)}@media screen and (min-width:40em){.dnb-forms-field-array-selection .dnb-forms-field-block--layout-horizontal .dnb-form-label{line-height:2.5rem;margin-bottom:0}}.dnb-forms-field-expiry .dnb-multi-input-mask{width:var(--forms-field-width--small)}.dnb-forms-field-expiry .dnb-multi-input-mask .dnb-input__shell{justify-content:center}.dnb-forms-field-number{--number-control-button-border-color:#000;--number-control-button-border-color--hover:#a9a9a9;--number-control-button-border-color--focus:#a9a9a9;--number-control-button-border-width--focus:0.125rem;--number-control-button-background-color--hover:grey;--number-control-button-color--hover:#000;--number-control-button-background-color--active:#000;--number-control-button-color--active:#d3d3d3;--number-control-button--error:red;--number-control-button--error-contrast:#fff;--number-control-button-width--small:2rem;--number-control-button-width--medium:2.5rem;--number-control-button-width--large:3rem;--forms-field-block--number-control-buttons-width--small:calc(var(--number-control-button-width--small)*2);--forms-field-block--number-control-buttons-width--medium:calc(var(--number-control-button-width--medium)*2);--forms-field-block--number-control-buttons-width--large:calc(var(--number-control-button-width--large)*2)}.dnb-forms-field-number__contents{align-items:center;display:flex}.dnb-forms-field-number__contents--has-controls{--border-color:var(--number-control-button-border-color);--border-width:0.0625rem;border-color:transparent;border-radius:.25rem;box-shadow:0 0 0 var(--border-width) var(--border-color)}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls:hover:not([disabled]){--border-color:var(--number-control-button-border-color);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}html[data-whatinput=keyboard] .dnb-forms-field-number__contents--has-controls:focus-within{--border-color:var(--number-control-button-border-color--focus);--border-width:var(--number-control-button-border-width--focus);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-forms-field-number__contents--has-controls .dnb-input__shell{border-radius:0;box-shadow:none}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-input__shell:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-input__shell:hover:not([disabled]){box-shadow:none}.dnb-forms-field-number__contents--has-controls .dnb-input:not([data-input-state=disabled]):not(:active)[data-input-state=focus] .dnb-input__shell{box-shadow:none;outline:initial}html[data-whatinput=""] .dnb-forms-field-number__contents--has-controls .dnb-input:not([data-input-state=disabled]):not(:active)[data-input-state=focus] .dnb-input__shell{box-shadow:none}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:hover[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:hover:not([disabled]){background-color:var(--number-control-button-background-color--hover);color:var(--number-control-button-color--hover)}.dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active[disabled],.dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active[disabled]{cursor:not-allowed}.dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active:not([disabled]),.dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active:not([disabled]){background-color:var(--number-control-button-background-color--active);color:var(--number-control-button-color--active)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error{--border-color:var(--number-control-button--error);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error:hover:not([disabled]){--border-color:var(--number-control-button--error);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-input__status--error:not([data-input-state=disabled]):not(:hover):not(:active) .dnb-input__shell{box-shadow:none}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before{color:var(--number-control-button--error)}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:hover[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:hover:not([disabled]){background-color:var(--number-control-button--error-contrast);color:var(--number-control-button--error)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active[disabled],.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active[disabled]{cursor:not-allowed}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active:not([disabled]),.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active:not([disabled]){background-color:var(--number-control-button--error);color:var(--number-control-button--error-contrast)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after[disabled],.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before[disabled]{color:var(--number-control-button--error-contrast)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled{--border-color:var(--color-black-55);--border-width:0.0625rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled:hover:not([disabled]){--border-color:var(--color-black-55);--border-width:0.0625rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled .dnb-input[data-input-state=disabled] .dnb-input__shell{box-shadow:none}.dnb-input[data-input-state=disabled] .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled{--border-color:var(--color-black-55);--border-width:0.0625rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled .dnb-button--control-after[disabled],.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled .dnb-button--control-before[disabled]{background-color:var(--color-black-3);color:var(--color-black-20)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small{width:calc(var(--forms-field-width--small) + var(--forms-field-block--number-control-buttons-width--small))}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small .dnb-button--control-before{width:var(--number-control-button-width--small)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium{width:calc(var(--forms-field-width--medium) + var(--forms-field-block--number-control-buttons-width--medium))}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium .dnb-button--control-before{width:var(--number-control-button-width--medium)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large{width:calc(var(--forms-field-width--large) + var(--forms-field-block--number-control-buttons-width--large))}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large .dnb-button--control-before{width:var(--number-control-button-width--large)}.dnb-forms-field-phone-number__country-code,.dnb-forms-field-phone-number__country-code .dnb-autocomplete__shell{width:calc(var(--forms-field-width--medium) - 2rem)}.dnb-forms-field-phone-number__number{flex:1}.dnb-forms-field-phone-number .dnb-form-label{max-width:14ch}.dnb-forms-field-postal-code-and-city__fields{-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}.dnb-forms-field-postal-code-and-city__postal-code{flex:0 5rem}.dnb-forms-field-postal-code-and-city__city{flex:1}.dnb-forms-field-selection__variant--dropdown .dnb-forms-field-block--layout-horizontal .dnb-form-label{align-self:center}.dnb-forms-field-selection__options-layout--horizontal .dnb-forms-field-block--layout-horizontal .dnb-form-label,.dnb-forms-field-selection__variant--dropdown .dnb-forms-field-block--layout-horizontal .dnb-form-label{margin-bottom:0}.dnb-forms-field-selection__variant--button .dnb-forms-field-block--layout-horizontal .dnb-form-label{line-height:2.5rem}:root{--forms-field-width--small:5rem;--forms-field-width--medium:11rem;--forms-field-width--large:21rem}fieldset.dnb-forms-field-block{border:none;padding:0}fieldset.dnb-forms-field-block:not([class*=space__top]){margin-top:0}fieldset.dnb-forms-field-block:not([class*=space__right]){margin-right:0}fieldset.dnb-forms-field-block:not([class*=space__bottom]){margin-bottom:0}fieldset.dnb-forms-field-block:not([class*=space__left]){margin-left:0}.dnb-forms-field-block__grid{display:grid}@media screen and (max-width:40em){.dnb-forms-field-block__grid{flex-wrap:wrap}.dnb-forms-field-block__grid>.dnb-form-label{margin-bottom:.5rem;margin-top:.5rem}}.dnb-forms-field-block--layout-vertical{grid-template-areas:"label" "contents" "status";grid-template-columns:auto}.dnb-forms-field-block--layout-horizontal{grid-template-areas:"label contents" "status status";grid-template-columns:fit-content(100%) auto}.dnb-forms-field-block--width-stretch{flex-grow:1}@media screen and (min-width:30em){.dnb-forms-field-block--width-small{width:var(--forms-field-width--small)}.dnb-forms-field-block--width-medium{width:var(--forms-field-width--medium)}.dnb-forms-field-block--width-large{width:var(--forms-field-width--large)}}.dnb-forms-field-block__label{align-items:center;display:flex;flex-flow:row;grid-area:label;justify-content:space-between}.dnb-forms-field-block__label-description{margin-left:.3em}.dnb-forms-field-block__status{grid-area:status}.dnb-forms-field-block__contents{grid-area:contents}.dnb-forms-field-block__contents--width-stretch{width:100%}@media screen and (min-width:30em){.dnb-forms-field-block__contents--width-small{width:var(--forms-field-width--small)}.dnb-forms-field-block__contents--width-medium{width:var(--forms-field-width--medium)}.dnb-forms-field-block__contents--width-large{width:var(--forms-field-width--large)}}.dnb-forms-button-row{-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}@media screen and (min-width:40em){.dnb-card+.dnb-forms-button-row:not([class*=space__left]){margin-left:var(--spacing-medium)}}.dnb-spacing .dnb-form-main-heading.dnb-h--large:not([class*=space__]){margin:0}@media screen and (min-width:40em){.dnb-form-main-heading:has(+.dnb-flex-stack>.dnb-card,+.dnb-card):not([class*=space__left]){margin-left:var(--spacing-medium)}}.dnb-form-main-heading:has(+.dnb-flex-stack>.dnb-card,+.dnb-card):not([class*=space__bottom]){margin-bottom:var(--spacing-small)}.dnb-spacing .dnb-form-sub-heading.dnb-h--medium:not([class*=space__]){margin:0}.dnb-form-sub-heading:has(+.dnb-flex-stack>.dnb-card,+.dnb-card):not([class*=space__bottom]){margin-bottom:var(--spacing-small)}.dnb-forms-steps-layout{-moz-column-gap:var(--spacing-medium);column-gap:var(--spacing-medium);display:flex;flex-flow:row wrap}.dnb-forms-steps-layout__sidebar{flex:0}.dnb-forms-steps-layout__contents{flex:1 0 25rem}.dnb-forms-steps-layout__contents .dnb-card{--border-color:var(--color-pistachio)}@media screen and (max-width:60em){.dnb-forms-steps-layout{align-items:stretch;flex-direction:column;justify-content:stretch}.dnb-forms-steps-layout__contents{flex-basis:auto}}.dnb-forms-steps-layout .dnb-step-indicator__sidebar{margin-right:0}.dnb-forms-value-block{display:block;font-size:var(--font-size-basis)}.dnb-forms-value-block--inline{display:inline-block;font-size:inherit;margin-left:var(--spacing-xx-small);margin-right:var(--spacing-xx-small)}.dnb-forms-value-block__label{font-weight:var(--font-weight-medium)}.dnb-forms-value-block__placeholder{color:rgba(0,0,0,.5)}.dnb-forms-test-element{border:1px dashed grey;border-radius:.5rem;color:#909090;padding:.5rem 1rem}.dnb-payment-card{--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);margin:0}.dnb-payment-card__card{border-color:currentcolor;border-color:hsla(0,0%,100%,.1) transparent rgba(0,0,0,.2);border-radius:12px;border-style:solid;border-width:1px;box-shadow:var(--shadow-default);color:var(--color-white);height:216px;padding:16px;position:relative;transition:all 225ms cubic-bezier(0,0,.2,1) 0ms;width:343px}.dnb-payment-card__card--design-default{background:var(--dnb-payment-bg-default);color:var(--color-white)}.dnb-payment-card__card--design-pluss{background:var(--dnb-payment-bg-pluss);color:var(--color-white)}.dnb-payment-card__card--design-my-first,.dnb-payment-card__card--design-ung,.dnb-payment-card__card--design-youth{color:var(--color-black-80)}.dnb-payment-card__card--design-gold{background:var(--dnb-payment-bg-gold);color:var(--color-white)}.dnb-payment-card__card--design-saga{background:var(--dnb-payment-bg-saga);color:var(--color-white)}.dnb-payment-card__card--design-private{background:var(--dnb-payment-bg-private);color:var(--color-white)}.dnb-payment-card__card--design-black{background:var(--color-black);color:var(--color-white)}.dnb-payment-card__card--design-business-no-visa{background: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);color:var(--color-white)}.dnb-payment-card__card:after{background:radial-gradient(52.39% 52.39% at 50% 50%,hsla(56,52%,94%,.122) 0,rgba(6,6,6,0) 100%);border-radius:inherit;content:"";height:100%;left:0;position:absolute;top:0;width:100%}.dnb-payment-card__card__content{display:flex;height:100%;position:relative;width:100%}.dnb-payment-card__card__wrapper{bottom:0;left:0;position:absolute}.dnb-spacing .dnb-payment-card__card .dnb-p{margin-bottom:0!important}.dnb-payment-card__card__holder{font-weight:var(--font-weight-medium);text-align:left;text-transform:uppercase}.dnb-payment-card__card__holder.dnb-p{font-size:.625rem}.dnb-payment-card__card__numbers{font-size:1.5rem!important;font-weight:var(--font-weight-medium)}.dnb-payment-card__card__credit-type{bottom:0;position:absolute;right:0}.dnb-payment-card__card__bank-logo{left:0;position:absolute;top:0}.dnb-payment-card__card__product-type{height:38px;left:70px;position:absolute;top:0}.dnb-payment-card__card__bank-axept{height:45px;position:absolute;right:0;top:0}.dnb-payment-card__blocking__overlay{align-items:center;background:linear-gradient(184.55deg,hsla(0,0%,80%,.5) 4.63%,hsla(0,0%,91%,.5) 84.83%);border-radius:inherit;bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0}.dnb-payment-card__blocking__overlay svg path{stroke:currentcolor}.dnb-payment-card__blocking__center{align-items:center;background:var(--color-black-80);border-radius:4px;color:var(--color-sand-yellow);display:flex;flex-direction:column;justify-content:center;padding:1rem}.dnb-payment-card__blocking svg{shape-rendering:geometricprecision}.dnb-payment-card.dnb-skeleton .dnb-payment-card__card__holder{opacity:1}.dnb-payment-card--compact .dnb-payment-card__card{border-radius:12px 12px 0 0;box-shadow:var(--shadow-default);height:32.8mm;padding:0}.dnb-payment-card--compact .dnb-payment-card__card__top{left:6mm;position:absolute;right:6mm;top:4mm}.dnb-payment-card--compact .dnb-payment-card__card__bottom{background-color:var(--color-white);bottom:0;height:14mm;left:0;position:absolute;right:0}.dnb-payment-card--compact .dnb-payment-card__card__wrapper{color:var(--color-black-80);padding:6px 22px}.dnb-payment-card--compact .dnb-payment-card__card__numbers{font-size:var(--font-size-basis)}.dnb-payment-card--compact .dnb-payment-card__card__credit-type{bottom:auto;right:4px;top:10px}.dnb-payment-card--compact .dnb-payment-card__blocking__center{align-items:center;background:rgba(0,0,0,.739);border-radius:inherit;display:flex;flex-direction:row;gap:var(--spacing-x-small);height:100%;justify-content:center;width:100%}

package/style/dnb-ui-forms.css

@@ -38,12 +38,6 @@
 /*
  * Utilities
  */
-:root {
-  --forms-field-width--small: 5rem;
-  --forms-field-width--medium: 11rem;
-  --forms-field-width--large: 21rem;
-}
-
 .dnb-forms-field-number {
   --number-control-button-border-color: black;
   --number-control-button-border-color--hover: darkgrey;
@@ -331,6 +325,9 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   justify-content: space-between;
   align-items: center;
 }
+.dnb-forms-field-block__label-description {
+  margin-left: 0.3em;
+}
 .dnb-forms-field-block__status {
   grid-area: status;
 }

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

@@ -1 +1 @@
-.dnb-forms-field-array-selection--layout-vertical .dnb-forms-field-array-selection__options{display:flex;flex-flow:column;row-gap:var(--spacing-x-small)}.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-array-selection__options{-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row wrap;row-gap:var(--spacing-x-small)}@media screen and (min-width:40em){.dnb-forms-field-array-selection .dnb-forms-field-block--layout-horizontal .dnb-form-label{line-height:2.5rem;margin-bottom:0}}.dnb-forms-field-expiry .dnb-multi-input-mask{width:var(--forms-field-width--small)}.dnb-forms-field-expiry .dnb-multi-input-mask .dnb-input__shell{justify-content:center}.dnb-forms-field-number{--number-control-button-border-color:#000;--number-control-button-border-color--hover:#a9a9a9;--number-control-button-border-color--focus:#a9a9a9;--number-control-button-border-width--focus:0.125rem;--number-control-button-background-color--hover:grey;--number-control-button-color--hover:#000;--number-control-button-background-color--active:#000;--number-control-button-color--active:#d3d3d3;--number-control-button--error:red;--number-control-button--error-contrast:#fff;--number-control-button-width--small:2rem;--number-control-button-width--medium:2.5rem;--number-control-button-width--large:3rem;--forms-field-block--number-control-buttons-width--small:calc(var(--number-control-button-width--small)*2);--forms-field-block--number-control-buttons-width--medium:calc(var(--number-control-button-width--medium)*2);--forms-field-block--number-control-buttons-width--large:calc(var(--number-control-button-width--large)*2)}.dnb-forms-field-number__contents{align-items:center;display:flex}.dnb-forms-field-number__contents--has-controls{--border-color:var(--number-control-button-border-color);--border-width:0.0625rem;border-color:transparent;border-radius:.25rem;box-shadow:0 0 0 var(--border-width) var(--border-color)}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls:hover:not([disabled]){--border-color:var(--number-control-button-border-color);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}html[data-whatinput=keyboard] .dnb-forms-field-number__contents--has-controls:focus-within{--border-color:var(--number-control-button-border-color--focus);--border-width:var(--number-control-button-border-width--focus);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-forms-field-number__contents--has-controls .dnb-input__shell{border-radius:0;box-shadow:none}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-input__shell:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-input__shell:hover:not([disabled]){box-shadow:none}.dnb-forms-field-number__contents--has-controls .dnb-input:not([data-input-state=disabled]):not(:active)[data-input-state=focus] .dnb-input__shell{box-shadow:none;outline:initial}html[data-whatinput=""] .dnb-forms-field-number__contents--has-controls .dnb-input:not([data-input-state=disabled]):not(:active)[data-input-state=focus] .dnb-input__shell{box-shadow:none}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:hover[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:hover:not([disabled]){background-color:var(--number-control-button-background-color--hover);color:var(--number-control-button-color--hover)}.dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active[disabled],.dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active[disabled]{cursor:not-allowed}.dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active:not([disabled]),.dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active:not([disabled]){background-color:var(--number-control-button-background-color--active);color:var(--number-control-button-color--active)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error{--border-color:var(--number-control-button--error);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error:hover:not([disabled]){--border-color:var(--number-control-button--error);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-input__status--error:not([data-input-state=disabled]):not(:hover):not(:active) .dnb-input__shell{box-shadow:none}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before{color:var(--number-control-button--error)}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:hover[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:hover:not([disabled]){background-color:var(--number-control-button--error-contrast);color:var(--number-control-button--error)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active[disabled],.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active[disabled]{cursor:not-allowed}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active:not([disabled]),.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active:not([disabled]){background-color:var(--number-control-button--error);color:var(--number-control-button--error-contrast)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after[disabled],.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before[disabled]{color:var(--number-control-button--error-contrast)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled{--border-color:var(--color-black-55);--border-width:0.0625rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled:hover:not([disabled]){--border-color:var(--color-black-55);--border-width:0.0625rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled .dnb-input[data-input-state=disabled] .dnb-input__shell{box-shadow:none}.dnb-input[data-input-state=disabled] .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled{--border-color:var(--color-black-55);--border-width:0.0625rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled .dnb-button--control-after[disabled],.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled .dnb-button--control-before[disabled]{background-color:var(--color-black-3);color:var(--color-black-20)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small{width:calc(var(--forms-field-width--small) + var(--forms-field-block--number-control-buttons-width--small))}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small .dnb-button--control-before{width:var(--number-control-button-width--small)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium{width:calc(var(--forms-field-width--medium) + var(--forms-field-block--number-control-buttons-width--medium))}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium .dnb-button--control-before{width:var(--number-control-button-width--medium)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large{width:calc(var(--forms-field-width--large) + var(--forms-field-block--number-control-buttons-width--large))}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large .dnb-button--control-before{width:var(--number-control-button-width--large)}.dnb-forms-field-phone-number__country-code,.dnb-forms-field-phone-number__country-code .dnb-autocomplete__shell{width:calc(var(--forms-field-width--medium) - 2rem)}.dnb-forms-field-phone-number__number{flex:1}.dnb-forms-field-phone-number .dnb-form-label{max-width:14ch}.dnb-forms-field-postal-code-and-city__fields{-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}.dnb-forms-field-postal-code-and-city__postal-code{flex:0 5rem}.dnb-forms-field-postal-code-and-city__city{flex:1}.dnb-forms-field-selection__variant--dropdown .dnb-forms-field-block--layout-horizontal .dnb-form-label{align-self:center}.dnb-forms-field-selection__options-layout--horizontal .dnb-forms-field-block--layout-horizontal .dnb-form-label,.dnb-forms-field-selection__variant--dropdown .dnb-forms-field-block--layout-horizontal .dnb-form-label{margin-bottom:0}.dnb-forms-field-selection__variant--button .dnb-forms-field-block--layout-horizontal .dnb-form-label{line-height:2.5rem}:root{--forms-field-width--small:5rem;--forms-field-width--medium:11rem;--forms-field-width--large:21rem}fieldset.dnb-forms-field-block{border:none;padding:0}fieldset.dnb-forms-field-block:not([class*=space__top]){margin-top:0}fieldset.dnb-forms-field-block:not([class*=space__right]){margin-right:0}fieldset.dnb-forms-field-block:not([class*=space__bottom]){margin-bottom:0}fieldset.dnb-forms-field-block:not([class*=space__left]){margin-left:0}.dnb-forms-field-block__grid{display:grid}@media screen and (max-width:40em){.dnb-forms-field-block__grid{flex-wrap:wrap}.dnb-forms-field-block__grid>.dnb-form-label{margin-bottom:.5rem;margin-top:.5rem}}.dnb-forms-field-block--layout-vertical{grid-template-areas:"label" "contents" "status";grid-template-columns:auto}.dnb-forms-field-block--layout-horizontal{grid-template-areas:"label contents" "status status";grid-template-columns:fit-content(100%) auto}.dnb-forms-field-block--width-stretch{flex-grow:1}@media screen and (min-width:30em){.dnb-forms-field-block--width-small{width:var(--forms-field-width--small)}.dnb-forms-field-block--width-medium{width:var(--forms-field-width--medium)}.dnb-forms-field-block--width-large{width:var(--forms-field-width--large)}}.dnb-forms-field-block__label{align-items:center;display:flex;flex-flow:row;grid-area:label;justify-content:space-between}.dnb-forms-field-block__status{grid-area:status}.dnb-forms-field-block__contents{grid-area:contents}.dnb-forms-field-block__contents--width-stretch{width:100%}@media screen and (min-width:30em){.dnb-forms-field-block__contents--width-small{width:var(--forms-field-width--small)}.dnb-forms-field-block__contents--width-medium{width:var(--forms-field-width--medium)}.dnb-forms-field-block__contents--width-large{width:var(--forms-field-width--large)}}.dnb-forms-button-row{-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}@media screen and (min-width:40em){.dnb-card+.dnb-forms-button-row:not([class*=space__left]){margin-left:var(--spacing-medium)}}.dnb-spacing .dnb-form-main-heading.dnb-h--large:not([class*=space__]){margin:0}@media screen and (min-width:40em){.dnb-form-main-heading:has(+.dnb-flex-stack>.dnb-card,+.dnb-card):not([class*=space__left]){margin-left:var(--spacing-medium)}}.dnb-form-main-heading:has(+.dnb-flex-stack>.dnb-card,+.dnb-card):not([class*=space__bottom]){margin-bottom:var(--spacing-small)}.dnb-spacing .dnb-form-sub-heading.dnb-h--medium:not([class*=space__]){margin:0}.dnb-form-sub-heading:has(+.dnb-flex-stack>.dnb-card,+.dnb-card):not([class*=space__bottom]){margin-bottom:var(--spacing-small)}.dnb-forms-steps-layout{-moz-column-gap:var(--spacing-medium);column-gap:var(--spacing-medium);display:flex;flex-flow:row wrap}.dnb-forms-steps-layout__sidebar{flex:0}.dnb-forms-steps-layout__contents{flex:1 0 25rem}.dnb-forms-steps-layout__contents .dnb-card{--border-color:var(--color-pistachio)}@media screen and (max-width:60em){.dnb-forms-steps-layout{align-items:stretch;flex-direction:column;justify-content:stretch}.dnb-forms-steps-layout__contents{flex-basis:auto}}.dnb-forms-steps-layout .dnb-step-indicator__sidebar{margin-right:0}.dnb-forms-value-block{display:block;font-size:var(--font-size-basis)}.dnb-forms-value-block--inline{display:inline-block;font-size:inherit;margin-left:var(--spacing-xx-small);margin-right:var(--spacing-xx-small)}.dnb-forms-value-block__label{font-weight:var(--font-weight-medium)}.dnb-forms-value-block__placeholder{color:rgba(0,0,0,.5)}.dnb-forms-test-element{border:1px dashed grey;border-radius:.5rem;color:#909090;padding:.5rem 1rem}
+.dnb-forms-field-array-selection--layout-vertical .dnb-forms-field-array-selection__options{display:flex;flex-flow:column;row-gap:var(--spacing-x-small)}.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-array-selection__options{-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row wrap;row-gap:var(--spacing-x-small)}@media screen and (min-width:40em){.dnb-forms-field-array-selection .dnb-forms-field-block--layout-horizontal .dnb-form-label{line-height:2.5rem;margin-bottom:0}}.dnb-forms-field-expiry .dnb-multi-input-mask{width:var(--forms-field-width--small)}.dnb-forms-field-expiry .dnb-multi-input-mask .dnb-input__shell{justify-content:center}.dnb-forms-field-number{--number-control-button-border-color:#000;--number-control-button-border-color--hover:#a9a9a9;--number-control-button-border-color--focus:#a9a9a9;--number-control-button-border-width--focus:0.125rem;--number-control-button-background-color--hover:grey;--number-control-button-color--hover:#000;--number-control-button-background-color--active:#000;--number-control-button-color--active:#d3d3d3;--number-control-button--error:red;--number-control-button--error-contrast:#fff;--number-control-button-width--small:2rem;--number-control-button-width--medium:2.5rem;--number-control-button-width--large:3rem;--forms-field-block--number-control-buttons-width--small:calc(var(--number-control-button-width--small)*2);--forms-field-block--number-control-buttons-width--medium:calc(var(--number-control-button-width--medium)*2);--forms-field-block--number-control-buttons-width--large:calc(var(--number-control-button-width--large)*2)}.dnb-forms-field-number__contents{align-items:center;display:flex}.dnb-forms-field-number__contents--has-controls{--border-color:var(--number-control-button-border-color);--border-width:0.0625rem;border-color:transparent;border-radius:.25rem;box-shadow:0 0 0 var(--border-width) var(--border-color)}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls:hover:not([disabled]){--border-color:var(--number-control-button-border-color);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}html[data-whatinput=keyboard] .dnb-forms-field-number__contents--has-controls:focus-within{--border-color:var(--number-control-button-border-color--focus);--border-width:var(--number-control-button-border-width--focus);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-forms-field-number__contents--has-controls .dnb-input__shell{border-radius:0;box-shadow:none}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-input__shell:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-input__shell:hover:not([disabled]){box-shadow:none}.dnb-forms-field-number__contents--has-controls .dnb-input:not([data-input-state=disabled]):not(:active)[data-input-state=focus] .dnb-input__shell{box-shadow:none;outline:initial}html[data-whatinput=""] .dnb-forms-field-number__contents--has-controls .dnb-input:not([data-input-state=disabled]):not(:active)[data-input-state=focus] .dnb-input__shell{box-shadow:none}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:hover[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:hover:not([disabled]){background-color:var(--number-control-button-background-color--hover);color:var(--number-control-button-color--hover)}.dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active[disabled],.dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active[disabled]{cursor:not-allowed}.dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active:not([disabled]),.dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active:not([disabled]){background-color:var(--number-control-button-background-color--active);color:var(--number-control-button-color--active)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error{--border-color:var(--number-control-button--error);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error:hover:not([disabled]){--border-color:var(--number-control-button--error);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-input__status--error:not([data-input-state=disabled]):not(:hover):not(:active) .dnb-input__shell{box-shadow:none}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before{color:var(--number-control-button--error)}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:hover[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:hover:not([disabled]){background-color:var(--number-control-button--error-contrast);color:var(--number-control-button--error)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active[disabled],.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active[disabled]{cursor:not-allowed}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active:not([disabled]),.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active:not([disabled]){background-color:var(--number-control-button--error);color:var(--number-control-button--error-contrast)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after[disabled],.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before[disabled]{color:var(--number-control-button--error-contrast)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled{--border-color:var(--color-black-55);--border-width:0.0625rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled:hover:not([disabled]){--border-color:var(--color-black-55);--border-width:0.0625rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled .dnb-input[data-input-state=disabled] .dnb-input__shell{box-shadow:none}.dnb-input[data-input-state=disabled] .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled{--border-color:var(--color-black-55);--border-width:0.0625rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled .dnb-button--control-after[disabled],.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled .dnb-button--control-before[disabled]{background-color:var(--color-black-3);color:var(--color-black-20)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small{width:calc(var(--forms-field-width--small) + var(--forms-field-block--number-control-buttons-width--small))}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small .dnb-button--control-before{width:var(--number-control-button-width--small)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium{width:calc(var(--forms-field-width--medium) + var(--forms-field-block--number-control-buttons-width--medium))}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium .dnb-button--control-before{width:var(--number-control-button-width--medium)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large{width:calc(var(--forms-field-width--large) + var(--forms-field-block--number-control-buttons-width--large))}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large .dnb-button--control-before{width:var(--number-control-button-width--large)}.dnb-forms-field-phone-number__country-code,.dnb-forms-field-phone-number__country-code .dnb-autocomplete__shell{width:calc(var(--forms-field-width--medium) - 2rem)}.dnb-forms-field-phone-number__number{flex:1}.dnb-forms-field-phone-number .dnb-form-label{max-width:14ch}.dnb-forms-field-postal-code-and-city__fields{-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}.dnb-forms-field-postal-code-and-city__postal-code{flex:0 5rem}.dnb-forms-field-postal-code-and-city__city{flex:1}.dnb-forms-field-selection__variant--dropdown .dnb-forms-field-block--layout-horizontal .dnb-form-label{align-self:center}.dnb-forms-field-selection__options-layout--horizontal .dnb-forms-field-block--layout-horizontal .dnb-form-label,.dnb-forms-field-selection__variant--dropdown .dnb-forms-field-block--layout-horizontal .dnb-form-label{margin-bottom:0}.dnb-forms-field-selection__variant--button .dnb-forms-field-block--layout-horizontal .dnb-form-label{line-height:2.5rem}:root{--forms-field-width--small:5rem;--forms-field-width--medium:11rem;--forms-field-width--large:21rem}fieldset.dnb-forms-field-block{border:none;padding:0}fieldset.dnb-forms-field-block:not([class*=space__top]){margin-top:0}fieldset.dnb-forms-field-block:not([class*=space__right]){margin-right:0}fieldset.dnb-forms-field-block:not([class*=space__bottom]){margin-bottom:0}fieldset.dnb-forms-field-block:not([class*=space__left]){margin-left:0}.dnb-forms-field-block__grid{display:grid}@media screen and (max-width:40em){.dnb-forms-field-block__grid{flex-wrap:wrap}.dnb-forms-field-block__grid>.dnb-form-label{margin-bottom:.5rem;margin-top:.5rem}}.dnb-forms-field-block--layout-vertical{grid-template-areas:"label" "contents" "status";grid-template-columns:auto}.dnb-forms-field-block--layout-horizontal{grid-template-areas:"label contents" "status status";grid-template-columns:fit-content(100%) auto}.dnb-forms-field-block--width-stretch{flex-grow:1}@media screen and (min-width:30em){.dnb-forms-field-block--width-small{width:var(--forms-field-width--small)}.dnb-forms-field-block--width-medium{width:var(--forms-field-width--medium)}.dnb-forms-field-block--width-large{width:var(--forms-field-width--large)}}.dnb-forms-field-block__label{align-items:center;display:flex;flex-flow:row;grid-area:label;justify-content:space-between}.dnb-forms-field-block__label-description{margin-left:.3em}.dnb-forms-field-block__status{grid-area:status}.dnb-forms-field-block__contents{grid-area:contents}.dnb-forms-field-block__contents--width-stretch{width:100%}@media screen and (min-width:30em){.dnb-forms-field-block__contents--width-small{width:var(--forms-field-width--small)}.dnb-forms-field-block__contents--width-medium{width:var(--forms-field-width--medium)}.dnb-forms-field-block__contents--width-large{width:var(--forms-field-width--large)}}.dnb-forms-button-row{-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}@media screen and (min-width:40em){.dnb-card+.dnb-forms-button-row:not([class*=space__left]){margin-left:var(--spacing-medium)}}.dnb-spacing .dnb-form-main-heading.dnb-h--large:not([class*=space__]){margin:0}@media screen and (min-width:40em){.dnb-form-main-heading:has(+.dnb-flex-stack>.dnb-card,+.dnb-card):not([class*=space__left]){margin-left:var(--spacing-medium)}}.dnb-form-main-heading:has(+.dnb-flex-stack>.dnb-card,+.dnb-card):not([class*=space__bottom]){margin-bottom:var(--spacing-small)}.dnb-spacing .dnb-form-sub-heading.dnb-h--medium:not([class*=space__]){margin:0}.dnb-form-sub-heading:has(+.dnb-flex-stack>.dnb-card,+.dnb-card):not([class*=space__bottom]){margin-bottom:var(--spacing-small)}.dnb-forms-steps-layout{-moz-column-gap:var(--spacing-medium);column-gap:var(--spacing-medium);display:flex;flex-flow:row wrap}.dnb-forms-steps-layout__sidebar{flex:0}.dnb-forms-steps-layout__contents{flex:1 0 25rem}.dnb-forms-steps-layout__contents .dnb-card{--border-color:var(--color-pistachio)}@media screen and (max-width:60em){.dnb-forms-steps-layout{align-items:stretch;flex-direction:column;justify-content:stretch}.dnb-forms-steps-layout__contents{flex-basis:auto}}.dnb-forms-steps-layout .dnb-step-indicator__sidebar{margin-right:0}.dnb-forms-value-block{display:block;font-size:var(--font-size-basis)}.dnb-forms-value-block--inline{display:inline-block;font-size:inherit;margin-left:var(--spacing-xx-small);margin-right:var(--spacing-xx-small)}.dnb-forms-value-block__label{font-weight:var(--font-weight-medium)}.dnb-forms-value-block__placeholder{color:rgba(0,0,0,.5)}.dnb-forms-test-element{border:1px dashed grey;border-radius:.5rem;color:#909090;padding:.5rem 1rem}

package/style/dnb-ui-fragments.css

@@ -436,4 +436,14 @@ html[data-whatinput=keyboard] .dnb-scroll-view[tabindex="0"]:focus {
   --border-width: var(--focus-ring-width);
   box-shadow: 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
+}
+
+.dnb-text-counter .dnb-icon {
+  margin-right: 0;
+  font-size: 0;
+  transition: margin 200ms var(--easing-default), font-size 400ms var(--easing-default);
+}
+.dnb-text-counter--exceeded .dnb-icon {
+  margin-right: 0.5rem;
+  font-size: var(--font-size-basis--em);
 }

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

@@ -1 +1 @@
-:root{--drawer-list-width:16rem;--drawer-list-height:2rem}.dnb-drawer-list{--drawer-list-padding-horizontal:1rem;--drawer-list-focus-border-width:0.125rem;--drawer-list-text-padding:0.5rem;--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;font-size:var(--font-size-small);min-width:inherit;position:relative;width:inherit}.dnb-drawer-list__portal__style{position:absolute;transition:all .3s var(--easing-default);z-index:3200}html[data-visual-test] .dnb-drawer-list__portal__style{transition:none!important}.dnb-drawer-list__portal__style--fixed{position:fixed}.dnb-drawer-list__root{min-width:inherit;width:inherit}.dnb-drawer-list__root--portal{left:0;position:absolute;top:0}.dnb-drawer-list__content{padding:0;width:100%}.dnb-drawer-list__list{background-color:var(--drawer-list-list-background);bottom:auto;font-size:var(--font-size-basis);left:0;line-height:var(--drawer-list-list-line-height);margin:0;min-width:inherit;padding:0;position:absolute;right:0;top:0;transform:translateY(0);transition:transform .2s,opacity .16s ease-out;width:inherit;z-index:3}.dnb-drawer-list__options{background-color:transparent;display:flex;flex-direction:column;list-style:none;margin:0;max-height:90vh;padding:0;width:100%}.dnb-spacing .dnb-drawer-list__options li.dnb-drawer-list__option{margin:0}.dnb-drawer-list--scroll .dnb-drawer-list__options{-webkit-overflow-scrolling:touch;-ms-overflow-style:auto;max-height:70vh;min-height:2rem;overflow-y:auto;overscroll-behavior:contain;scrollbar-color:var(--scrollbar-thumb-color,#888) transparent;transition:max-height .3s var(--easing-default)}html:not([data-visual-test]) .dnb-drawer-list--scroll .dnb-drawer-list__options{scroll-behavior:smooth}@supports not (scrollbar-color:auto){.dnb-drawer-list--scroll .dnb-drawer-list__options::-webkit-scrollbar{background-color:var(--scrollbar-track-color,#eee);border-radius:var(--scrollbar-thumb-width,.5rem)}.dnb-drawer-list--scroll .dnb-drawer-list__options::-webkit-scrollbar:vertical{width:var(--scrollbar-track-width,.5rem)}.dnb-drawer-list--scroll .dnb-drawer-list__options::-webkit-scrollbar:horizontal{height:var(--scrollbar-track-width,.5rem)}.dnb-drawer-list--scroll .dnb-drawer-list__options::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb-color,#888);border-radius:var(--scrollbar-thumb-width,.5rem)}.dnb-drawer-list--scroll .dnb-drawer-list__options::-webkit-scrollbar-thumb:hover{background-color:var(--scrollbar-thumb-hover-color,#666)}}.dnb-drawer-list--scroll.dnb-drawer-list--no-animation .dnb-drawer-list__options,html[data-visual-test] .dnb-drawer-list--scroll .dnb-drawer-list__options{transition:none!important}.dnb-drawer-list--opened .dnb-drawer-list__options{scroll-behavior:smooth}.dnb-drawer-list--no-scroll-animation .dnb-drawer-list__options{scroll-behavior:auto}.dnb-drawer-list__option{background-color:var(--color-white);color:inherit;cursor:pointer;margin:0;outline:none;padding:0;position:relative}.dnb-drawer-list__option__inner{background-color:var(--drawer-list-option-inner-background);color:inherit;display:grid;grid-template-columns:1fr auto;grid-template-rows:repeat(10,min-content);margin:0;outline:none;padding:1rem;position:relative;z-index:1}.dnb-drawer-list__option__inner>*{align-self:self-start}.dnb-drawer-list__option__item{display:block;grid-column:1;text-overflow:ellipsis}.dnb-drawer-list__option__item--horizontal{display:flex}.dnb-drawer-list__option__item>.dnb-icon{vertical-align:initial}.dnb-drawer-list__option__item .dnb-anchor{display:inline-block;font-size:inherit;margin-right:.5rem;word-break:break-word}@media screen and (min-width:40em){.dnb-drawer-list__option__suffix{align-self:center;grid-column:2;grid-row:1/-1;justify-self:end}}.dnb-drawer-list__option--ignore{cursor:default;pointer-events:none}.dnb-drawer-list__triangle{left:auto;margin:0 var(--drawer-list-padding-horizontal);overflow:hidden;pointer-events:none;right:0;top:calc(var(--drawer-list-focus-border-width) - var(--drawer-list-height)/2)}.dnb-drawer-list__triangle,.dnb-drawer-list__triangle:before{height:calc(var(--drawer-list-height)/2);position:absolute;width:calc(var(--drawer-list-height)/2)}.dnb-drawer-list__triangle:before{background-color:var(--color-white);border:1px solid var(--color-black-border);content:"";left:0;top:0;transform:translateY(60%) rotate(45deg)}.dnb-drawer-list--triangle-position-left .dnb-drawer-list__triangle{left:0;right:auto}.dnb-drawer-list--top .dnb-drawer-list__triangle{bottom:calc(var(--drawer-list-focus-border-width) - var(--drawer-list-height)/2 - 2px);top:auto;transform:rotate(180deg)}.dnb-drawer-list--top .dnb-drawer-list__triangle:before{transform:translateY(65%) rotate(45deg)}.dnb-drawer-list--is-popup.dnb-drawer-list--right{left:auto;position:absolute;right:0}.dnb-drawer-list--is-popup.dnb-drawer-list--left .dnb-drawer-list__list{left:-.5rem}.dnb-drawer-list--is-popup.dnb-drawer-list--right .dnb-drawer-list__list{right:-.5rem}.dnb-drawer-list--opened .dnb-drawer-list__list{display:flex;flex-direction:column;z-index:100}.dnb-drawer-list--opened .dnb-drawer-list__list:not(.dnb-drawer-list--opened .dnb-drawer-list__list--no-animation){animation:drawer-list-slide-top-down .2s ease-out 1 forwards}.dnb-drawer-list--opened .dnb-drawer-list__list--no-animation,html[data-visual-test] .dnb-drawer-list--opened .dnb-drawer-list__list{animation-duration:1ms!important}.dnb-drawer-list--hidden .dnb-drawer-list__list{display:none}.dnb-drawer-list--bottom .dnb-drawer-list__list{bottom:auto;top:0}.dnb-drawer-list--top .dnb-drawer-list__list{bottom:var(--drawer-list-height);top:auto}.dnb-drawer-list__portal .dnb-drawer-list--bottom .dnb-drawer-list__list{bottom:auto;top:var(--drawer-list-height)}.dnb-drawer-list__portal .dnb-drawer-list--small .dnb-drawer-list__list{top:var(--drawer-list-height--small)}.dnb-drawer-list--small.dnb-drawer-list--top .dnb-drawer-list__list{bottom:var(--drawer-list-height--small)}.dnb-drawer-list--small.dnb-drawer-list--is-popup.dnb-drawer-list--left .dnb-drawer-list__list{left:-.75rem}.dnb-drawer-list--small.dnb-drawer-list--is-popup.dnb-drawer-list--right .dnb-drawer-list__list{right:-.75rem}.dnb-drawer-list__portal .dnb-drawer-list--medium .dnb-drawer-list__list{top:var(--drawer-list-height--medium)}.dnb-drawer-list--medium.dnb-drawer-list--top .dnb-drawer-list__list{bottom:var(--drawer-list-height--medium)}.dnb-drawer-list--medium.dnb-drawer-list--is-popup.dnb-drawer-list--left .dnb-drawer-list__list{left:-.25rem}.dnb-drawer-list--medium.dnb-drawer-list--is-popup.dnb-drawer-list--right .dnb-drawer-list__list{right:-.25rem}.dnb-drawer-list__portal .dnb-drawer-list--large .dnb-drawer-list__list{top:var(--drawer-list-height--large)}.dnb-drawer-list--large.dnb-drawer-list--top .dnb-drawer-list__list{bottom:var(--drawer-list-height--large)}.dnb-drawer-list--large .dnb-drawer-list__triangle{margin:0 1.25rem}.dnb-drawer-list--large.dnb-drawer-list--is-popup.dnb-drawer-list--left .dnb-drawer-list__list{left:-.25rem}.dnb-drawer-list--large.dnb-drawer-list--is-popup.dnb-drawer-list--right .dnb-drawer-list__list{right:-.25rem}.dnb-drawer-list--is-popup.dnb-drawer-list--right .dnb-drawer-list__list{left:auto}.dnb-drawer-list__root>.dnb-drawer-list--right{left:auto;position:absolute;right:0}.dnb-drawer-list__portal .dnb-drawer-list--right{right:100%}.dnb-drawer-list__portal .dnb-drawer-list--top .dnb-drawer-list__list{bottom:0;top:auto}.dnb-drawer-list:not(.dnb-drawer-list--opened) .dnb-drawer-list__list:not(.dnb-drawer-list:not(.dnb-drawer-list--opened) .dnb-drawer-list__list--no-animation){animation:drawer-list-slide-top-up .15s ease-out 1 forwards}.dnb-drawer-list:not(.dnb-drawer-list--opened) .dnb-drawer-list__list--no-animation,html[data-visual-test] .dnb-drawer-list:not(.dnb-drawer-list--opened) .dnb-drawer-list__list{animation-duration:1ms!important}.dnb-drawer-list--action-menu .dnb-drawer-list__option__inner{align-items:center;flex-direction:row;justify-content:flex-start}@media screen and (min-width:40em){.dnb-drawer-list--action-menu.dnb-drawer-list--is-popup.dnb-drawer-list--left .dnb-drawer-list__list{left:0}.dnb-drawer-list--action-menu.dnb-drawer-list--is-popup.dnb-drawer-list--right .dnb-drawer-list__list{right:0}}@keyframes drawer-list-scale-in{0%{opacity:0;transform:scale(.8) translateX(calc(1px - var(--drawer-list-width)))}to{opacity:1;transform:scale(1) translateX(0)}}@keyframes drawer-list-scale-out{0%{opacity:1;transform:scale(1) translateX(0)}to{opacity:0;transform:scale(.8) translateX(calc(1px - var(--drawer-list-width)))}}@keyframes drawer-list-slide-top-down{0%{opacity:0;transform:translateY(calc(1px - var(--drawer-list-height)))}to{opacity:1;transform:translateY(0)}}@keyframes drawer-list-slide-top-up{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(calc(1px - var(--drawer-list-height)))}}@keyframes drawer-list-slide-bottom-down{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(calc(1px + var(--drawer-list-height)))}}@keyframes drawer-list-slide-bottom-up{0%{opacity:0;transform:translateY(calc(1px + var(--drawer-list-height)))}to{opacity:1;transform:translateY(0)}}.dnb-scroll-view{-webkit-overflow-scrolling:touch;-ms-overflow-style:auto;overflow-x:auto;overflow-y:auto;overscroll-behavior:contain;overscroll-behavior:auto;scrollbar-color:var(--scrollbar-thumb-color,#888) transparent}html:not([data-visual-test]) .dnb-scroll-view{scroll-behavior:smooth}@supports not (scrollbar-color:auto){.dnb-scroll-view::-webkit-scrollbar{background-color:var(--scrollbar-track-color,#eee);border-radius:var(--scrollbar-thumb-width,.5rem)}.dnb-scroll-view::-webkit-scrollbar:vertical{width:var(--scrollbar-track-width,.5rem)}.dnb-scroll-view::-webkit-scrollbar:horizontal{height:var(--scrollbar-track-width,.5rem)}.dnb-scroll-view::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb-color,#888);border-radius:var(--scrollbar-thumb-width,.5rem)}.dnb-scroll-view::-webkit-scrollbar-thumb:hover{background-color:var(--scrollbar-thumb-hover-color,#666)}}.dnb-scroll-view[tabindex="0"]:focus{outline:none}html[data-whatinput=keyboard] .dnb-scroll-view[tabindex="0"]: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)}
+:root{--drawer-list-width:16rem;--drawer-list-height:2rem}.dnb-drawer-list{--drawer-list-padding-horizontal:1rem;--drawer-list-focus-border-width:0.125rem;--drawer-list-text-padding:0.5rem;--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;font-size:var(--font-size-small);min-width:inherit;position:relative;width:inherit}.dnb-drawer-list__portal__style{position:absolute;transition:all .3s var(--easing-default);z-index:3200}html[data-visual-test] .dnb-drawer-list__portal__style{transition:none!important}.dnb-drawer-list__portal__style--fixed{position:fixed}.dnb-drawer-list__root{min-width:inherit;width:inherit}.dnb-drawer-list__root--portal{left:0;position:absolute;top:0}.dnb-drawer-list__content{padding:0;width:100%}.dnb-drawer-list__list{background-color:var(--drawer-list-list-background);bottom:auto;font-size:var(--font-size-basis);left:0;line-height:var(--drawer-list-list-line-height);margin:0;min-width:inherit;padding:0;position:absolute;right:0;top:0;transform:translateY(0);transition:transform .2s,opacity .16s ease-out;width:inherit;z-index:3}.dnb-drawer-list__options{background-color:transparent;display:flex;flex-direction:column;list-style:none;margin:0;max-height:90vh;padding:0;width:100%}.dnb-spacing .dnb-drawer-list__options li.dnb-drawer-list__option{margin:0}.dnb-drawer-list--scroll .dnb-drawer-list__options{-webkit-overflow-scrolling:touch;-ms-overflow-style:auto;max-height:70vh;min-height:2rem;overflow-y:auto;overscroll-behavior:contain;scrollbar-color:var(--scrollbar-thumb-color,#888) transparent;transition:max-height .3s var(--easing-default)}html:not([data-visual-test]) .dnb-drawer-list--scroll .dnb-drawer-list__options{scroll-behavior:smooth}@supports not (scrollbar-color:auto){.dnb-drawer-list--scroll .dnb-drawer-list__options::-webkit-scrollbar{background-color:var(--scrollbar-track-color,#eee);border-radius:var(--scrollbar-thumb-width,.5rem)}.dnb-drawer-list--scroll .dnb-drawer-list__options::-webkit-scrollbar:vertical{width:var(--scrollbar-track-width,.5rem)}.dnb-drawer-list--scroll .dnb-drawer-list__options::-webkit-scrollbar:horizontal{height:var(--scrollbar-track-width,.5rem)}.dnb-drawer-list--scroll .dnb-drawer-list__options::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb-color,#888);border-radius:var(--scrollbar-thumb-width,.5rem)}.dnb-drawer-list--scroll .dnb-drawer-list__options::-webkit-scrollbar-thumb:hover{background-color:var(--scrollbar-thumb-hover-color,#666)}}.dnb-drawer-list--scroll.dnb-drawer-list--no-animation .dnb-drawer-list__options,html[data-visual-test] .dnb-drawer-list--scroll .dnb-drawer-list__options{transition:none!important}.dnb-drawer-list--opened .dnb-drawer-list__options{scroll-behavior:smooth}.dnb-drawer-list--no-scroll-animation .dnb-drawer-list__options{scroll-behavior:auto}.dnb-drawer-list__option{background-color:var(--color-white);color:inherit;cursor:pointer;margin:0;outline:none;padding:0;position:relative}.dnb-drawer-list__option__inner{background-color:var(--drawer-list-option-inner-background);color:inherit;display:grid;grid-template-columns:1fr auto;grid-template-rows:repeat(10,min-content);margin:0;outline:none;padding:1rem;position:relative;z-index:1}.dnb-drawer-list__option__inner>*{align-self:self-start}.dnb-drawer-list__option__item{display:block;grid-column:1;text-overflow:ellipsis}.dnb-drawer-list__option__item--horizontal{display:flex}.dnb-drawer-list__option__item>.dnb-icon{vertical-align:initial}.dnb-drawer-list__option__item .dnb-anchor{display:inline-block;font-size:inherit;margin-right:.5rem;word-break:break-word}@media screen and (min-width:40em){.dnb-drawer-list__option__suffix{align-self:center;grid-column:2;grid-row:1/-1;justify-self:end}}.dnb-drawer-list__option--ignore{cursor:default;pointer-events:none}.dnb-drawer-list__triangle{left:auto;margin:0 var(--drawer-list-padding-horizontal);overflow:hidden;pointer-events:none;right:0;top:calc(var(--drawer-list-focus-border-width) - var(--drawer-list-height)/2)}.dnb-drawer-list__triangle,.dnb-drawer-list__triangle:before{height:calc(var(--drawer-list-height)/2);position:absolute;width:calc(var(--drawer-list-height)/2)}.dnb-drawer-list__triangle:before{background-color:var(--color-white);border:1px solid var(--color-black-border);content:"";left:0;top:0;transform:translateY(60%) rotate(45deg)}.dnb-drawer-list--triangle-position-left .dnb-drawer-list__triangle{left:0;right:auto}.dnb-drawer-list--top .dnb-drawer-list__triangle{bottom:calc(var(--drawer-list-focus-border-width) - var(--drawer-list-height)/2 - 2px);top:auto;transform:rotate(180deg)}.dnb-drawer-list--top .dnb-drawer-list__triangle:before{transform:translateY(65%) rotate(45deg)}.dnb-drawer-list--is-popup.dnb-drawer-list--right{left:auto;position:absolute;right:0}.dnb-drawer-list--is-popup.dnb-drawer-list--left .dnb-drawer-list__list{left:-.5rem}.dnb-drawer-list--is-popup.dnb-drawer-list--right .dnb-drawer-list__list{right:-.5rem}.dnb-drawer-list--opened .dnb-drawer-list__list{display:flex;flex-direction:column;z-index:100}.dnb-drawer-list--opened .dnb-drawer-list__list:not(.dnb-drawer-list--opened .dnb-drawer-list__list--no-animation){animation:drawer-list-slide-top-down .2s ease-out 1 forwards}.dnb-drawer-list--opened .dnb-drawer-list__list--no-animation,html[data-visual-test] .dnb-drawer-list--opened .dnb-drawer-list__list{animation-duration:1ms!important}.dnb-drawer-list--hidden .dnb-drawer-list__list{display:none}.dnb-drawer-list--bottom .dnb-drawer-list__list{bottom:auto;top:0}.dnb-drawer-list--top .dnb-drawer-list__list{bottom:var(--drawer-list-height);top:auto}.dnb-drawer-list__portal .dnb-drawer-list--bottom .dnb-drawer-list__list{bottom:auto;top:var(--drawer-list-height)}.dnb-drawer-list__portal .dnb-drawer-list--small .dnb-drawer-list__list{top:var(--drawer-list-height--small)}.dnb-drawer-list--small.dnb-drawer-list--top .dnb-drawer-list__list{bottom:var(--drawer-list-height--small)}.dnb-drawer-list--small.dnb-drawer-list--is-popup.dnb-drawer-list--left .dnb-drawer-list__list{left:-.75rem}.dnb-drawer-list--small.dnb-drawer-list--is-popup.dnb-drawer-list--right .dnb-drawer-list__list{right:-.75rem}.dnb-drawer-list__portal .dnb-drawer-list--medium .dnb-drawer-list__list{top:var(--drawer-list-height--medium)}.dnb-drawer-list--medium.dnb-drawer-list--top .dnb-drawer-list__list{bottom:var(--drawer-list-height--medium)}.dnb-drawer-list--medium.dnb-drawer-list--is-popup.dnb-drawer-list--left .dnb-drawer-list__list{left:-.25rem}.dnb-drawer-list--medium.dnb-drawer-list--is-popup.dnb-drawer-list--right .dnb-drawer-list__list{right:-.25rem}.dnb-drawer-list__portal .dnb-drawer-list--large .dnb-drawer-list__list{top:var(--drawer-list-height--large)}.dnb-drawer-list--large.dnb-drawer-list--top .dnb-drawer-list__list{bottom:var(--drawer-list-height--large)}.dnb-drawer-list--large .dnb-drawer-list__triangle{margin:0 1.25rem}.dnb-drawer-list--large.dnb-drawer-list--is-popup.dnb-drawer-list--left .dnb-drawer-list__list{left:-.25rem}.dnb-drawer-list--large.dnb-drawer-list--is-popup.dnb-drawer-list--right .dnb-drawer-list__list{right:-.25rem}.dnb-drawer-list--is-popup.dnb-drawer-list--right .dnb-drawer-list__list{left:auto}.dnb-drawer-list__root>.dnb-drawer-list--right{left:auto;position:absolute;right:0}.dnb-drawer-list__portal .dnb-drawer-list--right{right:100%}.dnb-drawer-list__portal .dnb-drawer-list--top .dnb-drawer-list__list{bottom:0;top:auto}.dnb-drawer-list:not(.dnb-drawer-list--opened) .dnb-drawer-list__list:not(.dnb-drawer-list:not(.dnb-drawer-list--opened) .dnb-drawer-list__list--no-animation){animation:drawer-list-slide-top-up .15s ease-out 1 forwards}.dnb-drawer-list:not(.dnb-drawer-list--opened) .dnb-drawer-list__list--no-animation,html[data-visual-test] .dnb-drawer-list:not(.dnb-drawer-list--opened) .dnb-drawer-list__list{animation-duration:1ms!important}.dnb-drawer-list--action-menu .dnb-drawer-list__option__inner{align-items:center;flex-direction:row;justify-content:flex-start}@media screen and (min-width:40em){.dnb-drawer-list--action-menu.dnb-drawer-list--is-popup.dnb-drawer-list--left .dnb-drawer-list__list{left:0}.dnb-drawer-list--action-menu.dnb-drawer-list--is-popup.dnb-drawer-list--right .dnb-drawer-list__list{right:0}}@keyframes drawer-list-scale-in{0%{opacity:0;transform:scale(.8) translateX(calc(1px - var(--drawer-list-width)))}to{opacity:1;transform:scale(1) translateX(0)}}@keyframes drawer-list-scale-out{0%{opacity:1;transform:scale(1) translateX(0)}to{opacity:0;transform:scale(.8) translateX(calc(1px - var(--drawer-list-width)))}}@keyframes drawer-list-slide-top-down{0%{opacity:0;transform:translateY(calc(1px - var(--drawer-list-height)))}to{opacity:1;transform:translateY(0)}}@keyframes drawer-list-slide-top-up{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(calc(1px - var(--drawer-list-height)))}}@keyframes drawer-list-slide-bottom-down{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(calc(1px + var(--drawer-list-height)))}}@keyframes drawer-list-slide-bottom-up{0%{opacity:0;transform:translateY(calc(1px + var(--drawer-list-height)))}to{opacity:1;transform:translateY(0)}}.dnb-scroll-view{-webkit-overflow-scrolling:touch;-ms-overflow-style:auto;overflow-x:auto;overflow-y:auto;overscroll-behavior:contain;overscroll-behavior:auto;scrollbar-color:var(--scrollbar-thumb-color,#888) transparent}html:not([data-visual-test]) .dnb-scroll-view{scroll-behavior:smooth}@supports not (scrollbar-color:auto){.dnb-scroll-view::-webkit-scrollbar{background-color:var(--scrollbar-track-color,#eee);border-radius:var(--scrollbar-thumb-width,.5rem)}.dnb-scroll-view::-webkit-scrollbar:vertical{width:var(--scrollbar-track-width,.5rem)}.dnb-scroll-view::-webkit-scrollbar:horizontal{height:var(--scrollbar-track-width,.5rem)}.dnb-scroll-view::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb-color,#888);border-radius:var(--scrollbar-thumb-width,.5rem)}.dnb-scroll-view::-webkit-scrollbar-thumb:hover{background-color:var(--scrollbar-thumb-hover-color,#666)}}.dnb-scroll-view[tabindex="0"]:focus{outline:none}html[data-whatinput=keyboard] .dnb-scroll-view[tabindex="0"]: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-text-counter .dnb-icon{font-size:0;margin-right:0;transition:margin .2s var(--easing-default),font-size .4s var(--easing-default)}.dnb-text-counter--exceeded .dnb-icon{font-size:var(--font-size-basis--em);margin-right:.5rem}

package/style/dnb-ui-fragments.scss

@@ -7,3 +7,4 @@
 @import './core/utilities.scss';
 @import '../fragments/drawer-list/style/dnb-drawer-list.scss';
 @import '../fragments/scroll-view/style/dnb-scroll-view.scss';
+@import '../fragments/text-counter/style/dnb-text-counter.scss';

package/style/themes/theme-eiendom/eiendom-theme-components.css

@@ -451,6 +451,16 @@ html[data-whatinput=keyboard] .dnb-scroll-view[tabindex="0"]:focus {
   border-color: transparent;
 }
 
+.dnb-text-counter .dnb-icon {
+  margin-right: 0;
+  font-size: 0;
+  transition: margin 200ms var(--easing-default), font-size 400ms var(--easing-default);
+}
+.dnb-text-counter--exceeded .dnb-icon {
+  margin-right: 0.5rem;
+  font-size: var(--font-size-basis--em);
+}
+
 /**
  * ATTENTION: This file is auto generated by using "styleFactory".
  * Do not change the content!
@@ -491,12 +501,6 @@ html[data-whatinput=keyboard] .dnb-scroll-view[tabindex="0"]:focus {
 /*
  * Utilities
  */
-:root {
-  --forms-field-width--small: 5rem;
-  --forms-field-width--medium: 11rem;
-  --forms-field-width--large: 21rem;
-}
-
 .dnb-forms-field-number {
   --number-control-button-border-color: black;
   --number-control-button-border-color--hover: darkgrey;
@@ -784,6 +788,9 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   justify-content: space-between;
   align-items: center;
 }
+.dnb-forms-field-block__label-description {
+  margin-left: 0.3em;
+}
 .dnb-forms-field-block__status {
   grid-area: status;
 }
@@ -1819,18 +1826,28 @@ label + .dnb-autocomplete[class*=__form-status] .dnb-autocomplete__shell {
 .dnb-breadcrumb__item__span__icon {
   margin-right: 0.5rem;
 }
-.dnb-breadcrumb__animation {
+.dnb-breadcrumb__multiple {
   display: flex;
   flex-direction: column;
   transition: height 400ms var(--easing-default);
 }
-.dnb-breadcrumb__animation .dnb-breadcrumb__item {
+.dnb-breadcrumb__multiple .dnb-breadcrumb__item {
   transition: transform 400ms var(--easing-default) calc(var(--delay) * 50ms);
   transform: translateX(-1rem);
 }
-.dnb-breadcrumb__animation.dnb-height-animation--parallax .dnb-breadcrumb__item {
+.dnb-breadcrumb__multiple.dnb-height-animation--parallax .dnb-breadcrumb__item {
   transform: translateX(0);
 }
+@media screen and (max-width: 60em) {
+  .dnb-breadcrumb__bar .dnb-breadcrumb__multiple {
+    display: none;
+  }
+}
+@media screen and (min-width: 60em) {
+  .dnb-breadcrumb--variant-multiple .dnb-breadcrumb__toggle {
+    display: none;
+  }
+}
 .dnb-breadcrumb__collapse {
   display: flex;
   flex-direction: column;
@@ -3825,13 +3842,13 @@ label + .dnb-dropdown[class*=__form-status] .dnb-dropdown__shell {
 .dnb-flex-container--wrap {
   flex-wrap: wrap;
 }
-.dnb-flex-container--row-gap-small, .dnb-flex-container--has-size.dnb-flex-container--spacing-small, .dnb-flex-container--wrap.dnb-flex-container--direction-horizontal {
+.dnb-flex-container--row-gap-small {
   --gap: var(--spacing-small);
 }
-.dnb-flex-container--row-gap-medium, .dnb-flex-container--has-size.dnb-flex-container--spacing-medium {
+.dnb-flex-container--row-gap-medium {
   --gap: var(--spacing-medium);
 }
-.dnb-flex-container--row-gap-large, .dnb-flex-container--has-size.dnb-flex-container--spacing-large {
+.dnb-flex-container--row-gap-large {
   --gap: var(--spacing-large);
 }
 .dnb-flex-container__hr.dnb-hr {
@@ -5924,6 +5941,7 @@ html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:checked):no
   --left: -100vw;
   --width: 100vw;
   --height: 100%;
+  --color-transparent: transparent;
   color: var(--text-color, black);
   border-radius: var(--rounded-corner, 0);
 }
@@ -8598,7 +8616,7 @@ html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover:not([disa
 .dnb-textarea__inner {
   display: inline-flex;
   flex-direction: column;
-  margin: var(--textarea-padding-width);
+  margin: 0 var(--textarea-padding-width);
 }
 .dnb-textarea__shell {
   display: inline-flex;
@@ -8613,15 +8631,22 @@ html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover:not([disa
   bottom: -0.5rem;
   right: -0.5rem;
   background-color: var(--color-white);
-  box-shadow: 0 0 0 0.0625rem var(--color-sea-green);
+  --border-color: var(--textarea-border-color);
+  --border-width: var(--textarea-border-width);
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
   border-radius: 0.25rem;
 }
 .dnb-textarea__row {
   display: inline-flex;
+  margin: var(--textarea-padding-width) 0;
 }
 .dnb-textarea__suffix.dnb-suffix {
   padding-left: 1rem;
 }
+.dnb-textarea .dnb-text-counter {
+  margin-left: -0.5rem;
+}
 .dnb-textarea__textarea {
   position: relative;
   z-index: 2;
@@ -8712,7 +8737,7 @@ html:not([data-visual-test]) .dnb-textarea__textarea {
 }
 .dnb-textarea__inner > .dnb-form-status {
   order: 2;
-  margin: 1rem 0 0 calc(0px - var(--textarea-padding-width));
+  margin: 0.5rem 0 0 calc(0px - var(--textarea-padding-width));
 }
 .dnb-textarea:not(.dnb-textarea--vertical) .dnb-form-label {
   margin-top: 0.5rem;
@@ -11363,6 +11388,13 @@ html[data-visual-test] .dnb-table__container {
 /*
  * Utilities
  */
+.dnb-textarea {
+  --textarea-border-color: var(--color-sea-green);
+  --textarea-border-color--hover: var(--color-emerald-green);
+  --textarea-border-color--disabled: var(--color-black-55);
+  --textarea-border-width: 0.0625rem;
+  --textarea-border-width--hover: 0.125rem;
+}
 .dnb-textarea__textarea {
   color: var(--color-black);
   background-color: var(--textarea-background-color);
@@ -11376,14 +11408,20 @@ html[data-visual-test] .dnb-table__container {
   color: var(--color-black-55);
 }
 .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):focus ~ .dnb-textarea__state, .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover ~ .dnb-textarea__state {
-  box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
+  --border-color: var(--textarea-border-color--hover);
+  --border-width: var(--textarea-border-width--hover);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
 }
 .dnb-textarea--disabled .dnb-textarea__textarea, .dnb-textarea__textarea[disabled] {
   color: var(--color-black-55);
   background-color: var(--color-black-3);
 }
 .dnb-textarea--disabled .dnb-textarea__state, .dnb-textarea__textarea[disabled] ~ .dnb-textarea__state {
-  box-shadow: 0 0 0 0.0625rem var(--color-black-55);
+  --border-color: var(--textarea-border-color--disabled);
+  --border-width: var(--textarea-border-width);
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
   background-color: var(--color-black-3);
 }
 .dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled), .dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover {
@@ -11894,6 +11932,13 @@ html[data-whatinput=keyboard] .dnb-drawer-list__option--selected .dnb-drawer-lis
 /*
  * Utilities
  */
+.dnb-text-counter.dnb-p {
+  color: var(--color-black-55);
+}
+.dnb-text-counter--exceeded.dnb-p {
+  color: var(--color-fire-red);
+}
+
 /**
  * ATTENTION: This file is auto generated by using "themeFactory".
  * But you still can change the content of this file on the very top.
@@ -11938,12 +11983,6 @@ html[data-whatinput=keyboard] .dnb-drawer-list__option--selected .dnb-drawer-lis
 /*
  * Utilities
  */
-:root {
-  --forms-field-width--small: 5rem;
-  --forms-field-width--medium: 11rem;
-  --forms-field-width--large: 21rem;
-}
-
 .dnb-forms-field-number {
   --number-control-button-border-color: black;
   --number-control-button-border-color--hover: darkgrey;
@@ -12231,6 +12270,9 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   justify-content: space-between;
   align-items: center;
 }
+.dnb-forms-field-block__label-description {
+  margin-left: 0.3em;
+}
 .dnb-forms-field-block__status {
   grid-area: status;
 }
@@ -12366,4 +12408,13 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   --number-control-button-color--active: var(--color-sea-green);
   --number-control-button--error: var(--color-fire-red);
   --number-control-button--error-contrast: var(--color-fire-red-8);
+}
+.dnb-forms-field-number__contents--has-controls .dnb-button.dnb-button--size-small {
+  --button-height--small: 2rem;
+  --button-width--small: 2rem;
+}
+
+.dnb-forms-field-block__label-description {
+  color: var(--color-black-55);
+  font-size: var(--font-size-small);
 }