@siemens/element-theme 49.0.0-rc.3 → 49.0.0

package/LICENSE.md

@@ -0,0 +1,20 @@
+The MIT License
+
+Copyright (c) Siemens 2016 - 2026
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the “Software”), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/package.json

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

package/src/styles/bootstrap/_button-group.scss

@@ -76,6 +76,10 @@ $btn-size-sm: 24px !default;
     &.btn-lg {
       inline-size: $btn-size-lg;
     }
+
+    &.btn-sm {
+      inline-size: $btn-size-sm;
+    }
   }
 
   // Dropdown toggle styling for split buttons
@@ -95,10 +99,11 @@ $btn-size-sm: 24px !default;
   &[inert] {
     opacity: semantic-tokens.$element-action-disabled-opacity;
   }
-}
 
-.btn-group .btn-check {
-  + .btn {
+  // Selection buttons
+  .btn-check + .btn,
+  label.btn:has(.btn-check) {
+    cursor: pointer;
     background: transparent;
     color: semantic-tokens.$element-text-primary;
     padding-block: calc(variables.$btn-padding-y - 1px);
@@ -121,16 +126,17 @@ $btn-size-sm: 24px !default;
         margin-inline: 0;
       }
     }
-  }
 
-  &:checked + .btn,
-  + .btn:hover {
-    color: semantic-tokens.$element-ui-0-hover;
+    &:hover {
+      color: semantic-tokens.$element-ui-0-hover;
+    }
   }
 
-  &:checked + .btn {
+  .btn-check:checked + .btn,
+  label.btn:has(.btn-check:checked) {
     background: semantic-tokens.$element-action-secondary-active;
     border-color: semantic-tokens.$element-action-secondary-border-hover;
+    color: semantic-tokens.$element-ui-0-hover;
     z-index: 2;
 
     &:hover {
@@ -138,7 +144,8 @@ $btn-size-sm: 24px !default;
     }
   }
 
-  &:focus-visible + .btn {
+  .btn-check:focus-visible + .btn,
+  label.btn:has(.btn-check:focus-visible) {
     @include focus.make-outline-focus();
     z-index: 3;
   }

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

@@ -215,6 +215,19 @@ $form-check-label-start: $form-check-size + map.get(spacers.$spacers, 4);
 }
 
 // button group
+.btn-group label:has(.btn-check) {
+  position: relative;
+
+  .btn-check {
+    inset: 0;
+    z-index: 3;
+    cursor: pointer;
+    opacity: 0;
+    clip: auto;
+    pointer-events: all;
+  }
+}
+
 .btn-check {
   position: absolute;
   clip: rect(0, 0, 0, 0);