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

package/CHANGELOG.md

@@ -3,6 +3,69 @@
 All notable changes to @dnb/eufemia will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [10.0.0-beta.8](https://github.com/dnbexperience/eufemia/compare/v10.0.0-beta.7...v10.0.0-beta.8) (2023-05-26)
+
+
+### :barber: Style Changes
+
+* **Button:** smaller tertiary button focus effect for Sbanken ([#2319](https://github.com/dnbexperience/eufemia/issues/2319)) ([0652d0d](https://github.com/dnbexperience/eufemia/commit/0652d0d13a13739a176e82618a144cbe641f977a))
+
+
+### :sparkles: Features
+
+* **Anchor:** add `scrollToHash` feature ([#2290](https://github.com/dnbexperience/eufemia/issues/2290)) ([d9a692e](https://github.com/dnbexperience/eufemia/commit/d9a692ecd0565832928ee1668bab04873a668e8f)), closes [#2286](https://github.com/dnbexperience/eufemia/issues/2286)
+* **Anchor:** always show focus when `dnb-anchor--focus` is used ([#2364](https://github.com/dnbexperience/eufemia/issues/2364)) ([cdd75b2](https://github.com/dnbexperience/eufemia/commit/cdd75b28c107d154c6d5a879eee081329ab263a3))
+* **Anchor:** remove horizontal padding ([#2365](https://github.com/dnbexperience/eufemia/issues/2365)) ([05d75a6](https://github.com/dnbexperience/eufemia/commit/05d75a65ce9412d38d7a50073b1c88191b46b915))
+* **Anchor:** Sbanken styling, added icon props ([#2318](https://github.com/dnbexperience/eufemia/issues/2318)) ([c8e63a1](https://github.com/dnbexperience/eufemia/commit/c8e63a18a660a750bcf6fec938ad979c0f46ada1))
+* expose package version ([#2327](https://github.com/dnbexperience/eufemia/issues/2327)) ([b63b7cd](https://github.com/dnbexperience/eufemia/commit/b63b7cdd643b1dd949373632bcfc06ea221f9ef9))
+* **GlobalStatus:** add possibility for a custom message (replace `global_status_id` with `globalStatus` prop) ([#2351](https://github.com/dnbexperience/eufemia/issues/2351)) ([a6f59d8](https://github.com/dnbexperience/eufemia/commit/a6f59d8b92cebcc62548aead5ab5ba0a72c81b98))
+* **HelpButton:** remove `modal_props` in favour of `render` ([#2333](https://github.com/dnbexperience/eufemia/issues/2333)) ([6cb1767](https://github.com/dnbexperience/eufemia/commit/6cb1767623729c743c506a0858a83886ecc3ce21))
+* **Theme:** add `darkMode` and `contrastMode` props ([#2355](https://github.com/dnbexperience/eufemia/issues/2355)) ([712441b](https://github.com/dnbexperience/eufemia/commit/712441b979c63b450693f47ed94c037f0dfc0973))
+* **Typography:** Use text color on typography for Sbanken ([#2363](https://github.com/dnbexperience/eufemia/issues/2363)) ([eb2763b](https://github.com/dnbexperience/eufemia/commit/eb2763bf83ba9d6504e37508d9e80ccf02eedac7))
+
+
+### :memo: Documentation
+
+* Add Sbanken color table and -documentation ([#2332](https://github.com/dnbexperience/eufemia/issues/2332)) ([6523643](https://github.com/dnbexperience/eufemia/commit/6523643d0074a9567dce99e4ef7f08df3393800b))
+* **Breadcrumb:** improve event docs ([76f2294](https://github.com/dnbexperience/eufemia/commit/76f2294efe1cd4c48ecc843ca592c92162abdbe0))
+* **Grid:** removes WIP ([42b7d8d](https://github.com/dnbexperience/eufemia/commit/42b7d8dd498819eb00a3d77b9d463049c26be3e2))
+* **PaymentCard:** change imports of types to /payment-card ([e6588dc](https://github.com/dnbexperience/eufemia/commit/e6588dc84403ad6dbdd819bbb5fcd3b3ae1e3caa))
+* **ProgressIndicator:** Update size properties ([a216855](https://github.com/dnbexperience/eufemia/commit/a2168553f7e94f156ec26274185eb153d4cc2502))
+* **ProgressIndicator:** Update size properties ([4df05eb](https://github.com/dnbexperience/eufemia/commit/4df05ebb5341f6ffa315095b58d3f620442984ce))
+* **Radio:** improve event docs ([f277b13](https://github.com/dnbexperience/eufemia/commit/f277b1363e39619cd402b2c666c953719d4bc777))
+* **Table:** enhance info about the component and possibilities ([#2336](https://github.com/dnbexperience/eufemia/issues/2336)) ([9963029](https://github.com/dnbexperience/eufemia/commit/9963029ab7f0d9faf525a5a6df40c0840d9d83ba))
+* **Table:** improve event docs ([4bd22b7](https://github.com/dnbexperience/eufemia/commit/4bd22b7847ec24c6d46e6c52bace18528f86fea5))
+* **Tag:** improve event docs ([389ddd0](https://github.com/dnbexperience/eufemia/commit/389ddd0e1b41d15fc9f4667d9021c16ebdd39462))
+* **ToggleButton:** improve event docs ([aaf811c](https://github.com/dnbexperience/eufemia/commit/aaf811c526ad840fc58816ef41a8d62caa39c46a))
+* **v10:** adds examples for updating imports to assets and fonts ([d3d91b3](https://github.com/dnbexperience/eufemia/commit/d3d91b33540d6d803629e3da6cf3c2af0125f0d0))
+* **v10:** where -> was ([9acc294](https://github.com/dnbexperience/eufemia/commit/9acc29462a8b5c13ab9cb5cb7439bac1d3ee1e28))
+
+
+### :bug: Bug Fixes
+
+* **Button:** fix icon alignment issue when left positioned ([#2371](https://github.com/dnbexperience/eufemia/issues/2371)) ([bbb1ec8](https://github.com/dnbexperience/eufemia/commit/bbb1ec8d4bd4b1fef0af89a1cfa0081e6b80561d))
+* **Dialog:** make action buttons responsive ([#2373](https://github.com/dnbexperience/eufemia/issues/2373)) ([be41c14](https://github.com/dnbexperience/eufemia/commit/be41c14b2191ca754d69c85cd4196f9402185e00))
+* **Icon:** enhance alignment when used in paragraphs ([#2368](https://github.com/dnbexperience/eufemia/issues/2368)) ([69699f7](https://github.com/dnbexperience/eufemia/commit/69699f7efcbdefc80e78becf4c2b5c908d3eb362))
+* **InputMasked:** duplicate decimal number when typing ([#2344](https://github.com/dnbexperience/eufemia/issues/2344)) ([0d66dc0](https://github.com/dnbexperience/eufemia/commit/0d66dc06a9dab2eb9d91f93948337dff78f9346b))
+* **InputMasked:** fix integerLimit issue when combined with decimals ([#2338](https://github.com/dnbexperience/eufemia/issues/2338)) ([6df4b31](https://github.com/dnbexperience/eufemia/commit/6df4b31f8ae7a4ec4d18f03a0df17eebe55cb631))
+* **InputMasked:** on custom mask – avoid interaction stall after focus ([#2270](https://github.com/dnbexperience/eufemia/issues/2270)) ([2201ea9](https://github.com/dnbexperience/eufemia/commit/2201ea9e2e764e8ff7a98d591d2916fd3cb37814))
+* **NumberFormat:** fix tooltip theme inheritance ([#2354](https://github.com/dnbexperience/eufemia/issues/2354)) ([502c847](https://github.com/dnbexperience/eufemia/commit/502c847e1fba8bbbf2a55f03b299b97cf13b241d))
+* omit showing Tooltip after Dialog or Drawer got closed ([#2375](https://github.com/dnbexperience/eufemia/issues/2375)) ([583fb8d](https://github.com/dnbexperience/eufemia/commit/583fb8d19d6c86ce2a080490bd10066c17621539))
+* **VisuallyHidden:** force properties to overcome unwanted CSS specificity ([#2366](https://github.com/dnbexperience/eufemia/issues/2366)) ([64a3c6f](https://github.com/dnbexperience/eufemia/commit/64a3c6f2ff8fb4482acc402875b97649a954f279))
+
+## [10.0.0-beta.7](https://github.com/dnbexperience/eufemia/compare/v10.0.0-beta.6...v10.0.0-beta.7) (2023-05-10)
+
+
+### :sparkles: Features
+
+* **Accordion:** export type AccordionIconPosition ([23056cd](https://github.com/dnbexperience/eufemia/commit/23056cdd4f27b8f6ba74a43ad11c346f9ee50369))
+* **Button:** export type ButtonIcon ([ad315bf](https://github.com/dnbexperience/eufemia/commit/ad315bf62ce89dfb02af1a62484c1f5ff593672a))
+
+
+### :memo: Documentation
+
+* **v10:** adds examples for updating import of boolean props ([b598078](https://github.com/dnbexperience/eufemia/commit/b59807882164ca6136a57237c53d231d8ac11684))
+
 ## [10.0.0-beta.6](https://github.com/dnbexperience/eufemia/compare/v10.0.0-beta.5...v10.0.0-beta.6) (2023-05-10)
 
 

package/cjs/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/cjs/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/cjs/components/anchor/Anchor.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.AnchorInstance = AnchorInstance;
 exports.default = void 0;
+exports.scrollToHashHandler = scrollToHashHandler;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -16,9 +17,13 @@ var _Context = _interopRequireDefault(require("../../shared/Context"));
 
 var _componentHelper = require("../../shared/component-helper");
 
+var _helpers = require("../../shared/helpers");
+
+var _IconPrimary = _interopRequireDefault(require("../icon-primary/IconPrimary"));
+
 var _Tooltip = _interopRequireDefault(require("../tooltip/Tooltip"));
 
-const _excluded = ["id", "element", "className", "children", "tooltip", "omitClass", "innerRef", "targetBlankTitle"];
+const _excluded = ["id", "element", "className", "children", "tooltip", "icon", "iconPosition", "omitClass", "innerRef", "targetBlankTitle"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -52,6 +57,8 @@ function AnchorInstance(localProps) {
     className,
     children,
     tooltip,
+    icon,
+    iconPosition = 'left',
     omitClass,
     innerRef,
     targetBlankTitle
@@ -62,13 +69,28 @@ function AnchorInstance(localProps) {
   const internalId = id || 'id' + (0, _componentHelper.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.default.createElement(_IconPrimary.default, {
+      icon: icon
+    }) : icon;
+
+    if (iconPosition === 'left') {
+      prefix = _react.default.createElement(_react.default.Fragment, null, iconNode, " ");
+    } else if (iconPosition === 'right') {
+      suffix = _react.default.createElement(_react.default.Fragment, null, " ", iconNode);
+    }
+  }
+
   return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_Element.default, _extends({
     as: as,
     id: id,
-    className: (0, _classnames.default)(className, omitClass !== true && 'dnb-anchor', allProps.target === '_blank' && typeof children !== 'string' && 'dnb-anchor--no-icon')
+    className: (0, _classnames.default)(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.default.createElement(_Tooltip.default, {
+  }), prefix, children, suffix), showTooltip && _react.default.createElement(_Tooltip.default, {
     showDelay: 100,
     id: internalId + '-tooltip',
     targetElement: innerRef,
@@ -83,4 +105,31 @@ const Anchor = _react.default.forwardRef((props, ref) => {
 });
 
 var _default = Anchor;
-exports.default = _default;
+exports.default = _default;
+
+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 = (0, _helpers.getOffsetTop)(anchorElem) - scrollPadding || 0;
+      window.scroll({
+        top
+      });
+    }
+  }
+}

package/cjs/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;

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

@@ -20,16 +20,17 @@ button.dnb-anchor {
 }
 
 .dnb-anchor {
+  --anchor-underline-thickness: 0.0938rem;
   display: inline;
-  padding: 0.05575em 0.125em;
+  padding: 0.05575em 0;
   font-size: var(--font-size-basis);
   text-decoration: underline;
   -webkit-text-decoration-color: currentcolor;
           text-decoration-color: currentcolor;
-  text-decoration-thickness: 0.0938rem;
+  text-decoration-thickness: var(--anchor-underline-thickness);
   text-underline-offset: 0.25em;
   border-radius: 0;
-  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;
 }
 sup .dnb-anchor, sub .dnb-anchor {
   padding: 0 0.025em;
@@ -115,6 +116,10 @@ html[data-whatinput=keyboard] .dnb-anchor:focus {
 
 .dnb-anchor--focus {
   outline: none;
+  --border-color: var(--focus-ring-color);
+  --border-width: var(--focus-ring-width);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
   border-radius: 0.25em;
 }
 .dnb-anchor--focus:not(:active) {
@@ -124,12 +129,6 @@ html[data-whatinput=keyboard] .dnb-anchor:focus {
 .dnb-anchor--focus:not(:active), .dnb-section .dnb-anchor--focus:not(:active).dnb-anchor {
   text-decoration: none;
 }
-html[data-whatinput=mouse] .dnb-anchor--focus {
-  --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-anchor--no-style {
   color: inherit;

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

@@ -1 +1 @@
-button.dnb-anchor{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;cursor:pointer;line-height:calc(var(--line-height-basis) + .125rem)}.dnb-anchor{border-radius:0;display:inline;font-size:var(--font-size-basis);padding:.05575em .125em;text-decoration:underline;-webkit-text-decoration-color:currentcolor;text-decoration-color:currentcolor;text-decoration-thickness:.0938rem;text-underline-offset:.25em;transition:background-color .2s ease-in-out,border-radius .2s ease-in-out}sub .dnb-anchor,sup .dnb-anchor{padding:0 .025em}.dnb-h--basis .dnb-anchor,.dnb-h--large .dnb-anchor,.dnb-h--medium .dnb-anchor,.dnb-h--small .dnb-anchor,.dnb-h--x-large .dnb-anchor,.dnb-h--x-small .dnb-anchor,.dnb-h--xx-large .dnb-anchor,.dnb-lead .dnb-anchor,.dnb-p .dnb-anchor{font-size:inherit}.dnb-anchor:focus{border-radius:.25em;outline:none}.dnb-anchor:focus:not(:active){background-color:transparent;transition:none}.dnb-anchor:focus:not(:active),.dnb-section .dnb-anchor:focus:not(:active).dnb-anchor{text-decoration:none}html[data-whatinput=keyboard] .dnb-anchor: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-anchor:active,.dnb-anchor:hover{border-radius:.25em}.dnb-anchor:active,.dnb-anchor:hover,.dnb-section .dnb-anchor:active.dnb-anchor,.dnb-section .dnb-anchor:hover.dnb-anchor{text-decoration:none}.dnb-anchor:active{border-radius:.25em}.dnb-anchor:active,.dnb-section .dnb-anchor:active.dnb-anchor{text-decoration:none}.dnb-anchor[target=_blank]:not(:empty):not(.dnb-anchor--no-icon){background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTExIDBhLjc1Ljc1IDAgMCAwIDAgMS41VjB6bTQgLjc1aC43NUEuNzUuNzUgMCAwIDAgMTUgMHYuNzV6bS0uNzUgNGEuNzUuNzUgMCAwIDAgMS41IDBoLTEuNXptMS41IDRhLjc1Ljc1IDAgMCAwLTEuNSAwaDEuNXptLS43NSA2LjVWMTZjLjQxIDAgLjc1LS4zNC43NS0uNzVIMTV6bS0xNCAwSC4yNWMwIC40MS4zNC43NS43NS43NXYtLjc1ek0xIC43NVYwYS43NS43NSAwIDAgMC0uNzUuNzVIMXptNS43NS43NWEuNzUuNzUgMCAwIDAgMC0xLjV2MS41em0yLjcyIDMuNzJhLjc1Ljc1IDAgMCAwIDEuMDYgMS4wNkw5LjQ3IDUuMjJ6TTE0LjI1Ljc1djRoMS41di00aC0xLjV6bTAgOHY2LjVoMS41di02LjVoLTEuNXpNMTUgMTQuNUgxVjE2aDE0di0xLjV6bS0xMy4yNS43NVYuNzVILjI1djE0LjVoMS41ek0xIDEuNWg1Ljc1VjBIMXYxLjV6bTEwIDBoNFYwaC00djEuNXptLS40NyA0Ljc4IDUtNUwxNC40Ny4yMmwtNSA1IDEuMDYgMS4wNnoiIGZpbGw9IiMwMDcyNzIiLz48L3N2Zz4=");background-size:0;position:relative}.dnb-anchor[target=_blank]:not(:empty):not(.dnb-anchor--no-icon):after{background-image:inherit;background-size:cover;color:inherit;content:"";display:inline-block;height:.889em;margin-left:.3em;margin-right:.125em;position:relative;transform-origin:bottom;transition:transform .3s ease-out,filter 1s ease-in-out;width:.889em}.dnb-anchor[target=_blank]:not(:empty):not(.dnb-anchor--no-icon):active{background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTExIDBhLjc1Ljc1IDAgMCAwIDAgMS41VjB6bTQgLjc1aC43NUEuNzUuNzUgMCAwIDAgMTUgMHYuNzV6bS0uNzUgNGEuNzUuNzUgMCAwIDAgMS41IDBoLTEuNXptMS41IDRhLjc1Ljc1IDAgMCAwLTEuNSAwaDEuNXptLS43NSA2LjVWMTZjLjQxIDAgLjc1LS4zNC43NS0uNzVIMTV6bS0xNCAwSC4yNWMwIC40MS4zNC43NS43NS43NXYtLjc1ek0xIC43NVYwYS43NS43NSAwIDAgMC0uNzUuNzVIMXptNS43NS43NWEuNzUuNzUgMCAwIDAgMC0xLjV2MS41em0yLjcyIDMuNzJhLjc1Ljc1IDAgMCAwIDEuMDYgMS4wNkw5LjQ3IDUuMjJ6TTE0LjI1Ljc1djRoMS41di00aC0xLjV6bTAgOHY2LjVoMS41di02LjVoLTEuNXpNMTUgMTQuNUgxVjE2aDE0di0xLjV6bS0xMy4yNS43NVYuNzVILjI1djE0LjVoMS41ek0xIDEuNWg1Ljc1VjBIMXYxLjV6bTEwIDBoNFYwaC00djEuNXptLS40NyA0Ljc4IDUtNUwxNC40Ny4yMmwtNSA1IDEuMDYgMS4wNnoiIGZpbGw9IiNhNWUxZDIiLz48L3N2Zz4=")}.dnb-anchor[target=_blank]:not(:empty):not(.dnb-anchor--no-icon):after{top:.125em}[data-visual-test-wrapper] .dnb-anchor{transition:none}.dnb-anchor .dnb-icon{display:inline-block;transform:translateY(-.0625em)}.dnb-anchor--hover{border-radius:.25em}.dnb-anchor--hover,.dnb-section .dnb-anchor--hover.dnb-anchor{text-decoration:none}.dnb-anchor--active{border-radius:.25em}.dnb-anchor--active,.dnb-section .dnb-anchor--active.dnb-anchor{text-decoration:none}.dnb-anchor--focus{border-radius:.25em;outline:none}.dnb-anchor--focus:not(:active){background-color:transparent;transition:none}.dnb-anchor--focus:not(:active),.dnb-section .dnb-anchor--focus:not(:active).dnb-anchor{text-decoration:none}html[data-whatinput=mouse] .dnb-anchor--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-anchor--no-style{color:inherit;transition:none}.dnb-anchor--no-style,.dnb-section .dnb-anchor--no-style.dnb-anchor{text-decoration:none}.dnb-anchor--no-style:hover{background-color:transparent;color:inherit}.dnb-anchor--no-underline,.dnb-section .dnb-anchor--no-underline.dnb-anchor{text-decoration:none}.dnb-anchor--no-hover:hover{background-color:transparent;color:inherit}.dnb-anchor--no-radius,.dnb-anchor--no-radius:active,.dnb-anchor--no-radius:focus,.dnb-anchor--no-radius:hover{border-radius:0}.dnb-anchor--no-animation,a.dnb-button{transition:none}.dnb-anchor.dnb-skeleton,.dnb-skeleton>.dnb-anchor{text-decoration:none}.dnb-anchor.dnb-skeleton:after,.dnb-skeleton>.dnb-anchor:after{filter:grayscale(100%) opacity(.3)}
+button.dnb-anchor{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;cursor:pointer;line-height:calc(var(--line-height-basis) + .125rem)}.dnb-anchor{--anchor-underline-thickness:0.0938rem;border-radius:0;display:inline;font-size:var(--font-size-basis);padding:.05575em 0;text-decoration:underline;-webkit-text-decoration-color:currentcolor;text-decoration-color:currentcolor;text-decoration-thickness:var(--anchor-underline-thickness);text-underline-offset:.25em;transition:box-shadow .2s ease-in-out,border-radius .2s ease-in-out}sub .dnb-anchor,sup .dnb-anchor{padding:0 .025em}.dnb-h--basis .dnb-anchor,.dnb-h--large .dnb-anchor,.dnb-h--medium .dnb-anchor,.dnb-h--small .dnb-anchor,.dnb-h--x-large .dnb-anchor,.dnb-h--x-small .dnb-anchor,.dnb-h--xx-large .dnb-anchor,.dnb-lead .dnb-anchor,.dnb-p .dnb-anchor{font-size:inherit}.dnb-anchor:focus{border-radius:.25em;outline:none}.dnb-anchor:focus:not(:active){background-color:transparent;transition:none}.dnb-anchor:focus:not(:active),.dnb-section .dnb-anchor:focus:not(:active).dnb-anchor{text-decoration:none}html[data-whatinput=keyboard] .dnb-anchor: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-anchor:active,.dnb-anchor:hover{border-radius:.25em}.dnb-anchor:active,.dnb-anchor:hover,.dnb-section .dnb-anchor:active.dnb-anchor,.dnb-section .dnb-anchor:hover.dnb-anchor{text-decoration:none}.dnb-anchor:active{border-radius:.25em}.dnb-anchor:active,.dnb-section .dnb-anchor:active.dnb-anchor{text-decoration:none}.dnb-anchor[target=_blank]:not(:empty):not(.dnb-anchor--no-icon){background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTExIDBhLjc1Ljc1IDAgMCAwIDAgMS41VjB6bTQgLjc1aC43NUEuNzUuNzUgMCAwIDAgMTUgMHYuNzV6bS0uNzUgNGEuNzUuNzUgMCAwIDAgMS41IDBoLTEuNXptMS41IDRhLjc1Ljc1IDAgMCAwLTEuNSAwaDEuNXptLS43NSA2LjVWMTZjLjQxIDAgLjc1LS4zNC43NS0uNzVIMTV6bS0xNCAwSC4yNWMwIC40MS4zNC43NS43NS43NXYtLjc1ek0xIC43NVYwYS43NS43NSAwIDAgMC0uNzUuNzVIMXptNS43NS43NWEuNzUuNzUgMCAwIDAgMC0xLjV2MS41em0yLjcyIDMuNzJhLjc1Ljc1IDAgMCAwIDEuMDYgMS4wNkw5LjQ3IDUuMjJ6TTE0LjI1Ljc1djRoMS41di00aC0xLjV6bTAgOHY2LjVoMS41di02LjVoLTEuNXpNMTUgMTQuNUgxVjE2aDE0di0xLjV6bS0xMy4yNS43NVYuNzVILjI1djE0LjVoMS41ek0xIDEuNWg1Ljc1VjBIMXYxLjV6bTEwIDBoNFYwaC00djEuNXptLS40NyA0Ljc4IDUtNUwxNC40Ny4yMmwtNSA1IDEuMDYgMS4wNnoiIGZpbGw9IiMwMDcyNzIiLz48L3N2Zz4=");background-size:0;position:relative}.dnb-anchor[target=_blank]:not(:empty):not(.dnb-anchor--no-icon):after{background-image:inherit;background-size:cover;color:inherit;content:"";display:inline-block;height:.889em;margin-left:.3em;margin-right:.125em;position:relative;transform-origin:bottom;transition:transform .3s ease-out,filter 1s ease-in-out;width:.889em}.dnb-anchor[target=_blank]:not(:empty):not(.dnb-anchor--no-icon):active{background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTExIDBhLjc1Ljc1IDAgMCAwIDAgMS41VjB6bTQgLjc1aC43NUEuNzUuNzUgMCAwIDAgMTUgMHYuNzV6bS0uNzUgNGEuNzUuNzUgMCAwIDAgMS41IDBoLTEuNXptMS41IDRhLjc1Ljc1IDAgMCAwLTEuNSAwaDEuNXptLS43NSA2LjVWMTZjLjQxIDAgLjc1LS4zNC43NS0uNzVIMTV6bS0xNCAwSC4yNWMwIC40MS4zNC43NS43NS43NXYtLjc1ek0xIC43NVYwYS43NS43NSAwIDAgMC0uNzUuNzVIMXptNS43NS43NWEuNzUuNzUgMCAwIDAgMC0xLjV2MS41em0yLjcyIDMuNzJhLjc1Ljc1IDAgMCAwIDEuMDYgMS4wNkw5LjQ3IDUuMjJ6TTE0LjI1Ljc1djRoMS41di00aC0xLjV6bTAgOHY2LjVoMS41di02LjVoLTEuNXpNMTUgMTQuNUgxVjE2aDE0di0xLjV6bS0xMy4yNS43NVYuNzVILjI1djE0LjVoMS41ek0xIDEuNWg1Ljc1VjBIMXYxLjV6bTEwIDBoNFYwaC00djEuNXptLS40NyA0Ljc4IDUtNUwxNC40Ny4yMmwtNSA1IDEuMDYgMS4wNnoiIGZpbGw9IiNhNWUxZDIiLz48L3N2Zz4=")}.dnb-anchor[target=_blank]:not(:empty):not(.dnb-anchor--no-icon):after{top:.125em}[data-visual-test-wrapper] .dnb-anchor{transition:none}.dnb-anchor .dnb-icon{display:inline-block;transform:translateY(-.0625em)}.dnb-anchor--hover{border-radius:.25em}.dnb-anchor--hover,.dnb-section .dnb-anchor--hover.dnb-anchor{text-decoration:none}.dnb-anchor--active{border-radius:.25em}.dnb-anchor--active,.dnb-section .dnb-anchor--active.dnb-anchor{text-decoration:none}.dnb-anchor--focus{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;border-radius:.25em;box-shadow:0 0 0 var(--border-width) var(--border-color);outline:none}.dnb-anchor--focus:not(:active){background-color:transparent;transition:none}.dnb-anchor--focus:not(:active),.dnb-section .dnb-anchor--focus:not(:active).dnb-anchor{text-decoration:none}.dnb-anchor--no-style{color:inherit;transition:none}.dnb-anchor--no-style,.dnb-section .dnb-anchor--no-style.dnb-anchor{text-decoration:none}.dnb-anchor--no-style:hover{background-color:transparent;color:inherit}.dnb-anchor--no-underline,.dnb-section .dnb-anchor--no-underline.dnb-anchor{text-decoration:none}.dnb-anchor--no-hover:hover{background-color:transparent;color:inherit}.dnb-anchor--no-radius,.dnb-anchor--no-radius:active,.dnb-anchor--no-radius:focus,.dnb-anchor--no-radius:hover{border-radius:0}.dnb-anchor--no-animation,a.dnb-button{transition:none}.dnb-anchor.dnb-skeleton,.dnb-skeleton>.dnb-anchor{text-decoration:none}.dnb-anchor.dnb-skeleton:after,.dnb-skeleton>.dnb-anchor:after{filter:grayscale(100%) opacity(.3)}

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

@@ -17,6 +17,7 @@ button.dnb-anchor {
 }
 
 .dnb-anchor {
+  --anchor-underline-thickness: 0.0938rem;
   @include anchorStyle();
 }
 
@@ -29,7 +30,7 @@ button.dnb-anchor {
 }
 
 .dnb-anchor--focus {
-  @include anchorFocusStyle('mouse');
+  @include anchorFocusStyle('always');
 }
 
 // no use case for that yet

package/cjs/components/anchor/style/themes/dnb-anchor-theme-sbanken.css

@@ -1,3 +1,7 @@
+@charset "UTF-8";
+/*
+ * Utilities
+ */
 /*
  * Anchor mixins
  *
@@ -6,14 +10,17 @@
  * Utilities
  */
 .dnb-anchor {
+  --anchor-underline-thickness: 0.125rem;
   font-weight: var(--sb-font-weight-bold);
   color: var(--sb-color-gray-dark-3);
   -webkit-text-decoration-color: var(--sb-color-green-dark);
           text-decoration-color: var(--sb-color-green-dark);
+  padding: calc((var(--line-height-basis) - 1.2em) / 2) 0.25em;
 }
 .dnb-anchor:hover {
   color: var(--sb-color-text);
   background-color: var(--sb-color-green-dark);
+  transition: none;
   border-radius: 0.5rem;
 }
 .dnb-anchor:active {
@@ -21,15 +28,58 @@
   background-color: var(--sb-color-green);
   border-radius: 0.5rem;
 }
-.dnb-anchor:focus:not(:active) {
+html[data-whatinput=keyboard] .dnb-anchor:focus:not(:active) {
   color: var(--sb-color-blue-dark);
   background-color: var(--sb-color-blue-light-3);
   border-radius: 0.25rem;
 }
+html[data-whatinput=keyboard] .dnb-anchor:focus:not(:active).dnb-anchor--icon-left {
+  margin-left: 0;
+}
+html[data-whatinput=keyboard] .dnb-anchor:focus:not(:active).dnb-anchor--icon-left .dnb-icon {
+  margin-left: 0;
+}
+html[data-whatinput=keyboard] .dnb-anchor:focus:not(:active).dnb-anchor--icon-right {
+  margin-right: 0;
+}
+html[data-whatinput=keyboard] .dnb-anchor:focus:not(:active).dnb-anchor--icon-right .dnb-icon {
+  margin-right: 0;
+}
+.dnb-anchor.dnb-anchor--icon-left {
+  padding-left: 0;
+  margin-left: 1.125em;
+}
+.dnb-anchor.dnb-anchor--icon-left .dnb-icon {
+  font-size: 1em;
+  margin-right: 0.125em;
+  margin-left: -1.125em;
+}
+.dnb-anchor.dnb-anchor--icon-right {
+  padding-right: 0;
+  margin-right: 1.125em;
+}
+.dnb-anchor.dnb-anchor--icon-right .dnb-icon {
+  font-size: 1em;
+  margin-left: 0.125em;
+  margin-right: -1.125em;
+}
+.dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--has-icon):not(.anchor-hash):not(.dnb-anchor--icon-left) {
+  padding-left: 0;
+}
+.dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--has-icon):not(.anchor-hash):not(.dnb-anchor--icon-left)::before {
+  content: " ";
+}
+.dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--has-icon):not(.anchor-hash):not(.dnb-anchor--icon-right):not(.dnb-anchor[target=_blank]) {
+  padding-right: 0;
+}
+.dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--has-icon):not(.anchor-hash):not(.dnb-anchor--icon-right):not(.dnb-anchor[target=_blank])::after {
+  content: " ";
+}
 
 .dnb-anchor--hover {
   color: var(--sb-color-text);
   background-color: var(--sb-color-green-dark);
+  transition: none;
   border-radius: 0.5rem;
 }
 
@@ -44,6 +94,18 @@
   background-color: var(--sb-color-blue-light-3);
   border-radius: 0.25rem;
 }
+.dnb-anchor--focus:not(:active).dnb-anchor--icon-left {
+  margin-left: 0;
+}
+.dnb-anchor--focus:not(:active).dnb-anchor--icon-left .dnb-icon {
+  margin-left: 0;
+}
+.dnb-anchor--focus:not(:active).dnb-anchor--icon-right {
+  margin-right: 0;
+}
+.dnb-anchor--focus:not(:active).dnb-anchor--icon-right .dnb-icon {
+  margin-right: 0;
+}
 
 .dnb-anchor--contrast {
   color: var(--color-white);

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

@@ -1 +1 @@
-.dnb-anchor{color:var(--sb-color-gray-dark-3);font-weight:var(--sb-font-weight-bold);-webkit-text-decoration-color:var(--sb-color-green-dark);text-decoration-color:var(--sb-color-green-dark)}.dnb-anchor:hover{background-color:var(--sb-color-green-dark)}.dnb-anchor:active,.dnb-anchor:hover{border-radius:.5rem;color:var(--sb-color-text)}.dnb-anchor:active{background-color:var(--sb-color-green)}.dnb-anchor:focus:not(:active){background-color:var(--sb-color-blue-light-3);border-radius:.25rem;color:var(--sb-color-blue-dark)}.dnb-anchor--hover{background-color:var(--sb-color-green-dark)}.dnb-anchor--active,.dnb-anchor--hover{border-radius:.5rem;color:var(--sb-color-text)}.dnb-anchor--active{background-color:var(--sb-color-green)}.dnb-anchor--focus:not(:active){background-color:var(--sb-color-blue-light-3);border-radius:.25rem;color:var(--sb-color-blue-dark)}.dnb-anchor--contrast{color:var(--color-white)}.dnb-anchor--contrast:active,.dnb-anchor--contrast:hover{text-decoration:none}.dnb-anchor--contrast:active,.dnb-anchor--contrast:hover{background-color:var(--color-white);color:var(--color-emerald-green)}.dnb-anchor--contrast:not(:disabled):focus{background-color:transparent;color:var(--color-white);outline:none}html[data-whatinput=keyboard] .dnb-anchor--contrast:not(:disabled):focus{--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)}
+@charset "UTF-8";.dnb-anchor{--anchor-underline-thickness:0.125rem;color:var(--sb-color-gray-dark-3);font-weight:var(--sb-font-weight-bold);padding:calc(var(--line-height-basis)/2 - .6em) .25em;-webkit-text-decoration-color:var(--sb-color-green-dark);text-decoration-color:var(--sb-color-green-dark)}.dnb-anchor:hover{background-color:var(--sb-color-green-dark);transition:none}.dnb-anchor:active,.dnb-anchor:hover{border-radius:.5rem;color:var(--sb-color-text)}.dnb-anchor:active{background-color:var(--sb-color-green)}html[data-whatinput=keyboard] .dnb-anchor:focus:not(:active){background-color:var(--sb-color-blue-light-3);border-radius:.25rem;color:var(--sb-color-blue-dark)}html[data-whatinput=keyboard] .dnb-anchor:focus:not(:active).dnb-anchor--icon-left,html[data-whatinput=keyboard] .dnb-anchor:focus:not(:active).dnb-anchor--icon-left .dnb-icon{margin-left:0}html[data-whatinput=keyboard] .dnb-anchor:focus:not(:active).dnb-anchor--icon-right,html[data-whatinput=keyboard] .dnb-anchor:focus:not(:active).dnb-anchor--icon-right .dnb-icon{margin-right:0}.dnb-anchor.dnb-anchor--icon-left{margin-left:1.125em;padding-left:0}.dnb-anchor.dnb-anchor--icon-left .dnb-icon{font-size:1em;margin-left:-1.125em;margin-right:.125em}.dnb-anchor.dnb-anchor--icon-right{margin-right:1.125em;padding-right:0}.dnb-anchor.dnb-anchor--icon-right .dnb-icon{font-size:1em;margin-left:.125em;margin-right:-1.125em}.dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--has-icon):not(.anchor-hash):not(.dnb-anchor--icon-left){padding-left:0}.dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--has-icon):not(.anchor-hash):not(.dnb-anchor--icon-left):before{content:" "}.dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--has-icon):not(.anchor-hash):not(.dnb-anchor--icon-right):not(.dnb-anchor[target=_blank]){padding-right:0}.dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--has-icon):not(.anchor-hash):not(.dnb-anchor--icon-right):not(.dnb-anchor[target=_blank]):after{content:" "}.dnb-anchor--hover{background-color:var(--sb-color-green-dark);transition:none}.dnb-anchor--active,.dnb-anchor--hover{border-radius:.5rem;color:var(--sb-color-text)}.dnb-anchor--active{background-color:var(--sb-color-green)}.dnb-anchor--focus:not(:active){background-color:var(--sb-color-blue-light-3);border-radius:.25rem;color:var(--sb-color-blue-dark)}.dnb-anchor--focus:not(:active).dnb-anchor--icon-left,.dnb-anchor--focus:not(:active).dnb-anchor--icon-left .dnb-icon{margin-left:0}.dnb-anchor--focus:not(:active).dnb-anchor--icon-right,.dnb-anchor--focus:not(:active).dnb-anchor--icon-right .dnb-icon{margin-right:0}.dnb-anchor--contrast{color:var(--color-white)}.dnb-anchor--contrast:active,.dnb-anchor--contrast:hover{text-decoration:none}.dnb-anchor--contrast:active,.dnb-anchor--contrast:hover{background-color:var(--color-white);color:var(--color-emerald-green)}.dnb-anchor--contrast:not(:disabled):focus{background-color:transparent;color:var(--color-white);outline:none}html[data-whatinput=keyboard] .dnb-anchor--contrast:not(:disabled):focus{--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)}

package/cjs/components/anchor/style/themes/dnb-anchor-theme-sbanken.scss

@@ -1,56 +1,118 @@
+@use '../../../../style/core/utilities.scss';
 @use '../anchor-mixins.scss';
 
+@mixin anchorHover() {
+  color: var(--sb-color-text);
+  background-color: var(--sb-color-green-dark);
+
+  transition: none;
+  border-radius: 0.5rem;
+}
+
+@mixin anchorActive() {
+  color: var(--sb-color-text);
+  background-color: var(--sb-color-green);
+
+  border-radius: 0.5rem;
+}
+
+@mixin anchorFocus() {
+  &:not(:active) {
+    color: var(--sb-color-blue-dark);
+    background-color: var(--sb-color-blue-light-3);
+
+    border-radius: 0.25rem;
+
+    &.dnb-anchor--icon-left {
+      margin-left: 0;
+      .dnb-icon {
+        margin-left: 0;
+      }
+    }
+
+    &.dnb-anchor--icon-right {
+      margin-right: 0;
+      .dnb-icon {
+        margin-right: 0;
+      }
+    }
+  }
+}
+
 .dnb-anchor {
+  --anchor-underline-thickness: 0.125rem;
+
   // Has to use --sb-font-weight-bold to get correct weighting as --sb-font-weight-medium does nothing at the moment
   font-weight: var(--sb-font-weight-bold);
   color: var(--sb-color-gray-dark-3);
   text-decoration-color: var(--sb-color-green-dark);
+  padding: calc((var(--line-height-basis) - 1.2em) / 2) 0.25em;
 
-  &:hover {
-    color: var(--sb-color-text);
-    background-color: var(--sb-color-green-dark);
+  $anchor-icon-gutter: 0.125em;
 
-    border-radius: 0.5rem;
+  &:hover {
+    @include anchorHover();
   }
 
   &:active {
-    color: var(--sb-color-text);
-    background-color: var(--sb-color-green);
-
-    border-radius: 0.5rem;
+    @include anchorActive();
   }
 
   &:focus {
-    &:not(:active) {
-      color: var(--sb-color-blue-dark);
-      background-color: var(--sb-color-blue-light-3);
+    @include utilities.whatInput('keyboard') {
+      @include anchorFocus();
+    }
+  }
+
+  &.dnb-anchor--icon-left {
+    padding-left: 0;
+    margin-left: 1em + $anchor-icon-gutter;
+
+    .dnb-icon {
+      font-size: 1em;
+      margin-right: $anchor-icon-gutter;
+      margin-left: -1em - $anchor-icon-gutter;
+    }
+  }
 
-      border-radius: 0.25rem;
+  &.dnb-anchor--icon-right {
+    padding-right: 0;
+    margin-right: 1em + $anchor-icon-gutter;
+
+    .dnb-icon {
+      font-size: 1em;
+      margin-left: $anchor-icon-gutter;
+      margin-right: -1em - $anchor-icon-gutter;
+    }
+  }
+
+  &:not(.dnb-anchor--no-underline):not(.dnb-anchor--has-icon):not(.anchor-hash) {
+    &:not(.dnb-anchor--icon-left) {
+      padding-left: 0;
+      &::before {
+        content: '\00a0';
+      }
+    }
+
+    &:not(.dnb-anchor--icon-right):not(.dnb-anchor[target='_blank']) {
+      padding-right: 0;
+      &::after {
+        content: '\00a0';
+      }
     }
   }
 }
 
 .dnb-anchor--hover {
-  color: var(--sb-color-text);
-  background-color: var(--sb-color-green-dark);
-
-  border-radius: 0.5rem;
+  @include anchorHover();
 }
 
 .dnb-anchor--active {
-  color: var(--sb-color-text);
-  background-color: var(--sb-color-green);
-
-  border-radius: 0.5rem;
+  @include anchorActive();
 }
 
 .dnb-anchor--focus {
-  &:not(:active) {
-    color: var(--sb-color-blue-dark);
-    background-color: var(--sb-color-blue-light-3);
-
-    border-radius: 0.25rem;
-  }
+  @include anchorFocus();
 }
 
 // TODO: add correct contrast styling when designs are in place