@siemens/element-theme 49.7.0 → 49.8.0

package/package.json

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

package/src/styles/bootstrap/_variables.scss

@@ -358,7 +358,7 @@ $input-height: functions.add(
   functions.add($input-padding-y * 2, $input-height-border, false)
 ) !default;
 
-$input-height-inner: functions.subtract($input-height, $input-height-border, false) !default;
+$input-height-inner: functions.subtract($input-height, $input-height-border) !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;
@@ -389,7 +389,7 @@ $form-feedback-invalid-color: semantic-tokens.$element-text-danger !default;
 $form-feedback-icon-valid: semantic-tokens.$element-feedback-icon-valid;
 $form-feedback-icon-invalid: semantic-tokens.$element-feedback-icon-invalid;
 $form-feedback-icon-warning: semantic-tokens.$element-feedback-icon-warning;
-
+$form-feedback-icon-size: 1.25rem;
 $form-validation-states: (
   'valid': (
     'color': null,

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

@@ -2,6 +2,7 @@
 @use '../../variables/semantic-tokens';
 @use '../../variables/spacers';
 @use '../../variables/utilities';
+@use '../../variables/si-vars';
 @use '../variables';
 
 @use 'sass:map';
@@ -9,9 +10,13 @@
 :is(.form-control, .form-select) {
   --border-color: #{semantic-tokens.$element-ui-2};
   --si-textarea-mask: #{semantic-tokens.$element-base-1};
+  // Formula:
+  // (1.25rem / 0px) (feedback icon size)
+  // + (action-size / 0px) (action-offset includes a padding)
+  // + 3px (min padding between input and first action or validation icon)
   --si-input-padding-inline-end: calc(
-    var(--si-feedback-icon-offset, 0px) + var(--si-action-icon-offset, 0px) +
-      #{variables.$input-padding-x}
+    var(--si-feedback-icon-size, 0px) + var(--si-action-icon-offset, 0px) +
+      #{map.get(spacers.$spacers, 2) - variables.$input-border-width}
   );
   display: block;
   inline-size: 100%;
@@ -30,11 +35,20 @@
   appearance: none; // Fix appearance for date inputs in Safari
   background-image: var(--si-feedback-icon, none);
   background-repeat: no-repeat;
-  background-size: 1.25rem;
-  background-position: top 5px right calc(6px + var(--si-action-icon-offset, 0px));
+  background-size: variables.$form-feedback-icon-size;
+  background-position-y: top
+    calc((#{variables.$input-height-inner-half} - (#{variables.$form-feedback-icon-size} * 0.5)));
+  background-position-x: right
+    calc(
+      #{map.get(spacers.$spacers, 2) - variables.$input-border-width} +
+        var(--si-action-icon-offset, 0px)
+    );
 
   @include utilities.rtl {
-    background-position: top 5px left 6px;
+    background-position-x: left
+      calc(
+        map.get(spacers.$spacers, 1) + var(--si-action-icon-offset, variables.$input-border-width)
+      );
   }
 
   &.hide-feedback-icon {
@@ -42,6 +56,14 @@
     padding-inline-end: variables.$input-padding-x;
   }
 
+  // When a `.form-control-actions` wrapper is inside the form-control, the
+  // wrapper itself reserves space for the validation icon, so the outer
+  // form-control must not add extra `padding-inline-end` for it.
+  &:has(.form-control-actions) {
+    background-image: none;
+    --si-input-padding-inline-end: #{map.get(spacers.$spacers, 2) - variables.$input-border-width};
+  }
+
   &:autofill {
     background: semantic-tokens.$element-base-information;
   }
@@ -101,6 +123,37 @@
   --input-addon-inset-end: #{map.get(spacers.$spacers, 9)};
 }
 
+// Wrapper for trailing actions (buttons, icons, unit labels) inside
+// or alongside a `.form-control`. Sizes itself to match the form-control
+// height, provides consistent inline spacing between the input content,
+// its children and the trailing edge, and reserves room for the validation
+// icon.
+// Paint the validation feedback icon on whichever element owns the trailing
+// space for it: the `.form-control` itself by default, or a
+// `.form-control-actions` wrapper when one is placed inside the form-control.
+.form-control-actions {
+  display: inline-flex;
+  align-items: center;
+  block-size: variables.$input-height-inner;
+  padding-inline-start: map.get(spacers.$spacers, 1);
+}
+
+.form-control .form-control-actions::before {
+  box-sizing: content-box;
+  margin-block: auto;
+  inline-size: variables.$form-feedback-icon-size;
+  block-size: variables.$form-feedback-icon-size;
+  padding-inline-end: map.get(spacers.$spacers, 1);
+  content: var(--si-feedback-icon, none);
+}
+
+.form-control + .form-control-actions {
+  position: absolute;
+  inset-inline-end: map.get(spacers.$spacers, 2);
+  inset-block-start: variables.$input-border-width;
+  z-index: 2;
+}
+
 textarea.form-control {
   min-block-size: variables.$input-height;
   padding-block: calc(variables.$input-padding-y - 3px);
@@ -119,26 +172,36 @@ select.form-control {
 }
 
 select:is(.form-control, .form-select):not([multiple]) {
+  --si-action-icon-offset: 1.25rem;
   padding-block: variables.$input-padding-y;
-  padding-inline: map.get(spacers.$spacers, 4) map.get(spacers.$spacers, 8);
   appearance: none;
   background-image:
     var(--si-feedback-icon, none),
-    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M352.79 203.21a12.45 12.45 0 011.44 15.86l-1.44 1.72-88 88a12.45 12.45 0 01-15.86 1.44l-1.72-1.44-88-88a12.43 12.43 0 0115.86-19l1.72 1.44L256 282.42l79.21-79.21a12.45 12.45 0 0115.86-1.44z'/></svg>");
+    url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20512%20512%27%3E%3Cpath%20d%3D%27M256%20329.17c-4.3%200-8.42-1.73-11.43-4.8l-112-114.33c-6.18-6.31-6.08-16.44.23-22.63%206.31-6.18%2016.44-6.08%2022.63.23L256%20290.31l100.57-102.67c6.18-6.31%2016.31-6.42%2022.63-.23%206.31%206.18%206.42%2016.31.23%2022.63l-112%20114.33c-3.01%203.07-7.13%204.8-11.43%204.8%27%2F%3E%3C%2Fsvg%3E');
   background-repeat: no-repeat;
   background-position:
-    right 20px center,
-    right 2px top 50%;
-  background-size: 1.25rem, 1.5rem;
+    // Formula:
+    // + spacer-2(between arrow and input)
+    // - border-width
+    // + size of dropdown arrow
+    // + spacer-1(between arrow and validation)
+    right
+      calc(
+        #{map.get(spacers.$spacers, 2) - variables.$input-border-width +
+          map.get(spacers.$spacers, 1)} + #{si-vars.$si-icon-font-size}
+      )
+      center,
+    right map.get(spacers.$spacers, 2) - variables.$input-border-width top 50%;
+  background-size: si-vars.$si-icon-font-size, variables.$form-feedback-icon-size;
 
   @include utilities.rtl {
-    background-position: left map.get(spacers.$spacers, 2) top 50%;
+    background-position: left map.get(spacers.$spacers, 2) - variables.$input-border-width top 50%;
   }
 
   .app--dark & {
     background-image:
       var(--si-feedback-icon, none),
-      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='white' d='M352.79 203.21a12.45 12.45 0 011.44 15.86l-1.44 1.72-88 88a12.45 12.45 0 01-15.86 1.44l-1.72-1.44-88-88a12.43 12.43 0 0115.86-19l1.72 1.44L256 282.42l79.21-79.21a12.45 12.45 0 0115.86-1.44z'/></svg>");
+      url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20512%20512%27%3E%3Cpath%20fill%3D%27white%27%20d%3D%27M256%20329.17c-4.3%200-8.42-1.73-11.43-4.8l-112-114.33c-6.18-6.31-6.08-16.44.23-22.63%206.31-6.18%2016.44-6.08%2022.63.23L256%20290.31l100.57-102.67c6.18-6.31%2016.31-6.42%2022.63-.23%206.31%206.18%206.42%2016.31.23%2022.63l-112%20114.33c-3.01%203.07-7.13%204.8-11.43%204.8%27%2F%3E%3C%2Fsvg%3E');
   }
 }
 

package/src/styles/bootstrap/forms/_validation.scss

@@ -1,7 +1,7 @@
 @use '../../variables/spacers';
 @use '../../variables/typography';
+@use '../../variables/si-vars';
 @use '../variables';
-
 @use 'sass:map';
 
 // Override/enhance the form validation state mixin to also account for class
@@ -43,12 +43,14 @@
 @mixin form-validation-styles($state, $color, $icon) {
   @if ($state and $icon) {
     --si-feedback-icon: #{$icon};
+    // TODO: remove with v50
+    // DEPRECATED: use --si-feedback-icon-size instead
     --si-feedback-icon-offset: 1.5rem;
+    --si-feedback-icon-size: #{si-vars.$si-icon-font-size};
   }
 
   @if $color {
-    &:not(.no-validation):not(:hover),
-    &:not(.no-validation):focus {
+    &:not(.no-validation) {
       --border-color: #{$color};
     }
   }

package/src/styles/components/_pills.scss

@@ -5,10 +5,8 @@
 .pill {
   display: flex;
   align-items: center;
-  block-size: 24px;
-  border-radius: 12px;
-  background: variables.$element-base-0;
-  padding-block: map.get(variables.$spacers, 2);
+  border-radius: 0.75rem;
+  background: var(--filter-pill-background-color, variables.$element-base-0);
   padding-inline: map.get(variables.$spacers, 4);
   max-inline-size: 100%;
 
@@ -23,6 +21,10 @@
       background: variables.$element-action-secondary-hover;
     }
   }
+
+  :is(.name, .value) {
+    padding-block: map.get(variables.$spacers, 2);
+  }
 }
 
 .pill-group {
@@ -33,13 +35,13 @@
     border-radius: 0;
 
     &:first-child {
-      border-start-start-radius: 12px;
-      border-end-start-radius: 12px;
+      border-start-start-radius: 0.75rem;
+      border-end-start-radius: 0.75rem;
     }
 
     &:last-child {
-      border-start-end-radius: 12px;
-      border-end-end-radius: 12px;
+      border-start-end-radius: 0.75rem;
+      border-end-end-radius: 0.75rem;
     }
   }
 }