@gov-design-system-ce/components 0.0.35 → 0.0.37

package/dist/components/gov-app.js

@@ -2891,15 +2891,6 @@ usageStatistics();
 
 Router.NavigationTrigger = {POPSTATE, CLICK};
 
-class HomePage extends HTMLElement {
-  connectedCallback() {
-    this.innerHTML = ``;
-  }
-}
-if (customElements.get('home-page') === undefined) {
-  customElements.define('home-page', HomePage);
-}
-
 class AccordionPage extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
@@ -3733,11 +3724,88 @@ if (customElements.get('badge-page') === undefined) {
   customElements.define('badge-page', BadgePage);
 }
 
+class BreadcrumbsPage extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+		<h2>Breadcrumbs</h2>
+
+		<gov-breadcrumbs wcag-label="Drobečková navigace pro stránku Czech POINT">
+			<ul>
+				<li>
+					<button>
+					Domů
+					</button>
+				</li>
+				<li>
+					<gov-icon  name="chevron-right"></gov-icon>
+					<a href="#">Kam dál</a>
+				</li>
+				<li>
+					<gov-icon  name="chevron-right"></gov-icon>
+					<a href="#">
+					Český eGovernment
+					</a>
+				</li>
+				<li>
+					<gov-icon name="chevron-right"></gov-icon>
+					<strong>Czech POINT</strong>
+				</li>
+			</ul>
+		</gov-breadcrumbs>
+
+		`;
+  }
+}
+if (customElements.get("breadcrumbs-page") === undefined) {
+  customElements.define("breadcrumbs-page", BreadcrumbsPage);
+}
+
 class ButtonPage extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
 			<h1>Buttons</h1>
 			<h4>Buttons - primary (default)</h4>
+			
+			
+			<gov-button-test type="solid" variant="primary" size="s" href="http://localhost:3333/button">
+				Small Primary
+				<gov-icon slot="left-icon" name="info"></gov-icon>
+			</gov-button-test>
+			
+			<gov-form-input size="m" placeholder="Co hledáte" input-type="datetime-local"></gov-form-input>
+			
+			
+			
+			<br/>
+			<br/>
+			<br/>
+			<br/>
+			<br/>
+			<hr/>
+			<br/>
+			<br/>
+			<br/>
+			<br/>
+			
+			<gov-control-group>
+				<gov-button variant="primary" size="s" href="http://localhost:3333/button">
+				Small Primary
+				</gov-button>
+				<gov-button variant="primary" size="s" href="http://localhost:3333/button">
+				Small Primary
+				</gov-button>
+				<gov-form-input multiline rows="3" name="test-me" disabled value="Value of textarea"></gov-form-input>
+				<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>
+				<gov-button variant="primary" size="s" href="http://localhost:3333/button">
+				Small Primary
+				</gov-button>
+			</gov-control-group>
+			
 			<div class="container-view">
 				<gov-button variant="primary" size="s" href="http://localhost:3333/button">
 					<gov-icon slot="left-icon" name="info"></gov-icon>
@@ -5010,42 +5078,6 @@ if (customElements.get('button-page') === undefined) {
   customElements.define('button-page', ButtonPage);
 }
 
-class BreadcrumbsPage extends HTMLElement {
-  connectedCallback() {
-    this.innerHTML = `
-		<h2>Breadcrumbs</h2>
-
-		<gov-breadcrumbs wcag-label="Drobečková navigace pro stránku Czech POINT">
-			<ul>
-				<li>
-					<button>
-					Domů
-					</button>
-				</li>
-				<li>
-					<gov-icon  name="chevron-right"></gov-icon>
-					<a href="#">Kam dál</a>
-				</li>
-				<li>
-					<gov-icon  name="chevron-right"></gov-icon>
-					<a href="#">
-					Český eGovernment
-					</a>
-				</li>
-				<li>
-					<gov-icon name="chevron-right"></gov-icon>
-					<strong>Czech POINT</strong>
-				</li>
-			</ul>
-		</gov-breadcrumbs>
-
-		`;
-  }
-}
-if (customElements.get("breadcrumbs-page") === undefined) {
-  customElements.define("breadcrumbs-page", BreadcrumbsPage);
-}
-
 class CardPage extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
@@ -5148,6 +5180,345 @@ if (customElements.get('card-page') === undefined) {
   customElements.define('card-page', CardPage);
 }
 
+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 ControlGroupPage extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+		<h2>Control Group</h2>
+
+		<gov-control-group bordered>
+			<gov-form-input type="number" id="kapr" name="test-me" placeholder="Placeholder" size="s"></gov-form-input>
+			<gov-button variant="primary" type="outlined" size="s">
+				<gov-icon slot="left-icon" name="chevron-up"></gov-icon>
+			</gov-button>
+			<gov-button variant="primary" type="outlined" size="s">
+				<gov-icon slot="left-icon" name="chevron-down"></gov-icon>
+			</gov-button>
+			<gov-button variant="primary" type="outlined" size="s">
+				<gov-icon slot="left-icon" name="x-lg"></gov-icon>
+			</gov-button>
+		</gov-control-group>
+		<br />
+		<gov-control-group variant="primary" bordered>
+			<gov-form-select name="test-me" size="m">
+				<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>
+			<gov-button variant="primary" type="solid" size="m">
+				<gov-icon slot="left-icon" name="x-lg"></gov-icon>
+			</gov-button>
+		</gov-control-group>
+		<br />
+		<gov-control-group bordered>
+			<gov-button variant="primary" type="outlined" size="l">
+				<gov-icon slot="left-icon" name="gear"></gov-icon>
+			</gov-button>
+			<gov-form-file name="test-me-c" accept="image/*" max-file-size="1024">
+				<gov-button variant="primary" type="outlined" size="l" tabindex="-1">
+					Nahrát soubor ze zařízení
+				</gov-button>
+			</gov-form-file>
+			<gov-button variant="primary" type="outlined" size="l">
+				<gov-icon slot="left-icon" name="x-lg"></gov-icon>
+			</gov-button>
+		</gov-control-group>
+		<br />
+		<gov-control-group variant="primary" bordered>
+		<gov-button variant="primary" type="outlined" size="xl">
+				<gov-icon slot="left-icon" name="chevron-up"></gov-icon>
+			</gov-button>
+			<gov-button variant="primary" type="outlined" size="xl">
+				<gov-icon slot="left-icon" name="chevron-down"></gov-icon>
+			</gov-button>
+			<gov-form-select name="test-me" size="xl">
+				<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>
+			<gov-button variant="primary" type="outlined" size="xl">
+				<gov-icon slot="left-icon" name="x-lg"></gov-icon>
+			</gov-button>
+		</gov-control-group>
+		<br><br>
+
+		<gov-control-group variant="secondary" bordered>
+			<gov-form-input type="number" id="kapr" name="test-me" placeholder="Placeholder" variant="primary" size="s"></gov-form-input>
+			<gov-button variant="primary" type="outlined" size="s">
+				<gov-icon slot="left-icon" name="chevron-up"></gov-icon>
+			</gov-button>
+			<gov-button variant="primary" type="outlined" size="s">
+				<gov-icon slot="left-icon" name="chevron-down"></gov-icon>
+			</gov-button>
+			<gov-button variant="primary" type="outlined" size="s">
+				<gov-icon slot="left-icon" name="x-lg"></gov-icon>
+			</gov-button>
+		</gov-control-group>
+		<br />
+		<gov-control-group variant="secondary">
+			<gov-form-select name="test-me" size="m">
+				<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>
+			<gov-button variant="primary" type="outlined" size="m">
+				<gov-icon slot="left-icon" name="x-lg"></gov-icon>
+			</gov-button>
+		</gov-control-group>
+		<br />
+		<gov-control-group variant="secondary" bordered>
+			<gov-button variant="primary" type="outlined" size="l">
+				<gov-icon slot="left-icon" name="gear"></gov-icon>
+			</gov-button>
+			<gov-form-file name="test-me-c" accept="image/*" max-file-size="1024">
+				<gov-button variant="primary" type="outlined" size="l" tabindex="-1">
+					Nahrát soubor ze zařízení
+				</gov-button>
+			</gov-form-file>
+			<gov-button variant="primary" type="outlined" size="l">
+				<gov-icon slot="left-icon" name="x-lg"></gov-icon>
+			</gov-button>
+		</gov-control-group>
+		<br />
+		<gov-control-group variant="secondary" bordered>
+		<gov-button variant="primary" type="outlined" size="xl">
+				<gov-icon slot="left-icon" name="chevron-up"></gov-icon>
+			</gov-button>
+			<gov-button variant="primary" type="outlined" size="xl">
+				<gov-icon slot="left-icon" name="chevron-down"></gov-icon>
+			</gov-button>
+			<gov-form-select name="test-me" variant="primary" size="xl">
+				<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>
+			<gov-button variant="primary" type="outlined" size="xl">
+				<gov-icon slot="left-icon" name="x-lg"></gov-icon>
+			</gov-button>
+		</gov-control-group>
+		<br><br>
+
+		<gov-control-group variant="secondary" bordered>
+			<gov-form-input type="number" id="kapr" name="test-me" placeholder="Placeholder" variant="secondary" size="s"></gov-form-input>
+			<gov-button variant="secondary" type="outlined" size="s">
+				<gov-icon slot="left-icon" name="chevron-up"></gov-icon>
+			</gov-button>
+			<gov-button variant="secondary" type="outlined" size="s">
+				<gov-icon slot="left-icon" name="chevron-down"></gov-icon>
+			</gov-button>
+			<gov-button variant="secondary" type="outlined" size="s">
+				<gov-icon slot="left-icon" name="x-lg"></gov-icon>
+			</gov-button>
+		</gov-control-group>
+		<br />
+		<gov-control-group variant="secondary">
+			<gov-form-select name="test-me" size="m">
+				<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>
+			<gov-button variant="secondary" type="outlined" size="m">
+				<gov-icon slot="left-icon" name="x-lg"></gov-icon>
+			</gov-button>
+		</gov-control-group>
+		<br />
+		<gov-control-group variant="secondary" bordered>
+			<gov-button variant="secondary" type="outlined" size="l">
+				<gov-icon slot="left-icon" name="gear"></gov-icon>
+			</gov-button>
+			<gov-form-file name="test-me-c" accept="image/*" max-file-size="1024">
+				<gov-button variant="secondary" type="outlined" size="l" tabindex="-1">
+					Nahrát soubor ze zařízení
+				</gov-button>
+			</gov-form-file>
+			<gov-button variant="secondary" type="outlined" size="l">
+				<gov-icon slot="left-icon" name="x-lg"></gov-icon>
+			</gov-button>
+		</gov-control-group>
+		<br />
+		<gov-control-group variant="secondary" bordered>
+		<gov-button variant="secondary" type="outlined" size="xl">
+				<gov-icon slot="left-icon" name="chevron-up"></gov-icon>
+			</gov-button>
+			<gov-button variant="secondary" type="outlined" size="xl">
+				<gov-icon slot="left-icon" name="chevron-down"></gov-icon>
+			</gov-button>
+			<gov-form-select name="test-me" variant="secondary" size="xl">
+				<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>
+			<gov-button variant="secondary" type="outlined" size="xl">
+				<gov-icon slot="left-icon" name="x-lg"></gov-icon>
+			</gov-button>
+		</gov-control-group>
+
+		<h2>Invalid</h2>
+		<gov-form-control type="input" id="metro2">
+			<gov-control-group bordered invalid="true">
+				<gov-form-input type="number" id="kapr" name="test-me" placeholder="Placeholder" size="s"></gov-form-input>
+				<gov-button variant="primary" type="outlined" size="s">
+					<gov-icon slot="left-icon" name="chevron-up"></gov-icon>
+				</gov-button>
+				<gov-button variant="primary" type="outlined" size="s">
+					<gov-icon slot="left-icon" name="chevron-down"></gov-icon>
+				</gov-button>
+				<gov-button variant="primary" type="outlined" size="s">
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
+				</gov-button>
+			</gov-control-group>
+			<gov-form-message slot="bottom" variant="error">
+				<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
+				Required
+			</gov-form-message>
+		</gov-form-control>
+		<br />
+		<gov-form-control type="input" id="metro2">
+			<gov-control-group invalid="true">
+				<gov-form-select name="test-me" size="m">
+					<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>
+				<gov-button variant="primary" type="outlined" size="m">
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
+				</gov-button>
+			</gov-control-group>
+			<gov-form-message slot="bottom" variant="error">
+				<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
+				Required
+			</gov-form-message>
+		</gov-form-control>
+		<br />
+		<gov-form-control type="input" id="metro2">
+			<gov-control-group bordered invalid="true">
+				<gov-button variant="primary" type="outlined" size="l">
+					<gov-icon slot="left-icon" name="gear"></gov-icon>
+				</gov-button>
+				<gov-form-file name="test-me-c" accept="image/*" max-file-size="1024">
+					<gov-button variant="primary" type="outlined" size="l" tabindex="-1">
+						Nahrát soubor ze zařízení
+					</gov-button>
+				</gov-form-file>
+				<gov-button variant="primary" type="outlined" size="l">
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
+				</gov-button>
+			</gov-control-group>
+			<gov-form-message slot="bottom" variant="error">
+				<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
+				Required
+			</gov-form-message>
+		</gov-form-control>
+		<br />
+		<gov-form-control type="input" id="metro2">
+			<gov-control-group bordered invalid="true">
+				<gov-button variant="primary" type="outlined" size="xl">
+					<gov-icon slot="left-icon" name="chevron-up"></gov-icon>
+				</gov-button>
+				<gov-button variant="primary" type="outlined" size="xl">
+					<gov-icon slot="left-icon" name="chevron-down"></gov-icon>
+				</gov-button>
+				<gov-form-select name="test-me" size="xl">
+					<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>
+				<gov-button variant="primary" type="outlined" size="xl">
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
+				</gov-button>
+			</gov-control-group>
+			<gov-form-message slot="bottom" variant="error">
+				<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
+				Required
+			</gov-form-message>
+		</gov-form-control>
+
+		<h2>Disabled</h2>
+		<gov-control-group bordered disabled="true">
+			<gov-form-input type="number" id="kapr" name="test-me" placeholder="Placeholder" size="s"></gov-form-input>
+			<gov-button variant="primary" type="outlined" size="s">
+				<gov-icon slot="left-icon" name="chevron-up"></gov-icon>
+			</gov-button>
+			<gov-button variant="primary" type="outlined" size="s">
+				<gov-icon slot="left-icon" name="chevron-down"></gov-icon>
+			</gov-button>
+			<gov-button variant="primary" type="outlined" size="s">
+				<gov-icon slot="left-icon" name="x-lg"></gov-icon>
+			</gov-button>
+		</gov-control-group>
+		<br />
+		<gov-control-group disabled="true">
+			<gov-form-select name="test-me" size="m">
+				<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>
+			<gov-button variant="primary" type="outlined" size="m">
+				<gov-icon slot="left-icon" name="x-lg"></gov-icon>
+			</gov-button>
+		</gov-control-group>
+		<br />
+		<gov-control-group bordered disabled="true">
+			<gov-button variant="primary" type="outlined" size="l">
+				<gov-icon slot="left-icon" name="gear"></gov-icon>
+			</gov-button>
+			<gov-form-file name="test-me-c" accept="image/*" max-file-size="1024">
+				<gov-button variant="primary" type="outlined" size="l" tabindex="-1">
+					Nahrát soubor ze zařízení
+				</gov-button>
+			</gov-form-file>
+			<gov-button variant="primary" type="outlined" size="l">
+				<gov-icon slot="left-icon" name="x-lg"></gov-icon>
+			</gov-button>
+		</gov-control-group>
+		<br />
+		<gov-control-group bordered disabled="true">
+		<gov-button variant="primary" type="outlined" size="xl">
+				<gov-icon slot="left-icon" name="chevron-up"></gov-icon>
+			</gov-button>
+			<gov-button variant="primary" type="outlined" size="xl">
+				<gov-icon slot="left-icon" name="chevron-down"></gov-icon>
+			</gov-button>
+			<gov-form-select name="test-me" size="xl">
+				<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>
+			<gov-button variant="primary" type="outlined" size="xl">
+				<gov-icon slot="left-icon" name="x-lg"></gov-icon>
+			</gov-button>
+		</gov-control-group>
+		`;
+  }
+}
+if (customElements.get('control-group-page') === undefined) {
+  customElements.define('control-group-page', ControlGroupPage);
+}
+
 class Cookiebar extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
@@ -5177,21 +5548,6 @@ 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 = `
@@ -5251,24 +5607,119 @@ 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' },
+class FormLabelPage extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+			<gov-form-label>
+				Form Label
+			</gov-form-label>
+	`;
+  }
+}
+if (customElements.get('form-label-page') === undefined) {
+  customElements.define('form-label-page', FormLabelPage);
+}
+
+class FormMessagePage extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+			<gov-form-message>
+				<gov-icon slot="icon" name="info"></gov-icon>
+				<p>
+					Default
+				</p>
+			</gov-form-message>
+			<gov-form-message>
+				<p>
+					Default
+				</p>
+			</gov-form-message>
+			<gov-form-message variant="secondary">
+				<gov-icon name="info" slot="icon"></gov-icon>
+				<p>
+					Secondary
+				</p>
+			</gov-form-message>
+			<gov-form-message variant="secondary">
+				<p>
+					Secondary
+				</p>
+			</gov-form-message>
+			<gov-form-message variant="error">
+				<gov-icon slot="icon" name="info"></gov-icon>
+				<p>
+					Error
+				</p>
+			</gov-form-message>
+			<gov-form-message variant="error">
+				<p>
+					Error
+				</p>
+			</gov-form-message>
+			<gov-form-message variant="warning">
+				<gov-icon slot="icon" name="info"></gov-icon>
+				<p>
+					Warning
+				</p>
+			</gov-form-message>
+			<gov-form-message variant="warning">
+				<p>
+					Warning
+				</p>
+			</gov-form-message>
+			<gov-form-message variant="success">
+				<gov-icon slot="icon" name="info"></gov-icon>
+				<p>
+					Success
+				</p>
+			</gov-form-message>
+			<gov-form-message variant="success">
+				<p>
+					Success
+				</p>
+			</gov-form-message>
+			<gov-form-message>
+				<gov-icon slot="icon" name="info"></gov-icon>
+				<p>
+					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae dapibus eros, a dapibus metus. Ut a leo lorem. Sed ut fermentum diam. Sed porttitor ligula est, eget lobortis lacus rutrum et. Nunc sapien arcu, faucibus sit amet justo vel, aliquam gravida magna. Pellentesque et tempor risus. 
+				</p>
+				<p>
+					Aliquam suscipit justo dolor, et pellentesque dui venenatis quis. Vestibulum dignissim libero urna, non ultricies neque consequat ut.
+				</p>
+			</gov-form-message>
+			<gov-form-message>
+				<p>
+					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae dapibus eros, a dapibus metus. Ut a leo lorem. Sed ut fermentum diam. Sed porttitor ligula est, eget lobortis lacus rutrum et. Nunc sapien arcu, faucibus sit amet justo vel, aliquam gravida magna. Pellentesque et tempor risus. 
+				</p>
+				<p>
+					Aliquam suscipit justo dolor, et pellentesque dui venenatis quis. Vestibulum dignissim libero urna, non ultricies neque consequat ut.
+				</p>
+			</gov-form-message>
+	`;
+  }
+}
+if (customElements.get('form-message-page') === undefined) {
+  customElements.define('form-message-page', FormMessagePage);
+}
+
+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' },
@@ -5284,11 +5735,17 @@ class FormsPage extends HTMLElement {
       setTimeout(() => {
         const po = document.getElementById('bagr');
         const ba = document.getElementById('ba');
+        const na = document.getElementById('kaprWWWWWW');
         if (ba) {
           ba.addEventListener('gov-change', function (e) {
             console.log(e);
           });
         }
+        if (na) {
+          na.addEventListener('gov-blur', function (e) {
+            console.log(e);
+          });
+        }
         if (po) {
           po.addEventListener('gov-select', function (e) {
             console.log(e);
@@ -5311,7 +5768,7 @@ class FormsPage extends HTMLElement {
 			<h2>
 				Samostatné použití
 			</h2>
-			<gov-form-input placeholder="Co hledáte">
+			<gov-form-input placeholder="Co hledáte" variant="primary">
 				<gov-icon slot="right-icon" name="info"></gov-icon>
 			</gov-form-input>
 			<br>
@@ -5353,6 +5810,9 @@ class FormsPage extends HTMLElement {
 			</gov-form-switch>
 
 
+			<!-- ----------------------------------------------------------------------------------------------------------------------------- -->
+
+
 			<h2>
 				Date & Time input (nativní)
 			</h2>
@@ -5362,10 +5822,14 @@ class FormsPage extends HTMLElement {
 			<br>
 			<gov-form-input size="xl" placeholder="Co hledáte" input-type="time"></gov-form-input>
 
+
+			<!-- ----------------------------------------------------------------------------------------------------------------------------- -->
+
+
 			<h2>Search</h2>
 			<gov-form-control>
 				<gov-form-group>
-					<gov-form-search name="test-me-c" value="me" checked>
+					<gov-form-search name="test-me-c" value="me" variant="secondary">
 						<gov-form-input slot="input" id="kapr" name="test-me" size="m" placeholder="Co hledáte"></gov-form-input>
 						<gov-button slot="button" variant="primary" size="s">
 							<gov-icon slot="left-icon" name="search"></gov-icon>
@@ -5376,7 +5840,7 @@ class FormsPage extends HTMLElement {
 			<br>
 			<gov-form-control>
 				<gov-form-group>
-					<gov-form-search name="test-me-c" value="me" checked>
+					<gov-form-search name="test-me-c" value="me" variant="primary">
 						<gov-form-input slot="input" id="kapr" name="test-me" size="l" placeholder="Co hledáte"></gov-form-input>
 						<gov-button slot="button" variant="primary" size="m">
 							Hledat
@@ -5396,13 +5860,17 @@ class FormsPage extends HTMLElement {
 				</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">
+						<gov-form-file name="test-me-c" accept="image/*" max-file-size="1024">
 							<p>
 								<gov-button variant="primary" type="outlined" tabindex="-1">
 									Nahrát soubor ze zařízení
@@ -5415,9 +5883,8 @@ class FormsPage extends HTMLElement {
 					</gov-form-group>
 				</gov-form-control>
 				<br>
-
 				<gov-form-control>
-					<gov-form-label size="s" slot="top">Přidat přílohu 22 *</gov-form-label>
+					<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">
@@ -5433,11 +5900,10 @@ class FormsPage extends HTMLElement {
 					</gov-form-group>
 				</gov-form-control>
 				<br>
-
-				<gov-form-control invalid>
+				<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">
+						<gov-form-file name="test-me-c" invalid>
 							<p>
 								<gov-button variant="primary" type="outlined">
 									<gov-icon slot="left-icon" name="upload"></gov-icon>
@@ -5461,7 +5927,7 @@ class FormsPage extends HTMLElement {
 					<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>
 								Přetáhněte soubor nebo
 							</p>
 							<p>
@@ -5476,12 +5942,11 @@ class FormsPage extends HTMLElement {
 					</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">
+						<gov-form-file expanded name="test-me-c" disabled>
+							<p>
 								Přetáhněte soubor nebo
 							</p>
 							<p>
@@ -5496,12 +5961,11 @@ class FormsPage extends HTMLElement {
 					</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">
+						<gov-form-file expanded name="test-me-c" invalid>
+							<p>
 								Přetáhněte soubor nebo
 							</p>
 							<p>
@@ -5522,6 +5986,10 @@ class FormsPage extends HTMLElement {
 				<br>
 			</div>
 
+
+			<!-- ----------------------------------------------------------------------------------------------------------------------------- -->
+
+
 			<h2>Multiselect</h2>
 			<gov-form-control>
 				<gov-form-label slot="top">Multiselect</gov-form-label>
@@ -5544,17 +6012,43 @@ class FormsPage extends HTMLElement {
 				</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-autocomplete placeholder="Placeholder autcomplete" id="bagr">
+						<gov-icon name="search" slot="right-icon" />
+					</gov-form-autocomplete>
+				</gov-form-group>
+			</gov-form-control>
+			<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" invalid="true">
+						<gov-icon name="search" slot="right-icon" />
+					</gov-form-autocomplete>
 				</gov-form-group>
 				<gov-form-message slot="bottom" variant="error">
 					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
 					Required
 				</gov-form-message>
 			</gov-form-control>
+			<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" disabled="true">
+						<gov-icon name="search" slot="right-icon" />
+					</gov-form-autocomplete>
+				</gov-form-group>
+			</gov-form-control>
+
+
+			<!-- ----------------------------------------------------------------------------------------------------------------------------- -->
+
 
 			<h2>Textarea</h2>
 			<h3>
@@ -5566,21 +6060,23 @@ class FormsPage extends HTMLElement {
 					<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-control type="input" id="metro2">
 				<gov-form-label size="s" slot="top">Label of textarea</gov-form-label>
 				<gov-form-group>
-					<gov-form-input required multiline rows="3" name="test-me" value="Value of textarea"></gov-form-input>
+					<gov-form-input required multiline rows="3" name="test-me" value="Value of textarea" invalid="TRUE"></gov-form-input>
 				</gov-form-group>
 				<gov-form-message slot="bottom" variant="error">
 					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
 					Required
 				</gov-form-message>
 			</gov-form-control>
+
 			<h3>
-				Disabled DDD
+				Disabled
 			</h3>
 			<gov-form-control id="metro2">
 				<gov-form-label size="s" slot="top">Label of textarea</gov-form-label>
@@ -5589,58 +6085,61 @@ class FormsPage extends HTMLElement {
 				</gov-form-group>
 			</gov-form-control>
 
+
+			<!-- ----------------------------------------------------------------------------------------------------------------------------- -->
+
+
 			<h2>Checkbox</h2>
 			<h3>
 				Gaps
 			</h3>
-
-			<gov-form-control size="xs">
+			<gov-form-control>
 				<gov-form-label size="xs" slot="top">Label of word</gov-form-label>
 				<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-checkbox name="test-me-c" value="me" size="xs" checked></gov-form-checkbox>
+					<gov-form-checkbox name="test-me-c" value="me" size="xs" checked></gov-form-checkbox>
 				</gov-form-group>
 			</gov-form-control>
 			<br>
-			<gov-form-control size="xs">
+			<gov-form-control>
 				<gov-form-group gap="2xs">
-					<gov-form-checkbox name="test-me-c" value="me" required checked>
+					<gov-form-checkbox name="test-me-c" value="me" size="xs" required 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-checkbox name="test-me-c" value="me" size="xs" 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-control>
 				<gov-form-group gap="xs">
-					<gov-form-checkbox name="test-me-c" value="me" checked>
+					<gov-form-checkbox name="test-me-c" value="me" size="s" 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-checkbox name="test-me-c" value="me" size="s" 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-control>
 				<gov-form-group gap="s">
-					<gov-form-checkbox name="test-me-c" value="me" checked>
+					<gov-form-checkbox name="test-me-c" value="me" size="m" 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-checkbox name="test-me-c" value="me" size="m" 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-control>
 				<gov-form-group gap="m">
-					<gov-form-checkbox name="test-me-c" value="me" checked>
+					<gov-form-checkbox name="test-me-c" value="me" size="l" 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-checkbox name="test-me-c" value="me" size="l" checked>
 						<gov-form-label slot="label">Option 2</gov-form-label>
 					</gov-form-checkbox>
 				</gov-form-group>
@@ -5649,40 +6148,41 @@ class FormsPage extends HTMLElement {
 			<h3>
 				Default
 			</h3>
-			<gov-form-control size="xs">
+			<gov-form-control>
 				<gov-form-group>
-					<gov-form-checkbox name="test-me-c" value="me" checked>
+					<gov-form-checkbox name="test-me-c" value="me" size="xs" checked>
 						<gov-form-label slot="label">Souhlasím</gov-form-label>
 					</gov-form-checkbox>
 				</gov-form-group>
 			</gov-form-control>
-			<gov-form-control size="s">
+			<gov-form-control>
 				<gov-form-group>
-					<gov-form-checkbox name="test-me-c" value="me" checked>
+					<gov-form-checkbox name="test-me-c" value="me" size="s" checked>
 						<gov-form-label slot="label">Souhlasím</gov-form-label>
 					</gov-form-checkbox>
 				</gov-form-group>
 			</gov-form-control>
-			<gov-form-control size="m">
+			<gov-form-control>
 				<gov-form-group>
-					<gov-form-checkbox name="test-me-c" value="me" checked>
+					<gov-form-checkbox name="test-me-c" value="me" size="m" checked>
 						<gov-form-label slot="label">Souhlasím</gov-form-label>
 					</gov-form-checkbox>
 				</gov-form-group>
 			</gov-form-control>
-			<gov-form-control size="l">
+			<gov-form-control>
 				<gov-form-group>
-					<gov-form-checkbox name="test-me-c" value="me" checked>
+					<gov-form-checkbox name="test-me-c" value="me" size="l" checked>
 						<gov-form-label slot="label">Souhlasím</gov-form-label>
 					</gov-form-checkbox>
 				</gov-form-group>
 			</gov-form-control>
+
 			<h3>
 				Invalid
 			</h3>
-			<gov-form-control invalid="true" size="xs">
+			<gov-form-control>
 				<gov-form-group>
-					<gov-form-checkbox name="test-me-c" value="me" checked>
+					<gov-form-checkbox name="test-me-c" value="me" size="xs" checked invalid="true">
 						<gov-form-label slot="label">Souhlasím</gov-form-label>
 					</gov-form-checkbox>
 				</gov-form-group>
@@ -5691,9 +6191,9 @@ class FormsPage extends HTMLElement {
 					Required
 				</gov-form-message>
 			</gov-form-control>
-			<gov-form-control invalid="true" size="s">
+			<gov-form-control>
 				<gov-form-group>
-					<gov-form-checkbox name="test-me-c" value="me" checked>
+					<gov-form-checkbox name="test-me-c" value="me" size="s" checked invalid="true">
 						<gov-form-label slot="label">Souhlasím</gov-form-label>
 					</gov-form-checkbox>
 				</gov-form-group>
@@ -5702,9 +6202,9 @@ class FormsPage extends HTMLElement {
 					Required
 				</gov-form-message>
 			</gov-form-control>
-			<gov-form-control invalid="true" size="m">
+			<gov-form-control>
 				<gov-form-group>
-					<gov-form-checkbox name="test-me-c" value="me" checked>
+					<gov-form-checkbox name="test-me-c" value="me" size="m" checked invalid="true">
 						<gov-form-label slot="label">Souhlasím</gov-form-label>
 					</gov-form-checkbox>
 				</gov-form-group>
@@ -5713,96 +6213,101 @@ class FormsPage extends HTMLElement {
 					Required
 				</gov-form-message>
 			</gov-form-control>
-			
+
 			<h3>
 				Disabled
 			</h3>
-			<gov-form-control disabled size="xs">
+			<gov-form-control>
 				<gov-form-group>
-					<gov-form-checkbox name="test-me-c" value="me">
+					<gov-form-checkbox name="test-me-c" value="me" size="xs" disabled>
 						<gov-form-label slot="label">Souhlasím</gov-form-label>
 					</gov-form-checkbox>
 				</gov-form-group>
 			</gov-form-control>
-			<gov-form-control disabled="True" size="s">
+			<gov-form-control>
 				<gov-form-group>
-					<gov-form-checkbox name="test-me-c" value="me">
+					<gov-form-checkbox name="test-me-c" value="me" size="s" disabled="True">
 						<gov-form-label slot="label">Souhlasím</gov-form-label>
 					</gov-form-checkbox>
 				</gov-form-group>
 			</gov-form-control>
-			<gov-form-control disabled="TRUE" size="m">
+			<gov-form-control>
 				<gov-form-group>
-					<gov-form-checkbox name="test-me-c" value="me" checked>
+					<gov-form-checkbox name="test-me-c" value="me" size="m" checked disabled="TRUE">
 						<gov-form-label slot="label">Souhlasím</gov-form-label>
 					</gov-form-checkbox>
 				</gov-form-group>
 			</gov-form-control>
-			<gov-form-control disabled="1" size="l">
+			<gov-form-control>
 				<gov-form-group>
-					<gov-form-checkbox name="test-me-c" value="me" checked>
+					<gov-form-checkbox name="test-me-c" value="me" size="l" checked disabled="1">
 						<gov-form-label slot="label">Souhlasím</gov-form-label>
 					</gov-form-checkbox>
 				</gov-form-group>
 			</gov-form-control>
 
+
+			<!-- ----------------------------------------------------------------------------------------------------------------------------- -->
+
+
 			<h2>Radio</h2>
 			<h3>
 				Default group
 			</h3>
-			<gov-form-control size="xs" fieldset>
+			<gov-form-control 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-radio name="test1" value="me" size="xs">
 						<gov-form-label slot="label">Value 1</gov-form-label>
 					</gov-form-radio>
-					<gov-form-radio name="test1" value="me2" checked>
+					<gov-form-radio name="test1" value="me2" size="xs" checked>
 						<gov-form-label slot="label">Value 2</gov-form-label>
 					</gov-form-radio>
 				</gov-form-group>
 			</gov-form-control>
 			<br>
-			<gov-form-control size="s">
+			<gov-form-control>
 				<gov-form-group>
-					<gov-form-radio name="test2" value="me" >
+					<gov-form-radio name="test2" value="me" size="s">
 						<gov-form-label slot="label">Value 1</gov-form-label>
 					</gov-form-radio>
-					<gov-form-radio name="test2" value="me2" checked>
+					<gov-form-radio name="test2" value="me2" size="s" checked>
 						<gov-form-label slot="label">Value 2</gov-form-label>
 					</gov-form-radio>
 				</gov-form-group>
 			</gov-form-control>
 			<br>
-			<gov-form-control size="m">
+			<gov-form-control>
 				<gov-form-group>
-					<gov-form-radio name="test3" value="me" >
+					<gov-form-radio name="test3" value="me" size="m">
 						<gov-form-label slot="label">Value 1</gov-form-label>
 					</gov-form-radio>
-					<gov-form-radio name="test3" value="me2" checked>
+					<gov-form-radio name="test3" value="me2" size="m" checked>
 						<gov-form-label slot="label">Value 2</gov-form-label>
 					</gov-form-radio>
 				</gov-form-group>
 			</gov-form-control>
 			<br>
-			<gov-form-control size="l">
+			<gov-form-control>
 				<gov-form-group>
-					<gov-form-radio name="test4" value="me" >
+					<gov-form-radio name="test4" value="me" size="l">
 						<gov-form-label slot="label">Value 1</gov-form-label>
 					</gov-form-radio>
-					<gov-form-radio name="test4" value="me2" checked>
+					<gov-form-radio name="test4" value="me2" size="l" checked>
 						<gov-form-label slot="label">Value 2</gov-form-label>
 					</gov-form-radio>
 				</gov-form-group>
 			</gov-form-control>
+
 			<h3>
 				Invalid
 			</h3>
-			<gov-form-control invalid="true" size="xs">
+			<gov-form-control>
 				<gov-form-group>
-					<gov-form-radio name="test5" value="me" >
+					<gov-form-radio name="test5" value="me" size="xs" invalid="true">
 						<gov-form-label slot="label">Value 1</gov-form-label>
 					</gov-form-radio>
-					<gov-form-radio name="test5" value="me2" checked>
+					<gov-form-radio name="test5" value="me2" size="xs" checked invalid="true">
 						<gov-form-label slot="label">Value 2</gov-form-label>
 					</gov-form-radio>
 				</gov-form-group>
@@ -5812,12 +6317,12 @@ class FormsPage extends HTMLElement {
 				</gov-form-message>
 			</gov-form-control>
 			<br>
-			<gov-form-control invalid="true" size="s">
+			<gov-form-control>
 				<gov-form-group>
-					<gov-form-radio name="test6" value="me" >
+					<gov-form-radio name="test6" value="me" size="s" invalid="true">
 						<gov-form-label slot="label">Value 1</gov-form-label>
 					</gov-form-radio>
-					<gov-form-radio name="test6" value="me2" checked>
+					<gov-form-radio name="test6" value="me2" size="s" checked invalid="true">
 						<gov-form-label slot="label">Value 2</gov-form-label>
 					</gov-form-radio>
 				</gov-form-group>
@@ -5827,12 +6332,12 @@ class FormsPage extends HTMLElement {
 				</gov-form-message>
 			</gov-form-control>
 			<br>
-			<gov-form-control invalid="true" size="m">
+			<gov-form-control>
 				<gov-form-group>
-					<gov-form-radio name="test7" value="me" >
+					<gov-form-radio name="test7" value="me" size="m" invalid="true">
 						<gov-form-label slot="label">Value 1</gov-form-label>
 					</gov-form-radio>
-					<gov-form-radio name="test7" value="me2" checked>
+					<gov-form-radio name="test7" value="me2" size="m" checked invalid="true">
 						<gov-form-label slot="label">Value 2</gov-form-label>
 					</gov-form-radio>
 				</gov-form-group>
@@ -5842,12 +6347,12 @@ class FormsPage extends HTMLElement {
 				</gov-form-message>
 			</gov-form-control>
 			<br>
-			<gov-form-control invalid="true" size="l">
+			<gov-form-control>
 				<gov-form-group>
-					<gov-form-radio name="test8" value="me" >
+					<gov-form-radio name="test8" value="me" size="l" invalid="true">
 						<gov-form-label slot="label">Value 1</gov-form-label>
 					</gov-form-radio>
-					<gov-form-radio name="test8" value="me2" checked>
+					<gov-form-radio name="test8" value="me2" size="l" checked invalid="true">
 						<gov-form-label slot="label">Value 2</gov-form-label>
 					</gov-form-radio>
 				</gov-form-group>
@@ -5856,61 +6361,66 @@ class FormsPage extends HTMLElement {
 					Required
 				</gov-form-message>
 			</gov-form-control>
+
 			<h3>
 				Disabled
 			</h3>
-			<gov-form-control size="xs" disabled>
+			<gov-form-control>
 				<gov-form-group>
-					<gov-form-radio name="test9" value="me" >
+					<gov-form-radio name="test9" value="me" size="xs" disabled>
 						<gov-form-label slot="label">Value 1</gov-form-label>
 					</gov-form-radio>
-					<gov-form-radio name="test9" value="me2" checked>
+					<gov-form-radio name="test9" value="me2" size="xs" checked disabled>
 						<gov-form-label slot="label">Value 2</gov-form-label>
 					</gov-form-radio>
 				</gov-form-group>
 			</gov-form-control>
 			<br>
-			<gov-form-control disabled="true" size="s">
+			<gov-form-control>
 				<gov-form-group>
-					<gov-form-radio name="test10" value="me" >
+					<gov-form-radio name="test10" value="me" size="s" disabled="true">
 						<gov-form-label slot="label">Value 1</gov-form-label>
 					</gov-form-radio>
-					<gov-form-radio name="test10" value="me2" checked>
+					<gov-form-radio name="test10" value="me2" size="s" checked disabled="true">
 						<gov-form-label slot="label">Value 2</gov-form-label>
 					</gov-form-radio>
 				</gov-form-group>
 			</gov-form-control>
 			<br>
-			<gov-form-control disabled="true" size="m">
+			<gov-form-control>
 				<gov-form-group>
-					<gov-form-radio name="test11" value="me" >
+					<gov-form-radio name="test11" value="me" size="m" disabled="true">
 						<gov-form-label slot="label">Value 1</gov-form-label>
 					</gov-form-radio>
-					<gov-form-radio name="test11" value="me2" checked>
+					<gov-form-radio name="test11" value="me2" size="m" checked disabled="true">
 						<gov-form-label slot="label">Value 2</gov-form-label>
 					</gov-form-radio>
 				</gov-form-group>
 			</gov-form-control>
 			<br>
-			<gov-form-control disabled="true" size="l">
+			<gov-form-control>
 				<gov-form-group>
-					<gov-form-radio name="test12" value="me" >
+					<gov-form-radio name="test12" value="me" size="l" disabled="true">
 						<gov-form-label slot="label">Value 1</gov-form-label>
 					</gov-form-radio>
-					<gov-form-radio name="test12" value="me2" checked>
+					<gov-form-radio name="test12" value="me2" size="l" checked disabled="true">
 						<gov-form-label slot="label">Value 2</gov-form-label>
 					</gov-form-radio>
 				</gov-form-group>
 			</gov-form-control>
 
+
+			<!-- ----------------------------------------------------------------------------------------------------------------------------- -->
+
+
 			<h2>Select</h2>
 			<h3>
 				Default
 			</h3>
-			<gov-form-control size="m">
+			<gov-form-control>
 				<gov-form-label size="s" slot="top">Souhlasím</gov-form-label>
 				<gov-form-group>
-					<gov-form-select name="test-me">
+					<gov-form-select name="test-me" size="m">
 						<option value="" selected>Placeholder</option>
 						<option value="b">Value B</option>
 						<option value="c">Value C</option>
@@ -5918,10 +6428,10 @@ class FormsPage extends HTMLElement {
 					</gov-form-select>
 				</gov-form-group>
 			</gov-form-control>
-			<gov-form-control size="l">
+			<gov-form-control>
 				<gov-form-label size="s" slot="top">Souhlasím</gov-form-label>
 				<gov-form-group>
-					<gov-form-select name="test-me">
+					<gov-form-select name="test-me" size="l">
 						<option value="a" selected>Value A</option>
 						<option value="b">Value B</option>
 						<option value="c">Value C</option>
@@ -5929,10 +6439,10 @@ class FormsPage extends HTMLElement {
 					</gov-form-select>
 				</gov-form-group>
 			</gov-form-control>
-			<gov-form-control size="xl">
+			<gov-form-control>
 				<gov-form-label size="m" slot="top">Souhlasím</gov-form-label>
 				<gov-form-group>
-					<gov-form-select name="test-me">
+					<gov-form-select name="test-me" size="xl">
 						<option value="a" selected>Value A</option>
 						<option value="b">Value B</option>
 						<option value="c">Value C</option>
@@ -5940,16 +6450,16 @@ class FormsPage extends HTMLElement {
 					</gov-form-select>
 				</gov-form-group>
 			</gov-form-control>
+
 			<h3>
 				Prefix / sufix
 			</h3>
-			<gov-form-control size="m">
+			<gov-form-control>
 				<gov-form-label size="s" slot="top">Souhlasím</gov-form-label>
 				<gov-form-group>
-					<gov-form-select name="test-me">
+					<gov-form-select name="test-me" size="m">
 						<span slot="prefix">$</span>
 						<span slot="sufix">Kč</span>
-
 						<option value="" selected>Placeholder</option>
 						<option value="b">Value B</option>
 						<option value="c">Value C</option>
@@ -5957,13 +6467,12 @@ class FormsPage extends HTMLElement {
 					</gov-form-select>
 				</gov-form-group>
 			</gov-form-control>
-			<gov-form-control size="l">
+			<gov-form-control>
 				<gov-form-label size="s" slot="top">Souhlasím</gov-form-label>
 				<gov-form-group>
-					<gov-form-select name="test-me">
+					<gov-form-select name="test-me" size="l">
 						<span slot="prefix">$</span>
 						<span slot="sufix">Kč</span>
-
 						<option value="a" selected>Value A</option>
 						<option value="b">Value B</option>
 						<option value="c">Value C</option>
@@ -5971,13 +6480,12 @@ class FormsPage extends HTMLElement {
 					</gov-form-select>
 				</gov-form-group>
 			</gov-form-control>
-			<gov-form-control size="l">
+			<gov-form-control>
 				<gov-form-label size="m" slot="top">Souhlasím</gov-form-label>
 				<gov-form-group>
-					<gov-form-select name="test-me">
+					<gov-form-select name="test-me" size="l">
 						<span slot="prefix">$</span>
 						<span slot="sufix">Kč</span>
-
 						<option value="a" selected>Value A</option>
 						<option value="b">Value B</option>
 						<option value="c">Value C</option>
@@ -5985,13 +6493,14 @@ class FormsPage extends HTMLElement {
 					</gov-form-select>
 				</gov-form-group>
 			</gov-form-control>
+
 			<h3>
 				Invalid
 			</h3>
-			<gov-form-control invalid="true" size="m">
+			<gov-form-control>
 				<gov-form-label size="s" slot="top">Souhlasím</gov-form-label>
 				<gov-form-group>
-					<gov-form-select name="test-me">
+					<gov-form-select name="test-me" size="m" invalid="true">
 						<option value="" selected>Placeholder</option>
 						<option value="b">Value B</option>
 						<option value="c">Value C</option>
@@ -6003,10 +6512,10 @@ class FormsPage extends HTMLElement {
 					Required
 				</gov-form-message>
 			</gov-form-control>
-			<gov-form-control invalid="true" size="l">
+			<gov-form-control>
 				<gov-form-label size="s" slot="top">Souhlasím</gov-form-label>
 				<gov-form-group>
-					<gov-form-select name="test-me">
+					<gov-form-select name="test-me" size="l" invalid="true">
 						<option value="" selected>Placeholder</option>
 						<option value="b">Value B</option>
 						<option value="c">Value C</option>
@@ -6018,10 +6527,10 @@ class FormsPage extends HTMLElement {
 					Required
 				</gov-form-message>
 			</gov-form-control>
-			<gov-form-control invalid="true" size="xl">
+			<gov-form-control>
 				<gov-form-label size="m" slot="top">Souhlasím</gov-form-label>
 				<gov-form-group>
-					<gov-form-select name="test-me">
+					<gov-form-select name="test-me" size="xl" invalid="true">
 						<option value="" selected>Placeholder</option>
 						<option value="b">Value B</option>
 						<option value="c">Value C</option>
@@ -6033,13 +6542,14 @@ class FormsPage extends HTMLElement {
 					Required
 				</gov-form-message>
 			</gov-form-control>
+
 			<h3>
 				Disabled
 			</h3>
-			<gov-form-control size="m" disabled>
+			<gov-form-control>
 				<gov-form-label size="s" slot="top">Souhlasím</gov-form-label>
 				<gov-form-group>
-					<gov-form-select name="test-me">
+					<gov-form-select name="test-me" size="m" disabled>
 						<option value="" selected>Placeholder</option>
 						<option value="b">Value B</option>
 						<option value="c">Value C</option>
@@ -6047,10 +6557,10 @@ class FormsPage extends HTMLElement {
 					</gov-form-select>
 				</gov-form-group>
 			</gov-form-control>
-			<gov-form-control disabled="true" size="m">
+			<gov-form-control>
 				<gov-form-label size="s" slot="top">Souhlasím</gov-form-label>
 				<gov-form-group>
-					<gov-form-select name="test-me">
+					<gov-form-select name="test-me" size="m" disabled="true">
 						<option value="" selected>Placeholder</option>
 						<option value="b">Value B</option>
 						<option value="c">Value C</option>
@@ -6058,10 +6568,10 @@ class FormsPage extends HTMLElement {
 					</gov-form-select>
 				</gov-form-group>
 			</gov-form-control>
-			<gov-form-control disabled="true" size="l">
+			<gov-form-control>
 				<gov-form-label size="m" slot="top">Souhlasím</gov-form-label>
 				<gov-form-group>
-					<gov-form-select name="test-me">
+					<gov-form-select name="test-me" size="l" disabled="true">
 						<option value="" selected>Placeholder</option>
 						<option value="b">Value B</option>
 						<option value="c">Value C</option>
@@ -6070,153 +6580,238 @@ class FormsPage extends HTMLElement {
 				</gov-form-group>
 			</gov-form-control>
 
+
+			<!-- ----------------------------------------------------------------------------------------------------------------------------- -->
+
+
 			<h2>Input</h2>
 			<h3>
-				Default
+				Primary
 			</h3>
-			<gov-form-control size="m" type="input" id="metro2">
+			<gov-form-control type="input" id="metro2">
+				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input type="number" id="kapr" name="test-me" placeholder="Placeholder" variant="primary" size="s"></gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control type="input" id="metro2">
 				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
 				<gov-form-group>
-					<gov-form-input type="number" id="kapr" name="test-me" placeholder="Placeholder"></gov-form-input>
+					<gov-form-input type="number" id="kapr" name="test-me" placeholder="Placeholder" variant="primary" size="m"></gov-form-input>
 				</gov-form-group>
 			</gov-form-control>
-			<gov-form-control size="l" type="input" id="metro2">
+			<gov-form-control type="input" id="metro2">
 				<gov-form-label size="s" slot="top">Label of input 3333</gov-form-label>
 				<gov-form-group>
-					<gov-form-input id="kapr" name="test-me" value="Value of input"></gov-form-input>
+					<gov-form-input id="kapr" name="test-me" value="Value of input" variant="primary" size="l"></gov-form-input>
 				</gov-form-group>
 			</gov-form-control>
-			<gov-form-control size="xl" type="input" id="metro2">
+			<gov-form-control type="input" id="metro2">
 				<gov-form-label size="m" slot="top">Label of input</gov-form-label>
 				<gov-form-group>
-					<gov-form-input id="kapr" name="test-me" value="Value of input"></gov-form-input>
+					<gov-form-input id="kapr" name="test-me" value="Value of input" variant="primary" size="xl"></gov-form-input>
 				</gov-form-group>
 			</gov-form-control>
+
 			<h3>
-				Prefix / sufix
+				Secondary
 			</h3>
-			<gov-form-control size="m" type="input" id="metro2">
+			<gov-form-control type="input" id="metro2">
 				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
 				<gov-form-group>
-					<gov-form-input type="number" id="kapr" name="test-me" placeholder="Placeholder">
-						<span slot="prefix">$</span>
-						<span slot="sufix">Kč</span>
-					</gov-form-input>
+					<gov-form-input type="number" id="kapr" name="test-me" placeholder="Placeholder" variant="secondary" size="s"></gov-form-input>
 				</gov-form-group>
 			</gov-form-control>
-			<gov-form-control size="l" type="input" id="metro2">
+			<gov-form-control 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">
-						<span slot="prefix">$</span>
-						<span slot="sufix">Kč</span>
-					</gov-form-input>
+					<gov-form-input type="number" id="kapr" name="test-me" placeholder="Placeholder" variant="secondary" size="m"></gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control type="input" id="metro2">
+				<gov-form-label size="s" slot="top">Label of input 3333</gov-form-label>
+				<gov-form-group>
+					<gov-form-input id="kapr" name="test-me" value="Value of input" variant="secondary" size="l"></gov-form-input>
 				</gov-form-group>
 			</gov-form-control>
-			<gov-form-control size="xl" type="input" id="metro2">
+			<gov-form-control type="input" id="metro2">
 				<gov-form-label size="m" slot="top">Label of input</gov-form-label>
 				<gov-form-group>
-					<gov-form-input id="kapr" name="test-me" value="Value of input">
-						<span slot="prefix">$</span>
-						<span slot="sufix">Kč</span>
-					</gov-form-input>
+					<gov-form-input id="kapr" name="test-me" value="Value of input" variant="secondary" size="xl"></gov-form-input>
 				</gov-form-group>
 			</gov-form-control>
+
 			<h3>
-				Left icon
+				Prefix / sufix
 			</h3>
-			<gov-form-control size="m" type="input" id="metro2">
+			<gov-form-control type="input" id="metro2">
+				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input type="number" id="kapr" name="test-me" placeholder="Placeholder" size="s">
+						<span slot="prefix">$</span>
+						<span slot="sufix">Kč</span>
+					</gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control type="input" id="metro2">
+				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input type="number" id="kapr" name="test-me" placeholder="Placeholder" size="m">
+						<span slot="prefix">$</span>
+						<span slot="sufix">Kč</span>
+					</gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control 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" size="l">
+						<span slot="prefix">$</span>
+						<span slot="sufix">Kč</span>
+					</gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control type="input" id="metro2">
+				<gov-form-label size="m" slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input id="kapr" name="test-me" value="Value of input" size="xl">
+						<span slot="prefix">$</span>
+						<span slot="sufix">Kč</span>
+					</gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+
+			<h3>
+				Left icon
+			</h3>
+			<gov-form-control 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" placeholder="Placeholder">
+					<gov-form-input id="kapr" name="test-me" placeholder="Placeholder" size="s">
 						<gov-icon slot="left-icon" name="info"></gov-icon>
 					</gov-form-input>
 				</gov-form-group>
 			</gov-form-control>
-			<gov-form-control size="l" type="input" id="metro2">
+			<gov-form-control 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">
+					<gov-form-input id="kapr" name="test-me" placeholder="Placeholder" size="m">
 						<gov-icon slot="left-icon" name="info"></gov-icon>
 					</gov-form-input>
 				</gov-form-group>
 			</gov-form-control>
-			<gov-form-control size="xl" type="input" id="metro2">
+			<gov-form-control 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" size="l">
+						<gov-icon slot="left-icon" name="info"></gov-icon>
+					</gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control type="input" id="metro2">
 				<gov-form-label size="m" slot="top">Label of input</gov-form-label>
 				<gov-form-group>
-					<gov-form-input id="kapr" name="test-me" value="Value of input">
+					<gov-form-input id="kapr" name="test-me" value="Value of input" size="xl">
 						<gov-icon slot="left-icon" name="info"></gov-icon>
 					</gov-form-input>
 				</gov-form-group>
 			</gov-form-control>
+
 			<h3>
 				Right icon
 			</h3>
-			<gov-form-control size="m" type="input" id="metro2">
+			<gov-form-control type="input" id="metro2">
+				<gov-form-label slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input id="kapr" name="test-me" placeholder="Placeholder" size="s">
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+					</gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control type="input" id="metro2">
 				<gov-form-label slot="top">Label of input</gov-form-label>
 				<gov-form-group>
-					<gov-form-input id="kapr" name="test-me" placeholder="Placeholder">
+					<gov-form-input id="kapr" name="test-me" placeholder="Placeholder" size="m">
+					<gov-icon slot="right-icon" name="info"></gov-icon>
 					</gov-form-input>
 				</gov-form-group>
 			</gov-form-control>
-			<gov-form-control size="l" type="input" id="metro2">
+			<gov-form-control 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">
+					<gov-form-input id="kapr" name="test-me" value="Value of input" size="l">
 						<gov-icon slot="right-icon" name="info"></gov-icon>
 					</gov-form-input>
 				</gov-form-group>
 			</gov-form-control>
-			<gov-form-control size="xl" type="input" id="metro2">
+			<gov-form-control type="input" id="metro2">
 				<gov-form-label size="m" slot="top">Label of input</gov-form-label>
 				<gov-form-group>
-					<gov-form-input id="kapr" name="test-me" value="Value of input">
+					<gov-form-input id="kapr" name="test-me" value="Value of input" size="xl">
 						<gov-icon slot="right-icon" name="info"></gov-icon>
 					</gov-form-input>
 				</gov-form-group>
 			</gov-form-control>
+
 			<h3>
 				Success
 			</h3>
-			<gov-form-control success="true" size="m" type="input" id="metro2">
+			<gov-form-control type="input" id="metro2" success="true">
+				<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" size="s"></gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control type="input" id="metro2" success="true">
 				<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-form-input>
+					<gov-form-input id="kapr" name="test-me" placeholder="Placeholder" size="m"></gov-form-input>
 				</gov-form-group>
 			</gov-form-control>
-			<gov-form-control success="True" size="l" type="input" id="metro2">
+			<gov-form-control type="input" id="metro2" success="True">
 				<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">
+					<gov-form-input id="kapr" name="test-me" value="Value of input" size="l">
 						<gov-icon slot="right-icon" name="info"></gov-icon>
 					</gov-form-input>
 				</gov-form-group>
 			</gov-form-control>
-			<gov-form-control success="1" size="xl" type="input" id="metro2">
+			<gov-form-control type="input" id="metro2" success="1">
 				<gov-form-label size="m" slot="top">Label of input</gov-form-label>
 				<gov-form-group>
-					<gov-form-input id="kapr" name="test-me" value="Value of input">
+					<gov-form-input id="kapr" name="test-me" value="Value of input" size="xl">
 						<gov-icon slot="left-icon" name="info"></gov-icon>
 					</gov-form-input>
 				</gov-form-group>
 			</gov-form-control>
+
 			<h3>
 				Invalid
 			</h3>
-			<gov-form-control invalid="true" size="m" type="input" id="metro2">
+			<gov-form-control 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" placeholder="Placeholder"></gov-form-input>
+					<gov-form-input id="kapr" name="test-me" placeholder="Placeholder" size="s" invalid="true"></gov-form-input>
 				</gov-form-group>
 				<gov-form-message slot="bottom" variant="error">
 					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
 					Required
 				</gov-form-message>
 			</gov-form-control>
-			<gov-form-control invalid="true" size="l" type="input" id="metro2">
+			<gov-form-control 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">
+					<gov-form-input id="kapr" name="test-me" placeholder="Placeholder" size="m" invalid="true"></gov-form-input>
+				</gov-form-group>
+				<gov-form-message slot="bottom" variant="error">
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
+					Required
+				</gov-form-message>
+			</gov-form-control>
+			<gov-form-control 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" size="l" invalid="true">
 						<gov-icon slot="right-icon" name="info"></gov-icon>
 					</gov-form-input>
 				</gov-form-group>
@@ -6225,10 +6820,10 @@ class FormsPage extends HTMLElement {
 					Required
 				</gov-form-message>
 			</gov-form-control>
-			<gov-form-control invalid="true" size="xl" type="input" id="metro2">
+			<gov-form-control type="input" id="metro2">
 				<gov-form-label size="m" slot="top">Label of input</gov-form-label>
 				<gov-form-group>
-					<gov-form-input id="kapr" name="test-me" value="Value of input">
+					<gov-form-input id="kapr" name="test-me" value="Value of input" size="xl" invalid="true">
 						<gov-icon slot="left-icon" name="info"></gov-icon>
 					</gov-form-input>
 				</gov-form-group>
@@ -6237,34 +6832,47 @@ class FormsPage extends HTMLElement {
 					Required
 				</gov-form-message>
 			</gov-form-control>
+
 			<h3>
 				Disabled
 			</h3>
-			<gov-form-control size="m" type="input" id="metro2" disabled>
+			<gov-form-control size="m" 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" placeholder="Placeholder" size="s" disabled>
+						<gov-icon slot="right-icon" name="info"></gov-icon>
+					</gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control size="m" 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" placeholder="Placeholder">
+					<gov-form-input id="kapr" name="test-me" placeholder="Placeholder" size="m" disabled>
 						<gov-icon slot="right-icon" name="info"></gov-icon>
 					</gov-form-input>
 				</gov-form-group>
 			</gov-form-control>
-			<gov-form-control disabled="True" size="l" type="input" id="metro2">
+			<gov-form-control 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">
+					<gov-form-input id="kapr" name="test-me" value="Value of input" size="l" disabled="True">
 						<gov-icon slot="right-icon" name="info"></gov-icon>
 					</gov-form-input>
 				</gov-form-group>
 			</gov-form-control>
-			<gov-form-control disabled="1" size="xl" type="input" id="metro2">
+			<gov-form-control type="input" id="metro2">
 				<gov-form-label size="m" slot="top">Label of input</gov-form-label>
 				<gov-form-group>
-					<gov-form-input id="kapr" name="test-me" value="Value of input">
+					<gov-form-input id="kapr" name="test-me" value="Value of input" size="xl" disabled="1">
 						<gov-icon slot="left-icon" name="info"></gov-icon>
 					</gov-form-input>
 				</gov-form-group>
 			</gov-form-control>
 
+
+			<!-- ----------------------------------------------------------------------------------------------------------------------------- -->
+
+
 			<h3>
 				Password power
 			</h3>
@@ -6273,35 +6881,38 @@ class FormsPage extends HTMLElement {
 			<gov-form-password-power power="2">střední</gov-form-password-power>
 			<gov-form-password-power power="3">silné</gov-form-password-power>
 
+
+			<!-- ----------------------------------------------------------------------------------------------------------------------------- -->
+
+
 			<h2>Switch</h2>
 			<h3>
 				Default
 			</h3>
-			<gov-form-control size="xs">
+			<gov-form-control>
 				<gov-form-group>
-					<gov-form-switch name="test-me" value="me" checked>
+					<gov-form-switch name="test-me" value="me" size="xs" 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-control>
 				<gov-form-group>
-					<gov-form-switch name="test-me" value="me" checked>
+					<gov-form-switch name="test-me" value="me" size="s" 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-control>
 				<gov-form-group>
-					<gov-form-switch name="test-me" value="me" checked>
+					<gov-form-switch name="test-me" value="me" size="m" 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-control>
 				<gov-form-group>
-					<gov-form-switch name="test-me" value="me" checked>
+					<gov-form-switch name="test-me" value="me" size="l" checked>
 						<gov-form-label slot="label">Souhlasím</gov-form-label>
 					</gov-form-switch>
 				</gov-form-group>
@@ -6310,9 +6921,9 @@ class FormsPage extends HTMLElement {
 			<h3>
 				With message
 			</h3>
-			<gov-form-control size="xs">
+			<gov-form-control>
 				<gov-form-group>
-					<gov-form-switch name="test-me" value="me" checked>
+					<gov-form-switch name="test-me" value="me" size="xs" checked>
 						<gov-form-label slot="label">Souhlasím</gov-form-label>
 					</gov-form-switch>
 				</gov-form-group>
@@ -6321,9 +6932,9 @@ class FormsPage extends HTMLElement {
 					Required
 				</gov-form-message>
 			</gov-form-control>
-			<gov-form-control size="s">
+			<gov-form-control>
 				<gov-form-group>
-					<gov-form-switch name="test-me" value="me" checked>
+					<gov-form-switch name="test-me" value="me" size="s" checked>
 						<gov-form-label slot="label">Souhlasím</gov-form-label>
 					</gov-form-switch>
 				</gov-form-group>
@@ -6332,9 +6943,9 @@ class FormsPage extends HTMLElement {
 					Required
 				</gov-form-message>
 			</gov-form-control>
-			<gov-form-control size="m">
+			<gov-form-control>
 				<gov-form-group>
-					<gov-form-switch name="test-me" value="me" checked>
+					<gov-form-switch name="test-me" value="me" size="m" checked>
 						<gov-form-label slot="label">Souhlasím</gov-form-label>
 					</gov-form-switch>
 				</gov-form-group>
@@ -6343,9 +6954,9 @@ class FormsPage extends HTMLElement {
 					Required
 				</gov-form-message>
 			</gov-form-control>
-			<gov-form-control size="l">
+			<gov-form-control>
 				<gov-form-group>
-					<gov-form-switch name="test-me" value="me" checked>
+					<gov-form-switch name="test-me" value="me" size="l" checked>
 						<gov-form-label slot="label">Souhlasím</gov-form-label>
 					</gov-form-switch>
 				</gov-form-group>
@@ -6354,99 +6965,102 @@ class FormsPage extends HTMLElement {
 					Required
 				</gov-form-message>
 			</gov-form-control>
+
 			<h3>
 				With label
 			</h3>
-			<gov-form-control size="xs">
+			<gov-form-control>
 				<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-switch name="test-me" value="me" size="xs" 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-control>
 				<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-switch name="test-me" value="me" size="s" 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-control>
 				<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-switch name="test-me" value="me" size="m" 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-control>
 				<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-switch name="test-me" value="me" size="l" 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-control type="switch">
 				<gov-form-group>
-					<gov-form-switch name="test-me" value="me">
+					<gov-form-switch name="test-me" value="me" size="xs" disabled>
 						<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-control type="switch">
 				<gov-form-group>
-					<gov-form-switch name="test-me" value="me">
+					<gov-form-switch name="test-me" value="me" size="s" disabled="true">
 						<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-control type="switch">
 				<gov-form-group>
-					<gov-form-switch name="test-me" value="me" checked>
+					<gov-form-switch name="test-me" value="me" size="m" checked disabled="true">
 						<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-control type="switch">
 				<gov-form-group>
-					<gov-form-switch name="test-me" value="me" checked>
+					<gov-form-switch name="test-me" value="me" size="l" checked disabled="true">
 						<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-control>
 				<gov-form-group>
-					<gov-form-switch invalid name="test-me" value="me" checked>
+					<gov-form-switch invalid name="test-me" value="me" size="xs" invalid="True">
 						<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-control>
 				<gov-form-group>
-					<gov-form-switch invalid name="test-me" value="me" checked>
+					<gov-form-switch invalid name="test-me" value="me" size="s" invalid="TRUE">
 						<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-control>
 				<gov-form-group>
-					<gov-form-switch invalid name="test-me" value="me" checked>
+					<gov-form-switch invalid name="test-me" value="me" size="m" invalid="true" 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-control>
 				<gov-form-group>
-					<gov-form-switch invalid name="test-me" value="me" checked>
+					<gov-form-switch invalid name="test-me" value="me" size="l" invalid="1" checked>
 						<gov-form-label slot="label">Souhlasím</gov-form-label>
 					</gov-form-switch>
 				</gov-form-group>
@@ -6471,101 +7085,6 @@ if (customElements.get('forms-restructue-page') === undefined) {
   customElements.define('forms-restructue-page', FormsRestructurePage);
 }
 
-class FormLabelPage extends HTMLElement {
-  connectedCallback() {
-    this.innerHTML = `
-			<gov-form-label>
-				Form Label
-			</gov-form-label>
-	`;
-  }
-}
-if (customElements.get('form-label-page') === undefined) {
-  customElements.define('form-label-page', FormLabelPage);
-}
-
-class FormMessagePage extends HTMLElement {
-  connectedCallback() {
-    this.innerHTML = `
-			<gov-form-message>
-				<gov-icon slot="icon" name="info"></gov-icon>
-				<p>
-					Default
-				</p>
-			</gov-form-message>
-			<gov-form-message>
-				<p>
-					Default
-				</p>
-			</gov-form-message>
-			<gov-form-message variant="secondary">
-				<gov-icon name="info" slot="icon"></gov-icon>
-				<p>
-					Secondary
-				</p>
-			</gov-form-message>
-			<gov-form-message variant="secondary">
-				<p>
-					Secondary
-				</p>
-			</gov-form-message>
-			<gov-form-message variant="error">
-				<gov-icon slot="icon" name="info"></gov-icon>
-				<p>
-					Error
-				</p>
-			</gov-form-message>
-			<gov-form-message variant="error">
-				<p>
-					Error
-				</p>
-			</gov-form-message>
-			<gov-form-message variant="warning">
-				<gov-icon slot="icon" name="info"></gov-icon>
-				<p>
-					Warning
-				</p>
-			</gov-form-message>
-			<gov-form-message variant="warning">
-				<p>
-					Warning
-				</p>
-			</gov-form-message>
-			<gov-form-message variant="success">
-				<gov-icon slot="icon" name="info"></gov-icon>
-				<p>
-					Success
-				</p>
-			</gov-form-message>
-			<gov-form-message variant="success">
-				<p>
-					Success
-				</p>
-			</gov-form-message>
-			<gov-form-message>
-				<gov-icon slot="icon" name="info"></gov-icon>
-				<p>
-					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae dapibus eros, a dapibus metus. Ut a leo lorem. Sed ut fermentum diam. Sed porttitor ligula est, eget lobortis lacus rutrum et. Nunc sapien arcu, faucibus sit amet justo vel, aliquam gravida magna. Pellentesque et tempor risus. 
-				</p>
-				<p>
-					Aliquam suscipit justo dolor, et pellentesque dui venenatis quis. Vestibulum dignissim libero urna, non ultricies neque consequat ut.
-				</p>
-			</gov-form-message>
-			<gov-form-message>
-				<p>
-					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae dapibus eros, a dapibus metus. Ut a leo lorem. Sed ut fermentum diam. Sed porttitor ligula est, eget lobortis lacus rutrum et. Nunc sapien arcu, faucibus sit amet justo vel, aliquam gravida magna. Pellentesque et tempor risus. 
-				</p>
-				<p>
-					Aliquam suscipit justo dolor, et pellentesque dui venenatis quis. Vestibulum dignissim libero urna, non ultricies neque consequat ut.
-				</p>
-			</gov-form-message>
-	`;
-  }
-}
-if (customElements.get('form-message-page') === undefined) {
-  customElements.define('form-message-page', FormMessagePage);
-}
-
 class GridPage extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
@@ -6658,6 +7177,15 @@ if (customElements.get('grid-page') === undefined) {
   customElements.define('grid-page', GridPage);
 }
 
+class HomePage extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = ``;
+  }
+}
+if (customElements.get('home-page') === undefined) {
+  customElements.define('home-page', HomePage);
+}
+
 class LayoutPage extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
@@ -6755,6 +7283,101 @@ if (customElements.get('layout-page') === undefined) {
   customElements.define('layout-page', LayoutPage);
 }
 
+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>
+			<div class="preview-container">
+      <div class="skeletons-defaults">
+        <h2>Default</h2>
+        <gov-skeleton variant="success"></gov-skeleton>     
+      </div>
+      <div class="skeletons-appearance-circle">
+        <h2>Default circle</h2>
+        <gov-skeleton shape="circle"> </gov-skeleton>
+      </div> 
+      <div class="skeletons-appearance-circle">
+        <h2>Default rect</h2>
+        <gov-skeleton shape="rect"> </gov-skeleton>
+      </div>       
+      <div class="skeletons-with-count">
+        <h2>Default 4 rows</h2>
+        <gov-skeleton count="2"></gov-skeleton>
+      </div>           
+      <div class="skeletons-animation-no-animation">
+        <h2>Without animation</h2>
+        <gov-skeleton animation="false"></gov-skeleton>
+      </div>
+      <div class="skeletons-animation-pulse">
+        <h2>Pulse animation</h2>
+        <gov-skeleton animation="pulse"></gov-skeleton>
+      </div>
+      <div class="skeletons-animation-progress">
+        <h2>Progress animation</h2>
+        <gov-skeleton animation="progress"></gov-skeleton>
+      </div>
+      <div class="skeletons-with-theming">
+        <h2>Custom styles</h2>
+        <style>
+          .custom-skeleton {
+            --skeleton-width: 100px;
+            --skeleton-height: 100px;
+            --skeleton-background: #cccccc;
+            --skeleton-border-radius: 20px;
+          }
+        </style>
+        <gov-skeleton></gov-skeleton>
+      </div>
+      <div>
+        <h2>Custom width</h2>
+        <gov-skeleton width="500px"></gov-skeleton>
+      </div>
+      <div>
+        <h2>Custom height</h2>
+        <gov-skeleton height="80px"></gov-skeleton>
+      </div>
+    </div>
+			
+			
+			<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 MessagePage extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
@@ -6820,155 +7443,45 @@ class MessagePage extends HTMLElement {
 				</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 {
-  connectedCallback() {
-    setTimeout(function () {
-      document.getElementById('btn').addEventListener('gov-click', function () {
-        document.getElementById('modal').setAttribute('open', 'true');
-      });
-    }, 500);
-    this.innerHTML = `
-			<h2>Modal</h2>
-			<gov-button variant="primary" id="btn" wcag-label="Zobrazit formulář o výši dávky">Vyplnit formulář</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-modal label="Podání daňového přiznání" id="modal" wcag-close-label="Zavřít modal žádosti o dávku">
-				<gov-icon slot="icon" name="info"></gov-icon>
-				<h3>Obsah modálního okna</h3>
-				<p>Bude tvořen libovolnými komponentami</p>
-				<h3>Obsah modálního okna</h3>
-				<p>
-					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eros libero, pulvinar vitae tempor at, laoreet quis mi. Vivamus vitae orci mi. Sed eget nisi convallis, condimentum diam a, fermentum risus. Proin vulputate pretium nisi sit amet commodo. Fusce ac magna velit. Maecenas sit amet sem quis arcu lobortis varius a non urna. Morbi ex neque, tempor bibendum sagittis vitae, vulputate ut nibh. Vestibulum sit amet pretium metus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut molestie varius nisi, sed mattis quam mollis vulputate. Morbi semper, purus sed ornare sodales, risus tellus porta massa, et eleifend erat diam vitae ex.
-				</p>
-				<p>
-					Suspendisse quis justo nibh. Aenean id purus mattis, posuere urna a, blandit magna. Aenean a ante eleifend, ornare ipsum quis, bibendum mauris. Integer eget posuere sem, in tincidunt quam. Phasellus massa erat, sodales vel hendrerit vitae, ultrices quis dolor. Fusce id vestibulum sem, eu pretium sem. Praesent lacinia, odio non aliquam cursus, arcu ipsum ornare diam, vitae pharetra erat dui non velit. Quisque eu tempus mi. Nam a diam mauris. Quisque sollicitudin risus eu neque accumsan vulputate. Ut tincidunt metus eu nulla sodales, vitae dictum justo ornare. In tincidunt lobortis nunc, ac imperdiet odio condimentum nec. Ut aliquet pulvinar ligula vitae tincidunt. Phasellus egestas ut leo pretium laoreet. Fusce et vestibulum purus. Duis semper sem massa, non dignissim nunc aliquam sit amet.
-				</p>
-				<p>
-					Praesent blandit mattis neque varius sagittis. Nulla ac scelerisque justo. Vestibulum aliquet blandit pharetra. Quisque lacus mi, tincidunt ac dui at, lobortis efficitur nisi. Fusce laoreet maximus purus, sit amet pulvinar mauris facilisis in. Integer fermentum elit eu aliquam sodales. Curabitur laoreet pharetra est rutrum posuere. In at eros tempus ex sodales facilisis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras placerat dolor ac urna elementum facilisis. Aenean diam nibh, sollicitudin in porta sed, laoreet in nisl. Ut scelerisque tortor augue, vitae fermentum dui ornare non. Nulla fringilla libero non metus venenatis, eu maximus massa placerat. Praesent elementum convallis metus, vel iaculis sem pretium cursus.
-				</p>
-				<gov-button slot="footer" variant="primary" wcag-label="Vyplnit formulář o výši dávky">Vyplnit formulář</gov-button>
-			</gov-modal>
-		`;
-  }
-}
-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>
-			<div class="preview-container">
-      <div class="skeletons-defaults">
-        <h2>Default</h2>
-        <gov-skeleton variant="success"></gov-skeleton>     
-      </div>
-      <div class="skeletons-appearance-circle">
-        <h2>Default circle</h2>
-        <gov-skeleton shape="circle"> </gov-skeleton>
-      </div> 
-      <div class="skeletons-appearance-circle">
-        <h2>Default rect</h2>
-        <gov-skeleton shape="rect"> </gov-skeleton>
-      </div>       
-      <div class="skeletons-with-count">
-        <h2>Default 4 rows</h2>
-        <gov-skeleton count="2"></gov-skeleton>
-      </div>           
-      <div class="skeletons-animation-no-animation">
-        <h2>Without animation</h2>
-        <gov-skeleton animation="false"></gov-skeleton>
-      </div>
-      <div class="skeletons-animation-pulse">
-        <h2>Pulse animation</h2>
-        <gov-skeleton animation="pulse"></gov-skeleton>
-      </div>
-      <div class="skeletons-animation-progress">
-        <h2>Progress animation</h2>
-        <gov-skeleton animation="progress"></gov-skeleton>
-      </div>
-      <div class="skeletons-with-theming">
-        <h2>Custom styles</h2>
-        <style>
-          .custom-skeleton {
-            --skeleton-width: 100px;
-            --skeleton-height: 100px;
-            --skeleton-background: #cccccc;
-            --skeleton-border-radius: 20px;
-          }
-        </style>
-        <gov-skeleton></gov-skeleton>
-      </div>
-      <div>
-        <h2>Custom width</h2>
-        <gov-skeleton width="500px"></gov-skeleton>
-      </div>
-      <div>
-        <h2>Custom height</h2>
-        <gov-skeleton height="80px"></gov-skeleton>
-      </div>
-    </div>
-			
-			
-			<gov-button variant="primary" id="btn" wcag-label="Zobrazit načítání">Zobrazit načítání</gov-button>
+			<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 {
+  connectedCallback() {
+    setTimeout(function () {
+      document.getElementById('btn').addEventListener('gov-click', function () {
+        document.getElementById('modal').setAttribute('open', 'true');
+      });
+    }, 500);
+    this.innerHTML = `
+			<h2>Modal</h2>
+			<gov-button variant="primary" id="btn" wcag-label="Zobrazit formulář o výši dávky">Vyplnit formulář</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>
@@ -6993,12 +7506,27 @@ class LoadingPage 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>
 
-			<gov-loading id="loading">Načítání</gov-loading>
+			<gov-modal label="Podání daňového přiznání" id="modal" wcag-close-label="Zavřít modal žádosti o dávku">
+				<gov-icon slot="icon" name="info"></gov-icon>
+				<h3>Obsah modálního okna</h3>
+				<p>Bude tvořen libovolnými komponentami</p>
+				<h3>Obsah modálního okna</h3>
+				<p>
+					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eros libero, pulvinar vitae tempor at, laoreet quis mi. Vivamus vitae orci mi. Sed eget nisi convallis, condimentum diam a, fermentum risus. Proin vulputate pretium nisi sit amet commodo. Fusce ac magna velit. Maecenas sit amet sem quis arcu lobortis varius a non urna. Morbi ex neque, tempor bibendum sagittis vitae, vulputate ut nibh. Vestibulum sit amet pretium metus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut molestie varius nisi, sed mattis quam mollis vulputate. Morbi semper, purus sed ornare sodales, risus tellus porta massa, et eleifend erat diam vitae ex.
+				</p>
+				<p>
+					Suspendisse quis justo nibh. Aenean id purus mattis, posuere urna a, blandit magna. Aenean a ante eleifend, ornare ipsum quis, bibendum mauris. Integer eget posuere sem, in tincidunt quam. Phasellus massa erat, sodales vel hendrerit vitae, ultrices quis dolor. Fusce id vestibulum sem, eu pretium sem. Praesent lacinia, odio non aliquam cursus, arcu ipsum ornare diam, vitae pharetra erat dui non velit. Quisque eu tempus mi. Nam a diam mauris. Quisque sollicitudin risus eu neque accumsan vulputate. Ut tincidunt metus eu nulla sodales, vitae dictum justo ornare. In tincidunt lobortis nunc, ac imperdiet odio condimentum nec. Ut aliquet pulvinar ligula vitae tincidunt. Phasellus egestas ut leo pretium laoreet. Fusce et vestibulum purus. Duis semper sem massa, non dignissim nunc aliquam sit amet.
+				</p>
+				<p>
+					Praesent blandit mattis neque varius sagittis. Nulla ac scelerisque justo. Vestibulum aliquet blandit pharetra. Quisque lacus mi, tincidunt ac dui at, lobortis efficitur nisi. Fusce laoreet maximus purus, sit amet pulvinar mauris facilisis in. Integer fermentum elit eu aliquam sodales. Curabitur laoreet pharetra est rutrum posuere. In at eros tempus ex sodales facilisis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras placerat dolor ac urna elementum facilisis. Aenean diam nibh, sollicitudin in porta sed, laoreet in nisl. Ut scelerisque tortor augue, vitae fermentum dui ornare non. Nulla fringilla libero non metus venenatis, eu maximus massa placerat. Praesent elementum convallis metus, vel iaculis sem pretium cursus.
+				</p>
+				<gov-button slot="footer" variant="primary" wcag-label="Vyplnit formulář o výši dávky">Vyplnit formulář</gov-button>
+			</gov-modal>
 		`;
   }
 }
-if (customElements.get('loading-page') === undefined) {
-  customElements.define('loading-page', LoadingPage);
+if (customElements.get('modal-page') === undefined) {
+  customElements.define('modal-page', ModalPage);
 }
 
 class NavPage extends HTMLElement {
@@ -7045,11 +7573,11 @@ class PaginationPage extends HTMLElement {
     this.innerHTML = `
 		<h2>Pagination</h2>
 
-		<gov-pagination id="bagr" total="212" wcag-label="Stránkování pro sekci dokumenty" wcag-select-label="Vybrat stránku"></gov-pagination>
+		<gov-pagination total="212" wcag-label="Stránkování pro sekci dokumenty" wcag-select-label="Vybrat stránku"></gov-pagination>
 		<br>
 		<gov-pagination size="s" total="212" wcag-label="Stránkování pro sekci dokumenty" wcag-select-label="Vybrat stránku"></gov-pagination>
 		<br>
-		<gov-pagination type="select" total="212"  wcag-label="Stránkování pro sekci dokumenty" wcag-select-label="Vybrat stránku"></gov-pagination>
+		<gov-pagination  id="bagr"  type="select" total="212"  wcag-label="Stránkování pro sekci dokumenty" wcag-select-label="Vybrat stránku"></gov-pagination>
 		<br>
 		<gov-pagination type="select" size="s" total="212"  wcag-label="Stránkování pro sekci dokumenty" wcag-select-label="Vybrat stránku"></gov-pagination>
 		<br>
@@ -7982,9 +8510,127 @@ if (customElements.get('tiles-page') === undefined) {
   customElements.define('tiles-page', TilesPage);
 }
 
+class ToastMessagePage extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+		<h2>
+			Toast Message
+		</h2>
+		<gov-toast variant="success">
+			<gov-icon name="check-lg" slot="icon"></gov-icon>
+			<p>
+				Vaše dokumenty byly úspěšně staženy.
+			</p>
+		</gov-toast>
+		<br>
+		<gov-toast variant="error" 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" 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" 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"  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('toast-message-page') === undefined) {
+  customElements.define('toast-message-page', ToastMessagePage);
+}
+
+class ToastMessageCountdownPage extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+		<h2>
+			Toast Message Countdown
+		</h2>
+		<gov-toast variant="success" type="solid">
+			<gov-icon name="check-lg" 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('toast-message-countdown-page') === undefined) {
+  customElements.define('toast-message-countdown-page', ToastMessageCountdownPage);
+}
+
 class TooltipPage extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
+			<div style="width: 500px; overflow: auto; height: 100px">
+				<div style="width: 800px; display: flex; flex-direction: row; height: 100px; gap: 20px">
+					<div style="width: 100px; border: 1px solid black; height: 100px"></div>
+					<div style="width: 100px; border: 1px solid black; height: 100px"></div>
+					<div style="width: 100px; border: 1px solid black; height: 100px"></div>
+					<div style="width: 100px; border: 1px solid black; height: 100px"></div>
+					<div style="width: 100px; border: 1px solid black; height: 100px"></div>
+					<div style="width: 100px; border: 1px solid black; height: 100px"></div>
+					<div style="width: 100px; border: 1px solid black; height: 100px"></div>
+					<div style="width: 100px; border: 1px solid black; height: 100px"></div>
+					<div style="width: 100px; border: 1px solid black; height: 100px"></div>
+					<div style="width: 100px; border: 1px solid black; height: 100px">
+					<gov-tooltip position="right" size="s" icon>
+					<gov-icon name="info"></gov-icon>
+					<gov-tooltip-content>
+						<ul>
+							<li>Toggler div, h1, h2 rozbije celou komponentu. </li>
+							<li>Můžu použít tagy jako span, anchor, gov-icon - inlinové. Zde je použita ikonka z knihovny font-awesome</li>
+						</ul>
+					</gov-tooltip-content>
+				</gov-tooltip>
+</div>
+				</div>
+			</div>
 			<p>
 				Default scheme, size Small. Nelze umístit jako toggle element který je blokový - tj. div, h1, h2, atp.
 				<gov-tooltip position="right" size="s" icon>
@@ -8194,100 +8840,6 @@ if (customElements.get('typography-page') === undefined) {
   customElements.define('typography-page', TypographyPage);
 }
 
-class ToastMessagePage extends HTMLElement {
-  connectedCallback() {
-    this.innerHTML = `
-		<h2>
-			Toast Message
-		</h2>
-		<gov-toast variant="success">
-			<gov-icon name="check-lg" slot="icon"></gov-icon>
-			<p>
-				Vaše dokumenty byly úspěšně staženy.
-			</p>
-		</gov-toast>
-		<br>
-		<gov-toast variant="error" 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" 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" 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"  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('toast-message-page') === undefined) {
-  customElements.define('toast-message-page', ToastMessagePage);
-}
-
-class ToastMessageCountdownPage extends HTMLElement {
-  connectedCallback() {
-    this.innerHTML = `
-		<h2>
-			Toast Message Countdown
-		</h2>
-		<gov-toast variant="success" type="solid">
-			<gov-icon name="check-lg" 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('toast-message-countdown-page') === undefined) {
-  customElements.define('toast-message-countdown-page', ToastMessageCountdownPage);
-}
-
 class WizzardPage extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
@@ -8398,6 +8950,7 @@ const GovApp$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
       { path: '/message', component: 'message-page' },
       { path: '/cookiebar', component: 'cookiebar-page' },
       { path: '/container', component: 'container-page' },
+      { path: '/control-group', component: 'control-group-page' },
       { path: '/empty', component: 'empty-page' },
       { path: '/error', component: 'error-page' },
       { path: '/forms', component: 'forms-page' },