@odx/ui 2.11.0 → 2.11.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 ## 2.9.9
 
+## 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;
 }
@@ -5275,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;
 }
@@ -5285,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;
@@ -5309,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);
@@ -5374,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;
 }
@@ -5422,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);
@@ -5437,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);
@@ -5544,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);
 }
@@ -5619,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));
@@ -5683,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);
@@ -5694,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%;
@@ -5778,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);
@@ -5806,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){
@@ -5850,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;
@@ -5863,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;
@@ -5991,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 {
@@ -6119,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);
@@ -6148,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);
 }
@@ -6205,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;
@@ -6335,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);
@@ -6450,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%;

package/package.json

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