Merge branch 'main' into 3207-component_breadcrumb

.changeset/big-hats-clap.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-styles': minor
+---
+
+Added a new `segmented-button` component, which allows users to toggle between two or more content sections within the same area on the screen.

.changeset/blue-kings-beg.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-styles': minor
+---
+
+Internalized bootstrap overflow utilities into the design system.

.changeset/chatty-kiwis-travel.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': minor
+---
+
+Simplified the markup structure for checkboxes by removing the need to use the classes `.form-check-input` and `.form-check-label` on the input field and the label respectively. You can safely remove these classes from your markup, they no longer have any effect.

.changeset/dirty-squids-hunt.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': minor
+---
+
+Updated radio-button styles with Design Tokens.

.changeset/khaki-cougars-itch.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-styles': minor
+'@swisspost/design-system-documentation': minor
+---
+
+Addes Cargo theme styles.

.changeset/nasty-ads-greet.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-tokens': minor
+---
+
+Export new SASS maps for Post and Cargo palettes, directly linking to the raw color values for both light and dark color schemes.

.changeset/pre.json

@@ -27,15 +27,20 @@
     "2024-11-10-update-icons",
     "beige-jobs-do",
     "big-frogs-admire",
+    "big-hats-clap",
     "big-socks-dress",
+    "blue-kings-beg",
+    "brave-kings-dance",
     "breezy-cups-add",
     "brown-badgers-dream",
+    "chatty-kiwis-travel",
     "clean-icons-complain",
     "cold-baboons-appear",
     "cold-panthers-vanish",
     "cuddly-bears-check",
     "cuddly-gifts-film",
     "dirty-mayflies-taste",
+    "dirty-squids-hunt",
     "dry-moons-walk",
     "eight-turkeys-matter",
     "eleven-keys-work",
@@ -55,14 +60,19 @@
     "great-humans-talk",
     "grumpy-parrots-wonder",
     "heavy-rats-explode",
+    "khaki-cougars-itch",
     "kind-buses-trade",
     "kind-papayas-provide",
     "lazy-gorillas-admire",
     "lemon-clocks-clean",
+    "long-shrimps-roll",
     "loud-dingos-remember",
+    "loud-peaches-hang",
     "lovely-deers-itch",
     "lovely-mirrors-travel",
+    "metal-pens-explode",
     "metal-rivers-look",
+    "nasty-ads-greet",
     "neat-suits-provide",
     "nervous-rocks-shop",
     "new-goats-impress",
@@ -89,14 +99,22 @@
     "shiny-ears-care",
     "shy-walls-exercise",
     "silver-coins-invent",
+    "six-roses-flow",
     "six-spiders-smoke",
     "sixty-items-promise",
     "slimy-rockets-pull",
+    "slow-fishes-reply",
+    "soft-moles-whisper",
     "strange-bottles-impress",
+    "stupid-walls-tie",
     "tame-terms-push",
     "three-lies-do",
     "tidy-dolls-walk",
+    "tidy-keys-push",
     "tiny-socks-count",
+    "twenty-items-drum",
+    "weak-jars-rhyme",
+    "wild-bugs-work",
     "wise-spies-shave",
     "yellow-yaks-jog"
   ]

.changeset/slow-fishes-reply.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': minor
+---
+
+Updated checkbox styles with Design Tokens.

.changeset/stupid-walls-tie.md

@@ -0,0 +1,5 @@
+---
+"@swisspost/design-system-styles": minor
+---
+
+Updated switch styles with Design Tokens.

.changeset/tidy-keys-push.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': major
+'@swisspost/design-system-styles': major
+---
+
+Removed deprecated `topic-teaser`.

.changeset/twenty-items-drum.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': patch
+'@swisspost/design-system-styles': patch
+---
+
+Updated the blockquote styles to match the new Post design.

.changeset/weak-jars-rhyme.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-styles': minor
+---
+
+Added color palettes to easily apply colors to a page section using predefined color sets.

packages/components-angular/CHANGELOG.md

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

packages/components-angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-components-angular-workspace",
-  "version": "1.1.10-next.5",
+  "version": "1.1.10-next.6",
   "scripts": {
     "start": "ng serve --port 9210",
     "build": "ng build components",
@@ -18,8 +18,8 @@
     "@angular/platform-browser": "18.2.10",
     "@angular/platform-browser-dynamic": "18.2.10",
     "@angular/router": "18.2.10",
-    "@swisspost/design-system-components": "workspace:9.0.0-next.5",
-    "@swisspost/design-system-styles": "workspace:9.0.0-next.5",
+    "@swisspost/design-system-components": "workspace:9.0.0-next.6",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.6",
     "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.6
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-components@9.0.0-next.6
+
 ## 9.0.0-next.5
 
 ### Minor Changes

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

@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-components-angular",
-  "version": "9.0.0-next.5",
+  "version": "9.0.0-next.6",
   "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.5"
+    "@swisspost/design-system-components": "workspace:9.0.0-next.6"
   },
   "peerDependencies": {
     "@angular/common": "^16.0.0 || ^17.0.0 || ^18.0.0",

packages/components-react/CHANGELOG.md

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

packages/components-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-components-react",
-  "version": "9.0.0-next.5",
+  "version": "9.0.0-next.6",
   "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.5"
+    "@swisspost/design-system-components": "workspace:9.0.0-next.6"
   },
   "devDependencies": {
     "@types/node": "20.14.14",

packages/components/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @swisspost/design-system-components
 
+## 9.0.0-next.6
+
+### Major Changes
+
+- Renamed the alert component to banner and updated the styles of banner and toast components. The class `.alert` is still supported for now but is deprecated and will be removed in v10. Changed web component `<post-alert>` to `<post-banner>`. Additionally, the classes `.{toast|alert}-primary`, `.{toast|alert}-gray` and `.toast-notification` have been deprecated. (by [@leagrdv](https://github.com/leagrdv) with [#3862](https://github.com/swisspost/design-system/pull/3862))
+
+- Removed the `alert-fixed-bottom` variant of the alert. (by [@leagrdv](https://github.com/leagrdv) with [#3862](https://github.com/swisspost/design-system/pull/3862))
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-styles@9.0.0-next.6
+
 ## 9.0.0-next.5
 
 ### Minor Changes

packages/components/cypress/fixtures/post-card-control.form-association.test.html

@@ -4,6 +4,10 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Document</title>
+    <link
+      href="../../node_modules/@swisspost/design-system-styles/post-external.css"
+      rel="stylesheet"
+    />
     <script src="../../dist/post-components/post-components.esm.js" type="module"></script>
     <script>
       function formHandler(e) {

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-components",
-  "version": "9.0.0-next.5",
+  "version": "9.0.0-next.6",
   "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,7 +40,7 @@
   "dependencies": {
     "@floating-ui/dom": "1.6.8",
     "@oddbird/popover-polyfill": "0.3.7",
-    "@swisspost/design-system-styles": "workspace:9.0.0-next.5",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.6",
     "ally.js": "1.4.1",
     "long-press-event": "2.5.0"
   },

packages/components/src/components/post-card-control/post-card-control.scss

@@ -2,14 +2,15 @@
 @use 'sass:math';
 @use '@swisspost/design-system-styles/core' as post;
 @use '@swisspost/design-system-styles/components/form-check';
+@use '@swisspost/design-system-styles/components/checkbox';
+@use '@swisspost/design-system-styles/components/radio-button';
 
 /*
 * There are a whole bunch of !important statements in this file.
 * They are necessary and should not be removed, because we need to override the .form-check styles here.
 */
 
 :host {
-
   // remove as soon as all browser support :host-context()
   // https://caniuse.com/?search=%3Ahost-context()
   --post-card-control-bg-context: #{post.$backgrounds};
@@ -36,6 +37,7 @@
   flex-basis: 100%;
   display: grid;
   grid-template: 'input label icon' 'input content content' / min-content auto min-content;
+  align-items: center;
   gap: 0 post.$size-mini;
   margin: 0;
   padding: post.$size-regular;
@@ -54,6 +56,14 @@
     cursor: inherit;
     transition: none;
 
+    @include post.focus-style-none();
+
+    &:hover:not([disabled]),
+    &:hover:not([disabled]) ~ label.form-check-label {
+      color: var(--post-contrast-color);
+      background-color: transparent;
+    }
+
     &:focus,
     &:focus-visible {
       box-shadow: none;
@@ -70,7 +80,7 @@
   .card-control--label {
     grid-area: label;
     margin: post.$size-micro 0;
-    padding: 0;
+    padding: 0 !important;
     color: inherit !important;
     pointer-events: none;
     transition: none;
@@ -170,17 +180,11 @@
     --post-card-control-input-bg: transparent;
 
     border-style: dashed;
-    text-decoration: line-through;
     cursor: default;
 
     .card-control--input {
-      border: 0 none;
       padding: post.$form-check-input-border-width;
-      background-image: url('#{post.$form-check-input-disabled-background-url-light-lg}');
-
-      &[type='radio'] {
-        background-image: url('#{post.$form-check-input-radio-disabled-background-url-light}');
-      }
+      border-style: dashed;
     }
   }
 

packages/components/src/components/post-card-control/post-card-control.tsx

@@ -362,7 +362,7 @@ export class PostCardControl {
           <input
             ref={el => (this.control = el)}
             id={this.controlId}
-            class="card-control--input form-check-input"
+            class="card-control--input"
             type={this.type}
             name={this.name}
             value={this.value}
@@ -381,7 +381,7 @@ export class PostCardControl {
           <label
             id={`${this.controlId}_label`}
             htmlFor={this.controlId}
-            class="card-control--label form-check-label"
+            class="card-control--label"
           >
             {this.label}
             {this.description ? (

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

@@ -29,7 +29,7 @@ export class PostList {
    */
   @Prop() readonly horizontal: boolean = false;
 
-  titleEl: HTMLElement;
+  private titleEl: HTMLElement;
 
   componentWillLoad() {
     /**
@@ -43,7 +43,7 @@ export class PostList {
   }
 
   private checkTitle() {
-    if (!this.titleEl.innerText) {
+    if (!this.titleEl.textContent.trim()) {
       throw new Error(
         'Please provide a title to the list component. Title is mandatory for accessibility purposes.',
       );