@ukic/canary-web-components 2.0.0-canary.0

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

@@ -0,0 +1,226 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { IcInformationStatusOrEmpty, IcMenuOption, IcSearchMatchPositions, IcValueEventDetail } from "../../utils/types";
+import { IcOptionSelectEventDetail } from "../ic-menu/ic-menu.types";
+export declare class Select {
+  private anchorEl;
+  private blurredBecauseButtonPressed;
+  private characterKeyPressTimer;
+  private clearButton;
+  private customSelectElement;
+  private debounceAria;
+  private hasSetDefaultValue;
+  private hasTimedOut;
+  private inheritedAttributes;
+  private initialOptionsEmpty;
+  private inputId;
+  private menu;
+  private menuId;
+  private nativeSelectElement;
+  private retryButtonClick;
+  private searchableMenuItemSelected;
+  private searchableSelectElement;
+  private timeoutTimer;
+  private ungroupedOptions;
+  host: HTMLIcSelectElement;
+  ariaActiveDescendant: string;
+  clearButtonFocused: boolean;
+  debounceIcChange: number;
+  hiddenInputValue: string;
+  noOptions: IcMenuOption[];
+  open: boolean;
+  pressedCharacters: string;
+  searchableSelectInputValue: string;
+  /**
+   * @deprecated This prop should not be used anymore.
+   */
+  charactersUntilSuggestions?: number;
+  /**
+   * If `true`, the disabled state will be set.
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the built in filtering will be disabled for a searchable variant. For example, if options will already be filtered from external source.
+   */
+  disableFilter?: boolean;
+  /**
+   * The text displayed when there are no options in the option list.
+   */
+  emptyOptionListText: string;
+  /**
+   * If `true`, the select element will fill the width of the container.
+   */
+  fullWidth: boolean;
+  /**
+   * The helper text that will be displayed for additional field guidance.
+   */
+  helperText?: string;
+  /**
+   * If `true`, the label will be hidden and the required label value will be applied as an aria-label.
+   */
+  hideLabel?: boolean;
+  /**
+   * If `true`, descriptions of options will be included when filtering options in a searchable select. Only applies to built in filtering.
+   */
+  includeDescriptionsInSearch?: boolean;
+  /**
+   * 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;
+  /**
+   * The label for the select.
+   */
+  label: string;
+  /**
+   * The message displayed when external loading times out.
+   */
+  loadingErrorLabel?: string;
+  /**
+   * The message displayed whilst the options are being loaded externally.
+   */
+  loadingLabel?: string;
+  /**
+   * The name of the control, which is submitted with the form data.
+   */
+  name?: string;
+  /**
+   * The placeholder value to be displayed.
+   */
+  placeholder?: string;
+  /**
+   * If `true`, the readonly state will be set.
+   */
+  readonly?: boolean;
+  /**
+   * If `true`, the select will require a value.
+   */
+  required?: boolean;
+  /**
+   * If `true`, a searchable variant of the select will be displayed which can be typed in to filter options.
+   */
+  searchable?: boolean;
+  /**
+   * Whether the search string of the searchable select should match the start of or anywhere in the options. Only applies to built in filtering.
+   */
+  searchMatchPosition?: IcSearchMatchPositions;
+  /**
+   * 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 small styling will be applied to the select.
+   */
+  small?: boolean;
+  /**
+   * If using external filtering, set a timeout for when loading takes too long.
+   */
+  timeout?: number;
+  /**
+   * The validation status - e.g. 'error' | 'warning' | 'success'.
+   */
+  validationStatus?: IcInformationStatusOrEmpty;
+  /**
+   * The text to display as the validation message.
+   */
+  validationText?: string;
+  /**
+   * If `true`, the loading state will be triggered when fetching options asyncronously.
+   */
+  loading?: boolean;
+  loadingHandler(newValue: boolean): void;
+  /**
+   * The possible selection options.
+   */
+  options?: IcMenuOption[];
+  filteredOptions: IcMenuOption[];
+  watchOptionsHandler(): void;
+  /**
+   * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.
+   */
+  debounce?: number;
+  currDebounce: number;
+  debounceChangedHandler(newValue: number): void;
+  /**
+   * The value of the select, reflected by the value of the currently selected option. For the searchable variant, the value is also reflected by the user input.
+   */
+  value?: string;
+  initialValue: string;
+  inputValueToFilter: string;
+  currValue: string;
+  valueChangedHandler(): void;
+  /**
+   * Emitted when the select loses focus.
+   */
+  icBlur: EventEmitter<void>;
+  /**
+   * Emitted when the value changes.
+   */
+  icChange: EventEmitter<IcValueEventDetail>;
+  /**
+   * Emitted when the clear button is clicked.
+   */
+  icClear: EventEmitter<void>;
+  /**
+   * Emitted when the select gains focus.
+   */
+  icFocus: EventEmitter<void>;
+  /**
+   * Emitted when a keyboard input occurred.
+   */
+  icInput: EventEmitter<IcValueEventDetail>;
+  /**
+   * Emitted when an option is highlighted within the menu.
+   * Highlighting a menu item will also trigger an `icChange/onIcChange` due to the value being updated.
+   */
+  icOptionSelect: EventEmitter<IcOptionSelectEventDetail>;
+  /**
+   * Emitted when the 'retry loading' button is clicked for a searchable variant.
+   */
+  icRetryLoad: EventEmitter<IcValueEventDetail>;
+  disconnectedCallback(): void;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  componentDidRender(): void;
+  /**
+   * Sets focus on the input box.
+   */
+  setFocus(): Promise<void>;
+  private handleRetry;
+  private updateOnChangeDebounce;
+  private emitIcChange;
+  private emitImmediateIcChange;
+  private setOptionsValuesFromLabels;
+  private setUngroupedOptions;
+  private setTextColor;
+  private setMenuChange;
+  private getLabelFromValue;
+  private getFilteredChildMenuOptions;
+  private handleNativeSelectChange;
+  private handleCustomSelectChange;
+  private handleMenuChange;
+  private handleMenuKeyPress;
+  private handleMenuValueChange;
+  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 triggerLoading;
+  private getValueFromLabel;
+  private handleSearchableSelectInput;
+  private updateSearchableSelectResultAriaLive;
+  private debounceAriaLiveUpdate;
+  private getDefaultValue;
+  private setDefaultValue;
+  private onFocus;
+  private onBlur;
+  private onTimeoutBlur;
+  private handleFormReset;
+  render(): any;
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,101 @@
+import { IcThemeForeground } from "../../utils/types";
+/**
+ * @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 {
+  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;
+  /**
+   * If `true`, the icon and label will appear when side navigation is collapsed.
+   */
+  collapsedIconLabels: boolean;
+  /**
+   * If `true`, automatic parent wrapper styling will be disabled.
+   */
+  disableAutoParentStyling: boolean;
+  /**
+   * If `true`, the side navigation will load in an expanded state.
+   */
+  expanded: boolean;
+  /**
+   * The URL that the app title link points to.
+   */
+  href: string;
+  /**
+   * @internal If `true`, side navigation will be contained by its parent element.
+   */
+  inline: boolean;
+  /**
+   * The short title of the app to be displayed at small screen sizes in place of the app title.
+   */
+  shortAppTitle: string;
+  /**
+   * If `true`, the menu expand button will be removed (PLEASE NOTE: This takes effect on screen sizes 992px and above).
+   */
+  static: boolean;
+  /**
+   * The status of the app to be displayed.
+   */
+  status: string;
+  /**
+   * The version of the app to be displayed.
+   */
+  version: string;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  disconnectedCallback(): void;
+  themeChangeHandler(ev: CustomEvent): void;
+  private emitSideNavigationExpanded;
+  private toggleMenu;
+  private setToggleMenuFlyoutMenuVisibility;
+  private setMobileMenuAriaAttributes;
+  private setAndRemoveNoWrapAfterMenuExpanded;
+  private toggleMenuExpanded;
+  /**
+   * 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 side navigation state
+   */
+  private arrangeSlottedNavigationItem;
+  private styleSlottedCollapsedIconLabels;
+  private setExpandedButtonHeight;
+  private styleSlottedIconLabels;
+  private transitionHandler;
+  private transitionEndHandler;
+  private animateCollapsedIconLabels;
+  private paddingIconWidth;
+  private displayTooltipWithExpandedLongLabel;
+  private setMenuExpanded;
+  /**
+   * As the mobile top bar is fixed, a padding top is required
+   * to push main content down the height of the mobile top bar
+   * @param value - padding-top css value
+   */
+  private setParentPaddingTop;
+  private setParentPaddingLeft;
+  private renderAppTitle;
+  private resizeObserverCallback;
+  private runResizeObserver;
+  private setCollapsedIconLabels;
+  private styleSlottedCollapsedIconLabel;
+  private renderTopBar;
+  render(): any;
+}

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

@@ -0,0 +1,9 @@
+import { IcThemeForeground } from "../../utils/types";
+export interface IcTopBar {
+  isSDevice: boolean;
+  foregroundColor: IcThemeForeground;
+  menuOpen: boolean;
+  href: string;
+  isAppNameSubtitleVariant: boolean;
+  appTitle: string;
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,6 @@
+export declare const icSideNavigation = "\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 icSideNavigationExpanded = "\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    >\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=\"primary-navigation\" href=\"/\" label=\"This is a very very very very very long label\">\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 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

@@ -0,0 +1,18 @@
+import { IcSkeletonVariants } from "./ic-skeleton.types";
+export declare class Skeleton {
+  el: HTMLIcSkeletonElement;
+  default: boolean;
+  hasChild: boolean;
+  heightOnly: boolean;
+  widthOnly: boolean;
+  /**
+   * If `true`, the skeleton will be set to the light variant.
+   */
+  light?: 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

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

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,25 @@
+import { IcStatusTagStatuses, IcStatusTagAppearance } from "./ic-status-tag.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.
+   */
+  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;
+  /**
+   * The colour of the status tag.
+   */
+  status?: IcStatusTagStatuses;
+  componentDidLoad(): void;
+  render(): any;
+}

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

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

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,54 @@
+import { IcStepVariants, IcStepStatuses, IcStepTypes } from "./ic-step.types";
+export declare class Step {
+  el: HTMLIcStepElement;
+  /**
+   * @internal If a compact stepper is being used, this sets the styling of the step.
+   */
+  compactStepStyling?: 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 `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.
+   */
+  progress?: number;
+  /**
+   * @internal The step number, managed by ic-stepper.
+   */
+  stepNum?: number;
+  /**
+   * The status of the step. Use this prop to display a status message on the step if it is required or optional.
+   */
+  stepStatus?: IcStepStatuses;
+  /**
+   * 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;
+  /**
+   * The title of the step within the stepper.
+   */
+  stepTitle?: string;
+  /**
+   * @internal The variant of the step. This is managed by ic-stepper.
+   */
+  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

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1,43 @@
+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 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;
+  /**
+   * The variant of the stepper.
+   */
+  variant?: IcStepVariants;
+  disconnectedCallback(): void;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  private getChildren;
+  private checkStepTitles;
+  private setStepTypes;
+  private setStepperWidth;
+  private initialiseStepStates;
+  private overrideVariant;
+  private resizeObserverCallback;
+  private runResizeObserver;
+  render(): any;
+}

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

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

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

@@ -0,0 +1 @@
+export {};

package/dist/types/components/ic-stepper/test/basic/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-switch/ic-switch.d.ts

@@ -0,0 +1,75 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { IcSwitchChangeEventDetail } from "./ic-switch.types";
+/**
+ * @slot right-adornment - Content is placed to the right of switch before state label.
+ */
+export declare class Switch {
+  private inputId;
+  el: HTMLIcSwitchElement;
+  checkedState: boolean;
+  initiallyChecked: boolean;
+  /**
+   * If `true`, the switch will display as checked.
+   */
+  checked?: boolean;
+  /**
+   * If `true`, the disabled state will be set.
+   */
+  disabled?: boolean;
+  /**
+   * The helper text that will be displayed for additional field guidance.
+   */
+  helperText?: string;
+  /**
+   * If `true`, the label will be hidden and the required label value will be applied as an aria-label.
+   */
+  hideLabel?: boolean;
+  /**
+   * The aria-label applied to the switch when no visual 'name' is provided.
+   */
+  label: string;
+  /**
+   * The name of the control, which is submitted with the form data.
+   */
+  name?: string;
+  /**
+   * 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.
+   *
+   * The value of a toggle is analogous to the value of a `<input type="checkbox">`,
+   * it's only used when the toggle participates in a native `<form>`.
+   */
+  value?: string | null;
+  /**
+   * Emitted when the toggle loses focus.
+   */
+  icBlur: EventEmitter<void>;
+  /**
+   * Emitted when the value property has changed.
+   */
+  icChange: EventEmitter<IcSwitchChangeEventDetail>;
+  /**
+   * Emitted when the toggle has focus.
+   */
+  icFocus: EventEmitter<void>;
+  disconnectedCallback(): void;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  /**
+   * Sets focus on the switch.
+   */
+  setFocus(): Promise<void>;
+  private handleChange;
+  private onFocus;
+  private onBlur;
+  private handleFormReset;
+  render(): any;
+}

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

@@ -0,0 +1,4 @@
+export interface IcSwitchChangeEventDetail {
+  value: string | null;
+  checked: boolean;
+}

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

@@ -0,0 +1 @@
+export {};