@gov-design-system-ce/components 0.0.1 → 0.0.2

package/dist/types/components/gov-form/input/constants.d.ts

@@ -1,13 +1,13 @@
-import { Sizes as GlobalSizes } from "../../../core/constants/sizes";
-import { Variants as GlobalVariants } from "../../../core/constants/variants";
+import { Sizes as GlobalSizes } from '../../../core/constants/sizes';
+import { Variants as GlobalVariants } from '../../../core/constants/variants';
 export declare const Sizes: readonly [any, GlobalSizes._M, GlobalSizes._L, GlobalSizes._XL];
-export declare type SizesType = typeof Sizes[number];
+export declare type SizesType = (typeof Sizes)[number];
 export declare const Variants: readonly [any, GlobalVariants.PRIMARY, GlobalVariants.SECONDARY];
-export declare type VariantType = typeof Variants[number];
+export declare type VariantType = (typeof Variants)[number];
 export declare const InputTypes: readonly [any, "color", "date", "datetime-local", "email", "month", "number", "password", "search", "tel", "text", "time", "url", "week"];
-export declare type InputType = typeof InputTypes[number];
+export declare type InputType = (typeof InputTypes)[number];
 export declare const Types: readonly [any, "reset"];
-export declare type Type = typeof Types[number];
+export declare type Type = (typeof Types)[number];
 export declare const FormInputClass: {
   root: string;
 };

package/dist/types/components/gov-form/input/gov-form-input.d.ts

@@ -1,6 +1,6 @@
-import { EventEmitter } from "../../../stencil-public-runtime";
-import { SizesType, InputType, Type } from "./constants";
-import { VariantType } from "./constants";
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { SizesType, InputType, Type } from './constants';
+import { VariantType } from './constants';
 export declare class GovFormInput {
   private f;
   private h;
@@ -127,7 +127,7 @@ export declare class GovFormInput {
   /**
    * Emitted when the input change value.
    */
-  govInput: EventEmitter;
+  govInput: EventEmitter<InputEvent>;
   /**
    * Emitted when the input change value.
    */

package/dist/types/components/gov-form/label/gov-form-label.d.ts

@@ -1,9 +1,14 @@
-import { EventEmitter } from "../../../stencil-public-runtime";
+import { EventEmitter } from '../../../stencil-public-runtime';
 export declare class GovFormLabel {
   /**
    * Identifier for label.
    */
   readonly identifier: string;
+  /**
+   * Use label as a legend for better accessibility.
+   * Note: Don't forget to set the fieldset attribute of the gov-form-control component
+   */
+  readonly legend: boolean;
   /**
    * Emitted when the label click.
    */

package/dist/types/components/gov-form/message/constants.d.ts

@@ -1,6 +1,6 @@
-import { Variants as GlobalVariants } from "../../../core/constants/variants";
+import { Variants as GlobalVariants } from '../../../core/constants/variants';
 export declare const Variants: readonly [any, GlobalVariants.SECONDARY, GlobalVariants.SUCCESS, GlobalVariants.ERROR, GlobalVariants.WARNING];
-export declare type VariantType = typeof Variants[number];
+export declare type VariantType = (typeof Variants)[number];
 export declare const FormMessageClass: {
   root: string;
   content: string;

package/dist/types/components/gov-form/message/gov-form-message.d.ts

@@ -1,5 +1,5 @@
-import { VariantType } from "./constants";
-import { GovHost } from "../../../helpers/Dom/template.d";
+import { VariantType } from './constants';
+import { GovHost } from '../../../helpers/Dom/template.d';
 export declare class GovFormMessage {
   h: GovHost;
   private readonly messageId;

package/dist/types/components/gov-form/multiselect/constants.d.ts

@@ -0,0 +1,12 @@
+import { Sizes as GlobalSizes } from '../../../core/constants/sizes';
+import { Variants as GlobalVariants } from '../../../core/constants/variants';
+export declare const Sizes: readonly [any, GlobalSizes._M, GlobalSizes._L, GlobalSizes._XL];
+export declare type SizesType = (typeof Sizes)[number];
+export declare const Variants: readonly [any, GlobalVariants.PRIMARY, GlobalVariants.SECONDARY];
+export declare type VariantType = (typeof Variants)[number];
+export declare const FormMultiSelectClass: {
+  root: string;
+  wrap: string;
+  list: string;
+  item: string;
+};

package/dist/types/components/gov-form/{select → multiselect}/gov-form-multi-select.d.ts

@@ -1,6 +1,6 @@
-import { EventEmitter } from "../../../stencil-public-runtime";
-import { SizesType, VariantType } from "./constants";
-import { GovFormMultiSelectItem } from './gov-form-multi-select.d';
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { SizesType, VariantType } from './constants';
+import { GovFormMultiSelectItem } from "./interfaces";
 export declare class GovFormMultiSelect {
   private selectRef?;
   private autocompleteRef?;
@@ -65,7 +65,7 @@ export declare class GovFormMultiSelect {
   /**
    * Emitted when the select change value.
    */
-  govChange: EventEmitter;
+  govChange: EventEmitter<GovFormMultiSelectItem[]>;
   focused: boolean;
   value: string;
   selectedOptions: GovFormMultiSelectItem[];

package/dist/types/components/gov-form/multiselect/interfaces.d.ts

@@ -0,0 +1,4 @@
+export interface GovFormMultiSelectItem {
+  name: string;
+  value: string;
+}

package/dist/types/components/gov-form/radio/constants.d.ts

@@ -1,6 +1,6 @@
-import { Sizes as GlobalSizes } from "../../../core/constants/sizes";
+import { Sizes as GlobalSizes } from '../../../core/constants/sizes';
 export declare const Sizes: readonly [any, GlobalSizes._XS, GlobalSizes._S, GlobalSizes._M, GlobalSizes._L];
-export declare type SizesType = typeof Sizes[number];
+export declare type SizesType = (typeof Sizes)[number];
 export declare const FormRadioClass: {
   root: string;
   holder: string;

package/dist/types/components/gov-form/radio/gov-form-radio.d.ts

@@ -1,5 +1,6 @@
-import { EventEmitter } from "../../../stencil-public-runtime";
-import { SizesType } from "./constants";
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { SizesType } from './constants';
+import { GovFormRadioChangeEvent } from './interfaces';
 export declare class GovFormRadio {
   private h;
   private f;
@@ -59,7 +60,7 @@ export declare class GovFormRadio {
   /**
    * Emitted when the radio change value.
    */
-  govChange: EventEmitter;
+  govChange: EventEmitter<GovFormRadioChangeEvent>;
   isChecked: boolean;
   updateCheckedState(newValue: boolean): void;
   validateSize(newValue: string): void;

package/dist/types/components/gov-form/radio/interfaces.d.ts

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

package/dist/types/components/gov-form/search/constants.d.ts

@@ -1,9 +1,9 @@
-import { Sizes as GlobalSizes } from "../../../core/constants/sizes";
-import { Variants as GlobalVariants } from "../../../core/constants/variants";
+import { Sizes as GlobalSizes } from '../../../core/constants/sizes';
+import { Variants as GlobalVariants } from '../../../core/constants/variants';
 export declare const Variants: readonly [any, GlobalVariants.PRIMARY, GlobalVariants.SECONDARY, GlobalVariants.SUCCESS, GlobalVariants.ERROR, GlobalVariants.WARNING];
-export declare type VariantType = typeof Variants[number];
+export declare type VariantType = (typeof Variants)[number];
 export declare const Sizes: readonly [any, GlobalSizes._M, GlobalSizes._L, GlobalSizes._XL];
-export declare type SizesType = typeof Sizes[number];
+export declare type SizesType = (typeof Sizes)[number];
 export declare const FormSearchClass: {
   root: string;
   input: string;

package/dist/types/components/gov-form/search/gov-form-search.d.ts

@@ -1,16 +1,4 @@
-import { SizesType, VariantType } from './constants';
 export declare class GovFormSearch {
   host: HTMLGovFormSearchElement;
-  /**
-   * Size variation of the component.
-   */
-  readonly size: SizesType;
-  /**
-   * Style variation of the component.
-   */
-  readonly variant: VariantType;
-  validateSize(newValue: string): void;
-  validateVariant(newValue: string): void;
-  componentWillLoad(): void;
   render(): any;
 }

package/dist/types/components/gov-form/select/constants.d.ts

@@ -1,16 +1,10 @@
-import { Sizes as GlobalSizes } from "../../../core/constants/sizes";
-import { Variants as GlobalVariants } from "../../../core/constants/variants";
+import { Sizes as GlobalSizes } from '../../../core/constants/sizes';
+import { Variants as GlobalVariants } from '../../../core/constants/variants';
 export declare const Sizes: readonly [any, GlobalSizes._M, GlobalSizes._L, GlobalSizes._XL];
-export declare type SizesType = typeof Sizes[number];
+export declare type SizesType = (typeof Sizes)[number];
 export declare const Variants: readonly [any, GlobalVariants.PRIMARY, GlobalVariants.SECONDARY];
-export declare type VariantType = typeof Variants[number];
+export declare type VariantType = (typeof Variants)[number];
 export declare const FormSelectClass: {
   root: string;
   icon: string;
 };
-export declare const FormMultiSelectClass: {
-  root: string;
-  wrap: string;
-  list: string;
-  item: string;
-};

package/dist/types/components/gov-form/select/gov-form-select.d.ts

@@ -1,5 +1,5 @@
-import { EventEmitter } from "../../../stencil-public-runtime";
-import { SizesType, VariantType } from "./constants";
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { SizesType, VariantType } from './constants';
 export declare class GovFormSelect {
   private f;
   private h;

package/dist/types/components/gov-form/switch/constants.d.ts

@@ -1,6 +1,6 @@
-import { Sizes as GlobalSizes } from "../../../core/constants/sizes";
+import { Sizes as GlobalSizes } from '../../../core/constants/sizes';
 export declare const Sizes: readonly [any, GlobalSizes._XS, GlobalSizes._S, GlobalSizes._M, GlobalSizes._L];
-export declare type SizesType = typeof Sizes[number];
+export declare type SizesType = (typeof Sizes)[number];
 export declare const FormSwitchClass: {
   root: string;
   holder: string;

package/dist/types/components/gov-form/switch/gov-form-switch.d.ts

@@ -1,6 +1,8 @@
-import { EventEmitter } from "../../../stencil-public-runtime";
-import { SizesType } from "./constants";
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { SizesType } from './constants';
+import { GovFormSwitchChangeEvent } from './interfaces';
 export declare class GovFormSwitch {
+  private h;
   private f;
   private readonly checkboxId;
   constructor();
@@ -58,7 +60,7 @@ export declare class GovFormSwitch {
   /**
    * Emitted when the switch change value.
    */
-  govChange: EventEmitter;
+  govChange: EventEmitter<GovFormSwitchChangeEvent>;
   isChecked: boolean;
   updateCheckedState(newValue: boolean): void;
   validateSize(newValue: string): void;

package/dist/types/components/gov-form/switch/interfaces.d.ts

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

package/dist/types/components/gov-grid/constants.d.ts

@@ -1,3 +1,9 @@
+import { Sizes as GlobalSizes } from '../../core/constants/sizes';
+export declare const Sizes: readonly [any, GlobalSizes._2XS, GlobalSizes._XS, GlobalSizes._S, GlobalSizes._M, GlobalSizes._L, GlobalSizes._XL, GlobalSizes._2XL, GlobalSizes._3XL, GlobalSizes._4XL];
+export declare type SizesType = (typeof Sizes)[number];
 export declare const GridClass: {
   root: string;
 };
+export declare const GridItemClass: {
+  root: string;
+};

package/dist/types/components/gov-grid/gov-grid-item.d.ts

@@ -0,0 +1,26 @@
+export declare class GovGridItem {
+  private h;
+  constructor();
+  readonly host: HTMLGovGridItemElement;
+  /**
+   * Cell size as a fraction of 1/12 of the grid size
+   */
+  readonly size: string;
+  /**
+   * Cell size for SM media query and up as a fraction of 12 of the grid size
+   */
+  readonly sizeSm: string;
+  /**
+   * Cell size for MD media query and up as a fraction of 12 of the grid size
+   */
+  readonly sizeMd: string;
+  /**
+   * Cell size for LG media query and up as a fraction of 12 of the grid size
+   */
+  readonly sizeLg: string;
+  /**
+   * Cell size for XL media query and up as a fraction of 12 of the grid size
+   */
+  readonly sizeXl: string;
+  render(): any;
+}

package/dist/types/components/gov-grid/gov-grid.d.ts

@@ -1,10 +1,14 @@
 export declare class GovGrid {
+  private h;
   constructor();
+  host: HTMLGovGridElement;
   /**
-   * Determide if component should have inversed colors to be used on dark background
+   * Horizontal align of cells
    */
-  readonly columns: number;
-  host: HTMLGovGridElement;
-  get classNames(): string;
+  readonly alignX: string;
+  /**
+   * Vertical align of cells
+   */
+  readonly alignY: string;
   render(): any;
 }

package/dist/types/components/gov-icon/constants.d.ts

@@ -1,5 +1,5 @@
 export declare const Types: readonly ["basic", "complex", "colored"];
-export declare type Type = typeof Types[number];
+export declare type Type = (typeof Types)[number];
 export declare const IconClass: {
   root: string;
   holder: string;

package/dist/types/components/gov-icon/gov-icon.d.ts

@@ -1,6 +1,8 @@
-import { Type } from "./constants";
+import { Type } from './constants';
 export declare class GovIcon {
-  el: HTMLElement;
+  private h;
+  constructor();
+  host: HTMLGovIconElement;
   /**
    * Name of icon
    */

package/dist/types/components/gov-layout/constants.d.ts

@@ -0,0 +1,12 @@
+export declare const LayoutClass: {
+  root: string;
+  section: string;
+  content: string;
+  aside: string;
+};
+export declare const LayoutAsideClass: {
+  root: string;
+};
+export declare const LayoutContentClass: {
+  root: string;
+};

package/dist/types/components/gov-layout/gov-layout-aside.d.ts

@@ -0,0 +1,10 @@
+export declare class GovLayoutAside {
+  private h;
+  constructor();
+  readonly host: HTMLGovLayoutAsideElement;
+  /**
+   * Vertical position of component on desktop.
+   */
+  readonly position: string;
+  render(): any;
+}

package/dist/types/components/gov-layout/gov-layout-content.d.ts

@@ -0,0 +1,10 @@
+export declare class GovLayoutContent {
+  private h;
+  constructor();
+  readonly host: HTMLGovLayoutContentElement;
+  /**
+   * Vertical align of component on desktop.
+   */
+  readonly align: string;
+  render(): any;
+}

package/dist/types/components/gov-layout/gov-layout.d.ts

@@ -0,0 +1,6 @@
+export declare class GovLayout {
+  private h;
+  constructor();
+  host: HTMLGovLayoutElement;
+  render(): any;
+}

package/dist/types/components/gov-loading/constants.d.ts

@@ -0,0 +1,5 @@
+export declare const LoadingClass: {
+  root: string;
+  content: string;
+  icon: string;
+};

package/dist/types/components/gov-loading/gov-loading.d.ts

@@ -0,0 +1,10 @@
+export declare class GovLoading {
+  private h;
+  constructor();
+  host: HTMLGovLoadingElement;
+  /**
+   * Determine if loading is active
+   */
+  loading: boolean;
+  render(): any;
+}

package/dist/types/components/gov-message/constants.d.ts

@@ -1,6 +1,6 @@
 import { Variants as GlobalVariants } from '../../core/constants/variants';
 export declare const Variants: readonly [any, GlobalVariants.PRIMARY, GlobalVariants.SECONDARY, GlobalVariants.WARNING, GlobalVariants.ERROR, GlobalVariants.SUCCESS];
-export declare type VariantType = typeof Variants[number];
+export declare type VariantType = (typeof Variants)[number];
 export declare const MessageClass: {
   root: string;
   icon: string;

package/dist/types/components/gov-modal/gov-modal.d.ts

@@ -1,4 +1,4 @@
-import { EventEmitter } from "../../stencil-public-runtime";
+import { EventEmitter } from '../../stencil-public-runtime';
 export declare class GovModal {
   private h;
   private readonly labelId;

package/dist/types/components/gov-nav/constants.d.ts

@@ -0,0 +1,8 @@
+export declare const NavClass: {
+  root: string;
+  nav: string;
+};
+export declare const NavItemClass: {
+  root: string;
+  link: string;
+};

package/dist/types/components/gov-nav/gov-nav-item.d.ts

@@ -0,0 +1,12 @@
+export declare class GovNavItem {
+  readonly host: HTMLGovNavItemElement;
+  isExpandedState: boolean;
+  /**
+   * Same as original parameter
+   * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-href
+   */
+  readonly href: string;
+  validateHref(newValue: string): void;
+  componentWillLoad(): void;
+  render(): any;
+}

package/dist/types/components/gov-nav/gov-nav.d.ts

@@ -0,0 +1,17 @@
+export declare class GovNav {
+  readonly host: HTMLGovNavElement;
+  /**
+   * Adds accessible label for the accordion that is only shown for screen readers.
+   */
+  readonly wcagLabel: string;
+  /**
+   * String of id's that indicate alternative labels elements
+   */
+  readonly wcagLabelledBy: string;
+  componentDidRender(): Promise<void>;
+  render(): any;
+  /**
+   * Validate the WCAG attributes of the component
+   */
+  validateWcag(): Promise<void>;
+}

package/dist/types/components/gov-pagination/constants.d.ts

@@ -1,8 +1,18 @@
+import { Sizes as GlobalSizes } from '../../core/constants/sizes';
+import { Variants as GlobalVariants } from '../../core/constants/variants';
+export declare const Sizes: readonly [GlobalSizes._S, GlobalSizes._M, any];
+export declare type SizeType = (typeof Sizes)[number];
+export declare const Variants: readonly [any, GlobalVariants.PRIMARY, GlobalVariants.SECONDARY, GlobalVariants.CUSTOM];
+export declare type VariantType = (typeof Variants)[number];
+export declare const Types: readonly [any, "button", "select"];
+export declare type Type = (typeof Types)[number];
 export declare const PaginationClass: {
   root: string;
   list: string;
   item: string;
   itemArrow: string;
+  itemMore: string;
   itemSelect: string;
   inner: string;
+  arrow: string;
 };

package/dist/types/components/gov-pagination/gov-pagination.d.ts

@@ -1,14 +1,35 @@
 import { EventEmitter } from "../../stencil-public-runtime";
+import { SizeType, VariantType, Type } from "./constants";
 import { Pagination } from "./pagination";
 export declare class GovPagination {
-  readonly host: HTMLGovPaginationElement;
+  private h;
   private readonly pageSelectId;
   constructor();
+  readonly host: HTMLGovPaginationElement;
+  /**
+   * Pagination type
+   */
+  readonly type: Type;
   /**
    * Currently displayed page
    */
   readonly current: number;
+  /**
+   * Total count of entries
+   */
   readonly total: number;
+  /**
+   * Set on active page
+   */
+  readonly inverse: boolean;
+  /**
+   * Pagination's size
+   */
+  readonly size: SizeType;
+  /**
+   * Style variation of the pagination.
+   */
+  readonly variant: VariantType;
   /**
    * Maximum number of entries per page
    */
@@ -44,6 +65,9 @@ export declare class GovPagination {
    */
   govPage: EventEmitter<Pagination>;
   pagination: Pagination;
+  validateType(newValue: string): void;
+  validateSize(newValue: string): void;
+  validateVariant(newValue: string): void;
   componentWillLoad(): void;
   componentDidRender(): Promise<void>;
   private recalculatePagination;

package/dist/types/components/gov-promp/constants.d.ts

@@ -5,6 +5,7 @@ export declare const PromptClass: {
   header: string;
   icon: string;
   title: string;
+  close: string;
   content: string;
   actions: string;
   bodyFix: string;

package/dist/types/components/gov-promp/gov-prompt.d.ts

@@ -1,4 +1,4 @@
-import { EventEmitter } from "../../stencil-public-runtime";
+import { EventEmitter } from '../../stencil-public-runtime';
 export declare class GovPrompt {
   private h;
   private readonly labelId;

package/dist/types/components/gov-side-nav/constants.d.ts

@@ -1,5 +1,6 @@
 export declare const SideNavClass: {
   root: string;
+  aside: string;
 };
 export declare const SideNavItemClass: {
   root: string;

package/dist/types/components/gov-side-nav/gov-side-nav-item.d.ts

@@ -1,5 +1,5 @@
-import { EventEmitter } from "../../stencil-public-runtime";
-import { GovSideNavItemChangeEvent } from "./gov-side-nav-item.d";
+import { EventEmitter } from '../../stencil-public-runtime';
+import { GovSideNavItemChangeEvent } from './gov-side-nav-item.d';
 export declare class GovSideNavItem {
   private h;
   constructor();

package/dist/types/components/gov-side-nav/gov-side-nav.d.ts

@@ -1,4 +1,5 @@
-import { EventEmitter } from "../../stencil-public-runtime";
+import { EventEmitter } from '../../stencil-public-runtime';
+import { GovSideNavItemChangeEvent } from './gov-side-nav-item.d';
 export declare class GovSideNav {
   readonly host: HTMLGovSideNavElement;
   /**
@@ -20,7 +21,7 @@ export declare class GovSideNav {
   /**
    * Called when the sidenav state changes
    */
-  govChange: EventEmitter;
+  govChange: EventEmitter<GovSideNavItemChangeEvent>;
   componentDidLoad(): void;
   componentDidRender(): Promise<void>;
   render(): any;

package/dist/types/components/gov-spacer/constants.d.ts

@@ -1,8 +1,8 @@
 import { Sizes } from '../../core/constants/sizes';
 export declare const SpacerSize: readonly [any, Sizes._2XS, Sizes._XS, Sizes._S, Sizes._M, Sizes._L, Sizes._XL, Sizes._2XL, Sizes._3XL, Sizes._5XL];
-export declare type SpacerSizeType = typeof SpacerSize[number];
+export declare type SpacerSizeType = (typeof SpacerSize)[number];
 export declare const SpacerBreakpoints: string[];
-export declare type SpacerBreakpointsType = typeof SpacerBreakpoints[number];
+export declare type SpacerBreakpointsType = (typeof SpacerBreakpoints)[number];
 export declare const SpacerClass: {
   root: string;
 };

package/dist/types/components/gov-spacer/gov-spacer.d.ts

@@ -1,6 +1,15 @@
 import { SpacerBreakpointsType, SpacerSizeType } from './constants';
 export declare class GovSpacer {
+  private h;
+  constructor();
+  host: HTMLGovSpacerElement;
+  /**
+   * Spacer’s size
+   */
   readonly size: SpacerSizeType;
+  /**
+   * Breakpoint
+   */
   readonly breakpoint: SpacerBreakpointsType;
   validateSize(newValue: string): void;
   validateBreakpoint(newValue: string): void;

package/dist/types/components/gov-statsbar/constants.d.ts

@@ -1,7 +1,7 @@
 export declare const StatsBarIconPosition: readonly [any, "left"];
-export declare type StatsBarIconPositionType = typeof StatsBarIconPosition[number];
+export declare type StatsBarIconPositionType = (typeof StatsBarIconPosition)[number];
 export declare const StatsBarVariant: readonly [any, "primary", "secondary"];
-export declare type StatsBarVariantType = typeof StatsBarVariant[number];
+export declare type StatsBarVariantType = (typeof StatsBarVariant)[number];
 export declare const StatsBarClass: {
   root: string;
   section: string;

package/dist/types/components/gov-statsbar/gov-statsbar-item.d.ts

@@ -4,6 +4,9 @@ export declare class GovStatsbarItem {
   h: GovHost;
   constructor();
   host: HTMLGovStatsbarItemElement;
+  /**
+   * Icon’s position
+   */
   readonly iconPosition?: StatsBarIconPositionType;
   validateIconPosition(newValue: string): void;
   componentWillLoad(): void;

package/dist/types/components/gov-statsbar/gov-statsbar.d.ts

@@ -1,7 +1,15 @@
-import { StatsBarVariantType, StatsBarIconPositionType } from './constants';
+import { StatsBarVariantType, StatsBarIconPositionType } from "./constants";
 export declare class GovStatsbar {
+  private h;
+  constructor();
   host: HTMLGovStatsbarElement;
+  /**
+   * Icon’s position
+   */
   readonly iconPosition?: StatsBarIconPositionType;
+  /**
+   * Style variation
+   */
   readonly variant?: StatsBarVariantType;
   validateIconPosition(newValue: string): void;
   validateVariant(newValue: string): void;