@odx/ui 2.11.0 → 2.12.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 ## 2.9.9
 
+## 2.12.0
+
+### Minor Changes
+
+- e5b4916: new design for rich list component
+
+## 2.11.1
+
+### Patch Changes
+
+- 5b4e649: Fix focus state for select component
+- a9e8632: Fix transition mixin to always generate transitions unsing the verbose notation
+
 ## 2.11.0
 
 ### Minor Changes

package/ag-grid-theme.css

@@ -84,8 +84,10 @@
   padding-left: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
   padding-right: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
   vertical-align: middle;
-  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));
 }
@@ -219,8 +221,10 @@
   outline-color: var(--odx-control-outline-color);
   padding: 1px;
   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);
   outline: var(--odx-v-outline-width) solid transparent;
   outline-offset: calc(-1 * var(--odx-v-outline-width));
 }
@@ -239,8 +243,10 @@
   top: 50%;
   transform: translate(-50%, -50%);
   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);
 }
 .ag-theme-odx .ag-checkbox-input-wrapper:has(.ag-checkbox-input:checked, .ag-checkbox-input:indeterminate)::after {
   opacity: 1;

package/core-theme.css

@@ -2031,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;
@@ -2052,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);
@@ -2135,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);
@@ -2148,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;
@@ -2185,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 {
@@ -2349,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);
@@ -2824,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;
@@ -3000,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;
@@ -3161,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);
@@ -3183,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;
@@ -3325,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));
@@ -3383,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;
@@ -3402,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;
 }
@@ -3452,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;
@@ -3469,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;
 }
@@ -3563,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%;
@@ -3681,8 +3713,10 @@ body {
   transform: translateY(-50%);
 }
 .odx-expandable-list-item__action .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-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 {
@@ -3726,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;
@@ -3771,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);
@@ -3804,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: "";
@@ -3906,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;
@@ -4026,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;
@@ -4058,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: "";
@@ -4165,8 +4222,10 @@ body[odxTheme=dark], body.odx-theme-dark {
   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;
@@ -4197,8 +4256,10 @@ body[odxTheme=dark], body.odx-theme-dark {
   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;
+  transition-timing-function: var(--odx-v-transition-easing-fn);
   border-bottom: 1px solid var(--separator-color);
   content: "";
   display: block;
@@ -4291,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;
 }
@@ -4498,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;
@@ -4859,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;
@@ -4903,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);
@@ -4955,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%;
@@ -4985,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));
@@ -5047,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;
@@ -5066,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: "";
@@ -5152,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);
@@ -5169,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);
@@ -5218,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;
 }
@@ -5274,60 +5357,58 @@ body[odxTheme=dark], body.odx-theme-dark {
   display: block;
 }
 
-.odx-rich-list-item {
-  transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
-  transition-property: color;
-  border-bottom: 1px solid var(--odx-input-control-outline-color);
-  display: block;
-}
-.odx-rich-list-item__panel {
-  padding-right: calc(var(--odx-vertical-rythm-base-size) * 0.6667);
-  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-property: background-color, outline-color;
-  outline: var(--odx-v-outline-width) solid transparent;
-  outline-offset: calc(-1 * var(--odx-v-outline-width));
-  cursor: pointer;
+.odx-rich-list-header {
+  align-items: center;
+  -moz-column-gap: calc(var(--odx-vertical-rythm-base-size) * 0.6667);
+       column-gap: calc(var(--odx-vertical-rythm-base-size) * 0.6667);
+  display: flex;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
-  border-radius: var(--odx-v-border-radius-controls);
-  position: relative;
-}
-.odx-rich-list-item__panel:focus-visible {
-  outline-color: var(--odx-c-focus-outline);
 }
-.odx-rich-list-item__panel:disabled, .odx-rich-list-item__panel.is-disabled {
-  outline-color: transparent;
-  pointer-events: none;
+.odx-rich-list-header__title {
+  font-size: calc(var(--odx-typography-base-size) * (1*1/var(--odx-typography-negative-font-scaling-factor)));
+  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.8334);
+  flex: 1;
+  max-height: calc(var(--odx-vertical-rythm-base-size) * 1.5);
+  overflow: hidden;
+  text-align: center;
 }
-@media (hover: hover){
-.odx-rich-list-item__panel:hover {
-  background-color: var(--blue-700-5);
+.odx-rich-list-header__icon {
+  position: relative;
 }
+
+.odx-rich-list-item {
+  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);
+  padding-left: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
+  border-bottom: 1px solid var(--odx-input-control-outline-color);
+  display: block;
 }
-.odx-rich-list-item__icon {
-  transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
-  transition-property: transform;
-  left: calc(var(--odx-vertical-rythm-base-size) * 0.6667);
-  position: absolute;
-  top: calc(var(--odx-vertical-rythm-base-size) * 0.6667);
-  transform: rotate(0deg);
+.odx-rich-list-item.is-disabled .odx-rich-list-header__title,
+.odx-rich-list-item.is-disabled .odx-rich-list-header .odx-avatar {
+  color: var(--odx-c-text-disabled);
 }
-.odx-rich-list-item--expanded .odx-rich-list-item__icon {
-  transform: rotate(90deg);
+.odx-rich-list-item.is-disabled .odx-rich-list-header .odx-avatar {
+  filter: saturate(0);
 }
 .odx-rich-list-item__slot {
+  margin-top: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
   padding-top: calc(var(--odx-vertical-rythm-base-size) * 0.6667);
   padding-right: calc(var(--odx-vertical-rythm-base-size) * 0.6667);
   padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.6667);
   padding-left: calc(var(--odx-vertical-rythm-base-size) * 0.6667);
-  padding-top: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
-  padding-left: calc(var(--odx-vertical-rythm-base-size) * 2.6667);
   overflow: hidden;
 }
+.odx-rich-list-item--empty .odx-rich-list-header__expand-button {
+  display: none;
+}
+.odx-rich-list-item--expanded .odx-rich-list-header__icon {
+  transform: scaleY(-1);
+}
 
 body {
   --odx-select-max-height: 220px;
@@ -5374,8 +5455,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;
 }
@@ -5422,10 +5505,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);
@@ -5437,10 +5521,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);
@@ -5544,8 +5629,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);
 }
@@ -5619,8 +5706,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));
@@ -5683,8 +5772,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);
@@ -5694,8 +5785,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%;
@@ -5778,8 +5871,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);
@@ -5806,8 +5901,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){
@@ -5850,8 +5947,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;
@@ -5863,8 +5962,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;
@@ -5991,8 +6092,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 {
@@ -6119,8 +6222,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);
@@ -6148,8 +6253,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);
 }
@@ -6205,8 +6312,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;
@@ -6335,8 +6444,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);
@@ -6450,8 +6561,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%;

package/package.json

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

package/scss/abstract/_motion.scss

@@ -1,12 +1,14 @@
 @use 'sass:list';
 
-@mixin transition($properties, $duration: var(--odx-v-transition-duration), $delay: 0ms) {
+@mixin transition($properties, $duration: var(--odx-v-transition-duration), $delay: 0ms, $timing-function: var(--odx-v-transition-easing-fn)) {
   $props: ();
 
   @each $prop in $properties {
     $props: list.append($props, $prop, comma);
   }
 
-  transition: all $duration $delay var(--odx-v-transition-easing-fn);
+  transition-delay: $delay;
+  transition-duration: $duration;
   transition-property: $props;
+  transition-timing-function: $timing-function;
 }

package/scss/components/form-field.component.scss

@@ -95,6 +95,7 @@ body {
     @include utils.with-outline();
     @include utils.focus-state(true, true, 'input');
     @include utils.focus-state(true, true, 'textarea');
+    @include utils.focus-state(true, true, '.odx-select');
 
     background-color: var(--odx-input-control-background-color);
     border-radius: var(--odx-v-border-radius-controls);

package/scss/components/rich-list-header.component.scss

@@ -0,0 +1,28 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/motion';
+@use '../abstract/typography';
+@use '../abstract/utils';
+
+.odx-rich-list-header {
+  $root: &;
+
+  align-items: center;
+  column-gap: dimensions.get-size(math.div(16, 24));
+  display: flex;
+  user-select: none;
+
+  &__title {
+    @include typography.font-size(-1);
+    @include dimensions.line-height(math.div(20, 24));
+
+    flex: 1;
+    max-height: dimensions.get-size(math.div(36, 24));
+    overflow: hidden;
+    text-align: center;
+  }
+
+  &__icon {
+    position: relative;
+  }
+}

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

@@ -7,45 +7,38 @@
 .odx-rich-list-item {
   $root: &;
 
-  @include motion.transition(color);
+  @include dimensions.padding(math.div(8, 24));
 
   border-bottom: 1px solid var(--odx-input-control-outline-color);
   display: block;
 
-  &__panel {
-    @include dimensions.padding(math.div(16, 24), right);
-    @include dimensions.padding(math.div(64, 24), left);
-    @include dimensions.padding(math.div(16, 24), top);
-    @include dimensions.padding(math.div(16, 24), bottom);
-    @include motion.transition(background-color outline-color);
-    @include utils.interactive(false);
-
-    border-radius: var(--odx-v-border-radius-controls);
-    position: relative;
-
-    &:hover {
-      background-color: var(--blue-700-5);
+  &.is-disabled {
+    .odx-rich-list-header__title,
+    .odx-rich-list-header .odx-avatar {
+      color: var(--odx-c-text-disabled);
     }
-  }
 
-  &__icon {
-    @include motion.transition(transform);
-
-    left: dimensions.get-size(math.div(16, 24));
-    position: absolute;
-    top: dimensions.get-size(math.div(16, 24));
-    transform: rotate(0deg);
-
-    #{$root}--expanded & {
-      transform: rotate(90deg);
+    .odx-rich-list-header .odx-avatar {
+      filter: saturate(0);
     }
   }
 
   &__slot {
+    @include dimensions.margin(math.div(8, 24), top);
     @include dimensions.padding(math.div(16, 24));
-    @include dimensions.padding(math.div(8, 24), top);
-    @include dimensions.padding(math.div(64, 24), left);
 
     overflow: hidden;
   }
+
+  &--empty {
+    .odx-rich-list-header__expand-button {
+      display: none;
+    }
+  }
+
+  &--expanded {
+    .odx-rich-list-header__icon {
+      transform: scaleY(-1);
+    }
+  }
 }

package/scss/core.scss

@@ -71,6 +71,7 @@ Layout
 @use 'components/rail-navigation.component';
 @use 'components/rail-navigation-item.component';
 @use 'components/rich-list.component.scss';
+@use 'components/rich-list-header.component.scss';
 @use 'components/rich-list-item.component.scss';
 @use 'components/select.component';
 @use 'components/slider.component';