@dnb/eufemia 9.12.0 → 9.12.4

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

@@ -74,7 +74,7 @@ var _DrawerListPortal = _interopRequireDefault(require("./DrawerListPortal"));
 var _DrawerListHelpers = require("./DrawerListHelpers");
 
 var _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"];
 
@@ -291,6 +291,7 @@ var DrawerListInstance = function (_React$PureComponent2) {
           cache_hash = _this$context$drawerL.cache_hash,
           selected_item = _this$context$drawerL.selected_item,
           active_item = _this$context$drawerL.active_item,
+          showFocusRing = _this$context$drawerL.showFocusRing,
           closestToTop = _this$context$drawerL.closestToTop,
           closestToBottom = _this$context$drawerL.closestToBottom,
           usePortal = _this$context$drawerL.usePortal,
@@ -375,6 +376,7 @@ var DrawerListInstance = function (_React$PureComponent2) {
       }), _react.default.createElement("span", listParams, hidden === false && data && data.length > 0 ? _react.default.createElement(_react.default.Fragment, null, _react.default.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: data,
@@ -421,10 +423,11 @@ DrawerList.Options = _react.default.memo(_react.default.forwardRef(function (pro
       _props$triangleRef = props.triangleRef,
       triangleRef = _props$triangleRef === void 0 ? null : _props$triangleRef,
       cache_hash = props.cache_hash,
+      showFocusRing = props.showFocusRing,
       rest = _objectWithoutProperties(props, _excluded2);
 
   return _react.default.createElement("ul", _extends({
-    className: (0, _classnames.default)('dnb-drawer-list__options', className, _className)
+    className: (0, _classnames.default)('dnb-drawer-list__options', className, _className, showFocusRing && 'dnb-drawer-list__options--focusring')
   }, rest, {
     ref: ref
   }), children, _react.default.createElement("li", {
@@ -441,13 +444,15 @@ DrawerList.Options = _react.default.memo(_react.default.forwardRef(function (pro
 });
 DrawerList.Options.displayName = 'DrawerList.Options';
 DrawerList.Options.propTypes = {
-  children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
+  children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]).isRequired,
+  cache_hash: _propTypes.default.string.isRequired,
+  showFocusRing: _propTypes.default.bool,
   className: _propTypes.default.string,
   class: _propTypes.default.string,
   triangleRef: _propTypes.default.object
 };
 DrawerList.Options.defaultProps = {
-  children: null,
+  showFocusRing: false,
   className: null,
   class: null,
   triangleRef: null
@@ -532,7 +537,7 @@ var ItemContent = function ItemContent(_ref3) {
       }, 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/cjs/fragments/drawer-list/DrawerListHelpers.js

@@ -445,7 +445,7 @@ var prepareDerivedState = function 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/cjs/fragments/drawer-list/DrawerListProvider.js

@@ -160,7 +160,7 @@ var DrawerListProvider = function (_React$PureComponent) {
       }, 1);
     });
 
-    _defineProperty(_assertThisInitialized(_this), "scrollToAndSetActiveItem", function (active_item) {
+    _defineProperty(_assertThisInitialized(_this), "setActiveItemAndScrollToIt", function (active_item) {
       var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
           _ref2$fireSelectEvent = _ref2.fireSelectEvent,
           fireSelectEvent = _ref2$fireSelectEvent === void 0 ? false : _ref2$fireSelectEvent,
@@ -169,7 +169,7 @@ var DrawerListProvider = function (_React$PureComponent) {
           _ref2$event = _ref2.event,
           event = _ref2$event === void 0 ? null : _ref2$event;
 
-      if (active_item === -1) {
+      if (parseFloat(active_item) === -1) {
         _this.setState({
           active_item: -1
         }, function () {
@@ -317,19 +317,15 @@ var DrawerListProvider = function (_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;
 
@@ -337,14 +333,14 @@ var DrawerListProvider = function (_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;
@@ -377,10 +373,14 @@ var DrawerListProvider = function (_React$PureComponent) {
             if ((0, _componentHelper.isTrue)(_this.props.skip_keysearch) ? active_item > -1 && key !== 'space' : true) {
               e.preventDefault();
 
-              _this.selectItemAndClose(active_item, {
+              var result = _this.selectItemAndClose(active_item, {
                 fireSelectEvent: true,
                 event: e
               });
+
+              if (result === false) {
+                return;
+              }
             }
           }
           break;
@@ -422,16 +422,12 @@ var DrawerListProvider = function (_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') {
         var _ulElem = (0, _componentHelper.getPreviousSibling)('dnb-drawer-list__options', document.activeElement);
 
         if (_ulElem === _this._refUl.current) {
           _this.setState({
+            showFocusRing: true,
             active_item: active_item
           });
 
@@ -441,6 +437,15 @@ var DrawerListProvider = function (_React$PureComponent) {
 
           (0, _componentHelper.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
+        });
       }
     });
 
@@ -577,7 +582,7 @@ var DrawerListProvider = function (_React$PureComponent) {
           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 && !(0, _componentHelper.isTrue)(_this.props.no_animation)) {
@@ -711,7 +716,7 @@ var DrawerListProvider = function (_React$PureComponent) {
       var res = (0, _componentHelper.dispatchCustomElementEvent)(_this.state, 'on_pre_change', attr);
 
       if (res === false) {
-        return;
+        return res;
       }
 
       if ((0, _helpers.hasSelectedText)()) {
@@ -1169,7 +1174,7 @@ var DrawerListProvider = function (_React$PureComponent) {
             selectItem: this.selectItem,
             selectItemAndClose: this.selectItemAndClose,
             scrollToItem: this.scrollToItem,
-            scrollToAndSetActiveItem: this.scrollToAndSetActiveItem
+            setActiveItemAndScrollToIt: this.setActiveItemAndScrollToIt
           }, this.state)
         })
       }, this.props.children);

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