@swisspost/design-system-components 9.0.0 → 10.0.0-next.37

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

@@ -0,0 +1,51 @@
+declare enum AvatarType {
+    Slotted = "slotted",
+    Image = "image",
+    Initials = "initials",
+    Null
+}
+/**
+ * @slot default - Slot for inserting a custom image as avatar.
+ */
+export declare class PostAvatar {
+    private static INTERNAL_USERID_IMAGE_SRC;
+    host: HTMLPostAvatarElement;
+    /**
+     * Defines the users firstname.
+     */
+    readonly firstname: string;
+    /**
+     * Defines the users lastname.
+     */
+    readonly lastname?: string;
+    /**
+     * Defines the company internal userId.<div className="mb-4 banner banner-warning banner-sm">Can only be used on post.ch domains!</div>
+     */
+    readonly userid?: string;
+    /**
+     * Defines the users email address associated with a gravatar profile picture.
+     */
+    readonly email?: string;
+    slottedImage: HTMLImageElement;
+    avatarType: AvatarType;
+    imageUrl: string;
+    imageAlt: string;
+    initials: string;
+    validateFirstname(): void;
+    private getAvatar;
+    private getImageByProp;
+    private fetchImageByUserId;
+    private fetchImageByEmail;
+    private getAvatarByInitials;
+    private getNames;
+    private getInitials;
+    private getStorageItem;
+    private setStorageItem;
+    private removeStorageItem;
+    private cryptify;
+    private onSlotDefaultChange;
+    componentWillRender(): void;
+    componentDidLoad(): void;
+    render(): any;
+}
+export {};

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

@@ -0,0 +1,21 @@
+export declare class PostBackToTop {
+    host: HTMLPostBackToTopElement;
+    /**
+     * The label of the back-to-top button, intended solely for accessibility purposes.
+     * This label is always hidden from view.
+     **/
+    label: string;
+    belowFold: boolean;
+    private translateY;
+    private isBelowFold;
+    private readonly handleScroll;
+    watchBelowFold(newValue: boolean): void;
+    private scrollToTop;
+    private getSecondPixelValue;
+    private animateButton;
+    validateLabel(): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    render(): any;
+}

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

@@ -0,0 +1,2 @@
+export declare const BANNER_TYPES: readonly ["neutral", "success", "warning", "danger", "info"];
+export type BannerType = (typeof BANNER_TYPES)[number];

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

@@ -0,0 +1,49 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { BannerType } from './banner-types';
+/**
+ * @slot heading - Slot for placing custom content within the banner's heading.
+ * @slot actions - Slot for placing custom actions (buttons, links, etc.) within the banner.
+ * @slot default - Slot for placing the main content/message of the banner.
+ */
+export declare class PostBanner {
+    host: HTMLPostBannerElement;
+    bannerId: string;
+    classes: string;
+    hasActions: boolean;
+    hasHeading: boolean;
+    onDismissButtonClick: () => Promise<void>;
+    /**
+     * If `true`, a close button (×) is displayed and the banner can be dismissed by the user.
+     */
+    readonly dismissible: boolean;
+    validateDismissible(): void;
+    /**
+     * The label to use for the close button of a dismissible banner.
+     */
+    readonly dismissLabel: string;
+    validateDismissLabel(): void;
+    /**
+     * The icon to display in the banner. By default, the icon depends on the banner type.
+     *
+     * If `none`, no icon is displayed.
+     */
+    readonly icon: string;
+    validateIcon(): void;
+    /**
+     * The type of the banner.
+     */
+    readonly type: BannerType;
+    validateType(): void;
+    /**
+     * An event emitted when the banner element is dismissed, after the transition.
+     * It has no payload and only relevant for dismissible banners.
+     */
+    postDismissed: EventEmitter<void>;
+    componentDidLoad(): void;
+    componentWillRender(): void;
+    /**
+     * Triggers banner dismissal programmatically (same as clicking on the close button (×)).
+     */
+    dismiss(): Promise<void>;
+    render(): any;
+}

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

@@ -0,0 +1,20 @@
+/**
+ * @slot default - Slot for placing the text inside the breadcrumb item.
+ */
+export declare class PostBreadcrumbItem {
+    host: HTMLPostBreadcrumbItemElement;
+    /**
+     * The optional URL to which the breadcrumb item will link.
+     */
+    url?: string | URL;
+    private validUrl?;
+    /**
+     * The full path URL to validate.
+     */
+    fullUrl: string | undefined;
+    validateUrl(): void;
+    private constructUrl;
+    connectedCallback(): void;
+    private handleKeyDown;
+    render(): any;
+}

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

@@ -0,0 +1,30 @@
+export declare class PostBreadcrumbs {
+    host: HTMLPostBreadcrumbsElement;
+    /**
+     * The URL for the home breadcrumb item.
+     */
+    homeUrl: string;
+    /**
+     * The text label for the home breadcrumb item.
+     */
+    homeText: string;
+    breadcrumbItems: {
+        url: string;
+        text: string;
+    }[];
+    isConcatenated: boolean;
+    lastWindowWidth: number;
+    private breadcrumbsNavRef?;
+    private lastItem;
+    validateUrl(): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private waitForBreadcrumbsRef;
+    private updateBreadcrumbItems;
+    private handleResize;
+    private getParentWidth;
+    private checkConcatenation;
+    private handleBreadcrumbItemClick;
+    render(): any;
+}

package/dist/types/components/post-card-control/post-card-control.d.ts

@@ -2,8 +2,8 @@ import { EventEmitter } from '../../stencil-public-runtime';
 /**
  * @class PostCardControl - representing a stencil component
  *
- * @slot default - Content to place into the `default` slot.<p>Markup accepted: <a href="https://developer.mozilla.org/en-US/docs/Glossary/Block-level_contentt">block content</a>.<p className="alert alert-sm alert-warning">Even if it is generally possible, we do not recommend using interactive elements in this slot because the background of the card control is clickable.<br/>This can lead to confusion when the hit box of nested interactive controls is not clearly separated from the background, is invalid HTML and click events bubbling up to the card control will unexpectedly toggle it if they're not captured.<br/>More info: <a href="https://accessibilityinsights.io/info-examples/web/nested-interactive/">https://accessibilityinsights.io/info-examples/web/nested-interactive/</a></p>
- * @slot icon - To insert a custom icon into the named `icon` slot.<p>Markup accepted: <a href="https://developer.mozilla.org/en-US/docs/Glossary/Inline-level_content">inline content</a>.<p className="alert alert-sm alert-info">It is only meant for <code>img</code> or <code>svg</code> elements and overrides the `icon` property.</p>
+ * @slot default - Content to place into the `default` slot.<p>Markup accepted: <a href="https://developer.mozilla.org/en-US/docs/Glossary/Block-level_contentt">block content</a>.<p className="banner banner-sm banner-warning">Even if it is generally possible, we do not recommend using interactive elements in this slot because the background of the card control is clickable.<br/>This can lead to confusion when the hit box of nested interactive controls is not clearly separated from the background, is invalid HTML and click events bubbling up to the card control will unexpectedly toggle it if they're not captured.<br/>More info: <a href="https://accessibilityinsights.io/info-examples/web/nested-interactive/">https://accessibilityinsights.io/info-examples/web/nested-interactive/</a></p>
+ * @slot icon - To insert a custom icon into the named `icon` slot.<p>Markup accepted: <a href="https://developer.mozilla.org/en-US/docs/Glossary/Inline-level_content">inline content</a>.<p className="banner banner-sm banner-info">It is only meant for <code>img</code> or <code>svg</code> elements and overrides the `icon` property.</p>
  */
 export declare class PostCardControl {
     private readonly EVENT_MAP;
@@ -30,12 +30,12 @@ export declare class PostCardControl {
     readonly type: 'checkbox' | 'radio';
     /**
      * Defines the `name` attribute of the control.
-     * <span className="alert alert-sm alert-info">This is a required property, when the control should participate in a native `form`. If not specified, a native `form` will never contain this controls value.</span>
-     * <span className="alert alert-sm alert-info">This is a required property, when the control is used with type `radio`.</span>
+     * <span className="mb-4 banner banner-sm banner-info">This is a required property, when the control should participate in a native `form`. If not specified, a native `form` will never contain this controls value.</span>
+     * <span className="banner banner-sm banner-info">This is a required property, when the control is used with type `radio`.</span>
      */
     readonly name: string;
     /**
-     * Defines the `value` attribute of the control. <span className="alert alert-sm alert-info">This is a required property, when the control is used with type `radio`.</span>
+     * Defines the `value` attribute of the control. <span className="banner banner-sm banner-info">This is a required property, when the control is used with type `radio`.</span>
      */
     readonly value: string;
     /**
@@ -53,7 +53,7 @@ export declare class PostCardControl {
     validity: null | 'true' | 'false';
     /**
      * Defines the icon `name` inside the card.
-     * <span className="alert alert-sm alert-info">If not set the icon will not show up.</span>
+     * <span className="banner banner-sm banner-info">If not set the icon will not show up.</span>
      */
     readonly icon: string;
     /**
@@ -67,7 +67,7 @@ export declare class PostCardControl {
     /**
      * An event emitted whenever the components checked state is toggled.
      * The event payload (emitted under `event.detail.state`) is a boolean: `true` if the component is checked, `false` if it is unchecked.
-     * <span className="alert alert-sm alert-info">If the component is used with type `radio`, it will only emit this event, when the checked state is changing to `true`.</span>
+     * <span className="banner banner-sm banner-info">If the component is used with type `radio`, it will only emit this event, when the checked state is changing to `true`.</span>
      */
     postChange: EventEmitter<{
         state: boolean;
@@ -82,8 +82,8 @@ export declare class PostCardControl {
      * A hidden public method to reset the group controls `checked` state to `false`.
      */
     groupReset(): Promise<void>;
-    validateControlLabel(label?: string): void;
-    validateControlType(type?: "checkbox" | "radio"): void;
+    validateControlLabel(): void;
+    validateControlType(): void;
     updateControlChecked(checked?: boolean): void;
     updateControlDisabled(): void;
     constructor();

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

@@ -0,0 +1,7 @@
+/**
+ * @slot default - Slot for placing visually hidden label in the close button.
+ */
+export declare class PostClosebutton {
+    host: HTMLPostClosebuttonElement;
+    render(): any;
+}

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

@@ -1,6 +1,6 @@
 export declare class PostCollapsibleTrigger {
     private trigger?;
-    private observer;
+    private readonly observer;
     private root?;
     host: HTMLPostCollapsibleTriggerElement;
     /**
@@ -10,29 +10,23 @@ export declare class PostCollapsibleTrigger {
     /**
      * Set the "aria-controls" and "aria-expanded" attributes on the trigger to match the state of the controlled post-collapsible
      */
-    setAriaAttributes(): void;
+    validateAriaAttributes(): void;
     /**
      * Initiate a mutation observer that updates the trigger whenever necessary
      */
     connectedCallback(): void;
-    /**
-     * Attach a "postToggle" event listener to the root node
-     * to update the trigger's "aria-expanded" attribute whenever the controlled post-collapsible is toggled
-     */
-    componentWillLoad(): void;
-    /**
-     * Add the "data-version" to the host element and set the trigger
-     */
     componentDidLoad(): void;
-    /**
-     * Disconnect the mutation observer
-     */
     disconnectedCallback(): void;
     /**
      * Update the "aria-controls" and "aria-expanded" attributes on the trigger button
      */
     update(): Promise<void>;
-    private debouncedUpdate;
+    /**
+     * Private handler for the 'postToggle' event.
+     * This updates the trigger's "aria-expanded" attribute based on the event detail.
+     */
+    private handlePostToggle;
+    private updateAriaAttributes;
     /**
      * Toggle the post-collapsible controlled by the trigger
      */
@@ -45,4 +39,5 @@ export declare class PostCollapsibleTrigger {
      * Find the button and add the proper event listener and ARIA attributes to it
      */
     private setTrigger;
+    render(): any;
 }

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

@@ -0,0 +1,23 @@
+/**
+ * @slot grid-{1|2|3|4}-title - Slot for the accordion headers (mobile).
+ * @slot grid-{1|2|3|4} - Slot for the accordion bodies (mobile) and the grid cells (tablet, desktop).
+ * @slot socialmedia - Slot for the social media links.
+ * @slot app - Slot for the app links.
+ * @slot businesssectors - Slot for the business sectors links.
+ * @slot meta - Slot for the meta links.
+ * @slot copyright - Slot for the copyright text.
+ */
+export declare class PostFooter {
+    host: HTMLPostFooterElement;
+    /**
+     * The label to add to the footer (visually hidden).
+     */
+    readonly label: string;
+    isMobile: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private readonly breakpointChange;
+    private renderAccordion;
+    private renderGrid;
+    render(): any;
+}

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

@@ -0,0 +1,52 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type DEVICE_SIZE = 'mobile' | 'tablet' | 'desktop' | null;
+/**
+ * @slot post-logo - Should be used together with the `<post-logo>` component.
+ * @slot meta-navigation - Holds an `<ul>` with meta navigation links.
+ * @slot post-togglebutton - Holds the mobile menu toggler.
+ * @slot post-language-switch - Should be used with the `<post-language-switch>` component.
+ * @slot title - Holds the application title.
+ * @slot default - Custom controls or content, right aligned in the local header.
+ * @slot post-mainnavigation - Has a default slot because it's only meant to be used in the `<post-header>`.
+ */
+export declare class PostHeader {
+    private firstFocusableEl;
+    private lastFocusableEl;
+    private mobileMenu;
+    private mobileMenuAnimation;
+    private readonly throttledResize;
+    private scrollParentResizeObserver;
+    private localHeaderResizeObserver;
+    get scrollParent(): HTMLElement;
+    host: HTMLPostHeaderElement;
+    device: DEVICE_SIZE;
+    mobileMenuExtended: boolean;
+    megadropdownOpen: boolean;
+    lockBody(newValue: boolean | string, _oldValue: boolean | string, propName: string): void;
+    /**
+     * An event emitted when the device has changed
+     */
+    postUpdateDevice: EventEmitter<DEVICE_SIZE>;
+    constructor();
+    connectedCallback(): void;
+    componentWillRender(): void;
+    componentDidRender(): void;
+    disconnectedCallback(): void;
+    /**
+     * Toggles the mobile navigation.
+     */
+    toggleMobileMenu(force?: boolean): Promise<void>;
+    private megedropdownStateHandler;
+    private getFocusableElements;
+    private keyboardHandler;
+    private handleScrollEvent;
+    private updateLocalHeaderHeight;
+    private updateScrollParentHeight;
+    private handleLinkClick;
+    private handleResize;
+    private handleScrollParentResize;
+    private handleLocalHeaderResize;
+    private switchLanguageSwitchMode;
+    private renderNavigation;
+    render(): any;
+}

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

@@ -14,33 +14,37 @@ export declare class PostIcon {
      * 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 | null;
-    validateBase(newValue?: string): void;
+    validateBase(): void;
     /**
      * When set to `true`, the icon will be flipped horizontally.
      */
     readonly flipH?: boolean;
-    validateFlipH(newValue?: boolean): void;
+    validateFlipH(): void;
     /**
      * When set to `true`, the icon will be flipped vertically.
      */
     readonly flipV?: boolean;
-    validateFlipV(newValue?: boolean): void;
+    validateFlipV(): void;
     /**
      * The name/id of the icon (e.g. 1000, 1001, ...).
      */
     readonly name: string;
-    validateName(newValue?: string): void;
+    validateName(): void;
     /**
      * The number of degree for the css rotate transformation.
      */
     readonly rotate?: number | null;
-    validateRotate(newValue?: number): void;
+    validateRotate(): void;
     /**
      * The number for the css scale transformation.
      */
     readonly scale?: number | null;
-    validateScale(newValue?: number): void;
+    validateScale(): void;
     private getUrl;
+    private getUrlDefinition;
+    private getUrlObject;
+    private definesDomain;
+    private definesSlug;
     private getStyles;
     componentDidLoad(): void;
     render(): any;

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

@@ -0,0 +1,49 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { SwitchVariant } from '../post-language-switch/switch-variants';
+/**
+ * @slot default - Slot for placing the content inside the anchor or button.
+ */
+export declare class PostLanguageOption {
+    host: HTMLPostLanguageOptionElement;
+    /**
+     *  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.
+     */
+    active: boolean;
+    validateActiveProp(): void;
+    /**
+     * To communicate the variant prop from the parent (post-language-switch) component to the child (post-language-option) component. See parent docs for a description about the property itself.
+     */
+    variant?: SwitchVariant | null;
+    /**
+     * The full name of the language. For example, "Deutsch".
+     */
+    name: string;
+    validateName(): 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.
+     */
+    postChange: EventEmitter<string>;
+    /**
+     * An event emitted when the language option is initially active. The payload is the ISO 639 code of the language.
+     */
+    postLanguageOptionInitiallyActive: EventEmitter<string>;
+    /**
+     * Selects the language option programmatically.
+     */
+    select(): Promise<void>;
+    private emitChange;
+    private isNameRequired;
+    render(): any;
+}

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

@@ -0,0 +1,39 @@
+import { SwitchVariant } from './switch-variants';
+export declare class PostLanguageSwitch {
+    private readonly menuId;
+    private get languageOptions();
+    host: HTMLPostLanguageSwitchElement;
+    /**
+     * A title for the list of language options
+     */
+    caption: string;
+    validateCaption(): void;
+    /**
+     * A descriptive text for the list of language options
+     */
+    description: string;
+    validateDescription(): void;
+    /**
+     * Whether the component is rendered as a list or a menu
+     */
+    variant: SwitchVariant;
+    validateVariant(): void;
+    /**
+     * The active language of the language switch
+     */
+    activeLang: string;
+    componentDidLoad(): void;
+    /**
+     * Listen for the postChange event and guard it to run only for events originating from a <post-language-option> element.
+     */
+    handlePostChange(event: CustomEvent<string>): void;
+    /**
+     * Handles cases where the language switch is being rendered before options are available
+     * @param event Initially emitted by <post-langauge-option>
+     */
+    handleInitiallyActive(event: CustomEvent<string>): void;
+    private updateChildrenVariant;
+    private renderList;
+    private renderDropdown;
+    render(): any;
+}

package/dist/types/components/post-language-switch/switch-variants.d.ts

@@ -0,0 +1,2 @@
+export declare const SWITCH_VARIANTS: readonly ["list", "menu"];
+export type SwitchVariant = (typeof SWITCH_VARIANTS)[number];

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

@@ -0,0 +1,5 @@
+export declare class PostLinkarea {
+    host: HTMLPostLinkareaElement;
+    private dispatchClick;
+    render(): any;
+}

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

@@ -0,0 +1,24 @@
+/**
+ * @slot default - Slot for placing the list title.
+ * @slot post-list-item - Slot for placing post-list-item components.
+ */
+export declare class PostList {
+    host: HTMLPostListElement;
+    /**
+     * The unique title of the list that is also referenced in the labelledby
+     */
+    titleId: string;
+    /**
+     * If `true`, the list title will be hidden. Otherwise, it will be displayed.`
+     */
+    readonly titleHidden: boolean;
+    /**
+     * The list can become horizontal by setting `horizontal="true"` or just `horizontal`
+     */
+    readonly horizontal: boolean;
+    private titleEl;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    private checkTitle;
+    render(): any;
+}

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

@@ -0,0 +1,8 @@
+/**
+ * @slot default- Slot for placing the content of the list item.
+ */
+export declare class PostListItem {
+    host: HTMLPostListItemElement;
+    connectedCallback(): void;
+    render(): any;
+}

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

@@ -0,0 +1,46 @@
+export declare class PostMainnavigation {
+    private navbar;
+    private scrollRepeatInterval;
+    private navbarDisableTimer;
+    private resizeObserver;
+    private mutationObserver;
+    canScrollLeft: boolean;
+    canScrollRight: boolean;
+    constructor();
+    componentDidLoad(): void;
+    /**
+     * Disconnects observers and remove event listeners when the main navigation is removed from the DOM.
+     */
+    disconnectedCallback(): void;
+    /**
+     * Stops the repeated scrolling when the mouse button is released.
+     */
+    stopScrolling(): void;
+    private handleMutations;
+    private get navigationItems();
+    /**
+     * Hack to fix the layout shift due to bold text on active elements
+     */
+    private fixLayoutShift;
+    private handleBackButtonClick;
+    /**
+     * Returns whether scrolling is enabled in either the left or right direction.
+     */
+    private get canScroll();
+    /**
+     * Checks if scrolling is possible in either direction (left or right) and updates the state accordingly.
+     */
+    private checkScrollability;
+    /**
+     * Handles the scrolling behavior when a user clicks on the left or right scroll buttons.
+     */
+    private handleScrollButtonClick;
+    private scrollRight;
+    private scrollLeft;
+    /**
+     * Temporarily disables interactions with the navbar during scrolling to prevent accidental clicks.
+     * Re-enables interactions after a brief delay to avoid blocking the user entirely.
+     */
+    private temporarilyDisableNavbar;
+    render(): any;
+}

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

@@ -0,0 +1,59 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class PostMegadropdown {
+    private firstFocusableEl;
+    private lastFocusableEl;
+    device: string;
+    host: HTMLPostMegadropdownElement;
+    /** Tracks the currently active dropdown instance. */
+    private static activeDropdown;
+    private breakpointChange;
+    /**
+     * Holds the current visibility state of the dropdown.
+     * This state is internally managed to track whether the dropdown is open (`true`) or closed (`false`),
+     * and updates automatically when the dropdown is toggled.
+     */
+    isVisible: boolean;
+    /** Holds the current animation class. */
+    animationClass: string | null;
+    /**
+     * Emits when the dropdown is shown or hidden.
+     * The event payload is an object.
+     * `isVisible` is true when the dropdown gets opened and false when it gets closed
+     * `focusParent` determines whether after the closing of the mega dropdown, the focus should go back to the trigger parent or naturally go to the next focusable element in the page
+     **/
+    postToggleMegadropdown: EventEmitter<{
+        isVisible: boolean;
+        focusParent?: boolean;
+    }>;
+    disconnectedCallback(): void;
+    componentWillRender(): void;
+    /**
+     * Toggles the dropdown visibility based on its current state.
+     */
+    toggle(): Promise<void>;
+    /**
+     * Displays the dropdown.
+     */
+    show(): Promise<void>;
+    /**
+     * Hides the dropdown with an animation.
+     */
+    hide(focusParent?: boolean, forceClose?: boolean): Promise<void>;
+    /**
+     * Sets focus to the first focusable element within the component.
+     */
+    focusFirst(): Promise<void>;
+    connectedCallback(): void;
+    /**
+     * Forces the dropdown to close without animation.
+     */
+    private forceClose;
+    private handleAnimationEnd;
+    private handleClickOutside;
+    private addListeners;
+    private removeListeners;
+    private getFocusableElements;
+    private keyboardHandler;
+    private handleTabOutside;
+    render(): any;
+}