@dnb/eufemia 9.29.0 → 9.31.0

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

@@ -16,18 +16,21 @@
 */
 .dnb-accordion__header {
   border: none; }
-  .dnb-accordion__header__icon, .dnb-accordion__header__container {
-    color: #14555a;
-    color: var(--color-emerald-green); }
-  .dnb-accordion__header__description {
-    color: #737373;
-    color: var(--color-black-55); }
 
-.dnb-accordion--expanded .dnb-accordion__header__title {
+> .dnb-accordion__header .dnb-accordion__header__icon,
+> .dnb-accordion__header .dnb-accordion__header__container {
+  color: #14555a;
+  color: var(--color-emerald-green); }
+
+> .dnb-accordion__header .dnb-accordion__header__description {
+  color: #737373;
+  color: var(--color-black-55); }
+
+.dnb-accordion--expanded > .dnb-accordion__header .dnb-accordion__header__title {
   font-weight: 500;
   font-weight: var(--font-weight-medium); }
 
-.dnb-accordion__variant--outlined .dnb-accordion__header {
+.dnb-accordion__variant--outlined > .dnb-accordion__header {
   color: #333;
   color: var(--color-black-80);
   background-color: #fff;
@@ -39,34 +42,34 @@
   /* 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-accordion__variant--outlined .dnb-accordion__header {
+    .dnb-accordion__variant--outlined > .dnb-accordion__header {
       -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-accordion__variant--outlined .dnb-accordion__header {
+      .dnb-accordion__variant--outlined > .dnb-accordion__header {
         -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-accordion__variant--outlined .dnb-accordion__header {
+    .dnb-accordion__variant--outlined > .dnb-accordion__header {
       -webkit-box-shadow: inset 0 0 0 1px #ebebeb;
               box-shadow: inset 0 0 0 1px #ebebeb;
       -webkit-box-shadow: inset 0 0 0 1px var(--color-black-8);
               box-shadow: inset 0 0 0 1px var(--color-black-8); } }
-  .dnb-accordion__variant--outlined .dnb-accordion__header:focus[disabled],
-  html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined .dnb-accordion__header:focus[disabled] {
+  .dnb-accordion__variant--outlined > .dnb-accordion__header:focus[disabled],
+  html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined > .dnb-accordion__header:focus[disabled] {
     cursor: not-allowed; }
-  .dnb-accordion__variant--outlined .dnb-accordion__header:focus:not([disabled]),
-  html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined .dnb-accordion__header:focus:not([disabled]) {
+  .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]),
+  html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]) {
     outline: none; }
-    html[data-whatinput='keyboard'] .dnb-accordion__variant--outlined .dnb-accordion__header:focus:not([disabled]), html[data-whatinput='keyboard']
-    html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined .dnb-accordion__header:focus:not([disabled]) {
+    html[data-whatinput='keyboard'] .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]), html[data-whatinput='keyboard']
+    html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]) {
       color: #14555a;
       color: var(--color-emerald-green);
       background-color: #fff;
       background-color: var(--color-white); }
-    html[data-whatinput='keyboard'] .dnb-accordion__variant--outlined .dnb-accordion__header:focus:not([disabled]), html[data-whatinput='keyboard']
-    html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined .dnb-accordion__header:focus:not([disabled]) {
+    html[data-whatinput='keyboard'] .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]), html[data-whatinput='keyboard']
+    html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]) {
       --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);
@@ -74,26 +77,26 @@
       /* 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-accordion__variant--outlined .dnb-accordion__header:focus:not([disabled]), html[data-whatinput='keyboard']
-        html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined .dnb-accordion__header:focus:not([disabled]) {
+        html[data-whatinput='keyboard'] .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]), html[data-whatinput='keyboard']
+        html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]) {
           -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'] .dnb-accordion__variant--outlined .dnb-accordion__header:focus:not([disabled]), html[data-whatinput='keyboard']
-          html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined .dnb-accordion__header:focus:not([disabled]) {
+          html[data-whatinput='keyboard'] .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]), html[data-whatinput='keyboard']
+          html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]) {
             -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'] .dnb-accordion__variant--outlined .dnb-accordion__header:focus:not([disabled]), html[data-whatinput='keyboard']
-        html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined .dnb-accordion__header:focus:not([disabled]) {
+        html[data-whatinput='keyboard'] .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]), html[data-whatinput='keyboard']
+        html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]) {
           -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); } }
-  html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined .dnb-accordion__header:hover[disabled] {
+  html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined > .dnb-accordion__header:hover[disabled] {
     cursor: not-allowed; }
-  html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined .dnb-accordion__header:hover:not([disabled]) {
+  html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined > .dnb-accordion__header:hover:not([disabled]) {
     color: #14555a;
     color: var(--color-emerald-green);
     background-color: #fff;
@@ -103,19 +106,19 @@
             box-shadow: 0 0 0 0.125rem var(--border-color);
     border-color: transparent; }
     @media screen and (-ms-high-contrast: none) {
-      html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined .dnb-accordion__header:hover:not([disabled]) {
+      html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined > .dnb-accordion__header:hover:not([disabled]) {
         -webkit-box-shadow: 0 0 0 0.125rem #14555a;
                 box-shadow: 0 0 0 0.125rem #14555a;
         -webkit-box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
                 box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } }
     @media screen and (-ms-high-contrast: none) {
-      html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined .dnb-accordion__header:hover:not([disabled]) {
+      html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined > .dnb-accordion__header:hover:not([disabled]) {
         opacity: 1; } }
-  .dnb-accordion__variant--outlined .dnb-accordion__header:active[disabled],
-  html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined .dnb-accordion__header:active[disabled] {
+  .dnb-accordion__variant--outlined > .dnb-accordion__header:active[disabled],
+  html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined > .dnb-accordion__header:active[disabled] {
     cursor: not-allowed; }
-  .dnb-accordion__variant--outlined .dnb-accordion__header:active:not([disabled]),
-  html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined .dnb-accordion__header:active:not([disabled]) {
+  .dnb-accordion__variant--outlined > .dnb-accordion__header:active:not([disabled]),
+  html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined > .dnb-accordion__header:active:not([disabled]) {
     color: #14555a;
     color: var(--color-emerald-green);
     background-color: #f2f4ec;
@@ -125,30 +128,31 @@
             box-shadow: 0 0 0 0.0625rem var(--border-color);
     border-color: transparent; }
     @media screen and (-ms-high-contrast: none) {
-      .dnb-accordion__variant--outlined .dnb-accordion__header:active:not([disabled]),
-      html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined .dnb-accordion__header:active:not([disabled]) {
+      .dnb-accordion__variant--outlined > .dnb-accordion__header:active:not([disabled]),
+      html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined > .dnb-accordion__header:active:not([disabled]) {
         -webkit-box-shadow: 0 0 0 0.0625rem #14555a;
                 box-shadow: 0 0 0 0.0625rem #14555a;
         -webkit-box-shadow: 0 0 0 0.0625rem var(--color-emerald-green);
                 box-shadow: 0 0 0 0.0625rem var(--color-emerald-green); } }
-  .dnb-accordion__variant--outlined .dnb-accordion__header[disabled] {
-    background-color: #fff;
-    background-color: var(--color-white);
-    --border-color: var(--color-sea-green-30);
-    -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
-            box-shadow: 0 0 0 0.0625rem var(--border-color);
-    border-color: transparent; }
-    @media screen and (-ms-high-contrast: none) {
-      .dnb-accordion__variant--outlined .dnb-accordion__header[disabled] {
-        -webkit-box-shadow: 0 0 0 0.0625rem #b3dada;
-                box-shadow: 0 0 0 0.0625rem #b3dada;
-        -webkit-box-shadow: 0 0 0 0.0625rem var(--color-sea-green-30);
-                box-shadow: 0 0 0 0.0625rem var(--color-sea-green-30); } }
-    .dnb-accordion__variant--outlined .dnb-accordion__header[disabled] * {
-      color: #b3dada;
-      color: var(--color-sea-green-30); }
 
-.dnb-accordion__variant--outlined.dnb-accordion--expanded .dnb-accordion__header {
+.dnb-accordion__variant--outlined > .dnb-accordion__header .dnb-accordion__header[disabled] {
+  background-color: #fff;
+  background-color: var(--color-white);
+  --border-color: var(--color-sea-green-30);
+  -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
+          box-shadow: 0 0 0 0.0625rem var(--border-color);
+  border-color: transparent; }
+  @media screen and (-ms-high-contrast: none) {
+    .dnb-accordion__variant--outlined > .dnb-accordion__header .dnb-accordion__header[disabled] {
+      -webkit-box-shadow: 0 0 0 0.0625rem #b3dada;
+              box-shadow: 0 0 0 0.0625rem #b3dada;
+      -webkit-box-shadow: 0 0 0 0.0625rem var(--color-sea-green-30);
+              box-shadow: 0 0 0 0.0625rem var(--color-sea-green-30); } }
+  .dnb-accordion__variant--outlined > .dnb-accordion__header .dnb-accordion__header[disabled] * {
+    color: #b3dada;
+    color: var(--color-sea-green-30); }
+
+.dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header {
   color: #fff;
   color: var(--color-white);
   background-color: #007272;
@@ -158,56 +162,59 @@
           box-shadow: 0 0 0 0.0625rem var(--border-color);
   border-color: transparent; }
   @media screen and (-ms-high-contrast: none) {
-    .dnb-accordion__variant--outlined.dnb-accordion--expanded .dnb-accordion__header {
+    .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header {
       -webkit-box-shadow: 0 0 0 0.0625rem transparent;
               box-shadow: 0 0 0 0.0625rem transparent; } }
-  .dnb-accordion__variant--outlined.dnb-accordion--expanded .dnb-accordion__header[disabled] {
-    background-color: #b3dada;
-    background-color: var(--color-sea-green-30); }
-    .dnb-accordion__variant--outlined.dnb-accordion--expanded .dnb-accordion__header[disabled] * {
-      color: #fff;
-      color: var(--color-white); }
-  html[data-whatinput='keyboard']
-.dnb-accordion__variant--outlined.dnb-accordion--expanded .dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus {
-    background-color: #a5e1d2;
-    background-color: var(--color-mint-green); }
-    html[data-whatinput='keyboard']
-.dnb-accordion__variant--outlined.dnb-accordion--expanded .dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus * {
-      color: #14555a;
-      color: var(--color-emerald-green); }
-  .dnb-accordion__variant--outlined.dnb-accordion--expanded .dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus {
-    outline: none; }
-    html[data-whatinput='keyboard'] .dnb-accordion__variant--outlined.dnb-accordion--expanded .dnb-accordion__header: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'] .dnb-accordion__variant--outlined.dnb-accordion--expanded .dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus {
+
+.dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header .dnb-accordion__header[disabled] {
+  background-color: #b3dada;
+  background-color: var(--color-sea-green-30); }
+  .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header .dnb-accordion__header[disabled] * {
+    color: #fff;
+    color: var(--color-white); }
+
+.dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header html[data-whatinput='keyboard']
+.dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus {
+  background-color: #a5e1d2;
+  background-color: var(--color-mint-green); }
+  .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header html[data-whatinput='keyboard']
+.dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus * {
+    color: #14555a;
+    color: var(--color-emerald-green); }
+
+.dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header .dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus {
+  outline: none; }
+  html[data-whatinput='keyboard'] .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header .dnb-accordion__header: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'] .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header .dnb-accordion__header: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'] .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header .dnb-accordion__header: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'] .dnb-accordion__variant--outlined.dnb-accordion--expanded .dnb-accordion__header: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'] .dnb-accordion__variant--outlined.dnb-accordion--expanded .dnb-accordion__header: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); } }
+                  box-shadow: 0 0 0 0.125rem var(--border-color); } } }
+    @media screen and (-ms-high-contrast: none) {
+      html[data-whatinput='keyboard'] .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header .dnb-accordion__header: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-accordion__variant--outlined.dnb-accordion--expanded .dnb-accordion__header:not(:hover):not([disabled]) * {
+.dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header .dnb-accordion__header:not(:hover):not([disabled]) * {
   color: #fff;
   color: var(--color-white); }
 
-html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined.dnb-accordion--expanded .dnb-accordion__header.dnb-accordion--hover:not(:active):hover[disabled] {
+html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header.dnb-accordion--hover:not(:active):hover[disabled] {
   cursor: not-allowed; }
 
-html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined.dnb-accordion--expanded .dnb-accordion__header.dnb-accordion--hover:not(:active):hover:not([disabled]) {
+html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header.dnb-accordion--hover:not(:active):hover:not([disabled]) {
   color: #fff;
   color: var(--color-white);
   background-color: #007272;
@@ -217,12 +224,12 @@ html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined.dnb-accord
           box-shadow: 0 0 0 0.0625rem var(--border-color);
   border-color: transparent; }
   @media screen and (-ms-high-contrast: none) {
-    html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined.dnb-accordion--expanded .dnb-accordion__header.dnb-accordion--hover:not(:active):hover:not([disabled]) {
+    html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header.dnb-accordion--hover:not(:active):hover:not([disabled]) {
       -webkit-box-shadow: 0 0 0 0.0625rem #007272;
               box-shadow: 0 0 0 0.0625rem #007272;
       -webkit-box-shadow: 0 0 0 0.0625rem var(--color-sea-green);
               box-shadow: 0 0 0 0.0625rem var(--color-sea-green); } }
 
-.dnb-accordion__variant--outlined.dnb-accordion--expanded .dnb-accordion__header.dnb-accordion--hover:not(:active) * {
+.dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header.dnb-accordion--hover:not(:active) * {
   color: #fff;
   color: var(--color-white); }

package/cjs/components/accordion/style/themes/dnb-accordion-theme-ui.min.css

@@ -1,3 +1,3 @@
-.dnb-accordion__header{border:none}.dnb-accordion__header__container,.dnb-accordion__header__icon{color:#14555a;color:var(--color-emerald-green)}.dnb-accordion__header__description{color:#737373;color:var(--color-black-55)}.dnb-accordion--expanded .dnb-accordion__header__title{font-weight:500;font-weight:var(--font-weight-medium)}.dnb-accordion__variant--outlined .dnb-accordion__header{--border-color:var(--color-black-8);background-color:#fff;background-color:var(--color-white);border-color:transparent;-webkit-box-shadow:inset 0 0 0 .0625rem var(--border-color);box-shadow:inset 0 0 0 .0625rem var(--border-color);color:#333;color:var(--color-black-80)}@supports (-webkit-touch-callout:none){.dnb-accordion__variant--outlined .dnb-accordion__header{-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow: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-accordion__variant--outlined .dnb-accordion__header{-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color)}}}@media screen and (-ms-high-contrast:none){.dnb-accordion__variant--outlined .dnb-accordion__header{-webkit-box-shadow:inset 0 0 0 1px #ebebeb;box-shadow:inset 0 0 0 1px #ebebeb;-webkit-box-shadow:inset 0 0 0 1px var(--color-black-8);box-shadow:inset 0 0 0 1px var(--color-black-8)}}.dnb-accordion__variant--outlined .dnb-accordion__header:focus[disabled],html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined .dnb-accordion__header:focus[disabled]{cursor:not-allowed}.dnb-accordion__variant--outlined .dnb-accordion__header:focus:not([disabled]),html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined .dnb-accordion__header:focus:not([disabled]){outline:none}html[data-whatinput=keyboard] .dnb-accordion__variant--outlined .dnb-accordion__header:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined .dnb-accordion__header:focus:not([disabled]){--border-color:var(--color-emerald-green);background-color:#fff;background-color:var(--color-white);border-color:transparent;-webkit-box-shadow:inset 0 0 0 .125rem var(--border-color);box-shadow:inset 0 0 0 .125rem var(--border-color);color:#14555a;color:var(--color-emerald-green)}@supports (-webkit-touch-callout:none){html[data-whatinput=keyboard] .dnb-accordion__variant--outlined .dnb-accordion__header:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined .dnb-accordion__header:focus:not([disabled]){-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow: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] .dnb-accordion__variant--outlined .dnb-accordion__header:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined .dnb-accordion__header:focus:not([disabled]){-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}}}@media screen and (-ms-high-contrast:none){html[data-whatinput=keyboard] .dnb-accordion__variant--outlined .dnb-accordion__header:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined .dnb-accordion__header:focus:not([disabled]){-webkit-box-shadow:inset 0 0 0 .125rem #14555a;box-shadow:inset 0 0 0 .125rem #14555a;-webkit-box-shadow:inset 0 0 0 .125rem var(--color-emerald-green);box-shadow:inset 0 0 0 .125rem var(--color-emerald-green)}}html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined .dnb-accordion__header:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined .dnb-accordion__header:hover:not([disabled]){--border-color:var(--color-emerald-green);background-color:#fff;background-color:var(--color-white);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color);color:#14555a;color:var(--color-emerald-green)}@media screen and (-ms-high-contrast:none){html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined .dnb-accordion__header:hover:not([disabled]){-webkit-box-shadow:0 0 0 .125rem #14555a;box-shadow:0 0 0 .125rem #14555a;-webkit-box-shadow:0 0 0 .125rem var(--color-emerald-green);box-shadow:0 0 0 .125rem var(--color-emerald-green);opacity:1}}.dnb-accordion__variant--outlined .dnb-accordion__header:active[disabled],html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined .dnb-accordion__header:active[disabled]{cursor:not-allowed}.dnb-accordion__variant--outlined .dnb-accordion__header:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined .dnb-accordion__header:active:not([disabled]){--border-color:var(--color-emerald-green);background-color:#f2f4ec;background-color:var(--color-pistachio);border-color:transparent;-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color);color:#14555a;color:var(--color-emerald-green)}@media screen and (-ms-high-contrast:none){.dnb-accordion__variant--outlined .dnb-accordion__header:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined .dnb-accordion__header:active:not([disabled]){-webkit-box-shadow:0 0 0 .0625rem #14555a;box-shadow:0 0 0 .0625rem #14555a;-webkit-box-shadow:0 0 0 .0625rem var(--color-emerald-green);box-shadow:0 0 0 .0625rem var(--color-emerald-green)}}.dnb-accordion__variant--outlined .dnb-accordion__header[disabled]{--border-color:var(--color-sea-green-30);background-color:#fff;background-color:var(--color-white);border-color:transparent;-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color)}@media screen and (-ms-high-contrast:none){.dnb-accordion__variant--outlined .dnb-accordion__header[disabled]{-webkit-box-shadow:0 0 0 .0625rem #b3dada;box-shadow:0 0 0 .0625rem #b3dada;-webkit-box-shadow:0 0 0 .0625rem var(--color-sea-green-30);box-shadow:0 0 0 .0625rem var(--color-sea-green-30)}}.dnb-accordion__variant--outlined .dnb-accordion__header[disabled] *{color:#b3dada;color:var(--color-sea-green-30)}.dnb-accordion__variant--outlined.dnb-accordion--expanded .dnb-accordion__header{--border-color:transparent;background-color:#007272;background-color:var(--color-sea-green);border-color:transparent;-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color);color:#fff;color:var(--color-white)}@media screen and (-ms-high-contrast:none){.dnb-accordion__variant--outlined.dnb-accordion--expanded .dnb-accordion__header{-webkit-box-shadow:0 0 0 .0625rem transparent;box-shadow:0 0 0 .0625rem transparent}}.dnb-accordion__variant--outlined.dnb-accordion--expanded .dnb-accordion__header[disabled]{background-color:#b3dada;background-color:var(--color-sea-green-30)}.dnb-accordion__variant--outlined.dnb-accordion--expanded .dnb-accordion__header[disabled] *{color:#fff;color:var(--color-white)}html[data-whatinput=keyboard]
-.dnb-accordion__variant--outlined.dnb-accordion--expanded .dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus{background-color:#a5e1d2;background-color:var(--color-mint-green)}html[data-whatinput=keyboard]
-.dnb-accordion__variant--outlined.dnb-accordion--expanded .dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus *{color:#14555a;color:var(--color-emerald-green)}.dnb-accordion__variant--outlined.dnb-accordion--expanded .dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus{outline:none}html[data-whatinput=keyboard] .dnb-accordion__variant--outlined.dnb-accordion--expanded .dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus{--border-color:var(--color-emerald-green);border-color:transparent;-webkit-box-shadow:inset 0 0 0 .125rem var(--border-color);box-shadow:inset 0 0 0 .125rem var(--border-color)}@supports (-webkit-touch-callout:none){html[data-whatinput=keyboard] .dnb-accordion__variant--outlined.dnb-accordion--expanded .dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus{-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow: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] .dnb-accordion__variant--outlined.dnb-accordion--expanded .dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus{-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}}}@media screen and (-ms-high-contrast:none){html[data-whatinput=keyboard] .dnb-accordion__variant--outlined.dnb-accordion--expanded .dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus{-webkit-box-shadow:inset 0 0 0 .125rem #14555a;box-shadow:inset 0 0 0 .125rem #14555a;-webkit-box-shadow:inset 0 0 0 .125rem var(--color-emerald-green);box-shadow:inset 0 0 0 .125rem var(--color-emerald-green)}}.dnb-accordion__variant--outlined.dnb-accordion--expanded .dnb-accordion__header:not(:hover):not([disabled]) *{color:#fff;color:var(--color-white)}html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined.dnb-accordion--expanded .dnb-accordion__header.dnb-accordion--hover:not(:active):hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined.dnb-accordion--expanded .dnb-accordion__header.dnb-accordion--hover:not(:active):hover:not([disabled]){--border-color:var(--color-sea-green);background-color:#007272;background-color:var(--color-sea-green);border-color:transparent;-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color);color:#fff;color:var(--color-white)}@media screen and (-ms-high-contrast:none){html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined.dnb-accordion--expanded .dnb-accordion__header.dnb-accordion--hover:not(:active):hover:not([disabled]){-webkit-box-shadow:0 0 0 .0625rem #007272;box-shadow:0 0 0 .0625rem #007272;-webkit-box-shadow:0 0 0 .0625rem var(--color-sea-green);box-shadow:0 0 0 .0625rem var(--color-sea-green)}}.dnb-accordion__variant--outlined.dnb-accordion--expanded .dnb-accordion__header.dnb-accordion--hover:not(:active) *{color:#fff;color:var(--color-white)}
+.dnb-accordion__header{border:none}>.dnb-accordion__header .dnb-accordion__header__container,>.dnb-accordion__header .dnb-accordion__header__icon{color:#14555a;color:var(--color-emerald-green)}>.dnb-accordion__header .dnb-accordion__header__description{color:#737373;color:var(--color-black-55)}.dnb-accordion--expanded>.dnb-accordion__header .dnb-accordion__header__title{font-weight:500;font-weight:var(--font-weight-medium)}.dnb-accordion__variant--outlined>.dnb-accordion__header{--border-color:var(--color-black-8);background-color:#fff;background-color:var(--color-white);border-color:transparent;-webkit-box-shadow:inset 0 0 0 .0625rem var(--border-color);box-shadow:inset 0 0 0 .0625rem var(--border-color);color:#333;color:var(--color-black-80)}@supports (-webkit-touch-callout:none){.dnb-accordion__variant--outlined>.dnb-accordion__header{-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow: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-accordion__variant--outlined>.dnb-accordion__header{-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color)}}}@media screen and (-ms-high-contrast:none){.dnb-accordion__variant--outlined>.dnb-accordion__header{-webkit-box-shadow:inset 0 0 0 1px #ebebeb;box-shadow:inset 0 0 0 1px #ebebeb;-webkit-box-shadow:inset 0 0 0 1px var(--color-black-8);box-shadow:inset 0 0 0 1px var(--color-black-8)}}.dnb-accordion__variant--outlined>.dnb-accordion__header:focus[disabled],html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined>.dnb-accordion__header:focus[disabled]{cursor:not-allowed}.dnb-accordion__variant--outlined>.dnb-accordion__header:focus:not([disabled]),html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined>.dnb-accordion__header:focus:not([disabled]){outline:none}html[data-whatinput=keyboard] .dnb-accordion__variant--outlined>.dnb-accordion__header:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined>.dnb-accordion__header:focus:not([disabled]){--border-color:var(--color-emerald-green);background-color:#fff;background-color:var(--color-white);border-color:transparent;-webkit-box-shadow:inset 0 0 0 .125rem var(--border-color);box-shadow:inset 0 0 0 .125rem var(--border-color);color:#14555a;color:var(--color-emerald-green)}@supports (-webkit-touch-callout:none){html[data-whatinput=keyboard] .dnb-accordion__variant--outlined>.dnb-accordion__header:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined>.dnb-accordion__header:focus:not([disabled]){-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow: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] .dnb-accordion__variant--outlined>.dnb-accordion__header:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined>.dnb-accordion__header:focus:not([disabled]){-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}}}@media screen and (-ms-high-contrast:none){html[data-whatinput=keyboard] .dnb-accordion__variant--outlined>.dnb-accordion__header:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined>.dnb-accordion__header:focus:not([disabled]){-webkit-box-shadow:inset 0 0 0 .125rem #14555a;box-shadow:inset 0 0 0 .125rem #14555a;-webkit-box-shadow:inset 0 0 0 .125rem var(--color-emerald-green);box-shadow:inset 0 0 0 .125rem var(--color-emerald-green)}}html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined>.dnb-accordion__header:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined>.dnb-accordion__header:hover:not([disabled]){--border-color:var(--color-emerald-green);background-color:#fff;background-color:var(--color-white);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color);color:#14555a;color:var(--color-emerald-green)}@media screen and (-ms-high-contrast:none){html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined>.dnb-accordion__header:hover:not([disabled]){-webkit-box-shadow:0 0 0 .125rem #14555a;box-shadow:0 0 0 .125rem #14555a;-webkit-box-shadow:0 0 0 .125rem var(--color-emerald-green);box-shadow:0 0 0 .125rem var(--color-emerald-green);opacity:1}}.dnb-accordion__variant--outlined>.dnb-accordion__header:active[disabled],html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined>.dnb-accordion__header:active[disabled]{cursor:not-allowed}.dnb-accordion__variant--outlined>.dnb-accordion__header:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined>.dnb-accordion__header:active:not([disabled]){--border-color:var(--color-emerald-green);background-color:#f2f4ec;background-color:var(--color-pistachio);border-color:transparent;-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color);color:#14555a;color:var(--color-emerald-green)}@media screen and (-ms-high-contrast:none){.dnb-accordion__variant--outlined>.dnb-accordion__header:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined>.dnb-accordion__header:active:not([disabled]){-webkit-box-shadow:0 0 0 .0625rem #14555a;box-shadow:0 0 0 .0625rem #14555a;-webkit-box-shadow:0 0 0 .0625rem var(--color-emerald-green);box-shadow:0 0 0 .0625rem var(--color-emerald-green)}}.dnb-accordion__variant--outlined>.dnb-accordion__header .dnb-accordion__header[disabled]{--border-color:var(--color-sea-green-30);background-color:#fff;background-color:var(--color-white);border-color:transparent;-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color)}@media screen and (-ms-high-contrast:none){.dnb-accordion__variant--outlined>.dnb-accordion__header .dnb-accordion__header[disabled]{-webkit-box-shadow:0 0 0 .0625rem #b3dada;box-shadow:0 0 0 .0625rem #b3dada;-webkit-box-shadow:0 0 0 .0625rem var(--color-sea-green-30);box-shadow:0 0 0 .0625rem var(--color-sea-green-30)}}.dnb-accordion__variant--outlined>.dnb-accordion__header .dnb-accordion__header[disabled] *{color:#b3dada;color:var(--color-sea-green-30)}.dnb-accordion__variant--outlined.dnb-accordion--expanded>.dnb-accordion__header{--border-color:transparent;background-color:#007272;background-color:var(--color-sea-green);border-color:transparent;-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color);color:#fff;color:var(--color-white)}@media screen and (-ms-high-contrast:none){.dnb-accordion__variant--outlined.dnb-accordion--expanded>.dnb-accordion__header{-webkit-box-shadow:0 0 0 .0625rem transparent;box-shadow:0 0 0 .0625rem transparent}}.dnb-accordion__variant--outlined.dnb-accordion--expanded>.dnb-accordion__header .dnb-accordion__header[disabled]{background-color:#b3dada;background-color:var(--color-sea-green-30)}.dnb-accordion__variant--outlined.dnb-accordion--expanded>.dnb-accordion__header .dnb-accordion__header[disabled] *{color:#fff;color:var(--color-white)}.dnb-accordion__variant--outlined.dnb-accordion--expanded>.dnb-accordion__header html[data-whatinput=keyboard]
+.dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus{background-color:#a5e1d2;background-color:var(--color-mint-green)}.dnb-accordion__variant--outlined.dnb-accordion--expanded>.dnb-accordion__header html[data-whatinput=keyboard]
+.dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus *{color:#14555a;color:var(--color-emerald-green)}.dnb-accordion__variant--outlined.dnb-accordion--expanded>.dnb-accordion__header .dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus{outline:none}html[data-whatinput=keyboard] .dnb-accordion__variant--outlined.dnb-accordion--expanded>.dnb-accordion__header .dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus{--border-color:var(--color-emerald-green);border-color:transparent;-webkit-box-shadow:inset 0 0 0 .125rem var(--border-color);box-shadow:inset 0 0 0 .125rem var(--border-color)}@supports (-webkit-touch-callout:none){html[data-whatinput=keyboard] .dnb-accordion__variant--outlined.dnb-accordion--expanded>.dnb-accordion__header .dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus{-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow: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] .dnb-accordion__variant--outlined.dnb-accordion--expanded>.dnb-accordion__header .dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus{-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}}}@media screen and (-ms-high-contrast:none){html[data-whatinput=keyboard] .dnb-accordion__variant--outlined.dnb-accordion--expanded>.dnb-accordion__header .dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus{-webkit-box-shadow:inset 0 0 0 .125rem #14555a;box-shadow:inset 0 0 0 .125rem #14555a;-webkit-box-shadow:inset 0 0 0 .125rem var(--color-emerald-green);box-shadow:inset 0 0 0 .125rem var(--color-emerald-green)}}.dnb-accordion__variant--outlined.dnb-accordion--expanded>.dnb-accordion__header .dnb-accordion__header:not(:hover):not([disabled]) *{color:#fff;color:var(--color-white)}html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined.dnb-accordion--expanded>.dnb-accordion__header.dnb-accordion--hover:not(:active):hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined.dnb-accordion--expanded>.dnb-accordion__header.dnb-accordion--hover:not(:active):hover:not([disabled]){--border-color:var(--color-sea-green);background-color:#007272;background-color:var(--color-sea-green);border-color:transparent;-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color);color:#fff;color:var(--color-white)}@media screen and (-ms-high-contrast:none){html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined.dnb-accordion--expanded>.dnb-accordion__header.dnb-accordion--hover:not(:active):hover:not([disabled]){-webkit-box-shadow:0 0 0 .0625rem #007272;box-shadow:0 0 0 .0625rem #007272;-webkit-box-shadow:0 0 0 .0625rem var(--color-sea-green);box-shadow:0 0 0 .0625rem var(--color-sea-green)}}.dnb-accordion__variant--outlined.dnb-accordion--expanded>.dnb-accordion__header.dnb-accordion--hover:not(:active) *{color:#fff;color:var(--color-white)}

package/cjs/components/accordion/style/themes/dnb-accordion-theme-ui.scss

@@ -9,28 +9,25 @@
 .dnb-accordion {
   &__header {
     border: none;
+  }
+  > &__header &__header__icon,
+  > &__header &__header__container {
+    color: var(--color-emerald-green);
+  }
 
-    &__icon,
-    &__container {
-      color: var(--color-emerald-green);
-    }
-
-    &__description {
-      color: var(--color-black-55);
-    }
+  > &__header &__header__description {
+    color: var(--color-black-55);
   }
 
-  &--expanded &__header {
-    &__title {
-      font-weight: var(--font-weight-medium);
-    }
+  &--expanded > &__header &__header__title {
+    font-weight: var(--font-weight-medium);
   }
 
   // &__variant--default {
   // }
 
   // Variant: outlined
-  &__variant--outlined &__header {
+  &__variant--outlined > &__header {
     color: var(--color-black-80);
     background-color: var(--color-white);
 
@@ -44,49 +41,52 @@
 
       @include fakeBorder(var(--color-emerald-green), 0.0625rem);
     }
-
-    &[disabled] {
-      background-color: var(--color-white);
-      @include fakeBorder(var(--color-sea-green-30), 0.0625rem);
-      * {
-        color: var(--color-sea-green-30);
-      }
+  }
+  &__variant--outlined > &__header &__header[disabled] {
+    background-color: var(--color-white);
+    @include fakeBorder(var(--color-sea-green-30), 0.0625rem);
+    * {
+      color: var(--color-sea-green-30);
     }
   }
-  &__variant--outlined#{&}--expanded &__header {
+  &__variant--outlined#{&}--expanded > &__header {
     color: var(--color-white);
     background-color: var(--color-sea-green);
 
     @include fakeBorder(transparent);
-
-    &[disabled] {
-      background-color: var(--color-sea-green-30);
-      * {
-        color: var(--color-white);
-      }
+  }
+  &__variant--outlined#{&}--expanded > &__header &__header[disabled] {
+    background-color: var(--color-sea-green-30);
+    * {
+      color: var(--color-white);
     }
+  }
 
-    // Additional focus handling
+  // Additional focus handling
+  &__variant--outlined#{&}--expanded
+    > &__header
     html[data-whatinput='keyboard']
-      &:not([disabled]):not(:active):not(:hover):focus {
-      background-color: var(--color-mint-green);
-      * {
-        color: var(--color-emerald-green);
-      }
-    }
-    &:not([disabled]):not(:active):not(:hover):focus {
-      @include fakeFocus(null, var(--color-emerald-green), inset);
+    &__header:not([disabled]):not(:active):not(:hover):focus {
+    background-color: var(--color-mint-green);
+    * {
+      color: var(--color-emerald-green);
     }
   }
+  &__variant--outlined#{&}--expanded
+    > &__header
+    &__header:not([disabled]):not(:active):not(:hover):focus {
+    @include fakeFocus(null, var(--color-emerald-green), inset);
+  }
 
   &__variant--outlined#{&}--expanded
+    > &__header
     &__header:not(:hover):not([disabled]) {
     * {
       color: var(--color-white);
     }
   }
   // we have this hover variant, because of the default html focus/hover handling
-  &__variant--outlined#{&}--expanded &__header#{&}--hover:not(:active) {
+  &__variant--outlined#{&}--expanded > &__header#{&}--hover:not(:active) {
     @include hover {
       color: var(--color-white);
       background-color: var(--color-sea-green);

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

@@ -133,7 +133,6 @@ export type AutocompleteStretch = string | boolean;
 export type AutocompleteSkeleton = string | boolean;
 export type AutocompletePageOffset = string | number;
 export type AutocompleteObserverElement = string | React.ReactNode;
-export type AutocompleteMinHeight = string | number;
 export type AutocompleteChildren =
   | string
   | ((...args: any[]) => any)
@@ -198,10 +197,6 @@ export interface AutocompleteProps extends React.HTMLProps<HTMLElement> {
    * 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;
 
@@ -531,11 +526,6 @@ export interface AutocompleteProps extends React.HTMLProps<HTMLElement> {
    */
   observer_element?: AutocompleteObserverElement;
 
-  /**
-   * Defines if the minimum height (in `rem`) of the options list. Defaults to `10rem`.
-   */
-  min_height?: AutocompleteMinHeight;
-
   /**
    * If set to true, the HTML body will get locked from scrolling. Defaults to `false`.
    */

package/cjs/components/autocomplete/Autocomplete.js

@@ -89,6 +89,8 @@ var _AlignmentHelper2 = _interopRequireDefault(require("../../shared/AlignmentHe
 
 var _SpacingHelper = require("../space/SpacingHelper");
 
+var _FormRowHelpers = require("../form-row/FormRowHelpers");
+
 var _Suffix = _interopRequireDefault(require("../../shared/helpers/Suffix"));
 
 var _FormLabel = _interopRequireDefault(require("../form-label/FormLabel"));
@@ -266,7 +268,6 @@ _defineProperty(Autocomplete, "defaultProps", {
   drawer_class: null,
   page_offset: null,
   observer_element: null,
-  min_height: null,
   enable_body_lock: false,
   class: null,
   className: null,
@@ -354,7 +355,6 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes = _objectSpread(_
   drawer_class: _propTypes.default.string,
   page_offset: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
   observer_element: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
-  min_height: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
   enable_body_lock: _propTypes.default.bool,
   class: _propTypes.default.string,
   className: _propTypes.default.string,
@@ -1570,7 +1570,7 @@ var AutocompleteInstance = function (_React$PureComponent2) {
     value: function render() {
       var _getCurrentData;
 
-      var props = this._props = (0, _componentHelper.extendPropsWithContext)(this.props, Autocomplete.defaultProps, this.context.getTranslation(this.props).Autocomplete, this.context.FormRow, this.context.Autocomplete);
+      var props = this._props = (0, _componentHelper.extendPropsWithContextInClassComponent)(this.props, Autocomplete.defaultProps, this.context.getTranslation(this.props).Autocomplete, (0, _FormRowHelpers.includeValidProps)(this.context.FormRow), this.context.Autocomplete);
 
       var title = props.title,
           placeholder = props.placeholder,
@@ -1679,7 +1679,6 @@ var AutocompleteInstance = function (_React$PureComponent2) {
         'aria-haspopup': 'listbox',
         'aria-expanded': isExpanded,
         onMouseDown: this.onInputClickHandler,
-        onTouchStart: this.onInputClickHandler,
         onKeyDown: this.onInputKeyDownHandler,
         onChange: this.onInputChangeHandler,
         onFocus: this.onInputFocusHandler,

package/cjs/components/autocomplete/style/_autocomplete.scss

@@ -134,8 +134,8 @@
       cursor: text;
     }
 
-    &--has-submit-element .dnb-input__placeholder,
-    &--has-submit-element .dnb-input__input {
+    &--has-inner-element .dnb-input__placeholder,
+    &--has-inner-element .dnb-input__input {
       @include allAbove(small) {
         // same width of submit button
         padding-right: 0 !important; // use important so we avoid to have all sizes in addition