@swisspost/design-system-components 9.0.0-next.3 → 9.0.0-next.31

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

@@ -0,0 +1,59 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class PostMegadropdown {
+    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 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<{
+        isVisible: boolean;
+        focusParent?: boolean;
+    }>;
+    disconnectedCallback(): void;
+    componentWillRender(): void;
+    /**
+     * Toggles the dropdown visibility based on its current state.
+     */
+    toggle(): Promise<void>;
+    /**
+     * Displays the dropdown.
+     */
+    show(): Promise<void>;
+    /**
+     * Hides the dropdown with an animation.
+     */
+    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

@@ -0,0 +1,31 @@
+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;
+    /**
+     * 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.
+     */
+    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(): void;
+    private get megadropdown();
+    private handleToggle;
+    private handleKeyDown;
+    componentDidLoad(): void;
+    render(): any;
+}

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

@@ -0,0 +1,48 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { Placement } from '@floating-ui/dom';
+export declare class PostMenu {
+    private popoverRef;
+    private lastFocusedElement;
+    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.
+     */
+    readonly placement?: Placement;
+    /**
+     * Holds the current visibility state of the menu.
+     * This state is internally managed to track whether the menu is open (`true`) or closed (`false`),
+     * and updates automatically when the menu is toggled.
+     */
+    isVisible: boolean;
+    /**
+     * 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.
+     **/
+    toggleMenu: EventEmitter<boolean>;
+    private root?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    componentDidLoad(): void;
+    /**
+     * Toggles the menu visibility based on its current state.
+     */
+    toggle(target: HTMLElement): Promise<void>;
+    /**
+     * Displays the popover menu, focusing the first menu item.
+     *
+     * @param target - The HTML element relative to which the popover menu should be displayed.
+     */
+    show(target: HTMLElement): Promise<void>;
+    /**
+     * Hides the popover menu and restores focus to the previously focused element.
+     */
+    hide(): Promise<void>;
+    private handleKeyDown;
+    private handleClick;
+    private controlKeyDownHandler;
+    private getSlottedItems;
+    render(): any;
+}

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

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

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

@@ -0,0 +1,28 @@
+export declare class PostMenuTrigger {
+    /**
+     * ID of the menu element that this trigger is linked to. Used to open and close the specified menu.
+     */
+    for: string;
+    host: HTMLPostMenuTriggerElement;
+    /**
+     * Manages the accessibility attribute `aria-expanded` to indicate whether the associated menu is expanded or collapsed.
+     */
+    ariaExpanded: boolean;
+    /**
+     * Reference to the slotted button within the trigger, if present.
+     * Used to manage click and key events for menu control.
+     */
+    private slottedButton;
+    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(): void;
+    private get menu();
+    private handleToggle;
+    private handleKeyDown;
+    connectedCallback(): void;
+    componentDidLoad(): void;
+    render(): any;
+}

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

@@ -11,6 +11,8 @@ 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;
@@ -20,6 +22,10 @@ export declare class PostPopovercontainer {
      * Fires whenever the popover gets shown or hidden, passing the new state in event.details as a boolean
      */
     postToggle: EventEmitter<boolean>;
+    /**
+     * Whether or not the popover should close when user clicks outside of it
+     */
+    manualClose: 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
@@ -27,9 +33,23 @@ export declare class PostPopovercontainer {
      */
     readonly placement?: Placement;
     /**
-     * Wheter or not to display a little pointer arrow
+     * Gap between the edge of the page and the popover
+     */
+    readonly edgeGap?: number;
+    /**
+     * Whether or not to display a little pointer arrow
      */
     readonly arrow?: 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;
     componentDidLoad(): void;
     disconnectedCallback(): void;
     /**
@@ -59,7 +79,13 @@ export declare class PostPopovercontainer {
      * an influence on tooltip 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

@@ -14,7 +14,7 @@ export declare class PostTag {
     readonly size: null | 'sm';
     /**
      * Defines the icon `name` inside of the component.
-     * <span className="alert alert-sm alert-info">If not set the icon will not show up.</span>
+     * <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>.
      */
     readonly icon: null | string;

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

@@ -0,0 +1,15 @@
+/**
+ * @slot default - Slot for the content of the button.
+ */
+export declare class PostTogglebutton {
+    host: HTMLPostTogglebuttonElement;
+    /**
+     * If `true`, the button is in the "on" state, otherwise it is in the "off" state.
+     */
+    toggled: boolean;
+    validateToggled(): void;
+    componentWillLoad(): void;
+    private handleClick;
+    private handleKeydown;
+    render(): any;
+}