@infineon/design-system 0.0.0-stage → 41.11.0

package/dist/types/components/file-upload/file-upload.d.ts

@@ -0,0 +1,205 @@
+import { type EventEmitter } from "../../stencil-public-runtime";
+interface UploadTask {
+    file: File;
+    progress: number;
+    intervalId: number | null;
+    completed: boolean;
+    error?: boolean;
+}
+export type FileUploadErrorReason = "network-error" | "timeout" | "file-too-large" | "unsupported-type" | "invalid-type" | "custom" | (string & {});
+export declare class FileUpload {
+    hostElement: HTMLIfxFileUploadElement;
+    /** Enables drag-and-drop for file uploads. */
+    readonly dragAndDrop: boolean;
+    /** Wether at least one file is rewuired. */
+    readonly required: boolean;
+    /** If true, the upload is disabled and not interactive. */
+    readonly disabled: boolean;
+    /** Maximum file size allowed in megabytes. */
+    readonly maxFileSizeMB: number;
+    /** Default set of allowed file extensions (used internally). Can be extended using `additionalAllowedFileTypes`. */
+    readonly allowedFileTypes?: string | string[];
+    /** Extra file types to allow in addition to the  default ones. */
+    readonly additionalAllowedFileTypes?: string | string[];
+    /** When set to true, allows any file type to be uploaded (no file type restrictions). */
+    readonly allowAnyFileType: boolean;
+    /** Custom file extensions to allow (e.g., 'xml', 'asc', 'cfg'). Recommended format: without dots. Also accepts format with dots like '.xml'. Do not use wildcards like '*.xml'. */
+    readonly allowedFileExtensions?: string | string[];
+    /** Custom function that handels file upload and progress reporting. */
+    readonly uploadHandler?: (file: File, onProgress?: (progress: number) => void) => Promise<void>;
+    private _maxFiles?;
+    get maxFiles(): number | undefined;
+    set maxFiles(value: number | undefined);
+    /** Main label for the upload component. */
+    readonly label: string;
+    /** Error message shown when no file is uploaded but at least one is required. */
+    readonly labelRequiredError: string;
+    /** Text for the “browse files” button or link. */
+    readonly labelBrowseFiles: string;
+    /** Text shown in the drop zone area. */
+    readonly labelDragAndDrop: string;
+    /** Heading label above the list of uploaded files. */
+    readonly labelUploadedFilesHeading: string;
+    /** Message shown when a file is too large ({{size}} is replaced with max size). */
+    readonly labelFileTooLarge: string;
+    /** Message shown when the file type is not allowed. */
+    readonly labelUnsupportedFileType: string;
+    /** Status text for a successfully uploaded file. */
+    readonly labelUploaded: string;
+    /** Generic error message shown when upload fails. */
+    readonly labelUploadFailed: string;
+    /** Template text for listing supported formats and size ({{types}} and {{size}} are replaced). */
+    readonly labelSupportedFormatsTemplate: string;
+    /** Singular word used for “file” in messages. */
+    readonly labelFileSingular: string;
+    /** Plural word used for “files” in messages. */
+    readonly labelFilePlural: string;
+    /** Info text about the maximum number of files allowed ({{count}} and {{files}} are replaced). */
+    readonly labelMaxFilesInfo?: string;
+    /** Error message shown when the max number of files is exceeded. */
+    readonly labelMaxFilesExceeded: string;
+    /** ARIA label for the “browse files” control. */
+    readonly ariaLabelBrowseFiles: string;
+    /** ARIA label for the drop zone area. */
+    readonly ariaLabelDropzone: string;
+    /** ARIA label for the hidden/native file input element. */
+    readonly ariaLabelFileInput: string;
+    /** ARIA label for the “remove file” action. */
+    readonly ariaLabelRemoveFile: string;
+    /** ARIA label for the “cancel upload” action. */
+    readonly ariaLabelCancelUpload: string;
+    /** ARIA label for the “retry upload” action. */
+    readonly ariaLabelRetryUpload: string;
+    /** ARIA label describing that an upload is currently in progress. */
+    readonly ariaLabelUploadingStatus: string;
+    /** ARIA label describing that upload has completed successfully. */
+    readonly ariaLabelUploadedStatus: string;
+    /** ARIA label describing that the upload has failed. */
+    readonly ariaLabelUploadFailedStatus: string;
+    private showDemoStates?;
+    private internalId;
+    isDragOver: boolean;
+    files: File[];
+    uploadTasks: UploadTask[];
+    rejectedSizeFiles: string[];
+    rejectedTypeFiles: string[];
+    requiredError: boolean;
+    statusMessage: {
+        type: "error" | "info" | "success";
+        text: string;
+    } | null;
+    /** Fired when files are added (e.g. via browse or drop). */
+    ifxFileUploadAdd: EventEmitter<{
+        addedFiles: File[];
+        files: File[];
+    }>;
+    /** Fired when a file is removed from the list. */
+    ifxFileUploadRemove: EventEmitter<{
+        removedFile: File;
+        files: File[];
+    }>;
+    /** Fired whenever the list of selected files changes. */
+    ifxFileUploadChange: EventEmitter<{
+        files: File[];
+    }>;
+    /** Fired when an upload-related error occurs. */
+    ifxFileUploadError: EventEmitter<{
+        errorType: string;
+        file: File;
+        message: string;
+        reason?: string;
+    }>;
+    /** Fired when a file fails validation before upload. */
+    ifxFileUploadInvalid: EventEmitter<{
+        file: File;
+        reason: string;
+    }>;
+    /** Fired when upload starts for a file. */
+    ifxFileUploadStart: EventEmitter<{
+        file: File;
+    }>;
+    /** Fired when a single file upload finishes successfully. */
+    ifxFileUploadComplete: EventEmitter<{
+        file: File;
+    }>;
+    /** Fired when all file uploads have finished successfully. */
+    ifxFileUploadAllComplete: EventEmitter<{
+        files: File[];
+    }>;
+    /** Fired when an ongoing upload is aborted/cancelled. */
+    ifxFileUploadAbort: EventEmitter<{
+        file: File;
+    }>;
+    /** Fired when files are dropped onto the drop zone. */
+    ifxFileUploadDrop: EventEmitter<{
+        droppedFiles: File[];
+        acceptedFiles: File[];
+        rejectedFiles: File[];
+    }>;
+    /** Fired when the upload area is clicked (typically to open file dialog). */
+    ifxFileUploadClick: EventEmitter<void>;
+    /** Fired when the user tries to add more than the allowed number of files. */
+    ifxFileUploadMaxFilesExceeded: EventEmitter<{
+        maxFiles: number;
+        attempted: number;
+    }>;
+    /** Fired after validating the current files (valid or invalid). */
+    ifxFileUploadValidation: EventEmitter<{
+        valid: boolean;
+    }>;
+    /** Fired when the user retries uploading a file after a failure. */
+    ifxFileUploadRetry: EventEmitter<{
+        file: File;
+    }>;
+    private fileInputEl;
+    private extensionToMimeMap;
+    private validateRequired;
+    private pluralize;
+    private getNormalizedFileTypes;
+    private getNormalizedFileExtensions;
+    /**
+     * Enhanced file type validation that supports:
+     * - allowAnyFileType flag for unrestricted uploads (overrides all restrictions)
+     * - allowedFileTypes (predefined extensions mapped to MIME types) - if not set and allowedFileExtensions is set, ignored
+     * - additionalAllowedFileTypes (MIME types)
+     * - allowedFileExtensions (custom extensions) - if only this is set, only these extensions are allowed
+     */
+    private isFileTypeAllowed;
+    /**
+     * Extracts file extension from filename (without dot)
+     */
+    private getFileExtension;
+    private getLabelFromMimeType;
+    private handleFileChange;
+    private handleDrop;
+    private handleDragOver;
+    private handleDragLeave;
+    private processFiles;
+    private retryUpload;
+    private checkAndEmitAllComplete;
+    private resetFileInput;
+    private updateTaskProgress;
+    private startUpload;
+    private cancelUpload;
+    private removeFile;
+    private clearRejectedFile;
+    private splitFileNameParts;
+    private getFileIcon;
+    private formatSize;
+    private getAcceptAttribute;
+    private getFormattedProgressText;
+    private getAdditionalMimeTypes;
+    private getSupportedFileText;
+    private getFormattedFileTooLargeText;
+    private renderStatusMessage;
+    private isInputDisabled;
+    componentDidLoad(): Promise<void>;
+    /** Storybook Demo */
+    injectDemoState(): Promise<void>;
+    /** Storybook Demo */
+    triggerDemoValidation(): Promise<void>;
+    render(): any;
+    private renderUploadArea;
+    private renderDragAndDropArea;
+}
+export {};

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

@@ -0,0 +1,4 @@
+export declare class FooterColumn {
+    el: HTMLIfxFooterColumnElement;
+    render(): any;
+}

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

@@ -0,0 +1,11 @@
+export declare class Footer {
+    el: HTMLIfxFooterElement;
+    currentYear: number;
+    /** Text shown in the footer copyright area. */
+    readonly copyrightText: string;
+    private hasColSlot;
+    private hasSocialsSlot;
+    componentWillLoad(): void;
+    componentDidLoad(): Promise<void>;
+    render(): any;
+}

package/dist/types/components/icon/figma_code_connect_icons.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,31 @@
+import { type IconData } from "@infineon/infineon-icons";
+import { type EventEmitter } from "../../stencil-public-runtime";
+export declare class IfxIcon {
+    el: HTMLIfxIconElement;
+    /**
+     * The icon that will be displayed.
+     * Refer to the [Icon Library](https://infineon.github.io/infineon-design-system-stencil/storybook/?path=/docs/icon-library--development) for available icons.
+     */
+    readonly icon: string;
+    /**
+     * Emitted when the provided icon name is invalid and the component fails to render an icon.
+     *  The event detail contains a boolean value `true` indicating an error occurred.
+     */
+    consoleError: EventEmitter<boolean>;
+    /**
+     * The resolved icon as SVG string.
+     */
+    iconSvg: IconData;
+    updateIcon(_newIcon: string): void;
+    private convertStringToHtml;
+    private convertHtmlToObject;
+    private convertPathsToVnode;
+    private getSVG;
+    private constructIcon;
+    private setIcon;
+    private isInsideAgGrid;
+    private isInsideChoices;
+    componentWillLoad(): void;
+    componentDidLoad(): Promise<void>;
+    render(): any;
+}

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

@@ -0,0 +1,57 @@
+export declare class IconButton {
+    el: HTMLIfxIconButtonElement;
+    /**
+     * Visual style of the icon button.
+     * Primary has a solid background, secondary has an outline and tertiary is just the icon with no background or border.
+     * @default "primary"
+     */
+    readonly variant: "primary" | "secondary" | "tertiary";
+    /**
+     * Size of the icon button.
+     * Options: xs (20px), s (32px), m (36px) and l (40px).
+     * @default "m"
+     */
+    readonly size: "xs" | "s" | "m" | "l";
+    /**
+     * Disables the button and blocks user interaction.
+     * @default false
+     */
+    readonly disabled: boolean;
+    /**
+     * Icon name rendered by the nested `ifx-icon`.
+     * Refer to the [Icon Library](https://infineon.github.io/infineon-design-system-stencil/storybook/?path=/docs/icon-library--development) for available icons.
+     */
+    readonly icon: string;
+    updateIcon(newIcon: string): void;
+    /**
+     * URL to navigate to; when provided, the component renders as a link.
+     */
+    readonly href: string;
+    /**
+     * Target for link navigation when `href` is set.
+     * @default "_self"
+     */
+    readonly target: string;
+    /**
+     * Visual shape of the icon button.
+     * @default "round"
+     */
+    readonly shape: "round" | "square";
+    /**
+     * Accessible name announced by assistive technologies.
+     */
+    readonly ariaLabelText: string | null;
+    internalIcon: string;
+    private focusableElement;
+    /**
+     * Sets focus on the icon button. If the button is rendered as a link, it focuses the anchor element; otherwise, it focuses the button element.
+     */
+    setFocus(): Promise<void>;
+    handleClick(event: Event): void;
+    componentWillLoad(): void;
+    componentDidLoad(): Promise<void>;
+    render(): any;
+    private getVariantClass;
+    private getSizeClass;
+    private getClassNames;
+}

package/dist/types/components/icons-preview/icons-preview.d.ts

@@ -0,0 +1,18 @@
+export declare class IconsPreview {
+    iconsArray: string[];
+    isCopied: boolean;
+    copiedIndex: number;
+    copiedIcon: string | null;
+    htmlTag: string;
+    iconName: string;
+    searchTerm: string;
+    el: HTMLIfxIconsPreviewElement;
+    private handleCopiedText;
+    private copyIconText;
+    private copyHtmlString;
+    get filteredIcons(): string[];
+    private handleIconFilter;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    render(): any;
+}

package/dist/types/components/indicator/indicator.d.ts

@@ -0,0 +1,17 @@
+export declare class Indicator {
+    el: HTMLIfxIndicatorElement;
+    filteredNumber: string | number;
+    /** Renders the indicator with an inverted color scheme for dark backgrounds. */
+    readonly inverted: boolean;
+    /** Provide a short, descriptive text that explains the indicator's meaning or value. */
+    readonly ariaLabelText: string | null;
+    /** Sets variant of the Indicator */
+    readonly variant: string;
+    /** Numeric value to display when using the 'number' variant */
+    readonly number: number;
+    private handleNumber;
+    componentWillLoad(): void;
+    componentDidLoad(): Promise<void>;
+    componentWillUpdate(): void;
+    render(): any;
+}

package/dist/types/components/link/link.d.ts

@@ -0,0 +1,48 @@
+export declare class Link {
+    el: HTMLIfxLinkElement;
+    /**
+     * URL the link navigates to.
+     * @default undefined
+     */
+    readonly href: string;
+    /**
+     * Target window for the link.
+     * @default "_self"
+     */
+    readonly target: string;
+    /**
+     * Visual style variant of the link.
+     * @default "bold"
+     */
+    readonly variant: "underlined" | "bold" | "title" | "menu";
+    /**
+     * Font size of the link.
+     * @default "m"
+     */
+    readonly size: "s" | "m" | "l" | "xl";
+    /**
+     * Disables interaction.
+     * @default false
+     */
+    readonly disabled: boolean;
+    /**
+     * Optional filename or download hint for the linked resource.
+     * @default undefined
+     */
+    readonly download: string;
+    /**
+     * Accessible label announced by assistive technologies.
+     * @default undefined
+     */
+    readonly ariaLabelText: string | null;
+    internalHref: string;
+    internalTarget: string;
+    internalVariant: string;
+    private setInternalStates;
+    componentWillRender(): void;
+    componentDidLoad(): Promise<void>;
+    render(): any;
+    private getSizeClass;
+    private getVariantClass;
+    private linkClassNames;
+}

package/dist/types/components/modal/modal.d.ts

@@ -0,0 +1,97 @@
+/** biome-ignore-all lint/a11y/noNoninteractiveTabindex: focus traps are required to keep users focus within the modal */
+import { type EventEmitter } from "../../stencil-public-runtime";
+type CloseEventTrigger = "CLOSE_BUTTON" | "ESCAPE_KEY" | "BACKDROP";
+export interface BeforeCloseEventDetail {
+    trigger: CloseEventTrigger;
+}
+export declare class IfxModal {
+    hostElement: HTMLIfxModalElement;
+    /**
+     * Controls the visibility of the modal. Can be used for both declarative and programmatic control.
+     */
+    opened?: boolean;
+    /**
+     * The title text displayed in the modal header. This should be a concise description of the modal's purpose.
+     */
+    readonly caption: string;
+    /**
+     * Provides an accessible label for the modal caption, enhancing screen reader support. If not provided, the `caption` prop will be used as the accessible name.
+     */
+    readonly captionAriaLabel: string | null;
+    /**
+     * Determines whether clicking on the overlay (backdrop) will close the modal.
+     */
+    readonly closeOnOverlayClick: boolean;
+    /**
+     * Defines the visual style of the modal, indicating its purpose or importance.
+     */
+    readonly variant: "default" | "alert-brand" | "alert-danger";
+    /**
+     * Specifies the size of the modal, allowing it to adapt to different content needs and screen sizes.
+     */
+    readonly size: "s" | "m" | "l";
+    /**
+     * Allows the display of a specific icon in the modal header when the variant is set to an alert type.
+     * Refer to the [Icon Library](https://infineon.github.io/infineon-design-system-stencil/storybook/?path=/docs/icon-library--development) for available icons.
+     */
+    readonly alertIcon: string;
+    /**
+     * Controls the visibility of the close button in the modal header.
+     */
+    readonly showCloseButton: boolean;
+    /**
+     * Provides an accessible label for the close button, enhancing screen reader support. If not provided, a default label of "Close modal" will be used.
+     */
+    readonly closeButtonAriaLabel: string;
+    /**
+     * Emitted when the modal finishes opening and the opening animation completes. No additional data is provided with this event.
+     */
+    ifxOpen: EventEmitter;
+    /**
+     * Emitted when the modal finishes closing and the closing animation completes. No additional data is provided with this event.
+     */
+    ifxClose: EventEmitter;
+    /**
+     * Emitted immediately when the `opened` state changes (before animations).
+     * The event detail contains `{ opened: boolean }` with the new state.
+     * Use this event for two-way binding (v-model in Vue, [(ngModel)] in Angular).
+     */
+    ifxOpenedChange: EventEmitter<{
+        opened: boolean;
+    }>;
+    showModal: boolean;
+    slotButtonsPresent: boolean;
+    private modalContainer;
+    private focusableElements;
+    private closeButton;
+    private resizeTimeout;
+    private handleResize;
+    componentDidLoad(): Promise<void>;
+    disconnectedCallback(): void;
+    componentWillRender(): void;
+    private handleComponentOverflow;
+    private getFirstFocusableElement;
+    private getLastFocusableElement;
+    private handleTopFocus;
+    private handleBottomFocus;
+    private attemptFocus;
+    private open;
+    private close;
+    private handleKeypress;
+    private doBeforeClose;
+    openedChanged(newValue: boolean): void;
+    /**
+     * Public method to programmatically open the modal.
+     */
+    openModal(): Promise<void>;
+    /**
+     * Public method to programmatically close the modal.
+     */
+    closeModal(): Promise<void>;
+    private handleOverlayClick;
+    private handleContentUpdate;
+    private handleButtonsSlotChange;
+    private isModalContentContainerHeightReachedViewport;
+    render(): any;
+}
+export {};

package/dist/types/components/navigation/navbar/navbar-item.d.ts

@@ -0,0 +1,73 @@
+import { type EventEmitter } from "../../../stencil-public-runtime";
+export declare class NavbarItem {
+    el: HTMLIfxNavbarItemElement;
+    /** Whether to show the label text next to the icon. */
+    readonly showLabel: boolean;
+    /** Icon to display for this navigation item. */
+    readonly icon: string;
+    /** URL the navigation item should navigate to when clicked. */
+    readonly href: string;
+    /** Where to open the link (same tab, new tab, etc.). */
+    readonly target: string;
+    /** If true, hides this item on mobile viewports. */
+    readonly hideOnMobile: boolean;
+    internalHref: string;
+    isMenuItem: boolean;
+    hasChildNavItems: boolean;
+    isSidebarMenuItem: boolean;
+    itemPosition: string;
+    /** Fired when the navigation item is activated or clicked. */
+    ifxNavItem: EventEmitter;
+    /** Number badge shown as an indicator on the item. */
+    readonly numberIndicator: number;
+    /** If true, shows a simple dot indicator instead of a number. */
+    readonly dotIndicator: boolean;
+    handleOutsideClick(event: MouseEvent): void;
+    /** Hides this navigation item component. */
+    hideComponent(): Promise<void>;
+    /** Shows this navigation item component. */
+    showComponent(): Promise<void>;
+    /** Toggles visibility of the child menu and its arrow icon. */
+    toggleChildren(action: any): Promise<void>;
+    /** Moves child nav items into the sub-layer menu (e.g. for mobile view). */
+    moveChildComponentsIntoSubLayerMenu(): Promise<void>;
+    private getSubLayerBackButton;
+    /** Toggles visibility between the first layer item and its second-layer menu. */
+    toggleFirstLayerItem(actionOne: any, actionTwo: any): Promise<void>;
+    private openSubLayerMenu;
+    /** Marks this item as a menu entry and shows the right-arrow icon if needed. */
+    addMenuItemClass(): Promise<void>;
+    /** Moves child components back into the main navbar from the sub-layer menu. */
+    moveChildComponentsBackIntoNavbar(): Promise<void>;
+    private getRightArrowIcon;
+    private getChevronDownIconWrapper;
+    /** Returns this item from a deeper layer back to its first-layer state. */
+    returnToFirstLayer(): Promise<void>;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    componentDidUpdate(): void;
+    /** Sets the menu item position (left or right) based on its menu placement. */
+    setMenuItemPosition(): Promise<void>;
+    private handleClassList;
+    private getNavbarItems;
+    private getNavBarItem;
+    private getSubLayerMenu;
+    private relocateItemsToFirstlayer;
+    private setHref;
+    private checkIfItemIsNested;
+    private checkIfItemHasChildren;
+    /** Applies side-specific classes when the item is placed on the right side. */
+    setItemSideSpecifications(): Promise<boolean>;
+    private getItemMenu;
+    private getParentItemMenu;
+    private closeItemMenu;
+    private getItemMenuPosition;
+    private toggleItemMenu;
+    private handleNestedLayerMenu;
+    private isFocusWithinComponent;
+    private handleLabelWrapper;
+    private handleItemGap;
+    private removeEmptyItem;
+    private handleKeyDown;
+    render(): any;
+}

package/dist/types/components/navigation/navbar/navbar-profile.d.ts

@@ -0,0 +1,41 @@
+export declare class NavbarProfile {
+    el: HTMLIfxNavbarProfileElement;
+    /** Whether to show the user name label next to the avatar. */
+    readonly showLabel: boolean;
+    /** URL the avatar item should navigate to when clicked. */
+    readonly href: string;
+    /** Image URL used for the avatar. */
+    readonly imageUrl: string;
+    /** Where to open the link (same tab, new tab, etc.). */
+    readonly target: string;
+    /** Alternative text for the avatar image. */
+    readonly alt: string;
+    /** Displayed user name associated with the avatar. */
+    readonly userName: string;
+    internalHref: string;
+    isMenuItem: boolean;
+    hasChildNavItems: boolean;
+    internalImageUrl: any;
+    private defaultProfileImage;
+    handleOutsideClick(event: MouseEvent): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    /** Hides this avatar item component. */
+    hideComponent(): Promise<void>;
+    /** Shows this avatar item component. */
+    showComponent(): Promise<void>;
+    private handleClassList;
+    private getNavbarItems;
+    private getNavBarItem;
+    private relocateUsingSlot;
+    private appendNavItemToMenu;
+    private isValidHttpUrl;
+    private setImage;
+    private setHref;
+    private setProfileGap;
+    private getItemMenu;
+    private closeItemMenu;
+    private toggleItemMenu;
+    private handleProfileMenuKeyDown;
+    render(): any;
+}

package/dist/types/components/navigation/navbar/navbar.d.ts

@@ -0,0 +1,70 @@
+import { type EventEmitter } from "../../../stencil-public-runtime";
+export declare class Navbar {
+    el: HTMLIfxNavbarElement;
+    /** Name of the application shown in the navbar. */
+    readonly applicationName: string;
+    hasLeftMenuItems: boolean;
+    /** If true, the navbar is fixed (e.g. sticks to the top). */
+    readonly fixed: boolean;
+    /** If true, shows the logo and application name in the navbar. */
+    readonly showLogoAndAppname: boolean;
+    searchBarIsOpen: "left" | "right" | undefined;
+    isMobileMenuOpen: boolean;
+    hasLeftSearchBar: boolean;
+    hasRightSearchBar: boolean;
+    hasLeftItems: boolean;
+    hasRightItems: boolean;
+    /** Link URL for the logo click action. */
+    readonly logoHref: string;
+    internalLogoHref: string | undefined;
+    /** Where to open the logo link (same tab, new tab, etc.). */
+    readonly logoHrefTarget: string;
+    internalLogoHrefTarget: string;
+    /** Fired when the mobile navbar menu is opened or closed. */
+    ifxNavbarMobileMenuIsOpen: EventEmitter | undefined;
+    private initialSearchBarOpen;
+    private isResizing;
+    private mobileSlotObserver;
+    private addEventListenersToHandleCustomFocusState;
+    clearFirstLayerMenu(event: CustomEvent): void;
+    private isNavbarItem;
+    private isNavbarSearchBar;
+    private hasShowLabel;
+    private storeShowLabel;
+    private hideLabelOnMobile;
+    private restoreLabelAfterMobile;
+    private getWrappers;
+    private hideNavItems;
+    private showNavItems;
+    handleSearchBarToggle(event: CustomEvent): void;
+    private handleSidebar;
+    private handleBodyScroll;
+    private setItemMenuPosition;
+    private setMenuItemChildrenPosition;
+    private getMediaQueryList;
+    componentDidLoad(): Promise<void>;
+    private syncSearchBarSlots;
+    private syncNavigationSlots;
+    private handleNavigationSlotChange;
+    private handleSearchSlotChange;
+    private handleMobileMenuBottom;
+    private handleLogoHrefAndTarget;
+    componentWillLoad(): void;
+    private setInitialStateOnSearchBar;
+    private getSearchBarLeftWrapper;
+    private getMobileMenuTop;
+    private getMobileMenuBottom;
+    private handleBurgerIcon;
+    private getSearchBar;
+    private moveNavItemsToSidebar;
+    private watchForSlotReset;
+    disconnectedCallback(): void;
+    private RemoveSpaceOnStorybookSnippet;
+    private getPaneClass;
+    private renderLogo;
+    private renderLeftNavigation;
+    private renderRightNavigation;
+    private renderMobileMenuButton;
+    private renderMobileSidebar;
+    render(): any;
+}