@gov-design-system-ce/components 4.0.8-rc23 → 4.1.0-rc1

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

@@ -1,49 +1,68 @@
 import { h, Host } from "@stencil/core";
-import { govHost, toBoolAttr } from "../../helpers/Dom/template";
 import { validateProp } from "../../helpers/Validate/props";
+import { govHost } from "../../helpers/Dom/template";
+import { ChipClass, ChipSizes, NativeType } from "./constants";
+import { ButtonColors, ButtonSizes } from "../gov-button/button/constants";
 import { createID } from "../../utils/string.utils";
-import { ButtonSizes, ButtonVariants } from "../gov-button/button/constants";
 import { prepareIconFormat } from "../gov-icon/helpers";
-import { ChipClass, NativeType } from "./constants";
+import { inheritAriaAttributes } from "../../helpers/Accessibility/accessibility";
+import { ariaAttributes } from "../../helpers/Accessibility/attributes";
+import { AttributeObserver } from "../../helpers/Dom/attribute";
 export class GovChip {
     constructor() {
-        this.inverse = false;
+        this.hydrated = false;
         this.disabled = false;
         this.href = undefined;
         this.target = undefined;
         this.iconLeft = undefined;
         this.iconRight = undefined;
-        this.size = ButtonSizes._M;
+        this.size = ChipSizes._M;
         this.tag = "span";
-        this.variant = ButtonVariants.PRIMARY;
+        this.color = ButtonColors.PRIMARY;
+        this.type = undefined;
         this.focusable = true;
         this.identifier = undefined;
-        this.wcagLabel = undefined;
-        this.wcagControls = undefined;
-        this.wcagSelected = undefined;
+        this.inheritedAttributes = {};
         this.h = govHost(this.host);
         this.chipId = createID('GovChip');
     }
-    validateVariant(newValue) {
-        validateProp(ButtonVariants, newValue, ChipClass.root);
+    validateColor(newValue) {
+        validateProp(ButtonColors, newValue, ChipClass.root);
     }
     validateSize(newValue) {
         validateProp(ButtonSizes, newValue, ChipClass.root);
     }
     componentWillLoad() {
-        this.validateVariant(this.variant);
+        this.validateColor(this.color);
         this.validateSize(this.size);
+        this.inheritedAttributes = inheritAriaAttributes(this.host);
+    }
+    componentDidLoad() {
+        this.attributeObserver = new AttributeObserver(this.host, (attributeName, newValue) => {
+            this.onAriaAttributeChange(attributeName, newValue);
+        });
+        this.attributeObserver.startObserving(ariaAttributes);
+    }
+    disconnectedCallback() {
+        this.attributeObserver.stopObserving();
+    }
+    connectedCallback() {
+        this.hydrated = true;
+    }
+    onAriaAttributeChange(attributeName, newValue) {
+        this.host.removeAttribute(attributeName);
+        this.inheritedAttributes = Object.assign(Object.assign({}, this.inheritedAttributes), { [attributeName]: newValue });
     }
     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, { key: 'a762fc72978ddaeef9650f94ce10750ef7339f86', class: this.h.classes([
+        return (h(Host, { key: '7273e571a906515a35208303f36eb3d2bac4b663', 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, { key: '278edb0a21fe15e7aa574daad619096e57f2d6a5', class: "element", href: this.href, target: this.target, "aria-label": this.wcagLabel, ref: el => (this.triggerRef = el), onClick: this.onClickHandler.bind(this), "aria-disabled": this.disabled, "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", { key: '3056115d4e10bd23be18b1f5114ad81fe7063972', name: "left" }), this.h.hasSlot("left-icon") && h("slot", { key: '21172846bfc95710974cec7d0d2dd5fe48dd122e', name: "left-icon" }), iconLeft && h("gov-icon", { key: '12fdcd9d663f48449ca0c3235e742fda539c4cf9', type: iconLeft.type, name: iconLeft.name }), h("slot", { key: 'ce4f6aecc3138306568b50baf4d56bd855d47eb5' }), this.h.hasSlot("right-icon") && h("slot", { key: '80899c41df389000947551bc7bb03d6d97b1c675', name: "right-icon" }), this.h.hasSlot("right") && h("slot", { key: 'e07dee9e45dc081780112cb60ccacce6123a5df2', name: "right" }), iconRight && h("gov-icon", { key: '0ecd33e0d71635e56a5852f5687a77059c3143e4', type: iconRight.type, name: iconRight.name }))));
+            ]), disabled: this.disabled, href: this.href, color: this.color, type: this.type, size: this.size, hoverable: Tag == NativeType.A || Tag == NativeType.BUTTON, hydrated: this.hydrated }, h(Tag, Object.assign({ key: '8c32f17c36a757d8be7ae813ca113aa505375159', class: "element", href: this.href, target: this.target, ref: el => (this.triggerRef = el), onClick: this.onClickHandler.bind(this), tabindex: (this.h.hasSlot("left") || this.h.hasSlot("right") || this.disabled) && !this.focusable ? "-1" : "0", id: this.identifier || this.chipId, type: nativeType }, this.inheritedAttributes, { "aria-disabled": this.disabled }), h("slot", { key: 'e9fec4f49fbb1b43f73face265bc3c8dfcebc4fe', name: "left" }), h("slot", { key: '7fd9b938c44c55e66041d9298e285f34c80a0722', name: "left-icon" }, iconLeft && h("gov-icon", { key: '5f1a73b93fdbecfc0fe30ad45d0a86444e1b4703', type: iconLeft.type, name: iconLeft.name })), h("slot", { key: 'e63ae004f3c4b5e164e326ca7cff300b68ba02ee' }), h("slot", { key: '39da8e323a6623cfb0eb6f6807931f496cfeb867', name: "right-icon" }, iconRight && h("gov-icon", { key: '1518485f6d60b515a138dedc142ca7a013dd67bb', type: iconRight.type, name: iconRight.name })), h("slot", { key: '20059af90e74b6f8bb68673c56b387fd558eee29', name: "right" }))));
     }
     onClickHandler(e) {
         e.stopPropagation();
@@ -54,15 +73,9 @@ export class GovChip {
     /**
      * Returns a clickable element instance
      */
-    async getTriggerRef() {
+    async geRef() {
         return this.triggerRef;
     }
-    /**
-     * Returns a unique tab trigger identifier
-     */
-    async getTriggerIdentifier() {
-        return this.identifier || this.chipId;
-    }
     /**
      * Focus button element
      */
@@ -70,36 +83,8 @@ export class GovChip {
         this.triggerRef.focus();
     }
     static get is() { return "gov-chip"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["gov-chip.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["gov-chip.css"]
-        };
-    }
     static get properties() {
         return {
-            "inverse": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Determine if component should have inverse colors to be used on dark background"
-                },
-                "attribute": "inverse",
-                "reflect": false,
-                "defaultValue": "false"
-            },
             "disabled": {
                 "type": "boolean",
                 "mutable": false,
@@ -112,10 +97,10 @@ export class GovChip {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Makes the chip component disabled.\nThis prevents users from being able to interact with the button, and conveys its inactive state to assistive technologies."
+                    "text": "Makes the chip component disabled."
                 },
                 "attribute": "disabled",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "false"
             },
             "href": {
@@ -196,13 +181,13 @@ export class GovChip {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "ButtonSizesType",
-                    "resolved": "\"l\" | \"m\" | \"s\" | \"xl\" | \"xs\"",
+                    "original": "ChipSizesType",
+                    "resolved": "\"m\" | \"s\" | \"xs\"",
                     "references": {
-                        "ButtonSizesType": {
+                        "ChipSizesType": {
                             "location": "import",
-                            "path": "../gov-button/button/constants",
-                            "id": "../../../packages/core/src/components/gov-button/button/constants.ts::ButtonSizesType"
+                            "path": "./constants",
+                            "id": "../../../packages/core/src/components/gov-chip/constants.ts::ChipSizesType"
                         }
                     }
                 },
@@ -214,7 +199,7 @@ export class GovChip {
                 },
                 "attribute": "size",
                 "reflect": false,
-                "defaultValue": "ButtonSizes._M"
+                "defaultValue": "ChipSizes._M"
             },
             "tag": {
                 "type": "string",
@@ -240,17 +225,17 @@ export class GovChip {
                 "reflect": false,
                 "defaultValue": "\"span\""
             },
-            "variant": {
+            "color": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "ButtonVariantType",
-                    "resolved": "\"error\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"",
+                    "original": "ButtonColorType",
+                    "resolved": "\"error\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"",
                     "references": {
-                        "ButtonVariantType": {
+                        "ButtonColorType": {
                             "location": "import",
                             "path": "../gov-button/button/constants",
-                            "id": "../../../packages/core/src/components/gov-button/button/constants.ts::ButtonVariantType"
+                            "id": "../../../packages/core/src/components/gov-button/button/constants.ts::ButtonColorType"
                         }
                     }
                 },
@@ -260,9 +245,32 @@ export class GovChip {
                     "tags": [],
                     "text": "Style variation of the chip."
                 },
-                "attribute": "variant",
+                "attribute": "color",
                 "reflect": false,
-                "defaultValue": "ButtonVariants.PRIMARY"
+                "defaultValue": "ButtonColors.PRIMARY"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ChipTypesType",
+                    "resolved": "\"outlined\" | \"solid\"",
+                    "references": {
+                        "ChipTypesType": {
+                            "location": "import",
+                            "path": "./constants",
+                            "id": "../../../packages/core/src/components/gov-chip/constants.ts::ChipTypesType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Chip\u2019s type"
+                },
+                "attribute": "type",
+                "reflect": true
             },
             "focusable": {
                 "type": "boolean",
@@ -301,63 +309,14 @@ export class GovChip {
                 },
                 "attribute": "identifier",
                 "reflect": false
-            },
-            "wcagLabel": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Adds accessible label for the button that is only shown for screen readers.\nTypically, this label text replaces the visible text on the button for users who use assistive technology."
-                },
-                "attribute": "wcag-label",
-                "reflect": false
-            },
-            "wcagControls": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "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"
-                },
-                "attribute": "wcag-controls",
-                "reflect": false
-            },
-            "wcagSelected": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "link",
-                            "text": "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected"
-                        }],
-                    "text": "Same as original parameter"
-                },
-                "attribute": "wcag-selected",
-                "reflect": false
             }
         };
     }
+    static get states() {
+        return {
+            "inheritedAttributes": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "govClick",
@@ -383,7 +342,7 @@ export class GovChip {
     }
     static get methods() {
         return {
-            "getTriggerRef": {
+            "geRef": {
                 "complexType": {
                     "signature": "() => Promise<HTMLLinkElement | HTMLButtonElement | HTMLSpanElement>",
                     "parameters": [],
@@ -412,23 +371,6 @@ export class GovChip {
                     "tags": []
                 }
             },
-            "getTriggerIdentifier": {
-                "complexType": {
-                    "signature": "() => Promise<string>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<string>"
-                },
-                "docs": {
-                    "text": "Returns a unique tab trigger identifier",
-                    "tags": []
-                }
-            },
             "setFocus": {
                 "complexType": {
                     "signature": "() => Promise<void>",
@@ -451,8 +393,8 @@ export class GovChip {
     static get elementRef() { return "host"; }
     static get watchers() {
         return [{
-                "propName": "variant",
-                "methodName": "validateVariant"
+                "propName": "color",
+                "methodName": "validateColor"
             }, {
                 "propName": "size",
                 "methodName": "validateSize"

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\"\n\nimport { govHost, toBoolAttr } from \"../../helpers/Dom/template\"\nimport { GovHost } from \"../../helpers/Dom/template.types\"\nimport { validateProp } from \"../../helpers/Validate/props\"\nimport { createID } from \"../../utils/string.utils\"\nimport { ButtonSizes, ButtonSizesType, ButtonVariants, ButtonVariantType } from \"../gov-button/button/constants\"\nimport { prepareIconFormat } from \"../gov-icon/helpers\"\nimport { ChipClass, NativeType, NativeTypesType } from \"./constants\"\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-disabled={this.disabled}\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"]}
+{"version":3,"file":"gov-chip.js","sourceRoot":"","sources":["../../../../../../src/components/gov-chip/gov-chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAC,MAAM,eAAe,CAAA;AAE1G,OAAO,EAAC,YAAY,EAAC,MAAM,8BAA8B,CAAA;AACzD,OAAO,EAAC,OAAO,EAAC,MAAM,4BAA4B,CAAA;AAClD,OAAO,EAAC,SAAS,EAAE,SAAS,EAAgC,UAAU,EAAkB,MAAM,aAAa,CAAA;AAC3G,OAAO,EAAC,YAAY,EAAmB,WAAW,EAAC,MAAM,gCAAgC,CAAA;AACzF,OAAO,EAAC,QAAQ,EAAC,MAAM,0BAA0B,CAAA;AACjD,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAC,qBAAqB,EAAC,MAAM,2CAA2C,CAAC;AAChF,OAAO,EAAC,cAAc,EAAC,MAAM,wCAAwC,CAAC;AACtE,OAAO,EAAC,iBAAiB,EAAa,MAAM,6BAA6B,CAAC;AAK1E,MAAM,OAAO,OAAO;IAOnB;QAHQ,aAAQ,GAAG,KAAK,CAAA;wBAa4B,KAAK;;;;;oBAsBlB,SAAS,CAAC,EAAE;mBAIX,MAAM;qBAIJ,YAAY,CAAC,OAAO;;yBASxB,IAAI;;mCAoBC,EAAE;QApE5C,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAC3B,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAA;KACjC;IAyDD,aAAa,CAAC,QAAgB;QAC7B,YAAY,CAAC,YAAY,EAAE,QAAQ,EAAE,SAAS,CAAC,IAAI,CAAC,CAAA;IACrD,CAAC;IAGD,YAAY,CAAC,QAAgB;QAC5B,YAAY,CAAC,WAAW,EAAE,QAAQ,EAAE,SAAS,CAAC,IAAI,CAAC,CAAA;IACpD,CAAC;IAID,iBAAiB;QAChB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QAC9B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAC5B,IAAI,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAC5D,CAAC;IAED,gBAAgB;QACf,IAAI,CAAC,iBAAiB,GAAG,IAAI,iBAAiB,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,aAAa,EAAE,QAAQ,EAAE,EAAE;YACrF,IAAI,CAAC,qBAAqB,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;QACrD,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,iBAAiB,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;IACvD,CAAC;IAED,oBAAoB;QACnB,IAAI,CAAC,iBAAiB,CAAC,aAAa,EAAE,CAAC;IACxC,CAAC;IAED,iBAAiB;QAChB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAA;IACrB,CAAC;IAED,qBAAqB,CAAC,aAAqB,EAAE,QAAgB;QAC5D,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,aAAa,CAAC,CAAA;QACxC,IAAI,CAAC,mBAAmB,mCAAO,IAAI,CAAC,mBAAmB,KAAE,CAAC,aAAa,CAAC,EAAE,QAAQ,GAAC,CAAC;IACrF,CAAC;IAED,MAAM;QACL,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAA;QAC/C,MAAM,UAAU,GAAG,GAAG,IAAI,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAA;QAE3E,MAAM,QAAQ,GAAG,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;QACjD,MAAM,SAAS,GAAG,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;QAEnD,OAAO,CACN,EAAC,IAAI,qDACJ,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC;gBACrB,SAAS,CAAC,IAAI;gBACd,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;gBACxD,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS;aACtD,CAAC,EACF,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAE,GAAG,IAAI,UAAU,CAAC,CAAC,IAAI,GAAG,IAAI,UAAU,CAAC,MAAM,EAC1D,QAAQ,EAAE,IAAI,CAAC,QAAQ;YAEvB,EAAC,GAAG,mEACH,KAAK,EAAC,SAAS,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,EAA2D,CAAC,EAC1F,OAAO,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,EACvC,QAAQ,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,EAC9G,EAAE,EAAE,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,MAAM,EAClC,IAAI,EAAE,UAAU,IACZ,IAAI,CAAC,mBAAmB,qBACb,IAAI,CAAC,QAAQ;gBAC5B,6DAAM,IAAI,EAAC,MAAM,GAAQ;gBACzB,6DAAM,IAAI,EAAC,WAAW,IACpB,QAAQ,IAAI,iEAAU,IAAI,EAAE,QAAQ,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,CAAC,IAAI,GAAa,CACtE;gBACP,8DAAO;gBACP,6DAAM,IAAI,EAAC,YAAY,IACrB,SAAS,IAAI,iEAAU,IAAI,EAAE,SAAS,CAAC,IAAI,EAAE,IAAI,EAAE,SAAS,CAAC,IAAI,GAAa,CACzE;gBACP,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACrB,CACA,CACP,CAAA;IACF,CAAC;IAEO,cAAc,CAAC,CAAe;QACrC,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB,IAAI,IAAI,CAAC,QAAQ,KAAK,KAAK,IAAI,IAAI,CAAC,GAAG,KAAK,UAAU,CAAC,MAAM,EAAE,CAAC;YAC/D,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;QACtB,CAAC;IACF,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,KAAK;QACV,OAAO,IAAI,CAAC,UAAU,CAAA;IACvB,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,QAAQ;QACb,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,CAAA;IACxB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import {Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch} from \"@stencil/core\"\nimport {GovHost} from \"../../helpers/Dom/template.types\"\nimport {validateProp} from \"../../helpers/Validate/props\"\nimport {govHost} from \"../../helpers/Dom/template\"\nimport {ChipClass, ChipSizes, ChipSizesType, ChipTypesType, NativeType, NativeTypesType} from \"./constants\"\nimport {ButtonColors, ButtonColorType, ButtonSizes} from \"../gov-button/button/constants\"\nimport {createID} from \"../../utils/string.utils\"\nimport {prepareIconFormat} from \"../gov-icon/helpers\";\nimport {inheritAriaAttributes} from \"../../helpers/Accessibility/accessibility\";\nimport {ariaAttributes} from \"../../helpers/Accessibility/attributes\";\nimport {AttributeObserver, Attributes} from \"../../helpers/Dom/attribute\";\n\n@Component({\n\ttag: \"gov-chip\",\n})\nexport class GovChip {\n\tprivate triggerRef?: HTMLButtonElement | HTMLLinkElement | HTMLSpanElement\n\tprivate h: GovHost\n\tprivate readonly chipId: string\n\tprivate hydrated = false\n\tprivate attributeObserver: AttributeObserver\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 * Makes the chip component disabled.\n\t */\n\t@Prop({reflect: true}) 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: ChipSizesType = ChipSizes._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 color: ButtonColorType = ButtonColors.PRIMARY\n\t/**\n\t * Chip’s type\n\t */\n\t@Prop({reflect: true}) readonly type: ChipTypesType\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 * Emitted when the button click.\n\t */\n\t@Event({eventName: \"gov-click\"}) govClick: EventEmitter<PointerEvent>\n\n\t@Watch(\"color\")\n\tvalidateColor(newValue: string): void {\n\t\tvalidateProp(ButtonColors, 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\t@State() inheritedAttributes: Attributes = {}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateColor(this.color)\n\t\tthis.validateSize(this.size)\n\t\tthis.inheritedAttributes = inheritAriaAttributes(this.host)\n\t}\n\n\tcomponentDidLoad() {\n\t\tthis.attributeObserver = new AttributeObserver(this.host, (attributeName, newValue) => {\n\t\t\tthis.onAriaAttributeChange(attributeName, newValue);\n\t\t});\n\n\t\tthis.attributeObserver.startObserving(ariaAttributes);\n\t}\n\n\tdisconnectedCallback() {\n\t\tthis.attributeObserver.stopObserving();\n\t}\n\n\tconnectedCallback() {\n\t\tthis.hydrated = true\n\t}\n\n\tonAriaAttributeChange(attributeName: string, newValue: string) {\n\t\tthis.host.removeAttribute(attributeName)\n\t\tthis.inheritedAttributes = {...this.inheritedAttributes, [attributeName]: newValue};\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\tcolor={this.color}\n\t\t\t\ttype={this.type}\n\t\t\t\tsize={this.size}\n\t\t\t\thoverable={Tag == NativeType.A || Tag == NativeType.BUTTON}\n\t\t\t\thydrated={this.hydrated}\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\tref={el => (this.triggerRef = el as HTMLLinkElement | HTMLButtonElement | HTMLSpanElement)}\n\t\t\t\t\tonClick={this.onClickHandler.bind(this)}\n\t\t\t\t\ttabindex={(this.h.hasSlot(\"left\") || this.h.hasSlot(\"right\") || this.disabled) && !this.focusable ? \"-1\" : \"0\"}\n\t\t\t\t\tid={this.identifier || this.chipId}\n\t\t\t\t\ttype={nativeType}\n\t\t\t\t\t{...this.inheritedAttributes}\n\t\t\t\t\taria-disabled={this.disabled}>\n\t\t\t\t\t<slot name=\"left\"></slot>\n\t\t\t\t\t<slot name=\"left-icon\">\n\t\t\t\t\t\t{iconLeft && <gov-icon type={iconLeft.type} name={iconLeft.name}></gov-icon>}\n\t\t\t\t\t</slot>\n\t\t\t\t\t<slot/>\n\t\t\t\t\t<slot name=\"right-icon\">\n\t\t\t\t\t\t{iconRight && <gov-icon type={iconRight.type} name={iconRight.name}></gov-icon>}\n\t\t\t\t\t</slot>\n\t\t\t\t\t<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 geRef() {\n\t\treturn this.triggerRef\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-container/gov-container.js

@@ -6,7 +6,7 @@ export class GovContainer {
         this.h = govHost(this.host);
     }
     render() {
-        return (h(Host, { key: '35735c7662824c56fe127967c5048d120f27ee67', class: this.h.classes(ContainerClass.root) }, h("slot", { key: 'a84f0a0315f583291c722b68a3161b16784d7609' })));
+        return (h(Host, { key: 'f1a8dda159411bb7eed4db33d408ddd70a2327be', class: this.h.classes(ContainerClass.root) }, h("slot", { key: 'afe117ecdcb7bb6225e4612400e1627dcc80bff9' })));
     }
     /**
      * Returns slotted children
@@ -17,16 +17,6 @@ export class GovContainer {
         return Promise.resolve(slottedChildren(this.host));
     }
     static get is() { return "gov-container"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["gov-container.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["gov-container.css"]
-        };
-    }
     static get methods() {
         return {
             "slottedChildren": {

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

@@ -1 +1 @@
-{"version":3,"file":"gov-container.js","sourceRoot":"","sources":["../../../../../../src/components/gov-container/gov-container.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AACnE,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAErE,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAM5C,MAAM,OAAO,YAAY;IAGxB;QACC,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAC5B,CAAC;IAID,MAAM;QACL,OAAO,CACN,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,cAAc,CAAC,IAAI,CAAC;YAC/C,8DAAQ,CACF,CACP,CAAA;IACF,CAAC;IAED;;;;OAIG;IAEH,KAAK,CAAC,eAAe;QACpB,OAAO,OAAO,CAAC,OAAO,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IACnD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, h, Host, Method } from '@stencil/core'\nimport { govHost, slottedChildren } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.types'\nimport { ContainerClass } from './constants'\n\n@Component({\n\ttag: 'gov-container',\n\tstyleUrl: 'gov-container.scss',\n})\nexport class GovContainer {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovContainerElement\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes(ContainerClass.root)}>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t)\n\t}\n\n\t/**\n\t * Returns slotted children\n\t *\n\t * @return {Promise<Node[]>}\n\t */\n\t@Method()\n\tasync slottedChildren(): Promise<Node[]> {\n\t\treturn Promise.resolve(slottedChildren(this.host))\n\t}\n}\n"]}
+{"version":3,"file":"gov-container.js","sourceRoot":"","sources":["../../../../../../src/components/gov-container/gov-container.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AACnE,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAErE,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAK5C,MAAM,OAAO,YAAY;IAGxB;QACC,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAC5B,CAAC;IAID,MAAM;QACL,OAAO,CACN,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,cAAc,CAAC,IAAI,CAAC;YAC/C,8DAAQ,CACF,CACP,CAAA;IACF,CAAC;IAED;;;;OAIG;IAEH,KAAK,CAAC,eAAe;QACpB,OAAO,OAAO,CAAC,OAAO,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IACnD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, h, Host, Method } from '@stencil/core'\nimport { govHost, slottedChildren } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.types'\nimport { ContainerClass } from './constants'\n\n@Component({\n\ttag: 'gov-container',\n})\nexport class GovContainer {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovContainerElement\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes(ContainerClass.root)}>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t)\n\t}\n\n\t/**\n\t * Returns slotted children\n\t *\n\t * @return {Promise<Node[]>}\n\t */\n\t@Method()\n\tasync slottedChildren(): Promise<Node[]> {\n\t\treturn Promise.resolve(slottedChildren(this.host))\n\t}\n}\n"]}

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

@@ -1,6 +1,6 @@
-import { Variants } from "../../core/constants/variants";
+import { Colors } from "../../core/constants/colors";
 import { pick } from "../../utils/utils";
-export const ControlGroupVariants = pick(Variants, ['PRIMARY', 'SECONDARY', 'SUCCESS', 'ERROR', 'WARNING']);
+export const ControlGroupColors = pick(Colors, ['PRIMARY', 'SECONDARY', 'NEUTRAL', 'ERROR', 'SUCCESS', '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,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,CAAC,CAAC,CAAA;AAG3G,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAChC,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"]}
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../src/components/gov-control-group/constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAA;AAEpD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAA;AAExC,MAAM,CAAC,MAAM,kBAAkB,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC,CAAA;AAGlH,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAChC,IAAI,EAAE,mBAAmB;CACzB,CAAA","sourcesContent":["import { Colors } from '../../core/constants/colors'\nimport { ValueOf } from '../../types/interfaces'\nimport { pick } from '../../utils/utils'\n\nexport const ControlGroupColors = pick(Colors, ['PRIMARY', 'SECONDARY', 'NEUTRAL', 'ERROR', 'SUCCESS', 'WARNING'])\nexport type ControlGroupColorType = `${ValueOf<typeof ControlGroupColors>}`\n\nexport const ControlGroupClass = {\n\troot: 'gov-control-group',\n}\n"]}

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

@@ -1,45 +1,35 @@
 import { h, Host } from "@stencil/core";
-import { Variants } from "../../core/constants/variants";
+import { Colors } from "../../core/constants/colors";
 import { govHost } from "../../helpers/Dom/template";
 import { validateProp } from "../../helpers/Validate/props";
 import { ControlGroupClass } from "./constants";
 export class GovControlGroup {
     constructor() {
-        this.variant = Variants.PRIMARY;
+        this.color = Colors.PRIMARY;
         this.noBorder = false;
+        this.fitContent = false;
         this.h = govHost(this.host);
     }
-    validateVariant(newValue) {
-        validateProp(Variants, newValue, ControlGroupClass.root);
+    validateColor(newValue) {
+        validateProp(Colors, newValue, ControlGroupClass.root);
     }
     render() {
-        const noBorder = this.noBorder === true ? "no-border" : undefined;
-        return (h(Host, { key: 'bcc85d1e3452c30c4e3e64f26c8cc04645ab1aaf', class: this.h.classes([ControlGroupClass.root, noBorder]), variant: this.variant }, h("slot", { key: '21984ed0f64cdae936cdd8fb22615e96c0910bec' })));
+        return (h(Host, { key: '41426d0763507d60dcf24a6f0fe3d69b54d5131f', class: this.h.classes(ControlGroupClass.root), color: this.color }, h("slot", { key: '0c67c4137be61b821e008779210543af73d7984c' })));
     }
     static get is() { return "gov-control-group"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["gov-control-group.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["gov-control-group.css"]
-        };
-    }
     static get properties() {
         return {
-            "variant": {
+            "color": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "ControlGroupVariantType",
-                    "resolved": "\"error\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"",
+                    "original": "ControlGroupColorType",
+                    "resolved": "\"error\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"",
                     "references": {
-                        "ControlGroupVariantType": {
+                        "ControlGroupColorType": {
                             "location": "import",
                             "path": "./constants",
-                            "id": "../../../packages/core/src/components/gov-control-group/constants.ts::ControlGroupVariantType"
+                            "id": "../../../packages/core/src/components/gov-control-group/constants.ts::ControlGroupColorType"
                         }
                     }
                 },
@@ -49,9 +39,9 @@ export class GovControlGroup {
                     "tags": [],
                     "text": "Style variation of the content message."
                 },
-                "attribute": "variant",
+                "attribute": "color",
                 "reflect": false,
-                "defaultValue": "Variants.PRIMARY"
+                "defaultValue": "Colors.PRIMARY"
             },
             "noBorder": {
                 "type": "boolean",
@@ -70,14 +60,32 @@ export class GovControlGroup {
                 "attribute": "no-border",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "fitContent": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies the display of elements to full width"
+                },
+                "attribute": "fit-content",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
     static get elementRef() { return "host"; }
     static get watchers() {
         return [{
-                "propName": "variant",
-                "methodName": "validateVariant"
+                "propName": "color",
+                "methodName": "validateColor"
             }];
     }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"gov-control-group.js","sourceRoot":"","sources":["../../../../../../src/components/gov-control-group/gov-control-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAEpD,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAC3D,OAAO,EAAE,iBAAiB,EAA2B,MAAM,aAAa,CAAA;AAMxE,MAAM,OAAO,eAAe;IAG3B;uBAQoD,QAAQ,CAAC,OAAO;wBAIL,KAAK;QAXnE,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;KAC3B;IAaD,eAAe,CAAC,QAAgB;QAC/B,YAAY,CAAC,QAAQ,EAAE,QAAQ,EAAE,iBAAiB,CAAC,IAAI,CAAC,CAAA;IACzD,CAAC;IAED,MAAM;QACL,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAA;QACjE,OAAO,CACN,EAAC,IAAI,qDACJ,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,iBAAiB,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,EACzD,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,8DAAQ,CACF,CACP,CAAA;IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, h, Host, Prop, Watch } from \"@stencil/core\"\nimport { Variants } from \"../../core/constants/variants\"\nimport { govHost } from \"../../helpers/Dom/template\"\nimport { GovHost } from \"../../helpers/Dom/template.types\"\nimport { validateProp } from \"../../helpers/Validate/props\"\nimport { ControlGroupClass, ControlGroupVariantType } from \"./constants\"\n\n@Component({\n\ttag: \"gov-control-group\",\n\tstyleUrl: \"gov-control-group.scss\",\n})\nexport class GovControlGroup {\n\tprivate readonly h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovControlGroupElement\n\t/**\n\t * Style variation of the content message.\n\t */\n\t@Prop() readonly variant: ControlGroupVariantType = Variants.PRIMARY\n\t/**\n\t * Specifies the display of the border between elements\n\t */\n\t@Prop({ attribute: \"no-border\" }) readonly noBorder: boolean = false\n\n\t@Watch(\"variant\")\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(Variants, newValue, ControlGroupClass.root)\n\t}\n\n\trender() {\n\t\tconst noBorder = this.noBorder === true ? \"no-border\" : undefined\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={this.h.classes([ControlGroupClass.root, noBorder])}\n\t\t\t\tvariant={this.variant}>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}
+{"version":3,"file":"gov-control-group.js","sourceRoot":"","sources":["../../../../../../src/components/gov-control-group/gov-control-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACxE,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAA;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAEpD,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAC3D,OAAO,EAAE,iBAAiB,EAAyB,MAAM,aAAa,CAAA;AAKtE,MAAM,OAAO,eAAe;IAG3B;qBAQgD,MAAM,CAAC,OAAO;wBAIC,KAAK;0BAID,KAAK;QAfvE,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;KAC3B;IAiBD,aAAa,CAAC,QAAgB;QAC7B,YAAY,CAAC,MAAM,EAAE,QAAQ,EAAE,iBAAiB,CAAC,IAAI,CAAC,CAAA;IACvD,CAAC;IAED,MAAM;QACL,OAAO,CACN,EAAC,IAAI,qDACJ,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAC7C,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,8DAAQ,CACF,CACP,CAAA;IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, h, Host, Prop, Watch } from \"@stencil/core\"\nimport { Colors } from \"../../core/constants/colors\"\nimport { govHost } from \"../../helpers/Dom/template\"\nimport { GovHost } from \"../../helpers/Dom/template.types\"\nimport { validateProp } from \"../../helpers/Validate/props\"\nimport { ControlGroupClass, ControlGroupColorType } from \"./constants\"\n\n@Component({\n\ttag: \"gov-control-group\",\n})\nexport class GovControlGroup {\n\tprivate readonly h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovControlGroupElement\n\t/**\n\t * Style variation of the content message.\n\t */\n\t@Prop() readonly color: ControlGroupColorType = Colors.PRIMARY\n\t/**\n\t * Specifies the display of the border between elements\n\t */\n\t@Prop({ attribute: \"no-border\" }) readonly noBorder: boolean = false\n\t/**\n\t * Specifies the display of elements to full width\n\t */\n\t@Prop({ attribute: \"fit-content\" }) readonly fitContent: boolean = false\n\n\t@Watch(\"color\")\n\tvalidateColor(newValue: string): void {\n\t\tvalidateProp(Colors, newValue, ControlGroupClass.root)\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={this.h.classes(ControlGroupClass.root)}\n\t\t\t\tcolor={this.color}>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

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

@@ -1,9 +1,8 @@
-export const CookiebarClass = {
+export const CookieConsentClass = {
     root: 'gov-cookiebar',
-    holder: 'gov-cookiebar__holder',
     content: 'gov-cookiebar__content',
     actions: 'gov-cookiebar__actions',
-    actionsPrimary: 'gov-cookiebar__actions-primary',
-    actionsSecondary: 'gov-cookiebar__actions-secondary',
+    actionsPrimary: 'gov-cookiebar__actions--primary',
+    actionsSecondary: 'gov-cookiebar__actions--secondary',
 };
 //# sourceMappingURL=constants.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../src/components/gov-cookiebar/constants.tsx"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,cAAc,GAAG;IAC7B,IAAI,EAAE,eAAe;IACrB,MAAM,EAAE,uBAAuB;IAC/B,OAAO,EAAE,wBAAwB;IACjC,OAAO,EAAE,wBAAwB;IACjC,cAAc,EAAE,gCAAgC;IAChD,gBAAgB,EAAE,kCAAkC;CACpD,CAAA","sourcesContent":["export const CookiebarClass = {\n\troot: 'gov-cookiebar',\n\tholder: 'gov-cookiebar__holder',\n\tcontent: 'gov-cookiebar__content',\n\tactions: 'gov-cookiebar__actions',\n\tactionsPrimary: 'gov-cookiebar__actions-primary',\n\tactionsSecondary: 'gov-cookiebar__actions-secondary',\n}\n"]}
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../src/components/gov-cookiebar/constants.tsx"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,kBAAkB,GAAG;IACjC,IAAI,EAAE,eAAe;IACrB,OAAO,EAAE,wBAAwB;IACjC,OAAO,EAAE,wBAAwB;IACjC,cAAc,EAAE,iCAAiC;IACjD,gBAAgB,EAAE,mCAAmC;CACrD,CAAA","sourcesContent":["export const CookieConsentClass = {\n\troot: 'gov-cookiebar',\n\tcontent: 'gov-cookiebar__content',\n\tactions: 'gov-cookiebar__actions',\n\tactionsPrimary: 'gov-cookiebar__actions--primary',\n\tactionsSecondary: 'gov-cookiebar__actions--secondary',\n}\n"]}

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

@@ -1,24 +1,14 @@
 import { h, Host } from "@stencil/core";
 import { govHost } from "../../helpers/Dom/template";
-import { CookiebarClass } from "./constants";
+import { CookieConsentClass } from "./constants";
 export class GovCookiebar {
     constructor() {
         this.h = govHost(this.host);
     }
     render() {
-        return (h(Host, { key: '6a5611e51a1b8f8b28ab26610f996108163d0984', class: this.h.classes(CookiebarClass.root) }, h("div", { key: 'b13c933c0148793db30738419206024a3fa3fe6b', class: CookiebarClass.holder }, h("div", { key: '72a6c3bfa91d05d5b8bdbda929f2e14e1e6b088b', class: CookiebarClass.content }, h("slot", { key: 'd8dfcd756269a79e368eccc1ec8e74fe5ca3d78d' })), (this.h.hasSlot('actions-primary') || this.h.hasSlot('actions-secondary')) && (h("div", { key: '709d985f515870a0b2ba420bed0504b10e4084fa', class: CookiebarClass.actions }, this.h.hasSlot('actions-primary') && (h("div", { key: 'c8c1f120a3be8bad685722f159b421202e34ecee', class: CookiebarClass.actionsPrimary }, h("slot", { key: 'ab75e519298f74599b2dd81983fdd383cc107339', name: "actions-primary" }))), this.h.hasSlot('actions-secondary') && (h("div", { key: 'ad0c34b6d8264e04937375be96f8a2fce9d2cdad', class: CookiebarClass.actionsSecondary }, h("slot", { key: 'db94b03571c793242fec2e1e47f84ce656b3932f', name: "actions-secondary" }))))))));
+        return (h(Host, { key: 'ac6045b566122680c12a0cdf5068d81d53f4f4a9', class: this.h.classes(CookieConsentClass.root) }, h("div", { key: 'f03a1401b65a6a90430dcad642bbceb8e843143b', class: CookieConsentClass.content }, h("slot", { key: 'a373d6a55d299c240cc5aa596090dccb2a071e64', name: "headline" }), h("slot", { key: 'c5e9b1c6a1ec0daf9959fae074983fd2d5131320' })), (this.h.hasSlot('actions-primary') || this.h.hasSlot('actions-secondary')) && (h("div", { key: '21d6131b451e16abff7270a521b7aa18b8e8c340', class: CookieConsentClass.actions }, this.h.hasSlot('actions-primary') && (h("div", { key: '8b3d07e54492d9374f1398b4c48afa9df5bf9052', class: CookieConsentClass.actionsPrimary }, h("slot", { key: '15d29f653408e2910c64f11847307ab9e8394951', name: "actions-primary" }))), this.h.hasSlot('actions-secondary') && (h("div", { key: 'ef629c9a63af59cb5cf127127c2b04d8524091a1', class: CookieConsentClass.actionsSecondary }, h("slot", { key: 'e9b571f11d5b5077d3862376e5588db2e4e37f66', name: "actions-secondary" })))))));
     }
     static get is() { return "gov-cookiebar"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["gov-cookiebar.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["gov-cookiebar.css"]
-        };
-    }
     static get elementRef() { return "host"; }
 }
 //# sourceMappingURL=gov-cookiebar.js.map