@dnb/eufemia 10.24.0 → 10.25.0

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to @dnb/eufemia will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [10.25.0](https://github.com/dnbexperience/eufemia/compare/v10.24.0...v10.25.0) (2024-03-25)
+
+
+### :bug: Bug Fixes
+
+* **forms:** ensure content in Card will wrap ([#3411](https://github.com/dnbexperience/eufemia/issues/3411)) ([47eb967](https://github.com/dnbexperience/eufemia/commit/47eb967f6c9e5c50da161f7e3e3ad99cc7a145ba))
+* **forms:** ensure context support ([#3409](https://github.com/dnbexperience/eufemia/issues/3409)) ([34b4adb](https://github.com/dnbexperience/eufemia/commit/34b4adb106f79d8b60d684d964feef7ed5789968))
+* show error in console when Eufemia CSS and JS versions do not match ([#3410](https://github.com/dnbexperience/eufemia/issues/3410)) ([3d7bcbf](https://github.com/dnbexperience/eufemia/commit/3d7bcbf4f86e249db41e0249df16e04bac04777a))
+
+
+### :sparkles: Features
+
+* **Accordion:** add additional Sbanken styling variables ([#3406](https://github.com/dnbexperience/eufemia/issues/3406)) ([dfa8479](https://github.com/dnbexperience/eufemia/commit/dfa8479a94f3e64aa9fbcee9e7192aad38ecc36d))
+* **Form.Handler:** enhance async behaviour ([#3405](https://github.com/dnbexperience/eufemia/issues/3405)) ([78b4895](https://github.com/dnbexperience/eufemia/commit/78b4895922fe5b68da7c9c20a700b6be857303aa))
+* **forms:** add internal field state to `filterData` as a fourth parameter ([#3414](https://github.com/dnbexperience/eufemia/issues/3414)) ([4a6a1ae](https://github.com/dnbexperience/eufemia/commit/4a6a1ae7721439dd7a22ca29289148c7703ff811))
+* **Theme:** update sbanken theme color variables ([#3400](https://github.com/dnbexperience/eufemia/issues/3400)) ([05607cf](https://github.com/dnbexperience/eufemia/commit/05607cffa8a1a1651000bcbf7c05a78fca62495b))
+
 ## [10.24.0](https://github.com/dnbexperience/eufemia/compare/v10.23.0...v10.24.0) (2024-03-22)
 
 

package/cjs/components/accordion/style/dnb-accordion.css

@@ -15,8 +15,11 @@
   --accordion-header-wrapper-margin--icon-right: 1rem;
   --accordion-header-icon-gutter: 1rem;
   --accordion-header-icon-margin: 1rem;
+  --accordion-header-icon-alignment: flex-start;
   --accordion-title-font-weight: var(--font-weight-basis);
   --accordion-title-font-weight--expanded: var(--font-weight-medium);
+  --accordion-content-margin: 1rem 0 0 0;
+  --accordion-content-padding: 0;
   position: relative;
   display: flex;
   flex-direction: column;
@@ -57,7 +60,7 @@
   margin: 0 1rem;
 }
 .dnb-accordion__header__icon {
-  align-self: flex-start;
+  align-self: var(--accordion-header-icon-alignment);
   margin: var(--accordion-header-margin-vertical) var(--accordion-header-icon-gutter) var(--accordion-header-margin-vertical) var(--accordion-header-icon-margin);
   font-size: var(--font-size-small);
   line-height: var(--line-height-small);
@@ -120,7 +123,8 @@
 }
 .dnb-accordion__content__inner {
   width: 100%;
-  margin-top: 1rem;
+  margin: var(--accordion-content-margin);
+  padding: var(--accordion-content-padding);
 }
 .dnb-accordion-group--single-container {
   transition: min-height 1s var(--accordion-easing);

package/cjs/components/accordion/style/dnb-accordion.min.css

@@ -1,3 +1,3 @@
-.dnb-accordion{--accordion-border-width:0.0625rem;--accordion-border-radius:0.5rem;--accordion-easing:var(--easing-default);--accordion-header-margin-vertical:1.25rem;--accordion-header-margin-vertical--description:0.75rem;--accordion-header-wrapper-margin:1rem;--accordion-header-wrapper-margin--icon-right:1rem;--accordion-header-icon-gutter:1rem;--accordion-header-icon-margin:1rem;--accordion-title-font-weight:var(--font-weight-basis);--accordion-title-font-weight--expanded:var(--font-weight-medium);display:flex;flex-direction:column;font-size:var(--font-size-small);line-height:var(--line-height-basis);position:relative}.dnb-accordion__header{align-items:center;border:var(--accordion-border-width) solid transparent;border-radius:var(--accordion-border-radius);cursor:pointer;display:flex;outline:none}.dnb-accordion__header:focus{-webkit-user-select:none;user-select:none}.dnb-accordion__header *{pointer-events:none}.dnb-accordion__header--prevent-click{pointer-events:none;-webkit-user-select:none;user-select:none}.dnb-accordion__header__wrapper{display:flex;flex-direction:column;margin:var(--accordion-header-margin-vertical) var(--accordion-header-wrapper-margin) var(--accordion-header-margin-vertical) 0;width:100%}.dnb-accordion__header--description .dnb-accordion__header__wrapper{margin-bottom:var(--accordion-header-margin-vertical--description);margin-top:var(--accordion-header-margin-vertical--description)}.dnb-accordion__header__container{margin:0 1rem}.dnb-accordion__header__icon{align-self:flex-start;font-size:var(--font-size-small);line-height:var(--line-height-small);margin:var(--accordion-header-margin-vertical) var(--accordion-header-icon-gutter) var(--accordion-header-margin-vertical) var(--accordion-header-icon-margin);transition:transform .4s var(--accordion-easing)}.dnb-accordion__header--description .dnb-accordion__header__icon{margin-top:var(--accordion-header-margin-vertical--description)}.dnb-accordion__header--icon-right{justify-content:space-between}.dnb-accordion__header--icon-right .dnb-accordion__header__icon{margin-left:var(--accordion-header-icon-gutter);margin-right:var(--accordion-header-icon-margin);order:3}.dnb-accordion__header--icon-right .dnb-accordion__header__container{order:1}.dnb-accordion__header--icon-right .dnb-accordion__header__wrapper{margin-left:var(--accordion-header-wrapper-margin--icon-right);margin-right:0;order:2}.dnb-accordion__header--icon-right .dnb-accordion__header__wrapper+.dnb-accordion__header__container{margin-right:0}.dnb-accordion__header--icon-right .dnb-accordion__header__container+.dnb-accordion__header__wrapper{margin-left:0}.dnb-accordion__header--expanded{--accordion-title-font-weight:var(
+.dnb-accordion{--accordion-border-width:0.0625rem;--accordion-border-radius:0.5rem;--accordion-easing:var(--easing-default);--accordion-header-margin-vertical:1.25rem;--accordion-header-margin-vertical--description:0.75rem;--accordion-header-wrapper-margin:1rem;--accordion-header-wrapper-margin--icon-right:1rem;--accordion-header-icon-gutter:1rem;--accordion-header-icon-margin:1rem;--accordion-header-icon-alignment:flex-start;--accordion-title-font-weight:var(--font-weight-basis);--accordion-title-font-weight--expanded:var(--font-weight-medium);--accordion-content-margin:1rem 0 0 0;--accordion-content-padding:0;display:flex;flex-direction:column;font-size:var(--font-size-small);line-height:var(--line-height-basis);position:relative}.dnb-accordion__header{align-items:center;border:var(--accordion-border-width) solid transparent;border-radius:var(--accordion-border-radius);cursor:pointer;display:flex;outline:none}.dnb-accordion__header:focus{-webkit-user-select:none;user-select:none}.dnb-accordion__header *{pointer-events:none}.dnb-accordion__header--prevent-click{pointer-events:none;-webkit-user-select:none;user-select:none}.dnb-accordion__header__wrapper{display:flex;flex-direction:column;margin:var(--accordion-header-margin-vertical) var(--accordion-header-wrapper-margin) var(--accordion-header-margin-vertical) 0;width:100%}.dnb-accordion__header--description .dnb-accordion__header__wrapper{margin-bottom:var(--accordion-header-margin-vertical--description);margin-top:var(--accordion-header-margin-vertical--description)}.dnb-accordion__header__container{margin:0 1rem}.dnb-accordion__header__icon{align-self:var(--accordion-header-icon-alignment);font-size:var(--font-size-small);line-height:var(--line-height-small);margin:var(--accordion-header-margin-vertical) var(--accordion-header-icon-gutter) var(--accordion-header-margin-vertical) var(--accordion-header-icon-margin);transition:transform .4s var(--accordion-easing)}.dnb-accordion__header--description .dnb-accordion__header__icon{margin-top:var(--accordion-header-margin-vertical--description)}.dnb-accordion__header--icon-right{justify-content:space-between}.dnb-accordion__header--icon-right .dnb-accordion__header__icon{margin-left:var(--accordion-header-icon-gutter);margin-right:var(--accordion-header-icon-margin);order:3}.dnb-accordion__header--icon-right .dnb-accordion__header__container{order:1}.dnb-accordion__header--icon-right .dnb-accordion__header__wrapper{margin-left:var(--accordion-header-wrapper-margin--icon-right);margin-right:0;order:2}.dnb-accordion__header--icon-right .dnb-accordion__header__wrapper+.dnb-accordion__header__container{margin-right:0}.dnb-accordion__header--icon-right .dnb-accordion__header__container+.dnb-accordion__header__wrapper{margin-left:0}.dnb-accordion__header--expanded{--accordion-title-font-weight:var(
     --accordion-title-font-weight--expanded
-  )}.dnb-accordion__header__title{font-size:var(--font-size-basis);font-weight:var(--accordion-title-font-weight);line-height:var(--line-height-basis)}.dnb-accordion__header__description{font-size:var(--font-size-small);font-weight:var(--font-weight-basis);line-height:var(--line-height-small)}.dnb-accordion__header__description+.dnb-accordion__header__title,.dnb-accordion__header__title+.dnb-accordion__header__description{margin-top:.25rem}.dnb-accordion--expanded>.dnb-accordion__header .dnb-accordion__header__icon{transform:rotate(-180deg)}.dnb-accordion__content{display:flex;transition:height .4s var(--accordion-easing),opacity .6s var(--accordion-easing);width:100%;will-change:height}.dnb-accordion__content__inner{margin-top:1rem;width:100%}.dnb-accordion-group--single-container{transition:min-height 1s var(--accordion-easing)}.dnb-accordion-group--single-container .dnb-accordion{max-width:60rem;position:static}@media screen and (min-width:40em){.dnb-accordion-group--single-container .dnb-accordion__header{width:40%}.dnb-accordion-group--single-container .dnb-accordion__content{margin-left:1rem;transition:opacity 1s var(--accordion-easing)}.dnb-accordion-group--single-container .dnb-accordion__content__inner{margin-top:0}.dnb-accordion-group--single-container .dnb-accordion>.dnb-accordion__header .dnb-accordion__header__icon{transform:rotate(-90deg)}}.dnb-accordion-group--single-container .dnb-accordion-group__children{max-width:60rem}@media screen and (min-width:40em){.dnb-accordion-group--single-container .dnb-accordion-group__children{display:flex;flex-direction:column;position:relative}.dnb-accordion-group--single-container .dnb-accordion-group__children .dnb-accordion__content{position:absolute;right:0;top:0;width:60%;z-index:10}}.dnb-accordion>.dnb-accordion__header--no-animation .dnb-accordion__header__icon,html[data-visual-test] .dnb-accordion .dnb-accordion__header .dnb-accordion__header__icon{transition:none}
+  )}.dnb-accordion__header__title{font-size:var(--font-size-basis);font-weight:var(--accordion-title-font-weight);line-height:var(--line-height-basis)}.dnb-accordion__header__description{font-size:var(--font-size-small);font-weight:var(--font-weight-basis);line-height:var(--line-height-small)}.dnb-accordion__header__description+.dnb-accordion__header__title,.dnb-accordion__header__title+.dnb-accordion__header__description{margin-top:.25rem}.dnb-accordion--expanded>.dnb-accordion__header .dnb-accordion__header__icon{transform:rotate(-180deg)}.dnb-accordion__content{display:flex;transition:height .4s var(--accordion-easing),opacity .6s var(--accordion-easing);width:100%;will-change:height}.dnb-accordion__content__inner{margin:var(--accordion-content-margin);padding:var(--accordion-content-padding);width:100%}.dnb-accordion-group--single-container{transition:min-height 1s var(--accordion-easing)}.dnb-accordion-group--single-container .dnb-accordion{max-width:60rem;position:static}@media screen and (min-width:40em){.dnb-accordion-group--single-container .dnb-accordion__header{width:40%}.dnb-accordion-group--single-container .dnb-accordion__content{margin-left:1rem;transition:opacity 1s var(--accordion-easing)}.dnb-accordion-group--single-container .dnb-accordion__content__inner{margin-top:0}.dnb-accordion-group--single-container .dnb-accordion>.dnb-accordion__header .dnb-accordion__header__icon{transform:rotate(-90deg)}}.dnb-accordion-group--single-container .dnb-accordion-group__children{max-width:60rem}@media screen and (min-width:40em){.dnb-accordion-group--single-container .dnb-accordion-group__children{display:flex;flex-direction:column;position:relative}.dnb-accordion-group--single-container .dnb-accordion-group__children .dnb-accordion__content{position:absolute;right:0;top:0;width:60%;z-index:10}}.dnb-accordion>.dnb-accordion__header--no-animation .dnb-accordion__header__icon,html[data-visual-test] .dnb-accordion .dnb-accordion__header .dnb-accordion__header__icon{transition:none}

package/cjs/components/accordion/style/dnb-accordion.scss

@@ -21,11 +21,16 @@
   // icon
   --accordion-header-icon-gutter: 1rem;
   --accordion-header-icon-margin: 1rem;
+  --accordion-header-icon-alignment: flex-start;
 
   // Title
   --accordion-title-font-weight: var(--font-weight-basis);
   --accordion-title-font-weight--expanded: var(--font-weight-medium);
 
+  // Content
+  --accordion-content-margin: 1rem 0 0 0;
+  --accordion-content-padding: 0;
+
   position: relative;
 
   display: flex;
@@ -76,7 +81,7 @@
       margin: 0 1rem;
     }
     &__icon {
-      align-self: flex-start;
+      align-self: var(--accordion-header-icon-alignment);
 
       margin: var(--accordion-header-margin-vertical)
         var(--accordion-header-icon-gutter)
@@ -155,7 +160,8 @@
 
     &__inner {
       width: 100%;
-      margin-top: 1rem;
+      margin: var(--accordion-content-margin);
+      padding: var(--accordion-content-padding);
     }
   }
 

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

@@ -28,6 +28,9 @@
     3.5rem - var(--sb-accordion-frame-width)
   );
   --sb-accordion-content-border-radius: 0 0 0.125rem 0.125rem;
+  --accordion-content-margin: 0;
+  --accordion-content-padding: 0 1rem 1rem
+    var(--sb-accordion-content-padding-left);
   color: var(--sb-color-text);
 }
 .dnb-accordion__header, .dnb-accordion__content {
@@ -80,14 +83,12 @@ html:not([data-whatintent=touch]) .dnb-accordion__header:hover:not([disabled]) {
   --sb-accordion-content-padding-left: calc(
     1.5rem - var(--sb-accordion-frame-width)
   );
+  --accordion-content-padding: 0 1rem 1rem
+    var(--sb-accordion-content-padding-left);
 }
 .dnb-accordion__header[disabled] * {
   color: var(--sb-color-gray-dark-2);
 }
-.dnb-accordion__content__inner {
-  margin-top: 0;
-  padding: 0 1rem 1rem var(--sb-accordion-content-padding-left);
-}
 .dnb-accordion--expanded {
   --sb-accordion-background: var(--sb-color-violet-light-4);
   --sb-accordion-frame-color: var(--sb-color-violet);

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

@@ -1 +1 @@
-.dnb-accordion{--accordion-border-width:0;--accordion-border-radius:0;--accordion-header-margin-vertical:1rem;--accordion-header-margin-vertical--description:0.5rem;--accordion-header-wrapper-margin--icon-right:calc(1.5rem - var(--sb-accordion-frame-width));--sb-accordion-header-border-radius--expanded:0.125rem 0.125rem 0 0;--sb-accordion-header-border-radius--hover:0.125rem;--sb-accordion-header-border-radius--hover-expanded:0.125rem 0.125rem 0 0;--accordion-header-icon-gutter:0.5rem;--accordion-header-icon-margin:calc(1.5rem - var(--sb-accordion-frame-width));--sb-accordion-frame-color:transparent;--sb-accordion-frame-width:0.1875rem;--sb-accordion-frame-width--active:0rem;--sb-accordion-content-padding-left:calc(3.5rem - var(--sb-accordion-frame-width));--sb-accordion-content-border-radius:0 0 0.125rem 0.125rem;color:var(--sb-color-text)}.dnb-accordion__content,.dnb-accordion__header{background-color:var(--sb-accordion-background,transparent);border-left:var(--sb-accordion-frame-width) solid var(--sb-accordion-frame-color)}html:not([data-whatintent=touch]) .dnb-accordion__header:focus-visible[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-accordion__header:focus-visible:not([disabled]){--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:var(--sb-color-blue-light-3);border-color:transparent;border-radius:.125rem;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--border-color);outline:none;z-index:1}html:not([data-whatintent=touch]) .dnb-accordion__header:focus-visible:not([disabled]) .dnb-accordion__header__icon{color:var(--border-color)}html:not([data-whatintent=touch]) .dnb-accordion__header:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-accordion__header:hover:not([disabled]){background-color:var(--sb-color-violet-light-2);border-radius:var(--sb-accordion-header-border-radius--hover)}.dnb-accordion__header:active[disabled],html:not([data-whatintent=touch]) .dnb-accordion__header:active[disabled]{cursor:not-allowed}.dnb-accordion__header:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-accordion__header:active:not([disabled]){--border-color: ;--border-width:0.0625rem;--border-color:var(--sb-color-violet);background-color:var(--sb-color-white);border-left-width:var(--sb-accordion-frame-width--active);box-shadow:inset 0 0 0 var(--border-width) var(--border-color);padding-left:calc(var(--sb-accordion-frame-width) - var(--sb-accordion-frame-width--active))}.dnb-accordion__header__container,.dnb-accordion__header__icon{color:var(--sb-color-violet)}.dnb-accordion__header--icon-right{--accordion-header-icon-margin:1.5rem}.dnb-accordion__header--icon-right+.dnb-accordion__content{--sb-accordion-content-padding-left:calc(1.5rem - var(--sb-accordion-frame-width))}.dnb-accordion__header[disabled] *{color:var(--sb-color-gray-dark-2)}.dnb-accordion__content__inner{margin-top:0;padding:0 1rem 1rem var(--sb-accordion-content-padding-left)}.dnb-accordion--expanded{--sb-accordion-background:var(--sb-color-violet-light-4);--sb-accordion-frame-color:var(--sb-color-violet);--sb-accordion-frame-width--active:0.125rem}html:not([data-whatintent=touch]) .dnb-accordion--expanded>.dnb-accordion__header:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-accordion--expanded>.dnb-accordion__header:hover:not([disabled]){border-radius:var(--sb-accordion-header-border-radius--hover-expanded)}.dnb-accordion--expanded>.dnb-accordion__header--expanded{border-radius:var(--sb-accordion-header-border-radius--expanded)}.dnb-accordion--expanded>.dnb-accordion__content{border-radius:var(--sb-accordion-content-border-radius)}.dnb-accordion--expanded>.dnb-accordion__header[disabled],.dnb-accordion--expanded>.dnb-accordion__header[disabled]+.dnb-accordion__content{--sb-accordion-background:var(--sb-color-gray-light-2);--sb-accordion-frame-color:var(--sb-color-gray-dark-2)}
+.dnb-accordion{--accordion-border-width:0;--accordion-border-radius:0;--accordion-header-margin-vertical:1rem;--accordion-header-margin-vertical--description:0.5rem;--accordion-header-wrapper-margin--icon-right:calc(1.5rem - var(--sb-accordion-frame-width));--sb-accordion-header-border-radius--expanded:0.125rem 0.125rem 0 0;--sb-accordion-header-border-radius--hover:0.125rem;--sb-accordion-header-border-radius--hover-expanded:0.125rem 0.125rem 0 0;--accordion-header-icon-gutter:0.5rem;--accordion-header-icon-margin:calc(1.5rem - var(--sb-accordion-frame-width));--sb-accordion-frame-color:transparent;--sb-accordion-frame-width:0.1875rem;--sb-accordion-frame-width--active:0rem;--sb-accordion-content-padding-left:calc(3.5rem - var(--sb-accordion-frame-width));--sb-accordion-content-border-radius:0 0 0.125rem 0.125rem;--accordion-content-margin:0;--accordion-content-padding:0 1rem 1rem var(--sb-accordion-content-padding-left);color:var(--sb-color-text)}.dnb-accordion__content,.dnb-accordion__header{background-color:var(--sb-accordion-background,transparent);border-left:var(--sb-accordion-frame-width) solid var(--sb-accordion-frame-color)}html:not([data-whatintent=touch]) .dnb-accordion__header:focus-visible[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-accordion__header:focus-visible:not([disabled]){--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:var(--sb-color-blue-light-3);border-color:transparent;border-radius:.125rem;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--border-color);outline:none;z-index:1}html:not([data-whatintent=touch]) .dnb-accordion__header:focus-visible:not([disabled]) .dnb-accordion__header__icon{color:var(--border-color)}html:not([data-whatintent=touch]) .dnb-accordion__header:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-accordion__header:hover:not([disabled]){background-color:var(--sb-color-violet-light-2);border-radius:var(--sb-accordion-header-border-radius--hover)}.dnb-accordion__header:active[disabled],html:not([data-whatintent=touch]) .dnb-accordion__header:active[disabled]{cursor:not-allowed}.dnb-accordion__header:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-accordion__header:active:not([disabled]){--border-color: ;--border-width:0.0625rem;--border-color:var(--sb-color-violet);background-color:var(--sb-color-white);border-left-width:var(--sb-accordion-frame-width--active);box-shadow:inset 0 0 0 var(--border-width) var(--border-color);padding-left:calc(var(--sb-accordion-frame-width) - var(--sb-accordion-frame-width--active))}.dnb-accordion__header__container,.dnb-accordion__header__icon{color:var(--sb-color-violet)}.dnb-accordion__header--icon-right{--accordion-header-icon-margin:1.5rem}.dnb-accordion__header--icon-right+.dnb-accordion__content{--sb-accordion-content-padding-left:calc(1.5rem - var(--sb-accordion-frame-width));--accordion-content-padding:0 1rem 1rem var(--sb-accordion-content-padding-left)}.dnb-accordion__header[disabled] *{color:var(--sb-color-gray-dark-2)}.dnb-accordion--expanded{--sb-accordion-background:var(--sb-color-violet-light-4);--sb-accordion-frame-color:var(--sb-color-violet);--sb-accordion-frame-width--active:0.125rem}html:not([data-whatintent=touch]) .dnb-accordion--expanded>.dnb-accordion__header:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-accordion--expanded>.dnb-accordion__header:hover:not([disabled]){border-radius:var(--sb-accordion-header-border-radius--hover-expanded)}.dnb-accordion--expanded>.dnb-accordion__header--expanded{border-radius:var(--sb-accordion-header-border-radius--expanded)}.dnb-accordion--expanded>.dnb-accordion__content{border-radius:var(--sb-accordion-content-border-radius)}.dnb-accordion--expanded>.dnb-accordion__header[disabled],.dnb-accordion--expanded>.dnb-accordion__header[disabled]+.dnb-accordion__content{--sb-accordion-background:var(--sb-color-gray-light-2);--sb-accordion-frame-color:var(--sb-color-gray-dark-2)}

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

@@ -38,6 +38,9 @@
     3.5rem - var(--sb-accordion-frame-width)
   );
   --sb-accordion-content-border-radius: 0 0 0.125rem 0.125rem;
+  --accordion-content-margin: 0;
+  --accordion-content-padding: 0 1rem 1rem
+    var(--sb-accordion-content-padding-left);
 
   color: var(--sb-color-text);
 
@@ -89,6 +92,8 @@
         --sb-accordion-content-padding-left: calc(
           1.5rem - var(--sb-accordion-frame-width)
         );
+        --accordion-content-padding: 0 1rem 1rem
+          var(--sb-accordion-content-padding-left);
       }
     }
 
@@ -100,11 +105,6 @@
     }
   }
 
-  &__content__inner {
-    margin-top: 0;
-    padding: 0 1rem 1rem var(--sb-accordion-content-padding-left);
-  }
-
   &--expanded {
     --sb-accordion-background: var(--sb-color-violet-light-4);
     --sb-accordion-frame-color: var(--sb-color-violet);

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

@@ -210,21 +210,9 @@ export interface AutocompleteProps
    * Define a custom class for the internal drawer-list. This makes it possible more easily customize the drawer-list style with styled-components and the `css` style method. Defaults to `null`.
    */
   drawer_class?: string;
-  /**
-   * Will be called for every key change the users makes. Returns an object with the input `value` inside `{ value, event, attributes }` including <a href="/uilib/components/autocomplete/events#dynamically-change-data">these methods</a>.
-   */
   on_type?: (...args: any[]) => any;
-  /**
-   * Will be called on user generated focus action. Returns an object with the input `value` inside `{ value, event, attributes }` including <a href="/uilib/components/autocomplete/events#dynamically-change-data">these methods</a>.
-   */
   on_focus?: (...args: any[]) => any;
-  /**
-   * Will be called on user generated blur action. Returns an object with the input `value` inside `{ value, event, attributes }` including <a href="/uilib/components/autocomplete/events#dynamically-change-data">these methods</a>.
-   */
   on_blur?: (...args: any[]) => any;
-  /**
-   * Will be called once the users selects an item by a click or keyboard navigation. Returns an object with the new selected `data` item `{ data, event, attributes, value, active_item }` including <a href="/uilib/components/autocomplete/events#dynamically-change-data">these methods</a>. The "active_item" property is the currently selected item by keyboard navigation
-   */
   on_select?: (...args: any[]) => any;
   on_state_update?: (...args: any[]) => any;
 }
@@ -236,9 +224,6 @@ export default class Autocomplete extends React.Component<
   static HorizontalItem: ({
     children
   }: {
-    /**
-     * <em>(required)</em> the data we want to fill the list with. Provide the data as a `JSON string`, `array` or `object` in these <a href="/uilib/components/fragments/drawer-list/info#data-structure">data structure</a>. <br /> If you don&#39;t have to define a `value`, you can also send in a `function` which will be called once the user opens the DrawerList.
-     */
     children: React.ReactNode;
   }) => JSX.Element;
   render(): JSX.Element;

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

@@ -0,0 +1,3 @@
+import { PropertiesTableProps } from '../../shared/types';
+export declare const autocompleteProperties: PropertiesTableProps;
+export declare const AutocompleteEvents: PropertiesTableProps;

package/cjs/components/autocomplete/AutocompleteDocs.js

@@ -0,0 +1,293 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.autocompleteProperties = exports.AutocompleteEvents = void 0;
+const autocompleteProperties = {
+  mode: {
+    doc: 'If set to `async`, it prevents showing the "no options" message during typing / filtering. Defaults to `sync`.',
+    type: 'string',
+    status: 'optional'
+  },
+  input_value: {
+    doc: 'Lets you define a custom input value.',
+    type: 'string',
+    status: 'optional'
+  },
+  placeholder: {
+    doc: 'Use this to define the pre-filled placeholder text in the input. Defaults to `title="Skriv og velg"`.',
+    type: 'string',
+    status: 'optional'
+  },
+  title: {
+    doc: 'Give a title to let the user know what they have to do. Defaults to `Skriv og få alternativer`.',
+    type: 'React.Node',
+    status: 'optional'
+  },
+  disable_filter: {
+    doc: 'If set to `true`, word highlighting will still be active, but no options will be filtered out. Defaults to `false`.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  disable_highlighting: {
+    doc: 'If set to `true`, word highlighting will be disabled, but the options will still get filtered. Defaults to `false`.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  disable_reorder: {
+    doc: 'If set to `true`, reordering of search results will be disabled. Defaults to `false`.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  search_numbers: {
+    doc: 'If set to `true` and `search_in_word_index` is not set, the user will be able to more easily search and filter e.g. bank account numbers. Defaults to `false`.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  search_in_word_index: {
+    doc: 'This gives you the possibility to change the threshold number, which defines from what word on we search "inside words". Defaults to `3`.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  keep_value: {
+    doc: 'Use `true` to not remove the typed value on input blur, if it is invalid. By default, the typed value will disappear / replaced by a selected value from the data list during the input field blur. Defaults to `false`.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  keep_selection: {
+    doc: 'Use `true` to not remove selected item on input blur, when the input value is empty. Defaults to `false`.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  keep_value_and_selection: {
+    doc: 'Like `keep_value` – but would not reset to the selected value during input field blur. Also, the selected value would still be kept. Defaults to `false`.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  prevent_selection: {
+    doc: 'If set to `true`, no permanent selection will be made. Also, the typed value will not disappear on input blur (like `keep_value`). Defaults to `false`.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  show_clear_button: {
+    doc: 'If set to `true`, a clear button is shown inside the input field. Defaults to `false`.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  icon: {
+    doc: 'To be included in the autocomplete input.',
+    type: ['string', 'React.Node'],
+    status: 'optional'
+  },
+  icon_size: {
+    doc: 'Change the size of the icon pragmatically.',
+    type: 'string',
+    status: 'optional'
+  },
+  icon_position: {
+    doc: 'Position of the icon inside the autocomplete. Set to `left` or `right`. Defaults to `left`.',
+    type: 'string',
+    status: 'optional'
+  },
+  input_icon: {
+    doc: 'Same as `icon`.',
+    type: ['string', 'React.Node'],
+    status: 'optional'
+  },
+  triangle_position: {
+    doc: 'Position of icon arrow / triangle the drawer. Set to `left` or `right`. Defaults to `left`.',
+    type: 'string',
+    status: 'optional'
+  },
+  size: {
+    doc: 'Define the height of the Autocomplete. Can be set to `small`, `default`, `medium` and `large`. Defaults to `default`.',
+    type: 'string',
+    status: 'optional'
+  },
+  drawer_class: {
+    doc: 'Define a custom class for the internal drawer-list. This makes it possible more easily customize the drawer-list style with styled-components and the `css` style method. Defaults to `null`.',
+    type: 'string',
+    status: 'optional'
+  },
+  show_submit_button: {
+    doc: 'Use `true` to show a Autocomplete button to toggle the <a href="/uilib/components/fragments/drawer-list">DrawerList</a>. Defaults to `false`.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  align_autocomplete: {
+    doc: 'Use `right` to change the options alignment direction. Defaults to `left`.',
+    type: 'string',
+    status: 'optional'
+  },
+  no_options: {
+    doc: 'Text show in the "no options" item. Defaults to `Ingen alternativer`.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  aria_live_options: {
+    doc: 'Text read out by screen readers. This way users with screen readers know how many options they got during typing. Defaults to `%s alternativer`.',
+    type: 'React.Node',
+    status: 'optional'
+  },
+  show_all: {
+    doc: 'Text that lets a user unravel all the available options. Defaults to `Vis alt`.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  indicator_label: {
+    doc: 'Text show on indicator "options" item. Defaults to `Henter data ...`.',
+    type: 'React.Node',
+    status: 'optional'
+  },
+  show_options_sr: {
+    doc: 'Only for screen readers. Title of the button to show the suggestions / options. It is always present and when activating, it opens the DrawerList and sets the focus on it. Defaults to `Bla gjennom alternativer`.',
+    type: 'string',
+    status: 'optional'
+  },
+  selected_sr: {
+    doc: 'Only for screen readers (VoiceOver). The label used to announce the selected item. Defaults to `Valgt:`.',
+    type: 'string',
+    status: 'optional'
+  },
+  submit_button_title: {
+    doc: 'Title on submit button. Defaults to `Vis alternativer`.',
+    type: 'React.Node',
+    status: 'optional'
+  },
+  submit_button_icon: {
+    doc: 'The icon used in the submit button. Defaults to `chevron_down`.',
+    type: ['string', 'React.Element'],
+    status: 'optional'
+  },
+  submit_element: {
+    doc: 'Replace the dropdown / submit button with a custom React element. Defaults to the input SubmitButton `import { SubmitButton } from &#39;@dnb/eufemia/components/input/Input&#39;`.',
+    type: 'React.Node',
+    status: 'optional'
+  },
+  opened: {
+    doc: 'If set to `true`, the Autocomplete will be rendered initially with a visible and accessible data list / options.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  open_on_focus: {
+    doc: 'Use `true` to auto open the list once the user is entering the input field with the keyboard.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  stretch: {
+    doc: 'If set to `true`, then the autocomplete will be 100% in available `width`.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  skip_portal: {
+    doc: 'Set to `true` to disable the React Portal behavior. Defaults to `false`.',
+    type: 'string',
+    status: 'optional'
+  },
+  status: {
+    doc: 'Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.',
+    type: 'string',
+    status: 'optional'
+  },
+  status_state: {
+    doc: 'Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.',
+    type: 'string',
+    status: 'optional'
+  },
+  status_props: {
+    doc: 'Use an object to define additional FormStatus properties.',
+    type: 'object',
+    status: 'optional'
+  },
+  globalStatus: {
+    doc: 'The <a href="/uilib/components/global-status/properties/#configuration-object">configuration</a> used for the target <a href="/uilib/components/global-status">GlobalStatus</a>.',
+    type: 'object',
+    status: 'optional'
+  },
+  label: {
+    doc: 'Prepends the Form Label component. If no ID is provided, a random ID is created.',
+    type: 'React.Node',
+    status: 'optional'
+  },
+  label_direction: {
+    doc: 'Use `label_direction="vertical"` to change the label layout direction. Defaults to `horizontal`.',
+    type: 'React.Node',
+    status: 'optional'
+  },
+  label_sr_only: {
+    doc: 'Use `true` to make the label only readable by screen readers.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  suffix: {
+    doc: 'Text describing the content of the Autocomplete more than the label. You can also send in a React component, so it gets wrapped inside the Autocomplete component.',
+    type: 'React.Node',
+    status: 'optional'
+  },
+  skeleton: {
+    doc: 'If set to `true`, an overlaying skeleton with animation will be shown.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  input_ref: {
+    doc: 'Use a React.Ref to get access to the `input` DOM element.',
+    type: 'React.Ref',
+    status: 'optional'
+  },
+  input_element: {
+    doc: 'Lets you provide a custom React element as the input HTML element.',
+    type: ['string', 'React.Element'],
+    status: 'optional'
+  },
+  '[DrawerList](/uilib/components/fragments/drawer-list/properties)': {
+    doc: 'all DrawerList properties.',
+    type: 'Various',
+    status: 'optional'
+  },
+  '[Space](/uilib/layout/space/properties)': {
+    doc: 'Spacing properties like `top` or `bottom` are supported.',
+    type: ['string', 'object'],
+    status: 'optional'
+  }
+};
+exports.autocompleteProperties = autocompleteProperties;
+const AutocompleteEvents = {
+  on_type: {
+    doc: 'Will be called for every key change the users makes. Returns an object with the input `value` inside `{ value, event, attributes }` including <a href="/uilib/components/autocomplete/events#dynamically-change-data">these methods</a>.',
+    type: 'function',
+    status: 'optional'
+  },
+  on_focus: {
+    doc: 'Will be called on user generated focus action. Returns an object with the input `value` inside `{ value, event, attributes }` including <a href="/uilib/components/autocomplete/events#dynamically-change-data">these methods</a>.',
+    type: 'function',
+    status: 'optional'
+  },
+  on_blur: {
+    doc: 'Will be called on user generated blur action. Returns an object with the input `value` inside `{ value, event, attributes }` including <a href="/uilib/components/autocomplete/events#dynamically-change-data">these methods</a>.',
+    type: 'function',
+    status: 'optional'
+  },
+  on_change: {
+    doc: 'Will be called on state changes made by the user. Returns an object with the new selected `data` item `{ data, event, attributes, value }` including <a href="/uilib/components/autocomplete/events#dynamically-change-data">these methods</a>.',
+    type: 'function',
+    status: 'optional'
+  },
+  on_select: {
+    doc: 'Will be called once the users selects an item by a click or keyboard navigation. Returns an object with the new selected `data` item `{ data, event, attributes, value, active_item }` including <a href="/uilib/components/autocomplete/events#dynamically-change-data">these methods</a>. The "active_item" property is the currently selected item by keyboard navigation',
+    type: 'function',
+    status: 'optional'
+  },
+  on_show: {
+    doc: 'Will be called once the user presses the autocomplete. Returns the data item `{ data, attributes }`.',
+    type: 'function',
+    status: 'optional'
+  },
+  on_hide: {
+    doc: 'Will be called once the user presses the autocomplete again, or clicks somewhere else. Returns the data item `{ data, attributes }`.',
+    type: 'function',
+    status: 'optional'
+  }
+};
+exports.AutocompleteEvents = AutocompleteEvents;
+//# sourceMappingURL=AutocompleteDocs.js.map

package/cjs/components/autocomplete/AutocompleteDocs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutocompleteDocs.js","names":["autocompleteProperties","mode","doc","type","status","input_value","placeholder","title","disable_filter","disable_highlighting","disable_reorder","search_numbers","search_in_word_index","keep_value","keep_selection","keep_value_and_selection","prevent_selection","show_clear_button","icon","icon_size","icon_position","input_icon","triangle_position","size","drawer_class","show_submit_button","align_autocomplete","no_options","aria_live_options","show_all","indicator_label","show_options_sr","selected_sr","submit_button_title","submit_button_icon","submit_element","opened","open_on_focus","stretch","skip_portal","status_state","status_props","globalStatus","label","label_direction","label_sr_only","suffix","skeleton","input_ref","input_element","exports","AutocompleteEvents","on_type","on_focus","on_blur","on_change","on_select","on_show","on_hide"],"sources":["../../../../src/components/autocomplete/AutocompleteDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const autocompleteProperties: PropertiesTableProps = {\n  mode: {\n    doc: 'If set to `async`, it prevents showing the \"no options\" message during typing / filtering. Defaults to `sync`.',\n    type: 'string',\n    status: 'optional',\n  },\n  input_value: {\n    doc: 'Lets you define a custom input value.',\n    type: 'string',\n    status: 'optional',\n  },\n  placeholder: {\n    doc: 'Use this to define the pre-filled placeholder text in the input. Defaults to `title=\"Skriv og velg\"`.',\n    type: 'string',\n    status: 'optional',\n  },\n  title: {\n    doc: 'Give a title to let the user know what they have to do. Defaults to `Skriv og få alternativer`.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  disable_filter: {\n    doc: 'If set to `true`, word highlighting will still be active, but no options will be filtered out. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  disable_highlighting: {\n    doc: 'If set to `true`, word highlighting will be disabled, but the options will still get filtered. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  disable_reorder: {\n    doc: 'If set to `true`, reordering of search results will be disabled. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  search_numbers: {\n    doc: 'If set to `true` and `search_in_word_index` is not set, the user will be able to more easily search and filter e.g. bank account numbers. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  search_in_word_index: {\n    doc: 'This gives you the possibility to change the threshold number, which defines from what word on we search \"inside words\". Defaults to `3`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  keep_value: {\n    doc: 'Use `true` to not remove the typed value on input blur, if it is invalid. By default, the typed value will disappear / replaced by a selected value from the data list during the input field blur. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  keep_selection: {\n    doc: 'Use `true` to not remove selected item on input blur, when the input value is empty. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  keep_value_and_selection: {\n    doc: 'Like `keep_value` – but would not reset to the selected value during input field blur. Also, the selected value would still be kept. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  prevent_selection: {\n    doc: 'If set to `true`, no permanent selection will be made. Also, the typed value will not disappear on input blur (like `keep_value`). Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  show_clear_button: {\n    doc: 'If set to `true`, a clear button is shown inside the input field. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  icon: {\n    doc: 'To be included in the autocomplete input.',\n    type: ['string', 'React.Node'],\n    status: 'optional',\n  },\n  icon_size: {\n    doc: 'Change the size of the icon pragmatically.',\n    type: 'string',\n    status: 'optional',\n  },\n  icon_position: {\n    doc: 'Position of the icon inside the autocomplete. Set to `left` or `right`. Defaults to `left`.',\n    type: 'string',\n    status: 'optional',\n  },\n  input_icon: {\n    doc: 'Same as `icon`.',\n    type: ['string', 'React.Node'],\n    status: 'optional',\n  },\n  triangle_position: {\n    doc: 'Position of icon arrow / triangle the drawer. Set to `left` or `right`. Defaults to `left`.',\n    type: 'string',\n    status: 'optional',\n  },\n  size: {\n    doc: 'Define the height of the Autocomplete. Can be set to `small`, `default`, `medium` and `large`. Defaults to `default`.',\n    type: 'string',\n    status: 'optional',\n  },\n  drawer_class: {\n    doc: 'Define a custom class for the internal drawer-list. This makes it possible more easily customize the drawer-list style with styled-components and the `css` style method. Defaults to `null`.',\n    type: 'string',\n    status: 'optional',\n  },\n  show_submit_button: {\n    doc: 'Use `true` to show a Autocomplete button to toggle the <a href=\"/uilib/components/fragments/drawer-list\">DrawerList</a>. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  align_autocomplete: {\n    doc: 'Use `right` to change the options alignment direction. Defaults to `left`.',\n    type: 'string',\n    status: 'optional',\n  },\n  no_options: {\n    doc: 'Text show in the \"no options\" item. Defaults to `Ingen alternativer`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  aria_live_options: {\n    doc: 'Text read out by screen readers. This way users with screen readers know how many options they got during typing. Defaults to `%s alternativer`.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  show_all: {\n    doc: 'Text that lets a user unravel all the available options. Defaults to `Vis alt`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  indicator_label: {\n    doc: 'Text show on indicator \"options\" item. Defaults to `Henter data ...`.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  show_options_sr: {\n    doc: 'Only for screen readers. Title of the button to show the suggestions / options. It is always present and when activating, it opens the DrawerList and sets the focus on it. Defaults to `Bla gjennom alternativer`.',\n    type: 'string',\n    status: 'optional',\n  },\n  selected_sr: {\n    doc: 'Only for screen readers (VoiceOver). The label used to announce the selected item. Defaults to `Valgt:`.',\n    type: 'string',\n    status: 'optional',\n  },\n  submit_button_title: {\n    doc: 'Title on submit button. Defaults to `Vis alternativer`.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  submit_button_icon: {\n    doc: 'The icon used in the submit button. Defaults to `chevron_down`.',\n    type: ['string', 'React.Element'],\n    status: 'optional',\n  },\n  submit_element: {\n    doc: 'Replace the dropdown / submit button with a custom React element. Defaults to the input SubmitButton `import { SubmitButton } from &#39;@dnb/eufemia/components/input/Input&#39;`.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  opened: {\n    doc: 'If set to `true`, the Autocomplete will be rendered initially with a visible and accessible data list / options.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  open_on_focus: {\n    doc: 'Use `true` to auto open the list once the user is entering the input field with the keyboard.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  stretch: {\n    doc: 'If set to `true`, then the autocomplete will be 100% in available `width`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  skip_portal: {\n    doc: 'Set to `true` to disable the React Portal behavior. Defaults to `false`.',\n    type: 'string',\n    status: 'optional',\n  },\n  status: {\n    doc: 'Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.',\n    type: 'string',\n    status: 'optional',\n  },\n  status_state: {\n    doc: 'Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.',\n    type: 'string',\n    status: 'optional',\n  },\n  status_props: {\n    doc: 'Use an object to define additional FormStatus properties.',\n    type: 'object',\n    status: 'optional',\n  },\n  globalStatus: {\n    doc: 'The <a href=\"/uilib/components/global-status/properties/#configuration-object\">configuration</a> used for the target <a href=\"/uilib/components/global-status\">GlobalStatus</a>.',\n    type: 'object',\n    status: 'optional',\n  },\n  label: {\n    doc: 'Prepends the Form Label component. If no ID is provided, a random ID is created.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  label_direction: {\n    doc: 'Use `label_direction=\"vertical\"` to change the label layout direction. Defaults to `horizontal`.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  label_sr_only: {\n    doc: 'Use `true` to make the label only readable by screen readers.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  suffix: {\n    doc: 'Text describing the content of the Autocomplete more than the label. You can also send in a React component, so it gets wrapped inside the Autocomplete component.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  skeleton: {\n    doc: 'If set to `true`, an overlaying skeleton with animation will be shown.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  input_ref: {\n    doc: 'Use a React.Ref to get access to the `input` DOM element.',\n    type: 'React.Ref',\n    status: 'optional',\n  },\n  input_element: {\n    doc: 'Lets you provide a custom React element as the input HTML element.',\n    type: ['string', 'React.Element'],\n    status: 'optional',\n  },\n  '[DrawerList](/uilib/components/fragments/drawer-list/properties)': {\n    doc: 'all DrawerList properties.',\n    type: 'Various',\n    status: 'optional',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'Spacing properties like `top` or `bottom` are supported.',\n    type: ['string', 'object'],\n    status: 'optional',\n  },\n}\n\nexport const AutocompleteEvents: PropertiesTableProps = {\n  on_type: {\n    doc: 'Will be called for every key change the users makes. Returns an object with the input `value` inside `{ value, event, attributes }` including <a href=\"/uilib/components/autocomplete/events#dynamically-change-data\">these methods</a>.',\n    type: 'function',\n    status: 'optional',\n  },\n  on_focus: {\n    doc: 'Will be called on user generated focus action. Returns an object with the input `value` inside `{ value, event, attributes }` including <a href=\"/uilib/components/autocomplete/events#dynamically-change-data\">these methods</a>.',\n    type: 'function',\n    status: 'optional',\n  },\n  on_blur: {\n    doc: 'Will be called on user generated blur action. Returns an object with the input `value` inside `{ value, event, attributes }` including <a href=\"/uilib/components/autocomplete/events#dynamically-change-data\">these methods</a>.',\n    type: 'function',\n    status: 'optional',\n  },\n  on_change: {\n    doc: 'Will be called on state changes made by the user. Returns an object with the new selected `data` item `{ data, event, attributes, value }` including <a href=\"/uilib/components/autocomplete/events#dynamically-change-data\">these methods</a>.',\n    type: 'function',\n    status: 'optional',\n  },\n  on_select: {\n    doc: 'Will be called once the users selects an item by a click or keyboard navigation. Returns an object with the new selected `data` item `{ data, event, attributes, value, active_item }` including <a href=\"/uilib/components/autocomplete/events#dynamically-change-data\">these methods</a>. The \"active_item\" property is the currently selected item by keyboard navigation',\n    type: 'function',\n    status: 'optional',\n  },\n  on_show: {\n    doc: 'Will be called once the user presses the autocomplete. Returns the data item `{ data, attributes }`.',\n    type: 'function',\n    status: 'optional',\n  },\n  on_hide: {\n    doc: 'Will be called once the user presses the autocomplete again, or clicks somewhere else. Returns the data item `{ data, attributes }`.',\n    type: 'function',\n    status: 'optional',\n  },\n}\n"],"mappings":"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"}

package/cjs/components/dropdown/Dropdown.d.ts

@@ -112,9 +112,6 @@ export default class Dropdown extends React.Component<DropdownProps, any> {
   static HorizontalItem: ({
     children
   }: {
-    /**
-     * <em>(required)</em> the data we want to fill the list with. Provide the data as a `JSON string`, `array` or `object` in these <a href="/uilib/components/fragments/drawer-list/info#data-structure">data structure</a>. <br /> If you don&#39;t have to define a `value`, you can also send in a `function` which will be called once the user opens the DrawerList.
-     */
     children: React.ReactNode;
   }) => JSX.Element;
   render(): JSX.Element;

package/cjs/components/input/InputDocs.js

@@ -57,7 +57,7 @@ const inputProperties = {
   },
   icon: {
     doc: 'Icon to show before or after the input / placeholder. Can be either a string defining a primary icon or a Component using an SVG icon of either 16px or 24px.',
-    type: ['string', 'React.Component'],
+    type: ['string', 'React.Node'],
     status: 'optional'
   },
   icon_position: {
@@ -97,7 +97,7 @@ const inputProperties = {
   },
   suffix: {
     doc: 'Text describing the content of the input more than the label. you can also send in a React component, so it gets wrapped inside the Input component.',
-    type: ['string', 'React.Component'],
+    type: ['string', 'React.Node'],
     status: 'optional'
   },
   size: {