@ukic/web-components 2.4.1 → 2.6.0

package/dist/types/components/ic-empty-state/ic-empty-state.d.ts

@@ -3,6 +3,9 @@ import { IcSizes } from "../../utils/types";
 /**
  * @slot image - Content is placed at the top above all other content.
  * @slot actions - Content is placed at the bottom below all other content.
+ * @slot heading - Content will be rendered in place of the heading prop.
+ * @slot subheading - Content will be rendered in place of the subheading prop.
+ * @slot body - Content will be rendered in place of the body prop.
  */
 export declare class EmptyState {
   el: HTMLIcEmptyStateElement;
@@ -21,7 +24,7 @@ export declare class EmptyState {
   /**
    * The title rendered in the empty state container.
    */
-  heading: string;
+  heading?: string;
   /**
    * The size of the image or icon used in the image slot.
    */

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

@@ -1,4 +1,4 @@
-import { IcAlignment, IcThemeForeground } from "../../utils/types";
+import { IcAlignment, IcSizesNoLarge, IcThemeForeground } from "../../utils/types";
 import { IcHeroContentAlignments } from "./ic-hero.types";
 /**
  * @slot heading - Content will be rendered in the title area, in place of the heading.
@@ -41,9 +41,13 @@ export declare class Hero {
    */
   secondarySubheading?: string;
   /**
-   * If `true`, the small styling will be applied to the hero.
+   * The size of the hero component.
    */
-  small: boolean;
+  size?: IcSizesNoLarge;
+  /**
+   * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
+   */
+  small?: boolean;
   /**
    * The description for the hero.
    */

package/dist/types/components/ic-input-component-container/ic-input-component-container.d.ts

@@ -1,11 +1,15 @@
-import { IcInformationStatusOrEmpty } from "../../utils/types";
+import { IcInformationStatusOrEmpty, IcSizesNoLarge } from "../../utils/types";
 /**
  * @slot left-icon - Content will be placed to the left of the input.
  */
 export declare class InputComponentContainer {
-  host: HTMLIcInputComponentContainerElement;
+  el: HTMLIcInputComponentContainerElement;
   /**
-   *  If `true`, the dark variant of the input component container will be displayed.
+   * The appearance of the input component container.
+   */
+  appearance?: "dark" | "default";
+  /**
+   * @deprecated This prop should not be used anymore. Set prop `appearance` to "dark" instead.
    */
   dark?: boolean;
   /**
@@ -25,9 +29,13 @@ export declare class InputComponentContainer {
    */
   readonly: boolean;
   /**
-   *  If `true`, the small styling will be applied to the input component container.
+   * The size of the input component container component.
+   */
+  size?: IcSizesNoLarge;
+  /**
+   * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
    */
-  small: boolean;
+  small?: boolean;
   /**
    *  If `true`, the validation will display inline.
    */

package/dist/types/components/ic-input-label/ic-input-label.d.ts

@@ -1,6 +1,10 @@
 export declare class InputLabel {
   /**
-   * If `true`, the dark variant of the input label will be displayed.
+   * The appearance of the input label.
+   */
+  appearance?: "dark" | "default";
+  /**
+   * @deprecated This prop should not be used anymore. Set prop `appearance` to "dark" instead.
    */
   dark?: boolean;
   /**

package/dist/types/components/ic-loading-indicator/ic-loading-indicator.d.ts

@@ -6,7 +6,7 @@ export declare class LoadingIndicator {
   private interval;
   private labelList;
   private outerElement?;
-  host: HTMLIcLoadingIndicatorElement;
+  el: HTMLIcLoadingIndicatorElement;
   circularDiameter: number;
   circularLineWidth: number;
   indeterminate: boolean;

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

@@ -1,9 +1,10 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcActivationTypes, IcMenuOption, IcValueEventDetail } from "../../utils/types";
+import { IcActivationTypes, IcMenuOption, IcSizesNoLarge, IcValueEventDetail } from "../../utils/types";
 import { IcOptionSelectEventDetail, IcMenuChangeEventDetail, IcMenuOptionIdEventDetail } from "./ic-menu.types";
 import { IcSearchBarSearchModes } from "../ic-search-bar/ic-search-bar.types";
 export declare class Menu {
   private firstRender;
+  private disabledOptionSelected;
   private hasPreviouslyBlurred;
   private hasTimedOut;
   private isLoading;
@@ -13,7 +14,7 @@ export declare class Menu {
   private popperInstance;
   private preventClickOpen;
   private ungroupedOptions;
-  host: HTMLIcMenuElement;
+  el: HTMLIcMenuElement;
   focusFromSearchKeypress: boolean;
   initialOptionsListRender: boolean;
   keyboardNav: boolean;
@@ -64,7 +65,11 @@ export declare class Menu {
    */
   searchMode?: IcSearchBarSearchModes;
   /**
-   * If `true`, the small styling will be applied to the menu.
+   * The size of the menu component.
+   */
+  size?: IcSizesNoLarge;
+  /**
+   * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
    */
   small?: boolean;
   /**

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

@@ -2,6 +2,7 @@ import { IcThemeForeground } from "../../utils/types";
 import { IcNavButtonModes } from "./ic-navigation-button.types";
 /**
  * @slot icon - Content will be placed to the left of the button label.
+ * @slot badge - Badge component overlaying the top right of the button.
  */
 export declare class NavigationButton {
   private buttonEl;

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

@@ -1,15 +1,16 @@
 import { IcNavType } from "../../utils/types";
 export declare class NavigationGroup {
   private allGroupedNavigationItems;
-  private collapsedIconLabelsNavigationItemsHeight;
+  private collapsedNavItemsHeight;
   private dropdown;
   private DYNAMIC_GROUPED_LINKS_HEIGHT_MS;
+  private expandedNavItemsHeight;
   private groupEl;
   private IC_NAVIGATION_ITEM;
-  private isCollapsedLabelVariant;
   private isSideNavExpanded;
   private mouseGate;
   private nodeName;
+  private GROUPED_LINKS_WRAPPER_CLASS;
   el: HTMLIcNavigationGroupElement;
   deviceSize: number;
   dropdownOpen: boolean;
@@ -59,5 +60,6 @@ export declare class NavigationGroup {
   private getNavigationChildItemsHeight;
   private setInitialGroupedLinksWrapperHeight;
   private renderNavigationItems;
+  private setGroupedLinksElementHeight;
   render(): any;
 }

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

@@ -2,6 +2,7 @@ import { EventEmitter } from "../../stencil-public-runtime";
 import { IcNavType } from "../../utils/types";
 /**
  * @part link - The `<a>` within ic-navigation-item
+ * @slot badge - Badge component overlaying the top right of the icon.
  */
 export declare class NavigationItem {
   private navigationSlot;
@@ -81,5 +82,7 @@ export declare class NavigationItem {
   private sideNavExpandHandler;
   private handleBlur;
   private handleClick;
+  private generateTooltipLabel;
+  private renderNavigationItemContent;
   render(): any;
 }

package/dist/types/components/ic-page-header/ic-page-header.d.ts

@@ -1,4 +1,4 @@
-import { IcAlignment } from "../../utils/types";
+import { IcAlignment, IcSizesNoLarge } from "../../utils/types";
 /**
  * @slot breadcrumbs - Content will be rendered in the breadcrumb area, above the title and action areas.
  * @slot heading - Content will be rendered in the title area, in place of the heading.
@@ -32,7 +32,11 @@ export declare class PageHeader {
    */
   reverseOrder?: boolean;
   /**
-   * If `true`, the small styling will be applied to the page header.
+   * The size of the page header component.
+   */
+  size?: IcSizesNoLarge;
+  /**
+   * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
    */
   small?: boolean;
   /**

package/dist/types/components/ic-popover-menu/ic-popover-menu.d.ts

@@ -6,7 +6,7 @@ export declare class PopoverMenu {
   private firstRender;
   private popoverMenuEls;
   private popperInstance;
-  host: HTMLIcPopoverMenuElement;
+  el: HTMLIcPopoverMenuElement;
   openingFromChild: boolean;
   openingFromParent: boolean;
   /**

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

@@ -1,10 +1,14 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcInformationStatusOrEmpty, IcOrientation, IcValueEventDetail } from "../../utils/types";
+import { IcInformationStatusOrEmpty, IcOrientation, IcSizesNoLarge, IcValueEventDetail } from "../../utils/types";
 import { IcChangeEventDetail } from "./ic-radio-group.types";
 export declare class RadioGroup {
+  private radioContainer;
   private radioOptions;
-  host: HTMLIcRadioGroupElement;
+  private resizeObserver;
+  el: HTMLIcRadioGroupElement;
   checkedValue: string;
+  currentOrientation: IcOrientation;
+  initialOrientation: IcOrientation;
   selectedChild: number;
   /**
    * If `true`, the disabled state will be set.
@@ -35,9 +39,13 @@ export declare class RadioGroup {
    */
   required: boolean;
   /**
-   * If `true`, the small styling will be applied to the radio group.
+   * The size of the radio group component.
    */
-  small: boolean;
+  size?: IcSizesNoLarge;
+  /**
+   * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
+   */
+  small?: boolean;
   /**
    * The validation status - e.g. 'error' | 'warning' | 'success'.
    */
@@ -46,14 +54,18 @@ export declare class RadioGroup {
    * The validation text - e.g. 'error' | 'warning' | 'success'.
    */
   validationText: string;
+  orientationChangeHandler(): void;
   /**
    * Emitted when a user selects a radio.
    */
   icChange: EventEmitter<IcChangeEventDetail>;
+  disconnectedCallback(): void;
   componentWillLoad(): void;
   componentDidLoad(): void;
   selectHandler(event: CustomEvent<IcValueEventDetail>): void;
   changeHandler(): void;
+  private runResizeObserver;
+  private checkOrientation;
   private handleKeyDown;
   private getNextItemToSelect;
   render(): any;

package/dist/types/components/ic-radio-option/ic-radio-option.d.ts

@@ -1,11 +1,14 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { IcAdditionalFieldTypes, IcValueEventDetail } from "../../utils/types";
+/**
+ * @slot additional-field - Content to displayed alongside a radio option.
+ */
 export declare class RadioOption {
   private defaultRadioValue;
   private hasAdditionalField;
   private radioElement;
   private skipFocus;
-  host: HTMLIcRadioOptionElement;
+  el: HTMLIcRadioOptionElement;
   /**
    * The style of additionalField that will be displayed if used.
    */
@@ -18,6 +21,30 @@ export declare class RadioOption {
    * The text to be displayed when dynamic.
    */
   dynamicText: string;
+  /**
+   * The <form> element to associate the radio with.
+   */
+  form?: string;
+  /**
+   * The URL that processes the information submitted by the radio. It overrides the action attribute of the radio's form owner. Does nothing if there is no form owner.
+   */
+  formaction?: string;
+  /**
+   * The way the submitted form data is encoded.
+   */
+  formenctype?: string;
+  /**
+   * The HTTP method used to submit the form.
+   */
+  formmethod?: string;
+  /**
+   * If `true`, the form will not be validated when submitted.
+   */
+  formnovalidate?: boolean;
+  /**
+   * The place to display the response from submitting the form. It overrides the target attribute of the radio's form owner.
+   */
+  formtarget?: string;
   /**
    * The group label for the radio option.
    */

package/dist/types/components/ic-search-bar/ic-search-bar.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcAutocompleteTypes, IcAutocorrectStates, IcMenuOption } from "../../utils/types";
+import { IcAutocompleteTypes, IcAutocorrectStates, IcMenuOption, IcSizesNoLarge } from "../../utils/types";
 import { IcSearchBarBlurEventDetail, IcSearchBarSearchModes } from "./ic-search-bar.types";
 import { IcValueEventDetail, IcBlurEventDetail } from "../../utils/types";
 import { IcMenuChangeEventDetail, IcOptionSelectEventDetail } from "../ic-menu/ic-menu.types";
@@ -128,7 +128,11 @@ export declare class SearchBar {
    */
   searchMode?: IcSearchBarSearchModes;
   /**
-   * If `true`, the small styling will be applied to the search bar.
+   * The size of the search bar component.
+   */
+  size?: IcSizesNoLarge;
+  /**
+   * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
    */
   small?: boolean;
   /**

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcInformationStatusOrEmpty, IcMenuOption, IcSearchMatchPositions, IcValueEventDetail } from "../../utils/types";
+import { IcInformationStatusOrEmpty, IcMenuOption, IcSearchMatchPositions, IcValueEventDetail, IcSizesNoLarge } from "../../utils/types";
 import { IcOptionSelectEventDetail } from "../ic-menu/ic-menu.types";
 export declare class Select {
   private anchorEl;
@@ -21,7 +21,7 @@ export declare class Select {
   private searchableSelectElement;
   private timeoutTimer;
   private ungroupedOptions;
-  host: HTMLIcSelectElement;
+  el: HTMLIcSelectElement;
   ariaActiveDescendant: string;
   clearButtonFocused: boolean;
   debounceIcChange: number;
@@ -47,7 +47,33 @@ export declare class Select {
    */
   emptyOptionListText: string;
   /**
-   * If `true`, the select element will fill the width of the container.
+   * The <form> element to associate the select with.
+   */
+  form?: string;
+  /**
+   * The URL that processes the information submitted by the select. It overrides the action attribute of the select's form owner. Does nothing if there is no form owner.
+   * This prop should only be used with searchable select and will only be applied if searchable is true.
+   */
+  formaction?: string;
+  /**
+   * The way the submitted form data is encoded. This prop should only be used with searchable select and will only be applied if searchable is true.
+   */
+  formenctype?: string;
+  /**
+   * The HTTP method used to submit the form. This prop should only be used with searchable select and will only be applied if searchable is true.
+   */
+  formmethod?: string;
+  /**
+   * If `true`, the form will not be validated when submitted. This prop should only be used with searchable select and will only be applied if searchable is true.
+   */
+  formnovalidate?: boolean;
+  /**
+   * The place to display the response from submitting the form. It overrides the target attribute of the select's form owner.
+   * This prop should only be used with searchable select and will only be applied if searchable is true.
+   */
+  formtarget?: string;
+  /**
+   * If `true`, the select element will fill the width of the container. This prop should only be used with searchable select and will only be applied if searchable is true.
    */
   fullWidth: boolean;
   /**
@@ -107,7 +133,11 @@ export declare class Select {
    */
   showClearButton?: boolean;
   /**
-   * If `true`, the small styling will be applied to the select.
+   * The size of the select component.
+   */
+  size?: IcSizesNoLarge;
+  /**
+   * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
    */
   small?: boolean;
   /**

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

@@ -11,6 +11,7 @@ export declare class SideNavigation {
   private resizeObserver;
   private COLLAPSED_ICON_LABELS_END;
   private COLLAPSED_ICON_LABELS_START;
+  private menuButton;
   el: HTMLIcSideNavigationElement;
   deviceSize: number;
   deviceSizeAppTitle: number;
@@ -30,6 +31,10 @@ export declare class SideNavigation {
    * If `true`, automatic parent wrapper styling will be disabled.
    */
   disableAutoParentStyling: boolean;
+  /**
+   * If `true`, the side navigation will not display as a top bar on small devices.
+   */
+  disableTopBarBehaviour: boolean;
   /**
    * If `true`, the side navigation will load in an expanded state.
    */

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

@@ -4,3 +4,5 @@ export declare const icSideNavigationGroupedNav = "\n  <div style=\"display:flex
 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";
+export declare const icSideNavigationAppTitle = "\n  <div style=\"display:flex; height: 100%;\">\n    <ic-side-navigation\n      version=\"v0.0.0\"\n      status=\"BETA\"\n    >\n    <a href=\"/\" slot=\"app-title\">Application Name</a>\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-side-navigation>\n    <div\n      class=\"content-wrapper\"\n      style=\"display:flex; flex-direction: column; flex-grow: 1;\"\n    >\n      <main>This is the content</main>\n      <footer>Footer</footer>\n    </div>\n  </div>\n";
+export declare const icSideNavigationSlotted = "\n    <ic-side-navigation app-title=\"Application Name\" version=\"v0.0.0\" status=\"BETA\">\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

@@ -6,7 +6,11 @@ export declare class Skeleton {
   heightOnly: boolean;
   widthOnly: boolean;
   /**
-   * If `true`, the skeleton will be set to the light variant.
+   * The appearance of the skeleton.
+   */
+  appearance?: "light" | "default";
+  /**
+   * @deprecated This prop should not be used anymore. Set prop `appearance` to "light" instead.
    */
   light?: boolean;
   /**

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

@@ -1,11 +1,12 @@
 import { IcStatusTagStatuses, IcStatusTagAppearance } from "./ic-status-tag.types";
+import { IcEmphasisType, IcSizesNoLarge } from "../../utils/types";
 export declare class StatusTag {
   /**
    * If `true`, role='status' is added to the component and it will act as an 'aria-live' region.
    */
   announced?: boolean;
   /**
-   * The emphasis of the status tag.
+   * @deprecated This prop should not be used anymore. Use variant prop instead.
    */
   appearance?: IcStatusTagAppearance;
   /**
@@ -13,13 +14,22 @@ export declare class StatusTag {
    */
   label: string;
   /**
-   * If `true`, the small styling will be applied to the status tag.
+   * The size of the status tag component.
+   */
+  size?: IcSizesNoLarge;
+  /**
+   * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
    */
   small?: boolean;
   /**
    * The colour of the status tag.
    */
   status?: IcStatusTagStatuses;
+  /**
+   * The emphasis of the status tag.
+   */
+  variant?: IcEmphasisType;
+  componentWillLoad(): void;
   componentDidLoad(): void;
   render(): any;
 }

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

@@ -30,6 +30,7 @@ export declare class Stepper {
   variant?: IcStepVariants;
   disconnectedCallback(): void;
   componentWillLoad(): void;
+  componentWillRender(): void;
   componentDidLoad(): void;
   private getChildren;
   private checkStepTitles;

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

@@ -1,5 +1,6 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { IcSwitchChangeEventDetail } from "./ic-switch.types";
+import { IcSizesNoLarge } from "../../utils/types";
 /**
  * @slot right-adornment - Content is placed to the right of switch before state label.
  */
@@ -37,7 +38,11 @@ export declare class Switch {
    */
   showState?: boolean;
   /**
-   * If `true`, the small styling will be applied to the switch.
+   * The size of the switch component.
+   */
+  size?: IcSizesNoLarge;
+  /**
+   * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
    */
   small?: boolean;
   /**

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

@@ -3,12 +3,13 @@ import { IcTabClickEventDetail } from "./ic-tab.types";
 import { IcThemeForegroundNoDefault } from "../../utils/types";
 /**
  * @slot icon - Content will be rendered next to the tab label.
+ * @slot badge - Badge component displayed inline with the tab.
  */
 export declare class Tab {
   private focusFromClick;
   private focusTabId;
   private isInitialRender;
-  host: HTMLIcTabElement;
+  el: 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. */

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

@@ -10,7 +10,7 @@ export declare class TabContext {
   private tabs;
   private tabGroup;
   private tabPanels;
-  host: HTMLIcTabContextElement;
+  el: HTMLIcTabContextElement;
   selectedTab: number | null;
   /**
    * Determines whether tabs have to be manually activated (by pressing 'Enter' or 'Space') when they receive focus using keyboard navigation.

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

@@ -1,6 +1,5 @@
 import { IcThemeForegroundNoDefault } from "../../utils/types";
 export declare class TabGroup {
-  host: HTMLIcTabGroupElement;
   /**
    * @internal The appearance of the tab group, e.g dark, or light.
    */

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

@@ -1,7 +1,7 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { IcThemeForegroundNoDefault } from "../../utils/types";
 export declare class TabPanel {
-  host: HTMLIcTabPanelElement;
+  el: HTMLIcTabPanelElement;
   /**
    * @internal The appearance of the tabs, e.g dark, or light.
    */

package/dist/types/components/ic-text-field/ic-text-field.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcAutocompleteTypes, IcAutocorrectStates, IcInformationStatusOrEmpty, IcValueEventDetail } from "../../utils/types";
+import { IcAutocompleteTypes, IcAutocorrectStates, IcInformationStatusOrEmpty, IcValueEventDetail, IcSizesNoLarge } from "../../utils/types";
 import { IcAriaAutocompleteTypes, IcTextFieldInputModes, IcTextFieldTypes } from "./ic-text-field.types";
 /**
  * @slot icon - Content will be placed to the left of the text input.
@@ -127,9 +127,13 @@ export declare class TextField {
    */
   rows: number;
   /**
-   * If `true`, the small styling will be applied to the text field.
+   * The size of the text field component.
    */
-  small: boolean;
+  size?: IcSizesNoLarge;
+  /**
+   * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
+   */
+  small?: boolean;
   /**
    * If `true`, the value of the text field will have its spelling and grammar checked.
    */

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

@@ -1,7 +1,6 @@
 import { IcTooltipPlacements } from "./ic-tooltip.types";
 export declare class Tooltip {
   private arrow;
-  private ariaDescribedBy;
   private delayedHideEvents;
   private dialogOverflow;
   private icDialogEl;
@@ -10,7 +9,6 @@ export declare class Tooltip {
   private persistTooltip;
   private popperInstance;
   private onDialog;
-  private screenReaderOnlyStyles;
   private showEvents;
   private toolTip;
   el: HTMLIcTooltipElement;
@@ -18,6 +16,10 @@ export declare class Tooltip {
    * If `true`, the tooltip will not be displayed on hover, it will require a click.
    */
   disableHover?: boolean;
+  /**
+   * The number of lines to display before truncating the text.
+   */
+  maxLines?: number;
   /**
    * The position of the tool-tip in relation to the parent element.
    */
@@ -30,9 +32,9 @@ export declare class Tooltip {
    * The text to display on the tooltip.
    */
   label: string;
-  updateLabel(newValue: string): void;
   disconnectedCallback(): void;
   componentDidLoad(): void;
+  componentDidRender(): void;
   /**
    * Method to programmatically show/hide the tooltip without needing to interact with an anchor element
    * @param show Whether to show or hide the tooltip