@dnb/eufemia 9.12.0 → 9.12.4

package/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/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); }

package/es/components/autocomplete/Autocomplete.d.ts

@@ -1,4 +1,52 @@
 import * as React from 'react';
+export type AutocompleteSpace =
+  | string
+  | number
+  | boolean
+  | {
+      /**
+       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
+       */
+      top?: string | number | boolean;
+
+      /**
+       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
+       */
+      right?: string | number | boolean;
+
+      /**
+       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
+       */
+      bottom?: string | number | boolean;
+
+      /**
+       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
+       */
+      left?: string | number | boolean;
+    };
+export type AutocompleteTop = string | number | boolean;
+export type AutocompleteRight = string | number | boolean;
+export type AutocompleteBottom = string | number | boolean;
+export type AutocompleteLeft = string | number | boolean;
+export type AutocompleteUseDrawerOnMobile = string | boolean;
+export type AutocompleteActionMenu = string | boolean;
+export type AutocompleteIsPopup = string | boolean;
+export type AutocompleteAlignDrawer = 'left' | 'right';
+export type AutocompleteWrapperElement =
+  | Object
+  | ((...args: any[]) => any)
+  | React.ReactNode;
+export type AutocompleteIndependentWidth = string | boolean;
+export type AutocompleteFixedPosition = string | boolean;
+export type AutocompletePreventFocus = string | boolean;
+export type AutocompleteSkipKeysearch = string | boolean;
+export type AutocompleteSelectedValue = string | React.ReactNode;
+export type AutocompleteContent = string | React.ReactNode | string[];
+export type AutocompleteRawData =
+  | any[]
+  | Object
+  | ((...args: any[]) => any);
+export type AutocompleteIgnoreEvents = string | boolean;
 export type AutocompleteMode = 'sync' | 'async';
 export type AutocompleteTitle = string | React.ReactNode;
 export type AutocompletePlaceholder = string | React.ReactNode;
@@ -80,35 +128,6 @@ export type AutocompleteOpened = string | boolean;
 export type AutocompleteDisabled = string | boolean;
 export type AutocompleteStretch = string | boolean;
 export type AutocompleteSkeleton = string | boolean;
-export type AutocompleteSpace =
-  | string
-  | number
-  | boolean
-  | {
-      /**
-       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
-       */
-      top?: string | number | boolean;
-
-      /**
-       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
-       */
-      right?: string | number | boolean;
-
-      /**
-       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
-       */
-      bottom?: string | number | boolean;
-
-      /**
-       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
-       */
-      left?: string | number | boolean;
-    };
-export type AutocompleteTop = string | number | boolean;
-export type AutocompleteRight = string | number | boolean;
-export type AutocompleteBottom = string | number | boolean;
-export type AutocompleteLeft = string | number | boolean;
 export type AutocompleteChildren =
   | string
   | ((...args: any[]) => any)
@@ -120,6 +139,82 @@ export type AutocompleteChildren =
  * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
  */
 export interface AutocompleteProps extends React.HTMLProps<HTMLElement> {
+  /**
+   * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`.
+   */
+  space?: AutocompleteSpace;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
+   */
+  top?: AutocompleteTop;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
+   */
+  right?: AutocompleteRight;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
+   */
+  bottom?: AutocompleteBottom;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
+   */
+  left?: AutocompleteLeft;
+  role?: string;
+
+  /**
+   * Set a `cache_hash` as a string to enable internal memorizing of the list to enhance rerendering performance. Components like Autocomplete is using this because of the huge data changes due to search and reorder. Defaults to `null`.
+   */
+  cache_hash?: string;
+  use_drawer_on_mobile?: AutocompleteUseDrawerOnMobile;
+  action_menu?: AutocompleteActionMenu;
+  is_popup?: AutocompleteIsPopup;
+
+  /**
+   * Use `right` to change the options alignment direction. Makes only sense to use in combination with `prevent_selection` or `more_menu` - or if a independent width is used. Defaults to `left`.
+   */
+  align_drawer?: AutocompleteAlignDrawer;
+
+  /**
+   * Has to be a HTML Element, ideal a mother element, used to calculate sizes and distances. Also used for the "click outside" detection. Clicking on the `wrapper_element` will not be anymore triggered as an outside click.
+   */
+  wrapper_element?: AutocompleteWrapperElement;
+
+  /**
+   * Define a HTML class that will be set on the list, beside `dnb-drawer-list__list`.
+   */
+  list_class?: string;
+
+  /**
+   * If set to true, the DrawerList will handle it&#39;s width and position handling independent to the parent/mother element. Defaults to `false`.
+   */
+  independent_width?: AutocompleteIndependentWidth;
+
+  /**
+   * If set to true, the DrawerList will be fixed in it&#39;s scroll position by using CSS `position: fixed;`. Defaults to `false`.
+   */
+  fixed_position?: AutocompleteFixedPosition;
+  prevent_focus?: AutocompletePreventFocus;
+
+  /**
+   * If set to true, search items by the first key will be ignored. Defaults to `false`.
+   */
+  skip_keysearch?: AutocompleteSkipKeysearch;
+  selected_value?: AutocompleteSelectedValue;
+  content?: AutocompleteContent;
+  prepared_data?: any[];
+  raw_data?: AutocompleteRawData;
+
+  /**
+   * If set to true, all keyboard and mouse events will be ignored. Defaults to `false`.
+   */
+  ignore_events?: AutocompleteIgnoreEvents;
+  handle_dismiss_focus?: (...args: any[]) => any;
+  on_pre_change?: (...args: any[]) => any;
+  on_resize?: (...args: any[]) => any;
   id?: string;
 
   /**
@@ -403,31 +498,6 @@ export interface AutocompleteProps extends React.HTMLProps<HTMLElement> {
    * Define a custom class for the internal drawer-list. This makes it possible more easily customize the drawer-list style with styled-components and the `css` style method. Defaults to `null`.
    */
   drawer_class?: string;
-
-  /**
-   * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`.
-   */
-  space?: AutocompleteSpace;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
-   */
-  top?: AutocompleteTop;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
-   */
-  right?: AutocompleteRight;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
-   */
-  bottom?: AutocompleteBottom;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
-   */
-  left?: AutocompleteLeft;
   class?: string;
   className?: string;