@dnb/eufemia 9.12.3 → 9.12.4

package/esm/components/tabs/style/themes/dnb-tabs-theme-ui.css

@@ -0,0 +1,134 @@
+/*
+* Tabs theme
+*
+*/
+/**
+ * This file is only used to make themes independent
+ * so that they can get imported individually, without the core styles
+ *
+ */
+/*
+ * Utilities
+ */
+/*
+* Button mixins
+*
+*/
+.dnb-tabs__tabs:not(.dnb-section)::before {
+  background-color: #ebebeb;
+  background-color: var(--color-black-8);
+  -webkit-box-shadow: 100vw 0 0 0 #ebebeb;
+          box-shadow: 100vw 0 0 0 #ebebeb;
+  -webkit-box-shadow: 100vw 0 0 0 var(--color-black-8);
+          box-shadow: 100vw 0 0 0 var(--color-black-8); }
+
+.dnb-tabs__tabs__tablist:focus {
+  border-radius: 0.5rem; }
+
+.dnb-tabs--at-edge .dnb-tabs__scroll-nav-button:first-of-type {
+  border-radius: 0 50% 50% 0; }
+
+.dnb-tabs--at-edge .dnb-tabs__scroll-nav-button:last-of-type {
+  border-radius: 50% 0 0 50%; }
+
+.dnb-tabs--at-edge .dnb-tabs__tabs__tablist:focus {
+  border-radius: 0; }
+
+.dnb-tabs__content:focus {
+  position: relative; }
+  .dnb-tabs__content:focus::after {
+    content: '';
+    position: absolute;
+    z-index: -1;
+    top: 0.125rem;
+    bottom: -0.5rem;
+    left: -0.5rem;
+    right: -0.5rem;
+    max-width: 100vw;
+    border-radius: 0.5rem;
+    outline: none; }
+    html[data-whatinput='keyboard'] .dnb-tabs__content:focus::after {
+      --border-color: var(--color-emerald-green);
+      -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
+              box-shadow: 0 0 0 0.125rem var(--border-color);
+      border-color: transparent; }
+      @media screen and (-ms-high-contrast: none) {
+        html[data-whatinput='keyboard'] .dnb-tabs__content:focus::after {
+          -webkit-box-shadow: 0 0 0 0.125rem #14555a;
+                  box-shadow: 0 0 0 0.125rem #14555a;
+          -webkit-box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
+                  box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } }
+
+.dnb-tabs__button__title {
+  font-weight: normal;
+  font-weight: var(--font-weight-regular);
+  font-size: 1.125rem;
+  font-size: var(--font-size-basis);
+  text-align: center;
+  color: #007272;
+  color: var(--color-sea-green); }
+
+html:not([data-whatintent='touch']) .dnb-tabs__button:hover[disabled] {
+  cursor: not-allowed; }
+
+html:not([data-whatintent='touch']) .dnb-tabs__button:hover:not([disabled]) {
+  background-color: #d2f0e9;
+  background-color: var(--color-mint-green-50); }
+  html:not([data-whatintent='touch']) .dnb-tabs__button:hover:not([disabled])::after {
+    height: 3px;
+    border-radius: 1.5px;
+    background-color: #007272;
+    background-color: var(--color-sea-green); }
+
+.dnb-tabs__button:focus::before {
+  content: '';
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: -0.5rem;
+  bottom: 0;
+  right: -0.5rem;
+  height: inherit;
+  border-radius: inherit;
+  outline: none; }
+  html[data-whatinput='keyboard'] .dnb-tabs__button:focus::before {
+    --border-color: var(--color-emerald-green);
+    -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
+            box-shadow: 0 0 0 0.125rem var(--border-color);
+    border-color: transparent; }
+    @media screen and (-ms-high-contrast: none) {
+      html[data-whatinput='keyboard'] .dnb-tabs__button:focus::before {
+        -webkit-box-shadow: 0 0 0 0.125rem #14555a;
+                box-shadow: 0 0 0 0.125rem #14555a;
+        -webkit-box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
+                box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } }
+
+.dnb-tabs__button:focus::before {
+  top: 2px;
+  bottom: 2px;
+  right: 0;
+  left: 0;
+  border-radius: 0.25rem; }
+
+.dnb-tabs__button[disabled] .dnb-tabs__button__title {
+  color: #b3dada;
+  color: var(--color-sea-green-30); }
+
+.dnb-tabs__button:not([disabled]):active::after, .dnb-tabs__button:not([disabled]).selected::after {
+  height: 3px;
+  border-radius: 1.5px;
+  background-color: #007272;
+  background-color: var(--color-sea-green); }
+
+.dnb-tabs__button:not([disabled]):active .dnb-tabs__button__title,
+.dnb-tabs__button:not([disabled]).selected .dnb-tabs__button__title {
+  color: #14555a;
+  color: var(--color-emerald-green); }
+
+.dnb-tabs__button:not([disabled]).selected .dnb-tabs__button__title {
+  font-weight: 500;
+  font-weight: var(--font-weight-medium); }
+
+.dnb-tabs__button span[hidden] {
+  font-weight: 500;
+  font-weight: var(--font-weight-medium); }

package/esm/components/textarea/style/_textarea.scss

@@ -44,7 +44,7 @@
 
   &__state {
     position: absolute;
-    z-index: -1;
+    z-index: 1;
     top: -0.5rem;
     left: -0.5rem;
     bottom: -0.5rem;
@@ -65,6 +65,8 @@
   }
 
   &__textarea {
+    position: relative;
+    z-index: 2;
     @include textareaStyleCommon();
   }
 
@@ -72,7 +74,7 @@
     pointer-events: none;
 
     position: absolute;
-    z-index: 1;
+    z-index: 3;
     top: 0;
     left: 0;
 

package/esm/components/textarea/style/dnb-textarea.css

@@ -484,7 +484,7 @@ legend.dnb-form-label {
     font-size: var(--font-size-basis); }
   .dnb-textarea__state {
     position: absolute;
-    z-index: -1;
+    z-index: 1;
     top: -0.5rem;
     left: -0.5rem;
     bottom: -0.5rem;
@@ -503,6 +503,8 @@ legend.dnb-form-label {
   .dnb-textarea__suffix {
     padding-left: 1.5rem; }
   .dnb-textarea__textarea {
+    position: relative;
+    z-index: 2;
     cursor: auto;
     border: none;
     margin: 0;
@@ -516,7 +518,7 @@ legend.dnb-form-label {
   .dnb-textarea__placeholder {
     pointer-events: none;
     position: absolute;
-    z-index: 1;
+    z-index: 3;
     top: 0;
     left: 0;
     overflow: hidden;

package/esm/components/textarea/style/themes/dnb-textarea-theme-ui.css

@@ -0,0 +1,113 @@
+/*
+* Textarea theme
+*
+*/
+/**
+ * This file is only used to make themes independent
+ * so that they can get imported individually, without the core styles
+ *
+ */
+/*
+ * Utilities
+ */
+:root {
+  --textarea-rows: 2; }
+
+.dnb-textarea__textarea {
+  color: #000;
+  color: var(--color-black);
+  background-color: #fff;
+  background-color: var(--color-white);
+  overflow-y: auto;
+  -ms-scroll-chaining: none;
+      overscroll-behavior: contain;
+  scrollbar-width: thin;
+  -webkit-overflow-scrolling: touch;
+  -ms-overflow-style: auto;
+  scrollbar-color: #14555a transparent;
+  scrollbar-color: var(--color-emerald-green) transparent; }
+  .dnb-textarea__textarea ::-moz-selection {
+    background-color: #a5e1d2;
+    background-color: var(--color-mint-green);
+    color: #000;
+    color: var(--color-black);
+    text-shadow: none; }
+  .dnb-textarea__textarea ::selection {
+    background-color: #a5e1d2;
+    background-color: var(--color-mint-green);
+    color: #000;
+    color: var(--color-black);
+    text-shadow: none; }
+  html:not([data-visual-test]) .dnb-textarea__textarea {
+    scroll-behavior: smooth; }
+  html[data-visual-test] .dnb-textarea__textarea {
+    scroll-behavior: auto !important; }
+
+.dnb-textarea__placeholder {
+  color: #737373;
+  color: var(--color-black-55);
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  -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 {
+  -webkit-box-shadow: 0 0 0 0.125rem #14555a;
+          box-shadow: 0 0 0 0.125rem #14555a;
+  -webkit-box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
+          box-shadow: 0 0 0 0.125rem var(--color-emerald-green); }
+
+.dnb-textarea--disabled .dnb-textarea__textarea, .dnb-textarea__textarea[disabled] {
+  -moz-user-select: none;
+   -ms-user-select: none;
+       user-select: none;
+  -webkit-user-select: none;
+  color: #737373;
+  color: var(--color-black-55);
+  background-color: #f8f8f8;
+  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 {
+  -webkit-box-shadow: 0 0 0 0.0625rem #737373;
+          box-shadow: 0 0 0 0.0625rem #737373;
+  -webkit-box-shadow: 0 0 0 0.0625rem var(--color-black-55);
+          box-shadow: 0 0 0 0.0625rem var(--color-black-55);
+  background-color: #f8f8f8;
+  background-color: var(--color-black-3); }
+
+.dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled),
+.dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover {
+  color: #dc2a2a;
+  color: var(--color-fire-red); }
+
+.dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled) ~ .dnb-textarea__state {
+  --border-color: var(--color-fire-red);
+  -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
+          box-shadow: 0 0 0 0.0625rem var(--border-color);
+  border-color: transparent; }
+  @media screen and (-ms-high-contrast: none) {
+    .dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled) ~ .dnb-textarea__state {
+      -webkit-box-shadow: 0 0 0 0.0625rem #dc2a2a;
+              box-shadow: 0 0 0 0.0625rem #dc2a2a;
+      -webkit-box-shadow: 0 0 0 0.0625rem var(--color-fire-red);
+              box-shadow: 0 0 0 0.0625rem var(--color-fire-red); } }
+
+.dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover ~ .dnb-textarea__state {
+  --border-color: var(--color-fire-red);
+  -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
+          box-shadow: 0 0 0 0.125rem var(--border-color);
+  border-color: transparent; }
+  @media screen and (-ms-high-contrast: none) {
+    .dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover ~ .dnb-textarea__state {
+      -webkit-box-shadow: 0 0 0 0.125rem #dc2a2a;
+              box-shadow: 0 0 0 0.125rem #dc2a2a;
+      -webkit-box-shadow: 0 0 0 0.125rem var(--color-fire-red);
+              box-shadow: 0 0 0 0.125rem var(--color-fire-red); } }
+
+.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; }

package/esm/components/toggle-button/style/themes/dnb-toggle-button-theme-ui.css

@@ -0,0 +1,337 @@
+/*
+* ToggleButton theme
+*
+*/
+/**
+ * This file is only used to make themes independent
+ * so that they can get imported individually, without the core styles
+ *
+ */
+/*
+ * Utilities
+ */
+.dnb-toggle-button {
+  /* stylelint-disable */
+  /* stylelint-enable */
+  /*
+    * On error state
+    *
+    */
+  /* stylelint-disable */
+  /* stylelint-enable */ }
+  .dnb-toggle-button .dnb-checkbox__gfx path {
+    stroke-width: 0.125rem; }
+  .dnb-toggle-button .dnb-radio__input:not([disabled]) ~ .dnb-radio__button {
+    -webkit-box-shadow: 0 0 0 0.0318rem #007272;
+            box-shadow: 0 0 0 0.0318rem #007272;
+    -webkit-box-shadow: 0 0 0 0.0318rem var(--color-sea-green);
+            box-shadow: 0 0 0 0.0318rem var(--color-sea-green); }
+  .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active),
+  .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:active),
+  .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:active) {
+    background-color: #14555a;
+    background-color: var(--color-emerald-green);
+    color: #a5e1d2;
+    color: var(--color-mint-green); }
+  .dnb-toggle-button--checked .dnb-toggle-button__button .dnb-icon,
+  .dnb-toggle-button--checked .dnb-toggle-button__button:focus .dnb-icon,
+  .dnb-toggle-button--checked .dnb-toggle-button__button:hover .dnb-icon {
+    color: inherit; }
+  .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-radio__button,
+  .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]) .dnb-radio__button,
+  .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]) .dnb-radio__button {
+    background-color: transparent;
+    border-color: #a5e1d2;
+    border-color: var(--color-mint-green);
+    -webkit-box-shadow: 0 0 0 0.0318rem #a5e1d2;
+            box-shadow: 0 0 0 0.0318rem #a5e1d2;
+    -webkit-box-shadow: 0 0 0 0.0318rem var(--color-mint-green);
+            box-shadow: 0 0 0 0.0318rem var(--color-mint-green); }
+  .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-radio__dot,
+  .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]) .dnb-radio__dot,
+  .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]) .dnb-radio__dot {
+    background-color: #a5e1d2;
+    background-color: var(--color-mint-green); }
+  html[data-whatinput='keyboard'] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):focus .dnb-radio__button, html[data-whatinput='keyboard']
+  .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:hover):focus .dnb-radio__button, html[data-whatinput='keyboard']
+  .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:hover):focus .dnb-radio__button {
+    --border-color: var(--color-emerald-green);
+    -webkit-box-shadow: inset 0 0 0 0.09375rem var(--border-color);
+            box-shadow: inset 0 0 0 0.09375rem var(--border-color);
+    /* iOS fix - because "inset" works not fine with border-radius */
+    /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */
+    border-color: transparent; }
+    @supports (-webkit-touch-callout: none) {
+      html[data-whatinput='keyboard'] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):focus .dnb-radio__button, html[data-whatinput='keyboard']
+      .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:hover):focus .dnb-radio__button, html[data-whatinput='keyboard']
+      .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:hover):focus .dnb-radio__button {
+        -webkit-box-shadow: 0 0 0 0.09375rem var(--border-color);
+                box-shadow: 0 0 0 0.09375rem var(--border-color); } }
+    @media not all and (min-resolution: 0.001dpcm) {
+      @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-overflow-scrolling: touch)) {
+        html[data-whatinput='keyboard'] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):focus .dnb-radio__button, html[data-whatinput='keyboard']
+        .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:hover):focus .dnb-radio__button, html[data-whatinput='keyboard']
+        .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:hover):focus .dnb-radio__button {
+          -webkit-box-shadow: 0 0 0 0.09375rem var(--border-color);
+                  box-shadow: 0 0 0 0.09375rem var(--border-color); } } }
+    @media screen and (-ms-high-contrast: none) {
+      html[data-whatinput='keyboard'] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):focus .dnb-radio__button, html[data-whatinput='keyboard']
+      .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:hover):focus .dnb-radio__button, html[data-whatinput='keyboard']
+      .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:hover):focus .dnb-radio__button {
+        -webkit-box-shadow: inset 0 0 0 1px #14555a;
+                box-shadow: inset 0 0 0 1px #14555a;
+        -webkit-box-shadow: inset 0 0 0 1px var(--color-emerald-green);
+                box-shadow: inset 0 0 0 1px var(--color-emerald-green); } }
+  html[data-whatinput='keyboard'] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):focus .dnb-radio__input:not([disabled]):not(:hover):not(:active):not(:hover) ~ .dnb-radio__dot, html[data-whatinput='keyboard']
+  .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:hover):focus .dnb-radio__input:not([disabled]):not(:hover):not(:active):not(:hover) ~ .dnb-radio__dot, html[data-whatinput='keyboard']
+  .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:hover):focus .dnb-radio__input:not([disabled]):not(:hover):not(:active):not(:hover) ~ .dnb-radio__dot {
+    background-color: #14555a;
+    background-color: var(--color-emerald-green); }
+  .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__button,
+  .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]) .dnb-checkbox__button,
+  .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]) .dnb-checkbox__button {
+    background-color: #a5e1d2;
+    background-color: var(--color-mint-green);
+    border-color: #14555a;
+    border-color: var(--color-emerald-green);
+    -webkit-box-shadow: 0 0 0 0.0318rem #14555a;
+            box-shadow: 0 0 0 0.0318rem #14555a;
+    -webkit-box-shadow: 0 0 0 0.0318rem var(--color-emerald-green);
+            box-shadow: 0 0 0 0.0318rem var(--color-emerald-green); }
+  .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__gfx,
+  .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]) .dnb-checkbox__gfx,
+  .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]) .dnb-checkbox__gfx {
+    color: #14555a;
+    color: var(--color-emerald-green); }
+  html[data-whatinput='keyboard'] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):focus .dnb-checkbox__button, html[data-whatinput='keyboard']
+  .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:hover):focus .dnb-checkbox__button, html[data-whatinput='keyboard']
+  .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:hover):focus .dnb-checkbox__button {
+    background-color: #14555a;
+    background-color: var(--color-emerald-green); }
+  html[data-whatinput='keyboard'] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):focus .dnb-checkbox__gfx, html[data-whatinput='keyboard']
+  .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:hover):focus .dnb-checkbox__gfx, html[data-whatinput='keyboard']
+  .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:hover):focus .dnb-checkbox__gfx {
+    color: #a5e1d2;
+    color: var(--color-mint-green); }
+  .dnb-toggle-button--checked .dnb-toggle-button__button[disabled] .dnb-radio__button,
+  .dnb-toggle-button--checked .dnb-toggle-button__button[disabled] .dnb-checkbox__button,
+  .dnb-toggle-button--checked .dnb-toggle-button__button:focus[disabled] .dnb-radio__button,
+  .dnb-toggle-button--checked .dnb-toggle-button__button:focus[disabled] .dnb-checkbox__button,
+  .dnb-toggle-button--checked .dnb-toggle-button__button:hover[disabled] .dnb-radio__button,
+  .dnb-toggle-button--checked .dnb-toggle-button__button:hover[disabled] .dnb-checkbox__button {
+    -webkit-box-shadow: none;
+            box-shadow: none; }
+  html[data-whatinput='keyboard']
+.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus, html[data-whatinput='keyboard']
+  .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:active):not(:hover):focus, html[data-whatinput='keyboard']
+  .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:active):not(:hover):focus {
+    color: #14555a;
+    color: var(--color-emerald-green);
+    background-color: #a5e1d2;
+    background-color: var(--color-mint-green); }
+  html[data-whatinput='keyboard']
+.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus, html[data-whatinput='keyboard']
+  .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:active):not(:hover):focus, html[data-whatinput='keyboard']
+  .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:active):not(:hover):focus {
+    outline: none; }
+    html[data-whatinput='keyboard'] html[data-whatinput='keyboard']
+.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus, html[data-whatinput='keyboard'] html[data-whatinput='keyboard']
+    .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:active):not(:hover):focus, html[data-whatinput='keyboard'] html[data-whatinput='keyboard']
+    .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:active):not(:hover):focus {
+      --border-color: var(--color-emerald-green);
+      -webkit-box-shadow: inset 0 0 0 0.125rem var(--border-color);
+              box-shadow: inset 0 0 0 0.125rem var(--border-color);
+      /* iOS fix - because "inset" works not fine with border-radius */
+      /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */
+      border-color: transparent; }
+      @supports (-webkit-touch-callout: none) {
+        html[data-whatinput='keyboard'] html[data-whatinput='keyboard']
+.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus, html[data-whatinput='keyboard'] html[data-whatinput='keyboard']
+        .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:active):not(:hover):focus, html[data-whatinput='keyboard'] html[data-whatinput='keyboard']
+        .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:active):not(:hover):focus {
+          -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
+                  box-shadow: 0 0 0 0.125rem var(--border-color); } }
+      @media not all and (min-resolution: 0.001dpcm) {
+        @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-overflow-scrolling: touch)) {
+          html[data-whatinput='keyboard'] html[data-whatinput='keyboard']
+.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus, html[data-whatinput='keyboard'] html[data-whatinput='keyboard']
+          .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:active):not(:hover):focus, html[data-whatinput='keyboard'] html[data-whatinput='keyboard']
+          .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:active):not(:hover):focus {
+            -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
+                    box-shadow: 0 0 0 0.125rem var(--border-color); } } }
+      @media screen and (-ms-high-contrast: none) {
+        html[data-whatinput='keyboard'] html[data-whatinput='keyboard']
+.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus, html[data-whatinput='keyboard'] html[data-whatinput='keyboard']
+        .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:active):not(:hover):focus, html[data-whatinput='keyboard'] html[data-whatinput='keyboard']
+        .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:active):not(:hover):focus {
+          -webkit-box-shadow: inset 0 0 0 0.125rem #14555a;
+                  box-shadow: inset 0 0 0 0.125rem #14555a;
+          -webkit-box-shadow: inset 0 0 0 0.125rem var(--color-emerald-green);
+                  box-shadow: inset 0 0 0 0.125rem var(--color-emerald-green); } }
+  .dnb-toggle-button__button:not([disabled]):active .dnb-radio__button,
+  .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):active .dnb-radio__button {
+    background-color: transparent;
+    border-color: #007272;
+    border-color: var(--color-sea-green);
+    -webkit-box-shadow: 0 0 0 0.0318rem #007272;
+            box-shadow: 0 0 0 0.0318rem #007272;
+    -webkit-box-shadow: 0 0 0 0.0318rem var(--color-sea-green);
+            box-shadow: 0 0 0 0.0318rem var(--color-sea-green); }
+  .dnb-toggle-button__button:not([disabled]):active .dnb-radio__dot,
+  .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):active .dnb-radio__dot {
+    background-color: #007272;
+    background-color: var(--color-sea-green); }
+  .dnb-toggle-button__button:not([disabled]):active .dnb-checkbox__button,
+  .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):active .dnb-checkbox__button {
+    background-color: transparent;
+    border-color: #007272;
+    border-color: var(--color-sea-green);
+    -webkit-box-shadow: 0 0 0 0.0318rem #007272;
+            box-shadow: 0 0 0 0.0318rem #007272;
+    -webkit-box-shadow: 0 0 0 0.0318rem var(--color-sea-green);
+            box-shadow: 0 0 0 0.0318rem var(--color-sea-green); }
+  .dnb-toggle-button__button:not([disabled]):active .dnb-checkbox__gfx,
+  .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):active .dnb-checkbox__gfx {
+    color: #007272;
+    color: var(--color-sea-green); }
+  .dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]):not(:hover):not(:focus):not(:active) {
+    background-color: #fff;
+    background-color: var(--color-white);
+    color: #dc2a2a;
+    color: var(--color-fire-red);
+    --border-color: var(--color-fire-red);
+    -webkit-box-shadow: inset 0 0 0 0.0625rem var(--border-color);
+            box-shadow: inset 0 0 0 0.0625rem var(--border-color);
+    /* iOS fix - because "inset" works not fine with border-radius */
+    /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */
+    border-color: transparent; }
+    @supports (-webkit-touch-callout: none) {
+      .dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]):not(:hover):not(:focus):not(:active) {
+        -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
+                box-shadow: 0 0 0 0.0625rem var(--border-color); } }
+    @media not all and (min-resolution: 0.001dpcm) {
+      @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-overflow-scrolling: touch)) {
+        .dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]):not(:hover):not(:focus):not(:active) {
+          -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
+                  box-shadow: 0 0 0 0.0625rem var(--border-color); } } }
+    @media screen and (-ms-high-contrast: none) {
+      .dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]):not(:hover):not(:focus):not(:active) {
+        -webkit-box-shadow: inset 0 0 0 1px #dc2a2a;
+                box-shadow: inset 0 0 0 1px #dc2a2a;
+        -webkit-box-shadow: inset 0 0 0 1px var(--color-fire-red);
+                box-shadow: inset 0 0 0 1px var(--color-fire-red); } }
+  .dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-radio__input:not([disabled]) ~ .dnb-radio__button {
+    --border-color: var(--color-fire-red);
+    -webkit-box-shadow: inset 0 0 0 0.09375rem var(--border-color);
+            box-shadow: inset 0 0 0 0.09375rem var(--border-color);
+    /* iOS fix - because "inset" works not fine with border-radius */
+    /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */
+    border-color: transparent; }
+    @supports (-webkit-touch-callout: none) {
+      .dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-radio__input:not([disabled]) ~ .dnb-radio__button {
+        -webkit-box-shadow: 0 0 0 0.09375rem var(--border-color);
+                box-shadow: 0 0 0 0.09375rem var(--border-color); } }
+    @media not all and (min-resolution: 0.001dpcm) {
+      @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-overflow-scrolling: touch)) {
+        .dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-radio__input:not([disabled]) ~ .dnb-radio__button {
+          -webkit-box-shadow: 0 0 0 0.09375rem var(--border-color);
+                  box-shadow: 0 0 0 0.09375rem var(--border-color); } } }
+    @media screen and (-ms-high-contrast: none) {
+      .dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-radio__input:not([disabled]) ~ .dnb-radio__button {
+        -webkit-box-shadow: inset 0 0 0 1px #dc2a2a;
+                box-shadow: inset 0 0 0 1px #dc2a2a;
+        -webkit-box-shadow: inset 0 0 0 1px var(--color-fire-red);
+                box-shadow: inset 0 0 0 1px var(--color-fire-red); } }
+  .dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-radio__input:not([disabled]) ~ .dnb-radio__focus {
+    -webkit-box-shadow: none;
+            box-shadow: none; }
+  .dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-radio__input:not([disabled]) ~ .dnb-radio__dot {
+    background-color: transparent; }
+  .dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__input ~ .dnb-checkbox__button {
+    border: none;
+    --border-color: var(--color-fire-red);
+    -webkit-box-shadow: inset 0 0 0 0.09375rem var(--border-color);
+            box-shadow: inset 0 0 0 0.09375rem var(--border-color);
+    /* iOS fix - because "inset" works not fine with border-radius */
+    /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */
+    border-color: transparent; }
+    @supports (-webkit-touch-callout: none) {
+      .dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__input ~ .dnb-checkbox__button {
+        -webkit-box-shadow: 0 0 0 0.09375rem var(--border-color);
+                box-shadow: 0 0 0 0.09375rem var(--border-color); } }
+    @media not all and (min-resolution: 0.001dpcm) {
+      @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-overflow-scrolling: touch)) {
+        .dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__input ~ .dnb-checkbox__button {
+          -webkit-box-shadow: 0 0 0 0.09375rem var(--border-color);
+                  box-shadow: 0 0 0 0.09375rem var(--border-color); } } }
+    @media screen and (-ms-high-contrast: none) {
+      .dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__input ~ .dnb-checkbox__button {
+        -webkit-box-shadow: inset 0 0 0 1px #dc2a2a;
+                box-shadow: inset 0 0 0 1px #dc2a2a;
+        -webkit-box-shadow: inset 0 0 0 1px var(--color-fire-red);
+                box-shadow: inset 0 0 0 1px var(--color-fire-red); } }
+  .dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__input:not(:hover) ~ .dnb-checkbox__button .dnb-checkbox__focus {
+    -webkit-box-shadow: none;
+            box-shadow: none; }
+  .dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):not(:focus):not(:active) {
+    color: #fff;
+    color: var(--color-white);
+    background-color: #dc2a2a;
+    background-color: var(--color-fire-red);
+    --border-color: var(--color-fire-red);
+    -webkit-box-shadow: inset 0 0 0 0.0625rem var(--border-color);
+            box-shadow: inset 0 0 0 0.0625rem var(--border-color);
+    /* iOS fix - because "inset" works not fine with border-radius */
+    /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */
+    border-color: transparent; }
+    @supports (-webkit-touch-callout: none) {
+      .dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):not(:focus):not(:active) {
+        -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
+                box-shadow: 0 0 0 0.0625rem var(--border-color); } }
+    @media not all and (min-resolution: 0.001dpcm) {
+      @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-overflow-scrolling: touch)) {
+        .dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):not(:focus):not(:active) {
+          -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
+                  box-shadow: 0 0 0 0.0625rem var(--border-color); } } }
+    @media screen and (-ms-high-contrast: none) {
+      .dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):not(:focus):not(:active) {
+        -webkit-box-shadow: inset 0 0 0 1px #dc2a2a;
+                box-shadow: inset 0 0 0 1px #dc2a2a;
+        -webkit-box-shadow: inset 0 0 0 1px var(--color-fire-red);
+                box-shadow: inset 0 0 0 1px var(--color-fire-red); } }
+  .dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:focus) .dnb-radio__input:not([disabled]) ~ .dnb-radio__button {
+    --border-color: var(--color-white);
+    -webkit-box-shadow: inset 0 0 0 0.09375rem var(--border-color);
+            box-shadow: inset 0 0 0 0.09375rem var(--border-color);
+    /* iOS fix - because "inset" works not fine with border-radius */
+    /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */
+    border-color: transparent; }
+    @supports (-webkit-touch-callout: none) {
+      .dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:focus) .dnb-radio__input:not([disabled]) ~ .dnb-radio__button {
+        -webkit-box-shadow: 0 0 0 0.09375rem var(--border-color);
+                box-shadow: 0 0 0 0.09375rem var(--border-color); } }
+    @media not all and (min-resolution: 0.001dpcm) {
+      @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-overflow-scrolling: touch)) {
+        .dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:focus) .dnb-radio__input:not([disabled]) ~ .dnb-radio__button {
+          -webkit-box-shadow: 0 0 0 0.09375rem var(--border-color);
+                  box-shadow: 0 0 0 0.09375rem var(--border-color); } } }
+    @media screen and (-ms-high-contrast: none) {
+      .dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:focus) .dnb-radio__input:not([disabled]) ~ .dnb-radio__button {
+        -webkit-box-shadow: inset 0 0 0 1px #fff;
+                box-shadow: inset 0 0 0 1px #fff;
+        -webkit-box-shadow: inset 0 0 0 1px var(--color-white);
+                box-shadow: inset 0 0 0 1px var(--color-white); } }
+  .dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:focus) .dnb-radio__input:not([disabled]):not(:hover) ~ .dnb-radio__dot {
+    background-color: #fff;
+    background-color: var(--color-white); }
+  .dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__input:not([disabled]):not(:hover):not(:active) ~ .dnb-checkbox__button .dnb-checkbox__focus {
+    background-color: #fff;
+    background-color: var(--color-white); }
+  .dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-checkbox
+.dnb-checkbox__input:not([disabled]):not(:focus):not(:active):not(:hover)
+~ .dnb-checkbox__gfx {
+    color: #dc2a2a;
+    color: var(--color-fire-red); }
+  .dnb-toggle-button > .dnb-form-status {
+    -webkit-transform: translateY(0.1875rem);
+            transform: translateY(0.1875rem); }

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

@@ -0,0 +1,24 @@
+/*
+* Tooltip theme
+*
+*/
+/**
+ * This file is only used to make themes independent
+ * so that they can get imported individually, without the core styles
+ *
+ */
+/*
+ * Utilities
+ */
+.dnb-tooltip {
+  border-radius: 1rem;
+  color: #fff;
+  color: var(--color-white);
+  background-color: #333;
+  background-color: var(--color-black-80);
+  -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16);
+          box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16); }
+  .dnb-tooltip__arrow::before {
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    background-color: #333;
+    background-color: var(--color-black-80); }