@ukic/web-components 2.0.0-alpha.125 → 2.0.1

package/dist/types/components.d.ts

@@ -7,18 +7,18 @@
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { IcAlertVariants } from "./components/ic-alert/ic-alert.types";
 import { IcButtonSizes, IcButtonTooltipPlacement, IcButtonTypes, IcButtonVariants } from "./components/ic-button/ic-button.types";
-import { IcActivationTypes, IcAdditionalFieldTypes, IcAlignment, IcAutocompleteTypes, IcAutocorrectStates, IcInformationStatusOrEmpty, IcMenuOption, IcSearchMatchPositions, IcTheme, IcThemeForeground, IcTypographyVariants } from "./utils/types";
+import { IcActivationTypes, IcAdditionalFieldTypes, IcAlignment, IcAutocompleteTypes, IcAutocorrectStates, IcInformationStatusOrEmpty, IcMenuOption, IcSearchMatchPositions, IcTheme, IcThemeForeground, IcThemeForegroundNoDefault, IcTypographyVariants } from "./utils/types";
 import { IcChangeEventDetail } from "./components/ic-checkbox-group/ic-checkbox-group.types";
 import { IcProtectiveMarkings } from "./components/ic-classification-banner/ic-classification-banner.types";
 import { IcFooterBreakpoints } from "./components/ic-footer/ic-footer.types";
 import { IcHeroContentAlignments } from "./components/ic-hero/ic-hero.types";
 import { IcAriaLiveModeVariants } from "./components/ic-input-validation/ic-input-validation.types";
-import { IcLoadingSizes, IcLoadingTypes, IcLoadingVariants } from "./components/ic-loading-indicator/ic-loading-indicator.types";
+import { IcLoadingSizes, IcLoadingTypes } from "./components/ic-loading-indicator/ic-loading-indicator.types";
 import { IcMenuChangeEventDetail, IcMenuOptionIdEventDetail, IcOptionSelectEventDetail } from "./components/ic-menu/ic-menu.types";
 import { IcAutocompleteTypes as IcAutocompleteTypes1, IcAutocorrectStates as IcAutocorrectStates1, IcBlurEventDetail, IcInformationStatusOrEmpty as IcInformationStatusOrEmpty1, IcValueEventDetail } from "./interface";
 import { IcSearchBarBlurEventDetail } from "./components/ic-search-bar/ic-search-bar.types";
 import { IcSkeletonVariants } from "./components/ic-skeleton/ic-skeleton.types";
-import { IcStatusTagStatuses, IcStatusTagVariants } from "./components/ic-status-tag/ic-status-tag.types";
+import { IcStatusTagAppearance, IcStatusTagStatuses } from "./components/ic-status-tag/ic-status-tag.types";
 import { IcStepTypes } from "./components/ic-step/ic-step.types";
 import { IcStepperAlignment } from "./components/ic-stepper/ic-stepper.types";
 import { IcSwitchChangeEventDetail } from "./components/ic-switch/ic-switch.types";
@@ -73,7 +73,7 @@ export namespace Components {
         "pageTitle": string;
         "showBackIcon": boolean;
     }
-    interface IcBreadcrumbs {
+    interface IcBreadcrumbGroup {
         /**
           * If true, display the parent page and back icon as breadcrumb
          */
@@ -85,13 +85,13 @@ export namespace Components {
     }
     interface IcButton {
         /**
-          * The position of the tooltip in relation to the button.
+          * Determines the whether the appearance of the button is dark, light, or the default.
          */
-        "IcTooltipPlacement"?: IcButtonTooltipPlacement;
+        "appearance"?: IcThemeForeground;
         /**
-          * Determines the style of button to be displayed.
+          * Disable ic-tooltip which is shown for icon variant. Title or aria-label must be set if this prop is not applied.
          */
-        "buttonStyle"?: IcThemeForeground;
+        "disableTooltip"?: boolean;
         /**
           * Determines whether the button should be in disabled state.
          */
@@ -112,10 +112,6 @@ export namespace Components {
           * Hints at the human language of the linked URL.
          */
         "hreflang"?: string;
-        /**
-          * Determines whether the icon should appear on the right hand side of the button.
-         */
-        "iconRight"?: boolean;
         /**
           * Determines whether the button should be in loading state.
          */
@@ -140,6 +136,10 @@ export namespace Components {
           * Where to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
          */
         "target"?: string;
+        /**
+          * The position of the tooltip in relation to the button.
+         */
+        "tooltipPlacement"?: IcButtonTooltipPlacement;
         /**
           * The type of the button.
          */
@@ -149,10 +149,6 @@ export namespace Components {
           * The button variant to be displayed.
          */
         "variant"?: IcButtonVariants;
-        /**
-          * Show an ic-tooltip displaying title or aria-label. Will always be shown for icon variant, so title or aria-label must be set.
-         */
-        "withIcTooltip"?: boolean;
     }
     interface IcCard {
         /**
@@ -235,10 +231,6 @@ export namespace Components {
         "value": string;
     }
     interface IcCheckboxGroup {
-        /**
-          * Specify whether dense styling to be applied to element.
-         */
-        "dense": boolean;
         /**
           * Specify whether the input is disabled.
          */
@@ -263,6 +255,10 @@ export namespace Components {
           * Specify if the input requires a value.
          */
         "required": boolean;
+        /**
+          * Specify whether small styling to be applied to element.
+         */
+        "small": boolean;
         /**
           * Provide validation status - 'error'
          */
@@ -295,24 +291,24 @@ export namespace Components {
         "upTo"?: boolean;
     }
     interface IcDataEntity {
-        /**
-          * Set the data heading and all child data rows to dense styling
-         */
-        "dense": boolean;
         /**
           * Title for the data entity
          */
         "heading": string;
-    }
-    interface IcDataRow {
         /**
-          * Set the row to dense styling, this is automatically applied if dense is set on the parent data heading
+          * Set the data heading and all child data rows to small styling
          */
-        "dense": boolean;
+        "small": boolean;
+    }
+    interface IcDataRow {
         /**
           * Set the label in the leftmost cell of the row
          */
         "label": string;
+        /**
+          * Set the row to small styling, this is automatically applied if small is set on the parent data heading
+         */
+        "small": boolean;
         /**
           * Set the value of the middle (right if no addition supplied) cell of the row
          */
@@ -326,7 +322,7 @@ export namespace Components {
          */
         "aligned"?: IcAlignment;
         /**
-          * Sets the screen size breakpoint at which to switch to the dense layout
+          * Sets the screen size breakpoint at which to switch to the small layout
          */
         "breakpoint"?: IcFooterBreakpoints;
         /**
@@ -371,10 +367,6 @@ export namespace Components {
           * The alignment of the hero content
          */
         "contentAligned": IcHeroContentAlignments;
-        /**
-          * Alter styling for use with dense content/pages
-         */
-        "dense": boolean;
         /**
           * Whether the background image (if set) scrolls using a parallax effect.
          */
@@ -391,6 +383,10 @@ export namespace Components {
           * Optional secondary subheading, replaced by slotted right content
          */
         "secondarySubheading"?: string;
+        /**
+          * Alter styling for use with small content/pages
+         */
+        "small": boolean;
         /**
           * Description for the hero
          */
@@ -401,10 +397,6 @@ export namespace Components {
           * Determines whether the dark variant of the input-component-container focus indicator should be displayed.
          */
         "dark"?: boolean;
-        /**
-          * dense
-         */
-        "dense": boolean;
         /**
           * disabled
          */
@@ -421,6 +413,10 @@ export namespace Components {
           * readonly
          */
         "readonly": boolean;
+        /**
+          * small
+         */
+        "small": boolean;
         /**
           * validationInline
          */
@@ -497,6 +493,10 @@ export namespace Components {
         "status": IcInformationStatusOrEmpty;
     }
     interface IcLink {
+        /**
+          * Determines the whether the appearance is dark, light, or the default.
+         */
+        "appearance"?: IcThemeForeground;
         /**
           * Prompts the user to save the linked URL instead of navigating to it.
          */
@@ -525,20 +525,20 @@ export namespace Components {
           * Where to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
          */
         "target"?: string;
-        /**
-          * Determines which colour variant is to be applied, to have appropriate colour contrast.
-         */
-        "variant"?: IcThemeForeground;
     }
     interface IcLoadingIndicator {
         /**
-          * Determines whether the dark variant of the loading indicator should be displayed.
+          * Determines whether the dark or light loading indicator should be displayed.
          */
-        "dark"?: boolean;
+        "appearance"?: IcThemeForegroundNoDefault;
         /**
           * Provide a description to be set as the aria-label of the loading indicator when not using a visible label.
          */
         "description"?: string;
+        /**
+          * When linear, determines whether the full-width version (i.e. without a border radius) should be displayed.
+         */
+        "fullWidth"?: boolean;
         /**
           * The label to be displayed beneath the loading indicator. Display a changing label by separating multiple messages with forward slashes.
          */
@@ -567,10 +567,6 @@ export namespace Components {
           * The type of indicator, either linear or circular.
          */
         "type"?: IcLoadingTypes;
-        /**
-          * The variant of indicator, either default or full-width.
-         */
-        "variant"?: IcLoadingVariants;
     }
     interface IcMenu {
         /**
@@ -582,10 +578,6 @@ export namespace Components {
          */
         "anchorEl": HTMLElement;
         "autoFocusOnSelected": boolean;
-        /**
-          * Specify whether dense styling is to be applied to the element.
-         */
-        "dense"?: boolean;
         /**
           * If true then fill width of container
          */
@@ -621,6 +613,10 @@ export namespace Components {
          */
         "options": IcMenuOption[];
         "parentEl"?: HTMLElement;
+        /**
+          * Specify whether small styling is to be applied to the element.
+         */
+        "small"?: boolean;
         /**
           * The value of the currently selected option.
          */
@@ -714,10 +710,6 @@ export namespace Components {
           * Set whether the bottom border is used
          */
         "border"?: boolean;
-        /**
-          * Whether the component uses dense styling.
-         */
-        "dense"?: boolean;
         /**
           * The title to render on the component.
          */
@@ -726,6 +718,10 @@ export namespace Components {
           * Set whether the reading pattern and tab order change in the action area for viewport widths of above 576px and when actions have not wrapped
          */
         "reverseOrder"?: boolean;
+        /**
+          * Whether the component uses small styling.
+         */
+        "small"?: boolean;
         /**
           * Set whether the header is sticky at all breakpoints
          */
@@ -740,10 +736,6 @@ export namespace Components {
         "subheading"?: string;
     }
     interface IcRadioGroup {
-        /**
-          * Specify whether dense styling is to be applied to the element.
-         */
-        "dense": boolean;
         /**
           * Specify whether the input is disabled.
          */
@@ -768,6 +760,10 @@ export namespace Components {
           * Specify if the input requires a value.
          */
         "required": boolean;
+        /**
+          * Specify whether small styling is to be applied to the element.
+         */
+        "small": boolean;
         /**
           * Provide validation status - 'error'
          */
@@ -832,18 +828,10 @@ export namespace Components {
           * Number of characters until suggestions appear
          */
         "charactersUntilSuggestion": number;
-        /**
-          * Determines whether the dark variant of the search bar should be displayed.
-         */
-        "dark"?: boolean;
         /**
           * Set the amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.
          */
         "debounce"?: number;
-        /**
-          * Specify whether dense styling is to be applied to the element.
-         */
-        "dense"?: boolean;
         /**
           * Specify whether to disable the built in filtering. For example, if options will already be filtered from external source. If true, all options provided will be displayed.
          */
@@ -904,6 +892,10 @@ export namespace Components {
           * Sets focus on the native `input`
          */
         "setFocus": () => Promise<void>;
+        /**
+          * Specify whether small styling is to be applied to the element.
+         */
+        "small"?: boolean;
         /**
           * If `true`, the element will have its spelling and grammar checked.
          */
@@ -928,10 +920,6 @@ export namespace Components {
           * Number of characters until suggestions appear for a searchable select.
          */
         "charactersUntilSuggestions"?: number;
-        /**
-          * Specify whether dense styling is to be applied to the element.
-         */
-        "dense"?: boolean;
         /**
           * Specify whether the input is disabled.
          */
@@ -1000,6 +988,10 @@ export namespace Components {
           * Display a button which clears the input when clicked. The button will always appear on the searchable select.
          */
         "showClearButton"?: boolean;
+        /**
+          * Specify whether small styling is to be applied to the element.
+         */
+        "small"?: boolean;
         /**
           * Provide a validation status.
          */
@@ -1053,9 +1045,9 @@ export namespace Components {
     }
     interface IcSkeleton {
         /**
-          * Set the skeleton to the dark variant
+          * Set the skeleton to the light variant
          */
-        "dark"?: boolean;
+        "light"?: boolean;
         /**
           * The variant of the skeleton that will be displayed
          */
@@ -1063,21 +1055,21 @@ export namespace Components {
     }
     interface IcStatusTag {
         /**
-          * The size of the status tag.
+          * The emphasis of the status tag.
          */
-        "dense"?: boolean;
+        "appearance"?: IcStatusTagAppearance;
         /**
           * The content rendered within the status tag.
          */
         "label": string;
         /**
-          * The colour of the status tag.
+          * The size of the status tag.
          */
-        "status"?: IcStatusTagStatuses;
+        "small"?: boolean;
         /**
-          * The emphasis of the status tag.
+          * The colour of the status tag.
          */
-        "variant"?: IcStatusTagVariants;
+        "status"?: IcStatusTagStatuses;
     }
     interface IcStep {
         "lastStep": boolean;
@@ -1107,13 +1099,9 @@ export namespace Components {
     }
     interface IcSwitch {
         /**
-          * If true, the component is checked, if null the components state will be uncontrolled.
+          * If true, the component is checked.
          */
-        "checked"?: boolean | null;
-        /**
-          * If true, the component reduces in size to the dense state.
-         */
-        "dense"?: boolean;
+        "checked"?: boolean;
         /**
           * If true, the component is not interactive.
          */
@@ -1138,14 +1126,18 @@ export namespace Components {
           * If true, the component will render the On/Off state text.
          */
         "showState"?: boolean;
+        /**
+          * If true, the component reduces in size to the small state.
+         */
+        "small"?: boolean;
         /**
           * 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;
-        "dark"?: boolean;
         /**
           * Disables the tab.
          */
@@ -1160,24 +1152,24 @@ export namespace Components {
          */
         "activationType"?: IcActivationTypes;
         /**
-          * Provide a unique context if using multiple tabs inside one another i.e. rendering another set of tabs inside a tab panel.
+          * Determines whether the light or dark variant of the tabs should be displayed.
          */
-        "contextId"?: string;
+        "appearance"?: IcThemeForegroundNoDefault;
         /**
-          * Determines whether the dark variant of the tabs should be displayed.
+          * Provide a unique context if using multiple tabs inside one another i.e. rendering another set of tabs inside a tab panel.
          */
-        "dark"?: boolean;
+        "contextId"?: string;
         /**
           * Allows the user to control the selected tab. Must be used alongside the tabSelect event to manage tab selection.
          */
         "selectedTabIndex"?: number;
     }
-    interface IcTabList {
+    interface IcTabGroup {
+        "appearance"?: IcThemeForegroundNoDefault;
         /**
           * Provide a unique context if using multiple tabs inside one another i.e. rendering another set of tabs inside a tab panel.
          */
         "contextId"?: string;
-        "dark"?: boolean;
         /**
           * Use when tabs and tab panels are to be positioned separately.
          */
@@ -1189,6 +1181,7 @@ export namespace Components {
         "scrollTabIntoView": (tabNumber: number) => Promise<void>;
     }
     interface IcTabPanel {
+        "appearance"?: IcThemeForegroundNoDefault;
         /**
           * Provide a unique context if using multiple tabs inside one another i.e. rendering another tabs inside a tab panel.
          */
@@ -1218,18 +1211,10 @@ export namespace Components {
           * Whether auto correction should be enabled when the user is entering/editing the text value.
          */
         "autocorrect": IcAutocorrectStates1;
-        /**
-          * Determines whether the dark variant of the text field should be displayed.
-         */
-        "dark"?: boolean;
         /**
           * Set the amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.
          */
         "debounce": number;
-        /**
-          * Specify whether dense styling is to be applied to the element.
-         */
-        "dense": boolean;
         /**
           * Specify whether the input is disabled.
          */
@@ -1292,6 +1277,10 @@ export namespace Components {
           * Sets focus on the native `input`
          */
         "setFocus": () => Promise<void>;
+        /**
+          * Specify whether small styling is to be applied to the element.
+         */
+        "small": boolean;
         /**
           * If `true`, the element will have its spelling and grammar checked.
          */
@@ -1325,10 +1314,6 @@ export namespace Components {
         "color"?: string;
     }
     interface IcTooltip {
-        /**
-          * The id of the element the tooltip is describing - for when aria-labelledby or aria-describedby is used.
-         */
-        "elementId"?: string;
         /**
           * The text to display on the tooltip.
          */
@@ -1337,6 +1322,10 @@ export namespace Components {
           * The position of the tool-tip in relation to the parent element.
          */
         "placement"?: IcTooltipPlacements;
+        /**
+          * The ID of the element the tooltip is describing - for when aria-labelledby or aria-describedby is used.
+         */
+        "target"?: string;
     }
     interface IcTopNavigation {
         /**
@@ -1368,7 +1357,7 @@ export namespace Components {
         /**
           * Adds appropriate margins to the top and bottom of the typography.
          */
-        "spacing"?: boolean;
+        "applyVerticalMargins"?: boolean;
         /**
           * The ICDS typography style to use.
          */
@@ -1466,11 +1455,11 @@ declare global {
         prototype: HTMLIcBreadcrumbElement;
         new (): HTMLIcBreadcrumbElement;
     };
-    interface HTMLIcBreadcrumbsElement extends Components.IcBreadcrumbs, HTMLStencilElement {
+    interface HTMLIcBreadcrumbGroupElement extends Components.IcBreadcrumbGroup, HTMLStencilElement {
     }
-    var HTMLIcBreadcrumbsElement: {
-        prototype: HTMLIcBreadcrumbsElement;
-        new (): HTMLIcBreadcrumbsElement;
+    var HTMLIcBreadcrumbGroupElement: {
+        prototype: HTMLIcBreadcrumbGroupElement;
+        new (): HTMLIcBreadcrumbGroupElement;
     };
     interface HTMLIcButtonElement extends Components.IcButton, HTMLStencilElement {
     }
@@ -1694,11 +1683,11 @@ declare global {
         prototype: HTMLIcTabContextElement;
         new (): HTMLIcTabContextElement;
     };
-    interface HTMLIcTabListElement extends Components.IcTabList, HTMLStencilElement {
+    interface HTMLIcTabGroupElement extends Components.IcTabGroup, HTMLStencilElement {
     }
-    var HTMLIcTabListElement: {
-        prototype: HTMLIcTabListElement;
-        new (): HTMLIcTabListElement;
+    var HTMLIcTabGroupElement: {
+        prototype: HTMLIcTabGroupElement;
+        new (): HTMLIcTabGroupElement;
     };
     interface HTMLIcTabPanelElement extends Components.IcTabPanel, HTMLStencilElement {
     }
@@ -1740,7 +1729,7 @@ declare global {
         "ic-alert": HTMLIcAlertElement;
         "ic-back-to-top": HTMLIcBackToTopElement;
         "ic-breadcrumb": HTMLIcBreadcrumbElement;
-        "ic-breadcrumbs": HTMLIcBreadcrumbsElement;
+        "ic-breadcrumb-group": HTMLIcBreadcrumbGroupElement;
         "ic-button": HTMLIcButtonElement;
         "ic-card": HTMLIcCardElement;
         "ic-checkbox": HTMLIcCheckboxElement;
@@ -1778,7 +1767,7 @@ declare global {
         "ic-switch": HTMLIcSwitchElement;
         "ic-tab": HTMLIcTabElement;
         "ic-tab-context": HTMLIcTabContextElement;
-        "ic-tab-list": HTMLIcTabListElement;
+        "ic-tab-group": HTMLIcTabGroupElement;
         "ic-tab-panel": HTMLIcTabPanelElement;
         "ic-text-field": HTMLIcTextFieldElement;
         "ic-theme": HTMLIcThemeElement;
@@ -1838,7 +1827,7 @@ declare namespace LocalJSX {
          */
         "pageTitle": string;
     }
-    interface IcBreadcrumbs {
+    interface IcBreadcrumbGroup {
         /**
           * If true, display the parent page and back icon as breadcrumb
          */
@@ -1850,13 +1839,13 @@ declare namespace LocalJSX {
     }
     interface IcButton {
         /**
-          * The position of the tooltip in relation to the button.
+          * Determines the whether the appearance of the button is dark, light, or the default.
          */
-        "IcTooltipPlacement"?: IcButtonTooltipPlacement;
+        "appearance"?: IcThemeForeground;
         /**
-          * Determines the style of button to be displayed.
+          * Disable ic-tooltip which is shown for icon variant. Title or aria-label must be set if this prop is not applied.
          */
-        "buttonStyle"?: IcThemeForeground;
+        "disableTooltip"?: boolean;
         /**
           * Determines whether the button should be in disabled state.
          */
@@ -1877,10 +1866,6 @@ declare namespace LocalJSX {
           * Hints at the human language of the linked URL.
          */
         "hreflang"?: string;
-        /**
-          * Determines whether the icon should appear on the right hand side of the button.
-         */
-        "iconRight"?: boolean;
         /**
           * Determines whether the button should be in loading state.
          */
@@ -1909,6 +1894,10 @@ declare namespace LocalJSX {
           * Where to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
          */
         "target"?: string;
+        /**
+          * The position of the tooltip in relation to the button.
+         */
+        "tooltipPlacement"?: IcButtonTooltipPlacement;
         /**
           * The type of the button.
          */
@@ -1917,10 +1906,6 @@ declare namespace LocalJSX {
           * The button variant to be displayed.
          */
         "variant"?: IcButtonVariants;
-        /**
-          * Show an ic-tooltip displaying title or aria-label. Will always be shown for icon variant, so title or aria-label must be set.
-         */
-        "withIcTooltip"?: boolean;
     }
     interface IcCard {
         /**
@@ -2007,10 +1992,6 @@ declare namespace LocalJSX {
         "value": string;
     }
     interface IcCheckboxGroup {
-        /**
-          * Specify whether dense styling to be applied to element.
-         */
-        "dense"?: boolean;
         /**
           * Specify whether the input is disabled.
          */
@@ -2039,6 +2020,10 @@ declare namespace LocalJSX {
           * Specify if the input requires a value.
          */
         "required"?: boolean;
+        /**
+          * Specify whether small styling to be applied to element.
+         */
+        "small"?: boolean;
         /**
           * Provide validation status - 'error'
          */
@@ -2071,24 +2056,24 @@ declare namespace LocalJSX {
         "upTo"?: boolean;
     }
     interface IcDataEntity {
-        /**
-          * Set the data heading and all child data rows to dense styling
-         */
-        "dense"?: boolean;
         /**
           * Title for the data entity
          */
         "heading"?: string;
-    }
-    interface IcDataRow {
         /**
-          * Set the row to dense styling, this is automatically applied if dense is set on the parent data heading
+          * Set the data heading and all child data rows to small styling
          */
-        "dense"?: boolean;
+        "small"?: boolean;
+    }
+    interface IcDataRow {
         /**
           * Set the label in the leftmost cell of the row
          */
         "label"?: string;
+        /**
+          * Set the row to small styling, this is automatically applied if small is set on the parent data heading
+         */
+        "small"?: boolean;
         /**
           * Set the value of the middle (right if no addition supplied) cell of the row
          */
@@ -2102,7 +2087,7 @@ declare namespace LocalJSX {
          */
         "aligned"?: IcAlignment;
         /**
-          * Sets the screen size breakpoint at which to switch to the dense layout
+          * Sets the screen size breakpoint at which to switch to the small layout
          */
         "breakpoint"?: IcFooterBreakpoints;
         /**
@@ -2151,10 +2136,6 @@ declare namespace LocalJSX {
           * The alignment of the hero content
          */
         "contentAligned"?: IcHeroContentAlignments;
-        /**
-          * Alter styling for use with dense content/pages
-         */
-        "dense"?: boolean;
         /**
           * Whether the background image (if set) scrolls using a parallax effect.
          */
@@ -2171,6 +2152,10 @@ declare namespace LocalJSX {
           * Optional secondary subheading, replaced by slotted right content
          */
         "secondarySubheading"?: string;
+        /**
+          * Alter styling for use with small content/pages
+         */
+        "small"?: boolean;
         /**
           * Description for the hero
          */
@@ -2181,10 +2166,6 @@ declare namespace LocalJSX {
           * Determines whether the dark variant of the input-component-container focus indicator should be displayed.
          */
         "dark"?: boolean;
-        /**
-          * dense
-         */
-        "dense"?: boolean;
         /**
           * disabled
          */
@@ -2201,6 +2182,10 @@ declare namespace LocalJSX {
           * readonly
          */
         "readonly"?: boolean;
+        /**
+          * small
+         */
+        "small"?: boolean;
         /**
           * validationInline
          */
@@ -2277,6 +2262,10 @@ declare namespace LocalJSX {
         "status"?: IcInformationStatusOrEmpty;
     }
     interface IcLink {
+        /**
+          * Determines the whether the appearance is dark, light, or the default.
+         */
+        "appearance"?: IcThemeForeground;
         /**
           * Prompts the user to save the linked URL instead of navigating to it.
          */
@@ -2305,20 +2294,20 @@ declare namespace LocalJSX {
           * Where to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
          */
         "target"?: string;
-        /**
-          * Determines which colour variant is to be applied, to have appropriate colour contrast.
-         */
-        "variant"?: IcThemeForeground;
     }
     interface IcLoadingIndicator {
         /**
-          * Determines whether the dark variant of the loading indicator should be displayed.
+          * Determines whether the dark or light loading indicator should be displayed.
          */
-        "dark"?: boolean;
+        "appearance"?: IcThemeForegroundNoDefault;
         /**
           * Provide a description to be set as the aria-label of the loading indicator when not using a visible label.
          */
         "description"?: string;
+        /**
+          * When linear, determines whether the full-width version (i.e. without a border radius) should be displayed.
+         */
+        "fullWidth"?: boolean;
         /**
           * The label to be displayed beneath the loading indicator. Display a changing label by separating multiple messages with forward slashes.
          */
@@ -2347,10 +2336,6 @@ declare namespace LocalJSX {
           * The type of indicator, either linear or circular.
          */
         "type"?: IcLoadingTypes;
-        /**
-          * The variant of indicator, either default or full-width.
-         */
-        "variant"?: IcLoadingVariants;
     }
     interface IcMenu {
         /**
@@ -2361,10 +2346,6 @@ declare namespace LocalJSX {
           * Reference to an anchor element the menu will position itself from when rendered.
          */
         "anchorEl": HTMLElement;
-        /**
-          * Specify whether dense styling is to be applied to the element.
-         */
-        "dense"?: boolean;
         /**
           * If true then fill width of container
          */
@@ -2401,6 +2382,10 @@ declare namespace LocalJSX {
           * Provide the possible selection options.
          */
         "options": IcMenuOption[];
+        /**
+          * Specify whether small styling is to be applied to the element.
+         */
+        "small"?: boolean;
         /**
           * The value of the currently selected option.
          */
@@ -2479,10 +2464,6 @@ declare namespace LocalJSX {
           * Set whether the bottom border is used
          */
         "border"?: boolean;
-        /**
-          * Whether the component uses dense styling.
-         */
-        "dense"?: boolean;
         /**
           * The title to render on the component.
          */
@@ -2491,6 +2472,10 @@ declare namespace LocalJSX {
           * Set whether the reading pattern and tab order change in the action area for viewport widths of above 576px and when actions have not wrapped
          */
         "reverseOrder"?: boolean;
+        /**
+          * Whether the component uses small styling.
+         */
+        "small"?: boolean;
         /**
           * Set whether the header is sticky at all breakpoints
          */
@@ -2505,10 +2490,6 @@ declare namespace LocalJSX {
         "subheading"?: string;
     }
     interface IcRadioGroup {
-        /**
-          * Specify whether dense styling is to be applied to the element.
-         */
-        "dense"?: boolean;
         /**
           * Specify whether the input is disabled.
          */
@@ -2537,6 +2518,10 @@ declare namespace LocalJSX {
           * Specify if the input requires a value.
          */
         "required"?: boolean;
+        /**
+          * Specify whether small styling is to be applied to the element.
+         */
+        "small"?: boolean;
         /**
           * Provide validation status - 'error'
          */
@@ -2609,18 +2594,10 @@ declare namespace LocalJSX {
           * Number of characters until suggestions appear
          */
         "charactersUntilSuggestion"?: number;
-        /**
-          * Determines whether the dark variant of the search bar should be displayed.
-         */
-        "dark"?: boolean;
         /**
           * Set the amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.
          */
         "debounce"?: number;
-        /**
-          * Specify whether dense styling is to be applied to the element.
-         */
-        "dense"?: boolean;
         /**
           * Specify whether to disable the built in filtering. For example, if options will already be filtered from external source. If true, all options provided will be displayed.
          */
@@ -2717,6 +2694,10 @@ declare namespace LocalJSX {
           * Specify if the input requires a value.
          */
         "required"?: boolean;
+        /**
+          * Specify whether small styling is to be applied to the element.
+         */
+        "small"?: boolean;
         /**
           * If `true`, the element will have its spelling and grammar checked.
          */
@@ -2741,10 +2722,6 @@ declare namespace LocalJSX {
           * Number of characters until suggestions appear for a searchable select.
          */
         "charactersUntilSuggestions"?: number;
-        /**
-          * Specify whether dense styling is to be applied to the element.
-         */
-        "dense"?: boolean;
         /**
           * Specify whether the input is disabled.
          */
@@ -2821,6 +2798,10 @@ declare namespace LocalJSX {
           * Display a button which clears the input when clicked. The button will always appear on the searchable select.
          */
         "showClearButton"?: boolean;
+        /**
+          * Specify whether small styling is to be applied to the element.
+         */
+        "small"?: boolean;
         /**
           * Provide a validation status.
          */
@@ -2874,9 +2855,9 @@ declare namespace LocalJSX {
     }
     interface IcSkeleton {
         /**
-          * Set the skeleton to the dark variant
+          * Set the skeleton to the light variant
          */
-        "dark"?: boolean;
+        "light"?: boolean;
         /**
           * The variant of the skeleton that will be displayed
          */
@@ -2884,21 +2865,21 @@ declare namespace LocalJSX {
     }
     interface IcStatusTag {
         /**
-          * The size of the status tag.
+          * The emphasis of the status tag.
          */
-        "dense"?: boolean;
+        "appearance"?: IcStatusTagAppearance;
         /**
           * The content rendered within the status tag.
          */
         "label": string;
         /**
-          * The colour of the status tag.
+          * The size of the status tag.
          */
-        "status"?: IcStatusTagStatuses;
+        "small"?: boolean;
         /**
-          * The emphasis of the status tag.
+          * The colour of the status tag.
          */
-        "variant"?: IcStatusTagVariants;
+        "status"?: IcStatusTagStatuses;
     }
     interface IcStep {
         /**
@@ -2926,13 +2907,9 @@ declare namespace LocalJSX {
     }
     interface IcSwitch {
         /**
-          * If true, the component is checked, if null the components state will be uncontrolled.
-         */
-        "checked"?: boolean | null;
-        /**
-          * If true, the component reduces in size to the dense state.
+          * If true, the component is checked.
          */
-        "dense"?: boolean;
+        "checked"?: boolean;
         /**
           * If true, the component is not interactive.
          */
@@ -2969,6 +2946,10 @@ declare namespace LocalJSX {
           * If true, the component will render the On/Off state text.
          */
         "showState"?: boolean;
+        /**
+          * If true, the component reduces in size to the small state.
+         */
+        "small"?: boolean;
         /**
           * 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>`.
          */
@@ -2990,13 +2971,13 @@ declare namespace LocalJSX {
          */
         "activationType"?: IcActivationTypes;
         /**
-          * Provide a unique context if using multiple tabs inside one another i.e. rendering another set of tabs inside a tab panel.
+          * Determines whether the light or dark variant of the tabs should be displayed.
          */
-        "contextId"?: string;
+        "appearance"?: IcThemeForegroundNoDefault;
         /**
-          * Determines whether the dark variant of the tabs should be displayed.
+          * Provide a unique context if using multiple tabs inside one another i.e. rendering another set of tabs inside a tab panel.
          */
-        "dark"?: boolean;
+        "contextId"?: string;
         /**
           * Emitted when a user selects a tab.
          */
@@ -3006,7 +2987,7 @@ declare namespace LocalJSX {
          */
         "selectedTabIndex"?: number;
     }
-    interface IcTabList {
+    interface IcTabGroup {
         /**
           * Provide a unique context if using multiple tabs inside one another i.e. rendering another set of tabs inside a tab panel.
          */
@@ -3043,18 +3024,10 @@ declare namespace LocalJSX {
           * Whether auto correction should be enabled when the user is entering/editing the text value.
          */
         "autocorrect"?: IcAutocorrectStates1;
-        /**
-          * Determines whether the dark variant of the text field should be displayed.
-         */
-        "dark"?: boolean;
         /**
           * Set the amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.
          */
         "debounce"?: number;
-        /**
-          * Specify whether dense styling is to be applied to the element.
-         */
-        "dense"?: boolean;
         /**
           * Specify whether the input is disabled.
          */
@@ -3131,6 +3104,10 @@ declare namespace LocalJSX {
           * Specify the number of rows to transform the text field into a text area with a specific height.
          */
         "rows"?: number;
+        /**
+          * Specify whether small styling is to be applied to the element.
+         */
+        "small"?: boolean;
         /**
           * If `true`, the element will have its spelling and grammar checked.
          */
@@ -3167,10 +3144,6 @@ declare namespace LocalJSX {
         "onIcThemeChange"?: (event: IcThemeCustomEvent<IcTheme>) => void;
     }
     interface IcTooltip {
-        /**
-          * The id of the element the tooltip is describing - for when aria-labelledby or aria-describedby is used.
-         */
-        "elementId"?: string;
         /**
           * The text to display on the tooltip.
          */
@@ -3179,6 +3152,10 @@ declare namespace LocalJSX {
           * The position of the tool-tip in relation to the parent element.
          */
         "placement"?: IcTooltipPlacements;
+        /**
+          * The ID of the element the tooltip is describing - for when aria-labelledby or aria-describedby is used.
+         */
+        "target"?: string;
     }
     interface IcTopNavigation {
         /**
@@ -3210,7 +3187,7 @@ declare namespace LocalJSX {
         /**
           * Adds appropriate margins to the top and bottom of the typography.
          */
-        "spacing"?: boolean;
+        "applyVerticalMargins"?: boolean;
         /**
           * The ICDS typography style to use.
          */
@@ -3220,7 +3197,7 @@ declare namespace LocalJSX {
         "ic-alert": IcAlert;
         "ic-back-to-top": IcBackToTop;
         "ic-breadcrumb": IcBreadcrumb;
-        "ic-breadcrumbs": IcBreadcrumbs;
+        "ic-breadcrumb-group": IcBreadcrumbGroup;
         "ic-button": IcButton;
         "ic-card": IcCard;
         "ic-checkbox": IcCheckbox;
@@ -3258,7 +3235,7 @@ declare namespace LocalJSX {
         "ic-switch": IcSwitch;
         "ic-tab": IcTab;
         "ic-tab-context": IcTabContext;
-        "ic-tab-list": IcTabList;
+        "ic-tab-group": IcTabGroup;
         "ic-tab-panel": IcTabPanel;
         "ic-text-field": IcTextField;
         "ic-theme": IcTheme;
@@ -3274,7 +3251,7 @@ declare module "@stencil/core" {
             "ic-alert": LocalJSX.IcAlert & JSXBase.HTMLAttributes<HTMLIcAlertElement>;
             "ic-back-to-top": LocalJSX.IcBackToTop & JSXBase.HTMLAttributes<HTMLIcBackToTopElement>;
             "ic-breadcrumb": LocalJSX.IcBreadcrumb & JSXBase.HTMLAttributes<HTMLIcBreadcrumbElement>;
-            "ic-breadcrumbs": LocalJSX.IcBreadcrumbs & JSXBase.HTMLAttributes<HTMLIcBreadcrumbsElement>;
+            "ic-breadcrumb-group": LocalJSX.IcBreadcrumbGroup & JSXBase.HTMLAttributes<HTMLIcBreadcrumbGroupElement>;
             "ic-button": LocalJSX.IcButton & JSXBase.HTMLAttributes<HTMLIcButtonElement>;
             "ic-card": LocalJSX.IcCard & JSXBase.HTMLAttributes<HTMLIcCardElement>;
             "ic-checkbox": LocalJSX.IcCheckbox & JSXBase.HTMLAttributes<HTMLIcCheckboxElement>;
@@ -3312,7 +3289,7 @@ declare module "@stencil/core" {
             "ic-switch": LocalJSX.IcSwitch & JSXBase.HTMLAttributes<HTMLIcSwitchElement>;
             "ic-tab": LocalJSX.IcTab & JSXBase.HTMLAttributes<HTMLIcTabElement>;
             "ic-tab-context": LocalJSX.IcTabContext & JSXBase.HTMLAttributes<HTMLIcTabContextElement>;
-            "ic-tab-list": LocalJSX.IcTabList & JSXBase.HTMLAttributes<HTMLIcTabListElement>;
+            "ic-tab-group": LocalJSX.IcTabGroup & JSXBase.HTMLAttributes<HTMLIcTabGroupElement>;
             "ic-tab-panel": LocalJSX.IcTabPanel & JSXBase.HTMLAttributes<HTMLIcTabPanelElement>;
             "ic-text-field": LocalJSX.IcTextField & JSXBase.HTMLAttributes<HTMLIcTextFieldElement>;
             "ic-theme": LocalJSX.IcTheme & JSXBase.HTMLAttributes<HTMLIcThemeElement>;