@swisspost/design-system-components 10.0.0-next.55 → 10.0.0-next.57

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

@@ -11,18 +11,18 @@ import { Device } from "../../utils/index";
 export declare class PostFooter {
     host: HTMLPostFooterElement;
     /**
-     * The label to add to the footer (visually hidden).
+     * The textFooter to add to the footer (visually hidden).
      */
-    readonly label: string;
+    readonly textFooter: string;
     device: Device;
     gridSlotDisplayed: Record<string, boolean>;
-    validateLabel(): void;
+    validateTextFooter(): void;
     constructor();
     connectedCallback(): void;
     componentWillLoad(): void;
     disconnectedCallback(): void;
     private readonly breakpointChange;
-    private readonly handleGridSlotChange;
+    private handleGridSlotChange;
     private updateGridSlotDisplay;
     private renderAccordion;
     private renderColumns;

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

@@ -1,36 +1,47 @@
 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 burger menu toggler.
- * @slot post-language-switch - Should be used with the `<post-language-switch>` component.
+ * @slot global-nav-primary - Holds search button in the global header.
+ * @slot global-nav-secondary - Holds an `<ul>` with meta navigation links.
+ * @slot language-menu - Should be used with the `<post-language-switch>` component.
  * @slot title - Holds the application title.
- * @slot local-controls - 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.
+ * @slot main-nav - Has a default slot because it's only meant to be used in the `<post-header>`.
+ * @slot audience - Holds the list of buttons to choose the audience.
+ * @slot post-login - Holds the user menu or login button in the global header.
+ * @slot local-nav - Holds controls specific to the current application.
  */
 export declare class PostHeader {
     private firstFocusableEl;
     private lastFocusableEl;
+    private burgerMenuButton;
     private burgerMenu;
     private burgerMenuAnimation;
     private readonly throttledResize;
     private scrollParentResizeObserver;
     private localHeaderResizeObserver;
     private slottedContentObserver;
+    private localHeader;
     private get hasBurgerMenu();
+    private animationOptions;
     get scrollParent(): HTMLElement;
     host: HTMLPostHeaderElement;
     device: Device;
     hasNavigation: boolean;
-    hasNavigationControls: boolean;
-    hasTargetGroup: boolean;
+    hasLocalNav: boolean;
+    hasAudience: boolean;
     hasTitle: boolean;
     burgerMenuExtended: boolean;
     megadropdownOpen: boolean;
+    /**
+     * Makes the header content span the full width on screens larger than 1440px.
+     */
+    fullWidth: boolean;
+    validateFullWidth(): void;
+    /**
+     * The label of the burger menu button.
+     */
+    textMenu: string;
+    validateTextMenu(): void;
     lockBody(newValue: boolean | string, _oldValue: boolean | string, propName: string): void;
     constructor();
     private readonly breakpointChange;
@@ -46,7 +57,6 @@ export declare class PostHeader {
     toggleBurgerMenu(force?: boolean): Promise<void>;
     private megadropdownStateHandler;
     private getFocusableElements;
-    private getMenuButton;
     private keyboardHandler;
     private closeAllMegadropdowns;
     private handleScrollEvent;
@@ -58,7 +68,7 @@ export declare class PostHeader {
     private handleSlottedContentChanges;
     private checkSlottedContent;
     private switchLanguageSwitchMode;
-    onFocusChange(): void;
+    onFocusChange(e: FocusEvent): void;
     private renderNavigation;
     render(): any;
 }

package/dist/types/components/{post-language-switch/post-language-switch.d.ts → post-language-menu/post-language-menu.d.ts}

@@ -1,36 +1,37 @@
 import { SwitchVariant } from './switch-variants';
-export declare class PostLanguageSwitch {
+export declare class PostLanguageMenu {
     private readonly menuId;
     private readonly listSpanId;
     private get languageOptions();
-    host: HTMLPostLanguageSwitchElement;
+    host: HTMLPostLanguageMenuElement;
     /**
      * A title for the list of language options
      */
-    caption: string;
-    validateCaption(): void;
+    textChangeLanguage: string;
+    validateTextChangeLanguage(): void;
     /**
-     * A descriptive text for the list of language options
+     * An accessible description text for the list of language options. The `#name` placeholder is dynamic and will be replaced with the active language name.
      */
-    description: string;
-    validateDescription(): void;
+    textCurrentLanguage: string;
+    validateTextCurrentLanguage(): void;
     /**
      * Whether the component is rendered as a list or a menu
      */
     variant: SwitchVariant;
     validateVariant(): void;
     /**
-     * The active language of the language switch
+     * The active language code of the language menu
      */
     activeLang: string;
+    private get description();
     componentDidLoad(): void;
     /**
-     * Listen for the postChange event and guard it to run only for events originating from a <post-language-option> element.
+     * Listen for the postChange event and guard it to run only for events originating from a <post-language-menu-item> element.
      */
     handlePostChange(event: CustomEvent<string>): void;
     /**
-     * Handles cases where the language switch is being rendered before options are available
-     * @param event Initially emitted by <post-langauge-option>
+     * Handles cases where the language menu is being rendered before options are available
+     * @param event Initially emitted by <post-language-menu-item>
      */
     handleInitiallyActive(event: CustomEvent<string>): void;
     private updateChildrenVariant;

package/dist/types/components/{post-language-option/post-language-option.d.ts → post-language-menu-item/post-language-menu-item.d.ts}

@@ -1,10 +1,10 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { SwitchVariant } from '../post-language-switch/switch-variants';
+import { SwitchVariant } from '../post-language-menu/switch-variants';
 /**
  * @slot default - Slot for placing the content inside the anchor or button.
  */
-export declare class PostLanguageOption {
-    host: HTMLPostLanguageOptionElement;
+export declare class PostLanguageMenuItem {
+    host: HTMLPostLanguageMenuItemElement;
     /**
      *  The ISO 639 language code, formatted according to [RFC 5646 (also known as BCP 47)](https://datatracker.ietf.org/doc/html/rfc5646). For example, "de".
      */
@@ -15,7 +15,7 @@ export declare class PostLanguageOption {
      */
     active?: boolean;
     /**
-     * To communicate the variant prop from the parent (post-language-switch) component to the child (post-language-option) component. See parent docs for a description about the property itself.
+     * To communicate the variant prop from the parent (post-language-menu) component to the child (post-language-menu-item) component. See parent docs for a description about the property itself.
      */
     variant?: SwitchVariant;
     validateVariant(): void;
@@ -38,7 +38,7 @@ export declare class PostLanguageOption {
     /**
      * An event emitted when the language option is initially active. The payload is the ISO 639 code of the language.
      */
-    postLanguageOptionInitiallyActive: EventEmitter<string>;
+    postLanguageMenuItemInitiallyActive: EventEmitter<string>;
     /**
      * Selects the language option programmatically.
      */

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

@@ -1,4 +1,5 @@
 export declare class PostMainnavigation {
+    host: HTMLPostMainnavigationElement;
     private navbar;
     private scrollRepeatInterval;
     private navbarDisableTimer;
@@ -6,6 +7,11 @@ export declare class PostMainnavigation {
     private mutationObserver;
     canScrollLeft: boolean;
     canScrollRight: boolean;
+    /**
+     * Defines the accessible label for the navigation element. This text is used as the `aria-label` attribute to provide screen reader users with a description of the navigation's purpose.
+     */
+    textMain: string;
+    validateTextMain(): void;
     constructor();
     componentDidLoad(): void;
     /**
@@ -16,12 +22,7 @@ export declare class PostMainnavigation {
      * Stops the repeated scrolling when the mouse button is released.
      */
     stopScrolling(): void;
-    private handleMutations;
     private get navigationItems();
-    /**
-     * Hack to fix the layout shift due to bold text on active elements
-     */
-    private fixLayoutShift;
     /**
      * Returns whether scrolling is enabled in either the left or right direction.
      */

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

@@ -6,7 +6,21 @@ export declare class PostMegadropdown {
     /** Tracks the currently active dropdown instance. */
     private static activeDropdown;
     private defaultSlotObserver;
+    private currentAnimation;
+    private animatedContainer;
+    private isAnimating;
+    private fsAnimationOptions;
     host: HTMLPostMegadropdownElement;
+    /**
+     * An accessible label for the close button visible on desktop
+     */
+    textClose: string;
+    validateTextClose(): void;
+    /**
+     * A label for the back button visible on tablet and mobile
+     */
+    textBack: string;
+    validateTextBack(): void;
     device: Device;
     /**
      * Holds the current visibility state of the dropdown.
@@ -15,6 +29,7 @@ export declare class PostMegadropdown {
      */
     isVisible: boolean;
     trigger: boolean;
+    megadropdownTitle: string;
     /** Holds the current animation class. */
     animationClass: string | null;
     private get megadropdownTrigger();
@@ -28,6 +43,7 @@ export declare class PostMegadropdown {
         isVisible: boolean;
         focusParent?: boolean;
     }>;
+    constructor();
     connectedCallback(): void;
     componentDidRender(): void;
     componentDidLoad(): void;
@@ -48,12 +64,14 @@ export declare class PostMegadropdown {
      * Sets focus to the first focusable element within the component.
      */
     focusFirst(): Promise<void>;
-    private breakpointChange;
     /**
      * Forces the dropdown to close without animation.
      */
     private forceClose;
-    private handleAnimationEnd;
+    private createAnimation;
+    private animate;
+    private cancelAnimation;
+    private breakpointChange;
     private readonly handleClickOutside;
     private addListeners;
     private removeListeners;

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

@@ -1,33 +1,27 @@
 export declare class PostMegadropdownTrigger {
-    /**
-     * ID of the mega dropdown element that this trigger is linked to. Used to open and close the specified mega dropdown.
-     */
-    for: string;
     host: HTMLPostMegadropdownTriggerElement;
+    private mutationObserver;
+    private interactiveButton;
+    private isMegadropdownExpanded;
+    private slottedContent;
     /**
-     * Manages the accessibility attribute `aria-expanded` to indicate whether the associated mega dropdown is expanded or collapsed.
-     */
-    ariaExpanded: boolean;
-    /**
-     * Reference to the slotted button within the trigger, if present.
-     * Used to manage click and key events for mega dropdown control.
+     * Sets the trigger state to be active or inactive.
      */
-    private slottedButton;
+    active: boolean;
     /**
-     * Tracks whether this trigger's dropdown was expanded before a state change.
-     * Used to determine if this trigger should handle focus when its dropdown closes.
-     */
-    private wasExpanded;
-    /**
-     * Watch for changes to the `for` property to validate its type and ensure it is a string.
-     * @param forValue - The new value of the `for` property.
+     * ID of the mega dropdown element that this trigger is linked to. Used to open and close the specified mega dropdown.
      */
-    validateControlFor(): void;
-    private get megadropdown();
-    private handleToggle;
-    private handleKeyDown;
-    private handleToggleMegadropdown;
+    for: string;
+    validateFor(): void;
+    constructor();
+    connectedCallback(): void;
+    componentWillLoad(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;
+    private cloneSlottedButton;
+    private get megadropdown();
+    private onClick;
+    private onKeyDown;
+    private onMegadropdownToggled;
     render(): any;
 }

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

@@ -1,7 +1,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.
+ * @part post-menu - The container element that holds the list of menu items.
  * @slot header - Holds the header part of the menu.
  */
 export declare class PostMenu {
@@ -17,7 +17,7 @@ export declare class PostMenu {
     readonly placement?: Placement;
     validatePlacement(): void;
     /**
-     * An accessible name for the menu.
+     * A descriptive label that clearly identifies the menu’s content so assistive technologies can convey its purpose.
      */
     readonly label: string;
     validateLabel(): void;
@@ -51,8 +51,8 @@ export declare class PostMenu {
      */
     hide(): Promise<void>;
     private readonly handleKeyDown;
-    private readonly handlePostShown;
-    private readonly handlePostToggled;
+    private handlePostShown;
+    private handlePostBeforeToggle;
     private readonly handleClick;
     private controlKeyDownHandler;
     private getSlottedItems;

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

@@ -0,0 +1,224 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class PostPagination {
+    host: HTMLPostPaginationElement;
+    private paginationId;
+    private maxVisiblePages;
+    private items;
+    /**
+     * The current active page number.
+     *
+     * **If not specified, defaults to the first page.**
+     */
+    page?: number;
+    /**
+     * The number of items per page.
+     */
+    pageSize: number;
+    /**
+     * The total number of items in the collection.
+     */
+    collectionSize: number;
+    /**
+     * A descriptive label for the pagination navigation, used by assistive technologies.
+     */
+    readonly label: string;
+    /**
+     * Accessible label for the previous page button.
+     */
+    readonly textPrevious: string;
+    /**
+     * Accessible label for the next page button.
+     */
+    readonly textNext: string;
+    /**
+     * Prefix text for page number labels.
+     */
+    readonly textPage: string;
+    /**
+     * Prefix text for the first page label.
+     */
+    readonly textFirst: string;
+    /**
+     * Prefix text for the last page label.
+     */
+    readonly textLast: string;
+    /**
+     * If true, the pagination is disabled.
+     */
+    readonly disabled?: boolean;
+    /**
+     * Event emitted when the page changes.
+     */
+    postChange: EventEmitter<number>;
+    private navRef?;
+    private hiddenItemsRef?;
+    private lastWindowWidth;
+    private loaded;
+    private debouncedResize;
+    private measurementTimeoutId;
+    validatePage(): void;
+    validatePageSize(): void;
+    validateCollectionSize(): void;
+    validateLabel(): void;
+    validateTextPrevious(): void;
+    validateTextNext(): void;
+    validateTextPage(): void;
+    validateTextFirst(): void;
+    validateTextLast(): void;
+    validateDisabled(): void;
+    handlePropsChange(): void;
+    componentWillLoad(): void;
+    connectedCallback(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    /**
+     * Validate a prop with the appropriate check function
+     */
+    private validateProp;
+    /**
+     * Run all prop validations
+     */
+    private runAllValidations;
+    /**
+     * Schedule measurement attempt with timeout
+     */
+    private scheduleMeasurement;
+    /**
+     * Internal resize handler
+     */
+    private handleResizeInternal;
+    /**
+     * Calculates gap between two elements
+     */
+    private calculateGap;
+    /**
+     * Measures actual rendered elements to determine how many pages can fit
+     */
+    private measureAndCalculateVisiblePages;
+    /**
+     * Gets total width of control buttons (prev/next)
+     */
+    private getControlButtonsWidth;
+    /**
+     * Gets the horizontal padding of the pagination container
+     */
+    private getPaginationPadding;
+    /**
+     * Gets available width from parent container
+     */
+    private getAvailableWidth;
+    /**
+     * Returns true if collection size or page size is invalid
+     */
+    private get invalidSize();
+    /**
+     * Clamps the page number to valid range
+     */
+    private clampPageToValidRange;
+    /**
+     * Validates and updates pages with clamped page number
+     */
+    private updatePagesWithValidation;
+    /**
+     * Calculates the total number of pages.
+     */
+    private getTotalPages;
+    /**
+     * Convert numeric gap to a section type
+     */
+    private sectionForGap;
+    /**
+     * Compute the left/right sections and numeric gaps for a given range
+     */
+    private getSections;
+    /**
+     * Compute total items that would be rendered for a given range
+     */
+    private computeTotalItems;
+    /**
+     * Build a full list of pages (1..totalPages)
+     */
+    private buildAllPages;
+    /**
+     * Adjust start/end pages to avoid gap=2 scenarios
+     */
+    private adjustForGapTwo;
+    /**
+     * Ensure we have the desired number of middle slots
+     */
+    private ensureMiddleSlots;
+    /**
+     * Trim excess items by shrinking the range away from current page
+     */
+    private trimExcessItems;
+    /**
+     * Expand range to fill available slots
+     */
+    private expandToFillSlots;
+    /**
+     * Balance total items to match maxVisible by trimming or expanding
+     */
+    private balanceTotalItems;
+    /**
+     * Calculate optimal page range centered around current page
+     */
+    private calculatePageRange;
+    /**
+     * Build pagination items with ellipsis
+     */
+    private buildPaginationItems;
+    /**
+     * Generates pagination items for small slot counts (3 or 4 items).
+     * Ensures current page is always visible.
+     */
+    private generateSmallPagination;
+    /**
+     * Generates the page numbers array with ellipsis based on available space.
+     */
+    private generatePages;
+    /**
+     * Emit page change event and update page
+     */
+    private emitPageChange;
+    /**
+     * Handles page change when a page button is clicked.
+     */
+    private handlePageClick;
+    /**
+     * Handles previous button click.
+     */
+    private handlePrevious;
+    /**
+     * Handles next button click.
+     */
+    private handleNext;
+    /**
+     * Handles keyboard navigation
+     */
+    private handleKeyDown;
+    /**
+     * Builds accessible label for a page button.
+     */
+    private buildPageLabel;
+    /**
+     * Renders an ellipsis item.
+     */
+    private renderEllipsis;
+    /**
+     * Renders a page button.
+     */
+    private renderPageButton;
+    /**
+     * Renders a pagination item.
+     */
+    private renderItem;
+    /**
+     * Renders control button (prev/next)
+     */
+    private renderControlButton;
+    /**
+     * Renders minimal hidden items for measurement
+     */
+    private renderHiddenItems;
+    render(): any;
+}

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

@@ -13,10 +13,10 @@ export declare class PostPopover {
     readonly placement?: Placement;
     validatePlacement(): void;
     /**
-     * Define the caption of the close button for assistive technology
+     * Define the text of the close button for assistive technology
      */
-    readonly closeButtonCaption: string;
-    validateCloseButtonCaption(): void;
+    readonly textClose: string;
+    validateTextClose(): void;
     /**
      * Show a little indicator arrow
      */
@@ -37,5 +37,6 @@ export declare class PostPopover {
      * @param force Pass true to always show or false to always hide
      */
     toggle(target: HTMLElement, force?: boolean): Promise<void>;
+    private focusFirstEl;
     render(): any;
 }

package/dist/types/components/post-popover-trigger/post-popover-trigger.d.ts

@@ -3,7 +3,7 @@ export declare class PostPopoverTrigger {
     /**
      * ID of the popover element that this trigger is linked to. Used to open and close the popover.
      */
-    for: string;
+    for?: string;
     /**
      * Manages the accessibility attribute `aria-expanded` to indicate whether the associated popover is expanded or collapsed.
      */
@@ -22,6 +22,7 @@ export declare class PostPopoverTrigger {
      * Reference to the element inside the host that will act as the trigger.
      */
     private trigger;
+    private hasAriaControlsElements;
     private readonly boundHandleToggle;
     private readonly boundHandleKeyDown;
     private readonly boundHandlePostToggle;