@dnb/eufemia 10.15.1 → 10.17.0

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

@@ -40,12 +40,18 @@
 :where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible {
   --anchor-color: var(--color-sea-green);
 }
-:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-left .dnb-icon {
+:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-left .dnb-icon:first-child {
   margin-right: 0.25em;
 }
-:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-right .dnb-icon {
+:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-right .dnb-icon:last-child {
   margin-left: 0.25em;
 }
+:where(:not(.dnb-anchor--no-style)).dnb-anchor__launch-icon.dnb-icon.dnb-icon--default {
+  font-size: 1.11em;
+}
+:where(:not(.dnb-anchor--no-style)).dnb-anchor__launch-icon.dnb-icon.dnb-icon--default svg path {
+  stroke-width: 1.2;
+}
 
 :not(.dnb-anchor--no-style) {
   /* stylelint-disable-next-line scss/operator-no-unspaced */
@@ -82,12 +88,18 @@
   :not(.dnb-anchor--no-style).dnb-anchor:focus-visible {
     --anchor-color: var(--color-sea-green);
   }
-  :not(.dnb-anchor--no-style).dnb-anchor--icon-left .dnb-icon {
+  :not(.dnb-anchor--no-style).dnb-anchor--icon-left .dnb-icon:first-child {
     margin-right: 0.25em;
   }
-  :not(.dnb-anchor--no-style).dnb-anchor--icon-right .dnb-icon {
+  :not(.dnb-anchor--no-style).dnb-anchor--icon-right .dnb-icon:last-child {
     margin-left: 0.25em;
   }
+  :not(.dnb-anchor--no-style).dnb-anchor__launch-icon.dnb-icon.dnb-icon--default {
+    font-size: 1.11em;
+  }
+  :not(.dnb-anchor--no-style).dnb-anchor__launch-icon.dnb-icon.dnb-icon--default svg path {
+    stroke-width: 1.2;
+  }
 }
 
 .dnb-anchor--hover {

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

@@ -1 +1 @@
-:where(:not(.dnb-anchor--no-style)).dnb-anchor{--anchor-color:var(--anchor-color--default,var(--color-sea-green));--anchor-color--active:var(--color-mint-green);--anchor-color--contrast:var(--color-emerald-green);--anchor-background--hover:var(--color-mint-green-50);--anchor-background--active:var(--color-emerald-green);color:var(--anchor-color)}:where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)){--anchor-color:var(--color-sea-green);--anchor-background-gutter:0.125em;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background--hover),calc(var(--anchor-background-gutter)*-1) 0 0 0 var(--anchor-background--hover),var(--anchor-background-gutter) 0 0 0 var(--anchor-background--hover)}@supports not (selector(*:where(*))){:where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:not(.dnb-anchor--no-hover){--anchor-color:var(--color-sea-green);--anchor-background-gutter:0.125em;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background--hover),calc(var(--anchor-background-gutter)*-1) 0 0 0 var(--anchor-background--hover),var(--anchor-background-gutter) 0 0 0 var(--anchor-background--hover)}}:where(:not(.dnb-anchor--no-style)).dnb-anchor:active{--anchor-color:var(--anchor-color--active);--anchor-background-gutter:0.125em;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background--active),calc(var(--anchor-background-gutter)*-1) 0 0 0 var(--anchor-background--active),var(--anchor-background-gutter) 0 0 0 var(--anchor-background--active)}:where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible{--anchor-color:var(--color-sea-green)}:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-left .dnb-icon{margin-right:.25em}:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-right .dnb-icon{margin-left:.25em}@supports not (selector(*:where(*))){:not(.dnb-anchor--no-style).dnb-anchor{--anchor-color:var(--anchor-color--default,var(--color-sea-green));--anchor-color--active:var(--color-mint-green);--anchor-color--contrast:var(--color-emerald-green);--anchor-background--hover:var(--color-mint-green-50);--anchor-background--active:var(--color-emerald-green);color:var(--anchor-color)}:not(.dnb-anchor--no-style).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)){--anchor-color:var(--color-sea-green);--anchor-background-gutter:0.125em;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background--hover),calc(var(--anchor-background-gutter)*-1) 0 0 0 var(--anchor-background--hover),var(--anchor-background-gutter) 0 0 0 var(--anchor-background--hover)}@supports not (selector(*:where(*))){:not(.dnb-anchor--no-style).dnb-anchor:hover:not(.dnb-anchor--no-hover){--anchor-color:var(--color-sea-green);--anchor-background-gutter:0.125em;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background--hover),calc(var(--anchor-background-gutter)*-1) 0 0 0 var(--anchor-background--hover),var(--anchor-background-gutter) 0 0 0 var(--anchor-background--hover)}}:not(.dnb-anchor--no-style).dnb-anchor:active{--anchor-color:var(--anchor-color--active);--anchor-background-gutter:0.125em;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background--active),calc(var(--anchor-background-gutter)*-1) 0 0 0 var(--anchor-background--active),var(--anchor-background-gutter) 0 0 0 var(--anchor-background--active)}:not(.dnb-anchor--no-style).dnb-anchor:focus-visible{--anchor-color:var(--color-sea-green)}:not(.dnb-anchor--no-style).dnb-anchor--icon-left .dnb-icon{margin-right:.25em}:not(.dnb-anchor--no-style).dnb-anchor--icon-right .dnb-icon{margin-left:.25em}}.dnb-anchor--hover{--anchor-color:var(--color-sea-green);--anchor-background-gutter:0.125em;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background--hover),calc(var(--anchor-background-gutter)*-1) 0 0 0 var(--anchor-background--hover),var(--anchor-background-gutter) 0 0 0 var(--anchor-background--hover)}.dnb-anchor--active{--anchor-color:var(--anchor-color--active);--anchor-background-gutter:0.125em;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background--active),calc(var(--anchor-background-gutter)*-1) 0 0 0 var(--anchor-background--active),var(--anchor-background-gutter) 0 0 0 var(--anchor-background--active)}.dnb-anchor--focus{--anchor-color:var(--color-sea-green)}
+:where(:not(.dnb-anchor--no-style)).dnb-anchor{--anchor-color:var(--anchor-color--default,var(--color-sea-green));--anchor-color--active:var(--color-mint-green);--anchor-color--contrast:var(--color-emerald-green);--anchor-background--hover:var(--color-mint-green-50);--anchor-background--active:var(--color-emerald-green);color:var(--anchor-color)}:where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)){--anchor-color:var(--color-sea-green);--anchor-background-gutter:0.125em;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background--hover),calc(var(--anchor-background-gutter)*-1) 0 0 0 var(--anchor-background--hover),var(--anchor-background-gutter) 0 0 0 var(--anchor-background--hover)}@supports not (selector(*:where(*))){:where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:not(.dnb-anchor--no-hover){--anchor-color:var(--color-sea-green);--anchor-background-gutter:0.125em;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background--hover),calc(var(--anchor-background-gutter)*-1) 0 0 0 var(--anchor-background--hover),var(--anchor-background-gutter) 0 0 0 var(--anchor-background--hover)}}:where(:not(.dnb-anchor--no-style)).dnb-anchor:active{--anchor-color:var(--anchor-color--active);--anchor-background-gutter:0.125em;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background--active),calc(var(--anchor-background-gutter)*-1) 0 0 0 var(--anchor-background--active),var(--anchor-background-gutter) 0 0 0 var(--anchor-background--active)}:where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible{--anchor-color:var(--color-sea-green)}:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-left .dnb-icon:first-child{margin-right:.25em}:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-right .dnb-icon:last-child{margin-left:.25em}:where(:not(.dnb-anchor--no-style)).dnb-anchor__launch-icon.dnb-icon.dnb-icon--default{font-size:1.11em}:where(:not(.dnb-anchor--no-style)).dnb-anchor__launch-icon.dnb-icon.dnb-icon--default svg path{stroke-width:1.2}@supports not (selector(*:where(*))){:not(.dnb-anchor--no-style).dnb-anchor{--anchor-color:var(--anchor-color--default,var(--color-sea-green));--anchor-color--active:var(--color-mint-green);--anchor-color--contrast:var(--color-emerald-green);--anchor-background--hover:var(--color-mint-green-50);--anchor-background--active:var(--color-emerald-green);color:var(--anchor-color)}:not(.dnb-anchor--no-style).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)){--anchor-color:var(--color-sea-green);--anchor-background-gutter:0.125em;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background--hover),calc(var(--anchor-background-gutter)*-1) 0 0 0 var(--anchor-background--hover),var(--anchor-background-gutter) 0 0 0 var(--anchor-background--hover)}@supports not (selector(*:where(*))){:not(.dnb-anchor--no-style).dnb-anchor:hover:not(.dnb-anchor--no-hover){--anchor-color:var(--color-sea-green);--anchor-background-gutter:0.125em;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background--hover),calc(var(--anchor-background-gutter)*-1) 0 0 0 var(--anchor-background--hover),var(--anchor-background-gutter) 0 0 0 var(--anchor-background--hover)}}:not(.dnb-anchor--no-style).dnb-anchor:active{--anchor-color:var(--anchor-color--active);--anchor-background-gutter:0.125em;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background--active),calc(var(--anchor-background-gutter)*-1) 0 0 0 var(--anchor-background--active),var(--anchor-background-gutter) 0 0 0 var(--anchor-background--active)}:not(.dnb-anchor--no-style).dnb-anchor:focus-visible{--anchor-color:var(--color-sea-green)}:not(.dnb-anchor--no-style).dnb-anchor--icon-left .dnb-icon:first-child{margin-right:.25em}:not(.dnb-anchor--no-style).dnb-anchor--icon-right .dnb-icon:last-child{margin-left:.25em}:not(.dnb-anchor--no-style).dnb-anchor__launch-icon.dnb-icon.dnb-icon--default{font-size:1.11em}:not(.dnb-anchor--no-style).dnb-anchor__launch-icon.dnb-icon.dnb-icon--default svg path{stroke-width:1.2}}.dnb-anchor--hover{--anchor-color:var(--color-sea-green);--anchor-background-gutter:0.125em;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background--hover),calc(var(--anchor-background-gutter)*-1) 0 0 0 var(--anchor-background--hover),var(--anchor-background-gutter) 0 0 0 var(--anchor-background--hover)}.dnb-anchor--active{--anchor-color:var(--anchor-color--active);--anchor-background-gutter:0.125em;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background--active),calc(var(--anchor-background-gutter)*-1) 0 0 0 var(--anchor-background--active),var(--anchor-background-gutter) 0 0 0 var(--anchor-background--active)}.dnb-anchor--focus{--anchor-color:var(--color-sea-green)}

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

@@ -44,12 +44,20 @@
     @include anchorFocus();
   }
 
-  &--icon-left .dnb-icon {
+  &--icon-left .dnb-icon:first-child {
     margin-right: 0.25em;
   }
-  &--icon-right .dnb-icon {
+  &--icon-right .dnb-icon:last-child {
     margin-left: 0.25em;
   }
+
+  // Align this icon to look the same as in v10
+  &__launch-icon.dnb-icon.dnb-icon--default {
+    font-size: 1.11em;
+    svg path {
+      stroke-width: 1.2;
+    }
+  }
 }
 
 $useClasses: true !default;

package/cjs/components/autocomplete/Autocomplete.js

@@ -1377,7 +1377,7 @@ class AutocompleteInstance extends _react.default.PureComponent {
       autoComplete: 'off',
       role: 'combobox',
       'aria-autocomplete': 'both',
-      'aria-controls': `${id}-ul`,
+      'aria-controls': isExpanded ? `${id}-ul` : undefined,
       'aria-haspopup': 'listbox',
       'aria-expanded': isExpanded,
       onMouseDown: this.onInputClickHandler,
@@ -1396,7 +1396,7 @@ class AutocompleteInstance extends _react.default.PureComponent {
         inputParams['aria-placeholder'] = undefined;
       }
     }
-    if (!hidden) {
+    if (isExpanded) {
       if (parseFloat(active_item) > -1) {
         inputParams['aria-activedescendant'] = `option-${id}-${active_item}`;
       } else if (!(0, _componentHelper.isTrue)(prevent_selection) && parseFloat(selected_item) > -1) {