@swisspost/design-system-components 10.0.0-next.49 → 10.0.0-next.51

package/dist/post-components/post-components.esm.js

@@ -1 +1 @@
-import{p as e,g as a,b as l}from"./p-C8a0ddDa.js";export{s as setNonce}from"./p-C8a0ddDa.js";(()=>{const a=import.meta.url,l={};return""!==a&&(l.resourcesUrl=new URL(".",a).href),e(l)})().then((async e=>(await a(),l([["p-0dc1e940",[[1,"post-breadcrumbs",{homeUrl:[1,"home-url"],homeText:[1,"home-text"],breadcrumbItems:[32],isConcatenated:[32],lastWindowWidth:[32]},null,{homeUrl:["validateHomeUrl"],homeText:["validateHomeText"]}]]],["p-8d2e5814",[[1,"post-footer",{label:[1],device:[32],gridSlotDisplayed:[32]},null,{label:["validateLabel"]}]]],["p-e49aa78e",[[1,"post-back-to-top",{label:[513],belowFold:[32]},null,{label:["validateLabel"],belowFold:["watchBelowFold"]}]]],["p-2f2f9b22",[[65,"post-card-control",{label:[513],description:[1],type:[1],name:[1],value:[1],checked:[1028],disabled:[1028],validity:[1028],icon:[1],focused:[32],reset:[64],groupReset:[64]},null,{label:["validateControlLabel"],description:["validateControlDescription"],type:["validateControlType"],name:["validateControlName"],value:["validateControlValue"],icon:["validateControlIcon"],checked:["updateControlChecked"],disabled:["updateControlDisabled"]}]]],["p-848c10ac",[[1,"post-popover",{placement:[1],closeButtonCaption:[1,"close-button-caption"],arrow:[4],show:[64],hide:[64],toggle:[64]},null,{placement:["validatePlacement"],closeButtonCaption:["validateCloseButtonCaption"]}]]],["p-16da91bc",[[1,"post-rating",{label:[1],stars:[2],currentRating:[1026,"current-rating"],readonly:[4],hoveredIndex:[32]},null,{label:["validateLabel"],stars:["validateStars"],currentRating:["validateCurrentRating"]}]]],["p-36358cd4",[[1,"post-tooltip",{placement:[1],arrow:[4],animation:[1],open:[1540],show:[64],hide:[64],toggle:[64]},null,{placement:["validatePlacement"]}]]],["p-a982458f",[[1,"post-avatar",{firstname:[513],lastname:[1],userid:[1],email:[1],description:[1],slottedImage:[32],avatarType:[32],imageUrl:[32],imageAlt:[32],initials:[32],storageKey:[32]},null,{firstname:["validateFirstname"],lastname:["validateLastname"],userid:["updateUserid"],email:["updateEmail"],description:["validateDescription"]}]]],["p-9dbe6595",[[1,"post-banner",{type:[513],hasActions:[32],dismiss:[64]},[[0,"click","onCloseButtonClick"]],{type:["validateType"]}]]],["p-01bc39c2",[[1,"post-linkarea",{interactiveElements:[32]}]]],["p-b0aaa058",[[1,"post-tab-header",{panel:[513],tabId:[32]},null,{panel:["validateFor"]}]]],["p-eb405167",[[1,"post-tab-panel",{name:[513],panelId:[32]},null,{name:["validateName"]}]]],["p-d221395c",[[1,"post-tabs",{activePanel:[1,"active-panel"],fullWidth:[516,"full-width"],show:[64]}]]],["p-84395e1d",[[1,"post-tooltip-trigger",{for:[513],delay:[2]},null,{for:["validateControlFor"]}]]],["p-bdeef760",[[1,"post-collapsible",{collapsed:[1028],toggle:[64]},null,{collapsed:["collapsedChange"]}],[1,"post-collapsible-trigger",{for:[513],update:[64]},null,{for:["validateAriaAttributes"]}]]],["p-71c48d48",[[1,"post-language-switch",{caption:[1],description:[1],variant:[1],activeLang:[32]},[[0,"postChange","handlePostChange"],[0,"postLanguageOptionInitiallyActive","handleInitiallyActive"]],{caption:["validateCaption"],description:["validateDescription"],variant:["validateVariant"]}],[1,"post-closebutton"],[4,"post-mainnavigation",{canScrollLeft:[32],canScrollRight:[32]},[[9,"mouseup","stopScrolling"],[9,"mouseleave","stopScrolling"]]],[1,"post-header",{device:[32],hasNavigation:[32],hasTitle:[32],mobileMenuExtended:[32],megadropdownOpen:[32],toggleMobileMenu:[64]},null,{device:["lockBody"],mobileMenuExtended:["lockBody"]}],[4,"post-language-option",{code:[1],active:[1540],variant:[1],name:[1],url:[1],select:[64]},null,{code:["validateCode"],variant:["validateVariant"],name:["validateName"],url:["validateUrl"]}],[4,"post-list",{titleHidden:[4,"title-hidden"],horizontal:[516],titleId:[32]}],[1,"post-list-item"],[1,"post-logo",{url:[1]},null,{url:["validateUrl"]}],[4,"post-megadropdown",{device:[32],isVisible:[32],trigger:[32],animationClass:[32],toggle:[64],show:[64],hide:[64],focusFirst:[64]}],[4,"post-megadropdown-trigger",{for:[1],ariaExpanded:[32]},null,{for:["validateControlFor"]}],[1,"post-togglebutton",{toggled:[1028]}],[1,"post-menu",{placement:[1],label:[1],isVisible:[32],toggle:[64],show:[64],hide:[64]},null,{placement:["validatePlacement"]}],[4,"post-menu-trigger",{for:[513],ariaExpanded:[32]},null,{for:["validateControlFor"]}],[4,"post-popovercontainer",{placement:[1],edgeGap:[2,"edge-gap"],animation:[1],arrow:[4],manualClose:[4,"manual-close"],safeSpace:[513,"safe-space"],show:[64],hide:[64],toggle:[64]},null,{placement:["validatePlacement"],edgeGap:["validateEdgeGap"],safeSpace:["validateSafeSpace"]}],[1,"post-icon",{animation:[1],base:[1],flipH:[4,"flip-h"],flipV:[4,"flip-v"],name:[513],rotate:[2],scale:[2]},null,{animation:["validateAnimation"],base:["validateBase"],name:["validateName"],rotate:["validateRotate"],scale:["validateScale"]}]]],["p-26a04741",[[1,"post-accordion-item",{collapsed:[1028],headingLevel:[2,"heading-level"],id:[32],slottedLogo:[32],toggle:[64]},[[2,"postToggle","onCollapseToggle"]],{headingLevel:["validateHeadingLevel"]}],[1,"post-accordion",{headingLevel:[2,"heading-level"],multiple:[4],toggle:[64],expandAll:[64],collapseAll:[64]},[[0,"postToggle","collapseToggleHandler"]],{headingLevel:["validateHeadingLevel"]}]]],["p-33008981",[[1,"post-breadcrumb-item",{url:[1],fullUrl:[32]},null,{url:["validateUrl"]}],[4,"post-menu-item"]]]],e))));
+import{p as e,g as a,b as l}from"./p-C8a0ddDa.js";export{s as setNonce}from"./p-C8a0ddDa.js";(()=>{const a=import.meta.url,l={};return""!==a&&(l.resourcesUrl=new URL(".",a).href),e(l)})().then((async e=>(await a(),l([["p-509ae720",[[1,"post-breadcrumbs",{homeUrl:[1,"home-url"],homeText:[1,"home-text"],menuLabel:[1,"menu-label"],breadcrumbItems:[32],isConcatenated:[32],lastWindowWidth:[32]},null,{homeUrl:["validateHomeUrl"],homeText:["validateHomeText"],menuLabel:["validateLabel"]}]]],["p-017fbd63",[[1,"post-footer",{label:[1],device:[32],gridSlotDisplayed:[32]},null,{label:["validateLabel"]}]]],["p-2c1e0e21",[[1,"post-popover",{placement:[1],closeButtonCaption:[1,"close-button-caption"],arrow:[4],show:[64],hide:[64],toggle:[64]},null,{placement:["validatePlacement"],closeButtonCaption:["validateCloseButtonCaption"]}]]],["p-feed36d6",[[1,"post-back-to-top",{label:[513],belowFold:[32]},null,{label:["validateLabel"],belowFold:["watchBelowFold"]}]]],["p-ef38c78d",[[65,"post-card-control",{label:[513],description:[1],type:[1],name:[1],value:[1],checked:[1028],disabled:[1028],validity:[1028],icon:[1],focused:[32],reset:[64],groupReset:[64]},null,{label:["validateControlLabel"],description:["validateControlDescription"],type:["validateControlType"],name:["validateControlName"],value:["validateControlValue"],icon:["validateControlIcon"],checked:["updateControlChecked"],disabled:["updateControlDisabled"]}]]],["p-d377069a",[[1,"post-rating",{label:[1],stars:[2],currentRating:[1026,"current-rating"],readonly:[4],hoveredIndex:[32]},null,{label:["validateLabel"],stars:["validateStars"],currentRating:["validateCurrentRating"]}]]],["p-2440cba5",[[1,"post-tooltip",{placement:[1],arrow:[4],animation:[1],open:[1540],show:[64],hide:[64],toggle:[64]},null,{placement:["validatePlacement"]}]]],["p-759510e5",[[1,"post-avatar",{firstname:[513],lastname:[1],userid:[1],email:[1],description:[1],slottedImage:[32],avatarType:[32],imageUrl:[32],imageAlt:[32],initials:[32],storageKey:[32]},null,{firstname:["validateFirstname"],lastname:["validateLastname"],userid:["updateUserid"],email:["updateEmail"],description:["validateDescription"]}]]],["p-b871aa1b",[[1,"post-banner",{type:[513],hasActions:[32],dismiss:[64]},[[0,"click","onCloseButtonClick"]],{type:["validateType"]}]]],["p-efa44b64",[[1,"post-linkarea",{interactiveElements:[32]}]]],["p-0b1143d4",[[1,"post-tab-header",{panel:[513],tabId:[32]},null,{panel:["validateFor"]}]]],["p-f86fb192",[[1,"post-tab-panel",{name:[513],panelId:[32]},null,{name:["validateName"]}]]],["p-2b003617",[[1,"post-tabs",{activePanel:[1,"active-panel"],fullWidth:[516,"full-width"],show:[64]}]]],["p-ea71d9fd",[[1,"post-tooltip-trigger",{for:[513],delay:[2]},null,{for:["validateControlFor"]}]]],["p-e764835b",[[1,"post-collapsible",{collapsed:[1028],toggle:[64]},null,{collapsed:["collapsedChange"]}],[1,"post-collapsible-trigger",{for:[513],update:[64]},null,{for:["validateAriaAttributes"]}]]],["p-d25fc2d8",[[1,"post-language-switch",{caption:[1],description:[1],variant:[1],activeLang:[32]},[[0,"postChange","handlePostChange"],[0,"postLanguageOptionInitiallyActive","handleInitiallyActive"]],{caption:["validateCaption"],description:["validateDescription"],variant:["validateVariant"]}],[4,"post-mainnavigation",{canScrollLeft:[32],canScrollRight:[32]},[[9,"mouseup","stopScrolling"],[9,"mouseleave","stopScrolling"]]],[1,"post-header",{device:[32],hasNavigation:[32],hasTitle:[32],mobileMenuExtended:[32],megadropdownOpen:[32],toggleMobileMenu:[64]},null,{device:["lockBody"],mobileMenuExtended:["lockBody"]}],[4,"post-language-option",{code:[1],active:[1540],variant:[1],name:[1],url:[1],select:[64]},null,{code:["validateCode"],variant:["validateVariant"],name:["validateName"],url:["validateUrl"]}],[4,"post-list",{titleHidden:[4,"title-hidden"],horizontal:[516],titleId:[32]}],[1,"post-list-item"],[1,"post-logo",{url:[1]},null,{url:["validateUrl"]}],[4,"post-megadropdown",{device:[32],isVisible:[32],trigger:[32],animationClass:[32],toggle:[64],show:[64],hide:[64],focusFirst:[64]}],[4,"post-megadropdown-trigger",{for:[1],ariaExpanded:[32]},null,{for:["validateControlFor"]}],[1,"post-togglebutton",{toggled:[1028]}],[4,"post-closebutton",{buttonType:[1,"button-type"]},null,{buttonType:["validateButtonType"]}],[1,"post-menu",{placement:[1],label:[1],isVisible:[32],toggle:[64],show:[64],hide:[64]},null,{placement:["validatePlacement"],label:["validateLabel"]}],[4,"post-menu-trigger",{for:[513],ariaExpanded:[32]},null,{for:["validateControlFor"]}],[4,"post-popovercontainer",{placement:[1],edgeGap:[2,"edge-gap"],animation:[1],arrow:[4],manualClose:[4,"manual-close"],safeSpace:[513,"safe-space"],show:[64],hide:[64],toggle:[64]},null,{placement:["validatePlacement"],edgeGap:["validateEdgeGap"],safeSpace:["validateSafeSpace"]}],[1,"post-icon",{animation:[1],base:[1],flipH:[4,"flip-h"],flipV:[4,"flip-v"],name:[513],rotate:[2],scale:[2]},null,{animation:["validateAnimation"],base:["validateBase"],name:["validateName"],rotate:["validateRotate"],scale:["validateScale"]}]]],["p-d0fea1d7",[[1,"post-accordion-item",{collapsed:[1028],headingLevel:[2,"heading-level"],id:[32],slottedLogo:[32],toggle:[64]},[[2,"postToggle","onCollapseToggle"]],{headingLevel:["validateHeadingLevel"]}],[1,"post-accordion",{headingLevel:[2,"heading-level"],multiple:[4],toggle:[64],expandAll:[64],collapseAll:[64]},[[0,"postToggle","collapseToggleHandler"]],{headingLevel:["validateHeadingLevel"]}]]],["p-a9d4dc7f",[[1,"post-breadcrumb-item",{url:[1],fullUrl:[32]},null,{url:["validateUrl"]}],[4,"post-menu-item"]]]],e))));

package/dist/types/components/post-breadcrumbs/post-breadcrumbs.d.ts

@@ -8,6 +8,10 @@ export declare class PostBreadcrumbs {
      * The text label for the home breadcrumb item.
      */
     homeText: string;
+    /**
+     * The accessible label for the breadcrumb menu when breadcrumb items are concatenated.
+      */
+    menuLabel: string;
     breadcrumbItems: {
         url: string;
         text: string;
@@ -18,6 +22,7 @@ export declare class PostBreadcrumbs {
     private lastItem;
     validateHomeUrl(): void;
     validateHomeText(): void;
+    validateLabel(): void;
     componentWillLoad(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;

package/dist/types/components/post-closebutton/button-types.d.ts

@@ -0,0 +1,2 @@
+export declare const BUTTON_TYPES: readonly ["button", "submit", "reset"];
+export type ButtonType = (typeof BUTTON_TYPES)[number];

package/dist/types/components/post-closebutton/post-closebutton.d.ts

@@ -1,9 +1,18 @@
+import { ButtonType } from './button-types';
 /**
  * @slot default - Slot for placing visually hidden label in the close button.
  */
 export declare class PostClosebutton {
+    private mutationObserver;
     host: HTMLPostClosebuttonElement;
+    /**
+     * Overrides the close button's type ("button" by default)
+     */
+    buttonType?: ButtonType;
+    validateButtonType(): void;
     componentDidLoad(): void;
-    private checkHiddenLabel;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private checkContent;
     render(): any;
 }

package/dist/types/components/post-header/post-header.d.ts

@@ -1,6 +1,7 @@
 import { Device } from "../../utils/breakpoints";
 /**
  * @slot post-logo - Should be used together with the `<post-logo>` component.
+ * @slot global-controls - Holds search button in the global header.
  * @slot meta-navigation - Holds an `<ul>` with meta navigation links.
  * @slot post-togglebutton - Holds the mobile menu toggler.
  * @slot post-language-switch - Should be used with the `<post-language-switch>` component.
@@ -8,6 +9,8 @@ import { Device } from "../../utils/breakpoints";
  * @slot default - Custom controls or content, right aligned in the local header.
  * @slot post-mainnavigation - Has a default slot because it's only meant to be used in the `<post-header>`.
  * @slot target-group - Holds the list of buttons to choose the target group.
+ * @slot global-login - Holds the user menu or login button in the global header.
+ * @slot navigation-controls - Custom controls, right aligned with the main navigation.
  */
 export declare class PostHeader {
     private firstFocusableEl;

package/dist/types/components/post-megadropdown/post-megadropdown.d.ts

@@ -3,11 +3,11 @@ import { Device } from "../../utils/breakpoints";
 export declare class PostMegadropdown {
     private firstFocusableEl;
     private lastFocusableEl;
-    device: Device;
-    host: HTMLPostMegadropdownElement;
     /** Tracks the currently active dropdown instance. */
     private static activeDropdown;
-    private breakpointChange;
+    private defaultSlotObserver;
+    host: HTMLPostMegadropdownElement;
+    device: Device;
     /**
      * Holds the current visibility state of the dropdown.
      * This state is internally managed to track whether the dropdown is open (`true`) or closed (`false`),
@@ -17,6 +17,7 @@ export declare class PostMegadropdown {
     trigger: boolean;
     /** Holds the current animation class. */
     animationClass: string | null;
+    private get megadropdownTrigger();
     /**
      * Emits when the dropdown is shown or hidden.
      * The event payload is an object.
@@ -27,8 +28,10 @@ export declare class PostMegadropdown {
         isVisible: boolean;
         focusParent?: boolean;
     }>;
-    disconnectedCallback(): void;
+    connectedCallback(): void;
     componentDidRender(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
     /**
      * Toggles the dropdown visibility based on its current state.
      */
@@ -45,17 +48,40 @@ export declare class PostMegadropdown {
      * Sets focus to the first focusable element within the component.
      */
     focusFirst(): Promise<void>;
-    connectedCallback(): void;
+    private breakpointChange;
     /**
      * Forces the dropdown to close without animation.
      */
     private forceClose;
     private handleAnimationEnd;
-    private handleClickOutside;
+    private readonly handleClickOutside;
     private addListeners;
     private removeListeners;
     private getFocusableElements;
     private keyboardHandler;
     private handleTabOutside;
+    /**
+     * Sets up a MutationObserver on the host to watch for changes
+     * in `aria-current` attributes.
+     */
+    private setupObserver;
+    /**
+     * Adds or removes the 'active' class on the megadropdown trigger button
+     * based on the active state.
+     *
+     * @param isActive - Whether the trigger should appear active
+     */
+    private setTriggerActive;
+    /**
+     * Updates the megadropdown trigger state when the megadropdown content changes.
+     * Checks if any element inside the megadropdown has `aria-current="page"`
+     * and sets the trigger as active accordingly.
+     */
+    private handleAriaCurrentChange;
+    /**
+     * Checks on initialization if any element inside the megadropdown
+     * has `aria-current="page"` and sets the trigger as active if so.
+     */
+    private checkInitialAriaCurrent;
     render(): any;
 }

package/dist/types/components/post-menu/post-menu.d.ts

@@ -2,6 +2,7 @@ import { EventEmitter } from '../../stencil-public-runtime';
 import { Placement } from '@floating-ui/dom';
 /**
  * @part menu - The container element that holds the list of menu items.
+ * @slot header - Holds the header part of the menu.
  */
 export declare class PostMenu {
     private popoverRef;
@@ -18,7 +19,8 @@ export declare class PostMenu {
     /**
      * An accessible name for the menu.
      */
-    readonly label?: string;
+    readonly label: string;
+    validateLabel(): void;
     /**
      * Holds the current visibility state of the menu.
      * This state is internally managed to track whether the menu is open (`true`) or closed (`false`),

package/dist/types/components.d.ts

@@ -7,10 +7,12 @@
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { HeadingLevel } from "./types/index";
 import { BannerType } from "./components/post-banner/banner-types";
+import { ButtonType } from "./components/post-closebutton/button-types";
 import { 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 { ButtonType } from "./components/post-closebutton/button-types";
 export { SwitchVariant } from "./components/post-language-switch/switch-variants";
 export { Placement } from "@floating-ui/dom";
 export namespace Components {
@@ -108,6 +110,10 @@ export namespace Components {
           * The URL for the home breadcrumb item.
          */
         "homeUrl": string;
+        /**
+          * The accessible label for the breadcrumb menu when breadcrumb items are concatenated.
+         */
+        "menuLabel": string;
     }
     /**
      * @class PostCardControl - representing a stencil component
@@ -161,6 +167,11 @@ export namespace Components {
         "value"?: string;
     }
     interface PostClosebutton {
+        /**
+          * Overrides the close button's type ("button" by default)
+          * @default 'button'
+         */
+        "buttonType"?: ButtonType;
     }
     interface PostCollapsible {
         /**
@@ -327,7 +338,7 @@ export namespace Components {
         /**
           * An accessible name for the menu.
          */
-        "label"?: string;
+        "label": string;
         /**
           * Defines the position of the menu relative to its trigger. Menus 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. For supported values and behavior details, see the [Floating UI placement documentation](https://floating-ui.com/docs/computePosition#placement).
           * @default 'bottom'
@@ -1004,6 +1015,10 @@ declare namespace LocalJSX {
           * The URL for the home breadcrumb item.
          */
         "homeUrl": string;
+        /**
+          * The accessible label for the breadcrumb menu when breadcrumb items are concatenated.
+         */
+        "menuLabel": string;
     }
     /**
      * @class PostCardControl - representing a stencil component
@@ -1057,6 +1072,11 @@ declare namespace LocalJSX {
         "value"?: string;
     }
     interface PostClosebutton {
+        /**
+          * Overrides the close button's type ("button" by default)
+          * @default 'button'
+         */
+        "buttonType"?: ButtonType;
     }
     interface PostCollapsible {
         /**
@@ -1203,7 +1223,7 @@ declare namespace LocalJSX {
         /**
           * An accessible name for the menu.
          */
-        "label"?: string;
+        "label": string;
         /**
           * 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.
          */

package/dist/types/utils/event-from.d.ts

@@ -5,5 +5,6 @@
  * @param option.ignoreNestedComponents - Whether to ignore events from nested components
  */
 export declare function EventFrom(tag: string, option?: {
-    ignoreNestedComponents: boolean;
+    ignoreNestedComponents?: boolean;
+    allowDescendants?: boolean;
 }): (target: object, propertyKey: string, descriptor?: PropertyDescriptor) => void;