fix(components): update post-list component (#4137)

- Reflected the `horizontal` property on the host to allow updating the
orientation with `document.querySelector('post-list).horizontal = true;`
- Reduced the selectors specificity to allow flexible styling
- Gave a default value to all CSS custom properties

.changeset/tough-cheetahs-clean.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+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.

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

@@ -2,20 +2,20 @@
 
 post-list {
   display: flex;
-  gap: var(--post-list-title-gap);
   flex-direction: column;
-  align-items: flex-start;
+  gap: var(--post-list-title-gap, 0);
 
-  & > div[role='list'] {
-    flex-direction: column;
+  > [role='list'] {
     display: flex;
-    gap: var(--post-list-item-gap);
+    flex-direction: column;
+    gap: var(--post-list-item-gap, 0);
   }
 
-  &[horizontal]:not([horizontal='false']) {
+  &:where([horizontal]:not([horizontal='false'])) {
     flex-direction: row;
-    align-items: baseline;
-    & > div[role='list'] {
+    align-items: center;
+
+    > [role='list'] {
       flex-direction: row;
       align-items: center;
     }

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

@@ -27,15 +27,15 @@ export class PostList {
   /**
    * The list can become horizontal by setting `horizontal="true"` or just `horizontal`
    */
-  @Prop() readonly horizontal: boolean = false;
+  @Prop({ reflect: true }) readonly horizontal: boolean = false;
 
   private titleEl: HTMLElement;
 
   componentWillLoad() {
     /**
      * Get the id set on the host element or use a random id by default
      */
-    this.titleId = `list-${crypto.randomUUID()}`;
+    this.titleId = `title-${this.host.id || crypto.randomUUID()}`;
   }
 
   componentDidLoad() {