@dnb/eufemia 10.24.0 → 10.26.0

package/CHANGELOG.md

@@ -3,6 +3,55 @@
 All notable changes to @dnb/eufemia will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [10.26.0](https://github.com/dnbexperience/eufemia/compare/v10.25.0...v10.26.0) (2024-04-05)
+
+
+### :sparkles: Features
+
+* **forms:** add `Field.Composition` to combine fields instead of using FieldBlock ([#3418](https://github.com/dnbexperience/eufemia/issues/3418)) ([c0607e1](https://github.com/dnbexperience/eufemia/commit/c0607e193e57e597c5cab7984118f9a6e7a47d34))
+* **forms:** add `transformIn` and `transformOut` to fields for value transformation ([#3428](https://github.com/dnbexperience/eufemia/issues/3428)) ([f07aee7](https://github.com/dnbexperience/eufemia/commit/f07aee79381e09c6dc5b24d091658fe8ee589c62))
+* **forms:** add max width to Card when used in forms ([#3416](https://github.com/dnbexperience/eufemia/issues/3416)) ([28e89c8](https://github.com/dnbexperience/eufemia/commit/28e89c8cda9962a44e1034a93b2e27302cc77e29))
+* **forms:** add router support ([#3427](https://github.com/dnbexperience/eufemia/issues/3427)) ([8b9a20a](https://github.com/dnbexperience/eufemia/commit/8b9a20a3ccd4fbe768fb4de3fc78f706a304cd57))
+* **forms:** group from translations by components and add `useLocale` hook ([#3332](https://github.com/dnbexperience/eufemia/issues/3332)) ([9bc9ee2](https://github.com/dnbexperience/eufemia/commit/9bc9ee27671feb5b859700bfa66ed17b590e546c))
+* **forms:** make `Wizard.Buttons` interactive (use it in favor of NextButton and PreviousButton) ([#3437](https://github.com/dnbexperience/eufemia/issues/3437)) ([5967a6d](https://github.com/dnbexperience/eufemia/commit/5967a6dbf8b3605469917aa1fa5de73a93f3b452))
+* **forms:** refactor API from StepsLayout to Steps.Layout ([#3426](https://github.com/dnbexperience/eufemia/issues/3426)) ([9bb72e7](https://github.com/dnbexperience/eufemia/commit/9bb72e749d05c0b4e5112256a0a8d91085f396d0))
+* **forms:** refactor API from StepsLayout to Wizard.Container ([#3433](https://github.com/dnbexperience/eufemia/issues/3433)) ([1f0184d](https://github.com/dnbexperience/eufemia/commit/1f0184d82ccf81907aafa4c8313a31197eeeea6b)), closes [/github.com/dnbexperience/eufemia/pull/3426#issuecomment-2034150647](https://github.com/dnbexperience//github.com/dnbexperience/eufemia/pull/3426/issues/issuecomment-2034150647) [#3426](https://github.com/dnbexperience/eufemia/issues/3426)
+
+
+### :memo: Documentation
+
+* enhance breakpoints and media query docs ([#3435](https://github.com/dnbexperience/eufemia/issues/3435)) ([aea624f](https://github.com/dnbexperience/eufemia/commit/aea624fffac917e59faca219c880a77d6a47a518))
+
+
+### :bug: Bug Fixes
+
+* **Autocomplete:** use current value to filter changed data ([#3407](https://github.com/dnbexperience/eufemia/issues/3407)) ([7a778c7](https://github.com/dnbexperience/eufemia/commit/7a778c7f25dfdf31c85ff60b94fe243d25974939)), closes [#3355](https://github.com/dnbexperience/eufemia/issues/3355)
+* **Card:** ensure "spacing" children do stretch by default ([#3422](https://github.com/dnbexperience/eufemia/issues/3422)) ([c0259bc](https://github.com/dnbexperience/eufemia/commit/c0259bc7b9fcb9161c12a176e2108a5a10d9084b))
+* **forms:** add pattern requirement for city in PostalCodeAndCity ([#3431](https://github.com/dnbexperience/eufemia/issues/3431)) ([080bbee](https://github.com/dnbexperience/eufemia/commit/080bbee2e5cf58860b389423712544895d6da0d4))
+* **forms:** align locale strings and translations ([#3429](https://github.com/dnbexperience/eufemia/issues/3429)) ([369bed0](https://github.com/dnbexperience/eufemia/commit/369bed0136f2fae06aa5398d84a3113602e771db))
+* **InputMasked:** ensure decimal value update does format correctly  ([#3420](https://github.com/dnbexperience/eufemia/issues/3420)) ([335a86b](https://github.com/dnbexperience/eufemia/commit/335a86be803bc4fc8de0bcc5215d5cc74553fc6d))
+* **Table:** ensure tables with one td align the th width ([#3430](https://github.com/dnbexperience/eufemia/issues/3430)) ([3e5ee98](https://github.com/dnbexperience/eufemia/commit/3e5ee987d9e65aae1b237f2d16d67ff75b41234c))
+* **Textarea:** forward all props via provider (including `autoresize`) ([#3436](https://github.com/dnbexperience/eufemia/issues/3436)) ([a9260fd](https://github.com/dnbexperience/eufemia/commit/a9260fd41ba9752f87aca914f0804573a215eed9))
+* **TextCounter:** update text/translation for when limit exceeded ([#3434](https://github.com/dnbexperience/eufemia/issues/3434)) ([8b881f3](https://github.com/dnbexperience/eufemia/commit/8b881f32969a66fd176dcb29e7d1a42f639c23f0))
+* **useStep:** fix possibly undefined type message ([#3415](https://github.com/dnbexperience/eufemia/issues/3415)) ([95ab0b1](https://github.com/dnbexperience/eufemia/commit/95ab0b1b1a7723613f5e486ae5d778026e9282fa))
+
+## [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/Autocomplete.js

@@ -351,7 +351,7 @@ class AutocompleteInstance extends _react.default.PureComponent {
         keep_selection,
         keep_value_and_selection
       } = _this.props;
-      if (value && value.length > 0) {
+      if ((value === null || value === void 0 ? void 0 : value.length) > 0) {
         if (count === 0) {
           _this.showNoOptionsItem();
         } else if (count > 0) {
@@ -913,7 +913,7 @@ class AutocompleteInstance extends _react.default.PureComponent {
       if (typeof searchIndex === 'undefined') {
         return [];
       }
-      const searchWords = value.split(/\s+/g).filter(Boolean);
+      const searchWords = (value === null || value === void 0 ? void 0 : value.split(/\s+/g).filter(Boolean)) || [];
       const wordCond = '^|\\s';
       const findSearchWords = contentChunk => {
         if (typeof contentChunk !== 'string') {
@@ -1183,6 +1183,13 @@ class AutocompleteInstance extends _react.default.PureComponent {
     }
   }
   componentDidUpdate(prevProps) {
+    if (prevProps.data !== this.props.data) {
+      this.setSearchIndex({
+        overwriteSearchIndex: true
+      }, () => {
+        this.runFilterWithSideEffects(this.state.inputValue);
+      });
+    }
     if (prevProps.value !== this.props.value) {
       this.revalidateSelectedItem();
       this.revalidateInputValue();