@swisspost/design-system-components 10.0.0-next.70 → 10.0.0-next.72

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

@@ -1,44 +1,38 @@
-type BreadcrumbItem = {
-    url: string | undefined;
-    text: string;
-    description: string | undefined;
-    label: string | undefined;
-};
 export declare class PostBreadcrumbs {
+    private mutationObserver;
+    private resizeObserver;
     host: HTMLPostBreadcrumbsElement;
+    shouldRenderMenu: boolean;
+    id: string;
     /**
-     * The URL for the home breadcrumb item.
+     * The URL for the root (home) breadcrumb item.
      */
     homeUrl: string;
     /**
-     * The text label for the home breadcrumb item.
+     * An accessible label for the root (home) breadcrumb item.
      */
     textHome: string;
     /**
-     * The accessible label for the breadcrumb component.
+     * An accessible label for the breadcrumb navigation.
      */
     textBreadcrumbs: string;
     /**
-     * The accessible label for the breadcrumb menu when breadcrumb items are concatenated.
+     * An accessible label for the overflow menu that contains collapsed breadcrumb items.
      */
     textMoreItems: string;
-    breadcrumbItems: BreadcrumbItem[];
-    isConcatenated: boolean;
-    lastWindowWidth: number;
-    private breadcrumbsNavRef?;
-    private lastItem;
-    validateHomeUrl(): void;
-    validateTextHome(): void;
-    validateTextBreadcrumbs(): void;
-    validateTextMoreItems(): void;
+    componentWillLoad(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;
-    private waitForBreadcrumbsRef;
-    private updateBreadcrumbItems;
-    private handleResize;
-    private getParentWidth;
-    private checkConcatenation;
-    private handleBreadcrumbItemClick;
+    private createMutationObserver;
+    private createResizeObserver;
+    /**
+     * To measure overflow, we duplicate the entire breadcrumb so an inline version is always available.
+     */
+    private duplicateNavElement;
+    private duplicateSlottedElements;
+    private checkOverflow;
+    private prepareBreadcrumbItemsForClone;
+    private updateBreadcrumbItemProps;
+    private renderMenu;
     render(): any;
 }
-export {};

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

@@ -9,17 +9,14 @@ export declare class PostClosebutton {
      * The "type" attribute used for the close button
      */
     buttonType?: ButtonType;
-    validateButtonType(): void;
     /**
      * Defines whether the close button is positioned automatically by the component or left unpositioned for manual styling.
      */
     placement: Placement;
-    validatePlacement(): void;
     /**
      * The size of the close button.
      */
     size: Size;
-    validateSize(): void;
     componentDidLoad(): void;
     connectedCallback(): void;
     disconnectedCallback(): void;

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

@@ -8,7 +8,6 @@ export declare class PostCollapsible {
      * If `true`, the element is collapsed otherwise it is displayed.
      */
     collapsed?: boolean;
-    collapsedChange(): void;
     /**
      * An event emitted when the collapse element is shown or hidden, before the transition.
      *
@@ -24,7 +23,7 @@ export declare class PostCollapsible {
      */
     toggle(shouldExpand?: boolean): Promise<boolean>;
     /**
-     * Update all post-collapsible-trigger elements referring to the collapsible
+     * Update all post-collapsible-trigger elements referring to or wrapping the collapsible
      */
     private updateTriggers;
     render(): any;

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

@@ -4,13 +4,10 @@ export declare class PostCollapsibleTrigger {
     private root?;
     host: HTMLPostCollapsibleTriggerElement;
     /**
-     * Link the trigger to a post-collapsible with this id
+     * Link the trigger to a post-collapsible by its ID.
+     * If omitted, a post-collapsible nested directly inside this element is used instead.
      */
-    for: string;
-    /**
-     * Set the "aria-controls" and "aria-expanded" attributes on the trigger to match the state of the controlled post-collapsible
-     */
-    validateAriaAttributes(): void;
+    for?: string;
     constructor();
     /**
      * Initiate a mutation observer that updates the trigger whenever necessary

package/dist/types/components/post-date-picker/post-date-picker.d.ts

@@ -28,23 +28,19 @@ export declare class PostDatePicker {
      * Must be a valid date in ISO 8601 format (YYYY-MM-DD).
      */
     selectedStartDate?: string;
-    validateSelectedStartDate(): void;
     /**
      * The date picker's selected end date (for range date picker only).
      * Must be a valid date in ISO 8601 format (YYYY-MM-DD).
      */
     selectedEndDate?: string;
-    validateSelectedEndDate(): void;
     /**
      * Minimun possible date to select. Must be a valid date in ISO 8601 format (YYYY-MM-DD).
      */
     min?: string;
-    validateMin(): void;
     /**
      * Maximum possible date to select. Must be a valid date in ISO 8601 format (YYYY-MM-DD).
      */
     max?: string;
-    validateMax(): void;
     /**
      * Used to extend the existing on render cell to disable dates.
      */
@@ -58,43 +54,35 @@ export declare class PostDatePicker {
      * Label for "Next month" button.
      */
     textNextMonth: string;
-    validateTextNextMonth(): void;
     /**
      * Label for "Next year" button.
      */
     textNextYear: string;
-    validateTextNextYear(): void;
     /**
      * Label for "Next decade" button.
      */
     textNextDecade: string;
-    validateTextNextDecade(): void;
     /**
      * Label for "Previous month" button.
      */
     textPreviousMonth: string;
-    validateTextPreviousMonth(): void;
     /**
      * Label for "Previous year" button.
      */
     textPreviousYear: string;
-    validateTextPreviousYear(): void;
     /**
      * Label for "Previous decade" button.
      */
     textPreviousDecade: string;
-    validateTextPreviousDecade(): void;
     /**
      * Label for the "Switch to year view" title button.
      */
     textSwitchYear: string;
-    validateTextSwitchYear(): void;
     /**
      * Label for the toggle button that opens the calendar.
      * It is only needed when the calendar is connected to the input.
      */
     textToggleCalendar?: string;
-    validateTextToggleCalendar(): void;
     inputDisabled: boolean;
     today: Date;
     startDate: Date;

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

@@ -17,7 +17,6 @@ export declare class PostFooter {
     readonly textFooter: string;
     device: Device;
     gridSlotDisplayed: Record<string, boolean>;
-    validateTextFooter(): void;
     constructor();
     connectedCallback(): void;
     componentWillLoad(): void;

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

@@ -35,12 +35,10 @@ export declare class PostHeader {
      * 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;

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

@@ -8,12 +8,10 @@ export declare class PostIcon {
      * The name of the animation.
      */
     readonly animation?: PostIconAnimation;
-    validateAnimation(): void;
     /**
      * 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;
-    validateBase(): void;
     /**
      * A full URL to the icon file. When set, this property has the highest priority.
      */
@@ -30,17 +28,14 @@ export declare class PostIcon {
      * The name/id of the icon (e.g. 1000, 1001, ...).
      */
     readonly name: string;
-    validateName(): void;
     /**
      * The number of degree for the css rotate transformation.
      */
     readonly rotate?: number;
-    validateRotate(): void;
     /**
      * The number for the css scale transformation.
      */
     readonly scale?: number;
-    validateScale(): void;
     /**
      * Construct the icon URL according to the following rules:
      * 1. `@base` (absolute URL) → use directly.
@@ -54,6 +49,5 @@ export declare class PostIcon {
      **/
     private getUrl;
     private getStyles;
-    componentDidLoad(): void;
     render(): any;
 }

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

@@ -9,17 +9,15 @@ export declare class PostLanguageMenu {
      * A title for the list of language options
      */
     textChangeLanguage: string;
-    validateTextChangeLanguage(): void;
     /**
      * An accessible description text for the list of language options. The `#name` placeholder is dynamic and will be replaced with the active language name.
      */
     textCurrentLanguage: string;
-    validateTextCurrentLanguage(): void;
     /**
      * Whether the component is rendered as a list or a menu
      */
     variant: SwitchVariant;
-    validateVariant(): void;
+    handleVariantChange(): void;
     /**
      * The active language code of the language menu
      */

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

@@ -9,7 +9,6 @@ export declare class PostLanguageMenuItem {
      *  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(): void;
     /**
      * If set to `true`, the language option is considered the current language for the page.
      */
@@ -18,23 +17,19 @@ export declare class PostLanguageMenuItem {
      * 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;
     /**
      * The full name of the language. For example, "Deutsch".
      */
     name?: string;
-    validateName(): void;
     /**
      * A description for the language read by screen-readers for improved accessibility.
      */
     description?: string;
-    validateDescription(): 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(): void;
     componentDidLoad(): void;
     /**
      * An event emitted when the language option is clicked. The payload is the ISO 639 code of the language.

package/dist/types/components/post-login-widget/post-login-widget.d.ts

@@ -1,9 +1,10 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 /**
- * @slot authenticated - Content rendered when the user is authenticated (e.g. user menu).
- * @slot unauthenticated - Content rendered when the user is not authenticated (e.g. login link).
+ * @slot user-links - Links to show in the user menu when the user is authenticated.
+ * @slot login-link - Content rendered when the user is not authenticated.
  */
 export declare class PostLoginWidget {
+    host: HTMLPostLoginWidgetElement;
     /**
      * Emitted when the authentication state changes.
      * The event payload is an object with an `authenticated` property:
@@ -12,7 +13,21 @@ export declare class PostLoginWidget {
     postChange: EventEmitter<{
         authenticated: boolean;
     }>;
+    /**
+     * Label for the "Current user is {user}" accessibility description.
+     * Use `{user}` as a placeholder — it will be replaced with the current user's name at runtime.
+     */
+    textCurrentUser: string;
+    /**
+     * Accessible label for the dropdown menu
+     */
+    textUserMenu: string;
+    /**
+     * Hidden label for the user menu trigger button, for accessibility purposes. It should describe the purpose of the button (e.g. "Access user links").
+     */
+    textUserMenuTrigger: string;
     private authenticated;
+    private user;
     componentWillLoad(): Promise<void>;
     /**
      * Returns the current authentication state:

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

@@ -7,7 +7,6 @@ export declare class PostLogo {
      * The URL to which the user is redirected upon clicking the logo.
      */
     url?: string | URL;
-    validateUrl(): void;
     componentDidLoad(): void;
     private checkDescription;
     render(): any;

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

@@ -11,7 +11,6 @@ export declare class PostMainnavigation {
      * 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;
     /**

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

@@ -1,5 +1,5 @@
-import { EventEmitter } from '../../stencil-public-runtime';
 import { Device } from "../../utils/breakpoints";
+import { EventEmitter } from '../../stencil-public-runtime';
 export declare class PostMegadropdown {
     private firstFocusableEl;
     private lastFocusableEl;
@@ -15,12 +15,10 @@ export declare class PostMegadropdown {
      * 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.

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

@@ -12,9 +12,7 @@ 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;
-    validateFor(): void;
     componentWillRender(): void;
-    componentDidLoad(): void;
     disconnectedCallback(): void;
     onMegadropdownToggled(event: CustomEvent<{
         isVisible: boolean;

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

@@ -1,5 +1,5 @@
+import type { Placement } from '@floating-ui/dom';
 import { EventEmitter } from '../../stencil-public-runtime';
-import { Placement } from '@floating-ui/dom';
 /**
  * @part post-menu - The container element that holds the list of menu items.
  * @slot header - Holds the header part of the menu.
@@ -15,12 +15,10 @@ export declare class PostMenu {
      * For supported values and behavior details, see the [Floating UI placement documentation](https://floating-ui.com/docs/computePosition#placement).
      */
     readonly placement?: Placement;
-    validatePlacement(): void;
     /**
      * A descriptive label that clearly identifies the menu’s content so assistive technologies can convey its purpose.
      */
     readonly label: string;
-    validateLabel(): void;
     /**
      * Holds the current visibility state of the menu.
      * This state is internally managed to track whether the menu is open (`true`) or closed (`false`),
@@ -35,7 +33,6 @@ export declare class PostMenu {
     private root?;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    componentDidLoad(): void;
     /**
      * Toggles the menu visibility based on its current state.
      */

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

@@ -6,7 +6,6 @@ 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;
-    validateFor(): void;
     constructor();
     connectedCallback(): void;
     componentDidLoad(): void;

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

@@ -52,28 +52,11 @@ export declare class PostPagination {
     private loaded;
     private debouncedResize;
     private measurementTimeoutId;
-    validatePage(): void;
-    validatePageSize(): void;
-    validateCollectionSize(): void;
-    validateLabel(): void;
-    validateTextPrevious(): void;
-    validateTextNext(): void;
-    validateTextPage(): void;
-    validateTextFirst(): void;
-    validateTextLast(): 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
      */

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

@@ -11,17 +11,14 @@ export declare class PostPopover {
      * For supported values and behavior details, see the [Floating UI placement documentation](https://floating-ui.com/docs/computePosition#placement).
      */
     readonly placement?: Placement;
-    validatePlacement(): void;
     /**
      * Define the text of the close button for assistive technology
      */
     readonly textClose: string;
-    validateTextClose(): void;
     /**
      * Show a little indicator arrow
      */
     readonly arrow?: boolean;
-    componentDidLoad(): void;
     /**
      * Programmatically display the popover
      * @param target A focusable element inside the <post-popover-trigger> component that controls the popover

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

@@ -17,7 +17,6 @@ export declare class PostPopoverTrigger {
      * 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.
      */
-    validateFor(): void;
     /**
      * Reference to the element inside the host that will act as the trigger.
      */

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

@@ -76,9 +76,6 @@ export declare class PostPopovercontainer {
      * Enables a safespace through which the cursor can be moved without the popover being disabled
      */
     readonly safeSpace?: 'triangle' | 'trapezoid';
-    validatePlacement(): void;
-    validateEdgeGap(): void;
-    validateSafeSpace(): void;
     /**
      * Animation style
      */

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

@@ -0,0 +1,23 @@
+export declare class PostProgressbar {
+    host: HTMLPostProgressbarElement;
+    /**
+     * The minimum value of the progress bar.
+     * Must be a valid floating point number less than max.
+     */
+    min: number;
+    /**
+     * Describes how much work the task indicated by the progress element requires.
+     * Must be a valid floating point number greater than min.
+     */
+    max: number;
+    /**
+     * Specifies how much of the task has been completed.
+     * Must be a valid floating point number between min and max.
+     * If there is no value attribute, the progress bar is indeterminate; this indicates that an activity is ongoing with no indication of how long it is expected to take.
+     */
+    value?: number;
+    private getEffectiveMin;
+    private getEffectiveMax;
+    private getEffectiveValue;
+    render(): any;
+}

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

@@ -34,10 +34,6 @@ export declare class PostRating {
     postChange: EventEmitter<{
         value: number;
     }>;
-    validateLabel(): void;
-    validateStars(): void;
-    validateCurrentRating(): void;
-    componentWillLoad(): void;
     constructor();
     private update;
     private keydownHandler;

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

@@ -13,18 +13,15 @@ export declare class PostStepper {
      * "Current step" label for accessibility
      */
     textCurrentStep: string;
-    validateTextCurrentStep(): void;
     /**
      * "Completed step" label for accessibility
      */
     textCompletedStep: string;
-    validateTextCompletedStep(): void;
     /**
      * Label for the "Step {number}:" 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 current step, which is the next step the user has to complete.
      */
@@ -36,9 +33,9 @@ export declare class PostStepper {
      */
     selectedIndex?: number;
     validateSelectedIndex(): void;
+    updateActiveStepNumber(): void;
     componentDidLoad(): void;
     private checkIndexes;
-    private updateActiveStepNumber;
     private updateSteps;
     private updateMobileActiveStepVisibility;
     render(): any;

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

@@ -10,7 +10,6 @@ export declare class PostTabItem {
      * 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;

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

@@ -8,7 +8,6 @@ export declare class PostTabPanel {
      * The name of the tab that this panel is associated with.
      */
     readonly for: string;
-    validateFor(): void;
     componentWillLoad(): void;
     render(): any;
 }

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

@@ -1,4 +1,4 @@
-import { Placement } from '@floating-ui/dom';
+import type { Placement } from '@floating-ui/dom';
 export declare class PostTooltip {
     private popoverRef;
     host: HTMLPostTooltipElement;
@@ -8,7 +8,6 @@ export declare class PostTooltip {
      * For supported values and behavior details, see the [Floating UI placement documentation](https://floating-ui.com/docs/computePosition#placement).
      */
     readonly placement?: Placement;
-    validatePlacement(): void;
     /**
      * Whether or not to display a little pointer arrow
      */
@@ -17,7 +16,6 @@ export declare class PostTooltip {
      * Indicates the open state of the tooltip
      */
     open: boolean;
-    componentWillLoad(): void;
     componentDidLoad(): void;
     /**
      * Programmatically display the tooltip.

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

@@ -25,8 +25,8 @@ export declare class PostTooltipTrigger {
     private boundTriggerHandler;
     private boundTooltipHandler;
     constructor();
-    validateControlFor(): void;
     private get tooltip();
+    componentWillLoad(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;
     private handleSlotChange;