@gov-design-system-ce/components 0.0.65 → 0.0.67

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

@@ -298,7 +298,6 @@
 [type=solid][variant=primary].gov-chip .element {
   background-color: var(--gov-button-primary-solid-bg, var(--gov-color-primary));
   color: var(--gov-button-primary-solid-color, var(--gov-color-neutral-white));
-  border-width: 0;
 }
 [type=solid][variant=primary][inverse=""].gov-chip .element, [type=solid][variant=primary][inverse=true i].gov-chip .element, [type=solid][variant=primary][inverse="1"].gov-chip .element {
   color: var(--gov-button-primary-solid-inverse-color, var(--gov-color-primary));
@@ -375,7 +374,6 @@
 }
 [type=base][variant=primary].gov-chip .element {
   color: var(--gov-button-primary-base-color, var(--gov-color-primary));
-  border-width: 0;
 }
 [type=base][variant=primary][inverse=""].gov-chip .element, [type=base][variant=primary][inverse=true i].gov-chip .element, [type=base][variant=primary][inverse="1"].gov-chip .element {
   color: var(--gov-button-primary-base-inverse-color, var(--gov-color-neutral-white));
@@ -409,7 +407,6 @@
 }
 [type=link][variant=primary].gov-chip .element {
   color: var(--gov-button-primary-link-color, var(--gov-color-primary));
-  border-width: 0;
 }
 [type=link][variant=primary][inverse=""].gov-chip .element, [type=link][variant=primary][inverse=true i].gov-chip .element, [type=link][variant=primary][inverse="1"].gov-chip .element {
   color: var(--gov-button-primary-link-inverse-color, var(--gov-color-neutral-white));
@@ -445,7 +442,6 @@
 [type=solid][variant=secondary].gov-chip .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));
-  border-width: 0;
 }
 [type=solid][variant=secondary][inverse=""].gov-chip .element, [type=solid][variant=secondary][inverse=true i].gov-chip .element, [type=solid][variant=secondary][inverse="1"].gov-chip .element {
   color: var(--gov-button-secondary-solid-inverse-color, var(--gov-color-secondary));
@@ -524,7 +520,6 @@
 }
 [type=base][variant=secondary].gov-chip .element {
   color: var(--gov-button-secondary-base-color, var(--gov-color-secondary));
-  border-width: 0;
 }
 [type=base][variant=secondary][inverse=""].gov-chip .element, [type=base][variant=secondary][inverse=true i].gov-chip .element, [type=base][variant=secondary][inverse="1"].gov-chip .element {
   color: var(--gov-button-secondary-base-inverse-color, var(--gov-color-neutral-white));
@@ -558,7 +553,6 @@
 }
 [type=link][variant=secondary].gov-chip .element {
   color: var(--gov-button-secondary-link-color, var(--gov-color-secondary));
-  border-width: 0;
 }
 [type=link][variant=secondary][inverse=""].gov-chip .element, [type=link][variant=secondary][inverse=true i].gov-chip .element, [type=link][variant=secondary][inverse="1"].gov-chip .element {
   color: var(--gov-button-secondary-link-inverse-color, var(--gov-color-neutral-white));
@@ -594,7 +588,6 @@
 [type=solid][variant=error].gov-chip .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));
-  border-width: 0;
 }
 [type=solid][variant=error][inverse=""].gov-chip .element, [type=solid][variant=error][inverse=true i].gov-chip .element, [type=solid][variant=error][inverse="1"].gov-chip .element {
   color: var(--gov-button-error-solid-inverse-color, var(--gov-color-error));
@@ -671,7 +664,6 @@
 }
 [type=base][variant=error].gov-chip .element {
   color: var(--gov-button-error-base-color, var(--gov-color-error));
-  border-width: 0;
 }
 [type=base][variant=error][inverse=""].gov-chip .element, [type=base][variant=error][inverse=true i].gov-chip .element, [type=base][variant=error][inverse="1"].gov-chip .element {
   color: var(--gov-button-error-base-inverse-color, var(--gov-color-neutral-white));
@@ -705,7 +697,6 @@
 }
 [type=link][variant=error].gov-chip .element {
   color: var(--gov-button-error-link-color, var(--gov-color-error));
-  border-width: 0;
 }
 [type=link][variant=error][inverse=""].gov-chip .element, [type=link][variant=error][inverse=true i].gov-chip .element, [type=link][variant=error][inverse="1"].gov-chip .element {
   color: var(--gov-button-error-link-inverse-color, var(--gov-color-neutral-white));
@@ -741,7 +732,6 @@
 [type=solid][variant=success].gov-chip .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));
-  border-width: 0;
 }
 [type=solid][variant=success][inverse=""].gov-chip .element, [type=solid][variant=success][inverse=true i].gov-chip .element, [type=solid][variant=success][inverse="1"].gov-chip .element {
   color: var(--gov-button-success-solid-inverse-color, var(--gov-color-success));
@@ -818,7 +808,6 @@
 }
 [type=base][variant=success].gov-chip .element {
   color: var(--gov-button-success-base-color, var(--gov-color-success-500));
-  border-width: 0;
 }
 [type=base][variant=success][inverse=""].gov-chip .element, [type=base][variant=success][inverse=true i].gov-chip .element, [type=base][variant=success][inverse="1"].gov-chip .element {
   color: var(--gov-button-success-base-inverse-color, var(--gov-color-neutral-white));
@@ -852,7 +841,6 @@
 }
 [type=link][variant=success].gov-chip .element {
   color: var(--gov-button-success-link-color, var(--gov-color-success-500));
-  border-width: 0;
 }
 [type=link][variant=success][inverse=""].gov-chip .element, [type=link][variant=success][inverse=true i].gov-chip .element, [type=link][variant=success][inverse="1"].gov-chip .element {
   color: var(--gov-button-success-link-inverse-color, var(--gov-color-neutral-white));
@@ -888,7 +876,6 @@
 [type=solid][variant=warning].gov-chip .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));
-  border-width: 0;
 }
 [type=solid][variant=warning][inverse=""].gov-chip .element, [type=solid][variant=warning][inverse=true i].gov-chip .element, [type=solid][variant=warning][inverse="1"].gov-chip .element {
   color: var(--gov-button-warning-solid-inverse-color, var(--gov-color-warning));
@@ -965,7 +952,6 @@
 }
 [type=base][variant=warning].gov-chip .element {
   color: var(--gov-button-warning-base-color, var(--gov-color-warning-500));
-  border-width: 0;
 }
 [type=base][variant=warning][inverse=""].gov-chip .element, [type=base][variant=warning][inverse=true i].gov-chip .element, [type=base][variant=warning][inverse="1"].gov-chip .element {
   color: var(--gov-button-warning-base-inverse-color, var(--gov-color-neutral-white));
@@ -999,7 +985,6 @@
 }
 [type=link][variant=warning].gov-chip .element {
   color: var(--gov-button-warning-link-color, var(--gov-color-warning-500));
-  border-width: 0;
 }
 [type=link][variant=warning][inverse=""].gov-chip .element, [type=link][variant=warning][inverse=true i].gov-chip .element, [type=link][variant=warning][inverse="1"].gov-chip .element {
   color: var(--gov-button-warning-link-inverse-color, var(--gov-color-neutral-white));

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

@@ -4,12 +4,15 @@ import { govHost, toBoolAttr } from "../../helpers/Dom/template";
 import { ChipClass, NativeType } from "./constants";
 import { ButtonSizes, ButtonVariants } from "../gov-button/button/constants";
 import { createID } from "../../utils/string.utils";
+import { prepareIconFormat } from "../gov-icon/helpers";
 export class GovChip {
   constructor() {
     this.inverse = false;
     this.disabled = false;
     this.href = undefined;
     this.target = undefined;
+    this.iconLeft = undefined;
+    this.iconRight = undefined;
     this.size = ButtonSizes._M;
     this.tag = "span";
     this.variant = ButtonVariants.PRIMARY;
@@ -34,11 +37,13 @@ export class GovChip {
   render() {
     const Tag = this.href ? NativeType.A : this.tag;
     const nativeType = Tag == NativeType.BUTTON ? NativeType.BUTTON : undefined;
+    const iconLeft = prepareIconFormat(this.iconLeft);
+    const iconRight = prepareIconFormat(this.iconRight);
     return (h(Host, { class: this.h.classes([
         ChipClass.root,
         this.h.hasSlot("right") ? ChipClass.hasRight : undefined,
         this.h.hasSlot("left") ? ChipClass.hasLeft : undefined,
-      ]), disabled: this.disabled, href: this.href, variant: this.variant, type: this.inverse ? undefined : "solid", size: this.size, inverse: this.inverse, hoverable: Tag == NativeType.A || Tag == NativeType.BUTTON }, h(Tag, { class: "element", href: this.href, target: this.target, "aria-label": this.wcagLabel, ref: el => (this.triggerRef = el), onClick: this.onClickHandler.bind(this), "aria-controls": this.wcagControls, "aria-selected": toBoolAttr(this.wcagSelected), tabindex: this.focusable ? "0" : "-1", id: this.identifier || this.chipId, type: nativeType }, this.h.hasSlot("left") && h("slot", { name: "left" }), this.h.hasSlot("left-icon") && h("slot", { name: "left-icon" }), h("slot", null), this.h.hasSlot("right-icon") && h("slot", { name: "right-icon" }), this.h.hasSlot("right") && h("slot", { name: "right" }))));
+      ]), disabled: this.disabled, href: this.href, variant: this.variant, type: this.inverse ? undefined : "solid", size: this.size, inverse: this.inverse, hoverable: Tag == NativeType.A || Tag == NativeType.BUTTON }, h(Tag, { class: "element", href: this.href, target: this.target, "aria-label": this.wcagLabel, ref: el => (this.triggerRef = el), onClick: this.onClickHandler.bind(this), "aria-controls": this.wcagControls, "aria-selected": toBoolAttr(this.wcagSelected), tabindex: this.focusable ? "0" : "-1", id: this.identifier || this.chipId, type: nativeType }, this.h.hasSlot("left") && h("slot", { name: "left" }), this.h.hasSlot("left-icon") && h("slot", { name: "left-icon" }), iconLeft && h("gov-icon", { type: iconLeft.type, name: iconLeft.name }), h("slot", null), this.h.hasSlot("right-icon") && h("slot", { name: "right-icon" }), this.h.hasSlot("right") && h("slot", { name: "right" }), iconRight && h("gov-icon", { type: iconRight.type, name: iconRight.name }))));
   }
   onClickHandler(e) {
     e.stopPropagation();
@@ -153,6 +158,40 @@ export class GovChip {
         "attribute": "target",
         "reflect": false
       },
+      "iconLeft": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Definition of the button icon on the left. The icon must be defined in the form \"type/name\"."
+        },
+        "attribute": "icon-left",
+        "reflect": false
+      },
+      "iconRight": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Definition of the button icon on the left. The icon must be defined in the form \"type/name\"."
+        },
+        "attribute": "icon-right",
+        "reflect": false
+      },
       "size": {
         "type": "string",
         "mutable": false,

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

@@ -1 +1 @@
-{"version":3,"file":"gov-chip.js","sourceRoot":"","sources":["../../../../../../src/components/gov-chip/gov-chip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, Watch } from \"@stencil/core\"\nimport { GovHost } from \"../../helpers/Dom/template.types\"\nimport { validateProp } from \"../../helpers/Validate/props\"\nimport { govHost, toBoolAttr } from \"../../helpers/Dom/template\"\nimport { ChipClass, NativeType, NativeTypesType } from \"./constants\"\nimport { ButtonSizes, ButtonSizesType, ButtonVariants, ButtonVariantType } from \"../gov-button/button/constants\"\nimport { createID } from \"../../utils/string.utils\"\n\n@Component({\n\ttag: \"gov-chip\",\n\tstyleUrl: \"gov-chip.scss\",\n})\nexport class GovChip {\n\tprivate triggerRef?: HTMLButtonElement | HTMLLinkElement | HTMLSpanElement\n\tprivate h: GovHost\n\tprivate readonly chipId: string\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.chipId = createID('GovChip')\n\t}\n\n\t@Element() host: HTMLGovChipElement\n\n\t/**\n\t * Determine if component should have inverse colors to be used on dark background\n\t */\n\t@Prop() readonly inverse: boolean = false\n\t/**\n\t * Makes the chip 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 * Same as original parameter\n\t * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target\n\t */\n\t@Prop() readonly target: string\n\t/**\n\t * Chip’s size.\n\t */\n\t@Prop() readonly size: ButtonSizesType = ButtonSizes._M\n\t/**\n\t * Used to change the HTML tag in the chip\n\t */\n\t@Prop() readonly tag: NativeTypesType = \"span\"\n\t/**\n\t * Style variation of the chip.\n\t */\n\t@Prop() readonly variant: ButtonVariantType = ButtonVariants.PRIMARY\n\t/**\n\t * Same as original parameter\n\t * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/focusable\n\t */\n\t@Prop() readonly focusable: boolean = true\n\t/**\n\t * Custom chip identifier. Otherwise, it will be generated\n\t */\n\t@Prop() readonly identifier: string\n\t/**\n\t * Adds accessible label for the button that is only shown for screen readers.\n\t * Typically, this label text replaces the visible text on the button for users who use assistive technology.\n\t */\n\t@Prop({ attribute: \"wcag-label\" }) readonly wcagLabel: string\n\t/**\n\t * Use this property to add an aria-controls attribute to the button. Use the attribute to point to the unique id of the content that the button manages\n\t */\n\t@Prop({ attribute: \"wcag-controls\" }) readonly wcagControls: string\n\t/**\n\t * Same as original parameter\n\t * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected\n\t */\n\t@Prop({ attribute: \"wcag-selected\" }) readonly wcagSelected: boolean\n\t/**\n\t * Emitted when the button click.\n\t */\n\t@Event({ eventName: \"gov-click\" }) govClick: EventEmitter<PointerEvent>\n\n\t@Watch(\"variant\")\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(ButtonVariants, newValue, ChipClass.root)\n\t}\n\n\t@Watch(\"size\")\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(ButtonSizes, newValue, ChipClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateVariant(this.variant)\n\t\tthis.validateSize(this.size)\n\t}\n\n\trender() {\n\t\tconst Tag = this.href ? NativeType.A : this.tag\n\t\tconst nativeType = Tag == NativeType.BUTTON ? NativeType.BUTTON : undefined\n\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={this.h.classes([\n\t\t\t\t\tChipClass.root,\n\t\t\t\t\tthis.h.hasSlot(\"right\") ? ChipClass.hasRight : undefined,\n\t\t\t\t\tthis.h.hasSlot(\"left\") ? ChipClass.hasLeft : undefined,\n\t\t\t\t])}\n\t\t\t\tdisabled={this.disabled}\n\t\t\t\thref={this.href}\n\t\t\t\tvariant={this.variant}\n\t\t\t\ttype={this.inverse ? undefined : \"solid\"}\n\t\t\t\tsize={this.size}\n\t\t\t\tinverse={this.inverse}\n\t\t\t\thoverable={Tag == NativeType.A || Tag == NativeType.BUTTON}\n\t\t\t>\n\t\t\t\t<Tag\n\t\t\t\t\tclass=\"element\"\n\t\t\t\t\thref={this.href}\n\t\t\t\t\ttarget={this.target}\n\t\t\t\t\taria-label={this.wcagLabel}\n\t\t\t\t\tref={el => (this.triggerRef = el as HTMLLinkElement | HTMLButtonElement | HTMLSpanElement)}\n\t\t\t\t\tonClick={this.onClickHandler.bind(this)}\n\t\t\t\t\taria-controls={this.wcagControls}\n\t\t\t\t\taria-selected={toBoolAttr(this.wcagSelected)}\n\t\t\t\t\ttabindex={this.focusable ? \"0\" : \"-1\"}\n\t\t\t\t\tid={this.identifier || this.chipId}\n\t\t\t\t\ttype={nativeType}>\n\t\t\t\t\t{this.h.hasSlot(\"left\") && <slot name=\"left\"></slot>}\n\t\t\t\t\t{this.h.hasSlot(\"left-icon\") && <slot name=\"left-icon\"></slot>}\n\t\t\t\t\t<slot />\n\t\t\t\t\t{this.h.hasSlot(\"right-icon\") && <slot name=\"right-icon\"></slot>}\n\t\t\t\t\t{this.h.hasSlot(\"right\") && <slot name=\"right\"></slot>}\n\t\t\t\t</Tag>\n\t\t\t</Host>\n\t\t)\n\t}\n\n\tprivate onClickHandler(e: PointerEvent): void {\n\t\te.stopPropagation()\n\t\tif (this.disabled === false && this.tag === NativeType.BUTTON) {\n\t\t\tthis.govClick.emit(e)\n\t\t}\n\t}\n\n\t/**\n\t * Returns a clickable element instance\n\t */\n\t@Method()\n\tasync getTriggerRef() {\n\t\treturn this.triggerRef\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.identifier || this.chipId\n\t}\n\n\t/**\n\t * Focus button element\n\t */\n\t@Method()\n\tasync setFocus(): Promise<void> {\n\t\tthis.triggerRef.focus()\n\t}\n}\n"]}
+{"version":3,"file":"gov-chip.js","sourceRoot":"","sources":["../../../../../../src/components/gov-chip/gov-chip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, Watch } from \"@stencil/core\"\nimport { GovHost } from \"../../helpers/Dom/template.types\"\nimport { validateProp } from \"../../helpers/Validate/props\"\nimport { govHost, toBoolAttr } from \"../../helpers/Dom/template\"\nimport { ChipClass, NativeType, NativeTypesType } from \"./constants\"\nimport { ButtonSizes, ButtonSizesType, ButtonVariants, ButtonVariantType } from \"../gov-button/button/constants\"\nimport { createID } from \"../../utils/string.utils\"\nimport {prepareIconFormat} from \"../gov-icon/helpers\";\n\n@Component({\n\ttag: \"gov-chip\",\n\tstyleUrl: \"gov-chip.scss\",\n})\nexport class GovChip {\n\tprivate triggerRef?: HTMLButtonElement | HTMLLinkElement | HTMLSpanElement\n\tprivate h: GovHost\n\tprivate readonly chipId: string\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.chipId = createID('GovChip')\n\t}\n\n\t@Element() host: HTMLGovChipElement\n\n\t/**\n\t * Determine if component should have inverse colors to be used on dark background\n\t */\n\t@Prop() readonly inverse: boolean = false\n\t/**\n\t * Makes the chip 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 * Same as original parameter\n\t * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target\n\t */\n\t@Prop() readonly target: string\n\t/**\n\t * Definition of the button icon on the left. The icon must be defined in the form \"type/name\".\n\t */\n\t@Prop({attribute: \"icon-left\"}) readonly iconLeft?: string\n\t/**\n\t * Definition of the button icon on the left. The icon must be defined in the form \"type/name\".\n\t */\n\t@Prop({attribute: \"icon-right\"}) readonly iconRight?: string\n\t/**\n\t * Chip’s size.\n\t */\n\t@Prop() readonly size: ButtonSizesType = ButtonSizes._M\n\t/**\n\t * Used to change the HTML tag in the chip\n\t */\n\t@Prop() readonly tag: NativeTypesType = \"span\"\n\t/**\n\t * Style variation of the chip.\n\t */\n\t@Prop() readonly variant: ButtonVariantType = ButtonVariants.PRIMARY\n\t/**\n\t * Same as original parameter\n\t * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/focusable\n\t */\n\t@Prop() readonly focusable: boolean = true\n\t/**\n\t * Custom chip identifier. Otherwise, it will be generated\n\t */\n\t@Prop() readonly identifier: string\n\t/**\n\t * Adds accessible label for the button that is only shown for screen readers.\n\t * Typically, this label text replaces the visible text on the button for users who use assistive technology.\n\t */\n\t@Prop({ attribute: \"wcag-label\" }) readonly wcagLabel: string\n\t/**\n\t * Use this property to add an aria-controls attribute to the button. Use the attribute to point to the unique id of the content that the button manages\n\t */\n\t@Prop({ attribute: \"wcag-controls\" }) readonly wcagControls: string\n\t/**\n\t * Same as original parameter\n\t * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected\n\t */\n\t@Prop({ attribute: \"wcag-selected\" }) readonly wcagSelected: boolean\n\t/**\n\t * Emitted when the button click.\n\t */\n\t@Event({ eventName: \"gov-click\" }) govClick: EventEmitter<PointerEvent>\n\n\t@Watch(\"variant\")\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(ButtonVariants, newValue, ChipClass.root)\n\t}\n\n\t@Watch(\"size\")\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(ButtonSizes, newValue, ChipClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateVariant(this.variant)\n\t\tthis.validateSize(this.size)\n\t}\n\n\trender() {\n\t\tconst Tag = this.href ? NativeType.A : this.tag\n\t\tconst nativeType = Tag == NativeType.BUTTON ? NativeType.BUTTON : undefined\n\n\t\tconst iconLeft = prepareIconFormat(this.iconLeft)\n\t\tconst iconRight = prepareIconFormat(this.iconRight)\n\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={this.h.classes([\n\t\t\t\t\tChipClass.root,\n\t\t\t\t\tthis.h.hasSlot(\"right\") ? ChipClass.hasRight : undefined,\n\t\t\t\t\tthis.h.hasSlot(\"left\") ? ChipClass.hasLeft : undefined,\n\t\t\t\t])}\n\t\t\t\tdisabled={this.disabled}\n\t\t\t\thref={this.href}\n\t\t\t\tvariant={this.variant}\n\t\t\t\ttype={this.inverse ? undefined : \"solid\"}\n\t\t\t\tsize={this.size}\n\t\t\t\tinverse={this.inverse}\n\t\t\t\thoverable={Tag == NativeType.A || Tag == NativeType.BUTTON}\n\t\t\t>\n\t\t\t\t<Tag\n\t\t\t\t\tclass=\"element\"\n\t\t\t\t\thref={this.href}\n\t\t\t\t\ttarget={this.target}\n\t\t\t\t\taria-label={this.wcagLabel}\n\t\t\t\t\tref={el => (this.triggerRef = el as HTMLLinkElement | HTMLButtonElement | HTMLSpanElement)}\n\t\t\t\t\tonClick={this.onClickHandler.bind(this)}\n\t\t\t\t\taria-controls={this.wcagControls}\n\t\t\t\t\taria-selected={toBoolAttr(this.wcagSelected)}\n\t\t\t\t\ttabindex={this.focusable ? \"0\" : \"-1\"}\n\t\t\t\t\tid={this.identifier || this.chipId}\n\t\t\t\t\ttype={nativeType}>\n\t\t\t\t\t{this.h.hasSlot(\"left\") && <slot name=\"left\"></slot>}\n\t\t\t\t\t{this.h.hasSlot(\"left-icon\") && <slot name=\"left-icon\"></slot>}\n\t\t\t\t\t{iconLeft && \t<gov-icon type={iconLeft.type} name={iconLeft.name}></gov-icon>}\n\t\t\t\t\t<slot />\n\t\t\t\t\t{this.h.hasSlot(\"right-icon\") && <slot name=\"right-icon\"></slot>}\n\t\t\t\t\t{this.h.hasSlot(\"right\") && <slot name=\"right\"></slot>}\n\t\t\t\t\t{iconRight && \t<gov-icon type={iconRight.type} name={iconRight.name}></gov-icon>}\n\t\t\t\t</Tag>\n\t\t\t</Host>\n\t\t)\n\t}\n\n\tprivate onClickHandler(e: PointerEvent): void {\n\t\te.stopPropagation()\n\t\tif (this.disabled === false && this.tag === NativeType.BUTTON) {\n\t\t\tthis.govClick.emit(e)\n\t\t}\n\t}\n\n\t/**\n\t * Returns a clickable element instance\n\t */\n\t@Method()\n\tasync getTriggerRef() {\n\t\treturn this.triggerRef\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.identifier || this.chipId\n\t}\n\n\t/**\n\t * Focus button element\n\t */\n\t@Method()\n\tasync setFocus(): Promise<void> {\n\t\tthis.triggerRef.focus()\n\t}\n}\n"]}

package/dist/collection/components/gov-control-group/constants.js

@@ -1,6 +1,6 @@
 import { Variants } from "../../core/constants/variants";
 import { pick } from "../../utils/utils";
-export const ControlGroupVariants = pick(Variants, ['PRIMARY', 'SECONDARY']);
+export const ControlGroupVariants = pick(Variants, ['PRIMARY', 'SECONDARY', 'SUCCESS', 'ERROR', 'WARNING']);
 export const ControlGroupClass = {
   root: 'gov-control-group',
 };

package/dist/collection/components/gov-control-group/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../src/components/gov-control-group/constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AAExD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAA;AAExC,MAAM,CAAC,MAAM,oBAAoB,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC,CAAA;AAG5E,MAAM,CAAC,MAAM,iBAAiB,GAAG;EAChC,IAAI,EAAE,mBAAmB;CACzB,CAAA","sourcesContent":["import { Variants } from '../../core/constants/variants'\nimport { ValueOf } from '../../types/interfaces'\nimport { pick } from '../../utils/utils'\n\nexport const ControlGroupVariants = pick(Variants, ['PRIMARY', 'SECONDARY'])\nexport type ControlGroupVariantType = `${ValueOf<typeof ControlGroupVariants>}`\n\nexport const ControlGroupClass = {\n\troot: 'gov-control-group',\n}\n"]}
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../src/components/gov-control-group/constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AAExD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAA;AAExC,MAAM,CAAC,MAAM,oBAAoB,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,CAAC,CAAC,CAAA;AAG3G,MAAM,CAAC,MAAM,iBAAiB,GAAG;EAChC,IAAI,EAAE,mBAAmB;CACzB,CAAA","sourcesContent":["import { Variants } from '../../core/constants/variants'\nimport { ValueOf } from '../../types/interfaces'\nimport { pick } from '../../utils/utils'\n\nexport const ControlGroupVariants = pick(Variants, ['PRIMARY', 'SECONDARY', 'SUCCESS', 'ERROR', 'WARNING'])\nexport type ControlGroupVariantType = `${ValueOf<typeof ControlGroupVariants>}`\n\nexport const ControlGroupClass = {\n\troot: 'gov-control-group',\n}\n"]}

package/dist/collection/components/gov-control-group/gov-control-group.css

@@ -254,6 +254,24 @@
 .gov-control-group[variant=secondary] > * {
   border-right: var(--gov-control-group-border-secondary, 0.0625rem solid var(--gov-color-secondary-700));
 }
+.gov-control-group[variant=success] {
+  border: var(--gov-control-group-border-success, 0.0625rem solid var(--gov-color-success-500));
+}
+.gov-control-group[variant=success] > * {
+  border-right: var(--gov-control-group-border-success, 0.0625rem solid var(--gov-color-success-500));
+}
+.gov-control-group[variant=warning] {
+  border: var(--gov-control-group-border-warning, 0.0625rem solid var(--gov-color-warning-500));
+}
+.gov-control-group[variant=warning] > * {
+  border-right: var(--gov-control-group-border-warning, 0.0625rem solid var(--gov-color-warning-500));
+}
+.gov-control-group[variant=error] {
+  border: var(--gov-control-group-border-error, 0.0625rem solid var(--gov-color-error-400));
+}
+.gov-control-group[variant=error] > * {
+  border-right: var(--gov-control-group-border-error, 0.0625rem solid var(--gov-color-error-400));
+}
 .gov-control-group > *:last-child {
   border-right: none;
 }

package/dist/collection/components/gov-control-group/gov-control-group.js

@@ -34,7 +34,7 @@ export class GovControlGroup {
         "mutable": false,
         "complexType": {
           "original": "ControlGroupVariantType",
-          "resolved": "\"primary\" | \"secondary\"",
+          "resolved": "\"error\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"",
           "references": {
             "ControlGroupVariantType": {
               "location": "import",

package/dist/collection/components/gov-error-code/gov-error-code.css

@@ -254,8 +254,8 @@
   color: var(--gov-error-icon-color, var(--gov-color-primary));
 }
 .gov-error-code__icon > * {
-  width: 7.125rem;
-  height: 7.125rem;
+  width: 6.5625rem;
+  height: 6.5625rem;
 }
 @media (min-width: 48em) {
   .gov-error-code__icon {
@@ -264,7 +264,7 @@
     margin: 0 auto 2rem;
   }
   .gov-error-code__icon > * {
-    width: 9.5rem;
-    height: 9.5rem;
+    width: 8.75rem;
+    height: 8.75rem;
   }
 }

package/dist/collection/components/gov-form/control/gov-form-control.css

@@ -239,47 +239,47 @@
 .gov-form-control__bottom > *:last-child {
   margin-bottom: 0;
 }
+.gov-form-control__bottom > :first-child {
+  margin-top: 0.25rem;
+}
 .gov-form-control .gov-form-label .gov-form-label__label {
   margin: 0rem 0rem 0.25rem;
 }
-.gov-form-control .gov-form-control__bottom {
-  margin: 0.25rem 0rem 0rem;
-}
 .gov-form-control[type=file] .gov-form-label[slot=top] .gov-form-label__label {
   margin: 0rem 0rem 0.5rem;
 }
-.gov-form-control[type=file] .gov-form-control__bottom {
-  margin: 0.5rem 0rem 0rem;
+.gov-form-control[type=file] .gov-form-control__bottom > :first-child {
+  margin-top: 0.5rem;
 }
-.gov-form-control[size=xs][type=checkbox] .gov-form-control__holder > .gov-form-control__bottom, .gov-form-control[size=xs][type=radio] .gov-form-control__holder > .gov-form-control__bottom {
+.gov-form-control[size=xs][type=checkbox] .gov-form-control__holder > .gov-form-control__bottom > :first-child, .gov-form-control[size=xs][type=radio] .gov-form-control__holder > .gov-form-control__bottom > :first-child {
   margin-top: var(--gov-form-checkbox-core-xs-message-gap, 0.5rem);
   margin-left: calc(var(--gov-form-checkbox-core-xs-indicator-size, 1.25rem) + var(--gov-form-checkbox-core-xs-gap, 0.75rem));
 }
-.gov-form-control[size=s][type=checkbox] .gov-form-control__holder > .gov-form-control__bottom, .gov-form-control[size=s][type=radio] .gov-form-control__holder > .gov-form-control__bottom {
+.gov-form-control[size=s][type=checkbox] .gov-form-control__holder > .gov-form-control__bottom > :first-child, .gov-form-control[size=s][type=radio] .gov-form-control__holder > .gov-form-control__bottom > :first-child {
   margin-top: var(--gov-form-checkbox-core-s-message-gap, 0.5rem);
   margin-left: calc(var(--gov-form-checkbox-core-s-indicator-size, 1.375rem) + var(--gov-form-checkbox-core-s-gap, 0.75rem));
 }
-.gov-form-control[size=m][type=checkbox] .gov-form-control__holder > .gov-form-control__bottom, .gov-form-control[size=m][type=radio] .gov-form-control__holder > .gov-form-control__bottom {
+.gov-form-control[size=m][type=checkbox] .gov-form-control__holder > .gov-form-control__bottom > :first-child, .gov-form-control[size=m][type=radio] .gov-form-control__holder > .gov-form-control__bottom > :first-child {
   margin-top: var(--gov-form-checkbox-core-m-message-gap, 0.75rem);
   margin-left: calc(var(--gov-form-checkbox-core-m-indicator-size, 1.5rem) + var(--gov-form-checkbox-core-m-gap, 1rem));
 }
-.gov-form-control[size=l][type=checkbox] .gov-form-control__holder > .gov-form-control__bottom, .gov-form-control[size=l][type=radio] .gov-form-control__holder > .gov-form-control__bottom {
+.gov-form-control[size=l][type=checkbox] .gov-form-control__holder > .gov-form-control__bottom > :first-child, .gov-form-control[size=l][type=radio] .gov-form-control__holder > .gov-form-control__bottom > :first-child {
   margin-top: var(--gov-form-checkbox-core-l-message-gap, 0.75rem);
   margin-left: calc(var(--gov-form-checkbox-core-l-indicator-size, 2rem) + var(--gov-form-checkbox-core-l-gap, 1rem));
 }
-.gov-form-control[size=xs][type=switch] .gov-form-control__bottom {
+.gov-form-control[size=xs][type=switch] .gov-form-control__bottom > :first-child {
   margin-top: var(--gov-form-switch-xs-message-gap, 0.5rem);
   margin-left: calc(var(--gov-form-switch-xs-indicator-height, 1.25rem) * 1.6666666667 + var(--gov-form-switch-xs-gap, 0.75rem));
 }
-.gov-form-control[size=s][type=switch] .gov-form-control__bottom {
+.gov-form-control[size=s][type=switch] .gov-form-control__bottom > :first-child {
   margin-top: var(--gov-form-switch-s-message-gap, 0.5rem);
   margin-left: calc(var(--gov-form-switch-s-indicator-height, 1.375rem) * 1.6666666667 + var(--gov-form-switch-s-gap, 0.75rem));
 }
-.gov-form-control[size=m][type=switch] .gov-form-control__bottom {
+.gov-form-control[size=m][type=switch] .gov-form-control__bottom > :first-child {
   margin-top: var(--gov-form-switch-m-message-gap, 0.75rem);
   margin-left: calc(var(--gov-form-switch-m-indicator-height, 1.5rem) * 1.6666666667 + var(--gov-form-switch-m-gap, 1rem));
 }
-.gov-form-control[size=l][type=switch] .gov-form-control__bottom {
+.gov-form-control[size=l][type=switch] .gov-form-control__bottom > :first-child {
   margin-top: var(--gov-form-switch-l-message-gap, 0.75rem);
   margin-left: calc(var(--gov-form-switch-l-indicator-height, 2rem) * 1.6666666667 + var(--gov-form-switch-l-gap, 1rem));
 }

package/dist/collection/components/gov-form/label/gov-form-label.css

@@ -242,6 +242,11 @@
   box-sizing: border-box;
 }
 .gov-form-label[legend=""] .gov-form-label__label, .gov-form-label[legend=true i] .gov-form-label__label, .gov-form-label[legend="1"] .gov-form-label__label {
+  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);
   margin-bottom: 1rem;
+  padding: 0;
   color: var(--gov-form-legend-color, #3b3b3b);
 }