@dnb/eufemia 10.32.0 → 10.34.0

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

@@ -716,7 +716,6 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   grid-template-areas: "label contents" "status status";
 }
 .dnb-forms-field-block--width-stretch {
-  width: 100%;
   flex-grow: 1;
 }
 @media screen and (min-width: 25em) {
@@ -784,6 +783,9 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   .dnb-forms-field-block__contents__composition--horizontal {
     align-items: flex-end;
   }
+  .dnb-forms-field-block__contents__composition--horizontal[class*=align-center] {
+    align-items: center;
+  }
 }
 @media screen and (max-width: 25em) {
   .dnb-forms-field-block__contents__composition--horizontal {
@@ -966,7 +968,7 @@ html[data-visual-test] .dnb-forms-submit-indicator__content b {
   transition: transform 400ms var(--easing-default) 50ms, box-shadow 0.8s var(--easing-default);
   transform: translateY(-2.5rem);
 }
-.dnb-forms-iterate-block__inner:not([class*=dnb-flex-container--spacing]) {
+.dnb-forms-iterate-block--variant-basic .dnb-forms-iterate-block__inner, .dnb-forms-iterate-block__inner:not([class*=dnb-flex-container--spacing]) {
   --padding: 0;
 }
 .dnb-forms-iterate-block__inner[class*=dnb-flex-container--spacing] {
@@ -1108,7 +1110,7 @@ html[data-visual-test] .dnb-forms-submit-indicator__content b {
   justify-content: stretch;
   align-items: stretch;
 }
-.dnb-forms-wizard-layout__sidebar {
+.dnb-forms-wizard-layout__indicator {
   flex: 0;
   margin-bottom: 2rem;
 }
@@ -1746,7 +1748,6 @@ a.dnb-button {
   display: flex;
   justify-content: center;
   align-items: center;
-  color: var(--color-sea-green);
 }
 .dnb-autocomplete__show-all .dnb-drawer-list__option__inner .dnb-drawer-list__option__item {
   display: flex;
@@ -2521,6 +2522,9 @@ button.dnb-button::-moz-focus-inner {
 .dnb-card > .dnb-flex-container > .dnb-space:has(> .dnb-scroll-view) {
   width: 100%;
 }
+.dnb-card > .dnb-flex-container--align-stretch > .dnb-button {
+  align-self: flex-start;
+}
 
 /*
 * Checkbox component
@@ -2543,14 +2547,14 @@ button.dnb-button::-moz-focus-inner {
   --checkbox-gfx-width__indeterminate: 0.625rem;
   --checkbox-gfx-height__indeterminate--large: 0.875rem;
   --checkbox-gfx-width__indeterminate--large: 0.875rem;
-  --checkbox-border-width: 0.125rem;
-  --checkbox-border-width--hover: 0.125rem;
+  --checkbox-border-width: 0.09375rem;
   --checkbox-color-gfx-on: black;
   --checkbox-color-gfx-off: white;
   --checkbox-color-background-on: white;
   --checkbox-color-background-off: white;
   --checkbox-color-border-on: black;
   --checkbox-color-border-off: black;
+  --checkbox-border-width--disabled: 0.125rem;
   --checkbox-color-gfx--disabled: grey;
   --checkbox-color-background-on--disabled: lightgrey;
   --checkbox-color-background-off--disabled: lightgrey;
@@ -2559,12 +2563,14 @@ button.dnb-button::-moz-focus-inner {
   --checkbox-color-gfx__indeterminate--disabled: grey;
   --checkbox-color-background--active: lightgrey;
   --checkbox-color-border--active: transparent;
+  --checkbox-border-width--hover: 0.125rem;
   --checkbox-color-gfx--hover: grey;
   --checkbox-color-background--hover: white;
   --checkbox-color-border-on--hover: grey;
   --checkbox-color-border-off--hover: grey;
   --checkbox-color-gfx--focus: grey;
   --checkbox-color-background--focus: lightgrey;
+  --checkbox-border-width--error: 0.125rem;
   --checkbox-color-gfx--error: lavenderblush;
   --checkbox-color-gfx--error-contrast: red;
   --checkbox-color-background-on--error: red;
@@ -2757,6 +2763,9 @@ html[data-whatinput=keyboard] .dnb-checkbox__focus {
   width: var(--checkbox-gfx-width__indeterminate--large);
   height: var(--checkbox-gfx-height__indeterminate--large);
 }
+.dnb-checkbox__input[disabled]:checked ~ .dnb-checkbox__button {
+  border-width: var(--checkbox-border-width--disabled);
+}
 .dnb-checkbox__input[disabled]:checked ~ .dnb-checkbox__button, .dnb-checkbox__input[disabled][data-checked=true] ~ .dnb-checkbox__button {
   background-color: var(--checkbox-color-background-on--disabled);
   border-color: var(--checkbox-color-border-on--disabled);
@@ -2791,6 +2800,7 @@ html[data-whatinput=keyboard] .dnb-checkbox__focus {
 .dnb-checkbox__input:not([disabled]):not(:active):hover ~ .dnb-checkbox__button {
   border-color: var(--checkbox-color-border-off--hover);
   background-color: var(--checkbox-color-background--hover);
+  border-width: var(--checkbox-border-width--hover);
 }
 .dnb-checkbox__input:hover ~ .dnb-checkbox__gfx {
   color: var(--checkbox-color-gfx--hover);
@@ -2817,7 +2827,7 @@ html[data-whatinput=keyboard] .dnb-checkbox__input:not([disabled]):focus-visible
 .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active) ~ .dnb-checkbox__button .dnb-checkbox__focus {
   display: block;
   --border-color: var(--checkbox-color-border--error);
-  --border-width: var(--checkbox-border-width);
+  --border-width: var(--checkbox-border-width--error);
   box-shadow: 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
 }
@@ -4731,6 +4741,9 @@ button .dnb-form-status__text {
        column-gap: var(--column-gap, 0);
   --grid-columns: var(--small-columns, 4);
 }
+.dnb-grid-container--row-gap-x-small {
+  --row-gap: var(--spacing-x-small);
+}
 .dnb-grid-container--row-gap-small {
   --row-gap: var(--spacing-small);
 }
@@ -4740,6 +4753,9 @@ button .dnb-form-status__text {
 .dnb-grid-container--row-gap-large {
   --row-gap: var(--spacing-large);
 }
+.dnb-grid-container--column-gap-x-small {
+  --column-gap: var(--spacing-x-small);
+}
 .dnb-grid-container--column-gap-small {
   --column-gap: var(--spacing-small);
 }
@@ -6152,14 +6168,17 @@ html[data-visual-test] .dnb-progress-indicator__bar-transition {
 }
 
 .dnb-radio {
+  --radio-dot--medium: 0.75rem;
+  --radio-dot--large: 1.125rem;
   --radio-width--large: 2rem;
   --radio-height--large: 2rem;
-  --radio-border-width: 0.125rem;
+  --radio-border-width: 0.09375rem;
   --radio-color-dot-on: black;
   --radio-color-background-on: white;
   --radio-color-border-on: black;
   --radio-color-background-off: white;
   --radio-color-border-off: black;
+  --radio-border-width--disabled: 0.125rem;
   --radio-color-dot-on--disabled: lightgrey;
   --radio-color-background--disabled: white;
   --radio-color-border-on--disabled: lightgrey;
@@ -6168,9 +6187,12 @@ html[data-visual-test] .dnb-progress-indicator__bar-transition {
   --radio-color-border-on--active: lightgrey;
   --radio-color-background-off--active: lightgrey;
   --radio-color-border-off--active: transparent;
+  --radio-border-width--hover: 0.125rem;
+  --radio-border-width-on--hover: 0.125rem;
   --radio-color-dot-on--hover: lightgrey;
   --radio-color-background-on--hover: lightgrey;
   --radio-color-background-off--hover: lightgrey;
+  --radio-border-width--focus: 0.125rem;
   --radio-color-background-on--focus: var(--color-white);
   --radio-color-background-off--focus: lightgrey;
   --radio-color-dot-on--error: red;
@@ -6235,19 +6257,19 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
   border-radius: 50%;
 }
 .dnb-radio--large .dnb-radio__focus, .dnb-radio--large .dnb-radio__button {
-  width: calc(var(--radio-width--large) - 0.125rem);
-  height: calc(var(--radio-height--large) - 0.125rem);
+  width: var(--radio-width--large);
+  height: var(--radio-height--large);
 }
 .dnb-radio__dot {
-  width: calc(var(--radio-width--medium) - 0.75rem);
-  height: calc(var(--radio-height--medium) - 0.75rem);
+  width: var(--radio-dot--medium);
+  height: var(--radio-dot--medium);
   border-radius: 50%;
   background-color: var(--radio-color-dot-on);
   transition: opacity 200ms ease-out, transform 200ms ease-out;
 }
 .dnb-radio--large .dnb-radio__dot {
-  width: calc(var(--radio-width--large) - 0.875rem);
-  height: calc(var(--radio-height--large) - 0.875rem);
+  width: var(--radio-dot--large);
+  height: var(--radio-dot--large);
 }
 .dnb-radio__input {
   opacity: 0;
@@ -6381,6 +6403,9 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
   background-color: var(--radio-color-background-off);
   border-color: var(--radio-color-border-off);
 }
+.dnb-radio__input[disabled] ~ .dnb-radio__button {
+  border-width: var(--radio-border-width--disabled);
+}
 .dnb-radio__input[disabled]:checked ~ .dnb-radio__button, .dnb-radio__input[disabled][data-checked=true] ~ .dnb-radio__button {
   border-color: var(--radio-color-border-on--disabled);
   background-color: var(--radio-color-background--disabled);
@@ -6413,11 +6438,14 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
 }
 .dnb-radio__input:not([disabled]):not(:focus):checked:hover ~ .dnb-radio__button, .dnb-radio__input:not([disabled]):not(:focus)[data-checked=true]:hover ~ .dnb-radio__button {
   background-color: var(--radio-color-background-on--hover);
+  border-width: var(--radio-border-width-on--hover);
 }
 .dnb-radio__input:not([disabled]):not(:focus):not(:checked):not([data-checked=true]):hover ~ .dnb-radio__button {
   background-color: var(--radio-color-background-off--hover);
+  border-width: var(--radio-border-width--hover);
 }
 html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):focus ~ .dnb-radio__button {
+  border-width: var(--radio-border-width--focus);
   border: none;
 }
 .dnb-radio__input:not([disabled]):focus ~ .dnb-radio__focus, .dnb-radio__input:not([disabled]):active ~ .dnb-radio__focus {
@@ -8529,6 +8557,9 @@ html[data-whatinput=keyboard] .dnb-table > thead > tr > th.dnb-table--active .dn
 .dnb-modal__content .dnb-table__container .dnb-table__scroll-view {
   overflow: visible;
 }
+.dnb-card .dnb-table__container {
+  width: 100%;
+}
 
 /*
 * Table component
@@ -10884,6 +10915,9 @@ html:not([data-whatintent=touch]) .dnb-accordion__header--filled:focus-visible:n
 /*
  * Utilities
  */
+.dnb-autocomplete__show-all .dnb-drawer-list__option__inner {
+  color: var(--color-sea-green);
+}
 .dnb-autocomplete--opened .dnb-input .dnb-input__shell .dnb-input__shell, .dnb-autocomplete:not(.dnb-autocomplete__status--error) .dnb-form-label:hover ~ .dnb-autocomplete__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__shell {
   --border-color: var(--color-sea-green);
   --border-width: 0.125rem;
@@ -12790,7 +12824,6 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   grid-template-areas: "label contents" "status status";
 }
 .dnb-forms-field-block--width-stretch {
-  width: 100%;
   flex-grow: 1;
 }
 @media screen and (min-width: 25em) {
@@ -12858,6 +12891,9 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   .dnb-forms-field-block__contents__composition--horizontal {
     align-items: flex-end;
   }
+  .dnb-forms-field-block__contents__composition--horizontal[class*=align-center] {
+    align-items: center;
+  }
 }
 @media screen and (max-width: 25em) {
   .dnb-forms-field-block__contents__composition--horizontal {
@@ -13040,7 +13076,7 @@ html[data-visual-test] .dnb-forms-submit-indicator__content b {
   transition: transform 400ms var(--easing-default) 50ms, box-shadow 0.8s var(--easing-default);
   transform: translateY(-2.5rem);
 }
-.dnb-forms-iterate-block__inner:not([class*=dnb-flex-container--spacing]) {
+.dnb-forms-iterate-block--variant-basic .dnb-forms-iterate-block__inner, .dnb-forms-iterate-block__inner:not([class*=dnb-flex-container--spacing]) {
   --padding: 0;
 }
 .dnb-forms-iterate-block__inner[class*=dnb-flex-container--spacing] {
@@ -13182,7 +13218,7 @@ html[data-visual-test] .dnb-forms-submit-indicator__content b {
   justify-content: stretch;
   align-items: stretch;
 }
-.dnb-forms-wizard-layout__sidebar {
+.dnb-forms-wizard-layout__indicator {
   flex: 0;
   margin-bottom: 2rem;
 }