@ukic/web-components 3.0.0-alpha.4 → 3.0.0-alpha.6

package/dist/types/components.d.ts

@@ -5,7 +5,7 @@
  * 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, IcThemeMode, IcTypographyVariants, IcValueEventDetail } from "./utils/types";
+import { IcActivationTypes, IcAdditionalFieldTypes, IcAlignment, IcAutocompleteTypes, IcAutocorrectStates, IcBlurEventDetail, IcBrand, IcBrandForeground, IcColor, IcDeviceSizes, IcEmphasisType, IcInformationStatusOrEmpty, IcMenuOption, IcOrientation, IcSearchMatchPositions, IcSelectMethodTypes, IcSelectTypes, IcSizes, IcSizesNoLarge, IcStatusVariants, IcThemeMode, IcTypographyVariants, IcValueEventDetail } from "./utils/types";
 import { IcBackToTopVariants } from "./components/ic-back-to-top/ic-back-to-top.types";
 import { IcBadgePositions, IcBadgeTypes, IcBadgeVariants } from "./components/ic-badge/ic-badge.types";
 import { IcButtonTooltipPlacement, IcButtonTypes, IcButtonVariants } from "./components/ic-button/ic-button.types";
@@ -34,7 +34,7 @@ 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, IcThemeMode, IcTypographyVariants, IcValueEventDetail } from "./utils/types";
+export { IcActivationTypes, IcAdditionalFieldTypes, IcAlignment, IcAutocompleteTypes, IcAutocorrectStates, IcBlurEventDetail, IcBrand, IcBrandForeground, IcColor, IcDeviceSizes, IcEmphasisType, IcInformationStatusOrEmpty, IcMenuOption, IcOrientation, IcSearchMatchPositions, IcSelectMethodTypes, IcSelectTypes, IcSizes, IcSizesNoLarge, IcStatusVariants, IcThemeMode, IcTypographyVariants, IcValueEventDetail } from "./utils/types";
 export { IcBackToTopVariants } from "./components/ic-back-to-top/ic-back-to-top.types";
 export { IcBadgePositions, IcBadgeTypes, IcBadgeVariants } from "./components/ic-badge/ic-badge.types";
 export { IcButtonTooltipPlacement, IcButtonTypes, IcButtonVariants } from "./components/ic-button/ic-button.types";
@@ -163,6 +163,10 @@ export namespace Components {
           * The ID of the element to jump back to when the link is clicked.
          */
         "target": string;
+        /**
+          * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        "theme"?: IcThemeMode;
         /**
           * The variant of the button to render
          */
@@ -254,10 +258,6 @@ export namespace Components {
           * If `fileUpload` is set to `true`, this is the accepted list of file types.
          */
         "accept"?: string;
-        /**
-          * The appearance of the button, e.g. dark, light, or the default.
-         */
-        "appearance"?: IcThemeForeground;
         "ariaControlsId": string | boolean;
         "ariaOwnsId": string | boolean;
         /**
@@ -328,6 +328,10 @@ export namespace Components {
           * If `true`, the button will be in loading state.
          */
         "loading"?: boolean;
+        /**
+          * If `true`, the button will display as monochromatic in either `light` or `dark` theme.
+         */
+        "monochrome"?: boolean;
         /**
           * If `fileUpload` is set to `true`, this boolean determines whether multiple files are accepted.
          */
@@ -356,6 +360,10 @@ export namespace Components {
           * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
          */
         "target"?: string;
+        /**
+          * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        "theme"?: IcThemeMode;
         /**
           * The position of the tooltip in relation to the button.
          */
@@ -544,6 +552,10 @@ export namespace Components {
           * 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.
          */
@@ -709,7 +721,7 @@ export namespace Components {
         /**
           * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
          */
-        "theme"?: IcThemeMode | IcThemeForeground;
+        "theme"?: IcThemeMode | IcBrandForeground;
         /**
           * The thickness of the divider.
          */
@@ -841,15 +853,13 @@ export namespace Components {
         /**
           * The appearance of the horizontal scroll, e.g. dark, light or the default.
          */
-        "appearance"?: IcThemeForeground;
+        "appearance"?: IcBrandForeground;
         "focusTrigger"?: string;
+        "monochrome"?: boolean;
         "scrollItemIntoView": (itemPosition: number) => Promise<void>;
+        "theme"?: IcThemeMode;
     }
     interface IcInputComponentContainer {
-        /**
-          * The appearance of the input component container.
-         */
-        "appearance"?: "dark" | "default";
         /**
           * If `true`, the disabled state will be set.
          */
@@ -890,10 +900,6 @@ export namespace Components {
         "readonly"?: boolean;
     }
     interface IcInputLabel {
-        /**
-          * The appearance of the input label.
-         */
-        "appearance"?: "dark" | "default";
         /**
           * If `true`, the disabled state will be set.
          */
@@ -1044,7 +1050,7 @@ 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.
          */
@@ -1111,6 +1117,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.
          */
@@ -1189,6 +1199,10 @@ export namespace Components {
           * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
          */
         "target"?: string;
+        /**
+          * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        "theme"?: IcThemeMode;
     }
     interface IcNavigationGroup {
         /**
@@ -1203,6 +1217,10 @@ export namespace Components {
           * Sets focus on the nav item.
          */
         "setFocus": () => Promise<void>;
+        /**
+          * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        "theme"?: IcThemeMode;
     }
     interface IcNavigationItem {
         "collapsedIconLabel": boolean;
@@ -1244,12 +1262,20 @@ export namespace Components {
           * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
          */
         "target"?: string;
+        /**
+          * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        "theme"?: IcThemeMode;
     }
     interface IcNavigationMenu {
         /**
           * The status info to display.
          */
         "status": string;
+        /**
+          * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        "theme"?: IcThemeMode;
         /**
           * The version info to display.
          */
@@ -1288,6 +1314,10 @@ 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 {
         /**
@@ -1382,7 +1412,7 @@ export namespace Components {
         /**
           * @param setFocusToAnchor when true return focus to anchor element when menu is closed
          */
-        "closeMenu": (setFocusToAnchor?: boolean) => Promise<void>;
+        "closeMenu": (setFocusToAnchor?: boolean, menuElement?: HTMLIcMenuItemElement) => Promise<void>;
         /**
           * If `true`, the popover menu will be displayed.
          */
@@ -1720,7 +1750,7 @@ 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;
         /**
@@ -1739,6 +1769,10 @@ export namespace Components {
           * 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.
          */
@@ -1830,6 +1864,10 @@ export namespace Components {
           * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
          */
         "theme"?: "dark" | "light" | "inherit";
+        /**
+          * The letter case of the status tag's label.
+         */
+        "uppercase"?: boolean;
         /**
           * The emphasis of the status tag.
          */
@@ -1993,10 +2031,6 @@ export namespace Components {
         "ariaAutocomplete": IcAriaAutocompleteTypes;
         "ariaExpanded": string;
         "ariaOwns": string;
-        /**
-          * If `true`, the form control will have input focus when the page loads.
-         */
-        "autoFocus": boolean;
         /**
           * The automatic capitalisation of the text value as it is entered/edited by the user. Available options: "off", "none", "on", "sentences", "words", "characters".
          */
@@ -2009,6 +2043,10 @@ export namespace Components {
           * The state of autocorrection the browser can apply when the user is entering/editing the text value.
          */
         "autocorrect": IcAutocorrectStates;
+        /**
+          * If `true`, the form control will have input focus when the page loads.
+         */
+        "autofocus": boolean;
         /**
           * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.
          */
@@ -2099,6 +2137,10 @@ export namespace Components {
           * If `true`, the value of the text field will have its spelling and grammar checked.
          */
         "spellcheck": boolean;
+        /**
+          * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        "theme": IcThemeMode;
         "truncateValue"?: boolean;
         /**
           * The type of control to display. The default type is text.
@@ -2124,9 +2166,9 @@ export namespace Components {
     }
     interface IcTheme {
         /**
-          * The theme colour. Can be a hex value e.g. "#ff0000", RGB e.g. "rgb(255, 0, 0)", or RGBA e.g. "rgba(255, 0, 0, 1)".
+          * The brand colour. Can be a hex value e.g. "#ff0000", RGB e.g. "rgb(255, 0, 0)", or RGBA e.g. "rgba(255, 0, 0, 1)".
          */
-        "color"?: IcColor;
+        "brandColor"?: IcColor;
         /**
           * The theme mode. Can be "dark", "light", or "system". "system" will use the device or browser settings.
          */
@@ -2177,10 +2219,6 @@ export namespace Components {
           * The accessible label that will be applied to the toggle button. This is required for the icon variant of toggle buttons.
          */
         "accessibleLabel"?: string;
-        /**
-          * The appearance of the toggle button.
-         */
-        "appearance"?: IcThemeForeground;
         /**
           * If `true`, the toggle button will be in a checked state.
          */
@@ -2205,10 +2243,18 @@ 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 variant of the toggle button.
          */
@@ -2219,10 +2265,6 @@ export namespace Components {
           * The accessible label of the toggle button group component to provide context for screen reader users.
          */
         "accessibleLabel"?: string;
-        /**
-          * The appearance of the toggle button group, e.g dark, or light.
-         */
-        "appearance": IcThemeForeground;
         /**
           * If `true`, the toggle button group will be set to the disabled state.
          */
@@ -2239,6 +2281,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`.
          */
@@ -2251,6 +2297,10 @@ 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 variant of the toggle button.
          */
@@ -2324,6 +2374,10 @@ export namespace Components {
           * The status info to be displayed.
          */
         "status": string;
+        /**
+          * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        "theme"?: IcThemeMode;
         /**
           * The version info to be displayed.
          */
@@ -2794,9 +2848,9 @@ declare global {
     };
     interface HTMLIcMenuItemElementEventMap {
         "childBlur": void;
-        "handleMenuItemClick": {
-    label: string;
-    hasSubMenu: boolean;
+        "handleMenuItemClick": HTMLIcMenuItemElement;
+        "icToggleChecked": {
+    checked: boolean;
   };
         "triggerPopoverMenuInstance": void;
     }
@@ -2902,7 +2956,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;
@@ -3157,7 +3211,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;
@@ -3440,6 +3494,10 @@ declare namespace LocalJSX {
           * The ID of the element to jump back to when the link is clicked.
          */
         "target": string;
+        /**
+          * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        "theme"?: IcThemeMode;
         /**
           * The variant of the button to render
          */
@@ -3524,10 +3582,6 @@ declare namespace LocalJSX {
           * If `fileUpload` is set to `true`, this is the accepted list of file types.
          */
         "accept"?: string;
-        /**
-          * The appearance of the button, e.g. dark, light, or the default.
-         */
-        "appearance"?: IcThemeForeground;
         /**
           * If `true`, the ic-tooltip which is shown for icon variant will be disabled. Title or aria-label must be set if this prop is not applied.
          */
@@ -3596,6 +3650,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.
          */
@@ -3632,6 +3690,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.
          */
@@ -3820,6 +3882,10 @@ declare namespace LocalJSX {
           * 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.
          */
@@ -3993,7 +4059,7 @@ declare namespace LocalJSX {
         /**
           * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
          */
-        "theme"?: IcThemeMode | IcThemeForeground;
+        "theme"?: IcThemeMode | IcBrandForeground;
         /**
           * The thickness of the divider.
          */
@@ -4125,13 +4191,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.
          */
@@ -4172,10 +4234,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.
          */
@@ -4376,6 +4434,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.
          */
@@ -4400,6 +4462,12 @@ declare namespace LocalJSX {
           * 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.
          */
@@ -4450,6 +4518,10 @@ declare namespace LocalJSX {
           * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
          */
         "target"?: string;
+        /**
+          * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        "theme"?: IcThemeMode;
     }
     interface IcNavigationGroup {
         /**
@@ -4460,6 +4532,10 @@ declare namespace LocalJSX {
           * The label to display on the group.
          */
         "label"?: string;
+        /**
+          * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        "theme"?: IcThemeMode;
     }
     interface IcNavigationItem {
         /**
@@ -4494,12 +4570,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.
          */
@@ -4538,6 +4622,10 @@ 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 {
         /**
@@ -4631,7 +4719,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when the popover menu is closed.
          */
-        "onIcPopoverClosed"?: (event: IcPopoverMenuCustomEvent<void>) => void;
+        "onIcPopoverClosed"?: (event: IcPopoverMenuCustomEvent<HTMLIcMenuItemElement>) => void;
         /**
           * If `true`, the popover menu will be displayed.
          */
@@ -5043,7 +5131,7 @@ 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;
         /**
@@ -5058,6 +5146,10 @@ declare namespace LocalJSX {
           * 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.
          */
@@ -5152,6 +5244,10 @@ declare namespace LocalJSX {
           * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
          */
         "theme"?: "dark" | "light" | "inherit";
+        /**
+          * The letter case of the status tag's label.
+         */
+        "uppercase"?: boolean;
         /**
           * The emphasis of the status tag.
          */
@@ -5296,10 +5392,6 @@ declare namespace LocalJSX {
     interface IcTabPanel {
     }
     interface IcTextField {
-        /**
-          * If `true`, the form control will have input focus when the page loads.
-         */
-        "autoFocus"?: boolean;
         /**
           * The automatic capitalisation of the text value as it is entered/edited by the user. Available options: "off", "none", "on", "sentences", "words", "characters".
          */
@@ -5312,6 +5404,10 @@ declare namespace LocalJSX {
           * The state of autocorrection the browser can apply when the user is entering/editing the text value.
          */
         "autocorrect"?: IcAutocorrectStates;
+        /**
+          * If `true`, the form control will have input focus when the page loads.
+         */
+        "autofocus"?: boolean;
         /**
           * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.
          */
@@ -5416,6 +5512,10 @@ declare namespace LocalJSX {
           * If `true`, the value of the text field will have its spelling and grammar checked.
          */
         "spellcheck"?: boolean;
+        /**
+          * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        "theme"?: IcThemeMode;
         /**
           * The type of control to display. The default type is text.
          */
@@ -5439,9 +5539,9 @@ declare namespace LocalJSX {
     }
     interface IcTheme {
         /**
-          * The theme colour. Can be a hex value e.g. "#ff0000", RGB e.g. "rgb(255, 0, 0)", or RGBA e.g. "rgba(255, 0, 0, 1)".
+          * The brand colour. Can be a hex value e.g. "#ff0000", RGB e.g. "rgb(255, 0, 0)", or RGBA e.g. "rgba(255, 0, 0, 1)".
          */
-        "color"?: IcColor;
+        "brandColor"?: IcColor;
         /**
           * The theme mode. Can be "dark", "light", or "system". "system" will use the device or browser settings.
          */
@@ -5492,10 +5592,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.
          */
@@ -5520,6 +5616,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.
          */
@@ -5530,6 +5630,10 @@ 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 variant of the toggle button.
          */
@@ -5540,10 +5644,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.
          */
@@ -5560,6 +5660,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.
          */
@@ -5576,6 +5680,10 @@ 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 variant of the toggle button.
          */
@@ -5640,6 +5748,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.
          */