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

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

@@ -1,10 +1,15 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { Placement } from '@floating-ui/dom';
+import { popIn } from "../../animations/pop-in";
 interface PopoverElement {
     showPopover: () => void;
     hidePopover: () => void;
     togglePopover: (force?: boolean) => boolean;
 }
+declare const ANIMATIONS: {
+    readonly 'pop-in': typeof popIn;
+};
+export type AnimationName = keyof typeof ANIMATIONS;
 export type PostPopoverElement = HTMLElement & PopoverElement;
 /**
  * @slot - Default slot for placing content inside the popovercontainer.
@@ -56,18 +61,11 @@ export declare class PostPopovercontainer {
      * Gap between the edge of the page and the popovercontainer
      */
     readonly edgeGap?: number;
-    /**
-     * 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;
+    dynamicPlacement?: string;
     /**
      * Enables a safespace through which the cursor can be moved without the popover being disabled
      */
@@ -75,6 +73,10 @@ export declare class PostPopovercontainer {
     validatePlacement(): void;
     validateEdgeGap(): void;
     validateSafeSpace(): void;
+    /**
+     * Animation style
+     */
+    private readonly animation;
     /**
      * Updates cursor position for safe space feature when popover is open.
      * Sets CSS custom properties for dynamic styling of safe area.
@@ -87,21 +89,9 @@ export declare class PostPopovercontainer {
     disconnectedCallback(): void;
     /**
      * Programmatically display the popovercontainer
-     * @param target A focusable element inside the <post-popover-trigger> component that controls the popover
+     * @param target A focusable element inside the trigger component that controls the popover
      */
     show(target: HTMLElement): Promise<void>;
-    /**
-     * Handles the popover opening process and emits related events.
-     */
-    open(): Promise<void>;
-    /**
-     * Handles the popover closing process and emits related events.
-     */
-    close(): Promise<void>;
-    /**
-     * Runs the animation and emits the toggle/show/hide events in the correct timing
-     */
-    private runOpenAnimation;
     /**
      * Programmatically hide the popovercontainer
      */
@@ -112,6 +102,18 @@ export declare class PostPopovercontainer {
      * @param force Pass true to always show or false to always hide
      */
     toggle(target: HTMLElement, force?: boolean): Promise<boolean>;
+    /**
+     * Handles the popover opening process and emits related events.
+     */
+    private open;
+    /**
+     * Handles the popover closing process and emits related events.
+     */
+    private close;
+    /**
+     * Runs the animation and emits the toggle/show/hide events in the correct timing
+     */
+    private runOpenAnimation;
     /**
      * Start or stop auto updates based on popovercontainer events.
      * Popovercontainers can be closed or opened with other methods than class members,

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

@@ -4,7 +4,7 @@ export declare class PostRating {
     host: HTMLPostRatingElement;
     hoveredIndex: number;
     /**
-     * Defines a hidden label for the component.
+     * A hidden, descriptive label that explains the role of the rating component to assistive technologies.
      */
     readonly label: string;
     /**

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

@@ -12,26 +12,27 @@ export declare class PostStepper {
     /**
      * "Current step" label for accessibility
      */
-    currentLabel: string;
-    validateCurrentLabel(): void;
+    textCurrentStep: string;
+    validateTextCurrentStep(): void;
     /**
      * "Completed step" label for accessibility
      */
-    completedLabel: string;
-    validateCompletedLabel(): void;
+    textCompletedStep: string;
+    validateTextCompletedStep(): void;
     /**
      * Label for the "Step N:" indicator for mobile view.
-     * Use `#index` as a placeholder — it will be replaced with the current step number at runtime.
+     * Use `#number` as a placeholder — it will be replaced with the current step number at runtime.
      */
-    activeStepLabel: string;
-    validateActiveStepLabel(): void;
+    textStepNumber: string;
+    validateTextStepNumber(): void;
     /**
      * Defines the currently active step
      */
     currentIndex: number;
     validateCurrentIndex(): void;
+    connectedCallback(): void;
     componentDidLoad(): void;
-    private updateActiveStepLabel;
+    private updateActiveStepNumber;
     private updateSteps;
     private updateMobileActiveStepVisibility;
     render(): any;

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

@@ -0,0 +1,19 @@
+/**
+ * @slot default - Slot for the content of the tab item. Can contain text or an <a> element for navigation mode.
+ */
+export declare class PostTabItem {
+    private mutationObserver;
+    host: HTMLPostTabItemElement;
+    tabId: string;
+    isNavigationMode: boolean;
+    /**
+     * The name of the tab, used to associate it with a tab panel or identify the active tab in panel mode.
+     */
+    readonly name: string;
+    validateName(): void;
+    connectedCallback(): void;
+    componentWillLoad(): void;
+    disconnectedCallback(): void;
+    private checkNavigationMode;
+    render(): any;
+}

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

@@ -5,10 +5,10 @@ export declare class PostTabPanel {
     host: HTMLPostTabPanelElement;
     panelId: string;
     /**
-     * The name of the panel, used to associate it with a tab header.
+     * The name of the tab that this panel is associated with.
      */
-    readonly name: string;
-    validateName(): void;
+    readonly for: string;
+    validateFor(): void;
     componentWillLoad(): void;
     render(): any;
 }

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

@@ -1,41 +1,62 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 /**
- * @slot tabs - Slot for placing tab headers. Each tab header should be a <post-tab-header> element.
- * @slot default - Slot for placing tab panels. Each tab panel should be a <post-tab-panel> element.
- * @part tabs - The container element that holds the set of tabs.
- * @part content - The container element that displays the content of the currently active tab.
+ * @slot default - Slot for placing tab items. Each tab item should be a <post-tab-item> element.
+ * @slot panels - Slot for placing tab panels. Each tab panel should be a <post-tab-panel> element.
+ * @part post-tabs - The container element that holds the set of tabs.
+ * @part post-tabs-content - The container element that displays the content of the currently active tab. Only available in panels mode.
  */
 export declare class PostTabs {
-    private activeTab;
+    private currentActiveTab;
     private showing;
     private hiding;
     private isLoaded;
+    private contentObserver;
+    isNavigationMode: boolean;
     private get tabs();
+    private get panels();
     host: HTMLPostTabsElement;
     /**
-     * The name of the panel that is initially shown.
-     * If not specified, it defaults to the panel associated with the first tab.
-     *
-     * **Changing this value after initialization has no effect.**
+     * The name of the tab in the panel mode that is initially active.
+     * Changing this value after initialization has no effect.
+     * If not specified, defaults to the first tab.
      */
-    readonly activePanel?: HTMLPostTabPanelElement['name'];
+    readonly activeTab?: string;
     /**
      * When set to true, this property allows the tabs container to span the
+     * Changing this value after initialization has no effect.
      * full width of the screen, from edge to edge.
      */
     fullWidth: boolean;
+    /**
+     * The accessible label for the tabs component in navigation mode.
+     */
+    readonly label?: string;
+    validateLabel(): void;
     /**
      * 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.
+     * The payload is the name of the newly active tab.
+     * Only emitted in panel mode.
      */
     postChange: EventEmitter<string>;
+    componentWillRender(): void;
     componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private setupContentObserver;
+    private handleContentChange;
+    private shouldRedetectMode;
+    private hasAriaCurrentChanged;
+    private updateActiveNavigationTab;
+    private handleModeChange;
+    private initializeActiveTab;
+    private detectMode;
+    private findActiveNavigationTab;
     /**
      * Shows the panel with the given name and selects its associated tab.
      * Any other panel that was previously shown becomes hidden and its associated tab is unselected.
      */
-    show(panelName: string): Promise<void>;
+    show(tabName: string): Promise<void>;
     private moveMisplacedTabs;
+    private moveMisplacedPanels;
     private enableTabs;
     private activateTab;
     private hidePanel;

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

@@ -13,10 +13,6 @@ export declare class PostTooltip {
      * Whether or not to display a little pointer arrow
      */
     readonly arrow?: boolean;
-    /**
-     * Choose a tooltip animation
-     */
-    readonly animation?: 'pop-in';
     /**
      * Indicates the open state of the tooltip
      */
@@ -42,6 +38,6 @@ export declare class PostTooltip {
      * Set the open state based on the toggle event.
      * @param e Popovercontainer toggle event
      */
-    private handleToggle;
+    private handleBeforeToggle;
     render(): any;
 }