@dnb/eufemia 10.27.0 → 10.28.0

package/components/checkbox/Checkbox.js

@@ -1,125 +1,158 @@
 "use client";
 
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 var _AlignmentHelper, _span;
-const _excluded = ["value", "status", "status_state", "status_props", "status_no_animation", "globalStatus", "suffix", "size", "label", "label_position", "label_sr_only", "title", "element", "disabled", "readOnly", "skeleton", "className", "class", "id", "checked", "children", "on_change", "on_state_update", "innerRef"],
-  _excluded2 = ["size"];
+const _excluded = ["value", "status", "statusState", "statusProps", "statusNoAnimation", "globalStatus", "suffix", "size", "label", "labelPosition", "labelSrOnly", "title", "element", "disabled", "readOnly", "skeleton", "className", "id", "checked", "onChange", "innerRef"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
 import classnames from 'classnames';
 import keycode from 'keycode';
-import { isTrue, makeUniqueId, extendPropsWithContextInClassComponent, validateDOMAttributes, getStatusState, combineDescribedBy, dispatchCustomElementEvent } from '../../shared/component-helper';
+import { validateDOMAttributes, getStatusState, combineDescribedBy, extendPropsWithContext } from '../../shared/component-helper';
 import AlignmentHelper from '../../shared/AlignmentHelper';
-import { spacingPropTypes, createSpacingClasses } from '../space/SpacingHelper';
+import { createSpacingClasses } from '../space/SpacingHelper';
 import { skeletonDOMAttributes, createSkeletonClass } from '../skeleton/SkeletonHelper';
-import { pickFormElementProps } from '../../shared/helpers/filterValidProps';
 import Context from '../../shared/Context';
 import Suffix from '../../shared/helpers/Suffix';
+import useId from '../../shared/helpers/useId';
+import { pickFormElementProps } from '../../shared/helpers/filterValidProps';
+import { convertSnakeCaseProps } from '../../shared/helpers/withSnakeCaseProps';
 import FormLabel from '../form-label/FormLabel';
 import FormStatus from '../form-status/FormStatus';
-export default class Checkbox extends React.PureComponent {
-  static getDerivedStateFromProps(props, state) {
-    if (state._listenForPropChanges) {
-      if (props.checked !== state._checked) {
-        state.checked = Checkbox.parseChecked(props.checked);
-      }
+import CheckIcon from './CheckIcon';
+const defaultProps = {
+  statusState: 'error'
+};
+function Checkbox(localProps) {
+  const context = useContext(Context);
+  const props = extractPropsFromContext();
+  const {
+      value,
+      status,
+      statusState,
+      statusProps,
+      statusNoAnimation,
+      globalStatus,
+      suffix,
+      size,
+      label,
+      labelPosition,
+      labelSrOnly,
+      title,
+      element,
+      disabled,
+      readOnly,
+      skeleton,
+      className,
+      id: idProp,
+      checked,
+      onChange,
+      innerRef
+    } = props,
+    rest = _objectWithoutProperties(props, _excluded);
+  const id = useId(idProp);
+  const isFn = typeof innerRef === 'function';
+  const refHook = useRef();
+  const ref = !isFn && innerRef || refHook;
+  useEffect(() => {
+    if (isFn) {
+      innerRef === null || innerRef === void 0 ? void 0 : innerRef(ref.current);
     }
-    state._listenForPropChanges = true;
-    if (state.checked !== state.__checked) {
-      dispatchCustomElementEvent({
-        props
-      }, 'on_state_update', {
-        checked: state.checked
-      });
+  }, [innerRef, isFn, ref]);
+  const [isChecked, setIsChecked] = useState(checked !== null && checked !== void 0 ? checked : false);
+  const [prevChecked, setPrevChecked] = useState(checked);
+  useEffect(() => {
+    if (checked !== prevChecked) {
+      setIsChecked(!!checked);
+      setPrevChecked(!!checked);
     }
-    state._checked = props.checked;
-    state.__checked = state.checked;
-    return state;
-  }
-  constructor(props) {
-    super(props);
-    _defineProperty(this, "onKeyDownHandler", event => {
-      switch (keycode(event)) {
-        case 'enter':
-          this.onChangeHandler(event);
-          break;
-      }
-    });
-    _defineProperty(this, "onChangeHandler", event => {
-      if (isTrue(this.props.readOnly)) {
-        return event.preventDefault();
-      }
-      const checked = !this.state.checked;
-      this.setState({
-        checked,
-        _listenForPropChanges: false
-      });
-      dispatchCustomElementEvent(this, 'on_change', {
-        checked,
-        event
-      });
-      if (this._refInput.current) {
-        this._refInput.current.focus();
-      }
+  }, [checked, prevChecked]);
+  const callOnChange = useCallback(args => {
+    onChange === null || onChange === void 0 ? void 0 : onChange(args);
+  }, [onChange]);
+  const onChangeHandler = useCallback(event => {
+    if (readOnly) {
+      return event.preventDefault();
+    }
+    const updatedCheck = !isChecked;
+    setIsChecked(updatedCheck);
+    callOnChange({
+      checked: updatedCheck,
+      event
     });
-    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;
+    if (ref.current) {
+      ref.current.focus();
     }
-  }
-  render() {
-    var _this$context, _this$context2;
-    const props = extendPropsWithContextInClassComponent(this.props, Checkbox.defaultProps, {
-      skeleton: this.context && this.context.skeleton
-    }, this.context.getTranslation(this.props).Checkbox, pickFormElementProps((_this$context = this.context) === null || _this$context === void 0 ? void 0 : _this$context.FormRow), pickFormElementProps((_this$context2 = this.context) === null || _this$context2 === void 0 ? void 0 : _this$context2.formElement), this.context.Checkbox);
-    const {
-        value,
-        status,
-        status_state,
-        status_props,
-        status_no_animation,
-        globalStatus,
-        suffix,
-        size,
-        label,
-        label_position,
-        label_sr_only,
-        title,
-        element,
-        disabled,
-        readOnly,
-        skeleton,
-        className,
-        class: _className,
-        id: _id,
-        checked: _checked,
-        children,
-        on_change,
-        on_state_update,
-        innerRef
-      } = props,
-      rest = _objectWithoutProperties(props, _excluded);
-    const {
-      checked
-    } = this.state;
-    const id = this._id;
-    const showStatus = getStatusState(status);
-    const mainParams = {
-      className: classnames("dnb-checkbox dnb-form-component", createSkeletonClass(null, skeleton), createSpacingClasses(props), className, _className, status && `dnb-checkbox__status--${status_state}`, size && `dnb-checkbox--${size}`, label && `dnb-checkbox--label-position-${label_position || 'right'}`)
-    };
+  }, [callOnChange, isChecked, readOnly, ref]);
+  const onKeyDownHandler = useCallback(event => {
+    switch (keycode(event)) {
+      case 'enter':
+        onChangeHandler(event);
+        break;
+    }
+  }, [onChangeHandler]);
+  const mainParams = {
+    className: classnames("dnb-checkbox dnb-form-component", createSkeletonClass(null, skeleton), createSpacingClasses(props), className, status && `dnb-checkbox__status--${statusState}`, size && `dnb-checkbox--${size}`, label && `dnb-checkbox--label-position-${labelPosition || 'right'}`)
+  };
+  const showStatus = getStatusState(status);
+  const inputParams = handleInputAttributes();
+  const statusComp = React.createElement(FormStatus, _extends({
+    show: showStatus,
+    id: id + '-form-status',
+    globalStatus: globalStatus,
+    label: label,
+    text_id: id + '-status',
+    width_selector: id + ', ' + id + '-label',
+    text: status,
+    state: statusState,
+    no_animation: statusNoAnimation,
+    skeleton: skeleton
+  }, statusProps));
+  const Element = element || 'input';
+  return React.createElement("span", mainParams, React.createElement("span", {
+    className: "dnb-checkbox__order"
+  }, label && React.createElement(FormLabel, {
+    id: id + '-label',
+    forId: id,
+    text: label,
+    disabled: disabled,
+    skeleton: skeleton,
+    srOnly: labelSrOnly
+  }), React.createElement("span", {
+    className: "dnb-checkbox__inner"
+  }, _AlignmentHelper || (_AlignmentHelper = React.createElement(AlignmentHelper, null)), labelPosition === 'left' && statusComp, React.createElement("span", {
+    className: "dnb-checkbox__shell"
+  }, React.createElement(Element, _extends({
+    id: id,
+    name: id,
+    type: "checkbox",
+    title: title,
+    className: "dnb-checkbox__input",
+    value: isChecked ? value || '' : '',
+    disabled: disabled
+  }, inputParams, {
+    onChange: onChangeHandler,
+    onKeyDown: onKeyDownHandler,
+    ref: ref
+  })), React.createElement("span", {
+    className: classnames('dnb-checkbox__button', createSkeletonClass('shape', skeleton, context)),
+    "aria-hidden": true
+  }, _span || (_span = React.createElement("span", {
+    className: "dnb-checkbox__focus"
+  }))), React.createElement(CheckIcon, {
+    size: size
+  }))), suffix && React.createElement(Suffix, {
+    className: "dnb-checkbox__suffix",
+    id: id + '-suffix',
+    context: props
+  }, suffix)), (labelPosition === 'right' || !labelPosition) && statusComp);
+  function handleInputAttributes() {
     const inputParams = _objectSpread({
       disabled,
-      checked
+      checked: isChecked,
+      readOnly
     }, rest);
     if (showStatus || suffix) {
       inputParams['aria-describedby'] = combineDescribedBy(inputParams, showStatus ? id + '-status' : null, suffix ? id + '-suffix' : null);
@@ -127,150 +160,13 @@ export default class Checkbox extends React.PureComponent {
     if (readOnly) {
       inputParams['aria-readonly'] = inputParams.readOnly = true;
     }
-    skeletonDOMAttributes(inputParams, skeleton, this.context);
-    validateDOMAttributes(this.props, inputParams);
-    const statusComp = React.createElement(FormStatus, _extends({
-      show: showStatus,
-      id: id + '-form-status',
-      globalStatus: globalStatus,
-      label: label,
-      text_id: id + '-status',
-      width_selector: id + ', ' + id + '-label',
-      text: status,
-      state: status_state,
-      no_animation: status_no_animation,
-      skeleton: skeleton
-    }, status_props));
-    const Element = element || 'input';
-    return React.createElement("span", mainParams, React.createElement("span", {
-      className: "dnb-checkbox__order"
-    }, label && React.createElement(FormLabel, {
-      id: id + '-label',
-      for_id: id,
-      text: label,
-      disabled: disabled,
-      skeleton: skeleton,
-      sr_only: label_sr_only
-    }), React.createElement("span", {
-      className: "dnb-checkbox__inner"
-    }, _AlignmentHelper || (_AlignmentHelper = React.createElement(AlignmentHelper, null)), label_position === 'left' && statusComp, React.createElement("span", {
-      className: "dnb-checkbox__shell"
-    }, React.createElement(Element, _extends({
-      id: id,
-      name: id,
-      type: "checkbox",
-      title: title,
-      className: "dnb-checkbox__input",
-      value: checked ? value || '' : '',
-      disabled: isTrue(disabled)
-    }, inputParams, {
-      onChange: this.onChangeHandler,
-      onKeyDown: this.onKeyDownHandler,
-      ref: this._refInput
-    })), React.createElement("span", {
-      className: classnames('dnb-checkbox__button', createSkeletonClass('shape', skeleton, this.context)),
-      "aria-hidden": true
-    }, _span || (_span = React.createElement("span", {
-      className: "dnb-checkbox__focus"
-    }))), React.createElement(CheckIcon, {
-      size: size
-    }))), suffix && React.createElement(Suffix, {
-      className: "dnb-checkbox__suffix",
-      id: id + '-suffix',
-      context: props
-    }, suffix)), (label_position === 'right' || !label_position) && statusComp);
+    return validateDOMAttributes(props, skeletonDOMAttributes(inputParams, skeleton, context));
   }
-}
-_defineProperty(Checkbox, "contextType", Context);
-_defineProperty(Checkbox, "defaultProps", {
-  label: null,
-  label_position: null,
-  label_sr_only: null,
-  title: null,
-  element: 'input',
-  checked: null,
-  disabled: null,
-  id: null,
-  size: null,
-  status: null,
-  status_state: 'error',
-  status_props: null,
-  status_no_animation: null,
-  globalStatus: null,
-  suffix: null,
-  value: null,
-  attributes: null,
-  readOnly: false,
-  skeleton: null,
-  class: null,
-  className: null,
-  children: null,
-  on_change: 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({
-  label: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.node]),
-  label_position: PropTypes.oneOf(['left', 'right']),
-  label_sr_only: PropTypes.bool,
-  title: PropTypes.string,
-  element: PropTypes.node,
-  checked: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  id: PropTypes.string,
-  size: PropTypes.oneOf(['default', 'medium', 'large']),
-  status: PropTypes.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.func, PropTypes.node]),
-  status_state: PropTypes.string,
-  status_props: PropTypes.object,
-  status_no_animation: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  globalStatus: PropTypes.shape({
-    id: PropTypes.string,
-    message: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
-  }),
-  suffix: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.node]),
-  value: PropTypes.string,
-  attributes: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-  readOnly: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  class: PropTypes.string,
-  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
-}, spacingPropTypes), {}, {
-  className: PropTypes.string,
-  children: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-  on_change: PropTypes.func,
-  on_state_update: PropTypes.func
-}) : void 0;
-export const CheckIcon = _ref => {
-  let {
-      size
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded2);
-  let vB = 16;
-  if (size === 'large') {
-    vB = 24;
+  function extractPropsFromContext() {
+    return extendPropsWithContext(convertSnakeCaseProps(localProps), defaultProps, context.Checkbox, {
+      skeleton: context === null || context === void 0 ? void 0 : context.Checkbox
+    }, pickFormElementProps(context === null || context === void 0 ? void 0 : context.FormRow), pickFormElementProps(context === null || context === void 0 ? void 0 : context.formElement));
   }
-  return React.createElement("svg", _extends({
-    width: vB,
-    height: vB,
-    viewBox: `0 0 ${vB} ${vB}`,
-    fill: "none",
-    className: "dnb-checkbox__gfx",
-    "aria-hidden": true
-  }, props), React.createElement("path", {
-    d: size === 'large' ? 'M1.5 15L7.5 21L22.5 3' : 'M1 10L5 14L15 2',
-    stroke: "currentColor",
-    strokeWidth: "1.5",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }));
-};
-process.env.NODE_ENV !== "production" ? CheckIcon.propTypes = {
-  size: PropTypes.string
-} : void 0;
-CheckIcon.defaultProps = {
-  size: 'default'
-};
-CheckIcon._formElement = true;
-CheckIcon._supportsSpacingProps = true;
+}
+export default Checkbox;
 //# sourceMappingURL=Checkbox.js.map

package/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","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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"}
+{"version":3,"file":"Checkbox.js","names":["React","useCallback","useContext","useEffect","useRef","useState","classnames","keycode","validateDOMAttributes","getStatusState","combineDescribedBy","extendPropsWithContext","AlignmentHelper","createSpacingClasses","skeletonDOMAttributes","createSkeletonClass","Context","Suffix","useId","pickFormElementProps","convertSnakeCaseProps","FormLabel","FormStatus","CheckIcon","defaultProps","statusState","Checkbox","localProps","context","props","extractPropsFromContext","value","status","statusProps","statusNoAnimation","globalStatus","suffix","size","label","labelPosition","labelSrOnly","title","element","disabled","readOnly","skeleton","className","id","idProp","checked","onChange","innerRef","rest","_objectWithoutProperties","_excluded","isFn","refHook","ref","current","isChecked","setIsChecked","prevChecked","setPrevChecked","callOnChange","args","onChangeHandler","event","preventDefault","updatedCheck","focus","onKeyDownHandler","mainParams","showStatus","inputParams","handleInputAttributes","statusComp","createElement","_extends","show","text_id","width_selector","text","state","no_animation","Element","forId","srOnly","_AlignmentHelper","name","type","onKeyDown","_span","_objectSpread","FormRow","formElement"],"sources":["../../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["/**\n * Web Checkbox Component\n */\n\nimport React, {\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react'\nimport classnames from 'classnames'\nimport keycode from 'keycode'\n\nimport {\n  validateDOMAttributes,\n  getStatusState,\n  combineDescribedBy,\n  extendPropsWithContext,\n} from '../../shared/component-helper'\nimport AlignmentHelper from '../../shared/AlignmentHelper'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport {\n  skeletonDOMAttributes,\n  createSkeletonClass,\n} from '../skeleton/SkeletonHelper'\nimport Context from '../../shared/Context'\nimport Suffix from '../../shared/helpers/Suffix'\nimport useId from '../../shared/helpers/useId'\nimport type { SpacingProps } from '../space/types'\nimport { pickFormElementProps } from '../../shared/helpers/filterValidProps'\nimport { convertSnakeCaseProps } from '../../shared/helpers/withSnakeCaseProps'\n\nimport type {\n  FormStatusProps,\n  FormStatusState,\n  FormStatusText,\n} from '../FormStatus'\nimport type { SkeletonShow } from '../Skeleton'\nimport type { GlobalStatusConfigObject } from '../GlobalStatus'\n\nimport FormLabel from '../form-label/FormLabel'\nimport FormStatus from '../form-status/FormStatus'\nimport CheckIcon from './CheckIcon'\n\nexport type CheckboxLabelPosition = 'left' | 'right'\nexport type CheckboxSize = 'default' | 'medium' | 'large'\nexport type CheckboxAttributes = string | Record<string, unknown>\nexport type OnChangeParams = {\n  checked: boolean\n  event: React.ChangeEvent<HTMLInputElement>\n}\n\nexport type CheckboxProps = {\n  /**\n   * Use either the `label` property or provide a custom one.\n   */\n  label?: React.ReactNode\n  /**\n   * Defines the position of the `label`. Use either `left` or `right`. Defaults to `right`.\n   */\n  labelPosition?: CheckboxLabelPosition\n  /**\n   * Use `true` to make the label only readable by screen readers.\n   */\n  labelSrOnly?: boolean\n  /**\n   * The `title` of the input - describing it a bit further for accessibility reasons.\n   */\n  title?: string\n  /**\n   * Determine whether the checkbox is checked or not. The default is `false`.\n   */\n  checked?: boolean | undefined | null\n  /**\n   * The size of the checkbox. For now there is \"medium\" (default) and \"large\".\n   */\n  size?: CheckboxSize\n  /**\n   * Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.\n   */\n  status?: FormStatusText\n  /**\n   * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.\n   */\n  statusState?: FormStatusState\n  /**\n   * Use an object to define additional FormStatus properties. See [FormStatus](/uilib/components/form-status/properties/)\n   */\n  statusProps?: FormStatusProps\n  statusNoAnimation?: boolean\n  /**\n   * The [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status)\n   */\n  globalStatus?: GlobalStatusConfigObject\n  /**\n   * Text describing the content of the Checkbox more than the label. You can also send in a React component, so it gets wrapped inside the Checkbox component.\n   */\n  suffix?: React.ReactNode\n  value?: string\n  element?: React.ElementType\n  attributes?: CheckboxAttributes\n  /**\n   * If set to `true`, an overlaying skeleton with animation will be shown.\n   */\n  skeleton?: SkeletonShow\n  /**\n   * Will be called on state changes made by the user. Returns an boolean `{ checked, event }`.\n   */\n  onChange?: (args: OnChangeParams) => void\n  /**\n   * By providing a React.ref we can get the internally used input element (DOM). E.g. `innerRef={myRef}` by using `React.createRef()` or `React.useRef()`.\n   */\n  innerRef?:\n    | React.MutableRefObject<HTMLInputElement>\n    | ((elem: HTMLInputElement) => void)\n} & SpacingProps &\n  Omit<\n    React.HTMLProps<HTMLInputElement>,\n    'ref' | 'label' | 'size' | 'onChange'\n  > &\n  DeprecatedCheckboxProps\n\n// depracated, can be removed in v11\ntype DeprecatedCheckboxProps = {\n  /** @deprecated use the `label` prop instead */\n  children?: React.ReactNode\n  /**  @deprecated use `onComplete` */\n  on_change?: (args: OnChangeParams) => void\n  /**  @deprecated use `labelPosition` */\n  label_position?: CheckboxLabelPosition\n  /**  @deprecated use `labelSrOnly` */\n  label_sr_only?: boolean\n  /**  @deprecated use `statusState` */\n  status_state?: FormStatusState\n  /**  @deprecated use `statusProps` */\n  status_props?: FormStatusProps\n  /**  @deprecated use `statusNoAnimation` */\n  status_no_animation?: boolean\n}\n\nconst defaultProps: CheckboxProps = {\n  statusState: 'error',\n}\n\nfunction Checkbox(localProps: CheckboxProps) {\n  const context = useContext(Context)\n\n  const props = extractPropsFromContext()\n\n  const {\n    value,\n    status,\n    statusState,\n    statusProps,\n    statusNoAnimation,\n    globalStatus,\n    suffix,\n    size,\n    label,\n    labelPosition,\n    labelSrOnly,\n    title,\n    element,\n    disabled,\n    readOnly,\n    skeleton,\n    className,\n    id: idProp,\n    checked,\n    onChange,\n    innerRef,\n    ...rest\n  } = props\n\n  const id = useId(idProp)\n\n  const isFn = typeof innerRef === 'function'\n  const refHook = useRef<HTMLInputElement>()\n  const ref = (!isFn && innerRef) || refHook\n\n  useEffect(() => {\n    if (isFn) {\n      innerRef?.(ref.current)\n    }\n  }, [innerRef, isFn, ref])\n\n  const [isChecked, setIsChecked] = useState<boolean>(checked ?? false)\n  const [prevChecked, setPrevChecked] = useState<boolean>(checked)\n\n  useEffect(() => {\n    if (checked !== prevChecked) {\n      setIsChecked(!!checked)\n      setPrevChecked(!!checked)\n    }\n  }, [checked, prevChecked])\n\n  const callOnChange = useCallback(\n    (args: OnChangeParams) => {\n      onChange?.(args)\n    },\n    [onChange]\n  )\n\n  const onChangeHandler = useCallback(\n    (event) => {\n      if (readOnly) {\n        return event.preventDefault()\n      }\n      const updatedCheck = !isChecked\n\n      setIsChecked(updatedCheck)\n      callOnChange({ checked: updatedCheck, event })\n\n      // help firefox and safari to have an correct state after a click\n      if (ref.current) {\n        ref.current.focus()\n      }\n    },\n    [callOnChange, isChecked, readOnly, ref]\n  )\n\n  const onKeyDownHandler = useCallback(\n    (event) => {\n      switch (keycode(event)) {\n        case 'enter':\n          onChangeHandler(event)\n          break\n      }\n    },\n    [onChangeHandler]\n  )\n\n  const mainParams = {\n    className: classnames(\n      'dnb-checkbox',\n      status && `dnb-checkbox__status--${statusState}`,\n      size && `dnb-checkbox--${size}`,\n      label && `dnb-checkbox--label-position-${labelPosition || 'right'}`,\n      'dnb-form-component',\n      createSkeletonClass(null, skeleton),\n      createSpacingClasses(props),\n      className\n    ),\n  }\n\n  const showStatus = getStatusState(status)\n\n  const inputParams = handleInputAttributes()\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={statusState}\n      no_animation={statusNoAnimation}\n      skeleton={skeleton}\n      {...statusProps}\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            forId={id}\n            text={label}\n            disabled={disabled}\n            skeleton={skeleton}\n            srOnly={labelSrOnly}\n          />\n        )}\n\n        <span className=\"dnb-checkbox__inner\">\n          <AlignmentHelper />\n          {labelPosition === '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={isChecked ? value || '' : ''}\n              disabled={disabled}\n              {...inputParams}\n              onChange={onChangeHandler}\n              onKeyDown={onKeyDownHandler}\n              ref={ref}\n            />\n\n            <span\n              className={classnames(\n                'dnb-checkbox__button',\n                createSkeletonClass('shape', skeleton, 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      {(labelPosition === 'right' || !labelPosition) && statusComp}\n    </span>\n  )\n\n  /**\n   * Adds aria attributes, calls validateDOMAttributes and skeletonDOMAttributes and returns the result\n   */\n  function handleInputAttributes() {\n    const inputParams = {\n      disabled,\n      checked: isChecked,\n      readOnly,\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    // also used for code markup simulation\n    return validateDOMAttributes(\n      props,\n      skeletonDOMAttributes(inputParams, skeleton, context)\n    )\n  }\n\n  function extractPropsFromContext() {\n    return extendPropsWithContext(\n      convertSnakeCaseProps(localProps),\n      defaultProps,\n      context.Checkbox,\n      {\n        skeleton: context?.Checkbox,\n      },\n      // Deprecated – can be removed in v11\n      pickFormElementProps(context?.FormRow),\n      pickFormElementProps(context?.formElement)\n    )\n  }\n}\n\nexport default Checkbox\n"],"mappings":"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"}

package/components/tabs/style/dnb-tabs.css

@@ -249,7 +249,7 @@ html[data-whatinput=keyboard] .dnb-tabs__button:focus::before, html[data-whatinp
   right: -0.375rem;
   bottom: 0.5rem;
   border-radius: 1.5rem;
-  background-color: var(--sb-color-blue-light-3);
+  background-color: var(--tab-focus-background-color, none);
 }
 .dnb-tabs__button:not([disabled]):active::after, .dnb-tabs__button:not([disabled]).selected::after, .dnb-core-style .dnb-tabs .dnb-tabs__button:not([disabled]):active::after, .dnb-core-style .dnb-tabs .dnb-tabs__button:not([disabled]).selected::after {
   height: 2px;

package/components/tabs/style/dnb-tabs.min.css

@@ -1 +1 @@
-.dnb-tabs{--tablist-border-color--default:grey;--tab-title-font-weight:var(--font-weight-regular);--tab-title-font-size:var(--font-size-basis);--tab-title-font-color:dimgray;--tab-title-background--hover:#a9a9a9;--tab-title-color--hover:inherit;--tab-title-border--hover:#000;--tab-title-background--disabled:inherit;--tab-title-color--disabled:#d3d3d3;--tab-title-border--active-selected:#000;--tab-title-color--active-selected:#000;--tab-title-font-weight--selected:var(--font-weight-medium)}.dnb-tabs__tabs{align-items:center;display:flex;position:relative;z-index:1}.dnb-tabs__tabs,.dnb-tabs__tabs.dnb-section--spacing{padding-bottom:0}.dnb-tabs__tabs__tablist{-webkit-overflow-scrolling:touch;-ms-overflow-style:auto;-ms-overflow-style:none;display:flex;flex:0 1 auto;overflow-x:auto;overscroll-behavior:contain;scrollbar-color:var(--scrollbar-thumb-color,#888) transparent;scrollbar-width:none}.dnb-tabs__tabs__tablist:focus{border-radius:.5rem;outline:none}html[data-whatinput=keyboard] .dnb-tabs__tabs__tablist: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)}html:not([data-visual-test]) .dnb-tabs__tabs__tablist{scroll-behavior:smooth}@supports not (scrollbar-color:auto){.dnb-tabs__tabs__tablist::-webkit-scrollbar{background-color:var(--scrollbar-track-color,#eee);border-radius:var(--scrollbar-thumb-width,.5rem)}.dnb-tabs__tabs__tablist::-webkit-scrollbar:vertical{width:var(--scrollbar-track-width,.5rem)}.dnb-tabs__tabs__tablist::-webkit-scrollbar:horizontal{height:var(--scrollbar-track-width,.5rem)}.dnb-tabs__tabs__tablist::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb-color,#888);border-radius:var(--scrollbar-thumb-width,.5rem)}.dnb-tabs__tabs__tablist::-webkit-scrollbar-thumb:hover{background-color:var(--scrollbar-thumb-hover-color,#666)}}.dnb-tabs__tabs__tablist::-webkit-scrollbar{display:none}.dnb-tabs__tabs--left .dnb-tabs__tabs__tablist{justify-content:flex-start}.dnb-tabs__tabs--right .dnb-tabs__tabs__tablist{flex:1;justify-content:flex-end}.dnb-tabs__tabs--center .dnb-tabs__tabs__tablist{justify-content:center}.dnb-tabs__tabs:before{bottom:0;content:"";height:1px;position:absolute;width:100%;z-index:-1}.dnb-tabs__tabs--no-border:before{content:none}.dnb-tabs__tabs--breakout:before{left:-100vw;width:100vw}.dnb-tabs__tabs:not(.dnb-section):before{background-color:var(--tablist-border-color--default);box-shadow:100vw 0 0 0 var(--tablist-border-color--default)}.dnb-tabs__scroll-nav-button{display:none;opacity:0;pointer-events:none;position:absolute;right:-2px;transition:opacity .6s ease-out;z-index:2}.dnb-tabs__scroll-nav-button:first-of-type{left:-2px;right:auto}.dnb-tabs__scroll-nav-button--visible{display:flex;opacity:1;pointer-events:auto}.dnb-tabs__scroll-nav-button--hide{opacity:0!important;pointer-events:none}.dnb-tabs--at-edge .dnb-tabs__scroll-nav-button:first-of-type{border-radius:0 50% 50% 0}.dnb-tabs--at-edge .dnb-tabs__scroll-nav-button:last-of-type{border-radius:50% 0 0 50%}.dnb-tabs--at-edge .dnb-tabs__tabs__tablist:focus{border-radius:0}.dnb-core-style .dnb-tabs .dnb-tabs__button,.dnb-tabs__button{background-color:transparent;border:none;cursor:pointer;font-size:var(--font-size-basis);line-height:var(--line-height-basis);margin:0;outline:none;padding:0 .125rem;position:relative;-webkit-text-decoration:none;text-decoration:none;transition:margin .4s ease-out;user-select:none;-webkit-user-select:none;white-space:nowrap;z-index:1}.dnb-core-style .dnb-tabs .dnb-tabs__button__title,.dnb-tabs__button__title{color:var(--tab-title-font-color);display:block;font-size:var(--tab-title-font-size);font-weight:var(--tab-title-font-weight);padding:.5rem 0 .25rem;text-align:center}html:not([data-whatintent=touch]) .dnb-core-style .dnb-tabs .dnb-tabs__button__title:hover[disabled],html:not([data-whatintent=touch]) .dnb-tabs__button__title:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-core-style .dnb-tabs .dnb-tabs__button__title:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-tabs__button__title:hover:not([disabled]){color:var(--tab-title-color--hover)}.dnb-core-style .dnb-tabs .dnb-tabs__button__title .dnb-icon,.dnb-tabs__button__title .dnb-icon{font-size:var(--font-size-small);transform:translateY(-.125rem)}html:not([data-whatintent=touch]) .dnb-core-style .dnb-tabs .dnb-tabs__button:hover[disabled],html:not([data-whatintent=touch]) .dnb-tabs__button:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-core-style .dnb-tabs .dnb-tabs__button:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-tabs__button:hover:not([disabled]){background-color:var(--tab-title-background--hover)}html:not([data-whatintent=touch]) .dnb-core-style .dnb-tabs .dnb-tabs__button:hover:not([disabled]):after,html:not([data-whatintent=touch]) .dnb-tabs__button:hover:not([disabled]):after{background-color:var(--tab-title-border--hover);border-radius:2px;height:2px}.dnb-core-style .dnb-tabs .dnb-tabs__button .dnb-dummy,.dnb-tabs__button .dnb-dummy{display:flex;flex-direction:column;height:0;margin-top:.25rem;overflow:hidden;visibility:hidden}.dnb-core-style .dnb-tabs .dnb-tabs__button:after,.dnb-tabs__button:after{bottom:0;content:"";height:1px;left:0;position:absolute;right:0;width:100%;z-index:-1}.dnb-core-style .dnb-tabs .dnb-tabs__button[disabled],.dnb-tabs__button[disabled]{background-color:var(--tab-title-background--disabled)}.dnb-core-style .dnb-tabs .dnb-tabs__button[disabled] .dnb-core-style .dnb-tabs .dnb-tabs__button__title,.dnb-core-style .dnb-tabs .dnb-tabs__button[disabled] .dnb-tabs__button__title,.dnb-tabs__button[disabled] .dnb-core-style .dnb-tabs .dnb-tabs__button__title,.dnb-tabs__button[disabled] .dnb-tabs__button__title{color:var(--tab-title-color--disabled)}.dnb-core-style .dnb-tabs .dnb-tabs__button span[hidden],.dnb-tabs__button span[hidden]{font-weight:var(--tab-title-font-weight--selected)}.dnb-core-style .dnb-tabs .dnb-tabs__button:focus,.dnb-tabs__button:focus{overflow:visible}.dnb-core-style .dnb-tabs .dnb-tabs__button:focus:before,.dnb-tabs__button:focus:before{border-radius:inherit;bottom:0;content:"";height:inherit;left:-.5rem;outline:none;position:absolute;right:-.5rem;top:0;z-index:1}html[data-whatinput=keyboard] .dnb-core-style .dnb-tabs .dnb-tabs__button:focus:before,html[data-whatinput=keyboard] .dnb-tabs__button: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-core-style .dnb-tabs .dnb-tabs__button:focus:before,.dnb-tabs__button:focus:before{background-color:var(--sb-color-blue-light-3);border-radius:1.5rem;bottom:.5rem;left:-.375rem;right:-.375rem;top:.5rem}.dnb-core-style .dnb-tabs .dnb-tabs__button:not([disabled]).selected:after,.dnb-core-style .dnb-tabs .dnb-tabs__button:not([disabled]):active:after,.dnb-tabs__button:not([disabled]).selected:after,.dnb-tabs__button:not([disabled]):active:after{background-color:var(--tab-title-border--active-selected);border-radius:2px;height:2px}.dnb-core-style .dnb-tabs .dnb-tabs__button:not([disabled]).selected .dnb-core-style .dnb-tabs .dnb-tabs__button__title,.dnb-core-style .dnb-tabs .dnb-tabs__button:not([disabled]).selected .dnb-tabs__button__title,.dnb-core-style .dnb-tabs .dnb-tabs__button:not([disabled]):active .dnb-core-style .dnb-tabs .dnb-tabs__button__title,.dnb-core-style .dnb-tabs .dnb-tabs__button:not([disabled]):active .dnb-tabs__button__title,.dnb-tabs__button:not([disabled]).selected .dnb-core-style .dnb-tabs .dnb-tabs__button__title,.dnb-tabs__button:not([disabled]).selected .dnb-tabs__button__title,.dnb-tabs__button:not([disabled]):active .dnb-core-style .dnb-tabs .dnb-tabs__button__title,.dnb-tabs__button:not([disabled]):active .dnb-tabs__button__title{color:var(--tab-title-color--active-selected)}.dnb-core-style .dnb-tabs .dnb-tabs__button:not([disabled]).selected .dnb-core-style .dnb-tabs .dnb-tabs__button__title,.dnb-core-style .dnb-tabs .dnb-tabs__button:not([disabled]).selected .dnb-tabs__button__title,.dnb-tabs__button:not([disabled]).selected .dnb-core-style .dnb-tabs .dnb-tabs__button__title,.dnb-tabs__button:not([disabled]).selected .dnb-tabs__button__title{font-weight:var(--tab-title-font-weight--selected)}.dnb-tabs__button__snap{display:flex;padding:0 1rem 0 1.5rem;transition:padding 1s var(--easing-default);will-change:padding}@media screen and (max-width:40em){.dnb-tabs__button__snap{padding:0 1rem}}.dnb-tabs__button__snap:first-of-type{padding-left:0}.dnb-tabs__button__snap:last-of-type{padding-right:.5rem}html[data-whatinput=keyboard] .dnb-tabs__button__snap:first-of-type.focus .dnb-tabs__button:focus{margin-left:.5rem}html[data-whatinput=keyboard] .dnb-tabs__button__snap:last-of-type.focus .dnb-tabs__button:focus{margin-right:.5rem}.dnb-tabs__cached{opacity:1;transition:opacity 1s var(--easing-default)}.dnb-tabs__cached--hidden{height:0!important;opacity:0;overflow:hidden;visibility:hidden}html[data-visual-test] .dnb-tabs .dnb-tabs__button,html[data-visual-test] .dnb-tabs .dnb-tabs__button__snap,html[data-visual-test] .dnb-tabs .dnb-tabs__cached,html[data-visual-test] .dnb-tabs .dnb-tabs__scroll-nav-button{transition:none!important}.dnb-tabs__content{padding-bottom:0}.dnb-tabs__content:focus{position:relative}.dnb-tabs__content:focus:before{border-radius:.5rem;bottom:-.5rem;content:"";left:-.5rem;max-width:100vw;outline:none;position:absolute;right:-.5rem;top:.125rem;z-index:-1}html[data-whatinput=keyboard] .dnb-tabs__content: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-tabs{--tablist-border-color--default:grey;--tab-title-font-weight:var(--font-weight-regular);--tab-title-font-size:var(--font-size-basis);--tab-title-font-color:dimgray;--tab-title-background--hover:#a9a9a9;--tab-title-color--hover:inherit;--tab-title-border--hover:#000;--tab-title-background--disabled:inherit;--tab-title-color--disabled:#d3d3d3;--tab-title-border--active-selected:#000;--tab-title-color--active-selected:#000;--tab-title-font-weight--selected:var(--font-weight-medium)}.dnb-tabs__tabs{align-items:center;display:flex;position:relative;z-index:1}.dnb-tabs__tabs,.dnb-tabs__tabs.dnb-section--spacing{padding-bottom:0}.dnb-tabs__tabs__tablist{-webkit-overflow-scrolling:touch;-ms-overflow-style:auto;-ms-overflow-style:none;display:flex;flex:0 1 auto;overflow-x:auto;overscroll-behavior:contain;scrollbar-color:var(--scrollbar-thumb-color,#888) transparent;scrollbar-width:none}.dnb-tabs__tabs__tablist:focus{border-radius:.5rem;outline:none}html[data-whatinput=keyboard] .dnb-tabs__tabs__tablist: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)}html:not([data-visual-test]) .dnb-tabs__tabs__tablist{scroll-behavior:smooth}@supports not (scrollbar-color:auto){.dnb-tabs__tabs__tablist::-webkit-scrollbar{background-color:var(--scrollbar-track-color,#eee);border-radius:var(--scrollbar-thumb-width,.5rem)}.dnb-tabs__tabs__tablist::-webkit-scrollbar:vertical{width:var(--scrollbar-track-width,.5rem)}.dnb-tabs__tabs__tablist::-webkit-scrollbar:horizontal{height:var(--scrollbar-track-width,.5rem)}.dnb-tabs__tabs__tablist::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb-color,#888);border-radius:var(--scrollbar-thumb-width,.5rem)}.dnb-tabs__tabs__tablist::-webkit-scrollbar-thumb:hover{background-color:var(--scrollbar-thumb-hover-color,#666)}}.dnb-tabs__tabs__tablist::-webkit-scrollbar{display:none}.dnb-tabs__tabs--left .dnb-tabs__tabs__tablist{justify-content:flex-start}.dnb-tabs__tabs--right .dnb-tabs__tabs__tablist{flex:1;justify-content:flex-end}.dnb-tabs__tabs--center .dnb-tabs__tabs__tablist{justify-content:center}.dnb-tabs__tabs:before{bottom:0;content:"";height:1px;position:absolute;width:100%;z-index:-1}.dnb-tabs__tabs--no-border:before{content:none}.dnb-tabs__tabs--breakout:before{left:-100vw;width:100vw}.dnb-tabs__tabs:not(.dnb-section):before{background-color:var(--tablist-border-color--default);box-shadow:100vw 0 0 0 var(--tablist-border-color--default)}.dnb-tabs__scroll-nav-button{display:none;opacity:0;pointer-events:none;position:absolute;right:-2px;transition:opacity .6s ease-out;z-index:2}.dnb-tabs__scroll-nav-button:first-of-type{left:-2px;right:auto}.dnb-tabs__scroll-nav-button--visible{display:flex;opacity:1;pointer-events:auto}.dnb-tabs__scroll-nav-button--hide{opacity:0!important;pointer-events:none}.dnb-tabs--at-edge .dnb-tabs__scroll-nav-button:first-of-type{border-radius:0 50% 50% 0}.dnb-tabs--at-edge .dnb-tabs__scroll-nav-button:last-of-type{border-radius:50% 0 0 50%}.dnb-tabs--at-edge .dnb-tabs__tabs__tablist:focus{border-radius:0}.dnb-core-style .dnb-tabs .dnb-tabs__button,.dnb-tabs__button{background-color:transparent;border:none;cursor:pointer;font-size:var(--font-size-basis);line-height:var(--line-height-basis);margin:0;outline:none;padding:0 .125rem;position:relative;-webkit-text-decoration:none;text-decoration:none;transition:margin .4s ease-out;user-select:none;-webkit-user-select:none;white-space:nowrap;z-index:1}.dnb-core-style .dnb-tabs .dnb-tabs__button__title,.dnb-tabs__button__title{color:var(--tab-title-font-color);display:block;font-size:var(--tab-title-font-size);font-weight:var(--tab-title-font-weight);padding:.5rem 0 .25rem;text-align:center}html:not([data-whatintent=touch]) .dnb-core-style .dnb-tabs .dnb-tabs__button__title:hover[disabled],html:not([data-whatintent=touch]) .dnb-tabs__button__title:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-core-style .dnb-tabs .dnb-tabs__button__title:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-tabs__button__title:hover:not([disabled]){color:var(--tab-title-color--hover)}.dnb-core-style .dnb-tabs .dnb-tabs__button__title .dnb-icon,.dnb-tabs__button__title .dnb-icon{font-size:var(--font-size-small);transform:translateY(-.125rem)}html:not([data-whatintent=touch]) .dnb-core-style .dnb-tabs .dnb-tabs__button:hover[disabled],html:not([data-whatintent=touch]) .dnb-tabs__button:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-core-style .dnb-tabs .dnb-tabs__button:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-tabs__button:hover:not([disabled]){background-color:var(--tab-title-background--hover)}html:not([data-whatintent=touch]) .dnb-core-style .dnb-tabs .dnb-tabs__button:hover:not([disabled]):after,html:not([data-whatintent=touch]) .dnb-tabs__button:hover:not([disabled]):after{background-color:var(--tab-title-border--hover);border-radius:2px;height:2px}.dnb-core-style .dnb-tabs .dnb-tabs__button .dnb-dummy,.dnb-tabs__button .dnb-dummy{display:flex;flex-direction:column;height:0;margin-top:.25rem;overflow:hidden;visibility:hidden}.dnb-core-style .dnb-tabs .dnb-tabs__button:after,.dnb-tabs__button:after{bottom:0;content:"";height:1px;left:0;position:absolute;right:0;width:100%;z-index:-1}.dnb-core-style .dnb-tabs .dnb-tabs__button[disabled],.dnb-tabs__button[disabled]{background-color:var(--tab-title-background--disabled)}.dnb-core-style .dnb-tabs .dnb-tabs__button[disabled] .dnb-core-style .dnb-tabs .dnb-tabs__button__title,.dnb-core-style .dnb-tabs .dnb-tabs__button[disabled] .dnb-tabs__button__title,.dnb-tabs__button[disabled] .dnb-core-style .dnb-tabs .dnb-tabs__button__title,.dnb-tabs__button[disabled] .dnb-tabs__button__title{color:var(--tab-title-color--disabled)}.dnb-core-style .dnb-tabs .dnb-tabs__button span[hidden],.dnb-tabs__button span[hidden]{font-weight:var(--tab-title-font-weight--selected)}.dnb-core-style .dnb-tabs .dnb-tabs__button:focus,.dnb-tabs__button:focus{overflow:visible}.dnb-core-style .dnb-tabs .dnb-tabs__button:focus:before,.dnb-tabs__button:focus:before{border-radius:inherit;bottom:0;content:"";height:inherit;left:-.5rem;outline:none;position:absolute;right:-.5rem;top:0;z-index:1}html[data-whatinput=keyboard] .dnb-core-style .dnb-tabs .dnb-tabs__button:focus:before,html[data-whatinput=keyboard] .dnb-tabs__button: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-core-style .dnb-tabs .dnb-tabs__button:focus:before,.dnb-tabs__button:focus:before{background-color:var(--tab-focus-background-color,none);border-radius:1.5rem;bottom:.5rem;left:-.375rem;right:-.375rem;top:.5rem}.dnb-core-style .dnb-tabs .dnb-tabs__button:not([disabled]).selected:after,.dnb-core-style .dnb-tabs .dnb-tabs__button:not([disabled]):active:after,.dnb-tabs__button:not([disabled]).selected:after,.dnb-tabs__button:not([disabled]):active:after{background-color:var(--tab-title-border--active-selected);border-radius:2px;height:2px}.dnb-core-style .dnb-tabs .dnb-tabs__button:not([disabled]).selected .dnb-core-style .dnb-tabs .dnb-tabs__button__title,.dnb-core-style .dnb-tabs .dnb-tabs__button:not([disabled]).selected .dnb-tabs__button__title,.dnb-core-style .dnb-tabs .dnb-tabs__button:not([disabled]):active .dnb-core-style .dnb-tabs .dnb-tabs__button__title,.dnb-core-style .dnb-tabs .dnb-tabs__button:not([disabled]):active .dnb-tabs__button__title,.dnb-tabs__button:not([disabled]).selected .dnb-core-style .dnb-tabs .dnb-tabs__button__title,.dnb-tabs__button:not([disabled]).selected .dnb-tabs__button__title,.dnb-tabs__button:not([disabled]):active .dnb-core-style .dnb-tabs .dnb-tabs__button__title,.dnb-tabs__button:not([disabled]):active .dnb-tabs__button__title{color:var(--tab-title-color--active-selected)}.dnb-core-style .dnb-tabs .dnb-tabs__button:not([disabled]).selected .dnb-core-style .dnb-tabs .dnb-tabs__button__title,.dnb-core-style .dnb-tabs .dnb-tabs__button:not([disabled]).selected .dnb-tabs__button__title,.dnb-tabs__button:not([disabled]).selected .dnb-core-style .dnb-tabs .dnb-tabs__button__title,.dnb-tabs__button:not([disabled]).selected .dnb-tabs__button__title{font-weight:var(--tab-title-font-weight--selected)}.dnb-tabs__button__snap{display:flex;padding:0 1rem 0 1.5rem;transition:padding 1s var(--easing-default);will-change:padding}@media screen and (max-width:40em){.dnb-tabs__button__snap{padding:0 1rem}}.dnb-tabs__button__snap:first-of-type{padding-left:0}.dnb-tabs__button__snap:last-of-type{padding-right:.5rem}html[data-whatinput=keyboard] .dnb-tabs__button__snap:first-of-type.focus .dnb-tabs__button:focus{margin-left:.5rem}html[data-whatinput=keyboard] .dnb-tabs__button__snap:last-of-type.focus .dnb-tabs__button:focus{margin-right:.5rem}.dnb-tabs__cached{opacity:1;transition:opacity 1s var(--easing-default)}.dnb-tabs__cached--hidden{height:0!important;opacity:0;overflow:hidden;visibility:hidden}html[data-visual-test] .dnb-tabs .dnb-tabs__button,html[data-visual-test] .dnb-tabs .dnb-tabs__button__snap,html[data-visual-test] .dnb-tabs .dnb-tabs__cached,html[data-visual-test] .dnb-tabs .dnb-tabs__scroll-nav-button{transition:none!important}.dnb-tabs__content{padding-bottom:0}.dnb-tabs__content:focus{position:relative}.dnb-tabs__content:focus:before{border-radius:.5rem;bottom:-.5rem;content:"";left:-.5rem;max-width:100vw;outline:none;position:absolute;right:-.5rem;top:.125rem;z-index:-1}html[data-whatinput=keyboard] .dnb-tabs__content: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)}

package/components/tabs/style/dnb-tabs.scss

@@ -234,7 +234,7 @@
         right: -0.375rem; // For overflow purposes
         bottom: 0.5rem;
         border-radius: 1.5rem;
-        background-color: var(--sb-color-blue-light-3);
+        background-color: var(--tab-focus-background-color, none);
       }
     }
 

package/components/tabs/style/themes/dnb-tabs-theme-sbanken.css

@@ -4,6 +4,7 @@
 */
 .dnb-tabs {
   --tablist-border-color--default: var(--sb-color-gray-light-2);
+  --tab-focus-background-color: var(--sb-color-blue-light-3);
   --tab-title-font-color: var(--sb-color-gray-dark-3);
   --tab-title-font-weight: var(--font-weight-regular);
   --tab-title-font-size: var(--font-size-basis);

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

@@ -1 +1 @@
-.dnb-tabs{--tablist-border-color--default:var(--sb-color-gray-light-2);--tab-title-font-color:var(--sb-color-gray-dark-3);--tab-title-font-weight:var(--font-weight-regular);--tab-title-font-size:var(--font-size-basis);--tab-title-background--hover:var(--sb-color-violet-light-4);--tab-title-color--hover:var(--sb-color-violet);--tab-title-border--hover:var(--sb-color-violet-light-4);--tab-title-background--disabled:var(--sb-color-gray-light-2);--tab-title-color--disabled:var(--sb-color-gray-dark-2);--tab-title-border--active-selected:var(--sb-color-violet);--tab-title-color--active-selected:var(--sb-color-violet)}.dnb-core-style .dnb-tabs .dnb-tabs__button,.dnb-tabs__button{padding:0 .5rem}.dnb-core-style .dnb-tabs .dnb-tabs__button:focus:before,.dnb-tabs__button:focus:before{z-index:-1}.dnb-core-style .dnb-tabs .dnb-tabs__button:focus .dnb-tabs__button__title,.dnb-core-style .dnb-tabs .dnb-tabs__button:not([disabled]).selected:focus .dnb-tabs__button__title,.dnb-tabs__button:focus .dnb-tabs__button__title,.dnb-tabs__button:not([disabled]).selected:focus .dnb-tabs__button__title{color:var(--sb-color-blue-dark)}
+.dnb-tabs{--tablist-border-color--default:var(--sb-color-gray-light-2);--tab-focus-background-color:var(--sb-color-blue-light-3);--tab-title-font-color:var(--sb-color-gray-dark-3);--tab-title-font-weight:var(--font-weight-regular);--tab-title-font-size:var(--font-size-basis);--tab-title-background--hover:var(--sb-color-violet-light-4);--tab-title-color--hover:var(--sb-color-violet);--tab-title-border--hover:var(--sb-color-violet-light-4);--tab-title-background--disabled:var(--sb-color-gray-light-2);--tab-title-color--disabled:var(--sb-color-gray-dark-2);--tab-title-border--active-selected:var(--sb-color-violet);--tab-title-color--active-selected:var(--sb-color-violet)}.dnb-core-style .dnb-tabs .dnb-tabs__button,.dnb-tabs__button{padding:0 .5rem}.dnb-core-style .dnb-tabs .dnb-tabs__button:focus:before,.dnb-tabs__button:focus:before{z-index:-1}.dnb-core-style .dnb-tabs .dnb-tabs__button:focus .dnb-tabs__button__title,.dnb-core-style .dnb-tabs .dnb-tabs__button:not([disabled]).selected:focus .dnb-tabs__button__title,.dnb-tabs__button:focus .dnb-tabs__button__title,.dnb-tabs__button:not([disabled]).selected:focus .dnb-tabs__button__title{color:var(--sb-color-blue-dark)}

package/components/tabs/style/themes/dnb-tabs-theme-sbanken.scss

@@ -5,6 +5,7 @@
 
 .dnb-tabs {
   --tablist-border-color--default: var(--sb-color-gray-light-2);
+  --tab-focus-background-color: var(--sb-color-blue-light-3);
   --tab-title-font-color: var(--sb-color-gray-dark-3);
   --tab-title-font-weight: var(--font-weight-regular);
   --tab-title-font-size: var(--font-size-basis);