@ukic/web-components 3.0.0-alpha.1 → 3.0.0-alpha.11

package/dist/types/components.d.ts

@@ -5,12 +5,13 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { IcActivationTypes, IcAdditionalFieldTypes, IcAlignment, IcAutocompleteTypes, IcAutocorrectStates, IcBlurEventDetail, IcColor, IcDeviceSizes, IcEmphasisType, IcInformationStatusOrEmpty, IcMenuOption, IcOrientation, IcSearchMatchPositions, IcSelectMethodTypes, IcSelectTypes, IcSizes, IcSizesNoLarge, IcStatusVariants, IcTheme, IcThemeForeground, IcThemeForegroundNoDefault, IcThemeMode, IcTypographyVariants, IcValueEventDetail } from "./utils/types";
+import { IcActivationTypes, IcAdditionalFieldTypes, IcAlignment, IcAutocompleteTypes, IcAutocorrectStates, IcBlurEventDetail, IcBrand, IcBrandForeground, IcButtonTooltipPlacement, IcColor, IcDeviceSizes, IcEmphasisType, IcIconPlacementOptions, IcInformationStatusOrEmpty, IcMenuOption, IcOrientation, IcSearchMatchPositions, IcSelectMethodTypes, IcSelectTypes, IcSizes, IcSizesNoLarge, IcStatusVariants, IcThemeMode, IcTypographyVariants, IcValueEventDetail } from "./utils/types";
 import { IcBackToTopVariants } from "./components/ic-back-to-top/ic-back-to-top.types";
 import { IcBadgePositions, IcBadgeTypes, IcBadgeVariants } from "./components/ic-badge/ic-badge.types";
-import { IcButtonTooltipPlacement, IcButtonTypes, IcButtonVariants } from "./components/ic-button/ic-button.types";
+import { IcButtonTypes, IcButtonVariants } from "./components/ic-button/ic-button.types";
 import { IcChangeEventDetail } from "./components/ic-checkbox-group/ic-checkbox-group.types";
 import { IcProtectiveMarkings } from "./components/ic-classification-banner/ic-classification-banner.types";
+import { IcDividerLabelPlacement, IcDividerStyles, IcDividerWeights } from "./components/ic-divider/ic-divider.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";
@@ -33,12 +34,13 @@ import { IcAriaAutocompleteTypes, IcTextFieldInputModes, IcTextFieldTypes } from
 import { IcChangeEventDetail as IcChangeEventDetail3 } from "./components/ic-toggle-button-group/ic-toggle-button-group.types";
 import { IcTooltipPlacements } from "./components/ic-tooltip/ic-tooltip.types";
 import { Options } from "@popperjs/core";
-export { IcActivationTypes, IcAdditionalFieldTypes, IcAlignment, IcAutocompleteTypes, IcAutocorrectStates, IcBlurEventDetail, IcColor, IcDeviceSizes, IcEmphasisType, IcInformationStatusOrEmpty, IcMenuOption, IcOrientation, IcSearchMatchPositions, IcSelectMethodTypes, IcSelectTypes, IcSizes, IcSizesNoLarge, IcStatusVariants, IcTheme, IcThemeForeground, IcThemeForegroundNoDefault, IcThemeMode, IcTypographyVariants, IcValueEventDetail } from "./utils/types";
+export { IcActivationTypes, IcAdditionalFieldTypes, IcAlignment, IcAutocompleteTypes, IcAutocorrectStates, IcBlurEventDetail, IcBrand, IcBrandForeground, IcButtonTooltipPlacement, IcColor, IcDeviceSizes, IcEmphasisType, IcIconPlacementOptions, IcInformationStatusOrEmpty, IcMenuOption, IcOrientation, IcSearchMatchPositions, IcSelectMethodTypes, IcSelectTypes, IcSizes, IcSizesNoLarge, IcStatusVariants, IcThemeMode, IcTypographyVariants, IcValueEventDetail } from "./utils/types";
 export { IcBackToTopVariants } from "./components/ic-back-to-top/ic-back-to-top.types";
 export { IcBadgePositions, IcBadgeTypes, IcBadgeVariants } from "./components/ic-badge/ic-badge.types";
-export { IcButtonTooltipPlacement, IcButtonTypes, IcButtonVariants } from "./components/ic-button/ic-button.types";
+export { IcButtonTypes, IcButtonVariants } from "./components/ic-button/ic-button.types";
 export { IcChangeEventDetail } from "./components/ic-checkbox-group/ic-checkbox-group.types";
 export { IcProtectiveMarkings } from "./components/ic-classification-banner/ic-classification-banner.types";
+export { IcDividerLabelPlacement, IcDividerStyles, IcDividerWeights } from "./components/ic-divider/ic-divider.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";
@@ -63,7 +65,6 @@ export { IcTooltipPlacements } from "./components/ic-tooltip/ic-tooltip.types";
 export { Options } from "@popperjs/core";
 export namespace Components {
     interface IcAccordion {
-        "appearance"?: IcThemeForeground;
         /**
           * If `true`, the accordion will be disabled.
          */
@@ -88,16 +89,16 @@ export namespace Components {
           * The size of the accordion.
          */
         "size"?: IcSizes;
+        /**
+          * 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;
     }
     interface IcAccordionGroup {
         /**
           * The accessible button label to provide more context to the 'See all/Hide all' button for screen reader users.
          */
         "accessibleButtonLabel": string;
-        /**
-          * The appearance of the accordion group, e.g dark, or light.
-         */
-        "appearance": IcThemeForeground;
         /**
           * If `true`, the accordion will load in an expanded state.
          */
@@ -118,6 +119,10 @@ export namespace Components {
           * The size of the accordion.
          */
         "size"?: IcSizes;
+        /**
+          * 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;
     }
     interface IcAlert {
         /**
@@ -137,9 +142,13 @@ export namespace Components {
          */
         "message"?: string;
         /**
-          * If `true`, the default icon for the neutral variant will be appear on the left of the alert.
+          * If `true`, the default icon for the neutral variant will appear on the left of the alert.
          */
         "showDefaultIcon": 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;
         /**
           * If `true`, the title and message will appear above and below instead of inline.
          */
@@ -154,6 +163,10 @@ export namespace Components {
           * The ID of the element to jump back to when the link is clicked.
          */
         "target": string;
+        /**
+          * 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;
         /**
           * The variant of the button to render
          */
@@ -245,10 +258,6 @@ export namespace Components {
           * If `fileUpload` is set to `true`, this is the accepted list of file types.
          */
         "accept"?: string;
-        /**
-          * The appearance of the button, e.g. dark, light, or the default.
-         */
-        "appearance"?: IcThemeForeground;
         "ariaControlsId": string | boolean;
         "ariaOwnsId": string | boolean;
         /**
@@ -319,6 +328,10 @@ export namespace Components {
           * If `true`, the button will be in loading state.
          */
         "loading"?: boolean;
+        /**
+          * If `true`, the button will display as monochromatic in either `light` or `dark` theme.
+         */
+        "monochrome"?: boolean;
         /**
           * If `fileUpload` is set to `true`, this boolean determines whether multiple files are accepted.
          */
@@ -347,6 +360,10 @@ export namespace Components {
           * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
          */
         "target"?: string;
+        /**
+          * 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;
         /**
           * The position of the tooltip in relation to the button.
          */
@@ -388,7 +405,7 @@ export namespace Components {
         /**
           * The URL that the clickable card link points to. If set, the clickable card will render as an "a" tag, otherwise it will render as a button.
          */
-        "href"?: string | undefined;
+        "href"?: string;
         /**
           * The human language of the linked URL.
          */
@@ -417,6 +434,10 @@ export namespace Components {
           * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
          */
         "target"?: string;
+        /**
+          * 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;
     }
     interface IcCheckbox {
         /**
@@ -424,7 +445,7 @@ export namespace Components {
          */
         "additionalFieldDisplay": IcAdditionalFieldTypes;
         /**
-          * If `true`, the checkbox will be set to the checked state.
+          * If `true`, the checkbox will be set to the checked state. This is only the initial state and will be updated to unchecked if the checkbox is clicked.
          */
         "checked"?: boolean;
         /**
@@ -471,6 +492,10 @@ export namespace Components {
           * The size of the checkbox to be displayed. This does not affect the font size of the label. If a checkbox is contained in a checkbox group, this will override the size set on checkbox group.
          */
         "size"?: IcSizes;
+        /**
+          * 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;
         /**
           * The value for the checkbox.
          */
@@ -505,6 +530,10 @@ export namespace Components {
           * The size of the checkboxes to be displayed. This does not affect the font size of the label.
          */
         "size"?: IcSizes;
+        /**
+          * 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;
         /**
           * The validation status - e.g. 'error' | 'warning' | 'success'.
          */
@@ -516,13 +545,17 @@ export namespace Components {
     }
     interface IcChip {
         /**
-          * The custom chip colour. This prop will be applied to the chip component if `dismissible` is set to `false`. Can be a hex value e.g. "#ff0000", RGB e.g. "rgb(255, 0, 0)", or RGBA e.g. "rgba(255, 0, 0, 1)".
+          * The custom chip colour. This will override the theme colour. Can be a hex value e.g. "#ff0000", RGB e.g. "rgb(255, 0, 0)", or RGBA e.g. "rgba(255, 0, 0, 1)".
          */
         "customColor"?: IcColor;
         /**
           * If `true`, the chip will appear disabled.
          */
         "disabled"?: boolean;
+        /**
+          * The text in the dismiss button tooltip and aria label.
+         */
+        "dismissLabel"?: string;
         /**
           * If `true`, the chip will have a close button at the end to dismiss it.
          */
@@ -540,7 +573,11 @@ export namespace Components {
          */
         "size"?: IcSizes;
         /**
-          * If `true`, the outlined variant of chip will have a transparent background rather than white.
+          * Sets the chip to the dark or light theme colors. "inherit" will set the color based on the system settings or ic-theme component. Setting the "customColor" prop will override this.
+         */
+        "theme"?: "dark" | "light" | "inherit";
+        /**
+          * If `true`, the outlined variant of chip will have a transparent background rather than the theme defined color.
          */
         "transparentBackground"?: boolean;
         /**
@@ -604,7 +641,7 @@ export namespace Components {
     }
     interface IcDialog {
         /**
-          * If set to `false`, default buttons or slotted dialog controls will not be displayed.
+          * If set to `false`, default buttons will not be shown, but slotted dialog controls will still be displayed.
          */
         "buttons"?: boolean;
         /**
@@ -620,7 +657,7 @@ export namespace Components {
          */
         "confirmDialog": () => Promise<void>;
         /**
-          * If default buttons are displayed, sets the 'primary' or rightmost button to the destructive variant. Stops initial focus being set on the 'primary' or rightmost default or slotted button.
+          * If 'true', sets the 'primary' or rightmost button to the destructive variant. Stops initial focus being set on the 'primary' or rightmost default or slotted button.
          */
         "destructive"?: boolean;
         /**
@@ -655,8 +692,40 @@ export namespace Components {
           * Sets the maximum and minimum height and width for the dialog.
          */
         "size"?: "small" | "medium" | "large";
+        /**
+          * 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;
     }
     interface IcDivider {
+        /**
+          * The line style of the divider.
+         */
+        "borderStyle": IcDividerStyles;
+        /**
+          * The label for the divider. The label placement will need to be set for the label to be displayed correctly.
+         */
+        "label"?: string;
+        /**
+          * The position the label is placed on the divider. `Left` and `right` placement is only applicable when orientation is set to `horizontal`. `Top` and `bottom` placement is only applicable when orientation is set to `vertical`. `Center` placement is applicable for both orientations.
+         */
+        "labelPlacement"?: IcDividerLabelPlacement;
+        /**
+          * If `true`, the divider will be displayed in a grey colour.
+         */
+        "monochrome"?: boolean;
+        /**
+          * The orientation of the divider.
+         */
+        "orientation": IcOrientation;
+        /**
+          * 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 | IcBrandForeground;
+        /**
+          * The thickness of the divider.
+         */
+        "weight": IcDividerWeights;
     }
     interface IcEmptyState {
         /**
@@ -683,6 +752,10 @@ export namespace Components {
           * The subtitle rendered in the empty state container.
          */
         "subheading"?: string;
+        /**
+          * 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;
     }
     interface IcFooter {
         /**
@@ -784,15 +857,13 @@ export namespace Components {
         /**
           * The appearance of the horizontal scroll, e.g. dark, light or the default.
          */
-        "appearance"?: IcThemeForeground;
+        "appearance"?: IcBrandForeground;
         "focusTrigger"?: string;
+        "monochrome"?: boolean;
         "scrollItemIntoView": (itemPosition: number) => Promise<void>;
+        "theme"?: IcThemeMode;
     }
     interface IcInputComponentContainer {
-        /**
-          * The appearance of the input component container.
-         */
-        "appearance"?: "dark" | "default";
         /**
           * If `true`, the disabled state will be set.
          */
@@ -833,10 +904,6 @@ export namespace Components {
         "readonly"?: boolean;
     }
     interface IcInputLabel {
-        /**
-          * The appearance of the input label.
-         */
-        "appearance"?: "dark" | "default";
         /**
           * If `true`, the disabled state will be set.
          */
@@ -849,6 +916,10 @@ export namespace Components {
           * The helper text that will be displayed.
          */
         "helperText": string;
+        /**
+          * The label will be visually hidden.
+         */
+        "hideLabel": boolean;
         /**
           * The text content of the label.
          */
@@ -865,6 +936,7 @@ export namespace Components {
           * The status of the label - e.g. 'error'.
          */
         "status": "error" | "";
+        "useLabelTag": boolean;
     }
     interface IcInputValidation {
         /**
@@ -927,10 +999,6 @@ export namespace Components {
         "theme"?: IcThemeMode;
     }
     interface IcLoadingIndicator {
-        /**
-          * The appearance of the loading indicator, e.g. dark or light.
-         */
-        "appearance"?: IcThemeForegroundNoDefault;
         /**
           * The description that will be set as the aria-label of the loading indicator when not using a visible label.
          */
@@ -956,6 +1024,10 @@ export namespace Components {
           * The minimum value that the progress value can take. Used to calculate the proportional width of the progress bar.
          */
         "min"?: number;
+        /**
+          * If `true`, the element will display as black and white.
+         */
+        "monochrome"?: boolean;
         /**
           * The current amount of progress made. If not provided, component acts as an indeterminate loading indicator.
          */
@@ -964,6 +1036,10 @@ export namespace Components {
           * The size of the loading indicator.
          */
         "size"?: IcLoadingSizes;
+        /**
+          * 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;
         /**
           * The type of indicator, either linear or circular.
          */
@@ -978,7 +1054,11 @@ export namespace Components {
           * The reference to an anchor element the menu will position itself from when rendered.
          */
         "anchorEl": HTMLElement;
-        "autoFocusOnSelected": boolean;
+        "autofocusOnSelected": boolean;
+        /**
+          * If `true`, the menu will close when an option is selected.
+         */
+        "closeOnSelect": boolean;
         /**
           * If `true`, the menu will fill the width of the container.
          */
@@ -1022,13 +1102,13 @@ export namespace Components {
         "searchMode"?: IcSearchBarSearchModes;
         "selectOnEnter"?: boolean;
         /**
-          * The size of the menu component.
+          * The size of the menu.
          */
         "size"?: IcSizes;
         /**
-          * The value of the currently selected option.
+          * The value of the currently selected option - or array of values (if multiple options allowed).
          */
-        "value": string;
+        "value": string | string[];
         /**
           * The custom name for the value field for IcMenuOption.
          */
@@ -1041,6 +1121,10 @@ export namespace Components {
         "label"?: string;
     }
     interface IcMenuItem {
+        /**
+          * If `true`, the menu item will be in a checked state. This is only applicable when variant is set to `toggle`.
+         */
+        "checked": boolean;
         /**
           * The description displayed in the menu item, below the label.
          */
@@ -1060,7 +1144,7 @@ export namespace Components {
         /**
           * The label describing the keyboard shortcut for a menu item's action.
          */
-        "keyboardShortcut"?: string;
+        "keyboardShortcutLabel"?: string;
         /**
           * The label to display in the menu item.
          */
@@ -1119,6 +1203,10 @@ export namespace Components {
           * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
          */
         "target"?: string;
+        /**
+          * 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;
     }
     interface IcNavigationGroup {
         /**
@@ -1133,6 +1221,10 @@ export namespace Components {
           * Sets focus on the nav item.
          */
         "setFocus": () => Promise<void>;
+        /**
+          * 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;
     }
     interface IcNavigationItem {
         "collapsedIconLabel": boolean;
@@ -1174,12 +1266,20 @@ export namespace Components {
           * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
          */
         "target"?: string;
+        /**
+          * 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;
     }
     interface IcNavigationMenu {
         /**
           * The status info to display.
          */
         "status": string;
+        /**
+          * 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;
         /**
           * The version info to display.
          */
@@ -1218,16 +1318,16 @@ export namespace Components {
           * The subtitle to render on the page header.
          */
         "subheading"?: string;
+        /**
+          * 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;
     }
     interface IcPagination {
         /**
           * The number of pages displayed adjacent to the current page when using 'complex' type pagination. Accepted values are 0, 1 & 2.
          */
         "adjacentPageCount": number;
-        /**
-          * The appearance of the pagination, e.g. dark, light or the default.
-         */
-        "appearance": IcThemeForeground;
         /**
           * The number of pages displayed as boundary items to the current page when using 'complex' type pagination. Accepted values are 0, 1 & 2.
          */
@@ -1256,6 +1356,10 @@ export namespace Components {
           * The label for the pagination item (applicable when simple pagination is being used).
          */
         "label": string;
+        /**
+          * If `true`, the pagination will display as black in the light theme, and white in dark theme.
+         */
+        "monochrome"?: boolean;
         /**
           * The total number of pages.
          */
@@ -1265,16 +1369,16 @@ export namespace Components {
           * @param page The page number to set as the current page
          */
         "setCurrentPage": (page: number) => Promise<void>;
+        /**
+          * 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;
         /**
           * The type of pagination to be used.
          */
         "type": IcPaginationTypes;
     }
     interface IcPaginationItem {
-        /**
-          * The appearance of the pagination, e.g. dark, light or the default.
-         */
-        "appearance": IcThemeForeground;
         /**
           * If `true`, the pagination item will be disabled.
          */
@@ -1283,6 +1387,10 @@ export namespace Components {
           * The label for the pagination item (applicable when simple pagination is being used).
          */
         "label": string;
+        /**
+          * If `true`, the pagination item will display as black in the light theme, and white in dark theme.
+         */
+        "monochrome"?: boolean;
         /**
           * The current page number.
          */
@@ -1291,6 +1399,10 @@ export namespace Components {
           * If `true`, the pagination item will be selected.
          */
         "selected": 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;
         /**
           * The type of pagination item - 'page' or 'ellipsis'.
          */
@@ -1301,6 +1413,10 @@ export namespace Components {
           * The ID of the element the popover menu will anchor itself to. This is required unless the popover is a submenu.
          */
         "anchor": string;
+        /**
+          * @param setFocusToAnchor when true return focus to anchor element when menu is closed
+         */
+        "closeMenu": (setFocusToAnchor?: boolean, menuElement?: HTMLIcMenuItemElement) => Promise<void>;
         /**
           * If `true`, the popover menu will be displayed.
          */
@@ -1314,6 +1430,10 @@ export namespace Components {
          */
         "submenuId"?: string;
         "submenuLevel": number;
+        /**
+          * 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;
     }
     interface IcRadioGroup {
         /**
@@ -1348,6 +1468,10 @@ export namespace Components {
           * The size of the radio group component.
          */
         "size"?: IcSizesNoLarge;
+        /**
+          * 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;
         /**
           * The validation status - e.g. 'error' | 'warning' | 'success'.
          */
@@ -1395,6 +1519,10 @@ export namespace Components {
          */
         "setFocus": () => Promise<void>;
         "setTabIndex": (value: number) => Promise<void>;
+        /**
+          * 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;
         /**
           * The value for the radio option.
          */
@@ -1513,6 +1641,10 @@ export namespace Components {
           * If `true`, the value of the search will have its spelling and grammar checked.
          */
         "spellcheck": 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;
         /**
           * If using external filtering, set a timeout for when loading takes too long.
          */
@@ -1538,7 +1670,7 @@ export namespace Components {
     }
     interface IcSelect {
         /**
-          * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.
+          * The amount of time, in milliseconds, to wait to trigger the `icInput` event after each keystroke.
          */
         "debounce"?: number;
         /**
@@ -1558,7 +1690,7 @@ export namespace Components {
          */
         "form"?: string;
         /**
-          * If `true`, the select element will fill the width of the container. This prop should only be used with searchable select and will only be applied if searchable is true.
+          * If `true`, the select will fill the width of the container.
          */
         "fullWidth": boolean;
         /**
@@ -1593,6 +1725,10 @@ export namespace Components {
           * The message displayed whilst the options are being loaded externally.
          */
         "loadingLabel"?: string;
+        /**
+          * If `true`, multiple options can be selected.
+         */
+        "multiple"?: boolean;
         /**
           * The name of the control, which is submitted with the form data.
          */
@@ -1618,11 +1754,11 @@ export namespace Components {
          */
         "searchMatchPosition"?: IcSearchMatchPositions;
         /**
-          * If `true`, a searchable variant of the select will be displayed which can be typed in to filter options.
+          * If `true`, a searchable variant of the select will be displayed which can be typed in to filter options. This functionality is only available on the single-select variant of the select component.
          */
         "searchable"?: boolean;
         /**
-          * If `true`, the icOptionSelect event will be fired on enter instead of ArrowUp and ArrowDown.
+          * If `true`, the icOptionSelect event will be fired on enter instead of ArrowUp and ArrowDown on the single select.
          */
         "selectOnEnter"?: boolean;
         /**
@@ -1634,9 +1770,13 @@ export namespace Components {
          */
         "showClearButton"?: boolean;
         /**
-          * The size of the select component.
+          * The size of the select.
          */
         "size"?: IcSizes;
+        /**
+          * 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;
         /**
           * If using external filtering, set a timeout for when loading takes too long.
          */
@@ -1650,9 +1790,9 @@ export namespace Components {
          */
         "validationText"?: string;
         /**
-          * The value of the select, reflected by the value of the currently selected option. For the searchable variant, the value is also reflected by the user input.
+          * The value of the select, reflected by the value of the currently selected option. For the searchable variant, the value is also reflected by the user input. For the multi-select variant, the value must be an array of option values.
          */
-        "value"?: string;
+        "value"?: string | string[];
     }
     interface IcSideNavigation {
         /**
@@ -1699,9 +1839,9 @@ export namespace Components {
     }
     interface IcSkeleton {
         /**
-          * The appearance of the skeleton.
+          * 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.
          */
-        "appearance"?: "light" | "default";
+        "theme"?: IcThemeMode;
         /**
           * The variant of the skeleton that will be displayed.
          */
@@ -1728,6 +1868,10 @@ export namespace Components {
           * 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"?: "dark" | "light" | "inherit";
+        /**
+          * The letter case of the status tag's label.
+         */
+        "uppercase"?: boolean;
         /**
           * The emphasis of the status tag.
          */
@@ -1753,6 +1897,7 @@ export namespace Components {
           * Additional information about the step. Use this prop to override the default step status messaging displayed when selecting a step type or step status.
          */
         "subheading"?: string;
+        "theme"?: IcThemeMode;
         /**
           * The state of the step within the stepper.
          */
@@ -1764,10 +1909,6 @@ export namespace Components {
           * The alignment of the default stepper within its container.
          */
         "aligned"?: IcStepperAlignment;
-        /**
-          * The appearance of the stepper.
-         */
-        "appearance"?: "light" | "default";
         /**
           * The length of the connector between each step in pixels. Minimum length is 100px.
          */
@@ -1776,6 +1917,10 @@ export namespace Components {
           * If `true`, the information about each step, i.e. step title, step subtitle and step status, will be hidden on all default steps. The information about each step will still be visible in the compact variant of the stepper.
          */
         "hideStepInfo"?: 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;
         /**
           * The variant of the stepper.
          */
@@ -1810,14 +1955,14 @@ export namespace Components {
           * Sets focus on the switch.
          */
         "setFocus": () => Promise<void>;
-        /**
-          * If `true`, the switch will render the On/Off state text.
-         */
-        "showState"?: boolean;
         /**
           * The size of the switch component.
          */
         "size"?: IcSizesNoLarge;
+        /**
+          * 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;
         /**
           * The value of the toggle does not mean if it's checked or not, use the `checked` property for that.  The value of a toggle is analogous to the value of a `<input type="checkbox">`, it's only used when the toggle participates in a native `<form>`.
          */
@@ -1886,10 +2031,6 @@ export namespace Components {
         "ariaAutocomplete": IcAriaAutocompleteTypes;
         "ariaExpanded": string;
         "ariaOwns": string;
-        /**
-          * If `true`, the form control will have input focus when the page loads.
-         */
-        "autoFocus": boolean;
         /**
           * The automatic capitalisation of the text value as it is entered/edited by the user. Available options: "off", "none", "on", "sentences", "words", "characters".
          */
@@ -1902,6 +2043,10 @@ export namespace Components {
           * The state of autocorrection the browser can apply when the user is entering/editing the text value.
          */
         "autocorrect": IcAutocorrectStates;
+        /**
+          * If `true`, the form control will have input focus when the page loads.
+         */
+        "autofocus": boolean;
         /**
           * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.
          */
@@ -1992,6 +2137,10 @@ export namespace Components {
           * If `true`, the value of the text field will have its spelling and grammar checked.
          */
         "spellcheck": 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;
         "truncateValue"?: boolean;
         /**
           * The type of control to display. The default type is text.
@@ -2017,9 +2166,9 @@ export namespace Components {
     }
     interface IcTheme {
         /**
-          * The theme colour. Can be a hex value e.g. "#ff0000", RGB e.g. "rgb(255, 0, 0)", or RGBA e.g. "rgba(255, 0, 0, 1)".
+          * The brand colour. Can be a hex value e.g. "#ff0000", RGB e.g. "rgb(255, 0, 0)", or RGBA e.g. "rgba(255, 0, 0, 1)".
          */
-        "color"?: IcColor;
+        "brandColor"?: IcColor;
         /**
           * The theme mode. Can be "dark", "light", or "system". "system" will use the device or browser settings.
          */
@@ -2070,10 +2219,6 @@ export namespace Components {
           * The accessible label that will be applied to the toggle button. This is required for the icon variant of toggle buttons.
          */
         "accessibleLabel"?: string;
-        /**
-          * The appearance of the toggle button.
-         */
-        "appearance"?: IcThemeForeground;
         /**
           * If `true`, the toggle button will be in a checked state.
          */
@@ -2089,7 +2234,7 @@ export namespace Components {
         /**
           * The placement of the icon in relation to the toggle button label.
          */
-        "iconPlacement"?: "left" | "right" | "top";
+        "iconPlacement"?: IcIconPlacementOptions;
         /**
           * The label to display in the toggle button. This is required for the default variant of toggle buttons.
          */
@@ -2098,10 +2243,22 @@ export namespace Components {
           * If `true`, the toggle button will be in loading state.
          */
         "loading"?: boolean;
+        /**
+          * If `true`, the toggle button will display as black in the light theme, and white in dark theme.
+         */
+        "monochrome"?: boolean;
         /**
           * The size of the toggle button to be displayed.
          */
         "size"?: IcSizes;
+        /**
+          * 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;
+        /**
+          * The position of the tooltip in relation to the toggle button.
+         */
+        "tooltipPlacement": IcButtonTooltipPlacement;
         /**
           * The variant of the toggle button.
          */
@@ -2112,10 +2269,6 @@ export namespace Components {
           * The accessible label of the toggle button group component to provide context for screen reader users.
          */
         "accessibleLabel"?: string;
-        /**
-          * The appearance of the toggle button group, e.g dark, or light.
-         */
-        "appearance": IcThemeForeground;
         /**
           * If `true`, the toggle button group will be set to the disabled state.
          */
@@ -2132,6 +2285,10 @@ export namespace Components {
           * If `true`, the toggle button group will be in loading state.
          */
         "loading"?: boolean;
+        /**
+          * If `true`, the toggle button group will display as black in the light theme, and white in dark theme.
+         */
+        "monochrome"?: boolean;
         /**
           * If `auto`, controls are toggled automatically when navigated to. If `manual`, the controls must be actioned to change their toggled state. The value of this prop is ignored if `selectType` is set to`multi`.
          */
@@ -2144,12 +2301,23 @@ export namespace Components {
           * The size of the toggle buttons to be displayed. This does not affect the font size of the accessible label.
          */
         "size"?: IcSizes;
+        /**
+          * 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;
+        /**
+          * The position of the tooltip in relation to the toggle buttons.
+         */
+        "tooltipPlacement": IcButtonTooltipPlacement;
         /**
           * The variant of the toggle button.
          */
         "variant": "default" | "icon";
     }
     interface IcTooltip {
+        /**
+          * If `true`, the tooltip will not be displayed on click, it will require hover or using the display method.
+         */
         "disableClick"?: boolean;
         /**
           * If `true`, the tooltip will not be displayed on hover, it will require a click.
@@ -2217,6 +2385,10 @@ export namespace Components {
           * The status info to be displayed.
          */
         "status": string;
+        /**
+          * 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;
         /**
           * The version info to be displayed.
          */
@@ -2656,11 +2828,12 @@ declare global {
         new (): HTMLIcLoadingIndicatorElement;
     };
     interface HTMLIcMenuElementEventMap {
+        "icClear": void;
         "menuKeyPress": { isNavKey: boolean; key: string };
         "menuOptionId": IcMenuOptionIdEventDetail;
         "menuOptionSelect": IcOptionSelectEventDetail;
+        "menuOptionSelectAll": { select: boolean };
         "menuStateChange": IcMenuChangeEventDetail;
-        "menuValueChange": IcValueEventDetail;
         "retryButtonClicked": IcValueEventDetail;
         "timeoutBlur": { ev: FocusEvent };
         "ungroupedOptionsSet": { options: IcMenuOption[] };
@@ -2687,9 +2860,9 @@ declare global {
     };
     interface HTMLIcMenuItemElementEventMap {
         "childBlur": void;
-        "handleMenuItemClick": {
-    label: string;
-    hasSubMenu: boolean;
+        "handleMenuItemClick": HTMLIcMenuItemElement;
+        "icToggleChecked": {
+    checked: boolean;
   };
         "triggerPopoverMenuInstance": void;
     }
@@ -2795,7 +2968,7 @@ declare global {
         new (): HTMLIcPaginationItemElement;
     };
     interface HTMLIcPopoverMenuElementEventMap {
-        "icPopoverClosed": void;
+        "icPopoverClosed": HTMLIcMenuItemElement;
     }
     interface HTMLIcPopoverMenuElement extends Components.IcPopoverMenu, HTMLStencilElement {
         addEventListener<K extends keyof HTMLIcPopoverMenuElementEventMap>(type: K, listener: (this: HTMLIcPopoverMenuElement, ev: IcPopoverMenuCustomEvent<HTMLIcPopoverMenuElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -2858,6 +3031,7 @@ declare global {
         "icSubmitSearchBlur": IcBlurEventDetail;
         "icSearchBarBlur": IcSearchBarBlurEventDetail;
         "icSearchBarFocus": IcValueEventDetail;
+        "icKeydown": { event: KeyboardEvent };
     }
     interface HTMLIcSearchBarElement extends Components.IcSearchBar, HTMLStencilElement {
         addEventListener<K extends keyof HTMLIcSearchBarElementEventMap>(type: K, listener: (this: HTMLIcSearchBarElement, ev: IcSearchBarCustomEvent<HTMLIcSearchBarElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -2888,6 +3062,7 @@ declare global {
         "icInput": IcValueEventDetail;
         "icOpen": void;
         "icOptionSelect": IcOptionSelectEventDetail;
+        "icOptionDeselect": IcOptionSelectEventDetail;
         "icRetryLoad": IcValueEventDetail;
     }
     interface HTMLIcSelectElement extends Components.IcSelect, HTMLStencilElement {
@@ -3049,7 +3224,7 @@ declare global {
         new (): HTMLIcTextFieldElement;
     };
     interface HTMLIcThemeElementEventMap {
-        "themeChange": IcTheme;
+        "brandChange": IcBrand;
     }
     interface HTMLIcThemeElement extends Components.IcTheme, HTMLStencilElement {
         addEventListener<K extends keyof HTMLIcThemeElementEventMap>(type: K, listener: (this: HTMLIcThemeElement, ev: IcThemeCustomEvent<HTMLIcThemeElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -3258,16 +3433,16 @@ declare namespace LocalJSX {
           * The size of the accordion.
          */
         "size"?: IcSizes;
+        /**
+          * 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;
     }
     interface IcAccordionGroup {
         /**
           * The accessible button label to provide more context to the 'See all/Hide all' button for screen reader users.
          */
         "accessibleButtonLabel"?: string;
-        /**
-          * The appearance of the accordion group, e.g dark, or light.
-         */
-        "appearance"?: IcThemeForeground;
         /**
           * If `true`, the accordion will load in an expanded state.
          */
@@ -3284,6 +3459,10 @@ declare namespace LocalJSX {
           * The size of the accordion.
          */
         "size"?: IcSizes;
+        /**
+          * 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;
     }
     interface IcAlert {
         /**
@@ -3307,9 +3486,13 @@ declare namespace LocalJSX {
          */
         "onIcDismiss"?: (event: IcAlertCustomEvent<void>) => void;
         /**
-          * If `true`, the default icon for the neutral variant will be appear on the left of the alert.
+          * If `true`, the default icon for the neutral variant will appear on the left of the alert.
          */
         "showDefaultIcon"?: 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;
         /**
           * If `true`, the title and message will appear above and below instead of inline.
          */
@@ -3324,6 +3507,10 @@ declare namespace LocalJSX {
           * The ID of the element to jump back to when the link is clicked.
          */
         "target": string;
+        /**
+          * 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;
         /**
           * The variant of the button to render
          */
@@ -3408,10 +3595,6 @@ declare namespace LocalJSX {
           * If `fileUpload` is set to `true`, this is the accepted list of file types.
          */
         "accept"?: string;
-        /**
-          * The appearance of the button, e.g. dark, light, or the default.
-         */
-        "appearance"?: IcThemeForeground;
         /**
           * If `true`, the ic-tooltip which is shown for icon variant will be disabled. Title or aria-label must be set if this prop is not applied.
          */
@@ -3480,6 +3663,10 @@ declare namespace LocalJSX {
           * If `true`, the button will be in loading state.
          */
         "loading"?: boolean;
+        /**
+          * If `true`, the button will display as monochromatic in either `light` or `dark` theme.
+         */
+        "monochrome"?: boolean;
         /**
           * If `fileUpload` is set to `true`, this boolean determines whether multiple files are accepted.
          */
@@ -3516,6 +3703,10 @@ declare namespace LocalJSX {
           * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
          */
         "target"?: string;
+        /**
+          * 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;
         /**
           * The position of the tooltip in relation to the button.
          */
@@ -3557,7 +3748,7 @@ declare namespace LocalJSX {
         /**
           * The URL that the clickable card link points to. If set, the clickable card will render as an "a" tag, otherwise it will render as a button.
          */
-        "href"?: string | undefined;
+        "href"?: string;
         /**
           * The human language of the linked URL.
          */
@@ -3582,6 +3773,10 @@ declare namespace LocalJSX {
           * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
          */
         "target"?: string;
+        /**
+          * 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;
     }
     interface IcCheckbox {
         /**
@@ -3589,7 +3784,7 @@ declare namespace LocalJSX {
          */
         "additionalFieldDisplay"?: IcAdditionalFieldTypes;
         /**
-          * If `true`, the checkbox will be set to the checked state.
+          * If `true`, the checkbox will be set to the checked state. This is only the initial state and will be updated to unchecked if the checkbox is clicked.
          */
         "checked"?: boolean;
         /**
@@ -3636,6 +3831,10 @@ declare namespace LocalJSX {
           * The size of the checkbox to be displayed. This does not affect the font size of the label. If a checkbox is contained in a checkbox group, this will override the size set on checkbox group.
          */
         "size"?: IcSizes;
+        /**
+          * 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;
         /**
           * The value for the checkbox.
          */
@@ -3674,6 +3873,10 @@ declare namespace LocalJSX {
           * The size of the checkboxes to be displayed. This does not affect the font size of the label.
          */
         "size"?: IcSizes;
+        /**
+          * 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;
         /**
           * The validation status - e.g. 'error' | 'warning' | 'success'.
          */
@@ -3685,13 +3888,17 @@ declare namespace LocalJSX {
     }
     interface IcChip {
         /**
-          * The custom chip colour. This prop will be applied to the chip component if `dismissible` is set to `false`. Can be a hex value e.g. "#ff0000", RGB e.g. "rgb(255, 0, 0)", or RGBA e.g. "rgba(255, 0, 0, 1)".
+          * The custom chip colour. This will override the theme colour. Can be a hex value e.g. "#ff0000", RGB e.g. "rgb(255, 0, 0)", or RGBA e.g. "rgba(255, 0, 0, 1)".
          */
         "customColor"?: IcColor;
         /**
           * If `true`, the chip will appear disabled.
          */
         "disabled"?: boolean;
+        /**
+          * The text in the dismiss button tooltip and aria label.
+         */
+        "dismissLabel"?: string;
         /**
           * If `true`, the chip will have a close button at the end to dismiss it.
          */
@@ -3709,7 +3916,11 @@ declare namespace LocalJSX {
          */
         "size"?: IcSizes;
         /**
-          * If `true`, the outlined variant of chip will have a transparent background rather than white.
+          * Sets the chip to the dark or light theme colors. "inherit" will set the color based on the system settings or ic-theme component. Setting the "customColor" prop will override this.
+         */
+        "theme"?: "dark" | "light" | "inherit";
+        /**
+          * If `true`, the outlined variant of chip will have a transparent background rather than the theme defined color.
          */
         "transparentBackground"?: boolean;
         /**
@@ -3773,7 +3984,7 @@ declare namespace LocalJSX {
     }
     interface IcDialog {
         /**
-          * If set to `false`, default buttons or slotted dialog controls will not be displayed.
+          * If set to `false`, default buttons will not be shown, but slotted dialog controls will still be displayed.
          */
         "buttons"?: boolean;
         /**
@@ -3781,7 +3992,7 @@ declare namespace LocalJSX {
          */
         "closeOnBackdropClick"?: boolean;
         /**
-          * If default buttons are displayed, sets the 'primary' or rightmost button to the destructive variant. Stops initial focus being set on the 'primary' or rightmost default or slotted button.
+          * If 'true', sets the 'primary' or rightmost button to the destructive variant. Stops initial focus being set on the 'primary' or rightmost default or slotted button.
          */
         "destructive"?: boolean;
         /**
@@ -3832,8 +4043,40 @@ declare namespace LocalJSX {
           * Sets the maximum and minimum height and width for the dialog.
          */
         "size"?: "small" | "medium" | "large";
+        /**
+          * 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;
     }
     interface IcDivider {
+        /**
+          * The line style of the divider.
+         */
+        "borderStyle"?: IcDividerStyles;
+        /**
+          * The label for the divider. The label placement will need to be set for the label to be displayed correctly.
+         */
+        "label"?: string;
+        /**
+          * The position the label is placed on the divider. `Left` and `right` placement is only applicable when orientation is set to `horizontal`. `Top` and `bottom` placement is only applicable when orientation is set to `vertical`. `Center` placement is applicable for both orientations.
+         */
+        "labelPlacement"?: IcDividerLabelPlacement;
+        /**
+          * If `true`, the divider will be displayed in a grey colour.
+         */
+        "monochrome"?: boolean;
+        /**
+          * The orientation of the divider.
+         */
+        "orientation"?: IcOrientation;
+        /**
+          * 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 | IcBrandForeground;
+        /**
+          * The thickness of the divider.
+         */
+        "weight"?: IcDividerWeights;
     }
     interface IcEmptyState {
         /**
@@ -3860,6 +4103,10 @@ declare namespace LocalJSX {
           * The subtitle rendered in the empty state container.
          */
         "subheading"?: string;
+        /**
+          * 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;
     }
     interface IcFooter {
         /**
@@ -3961,13 +4208,9 @@ declare namespace LocalJSX {
         /**
           * The appearance of the horizontal scroll, e.g. dark, light or the default.
          */
-        "appearance"?: IcThemeForeground;
+        "appearance"?: IcBrandForeground;
     }
     interface IcInputComponentContainer {
-        /**
-          * The appearance of the input component container.
-         */
-        "appearance"?: "dark" | "default";
         /**
           * If `true`, the disabled state will be set.
          */
@@ -4008,10 +4251,6 @@ declare namespace LocalJSX {
         "readonly"?: boolean;
     }
     interface IcInputLabel {
-        /**
-          * The appearance of the input label.
-         */
-        "appearance"?: "dark" | "default";
         /**
           * If `true`, the disabled state will be set.
          */
@@ -4024,6 +4263,10 @@ declare namespace LocalJSX {
           * The helper text that will be displayed.
          */
         "helperText"?: string;
+        /**
+          * The label will be visually hidden.
+         */
+        "hideLabel"?: boolean;
         /**
           * The text content of the label.
          */
@@ -4098,10 +4341,6 @@ declare namespace LocalJSX {
         "theme"?: IcThemeMode;
     }
     interface IcLoadingIndicator {
-        /**
-          * The appearance of the loading indicator, e.g. dark or light.
-         */
-        "appearance"?: IcThemeForegroundNoDefault;
         /**
           * The description that will be set as the aria-label of the loading indicator when not using a visible label.
          */
@@ -4126,6 +4365,10 @@ declare namespace LocalJSX {
           * The minimum value that the progress value can take. Used to calculate the proportional width of the progress bar.
          */
         "min"?: number;
+        /**
+          * If `true`, the element will display as black and white.
+         */
+        "monochrome"?: boolean;
         /**
           * The current amount of progress made. If not provided, component acts as an indeterminate loading indicator.
          */
@@ -4134,6 +4377,10 @@ declare namespace LocalJSX {
           * The size of the loading indicator.
          */
         "size"?: IcLoadingSizes;
+        /**
+          * 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;
         /**
           * The type of indicator, either linear or circular.
          */
@@ -4148,6 +4395,10 @@ declare namespace LocalJSX {
           * The reference to an anchor element the menu will position itself from when rendered.
          */
         "anchorEl": HTMLElement;
+        /**
+          * If `true`, the menu will close when an option is selected.
+         */
+        "closeOnSelect"?: boolean;
         /**
           * If `true`, the menu will fill the width of the container.
          */
@@ -4168,6 +4419,10 @@ declare namespace LocalJSX {
           * The ID of the menu.
          */
         "menuId": string;
+        /**
+          * Emitted when the clear all button is clicked.
+         */
+        "onIcClear"?: (event: IcMenuCustomEvent<void>) => void;
         /**
           * If `true`, the menu will be displayed open.
          */
@@ -4181,13 +4436,13 @@ declare namespace LocalJSX {
          */
         "searchMode"?: IcSearchBarSearchModes;
         /**
-          * The size of the menu component.
+          * The size of the menu.
          */
         "size"?: IcSizes;
         /**
-          * The value of the currently selected option.
+          * The value of the currently selected option - or array of values (if multiple options allowed).
          */
-        "value": string;
+        "value": string | string[];
         /**
           * The custom name for the value field for IcMenuOption.
          */
@@ -4200,6 +4455,10 @@ declare namespace LocalJSX {
         "label"?: string;
     }
     interface IcMenuItem {
+        /**
+          * If `true`, the menu item will be in a checked state. This is only applicable when variant is set to `toggle`.
+         */
+        "checked"?: boolean;
         /**
           * The description displayed in the menu item, below the label.
          */
@@ -4219,11 +4478,17 @@ declare namespace LocalJSX {
         /**
           * The label describing the keyboard shortcut for a menu item's action.
          */
-        "keyboardShortcut"?: string;
+        "keyboardShortcutLabel"?: string;
         /**
           * The label to display in the menu item.
          */
         "label": string;
+        /**
+          * Emitted when the user clicks a menu item that is set to the toggle variant.
+         */
+        "onIcToggleChecked"?: (event: IcMenuItemCustomEvent<{
+    checked: boolean;
+  }>) => void;
         /**
           * How much of the referrer to send when following the link.
          */
@@ -4274,6 +4539,10 @@ declare namespace LocalJSX {
           * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
          */
         "target"?: string;
+        /**
+          * 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;
     }
     interface IcNavigationGroup {
         /**
@@ -4284,6 +4553,10 @@ declare namespace LocalJSX {
           * The label to display on the group.
          */
         "label"?: string;
+        /**
+          * 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;
     }
     interface IcNavigationItem {
         /**
@@ -4318,12 +4591,20 @@ declare namespace LocalJSX {
           * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
          */
         "target"?: string;
+        /**
+          * 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;
     }
     interface IcNavigationMenu {
         /**
           * The status info to display.
          */
         "status"?: string;
+        /**
+          * 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;
         /**
           * The version info to display.
          */
@@ -4362,16 +4643,16 @@ declare namespace LocalJSX {
           * The subtitle to render on the page header.
          */
         "subheading"?: string;
+        /**
+          * 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;
     }
     interface IcPagination {
         /**
           * The number of pages displayed adjacent to the current page when using 'complex' type pagination. Accepted values are 0, 1 & 2.
          */
         "adjacentPageCount"?: number;
-        /**
-          * The appearance of the pagination, e.g. dark, light or the default.
-         */
-        "appearance"?: IcThemeForeground;
         /**
           * The number of pages displayed as boundary items to the current page when using 'complex' type pagination. Accepted values are 0, 1 & 2.
          */
@@ -4400,6 +4681,10 @@ declare namespace LocalJSX {
           * The label for the pagination item (applicable when simple pagination is being used).
          */
         "label"?: string;
+        /**
+          * If `true`, the pagination will display as black in the light theme, and white in dark theme.
+         */
+        "monochrome"?: boolean;
         /**
           * Emitted when a page is selected.
          */
@@ -4408,16 +4693,16 @@ declare namespace LocalJSX {
           * The total number of pages.
          */
         "pages": number;
+        /**
+          * 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;
         /**
           * The type of pagination to be used.
          */
         "type"?: IcPaginationTypes;
     }
     interface IcPaginationItem {
-        /**
-          * The appearance of the pagination, e.g. dark, light or the default.
-         */
-        "appearance"?: IcThemeForeground;
         /**
           * If `true`, the pagination item will be disabled.
          */
@@ -4426,6 +4711,10 @@ declare namespace LocalJSX {
           * The label for the pagination item (applicable when simple pagination is being used).
          */
         "label"?: string;
+        /**
+          * If `true`, the pagination item will display as black in the light theme, and white in dark theme.
+         */
+        "monochrome"?: boolean;
         /**
           * The current page number.
          */
@@ -4434,6 +4723,10 @@ declare namespace LocalJSX {
           * If `true`, the pagination item will be selected.
          */
         "selected"?: 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;
         /**
           * The type of pagination item - 'page' or 'ellipsis'.
          */
@@ -4447,7 +4740,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when the popover menu is closed.
          */
-        "onIcPopoverClosed"?: (event: IcPopoverMenuCustomEvent<void>) => void;
+        "onIcPopoverClosed"?: (event: IcPopoverMenuCustomEvent<HTMLIcMenuItemElement>) => void;
         /**
           * If `true`, the popover menu will be displayed.
          */
@@ -4456,6 +4749,10 @@ declare namespace LocalJSX {
           * The unique identifier for a popover submenu.
          */
         "submenuId"?: string;
+        /**
+          * 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;
     }
     interface IcRadioGroup {
         /**
@@ -4494,6 +4791,10 @@ declare namespace LocalJSX {
           * The size of the radio group component.
          */
         "size"?: IcSizesNoLarge;
+        /**
+          * 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;
         /**
           * The validation status - e.g. 'error' | 'warning' | 'success'.
          */
@@ -4544,6 +4845,10 @@ declare namespace LocalJSX {
           * If `true`, the radio option will be displayed in a selected state.
          */
         "selected"?: 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;
         /**
           * The value for the radio option.
          */
@@ -4642,6 +4947,10 @@ declare namespace LocalJSX {
           * Emitted when a keyboard input occurred.
          */
         "onIcInput"?: (event: IcSearchBarCustomEvent<IcValueEventDetail>) => void;
+        /**
+          * Emitted when a keydown event occurred.
+         */
+        "onIcKeydown"?: (event: IcSearchBarCustomEvent<{ event: KeyboardEvent }>) => void;
         /**
           * Emitted when the state of the menu changes (i.e. open or close)
          */
@@ -4694,6 +5003,10 @@ declare namespace LocalJSX {
           * If `true`, the value of the search will have its spelling and grammar checked.
          */
         "spellcheck"?: 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;
         /**
           * If using external filtering, set a timeout for when loading takes too long.
          */
@@ -4719,7 +5032,7 @@ declare namespace LocalJSX {
     }
     interface IcSelect {
         /**
-          * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.
+          * The amount of time, in milliseconds, to wait to trigger the `icInput` event after each keystroke.
          */
         "debounce"?: number;
         /**
@@ -4739,7 +5052,7 @@ declare namespace LocalJSX {
          */
         "form"?: string;
         /**
-          * If `true`, the select element will fill the width of the container. This prop should only be used with searchable select and will only be applied if searchable is true.
+          * If `true`, the select will fill the width of the container.
          */
         "fullWidth"?: boolean;
         /**
@@ -4774,6 +5087,10 @@ declare namespace LocalJSX {
           * The message displayed whilst the options are being loaded externally.
          */
         "loadingLabel"?: string;
+        /**
+          * If `true`, multiple options can be selected.
+         */
+        "multiple"?: boolean;
         /**
           * The name of the control, which is submitted with the form data.
          */
@@ -4787,7 +5104,7 @@ declare namespace LocalJSX {
          */
         "onIcChange"?: (event: IcSelectCustomEvent<IcValueEventDetail>) => void;
         /**
-          * Emitted when the clear button is clicked.
+          * Emitted when the clear or clear all button is clicked.
          */
         "onIcClear"?: (event: IcSelectCustomEvent<void>) => void;
         /**
@@ -4807,7 +5124,11 @@ declare namespace LocalJSX {
          */
         "onIcOpen"?: (event: IcSelectCustomEvent<void>) => void;
         /**
-          * Emitted when an option is highlighted within the menu. Highlighting a menu item will also trigger an `icChange/onIcChange` due to the value being updated.
+          * Emitted when `multiple` is `true` and an option is deselected.
+         */
+        "onIcOptionDeselect"?: (event: IcSelectCustomEvent<IcOptionSelectEventDetail>) => void;
+        /**
+          * Emitted when an option is selected. Selecting an option will also trigger an `icChange/onIcChange` due to the value being updated.
          */
         "onIcOptionSelect"?: (event: IcSelectCustomEvent<IcOptionSelectEventDetail>) => void;
         /**
@@ -4835,11 +5156,11 @@ declare namespace LocalJSX {
          */
         "searchMatchPosition"?: IcSearchMatchPositions;
         /**
-          * If `true`, a searchable variant of the select will be displayed which can be typed in to filter options.
+          * If `true`, a searchable variant of the select will be displayed which can be typed in to filter options. This functionality is only available on the single-select variant of the select component.
          */
         "searchable"?: boolean;
         /**
-          * If `true`, the icOptionSelect event will be fired on enter instead of ArrowUp and ArrowDown.
+          * If `true`, the icOptionSelect event will be fired on enter instead of ArrowUp and ArrowDown on the single select.
          */
         "selectOnEnter"?: boolean;
         /**
@@ -4847,9 +5168,13 @@ declare namespace LocalJSX {
          */
         "showClearButton"?: boolean;
         /**
-          * The size of the select component.
+          * The size of the select.
          */
         "size"?: IcSizes;
+        /**
+          * 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;
         /**
           * If using external filtering, set a timeout for when loading takes too long.
          */
@@ -4863,9 +5188,9 @@ declare namespace LocalJSX {
          */
         "validationText"?: string;
         /**
-          * The value of the select, reflected by the value of the currently selected option. For the searchable variant, the value is also reflected by the user input.
+          * The value of the select, reflected by the value of the currently selected option. For the searchable variant, the value is also reflected by the user input. For the multi-select variant, the value must be an array of option values.
          */
-        "value"?: string;
+        "value"?: string | string[];
     }
     interface IcSideNavigation {
         /**
@@ -4915,9 +5240,9 @@ declare namespace LocalJSX {
     }
     interface IcSkeleton {
         /**
-          * The appearance of the skeleton.
+          * 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.
          */
-        "appearance"?: "light" | "default";
+        "theme"?: IcThemeMode;
         /**
           * The variant of the skeleton that will be displayed.
          */
@@ -4944,6 +5269,10 @@ declare namespace LocalJSX {
           * 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"?: "dark" | "light" | "inherit";
+        /**
+          * The letter case of the status tag's label.
+         */
+        "uppercase"?: boolean;
         /**
           * The emphasis of the status tag.
          */
@@ -4972,10 +5301,6 @@ declare namespace LocalJSX {
           * The alignment of the default stepper within its container.
          */
         "aligned"?: IcStepperAlignment;
-        /**
-          * The appearance of the stepper.
-         */
-        "appearance"?: "light" | "default";
         /**
           * The length of the connector between each step in pixels. Minimum length is 100px.
          */
@@ -4984,6 +5309,10 @@ declare namespace LocalJSX {
           * If `true`, the information about each step, i.e. step title, step subtitle and step status, will be hidden on all default steps. The information about each step will still be visible in the compact variant of the stepper.
          */
         "hideStepInfo"?: 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;
         /**
           * The variant of the stepper.
          */
@@ -5026,14 +5355,14 @@ declare namespace LocalJSX {
           * Emitted when the toggle has focus.
          */
         "onIcFocus"?: (event: IcSwitchCustomEvent<void>) => void;
-        /**
-          * If `true`, the switch will render the On/Off state text.
-         */
-        "showState"?: boolean;
         /**
           * The size of the switch component.
          */
         "size"?: IcSizesNoLarge;
+        /**
+          * 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;
         /**
           * The value of the toggle does not mean if it's checked or not, use the `checked` property for that.  The value of a toggle is analogous to the value of a `<input type="checkbox">`, it's only used when the toggle participates in a native `<form>`.
          */
@@ -5084,10 +5413,6 @@ declare namespace LocalJSX {
     interface IcTabPanel {
     }
     interface IcTextField {
-        /**
-          * If `true`, the form control will have input focus when the page loads.
-         */
-        "autoFocus"?: boolean;
         /**
           * The automatic capitalisation of the text value as it is entered/edited by the user. Available options: "off", "none", "on", "sentences", "words", "characters".
          */
@@ -5100,6 +5425,10 @@ declare namespace LocalJSX {
           * The state of autocorrection the browser can apply when the user is entering/editing the text value.
          */
         "autocorrect"?: IcAutocorrectStates;
+        /**
+          * If `true`, the form control will have input focus when the page loads.
+         */
+        "autofocus"?: boolean;
         /**
           * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.
          */
@@ -5204,6 +5533,10 @@ declare namespace LocalJSX {
           * If `true`, the value of the text field will have its spelling and grammar checked.
          */
         "spellcheck"?: 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;
         /**
           * The type of control to display. The default type is text.
          */
@@ -5227,9 +5560,9 @@ declare namespace LocalJSX {
     }
     interface IcTheme {
         /**
-          * The theme colour. Can be a hex value e.g. "#ff0000", RGB e.g. "rgb(255, 0, 0)", or RGBA e.g. "rgba(255, 0, 0, 1)".
+          * The brand colour. Can be a hex value e.g. "#ff0000", RGB e.g. "rgb(255, 0, 0)", or RGBA e.g. "rgba(255, 0, 0, 1)".
          */
-        "color"?: IcColor;
+        "brandColor"?: IcColor;
         /**
           * The theme mode. Can be "dark", "light", or "system". "system" will use the device or browser settings.
          */
@@ -5280,10 +5613,6 @@ declare namespace LocalJSX {
           * The accessible label that will be applied to the toggle button. This is required for the icon variant of toggle buttons.
          */
         "accessibleLabel"?: string;
-        /**
-          * The appearance of the toggle button.
-         */
-        "appearance"?: IcThemeForeground;
         /**
           * If `true`, the toggle button will be in a checked state.
          */
@@ -5299,7 +5628,7 @@ declare namespace LocalJSX {
         /**
           * The placement of the icon in relation to the toggle button label.
          */
-        "iconPlacement"?: "left" | "right" | "top";
+        "iconPlacement"?: IcIconPlacementOptions;
         /**
           * The label to display in the toggle button. This is required for the default variant of toggle buttons.
          */
@@ -5308,6 +5637,10 @@ declare namespace LocalJSX {
           * If `true`, the toggle button will be in loading state.
          */
         "loading"?: boolean;
+        /**
+          * If `true`, the toggle button will display as black in the light theme, and white in dark theme.
+         */
+        "monochrome"?: boolean;
         /**
           * Emitted when the user clicks a toggle button.
          */
@@ -5318,6 +5651,14 @@ declare namespace LocalJSX {
           * The size of the toggle button to be displayed.
          */
         "size"?: IcSizes;
+        /**
+          * 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;
+        /**
+          * The position of the tooltip in relation to the toggle button.
+         */
+        "tooltipPlacement"?: IcButtonTooltipPlacement;
         /**
           * The variant of the toggle button.
          */
@@ -5328,10 +5669,6 @@ declare namespace LocalJSX {
           * The accessible label of the toggle button group component to provide context for screen reader users.
          */
         "accessibleLabel"?: string;
-        /**
-          * The appearance of the toggle button group, e.g dark, or light.
-         */
-        "appearance"?: IcThemeForeground;
         /**
           * If `true`, the toggle button group will be set to the disabled state.
          */
@@ -5348,6 +5685,10 @@ declare namespace LocalJSX {
           * If `true`, the toggle button group will be in loading state.
          */
         "loading"?: boolean;
+        /**
+          * If `true`, the toggle button group will display as black in the light theme, and white in dark theme.
+         */
+        "monochrome"?: boolean;
         /**
           * Emitted when a toggle button is selected.
          */
@@ -5364,12 +5705,24 @@ declare namespace LocalJSX {
           * The size of the toggle buttons to be displayed. This does not affect the font size of the accessible label.
          */
         "size"?: IcSizes;
+        /**
+          * 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;
+        /**
+          * The position of the tooltip in relation to the toggle buttons.
+         */
+        "tooltipPlacement"?: IcButtonTooltipPlacement;
         /**
           * The variant of the toggle button.
          */
         "variant"?: "default" | "icon";
     }
     interface IcTooltip {
+        /**
+          * If `true`, the tooltip will not be displayed on click, it will require hover or using the display method.
+         */
+        "disableClick"?: boolean;
         /**
           * If `true`, the tooltip will not be displayed on hover, it will require a click.
          */
@@ -5428,6 +5781,10 @@ declare namespace LocalJSX {
           * The status info to be displayed.
          */
         "status"?: string;
+        /**
+          * 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;
         /**
           * The version info to be displayed.
          */