@dnb/eufemia 10.4.2 → 10.6.0

package/es/style/core/utilities.scss

@@ -31,6 +31,19 @@
     }
   }
 }
+
+@mixin focus-visible() {
+  html:not([data-whatintent='touch']) &:focus-visible {
+    &[disabled] {
+      cursor: not-allowed;
+    }
+    // stylelint-disable-next-line
+    &:not([disabled]) {
+      @content;
+    }
+  }
+}
+
 @mixin focus() {
   &:focus,
   html:not([data-whatintent='touch']) &:focus {
@@ -55,7 +68,12 @@
   }
 }
 
-@mixin focusRing($whatinput: null, $color: null, $inset: null) {
+@mixin focusRing(
+  $whatinput: null,
+  $color: null,
+  $inset: null,
+  $extendShadow: null
+) {
   outline: none;
 
   @if $whatinput == null {
@@ -66,23 +84,33 @@
   }
 
   @if $whatinput == 'always' {
-    @include fakeBorder($color, var(--focus-ring-width), $inset);
+    @include fakeBorder(
+      $color,
+      var(--focus-ring-width),
+      $inset,
+      $extendShadow: $extendShadow
+    );
   } @else {
     @include whatInput($whatinput) {
-      @include fakeBorder($color, var(--focus-ring-width), $inset);
+      @include fakeBorder(
+        $color,
+        var(--focus-ring-width),
+        $inset,
+        $extendShadow: $extendShadow
+      );
     }
   }
 }
 
-@mixin removeFocusRing($whatinput: null) {
+@mixin removeFocusRing($whatinput: null, $replace: none) {
   outline: initial;
 
   @if $whatinput == null {
-    box-shadow: none;
+    box-shadow: $replace;
   }
 
   html[data-whatinput='#{$whatinput}'] & {
-    box-shadow: none;
+    box-shadow: $replace;
   }
 }
 
@@ -90,7 +118,8 @@
   $color: null,
   $width: null /* 1px */,
   $inset: null,
-  $important: null
+  $important: null,
+  $extendShadow: null
 ) {
   @if $width == null {
     $width: 0.0625rem;
@@ -102,7 +131,10 @@
   // we use !important, cause we have no changes to select the selctor right
   // in some cases we have another state where we use box-shadow
   // but with important, we take care of that we actually can use use it
-  box-shadow: $inset 0 0 0 var(--border-width) var(--border-color)
+  box-shadow: (
+      $inset 0 0 0 var(--border-width) var(--border-color),
+      $extendShadow
+    )
     $important;
 
   @if $color != null {

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

@@ -635,7 +635,7 @@ button.dnb-anchor {
   text-decoration-thickness: var(--anchor-underline-thickness);
   text-underline-offset: 0.25em;
   border-radius: 0;
-  transition: box-shadow 200ms ease-in-out, border-radius 200ms ease-in-out;
+  transition: box-shadow 200ms ease-in-out, border-radius 200ms ease-in-out, background 200ms ease-in-out;
 }
 sup .dnb-anchor, sub .dnb-anchor {
   padding: 0 0.025em;
@@ -643,27 +643,36 @@ sup .dnb-anchor, sub .dnb-anchor {
 .dnb-p .dnb-anchor, .dnb-lead .dnb-anchor, .dnb-h--xx-large .dnb-anchor, .dnb-h--x-large .dnb-anchor, .dnb-h--large .dnb-anchor, .dnb-h--medium .dnb-anchor, .dnb-h--basis .dnb-anchor, .dnb-h--small .dnb-anchor, .dnb-h--x-small .dnb-anchor {
   font-size: inherit;
 }
-.dnb-anchor:focus {
+.dnb-anchor.focus-visible {
+  background-color: transparent;
+  transition: none;
   outline: none;
+  --border-color: var(--focus-ring-color);
+  --border-width: var(--focus-ring-width);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
   border-radius: 0.25em;
 }
-.dnb-anchor:focus:not(:active) {
+.dnb-anchor:focus-visible {
   background-color: transparent;
   transition: none;
-}
-.dnb-anchor:focus:not(:active), .dnb-section .dnb-anchor:focus:not(:active).dnb-anchor {
-  text-decoration: none;
-}
-html[data-whatinput=keyboard] .dnb-anchor:focus {
+  outline: none;
   --border-color: var(--focus-ring-color);
   --border-width: var(--focus-ring-width);
   box-shadow: 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
+  border-radius: 0.25em;
+}
+.dnb-anchor.focus-visible, .dnb-section .dnb-anchor.focus-visible.dnb-anchor {
+  text-decoration: none;
+}
+.dnb-anchor:focus-visible, .dnb-section .dnb-anchor:focus-visible.dnb-anchor {
+  text-decoration: none;
 }
-.dnb-anchor:hover, .dnb-anchor:active {
+.dnb-anchor:hover {
   border-radius: 0.25em;
 }
-.dnb-anchor:hover, .dnb-section .dnb-anchor:hover.dnb-anchor, .dnb-anchor:active, .dnb-section .dnb-anchor:active.dnb-anchor {
+.dnb-anchor:hover, .dnb-section .dnb-anchor:hover.dnb-anchor {
   text-decoration: none;
 }
 .dnb-anchor:active {
@@ -720,6 +729,8 @@ html[data-whatinput=keyboard] .dnb-anchor:focus {
 }
 
 .dnb-anchor--focus {
+  background-color: transparent;
+  transition: none;
   outline: none;
   --border-color: var(--focus-ring-color);
   --border-width: var(--focus-ring-width);
@@ -727,11 +738,7 @@ html[data-whatinput=keyboard] .dnb-anchor:focus {
   border-color: transparent;
   border-radius: 0.25em;
 }
-.dnb-anchor--focus:not(:active) {
-  background-color: transparent;
-  transition: none;
-}
-.dnb-anchor--focus:not(:active), .dnb-section .dnb-anchor--focus:not(:active).dnb-anchor {
+.dnb-anchor--focus, .dnb-section .dnb-anchor--focus.dnb-anchor {
   text-decoration: none;
 }
 
@@ -756,7 +763,11 @@ html[data-whatinput=keyboard] .dnb-anchor:focus {
   background-color: transparent;
 }
 
-.dnb-anchor--no-radius, .dnb-anchor--no-radius:hover, .dnb-anchor--no-radius:active, .dnb-anchor--no-radius:focus {
+.dnb-anchor--no-radius, .dnb-anchor--no-radius:hover, .dnb-anchor--no-radius:active, .dnb-anchor--no-radius.focus-visible {
+  border-radius: 0;
+}
+
+.dnb-anchor--no-radius, .dnb-anchor--no-radius:hover, .dnb-anchor--no-radius:active, .dnb-anchor--no-radius:focus-visible {
   border-radius: 0;
 }
 
@@ -3634,6 +3645,11 @@ p > .dnb-icon {
   margin-left: calc(0px - var(--input-height));
   line-height: var(--line-height-basis);
 }
+.dnb-input__submit-element .dnb-button--input-button {
+  width: var(--input-height);
+  height: var(--input-height);
+  line-height: var(--input-height);
+}
 .dnb-input__submit-button {
   position: relative;
   align-self: center; /* IE needs this to stay centered */
@@ -4101,13 +4117,6 @@ html[data-visual-test] .dnb-modal__overlay, .dnb-modal__overlay--no-animation {
 /*
  * Utilities
  */
-/*
- * Anchor mixins
- *
- */
-/*
- * Utilities
- */
 .dnb-number-format {
   display: inline-block;
   position: relative;
@@ -7012,6 +7021,7 @@ html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover:not([disa
  */
 .dnb-textarea {
   --textarea-padding-width: 0.5rem;
+  --textarea-rows: 2;
   display: inline-flex;
   font-size: var(--font-size-small);
   line-height: var(--line-height-basis);
@@ -7053,6 +7063,33 @@ html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover:not([disa
   outline: none;
   font-size: var(--font-size-basis);
   line-height: var(--line-height-basis);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
+  -ms-overflow-style: auto;
+  scrollbar-color: var(--scrollbar-thumb-color, #888) transparent;
+}
+html:not([data-visual-test]) .dnb-textarea__textarea {
+  scroll-behavior: smooth;
+}
+@supports not (scrollbar-color: auto) {
+  .dnb-textarea__textarea::-webkit-scrollbar {
+    border-radius: var(--scrollbar-thumb-width, 0.5rem);
+    background-color: var(--scrollbar-track-color, #eee);
+  }
+  .dnb-textarea__textarea::-webkit-scrollbar:vertical {
+    width: var(--scrollbar-track-width, 0.5rem);
+  }
+  .dnb-textarea__textarea::-webkit-scrollbar:horizontal {
+    height: var(--scrollbar-track-width, 0.5rem);
+  }
+  .dnb-textarea__textarea::-webkit-scrollbar-thumb {
+    background-color: var(--scrollbar-thumb-color, #888);
+    border-radius: var(--scrollbar-thumb-width, 0.5rem);
+  }
+  .dnb-textarea__textarea::-webkit-scrollbar-thumb:hover {
+    background-color: var(--scrollbar-thumb-hover-color, #666);
+  }
 }
 .dnb-textarea__placeholder {
   pointer-events: none;
@@ -7063,6 +7100,9 @@ html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover:not([disa
   overflow: hidden;
   width: 100%;
   height: 100%;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--textarea-rows, 2);
   cursor: auto;
   border: none;
   margin: 0;
@@ -7080,8 +7120,15 @@ html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover:not([disa
 .dnb-textarea__autoresize .dnb-textarea__textarea {
   resize: none;
 }
+.dnb-textarea--disabled .dnb-textarea__textarea, .dnb-textarea__textarea[disabled] {
+  -webkit-user-select: none;
+          user-select: none;
+}
+.dnb-textarea--disabled .dnb-textarea__textarea::-webkit-scrollbar, .dnb-textarea__textarea[disabled]::-webkit-scrollbar {
+  width: 0;
+}
 .dnb-textarea--has-content .dnb-textarea__textarea ~ .dnb-textarea__placeholder, .dnb-textarea--focus .dnb-textarea__textarea:not([disabled]):not([readonly]) ~ .dnb-textarea__placeholder {
-  opacity: 0.5;
+  display: none;
 }
 .dnb-textarea__inner > .dnb-form-status {
   order: 2;