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

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

@@ -11,19 +11,9 @@ export class GovGridItem {
         this.h = govHost(this.host);
     }
     render() {
-        return (h(Host, { key: '79494871c22fd420c4c84c0b6dff5d84777068cb', class: this.h.classes(GridItemClass.root), role: "listitem", size: this.size, "size-sm": this.sizeSm, "size-md": this.sizeMd, "size-lg": this.sizeLg, "size-xl": this.sizeXl }, h("slot", { key: '21a3472ced307a9cbb9beb50833bf7d1ea3cca01' })));
+        return (h(Host, { key: 'e1dc6e3517618361ab3b5e3ad499a5bbbaae3d6a', class: this.h.classes(GridItemClass.root), role: "listitem", size: this.size, "size-sm": this.sizeSm, "size-md": this.sizeMd, "size-lg": this.sizeLg, "size-xl": this.sizeXl }, h("slot", { key: '53780db95fa728f252302cb86923ad9e9fcd9b66' })));
     }
     static get is() { return "gov-grid-item"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["gov-grid-item.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["gov-grid-item.css"]
-        };
-    }
     static get properties() {
         return {
             "size": {

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

@@ -1 +1 @@
-{"version":3,"file":"gov-grid-item.js","sourceRoot":"","sources":["../../../../../../src/components/gov-grid/gov-grid-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAOpD,MAAM,OAAO,WAAW;IAGvB;oBAQgC,OAAO;;;;;QAPtC,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;KAC3B;IAwBD,MAAM;QACL,OAAO,CACN,EAAC,IAAI,qDACJ,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC,EACzC,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,aACN,IAAI,CAAC,MAAM,aACX,IAAI,CAAC,MAAM,aACX,IAAI,CAAC,MAAM,aACX,IAAI,CAAC,MAAM;YAEpB,8DAAQ,CACF,CACP,CAAA;IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, h, Host, Prop } from '@stencil/core'\nimport { GridItemClass } from './constants'\nimport { govHost } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.types'\n\n@Component({\n\ttag: 'gov-grid-item',\n\tstyleUrl: 'gov-grid-item.scss',\n})\nexport class GovGridItem {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() readonly host: HTMLGovGridItemElement\n\t/**\n\t * Cell size as a fraction of 1/12 of the grid size\n\t */\n\t@Prop() readonly size: string = '12/12'\n\t/**\n\t * Cell size for SM media query and up as a fraction of 12 of the grid size\n\t */\n\t@Prop({ attribute: 'size-sm' }) readonly sizeSm: string\n\t/**\n\t * Cell size for MD media query and up as a fraction of 12 of the grid size\n\t */\n\t@Prop({ attribute: 'size-md' }) readonly sizeMd: string\n\t/**\n\t * Cell size for LG media query and up as a fraction of 12 of the grid size\n\t */\n\t@Prop({ attribute: 'size-lg' }) readonly sizeLg: string\n\t/**\n\t * Cell size for XL media query and up as a fraction of 12 of the grid size\n\t */\n\t@Prop({ attribute: 'size-xl' }) readonly sizeXl: string\n\n\trender() {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={this.h.classes(GridItemClass.root)}\n\t\t\t\trole=\"listitem\"\n\t\t\t\tsize={this.size}\n\t\t\t\tsize-sm={this.sizeSm}\n\t\t\t\tsize-md={this.sizeMd}\n\t\t\t\tsize-lg={this.sizeLg}\n\t\t\t\tsize-xl={this.sizeXl}\n\t\t\t>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}
+{"version":3,"file":"gov-grid-item.js","sourceRoot":"","sources":["../../../../../../src/components/gov-grid/gov-grid-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAMpD,MAAM,OAAO,WAAW;IAGvB;oBAQgC,OAAO;;;;;QAPtC,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;KAC3B;IAwBD,MAAM;QACL,OAAO,CACN,EAAC,IAAI,qDACJ,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC,EACzC,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,aACN,IAAI,CAAC,MAAM,aACX,IAAI,CAAC,MAAM,aACX,IAAI,CAAC,MAAM,aACX,IAAI,CAAC,MAAM;YAEpB,8DAAQ,CACF,CACP,CAAA;IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, h, Host, Prop } from '@stencil/core'\nimport { GridItemClass } from './constants'\nimport { govHost } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.types'\n\n@Component({\n\ttag: 'gov-grid-item',\n})\nexport class GovGridItem {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() readonly host: HTMLGovGridItemElement\n\t/**\n\t * Cell size as a fraction of 1/12 of the grid size\n\t */\n\t@Prop() readonly size: string = '12/12'\n\t/**\n\t * Cell size for SM media query and up as a fraction of 12 of the grid size\n\t */\n\t@Prop({ attribute: 'size-sm' }) readonly sizeSm: string\n\t/**\n\t * Cell size for MD media query and up as a fraction of 12 of the grid size\n\t */\n\t@Prop({ attribute: 'size-md' }) readonly sizeMd: string\n\t/**\n\t * Cell size for LG media query and up as a fraction of 12 of the grid size\n\t */\n\t@Prop({ attribute: 'size-lg' }) readonly sizeLg: string\n\t/**\n\t * Cell size for XL media query and up as a fraction of 12 of the grid size\n\t */\n\t@Prop({ attribute: 'size-xl' }) readonly sizeXl: string\n\n\trender() {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={this.h.classes(GridItemClass.root)}\n\t\t\t\trole=\"listitem\"\n\t\t\t\tsize={this.size}\n\t\t\t\tsize-sm={this.sizeSm}\n\t\t\t\tsize-md={this.sizeMd}\n\t\t\t\tsize-lg={this.sizeLg}\n\t\t\t\tsize-xl={this.sizeXl}\n\t\t\t>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

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

@@ -9,19 +9,9 @@ export class GovGrid {
     }
     // vertical / horizontal align
     render() {
-        return (h(Host, { key: 'aed30d9127e18f97b43e6a7ec73d821d0db6f50a', class: this.h.classes(GridClass.root), "align-x": this.alignX, "align-y": this.alignY, role: "list" }, h("slot", { key: '1c56274cdc2f345293b968763aee84cd43d6bb19' })));
+        return (h(Host, { key: 'd2f4e42a186e0d8020abc96ef3ca0956e1492d05', class: this.h.classes(GridClass.root), "align-x": this.alignX, "align-y": this.alignY, role: "list" }, h("slot", { key: '46c60ccdda81ce271aeaca46bead1bf33e22c041' })));
     }
     static get is() { return "gov-grid"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["gov-grid.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["gov-grid.css"]
-        };
-    }
     static get properties() {
         return {
             "alignX": {

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

@@ -1 +1 @@
-{"version":3,"file":"gov-grid.js","sourceRoot":"","sources":["../../../../../../src/components/gov-grid/gov-grid.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAOpD,MAAM,OAAO,OAAO;IAGnB;;;QACC,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;KAC3B;IAaD,8BAA8B;IAE9B,MAAM;QACL,OAAO,CACN,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,aAAW,IAAI,CAAC,MAAM,aAAW,IAAI,CAAC,MAAM,EAAE,IAAI,EAAC,MAAM;YACnG,8DAAa,CACP,CACP,CAAA;IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, h, Host, Prop } from '@stencil/core'\nimport { GridClass } from './constants'\nimport { govHost } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.types'\n\n@Component({\n\ttag: 'gov-grid',\n\tstyleUrl: 'gov-grid.scss',\n})\nexport class GovGrid {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovGridElement\n\t/**\n\t * Horizontal align of cells\n\t */\n\t@Prop({ attribute: 'align-x' }) readonly alignX: string\n\n\t/**\n\t * Vertical align of cells\n\t */\n\t@Prop({ attribute: 'align-y' }) readonly alignY: string\n\n\t// vertical / horizontal align\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes(GridClass.root)} align-x={this.alignX} align-y={this.alignY} role=\"list\">\n\t\t\t\t<slot></slot>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}
+{"version":3,"file":"gov-grid.js","sourceRoot":"","sources":["../../../../../../src/components/gov-grid/gov-grid.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAMpD,MAAM,OAAO,OAAO;IAGnB;;;QACC,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;KAC3B;IAaD,8BAA8B;IAE9B,MAAM;QACL,OAAO,CACN,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,aAAW,IAAI,CAAC,MAAM,aAAW,IAAI,CAAC,MAAM,EAAE,IAAI,EAAC,MAAM;YACnG,8DAAa,CACP,CACP,CAAA;IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, h, Host, Prop } from '@stencil/core'\nimport { GridClass } from './constants'\nimport { govHost } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.types'\n\n@Component({\n\ttag: 'gov-grid',\n})\nexport class GovGrid {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovGridElement\n\t/**\n\t * Horizontal align of cells\n\t */\n\t@Prop({ attribute: 'align-x' }) readonly alignX: string\n\n\t/**\n\t * Vertical align of cells\n\t */\n\t@Prop({ attribute: 'align-y' }) readonly alignY: string\n\n\t// vertical / horizontal align\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes(GridClass.root)} align-x={this.alignX} align-y={this.alignY} role=\"list\">\n\t\t\t\t<slot></slot>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

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

@@ -1,3 +1,18 @@
+import { pick } from "../../utils/utils";
+import { Colors } from "../../core/constants/colors";
+export const IconColors = pick(Colors, [
+    'DEFAULT',
+    'DISABLED',
+    'ERROR',
+    'NEUTRAL',
+    'SECONDARY',
+    'SUCCESS',
+    'WARNING',
+    'ON_BOLD_WHITE',
+    'ON_BOLD_BLACK',
+    'ON_SUBTLE',
+    'WHITE_FIXED'
+]);
 var Types;
 (function (Types) {
     Types["BASIC"] = "basic";

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

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../src/components/gov-icon/constants.ts"],"names":[],"mappings":"AAEA,IAAK,KAIJ;AAJD,WAAK,KAAK;IACT,wBAAe,CAAA;IACf,4BAAmB,CAAA;IACnB,4BAAmB,CAAA;AACpB,CAAC,EAJI,KAAK,KAAL,KAAK,QAIT;AAGD,MAAM,CAAC,MAAM,SAAS,GAAG;IACxB,IAAI,EAAE,UAAU;IAChB,MAAM,EAAE,kBAAkB;CAC1B,CAAA","sourcesContent":["import { ValueOf } from '../../types/interfaces'\n\nenum Types {\n\tBASIC = 'basic',\n\tCOMPLEX = 'complex',\n\tCOLORED = 'colored',\n}\nexport type Type = `${ValueOf<typeof Types>}`\n\nexport const IconClass = {\n\troot: 'gov-icon',\n\tholder: 'gov-icon__holder',\n}\n"]}
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../src/components/gov-icon/constants.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAErD,MAAM,CAAC,MAAM,UAAU,GAAG,IAAI,CAAC,MAAM,EAAE;IACtC,SAAS;IACT,UAAU;IACV,OAAO;IACP,SAAS;IACT,WAAW;IACX,SAAS;IACT,SAAS;IACT,eAAe;IACf,eAAe;IACf,WAAW;IACX,aAAa;CACb,CAAC,CAAA;AAGF,IAAK,KAIJ;AAJD,WAAK,KAAK;IACT,wBAAe,CAAA;IACf,4BAAmB,CAAA;IACnB,4BAAmB,CAAA;AACpB,CAAC,EAJI,KAAK,KAAL,KAAK,QAIT;AAGD,MAAM,CAAC,MAAM,SAAS,GAAG;IACxB,IAAI,EAAE,UAAU;IAChB,MAAM,EAAE,kBAAkB;CAC1B,CAAA","sourcesContent":["import { ValueOf } from '../../types/interfaces'\nimport { pick } from '../../utils/utils';\nimport { Colors } from '../../core/constants/colors';\n\nexport const IconColors = pick(Colors, [\n\t'DEFAULT',\n\t'DISABLED',\n\t'ERROR',\n\t'NEUTRAL',\n\t'SECONDARY',\n\t'SUCCESS',\n\t'WARNING',\n\t'ON_BOLD_WHITE',\n\t'ON_BOLD_BLACK',\n\t'ON_SUBTLE',\n\t'WHITE_FIXED'\n])\nexport type IconColorType = `${ValueOf<typeof IconColors>}`\n\nenum Types {\n\tBASIC = 'basic',\n\tCOMPLEX = 'complex',\n\tCOLORED = 'colored',\n}\nexport type Type = `${ValueOf<typeof Types>}`\n\nexport const IconClass = {\n\troot: 'gov-icon',\n\tholder: 'gov-icon__holder',\n}\n"]}

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

@@ -3,26 +3,27 @@ import { IconClass } from "./constants";
 import { fetchIcon } from "../../utils/icon.utils";
 import { govHost } from "../../helpers/Dom/template";
 import { iconsLazyLoad } from "../../helpers/Dom/win";
+import { isString } from "../../utils/helpers.types";
+import { IconColors } from "./constants";
+import { validateProp } from "../../helpers/Validate/props";
 export class GovIcon {
     constructor() {
+        this.color = undefined;
         this.name = null;
         this.type = "basic";
-        this.iconData = undefined;
         this.visible = false;
         this.error = false;
         this.h = govHost(this.host);
     }
+    validateColor(newValue) {
+        validateProp(IconColors, newValue, IconClass.root);
+    }
     async loadIconPathData() {
-        const { name, visible, type } = this;
+        const { name, visible } = this;
         if (!Build.isBrowser || !name || !visible) {
             return;
         }
-        try {
-            this.iconData = await fetchIcon({ name, type });
-        }
-        catch (e) {
-            this.error = true;
-        }
+        await this.loadIcon();
     }
     connectedCallback() {
         if (iconsLazyLoad()) {
@@ -43,6 +44,7 @@ export class GovIcon {
         }
     }
     async componentWillLoad() {
+        this.validateColor(this.color);
         await this.loadIconPathData();
     }
     waitUntilVisible(callback) {
@@ -63,26 +65,51 @@ export class GovIcon {
         }, { rootMargin: "50px" });
         this.intersectionObserver.observe(this.host);
     }
+    async loadIcon() {
+        try {
+            const { name, type } = this;
+            const data = await fetchIcon({ name, type });
+            const isValid = isString(data) && data.indexOf('svg') > -1;
+            this.host.innerHTML = isValid ? data : null;
+        }
+        catch (e) {
+            this.host.innerHTML = '';
+            this.error = true;
+        }
+    }
     render() {
         if (this.error) {
             return null;
         }
-        return (h(Host, { class: this.h.classes(IconClass.root) }, h("span", { class: IconClass.holder, innerHTML: this.iconData })));
+        return (h(Host, { class: this.h.classes(IconClass.root), color: this.color }));
     }
     static get is() { return "gov-icon"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["gov-icon.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["gov-icon.css"]
-        };
-    }
     static get assetsDirs() { return ["assets"]; }
     static get properties() {
         return {
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconColorType",
+                    "resolved": "\"default\" | \"disabled\" | \"error\" | \"neutral\" | \"on-bold-black\" | \"on-bold-white\" | \"on-subtle\" | \"secondary\" | \"success\" | \"warning\" | \"white-fixed\"",
+                    "references": {
+                        "IconColorType": {
+                            "location": "import",
+                            "path": "./constants",
+                            "id": "../../../packages/core/src/components/gov-icon/constants.ts::IconColorType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Style variation of the button"
+                },
+                "attribute": "color",
+                "reflect": true
+            },
             "name": {
                 "type": "string",
                 "mutable": false,
@@ -95,10 +122,10 @@ export class GovIcon {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Name of icon"
+                    "text": "Name of icon in folder"
                 },
                 "attribute": "name",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "null"
             },
             "type": {
@@ -116,14 +143,13 @@ export class GovIcon {
                     "text": "Type (folder) of icon"
                 },
                 "attribute": "type",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "\"basic\""
             }
         };
     }
     static get states() {
         return {
-            "iconData": {},
             "visible": {},
             "error": {}
         };
@@ -131,6 +157,9 @@ export class GovIcon {
     static get elementRef() { return "host"; }
     static get watchers() {
         return [{
+                "propName": "color",
+                "methodName": "validateColor"
+            }, {
                 "propName": "name",
                 "methodName": "loadIconPathData"
             }];

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

@@ -1 +1 @@
-{"version":3,"file":"gov-icon.js","sourceRoot":"","sources":["../../../../../../src/components/gov-icon/gov-icon.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Build, Component, Element, h, Host, Prop, State, Watch} from \"@stencil/core\"\nimport {IconClass} from \"./constants\"\nimport {fetchIcon} from \"../../utils/icon.utils\"\nimport {govHost} from \"../../helpers/Dom/template\"\nimport {GovHost} from \"../../helpers/Dom/template.types\"\nimport {iconsLazyLoad} from \"../../helpers/Dom/win\"\n\n@Component({\n  assetsDirs: [\"assets\"],\n  styleUrl: \"gov-icon.scss\",\n  tag: \"gov-icon\",\n})\nexport class GovIcon {\n  private h: GovHost\n\n  constructor() {\n    this.h = govHost(this.host)\n  }\n\n  @Element() host: HTMLGovIconElement\n  /**\n   * Name of icon\n   */\n  @Prop() name: string = null\n  /**\n   * Type (folder) of icon\n   */\n  @Prop() type: string = \"basic\"\n  @State() private iconData: string\n  @State() private visible = false\n  @State() private error = false\n  private intersectionObserver: IntersectionObserver\n\n  @Watch(\"name\")\n  private async loadIconPathData(): Promise<void> {\n    const {name, visible, type} = this\n    if (!Build.isBrowser || !name || !visible) {\n      return\n    }\n    try {\n      this.iconData = await fetchIcon({name, type})\n    } catch (e) {\n      this.error = true\n    }\n  }\n\n  connectedCallback(): void {\n    if (iconsLazyLoad()) {\n      this.visible = true\n      this.loadIconPathData().finally()\n    } else {\n      this.waitUntilVisible(async () => {\n        this.visible = true\n        await this.loadIconPathData()\n      })\n    }\n  }\n\n  disconnectedCallback(): void {\n    if (this.intersectionObserver) {\n      this.intersectionObserver.disconnect()\n      this.intersectionObserver = null\n    }\n  }\n\n  async componentWillLoad(): Promise<void> {\n    await this.loadIconPathData()\n  }\n\n  private waitUntilVisible(callback: () => void): void {\n    if (!Build.isBrowser || typeof window === \"undefined\" || !(window as any).IntersectionObserver) {\n      callback()\n      return\n    }\n    this.intersectionObserver = new IntersectionObserver(\n      entries => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting) {\n            if (this.intersectionObserver) {\n              this.intersectionObserver.disconnect()\n              this.intersectionObserver = null\n            }\n            callback()\n          }\n        })\n      },\n      {rootMargin: \"50px\"},\n    )\n    this.intersectionObserver.observe(this.host)\n  }\n\n  render() {\n    if (this.error) {\n      return null\n    }\n    return (\n      <Host class={this.h.classes(IconClass.root)}>\n        <span class={IconClass.holder} innerHTML={this.iconData}></span>\n      </Host>\n    )\n  }\n}\n"]}
+{"version":3,"file":"gov-icon.js","sourceRoot":"","sources":["../../../../../../src/components/gov-icon/gov-icon.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Build, Component, Element, h, Host, Prop, State, Watch} from \"@stencil/core\"\nimport {IconClass} from \"./constants\"\nimport {fetchIcon} from \"../../utils/icon.utils\"\nimport {govHost} from \"../../helpers/Dom/template\"\nimport {GovHost} from \"../../helpers/Dom/template.types\"\nimport {iconsLazyLoad} from \"../../helpers/Dom/win\"\nimport {isString} from \"../../utils/helpers.types\";\nimport { type IconColorType, IconColors } from \"./constants\";\nimport { validateProp } from \"../../helpers/Validate/props\";\n\n@Component({\n\tassetsDirs: [\"assets\"],\n\ttag: \"gov-icon\",\n})\nexport class GovIcon {\n\tprivate h: GovHost\n\tprivate intersectionObserver: IntersectionObserver\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovIconElement\n\t/**\n\t * Style variation of the button\n\t */\n\t@Prop({reflect: true}) readonly color: IconColorType\n\t/**\n\t * Name of icon in folder\n\t */\n\t@Prop({reflect: true}) name: string = null\n\t/**\n\t * Type (folder) of icon\n\t */\n\t@Prop({reflect: true}) type = \"basic\"\n\n\t@State() private visible = false\n\t@State() private error = false\n\n\t@Watch(\"color\")\n\tvalidateColor(newValue: string): void {\n\t\tvalidateProp(IconColors, newValue, IconClass.root)\n\t}\n\n\t@Watch(\"name\")\n\tprivate async loadIconPathData(): Promise<void> {\n\t\tconst {name, visible} = this\n\t\tif (!Build.isBrowser || !name || !visible) {\n\t\t\treturn\n\t\t}\n\t\tawait this.loadIcon()\n\t}\n\n\tconnectedCallback(): void {\n\t\tif (iconsLazyLoad()) {\n\t\t\tthis.visible = true\n\t\t\tthis.loadIconPathData().finally()\n\t\t} else {\n\t\t\tthis.waitUntilVisible(async () => {\n\t\t\t\tthis.visible = true\n\t\t\t\tawait this.loadIconPathData()\n\t\t\t})\n\t\t}\n\t}\n\n\tdisconnectedCallback(): void {\n\t\tif (this.intersectionObserver) {\n\t\t\tthis.intersectionObserver.disconnect()\n\t\t\tthis.intersectionObserver = null\n\t\t}\n\t}\n\n\tasync componentWillLoad(): Promise<void> {\n\t\tthis.validateColor(this.color)\n\t\tawait this.loadIconPathData()\n\t}\n\n\tprivate waitUntilVisible(callback: () => void): void {\n\t\tif (!Build.isBrowser || typeof window === \"undefined\" || !(window as any).IntersectionObserver) {\n\t\t\tcallback()\n\t\t\treturn\n\t\t}\n\t\tthis.intersectionObserver = new IntersectionObserver(\n\t\t\tentries => {\n\t\t\t\tentries.forEach(entry => {\n\t\t\t\t\tif (entry.isIntersecting) {\n\t\t\t\t\t\tif (this.intersectionObserver) {\n\t\t\t\t\t\t\tthis.intersectionObserver.disconnect()\n\t\t\t\t\t\t\tthis.intersectionObserver = null\n\t\t\t\t\t\t}\n\t\t\t\t\t\tcallback()\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t},\n\t\t\t{rootMargin: \"50px\"},\n\t\t)\n\t\tthis.intersectionObserver.observe(this.host)\n\t}\n\n\tprivate async loadIcon() {\n\t\ttry {\n\t\t\tconst {name, type} = this\n\t\t\tconst data = await fetchIcon({name, type})\n\t\t\tconst isValid = isString(data) && data.indexOf('svg') > -1\n\t\t\tthis.host.innerHTML = isValid ? data : null;\n\t\t} catch (e) {\n\t\t\tthis.host.innerHTML = ''\n\t\t\tthis.error = true\n\t\t}\n\t}\n\n\trender() {\n\t\tif (this.error) {\n\t\t\treturn null\n\t\t}\n\t\treturn (\n\t\t\t<Host class={this.h.classes(IconClass.root)} color={this.color}/>\n\t\t)\n\t}\n}\n"]}

package/dist/collection/components/gov-icon/helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../../../../../src/components/gov-icon/helpers.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAAa,EAA4C,EAAE;IAC5F,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;QAC/C,MAAM,YAAY,GAAG,oBAAoB,CAAC;QAC1C,IAAI,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;YAC9B,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;YAC9B,OAAO;gBACN,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC;gBACb,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC;aACb,CAAA;QACF,CAAC;IACF,CAAC;IACD,OAAO,IAAI,CAAA;AACZ,CAAC,CAAA","sourcesContent":["import {Nullable} from \"../../types/interfaces\";\n\nexport const prepareIconFormat = (value: string): Nullable<{ type: string, name: string }> => {\n\tif (typeof value === 'string' && value.length) {\n\t\tconst regexPattern = /^[a-z-]+\\/[a-z-]+$/;\n\t\tif (regexPattern.test(value)) {\n\t\t\tconst icon = value.split(\"/\");\n\t\t\treturn {\n\t\t\t\ttype: icon[0],\n\t\t\t\tname: icon[1],\n\t\t\t}\n\t\t}\n\t}\n\treturn null\n}\n"]}
+{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../../../../../src/components/gov-icon/helpers.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAAa,EAAsB,EAAE;IACtE,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;QAC/C,MAAM,YAAY,GAAG,oBAAoB,CAAC;QAC1C,IAAI,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;YAC9B,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;YAC9B,OAAO;gBACN,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC;gBACb,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC;aACb,CAAA;QACF,CAAC;IACF,CAAC;IACD,OAAO,IAAI,CAAA;AACZ,CAAC,CAAA","sourcesContent":["import {Nullable} from \"../../types/interfaces\";\n\nexport type IconType = { type: string, name: string }\n\nexport const prepareIconFormat = (value: string): Nullable<IconType> => {\n\tif (typeof value === 'string' && value.length) {\n\t\tconst regexPattern = /^[a-z-]+\\/[a-z-]+$/;\n\t\tif (regexPattern.test(value)) {\n\t\t\tconst icon = value.split(\"/\");\n\t\t\treturn {\n\t\t\t\ttype: icon[0],\n\t\t\t\tname: icon[1],\n\t\t\t}\n\t\t}\n\t}\n\treturn null\n}\n"]}

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

@@ -1,12 +1,15 @@
-import { Variants } from "../../core/constants/variants";
+import { Colors } from "../../core/constants/colors";
 import { pick } from "../../utils/utils";
-export const InfobarVariants = pick(Variants, ['PRIMARY', 'SECONDARY', 'WARNING', 'ERROR', 'SUCCESS']);
+export const InfobarColors = pick(Colors, ['PRIMARY', 'SECONDARY', 'NEUTRAL', 'ERROR', 'SUCCESS', 'WARNING']);
+export var InfobarType;
+(function (InfobarType) {
+    InfobarType["BOLD"] = "bold";
+    InfobarType["SUBTLE"] = "subtle";
+})(InfobarType || (InfobarType = {}));
 export const InfobarClass = {
     root: 'gov-infobar',
     section: 'gov-infobar__section',
-    icon: 'gov-infobar__icon',
     content: 'gov-infobar__content',
-    closable: 'gov-infobar__content--closable',
     headline: 'gov-infobar__headline',
     close: 'gov-infobar__close',
 };

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

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../src/components/gov-infobar/constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAA;AAGxC,MAAM,CAAC,MAAM,eAAe,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,CAAC,CAAC,CAAA;AAGtG,MAAM,CAAC,MAAM,YAAY,GAAG;IAC3B,IAAI,EAAE,aAAa;IACnB,OAAO,EAAE,sBAAsB;IAC/B,IAAI,EAAE,mBAAmB;IACzB,OAAO,EAAE,sBAAsB;IAC/B,QAAQ,EAAE,gCAAgC;IAC1C,QAAQ,EAAE,uBAAuB;IACjC,KAAK,EAAE,oBAAoB;CAC3B,CAAA","sourcesContent":["import { Variants } from '../../core/constants/variants'\nimport { pick } from '../../utils/utils'\nimport { ValueOf } from '../../types/interfaces'\n\nexport const InfobarVariants = pick(Variants, ['PRIMARY', 'SECONDARY', 'WARNING', 'ERROR', 'SUCCESS'])\nexport type VariantType = `${ValueOf<typeof InfobarVariants>}`\n\nexport const InfobarClass = {\n\troot: 'gov-infobar',\n\tsection: 'gov-infobar__section',\n\ticon: 'gov-infobar__icon',\n\tcontent: 'gov-infobar__content',\n\tclosable: 'gov-infobar__content--closable',\n\theadline: 'gov-infobar__headline',\n\tclose: 'gov-infobar__close',\n}\n"]}
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../src/components/gov-infobar/constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAA;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAA;AAGxC,MAAM,CAAC,MAAM,aAAa,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC,CAAA;AAG7G,MAAM,CAAN,IAAY,WAGX;AAHD,WAAY,WAAW;IACtB,4BAAa,CAAA;IACb,gCAAiB,CAAA;AAClB,CAAC,EAHW,WAAW,KAAX,WAAW,QAGtB;AAGD,MAAM,CAAC,MAAM,YAAY,GAAG;IAC3B,IAAI,EAAE,aAAa;IACnB,OAAO,EAAE,sBAAsB;IAC/B,OAAO,EAAE,sBAAsB;IAC/B,QAAQ,EAAE,uBAAuB;IACjC,KAAK,EAAE,oBAAoB;CAC3B,CAAA","sourcesContent":["import { Colors } from '../../core/constants/colors'\nimport { pick } from '../../utils/utils'\nimport { ValueOf } from '../../types/interfaces'\n\nexport const InfobarColors = pick(Colors, ['PRIMARY', 'SECONDARY', 'NEUTRAL', 'ERROR', 'SUCCESS', 'WARNING'])\nexport type ColorType = `${ValueOf<typeof InfobarColors>}`\n\nexport enum InfobarType {\n\tBOLD = 'bold',\n\tSUBTLE = 'subtle',\n}\nexport type InfobarTypesType = `${ValueOf<typeof InfobarType>}`\n\nexport const InfobarClass = {\n\troot: 'gov-infobar',\n\tsection: 'gov-infobar__section',\n\tcontent: 'gov-infobar__content',\n\theadline: 'gov-infobar__headline',\n\tclose: 'gov-infobar__close',\n}\n"]}

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

@@ -1,44 +1,46 @@
 import { h, Host } from "@stencil/core";
 import { govHost, toBoolAttr } from "../../helpers/Dom/template";
-import { canValidateWcagOnRender } from "../../helpers/Dom/win";
 import Fragment from "../../helpers/Fragment";
 import { validateProp } from "../../helpers/Validate/props";
-import { validateWcagProp } from "../../helpers/Validate/wcag";
-import { delay } from "../../utils/utils";
-import { InfobarClass, InfobarVariants } from "./constants";
+import { InfobarClass, InfobarColors } from "./constants";
+import { AttributeObserver } from "../../helpers/Dom/attribute";
+import { ariaAttributes } from "../../helpers/Accessibility/attributes";
+import { inheritAriaAttributes } from "../../helpers/Accessibility/accessibility";
 export class GovInfobar {
     constructor() {
-        this.headline = undefined;
-        this.variant = 'primary';
+        this.color = 'primary';
+        this.type = "bold";
         this.role = undefined;
-        this.inverse = false;
-        this.wcagCloseLabel = 'Zavřít informační lištu';
-        this.wcagToggleLabel = 'Zobrazit více informací';
+        this.accessibleCloseLabel = 'Zavřít informační lištu';
+        this.accessibleToggleLabel = 'Zobrazit více informací';
         this.closable = false;
         this.toggleContent = false;
+        this.inheritedAttributes = {};
         this.h = govHost(this.host);
     }
-    validateVariant(newValue) {
-        validateProp(InfobarVariants, newValue, InfobarClass.root);
+    validateColor(newValue) {
+        validateProp(InfobarColors, newValue, InfobarClass.root);
+    }
+    componentDidLoad() {
+        this.attributeObserver = new AttributeObserver(this.host, (attributeName, newValue) => {
+            this.onAriaAttributeChange(attributeName, newValue);
+        });
+        this.attributeObserver.startObserving(ariaAttributes);
     }
     componentWillLoad() {
-        this.validateVariant(this.variant);
+        this.validateColor(this.color);
+        this.inheritedAttributes = inheritAriaAttributes(this.host);
     }
-    async componentDidRender() {
-        if (canValidateWcagOnRender()) {
-            await delay(500);
-            await this.validateWcag();
-        }
+    disconnectedCallback() {
+        this.attributeObserver.stopObserving();
+    }
+    onAriaAttributeChange(attributeName, newValue) {
+        this.host.removeAttribute(attributeName);
+        this.inheritedAttributes = Object.assign(Object.assign({}, this.inheritedAttributes), { [attributeName]: newValue });
     }
     render() {
-        let inverse = !this.inverse;
-        let variant = this.inverse ? 'secondary' : this.variant;
-        if (this.variant == 'warning') {
-            inverse = false;
-            variant = 'secondary';
-        }
-        const closeButton = (h("div", { key: '77b4d53e93469ca4325f5af65c8fc90efa44e821', class: InfobarClass.close }, h("gov-button", { key: '5e8fc17fb25637229c1d5c122edb032ac9eade08', size: "s", wcagLabel: this.wcagCloseLabel, type: "base", variant: variant, inverse: inverse, "on-gov-click": this.onCloseHandler.bind(this) }, h("gov-icon", { key: '45a33018478d0ef04211313a10857a7d2ad6e66a', name: "x-lg" }))));
-        return (h(Host, { key: 'bbcca556a269756e86610ac5730d780afc10dd1f', class: this.h.classes(InfobarClass.root), variant: this.variant }, h("section", { key: '03af203186f5dabafa3871a27ecef1064dc62138', class: InfobarClass.section, role: this.role }, this.h.hasSlot('icon') && (h("div", { key: '2aa3131f8489eb94a3cf18c58af98c25ea6c6295', class: InfobarClass.icon }, h("slot", { key: '4c81fa3be4aff480578222c3e65f84e51117b221', name: "icon" }))), h("div", { key: '190f4f6b6d5b6962551e310a081f765b572b24e9', class: InfobarClass.content + (this.closable ? ' ' + InfobarClass.closable : '') }, this.headline ? (h(Fragment, null, h("div", { class: InfobarClass.headline }, h("p", null, this.headline), h("gov-button", { size: "s", wcagLabel: this.wcagToggleLabel, type: "base", variant: variant, inverse: inverse, "on-gov-click": () => (this.toggleContent = !this.toggleContent) }, h("gov-icon", { name: this.toggleContent ? 'chevron-up' : 'chevron-down' }))), h("div", { hidden: !this.toggleContent, "aria-hidden": toBoolAttr(this.toggleContent) }, h("slot", null)))) : (h("slot", null)))), this.closable && closeButton));
+        const closeButton = (h("gov-button", { key: '8153474d0e2ef77bfb100bcb978d4f49b5436add', size: "s", "accessible-label": this.accessibleCloseLabel, type: "base", color: this.isBold ? this.color : "neutral", "on-gov-click": this.onCloseHandler.bind(this), class: InfobarClass.close }, h("gov-icon", { key: 'e49a24686ad48a63e48a3da212dba0a828227355', name: "x-lg" })));
+        return (h(Host, { key: 'f9e889af972b6b6d54f4d7dd49b0870328ec3cb2', class: this.h.classes(InfobarClass.root), color: this.color, type: this.type }, h("section", Object.assign({ key: '2fe9fac18a2025f9d932818f8b395adb8d143f97', class: InfobarClass.section }, this.inheritedAttributes, { role: this.role }), h("slot", { key: '58cf1566241cd88e4e87f89bfdbcdee9e3d06cf5', name: "icon" }), h("div", { key: '02ec6f434fd5056daa0fb7f471af6714fefcac18', class: InfobarClass.content }, this.h.hasSlot('headline') ? (h(Fragment, null, h("div", { class: InfobarClass.headline }, h("slot", { name: "headline" }), h("gov-button", { size: "s", type: "base", color: this.isBold ? this.color : "neutral", "accessible-label": this.accessibleToggleLabel, "on-gov-click": () => (this.toggleContent = !this.toggleContent) }, h("gov-icon", { name: this.toggleContent ? 'chevron-up' : 'chevron-down' }))), h("div", { hidden: !this.toggleContent, "aria-hidden": toBoolAttr(this.toggleContent) }, h("slot", null)))) : (h("slot", null))), this.closable && closeButton)));
     }
     onCloseHandler(e) {
         this.govClose.emit({
@@ -47,37 +49,25 @@ export class GovInfobar {
             originalEvent: e,
         });
     }
-    /**
-     * Validate the WCAG attributes of the component
-     */
-    async validateWcag() {
-        if (this.closable) {
-            validateWcagProp(this.wcagCloseLabel, 'wcag-close-label', InfobarClass.root);
-        }
-        if (this.headline) {
-            validateWcagProp(this.wcagToggleLabel, 'wcag-toggle-label', InfobarClass.root);
-        }
+    get isBold() {
+        return this.type === "bold";
     }
     static get is() { return "gov-infobar"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["gov-infobar.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["gov-infobar.css"]
-        };
-    }
     static get properties() {
         return {
-            "headline": {
+            "color": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "ColorType",
+                    "resolved": "\"error\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"",
+                    "references": {
+                        "ColorType": {
+                            "location": "import",
+                            "path": "./constants",
+                            "id": "../../../packages/core/src/components/gov-infobar/constants.ts::ColorType"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
@@ -85,32 +75,33 @@ export class GovInfobar {
                     "tags": [],
                     "text": "Style variation of the button."
                 },
-                "attribute": "headline",
-                "reflect": false
+                "attribute": "color",
+                "reflect": false,
+                "defaultValue": "'primary'"
             },
-            "variant": {
+            "type": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "VariantType",
-                    "resolved": "\"error\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"",
+                    "original": "InfobarTypesType",
+                    "resolved": "\"bold\" | \"subtle\"",
                     "references": {
-                        "VariantType": {
+                        "InfobarTypesType": {
                             "location": "import",
                             "path": "./constants",
-                            "id": "../../../packages/core/src/components/gov-infobar/constants.ts::VariantType"
+                            "id": "../../../packages/core/src/components/gov-infobar/constants.ts::InfobarTypesType"
                         }
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Style variation of the button."
+                    "text": "Infobar appearance"
                 },
-                "attribute": "variant",
+                "attribute": "type",
                 "reflect": false,
-                "defaultValue": "'primary'"
+                "defaultValue": "\"bold\""
             },
             "role": {
                 "type": "string",
@@ -135,25 +126,7 @@ export class GovInfobar {
                 "reflect": false,
                 "defaultValue": "undefined"
             },
-            "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"
-            },
-            "wcagCloseLabel": {
+            "accessibleCloseLabel": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -167,11 +140,11 @@ export class GovInfobar {
                     "tags": [],
                     "text": "Aria label for the closing button. It is mandatory if the infobar is closable"
                 },
-                "attribute": "wcag-close-label",
+                "attribute": "accessible-close-label",
                 "reflect": false,
                 "defaultValue": "'Zav\u0159\u00EDt informa\u010Dn\u00ED li\u0161tu'"
             },
-            "wcagToggleLabel": {
+            "accessibleToggleLabel": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -185,7 +158,7 @@ export class GovInfobar {
                     "tags": [],
                     "text": "Aria label for the toggle button. It is mandatory if the infobar has headline"
                 },
-                "attribute": "wcag-toggle-label",
+                "attribute": "accessible-toggle-label",
                 "reflect": false,
                 "defaultValue": "'Zobrazit v\u00EDce informac\u00ED'"
             },
@@ -211,7 +184,8 @@ export class GovInfobar {
     }
     static get states() {
         return {
-            "toggleContent": {}
+            "toggleContent": {},
+            "inheritedAttributes": {}
         };
     }
     static get events() {
@@ -238,32 +212,11 @@ export class GovInfobar {
                 }
             }];
     }
-    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": "variant",
-                "methodName": "validateVariant"
+                "propName": "color",
+                "methodName": "validateColor"
             }];
     }
 }