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

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

@@ -1,116 +1,61 @@
 import { h, Host } from "@stencil/core";
 import { validateProp } from "../../helpers/Validate/props";
-import { AccordionClass, AccordionItemClass, AccordionSizes, AccordionVariants, } from "./constants";
-import { createID } from "../../utils/string.utils";
+import { AccordionClass, AccordionItemClass, AccordionSizes, } from "./constants";
 import { booleanString, govHost, toBoolAttrIfDefined } from "../../helpers/Dom/template";
+import { inheritAriaAttributes } from "../../helpers/Accessibility/accessibility";
 export class GovAccordionItem {
     constructor() {
-        this.isExpandedState = undefined;
-        this.variant = undefined;
+        this.inheritedAttributes = {};
+        this.openState = undefined;
         this.identifier = undefined;
         this.size = undefined;
         this.disabled = false;
-        this.isExpanded = false;
+        this.open = false;
         this.h = govHost(this.host);
-        this.triggerId = createID("GovAccordionItem");
-        this.contentId = createID("GovAccordionContent");
     }
     validateSize(newValue) {
         validateProp(AccordionSizes, newValue, AccordionItemClass.root);
     }
-    validateVariant(newValue) {
-        validateProp(AccordionVariants, newValue, AccordionItemClass.root);
-    }
-    emmitChange() {
-        this.govChange.emit({
-            open: this.isExpanded,
-            component: AccordionItemClass.root,
-            ref: this.host,
-        });
-    }
     componentWillLoad() {
         this.getPropsFromParents();
         this.validateSize(this.size);
-        this.validateVariant(this.variant);
+        this.inheritedAttributes = inheritAriaAttributes(this.host);
     }
     getPropsFromParents() {
         const accordion = this.h.getParent(AccordionClass.root);
         if (accordion) {
             this.size = accordion.getAttribute("size");
-            this.variant = accordion.getAttribute("variant");
         }
     }
     render() {
-        const triggerId = this.identifier || this.triggerId;
-        const contentId = this.contentId;
-        return (h(Host, { key: '357951146184db343c08a2fc72c2feae24e3c42f', class: this.h.classes(AccordionItemClass.root), size: this.size, variant: this.variant, role: "listitem" }, h("button", { key: '64183d5b58665677700fcb2c91aed5fb306ae3b8', id: triggerId, class: AccordionItemClass.header, "aria-expanded": booleanString(this.isExpanded), "aria-controls": contentId, disabled: this.disabled, type: "button", "aria-disabled": toBoolAttrIfDefined(this.disabled), onClick: (e) => {
+        return (h(Host, { key: 'cd78429326c306d9ab9fdc15954cd7029aa3ee35', class: this.h.classes([AccordionItemClass.root,
+                this.disabled && AccordionItemClass.disabled]), size: this.size, role: "listitem" }, h("details", { key: '5372c71057418b93711f7d2c6065a6cc669105ff', class: AccordionItemClass.details, id: this.identifier, "aria-disabled": toBoolAttrIfDefined(this.disabled), open: this.open }, h("summary", Object.assign({ key: 'a2e06472048b79b206dc4421e43f0afd877b9be6', onClick: (e) => {
                 e.stopPropagation();
-                this.toggle().finally();
-            } }, this.h.hasSlot("icon") && (h("span", { key: '3db5f45266574e6e9e598e26a440d1a2c067c138', class: AccordionItemClass.icon }, h("slot", { key: 'ff91f81af8d15e5d9752be26f15c026420d8d315', name: "icon" }))), h("span", { key: 'cf3aa75e645c09ac118abadd2c73b54014bfe660', class: AccordionItemClass.title }, h("span", { key: '99338f94204495c30651ad8d5d43ca94b2d01828', class: AccordionItemClass.label }, h("slot", { key: 'f34f58cf7c95dd9160818076a64cf5d11a6926e7', name: "label" })), this.h.hasSlot("annotation") && (h("span", { key: '5f6371a19acad06d2fb321a673cfcdebd67d91e1', class: AccordionItemClass.annotation }, h("slot", { key: '97670629e4c44703e8d9ed9d48b696ec48fca231', name: "annotation" })))), h("span", { key: '0dadee7ff0df314e88f4e8de5797a05a5ef85f4d', class: AccordionItemClass.right }, this.h.hasSlot("suffix") && (h("span", { key: '05f1944dab7c757599e568cb42bb9e93be0cb6a6', class: AccordionItemClass.suffix }, h("slot", { key: 'c3cf39b6b83e4b2a058b7f486072c035d91644f6', name: "suffix" }))), h("span", { key: '9aa81ed287c99b3940e62c86c2652676ca3453a9', class: AccordionItemClass.arrow }, this.h.hasSlot("toggle-icon") ? (h("slot", { name: "toggle-icon" })) : (h("gov-icon", { name: "chevron-down" }))))), h("div", { key: '345544650036a6c3c82abc3519a63ed0ed8f74d6', class: AccordionItemClass.content, id: contentId, "aria-hidden": booleanString(!this.isExpanded), hidden: !this.isExpanded, "aria-labelledby": triggerId }, h("slot", { key: '311a281f4ae2fe322d46cf023730aeff32169738' }))));
-    }
-    /**
-     * Opening the accordion
-     */
-    async open() {
-        this.isExpanded = true;
-        this.emmitChange();
-    }
-    /**
-     * Closing the accordion
-     */
-    async close() {
-        this.isExpanded = false;
-        this.emmitChange();
+                e.preventDefault();
+                !this.disabled && this.toggle().finally();
+            }, class: AccordionItemClass.summary, tabIndex: this.disabled ? -1 : 0, "aria-expanded": booleanString(this.open) }, this.inheritedAttributes), this.h.hasSlot('icon') &&
+            h("span", { key: 'a2e6529d090c59ef45c8f7dbfd452165eebdf6e5', class: AccordionItemClass.icon }, h("slot", { key: 'ec572df22db3551aeb1baa31077d2bb368db88ca', name: "icon" })), h("span", { key: '44451f5e8df2550217af485162015a0810b2735e', class: AccordionItemClass.title }, h("slot", { key: '7f1c09f9537fe337a95e67b6f0c90c9c00ca00c1', name: "label" }), h("slot", { key: '84d426afff5847ffe57a96c12c163219a8720872', name: "annotation" })), h("span", { key: 'c4e37d6e8726486a043dd1def487d14e9678585b', class: AccordionItemClass.right }, h("slot", { key: 'b29e5714737ce05b8d194ce693dc4729e6b0e8a0', name: "suffix" }), h("span", { key: '1bd99c3f807ebc20ba4545d1c09325ce5b940d1a', class: AccordionItemClass.arrow }, h("slot", { key: 'ec2f902bccb6f21701238b822d72e7b2819c20c3', name: "toggle-icon" }, h("gov-icon", { key: 'ab143aace36d062bfb6e78c2f3544a0efb52cb49', name: "chevron-down" }))))), h("div", { key: '253f1a692a13698306d2f2f1b050252b7a798886', class: AccordionItemClass.content }, h("slot", { key: 'f51877b9d3f58f29bced6949b170529ddbf45864' })))));
     }
     /**
      * Accordion switch
      */
     async toggle() {
-        this.isExpanded = !this.isExpanded;
-        this.emmitChange();
+        this.open = !this.open;
+        this.govChange.emit({
+            open: this.open,
+            component: AccordionItemClass.root,
+            ref: this.host,
+        });
     }
     /**
      * Returns the current state of the component
      */
     async currentState() {
-        return this.isExpanded;
+        return this.open;
     }
     static get is() { return "gov-accordion-item"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["gov-accordion-item.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["gov-accordion-item.css"]
-        };
-    }
     static get properties() {
         return {
-            "variant": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "AccordionVariantType",
-                    "resolved": "\"custom\" | \"primary\" | \"secondary\"",
-                    "references": {
-                        "AccordionVariantType": {
-                            "location": "import",
-                            "path": "./constants",
-                            "id": "../../../packages/core/src/components/gov-accordion/constants.ts::AccordionVariantType"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Style variation of the button."
-                },
-                "attribute": "variant",
-                "reflect": false
-            },
             "identifier": {
                 "type": "string",
                 "mutable": false,
@@ -123,7 +68,7 @@ export class GovAccordionItem {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Custom accordion item identifier. Otherwise, it will be generated"
+                    "text": "Custom accordion item identifier."
                 },
                 "attribute": "identifier",
                 "reflect": false
@@ -133,7 +78,7 @@ export class GovAccordionItem {
                 "mutable": false,
                 "complexType": {
                     "original": "AccordionSizeType",
-                    "resolved": "\"l\" | \"m\" | \"s\" | \"xs\"",
+                    "resolved": "\"l\" | \"m\" | \"s\" | \"xl\" | \"xs\"",
                     "references": {
                         "AccordionSizeType": {
                             "location": "import",
@@ -163,13 +108,13 @@ export class GovAccordionItem {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Makes the button component disabled.\nThis prevents users from being able to interact with the button, and conveys its inactive state to assistive technologies."
+                    "text": "Makes the button component disabled."
                 },
                 "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "isExpanded": {
+            "open": {
                 "type": "boolean",
                 "mutable": true,
                 "complexType": {
@@ -183,7 +128,7 @@ export class GovAccordionItem {
                     "tags": [],
                     "text": "Defines whether the accordion is open or closed by button"
                 },
-                "attribute": "is-expanded",
+                "attribute": "open",
                 "reflect": false,
                 "defaultValue": "false"
             }
@@ -191,7 +136,7 @@ export class GovAccordionItem {
     }
     static get states() {
         return {
-            "isExpandedState": {}
+            "openState": {}
         };
     }
     static get events() {
@@ -220,40 +165,6 @@ export class GovAccordionItem {
     }
     static get methods() {
         return {
-            "open": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Opening the accordion",
-                    "tags": []
-                }
-            },
-            "close": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Closing the accordion",
-                    "tags": []
-                }
-            },
             "toggle": {
                 "complexType": {
                     "signature": "() => Promise<void>",
@@ -295,9 +206,6 @@ export class GovAccordionItem {
         return [{
                 "propName": "size",
                 "methodName": "validateSize"
-            }, {
-                "propName": "variant",
-                "methodName": "validateVariant"
             }];
     }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"gov-accordion-item.js","sourceRoot":"","sources":["../../../../../../src/components/gov-accordion/gov-accordion-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from \"@stencil/core\"\nimport { validateProp } from \"../../helpers/Validate/props\"\nimport {\n\tAccordionClass,\n\tAccordionItemClass,\n\tAccordionSizes,\n\tAccordionSizeType,\n\tAccordionVariants,\n\tAccordionVariantType,\n} from \"./constants\"\nimport { createID } from \"../../utils/string.utils\"\nimport { booleanString, govHost, toBoolAttrIfDefined } from \"../../helpers/Dom/template\"\nimport { AccordionItemEvent } from \"./gov-accordion.types\"\nimport { GovHost } from \"../../helpers/Dom/template.types\"\n\n@Component({\n\ttag: \"gov-accordion-item\",\n\tstyleUrl: \"gov-accordion-item.scss\",\n})\nexport class GovAccordionItem {\n\tprivate readonly triggerId: string\n\tprivate readonly contentId: string\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.triggerId = createID(\"GovAccordionItem\")\n\t\tthis.contentId = createID(\"GovAccordionContent\")\n\t}\n\n\t@Element() readonly host: HTMLGovAccordionItemElement\n\t@State() isExpandedState: boolean\n\n\t/**\n\t * Style variation of the button.\n\t */\n\t@Prop() variant?: AccordionVariantType\n\t/**\n\t * Custom accordion item identifier. Otherwise, it will be generated\n\t */\n\t@Prop() readonly identifier: string\n\t/**\n\t * Accordion’s size.\n\t */\n\t@Prop() size?: AccordionSizeType\n\t/**\n\t * Makes the button component disabled.\n\t * This prevents users from being able to interact with the button, and conveys its inactive state to assistive technologies.\n\t */\n\t@Prop() readonly disabled: boolean = false\n\t/**\n\t * Defines whether the accordion is open or closed by button\n\t */\n\t@Prop({ attribute: \"is-expanded\", mutable: true }) isExpanded = false\n\t/**\n\t * Called when the accordion state changes\n\t */\n\t@Event({ eventName: \"gov-change\" }) govChange: EventEmitter<AccordionItemEvent>\n\n\n\t@Watch(\"size\")\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(AccordionSizes, newValue, AccordionItemClass.root)\n\t}\n\n\t@Watch(\"variant\")\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(AccordionVariants, newValue, AccordionItemClass.root)\n\t}\n\n\tprivate emmitChange(): void {\n\t\tthis.govChange.emit({\n\t\t\topen: this.isExpanded,\n\t\t\tcomponent: AccordionItemClass.root,\n\t\t\tref: this.host,\n\t\t})\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.getPropsFromParents()\n\t\tthis.validateSize(this.size)\n\t\tthis.validateVariant(this.variant)\n\n\t}\n\n\tgetPropsFromParents() {\n\t\tconst accordion = this.h.getParent(AccordionClass.root)\n\t\tif (accordion) {\n\t\t\tthis.size = accordion.getAttribute(\"size\") as AccordionSizeType\n\t\t\tthis.variant = accordion.getAttribute(\"variant\") as AccordionVariantType\n\t\t}\n\t}\n\n\trender() {\n\t\tconst triggerId = this.identifier || this.triggerId\n\t\tconst contentId = this.contentId\n\n\t\treturn (\n\t\t\t<Host class={this.h.classes(AccordionItemClass.root)} size={this.size} variant={this.variant} role=\"listitem\">\n\t\t\t\t<button\n\t\t\t\t\tid={triggerId}\n\t\t\t\t\tclass={AccordionItemClass.header}\n\t\t\t\t\taria-expanded={booleanString(this.isExpanded)}\n\t\t\t\t\taria-controls={contentId}\n\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\ttype={\"button\"}\n\t\t\t\t\taria-disabled={toBoolAttrIfDefined(this.disabled)}\n\t\t\t\t\tonClick={(e: Event) => {\n\t\t\t\t\t\te.stopPropagation()\n\t\t\t\t\t\tthis.toggle().finally()\n\t\t\t\t\t}}>\n\n\t\t\t\t\t{this.h.hasSlot(\"icon\") && (\n\t\t\t\t\t\t<span class={AccordionItemClass.icon}>\n\t\t\t\t\t\t\t<slot name=\"icon\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t)}\n\n\t\t\t\t\t<span class={AccordionItemClass.title}>\n\t\t\t\t\t\t<span class={AccordionItemClass.label}>\n\t\t\t\t\t\t\t<slot name=\"label\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t{this.h.hasSlot(\"annotation\") && (\n\t\t\t\t\t\t\t<span class={AccordionItemClass.annotation}>\n\t\t\t\t\t\t\t\t<slot name=\"annotation\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</span>\n\n\t\t\t\t\t<span class={AccordionItemClass.right}>\n\t\t\t\t\t\t{this.h.hasSlot(\"suffix\") && (\n\t\t\t\t\t\t\t<span class={AccordionItemClass.suffix}>\n\t\t\t\t\t\t\t\t<slot name=\"suffix\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t<span class={AccordionItemClass.arrow}>\n\t\t\t\t\t\t\t{this.h.hasSlot(\"toggle-icon\") ? (\n\t\t\t\t\t\t\t\t<slot name=\"toggle-icon\" />\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<gov-icon name=\"chevron-down\"></gov-icon>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</span>\n\t\t\t\t</button>\n\t\t\t\t<div\n\t\t\t\t\tclass={AccordionItemClass.content}\n\t\t\t\t\tid={contentId}\n\t\t\t\t\taria-hidden={booleanString(!this.isExpanded)}\n\t\t\t\t\thidden={!this.isExpanded}\n\t\t\t\t\taria-labelledby={triggerId}>\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n\n\t/**\n\t * Opening the accordion\n\t */\n\t@Method()\n\tasync open(): Promise<void> {\n\t\tthis.isExpanded = true\n\t\tthis.emmitChange()\n\t}\n\n\t/**\n\t * Closing the accordion\n\t */\n\t@Method()\n\tasync close(): Promise<void> {\n\t\tthis.isExpanded = false\n\t\tthis.emmitChange()\n\t}\n\n\t/**\n\t * Accordion switch\n\t */\n\t@Method()\n\tasync toggle(): Promise<void> {\n\t\tthis.isExpanded = !this.isExpanded\n\t\tthis.emmitChange()\n\t}\n\n\t/**\n\t * Returns the current state of the component\n\t */\n\t@Method()\n\tasync currentState(): Promise<boolean> {\n\t\treturn this.isExpanded\n\t}\n}\n"]}
+{"version":3,"file":"gov-accordion-item.js","sourceRoot":"","sources":["../../../../../../src/components/gov-accordion/gov-accordion-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch} from \"@stencil/core\"\nimport {validateProp} from \"../../helpers/Validate/props\"\nimport {AccordionClass, AccordionItemClass, AccordionSizes, AccordionSizeType,} from \"./constants\"\nimport {booleanString, govHost, toBoolAttrIfDefined} from \"../../helpers/Dom/template\"\nimport {AccordionItemEvent} from \"./gov-accordion.types\"\nimport {GovHost} from \"../../helpers/Dom/template.types\"\nimport {inheritAriaAttributes} from \"../../helpers/Accessibility/accessibility\";\nimport {Attributes} from \"../../helpers/Dom/attribute\";\n\n@Component({\n\ttag: \"gov-accordion-item\",\n})\nexport class GovAccordionItem {\n\tprivate h: GovHost\n\tprivate inheritedAttributes: Attributes = {};\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() readonly host: HTMLGovAccordionItemElement\n\t@State() openState: boolean\n\n\t/**\n\t * Custom accordion item identifier.\n\t */\n\t@Prop() readonly identifier: string\n\t/**\n\t * Accordion’s size.\n\t */\n\t@Prop() size?: AccordionSizeType\n\t/**\n\t * Makes the button component disabled.\n\t */\n\t@Prop() readonly disabled: boolean = false\n\t/**\n\t * Defines whether the accordion is open or closed by button\n\t */\n\t@Prop({attribute: \"open\", mutable: true}) open = false\n\t/**\n\t * Called when the accordion state changes\n\t */\n\t@Event({eventName: \"gov-change\"}) govChange: EventEmitter<AccordionItemEvent>\n\n\t@Watch(\"size\")\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(AccordionSizes, newValue, AccordionItemClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.getPropsFromParents()\n\t\tthis.validateSize(this.size)\n\t\tthis.inheritedAttributes = inheritAriaAttributes(this.host);\n\t}\n\n\tprivate getPropsFromParents() {\n\t\tconst accordion = this.h.getParent(AccordionClass.root)\n\t\tif (accordion) {\n\t\t\tthis.size = accordion.getAttribute(\"size\") as AccordionSizeType\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes([AccordionItemClass.root,\n\t\t\t\tthis.disabled && AccordionItemClass.disabled])}\n\t\t\t\t  size={this.size}\n\t\t\t\t  role=\"listitem\">\n\t\t\t\t<details\n\t\t\t\t\tclass={AccordionItemClass.details}\n\t\t\t\t\tid={this.identifier}\n\t\t\t\t\taria-disabled={toBoolAttrIfDefined(this.disabled)}\n\t\t\t\t\topen={this.open}\n\t\t\t\t>\n\t\t\t\t\t<summary\n\t\t\t\t\t\tonClick={(e: Event) => {\n\t\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t!this.disabled && this.toggle().finally()\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tclass={AccordionItemClass.summary}\n\t\t\t\t\t\ttabIndex={this.disabled ? -1 : 0}\n\t\t\t\t\t\taria-expanded={booleanString(this.open)}\n\t\t\t\t\t\t{...this.inheritedAttributes}\n\t\t\t\t\t>\n\t\t\t\t\t\t{this.h.hasSlot('icon') &&\n\t\t\t\t\t\t\t<span class={AccordionItemClass.icon}>\n\t\t\t\t\t\t\t\t<slot name=\"icon\"/>\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t<span class={AccordionItemClass.title}>\n\t\t\t\t\t\t\t<slot name=\"label\"/>\n\t\t\t\t\t\t\t<slot name=\"annotation\"/>\n\t\t\t\t\t\t</span>\n\n\t\t\t\t\t\t<span class={AccordionItemClass.right}>\n\t\t\t\t\t\t\t<slot name=\"suffix\"/>\n\t\t\t\t\t\t\t<span class={AccordionItemClass.arrow}>\n\t\t\t\t\t\t\t\t<slot name=\"toggle-icon\">\n\t\t\t\t\t\t\t\t\t<gov-icon name=\"chevron-down\"></gov-icon>\n\t\t\t\t\t\t\t\t</slot>\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</summary>\n\t\t\t\t\t<div class={AccordionItemClass.content}>\n\t\t\t\t\t\t<slot/>\n\t\t\t\t\t</div>\n\t\t\t\t</details>\n\t\t\t</Host>\n\t\t)\n\t}\n\n\t/**\n\t * Accordion switch\n\t */\n\t@Method()\n\tasync toggle(): Promise<void> {\n\t\tthis.open = !this.open\n\t\tthis.govChange.emit({\n\t\t\topen: this.open,\n\t\t\tcomponent: AccordionItemClass.root,\n\t\t\tref: this.host,\n\t\t})\n\t}\n\n\t/**\n\t * Returns the current state of the component\n\t */\n\t@Method()\n\tasync currentState(): Promise<boolean> {\n\t\treturn this.open\n\t}\n}\n"]}

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

@@ -1,29 +1,19 @@
 import { h, Host } from "@stencil/core";
 import { validateProp } from "../../helpers/Validate/props";
-import { AccordionClass, AccordionSizes, AccordionItemClass } from "./constants";
-import { Variants } from "../../core/constants/variants";
-import { validateWcagLabel } from "../../helpers/Validate/wcag";
-import { canValidateWcagOnRender } from "../../helpers/Dom/win";
-import { delay } from "../../utils/utils";
+import { AccordionClass, AccordionItemClass, AccordionSizes } from "./constants";
 import { govHost } from "../../helpers/Dom/template";
 export class GovAccordion {
     constructor() {
+        this.hydrated = false;
         this.size = 'm';
-        this.variant = 'primary';
         this.noBorder = false;
-        this.wcagLabel = undefined;
-        this.wcagLabelledBy = undefined;
         this.h = govHost(this.host);
     }
     validateSize(newValue) {
         validateProp(AccordionSizes, newValue, AccordionClass.root);
     }
-    validateVariant(newValue) {
-        validateProp(Variants, newValue, AccordionClass.root);
-    }
     componentWillLoad() {
         this.validateSize(this.size);
-        this.validateVariant(this.variant);
     }
     componentDidLoad() {
         this.host.querySelectorAll(AccordionItemClass.root).forEach((child) => {
@@ -37,32 +27,13 @@ export class GovAccordion {
             });
         });
     }
-    async componentDidRender() {
-        if (canValidateWcagOnRender()) {
-            await delay(500);
-            await this.validateWcag();
-        }
+    connectedCallback() {
+        this.hydrated = true;
     }
     render() {
-        return (h(Host, { key: 'ad467ae56f7fc5752bc24da027a8f39630153be2', class: this.h.classes(AccordionClass.root), size: this.size, variant: this.variant, role: 'list', "arial-label": this.wcagLabel, "arial-labelledby": this.wcagLabelledBy }, h("slot", { key: '7d8e02440317a0fd87a32e46faea91d473e64f3a' })));
-    }
-    /**
-     * Validate the WCAG attributes of the component
-     */
-    async validateWcag() {
-        validateWcagLabel(this.wcagLabel, this.wcagLabelledBy, AccordionClass.root);
+        return (h(Host, { key: '98666441f80fcb633f05142c4a695e2478af5383', hydrated: this.hydrated, class: this.h.classes(AccordionClass.root), size: this.size, role: 'list' }, h("slot", { key: 'db7aa61e809f901019dcb301aa529cdc9bc7530e' })));
     }
     static get is() { return "gov-accordion"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["gov-accordion.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["gov-accordion.css"]
-        };
-    }
     static get properties() {
         return {
             "size": {
@@ -70,7 +41,7 @@ export class GovAccordion {
                 "mutable": false,
                 "complexType": {
                     "original": "AccordionSizeType",
-                    "resolved": "\"l\" | \"m\" | \"s\" | \"xs\"",
+                    "resolved": "\"l\" | \"m\" | \"s\" | \"xl\" | \"xs\"",
                     "references": {
                         "AccordionSizeType": {
                             "location": "import",
@@ -89,30 +60,6 @@ export class GovAccordion {
                 "reflect": false,
                 "defaultValue": "'m'"
             },
-            "variant": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "AccordionVariantType",
-                    "resolved": "\"custom\" | \"primary\" | \"secondary\"",
-                    "references": {
-                        "AccordionVariantType": {
-                            "location": "import",
-                            "path": "./constants",
-                            "id": "../../../packages/core/src/components/gov-accordion/constants.ts::AccordionVariantType"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Style variation of the button."
-                },
-                "attribute": "variant",
-                "reflect": false,
-                "defaultValue": "'primary'"
-            },
             "noBorder": {
                 "type": "boolean",
                 "mutable": false,
@@ -130,40 +77,6 @@ export class GovAccordion {
                 "attribute": "no-border",
                 "reflect": false,
                 "defaultValue": "false"
-            },
-            "wcagLabel": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Adds accessible label for the accordion that is only shown for screen readers."
-                },
-                "attribute": "wcag-label",
-                "reflect": false
-            },
-            "wcagLabelledBy": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "String of id's that indicate alternative labels elements"
-                },
-                "attribute": "wcag-labelled-by",
-                "reflect": false
             }
         };
     }
@@ -191,35 +104,11 @@ export class GovAccordion {
                 }
             }];
     }
-    static get methods() {
-        return {
-            "validateWcag": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Validate the WCAG attributes of the component",
-                    "tags": []
-                }
-            }
-        };
-    }
     static get elementRef() { return "host"; }
     static get watchers() {
         return [{
                 "propName": "size",
                 "methodName": "validateSize"
-            }, {
-                "propName": "variant",
-                "methodName": "validateVariant"
             }];
     }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"gov-accordion.js","sourceRoot":"","sources":["../../../../../../src/components/gov-accordion/gov-accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACrG,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAC3D,OAAO,EAAE,cAAc,EAAE,cAAc,EAAqB,kBAAkB,EAAwB,MAAM,aAAa,CAAA;AACzH,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AACxD,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;AAQpD,MAAM,OAAO,YAAY;IAGxB;oBAQ4C,GAAG;uBAIG,SAAS;wBAII,KAAK;;;QAfnE,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;KAC3B;IA6BD,YAAY,CAAC,QAAgB;QAC5B,YAAY,CAAC,cAAc,EAAE,QAAQ,EAAE,cAAc,CAAC,IAAI,CAAC,CAAA;IAC5D,CAAC;IAGD,eAAe,CAAC,QAAgB;QAC/B,YAAY,CAAC,QAAQ,EAAE,QAAQ,EAAE,cAAc,CAAC,IAAI,CAAC,CAAA;IACtD,CAAC;IAED,iBAAiB;QAChB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAC5B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;IACnC,CAAC;IAED,gBAAgB;QACf,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,KAAkC,EAAE,EAAE;YAClG,KAAK,CAAC,gBAAgB,CAAC,YAAY,EAAE,CAAC,CAAkC,EAAE,EAAE;gBAC3E,CAAC,CAAC,eAAe,EAAE,CAAA;gBACnB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;oBACnB,SAAS,EAAE,cAAc,CAAC,IAAI;oBAC9B,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,IAAI;oBACnB,GAAG,EAAE,CAAC,CAAC,MAAM,CAAC,GAAG;iBACjB,CAAC,CAAA;YACH,CAAC,CAAC,CAAA;QACH,CAAC,CAAC,CAAA;IACH,CAAC;IAED,KAAK,CAAC,kBAAkB;QACvB,IAAI,uBAAuB,EAAE,EAAE,CAAC;YAC/B,MAAM,KAAK,CAAC,GAAG,CAAC,CAAA;YAChB,MAAM,IAAI,CAAC,YAAY,EAAE,CAAA;QAC1B,CAAC;IACF,CAAC;IAED,MAAM;QACL,OAAO,CACN,EAAC,IAAI,qDACJ,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,cAAc,CAAC,IAAI,CAAC,EAC1C,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAE,MAAM,iBACC,IAAI,CAAC,SAAS,sBACT,IAAI,CAAC,cAAc;YACrC,8DAAQ,CACF,CACP,CAAA;IACF,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,YAAY;QACjB,iBAAiB,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,cAAc,EAAE,cAAc,CAAC,IAAI,CAAC,CAAA;IAC5E,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, Watch } from '@stencil/core'\nimport { validateProp } from '../../helpers/Validate/props'\nimport { AccordionClass, AccordionSizes, AccordionSizeType, AccordionItemClass, AccordionVariantType } from './constants'\nimport { Variants } from '../../core/constants/variants'\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'\nimport { AccordionEvent, AccordionItemEvent } from \"./gov-accordion.types\"\n\n@Component({\n\ttag: 'gov-accordion',\n\tstyleUrl: 'gov-accordion.scss',\n})\nexport class GovAccordion {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() readonly host: HTMLGovAccordionElement\n\t/**\n\t * Accordion’s size.\n\t */\n\t@Prop() readonly size?: AccordionSizeType = 'm'\n\t/**\n\t * Style variation of the button.\n\t */\n\t@Prop() readonly variant?: AccordionVariantType = 'primary'\n\t/**\n\t * Accordion item underline\n\t */\n\t@Prop({ attribute: 'no-border' }) readonly noBorder: boolean = false\n\t/**\n\t * Adds accessible label for the accordion that is only shown for screen readers.\n\t */\n\t@Prop({ attribute: 'wcag-label' }) readonly wcagLabel: string\n\t/**\n\t * String of id's that indicate alternative labels elements\n\t */\n\t@Prop({ attribute: 'wcag-labelled-by' }) readonly wcagLabelledBy: string\n\t/**\n\t * Called when the accordion state changes\n\t */\n\t@Event({ eventName: 'gov-change' }) govChange: EventEmitter<AccordionEvent>\n\n\t@Watch('size')\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(AccordionSizes, newValue, AccordionClass.root)\n\t}\n\n\t@Watch('variant')\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(Variants, newValue, AccordionClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateSize(this.size)\n\t\tthis.validateVariant(this.variant)\n\t}\n\n\tcomponentDidLoad() {\n\t\tthis.host.querySelectorAll(AccordionItemClass.root).forEach((child: HTMLGovAccordionItemElement) => {\n\t\t\tchild.addEventListener('gov-change', (e: CustomEvent<AccordionItemEvent>) => {\n\t\t\t\te.stopPropagation()\n\t\t\t\tthis.govChange.emit({\n\t\t\t\t\tcomponent: AccordionClass.root,\n\t\t\t\t\topen: e.detail.open,\n\t\t\t\t\tref: e.detail.ref\n\t\t\t\t})\n\t\t\t})\n\t\t})\n\t}\n\n\tasync componentDidRender() {\n\t\tif (canValidateWcagOnRender()) {\n\t\t\tawait delay(500)\n\t\t\tawait this.validateWcag()\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={this.h.classes(AccordionClass.root)}\n\t\t\t\tsize={this.size}\n\t\t\t\tvariant={this.variant}\n\t\t\t\trole={'list'}\n\t\t\t\tarial-label={this.wcagLabel}\n\t\t\t\tarial-labelledby={this.wcagLabelledBy}>\n\t\t\t\t<slot />\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, AccordionClass.root)\n\t}\n}\n"]}
+{"version":3,"file":"gov-accordion.js","sourceRoot":"","sources":["../../../../../../src/components/gov-accordion/gov-accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAC,MAAM,eAAe,CAAA;AAC3F,OAAO,EAAC,YAAY,EAAC,MAAM,8BAA8B,CAAA;AACzD,OAAO,EAAC,cAAc,EAAE,kBAAkB,EAAE,cAAc,EAAoB,MAAM,aAAa,CAAA;AACjG,OAAO,EAAC,OAAO,EAAC,MAAM,4BAA4B,CAAA;AAOlD,MAAM,OAAO,YAAY;IAIxB;QAFQ,aAAQ,GAAG,KAAK,CAAA;oBAUoB,GAAG;wBAIc,KAAK;QAXjE,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;KAC3B;IAiBD,YAAY,CAAC,QAAgB;QAC5B,YAAY,CAAC,cAAc,EAAE,QAAQ,EAAE,cAAc,CAAC,IAAI,CAAC,CAAA;IAC5D,CAAC;IAED,iBAAiB;QAChB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAC7B,CAAC;IAED,gBAAgB;QACf,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,KAAkC,EAAE,EAAE;YAClG,KAAK,CAAC,gBAAgB,CAAC,YAAY,EAAE,CAAC,CAAkC,EAAE,EAAE;gBAC3E,CAAC,CAAC,eAAe,EAAE,CAAA;gBACnB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;oBACnB,SAAS,EAAE,cAAc,CAAC,IAAI;oBAC9B,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,IAAI;oBACnB,GAAG,EAAE,CAAC,CAAC,MAAM,CAAC,GAAG;iBACjB,CAAC,CAAA;YACH,CAAC,CAAC,CAAA;QACH,CAAC,CAAC,CAAA;IACH,CAAC;IAED,iBAAiB;QAChB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAA;IACrB,CAAC;IAED,MAAM;QACL,OAAO,CACN,EAAC,IAAI,qDACJ,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,cAAc,CAAC,IAAI,CAAC,EAC1C,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,MAAM;YACZ,8DAAO,CACD,CACP,CAAA;IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import {Component, Element, Event, EventEmitter, h, Host, Prop, Watch} from '@stencil/core'\nimport {validateProp} from '../../helpers/Validate/props'\nimport {AccordionClass, AccordionItemClass, AccordionSizes, AccordionSizeType} from './constants'\nimport {govHost} from '../../helpers/Dom/template'\nimport {GovHost} from '../../helpers/Dom/template.types'\nimport {AccordionEvent, AccordionItemEvent} from \"./gov-accordion.types\"\n\n@Component({\n\ttag: 'gov-accordion',\n})\nexport class GovAccordion {\n\tprivate h: GovHost\n\tprivate hydrated = false\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() readonly host: HTMLGovAccordionElement\n\t/**\n\t * Accordion’s size.\n\t */\n\t@Prop() readonly size?: AccordionSizeType = 'm'\n\t/**\n\t * Accordion item underline\n\t */\n\t@Prop({attribute: 'no-border'}) readonly noBorder: boolean = false\n\t/**\n\t * Called when the accordion state changes\n\t */\n\t@Event({eventName: 'gov-change'}) govChange: EventEmitter<AccordionEvent>\n\n\t@Watch('size')\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(AccordionSizes, newValue, AccordionClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateSize(this.size)\n\t}\n\n\tcomponentDidLoad() {\n\t\tthis.host.querySelectorAll(AccordionItemClass.root).forEach((child: HTMLGovAccordionItemElement) => {\n\t\t\tchild.addEventListener('gov-change', (e: CustomEvent<AccordionItemEvent>) => {\n\t\t\t\te.stopPropagation()\n\t\t\t\tthis.govChange.emit({\n\t\t\t\t\tcomponent: AccordionClass.root,\n\t\t\t\t\topen: e.detail.open,\n\t\t\t\t\tref: e.detail.ref\n\t\t\t\t})\n\t\t\t})\n\t\t})\n\t}\n\n\tconnectedCallback() {\n\t\tthis.hydrated = true\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\thydrated={this.hydrated}\n\t\t\t\tclass={this.h.classes(AccordionClass.root)}\n\t\t\t\tsize={this.size}\n\t\t\t\trole={'list'}>\n\t\t\t\t<slot/>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

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

@@ -0,0 +1,68 @@
+/* stylelint-disable */
+/* stylelint-enable */
+/* stylelint-disable */
+/* stylelint-enable */
+/* stylelint-disable */
+/* stylelint-enable */
+/* stylelint-disable */
+/* stylelint-enable */
+/* Converts hex value to rgb colors value */ /* Generates CSS3 var */ /* stylelint-disable order/order */
+/* stylelint-enable order/order */
+/* stylelint-disable order/order */
+/* stylelint-enable order/order */
+/* Variables - breakpoints */ /* Variables - Colors */ /* Variables - Sizes */ /* Variables - General */ /* Variables - Typography */ /* Variables - Container */ /* Variables - Forms */ /* Variables - shadows */ /* Variables - z-index */ /* stylelint-disable order/order */
+/* stylelint-enable order/order */
+.gov-spin-animation,
+.gov-pseudo-spin-animation::before {
+  animation: spin 4s linear infinite;
+}
+
+@keyframes spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes countdown {
+  to {
+    transform: scaleX(0);
+  }
+}
+@keyframes progress {
+  0% {
+    background-position: -200px 0;
+  }
+  100% {
+    background-position: calc(200px + 100%) 0;
+  }
+}
+@keyframes pulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+html,
+body {
+  margin: 0;
+  padding: 0;
+}
+
+.container-view {
+  padding: 12px;
+}
+
+hr {
+  height: 0;
+  border: 0 none;
+  border-top: 1px solid gainsboro;
+  font-size: 0;
+}
+
+hr.inversed {
+  border-top-color: #254e80;
+}