@swisspost/design-system-components 10.0.0-next.71 → 10.0.0-next.75

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

@@ -1,4 +1,4 @@
-import type { Placement } from '@floating-ui/dom';
+import { Placement } from '@floating-ui/dom';
 /**
  * @slot default - Slot for placing content inside the popover.
  */
@@ -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-side-navigation/post-side-navigation.d.ts

@@ -0,0 +1,56 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { Device } from "../../utils/breakpoints";
+/**
+ * @slot default - Slot for the navigation content (must be a `<nav>` landmark with proper heading)
+ */
+export declare class PostSideNavigation {
+    host: HTMLPostSideNavigationElement;
+    device: Device;
+    /**
+     * Accessible label for the close button shown in the mobile navigation dialog.
+     */
+    textClose: string;
+    /**
+     * An event emitted when the navigation is shown or hidden on mobile.
+     * The payload is a boolean: `true` when the navigation opens, `false` when it closes.
+     */
+    postToggle: EventEmitter<boolean>;
+    private breakpointChange;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    get dialog(): HTMLDialogElement;
+    private get collapsibleTrigger();
+    private get collapsible();
+    /**
+     * Collapses the active disclosure on Escape; lets the native dialog handle it otherwise.
+     */
+    private handleKeyDown;
+    /**
+     * Toggles the navigation programmatically.
+     * No-op on desktop.
+     */
+    toggle(): Promise<void>;
+    /**
+     * Opens the navigation programmatically.
+     * No-op on desktop.
+     */
+    show(): Promise<void>;
+    /**
+     * Closes the navigation programmatically.
+     * No-op on desktop.
+     */
+    hide(): Promise<void>;
+    /**
+     * Move focus into the navigation when the dialog opens.
+     */
+    private focusNav;
+    /**
+     * Render inline navigation (desktop).
+     */
+    private renderNav;
+    /**
+     * Render modal navigation (mobile/tablet).
+     */
+    private renderDialog;
+    render(): any;
+}

package/dist/types/components/post-side-navigation-trigger/post-side-navigation-trigger.d.ts

@@ -0,0 +1,33 @@
+/**
+ * @slot default - Slot for the `<button>` that toggles the navigation.
+ */
+export declare class PostSideNavigationTrigger {
+    host: HTMLPostSideNavigationTriggerElement;
+    for: string;
+    private trigger?;
+    private root;
+    private readonly observer;
+    constructor();
+    connectedCallback(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    /**
+     * Retrieve the post-side-navigation controlled by the trigger.
+     */
+    private get sideNavigation();
+    /**
+     * Find the button, attach the click listener and the initial ARIA attributes.
+     */
+    private setTrigger;
+    private updateAriaAttributes;
+    /**
+     * Keep the trigger's `aria-expanded` in sync with the navigation state.
+     */
+    private handlePostToggle;
+    /**
+     * Manually update the trigger's ARIA attributes.
+     */
+    update(): Promise<void>;
+    private toggleSideNavigation;
+    render(): any;
+}

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

@@ -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,7 +25,6 @@ export declare class PostTooltipTrigger {
     private boundTriggerHandler;
     private boundTooltipHandler;
     constructor();
-    validateControlFor(): void;
     private get tooltip();
     componentWillLoad(): void;
     componentDidLoad(): void;

package/dist/types/components.d.ts

@@ -188,9 +188,9 @@ export namespace Components {
     }
     interface PostCollapsibleTrigger {
         /**
-          * 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;
+        "for"?: string;
         /**
           * Update the "aria-controls" and "aria-expanded" attributes on the trigger button
          */
@@ -538,6 +538,7 @@ export namespace Components {
         "label": string;
         /**
           * The current active page number.  **If not specified, defaults to the first page.**
+          * @default 1
          */
         "page"?: number;
         /**
@@ -642,6 +643,22 @@ export namespace Components {
          */
         "toggle": (target: HTMLElement, force?: boolean) => Promise<boolean>;
     }
+    interface PostProgressbar {
+        /**
+          * Describes how much work the task indicated by the progress element requires. Must be a valid floating point number greater than min.
+          * @default 100
+         */
+        "max": number;
+        /**
+          * The minimum value of the progress bar. Must be a valid floating point number less than max.
+          * @default 0
+         */
+        "min": 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;
+    }
     interface PostRating {
         /**
           * Defines the rating that the component should show.
@@ -663,6 +680,31 @@ export namespace Components {
          */
         "stars": number;
     }
+    interface PostSideNavigation {
+        /**
+          * Closes the navigation programmatically. No-op on desktop.
+         */
+        "hide": () => Promise<void>;
+        /**
+          * Opens the navigation programmatically. No-op on desktop.
+         */
+        "show": () => Promise<void>;
+        /**
+          * Accessible label for the close button shown in the mobile navigation dialog.
+         */
+        "textClose": string;
+        /**
+          * Toggles the navigation programmatically. No-op on desktop.
+         */
+        "toggle": () => Promise<void>;
+    }
+    interface PostSideNavigationTrigger {
+        "for": string;
+        /**
+          * Manually update the trigger's ARIA attributes.
+         */
+        "update": () => Promise<void>;
+    }
     interface PostStepper {
         /**
           * Defines the current step, which is the next step the user has to complete.
@@ -822,6 +864,10 @@ export interface PostRatingCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLPostRatingElement;
 }
+export interface PostSideNavigationCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLPostSideNavigationElement;
+}
 export interface PostTabsCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLPostTabsElement;
@@ -1165,6 +1211,12 @@ declare global {
         prototype: HTMLPostPopovercontainerElement;
         new (): HTMLPostPopovercontainerElement;
     };
+    interface HTMLPostProgressbarElement extends Components.PostProgressbar, HTMLStencilElement {
+    }
+    var HTMLPostProgressbarElement: {
+        prototype: HTMLPostProgressbarElement;
+        new (): HTMLPostProgressbarElement;
+    };
     interface HTMLPostRatingElementEventMap {
         "postInput": { value: number };
         "postChange": { value: number };
@@ -1183,6 +1235,29 @@ declare global {
         prototype: HTMLPostRatingElement;
         new (): HTMLPostRatingElement;
     };
+    interface HTMLPostSideNavigationElementEventMap {
+        "postToggle": boolean;
+    }
+    interface HTMLPostSideNavigationElement extends Components.PostSideNavigation, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLPostSideNavigationElementEventMap>(type: K, listener: (this: HTMLPostSideNavigationElement, ev: PostSideNavigationCustomEvent<HTMLPostSideNavigationElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLPostSideNavigationElementEventMap>(type: K, listener: (this: HTMLPostSideNavigationElement, ev: PostSideNavigationCustomEvent<HTMLPostSideNavigationElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLPostSideNavigationElement: {
+        prototype: HTMLPostSideNavigationElement;
+        new (): HTMLPostSideNavigationElement;
+    };
+    interface HTMLPostSideNavigationTriggerElement extends Components.PostSideNavigationTrigger, HTMLStencilElement {
+    }
+    var HTMLPostSideNavigationTriggerElement: {
+        prototype: HTMLPostSideNavigationTriggerElement;
+        new (): HTMLPostSideNavigationTriggerElement;
+    };
     interface HTMLPostStepperElement extends Components.PostStepper, HTMLStencilElement {
     }
     var HTMLPostStepperElement: {
@@ -1276,7 +1351,10 @@ declare global {
         "post-popover": HTMLPostPopoverElement;
         "post-popover-trigger": HTMLPostPopoverTriggerElement;
         "post-popovercontainer": HTMLPostPopovercontainerElement;
+        "post-progressbar": HTMLPostProgressbarElement;
         "post-rating": HTMLPostRatingElement;
+        "post-side-navigation": HTMLPostSideNavigationElement;
+        "post-side-navigation-trigger": HTMLPostSideNavigationTriggerElement;
         "post-stepper": HTMLPostStepperElement;
         "post-stepper-item": HTMLPostStepperItemElement;
         "post-tab-item": HTMLPostTabItemElement;
@@ -1420,6 +1498,18 @@ declare namespace LocalJSX {
           * @default 'button'
          */
         "buttonType"?: ButtonType;
+        /**
+          * If `true`, the user cannot interact with the element.
+         */
+        "disabled"?: boolean;
+        /**
+          * The `id` of a `<form>` element to associate this element with.
+         */
+        "form"?: string;
+        /**
+          * The name of the element, used when submitting an HTML form.
+         */
+        "name"?: string;
         /**
           * Defines whether the close button is positioned automatically by the component or left unpositioned for manual styling.
           * @default 'auto'
@@ -1444,9 +1534,9 @@ declare namespace LocalJSX {
     }
     interface PostCollapsibleTrigger {
         /**
-          * 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;
+        "for"?: string;
     }
     interface PostDatePicker {
         /**
@@ -1749,6 +1839,7 @@ declare namespace LocalJSX {
         "onPostChange"?: (event: PostPaginationCustomEvent<number>) => void;
         /**
           * The current active page number.  **If not specified, defaults to the first page.**
+          * @default 1
          */
         "page"?: number;
         /**
@@ -1843,6 +1934,22 @@ declare namespace LocalJSX {
          */
         "safeSpace"?: 'triangle' | 'trapezoid';
     }
+    interface PostProgressbar {
+        /**
+          * Describes how much work the task indicated by the progress element requires. Must be a valid floating point number greater than min.
+          * @default 100
+         */
+        "max"?: number;
+        /**
+          * The minimum value of the progress bar. Must be a valid floating point number less than max.
+          * @default 0
+         */
+        "min"?: 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;
+    }
     interface PostRating {
         /**
           * Defines the rating that the component should show.
@@ -1872,6 +1979,19 @@ declare namespace LocalJSX {
          */
         "stars"?: number;
     }
+    interface PostSideNavigation {
+        /**
+          * An event emitted when the navigation is shown or hidden on mobile. The payload is a boolean: `true` when the navigation opens, `false` when it closes.
+         */
+        "onPostToggle"?: (event: PostSideNavigationCustomEvent<boolean>) => void;
+        /**
+          * Accessible label for the close button shown in the mobile navigation dialog.
+         */
+        "textClose": string;
+    }
+    interface PostSideNavigationTrigger {
+        "for": string;
+    }
     interface PostStepper {
         /**
           * Defines the current step, which is the next step the user has to complete.
@@ -2118,12 +2238,23 @@ declare namespace LocalJSX {
         "arrow": boolean;
         "safeSpace": 'triangle' | 'trapezoid';
     }
+    interface PostProgressbarAttributes {
+        "min": number;
+        "max": number;
+        "value": number;
+    }
     interface PostRatingAttributes {
         "label": string;
         "stars": number;
         "currentRating": number;
         "readonly": boolean;
     }
+    interface PostSideNavigationAttributes {
+        "textClose": string;
+    }
+    interface PostSideNavigationTriggerAttributes {
+        "for": string;
+    }
     interface PostStepperAttributes {
         "textCurrentStep": string;
         "textCompletedStep": string;
@@ -2166,7 +2297,7 @@ declare namespace LocalJSX {
         "post-breadcrumbs": Omit<PostBreadcrumbs, keyof PostBreadcrumbsAttributes> & { [K in keyof PostBreadcrumbs & keyof PostBreadcrumbsAttributes]?: PostBreadcrumbs[K] } & { [K in keyof PostBreadcrumbs & keyof PostBreadcrumbsAttributes as `attr:${K}`]?: PostBreadcrumbsAttributes[K] } & { [K in keyof PostBreadcrumbs & keyof PostBreadcrumbsAttributes as `prop:${K}`]?: PostBreadcrumbs[K] } & OneOf<"homeUrl", PostBreadcrumbs["homeUrl"], PostBreadcrumbsAttributes["homeUrl"]> & OneOf<"textHome", PostBreadcrumbs["textHome"], PostBreadcrumbsAttributes["textHome"]> & OneOf<"textBreadcrumbs", PostBreadcrumbs["textBreadcrumbs"], PostBreadcrumbsAttributes["textBreadcrumbs"]> & OneOf<"textMoreItems", PostBreadcrumbs["textMoreItems"], PostBreadcrumbsAttributes["textMoreItems"]>;
         "post-closebutton": Omit<PostClosebutton, keyof PostClosebuttonAttributes> & { [K in keyof PostClosebutton & keyof PostClosebuttonAttributes]?: PostClosebutton[K] } & { [K in keyof PostClosebutton & keyof PostClosebuttonAttributes as `attr:${K}`]?: PostClosebuttonAttributes[K] } & { [K in keyof PostClosebutton & keyof PostClosebuttonAttributes as `prop:${K}`]?: PostClosebutton[K] };
         "post-collapsible": Omit<PostCollapsible, keyof PostCollapsibleAttributes> & { [K in keyof PostCollapsible & keyof PostCollapsibleAttributes]?: PostCollapsible[K] } & { [K in keyof PostCollapsible & keyof PostCollapsibleAttributes as `attr:${K}`]?: PostCollapsibleAttributes[K] } & { [K in keyof PostCollapsible & keyof PostCollapsibleAttributes as `prop:${K}`]?: PostCollapsible[K] };
-        "post-collapsible-trigger": Omit<PostCollapsibleTrigger, keyof PostCollapsibleTriggerAttributes> & { [K in keyof PostCollapsibleTrigger & keyof PostCollapsibleTriggerAttributes]?: PostCollapsibleTrigger[K] } & { [K in keyof PostCollapsibleTrigger & keyof PostCollapsibleTriggerAttributes as `attr:${K}`]?: PostCollapsibleTriggerAttributes[K] } & { [K in keyof PostCollapsibleTrigger & keyof PostCollapsibleTriggerAttributes as `prop:${K}`]?: PostCollapsibleTrigger[K] } & OneOf<"for", PostCollapsibleTrigger["for"], PostCollapsibleTriggerAttributes["for"]>;
+        "post-collapsible-trigger": Omit<PostCollapsibleTrigger, keyof PostCollapsibleTriggerAttributes> & { [K in keyof PostCollapsibleTrigger & keyof PostCollapsibleTriggerAttributes]?: PostCollapsibleTrigger[K] } & { [K in keyof PostCollapsibleTrigger & keyof PostCollapsibleTriggerAttributes as `attr:${K}`]?: PostCollapsibleTriggerAttributes[K] } & { [K in keyof PostCollapsibleTrigger & keyof PostCollapsibleTriggerAttributes as `prop:${K}`]?: PostCollapsibleTrigger[K] };
         "post-date-picker": Omit<PostDatePicker, keyof PostDatePickerAttributes> & { [K in keyof PostDatePicker & keyof PostDatePickerAttributes]?: PostDatePicker[K] } & { [K in keyof PostDatePicker & keyof PostDatePickerAttributes as `attr:${K}`]?: PostDatePickerAttributes[K] } & { [K in keyof PostDatePicker & keyof PostDatePickerAttributes as `prop:${K}`]?: PostDatePicker[K] } & OneOf<"textNextMonth", PostDatePicker["textNextMonth"], PostDatePickerAttributes["textNextMonth"]> & OneOf<"textNextYear", PostDatePicker["textNextYear"], PostDatePickerAttributes["textNextYear"]> & OneOf<"textNextDecade", PostDatePicker["textNextDecade"], PostDatePickerAttributes["textNextDecade"]> & OneOf<"textPreviousMonth", PostDatePicker["textPreviousMonth"], PostDatePickerAttributes["textPreviousMonth"]> & OneOf<"textPreviousYear", PostDatePicker["textPreviousYear"], PostDatePickerAttributes["textPreviousYear"]> & OneOf<"textPreviousDecade", PostDatePicker["textPreviousDecade"], PostDatePickerAttributes["textPreviousDecade"]> & OneOf<"textSwitchYear", PostDatePicker["textSwitchYear"], PostDatePickerAttributes["textSwitchYear"]>;
         "post-footer": Omit<PostFooter, keyof PostFooterAttributes> & { [K in keyof PostFooter & keyof PostFooterAttributes]?: PostFooter[K] } & { [K in keyof PostFooter & keyof PostFooterAttributes as `attr:${K}`]?: PostFooterAttributes[K] } & { [K in keyof PostFooter & keyof PostFooterAttributes as `prop:${K}`]?: PostFooter[K] } & OneOf<"textFooter", PostFooter["textFooter"], PostFooterAttributes["textFooter"]>;
         "post-header": Omit<PostHeader, keyof PostHeaderAttributes> & { [K in keyof PostHeader & keyof PostHeaderAttributes]?: PostHeader[K] } & { [K in keyof PostHeader & keyof PostHeaderAttributes as `attr:${K}`]?: PostHeaderAttributes[K] } & { [K in keyof PostHeader & keyof PostHeaderAttributes as `prop:${K}`]?: PostHeader[K] } & OneOf<"textMenu", PostHeader["textMenu"], PostHeaderAttributes["textMenu"]>;
@@ -2189,7 +2320,10 @@ declare namespace LocalJSX {
         "post-popover": Omit<PostPopover, keyof PostPopoverAttributes> & { [K in keyof PostPopover & keyof PostPopoverAttributes]?: PostPopover[K] } & { [K in keyof PostPopover & keyof PostPopoverAttributes as `attr:${K}`]?: PostPopoverAttributes[K] } & { [K in keyof PostPopover & keyof PostPopoverAttributes as `prop:${K}`]?: PostPopover[K] } & OneOf<"textClose", PostPopover["textClose"], PostPopoverAttributes["textClose"]>;
         "post-popover-trigger": Omit<PostPopoverTrigger, keyof PostPopoverTriggerAttributes> & { [K in keyof PostPopoverTrigger & keyof PostPopoverTriggerAttributes]?: PostPopoverTrigger[K] } & { [K in keyof PostPopoverTrigger & keyof PostPopoverTriggerAttributes as `attr:${K}`]?: PostPopoverTriggerAttributes[K] } & { [K in keyof PostPopoverTrigger & keyof PostPopoverTriggerAttributes as `prop:${K}`]?: PostPopoverTrigger[K] };
         "post-popovercontainer": Omit<PostPopovercontainer, keyof PostPopovercontainerAttributes> & { [K in keyof PostPopovercontainer & keyof PostPopovercontainerAttributes]?: PostPopovercontainer[K] } & { [K in keyof PostPopovercontainer & keyof PostPopovercontainerAttributes as `attr:${K}`]?: PostPopovercontainerAttributes[K] } & { [K in keyof PostPopovercontainer & keyof PostPopovercontainerAttributes as `prop:${K}`]?: PostPopovercontainer[K] };
+        "post-progressbar": Omit<PostProgressbar, keyof PostProgressbarAttributes> & { [K in keyof PostProgressbar & keyof PostProgressbarAttributes]?: PostProgressbar[K] } & { [K in keyof PostProgressbar & keyof PostProgressbarAttributes as `attr:${K}`]?: PostProgressbarAttributes[K] } & { [K in keyof PostProgressbar & keyof PostProgressbarAttributes as `prop:${K}`]?: PostProgressbar[K] };
         "post-rating": Omit<PostRating, keyof PostRatingAttributes> & { [K in keyof PostRating & keyof PostRatingAttributes]?: PostRating[K] } & { [K in keyof PostRating & keyof PostRatingAttributes as `attr:${K}`]?: PostRatingAttributes[K] } & { [K in keyof PostRating & keyof PostRatingAttributes as `prop:${K}`]?: PostRating[K] } & OneOf<"label", PostRating["label"], PostRatingAttributes["label"]>;
+        "post-side-navigation": Omit<PostSideNavigation, keyof PostSideNavigationAttributes> & { [K in keyof PostSideNavigation & keyof PostSideNavigationAttributes]?: PostSideNavigation[K] } & { [K in keyof PostSideNavigation & keyof PostSideNavigationAttributes as `attr:${K}`]?: PostSideNavigationAttributes[K] } & { [K in keyof PostSideNavigation & keyof PostSideNavigationAttributes as `prop:${K}`]?: PostSideNavigation[K] } & OneOf<"textClose", PostSideNavigation["textClose"], PostSideNavigationAttributes["textClose"]>;
+        "post-side-navigation-trigger": Omit<PostSideNavigationTrigger, keyof PostSideNavigationTriggerAttributes> & { [K in keyof PostSideNavigationTrigger & keyof PostSideNavigationTriggerAttributes]?: PostSideNavigationTrigger[K] } & { [K in keyof PostSideNavigationTrigger & keyof PostSideNavigationTriggerAttributes as `attr:${K}`]?: PostSideNavigationTriggerAttributes[K] } & { [K in keyof PostSideNavigationTrigger & keyof PostSideNavigationTriggerAttributes as `prop:${K}`]?: PostSideNavigationTrigger[K] } & OneOf<"for", PostSideNavigationTrigger["for"], PostSideNavigationTriggerAttributes["for"]>;
         "post-stepper": Omit<PostStepper, keyof PostStepperAttributes> & { [K in keyof PostStepper & keyof PostStepperAttributes]?: PostStepper[K] } & { [K in keyof PostStepper & keyof PostStepperAttributes as `attr:${K}`]?: PostStepperAttributes[K] } & { [K in keyof PostStepper & keyof PostStepperAttributes as `prop:${K}`]?: PostStepper[K] } & OneOf<"textCurrentStep", PostStepper["textCurrentStep"], PostStepperAttributes["textCurrentStep"]> & OneOf<"textCompletedStep", PostStepper["textCompletedStep"], PostStepperAttributes["textCompletedStep"]> & OneOf<"textStepNumber", PostStepper["textStepNumber"], PostStepperAttributes["textStepNumber"]>;
         "post-stepper-item": PostStepperItem;
         "post-tab-item": Omit<PostTabItem, keyof PostTabItemAttributes> & { [K in keyof PostTabItem & keyof PostTabItemAttributes]?: PostTabItem[K] } & { [K in keyof PostTabItem & keyof PostTabItemAttributes as `attr:${K}`]?: PostTabItemAttributes[K] } & { [K in keyof PostTabItem & keyof PostTabItemAttributes as `prop:${K}`]?: PostTabItem[K] } & OneOf<"name", PostTabItem["name"], PostTabItemAttributes["name"]>;
@@ -2240,7 +2374,10 @@ declare module "@stencil/core" {
             "post-popover": LocalJSX.IntrinsicElements["post-popover"] & JSXBase.HTMLAttributes<HTMLPostPopoverElement>;
             "post-popover-trigger": LocalJSX.IntrinsicElements["post-popover-trigger"] & JSXBase.HTMLAttributes<HTMLPostPopoverTriggerElement>;
             "post-popovercontainer": LocalJSX.IntrinsicElements["post-popovercontainer"] & JSXBase.HTMLAttributes<HTMLPostPopovercontainerElement>;
+            "post-progressbar": LocalJSX.IntrinsicElements["post-progressbar"] & JSXBase.HTMLAttributes<HTMLPostProgressbarElement>;
             "post-rating": LocalJSX.IntrinsicElements["post-rating"] & JSXBase.HTMLAttributes<HTMLPostRatingElement>;
+            "post-side-navigation": LocalJSX.IntrinsicElements["post-side-navigation"] & JSXBase.HTMLAttributes<HTMLPostSideNavigationElement>;
+            "post-side-navigation-trigger": LocalJSX.IntrinsicElements["post-side-navigation-trigger"] & JSXBase.HTMLAttributes<HTMLPostSideNavigationTriggerElement>;
             "post-stepper": LocalJSX.IntrinsicElements["post-stepper"] & JSXBase.HTMLAttributes<HTMLPostStepperElement>;
             "post-stepper-item": LocalJSX.IntrinsicElements["post-stepper-item"] & JSXBase.HTMLAttributes<HTMLPostStepperItemElement>;
             "post-tab-item": LocalJSX.IntrinsicElements["post-tab-item"] & JSXBase.HTMLAttributes<HTMLPostTabItemElement>;

package/dist/types/home/runner/work/design-system/design-system/packages/components/.stencil/vrt/helpers/header-variants.config.d.ts

@@ -1,6 +1,7 @@
 export type HeaderSlot = 'post-logo' | 'language-menu' | 'title' | 'audience' | 'global-nav-primary' | 'global-nav-secondary' | 'main-nav' | 'local-nav' | 'post-login';
 export interface VariantConfig {
     slots: HeaderSlot[];
+    stylesheet?: string;
     hasGlobalHeader: boolean;
     hasUserMenu: boolean;
     hasMegadropdown: boolean;

package/dist/types/utils/index.d.ts

@@ -1,4 +1,3 @@
-export * from './property-checkers';
 export * from './property-decorators';
 export * from './attribute-observer';
 export * from './breakpoints';
@@ -8,11 +7,11 @@ export * from './event-from';
 export * from './get-focusable-children';
 export * from './get-root';
 export * from './get-slotted-element';
+export * from './is-iso-date';
 export * from './is-motion-reduced';
 export * from './is-value-empty';
+export * from './locales';
+export * from './nanoid';
 export * from './repeat-on-long-press';
 export * from './sass-export';
 export * from './timeout';
-export * from './is-iso-date';
-export * from './locales';
-export * from './nanoid';

package/dist/types/utils/property-decorators/bound.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Options for the GreaterThan decorator validation.
+ *
+ * @property includeMin - Whether the minimum value is inclusive (default: false for exclusive behavior).
+ */
+export type GreaterThanOptions = {
+    includeMin?: boolean;
+};
+/**
+ * Property decorator that validates the property value is greater than the specified minimum.
+ *
+ * Validation runs on `componentDidLoad` and whenever the property value changes.
+ *
+ * @typeParam T - Component type used to constrain property-name bounds.
+ * @param minimum - The minimum allowed value (exclusive by default) or property name to read it from.
+ * @param options - Configuration object with `includeMin` flag (default: false for exclusive behavior).
+ */
+export declare function GreaterThan<T extends object>(minimum: number | Extract<keyof T, string>, options?: GreaterThanOptions): (target: T, property: string) => void;
+/**
+ * Options for the LessThan decorator validation.
+ *
+ * @property includeMax - Whether the maximum value is inclusive (default: true).
+ */
+export type LessThanOptions = {
+    includeMax?: boolean;
+};
+/**
+ * Property decorator that validates the property value is less than the specified maximum.
+ *
+ * Validation runs on `componentDidLoad` and whenever the property value changes.
+ *
+ * @typeParam T - Component type used to constrain property-name bounds.
+ * @param maximum - The maximum allowed value (inclusive by default) or property name to read it from.
+ * @param options - Configuration object with `includeMax` flag (default: true for inclusive behavior).
+ */
+export declare function LessThan<T extends object>(maximum: number | Extract<keyof T, string>, options?: LessThanOptions): (target: T, property: string) => void;

package/dist/types/utils/property-decorators/create-validator-decorator.d.ts

@@ -12,6 +12,11 @@ interface Validator {
     /** Executes the validation logic for the given component property. */
     run: (component: object, property: string) => boolean;
 }
+/**
+ * Registers that `dependentProp` should be re-validated when `dependencyProp` changes.
+ * Ensures the dependency property has an accessor so its setter can trigger dependents.
+ */
+export declare function registerDependency(target: object, dependencyProp: string, dependentProp: string): void;
 /**
  * Creates a property decorator that registers a validator for a component property.
  *

package/dist/types/utils/property-decorators/index.d.ts

@@ -1,5 +1,5 @@
 export { ArrayOf } from './array-of';
-export { createValidatorDecorator, getValidationContext } from './create-validator-decorator';
+export { GreaterThan, LessThan } from './bound';
 export { DateValue } from './date';
 export { IsoDate } from './iso-date';
 export { OneOf } from './one-of';

package/dist/types/utils/property-decorators/required.d.ts

@@ -1,8 +1,17 @@
+interface RequiredDecoratorOptions<T extends object> {
+    when: Extract<keyof T, string>;
+    truthy?: boolean;
+}
 /**
  * Property decorator that validates the property is not empty.
  * If the property is empty (undefined, null, '', NaN), an error is logged.
  * This validator is blocking: if it fails, subsequent validators will not run.
  *
  * Validation runs on `componentDidLoad` and whenever the property value changes.
+ *
+ * @param options - Optional configuration.
+ * @param options.when - The property name to watch. Validation only runs when this property's value matches the `truthy` option.
+ * @param options.truthy - The value that the `when` property must match for validation to run. Defaults to `true`.
  */
-export declare function Required(): (target: object, property: string) => void;
+export declare function Required<T extends object>(options?: RequiredDecoratorOptions<T>): (target: T, property: string) => void;
+export {};

package/dist/vrt/helpers/header-test-config.js

@@ -27,7 +27,7 @@ export const STATE_HANDLERS = {
         await openBurgerMenu(page);
         await openMegadropdown(page, 'letters');
     },
-    scrolled: async (page) => {
+    'scrolled': async (page) => {
         await page.evaluate(() => window.scrollTo(0, 200));
         await page.waitForTimeout(300);
     },
@@ -112,5 +112,6 @@ export const TEST_MATRIX = {
     'microsite-loggedin': stateComposeHelper(LOGGED_IN),
     'jobs-loggedout': stateComposeHelper(SCROLLED_ONLY, BURGER_FLOW_NO_SECOND),
     'jobs-loggedin': stateComposeHelper(LOGGED_IN),
-    onepager: stateComposeHelper(SCROLLED_ONLY, LANGUAGE_AND_SCROLL),
+    'onepager': stateComposeHelper(SCROLLED_ONLY, LANGUAGE_AND_SCROLL),
+    'application': stateComposeHelper(SCROLLED_ONLY, LANGUAGE_AND_SCROLL),
 };