@dnb/eufemia 10.76.1 → 10.77.0

package/CHANGELOG.md

@@ -3,6 +3,13 @@
 All notable changes to @dnb/eufemia will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [10.77.0](https://github.com/dnbexperience/eufemia/compare/v10.76.1...v10.77.0) (2025-06-20)
+
+
+### :sparkles: Features
+
+* add style isolation support ([#5267](https://github.com/dnbexperience/eufemia/issues/5267)) ([53bbf04](https://github.com/dnbexperience/eufemia/commit/53bbf04aaf9a1917ab0c908eb6e0194424a0409c))
+
 ## [10.76.1](https://github.com/dnbexperience/eufemia/compare/v10.76.0...v10.76.1) (2025-06-20)
 
 

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

@@ -0,0 +1,166 @@
+/*
+* Accordion component
+*
+*/
+/*
+ * Utilities
+ */
+.eufemia-scope--10_77_0 .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;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-basis);
+}
+.eufemia-scope--10_77_0 .dnb-accordion__header {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  outline: none;
+  border: var(--accordion-border-width) solid transparent;
+  border-radius: var(--accordion-border-radius);
+}
+.eufemia-scope--10_77_0 .dnb-accordion__header * {
+  pointer-events: none;
+}
+.eufemia-scope--10_77_0 .dnb-accordion__header--prevent-click {
+  pointer-events: none;
+}
+.eufemia-scope--10_77_0 .dnb-accordion__header__wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  margin: var(--accordion-header-margin-vertical) var(--accordion-header-wrapper-margin) var(--accordion-header-margin-vertical) 0;
+}
+.eufemia-scope--10_77_0 .dnb-accordion__header--description .dnb-accordion__header__wrapper {
+  margin-top: var(--accordion-header-margin-vertical--description);
+  margin-bottom: var(--accordion-header-margin-vertical--description);
+}
+.eufemia-scope--10_77_0 .dnb-accordion__header__container {
+  margin: 0 1rem;
+}
+.eufemia-scope--10_77_0 .dnb-accordion__header__icon {
+  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);
+  transition: transform 400ms var(--accordion-easing);
+}
+.eufemia-scope--10_77_0 .dnb-accordion__header--description .dnb-accordion__header__icon {
+  margin-top: var(--accordion-header-margin-vertical--description);
+}
+.eufemia-scope--10_77_0 .dnb-accordion__header--icon-right {
+  justify-content: space-between;
+}
+.eufemia-scope--10_77_0 .dnb-accordion__header--icon-right .dnb-accordion__header__icon {
+  margin-right: var(--accordion-header-icon-margin);
+  margin-left: var(--accordion-header-icon-gutter);
+  order: 3;
+}
+.eufemia-scope--10_77_0 .dnb-accordion__header--icon-right .dnb-accordion__header__container {
+  order: 1;
+}
+.eufemia-scope--10_77_0 .dnb-accordion__header--icon-right .dnb-accordion__header__wrapper {
+  order: 2;
+  margin-right: 0;
+  margin-left: var(--accordion-header-wrapper-margin--icon-right);
+}
+.eufemia-scope--10_77_0 .dnb-accordion__header--icon-right .dnb-accordion__header__wrapper + .dnb-accordion__header__container {
+  margin-right: 0;
+}
+.eufemia-scope--10_77_0 .dnb-accordion__header--icon-right .dnb-accordion__header__container + .dnb-accordion__header__wrapper {
+  margin-left: 0;
+}
+.eufemia-scope--10_77_0 .dnb-accordion__header--expanded {
+  --accordion-title-font-weight: var(
+    --accordion-title-font-weight--expanded
+  );
+}
+.eufemia-scope--10_77_0 .dnb-accordion__header__title {
+  font-size: var(--font-size-basis);
+  line-height: var(--line-height-basis);
+  font-weight: var(--accordion-title-font-weight);
+}
+.eufemia-scope--10_77_0 .dnb-accordion__header__description {
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-small);
+  font-weight: var(--font-weight-basis);
+}
+.eufemia-scope--10_77_0 .dnb-accordion__header__title + .dnb-accordion__header__description {
+  margin-top: 0.25rem;
+}
+.eufemia-scope--10_77_0 .dnb-accordion__header__description + .dnb-accordion__header__title {
+  margin-top: 0.25rem;
+}
+.eufemia-scope--10_77_0 .dnb-accordion--expanded > .dnb-accordion__header .dnb-accordion__header__icon {
+  transform: rotate(-180deg);
+}
+.eufemia-scope--10_77_0 .dnb-accordion__content {
+  display: flex;
+  width: 100%;
+  will-change: height;
+  transition: height 400ms var(--accordion-easing), opacity 600ms var(--accordion-easing);
+}
+.eufemia-scope--10_77_0 .dnb-accordion__content__inner {
+  width: 100%;
+  margin: var(--accordion-content-margin);
+  padding: var(--accordion-content-padding);
+}
+.eufemia-scope--10_77_0 .dnb-accordion-group--single-container {
+  transition: min-height 1s var(--accordion-easing);
+}
+.eufemia-scope--10_77_0 .dnb-accordion-group--single-container .dnb-accordion {
+  position: static;
+  max-width: 60rem;
+}
+@media screen and (min-width: 40.00625em) {
+  .eufemia-scope--10_77_0 .dnb-accordion-group--single-container .dnb-accordion__header {
+    width: 40%;
+  }
+  .eufemia-scope--10_77_0 .dnb-accordion-group--single-container .dnb-accordion__content {
+    margin-left: 1rem;
+    transition: opacity 1s var(--accordion-easing);
+  }
+  .eufemia-scope--10_77_0 .dnb-accordion-group--single-container .dnb-accordion__content__inner {
+    margin-top: 0;
+  }
+}
+@media screen and (min-width: 40.00625em) {
+  .eufemia-scope--10_77_0 .dnb-accordion-group--single-container .dnb-accordion > .dnb-accordion__header .dnb-accordion__header__icon {
+    transform: rotate(-90deg);
+  }
+}
+.eufemia-scope--10_77_0 .dnb-accordion-group--single-container .dnb-accordion-group__children {
+  max-width: 60rem;
+}
+@media screen and (min-width: 40.00625em) {
+  .eufemia-scope--10_77_0 .dnb-accordion-group--single-container .dnb-accordion-group__children {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+  }
+  .eufemia-scope--10_77_0 .dnb-accordion-group--single-container .dnb-accordion-group__children .dnb-accordion__content {
+    position: absolute;
+    z-index: 10;
+    top: 0;
+    right: 0;
+    width: 60%;
+  }
+}
+.eufemia-scope--10_77_0 .dnb-accordion > .dnb-accordion__header--no-animation .dnb-accordion__header__icon, html[data-visual-test] .eufemia-scope--10_77_0 .dnb-accordion .dnb-accordion__header .dnb-accordion__header__icon {
+  transition: none;
+}

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

@@ -0,0 +1,3 @@
+.eufemia-scope--10_77_0 .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}.eufemia-scope--10_77_0 .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}.eufemia-scope--10_77_0 .dnb-accordion__header *,.eufemia-scope--10_77_0 .dnb-accordion__header--prevent-click{pointer-events:none}.eufemia-scope--10_77_0 .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%}.eufemia-scope--10_77_0 .dnb-accordion__header--description .dnb-accordion__header__wrapper{margin-bottom:var(--accordion-header-margin-vertical--description);margin-top:var(--accordion-header-margin-vertical--description)}.eufemia-scope--10_77_0 .dnb-accordion__header__container{margin:0 1rem}.eufemia-scope--10_77_0 .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)}.eufemia-scope--10_77_0 .dnb-accordion__header--description .dnb-accordion__header__icon{margin-top:var(--accordion-header-margin-vertical--description)}.eufemia-scope--10_77_0 .dnb-accordion__header--icon-right{justify-content:space-between}.eufemia-scope--10_77_0 .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}.eufemia-scope--10_77_0 .dnb-accordion__header--icon-right .dnb-accordion__header__container{order:1}.eufemia-scope--10_77_0 .dnb-accordion__header--icon-right .dnb-accordion__header__wrapper{margin-left:var(--accordion-header-wrapper-margin--icon-right);margin-right:0;order:2}.eufemia-scope--10_77_0 .dnb-accordion__header--icon-right .dnb-accordion__header__wrapper+.dnb-accordion__header__container{margin-right:0}.eufemia-scope--10_77_0 .dnb-accordion__header--icon-right .dnb-accordion__header__container+.dnb-accordion__header__wrapper{margin-left:0}.eufemia-scope--10_77_0 .dnb-accordion__header--expanded{--accordion-title-font-weight:var(
+    --accordion-title-font-weight--expanded
+  )}.eufemia-scope--10_77_0 .dnb-accordion__header__title{font-size:var(--font-size-basis);font-weight:var(--accordion-title-font-weight);line-height:var(--line-height-basis)}.eufemia-scope--10_77_0 .dnb-accordion__header__description{font-size:var(--font-size-small);font-weight:var(--font-weight-basis);line-height:var(--line-height-small)}.eufemia-scope--10_77_0 .dnb-accordion__header__description+.dnb-accordion__header__title,.eufemia-scope--10_77_0 .dnb-accordion__header__title+.dnb-accordion__header__description{margin-top:.25rem}.eufemia-scope--10_77_0 .dnb-accordion--expanded>.dnb-accordion__header .dnb-accordion__header__icon{transform:rotate(-180deg)}.eufemia-scope--10_77_0 .dnb-accordion__content{display:flex;transition:height .4s var(--accordion-easing),opacity .6s var(--accordion-easing);width:100%;will-change:height}.eufemia-scope--10_77_0 .dnb-accordion__content__inner{margin:var(--accordion-content-margin);padding:var(--accordion-content-padding);width:100%}.eufemia-scope--10_77_0 .dnb-accordion-group--single-container{transition:min-height 1s var(--accordion-easing)}.eufemia-scope--10_77_0 .dnb-accordion-group--single-container .dnb-accordion{max-width:60rem;position:static}@media screen and (min-width:40.00625em){.eufemia-scope--10_77_0 .dnb-accordion-group--single-container .dnb-accordion__header{width:40%}.eufemia-scope--10_77_0 .dnb-accordion-group--single-container .dnb-accordion__content{margin-left:1rem;transition:opacity 1s var(--accordion-easing)}.eufemia-scope--10_77_0 .dnb-accordion-group--single-container .dnb-accordion__content__inner{margin-top:0}.eufemia-scope--10_77_0 .dnb-accordion-group--single-container .dnb-accordion>.dnb-accordion__header .dnb-accordion__header__icon{transform:rotate(-90deg)}}.eufemia-scope--10_77_0 .dnb-accordion-group--single-container .dnb-accordion-group__children{max-width:60rem}@media screen and (min-width:40.00625em){.eufemia-scope--10_77_0 .dnb-accordion-group--single-container .dnb-accordion-group__children{display:flex;flex-direction:column;position:relative}.eufemia-scope--10_77_0 .dnb-accordion-group--single-container .dnb-accordion-group__children .dnb-accordion__content{position:absolute;right:0;top:0;width:60%;z-index:10}}.eufemia-scope--10_77_0 .dnb-accordion>.dnb-accordion__header--no-animation .dnb-accordion__header__icon,html[data-visual-test] .eufemia-scope--10_77_0 .dnb-accordion .dnb-accordion__header .dnb-accordion__header__icon{transition:none}

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

@@ -0,0 +1,113 @@
+/*
+* Accordion theme
+*
+*/
+/*
+ * Utilities
+ */
+.eufemia-scope--10_77_0 .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);
+}
+.eufemia-scope--10_77_0 .dnb-accordion__header, .eufemia-scope--10_77_0 .dnb-accordion__content {
+  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]) .eufemia-scope--10_77_0 .dnb-accordion__header:focus-visible[disabled] {
+  cursor: not-allowed;
+}
+html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-accordion__header:focus-visible:not([disabled]) {
+  outline: none;
+  --border-color: var(--focus-ring-color);
+  --border-width: var(--focus-ring-width);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+  z-index: 1;
+  border-radius: 0.125rem;
+  background-color: var(--sb-color-blue-light-3);
+  color: var(--border-color);
+}
+html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-accordion__header:focus-visible:not([disabled]) .dnb-accordion__header__icon {
+  color: var(--border-color);
+}
+html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-accordion__header:hover[disabled] {
+  cursor: not-allowed;
+}
+html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-accordion__header:hover:not([disabled]) {
+  background-color: var(--sb-color-violet-light-2);
+  border-radius: var(--sb-accordion-header-border-radius--hover);
+}
+.eufemia-scope--10_77_0 .dnb-accordion__header:active[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-accordion__header:active[disabled] {
+  cursor: not-allowed;
+}
+.eufemia-scope--10_77_0 .dnb-accordion__header:active:not([disabled]), html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-accordion__header:active:not([disabled]) {
+  background-color: var(--sb-color-white);
+  --border-color: ;
+  --border-width: 0.0625rem;
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
+  --border-color: var(--sb-color-violet);
+  border-left-width: var(--sb-accordion-frame-width--active);
+  padding-left: calc(var(--sb-accordion-frame-width) - var(--sb-accordion-frame-width--active));
+}
+.eufemia-scope--10_77_0 .dnb-accordion__header__icon, .eufemia-scope--10_77_0 .dnb-accordion__header__container {
+  color: var(--sb-color-violet);
+}
+.eufemia-scope--10_77_0 .dnb-accordion__header--icon-right {
+  --accordion-header-icon-margin: 1.5rem;
+}
+.eufemia-scope--10_77_0 .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);
+}
+.eufemia-scope--10_77_0 .dnb-accordion__header[disabled] * {
+  color: var(--sb-color-gray-dark-2);
+}
+.eufemia-scope--10_77_0 .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]) .eufemia-scope--10_77_0 .dnb-accordion--expanded > .dnb-accordion__header:hover[disabled] {
+  cursor: not-allowed;
+}
+html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-accordion--expanded > .dnb-accordion__header:hover:not([disabled]) {
+  border-radius: var(--sb-accordion-header-border-radius--hover-expanded);
+}
+.eufemia-scope--10_77_0 .dnb-accordion--expanded > .dnb-accordion__header--expanded {
+  border-radius: var(--sb-accordion-header-border-radius--expanded);
+}
+.eufemia-scope--10_77_0 .dnb-accordion--expanded > .dnb-accordion__content {
+  border-radius: var(--sb-accordion-content-border-radius);
+}
+.eufemia-scope--10_77_0 .dnb-accordion--expanded > .dnb-accordion__header[disabled],
+.eufemia-scope--10_77_0 .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--isolated.min.css

@@ -0,0 +1 @@
+.eufemia-scope--10_77_0 .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)}.eufemia-scope--10_77_0 .dnb-accordion__content,.eufemia-scope--10_77_0 .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]) .eufemia-scope--10_77_0 .dnb-accordion__header:focus-visible[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .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]) .eufemia-scope--10_77_0 .dnb-accordion__header:focus-visible:not([disabled]) .dnb-accordion__header__icon{color:var(--border-color)}html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-accordion__header:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-accordion__header:hover:not([disabled]){background-color:var(--sb-color-violet-light-2);border-radius:var(--sb-accordion-header-border-radius--hover)}.eufemia-scope--10_77_0 .dnb-accordion__header:active[disabled],html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-accordion__header:active[disabled]{cursor:not-allowed}.eufemia-scope--10_77_0 .dnb-accordion__header:active:not([disabled]),html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .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))}.eufemia-scope--10_77_0 .dnb-accordion__header__container,.eufemia-scope--10_77_0 .dnb-accordion__header__icon{color:var(--sb-color-violet)}.eufemia-scope--10_77_0 .dnb-accordion__header--icon-right{--accordion-header-icon-margin:1.5rem}.eufemia-scope--10_77_0 .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)}.eufemia-scope--10_77_0 .dnb-accordion__header[disabled] *{color:var(--sb-color-gray-dark-2)}.eufemia-scope--10_77_0 .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]) .eufemia-scope--10_77_0 .dnb-accordion--expanded>.dnb-accordion__header:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-accordion--expanded>.dnb-accordion__header:hover:not([disabled]){border-radius:var(--sb-accordion-header-border-radius--hover-expanded)}.eufemia-scope--10_77_0 .dnb-accordion--expanded>.dnb-accordion__header--expanded{border-radius:var(--sb-accordion-header-border-radius--expanded)}.eufemia-scope--10_77_0 .dnb-accordion--expanded>.dnb-accordion__content{border-radius:var(--sb-accordion-content-border-radius)}.eufemia-scope--10_77_0 .dnb-accordion--expanded>.dnb-accordion__header[disabled],.eufemia-scope--10_77_0 .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-ui--isolated.css

@@ -0,0 +1,158 @@
+/*
+ * Accordion theme
+ *
+ */
+/*
+ * Utilities
+ */
+.eufemia-scope--10_77_0 .dnb-accordion__header {
+  color: var(--ui-accordion-color--override, var(--ui-accordion-color));
+  background-color: var(--ui-accordion-background--override, var(--ui-accordion-background));
+  box-shadow: var(--ui-accordion-box-shadow);
+  border: none;
+  /* 
+   * VARIANTS
+   * Each variant is mutually exclusive
+   */
+  /* 
+   * STATES
+   * States that can exist across all variants.
+   */
+}
+.eufemia-scope--10_77_0 .dnb-accordion__header__description {
+  color: var(--ui-accordion-description-color--override, var(--ui-accordion-description-color));
+}
+.eufemia-scope--10_77_0 .dnb-accordion__header--outlined, .eufemia-scope--10_77_0 .dnb-accordion__header--filled {
+  --ui-accordion-border-inset: inset;
+  --ui-accordion-box-shadow: var(--ui-accordion-border-inset) 0 0 0
+    var(--accordion-border-width)
+    var(
+      --ui-accordion-border-color--override,
+      var(--ui-accordion-border-color)
+    );
+}
+.eufemia-scope--10_77_0 .dnb-accordion__header--outlined[disabled], .eufemia-scope--10_77_0 .dnb-accordion__header--filled[disabled] {
+  --ui-accordion-color: var(--color-sea-green-30);
+  --ui-accordion-background-: var(--color-white);
+  --ui-accordion-border-color: var(--color-sea-green-30);
+  --ui-accordion-description-color: var(--ui-accordion-color);
+  --ui-accordion-expanded-color: var(--color-white);
+  --ui-accordion-expanded-background: var(--color-sea-green-30);
+}
+.eufemia-scope--10_77_0 .dnb-accordion__header--outlined {
+  --ui-accordion-color: var(--color-emerald-green);
+  --ui-accordion-background: var(--color-white);
+  --ui-accordion-border-color: var(--color-black-8);
+  --ui-accordion-description-color: var(--color-black-55);
+  --ui-accordion-expanded-color: var(--color-white);
+  --ui-accordion-expanded-background: var(--color-sea-green);
+  --ui-accordion-expanded-border-color: var(
+    --ui-accordion-expanded-background
+  );
+  --ui-accordion-expanded-description-color: var(
+    --ui-accordion-expanded-color
+  );
+}
+html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-accordion__header--outlined:focus-visible[disabled] {
+  cursor: not-allowed;
+}
+html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-accordion__header--outlined:focus-visible:not([disabled]) {
+  --accordion-border-width: 0.125rem;
+  --ui-accordion-border-color: var(--color-emerald-green);
+  --ui-accordion-expanded-border-color: var(--color-emerald-green);
+  --ui-accordion-expanded-color: var(--color-emerald-green);
+  --ui-accordion-expanded-background: var(--color-mint-green);
+}
+html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-accordion__header--outlined:hover[disabled] {
+  cursor: not-allowed;
+}
+html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-accordion__header--outlined:hover:not([disabled]) {
+  --accordion-border-width: 0.125rem;
+  --ui-accordion-color: var(--color-emerald-green);
+  --ui-accordion-background: var(--color-white);
+  --ui-accordion-border-color: var(--color-emerald-green);
+  --ui-accordion-description-color: var(--color-black-55);
+  --ui-accordion-border-inset: ;
+  --ui-accordion-expanded-color: var(--ui-accordion-color);
+  --ui-accordion-expanded-background: var(--ui-accordion-background);
+  --ui-accordion-expanded-border-color: var(
+    --ui-accordion-border-color
+  );
+  --ui-accordion-expanded-description-color: var(
+    --ui-accordion-description-color
+  );
+  --ui-accordion-after-click-color: var(--color-white);
+  --ui-accordion-after-click-background: var(--color-sea-green);
+  --ui-accordion-after-click-border-color: var(--color-sea-green);
+  --ui-accordion-after-click-description-color: var(--color-white);
+  z-index: 1;
+}
+.eufemia-scope--10_77_0 .dnb-accordion__header--outlined:active[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-accordion__header--outlined:active[disabled] {
+  cursor: not-allowed;
+}
+.eufemia-scope--10_77_0 .dnb-accordion__header--outlined:active:not([disabled]), html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-accordion__header--outlined:active:not([disabled]) {
+  --accordion-border-width: 0.0625rem;
+  --ui-accordion-background: var(--color-pistachio);
+  --ui-accordion-border-inset: inset;
+}
+.eufemia-scope--10_77_0 .dnb-accordion__header--filled {
+  --accordion-border-width: 0.125rem;
+  --accordion-title-font-weight--expanded: var(--font-weight-basis);
+  --ui-accordion-color: var(--color-emerald-green);
+  --ui-accordion-background: var(--color-pistachio);
+  --ui-accordion-border-color: var(--color-pistachio);
+  --ui-accordion-description-color: var(--color-black-55);
+}
+html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-accordion__header--filled:hover[disabled] {
+  cursor: not-allowed;
+}
+html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-accordion__header--filled:hover:not([disabled]) {
+  --ui-accordion-background: var(--color-white);
+}
+.eufemia-scope--10_77_0 .dnb-accordion__header--filled:active[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-accordion__header--filled:active[disabled] {
+  cursor: not-allowed;
+}
+.eufemia-scope--10_77_0 .dnb-accordion__header--filled:active:not([disabled]), html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-accordion__header--filled:active:not([disabled]) {
+  --ui-accordion-color: var(--color-white);
+  --ui-accordion-background: var(--color-sea-green);
+  --ui-accordion-border-color: var(--color-sea-green);
+  --ui-accordion-description-color: ar(--color-white);
+}
+html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-accordion__header--filled:focus-visible[disabled] {
+  cursor: not-allowed;
+}
+html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-accordion__header--filled:focus-visible:not([disabled]) {
+  --ui-accordion-border-color: var(--color-sea-green);
+}
+.eufemia-scope--10_77_0 .dnb-accordion__header--expanded {
+  --ui-accordion-color--override: var(
+    --ui-accordion-expanded-color--override,
+    var(--ui-accordion-expanded-color)
+  );
+  --ui-accordion-background--override: var(
+    --ui-accordion-expanded-background--override,
+    var(--ui-accordion-expanded-background)
+  );
+  --ui-accordion-border-color--override: var(
+    --ui-accordion-expanded-border-color--override,
+    var(--ui-accordion-expanded-border-color)
+  );
+  --ui-accordion-description-color--override: var(
+    --ui-accordion-expanded-description-color--override,
+    var(--ui-accordion-expanded-description-color)
+  );
+}
+.eufemia-scope--10_77_0 .dnb-accordion__header--after-click {
+  --ui-accordion-expanded-color--override: var(
+    --ui-accordion-after-click-color
+  );
+  --ui-accordion-expanded-background--override: var(
+    --ui-accordion-after-click-background
+  );
+  --ui-accordion-expanded-border-color--override: var(
+    --ui-accordion-after-click-border-color
+  );
+  --ui-accordion-expanded-description-color--override: var(
+    --ui-accordion-after-click-description-color
+  );
+}

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

@@ -0,0 +1,27 @@
+.eufemia-scope--10_77_0 .dnb-accordion__header{background-color:var(--ui-accordion-background--override,var(--ui-accordion-background));border:none;box-shadow:var(--ui-accordion-box-shadow);color:var(--ui-accordion-color--override,var(--ui-accordion-color))}.eufemia-scope--10_77_0 .dnb-accordion__header__description{color:var(--ui-accordion-description-color--override,var(--ui-accordion-description-color))}.eufemia-scope--10_77_0 .dnb-accordion__header--filled,.eufemia-scope--10_77_0 .dnb-accordion__header--outlined{--ui-accordion-border-inset:inset;--ui-accordion-box-shadow:var(--ui-accordion-border-inset) 0 0 0 var(--accordion-border-width) var(
+      --ui-accordion-border-color--override,var(--ui-accordion-border-color)
+    )}.eufemia-scope--10_77_0 .dnb-accordion__header--filled[disabled],.eufemia-scope--10_77_0 .dnb-accordion__header--outlined[disabled]{--ui-accordion-color:var(--color-sea-green-30);--ui-accordion-background-:var(--color-white);--ui-accordion-border-color:var(--color-sea-green-30);--ui-accordion-description-color:var(--ui-accordion-color);--ui-accordion-expanded-color:var(--color-white);--ui-accordion-expanded-background:var(--color-sea-green-30)}.eufemia-scope--10_77_0 .dnb-accordion__header--outlined{--ui-accordion-color:var(--color-emerald-green);--ui-accordion-background:var(--color-white);--ui-accordion-border-color:var(--color-black-8);--ui-accordion-description-color:var(--color-black-55);--ui-accordion-expanded-color:var(--color-white);--ui-accordion-expanded-background:var(--color-sea-green);--ui-accordion-expanded-border-color:var(
+    --ui-accordion-expanded-background
+  );--ui-accordion-expanded-description-color:var(
+    --ui-accordion-expanded-color
+  )}html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-accordion__header--outlined:focus-visible[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-accordion__header--outlined:focus-visible:not([disabled]){--accordion-border-width:0.125rem;--ui-accordion-border-color:var(--color-emerald-green);--ui-accordion-expanded-border-color:var(--color-emerald-green);--ui-accordion-expanded-color:var(--color-emerald-green);--ui-accordion-expanded-background:var(--color-mint-green)}html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-accordion__header--outlined:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-accordion__header--outlined:hover:not([disabled]){--accordion-border-width:0.125rem;--ui-accordion-color:var(--color-emerald-green);--ui-accordion-background:var(--color-white);--ui-accordion-border-color:var(--color-emerald-green);--ui-accordion-description-color:var(--color-black-55);--ui-accordion-border-inset: ;--ui-accordion-expanded-color:var(--ui-accordion-color);--ui-accordion-expanded-background:var(--ui-accordion-background);--ui-accordion-expanded-border-color:var(
+    --ui-accordion-border-color
+  );--ui-accordion-expanded-description-color:var(
+    --ui-accordion-description-color
+  );--ui-accordion-after-click-color:var(--color-white);--ui-accordion-after-click-background:var(--color-sea-green);--ui-accordion-after-click-border-color:var(--color-sea-green);--ui-accordion-after-click-description-color:var(--color-white);z-index:1}.eufemia-scope--10_77_0 .dnb-accordion__header--outlined:active[disabled],html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-accordion__header--outlined:active[disabled]{cursor:not-allowed}.eufemia-scope--10_77_0 .dnb-accordion__header--outlined:active:not([disabled]),html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-accordion__header--outlined:active:not([disabled]){--accordion-border-width:0.0625rem;--ui-accordion-background:var(--color-pistachio);--ui-accordion-border-inset:inset}.eufemia-scope--10_77_0 .dnb-accordion__header--filled{--accordion-border-width:0.125rem;--accordion-title-font-weight--expanded:var(--font-weight-basis);--ui-accordion-color:var(--color-emerald-green);--ui-accordion-background:var(--color-pistachio);--ui-accordion-border-color:var(--color-pistachio);--ui-accordion-description-color:var(--color-black-55)}html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-accordion__header--filled:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-accordion__header--filled:hover:not([disabled]){--ui-accordion-background:var(--color-white)}.eufemia-scope--10_77_0 .dnb-accordion__header--filled:active[disabled],html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-accordion__header--filled:active[disabled]{cursor:not-allowed}.eufemia-scope--10_77_0 .dnb-accordion__header--filled:active:not([disabled]),html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-accordion__header--filled:active:not([disabled]){--ui-accordion-color:var(--color-white);--ui-accordion-background:var(--color-sea-green);--ui-accordion-border-color:var(--color-sea-green);--ui-accordion-description-color:ar(--color-white)}html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-accordion__header--filled:focus-visible[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-accordion__header--filled:focus-visible:not([disabled]){--ui-accordion-border-color:var(--color-sea-green)}.eufemia-scope--10_77_0 .dnb-accordion__header--expanded{--ui-accordion-color--override:var(
+    --ui-accordion-expanded-color--override,var(--ui-accordion-expanded-color)
+  );--ui-accordion-background--override:var(
+    --ui-accordion-expanded-background--override,var(--ui-accordion-expanded-background)
+  );--ui-accordion-border-color--override:var(
+    --ui-accordion-expanded-border-color--override,var(--ui-accordion-expanded-border-color)
+  );--ui-accordion-description-color--override:var(
+    --ui-accordion-expanded-description-color--override,var(--ui-accordion-expanded-description-color)
+  )}.eufemia-scope--10_77_0 .dnb-accordion__header--after-click{--ui-accordion-expanded-color--override:var(
+    --ui-accordion-after-click-color
+  );--ui-accordion-expanded-background--override:var(
+    --ui-accordion-after-click-background
+  );--ui-accordion-expanded-border-color--override:var(
+    --ui-accordion-after-click-border-color
+  );--ui-accordion-expanded-description-color--override:var(
+    --ui-accordion-after-click-description-color
+  )}