@dnb/eufemia 10.0.0-beta.6 → 10.0.0-beta.8

package/components/timeline/TimelineItem.d.ts

@@ -15,11 +15,11 @@ export declare type TimelineItemProps = {
     /**
      * Text displaying the title of the timeline item.
      */
-    title: React.ReactNode | string;
+    title: React.ReactNode;
     /**
      * Text displaying the subtitle of the timeline item.
      */
-    subtitle?: React.ReactNode | React.ReactNode[] | string | string[];
+    subtitle?: React.ReactNode | React.ReactNode[];
     /**
      * Text displaying info message of the timeline item.
      */

package/components/toggle-button/ToggleButton.d.ts

@@ -1,11 +1,12 @@
 import * as React from 'react';
-import type { ButtonIconPosition } from '../button';
+import type { ButtonIconPosition } from '../Button';
 import type { FormLabelLabelDirection, FormLabelText } from '../FormLabel';
 import type {
   FormStatusProps,
   FormStatusState,
   FormStatusText
 } from '../FormStatus';
+import type { GlobalStatusConfigObject } from '../GlobalStatus';
 import type { IconIcon, IconSize } from '../Icon';
 import type { SkeletonShow } from '../Skeleton';
 import type { SpacingProps } from '../space/types';
@@ -73,9 +74,9 @@ export interface ToggleButtonProps
   status_no_animation?: boolean;
 
   /**
-   * The `status_id` used for the target <a href="/uilib/components/global-status">GlobalStatus</a>.
+   * The <a href="/uilib/components/global-status/properties/#configuration-object">configuration</a> used for the target <a href="/uilib/components/global-status">GlobalStatus</a>.
    */
-  global_status_id?: string;
+  globalStatus?: GlobalStatusConfigObject;
 
   /**
    * Text describing the content of the ToggleButton more than the label. You can also send in a React component, so it gets wrapped inside the ToggleButton component.

package/components/toggle-button/ToggleButton.js

@@ -4,7 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 
 var _AlignmentHelper;
 
-const _excluded = ["status", "status_state", "status_props", "status_no_animation", "global_status_id", "suffix", "label", "label_direction", "label_sr_only", "text", "title", "readOnly", "className", "class", "disabled", "skeleton", "variant", "left_component", "icon", "icon_size", "icon_position", "value", "id", "checked", "children", "on_change", "on_state_update"];
+const _excluded = ["status", "status_state", "status_props", "status_no_animation", "globalStatus", "suffix", "label", "label_direction", "label_sr_only", "text", "title", "readOnly", "className", "class", "disabled", "skeleton", "variant", "left_component", "icon", "icon_size", "icon_position", "value", "id", "checked", "children", "on_change", "on_state_update"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -171,7 +171,7 @@ export default class ToggleButton extends React.PureComponent {
         status_state,
         status_props,
         status_no_animation,
-        global_status_id,
+        globalStatus,
         suffix,
         label,
         label_direction,
@@ -296,7 +296,7 @@ export default class ToggleButton extends React.PureComponent {
       }, React.createElement(FormStatus, _extends({
         show: showStatus,
         id: id + '-form-status',
-        global_status_id: global_status_id,
+        globalStatus: globalStatus,
         label: label,
         text_id: id + '-status',
         text: status,
@@ -346,7 +346,7 @@ _defineProperty(ToggleButton, "defaultProps", {
   status_state: 'error',
   status_props: null,
   status_no_animation: null,
-  global_status_id: null,
+  globalStatus: null,
   suffix: null,
   value: '',
   icon: null,
@@ -379,7 +379,10 @@ process.env.NODE_ENV !== "production" ? ToggleButton.propTypes = _objectSpread(_
   status_state: PropTypes.string,
   status_props: PropTypes.object,
   status_no_animation: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  global_status_id: PropTypes.string,
+  globalStatus: PropTypes.shape({
+    id: PropTypes.string,
+    message: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
+  }),
   suffix: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.node]),
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object, PropTypes.array]),
   icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.func]),

package/components/toggle-button/ToggleButtonGroup.d.ts

@@ -7,6 +7,7 @@ import type {
 import type { SkeletonShow } from '../Skeleton';
 import type { SpacingProps } from '../space/types';
 import type { FormLabelLabelDirection, FormLabelText } from '../FormLabel';
+import type { GlobalStatusConfigObject } from '../GlobalStatus';
 export type ToggleButtonGroupVariant = 'default' | 'checkbox' | 'radio';
 export type ToggleButtonGroupSuffix =
   | string
@@ -68,9 +69,9 @@ export interface ToggleButtonGroupProps
   status_no_animation?: boolean;
 
   /**
-   * The `status_id` used for the target <a href="/uilib/components/global-status">GlobalStatus</a>.
+   * The <a href="/uilib/components/global-status/properties/#configuration-object">configuration</a> used for the target <a href="/uilib/components/global-status">GlobalStatus</a>.
    */
-  global_status_id?: string;
+  globalStatus?: GlobalStatusConfigObject;
 
   /**
    * Text describing the content of the ToggleButton more than the label. You can also send in a React component, so it gets wrapped inside the ToggleButton component.

package/components/toggle-button/ToggleButtonGroup.js

@@ -4,7 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 
 var _AlignmentHelper;
 
-const _excluded = ["status", "status_state", "status_props", "status_no_animation", "global_status_id", "suffix", "label_direction", "label_sr_only", "vertical", "layout_direction", "label", "variant", "left_component", "no_fieldset", "disabled", "skeleton", "className", "class", "multiselect", "id", "name", "value", "values", "children", "on_change"];
+const _excluded = ["status", "status_state", "status_props", "status_no_animation", "globalStatus", "suffix", "label_direction", "label_sr_only", "vertical", "layout_direction", "label", "variant", "left_component", "no_fieldset", "disabled", "skeleton", "className", "class", "multiselect", "id", "name", "value", "values", "children", "on_change"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -95,7 +95,7 @@ export default class ToggleButtonGroup extends React.PureComponent {
       status_state,
       status_props,
       status_no_animation,
-      global_status_id,
+      globalStatus,
       suffix,
       label_direction,
       label_sr_only,
@@ -183,7 +183,7 @@ export default class ToggleButtonGroup extends React.PureComponent {
     }, params), React.createElement(FormStatus, _extends({
       show: showStatus,
       id: id + '-form-status',
-      global_status_id: global_status_id,
+      globalStatus: globalStatus,
       label: label,
       text_id: id + '-status',
       text: status,
@@ -220,7 +220,7 @@ _defineProperty(ToggleButtonGroup, "defaultProps", {
   status_state: 'error',
   status_props: null,
   status_no_animation: null,
-  global_status_id: null,
+  globalStatus: null,
   suffix: null,
   vertical: null,
   layout_direction: 'row',
@@ -250,7 +250,10 @@ process.env.NODE_ENV !== "production" ? ToggleButtonGroup.propTypes = _objectSpr
   status_state: PropTypes.string,
   status_props: PropTypes.object,
   status_no_animation: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  global_status_id: PropTypes.string,
+  globalStatus: PropTypes.shape({
+    id: PropTypes.string,
+    message: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
+  }),
   suffix: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.node]),
   vertical: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   layout_direction: PropTypes.oneOf(['column', 'row']),

package/components/tooltip/TooltipWithEvents.d.ts

@@ -2,10 +2,10 @@
  * Web Tooltip Component
  *
  */
-import React from 'react';
+/// <reference types="react" />
 import { TooltipProps } from './types';
 declare type TooltipWithEventsProps = {
-    target: HTMLElement | React.ReactElement;
+    target: HTMLElement;
     active: boolean;
     internalId: string;
 };

package/components/tooltip/TooltipWithEvents.js

@@ -108,8 +108,13 @@ function TooltipWithEvents(props) {
 
   const onMouseEnter = e => {
     try {
+      const elem = e.currentTarget;
+
+      if (elem.getAttribute('data-autofocus')) {
+        return;
+      }
+
       if (isTouch(e.type)) {
-        const elem = e.currentTarget;
         elem.style.userSelect = 'none';
       }
     } catch (e) {

package/components/visually-hidden/style/dnb-visually-hidden.css

@@ -6,18 +6,18 @@
  * Utilities
  */
 .dnb-visually-hidden--focusable:not(:focus):not(:focus-within) {
-  -webkit-user-select: none;
-          user-select: none;
-  -webkit-touch-callout: none;
-  pointer-events: none;
-  position: absolute;
-  -webkit-clip-path: inset(50%);
-          clip-path: inset(50%);
-  max-width: 1px;
-  max-height: 1px;
-  overflow: hidden;
-  white-space: nowrap;
-  padding: 0;
-  margin: 0;
-  border: 0;
+  -webkit-user-select: none !important;
+          user-select: none !important;
+  -webkit-touch-callout: none !important;
+  pointer-events: none !important;
+  position: absolute !important;
+  -webkit-clip-path: inset(50%) !important;
+          clip-path: inset(50%) !important;
+  max-width: 1px !important;
+  max-height: 1px !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  border: 0 !important;
 }

package/components/visually-hidden/style/dnb-visually-hidden.min.css

@@ -1 +1 @@
-.dnb-visually-hidden--focusable:not(:focus):not(:focus-within){-webkit-touch-callout:none;border:0;-webkit-clip-path:inset(50%);clip-path:inset(50%);margin:0;max-height:1px;max-width:1px;overflow:hidden;padding:0;pointer-events:none;position:absolute;-webkit-user-select:none;user-select:none;white-space:nowrap}
+.dnb-visually-hidden--focusable:not(:focus):not(:focus-within){-webkit-touch-callout:none!important;border:0!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;margin:0!important;max-height:1px!important;max-width:1px!important;overflow:hidden!important;padding:0!important;pointer-events:none!important;position:absolute!important;-webkit-user-select:none!important;user-select:none!important;white-space:nowrap!important}

package/elements/Link.d.ts

@@ -5,5 +5,5 @@
 /// <reference types="react" />
 declare const Link: import("react").ForwardRefExoticComponent<Pick<import("../components/Anchor").AnchorProps & import("react").HTMLProps<HTMLAnchorElement> & import("../shared/types").SpacingElementProps & {
     space?: import("../shared/types").SpaceType | import("../shared/types").SpacingElementProps;
-}, "aria-hidden" | "cite" | "data" | "dir" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "accessKey" | "key" | "value" | "space" | "top" | "right" | "bottom" | "left" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "className" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "innerRef" | "list" | "tooltip" | "step" | "shape" | "skeleton" | "as" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "size" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "target" | "type" | "useMap" | "width" | "wmode" | "wrap" | "to" | "element" | "targetBlankTitle" | "omitClass" | "inner_ref"> & import("react").RefAttributes<HTMLAnchorElement>>;
+}, "aria-hidden" | "cite" | "data" | "dir" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "accessKey" | "key" | "value" | "space" | "top" | "right" | "bottom" | "left" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "className" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "innerRef" | "list" | "tooltip" | "step" | "shape" | "skeleton" | "as" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "size" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "target" | "type" | "useMap" | "width" | "wmode" | "wrap" | "to" | "icon" | "element" | "targetBlankTitle" | "iconPosition" | "omitClass" | "inner_ref"> & import("react").RefAttributes<HTMLAnchorElement>>;
 export default Link;

package/elements/lib.d.ts

@@ -87,7 +87,7 @@ export declare const getElements: () => {
     Li: ({ className, ...p }?: import("./Li").LiAllProps) => JSX.Element;
     Link: import("react").ForwardRefExoticComponent<Pick<import("../components/Anchor").AnchorProps & import("react").HTMLProps<HTMLAnchorElement> & import("../shared/types").SpacingElementProps & {
         space?: import("../shared/types").SpaceType | import("../shared/types").SpacingElementProps;
-    }, "aria-hidden" | "cite" | "data" | "dir" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "accessKey" | "key" | "value" | "space" | "top" | "right" | "bottom" | "left" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "className" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "innerRef" | "list" | "tooltip" | "step" | "shape" | "skeleton" | "as" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "size" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "target" | "type" | "useMap" | "width" | "wmode" | "wrap" | "to" | "element" | "targetBlankTitle" | "omitClass" | "inner_ref"> & import("react").RefAttributes<HTMLAnchorElement>>;
+    }, "aria-hidden" | "cite" | "data" | "dir" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "accessKey" | "key" | "value" | "space" | "top" | "right" | "bottom" | "left" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "className" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "innerRef" | "list" | "tooltip" | "step" | "shape" | "skeleton" | "as" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "size" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "target" | "type" | "useMap" | "width" | "wmode" | "wrap" | "to" | "icon" | "element" | "targetBlankTitle" | "iconPosition" | "omitClass" | "inner_ref"> & import("react").RefAttributes<HTMLAnchorElement>>;
     Ol: ({ nested, inside, outside, ...p }?: import("./Ol").OlAllProps) => JSX.Element;
     P: ({ modifier, element, className, medium, bold, size, ...props }: import("./P").PProps) => JSX.Element;
     Paragraph: (props: import("./P").PProps) => JSX.Element;

package/elements/typography/style/themes/dnb-typography-theme-sbanken.scss

@@ -0,0 +1,16 @@
+@use '../typography-mixins.scss' as typography;
+
+// Paragraphs
+.dnb-p {
+  color: var(--sb-color-text);
+}
+
+// Setting the default headings color
+@include typography.headingTags() {
+  color: var(--sb-color-text);
+}
+
+// Headings
+@include typography.headingClasses() {
+  color: var(--sb-color-text);
+}

package/elements/typography/style/themes/dnb-typography-theme-ui.scss

@@ -1,35 +1,16 @@
+@use '../typography-mixins.scss' as typography;
+
 // Paragraphs
 .dnb-p {
   color: var(--theme-color-black-80, currentColor);
 }
 
 // Setting the default headings color
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
+@include typography.headingTags() {
   color: var(--theme-color-black-80, currentColor);
 }
 
 // Headings
-.dnb-lead,
- .dnb-h--xx-large,
- .dnb-h--x-large,
- .dnb-h--large,
- .dnb-h--medium,
- .dnb-h--basis,
- .dnb-h--small,
- .dnb-h--x-small,
- // make exception on headings which are inside of dnb-core-style
- .dnb-core-style .dnb-lead,
- .dnb-core-style .dnb-h--xx-large,
- .dnb-core-style .dnb-h--x-large,
- .dnb-core-style .dnb-h--large,
- .dnb-core-style .dnb-h--medium,
- .dnb-core-style .dnb-h--basis,
- .dnb-core-style .dnb-h--small,
- .dnb-core-style .dnb-h--x-small {
+@include typography.headingClasses() {
   color: var(--theme-color-black-80, currentColor);
 }

package/elements/typography/style/typography-mixins.scss

@@ -1,5 +1,38 @@
 @use '../../../style/elements/ui-spacing.scss';
 
+@mixin headingTags() {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @content;
+  }
+}
+
+@mixin headingClasses() {
+  .dnb-lead,
+  .dnb-h--xx-large,
+  .dnb-h--x-large,
+  .dnb-h--large,
+  .dnb-h--medium,
+  .dnb-h--basis,
+  .dnb-h--small,
+  .dnb-h--x-small,
+  // make exception on headings which are inside of dnb-core-style
+  .dnb-core-style .dnb-lead,
+  .dnb-core-style .dnb-h--xx-large,
+  .dnb-core-style .dnb-h--x-large,
+  .dnb-core-style .dnb-h--large,
+  .dnb-core-style .dnb-h--medium,
+  .dnb-core-style .dnb-h--basis,
+  .dnb-core-style .dnb-h--small,
+  .dnb-core-style .dnb-h--x-small {
+    @content;
+  }
+}
+
 @mixin headingDefaults() {
   padding: 0;
 

package/es/components/accordion/Accordion.d.ts

@@ -21,6 +21,7 @@ export type AccordionIcon =
       expanded?: React.ReactNode | ((...args: any[]) => any);
     };
 export type AccordionAttributes = string | Record<string, unknown>;
+export type AccordionIconPosition = ButtonIconPosition;
 export interface AccordionProps
   extends Omit<React.HTMLProps<HTMLElement>, 'ref'>,
     SpacingProps {
@@ -129,7 +130,7 @@ export interface AccordionProps
   /**
    * Will set the placement of the icon. Defaults to `left`.
    */
-  icon_position?: ButtonIconPosition;
+  icon_position?: AccordionIconPosition;
 
   /**
    * Define a different icon size. Defaults to `medium` (1.5rem).

package/es/components/anchor/Anchor.d.ts

@@ -4,6 +4,7 @@
  */
 import React from 'react';
 import { ElementIsType } from '../../elements/Element';
+import type { IconIcon } from '../icon/Icon';
 import type { SkeletonShow } from '../skeleton/Skeleton';
 import type { SpacingProps } from '../../shared/types';
 export declare type AnchorProps = {
@@ -13,6 +14,8 @@ export declare type AnchorProps = {
     targetBlankTitle?: string;
     target?: string;
     tooltip?: React.ReactNode;
+    icon?: IconIcon;
+    iconPosition?: 'left' | 'right';
     skeleton?: SkeletonShow;
     omitClass?: boolean;
     innerRef?: React.RefObject<HTMLAnchorElement>;
@@ -23,5 +26,6 @@ export declare type AnchorAllProps = AnchorProps & React.HTMLProps<HTMLAnchorEle
 export declare function AnchorInstance(localProps: AnchorAllProps): JSX.Element;
 declare const Anchor: React.ForwardRefExoticComponent<Pick<AnchorProps & React.HTMLProps<HTMLAnchorElement> & import("../space/types").SpacingElementProps & {
     space?: import("../space/types").SpaceType | import("../space/types").SpacingElementProps;
-}, "aria-hidden" | "cite" | "data" | "dir" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "accessKey" | "key" | "value" | "space" | "top" | "right" | "bottom" | "left" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "className" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "innerRef" | "list" | "tooltip" | "step" | "shape" | "skeleton" | "as" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "size" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "target" | "type" | "useMap" | "width" | "wmode" | "wrap" | "to" | "element" | "targetBlankTitle" | "omitClass" | "inner_ref"> & React.RefAttributes<HTMLAnchorElement>>;
+}, "aria-hidden" | "cite" | "data" | "dir" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "accessKey" | "key" | "value" | "space" | "top" | "right" | "bottom" | "left" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "className" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "innerRef" | "list" | "tooltip" | "step" | "shape" | "skeleton" | "as" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "size" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "target" | "type" | "useMap" | "width" | "wmode" | "wrap" | "to" | "icon" | "element" | "targetBlankTitle" | "iconPosition" | "omitClass" | "inner_ref"> & React.RefAttributes<HTMLAnchorElement>>;
 export default Anchor;
+export declare function scrollToHashHandler(e: React.MouseEvent<HTMLAnchorElement, MouseEvent>): void;

package/es/components/anchor/Anchor.js

@@ -1,11 +1,13 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["id", "element", "className", "children", "tooltip", "omitClass", "innerRef", "targetBlankTitle"];
+const _excluded = ["id", "element", "className", "children", "tooltip", "icon", "iconPosition", "omitClass", "innerRef", "targetBlankTitle"];
 import React from 'react';
 import classnames from 'classnames';
 import E from '../../elements/Element';
 import Context from '../../shared/Context';
 import { makeUniqueId, extendPropsWithContext } from '../../shared/component-helper';
+import { getOffsetTop } from '../../shared/helpers';
+import IconPrimary from '../icon-primary/IconPrimary';
 import Tooltip from '../tooltip/Tooltip';
 const defaultProps = {};
 export function AnchorInstance(localProps) {
@@ -29,6 +31,8 @@ export function AnchorInstance(localProps) {
     className,
     children,
     tooltip,
+    icon,
+    iconPosition = 'left',
     omitClass,
     innerRef,
     targetBlankTitle
@@ -39,13 +43,28 @@ export function AnchorInstance(localProps) {
   const internalId = id || 'id' + makeUniqueId();
   const showTooltip = tooltip || allProps.target === '_blank' && !allProps.title;
   const as = element || 'a';
+  let prefix;
+  let suffix;
+
+  if (icon) {
+    const iconNode = typeof icon === 'string' ? React.createElement(IconPrimary, {
+      icon: icon
+    }) : icon;
+
+    if (iconPosition === 'left') {
+      prefix = React.createElement(React.Fragment, null, iconNode, " ");
+    } else if (iconPosition === 'right') {
+      suffix = React.createElement(React.Fragment, null, " ", iconNode);
+    }
+  }
+
   return React.createElement(React.Fragment, null, React.createElement(E, _extends({
     as: as,
     id: id,
-    className: classnames(className, omitClass !== true && 'dnb-anchor', allProps.target === '_blank' && typeof children !== 'string' && 'dnb-anchor--no-icon')
+    className: classnames(className, omitClass !== true && 'dnb-anchor', typeof children !== 'string' && 'dnb-anchor--has-icon', prefix && 'dnb-anchor--icon-left', suffix && 'dnb-anchor--icon-right', allProps.target === '_blank' && (typeof children !== 'string' || suffix) && 'dnb-anchor--no-icon')
   }, attributes, {
     innerRef: innerRef
-  }), children), showTooltip && React.createElement(Tooltip, {
+  }), prefix, children, suffix), showTooltip && React.createElement(Tooltip, {
     showDelay: 100,
     id: internalId + '-tooltip',
     targetElement: innerRef,
@@ -57,4 +76,30 @@ const Anchor = React.forwardRef((props, ref) => {
     innerRef: ref
   }, props));
 });
-export default Anchor;
+export default Anchor;
+export function scrollToHashHandler(e) {
+  var _element$pathname;
+
+  const element = e.currentTarget;
+  const href = element.getAttribute('href');
+
+  if (typeof document === 'undefined' || !href.includes('#')) {
+    return;
+  }
+
+  const isSamePath = href.startsWith('#') || window.location.href.includes((_element$pathname = element.pathname) === null || _element$pathname === void 0 ? void 0 : _element$pathname.replace(/\/$/, ''));
+
+  if (isSamePath) {
+    const id = href.split(/#/g).reverse()[0];
+    const anchorElem = document.getElementById(id);
+
+    if (anchorElem instanceof HTMLElement) {
+      e.preventDefault();
+      const scrollPadding = parseFloat(window.getComputedStyle(document.documentElement).scrollPaddingTop);
+      const top = getOffsetTop(anchorElem) - scrollPadding || 0;
+      window.scroll({
+        top
+      });
+    }
+  }
+}

package/es/components/anchor/style/anchor-mixins.scss

@@ -9,12 +9,12 @@
   // make sure we have always `display: inline;` as inline-block is breaking the border-bottom
   display: inline;
 
-  padding: 0.05575em 0.125em; // the total body height will then be 24px if font-size is 18px
+  padding: 0.05575em 0; // the total body height will then be 24px if font-size is 18px
 
   font-size: var(--font-size-basis);
   text-decoration: underline;
   text-decoration-color: currentcolor;
-  text-decoration-thickness: 0.0938rem;
+  text-decoration-thickness: var(--anchor-underline-thickness);
   text-underline-offset: 0.25em;
   border-radius: 0;
 
@@ -107,6 +107,11 @@
   border-radius: 0.25em;
 }
 
+@mixin anchorBackground($color) {
+  box-shadow: inset 100vw 100vw 0 0 $color, -0.125em 0 0 0 $color,
+    0.125em 0 0 0 $color;
+}
+
 // other styles
 @mixin useAnchorContrastStyle($contrastColor: var(--color-emerald-green)) {
   color: var(--color-white);
@@ -197,8 +202,7 @@
     }
   }
 
-  transition: background-color 200ms ease-in-out,
-    border-radius 200ms ease-in-out;
+  transition: box-shadow 200ms ease-in-out, border-radius 200ms ease-in-out;
 
   [data-visual-test-wrapper] & {
     transition: none;