@dnb/eufemia 10.14.0 → 10.15.1

package/es/components/button/style/themes/dnb-button-theme-ui.css

@@ -50,34 +50,12 @@
 .dnb-skeleton .dnb-button--tertiary .dnb-button__text::after {
   content: none;
 }
-html:not([data-whatintent=touch]) .dnb-button--tertiary.focus-visible[disabled] {
-  cursor: not-allowed;
-}
 html:not([data-whatintent=touch]) .dnb-button--tertiary:focus-visible[disabled] {
   cursor: not-allowed;
 }
-html:not([data-whatintent=touch]) .dnb-button--tertiary.focus-visible:not([disabled]) {
-  outline: none;
-}
 html:not([data-whatintent=touch]) .dnb-button--tertiary:focus-visible:not([disabled]) {
   outline: none;
 }
-html:not([data-whatintent=touch]) .dnb-button--tertiary.focus-visible:not([disabled])::before {
-  content: "";
-  position: absolute;
-  z-index: 1;
-  top: 0;
-  left: var(--button-tertiary-focus-left);
-  bottom: 0;
-  right: var(--button-tertiary-focus-right);
-  height: inherit;
-  border-radius: inherit;
-  outline: none;
-  --border-color: var(--focus-ring-color);
-  --border-width: var(--focus-ring-width);
-  box-shadow: 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
-}
 html:not([data-whatintent=touch]) .dnb-button--tertiary:focus-visible:not([disabled])::before {
   content: "";
   position: absolute;
@@ -94,9 +72,6 @@ html:not([data-whatintent=touch]) .dnb-button--tertiary:focus-visible:not([disab
   box-shadow: 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
 }
-html:not([data-whatintent=touch]) .dnb-button--tertiary.focus-visible:not([disabled]) .dnb-button__text::after {
-  visibility: hidden;
-}
 html:not([data-whatintent=touch]) .dnb-button--tertiary:focus-visible:not([disabled]) .dnb-button__text::after {
   visibility: hidden;
 }

package/es/components/button/style/themes/dnb-button-theme-ui.min.css

@@ -1,4 +1,4 @@
-.dnb-button--tertiary{--button-tertiary-focus-left:-0.5rem;--button-tertiary-focus-right:-0.5rem;--button-tertiary-focus-overflow--icon-top:-0.5rem;--button-tertiary-underline-overflow:0;--button-tertiary-underline-overflow--icon:-0.5rem}.dnb-button--tertiary .dnb-button__text{position:relative}.dnb-button--tertiary .dnb-button__text:after{background-color:currentcolor;border-radius:.0475rem;bottom:0;bottom:-.0625rem;color:var(--color-sea-green);color:transparent;content:"";height:.095rem;left:0;left:var(--button-tertiary-underline-overflow);position:absolute;right:0;right:var(--button-tertiary-underline-overflow);transition:color .25s ease-in-out;width:auto;z-index:1}[data-visual-test-wrapper] .dnb-button--tertiary .dnb-button__text:after{transition:none}.dnb-skeleton .dnb-button--tertiary .dnb-button__text:after{content:none}html:not([data-whatintent=touch]) .dnb-button--tertiary.focus-visible[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--tertiary:focus-visible[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--tertiary.focus-visible:not([disabled]){outline:none}html:not([data-whatintent=touch]) .dnb-button--tertiary:focus-visible:not([disabled]){outline:none}html:not([data-whatintent=touch]) .dnb-button--tertiary.focus-visible:not([disabled]):before{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;border-radius:inherit;bottom:0;box-shadow:0 0 0 var(--border-width) var(--border-color);content:"";height:inherit;left:var(--button-tertiary-focus-left);outline:none;position:absolute;right:var(--button-tertiary-focus-right);top:0;z-index:1}html:not([data-whatintent=touch]) .dnb-button--tertiary:focus-visible:not([disabled]):before{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;border-radius:inherit;bottom:0;box-shadow:0 0 0 var(--border-width) var(--border-color);content:"";height:inherit;left:var(--button-tertiary-focus-left);outline:none;position:absolute;right:var(--button-tertiary-focus-right);top:0;z-index:1}html:not([data-whatintent=touch]) .dnb-button--tertiary.focus-visible:not([disabled]) .dnb-button__text:after{visibility:hidden}html:not([data-whatintent=touch]) .dnb-button--tertiary:focus-visible:not([disabled]) .dnb-button__text:after{visibility:hidden}html:not([data-whatintent=touch]) .dnb-button--tertiary:hover:not([disabled]) .dnb-button__text:after{visibility:visible}.dnb-button--tertiary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]){outline:initial}html[data-whatinput=keyboard] .dnb-button--tertiary:active:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]){box-shadow:none}html[data-whatintent=touch] .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after,html[data-whatintent=touch] html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after{opacity:1;transition:none;visibility:visible}html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after,html:not([data-whatintent=touch]) html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after{visibility:hidden}.dnb-button--tertiary.dnb-button--has-text{padding-left:0;padding-right:0}.dnb-button--tertiary.dnb-button--has-text .dnb-button__icon{align-self:flex-start;margin-top:calc(var(--button-height)/2 - .5rem)}.dnb-button--tertiary.dnb-button--has-text .dnb-button__icon.dnb-icon--medium{margin-top:calc(var(--button-height)/2 - .75rem)}.dnb-button--tertiary.dnb-button--has-text .dnb-button__icon.dnb-icon--large{margin-top:calc(var(--button-height)/2 - 1rem)}.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-large .dnb-button__icon{margin-top:calc(var(--button-height--large)/2 - .5rem)}.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-medium .dnb-button__icon{margin-top:calc(var(--button-height--medium)/2 - .5rem)}.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-small .dnb-button__icon{margin-top:calc(var(--button-height--small)/2 - .5rem)}.dnb-button--tertiary.dnb-button--icon-position-top{--button-tertiary-focus-left:var(
+.dnb-button--tertiary{--button-tertiary-focus-left:-0.5rem;--button-tertiary-focus-right:-0.5rem;--button-tertiary-focus-overflow--icon-top:-0.5rem;--button-tertiary-underline-overflow:0;--button-tertiary-underline-overflow--icon:-0.5rem}.dnb-button--tertiary .dnb-button__text{position:relative}.dnb-button--tertiary .dnb-button__text:after{background-color:currentcolor;border-radius:.0475rem;bottom:0;bottom:-.0625rem;color:var(--color-sea-green);color:transparent;content:"";height:.095rem;left:0;left:var(--button-tertiary-underline-overflow);position:absolute;right:0;right:var(--button-tertiary-underline-overflow);transition:color .25s ease-in-out;width:auto;z-index:1}[data-visual-test-wrapper] .dnb-button--tertiary .dnb-button__text:after{transition:none}.dnb-skeleton .dnb-button--tertiary .dnb-button__text:after{content:none}html:not([data-whatintent=touch]) .dnb-button--tertiary:focus-visible[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--tertiary:focus-visible:not([disabled]){outline:none}html:not([data-whatintent=touch]) .dnb-button--tertiary:focus-visible:not([disabled]):before{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;border-radius:inherit;bottom:0;box-shadow:0 0 0 var(--border-width) var(--border-color);content:"";height:inherit;left:var(--button-tertiary-focus-left);outline:none;position:absolute;right:var(--button-tertiary-focus-right);top:0;z-index:1}html:not([data-whatintent=touch]) .dnb-button--tertiary:focus-visible:not([disabled]) .dnb-button__text:after{visibility:hidden}html:not([data-whatintent=touch]) .dnb-button--tertiary:hover:not([disabled]) .dnb-button__text:after{visibility:visible}.dnb-button--tertiary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]){outline:initial}html[data-whatinput=keyboard] .dnb-button--tertiary:active:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]){box-shadow:none}html[data-whatintent=touch] .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after,html[data-whatintent=touch] html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after{opacity:1;transition:none;visibility:visible}html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after,html:not([data-whatintent=touch]) html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after{visibility:hidden}.dnb-button--tertiary.dnb-button--has-text{padding-left:0;padding-right:0}.dnb-button--tertiary.dnb-button--has-text .dnb-button__icon{align-self:flex-start;margin-top:calc(var(--button-height)/2 - .5rem)}.dnb-button--tertiary.dnb-button--has-text .dnb-button__icon.dnb-icon--medium{margin-top:calc(var(--button-height)/2 - .75rem)}.dnb-button--tertiary.dnb-button--has-text .dnb-button__icon.dnb-icon--large{margin-top:calc(var(--button-height)/2 - 1rem)}.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-large .dnb-button__icon{margin-top:calc(var(--button-height--large)/2 - .5rem)}.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-medium .dnb-button__icon{margin-top:calc(var(--button-height--medium)/2 - .5rem)}.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-small .dnb-button__icon{margin-top:calc(var(--button-height--small)/2 - .5rem)}.dnb-button--tertiary.dnb-button--icon-position-top{--button-tertiary-focus-left:var(
     --button-tertiary-focus-overflow--icon-top
   );--button-tertiary-focus-right:var(
     --button-tertiary-focus-overflow--icon-top

package/es/components/button/style/themes/dnb-button-theme-ui.scss

@@ -8,7 +8,7 @@
 
 // Because the tertiary button has so much code,
 // we slice the shareable parts out in a separate file
-@import '../dnb-button--tertiary.scss';
+@import '../button--tertiary.scss';
 
 .dnb-button {
   &--primary {

package/es/components/card/style/dnb-card.css

@@ -1,3 +1,6 @@
+/*
+ * Utilities
+ */
 .dnb-card {
   --background-color: var(--color-white);
   --border-color: var(--color-lavender);
@@ -8,6 +11,13 @@
   border: var(--border-width) solid var(--border-color);
   border-radius: var(--border-radius);
 }
+@media screen and (max-width: 40em) {
+  .dnb-card {
+    --border-radius: 0;
+    border-left: none;
+    border-right: none;
+  }
+}
 .dnb-card__heading {
   font-size: var(--font-size-basis);
   font-weight: var(--font-weight-medium);

package/es/components/card/style/dnb-card.min.css

@@ -1 +1 @@
-.dnb-card{--background-color:var(--color-white);--border-color:var(--color-lavender);--border-width:0.25rem;--border-radius:0.75rem;background-color:var(--background-color);border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius);padding:var(--spacing-medium) var(--spacing-medium) var(--spacing-large) var(--spacing-medium)}.dnb-card__heading{font-size:var(--font-size-basis);font-weight:var(--font-weight-medium)}.dnb-card+.dnb-card__heading{margin-top:var(--spacing-small)}
+.dnb-card{--background-color:var(--color-white);--border-color:var(--color-lavender);--border-width:0.25rem;--border-radius:0.75rem;background-color:var(--background-color);border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius);padding:var(--spacing-medium) var(--spacing-medium) var(--spacing-large) var(--spacing-medium)}@media screen and (max-width:40em){.dnb-card{--border-radius:0;border-left:none;border-right:none}}.dnb-card__heading{font-size:var(--font-size-basis);font-weight:var(--font-weight-medium)}.dnb-card+.dnb-card__heading{margin-top:var(--spacing-small)}

package/es/components/card/style/dnb-card.scss

@@ -1,3 +1,5 @@
+@import '../../../style/core/utilities.scss';
+
 .dnb-card {
   --background-color: var(--color-white);
   --border-color: var(--color-lavender);
@@ -11,6 +13,12 @@
   border: var(--border-width) solid var(--border-color);
   border-radius: var(--border-radius);
 
+  @include allBelow(small) {
+    --border-radius: 0;
+    border-left: none;
+    border-right: none;
+  }
+
   &__heading {
     font-size: var(--font-size-basis);
     font-weight: var(--font-weight-medium);

package/es/components/checkbox/Checkbox.js

@@ -66,12 +66,17 @@ export default class Checkbox extends React.PureComponent {
         this._refInput.current.focus();
       }
     });
-    this._refInput = props.innerRef || React.createRef();
+    this._refInput = React.createRef();
     this._id = props.id || makeUniqueId();
     this.state = {
       _listenForPropChanges: true
     };
   }
+  componentDidMount() {
+    if (this.props.innerRef) {
+      typeof this.props.innerRef === 'function' ? this.props.innerRef(this._refInput.current) : this.props.innerRef.current = this._refInput.current;
+    }
+  }
   render() {
     var _this$context, _this$context2;
     const props = extendPropsWithContextInClassComponent(this.props, Checkbox.defaultProps, {
@@ -201,7 +206,8 @@ _defineProperty(Checkbox, "defaultProps", {
   className: null,
   children: null,
   on_change: null,
-  on_state_update: null
+  on_state_update: null,
+  innerRef: null
 });
 _defineProperty(Checkbox, "parseChecked", state => /true|on/.test(String(state)));
 process.env.NODE_ENV !== "production" ? Checkbox.propTypes = _objectSpread(_objectSpread({
@@ -228,7 +234,7 @@ process.env.NODE_ENV !== "production" ? Checkbox.propTypes = _objectSpread(_obje
   readOnly: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   class: PropTypes.string,
-  innerRef: PropTypes.object
+  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
 }, spacingPropTypes), {}, {
   className: PropTypes.string,
   children: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),

package/es/components/checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":["React","PropTypes","classnames","keycode","isTrue","makeUniqueId","extendPropsWithContextInClassComponent","validateDOMAttributes","getStatusState","combineDescribedBy","dispatchCustomElementEvent","AlignmentHelper","spacingPropTypes","createSpacingClasses","skeletonDOMAttributes","createSkeletonClass","pickFormElementProps","Context","Suffix","FormLabel","FormStatus","Checkbox","PureComponent","getDerivedStateFromProps","props","state","_listenForPropChanges","checked","_checked","parseChecked","__checked","constructor","_defineProperty","event","onChangeHandler","readOnly","preventDefault","setState","_refInput","current","focus","innerRef","createRef","_id","id","render","_this$context","_this$context2","defaultProps","skeleton","context","getTranslation","FormRow","formElement","value","status","status_state","status_props","status_no_animation","globalStatus","suffix","size","label","label_position","label_sr_only","title","element","disabled","className","class","_className","children","on_change","on_state_update","rest","_objectWithoutProperties","_excluded","showStatus","mainParams","inputParams","_objectSpread","statusComp","createElement","_extends","show","text_id","width_selector","text","no_animation","Element","for_id","sr_only","_AlignmentHelper","name","type","onChange","onKeyDown","onKeyDownHandler","ref","_span","CheckIcon","attributes","test","String","process","env","NODE_ENV","propTypes","oneOfType","string","func","node","oneOf","bool","object","shape","message","_ref","_excluded2","vB","width","height","viewBox","fill","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin","_formElement","_supportsSpacingProps"],"sources":["../../../../src/components/checkbox/Checkbox.js"],"sourcesContent":["/**\n * Web Checkbox Component\n *\n */\n\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport classnames from 'classnames'\nimport keycode from 'keycode'\nimport {\n  isTrue,\n  makeUniqueId,\n  extendPropsWithContextInClassComponent,\n  validateDOMAttributes,\n  getStatusState,\n  combineDescribedBy,\n  dispatchCustomElementEvent,\n} from '../../shared/component-helper'\nimport AlignmentHelper from '../../shared/AlignmentHelper'\nimport {\n  spacingPropTypes,\n  createSpacingClasses,\n} from '../space/SpacingHelper'\nimport {\n  skeletonDOMAttributes,\n  createSkeletonClass,\n} from '../skeleton/SkeletonHelper'\nimport { pickFormElementProps } from '../../shared/helpers/filterValidProps'\n\nimport Context from '../../shared/Context'\nimport Suffix from '../../shared/helpers/Suffix'\nimport FormLabel from '../form-label/FormLabel'\nimport FormStatus from '../form-status/FormStatus'\n\n/**\n * The checkbox component is our enhancement of the classic checkbox button. It acts like a checkbox. Example: On/off, yes/no.\n */\nexport default class Checkbox extends React.PureComponent {\n  static contextType = Context\n\n  static propTypes = {\n    label: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.func,\n      PropTypes.node,\n    ]),\n    label_position: PropTypes.oneOf(['left', 'right']),\n    label_sr_only: PropTypes.bool,\n    title: PropTypes.string,\n    element: PropTypes.node,\n    checked: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    id: PropTypes.string,\n    size: PropTypes.oneOf(['default', 'medium', 'large']),\n    status: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.bool,\n      PropTypes.func,\n      PropTypes.node,\n    ]),\n    status_state: PropTypes.string,\n    status_props: PropTypes.object,\n    status_no_animation: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.bool,\n    ]),\n    globalStatus: PropTypes.shape({\n      id: PropTypes.string,\n      message: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n    }),\n    suffix: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.func,\n      PropTypes.node,\n    ]),\n    value: PropTypes.string,\n    attributes: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\n    readOnly: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    class: PropTypes.string,\n    innerRef: PropTypes.object,\n\n    ...spacingPropTypes,\n\n    className: PropTypes.string,\n    children: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),\n\n    on_change: PropTypes.func,\n    on_state_update: PropTypes.func,\n  }\n\n  static defaultProps = {\n    label: null,\n    label_position: null,\n    label_sr_only: null,\n    title: null,\n    element: 'input',\n    checked: null,\n    disabled: null,\n    id: null,\n    size: null,\n    status: null,\n    status_state: 'error',\n    status_props: null,\n    status_no_animation: null,\n    globalStatus: null,\n    suffix: null,\n    value: null,\n    attributes: null,\n    readOnly: false,\n    skeleton: null,\n    class: null,\n\n    className: null,\n    children: null,\n\n    on_change: null,\n    on_state_update: null,\n  }\n\n  static parseChecked = (state) => /true|on/.test(String(state))\n\n  static getDerivedStateFromProps(props, state) {\n    if (state._listenForPropChanges) {\n      if (props.checked !== state._checked) {\n        state.checked = Checkbox.parseChecked(props.checked)\n      }\n    }\n    state._listenForPropChanges = true\n\n    if (state.checked !== state.__checked) {\n      dispatchCustomElementEvent({ props }, 'on_state_update', {\n        checked: state.checked,\n      })\n    }\n\n    state._checked = props.checked\n    state.__checked = state.checked\n\n    return state\n  }\n\n  constructor(props) {\n    super(props)\n    this._refInput = props.innerRef || React.createRef()\n\n    this._id = props.id || makeUniqueId() // cause we need an id anyway\n    this.state = {\n      _listenForPropChanges: true,\n    }\n  }\n\n  onKeyDownHandler = (event) => {\n    switch (keycode(event)) {\n      case 'enter':\n        this.onChangeHandler(event)\n        break\n    }\n  }\n\n  onChangeHandler = (event) => {\n    if (isTrue(this.props.readOnly)) {\n      return event.preventDefault()\n    }\n    const checked = !this.state.checked\n    this.setState({ checked, _listenForPropChanges: false })\n    dispatchCustomElementEvent(this, 'on_change', { checked, event })\n\n    // help firefox and safari to have an correct state after a click\n    if (this._refInput.current) {\n      this._refInput.current.focus()\n    }\n  }\n\n  render() {\n    // use only the props from context, who are available here anyway\n    const props = extendPropsWithContextInClassComponent(\n      this.props,\n      Checkbox.defaultProps,\n      { skeleton: this.context && this.context.skeleton },\n      this.context.getTranslation(this.props).Checkbox,\n      // Deprecated – can be removed in v11\n      pickFormElementProps(this.context?.FormRow),\n      pickFormElementProps(this.context?.formElement),\n      this.context.Checkbox\n    )\n\n    const {\n      value,\n      status,\n      status_state,\n      status_props,\n      status_no_animation,\n      globalStatus,\n      suffix,\n      size,\n      label,\n      label_position,\n      label_sr_only,\n      title,\n      element,\n      disabled,\n      readOnly,\n      skeleton,\n      className,\n      class: _className,\n\n      id: _id, // eslint-disable-line\n      checked: _checked, // eslint-disable-line\n      children, // eslint-disable-line\n      on_change, // eslint-disable-line\n      on_state_update, // eslint-disable-line\n      innerRef, // eslint-disable-line\n\n      ...rest\n    } = props\n\n    const { checked } = this.state\n\n    const id = this._id\n    const showStatus = getStatusState(status)\n\n    const mainParams = {\n      className: classnames(\n        'dnb-checkbox',\n        status && `dnb-checkbox__status--${status_state}`,\n        size && `dnb-checkbox--${size}`,\n        label &&\n          `dnb-checkbox--label-position-${label_position || 'right'}`,\n        'dnb-form-component',\n        createSkeletonClass(null, skeleton),\n        createSpacingClasses(props),\n        className,\n        _className\n      ),\n    }\n\n    const inputParams = {\n      disabled,\n      checked,\n      ...rest,\n    }\n\n    if (showStatus || suffix) {\n      inputParams['aria-describedby'] = combineDescribedBy(\n        inputParams,\n        showStatus ? id + '-status' : null,\n        suffix ? id + '-suffix' : null\n      )\n    }\n    if (readOnly) {\n      inputParams['aria-readonly'] = inputParams.readOnly = true\n    }\n\n    skeletonDOMAttributes(inputParams, skeleton, this.context)\n\n    // also used for code markup simulation\n    validateDOMAttributes(this.props, inputParams)\n\n    const statusComp = (\n      <FormStatus\n        show={showStatus}\n        id={id + '-form-status'}\n        globalStatus={globalStatus}\n        label={label}\n        text_id={id + '-status'} // used for \"aria-describedby\"\n        width_selector={id + ', ' + id + '-label'}\n        text={status}\n        state={status_state}\n        no_animation={status_no_animation}\n        skeleton={skeleton}\n        {...status_props}\n      />\n    )\n\n    const Element = element || 'input'\n\n    return (\n      <span {...mainParams}>\n        <span className=\"dnb-checkbox__order\">\n          {label && (\n            <FormLabel\n              id={id + '-label'}\n              for_id={id}\n              text={label}\n              disabled={disabled}\n              skeleton={skeleton}\n              sr_only={label_sr_only}\n            />\n          )}\n\n          <span className=\"dnb-checkbox__inner\">\n            <AlignmentHelper />\n            {label_position === 'left' && statusComp}\n\n            <span className=\"dnb-checkbox__shell\">\n              <Element\n                id={id}\n                name={id}\n                type=\"checkbox\"\n                title={title}\n                className=\"dnb-checkbox__input\"\n                value={checked ? value || '' : ''}\n                disabled={isTrue(disabled)}\n                {...inputParams}\n                onChange={this.onChangeHandler}\n                onKeyDown={this.onKeyDownHandler}\n                ref={this._refInput}\n              />\n\n              <span\n                className={classnames(\n                  'dnb-checkbox__button',\n                  createSkeletonClass('shape', skeleton, this.context)\n                )}\n                aria-hidden\n              >\n                <span className=\"dnb-checkbox__focus\" />\n              </span>\n\n              <CheckIcon size={size} />\n            </span>\n          </span>\n\n          {suffix && (\n            <Suffix\n              className=\"dnb-checkbox__suffix\"\n              id={id + '-suffix'} // used for \"aria-describedby\"\n              context={props}\n            >\n              {suffix}\n            </Suffix>\n          )}\n        </span>\n\n        {(label_position === 'right' || !label_position) && statusComp}\n      </span>\n    )\n  }\n}\n\n// The new checkbox has too low contrast, as it is too thin on web\nexport const CheckIcon = ({ size, ...props }) => {\n  let vB = 16\n  if (size === 'large') {\n    vB = 24\n  }\n  return (\n    <svg\n      width={vB}\n      height={vB}\n      viewBox={`0 0 ${vB} ${vB}`}\n      fill=\"none\"\n      className=\"dnb-checkbox__gfx\"\n      aria-hidden\n      {...props}\n    >\n      <path\n        d={size === 'large' ? 'M1.5 15L7.5 21L22.5 3' : 'M1 10L5 14L15 2'}\n        stroke=\"currentColor\"\n        strokeWidth=\"1.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  )\n}\nCheckIcon.propTypes = {\n  size: PropTypes.string,\n}\nCheckIcon.defaultProps = {\n  size: 'default',\n}\n\nCheckIcon._formElement = true\nCheckIcon._supportsSpacingProps = true\n"],"mappings":"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"}
+{"version":3,"file":"Checkbox.js","names":["React","PropTypes","classnames","keycode","isTrue","makeUniqueId","extendPropsWithContextInClassComponent","validateDOMAttributes","getStatusState","combineDescribedBy","dispatchCustomElementEvent","AlignmentHelper","spacingPropTypes","createSpacingClasses","skeletonDOMAttributes","createSkeletonClass","pickFormElementProps","Context","Suffix","FormLabel","FormStatus","Checkbox","PureComponent","getDerivedStateFromProps","props","state","_listenForPropChanges","checked","_checked","parseChecked","__checked","constructor","_defineProperty","event","onChangeHandler","readOnly","preventDefault","setState","_refInput","current","focus","createRef","_id","id","componentDidMount","innerRef","render","_this$context","_this$context2","defaultProps","skeleton","context","getTranslation","FormRow","formElement","value","status","status_state","status_props","status_no_animation","globalStatus","suffix","size","label","label_position","label_sr_only","title","element","disabled","className","class","_className","children","on_change","on_state_update","rest","_objectWithoutProperties","_excluded","showStatus","mainParams","inputParams","_objectSpread","statusComp","createElement","_extends","show","text_id","width_selector","text","no_animation","Element","for_id","sr_only","_AlignmentHelper","name","type","onChange","onKeyDown","onKeyDownHandler","ref","_span","CheckIcon","attributes","test","String","process","env","NODE_ENV","propTypes","oneOfType","string","func","node","oneOf","bool","object","shape","message","_ref","_excluded2","vB","width","height","viewBox","fill","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin","_formElement","_supportsSpacingProps"],"sources":["../../../../src/components/checkbox/Checkbox.js"],"sourcesContent":["/**\n * Web Checkbox Component\n *\n */\n\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport classnames from 'classnames'\nimport keycode from 'keycode'\nimport {\n  isTrue,\n  makeUniqueId,\n  extendPropsWithContextInClassComponent,\n  validateDOMAttributes,\n  getStatusState,\n  combineDescribedBy,\n  dispatchCustomElementEvent,\n} from '../../shared/component-helper'\nimport AlignmentHelper from '../../shared/AlignmentHelper'\nimport {\n  spacingPropTypes,\n  createSpacingClasses,\n} from '../space/SpacingHelper'\nimport {\n  skeletonDOMAttributes,\n  createSkeletonClass,\n} from '../skeleton/SkeletonHelper'\nimport { pickFormElementProps } from '../../shared/helpers/filterValidProps'\n\nimport Context from '../../shared/Context'\nimport Suffix from '../../shared/helpers/Suffix'\nimport FormLabel from '../form-label/FormLabel'\nimport FormStatus from '../form-status/FormStatus'\n\n/**\n * The checkbox component is our enhancement of the classic checkbox button. It acts like a checkbox. Example: On/off, yes/no.\n */\nexport default class Checkbox extends React.PureComponent {\n  static contextType = Context\n\n  static propTypes = {\n    label: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.func,\n      PropTypes.node,\n    ]),\n    label_position: PropTypes.oneOf(['left', 'right']),\n    label_sr_only: PropTypes.bool,\n    title: PropTypes.string,\n    element: PropTypes.node,\n    checked: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    id: PropTypes.string,\n    size: PropTypes.oneOf(['default', 'medium', 'large']),\n    status: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.bool,\n      PropTypes.func,\n      PropTypes.node,\n    ]),\n    status_state: PropTypes.string,\n    status_props: PropTypes.object,\n    status_no_animation: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.bool,\n    ]),\n    globalStatus: PropTypes.shape({\n      id: PropTypes.string,\n      message: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n    }),\n    suffix: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.func,\n      PropTypes.node,\n    ]),\n    value: PropTypes.string,\n    attributes: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\n    readOnly: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    class: PropTypes.string,\n    innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),\n\n    ...spacingPropTypes,\n\n    className: PropTypes.string,\n    children: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),\n\n    on_change: PropTypes.func,\n    on_state_update: PropTypes.func,\n  }\n\n  static defaultProps = {\n    label: null,\n    label_position: null,\n    label_sr_only: null,\n    title: null,\n    element: 'input',\n    checked: null,\n    disabled: null,\n    id: null,\n    size: null,\n    status: null,\n    status_state: 'error',\n    status_props: null,\n    status_no_animation: null,\n    globalStatus: null,\n    suffix: null,\n    value: null,\n    attributes: null,\n    readOnly: false,\n    skeleton: null,\n    class: null,\n\n    className: null,\n    children: null,\n\n    on_change: null,\n    on_state_update: null,\n\n    innerRef: null,\n  }\n\n  static parseChecked = (state) => /true|on/.test(String(state))\n\n  static getDerivedStateFromProps(props, state) {\n    if (state._listenForPropChanges) {\n      if (props.checked !== state._checked) {\n        state.checked = Checkbox.parseChecked(props.checked)\n      }\n    }\n    state._listenForPropChanges = true\n\n    if (state.checked !== state.__checked) {\n      dispatchCustomElementEvent({ props }, 'on_state_update', {\n        checked: state.checked,\n      })\n    }\n\n    state._checked = props.checked\n    state.__checked = state.checked\n\n    return state\n  }\n\n  constructor(props) {\n    super(props)\n    this._refInput = React.createRef()\n\n    this._id = props.id || makeUniqueId() // cause we need an id anyway\n    this.state = {\n      _listenForPropChanges: true,\n    }\n  }\n\n  componentDidMount() {\n    if (this.props.innerRef) {\n      typeof this.props.innerRef === 'function'\n        ? this.props.innerRef(this._refInput.current)\n        : (this.props.innerRef.current = this._refInput.current)\n    }\n  }\n\n  onKeyDownHandler = (event) => {\n    switch (keycode(event)) {\n      case 'enter':\n        this.onChangeHandler(event)\n        break\n    }\n  }\n\n  onChangeHandler = (event) => {\n    if (isTrue(this.props.readOnly)) {\n      return event.preventDefault()\n    }\n    const checked = !this.state.checked\n    this.setState({ checked, _listenForPropChanges: false })\n    dispatchCustomElementEvent(this, 'on_change', { checked, event })\n\n    // help firefox and safari to have an correct state after a click\n    if (this._refInput.current) {\n      this._refInput.current.focus()\n    }\n  }\n\n  render() {\n    // use only the props from context, who are available here anyway\n    const props = extendPropsWithContextInClassComponent(\n      this.props,\n      Checkbox.defaultProps,\n      { skeleton: this.context && this.context.skeleton },\n      this.context.getTranslation(this.props).Checkbox,\n      // Deprecated – can be removed in v11\n      pickFormElementProps(this.context?.FormRow),\n      pickFormElementProps(this.context?.formElement),\n      this.context.Checkbox\n    )\n\n    const {\n      value,\n      status,\n      status_state,\n      status_props,\n      status_no_animation,\n      globalStatus,\n      suffix,\n      size,\n      label,\n      label_position,\n      label_sr_only,\n      title,\n      element,\n      disabled,\n      readOnly,\n      skeleton,\n      className,\n      class: _className,\n\n      id: _id, // eslint-disable-line\n      checked: _checked, // eslint-disable-line\n      children, // eslint-disable-line\n      on_change, // eslint-disable-line\n      on_state_update, // eslint-disable-line\n      innerRef, // eslint-disable-line\n\n      ...rest\n    } = props\n\n    const { checked } = this.state\n\n    const id = this._id\n    const showStatus = getStatusState(status)\n\n    const mainParams = {\n      className: classnames(\n        'dnb-checkbox',\n        status && `dnb-checkbox__status--${status_state}`,\n        size && `dnb-checkbox--${size}`,\n        label &&\n          `dnb-checkbox--label-position-${label_position || 'right'}`,\n        'dnb-form-component',\n        createSkeletonClass(null, skeleton),\n        createSpacingClasses(props),\n        className,\n        _className\n      ),\n    }\n\n    const inputParams = {\n      disabled,\n      checked,\n      ...rest,\n    }\n\n    if (showStatus || suffix) {\n      inputParams['aria-describedby'] = combineDescribedBy(\n        inputParams,\n        showStatus ? id + '-status' : null,\n        suffix ? id + '-suffix' : null\n      )\n    }\n    if (readOnly) {\n      inputParams['aria-readonly'] = inputParams.readOnly = true\n    }\n\n    skeletonDOMAttributes(inputParams, skeleton, this.context)\n\n    // also used for code markup simulation\n    validateDOMAttributes(this.props, inputParams)\n\n    const statusComp = (\n      <FormStatus\n        show={showStatus}\n        id={id + '-form-status'}\n        globalStatus={globalStatus}\n        label={label}\n        text_id={id + '-status'} // used for \"aria-describedby\"\n        width_selector={id + ', ' + id + '-label'}\n        text={status}\n        state={status_state}\n        no_animation={status_no_animation}\n        skeleton={skeleton}\n        {...status_props}\n      />\n    )\n\n    const Element = element || 'input'\n\n    return (\n      <span {...mainParams}>\n        <span className=\"dnb-checkbox__order\">\n          {label && (\n            <FormLabel\n              id={id + '-label'}\n              for_id={id}\n              text={label}\n              disabled={disabled}\n              skeleton={skeleton}\n              sr_only={label_sr_only}\n            />\n          )}\n\n          <span className=\"dnb-checkbox__inner\">\n            <AlignmentHelper />\n            {label_position === 'left' && statusComp}\n\n            <span className=\"dnb-checkbox__shell\">\n              <Element\n                id={id}\n                name={id}\n                type=\"checkbox\"\n                title={title}\n                className=\"dnb-checkbox__input\"\n                value={checked ? value || '' : ''}\n                disabled={isTrue(disabled)}\n                {...inputParams}\n                onChange={this.onChangeHandler}\n                onKeyDown={this.onKeyDownHandler}\n                ref={this._refInput}\n              />\n\n              <span\n                className={classnames(\n                  'dnb-checkbox__button',\n                  createSkeletonClass('shape', skeleton, this.context)\n                )}\n                aria-hidden\n              >\n                <span className=\"dnb-checkbox__focus\" />\n              </span>\n\n              <CheckIcon size={size} />\n            </span>\n          </span>\n\n          {suffix && (\n            <Suffix\n              className=\"dnb-checkbox__suffix\"\n              id={id + '-suffix'} // used for \"aria-describedby\"\n              context={props}\n            >\n              {suffix}\n            </Suffix>\n          )}\n        </span>\n\n        {(label_position === 'right' || !label_position) && statusComp}\n      </span>\n    )\n  }\n}\n\n// The new checkbox has too low contrast, as it is too thin on web\nexport const CheckIcon = ({ size, ...props }) => {\n  let vB = 16\n  if (size === 'large') {\n    vB = 24\n  }\n  return (\n    <svg\n      width={vB}\n      height={vB}\n      viewBox={`0 0 ${vB} ${vB}`}\n      fill=\"none\"\n      className=\"dnb-checkbox__gfx\"\n      aria-hidden\n      {...props}\n    >\n      <path\n        d={size === 'large' ? 'M1.5 15L7.5 21L22.5 3' : 'M1 10L5 14L15 2'}\n        stroke=\"currentColor\"\n        strokeWidth=\"1.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  )\n}\nCheckIcon.propTypes = {\n  size: PropTypes.string,\n}\nCheckIcon.defaultProps = {\n  size: 'default',\n}\n\nCheckIcon._formElement = true\nCheckIcon._supportsSpacingProps = true\n"],"mappings":"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"}

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

@@ -14,10 +14,43 @@
   --checkbox-width--large: 2rem;
   --checkbox-height--large: 2rem;
   --checkbox-border-width: 0.125rem;
+  --checkbox-color-gfx-on: black;
+  --checkbox-color-gfx-off: black;
+  --checkbox-color-background-on: white;
+  --checkbox-color-background-off: white;
+  --checkbox-color-border-on: black;
+  --checkbox-color-border-off: black;
+  --checkbox-color-gfx--disabled: grey;
+  --checkbox-color-background-on--disabled: lightgrey;
+  --checkbox-color-background-off--disabled: lightgrey;
+  --checkbox-color-border-on--disabled: grey;
+  --checkbox-color-border-off--disabled: grey;
+  --checkbox-color-background--active: lightgrey;
+  --checkbox-color-border--active: transparent;
+  --checkbox-color-gfx--hover: grey;
+  --checkbox-color-background--hover: white;
+  --checkbox-color-border-on--hover: grey;
+  --checkbox-color-border-off--hover: grey;
+  --checkbox-color-gfx--focus: grey;
+  --checkbox-color-background--focus: lightgrey;
+  --checkbox-color-gfx--error: lavenderblush;
+  --checkbox-color-gfx--error-contrast: red;
+  --checkbox-color-background-on--error: red;
+  --checkbox-color-background--error-contrast: lavenderblush;
+  --checkbox-color-border--error: red;
   display: inline-flex;
   flex-direction: column;
   font-size: var(--font-size-small);
   line-height: var(--line-height-basis);
+  /*
+   * Color scheme
+   */
+  /** Normal state **/
+  /** Disabled state **/
+  /** Active state **/
+  /** Hover state **/
+  /** Focus state **/
+  /** Error state **/
 }
 .dnb-checkbox__inner {
   display: inline-flex;
@@ -72,6 +105,7 @@ html[data-whatinput=keyboard] .dnb-checkbox__focus {
   width: calc(var(--checkbox-width--medium) - 0.5rem);
   height: calc(var(--checkbox-height--medium) - 0.5rem);
   shape-rendering: geometricprecision;
+  transition: opacity 200ms ease-out, transform 200ms ease-out;
 }
 .dnb-checkbox--large {
   line-height: var(--checkbox-height--large);
@@ -134,9 +168,104 @@ html[data-whatinput=keyboard] .dnb-checkbox__focus {
   vertical-align: top;
   margin-top: 0.5rem;
 }
+.dnb-checkbox__input:checked ~ .dnb-checkbox__gfx, .dnb-checkbox__input[data-checked=true] ~ .dnb-checkbox__gfx {
+  opacity: 1;
+  transform: scale(1);
+  color: var(--checkbox-color-gfx-on);
+}
+.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 {
+  opacity: 0;
+  transform: scale(0.8);
+  color: var(--checkbox-color-gfx-off);
+}
+.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 {
+  border-color: var(--checkbox-color-border-off--disabled);
+  background-color: var(--checkbox-color-background-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 {
+  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 {
+  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 {
+  border: none;
+  background-color: var(--checkbox-color-background--focus);
+}
+html[data-whatinput=keyboard] .dnb-checkbox__input:not([disabled]):focus ~ .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 {
+  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 {
+  display: block;
+  --border-color: var(--checkbox-color-border--error);
+  --border-width: var(--focus-ring-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);
+}
+.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 ~ .dnb-checkbox__button, html[data-whatinput=keyboard] .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):focus:hover ~ .dnb-checkbox__button {
+  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);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+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);
 }

package/es/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;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;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;width:var(--checkbox-width--medium);z-index:6}.dnb-checkbox--large .dnb-checkbox__input{height:var(--checkbox-height--large);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.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}
+: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;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;width:var(--checkbox-width--medium);z-index:6}.dnb-checkbox--large .dnb-checkbox__input{height:var(--checkbox-height--large);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)}