Merge branch 'main' into 3645-utilities-borders

.changeset/giant-donkeys-look.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-components': patch
+'@swisspost/design-system-styles': patch
+---
+
+Updated styles for the header main navigation and mega dropdown elements.

.changeset/grumpy-bears-fail.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Moved the border styles for the post-accordion-item from the host to an inner element within the shadow DOM to prevent conflicts with external document styles.

.changeset/pre.json

@@ -19,7 +19,8 @@
     "@swisspost/design-system-styles": "8.2.0",
     "@swisspost/design-system-styles-primeng-workspace": "1.0.5",
     "@swisspost/design-system-styles-primeng": "8.2.0",
-    "@swisspost/design-system-tokens": "8.2.0"
+    "@swisspost/design-system-tokens": "8.2.0",
+    "@swisspost/design-system-eslint": "1.0.0"
   },
   "changesets": [
     "2024-10-17-update-icons",
@@ -43,6 +44,7 @@
     "bright-insects-unite",
     "brown-badgers-dream",
     "calm-rabbits-pull",
+    "chatty-cats-swim",
     "chatty-kiwis-travel",
     "chatty-pigs-hear",
     "chatty-spoons-unite",
@@ -95,6 +97,7 @@
     "funny-knives-rule",
     "funny-shrimps-care",
     "gentle-jeans-raise",
+    "giant-donkeys-look",
     "giant-games-swim",
     "gold-chairs-grin",
     "gold-chefs-rule",
@@ -109,6 +112,7 @@
     "gorgeous-glasses-end",
     "gorgeous-needles-run",
     "great-humans-talk",
+    "grumpy-bears-fail",
     "grumpy-fishes-fail",
     "grumpy-lobsters-agree",
     "grumpy-parrots-wonder",
@@ -166,6 +170,7 @@
     "orange-maps-tan",
     "pink-weeks-relate",
     "plenty-apricots-raise",
+    "plenty-paws-run",
     "plenty-taxis-hear",
     "poor-jars-call",
     "poor-laws-impress",
@@ -198,17 +203,20 @@
     "rude-needles-matter",
     "rude-shrimps-wonder",
     "selfish-bats-run",
+    "selfish-jobs-rescue",
     "selfish-ways-know",
     "serious-chefs-exercise",
     "shaggy-experts-give",
     "sharp-baboons-smile",
     "sharp-bobcats-grab",
     "sharp-crews-watch",
+    "sharp-poems-mate",
     "shiny-ears-care",
     "short-olives-sleep",
     "shy-walls-exercise",
     "silent-ears-drive",
     "silent-vans-care",
+    "silly-papayas-greet",
     "silver-coins-invent",
     "six-roses-flow",
     "six-spiders-smoke",
@@ -226,12 +234,15 @@
     "spicy-pumpkins-grab",
     "spotty-shoes-film",
     "stale-guests-love",
+    "stale-months-dance",
     "strange-bottles-impress",
     "strange-mice-bake",
     "stupid-walls-tie",
     "sweet-cherries-drop",
+    "sweet-seals-search",
     "tame-terms-push",
     "tasty-beans-knock",
+    "tasty-carrots-eat",
     "tender-laws-confess",
     "thirty-cats-juggle",
     "thirty-chairs-suffer",

.changeset/real-ties-stare.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Fixed focus order on desktop for `post-megadropdown` component.

.changeset/sharp-poems-mate.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': major
+---
+
+Removed the `.card-group` class.

.changeset/silly-papayas-greet.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': patch
+'@swisspost/design-system-styles': patch
+---
+
+Updated styles of the card component.

.changeset/stale-months-dance.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Fixed segmented button style in HCM.

.changeset/sweet-seals-search.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-components': minor
+---
+
+Made it possible to use multiple `post-language-switch` components in the `post-header` component.
+Fixed language switch options being wrapped to multiple lines on mobile.

packages/components-angular/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @swisspost/design-system-components-angular-workspace
 
+## 1.1.10-next.18
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-components@9.0.0-next.18
+  - @swisspost/design-system-styles@9.0.0-next.18
+
+## 1.1.10-next.17
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-styles@9.0.0-next.17
+  - @swisspost/design-system-components@9.0.0-next.17
+
 ## 1.1.10-next.16
 
 ### Patch Changes

packages/components-angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-components-angular-workspace",
-  "version": "1.1.10-next.16",
+  "version": "1.1.10-next.18",
   "scripts": {
     "start": "ng serve --port 9210",
     "build": "pnpm clean && ng build components",
@@ -20,8 +20,8 @@
     "@angular/platform-browser": "18.2.13",
     "@angular/platform-browser-dynamic": "18.2.13",
     "@angular/router": "18.2.13",
-    "@swisspost/design-system-components": "workspace:9.0.0-next.16",
-    "@swisspost/design-system-styles": "workspace:9.0.0-next.16",
+    "@swisspost/design-system-components": "workspace:9.0.0-next.18",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.18",
     "rxjs": "7.8.1",
     "tslib": "2.8.1",
     "zone.js": "0.15.0"

packages/components-angular/projects/components/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @swisspost/design-system-components-angular
 
+## 9.0.0-next.18
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-components@9.0.0-next.18
+
+## 9.0.0-next.17
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-components@9.0.0-next.17
+
 ## 9.0.0-next.16
 
 ### Patch Changes

packages/components-angular/projects/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-components-angular",
-  "version": "9.0.0-next.16",
+  "version": "9.0.0-next.18",
   "description": "Swiss Post Design System - Angular Wrapper Components",
   "author": "Swiss Post <[email protected]>",
   "license": "Apache-2.0",
@@ -18,7 +18,7 @@
     "linkDirectory": true
   },
   "dependencies": {
-    "@swisspost/design-system-components": "workspace:9.0.0-next.16",
+    "@swisspost/design-system-components": "workspace:9.0.0-next.18",
     "tslib": "2.8.1"
   },
   "peerDependencies": {

packages/components-react/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @swisspost/design-system-components-react
 
+## 9.0.0-next.18
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-components@9.0.0-next.18
+
+## 9.0.0-next.17
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-components@9.0.0-next.17
+
 ## 9.0.0-next.16
 
 ### Patch Changes

packages/components-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-components-react",
-  "version": "9.0.0-next.16",
+  "version": "9.0.0-next.18",
   "description": "Design System React Components for easy integration with the React ecosystem",
   "author": "Swiss Post <[email protected]>",
   "license": "Apache-2.0",
@@ -28,7 +28,7 @@
     "lint:fix": "eslint --fix"
   },
   "dependencies": {
-    "@swisspost/design-system-components": "workspace:9.0.0-next.16"
+    "@swisspost/design-system-components": "workspace:9.0.0-next.18"
   },
   "devDependencies": {
     "@eslint/js": "9.18.0",

packages/components/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @swisspost/design-system-components
 
+## 9.0.0-next.18
+
+### Minor Changes
+
+- Made it possible to use multiple `post-language-switch` components in the `post-header` component. Fixed language switch options being wrapped to multiple lines on mobile. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#4674](https://github.com/swisspost/design-system/pull/4674))
+
+### Patch Changes
+
+- Updated styles for the header main navigation and mega dropdown elements. (by [@leagrdv](https://github.com/leagrdv) with [#4621](https://github.com/swisspost/design-system/pull/4621))
+- Updated dependencies:
+  - @swisspost/design-system-styles@9.0.0-next.18
+  - @swisspost/design-system-icons@9.0.0-next.18
+
+## 9.0.0-next.17
+
+### Patch Changes
+
+- Moved the border styles for the post-accordion-item from the host to an inner element within the shadow DOM to prevent conflicts with external document styles. (by [@alizedebray](https://github.com/alizedebray) with [#4645](https://github.com/swisspost/design-system/pull/4645))
+- Updated dependencies:
+  - @swisspost/design-system-styles@9.0.0-next.17
+  - @swisspost/design-system-icons@9.0.0-next.17
+
 ## 9.0.0-next.16
 
 ### Minor Changes

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-components",
-  "version": "9.0.0-next.16",
+  "version": "9.0.0-next.18",
   "description": "A collection of web components built with Stencil JS for the Swiss Post Design System.",
   "license": "Apache-2.0",
   "main": "dist/index.cjs.js",
@@ -40,8 +40,8 @@
   "dependencies": {
     "@floating-ui/dom": "1.6.13",
     "@oddbird/popover-polyfill": "0.3.7",
-    "@swisspost/design-system-icons": "workspace:9.0.0-next.16",
-    "@swisspost/design-system-styles": "workspace:9.0.0-next.16",
+    "@swisspost/design-system-icons": "workspace:9.0.0-next.18",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.18",
     "ally.js": "1.4.1",
     "long-press-event": "2.5.0",
     "nanoid": "5.0.9"

packages/components/src/components.d.ts

@@ -8,12 +8,12 @@ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 import { HeadingLevel } from "./types/index";
 import { BannerType } from "./components/post-banner/banner-types";
 import { DEVICE_SIZE } from "./components/post-header/post-header";
-import { SwitchVariant } from "./components/post-language-switch/switch-variants";
+import { SwitchType, SwitchVariant } from "./components/post-language-switch/switch-variants";
 import { Placement } from "@floating-ui/dom";
 export { HeadingLevel } from "./types/index";
 export { BannerType } from "./components/post-banner/banner-types";
 export { DEVICE_SIZE } from "./components/post-header/post-header";
-export { SwitchVariant } from "./components/post-language-switch/switch-variants";
+export { SwitchType, SwitchVariant } from "./components/post-language-switch/switch-variants";
 export { Placement } from "@floating-ui/dom";
 export namespace Components {
     interface PostAccordion {
@@ -248,12 +248,16 @@ export namespace Components {
           * Selects the language option programmatically.
          */
         "select": () => Promise<void>;
+        /**
+          * To communicate the type prop from the parent (post-language-switch) component to the child (post-language-option) component. See parent docs for a description about the property itself.
+         */
+        "type"?: SwitchType | null;
         /**
           * The URL used for the href attribute of the internal anchor. This field is optional; if not provided, a button will be used internally instead of an anchor.
          */
         "url": string;
         /**
-          * The variant of the post-language-switch parent (dynamically set by the parent)
+          * To communicate the variant prop from the parent (post-language-switch) component to the child (post-language-option) component. See parent docs for a description about the property itself.
          */
         "variant"?: SwitchVariant | null;
     }
@@ -267,7 +271,11 @@ export namespace Components {
          */
         "description": string;
         /**
-          * Variant that determines the rendering of the language switch either as a list (used on mobile in the header) or a dropdown (used on desktop in the header)
+          * Whether the component is rendered with uppercased text and fix widths or without any text transformation and fluid widths
+         */
+        "type": SwitchType;
+        /**
+          * Whether the component is rendered as a list or a menu
          */
         "variant": SwitchVariant;
     }
@@ -1113,12 +1121,16 @@ declare namespace LocalJSX {
           * An event emitted when the language option is clicked. The payload is the ISO 639 code of the language.
          */
         "onPostChange"?: (event: PostLanguageOptionCustomEvent<string>) => void;
+        /**
+          * To communicate the type prop from the parent (post-language-switch) component to the child (post-language-option) component. See parent docs for a description about the property itself.
+         */
+        "type"?: SwitchType | null;
         /**
           * The URL used for the href attribute of the internal anchor. This field is optional; if not provided, a button will be used internally instead of an anchor.
          */
         "url"?: string;
         /**
-          * The variant of the post-language-switch parent (dynamically set by the parent)
+          * To communicate the variant prop from the parent (post-language-switch) component to the child (post-language-option) component. See parent docs for a description about the property itself.
          */
         "variant"?: SwitchVariant | null;
     }
@@ -1132,7 +1144,11 @@ declare namespace LocalJSX {
          */
         "description"?: string;
         /**
-          * Variant that determines the rendering of the language switch either as a list (used on mobile in the header) or a dropdown (used on desktop in the header)
+          * Whether the component is rendered with uppercased text and fix widths or without any text transformation and fluid widths
+         */
+        "type"?: SwitchType;
+        /**
+          * Whether the component is rendered as a list or a menu
          */
         "variant"?: SwitchVariant;
     }

packages/components/src/components/post-accordion-item/post-accordion-item.scss

@@ -10,14 +10,15 @@
 
 tokens.$default-map: components.$post-accordion;
 
-:host {
+.accordion-item {
   &::after {
     display: block;
     content: '';
     margin-top: calc(tokens.get('accordion-border-bottom-width') * -1);
     border-bottom: tokens.get('accordion-border-bottom-width')
       tokens.get('accordion-border-bottom-style') tokens.get('accordion-enabled-border');
   }
+
   &:has(.accordion-button:hover)::after {
     border-color: tokens.get('accordion-hover-border');
     @include utility-mx.high-contrast-mode() {

packages/components/src/components/post-header/post-header.scss

@@ -111,10 +111,10 @@
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
-  gap: var(--post-core-dimension-8);
+  gap: var(--post-core-dimension-4);
   min-height: var(--local-header-min-height);
   background: var(--post-core-color-brand-white);
-  transition: box-shadow 0.2s ease-in-out; 
+  transition: box-shadow 0.2s ease-in-out;
 
   @include media.min(lg) {
     z-index: 3;