@swisspost/design-system-styles 10.6.0 → 10.8.0

package/mixins/_utilities.scss

@@ -72,6 +72,26 @@
   }
 }
 
+@mixin focus-visible($additional-selector: '') {
+  // These selectors are deliberately kept separate and are not grouped in a single :is() selector,
+  // because Stencil's CSS minifier corrupts selector lists that repeat an :is() group containing :has().
+  // See https://github.com/stenciljs/core/issues/6894.
+  @each $focus-selector in ':focus-visible', '.pretend-focus', ':has(:focus-visible)' {
+    &#{$focus-selector}#{$additional-selector} {
+      @content;
+    }
+  }
+
+  // When a browser doesn't support :has, use focus-within as a fallback.
+  // This means that focus state is displayed on focus and not on focus-visible only (except some browsers like Safari).
+  // This list contains no nested parentheses, so it is safe to group it in a single :is() selector.
+  @supports not selector(:has(:focus-visible)) {
+    &:is(:focus-visible, :focus-within, .pretend-focus)#{$additional-selector} {
+      @content;
+    }
+  }
+}
+
 @mixin focus-style-none {
   outline: none !important;
 }
@@ -86,8 +106,7 @@
       tokens.get('focus-outline-width', helpers.$post-focus) !important;
   }
 
-  // :has(:focus-visible) mimic a focus-visible-within pseudo-class
-  &:is(:focus-visible, :has(:focus-visible), .pretend-focus)#{$additional-selector} {
+  @include focus-visible($additional-selector) {
     outline-style: tokens.get('focus-border-style', helpers.$post-focus) !important;
     // In case rules need to be slightly adjusted
     @content;
@@ -96,19 +115,6 @@
       outline-color: Highlight !important;
     }
   }
-
-  // When a browser doesn't support :has, use focus-within as a fallback. This means that focus state is displayed on focus and not on focus-visible only (except some browsers like Safari).
-  @supports not selector(:has(:focus-visible)) {
-    &:is(:focus-visible, :focus-within, .pretend-focus)#{$additional-selector} {
-      outline-style: tokens.get('focus-border-style', helpers.$post-focus) !important;
-      // In case rules need to be slightly adjusted
-      @content;
-
-      @include high-contrast-mode() {
-        outline-color: Highlight !important;
-      }
-    }
-  }
 }
 
 // this mixin should only be used if the default focus ring is not fully visible
@@ -128,8 +134,7 @@
     outline: $outline-color none tokens.get('focus-outline-width', helpers.$post-focus) !important;
   }
 
-  // :has(:focus-visible) mimic a focus-visible-within pseudo-class
-  &:is(:focus-visible, :has(:focus-visible), .pretend-focus)#{$additional-selector} {
+  @include focus-visible($additional-selector) {
     outline-style: tokens.get('focus-border-style', helpers.$post-focus) !important;
     @content;
 
@@ -137,18 +142,6 @@
       outline-color: Highlight !important;
     }
   }
-
-  // When a browser doesn't support :has, use focus-within as a fallback. This means that focus state is displayed on focus and not on focus-visible only (except some browsers like Safari).
-  @supports not selector(:has(:focus-visible)) {
-    &:is(:focus-visible, :focus-within, .pretend-focus)#{$additional-selector} {
-      outline-style: tokens.get('focus-border-style', helpers.$post-focus) !important;
-      @content;
-
-      @include high-contrast-mode() {
-        outline-color: Highlight !important;
-      }
-    }
-  }
 }
 
 @mixin focus-hover-style-custom($additional-selector: '') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-styles",
-  "version": "10.6.0",
+  "version": "10.8.0",
   "description": "Design System Styles for the Swiss Post web platform.",
   "author": "Swiss Post <design-system@post.ch>",
   "license": "Apache-2.0",
@@ -19,12 +19,12 @@
     "linkDirectory": true
   },
   "dependencies": {
-    "@swisspost/design-system-icons": "10.6.0",
-    "@swisspost/design-system-tokens": "10.6.0"
+    "@swisspost/design-system-icons": "10.8.0",
+    "@swisspost/design-system-tokens": "10.8.0"
   },
   "devDependencies": {
-    "@swisspost/design-system-prettier-config": "10.5.0",
-    "@swisspost/design-system-stylelint-config": "10.5.0",
+    "@swisspost/design-system-prettier-config": "10.8.0",
+    "@swisspost/design-system-stylelint-config": "10.8.0",
     "@types/node": "24.0.0",
     "autoprefixer": "10.5.0",
     "copyfiles": "2.4.1",

package/placeholders/_button.scss

@@ -21,5 +21,6 @@ tokens.$default-map: components.$post-button;
 
 %btn {
   @include button-mx.button-base;
+  @include button-mx.button-label-wrap;
   @include button-mx.button-size;
 }