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

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

@@ -3,10 +3,13 @@ import { ButtonType, Placement, Size } from './types';
  * @slot default - Slot for placing visually hidden label in the close button.
  */
 export declare class PostClosebutton {
-    private mutationObserver;
+    internals: ElementInternals;
+    private mutationObserver?;
+    private visuallyHidden;
     host: HTMLPostClosebuttonElement;
     /**
      * The "type" attribute used for the close button
+    
      */
     buttonType?: ButtonType;
     /**
@@ -18,8 +21,8 @@ export declare class PostClosebutton {
      */
     size: Size;
     componentDidLoad(): void;
-    connectedCallback(): void;
     disconnectedCallback(): void;
     private checkContent;
+    private handleClick;
     render(): any;
 }

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

@@ -1,4 +1,4 @@
-export declare const BUTTON_TYPES: readonly ["button", "submit", "reset"];
+export declare const BUTTON_TYPES: readonly ["button", "reset"];
 export type ButtonType = (typeof BUTTON_TYPES)[number];
 export declare const PLACEMENT: readonly ["manual", "auto"];
 export type Placement = (typeof PLACEMENT)[number];

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

@@ -0,0 +1,19 @@
+import { AirDatepickerOptions } from 'air-datepicker';
+type AirDatepickerRenderCellFn = NonNullable<AirDatepickerOptions<HTMLDivElement>['onRenderCell']>;
+type AirDatepickerCellData = Parameters<AirDatepickerRenderCellFn>[0];
+type AirDatepickerCellConfig = ReturnType<AirDatepickerRenderCellFn>;
+/**
+ * Add role and aria-label to each grid cell based on its type.
+ * @param data The render cell data from AirDatepicker.
+ * @param localeCode The BCP 47 locale code for formatting.
+ * @returns An object with `attrs` to apply to the cell element.
+ */
+export declare function renderCellAccessibility({ date, cellType }: AirDatepickerCellData, localeCode: string): AirDatepickerCellConfig | undefined;
+/**
+ * Merge the internal render cell (adding of role + aria-label attributes) and the user's render cell (disabling dates, etc.)
+ * @param base Internal render cell
+ * @param custom User render cell
+ * @returns Merged render cell
+ */
+export declare function mergeRenderCellResults(base?: AirDatepickerCellConfig, custom?: AirDatepickerCellConfig): AirDatepickerCellConfig;
+export {};

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

@@ -0,0 +1,48 @@
+/**
+ * Pad the year component of an ISO date string to 4 digits.
+ * @param isoDateString An ISO formatted date string (YYYY-MM-DD).
+ * @returns The padded ISO date string.
+ */
+export declare function padIsoDate(isoDateString: string): string;
+/**
+ * Convert an ISO 8601 formatted date string (YYYY-MM-DD) to a localtime date object.
+ * @param isoDateString An ISO formatted, localtime date string.
+ * @returns A localtime date object.
+ */
+export declare function isoToDate(isoDateString: string): Date | null;
+/**
+ * Convert a date object to an ISO 8601 formatted date string (YYYY-MM-DD).
+ * @param date A localtime date object.
+ * @returns An ISO formatted, localtime date string.
+ */
+export declare function dateToIso(date: Date): string;
+/**
+ * Convert a date object to a localized date string.
+ * @param date A localtime date object.
+ * @param localeCode The BCP 47 locale code to use for formatting.
+ * @returns A localized date string, depending on the given `localeCode`.
+ */
+export declare function dateToString(date: Date, localeCode: string): string;
+/**
+ * Convert a localized date string to a date object.
+ * The date string should be in the same format as the date picker's `dateFormat`, which depends on the given `localeCode`.
+ * @param localeDateString A localized date string.
+ * @param dateFormat The date format string (e.g. "dd.mm.yyyy").
+ * @param isBuddhistCalendar Whether the locale uses the Buddhist calendar.
+ * @returns A localtime date object.
+ */
+export declare function stringToDate(localeDateString: string, dateFormat: string, isBuddhistCalendar: boolean): Date;
+/**
+ * Get the date format string for a locale, by formatting a sample date and replacing the date parts
+ * with format keys (y, m, d). For example, it will return "dd.mm.yyyy" for "de-CH" locale and "mm/dd/yyyy" for "en-US" locale.
+ * @param localeCode The BCP 47 locale code.
+ * @param isBuddhistCalendar Whether the locale uses the Buddhist calendar.
+ * @returns The date format string.
+ */
+export declare function getDateFormat(localeCode: string, isBuddhistCalendar: boolean): string;
+/**
+ * Check if a value is a valid Date object.
+ * @param date The value to check.
+ * @returns `true` if the value is a valid Date, `false` otherwise.
+ */
+export declare function isValidDate(date: Date): boolean;

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

@@ -0,0 +1,12 @@
+import { HTMLInputMaskElement } from 'imask';
+import type { EventHandlers } from 'imask/esm/controls/mask-element';
+export declare class NativeInputMaskElement extends HTMLInputMaskElement {
+    allowEvents: boolean;
+    private _inputEventSuppressor;
+    get value(): string;
+    set value(val: string);
+    bindEvents(handlers: EventHandlers): void;
+    unbindEvents(): void;
+}
+export declare function getNativeValue(input: HTMLInputElement): string;
+export declare function setNativeValue(input: HTMLInputElement, val: string): void;

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

@@ -1,13 +1,3 @@
-import { EventEmitter } from '../../stencil-public-runtime';
-import AirDatepicker, { AirDatepickerOptions, AirDatepickerViewsSingle } from 'air-datepicker';
-export interface AirDatepickerCustomOptions extends AirDatepickerOptions<HTMLDivElement> {
-    onShow?: (isAnimationComplete: boolean) => void;
-    onRenderCell?: (data: {
-        date: Date;
-        cellType: AirDatepickerViewsSingle;
-        datepicker: AirDatepicker<HTMLDivElement>;
-    }) => void;
-}
 export declare class PostDatePicker {
     host: HTMLPostDatePickerElement;
     /**
@@ -24,27 +14,22 @@ export declare class PostDatePicker {
     range?: boolean;
     updateRange(): void;
     /**
-     * The date picker's selected date. If in range mode, the selected start date.
-     * Must be a valid date in ISO 8601 format (YYYY-MM-DD).
-     */
-    selectedStartDate?: string;
-    /**
-     * 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;
-    /**
-     * Minimun possible date to select. Must be a valid date in ISO 8601 format (YYYY-MM-DD).
+     * Minimum possible date to select. Must be a valid date in ISO 8601 format (YYYY-MM-DD).
      */
     min?: string;
+    updateMin(): void;
     /**
      * Maximum possible date to select. Must be a valid date in ISO 8601 format (YYYY-MM-DD).
      */
     max?: string;
+    updateMax(): void;
     /**
-     * Used to extend the existing on render cell to disable dates.
+     * A callback to customize individual calendar cells, e.g. to disable specific dates or add CSS classes.
      */
-    renderCellCallback?: AirDatepickerCustomOptions['onRenderCell'];
+    cellConfig?: (date: Date, cellType: 'day' | 'month' | 'year') => {
+        disabled?: boolean;
+        classes?: string;
+    } | void;
     /**
      * Whether the calendar is inline in the page (not showing in a popover when input clicked).
      */
@@ -80,16 +65,12 @@ export declare class PostDatePicker {
     textSwitchYear: string;
     /**
      * Label for the toggle button that opens the calendar.
-     * It is only needed when the calendar is connected to the input.
+     * It is only needed when the calendar is not inline.
      */
     textToggleCalendar?: string;
     inputDisabled: boolean;
     today: Date;
     startDate: Date;
-    /**
-     * An event emitted when a date or a range of dates have been selected.
-     */
-    postUpdateDates: EventEmitter<string | string[]>;
     /**
      * Displays the popover calendar, focusing the first calendar item.
      */
@@ -108,6 +89,9 @@ export declare class PostDatePicker {
     private dpInstance;
     private dpContainer;
     private inputMask;
+    private maskElement;
+    private _isInternalUpdate;
+    private _lastInputValue;
     private gridObserver;
     private navObserver;
     private inputObserver;
@@ -143,31 +127,13 @@ export declare class PostDatePicker {
      */
     private airLocale;
     /**
-     * Convert a date object to a localized date string and vice versa.
-     * @param date A localtime date object.
-     * @returns A localized date string, depending on the given `localeCode` and the given `options`.
+     * Convert a date object to a localized date string, bound to the current locale.
      */
     private dateToString;
     /**
-     * Convert a localized date string to a date object.
-     * The date string should be in the same format as the date picker's `dateFormat`, which depends on the given `localeCode`.
-     * @param localeDateString A localized date string.
-     * @returns A localtime date object.
+     * Convert a localized date string to a date object, bound to the current locale and format.
      */
     private stringToDate;
-    /**
-     * Convert a date object to an ISO 8601 formatted date string (YYYY-MM-DD) and vice versa.
-     * @param date A localtime date object.
-     * @returns An iso formatted, localtime date string.
-     */
-    private dateToIso;
-    /**
-     * Convert an ISO 8601 formatted date string (YYYY-MM-DD) to a localtime date object.
-     * @param isoDateString An iso formatted, localtime date string.
-     * @returns A localtime date object.
-     */
-    private isoToDate;
-    private padIsoDate;
     private setupInputObserver;
     /**
      * Get all the active cells of the calendar
@@ -203,27 +169,22 @@ export declare class PostDatePicker {
      */
     private setUpMask;
     private updateMask;
+    private setupValueOverride;
+    private getIsoDates;
+    private getInputIsoValue;
+    private serializeIsoValue;
+    private setInputIsoValue;
     private configDatePicker;
-    private updateInputValue;
-    private handleSelectedDates;
+    private emitInputEvents;
+    private handleInputEvent;
+    private formatDatesForMask;
+    private syncInputToDp;
     private attachTitleBtnListener;
     private forceTitleClickToYear;
-    /**
-     * Add role and aria-label to each grid cell
-     */
-    private internalOnRenderCell;
-    /**
-     * Merge the internal render cell (adding of role + aria-label attributes) and the user's render cell (disabling dates, etc.)
-     * @param base Internal render cell
-     * @param custom User render cell
-     * @returns Merged render cell
-     */
-    private mergeRenderCellResults;
     private setupNavObserver;
     private setupGridObserver;
     private addInputListener;
     private resetSelection;
-    private isValidDate;
     private syncDatePickerState;
     componentDidLoad(): Promise<void>;
     disconnectedCallback(): void;

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

@@ -3,7 +3,8 @@ import { Device } from "../../utils/breakpoints";
  * @slot post-logo - Should be used together with the `<post-logo>` component.
  * @slot global-nav-primary - Holds search button in the global header.
  * @slot global-nav-secondary - Holds an `<ul>` with meta navigation links.
- * @slot language-menu - Should be used with the `<post-language-switch>` component.
+ * @slot language-menu - Should be used with the `<post-language-menu>` component.
+ * @slot side-nav - Should be used with the `<post-side-navigation>` component.
  * @slot title - Holds the application title.
  * @slot main-nav - Has a default slot because it's only meant to be used in the `<post-header>`.
  * @slot audience - Holds the list of buttons to choose the audience.
@@ -65,7 +66,7 @@ export declare class PostHeader {
     private handleSlottedContentChanges;
     private checkSlottedContent;
     private switchLanguageSwitchMode;
-    onFocusChange(e: FocusEvent): void;
+    onFocusChange(): void;
     private renderBurgerMenu;
     render(): any;
 }

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

@@ -10,7 +10,8 @@ export declare class PostLanguageMenu {
      */
     textChangeLanguage: string;
     /**
-     * An accessible description text for the list of language options. The `#name` placeholder is dynamic and will be replaced with the active language name.
+     * 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;
     /**

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

@@ -34,13 +34,13 @@ export declare class PostMenu {
     connectedCallback(): void;
     disconnectedCallback(): void;
     /**
-     * Toggles the menu visibility based on its current state.
+     * Toggles the menu visibility based on its current state,
+     * `target` is the HTML element the menu is anchored to.
      */
     toggle(target: HTMLElement): Promise<void>;
     /**
-     * Displays the popover menu, focusing the first menu item.
-     *
-     * @param target - The HTML element relative to which the popover menu should be displayed.
+     * Displays the popover menu, focusing the first menu item,
+     * `target` is the HTML element the menu is anchored to.
      */
     show(target: HTMLElement): Promise<void>;
     /**

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

@@ -20,8 +20,8 @@ export declare class PostPopover {
      */
     readonly arrow?: boolean;
     /**
-     * Programmatically display the popover
-     * @param target A focusable element inside the <post-popover-trigger> component that controls the popover
+     * Programmatically display the popover,
+     * `target` is the HTML element the menu is anchored to.
      */
     show(target: HTMLElement): Promise<void>;
     /**
@@ -29,9 +29,8 @@ export declare class PostPopover {
      */
     hide(): Promise<void>;
     /**
-     * Toggle popover display
-     * @param target A focusable element inside the <post-popover-trigger> component that controls the popover
-     * @param force Pass true to always show or false to always hide
+     * Toggle popover display,
+     * `target` is the HTML element the menu is anchored to.
      */
     toggle(target: HTMLElement, force?: boolean): Promise<void>;
     private focusFirstEl;

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

@@ -92,7 +92,7 @@ export declare class PostPopovercontainer {
     disconnectedCallback(): void;
     /**
      * Programmatically display the popovercontainer
-     * @param target A focusable element inside the trigger component that controls the popover
+     * @param target The element that invokes the popover and to which it is visually anchored.
      */
     show(target: HTMLElement): Promise<void>;
     /**
@@ -101,7 +101,7 @@ export declare class PostPopovercontainer {
     hide(): Promise<void>;
     /**
      * Toggle popovercontainer display
-     * @param target A focusable element inside the <post-popover-trigger> component that controls the popover
+     * @param target The element that invokes the popover and to which it is visually anchored.
      * @param force Pass true to always show or false to always hide
      */
     toggle(target: HTMLElement, force?: boolean): Promise<boolean>;

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

@@ -0,0 +1,62 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { Device } from "../../utils/breakpoints";
+import { SideNavigationSize } from './side-navigation-styles';
+/**
+ * @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;
+    /**
+     * Controls the size of the navigation items.
+     * Choose "small" for deep and long navigation, and "large" (default) for a flat and short navigation.
+     */
+    size?: SideNavigationSize;
+    /**
+     * 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/side-navigation-styles.d.ts

@@ -0,0 +1,2 @@
+export declare const SIDE_NAVIGATION_SIZES: readonly ["large", "small"];
+export type SideNavigationSize = (typeof SIDE_NAVIGATION_SIZES)[number];

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-tab-item/post-tab-item.d.ts

@@ -1,18 +1,22 @@
 /**
- * @slot default - Slot for the content of the tab item. Can contain text or an <a> element for navigation mode.
+ * @slot default - Slot for the content of the tab item. Can contain text or an <a> element for Page Tabs variant.
  */
 export declare class PostTabItem {
-    private mutationObserver;
+    private readonly mutationObserver;
     host: HTMLPostTabItemElement;
     tabId: string;
-    isNavigationMode: boolean;
+    isPagesVariant: 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;
+    /**
+     * Whether the tab item is disabled.
+     */
+    disabled: boolean;
     connectedCallback(): void;
     componentWillLoad(): void;
     disconnectedCallback(): void;
-    private checkNavigationMode;
+    private checkPagesVariant;
     render(): any;
 }

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

@@ -3,7 +3,7 @@
  */
 export declare class PostTabPanel {
     host: HTMLPostTabPanelElement;
-    panelId: string;
+    panelId?: string;
     /**
      * The name of the tab that this panel is associated with.
      */

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

@@ -3,58 +3,74 @@ import { EventEmitter } from '../../stencil-public-runtime';
  * @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.
+ * @part post-tabs-content - The container element that displays the content of the currently active tab. Only available in Content variant.
  */
 export declare class PostTabs {
-    private currentActiveTab;
+    private currentActiveTab?;
     private showing;
     private hiding;
     private isLoaded;
-    private contentObserver;
-    isNavigationMode: boolean;
+    private contentObserver?;
+    private resizeObserver?;
+    private tabsContainer;
+    host: HTMLPostTabsElement;
+    isPagesVariant: boolean;
+    private showLeftScrollButton;
+    private showRightScrollButton;
+    private leftScrollButton;
+    private rightScrollButton;
     private get tabs();
     private get panels();
-    host: HTMLPostTabsElement;
     /**
-     * The name of the tab in the panel mode that is initially active.
+     * An accessible label for the "previous tab items" button.
+     */
+    textPrevTabItems: string;
+    /**
+     * An accessible label for the "next tab items" button.
+     */
+    textNextTabItems: string;
+    /**
+     * The name of the tab in the Content Tabs variant that is initially active.
      * Changing this value after initialization has no effect.
      * If not specified, defaults to the first tab.
      */
     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.
+     * The size of the tabs, corresponding to the different designs in Figma.
+     * Default is 'large'.
      */
-    fullWidth: boolean;
+    size: 'small' | 'large';
     /**
-     * The accessible label for the tabs component in navigation mode.
+     * An accessible label for the Pages Tabs variant
      */
     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 active tab.
-     * Only emitted in panel mode.
+     * Only emitted in Content Tabs variant.
      */
     postChange: EventEmitter<string>;
     componentWillRender(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;
     private setupContentObserver;
+    private setupResizeObserver;
     private handleContentChange;
-    private shouldRedetectMode;
+    private shouldRedetectVariant;
     private hasAriaCurrentChanged;
-    private updateActiveNavigationTab;
-    private handleModeChange;
+    private updateActivePagesTab;
+    private handleVariantChange;
     private initializeActiveTab;
-    private detectMode;
-    private findActiveNavigationTab;
+    private detectVariant;
+    private findActivePagesTab;
     /**
      * 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(tabName: string): Promise<void>;
+    private awaitAnimation;
+    private isAbortError;
     private moveMisplacedTabs;
     private moveMisplacedPanels;
     private enableTabs;
@@ -63,5 +79,9 @@ export declare class PostTabs {
     private showSelectedPanel;
     private getPanel;
     private navigateTabs;
+    private readonly updateScrollButtons;
+    private scrollTabs;
+    private scrollTabIntoView;
+    private handleScrollButtons;
     render(): any;
 }

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

@@ -18,8 +18,8 @@ export declare class PostTooltip {
     open: boolean;
     componentDidLoad(): void;
     /**
-     * Programmatically display the tooltip.
-     * @param target An element where the tooltip should be shown
+     * Programmatically display the tooltip,
+     * `target` is the HTML element the menu is anchored to.
      */
     show(target: HTMLElement): Promise<void>;
     /**
@@ -27,9 +27,8 @@ export declare class PostTooltip {
      */
     hide(): Promise<void>;
     /**
-     * Toggle tooltip display.
-     * @param target An element where the tooltip should be shown
-     * @param [force] Pass true to always show or false to always hide
+     * Toggle tooltip display,
+     * `target` is the HTML element the menu is anchored to.
      */
     toggle(target: HTMLElement, force?: boolean): Promise<void>;
     /**