@swisspost/design-system-components 10.4.0 → 10.6.0

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

@@ -18,7 +18,12 @@ export declare class PostAutocomplete {
      * e.g. "{count} suggestions available"
      */
     readonly textAvailableSuggestions: string;
-    inputValue: string;
+    /** Whether the listbox is currently expanded */
+    private expanded;
+    /** The value of the last run query */
+    private lastQuery;
+    /** The value of the selected listbox option */
+    selectedValue: string | null;
     /** Cancelable event emitted when the input value is to be filtered */
     postFilteringEvent: EventEmitter<string>;
     private get inputElement();
@@ -26,19 +31,26 @@ export declare class PostAutocomplete {
     componentWillLoad(): void;
     disconnectedCallback(): void;
     private attachInputListeners;
-    private readonly handleFocus;
     private detachInputListeners;
     private attachListboxListeners;
     private detachListboxListeners;
     private clearAnnouncement;
     private announceCount;
-    private readonly handleOnBlur;
+    private showListBox;
+    private hideListBox;
+    private updateSelectedValue;
+    /** Restores the input to the value of the selected option. */
+    private restoreSelectedValue;
+    /** Runs a query, filtering the listbox options and reflecting the outcome. */
+    private runQuery;
+    /** Filters the listbox options based on the query, delegating to the consuming parent when possible. */
+    private filterListBox;
+    private readonly handleClick;
+    private readonly handleBlur;
     private readonly handleInput;
     private readonly handleKeyDown;
     private readonly handleOptionSelected;
     private readonly handleOptionActive;
-    private readonly hideListBox;
-    private readonly showListBox;
-    private readonly clearInput;
+    private readonly handleClear;
     render(): any;
 }

package/dist/types/components/post-back-to-top/post-back-to-top.d.ts

@@ -7,9 +7,10 @@ export declare class PostBackToTop {
     textBackToTop: string;
     belowFold: boolean;
     private translateY;
+    private currentAnimation?;
     private isBelowFold;
     private readonly handleScroll;
-    watchBelowFold(newValue: boolean): void;
+    watchBelowFold(newValue: boolean): Promise<void>;
     private scrollToTop;
     private getSecondPixelValue;
     private animateButton;

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

@@ -26,7 +26,6 @@ export declare class PostBanner {
      * Triggers banner dismissal programmatically (same as clicking on the close button (×)).
      */
     dismiss(): Promise<void>;
-    onCloseButtonClick(): void;
     private checkContent;
     render(): any;
 }

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

@@ -1,9 +1,13 @@
 import { Variant } from './variants';
 /**
- * @slot default - The content displayed inside the breadcrumb item.
+ * @slot default - The content displayed inside the breadcrumb item. Can contain text or an <a> element, so consumers can slot their own routing-aware link instead of relying on the `url` prop.
  */
 export declare class PostBreadcrumbItem {
     host: HTMLPostBreadcrumbItemElement;
+    /**
+     * Whether the consumer slotted their own <a>. When true, the component renders only the <slot>, leaving the slotted anchor untouched so the host app's router can handle clicks.
+     */
+    hasSlottedAnchor: boolean;
     /**
      * The destination URL for the breadcrumb item. If omitted, the item is rendered as non-interactive text.
      */
@@ -24,5 +28,12 @@ export declare class PostBreadcrumbItem {
      * Indicates that the item represents the current page, applying appropriate styling.
      */
     selected: boolean;
+    /**
+     * Indicates that this is the only visible item, applying appropriate styling.
+     */
+    standalone: boolean;
+    componentWillLoad(): void;
+    private checkSlottedAnchor;
+    private renderContent;
     render(): any;
 }

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

@@ -1,17 +1,41 @@
+/**
+ * @slot home - The content of the root (home) breadcrumb item. Can contain an `<a>` element, so consumers can slot their own routing-aware link instead of relying on the `home-url` prop.
+ */
 export declare class PostBreadcrumbs {
-    private mutationObserver;
+    private debounceUpdateCollapsedItems;
     private resizeObserver;
+    private mutationObserver;
     host: HTMLPostBreadcrumbsElement;
-    shouldRenderMenu: boolean;
     id: string;
+    loaded: boolean;
+    /** Whether the consumer slotted their own `<a>` into the `home` slot. When true, `home-url` is not required, since the internal fallback link is not rendered. */
+    hasSlottedHomeAnchor: boolean;
+    /** Whether the slotted home anchor contains a post-icon. */
+    hasSlottedHomeIcon: boolean;
+    /** The number of breadcrumb items, counted from the start, moved into the overflow menu. */
+    collapsed: number;
+    /** Whether the home item is collapsed into its own overflow menu. */
+    homeCollapsed: boolean;
+    /** Whether the last (selected) item wraps onto multiple lines. */
+    lastItemWraps: boolean;
+    /** The visible breadcrumb navigation. */
+    private nav;
+    /** An off-screen copy of the breadcrumb navigation used for measurement. */
+    private hiddenNav;
     /**
      * The URL for the root (home) breadcrumb item.
      */
-    homeUrl: string;
+    homeUrl?: string;
+    /**
+     * The label of the root (home) breadcrumb item. Displayed visibly when `home-text-only` is
+     * `true`, otherwise used as an accessible label alongside the home icon.
+     */
+    textHome?: string;
     /**
-     * An accessible label for the root (home) breadcrumb item.
+     * Whether `text-home` content is displayed instead of the home icon, enabling segment specific
+     * breadcrumbs (like "Private customers" or "About us").
      */
-    textHome: string;
+    homeTextOnly: boolean;
     /**
      * An accessible label for the breadcrumb navigation.
      */
@@ -21,18 +45,34 @@ export declare class PostBreadcrumbs {
      */
     textMoreItems: string;
     componentWillLoad(): void;
-    componentDidLoad(): void;
+    componentDidLoad(): Promise<void>;
     disconnectedCallback(): void;
-    private createMutationObserver;
-    private createResizeObserver;
+    private checkSlottedHomeAnchor;
+    private get usesHomeText();
+    /** Measures the available space and updates all three degrade-stage states. */
+    private updateCollapsedItems;
+    private calculateCollapsedItems;
+    /** Runs the three degrade stages in order against the off-screen measurement clone. */
+    private calculateOverflowingItems;
+    /** Stage 1: collapses middle items until the rest fits, or none are left. */
+    private collapseMiddleItems;
+    /** Applies the degrade states to the `<post-breadcrumb-item>` elements. */
+    private updateItems;
+    /** Rebuilds the off-screen copy of the breadcrumb navigation. */
+    private updateHiddenNav;
+    private updateAfterMutation;
     /**
-     * To measure overflow, we duplicate the entire breadcrumb so an inline version is always available.
+     * Renders an off-screen copy of the nav for measurements. `.home` is rebuilt independently (see
+     * `buildMeasurementHomeElement`) rather than cloned, since the live nav may show the home item
+     * in the overflow menu instead if it is already collapsed.
      */
-    private duplicateNavElement;
-    private duplicateSlottedElements;
-    private checkOverflow;
-    private prepareBreadcrumbItemsForClone;
-    private updateBreadcrumbItemProps;
+    private renderHiddenNav;
+    /** Builds `.home` in its full, uncollapsed form for measurement. Mirrors `renderHomeContent`, but as plain DOM since this runs outside the render cycle. */
+    private buildMeasurementHomeElement;
     private renderMenu;
+    /** Reused by the plain home item and the home menu — a slot can only be assigned once. */
+    private renderHomeContent;
+    /** Degrade stage 2: home renders in full, single-line, not yet collapsed. */
+    private renderHome;
     render(): any;
 }

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

@@ -9,7 +9,7 @@ export declare class PostClosebutton {
     host: HTMLPostClosebuttonElement;
     /**
      * The "type" attribute used for the close button
-    
+  
      */
     buttonType?: ButtonType;
     /**

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

@@ -50,6 +50,7 @@ export declare class PostMenu {
     private readonly handleKeyDown;
     private handlePostShown;
     private handlePostBeforeToggle;
+    private wasFocusVisible;
     private readonly handleClick;
     private controlKeyDownHandler;
     private getSlottedItems;

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

@@ -76,6 +76,13 @@ export declare class PostPopovercontainer {
      * Enables a safespace through which the cursor can be moved without the popover being disabled
      */
     readonly safeSpace?: 'triangle' | 'trapezoid';
+    /**
+     * Whether to automatically hide the popover when the target moves outside the scrollport.
+     *
+     * If the `post-header` can cover the target, the popover will also be hidden as soon as the
+     * target scrolls behind it.
+     */
+    readonly autoHide?: boolean;
     /**
      * Animation style
      */
@@ -129,12 +136,8 @@ export declare class PostPopovercontainer {
      * an influence on popovercontainer positioning
      */
     private startAutoupdates;
-    /**
-     * Retrieves the dynamic height of the header
-     */
-    private getHeaderHeight;
+    private updatePosition;
     private calculatePosition;
-    private computeMainPosition;
     private updateSafeSpaceBoundaries;
     render(): any;
 }

package/dist/types/components.d.ts

@@ -125,6 +125,11 @@ export namespace Components {
           * @default false
          */
         "selected": boolean;
+        /**
+          * Indicates that this is the only visible item, applying appropriate styling.
+          * @default false
+         */
+        "standalone": boolean;
         /**
           * The destination URL for the breadcrumb item. If omitted, the item is rendered as non-interactive text.
          */
@@ -136,18 +141,23 @@ export namespace Components {
         "variant": Variant;
     }
     interface PostBreadcrumbs {
+        /**
+          * Whether `text-home` content is displayed instead of the home icon, enabling segment specific breadcrumbs (like "Private customers" or "About us").
+          * @default false
+         */
+        "homeTextOnly": boolean;
         /**
           * The URL for the root (home) breadcrumb item.
          */
-        "homeUrl": string;
+        "homeUrl"?: string;
         /**
           * An accessible label for the breadcrumb navigation.
          */
         "textBreadcrumbs": string;
         /**
-          * An accessible label for the root (home) breadcrumb item.
+          * The label of the root (home) breadcrumb item. Displayed visibly when `home-text-only` is `true`, otherwise used as an accessible label alongside the home icon.
          */
-        "textHome": string;
+        "textHome"?: string;
         /**
           * An accessible label for the overflow menu that contains collapsed breadcrumb items.
          */
@@ -573,6 +583,10 @@ export namespace Components {
           * @default false
          */
         "arrow"?: boolean;
+        /**
+          * Whether to automatically hide the popover when the target moves outside the scrollport.  If the `post-header` can cover the target, the popover will also be hidden as soon as the target scrolls behind it.
+         */
+        "autoHide"?: boolean;
         /**
           * Gap between the edge of the page and the popovercontainer
           * @default 8
@@ -1421,6 +1435,11 @@ declare namespace LocalJSX {
           * @default false
          */
         "selected"?: boolean;
+        /**
+          * Indicates that this is the only visible item, applying appropriate styling.
+          * @default false
+         */
+        "standalone"?: boolean;
         /**
           * The destination URL for the breadcrumb item. If omitted, the item is rendered as non-interactive text.
          */
@@ -1432,18 +1451,23 @@ declare namespace LocalJSX {
         "variant"?: Variant;
     }
     interface PostBreadcrumbs {
+        /**
+          * Whether `text-home` content is displayed instead of the home icon, enabling segment specific breadcrumbs (like "Private customers" or "About us").
+          * @default false
+         */
+        "homeTextOnly"?: boolean;
         /**
           * The URL for the root (home) breadcrumb item.
          */
-        "homeUrl": string;
+        "homeUrl"?: string;
         /**
           * An accessible label for the breadcrumb navigation.
          */
         "textBreadcrumbs": string;
         /**
-          * An accessible label for the root (home) breadcrumb item.
+          * The label of the root (home) breadcrumb item. Displayed visibly when `home-text-only` is `true`, otherwise used as an accessible label alongside the home icon.
          */
-        "textHome": string;
+        "textHome"?: string;
         /**
           * An accessible label for the overflow menu that contains collapsed breadcrumb items.
          */
@@ -1826,6 +1850,10 @@ declare namespace LocalJSX {
           * @default false
          */
         "arrow"?: boolean;
+        /**
+          * Whether to automatically hide the popover when the target moves outside the scrollport.  If the `post-header` can cover the target, the popover will also be hidden as soon as the target scrolls behind it.
+         */
+        "autoHide"?: boolean;
         /**
           * Gap between the edge of the page and the popovercontainer
           * @default 8
@@ -2069,10 +2097,12 @@ declare namespace LocalJSX {
         "description": string;
         "variant": Variant;
         "selected": boolean;
+        "standalone": boolean;
     }
     interface PostBreadcrumbsAttributes {
         "homeUrl": string;
         "textHome": string;
+        "homeTextOnly": boolean;
         "textBreadcrumbs": string;
         "textMoreItems": string;
     }
@@ -2183,6 +2213,7 @@ declare namespace LocalJSX {
         "offset": number;
         "arrow": boolean;
         "safeSpace": 'triangle' | 'trapezoid';
+        "autoHide": boolean;
     }
     interface PostProgressbarAttributes {
         "min": number;
@@ -2244,7 +2275,7 @@ declare namespace LocalJSX {
         "post-back-to-top": Omit<PostBackToTop, keyof PostBackToTopAttributes> & { [K in keyof PostBackToTop & keyof PostBackToTopAttributes]?: PostBackToTop[K] } & { [K in keyof PostBackToTop & keyof PostBackToTopAttributes as `attr:${K}`]?: PostBackToTopAttributes[K] } & { [K in keyof PostBackToTop & keyof PostBackToTopAttributes as `prop:${K}`]?: PostBackToTop[K] } & OneOf<"textBackToTop", PostBackToTop["textBackToTop"], PostBackToTopAttributes["textBackToTop"]>;
         "post-banner": Omit<PostBanner, keyof PostBannerAttributes> & { [K in keyof PostBanner & keyof PostBannerAttributes]?: PostBanner[K] } & { [K in keyof PostBanner & keyof PostBannerAttributes as `attr:${K}`]?: PostBannerAttributes[K] } & { [K in keyof PostBanner & keyof PostBannerAttributes as `prop:${K}`]?: PostBanner[K] };
         "post-breadcrumb-item": Omit<PostBreadcrumbItem, keyof PostBreadcrumbItemAttributes> & { [K in keyof PostBreadcrumbItem & keyof PostBreadcrumbItemAttributes]?: PostBreadcrumbItem[K] } & { [K in keyof PostBreadcrumbItem & keyof PostBreadcrumbItemAttributes as `attr:${K}`]?: PostBreadcrumbItemAttributes[K] } & { [K in keyof PostBreadcrumbItem & keyof PostBreadcrumbItemAttributes as `prop:${K}`]?: PostBreadcrumbItem[K] };
-        "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-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<"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] };

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

@@ -5,6 +5,7 @@ interface BreakpointDefinition {
     device: Device;
     key: BreakpointKey;
     minWidth: BreakpointMinWidth;
+    mediaQuery: string;
 }
 type BreakpointProperty = keyof BreakpointDefinition;
 declare class Breakpoint {

package/dist/types/utils/closable-target.d.ts

@@ -0,0 +1,5 @@
+export interface ClosableTarget {
+    element: Element;
+    close: () => void;
+}
+export declare function findClosableTarget(start: Element): ClosableTarget | null;

package/dist/types/utils/event-from.d.ts

@@ -8,3 +8,11 @@ export declare function EventFrom(tag: string, option?: {
     ignoreNestedComponents?: boolean;
     allowDescendants?: boolean;
 }): (target: object, propertyKey: string, descriptor?: PropertyDescriptor) => void;
+/**
+ * Traverses up the DOM (including crossing shadow DOM boundaries) to find the closest ancestor
+ * matching the given predicate.
+ * @param start - The starting element
+ * @param predicate - A type guard used to test each ancestor
+ * @returns The closest matching ancestor or null if none found
+ */
+export declare function findClosestAcrossShadow<T extends Element>(start: Element, predicate: (el: Element) => el is T): T | null;

package/dist/types/utils/floating-ui.d.ts

@@ -0,0 +1,12 @@
+/**
+ * This utility is covered by the end-to-end tests under 'clipping' in `popovercontainer.cy.ts`.
+ */
+import { computePosition } from '@floating-ui/dom';
+/**
+ * Computes the coordinates that will position the `floating` element next to a given `reference`
+ * element while accounting for the safe area.
+ *
+ * The safe area is the part of the viewport that the header does not cover. Restricting the
+ * clipping rectangles to it makes floating elements behave as if they were clipped by the header.
+ */
+export declare const computePositionWithSafeArea: typeof computePosition;

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

@@ -1,6 +1,7 @@
 export * from './property-decorators';
 export * from './attribute-observer';
 export * from './breakpoints';
+export * from './closable-target';
 export * from './component-on-ready';
 export * from './debounce';
 export * from './event-from';