@ukic/canary-web-components 2.0.0-canary.0 → 2.0.0-canary.1

package/dist/types/components.d.ts

@@ -10,6 +10,9 @@ import { IcButtonTooltipPlacement, IcButtonTypes, IcButtonVariants } from "./com
 import { IcChangeEventDetail } from "./components/ic-checkbox-group/ic-checkbox-group.types";
 import { IcChipAppearance } from "./components/ic-chip/ic-chip.types";
 import { IcProtectiveMarkings } from "./components/ic-classification-banner/ic-classification-banner.types";
+import { IcDataTableColumnObject, IcDataTableDensityOptions, IcDataTableSortOrderOptions } from "./components/ic-data-table/ic-data-table.types";
+import { IcChangeEventDetail as IcChangeEventDetail1, IcPaginationAlignmentOptions, IcPaginationControlTypes, IcPaginationTypes } from "./components/ic-pagination/ic-pagination.types";
+import { IcEmptyStateAlignment } from "./components/ic-empty-state/ic-empty-state.types";
 import { IcFooterBreakpoints } from "./components/ic-footer/ic-footer.types";
 import { IcHeroContentAlignments } from "./components/ic-hero/ic-hero.types";
 import { IcAriaLiveModeVariants } from "./components/ic-input-validation/ic-input-validation.types";
@@ -17,7 +20,6 @@ import { IcLoadingSizes, IcLoadingTypes } from "./components/ic-loading-indicato
 import { IcSearchBarBlurEventDetail, IcSearchBarSearchModes } from "./components/ic-search-bar/ic-search-bar.types";
 import { IcMenuChangeEventDetail, IcMenuOptionIdEventDetail, IcOptionSelectEventDetail } from "./components/ic-menu/ic-menu.types";
 import { IcMenuItemVariants } from "./components/ic-menu-item/ic-menu-item.types";
-import { IcChangeEventDetail as IcChangeEventDetail1, IcPaginationAlignmentOptions, IcPaginationControlTypes, IcPaginationTypes } from "./components/ic-pagination/ic-pagination.types";
 import { IcThemeForeground as IcThemeForeground1 } from "./interface";
 import { IcPaginationItemType } from "./components/ic-pagination-item/ic-pagination-item.types";
 import { IcChangeEventDetail as IcChangeEventDetail2 } from "./components/ic-radio-group/ic-radio-group.types";
@@ -29,12 +31,14 @@ import { IcSwitchChangeEventDetail } from "./components/ic-switch/ic-switch.type
 import { IcTabClickEventDetail, IcTabSelectEventDetail } from "./components/ic-tab/ic-tab.types";
 import { IcAriaAutocompleteTypes, IcTextFieldInputModes, IcTextFieldTypes } from "./components/ic-text-field/ic-text-field.types";
 import { IcTooltipPlacements } from "./components/ic-tooltip/ic-tooltip.types";
-import { IcDataTableColumnObject, IcDataTableDensityOptions, IcDataTableSortOrderOptions } from "./components/ic-data-table/ic-data-table.types";
 export { IcActivationTypes, IcAdditionalFieldTypes, IcAlignment, IcAutocompleteTypes, IcAutocorrectStates, IcBlurEventDetail, IcInformationStatusOrEmpty, IcMenuOption, IcOrientation, IcSearchMatchPositions, IcSizes, IcStatusVariants, IcTheme, IcThemeForeground, IcThemeForegroundNoDefault, IcTypographyVariants, IcValueEventDetail } from "./utils/types";
 export { IcButtonTooltipPlacement, IcButtonTypes, IcButtonVariants } from "./components/ic-button/ic-button.types";
 export { IcChangeEventDetail } from "./components/ic-checkbox-group/ic-checkbox-group.types";
 export { IcChipAppearance } from "./components/ic-chip/ic-chip.types";
 export { IcProtectiveMarkings } from "./components/ic-classification-banner/ic-classification-banner.types";
+export { IcDataTableColumnObject, IcDataTableDensityOptions, IcDataTableSortOrderOptions } from "./components/ic-data-table/ic-data-table.types";
+export { IcChangeEventDetail as IcChangeEventDetail1, IcPaginationAlignmentOptions, IcPaginationControlTypes, IcPaginationTypes } from "./components/ic-pagination/ic-pagination.types";
+export { IcEmptyStateAlignment } from "./components/ic-empty-state/ic-empty-state.types";
 export { IcFooterBreakpoints } from "./components/ic-footer/ic-footer.types";
 export { IcHeroContentAlignments } from "./components/ic-hero/ic-hero.types";
 export { IcAriaLiveModeVariants } from "./components/ic-input-validation/ic-input-validation.types";
@@ -42,7 +46,6 @@ export { IcLoadingSizes, IcLoadingTypes } from "./components/ic-loading-indicato
 export { IcSearchBarBlurEventDetail, IcSearchBarSearchModes } from "./components/ic-search-bar/ic-search-bar.types";
 export { IcMenuChangeEventDetail, IcMenuOptionIdEventDetail, IcOptionSelectEventDetail } from "./components/ic-menu/ic-menu.types";
 export { IcMenuItemVariants } from "./components/ic-menu-item/ic-menu-item.types";
-export { IcChangeEventDetail as IcChangeEventDetail1, IcPaginationAlignmentOptions, IcPaginationControlTypes, IcPaginationTypes } from "./components/ic-pagination/ic-pagination.types";
 export { IcThemeForeground as IcThemeForeground1 } from "./interface";
 export { IcPaginationItemType } from "./components/ic-pagination-item/ic-pagination-item.types";
 export { IcChangeEventDetail as IcChangeEventDetail2 } from "./components/ic-radio-group/ic-radio-group.types";
@@ -54,7 +57,6 @@ export { IcSwitchChangeEventDetail } from "./components/ic-switch/ic-switch.type
 export { IcTabClickEventDetail, IcTabSelectEventDetail } from "./components/ic-tab/ic-tab.types";
 export { IcAriaAutocompleteTypes, IcTextFieldInputModes, IcTextFieldTypes } from "./components/ic-text-field/ic-text-field.types";
 export { IcTooltipPlacements } from "./components/ic-tooltip/ic-tooltip.types";
-export { IcDataTableColumnObject, IcDataTableDensityOptions, IcDataTableSortOrderOptions } from "./components/ic-data-table/ic-data-table.types";
 export namespace Components {
     interface IcAlert {
         /**
@@ -426,6 +428,66 @@ export namespace Components {
          */
         "value": string;
     }
+    interface IcDataTable {
+        /**
+          * The title for the table only visible to screen readers.
+         */
+        "caption": string;
+        /**
+          * The column headers for the table.
+         */
+        "columns": IcDataTableColumnObject[];
+        /**
+          * The row content for the table.
+         */
+        "data": { [key: string]: any }[];
+        /**
+          * Set the density of the table including font and padding.
+         */
+        "density"?: IcDataTableDensityOptions;
+        /**
+          * Applies a border to the table container.
+         */
+        "embedded"?: boolean;
+        /**
+          * If `true`, column headers will not be visible.
+         */
+        "hideColumnHeaders"?: boolean;
+        /**
+          * Sets the props for the pagination bar.
+         */
+        "paginationOptions"?: {
+    itemsPerPage?: { label: string; value: string }[];
+    type?: IcPaginationTypes;
+    control?: IcPaginationControlTypes;
+    itemsPerPageControl?: boolean;
+    goToPageControl?: boolean;
+    alignment?: IcPaginationAlignmentOptions;
+  };
+        /**
+          * If `true`, adds a pagination bar to the bottom of the table.
+         */
+        "showPagination"?: boolean;
+        /**
+          * Sets the order columns will be sorted in and allows for 'default' sorts to be added.
+         */
+        "sortOptions"?: {
+    sortOrders: IcDataTableSortOrderOptions[];
+    defaultColumn?: string;
+  };
+        /**
+          * If `true`, allows table columns to be sorted using applied sort buttons.
+         */
+        "sortable"?: boolean;
+        /**
+          * If `true`, column headers will remain at the top of the table when scrolling vertically.
+         */
+        "stickyColumnHeaders"?: boolean;
+        /**
+          * If `true`, row headers will remain to the left when scrolling horizontally.
+         */
+        "stickyRowHeaders"?: boolean;
+    }
     interface IcDialog {
         /**
           * If a status is set, sets the heading for the displayed alert.
@@ -490,6 +552,32 @@ export namespace Components {
     }
     interface IcDivider {
     }
+    interface IcEmptyState {
+        /**
+          * The alignment of the empty state container.
+         */
+        "aligned"?: IcEmptyStateAlignment;
+        /**
+          * The body text rendered in the empty state container.
+         */
+        "body"?: string;
+        /**
+          * The number of lines of body text to display before truncating.
+         */
+        "bodyMaxLines"?: number;
+        /**
+          * The title rendered in the empty state container.
+         */
+        "heading": string;
+        /**
+          * The size of the image or icon used in the image slot.
+         */
+        "imageSize"?: IcSizes;
+        /**
+          * The subtitle rendered in the empty state container.
+         */
+        "subheading"?: string;
+    }
     interface IcFooter {
         /**
           * The alignment of the section containers used within the footer.
@@ -803,6 +891,10 @@ export namespace Components {
           * The label for the input element.
          */
         "inputLabel": string;
+        /**
+          * The custom name for the label field for IcMenuOption.
+         */
+        "labelField": string;
         /**
           * The ID of the menu.
          */
@@ -828,6 +920,10 @@ export namespace Components {
           * The value of the currently selected option.
          */
         "value": string;
+        /**
+          * The custom name for the value field for IcMenuOption.
+         */
+        "valueField": string;
     }
     interface IcMenuGroup {
         /**
@@ -1307,6 +1403,10 @@ export namespace Components {
           * The label for the search bar.
          */
         "label": string;
+        /**
+          * The custom name for the label field to correspond with the IcMenuOption type.
+         */
+        "labelField"?: string;
         /**
           * Trigger loading state when fetching options asyncronously
          */
@@ -1363,6 +1463,10 @@ export namespace Components {
           * The value of the search input.
          */
         "value": string;
+        /**
+          * The custom name for the value field to correspond with the IcMenuOption type.
+         */
+        "valueField"?: string;
     }
     interface IcSectionContainer {
         /**
@@ -1942,7 +2046,7 @@ export namespace Components {
          */
         "applyVerticalMargins"?: boolean;
         /**
-          * If `true`, the typography will have a bold font weight. Note: This will only take affect on h3, body and code-large variants.
+          * If `true`, the typography will have a bold font weight. Note: This will have no impact on variants that already use an equivalent or higher font weight (h1, h2, and subtitle-large).
          */
         "bold"?: boolean;
         /**
@@ -1966,66 +2070,6 @@ export namespace Components {
          */
         "variant"?: IcTypographyVariants;
     }
-    interface IcUnstableDataTable {
-        /**
-          * The title for the table only visible to screen readers.
-         */
-        "caption": string;
-        /**
-          * The column headers for the table.
-         */
-        "columns": IcDataTableColumnObject[];
-        /**
-          * The row content for the table.
-         */
-        "data": { [key: string]: any }[];
-        /**
-          * Set the density of the table including font and padding.
-         */
-        "density"?: IcDataTableDensityOptions;
-        /**
-          * Applies a border to the table container.
-         */
-        "embedded"?: boolean;
-        /**
-          * If `true`, column headers will not be visible.
-         */
-        "hideColumnHeaders"?: boolean;
-        /**
-          * Sets the props for the pagination bar.
-         */
-        "paginationOptions"?: {
-    itemsPerPage?: { label: string; value: string }[];
-    type?: IcPaginationTypes;
-    control?: IcPaginationControlTypes;
-    itemsPerPageControl?: boolean;
-    goToPageControl?: boolean;
-    alignment?: IcPaginationAlignmentOptions;
-  };
-        /**
-          * If `true`, adds a pagination bar to the bottom of the table.
-         */
-        "showPagination"?: boolean;
-        /**
-          * Sets the order columns will be sorted in and allows for 'default' sorts to be added.
-         */
-        "sortOptions"?: {
-    sortOrders: IcDataTableSortOrderOptions[];
-    defaultColumn?: string;
-  };
-        /**
-          * If `true`, allows table columns to be sorted using applied sort buttons.
-         */
-        "sortable"?: boolean;
-        /**
-          * If `true`, column headers will remain at the top of the table when scrolling vertically.
-         */
-        "stickyColumnHeaders"?: boolean;
-        /**
-          * If `true`, row headers will remain to the left when scrolling horizontally.
-         */
-        "stickyRowHeaders"?: boolean;
-    }
 }
 export interface IcAlertCustomEvent<T> extends CustomEvent<T> {
     detail: T;
@@ -2204,6 +2248,12 @@ declare global {
         prototype: HTMLIcDataRowElement;
         new (): HTMLIcDataRowElement;
     };
+    interface HTMLIcDataTableElement extends Components.IcDataTable, HTMLStencilElement {
+    }
+    var HTMLIcDataTableElement: {
+        prototype: HTMLIcDataTableElement;
+        new (): HTMLIcDataTableElement;
+    };
     interface HTMLIcDialogElement extends Components.IcDialog, HTMLStencilElement {
     }
     var HTMLIcDialogElement: {
@@ -2216,6 +2266,12 @@ declare global {
         prototype: HTMLIcDividerElement;
         new (): HTMLIcDividerElement;
     };
+    interface HTMLIcEmptyStateElement extends Components.IcEmptyState, HTMLStencilElement {
+    }
+    var HTMLIcEmptyStateElement: {
+        prototype: HTMLIcEmptyStateElement;
+        new (): HTMLIcEmptyStateElement;
+    };
     interface HTMLIcFooterElement extends Components.IcFooter, HTMLStencilElement {
     }
     var HTMLIcFooterElement: {
@@ -2486,12 +2542,6 @@ declare global {
         prototype: HTMLIcTypographyElement;
         new (): HTMLIcTypographyElement;
     };
-    interface HTMLIcUnstableDataTableElement extends Components.IcUnstableDataTable, HTMLStencilElement {
-    }
-    var HTMLIcUnstableDataTableElement: {
-        prototype: HTMLIcUnstableDataTableElement;
-        new (): HTMLIcUnstableDataTableElement;
-    };
     interface HTMLElementTagNameMap {
         "ic-alert": HTMLIcAlertElement;
         "ic-back-to-top": HTMLIcBackToTopElement;
@@ -2505,8 +2555,10 @@ declare global {
         "ic-classification-banner": HTMLIcClassificationBannerElement;
         "ic-data-entity": HTMLIcDataEntityElement;
         "ic-data-row": HTMLIcDataRowElement;
+        "ic-data-table": HTMLIcDataTableElement;
         "ic-dialog": HTMLIcDialogElement;
         "ic-divider": HTMLIcDividerElement;
+        "ic-empty-state": HTMLIcEmptyStateElement;
         "ic-footer": HTMLIcFooterElement;
         "ic-footer-link": HTMLIcFooterLinkElement;
         "ic-footer-link-group": HTMLIcFooterLinkGroupElement;
@@ -2552,7 +2604,6 @@ declare global {
         "ic-tooltip": HTMLIcTooltipElement;
         "ic-top-navigation": HTMLIcTopNavigationElement;
         "ic-typography": HTMLIcTypographyElement;
-        "ic-unstable-data-table": HTMLIcUnstableDataTableElement;
     }
 }
 declare namespace LocalJSX {
@@ -2940,6 +2991,66 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    interface IcDataTable {
+        /**
+          * The title for the table only visible to screen readers.
+         */
+        "caption": string;
+        /**
+          * The column headers for the table.
+         */
+        "columns": IcDataTableColumnObject[];
+        /**
+          * The row content for the table.
+         */
+        "data"?: { [key: string]: any }[];
+        /**
+          * Set the density of the table including font and padding.
+         */
+        "density"?: IcDataTableDensityOptions;
+        /**
+          * Applies a border to the table container.
+         */
+        "embedded"?: boolean;
+        /**
+          * If `true`, column headers will not be visible.
+         */
+        "hideColumnHeaders"?: boolean;
+        /**
+          * Sets the props for the pagination bar.
+         */
+        "paginationOptions"?: {
+    itemsPerPage?: { label: string; value: string }[];
+    type?: IcPaginationTypes;
+    control?: IcPaginationControlTypes;
+    itemsPerPageControl?: boolean;
+    goToPageControl?: boolean;
+    alignment?: IcPaginationAlignmentOptions;
+  };
+        /**
+          * If `true`, adds a pagination bar to the bottom of the table.
+         */
+        "showPagination"?: boolean;
+        /**
+          * Sets the order columns will be sorted in and allows for 'default' sorts to be added.
+         */
+        "sortOptions"?: {
+    sortOrders: IcDataTableSortOrderOptions[];
+    defaultColumn?: string;
+  };
+        /**
+          * If `true`, allows table columns to be sorted using applied sort buttons.
+         */
+        "sortable"?: boolean;
+        /**
+          * If `true`, column headers will remain at the top of the table when scrolling vertically.
+         */
+        "stickyColumnHeaders"?: boolean;
+        /**
+          * If `true`, row headers will remain to the left when scrolling horizontally.
+         */
+        "stickyRowHeaders"?: boolean;
+    }
     interface IcDialog {
         /**
           * If a status is set, sets the heading for the displayed alert.
@@ -3004,6 +3115,32 @@ declare namespace LocalJSX {
     }
     interface IcDivider {
     }
+    interface IcEmptyState {
+        /**
+          * The alignment of the empty state container.
+         */
+        "aligned"?: IcEmptyStateAlignment;
+        /**
+          * The body text rendered in the empty state container.
+         */
+        "body"?: string;
+        /**
+          * The number of lines of body text to display before truncating.
+         */
+        "bodyMaxLines"?: number;
+        /**
+          * The title rendered in the empty state container.
+         */
+        "heading": string;
+        /**
+          * The size of the image or icon used in the image slot.
+         */
+        "imageSize"?: IcSizes;
+        /**
+          * The subtitle rendered in the empty state container.
+         */
+        "subheading"?: string;
+    }
     interface IcFooter {
         /**
           * The alignment of the section containers used within the footer.
@@ -3303,6 +3440,10 @@ declare namespace LocalJSX {
           * The label for the input element.
          */
         "inputLabel": string;
+        /**
+          * The custom name for the label field for IcMenuOption.
+         */
+        "labelField"?: string;
         /**
           * The ID of the menu.
          */
@@ -3327,6 +3468,10 @@ declare namespace LocalJSX {
           * The value of the currently selected option.
          */
         "value": string;
+        /**
+          * The custom name for the value field for IcMenuOption.
+         */
+        "valueField"?: string;
     }
     interface IcMenuGroup {
         /**
@@ -3806,6 +3951,10 @@ declare namespace LocalJSX {
           * The label for the search bar.
          */
         "label": string;
+        /**
+          * The custom name for the label field to correspond with the IcMenuOption type.
+         */
+        "labelField"?: string;
         /**
           * Trigger loading state when fetching options asyncronously
          */
@@ -3902,6 +4051,10 @@ declare namespace LocalJSX {
           * The value of the search input.
          */
         "value"?: string;
+        /**
+          * The custom name for the value field to correspond with the IcMenuOption type.
+         */
+        "valueField"?: string;
     }
     interface IcSectionContainer {
         /**
@@ -4493,7 +4646,7 @@ declare namespace LocalJSX {
          */
         "applyVerticalMargins"?: boolean;
         /**
-          * If `true`, the typography will have a bold font weight. Note: This will only take affect on h3, body and code-large variants.
+          * If `true`, the typography will have a bold font weight. Note: This will have no impact on variants that already use an equivalent or higher font weight (h1, h2, and subtitle-large).
          */
         "bold"?: boolean;
         /**
@@ -4517,66 +4670,6 @@ declare namespace LocalJSX {
          */
         "variant"?: IcTypographyVariants;
     }
-    interface IcUnstableDataTable {
-        /**
-          * The title for the table only visible to screen readers.
-         */
-        "caption": string;
-        /**
-          * The column headers for the table.
-         */
-        "columns": IcDataTableColumnObject[];
-        /**
-          * The row content for the table.
-         */
-        "data"?: { [key: string]: any }[];
-        /**
-          * Set the density of the table including font and padding.
-         */
-        "density"?: IcDataTableDensityOptions;
-        /**
-          * Applies a border to the table container.
-         */
-        "embedded"?: boolean;
-        /**
-          * If `true`, column headers will not be visible.
-         */
-        "hideColumnHeaders"?: boolean;
-        /**
-          * Sets the props for the pagination bar.
-         */
-        "paginationOptions"?: {
-    itemsPerPage?: { label: string; value: string }[];
-    type?: IcPaginationTypes;
-    control?: IcPaginationControlTypes;
-    itemsPerPageControl?: boolean;
-    goToPageControl?: boolean;
-    alignment?: IcPaginationAlignmentOptions;
-  };
-        /**
-          * If `true`, adds a pagination bar to the bottom of the table.
-         */
-        "showPagination"?: boolean;
-        /**
-          * Sets the order columns will be sorted in and allows for 'default' sorts to be added.
-         */
-        "sortOptions"?: {
-    sortOrders: IcDataTableSortOrderOptions[];
-    defaultColumn?: string;
-  };
-        /**
-          * If `true`, allows table columns to be sorted using applied sort buttons.
-         */
-        "sortable"?: boolean;
-        /**
-          * If `true`, column headers will remain at the top of the table when scrolling vertically.
-         */
-        "stickyColumnHeaders"?: boolean;
-        /**
-          * If `true`, row headers will remain to the left when scrolling horizontally.
-         */
-        "stickyRowHeaders"?: boolean;
-    }
     interface IntrinsicElements {
         "ic-alert": IcAlert;
         "ic-back-to-top": IcBackToTop;
@@ -4590,8 +4683,10 @@ declare namespace LocalJSX {
         "ic-classification-banner": IcClassificationBanner;
         "ic-data-entity": IcDataEntity;
         "ic-data-row": IcDataRow;
+        "ic-data-table": IcDataTable;
         "ic-dialog": IcDialog;
         "ic-divider": IcDivider;
+        "ic-empty-state": IcEmptyState;
         "ic-footer": IcFooter;
         "ic-footer-link": IcFooterLink;
         "ic-footer-link-group": IcFooterLinkGroup;
@@ -4637,7 +4732,6 @@ declare namespace LocalJSX {
         "ic-tooltip": IcTooltip;
         "ic-top-navigation": IcTopNavigation;
         "ic-typography": IcTypography;
-        "ic-unstable-data-table": IcUnstableDataTable;
     }
 }
 export { LocalJSX as JSX };
@@ -4656,8 +4750,10 @@ declare module "@stencil/core" {
             "ic-classification-banner": LocalJSX.IcClassificationBanner & JSXBase.HTMLAttributes<HTMLIcClassificationBannerElement>;
             "ic-data-entity": LocalJSX.IcDataEntity & JSXBase.HTMLAttributes<HTMLIcDataEntityElement>;
             "ic-data-row": LocalJSX.IcDataRow & JSXBase.HTMLAttributes<HTMLIcDataRowElement>;
+            "ic-data-table": LocalJSX.IcDataTable & JSXBase.HTMLAttributes<HTMLIcDataTableElement>;
             "ic-dialog": LocalJSX.IcDialog & JSXBase.HTMLAttributes<HTMLIcDialogElement>;
             "ic-divider": LocalJSX.IcDivider & JSXBase.HTMLAttributes<HTMLIcDividerElement>;
+            "ic-empty-state": LocalJSX.IcEmptyState & JSXBase.HTMLAttributes<HTMLIcEmptyStateElement>;
             "ic-footer": LocalJSX.IcFooter & JSXBase.HTMLAttributes<HTMLIcFooterElement>;
             "ic-footer-link": LocalJSX.IcFooterLink & JSXBase.HTMLAttributes<HTMLIcFooterLinkElement>;
             "ic-footer-link-group": LocalJSX.IcFooterLinkGroup & JSXBase.HTMLAttributes<HTMLIcFooterLinkGroupElement>;
@@ -4703,7 +4799,6 @@ declare module "@stencil/core" {
             "ic-tooltip": LocalJSX.IcTooltip & JSXBase.HTMLAttributes<HTMLIcTooltipElement>;
             "ic-top-navigation": LocalJSX.IcTopNavigation & JSXBase.HTMLAttributes<HTMLIcTopNavigationElement>;
             "ic-typography": LocalJSX.IcTypography & JSXBase.HTMLAttributes<HTMLIcTypographyElement>;
-            "ic-unstable-data-table": LocalJSX.IcUnstableDataTable & JSXBase.HTMLAttributes<HTMLIcUnstableDataTableElement>;
         }
     }
 }

package/dist/types/stencil-public-runtime.d.ts

@@ -62,7 +62,7 @@ export interface PropOptions {
     /**
      * The name of the associated DOM attribute.
      * Stencil uses different heuristics to determine the default name of the attribute,
-     * but using this property, you can override the default behaviour.
+     * but using this property, you can override the default behavior.
      */
     attribute?: string | null;
     /**
@@ -128,7 +128,7 @@ export interface ListenOptions {
      * By default, Stencil uses several heuristics to determine if
      * it must attach a `passive` event listener or not.
      *
-     * Using the `passive` option can be used to change the default behaviour.
+     * Using the `passive` option can be used to change the default behavior.
      * Please see https://developers.google.com/web/updates/2016/06/passive-event-listeners for further information.
      */
     passive?: boolean;
@@ -432,7 +432,7 @@ export interface QueueApi {
 /**
  * Host
  */
-interface HostAttributes {
+export interface HostAttributes {
     class?: string | {
         [className: string]: boolean;
     };
@@ -471,7 +471,7 @@ export interface FunctionalUtilities {
     /**
      * Utility for reading the children of a functional component at runtime.
      * Since the Stencil runtime uses a different interface for children it is
-     * not recommendeded to read the children directly, and is preferable to use
+     * not recommended to read the children directly, and is preferable to use
      * this utility to, for instance, perform a side effect for each child.
      */
     forEach: (children: VNode[], cb: (vnode: ChildNode, index: number, array: ChildNode[]) => void) => void;
@@ -872,6 +872,8 @@ export declare namespace JSXBase {
     }
     interface ImgHTMLAttributes<T> extends HTMLAttributes<T> {
         alt?: string;
+        crossOrigin?: string;
+        crossorigin?: string;
         decoding?: 'async' | 'auto' | 'sync';
         importance?: 'low' | 'auto' | 'high';
         height?: number | string;
@@ -930,6 +932,8 @@ export declare namespace JSXBase {
         minlength?: number | string;
         multiple?: boolean;
         name?: string;
+        onSelect?: (event: Event) => void;
+        onselect?: (event: Event) => void;
         pattern?: string;
         placeholder?: string;
         readOnly?: boolean;
@@ -1143,6 +1147,8 @@ export declare namespace JSXBase {
         minLength?: number;
         minlength?: number | string;
         name?: string;
+        onSelect?: (event: Event) => void;
+        onselect?: (event: Event) => void;
         placeholder?: string;
         readOnly?: boolean;
         readonly?: boolean | string;
@@ -1289,7 +1295,7 @@ export declare namespace JSXBase {
         clipPathUnits?: number | string;
         'clip-rule'?: number | string;
         'color-interpolation'?: number | string;
-        'color-interpolation-filters'?: 'auto' | 's-rGB' | 'linear-rGB' | 'inherit';
+        'color-interpolation-filters'?: 'auto' | 'sRGB' | 'linearRGB';
         'color-profile'?: number | string;
         'color-rendering'?: number | string;
         contentScriptType?: number | string;
@@ -1619,8 +1625,14 @@ export declare namespace JSXBase {
         onAnimationEndCapture?: (event: AnimationEvent) => void;
         onAnimationIteration?: (event: AnimationEvent) => void;
         onAnimationIterationCapture?: (event: AnimationEvent) => void;
+        onTransitionCancel?: (event: TransitionEvent) => void;
+        onTransitionCancelCapture?: (event: TransitionEvent) => void;
         onTransitionEnd?: (event: TransitionEvent) => void;
         onTransitionEndCapture?: (event: TransitionEvent) => void;
+        onTransitionRun?: (event: TransitionEvent) => void;
+        onTransitionRunCapture?: (event: TransitionEvent) => void;
+        onTransitionStart?: (event: TransitionEvent) => void;
+        onTransitionStartCapture?: (event: TransitionEvent) => void;
     }
 }
 export interface JSXAttributes<T = Element> {

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

@@ -60,7 +60,7 @@ export declare const isEmptyString: (value: string) => boolean;
  * @param options - list of menu items
  * @returns - label corresponding to value
  */
-export declare const getLabelFromValue: (value: string, options: IcMenuOption[]) => string | undefined;
+export declare const getLabelFromValue: (value: string, options: IcMenuOption[], valueField?: string, labelField?: string) => string | undefined;
 /**
  * Filters the options based on the search string.
  * @param options - array of options
@@ -69,7 +69,7 @@ export declare const getLabelFromValue: (value: string, options: IcMenuOption[])
  * @param position - whether the search string matches the start of or anywhere in the options
  * @returns filtered array of options
  */
-export declare const getFilteredMenuOptions: (options: IcMenuOption[], includeDescriptions: boolean, searchString: string, position: IcSearchMatchPositions) => IcMenuOption[];
+export declare const getFilteredMenuOptions: (options: IcMenuOption[], includeDescriptions: boolean, searchString: string, position: IcSearchMatchPositions, labelField?: string) => IcMenuOption[];
 export declare const deviceSizeMatches: (size: number) => boolean;
 export declare const getCurrentDeviceSize: () => number;
 export declare const getCssProperty: (cssVar: string) => string;