@odx/ui 2.10.1 → 2.11.1

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,
@@ -2030,8 +2031,10 @@ html body .odx-fs-italic {
   CDK
 */
 .odx-cdk-active-indicator {
-  transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
+  transition-delay: 0ms;
+  transition-duration: var(--odx-v-transition-duration);
   transition-property: all;
+  transition-timing-function: var(--odx-v-transition-easing-fn);
   opacity: 0;
   pointer-events: none;
   position: absolute;
@@ -2051,8 +2054,10 @@ html body .odx-fs-italic {
 }
 
 .odx-cdk-connected-overlay {
-  transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
+  transition-delay: 0ms;
+  transition-duration: var(--odx-v-transition-duration);
   transition-property: opacity, visibility;
+  transition-timing-function: var(--odx-v-transition-easing-fn);
   display: block;
   position: fixed;
   z-index: var(--odx-v-layer-4);
@@ -2134,8 +2139,10 @@ html body .odx-fs-italic {
 }
 
 .odx-accordion-item {
-  transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
+  transition-delay: 0ms;
+  transition-duration: var(--odx-v-transition-duration);
   transition-property: color;
+  transition-timing-function: var(--odx-v-transition-easing-fn);
   padding-top: calc(var(--odx-vertical-rythm-base-size) * 0.25);
   padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.2084);
   border-bottom: 1px solid var(--odx-input-control-outline-color);
@@ -2147,8 +2154,10 @@ html body .odx-fs-italic {
   padding-top: calc(var(--odx-vertical-rythm-base-size) * 0.25);
   padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.25);
   line-height: calc(var(--odx-vertical-rythm-base-size) * 1);
-  transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
+  transition-delay: 0ms;
+  transition-duration: var(--odx-v-transition-duration);
   transition-property: background-color, outline-color;
+  transition-timing-function: var(--odx-v-transition-easing-fn);
   outline: var(--odx-v-outline-width) solid transparent;
   outline-offset: calc(-1 * var(--odx-v-outline-width));
   cursor: pointer;
@@ -2184,8 +2193,10 @@ html body .odx-fs-italic {
   letter-spacing: var(--odx-typography-font-weight-medium-letter-spacing);
 }
 .odx-accordion-item__icon {
-  transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
+  transition-delay: 0ms;
+  transition-duration: var(--odx-v-transition-duration);
   transition-property: transform;
+  transition-timing-function: var(--odx-v-transition-easing-fn);
   transform: rotate(0deg);
 }
 .odx-accordion-item--expanded .odx-accordion-item__icon {
@@ -2348,8 +2359,10 @@ html body .odx-fs-italic {
   height: calc(var(--odx-vertical-rythm-base-size) * 1.5);
   padding-right: calc(var(--odx-vertical-rythm-base-size) * 0.5);
   padding-left: calc(var(--odx-vertical-rythm-base-size) * 0.5);
-  transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
+  transition-delay: 0ms;
+  transition-duration: var(--odx-v-transition-duration);
   transition-property: background-color, color, outline;
+  transition-timing-function: var(--odx-v-transition-easing-fn);
   font-size: calc(var(--odx-typography-base-size) * 1);
   font-weight: var(--odx-typography-font-weight-medium);
   letter-spacing: var(--odx-typography-font-weight-medium-letter-spacing);
@@ -2468,7 +2481,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 +2497,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 +2513,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 +2529,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 +2545,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 +2561,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 +2583,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 +2765,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 +2785,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);
@@ -2820,8 +2836,10 @@ body[odxTheme=dark], body.odx-theme-dark {
   width: max-content;
 }
 .odx-bar-button {
-  transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
+  transition-delay: 0ms;
+  transition-duration: var(--odx-v-transition-duration);
   transition-property: background-color, color, outline;
+  transition-timing-function: var(--odx-v-transition-easing-fn);
   outline-offset: calc(-1 * var(--odx-v-outline-width-bold));
   outline-width: var(--odx-v-outline-width-bold);
   align-items: center;
@@ -2996,8 +3014,10 @@ body {
 }
 
 .odx-card {
-  transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
+  transition-delay: 0ms;
+  transition-duration: var(--odx-v-transition-duration);
   transition-property: box-shadow, outline-color, color;
+  transition-timing-function: var(--odx-v-transition-easing-fn);
   outline: var(--odx-v-outline-width) solid transparent;
   outline-offset: calc(-1 * var(--odx-v-outline-width));
   cursor: pointer;
@@ -3157,8 +3177,10 @@ body {
   max-height: inherit;
 }
 .odx-calendar-header {
-  transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
+  transition-delay: 0ms;
+  transition-duration: var(--odx-v-transition-duration);
   transition-property: background-color, outline-color, color, border-radius;
+  transition-timing-function: var(--odx-v-transition-easing-fn);
   display: flex;
   align-items: center;
   font-weight: var(--odx-typography-font-weight-normal);
@@ -3179,8 +3201,10 @@ body {
   margin-bottom: calc(var(--odx-vertical-rythm-base-size) * 0);
   height: calc(var(--odx-vertical-rythm-base-size) * 1.5);
   width: calc(var(--odx-vertical-rythm-base-size) * 1.5);
-  transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
+  transition-delay: 0ms;
+  transition-duration: var(--odx-v-transition-duration);
   transition-property: background-color, outline-color, color, border-radius;
+  transition-timing-function: var(--odx-v-transition-easing-fn);
   outline: var(--odx-v-outline-width) solid transparent;
   outline-offset: calc(-1 * var(--odx-v-outline-width));
   cursor: pointer;
@@ -3321,8 +3345,10 @@ body {
   padding-top: calc(var(--odx-vertical-rythm-base-size) * 0);
   padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0);
   line-height: calc(var(--odx-vertical-rythm-base-size) * 1);
-  transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
+  transition-delay: 0ms;
+  transition-duration: var(--odx-v-transition-duration);
   transition-property: background-color, color, outline-color;
+  transition-timing-function: var(--odx-v-transition-easing-fn);
   font-size: calc(var(--odx-typography-base-size) * 1);
   outline: var(--odx-v-outline-width) solid transparent;
   outline-offset: calc(-1 * var(--odx-v-outline-width));
@@ -3379,8 +3405,10 @@ body {
   margin-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.0834);
   height: calc(var(--odx-vertical-rythm-base-size) * 0.8334);
   width: calc(var(--odx-vertical-rythm-base-size) * 0.8334);
-  transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
+  transition-delay: 0ms;
+  transition-duration: var(--odx-v-transition-duration);
   transition-property: background-color, color, outline-color;
+  transition-timing-function: var(--odx-v-transition-easing-fn);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -3398,8 +3426,10 @@ body {
   margin-bottom: calc(var(--odx-vertical-rythm-base-size) * 0);
   height: calc(var(--odx-vertical-rythm-base-size) * 0.75);
   width: calc(var(--odx-vertical-rythm-base-size) * 0.75);
-  transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
+  transition-delay: 0ms;
+  transition-duration: var(--odx-v-transition-duration);
   transition-property: opacity;
+  transition-timing-function: var(--odx-v-transition-easing-fn);
   font-size: calc(var(--odx-vertical-rythm-base-size) * 0.75);
   opacity: 0;
 }
@@ -3448,8 +3478,10 @@ body {
 .odx-chip {
   font-weight: var(--odx-typography-font-weight-medium);
   letter-spacing: var(--odx-typography-font-weight-medium-letter-spacing);
-  transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
+  transition-delay: 0ms;
+  transition-duration: var(--odx-v-transition-duration);
   transition-property: background-color, color;
+  transition-timing-function: var(--odx-v-transition-easing-fn);
   display: inline-flex;
   gap: calc(var(--odx-vertical-rythm-base-size) * 0.1667);
   -webkit-user-select: none;
@@ -3465,8 +3497,10 @@ body {
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
+  transition-delay: 0ms;
+  transition-duration: var(--odx-v-transition-duration);
   transition-property: background-color, color, outline;
+  transition-timing-function: var(--odx-v-transition-easing-fn);
   border-radius: 50%;
   margin: 0;
 }
@@ -3559,8 +3593,10 @@ body {
   stroke: var(--gray-100);
 }
 .odx-circular-progress__indicator {
-  transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
+  transition-delay: 0ms;
+  transition-duration: var(--odx-v-transition-duration);
   transition-property: stroke-dashoffset;
+  transition-timing-function: var(--odx-v-transition-easing-fn);
   stroke: var(--odx-c-highlight);
   transform: rotate(-90deg);
   transform-origin: 50% 50%;
@@ -3662,65 +3698,39 @@ 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__header > .odx-list-item {
+  padding-right: calc(var(--odx-vertical-rythm-base-size) * 2.1667);
 }
+.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--danger::before {
-  border-bottom-color: transparent;
+.odx-expandable-list-item__action .odx-icon {
+  transition-delay: 0ms;
+  transition-duration: var(--odx-v-transition-duration);
+  transition-property: transform;
+  transition-timing-function: var(--odx-v-transition-easing-fn);
 }
-.odx-expandable-list-item--expanded::before {
-  border-bottom-color: transparent;
+.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__content {
-  flex: 1;
+.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__expand-icon {
-  transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
-  transition-property: transform;
-  position: relative;
+.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__expand-icon {
+.odx-expandable-list-item--expanded > .odx-expandable-list-item__header .odx-expandable-list-item__action .odx-button .odx-icon {
   transform: scaleY(-1);
 }
-.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__slot .odx-list-item__content {
-  padding-left: calc(var(--odx-vertical-rythm-base-size) * 1.5);
-}
 
 body {
   --odx-form-field-hint-color: var(--gray-500);
@@ -3750,8 +3760,10 @@ body {
   margin-top: calc(var(--odx-vertical-rythm-base-size) * 0);
   margin-bottom: calc(var(--odx-vertical-rythm-base-size) * 0);
   height: calc(var(--odx-vertical-rythm-base-size) * 1.5);
-  transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
+  transition-delay: 0ms;
+  transition-duration: var(--odx-v-transition-duration);
   transition-property: color;
+  transition-timing-function: var(--odx-v-transition-easing-fn);
   display: inline-flex;
   align-items: center;
   flex: 0 0 auto;
@@ -3795,8 +3807,10 @@ body {
   margin-top: calc(var(--odx-vertical-rythm-base-size) * 0);
   margin-bottom: calc(var(--odx-vertical-rythm-base-size) * 0);
   min-height: calc(var(--odx-vertical-rythm-base-size) * 1.5);
-  transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
+  transition-delay: 0ms;
+  transition-duration: var(--odx-v-transition-duration);
   transition-property: background-color, color, outline-color;
+  transition-timing-function: var(--odx-v-transition-easing-fn);
   outline: var(--odx-v-outline-width) solid transparent;
   outline-offset: calc(-1 * var(--odx-v-outline-width));
   background-color: var(--odx-input-control-background-color);
@@ -3828,9 +3842,22 @@ body {
   background-color: var(--odx-c-focus);
 }
 }
+.odx-form-field__control:focus-within:has(.odx-select:focus-visible) {
+  outline-color: var(--odx-c-focus-outline);
+}
+.odx-form-field__control:focus-within:has(.odx-select:focus-visible) {
+  background-color: var(--odx-c-focus);
+}
+@media (hover: hover){
+.odx-form-field__control:focus-within:has(.odx-select:focus-visible):hover {
+  background-color: var(--odx-c-focus);
+}
+}
 .odx-form-field__control::after {
-  transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
+  transition-delay: 0ms;
+  transition-duration: var(--odx-v-transition-duration);
   transition-property: background-color;
+  transition-timing-function: var(--odx-v-transition-easing-fn);
   background-color: transparent;
   bottom: 0;
   content: "";
@@ -3930,8 +3957,10 @@ body {
   padding-top: calc(var(--odx-vertical-rythm-base-size) * 0);
   padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0);
   line-height: calc(var(--odx-vertical-rythm-base-size) * 0.6667);
-  transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
+  transition-delay: 0ms;
+  transition-duration: var(--odx-v-transition-duration);
   transition-property: opacity;
+  transition-timing-function: var(--odx-v-transition-easing-fn);
   font-size: calc(var(--odx-typography-base-size) * (1*1/var(--odx-typography-negative-font-scaling-factor)*1/var(--odx-typography-negative-font-scaling-factor)));
   color: var(--odx-form-field-hint-color);
   text-align: right;
@@ -4016,10 +4045,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);
 }
@@ -4050,8 +4079,10 @@ body[odxTheme=dark], body.odx-theme-dark {
 }
 
 .odx-link {
-  transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
+  transition-delay: 0ms;
+  transition-duration: var(--odx-v-transition-duration);
   transition-property: color, background-color, outline;
+  transition-timing-function: var(--odx-v-transition-easing-fn);
   outline: var(--odx-v-outline-width) solid transparent;
   outline-offset: calc(-1 * var(--odx-v-outline-width));
   cursor: pointer;
@@ -4082,8 +4113,10 @@ body[odxTheme=dark], body.odx-theme-dark {
   pointer-events: none;
 }
 .odx-link::before {
-  transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
+  transition-delay: 0ms;
+  transition-duration: var(--odx-v-transition-duration);
   transition-property: width;
+  transition-timing-function: var(--odx-v-transition-easing-fn);
   background-color: currentcolor;
   bottom: 1px;
   content: "";
@@ -4118,21 +4151,89 @@ 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);
   padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.5);
   line-height: calc(var(--odx-vertical-rythm-base-size) * 1);
-  transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
+  transition-delay: 0ms;
+  transition-duration: var(--odx-v-transition-duration);
   transition-property: border-bottom-color, background-color, outline-color, color;
+  transition-timing-function: var(--odx-v-transition-easing-fn);
   outline: var(--odx-v-outline-width) solid transparent;
   outline-offset: calc(-1 * var(--odx-v-outline-width));
   cursor: pointer;
   -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,28 +4248,32 @@ 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) {
   cursor: pointer;
 }
 .odx-list-item::before {
-  transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
+  transition-delay: 0ms;
+  transition-duration: var(--odx-v-transition-duration);
   transition-property: border-color;
-  border-bottom: 1px solid var(--odx-c-separator);
+  transition-timing-function: var(--odx-v-transition-easing-fn);
+  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 +4281,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 +4295,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 +4307,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);
 }
 
@@ -4253,8 +4352,10 @@ body[odxTheme=dark] .odx-button, body.odx-theme-dark .odx-button {
   z-index: var(--odx-v-layer-2);
 }
 .odx-loading-spinner__backdrop {
-  transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
+  transition-delay: 0ms;
+  transition-duration: var(--odx-v-transition-duration);
   transition-property: background-color;
+  transition-timing-function: var(--odx-v-transition-easing-fn);
   background-color: transparent;
   opacity: 0.8;
 }
@@ -4460,8 +4561,10 @@ body[odxTheme=dark], body.odx-theme-dark {
   height: calc(var(--odx-vertical-rythm-base-size) * 2.3334);
   padding-right: calc(var(--odx-vertical-rythm-base-size) * 0.6667);
   padding-left: calc(var(--odx-vertical-rythm-base-size) * 0.6667);
-  transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
+  transition-delay: 0ms;
+  transition-duration: var(--odx-v-transition-duration);
   transition-property: color, background-color, outline;
+  transition-timing-function: var(--odx-v-transition-easing-fn);
   outline: var(--odx-v-outline-width) solid transparent;
   outline-offset: calc(-1 * var(--odx-v-outline-width));
   cursor: pointer;
@@ -4526,6 +4629,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);
@@ -4820,8 +4924,10 @@ body[odxTheme=dark], body.odx-theme-dark {
   border-radius: var(--odx-v-border-radius-controls);
   height: calc(var(--odx-vertical-rythm-base-size) * 1.5);
   width: calc(var(--odx-vertical-rythm-base-size) * 1.5);
-  transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
+  transition-delay: 0ms;
+  transition-duration: var(--odx-v-transition-duration);
   transition-property: background-color, outline;
+  transition-timing-function: var(--odx-v-transition-easing-fn);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -4864,8 +4970,10 @@ body[odxTheme=dark], body.odx-theme-dark {
   margin-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.1667);
   padding-right: calc(var(--odx-vertical-rythm-base-size) * 0.5);
   padding-left: calc(var(--odx-vertical-rythm-base-size) * 0.5);
-  transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
+  transition-delay: 0ms;
+  transition-duration: var(--odx-v-transition-duration);
   transition-property: background-color, color, outline-color;
+  transition-timing-function: var(--odx-v-transition-easing-fn);
   font-weight: var(--odx-typography-font-weight-normal);
   letter-spacing: var(--odx-typography-font-weight-normal-letter-spacing);
   border-radius: var(--odx-v-border-radius-controls);
@@ -4916,8 +5024,10 @@ body[odxTheme=dark], body.odx-theme-dark {
   position: relative;
 }
 .odx-progress__indicator {
-  transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
+  transition-delay: 0ms;
+  transition-duration: var(--odx-v-transition-duration);
   transition-property: transform;
+  transition-timing-function: var(--odx-v-transition-easing-fn);
   background-color: var(--odx-c-highlight);
   display: block;
   height: 100%;
@@ -4946,8 +5056,10 @@ body[odxTheme=dark], body.odx-theme-dark {
   padding-top: calc(var(--odx-vertical-rythm-base-size) * 0);
   padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0);
   line-height: calc(var(--odx-vertical-rythm-base-size) * 1);
-  transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
+  transition-delay: 0ms;
+  transition-duration: var(--odx-v-transition-duration);
   transition-property: background-color, color, outline;
+  transition-timing-function: var(--odx-v-transition-easing-fn);
   font-size: calc(var(--odx-typography-base-size) * 1);
   outline: var(--odx-v-outline-width) solid transparent;
   outline-offset: calc(-1 * var(--odx-v-outline-width));
@@ -5008,8 +5120,10 @@ body[odxTheme=dark], body.odx-theme-dark {
   margin-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.0834);
   height: calc(var(--odx-vertical-rythm-base-size) * 0.8334);
   width: calc(var(--odx-vertical-rythm-base-size) * 0.8334);
-  transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
+  transition-delay: 0ms;
+  transition-duration: var(--odx-v-transition-duration);
   transition-property: background-color, color, outline-color;
+  transition-timing-function: var(--odx-v-transition-easing-fn);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -5027,8 +5141,10 @@ body[odxTheme=dark], body.odx-theme-dark {
   margin-bottom: calc(var(--odx-vertical-rythm-base-size) * 0);
   height: calc(var(--odx-vertical-rythm-base-size) * 0.1667);
   width: calc(var(--odx-vertical-rythm-base-size) * 0.1667);
-  transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
+  transition-delay: 0ms;
+  transition-duration: var(--odx-v-transition-duration);
   transition-property: transform;
+  transition-timing-function: var(--odx-v-transition-easing-fn);
   background-color: currentcolor;
   border-radius: 50%;
   content: "";
@@ -5113,8 +5229,10 @@ body[odxTheme=dark], body.odx-theme-dark {
   width: 100%;
 }
 .odx-rail-navigation__expand > .odx-icon {
-  transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
+  transition-delay: 0ms;
+  transition-duration: var(--odx-v-transition-duration);
   transition-property: transform;
+  transition-timing-function: var(--odx-v-transition-easing-fn);
 }
 .odx-rail-navigation.is-open .odx-rail-navigation__expand > .odx-icon {
   transform: rotateY(180deg);
@@ -5130,8 +5248,10 @@ body[odxTheme=dark], body.odx-theme-dark {
 }
 
 .odx-rail-navigation-item {
-  transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
+  transition-delay: 0ms;
+  transition-duration: var(--odx-v-transition-duration);
   transition-property: outline-color, background-color, color;
+  transition-timing-function: var(--odx-v-transition-easing-fn);
   padding-top: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
   padding-right: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
   padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
@@ -5179,8 +5299,10 @@ body[odxTheme=dark], body.odx-theme-dark {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
+  transition-delay: 0ms;
+  transition-duration: var(--odx-v-transition-duration);
   transition-property: width, padding-left, opacity;
+  transition-timing-function: var(--odx-v-transition-easing-fn);
   opacity: 0;
   width: 0;
 }
@@ -5236,8 +5358,10 @@ body[odxTheme=dark], body.odx-theme-dark {
 }
 
 .odx-rich-list-item {
-  transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
+  transition-delay: 0ms;
+  transition-duration: var(--odx-v-transition-duration);
   transition-property: color;
+  transition-timing-function: var(--odx-v-transition-easing-fn);
   border-bottom: 1px solid var(--odx-input-control-outline-color);
   display: block;
 }
@@ -5246,8 +5370,10 @@ body[odxTheme=dark], body.odx-theme-dark {
   padding-left: calc(var(--odx-vertical-rythm-base-size) * 2.6667);
   padding-top: calc(var(--odx-vertical-rythm-base-size) * 0.6667);
   padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.6667);
-  transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
+  transition-delay: 0ms;
+  transition-duration: var(--odx-v-transition-duration);
   transition-property: background-color, outline-color;
+  transition-timing-function: var(--odx-v-transition-easing-fn);
   outline: var(--odx-v-outline-width) solid transparent;
   outline-offset: calc(-1 * var(--odx-v-outline-width));
   cursor: pointer;
@@ -5270,8 +5396,10 @@ body[odxTheme=dark], body.odx-theme-dark {
 }
 }
 .odx-rich-list-item__icon {
-  transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
+  transition-delay: 0ms;
+  transition-duration: var(--odx-v-transition-duration);
   transition-property: transform;
+  transition-timing-function: var(--odx-v-transition-easing-fn);
   left: calc(var(--odx-vertical-rythm-base-size) * 0.6667);
   position: absolute;
   top: calc(var(--odx-vertical-rythm-base-size) * 0.6667);
@@ -5335,8 +5463,10 @@ body {
   width: 100%;
 }
 .odx-select__indicator {
-  transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
+  transition-delay: 0ms;
+  transition-duration: var(--odx-v-transition-duration);
   transition-property: transform, opacity;
+  transition-timing-function: var(--odx-v-transition-easing-fn);
   margin-right: calc(var(--odx-vertical-rythm-base-size) * -0.0833);
   margin-left: auto;
 }
@@ -5383,10 +5513,11 @@ body {
   background: var(--odx-control-background-color-selected);
 }
 .odx-slider::-webkit-slider-thumb {
-  -webkit-transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
-  transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
+  transition-delay: 0ms;
+  transition-duration: var(--odx-v-transition-duration);
   -webkit-transition-property: background-color, outline-color;
   transition-property: background-color, outline-color;
+  transition-timing-function: var(--odx-v-transition-easing-fn);
   -webkit-appearance: none;
           appearance: none;
   background-color: var(--odx-control-background-color-selected);
@@ -5398,10 +5529,11 @@ body {
   position: relative;
 }
 .odx-slider::-moz-range-thumb {
-  -moz-transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
-  transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
+  transition-delay: 0ms;
+  transition-duration: var(--odx-v-transition-duration);
   -moz-transition-property: background-color, outline-color;
   transition-property: background-color, outline-color;
+  transition-timing-function: var(--odx-v-transition-easing-fn);
   -moz-appearance: none;
        appearance: none;
   background-color: var(--odx-control-background-color-selected);
@@ -5505,8 +5637,10 @@ body {
           appearance: none;
 }
 .odx-spinbox__input, .odx-spinbox__action {
-  transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
+  transition-delay: 0ms;
+  transition-duration: var(--odx-v-transition-duration);
   transition-property: background-color, border-color, color;
+  transition-timing-function: var(--odx-v-transition-easing-fn);
   background-color: var(--odx-input-control-background-color);
   border: 1px solid var(--odx-input-control-outline-color);
 }
@@ -5580,8 +5714,10 @@ body {
   padding-top: calc(var(--odx-vertical-rythm-base-size) * 0);
   padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0);
   line-height: calc(var(--odx-vertical-rythm-base-size) * 1);
-  transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
+  transition-delay: 0ms;
+  transition-duration: var(--odx-v-transition-duration);
   transition-property: background-color, color, outline-color;
+  transition-timing-function: var(--odx-v-transition-easing-fn);
   font-size: calc(var(--odx-typography-base-size) * 1);
   outline: var(--odx-v-outline-width) solid transparent;
   outline-offset: calc(-1 * var(--odx-v-outline-width));
@@ -5644,8 +5780,10 @@ body {
   outline-color: var(--odx-c-focus);
 }
 .odx-switch__indicator {
-  transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
+  transition-delay: 0ms;
+  transition-duration: var(--odx-v-transition-duration);
   transition-property: background-color, color, outline-color;
+  transition-timing-function: var(--odx-v-transition-easing-fn);
   background-color: var(--odx-control-background-color);
   border: 1px solid var(--odx-control-outline-color);
   border-radius: calc(calc(var(--odx-vertical-rythm-base-size) * 0.1667) / 2);
@@ -5655,8 +5793,10 @@ body {
   width: calc(var(--odx-vertical-rythm-base-size) * 1.5);
 }
 .odx-switch__indicator::before {
-  transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
+  transition-delay: 0ms;
+  transition-duration: var(--odx-v-transition-duration);
   transition-property: background-color, transform, border-color, outline-color;
+  transition-timing-function: var(--odx-v-transition-easing-fn);
   background-color: var(--odx-control-background-color);
   border: 1px solid var(--odx-control-outline-color);
   border-radius: 50%;
@@ -5739,8 +5879,10 @@ body {
   align-items: center;
   outline: var(--odx-v-outline-width) solid transparent;
   outline-offset: calc(-1 * var(--odx-v-outline-width));
-  transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
+  transition-delay: 0ms;
+  transition-duration: var(--odx-v-transition-duration);
   transition-property: background-color, outline-color;
+  transition-timing-function: var(--odx-v-transition-easing-fn);
   align-items: center;
   background-color: transparent;
   border-radius: var(--odx-v-border-radius-controls);
@@ -5767,8 +5909,10 @@ body {
   margin-left: 0;
 }
 .odx-tab-bar-item .odx-icon:last-child:not(:first-child) {
-  transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
+  transition-delay: 0ms;
+  transition-duration: var(--odx-v-transition-duration);
   transition-property: color;
+  transition-timing-function: var(--odx-v-transition-easing-fn);
   margin-right: 0;
 }
 @media (hover: hover){
@@ -5811,8 +5955,10 @@ body {
           mask-image: linear-gradient(to right, transparent calc(var(--odx-vertical-rythm-base-size) * 1), #000000 calc(var(--odx-vertical-rythm-base-size) * 3), #000000 calc(100% - var(--odx-vertical-rythm-base-size) * 3), transparent calc(100% - var(--odx-vertical-rythm-base-size) * 1));
 }
 .odx-tab-bar__panel {
-  transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
+  transition-delay: 0ms;
+  transition-duration: var(--odx-v-transition-duration);
   transition-property: transform;
+  transition-timing-function: var(--odx-v-transition-easing-fn);
   padding-right: calc(var(--odx-vertical-rythm-base-size) * 0.5);
   padding-left: calc(var(--odx-vertical-rythm-base-size) * 0.5);
   display: flex;
@@ -5824,8 +5970,10 @@ body {
   margin-top: calc(var(--odx-vertical-rythm-base-size) * 0);
   margin-bottom: calc(var(--odx-vertical-rythm-base-size) * 0);
   height: calc(var(--odx-vertical-rythm-base-size) * 2);
-  transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
+  transition-delay: 0ms;
+  transition-duration: var(--odx-v-transition-duration);
   transition-property: opacity, width, padding;
+  transition-timing-function: var(--odx-v-transition-easing-fn);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -5952,8 +6100,10 @@ body {
   /* stylelint-disable-next-line no-descending-specificity */
 }
 .odx-table__body .odx-table__row {
-  transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
+  transition-delay: 0ms;
+  transition-duration: var(--odx-v-transition-duration);
   transition-property: background-color;
+  transition-timing-function: var(--odx-v-transition-easing-fn);
 }
 @media (hover: hover){
 .odx-table__body .odx-table__row:hover {
@@ -6080,8 +6230,10 @@ body {
   padding-top: calc(var(--odx-vertical-rythm-base-size) * 0.25);
   padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.25);
   line-height: calc(var(--odx-vertical-rythm-base-size) * 1);
-  transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
+  transition-delay: 0ms;
+  transition-duration: var(--odx-v-transition-duration);
   transition-property: color;
+  transition-timing-function: var(--odx-v-transition-easing-fn);
   font-size: calc(var(--odx-typography-base-size) * 1);
   font-weight: var(--odx-typography-font-weight-medium);
   letter-spacing: var(--odx-typography-font-weight-medium-letter-spacing);
@@ -6109,8 +6261,10 @@ body {
 }
 .odx-toggle-button__indicator {
   border-radius: var(--odx-toggle-button-border-radius);
-  transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
+  transition-delay: 0ms;
+  transition-duration: var(--odx-v-transition-duration);
   transition-property: background-color, outline-color;
+  transition-timing-function: var(--odx-v-transition-easing-fn);
   padding-right: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
   padding-left: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
 }
@@ -6166,8 +6320,10 @@ body {
   height: calc(var(--odx-vertical-rythm-base-size) * 1.5);
   padding-right: calc(var(--odx-vertical-rythm-base-size) * 0.25);
   padding-left: calc(var(--odx-vertical-rythm-base-size) * 0.25);
-  transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
+  transition-delay: 0ms;
+  transition-duration: var(--odx-v-transition-duration);
   transition-property: background-color, outline-color;
+  transition-timing-function: var(--odx-v-transition-easing-fn);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -6296,8 +6452,10 @@ body {
   white-space: nowrap;
   outline: var(--odx-v-outline-width) solid transparent;
   outline-offset: calc(-1 * var(--odx-v-outline-width));
-  transition: all outline-color 0ms var(--odx-v-transition-easing-fn);
+  transition-delay: 0ms;
+  transition-duration: outline-color;
   transition-property: background-color;
+  transition-timing-function: var(--odx-v-transition-easing-fn);
   align-self: center;
   border-radius: var(--odx-v-border-radius-controls);
   color: var(--odx-c-secondary-disabled);
@@ -6411,8 +6569,10 @@ body {
   height: 100%;
 }
 .odx-wizard-step__circle {
-  transition: all color 0ms var(--odx-v-transition-easing-fn);
+  transition-delay: 0ms;
+  transition-duration: color;
   transition-property: background-color;
+  transition-timing-function: var(--odx-v-transition-easing-fn);
   align-items: center;
   border: calc(var(--odx-vertical-rythm-base-size) * 0.0834) solid var(--odx-c-secondary-disabled);
   border-radius: 50%;