@gov-design-system-ce/components 0.0.5 → 0.0.7

package/dist/cjs/gov-side-nav.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"gov-side-nav.entry.cjs.js","mappings":";;;;;;;;;;;;;AAAA,MAAM,aAAa,GAAG,gPAAgP;;MCazP,UAAU;;;;mBAMc,KAAK;mBAIL,KAAK;;;;EAczC,gBAAgB;IACf,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAACA,0BAAgB,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,KAAgC;MAC1F,KAAK,CAAC,YAAY,CAAC,SAAS,EAAEC,sBAAa,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAA;MAC1D,KAAK,CAAC,YAAY,CAAC,SAAS,EAAEA,sBAAa,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAA;MAC1D,KAAK,CAAC,gBAAgB,CAAC,YAAY,EAAE,CAAC,CAAuD;QAC5F,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAA;OAC7B,CAAC,CAAA;KACF,CAAC,CAAA;GACF;EAED,MAAM,kBAAkB;IACvB,IAAIC,2BAAuB,EAAE,EAAE;MAC9B,MAAMC,WAAK,CAAC,GAAG,CAAC,CAAA;MAChB,MAAM,IAAI,CAAC,YAAY,EAAE,CAAA;KACzB;GACD;EAED,MAAM;IACL,QACCC,QAACC,UAAI,IACJ,KAAK,EAAEC,sBAAY,CAAC,IAAI,EACxB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,iBACR,IAAI,CAAC,SAAS,sBACT,IAAI,CAAC,cAAc,IAErCF,mBAAO,KAAK,EAAEE,sBAAY,CAAC,KAAK,EAAE,IAAI,EAAE,MAAM,IAC7CF,qBAAQ,CACD,CACF,EACP;GACD;;;;EAMD,MAAM,YAAY;IACjBG,sBAAiB,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,cAAc,EAAED,sBAAY,CAAC,IAAI,CAAC,CAAA;GACzE;;;;;;;","names":["SideNavItemClass","booleanString","canValidateWcagOnRender","delay","h","Host","SideNavClass","validateWcagLabel"],"sources":["../../../packages/core/src/components/gov-side-nav/gov-side-nav.scss?tag=gov-side-nav","../../../packages/core/src/components/gov-side-nav/gov-side-nav.tsx"],"sourcesContent":["/*\n *   Side nav\n */\n\n$class: \".gov-side-nav\";\n\n#{$class} {\n\t@include base();\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core'\nimport { SideNavClass, SideNavItemClass } from './constants'\nimport { GovSideNavItemCustomEvent } from '../../components'\nimport { GovSideNavItemChangeEvent } from './gov-side-nav-item.d'\nimport { validateWcagLabel } from '../../helpers/Validate/wcag'\nimport { canValidateWcagOnRender } from '../../helpers/Dom/win'\nimport { delay } from '../../utils/utils'\nimport { booleanString } from '../../helpers/Dom/template'\n\n@Component({\n\ttag: 'gov-side-nav',\n\tstyleUrl: 'gov-side-nav.scss',\n})\nexport class GovSideNav {\n\t@Element() readonly host: HTMLGovSideNavElement\n\n\t/**\n\t * Determide if component should have inversed colors to be used on dark background.\n\t */\n\t@Prop() readonly inverse: boolean = false\n\t/**\n\t * Determide if component should have compact styles.\n\t */\n\t@Prop() readonly compact: boolean = false\n\t/**\n\t * Adds accessible label for the sidenav that is only shown for screen readers.\n\t */\n\t@Prop({ attribute: 'wcag-label' }) readonly wcagLabel: string\n\t/**\n\t * String of id's that indicate alternative labels elements\n\t */\n\t@Prop({ attribute: 'wcag-labelled-by' }) readonly wcagLabelledBy: string\n\t/**\n\t * Called when the sidenav state changes\n\t */\n\t@Event({ eventName: 'gov-change' }) govChange: EventEmitter<GovSideNavItemChangeEvent>\n\n\tcomponentDidLoad() {\n\t\tthis.host.querySelectorAll(SideNavItemClass.root).forEach((child: HTMLGovSideNavItemElement) => {\n\t\t\tchild.setAttribute('inverse', booleanString(this.inverse))\n\t\t\tchild.setAttribute('compact', booleanString(this.compact))\n\t\t\tchild.addEventListener('gov-change', (e: GovSideNavItemCustomEvent<GovSideNavItemChangeEvent>) => {\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\tasync componentDidRender() {\n\t\tif (canValidateWcagOnRender()) {\n\t\t\tawait delay(500)\n\t\t\tawait this.validateWcag()\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={SideNavClass.root}\n\t\t\t\tcompact={this.compact}\n\t\t\t\tinverse={this.inverse}\n\t\t\t\tarial-label={this.wcagLabel}\n\t\t\t\tarial-labelledby={this.wcagLabelledBy}\n\t\t\t>\n\t\t\t\t<aside class={SideNavClass.aside} role={'list'}>\n\t\t\t\t\t<slot />\n\t\t\t\t</aside>\n\t\t\t</Host>\n\t\t)\n\t}\n\n\t/**\n\t * Validate the WCAG attributes of the component\n\t */\n\t@Method()\n\tasync validateWcag(): Promise<void> {\n\t\tvalidateWcagLabel(this.wcagLabel, this.wcagLabelledBy, SideNavClass.root)\n\t}\n}\n"],"version":3}
+{"file":"gov-side-nav.entry.cjs.js","mappings":";;;;;;;;;;;;;AAAA,MAAM,aAAa,GAAG,gPAAgP;;MCazP,UAAU;;;;mBAMc,KAAK;mBAIL,KAAK;;;;EAczC,gBAAgB;IACf,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAACA,0BAAgB,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,KAAgC;MAC1F,KAAK,CAAC,YAAY,CAAC,SAAS,EAAEC,sBAAa,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAA;MAC1D,KAAK,CAAC,YAAY,CAAC,SAAS,EAAEA,sBAAa,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAA;MAC1D,KAAK,CAAC,gBAAgB,CAAC,YAAY,EAAE,CAAC,CAAuD;QAC5F,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAA;OAC7B,CAAC,CAAA;KACF,CAAC,CAAA;GACF;EAED,MAAM,kBAAkB;IACvB,IAAIC,2BAAuB,EAAE,EAAE;MAC9B,MAAMC,WAAK,CAAC,GAAG,CAAC,CAAA;MAChB,MAAM,IAAI,CAAC,YAAY,EAAE,CAAA;KACzB;GACD;EAED,MAAM;IACL,QACCC,QAACC,UAAI,IAAC,KAAK,EAAEC,sBAAY,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,iBAAe,IAAI,CAAC,SAAS,sBAAoB,IAAI,CAAC,cAAc,IAC/IF,mBAAO,KAAK,EAAEE,sBAAY,CAAC,KAAK,EAAE,IAAI,EAAE,MAAM,IAC7CF,qBAAQ,CACD,CACF,EACP;GACD;;;;EAMD,MAAM,YAAY;IACjBG,sBAAiB,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,cAAc,EAAED,sBAAY,CAAC,IAAI,CAAC,CAAA;GACzE;;;;;;;","names":["SideNavItemClass","booleanString","canValidateWcagOnRender","delay","h","Host","SideNavClass","validateWcagLabel"],"sources":["../../../packages/core/src/components/gov-side-nav/gov-side-nav.scss?tag=gov-side-nav","../../../packages/core/src/components/gov-side-nav/gov-side-nav.tsx"],"sourcesContent":["/*\n *   Side nav\n */\n\n$class: \".gov-side-nav\";\n\n#{$class} {\n\t@include base();\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core'\nimport { SideNavClass, SideNavItemClass } from './constants'\nimport { GovSideNavItemCustomEvent } from '../../components'\nimport { GovSideNavItemChangeEvent } from './gov-side-nav-item.d'\nimport { validateWcagLabel } from '../../helpers/Validate/wcag'\nimport { canValidateWcagOnRender } from '../../helpers/Dom/win'\nimport { delay } from '../../utils/utils'\nimport { booleanString } from '../../helpers/Dom/template'\n\n@Component({\n\ttag: 'gov-side-nav',\n\tstyleUrl: 'gov-side-nav.scss',\n})\nexport class GovSideNav {\n\t@Element() readonly host: HTMLGovSideNavElement\n\n\t/**\n\t * Determide if component should have inversed colors to be used on dark background.\n\t */\n\t@Prop() readonly inverse: boolean = false\n\t/**\n\t * Determide if component should have compact styles.\n\t */\n\t@Prop() readonly compact: boolean = false\n\t/**\n\t * Adds accessible label for the sidenav that is only shown for screen readers.\n\t */\n\t@Prop({ attribute: 'wcag-label' }) readonly wcagLabel: string\n\t/**\n\t * String of id's that indicate alternative labels elements\n\t */\n\t@Prop({ attribute: 'wcag-labelled-by' }) readonly wcagLabelledBy: string\n\t/**\n\t * Called when the sidenav state changes\n\t */\n\t@Event({ eventName: 'gov-change' }) govChange: EventEmitter<GovSideNavItemChangeEvent>\n\n\tcomponentDidLoad() {\n\t\tthis.host.querySelectorAll(SideNavItemClass.root).forEach((child: HTMLGovSideNavItemElement) => {\n\t\t\tchild.setAttribute('inverse', booleanString(this.inverse))\n\t\t\tchild.setAttribute('compact', booleanString(this.compact))\n\t\t\tchild.addEventListener('gov-change', (e: GovSideNavItemCustomEvent<GovSideNavItemChangeEvent>) => {\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\tasync componentDidRender() {\n\t\tif (canValidateWcagOnRender()) {\n\t\t\tawait delay(500)\n\t\t\tawait this.validateWcag()\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={SideNavClass.root} compact={this.compact} inverse={this.inverse} arial-label={this.wcagLabel} arial-labelledby={this.wcagLabelledBy}>\n\t\t\t\t<aside class={SideNavClass.aside} role={'list'}>\n\t\t\t\t\t<slot />\n\t\t\t\t</aside>\n\t\t\t</Host>\n\t\t)\n\t}\n\n\t/**\n\t * Validate the WCAG attributes of the component\n\t */\n\t@Method()\n\tasync validateWcag(): Promise<void> {\n\t\tvalidateWcagLabel(this.wcagLabel, this.wcagLabelledBy, SideNavClass.root)\n\t}\n}\n"],"version":3}

package/dist/cjs/gov-spacer.cjs.entry.js

@@ -3,23 +3,21 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-356717ae.js');
-const props = require('./props-cc21d3d7.js');
+const props = require('./props-5f82e4c0.js');
 const sizes = require('./sizes-79872c2a.js');
+const utils = require('./utils-c9b1bba3.js');
 const template = require('./template-e1c4ff78.js');
 require('./gov.log-0c9dca27.js');
 
-const BreakpointTable = {
-  none: '0em',
-  sm: '30em',
-  md: '48em',
-  lg: '64em',
-  xl: '75em',
-};
-const BreakpointNames = Object.keys(BreakpointTable);
-
-BreakpointNames.push(undefined);
-const SpacerSize = [undefined, sizes.Sizes._2XS, sizes.Sizes._XS, sizes.Sizes._S, sizes.Sizes._M, sizes.Sizes._L, sizes.Sizes._XL, sizes.Sizes._2XL, sizes.Sizes._3XL, sizes.Sizes._5XL];
-const SpacerBreakpoints = BreakpointNames;
+const SpacerSize = utils.pick(sizes.Sizes, ['_2XS', '_XS', '_S', '_M', '_L', '_XL', '_2XL', '_3XL', '_5XL']);
+var SpacerBreakpoints;
+(function (SpacerBreakpoints) {
+  SpacerBreakpoints["NONE"] = "none";
+  SpacerBreakpoints["SM"] = "sm";
+  SpacerBreakpoints["MD"] = "md";
+  SpacerBreakpoints["LG"] = "lg";
+  SpacerBreakpoints["XL"] = "xl";
+})(SpacerBreakpoints || (SpacerBreakpoints = {}));
 const SpacerClass = {
   root: 'gov-spacer',
 };
@@ -30,7 +28,7 @@ const GovSpacer = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.size = undefined;
-    this.breakpoint = undefined;
+    this.breakpoint = SpacerBreakpoints.NONE;
     this.h = template.govHost(this.host);
   }
   validateSize(newValue) {

package/dist/cjs/gov-spacer.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"gov-spacer.entry.cjs.js","mappings":";;;;;;;;;;AAAO,MAAM,eAAe,GAAG;EAC9B,IAAI,EAAE,KAAK;EACX,EAAE,EAAE,MAAM;EACV,EAAE,EAAE,MAAM;EACV,EAAE,EAAE,MAAM;EACV,EAAE,EAAE,MAAM;CACV,CAAA;AAEM,MAAM,eAAe,GAAG,MAAM,CAAC,IAAI,CAAC,eAAe,CAAC;;ACL3D,eAAe,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;AAExB,MAAM,UAAU,GAAG,CAAC,SAAS,EAAEA,WAAK,CAAC,IAAI,EAAEA,WAAK,CAAC,GAAG,EAAEA,WAAK,CAAC,EAAE,EAAEA,WAAK,CAAC,EAAE,EAAEA,WAAK,CAAC,EAAE,EAAEA,WAAK,CAAC,GAAG,EAAEA,WAAK,CAAC,IAAI,EAAEA,WAAK,CAAC,IAAI,EAAEA,WAAK,CAAC,IAAI,CAAU,CAAA;AAG3I,MAAM,iBAAiB,GAAG,eAAe,CAAA;AAGzC,MAAM,WAAW,GAAG;EAC1B,IAAI,EAAE,YAAY;CAClB;;ACbD,MAAM,YAAY,GAAG,+iCAA+iC;;MCUvjC,SAAS;EAErB;;gBAOwC,SAAS;sBAII,SAAS;IAV7D,IAAI,CAAC,CAAC,GAAGC,gBAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EAYD,YAAY,CAAC,QAAgB;IAC5BC,kBAAY,CAAC,UAAU,EAAE,QAAQ,EAAE,WAAW,CAAC,IAAI,CAAC,CAAA;GACpD;EAGD,kBAAkB,CAAC,QAAgB;IAClCA,kBAAY,CAAC,iBAAiB,EAAE,QAAQ,EAAE,WAAW,CAAC,IAAI,CAAC,CAAA;GAC3D;EAED,iBAAiB;IAChB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAC5B,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;GACxC;EAED,MAAM;IACL,OAAOC,QAACC,UAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,UAAU,EAAE,IAAI,CAAC,UAAU,GAAS,CAAA;GAC3G;;;;;;;;;;;","names":["Sizes","govHost","validateProp","h","Host"],"sources":["../../../packages/core/src/core/constants/breakpoint.ts","../../../packages/core/src/components/gov-spacer/constants.tsx","../../../packages/core/src/components/gov-spacer/gov-spacer.scss?tag=gov-spacer","../../../packages/core/src/components/gov-spacer/gov-spacer.tsx"],"sourcesContent":["export const BreakpointTable = {\n\tnone: '0em',\n\tsm: '30em',\n\tmd: '48em',\n\tlg: '64em',\n\txl: '75em',\n}\n\nexport const BreakpointNames = Object.keys(BreakpointTable)\n","import { BreakpointNames } from '../../core/constants/breakpoint'\nimport { Sizes } from '../../core/constants/sizes'\n\nBreakpointNames.push(undefined)\n\nexport const SpacerSize = [undefined, Sizes._2XS, Sizes._XS, Sizes._S, Sizes._M, Sizes._L, Sizes._XL, Sizes._2XL, Sizes._3XL, Sizes._5XL] as const\nexport type SpacerSizeType = (typeof SpacerSize)[number]\n\nexport const SpacerBreakpoints = BreakpointNames\nexport type SpacerBreakpointsType = (typeof SpacerBreakpoints)[number]\n\nexport const SpacerClass = {\n\troot: 'gov-spacer',\n}\n","/*\n *   Spacer\n */\n\n$class: \".gov-spacer\";\n\n#{$class} {\n\t@include base();\n\n\t// VARIANTS\n\t@each $name, $value in $sizes {\n\t\t&[size=\"#{$name}\"] {\n\t\t\theight: #{$value};\n\t\t}\n\t}\n\t@each $name, $value in $mq-breakpoints {\n\t\t&[breakpoint=\"#{$name}\"] {\n\t\t\tdisplay: none;\n\n\t\t\t@if #{$value} != \"0\" {\n\t\t\t\t@include mq($from: #{$name}) {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n","import { Component, Element, h, Host, Prop, Watch } from \"@stencil/core\"\nimport { validateProp } from '../../helpers/Validate/props'\nimport { SpacerBreakpoints, SpacerBreakpointsType, SpacerClass, SpacerSize, SpacerSizeType } from './constants'\nimport { GovHost } from \"../../helpers/Dom/template.d\"\nimport { govHost } from \"../../helpers/Dom/template\"\n\n@Component({\n\ttag: 'gov-spacer',\n\tstyleUrl: 'gov-spacer.scss',\n})\nexport class GovSpacer {\n\tprivate h: GovHost\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\t@Element() host: HTMLGovSpacerElement\n\t/**\n\t * Spacer’s size\n\t */\n\t@Prop() readonly size: SpacerSizeType = undefined\n\t/**\n\t * Breakpoint\n\t */\n\t@Prop() readonly breakpoint: SpacerBreakpointsType = undefined\n\n\t@Watch('size')\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(SpacerSize, newValue, SpacerClass.root)\n\t}\n\n\t@Watch('breakpoint')\n\tvalidateBreakpoint(newValue: string): void {\n\t\tvalidateProp(SpacerBreakpoints, newValue, SpacerClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateSize(this.size)\n\t\tthis.validateBreakpoint(this.breakpoint)\n\t}\n\n\trender() {\n\t\treturn <Host class={this.h.classes(SpacerClass.root)} size={this.size} breakpoint={this.breakpoint}></Host>\n\t}\n}\n"],"version":3}
+{"file":"gov-spacer.entry.cjs.js","mappings":";;;;;;;;;;;AAIO,MAAM,UAAU,GAAGA,UAAI,CAACC,WAAK,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA;AAGvG,IAAY,iBAMX;AAND,WAAY,iBAAiB;EAC5B,kCAAa,CAAA;EACb,8BAAS,CAAA;EACT,8BAAS,CAAA;EACT,8BAAS,CAAA;EACT,8BAAS,CAAA;AACV,CAAC,EANW,iBAAiB,KAAjB,iBAAiB,QAM5B;AAGM,MAAM,WAAW,GAAG;EAC1B,IAAI,EAAE,YAAY;CAClB;;AClBD,MAAM,YAAY,GAAG,+iCAA+iC;;MCUvjC,SAAS;EAErB;;;sBAWsD,iBAAiB,CAAC,IAAI;IAV3E,IAAI,CAAC,CAAC,GAAGC,gBAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EAYD,YAAY,CAAC,QAAgB;IAC5BC,kBAAY,CAAC,UAAU,EAAE,QAAQ,EAAE,WAAW,CAAC,IAAI,CAAC,CAAA;GACpD;EAGD,kBAAkB,CAAC,QAAgB;IAClCA,kBAAY,CAAC,iBAAiB,EAAE,QAAQ,EAAE,WAAW,CAAC,IAAI,CAAC,CAAA;GAC3D;EAED,iBAAiB;IAChB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAC5B,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;GACxC;EAED,MAAM;IACL,OAAOC,QAACC,UAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,UAAU,EAAE,IAAI,CAAC,UAAU,GAAS,CAAA;GAC3G;;;;;;;;;;;","names":["pick","Sizes","govHost","validateProp","h","Host"],"sources":["../../../packages/core/src/components/gov-spacer/constants.tsx","../../../packages/core/src/components/gov-spacer/gov-spacer.scss?tag=gov-spacer","../../../packages/core/src/components/gov-spacer/gov-spacer.tsx"],"sourcesContent":["import { Sizes } from '../../core/constants/sizes'\nimport { pick } from '../../utils/utils'\nimport { ValueOf } from '../../types/interfaces'\n\nexport const SpacerSize = pick(Sizes, ['_2XS', '_XS', '_S', '_M', '_L', '_XL', '_2XL', '_3XL', '_5XL'])\nexport type SpacerSizeType = `${ValueOf<typeof SpacerSize>}`\n\nexport enum SpacerBreakpoints {\n\tNONE = 'none',\n\tSM = 'sm',\n\tMD = 'md',\n\tLG = 'lg',\n\tXL = 'xl',\n}\nexport type SpacerBreakpointsType = `${ValueOf<typeof SpacerBreakpoints>}`\n\nexport const SpacerClass = {\n\troot: 'gov-spacer',\n}\n","/*\n *   Spacer\n */\n\n$class: \".gov-spacer\";\n\n#{$class} {\n\t@include base();\n\n\t// VARIANTS\n\t@each $name, $value in $sizes {\n\t\t&[size=\"#{$name}\"] {\n\t\t\theight: #{$value};\n\t\t}\n\t}\n\t@each $name, $value in $mq-breakpoints {\n\t\t&[breakpoint=\"#{$name}\"] {\n\t\t\tdisplay: none;\n\n\t\t\t@if #{$value} != \"0\" {\n\t\t\t\t@include mq($from: #{$name}) {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n","import { Component, Element, h, Host, Prop, Watch } from '@stencil/core'\nimport { validateProp } from '../../helpers/Validate/props'\nimport { SpacerBreakpoints, SpacerBreakpointsType, SpacerClass, SpacerSize, SpacerSizeType } from './constants'\nimport { GovHost } from '../../helpers/Dom/template.types'\nimport { govHost } from '../../helpers/Dom/template'\n\n@Component({\n\ttag: 'gov-spacer',\n\tstyleUrl: 'gov-spacer.scss',\n})\nexport class GovSpacer {\n\tprivate h: GovHost\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\t@Element() host: HTMLGovSpacerElement\n\t/**\n\t * Spacer’s size\n\t */\n\t@Prop() readonly size?: SpacerSizeType\n\t/**\n\t * Breakpoint\n\t */\n\t@Prop() readonly breakpoint?: SpacerBreakpointsType = SpacerBreakpoints.NONE\n\n\t@Watch('size')\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(SpacerSize, newValue, SpacerClass.root)\n\t}\n\n\t@Watch('breakpoint')\n\tvalidateBreakpoint(newValue: string): void {\n\t\tvalidateProp(SpacerBreakpoints, newValue, SpacerClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateSize(this.size)\n\t\tthis.validateBreakpoint(this.breakpoint)\n\t}\n\n\trender() {\n\t\treturn <Host class={this.h.classes(SpacerClass.root)} size={this.size} breakpoint={this.breakpoint}></Host>\n\t}\n}\n"],"version":3}

package/dist/cjs/gov-statsbar-item.cjs.entry.js

@@ -4,9 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-356717ae.js');
 const template = require('./template-e1c4ff78.js');
-const props = require('./props-cc21d3d7.js');
-const constants = require('./constants-404ee283.js');
+const props = require('./props-5f82e4c0.js');
+const constants = require('./constants-61f8be34.js');
 require('./gov.log-0c9dca27.js');
+require('./utils-c9b1bba3.js');
+require('./variants-f5ffeef3.js');
 
 const govStatsbarItemCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}@keyframes countdown{to{transform:scaleX(0)}}.gov-statsbar-item{position:relative;display:block;padding:1.25rem}.gov-statsbar-item__icon,.gov-statsbar-item__number{margin-bottom:1rem}.gov-statsbar-item__icon{display:block;width:2rem;height:2rem}.gov-statsbar-item__number{font-weight:var(--gov-text-5xl-font-weight);font-size:var(--gov-text-5xl-font-size);line-height:var(--gov-text-5xl-line-height);letter-spacing:var(--gov-text-5xl-letter-spacing)}.gov-statsbar-item__text{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);letter-spacing:0.0125em}.gov-statsbar-item__text>*:last-child{margin-bottom:0}.gov-statsbar-item[icon-position=left]{padding-left:3rem}.gov-statsbar-item[icon-position=left] .gov-statsbar-item__icon{position:absolute;top:1.5rem;left:0}@media (min-width: 30em){.gov-statsbar-item{flex:1 0 50%;max-width:50%}}@media (min-width: 48em){.gov-statsbar-item{padding:2.5rem}.gov-statsbar-item__icon{width:3rem;height:3rem}.gov-statsbar-item[icon-position=left]{padding-left:4rem}.gov-statsbar-item[icon-position=left] .gov-statsbar-item__icon{top:2.75rem}}@media (min-width: 64em){.gov-statsbar-item{flex-basis:auto;max-width:25%}}";
 

package/dist/cjs/gov-statsbar-item.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"gov-statsbar-item.entry.cjs.js","mappings":";;;;;;;;;;AAAA,MAAM,kBAAkB,GAAG,k4CAAk4C;;MCUh5C,eAAe;EAG3B;;wBAS2D,SAAS;IARnE,IAAI,CAAC,CAAC,GAAGA,gBAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EAUD,oBAAoB,CAAC,QAAgB;IACpCC,kBAAY,CAACC,8BAAoB,EAAE,QAAQ,EAAEC,2BAAiB,CAAC,IAAI,CAAC,CAAA;GACpE;EAED,iBAAiB;IAChB,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA;GAC5C;EAED,MAAM;IACL,QACCC,QAACC,UAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAACF,2BAAiB,CAAC,IAAI,CAAC,IAClDC,yBACE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,KACtBA,kBAAM,KAAK,EAAED,2BAAiB,CAAC,IAAI,IAClCC,kBAAM,IAAI,EAAC,MAAM,GAAG,CACd,CACP,EAEDA,eAAG,KAAK,EAAED,2BAAiB,CAAC,MAAM,IACjCC,qBAAQ,CACL,EAEH,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,KACtBA,iBAAK,KAAK,EAAED,2BAAiB,CAAC,IAAI,IACjCC,kBAAM,IAAI,EAAC,MAAM,GAAG,CACf,CACN,CACQ,CACJ,EACP;GACD;;;;;;;;;;","names":["govHost","validateProp","StatsBarIconPosition","StatsBarItemClass","h","Host"],"sources":["../../../packages/core/src/components/gov-statsbar/gov-statsbar-item.scss?tag=gov-statsbar-item","../../../packages/core/src/components/gov-statsbar/gov-statsbar-item.tsx"],"sourcesContent":["/*\n *   Statsbar - Item\n */\n\n$class: \".gov-statsbar-item\";\n\n#{$class} {\n\tposition: relative;\n\tdisplay: block;\n\tpadding: rem-calc(20);\n\t&__icon,\n\t&__number {\n\t\tmargin-bottom: rem-calc(16);\n\t}\n\t&__icon {\n\t\tdisplay: block;\n\t\twidth: rem-calc(32);\n\t\theight: rem-calc(32);\n\t}\n\t&__number {\n\t\t@include typography($font-size-5xl);\n\t}\n\t&__text {\n\t\t@include typography($font-size-xl);\n\t\t@include reset-last-margin();\n\t\tletter-spacing: em-calc(0.2);\n\t}\n\n\t// VARIANTS\n\t&[icon-position=\"left\"] {\n\t\tpadding-left: rem-calc(48);\n\n\t\t#{$class} {\n\t\t\t&__icon {\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: rem-calc(24);\n\t\t\t\tleft: 0;\n\t\t\t}\n\t\t}\n\t}\n\n\t// MQ\n\t@include mq($from: sm) {\n\t\tflex: 1 0 50%;\n\t\tmax-width: 50%;\n\t}\n\t@include mq($from: md) {\n\t\tpadding: rem-calc(40);\n\n\t\t&__icon {\n\t\t\twidth: rem-calc(48);\n\t\t\theight: rem-calc(48);\n\t\t}\n\n\t\t// VARIANTS\n\t\t&[icon-position=\"left\"] {\n\t\t\tpadding-left: rem-calc(64);\n\n\t\t\t#{$class} {\n\t\t\t\t&__icon {\n\t\t\t\t\ttop: rem-calc(44);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\t@include mq($from: lg) {\n\t\tflex-basis: auto;\n\t\tmax-width: 25%;\n\t}\n}\n","import { Component, Element, h, Host, Prop, Watch } from '@stencil/core'\nimport { govHost } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.d'\nimport { validateProp } from '../../helpers/Validate/props'\nimport { StatsBarItemClass, StatsBarIconPosition, StatsBarIconPositionType } from './constants'\n\n@Component({\n\ttag: 'gov-statsbar-item',\n\tstyleUrl: 'gov-statsbar-item.scss',\n})\nexport class GovStatsbarItem {\n\th: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovStatsbarItemElement\n\n\t/**\n\t * Icon’s position\n\t */\n\t@Prop() readonly iconPosition?: StatsBarIconPositionType = undefined\n\n\t@Watch('iconPosition')\n\tvalidateIconPosition(newValue: string): void {\n\t\tvalidateProp(StatsBarIconPosition, newValue, StatsBarItemClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateIconPosition(this.iconPosition)\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes(StatsBarItemClass.root)}>\n\t\t\t\t<article>\n\t\t\t\t\t{this.h.hasSlot('icon') && (\n\t\t\t\t\t\t<span class={StatsBarItemClass.icon}>\n\t\t\t\t\t\t\t<slot name=\"icon\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t)}\n\n\t\t\t\t\t<p class={StatsBarItemClass.number}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</p>\n\n\t\t\t\t\t{this.h.hasSlot('text') && (\n\t\t\t\t\t\t<div class={StatsBarItemClass.text}>\n\t\t\t\t\t\t\t<slot name=\"text\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</article>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}
+{"file":"gov-statsbar-item.entry.cjs.js","mappings":";;;;;;;;;;;;AAAA,MAAM,kBAAkB,GAAG,k4CAAk4C;;MCUh5C,eAAe;EAG3B;;wBAS2D,SAAS;IARnE,IAAI,CAAC,CAAC,GAAGA,gBAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EAUD,oBAAoB,CAAC,QAAgB;IACpCC,kBAAY,CAACC,8BAAoB,EAAE,QAAQ,EAAEC,2BAAiB,CAAC,IAAI,CAAC,CAAA;GACpE;EAED,iBAAiB;IAChB,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA;GAC5C;EAED,MAAM;IACL,QACCC,QAACC,UAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAACF,2BAAiB,CAAC,IAAI,CAAC,IAClDC,yBACE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,KACtBA,kBAAM,KAAK,EAAED,2BAAiB,CAAC,IAAI,IAClCC,kBAAM,IAAI,EAAC,MAAM,GAAG,CACd,CACP,EAEDA,eAAG,KAAK,EAAED,2BAAiB,CAAC,MAAM,IACjCC,qBAAQ,CACL,EAEH,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,KACtBA,iBAAK,KAAK,EAAED,2BAAiB,CAAC,IAAI,IACjCC,kBAAM,IAAI,EAAC,MAAM,GAAG,CACf,CACN,CACQ,CACJ,EACP;GACD;;;;;;;;;;","names":["govHost","validateProp","StatsBarIconPosition","StatsBarItemClass","h","Host"],"sources":["../../../packages/core/src/components/gov-statsbar/gov-statsbar-item.scss?tag=gov-statsbar-item","../../../packages/core/src/components/gov-statsbar/gov-statsbar-item.tsx"],"sourcesContent":["/*\n *   Statsbar - Item\n */\n\n$class: \".gov-statsbar-item\";\n\n#{$class} {\n\tposition: relative;\n\tdisplay: block;\n\tpadding: rem-calc(20);\n\t&__icon,\n\t&__number {\n\t\tmargin-bottom: rem-calc(16);\n\t}\n\t&__icon {\n\t\tdisplay: block;\n\t\twidth: rem-calc(32);\n\t\theight: rem-calc(32);\n\t}\n\t&__number {\n\t\t@include typography($font-size-5xl);\n\t}\n\t&__text {\n\t\t@include typography($font-size-xl);\n\t\t@include reset-last-margin();\n\t\tletter-spacing: em-calc(0.2);\n\t}\n\n\t// VARIANTS\n\t&[icon-position=\"left\"] {\n\t\tpadding-left: rem-calc(48);\n\n\t\t#{$class} {\n\t\t\t&__icon {\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: rem-calc(24);\n\t\t\t\tleft: 0;\n\t\t\t}\n\t\t}\n\t}\n\n\t// MQ\n\t@include mq($from: sm) {\n\t\tflex: 1 0 50%;\n\t\tmax-width: 50%;\n\t}\n\t@include mq($from: md) {\n\t\tpadding: rem-calc(40);\n\n\t\t&__icon {\n\t\t\twidth: rem-calc(48);\n\t\t\theight: rem-calc(48);\n\t\t}\n\n\t\t// VARIANTS\n\t\t&[icon-position=\"left\"] {\n\t\t\tpadding-left: rem-calc(64);\n\n\t\t\t#{$class} {\n\t\t\t\t&__icon {\n\t\t\t\t\ttop: rem-calc(44);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\t@include mq($from: lg) {\n\t\tflex-basis: auto;\n\t\tmax-width: 25%;\n\t}\n}\n","import { Component, Element, h, Host, Prop, Watch } from '@stencil/core'\nimport { govHost } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.types'\nimport { validateProp } from '../../helpers/Validate/props'\nimport { StatsBarItemClass, StatsBarIconPosition, StatsBarIconPositionType } from './constants'\n\n@Component({\n\ttag: 'gov-statsbar-item',\n\tstyleUrl: 'gov-statsbar-item.scss',\n})\nexport class GovStatsbarItem {\n\th: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovStatsbarItemElement\n\n\t/**\n\t * Icon’s position\n\t */\n\t@Prop() readonly iconPosition?: StatsBarIconPositionType = undefined\n\n\t@Watch('iconPosition')\n\tvalidateIconPosition(newValue: string): void {\n\t\tvalidateProp(StatsBarIconPosition, newValue, StatsBarItemClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateIconPosition(this.iconPosition)\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes(StatsBarItemClass.root)}>\n\t\t\t\t<article>\n\t\t\t\t\t{this.h.hasSlot('icon') && (\n\t\t\t\t\t\t<span class={StatsBarItemClass.icon}>\n\t\t\t\t\t\t\t<slot name=\"icon\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t)}\n\n\t\t\t\t\t<p class={StatsBarItemClass.number}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</p>\n\n\t\t\t\t\t{this.h.hasSlot('text') && (\n\t\t\t\t\t\t<div class={StatsBarItemClass.text}>\n\t\t\t\t\t\t\t<slot name=\"text\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</article>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}

package/dist/cjs/gov-statsbar.cjs.entry.js

@@ -3,11 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-356717ae.js');
-const props = require('./props-cc21d3d7.js');
-const constants = require('./constants-404ee283.js');
-const variants = require('./variants-bacf037a.js');
+const props = require('./props-5f82e4c0.js');
+const constants = require('./constants-61f8be34.js');
 const template = require('./template-e1c4ff78.js');
 require('./gov.log-0c9dca27.js');
+require('./utils-c9b1bba3.js');
+require('./variants-f5ffeef3.js');
 
 const govStatsbarCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}@keyframes countdown{to{transform:scaleX(0)}}.gov-statsbar{position:relative;display:block;width:100%;padding:1.25rem 0}.gov-statsbar__section{display:block;width:100%;max-width:calc(var(--gov-container-width, 73.75rem) + 2 * var(--gov-container-padding, 2.5rem));margin-right:auto;margin-left:auto;padding-right:var(--gov-container-padding-mobile, 1.25rem);padding-left:var(--gov-container-padding-mobile, 1.25rem)}@media (min-width: 48em){.gov-statsbar__section{padding-right:var(--gov-container-padding, 2.5rem);padding-left:var(--gov-container-padding, 2.5rem)}}.gov-statsbar[variant=primary]{background-color:var(--gov-statsbar-primary-bg-color, var(--gov-color-primary-200));color:var(--gov-statsbar-primary-text-color, var(--gov-color-primary))}.gov-statsbar[variant=primary][inverse=\"\"],.gov-statsbar[variant=primary][inverse=true i],.gov-statsbar[variant=primary][inverse=\"1\"]{background:var(--gov-color-neutral-white);color:var(--gov-statsbar-primary-text-color-inverse, var(--gov-color-primary))}.gov-statsbar[variant=secondary]{background-color:var(--gov-statsbar-secondary-bg-color, var(--gov-color-secondary));color:var(--gov-statsbar-secondary-text-color, var(--gov-color-neutral-white))}.gov-statsbar[variant=secondary][inverse=\"\"],.gov-statsbar[variant=secondary][inverse=true i],.gov-statsbar[variant=secondary][inverse=\"1\"]{background:var(--gov-color-neutral-white);color:var(--gov-statsbar-secondary-text-color-inverse, var(--gov-color-secondary))}@media (min-width: 30em){.gov-statsbar__section{display:flex;flex-wrap:wrap;justify-content:center}}@media (min-width: 48em){.gov-statsbar{padding:0}}";
 
@@ -15,14 +16,14 @@ const GovStatsbar = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.iconPosition = undefined;
-    this.variant = variants.Variants.PRIMARY;
+    this.variant = 'primary';
     this.h = template.govHost(this.host);
   }
   validateIconPosition(newValue) {
     props.validateProp(constants.StatsBarIconPosition, newValue, constants.StatsBarClass.root);
   }
   validateVariant(newValue) {
-    props.validateProp(constants.StatsBarVariant, newValue, constants.StatsBarClass.root);
+    props.validateProp(constants.StatsBarVariants, newValue, constants.StatsBarClass.root);
   }
   componentWillLoad() {
     this.validateIconPosition(this.iconPosition);
@@ -30,8 +31,8 @@ const GovStatsbar = class {
   }
   componentDidLoad() {
     this.host.querySelectorAll(constants.StatsBarItemClass.root).forEach((node) => {
-      if (this.iconPosition === "left") {
-        node.setAttribute("icon-position", "left");
+      if (this.iconPosition === 'left') {
+        node.setAttribute('icon-position', 'left');
       }
     });
   }

package/dist/cjs/gov-statsbar.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"gov-statsbar.entry.cjs.js","mappings":";;;;;;;;;;;AAAA,MAAM,cAAc,GAAG,ouDAAouD;;MCkB9uD,WAAW;EAGvB;;wBAS2D,SAAS;mBAIKA,iBAAQ,CAAC,OAAO;IAZxF,IAAI,CAAC,CAAC,GAAGC,gBAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EAcD,oBAAoB,CAAC,QAAgB;IACpCC,kBAAY,CAACC,8BAAoB,EAAE,QAAQ,EAAEC,uBAAa,CAAC,IAAI,CAAC,CAAA;GAChE;EAGD,eAAe,CAAC,QAAgB;IAC/BF,kBAAY,CAACG,yBAAe,EAAE,QAAQ,EAAED,uBAAa,CAAC,IAAI,CAAC,CAAA;GAC3D;EAED,iBAAiB;IAChB,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA;IAC5C,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;GAClC;EAED,gBAAgB;IACf,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAACE,2BAAiB,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,IAAS;MACpE,IAAI,IAAI,CAAC,YAAY,KAAK,MAAM,EAAE;QACjC,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAA;OAC1C;KACD,CAAC,CAAA;GACF;EAED,MAAM;IACL,QACCC,QAACC,UAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAACJ,uBAAa,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,IACrEG,qBAAS,KAAK,EAAEH,uBAAa,CAAC,OAAO,IACpCG,qBAAQ,CACC,CACJ,EACP;GACD;;;;;;;;;;;","names":["Variants","govHost","validateProp","StatsBarIconPosition","StatsBarClass","StatsBarVariant","StatsBarItemClass","h","Host"],"sources":["../../../packages/core/src/components/gov-statsbar/gov-statsbar.scss?tag=gov-statsbar","../../../packages/core/src/components/gov-statsbar/gov-statsbar.tsx"],"sourcesContent":["/*\n *   Statsbar\n */\n\n$class: \".gov-statsbar\";\n\n#{$class} {\n\t@include base();\n\tpadding: rem-calc(20) 0;\n\t&__section {\n\t\t@include container();\n\t}\n\n\t// VARIANTS\n\t@each $variant, $definitions in $statsbar-variants {\n\t\t&[variant=\"#{$variant}\"] {\n\t\t\tbackground-color: #{get(\"bg-color\", $definitions)};\n\t\t\tcolor: #{get(\"text-color\", $definitions)};\n\n\t\t\t// STATES\n\t\t\t@include parameter(\"inverse\") {\n\t\t\t\tbackground: color(\"neutral.white\");\n\t\t\t\tcolor: #{get(\"text-color-inverse\", $definitions)};\n\t\t\t}\n\t\t}\n\t}\n\n\t// MQ\n\t@include mq($from: sm) {\n\t\t&__section {\n\t\t\tdisplay: flex;\n\t\t\tflex-wrap: wrap;\n\t\t\tjustify-content: center;\n\t\t}\n\t}\n\t@include mq($from: md) {\n\t\tpadding: 0;\n\t}\n}\n","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"],"version":3}
+{"file":"gov-statsbar.entry.cjs.js","mappings":";;;;;;;;;;;;AAAA,MAAM,cAAc,GAAG,ouDAAouD;;MCU9uD,WAAW;EAGvB;;;mBAayE,SAAS;IAZjF,IAAI,CAAC,CAAC,GAAGA,gBAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EAcD,oBAAoB,CAAC,QAAgB;IACpCC,kBAAY,CAACC,8BAAoB,EAAE,QAAQ,EAAEC,uBAAa,CAAC,IAAI,CAAC,CAAA;GAChE;EAGD,eAAe,CAAC,QAAgB;IAC/BF,kBAAY,CAACG,0BAAgB,EAAE,QAAQ,EAAED,uBAAa,CAAC,IAAI,CAAC,CAAA;GAC5D;EAED,iBAAiB;IAChB,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA;IAC5C,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;GAClC;EAED,gBAAgB;IACf,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAACE,2BAAiB,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,IAAS;MACpE,IAAI,IAAI,CAAC,YAAY,KAAK,MAAM,EAAE;QACjC,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAA;OAC1C;KACD,CAAC,CAAA;GACF;EAED,MAAM;IACL,QACCC,QAACC,UAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAACJ,uBAAa,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,IACrEG,qBAAS,KAAK,EAAEH,uBAAa,CAAC,OAAO,IACpCG,qBAAQ,CACC,CACJ,EACP;GACD;;;;;;;;;;;","names":["govHost","validateProp","StatsBarIconPosition","StatsBarClass","StatsBarVariants","StatsBarItemClass","h","Host"],"sources":["../../../packages/core/src/components/gov-statsbar/gov-statsbar.scss?tag=gov-statsbar","../../../packages/core/src/components/gov-statsbar/gov-statsbar.tsx"],"sourcesContent":["/*\n *   Statsbar\n */\n\n$class: \".gov-statsbar\";\n\n#{$class} {\n\t@include base();\n\tpadding: rem-calc(20) 0;\n\t&__section {\n\t\t@include container();\n\t}\n\n\t// VARIANTS\n\t@each $variant, $definitions in $statsbar-variants {\n\t\t&[variant=\"#{$variant}\"] {\n\t\t\tbackground-color: #{get(\"bg-color\", $definitions)};\n\t\t\tcolor: #{get(\"text-color\", $definitions)};\n\n\t\t\t// STATES\n\t\t\t@include parameter(\"inverse\") {\n\t\t\t\tbackground: color(\"neutral.white\");\n\t\t\t\tcolor: #{get(\"text-color-inverse\", $definitions)};\n\t\t\t}\n\t\t}\n\t}\n\n\t// MQ\n\t@include mq($from: sm) {\n\t\t&__section {\n\t\t\tdisplay: flex;\n\t\t\tflex-wrap: wrap;\n\t\t\tjustify-content: center;\n\t\t}\n\t}\n\t@include mq($from: md) {\n\t\tpadding: 0;\n\t}\n}\n","import { Component, Element, h, Host, Prop, Watch } from '@stencil/core'\nimport { validateProp } from '../../helpers/Validate/props'\nimport { StatsBarClass, StatsBarVariants, StatsBarVariantType, StatsBarItemClass, StatsBarIconPosition, StatsBarIconPositionType } from './constants'\nimport { GovHost } from '../../helpers/Dom/template.types'\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\n\t/**\n\t * Style variation\n\t */\n\t@Prop({ attribute: 'variant' }) readonly variant?: StatsBarVariantType = '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(StatsBarVariants, 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"],"version":3}

package/dist/cjs/gov-stepper-item.cjs.entry.js

@@ -4,12 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-356717ae.js');
 const gov_log = require('./gov.log-0c9dca27.js');
-const props = require('./props-cc21d3d7.js');
-const constants = require('./constants-5c8f444a.js');
+const props = require('./props-5f82e4c0.js');
+const constants = require('./constants-0c6c8e11.js');
 const string_utils = require('./string.utils-0f08c48c.js');
 const template = require('./template-e1c4ff78.js');
-const variants = require('./variants-bacf037a.js');
-const sizes = require('./sizes-79872c2a.js');
+require('./variants-f5ffeef3.js');
+require('./sizes-79872c2a.js');
+require('./utils-c9b1bba3.js');
 
 const govStepperItemCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}@keyframes countdown{to{transform:scaleX(0)}}.gov-stepper-item{position:relative;display:block;width:100%}.gov-stepper-item__header{position:relative;width:100%}.gov-stepper-item__arrow{flex:0 0 auto;width:0.75rem;height:0.75rem}.gov-stepper-item__title{margin:0;padding:0;font-family:var(--gov-font-family, \"Roboto\", sans-serif);font-weight:400;box-sizing:border-box;display:flex;gap:1rem;align-items:baseline}.gov-stepper-item__prefix{display:flex;flex:0 0 auto;justify-content:center;align-items:center;border-radius:50%;text-align:center}.gov-stepper-item__prefix .gov-icon{width:45%;height:45%}.gov-stepper-item__name{display:flex;flex-direction:column}.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{color:var(--gov-wizzard-primary-color, var(--gov-color-primary-800))}.gov-stepper-item[variant=primary] .gov-stepper-item__prefix{background:var(--gov-wizzard-primary-indicator-bg, var(--gov-color-primary-300));color:var(--gov-wizzard-primary-indicator-color, var(--gov-color-primary-800))}.gov-stepper-item[variant=secondary] .gov-stepper-item__header{color:var(--gov-wizzard-secondary-color, var(--gov-color-secondary-700))}.gov-stepper-item[variant=secondary] .gov-stepper-item__prefix{background:var(--gov-wizzard-secondary-indicator-bg, var(--gov-color-secondary-400));color:var(--gov-wizzard-secondary-indicator-color, var(--gov-color-secondary-700))}.gov-stepper-item[variant=success] .gov-stepper-item__header{color:var(--gov-wizzard-success-color, var(--gov-color-success-500))}.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-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-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-neutral-white))}.gov-stepper-item::before{content:\"\";position:absolute;display:block;width:0.125rem}.gov-stepper-item:last-child::before{content:none}.gov-stepper-item[variant=primary]::before{background:var(--gov-wizzard-primary-indicator-bg, var(--gov-color-primary-300))}.gov-stepper-item[variant=secondary]::before{background:var(--gov-wizzard-secondary-indicator-bg, var(--gov-color-secondary-400))}.gov-stepper-item[variant=success]::before{background:var(--gov-wizzard-success-indicator-bg, var(--gov-color-success))}.gov-stepper-item[variant=error]::before{background:var(--gov-wizzard-error-indicator-bg, var(--gov-color-error))}.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:calc(var(--gov-stepper-s-indicator-size, 2rem) + 3 * var(--gov-stepper-s-connect-gap, 1rem))}.gov-stepper-item[size=s]::before{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}.gov-stepper-item[size=s] .gov-stepper-item__title{font-weight:var(--gov-text-l-font-weight);font-size:var(--gov-text-l-font-size);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{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: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:calc(var(--gov-stepper-m-indicator-size, 2.5rem) + 3 * var(--gov-stepper-m-connect-gap, 1rem))}.gov-stepper-item[size=m]::before{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}.gov-stepper-item[size=m] .gov-stepper-item__title{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)}.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{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: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))}";
 
@@ -18,8 +19,8 @@ const GovStepperItem = class {
     index.registerInstance(this, hostRef);
     this.govChange = index.createEvent(this, "gov-change", 7);
     this.isExpandedState = undefined;
-    this.variant = variants.Variants.PRIMARY;
-    this.size = sizes.Sizes._M;
+    this.variant = 'primary';
+    this.size = 'm';
     this.identifier = undefined;
     this.label = undefined;
     this.annotation = undefined;
@@ -42,7 +43,7 @@ const GovStepperItem = class {
     }
   }
   validateVariant(newValue) {
-    props.validateProp(variants.Variants, newValue, constants.StepperItemClass.root);
+    props.validateProp(constants.StepperVariants, newValue, constants.StepperItemClass.root);
   }
   componentWillLoad() {
     this.validateLabel(this.label);
@@ -54,8 +55,7 @@ const GovStepperItem = class {
     const contentId = this.contentId;
     const { label } = this;
     const TriggerTag = this.triggerTag;
-    return (index.h(index.Host, { class: template.prepareClasses([constants.StepperItemClass.root, this.annotation && constants.StepperItemClass.rootWithAnnot]), variant: this.variant }, index.h("div", { id: triggerId, class: constants.StepperItemClass.header, role: "listitem" }, index.h(TriggerTag, { class: constants.StepperItemClass.title }, this.h.hasSlot('prefix') && (index.h("span", { class: constants.StepperItemClass.prefix }, index.h("slot", { name: "prefix" }))), index.h("span", { class: constants.StepperItemClass.name }, index.h("span", { class: constants.StepperItemClass.label }, label), this.annotation &&
-      index.h("span", { class: constants.StepperItemClass.annot }, this.annotation)))), this.h.hasSlot('content') && (index.h("div", { class: constants.StepperItemClass.content, id: contentId, "aria-labelledby": triggerId, role: "tabpanel" }, index.h("slot", { name: "content" })))));
+    return (index.h(index.Host, { class: template.prepareClasses([constants.StepperItemClass.root, this.annotation && constants.StepperItemClass.rootWithAnnot]), variant: this.variant }, index.h("div", { id: triggerId, class: constants.StepperItemClass.header, role: "listitem" }, index.h(TriggerTag, { class: constants.StepperItemClass.title }, this.h.hasSlot('prefix') && (index.h("span", { class: constants.StepperItemClass.prefix }, index.h("slot", { name: "prefix" }))), index.h("span", { class: constants.StepperItemClass.name }, index.h("span", { class: constants.StepperItemClass.label }, label), this.annotation && index.h("span", { class: constants.StepperItemClass.annot }, this.annotation)))), this.h.hasSlot('content') && (index.h("div", { class: constants.StepperItemClass.content, id: contentId, "aria-labelledby": triggerId, role: "tabpanel" }, index.h("slot", { name: "content" })))));
   }
   /**
    * Returns the current state of the component

package/dist/cjs/gov-stepper-item.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"gov-stepper-item.entry.cjs.js","mappings":"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","names":["Variants","Sizes","govHost","createID","govErrorLog","StepperItemClass","validateProp","h","Host","prepareClasses"],"sources":["../../../packages/core/src/components/gov-stepper/gov-stepper-item.scss?tag=gov-stepper-item","../../../packages/core/src/components/gov-stepper/gov-stepper-item.tsx"],"sourcesContent":["/*\n *   Stepper - Item\n */\n\n@import \"../gov-wizzard/gov-wizzard-item-core.scss\";\n$class: \".gov-stepper-item\";\n\n#{$class} {\n\t@include wizzard-item-core;\n\t&::before {\n\t\t@include pseudo();\n\t\twidth: rem-calc(2);\n\t}\n\t&:last-child::before {\n\t\tcontent: none;\n\t}\n\n\t// VARIANTS\n\t@each $variant, $definitions in $wizzard-core-variants {\n\t\t&[variant=\"#{$variant}\"] {\n\t\t\t&::before {\n\t\t\t\tbackground: get(\"indicator-bg\", $definitions);\n\t\t\t}\n\t\t}\n\t}\n\t@each $size, $definitions in $stepper-sizes {\n\t\t$connect-gap: get(\"connect-gap\", $definitions);\n\t\t&[size=\"#{$size}\"] {\n\t\t\tmin-height: calc(get(\"indicator-size\", $definitions) + 3 * $connect-gap);\n\t\t\t&::before {\n\t\t\t\ttop: calc(get(\"indicator-size\", $definitions) + $connect-gap);\n\t\t\t\tbottom: $connect-gap;\n\t\t\t\tleft: calc((get(\"indicator-size\", $definitions) - rem-calc(2)) / 2);\n\t\t\t}\n\t\t\t&:last-child {\n\t\t\t\tmin-height: 0;\n\t\t\t}\n\t\t\t#{$class} {\n\t\t\t\t&__title {\n\t\t\t\t\t@include typography(get(\"font-size\", $definitions));\n\t\t\t\t}\n\t\t\t\t&__annot {\n\t\t\t\t\t@include typography(get(\"font-size-annot\", $definitions));\n\t\t\t\t}\n\t\t\t\t&__prefix {\n\t\t\t\t\t@include typography(get(\"font-size-indicator\", $definitions));\n\t\t\t\t\twidth: get(\"indicator-size\", $definitions);\n\t\t\t\t\theight: get(\"indicator-size\", $definitions);\n\t\t\t\t\tbox-shadow: 0 0 0 $connect-gap color(\"neutral.white\");\n\t\t\t\t}\n\t\t\t\t&__content {\n\t\t\t\t\tpadding: get(\"content-padding\", $definitions);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\t&--w-annot[size=\"#{$size}\"] {\n\t\t\tmin-height: calc(get(\"indicator-size\", $definitions) * 1.5 + 3 * $connect-gap);\n\t\t}\n\t}\n}\n","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"],"version":3}
+{"file":"gov-stepper-item.entry.cjs.js","mappings":"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","names":["govHost","createID","govErrorLog","StepperItemClass","validateProp","StepperVariants","h","Host","prepareClasses"],"sources":["../../../packages/core/src/components/gov-stepper/gov-stepper-item.scss?tag=gov-stepper-item","../../../packages/core/src/components/gov-stepper/gov-stepper-item.tsx"],"sourcesContent":["/*\n *   Stepper - Item\n */\n\n@import \"../gov-wizzard/gov-wizzard-item-core.scss\";\n$class: \".gov-stepper-item\";\n\n#{$class} {\n\t@include wizzard-item-core;\n\t&::before {\n\t\t@include pseudo();\n\t\twidth: rem-calc(2);\n\t}\n\t&:last-child::before {\n\t\tcontent: none;\n\t}\n\n\t// VARIANTS\n\t@each $variant, $definitions in $wizzard-core-variants {\n\t\t&[variant=\"#{$variant}\"] {\n\t\t\t&::before {\n\t\t\t\tbackground: get(\"indicator-bg\", $definitions);\n\t\t\t}\n\t\t}\n\t}\n\t@each $size, $definitions in $stepper-sizes {\n\t\t$connect-gap: get(\"connect-gap\", $definitions);\n\t\t&[size=\"#{$size}\"] {\n\t\t\tmin-height: calc(get(\"indicator-size\", $definitions) + 3 * $connect-gap);\n\t\t\t&::before {\n\t\t\t\ttop: calc(get(\"indicator-size\", $definitions) + $connect-gap);\n\t\t\t\tbottom: $connect-gap;\n\t\t\t\tleft: calc((get(\"indicator-size\", $definitions) - rem-calc(2)) / 2);\n\t\t\t}\n\t\t\t&:last-child {\n\t\t\t\tmin-height: 0;\n\t\t\t}\n\t\t\t#{$class} {\n\t\t\t\t&__title {\n\t\t\t\t\t@include typography(get(\"font-size\", $definitions));\n\t\t\t\t}\n\t\t\t\t&__annot {\n\t\t\t\t\t@include typography(get(\"font-size-annot\", $definitions));\n\t\t\t\t}\n\t\t\t\t&__prefix {\n\t\t\t\t\t@include typography(get(\"font-size-indicator\", $definitions));\n\t\t\t\t\twidth: get(\"indicator-size\", $definitions);\n\t\t\t\t\theight: get(\"indicator-size\", $definitions);\n\t\t\t\t\tbox-shadow: 0 0 0 $connect-gap color(\"neutral.white\");\n\t\t\t\t}\n\t\t\t\t&__content {\n\t\t\t\t\tpadding: get(\"content-padding\", $definitions);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\t&--w-annot[size=\"#{$size}\"] {\n\t\t\tmin-height: calc(get(\"indicator-size\", $definitions) * 1.5 + 3 * $connect-gap);\n\t\t}\n\t}\n}\n","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 { StepperSizesType, StepperItemClass, StepperVariantType, StepperVariants } from './constants'\nimport { createID } from '../../utils/string.utils'\nimport { govHost, prepareClasses } from '../../helpers/Dom/template'\nimport { GovStepperItemChangeEvent } from './gov-stepper-item.d'\nimport { GovHost } from '../../helpers/Dom/template.types'\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?: StepperVariantType = 'primary'\n\t/**\n\t * Size of stepper\n\t */\n\t@Prop() readonly size?: StepperSizesType = '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(StepperVariants, 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 && <span class={StepperItemClass.annot}>{this.annotation}</span>}\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"],"version":3}

package/dist/cjs/gov-stepper.cjs.entry.js

@@ -3,12 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-356717ae.js');
-const props = require('./props-cc21d3d7.js');
-const constants = require('./constants-5c8f444a.js');
-const sizes = require('./sizes-79872c2a.js');
+const props = require('./props-5f82e4c0.js');
+const constants = require('./constants-0c6c8e11.js');
 const template = require('./template-e1c4ff78.js');
 require('./gov.log-0c9dca27.js');
-require('./variants-bacf037a.js');
+require('./variants-f5ffeef3.js');
+require('./sizes-79872c2a.js');
+require('./utils-c9b1bba3.js');
 
 const govStepperCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}@keyframes countdown{to{transform:scaleX(0)}}.gov-stepper{position:relative;display:block;width:100%}";
 
@@ -16,19 +17,19 @@ const GovStepper = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.govChange = index.createEvent(this, "gov-change", 7);
-    this.size = sizes.Sizes._M;
+    this.size = 'm';
     this.h = template.govHost(this.host);
   }
   validateSize(newValue) {
-    props.validateProp(sizes.Sizes, newValue, constants.StepperClass.root);
+    props.validateProp(constants.StepperSizes, newValue, constants.StepperClass.root);
   }
   componentWillLoad() {
     this.validateSize(this.size);
   }
   componentDidLoad() {
     this.host.querySelectorAll(constants.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);
       });

package/dist/cjs/gov-stepper.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"gov-stepper.entry.cjs.js","mappings":";;;;;;;;;;;;AAAA,MAAM,aAAa,GAAG,+OAA+O;;MCaxP,UAAU;EAGtB;;;gBAQmCA,WAAK,CAAC,EAAE;IAP1C,IAAI,CAAC,CAAC,GAAGC,gBAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EAaD,YAAY,CAAC,QAAgB;IAC5BC,kBAAY,CAACF,WAAK,EAAE,QAAQ,EAAEG,sBAAY,CAAC,IAAI,CAAC,CAAA;GAChD;EAED,iBAAiB;IAChB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC5B;EAED,gBAAgB;IACf,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAACC,0BAAgB,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,KAAgC;MAC1F,KAAK,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAA;MACrC,KAAK,CAAC,gBAAgB,CAAC,YAAY,EAAE,CAAC,CAAuD;QAC5F,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAA;OAC7B,CAAC,CAAA;KACF,CAAC,CAAA;GACF;EAED,MAAM;IACL,QACCC,QAACC,UAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAACH,sBAAY,CAAC,IAAI,CAAC,EAAE,IAAI,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,IAC1EE,qBAAQ,CACF,EACP;GACD;;;;;;;;;;","names":["Sizes","govHost","validateProp","StepperClass","StepperItemClass","h","Host"],"sources":["../../../packages/core/src/components/gov-stepper/gov-stepper.scss?tag=gov-stepper","../../../packages/core/src/components/gov-stepper/gov-stepper.tsx"],"sourcesContent":["/*\n *   Stepper\n */\n\n$class: \".gov-stepper\";\n\n#{$class} {\n\t@include base();\n}\n","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"],"version":3}
+{"file":"gov-stepper.entry.cjs.js","mappings":";;;;;;;;;;;;;AAAA,MAAM,aAAa,GAAG,+OAA+O;;MCYxP,UAAU;EAGtB;;;gBAQ2C,GAAG;IAP7C,IAAI,CAAC,CAAC,GAAGA,gBAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EAaD,YAAY,CAAC,QAAgB;IAC5BC,kBAAY,CAACC,sBAAY,EAAE,QAAQ,EAAEC,sBAAY,CAAC,IAAI,CAAC,CAAA;GACvD;EAED,iBAAiB;IAChB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC5B;EAED,gBAAgB;IACf,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAACC,0BAAgB,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,KAAgC;MAC1F,KAAK,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAA;MACrC,KAAK,CAAC,gBAAgB,CAAC,YAAY,EAAE,CAAC,CAAuD;QAC5F,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAA;OAC7B,CAAC,CAAA;KACF,CAAC,CAAA;GACF;EAED,MAAM;IACL,QACCC,QAACC,UAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAACH,sBAAY,CAAC,IAAI,CAAC,EAAE,IAAI,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,IAC1EE,qBAAQ,CACF,EACP;GACD;;;;;;;;;;","names":["govHost","validateProp","StepperSizes","StepperClass","StepperItemClass","h","Host"],"sources":["../../../packages/core/src/components/gov-stepper/gov-stepper.scss?tag=gov-stepper","../../../packages/core/src/components/gov-stepper/gov-stepper.tsx"],"sourcesContent":["/*\n *   Stepper\n */\n\n$class: \".gov-stepper\";\n\n#{$class} {\n\t@include base();\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop, Watch } from '@stencil/core'\nimport { validateProp } from '../../helpers/Validate/props'\nimport { StepperClass, StepperItemClass, StepperSizes, StepperSizesType } from './constants'\nimport { GovStepperItemCustomEvent } from '../../components'\nimport { GovStepperItemChangeEvent } from './gov-stepper-item.d'\nimport { GovHost } from '../../helpers/Dom/template.types'\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?: StepperSizesType = '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(StepperSizes, 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"],"version":3}

package/dist/cjs/gov-tabs-item.cjs.entry.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-356717ae.js');
 const string_utils = require('./string.utils-0f08c48c.js');
 const template = require('./template-e1c4ff78.js');
-const constants = require('./constants-b3c2277b.js');
-require('./sizes-79872c2a.js');
-require('./variants-bacf037a.js');
+const constants = require('./constants-23b7a283.js');
+require('./variants-f5ffeef3.js');
+require('./utils-c9b1bba3.js');
 
 const govTabsItemCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}@keyframes countdown{to{transform:scaleX(0)}}.gov-tabs-item{color:var(--gov-tabs-text-color, var(--gov-color-secondary-700))}.gov-tabs-item__inner>*:last-child{margin-bottom:0}";
 

package/dist/cjs/gov-tabs-item.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"gov-tabs-item.entry.cjs.js","mappings":";;;;;;;;;;;AAAA,MAAM,cAAc,GAAG,0TAA0T;;MCUpU,WAAW;EAKvB;;;;;mBAsBoC,KAAK;oBACrB,KAAK;IAtBxB,IAAI,CAAC,CAAC,GAAGA,gBAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAC3B,IAAI,CAAC,SAAS,GAAGC,qBAAQ,CAAC,eAAe,CAAC,CAAA;IAC1C,IAAI,CAAC,QAAQ,GAAGA,qBAAQ,CAAC,eAAe,CAAC,CAAA;GACzC;EAqBD,MAAM;IACL,QACCC,QAACC,UAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAACC,uBAAa,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,IACrEF,iBACC,KAAK,EAAEE,uBAAa,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,iBAC3CC,4BAAmB,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,IAEhDH,qBAAa,CACR,CACA,EACP;GACD;;;;EAMD,MAAM,aAAa;IAClB,OAAO,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,SAAS,CAAA;GACxC;;;;EAMD,MAAM,oBAAoB;IACzB,OAAO,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,QAAQ,CAAA;GAC9C;;;;EAMD,MAAM,eAAe,CAAC,MAAe;IACpC,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAA;GACtB;;;;;;;","names":["govHost","createID","h","Host","TabsItemClass","toBoolAttrIfDefined"],"sources":["../../../packages/core/src/components/gov-tabs/gov-tabs-item.scss?tag=gov-tabs-item","../../../packages/core/src/components/gov-tabs/gov-tabs-item.tsx"],"sourcesContent":["/*\n *   Tabs - Item\n */\n\n$class: \".gov-tabs-item\";\n\n#{$class} {\n\tcolor: $tabs-text-color;\n\t&__inner {\n\t\t@include reset-last-margin();\n\t}\n}\n","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"],"version":3}
+{"file":"gov-tabs-item.entry.cjs.js","mappings":";;;;;;;;;;;AAAA,MAAM,cAAc,GAAG,0TAA0T;;MCUpU,WAAW;EAKvB;;;;;mBAsBoC,KAAK;oBACrB,KAAK;IAtBxB,IAAI,CAAC,CAAC,GAAGA,gBAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAC3B,IAAI,CAAC,SAAS,GAAGC,qBAAQ,CAAC,eAAe,CAAC,CAAA;IAC1C,IAAI,CAAC,QAAQ,GAAGA,qBAAQ,CAAC,eAAe,CAAC,CAAA;GACzC;EAqBD,MAAM;IACL,QACCC,QAACC,UAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAACC,uBAAa,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,IACrEF,iBACC,KAAK,EAAEE,uBAAa,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,iBAC3CC,4BAAmB,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,IAEhDH,qBAAa,CACR,CACA,EACP;GACD;;;;EAMD,MAAM,aAAa;IAClB,OAAO,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,SAAS,CAAA;GACxC;;;;EAMD,MAAM,oBAAoB;IACzB,OAAO,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,QAAQ,CAAA;GAC9C;;;;EAMD,MAAM,eAAe,CAAC,MAAe;IACpC,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAA;GACtB;;;;;;;","names":["govHost","createID","h","Host","TabsItemClass","toBoolAttrIfDefined"],"sources":["../../../packages/core/src/components/gov-tabs/gov-tabs-item.scss?tag=gov-tabs-item","../../../packages/core/src/components/gov-tabs/gov-tabs-item.tsx"],"sourcesContent":["/*\n *   Tabs - Item\n */\n\n$class: \".gov-tabs-item\";\n\n#{$class} {\n\tcolor: $tabs-text-color;\n\t&__inner {\n\t\t@include reset-last-margin();\n\t}\n}\n","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.types'\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"],"version":3}

package/dist/cjs/gov-tabs.cjs.entry.js

@@ -3,18 +3,17 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-356717ae.js');
-const props = require('./props-cc21d3d7.js');
-const constants = require('./constants-b3c2277b.js');
+const props = require('./props-5f82e4c0.js');
+const constants = require('./constants-23b7a283.js');
 const template = require('./template-e1c4ff78.js');
-const wcag = require('./wcag-eca97102.js');
-const win = require('./win-ac5c1806.js');
-const utils = require('./utils-4ae73637.js');
+const wcag = require('./wcag-6efc0ab7.js');
+const win = require('./win-84bda0aa.js');
+const utils = require('./utils-c9b1bba3.js');
 const string_utils = require('./string.utils-0f08c48c.js');
-const variants = require('./variants-bacf037a.js');
 require('./gov.log-0c9dca27.js');
-require('./sizes-79872c2a.js');
+require('./variants-f5ffeef3.js');
 
-const govTabsCss = ".gov-tabs__list{margin:0;padding:0}.gov-tabs__list>.gov-tabs__item{margin:0;padding:0;background:none}.gov-tabs__list>.gov-tabs__item::before{display:none}.gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}@keyframes countdown{to{transform:scaleX(0)}}.gov-tabs{position:relative;display:block;width:100%}.gov-tabs__list{display:flex;flex-wrap:wrap;margin:0rem 0rem 1.4375rem}.gov-tabs__list>.gov-tabs__item{display:flex;margin:0}.gov-tabs__btn{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);display:inline-flex;vertical-align:middle;justify-content:center;align-items:center;border:0;background-color:transparent;text-align:center;text-decoration:none;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;padding:0.75rem 0rem 0.625rem;border-bottom:0.125rem solid transparent;font-weight:700;text-align:center;text-transform:uppercase;transition:150ms linear color, 150ms linear border-color}.gov-tabs__btn:focus{outline:none}.gov-tabs__btn:focus{outline:none}.gov-tabs__btn:focus-visible{border-radius:var(--gov-border-radius, 0.1875rem);outline:var(--gov-outline-width, 0.125rem) solid var(--gov-color-focus-base);outline-offset:0}.gov-tabs[type=text] .gov-tabs__list{gap:0.5rem 2rem;border-bottom:var(--gov-tabs-list-border-width, 0.0625rem solid var(--gov-color-secondary-500))}.gov-tabs[type=badge] .gov-tabs__list{gap:0.5rem 1rem}.gov-tabs[variant=primary][type=text] .gov-tabs__btn{color:var(--gov-tabs-primary-color, var(--gov-color-primary))}@media not all and (pointer: coarse){.gov-tabs[variant=primary][type=text] .gov-tabs__btn:hover{color:var(--gov-tabs-primary-color-hover, var(--gov-color-primary-800))}}.gov-tabs[variant=primary][type=text] .gov-tabs__btn[aria-selected=true]{border-bottom-color:cmake-var(tabs-primary-color-active, var(--gov-color-primary-800));color:cmake-var(tabs-primary-color-active, var(--gov-color-primary-800))}.gov-tabs[variant=secondary][type=text] .gov-tabs__btn{color:var(--gov-tabs-secondary-color, var(--gov-color-secondary-700))}@media not all and (pointer: coarse){.gov-tabs[variant=secondary][type=text] .gov-tabs__btn:hover{color:var(--gov-tabs-secondary-color-hover, var(--gov-color-secondary-900))}}.gov-tabs[variant=secondary][type=text] .gov-tabs__btn[aria-selected=true]{border-bottom-color:cmake-var(tabs-secondary-color-active, var(--gov-color-secondary-900));color:cmake-var(tabs-secondary-color-active, var(--gov-color-secondary-900))}.gov-tabs[variant=success][type=text] .gov-tabs__btn{color:var(--gov-tabs-success-color, var(--gov-color-success-500))}@media not all and (pointer: coarse){.gov-tabs[variant=success][type=text] .gov-tabs__btn:hover{color:var(--gov-tabs-success-color-hover, var(--gov-color-success-700))}}.gov-tabs[variant=success][type=text] .gov-tabs__btn[aria-selected=true]{border-bottom-color:cmake-var(tabs-success-color-active, var(--gov-color-success-700));color:cmake-var(tabs-success-color-active, var(--gov-color-success-700))}.gov-tabs[variant=warning][type=text] .gov-tabs__btn{color:var(--gov-tabs-warning-color, var(--gov-color-warning-500))}@media not all and (pointer: coarse){.gov-tabs[variant=warning][type=text] .gov-tabs__btn:hover{color:var(--gov-tabs-warning-color-hover, var(--gov-color-warning-700))}}.gov-tabs[variant=warning][type=text] .gov-tabs__btn[aria-selected=true]{border-bottom-color:cmake-var(tabs-warning-color-active, var(--gov-color-warning-700));color:cmake-var(tabs-warning-color-active, var(--gov-color-warning-700))}.gov-tabs[variant=error][type=text] .gov-tabs__btn{color:var(--gov-tabs-error-color, var(--gov-color-error-400))}@media not all and (pointer: coarse){.gov-tabs[variant=error][type=text] .gov-tabs__btn:hover{color:var(--gov-tabs-error-color-hover, var(--gov-color-error-600))}}.gov-tabs[variant=error][type=text] .gov-tabs__btn[aria-selected=true]{border-bottom-color:cmake-var(tabs-error-color-active, var(--gov-color-error-600));color:cmake-var(tabs-error-color-active, var(--gov-color-error-600))}";
+const govTabsCss = ".gov-tabs__list{margin:0;padding:0}.gov-tabs__list>.gov-tabs__item{margin:0;padding:0;background:none}.gov-tabs__list>.gov-tabs__item::before{display:none}.gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}@keyframes countdown{to{transform:scaleX(0)}}.gov-tabs{position:relative;display:block;width:100%}.gov-tabs__list{display:flex;flex-wrap:wrap;margin:0rem 0rem 1.25rem}.gov-tabs__list>.gov-tabs__item{display:flex;margin:0}.gov-tabs__btn{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);display:inline-flex;vertical-align:middle;justify-content:center;align-items:center;border:0;background-color:transparent;text-align:center;text-decoration:none;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;padding:0.75rem 0rem 0.625rem;border-bottom:0.125rem solid transparent;font-weight:700;text-align:center;text-transform:uppercase;transition:150ms linear color, 150ms linear border-color}.gov-tabs__btn:focus{outline:none}.gov-tabs__btn:focus{outline:none}.gov-tabs__btn:focus-visible{border-radius:var(--gov-border-radius, 0.1875rem);outline:var(--gov-outline-width, 0.125rem) solid var(--gov-color-focus-base);outline-offset:0}.gov-tabs[type=text] .gov-tabs__list{gap:0.5rem 2rem;border-bottom:var(--gov-tabs-list-border-width, 0.0625rem solid var(--gov-color-secondary-500))}.gov-tabs[type=badge] .gov-tabs__list{gap:0.5rem 1rem}.gov-tabs[variant=primary][type=text] .gov-tabs__btn{color:var(--gov-tabs-primary-color, var(--gov-color-primary))}@media not all and (pointer: coarse){.gov-tabs[variant=primary][type=text] .gov-tabs__btn:hover{color:var(--gov-tabs-primary-color-hover, var(--gov-color-primary-800))}}.gov-tabs[variant=primary][type=text] .gov-tabs__btn[aria-selected=true]{border-bottom-color:cmake-var(tabs-primary-color-active, var(--gov-color-primary-800));color:cmake-var(tabs-primary-color-active, var(--gov-color-primary-800))}.gov-tabs[variant=secondary][type=text] .gov-tabs__btn{color:var(--gov-tabs-secondary-color, var(--gov-color-secondary-700))}@media not all and (pointer: coarse){.gov-tabs[variant=secondary][type=text] .gov-tabs__btn:hover{color:var(--gov-tabs-secondary-color-hover, var(--gov-color-secondary-900))}}.gov-tabs[variant=secondary][type=text] .gov-tabs__btn[aria-selected=true]{border-bottom-color:cmake-var(tabs-secondary-color-active, var(--gov-color-secondary-900));color:cmake-var(tabs-secondary-color-active, var(--gov-color-secondary-900))}.gov-tabs[variant=success][type=text] .gov-tabs__btn{color:var(--gov-tabs-success-color, var(--gov-color-success-500))}@media not all and (pointer: coarse){.gov-tabs[variant=success][type=text] .gov-tabs__btn:hover{color:var(--gov-tabs-success-color-hover, var(--gov-color-success-700))}}.gov-tabs[variant=success][type=text] .gov-tabs__btn[aria-selected=true]{border-bottom-color:cmake-var(tabs-success-color-active, var(--gov-color-success-700));color:cmake-var(tabs-success-color-active, var(--gov-color-success-700))}.gov-tabs[variant=warning][type=text] .gov-tabs__btn{color:var(--gov-tabs-warning-color, var(--gov-color-warning-500))}@media not all and (pointer: coarse){.gov-tabs[variant=warning][type=text] .gov-tabs__btn:hover{color:var(--gov-tabs-warning-color-hover, var(--gov-color-warning-700))}}.gov-tabs[variant=warning][type=text] .gov-tabs__btn[aria-selected=true]{border-bottom-color:cmake-var(tabs-warning-color-active, var(--gov-color-warning-700));color:cmake-var(tabs-warning-color-active, var(--gov-color-warning-700))}.gov-tabs[variant=error][type=text] .gov-tabs__btn{color:var(--gov-tabs-error-color, var(--gov-color-error-400))}@media not all and (pointer: coarse){.gov-tabs[variant=error][type=text] .gov-tabs__btn:hover{color:var(--gov-tabs-error-color-hover, var(--gov-color-error-600))}}.gov-tabs[variant=error][type=text] .gov-tabs__btn[aria-selected=true]{border-bottom-color:cmake-var(tabs-error-color-active, var(--gov-color-error-600));color:cmake-var(tabs-error-color-active, var(--gov-color-error-600))}.gov-tabs[orientation=vertical] .gov-tabs__btn{text-align:left}@media (min-width: 75em){.gov-tabs[orientation=vertical]{display:flex;flex-direction:row}.gov-tabs[orientation=vertical] .gov-tabs__list{flex-wrap:nowrap;flex-direction:column;width:-moz-max-content;width:max-content;max-width:30vw;margin-right:1.25rem;padding:0rem 0.5rem;border-bottom:none;border-right:var(--gov-tabs-list-border-width, 0.0625rem solid var(--gov-color-secondary-500))}.gov-tabs[orientation=vertical] .gov-tabs__item{justify-content:flex-end}.gov-tabs[orientation=vertical] .gov-tabs__btn{padding:0.5rem 0.75rem;text-align:right}}";
 
 const GovTabs = class {
   constructor(hostRef) {
@@ -25,7 +24,8 @@ const GovTabs = class {
     this.focusIndex = 0;
     this.compactControls = false;
     this.type = 'text';
-    this.variant = variants.Variants.PRIMARY;
+    this.variant = 'primary';
+    this.orientation = 'horizontal';
     this.wcagLabel = undefined;
     this.wcagSelectLabel = undefined;
     this.wcagLabelledBy = undefined;
@@ -33,10 +33,10 @@ const GovTabs = class {
     this.formSelectId = string_utils.createID('GovForSelect');
   }
   validateType(newValue) {
-    props.validateProp(constants.Types, newValue, constants.TabsClass.root);
+    props.validateProp(constants.TabTypes, newValue, constants.TabsClass.root);
   }
   validateVariant(newValue) {
-    props.validateProp(variants.Variants, newValue, constants.TabsClass.root);
+    props.validateProp(constants.TabVariants, newValue, constants.TabsClass.root);
   }
   componentWillLoad() {
     this.prepareDataSource();
@@ -102,7 +102,7 @@ const GovTabs = class {
     resizeObserver.observe(this.tabsRef);
   }
   render() {
-    return (index.h(index.Host, { class: this.h.classes(constants.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) }, index.h("div", { class: constants.TabsClass.tabs, "aria-hidden": template.toBoolAttr(this.compactControls) }, index.h("ul", { class: constants.TabsClass.list }, this.controller.map((control, index$1) => (index.h("li", { class: constants.TabsClass.item }, this.type == 'text' ? (index.h("button", { class: constants.TabsClass.btn, id: control.triggerIdentifier, role: "tab", onClick: () => this.onSelectHandler(control, index$1), "aria-selected": template.toBoolAttr(control.active), "aria-controls": control.contentIdentifier, tabindex: control.active ? -1 : 0, ref: el => (this.triggerRefs[control.triggerIdentifier] = el) }, control.label)) : (index.h("gov-badge", { variant: this.variant, type: template.toBoolAttr(control.active) == 'true' ? 'solid' : 'outlined', nativeType: template.toBoolAttr(control.active) == 'true' ? 'span' : 'button', "on-gov-click": () => this.onSelectHandler(control, index$1) }, control.label))))))), index.h("span", { id: this.formSelectId, hidden: true }, this.wcagSelectLabel), this.compactControls ? (index.h("gov-form-select", { "wcag-labelled-by": this.formSelectId, "onGov-change": this.onChangeHandler.bind(this) }, this.controller.map(control => (index.h("option", { value: control.triggerIdentifier, selected: control.active }, control.label))))) : null, index.h("slot", null)));
+    return (index.h(index.Host, { class: this.h.classes(constants.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) }, index.h("div", { class: constants.TabsClass.tabs, "aria-hidden": template.toBoolAttr(this.compactControls) }, index.h("ul", { class: constants.TabsClass.list }, this.controller.map((control, index$1) => (index.h("li", { class: constants.TabsClass.item }, this.type == 'text' ? (index.h("button", { class: constants.TabsClass.btn, id: control.triggerIdentifier, role: "tab", onClick: () => this.onSelectHandler(control, index$1), "aria-selected": template.toBoolAttr(control.active), "aria-controls": control.contentIdentifier, tabindex: control.active ? -1 : 0, ref: el => (this.triggerRefs[control.triggerIdentifier] = el) }, control.label)) : (index.h("gov-badge", { variant: this.variant, type: template.toBoolAttr(control.active) == 'true' ? 'solid' : 'outlined', "on-gov-click": () => this.onSelectHandler(control, index$1) }, control.label))))))), index.h("span", { id: this.formSelectId, hidden: true }, this.wcagSelectLabel), this.compactControls ? (index.h("gov-form-select", { "wcag-labelled-by": this.formSelectId, "onGov-change": this.onChangeHandler.bind(this) }, this.controller.map(control => (index.h("option", { value: control.triggerIdentifier, selected: control.active }, control.label))))) : null, index.h("slot", null)));
   }
   getCurrentTab() {
     return this.controller.find(control => control.active) || null;