@ukic/web-components 2.1.0-beta.1 → 2.1.0-beta.11

package/dist/types/components/ic-select/ic-select.d.ts

@@ -1,6 +1,7 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { IcInformationStatusOrEmpty, IcMenuOption, IcSearchMatchPositions } from "../../utils/types";
 import { IcValueEventDetail } from "../../interface";
+import { IcOptionSelectEventDetail } from "../ic-menu/ic-menu.types";
 export declare class Select {
   private nativeSelectElement;
   private customSelectElement;
@@ -10,92 +11,105 @@ export declare class Select {
   private clearButton;
   private inputId;
   private menuId;
+  private ungroupedOptions;
   private inheritedAttributes;
-  private debounce;
+  private debounceAria;
+  private hasSetDefaultValue;
+  private initialRender;
+  private initialOptionsEmpty;
+  private characterKeyPressTimer;
   /**
-   * Provide a label for the input.
+   * The label for the select.
    */
   label: string;
   /**
-   * Provide the possible selection options.
+   * The possible selection options.
    */
   options?: IcMenuOption[];
   /**
-   * Specify if the input requires a value.
+   * If `true`, the select will require a value.
    */
   required?: boolean;
   /**
-   * Hides the label and applies the required label value as an aria-label.
+   * If `true`, the label will be hidden and the required label value will be applied as an aria-label.
    */
   hideLabel?: boolean;
   /**
-   * Specify whether the input is disabled.
+   * If `true`, the disabled state will be set.
    */
   disabled?: boolean;
   /**
-   * Specify whether the input is read only.
+   * If `true`, the readonly state will be set.
    */
   readonly?: boolean;
   /**
-   * Provide a placeholder value to display.
+   * The placeholder value to be displayed.
    */
   placeholder?: string;
   /**
-   * Provide helper text to display additional field guidance.
+   * The helper text that will be displayed for additional field guidance.
    */
   helperText?: string;
   /**
-   * Specify whether small styling is to be applied to the element.
+   * If `true`, the small styling will be applied to the select.
    */
   small?: boolean;
   /**
-   * If true, then fill width of container.
+   * If `true`, the select element will fill the width of the container.
    */
   fullWidth: boolean;
   /**
-   * Provide a validation status.
+   * The validation status - e.g. 'error' | 'warning' | 'success'.
    */
   validationStatus?: IcInformationStatusOrEmpty;
   /**
-   * Provide the text to display as the validation message.
+   * The text to display as the validation message.
    */
   validationText?: string;
   /**
    * The value of the currently selected option.
    */
   value?: string;
+  /**
+   * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.
+   */
+  debounce?: number;
   /**
    * The name of the control, which is submitted with the form data.
    */
   name?: string;
   /**
-   * Display a button which clears the input when clicked. The button will always appear on the searchable select.
+   * 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;
   /**
-   * If true, the select can be typed in to filter options.
+   * If `true`, a searchable variant of the select will be displayed which can be typed in to filter options.
    */
   searchable?: boolean;
   /**
-   * If true, descriptions of options are included when filtering options in a searchable select.
+   * If `true`, descriptions of options will be included when filtering options in a searchable select. Only applies to built in filtering.
    */
   includeDescriptionsInSearch?: boolean;
   /**
-   * If true, group titles of grouped options are included when filtering options in a searchable select.
+   * 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;
   /**
-   * Whether the search string of the searchable select should match the start of or anywhere in the options.
+   * 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;
   /**
-   * Number of characters until suggestions appear for a searchable select.
+   * @deprecated This prop should not be used anymore.
    */
   charactersUntilSuggestions?: number;
   /**
-   * Provide text for empty results list
+   * The text displayed when there are no options in the option list.
    */
   emptyOptionListText: string;
+  /**
+   * Specify whether to disable the built in filtering for a searchable variant. For example, if options will already be filtered from external source.
+   */
+  disableFilter?: boolean;
   open: boolean;
   clearButtonFocused: boolean;
   searchableSelectInputValue: string;
@@ -103,26 +117,49 @@ export declare class Select {
   ariaActiveDescendant: string;
   noOptions: IcMenuOption[];
   initialValue: string;
+  currDebounce: number;
+  currValue: string;
+  debounceIcChange: number;
+  pressedCharacters: string;
   watchOptionsHandler(): void;
+  debounceChangedHandler(newValue: number): void;
+  valueChangedHandler(): void;
   /**
-   * Emitted when a value is selected.
+   * Emitted when the value changes.
    */
   icChange: EventEmitter<IcValueEventDetail>;
   /**
-   * Emitted when select has focus.
+   * Emitted when clear button clicked.
+   */
+  icClear: EventEmitter<void>;
+  /**
+   * Emitted when select gains focus.
    */
   icFocus: EventEmitter<void>;
   /**
-   * Emitted when select has blur.
+   * Emitted when select loses focus.
    */
   icBlur: EventEmitter<void>;
+  /**
+   * Emitted when option is highlighted within the menu.
+   * Highlighting a menu item will trigger an `icChange/onIcChange` due to the value being updated.
+   */
+  icOptionSelect: EventEmitter<IcOptionSelectEventDetail>;
+  /**
+   * Emitted when a keyboard input occurred.
+   */
+  icInput: EventEmitter<IcValueEventDetail>;
   host: HTMLIcSelectElement;
   /**
    * Sets focus on the input box.
    */
   setFocus(): Promise<void>;
+  private updateOnChangeDebounce;
+  private emitIcChange;
+  private emitImmediateIcChange;
   private isMenuEnabled;
   private setOptionsValuesFromLabels;
+  private setUngroupedOptions;
   private setTextColor;
   private setMenuChange;
   private getLabelFromValue;
@@ -131,22 +168,30 @@ export declare class Select {
   private handleNativeSelectChange;
   private handleCustomSelectChange;
   private handleMenuChange;
+  private handleMenuKeyPress;
   private handleFocusIndicatorDisplay;
   private handleMouseDown;
+  private isExternalFiltering;
   private handleClick;
   private handleExpandIconMouseDown;
   private handleClear;
+  private handleCharacterKeyDown;
+  private handleNativeSelectKeyDown;
   private handleKeyDown;
   private handleClearButtonFocus;
   private handleClearButtonBlur;
+  private handleFilter;
   private handleSearchableSelectInput;
   private updateSearchableSelectResultAriaLive;
   private debounceAriaLiveUpdate;
+  private getDefaultValue;
+  private setDefaultValue;
   private onFocus;
   private onBlur;
   private handleFormReset;
   componentWillLoad(): void;
   componentDidRender(): void;
+  componentWillUpdate(): void;
   componentDidLoad(): void;
   disconnectedCallback(): void;
   render(): any;

package/dist/types/components/ic-side-navigation/ic-side-navigation-test-examples.d.ts

@@ -3,3 +3,4 @@ export declare const icSideNavigationExpanded = "\n  <div style=\"display:flex;
 export declare const icSideNavigationGroupedNav = "\n  <div style=\"display:flex; height: 100%;\">\n    <ic-side-navigation\n      app-title=\"ACME\"\n      version=\"v0.0.0\"\n      status=\"BETA\"\n    >\n      <svg\n        slot=\"app-icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        fill=\"#000000\"\n      >\n        <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n        <path\n          d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"\n        />\n      </svg>\n      <ic-navigation-item slot=\"primary-navigation\" href=\"/\" label=\"Home\">\n        <svg\n          slot=\"icon\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n            fill=\"currentColor\"\n          />\n        </svg>\n      </ic-navigation-item>\n      <ic-navigation-group\n      slot=\"primary-navigation\"\n      label=\"Second navigation group\"\n      expandable=\"true\"\n    >\n      <ic-navigation-item label=\"Different navigation\" href=\"/\">\n        <svg\n          slot=\"icon\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M23 8C23 9.1 22.1 10 21 10C20.82 10 20.65 9.98 20.49 9.93L16.93 13.48C16.98 13.64 17 13.82 17 14C17 15.1 16.1 16 15 16C13.9 16 13 15.1 13 14C13 13.82 13.02 13.64 13.07 13.48L10.52 10.93C10.36 10.98 10.18 11 10 11C9.82 11 9.64 10.98 9.48 10.93L4.93 15.49C4.98 15.65 5 15.82 5 16C5 17.1 4.1 18 3 18C1.9 18 1 17.1 1 16C1 14.9 1.9 14 3 14C3.18 14 3.35 14.02 3.51 14.07L8.07 9.52C8.02 9.36 8 9.18 8 9C8 7.9 8.9 7 10 7C11.1 7 12 7.9 12 9C12 9.18 11.98 9.36 11.93 9.52L14.48 12.07C14.64 12.02 14.82 12 15 12C15.18 12 15.36 12.02 15.52 12.07L19.07 8.51C19.02 8.35 19 8.18 19 8C19 6.9 19.9 6 21 6C22.1 6 23 6.9 23 8Z\"\n            fill=\"currentColor\"\n          />\n        </svg>\n      </ic-navigation-item>\n    </ic-navigation-group>\n    </ic-side-navigation>\n    <div\n      class=\"content-wrapper\"\n      style=\"display:flex; flex-direction: column;\"\n    >\n      <main style=\"flex: 1 0 auto\">This is the content</main>\n      <footer>Footer</footer>\n    </div>\n  </div>";
 export declare const icSideNavigationStatic = "\n  <div style=\"display:flex; height: 100%;\">\n    <ic-side-navigation\n      app-title=\"ACME\"\n      version=\"v0.0.0\"\n      status=\"BETA\"\n      expanded=\"true\"\n      static=\"true\"\n    >\n      <svg\n        slot=\"app-icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        fill=\"#000000\"\n      >\n        <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n        <path\n          d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"\n        />\n      </svg>\n      <ic-navigation-item slot=\"primary-navigation\" href=\"/\" label=\"Home\">\n        <svg\n          slot=\"icon\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n            fill=\"currentColor\"\n          />\n        </svg>\n      </ic-navigation-item>\n      <ic-navigation-item slot=\"secondary-navigation\" href=\"/\" label=\"a11y\">\n        <svg\n          slot=\"icon\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2ZM21 9H15V22H13V16H11V22H9V9H3V7H21V9Z\"\n            fill=\"currentColor\"\n          />\n        </svg>\n      </ic-navigation-item>\n    </ic-side-navigation>\n    <div\n      class=\"content-wrapper\"\n      style=\"display:flex; flex-direction: column;\"\n    >\n      <main style=\"flex: 1 0 auto\">This is the content</main>\n      <footer>Footer</footer>\n    </div>\n  </div>";
 export declare const icSideNavigationTheme = "\n  <ic-theme color=\"rgb(131, 166, 195)\"></ic-theme>\n  <div style=\"display:flex; height: 100%;\">\n    <ic-side-navigation\n      app-title=\"ACME\"\n      version=\"v0.0.0\"\n      status=\"BETA\"\n    >\n      <svg\n        slot=\"app-icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        fill=\"#000000\"\n      >\n        <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n        <path\n          d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"\n        />\n      </svg>\n      <ic-navigation-item slot=\"primary-navigation\" href=\"/\" label=\"Home\">\n        <svg\n          slot=\"icon\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n            fill=\"currentColor\"\n          />\n        </svg>\n      </ic-navigation-item>\n      <ic-navigation-item slot=\"secondary-navigation\" href=\"/\" label=\"a11y\">\n        <svg\n          slot=\"icon\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2ZM21 9H15V22H13V16H11V22H9V9H3V7H21V9Z\"\n            fill=\"currentColor\"\n          />\n        </svg>\n      </ic-navigation-item>\n    </ic-side-navigation>\n    <div\n      class=\"content-wrapper\"\n      style=\"display:flex; flex-direction: column;\"\n    >\n      <main style=\"flex: 1 0 auto\">This is the content</main>\n      <footer>Footer</footer>\n    </div>\n  </div>";
+export declare const icSideNavigationSlottedExpanded = "\n    <ic-side-navigation app-title=\"Application Name\" version=\"v0.0.0\" status=\"BETA\" expanded=\"true\">\n      <svg\n        slot=\"app-icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        fill=\"#000000\"\n      >\n        <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n        <path\n          d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"\n        />\n      </svg>\n      <ic-navigation-item slot=\"primary-navigation\">\n        <a\n          slot=\"navigation-item\"\n          class=\"active\"\n          href=\"/child-item-2\"\n          aria-label=\"Daily Tippers\"\n        >\n          <svg\n            slot=\"icon\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n              fill=\"currentColor\"\n            ></path>\n          </svg>\n          Daily Tippers\n        </a>\n      </ic-navigation-item>\n      <ic-navigation-group\n        slot=\"primary-navigation\"\n        label=\"Second navigation group\"\n        expandable=\"true\"\n      >\n        <ic-navigation-item>\n          <a\n            slot=\"navigation-item\"\n            href=\"/child-item-2\"\n            aria-label=\"Daily Tippers\"\n          >\n            <svg\n              slot=\"icon\"\n              width=\"24\"\n              height=\"24\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n                fill=\"currentColor\"\n              ></path>\n            </svg>\n            Daily Tippers\n          </a>\n        </ic-navigation-item>\n      </ic-navigation-group>\n      <ic-navigation-item slot=\"secondary-navigation\">\n        <a\n          slot=\"navigation-item\"\n          href=\"/bar\"\n          aria-label=\"bar\"\n        >\n          <svg\n            slot=\"icon\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n              fill=\"currentColor\"\n            ></path>\n          </svg>\n          bar\n        </a>\n      </ic-navigation-item>\n    </ic-side-navigation>\n";

package/dist/types/components/ic-side-navigation/ic-side-navigation.d.ts

@@ -1,45 +1,46 @@
 import { IcThemeForeground } from "../../utils/types";
 /**
- * @slot app-icon - Content will be rendered adjacent to the application title at the very top of the side navigation
- * @slot primary-navigation - Content will be rendered at the top of the side navigation
- * @slot secondary-navigation - Content will be rendered at the bottom of the side navigation
+ * @slot app-icon - Content will be rendered adjacent to the app title at the very top of the side navigation.
+ * @slot app-title - Handle routing by nesting a route in the app title.
+ * @slot primary-navigation - Content will be rendered at the top of the side navigation.
+ * @slot secondary-navigation - Content will be rendered at the bottom of the side navigation.
  */
 export declare class SideNavigation {
   el: HTMLIcSideNavigationElement;
   /**
-   * Title to display.
+   * The app title to be displayed. This is required, unless a slotted app title link is used.
    */
   appTitle: string;
   /**
-   * Status of application
+   * The status of the app to be displayed.
    */
   status: string;
   /**
-   * Version of application
+   * The version of the app to be displayed.
    */
   version: string;
   /**
-   * If true, the ic-side-navigation will load in an expanded state
+   * If `true`, the side navigation will load in an expanded state.
    */
   expanded: boolean;
   /**
-   * Set application title link
+   * The URL that the app title link points to.
    */
   href: string;
   /**
-   * If true, the menu expand button is removed (PLEASE NOTE: This takes effect on screen sizes 992px and above)
+   * If `true`, the menu expand button will be removed (PLEASE NOTE: This takes effect on screen sizes 992px and above).
    */
   static: boolean;
   /**
-   * If true, the icon and label will appear when side navigation is collapsed
+   * If `true`, the icon and label will appear when side navigation is collapsed.
    */
   collapsedIconLabels: boolean;
   /**
-   * If true, side navigation will be contained by parent element
+   * @internal If `true`, side navigation will be contained by its parent element.
    */
   inline: boolean;
   /**
-   * If true, disable automatic parent wrapper styling
+   * If `true`, automatic parent wrapper styling will be disabled.
    */
   disableAutoParentStyling: boolean;
   foregroundColor: IcThemeForeground;

package/dist/types/components/ic-skeleton/ic-skeleton.d.ts

@@ -2,11 +2,11 @@ import { IcSkeletonVariants } from "./ic-skeleton.types";
 export declare class Skeleton {
   el: HTMLIcSkeletonElement;
   /**
-   * The variant of the skeleton that will be displayed
+   * The variant of the skeleton that will be displayed.
    */
   variant?: IcSkeletonVariants;
   /**
-   * Set the skeleton to the light variant
+   * If `true`, the skeleton will be set to the light variant.
    */
   light?: boolean;
   hasChild: boolean;

package/dist/types/components/ic-status-tag/ic-status-tag.d.ts

@@ -13,9 +13,13 @@ export declare class StatusTag {
    */
   appearance?: IcStatusTagAppearance;
   /**
-   * The size of the status tag.
+   * If `true`, the small styling will be applied to the status tag.
    */
   small?: boolean;
+  /**
+   * If `true`, role='status' is added to the component and it will act as an 'aria-live' region.
+   */
+  announced?: boolean;
   componentDidLoad(): void;
   render(): any;
 }

package/dist/types/components/ic-step/ic-step.d.ts

@@ -1,25 +1,54 @@
-import { IcStepTypes } from "./ic-step.types";
+import { IcStepVariants, IcStepStatuses, IcStepTypes } from "./ic-step.types";
 export declare class Step {
   el: HTMLIcStepElement;
   /**
-   * State of step
+   * @internal The variant of the step. This is managed by ic-stepper.
    */
-  stepType?: IcStepTypes;
+  variant: IcStepVariants;
   /**
-   * Name of step
+   * The title of the step within the stepper.
    */
   stepTitle?: string;
   /**
-   * Additional information about step
+   * Additional information about the step. Use this prop to override the default step status messaging displayed when selecting a step type or step status.
    */
   stepSubtitle?: string;
   /**
-   * @internal The step number, managed by ic-stepper
+   * The status of the step. Use this prop to display a status message on the step if it is required or optional.
+   */
+  stepStatus?: IcStepStatuses;
+  /**
+   * The state of the step within the stepper.
+   */
+  stepType?: IcStepTypes;
+  /**
+   * @internal If `true`, and a compact stepper  is being used, the current step will be the only step in view.
+   */
+  current?: boolean;
+  /**
+   * @internal If a compact stepper is being used, this sets the styling of the step.
+   */
+  compactStepStyling?: IcStepTypes;
+  /**
+   * @internal The step number, managed by ic-stepper.
    */
   stepNum?: number;
   /**
-   * @internal Final step in series flag, managed by ic-stepper
+   * @internal If `true`, the step will be marked as being the last one in the series. This is managed by ic-stepper.
+   */
+  lastStep: boolean;
+  /**
+   * @internal The step number of the final step. This is managed by ic-stepper.
+   */
+  lastStepNum?: number;
+  /**
+   * @internal The name of the next step. This is managed by ic-stepper.
+   */
+  nextStepTitle?: string;
+  /**
+   * @internal The progress of the next step, calculated by dividing the current step number by the total number of steps. This is managed by ic-stepper.
    */
-  lastStep?: boolean;
+  progress?: number;
+  stepTypeChangeHandler(): void;
   render(): any;
 }

package/dist/types/components/ic-step/ic-step.types.d.ts

@@ -1 +1,3 @@
+export declare type IcStepVariants = "default" | "compact";
+export declare type IcStepStatuses = "optional" | "required";
 export declare type IcStepTypes = "active" | "current" | "completed" | "disabled";

package/dist/types/components/ic-stepper/ic-stepper-test-examples.d.ts

@@ -0,0 +1,4 @@
+export declare const defaultStepper = "\n    <ic-stepper>\n        <ic-step step-title=\"First\"></ic-step>\n        <ic-step\n        step-title=\"Second With a Very Long Title\"\n        step-subtitle=\"Optional Subtitle\"\n        step-type=\"current\"\n        ></ic-step>\n        <ic-step step-title=\"Third\" step-type=\"disabled\"></ic-step>\n        <ic-step\n        step-title=\"Fourth\"\n        step-subtitle=\"Optional Subtitle\"\n        step-type=\"completed\"\n        ></ic-step>\n    </ic-stepper>";
+export declare const customConnectorWidthStepper = "\n    <ic-stepper aligned=\"left\" connector-width=\"150\">\n        <ic-step step-title=\"First\"></ic-step>\n        <ic-step\n        step-title=\"Second With a Very Long Title\"\n        step-subtitle=\"Optional Subtitle\"\n        step-type=\"current\"\n        ></ic-step>\n        <ic-step step-title=\"Third\" step-type=\"disabled\"></ic-step>\n        <ic-step\n        step-title=\"Fourth\"\n        step-subtitle=\"Optional Subtitle\"\n        step-type=\"completed\"\n        ></ic-step>\n    </ic-stepper>";
+export declare const invalidConnectorWidthStepper = "\n    <ic-stepper aligned=\"left\" connector-width=\"96\">\n        <ic-step step-title=\"First\"></ic-step>\n        <ic-step\n        step-title=\"Second With a Very Long Title\"\n        step-subtitle=\"Optional Subtitle\"\n        step-type=\"current\"\n        ></ic-step>\n        <ic-step step-title=\"Third\" step-type=\"disabled\"></ic-step>\n        <ic-step\n        step-title=\"Fourth\"\n        step-subtitle=\"Optional Subtitle\"\n        step-type=\"completed\"\n        ></ic-step>\n    </ic-stepper>";
+export declare const compactStepper = "\n    <ic-stepper variant=\"compact\" id=\"custom-compact-stepper\">\n        <ic-step \n        step-title=\"First\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Second With a Very Long Title\"\n          step-subtitle=\"Optional subtitle that is long and should wrap\"\n          current\n          step-type=\"current\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Third\"\n          step-type=\"disabled\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Fourth title that is long and should wrap\"\n          step-subtitle=\"Optional Subtitle\"\n          step-type=\"completed\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Fifth and final step\"\n          step-subtitle=\"Optional Subtitle\"\n          icon\n          step-status=\"optional\"\n          step-type=\"completed\"\n        ></ic-step>\n      </ic-stepper>";

package/dist/types/components/ic-stepper/ic-stepper.d.ts

@@ -1,25 +1,42 @@
 import { IcStepperAlignment } from "./ic-stepper.types";
-export declare class IcStepper {
+import { IcStepTypes, IcStepVariants } from "../ic-step/ic-step.types";
+export declare class Stepper {
   el: HTMLIcStepperElement;
   /**
-   * How the stepper should be aligned in its container.
+   * The alignment of the default stepper within its container.
    */
   aligned?: IcStepperAlignment;
+  /**
+   * The variant of the stepper.
+   */
+  variant?: IcStepVariants;
   /**
    * The length of the connnector between each step in pixels. Minimum length is 100px.
    */
   connectorWidth?: number;
+  /**
+   * If `true`, the information about each step, i.e. step title, step subtitle and step status, will be hidden on all default steps. The information about each step will still be visible in the compact variant of the stepper.
+   */
+  hideStepInfo?: boolean;
   stepperWidth: number;
   lastStepWidth: number;
+  stepTypes: IcStepTypes[];
+  alignedFullWidth: boolean;
+  autoSetStepTitles: boolean;
+  variantOverride?: boolean;
+  noOfResizes?: number;
   private steps;
+  private stepsWithStepTitles;
   private resizeObserver;
-  /**
-   * Get all steps currently within this stepper
-   */
   private getChildren;
+  private checkStepTitles;
+  private setStepTypes;
+  private setStepperWidth;
   private initialiseStepStates;
+  private overrideVariant;
+  private resizeObserverCallback;
   private runResizeObserver;
-  private setStepperWidth;
+  componentWillLoad(): void;
   componentDidLoad(): void;
   disconnectedCallback(): void;
   render(): any;

package/dist/types/components/ic-switch/ic-switch.d.ts

@@ -7,27 +7,27 @@ export declare class Switch {
   private inputId;
   el: HTMLIcSwitchElement;
   /**
-   * Applies an aria-label to the component, for when no visual 'name' is provided.
+   * The aria-label applied to the switch when no visual 'name' is provided.
    */
   label: string;
   /**
-   * Hides the label and applies the required label value as an aria-label.
+   * If `true`, the label will be hidden and the required label value will be applied as an aria-label.
    */
   hideLabel?: boolean;
   /**
-   * Provide helper text to display additional field guidance.
+   * The helper text that will be displayed for additional field guidance.
    */
   helperText?: string;
   /**
-   * If true, the component is checked.
+   * If `true`, the switch will display as checked.
    */
   checked?: boolean;
   /**
-   * If true, the component reduces in size to the small state.
+   * If `true`, the small styling will be applied to the switch.
    */
   small?: boolean;
   /**
-   * If true, the component is not interactive.
+   * If `true`, the disabled state will be set.
    */
   disabled?: boolean;
   /**
@@ -35,7 +35,7 @@ export declare class Switch {
    */
   name?: string;
   /**
-   * If true, the component will render the On/Off state text.
+   * If `true`, the switch will render the On/Off state text.
    */
   showState?: boolean;
   /**
@@ -64,6 +64,10 @@ export declare class Switch {
   private onFocus;
   private onBlur;
   private handleFormReset;
+  /**
+   * Sets focus on the switch.
+   */
+  setFocus(): Promise<void>;
   componentWillLoad(): void;
   componentDidLoad(): void;
   disconnectedCallback(): void;

package/dist/types/components/ic-tab/ic-tab.d.ts

@@ -6,13 +6,13 @@ import { IcThemeForegroundNoDefault } from "../../utils/types";
  */
 export declare class Tab {
   host: HTMLIcTabElement;
-  /** @internal Provide a unique context if using multiple tabs inside one another i.e. rendering another tabs inside a tab panel. */
+  /** @internal The unique context needed if using multiple tabs inside one another i.e. rendering another tabs inside a tab panel. */
   contextId?: string;
   /**
-   * Disables the tab.
+   * If `true`, the disabled state will be set.
    */
   disabled?: boolean;
-  /** @internal Will display a selected indicator and set tabIndex. */
+  /** @internal If `true`, the tab will display with a selected indicator and tabIndex will be set. */
   selected?: boolean;
   /** @internal The shared ID between panel and tab. */
   tabId?: string;
@@ -21,11 +21,11 @@ export declare class Tab {
   /** @internal Determines whether the light or dark variant of the tabs should be displayed. */
   appearance?: IcThemeForegroundNoDefault;
   /**
-   * Called when a tab is selected.
+   * @internal Emitted when a tab is selected.
    */
   tabClick: EventEmitter<IcTabClickEventDetail>;
   /**
-   * @internal Called when a tab is focussed.
+   * @internal Emitted when a tab is focussed.
    */
   tabFocus: EventEmitter<IcTabClickEventDetail>;
   private isInitialRender;
@@ -33,6 +33,10 @@ export declare class Tab {
   private handleClick;
   private handleFocus;
   private handleMouseDown;
+  /**
+   * Sets focus on the tab.
+   */
+  setFocus(): Promise<void>;
   componentDidUpdate(): void;
   render(): any;
 }

package/dist/types/components/ic-tab-context/ic-tab-context.d.ts

@@ -4,7 +4,7 @@ import { IcTabClickEventDetail, IcTabSelectEventDetail } from "../ic-tab/ic-tab.
 export declare class TabContext {
   host: HTMLIcTabContextElement;
   /**
-   * Provide a unique context if using multiple tabs inside one another i.e. rendering another set of tabs inside a tab panel.
+   * The unique context needed if using multiple tabs inside one another i.e. rendering another set of tabs inside a tab panel.
    */
   contextId?: string;
   /**
@@ -12,19 +12,23 @@ export declare class TabContext {
    */
   activationType?: IcActivationTypes;
   /**
-   * Allows the user to control the selected tab. Must be used alongside the tabSelect event to manage tab selection.
+   * The selected tab to be controlled by the user. Must be used alongside the icTabSelect event to manage tab selection.
    */
   selectedTabIndex?: number;
   /**
-   * Determines whether the light or dark variant of the tabs should be displayed.
+   * The appearance of the tab context, e.g dark, or light.
    */
   appearance?: IcThemeForegroundNoDefault;
   selectedTab: number | null;
   updateSelectedTab(newValue: number): void;
   /**
-   * Emitted when a user selects a tab.
+   * @deprecated This event should not be used anymore. Use icTabSelect instead.
    */
   tabSelect: EventEmitter<IcTabSelectEventDetail>;
+  /**
+   * Emitted when a user selects a tab.
+   */
+  icTabSelect: EventEmitter<IcTabSelectEventDetail>;
   tabClickHandler(event: CustomEvent<IcTabClickEventDetail>): void;
   private controlledMode;
   private tabs;

package/dist/types/components/ic-tab-group/ic-tab-group.d.ts

@@ -1,50 +1,22 @@
-import { IcTabClickEventDetail } from "../ic-tab/ic-tab.types";
 import { IcThemeForegroundNoDefault } from "../../utils/types";
 export declare class TabGroup {
   host: HTMLIcTabGroupElement;
   /**
-   * Provide a unique context if using multiple tabs inside one another i.e. rendering another set of tabs inside a tab panel.
+   * The unique context needed if using multiple tabs inside one another i.e. rendering another set of tabs inside a tab panel.
    */
   contextId?: string;
   /**
-   * Use when tabs and tab panels are to be positioned separately.
+   * If `true`, the tabs and tab panels will be positioned separately.
    */
   inline?: boolean;
   /**
-   * Provide a label to describe the purpose of the set of tabs to screen reader users.
+   * The label to describe the purpose of the set of tabs to screen reader users.
    */
   label: string;
-  /** @internal Determines whether the light or dark variant of the tabs should be displayed. */
-  appearance?: IcThemeForegroundNoDefault;
-  firstTabVisible: boolean;
-  lastTabVisible: boolean;
-  tabOverflow: boolean;
-  private tabs;
-  private tabOffsets;
-  private tabGroupEl;
-  private splitterEl;
-  private resizeObserver;
-  private isScrolling;
-  private scrollDelay;
-  private buttonStateSet;
   /**
-   * @internal if tab side scrolling enabled, scrolls the specified tab into view
+   * @internal The appearance of the tab group, e.g dark, or light.
    */
-  scrollTabIntoView(tabNumber: number): Promise<void>;
-  tabFocusHandler(event: CustomEvent<IcTabClickEventDetail>): void;
-  private resizeObserverCallback;
-  private runResizeObserver;
-  private scrollLeft;
-  private scrollRight;
-  private longScrollRight;
-  private longScrollLeft;
-  private leftArrowMouseDownHandler;
-  private rightArrowMouseDownHandler;
-  private arrowMouseUpHandler;
-  private getCurrentLeftTab;
-  private scrollHandler;
-  private scrollStopped;
+  appearance?: IcThemeForegroundNoDefault;
   componentDidLoad(): void;
-  disconnectedCallback(): void;
   render(): any;
 }