@gov-design-system-ce/components 0.0.61 → 0.0.63

package/dist/collection/components/gov-side-nav/gov-side-nav-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"gov-side-nav-item.js","sourceRoot":"","sources":["../../../../../../src/components/gov-side-nav/gov-side-nav-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Prop, State, Watch, Host, Method, Event, EventEmitter } from '@stencil/core'\nimport { govErrorLog } from '../../helpers/Log/gov.log'\nimport { SideNavItemClass } from './constants'\nimport { booleanString, prepareClasses } from '../../helpers/Dom/template'\nimport { GovSideNavItemChangeEvent } from './gov-side-nav-item.d'\nimport { govHost } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.types'\n\n@Component({\n\ttag: 'gov-side-nav-item',\n\tstyleUrl: 'gov-side-nav-item.scss',\n})\nexport class GovSideNavItem {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() readonly host: HTMLGovSideNavItemElement\n\t@State() isExpandedState: boolean\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 * Custom sidenav item identifier. Otherwise, it will be generated\n\t */\n\t@Prop() readonly identifier: string\n\t/**\n\t * Defined the count of nested items\n\t */\n\t@Prop() readonly count: boolean = false\n\t/**\n\t * Item name of the sidenav\n\t */\n\t@Prop() readonly label: string\n\t/**\n\t * Makes the button component disabled.\n\t * This prevents users from being able to interact with the button, and conveys its inactive state to assistive technologies.\n\t */\n\t@Prop() readonly disabled: boolean = false\n\t/**\n\t * Same as original parameter\n\t * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-href\n\t */\n\t@Prop() readonly href: string\n\t/**\n\t * Defines whether the sidenav is open or closed by default\n\t */\n\t@Prop({ attribute: 'is-expanded' }) readonly isExpanded: boolean = false\n\t/**\n\t * Called when the sidenav state changes\n\t */\n\t@Event({ eventName: 'gov-change' }) govChange: EventEmitter<GovSideNavItemChangeEvent>\n\n\t@Watch('label')\n\tvalidateLabel(newValue: string): void {\n\t\tif (!newValue) {\n\t\t\tgovErrorLog(`[${SideNavItemClass.root}]: Parameter label is required.`)\n\t\t}\n\t}\n\n\tprivate emmitChange(): void {\n\t\tthis.govChange.emit({ open: this.isExpandedState, element: this.host })\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.isExpandedState = this.isExpanded\n\t\tthis.validateLabel(this.label)\n\t}\n\n\tget classNames(): string {\n\t\tconst { h } = this\n\n\t\treturn prepareClasses([SideNavItemClass.root, h.hasSlot('icon') && SideNavItemClass.rootWithIcon])\n\t}\n\n\trender() {\n\t\tconst { isExpandedState, label } = this\n\t\t// TODO: správný počet zanořených childů\n\t\tconst hasChilds = this.host.children.length > 1\n\n\t\treturn (\n\t\t\t<Host class={this.classNames} role=\"listitem\" inverse={this.inverse} aria-expanded={booleanString(isExpandedState)}>\n\t\t\t\t{this.href ? (\n\t\t\t\t\t<div class={SideNavItemClass.header}>\n\t\t\t\t\t\t<a class={SideNavItemClass.name} href={this.href}>\n\t\t\t\t\t\t\t{this.h.hasSlot('icon') && (\n\t\t\t\t\t\t\t\t<span class={SideNavItemClass.icon}>\n\t\t\t\t\t\t\t\t\t<slot name=\"icon\" />\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<span class={SideNavItemClass.label}>{label}</span>\n\n\t\t\t\t\t\t\t{this.count && (\n\t\t\t\t\t\t\t\t<span class={SideNavItemClass.badge}>\n\t\t\t\t\t\t\t\t\t<gov-badge variant=\"secondary\" size=\"s\" inverse={this.inverse}>\n\t\t\t\t\t\t\t\t\t\t{/* // TODO: správný počet zanořených childů */}3\n\t\t\t\t\t\t\t\t\t</gov-badge>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</a>\n\n\t\t\t\t\t\t{hasChilds && (\n\t\t\t\t\t\t\t<button type=\"button\" class={SideNavItemClass.arrow} onClick={() => this.toggle()}>\n\t\t\t\t\t\t\t\t<gov-icon name=\"chevron-down\"></gov-icon>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t) : (\n\t\t\t\t\t<div class={SideNavItemClass.header}>\n\t\t\t\t\t\t<button class={SideNavItemClass.name} type=\"button\" onClick={() => this.toggle()}>\n\t\t\t\t\t\t\t{this.h.hasSlot('icon') && (\n\t\t\t\t\t\t\t\t<span class={SideNavItemClass.icon}>\n\t\t\t\t\t\t\t\t\t<slot name=\"icon\" />\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<span class={SideNavItemClass.label}>{label}</span>\n\n\t\t\t\t\t\t\t{hasChilds && (\n\t\t\t\t\t\t\t\t<span class={SideNavItemClass.arrow}>\n\t\t\t\t\t\t\t\t\t<gov-icon name=\"chevron-down\"></gov-icon>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\n\t\t\t\t{hasChilds && (\n\t\t\t\t\t<div class={SideNavItemClass.content}>\n\t\t\t\t\t\t<slot />\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 * Opening the sidenav\n\t */\n\t@Method()\n\tasync open(): Promise<void> {\n\t\tthis.isExpandedState = true\n\t\tthis.emmitChange()\n\t}\n\n\t/**\n\t * Closing the sidenav\n\t */\n\t@Method()\n\tasync close(): Promise<void> {\n\t\tthis.isExpandedState = false\n\t\tthis.emmitChange()\n\t}\n\n\t/**\n\t * sidenav switch\n\t */\n\t@Method()\n\tasync toggle(): Promise<void> {\n\t\tthis.isExpandedState = !this.isExpandedState\n\t\tthis.emmitChange()\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-side-nav-item.js","sourceRoot":"","sources":["../../../../../../src/components/gov-side-nav/gov-side-nav-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAA;AAC5G,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAA;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AAC9C,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAA;AAE1E,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAOpD,MAAM,OAAO,cAAc;EAG1B;;mBAUoC,KAAK;mBAIL,KAAK;;iBAQP,KAAK;;oBASF,KAAK;;sBASyB,KAAK;IAvCvE,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EA6CD,aAAa,CAAC,QAAgB;IAC7B,IAAI,CAAC,QAAQ,EAAE;MACd,WAAW,CAAC,IAAI,gBAAgB,CAAC,IAAI,iCAAiC,CAAC,CAAA;KACvE;EACF,CAAC;EAEO,WAAW;IAClB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,eAAe,EAAE,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAA;EACxE,CAAC;EAED,iBAAiB;IAChB,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,UAAU,CAAA;IACtC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;EAC/B,CAAC;EAED,IAAI,UAAU;IACb,MAAM,EAAE,CAAC,EAAE,GAAG,IAAI,CAAA;IAElB,OAAO,cAAc,CAAC,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,gBAAgB,CAAC,YAAY,CAAC,CAAC,CAAA;EACnG,CAAC;EAED,MAAM;IACL,MAAM,EAAE,eAAe,EAAE,KAAK,EAAE,GAAG,IAAI,CAAA;IACvC,wCAAwC;IACxC,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAA;IAE/C,OAAO,CACN,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,EAAC,UAAU,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,mBAAiB,aAAa,CAAC,eAAe,CAAC;MAChH,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CACZ,WAAK,KAAK,EAAE,gBAAgB,CAAC,MAAM;QAClC,SAAG,KAAK,EAAE,gBAAgB,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI;UAC9C,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAC1B,YAAM,KAAK,EAAE,gBAAgB,CAAC,IAAI;YACjC,YAAM,IAAI,EAAC,MAAM,GAAG,CACd,CACP;UACD,YAAM,KAAK,EAAE,gBAAgB,CAAC,KAAK,IAAG,KAAK,CAAQ;UAElD,IAAI,CAAC,KAAK,IAAI,CACd,YAAM,KAAK,EAAE,gBAAgB,CAAC,IAAI;YACjC,gBAAU,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,GAAG,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,QAEjD,CACL,CACP,CACE;QAEH,SAAS,IAAI,CACb,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAE,gBAAgB,CAAC,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE;UAChF,gBAAU,IAAI,EAAC,cAAc,GAAY,CACjC,CACT,CACI,CACN,CAAC,CAAC,CAAC,CACH,WAAK,KAAK,EAAE,gBAAgB,CAAC,MAAM;QAClC,cAAQ,KAAK,EAAE,gBAAgB,CAAC,IAAI,EAAE,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE;UAC9E,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAC1B,YAAM,KAAK,EAAE,gBAAgB,CAAC,IAAI;YACjC,YAAM,IAAI,EAAC,MAAM,GAAG,CACd,CACP;UACD,YAAM,KAAK,EAAE,gBAAgB,CAAC,KAAK,IAAG,KAAK,CAAQ;UAElD,SAAS,IAAI,CACb,YAAM,KAAK,EAAE,gBAAgB,CAAC,KAAK;YAClC,gBAAU,IAAI,EAAC,cAAc,GAAY,CACnC,CACP,CACO,CACJ,CACN;MAEA,SAAS,IAAI,CACb,WAAK,KAAK,EAAE,gBAAgB,CAAC,OAAO;QACnC,eAAQ,CACH,CACN,CACK,CACP,CAAA;EACF,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,IAAI;IACT,IAAI,CAAC,eAAe,GAAG,IAAI,CAAA;IAC3B,IAAI,CAAC,WAAW,EAAE,CAAA;EACnB,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,KAAK;IACV,IAAI,CAAC,eAAe,GAAG,KAAK,CAAA;IAC5B,IAAI,CAAC,WAAW,EAAE,CAAA;EACnB,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,MAAM;IACX,IAAI,CAAC,eAAe,GAAG,CAAC,IAAI,CAAC,eAAe,CAAA;IAC5C,IAAI,CAAC,WAAW,EAAE,CAAA;EACnB,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,YAAY;IACjB,OAAO,IAAI,CAAC,eAAe,CAAA;EAC5B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, h, Prop, State, Watch, Host, Method, Event, EventEmitter } from '@stencil/core'\nimport { govErrorLog } from '../../helpers/Log/gov.log'\nimport { SideNavItemClass } from './constants'\nimport { booleanString, prepareClasses } from '../../helpers/Dom/template'\nimport { GovSideNavItemChangeEvent } from './gov-side-nav-item.d'\nimport { govHost } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.types'\n\n@Component({\n\ttag: 'gov-side-nav-item',\n\tstyleUrl: 'gov-side-nav-item.scss',\n})\nexport class GovSideNavItem {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() readonly host: HTMLGovSideNavItemElement\n\t@State() isExpandedState: boolean\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 * Custom sidenav item identifier. Otherwise, it will be generated\n\t */\n\t@Prop() readonly identifier: string\n\t/**\n\t * Defined the count of nested items\n\t */\n\t@Prop() readonly count: boolean = false\n\t/**\n\t * Item name of the sidenav\n\t */\n\t@Prop() readonly label: string\n\t/**\n\t * Makes the button component disabled.\n\t * This prevents users from being able to interact with the button, and conveys its inactive state to assistive technologies.\n\t */\n\t@Prop() readonly disabled: boolean = false\n\t/**\n\t * Same as original parameter\n\t * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-href\n\t */\n\t@Prop() readonly href: string\n\t/**\n\t * Defines whether the sidenav is open or closed by button\n\t */\n\t@Prop({ attribute: 'is-expanded' }) readonly isExpanded: boolean = false\n\t/**\n\t * Called when the sidenav state changes\n\t */\n\t@Event({ eventName: 'gov-change' }) govChange: EventEmitter<GovSideNavItemChangeEvent>\n\n\t@Watch('label')\n\tvalidateLabel(newValue: string): void {\n\t\tif (!newValue) {\n\t\t\tgovErrorLog(`[${SideNavItemClass.root}]: Parameter label is required.`)\n\t\t}\n\t}\n\n\tprivate emmitChange(): void {\n\t\tthis.govChange.emit({ open: this.isExpandedState, element: this.host })\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.isExpandedState = this.isExpanded\n\t\tthis.validateLabel(this.label)\n\t}\n\n\tget classNames(): string {\n\t\tconst { h } = this\n\n\t\treturn prepareClasses([SideNavItemClass.root, h.hasSlot('icon') && SideNavItemClass.rootWithIcon])\n\t}\n\n\trender() {\n\t\tconst { isExpandedState, label } = this\n\t\t// TODO: správný počet zanořených childů\n\t\tconst hasChilds = this.host.children.length > 1\n\n\t\treturn (\n\t\t\t<Host class={this.classNames} role=\"listitem\" inverse={this.inverse} aria-expanded={booleanString(isExpandedState)}>\n\t\t\t\t{this.href ? (\n\t\t\t\t\t<div class={SideNavItemClass.header}>\n\t\t\t\t\t\t<a class={SideNavItemClass.name} href={this.href}>\n\t\t\t\t\t\t\t{this.h.hasSlot('icon') && (\n\t\t\t\t\t\t\t\t<span class={SideNavItemClass.icon}>\n\t\t\t\t\t\t\t\t\t<slot name=\"icon\" />\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<span class={SideNavItemClass.label}>{label}</span>\n\n\t\t\t\t\t\t\t{this.count && (\n\t\t\t\t\t\t\t\t<span class={SideNavItemClass.chip}>\n\t\t\t\t\t\t\t\t\t<gov-chip variant=\"secondary\" size=\"s\" inverse={this.inverse}>\n\t\t\t\t\t\t\t\t\t\t{/* // TODO: správný počet zanořených childů */}3\n\t\t\t\t\t\t\t\t\t</gov-chip>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</a>\n\n\t\t\t\t\t\t{hasChilds && (\n\t\t\t\t\t\t\t<button type=\"button\" class={SideNavItemClass.arrow} onClick={() => this.toggle()}>\n\t\t\t\t\t\t\t\t<gov-icon name=\"chevron-down\"></gov-icon>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t) : (\n\t\t\t\t\t<div class={SideNavItemClass.header}>\n\t\t\t\t\t\t<button class={SideNavItemClass.name} type=\"button\" onClick={() => this.toggle()}>\n\t\t\t\t\t\t\t{this.h.hasSlot('icon') && (\n\t\t\t\t\t\t\t\t<span class={SideNavItemClass.icon}>\n\t\t\t\t\t\t\t\t\t<slot name=\"icon\" />\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<span class={SideNavItemClass.label}>{label}</span>\n\n\t\t\t\t\t\t\t{hasChilds && (\n\t\t\t\t\t\t\t\t<span class={SideNavItemClass.arrow}>\n\t\t\t\t\t\t\t\t\t<gov-icon name=\"chevron-down\"></gov-icon>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\n\t\t\t\t{hasChilds && (\n\t\t\t\t\t<div class={SideNavItemClass.content}>\n\t\t\t\t\t\t<slot />\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 * Opening the sidenav\n\t */\n\t@Method()\n\tasync open(): Promise<void> {\n\t\tthis.isExpandedState = true\n\t\tthis.emmitChange()\n\t}\n\n\t/**\n\t * Closing the sidenav\n\t */\n\t@Method()\n\tasync close(): Promise<void> {\n\t\tthis.isExpandedState = false\n\t\tthis.emmitChange()\n\t}\n\n\t/**\n\t * sidenav switch\n\t */\n\t@Method()\n\tasync toggle(): Promise<void> {\n\t\tthis.isExpandedState = !this.isExpandedState\n\t\tthis.emmitChange()\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"]}

package/dist/collection/components/gov-side-nav/gov-side-nav.css

@@ -39,7 +39,7 @@
 /* stylelint-disable order/order */
 /* stylelint-enable order/order */
 /**
-* Generates CSS3 var with default value
+* Generates CSS3 var with button value
 */
 /*
  -  Variables - General
@@ -70,7 +70,7 @@
  -  Variables - Backdrop
  */
 /*
- -  Variables - Buttons (&& Badges)
+ -  Variables - Buttons (&& Chips)
  */
 /*
  -  Variables - Breadcrumbs
@@ -190,6 +190,9 @@
 /*
  -  Variables - Layout
  */
+/*
+ -  Variables - Tag
+ */
 .gov-spin-animation,
 .gov-pseudo-spin-animation::before {
   animation: spin 4s linear infinite;

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

@@ -39,7 +39,7 @@
 /* stylelint-disable order/order */
 /* stylelint-enable order/order */
 /**
-* Generates CSS3 var with default value
+* Generates CSS3 var with button value
 */
 /*
  -  Variables - General
@@ -70,7 +70,7 @@
  -  Variables - Backdrop
  */
 /*
- -  Variables - Buttons (&& Badges)
+ -  Variables - Buttons (&& Chips)
  */
 /*
  -  Variables - Breadcrumbs
@@ -190,6 +190,9 @@
 /*
  -  Variables - Layout
  */
+/*
+ -  Variables - Tag
+ */
 .gov-spin-animation,
 .gov-pseudo-spin-animation::before {
   animation: spin 4s linear infinite;

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

@@ -39,7 +39,7 @@
 /* stylelint-disable order/order */
 /* stylelint-enable order/order */
 /**
-* Generates CSS3 var with default value
+* Generates CSS3 var with button value
 */
 /*
  -  Variables - General
@@ -70,7 +70,7 @@
  -  Variables - Backdrop
  */
 /*
- -  Variables - Buttons (&& Badges)
+ -  Variables - Buttons (&& Chips)
  */
 /*
  -  Variables - Breadcrumbs
@@ -190,6 +190,9 @@
 /*
  -  Variables - Layout
  */
+/*
+ -  Variables - Tag
+ */
 .gov-spin-animation,
 .gov-pseudo-spin-animation::before {
   animation: spin 4s linear infinite;

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

@@ -39,7 +39,7 @@
 /* stylelint-disable order/order */
 /* stylelint-enable order/order */
 /**
-* Generates CSS3 var with default value
+* Generates CSS3 var with button value
 */
 /*
  -  Variables - General
@@ -70,7 +70,7 @@
  -  Variables - Backdrop
  */
 /*
- -  Variables - Buttons (&& Badges)
+ -  Variables - Buttons (&& Chips)
  */
 /*
  -  Variables - Breadcrumbs
@@ -190,6 +190,9 @@
 /*
  -  Variables - Layout
  */
+/*
+ -  Variables - Tag
+ */
 .gov-spin-animation,
 .gov-pseudo-spin-animation::before {
   animation: spin 4s linear infinite;

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

@@ -39,7 +39,7 @@
 /* stylelint-disable order/order */
 /* stylelint-enable order/order */
 /**
-* Generates CSS3 var with default value
+* Generates CSS3 var with button value
 */
 /*
  -  Variables - General
@@ -70,7 +70,7 @@
  -  Variables - Backdrop
  */
 /*
- -  Variables - Buttons (&& Badges)
+ -  Variables - Buttons (&& Chips)
  */
 /*
  -  Variables - Breadcrumbs
@@ -190,6 +190,9 @@
 /*
  -  Variables - Layout
  */
+/*
+ -  Variables - Tag
+ */
 .gov-spin-animation,
 .gov-pseudo-spin-animation::before {
   animation: spin 4s linear infinite;

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

@@ -39,7 +39,7 @@
 /* stylelint-disable order/order */
 /* stylelint-enable order/order */
 /**
-* Generates CSS3 var with default value
+* Generates CSS3 var with button value
 */
 /*
  -  Variables - General
@@ -70,7 +70,7 @@
  -  Variables - Backdrop
  */
 /*
- -  Variables - Buttons (&& Badges)
+ -  Variables - Buttons (&& Chips)
  */
 /*
  -  Variables - Breadcrumbs
@@ -190,6 +190,9 @@
 /*
  -  Variables - Layout
  */
+/*
+ -  Variables - Tag
+ */
 .gov-spin-animation,
 .gov-pseudo-spin-animation::before {
   animation: spin 4s linear infinite;

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

@@ -4,7 +4,7 @@ export const TabVariants = pick(Variants, ['PRIMARY', 'SECONDARY', 'SUCCESS', 'E
 export var TabTypes;
 (function (TabTypes) {
   TabTypes["TEXT"] = "text";
-  TabTypes["BADGE"] = "badge";
+  TabTypes["CHIP"] = "chip";
 })(TabTypes || (TabTypes = {}));
 export var TabOrientation;
 (function (TabOrientation) {

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

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../src/components/gov-tabs/constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAA;AAGxC,MAAM,CAAC,MAAM,WAAW,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,CAAC,CAAC,CAAA;AAGlG,MAAM,CAAN,IAAY,QAGX;AAHD,WAAY,QAAQ;EACnB,yBAAa,CAAA;EACb,2BAAe,CAAA;AAChB,CAAC,EAHW,QAAQ,KAAR,QAAQ,QAGnB;AAID,MAAM,CAAN,IAAY,cAGX;AAHD,WAAY,cAAc;EACzB,2CAAyB,CAAA;EACzB,uCAAqB,CAAA;AACtB,CAAC,EAHW,cAAc,KAAd,cAAc,QAGzB;AAID,MAAM,CAAC,MAAM,SAAS,GAAG;EACxB,IAAI,EAAE,UAAU;EAChB,IAAI,EAAE,gBAAgB;EACtB,IAAI,EAAE,gBAAgB;EACtB,IAAI,EAAE,gBAAgB;EACtB,GAAG,EAAE,eAAe;CACpB,CAAA;AAED,MAAM,CAAC,MAAM,aAAa,GAAG;EAC5B,IAAI,EAAE,eAAe;EACrB,KAAK,EAAE,sBAAsB;CAC7B,CAAA","sourcesContent":["import { Variants } from '../../core/constants/variants'\nimport { pick } from '../../utils/utils'\nimport { ValueOf } from '../../types/interfaces'\n\nexport const TabVariants = pick(Variants, ['PRIMARY', 'SECONDARY', 'SUCCESS', 'ERROR', 'WARNING'])\nexport type VariantType = `${ValueOf<typeof TabVariants>}`\n\nexport enum TabTypes {\n\tTEXT = 'text',\n\tBADGE = 'badge',\n}\n\nexport type TabType = `${ValueOf<typeof TabTypes>}`\n\nexport enum TabOrientation {\n\tHORIZONTAL = 'horizontal',\n\tVERTICAL = 'vertical',\n}\n\nexport type TabOrientationType = `${ValueOf<typeof TabOrientation>}`\n\nexport const TabsClass = {\n\troot: 'gov-tabs',\n\ttabs: 'gov-tabs__tabs',\n\tlist: 'gov-tabs__list',\n\titem: 'gov-tabs__item',\n\tbtn: 'gov-tabs__btn',\n}\n\nexport const TabsItemClass = {\n\troot: 'gov-tabs-item',\n\tinner: 'gov-tabs-item__inner',\n}\n"]}
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../src/components/gov-tabs/constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAA;AAGxC,MAAM,CAAC,MAAM,WAAW,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,CAAC,CAAC,CAAA;AAGlG,MAAM,CAAN,IAAY,QAGX;AAHD,WAAY,QAAQ;EACnB,yBAAa,CAAA;EACb,yBAAa,CAAA;AACd,CAAC,EAHW,QAAQ,KAAR,QAAQ,QAGnB;AAID,MAAM,CAAN,IAAY,cAGX;AAHD,WAAY,cAAc;EACzB,2CAAyB,CAAA;EACzB,uCAAqB,CAAA;AACtB,CAAC,EAHW,cAAc,KAAd,cAAc,QAGzB;AAID,MAAM,CAAC,MAAM,SAAS,GAAG;EACxB,IAAI,EAAE,UAAU;EAChB,IAAI,EAAE,gBAAgB;EACtB,IAAI,EAAE,gBAAgB;EACtB,IAAI,EAAE,gBAAgB;EACtB,GAAG,EAAE,eAAe;CACpB,CAAA;AAED,MAAM,CAAC,MAAM,aAAa,GAAG;EAC5B,IAAI,EAAE,eAAe;EACrB,KAAK,EAAE,sBAAsB;CAC7B,CAAA","sourcesContent":["import { Variants } from '../../core/constants/variants'\nimport { pick } from '../../utils/utils'\nimport { ValueOf } from '../../types/interfaces'\n\nexport const TabVariants = pick(Variants, ['PRIMARY', 'SECONDARY', 'SUCCESS', 'ERROR', 'WARNING'])\nexport type VariantType = `${ValueOf<typeof TabVariants>}`\n\nexport enum TabTypes {\n\tTEXT = 'text',\n\tCHIP = 'chip',\n}\n\nexport type TabType = `${ValueOf<typeof TabTypes>}`\n\nexport enum TabOrientation {\n\tHORIZONTAL = 'horizontal',\n\tVERTICAL = 'vertical',\n}\n\nexport type TabOrientationType = `${ValueOf<typeof TabOrientation>}`\n\nexport const TabsClass = {\n\troot: 'gov-tabs',\n\ttabs: 'gov-tabs__tabs',\n\tlist: 'gov-tabs__list',\n\titem: 'gov-tabs__item',\n\tbtn: 'gov-tabs__btn',\n}\n\nexport const TabsItemClass = {\n\troot: 'gov-tabs-item',\n\tinner: 'gov-tabs-item__inner',\n}\n"]}

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

@@ -39,7 +39,7 @@
 /* stylelint-disable order/order */
 /* stylelint-enable order/order */
 /**
-* Generates CSS3 var with default value
+* Generates CSS3 var with button value
 */
 /*
  -  Variables - General
@@ -70,7 +70,7 @@
  -  Variables - Backdrop
  */
 /*
- -  Variables - Buttons (&& Badges)
+ -  Variables - Buttons (&& Chips)
  */
 /*
  -  Variables - Breadcrumbs
@@ -190,6 +190,9 @@
 /*
  -  Variables - Layout
  */
+/*
+ -  Variables - Tag
+ */
 .gov-spin-animation,
 .gov-pseudo-spin-animation::before {
   animation: spin 4s linear infinite;

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

@@ -11,10 +11,10 @@ export class GovTabsItem {
     this.isActive = false;
     this.h = govHost(this.host);
     this.contentId = createID('GovTabContent');
-    this.triggeId = createID('GovTabTrigger');
+    this.triggerId = createID('GovTabTrigger');
   }
   render() {
-    return (h(Host, { class: this.h.classes(TabsItemClass.root), default: this.default }, h("div", { class: TabsItemClass.inner, role: "tabpanel", id: this.identifier || this.contentId, hidden: !this.isActive, "aria-labelledby": this.triggerIdentifier || this.triggeId, "aria-hidden": toBoolAttrIfDefined(!this.isActive) }, h("slot", null))));
+    return (h(Host, { class: this.h.classes(TabsItemClass.root), default: this.default }, h("div", { class: TabsItemClass.inner, role: "tabpanel", id: this.identifier || this.contentId, hidden: !this.isActive, "aria-labelledby": this.triggerIdentifier || this.triggerId, "aria-hidden": toBoolAttrIfDefined(!this.isActive) }, h("slot", null))));
   }
   /**
    * Returns a unique tab content identifier
@@ -26,7 +26,7 @@ export class GovTabsItem {
    * Returns a unique tab trigger identifier
    */
   async getTriggerIdentifier() {
-    return this.triggerIdentifier || this.triggeId;
+    return this.triggerIdentifier || this.triggerId;
   }
   /**
    * Set status of tab-item
@@ -96,7 +96,7 @@ export class GovTabsItem {
           "text": "Item name of the tab"
         },
         "attribute": "label",
-        "reflect": false
+        "reflect": true
       },
       "default": {
         "type": "boolean",

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

@@ -1 +1 @@
-{"version":3,"file":"gov-tabs-item.js","sourceRoot":"","sources":["../../../../../../src/components/gov-tabs/gov-tabs-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAChF,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AACnD,OAAO,EAAE,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAA;AAEzE,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAM3C,MAAM,OAAO,WAAW;EAKvB;;;;mBAsBoC,KAAK;oBACrB,KAAK;IAtBxB,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAC3B,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAA;IAC1C,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAA;GACzC;EAqBD,MAAM;IACL,OAAO,CACN,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO;MACrE,WACC,KAAK,EAAE,aAAa,CAAC,KAAK,EAC1B,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,SAAS,EACrC,MAAM,EAAE,CAAC,IAAI,CAAC,QAAQ,qBACL,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,QAAQ,iBAC3C,mBAAmB,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC;QAEhD,eAAa,CACR,CACA,CACP,CAAA;EACF,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,aAAa;IAClB,OAAO,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,SAAS,CAAA;EACzC,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,oBAAoB;IACzB,OAAO,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,QAAQ,CAAA;EAC/C,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,eAAe,CAAC,MAAe;IACpC,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAA;EACvB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, h, Prop, Method, State, Host } from '@stencil/core'\nimport { createID } from '../../utils/string.utils'\nimport { govHost, toBoolAttrIfDefined } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.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,"file":"gov-tabs-item.js","sourceRoot":"","sources":["../../../../../../src/components/gov-tabs/gov-tabs-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAChF,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AACnD,OAAO,EAAE,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAA;AAEzE,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAM3C,MAAM,OAAO,WAAW;EAKvB;;;;mBAsBoC,KAAK;oBACrB,KAAK;IAtBxB,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAC3B,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAA;IAC1C,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAA;GAC1C;EAqBD,MAAM;IACL,OAAO,CACN,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO;MACrE,WACC,KAAK,EAAE,aAAa,CAAC,KAAK,EAC1B,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,SAAS,EACrC,MAAM,EAAE,CAAC,IAAI,CAAC,QAAQ,qBACL,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,SAAS,iBAC5C,mBAAmB,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC;QAEhD,eAAa,CACR,CACA,CACP,CAAA;EACF,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,aAAa;IAClB,OAAO,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,SAAS,CAAA;EACzC,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,oBAAoB;IACzB,OAAO,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,SAAS,CAAA;EAChD,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,eAAe,CAAC,MAAe;IACpC,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAA;EACvB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, h, Prop, Method, State, Host } from '@stencil/core'\nimport { createID } from '../../utils/string.utils'\nimport { govHost, toBoolAttrIfDefined } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.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 triggerId: string\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.contentId = createID('GovTabContent')\n\t\tthis.triggerId = 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({reflect: true}) 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.triggerId}\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.triggerId\n\t}\n\n\t/**\n\t * Set status of tab-item\n\t */\n\t@Method()\n\tasync setActiveStatus(status: boolean): Promise<void> {\n\t\tthis.isActive = status\n\t}\n}\n"]}

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

@@ -53,7 +53,7 @@
 /* stylelint-disable order/order */
 /* stylelint-enable order/order */
 /**
-* Generates CSS3 var with default value
+* Generates CSS3 var with button value
 */
 /*
  -  Variables - General
@@ -84,7 +84,7 @@
  -  Variables - Backdrop
  */
 /*
- -  Variables - Buttons (&& Badges)
+ -  Variables - Buttons (&& Chips)
  */
 /*
  -  Variables - Breadcrumbs
@@ -204,6 +204,9 @@
 /*
  -  Variables - Layout
  */
+/*
+ -  Variables - Tag
+ */
 .gov-spin-animation,
 .gov-pseudo-spin-animation::before {
   animation: spin 4s linear infinite;
@@ -277,7 +280,6 @@
   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 {
@@ -295,7 +297,7 @@
   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 {
+.gov-tabs[type=chip] .gov-tabs__list {
   gap: 0.5rem 1rem;
 }
 .gov-tabs[variant=primary][type=text] .gov-tabs__btn {
@@ -307,8 +309,8 @@
   }
 }
 .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));
+  border-bottom-color: var(--gov-tabs-primary-color-active, var(--gov-color-primary-800));
+  color: var(--gov-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));
@@ -319,8 +321,8 @@
   }
 }
 .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));
+  border-bottom-color: var(--gov-tabs-secondary-color-active, var(--gov-color-secondary-900));
+  color: var(--gov-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));
@@ -331,8 +333,8 @@
   }
 }
 .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));
+  border-bottom-color: var(--gov-tabs-success-color-active, var(--gov-color-success-700));
+  color: var(--gov-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));
@@ -343,8 +345,8 @@
   }
 }
 .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));
+  border-bottom-color: var(--gov-tabs-warning-color-active, var(--gov-color-warning-700));
+  color: var(--gov-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));
@@ -355,8 +357,8 @@
   }
 }
 .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));
+  border-bottom-color: var(--gov-tabs-error-color-active, var(--gov-color-error-600));
+  color: var(--gov-tabs-error-color-active, var(--gov-color-error-600));
 }
 .gov-tabs[orientation=vertical] .gov-tabs__btn {
   text-align: left;

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

@@ -1,9 +1,8 @@
-import { Host, h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { validateProp } from "../../helpers/Validate/props";
-import { TabsItemClass, TabVariants } from "./constants";
+import { TabsClass, TabsItemClass, TabTypes, TabVariants } from "./constants";
 import { govHost, toBoolAttr } from "../../helpers/Dom/template";
 import { validateWcagLabel, validateWcagProp } from "../../helpers/Validate/wcag";
-import { TabsClass, TabTypes } from "./constants";
 import { canValidateWcagOnRender } from "../../helpers/Dom/win";
 import { delay, throttle } from "../../utils/utils";
 import { createID } from "../../utils/string.utils";
@@ -13,14 +12,14 @@ export class GovTabs {
     this.controller = [];
     this.focusIndex = 0;
     this.compactControls = false;
-    this.type = 'text';
-    this.variant = 'primary';
-    this.orientation = 'horizontal';
+    this.type = "text";
+    this.variant = "primary";
+    this.orientation = "horizontal";
     this.wcagLabel = undefined;
     this.wcagSelectLabel = undefined;
     this.wcagLabelledBy = undefined;
     this.h = govHost(this.host);
-    this.formSelectId = createID('GovForSelect');
+    this.formSelectId = createID("GovFormSelect");
   }
   validateType(newValue) {
     validateProp(TabTypes, newValue, TabsClass.root);
@@ -42,10 +41,13 @@ export class GovTabs {
     this.controller = [];
     const promises = [];
     this.host.querySelectorAll(TabsItemClass.root).forEach((tab) => {
-      const controlItem = Promise.all([tab.getIdentifier(), tab.getTriggerIdentifier()]).then(([identifier, triggerIdentifier]) => {
-        const isDefault = typeof tab.getAttribute('default') === 'string';
+      const controlItem = Promise.all([
+        tab.getIdentifier(),
+        tab.getTriggerIdentifier(),
+      ]).then(([identifier, triggerIdentifier]) => {
+        const isDefault = typeof tab.getAttribute("default") === "string";
         return {
-          label: tab.getAttribute('label'),
+          label: tab.getAttribute("label"),
           contentIdentifier: identifier,
           triggerIdentifier: triggerIdentifier,
           element: tab,
@@ -92,7 +94,7 @@ export class GovTabs {
     resizeObserver.observe(this.tabsRef);
   }
   render() {
-    return (h(Host, { class: this.h.classes(TabsClass.root), variant: this.variant, type: this.type, role: "tablist", ref: el => (this.tabsRef = el), "aria-label": this.wcagLabel, "aria-labelledby": this.wcagLabelledBy, onKeyDown: this.onKeydownHandler.bind(this) }, h("div", { class: TabsClass.tabs, "aria-hidden": toBoolAttr(this.compactControls) }, h("ul", { class: TabsClass.list }, this.controller.map((control, index) => (h("li", { class: TabsClass.item }, this.type == 'text' ? (h("button", { class: TabsClass.btn, id: control.triggerIdentifier, role: "tab", onClick: () => this.onSelectHandler(control, index), "aria-selected": toBoolAttr(control.active), "aria-controls": control.contentIdentifier, tabindex: control.active ? -1 : 0, ref: el => (this.triggerRefs[control.triggerIdentifier] = el) }, control.label)) : (h("gov-badge", { variant: this.variant, inverse: control.active, "on-gov-click": () => this.onSelectHandler(control, index) }, control.label))))))), h("span", { id: this.formSelectId, hidden: true }, this.wcagSelectLabel), this.compactControls ? (h("gov-form-select", { "wcag-labelled-by": this.formSelectId, "onGov-change": this.onChangeHandler.bind(this) }, this.controller.map(control => (h("option", { value: control.triggerIdentifier, selected: control.active }, control.label))))) : null, h("slot", null)));
+    return (h(Host, { class: this.h.classes(TabsClass.root), variant: this.variant, type: this.type, role: "tablist", ref: el => (this.tabsRef = el), "aria-label": this.wcagLabel, "aria-labelledby": this.wcagLabelledBy, onKeyDown: this.onKeydownHandler.bind(this) }, h("div", { class: TabsClass.tabs, "aria-hidden": toBoolAttr(this.compactControls) }, h("ul", { class: TabsClass.list }, this.controller.map((control, index) => (h("li", { class: TabsClass.item }, this.type == "text" ? (h("button", { class: TabsClass.btn, id: control.triggerIdentifier, role: "tab", onClick: () => this.onSelectHandler(control, index), "aria-selected": toBoolAttr(control.active), "aria-controls": control.contentIdentifier, tabindex: control.active ? 0 : -1, ref: el => (this.triggerRefs[control.triggerIdentifier] = el) }, control.label)) : (h("gov-chip", { role: "tab", tag: 'button', identifier: control.triggerIdentifier, "wcag-selected": control.active, "wcag-controls": control.contentIdentifier, focusable: control.active, variant: this.variant, inverse: !control.active, ref: el => (this.triggerRefs[control.triggerIdentifier] = el), "on-gov-click": () => this.onSelectHandler(control, index) }, control.label))))))), h("span", { id: this.formSelectId, hidden: true }, this.wcagSelectLabel), this.compactControls ? (h("gov-form-select", { "wcag-labelled-by": this.formSelectId, "onGov-change": this.onChangeHandler.bind(this) }, this.controller.map(control => (h("option", { value: control.triggerIdentifier, selected: control.active }, control.label))))) : null, h("slot", null)));
   }
   getCurrentTab() {
     return this.controller.find(control => control.active) || null;
@@ -113,18 +115,18 @@ export class GovTabs {
   onKeydownHandler(e) {
     const keyCode = e.keyCode;
     e.stopPropagation();
-    if (keyCode === 39 || keyCode === 37) {
+    if ([37, 38, 39, 40].includes(keyCode)) {
       if (false === (this.focusIndex >= 0 && this.focusIndex <= this.controller.length - 1)) {
         return;
       }
       this.controller[this.focusIndex].active = false;
-      if (keyCode === 39) {
+      if (keyCode === 39 || keyCode === 40) {
         this.focusIndex++;
         if (this.focusIndex >= this.controller.length) {
           this.focusIndex = 0;
         }
       }
-      else if (keyCode === 37) {
+      else if (keyCode === 37 || keyCode === 38) {
         this.focusIndex--;
         if (this.focusIndex < 0) {
           this.focusIndex = this.controller.length - 1;
@@ -133,7 +135,13 @@ export class GovTabs {
       if (this.focusIndex >= 0 && this.focusIndex <= this.controller.length - 1) {
         const current = this.controller[this.focusIndex];
         current.active = true;
-        this.triggerRefs[current.triggerIdentifier].focus();
+        const trigger = this.triggerRefs[current.triggerIdentifier];
+        if (trigger.nodeName.toLowerCase() === 'gov-chip') {
+          this.triggerRefs[current.triggerIdentifier].setFocus();
+        }
+        else {
+          this.triggerRefs[current.triggerIdentifier].focus();
+        }
         this.controller = [...this.controller];
         this.reRender();
         this.govChange.emit(this.getCurrentTab().element);
@@ -163,7 +171,7 @@ export class GovTabs {
    * Validate the WCAG attributes of the component
    */
   async validateWcag() {
-    validateWcagProp(this.wcagSelectLabel, 'wcag-select-label', TabsClass.root);
+    validateWcagProp(this.wcagSelectLabel, "wcag-select-label", TabsClass.root);
     validateWcagLabel(this.wcagLabel, this.wcagLabelledBy, TabsClass.root);
   }
   static get is() { return "gov-tabs"; }
@@ -184,7 +192,7 @@ export class GovTabs {
         "mutable": false,
         "complexType": {
           "original": "TabType",
-          "resolved": "\"badge\" | \"text\"",
+          "resolved": "\"chip\" | \"text\"",
           "references": {
             "TabType": {
               "location": "import",
@@ -201,7 +209,7 @@ export class GovTabs {
         },
         "attribute": "type",
         "reflect": false,
-        "defaultValue": "'text'"
+        "defaultValue": "\"text\""
       },
       "variant": {
         "type": "string",
@@ -221,11 +229,11 @@ export class GovTabs {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Style variation of the tab badges."
+          "text": "Style variation of the tab chips."
         },
         "attribute": "variant",
         "reflect": false,
-        "defaultValue": "'primary'"
+        "defaultValue": "\"primary\""
       },
       "orientation": {
         "type": "string",
@@ -249,7 +257,7 @@ export class GovTabs {
         },
         "attribute": "orientation",
         "reflect": false,
-        "defaultValue": "'horizontal'"
+        "defaultValue": "\"horizontal\""
       },
       "wcagLabel": {
         "type": "string",