@swisspost/design-system-components 9.0.0-next.9 → 10.0.0-next.37

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

@@ -1,24 +1,52 @@
-type DEVICE_SIZE = 'mobile' | 'tablet' | 'desktop' | null;
+import { EventEmitter } from '../../stencil-public-runtime';
+export type DEVICE_SIZE = 'mobile' | 'tablet' | 'desktop' | null;
+/**
+ * @slot post-logo - Should be used together with the `<post-logo>` component.
+ * @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.
+ * @slot title - Holds the application title.
+ * @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>`.
+ */
 export declare class PostHeader {
-    private scrollParent;
+    private firstFocusableEl;
+    private lastFocusableEl;
     private mobileMenu;
     private mobileMenuAnimation;
-    private throttledScroll;
-    private throttledResize;
-    componentWillRender(): void;
+    private readonly throttledResize;
+    private scrollParentResizeObserver;
+    private localHeaderResizeObserver;
+    get scrollParent(): HTMLElement;
     host: HTMLPostHeaderElement;
     device: DEVICE_SIZE;
     mobileMenuExtended: boolean;
-    frozeBody(isMobileMenuExtended: boolean): void;
+    megadropdownOpen: boolean;
+    lockBody(newValue: boolean | string, _oldValue: boolean | string, propName: string): void;
+    /**
+     * An event emitted when the device has changed
+     */
+    postUpdateDevice: EventEmitter<DEVICE_SIZE>;
+    constructor();
+    connectedCallback(): void;
+    componentWillRender(): void;
+    componentDidRender(): void;
+    disconnectedCallback(): void;
     /**
      * Toggles the mobile navigation.
      */
-    toggleMobileMenu(): Promise<void>;
+    toggleMobileMenu(force?: boolean): Promise<void>;
+    private megedropdownStateHandler;
+    private getFocusableElements;
+    private keyboardHandler;
     private handleScrollEvent;
-    private getScrollParent;
-    private isScrollable;
+    private updateLocalHeaderHeight;
+    private updateScrollParentHeight;
+    private handleLinkClick;
     private handleResize;
+    private handleScrollParentResize;
+    private handleLocalHeaderResize;
     private switchLanguageSwitchMode;
+    private renderNavigation;
     render(): any;
 }
-export {};

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

@@ -14,33 +14,37 @@ export declare class PostIcon {
      * The base path, where the icons are located (must be a public url).<br/>Leave this field empty to use the default cdn url.
      */
     readonly base?: string | null;
-    validateBase(newValue?: string): void;
+    validateBase(): void;
     /**
      * When set to `true`, the icon will be flipped horizontally.
      */
     readonly flipH?: boolean;
-    validateFlipH(newValue?: boolean): void;
+    validateFlipH(): void;
     /**
      * When set to `true`, the icon will be flipped vertically.
      */
     readonly flipV?: boolean;
-    validateFlipV(newValue?: boolean): void;
+    validateFlipV(): void;
     /**
      * The name/id of the icon (e.g. 1000, 1001, ...).
      */
     readonly name: string;
-    validateName(newValue?: string): void;
+    validateName(): void;
     /**
      * The number of degree for the css rotate transformation.
      */
     readonly rotate?: number | null;
-    validateRotate(newValue?: number): void;
+    validateRotate(): void;
     /**
      * The number for the css scale transformation.
      */
     readonly scale?: number | null;
-    validateScale(newValue?: number): void;
-    private getPath;
+    validateScale(): void;
+    private getUrl;
+    private getUrlDefinition;
+    private getUrlObject;
+    private definesDomain;
+    private definesSlug;
     private getStyles;
     componentDidLoad(): void;
     render(): any;

package/dist/types/components/post-language-option/post-language-option.d.ts

@@ -9,32 +9,36 @@ export declare class PostLanguageOption {
      *  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".
      */
     code: string;
-    validateCode(value?: string): void;
+    validateCode(): void;
     /**
      * If set to `true`, the language option is considered the current language for the page.
      */
     active: boolean;
-    validateActiveProp(value?: boolean): void;
+    validateActiveProp(): void;
     /**
-     * The variant of the post-language-switch parent (dynamically set by the parent)
+     * 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.
      */
     variant?: SwitchVariant | null;
     /**
      * The full name of the language. For example, "Deutsch".
      */
     name: string;
-    validateName(value?: string): void;
+    validateName(): void;
     /**
      * The URL used for the href attribute of the internal anchor.
      * This field is optional; if not provided, a button will be used internally instead of an anchor.
      */
     url: string;
-    validateUrl(value?: string): void;
+    validateUrl(): void;
     componentDidLoad(): void;
     /**
      * An event emitted when the language option is clicked. The payload is the ISO 639 code of the language.
      */
     postChange: EventEmitter<string>;
+    /**
+     * An event emitted when the language option is initially active. The payload is the ISO 639 code of the language.
+     */
+    postLanguageOptionInitiallyActive: EventEmitter<string>;
     /**
      * Selects the language option programmatically.
      */

package/dist/types/components/post-language-switch/post-language-switch.d.ts

@@ -1,30 +1,38 @@
 import { SwitchVariant } from './switch-variants';
 export declare class PostLanguageSwitch {
+    private readonly menuId;
+    private get languageOptions();
     host: HTMLPostLanguageSwitchElement;
     /**
      * A title for the list of language options
      */
     caption: string;
-    validateCaption(value?: string): void;
+    validateCaption(): void;
     /**
      * A descriptive text for the list of language options
      */
     description: string;
-    validateDescription(value?: string): void;
+    validateDescription(): void;
     /**
-     * Variant that determines the rendering of the language switch either as a list (used on mobile in the header) or a dropdown (used on desktop in the header)
+     * Whether the component is rendered as a list or a menu
      */
     variant: SwitchVariant;
-    validateVariant(value?: "list" | "dropdown"): void;
+    validateVariant(): void;
     /**
      * The active language of the language switch
      */
     activeLang: string;
-    connectedCallback(): void;
-    private updateChildrenVariant;
-    componentShouldUpdate(): void;
     componentDidLoad(): void;
-    private menuId;
+    /**
+     * Listen for the postChange event and guard it to run only for events originating from a <post-language-option> 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>
+     */
+    handleInitiallyActive(event: CustomEvent<string>): void;
+    private updateChildrenVariant;
     private renderList;
     private renderDropdown;
     render(): any;

package/dist/types/components/post-language-switch/switch-variants.d.ts

@@ -1,2 +1,2 @@
-export declare const SWITCH_VARIANTS: readonly ["list", "dropdown"];
+export declare const SWITCH_VARIANTS: readonly ["list", "menu"];
 export type SwitchVariant = (typeof SWITCH_VARIANTS)[number];

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

@@ -0,0 +1,5 @@
+export declare class PostLinkarea {
+    host: HTMLPostLinkareaElement;
+    private dispatchClick;
+    render(): any;
+}

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

@@ -1,19 +1,46 @@
-import { EventEmitter } from '../../stencil-public-runtime';
 export declare class PostMainnavigation {
-    private header;
-    host: HTMLPostMainnavigationElement;
+    private navbar;
+    private scrollRepeatInterval;
+    private navbarDisableTimer;
+    private resizeObserver;
+    private mutationObserver;
+    canScrollLeft: boolean;
+    canScrollRight: boolean;
+    constructor();
+    componentDidLoad(): void;
     /**
-     * Gets emitted when a user closes the main navigation on mobile
+     * Disconnects observers and remove event listeners when the main navigation is removed from the DOM.
      */
-    postToggle: EventEmitter;
+    disconnectedCallback(): void;
     /**
-     * Retrieves a reference to the closest 'post-header' element when the main navigation is added to the DOM.
+     * Stops the repeated scrolling when the mouse button is released.
      */
-    connectedCallback(): void;
+    stopScrolling(): void;
+    private handleMutations;
+    private get navigationItems();
     /**
-     * Cleans up references and disconnects the MutationObserver when the main navigation is removed from the DOM.
+     * Hack to fix the layout shift due to bold text on active elements
      */
-    disconnectedCallback(): void;
+    private fixLayoutShift;
     private handleBackButtonClick;
+    /**
+     * Returns whether scrolling is enabled in either the left or right direction.
+     */
+    private get canScroll();
+    /**
+     * Checks if scrolling is possible in either direction (left or right) and updates the state accordingly.
+     */
+    private checkScrollability;
+    /**
+     * Handles the scrolling behavior when a user clicks on the left or right scroll buttons.
+     */
+    private handleScrollButtonClick;
+    private scrollRight;
+    private scrollLeft;
+    /**
+     * Temporarily disables interactions with the navbar during scrolling to prevent accidental clicks.
+     * Re-enables interactions after a brief delay to avoid blocking the user entirely.
+     */
+    private temporarilyDisableNavbar;
     render(): any;
 }

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

@@ -1,35 +1,59 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export declare class PostMegadropdown {
-    private popoverRef;
+    private firstFocusableEl;
+    private lastFocusableEl;
+    device: string;
     host: HTMLPostMegadropdownElement;
+    /** Tracks the currently active dropdown instance. */
+    private static activeDropdown;
+    private breakpointChange;
     /**
      * Holds the current visibility state of the dropdown.
      * This state is internally managed to track whether the dropdown is open (`true`) or closed (`false`),
      * and updates automatically when the dropdown is toggled.
      */
     isVisible: boolean;
+    /** Holds the current animation class. */
     animationClass: string | null;
     /**
      * Emits when the dropdown is shown or hidden.
-     * The event payload is a boolean: `true` when the dropdown was opened, `false` when it was closed.
+     * The event payload is an object.
+     * `isVisible` is true when the dropdown gets opened and false when it gets closed
+     * `focusParent` determines whether after the closing of the mega dropdown, the focus should go back to the trigger parent or naturally go to the next focusable element in the page
      **/
-    postToggleMegadropdown: EventEmitter<boolean>;
-    componentDidLoad(): void;
+    postToggleMegadropdown: EventEmitter<{
+        isVisible: boolean;
+        focusParent?: boolean;
+    }>;
+    disconnectedCallback(): void;
+    componentWillRender(): void;
     /**
      * Toggles the dropdown visibility based on its current state.
      */
-    toggle(target: HTMLElement): Promise<void>;
+    toggle(): Promise<void>;
     /**
-     * Displays the popover dropdown
-     *
-     * @param target - The HTML element relative to which the popover dropdown should be displayed.
+     * Displays the dropdown.
      */
-    show(target: HTMLElement): Promise<void>;
+    show(): Promise<void>;
     /**
-     * Hides the popover dropdown
+     * Hides the dropdown with an animation.
      */
-    private hide;
-    private handleBackButtonClick;
-    private handleCloseButtonClick;
+    hide(focusParent?: boolean, forceClose?: boolean): Promise<void>;
+    /**
+     * Sets focus to the first focusable element within the component.
+     */
+    focusFirst(): Promise<void>;
+    connectedCallback(): void;
+    /**
+     * Forces the dropdown to close without animation.
+     */
+    private forceClose;
+    private handleAnimationEnd;
+    private handleClickOutside;
+    private addListeners;
+    private removeListeners;
+    private getFocusableElements;
+    private keyboardHandler;
+    private handleTabOutside;
     render(): any;
 }

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

@@ -13,13 +13,21 @@ export declare class PostMegadropdownTrigger {
      * Used to manage click and key events for mega dropdown control.
      */
     private slottedButton;
+    /**
+     * 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.
      */
-    validateControlFor(forValue?: string): void;
+    validateControlFor(): void;
     private get megadropdown();
     private handleToggle;
+    private handleKeyDown;
+    private handleToggleMegadropdown;
     componentDidLoad(): void;
+    disconnectedCallback(): void;
     render(): any;
 }

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

@@ -6,9 +6,9 @@ export declare class PostMenu {
     private readonly KEYCODES;
     host: HTMLPostMenuElement;
     /**
-     * Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement.
-     * Tooltips 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.
+     * 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).
      */
     readonly placement?: Placement;
     /**
@@ -41,6 +41,7 @@ export declare class PostMenu {
      */
     hide(): Promise<void>;
     private handleKeyDown;
+    private handlePostToggle;
     private handleClick;
     private controlKeyDownHandler;
     private getSlottedItems;

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

@@ -1,4 +1,3 @@
 export declare class PostMenuItem {
-    host: HTMLPostMenuItemElement;
     render(): any;
 }

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

@@ -13,15 +13,16 @@ export declare class PostMenuTrigger {
      * Used to manage click and key events for menu control.
      */
     private slottedButton;
-    private root?;
+    private root;
     /**
      * 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.
      */
-    validateControlFor(forValue?: string): void;
+    validateControlFor(): void;
     private get menu();
     private handleToggle;
-    private handleKeyDown;
+    private readonly handleKeyDown;
+    connectedCallback(): void;
     componentDidLoad(): void;
     render(): any;
 }

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

@@ -1,12 +1,13 @@
 import { Placement } from '@floating-ui/dom';
 export declare class PostPopover {
     private popoverRef;
-    private localBeforeToggleHandler;
+    private readonly localBeforeToggleHandler;
+    private readonly triggerObserver;
     host: HTMLPostPopoverElement;
     /**
-     * Defines the placement of the popover according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement.
-     * Popoverss 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.
+     * Defines the position of the popover relative to its trigger.
+     * Popovers 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).
      */
     readonly placement?: Placement;
     /**
@@ -38,5 +39,6 @@ export declare class PostPopover {
     toggle(target: HTMLElement, force?: boolean): Promise<void>;
     private get triggers();
     private beforeToggleHandler;
+    private patchAccessibilityFeatures;
     render(): any;
 }

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

@@ -1,6 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { Placement } from '@floating-ui/dom';
-import '@oddbird/popover-polyfill';
 interface PopoverElement {
     showPopover: () => void;
     hidePopover: () => void;
@@ -11,59 +10,86 @@ export type PostPopoverElement = HTMLElement & PopoverElement;
  * @slot - Default slot for placing content inside the popovercontainer.
  */
 export declare class PostPopovercontainer {
+    private static readonly STATIC_SIDES;
+    private static readonly PROPERTIES_TO_CLEAR;
     host: HTMLPostPopovercontainerElement;
     private arrowRef;
     private eventTarget;
     private clearAutoUpdate;
     private toggleTimeoutId;
     /**
-     * Fires whenever the popover gets shown or hidden, passing the new state in event.details as a boolean
+     * Fires whenever the popovercontainer gets shown or hidden, passing the new state in event.details as a boolean
      */
     postToggle: EventEmitter<boolean>;
     /**
-     * Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement.
-     * Tooltips are automatically flipped to the opposite side if there is not enough available space and are shifted
+     * Defines the placement of the popovercontainer according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement.
+     * Popovercontainers 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.
      */
     readonly placement?: Placement;
     /**
-     * Gap between the edge of the page and the popover
+     * Gap between the edge of the page and the popovercontainer
      */
     readonly edgeGap?: number;
     /**
-     * Wheter or not to display a little pointer arrow
+     * Animation style
+     */
+    readonly animation?: 'pop-in' | null;
+    /**
+     * Whether or not to display a little pointer arrow
      */
     readonly arrow?: boolean;
+    /**
+     * Whether or not the popovercontainer should close when user clicks outside of it
+     */
+    manualClose: boolean;
+    /**
+     * Enables a safespace through which the cursor can be moved without the popover being disabled
+     */
+    readonly safeSpace?: 'triangle' | 'trapezoid';
+    /**
+     * Updates cursor position for safe space feature when popover is open.
+     * Sets CSS custom properties for dynamic styling of safe area.
+     * @param event MouseEvent with cursor position
+     */
+    private mouseTrackingHandler;
+    connectedCallback(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;
     /**
-     * Programmatically display the tooltip
-     * @param target An element with [data-tooltip-target="id"] where the tooltip should be shown
+     * Programmatically display the popovercontainer
+     * @param target An element with [data-popover-target="id"] where the popovercontainer should be shown
      */
     show(target: HTMLElement): Promise<void>;
     /**
-     * Programmatically hide this tooltip
+     * Programmatically hide the popovercontainer
      */
     hide(): Promise<void>;
     /**
-     * Toggle tooltip display
-     * @param target An element with [data-tooltip-target="id"] where the tooltip should be shown
+     * Toggle popovercontainer display
+     * @param target An element with [data-popover-target="id"] where the popovercontainer should be shown
      * @param force Pass true to always show or false to always hide
      */
     toggle(target: HTMLElement, force?: boolean): Promise<boolean>;
     /**
-     * Start or stop auto updates based on tooltip events.
-     * Tooltips can be closed or opened with other methods than class members,
+     * Start or stop auto updates based on popovercontainer events.
+     * Popovercontainers can be closed or opened with other methods than class members,
      * therefore listening to the toggle event is safer for cleaning up.
      * @param e ToggleEvent
      */
     private handleToggle;
     /**
      * Start listening for DOM updates, scroll events etc. that have
-     * an influence on tooltip positioning
+     * an influence on popovercontainer positioning
      */
     private startAutoupdates;
+    /**
+     * Retrieves the dynamic height of the header
+     */
+    private getHeaderHeight;
     private calculatePosition;
+    private computeMainPosition;
+    private updateSafeSpaceBoundaries;
     render(): any;
 }
 export {};

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

@@ -8,7 +8,7 @@ export declare class PostTabHeader {
      * The name of the panel controlled by the tab header.
      */
     readonly panel: HTMLPostTabPanelElement['name'];
-    validateFor(newValue: HTMLPostTabPanelElement['name']): void;
+    validateFor(): void;
     componentWillLoad(): void;
     render(): any;
 }

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

@@ -23,7 +23,7 @@ export declare class PostTabs {
      * An event emitted after the active tab changes, when the fade in transition of its associated panel is finished.
      * The payload is the name of the newly shown panel.
      */
-    postChange: EventEmitter<HTMLPostTabPanelElement['name']>;
+    postChange: EventEmitter<string>;
     componentDidLoad(): void;
     /**
      * Shows the panel with the given name and selects its associated tab.

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

@@ -15,7 +15,7 @@ export declare class PostTag {
     /**
      * Defines the icon `name` inside of the component.
      * <span className="banner banner-sm banner-info">If not set the icon will not show up.</span>
-     * To learn which icons are available, please visit our <a href="/?path=/docs/5704bdc4-c5b5-45e6-b123-c54d01fce2f1--docs">icon library</a>.
+     * To learn which icons are available, please visit our <a href="/?path=/docs/0dcfe3c0-bfc0-4107-b43b-7e9d825b805f--docs">icon library</a>.
      */
     readonly icon: null | string;
     constructor();

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

@@ -7,7 +7,7 @@ export declare class PostTogglebutton {
      * If `true`, the button is in the "on" state, otherwise it is in the "off" state.
      */
     toggled: boolean;
-    validateToggled(value?: boolean): void;
+    validateToggled(): void;
     componentWillLoad(): void;
     private handleClick;
     private handleKeydown;