@ukic/web-components 3.0.0 → 3.1.0

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, IcTypographyVariants, IcValueEventDetail } from "./utils/types";
-import { IcBackToTopVariants } from "./components/ic-back-to-top/ic-back-to-top.types";
+import { IcActivationTypes, IcAdditionalFieldTypes, IcAlignment, IcAutocompleteTypes, IcAutocorrectStates, IcBlurEventDetail, IcBrand, IcBrandForeground, IcButtonTooltipPlacement, IcColor, IcDeviceSizes, IcEmphasisType, IcIconPlacementOptions, IcInformationStatusOrEmpty, IcMenuOption, IcMultiValueEventDetail, IcOrientation, IcSearchMatchPositions, IcSelectMethodTypes, IcSelectTypes, IcSizes, IcSizesNoLarge, IcStatusVariants, IcThemeMode, IcTypographyVariants, IcValueEventDetail } from "./utils/types";
+import { IcBackToTopPositions, 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";
@@ -19,6 +20,7 @@ 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 { IcNavigationExpandEventDetail, IcNavigationOpenEventDetail } from "./components/ic-navigation-group/ic-navigation-group.types";
 import { IcChangeEventDetail as IcChangeEventDetail1, IcPaginationTypes } from "./components/ic-pagination/ic-pagination.types";
 import { IcPaginationItemType } from "./components/ic-pagination-item/ic-pagination-item.types";
 import { IcChangeEventDetail as IcChangeEventDetail2 } from "./components/ic-radio-group/ic-radio-group.types";
@@ -33,12 +35,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, IcTypographyVariants, IcValueEventDetail } from "./utils/types";
-export { IcBackToTopVariants } from "./components/ic-back-to-top/ic-back-to-top.types";
+export { IcActivationTypes, IcAdditionalFieldTypes, IcAlignment, IcAutocompleteTypes, IcAutocorrectStates, IcBlurEventDetail, IcBrand, IcBrandForeground, IcButtonTooltipPlacement, IcColor, IcDeviceSizes, IcEmphasisType, IcIconPlacementOptions, IcInformationStatusOrEmpty, IcMenuOption, IcMultiValueEventDetail, IcOrientation, IcSearchMatchPositions, IcSelectMethodTypes, IcSelectTypes, IcSizes, IcSizesNoLarge, IcStatusVariants, IcThemeMode, IcTypographyVariants, IcValueEventDetail } from "./utils/types";
+export { IcBackToTopPositions, 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";
@@ -47,6 +50,7 @@ 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 { IcNavigationExpandEventDetail, IcNavigationOpenEventDetail } from "./components/ic-navigation-group/ic-navigation-group.types";
 export { IcChangeEventDetail as IcChangeEventDetail1, IcPaginationTypes } from "./components/ic-pagination/ic-pagination.types";
 export { IcPaginationItemType } from "./components/ic-pagination-item/ic-pagination-item.types";
 export { IcChangeEventDetail as IcChangeEventDetail2 } from "./components/ic-radio-group/ic-radio-group.types";
@@ -63,7 +67,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.
          */
@@ -71,7 +74,7 @@ export namespace Components {
         /**
           * If `true`, the accordion appears expanded.
          */
-        "expanded": boolean;
+        "expanded"?: boolean;
         /**
           * The section header outlining section content.
          */
@@ -88,24 +91,24 @@ 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;
+        "accessibleButtonLabel"?: string;
         /**
           * If `true`, the accordion will load in an expanded state.
          */
-        "expanded": boolean;
+        "expanded"?: boolean;
         /**
           * The header for the accordion group.
          */
-        "label": string;
+        "label"?: string;
         /**
           * Sets the focus on first focusable element in the accordion group. If the "See/Hide all" button is present, it will be focused. Otherwise, the first accordion will be focused.
          */
@@ -113,11 +116,15 @@ export namespace Components {
         /**
           * If `true`, only one accordion will open at a time.
          */
-        "singleExpansion": boolean;
+        "singleExpansion"?: boolean;
         /**
           * 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 {
         /**
@@ -136,6 +143,14 @@ export namespace Components {
           * The main body message of the alert.
          */
         "message"?: string;
+        /**
+          * 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.
          */
@@ -146,14 +161,22 @@ export namespace Components {
         "variant"?: IcStatusVariants;
     }
     interface IcBackToTop {
+        /**
+          * The horizontal position of the element.
+         */
+        "position"?: IcBackToTopPositions;
         /**
           * 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
          */
-        "variant": IcBackToTopVariants;
+        "variant"?: IcBackToTopVariants;
     }
     interface IcBadge {
         /**
@@ -180,6 +203,10 @@ export namespace Components {
           * The size of the badge 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 type of badge to be displayed.
          */
@@ -191,10 +218,9 @@ export namespace Components {
         /**
           * If `true`, the badge will be displayed.
          */
-        "visible": boolean;
+        "visible"?: boolean;
     }
     interface IcBreadcrumb {
-        "appearance": IcThemeForeground;
         /**
           * If `true`, aria-current will be set on the breadcrumb.
          */
@@ -203,6 +229,7 @@ export namespace Components {
           * The URL that the breadcrumb link points to.
          */
         "href"?: string;
+        "monochrome"?: boolean;
         /**
           * The title of the breadcrumb.
          */
@@ -211,33 +238,34 @@ export namespace Components {
           * Sets focus on the breadcrumb.
          */
         "setFocus": () => Promise<void>;
-        "showBackIcon": boolean;
+        "showBackIcon"?: boolean;
+        "theme"?: IcThemeMode;
     }
     interface IcBreadcrumbGroup {
-        /**
-          * The appearance of the breadcrumb group.
-         */
-        "appearance": IcThemeForeground;
         /**
           * If `true`, display only a single breadcrumb for the parent page with a back icon.
          */
-        "backBreadcrumbOnly": boolean;
+        "backBreadcrumbOnly"?: boolean;
         /**
           * If `true`, all breadcrumbs between the first and last breadcrumb will be collapsed.
          */
-        "collapsed": boolean;
+        "collapsed"?: boolean;
+        /**
+          * If `true`, the breadcrumb group will display as black in the light theme, and white in the dark theme.
+         */
+        "monochrome"?: 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;
     }
     interface IcButton {
         /**
           * 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;
+        "ariaControlsId"?: string | boolean;
+        "ariaOwnsId"?: string | boolean;
         /**
           * 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.
          */
@@ -261,7 +289,7 @@ export namespace Components {
         /**
           * The name of the control for the file input, which is submitted with the form data.
          */
-        "fileInputName": string;
+        "fileInputName"?: string;
         /**
           * If `true`, when the button is clicked the native file explorer will be launched.
          */
@@ -306,6 +334,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.
          */
@@ -321,7 +353,7 @@ export namespace Components {
         /**
           * The list of the files that have been selected by a user.
          */
-        "selectedFiles": FileList;
+        "selectedFiles"?: FileList;
         /**
           * Sets focus on the native `button`.
          */
@@ -334,6 +366,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.
          */
@@ -375,7 +411,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.
          */
@@ -404,14 +440,18 @@ 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 {
         /**
           * The style of additionalField that will be displayed if used.
          */
-        "additionalFieldDisplay": IcAdditionalFieldTypes;
+        "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;
         /**
@@ -421,7 +461,7 @@ export namespace Components {
         /**
           * The text to be displayed when dynamic.
          */
-        "dynamicText": string;
+        "dynamicText"?: string;
         /**
           * The <form> element to associate the checkbox with.
          */
@@ -429,15 +469,15 @@ export namespace Components {
         /**
           * The group label for the checkbox.
          */
-        "groupLabel": string;
+        "groupLabel"?: string;
         /**
           * If `true`, the label will be hidden and the required label value will be applied as an aria-label.
          */
-        "hideLabel": boolean;
+        "hideLabel"?: boolean;
         /**
           * If `true`, the indeterminate state will be displayed when checked.
          */
-        "indeterminate": boolean;
+        "indeterminate"?: boolean;
         /**
           * The label for the checkbox.
          */
@@ -445,11 +485,11 @@ export namespace Components {
         /**
           * The name for the checkbox. If not set when used in a checkbox group, the name will be based on the group name.
          */
-        "name": string;
+        "name"?: string;
         /**
           * If `true`, the checkbox will behave like a native checkbox where the `indeterminate` prop sets the indeterminate visual styling, independent of the `checked` state.
          */
-        "nativeIndeterminateBehaviour": boolean;
+        "nativeIndeterminateBehaviour"?: boolean;
         /**
           * Sets focus on the checkbox.
          */
@@ -458,6 +498,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.
          */
@@ -467,15 +511,15 @@ export namespace Components {
         /**
           * If `true`, the checkbox group will be set to the disabled state.
          */
-        "disabled": boolean;
+        "disabled"?: boolean;
         /**
           * The helper text that will be displayed for additional field guidance.
          */
-        "helperText": string;
+        "helperText"?: string;
         /**
           * If `true`, the label will be hidden and the required label value will be applied as an aria-label.
          */
-        "hideLabel": boolean;
+        "hideLabel"?: boolean;
         /**
           * The label for the checkbox group to be displayed.
          */
@@ -487,29 +531,37 @@ export namespace Components {
         /**
           * If `true`, the checkbox group will require a value.
          */
-        "required": boolean;
+        "required"?: boolean;
         /**
           * 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'.
          */
-        "validationStatus": IcInformationStatusOrEmpty;
+        "validationStatus"?: IcInformationStatusOrEmpty;
         /**
-          * The validation text - e.g. 'error' | 'warning' | 'success'.
+          * The text to display as the validation message.
          */
-        "validationText": string;
+        "validationText"?: string;
     }
     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.
          */
@@ -527,7 +579,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;
         /**
@@ -561,37 +617,41 @@ export namespace Components {
         /**
           * The title for the data list.
          */
-        "heading": string;
+        "heading"?: string;
         /**
           * The size of the data list 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;
     }
     interface IcDataRow {
         /**
           * The label in the leftmost cell of the row.
          */
-        "label": string;
+        "label"?: string;
         /**
           * The size of the data row 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 middle (right if no end-component supplied) cell of the row.
          */
-        "value": string;
+        "value"?: string;
     }
     interface IcDialog {
-        /**
-          * If set to `false`, default buttons or slotted dialog controls will not be displayed.
-         */
-        "buttons"?: boolean;
         /**
           * Cancels the dialog. Used by the default 'Cancel' button or can be called manually to trigger cancelling of dialog.
          */
         "cancelDialog": () => Promise<void>;
         /**
-          * If set to `true`, the dialog will not close when the backdrop is clicked.
+          * If set to `false`, the dialog will not close when the backdrop is clicked.
          */
         "closeOnBackdropClick"?: boolean;
         /**
@@ -599,7 +659,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;
         /**
@@ -617,11 +677,15 @@ export namespace Components {
         /**
           * Sets the heading for the dialog.
          */
-        "heading": string;
+        "heading"?: string;
         /**
           * If `true`, the close button will not be displayed.
          */
         "hideCloseButton"?: boolean;
+        /**
+          * If set to `true`, default button controls will not be shown, but slotted dialog controls will still be displayed.
+         */
+        "hideDefaultControls": boolean;
         /**
           * Sets the optional label for the dialog which appears above the heading.
          */
@@ -629,13 +693,45 @@ export namespace Components {
         /**
           * If `true`, the dialog will be displayed.
          */
-        "open": boolean;
+        "open"?: boolean;
         /**
           * 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 {
         /**
@@ -662,6 +758,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 {
         /**
@@ -675,15 +775,15 @@ export namespace Components {
         /**
           * The caption displayed at the bottom of the footer.
          */
-        "caption": string;
+        "caption"?: string;
         /**
           * If `true`, the footer will display the crown copyright at the bottom.
          */
-        "copyright": boolean;
+        "copyright"?: boolean;
         /**
           * The description displayed at the top of the footer.
          */
-        "description": string;
+        "description"?: string;
         /**
           * If `true`, the footer will be set up to handle link groups instead of standalone links.
          */
@@ -725,7 +825,7 @@ export namespace Components {
         /**
           * The alignment of the hero.
          */
-        "aligned": IcAlignment;
+        "aligned"?: IcAlignment;
         /**
           * The optional background image.
          */
@@ -733,7 +833,7 @@ export namespace Components {
         /**
           * The alignment of the hero content.
          */
-        "contentAligned": IcHeroContentAlignments;
+        "contentAligned"?: IcHeroContentAlignments;
         /**
           * If `true`, the background image (if set) will not scroll using a parallax effect.
          */
@@ -741,7 +841,7 @@ export namespace Components {
         /**
           * The heading of the hero. An <h2> level heading.
          */
-        "heading": string;
+        "heading"?: string;
         /**
           * The optional secondary heading, an <h3> level heading. Replaced by slotted right content.
          */
@@ -763,31 +863,29 @@ 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.
          */
-        "disabled": boolean;
+        "disabled"?: boolean;
         /**
           * If `true`, the input component container will fill the width of the container it is in.
          */
-        "fullWidth": boolean;
+        "fullWidth"?: boolean;
         /**
           * If `true`, the input component container will allow for multiple lines.
          */
-        "multiLine": boolean;
+        "multiLine"?: boolean;
         /**
           * If `true`, the readonly state will be set.
          */
-        "readonly": boolean;
+        "readonly"?: boolean;
         /**
           * The size of the input component container component.
          */
@@ -795,11 +893,11 @@ export namespace Components {
         /**
           * If `true`, the validation will display inline.
          */
-        "validationInline": boolean;
+        "validationInline"?: boolean;
         /**
           * The validation status of the input component container - e.g. 'error' | 'warning' | 'success'.
          */
-        "validationStatus": IcInformationStatusOrEmpty;
+        "validationStatus"?: IcInformationStatusOrEmpty;
     }
     interface IcInputContainer {
         /**
@@ -812,22 +910,22 @@ export namespace Components {
         "readonly"?: boolean;
     }
     interface IcInputLabel {
-        /**
-          * The appearance of the input label.
-         */
-        "appearance"?: "dark" | "default";
         /**
           * If `true`, the disabled state will be set.
          */
-        "disabled": boolean;
+        "disabled"?: boolean;
         /**
           * The ID of the form element the label is bound to.
          */
-        "for": string;
+        "for"?: string;
         /**
           * The helper text that will be displayed.
          */
         "helperText": string;
+        /**
+          * The label will be visually hidden.
+         */
+        "hideLabel": boolean;
         /**
           * The text content of the label.
          */
@@ -844,20 +942,21 @@ export namespace Components {
           * The status of the label - e.g. 'error'.
          */
         "status": "error" | "";
+        "useLabelTag": boolean;
     }
     interface IcInputValidation {
         /**
           * The ARIA live mode to apply to the message.
          */
-        "ariaLiveMode": IcAriaLiveModeVariants;
+        "ariaLiveMode"?: IcAriaLiveModeVariants;
         /**
           * The ID of the form element the validation is bound to.
          */
-        "for": string;
+        "for"?: string;
         /**
           * If `true`, the input validation will fill the width of the container.
          */
-        "fullWidth": boolean;
+        "fullWidth"?: boolean;
         /**
           * The validation message to display.
          */
@@ -865,13 +964,9 @@ export namespace Components {
         /**
           * The status of the validation - e.g. 'error' | 'warning' | 'success'.
          */
-        "status": IcInformationStatusOrEmpty;
+        "status"?: IcInformationStatusOrEmpty;
     }
     interface IcLink {
-        /**
-          * The appearance of the link, e.g. dark, light, or default.
-         */
-        "appearance"?: IcThemeForeground;
         /**
           * If `true`, the user can save the linked URL instead of navigating to it.
          */
@@ -884,6 +979,10 @@ export namespace Components {
           * The human language of the linked URL.
          */
         "hreflang"?: string;
+        /**
+          * If `true`, the link will display as black in the light theme, and white in the dark theme.
+         */
+        "monochrome"?: boolean;
         /**
           * How much of the referrer to send when following the link.
          */
@@ -900,12 +999,12 @@ export namespace Components {
           * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
          */
         "target"?: string;
-    }
-    interface IcLoadingIndicator {
         /**
-          * The appearance of the loading indicator, e.g. dark or light.
+          * 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"?: IcThemeForegroundNoDefault;
+        "theme"?: IcThemeMode;
+    }
+    interface IcLoadingIndicator {
         /**
           * The description that will be set as the aria-label of the loading indicator when not using a visible label.
          */
@@ -916,9 +1015,9 @@ export namespace Components {
         "fullWidth"?: boolean;
         "innerLabel"?: number;
         /**
-          * The label to be displayed beneath the loading indicator. Display a changing label by separating multiple messages with forward slashes.
+          * The label to be displayed beneath the loading indicator. Display a changing label by supplying an array of messages.
          */
-        "label"?: string;
+        "label"?: string | string[];
         /**
           * The time in milliseconds before the label changes.
          */
@@ -931,6 +1030,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.
          */
@@ -939,6 +1042,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.
          */
@@ -953,11 +1060,15 @@ 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.
          */
-        "fullWidth": boolean;
+        "fullWidth"?: boolean;
         "handleClickOpen": () => Promise<void>;
         /**
           * Used alongside activationType If menu is opened via keyboard navigation (i.e. Enter, ArrowUp or ArrowDown), emit optionSelect custom event.
@@ -977,7 +1088,7 @@ export namespace Components {
         /**
           * The custom name for the label field for IcMenuOption.
          */
-        "labelField": string;
+        "labelField"?: string;
         /**
           * The ID of the menu.
          */
@@ -997,17 +1108,17 @@ 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.
          */
-        "valueField": string;
+        "valueField"?: string;
     }
     interface IcMenuGroup {
         /**
@@ -1016,6 +1127,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.
          */
@@ -1035,7 +1150,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.
          */
@@ -1059,7 +1174,7 @@ export namespace Components {
         /**
           * The variant of the menu item.
          */
-        "variant": IcMenuItemVariants;
+        "variant"?: IcMenuItemVariants;
     }
     interface IcNavigationButton {
         /**
@@ -1094,12 +1209,16 @@ 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 {
         /**
-          * If `true`, the group will be expandable in the side menu.
+          * If `true`, the group will be expandable when in an ic-side-navigation component, or, when in an ic-top-navigation component, in the side menu displayed at small screen sizes.
          */
-        "expandable": boolean;
+        "expandable"?: boolean;
         /**
           * The label to display on the group.
          */
@@ -1108,19 +1227,23 @@ 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;
-        "displayNavigationTooltip": boolean;
+        "collapsedIconLabel"?: boolean;
+        "displayNavigationTooltip"?: boolean;
         /**
           * If `true`, the user can save the linked URL instead of navigating to it.
          */
         "download"?: string | boolean;
-        "expandable": boolean;
+        "expandable"?: boolean;
         /**
           * The destination of the navigation item.
          */
-        "href": string;
+        "href"?: string;
         /**
           * The human language of the linked URL.
          */
@@ -1128,7 +1251,7 @@ export namespace Components {
         /**
           * The label of the navigation item.
          */
-        "label": string;
+        "label"?: string;
         /**
           * How much of the referrer to send when following the link.
          */
@@ -1140,7 +1263,7 @@ export namespace Components {
         /**
           * If `true`, the navigation item will be set in a selected state.
          */
-        "selected": boolean;
+        "selected"?: boolean;
         /**
           * Sets focus on the nav item.
          */
@@ -1149,16 +1272,24 @@ 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;
+        "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.
          */
-        "version": string;
+        "version"?: string;
     }
     interface IcPageHeader {
         /**
@@ -1193,44 +1324,48 @@ 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;
+        "adjacentPageCount"?: number;
         /**
           * The number of pages displayed as boundary items to the current page when using 'complex' type pagination. Accepted values are 0, 1 & 2.
          */
-        "boundaryPageCount": number;
+        "boundaryPageCount"?: number;
         /**
           * The current page displayed by the pagination.
          */
-        "currentPage": number;
+        "currentPage"?: number;
         /**
           * The default page to display.
          */
-        "defaultPage": number;
+        "defaultPage"?: number;
         /**
           * If `true`, the pagination will not allow interaction.
          */
-        "disabled": boolean;
+        "disabled"?: boolean;
         /**
           * If `true`, the current page of the simple pagination will not be displayed.
          */
-        "hideCurrentPage": boolean;
+        "hideCurrentPage"?: boolean;
         /**
           * If `true`, the first and last page buttons will not be displayed.
          */
-        "hideFirstAndLastPageButton": boolean;
+        "hideFirstAndLastPageButton"?: boolean;
         /**
           * The label for the pagination item (applicable when simple pagination is being used).
          */
-        "label": string;
+        "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.
          */
@@ -1240,32 +1375,40 @@ 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;
+        "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.
          */
-        "disabled": boolean;
+        "disabled"?: boolean;
         /**
           * The label for the pagination item (applicable when simple pagination is being used).
          */
-        "label": string;
+        "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.
          */
-        "page": number | null;
+        "page"?: number;
         /**
           * 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'.
          */
@@ -1275,11 +1418,15 @@ 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;
+        "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.
          */
-        "open": boolean;
+        "open"?: boolean | undefined;
         "openFromChild": () => Promise<void>;
         "openFromParent": () => Promise<void>;
         "parentLabel"?: string;
@@ -1288,21 +1435,25 @@ export namespace Components {
           * The unique identifier for a popover submenu.
          */
         "submenuId"?: string;
-        "submenuLevel": number;
+        "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 {
         /**
           * If `true`, the disabled state will be set.
          */
-        "disabled": boolean;
+        "disabled"?: boolean;
         /**
           * The helper text that will be displayed for additional field guidance.
          */
-        "helperText": string;
+        "helperText"?: string;
         /**
           * If `true`, the label will be hidden and the required label value will be applied as an aria-label.
          */
-        "hideLabel": boolean;
+        "hideLabel"?: boolean;
         /**
           * The label for the radio group to be displayed.
          */
@@ -1314,29 +1465,33 @@ export namespace Components {
         /**
           * The orientation of the radio buttons in the radio group. If there are more than two radio buttons in a radio group or either of the radio buttons use the `additional-field` slot, then the orientation will always be vertical.
          */
-        "orientation": IcOrientation;
+        "orientation"?: IcOrientation;
         /**
           * If `true`, the radio group will require a value.
          */
-        "required": boolean;
+        "required"?: boolean;
         /**
           * 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'.
          */
-        "validationStatus": IcInformationStatusOrEmpty;
+        "validationStatus"?: IcInformationStatusOrEmpty;
         /**
-          * The validation text - e.g. 'error' | 'warning' | 'success'.
+          * The text to display as the validation message.
          */
-        "validationText": string;
+        "validationText"?: string;
     }
     interface IcRadioOption {
         /**
           * The style of additionalField that will be displayed if used.
          */
-        "additionalFieldDisplay": IcAdditionalFieldTypes;
+        "additionalFieldDisplay"?: IcAdditionalFieldTypes;
         /**
           * If `true`, the disabled state will be set.
          */
@@ -1344,7 +1499,7 @@ export namespace Components {
         /**
           * The text to be displayed when dynamic.
          */
-        "dynamicText": string;
+        "dynamicText"?: string;
         /**
           * The <form> element to associate the radio with.
          */
@@ -1352,7 +1507,7 @@ export namespace Components {
         /**
           * The group label for the radio option.
          */
-        "groupLabel": string;
+        "groupLabel"?: string;
         /**
           * The label for the radio option.
          */
@@ -1360,7 +1515,7 @@ export namespace Components {
         /**
           * The name for the radio option.
          */
-        "name": string;
+        "name"?: string;
         /**
           * If `true`, the radio option will be displayed in a selected state.
          */
@@ -1370,6 +1525,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.
          */
@@ -1383,7 +1542,7 @@ export namespace Components {
         /**
           * The automatic capitalisation of the text value as it is entered/edited by the user. Available options: "off", "none", "on", "sentences", "words", "characters".
          */
-        "autocapitalize": string;
+        "autocapitalize": string | undefined;
         /**
           * The state of autocompletion the browser can apply on the text value.
          */
@@ -1395,11 +1554,11 @@ export namespace Components {
         /**
           * If `true`, the form control will have input focus when the page loads.
          */
-        "autofocus": boolean;
+        "autofocus": boolean | undefined;
         /**
           * The number of characters until suggestions appear. The submit button will be disabled until the inputted value is equal to or greater than this number.
          */
-        "charactersUntilSuggestion": number;
+        "charactersUntilSuggestion"?: number;
         /**
           * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.
          */
@@ -1415,7 +1574,7 @@ export namespace Components {
         /**
           * The text displayed when there are no options in the option list.
          */
-        "emptyOptionListText": string;
+        "emptyOptionListText"?: string;
         /**
           * If `true`, the search bar will be focused when component loaded.
          */
@@ -1455,7 +1614,7 @@ export namespace Components {
         /**
           * The name of the control, which is submitted with the form data.
          */
-        "name": string;
+        "name"?: string;
         /**
           * The suggested search options.
          */
@@ -1487,7 +1646,11 @@ export namespace Components {
         /**
           * If `true`, the value of the search will have its spelling and grammar checked.
          */
-        "spellcheck": boolean;
+        "spellcheck": boolean | undefined;
+        /**
+          * 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.
          */
@@ -1495,7 +1658,7 @@ export namespace Components {
         /**
           * The value of the search input.
          */
-        "value": string;
+        "value"?: string;
         /**
           * The custom name for the value field to correspond with the IcMenuOption type.
          */
@@ -1513,7 +1676,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;
         /**
@@ -1527,15 +1690,15 @@ export namespace Components {
         /**
           * The text displayed when there are no options in the option list.
          */
-        "emptyOptionListText": string;
+        "emptyOptionListText"?: string;
         /**
           * The <form> element to associate the select with.
          */
         "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;
+        "fullWidth"?: boolean;
         /**
           * The helper text that will be displayed for additional field guidance.
          */
@@ -1568,6 +1731,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.
          */
@@ -1593,11 +1760,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;
         /**
@@ -1609,9 +1776,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.
          */
@@ -1625,63 +1796,93 @@ 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[] | null;
     }
     interface IcSideNavigation {
         /**
           * The app title to be displayed. This is required, unless a slotted app title link is used.
          */
-        "appTitle": string;
+        "appTitle"?: string;
         /**
           * If `true`, the icon and label will appear when side navigation is collapsed.
          */
-        "collapsedIconLabels": boolean;
+        "collapsedIconLabels"?: boolean;
         /**
           * If `true`, automatic parent wrapper styling will be disabled.
          */
-        "disableAutoParentStyling": boolean;
+        "disableAutoParentStyling"?: boolean;
         /**
           * If `true`, the side navigation will not display as a top bar on small devices.
          */
-        "disableTopBarBehaviour": boolean;
+        "disableTopBarBehaviour"?: boolean;
         /**
           * If `true`, the side navigation will display in an expanded state.
          */
-        "expanded": boolean;
+        "expanded"?: boolean;
         /**
           * The URL that the app title link points to.
          */
-        "href": string;
-        "inline": boolean;
+        "href"?: string;
+        "inline"?: boolean;
         /**
           * The short title of the app to be displayed at small screen sizes in place of the app title.
          */
-        "shortAppTitle": string;
+        "shortAppTitle"?: string;
         /**
           * If `true`, the menu expand button will be removed (PLEASE NOTE: This takes effect on screen sizes 992px and above).
          */
-        "static": boolean;
+        "static"?: boolean;
         /**
           * The status of the app to be displayed.
          */
-        "status": string;
+        "status"?: string;
         /**
           * The version of the app to be displayed.
          */
-        "version": string;
+        "version"?: string;
     }
     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.
          */
         "variant"?: IcSkeletonVariants;
     }
+    interface IcSkipLink {
+        /**
+          * If `true`, the skip link will fill the width of the page.
+         */
+        "fullWidth": boolean;
+        /**
+          * If `true`, the skip link will appear inline with surrounding page content when focused.
+         */
+        "inline": boolean;
+        /**
+          * The label displayed when the skip link is focused.
+         */
+        "label": string;
+        /**
+          * If `true`, the skip link will display as black in the light theme, and white in the dark theme.
+         */
+        "monochrome": boolean;
+        /**
+          * The target ID for the element which should receive focus when triggering the skip link.
+         */
+        "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;
+        /**
+          * If `true`, the background will be hidden.
+         */
+        "transparentBackground": boolean;
+    }
     interface IcStatusTag {
         /**
           * If `true`, role='status' is added to the component and it will act as an 'aria-live' region. Screen readers will announce changes to the `label`, but not the initial value.
@@ -1699,6 +1900,14 @@ export namespace Components {
           * The colour of the status tag.
          */
         "status"?: IcStatusTagStatuses;
+        /**
+          * 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.
          */
@@ -1724,6 +1933,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.
          */
@@ -1735,10 +1945,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.
          */
@@ -1747,6 +1953,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.
          */
@@ -1781,55 +1991,59 @@ 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>`.
          */
         "value"?: string | null;
     }
     interface IcTab {
-        "appearance"?: IcThemeForegroundNoDefault;
         "contextId"?: string;
         /**
           * If `true`, the disabled state will be set.
          */
         "disabled"?: boolean;
+        "monochrome"?: boolean;
         "selected"?: boolean;
         /**
           * Sets focus on the tab.
          */
         "setFocus": () => Promise<void>;
-        "tabId"?: string;
-        "tabPosition"?: number;
+        "tabId": string;
+        "tabPosition": number;
+        "theme"?: IcThemeMode;
     }
     interface IcTabContext {
         /**
           * Determines whether tabs have to be manually activated (by pressing 'Enter' or 'Space') when they receive focus using keyboard navigation.
          */
         "activationType"?: IcActivationTypes;
-        /**
-          * The appearance of the tab context, e.g dark, or light.
-         */
-        "appearance"?: IcThemeForegroundNoDefault;
         /**
           * The unique context needed if using multiple tabs inside one another i.e. rendering another set of tabs inside a tab panel.
          */
         "contextId"?: string;
+        /**
+          * If `true`, the tabs will display as black in the light theme.
+         */
+        "monochrome"?: boolean;
         /**
           * The selected tab to be controlled by the user. Must be used alongside the icTabSelect event to manage tab selection.
          */
         "selectedTabIndex"?: number;
         "tabRemovedHandler": (hadFocus?: boolean) => 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 IcTabGroup {
-        "appearance"?: IcThemeForegroundNoDefault;
         /**
           * If `true`, the tabs and tab panels will be positioned separately.
          */
@@ -1838,59 +2052,63 @@ export namespace Components {
           * The label to describe the purpose of the set of tabs to screen reader users.
          */
         "label": string;
+        "monochrome"?: boolean;
+        "theme"?: IcThemeMode;
     }
     interface IcTabPanel {
-        "appearance"?: IcThemeForegroundNoDefault;
+        "active": boolean;
+        "monochrome"?: boolean;
         "panelId"?: string;
         "selectedTab"?: string;
         "tabPosition"?: number;
+        "theme"?: IcThemeMode;
     }
     interface IcTextField {
         "ariaActiveDescendant"?: string;
-        "ariaAutocomplete": IcAriaAutocompleteTypes;
-        "ariaExpanded": string;
-        "ariaOwns": string;
-        /**
-          * If `true`, the form control will have input focus when the page loads.
-         */
-        "autoFocus": boolean;
+        "ariaAutocomplete"?: IcAriaAutocompleteTypes;
+        "ariaExpanded": string | undefined;
+        "ariaOwns"?: string;
         /**
           * The automatic capitalisation of the text value as it is entered/edited by the user. Available options: "off", "none", "on", "sentences", "words", "characters".
          */
-        "autocapitalize": string;
+        "autocapitalize": string | undefined;
         /**
           * The state of autocompletion the browser can apply on the text value.
          */
-        "autocomplete": IcAutocompleteTypes;
+        "autocomplete"?: IcAutocompleteTypes;
         /**
           * The state of autocorrection the browser can apply when the user is entering/editing the text value.
          */
-        "autocorrect": IcAutocorrectStates;
+        "autocorrect"?: IcAutocorrectStates;
+        /**
+          * If `true`, the form control will have input focus when the page loads.
+         */
+        "autofocus": boolean | undefined;
         /**
           * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.
          */
-        "debounce": number;
+        "debounce"?: number;
         /**
           * If `true`, the disabled state will be set.
          */
-        "disabled": boolean;
+        "disabled"?: boolean;
         /**
           * Specify whether the text field fills the full width of the container. If `true`, this overrides the --input-width CSS variable.
          */
-        "fullWidth": boolean;
+        "fullWidth"?: boolean;
         /**
           * The helper text that will be displayed for additional field guidance.
          */
-        "helperText": string;
-        "hiddenInput": boolean;
+        "helperText"?: string;
+        "hiddenInput"?: boolean;
         /**
           * If `true`, the character count which is displayed when `maxCharacters` is set will be visually hidden.
          */
-        "hideCharCount": boolean;
+        "hideCharCount"?: boolean;
         /**
           * If `true`, the label will be hidden and the required label value will be applied as an aria-label.
          */
-        "hideLabel": boolean;
+        "hideLabel"?: boolean;
         /**
           * The ID for the input.
          */
@@ -1898,7 +2116,7 @@ export namespace Components {
         /**
           * A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
          */
-        "inputmode": IcTextFieldInputModes;
+        "inputmode"?: IcTextFieldInputModes;
         /**
           * The label for the input.
          */
@@ -1906,44 +2124,60 @@ export namespace Components {
         /**
           * The maximum number that can be accepted as a value, when `type` is `number` and `rows` is `1`. (NOTE: Ensure to include visual indication of max value in `helperText` or `label`)
          */
-        "max": string | number;
+        "max"?: string | number;
         /**
           * The count of characters in the field. Will display a warning if the bound is reached. (NOTE: If the value of the text field has been set using the `value` prop, it will be truncated to this number of characters)
          */
-        "maxCharacters": number;
+        "maxCharacters"?: number;
+        /**
+          * The text to display as the warning message when the maximum number of characters (the `maxCharacters` prop value) is reached.
+         */
+        "maxCharactersMessage"?: string;
+        /**
+          * The text to display as the error message when the maximum value (the `max` prop value) has been exceeded.
+         */
+        "maxMessage"?: string;
         /**
           * The minimum number that can be accepted as a value, when `type` is `number` and `rows` is `1`. (NOTE: Ensure to include visual indication of min value in `helperText` or `label`)
          */
-        "min": string | number;
+        "min"?: string | number;
         /**
           * The minimum number of characters that can be entered in the field.
          */
-        "minCharacters": number;
+        "minCharacters"?: number;
+        /**
+          * The text to display as the error message when the minimum number of characters (the `minCharacters` prop value) has not been met.
+         */
+        "minCharactersMessage"?: string;
+        /**
+          * The text to display as the error message when the minimum value (the `min` prop value) has not been met.
+         */
+        "minMessage"?: string;
         /**
           * The name of the control, which is submitted with the form data.
          */
-        "name": string;
+        "name"?: string;
         /**
           * The placeholder value to be displayed.
          */
-        "placeholder": string;
+        "placeholder"?: string;
         /**
           * If `true`, the read only state will be set.
          */
-        "readonly": boolean;
+        "readonly"?: boolean;
         /**
           * If `true`, the input will require a value.
          */
-        "required": boolean;
+        "required"?: boolean;
         /**
           * If `true`, the multiline text area will be resizeable.
          */
-        "resize": boolean;
-        "role": string;
+        "resize"?: boolean;
+        "role": string | undefined;
         /**
           * The number of rows to transform the text field into a text area with a specific height.
          */
-        "rows": number;
+        "rows"?: number;
         /**
           * Sets focus on the native `input`.
          */
@@ -1955,25 +2189,29 @@ export namespace Components {
         /**
           * If `true`, the value of the text field will have its spelling and grammar checked.
          */
-        "spellcheck": boolean;
+        "spellcheck": boolean | undefined;
+        /**
+          * 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.
          */
-        "type": IcTextFieldTypes;
+        "type"?: IcTextFieldTypes;
         /**
           * If `true`, the icon in input control will be displayed - only applies when validationStatus ='success'.
          */
-        "validationInline": boolean;
-        "validationInlineInternal": boolean;
+        "validationInline"?: boolean;
+        "validationInlineInternal"?: boolean;
         /**
           * The validation state - e.g. 'error' | 'warning' | 'success'.
          */
-        "validationStatus": IcInformationStatusOrEmpty;
+        "validationStatus"?: IcInformationStatusOrEmpty;
         /**
-          * The validation state - e.g. 'error' | 'warning' | 'success'.
+          * The text to display as the validation message.
          */
-        "validationText": string;
+        "validationText"?: string;
         /**
           * The value of the text field.
          */
@@ -1981,19 +2219,23 @@ 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)".
+         */
+        "brandColor"?: IcColor | null;
+        /**
+          * The theme mode. Can be "dark", "light", or "system". "system" will use the device or browser settings.
          */
-        "color"?: IcColor;
+        "theme"?: "dark" | "light" | "system";
     }
     interface IcToast {
         /**
           * If toast dismissMode is set to `automatic`, use this prop to define the time before the toast dismisses (in MILLISECONDS) (NOTE: Has a minimum value of `5000ms`)
          */
-        "autoDismissTimeout"?: number;
+        "autoDismissTimeout"?: number | undefined;
         /**
           * If toast can be manually dismissed, this prop sets a custom aria-label for the ic-button component
          */
-        "dismissButtonAriaLabel"?: string;
+        "dismissButtonAriaLabel"?: string | undefined;
         /**
           * How the toast will be dismissed. If manual will display a dismiss button.
          */
@@ -2013,7 +2255,7 @@ export namespace Components {
         /**
           * @returns The element that previously had focus before the toast appeared
          */
-        "setVisible": () => Promise<HTMLElement>;
+        "setVisible": () => Promise<HTMLElement | null>;
         /**
           * The variant of the toast being rendered
          */
@@ -2023,21 +2265,17 @@ export namespace Components {
         /**
           * The toast element to be displayed.
          */
-        "openToast": HTMLIcToastElement;
+        "openToast"?: HTMLIcToastElement;
     }
     interface IcToggleButton {
         /**
           * 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.
          */
-        "checked": boolean;
+        "checked"?: boolean;
         /**
           * If `true`, the toggle button will be in disabled state.
          */
@@ -2049,7 +2287,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.
          */
@@ -2058,24 +2296,32 @@ 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.
          */
-        "variant": "default" | "icon";
+        "variant"?: "default" | "icon";
     }
     interface IcToggleButtonGroup {
         /**
           * 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.
          */
@@ -2092,6 +2338,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`.
          */
@@ -2104,12 +2354,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.
@@ -2143,40 +2404,48 @@ export namespace Components {
           * The ID of the element the tooltip is describing - for when aria-labelledby or aria-describedby is used.
          */
         "target"?: string;
+        /**
+          * Sets the tooltip to the dark or light theme colors. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        "theme"?: IcThemeMode;
     }
     interface IcTopNavigation {
         /**
           * The app title to be displayed. This is required, unless a slotted app title link is used.
          */
-        "appTitle": string;
+        "appTitle"?: string;
         /**
           * The alignment of the top navigation content.
          */
-        "contentAligned": IcAlignment;
+        "contentAligned"?: IcAlignment;
         /**
           * Can set a custom breakpoint for the top navigation to switch to mobile mode. Must be one of our specified breakpoints in px: `0`, `576`, `768`, `992`, `1200`.
          */
-        "customMobileBreakpoint": IcDeviceSizes;
+        "customMobileBreakpoint"?: IcDeviceSizes;
         /**
           * The URL to navigate to when the app title is clicked.
          */
-        "href": string;
+        "href"?: string;
         /**
           * If `true`, the flyout navigation menu on small devices will be contained by the parent element.
          */
-        "inline": boolean;
+        "inline"?: boolean;
         /**
           * The short title of the app to be displayed at small screen sizes in place of the app title.
          */
-        "shortAppTitle": string;
+        "shortAppTitle"?: string;
         /**
           * The status info to be displayed.
          */
-        "status": string;
+        "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.
          */
-        "version": string;
+        "version"?: string;
     }
     interface IcTypography {
         /**
@@ -2205,6 +2474,10 @@ export namespace Components {
           * If `true`, the typography will have a line through it.
          */
         "strikethrough"?: boolean;
+        /**
+          * Sets the text 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 typography will have a line under it.
          */
@@ -2255,6 +2528,10 @@ export interface IcMenuItemCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIcMenuItemElement;
 }
+export interface IcNavigationGroupCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIcNavigationGroupElement;
+}
 export interface IcNavigationItemCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIcNavigationItemElement;
@@ -2608,12 +2885,13 @@ 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;
+        "retryButtonClicked": IcMultiValueEventDetail;
         "timeoutBlur": { ev: FocusEvent };
         "ungroupedOptionsSet": { options: IcMenuOption[] };
     }
@@ -2639,9 +2917,9 @@ declare global {
     };
     interface HTMLIcMenuItemElementEventMap {
         "childBlur": void;
-        "handleMenuItemClick": {
-    label: string;
-    hasSubMenu: boolean;
+        "handleMenuItemClick": HTMLIcMenuItemElement;
+        "icToggleChecked": {
+    checked: boolean;
   };
         "triggerPopoverMenuInstance": void;
     }
@@ -2665,7 +2943,19 @@ declare global {
         prototype: HTMLIcNavigationButtonElement;
         new (): HTMLIcNavigationButtonElement;
     };
+    interface HTMLIcNavigationGroupElementEventMap {
+        "navigationGroupOpened": IcNavigationOpenEventDetail;
+        "navigationGroupExpanded": IcNavigationExpandEventDetail;
+    }
     interface HTMLIcNavigationGroupElement extends Components.IcNavigationGroup, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIcNavigationGroupElementEventMap>(type: K, listener: (this: HTMLIcNavigationGroupElement, ev: IcNavigationGroupCustomEvent<HTMLIcNavigationGroupElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIcNavigationGroupElementEventMap>(type: K, listener: (this: HTMLIcNavigationGroupElement, ev: IcNavigationGroupCustomEvent<HTMLIcNavigationGroupElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLIcNavigationGroupElement: {
         prototype: HTMLIcNavigationGroupElement;
@@ -2730,7 +3020,7 @@ declare global {
         new (): HTMLIcPaginationElement;
     };
     interface HTMLIcPaginationItemElementEventMap {
-        "paginationItemClick": { page: number };
+        "paginationItemClick": { page: number | null };
     }
     interface HTMLIcPaginationItemElement extends Components.IcPaginationItem, HTMLStencilElement {
         addEventListener<K extends keyof HTMLIcPaginationItemElementEventMap>(type: K, listener: (this: HTMLIcPaginationItemElement, ev: IcPaginationItemCustomEvent<HTMLIcPaginationItemElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -2747,7 +3037,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;
@@ -2805,11 +3095,12 @@ declare global {
         "icOptionSelect": IcOptionSelectEventDetail;
         "icMenuChange": IcMenuChangeEventDetail;
         "icClearBlur": IcBlurEventDetail;
-        "icRetryLoad": IcValueEventDetail;
+        "icRetryLoad": IcMultiValueEventDetail;
         "icSubmitSearch": IcValueEventDetail;
         "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;
@@ -2833,14 +3124,15 @@ declare global {
     };
     interface HTMLIcSelectElementEventMap {
         "icBlur": void;
-        "icChange": IcValueEventDetail;
+        "icChange": IcMultiValueEventDetail;
         "icClear": void;
         "icClose": void;
         "icFocus": void;
-        "icInput": IcValueEventDetail;
+        "icInput": IcMultiValueEventDetail;
         "icOpen": void;
         "icOptionSelect": IcOptionSelectEventDetail;
-        "icRetryLoad": IcValueEventDetail;
+        "icOptionDeselect": IcOptionSelectEventDetail;
+        "icRetryLoad": IcMultiValueEventDetail;
     }
     interface HTMLIcSelectElement extends Components.IcSelect, HTMLStencilElement {
         addEventListener<K extends keyof HTMLIcSelectElementEventMap>(type: K, listener: (this: HTMLIcSelectElement, ev: IcSelectCustomEvent<HTMLIcSelectElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -2879,6 +3171,12 @@ declare global {
         prototype: HTMLIcSkeletonElement;
         new (): HTMLIcSkeletonElement;
     };
+    interface HTMLIcSkipLinkElement extends Components.IcSkipLink, HTMLStencilElement {
+    }
+    var HTMLIcSkipLinkElement: {
+        prototype: HTMLIcSkipLinkElement;
+        new (): HTMLIcSkipLinkElement;
+    };
     interface HTMLIcStatusTagElement extends Components.IcStatusTag, HTMLStencilElement {
     }
     var HTMLIcStatusTagElement: {
@@ -3001,7 +3299,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;
@@ -3169,6 +3467,7 @@ declare global {
         "ic-select": HTMLIcSelectElement;
         "ic-side-navigation": HTMLIcSideNavigationElement;
         "ic-skeleton": HTMLIcSkeletonElement;
+        "ic-skip-link": HTMLIcSkipLinkElement;
         "ic-status-tag": HTMLIcStatusTagElement;
         "ic-step": HTMLIcStepElement;
         "ic-stepper": HTMLIcStepperElement;
@@ -3210,16 +3509,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.
          */
@@ -3236,6 +3535,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 {
         /**
@@ -3258,6 +3561,14 @@ declare namespace LocalJSX {
           * Is emitted when the user dismisses the alert.
          */
         "onIcDismiss"?: (event: IcAlertCustomEvent<void>) => void;
+        /**
+          * 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.
          */
@@ -3268,10 +3579,18 @@ declare namespace LocalJSX {
         "variant"?: IcStatusVariants;
     }
     interface IcBackToTop {
+        /**
+          * The horizontal position of the element.
+         */
+        "position"?: IcBackToTopPositions;
         /**
           * 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
          */
@@ -3302,6 +3621,10 @@ declare namespace LocalJSX {
           * The size of the badge 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 type of badge to be displayed.
          */
@@ -3330,10 +3653,6 @@ declare namespace LocalJSX {
         "pageTitle": string;
     }
     interface IcBreadcrumbGroup {
-        /**
-          * The appearance of the breadcrumb group.
-         */
-        "appearance"?: IcThemeForeground;
         /**
           * If `true`, display only a single breadcrumb for the parent page with a back icon.
          */
@@ -3342,16 +3661,20 @@ declare namespace LocalJSX {
           * If `true`, all breadcrumbs between the first and last breadcrumb will be collapsed.
          */
         "collapsed"?: boolean;
+        /**
+          * If `true`, the breadcrumb group will display as black in the light theme, and white in the dark theme.
+         */
+        "monochrome"?: 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;
     }
     interface IcButton {
         /**
           * 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.
          */
@@ -3420,6 +3743,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.
          */
@@ -3456,6 +3783,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.
          */
@@ -3497,7 +3828,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.
          */
@@ -3522,6 +3853,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 {
         /**
@@ -3529,7 +3864,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;
         /**
@@ -3576,6 +3911,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.
          */
@@ -3614,24 +3953,32 @@ 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'.
          */
         "validationStatus"?: IcInformationStatusOrEmpty;
         /**
-          * The validation text - e.g. 'error' | 'warning' | 'success'.
+          * The text to display as the validation message.
          */
         "validationText"?: string;
     }
     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.
          */
@@ -3649,7 +3996,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;
         /**
@@ -3688,6 +4039,10 @@ declare namespace LocalJSX {
           * The size of the data list 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;
     }
     interface IcDataRow {
         /**
@@ -3698,6 +4053,10 @@ declare namespace LocalJSX {
           * The size of the data row 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 middle (right if no end-component supplied) cell of the row.
          */
@@ -3705,15 +4064,11 @@ declare namespace LocalJSX {
     }
     interface IcDialog {
         /**
-          * If set to `false`, default buttons or slotted dialog controls will not be displayed.
-         */
-        "buttons"?: boolean;
-        /**
-          * If set to `true`, the dialog will not close when the backdrop is clicked.
+          * If set to `false`, the dialog will not close when the backdrop is clicked.
          */
         "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;
         /**
@@ -3736,6 +4091,10 @@ declare namespace LocalJSX {
           * If `true`, the close button will not be displayed.
          */
         "hideCloseButton"?: boolean;
+        /**
+          * If set to `true`, default button controls will not be shown, but slotted dialog controls will still be displayed.
+         */
+        "hideDefaultControls"?: boolean;
         /**
           * Sets the optional label for the dialog which appears above the heading.
          */
@@ -3764,8 +4123,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 {
         /**
@@ -3792,6 +4183,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 {
         /**
@@ -3893,13 +4288,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.
          */
@@ -3940,10 +4331,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.
          */
@@ -3956,6 +4343,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.
          */
@@ -3996,10 +4387,6 @@ declare namespace LocalJSX {
         "status"?: IcInformationStatusOrEmpty;
     }
     interface IcLink {
-        /**
-          * The appearance of the link, e.g. dark, light, or default.
-         */
-        "appearance"?: IcThemeForeground;
         /**
           * If `true`, the user can save the linked URL instead of navigating to it.
          */
@@ -4012,6 +4399,10 @@ declare namespace LocalJSX {
           * The human language of the linked URL.
          */
         "hreflang"?: string;
+        /**
+          * If `true`, the link will display as black in the light theme, and white in the dark theme.
+         */
+        "monochrome"?: boolean;
         /**
           * How much of the referrer to send when following the link.
          */
@@ -4024,12 +4415,12 @@ declare namespace LocalJSX {
           * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
          */
         "target"?: string;
-    }
-    interface IcLoadingIndicator {
         /**
-          * The appearance of the loading indicator, e.g. dark or light.
+          * 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"?: IcThemeForegroundNoDefault;
+        "theme"?: IcThemeMode;
+    }
+    interface IcLoadingIndicator {
         /**
           * The description that will be set as the aria-label of the loading indicator when not using a visible label.
          */
@@ -4039,9 +4430,9 @@ declare namespace LocalJSX {
          */
         "fullWidth"?: boolean;
         /**
-          * The label to be displayed beneath the loading indicator. Display a changing label by separating multiple messages with forward slashes.
+          * The label to be displayed beneath the loading indicator. Display a changing label by supplying an array of messages.
          */
-        "label"?: string;
+        "label"?: string | string[];
         /**
           * The time in milliseconds before the label changes.
          */
@@ -4054,6 +4445,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.
          */
@@ -4062,6 +4457,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.
          */
@@ -4076,6 +4475,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.
          */
@@ -4096,6 +4499,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.
          */
@@ -4109,13 +4516,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.
          */
@@ -4128,6 +4535,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.
          */
@@ -4147,11 +4558,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.
          */
@@ -4202,16 +4619,24 @@ 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 {
         /**
-          * If `true`, the group will be expandable in the side menu.
+          * If `true`, the group will be expandable when in an ic-side-navigation component, or, when in an ic-top-navigation component, in the side menu displayed at small screen sizes.
          */
         "expandable"?: boolean;
         /**
           * The label to display on the group.
          */
-        "label"?: string;
+        "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 {
         /**
@@ -4246,12 +4671,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.
          */
@@ -4290,16 +4723,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.
          */
@@ -4328,6 +4761,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.
          */
@@ -4336,16 +4773,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.
          */
@@ -4354,14 +4791,22 @@ 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.
          */
-        "page"?: number | null;
+        "page"?: number;
         /**
           * 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'.
          */
@@ -4375,15 +4820,19 @@ 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.
          */
-        "open"?: boolean;
+        "open"?: boolean | undefined;
         /**
           * 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 {
         /**
@@ -4422,12 +4871,16 @@ 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'.
          */
         "validationStatus"?: IcInformationStatusOrEmpty;
         /**
-          * The validation text - e.g. 'error' | 'warning' | 'success'.
+          * The text to display as the validation message.
          */
         "validationText"?: string;
     }
@@ -4472,6 +4925,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.
          */
@@ -4485,7 +4942,7 @@ declare namespace LocalJSX {
         /**
           * The automatic capitalisation of the text value as it is entered/edited by the user. Available options: "off", "none", "on", "sentences", "words", "characters".
          */
-        "autocapitalize"?: string;
+        "autocapitalize"?: string | undefined;
         /**
           * The state of autocompletion the browser can apply on the text value.
          */
@@ -4497,7 +4954,7 @@ declare namespace LocalJSX {
         /**
           * If `true`, the form control will have input focus when the page loads.
          */
-        "autofocus"?: boolean;
+        "autofocus"?: boolean | undefined;
         /**
           * The number of characters until suggestions appear. The submit button will be disabled until the inputted value is equal to or greater than this number.
          */
@@ -4570,6 +5027,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)
          */
@@ -4581,7 +5042,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when the 'retry loading' button is clicked
          */
-        "onIcRetryLoad"?: (event: IcSearchBarCustomEvent<IcValueEventDetail>) => void;
+        "onIcRetryLoad"?: (event: IcSearchBarCustomEvent<IcMultiValueEventDetail>) => void;
         /**
           * Emitted when blur is invoked from ic-search-bar
          */
@@ -4621,7 +5082,11 @@ declare namespace LocalJSX {
         /**
           * If `true`, the value of the search will have its spelling and grammar checked.
          */
-        "spellcheck"?: boolean;
+        "spellcheck"?: boolean | undefined;
+        /**
+          * 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.
          */
@@ -4647,7 +5112,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;
         /**
@@ -4667,7 +5132,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;
         /**
@@ -4702,6 +5167,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.
          */
@@ -4713,9 +5182,9 @@ declare namespace LocalJSX {
         /**
           * Emitted when the value changes.
          */
-        "onIcChange"?: (event: IcSelectCustomEvent<IcValueEventDetail>) => void;
+        "onIcChange"?: (event: IcSelectCustomEvent<IcMultiValueEventDetail>) => void;
         /**
-          * Emitted when the clear button is clicked.
+          * Emitted when the clear or clear all button is clicked.
          */
         "onIcClear"?: (event: IcSelectCustomEvent<void>) => void;
         /**
@@ -4729,19 +5198,23 @@ declare namespace LocalJSX {
         /**
           * Emitted when a keyboard input occurred.
          */
-        "onIcInput"?: (event: IcSelectCustomEvent<IcValueEventDetail>) => void;
+        "onIcInput"?: (event: IcSelectCustomEvent<IcMultiValueEventDetail>) => void;
         /**
           * Emitted when the select options menu is opened.
          */
         "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;
         /**
           * Emitted when the 'retry loading' button is clicked for a searchable variant.
          */
-        "onIcRetryLoad"?: (event: IcSelectCustomEvent<IcValueEventDetail>) => void;
+        "onIcRetryLoad"?: (event: IcSelectCustomEvent<IcMultiValueEventDetail>) => void;
         /**
           * The possible selection options.
          */
@@ -4763,11 +5236,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;
         /**
@@ -4775,9 +5248,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.
          */
@@ -4791,9 +5268,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[] | null;
     }
     interface IcSideNavigation {
         /**
@@ -4843,14 +5320,44 @@ 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.
          */
         "variant"?: IcSkeletonVariants;
     }
+    interface IcSkipLink {
+        /**
+          * If `true`, the skip link will fill the width of the page.
+         */
+        "fullWidth"?: boolean;
+        /**
+          * If `true`, the skip link will appear inline with surrounding page content when focused.
+         */
+        "inline"?: boolean;
+        /**
+          * The label displayed when the skip link is focused.
+         */
+        "label"?: string;
+        /**
+          * If `true`, the skip link will display as black in the light theme, and white in the dark theme.
+         */
+        "monochrome"?: boolean;
+        /**
+          * The target ID for the element which should receive focus when triggering the skip link.
+         */
+        "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;
+        /**
+          * If `true`, the background will be hidden.
+         */
+        "transparentBackground"?: boolean;
+    }
     interface IcStatusTag {
         /**
           * If `true`, role='status' is added to the component and it will act as an 'aria-live' region. Screen readers will announce changes to the `label`, but not the initial value.
@@ -4868,6 +5375,14 @@ declare namespace LocalJSX {
           * The colour of the status tag.
          */
         "status"?: IcStatusTagStatuses;
+        /**
+          * 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.
          */
@@ -4896,10 +5411,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.
          */
@@ -4908,6 +5419,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.
          */
@@ -4950,14 +5465,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>`.
          */
@@ -4974,14 +5489,14 @@ declare namespace LocalJSX {
           * Determines whether tabs have to be manually activated (by pressing 'Enter' or 'Space') when they receive focus using keyboard navigation.
          */
         "activationType"?: IcActivationTypes;
-        /**
-          * The appearance of the tab context, e.g dark, or light.
-         */
-        "appearance"?: IcThemeForegroundNoDefault;
         /**
           * The unique context needed if using multiple tabs inside one another i.e. rendering another set of tabs inside a tab panel.
          */
         "contextId"?: string;
+        /**
+          * If `true`, the tabs will display as black in the light theme.
+         */
+        "monochrome"?: boolean;
         /**
           * Emitted when a user selects a tab.
          */
@@ -4990,6 +5505,10 @@ declare namespace LocalJSX {
           * The selected tab to be controlled by the user. Must be used alongside the icTabSelect event to manage tab selection.
          */
         "selectedTabIndex"?: 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 IcTabGroup {
         /**
@@ -5004,14 +5523,10 @@ 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".
          */
-        "autocapitalize"?: string;
+        "autocapitalize"?: string | undefined;
         /**
           * The state of autocompletion the browser can apply on the text value.
          */
@@ -5020,6 +5535,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 | undefined;
         /**
           * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.
          */
@@ -5064,6 +5583,14 @@ declare namespace LocalJSX {
           * The count of characters in the field. Will display a warning if the bound is reached. (NOTE: If the value of the text field has been set using the `value` prop, it will be truncated to this number of characters)
          */
         "maxCharacters"?: number;
+        /**
+          * The text to display as the warning message when the maximum number of characters (the `maxCharacters` prop value) is reached.
+         */
+        "maxCharactersMessage"?: string;
+        /**
+          * The text to display as the error message when the maximum value (the `max` prop value) has been exceeded.
+         */
+        "maxMessage"?: string;
         /**
           * The minimum number that can be accepted as a value, when `type` is `number` and `rows` is `1`. (NOTE: Ensure to include visual indication of min value in `helperText` or `label`)
          */
@@ -5072,6 +5599,14 @@ declare namespace LocalJSX {
           * The minimum number of characters that can be entered in the field.
          */
         "minCharacters"?: number;
+        /**
+          * The text to display as the error message when the minimum number of characters (the `minCharacters` prop value) has not been met.
+         */
+        "minCharactersMessage"?: string;
+        /**
+          * The text to display as the error message when the minimum value (the `min` prop value) has not been met.
+         */
+        "minMessage"?: string;
         /**
           * The name of the control, which is submitted with the form data.
          */
@@ -5123,7 +5658,11 @@ declare namespace LocalJSX {
         /**
           * If `true`, the value of the text field will have its spelling and grammar checked.
          */
-        "spellcheck"?: boolean;
+        "spellcheck"?: boolean | undefined;
+        /**
+          * 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.
          */
@@ -5137,7 +5676,7 @@ declare namespace LocalJSX {
          */
         "validationStatus"?: IcInformationStatusOrEmpty;
         /**
-          * The validation state - e.g. 'error' | 'warning' | 'success'.
+          * The text to display as the validation message.
          */
         "validationText"?: string;
         /**
@@ -5147,19 +5686,23 @@ 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)".
+         */
+        "brandColor"?: IcColor | null;
+        /**
+          * The theme mode. Can be "dark", "light", or "system". "system" will use the device or browser settings.
          */
-        "color"?: IcColor;
+        "theme"?: "dark" | "light" | "system";
     }
     interface IcToast {
         /**
           * If toast dismissMode is set to `automatic`, use this prop to define the time before the toast dismisses (in MILLISECONDS) (NOTE: Has a minimum value of `5000ms`)
          */
-        "autoDismissTimeout"?: number;
+        "autoDismissTimeout"?: number | undefined;
         /**
           * If toast can be manually dismissed, this prop sets a custom aria-label for the ic-button component
          */
-        "dismissButtonAriaLabel"?: string;
+        "dismissButtonAriaLabel"?: string | undefined;
         /**
           * How the toast will be dismissed. If manual will display a dismiss button.
          */
@@ -5196,10 +5739,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.
          */
@@ -5215,7 +5754,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.
          */
@@ -5224,6 +5763,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.
          */
@@ -5234,6 +5777,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.
          */
@@ -5244,10 +5795,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.
          */
@@ -5264,6 +5811,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.
          */
@@ -5280,12 +5831,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.
          */
@@ -5306,6 +5869,10 @@ declare namespace LocalJSX {
           * The ID of the element the tooltip is describing - for when aria-labelledby or aria-describedby is used.
          */
         "target"?: string;
+        /**
+          * Sets the tooltip to the dark or light theme colors. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        "theme"?: IcThemeMode;
     }
     interface IcTopNavigation {
         /**
@@ -5340,6 +5907,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.
          */
@@ -5366,6 +5937,10 @@ declare namespace LocalJSX {
           * If `true`, the typography will have a line through it.
          */
         "strikethrough"?: boolean;
+        /**
+          * Sets the text 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 typography will have a line under it.
          */
@@ -5423,6 +5998,7 @@ declare namespace LocalJSX {
         "ic-select": IcSelect;
         "ic-side-navigation": IcSideNavigation;
         "ic-skeleton": IcSkeleton;
+        "ic-skip-link": IcSkipLink;
         "ic-status-tag": IcStatusTag;
         "ic-step": IcStep;
         "ic-stepper": IcStepper;
@@ -5493,6 +6069,7 @@ declare module "@stencil/core" {
             "ic-select": LocalJSX.IcSelect & JSXBase.HTMLAttributes<HTMLIcSelectElement>;
             "ic-side-navigation": LocalJSX.IcSideNavigation & JSXBase.HTMLAttributes<HTMLIcSideNavigationElement>;
             "ic-skeleton": LocalJSX.IcSkeleton & JSXBase.HTMLAttributes<HTMLIcSkeletonElement>;
+            "ic-skip-link": LocalJSX.IcSkipLink & JSXBase.HTMLAttributes<HTMLIcSkipLinkElement>;
             "ic-status-tag": LocalJSX.IcStatusTag & JSXBase.HTMLAttributes<HTMLIcStatusTagElement>;
             "ic-step": LocalJSX.IcStep & JSXBase.HTMLAttributes<HTMLIcStepElement>;
             "ic-stepper": LocalJSX.IcStepper & JSXBase.HTMLAttributes<HTMLIcStepperElement>;