@dnb/eufemia 10.30.2 → 10.32.0

package/cjs/components/checkbox/CheckboxDocs.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxDocs.js","names":["CheckboxProperties","checked","doc","type","status","title","label","label_position","label_sr_only","size","status_state","status_props","globalStatus","skeleton","suffix","innerRef","exports","CheckboxEvents","on_change"],"sources":["../../../../src/components/checkbox/CheckboxDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const CheckboxProperties: PropertiesTableProps = {\n  checked: {\n    doc: 'Determine whether the checkbox is checked or not. The default is `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  title: {\n    doc: 'The `title` of the input - describing it a bit further for accessibility reasons.',\n    type: 'ReactNode',\n    status: 'optional',\n  },\n  label: {\n    doc: 'Use either the `label` property or provide a custom one.',\n    type: 'ReactNode',\n    status: 'optional',\n  },\n  label_position: {\n    doc: 'Defines the position of the `label`. Use either `left` or `right`. Defaults to `right`.',\n    type: 'string',\n    status: 'optional',\n  },\n  label_sr_only: {\n    doc: 'Use `true` to make the label only readable by screen readers.',\n    type: 'string',\n    status: 'optional',\n  },\n  size: {\n    doc: 'The size of the checkbox. For now there is \"medium\" (default) and \"large\".',\n    type: ['string', 'number'],\n    status: 'optional',\n  },\n  status: {\n    doc: 'Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.',\n    type: 'string',\n    status: 'optional',\n  },\n  status_state: {\n    doc: 'Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.',\n    type: ['error', 'info'],\n    status: 'optional',\n  },\n  status_props: {\n    doc: 'Use an object to define additional FormStatus properties. See [FormStatus](/uilib/components/form-status/properties/)',\n    type: 'FormStatusProps',\n    status: 'optional',\n  },\n  globalStatus: {\n    doc: 'The [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status)',\n    type: 'object',\n    status: 'optional',\n  },\n  skeleton: {\n    doc: 'If set to `true`, an overlaying skeleton with animation will be shown.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  suffix: {\n    doc: 'Text describing the content of the Checkbox more than the label. You can also send in a React component, so it gets wrapped inside the Checkbox component.',\n    type: 'ReactNode',\n    status: 'optional',\n  },\n  innerRef: {\n    doc: 'By providing a React.ref we can get the internally used input element (DOM). E.g. `innerRef={myRef}` by using `React.createRef()` or `React.useRef()`.',\n    type: 'string',\n    status: 'optional',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'Spacing properties like `top` or `bottom` are supported.',\n    type: ['string', 'object'],\n    status: 'optional',\n  },\n}\n\nexport const CheckboxEvents: PropertiesTableProps = {\n  on_change: {\n    doc: 'Will be called on state changes made by the user.',\n    type: '() => {checked: boolean; event: ChangeEvent}',\n    status: 'optional',\n  },\n}\n"],"mappings":";;;;;;AAEO,MAAMA,kBAAwC,GAAG;EACtDC,OAAO,EAAE;IACPC,GAAG,EAAE,2EAA2E;IAChFC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDC,KAAK,EAAE;IACLH,GAAG,EAAE,mFAAmF;IACxFC,IAAI,EAAE,WAAW;IACjBC,MAAM,EAAE;EACV,CAAC;EACDE,KAAK,EAAE;IACLJ,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,WAAW;IACjBC,MAAM,EAAE;EACV,CAAC;EACDG,cAAc,EAAE;IACdL,GAAG,EAAE,yFAAyF;IAC9FC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDI,aAAa,EAAE;IACbN,GAAG,EAAE,+DAA+D;IACpEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDK,IAAI,EAAE;IACJP,GAAG,EAAE,4EAA4E;IACjFC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV,CAAC;EACDA,MAAM,EAAE;IACNF,GAAG,EAAE,yIAAyI;IAC9IC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDM,YAAY,EAAE;IACZR,GAAG,EAAE,0GAA0G;IAC/GC,IAAI,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC;IACvBC,MAAM,EAAE;EACV,CAAC;EACDO,YAAY,EAAE;IACZT,GAAG,EAAE,uHAAuH;IAC5HC,IAAI,EAAE,iBAAiB;IACvBC,MAAM,EAAE;EACV,CAAC;EACDQ,YAAY,EAAE;IACZV,GAAG,EAAE,2JAA2J;IAChKC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDS,QAAQ,EAAE;IACRX,GAAG,EAAE,wEAAwE;IAC7EC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDU,MAAM,EAAE;IACNZ,GAAG,EAAE,4JAA4J;IACjKC,IAAI,EAAE,WAAW;IACjBC,MAAM,EAAE;EACV,CAAC;EACDW,QAAQ,EAAE;IACRb,GAAG,EAAE,wJAAwJ;IAC7JC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACD,yCAAyC,EAAE;IACzCF,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV;AACF,CAAC;AAAAY,OAAA,CAAAhB,kBAAA,GAAAA,kBAAA;AAEM,MAAMiB,cAAoC,GAAG;EAClDC,SAAS,EAAE;IACThB,GAAG,EAAE,mDAAmD;IACxDC,IAAI,EAAE,8CAA8C;IACpDC,MAAM,EAAE;EACV;AACF,CAAC;AAAAY,OAAA,CAAAC,cAAA,GAAAA,cAAA"}
+{"version":3,"file":"CheckboxDocs.js","names":["CheckboxProperties","checked","doc","type","status","title","label","labelPosition","labelSrOnly","size","indeterminate","statusState","statusProps","globalStatus","skeleton","suffix","innerRef","exports","CheckboxEvents","onChange"],"sources":["../../../../src/components/checkbox/CheckboxDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const CheckboxProperties: PropertiesTableProps = {\n  checked: {\n    doc: 'Determine whether the checkbox is checked or not. The default is `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  title: {\n    doc: 'The `title` of the input - describing it a bit further for accessibility reasons.',\n    type: 'ReactNode',\n    status: 'optional',\n  },\n  label: {\n    doc: 'Use either the `label` property or provide a custom one.',\n    type: 'ReactNode',\n    status: 'optional',\n  },\n  labelPosition: {\n    doc: 'Defines the position of the `label`. Use either `left` or `right`. Defaults to `right`.',\n    type: 'string',\n    status: 'optional',\n  },\n  labelSrOnly: {\n    doc: 'Use `true` to make the label only readable by screen readers.',\n    type: 'string',\n    status: 'optional',\n  },\n  size: {\n    doc: 'The size of the checkbox. For now there is \"medium\" (default) and \"large\".',\n    type: ['string', 'number'],\n    status: 'optional',\n  },\n  indeterminate: {\n    doc: 'Controls the checkbox indeterminate (partial) state.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  status: {\n    doc: 'Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.',\n    type: 'string',\n    status: 'optional',\n  },\n  statusState: {\n    doc: 'Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.',\n    type: ['error', 'info'],\n    status: 'optional',\n  },\n  statusProps: {\n    doc: 'Use an object to define additional FormStatus properties. See [FormStatus](/uilib/components/form-status/properties/)',\n    type: 'FormStatusProps',\n    status: 'optional',\n  },\n  globalStatus: {\n    doc: 'The [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status)',\n    type: 'object',\n    status: 'optional',\n  },\n  skeleton: {\n    doc: 'If set to `true`, an overlaying skeleton with animation will be shown.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  suffix: {\n    doc: 'Text describing the content of the Checkbox more than the label. You can also send in a React component, so it gets wrapped inside the Checkbox component.',\n    type: 'ReactNode',\n    status: 'optional',\n  },\n  innerRef: {\n    doc: 'By providing a React.ref we can get the internally used input element (DOM). E.g. `innerRef={myRef}` by using `React.createRef()` or `React.useRef()`.',\n    type: 'string',\n    status: 'optional',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'Spacing properties like `top` or `bottom` are supported.',\n    type: ['string', 'object'],\n    status: 'optional',\n  },\n}\n\nexport const CheckboxEvents: PropertiesTableProps = {\n  onChange: {\n    doc: 'Will be called on state changes made by the user.',\n    type: '() => {checked: boolean; event: ChangeEvent}',\n    status: 'optional',\n  },\n}\n"],"mappings":";;;;;;AAEO,MAAMA,kBAAwC,GAAG;EACtDC,OAAO,EAAE;IACPC,GAAG,EAAE,2EAA2E;IAChFC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDC,KAAK,EAAE;IACLH,GAAG,EAAE,mFAAmF;IACxFC,IAAI,EAAE,WAAW;IACjBC,MAAM,EAAE;EACV,CAAC;EACDE,KAAK,EAAE;IACLJ,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,WAAW;IACjBC,MAAM,EAAE;EACV,CAAC;EACDG,aAAa,EAAE;IACbL,GAAG,EAAE,yFAAyF;IAC9FC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDI,WAAW,EAAE;IACXN,GAAG,EAAE,+DAA+D;IACpEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDK,IAAI,EAAE;IACJP,GAAG,EAAE,4EAA4E;IACjFC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV,CAAC;EACDM,aAAa,EAAE;IACbR,GAAG,EAAE,sDAAsD;IAC3DC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDA,MAAM,EAAE;IACNF,GAAG,EAAE,yIAAyI;IAC9IC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDO,WAAW,EAAE;IACXT,GAAG,EAAE,0GAA0G;IAC/GC,IAAI,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC;IACvBC,MAAM,EAAE;EACV,CAAC;EACDQ,WAAW,EAAE;IACXV,GAAG,EAAE,uHAAuH;IAC5HC,IAAI,EAAE,iBAAiB;IACvBC,MAAM,EAAE;EACV,CAAC;EACDS,YAAY,EAAE;IACZX,GAAG,EAAE,2JAA2J;IAChKC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDU,QAAQ,EAAE;IACRZ,GAAG,EAAE,wEAAwE;IAC7EC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDW,MAAM,EAAE;IACNb,GAAG,EAAE,4JAA4J;IACjKC,IAAI,EAAE,WAAW;IACjBC,MAAM,EAAE;EACV,CAAC;EACDY,QAAQ,EAAE;IACRd,GAAG,EAAE,wJAAwJ;IAC7JC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACD,yCAAyC,EAAE;IACzCF,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV;AACF,CAAC;AAAAa,OAAA,CAAAjB,kBAAA,GAAAA,kBAAA;AAEM,MAAMkB,cAAoC,GAAG;EAClDC,QAAQ,EAAE;IACRjB,GAAG,EAAE,mDAAmD;IACxDC,IAAI,EAAE,8CAA8C;IACpDC,MAAM,EAAE;EACV;AACF,CAAC;AAAAa,OAAA,CAAAC,cAAA,GAAAA,cAAA"}

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

@@ -11,11 +11,18 @@
 }
 
 .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;
   --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;
@@ -25,6 +32,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;
   --checkbox-color-background--active: lightgrey;
   --checkbox-color-border--active: transparent;
   --checkbox-color-gfx--hover: grey;
@@ -38,6 +46,15 @@
   --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;
+  --checkbox-color-background-indeterminate: grey;
+  --checkbox-color-gfx-indeterminate: darkgray;
+  --checkbox-color-background-indeterminate--active: grey;
+  --checkbox-color-border-indeterminate--active: white;
+  --checkbox-color-gfx-indeterminate--active: white;
   --checkbox-bounding--medium: 1.75, 1.75;
   display: inline-flex;
   flex-direction: column;
@@ -91,12 +108,12 @@ html[data-whatinput=keyboard] .dnb-checkbox__focus {
   z-index: 4;
   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 .dnb-checkbox__focus, .dnb-checkbox--large .dnb-checkbox__button {
   width: var(--checkbox-width--large);
   height: var(--checkbox-height--large);
-  border-radius: 0.25rem;
+  border-radius: var(--checkbox-border-radius);
 }
 .dnb-checkbox__gfx {
   position: absolute;
@@ -188,6 +205,33 @@ html[data-whatinput=keyboard] .dnb-checkbox__focus {
 .dnb-checkbox__input:not(:checked):not([data-checked=true]) ~ .dnb-checkbox__button {
   background-color: var(--checkbox-color-background-off);
   border-color: var(--checkbox-color-border-off);
+  transition: background-color 100ms ease-out;
+}
+.dnb-checkbox__input ~ .dnb-checkbox__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;
+}
+.dnb-checkbox__input:indeterminate ~ .dnb-checkbox__indeterminate {
+  transform: scale(1);
+  opacity: 1;
+}
+.dnb-checkbox__input:indeterminate:checked ~ .dnb-checkbox__button {
+  background-color: transparent;
+  border-color: var(--checkbox-color-border-off);
+}
+.dnb-checkbox__input:indeterminate:hover ~ .dnb-checkbox__gfx, .dnb-checkbox__input:indeterminate:checked ~ .dnb-checkbox__gfx, .dnb-checkbox__input:indeterminate:checked:hover ~ .dnb-checkbox__gfx {
+  color: transparent;
+}
+.dnb-checkbox--large .dnb-checkbox__input:indeterminate ~ .dnb-checkbox__indeterminate {
+  width: var(--checkbox-gfx-width__indeterminate--large);
+  height: var(--checkbox-gfx-height__indeterminate--large);
 }
 .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);
@@ -200,6 +244,12 @@ html[data-whatinput=keyboard] .dnb-checkbox__focus {
   border-color: var(--checkbox-color-border-off--disabled);
   background-color: var(--checkbox-color-background-off--disabled);
 }
+.dnb-checkbox__input[disabled]:indeterminate ~ .dnb-checkbox__indeterminate {
+  background-color: var(--checkbox-color-gfx__indeterminate--disabled);
+}
+.dnb-checkbox__input[disabled]:indeterminate ~ .dnb-checkbox__gfx {
+  color: transparent;
+}
 .dnb-checkbox__input:not([disabled]):active ~ .dnb-checkbox__button {
   background-color: var(--checkbox-color-background--active);
   border-color: var(--checkbox-color-border--active);
@@ -207,44 +257,54 @@ html[data-whatinput=keyboard] .dnb-checkbox__focus {
 .dnb-checkbox__input:not([disabled]):checked:active ~ .dnb-checkbox__gfx, .dnb-checkbox__input:not([disabled])[data-checked=true]:active ~ .dnb-checkbox__gfx {
   color: var(--checkbox-color-gfx-on);
 }
-.dnb-checkbox__input:not([disabled]):not(:focus):hover ~ .dnb-checkbox__button {
+.dnb-checkbox__input:not([disabled]):indeterminate:active ~ .dnb-checkbox__button {
+  background-color: var(--checkbox-color-background-indeterminate--active);
+  border-color: var(--checkbox-color-border-indeterminate--active);
+}
+.dnb-checkbox__input:not([disabled]):indeterminate:active ~ .dnb-checkbox__indeterminate {
+  background-color: var(--checkbox-color-gfx-indeterminate--active);
+}
+.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);
 }
-.dnb-checkbox__input:not([disabled]):not(:focus):hover ~ .dnb-checkbox__gfx {
+.dnb-checkbox__input:hover ~ .dnb-checkbox__gfx {
   color: var(--checkbox-color-gfx--hover);
 }
-.dnb-checkbox__input:not([disabled]):not(:focus):checked:hover ~ .dnb-checkbox__button, .dnb-checkbox__input:not([disabled]):not(:focus)[data-checked=true]:hover ~ .dnb-checkbox__button {
-  border-color: var(--checkbox-color-border-on--hover);
+.dnb-checkbox__input:not([disabled]):checked:hover ~ .dnb-checkbox__button, .dnb-checkbox__input:not([disabled])[data-checked=true]:hover ~ .dnb-checkbox__button {
+  border: var(--checkbox-border-width--hover) solid var(--checkbox-color-border-on--hover);
 }
-html[data-whatinput=keyboard] .dnb-checkbox__input:not([disabled]):focus ~ .dnb-checkbox__button {
+html[data-whatinput=keyboard] .dnb-checkbox__input:not([disabled]):focus-visible ~ .dnb-checkbox__button {
   border: none;
   background-color: var(--checkbox-color-background--focus);
 }
-html[data-whatinput=keyboard] .dnb-checkbox__input:not([disabled]):focus ~ .dnb-checkbox__gfx {
+html[data-whatinput=keyboard] .dnb-checkbox__input:not([disabled]):focus-visible ~ .dnb-checkbox__gfx {
   color: var(--checkbox-color-gfx--focus);
 }
-.dnb-checkbox__input:not([disabled]):focus ~ .dnb-checkbox__button .dnb-checkbox__focus, .dnb-checkbox__input:not([disabled]):active ~ .dnb-checkbox__button .dnb-checkbox__focus {
+.dnb-checkbox__input:not([disabled]):focus-visible ~ .dnb-checkbox__button .dnb-checkbox__focus, .dnb-checkbox__input:not([disabled]):active ~ .dnb-checkbox__button .dnb-checkbox__focus {
   display: block;
 }
+.dnb-checkbox__input:not([disabled]):focus-visible ~ .dnb-checkbox__indeterminate {
+  background-color: var(--checkbox-color-gfx--focus);
+}
 .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active) ~ .dnb-checkbox__button {
   border: none;
 }
 .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(--focus-ring-width);
+  --border-width: var(--checkbox-border-width);
   box-shadow: 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
 }
 .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):hover ~ .dnb-checkbox__button {
-  background-color: var(--checkbox-color-background--error-contrast);
+  background-color: var(--checkbox-color-background--error--hover);
 }
 .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):hover ~ .dnb-checkbox__button[data-checked=true] {
-  border-color: var(--checkbox-color-border--error);
+  border-color: var(--checkbox-color-border--error--hover);
 }
 .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):hover ~ .dnb-checkbox__gfx {
-  color: var(--checkbox-color-gfx--error-contrast);
+  color: var(--checkbox-color-gfx--error--hover);
 }
 .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):not(:hover) ~ .dnb-checkbox__gfx {
   color: var(--checkbox-color-gfx--error);
@@ -253,7 +313,7 @@ html[data-whatinput=keyboard] .dnb-checkbox__status--error .dnb-checkbox__input:
   border: none;
   background-color: var(--checkbox-color-background--error-contrast);
   --border-color: var(--checkbox-color-border--error);
-  --border-width: calc(var(--focus-ring-width) + 0.0625rem);
+  --border-width: calc(var(--checkbox-border-width--hover));
   box-shadow: 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
 }
@@ -263,6 +323,23 @@ html[data-whatinput=keyboard] .dnb-checkbox__status--error .dnb-checkbox__input:
 .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):not(:hover):checked ~ .dnb-checkbox__button, .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):not(:hover)[data-checked=true] ~ .dnb-checkbox__button {
   background-color: var(--checkbox-color-background-on--error);
 }
+.dnb-checkbox__status--error .dnb-checkbox__input:indeterminate:not([disabled]):not(:active):not(:hover) ~ .dnb-checkbox__gfx {
+  color: var(--checkbox-color-gfx--error-contrast);
+  background-color: var(--checkbox-color-gfx--error-contrast);
+  border-radius: var(--checkbox-border-radius);
+}
+.dnb-checkbox__status--error .dnb-checkbox__input:indeterminate:not(:active):not(:hover) ~ .dnb-checkbox__indeterminate {
+  background-color: var(--checkbox-color-gfx-indeterminate--error);
+}
+.dnb-checkbox__status--error .dnb-checkbox__input:not(:indeterminate) ~ .dnb-checkbox__indeterminate {
+  background-color: var(--checkbox-color-gfx-indeterminate--error);
+}
+.dnb-checkbox__status--error .dnb-checkbox__input:indeterminate:hover:not(:active) ~ .dnb-checkbox__indeterminate {
+  background-color: var(--checkbox-color-gfx--error--hover);
+}
+.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):hover ~ .dnb-checkbox__gfx {
+  color: var(--checkbox-color-gfx--error--hover);
+}
 .dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled] ~ .dnb-checkbox__button {
   border-color: var(--skeleton-color);
 }
@@ -271,4 +348,7 @@ html[data-whatinput=keyboard] .dnb-checkbox__status--error .dnb-checkbox__input:
 }
 .dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled] ~ .dnb-checkbox__gfx {
   color: var(--skeleton-color);
+}
+.dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled] ~ .dnb-checkbox__indeterminate {
+  background-color: var(--skeleton-color);
 }

package/cjs/components/checkbox/style/dnb-checkbox.min.css

@@ -1 +1 @@
-:root{--checkbox-width--medium:1.5rem;--checkbox-height--medium:1.5rem}.dnb-checkbox{--checkbox-width--large:2rem;--checkbox-height--large:2rem;--checkbox-border-width:0.125rem;--checkbox-color-gfx-on:#000;--checkbox-color-gfx-off:#000;--checkbox-color-background-on:#fff;--checkbox-color-background-off:#fff;--checkbox-color-border-on:#000;--checkbox-color-border-off:#000;--checkbox-color-gfx--disabled:grey;--checkbox-color-background-on--disabled:#d3d3d3;--checkbox-color-background-off--disabled:#d3d3d3;--checkbox-color-border-on--disabled:grey;--checkbox-color-border-off--disabled:grey;--checkbox-color-background--active:#d3d3d3;--checkbox-color-border--active:transparent;--checkbox-color-gfx--hover:grey;--checkbox-color-background--hover:#fff;--checkbox-color-border-on--hover:grey;--checkbox-color-border-off--hover:grey;--checkbox-color-gfx--focus:grey;--checkbox-color-background--focus:#d3d3d3;--checkbox-color-gfx--error:#fff0f5;--checkbox-color-gfx--error-contrast:red;--checkbox-color-background-on--error:red;--checkbox-color-background--error-contrast:#fff0f5;--checkbox-color-border--error:red;--checkbox-bounding--medium:1.75,1.75;font-size:var(--font-size-small);line-height:var(--line-height-basis)}.dnb-checkbox,.dnb-checkbox__inner{display:inline-flex;flex-direction:column}.dnb-checkbox__inner{align-self:center}.dnb-checkbox__shell{align-items:center;display:flex;height:var(--checkbox-height--medium);justify-content:center;position:relative;-webkit-user-select:none;user-select:none;width:var(--checkbox-width--medium)}.dnb-checkbox--large .dnb-checkbox__shell{height:var(--checkbox-height--large);width:var(--checkbox-width--large)}.dnb-checkbox__button{border:var(--checkbox-border-width) solid transparent;display:inline-block}.dnb-checkbox__focus{display:none;outline:none}html[data-whatinput=keyboard] .dnb-checkbox__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-checkbox__button,.dnb-checkbox__focus{border-radius:.25rem;height:calc(var(--checkbox-height--medium) - .25rem);position:relative;width:calc(var(--checkbox-width--medium) - .25rem);z-index:4}.dnb-checkbox--large .dnb-checkbox__button,.dnb-checkbox--large .dnb-checkbox__focus{border-radius:.25rem;height:var(--checkbox-height--large);width:var(--checkbox-width--large)}.dnb-checkbox__gfx{shape-rendering:geometricprecision;height:calc(var(--checkbox-height--medium) - .5rem);left:auto;position:absolute;top:auto;transition:opacity .2s ease-out,transform .2s ease-out;width:calc(var(--checkbox-width--medium) - .5rem);z-index:5}.dnb-checkbox--large{line-height:var(--checkbox-height--large)}.dnb-checkbox--large .dnb-checkbox__gfx{height:calc(var(--checkbox-height--large) - .5rem);width:calc(var(--checkbox-width--large) - .5rem)}.dnb-checkbox__input{border:0;height:var(--checkbox-height--medium);left:auto;margin:0;opacity:0;padding:0;position:absolute;top:auto;transform:scale(var(--checkbox-bounding--medium));width:var(--checkbox-width--medium);z-index:6}.dnb-checkbox--large .dnb-checkbox__input{height:var(--checkbox-height--large);transform:scale(1);width:var(--checkbox-width--large)}.dnb-checkbox__input:not([disabled]){cursor:pointer}.dnb-checkbox .dnb-form-label{margin-bottom:0;margin-left:0;margin-right:0}.dnb-checkbox__order{align-items:baseline;display:inline-flex}.dnb-checkbox__suffix{order:4}.dnb-checkbox--label-position-left .dnb-checkbox__order .dnb-checkbox__inner{order:2}.dnb-checkbox--label-position-left .dnb-checkbox__order .dnb-form-label{order:1;padding-right:.5rem}.dnb-checkbox--label-position-left .dnb-checkbox__order .dnb-form-status{margin-top:.5rem;order:3}.dnb-checkbox--label-position-right .dnb-checkbox__order .dnb-checkbox__inner{order:1}.dnb-checkbox--label-position-right .dnb-checkbox__order .dnb-form-label{order:2;padding-left:.5rem}.dnb-checkbox--label-position-right .dnb-checkbox__order+.dnb-form-status{margin-top:.5rem;order:3;vertical-align:top}.dnb-checkbox__input:checked~.dnb-checkbox__gfx,.dnb-checkbox__input[data-checked=true]~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx-on);opacity:1;transform:scale(1)}.dnb-checkbox__input:checked~.dnb-checkbox__button,.dnb-checkbox__input[data-checked=true]~.dnb-checkbox__button{background-color:var(--checkbox-color-background-on);border-color:var(--checkbox-color-border-on)}.dnb-checkbox__input:not(:checked):not([data-checked=true])~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx-off);opacity:0;transform:scale(.8)}.dnb-checkbox__input:not(:checked):not([data-checked=true])~.dnb-checkbox__button{background-color:var(--checkbox-color-background-off);border-color:var(--checkbox-color-border-off)}.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)}.dnb-checkbox__input[disabled]:checked~.dnb-checkbox__gfx,.dnb-checkbox__input[disabled][data-checked=true]~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx--disabled)}.dnb-checkbox__input[disabled]:not(:checked):not([data-checked=true])~.dnb-checkbox__button{background-color:var(--checkbox-color-background-off--disabled);border-color:var(--checkbox-color-border-off--disabled)}.dnb-checkbox__input:not([disabled]):active~.dnb-checkbox__button{background-color:var(--checkbox-color-background--active);border-color:var(--checkbox-color-border--active)}.dnb-checkbox__input:not([disabled]):checked:active~.dnb-checkbox__gfx,.dnb-checkbox__input:not([disabled])[data-checked=true]:active~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx-on)}.dnb-checkbox__input:not([disabled]):not(:focus):hover~.dnb-checkbox__button{background-color:var(--checkbox-color-background--hover);border-color:var(--checkbox-color-border-off--hover)}.dnb-checkbox__input:not([disabled]):not(:focus):hover~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx--hover)}.dnb-checkbox__input:not([disabled]):not(:focus):checked:hover~.dnb-checkbox__button,.dnb-checkbox__input:not([disabled]):not(:focus)[data-checked=true]:hover~.dnb-checkbox__button{border-color:var(--checkbox-color-border-on--hover)}html[data-whatinput=keyboard] .dnb-checkbox__input:not([disabled]):focus~.dnb-checkbox__button{background-color:var(--checkbox-color-background--focus);border:none}html[data-whatinput=keyboard] .dnb-checkbox__input:not([disabled]):focus~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx--focus)}.dnb-checkbox__input:not([disabled]):active~.dnb-checkbox__button .dnb-checkbox__focus,.dnb-checkbox__input:not([disabled]):focus~.dnb-checkbox__button .dnb-checkbox__focus{display:block}.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active)~.dnb-checkbox__button{border:none}.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active)~.dnb-checkbox__button .dnb-checkbox__focus{--border-color:var(--checkbox-color-border--error);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);display:block}.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):hover~.dnb-checkbox__button{background-color:var(--checkbox-color-background--error-contrast)}.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):hover~.dnb-checkbox__button[data-checked=true]{border-color:var(--checkbox-color-border--error)}.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):hover~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx--error-contrast)}.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):not(:hover)~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx--error)}html[data-whatinput=keyboard] .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):focus:hover~.dnb-checkbox__button,html[data-whatinput=keyboard] .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):focus~.dnb-checkbox__button{--border-color:var(--checkbox-color-border--error);--border-width:calc(var(--focus-ring-width) + 0.0625rem);background-color:var(--checkbox-color-background--error-contrast);border:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}html[data-whatinput=keyboard] .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):focus:hover~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx--error-contrast)}.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):not(:hover):checked~.dnb-checkbox__button,.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):not(:hover)[data-checked=true]~.dnb-checkbox__button{background-color:var(--checkbox-color-background-on--error)}.dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled]~.dnb-checkbox__button{border-color:var(--skeleton-color)}.dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled]~.dnb-checkbox__button:before{border-radius:0}.dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled]~.dnb-checkbox__gfx{color:var(--skeleton-color)}
+:root{--checkbox-width--medium:1.5rem;--checkbox-height--medium:1.5rem}.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;--checkbox-color-gfx-on:#000;--checkbox-color-gfx-off:#fff;--checkbox-color-background-on:#fff;--checkbox-color-background-off:#fff;--checkbox-color-border-on:#000;--checkbox-color-border-off:#000;--checkbox-color-gfx--disabled:grey;--checkbox-color-background-on--disabled:#d3d3d3;--checkbox-color-background-off--disabled:#d3d3d3;--checkbox-color-border-on--disabled:grey;--checkbox-color-border-off--disabled:grey;--checkbox-color-gfx__indeterminate--disabled:grey;--checkbox-color-background--active:#d3d3d3;--checkbox-color-border--active:transparent;--checkbox-color-gfx--hover:grey;--checkbox-color-background--hover:#fff;--checkbox-color-border-on--hover:grey;--checkbox-color-border-off--hover:grey;--checkbox-color-gfx--focus:grey;--checkbox-color-background--focus:#d3d3d3;--checkbox-color-gfx--error:#fff0f5;--checkbox-color-gfx--error-contrast:red;--checkbox-color-background-on--error:red;--checkbox-color-background--error-contrast:#fff0f5;--checkbox-color-border--error:red;--checkbox-color-gfx-indeterminate--error:red;--checkbox-color-gfx--error--hover:red;--checkbox-color-background--error--hover:#fff0f5;--checkbox-color-border--error--hover:red;--checkbox-color-background-indeterminate:grey;--checkbox-color-gfx-indeterminate:#a9a9a9;--checkbox-color-background-indeterminate--active:grey;--checkbox-color-border-indeterminate--active:#fff;--checkbox-color-gfx-indeterminate--active:#fff;--checkbox-bounding--medium:1.75,1.75;font-size:var(--font-size-small);line-height:var(--line-height-basis)}.dnb-checkbox,.dnb-checkbox__inner{display:inline-flex;flex-direction:column}.dnb-checkbox__inner{align-self:center}.dnb-checkbox__shell{align-items:center;display:flex;height:var(--checkbox-height--medium);justify-content:center;position:relative;-webkit-user-select:none;user-select:none;width:var(--checkbox-width--medium)}.dnb-checkbox--large .dnb-checkbox__shell{height:var(--checkbox-height--large);width:var(--checkbox-width--large)}.dnb-checkbox__button{border:var(--checkbox-border-width) solid transparent;display:inline-block}.dnb-checkbox__focus{display:none;outline:none}html[data-whatinput=keyboard] .dnb-checkbox__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-checkbox__button,.dnb-checkbox__focus{border-radius:var(--checkbox-border-radius);height:calc(var(--checkbox-height--medium) - .25rem);position:relative;width:calc(var(--checkbox-width--medium) - .25rem);z-index:4}.dnb-checkbox--large .dnb-checkbox__button,.dnb-checkbox--large .dnb-checkbox__focus{border-radius:var(--checkbox-border-radius);height:var(--checkbox-height--large);width:var(--checkbox-width--large)}.dnb-checkbox__gfx{shape-rendering:geometricprecision;height:calc(var(--checkbox-height--medium) - .5rem);left:auto;position:absolute;top:auto;transition:opacity .2s ease-out,transform .2s ease-out;width:calc(var(--checkbox-width--medium) - .5rem);z-index:5}.dnb-checkbox--large{line-height:var(--checkbox-height--large)}.dnb-checkbox--large .dnb-checkbox__gfx{height:calc(var(--checkbox-height--large) - .5rem);width:calc(var(--checkbox-width--large) - .5rem)}.dnb-checkbox__input{border:0;height:var(--checkbox-height--medium);left:auto;margin:0;opacity:0;padding:0;position:absolute;top:auto;transform:scale(var(--checkbox-bounding--medium));width:var(--checkbox-width--medium);z-index:6}.dnb-checkbox--large .dnb-checkbox__input{height:var(--checkbox-height--large);transform:scale(1);width:var(--checkbox-width--large)}.dnb-checkbox__input:not([disabled]){cursor:pointer}.dnb-checkbox .dnb-form-label{margin-bottom:0;margin-left:0;margin-right:0}.dnb-checkbox__order{align-items:baseline;display:inline-flex}.dnb-checkbox__suffix{order:4}.dnb-checkbox--label-position-left .dnb-checkbox__order .dnb-checkbox__inner{order:2}.dnb-checkbox--label-position-left .dnb-checkbox__order .dnb-form-label{order:1;padding-right:.5rem}.dnb-checkbox--label-position-left .dnb-checkbox__order .dnb-form-status{margin-top:.5rem;order:3}.dnb-checkbox--label-position-right .dnb-checkbox__order .dnb-checkbox__inner{order:1}.dnb-checkbox--label-position-right .dnb-checkbox__order .dnb-form-label{order:2;padding-left:.5rem}.dnb-checkbox--label-position-right .dnb-checkbox__order+.dnb-form-status{margin-top:.5rem;order:3;vertical-align:top}.dnb-checkbox__input:checked~.dnb-checkbox__gfx,.dnb-checkbox__input[data-checked=true]~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx-on);opacity:1;transform:scale(1)}.dnb-checkbox__input:checked~.dnb-checkbox__button,.dnb-checkbox__input[data-checked=true]~.dnb-checkbox__button{background-color:var(--checkbox-color-background-on);border-color:var(--checkbox-color-border-on)}.dnb-checkbox__input:not(:checked):not([data-checked=true])~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx-off);opacity:0;transform:scale(.8)}.dnb-checkbox__input:not(:checked):not([data-checked=true])~.dnb-checkbox__button{background-color:var(--checkbox-color-background-off);border-color:var(--checkbox-color-border-off);transition:background-color .1s ease-out}.dnb-checkbox__input~.dnb-checkbox__indeterminate{background-color:var(--checkbox-color-gfx-indeterminate);border-radius:var(--checkbox-gfx-border-radius__indeterminate);height:var(--checkbox-gfx-height__indeterminate);opacity:0;position:absolute;transform:scale(.85);transition:opacity .2s ease-out,transform .2s ease-out;width:var(--checkbox-gfx-width__indeterminate);z-index:5}.dnb-checkbox__input:indeterminate~.dnb-checkbox__indeterminate{opacity:1;transform:scale(1)}.dnb-checkbox__input:indeterminate:checked~.dnb-checkbox__button{background-color:transparent;border-color:var(--checkbox-color-border-off)}.dnb-checkbox__input:indeterminate:checked:hover~.dnb-checkbox__gfx,.dnb-checkbox__input:indeterminate:checked~.dnb-checkbox__gfx,.dnb-checkbox__input:indeterminate:hover~.dnb-checkbox__gfx{color:transparent}.dnb-checkbox--large .dnb-checkbox__input:indeterminate~.dnb-checkbox__indeterminate{height:var(--checkbox-gfx-height__indeterminate--large);width:var(--checkbox-gfx-width__indeterminate--large)}.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)}.dnb-checkbox__input[disabled]:checked~.dnb-checkbox__gfx,.dnb-checkbox__input[disabled][data-checked=true]~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx--disabled)}.dnb-checkbox__input[disabled]:not(:checked):not([data-checked=true])~.dnb-checkbox__button{background-color:var(--checkbox-color-background-off--disabled);border-color:var(--checkbox-color-border-off--disabled)}.dnb-checkbox__input[disabled]:indeterminate~.dnb-checkbox__indeterminate{background-color:var(--checkbox-color-gfx__indeterminate--disabled)}.dnb-checkbox__input[disabled]:indeterminate~.dnb-checkbox__gfx{color:transparent}.dnb-checkbox__input:not([disabled]):active~.dnb-checkbox__button{background-color:var(--checkbox-color-background--active);border-color:var(--checkbox-color-border--active)}.dnb-checkbox__input:not([disabled]):checked:active~.dnb-checkbox__gfx,.dnb-checkbox__input:not([disabled])[data-checked=true]:active~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx-on)}.dnb-checkbox__input:not([disabled]):indeterminate:active~.dnb-checkbox__button{background-color:var(--checkbox-color-background-indeterminate--active);border-color:var(--checkbox-color-border-indeterminate--active)}.dnb-checkbox__input:not([disabled]):indeterminate:active~.dnb-checkbox__indeterminate{background-color:var(--checkbox-color-gfx-indeterminate--active)}.dnb-checkbox__input:not([disabled]):not(:active):hover~.dnb-checkbox__button{background-color:var(--checkbox-color-background--hover);border-color:var(--checkbox-color-border-off--hover)}.dnb-checkbox__input:hover~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx--hover)}.dnb-checkbox__input:not([disabled]):checked:hover~.dnb-checkbox__button,.dnb-checkbox__input:not([disabled])[data-checked=true]:hover~.dnb-checkbox__button{border:var(--checkbox-border-width--hover) solid var(--checkbox-color-border-on--hover)}html[data-whatinput=keyboard] .dnb-checkbox__input:not([disabled]):focus-visible~.dnb-checkbox__button{background-color:var(--checkbox-color-background--focus);border:none}html[data-whatinput=keyboard] .dnb-checkbox__input:not([disabled]):focus-visible~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx--focus)}.dnb-checkbox__input:not([disabled]):active~.dnb-checkbox__button .dnb-checkbox__focus,.dnb-checkbox__input:not([disabled]):focus-visible~.dnb-checkbox__button .dnb-checkbox__focus{display:block}.dnb-checkbox__input:not([disabled]):focus-visible~.dnb-checkbox__indeterminate{background-color:var(--checkbox-color-gfx--focus)}.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active)~.dnb-checkbox__button{border:none}.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active)~.dnb-checkbox__button .dnb-checkbox__focus{--border-color:var(--checkbox-color-border--error);--border-width:var(--checkbox-border-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);display:block}.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):hover~.dnb-checkbox__button{background-color:var(--checkbox-color-background--error--hover)}.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):hover~.dnb-checkbox__button[data-checked=true]{border-color:var(--checkbox-color-border--error--hover)}.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):hover~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx--error--hover)}.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):not(:hover)~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx--error)}html[data-whatinput=keyboard] .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):focus:hover~.dnb-checkbox__button,html[data-whatinput=keyboard] .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):focus~.dnb-checkbox__button{--border-color:var(--checkbox-color-border--error);--border-width:calc(var(--checkbox-border-width--hover));background-color:var(--checkbox-color-background--error-contrast);border:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}html[data-whatinput=keyboard] .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):focus:hover~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx--error-contrast)}.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):not(:hover):checked~.dnb-checkbox__button,.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):not(:hover)[data-checked=true]~.dnb-checkbox__button{background-color:var(--checkbox-color-background-on--error)}.dnb-checkbox__status--error .dnb-checkbox__input:indeterminate:not([disabled]):not(:active):not(:hover)~.dnb-checkbox__gfx{background-color:var(--checkbox-color-gfx--error-contrast);border-radius:var(--checkbox-border-radius);color:var(--checkbox-color-gfx--error-contrast)}.dnb-checkbox__status--error .dnb-checkbox__input:indeterminate:not(:active):not(:hover)~.dnb-checkbox__indeterminate{background-color:var(--checkbox-color-gfx-indeterminate--error)}.dnb-checkbox__status--error .dnb-checkbox__input:not(:indeterminate)~.dnb-checkbox__indeterminate{background-color:var(--checkbox-color-gfx-indeterminate--error)}.dnb-checkbox__status--error .dnb-checkbox__input:indeterminate:hover:not(:active)~.dnb-checkbox__indeterminate{background-color:var(--checkbox-color-gfx--error--hover)}.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):hover~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx--error--hover)}.dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled]~.dnb-checkbox__button{border-color:var(--skeleton-color)}.dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled]~.dnb-checkbox__button:before{border-radius:0}.dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled]~.dnb-checkbox__gfx{color:var(--skeleton-color)}.dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled]~.dnb-checkbox__indeterminate{background-color:var(--skeleton-color)}

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);
@@ -247,9 +266,51 @@
     // 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 +321,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 +333,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 +357,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: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 +427,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 +457,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 +478,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
 }