@gov-design-system-ce/components 0.0.19 → 0.0.21

package/dist/hydrate/index.js

@@ -6237,19 +6237,25 @@ const AlertClass = {
   section: 'gov-alert__section',
   icon: 'gov-alert__icon',
   content: 'gov-alert__content',
+  headline: 'gov-alert__headline',
   close: 'gov-alert__close',
 };
 
-const govAlertCss = ".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}}.gov-alert{position:relative;display:block;width:100%}.gov-alert__section{display:block;width:100%;max-width:calc(var(--gov-container-width, 73.75rem) + 2 * var(--gov-container-padding, 2.5rem));margin-right:auto;margin-left:auto;padding-right:var(--gov-container-padding-mobile, 1.25rem);padding-left:var(--gov-container-padding-mobile, 1.25rem);display:flex;gap:1rem;padding-top:1rem;padding-bottom:1rem}@media (min-width: 48em){.gov-alert__section{padding-right:var(--gov-container-padding, 2.5rem);padding-left:var(--gov-container-padding, 2.5rem)}}.gov-alert__icon{flex:0 0 auto}.gov-alert__icon>*{width:1.25rem;height:1.25rem}.gov-alert__content{padding-right:3.25rem}.gov-alert__content>*:last-child{margin-bottom:0}.gov-alert__content p{font-weight:var(--gov-text-m-font-weight);font-size:var(--gov-text-m-font-size);line-height:var(--gov-text-m-line-height);letter-spacing:var(--gov-text-m-letter-spacing)}.gov-alert__content a{color:inherit}@media not all and (pointer: coarse){.gov-alert__content a:hover{color:inherit}}.gov-alert__close{position:absolute;top:0.625rem;right:1rem}.gov-alert[variant=warning]{background-color:var(--gov-alert-warning-bg-color, var(--gov-color-warning))}.gov-alert[variant=warning] .gov-alert__icon{color:var(--gov-alert-warning-icon-color, var(--gov-color-secondary))}.gov-alert[variant=warning] .gov-alert__content{color:var(--gov-alert-warning-text-color, var(--gov-color-secondary))}.gov-alert[variant=warning][inverse=\"\"],.gov-alert[variant=warning][inverse=true i],.gov-alert[variant=warning][inverse=\"1\"]{border-bottom:var(--gov-alert-border, 0.0625rem solid var(--gov-color-secondary-400));background-color:var(--gov-alert-inverse-bg, var(--gov-color-neutral-white))}.gov-alert[variant=warning][inverse=\"\"] .gov-alert__icon,.gov-alert[variant=warning][inverse=true i] .gov-alert__icon,.gov-alert[variant=warning][inverse=\"1\"] .gov-alert__icon{color:var(--gov-alert-warning-bg-color, var(--gov-color-warning))}.gov-alert[variant=warning][inverse=\"\"] .gov-alert__content,.gov-alert[variant=warning][inverse=true i] .gov-alert__content,.gov-alert[variant=warning][inverse=\"1\"] .gov-alert__content{color:var(--gov-alert-inverse-color, var(--gov-color-secondary-800))}.gov-alert[variant=error]{background-color:var(--gov-alert-error-bg-color, var(--gov-color-error))}.gov-alert[variant=error] .gov-alert__icon{color:var(--gov-alert-error-icon-color, var(--gov-color-neutral-white))}.gov-alert[variant=error] .gov-alert__content{color:var(--gov-alert-error-text-color, var(--gov-color-neutral-white))}.gov-alert[variant=error][inverse=\"\"],.gov-alert[variant=error][inverse=true i],.gov-alert[variant=error][inverse=\"1\"]{border-bottom:var(--gov-alert-border, 0.0625rem solid var(--gov-color-secondary-400));background-color:var(--gov-alert-inverse-bg, var(--gov-color-neutral-white))}.gov-alert[variant=error][inverse=\"\"] .gov-alert__icon,.gov-alert[variant=error][inverse=true i] .gov-alert__icon,.gov-alert[variant=error][inverse=\"1\"] .gov-alert__icon{color:var(--gov-alert-error-bg-color, var(--gov-color-error))}.gov-alert[variant=error][inverse=\"\"] .gov-alert__content,.gov-alert[variant=error][inverse=true i] .gov-alert__content,.gov-alert[variant=error][inverse=\"1\"] .gov-alert__content{color:var(--gov-alert-inverse-color, var(--gov-color-secondary-800))}.gov-alert[variant=secondary]{background-color:var(--gov-alert-secondary-bg-color, var(--gov-color-secondary))}.gov-alert[variant=secondary] .gov-alert__icon{color:var(--gov-alert-secondary-icon-color, var(--gov-color-neutral-white))}.gov-alert[variant=secondary] .gov-alert__content{color:var(--gov-alert-secondary-text-color, var(--gov-color-neutral-white))}.gov-alert[variant=secondary][inverse=\"\"],.gov-alert[variant=secondary][inverse=true i],.gov-alert[variant=secondary][inverse=\"1\"]{border-bottom:var(--gov-alert-border, 0.0625rem solid var(--gov-color-secondary-400));background-color:var(--gov-alert-inverse-bg, var(--gov-color-neutral-white))}.gov-alert[variant=secondary][inverse=\"\"] .gov-alert__icon,.gov-alert[variant=secondary][inverse=true i] .gov-alert__icon,.gov-alert[variant=secondary][inverse=\"1\"] .gov-alert__icon{color:var(--gov-alert-secondary-bg-color, var(--gov-color-secondary))}.gov-alert[variant=secondary][inverse=\"\"] .gov-alert__content,.gov-alert[variant=secondary][inverse=true i] .gov-alert__content,.gov-alert[variant=secondary][inverse=\"1\"] .gov-alert__content{color:var(--gov-alert-inverse-color, var(--gov-color-secondary-800))}.gov-alert[variant=success]{background-color:var(--gov-alert-success-bg-color, var(--gov-color-success-500))}.gov-alert[variant=success] .gov-alert__icon{color:var(--gov-alert-success-icon-color, var(--gov-color-neutral-white))}.gov-alert[variant=success] .gov-alert__content{color:var(--gov-alert-success-text-color, var(--gov-color-neutral-white))}.gov-alert[variant=success][inverse=\"\"],.gov-alert[variant=success][inverse=true i],.gov-alert[variant=success][inverse=\"1\"]{border-bottom:var(--gov-alert-border, 0.0625rem solid var(--gov-color-secondary-400));background-color:var(--gov-alert-inverse-bg, var(--gov-color-neutral-white))}.gov-alert[variant=success][inverse=\"\"] .gov-alert__icon,.gov-alert[variant=success][inverse=true i] .gov-alert__icon,.gov-alert[variant=success][inverse=\"1\"] .gov-alert__icon{color:var(--gov-alert-success-bg-color, var(--gov-color-success-500))}.gov-alert[variant=success][inverse=\"\"] .gov-alert__content,.gov-alert[variant=success][inverse=true i] .gov-alert__content,.gov-alert[variant=success][inverse=\"1\"] .gov-alert__content{color:var(--gov-alert-inverse-color, var(--gov-color-secondary-800))}.gov-alert[variant=primary]{background-color:var(--gov-alert-primary-bg-color, var(--gov-color-primary))}.gov-alert[variant=primary] .gov-alert__icon{color:var(--gov-alert-primary-icon-color, var(--gov-color-neutral-white))}.gov-alert[variant=primary] .gov-alert__content{color:var(--gov-alert-primary-text-color, var(--gov-color-neutral-white))}.gov-alert[variant=primary][inverse=\"\"],.gov-alert[variant=primary][inverse=true i],.gov-alert[variant=primary][inverse=\"1\"]{border-bottom:var(--gov-alert-border, 0.0625rem solid var(--gov-color-secondary-400));background-color:var(--gov-alert-inverse-bg, var(--gov-color-neutral-white))}.gov-alert[variant=primary][inverse=\"\"] .gov-alert__icon,.gov-alert[variant=primary][inverse=true i] .gov-alert__icon,.gov-alert[variant=primary][inverse=\"1\"] .gov-alert__icon{color:var(--gov-alert-primary-bg-color, var(--gov-color-primary))}.gov-alert[variant=primary][inverse=\"\"] .gov-alert__content,.gov-alert[variant=primary][inverse=true i] .gov-alert__content,.gov-alert[variant=primary][inverse=\"1\"] .gov-alert__content{color:var(--gov-alert-inverse-color, var(--gov-color-secondary-800))}@media (min-width: 75em){.gov-alert__content{padding-right:2rem}}";
+var Fragment = (_, children) => [...children];
+
+const govAlertCss = ".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}}.gov-alert{position:relative;display:block;width:100%}.gov-alert__section{display:block;width:100%;max-width:calc(var(--gov-container-width, 73.75rem) + 2 * var(--gov-container-padding, 2.5rem));margin-right:auto;margin-left:auto;padding-right:var(--gov-container-padding-mobile, 1.25rem);padding-left:var(--gov-container-padding-mobile, 1.25rem);display:flex;gap:1rem;padding-top:1rem;padding-bottom:1rem}@media (min-width: 48em){.gov-alert__section{padding-right:var(--gov-container-padding, 2.5rem);padding-left:var(--gov-container-padding, 2.5rem)}}.gov-alert__icon{flex:0 0 auto}.gov-alert__icon>*{width:1.25rem;height:1.25rem}.gov-alert__headline{display:flex;gap:1rem}.gov-alert__headline+div{margin-top:0.5rem}.gov-alert__headline p{margin-bottom:0}.gov-alert__headline gov-button{margin-top:-0.25rem}.gov-alert__content{padding-right:3.25rem}.gov-alert__content>*:last-child{margin-bottom:0}.gov-alert__content p{font-weight:var(--gov-text-m-font-weight);font-size:var(--gov-text-m-font-size);line-height:var(--gov-text-m-line-height);letter-spacing:var(--gov-text-m-letter-spacing)}.gov-alert__content a{color:inherit}@media not all and (pointer: coarse){.gov-alert__content a:hover{color:inherit}}.gov-alert__close{position:absolute;top:0.625rem;right:1rem}.gov-alert[variant=warning]{background-color:var(--gov-alert-warning-bg-color, var(--gov-color-warning))}.gov-alert[variant=warning] .gov-alert__icon{color:var(--gov-alert-warning-icon-color, var(--gov-color-secondary))}.gov-alert[variant=warning] .gov-alert__content{color:var(--gov-alert-warning-text-color, var(--gov-color-secondary))}.gov-alert[variant=warning][inverse=\"\"],.gov-alert[variant=warning][inverse=true i],.gov-alert[variant=warning][inverse=\"1\"]{border-bottom:var(--gov-alert-border, 0.0625rem solid var(--gov-color-secondary-400));background-color:var(--gov-alert-inverse-bg, var(--gov-color-neutral-white))}.gov-alert[variant=warning][inverse=\"\"] .gov-alert__icon,.gov-alert[variant=warning][inverse=true i] .gov-alert__icon,.gov-alert[variant=warning][inverse=\"1\"] .gov-alert__icon{color:var(--gov-alert-warning-bg-color, var(--gov-color-warning))}.gov-alert[variant=warning][inverse=\"\"] .gov-alert__content,.gov-alert[variant=warning][inverse=true i] .gov-alert__content,.gov-alert[variant=warning][inverse=\"1\"] .gov-alert__content{color:var(--gov-alert-inverse-color, var(--gov-color-secondary-800))}.gov-alert[variant=error]{background-color:var(--gov-alert-error-bg-color, var(--gov-color-error))}.gov-alert[variant=error] .gov-alert__icon{color:var(--gov-alert-error-icon-color, var(--gov-color-neutral-white))}.gov-alert[variant=error] .gov-alert__content{color:var(--gov-alert-error-text-color, var(--gov-color-neutral-white))}.gov-alert[variant=error][inverse=\"\"],.gov-alert[variant=error][inverse=true i],.gov-alert[variant=error][inverse=\"1\"]{border-bottom:var(--gov-alert-border, 0.0625rem solid var(--gov-color-secondary-400));background-color:var(--gov-alert-inverse-bg, var(--gov-color-neutral-white))}.gov-alert[variant=error][inverse=\"\"] .gov-alert__icon,.gov-alert[variant=error][inverse=true i] .gov-alert__icon,.gov-alert[variant=error][inverse=\"1\"] .gov-alert__icon{color:var(--gov-alert-error-bg-color, var(--gov-color-error))}.gov-alert[variant=error][inverse=\"\"] .gov-alert__content,.gov-alert[variant=error][inverse=true i] .gov-alert__content,.gov-alert[variant=error][inverse=\"1\"] .gov-alert__content{color:var(--gov-alert-inverse-color, var(--gov-color-secondary-800))}.gov-alert[variant=secondary]{background-color:var(--gov-alert-secondary-bg-color, var(--gov-color-secondary))}.gov-alert[variant=secondary] .gov-alert__icon{color:var(--gov-alert-secondary-icon-color, var(--gov-color-neutral-white))}.gov-alert[variant=secondary] .gov-alert__content{color:var(--gov-alert-secondary-text-color, var(--gov-color-neutral-white))}.gov-alert[variant=secondary][inverse=\"\"],.gov-alert[variant=secondary][inverse=true i],.gov-alert[variant=secondary][inverse=\"1\"]{border-bottom:var(--gov-alert-border, 0.0625rem solid var(--gov-color-secondary-400));background-color:var(--gov-alert-inverse-bg, var(--gov-color-neutral-white))}.gov-alert[variant=secondary][inverse=\"\"] .gov-alert__icon,.gov-alert[variant=secondary][inverse=true i] .gov-alert__icon,.gov-alert[variant=secondary][inverse=\"1\"] .gov-alert__icon{color:var(--gov-alert-secondary-bg-color, var(--gov-color-secondary))}.gov-alert[variant=secondary][inverse=\"\"] .gov-alert__content,.gov-alert[variant=secondary][inverse=true i] .gov-alert__content,.gov-alert[variant=secondary][inverse=\"1\"] .gov-alert__content{color:var(--gov-alert-inverse-color, var(--gov-color-secondary-800))}.gov-alert[variant=success]{background-color:var(--gov-alert-success-bg-color, var(--gov-color-success-500))}.gov-alert[variant=success] .gov-alert__icon{color:var(--gov-alert-success-icon-color, var(--gov-color-neutral-white))}.gov-alert[variant=success] .gov-alert__content{color:var(--gov-alert-success-text-color, var(--gov-color-neutral-white))}.gov-alert[variant=success][inverse=\"\"],.gov-alert[variant=success][inverse=true i],.gov-alert[variant=success][inverse=\"1\"]{border-bottom:var(--gov-alert-border, 0.0625rem solid var(--gov-color-secondary-400));background-color:var(--gov-alert-inverse-bg, var(--gov-color-neutral-white))}.gov-alert[variant=success][inverse=\"\"] .gov-alert__icon,.gov-alert[variant=success][inverse=true i] .gov-alert__icon,.gov-alert[variant=success][inverse=\"1\"] .gov-alert__icon{color:var(--gov-alert-success-bg-color, var(--gov-color-success-500))}.gov-alert[variant=success][inverse=\"\"] .gov-alert__content,.gov-alert[variant=success][inverse=true i] .gov-alert__content,.gov-alert[variant=success][inverse=\"1\"] .gov-alert__content{color:var(--gov-alert-inverse-color, var(--gov-color-secondary-800))}.gov-alert[variant=primary]{background-color:var(--gov-alert-primary-bg-color, var(--gov-color-primary))}.gov-alert[variant=primary] .gov-alert__icon{color:var(--gov-alert-primary-icon-color, var(--gov-color-neutral-white))}.gov-alert[variant=primary] .gov-alert__content{color:var(--gov-alert-primary-text-color, var(--gov-color-neutral-white))}.gov-alert[variant=primary][inverse=\"\"],.gov-alert[variant=primary][inverse=true i],.gov-alert[variant=primary][inverse=\"1\"]{border-bottom:var(--gov-alert-border, 0.0625rem solid var(--gov-color-secondary-400));background-color:var(--gov-alert-inverse-bg, var(--gov-color-neutral-white))}.gov-alert[variant=primary][inverse=\"\"] .gov-alert__icon,.gov-alert[variant=primary][inverse=true i] .gov-alert__icon,.gov-alert[variant=primary][inverse=\"1\"] .gov-alert__icon{color:var(--gov-alert-primary-bg-color, var(--gov-color-primary))}.gov-alert[variant=primary][inverse=\"\"] .gov-alert__content,.gov-alert[variant=primary][inverse=true i] .gov-alert__content,.gov-alert[variant=primary][inverse=\"1\"] .gov-alert__content{color:var(--gov-alert-inverse-color, var(--gov-color-secondary-800))}@media (min-width: 75em){.gov-alert__content{padding-right:2rem}}";
 
 class GovAlert {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.govClose = createEvent(this, "gov-close", 7);
-    this.variant = 'primary';
+    this.headline = undefined;
+    this.variant = "primary";
     this.inverse = false;
     this.wcagCloseLabel = undefined;
+    this.wcagToggleLabel = undefined;
     this.closable = false;
+    this.toggleContent = false;
     this.h = govHost(this.host);
   }
   validateVariant(newValue) {
@@ -6258,15 +6264,39 @@ class GovAlert {
   componentWillLoad() {
     this.validateVariant(this.variant);
   }
+  async componentDidRender() {
+    if (canValidateWcagOnRender()) {
+      await delay(500);
+      await this.validateWcag();
+    }
+  }
   render() {
     let inverse = !this.inverse;
-    let variant = this.inverse ? 'secondary' : this.variant;
-    if (this.variant == 'warning') {
+    let variant = this.inverse ? "secondary" : this.variant;
+    if (this.variant == "warning") {
       inverse = false;
-      variant = 'secondary';
+      variant = "secondary";
+    }
+    const closeButton = (hAsync("div", { class: AlertClass.close }, hAsync("gov-button", { size: "s", "aria-label": this.wcagCloseLabel, type: "base", variant: variant, inverse: inverse, "on-gov-click": this.onCloseHandler.bind(this) }, hAsync("gov-icon", { name: "x-lg" }))));
+    return (hAsync(Host, { class: this.h.classes(AlertClass.root), variant: this.variant }, hAsync("section", { class: AlertClass.section, role: "alert" }, this.h.hasSlot("icon") && (hAsync("div", { class: AlertClass.icon }, hAsync("slot", { name: "icon" }))), hAsync("div", { class: AlertClass.content }, this.headline ? (hAsync(Fragment, null, hAsync("div", { class: AlertClass.headline }, hAsync("p", null, this.headline), hAsync("gov-button", { size: "s", "aria-label": this.wcagToggleLabel, type: "base", variant: variant, inverse: inverse, "on-gov-click": () => this.toggleContent = !this.toggleContent }, hAsync("gov-icon", { name: this.toggleContent ? 'chevron-up' : 'chevron-down' }))), hAsync("div", { hidden: !this.toggleContent, "aria-hidden": toBoolAttr(this.toggleContent) }, hAsync("slot", null)))) : (hAsync("slot", null)))), this.closable && closeButton));
+  }
+  onCloseHandler(e) {
+    this.govClose.emit({
+      component: AlertClass.root,
+      ref: this.host,
+      originalEvent: e,
+    });
+  }
+  /**
+   * Validate the WCAG attributes of the component
+   */
+  async validateWcag() {
+    if (this.closable) {
+      validateWcagProp(this.wcagCloseLabel, 'wcag-close-label', AlertClass.root);
+    }
+    if (this.headline) {
+      validateWcagProp(this.wcagToggleLabel, 'wcag-toggle-label', AlertClass.root);
     }
-    const closeButton = (hAsync("div", { class: AlertClass.close }, hAsync("gov-button", { size: "s", "aria-label": this.wcagCloseLabel, type: "base", variant: variant, inverse: inverse, onClick: (e) => this.govClose.emit(e) }, hAsync("gov-icon", { name: "x-lg" }))));
-    return (hAsync(Host, { class: this.h.classes(AlertClass.root), variant: this.variant }, hAsync("section", { class: AlertClass.section, role: "alert" }, this.h.hasSlot('icon') && (hAsync("div", { class: AlertClass.icon }, hAsync("slot", { name: "icon" }))), hAsync("div", { class: AlertClass.content }, hAsync("slot", null))), this.closable && closeButton));
   }
   get host() { return getElement(this); }
   static get watchers() { return {
@@ -6277,10 +6307,14 @@ class GovAlert {
     "$flags$": 4,
     "$tagName$": "gov-alert",
     "$members$": {
+      "headline": [1],
       "variant": [1],
       "inverse": [4],
       "wcagCloseLabel": [1, "wcag-close-label"],
-      "closable": [4]
+      "wcagToggleLabel": [1, "wcag-toggle-label"],
+      "closable": [4],
+      "toggleContent": [32],
+      "validateWcag": [64]
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
@@ -9541,7 +9575,14 @@ class AlertPage extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
 		<h2>Alert</h2>
-
+		
+		<gov-alert variant="secondary" headline="Tohle bude super nadpis pro všechno" closable>
+			<gov-icon name="info" slot="icon"></gov-icon>
+			<p>
+				Secondary - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.
+			</p>
+		</gov-alert>
+		<br>
 		<gov-alert variant="secondary" closable>
 			<gov-icon name="info" slot="icon"></gov-icon>
 			<p>
@@ -15748,8 +15789,6 @@ const govForm = (govHost) => {
   };
 };
 
-var Fragment = (_, children) => [...children];
-
 const govFormCheckboxCss = ".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}}.gov-form-checkbox{cursor:pointer}.gov-form-checkbox input{position:absolute;top:0;left:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.gov-form-checkbox input+span{position:relative;display:block}.gov-form-checkbox input+span::before{content:\"\";position:absolute;display:block;top:0;left:0;border:var(--gov-form-checkbox-border-size, 0.125rem solid var(--gov-color-primary));background-color:var(--gov-form-checkbox-background-color, var(--gov-color-neutral-white));transition:150ms linear border-color, 150ms linear background-color, 150ms linear outline-color}.gov-form-checkbox .gov-form-label__label{position:relative;z-index:1;width:100%}.gov-form-checkbox input:focus-visible+span::before{outline:var(--gov-outline-width, 0.125rem) solid var(--gov-color-focus-base)}[invalid=\"\"].gov-form-checkbox .gov-form-label__label,[invalid=true i].gov-form-checkbox .gov-form-label__label,[invalid=\"1\"].gov-form-checkbox .gov-form-label__label{color:var(--gov-form-state-color-error, var(--gov-color-error))}[invalid=\"\"].gov-form-checkbox input+span::before,[invalid=true i].gov-form-checkbox input+span::before,[invalid=\"1\"].gov-form-checkbox input+span::before{border-color:var(--gov-form-state-color-error, var(--gov-color-error))}[disabled=\"\"].gov-form-checkbox,[disabled=true i].gov-form-checkbox,[disabled=\"1\"].gov-form-checkbox{pointer-events:none}[disabled=\"\"].gov-form-checkbox .gov-form-label__label,[disabled=true i].gov-form-checkbox .gov-form-label__label,[disabled=\"1\"].gov-form-checkbox .gov-form-label__label{color:var(--gov-form-state-color-disabled, var(--gov-color-secondary-600))}[disabled=\"\"].gov-form-checkbox input+span::before,[disabled=true i].gov-form-checkbox input+span::before,[disabled=\"1\"].gov-form-checkbox input+span::before{border-color:var(--gov-form-input-disabled-bg, var(--gov-color-primary-400))}[size=xs].gov-form-checkbox{font-weight:var(--gov-text-xs-font-weight);font-size:var(--gov-text-xs-font-size);line-height:var(--gov-text-xs-line-height);letter-spacing:var(--gov-text-xs-letter-spacing);display:block;min-width:var(--gov-form-checkbox-core-xs-indicator-size, 1.25rem);min-height:var(--gov-form-checkbox-core-xs-indicator-size, 1.25rem)}[size=xs].gov-form-checkbox .gov-form-label__label{padding-top:calc((var(--gov-form-checkbox-core-xs-indicator-size, 1.25rem) - var(--gov-text-xs-font-size) * 1.5) / 2);padding-left:calc(var(--gov-form-checkbox-core-xs-indicator-size, 1.25rem) + var(--gov-form-checkbox-core-xs-gap, 0.75rem))}[size=xs].gov-form-checkbox input+span::before{width:var(--gov-form-checkbox-core-xs-indicator-size, 1.25rem);height:var(--gov-form-checkbox-core-xs-indicator-size, 1.25rem)}[size=s].gov-form-checkbox{font-weight:var(--gov-text-s-font-weight);font-size:var(--gov-text-s-font-size);line-height:var(--gov-text-s-line-height);letter-spacing:var(--gov-text-s-letter-spacing);display:block;min-width:var(--gov-form-checkbox-core-s-indicator-size, 1.375rem);min-height:var(--gov-form-checkbox-core-s-indicator-size, 1.375rem)}[size=s].gov-form-checkbox .gov-form-label__label{padding-top:calc((var(--gov-form-checkbox-core-s-indicator-size, 1.375rem) - var(--gov-text-s-font-size) * 1.5) / 2);padding-left:calc(var(--gov-form-checkbox-core-s-indicator-size, 1.375rem) + var(--gov-form-checkbox-core-s-gap, 0.75rem))}[size=s].gov-form-checkbox input+span::before{width:var(--gov-form-checkbox-core-s-indicator-size, 1.375rem);height:var(--gov-form-checkbox-core-s-indicator-size, 1.375rem)}[size=m].gov-form-checkbox{font-weight:var(--gov-text-m-font-weight);font-size:var(--gov-text-m-font-size);line-height:var(--gov-text-m-line-height);letter-spacing:var(--gov-text-m-letter-spacing);display:block;min-width:var(--gov-form-checkbox-core-m-indicator-size, 1.5rem);min-height:var(--gov-form-checkbox-core-m-indicator-size, 1.5rem)}[size=m].gov-form-checkbox .gov-form-label__label{padding-top:calc((var(--gov-form-checkbox-core-m-indicator-size, 1.5rem) - var(--gov-text-m-font-size) * 1.5) / 2);padding-left:calc(var(--gov-form-checkbox-core-m-indicator-size, 1.5rem) + var(--gov-form-checkbox-core-m-gap, 1rem))}[size=m].gov-form-checkbox input+span::before{width:var(--gov-form-checkbox-core-m-indicator-size, 1.5rem);height:var(--gov-form-checkbox-core-m-indicator-size, 1.5rem)}[size=l].gov-form-checkbox{font-weight:var(--gov-text-l-font-weight);font-size:var(--gov-text-l-font-size);line-height:var(--gov-text-l-line-height);letter-spacing:var(--gov-text-l-letter-spacing);display:block;min-width:var(--gov-form-checkbox-core-l-indicator-size, 2rem);min-height:var(--gov-form-checkbox-core-l-indicator-size, 2rem)}[size=l].gov-form-checkbox .gov-form-label__label{padding-top:calc((var(--gov-form-checkbox-core-l-indicator-size, 2rem) - var(--gov-text-l-font-size) * 1.5) / 2);padding-left:calc(var(--gov-form-checkbox-core-l-indicator-size, 2rem) + var(--gov-form-checkbox-core-l-gap, 1rem))}[size=l].gov-form-checkbox input+span::before{width:var(--gov-form-checkbox-core-l-indicator-size, 2rem);height:var(--gov-form-checkbox-core-l-indicator-size, 2rem)}.gov-form-checkbox input+span::before{border-radius:var(--gov-border-radius, 0.1875rem)}.gov-form-checkbox__check{position:absolute;color:var(--gov-form-checkbox-check-color, var(--gov-color-neutral-white));opacity:0;transition:150ms linear opacity}.gov-form-checkbox input:checked+span::before{background:var(--gov-form-checkbox-indicator-bg, var(--gov-color-primary))}input:checked+span .gov-form-checkbox__check{opacity:1}.gov-form-checkbox[invalid=\"\"] input:checked+span::before,.gov-form-checkbox[invalid=true i] input:checked+span::before,.gov-form-checkbox[invalid=\"1\"] input:checked+span::before{background:var(--gov-form-state-color-error, var(--gov-color-error))}.gov-form-checkbox[disabled=\"\"] input:checked+span::before,.gov-form-checkbox[disabled=true i] input:checked+span::before,.gov-form-checkbox[disabled=\"1\"] input:checked+span::before{border-color:var(--gov-form-input-disabled-bg, var(--gov-color-primary-400));background-color:var(--gov-form-input-disabled-bg, var(--gov-color-primary-400))}.gov-form-checkbox[size=xs] .gov-form-checkbox__check{top:calc((var(--gov-form-checkbox-core-xs-indicator-size, 1.25rem) - var(--gov-form-checkbox-core-xs-check-size, 0.75rem)) / 2);left:calc((var(--gov-form-checkbox-core-xs-indicator-size, 1.25rem) - var(--gov-form-checkbox-core-xs-check-size, 0.75rem)) / 2);width:var(--gov-form-checkbox-core-xs-check-size, 0.75rem);height:var(--gov-form-checkbox-core-xs-check-size, 0.75rem)}.gov-form-checkbox[size=s] .gov-form-checkbox__check{top:calc((var(--gov-form-checkbox-core-s-indicator-size, 1.375rem) - var(--gov-form-checkbox-core-s-check-size, 0.825rem)) / 2);left:calc((var(--gov-form-checkbox-core-s-indicator-size, 1.375rem) - var(--gov-form-checkbox-core-s-check-size, 0.825rem)) / 2);width:var(--gov-form-checkbox-core-s-check-size, 0.825rem);height:var(--gov-form-checkbox-core-s-check-size, 0.825rem)}.gov-form-checkbox[size=m] .gov-form-checkbox__check{top:calc((var(--gov-form-checkbox-core-m-indicator-size, 1.5rem) - var(--gov-form-checkbox-core-m-check-size, 0.9rem)) / 2);left:calc((var(--gov-form-checkbox-core-m-indicator-size, 1.5rem) - var(--gov-form-checkbox-core-m-check-size, 0.9rem)) / 2);width:var(--gov-form-checkbox-core-m-check-size, 0.9rem);height:var(--gov-form-checkbox-core-m-check-size, 0.9rem)}.gov-form-checkbox[size=l] .gov-form-checkbox__check{top:calc((var(--gov-form-checkbox-core-l-indicator-size, 2rem) - var(--gov-form-checkbox-core-l-check-size, 1.2rem)) / 2);left:calc((var(--gov-form-checkbox-core-l-indicator-size, 2rem) - var(--gov-form-checkbox-core-l-check-size, 1.2rem)) / 2);width:var(--gov-form-checkbox-core-l-check-size, 1.2rem);height:var(--gov-form-checkbox-core-l-check-size, 1.2rem)}";
 
 class GovFormCheckbox {
@@ -17451,11 +17490,10 @@ class GovModal {
     this.label = undefined;
     this.role = "dialog";
     this.labelTag = "h2";
-    this.wcaglabelledBy = undefined;
+    this.wcagLabelledBy = undefined;
     this.wcagDescribedBy = undefined;
     this.wcagCloseLabel = undefined;
     this.wcagCloseLabelledBy = undefined;
-    this.modalVisible = false;
     this.h = govHost(this.host);
     this.labelId = createID("GovModalLabel");
     this.contentId = createID("GovModalContent");
@@ -17469,18 +17507,18 @@ class GovModal {
     }
   }
   watchOpen(newValue) {
-    this.modalVisible = newValue;
+    this.open = newValue;
   }
   showModal() {
-    this.modalVisible = true;
+    this.open = true;
     document.body.classList.add(ModalClass.bodyFix);
   }
   hideModal() {
-    this.modalVisible = false;
+    this.open = false;
     document.body.classList.remove(ModalClass.bodyFix);
   }
   async componentWillRender() {
-    if (this.modalVisible) {
+    if (this.open) {
       this.showModal();
     }
     else {
@@ -17488,7 +17526,6 @@ class GovModal {
     }
   }
   async componentDidRender() {
-    this.modalVisible = this.open;
     if (canValidateWcagOnRender()) {
       await delay(500);
       await this.validateWcag();
@@ -17496,7 +17533,7 @@ class GovModal {
   }
   render() {
     const LabelTag = this.labelTag;
-    return (hAsync(Host, { class: this.h.classes(ModalClass.root), open: this.modalVisible }, hAsync("dialog", { class: ModalClass.dialog, hidden: !this.modalVisible, tabindex: "-1", open: this.modalVisible, "aria-modal": "true", "aria-hidden": toBoolAttr(!this.modalVisible), "aria-labelledby": this.wcaglabelledBy || this.labelId, "aria-describedby": this.wcagDescribedBy || this.contentId, role: this.role }, hAsync("div", { class: ModalClass.inner }, hAsync("div", { class: ModalClass.header }, this.h.hasSlot("icon") && (hAsync("div", { class: ModalClass.icon }, hAsync("slot", { name: "icon" }))), this.label && (hAsync(LabelTag, { class: ModalClass.title, id: this.labelId }, this.label)), hAsync("gov-button", { class: ModalClass.close, variant: "primary", wcagLabel: this.wcagCloseLabel, wcagLabelledBy: this.wcagCloseLabelledBy, type: "base", "on-gov-click": this.onCloseHandler.bind(this) }, hAsync("gov-icon", { name: "x-lg" }))), hAsync("div", { class: ModalClass.content, id: this.contentId }, hAsync("slot", null)))), this.modalVisible ? (hAsync("gov-backdrop", { "wcag-label": this.wcagCloseLabel, "wcag-labelled-by": this.wcagCloseLabelledBy, "on-gov-click": this.onCloseHandler.bind(this) })) : null));
+    return (hAsync(Host, { class: this.h.classes(ModalClass.root), open: this.open }, hAsync("dialog", { class: ModalClass.dialog, hidden: !this.open, tabindex: "-1", open: this.open, "aria-modal": "true", "aria-hidden": toBoolAttr(!this.open), "aria-labelledby": this.wcagLabelledBy || this.labelId, "aria-describedby": this.wcagDescribedBy || this.contentId, role: this.role }, hAsync("div", { class: ModalClass.inner }, hAsync("div", { class: ModalClass.header }, this.h.hasSlot("icon") && (hAsync("div", { class: ModalClass.icon }, hAsync("slot", { name: "icon" }))), this.label && (hAsync(LabelTag, { class: ModalClass.title, id: this.labelId }, this.label)), hAsync("gov-button", { class: ModalClass.close, variant: "primary", wcagLabel: this.wcagCloseLabel, wcagLabelledBy: this.wcagCloseLabelledBy, type: "base", "on-gov-click": this.onCloseHandler.bind(this) }, hAsync("gov-icon", { name: "x-lg" }))), hAsync("div", { class: ModalClass.content, id: this.contentId }, hAsync("slot", null)))), this.open ? (hAsync("gov-backdrop", { "wcag-label": this.wcagCloseLabel, "wcag-labelled-by": this.wcagCloseLabelledBy, "on-gov-click": this.onCloseHandler.bind(this) })) : null));
   }
   onCloseHandler(e) {
     e.stopPropagation();
@@ -17510,7 +17547,7 @@ class GovModal {
     this.showModal();
   }
   /**
-   * Hidding the modal
+   * Hiding the modal
    */
   async hide() {
     this.hideModal();
@@ -17519,8 +17556,8 @@ class GovModal {
    * Validate the WCAG attributes of the component
    */
   async validateWcag() {
-    validateWcagRef(this.wcaglabelledBy, "aria-labelledby", ModalClass.root);
-    validateWcagRef(this.wcagDescribedBy, "aria-describedby", ModalClass.root);
+    validateWcagRef(this.wcagLabelledBy, "wcag-labelled-by", ModalClass.root);
+    validateWcagRef(this.wcagDescribedBy, "wcag-described-by", ModalClass.root);
   }
   get host() { return getElement(this); }
   static get watchers() { return {
@@ -17532,15 +17569,14 @@ class GovModal {
     "$flags$": 4,
     "$tagName$": "gov-modal",
     "$members$": {
-      "open": [4],
+      "open": [1028],
       "label": [1],
       "role": [1],
       "labelTag": [1, "label-tag"],
-      "wcaglabelledBy": [1, "wcag-labelled-by"],
+      "wcagLabelledBy": [1, "wcag-labelled-by"],
       "wcagDescribedBy": [1, "wcag-described-by"],
       "wcagCloseLabel": [1, "wcag-close-label"],
       "wcagCloseLabelledBy": [1, "wcag-close-labelled-by"],
-      "modalVisible": [32],
       "show": [64],
       "hide": [64],
       "validateWcag": [64]
@@ -17868,11 +17904,10 @@ class GovPrompt {
     this.label = undefined;
     this.role = "dialog";
     this.labelTag = "h2";
-    this.wcaglabelledBy = undefined;
+    this.wcagLabelledBy = undefined;
     this.wcagDescribedBy = undefined;
     this.wcagCloseLabel = undefined;
     this.wcagCloseLabelledBy = undefined;
-    this.modalVisible = false;
     this.h = govHost(this.host);
     this.labelId = createID("GovPromptLabel");
     this.contentId = createID("GovPromptContent");
@@ -17886,18 +17921,18 @@ class GovPrompt {
     }
   }
   watchOpen(newValue) {
-    this.modalVisible = newValue;
+    this.open = newValue;
   }
   showModal() {
-    this.modalVisible = true;
+    this.open = true;
     document.body.classList.add(ModalClass.bodyFix);
   }
   hideModal() {
-    this.modalVisible = false;
+    this.open = false;
     document.body.classList.remove(ModalClass.bodyFix);
   }
   async componentWillRender() {
-    if (this.modalVisible) {
+    if (this.open) {
       this.showModal();
     }
     else {
@@ -17905,7 +17940,6 @@ class GovPrompt {
     }
   }
   async componentDidRender() {
-    this.modalVisible = this.open;
     if (canValidateWcagOnRender()) {
       await delay(500);
       await this.validateWcag();
@@ -17913,7 +17947,7 @@ class GovPrompt {
   }
   render() {
     const LabelTag = this.labelTag;
-    return (hAsync(Host, { class: this.h.classes(ModalClass.rootPrompt), open: this.modalVisible }, hAsync("dialog", { class: ModalClass.dialog, hidden: !this.modalVisible, tabindex: "-1", open: this.modalVisible, "aria-modal": "true", "aria-hidden": toBoolAttr(!this.modalVisible), "aria-labelledby": this.wcaglabelledBy || this.labelId, "aria-describedby": this.wcagDescribedBy || this.contentId, role: this.role }, hAsync("div", { class: ModalClass.inner }, hAsync("div", { class: ModalClass.header }, this.h.hasSlot("icon") && (hAsync("div", { class: ModalClass.icon }, hAsync("slot", { name: "icon" }))), this.label && (hAsync(LabelTag, { class: ModalClass.title, id: this.labelId }, this.label)), hAsync("gov-button", { class: ModalClass.close, variant: "primary", wcagLabel: this.wcagCloseLabel, wcagLabelledBy: this.wcagCloseLabelledBy, type: "base", "on-gov-click": this.onCloseHandler.bind(this) }, hAsync("gov-icon", { name: "x-lg" }))), hAsync("div", { class: ModalClass.content, id: this.contentId }, hAsync("slot", null)), hAsync("div", { class: ModalClass.actions }, hAsync("slot", { name: "actions" })))), this.modalVisible ? (hAsync("gov-backdrop", { "wcag-label": this.wcagCloseLabel, "wcag-labelled-by": this.wcagCloseLabelledBy, "on-gov-click": this.onCloseHandler.bind(this) })) : null));
+    return (hAsync(Host, { class: this.h.classes(ModalClass.rootPrompt), open: this.open }, hAsync("dialog", { class: ModalClass.dialog, hidden: !this.open, tabindex: "-1", open: this.open, "aria-modal": "true", "aria-hidden": toBoolAttr(!this.open), "aria-labelledby": this.wcagLabelledBy || this.labelId, "aria-describedby": this.wcagDescribedBy || this.contentId, role: this.role }, hAsync("div", { class: ModalClass.inner }, hAsync("div", { class: ModalClass.header }, this.h.hasSlot("icon") && (hAsync("div", { class: ModalClass.icon }, hAsync("slot", { name: "icon" }))), this.label && (hAsync(LabelTag, { class: ModalClass.title, id: this.labelId }, this.label)), hAsync("gov-button", { class: ModalClass.close, variant: "primary", wcagLabel: this.wcagCloseLabel, wcagLabelledBy: this.wcagCloseLabelledBy, type: "base", "on-gov-click": this.onCloseHandler.bind(this) }, hAsync("gov-icon", { name: "x-lg" }))), hAsync("div", { class: ModalClass.content, id: this.contentId }, hAsync("slot", null)), hAsync("div", { class: ModalClass.actions }, hAsync("slot", { name: "actions" })))), this.open ? (hAsync("gov-backdrop", { "wcag-label": this.wcagCloseLabel, "wcag-labelled-by": this.wcagCloseLabelledBy, "on-gov-click": this.onCloseHandler.bind(this) })) : null));
   }
   onCloseHandler(e) {
     e.stopPropagation();
@@ -17927,7 +17961,7 @@ class GovPrompt {
     this.showModal();
   }
   /**
-   * Hidding the modal
+   * Hiding the modal
    */
   async hide() {
     this.hideModal();
@@ -17936,8 +17970,8 @@ class GovPrompt {
    * Validate the WCAG attributes of the component
    */
   async validateWcag() {
-    validateWcagRef(this.wcaglabelledBy, "aria-labelledby", ModalClass.root);
-    validateWcagRef(this.wcagDescribedBy, "aria-describedby", ModalClass.root);
+    validateWcagRef(this.wcagLabelledBy, "wcag-labelled-by", ModalClass.root);
+    validateWcagRef(this.wcagDescribedBy, "wcag-described-by", ModalClass.root);
   }
   get host() { return getElement(this); }
   static get watchers() { return {
@@ -17949,15 +17983,14 @@ class GovPrompt {
     "$flags$": 4,
     "$tagName$": "gov-prompt",
     "$members$": {
-      "open": [4],
+      "open": [1028],
       "label": [1],
       "role": [1],
       "labelTag": [1, "label-tag"],
-      "wcaglabelledBy": [1, "wcag-labelled-by"],
+      "wcagLabelledBy": [1, "wcag-labelled-by"],
       "wcagDescribedBy": [1, "wcag-described-by"],
       "wcagCloseLabel": [1, "wcag-close-label"],
       "wcagCloseLabelledBy": [1, "wcag-close-labelled-by"],
-      "modalVisible": [32],
       "show": [64],
       "hide": [64],
       "validateWcag": [64]

package/dist/types/components/gov-alert/constants.d.ts

@@ -7,5 +7,6 @@ export declare const AlertClass: {
   section: string;
   icon: string;
   content: string;
+  headline: string;
   close: string;
 };

package/dist/types/components/gov-alert/gov-alert.d.ts

@@ -1,30 +1,47 @@
-import { EventEmitter } from '../../stencil-public-runtime';
-import { VariantType } from './constants';
+import { EventEmitter } from "../../stencil-public-runtime";
+import { VariantType } from "./constants";
+import { AlertEvent } from "./gov-alert.types";
+import { ButtonEvent } from "../gov-button/gov-button.types";
 export declare class GovAlert {
   private h;
   constructor();
   host: HTMLGovAlertElement;
+  /**
+   * Style variation of the button.
+   */
+  readonly headline: string;
   /**
    * Style variation of the button.
    */
   readonly variant: VariantType;
   /**
-   * Determide if component should have inversed colors to be used on dark background
+   * Determine if component should have inverse colors to be used on dark background
    */
   readonly inverse: boolean;
   /**
    * Aria label for the closing button. It is mandatory if the alert is closable
    */
   readonly wcagCloseLabel: string;
+  /**
+   * Aria label for the toggle button. It is mandatory if the alert has headline
+   */
+  readonly wcagToggleLabel: string;
   /**
    * Called when the close button is clicked
    */
-  govClose: EventEmitter<PointerEvent>;
+  govClose: EventEmitter<AlertEvent>;
   /**
    * Displays the option to close the alert
    */
   readonly closable?: boolean;
+  toggleContent: boolean;
   validateVariant(newValue: string): void;
   componentWillLoad(): void;
+  componentDidRender(): Promise<void>;
   render(): any;
+  onCloseHandler(e: CustomEvent<ButtonEvent>): void;
+  /**
+   * Validate the WCAG attributes of the component
+   */
+  validateWcag(): Promise<void>;
 }

package/dist/types/components/gov-alert/gov-alert.types.d.ts

@@ -0,0 +1,4 @@
+import { GovBaseEvent } from "../../types/event.types";
+export interface AlertEvent extends GovBaseEvent {
+  ref: HTMLGovAlertElement;
+}

package/dist/types/components/gov-modal/gov-modal.d.ts

@@ -18,13 +18,13 @@ export declare class GovModal {
    */
   role: string;
   /**
-   * Used to change the HMTL tag in the modal label for correct semantic structure
+   * Used to change the HTML tag in the modal label for correct semantic structure
    */
   readonly labelTag: string;
   /**
    * String of id's that indicate alternative labels elements
    */
-  wcaglabelledBy: string;
+  wcagLabelledBy: string;
   /**
    * Indicates the id of a component that describes the modal.
    */
@@ -41,7 +41,6 @@ export declare class GovModal {
    * Emitted when modal window closes.
    */
   govClose: EventEmitter<PointerEvent>;
-  modalVisible: boolean;
   validateLabelTag(newValue: string): void;
   watchOpen(newValue: boolean): void;
   private showModal;
@@ -55,7 +54,7 @@ export declare class GovModal {
    */
   show(): Promise<void>;
   /**
-   * Hidding the modal
+   * Hiding the modal
    */
   hide(): Promise<void>;
   /**

package/dist/types/components/gov-promp/gov-prompt.d.ts

@@ -18,13 +18,13 @@ export declare class GovPrompt {
    */
   role: string;
   /**
-   * Used to change the HMTL tag in the modal label for correct semantic structure
+   * Used to change the HTML tag in the modal label for correct semantic structure
    */
   readonly labelTag: string;
   /**
    * String of id's that indicate alternative labels elements
    */
-  wcaglabelledBy: string;
+  wcagLabelledBy: string;
   /**
    * Indicates the id of a component that describes the modal.
    */
@@ -41,7 +41,6 @@ export declare class GovPrompt {
    * Emitted when modal window closes.
    */
   govClose: EventEmitter<PointerEvent>;
-  modalVisible: boolean;
   validateLabelTag(newValue: string): void;
   watchOpen(newValue: boolean): void;
   private showModal;
@@ -55,7 +54,7 @@ export declare class GovPrompt {
    */
   show(): Promise<void>;
   /**
-   * Hidding the modal
+   * Hiding the modal
    */
   hide(): Promise<void>;
   /**

package/dist/types/components.d.ts

@@ -8,6 +8,7 @@ import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { AccordionSizeType, AccordionVariantType } from "./components/gov-accordion/constants";
 import { AccordionEvent, AccordionItemEvent } from "./components/gov-accordion/gov-accordion.types";
 import { VariantType } from "./components/gov-alert/constants";
+import { AlertEvent } from "./components/gov-alert/gov-alert.types";
 import { ButtonSizesType, ButtonTargetType, ButtonVariantType, NativeTypesType as NativeTypesType1, TypesType } from "./components/gov-button/constants";
 import { NativeTypesType } from "./components/gov-badge/constants";
 import { GovBreadcrumbsChangeEvent } from "./components/gov-breadcrumbs/gov-breadcrumbs.d";
@@ -136,9 +137,17 @@ export namespace Components {
          */
         "closable"?: boolean;
         /**
-          * Determide if component should have inversed colors to be used on dark background
+          * Style variation of the button.
+         */
+        "headline": string;
+        /**
+          * Determine if component should have inverse colors to be used on dark background
          */
         "inverse": boolean;
+        /**
+          * Validate the WCAG attributes of the component
+         */
+        "validateWcag": () => Promise<void>;
         /**
           * Style variation of the button.
          */
@@ -147,6 +156,10 @@ export namespace Components {
           * Aria label for the closing button. It is mandatory if the alert is closable
          */
         "wcagCloseLabel": string;
+        /**
+          * Aria label for the toggle button. It is mandatory if the alert has headline
+         */
+        "wcagToggleLabel": string;
     }
     interface GovApp {
     }
@@ -1178,7 +1191,7 @@ export namespace Components {
     }
     interface GovModal {
         /**
-          * Hidding the modal
+          * Hiding the modal
          */
         "hide": () => Promise<void>;
         /**
@@ -1186,7 +1199,7 @@ export namespace Components {
          */
         "label": string;
         /**
-          * Used to change the HMTL tag in the modal label for correct semantic structure
+          * Used to change the HTML tag in the modal label for correct semantic structure
          */
         "labelTag": string;
         /**
@@ -1220,7 +1233,7 @@ export namespace Components {
         /**
           * String of id's that indicate alternative labels elements
          */
-        "wcaglabelledBy": string;
+        "wcagLabelledBy": string;
     }
     interface GovNav {
         /**
@@ -1303,7 +1316,7 @@ export namespace Components {
     }
     interface GovPrompt {
         /**
-          * Hidding the modal
+          * Hiding the modal
          */
         "hide": () => Promise<void>;
         /**
@@ -1311,7 +1324,7 @@ export namespace Components {
          */
         "label": string;
         /**
-          * Used to change the HMTL tag in the modal label for correct semantic structure
+          * Used to change the HTML tag in the modal label for correct semantic structure
          */
         "labelTag": string;
         /**
@@ -1345,7 +1358,7 @@ export namespace Components {
         /**
           * String of id's that indicate alternative labels elements
          */
-        "wcaglabelledBy": string;
+        "wcagLabelledBy": string;
     }
     interface GovSideNav {
         /**
@@ -2360,13 +2373,17 @@ declare namespace LocalJSX {
          */
         "closable"?: boolean;
         /**
-          * Determide if component should have inversed colors to be used on dark background
+          * Style variation of the button.
+         */
+        "headline"?: string;
+        /**
+          * Determine if component should have inverse colors to be used on dark background
          */
         "inverse"?: boolean;
         /**
           * Called when the close button is clicked
          */
-        "onGov-close"?: (event: GovAlertCustomEvent<PointerEvent>) => void;
+        "onGov-close"?: (event: GovAlertCustomEvent<AlertEvent>) => void;
         /**
           * Style variation of the button.
          */
@@ -2375,6 +2392,10 @@ declare namespace LocalJSX {
           * Aria label for the closing button. It is mandatory if the alert is closable
          */
         "wcagCloseLabel"?: string;
+        /**
+          * Aria label for the toggle button. It is mandatory if the alert has headline
+         */
+        "wcagToggleLabel"?: string;
     }
     interface GovApp {
     }
@@ -3408,7 +3429,7 @@ declare namespace LocalJSX {
          */
         "label"?: string;
         /**
-          * Used to change the HMTL tag in the modal label for correct semantic structure
+          * Used to change the HTML tag in the modal label for correct semantic structure
          */
         "labelTag"?: string;
         /**
@@ -3438,7 +3459,7 @@ declare namespace LocalJSX {
         /**
           * String of id's that indicate alternative labels elements
          */
-        "wcaglabelledBy"?: string;
+        "wcagLabelledBy"?: string;
     }
     interface GovNav {
         /**
@@ -3521,7 +3542,7 @@ declare namespace LocalJSX {
          */
         "label"?: string;
         /**
-          * Used to change the HMTL tag in the modal label for correct semantic structure
+          * Used to change the HTML tag in the modal label for correct semantic structure
          */
         "labelTag"?: string;
         /**
@@ -3551,7 +3572,7 @@ declare namespace LocalJSX {
         /**
           * String of id's that indicate alternative labels elements
          */
-        "wcaglabelledBy"?: string;
+        "wcagLabelledBy"?: string;
     }
     interface GovSideNav {
         /**

package/package.json

@@ -2,7 +2,7 @@
     "name" : "@gov-design-system-ce/components",
     "description" : "This package includes Gov Design System Web Components and related utilities.",
     "author": "Zdeněk Vítek",
-    "version" : "0.0.19",
+    "version" : "0.0.21",
     "license" : "EUPL v1.2 Licensed",
     "main" : "./dist/index.cjs.js",
     "module" : "./dist/index.js",