Merge branch 'update-post-menu' into fix-language-switch-keyboard-nav…

…igation

.changeset/bright-insects-unite.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Switched mega dropdown content to one column on mobile.

.changeset/dry-trainers-stare.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Fixed opening state of megadropdown trigger and expanded detection.

.changeset/four-beers-leave.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': patch
+---
+
+Added scss file import documentation to palette.

.changeset/poor-jars-call.md

@@ -0,0 +1,7 @@
+---
+'@swisspost/design-system-documentation': major
+'@swisspost/design-system-components': major
+'@swisspost/design-system-styles': major
+---
+
+Removed `.bg-` classes to define background color of elements.

.changeset/pre.json

@@ -33,7 +33,9 @@
     "blue-kings-beg",
     "brave-kings-dance",
     "breezy-cups-add",
+    "bright-insects-unite",
     "brown-badgers-dream",
+    "calm-rabbits-pull",
     "chatty-kiwis-travel",
     "chatty-spoons-unite",
     "chilled-owls-walk",
@@ -47,6 +49,7 @@
     "dirty-mayflies-taste",
     "dirty-squids-hunt",
     "dry-moons-walk",
+    "dry-trainers-stare",
     "dull-falcons-hope",
     "eight-turkeys-matter",
     "eleven-keys-work",
@@ -64,13 +67,18 @@
     "gold-chairs-grin",
     "gold-chefs-rule",
     "gold-dryers-drop",
+    "gold-news-repair",
     "gorgeous-flowers-flow",
+    "gorgeous-glasses-end",
+    "gorgeous-needles-run",
     "great-humans-talk",
     "grumpy-lobsters-agree",
     "grumpy-parrots-wonder",
+    "heavy-eyes-live",
     "heavy-rats-explode",
     "hip-gifts-give",
     "honest-numbers-end",
+    "hungry-penguins-turn",
     "itchy-meals-drum",
     "khaki-cougars-itch",
     "kind-buses-trade",
@@ -87,11 +95,16 @@
     "metal-rivers-look",
     "nasty-ads-greet",
     "neat-suits-provide",
+    "nervous-lizards-laugh",
     "nervous-rocks-shop",
+    "new-cougars-count",
     "new-goats-impress",
     "new-pianos-mix",
+    "nice-cycles-provide",
     "nice-ligers-attend",
+    "nine-baboons-rule",
     "ninety-nails-float",
+    "old-spiders-travel",
     "orange-maps-tan",
     "pink-weeks-relate",
     "plenty-apricots-raise",
@@ -108,6 +121,7 @@
     "quick-mails-joke",
     "quiet-apes-rhyme",
     "rare-dryers-count",
+    "real-gorillas-behave",
     "red-cobras-cry",
     "red-lies-lick",
     "red-moose-do",
@@ -128,25 +142,32 @@
     "slimy-plums-sniff",
     "slimy-rockets-pull",
     "slow-fishes-reply",
+    "smooth-bugs-explode",
     "soft-moles-whisper",
+    "soft-pugs-dream",
     "strange-bottles-impress",
     "strange-mice-bake",
     "stupid-walls-tie",
     "tame-terms-push",
+    "tender-laws-confess",
     "thirty-cats-juggle",
     "three-lies-do",
     "tidy-dolls-walk",
     "tidy-keys-push",
     "tidy-paws-type",
     "tiny-socks-count",
+    "tough-cheetahs-clean",
     "tricky-crews-agree",
+    "twenty-chairs-kick",
     "twenty-items-drum",
+    "violet-poems-attend",
     "warm-drinks-prove",
     "weak-falcons-study",
     "weak-jars-rhyme",
     "wild-bugs-work",
     "wise-spies-shave",
     "wise-tomatoes-brake",
+    "yellow-gifts-sit",
     "yellow-yaks-jog"
   ]
 }

.changeset/quiet-dolls-lick.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Fixed icon color of banner in high contrast mode.

.changeset/quiet-pots-tickle.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': patch
+---
+
+Added hint to not use active, disabled chips.

.changeset/violet-geckos-shave.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Added hover color to `post-accordion` in high contrast mode.

packages/components-angular/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @swisspost/design-system-components-angular-workspace
 
+## 1.1.10-next.9
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-components@9.0.0-next.9
+  - @swisspost/design-system-styles@9.0.0-next.9
+
 ## 1.1.10-next.8
 
 ### Patch Changes

packages/components-angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-components-angular-workspace",
-  "version": "1.1.10-next.8",
+  "version": "1.1.10-next.9",
   "scripts": {
     "start": "ng serve --port 9210",
     "build": "ng build components",
@@ -18,8 +18,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.8",
-    "@swisspost/design-system-styles": "workspace:9.0.0-next.8",
+    "@swisspost/design-system-components": "workspace:9.0.0-next.9",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.9",
     "rxjs": "7.8.1",
     "tslib": "2.6.3",
     "zone.js": "0.14.8"

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

@@ -1,5 +1,12 @@
 # @swisspost/design-system-components-angular
 
+## 9.0.0-next.9
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-components@9.0.0-next.9
+
 ## 9.0.0-next.8
 
 ### Patch Changes

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

@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-components-angular",
-  "version": "9.0.0-next.8",
+  "version": "9.0.0-next.9",
   "description": "Swiss Post Design System - Angular Wrapper Components",
   "author": "Swiss Post <[email protected]>",
   "license": "Apache-2.0",
@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "tslib": "2.6.3",
-    "@swisspost/design-system-components": "workspace:9.0.0-next.8"
+    "@swisspost/design-system-components": "workspace:9.0.0-next.9"
   },
   "peerDependencies": {
     "@angular/common": "^16.0.0 || ^17.0.0 || ^18.0.0",

packages/components-angular/projects/consumer-app/src/app/app.component.html

@@ -1,4 +1,4 @@
-<header class="bg-dark">
+<header class="palette-alternate">
   <nav class="container py-8">
     <ul class="d-flex flex-wrap row-gap-4 column-gap-16 m-0 list-unstyled">
       <li *ngFor="let route of navigationRoutes">

packages/components-angular/projects/consumer-app/src/styles.scss

@@ -1 +1 @@
-@use '@swisspost/design-system-styles';
+@use '@swisspost/design-system-styles/post-external.scss';

packages/components-react/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @swisspost/design-system-components-react
 
+## 9.0.0-next.9
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-components@9.0.0-next.9
+
 ## 9.0.0-next.8
 
 ### Patch Changes

packages/components-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-components-react",
-  "version": "9.0.0-next.8",
+  "version": "9.0.0-next.9",
   "description": "Design System React Components for easy integration with the React ecosystem",
   "author": "Swiss Post <[email protected]>",
   "license": "Apache-2.0",
@@ -29,7 +29,7 @@
     "lint": "eslint src/**/*.ts"
   },
   "dependencies": {
-    "@swisspost/design-system-components": "workspace:9.0.0-next.8"
+    "@swisspost/design-system-components": "workspace:9.0.0-next.9"
   },
   "devDependencies": {
     "@types/node": "20.14.14",

packages/components/CHANGELOG.md

@@ -1,5 +1,44 @@
 # @swisspost/design-system-components
 
+## 9.0.0-next.9
+
+### Major Changes
+
+- Updated the `post-togglebutton` component to offer greater flexibility. You can now control the visibility of elements within the `post-togglebutton` using the `data-showwhen="toggled"` and `data-showwhen="untoggled"` attributes. Any content without a `data-showwhen` attribute will always be visible, regardless of the toggle state. (by [@alizedebray](https://github.com/alizedebray) with [#4223](https://github.com/swisspost/design-system/pull/4223))
+
+### Minor Changes
+
+- Added composable footer component. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#4190](https://github.com/swisspost/design-system/pull/4190))
+
+- Added the `post-megadropdown` component. (by [@leagrdv](https://github.com/leagrdv) with [#4177](https://github.com/swisspost/design-system/pull/4177))
+
+- Added the parts `button` and `body` in the `post-accordion-item` component, so one can override styles from the outside. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#4190](https://github.com/swisspost/design-system/pull/4190))
+
+- Added the `post-breadcrumb` component to provide a standalone breadcrumb navigation solution. (by [@alionazherdetska](https://github.com/alionazherdetska) with [#4065](https://github.com/swisspost/design-system/pull/4065))
+
+- Added the css parts `button` and `body` in the `post-accorddion-item` component. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#4190](https://github.com/swisspost/design-system/pull/4190))
+
+- Added the `post-language-switch` component that enables users to change the language of a page. (by [@leagrdv](https://github.com/leagrdv) with [#4044](https://github.com/swisspost/design-system/pull/4044))
+
+### Patch Changes
+
+- Switched mega dropdown content to one column on mobile. (by [@leagrdv](https://github.com/leagrdv) with [#4300](https://github.com/swisspost/design-system/pull/4300))
+
+- Fixed opening state of megadropdown trigger and expanded detection. (by [@leagrdv](https://github.com/leagrdv) with [#4299](https://github.com/swisspost/design-system/pull/4299))
+
+- Fix tab isolation in nested `post-tabs` components by scoping tab queries and interactions to the current instance. (by [@alionazherdetska](https://github.com/alionazherdetska) with [#4211](https://github.com/swisspost/design-system/pull/4211))
+
+- Added a fixed slot `post-list-item` on the `post-list-item` host element, so it is no longer necessary to add it manually. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#4190](https://github.com/swisspost/design-system/pull/4190))
+
+- Fixed the used `headingLevel` in the `post-accorddion-item` component. The component now uses the value from its closest `post-accorddion` parent component, if this is specified and falls back to `h2` if not specified. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#4190](https://github.com/swisspost/design-system/pull/4190))
+
+- Updated the `post-togglebutton` to function like a real button, including support for keyboard navigation and proper focus styles. (by [@alizedebray](https://github.com/alizedebray) with [#4242](https://github.com/swisspost/design-system/pull/4242))
+
+- Fixed an issue with the post-list component where the `horizontal` property could not be set programmatically. Also, reduced the specificity of the component's styles to make customization easier. (by [@alizedebray](https://github.com/alizedebray) with [#4137](https://github.com/swisspost/design-system/pull/4137))
+- Updated dependencies:
+  - @swisspost/design-system-styles@9.0.0-next.9
+  - @swisspost/design-system-icons@9.0.0-next.9
+
 ## 9.0.0-next.8
 
 ### Minor Changes

packages/components/cypress/e2e/tag.cy.ts

@@ -29,7 +29,7 @@ describe('Tag', () => {
       });
     });
 
-    it('should set the tags bg-color according to the prop `variant`', () => {
+    it('should set the tags background color according to the prop `variant`', () => {
       ['gray', 'white', 'info', 'success', 'danger', 'warning', 'yellow'].forEach(bg => {
         cy.get('@tag').invoke('attr', 'variant', bg).should('have.attr', 'variant', bg);
         cy.get('@wrapper').should('have.class', `tag-${bg}`);

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-components",
-  "version": "9.0.0-next.8",
+  "version": "9.0.0-next.9",
   "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.8",
     "@oddbird/popover-polyfill": "0.3.7",
-    "@swisspost/design-system-icons": "workspace:9.0.0-next.8",
-    "@swisspost/design-system-styles": "workspace:9.0.0-next.8",
+    "@swisspost/design-system-icons": "workspace:9.0.0-next.9",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.9",
     "ally.js": "1.4.1",
     "long-press-event": "2.5.0",
     "nanoid": "5.0.9"

packages/components/src/components.d.ts

@@ -311,10 +311,6 @@ export namespace Components {
           * Hides the popover menu and restores focus to the previously focused element.
          */
         "hide": () => Promise<void>;
-        /**
-          * Whether or not the post-menu is used within a post-language-switch component as the children structure is not the same.
-         */
-        "isLanguageSwitch": boolean;
         /**
           * Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement. Tooltips are automatically flipped to the opposite side if there is not enough available space and are shifted towards the viewport if they would overlap edge boundaries.
          */
@@ -1155,10 +1151,6 @@ declare namespace LocalJSX {
         "for": string;
     }
     interface PostMenu {
-        /**
-          * Whether or not the post-menu is used within a post-language-switch component as the children structure is not the same.
-         */
-        "isLanguageSwitch"?: boolean;
         /**
           * Emits when the menu is shown or hidden. The event payload is a boolean: `true` when the menu was opened, `false` when it was closed.
          */

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

@@ -21,6 +21,9 @@ tokens.$default-map: components.$post-accordion;
   }
   &:has(.accordion-button:hover)::after {
     border-color: tokens.get('accordion-hover-border');
+    @include utility-mx.high-contrast-mode() {
+      border-color: Highlight;
+    }
   }
 }
 
@@ -47,7 +50,6 @@ tokens.$default-map: components.$post-accordion;
     calc(
       tokens.get('accordion-header-padding-inline') + tokens.get('accordion-border-bottom-width')
     );
-  transition: accordion.$accordion-button-transition;
   cursor: pointer;
 
   &::before {
@@ -100,13 +102,7 @@ tokens.$default-map: components.$post-accordion;
   @include utility-mx.high-contrast-mode() {
     &:hover,
     &:focus-visible {
-      &:not(:disabled) {
-        outline: tokens.get('accordion-border-bottom-width') solid Highlight;
-      }
-    }
-
-    &:disabled {
-      opacity: 1 !important;
+      color: Highlight;
     }
   }
 }

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

@@ -47,6 +47,10 @@ export class PostHeader {
       ? slideUp(this.mobileMenu)
       : slideDown(this.mobileMenu);
 
+    // Update the state of the toggle button
+    const menuButton = this.host.querySelector<HTMLPostTogglebuttonElement>('post-togglebutton');
+    menuButton.toggled = !this.mobileMenuExtended;
+
     // Toggle menu visibility before it slides down and after it slides back up
     if (this.mobileMenuExtended) await this.mobileMenuAnimation.finished;
     this.mobileMenuExtended = !this.mobileMenuExtended;
@@ -107,10 +111,6 @@ export class PostHeader {
     if (newDevice === 'desktop' && this.mobileMenuExtended) {
       this.toggleMobileMenu();
       this.mobileMenuAnimation.finish(); // no animation
-
-
-      const menuToggler = this.host.querySelector<HTMLPostTogglebuttonElement>('post-togglebutton');
-      if (menuToggler) menuToggler.toggled = false;
     }
 
     // Apply only on change for doing work only when necessary