@odx/ui 2.10.0 → 2.11.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 ## 2.9.9
 
+## 2.11.0
+
+### Minor Changes
+
+- 66a521fb: Make list components nestable
+  Redesign expandable list items
+
+## 2.10.1
+
+### Patch Changes
+
+- a7e1493f: box-shadow color was updated for dark and light theme
+
 ## 2.10.0
 
 ### Minor Changes
@@ -8,6 +21,10 @@
 
 ### Patch Changes
 
+- 0ded821a: border radius for toasts
+
+### Patch Changes
+
 - 469224e8: Update library dependencies
 
 ### Bug Fixes

package/ag-grid-theme.css

@@ -12,7 +12,7 @@
   --ag-background-color: var(--odx-c-background-content);
   --ag-checkbox-indeterminate-color: var(--odx-control-color-selected);
   --ag-checkbox-checked-color: var(--odx-control-color-selected);
-  --ag-font-family: "Pangea";
+  --ag-font-family: var(--odx-typography-font-family);
   --ag-font-size: var(--odx-typography-base-size);
   --ag-icon-size: calc(var(--odx-typography-base-size) * (1*var(--odx-typography-positive-font-scaling-factor)));
   --ag-icon-font-family: core-icons;

package/charts-theme.css

@@ -40,6 +40,6 @@ body {
   --charts-border-color: var(--odx-c-seperator);
   --charts-text-color: var(--odx-c-text);
   --charts-background-color: var(--odx-c-background-content);
-  --charts-font-family: "Pangea";
+  --charts-font-family: var(--odx-typography-font-family);
   --charts-font-size: var(--odx-typography-base-size);
 }

package/core-theme.css

@@ -5,6 +5,7 @@
 body {
   --white: #ffffff;
   --black: #00060f;
+  --black-20: rgba(0, 0, 0, 0.2);
   --white-5: rgba(255, 255, 255, 0.05);
   --white-60: rgba(255, 255, 255, 0.6);
   --gray-50: #f5f7fa;
@@ -91,6 +92,7 @@ body[odxTheme=dark], body.odx-theme-dark {
   --white: #293642;
   --white-dark: #060a12;
   --black: #ffffff;
+  --black-20: rgba(0, 0, 0, 0.6);
   --focus-bg: #284e68;
   --white-60: rgba(var(--white), 0.6);
   --gray-50: #2e3d49;
@@ -156,7 +158,7 @@ body {
   --odx-c-selection: var(--cyan-300);
   --odx-c-backdrop: var(--white-60);
   --odx-c-backdrop-dark: var(--blue-800-30);
-  --odx-c-box-shadow: var(--blue-800-30);
+  --odx-c-box-shadow: var(--black-20);
   --odx-c-separator: var(--gray-200);
   --odx-c-background: var(--gray-50);
   --odx-c-background-content: var(--white);
@@ -282,6 +284,7 @@ body {
 
 /* stylelint-disable block-closing-brace-newline-after */
 :root {
+  --odx-typography-font-family: "PangeaText", "Arial", sans-serif;
   --odx-typography-base-size: 1.6rem;
   --odx-typography-base-line-height: 1.5;
   --odx-typography-font-weight-normal: normal;
@@ -528,19 +531,19 @@ body,
 }
 
 @font-face {
-  font-family: Pangea;
+  font-family: PangeaText;
   font-style: normal;
   font-weight: normal;
   src: url(5eabf29514e9649c8c73.woff2) format("woff2");
 }
 @font-face {
-  font-family: Pangea;
+  font-family: PangeaText;
   font-style: normal;
   font-weight: 500;
   src: url(24031beb1b96a58f519c.woff2) format("woff2");
 }
 @font-face {
-  font-family: Pangea;
+  font-family: PangeaText;
   font-style: normal;
   font-weight: bold;
   src: url(eb2051d1f9da906e0b3e.woff2) format("woff2");
@@ -557,7 +560,7 @@ html body {
   font-weight: var(--odx-typography-font-weight-normal);
   letter-spacing: var(--odx-typography-font-weight-normal-letter-spacing);
   color: var(--odx-c-text);
-  font-family: Pangea, sans-serif;
+  font-family: var(--odx-typography-font-family);
 }
 
 .odx-title, .odx-header__title, .odx-area-header__title, .odx-error-page__title, .odx-content h1, .odx-content h2, .odx-content h3, .odx-content h4, .odx-content h5, .odx-content h6, .odx-subtitle, .odx-area-header__subtitle, .odx-error-page__description,
@@ -2315,7 +2318,7 @@ html body .odx-fs-italic {
 .odx-dropdown {
   background-color: var(--odx-c-background-content);
   border-radius: var(--odx-v-border-radius);
-  box-shadow: var(--odx-v-box-shadow-layer-2);
+  box-shadow: var(--odx-v-box-shadow-layer-1);
   display: block;
   min-height: inherit;
 }
@@ -2466,7 +2469,7 @@ html body .odx-fs-italic {
   background-color: var(--odx-c-secondary-hover);
 }
 }
-.odx-button--secondary.odx-dropdown-host[aria-expanded=true], .odx-dropdown-host[aria-expanded=true].odx-button, .odx-button--secondary:active, .odx-button:active {
+.odx-button--secondary.odx-dropdown-host[aria-expanded=true], .odx-dropdown-host[aria-expanded=true].odx-button, .odx-button--secondary.is-active, .is-active.odx-button, .odx-button--secondary:active, .odx-button:active {
   background-color: var(--odx-c-secondary-active);
 }
 .odx-button--secondary:disabled, .odx-button:disabled, .odx-button--secondary.is-disabled, .is-disabled.odx-button {
@@ -2482,7 +2485,7 @@ html body .odx-fs-italic {
   background-color: var(--odx-c-primary-hover);
 }
 }
-.odx-button--primary.odx-dropdown-host[aria-expanded=true], .odx-button--primary:active {
+.odx-button--primary.odx-dropdown-host[aria-expanded=true], .odx-button--primary.is-active, .odx-button--primary:active {
   background-color: var(--odx-c-primary-active);
 }
 .odx-button--primary:disabled, .odx-button--primary.is-disabled {
@@ -2498,7 +2501,7 @@ html body .odx-fs-italic {
   background-color: var(--odx-c-highlight-hover);
 }
 }
-.odx-button--highlight.odx-dropdown-host[aria-expanded=true], .odx-button--highlight:active {
+.odx-button--highlight.odx-dropdown-host[aria-expanded=true], .odx-button--highlight.is-active, .odx-button--highlight:active {
   background-color: var(--odx-c-highlight-active);
 }
 .odx-button--highlight:disabled, .odx-button--highlight.is-disabled {
@@ -2514,7 +2517,7 @@ html body .odx-fs-italic {
   background-color: var(--odx-c-success-hover);
 }
 }
-.odx-button--success.odx-dropdown-host[aria-expanded=true], .odx-button--success:active {
+.odx-button--success.odx-dropdown-host[aria-expanded=true], .odx-button--success.is-active, .odx-button--success:active {
   background-color: var(--odx-c-success-active);
 }
 .odx-button--success:disabled, .odx-button--success.is-disabled {
@@ -2530,7 +2533,7 @@ html body .odx-fs-italic {
   background-color: var(--odx-c-danger-hover);
 }
 }
-.odx-button--danger.odx-dropdown-host[aria-expanded=true], .odx-button--danger:active {
+.odx-button--danger.odx-dropdown-host[aria-expanded=true], .odx-button--danger.is-active, .odx-button--danger:active {
   background-color: var(--odx-c-danger-active);
 }
 .odx-button--danger:disabled, .odx-button--danger.is-disabled {
@@ -2546,7 +2549,7 @@ html body .odx-fs-italic {
   background-color: var(--odx-c-confirmation-hover);
 }
 }
-.odx-button--confirmation.odx-dropdown-host[aria-expanded=true], .odx-button--confirmation:active {
+.odx-button--confirmation.odx-dropdown-host[aria-expanded=true], .odx-button--confirmation.is-active, .odx-button--confirmation:active {
   background-color: var(--odx-c-confirmation-active);
 }
 .odx-button--confirmation:disabled, .odx-button--confirmation.is-disabled {
@@ -2568,7 +2571,7 @@ html body .odx-fs-italic {
 .odx-button--ghost:active, .odx-main-menu__close:active, .odx-main-menu-button:active, .odx-action-group > .odx-button:active:not(.odx-button--primary, .odx-button--success, .odx-button--danger, .odx-button--confirmation, .odx-auth-sign-in) {
   color: var(--odx-c-link-active);
 }
-.odx-button--ghost.odx-dropdown-host[aria-expanded=true], .odx-dropdown-host[aria-expanded=true].odx-main-menu__close, .odx-dropdown-host[aria-expanded=true].odx-main-menu-button, .odx-action-group > .odx-dropdown-host[aria-expanded=true].odx-button:not(.odx-button--primary, .odx-button--success, .odx-button--danger, .odx-button--confirmation, .odx-auth-sign-in), .odx-button--ghost:focus-visible, .odx-main-menu__close:focus-visible, .odx-main-menu-button:focus-visible, .odx-action-group > .odx-button:focus-visible:not(.odx-button--primary, .odx-button--success, .odx-button--danger, .odx-button--confirmation, .odx-auth-sign-in), .odx-button--ghost:active, .odx-main-menu__close:active, .odx-main-menu-button:active, .odx-action-group > .odx-button:active:not(.odx-button--primary, .odx-button--success, .odx-button--danger, .odx-button--confirmation, .odx-auth-sign-in) {
+.odx-button--ghost.odx-dropdown-host[aria-expanded=true], .odx-dropdown-host[aria-expanded=true].odx-main-menu__close, .odx-dropdown-host[aria-expanded=true].odx-main-menu-button, .odx-action-group > .odx-dropdown-host[aria-expanded=true].odx-button:not(.odx-button--primary, .odx-button--success, .odx-button--danger, .odx-button--confirmation, .odx-auth-sign-in), .odx-button--ghost.is-active, .is-active.odx-main-menu__close, .is-active.odx-main-menu-button, .odx-action-group > .is-active.odx-button:not(.odx-button--primary, .odx-button--success, .odx-button--danger, .odx-button--confirmation, .odx-auth-sign-in), .odx-button--ghost:focus-visible, .odx-main-menu__close:focus-visible, .odx-main-menu-button:focus-visible, .odx-action-group > .odx-button:focus-visible:not(.odx-button--primary, .odx-button--success, .odx-button--danger, .odx-button--confirmation, .odx-auth-sign-in), .odx-button--ghost:active, .odx-main-menu__close:active, .odx-main-menu-button:active, .odx-action-group > .odx-button:active:not(.odx-button--primary, .odx-button--success, .odx-button--danger, .odx-button--confirmation, .odx-auth-sign-in) {
   background-color: var(--odx-c-focus);
 }
 .odx-button--ghost:disabled, .odx-main-menu__close:disabled, .odx-main-menu-button:disabled, .odx-action-group > .odx-button:disabled:not(.odx-button--primary, .odx-button--success, .odx-button--danger, .odx-button--confirmation, .odx-auth-sign-in), .odx-button--ghost.is-disabled, .is-disabled.odx-main-menu__close, .is-disabled.odx-main-menu-button, .odx-action-group > .is-disabled.odx-button:not(.odx-button--primary, .odx-button--success, .odx-button--danger, .odx-button--confirmation, .odx-auth-sign-in) {
@@ -2750,6 +2753,10 @@ body {
   --odx-badge-contrast-color: var(--odx-c-background-content);
 }
 
+.odx-badge-overlay {
+  z-index: var(--odx-v-layer-1);
+}
+
 .odx-badge {
   padding-right: calc(var(--odx-vertical-rythm-base-size) * 0.125);
   padding-left: calc(var(--odx-vertical-rythm-base-size) * 0.125);
@@ -2766,7 +2773,6 @@ body {
   min-width: calc(var(--odx-vertical-rythm-base-size) * 0.6667);
   outline: 1px solid transparent;
   vertical-align: middle;
-  z-index: var(--odx-v-layer-1);
 }
 .odx-badge, .odx-badge--highlight {
   background-color: var(--odx-c-highlight);
@@ -2810,7 +2816,7 @@ body[odxTheme=dark], body.odx-theme-dark {
   align-items: center;
   background-color: var(--odx-bar-background-color);
   border-radius: calc(var(--odx-vertical-rythm-base-size) * 0.25);
-  box-shadow: 0 2px 6px rgba(0, 25, 66, 0.5);
+  box-shadow: var(--odx-v-box-shadow-layer-1);
   color: var(--odx-bar-text-color);
   display: inline-flex;
   gap: calc(var(--odx-vertical-rythm-base-size) * 0.5);
@@ -3660,64 +3666,36 @@ body {
   max-height: 359px;
 }
 
-.odx-expandable-list-item {
+.odx-expandable-list-item__header {
   display: block;
   position: relative;
 }
-.odx-expandable-list-item::before {
-  transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
-  transition-property: border-color;
-  border-bottom: 1px solid var(--gray-200);
-  content: "";
-  display: block;
-  left: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
-  position: absolute;
-  top: 0;
-  width: calc(100% - calc(var(--odx-vertical-rythm-base-size) * 0.5834));
-}
-.odx-expandable-list-item:focus-visible::before, .odx-expandable-list-item:first-child::before {
-  border-bottom-color: transparent;
-}
-@media (hover: hover){
-.odx-expandable-list-item:hover::before {
-  border-bottom-color: transparent;
-}
-}
-.odx-expandable-list-item--danger+.odx-expandable-list-item::before {
-  border-color: transparent;
+.odx-expandable-list-item__header > .odx-list-item {
+  padding-right: calc(var(--odx-vertical-rythm-base-size) * 2.1667);
 }
-@media (hover: hover){
-.odx-expandable-list-item:hover+.odx-expandable-list-item::before {
-  border-color: transparent;
-}
-}
-.odx-expandable-list-item--danger::before {
-  border-bottom-color: transparent;
-}
-.odx-expandable-list-item--expanded::before {
-  border-bottom-color: transparent;
-}
-.odx-expandable-list-item__content {
-  flex: 1;
+.odx-expandable-list-item__action {
+  margin: 0;
+  position: absolute;
+  right: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
+  top: 50%;
+  transform: translateY(-50%);
 }
-.odx-expandable-list-item__expand-icon {
+.odx-expandable-list-item__action .odx-icon {
   transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
   transition-property: transform;
-  position: relative;
 }
-.odx-expandable-list-item--expanded .odx-expandable-list-item__expand-icon {
-  transform: scaleY(-1);
+.odx-expandable-list-item__slot .odx-list .odx-expandable-list-item:first-child > .odx-expandable-list-item__header .odx-list-item,
+.odx-expandable-list-item__slot .odx-list .odx-list-item:first-child {
+  --separator-color: var(--odx-c-separator);
 }
-.odx-expandable-list-item:last-child .odx-expandable-list-item__slot .odx-list-item:last-child::after {
-  border-bottom: 1px solid var(--gray-200);
-  bottom: 0;
-  content: "";
-  display: block;
-  position: absolute;
-  width: calc(100% - calc(var(--odx-vertical-rythm-base-size) * 0.5834));
+.odx-expandable-list-item:has(> .odx-expandable-list-item__header .odx-list-item--danger) .odx-expandable-list-item__action .odx-button {
+  color: var(--odx-c-danger-text);
 }
-.odx-expandable-list-item__slot .odx-list-item__content {
-  padding-left: calc(var(--odx-vertical-rythm-base-size) * 1.5);
+.odx-expandable-list-item:first-child > .odx-expandable-list-item__header .odx-list-item {
+  --separator-color: transparent;
+}
+.odx-expandable-list-item--expanded > .odx-expandable-list-item__header .odx-expandable-list-item__action .odx-button .odx-icon {
+  transform: scaleY(-1);
 }
 
 body {
@@ -4014,10 +3992,10 @@ body {
   --odx-c-warning: var(--yellow-50);
   --odx-c-danger: var(--red-00);
   --odx-c-success: var(--green-00);
-  padding-top: calc(var(--odx-vertical-rythm-base-size) * 0.4167);
   padding-right: calc(var(--odx-vertical-rythm-base-size) * 0.4167);
-  padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.4167);
   padding-left: calc(var(--odx-vertical-rythm-base-size) * 0.4167);
+  padding-top: calc(var(--odx-vertical-rythm-base-size) * 0.5);
+  padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.5);
   display: flex;
   gap: calc(var(--odx-vertical-rythm-base-size) * 0.4167);
 }
@@ -4116,8 +4094,72 @@ body[odxTheme=dark], body.odx-theme-dark {
 .odx-list {
   display: block;
 }
+.odx-list .odx-list .odx-list-item {
+  padding-left: calc(var(--odx-vertical-rythm-base-size) * 1.6667);
+}
+.odx-list .odx-list .odx-list-item:first-child {
+  --separator-color: var(--odx-c-separator);
+}
+.odx-list .odx-list .odx-list .odx-list-item {
+  padding-left: calc(var(--odx-vertical-rythm-base-size) * 3);
+}
+.odx-list .odx-list .odx-list .odx-list-item:first-child {
+  --separator-color: var(--odx-c-separator);
+}
+.odx-list .odx-list .odx-list .odx-list .odx-list-item {
+  padding-left: calc(var(--odx-vertical-rythm-base-size) * 4.3334);
+}
+.odx-list .odx-list .odx-list .odx-list .odx-list-item:first-child {
+  --separator-color: var(--odx-c-separator);
+}
+.odx-list .odx-list .odx-list .odx-list .odx-list .odx-list-item {
+  padding-left: calc(var(--odx-vertical-rythm-base-size) * 5.6667);
+}
+.odx-list .odx-list .odx-list .odx-list .odx-list .odx-list-item:first-child {
+  --separator-color: var(--odx-c-separator);
+}
+.odx-list .odx-list .odx-list .odx-list .odx-list .odx-list .odx-list-item {
+  padding-left: calc(var(--odx-vertical-rythm-base-size) * 7);
+}
+.odx-list .odx-list .odx-list .odx-list .odx-list .odx-list .odx-list-item:first-child {
+  --separator-color: var(--odx-c-separator);
+}
+.odx-list .odx-list .odx-list .odx-list .odx-list .odx-list .odx-list .odx-list-item {
+  padding-left: calc(var(--odx-vertical-rythm-base-size) * 8.3334);
+}
+.odx-list .odx-list .odx-list .odx-list .odx-list .odx-list .odx-list .odx-list-item:first-child {
+  --separator-color: var(--odx-c-separator);
+}
+.odx-list .odx-list .odx-list .odx-list .odx-list .odx-list .odx-list .odx-list .odx-list-item {
+  padding-left: calc(var(--odx-vertical-rythm-base-size) * 9.6667);
+}
+.odx-list .odx-list .odx-list .odx-list .odx-list .odx-list .odx-list .odx-list .odx-list-item:first-child {
+  --separator-color: var(--odx-c-separator);
+}
+.odx-list .odx-list .odx-list .odx-list .odx-list .odx-list .odx-list .odx-list .odx-list .odx-list-item {
+  padding-left: calc(var(--odx-vertical-rythm-base-size) * 11);
+}
+.odx-list .odx-list .odx-list .odx-list .odx-list .odx-list .odx-list .odx-list .odx-list .odx-list-item:first-child {
+  --separator-color: var(--odx-c-separator);
+}
+.odx-list .odx-list .odx-list .odx-list .odx-list .odx-list .odx-list .odx-list .odx-list .odx-list .odx-list-item {
+  padding-left: calc(var(--odx-vertical-rythm-base-size) * 12.3334);
+}
+.odx-list .odx-list .odx-list .odx-list .odx-list .odx-list .odx-list .odx-list .odx-list .odx-list .odx-list-item:first-child {
+  --separator-color: var(--odx-c-separator);
+}
+.odx-list .odx-list .odx-list .odx-list .odx-list .odx-list .odx-list .odx-list .odx-list .odx-list .odx-list .odx-list-item {
+  padding-left: calc(var(--odx-vertical-rythm-base-size) * 13.6667);
+}
+.odx-list .odx-list .odx-list .odx-list .odx-list .odx-list .odx-list .odx-list .odx-list .odx-list .odx-list .odx-list-item:first-child {
+  --separator-color: var(--odx-c-separator);
+}
+.odx-list > .odx-list-item:first-child {
+  --separator-color: transparent;
+}
 
 .odx-list-item {
+  --separator-color: var(--odx-c-separator);
   padding-right: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
   padding-left: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
   padding-top: calc(var(--odx-vertical-rythm-base-size) * 0.5);
@@ -4131,6 +4173,8 @@ body[odxTheme=dark], body.odx-theme-dark {
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
+  outline-offset: calc(-1 * var(--odx-v-outline-width-bold));
+  outline-width: var(--odx-v-outline-width-bold);
   display: flex;
   align-items: center;
   background-color: transparent;
@@ -4145,7 +4189,8 @@ body[odxTheme=dark], body.odx-theme-dark {
   outline-color: transparent;
   pointer-events: none;
 }
-.odx-list-item > [odxListSuffix] {
+.odx-list-item > [odxListSuffix],
+.odx-list-item > [odxListItemSuffix] {
   margin-left: auto;
 }
 .odx-list-item:not(.is-disabled) {
@@ -4154,19 +4199,20 @@ body[odxTheme=dark], body.odx-theme-dark {
 .odx-list-item::before {
   transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
   transition-property: border-color;
-  border-bottom: 1px solid var(--odx-c-separator);
+  border-bottom: 1px solid var(--separator-color);
   content: "";
   display: block;
   position: absolute;
+  right: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
   top: 0;
-  width: calc(100% - calc(var(--odx-vertical-rythm-base-size) * 0.5834));
+  width: calc(100% - calc(var(--odx-vertical-rythm-base-size) * 0.6667));
 }
-.odx-list-item:focus-visible::before, .odx-list-item:first-child::before {
-  border-bottom-color: transparent;
+.odx-list-item:focus-visible {
+  --separator-color: transparent !important;
 }
 @media (hover: hover){
-.odx-list-item:hover::before {
-  border-bottom-color: transparent;
+.odx-list-item:hover {
+  --separator-color: transparent !important;
 }
 }
 @media (hover: hover){
@@ -4174,12 +4220,12 @@ body[odxTheme=dark], body.odx-theme-dark {
   background-color: var(--odx-c-ghost-hover);
 }
 }
-.odx-list-item--danger+.odx-list-item::before, .odx-list-item--selected+.odx-list-item::before {
-  border-color: transparent;
+.odx-list-item--danger+.odx-list-item, .odx-list-item.is-selected+.odx-list-item {
+  --separator-color: transparent !important;
 }
 @media (hover: hover){
-.odx-list-item:hover+.odx-list-item::before {
-  border-color: transparent;
+.odx-list-item:hover+.odx-list-item {
+  --separator-color: transparent !important;
 }
 }
 .odx-list-item.is-disabled {
@@ -4188,14 +4234,10 @@ body[odxTheme=dark], body.odx-theme-dark {
 }
 .odx-list-item--danger {
   --odx-c-focus: var(--odx-c-danger);
-  outline-offset: calc(-1 * var(--odx-v-outline-width-bold));
-  outline-width: var(--odx-v-outline-width-bold);
+  --separator-color: transparent !important;
   background-color: var(--odx-c-danger);
   color: var(--odx-c-danger-text);
 }
-.odx-list-item--danger::before {
-  border-bottom-color: transparent;
-}
 @media (hover: hover){
 .odx-list-item--danger:hover {
   background-color: var(--odx-c-danger-hover);
@@ -4204,26 +4246,24 @@ body[odxTheme=dark], body.odx-theme-dark {
 .odx-list-item--danger.is-disabled {
   color: var(--odx-c-danger-text-disabled);
 }
-.odx-list-item--selected {
+.odx-list-item.is-selected {
+  --separator-color: transparent !important;
   background-color: var(--odx-c-selected);
 }
-.odx-list-item--selected::before {
-  border-bottom-color: transparent;
-}
 @media (hover: hover){
-.odx-list-item--selected:hover {
+.odx-list-item.is-selected:hover {
   background-color: var(--odx-c-selected-hover);
 }
 }
-.odx-list-item--selected.odx-list-item--danger {
+.odx-list-item.is-selected.odx-list-item--danger {
   background-color: var(--odx-c-danger-active);
 }
 @media (hover: hover){
-.odx-list-item--selected.odx-list-item--danger:hover {
+.odx-list-item.is-selected.odx-list-item--danger:hover {
   background-color: var(--red-800);
 }
 }
-.odx-list-item--selected.odx-list-item--danger.is-disabled {
+.odx-list-item.is-selected.odx-list-item--danger.is-disabled {
   color: var(--odx-c-danger-text);
 }
 
@@ -4524,6 +4564,7 @@ body[odxTheme=dark], body.odx-theme-dark {
 .odx-main-menu {
   --odx-area-header-title-color: var(--odx-main-menu-highlight-color);
   --odx-area-header-subtitle-color: var(--odx-c-text-inverse);
+  z-index: var(--odx-v-layer-5);
 }
 .odx-main-menu__inner {
   background-color: var(--odx-main-menu-background-color);
@@ -5964,6 +6005,7 @@ body {
 
 .odx-toast-container {
   --odx-toast-outer-offset: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
+  --odx-toast-border-radius: calc(var(--odx-vertical-rythm-base-size) * 0.25);
   display: flex;
   flex-direction: column;
   margin-top: calc(var(--odx-vertical-rythm-base-size) * 0.1667);
@@ -5993,6 +6035,7 @@ body {
   --odx-c-warning: var(--yellow-50);
   --odx-c-danger: var(--red-00);
   --odx-c-success: var(--green-00);
+  border-radius: var(--odx-toast-border-radius);
   box-shadow: var(--odx-v-box-shadow-layer-1);
   display: block;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odx/ui",
-  "version": "2.10.0",
+  "version": "2.11.0",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "peerDependencies": {

package/scss/3rdparty/ag-grid/theme.scss

@@ -18,7 +18,7 @@
   --ag-checkbox-indeterminate-color: var(--odx-control-color-selected);
   --ag-checkbox-checked-color: var(--odx-control-color-selected);
 
-  --ag-font-family: 'Pangea';
+  --ag-font-family: var(--odx-typography-font-family);
   --ag-font-size: var(--odx-typography-base-size);
 
   --ag-icon-size: #{typography.get-font-size(1)};

package/scss/charts/theme.scss

@@ -46,6 +46,6 @@ body {
   --charts-text-color: var(--odx-c-text);
   --charts-background-color: var(--odx-c-background-content);
 
-  --charts-font-family: 'Pangea';
+  --charts-font-family: var(--odx-typography-font-family);
   --charts-font-size: var(--odx-typography-base-size);
 }

package/scss/components/badge.component.scss

@@ -7,6 +7,10 @@ body {
   --odx-badge-contrast-color: var(--odx-c-background-content);
 }
 
+.odx-badge-overlay {
+  z-index: var(--odx-v-layer-1);
+}
+
 .odx-badge {
   $badge-size: dimensions.get-size(math.div(2, 3));
 
@@ -21,7 +25,6 @@ body {
   min-width: $badge-size;
   outline: 1px solid transparent;
   vertical-align: middle;
-  z-index: var(--odx-v-layer-1);
 
   &,
   &--highlight {

package/scss/components/bar.component.scss

@@ -27,7 +27,7 @@ body {
   align-items: center;
   background-color: var(--odx-bar-background-color);
   border-radius: dimensions.get-size(math.div(6, 24));
-  box-shadow: 0 2px 6px rgb(0 25 66 / 50%);
+  box-shadow: var(--odx-v-box-shadow-layer-1);
   color: var(--odx-bar-text-color);
   display: inline-flex;
   gap: dimensions.get-size(math.div(12, 24));

package/scss/components/button.component.scss

@@ -79,6 +79,7 @@
       }
 
       &#{dropdown.$dropdown-open-selector},
+      &.is-active,
       &:active {
         background-color: var(--odx-c-#{$variant}-active);
       }
@@ -107,6 +108,7 @@
     }
 
     &#{dropdown.$dropdown-open-selector},
+    &.is-active,
     &:focus-visible,
     &:active {
       background-color: var(--odx-c-focus);

package/scss/components/dropdown.component.scss

@@ -6,7 +6,7 @@ $dropdown-open-selector: '.odx-dropdown-host[aria-expanded="true"]';
 .odx-dropdown {
   background-color: var(--odx-c-background-content);
   border-radius: var(--odx-v-border-radius);
-  box-shadow: var(--odx-v-box-shadow-layer-2);
+  box-shadow: var(--odx-v-box-shadow-layer-1);
   display: block;
   min-height: inherit;
 

package/scss/components/expandable-list-item.component.scss

@@ -1,78 +1,55 @@
 @use 'sass:math';
+@use '../abstract/utils';
 @use '../abstract/motion';
 @use '../abstract/dimensions';
 
 .odx-expandable-list-item {
   $root: &;
+  $list-item-selector: '> #{$root}__header .odx-list-item';
 
-  display: block;
-  position: relative;
-
-  &::before {
-    @include motion.transition(border-color);
-
-    border-bottom: 1px solid var(--gray-200);
-    content: '';
+  &__header {
     display: block;
-    left: dimensions.get-size(math.div(1, 3));
-    position: absolute;
-    top: 0;
-    width: calc(100% - #{dimensions.get-size(math.div(14, 24))});
-  }
+    position: relative;
 
-  &:hover,
-  &:focus-visible,
-  &:first-child {
-    &::before {
-      border-bottom-color: transparent;
+    > .odx-list-item {
+      @include dimensions.padding(math.div(52, 24), right);
     }
   }
 
-  &--danger + &::before,
-  &:hover + &::before {
-    border-color: transparent;
-  }
+  &__action {
+    margin: 0;
+    position: absolute;
+    right: dimensions.get-size(math.div(8, 24));
+    top: 50%;
+    transform: translateY(-50%);
 
-  &--danger {
-    &::before {
-      border-bottom-color: transparent;
+    .odx-icon {
+      @include motion.transition(transform);
     }
   }
 
-  &--expanded {
-    &::before {
-      border-bottom-color: transparent;
+  &__slot {
+    .odx-list #{$root}:first-child #{$list-item-selector},
+    .odx-list .odx-list-item:first-child {
+      --separator-color: var(--odx-c-separator);
     }
   }
 
-  &__content {
-    flex: 1;
-  }
-
-  &__expand-icon {
-    @include motion.transition(transform);
-
-    position: relative;
-
-    #{$root}--expanded & {
-      transform: scaleY(-1);
+  &:has(#{$list-item-selector}--danger) {
+    #{$root}__action {
+      .odx-button {
+        color: var(--odx-c-danger-text);
+      }
     }
   }
 
-  &__slot {
-    #{$root}:last-child & {
-      .odx-list-item:last-child::after {
-        border-bottom: 1px solid var(--gray-200);
-        bottom: 0;
-        content: '';
-        display: block;
-        position: absolute;
-        width: calc(100% - #{dimensions.get-size(math.div(14, 24))});
-      }
-    }
+  &:first-child #{$list-item-selector} {
+    --separator-color: transparent;
+  }
 
-    .odx-list-item__content {
-      @include dimensions.padding(math.div(36, 24), left);
+  &--expanded {
+    > #{$root}__header #{$root}__action .odx-button .odx-icon {
+      transform: scaleY(-1);
     }
   }
 }

package/scss/components/inline-message.component.scss

@@ -10,7 +10,8 @@
 
   $variants: default, warning, danger, success;
 
-  @include dimensions.padding(math.div(10, 24));
+  @include dimensions.padding-x(math.div(10, 24));
+  @include dimensions.padding-y(math.div(12, 24));
 
   display: flex;
   gap: dimensions.get-size(math.div(10, 24));

package/scss/components/list-item.component.scss

@@ -7,18 +7,22 @@
 .odx-list-item {
   $root: &;
 
-  @include dimensions.padding-x(math.div(1, 3));
+  --separator-color: var(--odx-c-separator);
+
+  @include dimensions.padding-x(math.div(8, 24));
   @include dimensions.line-height(2, 1);
   @include motion.transition(border-bottom-color background-color outline-color color);
   @include utils.interactive(false);
+  @include utils.with-outline-bold();
   @include utils.vertical-center-content();
 
   background-color: transparent;
   border-radius: var(--odx-v-border-radius-controls);
-  gap: dimensions.get-size(math.div(1, 3));
+  gap: dimensions.get-size(math.div(8, 24));
   position: relative;
 
-  > [odxListSuffix] {
+  > [odxListSuffix],
+  > [odxListItemSuffix] {
     margin-left: auto;
   }
 
@@ -29,30 +33,28 @@
   &::before {
     @include motion.transition(border-color);
 
-    border-bottom: 1px solid var(--odx-c-separator);
+    border-bottom: 1px solid var(--separator-color);
     content: '';
     display: block;
     position: absolute;
+    right: dimensions.get-size(math.div(8, 24));
     top: 0;
-    width: calc(100% - #{dimensions.get-size(math.div(14, 24))});
+    width: calc(100% - #{dimensions.get-size(math.div(16, 24))});
   }
 
   &:hover,
-  &:focus-visible,
-  &:first-child {
-    &::before {
-      border-bottom-color: transparent;
-    }
+  &:focus-visible {
+    --separator-color: transparent !important;
   }
 
   &:hover {
     background-color: var(--odx-c-ghost-hover);
   }
 
-  &--danger + &::before,
-  &--selected + &::before,
-  &:hover + &::before {
-    border-color: transparent;
+  &--danger + &,
+  &.is-selected + &,
+  &:hover + & {
+    --separator-color: transparent !important;
   }
 
   &.is-disabled {
@@ -62,16 +64,11 @@
 
   &--danger {
     --odx-c-focus: var(--odx-c-danger);
-
-    @include utils.with-outline-bold();
+    --separator-color: transparent !important;
 
     background-color: var(--odx-c-danger);
     color: var(--odx-c-danger-text);
 
-    &::before {
-      border-bottom-color: transparent;
-    }
-
     &:hover {
       background-color: var(--odx-c-danger-hover);
     }
@@ -81,12 +78,10 @@
     }
   }
 
-  &--selected {
-    background-color: var(--odx-c-selected);
+  &.is-selected {
+    --separator-color: transparent !important;
 
-    &::before {
-      border-bottom-color: transparent;
-    }
+    background-color: var(--odx-c-selected);
 
     &:hover {
       background-color: var(--odx-c-selected-hover);

package/scss/components/list.component.scss

@@ -1,3 +1,27 @@
+@use 'sass:math';
+@use 'sass:selector';
+@use '../abstract/dimensions';
+
 .odx-list {
   display: block;
+
+  $self: &;
+
+  @for $i from 1 through 10 {
+    #{$self} .odx-list-item {
+      @include dimensions.padding(math.div(8, 24) + ($i * math.div(32, 24)), left);
+
+      &:first-child {
+        --separator-color: var(--odx-c-separator);
+      }
+    }
+
+    $self: #{$self + ' ' + &};
+  }
+
+  > .odx-list-item {
+    &:first-child {
+      --separator-color: transparent;
+    }
+  }
 }

package/scss/components/main-menu.component.scss

@@ -28,6 +28,8 @@ body {
   --odx-area-header-title-color: var(--odx-main-menu-highlight-color);
   --odx-area-header-subtitle-color: var(--odx-c-text-inverse);
 
+  z-index: var(--odx-v-layer-5);
+
   &__inner {
     background-color: var(--odx-main-menu-background-color);
     color: var(--odx-main-menu-text-color);

package/scss/components/toast-item.component.scss

@@ -13,6 +13,7 @@
   $variants: default, warning, danger, success;
   $gap: dimensions.get-size(math.div(12, 24));
 
+  border-radius: var(--odx-toast-border-radius);
   box-shadow: var(--odx-v-box-shadow-layer-1);
   display: block;
 

package/scss/components/toast.component.scss

@@ -5,6 +5,7 @@
 
 .odx-toast-container {
   --odx-toast-outer-offset: #{dimensions.get-size(math.div(8, 24))};
+  --odx-toast-border-radius: #{dimensions.get-size(math.div(6, 24))};
 
   display: flex;
   flex-direction: column;

package/scss/layout/_typography.scss

@@ -4,21 +4,21 @@
 @use '../abstract/typography';
 
 @font-face {
-  font-family: Pangea;
+  font-family: PangeaText;
   font-style: normal;
   font-weight: normal;
   src: url('../assets/fonts/PangeaText-RegularWeb.woff2') format('woff2');
 }
 
 @font-face {
-  font-family: Pangea;
+  font-family: PangeaText;
   font-style: normal;
   font-weight: 500;
   src: url('../assets/fonts/PangeaText-MediumWeb.woff2') format('woff2');
 }
 
 @font-face {
-  font-family: Pangea;
+  font-family: PangeaText;
   font-style: normal;
   font-weight: bold;
   src: url('../assets/fonts/PangeaText-SemiBoldWeb.woff2') format('woff2');
@@ -34,7 +34,7 @@ html body {
   @include typography.font-weight(normal);
 
   color: var(--odx-c-text);
-  font-family: Pangea, sans-serif;
+  font-family: var(--odx-typography-font-family);
 }
 
 .odx-title,

package/scss/variables/_color-palettes-dark.scss

@@ -5,6 +5,7 @@ body {
     --white: #293642;
     --white-dark: #060a12;
     --black: #ffffff;
+    --black-20: #{rgba(#000000, 60%)};
 
     --focus-bg: #284e68;
 

package/scss/variables/_color-palettes.scss

@@ -1,6 +1,7 @@
 body {
   --white: #ffffff;
   --black: #00060f;
+  --black-20: #{rgba(#000000, 20%)};
 
   --white-5: #{rgba(#ffffff, 5%)};
   --white-60: #{rgba(#ffffff, 60%)};

package/scss/variables/_colors.scss

@@ -33,7 +33,7 @@ body {
   --odx-c-backdrop: var(--white-60);
   --odx-c-backdrop-dark: var(--blue-800-30);
 
-  --odx-c-box-shadow: var(--blue-800-30);
+  --odx-c-box-shadow: var(--black-20);
 
   --odx-c-separator: var(--gray-200);
 

package/scss/variables/_typography.scss

@@ -1,6 +1,7 @@
 @use '../abstract/breakpoints';
 
 :root {
+  --odx-typography-font-family: 'PangeaText', 'Arial', sans-serif;
   --odx-typography-base-size: 1.6rem; // clamp(1.4rem, 0.667vw + 1rem, 1.6rem);
   --odx-typography-base-line-height: 1.5;
   --odx-typography-font-weight-normal: normal;