@siemens/element-theme 51.1.0 → 51.3.0

package/package.json

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

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

@@ -218,7 +218,6 @@ $form-check-label-start: calc($form-check-size + map.get(spacers.$spacers-inline
   .datatable-checkbox {
     inline-size: $form-check-size !important; // stylelint-disable-line declaration-no-important
     block-size: $form-check-size !important; // stylelint-disable-line declaration-no-important
-    inset-block-start: 0.0625rem !important; // stylelint-disable-line declaration-no-important
 
     input[type='checkbox'] {
       @extend %form-check-base;

package/src/styles/components/_datatable.scss

@@ -139,16 +139,9 @@ $datatable-ghost-cell-strip-radius: 0 !default;
   :is(.datatable-header-cell, .datatable-body-cell) {
     label.datatable-checkbox {
       display: inline-flex;
-      inline-size: 13px;
-      block-size: 13px;
       margin-block: 0;
-      margin-inline: 0 map.get(spacers.$spacers-inline, 6);
+      margin-inline: 0 map.get(spacers.$spacers-inline, 4);
       position: relative;
-
-      > input {
-        inline-size: 100%;
-        block-size: 100%;
-      }
     }
   }
 
@@ -187,20 +180,16 @@ $datatable-ghost-cell-strip-radius: 0 !default;
       display: flex;
       align-items: center;
       padding-block: 0;
-      padding-inline: 4px;
+      padding-inline: map.get(spacers.$spacers-inline, 4);
       min-inline-size: $datatable-cell-min-width;
       line-height: typography.$si-line-height-body;
 
-      > div {
-        padding: 4px;
-      }
-
       &:first-child {
-        padding-inline-start: map.get(spacers.$spacers-inline, 5);
+        padding-inline-start: map.get(spacers.$spacers-inline, 6);
       }
 
       &:last-child {
-        padding-inline-end: map.get(spacers.$spacers-inline, 5);
+        padding-inline-end: map.get(spacers.$spacers-inline, 6);
       }
     }
 
@@ -208,7 +197,7 @@ $datatable-ghost-cell-strip-radius: 0 !default;
       .datatable-header-cell-template-wrap {
         display: flex;
         align-items: center;
-        overflow: hidden;
+        min-inline-size: 0;
 
         .datatable-header-cell-wrapper {
           @include text-truncate.text-truncate;
@@ -234,14 +223,29 @@ $datatable-ghost-cell-strip-radius: 0 !default;
       margin-inline-start: map.get(spacers.$spacers-inline, 1);
     }
 
+    .datatable-header-cell.resizeable {
+      padding-inline-end: 0;
+    }
+
     // Resizable handle
-    .resizeable:hover {
-      .resize-handle {
-        background-color: system-tokens.$si-sys-color-background-0;
-        inline-size: 2px;
-        border-radius: 2px;
-        padding-block: 0;
-        padding-inline: 2px;
+    .resize-handle {
+      position: relative;
+      visibility: visible;
+      inline-size: 8px;
+      border-radius: 2px;
+      padding-block: 0;
+      padding-inline: 0;
+      block-size: 100%;
+      margin-inline-start: auto;
+
+      &::after {
+        content: '';
+        position: absolute;
+        inset-block: map.get(spacers.$spacers-block, 5);
+        inset-inline: 0;
+        margin-inline: auto;
+        inline-size: map.get(spacers.$spacers-inline, 1);
+        background-color: system-tokens.$si-sys-color-border-4;
       }
     }
 

package/src/styles/components/_drag_drop.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @use '../variables';
 @use '../selectors';
 
@@ -80,6 +81,37 @@
   }
 }
 
+// Opt in on the destination list or the draggable item to show an insertion line.
+// Keep the placeholder visible in copy-source lists until it becomes an anchor.
+.cdk-drop-list.drop-line-placeholder:not([cdkDropListHasAnchor])
+  > .cdk-drag-placeholder:not(.cdk-drag-anchor),
+.cdk-drop-list:not([cdkDropListHasAnchor])
+  .cdk-drag-placeholder.drop-line-placeholder:not(.cdk-drag-anchor) {
+  block-size: 0;
+  min-block-size: 0;
+  inline-size: auto;
+  margin-inline: map.get(variables.$spacers-inline, 4);
+  margin-block: 0;
+  padding: 0;
+  border: 0;
+  opacity: 1;
+  background-color: transparent !important;
+  position: relative;
+  z-index: 999;
+
+  &::after {
+    position: absolute;
+    inline-size: 100%;
+    block-size: map.get(variables.$spacers-block, 1);
+    content: '';
+    background-color: variables.$si-sys-color-effects-focus;
+  }
+
+  > * {
+    display: none;
+  }
+}
+
 // The anchor is a clone of the placeholder left behind in the source list when
 // `cdkDropListHasAnchor` is used. Make sure it always renders like the original item.
 .cdk-drag-anchor,

package/src/styles/variables/_utilities.scss

@@ -45,7 +45,7 @@ $utilities: (
   ),
   'overflow': (
     property: overflow,
-    values: auto hidden visible scroll
+    values: auto hidden visible scroll clip
   ),
   'display': (
     responsive: true,