@ukic/web-components 3.21.0 → 3.23.0

package/dist/types/components/ic-select/ic-select.d.ts

@@ -1,40 +1,35 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcAriaLive, IcInformationStatusOrEmpty, IcMenuOption, IcSearchMatchPositions, IcMultiValueEventDetail, IcSizes, IcThemeMode } from "../../utils/types";
+import { IcAriaLive, IcInformationStatusOrEmpty, IcSearchMatchPositions, IcMultiValueEventDetail, IcSizes, IcThemeMode } from "../../utils/types";
+import { IcSelectOption, IcSelectOptionFlat } from "./ic-select.types";
 import { IcOptionSelectEventDetail } from "../ic-menu/ic-menu.types";
 /**
  * @slot helper-text - Content is set as the helper text for the select.
  * @slot icon - Content will be placed to the left of the select text input.
  */
 export declare class Select {
-    private anchorEl?;
-    private blurredBecauseButtonPressed;
-    private characterKeyPressTimer?;
-    private clearButton?;
-    private customSelectElement?;
-    private debounceAria?;
-    private hasSetDefaultValue;
-    private hasTimedOut;
-    private inheritedAttributes;
-    private initialOptionsEmpty;
     private inputId;
     private menu?;
     private menuId;
+    private inheritedAttributes;
+    private anchorEl?;
     private nativeSelectElement?;
-    private retryButtonClick;
-    private searchableMenuItemSelected;
-    private searchableSelectElement?;
-    private timeoutTimer?;
-    private ungroupedOptions;
     private hostMutationObserver;
+    private clearButton?;
+    private searchableSelectElement?;
+    private timeoutTimer;
+    private hasTimedOut;
+    private selectElement?;
+    private initialRender;
+    private characterKeyPressTimer?;
+    private pressedCharacters;
     el: HTMLIcSelectElement;
     ariaActiveDescendant?: string;
-    clearButtonFocused: boolean;
     debounceIcInput?: number;
     hiddenInputValue: string | null;
-    noOptions: IcMenuOption[] | null;
-    open: boolean;
-    pressedCharacters: string;
-    searchableSelectInputValue: string | null;
+    hasError: boolean;
+    searchableSelectInputValue: string;
+    selectButtonAriaLiveText: string;
+    selectInputAriaLiveText: string;
     /**
      * If `true`, the disabled state will be set.
      */
@@ -144,18 +139,22 @@ export declare class Select {
      * The text to display as the validation message.
      */
     validationText: string;
+    /**
+     * If `true` and on a mobile or tablet device, the native select element will be used instead of the custom select component for better usability.
+     */
+    useNativeSelectOnMobile: boolean;
     /**
      * If `true`, the loading state will be triggered when fetching options asynchronously.
      */
     loading: boolean;
     loadingHandler(newValue: boolean): void;
+    private clearTimer;
     /**
      * The possible selection options.
      */
-    options: IcMenuOption[];
-    filteredOptions: IcMenuOption[];
-    uniqueOptions: IcMenuOption[];
-    watchOptionsHandler(): void;
+    options: IcSelectOption[];
+    flatOptions: IcSelectOptionFlat[];
+    optionsChangedHandler(): void;
     /**
      * The amount of time, in milliseconds, to wait to trigger the `icInput` event after each keystroke.
      */
@@ -169,9 +168,8 @@ export declare class Select {
      */
     value: string | string[] | null;
     initialValue: string | string[] | null;
-    inputValueToFilter: string | null;
-    currValue: string | string[] | null;
-    valueChangedHandler(): void;
+    valueChangedHandler(newValue: string | string[] | null): void;
+    open: boolean;
     openChangedHandler(): void;
     /**
      * Emitted when the select loses focus.
@@ -214,69 +212,44 @@ export declare class Select {
      * Emitted when the 'retry loading' button is clicked for a searchable variant.
      */
     icRetryLoad: EventEmitter<IcMultiValueEventDetail>;
-    disconnectedCallback(): void;
-    componentWillLoad(): void;
-    componentDidLoad(): void;
-    componentDidRender(): void;
     /**
-     * Sets focus on the input box.
+     * Sets focus on the select component.
      */
     setFocus(): Promise<void>;
-    private hostMutationCallback;
-    private handleRetry;
-    private emitIcChange;
-    private emitIcInput;
-    private setOptions;
-    /**
-     * Processes the provided array of IcMenuOptions, removing duplicates and reporting them with a console.warn
-     * @param options array of IcMenuOptions
-     * @returns a new options object, with all entries possessing a duplicate 'value' field removed
-     */
-    private deduplicateOptions;
-    /**
-     * Loop through options array and for all options with no value, infer it from the label
-     */
-    private setOptionsValuesFromLabels;
-    private setUngroupedOptions;
-    private setTextColor;
-    private setMenuChange;
+    componentDidRender(): void;
+    disconnectedCallback(): void;
+    componentDidLoad(): void;
+    private getValidatedValue;
+    componentWillLoad(): void;
+    private getFilteredOptions;
+    private getOptions;
+    private getFlatOptions;
+    private unflattenOptions;
     private getLabelFromValue;
-    private getMultipleOptionsString;
-    private getFilteredChildMenuOptions;
-    private getValueSortedByOptions;
-    private handleNativeSelectChange;
-    private handleCustomSelectChange;
-    private handleSelectAllChange;
-    private handleMenuChange;
-    private handleMenuKeyPress;
-    private handleFocusIndicatorDisplay;
-    private handleMouseDown;
-    private isExternalFiltering;
+    private getLabelString;
     private handleClick;
     private handleExpandIconMouseDown;
+    private handleBlur;
+    private handleTimeoutBlur;
+    private handleFocus;
     private handleClear;
+    private setTextColor;
+    private handleNativeSelectChange;
+    private handleFocusIndicatorDisplay;
+    private handleKeyDown;
     private handleCharacterKeyDown;
     private handleNativeSelectKeyDown;
-    private handleKeyDown;
-    private handleClearButtonFocus;
-    private handleClearButtonBlur;
-    private handleFilter;
-    /**
-     * Put the select component into loading state.
-     * Replace options with the loading message. If timeout is enabled, set the timeout and once passed, replace options with the loading error message
-     */
-    private triggerLoading;
-    private getValueFromLabel;
+    private handleSelectChange;
+    private handleSelectAllChange;
+    private handleFormReset;
+    private handleRetry;
     private handleSearchableSelectInput;
+    private hostMutationCallback;
+    private updateSelectButtonAriaLive;
     private updateSearchableSelectResultAriaLive;
-    private updateMultiSelectedCountAriaLive;
-    private getDefaultValue;
-    private setDefaultValue;
-    private onFocus;
-    private onBlur;
-    private onTimeoutBlur;
-    private handleFormReset;
-    private clearInput;
+    private updateAriaActiveDescendant;
+    private handleMenuChange;
+    private getDeduplicatedOptions;
     private renderNativeOption;
     render(): any;
 }

package/dist/types/components/ic-select/ic-select.types.d.ts

@@ -0,0 +1,43 @@
+export type IcSelectOption = IcSelectOptionBase | IcSelectOptionGroup | IcSelectOptionLoading | IcSelectOptionTimedOut;
+type IcSelectOptionElement = {
+    component: any;
+    ariaLabel: string;
+};
+export type IcSelectOptionBase = {
+    label: string;
+    value: string;
+    description?: string;
+    disabled?: boolean;
+    recommended?: boolean;
+    icon?: string;
+    hideLabel?: boolean;
+    htmlProps?: Record<string, string>;
+    element?: IcSelectOptionElement;
+};
+export type IcSelectOptionGroup = {
+    label: string;
+    children: IcSelectOptionBase[];
+};
+type IcSelectOptionLoading = {
+    label: string;
+    value: "";
+    loading: true;
+};
+type IcSelectOptionTimedOut = {
+    label: string;
+    value: "";
+    timedOut: true;
+};
+export type IcSelectOptionFlat = {
+    label: string;
+    value: string;
+    description?: string;
+    disabled?: boolean;
+    recommended?: boolean;
+    icon?: string;
+    hideLabel?: boolean;
+    htmlProps?: Record<string, string>;
+    element?: IcSelectOptionElement;
+    group?: string;
+};
+export {};

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

@@ -9,11 +9,12 @@ import { IcExpandedDetail } from "./ic-side-navigation.types";
  */
 export declare class SideNavigation {
     private ANIMATION_DURATION;
-    private IC_NAVIGATION_ITEM;
-    private resizeObserver;
     private COLLAPSED_ICON_LABELS_END;
     private COLLAPSED_ICON_LABELS_START;
+    private IC_NAVIGATION_ITEM;
     private menuButton?;
+    private hostMutationObserver;
+    private resizeObserver;
     el: HTMLIcSideNavigationElement;
     deviceSize: number;
     deviceSizeAppTitle: number;

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

@@ -1,3 +1,4 @@
+import { EventEmitter } from "../../stencil-public-runtime";
 import { Options } from "@popperjs/core";
 import { IcTooltipPlacements } from "./ic-tooltip.types";
 import { IcThemeMode } from "../../utils/types";
@@ -52,6 +53,10 @@ export declare class Tooltip {
     label: string;
     watchLabelHandler(): void;
     popperProps: Partial<Options>;
+    /**
+     * Emitted when the tooltip becomes visible.
+     */
+    icTooltipShow: EventEmitter<void>;
     /**
      * @internal This method allows props to be added to the PopperJS createPopper instance outside of tooltip
      * @param props object - createPopper props set externally

package/dist/types/components.d.ts

@@ -22,9 +22,11 @@ import { IcMenuChangeEventDetail, IcMenuOptionIdEventDetail, IcOptionSelectEvent
 import { Options } from "@popperjs/core";
 import { IcMenuItemVariants } from "./components/ic-menu-item/ic-menu-item.types";
 import { IcNavigationExpandEventDetail, IcNavigationOpenEventDetail } from "./components/ic-navigation-group/ic-navigation-group.types";
-import { IcChangeEventDetail as IcChangeEventDetail1, IcPaginationTypes } from "./components/ic-pagination/ic-pagination.types";
+import { IcChangeEventDetail as IcChangeEventDetail1, IcPaginationAlignmentOptions, IcPaginationLabelTypes, IcPaginationTypes } from "./components/ic-pagination/ic-pagination.types";
+import { IcItemsPerPageChangeEventDetail, IcPageChangeEventDetail } from "./components/ic-pagination-bar/ic-pagination-bar.types";
 import { IcPaginationItemType } from "./components/ic-pagination-item/ic-pagination-item.types";
 import { IcChangeEventDetail as IcChangeEventDetail2 } from "./components/ic-radio-group/ic-radio-group.types";
+import { IcSelectOption } from "./components/ic-select/ic-select.types";
 import { IcExpandedDetail } from "./components/ic-side-navigation/ic-side-navigation.types";
 import { IcSkeletonVariants } from "./components/ic-skeleton/ic-skeleton.types";
 import { IcStatusTagStatuses } from "./components/ic-status-tag/ic-status-tag.types";
@@ -52,9 +54,11 @@ export { IcMenuChangeEventDetail, IcMenuOptionIdEventDetail, IcOptionSelectEvent
 export { Options } from "@popperjs/core";
 export { IcMenuItemVariants } from "./components/ic-menu-item/ic-menu-item.types";
 export { IcNavigationExpandEventDetail, IcNavigationOpenEventDetail } from "./components/ic-navigation-group/ic-navigation-group.types";
-export { IcChangeEventDetail as IcChangeEventDetail1, IcPaginationTypes } from "./components/ic-pagination/ic-pagination.types";
+export { IcChangeEventDetail as IcChangeEventDetail1, IcPaginationAlignmentOptions, IcPaginationLabelTypes, IcPaginationTypes } from "./components/ic-pagination/ic-pagination.types";
+export { IcItemsPerPageChangeEventDetail, IcPageChangeEventDetail } from "./components/ic-pagination-bar/ic-pagination-bar.types";
 export { IcPaginationItemType } from "./components/ic-pagination-item/ic-pagination-item.types";
 export { IcChangeEventDetail as IcChangeEventDetail2 } from "./components/ic-radio-group/ic-radio-group.types";
+export { IcSelectOption } from "./components/ic-select/ic-select.types";
 export { IcExpandedDetail } from "./components/ic-side-navigation/ic-side-navigation.types";
 export { IcSkeletonVariants } from "./components/ic-skeleton/ic-skeleton.types";
 export { IcStatusTagStatuses } from "./components/ic-status-tag/ic-status-tag.types";
@@ -764,6 +768,10 @@ export namespace Components {
           * The optional text that will be displayed before classification to specify relevant country/countries.
          */
         "country"?: string;
+        /**
+          * The custom text that will appear on the banner. If set, the `additionalSelectors`, `country` and `upTo` props are ignored.
+         */
+        "customClassificationText"?: string;
         /**
           * If `true`, the banner will appear inline with the page, instead of sticking to the bottom of the page.
          */
@@ -1284,6 +1292,7 @@ export namespace Components {
           * Determines whether options manually set as values (by pressing 'Enter') when they receive focus using keyboard navigation.
          */
         "activationType": IcActivationTypes;
+        "allowMenuFocus": boolean;
         /**
           * The reference to an anchor element the menu will position itself from when rendered.
          */
@@ -1303,6 +1312,11 @@ export namespace Components {
           * @param event The keyboard event which is available when handleKeyboardOpen is invoked.
          */
         "handleKeyboardOpen": (event: KeyboardEvent) => Promise<void>;
+        /**
+          * Used alongside activationType If menu is open and user navigates options via keyboard, emit optionSelect custom event.
+          * @param event The keyboard event which is available when handleMenuKeydown is invoked.
+         */
+        "handleMenuKeyDown": (event: KeyboardEvent) => Promise<void>;
         "handleSetFirstOption": () => Promise<void>;
         "initPopperJs": (anchor: HTMLElement) => Promise<void>;
         /**
@@ -1627,6 +1641,91 @@ export namespace Components {
          */
         "type"?: IcPaginationTypes;
     }
+    interface IcPaginationBar {
+        /**
+          * The accessible label passed down to the pagination component to provide context for screen reader users.
+         */
+        "accessibleLabel"?: string;
+        /**
+          * Sets the alignment of the items in the pagination bar.
+         */
+        "alignment"?: IcPaginationAlignmentOptions;
+        /**
+          * The current page number to be displayed on the pagination bar.
+         */
+        "currentPage"?: number;
+        /**
+          * If `true`, the 'All' option will be hidden from the 'items per page' select input.
+         */
+        "hideAllFromItemsPerPage"?: boolean;
+        /**
+          * If `true`, the current page of the simple pagination will not be displayed.
+         */
+        "hideCurrentPage"?: boolean;
+        /**
+          * If `true`, the first and last page buttons will not be displayed.
+         */
+        "hideFirstAndLastPageButton"?: boolean;
+        /**
+          * If `true`, the number of total items and current item range or number of total pages and current page will be hidden.
+         */
+        "hideRangeLabel"?: boolean;
+        /**
+          * The text which will be used in place of 'Item' on the pagination bar.
+         */
+        "itemLabel"?: string;
+        /**
+          * The options which will be displayed for 'items per page' select input.
+         */
+        "itemsPerPageOptions"?: {
+    label: string;
+    value: string;
+  }[];
+        /**
+          * If `true`, the pagination bar will display as black in the light theme, and white in dark theme.
+         */
+        "monochrome"?: boolean;
+        /**
+          * The text which will be used in place of 'Page' on the pagination bar.
+         */
+        "pageLabel"?: string;
+        /**
+          * Whether total number of items and current item range or total number of pages and current page is displayed.
+         */
+        "rangeLabelType"?: IcPaginationLabelTypes;
+        /**
+          * If `false`, the value in the items per page control will be set immediately on ArrowUp and ArrowDown instead of when Enter is pressed.
+         */
+        "selectItemsPerPageOnEnter": boolean;
+        /**
+          * The items per page option to be selected.
+         */
+        "selectedItemsPerPage"?: number;
+        /**
+          * If `true`, the pagination bar is set to the first page when the 'items per page' changes
+         */
+        "setToFirstPageOnPaginationChange"?: boolean;
+        /**
+          * If `true`, the 'go to page' control should be displayed.
+         */
+        "showGoToPageControl"?: boolean;
+        /**
+          * If `true`, the select input to control 'items per page' should be displayed.
+         */
+        "showItemsPerPageControl"?: boolean;
+        /**
+          * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        "theme"?: IcThemeMode;
+        /**
+          * Total number of items to be displayed across all pages.
+         */
+        "totalItems": number;
+        /**
+          * Whether the displayed pagination is simple or complex.
+         */
+        "type"?: IcPaginationTypes;
+    }
     interface IcPaginationItem {
         /**
           * If `true`, the pagination item will be disabled.
@@ -2001,7 +2100,7 @@ export namespace Components {
         /**
           * The possible selection options.
          */
-        "options": IcMenuOption[];
+        "options": IcSelectOption[];
         /**
           * The placeholder value to be displayed.
          */
@@ -2027,7 +2126,7 @@ export namespace Components {
          */
         "selectOnEnter": boolean;
         /**
-          * Sets focus on the input box.
+          * Sets focus on the select component.
          */
         "setFocus": () => Promise<void>;
         /**
@@ -2046,6 +2145,10 @@ export namespace Components {
           * If using external filtering, set a timeout for when loading takes too long.
          */
         "timeout"?: number;
+        /**
+          * If `true` and on a mobile or tablet device, the native select element will be used instead of the custom select component for better usability.
+         */
+        "useNativeSelectOnMobile": boolean;
         /**
           * The value of the `aria-live` attribute on the validation message.
          */
@@ -2856,6 +2959,10 @@ export interface IcPaginationCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIcPaginationElement;
 }
+export interface IcPaginationBarCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIcPaginationBarElement;
+}
 export interface IcPaginationItemCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIcPaginationItemElement;
@@ -2920,6 +3027,10 @@ export interface IcToggleButtonGroupCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIcToggleButtonGroupElement;
 }
+export interface IcTooltipCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIcTooltipElement;
+}
 export interface IcTopNavigationCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIcTopNavigationElement;
@@ -3355,6 +3466,24 @@ declare global {
         prototype: HTMLIcPaginationElement;
         new (): HTMLIcPaginationElement;
     };
+    interface HTMLIcPaginationBarElementEventMap {
+        "icPageChange": IcPageChangeEventDetail;
+        "icItemsPerPageChange": IcItemsPerPageChangeEventDetail;
+    }
+    interface HTMLIcPaginationBarElement extends Components.IcPaginationBar, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIcPaginationBarElementEventMap>(type: K, listener: (this: HTMLIcPaginationBarElement, ev: IcPaginationBarCustomEvent<HTMLIcPaginationBarElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIcPaginationBarElementEventMap>(type: K, listener: (this: HTMLIcPaginationBarElement, ev: IcPaginationBarCustomEvent<HTMLIcPaginationBarElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLIcPaginationBarElement: {
+        prototype: HTMLIcPaginationBarElement;
+        new (): HTMLIcPaginationBarElement;
+    };
     interface HTMLIcPaginationItemElementEventMap {
         "paginationItemClick": { page: number | null };
     }
@@ -3712,7 +3841,18 @@ declare global {
         prototype: HTMLIcToggleButtonGroupElement;
         new (): HTMLIcToggleButtonGroupElement;
     };
+    interface HTMLIcTooltipElementEventMap {
+        "icTooltipShow": void;
+    }
     interface HTMLIcTooltipElement extends Components.IcTooltip, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIcTooltipElementEventMap>(type: K, listener: (this: HTMLIcTooltipElement, ev: IcTooltipCustomEvent<HTMLIcTooltipElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIcTooltipElementEventMap>(type: K, listener: (this: HTMLIcTooltipElement, ev: IcTooltipCustomEvent<HTMLIcTooltipElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLIcTooltipElement: {
         prototype: HTMLIcTooltipElement;
@@ -3800,6 +3940,7 @@ declare global {
         "ic-navigation-menu": HTMLIcNavigationMenuElement;
         "ic-page-header": HTMLIcPageHeaderElement;
         "ic-pagination": HTMLIcPaginationElement;
+        "ic-pagination-bar": HTMLIcPaginationBarElement;
         "ic-pagination-item": HTMLIcPaginationItemElement;
         "ic-popover-menu": HTMLIcPopoverMenuElement;
         "ic-radio-group": HTMLIcRadioGroupElement;
@@ -4515,6 +4656,10 @@ declare namespace LocalJSX {
           * The optional text that will be displayed before classification to specify relevant country/countries.
          */
         "country"?: string;
+        /**
+          * The custom text that will appear on the banner. If set, the `additionalSelectors`, `country` and `upTo` props are ignored.
+         */
+        "customClassificationText"?: string;
         /**
           * If `true`, the banner will appear inline with the page, instead of sticking to the bottom of the page.
          */
@@ -5352,6 +5497,99 @@ declare namespace LocalJSX {
          */
         "type"?: IcPaginationTypes;
     }
+    interface IcPaginationBar {
+        /**
+          * The accessible label passed down to the pagination component to provide context for screen reader users.
+         */
+        "accessibleLabel"?: string;
+        /**
+          * Sets the alignment of the items in the pagination bar.
+         */
+        "alignment"?: IcPaginationAlignmentOptions;
+        /**
+          * The current page number to be displayed on the pagination bar.
+         */
+        "currentPage"?: number;
+        /**
+          * If `true`, the 'All' option will be hidden from the 'items per page' select input.
+         */
+        "hideAllFromItemsPerPage"?: boolean;
+        /**
+          * If `true`, the current page of the simple pagination will not be displayed.
+         */
+        "hideCurrentPage"?: boolean;
+        /**
+          * If `true`, the first and last page buttons will not be displayed.
+         */
+        "hideFirstAndLastPageButton"?: boolean;
+        /**
+          * If `true`, the number of total items and current item range or number of total pages and current page will be hidden.
+         */
+        "hideRangeLabel"?: boolean;
+        /**
+          * The text which will be used in place of 'Item' on the pagination bar.
+         */
+        "itemLabel"?: string;
+        /**
+          * The options which will be displayed for 'items per page' select input.
+         */
+        "itemsPerPageOptions"?: {
+    label: string;
+    value: string;
+  }[];
+        /**
+          * If `true`, the pagination bar will display as black in the light theme, and white in dark theme.
+         */
+        "monochrome"?: boolean;
+        /**
+          * Emitted when the items per page option is changed.
+         */
+        "onIcItemsPerPageChange"?: (event: IcPaginationBarCustomEvent<IcItemsPerPageChangeEventDetail>) => void;
+        /**
+          * Emitted when a page is navigated to via the 'go to' input. The `detail` property contains `value` (i.e. the page number) and a `fromItemsPerPage` flag to indicate if the event was triggered by the `icItemsPerPageChange` event also occurring.
+         */
+        "onIcPageChange"?: (event: IcPaginationBarCustomEvent<IcPageChangeEventDetail>) => void;
+        /**
+          * The text which will be used in place of 'Page' on the pagination bar.
+         */
+        "pageLabel"?: string;
+        /**
+          * Whether total number of items and current item range or total number of pages and current page is displayed.
+         */
+        "rangeLabelType"?: IcPaginationLabelTypes;
+        /**
+          * If `false`, the value in the items per page control will be set immediately on ArrowUp and ArrowDown instead of when Enter is pressed.
+         */
+        "selectItemsPerPageOnEnter"?: boolean;
+        /**
+          * The items per page option to be selected.
+         */
+        "selectedItemsPerPage"?: number;
+        /**
+          * If `true`, the pagination bar is set to the first page when the 'items per page' changes
+         */
+        "setToFirstPageOnPaginationChange"?: boolean;
+        /**
+          * If `true`, the 'go to page' control should be displayed.
+         */
+        "showGoToPageControl"?: boolean;
+        /**
+          * If `true`, the select input to control 'items per page' should be displayed.
+         */
+        "showItemsPerPageControl"?: boolean;
+        /**
+          * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        "theme"?: IcThemeMode;
+        /**
+          * Total number of items to be displayed across all pages.
+         */
+        "totalItems": number;
+        /**
+          * Whether the displayed pagination is simple or complex.
+         */
+        "type"?: IcPaginationTypes;
+    }
     interface IcPaginationItem {
         /**
           * If `true`, the pagination item will be disabled.
@@ -5800,7 +6038,7 @@ declare namespace LocalJSX {
         /**
           * The possible selection options.
          */
-        "options"?: IcMenuOption[];
+        "options"?: IcSelectOption[];
         /**
           * The placeholder value to be displayed.
          */
@@ -5841,6 +6079,10 @@ declare namespace LocalJSX {
           * If using external filtering, set a timeout for when loading takes too long.
          */
         "timeout"?: number;
+        /**
+          * If `true` and on a mobile or tablet device, the native select element will be used instead of the custom select component for better usability.
+         */
+        "useNativeSelectOnMobile"?: boolean;
         /**
           * The value of the `aria-live` attribute on the validation message.
          */
@@ -6495,6 +6737,10 @@ declare namespace LocalJSX {
           * The number of lines to display before truncating the text.
          */
         "maxLines"?: number;
+        /**
+          * Emitted when the tooltip becomes visible.
+         */
+        "onIcTooltipShow"?: (event: IcTooltipCustomEvent<void>) => void;
         /**
           * The position of the tooltip in relation to the parent element.
          */
@@ -6627,6 +6873,7 @@ declare namespace LocalJSX {
         "ic-navigation-menu": IcNavigationMenu;
         "ic-page-header": IcPageHeader;
         "ic-pagination": IcPagination;
+        "ic-pagination-bar": IcPaginationBar;
         "ic-pagination-item": IcPaginationItem;
         "ic-popover-menu": IcPopoverMenu;
         "ic-radio-group": IcRadioGroup;
@@ -6702,6 +6949,7 @@ declare module "@stencil/core" {
             "ic-navigation-menu": LocalJSX.IcNavigationMenu & JSXBase.HTMLAttributes<HTMLIcNavigationMenuElement>;
             "ic-page-header": LocalJSX.IcPageHeader & JSXBase.HTMLAttributes<HTMLIcPageHeaderElement>;
             "ic-pagination": LocalJSX.IcPagination & JSXBase.HTMLAttributes<HTMLIcPaginationElement>;
+            "ic-pagination-bar": LocalJSX.IcPaginationBar & JSXBase.HTMLAttributes<HTMLIcPaginationBarElement>;
             "ic-pagination-item": LocalJSX.IcPaginationItem & JSXBase.HTMLAttributes<HTMLIcPaginationItemElement>;
             "ic-popover-menu": LocalJSX.IcPopoverMenu & JSXBase.HTMLAttributes<HTMLIcPopoverMenuElement>;
             "ic-radio-group": LocalJSX.IcRadioGroup & JSXBase.HTMLAttributes<HTMLIcRadioGroupElement>;