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

package/dist/collection/components/gov-stepper/gov-stepper.css

@@ -48,15 +48,15 @@
  -  Variables - Typography
  */
 /*
- -  Variables - Sizes
+ -  Variables - Variants
  */
-/* "Constants" for general usage */
 /*
- -  Variables - Variants
+ -  Variables - Container
  */
 /*
- -  Variables - Layout
+ -  Variables - Sizes
  */
+/* "Constants" for general usage */
 /*
  -  Variables - Accordion
  */
@@ -72,6 +72,9 @@
 /*
  -  Variables - Buttons (&& Badges)
  */
+/*
+ -  Variables - Breadcrumbs
+ */
 /*
  -  Variables - Classes
  */
@@ -84,9 +87,6 @@
 /*
  -  Variables - Card
  */
-/*
- -  Variables - Container
- */
 /*
  -  Variables - Message
  */
@@ -99,6 +99,9 @@
 /*
  -  Variables - Grid
  */
+/*
+ -  Variables - Tiles
+ */
 /*
  -  Variables - Modal & Prompt
  */
@@ -118,6 +121,9 @@
 /*
  -  Variables - Tooltip
  */
+/*
+ -  Variables - Loading
+ */
 /*
  -	Variables - Forms
  */
@@ -145,6 +151,9 @@
 /*
  -	Variables - Form checkbox & radio
  */
+/*
+ -  Variables - Form group
+ */
 /*
  -	Variables - Form file
  */
@@ -157,12 +166,21 @@
 /*
  -  Variables - Stepper
  */
+/*
+ -  Variables - Side nav
+ */
 /*
  -  Variables - Grid & Tile
  */
 /*
  -  Variables - Pagination
  */
+/*
+ -  Variables - Nav
+ */
+/*
+ -  Variables - Layout
+ */
 .gov-spin-animation,
 .gov-pseudo-spin-animation::before {
   animation: spin 4s linear infinite;
@@ -173,6 +191,11 @@
     transform: rotate(360deg);
   }
 }
+@keyframes countdown {
+  to {
+    transform: scaleX(0);
+  }
+}
 /*
 *   Stepper
 */

package/dist/collection/components/gov-stepper/gov-stepper.js

@@ -1,10 +1,12 @@
-import { h, Host } from '@stencil/core';
-import { validateProp } from '../../helpers/Validate/props';
-import { StepperClass, StepperItemClass } from './constants';
-import { Sizes } from '../../core/constants/sizes';
+import { h, Host } from "@stencil/core";
+import { validateProp } from "../../helpers/Validate/props";
+import { StepperClass, StepperItemClass } from "./constants";
+import { Sizes } from "../../core/constants/sizes";
+import { govHost } from "../../helpers/Dom/template";
 export class GovStepper {
   constructor() {
     this.size = Sizes._M;
+    this.h = govHost(this.host);
   }
   validateSize(newValue) {
     validateProp(Sizes, newValue, StepperClass.root);
@@ -14,15 +16,15 @@ export class GovStepper {
   }
   componentDidLoad() {
     this.host.querySelectorAll(StepperItemClass.root).forEach((child) => {
-      child.setAttribute('size', this.size);
-      child.addEventListener('gov-change', (e) => {
+      child.setAttribute("size", this.size);
+      child.addEventListener("gov-change", (e) => {
         e.stopPropagation();
         this.govChange.emit(e.detail);
       });
     });
   }
   render() {
-    return (h(Host, { class: StepperClass.root, role: "list", size: this.size }, h("slot", null)));
+    return (h(Host, { class: this.h.classes(StepperClass.root), role: "list", size: this.size }, h("slot", null)));
   }
   static get is() { return "gov-stepper"; }
   static get originalStyleUrls() {
@@ -54,7 +56,7 @@ export class GovStepper {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Style variation of the button."
+          "text": "Size of stepper"
         },
         "attribute": "size",
         "reflect": false,
@@ -74,9 +76,14 @@ export class GovStepper {
           "text": "Called when the Stepper state changes"
         },
         "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
+          "original": "GovStepperItemChangeEvent",
+          "resolved": "GovStepperItemChangeEvent",
+          "references": {
+            "GovStepperItemChangeEvent": {
+              "location": "import",
+              "path": "./gov-stepper-item.d"
+            }
+          }
         }
       }];
   }

package/dist/collection/components/gov-stepper/gov-stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"gov-stepper.js","sourceRoot":"","sources":["../../../../../../src/components/gov-stepper/gov-stepper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAC7F,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAC3D,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAa,MAAM,aAAa,CAAA;AAGvE,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAA;AAMlD,MAAM,OAAO,UAAU;;gBAMa,KAAK,CAAC,EAAE;;EAO3C,YAAY,CAAC,QAAgB;IAC5B,YAAY,CAAC,KAAK,EAAE,QAAQ,EAAE,YAAY,CAAC,IAAI,CAAC,CAAA;EACjD,CAAC;EAGD,iBAAiB;IAChB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;EAC7B,CAAC;EAED,gBAAgB;IACf,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,KAAgC,EAAE,EAAE;MAC9F,KAAK,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAA;MACrC,KAAK,CAAC,gBAAgB,CAAC,YAAY,EAAE,CAAC,CAAuD,EAAE,EAAE;QAChG,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAA;MAC9B,CAAC,CAAC,CAAA;IACH,CAAC,CAAC,CAAA;EACH,CAAC;EAED,MAAM;IACL,OAAO,CACN,EAAC,IAAI,IAAC,KAAK,EAAE,YAAY,CAAC,IAAI,EAAE,IAAI,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI;MAC1D,eAAQ,CACF,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Prop, Watch } from '@stencil/core'\nimport { validateProp } from '../../helpers/Validate/props'\nimport { StepperClass, StepperItemClass, SizesType } from './constants'\nimport { GovStepperItemCustomEvent } from '../../components'\nimport { GovStepperItemChangeEvent } from './gov-stepper-item.d'\nimport { Sizes } from '../../core/constants/sizes'\n\n@Component({\n\ttag: 'gov-stepper',\n\tstyleUrl: 'gov-stepper.scss',\n})\nexport class GovStepper {\n\t@Element() readonly host: HTMLGovStepperElement\n\n\t/**\n\t * Style variation of the button.\n\t */\n\t@Prop() readonly size: SizesType = Sizes._M\n\t/**\n\t * Called when the Stepper state changes\n\t */\n\t@Event({ eventName: 'gov-change' }) govChange: EventEmitter\n\n\t@Watch('size')\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(Sizes, newValue, StepperClass.root)\n\t}\n\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateSize(this.size)\n\t}\n\n\tcomponentDidLoad() {\n\t\tthis.host.querySelectorAll(StepperItemClass.root).forEach((child: HTMLGovStepperItemElement) => {\n\t\t\tchild.setAttribute('size', this.size)\n\t\t\tchild.addEventListener('gov-change', (e: GovStepperItemCustomEvent<GovStepperItemChangeEvent>) => {\n\t\t\t\te.stopPropagation()\n\t\t\t\tthis.govChange.emit(e.detail)\n\t\t\t})\n\t\t})\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={StepperClass.root} role=\"list\" size={this.size}>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}
+{"version":3,"file":"gov-stepper.js","sourceRoot":"","sources":["../../../../../../src/components/gov-stepper/gov-stepper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAC7F,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAC3D,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAa,MAAM,aAAa,CAAA;AAGvE,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAA;AAElD,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAMpD,MAAM,OAAO,UAAU;EAGtB;gBAQmC,KAAK,CAAC,EAAE;IAP1C,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EAaD,YAAY,CAAC,QAAgB;IAC5B,YAAY,CAAC,KAAK,EAAE,QAAQ,EAAE,YAAY,CAAC,IAAI,CAAC,CAAA;EACjD,CAAC;EAED,iBAAiB;IAChB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;EAC7B,CAAC;EAED,gBAAgB;IACf,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,KAAgC,EAAE,EAAE;MAC9F,KAAK,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAA;MACrC,KAAK,CAAC,gBAAgB,CAAC,YAAY,EAAE,CAAC,CAAuD,EAAE,EAAE;QAChG,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAA;MAC9B,CAAC,CAAC,CAAA;IACH,CAAC,CAAC,CAAA;EACH,CAAC;EAED,MAAM;IACL,OAAO,CACN,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,IAAI,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI;MAC1E,eAAQ,CACF,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Prop, Watch } from \"@stencil/core\"\nimport { validateProp } from \"../../helpers/Validate/props\"\nimport { StepperClass, StepperItemClass, SizesType } from \"./constants\"\nimport { GovStepperItemCustomEvent } from \"../../components\"\nimport { GovStepperItemChangeEvent } from \"./gov-stepper-item.d\"\nimport { Sizes } from \"../../core/constants/sizes\"\nimport { GovHost } from \"../../helpers/Dom/template.d\"\nimport { govHost } from \"../../helpers/Dom/template\"\n\n@Component({\n\ttag: \"gov-stepper\",\n\tstyleUrl: \"gov-stepper.scss\",\n})\nexport class GovStepper {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() readonly host: HTMLGovStepperElement\n\t/**\n\t * Size of stepper\n\t */\n\t@Prop() readonly size: SizesType = Sizes._M\n\t/**\n\t * Called when the Stepper state changes\n\t */\n\t@Event({ eventName: \"gov-change\" }) govChange: EventEmitter<GovStepperItemChangeEvent>\n\n\t@Watch(\"size\")\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(Sizes, newValue, StepperClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateSize(this.size)\n\t}\n\n\tcomponentDidLoad() {\n\t\tthis.host.querySelectorAll(StepperItemClass.root).forEach((child: HTMLGovStepperItemElement) => {\n\t\t\tchild.setAttribute(\"size\", this.size)\n\t\t\tchild.addEventListener(\"gov-change\", (e: GovStepperItemCustomEvent<GovStepperItemChangeEvent>) => {\n\t\t\t\te.stopPropagation()\n\t\t\t\tthis.govChange.emit(e.detail)\n\t\t\t})\n\t\t})\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes(StepperClass.root)} role=\"list\" size={this.size}>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

package/dist/collection/components/gov-tabs/constants.js

@@ -1,14 +1,21 @@
 import { Sizes } from '../../core/constants/sizes';
 import { Variants as GlobalVariants } from '../../core/constants/variants';
 export const TabSize = [Sizes._M, Sizes._S, Sizes._L, undefined];
-export const Variants = [undefined, GlobalVariants.PRIMARY, GlobalVariants.SECONDARY, GlobalVariants.SUCCESS, GlobalVariants.ERROR, GlobalVariants.WARNING];
-export const Types = [undefined, "text", "badge"];
+export const Variants = [
+  undefined,
+  GlobalVariants.PRIMARY,
+  GlobalVariants.SECONDARY,
+  GlobalVariants.SUCCESS,
+  GlobalVariants.ERROR,
+  GlobalVariants.WARNING,
+];
+export const Types = [undefined, 'text', 'badge'];
 export const TabsClass = {
-  root: "gov-tabs",
-  tabs: "gov-tabs__tabs",
-  list: "gov-tabs__list",
-  item: "gov-tabs__item",
-  btn: "gov-tabs__btn",
+  root: 'gov-tabs',
+  tabs: 'gov-tabs__tabs',
+  list: 'gov-tabs__list',
+  item: 'gov-tabs__item',
+  btn: 'gov-tabs__btn',
 };
 export const TabsItemClass = {
   root: 'gov-tabs-item',

package/dist/collection/components/gov-tabs/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../src/components/gov-tabs/constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAA;AAClD,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,+BAA+B,CAAA;AAE1E,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,KAAK,CAAC,EAAE,EAAE,KAAK,CAAC,EAAE,EAAE,KAAK,CAAC,EAAE,EAAE,SAAS,CAAU,CAAA;AAGzE,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,SAAS,EAAE,cAAc,CAAC,OAAO,EAAE,cAAc,CAAC,SAAS,EAAE,cAAc,CAAC,OAAO,EAAE,cAAc,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,CAAU,CAAA;AAGpK,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,CAAU,CAAA;AAG1D,MAAM,CAAC,MAAM,SAAS,GAAG;EACxB,IAAI,EAAE,UAAU;EAChB,IAAI,EAAE,gBAAgB;EACtB,IAAI,EAAE,gBAAgB;EACtB,IAAI,EAAE,gBAAgB;EACtB,GAAG,EAAE,eAAe;CACpB,CAAA;AAED,MAAM,CAAC,MAAM,aAAa,GAAG;EAC5B,IAAI,EAAE,eAAe;EACrB,KAAK,EAAE,sBAAsB;CAC7B,CAAA","sourcesContent":["import { Sizes } from '../../core/constants/sizes'\nimport { Variants as GlobalVariants } from '../../core/constants/variants'\n\nexport const TabSize = [Sizes._M, Sizes._S, Sizes._L, undefined] as const\nexport type TabSizeType = typeof TabSize[number];\n\nexport const Variants = [undefined, GlobalVariants.PRIMARY, GlobalVariants.SECONDARY, GlobalVariants.SUCCESS, GlobalVariants.ERROR, GlobalVariants.WARNING] as const\nexport type VariantType = typeof Variants[number]\n\nexport const Types = [undefined, \"text\", \"badge\"] as const\nexport type Type = typeof Types[number]\n\nexport const TabsClass = {\n\troot: \"gov-tabs\",\n\ttabs: \"gov-tabs__tabs\",\n\tlist: \"gov-tabs__list\",\n\titem: \"gov-tabs__item\",\n\tbtn: \"gov-tabs__btn\",\n}\n\nexport const TabsItemClass = {\n\troot: 'gov-tabs-item',\n\tinner: 'gov-tabs-item__inner',\n}\n"]}
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../src/components/gov-tabs/constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAA;AAClD,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,+BAA+B,CAAA;AAE1E,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,KAAK,CAAC,EAAE,EAAE,KAAK,CAAC,EAAE,EAAE,KAAK,CAAC,EAAE,EAAE,SAAS,CAAU,CAAA;AAGzE,MAAM,CAAC,MAAM,QAAQ,GAAG;EACvB,SAAS;EACT,cAAc,CAAC,OAAO;EACtB,cAAc,CAAC,SAAS;EACxB,cAAc,CAAC,OAAO;EACtB,cAAc,CAAC,KAAK;EACpB,cAAc,CAAC,OAAO;CACb,CAAA;AAGV,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,CAAU,CAAA;AAG1D,MAAM,CAAC,MAAM,SAAS,GAAG;EACxB,IAAI,EAAE,UAAU;EAChB,IAAI,EAAE,gBAAgB;EACtB,IAAI,EAAE,gBAAgB;EACtB,IAAI,EAAE,gBAAgB;EACtB,GAAG,EAAE,eAAe;CACpB,CAAA;AAED,MAAM,CAAC,MAAM,aAAa,GAAG;EAC5B,IAAI,EAAE,eAAe;EACrB,KAAK,EAAE,sBAAsB;CAC7B,CAAA","sourcesContent":["import { Sizes } from '../../core/constants/sizes'\nimport { Variants as GlobalVariants } from '../../core/constants/variants'\n\nexport const TabSize = [Sizes._M, Sizes._S, Sizes._L, undefined] as const\nexport type TabSizeType = (typeof TabSize)[number]\n\nexport const Variants = [\n\tundefined,\n\tGlobalVariants.PRIMARY,\n\tGlobalVariants.SECONDARY,\n\tGlobalVariants.SUCCESS,\n\tGlobalVariants.ERROR,\n\tGlobalVariants.WARNING,\n] as const\nexport type VariantType = (typeof Variants)[number]\n\nexport const Types = [undefined, 'text', 'badge'] as const\nexport type Type = (typeof Types)[number]\n\nexport const TabsClass = {\n\troot: 'gov-tabs',\n\ttabs: 'gov-tabs__tabs',\n\tlist: 'gov-tabs__list',\n\titem: 'gov-tabs__item',\n\tbtn: 'gov-tabs__btn',\n}\n\nexport const TabsItemClass = {\n\troot: 'gov-tabs-item',\n\tinner: 'gov-tabs-item__inner',\n}\n"]}

package/dist/collection/components/gov-tabs/gov-tabs-item.css

@@ -48,15 +48,15 @@
  -  Variables - Typography
  */
 /*
- -  Variables - Sizes
+ -  Variables - Variants
  */
-/* "Constants" for general usage */
 /*
- -  Variables - Variants
+ -  Variables - Container
  */
 /*
- -  Variables - Layout
+ -  Variables - Sizes
  */
+/* "Constants" for general usage */
 /*
  -  Variables - Accordion
  */
@@ -72,6 +72,9 @@
 /*
  -  Variables - Buttons (&& Badges)
  */
+/*
+ -  Variables - Breadcrumbs
+ */
 /*
  -  Variables - Classes
  */
@@ -84,9 +87,6 @@
 /*
  -  Variables - Card
  */
-/*
- -  Variables - Container
- */
 /*
  -  Variables - Message
  */
@@ -99,6 +99,9 @@
 /*
  -  Variables - Grid
  */
+/*
+ -  Variables - Tiles
+ */
 /*
  -  Variables - Modal & Prompt
  */
@@ -118,6 +121,9 @@
 /*
  -  Variables - Tooltip
  */
+/*
+ -  Variables - Loading
+ */
 /*
  -	Variables - Forms
  */
@@ -145,6 +151,9 @@
 /*
  -	Variables - Form checkbox & radio
  */
+/*
+ -  Variables - Form group
+ */
 /*
  -	Variables - Form file
  */
@@ -157,12 +166,21 @@
 /*
  -  Variables - Stepper
  */
+/*
+ -  Variables - Side nav
+ */
 /*
  -  Variables - Grid & Tile
  */
 /*
  -  Variables - Pagination
  */
+/*
+ -  Variables - Nav
+ */
+/*
+ -  Variables - Layout
+ */
 .gov-spin-animation,
 .gov-pseudo-spin-animation::before {
   animation: spin 4s linear infinite;
@@ -173,6 +191,11 @@
     transform: rotate(360deg);
   }
 }
+@keyframes countdown {
+  to {
+    transform: scaleX(0);
+  }
+}
 /*
 *   Tabs - Item
 */

package/dist/collection/components/gov-tabs/gov-tabs-item.js

@@ -1,7 +1,7 @@
-import { h, Host } from "@stencil/core";
-import { createID } from "../../utils/string.utils";
-import { toBoolAttrIfDefined } from "../../helpers/Dom/template";
-import { TabsItemClass } from "./constants";
+import { h, Host } from '@stencil/core';
+import { createID } from '../../utils/string.utils';
+import { govHost, toBoolAttrIfDefined } from "../../helpers/Dom/template";
+import { TabsItemClass } from './constants';
 export class GovTabsItem {
   constructor() {
     this.identifier = undefined;
@@ -9,11 +9,12 @@ export class GovTabsItem {
     this.label = undefined;
     this.default = false;
     this.isActive = false;
-    this.contentId = createID("GovTabContent");
-    this.triggeId = createID("GovTabTrigger");
+    this.h = govHost(this.host);
+    this.contentId = createID('GovTabContent');
+    this.triggeId = createID('GovTabTrigger');
   }
   render() {
-    return (h(Host, { class: TabsItemClass.root, default: this.default }, h("div", { class: TabsItemClass.inner, role: "tabpanel", id: this.identifier || this.contentId, hidden: !this.isActive, "aria-labelledby": this.triggerIdentifier || this.triggeId, "aria-hidden": toBoolAttrIfDefined(!this.isActive) }, h("slot", null))));
+    return (h(Host, { class: this.h.classes(TabsItemClass.root), default: this.default }, h("div", { class: TabsItemClass.inner, role: "tabpanel", id: this.identifier || this.contentId, hidden: !this.isActive, "aria-labelledby": this.triggerIdentifier || this.triggeId, "aria-hidden": toBoolAttrIfDefined(!this.isActive) }, h("slot", null))));
   }
   /**
    * Returns a unique tab content identifier

package/dist/collection/components/gov-tabs/gov-tabs-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"gov-tabs-item.js","sourceRoot":"","sources":["../../../../../../src/components/gov-tabs/gov-tabs-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAChF,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AACnD,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAA;AAChE,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAM3C,MAAM,OAAO,WAAW;EAMvB;;;;mBAoBoC,KAAK;oBACZ,KAAK;IApBjC,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAA;IAC1C,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAA;GACzC;EAoBD,MAAM;IACL,OAAO,CACN,EAAC,IAAI,IAAC,KAAK,EAAE,aAAa,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO;MACrD,WAAK,KAAK,EAAE,aAAa,CAAC,KAAK,EAAE,IAAI,EAAC,UAAU,EAC3C,EAAE,EAAE,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,SAAS,EACrC,MAAM,EAAE,CAAC,IAAI,CAAC,QAAQ,qBACL,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,QAAQ,iBAC3C,mBAAmB,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC;QACpD,eAAa,CACR,CACA,CACP,CAAA;EACF,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,aAAa;IAClB,OAAO,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,SAAS,CAAA;EACzC,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,oBAAoB;IACzB,OAAO,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,QAAQ,CAAA;EAC/C,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,eAAe,CAAC,MAAe;IACpC,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAA;EACvB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, h, Prop, Method, State, Host } from \"@stencil/core\"\nimport { createID } from \"../../utils/string.utils\"\nimport { toBoolAttrIfDefined } from \"../../helpers/Dom/template\"\nimport { TabsItemClass } from \"./constants\"\n\n@Component({\n\ttag: \"gov-tabs-item\",\n\tstyleUrl: \"gov-tabs-item.scss\",\n})\nexport class GovTabsItem {\n\t@Element() host: HTMLGovTabsItemElement\n\n\tprivate readonly contentId: string\n\tprivate readonly triggeId: string\n\n\tconstructor() {\n\t\tthis.contentId = createID(\"GovTabContent\")\n\t\tthis.triggeId = createID(\"GovTabTrigger\")\n\t}\n\n\t/**\n\t * Custom tab item identifier. Otherwise, it will be generated\n\t */\n\t@Prop() readonly identifier: string\n\t/**\n\t * Custom tab trigger item identifier. Otherwise, it will be generated\n\t */\n\t@Prop() readonly triggerIdentifier: string\n\t/**\n\t * Item name of the tab\n\t */\n\t@Prop() readonly label: string\n\t/**\n\t * Default selected tab\n\t */\n\t@Prop() readonly default: boolean = false\n\t@State() isActive: boolean = false\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={TabsItemClass.root} default={this.default}>\n\t\t\t\t<div class={TabsItemClass.inner} role=\"tabpanel\"\n\t\t\t\t     id={this.identifier || this.contentId}\n\t\t\t\t     hidden={!this.isActive}\n\t\t\t\t     aria-labelledby={this.triggerIdentifier || this.triggeId}\n\t\t\t\t     aria-hidden={toBoolAttrIfDefined(!this.isActive)}>\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n\n\t/**\n\t * Returns a unique tab content identifier\n\t */\n\t@Method()\n\tasync getIdentifier(): Promise<string> {\n\t\treturn this.identifier || this.contentId\n\t}\n\n\t/**\n\t * Returns a unique tab trigger identifier\n\t */\n\t@Method()\n\tasync getTriggerIdentifier(): Promise<string> {\n\t\treturn this.triggerIdentifier || this.triggeId\n\t}\n\n\t/**\n\t * Set status of tab-item\n\t */\n\t@Method()\n\tasync setActiveStatus(status: boolean): Promise<void> {\n\t\tthis.isActive = status\n\t}\n}\n"]}
+{"version":3,"file":"gov-tabs-item.js","sourceRoot":"","sources":["../../../../../../src/components/gov-tabs/gov-tabs-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAChF,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AACnD,OAAO,EAAE,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAA;AAEzE,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAM3C,MAAM,OAAO,WAAW;EAKvB;;;;mBAsBoC,KAAK;oBACrB,KAAK;IAtBxB,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAC3B,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAA;IAC1C,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAA;GACzC;EAqBD,MAAM;IACL,OAAO,CACN,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO;MACrE,WACC,KAAK,EAAE,aAAa,CAAC,KAAK,EAC1B,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,SAAS,EACrC,MAAM,EAAE,CAAC,IAAI,CAAC,QAAQ,qBACL,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,QAAQ,iBAC3C,mBAAmB,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC;QAEhD,eAAa,CACR,CACA,CACP,CAAA;EACF,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,aAAa;IAClB,OAAO,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,SAAS,CAAA;EACzC,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,oBAAoB;IACzB,OAAO,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,QAAQ,CAAA;EAC/C,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,eAAe,CAAC,MAAe;IACpC,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAA;EACvB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, h, Prop, Method, State, Host } from '@stencil/core'\nimport { createID } from '../../utils/string.utils'\nimport { govHost, toBoolAttrIfDefined } from \"../../helpers/Dom/template\"\nimport { GovHost } from \"../../helpers/Dom/template.d\"\nimport { TabsItemClass } from './constants'\n\n@Component({\n\ttag: 'gov-tabs-item',\n\tstyleUrl: 'gov-tabs-item.scss',\n})\nexport class GovTabsItem {\n\tprivate h: GovHost\n\tprivate readonly contentId: string\n\tprivate readonly triggeId: string\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.contentId = createID('GovTabContent')\n\t\tthis.triggeId = createID('GovTabTrigger')\n\t}\n\n\t@Element() host: HTMLGovTabsItemElement\n\t/**\n\t * Custom tab item identifier. Otherwise, it will be generated\n\t */\n\t@Prop() readonly identifier: string\n\t/**\n\t * Custom tab trigger item identifier. Otherwise, it will be generated\n\t */\n\t@Prop() readonly triggerIdentifier: string\n\t/**\n\t * Item name of the tab\n\t */\n\t@Prop() readonly label: string\n\t/**\n\t * Default selected tab\n\t */\n\t@Prop() readonly default: boolean = false\n\t@State() isActive = false\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes(TabsItemClass.root)} default={this.default}>\n\t\t\t\t<div\n\t\t\t\t\tclass={TabsItemClass.inner}\n\t\t\t\t\trole=\"tabpanel\"\n\t\t\t\t\tid={this.identifier || this.contentId}\n\t\t\t\t\thidden={!this.isActive}\n\t\t\t\t\taria-labelledby={this.triggerIdentifier || this.triggeId}\n\t\t\t\t\taria-hidden={toBoolAttrIfDefined(!this.isActive)}\n\t\t\t\t>\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n\n\t/**\n\t * Returns a unique tab content identifier\n\t */\n\t@Method()\n\tasync getIdentifier(): Promise<string> {\n\t\treturn this.identifier || this.contentId\n\t}\n\n\t/**\n\t * Returns a unique tab trigger identifier\n\t */\n\t@Method()\n\tasync getTriggerIdentifier(): Promise<string> {\n\t\treturn this.triggerIdentifier || this.triggeId\n\t}\n\n\t/**\n\t * Set status of tab-item\n\t */\n\t@Method()\n\tasync setActiveStatus(status: boolean): Promise<void> {\n\t\tthis.isActive = status\n\t}\n}\n"]}

package/dist/collection/components/gov-tabs/gov-tabs.css

@@ -62,15 +62,15 @@
  -  Variables - Typography
  */
 /*
- -  Variables - Sizes
+ -  Variables - Variants
  */
-/* "Constants" for general usage */
 /*
- -  Variables - Variants
+ -  Variables - Container
  */
 /*
- -  Variables - Layout
+ -  Variables - Sizes
  */
+/* "Constants" for general usage */
 /*
  -  Variables - Accordion
  */
@@ -86,6 +86,9 @@
 /*
  -  Variables - Buttons (&& Badges)
  */
+/*
+ -  Variables - Breadcrumbs
+ */
 /*
  -  Variables - Classes
  */
@@ -98,9 +101,6 @@
 /*
  -  Variables - Card
  */
-/*
- -  Variables - Container
- */
 /*
  -  Variables - Message
  */
@@ -113,6 +113,9 @@
 /*
  -  Variables - Grid
  */
+/*
+ -  Variables - Tiles
+ */
 /*
  -  Variables - Modal & Prompt
  */
@@ -132,6 +135,9 @@
 /*
  -  Variables - Tooltip
  */
+/*
+ -  Variables - Loading
+ */
 /*
  -	Variables - Forms
  */
@@ -159,6 +165,9 @@
 /*
  -	Variables - Form checkbox & radio
  */
+/*
+ -  Variables - Form group
+ */
 /*
  -	Variables - Form file
  */
@@ -171,12 +180,21 @@
 /*
  -  Variables - Stepper
  */
+/*
+ -  Variables - Side nav
+ */
 /*
  -  Variables - Grid & Tile
  */
 /*
  -  Variables - Pagination
  */
+/*
+ -  Variables - Nav
+ */
+/*
+ -  Variables - Layout
+ */
 .gov-spin-animation,
 .gov-pseudo-spin-animation::before {
   animation: spin 4s linear infinite;
@@ -187,11 +205,18 @@
     transform: rotate(360deg);
   }
 }
+@keyframes countdown {
+  to {
+    transform: scaleX(0);
+  }
+}
 /*
 *   Tabs
 */
 .gov-tabs {
+  position: relative;
   display: block;
+  width: 100%;
 }
 .gov-tabs__list {
   display: flex;
@@ -222,7 +247,6 @@
   margin: 0;
   padding: 0.75rem 0rem 0.625rem;
   border-bottom: 0.125rem solid transparent;
-  font-family: "Roboto", sans-serif;
   font-weight: 700;
   text-align: center;
   text-transform: uppercase;

package/dist/collection/components/gov-tabs/gov-tabs.js

@@ -1,12 +1,12 @@
-import { Host, h } from "@stencil/core";
-import { validateProp } from "../../helpers/Validate/props";
-import { TabsItemClass } from "./constants";
-import { toBoolAttr } from "../../helpers/Dom/template";
-import { validateWcagLabel, validateWcagProp } from "../../helpers/Validate/wcag";
-import { TabsClass, Types } from "./constants";
-import { canValidateWcagOnRender } from "../../helpers/Dom/win";
-import { delay, throttle } from "../../utils/utils";
-import { createID } from "../../utils/string.utils";
+import { Host, h } from '@stencil/core';
+import { validateProp } from '../../helpers/Validate/props';
+import { TabsItemClass } from './constants';
+import { govHost, toBoolAttr } from "../../helpers/Dom/template";
+import { validateWcagLabel, validateWcagProp } from '../../helpers/Validate/wcag';
+import { TabsClass, Types } from './constants';
+import { canValidateWcagOnRender } from '../../helpers/Dom/win';
+import { delay, throttle } from '../../utils/utils';
+import { createID } from '../../utils/string.utils';
 import { Variants } from '../../core/constants/variants';
 export class GovTabs {
   constructor() {
@@ -14,12 +14,13 @@ export class GovTabs {
     this.controller = [];
     this.focusIndex = 0;
     this.compactControls = false;
-    this.type = "text";
+    this.type = 'text';
     this.variant = Variants.PRIMARY;
     this.wcagLabel = undefined;
     this.wcagSelectLabel = undefined;
     this.wcagLabelledBy = undefined;
-    this.formSelectId = createID("GovForSelect");
+    this.h = govHost(this.host);
+    this.formSelectId = createID('GovForSelect');
   }
   validateType(newValue) {
     validateProp(Types, newValue, TabsClass.root);
@@ -41,11 +42,10 @@ export class GovTabs {
     this.controller = [];
     const promises = [];
     this.host.querySelectorAll(TabsItemClass.root).forEach((tab) => {
-      const controlItem = Promise.all([tab.getIdentifier(), tab.getTriggerIdentifier()])
-        .then(([identifier, triggerIdentifier]) => {
-        const isDefault = typeof tab.getAttribute("default") === "string";
+      const controlItem = Promise.all([tab.getIdentifier(), tab.getTriggerIdentifier()]).then(([identifier, triggerIdentifier]) => {
+        const isDefault = typeof tab.getAttribute('default') === 'string';
         return {
-          label: tab.getAttribute("label"),
+          label: tab.getAttribute('label'),
           contentIdentifier: identifier,
           triggerIdentifier: triggerIdentifier,
           element: tab,
@@ -55,8 +55,8 @@ export class GovTabs {
       });
       promises.push(controlItem);
     });
-    Promise.all(promises).then((controllers) => {
-      let defaultTab = controllers.findIndex((controller) => controller.default);
+    Promise.all(promises).then(controllers => {
+      let defaultTab = controllers.findIndex(controller => controller.default);
       if (defaultTab === -1)
         defaultTab = 0;
       this.focusIndex = defaultTab;
@@ -67,14 +67,14 @@ export class GovTabs {
   }
   setActiveByIdentifier(identifier) {
     const temp = [];
-    this.controller.map((item) => {
+    this.controller.map(item => {
       item.active = identifier === item.triggerIdentifier || identifier === item.contentIdentifier;
       temp.push(item);
     });
     this.controller = [...temp];
   }
   reRender() {
-    this.controller.map((control) => {
+    this.controller.map(control => {
       control.element.setActiveStatus(control.active);
     });
   }
@@ -92,10 +92,10 @@ export class GovTabs {
     resizeObserver.observe(this.tabsRef);
   }
   render() {
-    return (h(Host, { class: TabsClass.root, variant: this.variant, type: this.type, role: "tablist", ref: el => this.tabsRef = el, "aria-label": this.wcagLabel, "aria-labelledby": this.wcagLabelledBy, onKeyDown: this.onKeydownHandler.bind(this) }, h("div", { class: TabsClass.tabs, "aria-hidden": toBoolAttr(this.compactControls) }, h("ul", { class: TabsClass.list }, this.controller.map((control, index) => h("li", { class: TabsClass.item }, this.type == 'text' ? (h("button", { class: TabsClass.btn, id: control.triggerIdentifier, role: "tab", onClick: () => this.onSelectHandler(control, index), "aria-selected": toBoolAttr(control.active), "aria-controls": control.contentIdentifier, tabindex: control.active ? -1 : 0, ref: el => this.triggerRefs[control.triggerIdentifier] = el }, control.label)) : (h("gov-badge", { variant: this.variant, type: toBoolAttr(control.active) == "true" ? 'solid' : 'outlined', nativeType: toBoolAttr(control.active) == "true" ? "span" : "button", "on-gov-click": () => this.onSelectHandler(control, index) }, control.label)))))), h("span", { id: this.formSelectId, hidden: true }, this.wcagSelectLabel), this.compactControls ? (h("gov-form-select", { "wcag-labelded-by": this.formSelectId, "onGov-change": this.onChangeHandler.bind(this) }, this.controller.map((control) => h("option", { value: control.triggerIdentifier, selected: control.active }, control.label)))) : null, h("slot", null)));
+    return (h(Host, { class: this.h.classes(TabsClass.root), variant: this.variant, type: this.type, role: "tablist", ref: el => (this.tabsRef = el), "aria-label": this.wcagLabel, "aria-labelledby": this.wcagLabelledBy, onKeyDown: this.onKeydownHandler.bind(this) }, h("div", { class: TabsClass.tabs, "aria-hidden": toBoolAttr(this.compactControls) }, h("ul", { class: TabsClass.list }, this.controller.map((control, index) => (h("li", { class: TabsClass.item }, this.type == 'text' ? (h("button", { class: TabsClass.btn, id: control.triggerIdentifier, role: "tab", onClick: () => this.onSelectHandler(control, index), "aria-selected": toBoolAttr(control.active), "aria-controls": control.contentIdentifier, tabindex: control.active ? -1 : 0, ref: el => (this.triggerRefs[control.triggerIdentifier] = el) }, control.label)) : (h("gov-badge", { variant: this.variant, type: toBoolAttr(control.active) == 'true' ? 'solid' : 'outlined', nativeType: toBoolAttr(control.active) == 'true' ? 'span' : 'button', "on-gov-click": () => this.onSelectHandler(control, index) }, control.label))))))), h("span", { id: this.formSelectId, hidden: true }, this.wcagSelectLabel), this.compactControls ? (h("gov-form-select", { "wcag-labelled-by": this.formSelectId, "onGov-change": this.onChangeHandler.bind(this) }, this.controller.map(control => (h("option", { value: control.triggerIdentifier, selected: control.active }, control.label))))) : null, h("slot", null)));
   }
   getCurrentTab() {
-    return this.controller.find((control) => control.active) || null;
+    return this.controller.find(control => control.active) || null;
   }
   onSelectHandler(control, index) {
     this.focusIndex = index;
@@ -114,7 +114,7 @@ export class GovTabs {
     const keyCode = e.keyCode;
     e.stopPropagation();
     if (keyCode === 39 || keyCode === 37) {
-      if (false === (this.focusIndex >= 0 && this.focusIndex <= (this.controller.length - 1))) {
+      if (false === (this.focusIndex >= 0 && this.focusIndex <= this.controller.length - 1)) {
         return;
       }
       this.controller[this.focusIndex].active = false;
@@ -130,7 +130,7 @@ export class GovTabs {
           this.focusIndex = this.controller.length - 1;
         }
       }
-      if ((this.focusIndex >= 0 && this.focusIndex <= (this.controller.length - 1))) {
+      if (this.focusIndex >= 0 && this.focusIndex <= this.controller.length - 1) {
         const current = this.controller[this.focusIndex];
         current.active = true;
         this.triggerRefs[current.triggerIdentifier].focus();
@@ -163,7 +163,7 @@ export class GovTabs {
    * Validate the WCAG attributes of the component
    */
   async validateWcag() {
-    validateWcagProp(this.wcagSelectLabel, "wcag-select-label", TabsClass.root);
+    validateWcagProp(this.wcagSelectLabel, 'wcag-select-label', TabsClass.root);
     validateWcagLabel(this.wcagLabel, this.wcagLabelledBy, TabsClass.root);
   }
   static get is() { return "gov-tabs"; }
@@ -200,7 +200,7 @@ export class GovTabs {
         },
         "attribute": "type",
         "reflect": false,
-        "defaultValue": "\"text\""
+        "defaultValue": "'text'"
       },
       "variant": {
         "type": "any",
@@ -273,7 +273,7 @@ export class GovTabs {
           "tags": [],
           "text": "Indicates the id of a component that labels the tabs."
         },
-        "attribute": "wcag-labelded-by",
+        "attribute": "wcag-labelled-by",
         "reflect": false
       }
     };
@@ -297,9 +297,13 @@ export class GovTabs {
           "text": "Emitted when the tab is changed."
         },
         "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
+          "original": "HTMLGovTabsItemElement",
+          "resolved": "HTMLGovTabsItemElement",
+          "references": {
+            "HTMLGovTabsItemElement": {
+              "location": "global"
+            }
+          }
         }
       }];
   }
@@ -323,7 +327,7 @@ export class GovTabs {
       },
       "currentTab": {
         "complexType": {
-          "signature": "() => Promise<HTMLGovTabsItemElement | null>",
+          "signature": "() => Promise<Nullable<HTMLGovTabsItemElement>>",
           "parameters": [],
           "references": {
             "Promise": {
@@ -331,6 +335,10 @@ export class GovTabs {
             },
             "HTMLGovTabsItemElement": {
               "location": "global"
+            },
+            "Nullable": {
+              "location": "import",
+              "path": "../../types/interfaces"
             }
           },
           "return": "Promise<HTMLGovTabsItemElement>"