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

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

@@ -1,11 +1,13 @@
-import { h, Host } from '@stencil/core';
-import { validateProp } from '../../helpers/Validate/props';
-import { StatsBarClass, StatsBarVariant, StatsBarItemClass, StatsBarIconPosition } from './constants';
-import { Variants } from '../../core/constants/variants';
+import { h, Host } from "@stencil/core";
+import { validateProp } from "../../helpers/Validate/props";
+import { StatsBarClass, StatsBarVariant, StatsBarItemClass, StatsBarIconPosition, } from "./constants";
+import { Variants } from "../../core/constants/variants";
+import { govHost } from "../../helpers/Dom/template";
 export class GovStatsbar {
   constructor() {
     this.iconPosition = undefined;
     this.variant = Variants.PRIMARY;
+    this.h = govHost(this.host);
   }
   validateIconPosition(newValue) {
     validateProp(StatsBarIconPosition, newValue, StatsBarClass.root);
@@ -19,13 +21,13 @@ export class GovStatsbar {
   }
   componentDidLoad() {
     this.host.querySelectorAll(StatsBarItemClass.root).forEach((node) => {
-      if (this.iconPosition === 'left') {
-        node.setAttribute('icon-position', 'left');
+      if (this.iconPosition === "left") {
+        node.setAttribute("icon-position", "left");
       }
     });
   }
   render() {
-    return (h(Host, { class: StatsBarClass.root, variant: this.variant }, h("section", { class: StatsBarClass.section }, h("slot", null))));
+    return (h(Host, { class: this.h.classes(StatsBarClass.root), variant: this.variant }, h("section", { class: StatsBarClass.section }, h("slot", null))));
   }
   static get is() { return "gov-statsbar"; }
   static get originalStyleUrls() {
@@ -57,7 +59,7 @@ export class GovStatsbar {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Icon\u2019s position"
         },
         "attribute": "icon-position",
         "reflect": false,
@@ -80,7 +82,7 @@ export class GovStatsbar {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Style variation"
         },
         "attribute": "variant",
         "reflect": false,

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

@@ -1 +1 @@
-{"version":3,"file":"gov-statsbar.js","sourceRoot":"","sources":["../../../../../../src/components/gov-statsbar/gov-statsbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACxE,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,eAAe,EAAuB,iBAAiB,EAAE,oBAAoB,EAA4B,MAAM,aAAa,CAAA;AACpJ,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AAMxD,MAAM,OAAO,WAAW;;wBAGoC,SAAS;mBACK,QAAQ,CAAC,OAAO;;EAGzF,oBAAoB,CAAC,QAAgB;IACpC,YAAY,CAAC,oBAAoB,EAAE,QAAQ,EAAE,aAAa,CAAC,IAAI,CAAC,CAAA;EACjE,CAAC;EAGD,eAAe,CAAC,QAAgB;IAC/B,YAAY,CAAC,eAAe,EAAE,QAAQ,EAAE,aAAa,CAAC,IAAI,CAAC,CAAA;EAC5D,CAAC;EAED,iBAAiB;IAChB,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA;IAC5C,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;EACnC,CAAC;EAED,gBAAgB;IACf,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,IAAS,EAAE,EAAE;MACxE,IAAI,IAAI,CAAC,YAAY,KAAK,MAAM,EAAE;QACjC,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAA;OAC1C;IACF,CAAC,CAAC,CAAA;EACH,CAAC;EAED,MAAM;IACL,OAAO,CACN,EAAC,IAAI,IAAC,KAAK,EAAE,aAAa,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO;MACrD,eAAS,KAAK,EAAE,aAAa,CAAC,OAAO;QACpC,eAAQ,CACC,CACJ,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, h, Host, Prop, Watch } from '@stencil/core'\nimport { validateProp } from '../../helpers/Validate/props'\nimport { StatsBarClass, StatsBarVariant, StatsBarVariantType, StatsBarItemClass, StatsBarIconPosition, StatsBarIconPositionType } from './constants'\nimport { Variants } from '../../core/constants/variants'\n\n@Component({\n\ttag: 'gov-statsbar',\n\tstyleUrl: 'gov-statsbar.scss',\n})\nexport class GovStatsbar {\n\t@Element() host: HTMLGovStatsbarElement\n\n\t@Prop() readonly iconPosition?: StatsBarIconPositionType = undefined\n\t@Prop({ attribute: 'variant' }) readonly variant?: StatsBarVariantType = Variants.PRIMARY\n\n\t@Watch('iconPosition')\n\tvalidateIconPosition(newValue: string): void {\n\t\tvalidateProp(StatsBarIconPosition, newValue, StatsBarClass.root)\n\t}\n\n\t@Watch('variant')\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(StatsBarVariant, newValue, StatsBarClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateIconPosition(this.iconPosition)\n\t\tthis.validateVariant(this.variant)\n\t}\n\n\tcomponentDidLoad() {\n\t\tthis.host.querySelectorAll(StatsBarItemClass.root).forEach((node: any) => {\n\t\t\tif (this.iconPosition === 'left') {\n\t\t\t\tnode.setAttribute('icon-position', 'left')\n\t\t\t}\n\t\t})\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={StatsBarClass.root} variant={this.variant}>\n\t\t\t\t<section class={StatsBarClass.section}>\n\t\t\t\t\t<slot />\n\t\t\t\t</section>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}
+{"version":3,"file":"gov-statsbar.js","sourceRoot":"","sources":["../../../../../../src/components/gov-statsbar/gov-statsbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACxE,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAC3D,OAAO,EACN,aAAa,EACb,eAAe,EAEf,iBAAiB,EACjB,oBAAoB,GAEpB,MAAM,aAAa,CAAA;AACpB,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AAExD,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAMpD,MAAM,OAAO,WAAW;EAGvB;wBAS2D,SAAS;mBAIK,QAAQ,CAAC,OAAO;IAZxF,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EAcD,oBAAoB,CAAC,QAAgB;IACpC,YAAY,CAAC,oBAAoB,EAAE,QAAQ,EAAE,aAAa,CAAC,IAAI,CAAC,CAAA;EACjE,CAAC;EAGD,eAAe,CAAC,QAAgB;IAC/B,YAAY,CAAC,eAAe,EAAE,QAAQ,EAAE,aAAa,CAAC,IAAI,CAAC,CAAA;EAC5D,CAAC;EAED,iBAAiB;IAChB,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA;IAC5C,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;EACnC,CAAC;EAED,gBAAgB;IACf,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,IAAS,EAAE,EAAE;MACxE,IAAI,IAAI,CAAC,YAAY,KAAK,MAAM,EAAE;QACjC,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAA;OAC1C;IACF,CAAC,CAAC,CAAA;EACH,CAAC;EAED,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,eAAS,KAAK,EAAE,aAAa,CAAC,OAAO;QACpC,eAAQ,CACC,CACJ,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, h, Host, Prop, Watch } from \"@stencil/core\"\nimport { validateProp } from \"../../helpers/Validate/props\"\nimport {\n\tStatsBarClass,\n\tStatsBarVariant,\n\tStatsBarVariantType,\n\tStatsBarItemClass,\n\tStatsBarIconPosition,\n\tStatsBarIconPositionType,\n} from \"./constants\"\nimport { Variants } from \"../../core/constants/variants\"\nimport { GovHost } from \"../../helpers/Dom/template.d\"\nimport { govHost } from \"../../helpers/Dom/template\"\n\n@Component({\n\ttag: \"gov-statsbar\",\n\tstyleUrl: \"gov-statsbar.scss\",\n})\nexport class GovStatsbar {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovStatsbarElement\n\n\t/**\n\t * Icon’s position\n\t */\n\t@Prop() readonly iconPosition?: StatsBarIconPositionType = undefined\n\t/**\n\t * Style variation\n\t */\n\t@Prop({ attribute: \"variant\" }) readonly variant?: StatsBarVariantType = Variants.PRIMARY\n\n\t@Watch(\"iconPosition\")\n\tvalidateIconPosition(newValue: string): void {\n\t\tvalidateProp(StatsBarIconPosition, newValue, StatsBarClass.root)\n\t}\n\n\t@Watch(\"variant\")\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(StatsBarVariant, newValue, StatsBarClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateIconPosition(this.iconPosition)\n\t\tthis.validateVariant(this.variant)\n\t}\n\n\tcomponentDidLoad() {\n\t\tthis.host.querySelectorAll(StatsBarItemClass.root).forEach((node: any) => {\n\t\t\tif (this.iconPosition === \"left\") {\n\t\t\t\tnode.setAttribute(\"icon-position\", \"left\")\n\t\t\t}\n\t\t})\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes(StatsBarClass.root)} variant={this.variant}>\n\t\t\t\t<section class={StatsBarClass.section}>\n\t\t\t\t\t<slot />\n\t\t\t\t</section>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

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

@@ -1,16 +1,27 @@
 import { Variants as GlobalVariants } from '../../core/constants/variants';
-import { Sizes as GlobalSizes } from "../../core/constants/sizes";
-export const Variants = [undefined, GlobalVariants.PRIMARY, GlobalVariants.SECONDARY, GlobalVariants.WARNING, GlobalVariants.ERROR, GlobalVariants.SUCCESS];
-export const Sizes = [undefined, GlobalSizes._S, GlobalSizes._M];
+import { Sizes as GlobalSizes } from '../../core/constants/sizes';
+export const Variants = [
+  undefined,
+  GlobalVariants.PRIMARY,
+  GlobalVariants.SECONDARY,
+  GlobalVariants.WARNING,
+  GlobalVariants.ERROR,
+  GlobalVariants.SUCCESS,
+];
+export const Sizes = [undefined, GlobalSizes._XS, GlobalSizes._S, GlobalSizes._M];
 export const StepperClass = {
-  root: "gov-stepper",
+  root: 'gov-stepper',
 };
 export const StepperItemClass = {
   root: 'gov-stepper-item',
-  header: "gov-stepper-item__header",
-  title: "gov-stepper-item__title",
-  label: "gov-stepper-item__label",
-  prefix: "gov-stepper-item__prefix",
-  content: "gov-stepper-item__content",
+  rootWithAnnot: 'gov-stepper-item gov-stepper-item--w-annot',
+  header: 'gov-stepper-item__header',
+  title: 'gov-stepper-item__title',
+  label: 'gov-stepper-item__label',
+  name: 'gov-stepper-item__name',
+  annot: 'gov-stepper-item__annot',
+  prefix: 'gov-stepper-item__prefix',
+  content: 'gov-stepper-item__content',
+  suffix: 'gov-stepper-item__suffix',
 };
 //# sourceMappingURL=constants.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../src/components/gov-stepper/constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,+BAA+B,CAAA;AAC1E,OAAO,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,4BAA4B,CAAA;AAEjE,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,WAAW,CAAC,EAAE,EAAC,WAAW,CAAC,EAAE,CAAU,CAAA;AAGxE,MAAM,CAAC,MAAM,YAAY,GAAG;EAC3B,IAAI,EAAE,aAAa;CACnB,CAAA;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG;EAC/B,IAAI,EAAE,kBAAkB;EACxB,MAAM,EAAE,0BAA0B;EAClC,KAAK,EAAE,yBAAyB;EAChC,KAAK,EAAE,yBAAyB;EAChC,MAAM,EAAE,0BAA0B;EAClC,OAAO,EAAE,2BAA2B;CACpC,CAAA","sourcesContent":["import { Variants as GlobalVariants } from '../../core/constants/variants'\nimport { Sizes as GlobalSizes } from \"../../core/constants/sizes\"\n\nexport const Variants = [undefined, GlobalVariants.PRIMARY, GlobalVariants.SECONDARY, GlobalVariants.WARNING, GlobalVariants.ERROR, GlobalVariants.SUCCESS] as const\nexport type VariantType = typeof Variants[number]\n\nexport const Sizes = [undefined, GlobalSizes._S,GlobalSizes._M] as const\nexport type SizesType = typeof Sizes[number]\n\nexport const StepperClass = {\n\troot: \"gov-stepper\",\n}\n\nexport const StepperItemClass = {\n\troot: 'gov-stepper-item',\n\theader: \"gov-stepper-item__header\",\n\ttitle: \"gov-stepper-item__title\",\n\tlabel: \"gov-stepper-item__label\",\n\tprefix: \"gov-stepper-item__prefix\",\n\tcontent: \"gov-stepper-item__content\",\n}\n"]}
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../src/components/gov-stepper/constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,+BAA+B,CAAA;AAC1E,OAAO,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,4BAA4B,CAAA;AAEjE,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,WAAW,CAAC,GAAG,EAAE,WAAW,CAAC,EAAE,EAAE,WAAW,CAAC,EAAE,CAAU,CAAA;AAG1F,MAAM,CAAC,MAAM,YAAY,GAAG;EAC3B,IAAI,EAAE,aAAa;CACnB,CAAA;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG;EAC/B,IAAI,EAAE,kBAAkB;EACxB,aAAa,EAAE,4CAA4C;EAC3D,MAAM,EAAE,0BAA0B;EAClC,KAAK,EAAE,yBAAyB;EAChC,KAAK,EAAE,yBAAyB;EAChC,IAAI,EAAE,wBAAwB;EAC9B,KAAK,EAAE,yBAAyB;EAChC,MAAM,EAAE,0BAA0B;EAClC,OAAO,EAAE,2BAA2B;EACpC,MAAM,EAAE,0BAA0B;CAClC,CAAA","sourcesContent":["import { Variants as GlobalVariants } from '../../core/constants/variants'\nimport { Sizes as GlobalSizes } from '../../core/constants/sizes'\n\nexport const Variants = [\n\tundefined,\n\tGlobalVariants.PRIMARY,\n\tGlobalVariants.SECONDARY,\n\tGlobalVariants.WARNING,\n\tGlobalVariants.ERROR,\n\tGlobalVariants.SUCCESS,\n] as const\nexport type VariantType = (typeof Variants)[number]\n\nexport const Sizes = [undefined, GlobalSizes._XS, GlobalSizes._S, GlobalSizes._M] as const\nexport type SizesType = (typeof Sizes)[number]\n\nexport const StepperClass = {\n\troot: 'gov-stepper',\n}\n\nexport const StepperItemClass = {\n\troot: 'gov-stepper-item',\n\trootWithAnnot: 'gov-stepper-item gov-stepper-item--w-annot',\n\theader: 'gov-stepper-item__header',\n\ttitle: 'gov-stepper-item__title',\n\tlabel: 'gov-stepper-item__label',\n\tname: 'gov-stepper-item__name',\n\tannot: 'gov-stepper-item__annot',\n\tprefix: 'gov-stepper-item__prefix',\n\tcontent: 'gov-stepper-item__content',\n\tsuffix: 'gov-stepper-item__suffix',\n}\n"]}

package/dist/collection/components/gov-stepper/gov-stepper-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,9 +191,17 @@
     transform: rotate(360deg);
   }
 }
+@keyframes countdown {
+  to {
+    transform: scaleX(0);
+  }
+}
 /*
 *   Stepper - Item
 */
+/*
+ *   Wizzard & Stepper Shared Definitions
+ */
 .gov-stepper-item {
   position: relative;
   display: block;
@@ -185,7 +211,7 @@
   position: relative;
   width: 100%;
 }
-.gov-stepper-item__header > .gov-icon {
+.gov-stepper-item__arrow {
   flex: 0 0 auto;
   width: 0.75rem;
   height: 0.75rem;
@@ -193,18 +219,14 @@
 .gov-stepper-item__title {
   margin: 0;
   padding: 0;
-  font-family: "Roboto", sans-serif;
+  font-family: var(--gov-font-family, "Roboto", sans-serif);
   font-weight: 400;
   box-sizing: border-box;
   display: flex;
   gap: 1rem;
-  align-items: center;
+  align-items: baseline;
 }
 .gov-stepper-item__prefix {
-  font-weight: var(--gov-text-xl-font-weight);
-  font-size: var(--gov-text-xl-font-size);
-  line-height: var(--gov-text-xl-line-height);
-  letter-spacing: var(--gov-text-xl-letter-spacing);
   display: flex;
   flex: 0 0 auto;
   justify-content: center;
@@ -212,12 +234,23 @@
   border-radius: 50%;
   text-align: center;
 }
-.gov-stepper-item__prefix i,
 .gov-stepper-item__prefix .gov-icon {
-  width: 1.125rem;
-  height: 1.125rem;
+  width: 45%;
+  height: 45%;
+}
+.gov-stepper-item__name {
+  display: flex;
+  flex-direction: column;
 }
-.gov-stepper-item__content p:last-child {
+.gov-stepper-item__label {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+.gov-stepper-item__annot {
+  color: var(--gov-color-secondary);
+}
+.gov-stepper-item__content > *:last-child {
   margin-bottom: 0;
 }
 .gov-stepper-item[variant=primary] .gov-stepper-item__header {
@@ -239,21 +272,21 @@
 }
 .gov-stepper-item[variant=success] .gov-stepper-item__prefix {
   background: var(--gov-wizzard-success-indicator-bg, var(--gov-color-success));
-  color: var(--gov-wizzard-success-indicator-color, var(--gov-color-secondary-100));
+  color: var(--gov-wizzard-success-indicator-color, var(--gov-color-neutral-white));
 }
 .gov-stepper-item[variant=error] .gov-stepper-item__header {
   color: var(--gov-wizzard-error-color, var(--gov-color-error-500));
 }
 .gov-stepper-item[variant=error] .gov-stepper-item__prefix {
   background: var(--gov-wizzard-error-indicator-bg, var(--gov-color-error));
-  color: var(--gov-wizzard-error-indicator-color, var(--gov-color-secondary-100));
+  color: var(--gov-wizzard-error-indicator-color, var(--gov-color-neutral-white));
 }
 .gov-stepper-item[variant=warning] .gov-stepper-item__header {
   color: var(--gov-wizzard-warning-color, var(--gov-color-warning-500));
 }
 .gov-stepper-item[variant=warning] .gov-stepper-item__prefix {
   background: var(--gov-wizzard-warning-indicator-bg, var(--gov-color-warning));
-  color: var(--gov-wizzard-warning-indicator-color, var(--gov-color-secondary-100));
+  color: var(--gov-wizzard-warning-indicator-color, var(--gov-color-neutral-white));
 }
 .gov-stepper-item::before {
   content: "";
@@ -279,13 +312,51 @@
 .gov-stepper-item[variant=warning]::before {
   background: var(--gov-wizzard-warning-indicator-bg, var(--gov-color-warning));
 }
+.gov-stepper-item[size=xs] {
+  min-height: calc(var(--gov-stepper-xs-indicator-size, 1.5rem) + 3 * var(--gov-stepper-xs-connect-gap, 0.5rem));
+}
+.gov-stepper-item[size=xs]::before {
+  top: calc(var(--gov-stepper-xs-indicator-size, 1.5rem) + var(--gov-stepper-xs-connect-gap, 0.5rem));
+  bottom: var(--gov-stepper-xs-connect-gap, 0.5rem);
+  left: calc((var(--gov-stepper-xs-indicator-size, 1.5rem) - 0.125rem) / 2);
+}
+.gov-stepper-item[size=xs]:last-child {
+  min-height: 0;
+}
+.gov-stepper-item[size=xs] .gov-stepper-item__title {
+  font-weight: var(--gov-text-m-font-weight);
+  font-size: var(--gov-text-m-font-size);
+  line-height: var(--gov-text-m-line-height);
+  letter-spacing: var(--gov-text-m-letter-spacing);
+}
+.gov-stepper-item[size=xs] .gov-stepper-item__annot {
+  font-weight: var(--gov-text-s-font-weight);
+  font-size: var(--gov-text-s-font-size);
+  line-height: var(--gov-text-s-line-height);
+  letter-spacing: var(--gov-text-s-letter-spacing);
+}
+.gov-stepper-item[size=xs] .gov-stepper-item__prefix {
+  font-weight: var(--gov-text-m-font-weight);
+  font-size: var(--gov-text-m-font-size);
+  line-height: var(--gov-text-m-line-height);
+  letter-spacing: var(--gov-text-m-letter-spacing);
+  width: var(--gov-stepper-xs-indicator-size, 1.5rem);
+  height: var(--gov-stepper-xs-indicator-size, 1.5rem);
+  box-shadow: 0 0 0 var(--gov-stepper-xs-connect-gap, 0.5rem) var(--gov-color-neutral-white);
+}
+.gov-stepper-item[size=xs] .gov-stepper-item__content {
+  padding: var(--gov-stepper-xs-content-padding, 1rem 1rem 2rem 2.5rem);
+}
+.gov-stepper-item--w-annot[size=xs] {
+  min-height: calc(var(--gov-stepper-xs-indicator-size, 1.5rem) * 1.5 + 3 * var(--gov-stepper-xs-connect-gap, 0.5rem));
+}
 .gov-stepper-item[size=s] {
-  min-height: 5rem;
+  min-height: calc(var(--gov-stepper-s-indicator-size, 2rem) + 3 * var(--gov-stepper-s-connect-gap, 1rem));
 }
 .gov-stepper-item[size=s]::before {
-  top: 3rem;
-  bottom: 1rem;
-  left: 0.9375rem;
+  top: calc(var(--gov-stepper-s-indicator-size, 2rem) + var(--gov-stepper-s-connect-gap, 1rem));
+  bottom: var(--gov-stepper-s-connect-gap, 1rem);
+  left: calc((var(--gov-stepper-s-indicator-size, 2rem) - 0.125rem) / 2);
 }
 .gov-stepper-item[size=s]:last-child {
   min-height: 0;
@@ -296,20 +367,34 @@
   line-height: var(--gov-text-l-line-height);
   letter-spacing: var(--gov-text-l-letter-spacing);
 }
+.gov-stepper-item[size=s] .gov-stepper-item__annot {
+  font-weight: var(--gov-text-m-font-weight);
+  font-size: var(--gov-text-m-font-size);
+  line-height: var(--gov-text-m-line-height);
+  letter-spacing: var(--gov-text-m-letter-spacing);
+}
 .gov-stepper-item[size=s] .gov-stepper-item__prefix {
-  width: 2rem;
-  height: 2rem;
+  font-weight: var(--gov-text-xl-font-weight);
+  font-size: var(--gov-text-xl-font-size);
+  line-height: var(--gov-text-xl-line-height);
+  letter-spacing: var(--gov-text-xl-letter-spacing);
+  width: var(--gov-stepper-s-indicator-size, 2rem);
+  height: var(--gov-stepper-s-indicator-size, 2rem);
+  box-shadow: 0 0 0 var(--gov-stepper-s-connect-gap, 1rem) var(--gov-color-neutral-white);
 }
 .gov-stepper-item[size=s] .gov-stepper-item__content {
-  padding: 1rem 1rem 2rem 3rem;
+  padding: var(--gov-stepper-s-content-padding, 1rem 1rem 2rem 3rem);
+}
+.gov-stepper-item--w-annot[size=s] {
+  min-height: calc(var(--gov-stepper-s-indicator-size, 2rem) * 1.5 + 3 * var(--gov-stepper-s-connect-gap, 1rem));
 }
 .gov-stepper-item[size=m] {
-  min-height: 5.5rem;
+  min-height: calc(var(--gov-stepper-m-indicator-size, 2.5rem) + 3 * var(--gov-stepper-m-connect-gap, 1rem));
 }
 .gov-stepper-item[size=m]::before {
-  top: 3.5rem;
-  bottom: 1rem;
-  left: 1.1875rem;
+  top: calc(var(--gov-stepper-m-indicator-size, 2.5rem) + var(--gov-stepper-m-connect-gap, 1rem));
+  bottom: var(--gov-stepper-m-connect-gap, 1rem);
+  left: calc((var(--gov-stepper-m-indicator-size, 2.5rem) - 0.125rem) / 2);
 }
 .gov-stepper-item[size=m]:last-child {
   min-height: 0;
@@ -320,10 +405,24 @@
   line-height: var(--gov-text-xl-line-height);
   letter-spacing: var(--gov-text-xl-letter-spacing);
 }
+.gov-stepper-item[size=m] .gov-stepper-item__annot {
+  font-weight: var(--gov-text-m-font-weight);
+  font-size: var(--gov-text-m-font-size);
+  line-height: var(--gov-text-m-line-height);
+  letter-spacing: var(--gov-text-m-letter-spacing);
+}
 .gov-stepper-item[size=m] .gov-stepper-item__prefix {
-  width: 2.5rem;
-  height: 2.5rem;
+  font-weight: var(--gov-text-xl-font-weight);
+  font-size: var(--gov-text-xl-font-size);
+  line-height: var(--gov-text-xl-line-height);
+  letter-spacing: var(--gov-text-xl-letter-spacing);
+  width: var(--gov-stepper-m-indicator-size, 2.5rem);
+  height: var(--gov-stepper-m-indicator-size, 2.5rem);
+  box-shadow: 0 0 0 var(--gov-stepper-m-connect-gap, 1rem) var(--gov-color-neutral-white);
 }
 .gov-stepper-item[size=m] .gov-stepper-item__content {
-  padding: 1rem 1rem 2rem 3.5rem;
+  padding: var(--gov-stepper-m-content-padding, 1rem 1rem 2rem 3.5rem);
+}
+.gov-stepper-item--w-annot[size=m] {
+  min-height: calc(var(--gov-stepper-m-indicator-size, 2.5rem) * 1.5 + 3 * var(--gov-stepper-m-connect-gap, 1rem));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"gov-stepper-item.d.js","sourceRoot":"","sources":["../../../../../../src/components/gov-stepper/gov-stepper-item.d.tsx"],"names":[],"mappings":"","sourcesContent":["export interface GovStepperItemChangeEvent {\n\topen: boolean;\n\telement: HTMLGovStepperItemElement\n}\n"]}
+{"version":3,"file":"gov-stepper-item.d.js","sourceRoot":"","sources":["../../../../../../src/components/gov-stepper/gov-stepper-item.d.tsx"],"names":[],"mappings":"","sourcesContent":["export interface GovStepperItemChangeEvent {\n\topen: boolean\n\telement: HTMLGovStepperItemElement\n}\n"]}

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

@@ -1,20 +1,23 @@
-import { h, Host } from "@stencil/core";
-import { govErrorLog } from "../../helpers/Log/gov.log";
-import { validateProp } from "../../helpers/Validate/props";
+import { h, Host } from '@stencil/core';
+import { govErrorLog } from '../../helpers/Log/gov.log';
+import { validateProp } from '../../helpers/Validate/props';
 import { StepperItemClass } from "./constants";
-import { createID } from "../../utils/string.utils";
-import { govHost } from "../../helpers/Dom/template";
-import { Variants } from "../../core/constants/variants";
+import { createID } from '../../utils/string.utils';
+import { govHost, prepareClasses } from '../../helpers/Dom/template';
+import { Variants } from '../../core/constants/variants';
+import { Sizes } from "../../core/constants/sizes";
 export class GovStepperItem {
   constructor() {
     this.isExpandedState = undefined;
     this.variant = Variants.PRIMARY;
+    this.size = Sizes._M;
     this.identifier = undefined;
     this.label = undefined;
-    this.triggerTag = "h3";
+    this.annotation = undefined;
+    this.triggerTag = 'h3';
     this.h = govHost(this.host);
-    this.triggerId = createID("GovStepperItem");
-    this.contentId = createID("GovStepperContent");
+    this.triggerId = createID('GovStepperItem');
+    this.contentId = createID('GovStepperContent');
   }
   validateLabel(newValue) {
     if (!newValue) {
@@ -22,7 +25,7 @@ export class GovStepperItem {
     }
   }
   validateTriggerTag(newValue) {
-    const validTags = ["h1", "h2", "h3", "h4", "h5", "h6", "span"];
+    const validTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span'];
     if (newValue) {
       if (!validTags.includes(newValue)) {
         govErrorLog(`[${StepperItemClass.root}]: Tag ${newValue} is not allowed.`);
@@ -42,8 +45,8 @@ export class GovStepperItem {
     const contentId = this.contentId;
     const { label } = this;
     const TriggerTag = this.triggerTag;
-    return (h(Host, { class: StepperItemClass.root, variant: this.variant }, h("div", { id: triggerId, class: StepperItemClass.header, role: "listitem" }, h(TriggerTag, { class: StepperItemClass.title }, this.h.hasSlot("prefix") &&
-      h("span", { class: StepperItemClass.prefix }, h("slot", { name: "prefix" })), h("span", { class: StepperItemClass.label }, label))), this.h.hasSlot('content') && (h("div", { class: StepperItemClass.content, id: contentId, "aria-labelledby": triggerId, role: "tabpanel" }, h("slot", { name: "content" })))));
+    return (h(Host, { class: prepareClasses([StepperItemClass.root, this.annotation && StepperItemClass.rootWithAnnot]), variant: this.variant }, h("div", { id: triggerId, class: StepperItemClass.header, role: "listitem" }, h(TriggerTag, { class: StepperItemClass.title }, this.h.hasSlot('prefix') && (h("span", { class: StepperItemClass.prefix }, h("slot", { name: "prefix" }))), h("span", { class: StepperItemClass.name }, h("span", { class: StepperItemClass.label }, label), this.annotation &&
+      h("span", { class: StepperItemClass.annot }, this.annotation)))), this.h.hasSlot('content') && (h("div", { class: StepperItemClass.content, id: contentId, "aria-labelledby": triggerId, role: "tabpanel" }, h("slot", { name: "content" })))));
   }
   /**
    * Returns the current state of the component
@@ -87,6 +90,29 @@ export class GovStepperItem {
         "reflect": false,
         "defaultValue": "Variants.PRIMARY"
       },
+      "size": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "SizesType",
+          "resolved": "any",
+          "references": {
+            "SizesType": {
+              "location": "import",
+              "path": "./constants"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Size of stepper"
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "Sizes._M"
+      },
       "identifier": {
         "type": "string",
         "mutable": false,
@@ -121,6 +147,23 @@ export class GovStepperItem {
         "attribute": "label",
         "reflect": false
       },
+      "annotation": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Item annotation of the stepper"
+        },
+        "attribute": "annotation",
+        "reflect": false
+      },
       "triggerTag": {
         "type": "string",
         "mutable": false,
@@ -137,7 +180,7 @@ export class GovStepperItem {
         },
         "attribute": "trigger-tag",
         "reflect": false,
-        "defaultValue": "\"h3\""
+        "defaultValue": "'h3'"
       }
     };
   }

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

@@ -1 +1 @@
-{"version":3,"file":"gov-stepper-item.js","sourceRoot":"","sources":["../../../../../../src/components/gov-stepper/gov-stepper-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAA;AAC5G,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAA;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAC3D,OAAO,EAAE,gBAAgB,EAAe,MAAM,aAAa,CAAA;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AACnD,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAEpD,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AAQxD,MAAM,OAAO,cAAc;EAK1B;;mBAYwC,QAAQ,CAAC,OAAO;;;sBAYU,IAAI;IAvBrE,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAC3B,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,gBAAgB,CAAC,CAAA;IAC3C,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,mBAAmB,CAAC,CAAA;GAC9C;EA4BD,aAAa,CAAC,QAAgB;IAC7B,IAAI,CAAC,QAAQ,EAAE;MACd,WAAW,CAAC,IAAI,gBAAgB,CAAC,IAAI,iCAAiC,CAAC,CAAA;KACvE;EACF,CAAC;EAGD,kBAAkB,CAAC,QAAgB;IAClC,MAAM,SAAS,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,CAAA;IAC9D,IAAI,QAAQ,EAAE;MACb,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;QAClC,WAAW,CAAC,IAAI,gBAAgB,CAAC,IAAI,UAAU,QAAQ,kBAAkB,CAAC,CAAA;OAC1E;KACD;EACF,CAAC;EAGD,eAAe,CAAC,QAAgB;IAC/B,YAAY,CAAC,QAAQ,EAAE,QAAQ,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAA;EACxD,CAAC;EAED,iBAAiB;IAChB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;IAC9B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;IAClC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;EACzC,CAAC;EAED,MAAM;IACL,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,SAAS,CAAA;IACnD,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAA;IAChC,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAA;IACtB,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAA;IAElC,OAAO,CAEN,EAAC,IAAI,IAAC,KAAK,EAAE,gBAAgB,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO;MACxD,WACC,EAAE,EAAE,SAAS,EACb,KAAK,EAAE,gBAAgB,CAAC,MAAM,EAC9B,IAAI,EAAC,UAAU;QACf,EAAC,UAAU,IAAC,KAAK,EAAE,gBAAgB,CAAC,KAAK;UACvC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC;YACxB,YAAM,KAAK,EAAE,gBAAgB,CAAC,MAAM;cACnC,YAAM,IAAI,EAAC,QAAQ,GAAG,CAChB;UAER,YAAM,KAAK,EAAE,gBAAgB,CAAC,KAAK,IACjC,KAAK,CACA,CACK,CACR;MAEL,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAC7B,WACC,KAAK,EAAE,gBAAgB,CAAC,OAAO,EAC/B,EAAE,EAAE,SAAS,qBACI,SAAS,EAC1B,IAAI,EAAC,UAAU;QACf,YAAM,IAAI,EAAC,SAAS,GAAG,CAClB,CACN,CAEK,CACP,CAAA;EACF,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,YAAY;IACjB,OAAO,IAAI,CAAC,eAAe,CAAA;EAC5B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAED","sourcesContent":["import { Component, Element, h, Prop, State, Watch, Host, Method, Event, EventEmitter } from \"@stencil/core\"\nimport { govErrorLog } from \"../../helpers/Log/gov.log\"\nimport { validateProp } from \"../../helpers/Validate/props\"\nimport { StepperItemClass, VariantType } from \"./constants\"\nimport { createID } from \"../../utils/string.utils\"\nimport { govHost } from \"../../helpers/Dom/template\"\nimport { GovStepperItemChangeEvent } from \"./gov-stepper-item.d\"\nimport { Variants } from \"../../core/constants/variants\"\nimport { GovHost } from \"../../helpers/Dom/template.d\"\n\n\n@Component({\n\ttag: \"gov-stepper-item\",\n\tstyleUrl: \"gov-stepper-item.scss\",\n})\nexport class GovStepperItem {\n\tprivate h: GovHost\n\tprivate readonly triggerId: string\n\tprivate readonly contentId: string\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.triggerId = createID(\"GovStepperItem\")\n\t\tthis.contentId = createID(\"GovStepperContent\")\n\t}\n\n\t@Element() readonly host: HTMLGovStepperItemElement\n\t@State() isExpandedState: boolean\n\n\t/**\n\t * Style variation of the button.\n\t */\n\t@Prop() readonly variant: VariantType = Variants.PRIMARY\n\t/**\n\t * Custom stepper item identifier. Otherwise, it will be generated\n\t */\n\t@Prop() readonly identifier: string\n\t/**\n\t * Item name of the stepper\n\t */\n\t@Prop() readonly label: string\n\t/**\n\t * Used to change the HMTL tag in the stepper trigger for correct semantic structure\n\t */\n\t@Prop({ attribute: \"trigger-tag\" }) readonly triggerTag: string = \"h3\"\n\n\t/**\n\t * Called when the accordion state changes\n\t */\n\t@Event({ eventName: \"gov-change\" }) govChange: EventEmitter<GovStepperItemChangeEvent>\n\n\t@Watch(\"label\")\n\tvalidateLabel(newValue: string): void {\n\t\tif (!newValue) {\n\t\t\tgovErrorLog(`[${StepperItemClass.root}]: Parameter label is required.`)\n\t\t}\n\t}\n\n\t@Watch(\"triggerTag\")\n\tvalidateTriggerTag(newValue: string): void {\n\t\tconst validTags = [\"h1\", \"h2\", \"h3\", \"h4\", \"h5\", \"h6\", \"span\"]\n\t\tif (newValue) {\n\t\t\tif (!validTags.includes(newValue)) {\n\t\t\t\tgovErrorLog(`[${StepperItemClass.root}]: Tag ${newValue} is not allowed.`)\n\t\t\t}\n\t\t}\n\t}\n\n\t@Watch(\"variant\")\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(Variants, newValue, StepperItemClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateLabel(this.label)\n\t\tthis.validateVariant(this.variant)\n\t\tthis.validateTriggerTag(this.triggerTag)\n\t}\n\n\trender() {\n\t\tconst triggerId = this.identifier || this.triggerId\n\t\tconst contentId = this.contentId\n\t\tconst { label } = this\n\t\tconst TriggerTag = this.triggerTag\n\n\t\treturn (\n\t\t\t\n\t\t\t<Host class={StepperItemClass.root} variant={this.variant}>\n\t\t\t\t<div\n\t\t\t\t\tid={triggerId}\n\t\t\t\t\tclass={StepperItemClass.header}\n\t\t\t\t\trole=\"listitem\">\n\t\t\t\t\t<TriggerTag class={StepperItemClass.title}>\n\t\t\t\t\t\t{this.h.hasSlot(\"prefix\") && \n\t\t\t\t\t\t\t<span class={StepperItemClass.prefix}>\n\t\t\t\t\t\t\t\t<slot name=\"prefix\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t<span class={StepperItemClass.label}>\n\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</TriggerTag>\n\t\t\t\t</div>\n\n\t\t\t\t{this.h.hasSlot('content') && (\n\t\t\t\t\t<div \n\t\t\t\t\t\tclass={StepperItemClass.content} \n\t\t\t\t\t\tid={contentId} \n\t\t\t\t\t\taria-labelledby={triggerId} \n\t\t\t\t\t\trole=\"tabpanel\">\n\t\t\t\t\t\t<slot name=\"content\" />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\n\t\t\t</Host>\n\t\t)\n\t}\n\n\t/**\n\t * Returns the current state of the component\n\t */\n\t@Method()\n\tasync currentState(): Promise<boolean> {\n\t\treturn this.isExpandedState\n\t}\n\n}\n"]}
+{"version":3,"file":"gov-stepper-item.js","sourceRoot":"","sources":["../../../../../../src/components/gov-stepper/gov-stepper-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAA;AAC5G,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAA;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAC3D,OAAO,EAAa,gBAAgB,EAAe,MAAM,aAAa,CAAA;AACtE,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AACnD,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAA;AAEpE,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AAExD,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAA;AAMlD,MAAM,OAAO,cAAc;EAK1B;;mBAYwC,QAAQ,CAAC,OAAO;gBAIrB,KAAK,CAAC,EAAE;;;;sBAgBuB,IAAI;IA/BrE,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAC3B,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,gBAAgB,CAAC,CAAA;IAC3C,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,mBAAmB,CAAC,CAAA;GAC9C;EAmCD,aAAa,CAAC,QAAgB;IAC7B,IAAI,CAAC,QAAQ,EAAE;MACd,WAAW,CAAC,IAAI,gBAAgB,CAAC,IAAI,iCAAiC,CAAC,CAAA;KACvE;EACF,CAAC;EAGD,kBAAkB,CAAC,QAAgB;IAClC,MAAM,SAAS,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,CAAA;IAC9D,IAAI,QAAQ,EAAE;MACb,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;QAClC,WAAW,CAAC,IAAI,gBAAgB,CAAC,IAAI,UAAU,QAAQ,kBAAkB,CAAC,CAAA;OAC1E;KACD;EACF,CAAC;EAGD,eAAe,CAAC,QAAgB;IAC/B,YAAY,CAAC,QAAQ,EAAE,QAAQ,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAA;EACxD,CAAC;EAED,iBAAiB;IAChB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;IAC9B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;IAClC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;EACzC,CAAC;EAED,MAAM;IACL,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,SAAS,CAAA;IACnD,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAA;IAChC,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAA;IACtB,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAA;IAElC,OAAO,CACN,EAAC,IAAI,IAAC,KAAK,EAAE,cAAc,CAAC,CAAC,gBAAgB,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,IAAI,gBAAgB,CAAC,aAAa,CAAC,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO;MAC7H,WAAK,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,gBAAgB,CAAC,MAAM,EAAE,IAAI,EAAC,UAAU;QAClE,EAAC,UAAU,IAAC,KAAK,EAAE,gBAAgB,CAAC,KAAK;UACvC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAC5B,YAAM,KAAK,EAAE,gBAAgB,CAAC,MAAM;YACnC,YAAM,IAAI,EAAC,QAAQ,GAAG,CAChB,CACP;UACD,YAAM,KAAK,EAAE,gBAAgB,CAAC,IAAI;YACjC,YAAM,KAAK,EAAE,gBAAgB,CAAC,KAAK,IAAG,KAAK,CAAQ;YAClD,IAAI,CAAC,UAAU;cACf,YAAM,KAAK,EAAE,gBAAgB,CAAC,KAAK,IAAG,IAAI,CAAC,UAAU,CAAQ,CAExD,CACK,CACR;MAEL,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAC7B,WAAK,KAAK,EAAE,gBAAgB,CAAC,OAAO,EAAE,EAAE,EAAE,SAAS,qBAAmB,SAAS,EAAE,IAAI,EAAC,UAAU;QAC/F,YAAM,IAAI,EAAC,SAAS,GAAG,CAClB,CACN,CACK,CACP,CAAA;EACF,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,YAAY;IACjB,OAAO,IAAI,CAAC,eAAe,CAAA;EAC5B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, h, Prop, State, Watch, Host, Method, Event, EventEmitter } from '@stencil/core'\nimport { govErrorLog } from '../../helpers/Log/gov.log'\nimport { validateProp } from '../../helpers/Validate/props'\nimport { SizesType, StepperItemClass, VariantType } from \"./constants\"\nimport { createID } from '../../utils/string.utils'\nimport { govHost, prepareClasses } from '../../helpers/Dom/template'\nimport { GovStepperItemChangeEvent } from './gov-stepper-item.d'\nimport { Variants } from '../../core/constants/variants'\nimport { GovHost } from '../../helpers/Dom/template.d'\nimport { Sizes } from \"../../core/constants/sizes\"\n\n@Component({\n\ttag: 'gov-stepper-item',\n\tstyleUrl: 'gov-stepper-item.scss',\n})\nexport class GovStepperItem {\n\tprivate h: GovHost\n\tprivate readonly triggerId: string\n\tprivate readonly contentId: string\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.triggerId = createID('GovStepperItem')\n\t\tthis.contentId = createID('GovStepperContent')\n\t}\n\n\t@Element() readonly host: HTMLGovStepperItemElement\n\t@State() isExpandedState: boolean\n\n\t/**\n\t * Style variation of the button.\n\t */\n\t@Prop() readonly variant: VariantType = Variants.PRIMARY\n\t/**\n\t * Size of stepper\n\t */\n\t@Prop() readonly size: SizesType = Sizes._M\n\t/**\n\t * Custom stepper item identifier. Otherwise, it will be generated\n\t */\n\t@Prop() readonly identifier: string\n\t/**\n\t * Item name of the stepper\n\t */\n\t@Prop() readonly label: string\n\t/**\n\t * Item annotation of the stepper\n\t */\n\t@Prop() readonly annotation: string\n\t/**\n\t * Used to change the HMTL tag in the stepper trigger for correct semantic structure\n\t */\n\t@Prop({ attribute: 'trigger-tag' }) readonly triggerTag: string = 'h3'\n\t/**\n\t * Called when the accordion state changes\n\t */\n\t@Event({ eventName: 'gov-change' }) govChange: EventEmitter<GovStepperItemChangeEvent>\n\n\t@Watch('label')\n\tvalidateLabel(newValue: string): void {\n\t\tif (!newValue) {\n\t\t\tgovErrorLog(`[${StepperItemClass.root}]: Parameter label is required.`)\n\t\t}\n\t}\n\n\t@Watch('triggerTag')\n\tvalidateTriggerTag(newValue: string): void {\n\t\tconst validTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span']\n\t\tif (newValue) {\n\t\t\tif (!validTags.includes(newValue)) {\n\t\t\t\tgovErrorLog(`[${StepperItemClass.root}]: Tag ${newValue} is not allowed.`)\n\t\t\t}\n\t\t}\n\t}\n\n\t@Watch('variant')\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(Variants, newValue, StepperItemClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateLabel(this.label)\n\t\tthis.validateVariant(this.variant)\n\t\tthis.validateTriggerTag(this.triggerTag)\n\t}\n\n\trender() {\n\t\tconst triggerId = this.identifier || this.triggerId\n\t\tconst contentId = this.contentId\n\t\tconst { label } = this\n\t\tconst TriggerTag = this.triggerTag\n\n\t\treturn (\n\t\t\t<Host class={prepareClasses([StepperItemClass.root, this.annotation && StepperItemClass.rootWithAnnot])} variant={this.variant}>\n\t\t\t\t<div id={triggerId} class={StepperItemClass.header} role=\"listitem\">\n\t\t\t\t\t<TriggerTag class={StepperItemClass.title}>\n\t\t\t\t\t\t{this.h.hasSlot('prefix') && (\n\t\t\t\t\t\t\t<span class={StepperItemClass.prefix}>\n\t\t\t\t\t\t\t\t<slot name=\"prefix\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<span class={StepperItemClass.name}>\n\t\t\t\t\t\t\t<span class={StepperItemClass.label}>{label}</span>\n\t\t\t\t\t\t\t{this.annotation &&\n\t\t\t\t\t\t\t\t<span class={StepperItemClass.annot}>{this.annotation}</span>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</TriggerTag>\n\t\t\t\t</div>\n\n\t\t\t\t{this.h.hasSlot('content') && (\n\t\t\t\t\t<div class={StepperItemClass.content} id={contentId} aria-labelledby={triggerId} role=\"tabpanel\">\n\t\t\t\t\t\t<slot name=\"content\" />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t)\n\t}\n\n\t/**\n\t * Returns the current state of the component\n\t */\n\t@Method()\n\tasync currentState(): Promise<boolean> {\n\t\treturn this.isExpandedState\n\t}\n}\n"]}