@ukic/web-components 2.2.0 → 2.4.0

package/dist/types/components.d.ts

@@ -5,11 +5,12 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { IcActivationTypes, IcAdditionalFieldTypes, IcAlignment, IcAutocompleteTypes, IcAutocorrectStates, IcBlurEventDetail, IcInformationStatusOrEmpty, IcMenuOption, IcOrientation, IcSearchMatchPositions, IcStatusVariants, IcTheme, IcThemeForeground, IcThemeForegroundNoDefault, IcTypographyVariants, IcValueEventDetail } from "./utils/types";
-import { IcButtonSizes, IcButtonTooltipPlacement, IcButtonTypes, IcButtonVariants } from "./components/ic-button/ic-button.types";
+import { IcActivationTypes, IcAdditionalFieldTypes, IcAlignment, IcAutocompleteTypes, IcAutocorrectStates, IcBlurEventDetail, IcInformationStatusOrEmpty, IcMenuOption, IcOrientation, IcSearchMatchPositions, IcSizes, IcStatusVariants, IcTheme, IcThemeForeground, IcThemeForegroundNoDefault, IcTypographyVariants, IcValueEventDetail } from "./utils/types";
+import { IcButtonTooltipPlacement, IcButtonTypes, IcButtonVariants } from "./components/ic-button/ic-button.types";
 import { IcChangeEventDetail } from "./components/ic-checkbox-group/ic-checkbox-group.types";
-import { IcChipAppearance, IcChipSizes } from "./components/ic-chip/ic-chip.types";
+import { IcChipAppearance } from "./components/ic-chip/ic-chip.types";
 import { IcProtectiveMarkings } from "./components/ic-classification-banner/ic-classification-banner.types";
+import { IcEmptyStateAlignment } from "./components/ic-empty-state/ic-empty-state.types";
 import { IcFooterBreakpoints } from "./components/ic-footer/ic-footer.types";
 import { IcHeroContentAlignments } from "./components/ic-hero/ic-hero.types";
 import { IcAriaLiveModeVariants } from "./components/ic-input-validation/ic-input-validation.types";
@@ -28,11 +29,12 @@ import { IcSwitchChangeEventDetail } from "./components/ic-switch/ic-switch.type
 import { IcTabClickEventDetail, IcTabSelectEventDetail } from "./components/ic-tab/ic-tab.types";
 import { IcAriaAutocompleteTypes, IcTextFieldInputModes, IcTextFieldTypes } from "./components/ic-text-field/ic-text-field.types";
 import { IcTooltipPlacements } from "./components/ic-tooltip/ic-tooltip.types";
-export { IcActivationTypes, IcAdditionalFieldTypes, IcAlignment, IcAutocompleteTypes, IcAutocorrectStates, IcBlurEventDetail, IcInformationStatusOrEmpty, IcMenuOption, IcOrientation, IcSearchMatchPositions, IcStatusVariants, IcTheme, IcThemeForeground, IcThemeForegroundNoDefault, IcTypographyVariants, IcValueEventDetail } from "./utils/types";
-export { IcButtonSizes, IcButtonTooltipPlacement, IcButtonTypes, IcButtonVariants } from "./components/ic-button/ic-button.types";
+export { IcActivationTypes, IcAdditionalFieldTypes, IcAlignment, IcAutocompleteTypes, IcAutocorrectStates, IcBlurEventDetail, IcInformationStatusOrEmpty, IcMenuOption, IcOrientation, IcSearchMatchPositions, IcSizes, IcStatusVariants, IcTheme, IcThemeForeground, IcThemeForegroundNoDefault, IcTypographyVariants, IcValueEventDetail } from "./utils/types";
+export { IcButtonTooltipPlacement, IcButtonTypes, IcButtonVariants } from "./components/ic-button/ic-button.types";
 export { IcChangeEventDetail } from "./components/ic-checkbox-group/ic-checkbox-group.types";
-export { IcChipAppearance, IcChipSizes } from "./components/ic-chip/ic-chip.types";
+export { IcChipAppearance } from "./components/ic-chip/ic-chip.types";
 export { IcProtectiveMarkings } from "./components/ic-classification-banner/ic-classification-banner.types";
+export { IcEmptyStateAlignment } from "./components/ic-empty-state/ic-empty-state.types";
 export { IcFooterBreakpoints } from "./components/ic-footer/ic-footer.types";
 export { IcHeroContentAlignments } from "./components/ic-hero/ic-hero.types";
 export { IcAriaLiveModeVariants } from "./components/ic-input-validation/ic-input-validation.types";
@@ -70,7 +72,7 @@ export namespace Components {
          */
         "message"?: string;
         /**
-          * If `true`, the title and message will appear inline instead of above and below.
+          * If `true`, the title and message will appear above and below instead of inline.
          */
         "titleAbove"?: boolean;
         /**
@@ -185,7 +187,7 @@ export namespace Components {
         /**
           * The size of the button to be displayed.
          */
-        "size"?: IcButtonSizes;
+        "size"?: IcSizes;
         /**
           * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
          */
@@ -296,7 +298,11 @@ export namespace Components {
          */
         "setFocus": () => Promise<void>;
         /**
-          * If true, the small styling will be applied to the checkbox.
+          * The size of the checkbox to be displayed. This does not affect the font size of the label. If a checkbox is contained in a checkbox group, this will override the size set on checkbox group.
+         */
+        "size"?: IcSizes;
+        /**
+          * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
          */
         "small"?: boolean;
         /**
@@ -330,7 +336,11 @@ export namespace Components {
          */
         "required": boolean;
         /**
-          * If `true`, the small styling will be applied to the checkbox group.
+          * The size of the checkboxes to be displayed. This does not affect the font size of the label.
+         */
+        "size"?: IcSizes;
+        /**
+          * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
          */
         "small": boolean;
         /**
@@ -366,7 +376,7 @@ export namespace Components {
         /**
           * The size of the chip.
          */
-        "size"?: IcChipSizes;
+        "size"?: IcSizes;
     }
     interface IcClassificationBanner {
         /**
@@ -478,6 +488,32 @@ export namespace Components {
     }
     interface IcDivider {
     }
+    interface IcEmptyState {
+        /**
+          * The alignment of the empty state container.
+         */
+        "aligned"?: IcEmptyStateAlignment;
+        /**
+          * The body text rendered in the empty state container.
+         */
+        "body"?: string;
+        /**
+          * The number of lines of body text to display before truncating.
+         */
+        "bodyMaxLines"?: number;
+        /**
+          * The title rendered in the empty state container.
+         */
+        "heading": string;
+        /**
+          * The size of the image or icon used in the image slot.
+         */
+        "imageSize"?: IcSizes;
+        /**
+          * The subtitle rendered in the empty state container.
+         */
+        "subheading"?: string;
+    }
     interface IcFooter {
         /**
           * The alignment of the section containers used within the footer.
@@ -791,6 +827,10 @@ export namespace Components {
           * The label for the input element.
          */
         "inputLabel": string;
+        /**
+          * The custom name for the label field for IcMenuOption.
+         */
+        "labelField": string;
         /**
           * The ID of the menu.
          */
@@ -816,6 +856,10 @@ export namespace Components {
           * The value of the currently selected option.
          */
         "value": string;
+        /**
+          * The custom name for the value field for IcMenuOption.
+         */
+        "valueField": string;
     }
     interface IcMenuGroup {
         /**
@@ -1246,6 +1290,10 @@ export namespace Components {
           * The label for the search bar.
          */
         "label": string;
+        /**
+          * The custom name for the label field to correspond with the IcMenuOption type.
+         */
+        "labelField"?: string;
         /**
           * Trigger loading state when fetching options asyncronously
          */
@@ -1302,6 +1350,10 @@ export namespace Components {
           * The value of the search input.
          */
         "value": string;
+        /**
+          * The custom name for the value field to correspond with the IcMenuOption type.
+         */
+        "valueField"?: string;
     }
     interface IcSectionContainer {
         /**
@@ -1449,6 +1501,10 @@ export namespace Components {
          */
         "href": string;
         "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).
          */
@@ -1872,10 +1928,26 @@ export namespace Components {
           * If `true`, appropriate top and bottom margins will be applied to the typography.
          */
         "applyVerticalMargins"?: boolean;
+        /**
+          * If `true`, the typography will have a bold font weight. Note: This will have no impact on variants that already use an equivalent or higher font weight (h1, h2, and subtitle-large).
+         */
+        "bold"?: boolean;
+        /**
+          * If `true`, the typography will have an italic font style.
+         */
+        "italic"?: boolean;
         /**
           * The number of lines to display before truncating the text, only used for the 'body' variant.
          */
         "maxLines"?: number;
+        /**
+          * If `true`, the typography will have a line through it.
+         */
+        "strikethrough"?: boolean;
+        /**
+          * If `true`, the typography will have a line under it.
+         */
+        "underline"?: boolean;
         /**
           * The ICDS typography style to use.
          */
@@ -2067,6 +2139,12 @@ declare global {
         prototype: HTMLIcDividerElement;
         new (): HTMLIcDividerElement;
     };
+    interface HTMLIcEmptyStateElement extends Components.IcEmptyState, HTMLStencilElement {
+    }
+    var HTMLIcEmptyStateElement: {
+        prototype: HTMLIcEmptyStateElement;
+        new (): HTMLIcEmptyStateElement;
+    };
     interface HTMLIcFooterElement extends Components.IcFooter, HTMLStencilElement {
     }
     var HTMLIcFooterElement: {
@@ -2346,6 +2424,7 @@ declare global {
         "ic-data-row": HTMLIcDataRowElement;
         "ic-dialog": HTMLIcDialogElement;
         "ic-divider": HTMLIcDividerElement;
+        "ic-empty-state": HTMLIcEmptyStateElement;
         "ic-footer": HTMLIcFooterElement;
         "ic-footer-link": HTMLIcFooterLinkElement;
         "ic-footer-link-group": HTMLIcFooterLinkGroupElement;
@@ -2419,7 +2498,7 @@ declare namespace LocalJSX {
          */
         "onIcDismiss"?: (event: IcAlertCustomEvent<void>) => void;
         /**
-          * If `true`, the title and message will appear inline instead of above and below.
+          * If `true`, the title and message will appear above and below instead of inline.
          */
         "titleAbove"?: boolean;
         /**
@@ -2533,7 +2612,7 @@ declare namespace LocalJSX {
         /**
           * The size of the button to be displayed.
          */
-        "size"?: IcButtonSizes;
+        "size"?: IcSizes;
         /**
           * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
          */
@@ -2643,7 +2722,11 @@ declare namespace LocalJSX {
          */
         "onIcCheck"?: (event: IcCheckboxCustomEvent<void>) => void;
         /**
-          * If true, the small styling will be applied to the checkbox.
+          * The size of the checkbox to be displayed. This does not affect the font size of the label. If a checkbox is contained in a checkbox group, this will override the size set on checkbox group.
+         */
+        "size"?: IcSizes;
+        /**
+          * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
          */
         "small"?: boolean;
         /**
@@ -2681,7 +2764,11 @@ declare namespace LocalJSX {
          */
         "required"?: boolean;
         /**
-          * If `true`, the small styling will be applied to the checkbox group.
+          * The size of the checkboxes to be displayed. This does not affect the font size of the label.
+         */
+        "size"?: IcSizes;
+        /**
+          * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
          */
         "small"?: boolean;
         /**
@@ -2721,7 +2808,7 @@ declare namespace LocalJSX {
         /**
           * The size of the chip.
          */
-        "size"?: IcChipSizes;
+        "size"?: IcSizes;
     }
     interface IcClassificationBanner {
         /**
@@ -2833,6 +2920,32 @@ declare namespace LocalJSX {
     }
     interface IcDivider {
     }
+    interface IcEmptyState {
+        /**
+          * The alignment of the empty state container.
+         */
+        "aligned"?: IcEmptyStateAlignment;
+        /**
+          * The body text rendered in the empty state container.
+         */
+        "body"?: string;
+        /**
+          * The number of lines of body text to display before truncating.
+         */
+        "bodyMaxLines"?: number;
+        /**
+          * The title rendered in the empty state container.
+         */
+        "heading": string;
+        /**
+          * The size of the image or icon used in the image slot.
+         */
+        "imageSize"?: IcSizes;
+        /**
+          * The subtitle rendered in the empty state container.
+         */
+        "subheading"?: string;
+    }
     interface IcFooter {
         /**
           * The alignment of the section containers used within the footer.
@@ -3132,6 +3245,10 @@ declare namespace LocalJSX {
           * The label for the input element.
          */
         "inputLabel": string;
+        /**
+          * The custom name for the label field for IcMenuOption.
+         */
+        "labelField"?: string;
         /**
           * The ID of the menu.
          */
@@ -3156,6 +3273,10 @@ declare namespace LocalJSX {
           * The value of the currently selected option.
          */
         "value": string;
+        /**
+          * The custom name for the value field for IcMenuOption.
+         */
+        "valueField"?: string;
     }
     interface IcMenuGroup {
         /**
@@ -3578,6 +3699,10 @@ declare namespace LocalJSX {
           * The label for the search bar.
          */
         "label": string;
+        /**
+          * The custom name for the label field to correspond with the IcMenuOption type.
+         */
+        "labelField"?: string;
         /**
           * Trigger loading state when fetching options asyncronously
          */
@@ -3674,6 +3799,10 @@ declare namespace LocalJSX {
           * The value of the search input.
          */
         "value"?: string;
+        /**
+          * The custom name for the value field to correspond with the IcMenuOption type.
+         */
+        "valueField"?: string;
     }
     interface IcSectionContainer {
         /**
@@ -3844,6 +3973,10 @@ declare namespace LocalJSX {
           * The URL that the app title link points to.
          */
         "href"?: string;
+        /**
+          * 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).
          */
@@ -4256,10 +4389,26 @@ declare namespace LocalJSX {
           * If `true`, appropriate top and bottom margins will be applied to the typography.
          */
         "applyVerticalMargins"?: boolean;
+        /**
+          * If `true`, the typography will have a bold font weight. Note: This will have no impact on variants that already use an equivalent or higher font weight (h1, h2, and subtitle-large).
+         */
+        "bold"?: boolean;
+        /**
+          * If `true`, the typography will have an italic font style.
+         */
+        "italic"?: boolean;
         /**
           * The number of lines to display before truncating the text, only used for the 'body' variant.
          */
         "maxLines"?: number;
+        /**
+          * If `true`, the typography will have a line through it.
+         */
+        "strikethrough"?: boolean;
+        /**
+          * If `true`, the typography will have a line under it.
+         */
+        "underline"?: boolean;
         /**
           * The ICDS typography style to use.
          */
@@ -4280,6 +4429,7 @@ declare namespace LocalJSX {
         "ic-data-row": IcDataRow;
         "ic-dialog": IcDialog;
         "ic-divider": IcDivider;
+        "ic-empty-state": IcEmptyState;
         "ic-footer": IcFooter;
         "ic-footer-link": IcFooterLink;
         "ic-footer-link-group": IcFooterLinkGroup;
@@ -4344,6 +4494,7 @@ declare module "@stencil/core" {
             "ic-data-row": LocalJSX.IcDataRow & JSXBase.HTMLAttributes<HTMLIcDataRowElement>;
             "ic-dialog": LocalJSX.IcDialog & JSXBase.HTMLAttributes<HTMLIcDialogElement>;
             "ic-divider": LocalJSX.IcDivider & JSXBase.HTMLAttributes<HTMLIcDividerElement>;
+            "ic-empty-state": LocalJSX.IcEmptyState & JSXBase.HTMLAttributes<HTMLIcEmptyStateElement>;
             "ic-footer": LocalJSX.IcFooter & JSXBase.HTMLAttributes<HTMLIcFooterElement>;
             "ic-footer-link": LocalJSX.IcFooterLink & JSXBase.HTMLAttributes<HTMLIcFooterLinkElement>;
             "ic-footer-link-group": LocalJSX.IcFooterLinkGroup & JSXBase.HTMLAttributes<HTMLIcFooterLinkGroupElement>;

package/dist/types/stencil-public-runtime.d.ts

@@ -62,7 +62,7 @@ export interface PropOptions {
     /**
      * The name of the associated DOM attribute.
      * Stencil uses different heuristics to determine the default name of the attribute,
-     * but using this property, you can override the default behaviour.
+     * but using this property, you can override the default behavior.
      */
     attribute?: string | null;
     /**
@@ -128,7 +128,7 @@ export interface ListenOptions {
      * By default, Stencil uses several heuristics to determine if
      * it must attach a `passive` event listener or not.
      *
-     * Using the `passive` option can be used to change the default behaviour.
+     * Using the `passive` option can be used to change the default behavior.
      * Please see https://developers.google.com/web/updates/2016/06/passive-event-listeners for further information.
      */
     passive?: boolean;
@@ -432,7 +432,7 @@ export interface QueueApi {
 /**
  * Host
  */
-interface HostAttributes {
+export interface HostAttributes {
     class?: string | {
         [className: string]: boolean;
     };
@@ -471,7 +471,7 @@ export interface FunctionalUtilities {
     /**
      * Utility for reading the children of a functional component at runtime.
      * Since the Stencil runtime uses a different interface for children it is
-     * not recommendeded to read the children directly, and is preferable to use
+     * not recommended to read the children directly, and is preferable to use
      * this utility to, for instance, perform a side effect for each child.
      */
     forEach: (children: VNode[], cb: (vnode: ChildNode, index: number, array: ChildNode[]) => void) => void;
@@ -872,6 +872,8 @@ export declare namespace JSXBase {
     }
     interface ImgHTMLAttributes<T> extends HTMLAttributes<T> {
         alt?: string;
+        crossOrigin?: string;
+        crossorigin?: string;
         decoding?: 'async' | 'auto' | 'sync';
         importance?: 'low' | 'auto' | 'high';
         height?: number | string;
@@ -930,6 +932,8 @@ export declare namespace JSXBase {
         minlength?: number | string;
         multiple?: boolean;
         name?: string;
+        onSelect?: (event: Event) => void;
+        onselect?: (event: Event) => void;
         pattern?: string;
         placeholder?: string;
         readOnly?: boolean;
@@ -1143,6 +1147,8 @@ export declare namespace JSXBase {
         minLength?: number;
         minlength?: number | string;
         name?: string;
+        onSelect?: (event: Event) => void;
+        onselect?: (event: Event) => void;
         placeholder?: string;
         readOnly?: boolean;
         readonly?: boolean | string;
@@ -1289,7 +1295,7 @@ export declare namespace JSXBase {
         clipPathUnits?: number | string;
         'clip-rule'?: number | string;
         'color-interpolation'?: number | string;
-        'color-interpolation-filters'?: 'auto' | 's-rGB' | 'linear-rGB' | 'inherit';
+        'color-interpolation-filters'?: 'auto' | 'sRGB' | 'linearRGB';
         'color-profile'?: number | string;
         'color-rendering'?: number | string;
         contentScriptType?: number | string;
@@ -1619,8 +1625,14 @@ export declare namespace JSXBase {
         onAnimationEndCapture?: (event: AnimationEvent) => void;
         onAnimationIteration?: (event: AnimationEvent) => void;
         onAnimationIterationCapture?: (event: AnimationEvent) => void;
+        onTransitionCancel?: (event: TransitionEvent) => void;
+        onTransitionCancelCapture?: (event: TransitionEvent) => void;
         onTransitionEnd?: (event: TransitionEvent) => void;
         onTransitionEndCapture?: (event: TransitionEvent) => void;
+        onTransitionRun?: (event: TransitionEvent) => void;
+        onTransitionRunCapture?: (event: TransitionEvent) => void;
+        onTransitionStart?: (event: TransitionEvent) => void;
+        onTransitionStartCapture?: (event: TransitionEvent) => void;
     }
 }
 export interface JSXAttributes<T = Element> {

package/dist/types/utils/helpers.d.ts

@@ -60,7 +60,7 @@ export declare const isEmptyString: (value: string) => boolean;
  * @param options - list of menu items
  * @returns - label corresponding to value
  */
-export declare const getLabelFromValue: (value: string, options: IcMenuOption[]) => string | undefined;
+export declare const getLabelFromValue: (value: string, options: IcMenuOption[], valueField?: string, labelField?: string) => string | undefined;
 /**
  * Filters the options based on the search string.
  * @param options - array of options
@@ -69,7 +69,7 @@ export declare const getLabelFromValue: (value: string, options: IcMenuOption[])
  * @param position - whether the search string matches the start of or anywhere in the options
  * @returns filtered array of options
  */
-export declare const getFilteredMenuOptions: (options: IcMenuOption[], includeDescriptions: boolean, searchString: string, position: IcSearchMatchPositions) => IcMenuOption[];
+export declare const getFilteredMenuOptions: (options: IcMenuOption[], includeDescriptions: boolean, searchString: string, position: IcSearchMatchPositions, labelField?: string) => IcMenuOption[];
 export declare const deviceSizeMatches: (size: number) => boolean;
 export declare const getCurrentDeviceSize: () => number;
 export declare const getCssProperty: (cssVar: string) => string;

package/dist/types/utils/types.d.ts

@@ -36,15 +36,24 @@ export type IcNavParentDetails = {
   parent: HTMLElement;
 };
 export type IcTypographyVariants = "h1" | "h2" | "h3" | "h4" | "subtitle-large" | "subtitle-small" | "body" | "label" | "label-uppercase" | "caption" | "caption-uppercase" | "code-large" | "code-small" | "code-extra-small";
+/**
+ * @interface IcMenuOption
+ * @field {string} A label field to options. Defaults to "label", but can have any custom name.
+ * @field {string} A value field to options. Defaults to "value", but can have any custom name.
+ */
 export interface IcMenuOption {
-  value?: string;
-  label: string;
   description?: string;
   disabled?: boolean;
   recommended?: boolean;
   children?: IcMenuOption[];
   loading?: boolean;
   timedOut?: boolean;
+  [key: string]: any;
+  element?: {
+    component: any;
+    ariaLabel: string;
+  };
+  icon?: any;
 }
 export type IcSearchMatchPositions = "start" | "anywhere";
 export type IcCallbackFunctionNoReturn = (...args: unknown[]) => void;
@@ -55,6 +64,7 @@ export type IcPropObject = {
 };
 export type IcRelatedTarget = EventTarget | undefined;
 export type IcOrientation = "horizontal" | "vertical";
+export type IcSizes = "default" | "large" | "small";
 export interface IcValueEventDetail {
   value: string;
   keyPressed?: string;

package/hydrate/index.d.ts

@@ -1,4 +1,4 @@
-// Generated by dts-bundle-generator v7.2.0
+// Generated by dts-bundle-generator v8.0.1
 
 export declare function createWindowFromHtml(templateHtml: string, uniqueId: string): any;
 export interface HydrateDocumentOptions {
@@ -14,7 +14,7 @@ export interface HydrateDocumentOptions {
 	 */
 	canonicalUrl?: string;
 	/**
-	 * Include the HTML comments and attributes used by the clientside
+	 * Include the HTML comments and attributes used by the client-side
 	 * JavaScript to read the structure of the HTML and rebuild each
 	 * component. Defaults to `true`.
 	 */
@@ -35,7 +35,7 @@ export interface HydrateDocumentOptions {
 	direction?: string;
 	/**
 	 * Component tag names listed here will not be prerendered, nor will
-	 * hydrated on the clientside. Components listed here will be ignored
+	 * hydrated on the client-side. Components listed here will be ignored
 	 * as custom elements and treated no differently than a `<div>`.
 	 */
 	excludeComponents?: string[];
@@ -68,11 +68,11 @@ export interface HydrateDocumentOptions {
 	 */
 	runtimeLogging?: boolean;
 	/**
-	 * Component tags listed here will only be prerendered or serverside-rendered
-	 * and will not be clientside hydrated. This is useful for components that
+	 * Component tags listed here will only be prerendered or server-side-rendered
+	 * and will not be client-side hydrated. This is useful for components that
 	 * are not dynamic and do not need to be defined as a custom element within the
 	 * browser. For example, a header or footer component would be a good example that
-	 * may not require any clientside JavaScript.
+	 * may not require any client-side JavaScript.
 	 */
 	staticComponents?: string[];
 	/**