@helsenorge/designsystem-react 15.7.2 → 16.0.0

package/lib/components/ArticleTeaser/styles.module.scss

@@ -1,11 +1,9 @@
 @use 'sass:map';
 @use '../../scss/breakpoints' as breakpoints;
-@import '../../scss/supernova/styles/colors.css';
-@import '../../scss/supernova/styles/spacers.css';
 
 .articleteaser {
   position: relative;
-  border-bottom: 1px solid var(--color-base-border-onlight);
+  border-bottom: 1px solid var(--color-base-border-dark);
 
   &__content {
     overflow: hidden;
@@ -36,7 +34,7 @@
     width: fit-content;
     white-space: nowrap;
     border-radius: 1.25rem;
-    background: var(--color-action-graphics-onlight, #188097);
+    background: var(--color-action-graphics-dark-normal, #188097);
     color: var(--core-color-white, #fff);
     padding: 0.375rem 1rem;
     bottom: 0;
@@ -48,26 +46,28 @@
     font-size: 1rem;
     font-style: normal;
     font-weight: 600;
-    line-height: 120%; /* 1.2rem */
+    line-height: 120%;
+
+    /* 1.2rem */
 
     &:hover {
-      background-color: var(--color-action-graphics-onlight-hover);
+      background-color: var(--color-action-graphics-dark-hover);
     }
 
     &:focus-visible {
-      border: 1px solid var(--color-base-graphics-ondark);
+      border: 1px solid var(--color-base-graphics-light);
       outline: none;
-      box-shadow: 0 0 0 3px var(--color-base-graphics-onlight);
+      box-shadow: 0 0 0 3px var(--color-base-graphics-dark);
     }
 
     &:active {
-      background-color: var(--color-action-background-onlight-active);
+      background-color: var(--color-action-background-dark-plus1-active);
     }
 
     &--expanded {
-      background: var(--color-action-graphics-ondark);
-      color: var(--color-action-graphics-onlight);
-      border: 1px solid var(--color-action-border-onlight);
+      background: var(--color-action-graphics-light-normal);
+      color: var(--color-action-graphics-dark-normal);
+      border: 1px solid var(--color-action-border-dark-normal);
 
       &:hover {
         background-color: var(--color-action-background-like-transparent-but-opaque-onlight-hover);

package/lib/components/Button/Button.d.ts

@@ -2,7 +2,7 @@ import { default as React, AriaAttributes } from 'react';
 import { HTMLButtonProps, HTMLAnchorProps } from '../../constants';
 export type ButtonConcept = 'normal' | 'destructive';
 export type ButtonVariant = 'fill' | 'outline' | 'borderless';
-export type ButtonSize = 'medium' | 'large';
+export type ButtonSize = 'normal' | 'large';
 export type ButtonOnColor = 'onlight' | 'ondark';
 export type ButtonTags = 'button' | 'a';
 export type ButtonArrows = 'icon' | 'accessibility-character';

package/lib/components/Button/styles.module.scss

@@ -4,27 +4,26 @@
 @use '../../scss/font-settings' as font-settings;
 @use '../../scss/screen-reader' as *;
 @use '../../scss/breakpoints' as breakpoints;
-@import '../../scss/supernova/styles/colors.css';
 
 $dark-mode-disabled-transparrent: #ffffffb3;
 $with-icons: // icon-class, size-class, padding-left, padding-right, padding-left desktop, padding-right desktop, svg-margin-left, svg-margin-right, svg-margin-left desktop, svg-margin-right desktop
-  'left-icon' 'medium' spacers.getSpacer(xs) spacers.getSpacer(s) spacers.getSpacer(xs) spacers.getSpacer(m) 0 spacers.getSpacer(3xs) 0
+  'left-icon' 'normal' spacers.getSpacer(xs) spacers.getSpacer(s) spacers.getSpacer(xs) spacers.getSpacer(m) 0 spacers.getSpacer(3xs) 0
     spacers.getSpacer(2xs),
-  'right-icon' 'medium' spacers.getSpacer(s) spacers.getSpacer(xs) spacers.getSpacer(m) spacers.getSpacer(xs) spacers.getSpacer(3xs) 0
+  'right-icon' 'normal' spacers.getSpacer(s) spacers.getSpacer(xs) spacers.getSpacer(m) spacers.getSpacer(xs) spacers.getSpacer(3xs) 0
     spacers.getSpacer(2xs) 0,
   'left-icon' 'large-non-borderless' spacers.getSpacer(xs) spacers.getSpacer(m) spacers.getSpacer(s) spacers.getSpacer(l) 0
     spacers.getSpacer(2xs) 0 spacers.getSpacer(xs),
   'right-icon' 'large-non-borderless' spacers.getSpacer(m) spacers.getSpacer(xs) spacers.getSpacer(l) spacers.getSpacer(s)
     spacers.getSpacer(2xs) 0 spacers.getSpacer(xs) 0,
-  'arrow' 'medium' spacers.getSpacer(s) spacers.getSpacer(xs) spacers.getSpacer(m) spacers.getSpacer(xs) spacers.getSpacer(m) 0
+  'arrow' 'normal' spacers.getSpacer(s) spacers.getSpacer(xs) spacers.getSpacer(m) spacers.getSpacer(xs) spacers.getSpacer(m) 0
     spacers.getSpacer(l) 0,
   'arrow' 'large-non-borderless' spacers.getSpacer(m) spacers.getSpacer(xs) spacers.getSpacer(l) spacers.getSpacer(xs) spacers.getSpacer(l)
     0 spacers.getSpacer(xl) 0,
-  'arrow--both-icons' 'medium' 0 0 0 0 spacers.getSpacer(s) 0 spacers.getSpacer(m) 0,
+  'arrow--both-icons' 'normal' 0 0 0 0 spacers.getSpacer(s) 0 spacers.getSpacer(m) 0,
   'arrow--both-icons' 'large-non-borderless' 0 0 0 0 spacers.getSpacer(m) 0 spacers.getSpacer(l) 0,
-  'only-icon' 'medium' 0.0625rem 0.0625rem 0.375rem 0.375rem 0 0 0 0,
+  'only-icon' 'normal' 0.0625rem 0.0625rem 0.375rem 0.375rem 0 0 0 0,
   'only-icon' 'large-non-borderless' 0.312rem 0.312rem spacers.getSpacer(3xs) spacers.getSpacer(3xs) 0 0 0 0,
-  'both-icons' 'medium' spacers.getSpacer(xs) spacers.getSpacer(xs) spacers.getSpacer(xs) spacers.getSpacer(xs) 0 0 0 0,
+  'both-icons' 'normal' spacers.getSpacer(xs) spacers.getSpacer(xs) spacers.getSpacer(xs) spacers.getSpacer(xs) 0 0 0 0,
   'both-icons' 'large-non-borderless' spacers.getSpacer(xs) spacers.getSpacer(xs) spacers.getSpacer(xs) spacers.getSpacer(xs) 0 0 0 0,
   'left-icon' 'large-borderless' spacers.getSpacer(xs) spacers.getSpacer(s) spacers.getSpacer(xs) spacers.getSpacer(m) 0
     spacers.getSpacer(3xs) 0 spacers.getSpacer(3xs),
@@ -41,24 +40,25 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
 }
 
 @mixin outline-borderless-text-hover {
-  @include text-color(var(--color-action-text-onlight-hover), var(--color-action-text-onlight-hover));
+  @include text-color(var(--color-action-text-dark-hover), var(--color-action-text-dark-hover));
 }
 
 @mixin focus-shadow($with-uu-border: true) {
-  box-shadow: 0 0 0 spacers.getSpacer(3xs) palette.$black;
+  box-shadow: 0 0 0 spacers.getSpacer(3xs) var(--color-action-border-dark-focus);
 
   @if $with-uu-border {
-    border: 1px solid var(--color-action-border-ondark-focus);
+    border: 1px solid var(--color-action-border-light-focus);
   } @else {
     border: none;
   }
 }
 
 @mixin focus-shadow-on-dark($with-uu-border: true) {
-  box-shadow: 0 0 0 spacers.getSpacer(3xs) palette.$white;
+  outline: none;
+  box-shadow: 0 0 0 spacers.getSpacer(3xs) var(--color-action-border-light-focus);
 
   @if $with-uu-border {
-    border: 1px solid var(--color-action-border-onlight-focus);
+    border: 1px solid var(--color-action-border-dark-focus);
   } @else {
     border: none;
   }
@@ -76,7 +76,7 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
   }
 }
 
-@mixin outline($ouline-color, $hover-outline-color) {
+@mixin outline($ouline-color) {
   outline: spacers.getSpacer(4xs) solid $ouline-color;
   outline-offset: spacers.getSpacer(4xs) * -1;
 
@@ -85,11 +85,7 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
   }
 
   :disabled > & {
-    outline-color: palette.$neutral700;
-
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-      outline-color: palette.$neutral500;
-    }
+    outline-color: var(--color-disabled-border-dark);
   }
 }
 
@@ -101,20 +97,22 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
   }
 
   :disabled > & {
-    color: palette.$neutral700;
+    color: var(--color-disabled-text);
   }
 }
 
 @mixin fill-on-dark($background-color) {
-  background-color: palette.$white;
+  background-color: var(--color-action-background-light-normal);
 
   &:hover {
-    box-shadow: none;
+    box-shadow: 0 0 0 spacers.getSpacer(3xs) var(--color-action-border-light-hover);
+    background-color: $background-color;
   }
 
-  &:hover,
-  :focus > & {
-    background-color: $background-color;
+  &:active {
+    /* NOSONAR - falsk positiv: & får scoping root der mixinen inkluderes */
+    background-color: var(--color-action-background-light-active);
+    box-shadow: 0 0 0 spacers.getSpacer(3xs) var(--color-action-border-light-active);
   }
 
   /* stylelint-disable-next-line */
@@ -127,27 +125,41 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
   color: $color;
 
   :disabled > & {
-    color: palette.$neutral700;
+    color: var(--color-disabled-text);
   }
 }
 
 @mixin on-dark {
   &--on-dark {
-    @include fill-on-dark(var(--color-action-background-ondark-hover));
+    @include fill-on-dark(var(--color-action-background-light-hover));
 
-    :focus > & {
+    :focus-visible > & {
       @include focus-shadow-on-dark(true);
 
       &:hover {
         @include focus-shadow-on-dark(true);
-
-        background-color: palette.$white;
       }
     }
   }
 
   &--on-dark#{&}--destructive {
     @include fill-on-dark(palette.$cherry50);
+
+    &:active {
+      background-color: var(--color-destructive-graphics-dark-active);
+    }
+  }
+
+  &--on-dark#{&}--outline#{&}--destructive {
+    &:active {
+      background-color: var(--color-destructive-background-transparent-onlight-active);
+    }
+  }
+
+  &--on-dark#{&}--borderless#{&}--destructive {
+    &:active {
+      background-color: var(--color-destructive-background-transparent-onlight-active);
+    }
   }
 
   &--on-dark#{&}--outline,
@@ -156,19 +168,23 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
   &--on-dark#{&}--borderless#{&}--destructive {
     background-color: transparent;
 
-    :focus > & {
-      @include focus-shadow-on-dark(false);
-
-      &:hover {
-        @include focus-shadow-on-dark(false);
+    &:hover {
+      background-color: var(--color-action-background-transparent-multi-onlight-hover);
+      box-shadow: none;
+    }
 
-        background-color: palette.$inverted-hover;
-      }
+    &:active {
+      background-color: var(--color-action-background-transparent-multi-onlight-active);
+      box-shadow: none;
     }
   }
 
   &--on-dark#{&}--outline {
-    outline-color: palette.$white;
+    outline-color: var(--color-action-border-light-normal);
+
+    :focus-visible > & {
+      @include focus-shadow-on-dark(true);
+    }
 
     :disabled > & {
       @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
@@ -178,26 +194,34 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
   }
 
   &--on-dark#{&}--borderless {
+    :focus-visible > & {
+      @include focus-shadow-on-dark(false);
+
+      &:hover {
+        @include focus-shadow-on-dark(false);
+      }
+    }
+
     :disabled > & {
       border-color: $dark-mode-disabled-transparrent;
     }
   }
 
   &--on-dark &__text {
-    @include on-dark-text(palette.$blueberry600);
+    @include on-dark-text(var(--color-action-text-dark-normal));
   }
 
   &--on-dark#{&}--destructive &__text {
-    @include on-dark-text(palette.$cherry600);
+    @include on-dark-text(var(--color-destructive-text-dark-normal));
   }
 
   &--on-dark#{&}--outline &__text,
   &--on-dark#{&}--borderless &__text {
-    color: palette.$white;
+    color: var(--color-action-text-light-normal);
 
     :disabled > & {
       @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-        color: $dark-mode-disabled-transparrent;
+        color: var(--color-disabled-text-light);
       }
     }
   }
@@ -228,7 +252,7 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
 
 .button {
   display: inline-flex;
-  background-color: palette.$blueberry500;
+  background-color: var(--color-action-background-dark-normal);
   padding: 0 spacers.getSpacer(m);
   font-size: font-settings.$font-size-sm;
   font-weight: 600;
@@ -244,19 +268,24 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
   letter-spacing: unset;
 
   &:hover {
-    background-color: palette.$blueberry700;
-    box-shadow: 0 0 0 spacers.getSpacer(3xs) palette.$blueberry700;
+    background-color: var(--color-action-background-dark-hover);
+    box-shadow: 0 0 0 spacers.getSpacer(3xs) var(--color-action-border-dark-hover);
+  }
+
+  &:active {
+    background: var(--color-action-background-dark-active);
+    box-shadow: 0 0 0 spacers.getSpacer(3xs) var(--color-action-border-dark-active);
   }
 
   :disabled > & {
     pointer-events: none;
-    outline: spacers.getSpacer(4xs) dashed palette.$neutral700;
+    outline: spacers.getSpacer(4xs) dashed var(--color-disabled-border-dark);
     outline-offset: spacers.getSpacer(4xs) * -1;
-    background-color: palette.$neutral200;
+    background-color: var(--color-disabled-background-light);
   }
 
   :disabled > & &__text {
-    color: palette.$neutral800;
+    color: var(--color-disabled-text);
   }
 
   @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
@@ -314,18 +343,23 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
   }
 
   &--destructive {
-    background-color: palette.$cherry500;
+    background-color: var(--color-destructive-background-dark-normal);
 
     &:hover {
-      background-color: palette.$cherry700;
-      box-shadow: 0 0 0 spacers.getSpacer(3xs) palette.$cherry700;
+      background-color: var(--color-destructive-graphics-dark-hover);
+      box-shadow: 0 0 0 spacers.getSpacer(3xs) var(--color-destructive-graphics-dark-hover);
+    }
+
+    &:active {
+      background-color: var(--color-destructive-graphics-dark-active);
+      box-shadow: 0 0 0 spacers.getSpacer(3xs) var(--color-destructive-border-dark-active);
     }
   }
 
   // Gives space to focus border
   border: 1px solid transparent;
 
-  :focus > & {
+  :focus-visible > & {
     @include focus-shadow;
 
     &:hover {
@@ -339,7 +373,12 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
 
     border: none;
 
-    :focus > & {
+    &:active {
+      background-color: var(--color-action-background-transparent-onlight-active);
+      box-shadow: none;
+    }
+
+    :focus-visible > & {
       @include focus-shadow(false);
 
       &:hover {
@@ -350,15 +389,25 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
 
   &--outline#{&}--destructive,
   &--borderless#{&}--destructive {
-    @include outline-borderless-background(transparent, palette.$cherry50);
+    @include outline-borderless-background(transparent, var(--color-destructive-background-transparent-onlight-hover));
   }
 
   &--outline {
-    @include outline(palette.$blueberry700, palette.$blueberry50);
+    @include outline(var(--color-action-border-dark-normal));
   }
 
   &--outline#{&}--destructive {
-    @include outline(palette.$cherry700, palette.$cherry50);
+    @include outline(var(--color-destructive-border-dark-normal));
+
+    &:active {
+      background-color: var(--color-destructive-background-transparent-onlight-active);
+    }
+  }
+
+  &--borderless#{&}--destructive {
+    &:active {
+      background-color: var(--color-destructive-background-transparent-onlight-active);
+    }
   }
 
   &--borderless {
@@ -387,7 +436,7 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
 
   /* stylelint-disable-next-line */
   &__text {
-    color: palette.$white;
+    color: var(--color-action-text-light-normal);
     margin: 0 auto 0 0;
     position: relative;
     display: flex;
@@ -402,6 +451,8 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
     }
 
     &--ellipsis {
+      // text-overflow fungerer ikke på flex-containere
+      display: block;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -419,12 +470,12 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
   /* stylelint-disable-next-line */
   &--outline &__text,
   &--borderless &__text {
-    @include text-color(var(--color-action-text-onlight), var(--color-action-text-onlight-hover));
+    @include text-color(var(--color-action-text-dark-normal), var(--color-action-text-dark-hover));
   }
 
   &--outline#{&}--destructive &__text,
   &--borderless#{&}--destructive &__text {
-    @include text-color(palette.$cherry600, palette.$cherry700);
+    @include text-color(var(--color-destructive-text-dark-normal), var(--color-destructive-text-dark-hover));
   }
 
   &--only-icon {
@@ -453,13 +504,13 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
 
   &__line {
     display: block;
-    border-bottom: spacers.getSpacer(4xs) dashed palette.$neutral500;
+    border-bottom: spacers.getSpacer(4xs) dashed var(--color-disabled-graphics-dark);
     transform-origin: top left;
     transform: rotate(37.4deg);
   }
 
   &--on-dark &__line {
-    border-color: palette.$white;
+    border-color: var(--color-disabled-graphics-light);
 
     @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       border-color: $dark-mode-disabled-transparrent;

package/lib/components/Button/styles.module.scss.d.ts

@@ -18,7 +18,7 @@ export type Styles = {
   'button--large-borderless': string;
   'button--large-non-borderless': string;
   'button--left-icon': string;
-  'button--medium': string;
+  'button--normal': string;
   'button--on-dark': string;
   'button--only-icon': string;
   'button--outline': string;

package/lib/components/Checkbox/CheckboxMarker/styles.module.scss

@@ -169,16 +169,16 @@ $checkbox-icon-size: 1.625rem;
       color: palette.$black;
 
       &__regular--checked {
-        border: 1px solid var(--color-action-border-ondark-focus);
+        border: 1px solid var(--color-action-border-light-focus);
 
         & + .checkbox__marker__regular--on-dark {
-          border: 1px solid var(--color-action-border-onlight-focus);
+          border: 1px solid var(--color-action-border-dark-focus);
         }
       }
 
       &--on-dark {
         color: palette.$white;
-        border: 1px solid var(--color-action-border-onlight-focus);
+        border: 1px solid var(--color-action-border-dark-focus);
       }
 
       &--invalid {
@@ -190,13 +190,13 @@ $checkbox-icon-size: 1.625rem;
           background-color: palette.$blueberry200;
           box-shadow: 0 0 0 spacers.getSpacer(3xs);
           color: palette.$white;
-          border: 1px solid var(--color-action-border-onlight-focus);
+          border: 1px solid var(--color-action-border-dark-focus);
 
           // komboklasser fungerer ikke i nested struktur
           &--invalid {
             background-color: palette.$cherry500;
             color: palette.$black;
-            border: 1px solid var(--color-action-border-ondark-focus);
+            border: 1px solid var(--color-action-border-light-focus);
           }
 
           &--disabled {
@@ -215,7 +215,7 @@ $checkbox-icon-size: 1.625rem;
 
     label:hover &--on-white,
     label:hover &--on-grey {
-      background-color: var(--color-action-graphics-ondark-hover);
+      background-color: var(--color-action-graphics-light-hover);
     }
 
     label:active &--on-white,

package/lib/components/Chip/styles.module.scss

@@ -1,6 +1,5 @@
 @use 'sass:map';
 @use '../../scss/breakpoints' as breakpoints;
-@import '../../scss/supernova/styles/colors.css';
 
 .chip {
   display: flex;
@@ -49,7 +48,7 @@
 
       .chip__chip:focus-visible &,
       .chip__close:focus-visible & {
-        outline: 3px solid var(--color-action-border-onlight-focus);
+        outline: 3px solid var(--color-action-border-dark-focus);
       }
     }
   }
@@ -89,7 +88,7 @@
 
       svg {
         position: absolute;
-        fill: var(--color-action-graphics-onlight);
+        fill: var(--color-action-graphics-dark-normal);
       }
     }
   }

package/lib/components/Close/styles.module.scss

@@ -1,6 +1,5 @@
 @use 'sass:map';
 @use '../../scss/breakpoints' as breakpoints;
-@import '../../scss/supernova/styles/colors.css';
 
 $desktop-size: 3rem;
 $mobile-inner-size: 2.375rem;
@@ -54,7 +53,7 @@ $mobile-outer-size: 2.75rem;
     }
 
     :focus-visible > & {
-      outline: 4px solid var(--color-action-border-onlight-focus);
+      outline: 4px solid var(--color-action-border-dark-focus);
       border-radius: 0;
       border: 0;
     }
@@ -69,7 +68,7 @@ $mobile-outer-size: 2.75rem;
       }
 
       :focus-visible > & {
-        outline: 4px solid var(--color-action-border-onlight-focus);
+        outline: 4px solid var(--color-action-border-dark-focus);
         border-radius: 0;
         border: 0;
       }

package/lib/components/DictionaryTrigger/index.js

@@ -1,2 +1,27 @@
-import { t as DictionaryTrigger_default } from "../../DictionaryTrigger.js";
+import { AnalyticsId } from "../../constants.js";
+import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
+import styles from "./styles.module.scss";
+//#region src/components/DictionaryTrigger/DictionaryTrigger.tsx
+var DictionaryTrigger = (props) => {
+	const { children, selected = false, className, testId, ref, ...rest } = props;
+	const triggerClasses = classNames(styles.dictionarytrigger, className);
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"data-testid": testId,
+		"data-analyticsid": AnalyticsId.DictionaryTrigger,
+		className: triggerClasses,
+		"aria-expanded": selected,
+		ref,
+		...rest,
+		children
+	});
+};
+DictionaryTrigger.displayName = "DictionaryTrigger";
+//#endregion
+//#region src/components/DictionaryTrigger/index.ts
+var DictionaryTrigger_default = DictionaryTrigger;
+//#endregion
 export { DictionaryTrigger_default as default };
+
+//# sourceMappingURL=index.js.map

package/lib/{DictionaryTrigger.js.map → components/DictionaryTrigger/index.js.map}

@@ -1 +1 @@
-{"version":3,"file":"DictionaryTrigger.js","names":[],"sources":["../src/components/DictionaryTrigger/DictionaryTrigger.tsx","../src/components/DictionaryTrigger/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\n\nimport styles from './styles.module.scss';\n\nexport interface DictionaryTriggerProps extends Pick<React.InputHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onFocus' | 'onBlur'> {\n  /**\n   * Sets the content of the trigger.\n   */\n  children: React.ReactNode;\n  /**\n   * Indicates that the trigger is in use.\n   */\n  selected?: boolean;\n  /**\n   * Classname will be applied to the button element.\n   */\n  className?: string;\n  /**\n   * Sets the data-testid attribute.\n   */\n  testId?: string;\n  /**\n   * ref that is passed to the component\n   */\n  ref?: React.Ref<HTMLButtonElement | null>;\n}\n\nconst DictionaryTrigger: React.FC<DictionaryTriggerProps> = (props: DictionaryTriggerProps) => {\n  const { children, selected = false, className, testId, ref, ...rest } = props;\n  const triggerClasses = classNames(styles.dictionarytrigger, className);\n\n  return (\n    <button\n      type=\"button\"\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.DictionaryTrigger}\n      className={triggerClasses}\n      aria-expanded={selected}\n      ref={ref}\n      {...rest}\n    >\n      {children}\n    </button>\n  );\n};\n\nDictionaryTrigger.displayName = 'DictionaryTrigger';\n\nexport default DictionaryTrigger;\n","import DictionaryTrigger from './DictionaryTrigger';\nexport * from './DictionaryTrigger';\nexport default DictionaryTrigger;\n"],"mappings":";;;;;AA6BA,IAAM,qBAAuD,UAAkC;CAC7F,MAAM,EAAE,UAAU,WAAW,OAAO,WAAW,QAAQ,KAAK,GAAG,SAAS;CACxE,MAAM,iBAAiB,WAAW,OAAO,mBAAmB,SAAS;CAErE,OACE,oBAAC,UAAD;EACE,MAAK;EACL,eAAa;EACb,oBAAkB,YAAY;EAC9B,WAAW;EACX,iBAAe;EACV;EACL,GAAI;EAEH;CACK,CAAA;AAEZ;AAEA,kBAAkB,cAAc;;;AC9ChC,IAAA,4BAAe"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/DictionaryTrigger/DictionaryTrigger.tsx","../../../src/components/DictionaryTrigger/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\n\nimport styles from './styles.module.scss';\n\nexport interface DictionaryTriggerProps extends Pick<React.InputHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onFocus' | 'onBlur'> {\n  /**\n   * Sets the content of the trigger.\n   */\n  children: React.ReactNode;\n  /**\n   * Indicates that the trigger is in use.\n   */\n  selected?: boolean;\n  /**\n   * Classname will be applied to the button element.\n   */\n  className?: string;\n  /**\n   * Sets the data-testid attribute.\n   */\n  testId?: string;\n  /**\n   * ref that is passed to the component\n   */\n  ref?: React.Ref<HTMLButtonElement | null>;\n}\n\nconst DictionaryTrigger: React.FC<DictionaryTriggerProps> = (props: DictionaryTriggerProps) => {\n  const { children, selected = false, className, testId, ref, ...rest } = props;\n  const triggerClasses = classNames(styles.dictionarytrigger, className);\n\n  return (\n    <button\n      type=\"button\"\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.DictionaryTrigger}\n      className={triggerClasses}\n      aria-expanded={selected}\n      ref={ref}\n      {...rest}\n    >\n      {children}\n    </button>\n  );\n};\n\nDictionaryTrigger.displayName = 'DictionaryTrigger';\n\nexport default DictionaryTrigger;\n","import DictionaryTrigger from './DictionaryTrigger';\nexport * from './DictionaryTrigger';\nexport default DictionaryTrigger;\n"],"mappings":";;;;;AA6BA,IAAM,qBAAuD,UAAkC;CAC7F,MAAM,EAAE,UAAU,WAAW,OAAO,WAAW,QAAQ,KAAK,GAAG,SAAS;CACxE,MAAM,iBAAiB,WAAW,OAAO,mBAAmB,SAAS;CAErE,OACE,oBAAC,UAAD;EACE,MAAK;EACL,eAAa;EACb,oBAAkB,YAAY;EAC9B,WAAW;EACX,iBAAe;EACV;EACL,GAAI;EAEH;CACK,CAAA;AAEZ;AAEA,kBAAkB,cAAc;;;AC9ChC,IAAA,4BAAe"}

package/lib/components/DictionaryTrigger/styles.module.scss

@@ -1,6 +1,4 @@
 @use '../../scss/palette' as palette;
-@import '../../scss/supernova/styles/colors.css';
-@import '../../scss/supernova/styles/spacers.css';
 
 .dictionarytrigger {
   all: unset;
@@ -10,7 +8,7 @@
   padding: 0 var(--core-space-4xs);
   background-color: transparent;
 
-  --dot-color: var(--color-help-border-normal);
+  --dot-color: var(--color-help-border);
 
   // The radial-gradient consists of a circle with empty space to the right, making up a dotted pattern when repeated horizontally
   background-image: radial-gradient(circle at 1.5px 1.5px, var(--dot-color) 1.5px, transparent 1.5px);
@@ -21,7 +19,7 @@
   &:hover {
     background-color: var(--color-help-background-transparent-onlight-hover);
 
-    --dot-color: var(--color-help-border-dark);
+    --dot-color: var(--color-help-border-plus1);
   }
 
   &:focus-visible {
@@ -32,11 +30,11 @@
   &[aria-expanded='true'] {
     background-color: var(--color-help-background-transparent-onlight-hover);
 
-    --dot-color: var(--color-help-border-dark);
+    --dot-color: var(--color-help-border-plus1);
 
     &:hover,
     &:focus-visible {
-      background-color: var(--color-help-background-transparent-onlight-hover-selected);
+      background-color: var(--color-help-background-transparent-onlight-hoverselected);
     }
 
     &:focus-visible {
@@ -45,8 +43,8 @@
   }
 
   &:active {
-    background-color: var(--color-help-background-transparent-onlight-hover-selected);
+    background-color: var(--color-help-background-transparent-onlight-hoverselected);
 
-    --dot-color: var(--color-help-border-dark);
+    --dot-color: var(--color-help-border-plus1);
   }
 }

package/lib/components/Drawer/Drawer.d.ts

@@ -48,10 +48,6 @@ export interface InnerDrawerProps {
     resources?: Partial<HNDesignsystemDrawer>;
     /** Sets mobile styling and animation from outer level Drawer */
     isMobile?: boolean;
-    /** Shows a back button to the left of title */
-    withBackButton?: boolean;
-    /** Callback for the back button */
-    onRequestBack?: () => void;
     /** Sets classname for content part in Drawer */
     contentClassName?: string;
     /** Sets the content padding of the Drawer */