@swisspost/[email protected]

@swisspost/[email protected]

@swisspost/[email protected]

Major Changes

• Updated styles for elements slotted in the post-header component. Slotted lists should now omit the .list-inline class and will be automatically styled as part of the post-header.
  Keeping the .list-inline class will cause incorrect spacing between header elements. (by @alizedebray with #6661)

• Removed the traget-group.css file, target group styles are now bundled with the post-header styles. The .traget-group class no longer exist and the component will only work when placed into a post-header. (by @alizedebray with #6661)

• Refactored the icon mixins so that icons no longer need to be included separately, imports are now handled automatically. The custom-property mixin as therefore be removed entirely.

  The icon mixin arguments have also been updated: $height and $width have been replaced with a single $size since all icons are square. (by @alizedebray with #6836)

• Removed the subnavigation component in favor of page tabs. (by @alizedebray with #6913)

Minor Changes

• Extended Swiss Post Sans font support with Extra Black (950) weight. (by @alizedebray with #6932)

• Implemented a Divider html/css component using tokens for styles. Divider documentation is also added to /Components/Divider page. (by @bucknatt with #6783)

Patch Changes

• Integrated the burger menu button into the <post-header> by removing the previous post-togglebutton slot and introducing the required textMenu prop. (by @myrta2302 with #6801)

• Fixed an issue where sections could overflow the body when a scrollbar was present due to incorrect width calculations. (by @alizedebray with #6933)

• Update the post-megadropdown to allow full customization of its content. The post-megadropdown can now contain any HTML elements, not just lists of links.

  As a result, list styling is no longer applied automatically.
  If you want a properly styled list of links, you must now add the required post-megadropdown-* classes to the corresponding elements yourself.

  BEFORE:

  <post-megadropdown id="packages" label-close="Close" label-back="Back">
    <a class="post-megadropdown-overview" href="/packages">Overview Packages</a>
    <post-list>
      <p>Send packages</p>
      <post-list-item><a href="/sch">Packages Switzerland</a></post-list-item>
      <post-list-item><a href="/kl">Small goods international</a></post-list-item>
    </post-list>
    <post-list>
      <p><a href="/step-by-step">Step by step</a></p>
      <post-list-item><a href="/sch">Packages Switzerland</a></post-list-item>
      <post-list-item><a href="/kl">Small goods international</a></post-list-item>
    </post-list>
  </post-megadropdown>

  AFTER:

  <post-megadropdown id="packages" label-close="Close" label-back="Back">
    <a class="post-megadropdown-overview" href="/packages">Overview Packages</a>
    <div class="row row-cols-1 row-cols-sm-2">
      <div class="col">
        <p class="post-megadropdown-list-title" id="send-packages">Send packages</p>
        <ul class="post-megadropdown-list" aria-labelledby="send-packages">
          <li><a href="/sch">Packages Switzerland</a></li>
          <li><a href="/kl">Small goods international</a></li>
        </ul>
      </div>
      <div class="col">
        <a class="post-megadropdown-list-title" id="step-by-step-packages" href="/step-by-step"
          >Step by step</a
        >
        <ul class="post-megadropdown-list" aria-labelledby="step-by-step-packages">
          <li><a href="/sch">Packages Switzerland</a></li>
          <li><a href="/kl">Small goods international</a></li>
        </ul>
      </div>
    </div>
  </post-megadropdown>
  ``` (by [@alizedebray](https://github.com/alizedebray) with
  [#6891](https://github.com/swisspost/design-system/pull/6891))

• Updated the <post-header> component to show the local-header when the mobile menu is open and the page is scrolled. (by @myrta2302 with #6758)

• Removed local-controls and navigation-controls slots from the post-header component. Use the new local-nav slot for all application-specific controls. (by @alizedebray with #6747)

• Simplified the post-footer component by removing the post-list and post-list-item. The footer now only uses simple ul and li tags. (by @leagrdv with #6740)

• Updated dependencies:

  • @swisspost/[email protected]

@swisspost/[email protected]

Patch Changes

• Updated dependencies:
  • @swisspost/[email protected]

@swisspost/[email protected]

Minor Changes

• Added icons: 2742, 2743 and 2744 (by @swisspost-bot with #6708)

• Added icons:

  • paintroll (solid): 40px (by @swisspost-bot with #6719)

• Added icons: 2745, 2746, 2747 and 2748 (by @swisspost-bot with #6760)

• Added icons:

  • adresschange (line & solid): 16, 24, 32, 40, 48 and 64px
  • alcoholicgoods (line & solid): 16, 24, 32, 40, 48 and 64px
  • anchor (line & solid): 16, 24, 32, 40, 48 and 64px
  • animals (line & solid): 16, 24, 32, 40, 48 and 64px
  • artobjects (line & solid): 16, 24, 32, 40, 48 and 64px
  • branchaccesspoint (line & solid): 16, 24, 32, 40, 48 and 64px
  • branchhandover (line & solid): 16, 24, 32, 40, 48 and 64px
  • branchselfservice (line & solid): 16, 24, 32, 40, 48 and 64px
  • busstop (line & solid): 16, 24, 32, 40, 48 and 64px
  • certificate (line & solid): 16, 24, 32, 40, 48 and 64px
  • documentcarnetata (line & solid): 16, 24, 32, 40, 48 and 64px
  • documentofficial (line & solid): 16, 24, 32, 40, 48 and 64px
  • dryice (line & solid): 16, 24, 32, 40, 48 and 64px
  • e (line & solid): 16, 24, 32, 40, 48 and 64px
  • explosives (line & solid): 16, 24, 32, 40, 48 and 64px
  • handsanitizer (line & solid): 16, 24, 32, 40, 48 and 64px
  • horseshoe (line & solid): 16, 24, 32, 40, 48 and 64px
  • lacquer (line & solid): 16, 24, 32, 40, 48 and 64px
  • layers (line & solid): 16, 24, 32, 40, 48 and 64px
  • music (line & solid): 16, 24, 32, 40, 48 and 64px
  • opensource (line & solid): 16, 24, 32, 40, 48 and 64px
  • pobox (line & solid): 16, 24, 32, 40, 48 and 64px
  • plant (line & solid): 16, 24, 32, 40, 48 and 64px
  • preciousmetals (line & solid): 16, 24, 32, 40, 48 and 64px
  • product (line & solid): 16, 24, 32, 40, 48 and 64px
  • relocation (line & solid): 16, 24, 32, 40, 48 and 64px
  • seed (line & solid): 16, 24, 32, 40, 48 and 64px
  • usb (line & solid): 16, 24, 32, 40, 48 and 64px
  • urn (line & solid): 16, 24, 32, 40, 48 and 64px (by @swisspost-bot with #6807)

• Added icons:

  • bed (line & solid): 16, 24, 32, 40, 48 and 64px
  • hourglass (line & solid): 16, 24, 32, 40, 48 and 64px (by @swisspost-bot with #6860)

Patch Changes

• Updated icons:

  • mypost24 (line & solid): 16, 24, 32, 40, 48 and 64px (by @swisspost-bot with #6760)

• Updated icons:

  • globemeridian (line): 16px
  • handstop (solid): 16 and 24px
  • heart (solid): 40, 48 and 64px
  • locationfavorite (line): 16px
  • plus (solid): 64px
  • searchmenu (solid): 24, 32, 40, 48 and 64px
  • send (solid): 16px
  • shipmentbroken (solid): 32px
  • tooth (solid): 64px
  • tourlist (solid): 16, 32, 40, 48 and 64px
  • wallet (solid): 16 and 24px (by @swisspost-bot with #6787)

• Updated icons:

  • brain (line & solid): 16, 24, 32, 40, 48 and 64px
  • documentonenote (line & solid): 16, 24, 32, 40, 48 and 64px
  • linkedin (solid): 16, 24, 32, 40, 48 and 64px
  • mailcarrier (line): 16, 24, 32, 40, 48 and 64px
  • qrcode (line & solid): 16, 24, 32, 40, 48 and 64px
  • snapchat (solid): 16, 24, 32, 40, 48 and 64px
  • streetviewsatellite (line & solid): 16, 24, 32, 40, 48 and 64px
  • streetviewterrain (line & solid): 16, 24, 32, 40, 48 and 64px
  • twitterx (line & solid): 16, 24, 32, 40, 48 and 64px
  • whatsapp (solid): 16, 24, 32, 40, 48 and 64px
  • xing (line & solid): 16, 24, 32, 40, 48 and 64px
  • youtube (solid): 16, 24, 32, 40, 48 and 64px
  • kununu (solid): 16, 24, 32, 40, 48 and 64px (by @swisspost-bot with #6832)

@swisspost/[email protected]

@swisspost/[email protected]

@swisspost/[email protected]

Major Changes

• Updated post-header to prevent unnecessary h-tags. An h-tag can now only be used for the header title in microsite or one-page variants, other elements no longer use h-tags. (by @alizedebray with #6693)

• Renamed post-tabs parts to avoid naming confusions with other components.

  • ::part(tabs) is now ::part(post-tabs).
  • ::part(content) is now ::part(post-tabs-content). (by @alionazherdetska with #6806)

• Updated the post-accordion and post-accordion-item styles to fully align with the design specification. As part of this cleanup, the accordion-item part has been removed from post-accordion-item. The component’s styles can now be customized directly by targeting the host or by using the exposed parts for the trigger button and body elements (e.g., ::part(post-accordion-body) { ... }). (by @oliverschuerch with #6676)

• Integrated the burger menu button into the <post-header> by removing the previous post-togglebutton slot and introducing the required textMenu prop. (by @myrta2302 with #6801)

• Added a required caption property to the post-mainnavigation component for the accessible name of the navigation landmark. (by @alionazherdetska with #6841)

• Renamed the following component props

  post-back-to-top

  • label → textBackToTop

  post-breadcrumbs

  • menuLabel → textMoreItems
  • label → textBreadcrumbs
  • homeText → textHome

  post-footer

  • label → textFooter

  post-language-menu

  • caption → textChangeLanguage
  • description → textCurrentLanguage

  post-main-navigation

  • caption → textMain

  post-pagination

  • labelLast → textLast
  • labelFirst → textFirst
  • labelPage → textPage
  • labelNext → textNext
  • labelPrevious → textPrevious

  post-popover

  • closeButtonCaption → textClose

  post-stepper

  • activeStepLabel → textStepNumber
  • completedLabel → textCompletedStep
  • currentLabel → textCurrentStep (by @myrta2302 with #6894)

• Update the post-megadropdown to allow full customization of its content. The post-megadropdown can now contain any HTML elements, not just lists of links.

  As a result, list styling is no longer applied automatically.
  If you want a properly styled list of links, you must now add the required post-megadropdown-* classes to the corresponding elements yourself.

  BEFORE:

  <post-megadropdown id="packages" label-close="Close" label-back="Back">
    <a class="post-megadropdown-overview" href="/packages">Overview Packages</a>
    <post-list>
      <p>Send packages</p>
      <post-list-item><a href="/sch">Packages Switzerland</a></post-list-item>
      <post-list-item><a href="/kl">Small goods international</a></post-list-item>
    </post-list>
    <post-list>
      <p><a href="/step-by-step">Step by step</a></p>
      <post-list-item><a href="/sch">Packages Switzerland</a></post-list-item>
      <post-list-item><a href="/kl">Small goods international</a></post-list-item>
    </post-list>
  </post-megadropdown>

  AFTER:

  <post-megadropdown id="packages" label-close="Close" label-back="Back">
    <a class="post-megadropdown-overview" href="/packages">Overview Packages</a>
    <div class="row row-cols-1 row-cols-sm-2">
      <div class="col">
        <p class="post-megadropdown-list-title" id="send-packages">Send packages</p>
        <ul class="post-megadropdown-list" aria-labelledby="send-packages">
          <li><a href="/sch">Packages Switzerland</a></li>
          <li><a href="/kl">Small goods international</a></li>
        </ul>
      </div>
      <div class="col">
        <a class="post-megadropdown-list-title" id="step-by-step-packages" href="/step-by-step"
          >Step by step</a
        >
        <ul class="post-megadropdown-list" aria-labelledby="step-by-step-packages">
          <li><a href="/sch">Packages Switzerland</a></li>
          <li><a href="/kl">Small goods international</a></li>
        </ul>
      </div>
    </div>
  </post-megadropdown>
  ``` (by [@alizedebray](https://github.com/alizedebray) with
  [#6891](https://github.com/swisspost/design-system/pull/6891))

• Renamed slots in the post-header component for improved clarity and consistency. The following slots have been renamed:

  • target-group → audience
  • global-controls → global-nav-primary
  • meta-navigation → global-nav-secondary
  • post-language-switch → language-menu
  • global-login → post-login
  • post-mainnavigation → main-nav

  All slot names must be updated in existing implementations to ensure header components render correctly. (by @alionazherdetska with #6780)

• Updated the post-megadropdown component to no longer use named slots, it now provides only a default slot for its content. The close and back buttons are built into the component and are configured using the labelClose and labelBack properties instead of slotted markup.
  To preserve styling, the overview link should use the .post-megadropdown-overview class.

  BEFORE:

  <post-megadropdown>
    <button slot="back-button" class="btn btn-tertiary px-0 btn-sm">
      <post-icon name="arrowleft"></post-icon>
      Back
    </button>
    <post-closebutton slot="close-button">Close</post-closebutton>
    <a slot="post-megadropdown-overview" href="/letters">Overview Letters</a>
    <!-- Mega drop-down links -->
  </post-megadropdown>

  AFTER:

  <post-megadropdown label-close="Close" label-back="Back">
    <a class="post-megadropdown-overview" href="/letters">Overview Letters</a>
    <!-- Mega drop-down links -->
  </post-megadropdown>
  ``` (by [@alizedebray](https://github.com/alizedebray) with
  [#6813](https://github.com/swisspost/design-system/pull/6813))

• Renamed post-menu parts to avoid naming confusions with other components.

  • ::part(menu) is now ::part(post-menu). (by @alionazherdetska with #6806)

• Removed local-controls and navigation-controls slots from the post-header component. Use the new local-nav slot for all application-specific controls. (by @alizedebray with #6747)

• Renamed language components for improved semantic clarity:

  • post-language-switch → post-language-menu
  • post-language-option → post-language-menu-item

  Component tags must be updated accordingly. (by @alionazherdetska with #6773)

• Simplified the post-footer component by removing the post-list and post-list-item. The footer now only uses simple ul and li tags. (by @leagrdv with #6740)

• Renamed post-accordion-item parts to avoid naming confusions with other components.

  • ::part(button) is now ::part(post-accordion-button).
  • ::part(body) is now ::part(post-accordion-body). (by @oliverschuerch with #6676)

• Refactored <post-tabs> component:

  • Renamed post-tab-header component to post-tab-item
  • Renamed panel property to name in post-tab-item component
  • Renamed name property to for in post-tab-panel component
  • Renamed activePanel property to activeTab in post-tabs component

  BEFORE:

  <post-tabs active-panel="first">
    <post-tab-header panel="first">First tab</post-tab-header>
    <post-tab-header panel="second">Second tab</post-tab-header>
    <post-tab-header panel="third">Third tab</post-tab-header>
  
    <post-tab-panel name="first"> This is the content of the first tab. </post-tab-panel>
    <post-tab-panel name="second"> This is the content of the second tab. </post-tab-panel>
    <post-tab-panel name="third"> This is the content of the third tab. </post-tab-panel>
  </post-tabs>

  AFTER:

  <post-tabs active-tab="first">
    <post-tab-item name="first">First tab</post-tab-item>
    <post-tab-item name="second">Second tab</post-tab-item>
    <post-tab-item name="third">Third tab</post-tab-item>
  
    <post-tab-panel for="first"> This is the content of the first tab. </post-tab-panel>
    <post-tab-panel for="second"> This is the content of the second tab. </post-tab-panel>
    <post-tab-panel for="third"> This is the content of the third tab. </post-tab-panel>
  </post-tabs>
  ``` (by [@alionazherdetska](https://github.com/alionazherdetska) with
  [#6350](https://github.com/swisspost/design-system/pull/6350))

Minor Changes

• Added navigation variant to the post-tabs component, enabling anchor-based navigation. The component now automatical...

@swisspost/[email protected]

Major Changes

• Refactored <post-tabs> component:

  • Renamed post-tab-header component to post-tab-item
  • Renamed panel property to name in post-tab-item component
  • Renamed name property to for in post-tab-panel component
  • Renamed activePanel property to activeTab in post-tabs component

  BEFORE:

  <post-tabs active-panel="first">
    <post-tab-header panel="first">First tab</post-tab-header>
    <post-tab-header panel="second">Second tab</post-tab-header>
    <post-tab-header panel="third">Third tab</post-tab-header>
  
    <post-tab-panel name="first"> This is the content of the first tab. </post-tab-panel>
    <post-tab-panel name="second"> This is the content of the second tab. </post-tab-panel>
    <post-tab-panel name="third"> This is the content of the third tab. </post-tab-panel>
  </post-tabs>

  AFTER:

  <post-tabs active-tab="first">
    <post-tab-item name="first">First tab</post-tab-item>
    <post-tab-item name="second">Second tab</post-tab-item>
    <post-tab-item name="third">Third tab</post-tab-item>
  
    <post-tab-panel for="first"> This is the content of the first tab. </post-tab-panel>
    <post-tab-panel for="second"> This is the content of the second tab. </post-tab-panel>
    <post-tab-panel for="third"> This is the content of the third tab. </post-tab-panel>
  </post-tabs>
  ``` (by [@alionazherdetska](https://github.com/alionazherdetska) with
  [#6350](https://github.com/swisspost/design-system/pull/6350))

Patch Changes

• Updated dependencies:
  • @swisspost/[email protected]

@swisspost/[email protected]

Major Changes

• Refactored <post-tabs> component:

  • Renamed post-tab-header component to post-tab-item
  • Renamed panel property to name in post-tab-item component
  • Renamed name property to for in post-tab-panel component
  • Renamed activePanel property to activeTab in post-tabs component

  BEFORE:

  <post-tabs active-panel="first">
    <post-tab-header panel="first">First tab</post-tab-header>
    <post-tab-header panel="second">Second tab</post-tab-header>
    <post-tab-header panel="third">Third tab</post-tab-header>
  
    <post-tab-panel name="first"> This is the content of the first tab. </post-tab-panel>
    <post-tab-panel name="second"> This is the content of the second tab. </post-tab-panel>
    <post-tab-panel name="third"> This is the content of the third tab. </post-tab-panel>
  </post-tabs>

  AFTER:

  <post-tabs active-tab="first">
    <post-tab-item name="first">First tab</post-tab-item>
    <post-tab-item name="second">Second tab</post-tab-item>
    <post-tab-item name="third">Third tab</post-tab-item>
  
    <post-tab-panel for="first"> This is the content of the first tab. </post-tab-panel>
    <post-tab-panel for="second"> This is the content of the second tab. </post-tab-panel>
    <post-tab-panel for="third"> This is the content of the third tab. </post-tab-panel>
  </post-tabs>
  ``` (by [@alionazherdetska](https://github.com/alionazherdetska) with
  [#6350](https://github.com/swisspost/design-system/pull/6350))

Patch Changes

• Updated dependencies:
  • @swisspost/[email protected]

@swisspost/[email protected]

@swisspost/[email protected]

@swisspost/[email protected]

Patch Changes

• Updated dependencies:
  • @swisspost/[email protected]