@dnb/eufemia 10.0.0 → 10.2.0

package/CHANGELOG.md

@@ -3,6 +3,55 @@
 All notable changes to @dnb/eufemia will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [10.2.0](https://github.com/dnbexperience/eufemia/compare/v10.1.0...v10.2.0) (2023-06-23)
+
+
+### :sparkles: Features
+
+* **Heading:** rewrite to TypeScript with React Hooks ([#2492](https://github.com/dnbexperience/eufemia/issues/2492)) ([3780036](https://github.com/dnbexperience/eufemia/commit/37800368179456168f397f151521cfea6584b3c2))
+
+
+### :memo: Documentation
+
+* **Accordion:** correct description ([#2484](https://github.com/dnbexperience/eufemia/issues/2484)) ([aa491ca](https://github.com/dnbexperience/eufemia/commit/aa491cad1581c5ae434218314bffdbd090c565e3))
+* add example on how to import styles from within CSS ([#2495](https://github.com/dnbexperience/eufemia/issues/2495)) ([c2a98b1](https://github.com/dnbexperience/eufemia/commit/c2a98b1cb138e10217af3b551548e0b4eedc838a))
+* **DatePicker:** removes disabled from example description ([#2491](https://github.com/dnbexperience/eufemia/issues/2491)) ([fc0b2e1](https://github.com/dnbexperience/eufemia/commit/fc0b2e1c5abb97a4ef3f843853b1b32b00b584ca))
+* **GlobalStatus:** false is not an accepted value for title prop ([#2479](https://github.com/dnbexperience/eufemia/issues/2479)) ([a71cbde](https://github.com/dnbexperience/eufemia/commit/a71cbdee4a7dc14943730c6e5df31ef81f3cc8c3))
+
+
+### :bug: Bug Fixes
+
+* **Button:** disabled DatePicker button ([#2490](https://github.com/dnbexperience/eufemia/issues/2490)) ([cd02bbf](https://github.com/dnbexperience/eufemia/commit/cd02bbf987b2342f3887fdee786ceda971d34023))
+* **InfoCard:** set max-width on text content ([#2493](https://github.com/dnbexperience/eufemia/issues/2493)) ([df0c870](https://github.com/dnbexperience/eufemia/commit/df0c870f542e9dfeefb4cc2ad94184da64933921))
+
+## [10.1.0](https://github.com/dnbexperience/eufemia/compare/v10.0.0...v10.1.0) (2023-06-16)
+
+
+### :barber: Style Changes
+
+* **Button:** remove tertiary button padding sbanken ([#2422](https://github.com/dnbexperience/eufemia/issues/2422)) ([cc9a18b](https://github.com/dnbexperience/eufemia/commit/cc9a18b4d2664c81aacb3d9ae017d8ecb8bff14f))
+
+
+### :sparkles: Features
+
+* added icons accounting, candle_stick, fortune_ball and scan ([#2424](https://github.com/dnbexperience/eufemia/issues/2424)) ([47ef4b0](https://github.com/dnbexperience/eufemia/commit/47ef4b03efaab3f974f8516d8f7a171776672b78))
+* **Portal:** copy color values to the clipboard ([#2427](https://github.com/dnbexperience/eufemia/issues/2427)) ([c570e51](https://github.com/dnbexperience/eufemia/commit/c570e519d5fd8b2c59d1de0909d1f93b0d63530e))
+* **Portal:** copy icon name to clipboard ([3c1944c](https://github.com/dnbexperience/eufemia/commit/3c1944ce9a5ccccc1b1a0a72cf03d139db7ba45b))
+
+
+### :memo: Documentation
+
+* **v10:** improves docs of Modal migration ([#2446](https://github.com/dnbexperience/eufemia/issues/2446)) ([d78d940](https://github.com/dnbexperience/eufemia/commit/d78d940d759c90062c1782109f8c3de4915bee27))
+
+
+### :bug: Bug Fixes
+
+* **Autocomplete:** fix stretched form status when using suffix ([#2455](https://github.com/dnbexperience/eufemia/issues/2455)) ([5518728](https://github.com/dnbexperience/eufemia/commit/5518728c857f5b9ac92eb522b89700da91efa3be))
+* **Icons:** fix broken Android icons ([#2391](https://github.com/dnbexperience/eufemia/issues/2391)) ([ea12f23](https://github.com/dnbexperience/eufemia/commit/ea12f2348b2cbb5dba935f79aac4bf61eb1c1049))
+* **Icons:** remove left-over icon types (TypeScript) ([#2476](https://github.com/dnbexperience/eufemia/issues/2476)) ([80d3dac](https://github.com/dnbexperience/eufemia/commit/80d3dac502229fb8aca79aaa214432dac9b92065))
+* include themed style in `ui-theme-tags` CSS package ([#2383](https://github.com/dnbexperience/eufemia/issues/2383)) ([d24c10d](https://github.com/dnbexperience/eufemia/commit/d24c10d4032c6138db01f4e3fce5c552a31061ac))
+* **InputMasked:** make `inner_ref` work when provided as a function ([#2461](https://github.com/dnbexperience/eufemia/issues/2461)) ([5f59c50](https://github.com/dnbexperience/eufemia/commit/5f59c504eade4f43be226a2d7f1cbee2da9b45f6))
+
 ## [10.0.0](https://github.com/dnbexperience/eufemia/compare/v9.47.6...v10.0.0) (2023-06-01)
 
 

package/assets/icons/dnb/accounting.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.733 15h6.534M1 7.533l2.47-2.47a.467.467 0 0 1 .66 0L5.337 6.27a.467.467 0 0 0 .66 0l2.47-2.47M9.4 7.572v1.4m3.733-1.4v1.4m-1.866-2.8v2.8M9.867 15H6.133l.467-2.8h2.8l.467 2.8ZM3.8 12.2h8.4c1.546 0 2.8-1.306 2.8-2.917V3.917C15 2.306 13.746 1 12.2 1H3.8C2.254 1 1 2.306 1 3.917v5.366C1 10.894 2.254 12.2 3.8 12.2Z"/></svg>

package/assets/icons/dnb/accounting_medium.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6.867 23h10.266M1 11.267l3.882-3.881a.733.733 0 0 1 1.037 0l1.896 1.896a.733.733 0 0 0 1.038 0l3.88-3.882M1 15.667h22M14.2 9.8V12m5.867-2.2V12m-2.934-4.4V12m-2.2 11H9.067l.733-4.4h4.4l.733 4.4Zm-11-4.4h16.134c1.62 0 2.933-1.368 2.933-3.056V4.056C23 2.368 21.687 1 20.067 1H3.933C2.313 1 1 2.368 1 4.056v11.488C1 17.232 2.313 18.6 3.933 18.6Z"/></svg>

package/assets/icons/dnb/candle_stick.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path stroke="#000" stroke-linecap="round" stroke-width="1.5" d="M4 6.5h1.5A.5.5 0 0 1 6 7v4a.5.5 0 0 1-.5.5H4m0-5H2.5A.5.5 0 0 0 2 7v4a.5.5 0 0 0 .5.5H4m0-5V4m0 7.5V14m8-9.5h1.5a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-.5.5H12m0-7h-1.5a.5.5 0 0 0-.5.5v6a.5.5 0 0 0 .5.5H12m0-7V2m0 9.5V14"/></svg>

package/assets/icons/dnb/candle_stick_medium.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="#000" stroke-linecap="round" stroke-width="1.5" d="M4 11.5h1.5a.5.5 0 0 1 .5.5v4.5a.5.5 0 0 1-.5.5H4m0-5.5H2.5a.5.5 0 0 0-.5.5v4.5a.5.5 0 0 0 .5.5H4m0-5.5V9m0 8v2.5m8-15h1.5a.5.5 0 0 1 .5.5v10.5a.5.5 0 0 1-.5.5H12m0-11.5h-1.5a.5.5 0 0 0-.5.5v10.5a.5.5 0 0 0 .5.5H12m0-11.5V2m0 14v2.5m8-7.5h1.5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5H20m0-8h-1.5a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 .5.5H20m0-8V8.5M20 19v2.5"/></svg>

package/assets/icons/dnb/fortune_ball.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3.906 12.084A5.149 5.149 0 0 1 2.52 9.473a5.243 5.243 0 0 1 .264-2.963 5.077 5.077 0 0 1 1.824-2.308 4.859 4.859 0 0 1 2.765-.869 4.86 4.86 0 0 1 2.765.866 5.076 5.076 0 0 1 1.826 2.306c.373.939.466 1.97.267 2.963a5.149 5.149 0 0 1-1.383 2.612M1.874 1v1.75M1 1.875h1.75M8.292 6v1.75m-.875-.875h1.75m4.125-5.292v1.75m-.875-.875h1.75m-3.225 9.625H3.807l-.687 1.125a.836.836 0 0 0-.036.798c.06.123.151.227.262.3a.67.67 0 0 0 .366.11h7.325a.67.67 0 0 0 .366-.11.755.755 0 0 0 .263-.3.835.835 0 0 0-.036-.798l-.688-1.124Z"/></svg>

package/assets/icons/dnb/fortune_ball_medium.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.34 18.5a8.09 8.09 0 0 1-2.178-4.103 8.24 8.24 0 0 1 .415-4.656 7.977 7.977 0 0 1 2.867-3.626A7.635 7.635 0 0 1 9.788 4.75c1.548 0 3.06.473 4.346 1.36a7.976 7.976 0 0 1 2.87 3.624 8.238 8.238 0 0 1 .419 4.656 8.09 8.09 0 0 1-2.174 4.105M20.791 7.5v2.75m-1.375-1.375h2.75M3.375 2v2.75M2 3.375h2.75m5.958 4.208v2.75M9.333 8.958h2.75M16.208 2v2.75m-1.375-1.375h2.75M15.396 18.5H4.185l-1.08 1.767a1.314 1.314 0 0 0-.056 1.253c.095.195.237.358.411.472.174.114.373.174.575.175h11.51c.204 0 .403-.06.577-.174.174-.114.316-.277.412-.472a1.314 1.314 0 0 0-.056-1.255L15.396 18.5Z"/></svg>

package/assets/icons/dnb/scan.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#000" d="M3.5 4v1.75a.75.75 0 0 1-1.5 0V4c0-.504.175-.981.464-1.344C2.751 2.298 3.2 2 3.75 2h2a.75.75 0 0 1 0 1.5H3.753c-.005.001-.051.01-.117.094A.665.665 0 0 0 3.5 4Zm6-1.25a.75.75 0 0 1 .75-.75H12c.504 0 .981.175 1.344.464.358.287.656.736.656 1.286v2a.75.75 0 0 1-1.5 0V3.753c-.001-.005-.01-.051-.094-.117A.665.665 0 0 0 12 3.5h-1.75a.75.75 0 0 1-.75-.75ZM4 12.5h1.75a.75.75 0 0 1 0 1.5H4a2.17 2.17 0 0 1-1.344-.464C2.298 13.249 2 12.8 2 12.25v-2a.75.75 0 0 1 1.5 0v1.997c.001.005.01.051.094.117A.664.664 0 0 0 4 12.5Zm8.5-.5v-1.75a.75.75 0 0 1 1.5 0V12c0 .504-.175.981-.464 1.344-.287.358-.736.656-1.286.656h-2a.75.75 0 0 1 0-1.5h1.997c.005-.001.051-.01.117-.094A.665.665 0 0 0 12.5 12ZM6 7.25a.75.75 0 0 0 0 1.5h4a.75.75 0 0 0 0-1.5H6Z"/></svg>

package/assets/icons/dnb/scan_medium.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><g fill="#000" clip-path="url(#scan_medium_svg__a)"><path d="M2.25 4v3.5a.75.75 0 0 1-1.5 0V4c0-.837.291-1.627.764-2.219C1.984 1.194 2.683.75 3.5.75h4a.75.75 0 0 1 0 1.5h-4c-.25 0-.55.14-.814.469A2.08 2.08 0 0 0 2.25 4Zm13.5-2.5a.75.75 0 0 1 .75-.75H20c.837 0 1.627.291 2.218.764.588.47 1.032 1.169 1.032 1.986v4a.75.75 0 0 1-1.5 0v-4c0-.25-.14-.55-.468-.814A2.079 2.079 0 0 0 20 2.25h-3.5a.75.75 0 0 1-.75-.75ZM4 21.75h3.5a.75.75 0 0 1 0 1.5H4a3.578 3.578 0 0 1-2.219-.764C1.194 22.016.75 21.317.75 20.5v-4a.75.75 0 0 1 1.5 0v4c0 .25.14.55.469.814.325.26.785.436 1.281.436ZM21.75 20v-3.5a.75.75 0 0 1 1.5 0V20c0 .837-.291 1.627-.764 2.218-.47.588-1.169 1.032-1.986 1.032h-4a.75.75 0 0 1 0-1.5h4c.25 0 .55-.14.814-.468.26-.326.436-.786.436-1.282ZM6 11.25a.75.75 0 0 0 0 1.5h12a.75.75 0 0 0 0-1.5H6Z"/></g><defs><clipPath id="scan_medium_svg__a"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></svg>

package/assets/icons/dnb/shield_lock.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6.154 6.539h3.692m-3.692 0a.923.923 0 0 0-.923.923v2.77c0 .51.413.922.923.922h3.692c.51 0 .923-.413.923-.923V7.462a.923.923 0 0 0-.923-.923m-3.692 0v-.923a1.846 1.846 0 0 1 3.692 0v.923M2 2.953V7.64a7.327 7.327 0 0 0 4.697 6.838l.64.247c.427.164.9.164 1.326 0l.64-.247A7.328 7.328 0 0 0 14 7.64V2.953a.915.915 0 0 0-.534-.838A13.354 13.354 0 0 0 8 1.001a13.354 13.354 0 0 0-5.466 1.114.915.915 0 0 0-.534.838Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2 3.851v4.442c0 2.874 1.77 5.45 4.452 6.482l.607.234a1.75 1.75 0 0 0 1.257 0l.607-.234a6.946 6.946 0 0 0 4.452-6.482V3.851a.867.867 0 0 0-.506-.794 12.658 12.658 0 0 0-5.181-1.056 12.658 12.658 0 0 0-5.182 1.056.867.867 0 0 0-.506.794Z" clip-rule="evenodd"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5.063 8.75a1.5 1.5 0 0 1 1.5-1.5h2.25a1.5 1.5 0 0 1 1.5 1.5v1.376a1.5 1.5 0 0 1-1.5 1.5h-2.25a1.5 1.5 0 0 1-1.5-1.5V8.75Z" clip-rule="evenodd"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7.688 4.626a1.75 1.75 0 0 0-1.75 1.75v.875h3.5v-.875a1.75 1.75 0 0 0-1.75-1.75Z" clip-rule="evenodd"/></svg>

package/assets/icons/dnb/shield_lock_medium.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.906 9.876h5.25m-5.25 0c-.725 0-1.312.587-1.312 1.312v3.938c0 .725.587 1.312 1.312 1.312h5.25c.725 0 1.313-.587 1.313-1.312v-3.938c0-.725-.588-1.312-1.313-1.312m-5.25 0V8.563a2.625 2.625 0 1 1 5.25 0v1.313M4 4.777v6.662a10.419 10.419 0 0 0 6.678 9.724l.91.35a2.625 2.625 0 0 0 1.886 0l.91-.35a10.418 10.418 0 0 0 6.678-9.724V4.777a1.301 1.301 0 0 0-.759-1.192 18.987 18.987 0 0 0-7.772-1.584A18.988 18.988 0 0 0 4.76 3.585 1.301 1.301 0 0 0 4 4.777Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 4.91v6.979c0 4.516 2.781 8.566 6.996 10.187l.954.366a2.75 2.75 0 0 0 1.975 0l.954-.366a10.915 10.915 0 0 0 6.996-10.187v-6.98a1.363 1.363 0 0 0-.796-1.248A19.892 19.892 0 0 0 11.937 2c-2.8-.026-5.574.54-8.141 1.66-.488.223-.8.712-.796 1.248Z" clip-rule="evenodd"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7.813 11.75a1.5 1.5 0 0 1 1.5-1.5h5.25a1.5 1.5 0 0 1 1.5 1.5v3.876a1.5 1.5 0 0 1-1.5 1.5h-5.25a1.5 1.5 0 0 1-1.5-1.5V11.75Z" clip-rule="evenodd"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11.938 6.126a2.75 2.75 0 0 0-2.75 2.75v1.375h5.5V8.876a2.75 2.75 0 0 0-2.75-2.75Z" clip-rule="evenodd"/></svg>

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

@@ -22,10 +22,10 @@ export declare type AnchorProps = {
     /** @deprecated use innerRef instead */
     inner_ref?: React.RefObject<HTMLAnchorElement>;
 };
-export declare type AnchorAllProps = AnchorProps & React.HTMLProps<HTMLAnchorElement> & SpacingProps;
+export declare type AnchorAllProps = AnchorProps & Omit<React.HTMLProps<HTMLAnchorElement>, 'ref'> & SpacingProps;
 export declare function AnchorInstance(localProps: AnchorAllProps): JSX.Element;
-declare const Anchor: React.ForwardRefExoticComponent<Pick<AnchorProps & React.HTMLProps<HTMLAnchorElement> & import("../space/types").SpacingElementProps & {
+declare const Anchor: React.ForwardRefExoticComponent<AnchorProps & Omit<React.HTMLProps<HTMLAnchorElement>, "ref"> & 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" | "icon" | "element" | "targetBlankTitle" | "iconPosition" | "omitClass" | "inner_ref"> & React.RefAttributes<HTMLAnchorElement>>;
+} & React.RefAttributes<HTMLAnchorElement>>;
 export default Anchor;
 export declare function scrollToHashHandler(e: React.MouseEvent<HTMLAnchorElement, MouseEvent>): void;

package/cjs/components/anchor/style/deps.scss

@@ -0,0 +1,9 @@
+/*
+* Used for snapshot testing
+*
+*/
+
+@import '../../../style/core/utilities.scss';
+@import '../../icon/style/deps.scss';
+@import '../../tooltip/style/deps.scss';
+@import './dnb-anchor.scss';

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

@@ -28,21 +28,24 @@
   background-color: var(--sb-color-green);
   border-radius: 0.5rem;
 }
-html[data-whatinput=keyboard] .dnb-anchor:focus:not(:active) {
+.dnb-anchor:focus {
   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 {
+.dnb-anchor:focus:not(:active) {
+  background-color: var(--sb-color-blue-light-3);
+}
+.dnb-anchor:focus.dnb-anchor--icon-left {
   margin-left: 0;
 }
-html[data-whatinput=keyboard] .dnb-anchor:focus:not(:active).dnb-anchor--icon-left .dnb-icon {
+.dnb-anchor:focus.dnb-anchor--icon-left .dnb-icon {
   margin-left: 0;
 }
-html[data-whatinput=keyboard] .dnb-anchor:focus:not(:active).dnb-anchor--icon-right {
+.dnb-anchor:focus.dnb-anchor--icon-right {
   margin-right: 0;
 }
-html[data-whatinput=keyboard] .dnb-anchor:focus:not(:active).dnb-anchor--icon-right .dnb-icon {
+.dnb-anchor:focus.dnb-anchor--icon-right .dnb-icon {
   margin-right: 0;
 }
 .dnb-anchor.dnb-anchor--icon-left {
@@ -89,24 +92,31 @@ html[data-whatinput=keyboard] .dnb-anchor:focus:not(:active).dnb-anchor--icon-ri
   border-radius: 0.5rem;
 }
 
-.dnb-anchor--focus:not(:active) {
+.dnb-anchor--focus {
   color: var(--sb-color-blue-dark);
   background-color: var(--sb-color-blue-light-3);
   border-radius: 0.25rem;
 }
-.dnb-anchor--focus:not(:active).dnb-anchor--icon-left {
+.dnb-anchor--focus:not(:active) {
+  background-color: var(--sb-color-blue-light-3);
+}
+.dnb-anchor--focus.dnb-anchor--icon-left {
   margin-left: 0;
 }
-.dnb-anchor--focus:not(:active).dnb-anchor--icon-left .dnb-icon {
+.dnb-anchor--focus.dnb-anchor--icon-left .dnb-icon {
   margin-left: 0;
 }
-.dnb-anchor--focus:not(:active).dnb-anchor--icon-right {
+.dnb-anchor--focus.dnb-anchor--icon-right {
   margin-right: 0;
 }
-.dnb-anchor--focus:not(:active).dnb-anchor--icon-right .dnb-icon {
+.dnb-anchor--focus.dnb-anchor--icon-right .dnb-icon {
   margin-right: 0;
 }
 
+.dnb-anchor--no-radius, .dnb-anchor--no-radius:hover, .dnb-anchor--no-radius:active, .dnb-anchor--no-radius:focus {
+  border-radius: 0;
+}
+
 .dnb-anchor--contrast {
   color: var(--color-white);
 }

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

@@ -1 +1 @@
-@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)}
+@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)}.dnb-anchor:focus{border-radius:.25rem;color:var(--sb-color-blue-dark)}.dnb-anchor:focus,.dnb-anchor:focus:not(:active){background-color:var(--sb-color-blue-light-3)}.dnb-anchor:focus.dnb-anchor--icon-left,.dnb-anchor:focus.dnb-anchor--icon-left .dnb-icon{margin-left:0}.dnb-anchor:focus.dnb-anchor--icon-right,.dnb-anchor:focus.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{border-radius:.25rem;color:var(--sb-color-blue-dark)}.dnb-anchor--focus,.dnb-anchor--focus:not(:active){background-color:var(--sb-color-blue-light-3)}.dnb-anchor--focus.dnb-anchor--icon-left,.dnb-anchor--focus.dnb-anchor--icon-left .dnb-icon{margin-left:0}.dnb-anchor--focus.dnb-anchor--icon-right,.dnb-anchor--focus.dnb-anchor--icon-right .dnb-icon{margin-right:0}.dnb-anchor--no-radius,.dnb-anchor--no-radius:active,.dnb-anchor--no-radius:focus,.dnb-anchor--no-radius:hover{border-radius: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

@@ -17,24 +17,25 @@
 }
 
 @mixin anchorFocus() {
+  color: var(--sb-color-blue-dark);
+  background-color: var(--sb-color-blue-light-3);
+  border-radius: 0.25rem;
+
   &:not(:active) {
-    color: var(--sb-color-blue-dark);
     background-color: var(--sb-color-blue-light-3);
+  }
 
-    border-radius: 0.25rem;
-
-    &.dnb-anchor--icon-left {
+  &.dnb-anchor--icon-left {
+    margin-left: 0;
+    .dnb-icon {
       margin-left: 0;
-      .dnb-icon {
-        margin-left: 0;
-      }
     }
+  }
 
-    &.dnb-anchor--icon-right {
+  &.dnb-anchor--icon-right {
+    margin-right: 0;
+    .dnb-icon {
       margin-right: 0;
-      .dnb-icon {
-        margin-right: 0;
-      }
     }
   }
 }
@@ -59,9 +60,7 @@
   }
 
   &:focus {
-    @include utilities.whatInput('keyboard') {
-      @include anchorFocus();
-    }
+    @include anchorFocus();
   }
 
   &.dnb-anchor--icon-left {
@@ -115,6 +114,10 @@
   @include anchorFocus();
 }
 
+.dnb-anchor--no-radius {
+  @include anchor-mixins.resetBorderRadius();
+}
+
 // TODO: add correct contrast styling when designs are in place
 .dnb-anchor--contrast {
   @include anchor-mixins.useAnchorContrastStyle();

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

@@ -1,6 +1,6 @@
 @use '../anchor-mixins.scss';
 
-.dnb-anchor {
+@mixin anchorStyle() {
   color: var(--color-sea-green);
 
   &:hover,
@@ -21,22 +21,36 @@
   }
 }
 
-.dnb-anchor--hover {
-  color: var(--color-sea-green);
-  @include anchor-mixins.anchorBackground(var(--color-mint-green-50));
-}
-
-.dnb-anchor--active {
-  color: var(--color-mint-green);
-  @include anchor-mixins.anchorBackground(var(--color-emerald-green));
-}
+$useClasses: true !default;
+@if $useClasses {
+  .dnb-anchor {
+    @include anchorStyle();
+  }
 
-.dnb-anchor--focus {
-  &:not(:active) {
+  .dnb-anchor--hover {
     color: var(--color-sea-green);
+    @include anchor-mixins.anchorBackground(var(--color-mint-green-50));
+  }
+
+  .dnb-anchor--active {
+    color: var(--color-mint-green);
+    @include anchor-mixins.anchorBackground(var(--color-emerald-green));
+  }
+
+  .dnb-anchor--focus {
+    &:not(:active) {
+      color: var(--color-sea-green);
+    }
+  }
+
+  .dnb-anchor--contrast {
+    @include anchor-mixins.useAnchorContrastStyle();
   }
 }
 
-.dnb-anchor--contrast {
-  @include anchor-mixins.useAnchorContrastStyle();
+@mixin anchorThemeTag() {
+  a {
+    --theme-color-black-80: var(--color-sea-green);
+    @include anchorStyle();
+  }
 }

package/cjs/components/autocomplete/Autocomplete.js

@@ -1624,6 +1624,7 @@ class AutocompleteInstance extends _react.default.PureComponent {
     }
 
     const suffixValue = (_getCurrentData = (0, _DrawerListHelpers.getCurrentData)(selected_item, this.context.drawerList.original_data)) === null || _getCurrentData === void 0 ? void 0 : _getCurrentData.suffix_value;
+    const innerId = suffixValue && showStatus ? `${id}-inner` : null;
     (0, _componentHelper.validateDOMAttributes)(null, mainParams);
     (0, _componentHelper.validateDOMAttributes)(null, shellParams);
     return _react.default.createElement("span", mainParams, label && _react.default.createElement(_FormLabel.default, {
@@ -1637,7 +1638,8 @@ class AutocompleteInstance extends _react.default.PureComponent {
       onClick: this.toggleVisible
     }), _react.default.createElement("span", {
       className: "dnb-autocomplete__inner",
-      ref: this._ref
+      ref: this._ref,
+      id: innerId
     }, _AlignmentHelper || (_AlignmentHelper = _react.default.createElement(_AlignmentHelper2.default, null)), _react.default.createElement(_FormStatus.default, _extends({
       show: showStatus,
       id: id + '-form-status',
@@ -1647,7 +1649,8 @@ class AutocompleteInstance extends _react.default.PureComponent {
       text: status,
       state: status_state,
       no_animation: status_no_animation,
-      skeleton: skeleton
+      skeleton: skeleton,
+      width_selector: innerId
     }, status_props)), _react.default.createElement("span", {
       className: "dnb-autocomplete__row"
     }, _react.default.createElement("span", shellParams, CustomInput ? _react.default.createElement(CustomInput, inputParams) : _react.default.createElement(_Input.default, _extends({

package/cjs/components/avatar/Avatar.d.ts

@@ -5,6 +5,7 @@ import type { SkeletonShow } from '../skeleton/Skeleton';
 import AvatarGroup from './AvatarGroup';
 export declare type AvatarSizes = 'small' | 'medium' | 'large' | 'x-large';
 export declare type AvatarVariants = 'primary' | 'secondary' | 'tertiary';
+export declare type AvatarImgProps = ImgProps;
 export interface AvatarProps {
     /**
      * Used in combination with `src` to provide an alt attribute for the `img` element.

package/cjs/components/button/style/dnb-button--tertiary.css

@@ -86,6 +86,10 @@ html[data-whatintent=touch] .dnb-button--tertiary:active:not([disabled]) .dnb-bu
 html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text::after, html:not([data-whatintent=touch]) html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text::after {
   visibility: hidden;
 }
+.dnb-button--tertiary.dnb-button--has-text {
+  padding-left: 0;
+  padding-right: 0;
+}
 .dnb-button--tertiary.dnb-button--has-text .dnb-button__icon {
   align-self: flex-start;
   margin-top: calc(var(--button-height) / 2 - 0.5rem);

package/cjs/components/button/style/dnb-button--tertiary.min.css

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

package/cjs/components/button/style/dnb-button--tertiary.scss

@@ -52,6 +52,9 @@
     }
 
     &.dnb-button--has-text {
+      padding-left: 0;
+      padding-right: 0;
+
       .dnb-button__icon {
         align-self: flex-start; // needed to vertically center icon
 

package/cjs/components/button/style/themes/button-mixins.scss

@@ -65,7 +65,7 @@
 }
 
 // Used in tertiary button variant
-@mixin buttonFocusRing($whatinput: null, $overflow: -0.5rem, $inset: null) {
+@mixin buttonFocusRing($whatinput: null, $inset: null) {
   // Create focus-ring
   &::before {
     content: '';
@@ -73,9 +73,9 @@
     z-index: 1; // to be visible in other absolute contexts
 
     top: 0;
-    left: $overflow;
+    left: -0.5rem;
     bottom: 0;
-    right: $overflow;
+    right: -0.5rem;
 
     height: inherit;
     border-radius: inherit;

package/cjs/components/button/style/themes/dnb-button-theme-eiendom.css

@@ -101,6 +101,10 @@ html[data-whatintent=touch] .dnb-button--tertiary:active:not([disabled]) .dnb-bu
 html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text::after, html:not([data-whatintent=touch]) html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text::after {
   visibility: hidden;
 }
+.dnb-button--tertiary.dnb-button--has-text {
+  padding-left: 0;
+  padding-right: 0;
+}
 .dnb-button--tertiary.dnb-button--has-text .dnb-button__icon {
   align-self: flex-start;
   margin-top: calc(var(--button-height) / 2 - 0.5rem);
@@ -376,10 +380,6 @@ html[data-whatinput=keyboard] .dnb-button--secondary:not(.dnb-button--has-text):
   color: var(--color-sea-green);
   background-color: transparent;
 }
-.dnb-button--tertiary.dnb-button--has-text {
-  padding-left: 0;
-  padding-right: 0;
-}
 html:not([data-whatintent=touch]) .dnb-button--tertiary:hover[disabled] {
   cursor: not-allowed;
 }
@@ -491,6 +491,10 @@ html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondar
 html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text)[disabled] {
   color: var(--color-black-55);
   background-color: var(--color-black-3);
+  --border-color: var(--color-black-55);
+  --border-width: var(--input-border-width);
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
 }
 
 .dnb-button--primary {