@siemens/element-theme 49.10.0 → 49.12.0

package/package.json

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

package/src/styles/bootstrap/_buttons.scss

@@ -199,7 +199,9 @@ button {
 
 // Icon buttons with circle variant
 // --------------
-.btn:is(.btn-circle, .btn-icon, .btn-close) {
+.btn-circle,
+.btn-icon,
+.btn-close {
   display: inline-flex;
   padding: 0;
   flex-shrink: 0;
@@ -213,7 +215,8 @@ button {
   }
 }
 
-.btn-circle {
+.btn-circle,
+.btn-close {
   border-radius: 50%;
 }
 

package/src/styles/bootstrap/_dropdowns.scss

@@ -19,7 +19,7 @@
   z-index: zindex.$zindex-dropdown;
   display: none; // none by default, but block on "open" of the menu
   min-inline-size: bootstrap-variables.$dropdown-min-width;
-  max-block-size: calc(100vh - #{map.get(spacers.$spacers, 1) * 2});
+  max-block-size: calc(100vb - #{map.get(spacers.$spacers, 1) * 2});
   overflow-y: auto;
   padding-block: bootstrap-variables.$dropdown-padding-y;
   padding-inline: bootstrap-variables.$dropdown-padding-x;
@@ -42,7 +42,7 @@
   overflow: auto;
   // 266px is based on figma and gives 6-8 items. Depending on the number of headings
   max-block-size: min(
-    100vh,
+    100vb,
     calc((1lh + 2 * #{bootstrap-variables.$dropdown-item-padding-y}) * 8.3125) // = 266px with rfs 16px
   );
 }
@@ -209,8 +209,8 @@
 
 .dropdown-menu {
   &.align-center {
-    left: 0; // stylelint-disable-line liberty/use-logical-spec
-    right: unset; // stylelint-disable-line liberty/use-logical-spec
+    left: 0; // stylelint-disable-line property-layout-mappings
+    right: unset; // stylelint-disable-line property-layout-mappings
     transform: translateX(-50%);
   }
 

package/src/styles/bootstrap/_modals.scss

@@ -95,12 +95,6 @@
   border-start-start-radius: variables.$modal-content-inner-border-radius;
   border-start-end-radius: variables.$modal-content-inner-border-radius;
 
-  .btn-close {
-    padding-block: variables.$modal-header-padding-y * 0.5;
-    padding-inline: variables.$modal-header-padding-x * 0.5;
-    margin: 0;
-  }
-
   .icon {
     font-size: si-vars.$si-icon-font-size-lg;
     margin-inline-end: map.get(spacers.$spacers, 4);
@@ -231,7 +225,7 @@
 
   @include breakpoints.media-breakpoint-down($breakpoint) {
     .modal-fullscreen#{$postfix} {
-      inline-size: 100vw;
+      inline-size: 100vi;
       max-inline-size: none;
       block-size: 100%;
       margin: 0;

package/src/styles/bootstrap/_popovers.scss

@@ -12,8 +12,8 @@ $si-popover-bg: var(--popover-bg-color, variables.$popover-bg);
 
 .popover {
   position: absolute;
-  top: 0; // stylelint-disable-line liberty/use-logical-spec
-  left: 0; // stylelint-disable-line liberty/use-logical-spec
+  top: 0; // stylelint-disable-line property-layout-mappings
+  left: 0; // stylelint-disable-line property-layout-mappings
   z-index: zindex.$zindex-popover;
   display: block;
   min-block-size: 50px;

package/src/styles/bootstrap/_reboot.scss

@@ -478,7 +478,7 @@ select {
 // 1. Textareas should really only resize vertically so they don't break their (horizontal) containers.
 
 textarea {
-  resize: vertical; // 1
+  resize: block; // 1
 }
 
 // 1. Browsers set a default `min-width: min-content;` on fieldsets,

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

@@ -68,7 +68,7 @@
     background: semantic-tokens.$element-base-information;
   }
 
-  &:is(:focus, :hover) {
+  &:is(:focus, :hover, :has(+ .form-control-actions:is(:hover, :focus-within))) {
     --border-color: #{semantic-tokens.$element-ui-1};
     --si-textarea-mask: #{semantic-tokens.$element-base-input-experimental};
     background-color: semantic-tokens.$element-base-input-experimental;
@@ -76,7 +76,7 @@
 
   &:is(.readonly, [readonly]) {
     &,
-    &:is(:hover, :focus) {
+    &:is(:hover, :focus, :has(+ .form-control-actions:is(:hover, :focus-within))) {
       --border-color: #{semantic-tokens.$element-ui-4};
       --si-textarea-mask: transparent;
       background-color: transparent;
@@ -86,7 +86,7 @@
 
   &:is(.disabled, :disabled) {
     &,
-    &:is(:hover, :focus) {
+    &:is(:hover, :focus, :has(+ .form-control-actions:is(:hover, :focus-within))) {
       --border-color: #{semantic-tokens.$element-ui-4};
       --si-textarea-mask: transparent;
       background-color: transparent;

package/src/styles/bootstrap/mixins/_backdrop.scss

@@ -5,8 +5,8 @@
   inset-block-start: 0;
   inset-inline-start: 0;
   z-index: $zindex;
-  inline-size: 100vw;
-  block-size: 100vh;
+  inline-size: 100vi;
+  block-size: 100vb;
   background-color: $backdrop-bg;
   opacity: $backdrop-opacity;
   transition: variables.$transition-fade;

package/src/styles/components/_datatable.scss

@@ -267,7 +267,6 @@ $datatable-ghost-cell-strip-radius: 0 !default;
     .datatable-group-header {
       border-block-end: 1px solid $datatable-header-border-color;
       inline-size: 100% !important; // stylelint-disable-line declaration-no-important
-      min-inline-size: fit-content;
 
       .datatable-body-cell-label {
         overflow: inherit;
@@ -275,7 +274,7 @@ $datatable-ghost-cell-strip-radius: 0 !default;
         inline-size: 100%;
       }
 
-      &.datatable-body-row:hover:not(.active) {
+      &.datatable-body-row:hover:not(.active):has(.datatable-row-group) {
         background-color: variables.$table-hover-bg;
 
         :is(.datatable-row-left, .datatable-row-right) {
@@ -289,6 +288,8 @@ $datatable-ghost-cell-strip-radius: 0 !default;
     }
 
     .datatable-group-header {
+      min-inline-size: fit-content;
+
       .datatable-group-cell {
         display: flex;
         align-items: center;
@@ -311,6 +312,10 @@ $datatable-ghost-cell-strip-radius: 0 !default;
         }
       }
     }
+
+    .datatable-body-row:has(.datatable-row-group) {
+      min-inline-size: fit-content;
+    }
   }
 
   // Footer Styles

package/src/styles/components/_drag_drop.scss

@@ -68,7 +68,7 @@ body:has(.cdk-drag-preview, .ui-draggable-dragging) {
   }
 }
 
-.cdk-drag-placeholder {
+.cdk-drop-list:not([cdkDropListHasAnchor]) .cdk-drag-placeholder {
   opacity: 0.3;
   background-color: variables.$element-base-information !important;
   transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
@@ -79,6 +79,13 @@ body:has(.cdk-drag-preview, .ui-draggable-dragging) {
   }
 }
 
+// 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,
+.cdk-drag-anchor * {
+  visibility: visible;
+}
+
 .cdk-drop-list-dragging .cdk-drag {
   transition: transform 250ms cubic-bezier(0, 0, 0.2, 1) !important;
 }