@odx/ui 4.5.1 → 4.5.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @odx/ui
 
+## 4.5.3
+
+### Patch Changes
+
+- 29ba92b: Fix: Select component now correctly emits the selected option value. Header component alignment has been corrected.
+
+## 4.5.2
+
+### Patch Changes
+
+- bead5c6: Leave animations for modals and dropdowns
+
 ## 4.5.1
 
 ### Patch Changes

package/core-theme.css

@@ -2139,9 +2139,6 @@ html body .odx-fs-italic {
   transform: translate(var(--odx-cdk-connected-overlay-position-x, 0), var(--odx-cdk-connected-overlay-position-y, 0));
   transition-behavior: allow-discrete;
 }
-.odx-cdk-connected-overlay.is-hidden {
-  display: none;
-}
 .odx-cdk-connected-overlay__content {
   left: 0 !important;
   max-height: var(--odx-cdk-connected-overlay-max-height-modified, var(--odx-cdk-connected-overlay-max-height, unset));
@@ -2157,6 +2154,9 @@ html body .odx-fs-italic {
 .odx-cdk-connected-overlay:popover-open {
   opacity: 1;
 }
+.odx-cdk-connected-overlay.is-hidden:popover-open {
+  opacity: 0;
+}
 @starting-style {
   .odx-cdk-connected-overlay:popover-open {
     opacity: 0;
@@ -3331,10 +3331,14 @@ html body .odx-fs-italic {
 }
 
 .odx-calendar {
+  --max-calendar-height: 300px;
   display: inline-block;
   flex-direction: column;
   max-height: inherit;
 }
+.odx-calendar:has(.odx-calendar-years) {
+  max-height: var(--max-calendar-height);
+}
 .odx-calendar-header {
   transition-delay: 0ms;
   transition-duration: var(--odx-v-transition-duration);
@@ -4434,20 +4438,22 @@ html body .odx-fs-italic {
   min-height: auto;
 }
 .odx-header__content {
-  display: none;
   margin-inline-end: auto;
+}
+.odx-header__content:has(.odx-header__content-container:not(:empty)) {
   padding-right: calc(var(--odx-vertical-rythm-base-size) * 0.5);
   padding-left: calc(var(--odx-vertical-rythm-base-size) * 0.5);
+}
+.odx-header__content-container {
   overflow: clip;
   text-overflow: ellipsis;
   white-space: nowrap;
+  display: none;
+  overflow: hidden;
 }
 @media (min-width: 768px) {
-  .odx-header__content {
-    padding-right: calc(var(--odx-vertical-rythm-base-size) * 1);
-    padding-left: calc(var(--odx-vertical-rythm-base-size) * 1);
+  .odx-header__content-container {
     display: block;
-    overflow: hidden;
   }
 }
 .odx-header__title {
@@ -5310,6 +5316,15 @@ html body .odx-fs-italic {
 .odx-modal[open]::backdrop, .odx-modal[open]:modal {
   opacity: 1;
 }
+.odx-modal.is-hidden[open]::backdrop, .odx-modal.is-hidden[open]:modal {
+  opacity: 0;
+}
+.odx-modal.is-hidden[open]:modal:not(.odx-modal--sidesheet) {
+  transform: translateY(calc(var(--odx-vertical-rythm-base-size) * 0.3334));
+}
+.odx-modal.is-hidden[open]:modal.odx-modal--sidesheet {
+  transform: translateX(calc(var(--odx-vertical-rythm-base-size) * 2));
+}
 .odx-modal[open]:modal {
   transform: translateY(0);
   transform: translateX(0);

package/package.json

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

package/scss/cdk/connected-overlay.scss

@@ -18,10 +18,6 @@
   transform: translate(var(--odx-cdk-connected-overlay-position-x, 0), var(--odx-cdk-connected-overlay-position-y, 0));
   transition-behavior: allow-discrete;
 
-  &.is-hidden {
-    display: none;
-  }
-
   &__content {
     left: 0 !important;
     max-height: var(--odx-cdk-connected-overlay-max-height-modified, var(--odx-cdk-connected-overlay-max-height, unset));
@@ -40,6 +36,10 @@
     opacity: 1;
   }
 
+  &.is-hidden:popover-open {
+    opacity: 0;
+  }
+
   @starting-style {
     &:popover-open {
       opacity: 0;

package/scss/components/calendar.component.scss

@@ -6,11 +6,16 @@
 
 .odx-calendar {
   $root: &;
+  --max-calendar-height: 300px;
 
   display: inline-block;
   flex-direction: column;
   max-height: inherit;
 
+  &:has(#{$root}-years) {
+    max-height: var(--max-calendar-height);
+  }
+
   &-header {
     @include motion.transition(background-color outline-color color border-radius);
     @include utils.vertical-center-content();

package/scss/components/header.component.scss

@@ -24,17 +24,21 @@
   }
 
   &__content {
-    display: none;
-    margin-inline-end: auto;
+    &:has(&-container:not(:empty)) {
+      @include dimensions.padding-x(0.5);
+    }
 
-    @include dimensions.padding-x(0.5);
-    @include typography.prevent-text-overflow();
+    margin-inline-end: auto;
 
-    @include breakpoints.up(tablet) {
-      @include dimensions.padding-x(1);
+    &-container {
+      @include typography.prevent-text-overflow();
 
-      display: block;
+      display: none;
       overflow: hidden;
+
+      @include breakpoints.up(tablet) {
+        display: block;
+      }
     }
   }
 

package/scss/components/modal.component.scss

@@ -48,6 +48,21 @@ $modal-padding: math.div(12, 24);
     opacity: 1;
   }
 
+  &.is-hidden {
+    &[open]::backdrop,
+    &[open]:modal {
+      opacity: 0;
+    }
+
+    &[open]:modal:not(#{$root}--sidesheet) {
+      transform: translateY(#{dimensions.get-size(math.div(8, 24))});
+    }
+
+    &[open]:modal#{$root}--sidesheet {
+      transform: translateX(#{dimensions.get-size(math.div(8, 4))});
+    }
+  }
+
   &[open]:modal {
     transform: translateY(0);
     transform: translateX(0);