@dnb/eufemia 10.30.2 → 10.31.0

package/extensions/forms/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":["FormError","Error","constructor","message","options","_defineProperty","key","dataValueReadProps","pickDataValueReadProps","props","Object","fromEntries","entries","filter","_ref","includes","omitDataValueReadProps","_ref2","dataValueWriteProps","pickDataValueWriteProps","_ref3","omitDataValueWriteProps","_ref4","pickDataValueReadWriteProps","_ref5","omitDataValueReadWriteProps","_ref6"],"sources":["../../../../src/extensions/forms/types.ts"],"sourcesContent":["import type { SpacingProps } from '../../components/space/types'\nimport type { JSONSchema4, JSONSchema6, JSONSchema7 } from 'json-schema'\nimport type { JSONSchemaType } from 'ajv/dist/2020'\nimport { JsonObject } from 'json-pointer'\nimport { AriaAttributes } from 'react'\n\nexport type * from 'json-schema'\nexport type JSONSchema = JSONSchema7\nexport type AllJSONSchemaVersions =\n  | JSONSchema4\n  | JSONSchema6\n  | JSONSchema7\n  | JSONSchemaType<unknown>\nexport { JSONSchemaType }\n\ntype ValidationRule = 'type' | 'pattern' | 'required' | string\ntype MessageValues = Record<string, string>\n\ninterface IFormErrorOptions {\n  validationRule?: ValidationRule\n  messageValues?: MessageValues\n}\n\n/**\n * Standard error object for Eufemia Forms, extending the built-in error with additional information for data handling\n */\nexport class FormError extends Error {\n  /**\n   * What validation rule did the error occur based on? (i.e: minLength, required or maximum)\n   */\n  validationRule?: ValidationRule\n\n  /**\n   * Replacement values relevant for this error.\n   * @example { minLength: 3 } to be able to replace values in a message like \"Minimum {minLength} characters\"\n   */\n  messageValues?: MessageValues\n\n  constructor(message: string, options?: IFormErrorOptions) {\n    super(message)\n\n    if (options) {\n      for (const key in options) {\n        this[key] = options[key]\n      }\n    }\n  }\n}\n\n/**\n * Accept any key, so custom message keys can be used\n */\nexport type CustomErrorMessages = Record<string, string>\n\n/**\n * Accept any key, so custom message keys can be used\n * including the path to the field the message is for\n */\nexport type CustomErrorMessagesWithPaths =\n  | CustomErrorMessages\n  | {\n      // eslint-disable-next-line no-unused-vars\n      [K in `/${string}`]?: CustomErrorMessages\n    }\n\nexport interface DefaultErrorMessages {\n  required?: string\n  pattern?: string\n}\n\nexport interface DataValueReadProps<Value = unknown> {\n  /** JSON Pointer for where the data for this field is located in the source dataset */\n  path?: string\n  /** JSON Pointer for where the data for this field is located in the source iterate loop element */\n  itemPath?: string\n  value?: Value\n}\n\nconst dataValueReadProps = ['path', 'itemPath', 'value']\n\nexport function pickDataValueReadProps<Props extends DataValueReadProps>(\n  props: Props\n): DataValueReadProps {\n  return Object.fromEntries(\n    Object.entries(props ?? {}).filter(([key]) =>\n      dataValueReadProps.includes(key)\n    )\n  )\n}\n\nexport function omitDataValueReadProps<Props extends DataValueReadProps>(\n  props: Props\n): Omit<DataValueReadProps, keyof DataValueReadProps> {\n  return Object.fromEntries(\n    Object.entries(props ?? {}).filter(\n      ([key]) => !dataValueReadProps.includes(key)\n    )\n  )\n}\n\nexport interface DataValueWriteProps<\n  Value = unknown,\n  EmptyValue = undefined | unknown,\n> {\n  emptyValue?: EmptyValue\n  onFocus?: (value: Value | EmptyValue) => void\n  onBlur?: (value: Value | EmptyValue) => void\n  onChange?: OnChangeValue<Value, EmptyValue>\n}\n\nconst dataValueWriteProps = ['emptyValue', 'onFocus', 'onBlur', 'onChange']\n\nexport function pickDataValueWriteProps<Props extends DataValueWriteProps>(\n  props: Props\n): DataValueWriteProps {\n  return Object.fromEntries(\n    Object.entries(props ?? {}).filter(([key]) =>\n      dataValueWriteProps.includes(key)\n    )\n  )\n}\n\nexport function omitDataValueWriteProps<Props extends DataValueWriteProps>(\n  props: Props\n): Omit<DataValueWriteProps, keyof DataValueWriteProps> {\n  return Object.fromEntries(\n    Object.entries(props ?? {}).filter(\n      ([key]) => !dataValueWriteProps.includes(key)\n    )\n  )\n}\n\nexport type DataValueReadWriteProps<\n  Value = unknown,\n  EmptyValue = undefined | unknown,\n> = DataValueReadProps<Value> & DataValueWriteProps<Value, EmptyValue>\n\nexport function pickDataValueReadWriteProps<\n  Props extends DataValueReadWriteProps,\n>(props: Props): DataValueReadWriteProps {\n  return Object.fromEntries(\n    Object.entries(props ?? {}).filter(\n      ([key]) =>\n        dataValueReadProps.includes(key) ||\n        dataValueWriteProps.includes(key)\n    )\n  )\n}\n\nexport function omitDataValueReadWriteProps<\n  Props extends DataValueReadWriteProps,\n>(\n  props: Props\n): Omit<DataValueReadWriteProps, keyof DataValueReadWriteProps> {\n  return Object.fromEntries(\n    Object.entries(props ?? {}).filter(\n      ([key]) =>\n        !dataValueReadProps.includes(key) &&\n        !dataValueWriteProps.includes(key)\n    )\n  )\n}\n\nexport type ComponentProps = SpacingProps & {\n  className?: string\n}\n\nexport type AdditionalEventArgs = Record<string, unknown>\n\nexport type DataValueReadComponentProps<Value = unknown> = ComponentProps &\n  DataValueReadProps<Value>\n\nexport type DataValueReadWriteComponentProps<\n  Value = unknown,\n  EmptyValue = undefined | unknown,\n> = ComponentProps &\n  DataValueReadProps<Value> &\n  DataValueWriteProps<Value, EmptyValue>\n\nexport type FieldBlockProps = {\n  /**\n   * The layout of the field block\n   */\n  layout?: 'horizontal' | 'vertical'\n  /**\n   * Main label text for the field\n   */\n  label?: React.ReactNode\n  /**\n   * A more discreet text displayed beside the label\n   */\n  labelDescription?: React.ReactNode\n  /**\n   * Text showing in place of the value if no value is given\n   */\n  placeholder?: React.ReactNode\n}\n\nexport type FieldBlockWidth =\n  | false\n  | 'small'\n  | 'medium'\n  | 'large'\n  | 'stretch'\n\nexport interface UseFieldProps<\n  Value = unknown,\n  EmptyValue = undefined | unknown,\n  ErrorMessages extends DefaultErrorMessages = DefaultErrorMessages,\n> extends DataValueReadWriteComponentProps<Value, EmptyValue>,\n    AriaAttributes {\n  // - HTML Element Attributes\n  /**\n   * ID added to the actual field component, and linked to the label via for-attribute\n   */\n  id?: Identifier\n  name?: string\n  disabled?: boolean\n  readOnly?: boolean\n  autoComplete?:\n    | HTMLInputElement['autocomplete']\n    | HTMLTextAreaElement['autocomplete']\n\n  // - Used by useFieldProps and FieldBlock\n  info?: React.ReactNode\n  warning?: React.ReactNode\n  error?: Error | FormError\n\n  // - Validation\n  required?: boolean\n  schema?: AllJSONSchemaVersions\n  validator?: (\n    value: Value | EmptyValue,\n    errorMessages?: ErrorMessages\n  ) => Error | undefined | void | Promise<Error | undefined | void>\n  onBlurValidator?: (\n    value: Value | EmptyValue\n  ) => Error | undefined | void | Promise<Error | undefined | void>\n  validateRequired?: (\n    internal: Value,\n    {\n      emptyValue,\n      required,\n      isChanged,\n      error,\n    }: {\n      emptyValue: EmptyValue\n      required: boolean\n      isChanged: boolean\n      error: FormError | undefined\n    }\n  ) => FormError | undefined\n  /**\n   * Should error messages based on validation be shown initially (from given value-prop or source data)\n   * before the user interacts with the field?\n   * @default false\n   */\n  validateInitially?: boolean\n  /**\n   * Should error messages be shown when touching (like focusing a field and blurring) without having changed\n   * the value? So the user did not introduce a new error, but it was invalid based on validation initially.\n   */\n  validateUnchanged?: boolean\n  /**\n   * Should validation be done while writing, not just when blurring the field?\n   */\n  continuousValidation?: boolean\n  /**\n   * Provide custom error messages for the field\n   */\n  errorMessages?: ErrorMessages\n\n  // - Derivatives\n\n  /**\n   * Transforms the `value` before its displayed in the field (e.g. input).\n   * Public API. Should not be used internally.\n   */\n  transformIn?: (external: Value | unknown) => Value | unknown\n\n  /**\n   * Transforms the value before it gets forwarded to the form data object or returned as the onChange value parameter.\n   * Public API. Should not be used internally.\n   */\n  transformOut?: (internal: Value | unknown) => Value\n\n  /**\n   * Transforms the value given by `handleChange` after `fromInput` and before `updateValue` and `toEvent`. The second parameter returns the current value.\n   */\n  transformValue?: (value: Value, currentValue?: Value) => Value\n\n  /**\n   * Transforms the value before it gets returned as the `value`.\n   */\n  toInput?: (external: Value | unknown) => Value | unknown\n\n  /**\n   * Transforms the internal value before it gets returned by even callbacks such as `onChange`, `onFocus` and `onBlur`. The second parameter returns the event type: `onChange`, `onFocus`, `onBlur` or `onBlurValidator`.\n   */\n  toEvent?: (\n    internal: Value,\n    type: 'onChange' | 'onFocus' | 'onBlur' | 'onBlurValidator'\n  ) => Value\n\n  /**\n   * Transforms the value given by `handleChange` before it is used in the further process flow. Use it to destruct the value form the original event object.\n   */\n  fromInput?: (external: Value | unknown) => Value\n\n  /**\n   * Transforms the given props `value` before any other step gets entered.\n   */\n  fromExternal?: (external: Value) => Value\n}\n\nexport type FieldProps<\n  Value = unknown,\n  EmptyValue = undefined | unknown,\n  ErrorMessages extends DefaultErrorMessages = DefaultErrorMessages,\n> = UseFieldProps<Value, EmptyValue, ErrorMessages> & FieldBlockProps\n\nexport interface FieldHelpProps {\n  help?: {\n    title?: string\n    content?: string\n  }\n}\n\nexport interface ValueProps<Value>\n  extends DataValueReadComponentProps<Value> {\n  /**\n   * Field label to show above the data value.\n   */\n  label?: React.ReactNode\n\n  /**\n   * Shows the value even if it is empty.\n   */\n  showEmpty?: boolean\n\n  /**\n   * Text showing in place of the value if no value is given.\n   */\n  placeholder?: React.ReactNode\n\n  /**\n   * For showing the value inline (not as a block element)\n   */\n  inline?: boolean\n\n  /** The max-width of a value block. Defaults to large */\n  maxWidth?: 'small' | 'medium' | 'large' | 'auto'\n\n  /**\n   * Transforms the `value` before its displayed in the field (e.g. input).\n   * Public API. Should not be used internally.\n   */\n  transformIn?: (external: Value | unknown) => Value | unknown\n\n  /**\n   * Transforms the value before it gets returned as the `value`.\n   */\n  toInput?: (external: Value | unknown) => Value | unknown\n\n  /**\n   * Transforms the given props `value` before any other step gets entered.\n   */\n  fromExternal?: (external: Value) => Value\n}\n\nexport type Path = string\nexport type Identifier = string\n\nexport type SubmitState =\n  | 'pending' // Used for async operations\n  | 'complete' // Used to hide the submit indicator\n  | 'success' // Used for fields\n  | 'error' // Used when error is shown\n  | 'abort' // Used to abort the state regardless (step change)\n\n/**\n * Provide a error that shows in the FormStatus of a field.\n */\ntype EventStateObjectError = Error\n/**\n * Provide a warning that shows in the FormStatus of a field.\n */\ntype EventStateObjectWarning = React.ReactNode\n/**\n * Provide an info that shows in the FormStatus of a field.\n */\ntype EventStateObjectInfo = React.ReactNode\n\n/**\n * Provide a status that will enforce the form to stay in pending state\n */\ntype EventStateObjectStatus = 'pending'\n\n/**\n * Provide a success state that will show an indicator on the related field label\n */\ntype EventStateObjectSuccess = 'saved'\n\n/**\n * Provide an error or status messages that shows in the FormStatus of a field\n */\nexport type EventStateObjectOr = {\n  error?: EventStateObjectError\n  warning?: EventStateObjectWarning\n  info?: EventStateObjectInfo\n  pending?: EventStateObjectStatus\n}\n\nexport type EventStateObjectEitherOr =\n  | { error: EventStateObjectError }\n  | { warning: EventStateObjectWarning }\n  | { info: EventStateObjectInfo }\n  | { status: EventStateObjectStatus }\n\nexport type EventStateObject = EventStateObjectOr &\n  EventStateObjectEitherOr\n\n/**\n * Provide 'saved' to indicate the data has been saved successfully. Can not be combined with `error`.\n */\nexport type EventStateObjectWithSuccess = EventStateObjectOr & {\n  success?: EventStateObjectSuccess\n} & (EventStateObjectEitherOr | { success: EventStateObjectSuccess })\n\n/**\n * Provide an error or status messages that shows in the FormStatus of a field\n */\nexport type EventReturnWithStateObject = Error | EventStateObject\n\nexport type EventReturnWithStateObjectAndSuccess =\n  | Error\n  | EventStateObjectWithSuccess\n\nexport type OnSubmitParams = {\n  /** Will remove browser-side stored autocomplete data  */\n  resetForm: () => void\n\n  /** Will empty the whole internal data set of the form  */\n  clearData: () => void\n}\n\nexport type OnSubmit<Data = JsonObject> = (\n  data: Data,\n  { resetForm, clearData }: OnSubmitParams\n) =>\n  | EventReturnWithStateObject\n  | void\n  | Promise<EventReturnWithStateObject | void>\n\nexport type OnChange<Data = unknown> = (\n  data: Data\n) =>\n  | EventReturnWithStateObjectAndSuccess\n  | void\n  | Promise<EventReturnWithStateObjectAndSuccess | void>\n\nexport type OnChangeValue<\n  Value = unknown,\n  EmptyValue = undefined | unknown,\n> = (\n  value: Value | EmptyValue,\n  additionalArgs?: AdditionalEventArgs\n) =>\n  | EventReturnWithStateObjectAndSuccess\n  | void\n  | Promise<EventReturnWithStateObjectAndSuccess | void>\n"],"mappings":"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"}
+{"version":3,"file":"types.js","names":["FormError","Error","constructor","message","options","_defineProperty","key","dataValueReadProps","pickDataValueReadProps","props","Object","fromEntries","entries","filter","_ref","includes","omitDataValueReadProps","_ref2","dataValueWriteProps","pickDataValueWriteProps","_ref3","omitDataValueWriteProps","_ref4","pickDataValueReadWriteProps","_ref5","omitDataValueReadWriteProps","_ref6"],"sources":["../../../../src/extensions/forms/types.ts"],"sourcesContent":["import type { SpacingProps } from '../../components/space/types'\nimport type { JSONSchema4, JSONSchema6, JSONSchema7 } from 'json-schema'\nimport type { JSONSchemaType } from 'ajv/dist/2020'\nimport { JsonObject } from 'json-pointer'\nimport { AriaAttributes } from 'react'\n\nexport type * from 'json-schema'\nexport type JSONSchema = JSONSchema7\nexport type AllJSONSchemaVersions =\n  | JSONSchema4\n  | JSONSchema6\n  | JSONSchema7\n  | JSONSchemaType<unknown>\nexport { JSONSchemaType }\n\ntype ValidationRule = 'type' | 'pattern' | 'required' | string\ntype MessageValues = Record<string, string>\n\ninterface IFormErrorOptions {\n  validationRule?: ValidationRule\n  messageValues?: MessageValues\n}\n\n/**\n * Standard error object for Eufemia Forms, extending the built-in error with additional information for data handling\n */\nexport class FormError extends Error {\n  /**\n   * What validation rule did the error occur based on? (i.e: minLength, required or maximum)\n   */\n  validationRule?: ValidationRule\n\n  /**\n   * Replacement values relevant for this error.\n   * @example { minLength: 3 } to be able to replace values in a message like \"Minimum {minLength} characters\"\n   */\n  messageValues?: MessageValues\n\n  constructor(message: string, options?: IFormErrorOptions) {\n    super(message)\n\n    if (options) {\n      for (const key in options) {\n        this[key] = options[key]\n      }\n    }\n  }\n}\n\n/**\n * Accept any key, so custom message keys can be used\n */\nexport type CustomErrorMessages = Record<string, string>\n\n/**\n * Accept any key, so custom message keys can be used\n * including the path to the field the message is for\n */\nexport type CustomErrorMessagesWithPaths =\n  | CustomErrorMessages\n  | {\n      // eslint-disable-next-line no-unused-vars\n      [K in `/${string}`]?: CustomErrorMessages\n    }\n\nexport interface DefaultErrorMessages {\n  required?: string\n  pattern?: string\n}\n\nexport interface DataValueReadProps<Value = unknown> {\n  /** JSON Pointer for where the data for this field is located in the source dataset */\n  path?: string\n  /** JSON Pointer for where the data for this field is located in the source iterate loop element */\n  itemPath?: string\n  value?: Value\n}\n\nconst dataValueReadProps = ['path', 'itemPath', 'value']\n\nexport function pickDataValueReadProps<Props extends DataValueReadProps>(\n  props: Props\n): DataValueReadProps {\n  return Object.fromEntries(\n    Object.entries(props ?? {}).filter(([key]) =>\n      dataValueReadProps.includes(key)\n    )\n  )\n}\n\nexport function omitDataValueReadProps<Props extends DataValueReadProps>(\n  props: Props\n): Omit<DataValueReadProps, keyof DataValueReadProps> {\n  return Object.fromEntries(\n    Object.entries(props ?? {}).filter(\n      ([key]) => !dataValueReadProps.includes(key)\n    )\n  )\n}\n\nexport interface DataValueWriteProps<\n  Value = unknown,\n  EmptyValue = undefined | unknown,\n> {\n  emptyValue?: EmptyValue\n  onFocus?: (value: Value | EmptyValue) => void\n  onBlur?: (value: Value | EmptyValue) => void\n  onChange?: OnChangeValue<Value, EmptyValue>\n}\n\nconst dataValueWriteProps = ['emptyValue', 'onFocus', 'onBlur', 'onChange']\n\nexport function pickDataValueWriteProps<Props extends DataValueWriteProps>(\n  props: Props\n): DataValueWriteProps {\n  return Object.fromEntries(\n    Object.entries(props ?? {}).filter(([key]) =>\n      dataValueWriteProps.includes(key)\n    )\n  )\n}\n\nexport function omitDataValueWriteProps<Props extends DataValueWriteProps>(\n  props: Props\n): Omit<DataValueWriteProps, keyof DataValueWriteProps> {\n  return Object.fromEntries(\n    Object.entries(props ?? {}).filter(\n      ([key]) => !dataValueWriteProps.includes(key)\n    )\n  )\n}\n\nexport type DataValueReadWriteProps<\n  Value = unknown,\n  EmptyValue = undefined | unknown,\n> = DataValueReadProps<Value> & DataValueWriteProps<Value, EmptyValue>\n\nexport function pickDataValueReadWriteProps<\n  Props extends DataValueReadWriteProps,\n>(props: Props): DataValueReadWriteProps {\n  return Object.fromEntries(\n    Object.entries(props ?? {}).filter(\n      ([key]) =>\n        dataValueReadProps.includes(key) ||\n        dataValueWriteProps.includes(key)\n    )\n  )\n}\n\nexport function omitDataValueReadWriteProps<\n  Props extends DataValueReadWriteProps,\n>(\n  props: Props\n): Omit<DataValueReadWriteProps, keyof DataValueReadWriteProps> {\n  return Object.fromEntries(\n    Object.entries(props ?? {}).filter(\n      ([key]) =>\n        !dataValueReadProps.includes(key) &&\n        !dataValueWriteProps.includes(key)\n    )\n  )\n}\n\nexport type ComponentProps = SpacingProps & {\n  className?: string\n}\n\nexport type AdditionalEventArgs = Record<string, unknown>\n\nexport type DataValueReadComponentProps<Value = unknown> = ComponentProps &\n  DataValueReadProps<Value>\n\nexport type DataValueReadWriteComponentProps<\n  Value = unknown,\n  EmptyValue = undefined | unknown,\n> = ComponentProps &\n  DataValueReadProps<Value> &\n  DataValueWriteProps<Value, EmptyValue>\n\nexport type FieldBlockProps = {\n  /**\n   * The layout of the field block\n   */\n  layout?: 'horizontal' | 'vertical'\n  /**\n   * Main label text for the field\n   */\n  label?: React.ReactNode\n  /**\n   * A more discreet text displayed beside the label\n   */\n  labelDescription?: React.ReactNode\n  /**\n   * Text showing in place of the value if no value is given\n   */\n  placeholder?: React.ReactNode\n}\n\nexport type FieldBlockWidth =\n  | false\n  | 'small'\n  | 'medium'\n  | 'large'\n  | 'stretch'\n\nexport interface UseFieldProps<\n  Value = unknown,\n  EmptyValue = undefined | unknown,\n  ErrorMessages extends DefaultErrorMessages = DefaultErrorMessages,\n> extends DataValueReadWriteComponentProps<Value, EmptyValue>,\n    AriaAttributes {\n  // - HTML Element Attributes\n  /**\n   * ID added to the actual field component, and linked to the label via for-attribute\n   */\n  id?: Identifier\n  name?: string\n  disabled?: boolean\n  readOnly?: boolean\n  autoComplete?:\n    | HTMLInputElement['autocomplete']\n    | HTMLTextAreaElement['autocomplete']\n\n  /**\n   * NB: Undocumented for now.\n   * Forwards all possible props to the underlying component.\n   */\n  htmlAttributes?: Record<string, unknown>\n\n  // - Used by useFieldProps and FieldBlock\n  info?: React.ReactNode\n  warning?: React.ReactNode\n  error?: Error | FormError\n\n  // - Validation\n  required?: boolean\n  schema?: AllJSONSchemaVersions\n  validator?: (\n    value: Value | EmptyValue,\n    errorMessages?: ErrorMessages\n  ) => Error | undefined | void | Promise<Error | undefined | void>\n  onBlurValidator?: (\n    value: Value | EmptyValue\n  ) => Error | undefined | void | Promise<Error | undefined | void>\n  validateRequired?: (\n    internal: Value,\n    {\n      emptyValue,\n      required,\n      isChanged,\n      error,\n    }: {\n      emptyValue: EmptyValue\n      required: boolean\n      isChanged: boolean\n      error: FormError | undefined\n    }\n  ) => FormError | undefined\n  /**\n   * Should error messages based on validation be shown initially (from given value-prop or source data)\n   * before the user interacts with the field?\n   * @default false\n   */\n  validateInitially?: boolean\n  /**\n   * Should error messages be shown when touching (like focusing a field and blurring) without having changed\n   * the value? So the user did not introduce a new error, but it was invalid based on validation initially.\n   */\n  validateUnchanged?: boolean\n  /**\n   * Should validation be done while writing, not just when blurring the field?\n   */\n  continuousValidation?: boolean\n  /**\n   * Provide custom error messages for the field\n   */\n  errorMessages?: ErrorMessages\n\n  // - Derivatives\n\n  /**\n   * Transforms the `value` before its displayed in the field (e.g. input).\n   * Public API. Should not be used internally.\n   */\n  transformIn?: (external: Value | unknown) => Value | unknown\n\n  /**\n   * Transforms the value before it gets forwarded to the form data object or returned as the onChange value parameter.\n   * Public API. Should not be used internally.\n   */\n  transformOut?: (internal: Value | unknown) => Value\n\n  /**\n   * Transforms the value given by `handleChange` after `fromInput` and before `updateValue` and `toEvent`. The second parameter returns the current value.\n   */\n  transformValue?: (value: Value, currentValue?: Value) => Value\n\n  /**\n   * Transforms the value before it gets returned as the `value`.\n   */\n  toInput?: (external: Value | unknown) => Value | unknown\n\n  /**\n   * Transforms the internal value before it gets returned by even callbacks such as `onChange`, `onFocus` and `onBlur`. The second parameter returns the event type: `onChange`, `onFocus`, `onBlur` or `onBlurValidator`.\n   */\n  toEvent?: (\n    internal: Value,\n    type: 'onChange' | 'onFocus' | 'onBlur' | 'onBlurValidator'\n  ) => Value\n\n  /**\n   * Transforms the value given by `handleChange` before it is used in the further process flow. Use it to destruct the value form the original event object.\n   */\n  fromInput?: (external: Value | unknown) => Value\n\n  /**\n   * Transforms the given props `value` before any other step gets entered.\n   */\n  fromExternal?: (external: Value) => Value\n}\n\nexport type FieldProps<\n  Value = unknown,\n  EmptyValue = undefined | unknown,\n  ErrorMessages extends DefaultErrorMessages = DefaultErrorMessages,\n> = UseFieldProps<Value, EmptyValue, ErrorMessages> & FieldBlockProps\n\nexport interface FieldHelpProps {\n  help?: {\n    title?: string\n    content?: string\n  }\n}\n\nexport interface ValueProps<Value>\n  extends DataValueReadComponentProps<Value> {\n  /**\n   * Field label to show above the data value.\n   */\n  label?: React.ReactNode\n\n  /**\n   * Shows the value even if it is empty.\n   */\n  showEmpty?: boolean\n\n  /**\n   * Text showing in place of the value if no value is given.\n   */\n  placeholder?: React.ReactNode\n\n  /**\n   * For showing the value inline (not as a block element)\n   */\n  inline?: boolean\n\n  /** The max-width of a value block. Defaults to large */\n  maxWidth?: 'small' | 'medium' | 'large' | 'auto'\n\n  /**\n   * Transforms the `value` before its displayed in the field (e.g. input).\n   * Public API. Should not be used internally.\n   */\n  transformIn?: (external: Value | unknown) => Value | unknown\n\n  /**\n   * Transforms the value before it gets returned as the `value`.\n   */\n  toInput?: (external: Value | unknown) => Value | unknown\n\n  /**\n   * Transforms the given props `value` before any other step gets entered.\n   */\n  fromExternal?: (external: Value) => Value\n}\n\nexport type Path = string\nexport type Identifier = string\n\nexport type SubmitState =\n  | 'pending' // Used for async operations\n  | 'complete' // Used to hide the submit indicator\n  | 'success' // Used for fields\n  | 'error' // Used when error is shown\n  | 'abort' // Used to abort the state regardless (step change)\n\n/**\n * Provide a error that shows in the FormStatus of a field.\n */\ntype EventStateObjectError = Error\n/**\n * Provide a warning that shows in the FormStatus of a field.\n */\ntype EventStateObjectWarning = React.ReactNode\n/**\n * Provide an info that shows in the FormStatus of a field.\n */\ntype EventStateObjectInfo = React.ReactNode\n\n/**\n * Provide a status that will enforce the form to stay in pending state\n */\ntype EventStateObjectStatus = 'pending'\n\n/**\n * Provide a success state that will show an indicator on the related field label\n */\ntype EventStateObjectSuccess = 'saved'\n\n/**\n * Provide an error or status messages that shows in the FormStatus of a field\n */\nexport type EventStateObjectOr = {\n  error?: EventStateObjectError\n  warning?: EventStateObjectWarning\n  info?: EventStateObjectInfo\n  pending?: EventStateObjectStatus\n}\n\nexport type EventStateObjectEitherOr =\n  | { error: EventStateObjectError }\n  | { warning: EventStateObjectWarning }\n  | { info: EventStateObjectInfo }\n  | { status: EventStateObjectStatus }\n\nexport type EventStateObject = EventStateObjectOr &\n  EventStateObjectEitherOr\n\n/**\n * Provide 'saved' to indicate the data has been saved successfully. Can not be combined with `error`.\n */\nexport type EventStateObjectWithSuccess = EventStateObjectOr & {\n  success?: EventStateObjectSuccess\n} & (EventStateObjectEitherOr | { success: EventStateObjectSuccess })\n\n/**\n * Provide an error or status messages that shows in the FormStatus of a field\n */\nexport type EventReturnWithStateObject = Error | EventStateObject\n\nexport type EventReturnWithStateObjectAndSuccess =\n  | Error\n  | EventStateObjectWithSuccess\n\nexport type OnSubmitParams = {\n  /** Will remove browser-side stored autocomplete data  */\n  resetForm: () => void\n\n  /** Will empty the whole internal data set of the form  */\n  clearData: () => void\n}\n\nexport type OnSubmit<Data = JsonObject> = (\n  data: Data,\n  { resetForm, clearData }: OnSubmitParams\n) =>\n  | EventReturnWithStateObject\n  | void\n  | Promise<EventReturnWithStateObject | void>\n\nexport type OnChange<Data = unknown> = (\n  data: Data\n) =>\n  | EventReturnWithStateObjectAndSuccess\n  | void\n  | Promise<EventReturnWithStateObjectAndSuccess | void>\n\nexport type OnChangeValue<\n  Value = unknown,\n  EmptyValue = undefined | unknown,\n> = (\n  value: Value | EmptyValue,\n  additionalArgs?: AdditionalEventArgs\n) =>\n  | EventReturnWithStateObjectAndSuccess\n  | void\n  | Promise<EventReturnWithStateObjectAndSuccess | void>\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dnb/eufemia",
-  "version": "10.30.2",
+  "version": "10.31.0",
   "description": "DNB Eufemia Design System UI Library",
   "license": "SEE LICENSE IN LICENSE FILE",
   "author": "DNB Team & Tobias Høegh",

package/shared/Eufemia.d.ts

@@ -1,2 +1,2 @@
-export declare const version = "10.30.2";
+export declare const version = "10.31.0";
 export declare function init(): void;

package/shared/Eufemia.js

@@ -1,9 +1,9 @@
-export const version = '10.30.2';
+export const version = '10.31.0';
 export function init() {
   if (typeof window !== 'undefined') {
     class Eufemia {
       get version() {
-        return '10.30.2';
+        return '10.31.0';
       }
     }
     window.Eufemia = new Eufemia();

package/shared/Eufemia.js.map

@@ -1 +1 @@
-{"version":3,"file":"Eufemia.js","names":["version","init","window","Eufemia"],"sources":["../../../src/shared/Eufemia.ts"],"sourcesContent":["export const version = '10.30.2'\n\nexport function init() {\n  if (typeof window !== 'undefined') {\n    class Eufemia {\n      get version() {\n        return '10.30.2'\n      }\n    }\n\n    window.Eufemia = new Eufemia()\n  }\n}\n"],"mappings":"AAAA,OAAO,MAAMA,OAAO,GAAG,SAAS;AAEhC,OAAO,SAASC,IAAIA,CAAA,EAAG;EACrB,IAAI,OAAOC,MAAM,KAAK,WAAW,EAAE;IACjC,MAAMC,OAAO,CAAC;MACZ,IAAIH,OAAOA,CAAA,EAAG;QACZ,OAAO,SAAS;MAClB;IACF;IAEAE,MAAM,CAACC,OAAO,GAAG,IAAIA,OAAO,CAAC,CAAC;EAChC;AACF"}
+{"version":3,"file":"Eufemia.js","names":["version","init","window","Eufemia"],"sources":["../../../src/shared/Eufemia.ts"],"sourcesContent":["export const version = '10.31.0'\n\nexport function init() {\n  if (typeof window !== 'undefined') {\n    class Eufemia {\n      get version() {\n        return '10.31.0'\n      }\n    }\n\n    window.Eufemia = new Eufemia()\n  }\n}\n"],"mappings":"AAAA,OAAO,MAAMA,OAAO,GAAG,SAAS;AAEhC,OAAO,SAASC,IAAIA,CAAA,EAAG;EACrB,IAAI,OAAOC,MAAM,KAAK,WAAW,EAAE;IACjC,MAAMC,OAAO,CAAC;MACZ,IAAIH,OAAOA,CAAA,EAAG;QACZ,OAAO,SAAS;MAClB;IACF;IAEAE,MAAM,CAACC,OAAO,GAAG,IAAIA,OAAO,CAAC,CAAC;EAChC;AACF"}

package/style/core/scopes.scss

@@ -45,7 +45,7 @@
   word-break: break-word;
 
   // Will add this to the body tag – later we can test for a version mismatch
-  --eufemia-version: '10.30.2';
+  --eufemia-version: '10.31.0';
 
   @content;
 }

package/style/dnb-ui-basis.css

@@ -251,7 +251,7 @@ body {
   /* stylelint-disable-next-line */
   -webkit-text-size-adjust: 100%;
   word-break: break-word;
-  --eufemia-version: "10.30.2";
+  --eufemia-version: "10.31.0";
 }
 .dnb-core-style *,
 .dnb-core-style ::before,

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

@@ -1 +1 @@
-@charset "UTF-8";html{font-size:100%}html:not([data-visual-test]){scroll-behavior:smooth}@supports (-webkit-touch-callout:none){@supports (font:-apple-system-body){html{font:-apple-system-body}}}html[xmlns="http://www.w3.org/1999/xhtml"] a:hover{-webkit-text-decoration:none;text-decoration:none}html[xmlns="http://www.w3.org/1999/xhtml"] .dnb-anchor--active{color:var(--color-mint-green)!important}html[xmlns="http://www.w3.org/1999/xhtml"] .dnb-anchor--contrast:not(:hover){color:var(--color-white)!important}html[xmlns="http://www.w3.org/1999/xhtml"] a.dnb-button--primary{color:var(--color-white)}html[xmlns="http://www.w3.org/1999/xhtml"] ul{list-style:initial}html[xmlns="http://www.w3.org/1999/xhtml"] p{background-color:initial;overflow:initial;text-align:inherit}html[xmlns="http://www.w3.org/1999/xhtml"] i{font-style:italic}html[xmlns="http://www.w3.org/1999/xhtml"] #column_left,html[xmlns="http://www.w3.org/1999/xhtml"] #root{width:100%}html[xmlns="http://www.w3.org/1999/xhtml"] body#dnbLayoutDefault #wrapper,html[xmlns="http://www.w3.org/1999/xhtml"] body#dnbLayoutDefaultStartPage #wrapper{max-width:60rem;width:100%}html[xmlns="http://www.w3.org/1999/xhtml"] #column_content{box-shadow:none}body{margin:0}.dnb-core-style{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;--eufemia-version:"10.30.2";color:var(--theme-color-body,var(--color-black-80,#333));font-family:var(--font-family-default);font-size:var(--font-size-small);font-style:normal;font-weight:var(--font-weight-basis);line-height:var(--line-height-basis);tab-size:4;-moz-tab-size:4;word-break:break-word}.dnb-core-style *,.dnb-core-style :after,.dnb-core-style :before{background-repeat:no-repeat;box-sizing:border-box}.dnb-core-style :after,.dnb-core-style :before{text-decoration:inherit;vertical-align:inherit}.dnb-core-style hr{height:0;overflow:visible}.dnb-core-style main{display:block}.dnb-core-style nav ol,.dnb-core-style nav ul{list-style:none}.dnb-core-style abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}.dnb-core-style b,.dnb-core-style strong{font-weight:bolder}.dnb-core-style code,.dnb-core-style kbd,.dnb-core-style pre,.dnb-core-style samp{font-family:var(--font-family-monospace)}.dnb-core-style ::selection{background-color:#b3d4fc;color:#000;text-shadow:none}.dnb-core-style audio,.dnb-core-style canvas,.dnb-core-style iframe,.dnb-core-style img,.dnb-core-style svg,.dnb-core-style video{vertical-align:middle}.dnb-core-style audio,.dnb-core-style video{display:inline-block}.dnb-core-style audio:not([controls]){display:none;height:0}.dnb-core-style img{border-style:none}.dnb-core-style svg:not([fill]){fill:currentcolor}.dnb-core-style svg:not(:root){overflow:hidden}.dnb-core-style table{border-collapse:collapse}.dnb-core-style button,.dnb-core-style input,.dnb-core-style select,.dnb-core-style textarea{font-family:inherit;font-size:inherit;line-height:inherit}.dnb-core-style button,.dnb-core-style figure,.dnb-core-style input,.dnb-core-style select{margin:0}.dnb-core-style button{overflow:visible;text-transform:none}.dnb-core-style fieldset{padding:.35rem .75rem .625rem}.dnb-core-style input{overflow:visible;word-break:normal}.dnb-core-style legend{color:inherit;display:table;max-width:100%;white-space:normal}.dnb-core-style progress{display:inline-block;vertical-align:baseline}.dnb-core-style select{text-transform:none}.dnb-core-style textarea{overflow:auto;resize:vertical}.dnb-core-style [type=checkbox],.dnb-core-style [type=radio]{padding:0}.dnb-core-style input[type=search]{-webkit-appearance:textfield;appearance:textfield;outline-offset:-2px}.dnb-core-style ::-webkit-inner-spin-button,.dnb-core-style ::-webkit-outer-spin-button{height:auto}.dnb-core-style ::input-placeholder{color:inherit;opacity:.54}.dnb-core-style ::-webkit-search-decoration{-webkit-appearance:none;appearance:none}.dnb-core-style ::-webkit-file-upload-button{background-color:transparent;border:none;font:inherit}.dnb-core-style ::-moz-focus-inner{border-style:none;padding:0}.dnb-core-style details{display:block}.dnb-core-style summary{display:list-item}.dnb-core-style canvas{display:inline-block}.dnb-core-style template{display:none}.dnb-core-style [tabindex],.dnb-core-style a,.dnb-core-style area,.dnb-core-style button,.dnb-core-style input,.dnb-core-style label,.dnb-core-style select,.dnb-core-style summary,.dnb-core-style textarea{touch-action:manipulation}.dnb-core-style [hidden]{display:none}.dnb-core-style [aria-busy=true]{cursor:progress}.dnb-core-style [aria-controls]:not(input){cursor:pointer}.dnb-core-style [aria-disabled=true],.dnb-core-style [disabled]{cursor:not-allowed}.dnb-core-style [aria-hidden=false][hidden]:not(:focus){clip:rect(0,0,0,0);display:inherit;position:absolute}@media print{.dnb-core-style{background-color:#fff;color:#000}}.dnb-core-style .eufemia-theme{color:var(--theme-color-body,var(--color-black-80,#333));font-family:var(--font-family-default);font-size:var(--font-size-small);font-style:normal;font-weight:var(--font-weight-basis);line-height:var(--line-height-basis)}.dnb-no-focus,.dnb-tab-focus,.dnb-tab-focus:focus{outline:none}html[data-whatinput=keyboard] .dnb-tab-focus:focus{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-mouse-focus,.dnb-mouse-focus:focus{outline:none}html[data-whatinput=mouse] .dnb-mouse-focus:focus{box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-focus-ring,html[data-whatinput=mouse] .dnb-mouse-focus:focus{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent}.dnb-focus-ring{box-shadow:0 0 0 var(--border-width) var(--border-color)!important}.dnb-scrollbar-appearance{-webkit-overflow-scrolling:touch;-ms-overflow-style:auto;scrollbar-color:var(--scrollbar-thumb-color,#888) transparent}@supports not (scrollbar-color:auto){.dnb-scrollbar-appearance::-webkit-scrollbar{background-color:var(--scrollbar-track-color,#eee);border-radius:var(--scrollbar-thumb-width,.5rem)}.dnb-scrollbar-appearance::-webkit-scrollbar:vertical{width:var(--scrollbar-track-width,.5rem)}.dnb-scrollbar-appearance::-webkit-scrollbar:horizontal{height:var(--scrollbar-track-width,.5rem)}.dnb-scrollbar-appearance::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb-color,#888);border-radius:var(--scrollbar-thumb-width,.5rem)}.dnb-scrollbar-appearance::-webkit-scrollbar-thumb:hover{background-color:var(--scrollbar-thumb-hover-color,#666)}}.dnb-skip-link{opacity:.3;position:absolute;top:-100vh;transition:opacity .3s ease-out;z-index:0}.dnb-skip-link--active,.dnb-skip-link:focus{background-color:transparent;border:none;border-radius:0;box-shadow:none;color:var(--skip-link-color);font-size:var(--font-size-basis);left:40%;margin:0;outline:none;padding:.5rem 1rem;position:fixed;text-align:center;-webkit-text-decoration:none;text-decoration:none;top:5%;user-select:none;-webkit-user-select:none;white-space:nowrap;z-index:9999}.dnb-skip-link--active:after,.dnb-skip-link:focus:after{background-color:hsla(0,0%,100%,.85);box-shadow:150vw 150vh 0 0 hsla(0,0%,100%,.85);content:"";height:150vh;left:-200vw;position:absolute;top:-200vh;width:150vw;z-index:-2}.dnb-skip-link--active:before,.dnb-skip-link:focus:before{background-color:var(--skip-link-background);border-radius:1.5rem;content:"";height:100%;left:0;outline:none;position:absolute;top:0;width:100%;z-index:-1}html[data-whatinput=mouse] .dnb-skip-link--active:before,html[data-whatinput=mouse] .dnb-skip-link:focus:before{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-skip-link--active:hover:before,.dnb-skip-link:focus:hover:before{background-color:var(--skip-link-background--hover)}.dnb-skip-link--active:active:before,.dnb-skip-link:focus:active:before{background-color:var(--skip-link-background--active)}.dnb-skip-link--active:focus:not(:active):before,.dnb-skip-link:focus:focus:not(:active):before{outline:none}html[data-whatinput=keyboard] .dnb-skip-link--active:focus:not(:active):before,html[data-whatinput=keyboard] .dnb-skip-link:focus:focus:not(:active):before{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-skip-link--active:focus,.dnb-skip-link:focus:focus{opacity:1}.dnb-skip-link--active:hover,.dnb-skip-link:focus:hover{background-color:transparent;box-shadow:none;color:var(--skip-link-color--hover)}.dnb-skip-link--active:focus:not(:hover):not(:active),.dnb-skip-link:focus:focus:not(:hover):not(:active){background-color:transparent;box-shadow:none;color:var(--skip-link-color)}.dnb-skip-link--active:active,.dnb-skip-link:focus:active{background-color:transparent;color:var(--skip-link-color--active)}html[data-whatintent=touch] .dnb-skip-link{display:none}.dnb-alignment-helper,.dnb-alignment-helper:before{speak:none;display:inline-block;font-size:var(--font-size-small);height:0;width:0}.dnb-alignment-helper:before{content:"‌"}.dnb-drop-shadow{box-shadow:var(--shadow-default)}.dnb-sr-only{-webkit-touch-callout:none!important;border:0!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;margin:0!important;max-height:1px!important;max-width:1px!important;overflow:hidden!important;padding:0!important;pointer-events:none!important;position:absolute!important;-webkit-user-select:none!important;user-select:none!important;white-space:nowrap!important}.dnb-suffix{font-size:var(--font-size-basis);line-height:var(--line-height-basis);padding-left:.5rem;word-break:normal}
+@charset "UTF-8";html{font-size:100%}html:not([data-visual-test]){scroll-behavior:smooth}@supports (-webkit-touch-callout:none){@supports (font:-apple-system-body){html{font:-apple-system-body}}}html[xmlns="http://www.w3.org/1999/xhtml"] a:hover{-webkit-text-decoration:none;text-decoration:none}html[xmlns="http://www.w3.org/1999/xhtml"] .dnb-anchor--active{color:var(--color-mint-green)!important}html[xmlns="http://www.w3.org/1999/xhtml"] .dnb-anchor--contrast:not(:hover){color:var(--color-white)!important}html[xmlns="http://www.w3.org/1999/xhtml"] a.dnb-button--primary{color:var(--color-white)}html[xmlns="http://www.w3.org/1999/xhtml"] ul{list-style:initial}html[xmlns="http://www.w3.org/1999/xhtml"] p{background-color:initial;overflow:initial;text-align:inherit}html[xmlns="http://www.w3.org/1999/xhtml"] i{font-style:italic}html[xmlns="http://www.w3.org/1999/xhtml"] #column_left,html[xmlns="http://www.w3.org/1999/xhtml"] #root{width:100%}html[xmlns="http://www.w3.org/1999/xhtml"] body#dnbLayoutDefault #wrapper,html[xmlns="http://www.w3.org/1999/xhtml"] body#dnbLayoutDefaultStartPage #wrapper{max-width:60rem;width:100%}html[xmlns="http://www.w3.org/1999/xhtml"] #column_content{box-shadow:none}body{margin:0}.dnb-core-style{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;--eufemia-version:"10.31.0";color:var(--theme-color-body,var(--color-black-80,#333));font-family:var(--font-family-default);font-size:var(--font-size-small);font-style:normal;font-weight:var(--font-weight-basis);line-height:var(--line-height-basis);tab-size:4;-moz-tab-size:4;word-break:break-word}.dnb-core-style *,.dnb-core-style :after,.dnb-core-style :before{background-repeat:no-repeat;box-sizing:border-box}.dnb-core-style :after,.dnb-core-style :before{text-decoration:inherit;vertical-align:inherit}.dnb-core-style hr{height:0;overflow:visible}.dnb-core-style main{display:block}.dnb-core-style nav ol,.dnb-core-style nav ul{list-style:none}.dnb-core-style abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}.dnb-core-style b,.dnb-core-style strong{font-weight:bolder}.dnb-core-style code,.dnb-core-style kbd,.dnb-core-style pre,.dnb-core-style samp{font-family:var(--font-family-monospace)}.dnb-core-style ::selection{background-color:#b3d4fc;color:#000;text-shadow:none}.dnb-core-style audio,.dnb-core-style canvas,.dnb-core-style iframe,.dnb-core-style img,.dnb-core-style svg,.dnb-core-style video{vertical-align:middle}.dnb-core-style audio,.dnb-core-style video{display:inline-block}.dnb-core-style audio:not([controls]){display:none;height:0}.dnb-core-style img{border-style:none}.dnb-core-style svg:not([fill]){fill:currentcolor}.dnb-core-style svg:not(:root){overflow:hidden}.dnb-core-style table{border-collapse:collapse}.dnb-core-style button,.dnb-core-style input,.dnb-core-style select,.dnb-core-style textarea{font-family:inherit;font-size:inherit;line-height:inherit}.dnb-core-style button,.dnb-core-style figure,.dnb-core-style input,.dnb-core-style select{margin:0}.dnb-core-style button{overflow:visible;text-transform:none}.dnb-core-style fieldset{padding:.35rem .75rem .625rem}.dnb-core-style input{overflow:visible;word-break:normal}.dnb-core-style legend{color:inherit;display:table;max-width:100%;white-space:normal}.dnb-core-style progress{display:inline-block;vertical-align:baseline}.dnb-core-style select{text-transform:none}.dnb-core-style textarea{overflow:auto;resize:vertical}.dnb-core-style [type=checkbox],.dnb-core-style [type=radio]{padding:0}.dnb-core-style input[type=search]{-webkit-appearance:textfield;appearance:textfield;outline-offset:-2px}.dnb-core-style ::-webkit-inner-spin-button,.dnb-core-style ::-webkit-outer-spin-button{height:auto}.dnb-core-style ::input-placeholder{color:inherit;opacity:.54}.dnb-core-style ::-webkit-search-decoration{-webkit-appearance:none;appearance:none}.dnb-core-style ::-webkit-file-upload-button{background-color:transparent;border:none;font:inherit}.dnb-core-style ::-moz-focus-inner{border-style:none;padding:0}.dnb-core-style details{display:block}.dnb-core-style summary{display:list-item}.dnb-core-style canvas{display:inline-block}.dnb-core-style template{display:none}.dnb-core-style [tabindex],.dnb-core-style a,.dnb-core-style area,.dnb-core-style button,.dnb-core-style input,.dnb-core-style label,.dnb-core-style select,.dnb-core-style summary,.dnb-core-style textarea{touch-action:manipulation}.dnb-core-style [hidden]{display:none}.dnb-core-style [aria-busy=true]{cursor:progress}.dnb-core-style [aria-controls]:not(input){cursor:pointer}.dnb-core-style [aria-disabled=true],.dnb-core-style [disabled]{cursor:not-allowed}.dnb-core-style [aria-hidden=false][hidden]:not(:focus){clip:rect(0,0,0,0);display:inherit;position:absolute}@media print{.dnb-core-style{background-color:#fff;color:#000}}.dnb-core-style .eufemia-theme{color:var(--theme-color-body,var(--color-black-80,#333));font-family:var(--font-family-default);font-size:var(--font-size-small);font-style:normal;font-weight:var(--font-weight-basis);line-height:var(--line-height-basis)}.dnb-no-focus,.dnb-tab-focus,.dnb-tab-focus:focus{outline:none}html[data-whatinput=keyboard] .dnb-tab-focus:focus{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-mouse-focus,.dnb-mouse-focus:focus{outline:none}html[data-whatinput=mouse] .dnb-mouse-focus:focus{box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-focus-ring,html[data-whatinput=mouse] .dnb-mouse-focus:focus{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent}.dnb-focus-ring{box-shadow:0 0 0 var(--border-width) var(--border-color)!important}.dnb-scrollbar-appearance{-webkit-overflow-scrolling:touch;-ms-overflow-style:auto;scrollbar-color:var(--scrollbar-thumb-color,#888) transparent}@supports not (scrollbar-color:auto){.dnb-scrollbar-appearance::-webkit-scrollbar{background-color:var(--scrollbar-track-color,#eee);border-radius:var(--scrollbar-thumb-width,.5rem)}.dnb-scrollbar-appearance::-webkit-scrollbar:vertical{width:var(--scrollbar-track-width,.5rem)}.dnb-scrollbar-appearance::-webkit-scrollbar:horizontal{height:var(--scrollbar-track-width,.5rem)}.dnb-scrollbar-appearance::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb-color,#888);border-radius:var(--scrollbar-thumb-width,.5rem)}.dnb-scrollbar-appearance::-webkit-scrollbar-thumb:hover{background-color:var(--scrollbar-thumb-hover-color,#666)}}.dnb-skip-link{opacity:.3;position:absolute;top:-100vh;transition:opacity .3s ease-out;z-index:0}.dnb-skip-link--active,.dnb-skip-link:focus{background-color:transparent;border:none;border-radius:0;box-shadow:none;color:var(--skip-link-color);font-size:var(--font-size-basis);left:40%;margin:0;outline:none;padding:.5rem 1rem;position:fixed;text-align:center;-webkit-text-decoration:none;text-decoration:none;top:5%;user-select:none;-webkit-user-select:none;white-space:nowrap;z-index:9999}.dnb-skip-link--active:after,.dnb-skip-link:focus:after{background-color:hsla(0,0%,100%,.85);box-shadow:150vw 150vh 0 0 hsla(0,0%,100%,.85);content:"";height:150vh;left:-200vw;position:absolute;top:-200vh;width:150vw;z-index:-2}.dnb-skip-link--active:before,.dnb-skip-link:focus:before{background-color:var(--skip-link-background);border-radius:1.5rem;content:"";height:100%;left:0;outline:none;position:absolute;top:0;width:100%;z-index:-1}html[data-whatinput=mouse] .dnb-skip-link--active:before,html[data-whatinput=mouse] .dnb-skip-link:focus:before{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-skip-link--active:hover:before,.dnb-skip-link:focus:hover:before{background-color:var(--skip-link-background--hover)}.dnb-skip-link--active:active:before,.dnb-skip-link:focus:active:before{background-color:var(--skip-link-background--active)}.dnb-skip-link--active:focus:not(:active):before,.dnb-skip-link:focus:focus:not(:active):before{outline:none}html[data-whatinput=keyboard] .dnb-skip-link--active:focus:not(:active):before,html[data-whatinput=keyboard] .dnb-skip-link:focus:focus:not(:active):before{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-skip-link--active:focus,.dnb-skip-link:focus:focus{opacity:1}.dnb-skip-link--active:hover,.dnb-skip-link:focus:hover{background-color:transparent;box-shadow:none;color:var(--skip-link-color--hover)}.dnb-skip-link--active:focus:not(:hover):not(:active),.dnb-skip-link:focus:focus:not(:hover):not(:active){background-color:transparent;box-shadow:none;color:var(--skip-link-color)}.dnb-skip-link--active:active,.dnb-skip-link:focus:active{background-color:transparent;color:var(--skip-link-color--active)}html[data-whatintent=touch] .dnb-skip-link{display:none}.dnb-alignment-helper,.dnb-alignment-helper:before{speak:none;display:inline-block;font-size:var(--font-size-small);height:0;width:0}.dnb-alignment-helper:before{content:"‌"}.dnb-drop-shadow{box-shadow:var(--shadow-default)}.dnb-sr-only{-webkit-touch-callout:none!important;border:0!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;margin:0!important;max-height:1px!important;max-width:1px!important;overflow:hidden!important;padding:0!important;pointer-events:none!important;position:absolute!important;-webkit-user-select:none!important;user-select:none!important;white-space:nowrap!important}.dnb-suffix{font-size:var(--font-size-basis);line-height:var(--line-height-basis);padding-left:.5rem;word-break:normal}

package/style/dnb-ui-body.css

@@ -277,7 +277,7 @@ body {
   /* stylelint-disable-next-line */
   -webkit-text-size-adjust: 100%;
   word-break: break-word;
-  --eufemia-version: "10.30.2";
+  --eufemia-version: "10.31.0";
 }
 body *,
 body ::before,

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

@@ -1 +1 @@
-html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;cursor:default;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:var(--line-height-basis);-moz-tab-size:4;tab-size:4;word-break:break-word}body{margin:0}html{font-size:100%}html:not([data-visual-test]){scroll-behavior:smooth}@supports (-webkit-touch-callout:none){@supports (font:-apple-system-body){html{font:-apple-system-body}}}html[xmlns="http://www.w3.org/1999/xhtml"] a:hover{-webkit-text-decoration:none;text-decoration:none}html[xmlns="http://www.w3.org/1999/xhtml"] .dnb-anchor--active{color:var(--color-mint-green)!important}html[xmlns="http://www.w3.org/1999/xhtml"] .dnb-anchor--contrast:not(:hover){color:var(--color-white)!important}html[xmlns="http://www.w3.org/1999/xhtml"] a.dnb-button--primary{color:var(--color-white)}html[xmlns="http://www.w3.org/1999/xhtml"] ul{list-style:initial}html[xmlns="http://www.w3.org/1999/xhtml"] p{background-color:initial;overflow:initial;text-align:inherit}html[xmlns="http://www.w3.org/1999/xhtml"] i{font-style:italic}html[xmlns="http://www.w3.org/1999/xhtml"] #column_left,html[xmlns="http://www.w3.org/1999/xhtml"] #root{width:100%}html[xmlns="http://www.w3.org/1999/xhtml"] body#dnbLayoutDefault #wrapper,html[xmlns="http://www.w3.org/1999/xhtml"] body#dnbLayoutDefaultStartPage #wrapper{max-width:60rem;width:100%}html[xmlns="http://www.w3.org/1999/xhtml"] #column_content{box-shadow:none}body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;--eufemia-version:"10.30.2";color:var(--theme-color-body,var(--color-black-80,#333));font-family:var(--font-family-default);font-size:var(--font-size-small);font-style:normal;font-weight:var(--font-weight-basis);line-height:var(--line-height-basis);tab-size:4;-moz-tab-size:4;word-break:break-word}body *,body :after,body :before{background-repeat:no-repeat;box-sizing:border-box}body :after,body :before{text-decoration:inherit;vertical-align:inherit}body hr{height:0;overflow:visible}body main{display:block}body nav ol,body nav ul{list-style:none}body abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}body b,body strong{font-weight:bolder}body code,body kbd,body pre,body samp{font-family:var(--font-family-monospace)}body ::selection{background-color:#b3d4fc;color:#000;text-shadow:none}body audio,body canvas,body iframe,body img,body svg,body video{vertical-align:middle}body audio,body video{display:inline-block}body audio:not([controls]){display:none;height:0}body img{border-style:none}body svg:not([fill]){fill:currentcolor}body svg:not(:root){overflow:hidden}body table{border-collapse:collapse}body button,body input,body select,body textarea{font-family:inherit;font-size:inherit;line-height:inherit}body button,body figure,body input,body select{margin:0}body button{overflow:visible;text-transform:none}body fieldset{padding:.35rem .75rem .625rem}body input{overflow:visible;word-break:normal}body legend{color:inherit;display:table;max-width:100%;white-space:normal}body progress{display:inline-block;vertical-align:baseline}body select{text-transform:none}body textarea{overflow:auto;resize:vertical}body [type=checkbox],body [type=radio]{padding:0}body input[type=search]{-webkit-appearance:textfield;appearance:textfield;outline-offset:-2px}body ::-webkit-inner-spin-button,body ::-webkit-outer-spin-button{height:auto}body ::input-placeholder{color:inherit;opacity:.54}body ::-webkit-search-decoration{-webkit-appearance:none;appearance:none}body ::-webkit-file-upload-button{background-color:transparent;border:none;font:inherit}body ::-moz-focus-inner{border-style:none;padding:0}body details{display:block}body summary{display:list-item}body canvas{display:inline-block}body template{display:none}body [tabindex],body a,body area,body button,body input,body label,body select,body summary,body textarea{touch-action:manipulation}body [hidden]{display:none}body [aria-busy=true]{cursor:progress}body [aria-controls]:not(input){cursor:pointer}body [aria-disabled=true],body [disabled]{cursor:not-allowed}body [aria-hidden=false][hidden]:not(:focus){clip:rect(0,0,0,0);display:inherit;position:absolute}@media print{body{background-color:#fff;color:#000}}body .eufemia-theme{color:var(--theme-color-body,var(--color-black-80,#333));font-family:var(--font-family-default);font-size:var(--font-size-small);font-style:normal;font-weight:var(--font-weight-basis);line-height:var(--line-height-basis)}
+html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;cursor:default;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:var(--line-height-basis);-moz-tab-size:4;tab-size:4;word-break:break-word}body{margin:0}html{font-size:100%}html:not([data-visual-test]){scroll-behavior:smooth}@supports (-webkit-touch-callout:none){@supports (font:-apple-system-body){html{font:-apple-system-body}}}html[xmlns="http://www.w3.org/1999/xhtml"] a:hover{-webkit-text-decoration:none;text-decoration:none}html[xmlns="http://www.w3.org/1999/xhtml"] .dnb-anchor--active{color:var(--color-mint-green)!important}html[xmlns="http://www.w3.org/1999/xhtml"] .dnb-anchor--contrast:not(:hover){color:var(--color-white)!important}html[xmlns="http://www.w3.org/1999/xhtml"] a.dnb-button--primary{color:var(--color-white)}html[xmlns="http://www.w3.org/1999/xhtml"] ul{list-style:initial}html[xmlns="http://www.w3.org/1999/xhtml"] p{background-color:initial;overflow:initial;text-align:inherit}html[xmlns="http://www.w3.org/1999/xhtml"] i{font-style:italic}html[xmlns="http://www.w3.org/1999/xhtml"] #column_left,html[xmlns="http://www.w3.org/1999/xhtml"] #root{width:100%}html[xmlns="http://www.w3.org/1999/xhtml"] body#dnbLayoutDefault #wrapper,html[xmlns="http://www.w3.org/1999/xhtml"] body#dnbLayoutDefaultStartPage #wrapper{max-width:60rem;width:100%}html[xmlns="http://www.w3.org/1999/xhtml"] #column_content{box-shadow:none}body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;--eufemia-version:"10.31.0";color:var(--theme-color-body,var(--color-black-80,#333));font-family:var(--font-family-default);font-size:var(--font-size-small);font-style:normal;font-weight:var(--font-weight-basis);line-height:var(--line-height-basis);tab-size:4;-moz-tab-size:4;word-break:break-word}body *,body :after,body :before{background-repeat:no-repeat;box-sizing:border-box}body :after,body :before{text-decoration:inherit;vertical-align:inherit}body hr{height:0;overflow:visible}body main{display:block}body nav ol,body nav ul{list-style:none}body abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}body b,body strong{font-weight:bolder}body code,body kbd,body pre,body samp{font-family:var(--font-family-monospace)}body ::selection{background-color:#b3d4fc;color:#000;text-shadow:none}body audio,body canvas,body iframe,body img,body svg,body video{vertical-align:middle}body audio,body video{display:inline-block}body audio:not([controls]){display:none;height:0}body img{border-style:none}body svg:not([fill]){fill:currentcolor}body svg:not(:root){overflow:hidden}body table{border-collapse:collapse}body button,body input,body select,body textarea{font-family:inherit;font-size:inherit;line-height:inherit}body button,body figure,body input,body select{margin:0}body button{overflow:visible;text-transform:none}body fieldset{padding:.35rem .75rem .625rem}body input{overflow:visible;word-break:normal}body legend{color:inherit;display:table;max-width:100%;white-space:normal}body progress{display:inline-block;vertical-align:baseline}body select{text-transform:none}body textarea{overflow:auto;resize:vertical}body [type=checkbox],body [type=radio]{padding:0}body input[type=search]{-webkit-appearance:textfield;appearance:textfield;outline-offset:-2px}body ::-webkit-inner-spin-button,body ::-webkit-outer-spin-button{height:auto}body ::input-placeholder{color:inherit;opacity:.54}body ::-webkit-search-decoration{-webkit-appearance:none;appearance:none}body ::-webkit-file-upload-button{background-color:transparent;border:none;font:inherit}body ::-moz-focus-inner{border-style:none;padding:0}body details{display:block}body summary{display:list-item}body canvas{display:inline-block}body template{display:none}body [tabindex],body a,body area,body button,body input,body label,body select,body summary,body textarea{touch-action:manipulation}body [hidden]{display:none}body [aria-busy=true]{cursor:progress}body [aria-controls]:not(input){cursor:pointer}body [aria-disabled=true],body [disabled]{cursor:not-allowed}body [aria-hidden=false][hidden]:not(:focus){clip:rect(0,0,0,0);display:inherit;position:absolute}@media print{body{background-color:#fff;color:#000}}body .eufemia-theme{color:var(--theme-color-body,var(--color-black-80,#333));font-family:var(--font-family-default);font-size:var(--font-size-small);font-style:normal;font-weight:var(--font-weight-basis);line-height:var(--line-height-basis)}

package/style/dnb-ui-components.css

@@ -2533,11 +2533,18 @@ button.dnb-button::-moz-focus-inner {
 }
 
 .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;
@@ -2547,6 +2554,7 @@ button.dnb-button::-moz-focus-inner {
   --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;
@@ -2560,6 +2568,15 @@ button.dnb-button::-moz-focus-inner {
   --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;
@@ -2613,12 +2630,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;
@@ -2702,7 +2719,7 @@ html[data-whatinput=keyboard] .dnb-checkbox__focus {
   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 {
+.dnb-checkbox__input:not([disabled]):not(:checked):not([data-checked=true]) ~ .dnb-checkbox__gfx {
   opacity: 0;
   transform: scale(0.8);
   color: var(--checkbox-color-gfx-off);
@@ -2710,6 +2727,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);
@@ -2722,6 +2766,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);
@@ -2729,44 +2779,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:not([disabled]):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);
@@ -2775,7 +2835,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;
 }
@@ -2785,6 +2845,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);
 }
@@ -2794,6 +2871,9 @@ 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);
+}
 
 /*
 * DatePicker component