@gov-design-system-ce/components 0.0.17 → 0.0.19

package/dist/stencil.config.js

@@ -4,14 +4,6 @@ import autoprefixer from "autoprefixer";
 import path from "path";
 import { reactOutputTarget } from "@stencil/react-output-target";
 import { vueOutputTarget } from "@stencil/vue-output-target";
-const componentModels = [
-  {
-    elements: ["gov-form-input"],
-    event: "gov-input",
-    externalEvent: "on-input",
-    targetAttr: "value",
-  }
-];
 export const config = {
   namespace: "core",
   globalStyle: "src/sass/global.scss",
@@ -70,7 +62,6 @@ export const config = {
     vueOutputTarget({
       componentCorePackage: "@gov-design-system-ce/components",
       proxiesFile: "../../../packages/core-vue/lib/components.ts",
-      componentModels,
     }),
   ],
 };

package/dist/stencil.config.js.map

@@ -1 +1 @@
-{"version":3,"file":"stencil.config.js","sourceRoot":"","sources":["../../../stencil.config.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACpC,OAAO,YAAY,MAAM,cAAc,CAAA;AACvC,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAA;AAChE,OAAO,EAAE,eAAe,EAAwB,MAAM,4BAA4B,CAAA;AAElF,MAAM,eAAe,GAA2B;EAC/C;IACC,QAAQ,EAAE,CAAC,gBAAgB,CAAC;IAC5B,KAAK,EAAE,WAAW;IAClB,aAAa,EAAE,UAAU;IACzB,UAAU,EAAE,OAAO;GACnB;CACD,CAAA;AAED,MAAM,CAAC,MAAM,MAAM,GAAW;EAC7B,SAAS,EAAE,MAAM;EACjB,WAAW,EAAE,sBAAsB;EACnC,SAAS,EAAE,OAAO;EAClB,SAAS,EAAE,IAAI;EACf,MAAM,EAAE;IACP,2BAA2B,EAAE,IAAI;GACjC;EACD,OAAO,EAAE;IACR,IAAI,CAAC;MACJ,iBAAiB,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,oBAAoB,CAAC,CAAC,OAAO,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;KACtF,CAAC;IACF,OAAO,CAAC;MACP,OAAO,EAAE,CAAC,YAAY,EAAE,CAAC;KACzB,CAAC;GACF;EACD,aAAa,EAAE;IACd;MACC,IAAI,EAAE,6BAA6B;MACnC,eAAe,EAAE,KAAK;MACtB,MAAM,EAAE,IAAI;KACZ;IACD;MACC,IAAI,EAAE,MAAM;MACZ,aAAa,EAAE,WAAW;KAC1B;IACD;MACC,IAAI,EAAE,sBAAsB;KAC5B;IACD;MACC,IAAI,EAAE,aAAa;MACnB,MAAM,EAAE,IAAI;KACZ;IACD;MACC,IAAI,EAAE,KAAK;MACX,IAAI,EAAE;QACL,EAAE,GAAG,EAAE,iBAAiB,EAAE,IAAI,EAAE,oBAAoB,EAAE;QACtD,EAAE,GAAG,EAAE,iBAAiB,EAAE,IAAI,EAAE,oBAAoB,EAAE;OACtD;MACD,aAAa,EAAE,IAAI;KACnB;IACD;MACC,IAAI,EAAE,qBAAqB;MAC3B,GAAG,EAAE,cAAc;KACnB;IACD;MACC,IAAI,EAAE,sBAAsB;MAC5B,wBAAwB,EAAE,IAAI;MAC9B,oBAAoB,EAAE,KAAK;KAC3B;IAED,iBAAiB,CAAC;MACjB,oBAAoB,EAAE,kCAAkC;MACxD,WAAW,EAAE,gDAAgD;MAC7D,2BAA2B,EAAE,IAAI;KACjC,CAAC;IACF,eAAe,CAAC;MACf,oBAAoB,EAAE,kCAAkC;MACxD,WAAW,EAAE,8CAA8C;MAC3D,eAAe;KACf,CAAC;GACF;CACD,CAAA","sourcesContent":["import { Config } from \"@stencil/core\"\nimport { postcss } from \"@stencil/postcss\"\nimport { sass } from \"@stencil/sass\"\nimport autoprefixer from \"autoprefixer\"\nimport path from \"path\"\nimport { reactOutputTarget } from \"@stencil/react-output-target\"\nimport { vueOutputTarget, ComponentModelConfig } from \"@stencil/vue-output-target\"\n\nconst componentModels: ComponentModelConfig[] = [\n\t{\n\t\telements: [\"gov-form-input\"],\n\t\tevent: \"gov-input\",\n\t\texternalEvent: \"on-input\",\n\t\ttargetAttr: \"value\",\n\t}\n]\n\nexport const config: Config = {\n\tnamespace: \"core\",\n\tglobalStyle: \"src/sass/global.scss\",\n\ttaskQueue: \"async\",\n\tsourceMap: true,\n\textras: {\n\t\texperimentalImportInjection: true,\n\t},\n\tplugins: [\n\t\tsass({\n\t\t\tinjectGlobalPaths: [path.resolve(__dirname, `src/sass/core.scss`).replace(/\\\\/g, \"/\")],\n\t\t}),\n\t\tpostcss({\n\t\t\tplugins: [autoprefixer()],\n\t\t}),\n\t],\n\toutputTargets: [\n\t\t{\n\t\t\ttype: \"dist-custom-elements-bundle\",\n\t\t\texternalRuntime: false,\n\t\t\tminify: true,\n\t\t},\n\t\t{\n\t\t\ttype: \"dist\",\n\t\t\tesmLoaderPath: \"../loader\",\n\t\t},\n\t\t{\n\t\t\ttype: \"dist-custom-elements\",\n\t\t},\n\t\t{\n\t\t\ttype: \"docs-readme\",\n\t\t\tstrict: true,\n\t\t},\n\t\t{\n\t\t\ttype: \"www\",\n\t\t\tcopy: [\n\t\t\t\t{ src: \"../../fonts/lib\", dest: \"build/assets/fonts\" },\n\t\t\t\t{ src: \"../../icons/lib\", dest: \"build/assets/icons\" },\n\t\t\t],\n\t\t\tserviceWorker: null,\n\t\t},\n\t\t{\n\t\t\ttype: \"dist-hydrate-script\",\n\t\t\tdir: \"dist/hydrate\",\n\t\t},\n\t\t{\n\t\t\ttype: \"dist-custom-elements\",\n\t\t\tautoDefineCustomElements: true,\n\t\t\tincludeGlobalScripts: false,\n\t\t},\n\n\t\treactOutputTarget({\n\t\t\tcomponentCorePackage: \"@gov-design-system-ce/components\",\n\t\t\tproxiesFile: \"../../../packages/core-react/lib/components.ts\",\n\t\t\tincludeDefineCustomElements: true,\n\t\t}),\n\t\tvueOutputTarget({\n\t\t\tcomponentCorePackage: \"@gov-design-system-ce/components\",\n\t\t\tproxiesFile: \"../../../packages/core-vue/lib/components.ts\",\n\t\t\tcomponentModels,\n\t\t}),\n\t],\n}\n"]}
+{"version":3,"file":"stencil.config.js","sourceRoot":"","sources":["../../../stencil.config.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACpC,OAAO,YAAY,MAAM,cAAc,CAAA;AACvC,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAA;AAChE,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAE5D,MAAM,CAAC,MAAM,MAAM,GAAW;EAC7B,SAAS,EAAE,MAAM;EACjB,WAAW,EAAE,sBAAsB;EACnC,SAAS,EAAE,OAAO;EAClB,SAAS,EAAE,IAAI;EACf,MAAM,EAAE;IACP,2BAA2B,EAAE,IAAI;GACjC;EACD,OAAO,EAAE;IACR,IAAI,CAAC;MACJ,iBAAiB,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,oBAAoB,CAAC,CAAC,OAAO,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;KACtF,CAAC;IACF,OAAO,CAAC;MACP,OAAO,EAAE,CAAC,YAAY,EAAE,CAAC;KACzB,CAAC;GACF;EACD,aAAa,EAAE;IACd;MACC,IAAI,EAAE,6BAA6B;MACnC,eAAe,EAAE,KAAK;MACtB,MAAM,EAAE,IAAI;KACZ;IACD;MACC,IAAI,EAAE,MAAM;MACZ,aAAa,EAAE,WAAW;KAC1B;IACD;MACC,IAAI,EAAE,sBAAsB;KAC5B;IACD;MACC,IAAI,EAAE,aAAa;MACnB,MAAM,EAAE,IAAI;KACZ;IACD;MACC,IAAI,EAAE,KAAK;MACX,IAAI,EAAE;QACL,EAAE,GAAG,EAAE,iBAAiB,EAAE,IAAI,EAAE,oBAAoB,EAAE;QACtD,EAAE,GAAG,EAAE,iBAAiB,EAAE,IAAI,EAAE,oBAAoB,EAAE;OACtD;MACD,aAAa,EAAE,IAAI;KACnB;IACD;MACC,IAAI,EAAE,qBAAqB;MAC3B,GAAG,EAAE,cAAc;KACnB;IACD;MACC,IAAI,EAAE,sBAAsB;MAC5B,wBAAwB,EAAE,IAAI;MAC9B,oBAAoB,EAAE,KAAK;KAC3B;IAED,iBAAiB,CAAC;MACjB,oBAAoB,EAAE,kCAAkC;MACxD,WAAW,EAAE,gDAAgD;MAC7D,2BAA2B,EAAE,IAAI;KAEjC,CAAC;IACF,eAAe,CAAC;MACf,oBAAoB,EAAE,kCAAkC;MACxD,WAAW,EAAE,8CAA8C;KAC3D,CAAC;GACF;CACD,CAAA","sourcesContent":["import { Config } from \"@stencil/core\"\nimport { postcss } from \"@stencil/postcss\"\nimport { sass } from \"@stencil/sass\"\nimport autoprefixer from \"autoprefixer\"\nimport path from \"path\"\nimport { reactOutputTarget } from \"@stencil/react-output-target\"\nimport { vueOutputTarget } from \"@stencil/vue-output-target\"\n\nexport const config: Config = {\n\tnamespace: \"core\",\n\tglobalStyle: \"src/sass/global.scss\",\n\ttaskQueue: \"async\",\n\tsourceMap: true,\n\textras: {\n\t\texperimentalImportInjection: true,\n\t},\n\tplugins: [\n\t\tsass({\n\t\t\tinjectGlobalPaths: [path.resolve(__dirname, `src/sass/core.scss`).replace(/\\\\/g, \"/\")],\n\t\t}),\n\t\tpostcss({\n\t\t\tplugins: [autoprefixer()],\n\t\t}),\n\t],\n\toutputTargets: [\n\t\t{\n\t\t\ttype: \"dist-custom-elements-bundle\",\n\t\t\texternalRuntime: false,\n\t\t\tminify: true,\n\t\t},\n\t\t{\n\t\t\ttype: \"dist\",\n\t\t\tesmLoaderPath: \"../loader\",\n\t\t},\n\t\t{\n\t\t\ttype: \"dist-custom-elements\",\n\t\t},\n\t\t{\n\t\t\ttype: \"docs-readme\",\n\t\t\tstrict: true,\n\t\t},\n\t\t{\n\t\t\ttype: \"www\",\n\t\t\tcopy: [\n\t\t\t\t{ src: \"../../fonts/lib\", dest: \"build/assets/fonts\" },\n\t\t\t\t{ src: \"../../icons/lib\", dest: \"build/assets/icons\" },\n\t\t\t],\n\t\t\tserviceWorker: null,\n\t\t},\n\t\t{\n\t\t\ttype: \"dist-hydrate-script\",\n\t\t\tdir: \"dist/hydrate\",\n\t\t},\n\t\t{\n\t\t\ttype: \"dist-custom-elements\",\n\t\t\tautoDefineCustomElements: true,\n\t\t\tincludeGlobalScripts: false,\n\t\t},\n\n\t\treactOutputTarget({\n\t\t\tcomponentCorePackage: \"@gov-design-system-ce/components\",\n\t\t\tproxiesFile: \"../../../packages/core-react/lib/components.ts\",\n\t\t\tincludeDefineCustomElements: true,\n\n\t\t}),\n\t\tvueOutputTarget({\n\t\t\tcomponentCorePackage: \"@gov-design-system-ce/components\",\n\t\t\tproxiesFile: \"../../../packages/core-vue/lib/components.ts\",\n\t\t}),\n\t],\n}\n"]}

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

@@ -1,6 +1,6 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { AccordionSizeType, AccordionVariantType } from "./constants";
-import { GovAccordionItemChangeEvent } from "./gov-accordion-item.d";
+import { AccordionItemEvent } from "./gov-accordion.types";
 export declare class GovAccordionItem {
   private readonly triggerId;
   private readonly contentId;
@@ -11,7 +11,7 @@ export declare class GovAccordionItem {
   /**
    * Style variation of the button.
    */
-  readonly variant?: AccordionVariantType;
+  variant?: AccordionVariantType;
   /**
    * Custom accordion item identifier. Otherwise, it will be generated
    */
@@ -19,7 +19,7 @@ export declare class GovAccordionItem {
   /**
    * Accordion’s size.
    */
-  readonly size?: AccordionSizeType;
+  size?: AccordionSizeType;
   /**
    * Item name of the accordion
    */
@@ -48,13 +48,14 @@ export declare class GovAccordionItem {
   /**
    * Called when the accordion state changes
    */
-  govChange: EventEmitter<GovAccordionItemChangeEvent>;
+  govChange: EventEmitter<AccordionItemEvent>;
   validateLabel(newValue: string): void;
   validateTriggerTag(newValue: string): void;
   validateSize(newValue: string): void;
   validateVariant(newValue: string): void;
   private emmitChange;
   componentWillLoad(): void;
+  getPropsFromParents(): void;
   render(): any;
   /**
    * Opening the accordion

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

@@ -1,6 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { AccordionSizeType, AccordionVariantType } from './constants';
-import { GovAccordionItemChangeEvent } from './gov-accordion-item.d';
+import { AccordionEvent } from "./gov-accordion.types";
 export declare class GovAccordion {
   private h;
   constructor();
@@ -28,7 +28,7 @@ export declare class GovAccordion {
   /**
    * Called when the accordion state changes
    */
-  govChange: EventEmitter<GovAccordionItemChangeEvent>;
+  govChange: EventEmitter<AccordionEvent>;
   validateSize(newValue: string): void;
   validateVariant(newValue: string): void;
   componentWillLoad(): void;

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

@@ -0,0 +1,9 @@
+import { GovBaseEvent } from "../../types/event.types";
+export interface AccordionItemEvent extends GovBaseEvent {
+  open: boolean;
+  ref: HTMLGovAccordionItemElement;
+}
+export interface AccordionEvent extends GovBaseEvent {
+  open: boolean;
+  ref: HTMLGovAccordionItemElement;
+}

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

@@ -7,10 +7,6 @@ export declare class GovBackdrop {
    * Determide if component should have inversed colors to be used on dark background.
    */
   readonly inverse: boolean;
-  /**
-   * Default attribute for backdrop display
-   */
-  visible: boolean;
   /**
    * Adds accessible label for the backdrop that is only shown for screen readers.
    */

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

@@ -1,5 +1,6 @@
-import { EventEmitter } from '../../stencil-public-runtime';
-import { ButtonSizesType, NativeTypesType, TypesType, ButtonVariantType, ButtonTargetType } from './constants';
+import { EventEmitter } from "../../stencil-public-runtime";
+import { ButtonSizesType, NativeTypesType, TypesType, ButtonVariantType, ButtonTargetType } from "./constants";
+import { ButtonEvent } from "./gov-button.types";
 export declare class GovButton {
   private h;
   private buttonRef?;
@@ -135,15 +136,15 @@ export declare class GovButton {
   /**
    * Emitted when the button click
    */
-  govClick: EventEmitter<PointerEvent>;
+  govClick: EventEmitter<ButtonEvent>;
   /**
    * Emitted when the button has focus
    */
-  govFocus: EventEmitter<FocusEvent>;
+  govFocus: EventEmitter<ButtonEvent>;
   /**
    * Emitted when the button loses focus
    */
-  govBlur: EventEmitter<FocusEvent>;
+  govBlur: EventEmitter<ButtonEvent>;
   validateVariant(newValue: string): void;
   validateType(newValue: string): void;
   validateSize(newValue: string): void;

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

@@ -0,0 +1,4 @@
+import { GovBaseEvent } from "../../types/event.types";
+export interface ButtonEvent extends GovBaseEvent {
+  ref: HTMLGovButtonElement;
+}

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

@@ -1,7 +1,7 @@
-import { EventEmitter } from '../../../stencil-public-runtime';
-import { SizesType } from './constants';
-import { VariantType } from './constants';
-import { GovFormAutocompleteItem } from './gov-form-autocomplete.types';
+import { EventEmitter } from "../../../stencil-public-runtime";
+import { SizesType } from "./constants";
+import { VariantType } from "./constants";
+import { FormAutocompleteEvent, GovFormAutocompleteItem } from "./gov-form-autocomplete.types";
 export declare class GovFormAutocomplete {
   private inputRef?;
   private readonly listBoxId;
@@ -83,19 +83,19 @@ export declare class GovFormAutocomplete {
   /**
    * Emitted when the input has focus.
    */
-  govFocus: EventEmitter<FocusEvent>;
+  govFocus: EventEmitter<FormAutocompleteEvent>;
   /**
    * Emitted when the input loses focus.
    */
-  govBlur: EventEmitter<FocusEvent>;
+  govBlur: EventEmitter<FormAutocompleteEvent>;
   /**
    * Emitted when the input change value.
    */
-  govInput: EventEmitter<InputEvent>;
+  govInput: EventEmitter<FormAutocompleteEvent>;
   /**
    * Emitted when the input change value.
    */
-  govSelect: EventEmitter<GovFormAutocompleteItem>;
+  govSelect: EventEmitter<FormAutocompleteEvent>;
   focused: boolean;
   processing: boolean;
   arrowCounter: number;

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

@@ -1,3 +1,9 @@
+import { GovBaseEvent } from "../../../types/event.types";
+import { Nullable } from "../../../types/interfaces";
+export interface FormAutocompleteEvent extends GovBaseEvent {
+  value: string;
+  selected: Nullable<GovFormAutocompleteItem>;
+}
 export interface GovFormAutocompleteItem {
   [key: string]: any;
 }

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

@@ -1,9 +1,10 @@
 import { EventEmitter } from "../../../stencil-public-runtime";
 import { FormCheckboxSizesType } from "./constants";
-import { ChangeEvent } from "react";
+import { FormCheckboxEvent } from "./gov-form-checkbox.types";
 export declare class GovFormCheckbox {
   private readonly h;
   private f;
+  private inputRef?;
   private readonly checkboxId;
   constructor();
   host: HTMLGovFormCheckboxElement;
@@ -14,7 +15,7 @@ export declare class GovFormCheckbox {
   /**
    * Checkbox default state
    */
-  readonly checked: boolean;
+  checked: boolean;
   /**
    * Set whether the input is required or not. Please note that this is necessary for accessible inputs when the user is required to fill them.
    * When using this property you need to also set “novalidate” attribute to your form element to prevent browser from displaying its own validation errors.
@@ -56,17 +57,15 @@ export declare class GovFormCheckbox {
   /**
    * Emitted when the checkbox has focus.
    */
-  govFocus: EventEmitter<FocusEvent>;
+  govFocus: EventEmitter<FormCheckboxEvent>;
   /**
    * Emitted when the checkbox loses focus.
    */
-  govBlur: EventEmitter<FocusEvent>;
+  govBlur: EventEmitter<FormCheckboxEvent>;
   /**
    * Emitted when the checkbox change value.
    */
-  govChange: EventEmitter<ChangeEvent>;
-  isChecked: boolean;
-  updateCheckedState(newValue: boolean): void;
+  govChange: EventEmitter<FormCheckboxEvent>;
   validateSize(newValue: string): void;
   componentWillLoad(): void;
   componentDidRender(): Promise<void>;
@@ -75,6 +74,10 @@ export declare class GovFormCheckbox {
   private onBlurHandler;
   private onClickHandler;
   private onChangeHandler;
+  /**
+   * Returns the reference of the native element
+   */
+  getRef(): Promise<HTMLInputElement>;
   /**
    * Validate the WCAG attributes of the component
    */

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

@@ -0,0 +1,5 @@
+import { GovBaseEvent } from "../../../types/event.types";
+export interface FormCheckboxEvent extends GovBaseEvent {
+  checked: boolean;
+  value: string;
+}

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

@@ -1,8 +1,8 @@
-import { EventEmitter } from '../../../stencil-public-runtime';
-import { GovFormFileItem } from './gov-form-file.types';
+import { EventEmitter } from "../../../stencil-public-runtime";
+import { GovFormFileEvent, GovFormFileItem } from "./gov-form-file.types";
 export declare class GovFormFile {
   private f;
-  private h;
+  private readonly h;
   private areaRef?;
   private inputRef?;
   private readonly fileId;
@@ -78,23 +78,23 @@ export declare class GovFormFile {
   /**
    * Emitted when the File has focus.
    */
-  govFocus: EventEmitter<FocusEvent>;
+  govFocus: EventEmitter<GovFormFileEvent>;
   /**
    * Emitted when the File loses focus.
    */
-  govBlur: EventEmitter<FocusEvent>;
+  govBlur: EventEmitter<GovFormFileEvent>;
   /**
    * Called when the list of inserted files is changed
    */
-  govFiles: EventEmitter<GovFormFileItem[]>;
+  govFiles: EventEmitter<GovFormFileEvent>;
   /**
    * Called when a new file is added
    */
-  govAddFile: EventEmitter<GovFormFileItem>;
+  govAddFile: EventEmitter<GovFormFileEvent>;
   /**
    * Called when a file is removed from the list
    */
-  govRemovFile: EventEmitter<GovFormFileItem>;
+  govRemoveFile: EventEmitter<GovFormFileEvent>;
   files: GovFormFileItem[];
   private registerListeners;
   preventDefaults(e: any): void;
@@ -107,6 +107,14 @@ export declare class GovFormFile {
   private onFocusHandler;
   private onBlurHandler;
   private onChangeHandler;
+  /**
+   * Returns the reference of the native element
+   */
+  getRef(): Promise<HTMLInputElement>;
+  /**
+   * Returns the reference of the native area element
+   */
+  getAreaRef(): Promise<HTMLDivElement>;
   /**
    * Validate the WCAG attributes of the component
    */

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

@@ -1,3 +1,8 @@
+import { GovBaseEvent } from "../../../types/event.types";
+export interface GovFormFileEvent extends GovBaseEvent {
+  files?: GovFormFileItem[];
+  file?: GovFormFileItem;
+}
 export interface GovFormFileItem {
   id: string;
   file: File;

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

@@ -1,6 +1,7 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
 import { FormInputSizesType, InputType, Type } from './constants';
 import { FormInputVariantType } from './constants';
+import { FormInputEvent } from "./gov-form-input.types";
 export declare class GovFormInput {
   private f;
   private h;
@@ -119,19 +120,19 @@ export declare class GovFormInput {
   /**
    * Emitted when the input has focus.
    */
-  govFocus: EventEmitter<FocusEvent>;
+  govFocus: EventEmitter<FormInputEvent>;
   /**
    * Emitted when the input loses focus.
    */
-  govBlur: EventEmitter<FocusEvent>;
+  govBlur: EventEmitter<FormInputEvent>;
   /**
    * Emitted when the input change value.
    */
-  govInput: EventEmitter<InputEvent>;
+  govInput: EventEmitter<FormInputEvent>;
   /**
    * Emitted when the input change value.
    */
-  govKeyUp: EventEmitter<KeyboardEvent>;
+  govKeyUp: EventEmitter<FormInputEvent>;
   focused: boolean;
   validateVariant(newValue: string): void;
   validateSize(newValue: string): void;
@@ -157,7 +158,7 @@ export declare class GovFormInput {
   /**
    * Returns an instance of the native html input element
    */
-  getInstance(): Promise<HTMLInputElement>;
+  getRef(): Promise<HTMLInputElement>;
   /**
    * Validate the WCAG attributes of the component
    */

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

@@ -0,0 +1,4 @@
+import { GovBaseEvent } from "../../../types/event.types";
+export interface FormInputEvent extends GovBaseEvent {
+  value: string;
+}

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

@@ -1,6 +1,6 @@
-import { EventEmitter } from '../../../stencil-public-runtime';
-import { FormMultiselectSizesType, FormMultiselectVariantType } from './constants';
-import { GovFormMultiSelectItem } from './interfaces';
+import { EventEmitter } from "../../../stencil-public-runtime";
+import { FormMultiselectSizesType, FormMultiselectVariantType } from "./constants";
+import { FormMultiselectEvent, GovFormMultiSelectItem } from "./gov-form-multi-select.types";
 export declare class GovFormMultiSelect {
   private selectRef?;
   private autocompleteRef?;
@@ -57,15 +57,15 @@ export declare class GovFormMultiSelect {
   /**
    * Emitted when the select has focus.
    */
-  govFocus: EventEmitter<FocusEvent>;
+  govFocus: EventEmitter<FormMultiselectEvent>;
   /**
    * Emitted when the select loses focus.
    */
-  govBlur: EventEmitter<FocusEvent>;
+  govBlur: EventEmitter<FormMultiselectEvent>;
   /**
    * Emitted when the select change value.
    */
-  govChange: EventEmitter<GovFormMultiSelectItem[]>;
+  govChange: EventEmitter<FormMultiselectEvent>;
   focused: boolean;
   value: string;
   selectedOptions: GovFormMultiSelectItem[];

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

@@ -0,0 +1,8 @@
+import { GovBaseEvent } from "../../../types/event.types";
+export interface GovFormMultiSelectItem {
+  name: string;
+  value: string;
+}
+export interface FormMultiselectEvent extends GovBaseEvent {
+  value: GovFormMultiSelectItem[];
+}

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

@@ -1,9 +1,10 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
 import { FormRadioSizesType } from './constants';
-import { ChangeEvent } from "react";
+import { FormRadioEvent } from "./gov-form-radio.types";
 export declare class GovFormRadio {
   private readonly h;
   private f;
+  private inputRef?;
   private readonly radioId;
   constructor();
   host: HTMLGovFormRadioElement;
@@ -18,7 +19,7 @@ export declare class GovFormRadio {
   /**
    * Radio default state
    */
-  readonly checked: boolean;
+  checked: boolean;
   /**
    * Set whether the input is required or not. Please note that this is necessary for accessible inputs when the user is required to fill them.
    * When using this property you need to also set “novalidate” attribute to your form element to prevent browser from displaying its own validation errors.
@@ -56,17 +57,15 @@ export declare class GovFormRadio {
   /**
    * Emitted when the radio has focus.
    */
-  govFocus: EventEmitter<FocusEvent>;
+  govFocus: EventEmitter<FormRadioEvent>;
   /**
    * Emitted when the radio loses focus.
    */
-  govBlur: EventEmitter<FocusEvent>;
+  govBlur: EventEmitter<FormRadioEvent>;
   /**
    * Emitted when the radio change value.
    */
-  govChange: EventEmitter<ChangeEvent>;
-  isChecked: boolean;
-  updateCheckedState(newValue: boolean): void;
+  govChange: EventEmitter<FormRadioEvent>;
   validateSize(newValue: string): void;
   componentWillLoad(): void;
   componentDidRender(): Promise<void>;
@@ -75,6 +74,10 @@ export declare class GovFormRadio {
   private onFocusHandler;
   private onBlurHandler;
   private onChangeHandler;
+  /**
+   * Returns the reference of the native element
+   */
+  getRef(): Promise<HTMLInputElement>;
   /**
    * Validate the WCAG attributes of the component
    */

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

@@ -0,0 +1,5 @@
+import { GovBaseEvent } from "../../../types/event.types";
+export interface FormRadioEvent extends GovBaseEvent {
+  checked: boolean;
+  value: string;
+}

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

@@ -1,5 +1,6 @@
-import { EventEmitter } from '../../../stencil-public-runtime';
-import { FormSelectSizesType, FormSelectVariantType } from './constants';
+import { EventEmitter } from "../../../stencil-public-runtime";
+import { FormSelectSizesType, FormSelectVariantType } from "./constants";
+import { FormSelectEvent } from "./gov-form-select.types";
 export declare class GovFormSelect {
   private f;
   private h;
@@ -64,15 +65,15 @@ export declare class GovFormSelect {
   /**
    * Emitted when the select has focus.
    */
-  govFocus: EventEmitter<FocusEvent>;
+  govFocus: EventEmitter<FormSelectEvent>;
   /**
    * Emitted when the select loses focus.
    */
-  govBlur: EventEmitter<FocusEvent>;
+  govBlur: EventEmitter<FormSelectEvent>;
   /**
    * Emitted when the select change value.
    */
-  govChange: EventEmitter;
+  govChange: EventEmitter<FormSelectEvent>;
   focused: boolean;
   validateVariant(newValue: string): void;
   validateSize(newValue: string): void;
@@ -93,7 +94,7 @@ export declare class GovFormSelect {
   /**
    * Returns an instance of the native html select element
    */
-  getInstance(): Promise<HTMLSelectElement>;
+  getRef(): Promise<HTMLSelectElement>;
   /**
    * Validate the WCAG attributes of the component
    */

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

@@ -0,0 +1,4 @@
+import { GovBaseEvent } from "../../../types/event.types";
+export interface FormSelectEvent extends GovBaseEvent {
+  value: string;
+}

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

@@ -1,9 +1,10 @@
 import { EventEmitter } from "../../../stencil-public-runtime";
 import { FormSwitchSizesType } from "./constants";
-import { ChangeEvent } from "react";
+import { FormSwitchEvent } from "./gov-form-switch.types";
 export declare class GovFormSwitch {
   private readonly h;
   private f;
+  private inputRef?;
   private readonly checkboxId;
   constructor();
   host: HTMLGovFormSwitchElement;
@@ -18,7 +19,7 @@ export declare class GovFormSwitch {
   /**
    * Switch default state
    */
-  readonly checked: boolean;
+  checked: boolean;
   /**
    * Set whether the input is required or not. Please note that this is necessary for accessible inputs when the user is required to fill them.
    * When using this property you need to also set “novalidate” attribute to your form element to prevent browser from displaying its own validation errors.
@@ -56,17 +57,15 @@ export declare class GovFormSwitch {
   /**
    * Emitted when the switch has focus.
    */
-  govFocus: EventEmitter<FocusEvent>;
+  govFocus: EventEmitter<FormSwitchEvent>;
   /**
    * Emitted when the switch loses focus.
    */
-  govBlur: EventEmitter<FocusEvent>;
+  govBlur: EventEmitter<FormSwitchEvent>;
   /**
    * Emitted when the switch change value.
    */
-  govChange: EventEmitter<ChangeEvent>;
-  isChecked: boolean;
-  updateCheckedState(newValue: boolean): void;
+  govChange: EventEmitter<FormSwitchEvent>;
   validateSize(newValue: string): void;
   componentWillLoad(): void;
   componentDidRender(): Promise<void>;
@@ -75,6 +74,10 @@ export declare class GovFormSwitch {
   private onFocusHandler;
   private onBlurHandler;
   private onChangeHandler;
+  /**
+   * Returns the reference of the native element
+   */
+  getRef(): Promise<HTMLInputElement>;
   /**
    * Validate the WCAG attributes of the component
    */

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

@@ -0,0 +1,5 @@
+import { GovBaseEvent } from "../../../types/event.types";
+export interface FormSwitchEvent extends GovBaseEvent {
+  checked: boolean;
+  value: string;
+}

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

@@ -1,6 +1,7 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { PaginationSizeType, PaginationVariantType, PaginationType } from "./constants";
 import { Pagination } from "./pagination";
+import { PaginationEvent } from "./gov-pagination.types";
 export declare class GovPagination {
   private h;
   private readonly pageSelectId;
@@ -64,7 +65,7 @@ export declare class GovPagination {
   /**
    * Event called when changing the page with the current setting of the whole paging
    */
-  govPage: EventEmitter<Pagination>;
+  govPage: EventEmitter<PaginationEvent>;
   pagination: Pagination;
   validateType(newValue: string): void;
   validateSize(newValue: string): void;

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

@@ -0,0 +1,5 @@
+import { GovBaseEvent } from "../../types/event.types";
+import { Pagination } from "./pagination";
+export interface PaginationEvent extends GovBaseEvent {
+  pagination: Pagination;
+}