@ukic/web-components 2.4.1 → 2.6.0

package/dist/types/components.d.ts

@@ -5,7 +5,8 @@
  * 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, IcInformationStatusOrEmpty, IcMenuOption, IcOrientation, IcSearchMatchPositions, IcSizes, IcStatusVariants, IcTheme, IcThemeForeground, IcThemeForegroundNoDefault, IcTypographyVariants, IcValueEventDetail } from "./utils/types";
+import { IcActivationTypes, IcAdditionalFieldTypes, IcAlignment, IcAutocompleteTypes, IcAutocorrectStates, IcBlurEventDetail, IcEmphasisType, IcInformationStatusOrEmpty, IcMenuOption, IcOrientation, IcSearchMatchPositions, IcSizes, IcSizesNoLarge, IcStatusVariants, IcTheme, IcThemeForeground, IcThemeForegroundNoDefault, IcTypographyVariants, IcValueEventDetail } from "./utils/types";
+import { IcBadgePositions, IcBadgeTypes, IcBadgeVariants, IcColor } from "./components/ic-badge/ic-badge.types";
 import { IcButtonTooltipPlacement, IcButtonTypes, IcButtonVariants } from "./components/ic-button/ic-button.types";
 import { IcChangeEventDetail } from "./components/ic-checkbox-group/ic-checkbox-group.types";
 import { IcChipAppearance } from "./components/ic-chip/ic-chip.types";
@@ -29,7 +30,8 @@ import { IcSwitchChangeEventDetail } from "./components/ic-switch/ic-switch.type
 import { IcTabClickEventDetail, IcTabSelectEventDetail } from "./components/ic-tab/ic-tab.types";
 import { IcAriaAutocompleteTypes, IcTextFieldInputModes, IcTextFieldTypes } from "./components/ic-text-field/ic-text-field.types";
 import { IcTooltipPlacements } from "./components/ic-tooltip/ic-tooltip.types";
-export { IcActivationTypes, IcAdditionalFieldTypes, IcAlignment, IcAutocompleteTypes, IcAutocorrectStates, IcBlurEventDetail, IcInformationStatusOrEmpty, IcMenuOption, IcOrientation, IcSearchMatchPositions, IcSizes, IcStatusVariants, IcTheme, IcThemeForeground, IcThemeForegroundNoDefault, IcTypographyVariants, IcValueEventDetail } from "./utils/types";
+export { IcActivationTypes, IcAdditionalFieldTypes, IcAlignment, IcAutocompleteTypes, IcAutocorrectStates, IcBlurEventDetail, IcEmphasisType, IcInformationStatusOrEmpty, IcMenuOption, IcOrientation, IcSearchMatchPositions, IcSizes, IcSizesNoLarge, IcStatusVariants, IcTheme, IcThemeForeground, IcThemeForegroundNoDefault, IcTypographyVariants, IcValueEventDetail } from "./utils/types";
+export { IcBadgePositions, IcBadgeTypes, IcBadgeVariants, IcColor } from "./components/ic-badge/ic-badge.types";
 export { IcButtonTooltipPlacement, IcButtonTypes, IcButtonVariants } from "./components/ic-button/ic-button.types";
 export { IcChangeEventDetail } from "./components/ic-checkbox-group/ic-checkbox-group.types";
 export { IcChipAppearance } from "./components/ic-chip/ic-chip.types";
@@ -54,6 +56,55 @@ export { IcTabClickEventDetail, IcTabSelectEventDetail } from "./components/ic-t
 export { IcAriaAutocompleteTypes, IcTextFieldInputModes, IcTextFieldTypes } from "./components/ic-text-field/ic-text-field.types";
 export { IcTooltipPlacements } from "./components/ic-tooltip/ic-tooltip.types";
 export namespace Components {
+    interface IcAccordion {
+        "appearance"?: IcThemeForeground;
+        /**
+          * If `true`, the accordion will be disabled.
+         */
+        "disabled"?: boolean;
+        /**
+          * If `true`, the accordion appears expanded.
+         */
+        "expanded": boolean;
+        /**
+          * The section header outlining section content.
+         */
+        "heading"?: string;
+        /**
+          * The main body message of the accordion.
+         */
+        "message"?: string;
+        /**
+          * Sets focus on accordion heading.
+         */
+        "setFocus": () => Promise<void>;
+        /**
+          * The size of the accordion.
+         */
+        "size"?: IcSizes;
+    }
+    interface IcAccordionGroup {
+        /**
+          * The appearance of the accordion group, e.g dark, or light.
+         */
+        "appearance": IcThemeForeground;
+        /**
+          * If `true`, the accordion will load in an expanded state.
+         */
+        "expanded": boolean;
+        /**
+          * The header for the accordion group.
+         */
+        "groupTitle": string;
+        /**
+          * If `true`, only one accordion will open at a time.
+         */
+        "singleExpansion": boolean;
+        /**
+          * The size of the accordion.
+         */
+        "size"?: IcSizes;
+    }
     interface IcAlert {
         /**
           * If `true`, the alert will have the 'alert' ARIA role and will be announced to screen readers.
@@ -86,6 +137,52 @@ export namespace Components {
          */
         "target": string;
     }
+    interface IcBadge {
+        /**
+          * The accessible label of the badge component to provide context for screen reader users.
+         */
+        "accessibleLabel"?: string;
+        /**
+          * The custom badge colour. This will only style the badge component if variant="custom". 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;
+        /**
+          * @deprecated This method should not be used anymore. Use visible prop to set badge visibility.
+         */
+        "hideBadge": () => Promise<void>;
+        /**
+          * The maximum number shown on the badge appended with a +. This will only be displayed if type="text" and textLabel is not empty.
+         */
+        "maxNumber"?: number;
+        /**
+          * The positioning of the badge in reference to the parent element.
+         */
+        "position"?: IcBadgePositions;
+        /**
+          * @deprecated This method should not be used anymore. Use visible prop to set badge visibility.
+         */
+        "showBadge": () => Promise<void>;
+        /**
+          * The size of the badge to be displayed.
+         */
+        "size"?: IcSizes;
+        /**
+          * The text displayed in the badge. This will only be displayed if type="text".
+         */
+        "textLabel"?: string;
+        /**
+          * The type of badge to be displayed.
+         */
+        "type"?: IcBadgeTypes;
+        /**
+          * The variant of the badge to be displayed.
+         */
+        "variant"?: IcBadgeVariants;
+        /**
+          * If `true`, the badge will be displayed.
+         */
+        "visible": boolean;
+    }
     interface IcBreadcrumb {
         /**
           * If `true`, aria-current will be set on the breadcrumb.
@@ -120,6 +217,8 @@ export namespace Components {
           * The appearance of the button, e.g. dark, light, or the default.
          */
         "appearance"?: IcThemeForeground;
+        "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.
          */
@@ -200,7 +299,6 @@ export namespace Components {
           * The type of the button.
          */
         "type"?: IcButtonTypes;
-        "updateAriaLabel": (newValue: string) => Promise<void>;
         /**
           * The variant of the button to be displayed.
          */
@@ -277,6 +375,30 @@ export namespace Components {
           * The text to be displayed when dynamic.
          */
         "dynamicText": string;
+        /**
+          * The <form> element to associate the checkbox with.
+         */
+        "form"?: string;
+        /**
+          * The URL that processes the information submitted by the checkbox. It overrides the action attribute of the checkbox's form owner. Does nothing if there is no form owner.
+         */
+        "formaction"?: string;
+        /**
+          * The way the submitted form data is encoded.
+         */
+        "formenctype"?: string;
+        /**
+          * The HTTP method used to submit the form.
+         */
+        "formmethod"?: string;
+        /**
+          * If `true`, the form will not be validated when submitted.
+         */
+        "formnovalidate"?: boolean;
+        /**
+          * The place to display the response from submitting the form. It overrides the target attribute of the checkbox's form owner.
+         */
+        "formtarget"?: string;
         /**
           * The group label for the checkbox.
          */
@@ -354,7 +476,7 @@ export namespace Components {
     }
     interface IcChip {
         /**
-          * The emphasis of the chip.
+          * @deprecated This prop should not be used anymore. Use variant prop instead.
          */
         "appearance"?: IcChipAppearance;
         /**
@@ -377,6 +499,10 @@ export namespace Components {
           * The size of the chip.
          */
         "size"?: IcSizes;
+        /**
+          * The emphasis of the chip.
+         */
+        "variant"?: IcEmphasisType;
     }
     interface IcClassificationBanner {
         /**
@@ -406,9 +532,13 @@ export namespace Components {
          */
         "heading": string;
         /**
-          * If `true`, the small styling will be applied to the data heading and all child data rows.
+          * The size of the data entity component.
          */
-        "small": boolean;
+        "size"?: IcSizesNoLarge;
+        /**
+          * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
+         */
+        "small"?: boolean;
     }
     interface IcDataRow {
         /**
@@ -416,9 +546,13 @@ export namespace Components {
          */
         "label": string;
         /**
-          * If `true`, the small styling will be applied to the row. This is automatically applied if small is set on the parent data heading.
+          * The size of the data row component.
          */
-        "small": boolean;
+        "size"?: IcSizesNoLarge;
+        /**
+          * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
+         */
+        "small"?: boolean;
         /**
           * The value of the middle (right if no end-component supplied) cell of the row.
          */
@@ -426,11 +560,11 @@ export namespace Components {
     }
     interface IcDialog {
         /**
-          * If a status is set, sets the heading for the displayed alert.
+          * @deprecated This prop should not be used anymore. Use an ic-alert/IcAlert component within an alert slot with a heading instead.
          */
         "alertHeading"?: string;
         /**
-          * If a status is set, sets the message for the displayed alert.
+          * @deprecated This prop should not be used anymore. Use an ic-alert/IcAlert component within an alert slot with a message instead.
          */
         "alertMessage"?: string;
         /**
@@ -466,7 +600,7 @@ export namespace Components {
          */
         "heading": string;
         /**
-          * Use to hide the dialog.
+          * @deprecated This method should not be used anymore. Use open prop to set dialog visibility.
          */
         "hideDialog": () => Promise<void>;
         /**
@@ -474,7 +608,11 @@ export namespace Components {
          */
         "label"?: string;
         /**
-          * Use to show the dialog.
+          * If `true`, the dialog will be displayed.
+         */
+        "open": boolean;
+        /**
+          * @deprecated This method should not be used anymore. Use open prop to set dialog visibility.
          */
         "showDialog": () => Promise<void>;
         /**
@@ -482,7 +620,7 @@ export namespace Components {
          */
         "size"?: "small" | "medium" | "large";
         /**
-          * If set, displays an alert of the corresponding variant below the heading.
+          * @deprecated This prop should not be used anymore. Use an ic-alert/IcAlert component within an alert slot with a variant instead.
          */
         "status"?: "neutral" | "info" | "warning" | "error" | "success";
     }
@@ -504,7 +642,7 @@ export namespace Components {
         /**
           * The title rendered in the empty state container.
          */
-        "heading": string;
+        "heading"?: string;
         /**
           * The size of the image or icon used in the image slot.
          */
@@ -602,9 +740,13 @@ export namespace Components {
          */
         "secondarySubheading"?: string;
         /**
-          * If `true`, the small styling will be applied to the hero.
+          * The size of the hero component.
          */
-        "small": boolean;
+        "size"?: IcSizesNoLarge;
+        /**
+          * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
+         */
+        "small"?: boolean;
         /**
           * The description for the hero.
          */
@@ -619,7 +761,11 @@ export namespace Components {
     }
     interface IcInputComponentContainer {
         /**
-          * If `true`, the dark variant of the input component container will be displayed.
+          * The appearance of the input component container.
+         */
+        "appearance"?: "dark" | "default";
+        /**
+          * @deprecated This prop should not be used anymore. Set prop `appearance` to "dark" instead.
          */
         "dark"?: boolean;
         /**
@@ -639,9 +785,13 @@ export namespace Components {
          */
         "readonly": boolean;
         /**
-          * If `true`, the small styling will be applied to the input component container.
+          * The size of the input component container component.
          */
-        "small": boolean;
+        "size"?: IcSizesNoLarge;
+        /**
+          * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
+         */
+        "small"?: boolean;
         /**
           * If `true`, the validation will display inline.
          */
@@ -663,7 +813,11 @@ export namespace Components {
     }
     interface IcInputLabel {
         /**
-          * If `true`, the dark variant of the input label will be displayed.
+          * The appearance of the input label.
+         */
+        "appearance"?: "dark" | "default";
+        /**
+          * @deprecated This prop should not be used anymore. Set prop `appearance` to "dark" instead.
          */
         "dark"?: boolean;
         /**
@@ -849,7 +1003,11 @@ export namespace Components {
          */
         "searchMode"?: IcSearchBarSearchModes;
         /**
-          * If `true`, the small styling will be applied to the menu.
+          * The size of the menu component.
+         */
+        "size"?: IcSizesNoLarge;
+        /**
+          * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
          */
         "small"?: boolean;
         /**
@@ -1030,7 +1188,11 @@ export namespace Components {
          */
         "reverseOrder"?: boolean;
         /**
-          * If `true`, the small styling will be applied to the page header.
+          * The size of the page header component.
+         */
+        "size"?: IcSizesNoLarge;
+        /**
+          * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
          */
         "small"?: boolean;
         /**
@@ -1179,9 +1341,13 @@ export namespace Components {
          */
         "required": boolean;
         /**
-          * If `true`, the small styling will be applied to the radio group.
+          * The size of the radio group component.
          */
-        "small": boolean;
+        "size"?: IcSizesNoLarge;
+        /**
+          * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
+         */
+        "small"?: boolean;
         /**
           * The validation status - e.g. 'error' | 'warning' | 'success'.
          */
@@ -1204,6 +1370,30 @@ export namespace Components {
           * The text to be displayed when dynamic.
          */
         "dynamicText": string;
+        /**
+          * The <form> element to associate the radio with.
+         */
+        "form"?: string;
+        /**
+          * The URL that processes the information submitted by the radio. It overrides the action attribute of the radio's form owner. Does nothing if there is no form owner.
+         */
+        "formaction"?: string;
+        /**
+          * The way the submitted form data is encoded.
+         */
+        "formenctype"?: string;
+        /**
+          * The HTTP method used to submit the form.
+         */
+        "formmethod"?: string;
+        /**
+          * If `true`, the form will not be validated when submitted.
+         */
+        "formnovalidate"?: boolean;
+        /**
+          * The place to display the response from submitting the form. It overrides the target attribute of the radio's form owner.
+         */
+        "formtarget"?: string;
         /**
           * The group label for the radio option.
          */
@@ -1335,7 +1525,11 @@ export namespace Components {
          */
         "setFocus": () => Promise<void>;
         /**
-          * If `true`, the small styling will be applied to the search bar.
+          * The size of the search bar component.
+         */
+        "size"?: IcSizesNoLarge;
+        /**
+          * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
          */
         "small"?: boolean;
         /**
@@ -1387,7 +1581,31 @@ export namespace Components {
          */
         "emptyOptionListText": string;
         /**
-          * If `true`, the select element will fill the width of the container.
+          * The <form> element to associate the select with.
+         */
+        "form"?: string;
+        /**
+          * The URL that processes the information submitted by the select. It overrides the action attribute of the select's form owner. Does nothing if there is no form owner. This prop should only be used with searchable select and will only be applied if searchable is true.
+         */
+        "formaction"?: string;
+        /**
+          * The way the submitted form data is encoded. This prop should only be used with searchable select and will only be applied if searchable is true.
+         */
+        "formenctype"?: string;
+        /**
+          * The HTTP method used to submit the form. This prop should only be used with searchable select and will only be applied if searchable is true.
+         */
+        "formmethod"?: string;
+        /**
+          * If `true`, the form will not be validated when submitted. This prop should only be used with searchable select and will only be applied if searchable is true.
+         */
+        "formnovalidate"?: boolean;
+        /**
+          * The place to display the response from submitting the form. It overrides the target attribute of the select's form owner. This prop should only be used with searchable select and will only be applied if searchable is true.
+         */
+        "formtarget"?: 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.
          */
         "fullWidth": boolean;
         /**
@@ -1459,7 +1677,11 @@ export namespace Components {
          */
         "showClearButton"?: boolean;
         /**
-          * If `true`, the small styling will be applied to the select.
+          * The size of the select component.
+         */
+        "size"?: IcSizesNoLarge;
+        /**
+          * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
          */
         "small"?: boolean;
         /**
@@ -1492,6 +1714,10 @@ export namespace Components {
           * If `true`, automatic parent wrapper styling will be disabled.
          */
         "disableAutoParentStyling": boolean;
+        /**
+          * If `true`, the side navigation will not display as a top bar on small devices.
+         */
+        "disableTopBarBehaviour": boolean;
         /**
           * If `true`, the side navigation will load in an expanded state.
          */
@@ -1520,7 +1746,11 @@ export namespace Components {
     }
     interface IcSkeleton {
         /**
-          * If `true`, the skeleton will be set to the light variant.
+          * The appearance of the skeleton.
+         */
+        "appearance"?: "light" | "default";
+        /**
+          * @deprecated This prop should not be used anymore. Set prop `appearance` to "light" instead.
          */
         "light"?: boolean;
         /**
@@ -1534,7 +1764,7 @@ export namespace Components {
          */
         "announced"?: boolean;
         /**
-          * The emphasis of the status tag.
+          * @deprecated This prop should not be used anymore. Use variant prop instead.
          */
         "appearance"?: IcStatusTagAppearance;
         /**
@@ -1542,13 +1772,21 @@ export namespace Components {
          */
         "label": string;
         /**
-          * If `true`, the small styling will be applied to the status tag.
+          * The size of the status tag component.
+         */
+        "size"?: IcSizesNoLarge;
+        /**
+          * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
          */
         "small"?: boolean;
         /**
           * The colour of the status tag.
          */
         "status"?: IcStatusTagStatuses;
+        /**
+          * The emphasis of the status tag.
+         */
+        "variant"?: IcEmphasisType;
     }
     interface IcStep {
         "compactStepStyling"?: IcStepTypes;
@@ -1628,7 +1866,11 @@ export namespace Components {
          */
         "showState"?: boolean;
         /**
-          * If `true`, the small styling will be applied to the switch.
+          * The size of the switch component.
+         */
+        "size"?: IcSizesNoLarge;
+        /**
+          * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
          */
         "small"?: boolean;
         /**
@@ -1791,9 +2033,13 @@ export namespace Components {
          */
         "setFocus": () => Promise<void>;
         /**
-          * If `true`, the small styling will be applied to the text field.
+          * The size of the text field component.
          */
-        "small": boolean;
+        "size"?: IcSizesNoLarge;
+        /**
+          * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
+         */
+        "small"?: boolean;
         /**
           * If `true`, the value of the text field will have its spelling and grammar checked.
          */
@@ -1884,6 +2130,10 @@ export namespace Components {
           * The text to display on the tooltip.
          */
         "label": string;
+        /**
+          * The number of lines to display before truncating the text.
+         */
+        "maxLines"?: number;
         /**
           * The position of the tool-tip in relation to the parent element.
          */
@@ -1954,6 +2204,10 @@ export namespace Components {
         "variant"?: IcTypographyVariants;
     }
 }
+export interface IcAccordionCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIcAccordionElement;
+}
 export interface IcAlertCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIcAlertElement;
@@ -2055,6 +2309,18 @@ export interface IcTopNavigationCustomEvent<T> extends CustomEvent<T> {
     target: HTMLIcTopNavigationElement;
 }
 declare global {
+    interface HTMLIcAccordionElement extends Components.IcAccordion, HTMLStencilElement {
+    }
+    var HTMLIcAccordionElement: {
+        prototype: HTMLIcAccordionElement;
+        new (): HTMLIcAccordionElement;
+    };
+    interface HTMLIcAccordionGroupElement extends Components.IcAccordionGroup, HTMLStencilElement {
+    }
+    var HTMLIcAccordionGroupElement: {
+        prototype: HTMLIcAccordionGroupElement;
+        new (): HTMLIcAccordionGroupElement;
+    };
     interface HTMLIcAlertElement extends Components.IcAlert, HTMLStencilElement {
     }
     var HTMLIcAlertElement: {
@@ -2067,6 +2333,12 @@ declare global {
         prototype: HTMLIcBackToTopElement;
         new (): HTMLIcBackToTopElement;
     };
+    interface HTMLIcBadgeElement extends Components.IcBadge, HTMLStencilElement {
+    }
+    var HTMLIcBadgeElement: {
+        prototype: HTMLIcBadgeElement;
+        new (): HTMLIcBadgeElement;
+    };
     interface HTMLIcBreadcrumbElement extends Components.IcBreadcrumb, HTMLStencilElement {
     }
     var HTMLIcBreadcrumbElement: {
@@ -2410,8 +2682,11 @@ declare global {
         new (): HTMLIcTypographyElement;
     };
     interface HTMLElementTagNameMap {
+        "ic-accordion": HTMLIcAccordionElement;
+        "ic-accordion-group": HTMLIcAccordionGroupElement;
         "ic-alert": HTMLIcAlertElement;
         "ic-back-to-top": HTMLIcBackToTopElement;
+        "ic-badge": HTMLIcBadgeElement;
         "ic-breadcrumb": HTMLIcBreadcrumbElement;
         "ic-breadcrumb-group": HTMLIcBreadcrumbGroupElement;
         "ic-button": HTMLIcButtonElement;
@@ -2472,6 +2747,50 @@ declare global {
     }
 }
 declare namespace LocalJSX {
+    interface IcAccordion {
+        /**
+          * If `true`, the accordion will be disabled.
+         */
+        "disabled"?: boolean;
+        /**
+          * If `true`, the accordion appears expanded.
+         */
+        "expanded"?: boolean;
+        /**
+          * The section header outlining section content.
+         */
+        "heading"?: string;
+        /**
+          * The main body message of the accordion.
+         */
+        "message"?: string;
+        /**
+          * The size of the accordion.
+         */
+        "size"?: IcSizes;
+    }
+    interface IcAccordionGroup {
+        /**
+          * The appearance of the accordion group, e.g dark, or light.
+         */
+        "appearance"?: IcThemeForeground;
+        /**
+          * If `true`, the accordion will load in an expanded state.
+         */
+        "expanded"?: boolean;
+        /**
+          * The header for the accordion group.
+         */
+        "groupTitle"?: string;
+        /**
+          * If `true`, only one accordion will open at a time.
+         */
+        "singleExpansion"?: boolean;
+        /**
+          * The size of the accordion.
+         */
+        "size"?: IcSizes;
+    }
     interface IcAlert {
         /**
           * If `true`, the alert will have the 'alert' ARIA role and will be announced to screen readers.
@@ -2512,6 +2831,44 @@ declare namespace LocalJSX {
          */
         "target": string;
     }
+    interface IcBadge {
+        /**
+          * The accessible label of the badge component to provide context for screen reader users.
+         */
+        "accessibleLabel"?: string;
+        /**
+          * The custom badge colour. This will only style the badge component if variant="custom". 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;
+        /**
+          * The maximum number shown on the badge appended with a +. This will only be displayed if type="text" and textLabel is not empty.
+         */
+        "maxNumber"?: number;
+        /**
+          * The positioning of the badge in reference to the parent element.
+         */
+        "position"?: IcBadgePositions;
+        /**
+          * The size of the badge to be displayed.
+         */
+        "size"?: IcSizes;
+        /**
+          * The text displayed in the badge. This will only be displayed if type="text".
+         */
+        "textLabel"?: string;
+        /**
+          * The type of badge to be displayed.
+         */
+        "type"?: IcBadgeTypes;
+        /**
+          * The variant of the badge to be displayed.
+         */
+        "variant"?: IcBadgeVariants;
+        /**
+          * If `true`, the badge will be displayed.
+         */
+        "visible"?: boolean;
+    }
     interface IcBreadcrumb {
         /**
           * If `true`, aria-current will be set on the breadcrumb.
@@ -2697,6 +3054,30 @@ declare namespace LocalJSX {
           * The text to be displayed when dynamic.
          */
         "dynamicText"?: string;
+        /**
+          * The <form> element to associate the checkbox with.
+         */
+        "form"?: string;
+        /**
+          * The URL that processes the information submitted by the checkbox. It overrides the action attribute of the checkbox's form owner. Does nothing if there is no form owner.
+         */
+        "formaction"?: string;
+        /**
+          * The way the submitted form data is encoded.
+         */
+        "formenctype"?: string;
+        /**
+          * The HTTP method used to submit the form.
+         */
+        "formmethod"?: string;
+        /**
+          * If `true`, the form will not be validated when submitted.
+         */
+        "formnovalidate"?: boolean;
+        /**
+          * The place to display the response from submitting the form. It overrides the target attribute of the checkbox's form owner.
+         */
+        "formtarget"?: string;
         /**
           * The group label for the checkbox.
          */
@@ -2782,7 +3163,7 @@ declare namespace LocalJSX {
     }
     interface IcChip {
         /**
-          * The emphasis of the chip.
+          * @deprecated This prop should not be used anymore. Use variant prop instead.
          */
         "appearance"?: IcChipAppearance;
         /**
@@ -2809,6 +3190,10 @@ declare namespace LocalJSX {
           * The size of the chip.
          */
         "size"?: IcSizes;
+        /**
+          * The emphasis of the chip.
+         */
+        "variant"?: IcEmphasisType;
     }
     interface IcClassificationBanner {
         /**
@@ -2838,7 +3223,11 @@ declare namespace LocalJSX {
          */
         "heading"?: string;
         /**
-          * If `true`, the small styling will be applied to the data heading and all child data rows.
+          * The size of the data entity component.
+         */
+        "size"?: IcSizesNoLarge;
+        /**
+          * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
          */
         "small"?: boolean;
     }
@@ -2848,7 +3237,11 @@ declare namespace LocalJSX {
          */
         "label"?: string;
         /**
-          * If `true`, the small styling will be applied to the row. This is automatically applied if small is set on the parent data heading.
+          * The size of the data row component.
+         */
+        "size"?: IcSizesNoLarge;
+        /**
+          * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
          */
         "small"?: boolean;
         /**
@@ -2858,11 +3251,11 @@ declare namespace LocalJSX {
     }
     interface IcDialog {
         /**
-          * If a status is set, sets the heading for the displayed alert.
+          * @deprecated This prop should not be used anymore. Use an ic-alert/IcAlert component within an alert slot with a heading instead.
          */
         "alertHeading"?: string;
         /**
-          * If a status is set, sets the message for the displayed alert.
+          * @deprecated This prop should not be used anymore. Use an ic-alert/IcAlert component within an alert slot with a message instead.
          */
         "alertMessage"?: string;
         /**
@@ -2909,12 +3302,16 @@ declare namespace LocalJSX {
           * Emitted when dialog has opened.
          */
         "onIcDialogOpened"?: (event: IcDialogCustomEvent<void>) => void;
+        /**
+          * If `true`, the dialog will be displayed.
+         */
+        "open"?: boolean;
         /**
           * Sets the maximum and minimum height and width for the dialog.
          */
         "size"?: "small" | "medium" | "large";
         /**
-          * If set, displays an alert of the corresponding variant below the heading.
+          * @deprecated This prop should not be used anymore. Use an ic-alert/IcAlert component within an alert slot with a variant instead.
          */
         "status"?: "neutral" | "info" | "warning" | "error" | "success";
     }
@@ -2936,7 +3333,7 @@ declare namespace LocalJSX {
         /**
           * The title rendered in the empty state container.
          */
-        "heading": string;
+        "heading"?: string;
         /**
           * The size of the image or icon used in the image slot.
          */
@@ -3034,7 +3431,11 @@ declare namespace LocalJSX {
          */
         "secondarySubheading"?: string;
         /**
-          * If `true`, the small styling will be applied to the hero.
+          * The size of the hero component.
+         */
+        "size"?: IcSizesNoLarge;
+        /**
+          * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
          */
         "small"?: boolean;
         /**
@@ -3050,7 +3451,11 @@ declare namespace LocalJSX {
     }
     interface IcInputComponentContainer {
         /**
-          * If `true`, the dark variant of the input component container will be displayed.
+          * The appearance of the input component container.
+         */
+        "appearance"?: "dark" | "default";
+        /**
+          * @deprecated This prop should not be used anymore. Set prop `appearance` to "dark" instead.
          */
         "dark"?: boolean;
         /**
@@ -3070,7 +3475,11 @@ declare namespace LocalJSX {
          */
         "readonly"?: boolean;
         /**
-          * If `true`, the small styling will be applied to the input component container.
+          * The size of the input component container component.
+         */
+        "size"?: IcSizesNoLarge;
+        /**
+          * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
          */
         "small"?: boolean;
         /**
@@ -3094,7 +3503,11 @@ declare namespace LocalJSX {
     }
     interface IcInputLabel {
         /**
-          * If `true`, the dark variant of the input label will be displayed.
+          * The appearance of the input label.
+         */
+        "appearance"?: "dark" | "default";
+        /**
+          * @deprecated This prop should not be used anymore. Set prop `appearance` to "dark" instead.
          */
         "dark"?: boolean;
         /**
@@ -3266,7 +3679,11 @@ declare namespace LocalJSX {
          */
         "searchMode"?: IcSearchBarSearchModes;
         /**
-          * If `true`, the small styling will be applied to the menu.
+          * The size of the menu component.
+         */
+        "size"?: IcSizesNoLarge;
+        /**
+          * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
          */
         "small"?: boolean;
         /**
@@ -3432,7 +3849,11 @@ declare namespace LocalJSX {
          */
         "reverseOrder"?: boolean;
         /**
-          * If `true`, the small styling will be applied to the page header.
+          * The size of the page header component.
+         */
+        "size"?: IcSizesNoLarge;
+        /**
+          * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
          */
         "small"?: boolean;
         /**
@@ -3580,7 +4001,11 @@ declare namespace LocalJSX {
          */
         "required"?: boolean;
         /**
-          * If `true`, the small styling will be applied to the radio group.
+          * The size of the radio group component.
+         */
+        "size"?: IcSizesNoLarge;
+        /**
+          * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
          */
         "small"?: boolean;
         /**
@@ -3605,6 +4030,30 @@ declare namespace LocalJSX {
           * The text to be displayed when dynamic.
          */
         "dynamicText"?: string;
+        /**
+          * The <form> element to associate the radio with.
+         */
+        "form"?: string;
+        /**
+          * The URL that processes the information submitted by the radio. It overrides the action attribute of the radio's form owner. Does nothing if there is no form owner.
+         */
+        "formaction"?: string;
+        /**
+          * The way the submitted form data is encoded.
+         */
+        "formenctype"?: string;
+        /**
+          * The HTTP method used to submit the form.
+         */
+        "formmethod"?: string;
+        /**
+          * If `true`, the form will not be validated when submitted.
+         */
+        "formnovalidate"?: boolean;
+        /**
+          * The place to display the response from submitting the form. It overrides the target attribute of the radio's form owner.
+         */
+        "formtarget"?: string;
         /**
           * The group label for the radio option.
          */
@@ -3784,7 +4233,11 @@ declare namespace LocalJSX {
          */
         "searchMode"?: IcSearchBarSearchModes;
         /**
-          * If `true`, the small styling will be applied to the search bar.
+          * The size of the search bar component.
+         */
+        "size"?: IcSizesNoLarge;
+        /**
+          * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
          */
         "small"?: boolean;
         /**
@@ -3836,7 +4289,31 @@ declare namespace LocalJSX {
          */
         "emptyOptionListText"?: string;
         /**
-          * If `true`, the select element will fill the width of the container.
+          * The <form> element to associate the select with.
+         */
+        "form"?: string;
+        /**
+          * The URL that processes the information submitted by the select. It overrides the action attribute of the select's form owner. Does nothing if there is no form owner. This prop should only be used with searchable select and will only be applied if searchable is true.
+         */
+        "formaction"?: string;
+        /**
+          * The way the submitted form data is encoded. This prop should only be used with searchable select and will only be applied if searchable is true.
+         */
+        "formenctype"?: string;
+        /**
+          * The HTTP method used to submit the form. This prop should only be used with searchable select and will only be applied if searchable is true.
+         */
+        "formmethod"?: string;
+        /**
+          * If `true`, the form will not be validated when submitted. This prop should only be used with searchable select and will only be applied if searchable is true.
+         */
+        "formnovalidate"?: boolean;
+        /**
+          * The place to display the response from submitting the form. It overrides the target attribute of the select's form owner. This prop should only be used with searchable select and will only be applied if searchable is true.
+         */
+        "formtarget"?: 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.
          */
         "fullWidth"?: boolean;
         /**
@@ -3932,7 +4409,11 @@ declare namespace LocalJSX {
          */
         "showClearButton"?: boolean;
         /**
-          * If `true`, the small styling will be applied to the select.
+          * The size of the select component.
+         */
+        "size"?: IcSizesNoLarge;
+        /**
+          * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
          */
         "small"?: boolean;
         /**
@@ -3965,6 +4446,10 @@ declare namespace LocalJSX {
           * If `true`, automatic parent wrapper styling will be disabled.
          */
         "disableAutoParentStyling"?: boolean;
+        /**
+          * If `true`, the side navigation will not display as a top bar on small devices.
+         */
+        "disableTopBarBehaviour"?: boolean;
         /**
           * If `true`, the side navigation will load in an expanded state.
          */
@@ -3992,7 +4477,11 @@ declare namespace LocalJSX {
     }
     interface IcSkeleton {
         /**
-          * If `true`, the skeleton will be set to the light variant.
+          * The appearance of the skeleton.
+         */
+        "appearance"?: "light" | "default";
+        /**
+          * @deprecated This prop should not be used anymore. Set prop `appearance` to "light" instead.
          */
         "light"?: boolean;
         /**
@@ -4006,7 +4495,7 @@ declare namespace LocalJSX {
          */
         "announced"?: boolean;
         /**
-          * The emphasis of the status tag.
+          * @deprecated This prop should not be used anymore. Use variant prop instead.
          */
         "appearance"?: IcStatusTagAppearance;
         /**
@@ -4014,13 +4503,21 @@ declare namespace LocalJSX {
          */
         "label": string;
         /**
-          * If `true`, the small styling will be applied to the status tag.
+          * The size of the status tag component.
+         */
+        "size"?: IcSizesNoLarge;
+        /**
+          * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
          */
         "small"?: boolean;
         /**
           * The colour of the status tag.
          */
         "status"?: IcStatusTagStatuses;
+        /**
+          * The emphasis of the status tag.
+         */
+        "variant"?: IcEmphasisType;
     }
     interface IcStep {
         /**
@@ -4100,7 +4597,11 @@ declare namespace LocalJSX {
          */
         "showState"?: boolean;
         /**
-          * If `true`, the small styling will be applied to the switch.
+          * The size of the switch component.
+         */
+        "size"?: IcSizesNoLarge;
+        /**
+          * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
          */
         "small"?: boolean;
         /**
@@ -4266,7 +4767,11 @@ declare namespace LocalJSX {
          */
         "rows"?: number;
         /**
-          * If `true`, the small styling will be applied to the text field.
+          * The size of the text field component.
+         */
+        "size"?: IcSizesNoLarge;
+        /**
+          * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
          */
         "small"?: boolean;
         /**
@@ -4345,6 +4850,10 @@ declare namespace LocalJSX {
           * The text to display on the tooltip.
          */
         "label": string;
+        /**
+          * The number of lines to display before truncating the text.
+         */
+        "maxLines"?: number;
         /**
           * The position of the tool-tip in relation to the parent element.
          */
@@ -4415,8 +4924,11 @@ declare namespace LocalJSX {
         "variant"?: IcTypographyVariants;
     }
     interface IntrinsicElements {
+        "ic-accordion": IcAccordion;
+        "ic-accordion-group": IcAccordionGroup;
         "ic-alert": IcAlert;
         "ic-back-to-top": IcBackToTop;
+        "ic-badge": IcBadge;
         "ic-breadcrumb": IcBreadcrumb;
         "ic-breadcrumb-group": IcBreadcrumbGroup;
         "ic-button": IcButton;
@@ -4480,8 +4992,11 @@ export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
+            "ic-accordion": LocalJSX.IcAccordion & JSXBase.HTMLAttributes<HTMLIcAccordionElement>;
+            "ic-accordion-group": LocalJSX.IcAccordionGroup & JSXBase.HTMLAttributes<HTMLIcAccordionGroupElement>;
             "ic-alert": LocalJSX.IcAlert & JSXBase.HTMLAttributes<HTMLIcAlertElement>;
             "ic-back-to-top": LocalJSX.IcBackToTop & JSXBase.HTMLAttributes<HTMLIcBackToTopElement>;
+            "ic-badge": LocalJSX.IcBadge & JSXBase.HTMLAttributes<HTMLIcBadgeElement>;
             "ic-breadcrumb": LocalJSX.IcBreadcrumb & JSXBase.HTMLAttributes<HTMLIcBreadcrumbElement>;
             "ic-breadcrumb-group": LocalJSX.IcBreadcrumbGroup & JSXBase.HTMLAttributes<HTMLIcBreadcrumbGroupElement>;
             "ic-button": LocalJSX.IcButton & JSXBase.HTMLAttributes<HTMLIcButtonElement>;