@gov-design-system-ce/components 0.0.1 → 0.0.3

package/dist/components/gov-app.js

@@ -1,4 +1,4 @@
-import { proxyCustomElement, HTMLElement as HTMLElement$1 } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement as HTMLElement$1, h, Host } from '@stencil/core/internal/client';
 
 function toArray(objectOrArray) {
   objectOrArray = objectOrArray || [];
@@ -2896,18 +2896,18 @@ class HomePage extends HTMLElement {
     this.innerHTML = ``;
   }
 }
-if (customElements.get("home-page") === undefined) {
-  customElements.define("home-page", HomePage);
+if (customElements.get('home-page') === undefined) {
+  customElements.define('home-page', HomePage);
 }
 
 class AccordionPage extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
-		
+
 			<h4>Accordion - small</h4>
 			<div class="container-view">
 				<gov-accordion size="s">
-					<gov-accordion-item trigger-tag="h1" label="Font Awesome Icon">
+					<gov-accordion-item trigger-tag="h1" label="Font Awesome Icon" annotation="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus">
 						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
 						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
 					</gov-accordion-item>
@@ -2923,7 +2923,7 @@ class AccordionPage extends HTMLElement {
 				</gov-accordion>
 				<br>
 				<gov-accordion size="s">
-					<gov-accordion-item trigger-tag="h1" label="Font Awesome Icon">
+					<gov-accordion-item trigger-tag="h1" label="Font Awesome Icon" annotation="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus">
 						<gov-icon slot="icon" name="info"></gov-icon>
 						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
 						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
@@ -2946,7 +2946,7 @@ class AccordionPage extends HTMLElement {
 			<h4>Accordion - medium (default)</h4>
 			<div class="container-view">
 				<gov-accordion>
-					<gov-accordion-item trigger-tag="h1" label="Lorem ipsum dolor sit amet" disabled>
+					<gov-accordion-item trigger-tag="h1" label="Lorem ipsum dolor sit amet" disabled annotation="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus">
 						<gov-badge variant="primary" size="s" slot="suffix">super badge</gov-badge>
 						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
 						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
@@ -2963,7 +2963,7 @@ class AccordionPage extends HTMLElement {
 				</gov-accordion>
 				<br>
 				<gov-accordion>
-					<gov-accordion-item trigger-tag="h1" label="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In imperdiet dictum consectetur. Sed posuere tellus in lobortis aliquam. Pellentesque a porttitor purus." is-expanded>
+					<gov-accordion-item trigger-tag="h1" label="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In imperdiet dictum consectetur. Sed posuere tellus in lobortis aliquam. Pellentesque a porttitor purus." is-expanded annotation="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus">
 						<gov-icon slot="icon" name="info"></gov-icon>
 						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
 						<gov-badge variant="primary" size="s" slot="suffix">super badge</gov-badge>
@@ -2983,11 +2983,11 @@ class AccordionPage extends HTMLElement {
 					</gov-accordion-item>
 				</gov-accordion>
 			</div>
-					
+
 			<h4>Accordion - large</h4>
 			<div class="container-view">
 				<gov-accordion size="l">
-					<gov-accordion-item trigger-tag="h1" label="Základní informace">
+					<gov-accordion-item trigger-tag="h1" label="Základní informace" annotation="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus">
 						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
 						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
 					</gov-accordion-item>
@@ -3003,7 +3003,7 @@ class AccordionPage extends HTMLElement {
 				</gov-accordion>
 				<br>
 				<gov-accordion size="l">
-					<gov-accordion-item trigger-tag="h1" label="Základní informace">
+					<gov-accordion-item trigger-tag="h1" label="Základní informace" annotation="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus">
 						<gov-icon slot="icon" name="info"></gov-icon>
 						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
 						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
@@ -3022,11 +3022,11 @@ class AccordionPage extends HTMLElement {
 					</gov-accordion-item>
 				</gov-accordion>
 			</div>
-			
-			
-			
-			
-			
+
+
+
+
+
 			<h4>Accordion Secondary - small</h4>
 			<div class="container-view">
 				<gov-accordion size="s" variant="secondary">
@@ -3106,7 +3106,7 @@ class AccordionPage extends HTMLElement {
 					</gov-accordion-item>
 				</gov-accordion>
 			</div>
-					
+
 			<h4>Accordion Secondary - large</h4>
 			<div class="container-view">
 				<gov-accordion size="l" variant="secondary">
@@ -3146,12 +3146,12 @@ class AccordionPage extends HTMLElement {
 				</gov-accordion>
 			</div>
 
-			
+
 		`;
   }
 }
-if (customElements.get("accordion-page") === undefined) {
-  customElements.define("accordion-page", AccordionPage);
+if (customElements.get('accordion-page') === undefined) {
+  customElements.define('accordion-page', AccordionPage);
 }
 
 class AlertPage extends HTMLElement {
@@ -3193,7 +3193,7 @@ class AlertPage extends HTMLElement {
 				Error - 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>
-		
+
 		<h3>Inverse</h3>
 		<br>
 		<gov-alert inverse="TRUE" variant="secondary" closable>
@@ -3233,8 +3233,8 @@ class AlertPage extends HTMLElement {
 		`;
   }
 }
-if (customElements.get("alert-page") === undefined) {
-  customElements.define("alert-page", AlertPage);
+if (customElements.get('alert-page') === undefined) {
+  customElements.define('alert-page', AlertPage);
 }
 
 class BadgePage extends HTMLElement {
@@ -3244,7 +3244,10 @@ class BadgePage extends HTMLElement {
 			<h4>Badges - primary (default)</h4>
 			<div class="container-view">
 				<gov-badge variant="primary" size="xs">
-					3
+					Badge
+				</gov-badge>
+				<gov-badge variant="primary" size="xs" inverse>
+					Badge
 				</gov-badge>
 				<gov-badge variant="primary" size="s">
 					<gov-icon slot="left-icon" name="info"></gov-icon>
@@ -3274,7 +3277,7 @@ class BadgePage extends HTMLElement {
 			<h4>Badges - primary (outlined)</h4>
 			<div class="container-view">
 				<gov-badge variant="primary" type="outlined" size="xs">
-					3
+					Badge
 				</gov-badge>
 				<gov-badge variant="primary" tag="a" type="outlined" size="s">
 					<gov-icon slot="left-icon" name="info"></gov-icon>
@@ -3294,11 +3297,14 @@ class BadgePage extends HTMLElement {
 				</gov-badge>
 			</div>
 			<hr />
-			
+
 			<h4>Badges - secondary (default)</h4>
 			<div class="container-view">
 				<gov-badge variant="secondary" size="xs">
-					3
+					Badge
+				</gov-badge>
+				<gov-badge variant="secondary" size="xs" inverse>
+					Badge
 				</gov-badge>
 				<gov-badge variant="secondary" size="s">
 					<gov-icon slot="left-icon" name="info"></gov-icon>
@@ -3328,7 +3334,7 @@ class BadgePage extends HTMLElement {
 			<h4>Badges - secondary (outlined)</h4>
 			<div class="container-view">
 				<gov-badge variant="secondary" tag="a" type="outlined" size="xs">
-					3
+					Badge
 				</gov-badge>
 				<gov-badge variant="secondary" tag="a" type="outlined" size="s">
 					<gov-icon slot="left-icon" name="info"></gov-icon>
@@ -3352,7 +3358,10 @@ class BadgePage extends HTMLElement {
 			<h4>Badges - success (default)</h4>
 			<div class="container-view">
 				<gov-badge variant="success" size="xs">
-					3
+					Badge
+				</gov-badge>
+				<gov-badge variant="success" size="xs" inverse>
+					Badge
 				</gov-badge>
 				<gov-badge variant="success" size="s">
 					<gov-icon slot="left-icon" name="info"></gov-icon>
@@ -3382,7 +3391,7 @@ class BadgePage extends HTMLElement {
 			<h4>Badges - success (outlined)</h4>
 			<div class="container-view">
 				<gov-badge variant="success" tag="a" type="outlined" size="xs">
-					3
+					Badge
 				</gov-badge>
 				<gov-badge variant="success" tag="a" type="outlined" size="s">
 					<gov-icon slot="left-icon" name="info"></gov-icon>
@@ -3406,7 +3415,10 @@ class BadgePage extends HTMLElement {
 			<h4>Badges - warning (default)</h4>
 			<div class="container-view">
 				<gov-badge variant="warning" size="xs">
-					3
+					Badge
+				</gov-badge>
+				<gov-badge variant="warning" size="xs" inverse>
+					Badge
 				</gov-badge>
 				<gov-badge variant="warning" size="s">
 					<gov-icon slot="left-icon" name="info"></gov-icon>
@@ -3436,7 +3448,7 @@ class BadgePage extends HTMLElement {
 			<h4>Badges - warning (outlined)</h4>
 			<div class="container-view">
 				<gov-badge variant="warning" tag="a" type="outlined" size="xs">
-					3
+					Badge
 				</gov-badge>
 				<gov-badge variant="warning" tag="a" type="outlined" size="s">
 					<gov-icon slot="left-icon" name="info"></gov-icon>
@@ -3460,7 +3472,10 @@ class BadgePage extends HTMLElement {
 			<h4>Badges - error (default)</h4>
 			<div class="container-view">
 				<gov-badge variant="error" size="xs">
-					3
+					Badge
+				</gov-badge>
+				<gov-badge variant="error" size="xs" inverse>
+					Badge
 				</gov-badge>
 				<gov-badge variant="error" size="s">
 					<gov-icon slot="left-icon" name="info"></gov-icon>
@@ -3490,7 +3505,7 @@ class BadgePage extends HTMLElement {
 			<h4>Badges - error (outlined)</h4>
 			<div class="container-view">
 				<gov-badge variant="error" tag="a" type="outlined" size="xs">
-					3
+					Badge
 				</gov-badge>
 				<gov-badge variant="error" tag="a" type="outlined" size="s">
 					<gov-icon slot="left-icon" name="info"></gov-icon>
@@ -3512,16 +3527,16 @@ class BadgePage extends HTMLElement {
 		`;
   }
 }
-if (customElements.get("badge-page") === undefined) {
-  customElements.define("badge-page", BadgePage);
+if (customElements.get('badge-page') === undefined) {
+  customElements.define('badge-page', BadgePage);
 }
 
 class ButtonPage extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
-			<h1>Buttons</h1>			
+			<h1>Buttons</h1>
 			<h4>Buttons - primary (default)</h4>
-			<div class="container-view">			
+			<div class="container-view">
 				<gov-button variant="primary" size="s" href="http://localhost:3333/button">
 					<gov-icon slot="left-icon" name="info"></gov-icon>
 					Small Primary
@@ -3810,22 +3825,22 @@ class ButtonPage extends HTMLElement {
 				<gov-button variant="secondary" type="outlined" size="s">
 					<gov-icon slot="left-icon" name="info"></gov-icon>
 					Small secondary
-					<gov-icon slot="right-icon" name="info"></gov-icon>	
+					<gov-icon slot="right-icon" name="info"></gov-icon>
 				</gov-button>
 				<gov-button variant="secondary" type="outlined" disabled>
 					<gov-icon slot="left-icon" name="info"></gov-icon>
 					Normal secondary
-					<gov-icon slot="right-icon" name="info"></gov-icon>	
+					<gov-icon slot="right-icon" name="info"></gov-icon>
 				</gov-button>
 				<gov-button variant="secondary" type="outlined" size="l">
 					<gov-icon slot="left-icon" name="info"></gov-icon>
 					Large secondary
-					<gov-icon slot="right-icon" name="info"></gov-icon>	
+					<gov-icon slot="right-icon" name="info"></gov-icon>
 				</gov-button>
 				<gov-button variant="secondary" type="outlined" disabled size="xl">
 					<gov-icon slot="left-icon" name="info"></gov-icon>
 					X-Large secondary
-					<gov-icon slot="right-icon" name="info"></gov-icon>	
+					<gov-icon slot="right-icon" name="info"></gov-icon>
 				</gov-button>
 				<br>
 				<gov-button variant="secondary" type="outlined" href="http://localhost:3333/button" loading="false">
@@ -3865,22 +3880,22 @@ class ButtonPage extends HTMLElement {
 				<gov-button variant="secondary" type="base" size="s">
 					<gov-icon slot="left-icon" name="info"></gov-icon>
 					Small secondary
-					<gov-icon slot="right-icon" name="info"></gov-icon>	
+					<gov-icon slot="right-icon" name="info"></gov-icon>
 				</gov-button>
 				<gov-button variant="secondary" type="base" disabled>
 					<gov-icon slot="left-icon" name="info"></gov-icon>
 					Normal secondary
-					<gov-icon slot="right-icon" name="info"></gov-icon>	
+					<gov-icon slot="right-icon" name="info"></gov-icon>
 				</gov-button>
 				<gov-button variant="secondary" type="base" size="l">
 					<gov-icon slot="left-icon" name="info"></gov-icon>
 					Large secondary
-					<gov-icon slot="right-icon" name="info"></gov-icon>	
+					<gov-icon slot="right-icon" name="info"></gov-icon>
 				</gov-button>
 				<gov-button variant="secondary" type="base" disabled size="xl">
 					<gov-icon slot="left-icon" name="info"></gov-icon>
 					X-Large secondary
-					<gov-icon slot="right-icon" name="info"></gov-icon>	
+					<gov-icon slot="right-icon" name="info"></gov-icon>
 				</gov-button>
 				<br>
 				<gov-button variant="secondary" type="base" href="http://localhost:3333/button" loading="false">
@@ -3920,22 +3935,22 @@ class ButtonPage extends HTMLElement {
 				<gov-button variant="warning" size="s" class="u-mr--medium u-mr-mobile--2xl u-mr-tablet--unset u-mr-portable--medium">
 					<gov-icon slot="left-icon" name="info"></gov-icon>
 					Small warning
-					<gov-icon slot="right-icon" name="info"></gov-icon>	
+					<gov-icon slot="right-icon" name="info"></gov-icon>
 				</gov-button>
 				<gov-button variant="warning" disabled>
 					<gov-icon slot="left-icon" name="info"></gov-icon>
 					Normal warning
-					<gov-icon slot="right-icon" name="info"></gov-icon>	
+					<gov-icon slot="right-icon" name="info"></gov-icon>
 				</gov-button>
 				<gov-button variant="warning" size="l">
 					<gov-icon slot="left-icon" name="info"></gov-icon>
 					Large warning
-					<gov-icon slot="right-icon" name="info"></gov-icon>	
+					<gov-icon slot="right-icon" name="info"></gov-icon>
 				</gov-button>
 				<gov-button variant="warning" size="xl" disabled>
 					<gov-icon slot="left-icon" name="info"></gov-icon>
 					X-Large warning
-					<gov-icon slot="right-icon" name="info"></gov-icon>	
+					<gov-icon slot="right-icon" name="info"></gov-icon>
 				</gov-button>
 				<br>
 				<gov-button variant="warning" href="http://localhost:3333/button" loading="false">
@@ -3994,22 +4009,22 @@ class ButtonPage extends HTMLElement {
 				<gov-button variant="warning" type="outlined" size="s">
 					<gov-icon slot="left-icon" name="info"></gov-icon>
 					Small warning
-					<gov-icon slot="right-icon" name="info"></gov-icon>	
+					<gov-icon slot="right-icon" name="info"></gov-icon>
 				</gov-button>
 				<gov-button variant="warning" type="outlined" disabled>
 					<gov-icon slot="left-icon" name="info"></gov-icon>
 					Normal warning
-					<gov-icon slot="right-icon" name="info"></gov-icon>	
+					<gov-icon slot="right-icon" name="info"></gov-icon>
 				</gov-button>
 				<gov-button variant="warning" type="outlined" size="l">
 					<gov-icon slot="left-icon" name="info"></gov-icon>
 					Large warning
-					<gov-icon slot="right-icon" name="info"></gov-icon>	
+					<gov-icon slot="right-icon" name="info"></gov-icon>
 				</gov-button>
 				<gov-button variant="warning" type="outlined" disabled size="xl">
 					<gov-icon slot="left-icon" name="info"></gov-icon>
 					X-Large warning
-					<gov-icon slot="right-icon" name="info"></gov-icon>	
+					<gov-icon slot="right-icon" name="info"></gov-icon>
 				</gov-button>
 				<br>
 				<gov-button variant="warning" type="outlined" href="http://localhost:3333/button" loading="false">
@@ -4049,22 +4064,22 @@ class ButtonPage extends HTMLElement {
 				<gov-button variant="warning" type="base" size="s">
 					<gov-icon slot="left-icon" name="info"></gov-icon>
 					Small warning
-					<gov-icon slot="right-icon" name="info"></gov-icon>	
+					<gov-icon slot="right-icon" name="info"></gov-icon>
 				</gov-button>
 				<gov-button variant="warning" type="base" disabled>
 					<gov-icon slot="left-icon" name="info"></gov-icon>
 					Normal warning
-					<gov-icon slot="right-icon" name="info"></gov-icon>	
+					<gov-icon slot="right-icon" name="info"></gov-icon>
 				</gov-button>
 				<gov-button variant="warning" type="base" size="l">
 					<gov-icon slot="left-icon" name="info"></gov-icon>
 					Large warning
-					<gov-icon slot="right-icon" name="info"></gov-icon>	
+					<gov-icon slot="right-icon" name="info"></gov-icon>
 				</gov-button>
 				<gov-button variant="warning" type="base" disabled size="xl">
 					<gov-icon slot="left-icon" name="info"></gov-icon>
 					X-Large warning
-					<gov-icon slot="right-icon" name="info"></gov-icon>	
+					<gov-icon slot="right-icon" name="info"></gov-icon>
 				</gov-button>
 				<br>
 				<gov-button variant="warning" type="base" href="http://localhost:3333/button" loading="false">
@@ -4104,22 +4119,22 @@ class ButtonPage extends HTMLElement {
 				<gov-button variant="success" size="s" class="u-mr--medium u-mr-mobile--2xl u-mr-tablet--unset u-mr-portable--medium">
 					<gov-icon slot="left-icon" name="info"></gov-icon>
 					Small success
-					<gov-icon slot="right-icon" name="info"></gov-icon>	
+					<gov-icon slot="right-icon" name="info"></gov-icon>
 				</gov-button>
 				<gov-button variant="success" disabled>
 					<gov-icon slot="left-icon" name="info"></gov-icon>
 					Normal success
-					<gov-icon slot="right-icon" name="info"></gov-icon>	
+					<gov-icon slot="right-icon" name="info"></gov-icon>
 				</gov-button>
 				<gov-button variant="success" size="l">
 					<gov-icon slot="left-icon" name="info"></gov-icon>
 					Large success
-					<gov-icon slot="right-icon" name="info"></gov-icon>	
+					<gov-icon slot="right-icon" name="info"></gov-icon>
 				</gov-button>
 				<gov-button variant="success" size="xl" disabled>
 					<gov-icon slot="left-icon" name="info"></gov-icon>
 					X-Large success
-					<gov-icon slot="right-icon" name="info"></gov-icon>	
+					<gov-icon slot="right-icon" name="info"></gov-icon>
 				</gov-button>
 				<br>
 				<gov-button variant="success" href="http://localhost:3333/button" loading="false">
@@ -4178,23 +4193,22 @@ class ButtonPage extends HTMLElement {
 				<gov-button variant="success" type="outlined" size="s">
 					<gov-icon slot="left-icon" name="info"></gov-icon>
 					Small success
-					<gov-icon slot="right-icon" name="info"></gov-icon>	
+					<gov-icon slot="right-icon" name="info"></gov-icon>
 				</gov-button>
 				<gov-button variant="success" type="outlined" disabled>
-				<gov-icon slot="left-icon" name="info"></gov-icon>
 					<gov-icon slot="left-icon" name="info"></gov-icon>
 					Normal success
-					<gov-icon slot="right-icon" name="info"></gov-icon>	
+					<gov-icon slot="right-icon" name="info"></gov-icon>
 				</gov-button>
 				<gov-button variant="success" type="outlined" size="l">
 					<gov-icon slot="left-icon" name="info"></gov-icon>
 					Large success
-					<gov-icon slot="right-icon" name="info"></gov-icon>	
+					<gov-icon slot="right-icon" name="info"></gov-icon>
 				</gov-button>
 				<gov-button variant="success" type="outlined" disabled size="xl">
 					<gov-icon slot="left-icon" name="info"></gov-icon>
 					X-Large success
-					<gov-icon slot="right-icon" name="info"></gov-icon>	
+					<gov-icon slot="right-icon" name="info"></gov-icon>
 				</gov-button>
 				<br>
 				<gov-button variant="success" type="outlined" href="http://localhost:3333/button" loading="false">
@@ -4234,22 +4248,22 @@ class ButtonPage extends HTMLElement {
 				<gov-button variant="success" type="base" size="s">
 					<gov-icon slot="left-icon" name="info"></gov-icon>
 					Small success
-					<gov-icon slot="right-icon" name="info"></gov-icon>	
+					<gov-icon slot="right-icon" name="info"></gov-icon>
 				</gov-button>
 				<gov-button variant="success" type="base" disabled>
 					<gov-icon slot="left-icon" name="info"></gov-icon>
 					Normal success
-					<gov-icon slot="right-icon" name="info"></gov-icon>	
+					<gov-icon slot="right-icon" name="info"></gov-icon>
 				</gov-button>
 				<gov-button variant="success" type="base" size="l">
 					<gov-icon slot="left-icon" name="info"></gov-icon>
 					Large success
-					<gov-icon slot="right-icon" name="info"></gov-icon>	
+					<gov-icon slot="right-icon" name="info"></gov-icon>
 				</gov-button>
 				<gov-button variant="success" type="base" disabled size="xl">
 					<gov-icon slot="left-icon" name="info"></gov-icon>
 					X-Large success
-					<gov-icon slot="right-icon" name="info"></gov-icon>	
+					<gov-icon slot="right-icon" name="info"></gov-icon>
 				</gov-button>
 				<br>
 				<gov-button variant="success" type="base" href="http://localhost:3333/button" loading="false">
@@ -4289,22 +4303,22 @@ class ButtonPage extends HTMLElement {
 				<gov-button variant="error" size="s" class="u-mr--medium u-mr-mobile--2xl u-mr-tablet--unset u-mr-portable--medium">
 					<gov-icon slot="left-icon" name="info"></gov-icon>
 					Small error
-					<gov-icon slot="right-icon" name="info"></gov-icon>	
+					<gov-icon slot="right-icon" name="info"></gov-icon>
 				</gov-button>
 				<gov-button variant="error" disabled>
 					<gov-icon slot="left-icon" name="info"></gov-icon>
 					Normal error
-					<gov-icon slot="right-icon" name="info"></gov-icon>	
+					<gov-icon slot="right-icon" name="info"></gov-icon>
 				</gov-button>
 				<gov-button variant="error" size="l">
 					<gov-icon slot="left-icon" name="info"></gov-icon>
 					Large error
-					<gov-icon slot="right-icon" name="info"></gov-icon>	
+					<gov-icon slot="right-icon" name="info"></gov-icon>
 				</gov-button>
 				<gov-button variant="error" size="xl" disabled>
 					<gov-icon slot="left-icon" name="info"></gov-icon>
 					X-Large error
-					<gov-icon slot="right-icon" name="info"></gov-icon>	
+					<gov-icon slot="right-icon" name="info"></gov-icon>
 				</gov-button>
 				<br>
 				<gov-button variant="error" href="http://localhost:3333/button" loading="false">
@@ -4363,22 +4377,22 @@ class ButtonPage extends HTMLElement {
 				<gov-button variant="error" type="outlined" size="s">
 					<gov-icon slot="left-icon" name="info"></gov-icon>
 					Small error
-					<gov-icon slot="right-icon" name="info"></gov-icon>	
+					<gov-icon slot="right-icon" name="info"></gov-icon>
 				</gov-button>
 				<gov-button variant="error" type="outlined" disabled>
 					<gov-icon slot="left-icon" name="info"></gov-icon>
 					Normal error
-					<gov-icon slot="right-icon" name="info"></gov-icon>	
+					<gov-icon slot="right-icon" name="info"></gov-icon>
 				</gov-button>
 				<gov-button variant="error" type="outlined" size="l">
 					<gov-icon slot="left-icon" name="info"></gov-icon>
 					Large error
-					<gov-icon slot="right-icon" name="info"></gov-icon>	
+					<gov-icon slot="right-icon" name="info"></gov-icon>
 				</gov-button>
 				<gov-button variant="error" type="outlined" disabled size="xl">
 					<gov-icon slot="left-icon" name="info"></gov-icon>
 					X-Large error
-					<gov-icon slot="right-icon" name="info"></gov-icon>	
+					<gov-icon slot="right-icon" name="info"></gov-icon>
 				</gov-button>
 				<br>
 				<gov-button variant="error" type="outlined" href="http://localhost:3333/button" loading="false">
@@ -4418,22 +4432,22 @@ class ButtonPage extends HTMLElement {
 				<gov-button variant="error" type="base" size="s">
 					<gov-icon slot="left-icon" name="info"></gov-icon>
 					Small error
-					<gov-icon slot="right-icon" name="info"></gov-icon>	
+					<gov-icon slot="right-icon" name="info"></gov-icon>
 				</gov-button>
 				<gov-button variant="error" type="base" disabled>
 					<gov-icon slot="left-icon" name="info"></gov-icon>
 					Normal error
-					<gov-icon slot="right-icon" name="info"></gov-icon>	
+					<gov-icon slot="right-icon" name="info"></gov-icon>
 				</gov-button>
 				<gov-button variant="error" type="base" size="l">
 					<gov-icon slot="left-icon" name="info"></gov-icon>
 					Large error
-					<gov-icon slot="right-icon" name="info"></gov-icon>	
+					<gov-icon slot="right-icon" name="info"></gov-icon>
 				</gov-button>
 				<gov-button variant="error" type="base" disabled size="xl">
 					<gov-icon slot="left-icon" name="info"></gov-icon>
 					X-Large error
-					<gov-icon slot="right-icon" name="info"></gov-icon>	
+					<gov-icon slot="right-icon" name="info"></gov-icon>
 				</gov-button>
 				<br>
 				<gov-button variant="error" type="base" href="http://localhost:3333/button" loading="false">
@@ -4470,296 +4484,617 @@ class ButtonPage extends HTMLElement {
 		`;
   }
 }
-if (customElements.get("button-page") === undefined) {
-  customElements.define("button-page", ButtonPage);
+if (customElements.get('button-page') === undefined) {
+  customElements.define('button-page', ButtonPage);
 }
 
-class FormsPage extends HTMLElement {
+class BreadcrumbsPage extends HTMLElement {
   connectedCallback() {
-    (() => {
-      setTimeout(() => {
-        const po = document.getElementById("bagr");
-        const ba = document.getElementById("ba");
-        if (ba) {
-          ba.addEventListener('gov-change', function (e) {
-            // @ts-ignore
-            console.log(e.detail);
-          });
-        }
-        if (po) {
-          // @ts-ignore
-          po.setSearchCallback((val) => {
-            function removeDiacritics(string) {
-              if (!string)
-                return string;
-              return string.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
-            }
-            const randomNumber = (min, max) => {
-              return Math.floor(Math.random() * (max - min + 1) + min);
-            };
-            const data = [
-              { name: 'Pepa' },
-              { name: 'Katak' },
-              { name: 'Tomáš' },
-              { name: 'Ludvík' },
-              { name: 'Anežda' },
-              { name: 'Xaviér' },
-              { name: 'Ondřej' },
-              { name: 'Mirek' },
-              { name: 'Zdeněk' },
-              { name: 'Monika' },
-              { name: 'Jirka' },
-              { name: 'Abrahám' },
-              { name: 'Lucie' },
-              { name: 'Emily' },
-              { name: 'Pavel' },
-              { name: 'Gustav' },
-              { name: 'Amálie' },
-            ];
-            return new Promise((resolve) => {
-              setTimeout(() => {
-                resolve(data.filter(({ name }) => {
-                  if (!name)
-                    return false;
-                  return removeDiacritics(name).toLowerCase().indexOf(removeDiacritics(val).toLowerCase()) > -1;
-                }));
-              }, randomNumber(100, 1000));
-            });
-          });
-        }
-      }, 1000);
-    })();
     this.innerHTML = `
-			<h2>Search</h2>
-			<div class="container-view" style="max-width: 500px;">
-				<gov-form-control size="m">
-					<gov-form-group>
-						<gov-form-search name="test-me-c" value="me" checked>
-							<gov-form-input slot="input" id="kapr" name="test-me" placeholder="Co hledáte" type="reset"></gov-form-input>
-							<span slot="button">
-								<gov-icon slot="left-icon" name="search"></gov-icon>
-							</span>
-						</gov-form-search>
-					</gov-form-group>
-				</gov-form-control>
-				<br>
-				<gov-form-control size="l">
-					<gov-form-group>
-						<gov-form-search name="test-me-c" value="me" checked>
-							<gov-form-input slot="input" id="kapr" name="test-me" placeholder="Co hledáte" type="reset"></gov-form-input>
-							<span slot="button">
-								Hledat
-							</span>
-						</gov-form-search>
-					</gov-form-group>
-				</gov-form-control>
-				<br>
-				<gov-form-control size="xl">
-					<gov-form-group>
-						<gov-form-search name="test-me-c" value="me" checked variant="secondary">
-							<gov-form-input slot="input" id="kapr" name="test-me" placeholder="Co hledáte" type="reset"></gov-form-input>
-							<span slot="button">
-								Hledat
-							</span>
-						</gov-form-search>
-					</gov-form-group>
-				</gov-form-control>
-			</div>
-			
-			<h2>File</h2>
-			<div class="container-view">
-			<h3>Normal</h3>
-				<gov-form-control>
-					<gov-form-label size="s" slot="top">Přidat přílohu *</gov-form-label>
-					<gov-form-group>
-						<gov-form-file name="test-me-c" expanded accept="image/*" max-file-size="1024">
-							<p>
-								<gov-button variant="primary" type="outlined" tabindex="-1">
-									Nahrát soubor ze zařízení
-								</gov-button>
-							</p>
-							<p class="gov-text--s">
-								Podporované formáty XML, PDF, DOC
-							</p>
-						</gov-form-file>
-					</gov-form-group>
-				</gov-form-control>
-				<br>
-				
-				<gov-form-control disabled>
-					<gov-form-label size="s" slot="top">Přidat přílohu *</gov-form-label>
-					<gov-form-group>
-						<gov-form-file name="test-me-c">
-							<p aria-hidden="true">
-								<gov-button disabled variant="primary" type="outlined">
-									<gov-icon slot="left-icon" name="upload"></gov-icon>
-									Nahrát soubor ze zařízení
-								</gov-button>
-							</p>
-							<p class="gov-text--s">
-								Podporované formáty XML, PDF, DOC
-							</p>
-						</gov-form-file>
-					</gov-form-group>
-				</gov-form-control>
-				<br>
+		<h2>Breadcrumbs</h2>
 
-				<gov-form-control invalid>
-					<gov-form-label size="s" slot="top">Přidat přílohu *</gov-form-label>
-					<gov-form-group>
-						<gov-form-file name="test-me-c">
-							<p>
-								<gov-button variant="primary" type="outlined">
-									<gov-icon slot="left-icon" name="upload"></gov-icon>
-									Nahrát soubor ze zařízení
-								</gov-button>
-							</p>
-							<p class="gov-text--s">
-								Podporované formáty XML, PDF, DOC
-							</p>
-						</gov-form-file>
-					</gov-form-group>
-					<gov-form-message slot="bottom" variant="error">
-						<gov-icon slot="icon" name="warning"></gov-icon>
-						Required
-					</gov-form-message>
-				</gov-form-control>
-				<br>
+		<gov-breadcrumbs wcag-label="Drobečková navigace pro stránku Czech POINT"></gov-breadcrumbs>
 
-				<h3>Expanded</h3>
-				<gov-form-control>
-					<gov-form-label size="s" slot="top">Přidat přílohu *</gov-form-label>
-					<gov-form-group>
-						<gov-form-file expanded name="test-me-c">
-							<p class="gov-color--secondary-800">
-								Přetáhněte soubor nebo
-							</p>
-							<p>
-								<gov-button variant="primary" type="outlined">
-									Nahrajte ze zařízení
-								</gov-button>
-							</p>
-							<p class="gov-text--s">
-								Podporované formáty XML, PDF, DOC
-							</p>
-						</gov-form-file>
-					</gov-form-group>
-				</gov-form-control>
-				<br>
-				
-				<gov-form-control disabled>
-					<gov-form-label size="s" slot="top">Přidat přílohu *</gov-form-label>
-					<gov-form-group>
-						<gov-form-file expanded name="test-me-c">
-							<p class="gov-color--secondary-800">
-								Přetáhněte soubor nebo
-							</p>
-							<p>
-								<gov-button disabled variant="primary" type="outlined">
-									Nahrát ze zařízení
-								</gov-button>
-							</p>
-							<p class="gov-text--s">
-								Podporované formáty XML, PDF, DOC
-							</p>
-						</gov-form-file>
-					</gov-form-group>
-				</gov-form-control>
-				<br>
+		<h3>Collapsible</h3>
+		<gov-breadcrumbs collapsible="true" wcag-label="Drobečková navigace pro stránku Czech POINT"></gov-breadcrumbs>
+		`;
+  }
+}
+if (customElements.get('breadcrumbs-page') === undefined) {
+  customElements.define('breadcrumbs-page', BreadcrumbsPage);
+}
 
-				<gov-form-control invalid>
-					<gov-form-label size="s" slot="top">Přidat přílohu *</gov-form-label>
-					<gov-form-group>
-						<gov-form-file expanded name="test-me-c">
-							<p class="gov-color--secondary-800">
-								Přetáhněte soubor nebo
-							</p>
-							<p>
-								<gov-button variant="primary" type="outlined">
-									Nahrát ze zařízení
-								</gov-button>
-							</p>
-							<p class="gov-text--s">
-								Podporované formáty XML, PDF, DOC
-							</p>
-						</gov-form-file>
-					</gov-form-group>
-					<gov-form-message slot="bottom" variant="error">
-						<gov-icon slot="icon" name="warning"></gov-icon>
-						Required
-					</gov-form-message>
-				</gov-form-control>
-				<br>
-			</div>
+class CardPage extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
 
-			<h2>Multiselect</h2>
-			<gov-form-control type="input">
-				<gov-form-label slot="top">Multiselect</gov-form-label>
-				<gov-form-group>
-					<gov-form-multi-select id="ba" placeholder="Placeholder" wcag-described-by="me-and-you">
-						<option value>Placeholder</option>
-						<option value="b">Value B</option>
-						<option value="c">Value C</option>
-						<option value="d" selected>Value D</option>
-						<option value="e">Value E</option>
-						<option value="f">Value F</option>
-						<option value="g">Value G</option>
-						<option value="h">Value H</option>
-						<option value="i" selected>Value I</option>
-					</gov-form-multi-select>
-				</gov-form-group>
-				<gov-form-message slot="bottom" variant="error">
-					<gov-icon slot="icon" name="warning"></gov-icon>
-					Required
-				</gov-form-message>
-			</gov-form-control>
-			
-			<h2>Autocomplete</h2>
-			<gov-form-control type="input">
-				<gov-form-label slot="top">Label of autocomplete</gov-form-label>
-				<gov-form-group>
-					<gov-form-autocomplete placeholder="Placeholder autcomplete" id="bagr"></gov-form-autocomplete>
-				</gov-form-group>
-				<gov-form-message slot="bottom" variant="error">
-					<gov-icon slot="icon" name="warning"></gov-icon>
-					Required
-				</gov-form-message>
-			</gov-form-control>
+		<div style="max-width: 650px">
+			<h2>Card</h2>
 
-			<h2>Textarea</h2>
-			<h3>
-				Default
-			</h3>
-			<gov-form-control type="input" id="metro2">
-				<gov-form-label size="s" slot="top">Label of textarea</gov-form-label>
+			<gov-card label="Fusce tellus odio, dapibus id fermentum quis" expanded collapsible class="gov-bg--success-100">
+				<p class="gov-color--secondary-700">
+					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.
+				</p>
+			</gov-card>
+
+			<br>
+
+			<div style="height: 400px">
+				<gov-card label="Fusce tellus odio, dapibus id fermentum quis" expanded collapsible>
+					<p class="gov-color--secondary-700">
+						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.
+					</p>
+					<gov-button variant="primary" size="s" href="http://localhost:3333/button">
+						Button
+					</gov-button>
+					<p slot="footer" class="gov-color--primary-700">
+						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.
+					</p>
+				</gov-card>
+			</div>
+			<br>
+			<gov-card label="Fusce tellus odio, dapibus id fermentum quis">
+				<p class="gov-color--secondary-700">
+					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.
+				</p>
+				<gov-button variant="primary" size="s" href="http://localhost:3333/button">
+					Button
+				</gov-button>
+				<p slot="footer" color="gov-color--primary-700">
+					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.
+				</p>
+			</gov-card>
+			<h3>Image slot</h3>
+			<gov-card expanded>
+				<img slot="img" src="https://picsum.photos/536/354" src="" alt="Obárzek" width="536" height="354">
+				<p class="gov-text--l gov-color--secondary-800">
+					<b>
+						Commodo consequat.
+					</b>
+				</p>
+				<p class="gov-color--secondary-700">
+					Commodo consequat. Nullam rhoncus aliquam metus.
+				</p>
+				<p class="gov-color--secondary-700">
+					<a href="#">Chci vědět více</a>
+				</p>
+			</gov-card>
+			<h3>Shadow variant</h3>
+			<gov-card expanded class="gov-box-shadow--m">
+				<img slot="img" src="https://picsum.photos/536/354" src="" alt="Obárzek" width="536" height="354">
+				<p class="gov-text--l gov-color--secondary-800">
+					<b>
+						Commodo consequat.
+					</b>
+				</p>
+				<p class="gov-color--secondary-700">
+					Commodo consequat. Nullam rhoncus aliquam metus.
+				</p>
+				<gov-button variant="primary" size="s" href="http://localhost:3333/button">
+					Jak založit
+				</gov-button>
+				<gov-button variant="primary" type="outlined" size="s" href="http://localhost:3333/button">
+					Zjistit více
+				</gov-button>
+			</gov-card>
+			<h3>With icon</h3>
+			<gov-card>
+				<gov-icon name="car" type="complex"></gov-icon>
+				<p class="gov-color--secondary-700">
+					Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras elementum. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Fusce tellus.
+				</p>
+				<gov-button variant="primary" type="outlined" size="s" href="http://localhost:3333/button">
+					Learn more
+				</gov-button>
+			</gov-card>
+			<h3>Horizontal orientation</h3>
+			<gov-card promotion>
+				<gov-icon slot="icon" name="car" type="complex"></gov-icon>
+				<p class="gov-color--secondary-700">
+					Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras elementum. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Fusce tellus.
+				</p>
+				<gov-button slot="btn" variant="primary" type="outlined" size="s" href="http://localhost:3333/button">
+					Learn more
+				</gov-button>
+			</gov-card>
+		</div>
+
+		`;
+  }
+}
+if (customElements.get('card-page') === undefined) {
+  customElements.define('card-page', CardPage);
+}
+
+class Cookiebar extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+			<gov-cookiebar>
+				<h2 class="h4">Můžeme si u vás uložit cookies?</h2>
+
+				<p>
+					Co že to znamená? Cookies jsou malé datové soubory, které slouží např. k tomu, aby si web pamatoval vaše nastavení a to, co vás zajímá, nebo abychom jej zlepšovali . Pro ukládání různých typů cookies od vás potřebujeme souhlas. Web bude fungovat i bez souhlasu, s ním ale o něco lépe.
+				</p>
+
+				<gov-button variant="primary" slot="actions-primary">
+					Souhlasím se všemi
+				</gov-button>
+
+				<gov-button variant="primary" type="outlined" slot="actions-primary">
+					Odmítnout všechny
+				</gov-button>
+
+				<gov-button variant="primary" type="base" slot="actions-secondary">
+					Podrobné nastavení
+				</gov-button>
+			</gov-cookiebar>
+		`;
+  }
+}
+if (customElements.get('cookiebar-page') === undefined) {
+  customElements.define('cookiebar-page', Cookiebar);
+}
+
+class ContainerPage extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+		<h2>Container</h2>
+
+		<gov-container>
+			<p>Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>
+		</gov-container>
+		`;
+  }
+}
+if (customElements.get('container-page') === undefined) {
+  customElements.define('container-page', ContainerPage);
+}
+
+class EmptyPage extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+		<h2>Empty</h2>
+
+		<gov-empty>
+			<gov-icon slot="icon" name="car" type="complex"></gov-icon>
+			<p class="gov-text--2xl">
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.
+			</p>
+			<p class="gov-text--l gov-color--secondary-700">
+				Informace o tom, že je potřeba upřesnit vyhledávání
+			</p>
+			<gov-spacer size="l"></gov-spacer>
+			<gov-button variant="primary">
+				Přejít na jinou stránku
+			</gov-button>
+		</gov-empty>
+		<gov-empty align="right">
+			<gov-icon slot="icon" name="car" type="complex"></gov-icon>
+			<p class="gov-text--2xl">
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.
+			</p>
+			<p class="gov-text--l gov-color--secondary-700">
+				Informace o tom, že je potřeba upřesnit vyhledávání
+			</p>
+		</gov-empty>
+		<gov-empty align="center">
+			<gov-icon slot="icon" name="car" type="complex"></gov-icon>
+			<p class="gov-text--2xl">
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.
+			</p>
+			<p class="gov-text--l gov-color--secondary-700">
+				Informace o tom, že je potřeba upřesnit vyhledávání
+			</p>
+		</gov-empty>
+		`;
+  }
+}
+if (customElements.get('empty-page') === undefined) {
+  customElements.define('empty-page', EmptyPage);
+}
+
+class ErrorPage extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+		<h2>Error</h2>
+		<gov-error-code>
+			<gov-icon slot="icon" name="400" type="complex"></gov-icon>
+			<h2 class="gov-text--6xl">Page Not Found</h2>
+			<p class="gov-text--l">Sorry, the page you are looking for does not exist.</p>
+		</gov-error-code>
+		`;
+  }
+}
+if (customElements.get('error-page') === undefined) {
+  customElements.define('error-page', ErrorPage);
+}
+
+const removeDiacritics = (string) => {
+  if (!string)
+    return string;
+  return string.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
+};
+const randomNumber = (min, max) => {
+  return Math.floor(Math.random() * (max - min + 1) + min);
+};
+const data = () => [
+  { name: 'Pepa' },
+  { name: 'Katak' },
+  { name: 'Tomáš' },
+  { name: 'Ludvík' },
+  { name: 'Anežda' },
+  { name: 'Xaviér' },
+  { name: 'Ondřej' },
+  { name: 'Mirek' },
+  { name: 'Zdeněk' },
+  { name: 'Monika' },
+  { name: 'Jirka' },
+  { name: 'Abrahám' },
+  { name: 'Lucie' },
+  { name: 'Emily' },
+  { name: 'Pavel' },
+  { name: 'Gustav' },
+  { name: 'Amálie' },
+];
+class FormsPage extends HTMLElement {
+  connectedCallback() {
+    (() => {
+      setTimeout(() => {
+        const po = document.getElementById('bagr');
+        const ba = document.getElementById('ba');
+        if (ba) {
+          ba.addEventListener('gov-change', function (e) {
+            console.log(e);
+          });
+        }
+        if (po) {
+          po.setSearchCallback(val => {
+            return new Promise(resolve => {
+              setTimeout(() => {
+                resolve(data().filter(({ name }) => {
+                  if (!name)
+                    return false;
+                  return removeDiacritics(name).toLowerCase().indexOf(removeDiacritics(val).toLowerCase()) > -1;
+                }));
+              }, randomNumber(100, 1000));
+            });
+          });
+        }
+      }, 1000);
+    })();
+    this.innerHTML = `
+			<h2>
+				Samostatné použití
+			</h2>
+			<gov-form-input placeholder="Co hledáte">
+				<gov-icon slot="right-icon" name="info"></gov-icon>
+			</gov-form-input>
+			<br>
+			<gov-form-select size="l" name="test-me">
+				<option value="" selected>Placeholder</option>
+				<option value="b">Value B</option>
+				<option value="c">Value C</option>
+				<option value="d">Value D</option>
+			</gov-form-select>
+			<br>
+			<gov-form-multi-select size="xl" id="ba" placeholder="Placeholder" wcag-described-by="me-and-you">
+				<option value>Placeholder</option>
+				<option value="b">Value B</option>
+				<option value="c">Value C</option>
+				<option value="d" selected>Value D</option>
+				<option value="e">Value E</option>
+				<option value="f">Value F</option>
+				<option value="g">Value G</option>
+				<option value="h">Value H</option>
+				<option value="i" selected>Value I</option>
+			</gov-form-multi-select>
+			<br>
+			<gov-form-checkbox name="test-me-c" value="me" checked>
+				<gov-form-label slot="label">Souhlasím</gov-form-label>
+			</gov-form-checkbox>
+			<br>
+			<gov-form-radio name="test1" value="me1">
+				<gov-form-label slot="label">Souhlasím</gov-form-label>
+			</gov-form-radio>
+			<br>
+			// TODO: Nepropisuje se ID inputu do labelu
+			<gov-form-switch name="test-me" value="me2" checked>
+				<gov-form-label slot="label">Souhlasím</gov-form-label>
+			</gov-form-switch>
+
+
+			<h2>
+				Date & Time input (nativní)
+			</h2>
+			<gov-form-input size="m" placeholder="Co hledáte" input-type="datetime-local"></gov-form-input>
+			<br>
+			<gov-form-input size="l" placeholder="Co hledáte" input-type="date"></gov-form-input>
+			<br>
+			<gov-form-input size="xl" placeholder="Co hledáte" input-type="time"></gov-form-input>
+
+			<h2>Search</h2>
+			<gov-form-control size="m">
 				<gov-form-group>
-					<gov-form-input multiline rows="3" name="test-me" placeholder="Placeholder"></gov-form-input>
+					<gov-form-search name="test-me-c" value="me" checked>
+						<gov-form-input slot="input" id="kapr" name="test-me" placeholder="Co hledáte" type="reset"></gov-form-input>
+						<gov-button slot="button" variant="primary" size="s">
+							<gov-icon slot="left-icon" name="search"></gov-icon>
+						</gov-button>
+					</gov-form-search>
 				</gov-form-group>
 			</gov-form-control>
-			<h3>
-				Invalid
-			</h3>
-			<gov-form-control invalid="TRUE" type="input" id="metro2">
-				<gov-form-label size="s" slot="top">Label of textarea</gov-form-label>
+			<br>
+			<gov-form-control size="l">
 				<gov-form-group>
-					<gov-form-input multiline rows="3" name="test-me" value="Value of textarea"></gov-form-input>
+					<gov-form-search name="test-me-c" value="me" checked>
+						<gov-form-input slot="input" id="kapr" name="test-me" placeholder="Co hledáte" type="reset"></gov-form-input>
+						<gov-button slot="button" variant="primary" size="m">
+							Hledat
+						</gov-button>
+					</gov-form-search>
 				</gov-form-group>
-				<gov-form-message slot="bottom" variant="error">
-					<gov-icon slot="icon" name="warning"></gov-icon>
-					Required
-				</gov-form-message>
 			</gov-form-control>
-			<h3>
-				Disabled
-			</h3>
-			<gov-form-control disabled type="input" id="metro2">
-				<gov-form-label size="s" slot="top">Label of textarea</gov-form-label>
+			<br>
+			<gov-form-control size="xl">
 				<gov-form-group>
-					<gov-form-input multiline rows="3" name="test-me" value="Value of textarea"></gov-form-input>
+					<gov-form-search name="test-me-c" value="me" checked variant="secondary">
+						<gov-form-input slot="input" id="kapr" name="test-me" placeholder="Co hledáte" type="reset"></gov-form-input>
+						<gov-button slot="button" variant="secondary" size="l">
+							Hledat
+						</gov-button>
+					</gov-form-search>
+				</gov-form-group>
+			</gov-form-control>
+
+			<h2>File</h2>
+			<div class="container-view">
+			<h3>Normal</h3>
+				<gov-form-control>
+					<gov-form-label size="s" slot="top">Přidat přílohu *</gov-form-label>
+					<gov-form-group>
+						<gov-form-file name="test-me-c" expanded accept="image/*" max-file-size="1024">
+							<p>
+								<gov-button variant="primary" type="outlined" tabindex="-1">
+									Nahrát soubor ze zařízení
+								</gov-button>
+							</p>
+							<p class="gov-text--s">
+								Podporované formáty XML, PDF, DOC
+							</p>
+						</gov-form-file>
+					</gov-form-group>
+				</gov-form-control>
+				<br>
+
+				<gov-form-control disabled>
+					<gov-form-label size="s" slot="top">Přidat přílohu *</gov-form-label>
+					<gov-form-group>
+						<gov-form-file name="test-me-c">
+							<p aria-hidden="true">
+								<gov-button disabled variant="primary" type="outlined">
+									<gov-icon slot="left-icon" name="upload"></gov-icon>
+									Nahrát soubor ze zařízení
+								</gov-button>
+							</p>
+							<p class="gov-text--s">
+								Podporované formáty XML, PDF, DOC
+							</p>
+						</gov-form-file>
+					</gov-form-group>
+				</gov-form-control>
+				<br>
+
+				<gov-form-control invalid>
+					<gov-form-label size="s" slot="top">Přidat přílohu *</gov-form-label>
+					<gov-form-group>
+						<gov-form-file name="test-me-c">
+							<p>
+								<gov-button variant="primary" type="outlined">
+									<gov-icon slot="left-icon" name="upload"></gov-icon>
+									Nahrát soubor ze zařízení
+								</gov-button>
+							</p>
+							<p class="gov-text--s">
+								Podporované formáty XML, PDF, DOC
+							</p>
+						</gov-form-file>
+					</gov-form-group>
+					<gov-form-message slot="bottom" variant="error">
+						<gov-icon slot="icon" name="warning"></gov-icon>
+						Required
+					</gov-form-message>
+				</gov-form-control>
+				<br>
+
+				<h3>Expanded</h3>
+				<gov-form-control>
+					<gov-form-label size="s" slot="top">Přidat přílohu *</gov-form-label>
+					<gov-form-group>
+						<gov-form-file expanded name="test-me-c">
+							<p class="gov-color--secondary-800">
+								Přetáhněte soubor nebo
+							</p>
+							<p>
+								<gov-button variant="primary" type="outlined">
+									Nahrajte ze zařízení
+								</gov-button>
+							</p>
+							<p class="gov-text--s">
+								Podporované formáty XML, PDF, DOC
+							</p>
+						</gov-form-file>
+					</gov-form-group>
+				</gov-form-control>
+				<br>
+
+				<gov-form-control disabled>
+					<gov-form-label size="s" slot="top">Přidat přílohu *</gov-form-label>
+					<gov-form-group>
+						<gov-form-file expanded name="test-me-c">
+							<p class="gov-color--secondary-800">
+								Přetáhněte soubor nebo
+							</p>
+							<p>
+								<gov-button disabled variant="primary" type="outlined">
+									Nahrát ze zařízení
+								</gov-button>
+							</p>
+							<p class="gov-text--s">
+								Podporované formáty XML, PDF, DOC
+							</p>
+						</gov-form-file>
+					</gov-form-group>
+				</gov-form-control>
+				<br>
+
+				<gov-form-control invalid>
+					<gov-form-label size="s" slot="top">Přidat přílohu *</gov-form-label>
+					<gov-form-group>
+						<gov-form-file expanded name="test-me-c">
+							<p class="gov-color--secondary-800">
+								Přetáhněte soubor nebo
+							</p>
+							<p>
+								<gov-button variant="primary" type="outlined">
+									Nahrát ze zařízení
+								</gov-button>
+							</p>
+							<p class="gov-text--s">
+								Podporované formáty XML, PDF, DOC
+							</p>
+						</gov-form-file>
+					</gov-form-group>
+					<gov-form-message slot="bottom" variant="error">
+						<gov-icon slot="icon" name="warning"></gov-icon>
+						Required
+					</gov-form-message>
+				</gov-form-control>
+				<br>
+			</div>
+
+			<h2>Multiselect</h2>
+			<gov-form-control>
+				<gov-form-label slot="top">Multiselect</gov-form-label>
+				<gov-form-group>
+					<gov-form-multi-select id="ba" placeholder="Placeholder" wcag-described-by="me-and-you">
+						<option value>Placeholder</option>
+						<option value="b">Value B</option>
+						<option value="c">Value C</option>
+						<option value="d" selected>Value D</option>
+						<option value="e">Value E</option>
+						<option value="f">Value F</option>
+						<option value="g">Value G</option>
+						<option value="h">Value H</option>
+						<option value="i" selected>Value I</option>
+					</gov-form-multi-select>
+				</gov-form-group>
+				<gov-form-message slot="bottom" variant="error">
+					<gov-icon slot="icon" name="warning"></gov-icon>
+					Required
+				</gov-form-message>
+			</gov-form-control>
+
+			<h2>Autocomplete</h2>
+			<gov-form-control>
+				<gov-form-label slot="top">Label of autocomplete</gov-form-label>
+				<gov-form-group>
+					<gov-form-autocomplete placeholder="Placeholder autcomplete" id="bagr"></gov-form-autocomplete>
+				</gov-form-group>
+				<gov-form-message slot="bottom" variant="error">
+					<gov-icon slot="icon" name="warning"></gov-icon>
+					Required
+				</gov-form-message>
+			</gov-form-control>
+
+			<h2>Textarea</h2>
+			<h3>
+				Default
+			</h3>
+			<gov-form-control type="input" id="metro2">
+				<gov-form-label size="s" slot="top">Label of textarea</gov-form-label>
+				<gov-form-group>
+					<gov-form-input multiline rows="3" name="test-me" placeholder="Placeholder"></gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+			<h3>
+				Invalid
+			</h3>
+			<gov-form-control invalid="TRUE" type="input" id="metro2">
+				<gov-form-label size="s" slot="top">Label of textarea</gov-form-label>
+				<gov-form-group>
+					<gov-form-input multiline rows="3" name="test-me" value="Value of textarea"></gov-form-input>
+				</gov-form-group>
+				<gov-form-message slot="bottom" variant="error">
+					<gov-icon slot="icon" name="warning"></gov-icon>
+					Required
+				</gov-form-message>
+			</gov-form-control>
+			<h3>
+				Disabled
+			</h3>
+			<gov-form-control disabled type="input" id="metro2">
+				<gov-form-label size="s" slot="top">Label of textarea</gov-form-label>
+				<gov-form-group>
+					<gov-form-input multiline rows="3" name="test-me" value="Value of textarea"></gov-form-input>
 				</gov-form-group>
 			</gov-form-control>
 
 			<h2>Checkbox</h2>
+			<h3>
+				Gaps
+			</h3>
+
+			<gov-form-control size="xs">
+				<gov-form-group gap="2xs">
+					<gov-form-checkbox name="test-me-c" value="me" checked></gov-form-checkbox>
+					<gov-form-checkbox name="test-me-c" value="me" checked></gov-form-checkbox>
+				</gov-form-group>
+			</gov-form-control>
+			<br>
+			<gov-form-control size="xs">
+				<gov-form-group gap="2xs">
+					<gov-form-checkbox name="test-me-c" value="me" checked>
+						<gov-form-label slot="label">Option 1</gov-form-label>
+					</gov-form-checkbox>
+					<gov-form-checkbox name="test-me-c" value="me" checked>
+						<gov-form-label slot="label">Option 2</gov-form-label>
+					</gov-form-checkbox>
+				</gov-form-group>
+			</gov-form-control>
+			<br>
+			<gov-form-control size="s">
+				<gov-form-group gap="xs">
+					<gov-form-checkbox name="test-me-c" value="me" checked>
+						<gov-form-label slot="label">Option 1</gov-form-label>
+					</gov-form-checkbox>
+					<gov-form-checkbox name="test-me-c" value="me" checked>
+						<gov-form-label slot="label">Option 2</gov-form-label>
+					</gov-form-checkbox>
+				</gov-form-group>
+			</gov-form-control>
+			<br>
+			<gov-form-control size="m">
+				<gov-form-group gap="s">
+					<gov-form-checkbox name="test-me-c" value="me" checked>
+						<gov-form-label slot="label">Option 1</gov-form-label>
+					</gov-form-checkbox>
+					<gov-form-checkbox name="test-me-c" value="me" checked>
+						<gov-form-label slot="label">Option 2</gov-form-label>
+					</gov-form-checkbox>
+				</gov-form-group>
+			</gov-form-control>
+			<br>
+			<gov-form-control size="l">
+				<gov-form-group gap="m">
+					<gov-form-checkbox name="test-me-c" value="me" checked>
+						<gov-form-label slot="label">Option 1</gov-form-label>
+					</gov-form-checkbox>
+					<gov-form-checkbox name="test-me-c" value="me" checked>
+						<gov-form-label slot="label">Option 2</gov-form-label>
+					</gov-form-checkbox>
+				</gov-form-group>
+			</gov-form-control>
+
 			<h3>
 				Default
 			</h3>
@@ -4872,9 +5207,10 @@ class FormsPage extends HTMLElement {
 
 			<h2>Radio</h2>
 			<h3>
-				Default
+				Default group
 			</h3>
-			<gov-form-control size="xs">
+			<gov-form-control size="xs" fieldset>
+				<gov-form-label legend size="s" slot="top">Seznam skupiny</gov-form-label>
 				<gov-form-group>
 					<gov-form-radio name="test1" value="me" >
 						<gov-form-label slot="label">Value 1</gov-form-label>
@@ -5279,7 +5615,6 @@ class FormsPage extends HTMLElement {
 				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
 				<gov-form-group>
 					<gov-form-input id="kapr" name="test-me" placeholder="Placeholder">
-						<gov-icon slot="right-icon" name="info"></gov-icon>
 					</gov-form-input>
 				</gov-form-group>
 			</gov-form-control>
@@ -5308,7 +5643,7 @@ class FormsPage extends HTMLElement {
 					<gov-form-input id="kapr" name="test-me" placeholder="Placeholder"></gov-form-input>
 				</gov-form-group>
 			</gov-form-control>
-			<gov-form-control success="True" size="" type="input" id="metro2">
+			<gov-form-control success="True" size="l" type="input" id="metro2">
 				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
 				<gov-form-group>
 					<gov-form-input id="kapr" name="test-me" value="Value of input">
@@ -5414,6 +5749,7 @@ class FormsPage extends HTMLElement {
 					</gov-form-switch>
 				</gov-form-group>
 			</gov-form-control>
+			
 			<gov-form-control size="l">
 				<gov-form-group>
 					<gov-form-switch name="test-me" value="me" checked>
@@ -5440,434 +5776,150 @@ class FormsPage extends HTMLElement {
 				<gov-form-group>
 					<gov-form-switch name="test-me" value="me" checked>
 						<gov-form-label slot="label">Souhlasím</gov-form-label>
-					</gov-form-switch>
-				</gov-form-group>
-				<gov-form-message slot="bottom" variant="error">
-					<gov-icon slot="icon" name="warning"></gov-icon>
-					Required
-				</gov-form-message>
-			</gov-form-control>
-			<gov-form-control size="m">
-				<gov-form-group>
-					<gov-form-switch name="test-me" value="me" checked>
-						<gov-form-label slot="label">Souhlasím</gov-form-label>
-					</gov-form-switch>
-				</gov-form-group>
-				<gov-form-message slot="bottom" variant="error">
-					<gov-icon slot="icon" name="warning"></gov-icon>
-					Required
-				</gov-form-message>
-			</gov-form-control>
-			<gov-form-control size="l">
-				<gov-form-group>
-					<gov-form-switch name="test-me" value="me" checked>
-						<gov-form-label slot="label">Souhlasím</gov-form-label>
-					</gov-form-switch>
-				</gov-form-group>
-				<gov-form-message slot="bottom" variant="error">
-					<gov-icon slot="icon" name="warning"></gov-icon>
-					Required
-				</gov-form-message>
-			</gov-form-control>
-			<h3>
-				With label
-			</h3>
-			<gov-form-control size="xs">
-				<gov-form-label size="s" slot="top">Label of toggle</gov-form-label>
-				<gov-form-group>
-					<gov-form-switch name="test-me" value="me" checked>
-						<gov-form-label slot="label">Souhlasím</gov-form-label>
-					</gov-form-switch>
-				</gov-form-group>
-			</gov-form-control>
-			<gov-form-control size="s">
-				<gov-form-label size="s" slot="top">Label of toggle</gov-form-label>
-				<gov-form-group>
-					<gov-form-switch name="test-me" value="me" checked>
-						<gov-form-label slot="label">Souhlasím</gov-form-label>
-					</gov-form-switch>
-				</gov-form-group>
-			</gov-form-control>
-			<gov-form-control size="m">
-				<gov-form-label size="m" slot="top">Label of toggle</gov-form-label>
-				<gov-form-group>
-					<gov-form-switch name="test-me" value="me" checked>
-						<gov-form-label slot="label">Souhlasím</gov-form-label>
-					</gov-form-switch>
-				</gov-form-group>
-			</gov-form-control>
-			<gov-form-control size="l">
-				<gov-form-label size="m" slot="top">Label of toggle</gov-form-label>
-				<gov-form-group>
-					<gov-form-switch name="test-me" value="me" checked>
-						<gov-form-label slot="label">Souhlasím</gov-form-label>
-					</gov-form-switch>
-				</gov-form-group>
-			</gov-form-control>
-			<h3>
-				Disabled
-			</h3>
-			<gov-form-control type="switch" size="xs" disabled>
-				<gov-form-group>
-					<gov-form-switch name="test-me" value="me">
-						<gov-form-label slot="label">Souhlasím</gov-form-label>
-					</gov-form-switch>
-				</gov-form-group>
-			</gov-form-control>
-			<gov-form-control type="switch" size="s" disabled="true">
-				<gov-form-group>
-					<gov-form-switch name="test-me" value="me">
-						<gov-form-label slot="label">Souhlasím</gov-form-label>
-					</gov-form-switch>
-				</gov-form-group>
-			</gov-form-control>
-			<gov-form-control type="switch" size="m" disabled="true">
-				<gov-form-group>
-					<gov-form-switch name="test-me" value="me" checked>
-						<gov-form-label slot="label">Souhlasím</gov-form-label>
-					</gov-form-switch>
-				</gov-form-group>
-			</gov-form-control>
-			<gov-form-control type="switch" size="l" disabled="true">
-				<gov-form-group>
-					<gov-form-switch name="test-me" value="me" checked>
-						<gov-form-label slot="label">Souhlasím</gov-form-label>
-					</gov-form-switch>
-				</gov-form-group>
-			</gov-form-control>
-			<h3>
-				Invalid
-			</h3>
-			<gov-form-control size="xs" invalid="True">
-				<gov-form-group>
-					<gov-form-switch invalid name="test-me" value="me" checked>
-						<gov-form-label slot="label">Souhlasím</gov-form-label>
-					</gov-form-switch>
-				</gov-form-group>
-			</gov-form-control>
-			<gov-form-control size="s" invalid="TRUE">
-				<gov-form-group>
-					<gov-form-switch invalid name="test-me" value="me" checked>
-						<gov-form-label slot="label">Souhlasím</gov-form-label>
-					</gov-form-switch>
-				</gov-form-group>
-			</gov-form-control>
-			<gov-form-control size="m" invalid="true">
-				<gov-form-group>
-					<gov-form-switch invalid name="test-me" value="me" checked>
-						<gov-form-label slot="label">Souhlasím</gov-form-label>
-					</gov-form-switch>
-				</gov-form-group>
-			</gov-form-control>
-			<gov-form-control size="l" invalid="1">
-				<gov-form-group>
-					<gov-form-switch invalid name="test-me" value="me" checked>
-						<gov-form-label slot="label">Souhlasím</gov-form-label>
-					</gov-form-switch>
-				</gov-form-group>
-			</gov-form-control>
-		`;
-  }
-}
-if (customElements.get("forms-page") === undefined) {
-  customElements.define("forms-page", FormsPage);
-}
-
-class FormsRestructurePage extends HTMLElement {
-  connectedCallback() {
-    this.innerHTML = `
-			<h4>Forms</h4>
-			<div class="container-view container-view--inline">
-			</div>
-		`;
-  }
-}
-if (customElements.get("forms-restructue-page") === undefined) {
-  customElements.define("forms-restructue-page", FormsRestructurePage);
-}
-
-class CardPage extends HTMLElement {
-  connectedCallback() {
-    this.innerHTML = `
-
-		<div style="max-width: 650px">
-			<h2>Card</h2>
-
-			<gov-card label="Fusce tellus odio, dapibus id fermentum quis" expanded collapsible class="gov-bg--success-100">
-				<p class="gov-color--secondary-700">
-					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.
-				</p>
-			</gov-card>
-			
-			<br>
-
-			<div style="height: 400px">
-				<gov-card label="Fusce tellus odio, dapibus id fermentum quis" expanded collapsible>
-					<p class="gov-color--secondary-700">
-						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.
-					</p>
-					<gov-button variant="primary" size="s" href="http://localhost:3333/button">
-						Button
-					</gov-button> 
-					<p slot="footer" class="gov-color--primary-700">
-						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.
-					</p>
-				</gov-card>
-			</div>
-			<br>
-			<gov-card label="Fusce tellus odio, dapibus id fermentum quis">
-				<p class="gov-color--secondary-700">
-					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.
-				</p>
-				<gov-button variant="primary" size="s" href="http://localhost:3333/button">
-					Button
-				</gov-button>
-				<p slot="footer" color="gov-color--primary-700">
-					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.
-				</p>
-			</gov-card>
-			<h3>Image slot</h3>
-			<gov-card expanded>
-				<img slot="img" src="https://picsum.photos/536/354" src="" alt="Obárzek" width="536" height="354">
-				<p class="gov-text--l gov-color--secondary-800">
-					<b>
-						Commodo consequat.
-					</b>
-				</p>
-				<p class="gov-color--secondary-700">
-					Commodo consequat. Nullam rhoncus aliquam metus.
-				</p>
-				<p class="gov-color--secondary-700">
-					<a href="#">Chci vědět více</a>
-				</p>
-			</gov-card>
-			<h3>Shadow variant</h3>
-			<gov-card expanded class="gov-box-shadow--m">
-				<img slot="img" src="https://picsum.photos/536/354" src="" alt="Obárzek" width="536" height="354">
-				<p class="gov-text--l gov-color--secondary-800">
-					<b>
-						Commodo consequat.
-					</b>
-				</p>
-				<p class="gov-color--secondary-700">
-					Commodo consequat. Nullam rhoncus aliquam metus.
-				</p>
-				<gov-button variant="primary" size="s" href="http://localhost:3333/button">
-					Jak založit
-				</gov-button>
-				<gov-button variant="primary" type="outlined" size="s" href="http://localhost:3333/button">
-					Zjistit více
-				</gov-button>
-			</gov-card>
-			<h3>With icon</h3>
-			<gov-card>
-				<gov-icon name="car" type="complex"></gov-icon>
-				<p class="gov-color--secondary-700">
-					Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras elementum. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Fusce tellus. 
-				</p>
-				<gov-button variant="primary" type="outlined" size="s" href="http://localhost:3333/button">
-					Learn more
-				</gov-button>
-			</gov-card>
-			<h3>Horizontal orientation</h3>
-			<gov-card promotion>
-				<gov-icon slot="icon" name="car" type="complex"></gov-icon>
-				<p class="gov-color--secondary-700">
-					Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras elementum. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Fusce tellus. 
-				</p>
-				<gov-button slot="btn" variant="primary" type="outlined" size="s" href="http://localhost:3333/button">
-					Learn more
-				</gov-button>
-			</gov-card>
-		</div>
-
-		`;
-  }
-}
-if (customElements.get("card-page") === undefined) {
-  customElements.define("card-page", CardPage);
-}
-
-class Cookiebar extends HTMLElement {
-  connectedCallback() {
-    this.innerHTML = `
-			<gov-cookiebar>
-				<h2 class="h4">Můžeme si u vás uložit cookies?</h2>
-
-				<p>
-					Co že to znamená? Cookies jsou malé datové soubory, které slouží např. k tomu, aby si web pamatoval vaše nastavení a to, co vás zajímá, nebo abychom jej zlepšovali . Pro ukládání různých typů cookies od vás potřebujeme souhlas. Web bude fungovat i bez souhlasu, s ním ale o něco lépe.
-				</p>
-
-				<gov-button variant="primary" slot="actions-primary">
-					Souhlasím se všemi
-				</gov-button>
-
-				<gov-button variant="primary" type="outlined" slot="actions-primary">
-					Odmítnout všechny
-				</gov-button>
-
-				<gov-button variant="primary" type="base" slot="actions-secondary">
-					Podrobné nastavení
-				</gov-button>
-			</gov-cookiebar>
-		`;
-  }
-}
-if (customElements.get('cookiebar-page') === undefined) {
-  customElements.define('cookiebar-page', Cookiebar);
-}
-
-class MessagePage extends HTMLElement {
-  connectedCallback() {
-    this.innerHTML = `
-		<h2>
-			Content Message
-		</h2>
-		<gov-message variant="error">
-			<gov-icon name="info" slot="icon"></gov-icon>
-			<p>
-				Font awesome. Default - 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-message>
-		<br>
-		<gov-message variant="primary">
-			<gov-icon name="info" slot="icon"></gov-icon>
-			<p>
-				Font awesome. Default - 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-message>
-		<br>
-		<gov-message variant="success">
-			<gov-icon name="info" slot="icon"></gov-icon>
-			<p>
-				Font awesome. Default - 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-message>
-		<br>
-		<gov-message variant="warning">
-			<gov-icon name="info" slot="icon"></gov-icon>
-			<p>
-				Font awesome. Default - 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-message>
-		<br>
-		<gov-message variant="secondary">
-			<gov-icon name="info" slot="icon"></gov-icon>
-			<p>
-				Font awesome. Default - 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-message>
-		<br>
-		
-		<div class="gov-bg--secondary-300" style="padding: 48px">
-			<h3>Inverse</h3>
-			<gov-message inverse variant="error">
-				<gov-icon name="info" slot="icon"></gov-icon>
-				<p>
-					Font awesome. Default - 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-message>
-			<br>
-			<gov-message inverse variant="primary">
-				<gov-icon name="info" slot="icon"></gov-icon>
-				<p>
-					Font awesome. Default - 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-message>
-			<br>
-			<gov-message inverse variant="success">
-				<gov-icon name="info" slot="icon"></gov-icon>
-				<p>
-					Font awesome. Default - 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-message>
-			<br>
-			<gov-message inverse variant="warning">
-				<gov-icon name="info" slot="icon"></gov-icon>
-				<p>
-					Font awesome. Default - 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-message>
-			<br>
-			<gov-message inverse variant="secondary">
-				<gov-icon name="info" slot="icon"></gov-icon>
-				<p>
-					Font awesome. Default - 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-message>
-		</div>
-		
-		<h3>Shadow</h3>
-		<gov-message variant="secondary" shadow>
-			<gov-icon name="info" slot="icon"></gov-icon>
-			<p>
-				Font awesome. Default - 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-message>
-			`;
-  }
-}
-if (customElements.get("message-page") === undefined) {
-  customElements.define("message-page", MessagePage);
-}
-
-class EmptyPage extends HTMLElement {
-  connectedCallback() {
-    this.innerHTML = `
-		<h2>Empty</h2>
-
-		<gov-empty>
-			<gov-icon slot="icon" name="car" type="complex"></gov-icon>
-			<p class="gov-text--2xl">
-				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.
-			</p>
-			<p class="gov-text--l gov-color--secondary-700">
-				Informace o tom, že je potřeba upřesnit vyhledávání
-			</p>
-			<gov-spacer size="l"></gov-spacer>
-			<gov-button variant="primary">
-				Přejít na jinou stránku
-			</gov-button>
-		</gov-empty>
-		<gov-empty align="right">
-			<gov-icon slot="icon" name="car" type="complex"></gov-icon>
-			<p class="gov-text--2xl">
-				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.
-			</p>
-			<p class="gov-text--l gov-color--secondary-700">
-				Informace o tom, že je potřeba upřesnit vyhledávání
-			</p>
-		</gov-empty>
-		<gov-empty align="center">
-			<gov-icon slot="icon" name="car" type="complex"></gov-icon>
-			<p class="gov-text--2xl">
-				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.
-			</p>
-			<p class="gov-text--l gov-color--secondary-700">
-				Informace o tom, že je potřeba upřesnit vyhledávání
-			</p>
-		</gov-empty>
+					</gov-form-switch>
+				</gov-form-group>
+				<gov-form-message slot="bottom" variant="error">
+					<gov-icon slot="icon" name="warning"></gov-icon>
+					Required
+				</gov-form-message>
+			</gov-form-control>
+			<gov-form-control size="m">
+				<gov-form-group>
+					<gov-form-switch name="test-me" value="me" checked>
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-switch>
+				</gov-form-group>
+				<gov-form-message slot="bottom" variant="error">
+					<gov-icon slot="icon" name="warning"></gov-icon>
+					Required
+				</gov-form-message>
+			</gov-form-control>
+			<gov-form-control size="l">
+				<gov-form-group>
+					<gov-form-switch name="test-me" value="me" checked>
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-switch>
+				</gov-form-group>
+				<gov-form-message slot="bottom" variant="error">
+					<gov-icon slot="icon" name="warning"></gov-icon>
+					Required
+				</gov-form-message>
+			</gov-form-control>
+			<h3>
+				With label
+			</h3>
+			<gov-form-control size="xs">
+				<gov-form-label size="s" slot="top">Label of toggle</gov-form-label>
+				<gov-form-group>
+					<gov-form-switch name="test-me" value="me" checked>
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-switch>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control size="s">
+				<gov-form-label size="s" slot="top">Label of toggle</gov-form-label>
+				<gov-form-group>
+					<gov-form-switch name="test-me" value="me" checked>
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-switch>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control size="m">
+				<gov-form-label size="m" slot="top">Label of toggle</gov-form-label>
+				<gov-form-group>
+					<gov-form-switch name="test-me" value="me" checked>
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-switch>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control size="l">
+				<gov-form-label size="m" slot="top">Label of toggle</gov-form-label>
+				<gov-form-group>
+					<gov-form-switch name="test-me" value="me" checked>
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-switch>
+				</gov-form-group>
+			</gov-form-control>
+			<h3>
+				Disabled
+			</h3>
+			<gov-form-control type="switch" size="xs" disabled>
+				<gov-form-group>
+					<gov-form-switch name="test-me" value="me">
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-switch>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control type="switch" size="s" disabled="true">
+				<gov-form-group>
+					<gov-form-switch name="test-me" value="me">
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-switch>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control type="switch" size="m" disabled="true">
+				<gov-form-group>
+					<gov-form-switch name="test-me" value="me" checked>
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-switch>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control type="switch" size="l" disabled="true">
+				<gov-form-group>
+					<gov-form-switch name="test-me" value="me" checked>
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-switch>
+				</gov-form-group>
+			</gov-form-control>
+			<h3>
+				Invalid
+			</h3>
+			<gov-form-control size="xs" invalid="True">
+				<gov-form-group>
+					<gov-form-switch invalid name="test-me" value="me" checked>
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-switch>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control size="s" invalid="TRUE">
+				<gov-form-group>
+					<gov-form-switch invalid name="test-me" value="me" checked>
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-switch>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control size="m" invalid="true">
+				<gov-form-group>
+					<gov-form-switch invalid name="test-me" value="me" checked>
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-switch>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control size="l" invalid="1">
+				<gov-form-group>
+					<gov-form-switch invalid name="test-me" value="me" checked>
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-switch>
+				</gov-form-group>
+			</gov-form-control>
 		`;
   }
 }
-if (customElements.get("empty-page") === undefined) {
-  customElements.define("empty-page", EmptyPage);
+if (customElements.get('forms-page') === undefined) {
+  customElements.define('forms-page', FormsPage);
 }
 
-class ErrorPage extends HTMLElement {
+class FormsRestructurePage extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
-		<h2>Error</h2>
-		<gov-error-code>
-			<gov-icon slot="icon" name="400" type="complex"></gov-icon>
-			<h2 class="gov-text--6xl">Page Not Found</h2>
-			<p class="gov-text--l">Sorry, the page you are looking for does not exist.</p>
-		</gov-error-code>
+			<h4>Forms</h4>
+			<div class="container-view container-view--inline">
+			</div>
 		`;
   }
 }
-if (customElements.get("error-page") === undefined) {
-  customElements.define("error-page", ErrorPage);
+if (customElements.get('forms-restructue-page') === undefined) {
+  customElements.define('forms-restructue-page', FormsRestructurePage);
 }
 
 class FormLabelPage extends HTMLElement {
@@ -5961,8 +6013,261 @@ class FormMessagePage extends HTMLElement {
 	`;
   }
 }
-if (customElements.get('form-message-page') === undefined) {
-  customElements.define('form-message-page', FormMessagePage);
+if (customElements.get('form-message-page') === undefined) {
+  customElements.define('form-message-page', FormMessagePage);
+}
+
+class GridPage extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+		<h2>
+			Grid
+		</h2>
+		<style>
+			.gov-grid-item span {
+				display: block;
+				background: lightgray;
+				padding: 10px;
+			}
+		</style>
+		<gov-grid>
+			<gov-grid-item size="1/12"><span>1/12</span></gov-grid-item>
+			<gov-grid-item size="11/12"><span>11/12</span></gov-grid-item>
+		</gov-grid>
+		<br>
+		<gov-grid>
+			<gov-grid-item size="2/12"><span>2/12</span></gov-grid-item>
+			<gov-grid-item size="10/12"><span>10/12</span></gov-grid-item>
+		</gov-grid>
+		<br>
+		<gov-grid>
+			<gov-grid-item size="3/12"><span>3/12</span></gov-grid-item>
+			<gov-grid-item size="9/12"><span>9/12</span></gov-grid-item>
+		</gov-grid>
+		<br>
+		<gov-grid>
+			<gov-grid-item size="4/12"><span>4/12</span></gov-grid-item>
+			<gov-grid-item size="8/12"><span>8/12</span></gov-grid-item>
+		</gov-grid>
+		<br>
+		<gov-grid>
+			<gov-grid-item size="5/12"><span>5/12</span></gov-grid-item>
+			<gov-grid-item size="7/12"><span>7/12</span></gov-grid-item>
+		</gov-grid>
+		<br>
+		<gov-grid>
+			<gov-grid-item size="6/12"><span>6/12</span></gov-grid-item>
+			<gov-grid-item size="6/12"><span>6/12</span></gov-grid-item>
+		</gov-grid>
+
+		<h2>Responsive grid</h2>
+		<gov-grid>
+			<gov-grid-item size-sm="6/12" size-md="4/12" size-lg="3/12" size-xl="2/12"><span>Cell 1</span></gov-grid-item>
+			<gov-grid-item size-sm="6/12" size-md="4/12" size-lg="3/12" size-xl="2/12"><span>Cell 2</span></gov-grid-item>
+			<gov-grid-item size-sm="6/12" size-md="4/12" size-lg="3/12" size-xl="2/12"><span>Cell 3</span></gov-grid-item>
+			<gov-grid-item size-sm="6/12" size-md="4/12" size-lg="3/12" size-xl="2/12"><span>Cell 4</span></gov-grid-item>
+			<gov-grid-item size-sm="6/12" size-md="4/12" size-lg="3/12" size-xl="2/12"><span>Cell 5</span></gov-grid-item>
+			<gov-grid-item size-sm="6/12" size-md="4/12" size-lg="3/12" size-xl="2/12"><span>Cell 6</span></gov-grid-item>
+		</gov-grid>
+
+		<h2>Horizontal (X) align</h2>
+		<gov-grid>
+			<gov-grid-item size="4/12"><span>Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet. Nulla quis nibh a diam ultricies volutpat. Pellentesque fringilla id diam in placerat. Pellentesque consectetur, nisl tincidunt scelerisque vulputate, diam velit cursus neque, eu posuere urna metus id justo. Ut et tempor risus. In volutpat nec diam semper iaculis. Nam tempus varius nunc, eu congue mauris ornare nec. Sed sodales et nisl vitae volutpat. Duis luctus metus ut justo vestibulum, id suscipit lacus suscipit. Vestibulum at nisi at turpis volutpat fermentum non id erat. Morbi mauris eros, porttitor non tellus sed, iaculis ultrices tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.</span></gov-grid-item>
+			<gov-grid-item size="4/12"><span>Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet. Nulla quis nibh a diam ultricies volutpat. Pellentesque fringilla id diam in placerat. Pellentesque consectetur, nisl tincidunt scelerisque vulputate, diam velit cursus neque, eu posuere urna metus id justo. </span></gov-grid-item>
+			<gov-grid-item size="4/12"><span>Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet. Nulla quis nibh a diam ultricies volutpat. Pellentesque fringilla id diam in placerat. Pellentesque consectetur, nisl tincidunt scelerisque vulputate, diam velit cursus neque, eu posuere urna metus id justo. Ut et tempor risus. In volutpat nec diam semper iaculis. Nam tempus varius nunc, eu congue mauris ornare nec. Sed sodales et nisl vitae volutpat. Duis luctus metus ut justo vestibulum, id suscipit lacus suscipit. Vestibulum at nisi at turpis volutpat fermentum non id erat.</span></gov-grid-item>
+		</gov-grid>
+		<br>
+		<gov-grid align-x="middle">
+			<gov-grid-item size="4/12"><span>Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet. Nulla quis nibh a diam ultricies volutpat. Pellentesque fringilla id diam in placerat. Pellentesque consectetur, nisl tincidunt scelerisque vulputate, diam velit cursus neque, eu posuere urna metus id justo. Ut et tempor risus. In volutpat nec diam semper iaculis. Nam tempus varius nunc, eu congue mauris ornare nec. Sed sodales et nisl vitae volutpat. Duis luctus metus ut justo vestibulum, id suscipit lacus suscipit. Vestibulum at nisi at turpis volutpat fermentum non id erat. Morbi mauris eros, porttitor non tellus sed, iaculis ultrices tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.</span></gov-grid-item>
+			<gov-grid-item size="4/12"><span>Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet. Nulla quis nibh a diam ultricies volutpat. Pellentesque fringilla id diam in placerat. Pellentesque consectetur, nisl tincidunt scelerisque vulputate, diam velit cursus neque, eu posuere urna metus id justo. </span></gov-grid-item>
+			<gov-grid-item size="4/12"><span>Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet. Nulla quis nibh a diam ultricies volutpat. Pellentesque fringilla id diam in placerat. Pellentesque consectetur, nisl tincidunt scelerisque vulputate, diam velit cursus neque, eu posuere urna metus id justo. Ut et tempor risus. In volutpat nec diam semper iaculis. Nam tempus varius nunc, eu congue mauris ornare nec. Sed sodales et nisl vitae volutpat. Duis luctus metus ut justo vestibulum, id suscipit lacus suscipit. Vestibulum at nisi at turpis volutpat fermentum non id erat.</span></gov-grid-item>
+		</gov-grid>
+		<br>
+		<gov-grid align-x="bottom">
+			<gov-grid-item size="4/12"><span>Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet. Nulla quis nibh a diam ultricies volutpat. Pellentesque fringilla id diam in placerat. Pellentesque consectetur, nisl tincidunt scelerisque vulputate, diam velit cursus neque, eu posuere urna metus id justo. Ut et tempor risus. In volutpat nec diam semper iaculis. Nam tempus varius nunc, eu congue mauris ornare nec. Sed sodales et nisl vitae volutpat. Duis luctus metus ut justo vestibulum, id suscipit lacus suscipit. Vestibulum at nisi at turpis volutpat fermentum non id erat. Morbi mauris eros, porttitor non tellus sed, iaculis ultrices tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.</span></gov-grid-item>
+			<gov-grid-item size="4/12"><span>Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet. Nulla quis nibh a diam ultricies volutpat. Pellentesque fringilla id diam in placerat. Pellentesque consectetur, nisl tincidunt scelerisque vulputate, diam velit cursus neque, eu posuere urna metus id justo. </span></gov-grid-item>
+			<gov-grid-item size="4/12"><span>Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet. Nulla quis nibh a diam ultricies volutpat. Pellentesque fringilla id diam in placerat. Pellentesque consectetur, nisl tincidunt scelerisque vulputate, diam velit cursus neque, eu posuere urna metus id justo. Ut et tempor risus. In volutpat nec diam semper iaculis. Nam tempus varius nunc, eu congue mauris ornare nec. Sed sodales et nisl vitae volutpat. Duis luctus metus ut justo vestibulum, id suscipit lacus suscipit. Vestibulum at nisi at turpis volutpat fermentum non id erat.</span></gov-grid-item>
+		</gov-grid>
+		<br>
+
+		<h2>Vertical (Y) align</h2>
+		<gov-grid>
+			<gov-grid-item size="4/12"><span>Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet. Nulla quis nibh a diam ultricies volutpat. Pellentesque fringilla id diam in placerat. Pellentesque consectetur, nisl tincidunt scelerisque vulputate, diam velit cursus neque, eu posuere urna metus id justo. </span></gov-grid-item>
+		</gov-grid>
+		<br>
+		<gov-grid align-y="center">
+			<gov-grid-item size="4/12"><span>Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet. Nulla quis nibh a diam ultricies volutpat. Pellentesque fringilla id diam in placerat. Pellentesque consectetur, nisl tincidunt scelerisque vulputate, diam velit cursus neque, eu posuere urna metus id justo. </span></gov-grid-item>
+		</gov-grid>
+		<br>
+		<gov-grid align-y="right">
+			<gov-grid-item size="4/12"><span>Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet. Nulla quis nibh a diam ultricies volutpat. Pellentesque fringilla id diam in placerat. Pellentesque consectetur, nisl tincidunt scelerisque vulputate, diam velit cursus neque, eu posuere urna metus id justo. </span></gov-grid-item>
+		</gov-grid>
+			`;
+  }
+}
+if (customElements.get('grid-page') === undefined) {
+  customElements.define('grid-page', GridPage);
+}
+
+class LayoutPage extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+		<h2>Layout</h2>
+
+		<gov-container>
+			<gov-layout>
+				<gov-layout-content>
+					<p><b>Content</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>
+				</gov-layout-content>
+				<gov-layout-aside position="right">
+					<p><b>Aside</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla malesuada ut urna sit amet egestas. Ut hendrerit tellus non purus porta, sit amet convallis lacus pellentesque. Sed ultricies metus in tempor viverra. Sed vehicula libero ipsum, non fringilla nulla dapibus ac. Etiam a feugiat mauris. Aenean ultrices at nisi nec dapibus. In hac habitasse platea dictumst. Pellentesque sit amet aliquet nibh.</p>
+				</gov-layout-aside>
+			</gov-layout>
+			<br>
+			<gov-layout>
+				<gov-layout-aside position="left">
+					<p><b>Aside</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla malesuada ut urna sit amet egestas. Ut hendrerit tellus non purus porta, sit amet convallis lacus pellentesque. Sed ultricies metus in tempor viverra. Sed vehicula libero ipsum, non fringilla nulla dapibus ac. Etiam a feugiat mauris. Aenean ultrices at nisi nec dapibus. In hac habitasse platea dictumst. Pellentesque sit amet aliquet nibh.</p>
+				</gov-layout-aside>
+				<gov-layout-content>
+					<p><b>Content</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>
+				</gov-layout-content>
+			</gov-layout>
+			<br>
+			<gov-layout>
+				<gov-layout-aside position="right">
+					<p><b>Aside</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla malesuada ut urna sit amet egestas. Ut hendrerit tellus non purus porta, sit amet convallis lacus pellentesque. Sed ultricies metus in tempor viverra. Sed vehicula libero ipsum, non fringilla nulla dapibus ac. Etiam a feugiat mauris. Aenean ultrices at nisi nec dapibus. In hac habitasse platea dictumst. Pellentesque sit amet aliquet nibh.</p>
+				</gov-layout-aside>
+				<gov-layout-content>
+					<p><b>Content</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>
+				</gov-layout-content>
+			</gov-layout>
+			<br>
+			<gov-layout>
+				<gov-layout-content>
+					<p><b>Content</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>
+				</gov-layout-content>
+			</gov-layout>
+			<br>
+			<gov-layout>
+				<gov-layout-content align="left">
+					<p><b>Content</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>
+				</gov-layout-content>
+			</gov-layout>
+			<br>
+			<gov-layout>
+				<gov-layout-content align="center">
+					<p><b>Content</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>
+				</gov-layout-content>
+			</gov-layout>
+			<br>
+			<gov-layout>
+				<gov-layout-content align="right">
+					<p><b>Content</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>
+				</gov-layout-content>
+			</gov-layout>
+			<br>
+		</gov-container>
+		<br>
+
+		`;
+  }
+}
+if (customElements.get('layout-page') === undefined) {
+  customElements.define('layout-page', LayoutPage);
+}
+
+class MessagePage extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+		<h2>
+			Content Message
+		</h2>
+		<gov-message variant="error">
+			<gov-icon name="info" slot="icon"></gov-icon>
+			<p>
+				Font awesome. Default - 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-message>
+		<br>
+		<gov-message variant="primary">
+			<gov-icon name="info" slot="icon"></gov-icon>
+			<p>
+				Font awesome. Default - 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-message>
+		<br>
+		<gov-message variant="success">
+			<gov-icon name="info" slot="icon"></gov-icon>
+			<p>
+				Font awesome. Default - 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-message>
+		<br>
+		<gov-message variant="warning">
+			<gov-icon name="info" slot="icon"></gov-icon>
+			<p>
+				Font awesome. Default - 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-message>
+		<br>
+		<gov-message variant="secondary">
+			<gov-icon name="info" slot="icon"></gov-icon>
+			<p>
+				Font awesome. Default - 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-message>
+		<br>
+
+		<div class="gov-bg--secondary-300" style="padding: 48px">
+			<h3>Inverse</h3>
+			<gov-message inverse variant="error">
+				<gov-icon name="info" slot="icon"></gov-icon>
+				<p>
+					Font awesome. Default - 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-message>
+			<br>
+			<gov-message inverse variant="primary">
+				<gov-icon name="info" slot="icon"></gov-icon>
+				<p>
+					Font awesome. Default - 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-message>
+			<br>
+			<gov-message inverse variant="success">
+				<gov-icon name="info" slot="icon"></gov-icon>
+				<p>
+					Font awesome. Default - 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-message>
+			<br>
+			<gov-message inverse variant="warning">
+				<gov-icon name="info" slot="icon"></gov-icon>
+				<p>
+					Font awesome. Default - 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-message>
+			<br>
+			<gov-message inverse variant="secondary">
+				<gov-icon name="info" slot="icon"></gov-icon>
+				<p>
+					Font awesome. Default - 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-message>
+		</div>
+
+		<h3>Shadow</h3>
+		<gov-message variant="secondary" shadow>
+			<gov-icon name="info" slot="icon"></gov-icon>
+			<p>
+				Font awesome. Default - 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-message>
+			`;
+  }
+}
+if (customElements.get('message-page') === undefined) {
+  customElements.define('message-page', MessagePage);
 }
 
 class ModalPage extends HTMLElement {
@@ -5980,7 +6285,7 @@ class ModalPage extends HTMLElement {
 			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
 			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
 			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
-			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>		
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
 			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
 			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
 			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
@@ -6018,8 +6323,274 @@ class ModalPage extends HTMLElement {
 		`;
   }
 }
-if (customElements.get("modal-page") === undefined) {
-  customElements.define("modal-page", ModalPage);
+if (customElements.get('modal-page') === undefined) {
+  customElements.define('modal-page', ModalPage);
+}
+
+class LoadingPage extends HTMLElement {
+  connectedCallback() {
+    setTimeout(function () {
+      document.getElementById('btn').addEventListener('gov-click', function () {
+        document.getElementById('loading').setAttribute('loading', 'true');
+      });
+    }, 500);
+    this.innerHTML = `
+			<h2>Loading</h2>
+			<gov-button variant="primary" id="btn" wcag-label="Zobrazit načítání">Zobrazit načítání</gov-button>
+
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>		
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+
+			<gov-loading id="loading">Načítání</gov-loading>
+		`;
+  }
+}
+if (customElements.get("loading-page") === undefined) {
+  customElements.define("loading-page", LoadingPage);
+}
+
+class NavPage extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+
+			<h4>Nav</h4>
+
+			<gov-nav wcag-label="Hlavní navigace">
+				<gov-nav-item href="#">
+					Úvod
+				</gov-nav-item>
+				<gov-nav-item href="#">
+					Služby veřejná správy
+				</gov-nav-item>
+				<gov-nav-item href="#">
+					Životní události
+				</gov-nav-item>
+				<gov-nav-item href="#">
+					O živote v ČR
+				</gov-nav-item>
+				<gov-nav-item href="#">
+					Časté dotazy
+				</gov-nav-item>
+			</gov-nav>
+		`;
+  }
+}
+if (customElements.get('nav-page') === undefined) {
+  customElements.define('nav-page', NavPage);
+}
+
+class PaginationPage extends HTMLElement {
+  connectedCallback() {
+    setTimeout(() => {
+      const bagr = document.getElementById('bagr');
+      if (bagr) {
+        bagr.addEventListener('gov-page', e => {
+          console.log(e);
+        });
+      }
+    }, 500);
+    this.innerHTML = `
+		<h2>Pagination</h2>
+
+		<gov-pagination id="bagr" total="212" wcag-label="Stránkování pro sekci dokumenty"></gov-pagination>
+		<br>
+		<gov-pagination size="s" total="212" wcag-label="Stránkování pro sekci dokumenty"></gov-pagination>
+		<br>
+		<gov-pagination type="select" total="212"  wcag-label="Stránkování pro sekci dokumenty"></gov-pagination>
+		<br>
+		<gov-pagination type="select" size="s" total="212"  wcag-label="Stránkování pro sekci dokumenty"></gov-pagination>
+
+		`;
+  }
+}
+if (customElements.get('pagination-page') === undefined) {
+  customElements.define('pagination-page', PaginationPage);
+}
+
+class PromptPage extends HTMLElement {
+  connectedCallback() {
+    setTimeout(function () {
+      document.getElementById('btn').addEventListener('gov-click', function () {
+        document.getElementById('modal').setAttribute('open', 'true');
+      });
+    }, 500);
+    this.innerHTML = `
+            <h2>Prompt</h2>
+			<gov-button variant="error" id="btn">Smazat dokument</gov-button>
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+
+			<gov-prompt label="Smazání dokumentu" id="modal" wcag-close-label="Zavřít prompt">
+				<gov-icon class="gov-color--error-400" slot="icon" name="info"></gov-icon>
+				<p class="gov-text--l gov-color--secondary-800">Opravdu chcete tento dokument smazat?</p>
+				<p>Pokud tak učiníte, tak již nebude cesty zpět a souboru bude nenávratně odstraněn ze serveru. Ujistěte se, že máte dostatečnou zálohu.</p>
+                <gov-button slot="actions" size="l" variant="primary" type="base">Zrušit</gov-button>
+                <gov-button slot="actions" size="l" variant="error">Smazat dokument</gov-button>
+			</gov-prompt>
+		`;
+  }
+}
+if (customElements.get('prompt-page') === undefined) {
+  customElements.define('prompt-page', PromptPage);
+}
+
+class SideNavPage extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+		<h2>Side nav</h2>
+
+		<div style="max-width: 300px;">
+			<gov-side-nav>
+				<gov-side-nav-item label="Hlavní skupina" count="true" href="#">
+					<gov-side-nav-item label="Vše o našem projektu">
+						<gov-side-nav-item label="Hodnocení">
+						</gov-side-nav-item>
+						<gov-side-nav-item label="Rozpočtová politika" count="true">
+						</gov-side-nav-item>
+						<gov-side-nav-item label="Partneři">
+						</gov-side-nav-item>
+					</gov-side-nav-item>
+
+					<gov-side-nav-item label="O nás" href="#">
+					</gov-side-nav-item>
+
+					<gov-side-nav-item label="O společnosti" href="#">
+					</gov-side-nav-item>
+
+					<gov-side-nav-item label="Kontakt">
+					</gov-side-nav-item>
+				</gov-side-nav-item>
+
+				<gov-side-nav-item label="Produkty" href="#">
+				</gov-side-nav-item>
+
+				<gov-side-nav-item label="Ocenění">
+				</gov-side-nav-item>
+
+				<gov-side-nav-item label="Naši klienti" href="#">
+				</gov-side-nav-item>
+			</gov-side-nav>
+			<h3>Compact</h3>
+			<gov-side-nav compact="true">
+				<gov-side-nav-item label="Hlavní skupina" count="true" href="#">
+					<gov-side-nav-item label="Vše o našem projektu">
+						<gov-side-nav-item label="Hodnocení">
+						</gov-side-nav-item>
+						<gov-side-nav-item label="Rozpočtová politika" count="true">
+						</gov-side-nav-item>
+						<gov-side-nav-item label="Partneři">
+						</gov-side-nav-item>
+					</gov-side-nav-item>
+
+					<gov-side-nav-item label="O nás" href="#">
+					</gov-side-nav-item>
+
+					<gov-side-nav-item label="O společnosti" href="#">
+					</gov-side-nav-item>
+
+					<gov-side-nav-item label="Kontakt">
+					</gov-side-nav-item>
+				</gov-side-nav-item>
+
+				<gov-side-nav-item label="Produkty" href="#">
+				</gov-side-nav-item>
+
+				<gov-side-nav-item label="Ocenění">
+				</gov-side-nav-item>
+
+				<gov-side-nav-item label="Naši klienti" href="#">
+				</gov-side-nav-item>
+			</gov-side-nav>
+
+			<h3>Inverse</h3>
+			<div class="gov-bg--secondary-300" style="padding: 20px;">
+				<gov-side-nav inverse="true">
+					<gov-side-nav-item label="Hlavní skupina" count="true" href="#">
+						<gov-icon slot="icon" name="info"></gov-icon>
+						<gov-side-nav-item label="Vše o našem projektu">
+							<gov-icon slot="icon" name="info"></gov-icon>
+							<gov-side-nav-item label="Hodnocení">
+							</gov-side-nav-item>
+							<gov-side-nav-item label="Rozpočtová politika" count="true">
+							</gov-side-nav-item>
+							<gov-side-nav-item label="Partneři">
+							</gov-side-nav-item>
+						</gov-side-nav-item>
+
+						<gov-side-nav-item label="O nás" href="#">
+							<gov-icon slot="icon" name="info"></gov-icon>
+						</gov-side-nav-item>
+
+						<gov-side-nav-item label="O společnosti" href="#">
+							<gov-icon slot="icon" name="info"></gov-icon>
+						</gov-side-nav-item>
+
+						<gov-side-nav-item label="Kontakt">
+							<gov-icon slot="icon" name="info"></gov-icon>
+						</gov-side-nav-item>
+					</gov-side-nav-item>
+
+					<gov-side-nav-item label="Produkty" href="#">
+						<gov-icon slot="icon" name="info"></gov-icon>
+					</gov-side-nav-item>
+
+					<gov-side-nav-item label="Ocenění">
+						<gov-icon slot="icon" name="info"></gov-icon>
+					</gov-side-nav-item>
+
+					<gov-side-nav-item label="Naši klienti" href="#">
+						<gov-icon slot="icon" name="info"></gov-icon>
+					</gov-side-nav-item>
+				</gov-side-nav>
+			</div>
+		</div>
+		`;
+  }
+}
+if (customElements.get('side-nav-page') === undefined) {
+  customElements.define('side-nav-page', SideNavPage);
 }
 
 class SpacerPage extends HTMLElement {
@@ -6243,19 +6814,48 @@ if (customElements.get('statsbar-page') === undefined) {
   customElements.define('statsbar-page', StatsbarPage);
 }
 
-class StepperPage extends HTMLElement {
-  connectedCallback() {
-    this.innerHTML = `
-			<h2>Stepper</h2>
+class StepperPage extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+			<h2>Stepper</h2>
+
+			<h3>Velikost M</h3>
+
+			<gov-stepper>
+				<gov-stepper-item trigger-tag="h1" label="Hotový krok" variant="success" annotation="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
+					<gov-icon slot="prefix" name="check"></gov-icon>
+					<div slot="content">
+						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus. Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
+					</div>
+				</gov-stepper-item>
+				<gov-stepper-item label="Chybový krok" variant="error">
+					<gov-icon slot="prefix" name="cross"></gov-icon>
+				</gov-stepper-item>
+				<gov-stepper-item collapsible="true" label="Krok s textem, obrázkem, tlačítkem" variant="primary" annotation="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus">
+					<span slot="prefix">2</span>
+					<div slot="content">
+						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus. Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus. Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
+					</div>
+				</gov-stepper-item>
+				<gov-stepper-item label="Budoucí krok" variant="secondary">
+					<span slot="prefix">3</span>
+				</gov-stepper-item>
+				<gov-stepper-item label="Budoucí krok" variant="warning">
+					<span slot="prefix">4</span>
+				</gov-stepper-item>
+			</gov-stepper>
+
+			<br><br>
+			<h3>Velikost S</h3>
 
-			<gov-stepper>
-				<gov-stepper-item trigger-tag="h1" label="Hotový krok" variant="success">
+			<gov-stepper size="s">
+				<gov-stepper-item trigger-tag="h1" label="Hotový krok" variant="success" annotation="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus">
 					<gov-icon slot="prefix" name="check"></gov-icon>
 				</gov-stepper-item>
 				<gov-stepper-item label="Chybový krok" variant="error">
 					<gov-icon slot="prefix" name="cross"></gov-icon>
 				</gov-stepper-item>
-				<gov-stepper-item collapsible="true" label="Krok s textem, obrázkem, tlačítkem" variant="primary">
+				<gov-stepper-item label="Krok s textem, obrázkem, tlačítkem" variant="primary">
 					<span slot="prefix">2</span>
 					<div slot="content">
 						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
@@ -6270,9 +6870,10 @@ class StepperPage extends HTMLElement {
 			</gov-stepper>
 
 			<br><br>
+			<h3>Velikost XS</h3>
 
-			<gov-stepper size="s">
-				<gov-stepper-item trigger-tag="h1" label="Hotový krok" variant="success">
+			<gov-stepper size="xs">
+				<gov-stepper-item trigger-tag="h1" label="Hotový krok" variant="success" annotation="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus">
 					<gov-icon slot="prefix" name="check"></gov-icon>
 				</gov-stepper-item>
 				<gov-stepper-item label="Chybový krok" variant="error">
@@ -6294,8 +6895,8 @@ class StepperPage extends HTMLElement {
 		`;
   }
 }
-if (customElements.get("stepper-page") === undefined) {
-  customElements.define("stepper-page", StepperPage);
+if (customElements.get('stepper-page') === undefined) {
+  customElements.define('stepper-page', StepperPage);
 }
 
 class TabsPage extends HTMLElement {
@@ -6527,14 +7128,14 @@ class TabsPage extends HTMLElement {
 		`;
   }
 }
-if (customElements.get("tabs-page") === undefined) {
-  customElements.define("tabs-page", TabsPage);
+if (customElements.get('tabs-page') === undefined) {
+  customElements.define('tabs-page', TabsPage);
 }
 
-class TilePage extends HTMLElement {
+class TilesPage extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
-		<h2>Grid & Tile</h2>
+		<h2>Tiles</h2>
 
 		<div class="gov-bg--secondary-300" style="padding: 48px;">
 			<div style="max-width: 600px;">
@@ -6564,7 +7165,7 @@ class TilePage extends HTMLElement {
 			</div>
 			<br>
 
-			<gov-grid columns="4">
+			<gov-tiles columns="4">
 				<gov-tile name="Zdroje energie, těžba, nerosty, drahé kovy" href="#">
 					<gov-icon name="id-card" type="complex" slot="icon"></gov-icon>
 					<p>
@@ -6601,14 +7202,14 @@ class TilePage extends HTMLElement {
 						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-tile>
-			</gov-grid>
-			
+			</gov-tiles>
+
 		</div>
 		`;
   }
 }
-if (customElements.get("tile-page") === undefined) {
-  customElements.define("tile-page", TilePage);
+if (customElements.get('tiles-page') === undefined) {
+  customElements.define('tiles-page', TilesPage);
 }
 
 class TooltipPage extends HTMLElement {
@@ -6763,7 +7364,7 @@ class TypographyPage extends HTMLElement {
 				<a class="gov-text--5xl" href="#copy" target="_blank">paragraph with no more than four lines</a><br>
 				<a class="gov-text--6xl" href="#copy" target="_blank">paragraph with no more than four lines</a><br>
 			</p>
-			
+
 			<ul>
 				<li>This is commonly used for long paragraphs with more than four lines. This is commonly used for long paragraphs with more than four lines. This is commonly used for long paragraphs with more than four lines</li>
 				<li>This is commonly used for long paragraphs with more than four lines. This is commonly used for long paragraphs with more than four lines. This is commonly used for long paragraphs with more than four lines</li>
@@ -6819,8 +7420,8 @@ class TypographyPage extends HTMLElement {
 		`;
   }
 }
-if (customElements.get("typography-page") === undefined) {
-  customElements.define("typography-page", TypographyPage);
+if (customElements.get('typography-page') === undefined) {
+  customElements.define('typography-page', TypographyPage);
 }
 
 class ToastMessagePage extends HTMLElement {
@@ -6866,197 +7467,55 @@ class ToastMessagePage extends HTMLElement {
 			`;
   }
 }
-if (customElements.get("toast-message-page") === undefined) {
-  customElements.define("toast-message-page", ToastMessagePage);
-}
-
-class PaginationPage extends HTMLElement {
-  connectedCallback() {
-    setTimeout(() => {
-      const bagr = document.getElementById('bagr');
-      if (bagr) {
-        bagr.addEventListener('gov-page', (e) => {
-          console.log(e);
-        });
-      }
-    }, 500);
-    this.innerHTML = `
-		<h2>Pagination</h2>
-
-		<gov-pagination id="bagr" total="212" wcag-label="Stránkování pro sekci dokumenty"></gov-pagination>
-		<br><br>
-		<gov-pagination total="212"  wcag-label="Stránkování pro sekci dokumenty" link="http://localhost:3333/pagination?page={PAGE}"></gov-pagination>
-		
-		`;
-  }
-}
-if (customElements.get("pagination-page") === undefined) {
-  customElements.define("pagination-page", PaginationPage);
-}
-
-class PromptPage extends HTMLElement {
-  connectedCallback() {
-    setTimeout(function () {
-      document.getElementById('btn').addEventListener('gov-click', function () {
-        document.getElementById('modal').setAttribute('open', 'true');
-      });
-    }, 500);
-    this.innerHTML = `
-            <h2>Prompt</h2>
-			<gov-button variant="error" id="btn">Smazat dokument</gov-button>
-			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
-			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
-			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
-			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
-			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
-			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>		
-			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
-			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
-			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
-			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
-			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
-			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
-			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
-			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
-			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
-			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
-			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
-			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
-			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
-			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
-			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
-			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
-			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
-
-			<gov-prompt label="Smazání dokumentu" id="modal" wcag-close-label="Zavřít prompt">
-				<gov-icon class="gov-color--error-400" slot="icon" name="info"></gov-icon>
-				<p class="gov-text--l gov-color--secondary-800">Opravdu chcete tento dokument smazat?</p>
-				<p>Pokud tak učiníte, tak již nebude cesty zpět a souboru bude nenávratně odstraněn ze serveru. Ujistěte se, že máte dostatečnou zálohu.</p>
-                <gov-button slot="actions" size="l" variant="primary" type="base">Zrušit</gov-button>
-                <gov-button slot="actions" size="l" variant="error">Smazat dokument</gov-button>
-			</gov-prompt>
-		`;
-  }
-}
-if (customElements.get("prompt-page") === undefined) {
-  customElements.define("prompt-page", PromptPage);
+if (customElements.get('toast-message-page') === undefined) {
+  customElements.define('toast-message-page', ToastMessagePage);
 }
 
-class SideNavPage extends HTMLElement {
+class ToastMessageCountdownPage extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
-		<h2>Side nav</h2>
-		
-		<div style="max-width: 300px;">
-			<gov-side-nav>
-				<gov-side-nav-item label="Hlavní skupina" count="true" href="#">
-					<gov-side-nav-item label="Vše o našem projektu">
-						<gov-side-nav-item label="Hodnocení">
-						</gov-side-nav-item>
-						<gov-side-nav-item label="Rozpočtová politika" count="true">
-						</gov-side-nav-item>
-						<gov-side-nav-item label="Partneři">
-						</gov-side-nav-item>
-					</gov-side-nav-item>
-
-					<gov-side-nav-item label="O nás" href="#">
-					</gov-side-nav-item>
-
-					<gov-side-nav-item label="O společnosti" href="#">
-					</gov-side-nav-item>
-
-					<gov-side-nav-item label="Kontakt">
-					</gov-side-nav-item>
-				</gov-side-nav-item>
-
-				<gov-side-nav-item label="Produkty" href="#">
-				</gov-side-nav-item>
-
-				<gov-side-nav-item label="Ocenění">
-				</gov-side-nav-item>
-
-				<gov-side-nav-item label="Naši klienti" href="#">
-				</gov-side-nav-item>
-			</gov-side-nav>
-			<h3>Compact</h3>
-			<gov-side-nav compact="true">
-				<gov-side-nav-item label="Hlavní skupina" count="true" href="#">
-					<gov-side-nav-item label="Vše o našem projektu">
-						<gov-side-nav-item label="Hodnocení">
-						</gov-side-nav-item>
-						<gov-side-nav-item label="Rozpočtová politika" count="true">
-						</gov-side-nav-item>
-						<gov-side-nav-item label="Partneři">
-						</gov-side-nav-item>
-					</gov-side-nav-item>
-
-					<gov-side-nav-item label="O nás" href="#">
-					</gov-side-nav-item>
-
-					<gov-side-nav-item label="O společnosti" href="#">
-					</gov-side-nav-item>
-
-					<gov-side-nav-item label="Kontakt">
-					</gov-side-nav-item>
-				</gov-side-nav-item>
-
-				<gov-side-nav-item label="Produkty" href="#">
-				</gov-side-nav-item>
-
-				<gov-side-nav-item label="Ocenění">
-				</gov-side-nav-item>
-
-				<gov-side-nav-item label="Naši klienti" href="#">
-				</gov-side-nav-item>
-			</gov-side-nav>
-
-			<h3>Inverse</h3>
-			<div class="gov-bg--secondary-300" style="padding: 20px;">
-				<gov-side-nav inverse="true">
-					<gov-side-nav-item label="Hlavní skupina" count="true" href="#">
-						<gov-icon slot="icon" name="info"></gov-icon>
-						<gov-side-nav-item label="Vše o našem projektu">
-							<gov-icon slot="icon" name="info"></gov-icon>
-							<gov-side-nav-item label="Hodnocení">
-							</gov-side-nav-item>
-							<gov-side-nav-item label="Rozpočtová politika" count="true">
-							</gov-side-nav-item>
-							<gov-side-nav-item label="Partneři">
-							</gov-side-nav-item>
-						</gov-side-nav-item>
-
-						<gov-side-nav-item label="O nás" href="#">
-							<gov-icon slot="icon" name="info"></gov-icon>
-						</gov-side-nav-item>
-
-						<gov-side-nav-item label="O společnosti" href="#">
-							<gov-icon slot="icon" name="info"></gov-icon>
-						</gov-side-nav-item>
-
-						<gov-side-nav-item label="Kontakt">
-							<gov-icon slot="icon" name="info"></gov-icon>
-						</gov-side-nav-item>
-					</gov-side-nav-item>
-
-					<gov-side-nav-item label="Produkty" href="#">
-						<gov-icon slot="icon" name="info"></gov-icon>
-					</gov-side-nav-item>
-
-					<gov-side-nav-item label="Ocenění">
-						<gov-icon slot="icon" name="info"></gov-icon>
-					</gov-side-nav-item>
-
-					<gov-side-nav-item label="Naši klienti" href="#">
-						<gov-icon slot="icon" name="info"></gov-icon>
-					</gov-side-nav-item>
-				</gov-side-nav>
-			</div>
-		</div>
-		`;
+		<h2>
+			Toast Message Countdown
+		</h2>
+		<gov-toast variant="success" type="solid">
+			<gov-icon name="check" slot="icon"></gov-icon>
+			<p>
+				Vaše dokumenty byly úspěšně staženy.
+			</p>
+		</gov-toast>
+		<br>
+		<gov-toast variant="error" type="solid" gravity="bottom" position="left">
+			<gov-icon name="info" slot="icon"></gov-icon>
+			<p>
+				Není možné požadavek zpracovat z důvodu chyby serveru.
+			</p>
+		</gov-toast>
+		<br>
+		<gov-toast variant="warning" type="solid" position="left">
+			<gov-icon name="info" slot="icon"></gov-icon>
+			<p>
+				Žádost se nepodařilo odeslat, zkontrolujte nastavení.
+			</p>
+		</gov-toast>
+		<br>
+		<gov-toast variant="primary" type="solid" position="center">
+			<gov-icon name="info" slot="icon"></gov-icon>
+			<p>
+				Soubory jsou připraveny ke stažení.
+			</p>
+		</gov-toast>
+		<br>
+		<gov-toast variant="secondary" type="solid" gravity="bottom" position="right">
+			<gov-icon name="info" slot="icon"></gov-icon>
+			<p>
+				Vaše aplikace byla aktualizovaná na novou verzi!
+			</p>
+		</gov-toast>
+			`;
   }
 }
-if (customElements.get("side-nav-page") === undefined) {
-  customElements.define("side-nav-page", SideNavPage);
+if (customElements.get('toast-message-countdown-page') === undefined) {
+  customElements.define('toast-message-countdown-page', ToastMessageCountdownPage);
 }
 
 class WizzardPage extends HTMLElement {
@@ -7079,7 +7538,7 @@ class WizzardPage extends HTMLElement {
 						<span slot="prefix">3</span>
 						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
 					</gov-wizzard-item>
-					<gov-wizzard-item label="Zřizované organizace" variant="error" collapsible="false">
+					<gov-wizzard-item label="Zřizované organizace" variant="error" collapsible annotation="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus.">
 						<span slot="prefix">4</span>
 						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
 					</gov-wizzard-item>
@@ -7088,11 +7547,36 @@ class WizzardPage extends HTMLElement {
 						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
 					</gov-wizzard-item>
 				</gov-wizzard>
-	
+
 				<br><br>
-	
+
 				<gov-wizzard size="s">
-					<gov-wizzard-item label-tag="h1" label="Font Awesome Icon" variant="success">
+					<gov-wizzard-item label-tag="h1" label="Font Awesome Icon" variant="success" annotation="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus.">
+						<gov-icon slot="prefix" name="check"></gov-icon>
+						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
+							<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
+					</gov-wizzard-item>
+					<gov-wizzard-item label="Kontaktní osoby" variant="primary">
+						<span slot="prefix">2</span>
+						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
+					</gov-wizzard-item>
+					<gov-wizzard-item label="Působnost v agendách" variant="secondary">
+						<span slot="prefix">3</span>
+						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
+					</gov-wizzard-item>
+					<gov-wizzard-item label="Zřizované organizace" variant="error">
+						<span slot="prefix">4</span>
+						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
+					</gov-wizzard-item>
+					<gov-wizzard-item label="Zřizované organizace" variant="warning">
+						<span slot="prefix">5</span>
+						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
+					</gov-wizzard-item>
+				</gov-wizzard>
+				<br><br>
+	
+				<gov-wizzard size="xs">
+					<gov-wizzard-item label-tag="h1" label="Font Awesome Icon" variant="success" annotation="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus.">
 						<gov-icon slot="prefix" name="check"></gov-icon>
 						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
 							<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
@@ -7118,11 +7602,11 @@ class WizzardPage extends HTMLElement {
 		`;
   }
 }
-if (customElements.get("wizzard-page") === undefined) {
-  customElements.define("wizzard-page", WizzardPage);
+if (customElements.get('wizzard-page') === undefined) {
+  customElements.define('wizzard-page', WizzardPage);
 }
 
-const govAppCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}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}";
+const govAppCss = ".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)}}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}";
 
 const GovApp$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
   constructor() {
@@ -7130,42 +7614,49 @@ const GovApp$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
     this.__registerHost();
   }
   componentWillLoad() {
-    const outlet = document.getElementById("outlet");
-    outlet.innerHTML = "";
+    const outlet = document.getElementById('outlet');
+    outlet.innerHTML = '';
     const router = new Router(outlet);
     router.setRoutes([
-      { path: "/", component: "home-page" },
-      { path: "/alert", component: "alert-page" },
-      { path: "/accordion", component: "accordion-page" },
-      { path: "/badge", component: "badge-page" },
-      { path: "/button", component: "button-page" },
-      { path: "/card", component: "card-page" },
-      { path: "/message", component: "message-page" },
-      { path: "/cookiebar", component: "cookiebar-page" },
-      { path: "/empty", component: "empty-page" },
-      { path: "/error", component: "error-page" },
-      { path: "/forms", component: "forms-page" },
-      { path: "/forms-restructue", component: "forms-restructure-page" },
-      { path: "/modal", component: "modal-page" },
-      { path: "/spacer", component: "spacer-page" },
-      { path: "/statsbar", component: "statsbar-page" },
-      { path: "/tabs", component: "tabs-page" },
-      { path: "/tooltip", component: "tooltip-page" },
-      { path: "/tile", component: "tile-page" },
-      { path: "/typography", component: "typography-page" },
-      { path: "/form-message", component: "form-message-page" },
-      { path: "/form-label", component: "form-label-page" },
-      { path: "/toast-message", component: "toast-message-page" },
-      { path: "/stepper", component: "stepper-page" },
-      { path: "/pagination", component: "pagination-page" },
-      { path: "/prompt", component: "prompt-page" },
-      { path: "/wizzard", component: "wizzard-page" },
-      { path: "/side-nav", component: "side-nav-page" },
-      { path: "/grid", component: "grid-page" },
+      { path: '/', component: 'home-page' },
+      { path: '/alert', component: 'alert-page' },
+      { path: '/accordion', component: 'accordion-page' },
+      { path: '/badge', component: 'badge-page' },
+      { path: '/button', component: 'button-page' },
+      { path: '/breadcrumbs', component: 'breadcrumbs-page' },
+      { path: '/card', component: 'card-page' },
+      { path: '/message', component: 'message-page' },
+      { path: '/cookiebar', component: 'cookiebar-page' },
+      { path: '/container', component: 'container-page' },
+      { path: '/empty', component: 'empty-page' },
+      { path: '/error', component: 'error-page' },
+      { path: '/forms', component: 'forms-page' },
+      { path: '/forms-restructue', component: 'forms-restructure-page' },
+      { path: '/form-message', component: 'form-message-page' },
+      { path: '/form-label', component: 'form-label-page' },
+      { path: '/grid', component: 'grid-page' },
+      { path: "/loading", component: "loading-page" },
+      { path: '/modal', component: 'modal-page' },
+      { path: '/nav', component: 'nav-page' },
+      { path: '/spacer', component: 'spacer-page' },
+      { path: '/statsbar', component: 'statsbar-page' },
+      { path: '/stepper', component: 'stepper-page' },
+      { path: '/tabs', component: 'tabs-page' },
+      { path: '/tooltip', component: 'tooltip-page' },
+      { path: '/tiles', component: 'tiles-page' },
+      { path: '/typography', component: 'typography-page' },
+      { path: '/toast-message', component: 'toast-message-page' },
+      { path: '/toast-message-countdown', component: 'toast-message-countdown-page' },
+      { path: '/pagination', component: 'pagination-page' },
+      { path: '/prompt', component: 'prompt-page' },
+      { path: '/wizzard', component: 'wizzard-page' },
+      { path: '/side-nav', component: 'side-nav-page' },
+      { path: '/grid', component: 'grid-page' },
+      { path: '/layout', component: 'layout-page' },
     ]);
   }
   render() {
-    return [];
+    return h(Host, null);
   }
   static get style() { return govAppCss; }
 }, [0, "gov-app"]);