@swisspost/design-system-components 10.0.0-next.54 → 10.0.0-next.56

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
      */

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;

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

@@ -64,10 +64,7 @@ export declare class PostPopovercontainer {
      * 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
      */
@@ -90,18 +87,6 @@ export declare class PostPopovercontainer {
      * @param target A focusable element inside the <post-popover-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 +97,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

@@ -0,0 +1,39 @@
+export declare class PostStepper {
+    host: HTMLPostStepperElement;
+    private stepItems;
+    /**
+     * Active step label is for visual purposes on mobile only
+     */
+    mobileActiveStepLabel: string;
+    /**
+     * Active step name is for visual purposes on mobile only
+     */
+    mobileActiveStepName: string;
+    /**
+     * "Current step" label for accessibility
+     */
+    textCurrentStep: string;
+    validateTextCurrentStep(): void;
+    /**
+     * "Completed step" label for accessibility
+     */
+    textCompletedStep: string;
+    validateTextCompletedStep(): void;
+    /**
+     * Label for the "Step N:" indicator for mobile view.
+     * Use `#number` as a placeholder — it will be replaced with the current step number at runtime.
+     */
+    textStepNumber: string;
+    validateTextStepNumber(): void;
+    /**
+     * Defines the currently active step
+     */
+    currentIndex: number;
+    validateCurrentIndex(): void;
+    connectedCallback(): void;
+    componentDidLoad(): void;
+    private updateActiveStepNumber;
+    private updateSteps;
+    private updateMobileActiveStepVisibility;
+    render(): any;
+}

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

@@ -0,0 +1,3 @@
+export declare class PostStepperItem {
+    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;