@odx/ui 2.10.1 → 2.11.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 ## 2.9.9
 
+## 2.11.0
+
+### Minor Changes
+
+- 66a521fb: Make list components nestable
+  Redesign expandable list items
+
 ## 2.10.1
 
 ### Patch Changes

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

@@ -284,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;
@@ -530,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");
@@ -559,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,
@@ -2468,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 {
@@ -2484,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 {
@@ -2500,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 {
@@ -2516,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 {
@@ -2532,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 {
@@ -2548,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 {
@@ -2570,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) {
@@ -2752,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);
@@ -2768,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);
@@ -3662,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;
-}
-@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__header > .odx-list-item {
+  padding-right: calc(var(--odx-vertical-rythm-base-size) * 2.1667);
 }
-.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 {
@@ -4016,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);
 }
@@ -4118,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);
@@ -4133,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;
@@ -4147,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) {
@@ -4156,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){
@@ -4176,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 {
@@ -4190,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);
@@ -4206,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);
 }
 
@@ -4526,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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odx/ui",
-  "version": "2.10.1",
+  "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/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/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/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/_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;