@siemens/element-theme 49.8.0 → 49.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@siemens/element-theme",
-  "version": "49.8.0",
+  "version": "49.10.0",
   "description": "Element CSS theme.",
   "license": "MIT",
   "repository": {

package/src/styles/bootstrap/_dropdowns.scss

@@ -38,6 +38,15 @@
   }
 }
 
+.dropdown-menu-scroller {
+  overflow: auto;
+  // 266px is based on figma and gives 6-8 items. Depending on the number of headings
+  max-block-size: min(
+    100vh,
+    calc((1lh + 2 * #{bootstrap-variables.$dropdown-item-padding-y}) * 8.3125) // = 266px with rfs 16px
+  );
+}
+
 :is(.dropdown-menu, .dropdown-item) {
   .icon + .item-title {
     padding-inline-start: map.get(spacers.$spacers, 4);

package/src/styles/bootstrap/_variables.scss

@@ -331,7 +331,9 @@ $input-padding-x: (map.get(spacers.$spacers, 4) - 1px); // 8px including 1px bor
 $input-font-family: null !default;
 $input-font-size: $font-size-base;
 $input-font-weight: $font-weight-base;
-$input-line-height: $line-height-base;
+// Use an explicit rem value instead of a unitless ratio to prevent cross-browser
+// rounding differences (Safari rounds 14 × 1.1428... to 15px, Chrome to 16px). See #2031
+$input-line-height: typography.$si-line-height-body-rem !default;
 
 $input-bg: semantic-tokens.$element-base-1 !default;
 $input-disabled-bg: semantic-tokens.$element-base-1 !default;
@@ -353,12 +355,10 @@ $input-plaintext-color: $body-color !default;
 
 $input-height-border: $input-border-width * 2 !default;
 
-$input-height: functions.add(
-  $input-line-height * 1em,
-  functions.add($input-padding-y * 2, $input-height-border, false)
-) !default;
+$input-height: functions.add(1lh, ($input-padding-y + $input-border-width) * 2) !default;
 
-$input-height-inner: functions.subtract($input-height, $input-height-border) !default;
+// don't derive from $input-height as it generates a nested calc() expression
+$input-height-inner: functions.add($input-line-height, $input-padding-y * 2) !default;
 // Wrap in parenthesis: `*` binds tighter than `-`, so without them only the border term gets multiplied.
 // DEPRECATED: Calculate it yourself using $input-height-inner
 $input-height-inner-half: calc((#{$input-height-inner}) * 0.5) !default;

package/src/styles/bootstrap/forms/_form-control.scss

@@ -37,7 +37,7 @@
   background-repeat: no-repeat;
   background-size: variables.$form-feedback-icon-size;
   background-position-y: top
-    calc((#{variables.$input-height-inner-half} - (#{variables.$form-feedback-icon-size} * 0.5)));
+    calc((#{variables.$input-height-inner} - #{variables.$form-feedback-icon-size}) * 0.5);
   background-position-x: right
     calc(
       #{map.get(spacers.$spacers, 2) - variables.$input-border-width} +

package/src/styles/bootstrap/mixins/_badge-text.scss

@@ -13,4 +13,5 @@
   padding-inline: map.get(spacers.$spacers, 2);
   font-family: variables.$font-family-sans-serif;
   font-weight: typography.$si-font-weight-semibold;
+  text-align: center;
 }

package/src/styles/variables/_typography.scss

@@ -64,6 +64,7 @@ $si-font-weight-body-lg: $si-font-weight-normal;
 
 $si-font-size-body: px-to-rem(14px);
 $si-line-height-body: px-to-ratio($si-font-size-body, 16px);
+$si-line-height-body-rem: px-to-rem(16px);
 $si-font-weight-body: $si-font-weight-normal;
 
 $si-font-size-caption: px-to-rem(12px);