@siemens/element-theme 47.1.0-next.1 → 47.1.0-next.3

package/package.json

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

package/src/styles/bootstrap/_card.scss

@@ -1,3 +1,4 @@
+@use '../variables/focus';
 @use '../variables/semantic-tokens';
 @use '../variables/spacers';
 @use '../variables/typography';
@@ -89,8 +90,22 @@
     line-height: typography.$si-font-size-title-2;
   }
 
-  &:first-child {
-    @extend %card-inner-radius-top;
+  + .card-body {
+    margin-block-start: map.get(spacers.$spacers, 2) * -1;
+    padding-block-start: map.get(spacers.$spacers, 2);
+  }
+
+  + .list-group {
+    margin-block-end: 0;
+    z-index: 0;
+
+    .list-group-item {
+      z-index: -1;
+    }
+  }
+
+  + :is(.list-group, .overflow-auto, [tabindex='0']) {
+    outline-offset: focus.$focus-style-outline-inside-offset;
   }
 }
 
@@ -102,6 +117,7 @@
   padding-block: variables.$card-spacer-y;
   padding-inline: variables.$card-spacer-x;
   color: variables.$card-color;
+  outline-offset: focus.$focus-style-outline-inside-offset !important; // stylelint-disable-line declaration-no-important
 }
 
 .card-title {
@@ -116,21 +132,21 @@
   margin-block-end: 0;
 }
 
-// If the card has a header, remove the top padding for the body.
-// Since we removed the separator line from the header, too much
-// padding looks weird.
-.card-header + .card-body {
-  padding-block-start: 0;
-}
-
 .card-footer {
-  @extend %card-inner-radius-bottom;
   padding-inline: variables.$card-cap-padding-x;
   padding-block-start: variables.$card-cap-padding-y;
   padding-block-end: variables.$card-cap-padding-x;
   background-color: variables.$card-cap-bg;
 }
 
+:is(.card-header, .card-body):first-child {
+  @extend %card-inner-radius-top;
+}
+
+:is(.card-body, .card-footer):last-child {
+  @extend %card-inner-radius-bottom;
+}
+
 .card-img-overlay {
   position: absolute;
   inset: 0;

package/src/styles/bootstrap/_dropdowns.scss

@@ -55,15 +55,13 @@
     margin-block: -#{map.get(spacers.$spacers, 2)};
     margin-inline: auto -#{map.get(spacers.$spacers, 4)};
     font-size: 1.5rem !important; // stylelint-disable-line declaration-no-important
-
-    &::before {
-      transform: rotate(var(--caret-rotate));
-      transition: transform variables.$si-caret-transition-duration;
-      display: inline-block;
-    }
+    transform: rotate(var(--caret-rotate));
+    // adjust the origin to account for the negative margin. Otherwise the element would visually not rotate around the center.
+    transform-origin: calc(50% + #{map.get(spacers.$spacers, 1)}) 50%;
+    transition: transform variables.$si-caret-transition-duration;
   }
 
-  &.show .dropdown-caret::before {
+  &.show .dropdown-caret {
     transform: rotate(calc(var(--caret-rotate) + 180deg));
   }
 }

package/src/styles/bootstrap/_type.scss

@@ -150,6 +150,14 @@ h6,
   );
 }
 
+.si-title-1-bold {
+  @include typography.si-font(
+    typography.$si-font-size-title-1-bold,
+    typography.$si-line-height-title-1-bold,
+    typography.$si-font-weight-title-1-bold
+  );
+}
+
 .si-title-1 {
   @include typography.si-font(
     typography.$si-font-size-title-1,
@@ -166,6 +174,14 @@ h6,
   );
 }
 
+.si-title-2-bold {
+  @include typography.si-font(
+    typography.$si-font-size-title-2-bold,
+    typography.$si-line-height-title-2-bold,
+    typography.$si-font-weight-title-2-bold
+  );
+}
+
 .si-title-2 {
   @include typography.si-font(
     typography.$si-font-size-title-2,

package/src/styles/components/_datatable.scss

@@ -240,6 +240,7 @@ $datatable-ghost-cell-strip-radius: 0 !default;
       .datatable-body-cell-label {
         overflow: inherit;
         text-overflow: ellipsis;
+        inline-size: 100%;
       }
 
       &:hover:not(.active) {

package/src/styles/components/_icons.scss

@@ -18,6 +18,17 @@
   -moz-osx-font-smoothing: auto !important; // stylelint-disable-line declaration-no-important
 }
 
+.icon-stack {
+  position: relative;
+  display: inline-flex;
+  vertical-align: middle;
+  line-height: 1;
+
+  > :not(:first-child) {
+    position: absolute;
+  }
+}
+
 @include utilities.rtl {
   .flip-rtl {
     transform: scaleX(-1);

package/src/styles/variables/_typography.scss

@@ -29,6 +29,10 @@ $si-font-size-h3: 1.125rem;
 $si-line-height-h3: 1.111;
 $si-font-weight-h3: $si-font-weight-bold;
 
+$si-font-size-title-1-bold: 1rem;
+$si-line-height-title-1-bold: 1.125;
+$si-font-weight-title-1-bold: $si-font-weight-black;
+
 $si-font-size-title-1: 1rem;
 $si-line-height-title-1: 1.125;
 $si-font-weight-title-1: $si-font-weight-bold;
@@ -37,6 +41,10 @@ $si-font-size-body-1: 1rem;
 $si-line-height-body-1: 1.125;
 $si-font-weight-body-1: $si-font-weight-normal;
 
+$si-font-size-title-2-bold: 0.875rem;
+$si-line-height-title-2-bold: 1.143;
+$si-font-weight-title-2-bold: $si-font-weight-black;
+
 $si-font-size-title-2: 0.875rem;
 $si-line-height-title-2: 1.143;
 $si-font-weight-title-2: $si-font-weight-bold;