@dnb/eufemia 10.30.1 → 10.31.0

package/cjs/components/checkbox/style/dnb-checkbox.scss

@@ -11,12 +11,19 @@
 }
 
 .dnb-checkbox {
+  --checkbox-border-radius: 0.25rem;
+  --checkbox-gfx-border-radius__indeterminate: 0.125rem;
   --checkbox-width--large: 2rem;
   --checkbox-height--large: 2rem;
+  --checkbox-gfx-height__indeterminate: 0.625rem;
+  --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;
   // Normal state
   --checkbox-color-gfx-on: black;
-  --checkbox-color-gfx-off: black;
+  --checkbox-color-gfx-off: white;
   --checkbox-color-background-on: white;
   --checkbox-color-background-off: white;
   --checkbox-color-border-on: black;
@@ -27,6 +34,7 @@
   --checkbox-color-background-off--disabled: lightgrey;
   --checkbox-color-border-on--disabled: grey;
   --checkbox-color-border-off--disabled: grey;
+  --checkbox-color-gfx__indeterminate--disabled: grey;
   // Active state
   --checkbox-color-background--active: lightgrey;
   --checkbox-color-border--active: transparent;
@@ -44,6 +52,18 @@
   --checkbox-color-background-on--error: red;
   --checkbox-color-background--error-contrast: lavenderblush;
   --checkbox-color-border--error: red;
+  --checkbox-color-gfx-indeterminate--error: red;
+  --checkbox-color-gfx--error--hover: red;
+  --checkbox-color-background--error--hover: lavenderblush;
+  --checkbox-color-border--error--hover: red;
+  // Indeterminate state
+  --checkbox-color-background-indeterminate: grey;
+  --checkbox-color-gfx-indeterminate: darkgray;
+  // Indeterminate Active state
+  --checkbox-color-background-indeterminate--active: grey;
+  --checkbox-color-border-indeterminate--active: white;
+  --checkbox-color-gfx-indeterminate--active: white;
+
   // Bounding box
   --checkbox-bounding--medium: 1.75, 1.75;
 
@@ -96,13 +116,13 @@
     width: calc(var(--checkbox-width--medium) - 0.25rem);
     height: calc(var(--checkbox-height--medium) - 0.25rem);
 
-    border-radius: 0.25rem;
+    border-radius: var(--checkbox-border-radius);
 
     .dnb-checkbox--large & {
       width: var(--checkbox-width--large);
       height: var(--checkbox-height--large);
 
-      border-radius: 0.25rem;
+      border-radius: var(--checkbox-border-radius);
     }
   }
 
@@ -118,7 +138,6 @@
     width: calc(var(--checkbox-width--medium) - 0.5rem);
     height: calc(var(--checkbox-height--medium) - 0.5rem);
 
-    // fill: currentColor; // old svg fix
     shape-rendering: geometricprecision;
     transition:
       opacity 200ms ease-out,
@@ -130,8 +149,6 @@
   }
 
   &--large &__gfx {
-    // width: var(--checkbox-width--large); // old svg size
-    // height: var(--checkbox-height--large); // old svg size
     width: calc(var(--checkbox-width--large) - 0.5rem);
     height: calc(var(--checkbox-height--large) - 0.5rem);
   }
@@ -160,7 +177,8 @@
     width: var(--checkbox-width--large);
     height: var(--checkbox-height--large);
 
-    transform: scale(1); // reset scale
+    // reset scale
+    transform: scale(1);
   }
 
   &__input:not([disabled]) {
@@ -234,6 +252,7 @@
     transform: scale(1);
     color: var(--checkbox-color-gfx-on);
   }
+
   &__input:checked ~ &__button,
   &__input[data-checked='true'] ~ &__button {
     background-color: var(--checkbox-color-background-on);
@@ -241,15 +260,58 @@
   }
 
   // Off
-  &__input:not(:checked):not([data-checked='true']) ~ &__gfx {
+  &__input:not([disabled]):not(:checked):not([data-checked='true'])
+    ~ &__gfx {
     opacity: 0;
     transform: scale(0.8);
     // Needed during transition
     color: var(--checkbox-color-gfx-off);
   }
+
   &__input:not(:checked):not([data-checked='true']) ~ &__button {
     background-color: var(--checkbox-color-background-off);
     border-color: var(--checkbox-color-border-off);
+
+    transition: background-color 100ms ease-out;
+  }
+
+  // Show the icon when indeterminate is true
+  &__input ~ &__indeterminate {
+    position: absolute;
+    z-index: 5;
+
+    width: var(--checkbox-gfx-width__indeterminate);
+    height: var(--checkbox-gfx-height__indeterminate);
+
+    transform: scale(0.85);
+    opacity: 0;
+
+    background-color: var(--checkbox-color-gfx-indeterminate);
+    border-radius: var(--checkbox-gfx-border-radius__indeterminate);
+
+    transition:
+      opacity 200ms ease-out,
+      transform 200ms ease-out;
+  }
+
+  &__input:indeterminate ~ &__indeterminate {
+    transform: scale(1);
+    opacity: 1;
+  }
+
+  &__input:indeterminate:checked ~ &__button {
+    background-color: transparent;
+    border-color: var(--checkbox-color-border-off);
+  }
+  &__input:indeterminate:hover ~ &__gfx,
+  &__input:indeterminate:checked ~ &__gfx,
+  &__input:indeterminate:checked:hover ~ &__gfx {
+    color: transparent;
+  }
+
+  &--large &__input:indeterminate ~ &__indeterminate {
+    width: var(--checkbox-gfx-width__indeterminate--large);
+    height: var(--checkbox-gfx-height__indeterminate--large);
   }
 
   /** Disabled state **/
@@ -260,6 +322,7 @@
     background-color: var(--checkbox-color-background-on--disabled);
     border-color: var(--checkbox-color-border-on--disabled);
   }
+
   &__input[disabled]:checked ~ &__gfx,
   &__input[disabled][data-checked='true'] ~ &__gfx {
     color: var(--checkbox-color-gfx--disabled);
@@ -271,6 +334,16 @@
     background-color: var(--checkbox-color-background-off--disabled);
   }
 
+  // indeterminate
+  &__input[disabled]:indeterminate ~ &__indeterminate {
+    background-color: var(--checkbox-color-gfx__indeterminate--disabled);
+  }
+
+  &__input[disabled]:indeterminate ~ &__gfx {
+    // hide check gfx
+    color: transparent;
+  }
+
   /** Active state **/
 
   // General
@@ -285,49 +358,69 @@
     color: var(--checkbox-color-gfx-on);
   }
 
+  // Indeterminate
+  &__input:not([disabled]):indeterminate:active ~ &__button {
+    background-color: var(
+      --checkbox-color-background-indeterminate--active
+    );
+    border-color: var(--checkbox-color-border-indeterminate--active);
+  }
+
+  &__input:not([disabled]):indeterminate:active ~ &__indeterminate {
+    background-color: var(--checkbox-color-gfx-indeterminate--active);
+  }
+
   /** Hover state **/
 
   // General
-  &__input:not([disabled]):not(:focus):hover ~ &__button {
+  &__input:not([disabled]):not(:active):hover ~ &__button {
     border-color: var(--checkbox-color-border-off--hover);
     background-color: var(--checkbox-color-background--hover);
   }
-  &__input:not([disabled]):not(:focus):hover ~ &__gfx {
+
+  &__input:not([disabled]):hover ~ &__gfx {
     color: var(--checkbox-color-gfx--hover);
   }
 
   // On
-  &__input:not([disabled]):not(:focus):checked:hover ~ &__button,
-  &__input:not([disabled]):not(:focus)[data-checked='true']:hover
-    ~ &__button {
-    border-color: var(--checkbox-color-border-on--hover);
+  &__input:not([disabled]):checked:hover ~ &__button,
+  &__input:not([disabled])[data-checked='true']:hover ~ &__button {
+    border: var(--checkbox-border-width--hover) solid
+      var(--checkbox-color-border-on--hover);
   }
 
   /** Focus state **/
 
   // General
-  &__input:not([disabled]):focus ~ &__button {
+  &__input:not([disabled]):focus-visible ~ &__button {
     html[data-whatinput='keyboard'] & {
       border: none;
       background-color: var(--checkbox-color-background--focus);
     }
   }
-  &__input:not([disabled]):focus ~ &__gfx {
+
+  &__input:not([disabled]):focus-visible ~ &__gfx {
     html[data-whatinput='keyboard'] & {
       color: var(--checkbox-color-gfx--focus);
     }
   }
-  &__input:not([disabled]):focus ~ &__button &__focus,
+
+  &__input:not([disabled]):focus-visible ~ &__button &__focus,
   &__input:not([disabled]):active ~ &__button &__focus {
     display: block;
   }
 
+  &__input:not([disabled]):focus-visible ~ &__indeterminate {
+    background-color: var(--checkbox-color-gfx--focus);
+  }
+
   /** Error state **/
 
   // General
   &__status--error &__input:not([disabled]):not(:active) ~ &__button {
     border: none;
   }
+
   &__status--error
     &__input:not([disabled]):not(:active)
     ~ &__button
@@ -335,24 +428,29 @@
     display: block;
     @include fakeBorder(
       var(--checkbox-color-border--error),
-      var(--focus-ring-width)
+      var(--checkbox-border-width)
     );
   }
+
   &__status--error &__input:not([disabled]):hover ~ &__button {
     &[data-checked='true'] {
       // Needed during transition
-      border-color: var(--checkbox-color-border--error);
+      border-color: var(--checkbox-color-border--error--hover);
     }
-    background-color: var(--checkbox-color-background--error-contrast);
+
+    background-color: var(--checkbox-color-background--error--hover);
   }
+
   &__status--error &__input:not([disabled]):hover ~ &__gfx {
-    color: var(--checkbox-color-gfx--error-contrast);
+    color: var(--checkbox-color-gfx--error--hover);
   }
+
   &__status--error
     &__input:not([disabled]):not(:active):not(:hover)
     ~ &__gfx {
     color: var(--checkbox-color-gfx--error);
   }
+
   &__status--error &__input:not([disabled]):focus ~ &__button,
   &__status--error &__input:not([disabled]):focus:hover ~ &__button {
     html[data-whatinput='keyboard'] & {
@@ -360,10 +458,11 @@
       background-color: var(--checkbox-color-background--error-contrast);
       @include fakeBorder(
         var(--checkbox-color-border--error),
-        calc(var(--focus-ring-width) + 0.0625rem)
+        calc(var(--checkbox-border-width--hover))
       );
     }
   }
+
   &__status--error &__input:not([disabled]):focus:hover ~ &__gfx {
     html[data-whatinput='keyboard'] & {
       color: var(--checkbox-color-gfx--error-contrast);
@@ -380,14 +479,51 @@
     background-color: var(--checkbox-color-background-on--error);
   }
 
+  &__status--error
+    &__input:indeterminate:not([disabled]):not(:active):not(:hover)
+    ~ &__gfx {
+    // used for animation
+    color: var(--checkbox-color-gfx--error-contrast);
+    background-color: var(--checkbox-color-gfx--error-contrast);
+    border-radius: var(--checkbox-border-radius);
+  }
+
+  &__status--error
+    &__input:indeterminate:not(:active):not(:hover)
+    ~ &__indeterminate {
+    background-color: var(--checkbox-color-gfx-indeterminate--error);
+  }
+
+  &__status--error &__input:not(:indeterminate) ~ &__indeterminate {
+    // used for animation
+    background-color: var(--checkbox-color-gfx-indeterminate--error);
+  }
+
+  &__status--error
+    &__input:indeterminate:hover:not(:active)
+    ~ &__indeterminate {
+    background-color: var(--checkbox-color-gfx--error--hover);
+  }
+
+  &__status--error &__input:not([disabled]):not(:active):hover ~ &__gfx {
+    color: var(--checkbox-color-gfx--error--hover);
+  }
+
   &.dnb-skeleton &__input[disabled] ~ &__button {
     &::before {
       border-radius: 0;
     }
+
     border-color: var(--skeleton-color);
   }
+
   &.dnb-skeleton &__input[disabled] ~ &__gfx {
     color: var(--skeleton-color);
   }
+
+  &.dnb-skeleton &__input[disabled] ~ &__indeterminate {
+    background-color: var(--skeleton-color);
+  }
+
   // stylelint-enable no-descending-specificity
 }

package/cjs/components/checkbox/style/themes/dnb-checkbox-theme-sbanken.css

@@ -3,17 +3,20 @@
 *
 */
 .dnb-checkbox {
+  --checkbox-border-width: 0.125rem;
+  --checkbox-border-width--hover: 0.125rem;
   --checkbox-color-gfx-on: var(--sb-color-violet-light);
-  --checkbox-color-gfx-off: var(--sb-color-violet-light);
+  --checkbox-color-gfx-off: var(--sb-color-white);
   --checkbox-color-background-on: var(--sb-color-white);
   --checkbox-color-background-off: var(--sb-color-white);
   --checkbox-color-border-on: var(--sb-color-violet);
   --checkbox-color-border-off: var(--sb-color-violet);
   --checkbox-color-gfx--disabled: var(--sb-color-gray-dark);
-  --checkbox-color-background-on--disabled: var(--sb-color-gray-light);
   --checkbox-color-background-off--disabled: var(--sb-color-gray-light);
+  --checkbox-color-background-on--disabled: var(--sb-color-gray-light);
   --checkbox-color-border-on--disabled: var(--sb-color-gray-dark);
   --checkbox-color-border-off--disabled: var(--sb-color-gray-dark);
+  --checkbox-color-gfx__indeterminate--disabled: var(--sb-color-gray-dark);
   --checkbox-color-background--active: var(--sb-color-white);
   --checkbox-color-border--active: var(--sb-color-gray);
   --checkbox-color-gfx--hover: var(--sb-color-violet-light);
@@ -29,4 +32,21 @@
     --sb-color-magenta-light-2
   );
   --checkbox-color-border--error: var(--sb-color-magenta);
+  --checkbox-color-gfx--error--hover: var(--sb-color-magenta);
+  --checkbox-color-background--error--hover: var(
+    --sb-color-magenta-light-3
+  );
+  --checkbox-color-border--error--hover: transparent;
+  --checkbox-color-background-indeterminate: var(--sb-color-white);
+  --checkbox-color-gfx-indeterminate: var(--sb-color-violet);
+  --checkbox-color-background-indeterminate--active: var(--color-white);
+  --checkbox-color-border-indeterminate--active: var(--sb-color-gray);
+  --checkbox-color-gfx-indeterminate--active: var(--sb-color-violet);
+  --checkbox-color-gfx-indeterminate--error: var(--sb-color-magenta);
+  --checkbox-gfx-width__indeterminate: 0.875rem;
+  --checkbox-gfx-height__indeterminate: 0.125rem;
+  --checkbox-gfx-height__indeterminate--large: 0.25rem;
+  --checkbox-gfx-width__indeterminate--large: 1.5rem;
+  --checkbox-border-radius: 0.125rem;
+  --checkbox-gfx-border-radius__indeterminate: 0rem;
 }

package/cjs/components/checkbox/style/themes/dnb-checkbox-theme-sbanken.min.css

@@ -1,3 +1,5 @@
-.dnb-checkbox{--checkbox-color-gfx-on:var(--sb-color-violet-light);--checkbox-color-gfx-off:var(--sb-color-violet-light);--checkbox-color-background-on:var(--sb-color-white);--checkbox-color-background-off:var(--sb-color-white);--checkbox-color-border-on:var(--sb-color-violet);--checkbox-color-border-off:var(--sb-color-violet);--checkbox-color-gfx--disabled:var(--sb-color-gray-dark);--checkbox-color-background-on--disabled:var(--sb-color-gray-light);--checkbox-color-background-off--disabled:var(--sb-color-gray-light);--checkbox-color-border-on--disabled:var(--sb-color-gray-dark);--checkbox-color-border-off--disabled:var(--sb-color-gray-dark);--checkbox-color-background--active:var(--sb-color-white);--checkbox-color-border--active:var(--sb-color-gray);--checkbox-color-gfx--hover:var(--sb-color-violet-light);--checkbox-color-background--hover:var(--sb-color-violet-light-3);--checkbox-color-border-on--hover:var(--sb-color-violet);--checkbox-color-border-off--hover:var(--sb-color-violet);--checkbox-color-gfx--focus:var(--focus-ring-color);--checkbox-color-background--focus:var(--sb-color-blue-light-3);--checkbox-color-gfx--error:var(--sb-color-magenta);--checkbox-color-gfx--error-contrast:var(--sb-color-magenta);--checkbox-color-background-on--error:var(--sb-color-white);--checkbox-color-background--error-contrast:var(
+.dnb-checkbox{--checkbox-border-width:0.125rem;--checkbox-border-width--hover:0.125rem;--checkbox-color-gfx-on:var(--sb-color-violet-light);--checkbox-color-gfx-off:var(--sb-color-white);--checkbox-color-background-on:var(--sb-color-white);--checkbox-color-background-off:var(--sb-color-white);--checkbox-color-border-on:var(--sb-color-violet);--checkbox-color-border-off:var(--sb-color-violet);--checkbox-color-gfx--disabled:var(--sb-color-gray-dark);--checkbox-color-background-off--disabled:var(--sb-color-gray-light);--checkbox-color-background-on--disabled:var(--sb-color-gray-light);--checkbox-color-border-on--disabled:var(--sb-color-gray-dark);--checkbox-color-border-off--disabled:var(--sb-color-gray-dark);--checkbox-color-gfx__indeterminate--disabled:var(--sb-color-gray-dark);--checkbox-color-background--active:var(--sb-color-white);--checkbox-color-border--active:var(--sb-color-gray);--checkbox-color-gfx--hover:var(--sb-color-violet-light);--checkbox-color-background--hover:var(--sb-color-violet-light-3);--checkbox-color-border-on--hover:var(--sb-color-violet);--checkbox-color-border-off--hover:var(--sb-color-violet);--checkbox-color-gfx--focus:var(--focus-ring-color);--checkbox-color-background--focus:var(--sb-color-blue-light-3);--checkbox-color-gfx--error:var(--sb-color-magenta);--checkbox-color-gfx--error-contrast:var(--sb-color-magenta);--checkbox-color-background-on--error:var(--sb-color-white);--checkbox-color-background--error-contrast:var(
     --sb-color-magenta-light-2
-  );--checkbox-color-border--error:var(--sb-color-magenta)}
+  );--checkbox-color-border--error:var(--sb-color-magenta);--checkbox-color-gfx--error--hover:var(--sb-color-magenta);--checkbox-color-background--error--hover:var(
+    --sb-color-magenta-light-3
+  );--checkbox-color-border--error--hover:transparent;--checkbox-color-background-indeterminate:var(--sb-color-white);--checkbox-color-gfx-indeterminate:var(--sb-color-violet);--checkbox-color-background-indeterminate--active:var(--color-white);--checkbox-color-border-indeterminate--active:var(--sb-color-gray);--checkbox-color-gfx-indeterminate--active:var(--sb-color-violet);--checkbox-color-gfx-indeterminate--error:var(--sb-color-magenta);--checkbox-gfx-width__indeterminate:0.875rem;--checkbox-gfx-height__indeterminate:0.125rem;--checkbox-gfx-height__indeterminate--large:0.25rem;--checkbox-gfx-width__indeterminate--large:1.5rem;--checkbox-border-radius:0.125rem;--checkbox-gfx-border-radius__indeterminate:0rem}

package/cjs/components/checkbox/style/themes/dnb-checkbox-theme-sbanken.scss

@@ -4,19 +4,22 @@
 */
 
 .dnb-checkbox {
+  --checkbox-border-width: 0.125rem;
+  --checkbox-border-width--hover: 0.125rem;
   // Normal state
   --checkbox-color-gfx-on: var(--sb-color-violet-light);
-  --checkbox-color-gfx-off: var(--sb-color-violet-light);
+  --checkbox-color-gfx-off: var(--sb-color-white);
   --checkbox-color-background-on: var(--sb-color-white);
   --checkbox-color-background-off: var(--sb-color-white);
   --checkbox-color-border-on: var(--sb-color-violet);
   --checkbox-color-border-off: var(--sb-color-violet);
   // Disabled state
   --checkbox-color-gfx--disabled: var(--sb-color-gray-dark);
-  --checkbox-color-background-on--disabled: var(--sb-color-gray-light);
   --checkbox-color-background-off--disabled: var(--sb-color-gray-light);
+  --checkbox-color-background-on--disabled: var(--sb-color-gray-light);
   --checkbox-color-border-on--disabled: var(--sb-color-gray-dark);
   --checkbox-color-border-off--disabled: var(--sb-color-gray-dark);
+  --checkbox-color-gfx__indeterminate--disabled: var(--sb-color-gray-dark);
   // Active state
   --checkbox-color-background--active: var(--sb-color-white);
   --checkbox-color-border--active: var(--sb-color-gray);
@@ -36,4 +39,27 @@
     --sb-color-magenta-light-2
   );
   --checkbox-color-border--error: var(--sb-color-magenta);
+  // Error Hover state
+  --checkbox-color-gfx--error--hover: var(--sb-color-magenta);
+  --checkbox-color-background--error--hover: var(
+    --sb-color-magenta-light-3
+  );
+  --checkbox-color-border--error--hover: transparent;
+  // Indeterminate state
+  --checkbox-color-background-indeterminate: var(--sb-color-white);
+  --checkbox-color-gfx-indeterminate: var(--sb-color-violet);
+  // Indeterminate Active state
+  --checkbox-color-background-indeterminate--active: var(--color-white);
+  --checkbox-color-border-indeterminate--active: var(--sb-color-gray);
+  --checkbox-color-gfx-indeterminate--active: var(--sb-color-violet);
+
+  // Indeterminate Error state
+  --checkbox-color-gfx-indeterminate--error: var(--sb-color-magenta);
+  // Indeterminate shape
+  --checkbox-gfx-width__indeterminate: 0.875rem;
+  --checkbox-gfx-height__indeterminate: 0.125rem;
+  --checkbox-gfx-height__indeterminate--large: 0.25rem;
+  --checkbox-gfx-width__indeterminate--large: 1.5rem;
+  --checkbox-border-radius: 0.125rem;
+  --checkbox-gfx-border-radius__indeterminate: 0rem;
 }

package/cjs/components/checkbox/style/themes/dnb-checkbox-theme-ui.css

@@ -4,7 +4,7 @@
 */
 .dnb-checkbox {
   --checkbox-color-gfx-on: var(--color-white);
-  --checkbox-color-gfx-off: var(--color-sea-green);
+  --checkbox-color-gfx-off: var(--color-white);
   --checkbox-color-background-on: var(--color-sea-green);
   --checkbox-color-background-off: var(--color-white);
   --checkbox-color-border-on: transparent;
@@ -14,17 +14,35 @@
   --checkbox-color-background-off--disabled: var(--color-white);
   --checkbox-color-border-on--disabled: transparent;
   --checkbox-color-border-off--disabled: var(--color-mint-green-50);
+  --checkbox-color-gfx__indeterminate--disabled: var(
+    --color-mint-green-50
+  );
   --checkbox-color-background--active: var(--color-mint-green-50);
   --checkbox-color-border--active: transparent;
   --checkbox-color-gfx--hover: var(--color-sea-green);
   --checkbox-color-background--hover: var(--color-mint-green-50);
   --checkbox-color-border-on--hover: transparent;
   --checkbox-color-border-off--hover: var(--color-sea-green);
-  --checkbox-color-gfx--focus: var(--color-sea-green);
+  --checkbox-color-gfx--focus: var(--color-emerald-green);
   --checkbox-color-background--focus: var(--color-mint-green-50);
   --checkbox-color-gfx--error: var(--color-fire-red-8);
   --checkbox-color-gfx--error-contrast: var(--color-fire-red);
   --checkbox-color-background-on--error: var(--color-fire-red);
   --checkbox-color-background--error-contrast: var(--color-fire-red-8);
   --checkbox-color-border--error: var(--color-fire-red);
+  --checkbox-color-gfx--error--hover: var(--color-fire-red);
+  --checkbox-color-background--error--hover: var(--color-fire-red-8);
+  --checkbox-color-border--error--hover: var(--color-fire-red);
+  --checkbox-color-background-indeterminate: var(--color-white);
+  --checkbox-color-gfx-indeterminate: var(--color-sea-green);
+  --checkbox-color-background-indeterminate--active: var(--color-white);
+  --checkbox-color-border-indeterminate--active: var(
+    --color-mint-green-50
+  );
+  --checkbox-color-gfx-indeterminate--active: var(--color-mint-green-50);
+  --checkbox-color-gfx-indeterminate--error: var(--color-fire-red);
+  --checkbox-gfx-height__indeterminate: 0.625rem;
+  --checkbox-gfx-width__indeterminate: 0.625rem;
+  --checkbox-gfx-height__indeterminate--large: 0.875rem;
+  --checkbox-gfx-width__indeterminate--large: 0.875rem;
 }

package/cjs/components/checkbox/style/themes/dnb-checkbox-theme-ui.min.css

@@ -1 +1,5 @@
-.dnb-checkbox{--checkbox-color-gfx-on:var(--color-white);--checkbox-color-gfx-off:var(--color-sea-green);--checkbox-color-background-on:var(--color-sea-green);--checkbox-color-background-off:var(--color-white);--checkbox-color-border-on:transparent;--checkbox-color-border-off:var(--color-sea-green);--checkbox-color-gfx--disabled:var(--checkbox-color-gfx-on);--checkbox-color-background-on--disabled:var(--color-sea-green-30);--checkbox-color-background-off--disabled:var(--color-white);--checkbox-color-border-on--disabled:transparent;--checkbox-color-border-off--disabled:var(--color-mint-green-50);--checkbox-color-background--active:var(--color-mint-green-50);--checkbox-color-border--active:transparent;--checkbox-color-gfx--hover:var(--color-sea-green);--checkbox-color-background--hover:var(--color-mint-green-50);--checkbox-color-border-on--hover:transparent;--checkbox-color-border-off--hover:var(--color-sea-green);--checkbox-color-gfx--focus:var(--color-sea-green);--checkbox-color-background--focus:var(--color-mint-green-50);--checkbox-color-gfx--error:var(--color-fire-red-8);--checkbox-color-gfx--error-contrast:var(--color-fire-red);--checkbox-color-background-on--error:var(--color-fire-red);--checkbox-color-background--error-contrast:var(--color-fire-red-8);--checkbox-color-border--error:var(--color-fire-red)}
+.dnb-checkbox{--checkbox-color-gfx-on:var(--color-white);--checkbox-color-gfx-off:var(--color-white);--checkbox-color-background-on:var(--color-sea-green);--checkbox-color-background-off:var(--color-white);--checkbox-color-border-on:transparent;--checkbox-color-border-off:var(--color-sea-green);--checkbox-color-gfx--disabled:var(--checkbox-color-gfx-on);--checkbox-color-background-on--disabled:var(--color-sea-green-30);--checkbox-color-background-off--disabled:var(--color-white);--checkbox-color-border-on--disabled:transparent;--checkbox-color-border-off--disabled:var(--color-mint-green-50);--checkbox-color-gfx__indeterminate--disabled:var(
+    --color-mint-green-50
+  );--checkbox-color-background--active:var(--color-mint-green-50);--checkbox-color-border--active:transparent;--checkbox-color-gfx--hover:var(--color-sea-green);--checkbox-color-background--hover:var(--color-mint-green-50);--checkbox-color-border-on--hover:transparent;--checkbox-color-border-off--hover:var(--color-sea-green);--checkbox-color-gfx--focus:var(--color-emerald-green);--checkbox-color-background--focus:var(--color-mint-green-50);--checkbox-color-gfx--error:var(--color-fire-red-8);--checkbox-color-gfx--error-contrast:var(--color-fire-red);--checkbox-color-background-on--error:var(--color-fire-red);--checkbox-color-background--error-contrast:var(--color-fire-red-8);--checkbox-color-border--error:var(--color-fire-red);--checkbox-color-gfx--error--hover:var(--color-fire-red);--checkbox-color-background--error--hover:var(--color-fire-red-8);--checkbox-color-border--error--hover:var(--color-fire-red);--checkbox-color-background-indeterminate:var(--color-white);--checkbox-color-gfx-indeterminate:var(--color-sea-green);--checkbox-color-background-indeterminate--active:var(--color-white);--checkbox-color-border-indeterminate--active:var(
+    --color-mint-green-50
+  );--checkbox-color-gfx-indeterminate--active:var(--color-mint-green-50);--checkbox-color-gfx-indeterminate--error:var(--color-fire-red);--checkbox-gfx-height__indeterminate:0.625rem;--checkbox-gfx-width__indeterminate:0.625rem;--checkbox-gfx-height__indeterminate--large:0.875rem;--checkbox-gfx-width__indeterminate--large:0.875rem}

package/cjs/components/checkbox/style/themes/dnb-checkbox-theme-ui.scss

@@ -6,7 +6,7 @@
 .dnb-checkbox {
   // Normal state
   --checkbox-color-gfx-on: var(--color-white);
-  --checkbox-color-gfx-off: var(--color-sea-green);
+  --checkbox-color-gfx-off: var(--color-white);
   --checkbox-color-background-on: var(--color-sea-green);
   --checkbox-color-background-off: var(--color-white);
   --checkbox-color-border-on: transparent;
@@ -17,6 +17,9 @@
   --checkbox-color-background-off--disabled: var(--color-white);
   --checkbox-color-border-on--disabled: transparent;
   --checkbox-color-border-off--disabled: var(--color-mint-green-50);
+  --checkbox-color-gfx__indeterminate--disabled: var(
+    --color-mint-green-50
+  );
   // Active state
   --checkbox-color-background--active: var(--color-mint-green-50);
   --checkbox-color-border--active: transparent;
@@ -26,7 +29,7 @@
   --checkbox-color-border-on--hover: transparent;
   --checkbox-color-border-off--hover: var(--color-sea-green);
   // Focus state
-  --checkbox-color-gfx--focus: var(--color-sea-green);
+  --checkbox-color-gfx--focus: var(--color-emerald-green);
   --checkbox-color-background--focus: var(--color-mint-green-50);
   // Error state
   --checkbox-color-gfx--error: var(--color-fire-red-8);
@@ -34,4 +37,24 @@
   --checkbox-color-background-on--error: var(--color-fire-red);
   --checkbox-color-background--error-contrast: var(--color-fire-red-8);
   --checkbox-color-border--error: var(--color-fire-red);
+  // Error Hover state
+  --checkbox-color-gfx--error--hover: var(--color-fire-red);
+  --checkbox-color-background--error--hover: var(--color-fire-red-8);
+  --checkbox-color-border--error--hover: var(--color-fire-red);
+  // Indeterminate state
+  --checkbox-color-background-indeterminate: var(--color-white);
+  --checkbox-color-gfx-indeterminate: var(--color-sea-green);
+  // Indeterminate Active state
+  --checkbox-color-background-indeterminate--active: var(--color-white);
+  --checkbox-color-border-indeterminate--active: var(
+    --color-mint-green-50
+  );
+  --checkbox-color-gfx-indeterminate--active: var(--color-mint-green-50);
+  // Indeterminate Error state
+  --checkbox-color-gfx-indeterminate--error: var(--color-fire-red);
+  // Indeterminate shape
+  --checkbox-gfx-height__indeterminate: 0.625rem;
+  --checkbox-gfx-width__indeterminate: 0.625rem;
+  --checkbox-gfx-height__indeterminate--large: 0.875rem;
+  --checkbox-gfx-width__indeterminate--large: 0.875rem;
 }

package/cjs/components/height-animation/HeightAnimationInstance.js

@@ -159,7 +159,12 @@ class HeightAnimation {
     }
     clonedElem.style.position = 'absolute';
     (_this$elem$parentNode = this.elem.parentNode) === null || _this$elem$parentNode === void 0 ? void 0 : _this$elem$parentNode.insertBefore(clonedElem, this.elem.nextSibling);
-    const height = parseFloat(String(clonedElem.clientHeight)) || parseFloat(clonedElem.getAttribute('data-height')) || null;
+    const elemWidth = this.elem.clientWidth;
+    const clonedWidth = clonedElem.clientWidth || parseFloat(clonedElem.getAttribute('data-width')) || 0;
+    if (clonedWidth > elemWidth) {
+      clonedElem.style.width = `${elemWidth}px`;
+    }
+    const height = clonedElem.clientHeight || parseFloat(clonedElem.getAttribute('data-height')) || null;
     (_clonedElem$parentNod = clonedElem.parentNode) === null || _clonedElem$parentNod === void 0 ? void 0 : _clonedElem$parentNod.removeChild(clonedElem);
     if (height) {
       this.__currentHeight = height;