@ukic/web-components 2.1.0-beta.9 → 2.2.0

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

@@ -6,19 +6,30 @@ import { IcThemeForeground } from "../../utils/types";
  * @slot secondary-navigation - Content will be rendered at the bottom of the side navigation.
  */
 export declare class SideNavigation {
+  private ANIMATION_DURATION;
+  private IC_NAVIGATION_ITEM;
+  private resizeObserver;
+  private COLLAPSED_ICON_LABELS_END;
+  private COLLAPSED_ICON_LABELS_START;
   el: HTMLIcSideNavigationElement;
+  deviceSize: number;
+  deviceSizeAppTitle: number;
+  foregroundColor: IcThemeForeground;
+  hasSecondaryNavigation: boolean;
+  menuExpanded: boolean;
+  menuOpen: boolean;
   /**
    * The app title to be displayed. This is required, unless a slotted app title link is used.
    */
   appTitle: string;
   /**
-   * The status of the app to be displayed.
+   * If `true`, the icon and label will appear when side navigation is collapsed.
    */
-  status: string;
+  collapsedIconLabels: boolean;
   /**
-   * The version of the app to be displayed.
+   * If `true`, automatic parent wrapper styling will be disabled.
    */
-  version: string;
+  disableAutoParentStyling: boolean;
   /**
    * If `true`, the side navigation will load in an expanded state.
    */
@@ -28,28 +39,24 @@ export declare class SideNavigation {
    */
   href: string;
   /**
-   * If `true`, the menu expand button will be removed (PLEASE NOTE: This takes effect on screen sizes 992px and above).
+   * @internal If `true`, side navigation will be contained by its parent element.
    */
-  static: boolean;
+  inline: boolean;
   /**
-   * If `true`, the icon and label will appear when side navigation is collapsed.
+   * If `true`, the menu expand button will be removed (PLEASE NOTE: This takes effect on screen sizes 992px and above).
    */
-  collapsedIconLabels: boolean;
+  static: boolean;
   /**
-   * @internal If `true`, side navigation will be contained by its parent element.
+   * The status of the app to be displayed.
    */
-  inline: boolean;
+  status: string;
   /**
-   * If `true`, automatic parent wrapper styling will be disabled.
+   * The version of the app to be displayed.
    */
-  disableAutoParentStyling: boolean;
-  foregroundColor: IcThemeForeground;
-  menuOpen: boolean;
-  menuExpanded: boolean;
-  deviceSize: number;
-  deviceSizeAppTitle: number;
-  hasSecondaryNavigation: boolean;
-  private ANIMATION_DURATION;
+  version: string;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  disconnectedCallback(): void;
   themeChangeHandler(ev: CustomEvent): void;
   private emitSideNavigationExpanded;
   private toggleMenu;
@@ -61,11 +68,14 @@ export declare class SideNavigation {
    * In order to style nested slotted elements (e.g. using React Router components), this method
    * rearranges the a tag and labels and adds inline styling expand/collaped animations as external CSS classes are not
    * do not take affect.
-   * @param menuExpanded boolean - true or false depending on seide navigation state
+   * @param menuExpanded boolean - true or false depending on side navigation state
    */
   private arrangeSlottedNavigationItem;
   private styleSlottedCollapsedIconLabels;
+  private setExpandedButtonHeight;
   private styleSlottedIconLabels;
+  private transitionHandler;
+  private transitionEndHandler;
   private animateCollapsedIconLabels;
   private paddingIconWidth;
   private displayTooltipWithExpandedLongLabel;
@@ -77,14 +87,10 @@ export declare class SideNavigation {
    */
   private setParentPaddingTop;
   private setParentPaddingLeft;
-  private resizeObserver;
   private resizeObserverCallback;
   private runResizeObserver;
   private setCollapsedIconLabels;
   private styleSlottedCollapsedIconLabel;
   private renderTopBar;
-  componentWillLoad(): void;
-  componentDidLoad(): void;
-  disconnectedCallback(): void;
   render(): any;
 }

package/dist/types/components/ic-side-navigation/{ic-side-navigation-test-examples.d.ts → test/basic/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-skeleton/ic-skeleton.d.ts

@@ -1,18 +1,18 @@
 import { IcSkeletonVariants } from "./ic-skeleton.types";
 export declare class Skeleton {
   el: HTMLIcSkeletonElement;
-  /**
-   * The variant of the skeleton that will be displayed.
-   */
-  variant?: IcSkeletonVariants;
+  default: boolean;
+  hasChild: boolean;
+  heightOnly: boolean;
+  widthOnly: boolean;
   /**
    * If `true`, the skeleton will be set to the light variant.
    */
   light?: boolean;
-  hasChild: boolean;
-  default: boolean;
-  heightOnly: boolean;
-  widthOnly: boolean;
+  /**
+   * The variant of the skeleton that will be displayed.
+   */
+  variant?: IcSkeletonVariants;
   componentWillLoad(): void;
   render(): any;
 }

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

@@ -1 +1 @@
-export declare type IcSkeletonVariants = "rectangle" | "text" | "circle";
+export type IcSkeletonVariants = "rectangle" | "text" | "circle";

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

@@ -1,25 +1,25 @@
 import { IcStatusTagStatuses, IcStatusTagAppearance } from "./ic-status-tag.types";
 export declare class StatusTag {
   /**
-   * The content rendered within the status tag.
-   */
-  label: string;
-  /**
-   * The colour of the status tag.
+   * If `true`, role='status' is added to the component and it will act as an 'aria-live' region.
    */
-  status?: IcStatusTagStatuses;
+  announced?: boolean;
   /**
    * The emphasis of the status tag.
    */
   appearance?: IcStatusTagAppearance;
+  /**
+   * The content rendered within the status tag.
+   */
+  label: string;
   /**
    * 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.
+   * The colour of the status tag.
    */
-  announced?: boolean;
+  status?: IcStatusTagStatuses;
   componentDidLoad(): void;
   render(): any;
 }

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

@@ -1,2 +1,2 @@
-export declare type IcStatusTagStatuses = "neutral" | "success" | "warning" | "danger";
-export declare type IcStatusTagAppearance = "filled" | "outlined";
+export type IcStatusTagStatuses = "neutral" | "success" | "warning" | "danger";
+export type IcStatusTagAppearance = "filled" | "outlined";

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

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

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

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

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

@@ -1,15 +1,21 @@
 import { IcStepperAlignment } from "./ic-stepper.types";
 import { IcStepTypes, IcStepVariants } from "../ic-step/ic-step.types";
 export declare class Stepper {
+  private resizeObserver;
+  private steps;
+  private stepsWithStepTitles;
   el: HTMLIcStepperElement;
+  alignedFullWidth: boolean;
+  autoSetStepTitles: boolean;
+  lastStepWidth: number;
+  noOfResizes?: number;
+  stepperWidth: number;
+  stepTypes: IcStepTypes[];
+  variantOverride?: boolean;
   /**
    * 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.
    */
@@ -18,16 +24,13 @@ export declare class Stepper {
    * 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;
+  /**
+   * The variant of the stepper.
+   */
+  variant?: IcStepVariants;
+  disconnectedCallback(): void;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
   private getChildren;
   private checkStepTitles;
   private setStepTypes;
@@ -36,8 +39,5 @@ export declare class Stepper {
   private overrideVariant;
   private resizeObserverCallback;
   private runResizeObserver;
-  componentWillLoad(): void;
-  componentDidLoad(): void;
-  disconnectedCallback(): void;
   render(): any;
 }

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

@@ -1 +1 @@
-export declare type IcStepperAlignment = "left" | "full-width";
+export type IcStepperAlignment = "left" | "full-width";

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

@@ -6,30 +6,28 @@ import { IcSwitchChangeEventDetail } from "./ic-switch.types";
 export declare class Switch {
   private inputId;
   el: HTMLIcSwitchElement;
+  checkedState: boolean;
+  initiallyChecked: boolean;
   /**
-   * The aria-label applied to the switch when no visual 'name' is provided.
+   * If `true`, the switch will display as checked.
    */
-  label: string;
+  checked?: boolean;
   /**
-   * If `true`, the label will be hidden and the required label value will be applied as an aria-label.
+   * If `true`, the disabled state will be set.
    */
-  hideLabel?: boolean;
+  disabled?: boolean;
   /**
    * The helper text that will be displayed for additional field guidance.
    */
   helperText?: string;
   /**
-   * If `true`, the switch will display as checked.
-   */
-  checked?: boolean;
-  /**
-   * If `true`, the small styling will be applied to the switch.
+   * If `true`, the label will be hidden and the required label value will be applied as an aria-label.
    */
-  small?: boolean;
+  hideLabel?: boolean;
   /**
-   * If `true`, the disabled state will be set.
+   * The aria-label applied to the switch when no visual 'name' is provided.
    */
-  disabled?: boolean;
+  label: string;
   /**
    * The name of the control, which is submitted with the form data.
    */
@@ -38,6 +36,10 @@ export declare class Switch {
    * If `true`, the switch will render the On/Off state text.
    */
   showState?: boolean;
+  /**
+   * If `true`, the small styling will be applied to the switch.
+   */
+  small?: boolean;
   /**
    * The value of the toggle does not mean if it's checked or not, use the `checked`
    * property for that.
@@ -46,6 +48,10 @@ export declare class Switch {
    * it's only used when the toggle participates in a native `<form>`.
    */
   value?: string | null;
+  /**
+   * Emitted when the toggle loses focus.
+   */
+  icBlur: EventEmitter<void>;
   /**
    * Emitted when the value property has changed.
    */
@@ -54,22 +60,16 @@ export declare class Switch {
    * Emitted when the toggle has focus.
    */
   icFocus: EventEmitter<void>;
+  disconnectedCallback(): void;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
   /**
-   * Emitted when the toggle loses focus.
+   * Sets focus on the switch.
    */
-  icBlur: EventEmitter<void>;
-  checkedState: boolean;
-  initiallyChecked: boolean;
+  setFocus(): Promise<void>;
   private handleChange;
   private onFocus;
   private onBlur;
   private handleFormReset;
-  /**
-   * Sets focus on the switch.
-   */
-  setFocus(): Promise<void>;
-  componentWillLoad(): void;
-  componentDidLoad(): void;
-  disconnectedCallback(): void;
   render(): any;
 }

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

@@ -5,7 +5,12 @@ import { IcThemeForegroundNoDefault } from "../../utils/types";
  * @slot icon - Content will be rendered next to the tab label.
  */
 export declare class Tab {
+  private focusFromClick;
+  private focusTabId;
+  private isInitialRender;
   host: HTMLIcTabElement;
+  /** @internal Determines whether the light or dark variant of the tabs should be displayed. */
+  appearance?: IcThemeForegroundNoDefault;
   /** @internal The unique context needed if using multiple tabs inside one another i.e. rendering another tabs inside a tab panel. */
   contextId?: string;
   /**
@@ -18,25 +23,37 @@ export declare class Tab {
   tabId?: string;
   /** @internal The position of the tab inside the tabs array in context. */
   tabPosition?: number;
-  /** @internal Determines whether the light or dark variant of the tabs should be displayed. */
-  appearance?: IcThemeForegroundNoDefault;
+  disabledWatchHandler(): void;
   /**
    * @internal Emitted when a tab is selected.
    */
   tabClick: EventEmitter<IcTabClickEventDetail>;
+  /**
+   * @internal Emitted when a tab is dynamically created.
+   */
+  tabCreated: EventEmitter<HTMLIcTabElement>;
+  /**
+   * @internal Emitted when a tab's disabled prop changes
+   */
+  tabEnabled: EventEmitter<void>;
   /**
    * @internal Emitted when a tab is focussed.
    */
   tabFocus: EventEmitter<IcTabClickEventDetail>;
-  private isInitialRender;
-  private focusFromClick;
-  private handleClick;
-  private handleFocus;
-  private handleMouseDown;
+  /**
+   * @internal Emitted when a tab is unmounted.
+   */
+  tabRemoved: EventEmitter<void>;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  componentWillLoad(): void;
+  componentDidUpdate(): void;
   /**
    * Sets focus on the tab.
    */
   setFocus(): Promise<void>;
-  componentDidUpdate(): void;
+  private handleClick;
+  private handleFocus;
+  private handleMouseDown;
   render(): any;
 }

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

@@ -2,42 +2,54 @@ import { EventEmitter } from "../../stencil-public-runtime";
 import { IcActivationTypes, IcThemeForegroundNoDefault } from "../../utils/types";
 import { IcTabClickEventDetail, IcTabSelectEventDetail } from "../ic-tab/ic-tab.types";
 export declare class TabContext {
+  private controlledMode;
+  private enabledTabs;
+  private focusedTabIndex;
+  private newTabPanels;
+  private newTabs;
+  private tabs;
+  private tabGroup;
+  private tabPanels;
   host: HTMLIcTabContextElement;
-  /**
-   * The unique context needed if using multiple tabs inside one another i.e. rendering another set of tabs inside a tab panel.
-   */
-  contextId?: string;
+  selectedTab: number | null;
   /**
    * Determines whether tabs have to be manually activated (by pressing 'Enter' or 'Space') when they receive focus using keyboard navigation.
    */
   activationType?: IcActivationTypes;
+  /**
+   * The appearance of the tab context, e.g dark, or light.
+   */
+  appearance?: IcThemeForegroundNoDefault;
+  /**
+   * The unique context needed if using multiple tabs inside one another i.e. rendering another set of tabs inside a tab panel.
+   */
+  contextId?: string;
   /**
    * The selected tab to be controlled by the user. Must be used alongside the icTabSelect event to manage tab selection.
    */
   selectedTabIndex?: number;
+  updateSelectedTab(newValue: number): void;
   /**
-   * The appearance of the tab context, e.g dark, or light.
+   * Emitted when a user selects a tab.
    */
-  appearance?: IcThemeForegroundNoDefault;
-  selectedTab: number | null;
-  updateSelectedTab(newValue: number): void;
+  icTabSelect: EventEmitter<IcTabSelectEventDetail>;
   /**
    * @deprecated This event should not be used anymore. Use icTabSelect instead.
    */
   tabSelect: EventEmitter<IcTabSelectEventDetail>;
+  componentDidLoad(): void;
+  componentWillUpdate(): void;
+  disconnectedCallback(): void;
+  tabClickHandler(event: CustomEvent<IcTabClickEventDetail>): void;
+  tabCreatedHandler(ev: CustomEvent): void;
+  tabEnabledHandler(): void;
   /**
-   * Emitted when a user selects a tab.
+   * @internal Used to set tab/tab panel IDs when a tab/tab panel has been removed
    */
-  icTabSelect: EventEmitter<IcTabSelectEventDetail>;
-  tabClickHandler(event: CustomEvent<IcTabClickEventDetail>): void;
-  private controlledMode;
-  private tabs;
-  private enabledTabs;
-  private tabPanels;
-  private tabGroup;
-  private focusedTabIndex;
+  tabRemovedHandler(hadFocus?: boolean): Promise<void>;
   private linkTabs;
   private getChildren;
+  private keydownHandler;
   private attatchEventListeners;
   private setControlledMode;
   private setInitialTab;
@@ -48,8 +60,5 @@ export declare class TabContext {
   private keyboardFocusTab;
   private handleKeyBoardNavAutomatic;
   private handleKeyBoardNavManual;
-  componentDidLoad(): void;
-  componentWillUpdate(): void;
-  disconnectedCallback(): void;
   render(): any;
 }

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

@@ -2,7 +2,12 @@ import { IcThemeForegroundNoDefault } from "../../utils/types";
 export declare class TabGroup {
   host: HTMLIcTabGroupElement;
   /**
-   * The unique context needed if using multiple tabs inside one another i.e. rendering another set of tabs inside a tab panel.
+   * @internal The appearance of the tab group, e.g dark, or light.
+   */
+  appearance?: IcThemeForegroundNoDefault;
+  /**
+   * @deprecated This is no longer required.
+   * The context id is passed down from `ic-tab-context`
    */
   contextId?: string;
   /**
@@ -13,10 +18,6 @@ export declare class TabGroup {
    * The label to describe the purpose of the set of tabs to screen reader users.
    */
   label: string;
-  /**
-   * @internal The appearance of the tab group, e.g dark, or light.
-   */
-  appearance?: IcThemeForegroundNoDefault;
   componentDidLoad(): void;
   render(): any;
 }