@dnb/eufemia 10.4.2 → 10.6.0

package/cjs/style/themes/theme-ui/ui-theme-components.css

@@ -639,7 +639,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;
@@ -647,27 +647,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:hover, .dnb-anchor:active {
+.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 {
   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 {
@@ -724,6 +733,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);
@@ -731,11 +742,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;
 }
 
@@ -760,7 +767,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;
 }
 
@@ -3638,6 +3649,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 */
@@ -4105,13 +4121,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;
@@ -7016,6 +7025,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);
@@ -7057,6 +7067,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;
@@ -7067,6 +7104,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;
@@ -7084,8 +7124,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;
@@ -7697,7 +7744,7 @@ html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined.dnb-accordio
 .dnb-anchor {
   color: var(--color-sea-green);
 }
-.dnb-anchor:hover, .dnb-anchor:active {
+.dnb-anchor:hover {
   color: var(--color-sea-green);
   box-shadow: inset 100vw 100vw 0 0 var(--color-mint-green-50), -0.125em 0 0 0 var(--color-mint-green-50), 0.125em 0 0 0 var(--color-mint-green-50);
 }
@@ -7705,7 +7752,10 @@ html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined.dnb-accordio
   color: var(--color-mint-green);
   box-shadow: inset 100vw 100vw 0 0 var(--color-emerald-green), -0.125em 0 0 0 var(--color-emerald-green), 0.125em 0 0 0 var(--color-emerald-green);
 }
-.dnb-anchor:focus:not(:active) {
+.dnb-anchor.focus-visible {
+  color: var(--color-sea-green);
+}
+.dnb-anchor:focus-visible {
   color: var(--color-sea-green);
 }
 
@@ -7719,28 +7769,35 @@ html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined.dnb-accordio
   box-shadow: inset 100vw 100vw 0 0 var(--color-emerald-green), -0.125em 0 0 0 var(--color-emerald-green), 0.125em 0 0 0 var(--color-emerald-green);
 }
 
-.dnb-anchor--focus:not(:active) {
+.dnb-anchor--focus {
   color: var(--color-sea-green);
 }
 
 .dnb-anchor--contrast {
   color: var(--color-white);
 }
-.dnb-anchor--contrast:hover, .dnb-anchor--contrast:active {
+.dnb-anchor--contrast:hover {
   color: var(--color-emerald-green);
-  background-color: var(--color-white);
-  text-decoration: none;
+  box-shadow: inset 100vw 100vw 0 0 var(--color-white), -0.125em 0 0 0 var(--color-white), 0.125em 0 0 0 var(--color-white);
 }
 .dnb-anchor--contrast:active {
-  color: var(--color-emerald-green);
-  background-color: var(--color-white);
+  color: var(--color-white);
+  background-color: transparent;
+  box-shadow: inset 100vw 100vw 0 0 transparent, -0.125em 0 0 0 transparent, 0.125em 0 0 0 transparent;
 }
-.dnb-anchor--contrast:not(:disabled):focus {
+.dnb-anchor--contrast.focus-visible {
   color: var(--color-white);
   background-color: transparent;
   outline: none;
+  --border-color: var(--color-white);
+  --border-width: var(--focus-ring-width);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
 }
-html[data-whatinput=keyboard] .dnb-anchor--contrast:not(:disabled):focus {
+.dnb-anchor--contrast:focus-visible {
+  color: var(--color-white);
+  background-color: transparent;
+  outline: none;
   --border-color: var(--color-white);
   --border-width: var(--focus-ring-width);
   box-shadow: 0 0 0 var(--border-width) var(--border-color);
@@ -9187,21 +9244,28 @@ html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):focus ~ .dnb-rad
 .dnb-section--fire-red .dnb-anchor, .dnb-section--emerald-green .dnb-anchor, .dnb-section--sea-green .dnb-anchor {
   color: var(--color-white);
 }
-.dnb-section--fire-red .dnb-anchor:hover, .dnb-section--fire-red .dnb-anchor:active, .dnb-section--emerald-green .dnb-anchor:hover, .dnb-section--emerald-green .dnb-anchor:active, .dnb-section--sea-green .dnb-anchor:hover, .dnb-section--sea-green .dnb-anchor:active {
+.dnb-section--fire-red .dnb-anchor:hover, .dnb-section--emerald-green .dnb-anchor:hover, .dnb-section--sea-green .dnb-anchor:hover {
   color: var(--color-emerald-green);
-  background-color: var(--color-white);
-  text-decoration: none;
+  box-shadow: inset 100vw 100vw 0 0 var(--color-white), -0.125em 0 0 0 var(--color-white), 0.125em 0 0 0 var(--color-white);
 }
 .dnb-section--fire-red .dnb-anchor:active, .dnb-section--emerald-green .dnb-anchor:active, .dnb-section--sea-green .dnb-anchor:active {
-  color: var(--color-emerald-green);
-  background-color: var(--color-white);
+  color: var(--color-white);
+  background-color: transparent;
+  box-shadow: inset 100vw 100vw 0 0 transparent, -0.125em 0 0 0 transparent, 0.125em 0 0 0 transparent;
 }
-.dnb-section--fire-red .dnb-anchor:not(:disabled):focus, .dnb-section--emerald-green .dnb-anchor:not(:disabled):focus, .dnb-section--sea-green .dnb-anchor:not(:disabled):focus {
+.dnb-section--fire-red .dnb-anchor.focus-visible, .dnb-section--emerald-green .dnb-anchor.focus-visible, .dnb-section--sea-green .dnb-anchor.focus-visible {
   color: var(--color-white);
   background-color: transparent;
   outline: none;
+  --border-color: var(--color-white);
+  --border-width: var(--focus-ring-width);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
 }
-html[data-whatinput=keyboard] .dnb-section--fire-red .dnb-anchor:not(:disabled):focus, html[data-whatinput=keyboard] .dnb-section--emerald-green .dnb-anchor:not(:disabled):focus, html[data-whatinput=keyboard] .dnb-section--sea-green .dnb-anchor:not(:disabled):focus {
+.dnb-section--fire-red .dnb-anchor:focus-visible, .dnb-section--emerald-green .dnb-anchor:focus-visible, .dnb-section--sea-green .dnb-anchor:focus-visible {
+  color: var(--color-white);
+  background-color: transparent;
+  outline: none;
   --border-color: var(--color-white);
   --border-width: var(--focus-ring-width);
   box-shadow: 0 0 0 var(--border-width) var(--border-color);
@@ -9772,63 +9836,25 @@ html[data-whatinput=keyboard] .dnb-tabs__button:focus::before {
 /*
  * Utilities
  */
-.dnb-textarea {
-  --textarea-rows: 2;
-}
 .dnb-textarea__textarea {
   color: var(--color-black);
   background-color: var(--color-white);
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  -webkit-overflow-scrolling: touch;
-  -ms-overflow-style: auto;
-  scrollbar-color: var(--scrollbar-thumb-color, #888) transparent;
 }
 .dnb-textarea__textarea ::selection {
   background-color: var(--color-mint-green);
   color: var(--color-black);
   text-shadow: none;
 }
-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 {
   color: var(--color-black-55);
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: var(--textarea-rows, 2);
 }
 .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):focus ~ .dnb-textarea__state, .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover ~ .dnb-textarea__state {
   box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
 }
 .dnb-textarea--disabled .dnb-textarea__textarea, .dnb-textarea__textarea[disabled] {
-  -webkit-user-select: none;
-          user-select: none;
   color: var(--color-black-55);
   background-color: var(--color-black-3);
 }
-.dnb-textarea--disabled .dnb-textarea__textarea::-webkit-scrollbar, .dnb-textarea__textarea[disabled]::-webkit-scrollbar {
-  width: 0;
-}
 .dnb-textarea--disabled .dnb-textarea__state, .dnb-textarea__textarea[disabled] ~ .dnb-textarea__state {
   box-shadow: 0 0 0 0.0625rem var(--color-black-55);
   background-color: var(--color-black-3);
@@ -9848,9 +9874,6 @@ html:not([data-visual-test]) .dnb-textarea__textarea {
   box-shadow: 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
 }
-.dnb-textarea--has-content .dnb-textarea__textarea ~ .dnb-textarea__placeholder, .dnb-textarea--focus .dnb-textarea__textarea:not([disabled]):not([readonly]) ~ .dnb-textarea__placeholder {
-  display: none;
-}
 
 /*
 * Timeline theme