@dnb/eufemia 10.14.0 → 10.15.1

package/cjs/components/section/Section.js.map

@@ -1 +1 @@
-{"version":3,"file":"Section.js","names":["_react","_interopRequireDefault","require","_classnames","_Context","_componentHelper","_Space","_excluded","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","getOwnPropertyDescriptor","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","defineProperty","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","defaultProps","element","Section","localProps","context","React","useContext","Context","props","extendPropsWithContext","variant","breakout","roundedCorner","textColor","backgroundColor","outline","innerRef","className","children","spacing","style_type","inner_ref","attributes","params","classnames","isTrue","internalRef","useRef","elementRef","styleObj","computeStyle","getColor","style","createElement","test","property","name","valueCallback","media","small","medium","large","result","size","_media","_media2","_name","_supportsSpacingProps"],"sources":["../../../../src/components/section/Section.tsx"],"sourcesContent":["/**\n * Web Section Component\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport Context from '../../shared/Context'\nimport {\n  isTrue,\n  extendPropsWithContext,\n} from '../../shared/component-helper'\nimport type {\n  DynamicElement,\n  ResponsiveProp,\n  SpacingProps,\n} from '../../shared/types'\nimport Space from '../space/Space'\n\nexport type SectionVariants = 'error' | 'info' | 'warning' | 'success'\n\nexport type SectionStyleTypes =\n  | 'divider'\n  | 'white'\n  | 'transparent'\n\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'lavender'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'pistachio'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'emerald-green'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'sea-green'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'fire-red'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'fire-red-8'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'sand-yellow'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'black-3'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'mint-green'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'mint-green-12'\n\nexport type SectionSpacing =\n  | boolean\n  | 'x-small'\n  | 'small'\n  | 'medium'\n  | 'large'\n  | 'x-large'\n  | 'xx-large'\n\nexport type TextColor = string\nexport type OutlineColor = string | boolean\nexport type BackgroundColor = string\n\nexport type SectionProps = {\n  /**\n   * Defines the semantic purpose and subsequently the style of the visual helper. Will take precedence over the style_type prop\n   */\n  variant?: SectionVariants | string\n\n  /**\n   * Define if the background color should break-out to a fullscreen view. Defaults to `true`.\n   */\n  breakout?: boolean | ResponsiveProp<boolean>\n\n  /**\n   * Define if the section should have rounded corners. Defaults to `false`.\n   */\n  roundedCorner?: boolean | ResponsiveProp<boolean>\n\n  /**\n   * Define a custom border color. Use a Eufemia color.\n   */\n  outline?: OutlineColor | ResponsiveProp<OutlineColor>\n\n  /**\n   * Define a custom text color to compliment the backgroundColor. Use a Eufemia color.\n   */\n  textColor?: TextColor | ResponsiveProp<TextColor>\n\n  /**\n   * Define a custom background color, instead of a variant. Use a Eufemia color.\n   */\n  backgroundColor?: BackgroundColor | ResponsiveProp<BackgroundColor>\n\n  /**\n   * Define what HTML element should be used. Defaults to `<section>`.\n   */\n  element?: DynamicElement\n\n  /**\n   * Define a React.Ref.\n   */\n  innerRef?: React.RefObject<HTMLElement>\n\n  /**\n   * @deprecated in v11 use \"innerSpace\" prop instead */\n  spacing?: SectionSpacing | ResponsiveProp<SectionSpacing>\n  /**\n   * @deprecated in v11 use \"background\" prop instead */\n  style_type?: SectionStyleTypes | string\n  /**\n   * @deprecated in v11 use \"innerRef\" prop instead */\n  inner_ref?: React.RefObject<HTMLElement>\n}\n\nexport type SectionAllProps = SectionProps &\n  SpacingProps &\n  Omit<React.HTMLProps<HTMLElement>, 'ref'>\n\ntype Attributes = Record<string, unknown> & { style?: React.CSSProperties }\n\nconst defaultProps = {\n  element: 'section',\n}\n\nexport default function Section(localProps: SectionAllProps) {\n  const context = React.useContext(Context)\n\n  // use only the props from context, who are available here anyway\n  const props = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context.Section\n  )\n\n  const {\n    element,\n    variant,\n    breakout = true,\n    roundedCorner,\n    textColor,\n    backgroundColor,\n    outline,\n    innerRef,\n\n    className,\n    children,\n\n    spacing,\n    style_type,\n    inner_ref,\n\n    ...attributes\n  } = props\n\n  const params = {\n    className: classnames(\n      'dnb-section',\n      `dnb-section--${variant ? variant : style_type || 'default'}`,\n      spacing &&\n        `dnb-section--spacing-${isTrue(spacing) ? 'large' : spacing}`,\n      className\n    ),\n    ...attributes,\n  } as Attributes\n\n  const internalRef = React.useRef<HTMLElement>()\n  const elementRef = innerRef || inner_ref || internalRef\n  params.innerRef = elementRef\n\n  const styleObj = {\n    ...computeStyle(\n      breakout,\n      'breakout',\n      (value) => `var(--breakout--${value ? 'on' : 'off'})`\n    ),\n    ...computeStyle(\n      roundedCorner,\n      'rounded-corner',\n      (value) => value && 'var(--rounded-corner--value)'\n    ),\n    ...computeStyle(textColor, 'text-color', (value) => getColor(value)),\n    ...computeStyle(backgroundColor, 'background-color', (value) =>\n      getColor(value)\n    ),\n    ...computeStyle(outline, 'outline-color', (value) =>\n      String(value) === 'true'\n        ? 'var(--outline-color--value)'\n        : getColor(value)\n    ),\n    ...params?.style,\n  } as React.CSSProperties\n\n  return (\n    <Space {...params} element={element} style={styleObj}>\n      {children}\n    </Space>\n  )\n}\n\nfunction getColor(value: string) {\n  return value\n    ? !/#|var/.test(value)\n      ? `var(--color-${value})`\n      : value\n    : undefined\n}\n\nfunction computeStyle(\n  property: ResponsiveProp<unknown> | boolean | string,\n  name: string,\n  valueCallback: (value: string) => string | undefined\n) {\n  let media = property as ResponsiveProp<unknown>\n\n  if (media !== null && typeof media !== 'object') {\n    media = {\n      small: property,\n      medium: property,\n      large: property,\n    } as ResponsiveProp<unknown>\n  }\n\n  const result = {}\n\n  for (const size in media as ResponsiveProp<unknown>) {\n    if (typeof media?.[size] !== 'undefined') {\n      const value = valueCallback(media?.[size])\n      if (typeof value === 'string') {\n        result[`--${name}--${size}`] = value\n      }\n    }\n  }\n\n  return result\n}\n\nSection._name = 'Section'\nSection._supportsSpacingProps = true\n"],"mappings":"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"}
+{"version":3,"file":"Section.js","names":["_react","_interopRequireDefault","require","_classnames","_Context","_componentHelper","_Space","_excluded","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","getOwnPropertyDescriptor","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","defineProperty","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","defaultProps","element","Section","localProps","context","React","useContext","Context","props","extendPropsWithContext","variant","breakout","roundedCorner","textColor","backgroundColor","dropShadow","outline","innerRef","className","children","spacing","style_type","inner_ref","attributes","params","classnames","isTrue","internalRef","useRef","elementRef","styleObj","computeStyle","getColor","style","createElement","test","property","name","valueCallback","media","small","medium","large","result","size","_media","_media2","_name","_supportsSpacingProps"],"sources":["../../../../src/components/section/Section.tsx"],"sourcesContent":["/**\n * Web Section Component\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport Context from '../../shared/Context'\nimport {\n  isTrue,\n  extendPropsWithContext,\n} from '../../shared/component-helper'\nimport type {\n  DynamicElement,\n  ResponsiveProp,\n  SpacingProps,\n} from '../../shared/types'\nimport Space from '../space/Space'\n\nexport type SectionVariants = 'error' | 'info' | 'warning' | 'success'\n\nexport type SectionStyleTypes =\n  | 'divider'\n  | 'white'\n  | 'transparent'\n\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'lavender'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'pistachio'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'emerald-green'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'sea-green'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'fire-red'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'fire-red-8'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'sand-yellow'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'black-3'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'mint-green'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'mint-green-12'\n\nexport type SectionSpacing =\n  | boolean\n  | 'x-small'\n  | 'small'\n  | 'medium'\n  | 'large'\n  | 'x-large'\n  | 'xx-large'\n\nexport type TextColor = string\nexport type OutlineColor = string | boolean\nexport type BackgroundColor = string\nexport type DropShadow = boolean\n\nexport type SectionProps = {\n  /**\n   * Defines the semantic purpose and subsequently the style of the visual helper. Will take precedence over the style_type prop\n   */\n  variant?: SectionVariants | string\n\n  /**\n   * Define if the background color should break-out to a fullscreen view. Defaults to `true`.\n   */\n  breakout?: boolean | ResponsiveProp<boolean>\n\n  /**\n   * Define if the section should have rounded corners. Defaults to `false`.\n   */\n  roundedCorner?: boolean | ResponsiveProp<boolean>\n\n  /**\n   * Define a custom border color. Use a Eufemia color.\n   */\n  outline?: OutlineColor | ResponsiveProp<OutlineColor>\n\n  /**\n   * Define a custom text color to compliment the backgroundColor. Use a Eufemia color.\n   */\n  textColor?: TextColor | ResponsiveProp<TextColor>\n\n  /**\n   * Define a custom background color, instead of a variant. Use a Eufemia color.\n   */\n  backgroundColor?: BackgroundColor | ResponsiveProp<BackgroundColor>\n\n  /**\n   * Define a custom drop-shadow.\n   */\n  dropShadow?: DropShadow | ResponsiveProp<DropShadow>\n\n  /**\n   * Define what HTML element should be used. Defaults to `<section>`.\n   */\n  element?: DynamicElement\n\n  /**\n   * Define a React.Ref.\n   */\n  innerRef?: React.RefObject<HTMLElement>\n\n  /**\n   * @deprecated in v11 use \"innerSpace\" prop instead */\n  spacing?: SectionSpacing | ResponsiveProp<SectionSpacing>\n  /**\n   * @deprecated in v11 use \"background\" prop instead */\n  style_type?: SectionStyleTypes | string\n  /**\n   * @deprecated in v11 use \"innerRef\" prop instead */\n  inner_ref?: React.RefObject<HTMLElement>\n}\n\nexport type SectionAllProps = SectionProps &\n  SpacingProps &\n  Omit<React.HTMLProps<HTMLElement>, 'ref'>\n\ntype Attributes = Record<string, unknown> & { style?: React.CSSProperties }\n\nconst defaultProps = {\n  element: 'section',\n}\n\nexport default function Section(localProps: SectionAllProps) {\n  const context = React.useContext(Context)\n\n  // use only the props from context, who are available here anyway\n  const props = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context.Section\n  )\n\n  const {\n    element,\n    variant,\n    breakout = true,\n    roundedCorner,\n    textColor,\n    backgroundColor,\n    dropShadow,\n    outline,\n    innerRef,\n\n    className,\n    children,\n\n    spacing,\n    style_type,\n    inner_ref,\n\n    ...attributes\n  } = props\n\n  const params = {\n    className: classnames(\n      'dnb-section',\n      `dnb-section--${variant ? variant : style_type || 'default'}`,\n      spacing &&\n        `dnb-section--spacing-${isTrue(spacing) ? 'large' : spacing}`,\n      className\n    ),\n    ...attributes,\n  } as Attributes\n\n  const internalRef = React.useRef<HTMLElement>()\n  const elementRef = innerRef || inner_ref || internalRef\n  params.innerRef = elementRef\n\n  const styleObj = {\n    ...computeStyle(\n      breakout,\n      'breakout',\n      (value) => `var(--breakout--${value ? 'on' : 'off'})`\n    ),\n    ...computeStyle(\n      roundedCorner,\n      'rounded-corner',\n      (value) => value && 'var(--rounded-corner--value)'\n    ),\n    ...computeStyle(textColor, 'text-color', (value) => getColor(value)),\n    ...computeStyle(backgroundColor, 'background-color', (value) =>\n      getColor(value)\n    ),\n    ...computeStyle(\n      dropShadow,\n      'drop-shadow',\n      (value) => value && 'var(--shadow-default)'\n    ),\n    ...computeStyle(outline, 'outline-color', (value) =>\n      String(value) === 'true'\n        ? 'var(--outline-color--value)'\n        : getColor(value)\n    ),\n    ...params?.style,\n  } as React.CSSProperties\n\n  return (\n    <Space {...params} element={element} style={styleObj}>\n      {children}\n    </Space>\n  )\n}\n\nfunction getColor(value: string) {\n  return value\n    ? !/#|var/.test(value)\n      ? `var(--color-${value})`\n      : value\n    : undefined\n}\n\nfunction computeStyle(\n  property: ResponsiveProp<unknown> | boolean | string,\n  name: string,\n  valueCallback: (value: string) => string | undefined\n) {\n  let media = property as ResponsiveProp<unknown>\n\n  if (media !== null && typeof media !== 'object') {\n    media = {\n      small: property,\n      medium: property,\n      large: property,\n    } as ResponsiveProp<unknown>\n  }\n\n  const result = {}\n\n  for (const size in media as ResponsiveProp<unknown>) {\n    if (typeof media?.[size] !== 'undefined') {\n      const value = valueCallback(media?.[size])\n      if (typeof value === 'string') {\n        result[`--${name}--${size}`] = value\n      }\n    }\n  }\n\n  return result\n}\n\nSection._name = 'Section'\nSection._supportsSpacingProps = true\n"],"mappings":"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"}

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

@@ -23,6 +23,13 @@
 .dnb-section[style*="--background-color"] {
   background-color: var(--background-color, white);
 }
+.dnb-section::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  box-shadow: var(--drop-shadow, none);
+  border-radius: var(--rounded-corner, 0);
+}
 .dnb-section::after {
   content: "";
   visibility: var(--breakout, hidden);
@@ -47,6 +54,7 @@
     --background-color--value: var(--background-color--small);
     --text-color--value: var(--text-color--small);
     --outline-color: var(--outline-color--small);
+    --drop-shadow: var(--drop-shadow--small);
     --rounded-corner: var(
       --rounded-corner--small,
       var(--rounded-corner--fallback)
@@ -59,6 +67,7 @@
     --background-color--value: var(--background-color--medium);
     --text-color--value: var(--text-color--medium);
     --outline-color: var(--outline-color--medium);
+    --drop-shadow: var(--drop-shadow--medium);
     --rounded-corner: var(
       --rounded-corner--medium,
       var(--rounded-corner--fallback)
@@ -71,6 +80,7 @@
     --background-color--value: var(--background-color--large);
     --text-color--value: var(--text-color--large);
     --outline-color: var(--outline-color--large);
+    --drop-shadow: var(--drop-shadow--large);
     --rounded-corner: var(
       --rounded-corner--large,
       var(--rounded-corner--fallback)

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

@@ -1,7 +1,7 @@
-.dnb-section{--breakout--on:visible;--breakout--off:hidden;--rounded-corner--value:0.75rem;--outline:0 0 0 1px var(--outline-color,transparent);--top:0;--left:-100vw;--width:100vw;--height:100%;border-radius:var(--rounded-corner,0);box-shadow:var(--outline,none);color:var(--text-color,#000);display:flow-root;position:relative}.dnb-section[style*="--background-color"]{background-color:var(--background-color,#fff)}.dnb-section:after{--box-shadow:99vw 0 0 0 currentcolor,198vw 0 0 0 currentcolor,297vw 0 0 0 currentcolor,396vw 0 0 0 currentcolor;background-color:currentcolor;box-shadow:var(--box-shadow);color:var(--background-color,currentcolor);content:"";height:var(--height);left:var(--left);position:absolute;top:var(--top);visibility:var(--breakout,hidden);width:var(--width);z-index:-15}.dnb-section:not([style*="--breakout"]){--breakout:var(--breakout--on)}@media screen and (max-width:60em){.dnb-section{--breakout:var(--breakout--small,var(--breakout--fallback));--background-color--value:var(--background-color--small);--text-color--value:var(--text-color--small);--outline-color:var(--outline-color--small);--rounded-corner:var(
+.dnb-section{--breakout--on:visible;--breakout--off:hidden;--rounded-corner--value:0.75rem;--outline:0 0 0 1px var(--outline-color,transparent);--top:0;--left:-100vw;--width:100vw;--height:100%;border-radius:var(--rounded-corner,0);box-shadow:var(--outline,none);color:var(--text-color,#000);display:flow-root;position:relative}.dnb-section[style*="--background-color"]{background-color:var(--background-color,#fff)}.dnb-section:before{border-radius:var(--rounded-corner,0);box-shadow:var(--drop-shadow,none);content:"";inset:0;position:absolute}.dnb-section:after{--box-shadow:99vw 0 0 0 currentcolor,198vw 0 0 0 currentcolor,297vw 0 0 0 currentcolor,396vw 0 0 0 currentcolor;background-color:currentcolor;box-shadow:var(--box-shadow);color:var(--background-color,currentcolor);content:"";height:var(--height);left:var(--left);position:absolute;top:var(--top);visibility:var(--breakout,hidden);width:var(--width);z-index:-15}.dnb-section:not([style*="--breakout"]){--breakout:var(--breakout--on)}@media screen and (max-width:60em){.dnb-section{--breakout:var(--breakout--small,var(--breakout--fallback));--background-color--value:var(--background-color--small);--text-color--value:var(--text-color--small);--outline-color:var(--outline-color--small);--drop-shadow:var(--drop-shadow--small);--rounded-corner:var(
       --rounded-corner--small,var(--rounded-corner--fallback)
-    )}}@media screen and (max-width:59.9375em) and (min-width:40.0625em){.dnb-section{--breakout:var(--breakout--medium,var(--breakout--fallback));--background-color--value:var(--background-color--medium);--text-color--value:var(--text-color--medium);--outline-color:var(--outline-color--medium);--rounded-corner:var(
+    )}}@media screen and (max-width:59.9375em) and (min-width:40.0625em){.dnb-section{--breakout:var(--breakout--medium,var(--breakout--fallback));--background-color--value:var(--background-color--medium);--text-color--value:var(--text-color--medium);--outline-color:var(--outline-color--medium);--drop-shadow:var(--drop-shadow--medium);--rounded-corner:var(
       --rounded-corner--medium,var(--rounded-corner--fallback)
-    )}}@media screen and (min-width:60em){.dnb-section{--breakout:var(--breakout--large,var(--breakout--fallback));--background-color--value:var(--background-color--large);--text-color--value:var(--text-color--large);--outline-color:var(--outline-color--large);--rounded-corner:var(
+    )}}@media screen and (min-width:60em){.dnb-section{--breakout:var(--breakout--large,var(--breakout--fallback));--background-color--value:var(--background-color--large);--text-color--value:var(--text-color--large);--outline-color:var(--outline-color--large);--drop-shadow:var(--drop-shadow--large);--rounded-corner:var(
       --rounded-corner--large,var(--rounded-corner--fallback)
     )}}.dnb-section .dnb-section:after{z-index:-14}.dnb-section .dnb-section .dnb-section:after{z-index:-13}.dnb-section .dnb-section .dnb-section .dnb-section:after{z-index:-12}.dnb-section .dnb-section .dnb-section .dnb-section .dnb-section:after{z-index:-11}.dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section:after{z-index:-10}.dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section:after{z-index:-9}.dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section:after{z-index:-8}.dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section:after{z-index:-7}.dnb-section--spacing-x-small{padding-bottom:var(--spacing-x-small);padding-top:var(--spacing-x-small)}.dnb-section--spacing-small{padding-bottom:var(--spacing-small);padding-top:var(--spacing-small)}.dnb-section--spacing-medium{padding-bottom:var(--spacing-medium);padding-top:var(--spacing-medium)}.dnb-section--spacing,.dnb-section--spacing-large{padding-bottom:var(--spacing-large);padding-top:var(--spacing-large)}.dnb-section--spacing-x-large{padding-bottom:var(--spacing-x-large);padding-top:var(--spacing-x-large)}.dnb-section--spacing-xx-large{padding-bottom:var(--spacing-xx-large);padding-top:var(--spacing-xx-large)}

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

@@ -29,6 +29,14 @@
     background-color: var(--background-color, white);
   }
 
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    box-shadow: var(--drop-shadow, none);
+    border-radius: var(--rounded-corner, 0);
+  }
+
   &::after {
     content: '';
     visibility: var(--breakout, hidden);
@@ -58,6 +66,7 @@
     --background-color--value: var(--background-color--small);
     --text-color--value: var(--text-color--small);
     --outline-color: var(--outline-color--small);
+    --drop-shadow: var(--drop-shadow--small);
     --rounded-corner: var(
       --rounded-corner--small,
       var(--rounded-corner--fallback)
@@ -68,6 +77,7 @@
     --background-color--value: var(--background-color--medium);
     --text-color--value: var(--text-color--medium);
     --outline-color: var(--outline-color--medium);
+    --drop-shadow: var(--drop-shadow--medium);
     --rounded-corner: var(
       --rounded-corner--medium,
       var(--rounded-corner--fallback)
@@ -78,6 +88,7 @@
     --background-color--value: var(--background-color--large);
     --text-color--value: var(--text-color--large);
     --outline-color: var(--outline-color--large);
+    --drop-shadow: var(--drop-shadow--large);
     --rounded-corner: var(
       --rounded-corner--large,
       var(--rounded-corner--fallback)

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

@@ -101,15 +101,6 @@
   --anchor-background-gutter: 0.125em;
   box-shadow: inset 100vw 100vw 0 0 transparent, calc(var(--anchor-background-gutter) * -1) 0 0 0 transparent, var(--anchor-background-gutter) 0 0 0 transparent;
 }
-.dnb-section--fire-red .dnb-anchor.focus-visible, .dnb-section--emerald-green .dnb-anchor.focus-visible, .dnb-section--sea-green .dnb-anchor.focus-visible, .dnb-section--success .dnb-anchor.focus-visible {
-  color: var(--color-white);
-  background-color: transparent;
-  outline: none;
-  --border-color: var(--color-white);
-  --border-width: var(--focus-ring-width);
-  box-shadow: 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
-}
 .dnb-section--fire-red .dnb-anchor:focus-visible, .dnb-section--emerald-green .dnb-anchor:focus-visible, .dnb-section--sea-green .dnb-anchor:focus-visible, .dnb-section--success .dnb-anchor:focus-visible {
   color: var(--color-white);
   background-color: transparent;

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

@@ -1,3 +1,3 @@
 .dnb-section{--background-color:var(--color-white);--outline-color--value:var(--color-black-8)}.dnb-section--divider{--text-color:var(--color-black-80);--background-color:var(--color-white);--sc:var(--color-mint-green-50);z-index:0}.dnb-section--divider:after{--box-shadow:99vw 0 0 0 currentcolor,198vw 0 0 0 currentcolor,297vw 0 0 0 currentcolor,396vw 0 0 0 currentcolor,0 0.0625rem 0 0 var(--sc),99vw 0.0625rem 0 0 var(--sc),0 -0.0625rem 0 0 var(--sc),99vw -0.0625rem 0 0 var(--sc),198vw 0.0625rem 0 0 var(--sc),198vw -0.0625rem 0 0 var(--sc)}.dnb-section--transparent{--background-color:transparent}.dnb-section--default,.dnb-section--mint-green-12{--text-color:var(--text-color--value,var(--color-black-80));--background-color:var(
     --background-color--value,var(--color-mint-green-12)
-  )}.dnb-section--white{--text-color:var(--color-black-80);--background-color:var(--color-white)}.dnb-section--mint-green{--text-color:var(--color-black-80);--background-color:var(--color-mint-green)}.dnb-section--lavender{--text-color:var(--color-black-80);--background-color:var(--color-lavender)}.dnb-section--sand-yellow,.dnb-section--warning{--text-color:var(--color-black-80);--background-color:var(--color-sand-yellow)}.dnb-section--info,.dnb-section--pistachio{--text-color:var(--color-black-80);--background-color:var(--color-pistachio)}.dnb-section--black-3{--text-color:var(--color-black-80);--background-color:var(--color-black-3)}.dnb-section--emerald-green{--text-color:var(--color-mint-green);--background-color:var(--color-emerald-green)}.dnb-section--sea-green{--text-color:var(--color-white);--background-color:var(--color-sea-green)}.dnb-section--fire-red{--text-color:var(--color-white);--background-color:var(--color-fire-red)}.dnb-section--error,.dnb-section--fire-red-8{--text-color:var(--color-black-80);--background-color:var(--color-fire-red-8)}.dnb-section--success{--text-color:var(--color-white);--background-color:var(--color-success-green)}.dnb-section--emerald-green .dnb-anchor,.dnb-section--fire-red .dnb-anchor,.dnb-section--sea-green .dnb-anchor,.dnb-section--success .dnb-anchor{color:var(--color-white)}.dnb-section--emerald-green .dnb-anchor:hover,.dnb-section--fire-red .dnb-anchor:hover,.dnb-section--sea-green .dnb-anchor:hover,.dnb-section--success .dnb-anchor:hover{--anchor-background-gutter:0.125em;box-shadow:inset 100vw 100vw 0 0 var(--color-white),calc(var(--anchor-background-gutter)*-1) 0 0 0 var(--color-white),var(--anchor-background-gutter) 0 0 0 var(--color-white);color:var(--anchor-color--contrast)}.dnb-section--emerald-green .dnb-anchor:active,.dnb-section--fire-red .dnb-anchor:active,.dnb-section--sea-green .dnb-anchor:active,.dnb-section--success .dnb-anchor:active{--anchor-background-gutter:0.125em;background-color:transparent;box-shadow:inset 100vw 100vw 0 0 transparent,calc(var(--anchor-background-gutter)*-1) 0 0 0 transparent,var(--anchor-background-gutter) 0 0 0 transparent;color:var(--color-white)}.dnb-section--emerald-green .dnb-anchor.focus-visible,.dnb-section--fire-red .dnb-anchor.focus-visible,.dnb-section--sea-green .dnb-anchor.focus-visible,.dnb-section--success .dnb-anchor.focus-visible{--border-color:var(--color-white);--border-width:var(--focus-ring-width);background-color:transparent;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-white);outline:none}.dnb-section--emerald-green .dnb-anchor:focus-visible,.dnb-section--fire-red .dnb-anchor:focus-visible,.dnb-section--sea-green .dnb-anchor:focus-visible,.dnb-section--success .dnb-anchor:focus-visible{--border-color:var(--color-white);--border-width:var(--focus-ring-width);background-color:transparent;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-white);outline:none}.dnb-section--emerald-green .dnb-button--tertiary,.dnb-section--emerald-green .dnb-button--tertiary:hover,.dnb-section--fire-red .dnb-button--tertiary,.dnb-section--fire-red .dnb-button--tertiary:hover,.dnb-section--sea-green .dnb-button--tertiary,.dnb-section--sea-green .dnb-button--tertiary:hover{--text-color:var(--color-white)}.dnb-section--emerald-green .dnb-button--tertiary:hover .dnb-button__text:after,.dnb-section--fire-red .dnb-button--tertiary:hover .dnb-button__text:after,.dnb-section--sea-green .dnb-button--tertiary:hover .dnb-button__text:after{--text-color:var(--color-white)!important}.dnb-section--emerald-green .dnb-button--tertiary:focus,.dnb-section--fire-red .dnb-button--tertiary:focus,.dnb-section--sea-green .dnb-button--tertiary:focus{--text-color:var(--color-white)}.dnb-section--emerald-green .dnb-button--tertiary:focus:before,.dnb-section--fire-red .dnb-button--tertiary:focus:before,.dnb-section--sea-green .dnb-button--tertiary:focus:before{outline:none}html[data-whatinput=keyboard] .dnb-section--emerald-green .dnb-button--tertiary:focus:before,html[data-whatinput=keyboard] .dnb-section--fire-red .dnb-button--tertiary:focus:before,html[data-whatinput=keyboard] .dnb-section--sea-green .dnb-button--tertiary:focus:before{--border-color:var(--color-white);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-section--fire-red ::selection,.dnb-section--mint-green ::selection{background-color:var(--color-white)}
+  )}.dnb-section--white{--text-color:var(--color-black-80);--background-color:var(--color-white)}.dnb-section--mint-green{--text-color:var(--color-black-80);--background-color:var(--color-mint-green)}.dnb-section--lavender{--text-color:var(--color-black-80);--background-color:var(--color-lavender)}.dnb-section--sand-yellow,.dnb-section--warning{--text-color:var(--color-black-80);--background-color:var(--color-sand-yellow)}.dnb-section--info,.dnb-section--pistachio{--text-color:var(--color-black-80);--background-color:var(--color-pistachio)}.dnb-section--black-3{--text-color:var(--color-black-80);--background-color:var(--color-black-3)}.dnb-section--emerald-green{--text-color:var(--color-mint-green);--background-color:var(--color-emerald-green)}.dnb-section--sea-green{--text-color:var(--color-white);--background-color:var(--color-sea-green)}.dnb-section--fire-red{--text-color:var(--color-white);--background-color:var(--color-fire-red)}.dnb-section--error,.dnb-section--fire-red-8{--text-color:var(--color-black-80);--background-color:var(--color-fire-red-8)}.dnb-section--success{--text-color:var(--color-white);--background-color:var(--color-success-green)}.dnb-section--emerald-green .dnb-anchor,.dnb-section--fire-red .dnb-anchor,.dnb-section--sea-green .dnb-anchor,.dnb-section--success .dnb-anchor{color:var(--color-white)}.dnb-section--emerald-green .dnb-anchor:hover,.dnb-section--fire-red .dnb-anchor:hover,.dnb-section--sea-green .dnb-anchor:hover,.dnb-section--success .dnb-anchor:hover{--anchor-background-gutter:0.125em;box-shadow:inset 100vw 100vw 0 0 var(--color-white),calc(var(--anchor-background-gutter)*-1) 0 0 0 var(--color-white),var(--anchor-background-gutter) 0 0 0 var(--color-white);color:var(--anchor-color--contrast)}.dnb-section--emerald-green .dnb-anchor:active,.dnb-section--fire-red .dnb-anchor:active,.dnb-section--sea-green .dnb-anchor:active,.dnb-section--success .dnb-anchor:active{--anchor-background-gutter:0.125em;background-color:transparent;box-shadow:inset 100vw 100vw 0 0 transparent,calc(var(--anchor-background-gutter)*-1) 0 0 0 transparent,var(--anchor-background-gutter) 0 0 0 transparent;color:var(--color-white)}.dnb-section--emerald-green .dnb-anchor:focus-visible,.dnb-section--fire-red .dnb-anchor:focus-visible,.dnb-section--sea-green .dnb-anchor:focus-visible,.dnb-section--success .dnb-anchor:focus-visible{--border-color:var(--color-white);--border-width:var(--focus-ring-width);background-color:transparent;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-white);outline:none}.dnb-section--emerald-green .dnb-button--tertiary,.dnb-section--emerald-green .dnb-button--tertiary:hover,.dnb-section--fire-red .dnb-button--tertiary,.dnb-section--fire-red .dnb-button--tertiary:hover,.dnb-section--sea-green .dnb-button--tertiary,.dnb-section--sea-green .dnb-button--tertiary:hover{--text-color:var(--color-white)}.dnb-section--emerald-green .dnb-button--tertiary:hover .dnb-button__text:after,.dnb-section--fire-red .dnb-button--tertiary:hover .dnb-button__text:after,.dnb-section--sea-green .dnb-button--tertiary:hover .dnb-button__text:after{--text-color:var(--color-white)!important}.dnb-section--emerald-green .dnb-button--tertiary:focus,.dnb-section--fire-red .dnb-button--tertiary:focus,.dnb-section--sea-green .dnb-button--tertiary:focus{--text-color:var(--color-white)}.dnb-section--emerald-green .dnb-button--tertiary:focus:before,.dnb-section--fire-red .dnb-button--tertiary:focus:before,.dnb-section--sea-green .dnb-button--tertiary:focus:before{outline:none}html[data-whatinput=keyboard] .dnb-section--emerald-green .dnb-button--tertiary:focus:before,html[data-whatinput=keyboard] .dnb-section--fire-red .dnb-button--tertiary:focus:before,html[data-whatinput=keyboard] .dnb-section--sea-green .dnb-button--tertiary:focus:before{--border-color:var(--color-white);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-section--fire-red ::selection,.dnb-section--mint-green ::selection{background-color:var(--color-white)}

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

@@ -51,7 +51,6 @@
   background-color: var(--skeleton-color) !important;
 }
 .dnb-skeleton--shape.dnb-skeleton::after {
-  background-image: repeating-linear-gradient(-45deg, var(--skeleton-color--contrast) 1px, var(--skeleton-color--contrast) 2px, transparent 0, transparent 6px) !important;
   background-image: repeating-linear-gradient(-45deg, var(--skeleton-color--contrast) 1px 2px, transparent 0 6px) !important;
   background-repeat: repeat !important;
   background-size: 100% !important;
@@ -86,7 +85,6 @@
   -webkit-text-fill-color: transparent !important;
   -webkit-background-clip: text !important;
           background-clip: text !important;
-  background-image: repeating-linear-gradient(-45deg, var(--skeleton-color--contrast) 1px, var(--skeleton-color--contrast) 2px, transparent 0, transparent 6px) !important;
   background-image: repeating-linear-gradient(-45deg, var(--skeleton-color--contrast) 1px 2px, transparent 0 6px) !important;
   --border-color: var(--skeleton-color);
   background-color: var(--skeleton-color) !important;

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

@@ -1 +1 @@
-.dnb-skeleton{--skeleton-delay:5s}.dnb-skeleton img,.dnb-skeleton video{filter:brightness(0) contrast(0) opacity(.5)}.dnb-skeleton--block{display:block}.dnb-skeleton--overflow{overflow:hidden}.dnb-skeleton--grey{filter:grayscale(100%)}.dnb-skeleton--shape{background:transparent;box-shadow:none!important;color:transparent;overflow-x:hidden;pointer-events:none;position:relative}.dnb-skeleton--shape.dnb-skeleton:after,.dnb-skeleton--shape.dnb-skeleton:before{background:none!important;border-radius:inherit;bottom:0!important;box-shadow:none!important;content:""!important;height:auto!important;left:0!important;margin:0!important;padding:0!important;position:absolute!important;right:0!important;top:0!important;width:100%!important;z-index:100!important}.dnb-skeleton--shape.dnb-skeleton:before{background-color:var(--skeleton-color)!important}.dnb-skeleton--shape.dnb-skeleton:after{animation:skeletonLinearAnimation 1.5s linear infinite var(--skeleton-delay);background-image:repeating-linear-gradient(-45deg,var(--skeleton-color--contrast) 1px,var(--skeleton-color--contrast) 2px,transparent 0,transparent 6px)!important;background-image:repeating-linear-gradient(-45deg,var(--skeleton-color--contrast) 1px 2px,transparent 0 6px)!important;background-repeat:repeat!important;background-size:100%!important;-webkit-clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%);clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%)}.dnb-skeleton--code code,.dnb-skeleton--code code *,.dnb-skeleton--code pre,.dnb-skeleton--code pre *,.dnb-skeleton--font code,.dnb-skeleton--font code *,.dnb-skeleton--font pre,.dnb-skeleton--font pre *{--font-family-monospace:"DNBMonoSkeleton"!important;font-family:var(--font-family-monospace)!important;font-style:unset!important}.dnb-skeleton--font,.dnb-skeleton--font .dnb-p,.dnb-skeleton--font .dnb-skeleton--show-font,.dnb-skeleton--font-only{--font-family-default:"DNBSkeleton"!important;font-family:var(--font-family-default)!important;font-style:unset!important;pointer-events:none}.dnb-skeleton--font .dnb-p::marker,.dnb-skeleton--font .dnb-skeleton--show-font::marker,.dnb-skeleton--font-only::marker,.dnb-skeleton--font::marker{color:var(--skeleton-color)}.dnb-skeleton--font,.dnb-skeleton--font .dnb-p,.dnb-skeleton--font .dnb-skeleton--show-font{-webkit-text-fill-color:transparent!important;--border-color:var(--skeleton-color);animation:skeletonFontAnimation 5s linear infinite var(--skeleton-delay);-webkit-background-clip:text!important;background-clip:text!important;background-color:var(--skeleton-color)!important;background-image:repeating-linear-gradient(-45deg,var(--skeleton-color--contrast) 1px,var(--skeleton-color--contrast) 2px,transparent 0,transparent 6px)!important;background-image:repeating-linear-gradient(-45deg,var(--skeleton-color--contrast) 1px 2px,transparent 0 6px)!important;background-position-x:30rem;background-position-y:50%!important;background-repeat:no-repeat!important;background-size:30rem 100%!important}html[data-visual-test] .dnb-skeleton--font,html[data-visual-test] .dnb-skeleton--font .dnb-p,html[data-visual-test] .dnb-skeleton--font .dnb-skeleton--show-font{animation:none!important}.dnb-skeleton__figure{border-radius:.25rem;position:relative}.dnb-skeleton__figure--circle{border-radius:50%;height:4rem;width:4rem}.dnb-skeleton__figure--product{align-items:center;display:flex}.dnb-skeleton__figure--product .dnb-skeleton__figure--circle+div{margin-left:1rem;width:50%}.dnb-skeleton--no-animation * .dnb-skeleton:after,.dnb-skeleton--no-animation .dnb-skeleton,.dnb-skeleton--no-animation .dnb-skeleton:after{animation:none!important}@keyframes skeletonLinearAnimation{0%{-webkit-clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%);clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%)}50%{-webkit-clip-path:polygon(0 0,100% 0,100% 100%,0 100%);clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}to{-webkit-clip-path:polygon(0 0,0 0,0 100%,0 100%);clip-path:polygon(0 0,0 0,0 100%,0 100%)}}@keyframes skeletonFontAnimation{0%{background-position-x:30rem}to{background-position-x:-30rem}}@font-face{font-display:fallback;font-family:DNBSkeleton;font-style:normal;font-weight:400;src:url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Regular.woff2) format("woff2"),url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Regular.woff) format("woff"),url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Regular.ttf) format("truetype")}@font-face{font-display:fallback;font-family:DNBSkeleton;font-style:normal;font-weight:500;src:url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Medium.woff2) format("woff2"),url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Medium.woff) format("woff"),url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Medium.ttf) format("truetype")}@font-face{font-display:fallback;font-family:DNBSkeleton;font-style:normal;font-weight:600;src:url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Bold.woff2) format("woff2"),url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Bold.woff) format("woff"),url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Bold.ttf) format("truetype")}@font-face{font-display:fallback;font-family:DNBMonoSkeleton;font-style:normal;font-weight:400;src:url(../../assets/fonts/dnb/skeleton/DNBMono-Skeleton-Regular.woff2) format("woff2"),url(../../assets/fonts/dnb/skeleton/DNBMono-Skeleton-Regular.woff) format("woff"),url(../../assets/fonts/dnb/skeleton/DNBMono-Skeleton-Regular.ttf) format("truetype")}
+.dnb-skeleton{--skeleton-delay:5s}.dnb-skeleton img,.dnb-skeleton video{filter:brightness(0) contrast(0) opacity(.5)}.dnb-skeleton--block{display:block}.dnb-skeleton--overflow{overflow:hidden}.dnb-skeleton--grey{filter:grayscale(100%)}.dnb-skeleton--shape{background:transparent;box-shadow:none!important;color:transparent;overflow-x:hidden;pointer-events:none;position:relative}.dnb-skeleton--shape.dnb-skeleton:after,.dnb-skeleton--shape.dnb-skeleton:before{background:none!important;border-radius:inherit;bottom:0!important;box-shadow:none!important;content:""!important;height:auto!important;left:0!important;margin:0!important;padding:0!important;position:absolute!important;right:0!important;top:0!important;width:100%!important;z-index:100!important}.dnb-skeleton--shape.dnb-skeleton:before{background-color:var(--skeleton-color)!important}.dnb-skeleton--shape.dnb-skeleton:after{animation:skeletonLinearAnimation 1.5s linear infinite var(--skeleton-delay);background-image:repeating-linear-gradient(-45deg,var(--skeleton-color--contrast) 1px 2px,transparent 0 6px)!important;background-repeat:repeat!important;background-size:100%!important;-webkit-clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%);clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%)}.dnb-skeleton--code code,.dnb-skeleton--code code *,.dnb-skeleton--code pre,.dnb-skeleton--code pre *,.dnb-skeleton--font code,.dnb-skeleton--font code *,.dnb-skeleton--font pre,.dnb-skeleton--font pre *{--font-family-monospace:"DNBMonoSkeleton"!important;font-family:var(--font-family-monospace)!important;font-style:unset!important}.dnb-skeleton--font,.dnb-skeleton--font .dnb-p,.dnb-skeleton--font .dnb-skeleton--show-font,.dnb-skeleton--font-only{--font-family-default:"DNBSkeleton"!important;font-family:var(--font-family-default)!important;font-style:unset!important;pointer-events:none}.dnb-skeleton--font .dnb-p::marker,.dnb-skeleton--font .dnb-skeleton--show-font::marker,.dnb-skeleton--font-only::marker,.dnb-skeleton--font::marker{color:var(--skeleton-color)}.dnb-skeleton--font,.dnb-skeleton--font .dnb-p,.dnb-skeleton--font .dnb-skeleton--show-font{-webkit-text-fill-color:transparent!important;--border-color:var(--skeleton-color);animation:skeletonFontAnimation 5s linear infinite var(--skeleton-delay);-webkit-background-clip:text!important;background-clip:text!important;background-color:var(--skeleton-color)!important;background-image:repeating-linear-gradient(-45deg,var(--skeleton-color--contrast) 1px 2px,transparent 0 6px)!important;background-position-x:30rem;background-position-y:50%!important;background-repeat:no-repeat!important;background-size:30rem 100%!important}html[data-visual-test] .dnb-skeleton--font,html[data-visual-test] .dnb-skeleton--font .dnb-p,html[data-visual-test] .dnb-skeleton--font .dnb-skeleton--show-font{animation:none!important}.dnb-skeleton__figure{border-radius:.25rem;position:relative}.dnb-skeleton__figure--circle{border-radius:50%;height:4rem;width:4rem}.dnb-skeleton__figure--product{align-items:center;display:flex}.dnb-skeleton__figure--product .dnb-skeleton__figure--circle+div{margin-left:1rem;width:50%}.dnb-skeleton--no-animation * .dnb-skeleton:after,.dnb-skeleton--no-animation .dnb-skeleton,.dnb-skeleton--no-animation .dnb-skeleton:after{animation:none!important}@keyframes skeletonLinearAnimation{0%{-webkit-clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%);clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%)}50%{-webkit-clip-path:polygon(0 0,100% 0,100% 100%,0 100%);clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}to{-webkit-clip-path:polygon(0 0,0 0,0 100%,0 100%);clip-path:polygon(0 0,0 0,0 100%,0 100%)}}@keyframes skeletonFontAnimation{0%{background-position-x:30rem}to{background-position-x:-30rem}}@font-face{font-display:fallback;font-family:DNBSkeleton;font-style:normal;font-weight:400;src:url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Regular.woff2) format("woff2"),url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Regular.woff) format("woff"),url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Regular.ttf) format("truetype")}@font-face{font-display:fallback;font-family:DNBSkeleton;font-style:normal;font-weight:500;src:url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Medium.woff2) format("woff2"),url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Medium.woff) format("woff"),url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Medium.ttf) format("truetype")}@font-face{font-display:fallback;font-family:DNBSkeleton;font-style:normal;font-weight:600;src:url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Bold.woff2) format("woff2"),url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Bold.woff) format("woff"),url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Bold.ttf) format("truetype")}@font-face{font-display:fallback;font-family:DNBMonoSkeleton;font-style:normal;font-weight:400;src:url(../../assets/fonts/dnb/skeleton/DNBMono-Skeleton-Regular.woff2) format("woff2"),url(../../assets/fonts/dnb/skeleton/DNBMono-Skeleton-Regular.woff) format("woff"),url(../../assets/fonts/dnb/skeleton/DNBMono-Skeleton-Regular.ttf) format("truetype")}

package/cjs/components/skip-content/style/dnb-skip-content.css

@@ -17,10 +17,7 @@
 .dnb-skip-content__focus:focus::before {
   content: "";
   position: absolute;
-  top: var(--focus-ring-width);
-  right: var(--focus-ring-width);
-  bottom: var(--focus-ring-width);
-  left: var(--focus-ring-width);
+  inset: var(--focus-ring-width);
   outline: none;
 }
 html[data-whatinput=keyboard] .dnb-skip-content__focus:focus::before {

package/cjs/components/skip-content/style/dnb-skip-content.min.css

@@ -1 +1 @@
-.dnb-skip-content--visible{display:flex}.dnb-skip-content .dnb-button{margin:1rem 0}.dnb-skip-content__focus:focus{position:relative}.dnb-skip-content__focus:focus:before{bottom:var(--focus-ring-width);content:"";left:var(--focus-ring-width);outline:none;position:absolute;right:var(--focus-ring-width);top:var(--focus-ring-width)}html[data-whatinput=keyboard] .dnb-skip-content__focus:focus:before{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-skip-content__return:not(.dnb-skip-content__return--active) button.dnb-sr-only{display:none}
+.dnb-skip-content--visible{display:flex}.dnb-skip-content .dnb-button{margin:1rem 0}.dnb-skip-content__focus:focus{position:relative}.dnb-skip-content__focus:focus:before{content:"";inset:var(--focus-ring-width);outline:none;position:absolute}html[data-whatinput=keyboard] .dnb-skip-content__focus:focus:before{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-skip-content__return:not(.dnb-skip-content__return--active) button.dnb-sr-only{display:none}

package/cjs/components/switch/Switch.js

@@ -84,7 +84,7 @@ class Switch extends _react.default.PureComponent {
         this._refInput.current.focus();
       }
     });
-    this._refInput = props.innerRef || _react.default.createRef();
+    this._refInput = _react.default.createRef();
     this._id = props.id || (0, _componentHelper.makeUniqueId)();
     this.state = {
       _listenForPropChanges: true
@@ -93,6 +93,11 @@ class Switch extends _react.default.PureComponent {
       onMouseDown: e => e.preventDefault()
     };
   }
+  componentDidMount() {
+    if (this.props.innerRef) {
+      typeof this.props.innerRef === 'function' ? this.props.innerRef(this._refInput.current) : this.props.innerRef.current = this._refInput.current;
+    }
+  }
   componentWillUnmount() {
     clearTimeout(this._onChangeEndId);
   }
@@ -232,7 +237,8 @@ _defineProperty(Switch, "defaultProps", {
   children: null,
   on_change: null,
   on_change_end: null,
-  on_state_update: null
+  on_state_update: null,
+  innerRef: null
 });
 _defineProperty(Switch, "parseChecked", state => /true|on/.test(String(state)));
 process.env.NODE_ENV !== "production" ? Switch.propTypes = _objectSpread(_objectSpread({
@@ -257,7 +263,7 @@ process.env.NODE_ENV !== "production" ? Switch.propTypes = _objectSpread(_object
   attributes: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
   readOnly: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   skeleton: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  innerRef: _propTypes.default.object
+  innerRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
 }, _SpacingHelper.spacingPropTypes), {}, {
   class: _propTypes.default.string,
   className: _propTypes.default.string,

package/cjs/components/switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","names":["_react","_interopRequireDefault","require","_propTypes","_classnames","_keycode","_componentHelper","_filterValidProps","_AlignmentHelper2","_SpacingHelper","_SkeletonHelper","_Context","_Suffix","_FormLabel","_FormStatus","_AlignmentHelper","_span","_excluded","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","getOwnPropertyDescriptor","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","defineProperty","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","Switch","React","PureComponent","getDerivedStateFromProps","props","state","_listenForPropChanges","checked","_checked","parseChecked","__checked","dispatchCustomElementEvent","constructor","event","keycode","onChangeHandler","isTrue","readOnly","preventDefault","setState","on_change_end","clearTimeout","_onChangeEndId","persist","setTimeout","_refInput","current","focus","innerRef","createRef","_id","id","makeUniqueId","helperParams","onMouseDown","e","componentWillUnmount","render","_this$context","_this$context2","_this$context3","extendPropsWithContextInClassComponent","defaultProps","skeleton","context","getTranslation","pickFormElementProps","FormRow","formElement","size","status","status_state","status_props","globalStatus","status_no_animation","suffix","label","label_position","label_sr_only","title","disabled","className","class","_className","children","on_change","on_state_update","rest","showStatus","getStatusState","mainParams","classnames","createSkeletonClass","createSpacingClasses","inputParams","skeletonDOMAttributes","combineDescribedBy","validateDOMAttributes","labelComp","createElement","for_id","text","sr_only","show","text_id","width_selector","no_animation","name","type","role","ref","onChange","onKeyDown","onKeyDownHandler","draggable","onDragStart","exports","Context","attributes","test","process","env","NODE_ENV","propTypes","PropTypes","oneOfType","string","func","node","oneOf","bool","shape","message","spacingPropTypes","_formElement","_supportsSpacingProps"],"sources":["../../../../src/components/switch/Switch.js"],"sourcesContent":["/**\n * Web Switch 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 { pickFormElementProps } from '../../shared/helpers/filterValidProps'\nimport AlignmentHelper from '../../shared/AlignmentHelper'\nimport {\n  spacingPropTypes,\n  createSpacingClasses,\n} from '../space/SpacingHelper'\nimport {\n  skeletonDOMAttributes,\n  createSkeletonClass,\n} from '../skeleton/SkeletonHelper'\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 switch component is our enhancement of the classic radio button. It acts like a switch. Example: On/off, yes/no.\n */\nexport default class Switch 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    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    globalStatus: PropTypes.shape({\n      id: PropTypes.string,\n      message: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n    }),\n    status_no_animation: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.bool,\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    innerRef: PropTypes.object,\n\n    ...spacingPropTypes,\n\n    class: PropTypes.string,\n    className: PropTypes.string,\n    children: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),\n\n    on_change: PropTypes.func,\n    on_change_end: 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    checked: null,\n    disabled: null,\n    id: null,\n    size: null,\n    status: null,\n    status_state: 'error',\n    status_props: null,\n    globalStatus: null,\n    status_no_animation: 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_change_end: 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 = Switch.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    this._id = props.id || makeUniqueId() // cause we need an id anyway\n    this.state = {\n      _listenForPropChanges: true,\n    }\n    this.helperParams = { onMouseDown: (e) => e.preventDefault() }\n  }\n\n  componentWillUnmount() {\n    clearTimeout(this._onChangeEndId)\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    if (this.props.on_change_end) {\n      clearTimeout(this._onChangeEndId)\n      if (event && event.persist) {\n        event.persist()\n      }\n      this._onChangeEndId = setTimeout(\n        () =>\n          dispatchCustomElementEvent(this, 'on_change_end', {\n            checked,\n            event,\n          }),\n        500\n      )\n    }\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      Switch.defaultProps,\n      { skeleton: this.context?.skeleton },\n      this.context.getTranslation(this.props).Switch,\n      // Deprecated – can be removed in v11\n      pickFormElementProps(this.context?.FormRow),\n      pickFormElementProps(this.context?.formElement),\n      this.context.Switch\n    )\n\n    const {\n      value,\n      size,\n      status,\n      status_state,\n      status_props,\n      globalStatus,\n      status_no_animation,\n      suffix,\n      label,\n      label_position,\n      label_sr_only,\n      title,\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-switch',\n        size && `dnb-switch--${size}`,\n        status && `dnb-switch__status--${status_state}`,\n        `dnb-switch--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: isTrue(disabled),\n      checked,\n      ...rest,\n    }\n\n    skeletonDOMAttributes(inputParams, skeleton, this.context)\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    validateDOMAttributes(this.props, inputParams)\n\n    const labelComp = 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    return (\n      <span {...mainParams}>\n        <span className=\"dnb-switch__order\">\n          {label_position === 'left' && labelComp}\n\n          <span className=\"dnb-switch__inner\">\n            <AlignmentHelper />\n\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              skeleton={skeleton}\n              no_animation={status_no_animation}\n              {...status_props}\n            />\n\n            <span className=\"dnb-switch__shell\">\n              {(label_position === 'right' || !label_position) &&\n                labelComp}\n\n              <span className=\"dnb-switch__row\">\n                <input\n                  id={id}\n                  name={id}\n                  type=\"checkbox\"\n                  role=\"switch\"\n                  title={title}\n                  aria-checked={checked}\n                  className=\"dnb-switch__input\"\n                  value={checked ? value || '' : ''}\n                  ref={this._refInput}\n                  {...inputParams}\n                  onChange={this.onChangeHandler}\n                  onKeyDown={this.onKeyDownHandler}\n                />\n                <span\n                  draggable\n                  aria-hidden\n                  className=\"dnb-switch__background\"\n                  onDragStart={this.onChangeHandler}\n                  {...this.helperParams}\n                />\n                <span\n                  className={classnames(\n                    'dnb-switch__button',\n                    createSkeletonClass('shape', skeleton, this.context)\n                  )}\n                  aria-hidden\n                >\n                  <span className=\"dnb-switch__focus\">\n                    <span className=\"dnb-switch__focus__inner\" />\n                  </span>\n                </span>\n              </span>\n\n              {suffix && (\n                <Suffix\n                  className=\"dnb-switch__suffix\"\n                  id={id + '-suffix'} // used for \"aria-describedby\"\n                  context={props}\n                >\n                  {suffix}\n                </Suffix>\n              )}\n            </span>\n          </span>\n        </span>\n      </span>\n    )\n  }\n}\n\nSwitch._formElement = true\nSwitch._supportsSpacingProps = true\n"],"mappings":"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"}
+{"version":3,"file":"Switch.js","names":["_react","_interopRequireDefault","require","_propTypes","_classnames","_keycode","_componentHelper","_filterValidProps","_AlignmentHelper2","_SpacingHelper","_SkeletonHelper","_Context","_Suffix","_FormLabel","_FormStatus","_AlignmentHelper","_span","_excluded","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","getOwnPropertyDescriptor","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","defineProperty","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","Switch","React","PureComponent","getDerivedStateFromProps","props","state","_listenForPropChanges","checked","_checked","parseChecked","__checked","dispatchCustomElementEvent","constructor","event","keycode","onChangeHandler","isTrue","readOnly","preventDefault","setState","on_change_end","clearTimeout","_onChangeEndId","persist","setTimeout","_refInput","current","focus","createRef","_id","id","makeUniqueId","helperParams","onMouseDown","e","componentDidMount","innerRef","componentWillUnmount","render","_this$context","_this$context2","_this$context3","extendPropsWithContextInClassComponent","defaultProps","skeleton","context","getTranslation","pickFormElementProps","FormRow","formElement","size","status","status_state","status_props","globalStatus","status_no_animation","suffix","label","label_position","label_sr_only","title","disabled","className","class","_className","children","on_change","on_state_update","rest","showStatus","getStatusState","mainParams","classnames","createSkeletonClass","createSpacingClasses","inputParams","skeletonDOMAttributes","combineDescribedBy","validateDOMAttributes","labelComp","createElement","for_id","text","sr_only","show","text_id","width_selector","no_animation","name","type","role","ref","onChange","onKeyDown","onKeyDownHandler","draggable","onDragStart","exports","Context","attributes","test","process","env","NODE_ENV","propTypes","PropTypes","oneOfType","string","func","node","oneOf","bool","shape","message","spacingPropTypes","_formElement","_supportsSpacingProps"],"sources":["../../../../src/components/switch/Switch.js"],"sourcesContent":["/**\n * Web Switch 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 { pickFormElementProps } from '../../shared/helpers/filterValidProps'\nimport AlignmentHelper from '../../shared/AlignmentHelper'\nimport {\n  spacingPropTypes,\n  createSpacingClasses,\n} from '../space/SpacingHelper'\nimport {\n  skeletonDOMAttributes,\n  createSkeletonClass,\n} from '../skeleton/SkeletonHelper'\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 switch component is our enhancement of the classic radio button. It acts like a switch. Example: On/off, yes/no.\n */\nexport default class Switch 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    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    globalStatus: PropTypes.shape({\n      id: PropTypes.string,\n      message: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n    }),\n    status_no_animation: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.bool,\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    innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),\n\n    ...spacingPropTypes,\n\n    class: PropTypes.string,\n    className: PropTypes.string,\n    children: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),\n\n    on_change: PropTypes.func,\n    on_change_end: 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    checked: null,\n    disabled: null,\n    id: null,\n    size: null,\n    status: null,\n    status_state: 'error',\n    status_props: null,\n    globalStatus: null,\n    status_no_animation: 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_change_end: 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 = Switch.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    this._id = props.id || makeUniqueId() // cause we need an id anyway\n    this.state = {\n      _listenForPropChanges: true,\n    }\n    this.helperParams = { onMouseDown: (e) => e.preventDefault() }\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  componentWillUnmount() {\n    clearTimeout(this._onChangeEndId)\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    if (this.props.on_change_end) {\n      clearTimeout(this._onChangeEndId)\n      if (event && event.persist) {\n        event.persist()\n      }\n      this._onChangeEndId = setTimeout(\n        () =>\n          dispatchCustomElementEvent(this, 'on_change_end', {\n            checked,\n            event,\n          }),\n        500\n      )\n    }\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      Switch.defaultProps,\n      { skeleton: this.context?.skeleton },\n      this.context.getTranslation(this.props).Switch,\n      // Deprecated – can be removed in v11\n      pickFormElementProps(this.context?.FormRow),\n      pickFormElementProps(this.context?.formElement),\n      this.context.Switch\n    )\n\n    const {\n      value,\n      size,\n      status,\n      status_state,\n      status_props,\n      globalStatus,\n      status_no_animation,\n      suffix,\n      label,\n      label_position,\n      label_sr_only,\n      title,\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-switch',\n        size && `dnb-switch--${size}`,\n        status && `dnb-switch__status--${status_state}`,\n        `dnb-switch--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: isTrue(disabled),\n      checked,\n      ...rest,\n    }\n\n    skeletonDOMAttributes(inputParams, skeleton, this.context)\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    validateDOMAttributes(this.props, inputParams)\n\n    const labelComp = 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    return (\n      <span {...mainParams}>\n        <span className=\"dnb-switch__order\">\n          {label_position === 'left' && labelComp}\n\n          <span className=\"dnb-switch__inner\">\n            <AlignmentHelper />\n\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              skeleton={skeleton}\n              no_animation={status_no_animation}\n              {...status_props}\n            />\n\n            <span className=\"dnb-switch__shell\">\n              {(label_position === 'right' || !label_position) &&\n                labelComp}\n\n              <span className=\"dnb-switch__row\">\n                <input\n                  id={id}\n                  name={id}\n                  type=\"checkbox\"\n                  role=\"switch\"\n                  title={title}\n                  aria-checked={checked}\n                  className=\"dnb-switch__input\"\n                  value={checked ? value || '' : ''}\n                  ref={this._refInput}\n                  {...inputParams}\n                  onChange={this.onChangeHandler}\n                  onKeyDown={this.onKeyDownHandler}\n                />\n                <span\n                  draggable\n                  aria-hidden\n                  className=\"dnb-switch__background\"\n                  onDragStart={this.onChangeHandler}\n                  {...this.helperParams}\n                />\n                <span\n                  className={classnames(\n                    'dnb-switch__button',\n                    createSkeletonClass('shape', skeleton, this.context)\n                  )}\n                  aria-hidden\n                >\n                  <span className=\"dnb-switch__focus\">\n                    <span className=\"dnb-switch__focus__inner\" />\n                  </span>\n                </span>\n              </span>\n\n              {suffix && (\n                <Suffix\n                  className=\"dnb-switch__suffix\"\n                  id={id + '-suffix'} // used for \"aria-describedby\"\n                  context={props}\n                >\n                  {suffix}\n                </Suffix>\n              )}\n            </span>\n          </span>\n        </span>\n      </span>\n    )\n  }\n}\n\nSwitch._formElement = true\nSwitch._supportsSpacingProps = true\n"],"mappings":"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"}

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

@@ -32,11 +32,11 @@
   font-size: var(--font-size-basis);
 }
 .dnb-switch__shell {
-  -webkit-user-select: none;
-          user-select: none;
   position: relative;
   display: flex;
   align-items: center;
+  -webkit-user-select: none;
+          user-select: none;
 }
 .dnb-switch--large {
   line-height: var(--switch-height--large);
@@ -58,9 +58,9 @@
   left: 0;
   width: var(--switch-height--medium);
   height: var(--switch-height--medium);
-  transform: translateX(0);
-  transition: transform 160ms ease-out 125ms;
+  background-color: lightgrey;
   border: var(--switch-border-width--medium) solid transparent;
+  transition: transform 160ms ease-out 125ms;
 }
 .dnb-switch--large .dnb-switch__button {
   width: var(--switch-height--large);
@@ -73,10 +73,6 @@
   z-index: 2;
   width: 100%;
   height: 100%;
-  transition: transform 150ms ease-out;
-  transform: rotate(0deg);
-  -webkit-clip-path: polygon(50% 15%, 110% 15%, 110% -10%, -10% -10%, -10% 110%, 110% 110%, 110% 85%, 50% 85%);
-          clip-path: polygon(50% 15%, 110% 15%, 110% -10%, -10% -10%, -10% 110%, 110% 110%, 110% 85%, 50% 85%);
   outline: none;
 }
 html[data-whatinput=keyboard] .dnb-switch__focus {
@@ -100,10 +96,21 @@ html[data-whatinput=keyboard] .dnb-switch__focus {
   transform: translateX(calc(var(--switch-width--large) - 2rem + var(--switch-border-width--large)));
 }
 .dnb-switch__background {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  overflow: hidden;
   width: var(--switch-width--medium);
   height: calc(var(--switch-height--medium) - 0.5rem);
+  background-color: grey;
   border-radius: calc(var(--switch-height--medium) - 0.25rem);
 }
+.dnb-switch__background::after {
+  content: "";
+  position: absolute;
+  transition: transform 0.3s ease-out, position 0.3s ease-out;
+}
 .dnb-switch--large .dnb-switch__background {
   width: var(--switch-width--large);
   height: calc(var(--switch-height--large) - 0.75rem);
@@ -129,6 +136,18 @@ html[data-whatinput=keyboard] .dnb-switch__focus {
 .dnb-switch__input:not([disabled]) {
   cursor: pointer;
 }
+.dnb-switch__input:not([disabled]):focus ~ .dnb-switch__background, .dnb-switch__input:not([disabled]):active ~ .dnb-switch__background {
+  outline: none;
+}
+html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):focus ~ .dnb-switch__background, html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):active ~ .dnb-switch__background {
+  --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;
+}
+.dnb-switch__input:not([disabled]):focus ~ .dnb-switch__button .dnb-switch__focus, .dnb-switch__input:not([disabled]):active ~ .dnb-switch__button .dnb-switch__focus {
+  display: block;
+}
 .dnb-switch .dnb-form-label {
   padding-right: 0.5rem;
   margin-right: 0;
@@ -149,7 +168,7 @@ html[data-whatinput=keyboard] .dnb-switch__focus {
 }
 .dnb-switch--label-position-left .dnb-switch__order .dnb-form-label {
   order: 1;
-  align-self: flex-start;
+  align-self: center;
 }
 .dnb-switch--label-position-left .dnb-switch__order .dnb-form-status {
   order: 3;
@@ -173,8 +192,23 @@ html[data-whatinput=keyboard] .dnb-switch__focus {
   background-color: var(--skeleton-color);
 }
 .dnb-switch.dnb-skeleton .dnb-switch__input[disabled]:not(:checked) ~ .dnb-switch__background::after {
+  content: "";
   border-color: var(--skeleton-color--contrast);
 }
+.dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active) ~ .dnb-switch__button .dnb-switch__focus {
+  display: block;
+  --border-color: red;
+  --border-width: var(--focus-ring-width, 0.125rem);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active) ~ .dnb-switch__background {
+  background-color: tomato;
+  --border-color: red;
+  --border-width: var(--focus-ring-width, 0.125rem);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
 @supports (-ms-ime-align: auto) {
   .dnb-switch__input:not(:checked) ~ .dnb-switch__button {
     transform: translateX(0);

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

@@ -1 +1 @@
-.dnb-switch{--switch-width--medium:2.5rem;--switch-height--medium:1.5rem;--switch-width--large:3.25rem;--switch-height--large:2rem;--switch-border-width--medium:0.0625rem;--switch-border-width--large:0.125rem;font-size:var(--font-size-small);line-height:var(--line-height-basis)}.dnb-switch,.dnb-switch__inner{display:inline-flex;flex-direction:column}.dnb-switch__inner{font-size:var(--font-size-basis);justify-content:center}.dnb-switch__shell{align-items:center;display:flex;position:relative;-webkit-user-select:none;user-select:none}.dnb-switch--large{line-height:var(--switch-height--large)}.dnb-switch--large .dnb-switch__shell{height:var(--switch-height--large)}.dnb-switch__row{align-items:center;display:inline-flex;height:var(--switch-height--medium)}.dnb-switch__button,.dnb-switch__focus{border-radius:50%;position:absolute;z-index:4}.dnb-switch__button{border:var(--switch-border-width--medium) solid transparent;height:var(--switch-height--medium);left:0;transform:translateX(0);transition:transform .16s ease-out 125ms;width:var(--switch-height--medium)}.dnb-switch--large .dnb-switch__button{border-width:var(--switch-border-width--large);height:var(--switch-height--large);width:var(--switch-height--large)}.dnb-switch__focus{-webkit-clip-path:polygon(50% 15%,110% 15%,110% -10%,-10% -10%,-10% 110%,110% 110%,110% 85%,50% 85%);clip-path:polygon(50% 15%,110% 15%,110% -10%,-10% -10%,-10% 110%,110% 110%,110% 85%,50% 85%);display:none;height:100%;outline:none;position:absolute;transform:rotate(0deg);transition:transform .15s ease-out;width:100%;z-index:2}html[data-whatinput=keyboard] .dnb-switch__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-switch__input:not(:checked)~.dnb-switch__button{transform:translateX(0);transform:translateX(calc(0px - var(--switch-border-width--medium)))}.dnb-switch__input:checked~.dnb-switch__button{transform:translateX(1rem);transform:translateX(calc(var(--switch-width--medium) - 1.5rem + var(--switch-border-width--medium)))}.dnb-switch--large .dnb-switch__input:not(:checked)~.dnb-switch__button{transform:translateX(calc(0px - var(--switch-border-width--large)))}.dnb-switch--large .dnb-switch__input:checked~.dnb-switch__button{transform:translateX(calc(var(--switch-width--large) - 2rem + var(--switch-border-width--large)))}.dnb-switch__background{border-radius:calc(var(--switch-height--medium) - .25rem);height:calc(var(--switch-height--medium) - .5rem);width:var(--switch-width--medium)}.dnb-switch--large .dnb-switch__background{border-radius:calc(var(--switch-height--large) - .375rem);height:calc(var(--switch-height--large) - .75rem);width:var(--switch-width--large)}.dnb-switch__input{border:0;display:block;height:var(--switch-height--medium);left:0;margin:0;opacity:0;padding:0;position:absolute;right:0;width:var(--switch-width--medium);z-index:5}.dnb-switch--large .dnb-switch__input{height:var(--switch-height--large);width:var(--switch-width--large)}.dnb-switch__input:not([disabled]){cursor:pointer}.dnb-switch .dnb-form-label{margin-bottom:0;margin-left:0;margin-right:0;padding-right:.5rem}.dnb-switch__order{display:inline-flex}.dnb-switch__suffix{order:4}.dnb-switch--label-position-left .dnb-switch__suffix{padding-left:1rem}.dnb-switch--label-position-left .dnb-switch__order .dnb-switch__inner{order:2}.dnb-switch--label-position-left .dnb-switch__order .dnb-form-label{align-self:flex-start;order:1}.dnb-switch--label-position-left .dnb-switch__order .dnb-form-status{margin-top:.5rem;order:3}.dnb-switch--label-position-right .dnb-switch__order .dnb-switch__inner{order:1}.dnb-switch--label-position-right .dnb-switch__order .dnb-form-label{order:2;padding-left:.5rem}.dnb-switch--label-position-right .dnb-switch__order .dnb-form-status{margin-top:.5rem;order:3}.dnb-switch.dnb-skeleton .dnb-switch__input[disabled]~.dnb-switch__background:after,.dnb-switch.dnb-skeleton .dnb-switch__input[disabled]~.dnb-switch__button{border-color:var(--skeleton-color)}.dnb-switch.dnb-skeleton .dnb-switch__input[disabled]~.dnb-switch__background{background-color:var(--skeleton-color)}.dnb-switch.dnb-skeleton .dnb-switch__input[disabled]:not(:checked)~.dnb-switch__background:after{border-color:var(--skeleton-color--contrast)}@supports (-ms-ime-align:auto){.dnb-switch__input:not(:checked)~.dnb-switch__button{transform:translateX(0)}.dnb-switch__input:checked~.dnb-switch__button{transform:translateX(calc(var(--switch-width--medium) - 1.5rem))}}
+.dnb-switch{--switch-width--medium:2.5rem;--switch-height--medium:1.5rem;--switch-width--large:3.25rem;--switch-height--large:2rem;--switch-border-width--medium:0.0625rem;--switch-border-width--large:0.125rem;font-size:var(--font-size-small);line-height:var(--line-height-basis)}.dnb-switch,.dnb-switch__inner{display:inline-flex;flex-direction:column}.dnb-switch__inner{font-size:var(--font-size-basis);justify-content:center}.dnb-switch__shell{align-items:center;display:flex;position:relative;-webkit-user-select:none;user-select:none}.dnb-switch--large{line-height:var(--switch-height--large)}.dnb-switch--large .dnb-switch__shell{height:var(--switch-height--large)}.dnb-switch__row{align-items:center;display:inline-flex;height:var(--switch-height--medium)}.dnb-switch__button,.dnb-switch__focus{border-radius:50%;position:absolute;z-index:4}.dnb-switch__button{background-color:#d3d3d3;border:var(--switch-border-width--medium) solid transparent;height:var(--switch-height--medium);left:0;transition:transform .16s ease-out 125ms;width:var(--switch-height--medium)}.dnb-switch--large .dnb-switch__button{border-width:var(--switch-border-width--large);height:var(--switch-height--large);width:var(--switch-height--large)}.dnb-switch__focus{display:none;height:100%;outline:none;position:absolute;width:100%;z-index:2}html[data-whatinput=keyboard] .dnb-switch__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-switch__input:not(:checked)~.dnb-switch__button{transform:translateX(0);transform:translateX(calc(0px - var(--switch-border-width--medium)))}.dnb-switch__input:checked~.dnb-switch__button{transform:translateX(1rem);transform:translateX(calc(var(--switch-width--medium) - 1.5rem + var(--switch-border-width--medium)))}.dnb-switch--large .dnb-switch__input:not(:checked)~.dnb-switch__button{transform:translateX(calc(0px - var(--switch-border-width--large)))}.dnb-switch--large .dnb-switch__input:checked~.dnb-switch__button{transform:translateX(calc(var(--switch-width--large) - 2rem + var(--switch-border-width--large)))}.dnb-switch__background{align-items:center;background-color:grey;border-radius:calc(var(--switch-height--medium) - .25rem);display:flex;flex-direction:row;height:calc(var(--switch-height--medium) - .5rem);overflow:hidden;position:relative;width:var(--switch-width--medium)}.dnb-switch__background:after{content:"";position:absolute;transition:transform .3s ease-out,position .3s ease-out}.dnb-switch--large .dnb-switch__background{border-radius:calc(var(--switch-height--large) - .375rem);height:calc(var(--switch-height--large) - .75rem);width:var(--switch-width--large)}.dnb-switch__input{border:0;display:block;height:var(--switch-height--medium);left:0;margin:0;opacity:0;padding:0;position:absolute;right:0;width:var(--switch-width--medium);z-index:5}.dnb-switch--large .dnb-switch__input{height:var(--switch-height--large);width:var(--switch-width--large)}.dnb-switch__input:not([disabled]){cursor:pointer}.dnb-switch__input:not([disabled]):active~.dnb-switch__background,.dnb-switch__input:not([disabled]):focus~.dnb-switch__background{outline:none}html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):active~.dnb-switch__background,html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):focus~.dnb-switch__background{--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-switch__input:not([disabled]):active~.dnb-switch__button .dnb-switch__focus,.dnb-switch__input:not([disabled]):focus~.dnb-switch__button .dnb-switch__focus{display:block}.dnb-switch .dnb-form-label{margin-bottom:0;margin-left:0;margin-right:0;padding-right:.5rem}.dnb-switch__order{display:inline-flex}.dnb-switch__suffix{order:4}.dnb-switch--label-position-left .dnb-switch__suffix{padding-left:1rem}.dnb-switch--label-position-left .dnb-switch__order .dnb-switch__inner{order:2}.dnb-switch--label-position-left .dnb-switch__order .dnb-form-label{align-self:center;order:1}.dnb-switch--label-position-left .dnb-switch__order .dnb-form-status{margin-top:.5rem;order:3}.dnb-switch--label-position-right .dnb-switch__order .dnb-switch__inner{order:1}.dnb-switch--label-position-right .dnb-switch__order .dnb-form-label{order:2;padding-left:.5rem}.dnb-switch--label-position-right .dnb-switch__order .dnb-form-status{margin-top:.5rem;order:3}.dnb-switch.dnb-skeleton .dnb-switch__input[disabled]~.dnb-switch__background:after,.dnb-switch.dnb-skeleton .dnb-switch__input[disabled]~.dnb-switch__button{border-color:var(--skeleton-color)}.dnb-switch.dnb-skeleton .dnb-switch__input[disabled]~.dnb-switch__background{background-color:var(--skeleton-color)}.dnb-switch.dnb-skeleton .dnb-switch__input[disabled]:not(:checked)~.dnb-switch__background:after{border-color:var(--skeleton-color--contrast);content:""}.dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active)~.dnb-switch__button .dnb-switch__focus{--border-color:red;--border-width:var(--focus-ring-width,0.125rem);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);display:block}.dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active)~.dnb-switch__background{--border-color:red;--border-width:var(--focus-ring-width,0.125rem);background-color:tomato;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}@supports (-ms-ime-align:auto){.dnb-switch__input:not(:checked)~.dnb-switch__button{transform:translateX(0)}.dnb-switch__input:checked~.dnb-switch__button{transform:translateX(calc(var(--switch-width--medium) - 1.5rem))}}