@siemens/element-theme 48.1.0 → 48.2.0-rc.1

package/package.json

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

package/src/styles/bootstrap/_card.scss

@@ -74,6 +74,43 @@
   &.accent-critical {
     border-inline-start: map.get(spacers.$spacers, 4) solid semantic-tokens.$element-status-critical;
   }
+
+  &.action-card:not(:disabled) {
+    &:hover {
+      &,
+      .card-header,
+      .card-footer {
+        background-color: semantic-tokens.$element-base-1-hover;
+      }
+    }
+
+    &:active {
+      &,
+      .card-header,
+      .card-footer {
+        background-color: semantic-tokens.$element-base-1-selected;
+      }
+    }
+  }
+
+  &.selected {
+    box-shadow: 0 0 0 1px semantic-tokens.$element-ui-0;
+  }
+
+  &:focus-visible {
+    outline-offset: 2px;
+  }
+}
+
+button.card {
+  border: 0;
+  padding: 0;
+  overflow: hidden;
+  text-align: start;
+
+  &:disabled {
+    opacity: 0.5;
+  }
 }
 
 .card-header {

package/src/styles/bootstrap/_variables.scss

@@ -420,7 +420,7 @@ $nav-link-padding-y: 10px;
 $nav-link-padding-x: map.get(spacers.$spacers, 8);
 $nav-link-font-size: typography.$si-font-size-h4;
 $nav-link-font-weight: typography.$si-font-weight-h4;
-$nav-link-color: semantic-tokens.$element-text-secondary !default;
+$nav-link-color: semantic-tokens.$element-text-primary !default;
 $nav-link-hover-color: $link-hover-color !default;
 $nav-link-transition: ();
 $nav-link-disabled-color: semantic-tokens.$element-text-disabled !default;

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

@@ -9,14 +9,15 @@
 
 :is(.form-control, .form-select) {
   --border-color: #{semantic-tokens.$element-ui-2};
+  --si-input-padding-inline-end: calc(
+    var(--si-feedback-icon-offset, 0px) + var(--si-action-icon-offset, 0px) +
+      #{variables.$input-padding-x}
+  );
   display: block;
   inline-size: 100%;
   padding-block: variables.$input-padding-y;
   padding-inline-start: variables.$input-padding-x;
-  padding-inline-end: calc(
-    var(--si-feedback-icon-offset, 0px) + var(--si-action-icon-offset, 0px) +
-      #{variables.$input-padding-x}
-  );
+  padding-inline-end: var(--si-input-padding-inline-end);
   font-family: variables.$input-font-family;
   font-size: variables.$input-font-size;
   font-weight: variables.$input-font-weight;
@@ -96,8 +97,10 @@
 
 textarea.form-control {
   min-block-size: variables.$input-height;
-  padding-block: variables.$input-padding-y;
-  line-height: 1.5;
+  padding-block: calc(variables.$input-padding-y - 3px);
+  padding-inline-start: calc(variables.$input-padding-x - 3px);
+  padding-inline-end: calc(var(--si-input-padding-inline-end) - 3px);
+  line-height: variables.$input-line-height;
   // prevent scrollbar overlapping rounded borders
   box-shadow: 0 0 0 1px var(--border-color);
   border: 3px solid variables.$input-bg !important; // stylelint-disable-line declaration-no-important

package/src/styles/components/_datatable.scss

@@ -177,6 +177,24 @@ $datatable-ghost-cell-strip-radius: 0 !default;
         }
       }
     }
+
+    .horizontal-overflow {
+      .datatable-row-left {
+        .datatable-body-cell:last-child,
+        .datatable-header-cell:last-child {
+          box-shadow: 0 0 8px var(--element-box-shadow-color-1);
+          clip-path: inset(0 -8px 0 0);
+        }
+      }
+
+      .datatable-row-right {
+        .datatable-body-cell:first-child,
+        .datatable-header-cell:first-child {
+          box-shadow: 0 0 8px var(--element-box-shadow-color-1);
+          clip-path: inset(0 0 0 -8px);
+        }
+      }
+    }
   }
 
   // Header Styles
@@ -209,6 +227,10 @@ $datatable-ghost-cell-strip-radius: 0 !default;
       }
     }
 
+    .datatable-header-inner {
+      block-size: 100%;
+    }
+
     :is(.datatable-row-left, .datatable-row-right) {
       background-color: variables.$table-bg;
       display: flex;

package/src/styles/components/_drag_drop.scss

@@ -2,7 +2,7 @@
 
 /* stylelint-disable declaration-no-important */
 
-body:has(.cdk-drag-preview) {
+body:has(.cdk-drag-preview, .ui-draggable-dragging) {
   cursor: grabbing !important;
 
   .cdk-drop-list:not(.cdk-drop-list-dragging) {