@gov-design-system-ce/components 0.0.6 → 0.0.8

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

@@ -148,6 +148,9 @@
 /*
  -	Variables - Form multiselect
  */
+/*
+ -	Variables - Form password power
+ */
 /*
  -	Variables - Form checkbox & radio
  */

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

@@ -17,7 +17,7 @@ export class GovAttachmentsItem {
     }
   }
   render() {
-    return (h(Host, { class: this.h.classes(AttachmentsItemClass.root), role: "listitem" }, h("div", { class: AttachmentsItemClass.file }, h("p", { class: AttachmentsItemClass.name }, h("slot", null), h("slot", { name: "info" })), h("gov-button", { variant: "primary", type: "base", size: "s", "wcag-label": this.wcagRemoveLabel, "wcag-labelled-by": this.wcagRemoveLabelledBy, "on-gov-click": this.govRemove.emit }, h("gov-icon", { slot: "left-icon", name: "cross" }))), this.h.hasSlot('message') && (h("div", { class: AttachmentsItemClass.messages }, h("slot", { name: "message" })))));
+    return (h(Host, { class: this.h.classes(AttachmentsItemClass.root), role: "listitem" }, h("div", { class: AttachmentsItemClass.file }, h("p", { class: AttachmentsItemClass.name }, h("slot", null), h("slot", { name: "info" })), h("gov-button", { variant: "primary", type: "base", size: "s", "wcag-label": this.wcagRemoveLabel, "wcag-labelled-by": this.wcagRemoveLabelledBy, "on-gov-click": this.govRemove.emit }, h("gov-icon", { slot: "left-icon", name: "x-lg" }))), this.h.hasSlot('message') && (h("div", { class: AttachmentsItemClass.messages }, h("slot", { name: "message" })))));
   }
   /**
    * Validate the WCAG attributes of the component

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

@@ -1 +1 @@
-{"version":3,"file":"gov-attachments-item.js","sourceRoot":"","sources":["../../../../../../src/components/gov-attachments/gov-attachments-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAC9F,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAA;AAC/D,OAAO,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAA;AAC/D,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAOpD,MAAM,OAAO,kBAAkB;EAG9B;;;IACC,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EAiBD,KAAK,CAAC,kBAAkB;IACvB,IAAI,uBAAuB,EAAE,EAAE;MAC9B,MAAM,KAAK,CAAC,GAAG,CAAC,CAAA;MAChB,MAAM,IAAI,CAAC,YAAY,EAAE,CAAA;KACzB;EACF,CAAC;EAED,MAAM;IACL,OAAO,CACN,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,oBAAoB,CAAC,IAAI,CAAC,EAAE,IAAI,EAAC,UAAU;MACtE,WAAK,KAAK,EAAE,oBAAoB,CAAC,IAAI;QACpC,SAAG,KAAK,EAAE,oBAAoB,CAAC,IAAI;UAClC,eAAQ;UACR,YAAM,IAAI,EAAC,MAAM,GAAG,CACjB;QACJ,kBACC,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,GAAG,gBACI,IAAI,CAAC,eAAe,sBACd,IAAI,CAAC,oBAAoB,kBAC7B,IAAI,CAAC,SAAS,CAAC,IAAI;UAEjC,gBAAU,IAAI,EAAC,WAAW,EAAC,IAAI,EAAC,OAAO,GAAY,CACvC,CACR;MAEL,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAC7B,WAAK,KAAK,EAAE,oBAAoB,CAAC,QAAQ;QACxC,YAAM,IAAI,EAAC,SAAS,GAAG,CAClB,CACN,CACK,CACP,CAAA;EACF,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,YAAY;IACjB,iBAAiB,CAAC,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,oBAAoB,EAAE,oBAAoB,CAAC,IAAI,CAAC,CAAA;EAC9F,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core'\nimport { AttachmentsItemClass } from './constants'\nimport { validateWcagLabel } from '../../helpers/Validate/wcag'\nimport { canValidateWcagOnRender } from '../../helpers/Dom/win'\nimport { delay } from '../../utils/utils'\nimport { govHost } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.types'\n\n@Component({\n\ttag: 'gov-attachments-item',\n\tstyleUrl: 'gov-attachments-item.scss',\n})\nexport class GovAttachmentsItem {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() readonly host: HTMLGovAttachmentsItemElement\n\n\t/**\n\t * Adds accessible label for the remove button that is only shown for screen readers.\n\t */\n\t@Prop({ attribute: 'wcag-remove-label' }) readonly wcagRemoveLabel: string\n\t/**\n\t * Indicates the id of a component that labels the remove button.\n\t */\n\t@Prop({ attribute: 'wcag-remove-labelled-by' }) readonly wcagRemoveLabelledBy: string\n\t/**\n\t * Emitted when the file is removed\n\t */\n\t@Event({ eventName: 'gov-remove' }) govRemove: EventEmitter<PointerEvent>\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={this.h.classes(AttachmentsItemClass.root)} role=\"listitem\">\n\t\t\t\t<div class={AttachmentsItemClass.file}>\n\t\t\t\t\t<p class={AttachmentsItemClass.name}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t<slot name=\"info\" />\n\t\t\t\t\t</p>\n\t\t\t\t\t<gov-button\n\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\ttype=\"base\"\n\t\t\t\t\t\tsize=\"s\"\n\t\t\t\t\t\twcag-label={this.wcagRemoveLabel}\n\t\t\t\t\t\twcag-labelled-by={this.wcagRemoveLabelledBy}\n\t\t\t\t\t\ton-gov-click={this.govRemove.emit}\n\t\t\t\t\t>\n\t\t\t\t\t\t<gov-icon slot=\"left-icon\" name=\"cross\"></gov-icon>\n\t\t\t\t\t</gov-button>\n\t\t\t\t</div>\n\n\t\t\t\t{this.h.hasSlot('message') && (\n\t\t\t\t\t<div class={AttachmentsItemClass.messages}>\n\t\t\t\t\t\t<slot name=\"message\" />\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 * Validate the WCAG attributes of the component\n\t */\n\t@Method()\n\tasync validateWcag(): Promise<void> {\n\t\tvalidateWcagLabel(this.wcagRemoveLabel, this.wcagRemoveLabelledBy, AttachmentsItemClass.root)\n\t}\n}\n"]}
+{"version":3,"file":"gov-attachments-item.js","sourceRoot":"","sources":["../../../../../../src/components/gov-attachments/gov-attachments-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAC9F,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAA;AAC/D,OAAO,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAA;AAC/D,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAOpD,MAAM,OAAO,kBAAkB;EAG9B;;;IACC,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EAiBD,KAAK,CAAC,kBAAkB;IACvB,IAAI,uBAAuB,EAAE,EAAE;MAC9B,MAAM,KAAK,CAAC,GAAG,CAAC,CAAA;MAChB,MAAM,IAAI,CAAC,YAAY,EAAE,CAAA;KACzB;EACF,CAAC;EAED,MAAM;IACL,OAAO,CACN,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,oBAAoB,CAAC,IAAI,CAAC,EAAE,IAAI,EAAC,UAAU;MACtE,WAAK,KAAK,EAAE,oBAAoB,CAAC,IAAI;QACpC,SAAG,KAAK,EAAE,oBAAoB,CAAC,IAAI;UAClC,eAAQ;UACR,YAAM,IAAI,EAAC,MAAM,GAAG,CACjB;QACJ,kBACC,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,GAAG,gBACI,IAAI,CAAC,eAAe,sBACd,IAAI,CAAC,oBAAoB,kBAC7B,IAAI,CAAC,SAAS,CAAC,IAAI;UAEjC,gBAAU,IAAI,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,GAAY,CACtC,CACR;MAEL,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAC7B,WAAK,KAAK,EAAE,oBAAoB,CAAC,QAAQ;QACxC,YAAM,IAAI,EAAC,SAAS,GAAG,CAClB,CACN,CACK,CACP,CAAA;EACF,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,YAAY;IACjB,iBAAiB,CAAC,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,oBAAoB,EAAE,oBAAoB,CAAC,IAAI,CAAC,CAAA;EAC9F,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core'\nimport { AttachmentsItemClass } from './constants'\nimport { validateWcagLabel } from '../../helpers/Validate/wcag'\nimport { canValidateWcagOnRender } from '../../helpers/Dom/win'\nimport { delay } from '../../utils/utils'\nimport { govHost } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.types'\n\n@Component({\n\ttag: 'gov-attachments-item',\n\tstyleUrl: 'gov-attachments-item.scss',\n})\nexport class GovAttachmentsItem {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() readonly host: HTMLGovAttachmentsItemElement\n\n\t/**\n\t * Adds accessible label for the remove button that is only shown for screen readers.\n\t */\n\t@Prop({ attribute: 'wcag-remove-label' }) readonly wcagRemoveLabel: string\n\t/**\n\t * Indicates the id of a component that labels the remove button.\n\t */\n\t@Prop({ attribute: 'wcag-remove-labelled-by' }) readonly wcagRemoveLabelledBy: string\n\t/**\n\t * Emitted when the file is removed\n\t */\n\t@Event({ eventName: 'gov-remove' }) govRemove: EventEmitter<PointerEvent>\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={this.h.classes(AttachmentsItemClass.root)} role=\"listitem\">\n\t\t\t\t<div class={AttachmentsItemClass.file}>\n\t\t\t\t\t<p class={AttachmentsItemClass.name}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t<slot name=\"info\" />\n\t\t\t\t\t</p>\n\t\t\t\t\t<gov-button\n\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\ttype=\"base\"\n\t\t\t\t\t\tsize=\"s\"\n\t\t\t\t\t\twcag-label={this.wcagRemoveLabel}\n\t\t\t\t\t\twcag-labelled-by={this.wcagRemoveLabelledBy}\n\t\t\t\t\t\ton-gov-click={this.govRemove.emit}\n\t\t\t\t\t>\n\t\t\t\t\t\t<gov-icon slot=\"left-icon\" name=\"x-lg\"></gov-icon>\n\t\t\t\t\t</gov-button>\n\t\t\t\t</div>\n\n\t\t\t\t{this.h.hasSlot('message') && (\n\t\t\t\t\t<div class={AttachmentsItemClass.messages}>\n\t\t\t\t\t\t<slot name=\"message\" />\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 * Validate the WCAG attributes of the component\n\t */\n\t@Method()\n\tasync validateWcag(): Promise<void> {\n\t\tvalidateWcagLabel(this.wcagRemoveLabel, this.wcagRemoveLabelledBy, AttachmentsItemClass.root)\n\t}\n}\n"]}

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

@@ -148,6 +148,9 @@
 /*
  -	Variables - Form multiselect
  */
+/*
+ -	Variables - Form password power
+ */
 /*
  -	Variables - Form checkbox & radio
  */

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

@@ -148,6 +148,9 @@
 /*
  -	Variables - Form multiselect
  */
+/*
+ -	Variables - Form password power
+ */
 /*
  -	Variables - Form checkbox & radio
  */

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

@@ -3,7 +3,7 @@ import { validateWcagLabel } from '../../helpers/Validate/wcag';
 import { BackdropClass } from './constants';
 import { canValidateWcagOnRender } from '../../helpers/Dom/win';
 import { delay } from '../../utils/utils';
-import { booleanString, govHost } from '../../helpers/Dom/template';
+import { govHost } from '../../helpers/Dom/template';
 export class GovBackdrop {
   constructor() {
     this.inverse = false;
@@ -19,9 +19,10 @@ export class GovBackdrop {
     }
   }
   render() {
-    if (!this.visible)
-      return null;
-    return (h(Host, { class: this.h.classes(BackdropClass.root), inverse: booleanString(this.inverse) }, h("div", { role: 'button', "aria-label": this.wcagLabel, "aria-labelledby": this.wcagLabelledBy, onClick: e => this.govClick.emit(e), class: BackdropClass.bg })));
+    if (this.visible === false) {
+      return (h(Host, { class: this.h.classes(BackdropClass.root) }));
+    }
+    return (h(Host, { class: this.h.classes(BackdropClass.root) }, h("div", { role: 'button', "aria-label": this.wcagLabel, "aria-labelledby": this.wcagLabelledBy, onClick: e => this.govClick.emit(e), class: BackdropClass.bg })));
   }
   /**
    * Validate the WCAG attributes of the component

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

@@ -1 +1 @@
-{"version":3,"file":"gov-backdrop.js","sourceRoot":"","sources":["../../../../../../src/components/gov-backdrop/gov-backdrop.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAC9F,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAA;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAC3C,OAAO,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAA;AAC/D,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACzC,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAOnE,MAAM,OAAO,WAAW;EAGvB;mBAQoC,KAAK;mBAIvB,KAAK;;;IAXtB,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EAwBD,KAAK,CAAC,kBAAkB;IACvB,IAAI,uBAAuB,EAAE,EAAE;MAC9B,MAAM,KAAK,CAAC,GAAG,CAAC,CAAA;MAChB,MAAM,IAAI,CAAC,YAAY,EAAE,CAAA;KACzB;EACF,CAAC;EAED,MAAM;IACL,IAAI,CAAC,IAAI,CAAC,OAAO;MAAE,OAAO,IAAI,CAAA;IAC9B,OAAO,CACN,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC;MACpF,WACC,IAAI,EAAE,QAAQ,gBACF,IAAI,CAAC,SAAS,qBACT,IAAI,CAAC,cAAc,EACpC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EACnC,KAAK,EAAE,aAAa,CAAC,EAAE,GACjB,CACD,CACP,CAAA;EACF,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,YAAY;IACjB,iBAAiB,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,cAAc,EAAE,aAAa,CAAC,IAAI,CAAC,CAAA;EAC3E,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Event, EventEmitter, h, Method, Prop, Host, Element } from '@stencil/core'\nimport { validateWcagLabel } from '../../helpers/Validate/wcag'\nimport { BackdropClass } from './constants'\nimport { canValidateWcagOnRender } from '../../helpers/Dom/win'\nimport { delay } from '../../utils/utils'\nimport { booleanString, govHost } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.types'\n\n@Component({\n\ttag: 'gov-backdrop',\n\tstyleUrl: 'gov-backdrop.scss',\n})\nexport class GovBackdrop {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovAlertElement\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 * Default attribute for backdrop display\n\t */\n\t@Prop() visible = false\n\t/**\n\t * Adds accessible label for the backdrop 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 * Emitted when button clicks.\n\t */\n\t@Event({ eventName: 'gov-click' }) govClick: EventEmitter<MouseEvent>\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\tif (!this.visible) return null\n\t\treturn (\n\t\t\t<Host class={this.h.classes(BackdropClass.root)} inverse={booleanString(this.inverse)}>\n\t\t\t\t<div\n\t\t\t\t\trole={'button'}\n\t\t\t\t\taria-label={this.wcagLabel}\n\t\t\t\t\taria-labelledby={this.wcagLabelledBy}\n\t\t\t\t\tonClick={e => this.govClick.emit(e)}\n\t\t\t\t\tclass={BackdropClass.bg}\n\t\t\t\t></div>\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, BackdropClass.root)\n\t}\n}\n"]}
+{"version":3,"file":"gov-backdrop.js","sourceRoot":"","sources":["../../../../../../src/components/gov-backdrop/gov-backdrop.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAC9F,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAA;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAC3C,OAAO,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAA;AAC/D,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAOpD,MAAM,OAAO,WAAW;EAGvB;mBAQoC,KAAK;mBAIvB,KAAK;;;IAXtB,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EAwBD,KAAK,CAAC,kBAAkB;IACvB,IAAI,uBAAuB,EAAE,EAAE;MAC9B,MAAM,KAAK,CAAC,GAAG,CAAC,CAAA;MAChB,MAAM,IAAI,CAAC,YAAY,EAAE,CAAA;KACzB;EACF,CAAC;EAED,MAAM;IACL,IAAI,IAAI,CAAC,OAAO,KAAK,KAAK,EAAE;MAC3B,OAAO,CAAC,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC,GAAI,CAAC,CAAA;KAC5D;IACD,OAAO,CACN,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC;MAC9C,WACC,IAAI,EAAE,QAAQ,gBACF,IAAI,CAAC,SAAS,qBACT,IAAI,CAAC,cAAc,EACpC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EACnC,KAAK,EAAE,aAAa,CAAC,EAAE,GACjB,CACD,CACP,CAAA;EACF,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,YAAY;IACjB,iBAAiB,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,cAAc,EAAE,aAAa,CAAC,IAAI,CAAC,CAAA;EAC3E,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Event, EventEmitter, h, Method, Prop, Host, Element } from '@stencil/core'\nimport { validateWcagLabel } from '../../helpers/Validate/wcag'\nimport { BackdropClass } from './constants'\nimport { canValidateWcagOnRender } from '../../helpers/Dom/win'\nimport { delay } from '../../utils/utils'\nimport { govHost } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.types'\n\n@Component({\n\ttag: 'gov-backdrop',\n\tstyleUrl: 'gov-backdrop.scss',\n})\nexport class GovBackdrop {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovAlertElement\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 * Default attribute for backdrop display\n\t */\n\t@Prop() visible = false\n\t/**\n\t * Adds accessible label for the backdrop 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 * Emitted when button clicks.\n\t */\n\t@Event({ eventName: 'gov-click' }) govClick: EventEmitter<MouseEvent>\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\tif (this.visible === false) {\n\t\t\treturn (<Host class={this.h.classes(BackdropClass.root)} />)\n\t\t}\n\t\treturn (\n\t\t\t<Host class={this.h.classes(BackdropClass.root)}>\n\t\t\t\t<div\n\t\t\t\t\trole={'button'}\n\t\t\t\t\taria-label={this.wcagLabel}\n\t\t\t\t\taria-labelledby={this.wcagLabelledBy}\n\t\t\t\t\tonClick={e => this.govClick.emit(e)}\n\t\t\t\t\tclass={BackdropClass.bg}\n\t\t\t\t></div>\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, BackdropClass.root)\n\t}\n}\n"]}

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

@@ -1,10 +1,13 @@
-var NativeType;
+export var NativeType;
 (function (NativeType) {
+  NativeType["A"] = "a";
   NativeType["SPAN"] = "span";
   NativeType["BUTTON"] = "button";
 })(NativeType || (NativeType = {}));
 export const BadgeClass = {
   root: 'gov-badge',
   inner: 'gov-badge__inner',
+  hasRight: 'gov-badge--has-right',
+  hasLeft: 'gov-badge--has-left',
 };
 //# sourceMappingURL=constants.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../src/components/gov-badge/constants.ts"],"names":[],"mappings":"AAEA,IAAK,UAGJ;AAHD,WAAK,UAAU;EACd,2BAAa,CAAA;EACb,+BAAiB,CAAA;AAClB,CAAC,EAHI,UAAU,KAAV,UAAU,QAGd;AAID,MAAM,CAAC,MAAM,UAAU,GAAG;EACzB,IAAI,EAAE,WAAW;EACjB,KAAK,EAAE,kBAAkB;CACzB,CAAA","sourcesContent":["import { ValueOf } from '../../types/interfaces'\n\nenum NativeType {\n\tSPAN = 'span',\n\tBUTTON = 'button',\n}\n\nexport type NativeTypesType = `${ValueOf<typeof NativeType>}`\n\nexport const BadgeClass = {\n\troot: 'gov-badge',\n\tinner: 'gov-badge__inner',\n}\n"]}
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../src/components/gov-badge/constants.ts"],"names":[],"mappings":"AAEA,MAAM,CAAN,IAAY,UAIX;AAJD,WAAY,UAAU;EACrB,qBAAO,CAAA;EACP,2BAAa,CAAA;EACb,+BAAiB,CAAA;AAClB,CAAC,EAJW,UAAU,KAAV,UAAU,QAIrB;AAID,MAAM,CAAC,MAAM,UAAU,GAAG;EACzB,IAAI,EAAE,WAAW;EACjB,KAAK,EAAE,kBAAkB;EACzB,QAAQ,EAAE,sBAAsB;EAChC,OAAO,EAAE,qBAAqB;CAC9B,CAAA","sourcesContent":["import { ValueOf } from '../../types/interfaces'\n\nexport enum NativeType {\n\tA = 'a',\n\tSPAN = 'span',\n\tBUTTON = 'button',\n}\n\nexport type NativeTypesType = `${ValueOf<typeof NativeType>}`\n\nexport const BadgeClass = {\n\troot: 'gov-badge',\n\tinner: 'gov-badge__inner',\n\thasRight: 'gov-badge--has-right',\n\thasLeft: 'gov-badge--has-left',\n}\n"]}

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

@@ -148,6 +148,9 @@
 /*
  -	Variables - Form multiselect
  */
+/*
+ -	Variables - Form password power
+ */
 /*
  -	Variables - Form checkbox & radio
  */
@@ -379,6 +382,41 @@
     color: var(--gov-button-primary-base-inverse-active-color, var(--gov-color-neutral-white));
   }
 }
+[type=link][variant=primary].gov-badge .element {
+  color: var(--gov-button-primary-link-color, var(--gov-color-primary));
+  border-width: 0;
+}
+[type=link][variant=primary][inverse=""].gov-badge .element, [type=link][variant=primary][inverse=true i].gov-badge .element, [type=link][variant=primary][inverse="1"].gov-badge .element {
+  color: var(--gov-button-primary-link-inverse-color, var(--gov-color-neutral-white));
+  background-color: var(--gov-button-primary-link-inverse-bg, transparent);
+}
+[type=link][variant=primary][disabled=""].gov-badge .element, [type=link][variant=primary][disabled=true i].gov-badge .element, [type=link][variant=primary][disabled="1"].gov-badge .element {
+  color: var(--gov-button-primary-link-disabled-color, var(--gov-color-primary-400));
+}
+[type=link][variant=primary][disabled=""][inverse=""].gov-badge .element, [type=link][variant=primary][disabled=""][inverse=true i].gov-badge .element, [type=link][variant=primary][disabled=""][inverse="1"].gov-badge .element, [type=link][variant=primary][disabled=true i][inverse=""].gov-badge .element, [type=link][variant=primary][disabled=true i][inverse=true i].gov-badge .element, [type=link][variant=primary][disabled=true i][inverse="1"].gov-badge .element, [type=link][variant=primary][disabled="1"][inverse=""].gov-badge .element, [type=link][variant=primary][disabled="1"][inverse=true i].gov-badge .element, [type=link][variant=primary][disabled="1"][inverse="1"].gov-badge .element {
+  background-color: var(--gov-button-primary-link-inverse-disabled-bg, transparent);
+  color: var(--gov-button-primary-link-inverse-disabled-color, var(--gov-color-primary-400));
+}
+@media not all and (pointer: coarse) {
+  [type=link][variant=primary][hoverable].gov-badge .element:hover {
+    background-color: var(--gov-button-primary-link-hover-bg, transparent);
+    color: var(--gov-button-primary-link-hover-color, var(--gov-color-primary));
+  }
+  [type=link][variant=primary][hoverable].gov-badge .element:hover:active {
+    background-color: var(--gov-button-primary-link-active-bg, transparent);
+    color: var(--gov-button-primary-link-active-color, var(--gov-color-primary-700));
+  }
+}
+@media not all and (pointer: coarse) {
+  [type=link][variant=primary][hoverable][inverse=""].gov-badge .element:hover, [type=link][variant=primary][hoverable][inverse=true i].gov-badge .element:hover, [type=link][variant=primary][hoverable][inverse="1"].gov-badge .element:hover {
+    background-color: var(--gov-button-primary-link-inverse-hover-bg, transparent);
+    color: var(--gov-button-primary-link-inverse-hover-color, var(--gov-color-neutral-white));
+  }
+  [type=link][variant=primary][hoverable][inverse=""].gov-badge .element:hover:active, [type=link][variant=primary][hoverable][inverse=true i].gov-badge .element:hover:active, [type=link][variant=primary][hoverable][inverse="1"].gov-badge .element:hover:active {
+    background-color: var(--gov-button-primary-link-inverse-active-bg, transparent);
+    color: var(--gov-button-primary-link-inverse-active-color, var(--gov-color-primary-200));
+  }
+}
 [type=solid][variant=secondary].gov-badge .element {
   background-color: var(--gov-button-secondary-solid-bg, var(--gov-color-secondary));
   color: var(--gov-button-secondary-solid-color, var(--gov-color-neutral-white));
@@ -493,6 +531,41 @@
     color: var(--gov-button-secondary-base-inverse-active-color, var(--gov-color-secondary));
   }
 }
+[type=link][variant=secondary].gov-badge .element {
+  color: var(--gov-button-secondary-link-color, var(--gov-color-secondary));
+  border-width: 0;
+}
+[type=link][variant=secondary][inverse=""].gov-badge .element, [type=link][variant=secondary][inverse=true i].gov-badge .element, [type=link][variant=secondary][inverse="1"].gov-badge .element {
+  color: var(--gov-button-secondary-link-inverse-color, var(--gov-color-neutral-white));
+  background-color: var(--gov-button-secondary-link-inverse-bg, transparent);
+}
+[type=link][variant=secondary][disabled=""].gov-badge .element, [type=link][variant=secondary][disabled=true i].gov-badge .element, [type=link][variant=secondary][disabled="1"].gov-badge .element {
+  color: var(--gov-button-secondary-link-disabled-color, var(--gov-color-secondary-600));
+}
+[type=link][variant=secondary][disabled=""][inverse=""].gov-badge .element, [type=link][variant=secondary][disabled=""][inverse=true i].gov-badge .element, [type=link][variant=secondary][disabled=""][inverse="1"].gov-badge .element, [type=link][variant=secondary][disabled=true i][inverse=""].gov-badge .element, [type=link][variant=secondary][disabled=true i][inverse=true i].gov-badge .element, [type=link][variant=secondary][disabled=true i][inverse="1"].gov-badge .element, [type=link][variant=secondary][disabled="1"][inverse=""].gov-badge .element, [type=link][variant=secondary][disabled="1"][inverse=true i].gov-badge .element, [type=link][variant=secondary][disabled="1"][inverse="1"].gov-badge .element {
+  background-color: var(--gov-button-secondary-link-inverse-disabled-bg, transparent);
+  color: var(--gov-button-secondary-link-inverse-disabled-color, var(--gov-color-secondary-600));
+}
+@media not all and (pointer: coarse) {
+  [type=link][variant=secondary][hoverable].gov-badge .element:hover {
+    background-color: var(--gov-button-secondary-link-hover-bg, transparent);
+    color: var(--gov-button-secondary-link-hover-color, var(--gov-color-secondary));
+  }
+  [type=link][variant=secondary][hoverable].gov-badge .element:hover:active {
+    background-color: var(--gov-button-secondary-link-active-bg, transparent);
+    color: var(--gov-button-primary-link-active-color, var(--gov-color-secondary));
+  }
+}
+@media not all and (pointer: coarse) {
+  [type=link][variant=secondary][hoverable][inverse=""].gov-badge .element:hover, [type=link][variant=secondary][hoverable][inverse=true i].gov-badge .element:hover, [type=link][variant=secondary][hoverable][inverse="1"].gov-badge .element:hover {
+    background-color: var(--gov-button-secondary-link-inverse-hover-bg, transparent);
+    color: var(--gov-button-secondary-link-inverse-hover-color, var(--gov-color-neutral-white));
+  }
+  [type=link][variant=secondary][hoverable][inverse=""].gov-badge .element:hover:active, [type=link][variant=secondary][hoverable][inverse=true i].gov-badge .element:hover:active, [type=link][variant=secondary][hoverable][inverse="1"].gov-badge .element:hover:active {
+    background-color: var(--gov-button-secondary-link-inverse-active-bg, transparent);
+    color: var(--gov-button-secondary-link-inverse-active-color, var(--gov-color-secondary-500));
+  }
+}
 [type=solid][variant=error].gov-badge .element {
   background-color: var(--gov-button-error-solid-bg, var(--gov-color-error));
   color: var(--gov-button-error-solid-color, var(--gov-color-neutral-white));
@@ -605,6 +678,41 @@
     color: var(--gov-button-error-base-inverse-active-color, var(--gov-color-neutral-white));
   }
 }
+[type=link][variant=error].gov-badge .element {
+  color: var(--gov-button-error-link-color, var(--gov-color-error));
+  border-width: 0;
+}
+[type=link][variant=error][inverse=""].gov-badge .element, [type=link][variant=error][inverse=true i].gov-badge .element, [type=link][variant=error][inverse="1"].gov-badge .element {
+  color: var(--gov-button-error-link-inverse-color, var(--gov-color-neutral-white));
+  background-color: var(--gov-button-error-link-inverse-bg, transparent);
+}
+[type=link][variant=error][disabled=""].gov-badge .element, [type=link][variant=error][disabled=true i].gov-badge .element, [type=link][variant=error][disabled="1"].gov-badge .element {
+  color: var(--gov-button-error-link-disabled-color, var(--gov-color-error-200));
+}
+[type=link][variant=error][disabled=""][inverse=""].gov-badge .element, [type=link][variant=error][disabled=""][inverse=true i].gov-badge .element, [type=link][variant=error][disabled=""][inverse="1"].gov-badge .element, [type=link][variant=error][disabled=true i][inverse=""].gov-badge .element, [type=link][variant=error][disabled=true i][inverse=true i].gov-badge .element, [type=link][variant=error][disabled=true i][inverse="1"].gov-badge .element, [type=link][variant=error][disabled="1"][inverse=""].gov-badge .element, [type=link][variant=error][disabled="1"][inverse=true i].gov-badge .element, [type=link][variant=error][disabled="1"][inverse="1"].gov-badge .element {
+  background-color: var(--gov-button-error-link-inverse-disabled-bg, transparent);
+  color: var(--gov-button-error-link-inverse-disabled-color, var(--gov-color-error-200));
+}
+@media not all and (pointer: coarse) {
+  [type=link][variant=error][hoverable].gov-badge .element:hover {
+    background-color: var(--gov-button-error-link-hover-bg, transparent);
+    color: var(--gov-button-error-link-hover-color, var(--gov-color-error));
+  }
+  [type=link][variant=error][hoverable].gov-badge .element:hover:active {
+    background-color: var(--gov-button-error-link-active-bg, transparent);
+    color: var(--gov-button-primary-link-active-color, var(--gov-color-error-500));
+  }
+}
+@media not all and (pointer: coarse) {
+  [type=link][variant=error][hoverable][inverse=""].gov-badge .element:hover, [type=link][variant=error][hoverable][inverse=true i].gov-badge .element:hover, [type=link][variant=error][hoverable][inverse="1"].gov-badge .element:hover {
+    background-color: var(--gov-button-error-link-inverse-hover-bg, transparent);
+    color: var(--gov-button-error-link-inverse-hover-color, var(--gov-color-neutral-white));
+  }
+  [type=link][variant=error][hoverable][inverse=""].gov-badge .element:hover:active, [type=link][variant=error][hoverable][inverse=true i].gov-badge .element:hover:active, [type=link][variant=error][hoverable][inverse="1"].gov-badge .element:hover:active {
+    background-color: var(--gov-button-error-link-inverse-active-bg, transparent);
+    color: var(--gov-button-error-link-inverse-active-color, var(--gov-color-neutral-white));
+  }
+}
 [type=solid][variant=success].gov-badge .element {
   background-color: var(--gov-button-success-solid-bg, var(--gov-color-success-500));
   color: var(--gov-button-success-solid-color, var(--gov-color-neutral-white));
@@ -717,6 +825,41 @@
     color: var(--gov-button-success-base-inverse-active-color, var(--gov-color-neutral-white));
   }
 }
+[type=link][variant=success].gov-badge .element {
+  color: var(--gov-button-success-link-color, var(--gov-color-success-500));
+  border-width: 0;
+}
+[type=link][variant=success][inverse=""].gov-badge .element, [type=link][variant=success][inverse=true i].gov-badge .element, [type=link][variant=success][inverse="1"].gov-badge .element {
+  color: var(--gov-button-success-link-inverse-color, var(--gov-color-neutral-white));
+  background-color: var(--gov-button-success-link-inverse-bg, transparent);
+}
+[type=link][variant=success][disabled=""].gov-badge .element, [type=link][variant=success][disabled=true i].gov-badge .element, [type=link][variant=success][disabled="1"].gov-badge .element {
+  color: var(--gov-button-success-link-disabled-color, var(--gov-color-success-300));
+}
+[type=link][variant=success][disabled=""][inverse=""].gov-badge .element, [type=link][variant=success][disabled=""][inverse=true i].gov-badge .element, [type=link][variant=success][disabled=""][inverse="1"].gov-badge .element, [type=link][variant=success][disabled=true i][inverse=""].gov-badge .element, [type=link][variant=success][disabled=true i][inverse=true i].gov-badge .element, [type=link][variant=success][disabled=true i][inverse="1"].gov-badge .element, [type=link][variant=success][disabled="1"][inverse=""].gov-badge .element, [type=link][variant=success][disabled="1"][inverse=true i].gov-badge .element, [type=link][variant=success][disabled="1"][inverse="1"].gov-badge .element {
+  background-color: var(--gov-button-success-link-inverse-disabled-bg, transparent);
+  color: var(--gov-button-success-link-inverse-disabled-color, var(--gov-color-success-400));
+}
+@media not all and (pointer: coarse) {
+  [type=link][variant=success][hoverable].gov-badge .element:hover {
+    background-color: var(--gov-button-success-link-hover-bg, transparent);
+    color: var(--gov-button-success-link-hover-color, var(--gov-color-success-500));
+  }
+  [type=link][variant=success][hoverable].gov-badge .element:hover:active {
+    background-color: var(--gov-button-success-link-active-bg, transparent);
+    color: var(--gov-button-primary-link-active-color, var(--gov-color-success-600));
+  }
+}
+@media not all and (pointer: coarse) {
+  [type=link][variant=success][hoverable][inverse=""].gov-badge .element:hover, [type=link][variant=success][hoverable][inverse=true i].gov-badge .element:hover, [type=link][variant=success][hoverable][inverse="1"].gov-badge .element:hover {
+    background-color: var(--gov-button-success-link-inverse-hover-bg, transparent);
+    color: var(--gov-button-success-link-inverse-hover-color, var(--gov-color-neutral-white));
+  }
+  [type=link][variant=success][hoverable][inverse=""].gov-badge .element:hover:active, [type=link][variant=success][hoverable][inverse=true i].gov-badge .element:hover:active, [type=link][variant=success][hoverable][inverse="1"].gov-badge .element:hover:active {
+    background-color: var(--gov-button-success-link-inverse-active-bg, transparent);
+    color: var(--gov-button-success-link-inverse-active-color, var(--gov-color-neutral-white));
+  }
+}
 [type=solid][variant=warning].gov-badge .element {
   background-color: var(--gov-button-warning-solid-bg, var(--gov-color-warning-500));
   color: var(--gov-button-warning-solid-color, var(--gov-color-neutral-white));
@@ -829,6 +972,41 @@
     color: var(--gov-button-warning-base-inverse-active-color, var(--gov-color-neutral-white));
   }
 }
+[type=link][variant=warning].gov-badge .element {
+  color: var(--gov-button-warning-link-color, var(--gov-color-warning-500));
+  border-width: 0;
+}
+[type=link][variant=warning][inverse=""].gov-badge .element, [type=link][variant=warning][inverse=true i].gov-badge .element, [type=link][variant=warning][inverse="1"].gov-badge .element {
+  color: var(--gov-button-warning-link-inverse-color, var(--gov-color-neutral-white));
+  background-color: var(--gov-button-warning-link-inverse-bg, transparent);
+}
+[type=link][variant=warning][disabled=""].gov-badge .element, [type=link][variant=warning][disabled=true i].gov-badge .element, [type=link][variant=warning][disabled="1"].gov-badge .element {
+  color: var(--gov-button-warning-link-disabled-color, var(--gov-color-warning));
+}
+[type=link][variant=warning][disabled=""][inverse=""].gov-badge .element, [type=link][variant=warning][disabled=""][inverse=true i].gov-badge .element, [type=link][variant=warning][disabled=""][inverse="1"].gov-badge .element, [type=link][variant=warning][disabled=true i][inverse=""].gov-badge .element, [type=link][variant=warning][disabled=true i][inverse=true i].gov-badge .element, [type=link][variant=warning][disabled=true i][inverse="1"].gov-badge .element, [type=link][variant=warning][disabled="1"][inverse=""].gov-badge .element, [type=link][variant=warning][disabled="1"][inverse=true i].gov-badge .element, [type=link][variant=warning][disabled="1"][inverse="1"].gov-badge .element {
+  background-color: var(--gov-button-warning-link-inverse-disabled-bg, transparent);
+  color: var(--gov-button-warning-link-inverse-disabled-color, var(--gov-color-warning-400));
+}
+@media not all and (pointer: coarse) {
+  [type=link][variant=warning][hoverable].gov-badge .element:hover {
+    background-color: var(--gov-button-warning-link-hover-bg, transparent);
+    color: var(--gov-button-warning-link-hover-color, var(--gov-color-warning-500));
+  }
+  [type=link][variant=warning][hoverable].gov-badge .element:hover:active {
+    background-color: var(--gov-button-warning-link-active-bg, transparent);
+    color: var(--gov-button-primary-link-active-color, var(--gov-color-warning-600));
+  }
+}
+@media not all and (pointer: coarse) {
+  [type=link][variant=warning][hoverable][inverse=""].gov-badge .element:hover, [type=link][variant=warning][hoverable][inverse=true i].gov-badge .element:hover, [type=link][variant=warning][hoverable][inverse="1"].gov-badge .element:hover {
+    background-color: var(--gov-button-warning-link-inverse-hover-bg, transparent);
+    color: var(--gov-button-warning-link-inverse-hover-color, var(--gov-color-neutral-white));
+  }
+  [type=link][variant=warning][hoverable][inverse=""].gov-badge .element:hover:active, [type=link][variant=warning][hoverable][inverse=true i].gov-badge .element:hover:active, [type=link][variant=warning][hoverable][inverse="1"].gov-badge .element:hover:active {
+    background-color: var(--gov-button-warning-link-inverse-active-bg, transparent);
+    color: var(--gov-button-warning-link-inverse-active-color, var(--gov-color-neutral-white));
+  }
+}
 [size=xs].gov-badge .element {
   font-weight: var(--gov-button-text-xs-font-weight, var(--gov-text-xs-font-weight));
   font-size: var(--gov-button-text-xs-font-size, var(--gov-text-xs-font-size));
@@ -843,22 +1021,6 @@
   width: var(--gov-button-xs-icon-size, 1rem);
   height: var(--gov-button-xs-icon-size, 1rem);
 }
-@media (min-width: 48em) {
-  [size=xs].gov-badge .element {
-    font-weight: var(--gov-button-text-xs-font-weight, var(--gov-text-xs-font-weight));
-    font-size: var(--gov-button-text-xs-font-size, var(--gov-text-xs-font-size));
-    line-height: var(--gov-button-text-xs-line-height, var(--gov-text-xs-line-height));
-    letter-spacing: var(--gov-button-text-xs-letter-spacing, var(--gov-text-xs-letter-spacing));
-    -moz-column-gap: var(--gov-button-xs-padding-x, 0.625rem);
-         column-gap: var(--gov-button-xs-padding-x, 0.625rem);
-    min-height: var(--gov-button-xs-min-height, 1.5rem);
-    padding: var(--gov-button-xs-padding-y, 0.125rem) var(--gov-button-xs-padding-x, 0.625rem);
-  }
-  [size=xs].gov-badge .element .gov-icon {
-    width: var(--gov-button-xs-icon-size, 1rem);
-    height: var(--gov-button-xs-icon-size, 1rem);
-  }
-}
 [size=s].gov-badge .element {
   font-weight: var(--gov-button-text-s-font-weight, var(--gov-text-s-font-weight));
   font-size: var(--gov-button-text-s-font-size, var(--gov-text-s-font-size));
@@ -873,53 +1035,7 @@
   width: var(--gov-button-s-icon-size, 1rem);
   height: var(--gov-button-s-icon-size, 1rem);
 }
-@media (min-width: 48em) {
-  [size=s].gov-badge .element {
-    font-weight: var(--gov-button-text-s-font-weight, var(--gov-text-s-font-weight));
-    font-size: var(--gov-button-text-s-font-size, var(--gov-text-s-font-size));
-    line-height: var(--gov-button-text-s-line-height, var(--gov-text-s-line-height));
-    letter-spacing: var(--gov-button-text-s-letter-spacing, var(--gov-text-s-letter-spacing));
-    -moz-column-gap: var(--gov-button-s-padding-x, 0.75rem);
-         column-gap: var(--gov-button-s-padding-x, 0.75rem);
-    min-height: var(--gov-button-s-min-height, 2rem);
-    padding: var(--gov-button-s-padding-y, 0.25rem) var(--gov-button-s-padding-x, 0.75rem);
-  }
-  [size=s].gov-badge .element .gov-icon {
-    width: var(--gov-button-s-icon-size, 1rem);
-    height: var(--gov-button-s-icon-size, 1rem);
-  }
-}
 [size=m].gov-badge .element {
-  font-weight: var(--gov-button-text-s-font-weight, var(--gov-text-s-font-weight));
-  font-size: var(--gov-button-text-s-font-size, var(--gov-text-s-font-size));
-  line-height: var(--gov-button-text-s-line-height, var(--gov-text-s-line-height));
-  letter-spacing: var(--gov-button-text-s-letter-spacing, var(--gov-text-s-letter-spacing));
-  -moz-column-gap: var(--gov-button-s-padding-x, 0.75rem);
-       column-gap: var(--gov-button-s-padding-x, 0.75rem);
-  min-height: var(--gov-button-s-min-height, 2rem);
-  padding: var(--gov-button-s-padding-y, 0.25rem) var(--gov-button-s-padding-x, 0.75rem);
-}
-[size=m].gov-badge .element .gov-icon {
-  width: var(--gov-button-s-icon-size, 1rem);
-  height: var(--gov-button-s-icon-size, 1rem);
-}
-@media (min-width: 48em) {
-  [size=m].gov-badge .element {
-    font-weight: var(--gov-button-text-m-font-weight, var(--gov-text-m-font-weight));
-    font-size: var(--gov-button-text-m-font-size, var(--gov-text-m-font-size));
-    line-height: var(--gov-button-text-m-line-height, var(--gov-text-m-line-height));
-    letter-spacing: var(--gov-button-text-m-letter-spacing, var(--gov-text-m-letter-spacing));
-    -moz-column-gap: var(--gov-button-m-padding-x, 0.75rem);
-         column-gap: var(--gov-button-m-padding-x, 0.75rem);
-    min-height: var(--gov-button-m-min-height, 2.5rem);
-    padding: var(--gov-button-m-padding-y, 0.375rem) var(--gov-button-m-padding-x, 0.75rem);
-  }
-  [size=m].gov-badge .element .gov-icon {
-    width: var(--gov-button-m-icon-size, 1.25rem);
-    height: var(--gov-button-m-icon-size, 1.25rem);
-  }
-}
-[size=l].gov-badge .element {
   font-weight: var(--gov-button-text-m-font-weight, var(--gov-text-m-font-weight));
   font-size: var(--gov-button-text-m-font-size, var(--gov-text-m-font-size));
   line-height: var(--gov-button-text-m-line-height, var(--gov-text-m-line-height));
@@ -929,27 +1045,11 @@
   min-height: var(--gov-button-m-min-height, 2.5rem);
   padding: var(--gov-button-m-padding-y, 0.375rem) var(--gov-button-m-padding-x, 0.75rem);
 }
-[size=l].gov-badge .element .gov-icon {
+[size=m].gov-badge .element .gov-icon {
   width: var(--gov-button-m-icon-size, 1.25rem);
   height: var(--gov-button-m-icon-size, 1.25rem);
 }
-@media (min-width: 48em) {
-  [size=l].gov-badge .element {
-    font-weight: var(--gov-button-text-l-font-weight, var(--gov-text-l-font-weight));
-    font-size: var(--gov-button-text-l-font-size, var(--gov-text-l-font-size));
-    line-height: var(--gov-button-text-l-line-height, var(--gov-text-l-line-height));
-    letter-spacing: var(--gov-button-text-l-letter-spacing, var(--gov-text-l-letter-spacing));
-    -moz-column-gap: var(--gov-button-l-padding-x, 1rem);
-         column-gap: var(--gov-button-l-padding-x, 1rem);
-    min-height: var(--gov-button-l-min-height, 3rem);
-    padding: var(--gov-button-l-padding-y, 0.5rem) var(--gov-button-l-padding-x, 1rem);
-  }
-  [size=l].gov-badge .element .gov-icon {
-    width: var(--gov-button-l-icon-size, 1.5rem);
-    height: var(--gov-button-l-icon-size, 1.5rem);
-  }
-}
-[size=xl].gov-badge .element {
+[size=l].gov-badge .element {
   font-weight: var(--gov-button-text-l-font-weight, var(--gov-text-l-font-weight));
   font-size: var(--gov-button-text-l-font-size, var(--gov-text-l-font-size));
   line-height: var(--gov-button-text-l-line-height, var(--gov-text-l-line-height));
@@ -959,25 +1059,23 @@
   min-height: var(--gov-button-l-min-height, 3rem);
   padding: var(--gov-button-l-padding-y, 0.5rem) var(--gov-button-l-padding-x, 1rem);
 }
-[size=xl].gov-badge .element .gov-icon {
+[size=l].gov-badge .element .gov-icon {
   width: var(--gov-button-l-icon-size, 1.5rem);
   height: var(--gov-button-l-icon-size, 1.5rem);
 }
-@media (min-width: 48em) {
-  [size=xl].gov-badge .element {
-    font-weight: var(--gov-button-text-xl-font-weight, var(--gov-text-xl-font-weight));
-    font-size: var(--gov-button-text-xl-font-size, var(--gov-text-xl-font-size));
-    line-height: var(--gov-button-text-xl-line-height, var(--gov-text-xl-line-height));
-    letter-spacing: var(--gov-button-text-xl-letter-spacing, var(--gov-text-xl-letter-spacing));
-    -moz-column-gap: var(--gov-button-xl-padding-x, 1.25rem);
-         column-gap: var(--gov-button-xl-padding-x, 1.25rem);
-    min-height: var(--gov-button-xl-min-height, 3.5rem);
-    padding: var(--gov-button-xl-padding-y, 0.75rem) var(--gov-button-xl-padding-x, 1.25rem);
-  }
-  [size=xl].gov-badge .element .gov-icon {
-    width: var(--gov-button-xl-icon-size, 1.75rem);
-    height: var(--gov-button-xl-icon-size, 1.75rem);
-  }
+[size=xl].gov-badge .element {
+  font-weight: var(--gov-button-text-xl-font-weight, var(--gov-text-xl-font-weight));
+  font-size: var(--gov-button-text-xl-font-size, var(--gov-text-xl-font-size));
+  line-height: var(--gov-button-text-xl-line-height, var(--gov-text-xl-line-height));
+  letter-spacing: var(--gov-button-text-xl-letter-spacing, var(--gov-text-xl-letter-spacing));
+  -moz-column-gap: var(--gov-button-xl-padding-x, 1.25rem);
+       column-gap: var(--gov-button-xl-padding-x, 1.25rem);
+  min-height: var(--gov-button-xl-min-height, 3.5rem);
+  padding: var(--gov-button-xl-padding-y, 0.75rem) var(--gov-button-xl-padding-x, 1.25rem);
+}
+[size=xl].gov-badge .element .gov-icon {
+  width: var(--gov-button-xl-icon-size, 1.75rem);
+  height: var(--gov-button-xl-icon-size, 1.75rem);
 }
 
 .gov-badge a .gov-icon {
@@ -1073,4 +1171,14 @@
   border-color: var(--gov-badge-inverse-error-border-color, var(--gov-color-error-200));
   background-color: var(--gov-badge-inverse-error-bg, var(--gov-color-error-100));
   color: var(--gov-badge-inverse-error-color, var(--gov-color-error-500));
+}
+.gov-badge--has-right > .element {
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+  padding-right: 0 !important;
+}
+.gov-badge--has-left > .element {
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+  padding-left: 0 !important;
 }