@dnb/eufemia 10.8.0 → 10.9.0

package/es/components/skeleton/style/dnb-skeleton.scss

@@ -8,6 +8,13 @@
 @import '../../../style/core/utilities.scss';
 
 .dnb-skeleton {
+  --skeleton-delay: 5s;
+
+  img,
+  video {
+    filter: brightness(0%) contrast(0%) opacity(0.5);
+  }
+
   &--block {
     display: block;
   }
@@ -53,6 +60,24 @@
     box-shadow: none !important;
   }
 
+  &--shape#{&}::before {
+    background-color: var(--skeleton-color) !important; // to take presence
+  }
+
+  &--shape#{&}::after {
+    background-image: repeating-linear-gradient(
+      -45deg,
+      var(--skeleton-color--contrast) 1px 2px,
+      transparent 0 6px
+    ) !important;
+    background-repeat: repeat !important;
+    background-size: 100% !important; // to take presence
+
+    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
+    animation: skeletonLinearAnimation 1.5s linear infinite
+      var(--skeleton-delay);
+  }
+
   &--code,
   &--font {
     pre,
@@ -75,6 +100,10 @@
 
     font-family: var(--font-family-default) !important;
     font-style: unset !important;
+
+    &::marker {
+      color: var(--skeleton-color);
+    }
   }
 
   &--font,
@@ -87,6 +116,19 @@
     -webkit-text-fill-color: transparent !important;
     background-clip: text !important;
 
+    background-image: repeating-linear-gradient(
+      -45deg,
+      var(--skeleton-color--contrast) 1px 2px,
+      transparent 0 6px
+    ) !important;
+
+    --border-color: var(--skeleton-color);
+    background-color: var(--skeleton-color) !important;
+
+    background-position-x: 30rem;
+    animation: skeletonFontAnimation 5s linear infinite
+      var(--skeleton-delay);
+
     html[data-visual-test] & {
       animation: none !important;
     }
@@ -120,6 +162,30 @@
   }
 }
 
+@keyframes skeletonLinearAnimation {
+  0% {
+    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
+  }
+
+  50% {
+    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+  }
+
+  100% {
+    clip-path: polygon(0 0, 0% 0, 0% 100%, 0 100%);
+  }
+}
+
+@keyframes skeletonFontAnimation {
+  0% {
+    background-position-x: 30rem;
+  }
+
+  100% {
+    background-position-x: -30rem;
+  }
+}
+
 $fonts-path: '../../assets/fonts/dnb' !default;
 
 // Skeleton-Regular

package/es/components/skeleton/style/themes/dnb-skeleton-theme-sbanken.css

@@ -0,0 +1,7 @@
+/*
+ * No theme is provided
+ *
+ * Theming variables for the Skeleton component is required globally
+ * and is thus defined in src/style/themes/theme-sbanken/customisations.scss
+ *
+ */

package/es/components/skeleton/style/themes/dnb-skeleton-theme-sbanken.scss

@@ -0,0 +1,7 @@
+/*
+ * No theme is provided
+ *
+ * Theming variables for the Skeleton component is required globally
+ * and is thus defined in src/style/themes/theme-sbanken/customisations.scss
+ *
+ */

package/es/components/skeleton/style/themes/dnb-skeleton-theme-ui.css

@@ -1,62 +1,7 @@
 /*
- * Skeleton Theme
+ * No theme is provided
  *
- */
-:root {
-  --skeleton-color: var(--color-black-8);
-  --skeleton-color--contrast: var(--color-white);
-}
-
-.dnb-skeleton {
-  --skeleton-delay: 5s;
-}
-.dnb-skeleton img,
-.dnb-skeleton video {
-  filter: brightness(0%) contrast(0%) opacity(0.5);
-}
-.dnb-skeleton--shape.dnb-skeleton::before {
-  background-color: var(--skeleton-color) !important;
-}
-.dnb-skeleton--shape.dnb-skeleton::after {
-  background-image: repeating-linear-gradient(-45deg, var(--skeleton-color--contrast) 1px, var(--skeleton-color--contrast) 2px, transparent 0, transparent 6px) !important;
-  background-image: repeating-linear-gradient(-45deg, var(--skeleton-color--contrast) 1px 2px, transparent 0 6px) !important;
-  background-repeat: repeat !important;
-  background-size: 100% !important;
-  -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
-          clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
-  animation: skeletonLinearAnimation 1.5s linear infinite var(--skeleton-delay);
-}
-.dnb-skeleton--font-only::marker, .dnb-skeleton--font::marker, .dnb-skeleton--font .dnb-skeleton--show-font::marker, .dnb-skeleton--font .dnb-p::marker {
-  color: var(--skeleton-color);
-}
-.dnb-skeleton--font, .dnb-skeleton--font .dnb-skeleton--show-font, .dnb-skeleton--font .dnb-p {
-  background-image: repeating-linear-gradient(-45deg, var(--skeleton-color--contrast) 1px, var(--skeleton-color--contrast) 2px, transparent 0, transparent 6px) !important;
-  background-image: repeating-linear-gradient(-45deg, var(--skeleton-color--contrast) 1px 2px, transparent 0 6px) !important;
-  --border-color: var(--skeleton-color);
-  background-color: var(--skeleton-color) !important;
-  background-position-x: 30rem;
-  animation: skeletonFontAnimation 5s linear infinite var(--skeleton-delay);
-}
-
-@keyframes skeletonLinearAnimation {
-  0% {
-    -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
-            clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
-  }
-  50% {
-    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
-            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
-  }
-  100% {
-    -webkit-clip-path: polygon(0 0, 0% 0, 0% 100%, 0 100%);
-            clip-path: polygon(0 0, 0% 0, 0% 100%, 0 100%);
-  }
-}
-@keyframes skeletonFontAnimation {
-  0% {
-    background-position-x: 30rem;
-  }
-  100% {
-    background-position-x: -30rem;
-  }
-}
+ * Theming variables for the Skeleton component is required globally
+ * and is thus defined in src/style/themes/theme-ui/ui-theme-basis.scss
+ *
+ */

package/es/components/skeleton/style/themes/dnb-skeleton-theme-ui.min.css

@@ -1 +0,0 @@
-:root{--skeleton-color:var(--color-black-8);--skeleton-color--contrast:var(--color-white)}.dnb-skeleton{--skeleton-delay:5s}.dnb-skeleton img,.dnb-skeleton video{filter:brightness(0) contrast(0) opacity(.5)}.dnb-skeleton--shape.dnb-skeleton:before{background-color:var(--skeleton-color)!important}.dnb-skeleton--shape.dnb-skeleton:after{animation:skeletonLinearAnimation 1.5s linear infinite var(--skeleton-delay);background-image:repeating-linear-gradient(-45deg,var(--skeleton-color--contrast) 1px,var(--skeleton-color--contrast) 2px,transparent 0,transparent 6px)!important;background-image:repeating-linear-gradient(-45deg,var(--skeleton-color--contrast) 1px 2px,transparent 0 6px)!important;background-repeat:repeat!important;background-size:100%!important;-webkit-clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%);clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%)}.dnb-skeleton--font .dnb-p::marker,.dnb-skeleton--font .dnb-skeleton--show-font::marker,.dnb-skeleton--font-only::marker,.dnb-skeleton--font::marker{color:var(--skeleton-color)}.dnb-skeleton--font,.dnb-skeleton--font .dnb-p,.dnb-skeleton--font .dnb-skeleton--show-font{--border-color:var(--skeleton-color);animation:skeletonFontAnimation 5s linear infinite var(--skeleton-delay);background-color:var(--skeleton-color)!important;background-image:repeating-linear-gradient(-45deg,var(--skeleton-color--contrast) 1px,var(--skeleton-color--contrast) 2px,transparent 0,transparent 6px)!important;background-image:repeating-linear-gradient(-45deg,var(--skeleton-color--contrast) 1px 2px,transparent 0 6px)!important;background-position-x:30rem}@keyframes skeletonLinearAnimation{0%{-webkit-clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%);clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%)}50%{-webkit-clip-path:polygon(0 0,100% 0,100% 100%,0 100%);clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}to{-webkit-clip-path:polygon(0 0,0 0,0 100%,0 100%);clip-path:polygon(0 0,0 0,0 100%,0 100%)}}@keyframes skeletonFontAnimation{0%{background-position-x:30rem}to{background-position-x:-30rem}}

package/es/components/skeleton/style/themes/dnb-skeleton-theme-ui.scss

@@ -1,89 +1,7 @@
 /*
- * Skeleton Theme
+ * No theme is provided
+ *
+ * Theming variables for the Skeleton component is required globally
+ * and is thus defined in src/style/themes/theme-ui/ui-theme-basis.scss
  *
  */
-
-:root {
-  --skeleton-color: var(--color-black-8);
-  --skeleton-color--contrast: var(--color-white);
-}
-
-.dnb-skeleton {
-  --skeleton-delay: 5s;
-
-  img,
-  video {
-    filter: brightness(0%) contrast(0%) opacity(0.5);
-  }
-
-  &--shape#{&}::before {
-    background-color: var(--skeleton-color) !important; // to take presence
-  }
-
-  &--shape#{&}::after {
-    background-image: repeating-linear-gradient(
-      -45deg,
-      var(--skeleton-color--contrast) 1px 2px,
-      transparent 0 6px
-    ) !important;
-    background-repeat: repeat !important;
-    background-size: 100% !important; // to take presence
-
-    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
-    animation: skeletonLinearAnimation 1.5s linear infinite
-      var(--skeleton-delay);
-  }
-
-  // Font
-  &--font-only,
-  &--font,
-  &--font &--show-font,
-  &--font .dnb-p {
-    // Additional changes
-    &::marker {
-      color: var(--skeleton-color);
-    }
-  }
-
-  // Font
-  &--font,
-  &--font &--show-font,
-  &--font .dnb-p {
-    background-image: repeating-linear-gradient(
-      -45deg,
-      var(--skeleton-color--contrast) 1px 2px,
-      transparent 0 6px
-    ) !important;
-
-    --border-color: var(--skeleton-color);
-    background-color: var(--skeleton-color) !important;
-
-    background-position-x: 30rem;
-    animation: skeletonFontAnimation 5s linear infinite
-      var(--skeleton-delay);
-  }
-}
-
-@keyframes skeletonLinearAnimation {
-  0% {
-    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
-  }
-
-  50% {
-    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
-  }
-
-  100% {
-    clip-path: polygon(0 0, 0% 0, 0% 100%, 0 100%);
-  }
-}
-
-@keyframes skeletonFontAnimation {
-  0% {
-    background-position-x: 30rem;
-  }
-
-  100% {
-    background-position-x: -30rem;
-  }
-}

package/es/components/tooltip/style/dnb-tooltip.css

@@ -6,6 +6,10 @@
  * Utilities
  */
 .dnb-tooltip {
+  --tooltip-color: white;
+  --tooltip-background-color: black;
+  --tooltip-border-color: 1px solid black;
+  --tooltip-border-radius: 1rem;
   position: absolute;
   z-index: 3100;
   display: flex;
@@ -13,6 +17,10 @@
   justify-content: center;
   align-items: center;
   padding: 0 1rem;
+  color: var(--tooltip-color);
+  background-color: var(--tooltip-background-color);
+  border-radius: var(--tooltip-border-radius);
+  box-shadow: var(--shadow-default);
   opacity: 0;
   visibility: hidden;
   transition: opacity 200ms var(--easing-default);
@@ -70,6 +78,8 @@ html[data-visual-test] .dnb-tooltip--hide {
   left: 0;
   width: 1rem;
   height: 1rem;
+  background-color: var(--tooltip-background-color);
+  border: var(--tooltip-border-color);
   transform: translateY(70%) rotate(45deg);
 }
 .dnb-tooltip__arrow__position--bottom {

package/es/components/tooltip/style/dnb-tooltip.min.css

@@ -1 +1 @@
-.dnb-tooltip{align-items:center;display:flex;flex-direction:column;justify-content:center;opacity:0;padding:0 1rem;position:absolute;transition:opacity .2s var(--easing-default);visibility:hidden;z-index:3100}.dnb-tooltip--large{padding:.25rem 1rem}.dnb-tooltip--active{animation:show-tooltip .2s var(--easing-default) forwards;visibility:visible}.dnb-tooltip--active.dnb-tooltip--no-animation,html[data-visual-test] .dnb-tooltip--active{animation:show-tooltip 1ms var(--easing-default) forwards}.dnb-tooltip--hide{animation:hide-tooltip .2s var(--easing-default) forwards;visibility:visible}.dnb-tooltip--hide.dnb-tooltip--no-animation{animation:hide-tooltip 1ms linear forwards}.dnb-tooltip--fixed{position:fixed}html[data-visual-test] .dnb-tooltip--hide{animation:hide-tooltip 1ms linear 1s forwards}.dnb-tooltip__portal{left:0;position:absolute;right:0;top:0}.dnb-tooltip__content{min-height:1.5rem;min-width:2rem;padding:0}.dnb-tooltip__arrow{height:.5rem;margin:0;overflow:hidden;pointer-events:none;position:absolute;width:1rem}.dnb-tooltip__arrow:before{bottom:0;content:"";height:1rem;left:0;position:absolute;transform:translateY(70%) rotate(45deg);width:1rem}.dnb-tooltip__arrow__position--bottom{top:-.5rem}.dnb-tooltip__arrow__position--top{bottom:-.5rem;transform:rotate(180deg)}.dnb-tooltip__arrow__position--left{margin-right:3px;right:-.75rem;transform:rotate(90deg)}.dnb-tooltip__arrow__position--right{left:-.75rem;margin-left:3px;transform:rotate(270deg)}.dnb-tooltip__arrow__arrow--left{align-self:flex-start}.dnb-tooltip__arrow__arrow--right{align-self:flex-end}@keyframes show-tooltip{0%{opacity:0}to{opacity:1}}@keyframes hide-tooltip{0%{opacity:1}to{opacity:0;visibility:hidden}}
+.dnb-tooltip{--tooltip-color:#fff;--tooltip-background-color:#000;--tooltip-border-color:1px solid #000;--tooltip-border-radius:1rem;align-items:center;background-color:var(--tooltip-background-color);border-radius:var(--tooltip-border-radius);box-shadow:var(--shadow-default);color:var(--tooltip-color);display:flex;flex-direction:column;justify-content:center;opacity:0;padding:0 1rem;position:absolute;transition:opacity .2s var(--easing-default);visibility:hidden;z-index:3100}.dnb-tooltip--large{padding:.25rem 1rem}.dnb-tooltip--active{animation:show-tooltip .2s var(--easing-default) forwards;visibility:visible}.dnb-tooltip--active.dnb-tooltip--no-animation,html[data-visual-test] .dnb-tooltip--active{animation:show-tooltip 1ms var(--easing-default) forwards}.dnb-tooltip--hide{animation:hide-tooltip .2s var(--easing-default) forwards;visibility:visible}.dnb-tooltip--hide.dnb-tooltip--no-animation{animation:hide-tooltip 1ms linear forwards}.dnb-tooltip--fixed{position:fixed}html[data-visual-test] .dnb-tooltip--hide{animation:hide-tooltip 1ms linear 1s forwards}.dnb-tooltip__portal{left:0;position:absolute;right:0;top:0}.dnb-tooltip__content{min-height:1.5rem;min-width:2rem;padding:0}.dnb-tooltip__arrow{height:.5rem;margin:0;overflow:hidden;pointer-events:none;position:absolute;width:1rem}.dnb-tooltip__arrow:before{background-color:var(--tooltip-background-color);border:var(--tooltip-border-color);bottom:0;content:"";height:1rem;left:0;position:absolute;transform:translateY(70%) rotate(45deg);width:1rem}.dnb-tooltip__arrow__position--bottom{top:-.5rem}.dnb-tooltip__arrow__position--top{bottom:-.5rem;transform:rotate(180deg)}.dnb-tooltip__arrow__position--left{margin-right:3px;right:-.75rem;transform:rotate(90deg)}.dnb-tooltip__arrow__position--right{left:-.75rem;margin-left:3px;transform:rotate(270deg)}.dnb-tooltip__arrow__arrow--left{align-self:flex-start}.dnb-tooltip__arrow__arrow--right{align-self:flex-end}@keyframes show-tooltip{0%{opacity:0}to{opacity:1}}@keyframes hide-tooltip{0%{opacity:1}to{opacity:0;visibility:hidden}}

package/es/components/tooltip/style/dnb-tooltip.scss

@@ -6,6 +6,11 @@
 @import '../../../style/core/utilities.scss';
 
 .dnb-tooltip {
+  --tooltip-color: white;
+  --tooltip-background-color: black;
+  --tooltip-border-color: 1px solid black;
+  --tooltip-border-radius: 1rem;
+
   position: absolute;
   z-index: 3100; // over modal
 
@@ -15,6 +20,11 @@
   align-items: center;
 
   padding: 0 1rem;
+  color: var(--tooltip-color);
+
+  background-color: var(--tooltip-background-color);
+  border-radius: var(--tooltip-border-radius);
+  @include defaultDropShadow();
 
   &--large {
     padding: 0.25rem 1rem;
@@ -89,6 +99,10 @@
 
       width: 1rem;
       height: 1rem;
+      background-color: var(--tooltip-background-color);
+
+      border: var(--tooltip-border-color);
+
       transform: translateY(70%) rotate(45deg);
     }
 

package/es/components/tooltip/style/themes/dnb-tooltip-theme-sbanken.css

@@ -0,0 +1,9 @@
+/*
+* Tooltip theme for Sbanken
+*
+*/
+.dnb-tooltip {
+  --tooltip-color: var(--sb-color-white);
+  --tooltip-background-color: var(--sb-color-gray-dark-3);
+  --tooltip-border-color: 1px solid var(--sb-color-gray-dark-3);
+}

package/es/components/tooltip/style/themes/dnb-tooltip-theme-sbanken.min.css

@@ -0,0 +1 @@
+.dnb-tooltip{--tooltip-color:var(--sb-color-white);--tooltip-background-color:var(--sb-color-gray-dark-3);--tooltip-border-color:1px solid var(--sb-color-gray-dark-3)}

package/es/components/tooltip/style/themes/dnb-tooltip-theme-sbanken.scss

@@ -0,0 +1,10 @@
+/*
+* Tooltip theme for Sbanken
+*
+*/
+
+.dnb-tooltip {
+  --tooltip-color: var(--sb-color-white);
+  --tooltip-background-color: var(--sb-color-gray-dark-3);
+  --tooltip-border-color: 1px solid var(--sb-color-gray-dark-3);
+}

package/es/components/tooltip/style/themes/dnb-tooltip-theme-ui.css

@@ -2,16 +2,8 @@
 * Tooltip theme
 *
 */
-/*
- * Utilities
- */
 .dnb-tooltip {
-  border-radius: 1rem;
-  color: var(--color-white);
-  background-color: var(--color-black-80);
-  box-shadow: var(--shadow-default);
-}
-.dnb-tooltip__arrow::before {
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  background-color: var(--color-black-80);
+  --tooltip-color: var(--color-white);
+  --tooltip-background-color: var(--color-black-80);
+  --tooltip-border-color: 1px solid rgb(0 0 0 / 10%);
 }

package/es/components/tooltip/style/themes/dnb-tooltip-theme-ui.min.css

@@ -1 +1 @@
-.dnb-tooltip{background-color:var(--color-black-80);border-radius:1rem;box-shadow:var(--shadow-default);color:var(--color-white)}.dnb-tooltip__arrow:before{background-color:var(--color-black-80);border:1px solid rgba(0,0,0,.1)}
+.dnb-tooltip{--tooltip-color:var(--color-white);--tooltip-background-color:var(--color-black-80);--tooltip-border-color:1px solid rgba(0,0,0,.1)}

package/es/components/tooltip/style/themes/dnb-tooltip-theme-ui.scss

@@ -3,20 +3,8 @@
 *
 */
 
-@import '../../../../style/core/utilities.scss';
-
 .dnb-tooltip {
-  border-radius: 1rem;
-
-  color: var(--color-white);
-  background-color: var(--color-black-80);
-
-  @include defaultDropShadow();
-
-  &__arrow {
-    &::before {
-      border: 1px solid rgb(0 0 0 / 10%);
-      background-color: var(--color-black-80);
-    }
-  }
+  --tooltip-color: var(--color-white);
+  --tooltip-background-color: var(--color-black-80);
+  --tooltip-border-color: 1px solid rgb(0 0 0 / 10%);
 }

package/es/elements/blockquote/style/blockquote-mixins.scss

@@ -1,6 +1,17 @@
 @use '../../../style/elements/ui-spacing.scss';
 
 @mixin blockquoteStyle() {
+  --blockquote-padding-top: 2rem;
+  --blockquote-padding-left: 1.5rem;
+  --blockquote-padding-bottom: 3rem;
+
+  // quote
+  --blockquote-quote-size: 3rem;
+  --blockquote-quote-padding: 6rem;
+
+  // font
+  --blockquote-cite-style: italic;
+
   display: inline-block;
   width: auto;
 
@@ -19,10 +30,10 @@
   &::before {
     content: '';
     position: absolute;
-    top: 2rem;
-    left: 1.5rem;
-    width: 3em;
-    height: 3em;
+    top: var(--blockquote-padding-top);
+    left: var(--blockquote-padding-left);
+    width: var(--blockquote-quote-size);
+    height: var(--blockquote-quote-size);
 
     background-size: cover;
 
@@ -33,15 +44,15 @@
   // stylelint-disable-next-line
   &,
   &.dnb-blockquote--left {
-    padding-left: 6rem;
-    padding-top: 2rem;
-    padding-bottom: 3rem;
+    padding-left: var(--blockquote-quote-padding);
+    padding-top: var(--blockquote-padding-top);
+    padding-bottom: var(--blockquote-padding-bottom);
   }
 
   &.dnb-blockquote--top {
-    padding-left: 1.5rem;
-    padding-top: 6rem;
-    padding-bottom: 3rem;
+    padding-left: var(--blockquote-padding-left);
+    padding-top: var(--blockquote-quote-padding);
+    padding-bottom: var(--blockquote-padding-bottom);
   }
 
   &.dnb-blockquote--no-background {
@@ -59,7 +70,7 @@
 
     font-weight: var(--font-weight-medium);
     line-height: var(--line-height-basis);
-    font-style: italic; // to have / or avoid italic on cite
+    font-style: var(--blockquote-cite-style);
 
     &::before {
       content: '—';

package/es/elements/blockquote/style/themes/dnb-blockquote-theme-sbanken.scss

@@ -1,9 +1,28 @@
+@use '../../../../style/core/utilities.scss';
+
 .dnb-blockquote {
-  color: var(--sb-color-text);
+  --blockquote-padding-top: 1.5rem;
+  --blockquote-quote-padding: 5.5rem;
+  --blockquote-cite-style: normal;
+
   background-color: var(--sb-color-violet-light-4);
 
   border-radius: 1.125rem;
 
+  @include utilities.allBelow('small') {
+    --blockquote-padding-bottom: 1.5rem;
+    --blockquote-quote-size: 2rem;
+    --blockquote-quote-padding: 4rem;
+
+    &.dnb-blockquote--top {
+      --blockquote-padding-top: 1rem;
+    }
+
+    &:not(.dnb-blockquote--top) {
+      --blockquote-padding-left: 1rem;
+    }
+  }
+
   &::before {
     filter: brightness(0) saturate(100%) invert(20%) sepia(99%)
       saturate(6711%) hue-rotate(265deg) brightness(71%) contrast(115%); // simulate the color #4e08bc - --sb-color-violet
@@ -16,14 +35,4 @@
         saturate(6079%) hue-rotate(204deg) brightness(78%) contrast(99%);
     }
   }
-
-  h1,
-  h2,
-  h3,
-  .dnb-h--xx-large,
-  .dnb-h--large,
-  .dnb-h--medium,
-  .dnb-lead {
-    color: var(--sb-color-text);
-  }
 }

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

@@ -14,6 +14,7 @@
 // Headings
 @include typography.headingClasses() {
   color: var(--sb-color-text);
+  font-variant-ligatures: none;
 }
 
 @include typography.typographySelectors() {

package/es/extensions/forms/DataContext/At.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { ComponentProps } from '../component-types';
+import type { ComponentProps } from '../types';
 export type Props = ComponentProps & {
     /** JSON Pointer for where in the source dataset to point at in sub components */
     path?: string;

package/es/extensions/forms/DataContext/At.js.map

@@ -1 +1 @@
-{"version":3,"file":"At.js","names":["React","useContext","useMemo","pointer","Context","At","props","path","iterate","children","dataContext","data","contextData","handlePathChange","contextHandlePathChange","has","get","undefined","changePath","value","Array","isArray","createElement","Fragment","map","element","i","Provider","key","_objectSpread","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/DataContext/At.tsx"],"sourcesContent":["import React, { useContext, useMemo } from 'react'\nimport pointer from 'json-pointer'\nimport type { ComponentProps } from '../component-types'\nimport Context from './Context'\n\nexport type Props = ComponentProps & {\n  /** JSON Pointer for where in the source dataset to point at in sub components */\n  path?: string\n  iterate?: boolean\n  children?: React.ReactNode\n}\n\nfunction At(props: Props) {\n  const { path = '/', iterate, children } = props\n  const dataContext = useContext(Context)\n  const { data: contextData, handlePathChange: contextHandlePathChange } =\n    dataContext\n\n  const data =\n    contextData && pointer.has(contextData, path)\n      ? pointer.get(contextData, path)\n      : undefined\n\n  const handlePathChange = useMemo(\n    () =>\n      contextHandlePathChange\n        ? (changePath, value) => {\n            contextHandlePathChange(`${path}${changePath}`, value)\n          }\n        : undefined,\n    [contextHandlePathChange, path]\n  )\n\n  if (iterate) {\n    if (!Array.isArray(data)) {\n      return null\n    }\n    return (\n      <>\n        {data.map((element, i) => {\n          const handlePathChange = contextHandlePathChange\n            ? (changePath, value) => {\n                contextHandlePathChange(`${path}/${i}${changePath}`, value)\n              }\n            : undefined\n\n          return (\n            <Context.Provider\n              key={`element${i}`}\n              value={{\n                ...dataContext,\n                data: element,\n                handlePathChange,\n              }}\n            >\n              {children}\n            </Context.Provider>\n          )\n        })}\n      </>\n    )\n  }\n\n  return (\n    <Context.Provider\n      value={{\n        ...dataContext,\n        data,\n        handlePathChange,\n      }}\n    >\n      {children}\n    </Context.Provider>\n  )\n}\n\nAt._supportsEufemiaSpacingProps = true\nexport default At\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAClD,OAAOC,OAAO,MAAM,cAAc;AAElC,OAAOC,OAAO,MAAM,WAAW;AAS/B,SAASC,EAAEA,CAACC,KAAY,EAAE;EACxB,MAAM;IAAEC,IAAI,GAAG,GAAG;IAAEC,OAAO;IAAEC;EAAS,CAAC,GAAGH,KAAK;EAC/C,MAAMI,WAAW,GAAGT,UAAU,CAACG,OAAO,CAAC;EACvC,MAAM;IAAEO,IAAI,EAAEC,WAAW;IAAEC,gBAAgB,EAAEC;EAAwB,CAAC,GACpEJ,WAAW;EAEb,MAAMC,IAAI,GACRC,WAAW,IAAIT,OAAO,CAACY,GAAG,CAACH,WAAW,EAAEL,IAAI,CAAC,GACzCJ,OAAO,CAACa,GAAG,CAACJ,WAAW,EAAEL,IAAI,CAAC,GAC9BU,SAAS;EAEf,MAAMJ,gBAAgB,GAAGX,OAAO,CAC9B,MACEY,uBAAuB,GACnB,CAACI,UAAU,EAAEC,KAAK,KAAK;IACrBL,uBAAuB,CAAE,GAAEP,IAAK,GAAEW,UAAW,EAAC,EAAEC,KAAK,CAAC;EACxD,CAAC,GACDF,SAAS,EACf,CAACH,uBAAuB,EAAEP,IAAI,CAChC,CAAC;EAED,IAAIC,OAAO,EAAE;IACX,IAAI,CAACY,KAAK,CAACC,OAAO,CAACV,IAAI,CAAC,EAAE;MACxB,OAAO,IAAI;IACb;IACA,OACEX,KAAA,CAAAsB,aAAA,CAAAtB,KAAA,CAAAuB,QAAA,QACGZ,IAAI,CAACa,GAAG,CAAC,CAACC,OAAO,EAAEC,CAAC,KAAK;MACxB,MAAMb,gBAAgB,GAAGC,uBAAuB,GAC5C,CAACI,UAAU,EAAEC,KAAK,KAAK;QACrBL,uBAAuB,CAAE,GAAEP,IAAK,IAAGmB,CAAE,GAAER,UAAW,EAAC,EAAEC,KAAK,CAAC;MAC7D,CAAC,GACDF,SAAS;MAEb,OACEjB,KAAA,CAAAsB,aAAA,CAAClB,OAAO,CAACuB,QAAQ;QACfC,GAAG,EAAG,UAASF,CAAE,EAAE;QACnBP,KAAK,EAAAU,aAAA,CAAAA,aAAA,KACAnB,WAAW;UACdC,IAAI,EAAEc,OAAO;UACbZ;QAAgB;MAChB,GAEDJ,QACe,CAAC;IAEvB,CAAC,CACD,CAAC;EAEP;EAEA,OACET,KAAA,CAAAsB,aAAA,CAAClB,OAAO,CAACuB,QAAQ;IACfR,KAAK,EAAAU,aAAA,CAAAA,aAAA,KACAnB,WAAW;MACdC,IAAI;MACJE;IAAgB;EAChB,GAEDJ,QACe,CAAC;AAEvB;AAEAJ,EAAE,CAACyB,4BAA4B,GAAG,IAAI;AACtC,eAAezB,EAAE"}
+{"version":3,"file":"At.js","names":["React","useContext","useMemo","pointer","Context","At","props","path","iterate","children","dataContext","data","contextData","handlePathChange","contextHandlePathChange","has","get","undefined","changePath","value","Array","isArray","createElement","Fragment","map","element","i","Provider","key","_objectSpread","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/DataContext/At.tsx"],"sourcesContent":["import React, { useContext, useMemo } from 'react'\nimport pointer from 'json-pointer'\nimport type { ComponentProps } from '../types'\nimport Context from './Context'\n\nexport type Props = ComponentProps & {\n  /** JSON Pointer for where in the source dataset to point at in sub components */\n  path?: string\n  iterate?: boolean\n  children?: React.ReactNode\n}\n\nfunction At(props: Props) {\n  const { path = '/', iterate, children } = props\n  const dataContext = useContext(Context)\n  const { data: contextData, handlePathChange: contextHandlePathChange } =\n    dataContext\n\n  const data =\n    contextData && pointer.has(contextData, path)\n      ? pointer.get(contextData, path)\n      : undefined\n\n  const handlePathChange = useMemo(\n    () =>\n      contextHandlePathChange\n        ? (changePath, value) => {\n            contextHandlePathChange(`${path}${changePath}`, value)\n          }\n        : undefined,\n    [contextHandlePathChange, path]\n  )\n\n  if (iterate) {\n    if (!Array.isArray(data)) {\n      return null\n    }\n    return (\n      <>\n        {data.map((element, i) => {\n          const handlePathChange = contextHandlePathChange\n            ? (changePath, value) => {\n                contextHandlePathChange(`${path}/${i}${changePath}`, value)\n              }\n            : undefined\n\n          return (\n            <Context.Provider\n              key={`element${i}`}\n              value={{\n                ...dataContext,\n                data: element,\n                handlePathChange,\n              }}\n            >\n              {children}\n            </Context.Provider>\n          )\n        })}\n      </>\n    )\n  }\n\n  return (\n    <Context.Provider\n      value={{\n        ...dataContext,\n        data,\n        handlePathChange,\n      }}\n    >\n      {children}\n    </Context.Provider>\n  )\n}\n\nAt._supportsEufemiaSpacingProps = true\nexport default At\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAClD,OAAOC,OAAO,MAAM,cAAc;AAElC,OAAOC,OAAO,MAAM,WAAW;AAS/B,SAASC,EAAEA,CAACC,KAAY,EAAE;EACxB,MAAM;IAAEC,IAAI,GAAG,GAAG;IAAEC,OAAO;IAAEC;EAAS,CAAC,GAAGH,KAAK;EAC/C,MAAMI,WAAW,GAAGT,UAAU,CAACG,OAAO,CAAC;EACvC,MAAM;IAAEO,IAAI,EAAEC,WAAW;IAAEC,gBAAgB,EAAEC;EAAwB,CAAC,GACpEJ,WAAW;EAEb,MAAMC,IAAI,GACRC,WAAW,IAAIT,OAAO,CAACY,GAAG,CAACH,WAAW,EAAEL,IAAI,CAAC,GACzCJ,OAAO,CAACa,GAAG,CAACJ,WAAW,EAAEL,IAAI,CAAC,GAC9BU,SAAS;EAEf,MAAMJ,gBAAgB,GAAGX,OAAO,CAC9B,MACEY,uBAAuB,GACnB,CAACI,UAAU,EAAEC,KAAK,KAAK;IACrBL,uBAAuB,CAAE,GAAEP,IAAK,GAAEW,UAAW,EAAC,EAAEC,KAAK,CAAC;EACxD,CAAC,GACDF,SAAS,EACf,CAACH,uBAAuB,EAAEP,IAAI,CAChC,CAAC;EAED,IAAIC,OAAO,EAAE;IACX,IAAI,CAACY,KAAK,CAACC,OAAO,CAACV,IAAI,CAAC,EAAE;MACxB,OAAO,IAAI;IACb;IACA,OACEX,KAAA,CAAAsB,aAAA,CAAAtB,KAAA,CAAAuB,QAAA,QACGZ,IAAI,CAACa,GAAG,CAAC,CAACC,OAAO,EAAEC,CAAC,KAAK;MACxB,MAAMb,gBAAgB,GAAGC,uBAAuB,GAC5C,CAACI,UAAU,EAAEC,KAAK,KAAK;QACrBL,uBAAuB,CAAE,GAAEP,IAAK,IAAGmB,CAAE,GAAER,UAAW,EAAC,EAAEC,KAAK,CAAC;MAC7D,CAAC,GACDF,SAAS;MAEb,OACEjB,KAAA,CAAAsB,aAAA,CAAClB,OAAO,CAACuB,QAAQ;QACfC,GAAG,EAAG,UAASF,CAAE,EAAE;QACnBP,KAAK,EAAAU,aAAA,CAAAA,aAAA,KACAnB,WAAW;UACdC,IAAI,EAAEc,OAAO;UACbZ;QAAgB;MAChB,GAEDJ,QACe,CAAC;IAEvB,CAAC,CACD,CAAC;EAEP;EAEA,OACET,KAAA,CAAAsB,aAAA,CAAClB,OAAO,CAACuB,QAAQ;IACfR,KAAK,EAAAU,aAAA,CAAAA,aAAA,KACAnB,WAAW;MACdC,IAAI;MACJE;IAAgB;EAChB,GAEDJ,QACe,CAAC;AAEvB;AAEAJ,EAAE,CAACyB,4BAA4B,GAAG,IAAI;AACtC,eAAezB,EAAE"}

package/es/extensions/forms/DataContext/Context.d.ts

@@ -13,6 +13,7 @@ export interface ContextState {
     handleUnMountField: (path: string) => void;
     setPathWithError: (path: string, hasError: boolean) => void;
     hasErrors: () => boolean;
+    _isInsideFormElement?: boolean;
 }
 export declare const defaultContextState: ContextState;
 declare const Context: React.Context<ContextState>;

package/es/extensions/forms/DataContext/Context.js

@@ -9,7 +9,8 @@ export const defaultContextState = {
   handleMountField: () => null,
   handleUnMountField: () => null,
   hasErrors: () => false,
-  setPathWithError: () => null
+  setPathWithError: () => null,
+  _isInsideFormElement: false
 };
 const Context = React.createContext(defaultContextState);
 export default Context;

package/es/extensions/forms/DataContext/Context.js.map

@@ -1 +1 @@
-{"version":3,"file":"Context.js","names":["React","defaultContextState","data","undefined","handlePathChange","handleSubmit","showAllErrors","setShowAllErrors","mountedFieldPaths","handleMountField","handleUnMountField","hasErrors","setPathWithError","Context","createContext"],"sources":["../../../../../src/extensions/forms/DataContext/Context.ts"],"sourcesContent":["import React from 'react'\n\nexport interface ContextState {\n  /** The dataset for the form / form steps */\n  data: any\n  /** Should the form validate data before submitting? */\n  errors?: Record<string, Error>\n  handlePathChange: (path: string, value: any) => void\n  handleSubmit: () => any\n  // Error status\n  showAllErrors: boolean\n  setShowAllErrors: (showAllErrors: boolean) => void\n  // Mounted fields - Components telling the provider what fields is on screen at any time\n  mountedFieldPaths: string[]\n  handleMountField: (path: string) => void\n  handleUnMountField: (path: string) => void\n  setPathWithError: (path: string, hasError: boolean) => void\n  hasErrors: () => boolean\n}\n\nexport const defaultContextState: ContextState = {\n  data: undefined,\n  handlePathChange: () => null,\n  handleSubmit: () => null,\n  showAllErrors: false,\n  setShowAllErrors: () => null,\n  mountedFieldPaths: [],\n  handleMountField: () => null,\n  handleUnMountField: () => null,\n  hasErrors: () => false,\n  setPathWithError: () => null,\n}\n\nconst Context = React.createContext<ContextState>(defaultContextState)\n\nexport default Context\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAoBzB,OAAO,MAAMC,mBAAiC,GAAG;EAC/CC,IAAI,EAAEC,SAAS;EACfC,gBAAgB,EAAEA,CAAA,KAAM,IAAI;EAC5BC,YAAY,EAAEA,CAAA,KAAM,IAAI;EACxBC,aAAa,EAAE,KAAK;EACpBC,gBAAgB,EAAEA,CAAA,KAAM,IAAI;EAC5BC,iBAAiB,EAAE,EAAE;EACrBC,gBAAgB,EAAEA,CAAA,KAAM,IAAI;EAC5BC,kBAAkB,EAAEA,CAAA,KAAM,IAAI;EAC9BC,SAAS,EAAEA,CAAA,KAAM,KAAK;EACtBC,gBAAgB,EAAEA,CAAA,KAAM;AAC1B,CAAC;AAED,MAAMC,OAAO,GAAGb,KAAK,CAACc,aAAa,CAAeb,mBAAmB,CAAC;AAEtE,eAAeY,OAAO"}
+{"version":3,"file":"Context.js","names":["React","defaultContextState","data","undefined","handlePathChange","handleSubmit","showAllErrors","setShowAllErrors","mountedFieldPaths","handleMountField","handleUnMountField","hasErrors","setPathWithError","_isInsideFormElement","Context","createContext"],"sources":["../../../../../src/extensions/forms/DataContext/Context.ts"],"sourcesContent":["import React from 'react'\n\nexport interface ContextState {\n  /** The dataset for the form / form steps */\n  data: any\n  /** Should the form validate data before submitting? */\n  errors?: Record<string, Error>\n  handlePathChange: (path: string, value: any) => void\n  handleSubmit: () => any\n  // Error status\n  showAllErrors: boolean\n  setShowAllErrors: (showAllErrors: boolean) => void\n  // Mounted fields - Components telling the provider what fields is on screen at any time\n  mountedFieldPaths: string[]\n  handleMountField: (path: string) => void\n  handleUnMountField: (path: string) => void\n  setPathWithError: (path: string, hasError: boolean) => void\n  hasErrors: () => boolean\n  _isInsideFormElement?: boolean\n}\n\nexport const defaultContextState: ContextState = {\n  data: undefined,\n  handlePathChange: () => null,\n  handleSubmit: () => null,\n  showAllErrors: false,\n  setShowAllErrors: () => null,\n  mountedFieldPaths: [],\n  handleMountField: () => null,\n  handleUnMountField: () => null,\n  hasErrors: () => false,\n  setPathWithError: () => null,\n  _isInsideFormElement: false,\n}\n\nconst Context = React.createContext<ContextState>(defaultContextState)\n\nexport default Context\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAqBzB,OAAO,MAAMC,mBAAiC,GAAG;EAC/CC,IAAI,EAAEC,SAAS;EACfC,gBAAgB,EAAEA,CAAA,KAAM,IAAI;EAC5BC,YAAY,EAAEA,CAAA,KAAM,IAAI;EACxBC,aAAa,EAAE,KAAK;EACpBC,gBAAgB,EAAEA,CAAA,KAAM,IAAI;EAC5BC,iBAAiB,EAAE,EAAE;EACrBC,gBAAgB,EAAEA,CAAA,KAAM,IAAI;EAC5BC,kBAAkB,EAAEA,CAAA,KAAM,IAAI;EAC9BC,SAAS,EAAEA,CAAA,KAAM,KAAK;EACtBC,gBAAgB,EAAEA,CAAA,KAAM,IAAI;EAC5BC,oBAAoB,EAAE;AACxB,CAAC;AAED,MAAMC,OAAO,GAAGd,KAAK,CAACe,aAAa,CAAed,mBAAmB,CAAC;AAEtE,eAAea,OAAO"}

package/es/extensions/forms/DataContext/Provider.js

@@ -2,6 +2,7 @@ import React, { useEffect, useRef, useMemo, useCallback, useState } from 'react'
 import pointer from 'json-pointer';
 import ajv, { ajvErrorsToFormErrors } from '../utils/ajv';
 import Context from './Context';
+import structuredClone from '@ungap/structured-clone';
 function addListPath(paths, path) {
   return paths.includes(path) ? paths : paths.concat(path);
 }
@@ -46,9 +47,12 @@ export default function Provider({
     pathsWithErrorRef.current = hasError ? addListPath(pathsWithErrorRef.current, path) : removeListPath(pathsWithErrorRef.current, path);
   }, []);
   const handlePathChange = useCallback((path, value) => {
+    if (!path) {
+      return;
+    }
     onPathChange === null || onPathChange === void 0 ? void 0 : onPathChange(path, value);
-    const newData = structuredClone(internalData);
-    if (path) {
+    const newData = structuredClone(path === '/' ? value : internalData);
+    if (path !== '/') {
       pointer.set(newData, path, value);
     }
     onChange === null || onChange === void 0 ? void 0 : onChange(newData);
@@ -67,7 +71,7 @@ export default function Provider({
       onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(internalData);
       if (scrollTopOnSubmit) {
         var _window;
-        window && ((_window = window) === null || _window === void 0 ? void 0 : _window.scrollTo({
+        typeof window !== 'undefined' && ((_window = window) === null || _window === void 0 ? void 0 : _window.scrollTo({
           top: 0,
           behavior: 'smooth'
         }));