@ukic/web-components 3.2.0 → 3.4.0

package/dist/types/components.d.ts

@@ -224,12 +224,12 @@ export namespace Components {
         /**
           * If `true`, aria-current will be set on the breadcrumb.
          */
-        "current"?: boolean;
+        "current": boolean;
         /**
           * The URL that the breadcrumb link points to.
          */
         "href"?: string;
-        "monochrome"?: boolean;
+        "monochrome": boolean;
         /**
           * The title of the breadcrumb.
          */
@@ -238,62 +238,62 @@ export namespace Components {
           * Sets focus on the breadcrumb.
          */
         "setFocus": () => Promise<void>;
-        "showBackIcon"?: boolean;
-        "theme"?: IcThemeMode;
+        "showBackIcon": boolean;
+        "theme": IcThemeMode;
     }
     interface IcBreadcrumbGroup {
         /**
           * If `true`, display only a single breadcrumb for the parent page with a back icon.
          */
-        "backBreadcrumbOnly"?: boolean;
+        "backBreadcrumbOnly": boolean;
         /**
           * If `true`, all breadcrumbs between the first and last breadcrumb will be collapsed.
          */
-        "collapsed"?: boolean;
+        "collapsed": boolean;
         /**
           * If `true`, the breadcrumb group will display as black in the light theme, and white in the dark theme.
          */
-        "monochrome"?: boolean;
+        "monochrome": boolean;
         /**
           * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
          */
-        "theme"?: IcThemeMode;
+        "theme": IcThemeMode;
     }
     interface IcButton {
         /**
           * If `fileUpload` is set to `true`, this is the accepted list of file types.
          */
-        "accept"?: string;
+        "accept": string;
         "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.
          */
-        "disableTooltip"?: boolean;
+        "disableTooltip": boolean;
         /**
           * If `true`, the button will be in disabled state.
          */
-        "disabled"?: boolean;
+        "disabled": boolean;
         /**
           * If `true`, the user can save the linked URL instead of navigating to it.
          */
-        "download"?: string | boolean;
+        "download": string | boolean;
         /**
           * If `true`, the button will show a dropdown icon.
          */
-        "dropdown"?: boolean;
+        "dropdown": boolean;
         /**
           * If `true`, the aria-expanded value will be set to true. This is only applied if the dropdown prop is also true.
          */
-        "dropdownExpanded"?: boolean;
+        "dropdownExpanded": boolean;
         /**
           * The name of the control for the file input, which is submitted with the form data.
          */
-        "fileInputName"?: string;
+        "fileInputName": string;
         /**
           * If `true`, when the button is clicked the native file explorer will be launched.
          */
-        "fileUpload"?: boolean;
+        "fileUpload": boolean;
         /**
           * The <form> element to associate the button with.
          */
@@ -321,7 +321,7 @@ export namespace Components {
         /**
           * If `true`, the button will fill the width of the container.
          */
-        "fullWidth"?: boolean;
+        "fullWidth": boolean;
         /**
           * The URL that the link points to. This will render the button as an "a" tag.
          */
@@ -333,15 +333,15 @@ export namespace Components {
         /**
           * If `true`, the button will be in loading state.
          */
-        "loading"?: boolean;
+        "loading": boolean;
         /**
           * If `true`, the button will display as monochromatic in either `light` or `dark` theme.
          */
-        "monochrome"?: boolean;
+        "monochrome": boolean;
         /**
           * If `fileUpload` is set to `true`, this boolean determines whether multiple files are accepted.
          */
-        "multiple"?: boolean;
+        "multiple": boolean;
         /**
           * How much of the referrer to send when following the link.
          */
@@ -361,7 +361,7 @@ export namespace Components {
         /**
           * The size of the button to be displayed.
          */
-        "size"?: IcSizes;
+        "size": IcSizes;
         /**
           * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
          */
@@ -369,23 +369,23 @@ 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;
+        "theme": IcThemeMode;
         /**
           * The position of the tooltip in relation to the button.
          */
-        "tooltipPlacement"?: IcButtonTooltipPlacement;
+        "tooltipPlacement": IcButtonTooltipPlacement;
         /**
-          * If `true`, the secondary variant of button will have a transparent background rather than white.
+          * If `true`, the secondary & tertiary variants of button will have a transparent background when not hovered, pressed or loading.
          */
-        "transparentBackground"?: boolean;
+        "transparentBackground": boolean;
         /**
           * The type of the button.
          */
-        "type"?: IcButtonTypes;
+        "type": IcButtonTypes;
         /**
           * The variant of the button to be displayed.
          */
-        "variant"?: IcButtonVariants;
+        "variant": IcButtonVariants;
     }
     interface IcCardVertical {
         /**
@@ -449,19 +449,19 @@ export namespace Components {
         /**
           * The style of additionalField that will be displayed if used.
          */
-        "additionalFieldDisplay"?: IcAdditionalFieldTypes;
+        "additionalFieldDisplay": IcAdditionalFieldTypes;
         /**
           * If `true`, the checkbox will be set to the checked state. This is only the initial state and will be updated to unchecked if the checkbox is clicked.
          */
-        "checked"?: boolean;
+        "checked": boolean;
         /**
           * If `true`, the checkbox will be set to the disabled state.
          */
-        "disabled"?: boolean;
+        "disabled": boolean;
         /**
           * The text to be displayed when dynamic.
          */
-        "dynamicText"?: string;
+        "dynamicText": string;
         /**
           * The <form> element to associate the checkbox with.
          */
@@ -473,11 +473,11 @@ export namespace Components {
         /**
           * If `true`, the label will be hidden and the required label value will be applied as an aria-label.
          */
-        "hideLabel"?: boolean;
+        "hideLabel": boolean;
         /**
           * If `true`, the indeterminate state will be displayed when checked.
          */
-        "indeterminate"?: boolean;
+        "indeterminate": boolean;
         /**
           * The label for the checkbox.
          */
@@ -489,7 +489,7 @@ export namespace Components {
         /**
           * If `true`, the checkbox will behave like a native checkbox where the `indeterminate` prop sets the indeterminate visual styling, independent of the `checked` state.
          */
-        "nativeIndeterminateBehaviour"?: boolean;
+        "nativeIndeterminateBehaviour": boolean;
         /**
           * Sets focus on the checkbox.
          */
@@ -501,7 +501,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;
+        "theme": IcThemeMode;
         /**
           * The value for the checkbox.
          */
@@ -511,15 +511,15 @@ export namespace Components {
         /**
           * If `true`, the checkbox group will be set to the disabled state.
          */
-        "disabled"?: boolean;
+        "disabled": boolean;
         /**
           * The helper text that will be displayed for additional field guidance.
          */
-        "helperText"?: string;
+        "helperText": string;
         /**
           * If `true`, the label will be hidden and the required label value will be applied as an aria-label.
          */
-        "hideLabel"?: boolean;
+        "hideLabel": boolean;
         /**
           * The label for the checkbox group to be displayed.
          */
@@ -531,23 +531,23 @@ export namespace Components {
         /**
           * If `true`, the checkbox group will require a value.
          */
-        "required"?: boolean;
+        "required": boolean;
         /**
           * The size of the checkboxes to be displayed. This does not affect the font size of the label.
          */
-        "size"?: IcSizes;
+        "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;
+        "theme": IcThemeMode;
         /**
           * The validation status - e.g. 'error' | 'warning' | 'success'.
          */
-        "validationStatus"?: IcInformationStatusOrEmpty;
+        "validationStatus": IcInformationStatusOrEmpty;
         /**
           * The text to display as the validation message.
          */
-        "validationText"?: string;
+        "validationText": string;
     }
     interface IcChip {
         /**
@@ -557,15 +557,15 @@ export namespace Components {
         /**
           * If `true`, the chip will appear disabled.
          */
-        "disabled"?: boolean;
+        "disabled": boolean;
         /**
-          * The text in the dismiss button tooltip and aria label.
+          * The text in the dismiss button tooltip and aria label. Makes the user aware of the action resulting from clicking the 'Dismiss chip' button.
          */
-        "dismissLabel"?: string;
+        "dismissLabel": string;
         /**
           * If `true`, the chip will have a close button at the end to dismiss it.
          */
-        "dismissible"?: boolean;
+        "dismissible": boolean;
         /**
           * The text rendered within the chip.
          */
@@ -577,19 +577,19 @@ export namespace Components {
         /**
           * The size of the chip.
          */
-        "size"?: IcSizes;
+        "size": IcSizes;
         /**
           * Sets the chip to the dark or light theme colors. "inherit" will set the color based on the system settings or ic-theme component. Setting the "customColor" prop will override this.
          */
-        "theme"?: "dark" | "light" | "inherit";
+        "theme": IcThemeMode;
         /**
           * If `true`, the outlined variant of chip will have a transparent background rather than the theme defined color.
          */
-        "transparentBackground"?: boolean;
+        "transparentBackground": boolean;
         /**
           * The emphasis of the chip.
          */
-        "variant"?: IcEmphasisType;
+        "variant": IcEmphasisType;
     }
     interface IcClassificationBanner {
         /**
@@ -968,7 +968,7 @@ export namespace Components {
     }
     interface IcLink {
         /**
-          * If `true`, the user can save the linked URL instead of navigating to it.
+          * If `true`, the user can save the linked URL instead of navigating to it. If the value is a string, it will be used as the filename for the download.
          */
         "download"?: string | boolean;
         /**
@@ -1055,20 +1055,20 @@ export namespace Components {
         /**
           * Determines whether options manually set as values (by pressing 'Enter') when they receive focus using keyboard navigation.
          */
-        "activationType"?: IcActivationTypes;
+        "activationType": IcActivationTypes;
         /**
           * The reference to an anchor element the menu will position itself from when rendered.
          */
-        "anchorEl": HTMLElement;
-        "autofocusOnSelected"?: boolean;
+        "anchorEl"?: HTMLElement;
+        "autofocusOnSelected": boolean;
         /**
           * If `true`, the menu will close when an option is selected.
          */
-        "closeOnSelect"?: boolean;
+        "closeOnSelect": boolean;
         /**
           * If `true`, the menu will fill the width of the container.
          */
-        "fullWidth"?: boolean;
+        "fullWidth": boolean;
         "handleClickOpen": () => Promise<void>;
         /**
           * Used alongside activationType If menu is opened via keyboard navigation (i.e. Enter, ArrowUp or ArrowDown), emit optionSelect custom event.
@@ -1080,7 +1080,7 @@ export namespace Components {
         /**
           * The reference to the input element.
          */
-        "inputEl": HTMLElement;
+        "inputEl"?: HTMLElement;
         /**
           * The label for the input element.
          */
@@ -1088,7 +1088,7 @@ export namespace Components {
         /**
           * The custom name for the label field for IcMenuOption.
          */
-        "labelField"?: string;
+        "labelField": string;
         /**
           * The ID of the menu.
          */
@@ -1105,12 +1105,12 @@ export namespace Components {
         /**
           * Specify the mode search bar uses to search. `navigation` allows for quick lookups of a set of values, `query` allows for more general searches.
          */
-        "searchMode"?: IcSearchBarSearchModes;
-        "selectOnEnter"?: boolean;
+        "searchMode": IcSearchBarSearchModes;
+        "selectOnEnter": boolean;
         /**
           * The size of the menu.
          */
-        "size"?: IcSizes;
+        "size": IcSizes;
         /**
           * The value of the currently selected option - or array of values (if multiple options allowed).
          */
@@ -1118,7 +1118,7 @@ export namespace Components {
         /**
           * The custom name for the value field for IcMenuOption.
          */
-        "valueField"?: string;
+        "valueField": string;
     }
     interface IcMenuGroup {
         /**
@@ -1218,7 +1218,7 @@ export namespace Components {
         /**
           * If `true`, the group will be expandable when in an ic-side-navigation component, or, when in an ic-top-navigation component, in the side menu displayed at small screen sizes.
          */
-        "expandable"?: boolean;
+        "expandable": boolean;
         /**
           * The label to display on the group.
          */
@@ -1230,20 +1230,20 @@ 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;
+        "theme": IcThemeMode;
     }
     interface IcNavigationItem {
-        "collapsedIconLabel"?: boolean;
-        "displayNavigationTooltip"?: boolean;
+        "collapsedIconLabel": boolean;
+        "displayNavigationTooltip": boolean;
         /**
           * If `true`, the user can save the linked URL instead of navigating to it.
          */
-        "download"?: string | boolean;
-        "expandable"?: boolean;
+        "download": string | boolean;
+        "expandable": boolean;
         /**
           * The destination of the navigation item.
          */
-        "href"?: string;
+        "href": string;
         /**
           * The human language of the linked URL.
          */
@@ -1263,7 +1263,7 @@ export namespace Components {
         /**
           * If `true`, the navigation item will be set in a selected state.
          */
-        "selected"?: boolean;
+        "selected": boolean;
         /**
           * Sets focus on the nav item.
          */
@@ -1275,7 +1275,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;
+        "theme": IcThemeMode;
     }
     interface IcNavigationMenu {
         /**
@@ -1538,59 +1538,59 @@ export namespace Components {
         /**
           * The hint text for the hidden assistive description element.
          */
-        "assistiveHintText"?: string;
+        "assistiveHintText": string;
         /**
           * The automatic capitalisation of the text value as it is entered/edited by the user. Available options: "off", "none", "on", "sentences", "words", "characters".
          */
-        "autocapitalize": string | undefined;
+        "autocapitalize": string;
         /**
           * The state of autocompletion the browser can apply on the text value.
          */
-        "autocomplete"?: IcAutocompleteTypes;
+        "autocomplete": IcAutocompleteTypes;
         /**
           * The state of autocorrection the browser can apply when the user is entering/editing the text value.
          */
-        "autocorrect"?: IcAutocorrectStates;
+        "autocorrect": IcAutocorrectStates;
         /**
           * If `true`, the form control will have input focus when the page loads.
          */
-        "autofocus": boolean | undefined;
+        "autofocus": boolean;
         /**
           * The number of characters until suggestions appear. The submit button will be disabled until the inputted value is equal to or greater than this number.
          */
-        "charactersUntilSuggestion"?: number;
+        "charactersUntilSuggestion": number;
         /**
           * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.
          */
-        "debounce"?: number;
+        "debounce": number;
         /**
           * 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.
          */
-        "disableAutoFiltering"?: boolean;
+        "disableAutoFiltering": boolean;
         /**
           * If `true`, the disabled state will be set.
          */
-        "disabled"?: boolean;
+        "disabled": boolean;
         /**
           * The text displayed when there are no options in the option list.
          */
-        "emptyOptionListText"?: string;
+        "emptyOptionListText": string;
         /**
           * If `true`, the search bar will be focused when component loaded.
          */
-        "focusOnLoad"?: boolean;
+        "focusOnLoad": boolean;
         /**
           * Specify whether the search bar fills the full width of the container. If `true`, this overrides the --input-width CSS variable.
          */
-        "fullWidth"?: boolean;
+        "fullWidth": boolean;
         /**
           * The helper text that will be displayed for additional field guidance.
          */
-        "helperText"?: string;
+        "helperText": string;
         /**
           * If `true`, the label will be hidden and the required label value will be applied as an aria-label.
          */
-        "hideLabel"?: boolean;
+        "hideLabel": boolean;
         /**
           * The label for the search bar.
          */
@@ -1598,43 +1598,43 @@ export namespace Components {
         /**
           * The custom name for the label field to correspond with the IcMenuOption type.
          */
-        "labelField"?: string;
+        "labelField": string;
         /**
           * Trigger loading state when fetching options asynchronously
          */
-        "loading"?: boolean;
+        "loading": boolean;
         /**
           * Change the message displayed when external loading times out.
          */
-        "loadingErrorLabel"?: string;
+        "loadingErrorLabel": string;
         /**
           * Change the message displayed whilst the options are being loaded externally.
          */
-        "loadingLabel"?: string;
+        "loadingLabel": string;
         /**
           * The name of the control, which is submitted with the form data.
          */
-        "name"?: string;
+        "name": string;
         /**
           * The suggested search options.
          */
-        "options"?: IcMenuOption[];
+        "options": IcMenuOption[];
         /**
           * The placeholder value to display.
          */
-        "placeholder"?: string;
+        "placeholder": string;
         /**
           * If `true`, the readonly state will be set.
          */
-        "readonly"?: boolean;
+        "readonly": boolean;
         /**
           * If `true`, the search bar will require a value.
          */
-        "required"?: boolean;
+        "required": boolean;
         /**
           * Specify the mode search bar uses to search. `navigation` allows for quick lookups of a set of values, `query` allows for more general searches.
          */
-        "searchMode"?: IcSearchBarSearchModes;
+        "searchMode": IcSearchBarSearchModes;
         /**
           * Sets focus on the native `input`.
          */
@@ -1642,15 +1642,15 @@ export namespace Components {
         /**
           * The size of the search bar component.
          */
-        "size"?: IcSizesNoLarge;
+        "size": IcSizesNoLarge;
         /**
           * If `true`, the value of the search will have its spelling and grammar checked.
          */
-        "spellcheck": boolean | undefined;
+        "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;
+        "theme": IcThemeMode;
         /**
           * If using external filtering, set a timeout for when loading takes too long.
          */
@@ -1658,11 +1658,11 @@ export namespace Components {
         /**
           * The value of the search input.
          */
-        "value"?: string;
+        "value": string;
         /**
           * The custom name for the value field to correspond with the IcMenuOption type.
          */
-        "valueField"?: string;
+        "valueField": string;
     }
     interface IcSectionContainer {
         /**
@@ -1678,19 +1678,19 @@ export namespace Components {
         /**
           * The amount of time, in milliseconds, to wait to trigger the `icInput` event after each keystroke.
          */
-        "debounce"?: number;
+        "debounce": number;
         /**
           * If `true`, the built in filtering will be disabled for a searchable variant. For example, if options will already be filtered from external source.
          */
-        "disableAutoFiltering"?: boolean;
+        "disableAutoFiltering": boolean;
         /**
           * If `true`, the disabled state will be set.
          */
-        "disabled"?: boolean;
+        "disabled": boolean;
         /**
           * The text displayed when there are no options in the option list.
          */
-        "emptyOptionListText"?: string;
+        "emptyOptionListText": string;
         /**
           * The <form> element to associate the select with.
          */
@@ -1698,23 +1698,23 @@ export namespace Components {
         /**
           * If `true`, the select will fill the width of the container.
          */
-        "fullWidth"?: boolean;
+        "fullWidth": boolean;
         /**
           * The helper text that will be displayed for additional field guidance.
          */
-        "helperText"?: string;
+        "helperText": string;
         /**
           * If `true`, the label will be hidden and the required label value will be applied as an aria-label.
          */
-        "hideLabel"?: boolean;
+        "hideLabel": boolean;
         /**
           * If `true`, descriptions of options will be included when filtering options in a searchable select. Only applies to built in filtering.
          */
-        "includeDescriptionsInSearch"?: boolean;
+        "includeDescriptionsInSearch": boolean;
         /**
           * If `true`, group titles of grouped options will be included when filtering options in a searchable select. Only applies to built in filtering.
          */
-        "includeGroupTitlesInSearch"?: boolean;
+        "includeGroupTitlesInSearch": boolean;
         /**
           * The label for the select.
          */
@@ -1722,51 +1722,51 @@ export namespace Components {
         /**
           * If `true`, the loading state will be triggered when fetching options asynchronously.
          */
-        "loading"?: boolean;
+        "loading": boolean;
         /**
           * The message displayed when external loading times out.
          */
-        "loadingErrorLabel"?: string;
+        "loadingErrorLabel": string;
         /**
           * The message displayed whilst the options are being loaded externally.
          */
-        "loadingLabel"?: string;
+        "loadingLabel": string;
         /**
           * If `true`, multiple options can be selected.
          */
-        "multiple"?: boolean;
+        "multiple": boolean;
         /**
           * The name of the control, which is submitted with the form data.
          */
-        "name"?: string;
+        "name": string;
         /**
           * The possible selection options.
          */
-        "options"?: IcMenuOption[];
+        "options": IcMenuOption[];
         /**
           * The placeholder value to be displayed.
          */
-        "placeholder"?: string;
+        "placeholder": string;
         /**
           * If `true`, the readonly state will be set.
          */
-        "readonly"?: boolean;
+        "readonly": boolean;
         /**
           * If `true`, the select will require a value.
          */
-        "required"?: boolean;
+        "required": boolean;
         /**
           * Whether the search string of the searchable select should match the start of or anywhere in the options. Only applies to built in filtering.
          */
-        "searchMatchPosition"?: IcSearchMatchPositions;
+        "searchMatchPosition": IcSearchMatchPositions;
         /**
           * 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;
+        "searchable": boolean;
         /**
           * If `true`, the icOptionSelect event will be fired on enter instead of ArrowUp and ArrowDown on the single select.
          */
-        "selectOnEnter"?: boolean;
+        "selectOnEnter": boolean;
         /**
           * Sets focus on the input box.
          */
@@ -1774,15 +1774,15 @@ export namespace Components {
         /**
           * If `true`, a button which clears the select input when clicked will be displayed. The button will always appear on the searchable select.
          */
-        "showClearButton"?: boolean;
+        "showClearButton": boolean;
         /**
           * The size of the select.
          */
-        "size"?: IcSizes;
+        "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;
+        "theme": IcThemeMode;
         /**
           * If using external filtering, set a timeout for when loading takes too long.
          */
@@ -1790,21 +1790,25 @@ export namespace Components {
         /**
           * The validation status - e.g. 'error' | 'warning' | 'success'.
          */
-        "validationStatus"?: IcInformationStatusOrEmpty;
+        "validationStatus": IcInformationStatusOrEmpty;
         /**
           * The text to display as the validation message.
          */
-        "validationText"?: string;
+        "validationText": string;
         /**
           * The value of the select, reflected by the value of the currently selected option. For the searchable variant, the value is also reflected by the user input. For the multi-select variant, the value must be an array of option values.
          */
-        "value"?: string | string[] | null;
+        "value": string | string[] | null;
     }
     interface IcSideNavigation {
         /**
           * The app title to be displayed. This is required, unless a slotted app title link is used.
          */
         "appTitle"?: string;
+        /**
+          * If `true`, the side navigation will close when a navigation item is clicked. This behaviour is only applicable on larger device sizes.
+         */
+        "closeOnNavItemClick"?: boolean;
         /**
           * If `true`, the icon and label will appear when side navigation is collapsed.
          */
@@ -2070,12 +2074,12 @@ export namespace Components {
     interface IcTextField {
         "ariaActiveDescendant"?: string;
         "ariaAutocomplete"?: IcAriaAutocompleteTypes;
-        "ariaExpanded": string | undefined;
+        "ariaExpanded": string | null;
         "ariaOwns"?: string;
         /**
           * The automatic capitalisation of the text value as it is entered/edited by the user. Available options: "off", "none", "on", "sentences", "words", "characters".
          */
-        "autocapitalize": string | undefined;
+        "autocapitalize": string;
         /**
           * The state of autocompletion the browser can apply on the text value.
          */
@@ -2087,40 +2091,40 @@ export namespace Components {
         /**
           * If `true`, the form control will have input focus when the page loads.
          */
-        "autofocus": boolean | undefined;
+        "autofocus": boolean;
         /**
           * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.
          */
-        "debounce"?: number;
+        "debounce": number;
         /**
           * If `true`, the disabled state will be set.
          */
-        "disabled"?: boolean;
+        "disabled": boolean;
         /**
           * Specify whether the text field fills the full width of the container. If `true`, this overrides the --input-width CSS variable.
          */
-        "fullWidth"?: boolean;
+        "fullWidth": boolean;
         /**
           * The helper text that will be displayed for additional field guidance.
          */
-        "helperText"?: string;
-        "hiddenInput"?: boolean;
+        "helperText": string;
+        "hiddenInput": boolean;
         /**
           * If `true`, the character count which is displayed when `maxCharacters` is set will be visually hidden.
          */
-        "hideCharCount"?: boolean;
+        "hideCharCount": boolean;
         /**
           * If `true`, the label will be hidden and the required label value will be applied as an aria-label.
          */
-        "hideLabel"?: boolean;
+        "hideLabel": boolean;
         /**
           * The ID for the input.
          */
-        "inputId"?: string;
+        "inputId": string;
         /**
           * A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
          */
-        "inputmode"?: IcTextFieldInputModes;
+        "inputmode": IcTextFieldInputModes;
         /**
           * The label for the input.
          */
@@ -2132,15 +2136,15 @@ export namespace Components {
         /**
           * The count of characters in the field. Will display a warning if the bound is reached. (NOTE: If the value of the text field has been set using the `value` prop, it will be truncated to this number of characters)
          */
-        "maxCharacters"?: number;
+        "maxCharacters": number;
         /**
           * The text to display as the warning message when the maximum number of characters (the `maxCharacters` prop value) is reached.
          */
-        "maxCharactersMessage"?: string;
+        "maxCharactersMessage": string;
         /**
           * The text to display as the error message when the maximum value (the `max` prop value) has been exceeded.
          */
-        "maxMessage"?: string;
+        "maxMessage": string;
         /**
           * The minimum number that can be accepted as a value, when `type` is `number` and `rows` is `1`. (NOTE: Ensure to include visual indication of min value in `helperText` or `label`)
          */
@@ -2148,40 +2152,40 @@ export namespace Components {
         /**
           * The minimum number of characters that can be entered in the field.
          */
-        "minCharacters"?: number;
+        "minCharacters": number;
         /**
           * The text to display as the error message when the minimum number of characters (the `minCharacters` prop value) has not been met.
          */
-        "minCharactersMessage"?: string;
+        "minCharactersMessage": string;
         /**
           * The text to display as the error message when the minimum value (the `min` prop value) has not been met.
          */
-        "minMessage"?: string;
+        "minMessage": string;
         /**
           * The name of the control, which is submitted with the form data.
          */
-        "name"?: string;
+        "name": string;
         /**
           * The placeholder value to be displayed.
          */
-        "placeholder"?: string;
+        "placeholder": string;
         /**
           * If `true`, the read only state will be set.
          */
-        "readonly"?: boolean;
+        "readonly": boolean;
         /**
           * If `true`, the input will require a value.
          */
-        "required"?: boolean;
+        "required": boolean;
         /**
           * If `true`, the multiline text area will be resizeable.
          */
-        "resize"?: boolean;
-        "role": string | undefined;
+        "resize": boolean;
+        "role": string | null;
         /**
           * The number of rows to transform the text field into a text area with a specific height.
          */
-        "rows"?: number;
+        "rows": number;
         /**
           * Sets focus on the native `input`.
          */
@@ -2189,33 +2193,33 @@ export namespace Components {
         /**
           * The size of the text field component.
          */
-        "size"?: IcSizesNoLarge;
+        "size": IcSizesNoLarge;
         /**
           * If `true`, the value of the text field will have its spelling and grammar checked.
          */
-        "spellcheck": boolean | undefined;
+        "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;
+        "theme": IcThemeMode;
+        "truncateValue": boolean;
         /**
           * The type of control to display. The default type is text.
          */
-        "type"?: IcTextFieldTypes;
+        "type": IcTextFieldTypes;
         /**
           * If `true`, the icon in input control will be displayed - only applies when validationStatus ='success'.
          */
-        "validationInline"?: boolean;
-        "validationInlineInternal"?: boolean;
+        "validationInline": boolean;
+        "validationInlineInternal": boolean;
         /**
           * The validation state - e.g. 'error' | 'warning' | 'success'.
          */
-        "validationStatus"?: IcInformationStatusOrEmpty;
+        "validationStatus": IcInformationStatusOrEmpty;
         /**
           * The text to display as the validation message.
          */
-        "validationText"?: string;
+        "validationText": string;
         /**
           * The value of the text field.
          */
@@ -2279,19 +2283,19 @@ export namespace Components {
         /**
           * If `true`, the toggle button will be in a checked state.
          */
-        "checked"?: boolean;
+        "checked": boolean;
         /**
           * If `true`, the toggle button will be in disabled state.
          */
-        "disabled"?: boolean;
+        "disabled": boolean;
         /**
           * If `true`, the toggle button will fill the width of the container.
          */
-        "fullWidth"?: boolean;
+        "fullWidth": boolean;
         /**
           * The placement of the icon in relation to the toggle button label.
          */
-        "iconPlacement"?: IcIconPlacementOptions;
+        "iconPlacement": IcIconPlacementOptions;
         /**
           * The label to display in the toggle button. This is required for the default variant of toggle buttons.
          */
@@ -2299,33 +2303,33 @@ export namespace Components {
         /**
           * If `true`, the toggle button will be in loading state.
          */
-        "loading"?: boolean;
+        "loading": boolean;
         /**
           * If `true`, the toggle button will display as black in the light theme, and white in dark theme.
          */
-        "monochrome"?: boolean;
+        "monochrome": boolean;
         /**
           * The size of the toggle button to be displayed.
          */
-        "size"?: IcSizes;
+        "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;
+        "theme": IcThemeMode;
         /**
           * The position of the tooltip in relation to the toggle button.
          */
-        "tooltipPlacement"?: IcButtonTooltipPlacement;
+        "tooltipPlacement": IcButtonTooltipPlacement;
         /**
           * The variant of the toggle button.
          */
-        "variant"?: "default" | "icon";
+        "variant": "default" | "icon";
     }
     interface IcToggleButtonGroup {
         /**
           * The accessible label of the toggle button group component to provide context for screen reader users.
          */
-        "accessibleLabel"?: string;
+        "accessibleLabel": string;
         /**
           * If `true`, the toggle button group will be set to the disabled state.
          */
@@ -2333,35 +2337,35 @@ export namespace Components {
         /**
           * If `true`, the toggle button group will fill the width of the container.
          */
-        "fullWidth"?: boolean;
+        "fullWidth": boolean;
         /**
           * The placement of the icons in relation to the toggle button labels.
          */
-        "iconPlacement"?: "left" | "right" | "top";
+        "iconPlacement"?: IcIconPlacementOptions;
         /**
           * If `true`, the toggle button group will be in loading state.
          */
-        "loading"?: boolean;
+        "loading": boolean;
         /**
           * If `true`, the toggle button group will display as black in the light theme, and white in dark theme.
          */
-        "monochrome"?: boolean;
+        "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`.
          */
-        "selectMethod"?: IcSelectMethodTypes;
+        "selectMethod": IcSelectMethodTypes;
         /**
           * Sets whether single or multiple options can be toggled. If `multi`, then the `selectMethod` is always `manual`.
          */
-        "selectType"?: IcSelectTypes;
+        "selectType": IcSelectTypes;
         /**
           * The size of the toggle buttons to be displayed. This does not affect the font size of the accessible label.
          */
-        "size"?: IcSizes;
+        "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;
+        "theme": IcThemeMode;
         /**
           * The position of the tooltip in relation to the toggle buttons.
          */
@@ -2421,35 +2425,35 @@ export namespace Components {
         /**
           * The alignment of the top navigation content.
          */
-        "contentAligned"?: IcAlignment;
+        "contentAligned": IcAlignment;
         /**
           * Can set a custom breakpoint for the top navigation to switch to mobile mode. Must be one of our specified breakpoints in px: `0`, `576`, `768`, `992`, `1200`.
          */
-        "customMobileBreakpoint"?: IcDeviceSizes;
+        "customMobileBreakpoint": IcDeviceSizes;
         /**
           * The URL to navigate to when the app title is clicked.
          */
-        "href"?: string;
+        "href": string;
         /**
           * If `true`, the flyout navigation menu on small devices will be contained by the parent element.
          */
-        "inline"?: boolean;
+        "inline": boolean;
         /**
           * The short title of the app to be displayed at small screen sizes in place of the app title.
          */
-        "shortAppTitle"?: string;
+        "shortAppTitle": string;
         /**
           * The status info to be displayed.
          */
-        "status"?: string;
+        "status": string;
         /**
           * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
          */
-        "theme"?: IcThemeMode;
+        "theme": IcThemeMode;
         /**
           * The version info to be displayed.
          */
-        "version"?: string;
+        "version": string;
     }
     interface IcTypography {
         /**
@@ -3287,6 +3291,7 @@ declare global {
         "icFocus": IcValueEventDetail;
         "icInput": IcValueEventDetail;
         "icKeydown": { event: KeyboardEvent };
+        "icScroll": any;
     }
     interface HTMLIcTextFieldElement extends Components.IcTextField, HTMLStencilElement {
         addEventListener<K extends keyof HTMLIcTextFieldElementEventMap>(type: K, listener: (this: HTMLIcTextFieldElement, ev: IcTextFieldCustomEvent<HTMLIcTextFieldElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -3797,7 +3802,7 @@ declare namespace LocalJSX {
          */
         "tooltipPlacement"?: IcButtonTooltipPlacement;
         /**
-          * If `true`, the secondary variant of button will have a transparent background rather than white.
+          * If `true`, the secondary & tertiary variants of button will have a transparent background when not hovered, pressed or loading.
          */
         "transparentBackground"?: boolean;
         /**
@@ -3923,7 +3928,7 @@ declare namespace LocalJSX {
         /**
           * The value for the checkbox.
          */
-        "value": string;
+        "value"?: string;
     }
     interface IcCheckboxGroup {
         /**
@@ -3981,7 +3986,7 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         /**
-          * The text in the dismiss button tooltip and aria label.
+          * The text in the dismiss button tooltip and aria label. Makes the user aware of the action resulting from clicking the 'Dismiss chip' button.
          */
         "dismissLabel"?: string;
         /**
@@ -4003,7 +4008,7 @@ declare namespace LocalJSX {
         /**
           * Sets the chip to the dark or light theme colors. "inherit" will set the color based on the system settings or ic-theme component. Setting the "customColor" prop will override this.
          */
-        "theme"?: "dark" | "light" | "inherit";
+        "theme"?: IcThemeMode;
         /**
           * If `true`, the outlined variant of chip will have a transparent background rather than the theme defined color.
          */
@@ -4393,7 +4398,7 @@ declare namespace LocalJSX {
     }
     interface IcLink {
         /**
-          * If `true`, the user can save the linked URL instead of navigating to it.
+          * If `true`, the user can save the linked URL instead of navigating to it. If the value is a string, it will be used as the filename for the download.
          */
         "download"?: string | boolean;
         /**
@@ -4479,7 +4484,7 @@ declare namespace LocalJSX {
         /**
           * The reference to an anchor element the menu will position itself from when rendered.
          */
-        "anchorEl": HTMLElement;
+        "anchorEl"?: HTMLElement;
         /**
           * If `true`, the menu will close when an option is selected.
          */
@@ -4491,7 +4496,7 @@ declare namespace LocalJSX {
         /**
           * The reference to the input element.
          */
-        "inputEl": HTMLElement;
+        "inputEl"?: HTMLElement;
         /**
           * The label for the input element.
          */
@@ -4947,7 +4952,7 @@ declare namespace LocalJSX {
         /**
           * The automatic capitalisation of the text value as it is entered/edited by the user. Available options: "off", "none", "on", "sentences", "words", "characters".
          */
-        "autocapitalize"?: string | undefined;
+        "autocapitalize"?: string;
         /**
           * The state of autocompletion the browser can apply on the text value.
          */
@@ -4959,7 +4964,7 @@ declare namespace LocalJSX {
         /**
           * If `true`, the form control will have input focus when the page loads.
          */
-        "autofocus"?: boolean | undefined;
+        "autofocus"?: boolean;
         /**
           * The number of characters until suggestions appear. The submit button will be disabled until the inputted value is equal to or greater than this number.
          */
@@ -5087,7 +5092,7 @@ declare namespace LocalJSX {
         /**
           * If `true`, the value of the search will have its spelling and grammar checked.
          */
-        "spellcheck"?: boolean | undefined;
+        "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.
          */
@@ -5282,6 +5287,10 @@ declare namespace LocalJSX {
           * The app title to be displayed. This is required, unless a slotted app title link is used.
          */
         "appTitle"?: string;
+        /**
+          * If `true`, the side navigation will close when a navigation item is clicked. This behaviour is only applicable on larger device sizes.
+         */
+        "closeOnNavItemClick"?: boolean;
         /**
           * If `true`, the icon and label will appear when side navigation is collapsed.
          */
@@ -5531,7 +5540,7 @@ declare namespace LocalJSX {
         /**
           * The automatic capitalisation of the text value as it is entered/edited by the user. Available options: "off", "none", "on", "sentences", "words", "characters".
          */
-        "autocapitalize"?: string | undefined;
+        "autocapitalize"?: string;
         /**
           * The state of autocompletion the browser can apply on the text value.
          */
@@ -5543,7 +5552,7 @@ declare namespace LocalJSX {
         /**
           * If `true`, the form control will have input focus when the page loads.
          */
-        "autofocus"?: boolean | undefined;
+        "autofocus"?: boolean;
         /**
           * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.
          */
@@ -5636,6 +5645,10 @@ declare namespace LocalJSX {
           * Emitted when a keydown event occurred.
          */
         "onIcKeydown"?: (event: IcTextFieldCustomEvent<{ event: KeyboardEvent }>) => void;
+        /**
+          * Emitted when the textarea variant is scrolled.
+         */
+        "onIcScroll"?: (event: IcTextFieldCustomEvent<any>) => void;
         /**
           * The placeholder value to be displayed.
          */
@@ -5663,7 +5676,7 @@ declare namespace LocalJSX {
         /**
           * If `true`, the value of the text field will have its spelling and grammar checked.
          */
-        "spellcheck"?: boolean | undefined;
+        "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.
          */
@@ -5815,7 +5828,7 @@ declare namespace LocalJSX {
         /**
           * The placement of the icons in relation to the toggle button labels.
          */
-        "iconPlacement"?: "left" | "right" | "top";
+        "iconPlacement"?: IcIconPlacementOptions;
         /**
           * If `true`, the toggle button group will be in loading state.
          */