@dnb/eufemia 9.12.0 → 9.12.4

package/es/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/es/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/fragments/drawer-list/DrawerList.js

@@ -2,7 +2,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 const _excluded = ["role", "align_drawer", "fixed_position", "use_drawer_on_mobile", "independent_width", "scrollable", "focusable", "size", "no_animation", "no_scroll_animation", "prevent_selection", "action_menu", "is_popup", "portal_class", "list_class", "ignore_events", "options_render", "className", "class", "cache_hash", "wrapper_element", "triangle_position", "direction", "max_height", "id", "data", "prepared_data", "raw_data", "opened", "value", "children"],
-      _excluded2 = ["children", "className", "class", "triangleRef", "cache_hash"],
+      _excluded2 = ["children", "className", "class", "triangleRef", "cache_hash", "showFocusRing"],
       _excluded3 = ["role", "hash", "children", "className", "class", "on_click", "selected", "active", "value"],
       _excluded4 = ["className"];
 
@@ -153,6 +153,7 @@ class DrawerListInstance extends React.PureComponent {
       cache_hash,
       selected_item,
       active_item,
+      showFocusRing,
       closestToTop,
       closestToBottom,
       usePortal,
@@ -236,6 +237,7 @@ class DrawerListInstance extends React.PureComponent {
     }), React.createElement("span", listParams, hidden === false && data && data.length > 0 ? React.createElement(React.Fragment, null, React.createElement(DrawerList.Options, _extends({
       cache_hash: cache_hash + active_item + selected_item + closestToTop + closestToBottom + direction + max_height
     }, ulParams, {
+      showFocusRing: showFocusRing,
       triangleRef: _refTriangle
     }), typeof options_render === 'function' ? options_render({
       data,
@@ -278,12 +280,13 @@ DrawerList.Options = React.memo(React.forwardRef((props, ref) => {
     className,
     class: _className,
     triangleRef = null,
-    cache_hash
+    cache_hash,
+    showFocusRing
   } = props,
         rest = _objectWithoutProperties(props, _excluded2);
 
   return React.createElement("ul", _extends({
-    className: classnames('dnb-drawer-list__options', className, _className)
+    className: classnames('dnb-drawer-list__options', className, _className, showFocusRing && 'dnb-drawer-list__options--focusring')
   }, rest, {
     ref: ref
   }), children, React.createElement("li", {
@@ -300,13 +303,15 @@ DrawerList.Options = React.memo(React.forwardRef((props, ref) => {
 });
 DrawerList.Options.displayName = 'DrawerList.Options';
 DrawerList.Options.propTypes = {
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
+  cache_hash: PropTypes.string.isRequired,
+  showFocusRing: PropTypes.bool,
   className: PropTypes.string,
   class: PropTypes.string,
   triangleRef: PropTypes.object
 };
 DrawerList.Options.defaultProps = {
-  children: null,
+  showFocusRing: false,
   className: null,
   class: null,
   triangleRef: null
@@ -389,7 +394,7 @@ const ItemContent = ({
       className: "dnb-drawer-list__option__item"
     }, children.render ? children.render(item, hash + n) : item));
   } else if (children.content) {
-    return children.render ? children.render(children.content, hash) : children.content;
+    return children.render ? children.render(children.content, hash, children) : children.content;
   }
 
   return children;

package/es/fragments/drawer-list/DrawerListHelpers.js

@@ -346,7 +346,7 @@ export const prepareDerivedState = (props, state) => {
     }
   }
 
-  if (!(parseFloat(state.active_item) > -1) || state._value !== props.value) {
+  if (!(parseFloat(state.active_item) > -2) || state._value !== props.value) {
     state.active_item = state.selected_item;
   }
 

package/es/fragments/drawer-list/DrawerListProvider.js

@@ -82,12 +82,12 @@ export default class DrawerListProvider extends React.PureComponent {
       }, 1);
     });
 
-    _defineProperty(this, "scrollToAndSetActiveItem", (active_item, {
+    _defineProperty(this, "setActiveItemAndScrollToIt", (active_item, {
       fireSelectEvent = false,
       scrollTo = true,
       event = null
     } = {}) => {
-      if (active_item === -1) {
+      if (parseFloat(active_item) === -1) {
         this.setState({
           active_item: -1
         }, () => {
@@ -234,19 +234,15 @@ export default class DrawerListProvider extends React.PureComponent {
           {
             e.preventDefault();
 
-            if (this.state.active_item === 0) {
-              active_item = this.state.direction === 'top' ? this.getLastItem() : -1;
+            if (this.state.direction === 'bottom' && this.state.active_item === this.getFirstItem()) {
+              active_item = -1;
             } else {
               active_item = this.getPrevActiveItem();
 
               if (isNaN(active_item)) {
-                active_item = this.getFirstItem() || this.getLastItem();
+                active_item = this.getLastItem();
               }
             }
-
-            if (this.state.direction === 'top' && isNaN(this.getCurrentActiveItem()) === null) {
-              active_item = this.getLastItem();
-            }
           }
           break;
 
@@ -254,14 +250,14 @@ export default class DrawerListProvider extends React.PureComponent {
           {
             e.preventDefault();
 
-            if (active_item === -1 || isNaN(this.getCurrentActiveItem())) {
-              active_item = this.getFirstItem() || 0;
-            } else {
-              active_item = this.getNextActiveItem() || 0;
-            }
-
             if (this.state.direction === 'top' && this.state.active_item === this.getLastItem()) {
               active_item = -1;
+            } else {
+              active_item = this.getNextActiveItem();
+
+              if (isNaN(active_item)) {
+                active_item = this.getFirstItem();
+              }
             }
           }
           break;
@@ -293,10 +289,14 @@ export default class DrawerListProvider extends React.PureComponent {
 
             if (isTrue(this.props.skip_keysearch) ? active_item > -1 && key !== 'space' : true) {
               e.preventDefault();
-              this.selectItemAndClose(active_item, {
+              const result = this.selectItemAndClose(active_item, {
                 fireSelectEvent: true,
                 event: e
               });
+
+              if (result === false) {
+                return;
+              }
             }
           }
           break;
@@ -335,16 +335,12 @@ export default class DrawerListProvider extends React.PureComponent {
           break;
       }
 
-      if (parseFloat(active_item) > -1 && active_item !== this.state.active_item) {
-        this.scrollToAndSetActiveItem(active_item, {
-          fireSelectEvent: true,
-          event: e
-        });
-      } else if (active_item === -1 && this._refUl.current && typeof document !== 'undefined') {
+      if (active_item === -1 && this._refUl.current && typeof document !== 'undefined') {
         const ulElem = getPreviousSibling('dnb-drawer-list__options', document.activeElement);
 
         if (ulElem === this._refUl.current) {
           this.setState({
+            showFocusRing: true,
             active_item
           });
 
@@ -354,6 +350,14 @@ export default class DrawerListProvider extends React.PureComponent {
 
           dispatchCustomElementEvent(this.state, 'handle_dismiss_focus');
         }
+      } else if (parseFloat(active_item) > -1 && active_item !== this.state.active_item) {
+        this.setState({
+          showFocusRing: false
+        });
+        this.setActiveItemAndScrollToIt(active_item, {
+          fireSelectEvent: true,
+          event: e
+        });
       }
     });
 
@@ -476,7 +480,7 @@ export default class DrawerListProvider extends React.PureComponent {
           attributes: this.attributes,
           ulElement: this._refUl.current
         });
-        this.scrollToAndSetActiveItem(parseFloat(active_item) > -1 ? active_item : -1);
+        this.setActiveItemAndScrollToIt(parseFloat(active_item) > -1 ? active_item : -1);
       };
 
       if (DrawerListProvider.isOpen && !isTrue(this.props.no_animation)) {
@@ -592,7 +596,7 @@ export default class DrawerListProvider extends React.PureComponent {
       const res = dispatchCustomElementEvent(this.state, 'on_pre_change', attr);
 
       if (res === false) {
-        return;
+        return res;
       }
 
       if (hasSelectedText()) {
@@ -1029,7 +1033,7 @@ export default class DrawerListProvider extends React.PureComponent {
           selectItem: this.selectItem,
           selectItemAndClose: this.selectItemAndClose,
           scrollToItem: this.scrollToItem,
-          scrollToAndSetActiveItem: this.scrollToAndSetActiveItem
+          setActiveItemAndScrollToIt: this.setActiveItemAndScrollToIt
         }, this.state)
       })
     }, this.props.children);

package/es/fragments/drawer-list/style/themes/dnb-drawer-list-theme-ui.scss

@@ -10,10 +10,6 @@
   --drawer-list-option-border-width: 0.0625rem;
 }
 
-@mixin drawerListBorderColor($color) {
-  @include fakeBorder($color, 0.125rem, null, true, !important);
-}
-
 .dnb-drawer-list {
   color: var(--color-emerald-green);
 
@@ -40,6 +36,9 @@
     &:focus {
       @include fakeFocus();
     }
+    &--focusring {
+      @include fakeFocus('mouse');
+    }
   }
   @media screen and (max-width: 40em) {
     &__portal &--mobile-view &__options {
@@ -152,7 +151,18 @@
 
       // Remove line on selected items
       &::before {
-        content: none;
+        visibility: hidden;
+      }
+    }
+
+    html[data-whatinput='keyboard'] &--selected#{&}--focus {
+      &::before {
+        visibility: visible;
+
+        @include fakeBorder(
+          var(--color-mint-green),
+          var(--drawer-list-focus-border-width)
+        );
       }
     }