@dnb/eufemia 10.32.0 → 10.34.0

package/CHANGELOG.md

@@ -3,6 +3,57 @@
 All notable changes to @dnb/eufemia will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [10.34.0](https://github.com/dnbexperience/eufemia/compare/v10.33.0...v10.34.0) (2024-06-03)
+
+
+### :bug: Bug Fixes
+
+* **DrawerList:** prevent call attempt for word if not function ([#3613](https://github.com/dnbexperience/eufemia/issues/3613)) ([66e04ba](https://github.com/dnbexperience/eufemia/commit/66e04babd088da6792ebabd171e680a517b1702d))
+* **forms:** add align prop to Field.Composition ([#3622](https://github.com/dnbexperience/eufemia/issues/3622)) ([b8cfcd4](https://github.com/dnbexperience/eufemia/commit/b8cfcd44d179c681c2b66f363a4dc554a6da68e7))
+* **forms:** enhance handling of schema TypeScript support ([#3635](https://github.com/dnbexperience/eufemia/issues/3635)) ([8e09651](https://github.com/dnbexperience/eufemia/commit/8e096512252c26e3244c91009f0bb70c7adf69f1)), closes [#3621](https://github.com/dnbexperience/eufemia/issues/3621)
+* **forms:** ensure Value.Number renders with 0 ([#3620](https://github.com/dnbexperience/eufemia/issues/3620)) ([9f4a4d3](https://github.com/dnbexperience/eufemia/commit/9f4a4d3e1c1290cf8df362b857b22af6a272ec90))
+* **TableContainer:** take full width when inside `Card` ([#3630](https://github.com/dnbexperience/eufemia/issues/3630)) ([c4d5c14](https://github.com/dnbexperience/eufemia/commit/c4d5c143bae9c6d89df1bf976e1233f25e8af6df))
+
+
+### :sparkles: Features
+
+* **Autocomplete:** preliminary sbanken colors ([#3604](https://github.com/dnbexperience/eufemia/issues/3604)) ([fe42538](https://github.com/dnbexperience/eufemia/commit/fe425385f04d17dcbac27f29d02ac5f80150c739))
+* **Blocks:** add ChildrenWithAge block ([#3619](https://github.com/dnbexperience/eufemia/issues/3619)) ([118932c](https://github.com/dnbexperience/eufemia/commit/118932c43b1a39dbc64c625c7dad90a6766bc85d))
+* **Card:** stretch content inside when `stack` is true ([#3633](https://github.com/dnbexperience/eufemia/issues/3633)) ([d9177e9](https://github.com/dnbexperience/eufemia/commit/d9177e9ccd93f87604581eda46bb92a09bffc54d))
+* **Checkbox, Radio:** fix border width for Sbanken brand ([#3612](https://github.com/dnbexperience/eufemia/issues/3612)) ([624ecf2](https://github.com/dnbexperience/eufemia/commit/624ecf215a96565161e7be0211767345836a2f8a))
+* **forms:** add `active` prop to Wizard.Step ([#3639](https://github.com/dnbexperience/eufemia/issues/3639)) ([2804041](https://github.com/dnbexperience/eufemia/commit/2804041a43be9500cd3835a9c76023c26d469514))
+* **forms:** add `countPath` prop to Iterate.Array ([#3615](https://github.com/dnbexperience/eufemia/issues/3615)) ([dfe96f5](https://github.com/dnbexperience/eufemia/commit/dfe96f560fa70aac45a465f7bcc707a9523d3200))
+* **forms:** add `defaultValue` to all `Value.*` components ([#3627](https://github.com/dnbexperience/eufemia/issues/3627)) ([4fdc778](https://github.com/dnbexperience/eufemia/commit/4fdc778fb52e597e9b5b92f75574cc4c3e9ba8d1))
+* **forms:** add `defaultValue` to all fields ([#3616](https://github.com/dnbexperience/eufemia/issues/3616)) ([58d698a](https://github.com/dnbexperience/eufemia/commit/58d698ad18a7e44c5e4a5e1afe2b0dab285e9136)), closes [#3615](https://github.com/dnbexperience/eufemia/issues/3615)
+* **forms:** add `trueText` and `falseText` to Value.Boolean ([#3624](https://github.com/dnbexperience/eufemia/issues/3624)) ([c9cae37](https://github.com/dnbexperience/eufemia/commit/c9cae372a51fc8ef387626a50560e4f778b32ef1))
+* **forms:** add hr to Wizard.EditButton ([#3637](https://github.com/dnbexperience/eufemia/issues/3637)) ([2018d16](https://github.com/dnbexperience/eufemia/commit/2018d16921a5a4d7179b04f52f27a4f7eb8eaff5))
+* **forms:** add minimum and maximum to Value.Number ([#3636](https://github.com/dnbexperience/eufemia/issues/3636)) ([bbe3b2b](https://github.com/dnbexperience/eufemia/commit/bbe3b2bc66d6c82ce9a74ee42d0f2ab1e34dcd21))
+* **forms:** add startWith prop to Field.Number ([#3632](https://github.com/dnbexperience/eufemia/issues/3632)) ([b6d177a](https://github.com/dnbexperience/eufemia/commit/b6d177a5593090bc3d10ce6599b24bdbad6fa0b1))
+* **FormStatus, Section:** change sbanken info color to purple ([#3589](https://github.com/dnbexperience/eufemia/issues/3589)) ([5356eb8](https://github.com/dnbexperience/eufemia/commit/5356eb8acbfb8fa62626e99fcc4e4b051a89f47f))
+
+## [10.33.0](https://github.com/dnbexperience/eufemia/compare/v10.32.0...v10.33.0) (2024-05-27)
+
+
+### :memo: Documentation
+
+* add Accordion in Grid columns example ([#3601](https://github.com/dnbexperience/eufemia/issues/3601)) ([8e695ff](https://github.com/dnbexperience/eufemia/commit/8e695ff252f85a4629107b4d9722c3219b718fe8))
+
+
+### :sparkles: Features
+
+* **forms:** add `Composite.Block` to compose reusable blocks of fields and values ([#3594](https://github.com/dnbexperience/eufemia/issues/3594)) ([67d1538](https://github.com/dnbexperience/eufemia/commit/67d1538a7480e72444a644e3e747d6eb193af0d0))
+* **forms:** add `Form.Section` to compose reusable blocks of fields and values ([#3609](https://github.com/dnbexperience/eufemia/issues/3609)) ([32848e2](https://github.com/dnbexperience/eufemia/commit/32848e2b2080c8eadf24caee4f65fe95ebfa3133)), closes [#3594](https://github.com/dnbexperience/eufemia/issues/3594)
+* **forms:** add Field.Slider ([#3597](https://github.com/dnbexperience/eufemia/issues/3597)) ([d94f691](https://github.com/dnbexperience/eufemia/commit/d94f691d26c1559ec24451684d46254a16fa3a6e))
+
+
+### :bug: Bug Fixes
+
+* **ArraySelection:** make explicit type of value can be undefined ([#3610](https://github.com/dnbexperience/eufemia/issues/3610)) ([cd4add9](https://github.com/dnbexperience/eufemia/commit/cd4add9f7c7f749951e561aec18919325aee6946))
+* **DrawerList:** check if string converted jsx is of type function ([#3606](https://github.com/dnbexperience/eufemia/issues/3606)) ([6a59d6c](https://github.com/dnbexperience/eufemia/commit/6a59d6c8ed4b15e727ea89312b3d51ba2ff9b0b8))
+* **FieldBlock:** make it possible to be used in horizontal flex layout when width="stretch" is used ([#3596](https://github.com/dnbexperience/eufemia/issues/3596)) ([fde04b5](https://github.com/dnbexperience/eufemia/commit/fde04b5e7b3dccb76cd9b1f86bd4879df89f58a5))
+* **forms:** add support for `trueText` and `falseText` to Boolean checkbox variant ([#3607](https://github.com/dnbexperience/eufemia/issues/3607)) ([198164a](https://github.com/dnbexperience/eufemia/commit/198164a2137d55f912d5d18827787fad5228aca4))
+* **SelectCountry:** use given path value ([#3598](https://github.com/dnbexperience/eufemia/issues/3598)) ([9ca7953](https://github.com/dnbexperience/eufemia/commit/9ca7953cb4dee7c7f9c482d1e184e0f9dce859ae))
+
 ## [10.32.0](https://github.com/dnbexperience/eufemia/compare/v10.31.0...v10.32.0) (2024-05-23)
 
 

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

@@ -60,7 +60,6 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  color: var(--color-sea-green);
 }
 .dnb-autocomplete__show-all .dnb-drawer-list__option__inner .dnb-drawer-list__option__item {
   display: flex;

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

@@ -1 +1 @@
-.dnb-autocomplete{--autocomplete-width:16rem;--autocomplete-height:2rem;--autocomplete-height--small:1.5rem;--autocomplete-height--medium:2.5rem;--autocomplete-height--large:3rem;--autocomplete-padding-horizontal:1rem;--autocomplete-focus-border-width:0.125rem;--autocomplete-text-padding:0.5rem;--autocomplete-border-radius:0.25rem;align-items:center;display:inline-flex;font-size:var(--font-size-small);line-height:var(--autocomplete-height)}.dnb-autocomplete__inner{color:inherit;display:inline-flex;flex-direction:column;margin:0;padding:0;width:auto}.dnb-autocomplete--right .dnb-autocomplete__inner{align-items:flex-end}.dnb-autocomplete__shell{color:inherit;margin:0;padding:0;position:relative;width:var(--autocomplete-width)}.dnb-autocomplete__row{align-items:center;display:inline-flex}.dnb-autocomplete--small{line-height:var(--autocomplete-height--small)}.dnb-autocomplete--medium{line-height:var(--autocomplete-height--medium)}.dnb-autocomplete--large{line-height:var(--autocomplete-height--large)}.dnb-autocomplete__icon{display:inline-flex;justify-content:center;pointer-events:none}.dnb-autocomplete__show-all .dnb-drawer-list__option__inner{align-items:center;color:var(--color-sea-green);display:flex;justify-content:center}.dnb-autocomplete__show-all .dnb-drawer-list__option__inner .dnb-drawer-list__option__item{display:flex;flex-direction:column}.dnb-autocomplete__show-all .dnb-drawer-list__option__inner .dnb-icon{align-self:center}.dnb-autocomplete__input{align-items:center;display:inline-flex;outline:none}.dnb-autocomplete__input,.dnb-autocomplete__input .dnb-input__inner,.dnb-autocomplete__input .dnb-input__input,.dnb-autocomplete__input .dnb-input__shell{width:100%}.dnb-autocomplete--opened .dnb-input__submit-button__button .dnb-icon{transform:rotate(180deg);transform-origin:50% 50%}.dnb-autocomplete .dnb-input__submit-button__button[disabled]:not(.dnb-button--has-text){--border-color:var(--color-black-55);--border-width:0.0625rem;border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.dnb-autocomplete .dnb-input__submit-button__button .dnb-icon{transition:transform .4s ease-out}html[data-visual-test] .dnb-autocomplete .dnb-input__submit-button__button .dnb-icon{transition-duration:1ms!important}.dnb-autocomplete .dnb-input__inner__element{cursor:text;position:relative;z-index:3}@media screen and (min-width:40em){.dnb-autocomplete .dnb-input--has-inner-element .dnb-input__input,.dnb-autocomplete .dnb-input--has-inner-element .dnb-input__placeholder{padding-right:0!important}}@media screen and (max-width:40em){.dnb-autocomplete .dnb-input--has-inner-element .dnb-input__input,.dnb-autocomplete .dnb-input--has-inner-element .dnb-input__placeholder{padding-right:2.5rem!important}}.dnb-autocomplete .dnb-input__inner__element.dnb-p{padding:0 .5rem;white-space:nowrap}@media screen and (max-width:40em){.dnb-autocomplete .dnb-input__inner__element.dnb-p{display:none}}.dnb-autocomplete .dnb-input__inner__element.dnb-p,.dnb-spacing .dnb-autocomplete .dnb-input__inner__element.dnb-p{margin:0}.dnb-autocomplete .dnb-input--has-submit-element .dnb-input__inner__element{margin-right:2.5rem!important}.dnb-autocomplete--icon-position-right .dnb-input__inner__element.dnb-p{padding-right:3rem}.dnb-autocomplete--icon-position-right .dnb-input--icon-position-right .dnb-autocomplete--icon-position-right .dnb-input--icon-position-right.dnb-autocomplete--icon-position-right .dnb-input--has-icon .dnb-autocomplete--icon-position-right .dnb-input__input{padding-right:1rem}.dnb-autocomplete--disabled .dnb-input__inner__element{cursor:not-allowed}.dnb-autocomplete__text{font-size:var(--font-size-basis);line-height:inherit;order:1;padding:0 var(--autocomplete-text-padding) 0 0;position:relative;text-align:left;text-overflow:ellipsis;z-index:4}.dnb-autocomplete__text,.dnb-autocomplete__text__inner{color:inherit;height:inherit;overflow:hidden;width:100%}.dnb-autocomplete__text__inner{display:inline-block;padding:0;text-align:inherit;-webkit-text-decoration:none;text-decoration:none;text-overflow:inherit;white-space:nowrap}.dnb-autocomplete>.dnb-form-label{line-height:var(--line-height-basis);margin-right:1rem}@media screen and (max-width:40em){.dnb-autocomplete{flex-wrap:wrap}.dnb-autocomplete>.dnb-form-label{margin-bottom:.5rem;margin-top:.5rem}}.dnb-autocomplete--stretch{display:flex;flex-grow:1}.dnb-autocomplete--stretch .dnb-autocomplete__inner{flex-grow:1}.dnb-autocomplete--stretch .dnb-autocomplete__inner,.dnb-autocomplete--stretch .dnb-autocomplete__row,.dnb-autocomplete--stretch .dnb-autocomplete__shell{width:100%}.dnb-autocomplete--stretch .dnb-form-label+.dnb-autocomplete__inner{width:auto}.dnb-autocomplete--vertical.dnb-autocomplete--stretch .dnb-autocomplete__inner,.dnb-form-row--horizontal .dnb-autocomplete--stretch{width:100%}label+.dnb-autocomplete[class*=__form-status]{vertical-align:top}label+.dnb-autocomplete[class*=__form-status] .dnb-autocomplete__shell{top:-.375rem}.dnb-autocomplete__inner>.dnb-form-status{margin-top:.5rem;order:2}.dnb-autocomplete--vertical{align-items:flex-start;display:flex;flex-direction:column}.dnb-autocomplete:not(.dnb-autocomplete--vertical)[class*=__status]{align-items:flex-start}.dnb-autocomplete:not(.dnb-autocomplete--vertical)[class*=__status]>.dnb-form-label{margin-top:.25rem}@media screen and (max-width:40em){.dnb-responsive-component .dnb-autocomplete{align-items:flex-start;display:flex;flex-direction:column;margin-bottom:.5rem}.dnb-responsive-component .dnb-autocomplete>.dnb-form-label{margin-bottom:.5rem}.dnb-responsive-component .dnb-autocomplete__helper{display:none}}.dnb-autocomplete__list .dnb-drawer-list__option__item>span{padding-right:.125em}
+.dnb-autocomplete{--autocomplete-width:16rem;--autocomplete-height:2rem;--autocomplete-height--small:1.5rem;--autocomplete-height--medium:2.5rem;--autocomplete-height--large:3rem;--autocomplete-padding-horizontal:1rem;--autocomplete-focus-border-width:0.125rem;--autocomplete-text-padding:0.5rem;--autocomplete-border-radius:0.25rem;align-items:center;display:inline-flex;font-size:var(--font-size-small);line-height:var(--autocomplete-height)}.dnb-autocomplete__inner{color:inherit;display:inline-flex;flex-direction:column;margin:0;padding:0;width:auto}.dnb-autocomplete--right .dnb-autocomplete__inner{align-items:flex-end}.dnb-autocomplete__shell{color:inherit;margin:0;padding:0;position:relative;width:var(--autocomplete-width)}.dnb-autocomplete__row{align-items:center;display:inline-flex}.dnb-autocomplete--small{line-height:var(--autocomplete-height--small)}.dnb-autocomplete--medium{line-height:var(--autocomplete-height--medium)}.dnb-autocomplete--large{line-height:var(--autocomplete-height--large)}.dnb-autocomplete__icon{display:inline-flex;justify-content:center;pointer-events:none}.dnb-autocomplete__show-all .dnb-drawer-list__option__inner{align-items:center;display:flex;justify-content:center}.dnb-autocomplete__show-all .dnb-drawer-list__option__inner .dnb-drawer-list__option__item{display:flex;flex-direction:column}.dnb-autocomplete__show-all .dnb-drawer-list__option__inner .dnb-icon{align-self:center}.dnb-autocomplete__input{align-items:center;display:inline-flex;outline:none}.dnb-autocomplete__input,.dnb-autocomplete__input .dnb-input__inner,.dnb-autocomplete__input .dnb-input__input,.dnb-autocomplete__input .dnb-input__shell{width:100%}.dnb-autocomplete--opened .dnb-input__submit-button__button .dnb-icon{transform:rotate(180deg);transform-origin:50% 50%}.dnb-autocomplete .dnb-input__submit-button__button[disabled]:not(.dnb-button--has-text){--border-color:var(--color-black-55);--border-width:0.0625rem;border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.dnb-autocomplete .dnb-input__submit-button__button .dnb-icon{transition:transform .4s ease-out}html[data-visual-test] .dnb-autocomplete .dnb-input__submit-button__button .dnb-icon{transition-duration:1ms!important}.dnb-autocomplete .dnb-input__inner__element{cursor:text;position:relative;z-index:3}@media screen and (min-width:40em){.dnb-autocomplete .dnb-input--has-inner-element .dnb-input__input,.dnb-autocomplete .dnb-input--has-inner-element .dnb-input__placeholder{padding-right:0!important}}@media screen and (max-width:40em){.dnb-autocomplete .dnb-input--has-inner-element .dnb-input__input,.dnb-autocomplete .dnb-input--has-inner-element .dnb-input__placeholder{padding-right:2.5rem!important}}.dnb-autocomplete .dnb-input__inner__element.dnb-p{padding:0 .5rem;white-space:nowrap}@media screen and (max-width:40em){.dnb-autocomplete .dnb-input__inner__element.dnb-p{display:none}}.dnb-autocomplete .dnb-input__inner__element.dnb-p,.dnb-spacing .dnb-autocomplete .dnb-input__inner__element.dnb-p{margin:0}.dnb-autocomplete .dnb-input--has-submit-element .dnb-input__inner__element{margin-right:2.5rem!important}.dnb-autocomplete--icon-position-right .dnb-input__inner__element.dnb-p{padding-right:3rem}.dnb-autocomplete--icon-position-right .dnb-input--icon-position-right .dnb-autocomplete--icon-position-right .dnb-input--icon-position-right.dnb-autocomplete--icon-position-right .dnb-input--has-icon .dnb-autocomplete--icon-position-right .dnb-input__input{padding-right:1rem}.dnb-autocomplete--disabled .dnb-input__inner__element{cursor:not-allowed}.dnb-autocomplete__text{font-size:var(--font-size-basis);line-height:inherit;order:1;padding:0 var(--autocomplete-text-padding) 0 0;position:relative;text-align:left;text-overflow:ellipsis;z-index:4}.dnb-autocomplete__text,.dnb-autocomplete__text__inner{color:inherit;height:inherit;overflow:hidden;width:100%}.dnb-autocomplete__text__inner{display:inline-block;padding:0;text-align:inherit;-webkit-text-decoration:none;text-decoration:none;text-overflow:inherit;white-space:nowrap}.dnb-autocomplete>.dnb-form-label{line-height:var(--line-height-basis);margin-right:1rem}@media screen and (max-width:40em){.dnb-autocomplete{flex-wrap:wrap}.dnb-autocomplete>.dnb-form-label{margin-bottom:.5rem;margin-top:.5rem}}.dnb-autocomplete--stretch{display:flex;flex-grow:1}.dnb-autocomplete--stretch .dnb-autocomplete__inner{flex-grow:1}.dnb-autocomplete--stretch .dnb-autocomplete__inner,.dnb-autocomplete--stretch .dnb-autocomplete__row,.dnb-autocomplete--stretch .dnb-autocomplete__shell{width:100%}.dnb-autocomplete--stretch .dnb-form-label+.dnb-autocomplete__inner{width:auto}.dnb-autocomplete--vertical.dnb-autocomplete--stretch .dnb-autocomplete__inner,.dnb-form-row--horizontal .dnb-autocomplete--stretch{width:100%}label+.dnb-autocomplete[class*=__form-status]{vertical-align:top}label+.dnb-autocomplete[class*=__form-status] .dnb-autocomplete__shell{top:-.375rem}.dnb-autocomplete__inner>.dnb-form-status{margin-top:.5rem;order:2}.dnb-autocomplete--vertical{align-items:flex-start;display:flex;flex-direction:column}.dnb-autocomplete:not(.dnb-autocomplete--vertical)[class*=__status]{align-items:flex-start}.dnb-autocomplete:not(.dnb-autocomplete--vertical)[class*=__status]>.dnb-form-label{margin-top:.25rem}@media screen and (max-width:40em){.dnb-responsive-component .dnb-autocomplete{align-items:flex-start;display:flex;flex-direction:column;margin-bottom:.5rem}.dnb-responsive-component .dnb-autocomplete>.dnb-form-label{margin-bottom:.5rem}.dnb-responsive-component .dnb-autocomplete__helper{display:none}}.dnb-autocomplete__list .dnb-drawer-list__option__item>span{padding-right:.125em}

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

@@ -84,8 +84,6 @@
       .dnb-icon {
         align-self: center;
       }
-
-      color: var(--color-sea-green);
     }
   }
 

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

@@ -0,0 +1,41 @@
+/*
+* Autocomplete theme for sbanken
+* TODO: this theme is just a prelimenary fix to avoid dnb colors
+*/
+/*
+ * Utilities
+ */
+.dnb-autocomplete__show-all .dnb-drawer-list__option__inner {
+  color: var(--sb-color-violet);
+}
+.dnb-autocomplete--opened .dnb-input .dnb-input__shell .dnb-input__shell, .dnb-autocomplete:not(.dnb-autocomplete__status--error) .dnb-form-label:hover ~ .dnb-autocomplete__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__shell {
+  --border-color: var(--sb-color-violet);
+  --border-width: 0.125rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.dnb-autocomplete--show-indicator .dnb-autocomplete__input .dnb-input__icon {
+  color: transparent;
+}
+.dnb-autocomplete__shell, .dnb-autocomplete__input {
+  border-radius: var(--autocomplete-border-radius);
+}
+.dnb-autocomplete__status--error:not(.dnb-autocomplete--opened) .dnb-form-label:hover ~ .dnb-autocomplete__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__shell {
+  --border-color: var(--sb-color-red);
+  --border-width: 0.125rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+
+.dnb-autocomplete__root .dnb-drawer-list__option--focus, .dnb-autocomplete__root .dnb-drawer-list__option__item:nth-of-type(1) {
+  font-weight: var(--font-weight-basis);
+}
+.dnb-autocomplete__root .dnb-drawer-list__option__item:nth-of-type(n + 2) {
+  color: var(--sb-color-gray-dark-2);
+}
+.dnb-autocomplete__root .dnb-drawer-list__option--selected:not(.dnb-drawer-list__option--focus) .dnb-drawer-list__option__item:nth-of-type(n + 2), .dnb-autocomplete__root .dnb-drawer-list__option--selected:not(.dnb-drawer-list__option--focus) .dnb-drawer-list__option__item:nth-of-type(n + 2) .dnb-anchor {
+  color: var(--sb-color-white);
+}
+.dnb-autocomplete__root .dnb-drawer-list__option__item--highlight {
+  font-weight: var(--font-weight-bold);
+}

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

@@ -0,0 +1 @@
+.dnb-autocomplete__show-all .dnb-drawer-list__option__inner{color:var(--sb-color-violet)}.dnb-autocomplete--opened .dnb-input .dnb-input__shell .dnb-input__shell,.dnb-autocomplete:not(.dnb-autocomplete__status--error) .dnb-form-label:hover~.dnb-autocomplete__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__shell{--border-color:var(--sb-color-violet);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-autocomplete--show-indicator .dnb-autocomplete__input .dnb-input__icon{color:transparent}.dnb-autocomplete__input,.dnb-autocomplete__shell{border-radius:var(--autocomplete-border-radius)}.dnb-autocomplete__status--error:not(.dnb-autocomplete--opened) .dnb-form-label:hover~.dnb-autocomplete__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__shell{--border-color:var(--sb-color-red);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-autocomplete__root .dnb-drawer-list__option--focus,.dnb-autocomplete__root .dnb-drawer-list__option__item:first-of-type{font-weight:var(--font-weight-basis)}.dnb-autocomplete__root .dnb-drawer-list__option__item:nth-of-type(n+2){color:var(--sb-color-gray-dark-2)}.dnb-autocomplete__root .dnb-drawer-list__option--selected:not(.dnb-drawer-list__option--focus) .dnb-drawer-list__option__item:nth-of-type(n+2),.dnb-autocomplete__root .dnb-drawer-list__option--selected:not(.dnb-drawer-list__option--focus) .dnb-drawer-list__option__item:nth-of-type(n+2) .dnb-anchor{color:var(--sb-color-white)}.dnb-autocomplete__root .dnb-drawer-list__option__item--highlight{font-weight:var(--font-weight-bold)}

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

@@ -0,0 +1,65 @@
+/*
+* Autocomplete theme for sbanken
+* TODO: this theme is just a prelimenary fix to avoid dnb colors
+*/
+
+@import '../../../../style/core/utilities.scss';
+
+.dnb-autocomplete {
+  &__show-all {
+    .dnb-drawer-list__option__inner {
+      color: var(--sb-color-violet);
+    }
+  }
+
+  &--opened .dnb-input .dnb-input__shell,
+  &:not(#{&}__status--error)
+    .dnb-form-label:hover
+    ~ &__inner
+    .dnb-input:not([data-input-state='disabled']) {
+    .dnb-input__shell {
+      @include fakeBorder(var(--sb-color-violet), 0.125rem);
+    }
+  }
+
+  &--show-indicator &__input .dnb-input__icon {
+    color: transparent;
+  }
+
+  &__shell,
+  &__input {
+    border-radius: var(--autocomplete-border-radius);
+  }
+
+  &__status--error:not(#{&}--opened)
+    .dnb-form-label:hover
+    ~ &__inner
+    .dnb-input:not([data-input-state='disabled']) {
+    .dnb-input__shell {
+      @include fakeBorder(var(--sb-color-red), 0.125rem);
+    }
+  }
+}
+
+.dnb-autocomplete__root .dnb-drawer-list__option {
+  &--focus,
+  &__item:nth-of-type(1) {
+    font-weight: var(--font-weight-basis);
+  }
+
+  &__item:nth-of-type(n + 2) {
+    color: var(--sb-color-gray-dark-2);
+  }
+
+  &--selected:not(.dnb-drawer-list__option--focus)
+    .dnb-drawer-list__option__item:nth-of-type(n + 2) {
+    &,
+    & .dnb-anchor {
+      color: var(--sb-color-white);
+    }
+  }
+
+  &__item--highlight {
+    font-weight: var(--font-weight-bold);
+  }
+}

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

@@ -5,6 +5,9 @@
 /*
  * Utilities
  */
+.dnb-autocomplete__show-all .dnb-drawer-list__option__inner {
+  color: var(--color-sea-green);
+}
 .dnb-autocomplete--opened .dnb-input .dnb-input__shell .dnb-input__shell, .dnb-autocomplete:not(.dnb-autocomplete__status--error) .dnb-form-label:hover ~ .dnb-autocomplete__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__shell {
   --border-color: var(--color-sea-green);
   --border-width: 0.125rem;

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

@@ -1 +1 @@
-.dnb-autocomplete--opened .dnb-input .dnb-input__shell .dnb-input__shell,.dnb-autocomplete:not(.dnb-autocomplete__status--error) .dnb-form-label:hover~.dnb-autocomplete__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__shell{--border-color:var(--color-sea-green);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-autocomplete--opened .dnb-input .dnb-input__shell .dnb-input__submit-button__button,.dnb-autocomplete:not(.dnb-autocomplete__status--error) .dnb-form-label:hover~.dnb-autocomplete__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button{background-color:var(--color-sea-green);border-radius:0;box-shadow:none;color:var(--color-white)}.dnb-autocomplete--show-indicator .dnb-autocomplete__input .dnb-input__icon{color:transparent}.dnb-autocomplete__input,.dnb-autocomplete__shell{border-radius:var(--autocomplete-border-radius)}.dnb-autocomplete__status--error:not(.dnb-autocomplete--opened) .dnb-form-label:hover~.dnb-autocomplete__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__shell{--border-color:var(--color-fire-red);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-autocomplete__root .dnb-drawer-list__option__item:first-of-type{font-weight:var(--font-weight-basis)}.dnb-autocomplete__root .dnb-drawer-list__option__item:nth-of-type(n+2){color:var(--color-black-55)}.dnb-autocomplete__root .dnb-drawer-list__option__item--highlight{font-weight:var(--font-weight-bold)}.dnb-autocomplete__root .dnb-drawer-list__option--selected .dnb-anchor,.dnb-autocomplete__root .dnb-drawer-list__option--selected .dnb-drawer-list__option__item:nth-of-type(n+2){color:var(--color-white)}
+.dnb-autocomplete__show-all .dnb-drawer-list__option__inner{color:var(--color-sea-green)}.dnb-autocomplete--opened .dnb-input .dnb-input__shell .dnb-input__shell,.dnb-autocomplete:not(.dnb-autocomplete__status--error) .dnb-form-label:hover~.dnb-autocomplete__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__shell{--border-color:var(--color-sea-green);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-autocomplete--opened .dnb-input .dnb-input__shell .dnb-input__submit-button__button,.dnb-autocomplete:not(.dnb-autocomplete__status--error) .dnb-form-label:hover~.dnb-autocomplete__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button{background-color:var(--color-sea-green);border-radius:0;box-shadow:none;color:var(--color-white)}.dnb-autocomplete--show-indicator .dnb-autocomplete__input .dnb-input__icon{color:transparent}.dnb-autocomplete__input,.dnb-autocomplete__shell{border-radius:var(--autocomplete-border-radius)}.dnb-autocomplete__status--error:not(.dnb-autocomplete--opened) .dnb-form-label:hover~.dnb-autocomplete__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__shell{--border-color:var(--color-fire-red);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-autocomplete__root .dnb-drawer-list__option__item:first-of-type{font-weight:var(--font-weight-basis)}.dnb-autocomplete__root .dnb-drawer-list__option__item:nth-of-type(n+2){color:var(--color-black-55)}.dnb-autocomplete__root .dnb-drawer-list__option__item--highlight{font-weight:var(--font-weight-bold)}.dnb-autocomplete__root .dnb-drawer-list__option--selected .dnb-anchor,.dnb-autocomplete__root .dnb-drawer-list__option--selected .dnb-drawer-list__option__item:nth-of-type(n+2){color:var(--color-white)}

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

@@ -6,6 +6,12 @@
 @import '../../../../style/core/utilities.scss';
 
 .dnb-autocomplete {
+  &__show-all {
+    .dnb-drawer-list__option__inner {
+      color: var(--color-sea-green);
+    }
+  }
+
   &--opened .dnb-input .dnb-input__shell,
   &:not(#{&}__status--error)
     .dnb-form-label:hover

package/cjs/components/breadcrumb/Breadcrumb.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SectionSpacing, SectionStyleTypes } from '../section/Section';
+import { SectionSpacing, SectionStyleTypes, SectionVariants } from '../section/Section';
 import type { SpacingProps } from '../../shared/types';
 import type { SkeletonShow } from '../skeleton/Skeleton';
 import BreadcrumbItem, { BreadcrumbItemProps } from './BreadcrumbItem';
@@ -70,10 +70,10 @@ export type BreadcrumbProps = {
      */
     styleType?: SectionStyleTypes;
     /**
-     * Use one of the Section component style types (style_type)
-     * Default: pistachio
+     * Use one of the Section component variants
+     * Default: info
      */
-    collapsedStyleType?: SectionStyleTypes;
+    collapsedStyleType?: SectionVariants;
     /**
      * Include spacing properties from the Section component in breadcrumb. If only `true` is given, the spacing will be `small`.
      * Default: false

package/cjs/components/breadcrumb/Breadcrumb.js

@@ -42,7 +42,7 @@ const defaultProps = {
 };
 exports.defaultProps = defaultProps;
 const Breadcrumb = localProps => {
-  var _context$translation;
+  var _context$translation, _useTheme;
   const context = _react.default.useContext(_Context.default);
   const allProps = (0, _componentHelper.extendPropsWithContext)(localProps, defaultProps, context === null || context === void 0 ? void 0 : (_context$translation = context.translation) === null || _context$translation === void 0 ? void 0 : _context$translation.Breadcrumb, context === null || context === void 0 ? void 0 : context.Breadcrumb, {
     skeleton: context === null || context === void 0 ? void 0 : context.skeleton
@@ -101,6 +101,7 @@ const Breadcrumb = localProps => {
   }, [data, items, variant]);
   (0, _componentHelper.validateDOMAttributes)(allProps, props);
   const innerSpace = (0, _componentHelper.isTrue)(spacing) ? 'small' : spacing;
+  const overrideSbankenSectionColor = ((_useTheme = (0, _shared.useTheme)()) === null || _useTheme === void 0 ? void 0 : _useTheme.isSbanken) && collapsedStyleType === 'info';
   return _react.default.createElement("nav", _extends({
     "aria-label": (0, _componentHelper.convertJsxToString)(navText),
     className: (0, _classnames.default)(`dnb-breadcrumb dnb-breadcrumb--variant-${currentVariant}`, skeletonClasses, spacingClasses, className)
@@ -129,8 +130,9 @@ const Breadcrumb = localProps => {
     isCollapsed: false,
     noAnimation: noAnimation
   }))), (currentVariant === 'collapse' || currentVariant === 'responsive') && _react.default.createElement(_Section.default, {
-    variant: collapsedStyleType,
-    className: "dnb-breadcrumb__collapse"
+    variant: overrideSbankenSectionColor ? undefined : collapsedStyleType,
+    className: "dnb-breadcrumb__collapse",
+    backgroundColor: overrideSbankenSectionColor ? 'var(--sb-color-gray-light-2)' : undefined
   }, _react.default.createElement(_BreadcrumbMultiple.BreadcrumbMultiple, {
     data: data,
     items: items,

package/cjs/components/breadcrumb/Breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_SkeletonHelper","_SpacingHelper","_Section","_Button","_Context","_BreadcrumbItem","_componentHelper","_BreadcrumbMultiple","_shared","_excluded","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","defaultProps","skeleton","navText","goBackText","homeText","backToText","isCollapsed","styleType","collapsedStyleType","spacing","exports","Breadcrumb","localProps","_context$translation","context","React","useContext","Context","allProps","extendPropsWithContext","translation","className","children","items","variant","onClick","overrideIsCollapsed","noAnimation","data","href","props","skeletonClasses","createSkeletonClass","spacingClasses","createSpacingClasses","forceUpdate","useReducer","isCollapsedRef","useRef","isLarge","useMedia","useEffect","current","onClickHandler","useCallback","currentVariant","useMemo","validateDOMAttributes","innerSpace","isTrue","createElement","convertJsxToString","classnames","style_type","text","icon","icon_position","Fragment","BreadcrumbMultiple","Item","BreadcrumbItem","_supportsSpacingProps","_default"],"sources":["../../../../src/components/breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  useMemo,\n  useReducer,\n  useRef,\n} from 'react'\nimport classnames from 'classnames'\n\n// Components\nimport { createSkeletonClass } from '../skeleton/SkeletonHelper'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport Section, {\n  SectionSpacing,\n  SectionStyleTypes,\n} from '../section/Section'\nimport Button from '../button/Button'\n\n// Shared\nimport Context from '../../shared/Context'\nimport type { SpacingProps } from '../../shared/types'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\n\n// Internal\nimport BreadcrumbItem, { BreadcrumbItemProps } from './BreadcrumbItem'\nimport {\n  convertJsxToString,\n  isTrue,\n  validateDOMAttributes,\n  extendPropsWithContext,\n} from '../../shared/component-helper'\nimport { BreadcrumbMultiple } from './BreadcrumbMultiple'\nimport { useMedia } from '../../shared'\n\nexport type BreadcrumbProps = {\n  /**\n   * Custom className on the component root\n   * Default: null\n   */\n  className?: string\n\n  /**\n   * Skeleton should be applied when loading content\n   * Default: null\n   */\n  skeleton?: SkeletonShow\n\n  /**\n   * Pass in a list of your pages as objects of breadcrumbitem to render them as breadcrumbitems.\n   * Default: null\n   */\n  data?: Array<BreadcrumbItemProps>\n\n  /**\n   * The content of the component. Can be used instead of prop \"data\".\n   * Default: null\n   */\n  children?:\n    | React.ReactElement<BreadcrumbItemProps>\n    | Array<React.ReactElement<BreadcrumbItemProps>>\n\n  /**\n   * The variant of the component.\n   * Default: When children and data is not defined, it defaults to \"single\". \"responsive\" if they are defined.\n   */\n  variant?: 'responsive' | 'single' | 'multiple' | 'collapse'\n\n  /**\n   * Handle the click event on 'single'/'collapse'\n   * Default: null\n   */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>\n\n  /**\n   * For variant 'single', use href (or onClick) to set href when clicking \"Back\"\n   * Default: null\n   */\n  href?: string\n\n  /**\n   * Every <nav> on a page needs an unique aria-label text\n   * Default: Page hierarchy\n   */\n  navText?: React.ReactNode\n\n  /**\n   * Add custom 'Back' text for variant 'single'\n   * Default: 'Back' or defined by Context translation\n   */\n  goBackText?: React.ReactNode\n\n  /**\n   * Add custom 'Home' text\n   * Default: 'Home' or defined by Context translation\n   */\n  homeText?: React.ReactNode\n\n  /**\n   * Add custom 'Back to...' text, for variant collapse\n   * Default 'Back to...' or defined by Context translation\n   */\n  backToText?: React.ReactNode\n\n  /**\n   * If variant='collapse', you can override isCollapsed for the collapsed content by updating this value.\n   * Default: null\n   */\n  isCollapsed?: boolean\n\n  /**\n   * Use one of the Section component style types (style_type)\n   * Default: transparent\n   */\n  styleType?: SectionStyleTypes\n\n  /**\n   * Use one of the Section component style types (style_type)\n   * Default: pistachio\n   */\n  collapsedStyleType?: SectionStyleTypes\n\n  /**\n   * Include spacing properties from the Section component in breadcrumb. If only `true` is given, the spacing will be `small`.\n   * Default: false\n   */\n  spacing?: SectionSpacing\n\n  /**\n   * Will disable the height animation\n   * Default: false\n   */\n  noAnimation?: boolean\n}\n\nexport const defaultProps = {\n  skeleton: false,\n  navText: 'Back',\n  goBackText: 'Back',\n  homeText: 'Home',\n  backToText: 'Back to...',\n  isCollapsed: true,\n  styleType: 'transparent',\n  collapsedStyleType: 'info',\n  spacing: false,\n}\n\nconst Breadcrumb = (localProps: BreadcrumbProps & SpacingProps) => {\n  // Every component should have a context\n  const context = React.useContext(Context)\n\n  // Extract additional props from global context\n  const allProps = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context?.translation?.Breadcrumb,\n    context?.Breadcrumb,\n    { skeleton: context?.skeleton }\n  )\n\n  const {\n    className,\n    skeleton,\n    children: items,\n    variant,\n    onClick,\n    navText, // has a translation in context\n    goBackText, // has a translation in context\n    homeText, // eslint-disable-line\n    backToText, // has a translation in context\n    styleType,\n    collapsedStyleType,\n    isCollapsed: overrideIsCollapsed,\n    spacing,\n    noAnimation,\n    data,\n    href,\n    ...props\n  } = allProps\n  const skeletonClasses = createSkeletonClass('font', skeleton, context)\n  const spacingClasses = createSpacingClasses(props)\n\n  const [, forceUpdate] = useReducer(() => ({}), {})\n\n  const isCollapsedRef = useRef(overrideIsCollapsed)\n\n  const { isLarge } = useMedia()\n\n  useEffect(() => {\n    if (overrideIsCollapsed !== isCollapsedRef.current) {\n      isCollapsedRef.current = overrideIsCollapsed\n      forceUpdate()\n    }\n  }, [overrideIsCollapsed])\n\n  // Auto-collapse breadcrumbs if going from small screen to large screen.\n  useEffect(() => {\n    if (isLarge && overrideIsCollapsed !== false) {\n      isCollapsedRef.current = true\n      forceUpdate()\n    }\n  }, [isLarge, overrideIsCollapsed])\n\n  const onClickHandler = useCallback(() => {\n    isCollapsedRef.current = !isCollapsedRef.current\n    forceUpdate()\n  }, [])\n\n  const currentVariant = useMemo(() => {\n    if (!variant) {\n      if (items || data) {\n        return 'responsive'\n      } else {\n        return 'single'\n      }\n    }\n\n    return variant\n  }, [data, items, variant])\n\n  validateDOMAttributes(allProps, props)\n\n  const innerSpace = isTrue(spacing) ? 'small' : spacing\n\n  return (\n    <nav\n      aria-label={convertJsxToString(navText)}\n      className={classnames(\n        'dnb-breadcrumb',\n        `dnb-breadcrumb--variant-${currentVariant}`,\n        skeletonClasses,\n        spacingClasses,\n        className\n      )}\n      {...props}\n    >\n      <Section\n        className=\"dnb-breadcrumb__bar\"\n        style_type={styleType || 'transparent'}\n        innerSpace={innerSpace}\n      >\n        {currentVariant === 'single' ? (\n          <Button\n            text={goBackText}\n            variant=\"tertiary\"\n            icon=\"chevron_left\"\n            icon_position=\"left\"\n            onClick={onClick}\n            href={href}\n          />\n        ) : (\n          <>\n            {currentVariant !== 'multiple' && (\n              <Button\n                className=\"dnb-breadcrumb__toggle\"\n                text={backToText}\n                variant=\"tertiary\"\n                icon=\"chevron_left\"\n                icon_position=\"left\"\n                onClick={onClick ?? onClickHandler}\n                aria-expanded={!isCollapsedRef.current}\n              />\n            )}\n\n            {currentVariant !== 'collapse' && (\n              <BreadcrumbMultiple\n                data={data}\n                items={items}\n                isCollapsed={false}\n                noAnimation={noAnimation}\n              />\n            )}\n          </>\n        )}\n      </Section>\n\n      {(currentVariant === 'collapse' ||\n        currentVariant === 'responsive') && (\n        <Section\n          variant={collapsedStyleType}\n          className=\"dnb-breadcrumb__collapse\"\n        >\n          <BreadcrumbMultiple\n            data={data}\n            items={items}\n            isCollapsed={isCollapsedRef.current}\n            noAnimation={noAnimation}\n          />\n        </Section>\n      )}\n    </nav>\n  )\n}\n\nBreadcrumb.Item = BreadcrumbItem\nBreadcrumb._supportsSpacingProps = true\n\nexport { BreadcrumbItem }\nexport default Breadcrumb\n"],"mappings":"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"}
+{"version":3,"file":"Breadcrumb.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_SkeletonHelper","_SpacingHelper","_Section","_Button","_Context","_BreadcrumbItem","_componentHelper","_BreadcrumbMultiple","_shared","_excluded","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","defaultProps","skeleton","navText","goBackText","homeText","backToText","isCollapsed","styleType","collapsedStyleType","spacing","exports","Breadcrumb","localProps","_context$translation","_useTheme","context","React","useContext","Context","allProps","extendPropsWithContext","translation","className","children","items","variant","onClick","overrideIsCollapsed","noAnimation","data","href","props","skeletonClasses","createSkeletonClass","spacingClasses","createSpacingClasses","forceUpdate","useReducer","isCollapsedRef","useRef","isLarge","useMedia","useEffect","current","onClickHandler","useCallback","currentVariant","useMemo","validateDOMAttributes","innerSpace","isTrue","overrideSbankenSectionColor","useTheme","isSbanken","createElement","convertJsxToString","classnames","style_type","text","icon","icon_position","Fragment","BreadcrumbMultiple","undefined","backgroundColor","Item","BreadcrumbItem","_supportsSpacingProps","_default"],"sources":["../../../../src/components/breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  useMemo,\n  useReducer,\n  useRef,\n} from 'react'\nimport classnames from 'classnames'\n\n// Components\nimport { createSkeletonClass } from '../skeleton/SkeletonHelper'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport Section, {\n  SectionSpacing,\n  SectionStyleTypes,\n  SectionVariants,\n} from '../section/Section'\nimport Button from '../button/Button'\n\n// Shared\nimport Context from '../../shared/Context'\nimport type { SpacingProps } from '../../shared/types'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\n\n// Internal\nimport BreadcrumbItem, { BreadcrumbItemProps } from './BreadcrumbItem'\nimport {\n  convertJsxToString,\n  isTrue,\n  validateDOMAttributes,\n  extendPropsWithContext,\n} from '../../shared/component-helper'\nimport { BreadcrumbMultiple } from './BreadcrumbMultiple'\nimport { useMedia, useTheme } from '../../shared'\n\nexport type BreadcrumbProps = {\n  /**\n   * Custom className on the component root\n   * Default: null\n   */\n  className?: string\n\n  /**\n   * Skeleton should be applied when loading content\n   * Default: null\n   */\n  skeleton?: SkeletonShow\n\n  /**\n   * Pass in a list of your pages as objects of breadcrumbitem to render them as breadcrumbitems.\n   * Default: null\n   */\n  data?: Array<BreadcrumbItemProps>\n\n  /**\n   * The content of the component. Can be used instead of prop \"data\".\n   * Default: null\n   */\n  children?:\n    | React.ReactElement<BreadcrumbItemProps>\n    | Array<React.ReactElement<BreadcrumbItemProps>>\n\n  /**\n   * The variant of the component.\n   * Default: When children and data is not defined, it defaults to \"single\". \"responsive\" if they are defined.\n   */\n  variant?: 'responsive' | 'single' | 'multiple' | 'collapse'\n\n  /**\n   * Handle the click event on 'single'/'collapse'\n   * Default: null\n   */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>\n\n  /**\n   * For variant 'single', use href (or onClick) to set href when clicking \"Back\"\n   * Default: null\n   */\n  href?: string\n\n  /**\n   * Every <nav> on a page needs an unique aria-label text\n   * Default: Page hierarchy\n   */\n  navText?: React.ReactNode\n\n  /**\n   * Add custom 'Back' text for variant 'single'\n   * Default: 'Back' or defined by Context translation\n   */\n  goBackText?: React.ReactNode\n\n  /**\n   * Add custom 'Home' text\n   * Default: 'Home' or defined by Context translation\n   */\n  homeText?: React.ReactNode\n\n  /**\n   * Add custom 'Back to...' text, for variant collapse\n   * Default 'Back to...' or defined by Context translation\n   */\n  backToText?: React.ReactNode\n\n  /**\n   * If variant='collapse', you can override isCollapsed for the collapsed content by updating this value.\n   * Default: null\n   */\n  isCollapsed?: boolean\n\n  /**\n   * Use one of the Section component style types (style_type)\n   * Default: transparent\n   */\n  styleType?: SectionStyleTypes\n\n  /**\n   * Use one of the Section component variants\n   * Default: info\n   */\n  collapsedStyleType?: SectionVariants\n\n  /**\n   * Include spacing properties from the Section component in breadcrumb. If only `true` is given, the spacing will be `small`.\n   * Default: false\n   */\n  spacing?: SectionSpacing\n\n  /**\n   * Will disable the height animation\n   * Default: false\n   */\n  noAnimation?: boolean\n}\n\nexport const defaultProps = {\n  skeleton: false,\n  navText: 'Back',\n  goBackText: 'Back',\n  homeText: 'Home',\n  backToText: 'Back to...',\n  isCollapsed: true,\n  styleType: 'transparent',\n  collapsedStyleType: 'info',\n  spacing: false,\n}\n\nconst Breadcrumb = (localProps: BreadcrumbProps & SpacingProps) => {\n  // Every component should have a context\n  const context = React.useContext(Context)\n\n  // Extract additional props from global context\n  const allProps = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context?.translation?.Breadcrumb,\n    context?.Breadcrumb,\n    { skeleton: context?.skeleton }\n  )\n\n  const {\n    className,\n    skeleton,\n    children: items,\n    variant,\n    onClick,\n    navText, // has a translation in context\n    goBackText, // has a translation in context\n    homeText, // eslint-disable-line\n    backToText, // has a translation in context\n    styleType,\n    collapsedStyleType,\n    isCollapsed: overrideIsCollapsed,\n    spacing,\n    noAnimation,\n    data,\n    href,\n    ...props\n  } = allProps\n  const skeletonClasses = createSkeletonClass('font', skeleton, context)\n  const spacingClasses = createSpacingClasses(props)\n\n  const [, forceUpdate] = useReducer(() => ({}), {})\n\n  const isCollapsedRef = useRef(overrideIsCollapsed)\n\n  const { isLarge } = useMedia()\n\n  useEffect(() => {\n    if (overrideIsCollapsed !== isCollapsedRef.current) {\n      isCollapsedRef.current = overrideIsCollapsed\n      forceUpdate()\n    }\n  }, [overrideIsCollapsed])\n\n  // Auto-collapse breadcrumbs if going from small screen to large screen.\n  useEffect(() => {\n    if (isLarge && overrideIsCollapsed !== false) {\n      isCollapsedRef.current = true\n      forceUpdate()\n    }\n  }, [isLarge, overrideIsCollapsed])\n\n  const onClickHandler = useCallback(() => {\n    isCollapsedRef.current = !isCollapsedRef.current\n    forceUpdate()\n  }, [])\n\n  const currentVariant = useMemo(() => {\n    if (!variant) {\n      if (items || data) {\n        return 'responsive'\n      } else {\n        return 'single'\n      }\n    }\n\n    return variant\n  }, [data, items, variant])\n\n  validateDOMAttributes(allProps, props)\n\n  const innerSpace = isTrue(spacing) ? 'small' : spacing\n\n  const overrideSbankenSectionColor =\n    useTheme()?.isSbanken && collapsedStyleType === 'info'\n  return (\n    <nav\n      aria-label={convertJsxToString(navText)}\n      className={classnames(\n        'dnb-breadcrumb',\n        `dnb-breadcrumb--variant-${currentVariant}`,\n        skeletonClasses,\n        spacingClasses,\n        className\n      )}\n      {...props}\n    >\n      <Section\n        className=\"dnb-breadcrumb__bar\"\n        style_type={styleType || 'transparent'}\n        innerSpace={innerSpace}\n      >\n        {currentVariant === 'single' ? (\n          <Button\n            text={goBackText}\n            variant=\"tertiary\"\n            icon=\"chevron_left\"\n            icon_position=\"left\"\n            onClick={onClick}\n            href={href}\n          />\n        ) : (\n          <>\n            {currentVariant !== 'multiple' && (\n              <Button\n                className=\"dnb-breadcrumb__toggle\"\n                text={backToText}\n                variant=\"tertiary\"\n                icon=\"chevron_left\"\n                icon_position=\"left\"\n                onClick={onClick ?? onClickHandler}\n                aria-expanded={!isCollapsedRef.current}\n              />\n            )}\n\n            {currentVariant !== 'collapse' && (\n              <BreadcrumbMultiple\n                data={data}\n                items={items}\n                isCollapsed={false}\n                noAnimation={noAnimation}\n              />\n            )}\n          </>\n        )}\n      </Section>\n\n      {(currentVariant === 'collapse' ||\n        currentVariant === 'responsive') && (\n        <Section\n          variant={\n            overrideSbankenSectionColor ? undefined : collapsedStyleType\n          }\n          className=\"dnb-breadcrumb__collapse\"\n          backgroundColor={\n            overrideSbankenSectionColor\n              ? 'var(--sb-color-gray-light-2)'\n              : undefined\n          }\n        >\n          <BreadcrumbMultiple\n            data={data}\n            items={items}\n            isCollapsed={isCollapsedRef.current}\n            noAnimation={noAnimation}\n          />\n        </Section>\n      )}\n    </nav>\n  )\n}\n\nBreadcrumb.Item = BreadcrumbItem\nBreadcrumb._supportsSpacingProps = true\n\nexport { BreadcrumbItem }\nexport default Breadcrumb\n"],"mappings":"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"}

package/cjs/components/card/Card.js

@@ -79,6 +79,7 @@ function Card(props) {
     direction: direction !== null && direction !== void 0 ? direction : 'vertical',
     divider: divider,
     alignSelf: alignSelf,
+    align: stack ? 'stretch' : undefined,
     wrap: !stack,
     gap: stack ? 'medium' : (gap !== null && gap !== void 0 ? gap : spacing) || false,
     rowGap: rowGap || false

package/cjs/components/card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","names":["_react","_interopRequireDefault","require","_classnames","_Flex","_Section","_componentHelper","_useId","_Space","_excluded","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","getOwnPropertyDescriptor","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","defineProperty","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","Card","props","className","stack","direction","gap","spacing","innerSpace","alignSelf","divider","rowGap","responsive","filled","title","children","rest","titleId","useId","falseWhenSmall","small","medium","large","trueWhenSmall","basisSpace","top","right","bottom","left","smallSpace","params","SectionParams","classnames","breakout","roundedCorner","outline","combineLabelledBy","createElement","Item","element","Container","wrap","id","_supportsSpacingProps","_default","exports"],"sources":["../../../../src/components/card/Card.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport Flex from '../flex/Flex'\nimport { SectionParams, SectionProps } from '../section/Section'\nimport { combineLabelledBy } from '../../shared/component-helper'\nimport useId from '../../shared/helpers/useId'\n\nimport type { BasicProps as FlexContainerProps } from '../flex/Container'\nimport type { BasicProps as FlexItemProps } from '../flex/Item'\nimport type { SpaceTypeMedia } from '../../shared/types'\nimport type { SpaceProps } from '../Space'\nimport Space from '../Space'\n\nexport type Props = {\n  /**\n   * Define a title that appears on top of the Card\n   */\n  title?: React.ReactNode\n\n  /**\n   * Define if the Card should behave responsive. Defaults to `true`\n   */\n  responsive?: boolean\n\n  /**\n   * Define if the Card should get the same background color as the outline border\n   */\n  filled?: boolean\n} & FlexContainerProps &\n  FlexItemProps & {\n    stack?: boolean\n  } & SpaceProps &\n  Omit<React.HTMLProps<HTMLElement>, 'ref' | 'wrap' | 'size'>\n\nfunction Card(props: Props) {\n  const {\n    className,\n    stack,\n    direction,\n    gap,\n    spacing,\n    innerSpace,\n    alignSelf = 'stretch',\n    divider = 'space',\n    rowGap,\n    responsive = true,\n    filled,\n    title,\n    children,\n    ...rest\n  } = props\n\n  const titleId = useId()\n  const falseWhenSmall = { small: false, medium: true, large: true }\n  const trueWhenSmall = { small: true, medium: false, large: false }\n  const basisSpace = {\n    top: 'medium',\n    right: 'medium',\n    bottom: 'large',\n    left: 'medium',\n  }\n  const smallSpace = responsive\n    ? {\n        ...basisSpace,\n        right: 0,\n        left: 0,\n      }\n    : basisSpace\n\n  const params = SectionParams({\n    className: classnames(\n      'dnb-card',\n      className,\n      responsive && 'dnb-card--responsive',\n      filled && 'dnb-card--filled'\n    ),\n    breakout: responsive ? trueWhenSmall : false,\n    roundedCorner: responsive ? falseWhenSmall : true,\n    outline: true,\n    innerSpace:\n      innerSpace ??\n      ({\n        small: smallSpace,\n        medium: basisSpace,\n        large: basisSpace,\n      } as SpaceTypeMedia),\n    ...(rest as SectionProps),\n    'aria-labelledby': combineLabelledBy(rest, title && titleId),\n  })\n\n  return (\n    <Flex.Item alignSelf={alignSelf} element=\"section\" {...params}>\n      <Flex.Container\n        direction={direction ?? 'vertical'}\n        divider={divider}\n        alignSelf={alignSelf}\n        wrap={!stack}\n        gap={stack ? 'medium' : (gap ?? spacing) || false}\n        rowGap={rowGap || false}\n      >\n        {title && (\n          <Space id={titleId} className=\"dnb-card__title\">\n            {title}\n          </Space>\n        )}\n        {children}\n      </Flex.Container>\n    </Flex.Item>\n  )\n}\n\nCard._supportsSpacingProps = true\n\nexport default Card\n"],"mappings":"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"}
+{"version":3,"file":"Card.js","names":["_react","_interopRequireDefault","require","_classnames","_Flex","_Section","_componentHelper","_useId","_Space","_excluded","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","getOwnPropertyDescriptor","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","defineProperty","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","Card","props","className","stack","direction","gap","spacing","innerSpace","alignSelf","divider","rowGap","responsive","filled","title","children","rest","titleId","useId","falseWhenSmall","small","medium","large","trueWhenSmall","basisSpace","top","right","bottom","left","smallSpace","params","SectionParams","classnames","breakout","roundedCorner","outline","combineLabelledBy","createElement","Item","element","Container","align","wrap","id","_supportsSpacingProps","_default","exports"],"sources":["../../../../src/components/card/Card.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport Flex from '../flex/Flex'\nimport { SectionParams, SectionProps } from '../section/Section'\nimport { combineLabelledBy } from '../../shared/component-helper'\nimport useId from '../../shared/helpers/useId'\n\nimport type { BasicProps as FlexContainerProps } from '../flex/Container'\nimport type { BasicProps as FlexItemProps } from '../flex/Item'\nimport type { SpaceTypeMedia } from '../../shared/types'\nimport type { SpaceProps } from '../Space'\nimport Space from '../Space'\n\nexport type Props = {\n  /**\n   * Define a title that appears on top of the Card\n   */\n  title?: React.ReactNode\n\n  /**\n   * Define if the Card should behave responsive. Defaults to `true`\n   */\n  responsive?: boolean\n\n  /**\n   * Define if the Card should get the same background color as the outline border\n   */\n  filled?: boolean\n} & FlexContainerProps &\n  FlexItemProps & {\n    stack?: boolean\n  } & SpaceProps &\n  Omit<React.HTMLProps<HTMLElement>, 'ref' | 'wrap' | 'size'>\n\nfunction Card(props: Props) {\n  const {\n    className,\n    stack,\n    direction,\n    gap,\n    spacing,\n    innerSpace,\n    alignSelf = 'stretch',\n    divider = 'space',\n    rowGap,\n    responsive = true,\n    filled,\n    title,\n    children,\n    ...rest\n  } = props\n\n  const titleId = useId()\n  const falseWhenSmall = { small: false, medium: true, large: true }\n  const trueWhenSmall = { small: true, medium: false, large: false }\n  const basisSpace = {\n    top: 'medium',\n    right: 'medium',\n    bottom: 'large',\n    left: 'medium',\n  }\n  const smallSpace = responsive\n    ? {\n        ...basisSpace,\n        right: 0,\n        left: 0,\n      }\n    : basisSpace\n\n  const params = SectionParams({\n    className: classnames(\n      'dnb-card',\n      className,\n      responsive && 'dnb-card--responsive',\n      filled && 'dnb-card--filled'\n    ),\n    breakout: responsive ? trueWhenSmall : false,\n    roundedCorner: responsive ? falseWhenSmall : true,\n    outline: true,\n    innerSpace:\n      innerSpace ??\n      ({\n        small: smallSpace,\n        medium: basisSpace,\n        large: basisSpace,\n      } as SpaceTypeMedia),\n    ...(rest as SectionProps),\n    'aria-labelledby': combineLabelledBy(rest, title && titleId),\n  })\n\n  return (\n    <Flex.Item alignSelf={alignSelf} element=\"section\" {...params}>\n      <Flex.Container\n        direction={direction ?? 'vertical'}\n        divider={divider}\n        alignSelf={alignSelf}\n        align={stack ? 'stretch' : undefined}\n        wrap={!stack}\n        gap={stack ? 'medium' : (gap ?? spacing) || false}\n        rowGap={rowGap || false}\n      >\n        {title && (\n          <Space id={titleId} className=\"dnb-card__title\">\n            {title}\n          </Space>\n        )}\n        {children}\n      </Flex.Container>\n    </Flex.Item>\n  )\n}\n\nCard._supportsSpacingProps = true\n\nexport default Card\n"],"mappings":"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"}

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

@@ -63,4 +63,7 @@
 }
 .dnb-card > .dnb-flex-container > .dnb-space:has(> .dnb-scroll-view) {
   width: 100%;
+}
+.dnb-card > .dnb-flex-container--align-stretch > .dnb-button {
+  align-self: flex-start;
 }

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

@@ -1 +1 @@
-.dnb-card__heading{font-size:var(--font-size-basis);font-weight:var(--font-weight-medium)}.dnb-card+.dnb-card__heading{margin-top:var(--spacing-small)}.dnb-card__title{font-size:var(--font-size-small);font-weight:var(--font-weight-medium);padding-bottom:1rem}.dnb-card:not([style*="--space-"]) .dnb-card__title{padding:1rem}.dnb-card.dnb-section{background-color:var(--background-color)}.dnb-card--filled.dnb-card.dnb-section{--background-color:var(--outline-color)}@media screen and (max-width:40em){.dnb-card--responsive.dnb-section:before{--outline:99vw 0 0 0 var(--background-color),198vw 0 0 0 var(--background-color),297vw 0 0 0 var(--background-color),396vw 0 0 0 var(--background-color),0 var(--outline-width) 0 0 var(--outline-color),99vw var(--outline-width) 0 0 var(--outline-color),0 calc(var(--outline-width)*-1) 0 0 var(--outline-color),99vw calc(var(--outline-width)*-1) 0 0 var(--outline-color),198vw var(--outline-width) 0 0 var(--outline-color),198vw calc(var(--outline-width)*-1) 0 0 var(--outline-color);left:var(--left)}.dnb-card+.dnb-card--responsive:not([class*=space__top]){background:linear-gradient(to left,var(--background-color),var(--background-color)) no-repeat 0 var(--outline-width)}.dnb-card+.dnb-card--responsive:not([class*=space__top]):before{top:var(--outline-width)}.dnb-flex-container.dnb-flex-container--divider-space .dnb-card+.dnb-card--responsive{margin-top:0}.dnb-flex-container.dnb-flex-container--divider-space .dnb-card+.dnb-card--responsive:before{top:var(--outline-width);z-index:0}}.dnb-card .dnb-flex-container:has(>.dnb-card__title+.dnb-scroll-view){align-items:stretch;flex-wrap:nowrap}.dnb-card--filled .dnb-scroll-view{clip-path:inset(0 0 0 0 round var(--rounded-corner) var(--rounded-corner) var(--rounded-corner) var(--rounded-corner))}.dnb-card>.dnb-flex-container>.dnb-space:has(>.dnb-scroll-view){width:100%}
+.dnb-card__heading{font-size:var(--font-size-basis);font-weight:var(--font-weight-medium)}.dnb-card+.dnb-card__heading{margin-top:var(--spacing-small)}.dnb-card__title{font-size:var(--font-size-small);font-weight:var(--font-weight-medium);padding-bottom:1rem}.dnb-card:not([style*="--space-"]) .dnb-card__title{padding:1rem}.dnb-card.dnb-section{background-color:var(--background-color)}.dnb-card--filled.dnb-card.dnb-section{--background-color:var(--outline-color)}@media screen and (max-width:40em){.dnb-card--responsive.dnb-section:before{--outline:99vw 0 0 0 var(--background-color),198vw 0 0 0 var(--background-color),297vw 0 0 0 var(--background-color),396vw 0 0 0 var(--background-color),0 var(--outline-width) 0 0 var(--outline-color),99vw var(--outline-width) 0 0 var(--outline-color),0 calc(var(--outline-width)*-1) 0 0 var(--outline-color),99vw calc(var(--outline-width)*-1) 0 0 var(--outline-color),198vw var(--outline-width) 0 0 var(--outline-color),198vw calc(var(--outline-width)*-1) 0 0 var(--outline-color);left:var(--left)}.dnb-card+.dnb-card--responsive:not([class*=space__top]){background:linear-gradient(to left,var(--background-color),var(--background-color)) no-repeat 0 var(--outline-width)}.dnb-card+.dnb-card--responsive:not([class*=space__top]):before{top:var(--outline-width)}.dnb-flex-container.dnb-flex-container--divider-space .dnb-card+.dnb-card--responsive{margin-top:0}.dnb-flex-container.dnb-flex-container--divider-space .dnb-card+.dnb-card--responsive:before{top:var(--outline-width);z-index:0}}.dnb-card .dnb-flex-container:has(>.dnb-card__title+.dnb-scroll-view){align-items:stretch;flex-wrap:nowrap}.dnb-card--filled .dnb-scroll-view{clip-path:inset(0 0 0 0 round var(--rounded-corner) var(--rounded-corner) var(--rounded-corner) var(--rounded-corner))}.dnb-card>.dnb-flex-container>.dnb-space:has(>.dnb-scroll-view){width:100%}.dnb-card>.dnb-flex-container--align-stretch>.dnb-button{align-self:flex-start}

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

@@ -92,4 +92,8 @@
   & > .dnb-flex-container > .dnb-space:has(> .dnb-scroll-view) {
     width: 100%;
   }
+
+  & > .dnb-flex-container--align-stretch > .dnb-button {
+    align-self: flex-start;
+  }
 }

package/cjs/components/checkbox/Checkbox.js

@@ -112,7 +112,7 @@ function Checkbox(localProps) {
     }
   }, [handleChange]);
   const mainParams = {
-    className: (0, _classnames.default)("dnb-checkbox dnb-form-component", (0, _SkeletonHelper.createSkeletonClass)(null, skeleton), (0, _SpacingHelper.createSpacingClasses)(props), className, status && `dnb-checkbox__status--${statusState}`, size && `dnb-checkbox--${size}`, label && `dnb-checkbox--label-position-${labelPosition || 'right'}`)
+    className: (0, _classnames.default)("dnb-checkbox dnb-form-component", (0, _SkeletonHelper.createSkeletonClass)(null, skeleton, context), (0, _SpacingHelper.createSpacingClasses)(props), className, status && `dnb-checkbox__status--${statusState}`, size && `dnb-checkbox--${size}`, label && `dnb-checkbox--label-position-${labelPosition || 'right'}`)
   };
   const showStatus = (0, _componentHelper.getStatusState)(status);
   const inputParams = handleInputAttributes();